feat: confimation dialog on disconnecting bank account

packages/webapp/src/components/DialogsContainer.tsx

@@ -52,6 +52,7 @@ import ReceiptMailDialog from '@/containers/Sales/Receipts/ReceiptMailDialog/Rec
 import PaymentMailDialog from '@/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialog';
 import { ExportDialog } from '@/containers/Dialogs/ExportDialog';
 import { RuleFormDialog } from '@/containers/Banking/Rules/RuleFormDialog/RuleFormDialog';
+import { DisconnectBankAccountDialog } from '@/containers/CashFlow/AccountTransactions/dialogs/DisconnectBankAccountDialog/DisconnectBankAccountDialog';
 
 /**
  * Dialogs container.
@@ -149,6 +150,9 @@ export default function DialogsContainer() {
       <PaymentMailDialog dialogName={DialogsName.PaymentMail} />
       <ExportDialog dialogName={DialogsName.Export} />
       <RuleFormDialog dialogName={DialogsName.BankRuleForm} />
+      <DisconnectBankAccountDialog
+        dialogName={DialogsName.DisconnectBankAccountConfirmation}
+      />
     </div>
   );
 }

packages/webapp/src/constants/dialogs.ts

@@ -75,5 +75,6 @@ export enum DialogsName {
   GeneralLedgerPdfPreview = 'GeneralLedgerPdfPreview',
   SalesTaxLiabilitySummaryPdfPreview = 'SalesTaxLiabilitySummaryPdfPreview',
   Export = 'Export',
-  BankRuleForm = 'BankRuleForm'
+  BankRuleForm = 'BankRuleForm',
+  DisconnectBankAccountConfirmation = 'DisconnectBankAccountConfirmation',
 }

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

@@ -40,13 +40,13 @@ import withSettingsActions from '@/containers/Settings/withSettingsActions';
 
 import { compose } from '@/utils';
 import {
-  useDisconnectBankAccount,
   useUpdateBankAccount,
   useExcludeUncategorizedTransactions,
   useUnexcludeUncategorizedTransactions,
 } from '@/hooks/query/bank-rules';
 import { withBanking } from '../withBanking';
 import withAlertActions from '@/containers/Alert/withAlertActions';
+import { DialogsName } from '@/constants/dialogs';
 
 function AccountTransactionsActionsBar({
   // #withDialogActions
@@ -71,7 +71,6 @@ function AccountTransactionsActionsBar({
   // Refresh cashflow infinity transactions hook.
   const { refresh } = useRefreshCashflowTransactionsInfinity();
 
-  const { mutateAsync: disconnectBankAccount } = useDisconnectBankAccount();
   const { mutateAsync: updateBankAccount } = useUpdateBankAccount();
 
   // Retrieves the money in/out buttons options.
@@ -112,18 +111,8 @@ function AccountTransactionsActionsBar({
 
   // Handles the bank account disconnect click.
   const handleDisconnectClick = () => {
-    disconnectBankAccount({ bankAccountId: accountId })
+    openDialog(DialogsName.DisconnectBankAccountConfirmation, {
-      .then(() => {
+      bankAccountId: accountId,
-        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.
@@ -301,7 +290,7 @@ function AccountTransactionsActionsBar({
           }}
           content={
             <Menu>
-              <If condition={isSyncingOwner}>
+              <If condition={isSyncingOwner && isFeedsActive}>
                 <MenuItem
                   onClick={handlePauseFeedsSyncing}
                   text={'Pause bank feeds'}
@@ -309,7 +298,7 @@ function AccountTransactionsActionsBar({
                 <MenuDivider />
               </If>
 
-              <If condition={isSyncingOwner}>
+              <If condition={isSyncingOwner && isFeedsActive}>
                 <MenuItem
                   onClick={handleResumeFeedsSyncing}
                   text={'Resume bank feeds'}

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

@@ -1,6 +1,5 @@
 // @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';

packages/webapp/src/containers/CashFlow/AccountTransactions/dialogs/DisconnectBankAccountDialog/DisconnectBankAccountDialog.tsx

@@ -0,0 +1,42 @@
+// @ts-nocheck
+import React from 'react';
+import { Dialog, DialogSuspense } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { compose } from '@/utils';
+
+const DisconnectBankAccountDialogContent = React.lazy(
+  () => import('./DisconnectBankAccountDialogContent'),
+);
+
+/**
+ * Payment mail dialog.X
+ */
+function DisconnectBankAccountDialogRoot({
+  dialogName,
+  payload: { bankAccountId },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={'Disconnect Bank Account'}
+      isOpen={isOpen}
+      canEscapeJeyClose={true}
+      autoFocus={true}
+      style={{ width: 400 }}
+    >
+      <DialogSuspense>
+        <DisconnectBankAccountDialogContent
+          dialogName={dialogName}
+          bankAccountId={bankAccountId}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export const DisconnectBankAccountDialog = compose(withDialogRedux())(
+  DisconnectBankAccountDialogRoot,
+);
+
+DisconnectBankAccountDialog.displayName = 'DisconnectBankAccountDialog';

packages/webapp/src/containers/CashFlow/AccountTransactions/dialogs/DisconnectBankAccountDialog/DisconnectBankAccountDialogContent.tsx

@@ -0,0 +1,104 @@
+// @ts-nocheck
+import * as Yup from 'yup';
+import { Button, Intent, Classes } from '@blueprintjs/core';
+import * as R from 'ramda';
+import { Form, Formik, FormikHelpers } from 'formik';
+import { AppToaster, FFormGroup, FInputGroup } from '@/components';
+import { useDisconnectBankAccount } from '@/hooks/query/bank-rules';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { DialogsName } from '@/constants/dialogs';
+
+interface DisconnectFormValues {
+  label: string;
+}
+
+const initialValues = {
+  label: '',
+};
+
+const Schema = Yup.object().shape({
+  label: Yup.string().required().label('Confirmation'),
+});
+
+interface DisconnectBankAccountDialogContentProps {
+  bankAccountId: number;
+}
+
+function DisconnectBankAccountDialogContent({
+  bankAccountId,
+
+  // #withDialogActions
+  closeDialog,
+}: DisconnectBankAccountDialogContentProps) {
+  const { mutateAsync: disconnectBankAccount } = useDisconnectBankAccount();
+
+  const handleSubmit = (
+    values: DisconnectFormValues,
+    { setErrors, setSubmitting }: FormikHelpers<DisconnectFormValues>,
+  ) => {
+    debugger;
+    setSubmitting(true);
+
+    if (values.label !== 'DISCONNECT ACCOUNT') {
+      setErrors({
+        label: 'The entered value is incorrect.',
+      });
+      setSubmitting(false);
+      return;
+    }
+    disconnectBankAccount({ bankAccountId })
+      .then(() => {
+        setSubmitting(false);
+        AppToaster.show({
+          message: 'The bank account has been disconnected.',
+          intent: Intent.SUCCESS,
+        });
+        closeDialog(DialogsName.DisconnectBankAccountConfirmation);
+      })
+      .catch((error) => {
+        setSubmitting(false);
+        AppToaster.show({
+          message: 'Something went wrong.',
+          intent: Intent.DANGER,
+        });
+      });
+  };
+
+  const handleCancelBtnClick = () => {
+    closeDialog(DialogsName.DisconnectBankAccountConfirmation);
+  };
+
+  return (
+    <Formik
+      onSubmit={handleSubmit}
+      validationSchema={Schema}
+      initialValues={initialValues}
+    >
+      <Form>
+        <div className={Classes.DIALOG_BODY}>
+          <FFormGroup
+            label={`Type "DISCONNECT ACCOUNT"`}
+            name={'label'}
+            fastField
+          >
+            <FInputGroup name={'label'} fastField />
+          </FFormGroup>
+        </div>
+
+        <div className={Classes.DIALOG_FOOTER}>
+          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+            <Button type="submit" intent={Intent.DANGER}>
+              Disconnect Bank Account
+            </Button>
+
+            <Button intent={Intent.NONE} onClick={handleCancelBtnClick}>
+              Cancel
+            </Button>
+          </div>
+        </div>
+      </Form>
+    </Formik>
+  );
+}
+
+export default R.compose(withDialogActions)(DisconnectBankAccountDialogContent);

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

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   UseMutationOptions,
   UseMutationResult,
@@ -5,6 +6,7 @@ import {
   useMutation,
 } from 'react-query';
 import useApiRequest from '../useRequest';
+import t from './types';
 
 type PuaseFeedsBankAccountValues = { bankAccountId: number };
 
@@ -39,7 +41,9 @@ export function usePauseFeedsBankAccount(
         `/banking/bank_accounts/${values.bankAccountId}/pause_feeds`,
       ),
     {
-      onSuccess: (res, id) => {},
+      onSuccess: (res, values) => {
+        queryClient.invalidateQueries([t.ACCOUNT, values.bankAccountId]);
+      },
       ...options,
     },
   );
@@ -78,7 +82,9 @@ export function useResumeFeedsBankAccount(
         `/banking/bank_accounts/${values.bankAccountId}/resume_feeds`,
       ),
     {
-      onSuccess: (res, id) => {},
+      onSuccess: (res, values) => {
+        queryClient.invalidateQueries([t.ACCOUNT, values.bankAccountId]);
+      },
       ...options,
     },
   );