feat: wip pause/resume bank feeds syncing

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

@@ -46,6 +46,7 @@ import {
   useUnexcludeUncategorizedTransactions,
 } from '@/hooks/query/bank-rules';
 import { withBanking } from '../withBanking';
+import withAlertActions from '@/containers/Alert/withAlertActions';
 
 function AccountTransactionsActionsBar({
   // #withDialogActions
@@ -60,6 +61,9 @@ function AccountTransactionsActionsBar({
   // #withBanking
   uncategorizedTransationsIdsSelected,
   excludedTransactionsIdsSelected,
+
+  // #withAlerts
+  openAlert,
 }) {
   const history = useHistory();
   const { accountId, currentAccount } = useAccountTransactionsContext();
@@ -191,6 +195,16 @@ function AccountTransactionsActionsBar({
       });
   };
 
+  // Handle resume bank feeds syncing.
+  const handleResumeFeedsSyncing = () => {
+    openAlert('resume-feeds-syncing-bank-accounnt');
+  };
+
+  // Handles pause bank feeds syncing.
+  const handlePauseFeedsSyncing = () => {
+    openAlert('pause-feeds-syncing-bank-accounnt');
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -284,6 +298,15 @@ function AccountTransactionsActionsBar({
           }}
           content={
             <Menu>
+              <MenuItem
+                onClick={handlePauseFeedsSyncing}
+                text={'Pause bankfeeds syncing'}
+              />
+              <MenuItem
+                onClick={handleResumeFeedsSyncing}
+                text={'Resume bankfeeds syncing'}
+              />
+
               <If condition={isSyncingOwner && isFeedsActive}>
                 <MenuItem onClick={handleBankUpdateClick} text={'Update'} />
                 <MenuDivider />
@@ -311,6 +334,7 @@ function AccountTransactionsActionsBar({
 
 export default compose(
   withDialogActions,
+  withAlertActions,
   withSettingsActions,
   withSettings(({ cashflowTransactionsSettings }) => ({
     cashflowTansactionsTableSize: cashflowTransactionsSettings?.tableSize,

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

@@ -0,0 +1,67 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+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 { usePauseFeedsBankAccount } from '@/hooks/query/bank-accounts';
+import { compose } from '@/utils';
+
+/**
+ *  Item activate alert.
+ */
+function PauseFeedsBankAccountAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { bankAccountId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: pauseBankAccountFeeds, isLoading } =
+    usePauseFeedsBankAccount();
+
+  // Handle activate item alert cancel.
+  const handleCancelActivateItem = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm item activated.
+  const handleConfirmItemActivate = () => {
+    pauseBankAccountFeeds(bankAccountId)
+      .then(() => {
+        AppToaster.show({
+          message: 'The bank feeds of the bank account has been paused.',
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'activate'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancelActivateItem}
+      loading={isLoading}
+      onConfirm={handleConfirmItemActivate}
+    >
+      <p>Are you sure.</p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(PauseFeedsBankAccountAlert);

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

@@ -0,0 +1,67 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+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 { useResumeFeedsBankAccount } from '@/hooks/query/bank-accounts';
+import { compose } from '@/utils';
+
+/**
+ *
+ */
+function ResumeFeedsBankAccountAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { bankAccountId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: resumeFeedsBankAccount, isLoading } =
+    useResumeFeedsBankAccount();
+
+  // Handle activate item alert cancel.
+  const handleCancelActivateItem = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm item activated.
+  const handleConfirmItemActivate = () => {
+    resumeFeedsBankAccount(bankAccountId)
+      .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={<T id={'activate'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancelActivateItem}
+      loading={isLoading}
+      onConfirm={handleConfirmItemActivate}
+    >
+      <p>Are you sure.</p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(ResumeFeedsBankAccountAlert);

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

@@ -0,0 +1,24 @@
+// @ts-nocheck
+import React from 'react';
+
+const ResumeFeedsBankAccountAlert = React.lazy(
+  () => import('./ResumeFeedsBankAccount'),
+);
+
+const PauseFeedsBankAccountAlert = React.lazy(
+  () => import('./PauseFeedsBankAccount'),
+);
+
+/**
+ * Bank account alerts.
+ */
+export const BankAccountAlerts = [
+  {
+    name: 'resume-feeds-syncing-bank-accounnt',
+    component: ResumeFeedsBankAccountAlert,
+  },
+  {
+    name: 'pause-feeds-syncing-bank-accounnt',
+    component: PauseFeedsBankAccountAlert,
+  },
+];