From fc0240c692fd144739ece557ddd6658d248087ef Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Sun, 4 Aug 2024 19:44:36 +0200 Subject: [PATCH] feat: confimation dialog on disconnecting bank account --- .../src/components/DialogsContainer.tsx | 6 +- packages/webapp/src/constants/dialogs.ts | 3 +- .../AccountTransactionsActionsBar.tsx | 23 +--- .../alerts/ResumeFeedsBankAccount.tsx | 1 - .../DisconnectBankAccountDialog.tsx | 42 +++++++ .../DisconnectBankAccountDialogContent.tsx | 104 ++++++++++++++++++ .../webapp/src/hooks/query/bank-accounts.ts | 10 +- 7 files changed, 167 insertions(+), 22 deletions(-) create mode 100644 packages/webapp/src/containers/CashFlow/AccountTransactions/dialogs/DisconnectBankAccountDialog/DisconnectBankAccountDialog.tsx create mode 100644 packages/webapp/src/containers/CashFlow/AccountTransactions/dialogs/DisconnectBankAccountDialog/DisconnectBankAccountDialogContent.tsx diff --git a/packages/webapp/src/components/DialogsContainer.tsx b/packages/webapp/src/components/DialogsContainer.tsx index 5c753c213..284c3cfbc 100644 --- a/packages/webapp/src/components/DialogsContainer.tsx +++ b/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. @@ -148,7 +149,10 @@ export default function DialogsContainer() { - + + ); } diff --git a/packages/webapp/src/constants/dialogs.ts b/packages/webapp/src/constants/dialogs.ts index 07ed83d67..b86755cfb 100644 --- a/packages/webapp/src/constants/dialogs.ts +++ b/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', } diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.tsx index bbbc8a187..7a5ddd8fc 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.tsx +++ b/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,19 +111,9 @@ function AccountTransactionsActionsBar({ // 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, - }); - }); + openDialog(DialogsName.DisconnectBankAccountConfirmation, { + bankAccountId: accountId, + }); }; // handles the bank update button click. const handleBankUpdateClick = () => { @@ -301,7 +290,7 @@ function AccountTransactionsActionsBar({ }} content={ - + - + import('./DisconnectBankAccountDialogContent'), +); + +/** + * Payment mail dialog.X + */ +function DisconnectBankAccountDialogRoot({ + dialogName, + payload: { bankAccountId }, + isOpen, +}) { + return ( + + + + + + ); +} + +export const DisconnectBankAccountDialog = compose(withDialogRedux())( + DisconnectBankAccountDialogRoot, +); + +DisconnectBankAccountDialog.displayName = 'DisconnectBankAccountDialog'; diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/dialogs/DisconnectBankAccountDialog/DisconnectBankAccountDialogContent.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/dialogs/DisconnectBankAccountDialog/DisconnectBankAccountDialogContent.tsx new file mode 100644 index 000000000..0da3dd486 --- /dev/null +++ b/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, + ) => { + 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 ( + +
+
+ + + +
+ +
+
+ + + +
+
+
+ + ); +} + +export default R.compose(withDialogActions)(DisconnectBankAccountDialogContent); diff --git a/packages/webapp/src/hooks/query/bank-accounts.ts b/packages/webapp/src/hooks/query/bank-accounts.ts index a55863dda..e5ba6795d 100644 --- a/packages/webapp/src/hooks/query/bank-accounts.ts +++ b/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, }, );