@zohodesk/permissions

permissions licenses and plans, user validations handling for whole app

Usage no npm install needed!

<script type="module">
  import zohodeskPermissions from 'https://cdn.skypack.dev/@zohodesk/permissions';
</script>

README

Restriction validation for your app

Creating Restriction Rules/ Read only messages for your app


import { READ_ONLY, SHOW, HIDE }  from '@zohodesk/permissions'

const restrictionRules = {
  <group-name>: {
    <features>: {
      <feature-action-1>: [SHOW, READ_ONLY],  //In array 1th position meant can we show ?, 2st position meant to can we readOnly ?
      <feature-action-2>: [SHOW, READ_ONLY],
      <feature-action-3>: [HIDE]
      }
    }
  }
};

const readyOnlyMessages = {
  <group-name>: {
    <features>: {
      <feature-action-1>: message ,
      <feature-action-2>: message ,
      <feature-action-3>: message
    }
  }
};

Restriction Rules

const restrictionRules = {
  tickets: {
    isSpam: {
      secondaryContact: [SHOW, READ_ONLY],
      timeline: [HIDE],
      mergeTicket: [SHOW, READ_ONLY],
       edit : [SHOW]
      }
    },
    bluePrintApplied: {
      status: [SHOW, READ_ONLY],
      move: [HIDE],
      edit : [HIDE]
    }
  },
  contacts: {
    anonymous_users : {
      edit: [HIDE],
      follow: [HIDE],
      add_tickets: [SHOW, READ_ONLY],
      add_products: [SHOW]
      }
    }
  }
  
};

Read Only Messages

const readOnlyMessages = {
  contacts: {
    anonymous_users: {
      edit: 'support.contacts.edit.field.locked',
      add_tickets: 'support.add_tickets.field.locked',
      add_products: 'support.add_products.field.locked'
    }
};

Permissions for your app

    const permission = {
        "tickets" : {
            create: true,
            delete: true,
            edit: true,
            export: true,
            import: true,
            view: true
        }
        
    }
    

license for your app

    const license = {
        agentAllowed: true,
        agentMaxCount: "100",
        manualTimeTrackingAllowed: true,
        ticketTemplateAllowed: true,
        timeTrackingAllowed: true,
        twilioAllowed: true,
        webFormsAllowed: true
    }
    

How to use in app


import { PermissionProvider }  from '@zohodesk/permissions'
<PermissionProvider
    {permission} 
    {license}
    {restrictionRules}
    {lockMessages}
>
{component}
</PermissionProvider>

Restriction handling into your app using util methods

How to use the it.
import { restrictionProviderUtils }  from '@zohodesk/permissions';
restrictionProviderUtils.getRestriction(features=[...], group-name , feature-action-1);

restrictionProviderUtils.getRestriction(['isSpam','bluePrintApplied'],'tickets','edit')
restrictionProviderUtils.getRestriction('isSpam','tickets','edit')

Restriction handling into your app using components

How to use the it.
import { RestrictionValidator }  from '@zohodesk/permissions';

<RestrictionValidator module={group-name}
    features={features [] or feature string} 
    action={feature or action}>
      
      {({isReadOnly,readOnlyMessage})=>{
      
        return (<span>
          <Icon name='ZD-addNew' iconClass={iconClass} /> Add product
        </span>)
      
      }}
       
</RestrictionValidator>

YourComponent - we will add few props based on the restriction values - ReadOnly, readOnlyMessage isShow : false - By default, we will return null. In this case children won't be rendered.

<RestrictionValidator module={group-name}
        features={features [] or feature string} 
        action={feature or action}>
        
      <YourComponent />
      
  </RestrictionValidator>
  

handleShowHide - you can handle the show/hide 'isShow' into you component, simply passing props handleShowHide={false}

<RestrictionValidator module={group-name} handleShowHide={false}
        features={features [] or feature string} 
        action={feature or action}>
        
       {({isShow,isReadOnly,readOnlyMessage})=>{
      
        if(!isShow){
            return (<span>Add Contact</span>)
        }
        
        return (<span>
          <Icon name='ZD-addNew' iconClass={iconClass} /> Add product
        </span>)
      
      }}
      
  </RestrictionValidator>

License and Permission validation for your app

import {  licensePermissionCheckHOC }  from '@zohodesk/permissions';

licensePermissionCheckHOC({
    validation : {
        license : ... ,
        permission : ...
    },
    
    customValdation : {...},
    
    Fallback : func..
})(YourComponent);

license - used to verify with user license. * , Any other permission - used to verify with user permissions. * , Any other * - Means all.

License Permission validation in connected components


import { connect } from 'react-redux';
import { compose } from 'redux';
import { getPermission } from 'provider';
import { ALL , licensePermissionCheckHOC }  from '@zohodesk/permissions';

export defult compose(connect(...),
licensePermissionCheckHOC({
    validation : {
        license : ALL,
        permission : getPermission("tickets", "create")
    },
    
    customValdation : {...},
    
    Fallback : func..

})
)(YourComponent);

License Permission validation in connected components AND OR Operations ==> && , ||


import { connect } from 'react-redux';
import { compose } from 'redux';
import { getPermission } from 'provider';
import { ALL , licensePermissionCheckHOC }  from '@zohodesk/permissions';

export defult compose(connect(...),
licensePermissionCheckHOC({
    validation : {
        license : ALL,
        permission : getPermission("tickets", "create") + "&&"+ getPermission("tickets", "edit")
    },
    
    customValdation : {...},
    
    Fallback : func..

})
)(YourComponent);

License Permission validation with custom permission checks.


let YourComponentNew =  licensePermissionCheckHOC({

    validation : {
        license : ALL,
        permission : ALL
    },
    
    customValdation : {
        canMove :(props)=>{
            
            let { module , checkMoveOption } = props;
            
            let permission = `${module}_view`;
            if(crossDepartmentsMove){
                permission += `&&${module}_crossDepartmentMove`
            }
            
            return {
                permission ,
                obj : true,
                falseObj : false
            }
            
        }
        
    },
    
    Fallback : func..

})(YourComponent);

<YourComponentNew  module="tickets" checkMoveOption={true} />
<YourComponentNew  module="tasks" checkMoveOption={true} />

License Permission validation with your app using util methods


import { licensePermissionProviderUtils } from '@zohodesk/permissions';

let {licenseSuccess, permissionSuccess, permissionProps, failedCases} = licensePermissionProviderUtils.getLicensePermissionCheck({
    license : ALL,
    permission : ALL
});

if(licenseSuccess && permissionSuccess){  
  return <Component />
}

License Permission validation with LicensePermissionHandler direct handling.

import { LicensePermissionHandler } from '@zohodesk/permissions';

<LicensePermissionHandler 
    SuccessComponent={YourComponent}
    FallbackComponent={null}
    validationProps={{
        license : ALL,
        permission : ALL
    }}
/>