feat: add context menu.

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

@@ -1,13 +1,28 @@
 import React from 'react';
+import { useHistory } from 'react-router-dom';
+
 import { DataTable } from '../../../../../components';
 import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
 import { useItemAssociatedBillTransactions } from 'hooks/query';
 import { useBillTransactionsColumns, ActionsMenu } from './components';
 
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
 /**
  * Bill payment transactions data table.
  */
-export default function BillPaymentTransactions() {
+function BillPaymentTransactions({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
   const columns = useBillTransactionsColumns();
 
   const { itemId } = useItemDetailDrawerContext();
@@ -21,6 +36,18 @@ export default function BillPaymentTransactions() {
     enabled: !!itemId,
   });
 
+  // Handles delete payment transactions.
+  const handleDeletePaymentTransactons = ({ bill_id }) => {
+    openAlert('bill-delete', {
+      billId: bill_id,
+    });
+  };
+
+  // Handles edit payment transactions.
+  const handleEditPaymentTransactions = ({ bill_id }) => {
+    history.push(`/bills/${bill_id}/edit`);
+    closeDrawer('item-detail-drawer');
+  };
   return (
     <DataTable
       columns={columns}
@@ -29,6 +56,14 @@ export default function BillPaymentTransactions() {
       headerLoading={isBillTransactionsLoading}
       progressBarLoading={isBillTransactionFetching}
       ContextMenu={ActionsMenu}
+      payload={{
+        onEdit: handleEditPaymentTransactions,
+        onDelete: handleDeletePaymentTransactons,
+      }}
     />
   );
 }
+export default compose(
+  withAlertsActions,
+  withDrawerActions,
+)(BillPaymentTransactions);

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

@@ -38,6 +38,18 @@ function InvoicePaymentTransactions({
     enabled: !!itemId,
   });
 
+  // Handles delete payment transactions.
+  const handleDeletePaymentTransactons = ({ invoice_id }) => {
+    openAlert('invoice-delete', {
+      invoiceId: invoice_id,
+    });
+  };
+
+  // Handles edit payment transactions.
+  const handleEditPaymentTransactions = ({ invoice_id }) => {
+    history.push(`/invoices/${invoice_id}/edit`);
+    closeDrawer('item-detail-drawer');
+  };
   return (
     <DataTable
       columns={columns}
@@ -46,6 +58,10 @@ function InvoicePaymentTransactions({
       headerLoading={isInvoiceTransactionsLoading}
       progressBarLoading={isInvoiceTransactionFetching}
       ContextMenu={ActionsMenu}
+      payload={{
+        onEdit: handleEditPaymentTransactions,
+        onDelete: handleDeletePaymentTransactons,
+      }}
     />
   );
 }

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

@@ -35,7 +35,20 @@ function ReceiptPaymentTransactions({
   } = useItemAssociatedReceiptTransactions(itemId, {
     enabled: !!itemId,
   });
-
+  
+    // Handles delete payment transactions.
+    const handleDeletePaymentTransactons = ({ receipt_id }) => {
+      openAlert('receipt-delete', {
+        receiptId: receipt_id,
+      });
+    };
+  
+    // Handles edit payment transactions.
+    const handleEditPaymentTransactions = ({ receipt_id }) => {
+      history.push(`/receipts/${receipt_id}/edit`);
+      closeDrawer('item-detail-drawer');
+    };
+  
   return (
     <DataTable
       columns={columns}
@@ -44,6 +57,10 @@ function ReceiptPaymentTransactions({
       headerLoading={isReceiptTransactionsLoading}
       progressBarLoading={isReceiptTransactionFetching}
       ContextMenu={ActionsMenu}
+      payload={{
+        onEdit: handleEditPaymentTransactions,
+        onDelete: handleDeletePaymentTransactons,
+      }}
     />
   );
 }