diff --git a/src/libs/API/types.ts b/src/libs/API/types.ts index 14a0be6c160b..fe1bb9f9c8ea 100644 --- a/src/libs/API/types.ts +++ b/src/libs/API/types.ts @@ -1175,7 +1175,6 @@ 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 @@ -1201,7 +1200,6 @@ 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 e8815ca506bd..f9c461b05805 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, SIDE_EFFECT_REQUEST_COMMANDS, WRITE_COMMANDS} from '@libs/API/types'; +import {READ_COMMANDS, WRITE_COMMANDS} from '@libs/API/types'; import {getMicroSecondOnyxErrorWithTranslationKey} from '@libs/ErrorUtils'; import {translateLocal} from '@libs/Localize'; import Navigation from '@libs/Navigation/Navigation'; @@ -1057,8 +1057,51 @@ function createCorpayBankAccountForWalletFlow(data: InternationalBankAccountForm country: data.bankCountry, currency: data.bankCurrency, }; - // 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)}); + + 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); } export { diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/substeps/Confirmation.tsx b/src/pages/settings/Wallet/InternationalDepositAccount/substeps/Confirmation.tsx index 6f0cb8954107..cc16a96be992 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, useState} from 'react'; +import React, {useCallback, useEffect} from 'react'; import CheckboxWithLabel from '@components/CheckboxWithLabel'; import FormProvider from '@components/Form/FormProvider'; import InputWrapper from '@components/Form/InputWrapper'; @@ -13,8 +13,9 @@ 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 {createCorpayBankAccountForWalletFlow} from '@userActions/BankAccounts'; +import {clearReimbursementAccountBankCreation, createCorpayBankAccountForWalletFlow} from '@userActions/BankAccounts'; import CONST from '@src/CONST'; import type {TranslationPaths} from '@src/languages/types'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -44,9 +45,8 @@ 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,25 +62,20 @@ function Confirmation({onNext, onMove, formValues, fieldsMap}: CustomSubStepProp }; const getDataAndGoToNextStep = (values: FormOnyxValues) => { - 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 ?? ''); - } - } - }); + createCorpayBankAccountForWalletFlow({...formValues, ...values}, corpayFields?.classification ?? '', corpayFields?.destinationCountry ?? '', corpayFields?.preferredMethod ?? ''); }; + 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'), @@ -162,6 +157,8 @@ function Confirmation({onNext, onMove, formValues, fieldsMap}: CustomSubStepProp [translate], ); + const errorMessage = getLatestErrorMessage(reimbursementAccount); + return ( {translate('addPersonalBankAccount.confirmationStepHeader')} @@ -185,7 +182,7 @@ function Confirmation({onNext, onMove, formValues, fieldsMap}: CustomSubStepProp submitButtonText={translate('common.confirm')} style={[styles.mh5, styles.flexGrow1]} enabledWhenOffline={false} - isLoading={isSubmitting} + isLoading={reimbursementAccount?.isLoading} shouldHideFixErrorsAlert > - + {!!errorMessage && ( + + )} );