feat: add ability credit & vendor & item transactions.

src/common/itemPaymentTranactionsOption.js

@@ -1,8 +1,51 @@
 import intl from 'react-intl-universal';
+import {
+  AbilitySubject,
+  SaleEstimateAction,
+  SaleReceiptAction,
+  SaleInvoiceAction,
+  BillAction,
+} from '../common/abilityOption';
+import { useAbilitiesFilter } from '../hooks';
 
-export default [
+export const getItemPaymentTransactions = () => [
-  { name: 'invoices', label: intl.get('invoices') },
+  {
-  { name: 'estimates', label: intl.get('estimates') },
+    name: 'invoices',
-  { name: 'receipts', label: intl.get('receipts') },
+    label: intl.get('invoices'),
-  { name: 'bills', label: intl.get('bills') },
+    permission: {
+      subject: AbilitySubject.Invoice,
+      ability: SaleInvoiceAction.View,
+    },
+  },
+  {
+    name: 'estimates',
+    label: intl.get('estimates'),
+    permission: {
+      subject: AbilitySubject.Estimate,
+      ability: SaleEstimateAction.View,
+    },
+  },
+  {
+    name: 'receipts',
+    label: intl.get('receipts'),
+    permission: {
+      subject: AbilitySubject.Receipt,
+      ability: SaleReceiptAction.View,
+    },
+  },
+  {
+    name: 'bills',
+    label: intl.get('bills'),
+    permission: {
+      subject: AbilitySubject.Bill,
+      ability: BillAction.View,
+    },
+  },
 ];
+
+export const useGetItemPaymentTransactionsMenu = () => {
+  const itemTransactionMenu = getItemPaymentTransactions();
+  const abilitiesFilter = useAbilitiesFilter();
+
+  return abilitiesFilter(itemTransactionMenu);
+};

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 />}
       />
-
+      {/* <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>
+      <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,6 +68,7 @@ function CreditNoteDetailActionsBar({
   return (
     <DrawerActionsBar>
       <NavbarGroup>
+        <Can I={CreditNoteAction.Edit} a={AbilitySubject.CreditNote}>
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon="pen-18" />}
@@ -65,6 +76,8 @@ function CreditNoteDetailActionsBar({
             onClick={handleEditCreditNote}
           />
           <NavbarDivider />
+        </Can>
+        <Can I={CreditNoteAction.Refund} a={AbilitySubject.CreditNote}>
           <If condition={!creditNote.is_closed && !creditNote.is_draft}>
             <Button
               className={Classes.MINIMAL}
@@ -74,6 +87,8 @@ function CreditNoteDetailActionsBar({
             />
             <NavbarDivider />
           </If>
+        </Can>
+        <Can I={CreditNoteAction.Delete} a={AbilitySubject.CreditNote}>
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon={'trash-16'} iconSize={16} />}
@@ -81,6 +96,8 @@ function CreditNoteDetailActionsBar({
             intent={Intent.DANGER}
             onClick={handleDeleteCreditNote}
           />
+        </Can>
+        <Can I={CreditNoteAction.Edit} a={AbilitySubject.CreditNote}>
           <If condition={creditNote.is_published && !creditNote.is_closed}>
             <NavbarDivider />
             <CreditNoteMenuItem
@@ -89,6 +106,7 @@ function CreditNoteDetailActionsBar({
               }}
             />
           </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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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,6 +44,7 @@ function VendorCreditDetailsTabs() {
         id={'journal_entries'}
         panel={<VendorCreditGLEntriesTable />}
       />
+      {/* <Can I={VendorCreditAction.View} a={AbilitySubject.VendorCredit}> */}
         <Tab
           title={intl.get('vendor_credit.drawer.label_refund_transactions')}
           id={'refund_transactions'}
@@ -50,6 +55,7 @@ function VendorCreditDetailsTabs() {
           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,6 +62,7 @@ function VendorCreditDetailActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
+        <Can I={VendorCreditAction.Edit} a={AbilitySubject.VendorCredit}>
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon="pen-18" />}
@@ -66,6 +70,8 @@ function VendorCreditDetailActionsBar({
             onClick={handleEditVendorCredit}
           />
           <NavbarDivider />
+        </Can>
+        <Can I={VendorCreditAction.Refund} a={AbilitySubject.VendorCredit}>
           <If condition={!vendorCredit.is_closed && !vendorCredit.is_draft}>
             <Button
               className={Classes.MINIMAL}
@@ -75,6 +81,8 @@ function VendorCreditDetailActionsBar({
             />
             <NavbarDivider />
           </If>
+        </Can>
+        <Can I={VendorCreditAction.Delete} a={AbilitySubject.VendorCredit}>
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon={'trash-16'} iconSize={16} />}
@@ -82,13 +90,9 @@ function VendorCreditDetailActionsBar({
             intent={Intent.DANGER}
             onClick={handleDeleteVendorCredit}
           />
-        <If
+        </Can>
-          condition={
+        <Can I={VendorCreditAction.Edit} a={AbilitySubject.VendorCredit}>
-            !vendorCredit.is_closed &&
+          <If condition={!vendorCredit.is_closed && !vendorCredit.is_draft}>
-            !vendorCredit.is_draft
-            // vendorCredit.is_published
-          }
-        >
             <NavbarDivider />
             <VendorCreditMenuItem
               payload={{
@@ -96,6 +100,7 @@ function VendorCreditDetailActionsBar({
               }}
             />
           </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 />
+        <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,6 +20,7 @@ export default function VendorsCreditNoteEmptyStatus() {
       }
       action={
         <>
+          <Can I={VendorCreditAction.Create} a={AbilitySubject.VendorCredit}>
             <Button
               intent={Intent.PRIMARY}
               large={true}
@@ -27,6 +32,7 @@ export default function VendorsCreditNoteEmptyStatus() {
             <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,19 +32,13 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
+      <Can I={VendorCreditAction.Edit} a={AbilitySubject.VendorCredit}>
         <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}>
-        <MenuItem
-          icon={<Icon icon="quick-payment-16" />}
-          text={intl.get('vendor_credits.action.refund_vendor_credit')}
-          onClick={safeCallback(onRefund, original)}
-        />
-      </If>
         <If condition={original.is_draft}>
           <MenuItem
             icon={<Icon icon={'check'} iconSize={18} />}
@@ -47,19 +46,37 @@ export function ActionsMenu({
             onClick={safeCallback(onOpen, original)}
           />
         </If>
-      <If condition={!original.is_draft && !original.is_closed && original.is_published}>
+      </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
           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}>
+        <Choose.When condition={creditNote.is_draft}>
-          <Tag minimal={true}>
+          <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 />
+        <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,6 +20,7 @@ export default function CreditNotesEmptyStatus() {
       }
       action={
         <>
+          <Can I={CreditNoteAction.Create} a={AbilitySubject.CreditNote}>
             <Button
               intent={Intent.PRIMARY}
               large={true}
@@ -27,6 +32,7 @@ export default function CreditNotesEmptyStatus() {
             <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,6 +29,7 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
+      <Can I={CreditNoteAction.Edit} a={AbilitySubject.CreditNote}>
         <MenuDivider />
         <MenuItem
           icon={<Icon icon="pen-18" />}
@@ -37,24 +43,34 @@ export function ActionsMenu({
             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
           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>
   );
 }

src/lang/en/index.json

@@ -1145,7 +1145,7 @@
   "Landed": "Landed",
   "This options allows you to be able to add additional cost eg. freight then allocate cost to the items in your bills.": "This options allows you to be able to add additional cost eg. freight then allocate cost to the items in your bills.",
   "Once your delete this located landed cost, you won't be able to restore it later, Are your sure you want to delete this transaction?": "Once your delete this located landed cost, you won't be able to restore it later, Are your sure you want to delete this transaction?",
-  "journal_entries": "Journal entries",
+  "journal_entries": "Journal Entries",
   "contact": "Contact",
   "invoice_details": "Invoice details",
   "receipt_details": "Receipt details",