feat: disconnect bank account

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,7 @@ import withSettings from '@/containers/Settings/withSettings';
 import withSettingsActions from '@/containers/Settings/withSettingsActions';
 
 import { compose } from '@/utils';
+import { useDisconnectBankAccount } from '@/hooks/query/bank-rules';
 
 function AccountTransactionsActionsBar({
   // #withDialogActions
@@ -50,6 +53,8 @@ function AccountTransactionsActionsBar({
   // Refresh cashflow infinity transactions hook.
   const { refresh } = useRefreshCashflowTransactionsInfinity();
 
+  const { mutateAsync: disconnectBankAccount } = useDisconnectBankAccount();
+
   // Retrieves the money in/out buttons options.
   const addMoneyInOptions = useMemo(() => getAddMoneyInOptions(), []);
   const addMoneyOutOptions = useMemo(() => getAddMoneyOutOptions(), []);
@@ -82,6 +87,26 @@ function AccountTransactionsActionsBar({
   const handleBankRulesClick = () => {
     history.push(`/bank-rules?accountId=${accountId}`);
   };
+
+  const isConnected = true;
+
+  // Handles the bank account disconnect click.
+  const handleDisconnectClick = () => {
+    disconnectBankAccount(accountId)
+      .then(() => {
+        AppToaster.show({
+          message: 'The bank account has been disconnected.',
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {
+        AppToaster.show({
+          message: 'Something went wrong.',
+          intent: Intent.DANGER,
+        });
+      });
+  };
+
   // Handle the refresh button click.
   const handleRefreshBtnClick = () => {
     refresh();
@@ -142,6 +167,10 @@ function AccountTransactionsActionsBar({
           content={
             <Menu>
               <MenuItem onClick={handleBankRulesClick} text={'Bank rules'} />
+
+              {isConnected && (
+                <MenuItem onClick={handleDisconnectClick} text={'Disconnect'} />
+              )}
             </Menu>
           }
         >

packages/webapp/src/hooks/query/bank-rules.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import {
   QueryClient,
   UseMutationOptions,
@@ -61,6 +60,26 @@ export function useCreateBankRule(
   );
 }
 
+interface DisconnectBankAccountRes {}
+
+export function useDisconnectBankAccount(
+  options?: UseMutationOptions<number, Error, DisconnectBankAccountRes>,
+) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation<number, Error, DisconnectBankAccountRes>(
+    (bankAccountId: number) =>
+      apiRequest
+        .post(`/banking/bank_accounts/${bankAccountId}`)
+        .then((res) => res.data),
+    {
+      ...options,
+      onSuccess: () => {},
+    },
+  );
+}
+
 interface EditBankRuleValues {
   id: number;
   value: any;