feat: disconnect and update bank account

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

@@ -12,6 +12,8 @@ import {
   PopoverInteractionKind,
   Position,
   Intent,
+  Tooltip,
+  MenuDivider,
 } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import {
@@ -35,7 +37,10 @@ import withSettings from '@/containers/Settings/withSettings';
 import withSettingsActions from '@/containers/Settings/withSettingsActions';
 
 import { compose } from '@/utils';
-import { useDisconnectBankAccount } from '@/hooks/query/bank-rules';
+import {
+  useDisconnectBankAccount,
+  useUpdateBankAccount,
+} from '@/hooks/query/bank-rules';
 
 function AccountTransactionsActionsBar({
   // #withDialogActions
@@ -54,6 +59,7 @@ function AccountTransactionsActionsBar({
   const { refresh } = useRefreshCashflowTransactionsInfinity();
 
   const { mutateAsync: disconnectBankAccount } = useDisconnectBankAccount();
+  const { mutateAsync: updateBankAccount } = useUpdateBankAccount();
 
   // Retrieves the money in/out buttons options.
   const addMoneyInOptions = useMemo(() => getAddMoneyInOptions(), []);
@@ -92,7 +98,7 @@ function AccountTransactionsActionsBar({
 
   // Handles the bank account disconnect click.
   const handleDisconnectClick = () => {
-    disconnectBankAccount(accountId)
+    disconnectBankAccount({ bankAccountId: accountId })
       .then(() => {
         AppToaster.show({
           message: 'The bank account has been disconnected.',
@@ -106,7 +112,22 @@ function AccountTransactionsActionsBar({
         });
       });
   };
-
+  // handles the bank update button click.
+  const handleBankUpdateClick = () => {
+    updateBankAccount({ bankAccountId: accountId })
+      .then(() => {
+        AppToaster.show({
+          message: 'The transactions of the bank account has been updated.',
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(() => {
+        AppToaster.show({
+          message: 'Something went wrong.',
+          intent: Intent.DANGER,
+        });
+      });
+  };
   // Handle the refresh button click.
   const handleRefreshBtnClick = () => {
     refresh();
@@ -154,6 +175,18 @@ function AccountTransactionsActionsBar({
           onChange={handleTableRowSizeChange}
         />
         <NavbarDivider />
+
+        <Tooltip
+          content={'The bank syncing is active'}
+          minimal={true}
+          position={Position.BOTTOM}
+        >
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="feed" iconSize={16} color="#238C2C" />}
+            intent={Intent.SUCCESS}
+          />
+        </Tooltip>
       </NavbarGroup>
 
       <NavbarGroup align={Alignment.RIGHT}>
@@ -166,6 +199,10 @@ function AccountTransactionsActionsBar({
           }}
           content={
             <Menu>
+              {isConnected && (
+                <MenuItem onClick={handleBankUpdateClick} text={'Update'} />
+              )}
+              <MenuDivider />
               <MenuItem onClick={handleBankRulesClick} text={'Bank rules'} />
 
               {isConnected && (

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

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   QueryClient,
   UseMutationOptions,
@@ -61,18 +62,66 @@ export function useCreateBankRule(
 }
 
 interface DisconnectBankAccountRes {}
+interface DisconnectBankAccountValues {
+  bankAccountId: number;
+}
 
+/**
+ * Disconnects the given bank account.
+ * @param {UseMutationOptions<DisconnectBankAccountRes, Error, DisconnectBankAccountValues>} options
+ * @returns {UseMutationResult<DisconnectBankAccountRes, Error, DisconnectBankAccountValues>}
+ */
 export function useDisconnectBankAccount(
-  options?: UseMutationOptions<number, Error, DisconnectBankAccountRes>,
-) {
+  options?: UseMutationOptions<
+    DisconnectBankAccountRes,
+    Error,
+    DisconnectBankAccountValues
+  >,
+): UseMutationResult<
+  DisconnectBankAccountRes,
+  Error,
+  DisconnectBankAccountValues
+> {
   const queryClient = useQueryClient();
   const apiRequest = useApiRequest();
 
-  return useMutation<number, Error, DisconnectBankAccountRes>(
-    (bankAccountId: number) =>
-      apiRequest
-        .post(`/banking/bank_accounts/${bankAccountId}`)
-        .then((res) => res.data),
+  return useMutation<
+    DisconnectBankAccountRes,
+    Error,
+    DisconnectBankAccountValues
+  >(
+    ({ bankAccountId }) =>
+      apiRequest.post(`/banking/bank_accounts/${bankAccountId}/disconnect`),
+    {
+      ...options,
+      onSuccess: () => {},
+    },
+  );
+}
+
+interface UpdateBankAccountRes {}
+interface UpdateBankAccountValues {
+  bankAccountId: number;
+}
+
+/**
+ * Update the bank transactions of the bank account.
+ * @param {UseMutationOptions<UpdateBankAccountRes, Error, UpdateBankAccountValues>}
+ * @returns {UseMutationResult<UpdateBankAccountRes, Error, UpdateBankAccountValues>}
+ */
+export function useUpdateBankAccount(
+  options?: UseMutationOptions<
+    UpdateBankAccountRes,
+    Error,
+    UpdateBankAccountValues
+  >,
+): UseMutationResult<UpdateBankAccountRes, Error, UpdateBankAccountValues> {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation<DisconnectBankAccountRes, Error, UpdateBankAccountValues>(
+    ({ bankAccountId }) =>
+      apiRequest.post(`/banking/bank_accounts/${bankAccountId}/update`),
     {
       ...options,
       onSuccess: () => {},

packages/webapp/src/static/json/icons.tsx

@@ -635,4 +635,11 @@ export default {
     ],
     viewBox: '0 0 16 16',
   },
+
+  feed: {
+    path: [
+      'M1.99,11.99c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S3.1,11.99,1.99,11.99zM2.99,7.99c-0.55,0-1,0.45-1,1s0.45,1,1,1c1.66,0,3,1.34,3,3c0,0.55,0.45,1,1,1s1-0.45,1-1C7.99,10.23,5.75,7.99,2.99,7.99zM2.99,3.99c-0.55,0-1,0.45-1,1s0.45,1,1,1c3.87,0,7,3.13,7,7c0,0.55,0.45,1,1,1s1-0.45,1-1C11.99,8.02,7.96,3.99,2.99,3.99zM2.99-0.01c-0.55,0-1,0.45-1,1s0.45,1,1,1c6.08,0,11,4.92,11,11c0,0.55,0.45,1,1,1s1-0.45,1-1C15.99,5.81,10.17-0.01,2.99-0.01z',
+    ],
+    viewBox: '0 0 16 16',
+  },
 };