diff --git a/src/CONST/index.ts b/src/CONST/index.ts index b6d990ffe148..b021282c4a34 100755 --- a/src/CONST/index.ts +++ b/src/CONST/index.ts @@ -476,6 +476,7 @@ const CONST = { }, STEP: { // In the order they appear in the VBA flow + COUNTRY: 'CountryStep', BANK_ACCOUNT: 'BankAccountStep', REQUESTOR: 'RequestorStep', COMPANY: 'CompanyStep', @@ -484,12 +485,12 @@ const CONST = { VALIDATION: 'ValidationStep', ENABLE: 'EnableStep', }, - STEP_NAMES: ['1', '2', '3', '4', '5'], - STEPS_HEADER_HEIGHT: 40, + STEP_NAMES: ['1', '2', '3', '4', '5', '6'], SUBSTEP: { MANUAL: 'manual', PLAID: 'plaid', }, + STEPS_HEADER_HEIGHT: 40, VERIFICATIONS: { ERROR_MESSAGE: 'verifications.errorMessage', THROTTLED: 'verifications.throttled', @@ -508,6 +509,7 @@ const CONST = { SETUP_TYPE: { MANUAL: 'manual', PLAID: 'plaid', + NONE: '', }, REGEX: { US_ACCOUNT_NUMBER: /^[0-9]{4,17}$/, diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index d550a3bf6993..2e3cd62f5699 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -305,6 +305,9 @@ const ONYXKEYS = { /** Stores Workspace ID that will be tied to reimbursement account during setup */ REIMBURSEMENT_ACCOUNT_WORKSPACE_ID: 'reimbursementAccountWorkspaceID', + /** Stores the bank connection type user wants to set up before validation code modal */ + REIMBURSEMENT_ACCOUNT_OPTION_PRESSED: 'reimbursementAccountOptionPressed', + /** Set when we are loading payment methods */ IS_LOADING_PAYMENT_METHODS: 'isLoadingPaymentMethods', @@ -1108,6 +1111,7 @@ type OnyxValuesMapping = { [ONYXKEYS.PURCHASE_LIST]: OnyxTypes.PurchaseList; [ONYXKEYS.PERSONAL_BANK_ACCOUNT]: OnyxTypes.PersonalBankAccount; [ONYXKEYS.REIMBURSEMENT_ACCOUNT]: OnyxTypes.ReimbursementAccount; + [ONYXKEYS.REIMBURSEMENT_ACCOUNT_OPTION_PRESSED]: ValueOf; [ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE]: string | number; [ONYXKEYS.FREQUENTLY_USED_EMOJIS]: OnyxTypes.FrequentlyUsedEmoji[]; [ONYXKEYS.REIMBURSEMENT_ACCOUNT_WORKSPACE_ID]: string; diff --git a/src/pages/ReimbursementAccount/NonUSD/Country/Country.tsx b/src/components/SubStepForms/CountryFullStep/index.tsx similarity index 78% rename from src/pages/ReimbursementAccount/NonUSD/Country/Country.tsx rename to src/components/SubStepForms/CountryFullStep/index.tsx index 25245a2a6d2c..7061ead1943d 100644 --- a/src/pages/ReimbursementAccount/NonUSD/Country/Country.tsx +++ b/src/components/SubStepForms/CountryFullStep/index.tsx @@ -8,34 +8,30 @@ import {clearErrors} from '@userActions/FormActions'; import ONYXKEYS from '@src/ONYXKEYS'; import Confirmation from './subSteps/Confirmation'; -type CountryProps = { +type CountryFullStepProps = { /** Handles back button press */ onBackButtonPress: () => void; + /** Array of step names */ + stepNames: readonly string[]; + /** Handles submit button press */ onSubmit: () => void; /** ID of current policy */ policyID: string | undefined; - - /** Array of step names */ - stepNames?: readonly string[]; }; -type CountryStepProps = { +type CountrySubStepProps = { /** ID of current policy */ policyID: string | undefined; } & SubStepProps; -const bodyContent: Array> = [Confirmation]; +const bodyContent: Array> = [Confirmation]; -function Country({onBackButtonPress, onSubmit, policyID, stepNames}: CountryProps) { +function CountryFullStep({onBackButtonPress, stepNames, onSubmit, policyID}: CountryFullStepProps) { const {translate} = useLocalize(); - const submit = () => { - onSubmit(); - }; - const { componentToRender: SubStep, isEditing, @@ -44,7 +40,7 @@ function Country({onBackButtonPress, onSubmit, policyID, stepNames}: CountryProp prevScreen, moveTo, goToTheLastStep, - } = useSubStep({bodyContent, startFrom: 0, onFinished: submit}); + } = useSubStep({bodyContent, startFrom: 0, onFinished: onSubmit}); const handleBackButtonPress = () => { clearErrors(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM); @@ -62,7 +58,7 @@ function Country({onBackButtonPress, onSubmit, policyID, stepNames}: CountryProp return ( - {translate('common.settings').toLowerCase()}. + {translate('common.settings').toLowerCase()} + . { +function setBankAccountSubStep(subStep: ReimbursementAccountSubStep | null): Promise { return Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {achData: {subStep}}); } @@ -49,6 +51,13 @@ function cancelResetBankAccount() { Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {shouldShowResetModal: false}); } +/** + * Sets pressed option during connecting reimbursement account + */ +function setReimbursementAccountOptionPressed(optionPressed: ValueOf) { + Onyx.set(ONYXKEYS.REIMBURSEMENT_ACCOUNT_OPTION_PRESSED, optionPressed); +} + export { resetUSDBankAccount, resetNonUSDBankAccount, @@ -59,4 +68,5 @@ export { cancelResetBankAccount, clearReimbursementAccountDraft, setBankAccountState, + setReimbursementAccountOptionPressed, }; diff --git a/src/pages/ReimbursementAccount/utils/mapCurrencyToCountry.ts b/src/libs/mapCurrencyToCountry.ts similarity index 100% rename from src/pages/ReimbursementAccount/utils/mapCurrencyToCountry.ts rename to src/libs/mapCurrencyToCountry.ts diff --git a/src/pages/ReimbursementAccount/NonUSD/Country/index.tsx b/src/pages/ReimbursementAccount/NonUSD/Country/index.tsx new file mode 100644 index 000000000000..860df2adfbd7 --- /dev/null +++ b/src/pages/ReimbursementAccount/NonUSD/Country/index.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import CountryFullStep from '@components/SubStepForms/CountryFullStep'; + +type CountryProps = { + /** Handles back button press */ + onBackButtonPress: () => void; + + /** Handles submit button press */ + onSubmit: () => void; + + /** Array of step names */ + stepNames: readonly string[]; + + /** ID of current policy */ + policyID: string | undefined; +}; + +function Country({onBackButtonPress, onSubmit, stepNames, policyID}: CountryProps) { + return ( + + ); +} + +Country.displayName = 'Country'; + +export default Country; diff --git a/src/pages/ReimbursementAccount/NonUSD/NonUSDVerifiedBankAccountFlow.tsx b/src/pages/ReimbursementAccount/NonUSD/NonUSDVerifiedBankAccountFlow.tsx index 8d9d5a7da80a..7a74beefeb74 100644 --- a/src/pages/ReimbursementAccount/NonUSD/NonUSDVerifiedBankAccountFlow.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/NonUSDVerifiedBankAccountFlow.tsx @@ -6,7 +6,7 @@ import Agreements from './Agreements'; import BankInfo from './BankInfo/BankInfo'; import BeneficialOwnerInfo from './BeneficialOwnerInfo/BeneficialOwnerInfo'; import BusinessInfo from './BusinessInfo/BusinessInfo'; -import Country from './Country/Country'; +import Country from './Country'; import Docusign from './Docusign/Docusign'; import Finish from './Finish'; import SignerInfo from './SignerInfo'; diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx index d3877fe7bc6c..bd1e71462d27 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx @@ -46,6 +46,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type {InputID} from '@src/types/form/ReimbursementAccountForm'; +import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; import type {ACHDataReimbursementAccount} from '@src/types/onyx/ReimbursementAccount'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import ConnectedVerifiedBankAccount from './ConnectedVerifiedBankAccount'; @@ -92,19 +93,24 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy}: Reimbursemen : `${environmentURL}/${ROUTES.WORKSPACE_INITIAL.getRoute(policyIDParam, Navigation.getActiveRoute())}`; const contactMethodRoute = `${environmentURL}/${ROUTES.SETTINGS_CONTACT_METHODS.getRoute(backTo)}`; + const achData = reimbursementAccount?.achData; + const isPreviousPolicy = policyIDParam === achData?.policyID; + const hasConfirmedUSDCurrency = (reimbursementAccountDraft?.[INPUT_IDS.ADDITIONAL_DATA.COUNTRY] ?? '') !== '' || (achData?.accountNumber ?? '') !== ''; /** - The SetupWithdrawalAccount flow allows us to continue the flow from various points depending on where the - user left off. This view will refer to the achData as the single source of truth to determine which route to - display. We can also specify a specific route to navigate to via route params when the component first - mounts which will set the achData.currentStep after the account data is fetched and overwrite the logical - next step. + We main rely on `achData.currentStep` to determine the step to display in USD flow. + This data is synchronized with the BE to know which step to resume/start from. + Except for the CountryStep which exists purely in the FE. + This function is to decide if we should start from the CountryStep. */ - const achData = reimbursementAccount?.achData; - const isPreviousPolicy = policyIDParam === achData?.policyID; - // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing + const getInitialCurrentStep = () => { + if (!hasConfirmedUSDCurrency) { + return CONST.BANK_ACCOUNT.STEP.COUNTRY; + } - const currentStep = !isPreviousPolicy ? CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT : (achData?.currentStep ?? CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT); + return achData?.currentStep ?? CONST.BANK_ACCOUNT.STEP.COUNTRY; + }; + const currentStep = getInitialCurrentStep(); const [nonUSDBankAccountStep, setNonUSDBankAccountStep] = useState(null); const [USDBankAccountStep, setUSDBankAccountStep] = useState(null); @@ -245,15 +251,17 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy}: Reimbursemen Navigation.setParams({stepToOpen: getRouteForCurrentStep(currentStep)}); }, // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps - [isOffline, reimbursementAccount, route, hasACHDataBeenLoaded, shouldShowContinueSetupButton], + [isOffline, reimbursementAccount, hasACHDataBeenLoaded, shouldShowContinueSetupButton, currentStep], ); - const continueUSDVBBASetup = () => { + const continueUSDVBBASetup = useCallback(() => { + // If user comes back to the flow we never want to allow him to go through plaid again + // so we're always showing manual setup with locked numbers he can not change setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL).then(() => { setShouldShowContinueSetupButton(false); setUSDBankAccountStep(currentStep); }); - }; + }, [currentStep]); const continueNonUSDVBBASetup = () => { const isPastSignerStep = achData?.corpay?.signerFullName && achData?.corpay?.authorizedToBindClientToAgreement === undefined; @@ -299,24 +307,21 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy}: Reimbursemen } }; - const goBack = () => { - const subStep = achData?.subStep; + const goBack = useCallback(() => { const shouldShowOnfido = onfidoToken && !achData?.isOnfidoSetupComplete; switch (currentStep) { - case CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT: + case CONST.BANK_ACCOUNT.STEP.COUNTRY: if (hasInProgressVBBA()) { setShouldShowContinueSetupButton(true); } - if (subStep) { - setUSDBankAccountStep(null); - setBankAccountSubStep(null); - setPlaidEvent(null); - } else { - Navigation.goBack(); - } + setUSDBankAccountStep(null); + setBankAccountSubStep(null); + break; + case CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT: + setPlaidEvent(null); + goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.COUNTRY); break; - case CONST.BANK_ACCOUNT.STEP.COMPANY: clearOnfidoToken(); goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR); @@ -352,7 +357,7 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy}: Reimbursemen default: Navigation.dismissModal(); } - }; + }, [achData?.isOnfidoSetupComplete, achData?.state, currentStep, hasInProgressVBBA, isOffline, onfidoToken]); const isLoading = (isLoadingApp || !!account?.isLoading || (reimbursementAccount?.isLoading && !reimbursementAccount?.isCreateCorpayBankAccount)) && @@ -361,6 +366,7 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy}: Reimbursemen const shouldShowOfflineLoader = !( isOffline && [ + CONST.BANK_ACCOUNT.STEP.COUNTRY, CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT, CONST.BANK_ACCOUNT.STEP.COMPANY, CONST.BANK_ACCOUNT.STEP.REQUESTOR, diff --git a/src/pages/ReimbursementAccount/USD/BankInfo/BankInfo.tsx b/src/pages/ReimbursementAccount/USD/BankInfo/BankInfo.tsx index d3423a6f030a..1cfca7ce4e3d 100644 --- a/src/pages/ReimbursementAccount/USD/BankInfo/BankInfo.tsx +++ b/src/pages/ReimbursementAccount/USD/BankInfo/BankInfo.tsx @@ -6,8 +6,8 @@ import useSubStep from '@hooks/useSubStep'; import type {SubStepProps} from '@hooks/useSubStep/types'; import getPlaidOAuthReceivedRedirectURI from '@libs/getPlaidOAuthReceivedRedirectURI'; import getSubStepValues from '@pages/ReimbursementAccount/utils/getSubStepValues'; -import {connectBankAccountManually, connectBankAccountWithPlaid, setBankAccountSubStep} from '@userActions/BankAccounts'; -import {hideBankAccountErrors, updateReimbursementAccountDraft} from '@userActions/ReimbursementAccount'; +import {connectBankAccountManually, connectBankAccountWithPlaid} from '@userActions/BankAccounts'; +import {hideBankAccountErrors} from '@userActions/ReimbursementAccount'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {ReimbursementAccountForm} from '@src/types/form'; @@ -46,7 +46,7 @@ function BankInfo({onBackButtonPress, policyID, setUSDBankAccountStep}: BankInfo let setupType = reimbursementAccount?.achData?.subStep ?? ''; - const shouldReinitializePlaidLink = plaidLinkToken && receivedRedirectURI && setupType !== CONST.BANK_ACCOUNT.SUBSTEP.MANUAL; + const shouldReinitializePlaidLink = plaidLinkToken && receivedRedirectURI && setupType !== CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL; if (shouldReinitializePlaidLink) { setupType = CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID; } @@ -105,23 +105,8 @@ function BankInfo({onBackButtonPress, policyID, setUSDBankAccountStep}: BankInfo const handleBackButtonPress = () => { if (screenIndex === 0) { - if (bankAccountID) { - onBackButtonPress(); - } else { - const bankAccountData = { - [BANK_INFO_STEP_KEYS.ROUTING_NUMBER]: '', - [BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER]: '', - [BANK_INFO_STEP_KEYS.PLAID_MASK]: '', - [BANK_INFO_STEP_KEYS.IS_SAVINGS]: false, - [BANK_INFO_STEP_KEYS.BANK_NAME]: '', - [BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID]: '', - [BANK_INFO_STEP_KEYS.PLAID_ACCESS_TOKEN]: '', - }; - updateReimbursementAccountDraft(bankAccountData); - hideBankAccountErrors(); - setBankAccountSubStep(null); - setUSDBankAccountStep(null); - } + onBackButtonPress(); + hideBankAccountErrors(); } else { prevScreen(); } @@ -133,7 +118,7 @@ function BankInfo({onBackButtonPress, policyID, setUSDBankAccountStep}: BankInfo shouldEnablePickerAvoiding={false} handleBackButtonPress={handleBackButtonPress} headerTitle={translate('bankAccount.bankInfo')} - startStepIndex={0} + startStepIndex={1} stepNames={CONST.BANK_ACCOUNT.STEP_NAMES} > getSubStepValues(BANK_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]); const hasBankAccountData = !!reimbursementAccount?.achData?.bankAccountID; const validate = useCallback( diff --git a/src/pages/ReimbursementAccount/USD/BeneficialOwnerInfo/BeneficialOwnersStep.tsx b/src/pages/ReimbursementAccount/USD/BeneficialOwnerInfo/BeneficialOwnersStep.tsx index a0889fbce3c9..eb371cb624be 100644 --- a/src/pages/ReimbursementAccount/USD/BeneficialOwnerInfo/BeneficialOwnersStep.tsx +++ b/src/pages/ReimbursementAccount/USD/BeneficialOwnerInfo/BeneficialOwnersStep.tsx @@ -33,8 +33,8 @@ function BeneficialOwnersStep({onBackButtonPress}: BeneficialOwnersStepProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); - const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); - const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); + const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {canBeMissing: false}); + const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT, {canBeMissing: true}); const companyName = reimbursementAccount?.achData?.companyName ?? ''; const policyID = reimbursementAccount?.achData?.policyID; @@ -215,7 +215,7 @@ function BeneficialOwnersStep({onBackButtonPress}: BeneficialOwnersStepProps) { shouldEnableMaxHeight headerTitle={translate('beneficialOwnerInfoStep.companyOwner')} handleBackButtonPress={handleBackButtonPress} - startStepIndex={4} + startStepIndex={5} stepNames={CONST.BANK_ACCOUNT.STEP_NAMES} > {currentUBOSubStep === SUBSTEP.IS_USER_UBO && ( diff --git a/src/pages/ReimbursementAccount/USD/BusinessInfo/BusinessInfo.tsx b/src/pages/ReimbursementAccount/USD/BusinessInfo/BusinessInfo.tsx index 1e8b35132980..27f9d09d0b2e 100644 --- a/src/pages/ReimbursementAccount/USD/BusinessInfo/BusinessInfo.tsx +++ b/src/pages/ReimbursementAccount/USD/BusinessInfo/BusinessInfo.tsx @@ -48,8 +48,8 @@ const bodyContent: Array> = [ function BusinessInfo({onBackButtonPress}: BusinessInfoProps) { const {translate} = useLocalize(); - const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); - const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); + const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {canBeMissing: false}); + const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT, {canBeMissing: true}); const getBankAccountFields = useCallback( (fieldNames: string[]) => ({ @@ -114,7 +114,7 @@ function BusinessInfo({onBackButtonPress}: BusinessInfoProps) { shouldEnableMaxHeight headerTitle={translate('businessInfoStep.businessInfo')} handleBackButtonPress={handleBackButtonPress} - startStepIndex={3} + startStepIndex={4} stepNames={CONST.BANK_ACCOUNT.STEP_NAMES} > > = [ConfirmAgreements]; function CompleteVerification({onBackButtonPress}: CompleteVerificationProps) { const {translate} = useLocalize(); - const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); - const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); + const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {canBeMissing: false}); + const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT, {canBeMissing: true}); const values = useMemo(() => getSubStepValues(COMPLETE_VERIFICATION_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]); - const policyID = reimbursementAccount?.achData?.policyID ?? '-1'; + const policyID = reimbursementAccount?.achData?.policyID; const submit = useCallback(() => { - BankAccounts.acceptACHContractForBankAccount( - Number(reimbursementAccount?.achData?.bankAccountID ?? '-1'), + acceptACHContractForBankAccount( + Number(reimbursementAccount?.achData?.bankAccountID), { isAuthorizedToUseBankAccount: values.isAuthorizedToUseBankAccount, certifyTrueInformation: values.certifyTrueInformation, @@ -63,7 +63,7 @@ function CompleteVerification({onBackButtonPress}: CompleteVerificationProps) { shouldEnableMaxHeight headerTitle={translate('completeVerificationStep.completeVerification')} handleBackButtonPress={handleBackButtonPress} - startStepIndex={5} + startStepIndex={6} stepNames={CONST.BANK_ACCOUNT.STEP_NAMES} > void; + + /** Array of step names */ + stepNames: readonly string[]; + + /** Method to set the state of setUSDBankAccountStep */ + setUSDBankAccountStep?: (step: string | null) => void; + + /** ID of current policy */ + policyID: string | undefined; +}; + +function Country({onBackButtonPress, stepNames, setUSDBankAccountStep, policyID}: CountryProps) { + const submit = () => { + if (!setUSDBankAccountStep) { + return; + } + + setUSDBankAccountStep(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT); + goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT); + }; + + return ( + + ); +} + +Country.displayName = 'Country'; + +export default Country; diff --git a/src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/PersonalInfo.tsx b/src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/PersonalInfo.tsx index 372ca910ffae..7768cc243c68 100644 --- a/src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/PersonalInfo.tsx +++ b/src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/PersonalInfo.tsx @@ -29,8 +29,8 @@ const bodyContent: Array> = [FullName, DateOfB function PersonalInfo({onBackButtonPress}: PersonalInfoProps, ref: React.ForwardedRef) { const {translate} = useLocalize(); - const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); - const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); + const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {canBeMissing: false}); + const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT, {canBeMissing: true}); const policyID = reimbursementAccount?.achData?.policyID; const values = useMemo(() => getSubStepValues(PERSONAL_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]); @@ -75,7 +75,7 @@ function PersonalInfo({onBackButtonPress}: PersonalInfoProps, ref: React.Forward shouldEnableMaxHeight headerTitle={translate('personalInfoStep.personalInfo')} handleBackButtonPress={handleBackButtonPress} - startStepIndex={1} + startStepIndex={2} stepNames={CONST.BANK_ACCOUNT.STEP_NAMES} > diff --git a/src/pages/ReimbursementAccount/USD/USDVerifiedBankAccountFlow.tsx b/src/pages/ReimbursementAccount/USD/USDVerifiedBankAccountFlow.tsx index ee9978197721..5508c4e01b91 100644 --- a/src/pages/ReimbursementAccount/USD/USDVerifiedBankAccountFlow.tsx +++ b/src/pages/ReimbursementAccount/USD/USDVerifiedBankAccountFlow.tsx @@ -8,6 +8,7 @@ import BeneficialOwnersStep from './BeneficialOwnerInfo/BeneficialOwnersStep'; import BusinessInfo from './BusinessInfo/BusinessInfo'; import CompleteVerification from './CompleteVerification/CompleteVerification'; import ConnectBankAccount from './ConnectBankAccount/ConnectBankAccount'; +import Country from './Country'; import RequestorStep from './Requestor/RequestorStep'; type USDVerifiedBankAccountFlowProps = { @@ -29,9 +30,18 @@ function USDVerifiedBankAccountFlow({ setUSDBankAccountStep, setShouldShowConnectedVerifiedBankAccount, }: USDVerifiedBankAccountFlowProps) { - const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); + const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {canBeMissing: false}); switch (USDBankAccountStep) { + case CONST.BANK_ACCOUNT.STEP.COUNTRY: + return ( + + ); case CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT: return ( ) => { + setBankAccountSubStep(setupType); + setUSDBankAccountStep(CONST.BANK_ACCOUNT.STEP.COUNTRY); + goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.COUNTRY); + }, + [setUSDBankAccountStep], + ); + /** * optionPressed ref indicates what user selected before modal to validate account was displayed * In this hook we check if account was validated and then proceed with the option user selected @@ -129,52 +142,51 @@ function VerifiedBankAccountFlowEntryPoint({ return; } - if (optionPressed.current === CONST.BANK_ACCOUNT.SUBSTEP.MANUAL) { + if (reimbursementAccountOptionPressed === CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL) { if (isNonUSDWorkspace) { setNonUSDBankAccountStep(CONST.NON_USD_BANK_ACCOUNT.STEP.COUNTRY); + setReimbursementAccountOptionPressed(CONST.BANK_ACCOUNT.SETUP_TYPE.NONE); return; } - setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL); - setUSDBankAccountStep(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT); - } else if (optionPressed.current === CONST.BANK_ACCOUNT.SUBSTEP.PLAID) { - setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID); - setUSDBankAccountStep(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT); + prepareNextStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL); + setReimbursementAccountOptionPressed(CONST.BANK_ACCOUNT.SETUP_TYPE.NONE); + } else if (reimbursementAccountOptionPressed === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID) { openPlaidView(); + prepareNextStep(CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID); + setReimbursementAccountOptionPressed(CONST.BANK_ACCOUNT.SETUP_TYPE.NONE); } - }, [isAccountValidated, isNonUSDWorkspace, setNonUSDBankAccountStep, setUSDBankAccountStep]); + }, [isAccountValidated, isNonUSDWorkspace, prepareNextStep, reimbursementAccountOptionPressed, setNonUSDBankAccountStep]); - const handleConnectPlaid = () => { - if (isPlaidDisabled) { - return; - } + const handleConnectManually = () => { if (!isAccountValidated) { - optionPressed.current = CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID; + setReimbursementAccountOptionPressed(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL); toggleValidateCodeActionModal?.(true); return; } + if (isNonUSDWorkspace) { + setNonUSDBankAccountStep(CONST.NON_USD_BANK_ACCOUNT.STEP.COUNTRY); + return; + } + removeExistingBankAccountDetails(); - setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID); - setUSDBankAccountStep(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT); - openPlaidView(); + prepareNextStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL); }; - const handleConnectManually = () => { - if (!isAccountValidated) { - optionPressed.current = CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL; - toggleValidateCodeActionModal?.(true); + const handleConnectPlaid = () => { + if (isPlaidDisabled) { return; } - if (isNonUSDWorkspace) { - setNonUSDBankAccountStep(CONST.NON_USD_BANK_ACCOUNT.STEP.COUNTRY); + if (!isAccountValidated) { + setReimbursementAccountOptionPressed(CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID); + toggleValidateCodeActionModal?.(true); return; } removeExistingBankAccountDetails(); - setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL); - setUSDBankAccountStep(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT); + prepareNextStep(CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID); }; return ( diff --git a/src/pages/workspace/WorkspaceOverviewCurrencyPage.tsx b/src/pages/workspace/WorkspaceOverviewCurrencyPage.tsx index 7a98a7074f9d..075279ee9d2a 100644 --- a/src/pages/workspace/WorkspaceOverviewCurrencyPage.tsx +++ b/src/pages/workspace/WorkspaceOverviewCurrencyPage.tsx @@ -7,10 +7,10 @@ import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; import usePermissions from '@hooks/usePermissions'; +import mapCurrencyToCountry from '@libs/mapCurrencyToCountry'; import BankAccount from '@libs/models/BankAccount'; import Navigation from '@libs/Navigation/Navigation'; import {goBackFromInvalidPolicy} from '@libs/PolicyUtils'; -import mapCurrencyToCountry from '@pages/ReimbursementAccount/utils/mapCurrencyToCountry'; import {clearCorpayBankAccountFields} from '@userActions/BankAccounts'; import {clearDraftValues, setDraftValues} from '@userActions/FormActions'; import {isCurrencySupportedForGlobalReimbursement, setIsForcedToChangeCurrency, updateGeneralSettings} from '@userActions/Policy/Policy';