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);