feat: add ability credit & vendor & item transactions.

src/containers/Drawers/BillDrawer/BillDrawerDetails.js

@@ -3,8 +3,11 @@ import { Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
 
-import { DrawerMainTabs } from 'components';
-
+import { Can, DrawerMainTabs } from 'components';
+import {
+  PaymentMadeAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 import BillDetailTab from './BillDetailTab';
 import LocatedLandedCostTable from './LocatedLandedCostTable';
 import BillGLEntriesTable from './BillGLEntriesTable';
@@ -30,12 +33,13 @@ function BillDetailsTabs() {
         id={'journal_entries'}
         panel={<BillGLEntriesTable />}
       />
-
-      <Tab
-        title={intl.get('payment_transactions')}
-        id={'payment_transactions'}
-        panel={<BillPaymentTransactionTable />}
-      />
+      {/* <Can I={PaymentMadeAction.View} a={AbilitySubject.PaymentMade}> */}
+        <Tab
+          title={intl.get('payment_transactions')}
+          id={'payment_transactions'}
+          panel={<BillPaymentTransactionTable />}
+        />
+      {/* </Can> */}
       <Tab
         title={intl.get('located_landed_cost')}
         id={'landed_cost'}

src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js

@@ -3,8 +3,12 @@ import intl from 'react-intl-universal';
 import { Intent, Menu, MenuItem } from '@blueprintjs/core';
 import clsx from 'classnames';
 import { CLASSES } from '../../../../common/classes';
-import { FormatDateCell, Icon } from '../../../../components';
+import { Can, FormatDateCell, Icon } from '../../../../components';
 import { safeCallback } from 'utils';
+import {
+  PaymentMadeAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 /**
  * Table actions menu.
@@ -15,17 +19,21 @@ export function ActionsMenu({
 }) {
   return (
     <Menu>
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('invoice_transactions.action.edit_transaction')}
-        onClick={safeCallback(onEdit, original)}
-      />
-      <MenuItem
-        text={intl.get('invoice_transactions.action.delete_transaction')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-      />
+      <Can I={PaymentMadeAction.Edit} a={AbilitySubject.PaymentMade}>
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('invoice_transactions.action.edit_transaction')}
+          onClick={safeCallback(onEdit, original)}
+        />
+      </Can>
+      <Can I={PaymentMadeAction.Delete} a={AbilitySubject.PaymentMade}>
+        <MenuItem
+          text={intl.get('invoice_transactions.action.delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
     </Menu>
   );
 }

src/containers/Drawers/BillDrawer/components.js

@@ -3,7 +3,9 @@ import intl from 'react-intl-universal';
 import styled from 'styled-components';
 import { Intent, MenuItem, Menu } from '@blueprintjs/core';
 import { safeCallback } from 'utils';
-import { Icon } from 'components';
+import { Can, Icon } from 'components';
+import { BillAction, AbilitySubject } from '../../../common/abilityOption';
+
 /**
  * Actions menu.
  */

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js

@@ -3,12 +3,16 @@ import { Tab } from '@blueprintjs/core';
 import styled from 'styled-components';
 import intl from 'react-intl-universal';
 
-import { DrawerMainTabs } from 'components';
+import { Can, DrawerMainTabs } from 'components';
 import CreditNoteDetailActionsBar from './CreditNoteDetailActionsBar';
 import CreditNoteDetailPanel from './CreditNoteDetailPanel';
 import RefundCreditNoteTransactionsTable from './RefundCreditNoteTransactions/RefundCreditNoteTransactionsTable';
 import ReconcileCreditNoteTransactionsTable from './ReconcileCreditNoteTransactions/ReconcileCreditNoteTransactionsTable';
 import { CreditNoteGLEntriesTable } from './JournalEntriesTransactions/JournalEntriesTransactionsTable';
+import {
+  CreditNoteAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 /**
  * Credit Note view detail.
@@ -40,6 +44,7 @@ function CreditNoteDetailsTabs() {
         id={'journal_entries'}
         panel={<CreditNoteGLEntriesTable />}
       />
+      {/* <Can I={CreditNoteAction.View} a={AbilitySubject.CreditNote}> */}
       <Tab
         title={intl.get('credit_note.drawer.label_refund_transactions')}
         id={'refund_transactions'}
@@ -50,6 +55,7 @@ function CreditNoteDetailsTabs() {
         id={'reconcile_transactions'}
         panel={<ReconcileCreditNoteTransactionsTable />}
       />
+      {/* </Can> */}
     </DrawerMainTabs>
   );
 }

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js

@@ -14,7 +14,17 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { DrawerActionsBar, Icon, FormattedMessage as T, If } from 'components';
+import {
+  DrawerActionsBar,
+  Can,
+  Icon,
+  FormattedMessage as T,
+  If,
+} from 'components';
+import {
+  CreditNoteAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 import { compose } from 'utils';
 import { CreditNoteMenuItem } from './utils';
@@ -58,37 +68,45 @@ function CreditNoteDetailActionsBar({
   return (
     <DrawerActionsBar>
       <NavbarGroup>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="pen-18" />}
-          text={<T id={'credit_note.action.edit_credit_note'} />}
-          onClick={handleEditCreditNote}
-        />
-        <NavbarDivider />
-        <If condition={!creditNote.is_closed && !creditNote.is_draft}>
+        <Can I={CreditNoteAction.Edit} a={AbilitySubject.CreditNote}>
           <Button
             className={Classes.MINIMAL}
-            icon={<Icon icon="arrow-upward" iconSize={18} />}
-            text={<T id={'refund'} />}
-            onClick={handleRefundCreditNote}
+            icon={<Icon icon="pen-18" />}
+            text={<T id={'credit_note.action.edit_credit_note'} />}
+            onClick={handleEditCreditNote}
           />
           <NavbarDivider />
-        </If>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
-          text={<T id={'delete'} />}
-          intent={Intent.DANGER}
-          onClick={handleDeleteCreditNote}
-        />
-        <If condition={creditNote.is_published && !creditNote.is_closed}>
-          <NavbarDivider />
-          <CreditNoteMenuItem
-            payload={{
-              onReconcile: handleReconcileCreditNote,
-            }}
+        </Can>
+        <Can I={CreditNoteAction.Refund} a={AbilitySubject.CreditNote}>
+          <If condition={!creditNote.is_closed && !creditNote.is_draft}>
+            <Button
+              className={Classes.MINIMAL}
+              icon={<Icon icon="arrow-upward" iconSize={18} />}
+              text={<T id={'refund'} />}
+              onClick={handleRefundCreditNote}
+            />
+            <NavbarDivider />
+          </If>
+        </Can>
+        <Can I={CreditNoteAction.Delete} a={AbilitySubject.CreditNote}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteCreditNote}
           />
-        </If>
+        </Can>
+        <Can I={CreditNoteAction.Edit} a={AbilitySubject.CreditNote}>
+          <If condition={creditNote.is_published && !creditNote.is_closed}>
+            <NavbarDivider />
+            <CreditNoteMenuItem
+              payload={{
+                onReconcile: handleReconcileCreditNote,
+              }}
+            />
+          </If>
+        </Can>
       </NavbarGroup>
     </DrawerActionsBar>
   );

src/containers/Drawers/CreditNoteDetailDrawer/ReconcileCreditNoteTransactions/components.js

@@ -1,8 +1,12 @@
 import React from 'react';
 import { Intent, MenuItem, Menu } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import { FormatDateCell, Icon } from 'components';
+import { Can, FormatDateCell, Icon } from 'components';
 import { safeCallback } from 'utils';
+import {
+  CreditNoteAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 /**
  * Actions menu.
@@ -10,12 +14,14 @@ import { safeCallback } from 'utils';
 export function ActionsMenu({ payload: { onDelete }, row: { original } }) {
   return (
     <Menu>
-      <MenuItem
-        icon={<Icon icon="trash-16" iconSize={16} />}
-        text={intl.get('delete_transaction')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-      />
+      <Can I={CreditNoteAction.Delete} a={AbilitySubject.CreditNote}>
+        <MenuItem
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          text={intl.get('delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+        />
+      </Can>
     </Menu>
   );
 }

src/containers/Drawers/CreditNoteDetailDrawer/RefundCreditNoteTransactions/components.js

@@ -1,8 +1,12 @@
 import React from 'react';
 import { Intent, MenuItem, Menu } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import { FormatDateCell, Icon } from 'components';
+import { Can, FormatDateCell, Icon } from 'components';
 import { safeCallback } from 'utils';
+import {
+  CreditNoteAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 /**
  * Actions menu.
@@ -10,12 +14,14 @@ import { safeCallback } from 'utils';
 export function ActionsMenu({ payload: { onDelete }, row: { original } }) {
   return (
     <Menu>
-      <MenuItem
-        icon={<Icon icon="trash-16" iconSize={16} />}
-        text={intl.get('delete_transaction')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-      />
+      <Can I={CreditNoteAction.Delete} a={AbilitySubject.CreditNote}>
+        <MenuItem
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          text={intl.get('delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+        />
+      </Can>
     </Menu>
   );
 }
@@ -39,7 +45,9 @@ export function useRefundCreditTransactionsTableColumns() {
       },
       {
         id: 'from_account',
-        Header: intl.get('refund_credit_transactions.column.withdrawal_account'),
+        Header: intl.get(
+          'refund_credit_transactions.column.withdrawal_account',
+        ),
         accessor: ({ from_account }) => from_account.name,
         width: 100,
         className: 'from_account',

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js

@@ -1,9 +1,13 @@
 import React from 'react';
 import { Tab } from '@blueprintjs/core';
 import styled from 'styled-components';
+import intl from 'react-intl-universal';
 
-import { DrawerMainTabs } from 'components';
-
+import { Can, DrawerMainTabs } from 'components';
+import {
+  PaymentReceiveAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 import InvoiceDetailActionsBar from './InvoiceDetailActionsBar';
 import InvoiceGLEntriesTable from './InvoiceGLEntriesTable';
 import InvoicePaymentTransactionsTable from './InvoicePaymentTransactions/InvoicePaymentTransactionsTable';
@@ -19,17 +23,23 @@ function InvoiceDetailsTabs() {
       renderActiveTabPanelOnly={true}
       defaultSelectedTabId="details"
     >
-      <Tab title={'Overview'} id={'details'} panel={<InvoiceDetailTab />} />
       <Tab
-        title={'Journal Entries'}
+        title={intl.get('overview')}
+        id={'details'}
+        panel={<InvoiceDetailTab />}
+      />
+      <Tab
+        title={intl.get('journal_entries')}
         id={'journal_entries'}
         panel={<InvoiceGLEntriesTable />}
       />
+      {/* <Can I={PaymentReceiveAction.View} a={AbilitySubject.PaymentReceive}> */}
       <Tab
-        title={'Payment Transactions'}
+        title={intl.get('payment_transactions')}
         id={'payment_transactions'}
         panel={<InvoicePaymentTransactionsTable />}
       />
+      {/* </Can> */}
     </DrawerMainTabs>
   );
 }

src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js

@@ -3,8 +3,12 @@ import intl from 'react-intl-universal';
 import { Intent, Menu, MenuItem } from '@blueprintjs/core';
 import clsx from 'classnames';
 import { CLASSES } from '../../../../common/classes';
-import { FormatDateCell, Icon } from '../../../../components';
+import { FormatDateCell, Icon, Can } from '../../../../components';
 import { safeCallback } from 'utils';
+import {
+  PaymentReceiveAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 /**
  * Table actions menu.
@@ -15,17 +19,21 @@ export function ActionsMenu({
 }) {
   return (
     <Menu>
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('invoice_transactions.action.edit_transaction')}
-        onClick={safeCallback(onEdit, original)}
-      />
-      <MenuItem
-        text={intl.get('invoice_transactions.action.delete_transaction')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-      />
+      <Can I={PaymentReceiveAction.Edit} a={AbilitySubject.PaymentReceive}>
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('invoice_transactions.action.edit_transaction')}
+          onClick={safeCallback(onEdit, original)}
+        />
+      </Can>
+      <Can I={PaymentReceiveAction.Delete} a={AbilitySubject.PaymentReceive}>
+        <MenuItem
+          text={intl.get('invoice_transactions.action.delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
     </Menu>
   );
 }

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/components.js

@@ -4,8 +4,12 @@ import { Intent, Menu, MenuItem } from '@blueprintjs/core';
 
 import clsx from 'classnames';
 import { CLASSES } from '../../../../../common/classes';
-import { FormatDateCell, Icon } from '../../../../../components';
+import { Can, FormatDateCell, Icon } from '../../../../../components';
 import { safeCallback } from 'utils';
+import {
+  BillAction,
+  AbilitySubject,
+} from '../../../../../common/abilityOption';
 
 /**
  * Table actions menu.
@@ -16,17 +20,21 @@ export function ActionsMenu({
 }) {
   return (
     <Menu>
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('invoice_transactions.action.edit_transaction')}
-        onClick={safeCallback(onEdit, original)}
-      />
-      <MenuItem
-        text={intl.get('invoice_transactions.action.delete_transaction')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-      />
+      <Can I={BillAction.Edit} a={AbilitySubject.Bill}>
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('invoice_transactions.action.edit_transaction')}
+          onClick={safeCallback(onEdit, original)}
+        />
+      </Can>
+      <Can I={BillAction.Delete} a={AbilitySubject.Bill}>
+        <MenuItem
+          text={intl.get('invoice_transactions.action.delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
     </Menu>
   );
 }

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/components.js

@@ -4,8 +4,12 @@ import { Intent, Menu, MenuItem } from '@blueprintjs/core';
 
 import clsx from 'classnames';
 import { CLASSES } from '../../../../../common/classes';
-import { FormatDateCell, Icon } from '../../../../../components';
+import { Can, FormatDateCell, Icon } from '../../../../../components';
 import { safeCallback } from 'utils';
+import {
+  SaleEstimateAction,
+  AbilitySubject,
+} from '../../../../../common/abilityOption';
 
 /**
  * Table actions menu.
@@ -16,17 +20,21 @@ export function ActionsMenu({
 }) {
   return (
     <Menu>
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('invoice_transactions.action.edit_transaction')}
-        onClick={safeCallback(onEdit, original)}
-      />
-      <MenuItem
-        text={intl.get('invoice_transactions.action.delete_transaction')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-      />
+      <Can I={SaleEstimateAction.Edit} a={AbilitySubject.Estimate}>
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('invoice_transactions.action.edit_transaction')}
+          onClick={safeCallback(onEdit, original)}
+        />
+      </Can>
+      <Can I={SaleEstimateAction.Delete} a={AbilitySubject.Estimate}>
+        <MenuItem
+          text={intl.get('invoice_transactions.action.delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
     </Menu>
   );
 }

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/components.js

@@ -4,9 +4,12 @@ import { Intent, Menu, MenuItem } from '@blueprintjs/core';
 
 import clsx from 'classnames';
 import { CLASSES } from '../../../../../common/classes';
-import { FormatDateCell ,Icon} from '../../../../../components';
+import { Can, FormatDateCell, Icon } from '../../../../../components';
 import { safeCallback } from 'utils';
-
+import {
+  SaleInvoiceAction,
+  AbilitySubject,
+} from '../../../../../common/abilityOption';
 
 /**
  * Table actions menu.
@@ -17,17 +20,21 @@ export function ActionsMenu({
 }) {
   return (
     <Menu>
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('invoice_transactions.action.edit_transaction')}
-        onClick={safeCallback(onEdit, original)}
-      />
-      <MenuItem
-        text={intl.get('invoice_transactions.action.delete_transaction')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-      />
+      <Can I={SaleInvoiceAction.Edit} a={AbilitySubject.Invoice}>
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('invoice_transactions.action.edit_transaction')}
+          onClick={safeCallback(onEdit, original)}
+        />
+      </Can>
+      <Can I={SaleInvoiceAction.Delete} a={AbilitySubject.Invoice}>
+        <MenuItem
+          text={intl.get('invoice_transactions.action.delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
     </Menu>
   );
 }

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/components.js

@@ -4,8 +4,12 @@ import { Intent, Menu, MenuItem } from '@blueprintjs/core';
 
 import clsx from 'classnames';
 import { CLASSES } from '../../../../../common/classes';
-import { FormatDateCell, Icon } from '../../../../../components';
+import { Can, FormatDateCell, Icon } from '../../../../../components';
 import { safeCallback } from 'utils';
+import {
+  SaleReceiptAction,
+  AbilitySubject,
+} from '../../../../../common/abilityOption';
 
 /**
  * Table actions menu.
@@ -16,17 +20,21 @@ export function ActionsMenu({
 }) {
   return (
     <Menu>
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('invoice_transactions.action.edit_transaction')}
-        onClick={safeCallback(onEdit, original)}
-      />
-      <MenuItem
-        text={intl.get('invoice_transactions.action.delete_transaction')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-      />
+      <Can I={SaleReceiptAction.Edit} a={AbilitySubject.Receipt}>
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('invoice_transactions.action.edit_transaction')}
+          onClick={safeCallback(onEdit, original)}
+        />
+      </Can>
+      <Can I={SaleReceiptAction.Edit} a={AbilitySubject.Receipt}>
+        <MenuItem
+          text={intl.get('invoice_transactions.action.delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
     </Menu>
   );
 }

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js

@@ -10,16 +10,21 @@ import {
 import styled from 'styled-components';
 import { FormattedMessage as T } from 'components';
 import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
-import transactions from '../../../../common/itemPaymentTranactionsOption';
+import { useGetItemPaymentTransactionsMenu } from '../../../../common/itemPaymentTranactionsOption';
 
 export const ItemManuTransaction = ({ onChange }) => {
   const { value, setValue } = useItemDetailDrawerContext();
+  const itemTransactionMenu = useGetItemPaymentTransactionsMenu();
+
+  if (itemTransactionMenu.length === 0) {
+    return null;
+  }
 
   const handleClickItem = (item) => {
     onChange && onChange(item);
   };
 
-  const content = transactions.map(({ name, label }) => (
+  const content = itemTransactionMenu.map(({ name, label }) => (
     <MenuItem onClick={() => handleClickItem(name)} text={label} />
   ));
 

src/containers/Drawers/VendorCreditDetailDrawer/ReconcileVendorCreditTransactions/components.js

@@ -1,8 +1,12 @@
 import React from 'react';
 import { Intent, MenuItem, Menu } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import { FormatDateCell, Icon } from 'components';
+import { Can, FormatDateCell, Icon } from 'components';
 import { safeCallback } from 'utils';
+import {
+  VendorCreditAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 /**
  * Actions menu.
@@ -10,12 +14,14 @@ import { safeCallback } from 'utils';
 export function ActionsMenu({ payload: { onDelete }, row: { original } }) {
   return (
     <Menu>
-      <MenuItem
-        icon={<Icon icon="trash-16" iconSize={16} />}
-        text={intl.get('delete_transaction')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-      />
+      <Can I={VendorCreditAction.Delete} a={AbilitySubject.VendorCredit}>
+        <MenuItem
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          text={intl.get('delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+        />
+      </Can>
     </Menu>
   );
 }

src/containers/Drawers/VendorCreditDetailDrawer/RefundVendorCreditTransactions/components.js

@@ -1,8 +1,12 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { Intent, MenuItem, Menu } from '@blueprintjs/core';
-import { FormatDateCell, Icon } from 'components';
+import { Can, FormatDateCell, Icon } from 'components';
 import { safeCallback } from 'utils';
+import {
+  VendorCreditAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 /**
  * Actions menu.
@@ -10,12 +14,14 @@ import { safeCallback } from 'utils';
 export function ActionsMenu({ payload: { onDelete }, row: { original } }) {
   return (
     <Menu>
-      <MenuItem
-        icon={<Icon icon="trash-16" iconSize={16} />}
-        text={intl.get('delete_transaction')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-      />
+      <Can I={VendorCreditAction.Delete} a={AbilitySubject.VendorCredit}>
+        <MenuItem
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          text={intl.get('delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+        />
+      </Can>
     </Menu>
   );
 }

src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js

@@ -3,12 +3,16 @@ import { Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
 
-import { DrawerMainTabs } from 'components';
+import { Can, DrawerMainTabs } from 'components';
 import VendorCreditDetailActionsBar from './VendorCreditDetailActionsBar';
 import VendorCreditDetailPanel from './VendorCreditDetailPanel';
 import RefundVendorCreditTransactionsTable from './RefundVendorCreditTransactions/RefundVendorCreditTransactionsTable';
 import ReconcileVendorCreditTransactionsTable from './ReconcileVendorCreditTransactions/ReconcileVendorCreditTransactionsTable';
 import { VendorCreditGLEntriesTable } from './JournalEntriesTransactions/JournalEntriesTransactionsTable';
+import {
+  VendorCreditAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 /**
  * Vendor credit view detail.
@@ -40,16 +44,18 @@ function VendorCreditDetailsTabs() {
         id={'journal_entries'}
         panel={<VendorCreditGLEntriesTable />}
       />
-      <Tab
-        title={intl.get('vendor_credit.drawer.label_refund_transactions')}
-        id={'refund_transactions'}
-        panel={<RefundVendorCreditTransactionsTable />}
-      />
-      <Tab
-        title={intl.get('vendor_credit.drawer.label_bills_reconciled')}
-        id={'reconcile_transactions'}
-        panel={<ReconcileVendorCreditTransactionsTable />}
-      />
+      {/* <Can I={VendorCreditAction.View} a={AbilitySubject.VendorCredit}> */}
+        <Tab
+          title={intl.get('vendor_credit.drawer.label_refund_transactions')}
+          id={'refund_transactions'}
+          panel={<RefundVendorCreditTransactionsTable />}
+        />
+        <Tab
+          title={intl.get('vendor_credit.drawer.label_bills_reconciled')}
+          id={'reconcile_transactions'}
+          panel={<ReconcileVendorCreditTransactionsTable />}
+        />
+      {/* </Can> */}
     </DrawerMainTabs>
   );
 }

src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js

@@ -11,7 +11,10 @@ import {
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
 import { VendorCreditMenuItem } from './utils';
-
+import {
+  VendorCreditAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
@@ -59,43 +62,45 @@ function VendorCreditDetailActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="pen-18" />}
-          text={<T id={'vendor_credits.label.edit_vendor_credit'} />}
-          onClick={handleEditVendorCredit}
-        />
-        <NavbarDivider />
-        <If condition={!vendorCredit.is_closed && !vendorCredit.is_draft}>
+        <Can I={VendorCreditAction.Edit} a={AbilitySubject.VendorCredit}>
           <Button
             className={Classes.MINIMAL}
-            icon={<Icon icon="arrow-downward" iconSize={18} />}
-            text={<T id={'refund'} />}
-            onClick={handleRefundVendorCredit}
+            icon={<Icon icon="pen-18" />}
+            text={<T id={'vendor_credits.label.edit_vendor_credit'} />}
+            onClick={handleEditVendorCredit}
           />
           <NavbarDivider />
-        </If>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
-          text={<T id={'delete'} />}
-          intent={Intent.DANGER}
-          onClick={handleDeleteVendorCredit}
-        />
-        <If
-          condition={
-            !vendorCredit.is_closed &&
-            !vendorCredit.is_draft
-            // vendorCredit.is_published
-          }
-        >
-          <NavbarDivider />
-          <VendorCreditMenuItem
-            payload={{
-              onReconcile: handleReconcileVendorCredit,
-            }}
+        </Can>
+        <Can I={VendorCreditAction.Refund} a={AbilitySubject.VendorCredit}>
+          <If condition={!vendorCredit.is_closed && !vendorCredit.is_draft}>
+            <Button
+              className={Classes.MINIMAL}
+              icon={<Icon icon="arrow-downward" iconSize={18} />}
+              text={<T id={'refund'} />}
+              onClick={handleRefundVendorCredit}
+            />
+            <NavbarDivider />
+          </If>
+        </Can>
+        <Can I={VendorCreditAction.Delete} a={AbilitySubject.VendorCredit}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteVendorCredit}
           />
-        </If>
+        </Can>
+        <Can I={VendorCreditAction.Edit} a={AbilitySubject.VendorCredit}>
+          <If condition={!vendorCredit.is_closed && !vendorCredit.is_draft}>
+            <NavbarDivider />
+            <VendorCreditMenuItem
+              payload={{
+                onReconcile: handleReconcileVendorCredit,
+              }}
+            />
+          </If>
+        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );

src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteActionsBar.js

@@ -10,6 +10,7 @@ import {
 } from '@blueprintjs/core';
 import {
   Icon,
+  Can,
   FormattedMessage as T,
   DashboardActionViewsList,
   AdvancedFilterPopover,
@@ -19,7 +20,10 @@ import {
 import DashboardActionsBar from '../../../../components/Dashboard/DashboardActionsBar';
 
 import { useVendorsCreditNoteListContext } from './VendorsCreditNoteListProvider';
-
+import {
+  VendorCreditAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 import withVendorsCreditNotes from './withVendorsCreditNotes';
 import withVendorsCreditNotesActions from './withVendorsCreditNotesActions';
 import withSettings from '../../../Settings/withSettings';
@@ -84,12 +88,14 @@ function VendorsCreditNoteActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'plus'} />}
-          text={<T id={'vendor_credits.label.new_vendor_credit'} />}
-          onClick={handleClickNewVendorCredit}
-        />
+        <Can I={VendorCreditAction.Create} a={AbilitySubject.VendorCredit}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'plus'} />}
+            text={<T id={'vendor_credits.label.new_vendor_credit'} />}
+            onClick={handleClickNewVendorCredit}
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: vendorCreditFilterRoles,

src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteEmptyStatus.js

@@ -2,7 +2,11 @@ import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import { EmptyStatus } from 'components';
-import { FormattedMessage as T } from 'components';
+import { Can, FormattedMessage as T } from 'components';
+import {
+  VendorCreditAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 export default function VendorsCreditNoteEmptyStatus() {
   const history = useHistory();
@@ -16,17 +20,19 @@ export default function VendorsCreditNoteEmptyStatus() {
       }
       action={
         <>
-          <Button
-            intent={Intent.PRIMARY}
-            large={true}
-            onClick={() => history.push('/vendor-credits/new')}
-          >
-            <T id={'vendor_credits.action.new_vendor_credit'} />
-          </Button>
+          <Can I={VendorCreditAction.Create} a={AbilitySubject.VendorCredit}>
+            <Button
+              intent={Intent.PRIMARY}
+              large={true}
+              onClick={() => history.push('/vendor-credits/new')}
+            >
+              <T id={'vendor_credits.action.new_vendor_credit'} />
+            </Button>
 
-          <Button intent={Intent.NONE} large={true}>
-            <T id={'learn_more'} />
-          </Button>
+            <Button intent={Intent.NONE} large={true}>
+              <T id={'learn_more'} />
+            </Button>
+          </Can>
         </>
       }
     />

src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js

@@ -10,8 +10,13 @@ import {
   Choose,
   If,
   Icon,
+  Can,
 } from 'components';
 import { safeCallback } from 'utils';
+import {
+  VendorCreditAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 /**
  * Actions menu.
@@ -27,39 +32,51 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('vendor_credits.action.edit_vendor_credit')}
-        onClick={safeCallback(onEdit, original)}
-      />
-      <If condition={!original.is_closed && original.is_published}>
+      <Can I={VendorCreditAction.Edit} a={AbilitySubject.VendorCredit}>
+        <MenuDivider />
         <MenuItem
-          icon={<Icon icon="quick-payment-16" />}
-          text={intl.get('vendor_credits.action.refund_vendor_credit')}
-          onClick={safeCallback(onRefund, original)}
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('vendor_credits.action.edit_vendor_credit')}
+          onClick={safeCallback(onEdit, original)}
         />
-      </If>
-      <If condition={original.is_draft}>
+        <If condition={original.is_draft}>
+          <MenuItem
+            icon={<Icon icon={'check'} iconSize={18} />}
+            text={intl.get('vendor_credits.action.mark_as_open')}
+            onClick={safeCallback(onOpen, original)}
+          />
+        </If>
+      </Can>
+      <Can I={VendorCreditAction.Refund} a={AbilitySubject.VendorCredit}>
+        <If condition={!original.is_closed && original.is_published}>
+          <MenuItem
+            icon={<Icon icon="quick-payment-16" />}
+            text={intl.get('vendor_credits.action.refund_vendor_credit')}
+            onClick={safeCallback(onRefund, original)}
+          />
+        </If>
+      </Can>
+      <Can I={VendorCreditAction.Edit} a={AbilitySubject.VendorCredit}>
+        <If
+          condition={
+            !original.is_draft && !original.is_closed && original.is_published
+          }
+        >
+          <MenuItem
+            // icon={<Icon icon="quick-payment-16" />}
+            text={intl.get('vendor_credits.action.reconcile_with_bills')}
+            onClick={safeCallback(onReconcile, original)}
+          />
+        </If>
+      </Can>
+      <Can I={VendorCreditAction.Delete} a={AbilitySubject.VendorCredit}>
         <MenuItem
-          icon={<Icon icon={'check'} iconSize={18} />}
-          text={intl.get('vendor_credits.action.mark_as_open')}
-          onClick={safeCallback(onOpen, original)}
+          text={intl.get('vendor_credits.action.delete_vendor_credit')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
         />
-      </If>
-      <If condition={!original.is_draft && !original.is_closed && original.is_published}>
-        <MenuItem
-          // icon={<Icon icon="quick-payment-16" />}
-          text={intl.get('vendor_credits.action.reconcile_with_bills')}
-          onClick={safeCallback(onReconcile, original)}
-        />
-      </If>
-      <MenuItem
-        text={intl.get('vendor_credits.action.delete_vendor_credit')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-      />
+      </Can>
     </Menu>
   );
 }
@@ -83,8 +100,8 @@ export function StatusAccessor(creditNote) {
           </Tag>
         </Choose.When>
 
-        <Choose.When condition={creditNote.is_draft} round={true}>
-          <Tag minimal={true}>
+        <Choose.When condition={creditNote.is_draft}>
+          <Tag minimal={true} round={true}>
             <T id={'draft'} />
           </Tag>
         </Choose.When>

src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesActionsBar.js

@@ -10,6 +10,7 @@ import {
 import { useHistory } from 'react-router-dom';
 import {
   Icon,
+  Can,
   FormattedMessage as T,
   DashboardActionViewsList,
   AdvancedFilterPopover,
@@ -19,7 +20,10 @@ import {
 import DashboardActionsBar from '../../../../components/Dashboard/DashboardActionsBar';
 
 import { useCreditNoteListContext } from './CreditNotesListProvider';
-
+import {
+  CreditNoteAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 import withCreditNotes from './withCreditNotes';
 import withCreditNotesActions from './withCreditNotesActions';
 import withSettings from '../../../Settings/withSettings';
@@ -78,12 +82,14 @@ function CreditNotesActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'plus'} />}
-          text={<T id={'credit_note.label.new_credit_note'} />}
-          onClick={handleClickNewCreateNote}
-        />
+        <Can I={CreditNoteAction.Create} a={AbilitySubject.CreditNote}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'plus'} />}
+            text={<T id={'credit_note.label.new_credit_note'} />}
+            onClick={handleClickNewCreateNote}
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: creditNoteFilterRoles,

src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesEmptyStatus.js

@@ -2,7 +2,11 @@ import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import { EmptyStatus } from 'components';
-import { FormattedMessage as T } from 'components';
+import { Can, FormattedMessage as T } from 'components';
+import {
+  CreditNoteAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 export default function CreditNotesEmptyStatus() {
   const history = useHistory();
@@ -16,17 +20,19 @@ export default function CreditNotesEmptyStatus() {
       }
       action={
         <>
-          <Button
-            intent={Intent.PRIMARY}
-            large={true}
-            onClick={() => history.push('/credit-notes/new')}
-          >
-            <T id={'credit_note.label.new_credit_note'} />
-          </Button>
+          <Can I={CreditNoteAction.Create} a={AbilitySubject.CreditNote}>
+            <Button
+              intent={Intent.PRIMARY}
+              large={true}
+              onClick={() => history.push('/credit-notes/new')}
+            >
+              <T id={'credit_note.label.new_credit_note'} />
+            </Button>
 
-          <Button intent={Intent.NONE} large={true}>
-            <T id={'learn_more'} />
-          </Button>
+            <Button intent={Intent.NONE} large={true}>
+              <T id={'learn_more'} />
+            </Button>
+          </Can>
         </>
       }
     />

src/containers/Sales/CreditNotes/CreditNotesLanding/components.js

@@ -10,8 +10,13 @@ import {
   Choose,
   If,
   Icon,
+  Can,
 } from 'components';
 import { safeCallback } from 'utils';
+import {
+  CreditNoteAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 export function ActionsMenu({
   payload: { onEdit, onDelete, onRefund, onOpen, onReconcile, onViewDetails },
@@ -24,37 +29,48 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('credit_note.action.edit_credit_note')}
-        onClick={safeCallback(onEdit, original)}
-      />
-      <If condition={original.is_draft}>
+      <Can I={CreditNoteAction.Edit} a={AbilitySubject.CreditNote}>
+        <MenuDivider />
         <MenuItem
-          icon={<Icon icon={'check'} iconSize={18} />}
-          text={intl.get('credit_note.action.make_as_open')}
-          onClick={safeCallback(onOpen, original)}
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('credit_note.action.edit_credit_note')}
+          onClick={safeCallback(onEdit, original)}
         />
-      </If>
-      <If condition={!original.is_closed && original.is_published}>
+        <If condition={original.is_draft}>
+          <MenuItem
+            icon={<Icon icon={'check'} iconSize={18} />}
+            text={intl.get('credit_note.action.make_as_open')}
+            onClick={safeCallback(onOpen, original)}
+          />
+        </If>
+      </Can>
+
+      <Can I={CreditNoteAction.Refund} a={AbilitySubject.CreditNote}>
+        <If condition={!original.is_closed && original.is_published}>
+          <MenuItem
+            icon={<Icon icon="quick-payment-16" />}
+            text={intl.get('credit_note.action.refund_credit_note')}
+            onClick={safeCallback(onRefund, original)}
+          />
+        </If>
+      </Can>
+      <Can I={CreditNoteAction.Edit} a={AbilitySubject.CreditNote}>
+        <If condition={!original.is_closed && original.is_published}>
+          <MenuItem
+            text={intl.get('credit_note.action.reconcile_with_invoices')}
+            icon={<Icon icon="receipt-24" iconSize={16} />}
+            onClick={safeCallback(onReconcile, original)}
+          />
+        </If>
+      </Can>
+      <Can I={CreditNoteAction.Delete} a={AbilitySubject.CreditNote}>
         <MenuItem
-          icon={<Icon icon="quick-payment-16" />}
-          text={intl.get('credit_note.action.refund_credit_note')}
-          onClick={safeCallback(onRefund, original)}
+          text={intl.get('credit_note.action.delete_credit_note')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
         />
-        <MenuItem
-          text={intl.get('credit_note.action.reconcile_with_invoices')}
-          icon={<Icon icon="receipt-24" iconSize={16} />}
-          onClick={safeCallback(onReconcile, original)}
-        />
-      </If>
-      <MenuItem
-        text={intl.get('credit_note.action.delete_credit_note')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-      />
+      </Can>
     </Menu>
   );
 }