feat: hook up the matching form to the server

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsUncategorizedTable.tsx

@@ -9,6 +9,7 @@ import {
   TableSkeletonHeader,
   TableVirtualizedListRows,
   FormattedMessage as T,
+  AppToaster,
 } from '@/components';
 import { TABLES } from '@/constants/tables';
 
@@ -24,6 +25,8 @@ import { useAccountUncategorizedTransactionsContext } from './AllTransactionsUnc
 
 import { compose } from '@/utils';
 import { DRAWERS } from '@/constants/drawers';
+import { useExcludeUncategorizedTransaction } from '@/hooks/query/bank-rules';
+import { Intent } from '@blueprintjs/core';
 
 /**
  * Account transactions data table.
@@ -42,6 +45,9 @@ function AccountTransactionsDataTable({
   const { uncategorizedTransactions, isUncategorizedTransactionsLoading } =
     useAccountUncategorizedTransactionsContext();
 
+  const { mutateAsync: excludeTransaction } =
+    useExcludeUncategorizedTransaction();
+
   // Local storage memorizing columns widths.
   const [initialColumnsWidths, , handleColumnResizing] =
     useMemorizedColumnsWidths(TABLES.UNCATEGORIZED_CASHFLOW_TRANSACTION);
@@ -52,6 +58,22 @@ function AccountTransactionsDataTable({
       uncategorizedTransactionId: cell.row.original.id,
     });
   };
+  // Handle exclude transaction.
+  const handleExcludeTransaction = (transaction) => {
+    excludeTransaction(transaction.id)
+      .then(() => {
+        AppToaster.show({
+          intent: Intent.SUCCESS,
+          message: 'The bank transaction has been excluded successfully.',
+        });
+      })
+      .catch((error) => {
+        AppToaster.show({
+          intent: Intent.DANGER,
+          message: 'Something went wrong.',
+        });
+      });
+  };
 
   return (
     <CashflowTransactionsTable
@@ -77,6 +99,9 @@ function AccountTransactionsDataTable({
       onColumnResizing={handleColumnResizing}
       noResults={<T id={'cash_flow.account_transactions.no_results'} />}
       className="table-constrant"
+      payload={{
+        onExclude: handleExcludeTransaction,
+      }}
     />
   );
 }

packages/webapp/src/containers/CashFlow/AccountTransactions/components.tsx

@@ -15,7 +15,7 @@ import { AbilitySubject, CashflowAction } from '@/constants/abilityOption';
 import { safeCallback } from '@/utils';
 
 export function ActionsMenu({
-  payload: { onDelete, onViewDetails },
+  payload: { onDelete, onViewDetails, onExclude },
   row: { original },
 }) {
   return (
@@ -36,6 +36,12 @@ export function ActionsMenu({
           />
         </If>
       </Can>
+      <MenuDivider />
+      <MenuItem
+        text={'Exclude'}
+        onClick={safeCallback(onExclude, original)}
+        // icon={<Icon icon="trash-16" iconSize={16} />}
+      />
     </Menu>
   );
 }