diff --git a/src/libs/API/types.ts b/src/libs/API/types.ts index 480e753087fc..b301b67ada43 100644 --- a/src/libs/API/types.ts +++ b/src/libs/API/types.ts @@ -1159,6 +1159,7 @@ const SIDE_EFFECT_REQUEST_COMMANDS = { DISCONNECT_AS_DELEGATE: 'DisconnectAsDelegate', COMPLETE_HYBRID_APP_ONBOARDING: 'CompleteHybridAppOnboarding', CONNECT_POLICY_TO_QUICKBOOKS_DESKTOP: 'ConnectPolicyToQuickbooksDesktop', + BANK_ACCOUNT_CREATE_CORPAY: 'BankAccount_CreateCorpay', MERGE_INTO_ACCOUNT_AND_LOGIN: 'MergeIntoAccountAndLogIn', // PayMoneyRequestOnSearch only works online (pattern C) and we need to play the success sound only when the request is successful @@ -1183,6 +1184,7 @@ type SideEffectRequestCommandParameters = { [SIDE_EFFECT_REQUEST_COMMANDS.DISCONNECT_AS_DELEGATE]: EmptyObject; [SIDE_EFFECT_REQUEST_COMMANDS.COMPLETE_HYBRID_APP_ONBOARDING]: EmptyObject; [SIDE_EFFECT_REQUEST_COMMANDS.CONNECT_POLICY_TO_QUICKBOOKS_DESKTOP]: Parameters.ConnectPolicyToQuickBooksDesktopParams; + [SIDE_EFFECT_REQUEST_COMMANDS.BANK_ACCOUNT_CREATE_CORPAY]: Parameters.BankAccountCreateCorpayParams; [SIDE_EFFECT_REQUEST_COMMANDS.PAY_MONEY_REQUEST_ON_SEARCH]: Parameters.PayMoneyRequestOnSearchParams; [SIDE_EFFECT_REQUEST_COMMANDS.MERGE_INTO_ACCOUNT_AND_LOGIN]: Parameters.MergeIntoAccountAndLogInParams; [SIDE_EFFECT_REQUEST_COMMANDS.LOG_OUT]: Parameters.LogOutParams; diff --git a/src/libs/actions/BankAccounts.ts b/src/libs/actions/BankAccounts.ts index d0065afc5f5a..604fe4fc09b2 100644 --- a/src/libs/actions/BankAccounts.ts +++ b/src/libs/actions/BankAccounts.ts @@ -16,7 +16,7 @@ import type { } from '@libs/API/parameters'; import type {SaveCorpayOnboardingCompanyDetails} from '@libs/API/parameters/SaveCorpayOnboardingCompanyDetailsParams'; import type SaveCorpayOnboardingDirectorInformationParams from '@libs/API/parameters/SaveCorpayOnboardingDirectorInformationParams'; -import {READ_COMMANDS, WRITE_COMMANDS} from '@libs/API/types'; +import {READ_COMMANDS, SIDE_EFFECT_REQUEST_COMMANDS, WRITE_COMMANDS} from '@libs/API/types'; import {getMicroSecondOnyxErrorWithTranslationKey} from '@libs/ErrorUtils'; import {translateLocal} from '@libs/Localize'; import Navigation from '@libs/Navigation/Navigation'; @@ -916,51 +916,8 @@ function createCorpayBankAccountForWalletFlow(data: InternationalBankAccountForm country: data.bankCountry, currency: data.bankCurrency, }; - - const parameters = { - isWithdrawal: false, - isSavings: true, - inputs: JSON.stringify(inputData), - }; - - const onyxData: OnyxData = { - optimisticData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, - value: { - isLoading: true, - isCreateCorpayBankAccount: true, - }, - }, - ], - successData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, - value: { - isLoading: false, - isCreateCorpayBankAccount: false, - errors: null, - isSuccess: true, - }, - }, - ], - failureData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, - value: { - isLoading: false, - isCreateCorpayBankAccount: false, - isSuccess: false, - errors: getMicroSecondOnyxErrorWithTranslationKey('walletPage.addBankAccountFailure'), - }, - }, - ], - }; - - return API.write(WRITE_COMMANDS.BANK_ACCOUNT_CREATE_CORPAY, parameters, onyxData); + // eslint-disable-next-line rulesdir/no-api-side-effects-method + return API.makeRequestWithSideEffects(SIDE_EFFECT_REQUEST_COMMANDS.BANK_ACCOUNT_CREATE_CORPAY, {isWithdrawal: false, isSavings: true, inputs: JSON.stringify(inputData)}); } export { diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/substeps/Confirmation.tsx b/src/pages/settings/Wallet/InternationalDepositAccount/substeps/Confirmation.tsx index cc16a96be992..6f0cb8954107 100644 --- a/src/pages/settings/Wallet/InternationalDepositAccount/substeps/Confirmation.tsx +++ b/src/pages/settings/Wallet/InternationalDepositAccount/substeps/Confirmation.tsx @@ -1,4 +1,4 @@ -import React, {useCallback, useEffect} from 'react'; +import React, {useCallback, useState} from 'react'; import CheckboxWithLabel from '@components/CheckboxWithLabel'; import FormProvider from '@components/Form/FormProvider'; import InputWrapper from '@components/Form/InputWrapper'; @@ -13,9 +13,8 @@ import useNetwork from '@hooks/useNetwork'; import useOnyx from '@hooks/useOnyx'; import useThemeStyles from '@hooks/useThemeStyles'; import {getCurrencySymbol} from '@libs/CurrencyUtils'; -import {getLatestErrorMessage} from '@libs/ErrorUtils'; import type CustomSubStepProps from '@pages/settings/Wallet/InternationalDepositAccount/types'; -import {clearReimbursementAccountBankCreation, createCorpayBankAccountForWalletFlow} from '@userActions/BankAccounts'; +import {createCorpayBankAccountForWalletFlow} from '@userActions/BankAccounts'; import CONST from '@src/CONST'; import type {TranslationPaths} from '@src/languages/types'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -45,8 +44,9 @@ function TermsAndConditionsLabel() { function Confirmation({onNext, onMove, formValues, fieldsMap}: CustomSubStepProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); + const [isSubmitting, setIsSubmitting] = useState(false); + const [error, setError] = useState(''); const [corpayFields] = useOnyx(ONYXKEYS.CORPAY_FIELDS, {canBeMissing: false}); - const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {canBeMissing: false}); const {isOffline} = useNetwork(); const getTitle = (field: CorpayFormField, fieldName: string) => { @@ -62,20 +62,25 @@ function Confirmation({onNext, onMove, formValues, fieldsMap}: CustomSubStepProp }; const getDataAndGoToNextStep = (values: FormOnyxValues) => { - createCorpayBankAccountForWalletFlow({...formValues, ...values}, corpayFields?.classification ?? '', corpayFields?.destinationCountry ?? '', corpayFields?.preferredMethod ?? ''); + setError(''); + setIsSubmitting(true); + createCorpayBankAccountForWalletFlow( + {...formValues, ...values}, + corpayFields?.classification ?? '', + corpayFields?.destinationCountry ?? '', + corpayFields?.preferredMethod ?? '', + ).then((response) => { + setIsSubmitting(false); + if (response?.jsonCode) { + if (response.jsonCode === CONST.JSON_CODE.SUCCESS) { + onNext(); + } else { + setError(response.message ?? ''); + } + } + }); }; - useEffect(() => { - if (reimbursementAccount?.isLoading === true || !!reimbursementAccount?.errors) { - return; - } - - if (reimbursementAccount?.isSuccess === true) { - onNext(); - clearReimbursementAccountBankCreation(); - } - }, [reimbursementAccount?.isLoading, reimbursementAccount?.isSuccess, reimbursementAccount?.errors, onNext]); - const summaryItems: MenuItemProps[] = [ { description: translate('common.country'), @@ -157,8 +162,6 @@ function Confirmation({onNext, onMove, formValues, fieldsMap}: CustomSubStepProp [translate], ); - const errorMessage = getLatestErrorMessage(reimbursementAccount); - return ( {translate('addPersonalBankAccount.confirmationStepHeader')} @@ -182,7 +185,7 @@ function Confirmation({onNext, onMove, formValues, fieldsMap}: CustomSubStepProp submitButtonText={translate('common.confirm')} style={[styles.mh5, styles.flexGrow1]} enabledWhenOffline={false} - isLoading={reimbursementAccount?.isLoading} + isLoading={isSubmitting} shouldHideFixErrorsAlert > - {!!errorMessage && ( - - )} + );