feat(banking): uncategorize bank transactions in bulk

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

@@ -210,7 +210,11 @@ function AccountTransactionsActionsBar({
   };
 
   // Handles uncategorize the categorized transactions in bulk.
-  const handleUncategorizeCategorizedBulkBtnClick = () => {};
+  const handleUncategorizeCategorizedBulkBtnClick = () => {
+    openAlert('uncategorize-transactions-bulk', {
+      uncategorizeTransactionsIds: categorizedTransactionsSelected,
+    });
+  };
 
   return (
     <DashboardActionsBar>

packages/webapp/src/containers/CashFlow/AccountTransactions/alerts/UncategorizeBankTransactionsBulkAlert.tsx

@@ -0,0 +1,69 @@
+// @ts-nocheck
+import React from 'react';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { AppToaster, FormattedMessage as T } from '@/components';
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+
+import { useUncategorizeTransactionsBulkAction } from '@/hooks/query/bank-transactions';
+import { compose } from '@/utils';
+
+/**
+ * Uncategorize bank account transactions in build alert.
+ */
+function UncategorizeBankTransactionsBulkAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { uncategorizeTransactionsIds },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: uncategorizeTransactions, isLoading } =
+    useUncategorizeTransactionsBulkAction();
+
+  // Handle activate item alert cancel.
+  const handleCancelActivateItem = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm item activated.
+  const handleConfirmItemActivate = () => {
+    uncategorizeTransactions({ ids: uncategorizeTransactionsIds })
+      .then(() => {
+        AppToaster.show({
+          message: 'The bank feeds of the bank account has been resumed.',
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={'Uncategorize Transactions'}
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelActivateItem}
+      loading={isLoading}
+      onConfirm={handleConfirmItemActivate}
+    >
+      <p>
+        Are you sure want to uncategorize the selected bank transactions, this
+        action is not revertable but you can always categorize them again?
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(UncategorizeBankTransactionsBulkAlert);

packages/webapp/src/containers/CashFlow/AccountTransactions/alerts/index.ts

@@ -9,6 +9,10 @@ const PauseFeedsBankAccountAlert = React.lazy(
   () => import('./PauseFeedsBankAccount'),
 );
 
+const UncategorizeTransactionsBulkAlert = React.lazy(
+  () => import('./UncategorizeBankTransactionsBulkAlert'),
+);
+
 /**
  * Bank account alerts.
  */
@@ -21,4 +25,8 @@ export const BankAccountAlerts = [
     name: 'pause-feeds-syncing-bank-accounnt',
     component: PauseFeedsBankAccountAlert,
   },
+  {
+    name: 'uncategorize-transactions-bulk',
+    component: UncategorizeTransactionsBulkAlert,
+  },
 ];