feat: uncategorize the cashflow transaction

packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerActionBar.tsx

@@ -1,11 +1,18 @@
 // @ts-nocheck
 import React from 'react';
-import { Button, Classes, NavbarGroup, Intent } from '@blueprintjs/core';
+import {
+  Button,
+  Classes,
+  NavbarGroup,
+  Intent,
+  NavbarDivider,
+} from '@blueprintjs/core';
 import {
   Can,
   FormattedMessage as T,
   DrawerActionsBar,
   Icon,
+  If,
 } from '@/components';
 import withAlertsActions from '@/containers/Alert/withAlertActions';
 import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
@@ -19,13 +26,22 @@ function CashflowTransactionDrawerActionBar({
   // #withAlertsDialog
   openAlert,
 }) {
-  const { referenceId } = useCashflowTransactionDrawerContext();
+  const { referenceId, cashflowTransaction } =
+    useCashflowTransactionDrawerContext();
 
   // Handle cashflow transaction delete action.
   const handleDeleteCashflowTransaction = () => {
     openAlert('account-transaction-delete', { referenceId });
   };
 
+  // Handles the uncategorize button click.
+  const handleUncategorizeBtnClick = () => {
+    openAlert('cashflow-tranaction-uncategorize', {
+      uncategorizedTransactionId:
+        cashflowTransaction.uncategorized_transaction_id,
+    });
+  };
+
   return (
     <Can I={CashflowAction.Delete} a={AbilitySubject.Cashflow}>
       <DrawerActionsBar>
@@ -37,6 +53,14 @@ function CashflowTransactionDrawerActionBar({
             intent={Intent.DANGER}
             onClick={handleDeleteCashflowTransaction}
           />
+          <If condition={cashflowTransaction.uncategorized_transaction_id}>
+            <NavbarDivider />
+            <Button
+              text={'Uncategorize'}
+              onClick={handleUncategorizeBtnClick}
+              className={Classes.MINIMAL}
+            />
+          </If>
         </NavbarGroup>
       </DrawerActionsBar>
     </Can>