diff --git a/src/CONST.ts b/src/CONST.ts index 3d29fc4a436f..6641d456dce8 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -281,8 +281,9 @@ const CONST = { STEP: { // In the order they appear in the VBA flow BANK_ACCOUNT: 'BankAccountStep', - COMPANY: 'CompanyStep', REQUESTOR: 'RequestorStep', + COMPANY: 'CompanyStep', + BENEFICIAL_OWNERS: 'BeneficialOwnersStep', ACH_CONTRACT: 'ACHContractStep', VALIDATION: 'ValidationStep', ENABLE: 'EnableStep', diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index 98e3856f4544..5b2171af73f2 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -127,6 +127,7 @@ const ONYXKEYS = { /** Token needed to initialize Onfido */ ONFIDO_TOKEN: 'onfidoToken', + ONFIDO_APPLICANT_ID: 'onfidoApplicantID', /** Indicates which locale should be used */ NVP_PREFERRED_LOCALE: 'preferredLocale', @@ -398,6 +399,7 @@ type OnyxValues = { [ONYXKEYS.IS_PLAID_DISABLED]: boolean; [ONYXKEYS.PLAID_LINK_TOKEN]: string; [ONYXKEYS.ONFIDO_TOKEN]: string; + [ONYXKEYS.ONFIDO_APPLICANT_ID]: string; [ONYXKEYS.NVP_PREFERRED_LOCALE]: OnyxTypes.Locale; [ONYXKEYS.USER_WALLET]: OnyxTypes.UserWallet; [ONYXKEYS.WALLET_ONFIDO]: OnyxTypes.WalletOnfido; diff --git a/src/components/ReimbursementAccountLoadingIndicator.js b/src/components/ReimbursementAccountLoadingIndicator.js index bc0e70e64419..141e056afd93 100644 --- a/src/components/ReimbursementAccountLoadingIndicator.js +++ b/src/components/ReimbursementAccountLoadingIndicator.js @@ -4,7 +4,6 @@ import {StyleSheet, View} from 'react-native'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import FullPageOfflineBlockingView from './BlockingViews/FullPageOfflineBlockingView'; -import FullScreenLoadingIndicator from './FullscreenLoadingIndicator'; import HeaderWithBackButton from './HeaderWithBackButton'; import Lottie from './Lottie'; import LottieAnimations from './LottieAnimations'; @@ -12,9 +11,6 @@ import ScreenWrapper from './ScreenWrapper'; import Text from './Text'; const propTypes = { - /** Whether the user is submitting verifications data */ - isSubmittingVerificationsData: PropTypes.bool.isRequired, - /** Method to trigger when pressing back button of the header */ onBackButtonPress: PropTypes.func.isRequired, }; @@ -33,22 +29,18 @@ function ReimbursementAccountLoadingIndicator(props) { onBackButtonPress={props.onBackButtonPress} /> - {props.isSubmittingVerificationsData ? ( - - - - {translate('reimbursementAccountLoadingAnimation.explanationLine')} - + + + + {translate('reimbursementAccountLoadingAnimation.explanationLine')} - ) : ( - - )} + ); diff --git a/src/hooks/useSubStep/index.ts b/src/hooks/useSubStep/index.ts index 0efd875998e2..36d8f4bc49eb 100644 --- a/src/hooks/useSubStep/index.ts +++ b/src/hooks/useSubStep/index.ts @@ -15,23 +15,26 @@ export default function useSubStep({bodyContent, onFinished, startFrom = 0}: setScreenIndex(prevScreenIndex); }, [screenIndex]); - const nextScreen = useCallback(() => { - if (isEditing.current) { - isEditing.current = false; - - setScreenIndex(bodyContent.length - 1); - - return; - } - - const nextScreenIndex = screenIndex + 1; - - if (nextScreenIndex === bodyContent.length) { - onFinished(); - } else { - setScreenIndex(nextScreenIndex); - } - }, [screenIndex, bodyContent.length, onFinished]); + const nextScreen = useCallback( + (data?: Record) => { + if (isEditing.current) { + isEditing.current = false; + + setScreenIndex(bodyContent.length - 1); + + return; + } + + const nextScreenIndex = screenIndex + 1; + + if (nextScreenIndex === bodyContent.length) { + onFinished(data); + } else { + setScreenIndex(nextScreenIndex); + } + }, + [screenIndex, bodyContent.length, onFinished], + ); const moveTo = useCallback((step: number) => { isEditing.current = true; diff --git a/src/libs/actions/BankAccounts.ts b/src/libs/actions/BankAccounts.ts index c32cf0a4306e..35bbcee98300 100644 --- a/src/libs/actions/BankAccounts.ts +++ b/src/libs/actions/BankAccounts.ts @@ -11,7 +11,7 @@ import type {BankAccountStep, BankAccountSubStep} from '@src/types/onyx/Reimburs import type { ACHContractStepProps, BankAccountStepProps, - BeneficialOwnersStepDraftProps, + BeneficialOwnersStepProps, CompanyStepProps, OnfidoData, ReimbursementAccountProps, @@ -97,6 +97,7 @@ function clearPersonalBankAccount() { function clearOnfidoToken() { Onyx.merge(ONYXKEYS.ONFIDO_TOKEN, ''); + Onyx.merge(ONYXKEYS.ONFIDO_APPLICANT_ID, ''); } /** @@ -168,6 +169,7 @@ function connectBankAccountWithPlaid(bankAccountID: number, selectedPlaidBankAcc bank?: string; plaidAccountID: string; plaidAccessToken: string; + canUseNewVbbaFlow: boolean; }; const parameters: ConnectBankAccountWithPlaidParams = { @@ -177,6 +179,7 @@ function connectBankAccountWithPlaid(bankAccountID: number, selectedPlaidBankAcc bank: selectedPlaidBankAccount.bankName, plaidAccountID: selectedPlaidBankAccount.plaidAccountID, plaidAccessToken: selectedPlaidBankAccount.plaidAccessToken, + canUseNewVbbaFlow: true, }; API.write(commandName, parameters, getVBBADataForOnyx()); @@ -284,7 +287,14 @@ function deletePaymentBankAccount(bankAccountID: number) { * This action is called by the requestor step in the Verified Bank Account flow */ function updatePersonalInformationForBankAccount(params: RequestorStepProps) { - API.write('UpdatePersonalInformationForBankAccount', params, getVBBADataForOnyx(CONST.BANK_ACCOUNT.STEP.REQUESTOR)); + API.write( + 'UpdatePersonalInformationForBankAccount', + { + ...params, + canUseNewVbbaFlow: true, + }, + getVBBADataForOnyx(CONST.BANK_ACCOUNT.STEP.REQUESTOR), + ); } function validateBankAccount(bankAccountID: number, validateCode: string) { @@ -386,25 +396,32 @@ function openReimbursementAccountPage(stepToOpen: ReimbursementAccountStep, subS * Updates the bank account in the database with the company step data */ function updateCompanyInformationForBankAccount(bankAccount: BankAccountCompanyInformation, policyID: string) { - type UpdateCompanyInformationForBankAccountParams = BankAccountCompanyInformation & {policyID: string}; + type UpdateCompanyInformationForBankAccountParams = BankAccountCompanyInformation & { + policyID: string; + canUseNewVbbaFlow: boolean; + }; - const parameters: UpdateCompanyInformationForBankAccountParams = {...bankAccount, policyID}; + const parameters: UpdateCompanyInformationForBankAccountParams = { + ...bankAccount, + policyID, + canUseNewVbbaFlow: true, + }; API.write('UpdateCompanyInformationForBankAccount', parameters, getVBBADataForOnyx(CONST.BANK_ACCOUNT.STEP.COMPANY)); } /** - * Add beneficial owners for the bank account to the draft + * Add beneficial owners for the bank account and verify the accuracy of the information provided */ -function updateBeneficialOwnersForBankAccountDraft(params: BeneficialOwnersStepDraftProps) { - Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT, params); +function updateBeneficialOwnersForBankAccount(params: BeneficialOwnersStepProps) { + API.write('UpdateBeneficialOwnersForBankAccount', {...params, canUseNewVbbaFlow: true}, getVBBADataForOnyx()); } /** - * Add beneficial owners for the bank account, accept the ACH terms and conditions and verify the accuracy of the information provided + * accept the ACH terms and conditions and verify the accuracy of the information provided */ -function updateBeneficialOwnersForBankAccount(params: ACHContractStepProps) { - API.write('UpdateBeneficialOwnersForBankAccount', params, getVBBADataForOnyx()); +function acceptACHContractForBankAccount(params: ACHContractStepProps) { + API.write('AcceptACHContractForBankAccount', {...params, canUseNewVbbaFlow: true}, getVBBADataForOnyx()); } /** @@ -417,6 +434,7 @@ function connectBankAccountManually(bankAccountID: number, accountNumber?: strin accountNumber?: string; routingNumber?: string; plaidMask?: string; + canUseNewVbbaFlow: boolean; }; const parameters: ConnectBankAccountManuallyParams = { @@ -424,6 +442,7 @@ function connectBankAccountManually(bankAccountID: number, accountNumber?: strin accountNumber, routingNumber, plaidMask, + canUseNewVbbaFlow: true, }; API.write('ConnectBankAccountManually', parameters, getVBBADataForOnyx(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT)); @@ -436,11 +455,13 @@ function verifyIdentityForBankAccount(bankAccountID: number, onfidoData: OnfidoD type VerifyIdentityForBankAccountParams = { bankAccountID: number; onfidoData: string; + canUseNewVbbaFlow: boolean; }; const parameters: VerifyIdentityForBankAccountParams = { bankAccountID, onfidoData: JSON.stringify(onfidoData), + canUseNewVbbaFlow: true, }; API.write('VerifyIdentityForBankAccount', parameters, getVBBADataForOnyx()); @@ -508,6 +529,7 @@ function setReimbursementAccountLoading(isLoading: boolean) { } export { + acceptACHContractForBankAccount, addBusinessWebsiteForDraft, addBusinessAddressForDraft, addPersonalAddressForDraft, @@ -526,7 +548,6 @@ export { clearReimbursementAccount, openReimbursementAccountPage, updateBeneficialOwnersForBankAccount, - updateBeneficialOwnersForBankAccountDraft, updateCompanyInformationForBankAccount, updatePersonalInformationForBankAccount, openWorkspaceView, diff --git a/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.js b/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.js index 14c988033689..476f80a4af4f 100644 --- a/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.js +++ b/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.js @@ -43,6 +43,11 @@ function resetFreePlanBankAccount(bankAccountID, session) { key: ONYXKEYS.ONFIDO_TOKEN, value: '', }, + { + onyxMethod: Onyx.METHOD.SET, + key: ONYXKEYS.ONFIDO_APPLICANT_ID, + value: '', + }, { onyxMethod: Onyx.METHOD.SET, key: ONYXKEYS.PLAID_DATA, diff --git a/src/pages/ReimbursementAccount/ACHContractStep.js b/src/pages/ReimbursementAccount/ACHContractStep.js index 07f0828fe67f..5204ba7d3fc3 100644 --- a/src/pages/ReimbursementAccount/ACHContractStep.js +++ b/src/pages/ReimbursementAccount/ACHContractStep.js @@ -1,6 +1,5 @@ import PropTypes from 'prop-types'; -import React, {useState} from 'react'; -import BeneficialOwnerInfo from './BeneficialOwnerInfo/BeneficialOwnerInfo'; +import React from 'react'; import CompleteVerification from './CompleteVerification/CompleteVerification'; const propTypes = { @@ -12,23 +11,10 @@ const propTypes = { }; function ACHContractStep({onBackButtonPress, onCloseButtonPress}) { - const [isBeneficialOwnerInfoSet, setIsBeneficialOwnerInfoSet] = useState(false); - const handleCompleteVerificationBackButtonPress = () => setIsBeneficialOwnerInfoSet(false); - - if (isBeneficialOwnerInfoSet) { - return ( - - ); - } - return ( - ); } diff --git a/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx b/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx index 0ad09825ed69..15971bc82bbc 100644 --- a/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx +++ b/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx @@ -39,10 +39,15 @@ function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext}: const isLoading = reimbursementAccount?.isLoading ?? false; const setupType = reimbursementAccount?.achData?.subStep ?? ''; + const bankAccountID = Number(reimbursementAccount?.achData?.[bankInfoStepKeys.BANK_ACCOUNT_ID] ?? '0'); const values = useMemo(() => getSubstepValues(bankInfoStepKeys, reimbursementAccountDraft ?? {}, reimbursementAccount ?? {}), [reimbursementAccount, reimbursementAccountDraft]); const error = ErrorUtils.getLatestErrorMessage(reimbursementAccount ?? {}); const handleConnectDifferentAccount = () => { + if (bankAccountID) { + ReimbursementAccount.requestResetFreePlanBankAccount(); + return; + } const bankAccountData = { [bankInfoStepKeys.ROUTING_NUMBER]: '', [bankInfoStepKeys.ACCOUNT_NUMBER]: '', diff --git a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/BeneficialOwnerInfo.tsx b/src/pages/ReimbursementAccount/BeneficialOwnersStep.tsx similarity index 90% rename from src/pages/ReimbursementAccount/BeneficialOwnerInfo/BeneficialOwnerInfo.tsx rename to src/pages/ReimbursementAccount/BeneficialOwnersStep.tsx index e5145ef3ad55..ea8ae29e167c 100644 --- a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/BeneficialOwnerInfo.tsx +++ b/src/pages/ReimbursementAccount/BeneficialOwnersStep.tsx @@ -15,13 +15,13 @@ import * as FormActions from '@userActions/FormActions'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {ReimbursementAccount, ReimbursementAccountDraft} from '@src/types/onyx'; -import BeneficialOwnerCheckUBO from './substeps/BeneficialOwnerCheckUBO'; -import AddressUBO from './substeps/BeneficialOwnerDetailsFormSubsteps/AddressUBO'; -import ConfirmationUBO from './substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO'; -import DateOfBirthUBO from './substeps/BeneficialOwnerDetailsFormSubsteps/DateOfBirthUBO'; -import LegalNameUBO from './substeps/BeneficialOwnerDetailsFormSubsteps/LegalNameUBO'; -import SocialSecurityNumberUBO from './substeps/BeneficialOwnerDetailsFormSubsteps/SocialSecurityNumberUBO'; -import CompanyOwnersListUBO from './substeps/CompanyOwnersListUBO'; +import BeneficialOwnerCheckUBO from './BeneficialOwnerInfo/substeps/BeneficialOwnerCheckUBO'; +import AddressUBO from './BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/AddressUBO'; +import ConfirmationUBO from './BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO'; +import DateOfBirthUBO from './BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/DateOfBirthUBO'; +import LegalNameUBO from './BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/LegalNameUBO'; +import SocialSecurityNumberUBO from './BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/SocialSecurityNumberUBO'; +import CompanyOwnersListUBO from './BeneficialOwnerInfo/substeps/CompanyOwnersListUBO'; type BeneficialOwnerInfoOnyxProps = { /** Reimbursement account from ONYX */ @@ -31,15 +31,12 @@ type BeneficialOwnerInfoOnyxProps = { reimbursementAccountDraft: OnyxEntry; }; -type BeneficialOwnerInfoProps = { +type BeneficialOwnersStepProps = { /** Goes to the previous step */ onBackButtonPress: () => void; /** Exits flow and goes back to the workspace initial page */ onCloseButtonPress: () => void; - - /** Changes variable responsible for displaying step 4 or 5 */ - setIsBeneficialOwnerInfoSet: (newState: boolean) => void; } & BeneficialOwnerInfoOnyxProps; const BODY_CONTENT: Array void}>> = [ @@ -52,7 +49,7 @@ const BODY_CONTENT: Array { @@ -219,7 +215,7 @@ function BeneficialOwnerInfo({reimbursementAccount, reimbursementAccountDraft, o return ( ({ +export default withOnyx({ reimbursementAccount: { key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, }, reimbursementAccountDraft: { key: ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT, }, -})(BeneficialOwnerInfo); +})(BeneficialOwnersStep); diff --git a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx index 3bf0b7180664..65c621435993 100644 --- a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx +++ b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx @@ -114,7 +114,7 @@ function BusinessInfo({reimbursementAccount, reimbursementAccountDraft, policyID /> diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/NameBusiness.tsx b/src/pages/ReimbursementAccount/BusinessInfo/substeps/NameBusiness.tsx index f35010b3c224..1e0bf5584a30 100644 --- a/src/pages/ReimbursementAccount/BusinessInfo/substeps/NameBusiness.tsx +++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/NameBusiness.tsx @@ -35,7 +35,7 @@ function NameBusiness({reimbursementAccount, onNext, isEditing}: NameBusinessPro const bankAccountID = getDefaultValueForReimbursementAccountField(reimbursementAccount, 'bankAccountID', 0); - const shouldDisableCompanyName = Boolean(bankAccountID && defaultCompanyName); + const shouldDisableCompanyName = Boolean(bankAccountID && defaultCompanyName && reimbursementAccount?.achData?.state !== 'SETUP'); return ( // @ts-expect-error TODO: Remove this once FormProvider (https://github.com/Expensify/App/issues/31972) is migrated to TypeScript diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/TaxIdBusiness.tsx b/src/pages/ReimbursementAccount/BusinessInfo/substeps/TaxIdBusiness.tsx index f2653cd26879..49b9acf82045 100644 --- a/src/pages/ReimbursementAccount/BusinessInfo/substeps/TaxIdBusiness.tsx +++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/TaxIdBusiness.tsx @@ -43,7 +43,7 @@ function TaxIdBusiness({reimbursementAccount, onNext, isEditing}: TaxIdBusinessP const bankAccountID = getDefaultValueForReimbursementAccountField(reimbursementAccount, 'bankAccountID', 0); - const shouldDisableCompanyTaxID = Boolean(bankAccountID && defaultCompanyTaxId); + const shouldDisableCompanyTaxID = Boolean(bankAccountID && defaultCompanyTaxId && reimbursementAccount?.achData?.state !== 'SETUP'); return ( // @ts-expect-error TODO: Remove this once FormProvider (https://github.com/Expensify/App/issues/31972) is migrated to TypeScript diff --git a/src/pages/ReimbursementAccount/CompleteVerification/CompleteVerification.tsx b/src/pages/ReimbursementAccount/CompleteVerification/CompleteVerification.tsx index 6ba89c0ec3e4..93e61afd2f9a 100644 --- a/src/pages/ReimbursementAccount/CompleteVerification/CompleteVerification.tsx +++ b/src/pages/ReimbursementAccount/CompleteVerification/CompleteVerification.tsx @@ -35,7 +35,6 @@ type CompleteVerificationProps = CompleteVerificationOnyxProps & { const BODY_CONTENT: Array> = [ConfirmAgreements]; const COMPLETE_VERIFICATION_KEYS = CONST.BANK_ACCOUNT.COMPLETE_VERIFICATION.INPUT_KEY; -const BENEFICIAL_OWNER_INFO_STEP_KEYS = CONST.BANK_ACCOUNT.BENEFICIAL_OWNER_INFO_STEP.INPUT_KEY; function CompleteVerification({reimbursementAccount, reimbursementAccountDraft, onBackButtonPress, onCloseButtonPress}: CompleteVerificationProps) { const {translate} = useLocalize(); @@ -50,13 +49,11 @@ function CompleteVerification({reimbursementAccount, reimbursementAccountDraft, certifyTrueInformation: values.certifyTrueInformation, acceptTermsAndConditions: values.acceptTermsAndConditions, }; - const beneficialOwnersStepValues = getSubstepValues(BENEFICIAL_OWNER_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount); - BankAccounts.updateBeneficialOwnersForBankAccount({ - ...beneficialOwnersStepValues, + BankAccounts.acceptACHContractForBankAccount({ ...payload, }); - }, [reimbursementAccount, reimbursementAccountDraft, values]); + }, [reimbursementAccount, values]); const {componentToRender: SubStep, isEditing, screenIndex, nextScreen, prevScreen, moveTo} = useSubStep({bodyContent: BODY_CONTENT, startFrom: 0, onFinished: submit}); diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js index 3c5bf46c3a93..70121e313e32 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js @@ -27,6 +27,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import ACHContractStep from './ACHContractStep'; import BankAccountStep from './BankAccountStep'; +import BeneficialOwnersStep from './BeneficialOwnersStep'; import CompanyStep from './CompanyStep'; import ConnectBankAccount from './ConnectBankAccount/ConnectBankAccount'; import ContinueBankAccountSetup from './ContinueBankAccountSetup'; @@ -105,6 +106,7 @@ const defaultProps = { const ROUTE_NAMES = { COMPANY: 'company', PERSONAL_INFORMATION: 'personal-information', + BENEFICIAL_OWNERS: 'beneficial-owners', CONTRACT: 'contract', VALIDATE: 'validate', ENABLE: 'enable', @@ -125,6 +127,8 @@ function getStepToOpenFromRouteParams(route) { return CONST.BANK_ACCOUNT.STEP.COMPANY; case ROUTE_NAMES.PERSONAL_INFORMATION: return CONST.BANK_ACCOUNT.STEP.REQUESTOR; + case ROUTE_NAMES.BENEFICIAL_OWNERS: + return CONST.BANK_ACCOUNT.STEP.BENEFICIAL_OWNERS; case ROUTE_NAMES.CONTRACT: return CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT; case ROUTE_NAMES.VALIDATE: @@ -146,6 +150,8 @@ function getRouteForCurrentStep(currentStep) { return ROUTE_NAMES.COMPANY; case CONST.BANK_ACCOUNT.STEP.REQUESTOR: return ROUTE_NAMES.PERSONAL_INFORMATION; + case CONST.BANK_ACCOUNT.STEP.BENEFICIAL_OWNERS: + return ROUTE_NAMES.BENEFICIAL_OWNERS; case CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT: return ROUTE_NAMES.CONTRACT; case CONST.BANK_ACCOUNT.STEP.VALIDATION: @@ -370,20 +376,24 @@ function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, pol break; case CONST.BANK_ACCOUNT.STEP.COMPANY: - BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT); + BankAccounts.clearOnfidoToken(); + BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR); break; case CONST.BANK_ACCOUNT.STEP.REQUESTOR: if (shouldShowOnfido) { BankAccounts.clearOnfidoToken(); } else { - BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.COMPANY); + BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT, {subStep: CONST.BANK_ACCOUNT.SUBSTEP.MANUAL}); } break; + case CONST.BANK_ACCOUNT.STEP.BENEFICIAL_OWNERS: + BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.COMPANY); + break; + case CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT: - BankAccounts.clearOnfidoToken(); - BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR); + BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.BENEFICIAL_OWNERS); break; case CONST.BANK_ACCOUNT.STEP.VALIDATION: @@ -415,20 +425,24 @@ function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, pol const isLoading = (isLoadingApp || account.isLoading || reimbursementAccount.isLoading) && (!plaidCurrentEvent || plaidCurrentEvent === CONST.BANK_ACCOUNT.PLAID.EVENTS_NAME.EXIT); const shouldShowOfflineLoader = !( - isOffline && _.contains([CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT, CONST.BANK_ACCOUNT.STEP.COMPANY, CONST.BANK_ACCOUNT.STEP.REQUESTOR, CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT], currentStep) + isOffline && + _.contains( + [ + CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT, + CONST.BANK_ACCOUNT.STEP.COMPANY, + CONST.BANK_ACCOUNT.STEP.REQUESTOR, + CONST.BANK_ACCOUNT.STEP.BENEFICIAL_OWNERS, + CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT, + ], + currentStep, + ) ); // Show loading indicator when page is first time being opened and props.reimbursementAccount yet to be loaded from the server // or when data is being loaded. Don't show the loading indicator if we're offline and restarted the bank account setup process // On Android, when we open the app from the background, Onfido activity gets destroyed, so we need to reopen it. if ((!hasACHDataBeenLoaded || isLoading) && shouldShowOfflineLoader && (shouldReopenOnfido || !requestorStepRef.current)) { - const isSubmittingVerificationsData = _.contains([CONST.BANK_ACCOUNT.STEP.COMPANY, CONST.BANK_ACCOUNT.STEP.REQUESTOR, CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT], currentStep); - return ( - - ); + return ; } let errorText; @@ -510,6 +524,15 @@ function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, pol ); } + if (currentStep === CONST.BANK_ACCOUNT.STEP.BENEFICIAL_OWNERS) { + return ( + + ); + } + if (currentStep === CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT) { return ( { - BankAccounts.verifyIdentityForBankAccount(lodashGet(reimbursementAccount, 'achData.bankAccountID', 0), onfidoData); + BankAccounts.verifyIdentityForBankAccount(lodashGet(reimbursementAccount, 'achData.bankAccountID', 0), {...onfidoData, applicantID: onfidoApplicantID}); BankAccounts.updateReimbursementAccountDraft({isOnfidoSetupComplete: true}); }; @@ -90,4 +93,7 @@ export default withOnyx({ onfidoToken: { key: ONYXKEYS.ONFIDO_TOKEN, }, + onfidoApplicantID: { + key: ONYXKEYS.ONFIDO_APPLICANT_ID, + }, })(RequestorOnfidoStep); diff --git a/src/pages/ReimbursementAccount/VerifyIdentity/VerifyIdentity.tsx b/src/pages/ReimbursementAccount/VerifyIdentity/VerifyIdentity.tsx index a1645512a5ab..e3f92ba1680b 100644 --- a/src/pages/ReimbursementAccount/VerifyIdentity/VerifyIdentity.tsx +++ b/src/pages/ReimbursementAccount/VerifyIdentity/VerifyIdentity.tsx @@ -19,6 +19,9 @@ import OnfidoInitialize from './substeps/OnfidoInitialize'; type VerifyIdentityOnyxProps = { /** Reimbursement account from ONYX */ reimbursementAccount: OnyxEntry; + + /** Onfido applicant ID from ONYX */ + onfidoApplicantID: OnyxEntry; }; type VerifyIdentityProps = VerifyIdentityOnyxProps & { @@ -31,20 +34,19 @@ type VerifyIdentityProps = VerifyIdentityOnyxProps & { const bodyContent: Array> = [OnfidoInitialize]; -function VerifyIdentity({reimbursementAccount, onBackButtonPress, onCloseButtonPress}: VerifyIdentityProps) { +function VerifyIdentity({reimbursementAccount, onBackButtonPress, onCloseButtonPress, onfidoApplicantID}: VerifyIdentityProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); - const submit = useCallback( (onfidoData?: OnfidoData) => { if (!onfidoData) { return; } - BankAccounts.verifyIdentityForBankAccount(reimbursementAccount?.achData?.bankAccountID ?? 0, onfidoData); + BankAccounts.verifyIdentityForBankAccount(reimbursementAccount?.achData?.bankAccountID ?? 0, {...onfidoData, applicantID: onfidoApplicantID}); BankAccounts.updateReimbursementAccountDraft({isOnfidoSetupComplete: true}); }, - [reimbursementAccount], + [reimbursementAccount, onfidoApplicantID], ); const {componentToRender: SubStep, isEditing, moveTo, nextScreen} = useSubStep({bodyContent, startFrom: 0, onFinished: submit}); @@ -60,7 +62,7 @@ function VerifyIdentity({reimbursementAccount, onBackButtonPress, onCloseButtonP {}} - startStepIndex={3} + startStepIndex={2} stepNames={CONST.BANK_ACCOUNT.STEP_NAMES} /> @@ -79,4 +81,7 @@ export default withOnyx({ reimbursementAccount: { key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, }, + onfidoApplicantID: { + key: ONYXKEYS.ONFIDO_APPLICANT_ID, + }, })(VerifyIdentity); diff --git a/src/types/onyx/ReimbursementAccount.ts b/src/types/onyx/ReimbursementAccount.ts index dff0b201457c..c7726db1dca0 100644 --- a/src/types/onyx/ReimbursementAccount.ts +++ b/src/types/onyx/ReimbursementAccount.ts @@ -2,7 +2,7 @@ import type {ValueOf} from 'type-fest'; import type CONST from '@src/CONST'; import type {BankName} from './Bank'; import type * as OnyxCommon from './OnyxCommon'; -import type {BeneficialOwnersStepDraftProps, CompanyStepProps, RequestorStepProps} from './ReimbursementAccountDraft'; +import type {BeneficialOwnersStepProps, CompanyStepProps, RequestorStepProps} from './ReimbursementAccountDraft'; type BankAccountStep = ValueOf; @@ -32,7 +32,7 @@ type ACHData = { /** Bank account owner name */ addressName?: string; -} & BeneficialOwnersStepDraftProps & +} & BeneficialOwnersStepProps & CompanyStepProps & RequestorStepProps; diff --git a/src/types/onyx/ReimbursementAccountDraft.ts b/src/types/onyx/ReimbursementAccountDraft.ts index dd00bdda5942..4adf85f4896e 100644 --- a/src/types/onyx/ReimbursementAccountDraft.ts +++ b/src/types/onyx/ReimbursementAccountDraft.ts @@ -37,7 +37,7 @@ type RequestorStepProps = { onfidoData?: OnfidoData; }; -type BeneficialOwnersStepDraftProps = { +type BeneficialOwnersStepProps = { ownsMoreThan25Percent?: boolean; hasOtherBeneficialOwners?: boolean; beneficialOwners?: string; @@ -45,13 +45,9 @@ type BeneficialOwnersStepDraftProps = { }; type ACHContractStepProps = { - ownsMoreThan25Percent?: boolean; - hasOtherBeneficialOwners?: boolean; acceptTermsAndConditions?: boolean; certifyTrueInformation?: boolean; isAuthorizedToUseBankAccount?: boolean; - beneficialOwners?: string; - beneficialOwnerKeys?: string[]; }; type ReimbursementAccountProps = { @@ -67,16 +63,13 @@ type ReimbursementAccountProps = { // BeneficialOwnerDraftData is saved under dynamic key which consists of prefix, beneficial owner ID and input key type BeneficialOwnerDraftData = Record<`beneficialOwner_${string}_${string}`, string>; -type ReimbursementAccountDraft = BankAccountStepProps & CompanyStepProps & RequestorStepProps & ACHContractStepProps & ReimbursementAccountProps & BeneficialOwnerDraftData; +type ReimbursementAccountDraft = BankAccountStepProps & + CompanyStepProps & + RequestorStepProps & + BeneficialOwnersStepProps & + ACHContractStepProps & + ReimbursementAccountProps & + BeneficialOwnerDraftData; export default ReimbursementAccountDraft; -export type { - ACHContractStepProps, - BeneficialOwnersStepDraftProps, - RequestorStepProps, - OnfidoData, - BankAccountStepProps, - CompanyStepProps, - ReimbursementAccountProps, - BeneficialOwnerDraftData, -}; +export type {ACHContractStepProps, BeneficialOwnersStepProps, RequestorStepProps, OnfidoData, BankAccountStepProps, CompanyStepProps, ReimbursementAccountProps, BeneficialOwnerDraftData};