feat: add customer & vendor ability.

src/containers/Customers/CustomersLanding/CustomersActionsBar.js

@@ -14,6 +14,7 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import {
   If,
   Icon,
+  Can,
   FormattedMessage as T,
   DashboardActionViewsList,
   AdvancedFilterPopover,
@@ -29,6 +30,10 @@ import withCustomersActions from './withCustomersActions';
 import withAlertActions from 'containers/Alert/withAlertActions';
 import withSettingsActions from '../../Settings/withSettingsActions';
 import withSettings from '../../Settings/withSettings';
+import {
+  Customer_Abilities,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 import { compose } from 'utils';
 
@@ -103,7 +108,7 @@ function CustomerActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-
+        <Can I={Customer_Abilities.Create} a={AbilitySubject.Item}>
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon={'plus'} />}
@@ -111,7 +116,7 @@ function CustomerActionsBar({
             onClick={onClickNewCustomer}
           />
           <NavbarDivider />
-
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: customersFilterConditions,
@@ -152,11 +157,13 @@ function CustomerActionsBar({
           onChange={handleTableRowSizeChange}
         />
         <NavbarDivider />
+        <Can I={Customer_Abilities.Edit} a={AbilitySubject.Customer}>
           <Switch
             labelElement={<T id={'inactive'} />}
             defaultChecked={accountsInactiveMode}
             onChange={handleInactiveSwitchChange}
           />
+        </Can>
       </NavbarGroup>
       <NavbarGroup align={Alignment.RIGHT}>
         <Button

src/containers/Customers/CustomersLanding/components.js

@@ -4,7 +4,11 @@ import clsx from 'classnames';
 
 import intl from 'react-intl-universal';
 
-import { Icon, Money, If, AvaterCell } from 'components';
+import { Can, Icon, Money, If, AvaterCell } from 'components';
+import {
+  Customer_Abilities,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 import { safeCallback } from 'utils';
 
@@ -29,17 +33,23 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
+      <Can I={Customer_Abilities.Edit} a={AbilitySubject.Customer}>
         <MenuDivider />
+
         <MenuItem
           icon={<Icon icon="pen-18" />}
           text={intl.get('edit_customer')}
           onClick={safeCallback(onEdit, original)}
         />
+      </Can>
+      <Can I={Customer_Abilities.Create} a={AbilitySubject.Customer}>
         <MenuItem
           icon={<Icon icon="duplicate-16" />}
           text={intl.get('duplicate')}
           onClick={safeCallback(onDuplicate, original)}
         />
+      </Can>
+      <Can I={Customer_Abilities.Edit} a={AbilitySubject.Customer}>
         <If condition={original.active}>
           <MenuItem
             text={intl.get('inactivate_customer')}
@@ -54,12 +64,15 @@ export function ActionsMenu({
             onClick={safeCallback(onActivate, original)}
           />
         </If>
+      </Can>
+      <Can I={Customer_Abilities.Delete} a={AbilitySubject.Customer}>
         <MenuItem
           icon={<Icon icon="trash-16" iconSize={16} />}
           text={intl.get('delete_customer')}
           intent={Intent.DANGER}
           onClick={safeCallback(onDelete, original)}
         />
+      </Can>
     </Menu>
   );
 }

src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.js

@@ -21,8 +21,15 @@ import { useCustomerDetailsDrawerContext } from './CustomerDetailsDrawerProvider
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Icon, FormattedMessage as T } from 'components';
+import { Can, Icon, FormattedMessage as T } from 'components';
-
+import {
+  AbilitySubject,
+  Invoice_Abilities,
+  Estimate_Abilities,
+  Receipt_Abilities,
+  Payment_Receive_Abilities,
+  Customer_Abilities,
+} from '../../../common/abilityOption';
 import { compose } from 'utils';
 
 /**
@@ -74,22 +81,34 @@ function CustomerDetailsActionsBar({
         <Popover
           content={
             <Menu>
+              <Can I={Invoice_Abilities.Create} a={AbilitySubject.Invoice}>
                 <MenuItem
                   text={<T id={'customer.drawer.action.new_invoice'} />}
                   onClick={handleNewInvoiceClick}
                 />
+              </Can>
+              <Can I={Estimate_Abilities.Create} a={AbilitySubject.Estimate}>
                 <MenuItem
                   text={<T id={'customer.drawer.action.new_estimate'} />}
                   onClick={handleNewEstimateClick}
                 />
+              </Can>
+              <Can I={Receipt_Abilities.Create} a={AbilitySubject.Receipt}>
                 <MenuItem
                   text={<T id={'customer.drawer.action.new_receipt'} />}
                   onClick={handleNewReceiptClick}
                 />
+              </Can>
+
+              <Can
+                I={Payment_Receive_Abilities.Create}
+                a={AbilitySubject.PaymentReceive}
+              >
                 <MenuItem
                   text={<T id={'customer.drawer.action.new_payment'} />}
                   onClick={handleNewPaymentClick}
                 />
+              </Can>
             </Menu>
           }
           minimal={true}
@@ -104,7 +123,7 @@ function CustomerDetailsActionsBar({
         </Popover>
 
         <NavbarDivider />
-
+        <Can I={Customer_Abilities.Edit} a={AbilitySubject.Customer}>
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon="pen-18" />}
@@ -112,6 +131,8 @@ function CustomerDetailsActionsBar({
             onClick={handleEditContact}
           />
           <NavbarDivider />
+        </Can>
+        <Can I={Customer_Abilities.Delete} a={AbilitySubject.Customer}>
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon={'trash-16'} iconSize={16} />}
@@ -119,6 +140,7 @@ function CustomerDetailsActionsBar({
             intent={Intent.DANGER}
             onClick={handleDeleteCustomer}
           />
+        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );

src/containers/Drawers/VendorDetailsDrawer/VendorDetailsActionsBar.js

@@ -20,8 +20,13 @@ import { useVendorDetailsDrawerContext } from './VendorDetailsDrawerProvider';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Icon, FormattedMessage as T } from 'components';
+import { Can, Icon, FormattedMessage as T } from 'components';
-
+import {
+  AbilitySubject,
+  Invoice_Abilities,
+  Payment_Made_Abilities,
+  Vendor_Abilities,
+} from '../../../common/abilityOption';
 import { safeCallback, compose } from 'utils';
 
 /**
@@ -64,14 +69,21 @@ function VendorDetailsActionsBar({
         <Popover
           content={
             <Menu>
+              <Can I={Invoice_Abilities.Create} a={AbilitySubject.Invoice}>
                 <MenuItem
                   text={<T id={'vendor.drawer.action.new_invoice'} />}
                   onClick={handleNewInvoiceClick}
                 />
+              </Can>
+              <Can
+                I={Payment_Made_Abilities.Create}
+                a={AbilitySubject.PaymentMade}
+              >
                 <MenuItem
                   text={<T id={'vendor.drawer.action.new_payment'} />}
                   onClick={handleNewPaymentClick}
                 />
+              </Can>
             </Menu>
           }
           minimal={true}
@@ -84,9 +96,8 @@ function VendorDetailsActionsBar({
             icon={<Icon icon={'plus'} />}
           />
         </Popover>
-
         <NavbarDivider />
-
+        <Can I={Vendor_Abilities.Edit} a={AbilitySubject.Vendor}>
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon="pen-18" />}
@@ -94,6 +105,8 @@ function VendorDetailsActionsBar({
             onClick={safeCallback(onEditContact)}
           />
           <NavbarDivider />
+        </Can>
+        <Can I={Vendor_Abilities.Delete} a={AbilitySubject.Vendor}>
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon={'trash-16'} iconSize={16} />}
@@ -101,6 +114,7 @@ function VendorDetailsActionsBar({
             intent={Intent.DANGER}
             onClick={safeCallback(onDeleteContact)}
           />
+        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );

src/containers/Items/components.js

@@ -110,7 +110,7 @@ export function ItemsActionMenuList({
           onClick={safeCallback(onDuplicate, original)}
         />
       </Can>
-      <Can I={Item_Abilities.View} a={AbilitySubject.Item}>
+      <Can I={Item_Abilities.Edit} a={AbilitySubject.Item}>
         <If condition={original.active}>
           <MenuItem
             text={intl.get('inactivate_item')}
@@ -118,8 +118,7 @@ export function ItemsActionMenuList({
             onClick={safeCallback(onInactivateItem, original)}
           />
         </If>
-      </Can>
+
-      <Can I={Item_Abilities.Edit} a={AbilitySubject.Item}>
         <If condition={!original.active}>
           <MenuItem
             text={intl.get('activate_item')}

src/containers/Vendors/VendorsLanding/VendorActionsBar.js

@@ -13,6 +13,7 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import Icon from 'components/Icon';
 import {
   If,
+  Can,
   FormattedMessage as T,
   DashboardActionViewsList,
   DashboardFilterButton,
@@ -29,7 +30,10 @@ import withVendors from './withVendors';
 
 import withSettingsActions from '../../Settings/withSettingsActions';
 import withSettings from '../../Settings/withSettings';
-
+import {
+  Vendor_Abilities,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 import { compose } from 'utils';
 
 /**
@@ -90,6 +94,7 @@ function VendorActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
+        <Can I={VendorActionsBar.Create} a={AbilitySubject.Vendor}>
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon={'plus'} />}
@@ -97,6 +102,7 @@ function VendorActionsBar({
             onClick={onClickNewVendor}
           />
           <NavbarDivider />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: vendorsFilterConditions,

src/containers/Vendors/VendorsLanding/components.js

@@ -10,7 +10,11 @@ import {
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
-import { Icon, Money, If, AvaterCell } from 'components';
+import { Can, Icon, Money, If, AvaterCell } from 'components';
+import {
+  Vendor_Abilities,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 import { safeCallback, firstLettersArgs } from 'utils';
 
 /**
@@ -34,17 +38,22 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
+      <Can I={Vendor_Abilities.Edit} a={AbilitySubject.Vendor}>
         <MenuDivider />
         <MenuItem
           icon={<Icon icon="pen-18" />}
           text={intl.get('edit_vendor')}
           onClick={safeCallback(onEdit, original)}
         />
+      </Can>
+      <Can I={Vendor_Abilities.Create} a={AbilitySubject.Customer}>
         <MenuItem
           icon={<Icon icon="duplicate-16" />}
           text={intl.get('duplicate')}
           onClick={safeCallback(onDuplicate, original)}
         />
+      </Can>
+      <Can I={Vendor_Abilities.Edit} a={AbilitySubject.Vendor}>
         <If condition={original.active}>
           <MenuItem
             text={intl.get('inactivate_item')}
@@ -59,12 +68,15 @@ export function ActionsMenu({
             onClick={safeCallback(onActivate, original)}
           />
         </If>
+      </Can>
+      <Can I={Vendor_Abilities.Delete} a={AbilitySubject.Vendor}>
         <MenuItem
           icon={<Icon icon="trash-16" iconSize={16} />}
           text={intl.get('delete_vendor')}
           intent={Intent.DANGER}
           onClick={safeCallback(onDelete, original)}
         />
+      </Can>
     </Menu>
   );
 }