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 [
-  { name: 'invoices', label: intl.get('invoices') },
-  { name: 'estimates', label: intl.get('estimates') },
-  { name: 'receipts', label: intl.get('receipts') },
-  { name: 'bills', label: intl.get('bills') },
+export const getItemPaymentTransactions = () => [
+  {
+    name: 'invoices',
+    label: intl.get('invoices'),
+    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 />}
       />
-
-      <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>
   );
 }

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",