Merge branch 'develop' of https://github.com/bigcapitalhq/client into develop

src/containers/Drawers/InvoiceDetailDrawer/InvoiceGLEntriesTable.js

@@ -46,6 +46,4 @@ const InvoiceGLEntriesDatatable = styled(JournalEntriesTable)`
   }
 `;
 
-const InvoiceGLEntriesRoot = styled(Card)`
-  padding: 15px;
-`;
+const InvoiceGLEntriesRoot = styled(Card)``;

src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/InvoicePaymentTransactionsTable.js

@@ -1,20 +1,35 @@
 import React from 'react';
+import { useHistory } from 'react-router-dom';
 import { DataTable, Card } from 'components';
 
-import 'style/pages/PaymentTransactions/List.scss';
-
-import { useInvoicePaymentTransactionsColumns } from './components';
+import {
+  useInvoicePaymentTransactionsColumns,
+  ActionsMenu,
+} from './components';
 import { useInvoiceDetailDrawerContext } from '../InvoiceDetailDrawerProvider';
 import { useInvoicePaymentTransactions } from 'hooks/query';
 
 import { TableStyle } from '../../../../common';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
 /**
  * Invoice payment transactions datatable.
  */
-export default function InvoicePaymentTransactionsTable() {
-  // Retrieve invoice payment transactions columns.
+function InvoicePaymentTransactionsTable({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
+  // Invoice payment transactions table columns.
   const columns = useInvoicePaymentTransactionsColumns();
 
   // Invoice drawer context.
@@ -29,6 +44,18 @@ export default function InvoicePaymentTransactionsTable() {
     enabled: !!invoiceId,
   });
 
+  // Handles delete payment transactions.
+  const handleDeletePaymentTransactons = ({ payment_receive_id }) => {
+    openAlert('payment-receive-delete', {
+      paymentReceiveId: payment_receive_id,
+    });
+  };
+
+  // Handles edit payment transactions.
+  const handleEditPaymentTransactions = ({ payment_receive_id }) => {
+    history.push(`/payment-receives/${payment_receive_id}/edit`);
+    closeDrawer('invoice-detail-drawer');
+  };
   return (
     <Card>
       <DataTable
@@ -39,7 +66,17 @@ export default function InvoicePaymentTransactionsTable() {
         progressBarLoading={isPaymentTransactionFetching}
         TableLoadingRenderer={TableSkeletonRows}
         styleName={TableStyle.Constrant}
+        ContextMenu={ActionsMenu}
+        payload={{
+          onDelete: handleDeletePaymentTransactons,
+          onEdit: handleEditPaymentTransactions,
+        }}
       />
     </Card>
   );
 }
+
+export default compose(
+  withAlertsActions,
+  withDrawerActions,
+)(InvoicePaymentTransactionsTable);

src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js

@@ -1,9 +1,34 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-
+import { Intent, Menu, MenuItem } from '@blueprintjs/core';
 import clsx from 'classnames';
 import { CLASSES } from '../../../../common/classes';
-import { FormattedMessage as T, FormatDateCell } from '../../../../components';
+import { FormatDateCell, Icon } from '../../../../components';
+import { safeCallback } from 'utils';
+
+/**
+ * Table actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDelete },
+}) {
+  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} />}
+      />
+    </Menu>
+  );
+}
 
 /**
  * Retrieve invoice payment transactions table columns.