JSPM

  • Created
  • Published
  • Downloads 81
  • Score
    100M100P100Q81949F
  • License MIT

permissions licenses and plans, user validations handling for whole app

Package Exports

  • @zohodesk/permissions

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@zohodesk/permissions) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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
    }}
/>