feat: exclude bank transactions in bulk

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

@@ -11,6 +11,7 @@ import {
   MenuItem,
   PopoverInteractionKind,
   Position,
+  Intent,
 } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import {
@@ -18,6 +19,7 @@ import {
   DashboardActionsBar,
   DashboardRowsHeightButton,
   FormattedMessage as T,
+  AppToaster,
 } from '@/components';
 
 import { CashFlowMenuItems } from './utils';
@@ -33,6 +35,13 @@ import withSettings from '@/containers/Settings/withSettings';
 import withSettingsActions from '@/containers/Settings/withSettingsActions';
 
 import { compose } from '@/utils';
+import { withBanking } from '../withBanking';
+import { isEmpty } from 'lodash';
+import {
+  useExcludeUncategorizedTransactions,
+  useUnexcludeUncategorizedTransaction,
+  useUnexcludeUncategorizedTransactions,
+} from '@/hooks/query/bank-rules';
 
 function AccountTransactionsActionsBar({
   // #withDialogActions
@@ -43,6 +52,10 @@ function AccountTransactionsActionsBar({
 
   // #withSettingsActions
   addSetting,
+
+  // #withBanking
+  uncategorizedTransationsIdsSelected,
+  excludedTransactionsIdsSelected,
 }) {
   const history = useHistory();
   const { accountId } = useAccountTransactionsContext();
@@ -87,6 +100,54 @@ function AccountTransactionsActionsBar({
     refresh();
   };
 
+  const {
+    mutateAsync: excludeUncategorizedTransactions,
+    isLoading: isExcludingLoading,
+  } = useExcludeUncategorizedTransactions();
+
+  const {
+    mutateAsync: unexcludeUncategorizedTransactions,
+    isLoading: isUnexcludingLoading,
+  } = useUnexcludeUncategorizedTransactions();
+
+  // Handles the exclude uncategorized transactions in bulk.
+  const handleExcludeUncategorizedBtnClick = () => {
+    excludeUncategorizedTransactions({
+      ids: uncategorizedTransationsIdsSelected,
+    })
+      .then(() => {
+        AppToaster.show({
+          message: 'The selected transactions have been excluded.',
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(() => {
+        AppToaster.show({
+          message: 'Something went wrong',
+          intent: Intent.DANGER,
+        });
+      });
+  };
+
+  // Handles the unexclude categorized button click.
+  const handleUnexcludeUncategorizedBtnClick = () => {
+    unexcludeUncategorizedTransactions({
+      ids: excludedTransactionsIdsSelected,
+    })
+      .then(() => {
+        AppToaster.show({
+          message: 'The selected transactions have been unexcluded.',
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {
+        AppToaster.show({
+          message: 'Something went wrong',
+          intent: Intent.DANGER,
+        });
+      });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -129,6 +190,28 @@ function AccountTransactionsActionsBar({
           onChange={handleTableRowSizeChange}
         />
         <NavbarDivider />
+
+        {!isEmpty(uncategorizedTransationsIdsSelected) && (
+          <Button
+            icon={<Icon icon="disable" iconSize={16} />}
+            text={'Exclude'}
+            onClick={handleExcludeUncategorizedBtnClick}
+            className={Classes.MINIMAL}
+            intent={Intent.DANGER}
+            disable={isExcludingLoading}
+          />
+        )}
+
+        {!isEmpty(excludedTransactionsIdsSelected) && (
+          <Button
+            icon={<Icon icon="disable" iconSize={16} />}
+            text={'Unexclude'}
+            onClick={handleUnexcludeUncategorizedBtnClick}
+            className={Classes.MINIMAL}
+            intent={Intent.DANGER}
+            disable={isUnexcludingLoading}
+          />
+        )}
       </NavbarGroup>
 
       <NavbarGroup align={Alignment.RIGHT}>
@@ -164,4 +247,13 @@ export default compose(
   withSettings(({ cashflowTransactionsSettings }) => ({
     cashflowTansactionsTableSize: cashflowTransactionsSettings?.tableSize,
   })),
+  withBanking(
+    ({
+      uncategorizedTransationsIdsSelected,
+      excludedTransactionsIdsSelected,
+    }) => ({
+      uncategorizedTransationsIdsSelected,
+      excludedTransactionsIdsSelected,
+    }),
+  ),
 )(AccountTransactionsActionsBar);

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

@@ -33,6 +33,7 @@ function AccountTransactionsDataTable({
 
   // #withBankingActions
   setUncategorizedTransactionIdForMatching,
+  setUncategorizedTransactionsSelected,
 }) {
   // Retrieve table columns.
   const columns = useAccountUncategorizedTransactionsColumns();
@@ -73,12 +74,19 @@ function AccountTransactionsDataTable({
       });
   };
 
+  // Handle selected rows change.
+  const handleSelectedRowsChange = (selected) => {
+    const _selectedIds = selected?.map((row) => row.original.id);
+    setUncategorizedTransactionsSelected(_selectedIds);
+  };
+
   return (
     <CashflowTransactionsTable
       noInitialFetch={true}
       columns={columns}
       data={uncategorizedTransactions || []}
       sticky={true}
+      selectionColumn={true}
       loading={isUncategorizedTransactionsLoading}
       headerLoading={isUncategorizedTransactionsLoading}
       expandColumnSpace={1}
@@ -99,6 +107,7 @@ function AccountTransactionsDataTable({
         'There is no uncategorized transactions in the current account.'
       }
       className="table-constrant"
+      onSelectedRowsChange={handleSelectedRowsChange}
       payload={{
         onExclude: handleExcludeTransaction,
         onCategorize: handleCategorizeBtnClick,

packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/ExcludedTransactionsTable.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Intent } from '@blueprintjs/core';
-
+import * as R from 'ramda';
 import {
   DataTable,
   TableFastCell,
@@ -19,11 +19,20 @@ import { useExcludedTransactionsBoot } from './ExcludedTransactionsTableBoot';
 
 import { ActionsMenu } from './_components';
 import { useUnexcludeUncategorizedTransaction } from '@/hooks/query/bank-rules';
+import {
+  WithBankingActionsProps,
+  withBankingActions,
+} from '../../withBankingActions';
+
+interface ExcludeTransactionsTableProps extends WithBankingActionsProps {}
 
 /**
  * Renders the recognized account transactions datatable.
  */
-export function ExcludedTransactionsTable() {
+function ExcludedTransactionsTableRoot({
+  // #withBankingActions
+  setExcludedTransactionsSelected,
+}: ExcludeTransactionsTableProps) {
   const { excludedBankTransactions } = useExcludedTransactionsBoot();
   const { mutateAsync: unexcludeBankTransaction } =
     useUnexcludeUncategorizedTransaction();
@@ -55,6 +64,12 @@ export function ExcludedTransactionsTable() {
       });
   };
 
+  // Handle selected rows change.
+  const handleSelectedRowsChange = (selected) => {
+    const _selectedIds = selected?.map((row) => row.original.id);
+    setExcludedTransactionsSelected(_selectedIds);
+  };
+
   return (
     <CashflowTransactionsTable
       noInitialFetch={true}
@@ -80,6 +95,8 @@ export function ExcludedTransactionsTable() {
       onColumnResizing={handleColumnResizing}
       noResults={'There is no excluded bank transactions.'}
       className="table-constrant"
+      selectionColumn={true}
+      onSelectedRowsChange={handleSelectedRowsChange}
       payload={{
         onRestore: handleRestoreClick,
       }}
@@ -87,6 +104,10 @@ export function ExcludedTransactionsTable() {
   );
 }
 
+export const ExcludedTransactionsTable = R.compose(withBankingActions)(
+  ExcludedTransactionsTableRoot,
+);
+
 const DashboardConstrantTable = styled(DataTable)`
   .table {
     .thead {

packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountExcludedTransactions.tsx

@@ -1,8 +1,27 @@
-import { ExcludedTransactionsTable } from "../ExcludedTransactions/ExcludedTransactionsTable";
-import { ExcludedBankTransactionsTableBoot } from "../ExcludedTransactions/ExcludedTransactionsTableBoot";
-import { AccountTransactionsCard } from "./AccountTransactionsCard";
+// @ts-nocheck
+import { useEffect } from 'react';
+import * as R from 'ramda';
+import {
+  WithBankingActionsProps,
+  withBankingActions,
+} from '../../withBankingActions';
+import { ExcludedTransactionsTable } from '../ExcludedTransactions/ExcludedTransactionsTable';
+import { ExcludedBankTransactionsTableBoot } from '../ExcludedTransactions/ExcludedTransactionsTableBoot';
+import { AccountTransactionsCard } from './AccountTransactionsCard';
+
+interface AccountExcludedTransactionsProps extends WithBankingActionsProps {}
+
+function AccountExcludedTransactionsRoot({
+  // #withBankingActions
+  resetExcludedTransactionsSelected,
+}: AccountExcludedTransactionsProps) {
+  useEffect(
+    () => () => {
+      resetExcludedTransactionsSelected();
+    },
+    [resetExcludedTransactionsSelected],
+  );
 
-export function AccountExcludedTransactions() {
   return (
     <ExcludedBankTransactionsTableBoot>
       <AccountTransactionsCard>
@@ -11,3 +30,7 @@ export function AccountExcludedTransactions() {
     </ExcludedBankTransactionsTableBoot>
   );
 }
+
+export const AccountExcludedTransactions = R.compose(withBankingActions)(
+  AccountExcludedTransactionsRoot,
+);

packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountUncategorizedTransactionsAll.tsx

@@ -1,8 +1,26 @@
+import * as R from 'ramda';
+import { useEffect } from 'react';
 import AccountTransactionsUncategorizedTable from '../AccountTransactionsUncategorizedTable';
 import { AccountUncategorizedTransactionsBoot } from '../AllTransactionsUncategorizedBoot';
 import { AccountTransactionsCard } from './AccountTransactionsCard';
+import {
+  WithBankingActionsProps,
+  withBankingActions,
+} from '../../withBankingActions';
+
+interface AccountUncategorizedTransactionsAllRootProps
+  extends WithBankingActionsProps {}
+
+function AccountUncategorizedTransactionsAllRoot({
+  resetUncategorizedTransactionsSelected,
+}: AccountUncategorizedTransactionsAllRootProps) {
+  useEffect(
+    () => () => {
+      resetUncategorizedTransactionsSelected();
+    },
+    [resetUncategorizedTransactionsSelected],
+  );
 
-export function AccountUncategorizedTransactionsAll() {
   return (
     <AccountUncategorizedTransactionsBoot>
       <AccountTransactionsCard>
@@ -11,3 +29,7 @@ export function AccountUncategorizedTransactionsAll() {
     </AccountUncategorizedTransactionsBoot>
   );
 }
+
+export const AccountUncategorizedTransactionsAll = R.compose(
+  withBankingActions,
+)(AccountUncategorizedTransactionsAllRoot);

packages/webapp/src/containers/CashFlow/withBanking.ts

@@ -13,6 +13,11 @@ export const withBanking = (mapState) => {
 
       reconcileMatchingTransactionPendingAmount:
         state.plaid.openReconcileMatchingTransaction.pending,
+
+      uncategorizedTransationsIdsSelected:
+        state.plaid.uncategorizedTransactionsSelected,
+
+      excludedTransactionsIdsSelected: state.plaid.excludedTransactionsSelected,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

packages/webapp/src/containers/CashFlow/withBankingActions.ts

@@ -4,6 +4,10 @@ import {
   setUncategorizedTransactionIdForMatching,
   openReconcileMatchingTransaction,
   closeReconcileMatchingTransaction,
+  setUncategorizedTransactionsSelected,
+  resetUncategorizedTransactionsSelected,
+  resetExcludedTransactionsSelected,
+  setExcludedTransactionsSelected,
 } from '@/store/banking/banking.reducer';
 
 export interface WithBankingActionsProps {
@@ -13,6 +17,12 @@ export interface WithBankingActionsProps {
   ) => void;
   openReconcileMatchingTransaction: (pendingAmount: number) => void;
   closeReconcileMatchingTransaction: () => void;
+
+  setUncategorizedTransactionsSelected: (ids: Array<string | number>) => void;
+  resetUncategorizedTransactionsSelected: () => void;
+
+  setExcludedTransactionsSelected: (ids: Array<string | number>) => void;
+  resetExcludedTransactionsSelected: () => void;
 }
 
 const mapDipatchToProps = (dispatch: any): WithBankingActionsProps => ({
@@ -28,6 +38,24 @@ const mapDipatchToProps = (dispatch: any): WithBankingActionsProps => ({
     dispatch(openReconcileMatchingTransaction({ pending: pendingAmount })),
   closeReconcileMatchingTransaction: () =>
     dispatch(closeReconcileMatchingTransaction()),
+
+  setUncategorizedTransactionsSelected: (ids: Array<string | number>) =>
+    dispatch(
+      setUncategorizedTransactionsSelected({
+        transactionIds: ids,
+      }),
+    ),
+  resetUncategorizedTransactionsSelected: () =>
+    dispatch(resetUncategorizedTransactionsSelected()),
+
+  setExcludedTransactionsSelected: (ids: Array<string | number>) =>
+    dispatch(
+      setExcludedTransactionsSelected({
+        ids,
+      }),
+    ),
+  resetExcludedTransactionsSelected: () =>
+    dispatch(resetExcludedTransactionsSelected()),
 });
 
 export const withBankingActions = connect<