From 1cba4b5f18a9e202746f0750624d353ba22c9268 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Tue, 23 Nov 2021 20:29:35 +0200
Subject: [PATCH] feat: add bill & payment made ability.

---
 .../BillDrawer/BillDetailActionsBar.js        | 56 ++++++++++------
 .../PaymentMadeDetailActionsBar.js            | 39 ++++++-----
 .../Bills/BillsLanding/BillsActionsBar.js     | 16 +++--
 .../Bills/BillsLanding/components.js          | 64 +++++++++++--------
 .../PaymentsLanding/PaymentMadeActionsBar.js  | 21 ++++--
 .../PaymentsLanding/components.js             | 36 +++++++----
 6 files changed, 143 insertions(+), 89 deletions(-)

diff --git a/src/containers/Drawers/BillDrawer/BillDetailActionsBar.js b/src/containers/Drawers/BillDrawer/BillDetailActionsBar.js
index 8a14d3795..05d450b43 100644
--- a/src/containers/Drawers/BillDrawer/BillDetailActionsBar.js
+++ b/src/containers/Drawers/BillDrawer/BillDetailActionsBar.js
@@ -16,7 +16,12 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { If, Icon, FormattedMessage as T } from 'components';
+import { Can, If, Icon, FormattedMessage as T } from 'components';
+import {
+  Bill_Abilities,
+  Payment_Made_Abilities,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 import { safeCallback, compose } from 'utils';
 
@@ -53,29 +58,38 @@ function BillDetailActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="pen-18" />}
-          text={<T id={'edit_bill'} />}
-          onClick={safeCallback(onEditBill)}
-        />
-        <NavbarDivider />
-        <If condition={bill.is_open && !bill.is_fully_paid}>
+        <Can I={Bill_Abilities.Edit} a={AbilitySubject.Bill}>
           <Button
             className={Classes.MINIMAL}
-            icon={<Icon icon="quick-payment-16" iconSize={16} />}
-            text={<T id={'add_payment'} />}
-            onClick={handleQuickBillPayment}
+            icon={<Icon icon="pen-18" />}
+            text={<T id={'edit_bill'} />}
+            onClick={safeCallback(onEditBill)}
           />
-        </If>
-        <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
-          text={<T id={'delete'} />}
-          intent={Intent.DANGER}
-          onClick={safeCallback(onDeleteBill)}
-        />
+          <NavbarDivider />
+        </Can>
+        <Can
+          I={Payment_Made_Abilities.Create}
+          a={AbilitySubject.PaymentMade}
+        >
+          <If condition={bill.is_open && !bill.is_fully_paid}>
+            <Button
+              className={Classes.MINIMAL}
+              icon={<Icon icon="quick-payment-16" iconSize={16} />}
+              text={<T id={'add_payment'} />}
+              onClick={handleQuickBillPayment}
+            />
+          </If>
+          <NavbarDivider />
+        </Can>
+        <Can I={Bill_Abilities.Delete} a={AbilitySubject.Bill}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={safeCallback(onDeleteBill)}
+          />
+        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );
diff --git a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.js b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.js
index 4c3d4eb47..8ad09b10f 100644
--- a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.js
+++ b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.js
@@ -16,8 +16,11 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Icon, FormattedMessage as T } from 'components';
-
+import { Can, Icon, FormattedMessage as T } from 'components';
+import {
+  Payment_Made_Abilities,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 import { compose } from 'utils';
 
 /**
@@ -48,20 +51,24 @@ function PaymentMadeDetailActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="pen-18" />}
-          text={<T id={'edit_payment_made'} />}
-          onClick={handleEditPaymentMade}
-        />
-        <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
-          text={<T id={'delete'} />}
-          intent={Intent.DANGER}
-          onClick={handleDeletePaymentMade}
-        />
+        <Can I={Payment_Made_Abilities.Edit} a={AbilitySubject.PaymentMade}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="pen-18" />}
+            text={<T id={'edit_payment_made'} />}
+            onClick={handleEditPaymentMade}
+          />
+          <NavbarDivider />
+        </Can>
+        <Can I={Payment_Made_Abilities.Delete} a={AbilitySubject.PaymentMade}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeletePaymentMade}
+          />
+        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );
diff --git a/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js b/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js
index d021d63b2..78ca384f0 100644
--- a/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js
+++ b/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js
@@ -14,12 +14,14 @@ import { useHistory } from 'react-router-dom';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import {
   If,
+  Can,
   FormattedMessage as T,
   DashboardActionViewsList,
   DashboardFilterButton,
   AdvancedFilterPopover,
   DashboardRowsHeightButton,
 } from 'components';
+import { Bill_Abilities, AbilitySubject } from '../../../../common/abilityOption';
 
 import withBillsActions from './withBillsActions';
 import withBills from './withBills';
@@ -86,12 +88,14 @@ function BillActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'plus'} />}
-          text={<T id={'new_bill'} />}
-          onClick={handleClickNewBill}
-        />
+        <Can I={Bill_Abilities.Create} a={AbilitySubject.Bill}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'plus'} />}
+            text={<T id={'new_bill'} />}
+            onClick={handleClickNewBill}
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: billsConditionsRoles,
diff --git a/src/containers/Purchases/Bills/BillsLanding/components.js b/src/containers/Purchases/Bills/BillsLanding/components.js
index 9cd1ec6fa..13799617b 100644
--- a/src/containers/Purchases/Bills/BillsLanding/components.js
+++ b/src/containers/Purchases/Bills/BillsLanding/components.js
@@ -16,8 +16,14 @@ import {
   If,
   Choose,
   Money,
+  Can,
 } from 'components';
 import { formattedAmount, safeCallback, isBlank, calculateStatus } from 'utils';
+import {
+  Bill_Abilities,
+  Payment_Made_Abilities,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 /**
  * Actions menu.
@@ -40,38 +46,44 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('edit_bill')}
-        onClick={safeCallback(onEdit, original)}
-      />
+      <Can I={Bill_Abilities.Edit} a={AbilitySubject.Bill}>
+        <MenuDivider />
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_bill')}
+          onClick={safeCallback(onEdit, original)}
+        />
 
-      <If condition={!original.is_open}>
-        <MenuItem
-          icon={<Icon icon={'check'} iconSize={18} />}
-          text={intl.get('mark_as_opened')}
-          onClick={safeCallback(onOpen, original)}
-        />
-      </If>
-      <If condition={original.is_open && !original.is_fully_paid}>
-        <MenuItem
-          icon={<Icon icon="quick-payment-16" iconSize={16} />}
-          text={intl.get('add_payment')}
-          onClick={safeCallback(onQuick, original)}
-        />
-      </If>
+        <If condition={!original.is_open}>
+          <MenuItem
+            icon={<Icon icon={'check'} iconSize={18} />}
+            text={intl.get('mark_as_opened')}
+            onClick={safeCallback(onOpen, original)}
+          />
+        </If>
+      </Can>
+      <Can I={Payment_Made_Abilities.Create} a={AbilitySubject.PaymentMade}>
+        <If condition={original.is_open && !original.is_fully_paid}>
+          <MenuItem
+            icon={<Icon icon="quick-payment-16" iconSize={16} />}
+            text={intl.get('add_payment')}
+            onClick={safeCallback(onQuick, original)}
+          />
+        </If>
+      </Can>
       <MenuItem
         icon={<Icon icon="receipt-24" iconSize={16} />}
         text={intl.get('allocate_landed_coast')}
         onClick={safeCallback(onAllocateLandedCost, original)}
       />
-      <MenuItem
-        text={intl.get('delete_bill')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-      />
+      <Can I={Bill_Abilities.Delete} a={AbilitySubject.Bill}>
+        <MenuItem
+          text={intl.get('delete_bill')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
     </Menu>
   );
 }
diff --git a/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js b/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js
index b3c8776c0..069833b27 100644
--- a/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js
+++ b/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js
@@ -14,6 +14,7 @@ import { useHistory } from 'react-router-dom';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import {
   If,
+  Can,
   FormattedMessage as T,
   DashboardActionViewsList,
   DashboardFilterButton,
@@ -29,6 +30,10 @@ import withSettings from 'containers/Settings/withSettings';
 
 import { usePaymentMadesListContext } from './PaymentMadesListProvider';
 import { useRefreshPaymentMades } from 'hooks/query/paymentMades';
+import {
+  Payment_Made_Abilities,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 import { compose } from 'utils';
 
@@ -70,7 +75,7 @@ function PaymentMadeActionsBar({
   const handleRefreshBtnClick = () => {
     refresh();
   };
-  
+
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
     addSetting('billPayments', 'tableSize', size);
@@ -85,12 +90,14 @@ function PaymentMadeActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'plus'} />}
-          text={<T id={'new_payment_made'} />}
-          onClick={handleClickNewPaymentMade}
-        />
+        <Can I={Payment_Made_Abilities.Create} a={AbilitySubject.PaymentMade}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'plus'} />}
+            text={<T id={'new_payment_made'} />}
+            onClick={handleClickNewPaymentMade}
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: paymentMadesFilterConditions,
diff --git a/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js b/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js
index 875817ca7..e6572de48 100644
--- a/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js
+++ b/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js
@@ -10,7 +10,12 @@ import {
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
-import { Icon, Money, FormatDateCell } from 'components';
+import { Icon, Money, FormatDateCell, Can } from 'components';
+import {
+  Payment_Made_Abilities,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
+
 import { safeCallback } from 'utils';
 
 export function AmountAccessor(row) {
@@ -31,18 +36,23 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('edit_payment_made')}
-        onClick={safeCallback(onEdit, original)}
-      />
-      <MenuItem
-        text={intl.get('delete_payment_made')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-      />
+
+      <Can I={Payment_Made_Abilities.Edit} a={AbilitySubject.PaymentMade}>
+        <MenuDivider />
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_payment_made')}
+          onClick={safeCallback(onEdit, original)}
+        />
+      </Can>
+      <Can I={Payment_Made_Abilities.Delete} a={AbilitySubject.PaymentMade}>
+        <MenuItem
+          text={intl.get('delete_payment_made')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
     </Menu>
   );
 }