Merge branch 'develop' into bulk-categorize-bank-transactions

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

@@ -14,14 +14,17 @@ import {
   Intent,
   Switch,
   Tooltip,
+  MenuDivider,
 } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
+import { isEmpty } from 'lodash';
 import {
   Icon,
   DashboardActionsBar,
   DashboardRowsHeightButton,
   FormattedMessage as T,
   AppToaster,
+  If,
 } from '@/components';
 
 import { CashFlowMenuItems } from './utils';
@@ -37,13 +40,14 @@ import withSettings from '@/containers/Settings/withSettings';
 import withSettingsActions from '@/containers/Settings/withSettingsActions';
 
 import { compose } from '@/utils';
-import { withBanking } from '../withBanking';
-import { isEmpty } from 'lodash';
 import {
+  useDisconnectBankAccount,
+  useUpdateBankAccount,
   useExcludeUncategorizedTransactions,
   useUnexcludeUncategorizedTransactions,
 } from '@/hooks/query/bank-rules';
 import { withBankingActions } from '../withBankingActions';
+import { withBanking } from '../withBanking';
 
 function AccountTransactionsActionsBar({
   // #withDialogActions
@@ -63,15 +67,21 @@ function AccountTransactionsActionsBar({
   enableMultipleCategorization,
 }) {
   const history = useHistory();
-  const { accountId } = useAccountTransactionsContext();
+  const { accountId, currentAccount } = useAccountTransactionsContext();
 
   // Refresh cashflow infinity transactions hook.
   const { refresh } = useRefreshCashflowTransactionsInfinity();
 
+  const { mutateAsync: disconnectBankAccount } = useDisconnectBankAccount();
+  const { mutateAsync: updateBankAccount } = useUpdateBankAccount();
+
   // Retrieves the money in/out buttons options.
   const addMoneyInOptions = useMemo(() => getAddMoneyInOptions(), []);
   const addMoneyOutOptions = useMemo(() => getAddMoneyOutOptions(), []);
 
+  const isFeedsActive = !!currentAccount.is_feeds_active;
+  const isSyncingOwner = currentAccount.is_syncing_owner;
+
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
     addSetting('cashflowTransactions', 'tableSize', size);
@@ -100,6 +110,39 @@ function AccountTransactionsActionsBar({
   const handleBankRulesClick = () => {
     history.push(`/bank-rules?accountId=${accountId}`);
   };
+
+  // Handles the bank account disconnect click.
+  const handleDisconnectClick = () => {
+    disconnectBankAccount({ bankAccountId: 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,
+        });
+      });
+  };
+  // 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();
@@ -200,6 +243,24 @@ function AccountTransactionsActionsBar({
         />
         <NavbarDivider />
 
+        <If condition={isSyncingOwner}>
+          <Tooltip
+            content={
+              isFeedsActive
+                ? 'The bank syncing is active'
+                : 'The bank syncing is disconnected'
+            }
+            minimal={true}
+            position={Position.BOTTOM}
+          >
+            <Button
+              className={Classes.MINIMAL}
+              icon={<Icon icon="feed" iconSize={16} />}
+              intent={isFeedsActive ? Intent.SUCCESS : Intent.DANGER}
+            />
+          </Tooltip>
+        </If>
+
         {!isEmpty(uncategorizedTransationsIdsSelected) && (
           <Button
             icon={<Icon icon="disable" iconSize={16} />}
@@ -246,7 +307,15 @@ function AccountTransactionsActionsBar({
           }}
           content={
             <Menu>
+              <If condition={isSyncingOwner && isFeedsActive}>
+                <MenuItem onClick={handleBankUpdateClick} text={'Update'} />
+                <MenuDivider />
+              </If>
               <MenuItem onClick={handleBankRulesClick} text={'Bank rules'} />
+
+              <If condition={isSyncingOwner && isFeedsActive}>
+                <MenuItem onClick={handleDisconnectClick} text={'Disconnect'} />
+              </If>
             </Menu>
           }
         >