feat: bulk categorizing bank transactions

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

@@ -9,10 +9,15 @@ import {
   PopoverInteractionKind,
   Position,
   Tooltip,
+  Checkbox,
 } from '@blueprintjs/core';
 import { Box, FormatDateCell, Icon, MaterialProgressBar } from '@/components';
 import { useAccountTransactionsContext } from './AccountTransactionsProvider';
 import { safeCallback } from '@/utils';
+import {
+  useAddTransactionsToCategorizeSelected,
+  useRemoveTransactionsToCategorizeSelected,
+} from '@/hooks/state/banking';
 
 export function ActionsMenu({
   payload: { onUncategorize, onUnmatch },
@@ -183,6 +188,20 @@ function statusAccessor(transaction) {
  * Retrieve account uncategorized transctions table columns.
  */
 export function useAccountUncategorizedTransactionsColumns() {
+  const addTransactionsToCategorizeSelected =
+    useAddTransactionsToCategorizeSelected();
+
+  const removeTransactionsToCategorizeSelected =
+    useRemoveTransactionsToCategorizeSelected();
+
+  const handleChange = (value) => (event) => {
+    if (event.currentTarget.checked) {
+      addTransactionsToCategorizeSelected(value.id);
+    } else {
+      removeTransactionsToCategorizeSelected(value.id);
+    }
+  };
+
   return React.useMemo(
     () => [
       {
@@ -242,6 +261,15 @@ export function useAccountUncategorizedTransactionsColumns() {
         align: 'right',
         clickable: true,
       },
+      {
+        id: 'categorize_include',
+        Header: 'Include',
+        accessor: (value) => <Checkbox large onChange={handleChange(value)} />,
+        width: 10,
+        minWidth: 10,
+        maxWidth: 10,
+        align: 'right',
+      },
     ],
     [],
   );

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

@@ -8,6 +8,8 @@ import {
   resetUncategorizedTransactionsSelected,
   resetExcludedTransactionsSelected,
   setExcludedTransactionsSelected,
+  resetTransactionsToCategorizeSelected,
+  setTransactionsToCategorizeSelected,
 } from '@/store/banking/banking.reducer';
 
 export interface WithBankingActionsProps {
@@ -23,6 +25,9 @@ export interface WithBankingActionsProps {
 
   setExcludedTransactionsSelected: (ids: Array<string | number>) => void;
   resetExcludedTransactionsSelected: () => void;
+
+  setTransactionsToCategorizeSelected: (ids: Array<string | number>) => void;
+  resetTransactionsToCategorizeSelected: () => void;
 }
 
 const mapDipatchToProps = (dispatch: any): WithBankingActionsProps => ({
@@ -56,6 +61,11 @@ const mapDipatchToProps = (dispatch: any): WithBankingActionsProps => ({
     ),
   resetExcludedTransactionsSelected: () =>
     dispatch(resetExcludedTransactionsSelected()),
+
+  setTransactionsToCategorizeSelected: (ids: Array<string | number>) =>
+    dispatch(setTransactionsToCategorizeSelected({ ids })),
+  resetTransactionsToCategorizeSelected: () =>
+    dispatch(resetTransactionsToCategorizeSelected()),
 });
 
 export const withBankingActions = connect<