feat: add invoice ability.

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js

@@ -16,7 +16,12 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { If, Icon, FormattedMessage as T } from 'components';
+import { If, Can, Icon, FormattedMessage as T } from 'components';
+import {
+  Invoice_Abilities,
+  PaymentReceive,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 import { compose } from 'utils';
 
@@ -78,43 +83,54 @@ function InvoiceDetailActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="pen-18" />}
-          text={<T id={'edit_invoice'} />}
-          onClick={handleEditInvoice}
-        />
-        <NavbarDivider />
-        <If condition={invoice.is_delivered && !invoice.is_fully_paid}>
+        <Can I={Invoice_Abilities.Edit} a={AbilitySubject.Invoice}>
           <Button
             className={Classes.MINIMAL}
-            icon={<Icon icon="quick-payment-16" iconSize={16} />}
-            text={<T id={'add_payment'} />}
-            onClick={handleQuickPaymentInvoice}
+            icon={<Icon icon="pen-18" />}
+            text={<T id={'edit_invoice'} />}
+            onClick={handleEditInvoice}
           />
-        </If>
-        <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="print-16" />}
-          text={<T id={'print'} />}
-          onClick={handlePrintInvoice}
-        />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
-          text={<T id={'delete'} />}
-          intent={Intent.DANGER}
-          onClick={handleDeleteInvoice}
-        />
-        <NavbarDivider />
-        <BadDebtMenuItem
-          payload={{
-            onBadDebt: handleBadDebtInvoice,
-            onCancelBadDebt: handleCancelBadDebtInvoice,
-            onNotifyViaSMS: handleNotifyViaSMS,
-          }}
-        />
+
+          <NavbarDivider />
+        </Can>
+        <Can I={PaymentReceive.Create} a={AbilitySubject.PaymentReceive}>
+          <If condition={invoice.is_delivered && !invoice.is_fully_paid}>
+            <Button
+              className={Classes.MINIMAL}
+              icon={<Icon icon="quick-payment-16" iconSize={16} />}
+              text={<T id={'add_payment'} />}
+              onClick={handleQuickPaymentInvoice}
+            />
+          </If>
+          <NavbarDivider />
+        </Can>
+        <Can I={Invoice_Abilities.View} a={AbilitySubject.Invoice}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="print-16" />}
+            text={<T id={'print'} />}
+            onClick={handlePrintInvoice}
+          />
+        </Can>
+        <Can I={Invoice_Abilities.Delete} a={AbilitySubject.Invoice}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteInvoice}
+          />
+          <NavbarDivider />
+        </Can>
+        <Can I={Invoice_Abilities.BadDebt} a={AbilitySubject.Invoice}>
+          <BadDebtMenuItem
+            payload={{
+              onBadDebt: handleBadDebtInvoice,
+              onCancelBadDebt: handleCancelBadDebtInvoice,
+              onNotifyViaSMS: handleNotifyViaSMS,
+            }}
+          />
+        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );

src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js

@@ -18,7 +18,11 @@ import {
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
-import { If, DashboardActionViewsList } from 'components';
+import { Can, If, DashboardActionViewsList } from 'components';
+import {
+  Invoice_Abilities,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 import { useRefreshInvoices } from 'hooks/query/invoices';
 import { useInvoicesListContext } from './InvoicesListProvider';
@@ -84,12 +88,14 @@ function InvoiceActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'plus'} />}
-          text={<T id={'new_invoice'} />}
-          onClick={handleClickNewInvoice}
-        />
+        <Can I={Invoice_Abilities.Create} a={AbilitySubject.Invoice}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'plus'} />}
+            text={<T id={'new_invoice'} />}
+            onClick={handleClickNewInvoice}
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: invoicesFilterRoles,

src/containers/Sales/Invoices/InvoicesLanding/components.js

@@ -18,8 +18,14 @@ import {
   Choose,
   If,
   Icon,
+  Can,
 } from 'components';
 import { formattedAmount, safeCallback, calculateStatus } from 'utils';
+import {
+  Invoice_Abilities,
+  PaymentReceive,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 export const statusAccessor = (row) => {
   return (
@@ -55,7 +61,6 @@ export const statusAccessor = (row) => {
               })}
             </span>
             <ProgressBar
-          
               animate={false}
               stripes={false}
               intent={Intent.PRIMARY}
@@ -115,37 +120,46 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('edit_invoice')}
-        onClick={safeCallback(onEdit, original)}
-      />
-      <If condition={!original.is_delivered}>
+      <Can I={Invoice_Abilities.Edit} a={AbilitySubject.Invoice}>
+        <MenuDivider />
         <MenuItem
-          icon={<Icon icon="send" iconSize={16} />}
-          text={intl.get('mark_as_delivered')}
-          onClick={safeCallback(onDeliver, original)}
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_invoice')}
+          onClick={safeCallback(onEdit, original)}
         />
-      </If>
-      <If condition={original.is_delivered && !original.is_fully_paid}>
+
+        <If condition={!original.is_delivered}>
+          <MenuItem
+            icon={<Icon icon="send" iconSize={16} />}
+            text={intl.get('mark_as_delivered')}
+            onClick={safeCallback(onDeliver, original)}
+          />
+        </If>
+      </Can>
+      <Can I={PaymentReceive.Create} a={AbilitySubject.PaymentReceive}>
+        <If condition={original.is_delivered && !original.is_fully_paid}>
+          <MenuItem
+            icon={<Icon icon="quick-payment-16" iconSize={16} />}
+            text={intl.get('add_payment')}
+            onClick={safeCallback(onQuick, original)}
+          />
+        </If>
+      </Can>
+      <Can I={Invoice_Abilities.View} a={AbilitySubject.Invoice}>
         <MenuItem
-          icon={<Icon icon="quick-payment-16" iconSize={16} />}
-          text={intl.get('add_payment')}
-          onClick={safeCallback(onQuick, original)}
+          icon={<Icon icon={'print-16'} iconSize={16} />}
+          text={intl.get('print')}
+          onClick={safeCallback(onPrint, original)}
         />
-      </If>
-      <MenuItem
-        icon={<Icon icon={'print-16'} iconSize={16} />}
-        text={intl.get('print')}
-        onClick={safeCallback(onPrint, original)}
-      />
-      <MenuItem
-        text={intl.get('delete_invoice')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-      />
+      </Can>
+      <Can I={Invoice_Abilities.Delete} a={AbilitySubject.Invoice}>
+        <MenuItem
+          text={intl.get('delete_invoice')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
     </Menu>
   );
 }