From 35a061d188f9fbe6a1e37d80c2a8cee9ec81fc95 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Sun, 11 Aug 2024 13:02:38 +0200
Subject: [PATCH] feat: Uncategorize bank transactions in bulk

---
 .../AccountTransactionsActionsBar.tsx         | 16 +++++++++++-
 .../AccountTransactionsDataTable.tsx          | 17 ++++++++++++-
 .../src/containers/CashFlow/withBanking.ts    |  3 +++
 .../containers/CashFlow/withBankingActions.ts | 18 +++++++++++++
 .../src/store/banking/banking.reducer.ts      | 25 +++++++++++++++++++
 5 files changed, 77 insertions(+), 2 deletions(-)

diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.tsx
index cf267da57..c5428b9da 100644
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.tsx
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.tsx
@@ -64,6 +64,7 @@ function AccountTransactionsActionsBar({
   uncategorizedTransationsIdsSelected,
   excludedTransactionsIdsSelected,
   openMatchingTransactionAside,
+  categorizedTransactionsSelected,
 
   // #withBankingActions
   enableMultipleCategorization,
@@ -194,7 +195,7 @@ function AccountTransactionsActionsBar({
   // Handle multi select transactions for categorization or matching.
   const handleMultipleCategorizingSwitch = (event) => {
     enableMultipleCategorization(event.currentTarget.checked);
-  }
+  };
   // Handle resume bank feeds syncing.
   const handleResumeFeedsSyncing = () => {
     openAlert('resume-feeds-syncing-bank-accounnt', {
@@ -208,6 +209,9 @@ function AccountTransactionsActionsBar({
     });
   };
 
+  // Handles uncategorize the categorized transactions in bulk.
+  const handleUncategorizeCategorizedBulkBtnClick = () => {};
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -297,6 +301,14 @@ function AccountTransactionsActionsBar({
             disabled={isUnexcludingLoading}
           />
         )}
+        {!isEmpty(categorizedTransactionsSelected) && (
+          <Button
+            text={'Uncategorize'}
+            onClick={handleUncategorizeCategorizedBulkBtnClick}
+            intent={Intent.DANGER}
+            minimal
+          />
+        )}
       </NavbarGroup>
 
       <NavbarGroup align={Alignment.RIGHT}>
@@ -379,10 +391,12 @@ export default compose(
       uncategorizedTransationsIdsSelected,
       excludedTransactionsIdsSelected,
       openMatchingTransactionAside,
+      categorizedTransactionsSelected,
     }) => ({
       uncategorizedTransationsIdsSelected,
       excludedTransactionsIdsSelected,
       openMatchingTransactionAside,
+      categorizedTransactionsSelected,
     }),
   ),
   withBankingActions,
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.tsx
index 1c37a28f1..660749175 100644
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.tsx
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.tsx
@@ -22,10 +22,11 @@ import { useMemorizedColumnsWidths } from '@/hooks';
 import { useAccountTransactionsColumns, ActionsMenu } from './components';
 import { useAccountTransactionsAllContext } from './AccountTransactionsAllBoot';
 import { useUnmatchMatchedUncategorizedTransaction } from '@/hooks/query/bank-rules';
+import { useUncategorizeTransaction } from '@/hooks/query';
 import { handleCashFlowTransactionType } from './utils';
 
 import { compose } from '@/utils';
-import { useUncategorizeTransaction } from '@/hooks/query';
+import { withBankingActions } from '../withBankingActions';
 
 /**
  * Account transactions data table.
@@ -39,6 +40,9 @@ function AccountTransactionsDataTable({
 
   // #withDrawerActions
   openDrawer,
+
+  // #withBankingActions
+  setCategorizedTransactionsSelected,
 }) {
   // Retrieve table columns.
   const columns = useAccountTransactionsColumns();
@@ -97,6 +101,14 @@ function AccountTransactionsDataTable({
       });
   };
 
+  // Handle selected rows change.
+  const handleSelectedRowsChange = (selected) => {
+    const selectedIds = selected?.map(
+      (row) => row.original.uncategorized_transaction_id,
+    );
+    setCategorizedTransactionsSelected(selectedIds);
+  };
+
   return (
     <CashflowTransactionsTable
       noInitialFetch={true}
@@ -119,6 +131,8 @@ function AccountTransactionsDataTable({
       vListOverscanRowCount={0}
       initialColumnsWidths={initialColumnsWidths}
       onColumnResizing={handleColumnResizing}
+      selectionColumn={true}
+      onSelectedRowsChange={handleSelectedRowsChange}
       noResults={<T id={'cash_flow.account_transactions.no_results'} />}
       className="table-constrant"
       payload={{
@@ -136,6 +150,7 @@ export default compose(
   })),
   withAlertsActions,
   withDrawerActions,
+  withBankingActions,
 )(AccountTransactionsDataTable);
 
 const DashboardConstrantTable = styled(DataTable)`
diff --git a/packages/webapp/src/containers/CashFlow/withBanking.ts b/packages/webapp/src/containers/CashFlow/withBanking.ts
index 117935ebc..7533e3738 100644
--- a/packages/webapp/src/containers/CashFlow/withBanking.ts
+++ b/packages/webapp/src/containers/CashFlow/withBanking.ts
@@ -22,6 +22,9 @@ export const withBanking = (mapState) => {
 
       transactionsToCategorizeIdsSelected:
         state.plaid.transactionsToCategorizeSelected,
+
+      categorizedTransactionsSelected:
+        state.plaid.categorizedTransactionsSelected,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };
diff --git a/packages/webapp/src/containers/CashFlow/withBankingActions.ts b/packages/webapp/src/containers/CashFlow/withBankingActions.ts
index 4b6b14126..f7095491d 100644
--- a/packages/webapp/src/containers/CashFlow/withBankingActions.ts
+++ b/packages/webapp/src/containers/CashFlow/withBankingActions.ts
@@ -13,6 +13,8 @@ import {
   enableMultipleCategorization,
   addTransactionsToCategorizeSelected,
   removeTransactionsToCategorizeSelected,
+  setCategorizedTransactionsSelected,
+  resetCategorizedTransactionsSelected,
 } from '@/store/banking/banking.reducer';
 
 export interface WithBankingActionsProps {
@@ -35,6 +37,9 @@ export interface WithBankingActionsProps {
   resetTransactionsToCategorizeSelected: () => void;
 
   enableMultipleCategorization: (enable: boolean) => void;
+
+  setCategorizedTransactionsSelected: (ids: Array<string | number>) => void;
+  resetCategorizedTransactionsSelected: () => void;
 }
 
 const mapDipatchToProps = (dispatch: any): WithBankingActionsProps => ({
@@ -120,6 +125,19 @@ const mapDipatchToProps = (dispatch: any): WithBankingActionsProps => ({
    */
   enableMultipleCategorization: (enable: boolean) =>
     dispatch(enableMultipleCategorization({ enable })),
+
+  /**
+   * Sets the selected ids of the categorized transactions.
+   * @param {Array<string | number>} ids
+   */
+  setCategorizedTransactionsSelected: (ids: Array<string | number>) =>
+    dispatch(setCategorizedTransactionsSelected({ ids })),
+
+  /**
+   * Resets the selected categorized transcations.
+   */
+  resetCategorizedTransactionsSelected: () =>
+    dispatch(resetCategorizedTransactionsSelected()),
 });
 
 export const withBankingActions = connect<
diff --git a/packages/webapp/src/store/banking/banking.reducer.ts b/packages/webapp/src/store/banking/banking.reducer.ts
index ff75372dd..1a72474b4 100644
--- a/packages/webapp/src/store/banking/banking.reducer.ts
+++ b/packages/webapp/src/store/banking/banking.reducer.ts
@@ -12,6 +12,8 @@ interface StorePlaidState {
   transactionsToCategorizeSelected: Array<number | string>;
 
   enableMultipleCategorization: boolean;
+
+  categorizedTransactionsSelected: Array<number | string>;
 }
 
 export const PlaidSlice = createSlice({
@@ -28,6 +30,7 @@ export const PlaidSlice = createSlice({
     excludedTransactionsSelected: [],
     transactionsToCategorizeSelected: [],
     enableMultipleCategorization: false,
+    categorizedTransactionsSelected: [],
   } as StorePlaidState,
   reducers: {
     setPlaidId: (state: StorePlaidState, action: PayloadAction<string>) => {
@@ -176,6 +179,26 @@ export const PlaidSlice = createSlice({
     ) => {
       state.enableMultipleCategorization = action.payload.enable;
     },
+
+    /**
+     * Sets the selected ids of the categorized transactions.
+     * @param {StorePlaidState}
+     * @param {PayloadAction<{ ids: Array<string | number> }>}
+     */
+    setCategorizedTransactionsSelected: (
+      state: StorePlaidState,
+      action: PayloadAction<{ ids: Array<string | number> }>,
+    ) => {
+      state.categorizedTransactionsSelected = action.payload.ids;
+    },
+
+    /**
+     * Resets the selected categorized transcations.
+     * @param {StorePlaidState}
+     */
+    resetCategorizedTransactionsSelected: (state: StorePlaidState) => {
+      state.categorizedTransactionsSelected = [];
+    },
   },
 });
 
@@ -195,6 +218,8 @@ export const {
   removeTransactionsToCategorizeSelected,
   resetTransactionsToCategorizeSelected,
   enableMultipleCategorization,
+  setCategorizedTransactionsSelected,
+  resetCategorizedTransactionsSelected,
 } = PlaidSlice.actions;
 
 export const getPlaidToken = (state: any) => state.plaid.plaidToken;