From 9f07370908dd9a0f5b66781b6b756c3c92d882a9 Mon Sep 17 00:00:00 2001 From: Nathalie Kuoch Date: Mon, 4 Mar 2024 16:13:12 +0100 Subject: [PATCH] Clean up vbba code and save each substep --- src/hooks/useSubStep/index.ts | 6 ++- src/hooks/useSubStep/types.ts | 3 ++ .../AcceptACHContractForBankAccount.ts | 2 +- .../parameters/ConnectBankAccountParams.ts | 1 - .../OpenReimbursementAccountPageParams.ts | 1 - ...ateBeneficialOwnersForBankAccountParams.ts | 4 +- ...eCompanyInformationForBankAccountParams.ts | 2 +- ...PersonalInformationForBankAccountParams.ts | 2 +- .../VerifyIdentityForBankAccountParams.ts | 1 - src/libs/actions/BankAccounts.ts | 18 ++++----- .../BusinessInfo/BusinessInfo.tsx | 38 ++++++++++++------- .../PersonalInfo/PersonalInfo.tsx | 19 ++++++++-- 12 files changed, 60 insertions(+), 37 deletions(-) diff --git a/src/hooks/useSubStep/index.ts b/src/hooks/useSubStep/index.ts index ad4cf032858d..2d9069abff88 100644 --- a/src/hooks/useSubStep/index.ts +++ b/src/hooks/useSubStep/index.ts @@ -6,8 +6,9 @@ import type {SubStepProps, UseSubStep} from './types'; * @param bodyContent - array of components to display in particular step * @param onFinished - callback triggered after finish last step * @param startFrom - initial index for bodyContent array + * @param onNextSubStep - callback triggered after finish each step */ -export default function useSubStep({bodyContent, onFinished, startFrom = 0}: UseSubStep) { +export default function useSubStep({bodyContent, onFinished, startFrom = 0, onNextSubStep = () => {}}: UseSubStep) { const [screenIndex, setScreenIndex] = useState(startFrom); const isEditing = useRef(false); @@ -35,9 +36,10 @@ export default function useSubStep({bodyContent, on if (nextScreenIndex === bodyContent.length) { onFinished(); } else { + onNextSubStep(); setScreenIndex(nextScreenIndex); } - }, [screenIndex, bodyContent.length, onFinished]); + }, [screenIndex, bodyContent.length, onFinished, onNextSubStep]); const moveTo = useCallback((step: number) => { isEditing.current = true; diff --git a/src/hooks/useSubStep/types.ts b/src/hooks/useSubStep/types.ts index ffdee5825197..f3b7939502a8 100644 --- a/src/hooks/useSubStep/types.ts +++ b/src/hooks/useSubStep/types.ts @@ -21,6 +21,9 @@ type UseSubStep = { /** array of components that will become sub steps */ bodyContent: Array>; + /** called after each sub step */ + onNextSubStep?: () => void; + /** called on last sub step */ onFinished: () => void; diff --git a/src/libs/API/parameters/AcceptACHContractForBankAccount.ts b/src/libs/API/parameters/AcceptACHContractForBankAccount.ts index de4ce4e86857..11ea73bd3a34 100644 --- a/src/libs/API/parameters/AcceptACHContractForBankAccount.ts +++ b/src/libs/API/parameters/AcceptACHContractForBankAccount.ts @@ -1,5 +1,5 @@ import type {ACHContractStepProps} from '@src/types/form/ReimbursementAccountForm'; -type AcceptACHContractForBankAccount = ACHContractStepProps & {bankAccountID: number; policyID: string; canUseNewVbbaFlow?: boolean}; +type AcceptACHContractForBankAccount = ACHContractStepProps & {bankAccountID: number; policyID: string}; export default AcceptACHContractForBankAccount; diff --git a/src/libs/API/parameters/ConnectBankAccountParams.ts b/src/libs/API/parameters/ConnectBankAccountParams.ts index fb0e3422d08c..b4a4f1d71150 100644 --- a/src/libs/API/parameters/ConnectBankAccountParams.ts +++ b/src/libs/API/parameters/ConnectBankAccountParams.ts @@ -8,7 +8,6 @@ type ConnectBankAccountParams = { plaidMask?: string; isSavings?: boolean; policyID?: string; - canUseNewVbbaFlow?: boolean; }; export default ConnectBankAccountParams; diff --git a/src/libs/API/parameters/OpenReimbursementAccountPageParams.ts b/src/libs/API/parameters/OpenReimbursementAccountPageParams.ts index 31eb443ce80e..8e4ae5208a2e 100644 --- a/src/libs/API/parameters/OpenReimbursementAccountPageParams.ts +++ b/src/libs/API/parameters/OpenReimbursementAccountPageParams.ts @@ -7,7 +7,6 @@ type OpenReimbursementAccountPageParams = { stepToOpen: ReimbursementAccountStep; subStep: ReimbursementAccountSubStep; localCurrentStep: ReimbursementAccountStep; - canUseNewVbbaFlow?: boolean; policyID: string; }; diff --git a/src/libs/API/parameters/UpdateBeneficialOwnersForBankAccountParams.ts b/src/libs/API/parameters/UpdateBeneficialOwnersForBankAccountParams.ts index dedc45d0365f..310565573454 100644 --- a/src/libs/API/parameters/UpdateBeneficialOwnersForBankAccountParams.ts +++ b/src/libs/API/parameters/UpdateBeneficialOwnersForBankAccountParams.ts @@ -1,5 +1,5 @@ -import type {ACHContractStepProps} from '@src/types/form/ReimbursementAccountForm'; +import type {BeneficialOwnersStepProps} from '@src/types/form/ReimbursementAccountForm'; -type UpdateBeneficialOwnersForBankAccountParams = Partial & {bankAccountID: number; policyID: string; canUseNewVbbaFlow?: boolean}; +type UpdateBeneficialOwnersForBankAccountParams = Partial & {bankAccountID: number; policyID: string}; export default UpdateBeneficialOwnersForBankAccountParams; diff --git a/src/libs/API/parameters/UpdateCompanyInformationForBankAccountParams.ts b/src/libs/API/parameters/UpdateCompanyInformationForBankAccountParams.ts index 6421fe02f571..c427e26d6c92 100644 --- a/src/libs/API/parameters/UpdateCompanyInformationForBankAccountParams.ts +++ b/src/libs/API/parameters/UpdateCompanyInformationForBankAccountParams.ts @@ -2,6 +2,6 @@ import type {BankAccountStepProps, CompanyStepProps, ReimbursementAccountProps} type BankAccountCompanyInformation = BankAccountStepProps & CompanyStepProps & ReimbursementAccountProps; -type UpdateCompanyInformationForBankAccountParams = Partial & {bankAccountID: number; policyID: string; canUseNewVbbaFlow?: boolean}; +type UpdateCompanyInformationForBankAccountParams = Partial & {bankAccountID: number; policyID: string; confirm: boolean}; export default UpdateCompanyInformationForBankAccountParams; diff --git a/src/libs/API/parameters/UpdatePersonalInformationForBankAccountParams.ts b/src/libs/API/parameters/UpdatePersonalInformationForBankAccountParams.ts index c1a29ddd9cec..4b4876b2863f 100644 --- a/src/libs/API/parameters/UpdatePersonalInformationForBankAccountParams.ts +++ b/src/libs/API/parameters/UpdatePersonalInformationForBankAccountParams.ts @@ -1,5 +1,5 @@ import type {RequestorStepProps} from '@src/types/form/ReimbursementAccountForm'; -type UpdatePersonalInformationForBankAccountParams = RequestorStepProps & {bankAccountID: number; policyID: string; canUseNewVbbaFlow: boolean}; +type UpdatePersonalInformationForBankAccountParams = RequestorStepProps & {bankAccountID: number; policyID: string; confirm: boolean}; export default UpdatePersonalInformationForBankAccountParams; diff --git a/src/libs/API/parameters/VerifyIdentityForBankAccountParams.ts b/src/libs/API/parameters/VerifyIdentityForBankAccountParams.ts index c11aec9be239..6ef6b3712439 100644 --- a/src/libs/API/parameters/VerifyIdentityForBankAccountParams.ts +++ b/src/libs/API/parameters/VerifyIdentityForBankAccountParams.ts @@ -2,6 +2,5 @@ type VerifyIdentityForBankAccountParams = { bankAccountID: number; onfidoData: string; policyID: string; - canUseNewVbbaFlow?: boolean; }; export default VerifyIdentityForBankAccountParams; diff --git a/src/libs/actions/BankAccounts.ts b/src/libs/actions/BankAccounts.ts index 0f4e1aed36a7..367826e4e644 100644 --- a/src/libs/actions/BankAccounts.ts +++ b/src/libs/actions/BankAccounts.ts @@ -160,7 +160,6 @@ function connectBankAccountWithPlaid(bankAccountID: number, selectedPlaidBankAcc plaidAccessToken: selectedPlaidBankAccount.plaidAccessToken, plaidMask: selectedPlaidBankAccount.mask, isSavings: selectedPlaidBankAccount.isSavings, - canUseNewVbbaFlow: true, policyID, }; @@ -254,15 +253,17 @@ function deletePaymentBankAccount(bankAccountID: number) { * This action is called by the requestor step in the Verified Bank Account flow * @param bankAccountID - ID for bank account * @param params - User personal data + * @param policyID - ID of the policy we're setting the bank account on + * @param isConfirmPage - If we're submitting from the confirmation substep, to trigger all external checks */ -function updatePersonalInformationForBankAccount(bankAccountID: number, params: RequestorStepProps, policyID: string) { +function updatePersonalInformationForBankAccount(bankAccountID: number, params: RequestorStepProps, policyID: string, isConfirmPage: boolean) { API.write( WRITE_COMMANDS.UPDATE_PERSONAL_INFORMATION_FOR_BANK_ACCOUNT, { ...params, bankAccountID, policyID, - canUseNewVbbaFlow: true, + confirm: isConfirmPage, }, getVBBADataForOnyx(CONST.BANK_ACCOUNT.STEP.REQUESTOR), ); @@ -356,7 +357,6 @@ function openReimbursementAccountPage(stepToOpen: ReimbursementAccountStep, subS subStep, localCurrentStep, policyID, - canUseNewVbbaFlow: true, }; return API.read(READ_COMMANDS.OPEN_REIMBURSEMENT_ACCOUNT_PAGE, parameters, onyxData); @@ -365,15 +365,17 @@ function openReimbursementAccountPage(stepToOpen: ReimbursementAccountStep, subS /** * Updates the bank account in the database with the company step data * @param params - Business step form data + * @param policyID - ID of the policy we're setting the bank account on + * @param isConfirmPage - If we're submitting from the confirmation substep, to trigger all external checks */ -function updateCompanyInformationForBankAccount(bankAccountID: number, params: Partial, policyID: string) { +function updateCompanyInformationForBankAccount(bankAccountID: number, params: Partial, policyID: string, isConfirmPage: boolean) { API.write( WRITE_COMMANDS.UPDATE_COMPANY_INFORMATION_FOR_BANK_ACCOUNT, { ...params, bankAccountID, policyID, - canUseNewVbbaFlow: true, + confirm: isConfirmPage, }, getVBBADataForOnyx(CONST.BANK_ACCOUNT.STEP.COMPANY), ); @@ -390,7 +392,6 @@ function updateBeneficialOwnersForBankAccount(bankAccountID: number, params: Par ...params, bankAccountID, policyID, - canUseNewVbbaFlow: true, }, getVBBADataForOnyx(), ); @@ -407,7 +408,6 @@ function acceptACHContractForBankAccount(bankAccountID: number, params: ACHContr ...params, bankAccountID, policyID, - canUseNewVbbaFlow: true, }, getVBBADataForOnyx(), ); @@ -426,7 +426,6 @@ function connectBankAccountManually(bankAccountID: number, bankAccount: PlaidBan plaidAccessToken: bankAccount.plaidAccessToken, plaidMask: bankAccount.mask, isSavings: bankAccount.isSavings, - canUseNewVbbaFlow: true, policyID, }; @@ -441,7 +440,6 @@ function verifyIdentityForBankAccount(bankAccountID: number, onfidoData: Record< bankAccountID, onfidoData: JSON.stringify(onfidoData), policyID, - canUseNewVbbaFlow: true, }; API.write(WRITE_COMMANDS.VERIFY_IDENTITY_FOR_BANK_ACCOUNT, parameters, getVBBADataForOnyx()); diff --git a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx index f63cf72f8a4f..593408b60589 100644 --- a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx +++ b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx @@ -71,22 +71,34 @@ function BusinessInfo({reimbursementAccount, reimbursementAccountDraft, onBackBu const policyID = reimbursementAccount?.achData?.policyID ?? ''; const values = useMemo(() => getSubstepValues(BUSINESS_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]); - const submit = useCallback(() => { - BankAccounts.updateCompanyInformationForBankAccount( - Number(reimbursementAccount?.achData?.bankAccountID ?? '0'), - { - ...values, - ...getBankAccountFields(['routingNumber', 'accountNumber', 'bankName', 'plaidAccountID', 'plaidAccessToken', 'isSavings']), - companyTaxID: values.companyTaxID?.replace(CONST.REGEX.NON_NUMERIC, ''), - companyPhone: parsePhoneNumber(values.companyPhone ?? '', {regionCode: CONST.COUNTRY.US}).number?.significant, - }, - policyID, - ); - }, [reimbursementAccount, values, getBankAccountFields, policyID]); + const submit = useCallback( + (isConfirmPage: boolean) => { + BankAccounts.updateCompanyInformationForBankAccount( + Number(reimbursementAccount?.achData?.bankAccountID ?? '0'), + { + ...values, + ...getBankAccountFields(['routingNumber', 'accountNumber', 'bankName', 'plaidAccountID', 'plaidAccessToken', 'isSavings']), + companyTaxID: values.companyTaxID?.replace(CONST.REGEX.NON_NUMERIC, ''), + companyPhone: parsePhoneNumber(values.companyPhone ?? '', {regionCode: CONST.COUNTRY.US}).number?.significant, + }, + policyID, + isConfirmPage, + ); + }, + [reimbursementAccount, values, getBankAccountFields, policyID], + ); const startFrom = useMemo(() => getInitialSubstepForBusinessInfo(values), [values]); - const {componentToRender: SubStep, isEditing, screenIndex, nextScreen, prevScreen, moveTo, goToTheLastStep} = useSubStep({bodyContent, startFrom, onFinished: submit}); + const { + componentToRender: SubStep, + isEditing, + screenIndex, + nextScreen, + prevScreen, + moveTo, + goToTheLastStep, + } = useSubStep({bodyContent, startFrom, onFinished: () => submit(true), onNextSubStep: () => submit(false)}); const handleBackButtonPress = () => { if (isEditing) { diff --git a/src/pages/ReimbursementAccount/PersonalInfo/PersonalInfo.tsx b/src/pages/ReimbursementAccount/PersonalInfo/PersonalInfo.tsx index ce37cd4aa4e2..41c08ddc95dd 100644 --- a/src/pages/ReimbursementAccount/PersonalInfo/PersonalInfo.tsx +++ b/src/pages/ReimbursementAccount/PersonalInfo/PersonalInfo.tsx @@ -46,12 +46,23 @@ function PersonalInfo({reimbursementAccount, reimbursementAccountDraft, onBackBu const policyID = reimbursementAccount?.achData?.policyID ?? ''; const values = useMemo(() => getSubstepValues(PERSONAL_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]); const bankAccountID = Number(reimbursementAccount?.achData?.bankAccountID ?? '0'); - const submit = useCallback(() => { - BankAccounts.updatePersonalInformationForBankAccount(bankAccountID, {...values}, policyID); - }, [values, bankAccountID, policyID]); + const submit = useCallback( + (isConfirmPage: boolean) => { + BankAccounts.updatePersonalInformationForBankAccount(bankAccountID, {...values}, policyID, isConfirmPage); + }, + [values, bankAccountID, policyID], + ); const startFrom = useMemo(() => getInitialSubstepForPersonalInfo(values), [values]); - const {componentToRender: SubStep, isEditing, screenIndex, nextScreen, prevScreen, moveTo, goToTheLastStep} = useSubStep({bodyContent, startFrom, onFinished: submit}); + const { + componentToRender: SubStep, + isEditing, + screenIndex, + nextScreen, + prevScreen, + moveTo, + goToTheLastStep, + } = useSubStep({bodyContent, startFrom, onFinished: () => submit(true), onNextSubStep: () => submit(false)}); const handleBackButtonPress = () => { if (isEditing) {