Merge branch 'develop' into disconnect-bank-account

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

@@ -16,6 +16,7 @@ import {
   MenuDivider,
 } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
+import { isEmpty } from 'lodash';
 import {
   Icon,
   DashboardActionsBar,
@@ -41,8 +42,10 @@ import { compose } from '@/utils';
 import {
   useDisconnectBankAccount,
   useUpdateBankAccount,
+  useExcludeUncategorizedTransactions,
+  useUnexcludeUncategorizedTransactions,
 } from '@/hooks/query/bank-rules';
-import { current } from '@reduxjs/toolkit';
+import { withBanking } from '../withBanking';
 
 function AccountTransactionsActionsBar({
   // #withDialogActions
@@ -53,6 +56,10 @@ function AccountTransactionsActionsBar({
 
   // #withSettingsActions
   addSetting,
+
+  // #withBanking
+  uncategorizedTransationsIdsSelected,
+  excludedTransactionsIdsSelected,
 }) {
   const history = useHistory();
   const { accountId, currentAccount } = useAccountTransactionsContext();
@@ -136,6 +143,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 excluded transactions have been unexcluded.',
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {
+        AppToaster.show({
+          message: 'Something went wrong',
+          intent: Intent.DANGER,
+        });
+      });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -196,6 +251,27 @@ function AccountTransactionsActionsBar({
             />
           </Tooltip>
         </If>
+
+        {!isEmpty(uncategorizedTransationsIdsSelected) && (
+          <Button
+            icon={<Icon icon="disable" iconSize={16} />}
+            text={'Exclude'}
+            onClick={handleExcludeUncategorizedBtnClick}
+            className={Classes.MINIMAL}
+            intent={Intent.DANGER}
+            disabled={isExcludingLoading}
+          />
+        )}
+        {!isEmpty(excludedTransactionsIdsSelected) && (
+          <Button
+            icon={<Icon icon="disable" iconSize={16} />}
+            text={'Unexclude'}
+            onClick={handleUnexcludeUncategorizedBtnClick}
+            className={Classes.MINIMAL}
+            intent={Intent.DANGER}
+            disabled={isUnexcludingLoading}
+          />
+        )}
       </NavbarGroup>
 
       <NavbarGroup align={Alignment.RIGHT}>
@@ -239,4 +315,13 @@ export default compose(
   withSettings(({ cashflowTransactionsSettings }) => ({
     cashflowTansactionsTableSize: cashflowTransactionsSettings?.tableSize,
   })),
+  withBanking(
+    ({
+      uncategorizedTransationsIdsSelected,
+      excludedTransactionsIdsSelected,
+    }) => ({
+      uncategorizedTransationsIdsSelected,
+      excludedTransactionsIdsSelected,
+    }),
+  ),
 )(AccountTransactionsActionsBar);