From e57ee617e9d56b39c45ac6f22f1341dbbdacc251 Mon Sep 17 00:00:00 2001 From: Michal Muzyk Date: Tue, 28 Jan 2025 08:40:20 +0100 Subject: [PATCH 01/21] feat: 50911 Continue VBBA --- .../ContinueBankAccountSetup.tsx | 10 +++- .../ReimbursementAccountPage.tsx | 38 ++++++++++++++ src/types/onyx/ReimbursementAccount.ts | 52 +++++++++---------- 3 files changed, 72 insertions(+), 28 deletions(-) diff --git a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.tsx b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.tsx index 9e1897348dab..e6e25d03bc2f 100644 --- a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.tsx +++ b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.tsx @@ -4,6 +4,7 @@ import Button from '@components/Button'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import * as Expensicons from '@components/Icon/Expensicons'; import * as Illustrations from '@components/Icon/Illustrations'; +import LottieAnimations from '@components/LottieAnimations'; import MenuItem from '@components/MenuItem'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import ScreenWrapper from '@components/ScreenWrapper'; @@ -11,6 +12,7 @@ import ScrollView from '@components/ScrollView'; import Section from '@components/Section'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; +import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import WorkspaceResetBankAccountModal from '@pages/workspace/WorkspaceResetBankAccountModal'; import * as BankAccounts from '@userActions/BankAccounts'; @@ -33,6 +35,7 @@ type ContinueBankAccountStepProps = { }; function ContinueBankAccountSetup({policyName = '', onBackButtonPress, reimbursementAccount, onContinuePress}: ContinueBankAccountStepProps) { + const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); const errors = reimbursementAccount?.errors ?? {}; @@ -53,14 +56,16 @@ function ContinueBankAccountSetup({policyName = '', onBackButtonPress, reimburse
- {translate('workspace.bankAccount.youreAlmostDone')} + {translate('workspace.bankAccount.youreAlmostDone')}
- - - {!!reimbursementAccount?.shouldShowResetModal && } - - ); -} - -ContinueBankAccountSetup.displayName = 'ContinueBankAccountSetup'; - -export default ContinueBankAccountSetup; diff --git a/src/pages/ReimbursementAccount/NonUSD/Country/substeps/Confirmation.tsx b/src/pages/ReimbursementAccount/NonUSD/Country/substeps/Confirmation.tsx index f5103e871ac2..b75cc1045525 100644 --- a/src/pages/ReimbursementAccount/NonUSD/Country/substeps/Confirmation.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/Country/substeps/Confirmation.tsx @@ -13,9 +13,9 @@ import useLocalize from '@hooks/useLocalize'; import type {SubStepProps} from '@hooks/useSubStep/types'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; -import * as ValidationUtils from '@libs/ValidationUtils'; +import {getFieldRequiredErrors} from '@libs/ValidationUtils'; import mapCurrencyToCountry from '@pages/ReimbursementAccount/utils/mapCurrencyToCountry'; -import * as FormActions from '@userActions/FormActions'; +import {clearErrors, setDraftValues} from '@userActions/FormActions'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; @@ -50,16 +50,16 @@ function Confirmation({onNext}: SubStepProps) { }; const handleSelectingCountry = (country: string) => { - FormActions.setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[COUNTRY]: country}); + setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[COUNTRY]: country}); setSelectedCountry(country); }; const validate = useCallback((values: FormOnyxValues): FormInputErrors => { - return ValidationUtils.getFieldRequiredErrors(values, [COUNTRY]); + return getFieldRequiredErrors(values, [COUNTRY]); }, []); useEffect(() => { - FormActions.clearErrors(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM); + clearErrors(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM); }); useEffect(() => { @@ -67,7 +67,7 @@ function Confirmation({onNext}: SubStepProps) { return; } - FormActions.setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[COUNTRY]: currencyMappedToCountry}); + setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[COUNTRY]: currencyMappedToCountry}); setSelectedCountry(currencyMappedToCountry); }, [currency, currencyMappedToCountry]); diff --git a/src/pages/ReimbursementAccount/NonUSD/NonUSDVerifiedBankAccountFlow.tsx b/src/pages/ReimbursementAccount/NonUSD/NonUSDVerifiedBankAccountFlow.tsx index bb0f3a0d6420..6ee62276cb44 100644 --- a/src/pages/ReimbursementAccount/NonUSD/NonUSDVerifiedBankAccountFlow.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/NonUSDVerifiedBankAccountFlow.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import Navigation from '@navigation/Navigation'; import CONST from '@src/CONST'; import Agreements from './Agreements'; import BankInfo from './BankInfo/BankInfo'; @@ -11,7 +10,7 @@ import SignerInfo from './SignerInfo'; type NonUSDVerifiedBankAccountFlowProps = { nonUSDBankAccountStep: string; - setNonUSDBankAccountStep: (step: string) => void; + setNonUSDBankAccountStep: (step: string | null) => void; }; function NonUSDVerifiedBankAccountFlow({nonUSDBankAccountStep, setNonUSDBankAccountStep}: NonUSDVerifiedBankAccountFlowProps) { @@ -43,7 +42,7 @@ function NonUSDVerifiedBankAccountFlow({nonUSDBankAccountStep, setNonUSDBankAcco const nonUSDBankAccountsGoBack = () => { switch (nonUSDBankAccountStep) { case CONST.NON_USD_BANK_ACCOUNT.STEP.COUNTRY: - Navigation.goBack(); + setNonUSDBankAccountStep(null); break; case CONST.NON_USD_BANK_ACCOUNT.STEP.BANK_INFO: setNonUSDBankAccountStep(CONST.NON_USD_BANK_ACCOUNT.STEP.COUNTRY); diff --git a/src/pages/ReimbursementAccount/NonUSD/SignerInfo/substeps/UploadDocuments.tsx b/src/pages/ReimbursementAccount/NonUSD/SignerInfo/substeps/UploadDocuments.tsx index 617f04b6f3fa..449d5a74a9d2 100644 --- a/src/pages/ReimbursementAccount/NonUSD/SignerInfo/substeps/UploadDocuments.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/SignerInfo/substeps/UploadDocuments.tsx @@ -13,7 +13,7 @@ import type {SubStepProps} from '@hooks/useSubStep/types'; import useThemeStyles from '@hooks/useThemeStyles'; import {getFieldRequiredErrors} from '@libs/ValidationUtils'; import WhyLink from '@pages/ReimbursementAccount/NonUSD/WhyLink'; -import * as FormActions from '@userActions/FormActions'; +import {setDraftValues} from '@userActions/FormActions'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; @@ -49,24 +49,24 @@ function UploadDocuments({onNext, isEditing}: UploadDocumentsProps) { }); const handleSelectIDFile = (files: FileObject[]) => { - FormActions.setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[SIGNER_COPY_OF_ID]: [...uploadedIDs, ...files]}); + setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[SIGNER_COPY_OF_ID]: [...uploadedIDs, ...files]}); setUploadedID((prev) => [...prev, ...files]); }; const handleRemoveIDFile = (fileUri: string) => { const newUploadedIDs = uploadedIDs.filter((file) => file.uri !== fileUri); - FormActions.setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[SIGNER_COPY_OF_ID]: newUploadedIDs}); + setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[SIGNER_COPY_OF_ID]: newUploadedIDs}); setUploadedID(newUploadedIDs); }; const handleSelectProofOfAddressFile = (files: FileObject[]) => { - FormActions.setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[SIGNER_ADDRESS_PROOF]: [...uploadedProofsOfAddress, ...files]}); + setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[SIGNER_ADDRESS_PROOF]: [...uploadedProofsOfAddress, ...files]}); setUploadedProofOfAddress((prev) => [...prev, ...files]); }; const handleRemoveProofOfAddressFile = (fileUri: string) => { const newUploadedProofsOfAddress = uploadedProofsOfAddress.filter((file) => file.uri !== fileUri); - FormActions.setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[SIGNER_ADDRESS_PROOF]: newUploadedProofsOfAddress}); + setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[SIGNER_ADDRESS_PROOF]: newUploadedProofsOfAddress}); setUploadedProofOfAddress(newUploadedProofsOfAddress); }; diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx index 8850d1d91421..87cef8d3dadd 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx @@ -11,6 +11,7 @@ import ReimbursementAccountLoadingIndicator from '@components/ReimbursementAccou import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; import useBeforeRemove from '@hooks/useBeforeRemove'; +import useEnvironment from '@hooks/useEnvironment'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import usePrevious from '@hooks/usePrevious'; @@ -69,8 +70,14 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy}: Reimbursemen const prevReimbursementAccount = usePrevious(reimbursementAccount); const prevIsOffline = usePrevious(isOffline); const policyCurrency = policy?.outputCurrency ?? ''; - const hasUnsupportedCurrency = policyCurrency !== CONST.CURRENCY.USD && !SUPPORTED_FOREIGN_CURRENCIES.includes(policyCurrency); - const hasForeignCurrency = SUPPORTED_FOREIGN_CURRENCIES.includes(policyCurrency); + const {isDevelopment} = useEnvironment(); + const [isDebugModeEnabled] = useOnyx(ONYXKEYS.USER, {selector: (user) => !!user?.isDebugModeEnabled}); + + // TODO once nonUSD flow is complete update the flags below to reflect all supported currencies, this will be updated in - https://github.com/Expensify/App/issues/50912 + // TODO remove isDevelopment and isDebugModeEnabled flags once nonUSD flow is complete, this will be updated in - https://github.com/Expensify/App/issues/50912 + const hasUnsupportedCurrency = + isDevelopment || isDebugModeEnabled ? policyCurrency !== CONST.CURRENCY.USD && !SUPPORTED_FOREIGN_CURRENCIES.includes(policyCurrency) : policyCurrency !== CONST.CURRENCY.USD; + const hasForeignCurrency = isDevelopment || isDebugModeEnabled ? SUPPORTED_FOREIGN_CURRENCIES.includes(policyCurrency) : false; /** The SetupWithdrawalAccount flow allows us to continue the flow from various points depending on where the @@ -81,6 +88,7 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy}: Reimbursemen */ const achData = reimbursementAccount?.achData; const isPreviousPolicy = policyIDParam === achData?.policyID; + // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing const currentStep = !isPreviousPolicy ? CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT : achData?.currentStep || CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT; const [nonUSDBankAccountStep, setNonUSDBankAccountStep] = useState(null); @@ -163,6 +171,13 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy}: Reimbursemen // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); // The empty dependency array ensures this runs only once after the component mounts. + useEffect(() => { + if (!isPreviousPolicy) { + return; + } + setShouldShowContinueSetupButton(getShouldShowContinueSetupButtonValue()); + }, [getShouldShowContinueSetupButtonValue, isPreviousPolicy]); + useEffect( () => { // Check for network change from offline to online @@ -256,6 +271,7 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy}: Reimbursemen setShouldShowContinueSetupButton(true); } if (subStep) { + setUSDBankAccountStep(null); setBankAccountSubStep(null); setPlaidEvent(null); } else { @@ -362,7 +378,7 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy}: Reimbursemen Navigation.goBack()} + onBackButtonPress={Navigation.goBack} /> {errorText} @@ -388,6 +404,7 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy}: Reimbursemen onBackButtonPress={goBack} requestorStepRef={requestorStepRef} onfidoToken={onfidoToken} + setUSDBankAccountStep={setUSDBankAccountStep} /> ); } diff --git a/src/pages/ReimbursementAccount/USD/BankInfo/BankInfo.tsx b/src/pages/ReimbursementAccount/USD/BankInfo/BankInfo.tsx index 8bb02fdda4d0..380d050e2059 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 * as BankAccounts from '@userActions/BankAccounts'; -import * as ReimbursementAccountUtils from '@userActions/ReimbursementAccount'; +import {connectBankAccountManually, connectBankAccountWithPlaid, setBankAccountSubStep} from '@userActions/BankAccounts'; +import {hideBankAccountErrors, updateReimbursementAccountDraft} from '@userActions/ReimbursementAccount'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {ReimbursementAccountForm} from '@src/types/form'; @@ -21,14 +21,21 @@ type BankInfoProps = { /** Current Policy ID */ policyID: string; + + /** Set the step of the USD verified bank account flow */ + setUSDBankAccountStep: (step: string | null) => void; +}; + +type BankInfoSubStepProps = SubStepProps & { + setUSDBankAccountStep: (step: string | null) => void; }; const BANK_INFO_STEP_KEYS = INPUT_IDS.BANK_INFO_STEP; -const manualSubsteps: Array> = [Manual]; -const plaidSubsteps: Array> = [Plaid]; +const manualSubSteps: Array> = [Manual]; +const plaidSubSteps: Array> = [Plaid]; const receivedRedirectURI = getPlaidOAuthReceivedRedirectURI(); -function BankInfo({onBackButtonPress, policyID}: BankInfoProps) { +function BankInfo({onBackButtonPress, policyID, setUSDBankAccountStep}: BankInfoProps) { const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); const [plaidLinkToken] = useOnyx(ONYXKEYS.PLAID_LINK_TOKEN); @@ -49,7 +56,7 @@ function BankInfo({onBackButtonPress, policyID}: BankInfoProps) { (submitData: unknown) => { const data = submitData as ReimbursementAccountForm; if (setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL) { - BankAccounts.connectBankAccountManually( + connectBankAccountManually( bankAccountID, { [BANK_INFO_STEP_KEYS.ROUTING_NUMBER]: data[BANK_INFO_STEP_KEYS.ROUTING_NUMBER] ?? '', @@ -63,7 +70,7 @@ function BankInfo({onBackButtonPress, policyID}: BankInfoProps) { policyID, ); } else if (setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID) { - BankAccounts.connectBankAccountWithPlaid( + connectBankAccountWithPlaid( bankAccountID, { [BANK_INFO_STEP_KEYS.ROUTING_NUMBER]: data[BANK_INFO_STEP_KEYS.ROUTING_NUMBER] ?? '', @@ -81,8 +88,8 @@ function BankInfo({onBackButtonPress, policyID}: BankInfoProps) { [setupType, bankAccountID, policyID], ); - const bodyContent = setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID ? plaidSubsteps : manualSubsteps; - const {componentToRender: SubStep, isEditing, screenIndex, nextScreen, prevScreen, moveTo} = useSubStep({bodyContent, startFrom: 0, onFinished: submit}); + const bodyContent = setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID ? plaidSubSteps : manualSubSteps; + const {componentToRender: SubStep, isEditing, screenIndex, nextScreen, prevScreen, moveTo} = useSubStep({bodyContent, startFrom: 0, onFinished: submit}); // Some services user connects to via Plaid return dummy account numbers and routing numbers e.g. Chase // In this case we need to redirect user to manual flow to enter real account number and routing number @@ -110,9 +117,10 @@ function BankInfo({onBackButtonPress, policyID}: BankInfoProps) { [BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID]: '', [BANK_INFO_STEP_KEYS.PLAID_ACCESS_TOKEN]: '', }; - ReimbursementAccountUtils.updateReimbursementAccountDraft(bankAccountData); - ReimbursementAccountUtils.hideBankAccountErrors(); - BankAccounts.setBankAccountSubStep(null); + updateReimbursementAccountDraft(bankAccountData); + hideBankAccountErrors(); + setBankAccountSubStep(null); + setUSDBankAccountStep(null); } } else { prevScreen(); @@ -132,6 +140,7 @@ function BankInfo({onBackButtonPress, policyID}: BankInfoProps) { isEditing={isEditing} onNext={nextScreen} onMove={moveTo} + setUSDBankAccountStep={setUSDBankAccountStep} /> ); diff --git a/src/pages/ReimbursementAccount/USD/BankInfo/substeps/Plaid.tsx b/src/pages/ReimbursementAccount/USD/BankInfo/substeps/Plaid.tsx index 906bc8de8496..99b1fdd02a85 100644 --- a/src/pages/ReimbursementAccount/USD/BankInfo/substeps/Plaid.tsx +++ b/src/pages/ReimbursementAccount/USD/BankInfo/substeps/Plaid.tsx @@ -7,16 +7,18 @@ import InputWrapper from '@components/Form/InputWrapper'; import useLocalize from '@hooks/useLocalize'; import type {SubStepProps} from '@hooks/useSubStep/types'; import useThemeStyles from '@hooks/useThemeStyles'; -import * as BankAccounts from '@userActions/BankAccounts'; -import * as ReimbursementAccountActions from '@userActions/ReimbursementAccount'; +import {setBankAccountSubStep, validatePlaidSelection} from '@userActions/BankAccounts'; +import {updateReimbursementAccountDraft} from '@userActions/ReimbursementAccount'; import ONYXKEYS from '@src/ONYXKEYS'; import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; -type PlaidProps = SubStepProps; +type PlaidProps = SubStepProps & { + setUSDBankAccountStep: (step: string | null) => void; +}; const BANK_INFO_STEP_KEYS = INPUT_IDS.BANK_INFO_STEP; -function Plaid({onNext}: PlaidProps) { +function Plaid({onNext, setUSDBankAccountStep}: PlaidProps) { const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); const [plaidData] = useOnyx(ONYXKEYS.PLAID_DATA); @@ -41,7 +43,7 @@ function Plaid({onNext}: PlaidProps) { [BANK_INFO_STEP_KEYS.PLAID_ACCESS_TOKEN]: plaidData?.[BANK_INFO_STEP_KEYS.PLAID_ACCESS_TOKEN] ?? '', }; - ReimbursementAccountActions.updateReimbursementAccountDraft(bankAccountData); + updateReimbursementAccountDraft(bankAccountData); onNext(bankAccountData); }, [plaidData, reimbursementAccountDraft, onNext]); @@ -52,13 +54,19 @@ function Plaid({onNext}: PlaidProps) { if (isFocused || plaidBankAccounts.length) { return; } - BankAccounts.setBankAccountSubStep(null); - }, [isFocused, plaidData]); + setBankAccountSubStep(null); + setUSDBankAccountStep(null); + }, [isFocused, plaidData, setUSDBankAccountStep]); + + const handlePlaidExit = () => { + setBankAccountSubStep(null); + setUSDBankAccountStep(null); + }; return ( { - ReimbursementAccountActions.updateReimbursementAccountDraft({plaidAccountID}); + updateReimbursementAccountDraft({plaidAccountID}); }} plaidData={plaidData} - onExitPlaid={() => { - BankAccounts.setBankAccountSubStep(null); - }} + onExitPlaid={handlePlaidExit} allowDebit bankAccountID={bankAccountID} selectedPlaidAccountID={selectedPlaidAccountID} diff --git a/src/pages/ReimbursementAccount/USD/USDVerifiedBankAccountFlow.tsx b/src/pages/ReimbursementAccount/USD/USDVerifiedBankAccountFlow.tsx index e9f767b809b6..d31dfe03a834 100644 --- a/src/pages/ReimbursementAccount/USD/USDVerifiedBankAccountFlow.tsx +++ b/src/pages/ReimbursementAccount/USD/USDVerifiedBankAccountFlow.tsx @@ -17,9 +17,10 @@ type USDVerifiedBankAccountFlowProps = { onBackButtonPress: () => void; requestorStepRef: React.RefObject; onfidoToken: string; + setUSDBankAccountStep: (step: string | null) => void; }; -function USDVerifiedBankAccountFlow({USDBankAccountStep, policyID = '', onBackButtonPress, requestorStepRef, onfidoToken}: USDVerifiedBankAccountFlowProps) { +function USDVerifiedBankAccountFlow({USDBankAccountStep, policyID = '', onBackButtonPress, requestorStepRef, onfidoToken, setUSDBankAccountStep}: USDVerifiedBankAccountFlowProps) { const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); switch (USDBankAccountStep) { @@ -28,6 +29,7 @@ function USDVerifiedBankAccountFlow({USDBankAccountStep, policyID = '', onBackBu ); case CONST.BANK_ACCOUNT.STEP.REQUESTOR: diff --git a/src/pages/ReimbursementAccount/VerifiedBankAccountFlowEntryPoint.tsx b/src/pages/ReimbursementAccount/VerifiedBankAccountFlowEntryPoint.tsx index 34b8aa920253..31607cf0b7eb 100644 --- a/src/pages/ReimbursementAccount/VerifiedBankAccountFlowEntryPoint.tsx +++ b/src/pages/ReimbursementAccount/VerifiedBankAccountFlowEntryPoint.tsx @@ -53,6 +53,7 @@ type VerifiedBankAccountFlowEntryPointProps = { /** Should show the continue setup button */ shouldShowContinueSetupButton: boolean | null; + /** Whether the bank account has non USD currency */ hasForeignCurrency: boolean; /** Should ValidateCodeActionModal be displayed or not */ @@ -61,9 +62,10 @@ type VerifiedBankAccountFlowEntryPointProps = { /** Toggle ValidateCodeActionModal */ toggleValidateCodeActionModal?: (isVisible: boolean) => void; - /** Set should show continue setup button */ + /** Set step for non USD flow */ setNonUSDBankAccountStep: (shouldShowContinueSetupButton: string | null) => void; + /** Set step for USD flow */ setUSDBankAccountStep: (shouldShowContinueSetupButton: string | null) => void; }; diff --git a/src/pages/workspace/WorkspaceResetBankAccountModal.tsx b/src/pages/workspace/WorkspaceResetBankAccountModal.tsx index c372510b5c45..64d13a354ff9 100644 --- a/src/pages/workspace/WorkspaceResetBankAccountModal.tsx +++ b/src/pages/workspace/WorkspaceResetBankAccountModal.tsx @@ -6,7 +6,7 @@ import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import BankAccount from '@libs/models/BankAccount'; -import * as BankAccounts from '@userActions/BankAccounts'; +import {cancelResetFreePlanBankAccount, resetFreePlanBankAccount} from '@userActions/BankAccounts'; import ONYXKEYS from '@src/ONYXKEYS'; import type * as OnyxTypes from '@src/types/onyx'; @@ -45,9 +45,8 @@ function WorkspaceResetBankAccountModal({reimbursementAccount, session}: Workspa ) } danger - onCancel={BankAccounts.cancelResetFreePlanBankAccount} - // TODO check if it will also reset non USD account - onConfirm={() => BankAccounts.resetFreePlanBankAccount(bankAccountID, session, achData?.policyID ?? '-1')} + onCancel={cancelResetFreePlanBankAccount} + onConfirm={() => resetFreePlanBankAccount(bankAccountID, session, achData?.policyID ?? '-1')} shouldShowCancelButton isVisible /> From 491730ba3281fbe036233471045784d53cebb32b Mon Sep 17 00:00:00 2001 From: Michal Muzyk Date: Tue, 4 Feb 2025 14:44:19 +0100 Subject: [PATCH 11/21] linter and testing --- .../RestartBankAccountSetupParams.ts | 2 +- .../resetFreePlanBankAccount.ts | 2 +- .../WorkspaceResetBankAccountModal.tsx | 20 ++++++------------- 3 files changed, 8 insertions(+), 16 deletions(-) diff --git a/src/libs/API/parameters/RestartBankAccountSetupParams.ts b/src/libs/API/parameters/RestartBankAccountSetupParams.ts index 5cb4fa132d10..e41a87056c4d 100644 --- a/src/libs/API/parameters/RestartBankAccountSetupParams.ts +++ b/src/libs/API/parameters/RestartBankAccountSetupParams.ts @@ -1,7 +1,7 @@ type RestartBankAccountSetupParams = { bankAccountID: number; ownerEmail: string; - policyID: string; + policyID: string | undefined; }; export default RestartBankAccountSetupParams; diff --git a/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.ts b/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.ts index 5bb51f22d64a..2c36ae7e5d6a 100644 --- a/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.ts +++ b/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.ts @@ -17,7 +17,7 @@ Onyx.connect({ /** * Reset user's reimbursement account. This will delete the bank account. */ -function resetFreePlanBankAccount(bankAccountID: number | undefined, session: OnyxEntry, policyID: string) { +function resetFreePlanBankAccount(bankAccountID: number | undefined, session: OnyxEntry, policyID: string | undefined) { if (!bankAccountID) { throw new Error('Missing bankAccountID when attempting to reset free plan bank account'); } diff --git a/src/pages/workspace/WorkspaceResetBankAccountModal.tsx b/src/pages/workspace/WorkspaceResetBankAccountModal.tsx index 64d13a354ff9..9451ac58c864 100644 --- a/src/pages/workspace/WorkspaceResetBankAccountModal.tsx +++ b/src/pages/workspace/WorkspaceResetBankAccountModal.tsx @@ -1,6 +1,6 @@ import React from 'react'; import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import ConfirmModal from '@components/ConfirmModal'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; @@ -10,19 +10,15 @@ import {cancelResetFreePlanBankAccount, resetFreePlanBankAccount} from '@userAct import ONYXKEYS from '@src/ONYXKEYS'; import type * as OnyxTypes from '@src/types/onyx'; -type WorkspaceResetBankAccountModalOnyxProps = { - /** Session info for the currently logged in user. */ - session: OnyxEntry; -}; - -type WorkspaceResetBankAccountModalProps = WorkspaceResetBankAccountModalOnyxProps & { +type WorkspaceResetBankAccountModalProps = { /** Reimbursement account data */ reimbursementAccount: OnyxEntry; }; -function WorkspaceResetBankAccountModal({reimbursementAccount, session}: WorkspaceResetBankAccountModalProps) { +function WorkspaceResetBankAccountModal({reimbursementAccount}: WorkspaceResetBankAccountModalProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); + const [session] = useOnyx(ONYXKEYS.SESSION); const achData = reimbursementAccount?.achData; const isInOpenState = achData?.state === BankAccount.STATE.OPEN; const bankAccountID = achData?.bankAccountID; @@ -46,7 +42,7 @@ function WorkspaceResetBankAccountModal({reimbursementAccount, session}: Workspa } danger onCancel={cancelResetFreePlanBankAccount} - onConfirm={() => resetFreePlanBankAccount(bankAccountID, session, achData?.policyID ?? '-1')} + onConfirm={() => resetFreePlanBankAccount(bankAccountID, session, achData?.policyID)} shouldShowCancelButton isVisible /> @@ -55,8 +51,4 @@ function WorkspaceResetBankAccountModal({reimbursementAccount, session}: Workspa WorkspaceResetBankAccountModal.displayName = 'WorkspaceResetBankAccountModal'; -export default withOnyx({ - session: { - key: ONYXKEYS.SESSION, - }, -})(WorkspaceResetBankAccountModal); +export default WorkspaceResetBankAccountModal; From 9fba8607a4917409eb496d3d2555be4ac7d6ddb7 Mon Sep 17 00:00:00 2001 From: Michal Muzyk Date: Wed, 5 Feb 2025 10:19:12 +0100 Subject: [PATCH 12/21] connected screen --- ...t.tsx => ConnectedVerifiedBankAccount.tsx} | 24 +++++++++---------- .../ReimbursementAccountPage.tsx | 13 +++++++++- .../ConnectBankAccount/ConnectBankAccount.tsx | 4 ++-- .../USD/USDVerifiedBankAccountFlow.tsx | 8 ------- 4 files changed, 26 insertions(+), 23 deletions(-) rename src/pages/ReimbursementAccount/{USD/EnableBankAccount/EnableBankAccount.tsx => ConnectedVerifiedBankAccount.tsx} (83%) diff --git a/src/pages/ReimbursementAccount/USD/EnableBankAccount/EnableBankAccount.tsx b/src/pages/ReimbursementAccount/ConnectedVerifiedBankAccount.tsx similarity index 83% rename from src/pages/ReimbursementAccount/USD/EnableBankAccount/EnableBankAccount.tsx rename to src/pages/ReimbursementAccount/ConnectedVerifiedBankAccount.tsx index f1ffcab0f548..c53a0756f012 100644 --- a/src/pages/ReimbursementAccount/USD/EnableBankAccount/EnableBankAccount.tsx +++ b/src/pages/ReimbursementAccount/ConnectedVerifiedBankAccount.tsx @@ -2,8 +2,8 @@ import React from 'react'; import type {OnyxEntry} from 'react-native-onyx'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import getBankIcon from '@components/Icon/BankIcons'; -import * as Expensicons from '@components/Icon/Expensicons'; -import * as Illustrations from '@components/Icon/Illustrations'; +import {Close} from '@components/Icon/Expensicons'; +import {ThumbsUpStars} from '@components/Icon/Illustrations'; import MenuItem from '@components/MenuItem'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import ScreenWrapper from '@components/ScreenWrapper'; @@ -13,12 +13,12 @@ import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import WorkspaceResetBankAccountModal from '@pages/workspace/WorkspaceResetBankAccountModal'; -import * as BankAccounts from '@userActions/ReimbursementAccount'; +import {requestResetFreePlanBankAccount, resetReimbursementAccount} from '@userActions/ReimbursementAccount'; import CONST from '@src/CONST'; import type {ReimbursementAccount} from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; -type EnableBankAccountProps = { +type ConnectedVerifiedBankAccountProps = { /** Bank account currently in setup */ reimbursementAccount: OnyxEntry; @@ -26,7 +26,7 @@ type EnableBankAccountProps = { onBackButtonPress: () => void; }; -function EnableBankAccount({reimbursementAccount, onBackButtonPress}: EnableBankAccountProps) { +function ConnectedVerifiedBankAccount({reimbursementAccount, onBackButtonPress}: ConnectedVerifiedBankAccountProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -42,7 +42,7 @@ function EnableBankAccount({reimbursementAccount, onBackButtonPress}: EnableBank return (
{translate('workspace.bankAccount.accountDescriptionWithCards')} @@ -91,6 +91,6 @@ function EnableBankAccount({reimbursementAccount, onBackButtonPress}: EnableBank ); } -EnableBankAccount.displayName = 'EnableStep'; +ConnectedVerifiedBankAccount.displayName = 'ConnectedVerifiedBankAccount'; -export default EnableBankAccount; +export default ConnectedVerifiedBankAccount; diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx index 87cef8d3dadd..754815410492 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx @@ -42,6 +42,7 @@ import type SCREENS from '@src/SCREENS'; import type {InputID} from '@src/types/form/ReimbursementAccountForm'; import type {ACHDataReimbursementAccount} from '@src/types/onyx/ReimbursementAccount'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; +import ConnectedVerifiedBankAccount from './ConnectedVerifiedBankAccount'; import NonUSDVerifiedBankAccountFlow from './NonUSD/NonUSDVerifiedBankAccountFlow'; import USDVerifiedBankAccountFlow from './USD/USDVerifiedBankAccountFlow'; import getFieldsForStep from './USD/utils/getFieldsForStep'; @@ -175,8 +176,9 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy}: Reimbursemen if (!isPreviousPolicy) { return; } + setShouldShowContinueSetupButton(getShouldShowContinueSetupButtonValue()); - }, [getShouldShowContinueSetupButtonValue, isPreviousPolicy]); + }, [achData?.currentStep, getShouldShowContinueSetupButtonValue, isPreviousPolicy]); useEffect( () => { @@ -409,6 +411,15 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy}: Reimbursemen ); } + if (achData?.currentStep === CONST.BANK_ACCOUNT.STEP.ENABLE) { + return ( + + ); + } + return ( diff --git a/src/pages/ReimbursementAccount/USD/USDVerifiedBankAccountFlow.tsx b/src/pages/ReimbursementAccount/USD/USDVerifiedBankAccountFlow.tsx index d31dfe03a834..330cf51b8edc 100644 --- a/src/pages/ReimbursementAccount/USD/USDVerifiedBankAccountFlow.tsx +++ b/src/pages/ReimbursementAccount/USD/USDVerifiedBankAccountFlow.tsx @@ -8,7 +8,6 @@ import BeneficialOwnersStep from './BeneficialOwnerInfo/BeneficialOwnersStep'; import BusinessInfo from './BusinessInfo/BusinessInfo'; import CompleteVerification from './CompleteVerification/CompleteVerification'; import ConnectBankAccount from './ConnectBankAccount/ConnectBankAccount'; -import EnableBankAccount from './EnableBankAccount/EnableBankAccount'; import RequestorStep from './Requestor/RequestorStep'; type USDVerifiedBankAccountFlowProps = { @@ -48,13 +47,6 @@ function USDVerifiedBankAccountFlow({USDBankAccountStep, policyID = '', onBackBu return ; case CONST.BANK_ACCOUNT.STEP.VALIDATION: return ; - case CONST.BANK_ACCOUNT.STEP.ENABLE: - return ( - - ); default: return null; } From 0d9fc92e99d4ceb53517a71d44ff0f5bf0597c60 Mon Sep 17 00:00:00 2001 From: Michal Muzyk Date: Wed, 5 Feb 2025 13:16:30 +0100 Subject: [PATCH 13/21] more edgecases --- .../ConnectedVerifiedBankAccount.tsx | 16 +++++++- .../ReimbursementAccountPage.tsx | 38 ++++++++++--------- .../VerifiedBankAccountFlowEntryPoint.tsx | 5 ++- .../WorkspaceResetBankAccountModal.tsx | 22 ++++++++++- 4 files changed, 58 insertions(+), 23 deletions(-) diff --git a/src/pages/ReimbursementAccount/ConnectedVerifiedBankAccount.tsx b/src/pages/ReimbursementAccount/ConnectedVerifiedBankAccount.tsx index c53a0756f012..40e06dcb180d 100644 --- a/src/pages/ReimbursementAccount/ConnectedVerifiedBankAccount.tsx +++ b/src/pages/ReimbursementAccount/ConnectedVerifiedBankAccount.tsx @@ -24,9 +24,15 @@ type ConnectedVerifiedBankAccountProps = { /** Method to trigger when pressing back button of the header */ onBackButtonPress: () => void; + + /** Method to set the state of shouldShowConnectedVerifiedBankAccount */ + setShouldShowConnectedVerifiedBankAccount: (shouldShowConnectedVerifiedBankAccount: boolean) => void; + + /** Method to set the state of shouldShowConnectedVerifiedBankAccount */ + setUSDBankAccountStep: (step: string | null) => void; }; -function ConnectedVerifiedBankAccount({reimbursementAccount, onBackButtonPress}: ConnectedVerifiedBankAccountProps) { +function ConnectedVerifiedBankAccount({reimbursementAccount, onBackButtonPress, setShouldShowConnectedVerifiedBankAccount, setUSDBankAccountStep}: ConnectedVerifiedBankAccountProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -86,7 +92,13 @@ function ConnectedVerifiedBankAccount({reimbursementAccount, onBackButtonPress}:
- {shouldShowResetModal && } + {shouldShowResetModal && ( + + )} ); } diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx index 754815410492..2f46f55efa85 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx @@ -113,19 +113,14 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy}: Reimbursemen return !!achData?.bankAccountID && !!achData?.created; }, [achData?.bankAccountID, achData?.created]); - /** - * Calculates the state used to show the "Continue with setup" view. - * for non USD workspace we check if first big step was passed - * for USD workspace, if a bank account setup is already in progress and no specific further step was passed in the url - * we'll show the workspace bank account reset modal if the user wishes to start over - */ + /** Calculates the state used to show the "Continue with setup" view. */ const getShouldShowContinueSetupButtonValue = useCallback(() => { if (hasForeignCurrency) { - return hasInProgressNonUSDVBBA() && nonUSDBankAccountStep === CONST.NON_USD_BANK_ACCOUNT.STEP.COUNTRY; + return hasInProgressNonUSDVBBA(); } return hasInProgressVBBA(); - }, [hasForeignCurrency, hasInProgressNonUSDVBBA, hasInProgressVBBA, nonUSDBankAccountStep]); + }, [hasForeignCurrency, hasInProgressNonUSDVBBA, hasInProgressVBBA]); /** When this page is first opened, `reimbursementAccount` prop might not yet be fully loaded from Onyx. @@ -136,6 +131,7 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy}: Reimbursemen */ const [hasACHDataBeenLoaded, setHasACHDataBeenLoaded] = useState(reimbursementAccount !== CONST.REIMBURSEMENT_ACCOUNT.DEFAULT_DATA && isPreviousPolicy); const [shouldShowContinueSetupButton, setShouldShowContinueSetupButton] = useState(() => getShouldShowContinueSetupButtonValue()); + const [shouldShowConnectedVerifiedBankAccount, setShouldShowConnectedVerifiedBankAccount] = useState(false); /** * Retrieve verified business bank account currently being set up. @@ -177,8 +173,10 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy}: Reimbursemen return; } + // TODO double check condition for non USD accounts - will be done in https://github.com/Expensify/App/issues/50912 + setShouldShowConnectedVerifiedBankAccount(hasForeignCurrency ? !!achData?.corpay?.consentToPrivacyNotice : achData?.currentStep === CONST.BANK_ACCOUNT.STEP.ENABLE); setShouldShowContinueSetupButton(getShouldShowContinueSetupButtonValue()); - }, [achData?.currentStep, getShouldShowContinueSetupButtonValue, isPreviousPolicy]); + }, [achData?.corpay?.consentToPrivacyNotice, achData?.currentStep, getShouldShowContinueSetupButtonValue, hasForeignCurrency, isPreviousPolicy]); useEffect( () => { @@ -389,6 +387,17 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy}: Reimbursemen ); } + if (shouldShowConnectedVerifiedBankAccount) { + return ( + + ); + } + if (hasForeignCurrency && nonUSDBankAccountStep !== null) { return ( - ); - } - return ( ; + + /** Method to set the state of shouldShowConnectedVerifiedBankAccount */ + setShouldShowConnectedVerifiedBankAccount?: (shouldShowConnectedVerifiedBankAccount: boolean) => void; + + /** Method to set the state of shouldShowConnectedVerifiedBankAccount */ + setUSDBankAccountStep?: (step: string | null) => void; }; -function WorkspaceResetBankAccountModal({reimbursementAccount}: WorkspaceResetBankAccountModalProps) { +function WorkspaceResetBankAccountModal({reimbursementAccount, setShouldShowConnectedVerifiedBankAccount, setUSDBankAccountStep}: WorkspaceResetBankAccountModalProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const [session] = useOnyx(ONYXKEYS.SESSION); @@ -24,6 +30,18 @@ function WorkspaceResetBankAccountModal({reimbursementAccount}: WorkspaceResetBa const bankAccountID = achData?.bankAccountID; const bankShortName = `${achData?.addressName ?? ''} ${(achData?.accountNumber ?? '').slice(-4)}`; + const handleConfirm = () => { + resetFreePlanBankAccount(bankAccountID, session, achData?.policyID); + + if (setShouldShowConnectedVerifiedBankAccount) { + setShouldShowConnectedVerifiedBankAccount(false); + } + + if (setUSDBankAccountStep) { + setUSDBankAccountStep(null); + } + }; + return ( resetFreePlanBankAccount(bankAccountID, session, achData?.policyID)} + onConfirm={handleConfirm} shouldShowCancelButton isVisible /> From 2a65b1abdbc841d979cd825a0cdcf901019806c6 Mon Sep 17 00:00:00 2001 From: Michal Muzyk Date: Thu, 6 Feb 2025 08:52:10 +0100 Subject: [PATCH 14/21] more edgecases --- .../VerifiedBankAccountFlowEntryPoint.tsx | 40 +++++++++++++++---- 1 file changed, 33 insertions(+), 7 deletions(-) diff --git a/src/pages/ReimbursementAccount/VerifiedBankAccountFlowEntryPoint.tsx b/src/pages/ReimbursementAccount/VerifiedBankAccountFlowEntryPoint.tsx index 3b97e2cf2ef6..a8c2c8fa73f3 100644 --- a/src/pages/ReimbursementAccount/VerifiedBankAccountFlowEntryPoint.tsx +++ b/src/pages/ReimbursementAccount/VerifiedBankAccountFlowEntryPoint.tsx @@ -1,4 +1,4 @@ -import React, {useMemo} from 'react'; +import React, {useEffect, useMemo, useRef} from 'react'; import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import {useOnyx} from 'react-native-onyx'; @@ -94,6 +94,7 @@ function VerifiedBankAccountFlowEntryPoint({ const errors = reimbursementAccount?.errors ?? {}; const pendingAction = reimbursementAccount?.pendingAction ?? null; const [loginList] = useOnyx(ONYXKEYS.LOGIN_LIST); + const optionPressed = useRef(''); const contactMethod = account?.primaryLogin ?? ''; const loginData = useMemo(() => loginList?.[contactMethod], [loginList, contactMethod]); @@ -116,11 +117,36 @@ function VerifiedBankAccountFlowEntryPoint({ updateReimbursementAccountDraft(bankAccountData); }; + /** + * 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 + * note: non USD accounts only have manual option available + */ + useEffect(() => { + if (!account?.validated) { + return; + } + + if (optionPressed.current === CONST.BANK_ACCOUNT.SUBSTEP.MANUAL) { + if (hasForeignCurrency) { + setNonUSDBankAccountStep(CONST.NON_USD_BANK_ACCOUNT.STEP.COUNTRY); + return; + } + + setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL); + setUSDBankAccountStep(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT); + } else if (optionPressed.current === CONST.BANK_ACCOUNT.SUBSTEP.PLAID) { + setUSDBankAccountStep(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT); + openPlaidView(); + } + }, [account?.validated, hasForeignCurrency, setNonUSDBankAccountStep, setUSDBankAccountStep]); + const handleConnectPlaid = () => { if (isPlaidDisabled) { return; } if (!account?.validated) { + optionPressed.current = CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID; toggleValidateCodeActionModal?.(true); return; } @@ -132,22 +158,22 @@ function VerifiedBankAccountFlowEntryPoint({ }; const handleConnectManually = () => { - if (hasForeignCurrency) { - setNonUSDBankAccountStep(CONST.NON_USD_BANK_ACCOUNT.STEP.COUNTRY); + if (!account?.validated) { + optionPressed.current = CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL; + toggleValidateCodeActionModal?.(true); return; } - if (!account?.validated) { - toggleValidateCodeActionModal?.(true); + if (hasForeignCurrency) { + setNonUSDBankAccountStep(CONST.NON_USD_BANK_ACCOUNT.STEP.COUNTRY); return; } + removeExistingBankAccountDetails(); setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL); setUSDBankAccountStep(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT); }; - console.log(account); - return ( Date: Thu, 6 Feb 2025 15:56:18 +0100 Subject: [PATCH 15/21] business info default values and some renaming --- src/components/Form/types.ts | 2 +- .../AddressFormFields.tsx | 1 + .../NonUSD/Agreements/index.tsx | 2 +- .../{substeps => subSteps}/Confirmation.tsx | 0 .../NonUSD/BankInfo/BankInfo.tsx | 14 ++-- .../AccountHolderDetails.tsx | 4 +- .../BankAccountDetails.tsx | 0 .../{substeps => subSteps}/Confirmation.tsx | 4 +- .../UploadStatement.tsx | 0 .../NonUSD/BusinessInfo/BusinessInfo.tsx | 29 ++++---- .../{substeps => subSteps}/Address.tsx | 10 +-- .../AverageReimbursement.tsx | 3 +- .../{substeps => subSteps}/BusinessType.tsx | 5 +- .../{substeps => subSteps}/Confirmation.tsx | 4 +- .../ContactInformation.tsx | 5 +- .../IncorporationLocation.tsx | 4 +- .../{substeps => subSteps}/Name.tsx | 3 +- .../{substeps => subSteps}/PaymentVolume.tsx | 3 +- .../RegistrationNumber.tsx | 2 +- .../{substeps => subSteps}/TaxIDEINNumber.tsx | 3 +- .../NonUSD/Country/Country.tsx | 2 +- .../{substeps => subSteps}/Confirmation.tsx | 0 .../NonUSD/SignerInfo/index.tsx | 10 +-- .../{substeps => subSteps}/Confirmation.tsx | 4 +- .../{substeps => subSteps}/DateOfBirth.tsx | 0 .../{substeps => subSteps}/JobTitle.tsx | 0 .../{substeps => subSteps}/Name.tsx | 0 .../UploadDocuments.tsx | 0 .../getInitialSubStepForBusinessInfoStep.ts | 62 ++++++++++++++++ .../ReimbursementAccountPage.tsx | 1 + .../USD/BankInfo/BankInfo.tsx | 8 +-- .../{substeps => subSteps}/Manual.tsx | 0 .../BankInfo/{substeps => subSteps}/Plaid.tsx | 0 .../BeneficialOwnersStep.tsx | 70 +++++++++---------- .../AddressUBO.tsx | 0 .../ConfirmationUBO.tsx | 0 .../DateOfBirthUBO.tsx | 0 .../LegalNameUBO.tsx | 0 .../SocialSecurityNumberUBO.tsx | 0 .../CompanyOwnersListUBO.tsx | 4 +- .../USD/BusinessInfo/BusinessInfo.tsx | 30 ++++---- .../AddressBusiness.tsx | 0 .../ConfirmationBusiness.tsx | 4 +- .../IncorporationDateBusiness.tsx | 0 .../IncorporationStateBusiness.tsx | 0 .../{substeps => subSteps}/NameBusiness.tsx | 0 .../PhoneNumberBusiness.tsx | 0 .../{substeps => subSteps}/TaxIdBusiness.tsx | 0 .../BusinessTypeSelectorModal.tsx | 0 .../TypeBusiness/BusinessTypePicker/index.tsx | 0 .../TypeBusiness/BusinessTypePicker/types.ts | 0 .../TypeBusiness/TypeBusiness.tsx | 0 .../WebsiteBusiness.tsx | 0 .../CompleteVerification.tsx | 8 +-- .../ConfirmAgreements.tsx | 0 .../ConnectBankAccount/ConnectBankAccount.tsx | 10 ++- .../Requestor/PersonalInfo/PersonalInfo.tsx | 22 +++--- .../{substeps => subSteps}/Address.tsx | 0 .../{substeps => subSteps}/Confirmation.tsx | 4 +- .../{substeps => subSteps}/DateOfBirth.tsx | 0 .../{substeps => subSteps}/FullName.tsx | 0 .../SocialSecurityNumber.tsx | 0 .../USD/Requestor/RequestorStep.tsx | 2 +- .../USD/USDVerifiedBankAccountFlow.tsx | 19 ++++- ...ts => getInitialSubStepForBusinessInfo.ts} | 10 +-- ...ts => getInitialSubStepForPersonalInfo.ts} | 6 +- .../utils/getSubStepValues.ts | 24 +++++++ .../utils/getSubstepValues.ts | 21 ------ src/types/onyx/ReimbursementAccount.ts | 2 +- 69 files changed, 254 insertions(+), 167 deletions(-) rename src/pages/ReimbursementAccount/NonUSD/Agreements/{substeps => subSteps}/Confirmation.tsx (100%) rename src/pages/ReimbursementAccount/NonUSD/BankInfo/{substeps => subSteps}/AccountHolderDetails.tsx (97%) rename src/pages/ReimbursementAccount/NonUSD/BankInfo/{substeps => subSteps}/BankAccountDetails.tsx (100%) rename src/pages/ReimbursementAccount/NonUSD/BankInfo/{substeps => subSteps}/Confirmation.tsx (96%) rename src/pages/ReimbursementAccount/NonUSD/BankInfo/{substeps => subSteps}/UploadStatement.tsx (100%) rename src/pages/ReimbursementAccount/NonUSD/BusinessInfo/{substeps => subSteps}/Address.tsx (91%) rename src/pages/ReimbursementAccount/NonUSD/BusinessInfo/{substeps => subSteps}/AverageReimbursement.tsx (95%) rename src/pages/ReimbursementAccount/NonUSD/BusinessInfo/{substeps => subSteps}/BusinessType.tsx (93%) rename src/pages/ReimbursementAccount/NonUSD/BusinessInfo/{substeps => subSteps}/Confirmation.tsx (98%) rename src/pages/ReimbursementAccount/NonUSD/BusinessInfo/{substeps => subSteps}/ContactInformation.tsx (92%) rename src/pages/ReimbursementAccount/NonUSD/BusinessInfo/{substeps => subSteps}/IncorporationLocation.tsx (98%) rename src/pages/ReimbursementAccount/NonUSD/BusinessInfo/{substeps => subSteps}/Name.tsx (93%) rename src/pages/ReimbursementAccount/NonUSD/BusinessInfo/{substeps => subSteps}/PaymentVolume.tsx (95%) rename src/pages/ReimbursementAccount/NonUSD/BusinessInfo/{substeps => subSteps}/RegistrationNumber.tsx (97%) rename src/pages/ReimbursementAccount/NonUSD/BusinessInfo/{substeps => subSteps}/TaxIDEINNumber.tsx (92%) rename src/pages/ReimbursementAccount/NonUSD/Country/{substeps => subSteps}/Confirmation.tsx (100%) rename src/pages/ReimbursementAccount/NonUSD/SignerInfo/{substeps => subSteps}/Confirmation.tsx (95%) rename src/pages/ReimbursementAccount/NonUSD/SignerInfo/{substeps => subSteps}/DateOfBirth.tsx (100%) rename src/pages/ReimbursementAccount/NonUSD/SignerInfo/{substeps => subSteps}/JobTitle.tsx (100%) rename src/pages/ReimbursementAccount/NonUSD/SignerInfo/{substeps => subSteps}/Name.tsx (100%) rename src/pages/ReimbursementAccount/NonUSD/SignerInfo/{substeps => subSteps}/UploadDocuments.tsx (100%) create mode 100644 src/pages/ReimbursementAccount/NonUSD/utils/getInitialSubStepForBusinessInfoStep.ts rename src/pages/ReimbursementAccount/USD/BankInfo/{substeps => subSteps}/Manual.tsx (100%) rename src/pages/ReimbursementAccount/USD/BankInfo/{substeps => subSteps}/Plaid.tsx (100%) rename src/pages/ReimbursementAccount/USD/BeneficialOwnerInfo/{substeps/BeneficialOwnerDetailsFormSubsteps => subSteps/BeneficialOwnerDetailsFormSubSteps}/AddressUBO.tsx (100%) rename src/pages/ReimbursementAccount/USD/BeneficialOwnerInfo/{substeps/BeneficialOwnerDetailsFormSubsteps => subSteps/BeneficialOwnerDetailsFormSubSteps}/ConfirmationUBO.tsx (100%) rename src/pages/ReimbursementAccount/USD/BeneficialOwnerInfo/{substeps/BeneficialOwnerDetailsFormSubsteps => subSteps/BeneficialOwnerDetailsFormSubSteps}/DateOfBirthUBO.tsx (100%) rename src/pages/ReimbursementAccount/USD/BeneficialOwnerInfo/{substeps/BeneficialOwnerDetailsFormSubsteps => subSteps/BeneficialOwnerDetailsFormSubSteps}/LegalNameUBO.tsx (100%) rename src/pages/ReimbursementAccount/USD/BeneficialOwnerInfo/{substeps/BeneficialOwnerDetailsFormSubsteps => subSteps/BeneficialOwnerDetailsFormSubSteps}/SocialSecurityNumberUBO.tsx (100%) rename src/pages/ReimbursementAccount/USD/BeneficialOwnerInfo/{substeps => subSteps}/CompanyOwnersListUBO.tsx (97%) rename src/pages/ReimbursementAccount/USD/BusinessInfo/{substeps => subSteps}/AddressBusiness.tsx (100%) rename src/pages/ReimbursementAccount/USD/BusinessInfo/{substeps => subSteps}/ConfirmationBusiness.tsx (97%) rename src/pages/ReimbursementAccount/USD/BusinessInfo/{substeps => subSteps}/IncorporationDateBusiness.tsx (100%) rename src/pages/ReimbursementAccount/USD/BusinessInfo/{substeps => subSteps}/IncorporationStateBusiness.tsx (100%) rename src/pages/ReimbursementAccount/USD/BusinessInfo/{substeps => subSteps}/NameBusiness.tsx (100%) rename src/pages/ReimbursementAccount/USD/BusinessInfo/{substeps => subSteps}/PhoneNumberBusiness.tsx (100%) rename src/pages/ReimbursementAccount/USD/BusinessInfo/{substeps => subSteps}/TaxIdBusiness.tsx (100%) rename src/pages/ReimbursementAccount/USD/BusinessInfo/{substeps => subSteps}/TypeBusiness/BusinessTypePicker/BusinessTypeSelectorModal.tsx (100%) rename src/pages/ReimbursementAccount/USD/BusinessInfo/{substeps => subSteps}/TypeBusiness/BusinessTypePicker/index.tsx (100%) rename src/pages/ReimbursementAccount/USD/BusinessInfo/{substeps => subSteps}/TypeBusiness/BusinessTypePicker/types.ts (100%) rename src/pages/ReimbursementAccount/USD/BusinessInfo/{substeps => subSteps}/TypeBusiness/TypeBusiness.tsx (100%) rename src/pages/ReimbursementAccount/USD/BusinessInfo/{substeps => subSteps}/WebsiteBusiness.tsx (100%) rename src/pages/ReimbursementAccount/USD/CompleteVerification/{substeps => subSteps}/ConfirmAgreements.tsx (100%) rename src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/{substeps => subSteps}/Address.tsx (100%) rename src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/{substeps => subSteps}/Confirmation.tsx (95%) rename src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/{substeps => subSteps}/DateOfBirth.tsx (100%) rename src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/{substeps => subSteps}/FullName.tsx (100%) rename src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/{substeps => subSteps}/SocialSecurityNumber.tsx (100%) rename src/pages/ReimbursementAccount/USD/utils/{getInitialSubstepForBusinessInfo.ts => getInitialSubStepForBusinessInfo.ts} (74%) rename src/pages/ReimbursementAccount/USD/utils/{getInitialSubstepForPersonalInfo.ts => getInitialSubStepForPersonalInfo.ts} (80%) create mode 100644 src/pages/ReimbursementAccount/utils/getSubStepValues.ts delete mode 100644 src/pages/ReimbursementAccount/utils/getSubstepValues.ts diff --git a/src/components/Form/types.ts b/src/components/Form/types.ts index 0fc0a199ce52..34161c53ba8c 100644 --- a/src/components/Form/types.ts +++ b/src/components/Form/types.ts @@ -27,7 +27,7 @@ import type TimeModalPicker from '@components/TimeModalPicker'; import type UploadFile from '@components/UploadFile'; import type ValuePicker from '@components/ValuePicker'; import type ConstantSelector from '@pages/Debug/ConstantSelector'; -import type BusinessTypePicker from '@pages/ReimbursementAccount/USD/BusinessInfo/substeps/TypeBusiness/BusinessTypePicker'; +import type BusinessTypePicker from '@pages/ReimbursementAccount/USD/BusinessInfo/subSteps/TypeBusiness/BusinessTypePicker'; import type DimensionTypeSelector from '@pages/workspace/accounting/intacct/import/DimensionTypeSelector'; import type NetSuiteCustomFieldMappingPicker from '@pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteCustomFieldMappingPicker'; import type NetSuiteCustomListPicker from '@pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteCustomListPicker'; diff --git a/src/pages/ReimbursementAccount/AddressFormFields.tsx b/src/pages/ReimbursementAccount/AddressFormFields.tsx index c095e439cbd8..95cd11a478ab 100644 --- a/src/pages/ReimbursementAccount/AddressFormFields.tsx +++ b/src/pages/ReimbursementAccount/AddressFormFields.tsx @@ -167,6 +167,7 @@ function AddressFormFields({ modalHeaderTitle={translate('countryStep.selectCountry')} searchInputTitle={translate('countryStep.findCountry')} value={values?.country} + defaultValue={defaultValues?.country} onValueChange={handleCountryChange} stateInputIDToReset={inputKeys.state ?? 'stateInput'} /> diff --git a/src/pages/ReimbursementAccount/NonUSD/Agreements/index.tsx b/src/pages/ReimbursementAccount/NonUSD/Agreements/index.tsx index 605157e2fe33..5cabb20771c8 100644 --- a/src/pages/ReimbursementAccount/NonUSD/Agreements/index.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/Agreements/index.tsx @@ -5,7 +5,7 @@ import useLocalize from '@hooks/useLocalize'; import useSubStep from '@hooks/useSubStep'; import type {SubStepProps} from '@hooks/useSubStep/types'; import CONST from '@src/CONST'; -import Confirmation from './substeps/Confirmation'; +import Confirmation from './subSteps/Confirmation'; type AgreementsProps = { /** Handles back button press */ diff --git a/src/pages/ReimbursementAccount/NonUSD/Agreements/substeps/Confirmation.tsx b/src/pages/ReimbursementAccount/NonUSD/Agreements/subSteps/Confirmation.tsx similarity index 100% rename from src/pages/ReimbursementAccount/NonUSD/Agreements/substeps/Confirmation.tsx rename to src/pages/ReimbursementAccount/NonUSD/Agreements/subSteps/Confirmation.tsx diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx index 91771521c089..f7f207546f55 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx @@ -1,5 +1,5 @@ -import type {ComponentType} from 'react'; import React, {useEffect} from 'react'; +import type {ComponentType} from 'react'; import {useOnyx} from 'react-native-onyx'; import InteractiveStepWrapper from '@components/InteractiveStepWrapper'; import useLocalize from '@hooks/useLocalize'; @@ -8,12 +8,12 @@ import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; import {clearReimbursementAccountBankCreation, createCorpayBankAccount, getCorpayBankAccountFields} from '@userActions/BankAccounts'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; import type {ReimbursementAccountForm} from '@src/types/form/ReimbursementAccountForm'; -import AccountHolderDetails from './substeps/AccountHolderDetails'; -import BankAccountDetails from './substeps/BankAccountDetails'; -import Confirmation from './substeps/Confirmation'; -import UploadStatement from './substeps/UploadStatement'; +import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; +import AccountHolderDetails from './subSteps/AccountHolderDetails'; +import BankAccountDetails from './subSteps/BankAccountDetails'; +import Confirmation from './subSteps/Confirmation'; +import UploadStatement from './subSteps/UploadStatement'; import type {BankInfoSubStepProps} from './types'; const {COUNTRY} = INPUT_IDS.ADDITIONAL_DATA; @@ -35,7 +35,7 @@ function BankInfo({onBackButtonPress, onSubmit}: BankInfoProps) { const policyID = reimbursementAccount?.achData?.policyID; const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`); const currency = policy?.outputCurrency ?? ''; - const country = reimbursementAccountDraft?.[COUNTRY] ?? reimbursementAccountDraft?.[COUNTRY] ?? ''; + const country = reimbursementAccount?.achData?.[COUNTRY] ?? ''; const submit = () => { const {formFields, isLoading, isSuccess, ...corpayData} = corpayFields ?? {}; diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/substeps/AccountHolderDetails.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/AccountHolderDetails.tsx similarity index 97% rename from src/pages/ReimbursementAccount/NonUSD/BankInfo/substeps/AccountHolderDetails.tsx rename to src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/AccountHolderDetails.tsx index 268356dee063..5cbeb629d9c6 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BankInfo/substeps/AccountHolderDetails.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/AccountHolderDetails.tsx @@ -11,7 +11,7 @@ import useLocalize from '@hooks/useLocalize'; import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit'; import useThemeStyles from '@hooks/useThemeStyles'; import type {BankInfoSubStepProps} from '@pages/ReimbursementAccount/NonUSD/BankInfo/types'; -import getSubstepValues from '@pages/ReimbursementAccount/utils/getSubstepValues'; +import getSubStepValues from '@pages/ReimbursementAccount/utils/getSubStepValues'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {ReimbursementAccountForm} from '@src/types/form/ReimbursementAccountForm'; @@ -35,7 +35,7 @@ function AccountHolderDetails({onNext, isEditing, corpayFields}: BankInfoSubStep const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); - const defaultValues = useMemo(() => getSubstepValues(subStepKeys ?? {}, reimbursementAccountDraft, reimbursementAccount), [subStepKeys, reimbursementAccount, reimbursementAccountDraft]); + const defaultValues = useMemo(() => getSubStepValues(subStepKeys ?? {}, reimbursementAccountDraft, reimbursementAccount), [subStepKeys, reimbursementAccount, reimbursementAccountDraft]); const handleSubmit = useReimbursementAccountStepFormSubmit({ fieldIds: fieldIds as Array>, diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/substeps/BankAccountDetails.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/BankAccountDetails.tsx similarity index 100% rename from src/pages/ReimbursementAccount/NonUSD/BankInfo/substeps/BankAccountDetails.tsx rename to src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/BankAccountDetails.tsx diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/substeps/Confirmation.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/Confirmation.tsx similarity index 96% rename from src/pages/ReimbursementAccount/NonUSD/BankInfo/substeps/Confirmation.tsx rename to src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/Confirmation.tsx index ac31fd54e45b..9aeac7be6c67 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BankInfo/substeps/Confirmation.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/Confirmation.tsx @@ -7,7 +7,7 @@ import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import type {BankInfoSubStepProps} from '@pages/ReimbursementAccount/NonUSD/BankInfo/types'; -import getSubstepValues from '@pages/ReimbursementAccount/utils/getSubstepValues'; +import getSubStepValues from '@pages/ReimbursementAccount/utils/getSubStepValues'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {ReimbursementAccountForm} from '@src/types/form/ReimbursementAccountForm'; @@ -27,7 +27,7 @@ function Confirmation({onNext, onMove, corpayFields}: BankInfoSubStepProps) { }); return keys; }, [corpayFields]); - const values = useMemo(() => getSubstepValues(inputKeys, reimbursementAccountDraft, reimbursementAccount), [inputKeys, reimbursementAccount, reimbursementAccountDraft]); + const values = useMemo(() => getSubStepValues(inputKeys, reimbursementAccountDraft, reimbursementAccount), [inputKeys, reimbursementAccount, reimbursementAccountDraft]); const items = useMemo( () => ( diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/substeps/UploadStatement.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/UploadStatement.tsx similarity index 100% rename from src/pages/ReimbursementAccount/NonUSD/BankInfo/substeps/UploadStatement.tsx rename to src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/UploadStatement.tsx diff --git a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/BusinessInfo.tsx b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/BusinessInfo.tsx index 4dc6b05196d0..29a06bd1a3c5 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/BusinessInfo.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/BusinessInfo.tsx @@ -6,21 +6,22 @@ import useLocalize from '@hooks/useLocalize'; import useSubStep from '@hooks/useSubStep'; import type {SubStepProps} from '@hooks/useSubStep/types'; import type {SaveCorpayOnboardingCompanyDetails} from '@libs/API/parameters/SaveCorpayOnboardingCompanyDetailsParams'; -import getSubstepValues from '@pages/ReimbursementAccount/utils/getSubstepValues'; +import getInitialSubStepForBusinessInfoStep from '@pages/ReimbursementAccount/NonUSD/utils/getInitialSubStepForBusinessInfoStep'; +import getSubStepValues from '@pages/ReimbursementAccount/utils/getSubStepValues'; import {clearReimbursementAccountSaveCorpayOnboardingCompanyDetails, getCorpayOnboardingFields, saveCorpayOnboardingCompanyDetails} from '@userActions/BankAccounts'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; -import Address from './substeps/Address'; -import AverageReimbursement from './substeps/AverageReimbursement'; -import BusinessType from './substeps/BusinessType'; -import Confirmation from './substeps/Confirmation'; -import ContactInformation from './substeps/ContactInformation'; -import IncorporationLocation from './substeps/IncorporationLocation'; -import Name from './substeps/Name'; -import PaymentVolume from './substeps/PaymentVolume'; -import RegistrationNumber from './substeps/RegistrationNumber'; -import TaxIDEINNumber from './substeps/TaxIDEINNumber'; +import Address from './subSteps/Address'; +import AverageReimbursement from './subSteps/AverageReimbursement'; +import BusinessType from './subSteps/BusinessType'; +import Confirmation from './subSteps/Confirmation'; +import ContactInformation from './subSteps/ContactInformation'; +import IncorporationLocation from './subSteps/IncorporationLocation'; +import Name from './subSteps/Name'; +import PaymentVolume from './subSteps/PaymentVolume'; +import RegistrationNumber from './subSteps/RegistrationNumber'; +import TaxIDEINNumber from './subSteps/TaxIDEINNumber'; type BusinessInfoProps = { /** Handles back button press */ @@ -72,9 +73,11 @@ function BusinessInfo({onBackButtonPress, onSubmit}: BusinessInfoProps) { const policyID = reimbursementAccount?.achData?.policyID; const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`); const currency = policy?.outputCurrency ?? ''; - const businessInfoStepValues = useMemo(() => getSubstepValues(INPUT_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]); + const businessInfoStepValues = useMemo(() => getSubStepValues(INPUT_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]); const bankAccountID = reimbursementAccount?.achData?.bankAccountID ?? CONST.DEFAULT_NUMBER_ID; + const startFrom = useMemo(() => getInitialSubStepForBusinessInfoStep(businessInfoStepValues), [businessInfoStepValues]); + const country = reimbursementAccount?.achData?.[INPUT_IDS.ADDITIONAL_DATA.COUNTRY] ?? reimbursementAccountDraft?.[INPUT_IDS.ADDITIONAL_DATA.COUNTRY] ?? ''; useEffect(() => { @@ -115,7 +118,7 @@ function BusinessInfo({onBackButtonPress, onSubmit}: BusinessInfoProps) { }; }, [reimbursementAccount, onSubmit]); - const {componentToRender: SubStep, isEditing, screenIndex, nextScreen, prevScreen, moveTo, goToTheLastStep} = useSubStep({bodyContent, startFrom: 0, onFinished: submit}); + const {componentToRender: SubStep, isEditing, screenIndex, nextScreen, prevScreen, moveTo, goToTheLastStep} = useSubStep({bodyContent, startFrom, onFinished: submit}); const handleBackButtonPress = () => { if (isEditing) { diff --git a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/Address.tsx b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/subSteps/Address.tsx similarity index 91% rename from src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/Address.tsx rename to src/pages/ReimbursementAccount/NonUSD/BusinessInfo/subSteps/Address.tsx index 997c14644eb8..07ece7fcf0a9 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/Address.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/subSteps/Address.tsx @@ -4,7 +4,7 @@ import AddressStep from '@components/SubStepForms/AddressStep'; import useLocalize from '@hooks/useLocalize'; import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit'; import type {SubStepProps} from '@hooks/useSubStep/types'; -import getSubstepValues from '@pages/ReimbursementAccount/utils/getSubstepValues'; +import getSubStepValues from '@pages/ReimbursementAccount/utils/getSubStepValues'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; @@ -29,10 +29,10 @@ function Address({onNext, onMove, isEditing}: AddressProps) { const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); - const onyxValues = useMemo(() => getSubstepValues(INPUT_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]); + const onyxValues = useMemo(() => getSubStepValues(INPUT_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]); - const businessStepCountryDraftValue = onyxValues[COMPANY_COUNTRY_CODE]; - const countryStepCountryDraftValue = reimbursementAccountDraft?.[INPUT_IDS.ADDITIONAL_DATA.COUNTRY] ?? ''; + const businessStepCountryDraftValue = onyxValues[COMPANY_COUNTRY_CODE] ?? ''; + const countryStepCountryDraftValue = reimbursementAccount?.achData?.[INPUT_IDS.ADDITIONAL_DATA.COUNTRY] ?? ''; const countryInitialValue = businessStepCountryDraftValue !== '' && businessStepCountryDraftValue !== countryStepCountryDraftValue ? businessStepCountryDraftValue : countryStepCountryDraftValue; @@ -41,7 +41,7 @@ function Address({onNext, onMove, isEditing}: AddressProps) { city: onyxValues[COMPANY_CITY] ?? '', state: onyxValues[COMPANY_STATE] ?? '', zipCode: onyxValues[COMPANY_POSTAL_CODE] ?? '', - country: businessStepCountryDraftValue ?? countryInitialValue, + country: onyxValues[COMPANY_COUNTRY_CODE] ?? countryInitialValue, }; // Has to be stored in state and updated on country change due to the fact that we can't relay on onyxValues when user is editing the form (draft values are not being saved in that case) diff --git a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/AverageReimbursement.tsx b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/subSteps/AverageReimbursement.tsx similarity index 95% rename from src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/AverageReimbursement.tsx rename to src/pages/ReimbursementAccount/NonUSD/BusinessInfo/subSteps/AverageReimbursement.tsx index 38c85b1a2197..ddf7bcfc9241 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/AverageReimbursement.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/subSteps/AverageReimbursement.tsx @@ -22,7 +22,6 @@ function AverageReimbursement({onNext, isEditing}: AverageReimbursementProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); - const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); const [corpayOnboardingFields] = useOnyx(ONYXKEYS.CORPAY_ONBOARDING_FIELDS); const policyID = reimbursementAccount?.achData?.policyID; const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`); @@ -39,7 +38,7 @@ function AverageReimbursement({onNext, isEditing}: AverageReimbursementProps) { }, {} as Record); }, [corpayOnboardingFields]); - const tradeVolumeDefaultValue = reimbursementAccount?.achData?.corpay?.[TRADE_VOLUME] ?? reimbursementAccountDraft?.[TRADE_VOLUME] ?? ''; + const tradeVolumeDefaultValue = reimbursementAccount?.achData?.corpay?.[TRADE_VOLUME] ?? ''; const validate = useCallback((values: FormOnyxValues): FormInputErrors => { return getFieldRequiredErrors(values, STEP_FIELDS); diff --git a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/BusinessType.tsx b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/subSteps/BusinessType.tsx similarity index 93% rename from src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/BusinessType.tsx rename to src/pages/ReimbursementAccount/NonUSD/BusinessInfo/subSteps/BusinessType.tsx index ce9f9ca13804..793748b37b15 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/BusinessType.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/subSteps/BusinessType.tsx @@ -23,7 +23,6 @@ function BusinessType({onNext, isEditing}: BusinessTypeProps) { const styles = useThemeStyles(); const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); - const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); const [corpayOnboardingFields] = useOnyx(ONYXKEYS.CORPAY_ONBOARDING_FIELDS); const incorporationTypeListOptions = useMemo(() => { @@ -48,8 +47,8 @@ function BusinessType({onNext, isEditing}: BusinessTypeProps) { }, {} as Record); }, [corpayOnboardingFields]); - const incorporationTypeDefaultValue = reimbursementAccount?.achData?.corpay?.[APPLICANT_TYPE_ID] ?? reimbursementAccountDraft?.[APPLICANT_TYPE_ID] ?? ''; - const businessCategoryDefaultValue = reimbursementAccount?.achData?.corpay?.[BUSINESS_CATEGORY] ?? reimbursementAccountDraft?.[BUSINESS_CATEGORY] ?? ''; + const incorporationTypeDefaultValue = reimbursementAccount?.achData?.corpay?.[APPLICANT_TYPE_ID] ?? ''; + const businessCategoryDefaultValue = reimbursementAccount?.achData?.corpay?.[BUSINESS_CATEGORY] ?? ''; const validate = useCallback((values: FormOnyxValues): FormInputErrors => { return getFieldRequiredErrors(values, STEP_FIELDS); diff --git a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/Confirmation.tsx b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/subSteps/Confirmation.tsx similarity index 98% rename from src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/Confirmation.tsx rename to src/pages/ReimbursementAccount/NonUSD/BusinessInfo/subSteps/Confirmation.tsx index bb3f0450b9df..7a54d5ffca2b 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/Confirmation.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/subSteps/Confirmation.tsx @@ -11,7 +11,7 @@ import useLocalize from '@hooks/useLocalize'; import type {SubStepProps} from '@hooks/useSubStep/types'; import useThemeStyles from '@hooks/useThemeStyles'; import {getLatestErrorMessage} from '@libs/ErrorUtils'; -import getSubstepValues from '@pages/ReimbursementAccount/utils/getSubstepValues'; +import getSubStepValues from '@pages/ReimbursementAccount/utils/getSubStepValues'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; @@ -52,7 +52,7 @@ function Confirmation({onNext, onMove}: SubStepProps) { const [corpayOnboardingFields] = useOnyx(ONYXKEYS.CORPAY_ONBOARDING_FIELDS); const error = getLatestErrorMessage(reimbursementAccount); - const values = useMemo(() => getSubstepValues(BUSINESS_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]); + const values = useMemo(() => getSubStepValues(BUSINESS_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]); const paymentVolume = useMemo( () => displayStringValue(corpayOnboardingFields?.picklists.AnnualVolumeRange ?? [], values[ANNUAL_VOLUME]), diff --git a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/ContactInformation.tsx b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/subSteps/ContactInformation.tsx similarity index 92% rename from src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/ContactInformation.tsx rename to src/pages/ReimbursementAccount/NonUSD/BusinessInfo/subSteps/ContactInformation.tsx index 2567311f7eca..a41d5056fb55 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/ContactInformation.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/subSteps/ContactInformation.tsx @@ -24,10 +24,9 @@ function ContactInformation({onNext, isEditing}: ContactInformationProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); - const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); - const phoneNumberDefaultValue = reimbursementAccount?.achData?.corpay?.[BUSINESS_CONTACT_NUMBER] ?? reimbursementAccountDraft?.[BUSINESS_CONTACT_NUMBER] ?? ''; - const confirmationEmailDefaultValue = reimbursementAccount?.achData?.corpay?.[BUSINESS_CONFIRMATION_EMAIL] ?? reimbursementAccountDraft?.[BUSINESS_CONFIRMATION_EMAIL] ?? ''; + const phoneNumberDefaultValue = reimbursementAccount?.achData?.corpay?.[BUSINESS_CONTACT_NUMBER] ?? ''; + const confirmationEmailDefaultValue = reimbursementAccount?.achData?.corpay?.[BUSINESS_CONFIRMATION_EMAIL] ?? ''; const validate = useCallback( (values: FormOnyxValues): FormInputErrors => { diff --git a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/IncorporationLocation.tsx b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/subSteps/IncorporationLocation.tsx similarity index 98% rename from src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/IncorporationLocation.tsx rename to src/pages/ReimbursementAccount/NonUSD/BusinessInfo/subSteps/IncorporationLocation.tsx index 0eb335817744..83f287fbf8e3 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/IncorporationLocation.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/subSteps/IncorporationLocation.tsx @@ -11,7 +11,7 @@ import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccoun import type {SubStepProps} from '@hooks/useSubStep/types'; import useThemeStyles from '@hooks/useThemeStyles'; import {getFieldRequiredErrors} from '@libs/ValidationUtils'; -import getSubstepValues from '@pages/ReimbursementAccount/utils/getSubstepValues'; +import getSubStepValues from '@pages/ReimbursementAccount/utils/getSubStepValues'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; @@ -41,7 +41,7 @@ function IncorporationLocation({onNext, isEditing}: IncorporationLocationProps) const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); const onyxValues = useMemo( () => - getSubstepValues( + getSubStepValues( {FORMATION_INCORPORATION_COUNTRY_CODE, FORMATION_INCORPORATION_STATE, COMPANY_COUNTRY: COMPANY_COUNTRY_CODE, COMPANY_STATE}, reimbursementAccountDraft, reimbursementAccount, diff --git a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/Name.tsx b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/subSteps/Name.tsx similarity index 93% rename from src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/Name.tsx rename to src/pages/ReimbursementAccount/NonUSD/BusinessInfo/subSteps/Name.tsx index fa4b0cb54d4a..61b49a7ec7da 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/Name.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/subSteps/Name.tsx @@ -19,8 +19,7 @@ function Name({onNext, onMove, isEditing}: NameProps) { const {translate} = useLocalize(); const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); - const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); - const defaultValue = reimbursementAccount?.achData?.corpay?.[COMPANY_NAME] ?? reimbursementAccountDraft?.[COMPANY_NAME] ?? ''; + const defaultValue = reimbursementAccount?.achData?.corpay?.[COMPANY_NAME] ?? ''; const validate = useCallback( (values: FormOnyxValues): FormInputErrors => { diff --git a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/PaymentVolume.tsx b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/subSteps/PaymentVolume.tsx similarity index 95% rename from src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/PaymentVolume.tsx rename to src/pages/ReimbursementAccount/NonUSD/BusinessInfo/subSteps/PaymentVolume.tsx index 5e8b49359429..70d610687212 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/PaymentVolume.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/subSteps/PaymentVolume.tsx @@ -22,7 +22,6 @@ function PaymentVolume({onNext, isEditing}: PaymentVolumeProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); - const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); const [corpayOnboardingFields] = useOnyx(ONYXKEYS.CORPAY_ONBOARDING_FIELDS); const policyID = reimbursementAccount?.achData?.policyID; const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`); @@ -39,7 +38,7 @@ function PaymentVolume({onNext, isEditing}: PaymentVolumeProps) { }, {} as Record); }, [corpayOnboardingFields]); - const annualVolumeDefaultValue = reimbursementAccount?.achData?.corpay?.[ANNUAL_VOLUME] ?? reimbursementAccountDraft?.[ANNUAL_VOLUME] ?? ''; + const annualVolumeDefaultValue = reimbursementAccount?.achData?.corpay?.[ANNUAL_VOLUME] ?? ''; const validate = useCallback((values: FormOnyxValues): FormInputErrors => { return getFieldRequiredErrors(values, STEP_FIELDS); diff --git a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/RegistrationNumber.tsx b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/subSteps/RegistrationNumber.tsx similarity index 97% rename from src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/RegistrationNumber.tsx rename to src/pages/ReimbursementAccount/NonUSD/BusinessInfo/subSteps/RegistrationNumber.tsx index 4fb2aafd2d73..12c9aa9dd78c 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/RegistrationNumber.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/subSteps/RegistrationNumber.tsx @@ -31,7 +31,7 @@ function RegistrationNumber({onNext, isEditing}: RegistrationNumberProps) { const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); - const defaultValue = reimbursementAccount?.achData?.corpay?.[BUSINESS_REGISTRATION_INCORPORATION_NUMBER] ?? reimbursementAccountDraft?.[BUSINESS_REGISTRATION_INCORPORATION_NUMBER] ?? ''; + const defaultValue = reimbursementAccount?.achData?.corpay?.[BUSINESS_REGISTRATION_INCORPORATION_NUMBER] ?? ''; const businessStepCountryDraftValue = reimbursementAccount?.achData?.corpay?.[COMPANY_COUNTRY_CODE] ?? reimbursementAccountDraft?.[COMPANY_COUNTRY_CODE] ?? ''; const validate = useCallback( diff --git a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/TaxIDEINNumber.tsx b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/subSteps/TaxIDEINNumber.tsx similarity index 92% rename from src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/TaxIDEINNumber.tsx rename to src/pages/ReimbursementAccount/NonUSD/BusinessInfo/subSteps/TaxIDEINNumber.tsx index 06183c334567..7cd149beb83c 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/TaxIDEINNumber.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/subSteps/TaxIDEINNumber.tsx @@ -19,8 +19,7 @@ function TaxIDEINNumber({onNext, onMove, isEditing}: TaxIDEINNumberProps) { const {translate} = useLocalize(); const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); - const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); - const defaultValue = reimbursementAccount?.achData?.corpay?.[TAX_ID_EIN_NUMBER] ?? reimbursementAccountDraft?.[TAX_ID_EIN_NUMBER] ?? ''; + const defaultValue = reimbursementAccount?.achData?.corpay?.[TAX_ID_EIN_NUMBER] ?? ''; const validate = useCallback((values: FormOnyxValues): FormInputErrors => { return getFieldRequiredErrors(values, STEP_FIELDS); diff --git a/src/pages/ReimbursementAccount/NonUSD/Country/Country.tsx b/src/pages/ReimbursementAccount/NonUSD/Country/Country.tsx index 2faf8ac082c4..4654581fbbb9 100644 --- a/src/pages/ReimbursementAccount/NonUSD/Country/Country.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/Country/Country.tsx @@ -5,7 +5,7 @@ import useLocalize from '@hooks/useLocalize'; import useSubStep from '@hooks/useSubStep'; import type {SubStepProps} from '@hooks/useSubStep/types'; import CONST from '@src/CONST'; -import Confirmation from './substeps/Confirmation'; +import Confirmation from './subSteps/Confirmation'; type CountryProps = { /** Handles back button press */ diff --git a/src/pages/ReimbursementAccount/NonUSD/Country/substeps/Confirmation.tsx b/src/pages/ReimbursementAccount/NonUSD/Country/subSteps/Confirmation.tsx similarity index 100% rename from src/pages/ReimbursementAccount/NonUSD/Country/substeps/Confirmation.tsx rename to src/pages/ReimbursementAccount/NonUSD/Country/subSteps/Confirmation.tsx diff --git a/src/pages/ReimbursementAccount/NonUSD/SignerInfo/index.tsx b/src/pages/ReimbursementAccount/NonUSD/SignerInfo/index.tsx index c0a06f217cad..045afafcc313 100644 --- a/src/pages/ReimbursementAccount/NonUSD/SignerInfo/index.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/SignerInfo/index.tsx @@ -12,11 +12,11 @@ import ONYXKEYS from '@src/ONYXKEYS'; import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; import EnterEmail from './EnterEmail'; import HangTight from './HangTight'; -import Confirmation from './substeps/Confirmation'; -import DateOfBirth from './substeps/DateOfBirth'; -import JobTitle from './substeps/JobTitle'; -import Name from './substeps/Name'; -import UploadDocuments from './substeps/UploadDocuments'; +import Confirmation from './subSteps/Confirmation'; +import DateOfBirth from './subSteps/DateOfBirth'; +import JobTitle from './subSteps/JobTitle'; +import Name from './subSteps/Name'; +import UploadDocuments from './subSteps/UploadDocuments'; type SignerInfoProps = { /** Handles back button press */ diff --git a/src/pages/ReimbursementAccount/NonUSD/SignerInfo/substeps/Confirmation.tsx b/src/pages/ReimbursementAccount/NonUSD/SignerInfo/subSteps/Confirmation.tsx similarity index 95% rename from src/pages/ReimbursementAccount/NonUSD/SignerInfo/substeps/Confirmation.tsx rename to src/pages/ReimbursementAccount/NonUSD/SignerInfo/subSteps/Confirmation.tsx index cbdf42b4962c..b1fb28bd39da 100644 --- a/src/pages/ReimbursementAccount/NonUSD/SignerInfo/substeps/Confirmation.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/SignerInfo/subSteps/Confirmation.tsx @@ -3,7 +3,7 @@ import {useOnyx} from 'react-native-onyx'; import ConfirmationStep from '@components/SubStepForms/ConfirmationStep'; import useLocalize from '@hooks/useLocalize'; import type {SubStepProps} from '@hooks/useSubStep/types'; -import getSubstepValues from '@pages/ReimbursementAccount/utils/getSubstepValues'; +import getSubStepValues from '@pages/ReimbursementAccount/utils/getSubStepValues'; import ONYXKEYS from '@src/ONYXKEYS'; import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; @@ -30,7 +30,7 @@ function Confirmation({onNext, onMove, isEditing, isSecondSigner}: ConfirmationP const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); const isUserOwner = reimbursementAccount?.achData?.corpay?.[OWNS_MORE_THAN_25_PERCENT] ?? reimbursementAccountDraft?.[OWNS_MORE_THAN_25_PERCENT] ?? false; - const values = useMemo(() => getSubstepValues(SINGER_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]); + const values = useMemo(() => getSubStepValues(SINGER_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]); const IDs = values[isSecondSigner ? SECOND_SIGNER_COPY_OF_ID : SIGNER_COPY_OF_ID]; const proofs = values[isSecondSigner ? SECOND_SIGNER_ADDRESS_PROOF : SIGNER_ADDRESS_PROOF]; diff --git a/src/pages/ReimbursementAccount/NonUSD/SignerInfo/substeps/DateOfBirth.tsx b/src/pages/ReimbursementAccount/NonUSD/SignerInfo/subSteps/DateOfBirth.tsx similarity index 100% rename from src/pages/ReimbursementAccount/NonUSD/SignerInfo/substeps/DateOfBirth.tsx rename to src/pages/ReimbursementAccount/NonUSD/SignerInfo/subSteps/DateOfBirth.tsx diff --git a/src/pages/ReimbursementAccount/NonUSD/SignerInfo/substeps/JobTitle.tsx b/src/pages/ReimbursementAccount/NonUSD/SignerInfo/subSteps/JobTitle.tsx similarity index 100% rename from src/pages/ReimbursementAccount/NonUSD/SignerInfo/substeps/JobTitle.tsx rename to src/pages/ReimbursementAccount/NonUSD/SignerInfo/subSteps/JobTitle.tsx diff --git a/src/pages/ReimbursementAccount/NonUSD/SignerInfo/substeps/Name.tsx b/src/pages/ReimbursementAccount/NonUSD/SignerInfo/subSteps/Name.tsx similarity index 100% rename from src/pages/ReimbursementAccount/NonUSD/SignerInfo/substeps/Name.tsx rename to src/pages/ReimbursementAccount/NonUSD/SignerInfo/subSteps/Name.tsx diff --git a/src/pages/ReimbursementAccount/NonUSD/SignerInfo/substeps/UploadDocuments.tsx b/src/pages/ReimbursementAccount/NonUSD/SignerInfo/subSteps/UploadDocuments.tsx similarity index 100% rename from src/pages/ReimbursementAccount/NonUSD/SignerInfo/substeps/UploadDocuments.tsx rename to src/pages/ReimbursementAccount/NonUSD/SignerInfo/subSteps/UploadDocuments.tsx diff --git a/src/pages/ReimbursementAccount/NonUSD/utils/getInitialSubStepForBusinessInfoStep.ts b/src/pages/ReimbursementAccount/NonUSD/utils/getInitialSubStepForBusinessInfoStep.ts new file mode 100644 index 000000000000..854d0bb1724f --- /dev/null +++ b/src/pages/ReimbursementAccount/NonUSD/utils/getInitialSubStepForBusinessInfoStep.ts @@ -0,0 +1,62 @@ +import CONST from '@src/CONST'; +import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; + +const BUSINESS_INFO_STEP_KEYS = INPUT_IDS.ADDITIONAL_DATA.CORPAY; + +/** + * Returns the initial subStep for the Business info step based on already existing data + */ +function getInitialSubStepForBusinessInfoStep(data: Record): number { + if (data[BUSINESS_INFO_STEP_KEYS.COMPANY_NAME] === '') { + return 0; + } + + if ( + data[BUSINESS_INFO_STEP_KEYS.COMPANY_STREET] === '' || + data[BUSINESS_INFO_STEP_KEYS.COMPANY_CITY] === '' || + data[BUSINESS_INFO_STEP_KEYS.COMPANY_POSTAL_CODE] === '' || + data[BUSINESS_INFO_STEP_KEYS.COMPANY_COUNTRY_CODE] === '' || + ((data[BUSINESS_INFO_STEP_KEYS.COMPANY_COUNTRY_CODE] === CONST.COUNTRY.US || data[BUSINESS_INFO_STEP_KEYS.COMPANY_COUNTRY_CODE] === CONST.COUNTRY.CA) && + data[BUSINESS_INFO_STEP_KEYS.COMPANY_STATE] === '') || + (data[BUSINESS_INFO_STEP_KEYS.COMPANY_COUNTRY_CODE] === '' && data[BUSINESS_INFO_STEP_KEYS.COMPANY_STATE] === '') + ) { + return 1; + } + + if (data[BUSINESS_INFO_STEP_KEYS.BUSINESS_CONTACT_NUMBER] === '' || data[BUSINESS_INFO_STEP_KEYS.BUSINESS_CONFIRMATION_EMAIL] === '') { + return 2; + } + + if (data[BUSINESS_INFO_STEP_KEYS.BUSINESS_REGISTRATION_INCORPORATION_NUMBER] === '') { + return 3; + } + + if (data[BUSINESS_INFO_STEP_KEYS.TAX_ID_EIN_NUMBER] === '') { + return 4; + } + + if ( + data[BUSINESS_INFO_STEP_KEYS.FORMATION_INCORPORATION_COUNTRY_CODE] === '' || + ((data[BUSINESS_INFO_STEP_KEYS.FORMATION_INCORPORATION_COUNTRY_CODE] === CONST.COUNTRY.US || + data[BUSINESS_INFO_STEP_KEYS.FORMATION_INCORPORATION_COUNTRY_CODE] === CONST.COUNTRY.CA) && + data[BUSINESS_INFO_STEP_KEYS.FORMATION_INCORPORATION_STATE] === '') + ) { + return 5; + } + + if (data[BUSINESS_INFO_STEP_KEYS.BUSINESS_CATEGORY] === '' || data[BUSINESS_INFO_STEP_KEYS.APPLICANT_TYPE_ID] === '') { + return 6; + } + + if (data[BUSINESS_INFO_STEP_KEYS.ANNUAL_VOLUME] === '') { + return 7; + } + + if (data[BUSINESS_INFO_STEP_KEYS.TRADE_VOLUME] === '') { + return 8; + } + + return 9; +} + +export default getInitialSubStepForBusinessInfoStep; diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx index 2f46f55efa85..31a4e7cdf3b0 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx @@ -416,6 +416,7 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy}: Reimbursemen requestorStepRef={requestorStepRef} onfidoToken={onfidoToken} setUSDBankAccountStep={setUSDBankAccountStep} + setShouldShowConnectedVerifiedBankAccount={setShouldShowConnectedVerifiedBankAccount} /> ); } diff --git a/src/pages/ReimbursementAccount/USD/BankInfo/BankInfo.tsx b/src/pages/ReimbursementAccount/USD/BankInfo/BankInfo.tsx index 380d050e2059..ad513746a9cc 100644 --- a/src/pages/ReimbursementAccount/USD/BankInfo/BankInfo.tsx +++ b/src/pages/ReimbursementAccount/USD/BankInfo/BankInfo.tsx @@ -5,15 +5,15 @@ import useLocalize from '@hooks/useLocalize'; 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 getSubStepValues from '@pages/ReimbursementAccount/utils/getSubStepValues'; import {connectBankAccountManually, connectBankAccountWithPlaid, setBankAccountSubStep} from '@userActions/BankAccounts'; import {hideBankAccountErrors, updateReimbursementAccountDraft} from '@userActions/ReimbursementAccount'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {ReimbursementAccountForm} from '@src/types/form'; import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; -import Manual from './substeps/Manual'; -import Plaid from './substeps/Plaid'; +import Manual from './subSteps/Manual'; +import Plaid from './subSteps/Plaid'; type BankInfoProps = { /** Goes to the previous step */ @@ -42,7 +42,7 @@ function BankInfo({onBackButtonPress, policyID, setUSDBankAccountStep}: BankInfo const {translate} = useLocalize(); const [redirectedFromPlaidToManual, setRedirectedFromPlaidToManual] = React.useState(false); - const values = useMemo(() => getSubstepValues(BANK_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount ?? {}), [reimbursementAccount, reimbursementAccountDraft]); + const values = useMemo(() => getSubStepValues(BANK_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount ?? {}), [reimbursementAccount, reimbursementAccountDraft]); let setupType = reimbursementAccount?.achData?.subStep ?? ''; diff --git a/src/pages/ReimbursementAccount/USD/BankInfo/substeps/Manual.tsx b/src/pages/ReimbursementAccount/USD/BankInfo/subSteps/Manual.tsx similarity index 100% rename from src/pages/ReimbursementAccount/USD/BankInfo/substeps/Manual.tsx rename to src/pages/ReimbursementAccount/USD/BankInfo/subSteps/Manual.tsx diff --git a/src/pages/ReimbursementAccount/USD/BankInfo/substeps/Plaid.tsx b/src/pages/ReimbursementAccount/USD/BankInfo/subSteps/Plaid.tsx similarity index 100% rename from src/pages/ReimbursementAccount/USD/BankInfo/substeps/Plaid.tsx rename to src/pages/ReimbursementAccount/USD/BankInfo/subSteps/Plaid.tsx diff --git a/src/pages/ReimbursementAccount/USD/BeneficialOwnerInfo/BeneficialOwnersStep.tsx b/src/pages/ReimbursementAccount/USD/BeneficialOwnerInfo/BeneficialOwnersStep.tsx index 91ed028c5c26..ea9a711f43c1 100644 --- a/src/pages/ReimbursementAccount/USD/BeneficialOwnerInfo/BeneficialOwnersStep.tsx +++ b/src/pages/ReimbursementAccount/USD/BeneficialOwnerInfo/BeneficialOwnersStep.tsx @@ -11,12 +11,12 @@ import {updateBeneficialOwnersForBankAccount} from '@userActions/BankAccounts'; import {setDraftValues} from '@userActions/FormActions'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -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 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'; type BeneficialOwnersStepProps = { /** Goes to the previous step */ @@ -52,7 +52,7 @@ function BeneficialOwnersStep({onBackButtonPress}: BeneficialOwnersStepProps) { const [isEditingCreatedBeneficialOwner, setIsEditingCreatedBeneficialOwner] = useState(false); const [isUserUBO, setIsUserUBO] = useState(defaultValues.ownsMoreThan25Percent); const [isAnyoneElseUBO, setIsAnyoneElseUBO] = useState(defaultValues.hasOtherBeneficialOwners); - const [currentUBOSubstep, setCurrentUBOSubstep] = useState(1); + const [currentUBOSubStep, setCurrentUBOSubStep] = useState(1); const canAddMoreUBOS = beneficialOwnerKeys.length < (isUserUBO ? MAX_NUMBER_OF_UBOS - 1 : MAX_NUMBER_OF_UBOS); const submit = () => { @@ -92,7 +92,7 @@ function BeneficialOwnersStep({onBackButtonPress}: BeneficialOwnersStepProps) { // Because beneficialOwnerKeys array is not yet updated at this point we need to check against lower MAX_NUMBER_OF_UBOS (account for the one that is being added) const isLastUBOThatCanBeAdded = beneficialOwnerKeys.length === (isUserUBO ? MAX_NUMBER_OF_UBOS - 2 : MAX_NUMBER_OF_UBOS - 1); - setCurrentUBOSubstep(isEditingCreatedBeneficialOwner || isLastUBOThatCanBeAdded ? SUBSTEP.UBOS_LIST : SUBSTEP.ARE_THERE_MORE_UBOS); + setCurrentUBOSubStep(isEditingCreatedBeneficialOwner || isLastUBOThatCanBeAdded ? SUBSTEP.UBOS_LIST : SUBSTEP.ARE_THERE_MORE_UBOS); setIsEditingCreatedBeneficialOwner(false); }; @@ -114,13 +114,13 @@ function BeneficialOwnersStep({onBackButtonPress}: BeneficialOwnersStepProps) { const prepareBeneficialOwnerDetailsForm = () => { const beneficialOwnerID = Str.guid(); setBeneficialOwnerBeingModifiedID(beneficialOwnerID); - // Reset Beneficial Owner Details Form to first substep + // Reset Beneficial Owner Details Form to first subStep resetScreenIndex(); - setCurrentUBOSubstep(SUBSTEP.UBO_DETAILS_FORM); + setCurrentUBOSubStep(SUBSTEP.UBO_DETAILS_FORM); }; const handleNextUBOSubstep = (value: boolean) => { - if (currentUBOSubstep === SUBSTEP.IS_USER_UBO) { + if (currentUBOSubStep === SUBSTEP.IS_USER_UBO) { setIsUserUBO(value); // User is an owner but there are 4 other owners already added, so we remove last one @@ -128,15 +128,15 @@ function BeneficialOwnersStep({onBackButtonPress}: BeneficialOwnersStepProps) { setBeneficialOwnerKeys((previousBeneficialOwners) => previousBeneficialOwners.slice(0, 3)); } - setCurrentUBOSubstep(SUBSTEP.IS_ANYONE_ELSE_UBO); + setCurrentUBOSubStep(SUBSTEP.IS_ANYONE_ELSE_UBO); return; } - if (currentUBOSubstep === SUBSTEP.IS_ANYONE_ELSE_UBO) { + if (currentUBOSubStep === SUBSTEP.IS_ANYONE_ELSE_UBO) { setIsAnyoneElseUBO(value); if (!canAddMoreUBOS && value) { - setCurrentUBOSubstep(SUBSTEP.UBOS_LIST); + setCurrentUBOSubStep(SUBSTEP.UBOS_LIST); return; } @@ -153,24 +153,24 @@ function BeneficialOwnersStep({onBackButtonPress}: BeneficialOwnersStepProps) { // User is an owner and no one else is an owner if (isUserUBO && !value) { - setCurrentUBOSubstep(SUBSTEP.UBOS_LIST); + setCurrentUBOSubStep(SUBSTEP.UBOS_LIST); return; } } // Are there more UBOs - if (currentUBOSubstep === SUBSTEP.ARE_THERE_MORE_UBOS) { + if (currentUBOSubStep === SUBSTEP.ARE_THERE_MORE_UBOS) { if (value) { prepareBeneficialOwnerDetailsForm(); return; } - setCurrentUBOSubstep(SUBSTEP.UBOS_LIST); + setCurrentUBOSubStep(SUBSTEP.UBOS_LIST); return; } // User reached the limit of UBOs - if (currentUBOSubstep === SUBSTEP.UBO_DETAILS_FORM && !canAddMoreUBOS) { - setCurrentUBOSubstep(SUBSTEP.UBOS_LIST); + if (currentUBOSubStep === SUBSTEP.UBO_DETAILS_FORM && !canAddMoreUBOS) { + setCurrentUBOSubStep(SUBSTEP.UBOS_LIST); } }; @@ -181,28 +181,28 @@ function BeneficialOwnersStep({onBackButtonPress}: BeneficialOwnersStepProps) { } // User goes back to previous step - if (currentUBOSubstep === SUBSTEP.IS_USER_UBO) { + if (currentUBOSubStep === SUBSTEP.IS_USER_UBO) { onBackButtonPress(); // User reached limit of UBOs and goes back to initial question about additional UBOs - } else if (currentUBOSubstep === SUBSTEP.UBOS_LIST && !canAddMoreUBOS) { - setCurrentUBOSubstep(SUBSTEP.IS_ANYONE_ELSE_UBO); + } else if (currentUBOSubStep === SUBSTEP.UBOS_LIST && !canAddMoreUBOS) { + setCurrentUBOSubStep(SUBSTEP.IS_ANYONE_ELSE_UBO); // User goes back to last radio button - } else if (currentUBOSubstep === SUBSTEP.UBOS_LIST && isAnyoneElseUBO) { - setCurrentUBOSubstep(SUBSTEP.ARE_THERE_MORE_UBOS); - } else if (currentUBOSubstep === SUBSTEP.UBOS_LIST && isUserUBO && !isAnyoneElseUBO) { - setCurrentUBOSubstep(SUBSTEP.IS_ANYONE_ELSE_UBO); - // User moves between substeps of beneficial owner details form - } else if (currentUBOSubstep === SUBSTEP.UBO_DETAILS_FORM && screenIndex > 0) { + } else if (currentUBOSubStep === SUBSTEP.UBOS_LIST && isAnyoneElseUBO) { + setCurrentUBOSubStep(SUBSTEP.ARE_THERE_MORE_UBOS); + } else if (currentUBOSubStep === SUBSTEP.UBOS_LIST && isUserUBO && !isAnyoneElseUBO) { + setCurrentUBOSubStep(SUBSTEP.IS_ANYONE_ELSE_UBO); + // User moves between subSteps of beneficial owner details form + } else if (currentUBOSubStep === SUBSTEP.UBO_DETAILS_FORM && screenIndex > 0) { prevScreen(); } else { - setCurrentUBOSubstep((currentSubstep) => currentSubstep - 1); + setCurrentUBOSubStep((currentSubstep) => currentSubstep - 1); } }; const handleUBOEdit = (beneficialOwnerID: string) => { setBeneficialOwnerBeingModifiedID(beneficialOwnerID); setIsEditingCreatedBeneficialOwner(true); - setCurrentUBOSubstep(SUBSTEP.UBO_DETAILS_FORM); + setCurrentUBOSubStep(SUBSTEP.UBO_DETAILS_FORM); }; return ( @@ -215,7 +215,7 @@ function BeneficialOwnersStep({onBackButtonPress}: BeneficialOwnersStepProps) { startStepIndex={4} stepNames={CONST.BANK_ACCOUNT.STEP_NAMES} > - {currentUBOSubstep === SUBSTEP.IS_USER_UBO && ( + {currentUBOSubStep === SUBSTEP.IS_USER_UBO && ( )} - {currentUBOSubstep === SUBSTEP.IS_ANYONE_ELSE_UBO && ( + {currentUBOSubStep === SUBSTEP.IS_ANYONE_ELSE_UBO && ( )} - {currentUBOSubstep === SUBSTEP.UBO_DETAILS_FORM && ( + {currentUBOSubStep === SUBSTEP.UBO_DETAILS_FORM && ( )} - {currentUBOSubstep === SUBSTEP.ARE_THERE_MORE_UBOS && ( + {currentUBOSubStep === SUBSTEP.ARE_THERE_MORE_UBOS && ( )} - {currentUBOSubstep === SUBSTEP.UBOS_LIST && ( + {currentUBOSubStep === SUBSTEP.UBOS_LIST && ( getSubstepValues(BUSINESS_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]); + const values = useMemo(() => getSubStepValues(BUSINESS_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]); const submit = useCallback( (isConfirmPage: boolean) => { const companyWebsite = Str.sanitizeURL(values.website, CONST.COMPANY_WEBSITE_DEFAULT_SCHEME); - BankAccounts.updateCompanyInformationForBankAccount( + updateCompanyInformationForBankAccount( Number(reimbursementAccount?.achData?.bankAccountID ?? '-1'), { ...values, @@ -78,7 +78,7 @@ function BusinessInfo({onBackButtonPress}: BusinessInfoProps) { [reimbursementAccount, values, getBankAccountFields, policyID], ); - const startFrom = useMemo(() => getInitialSubstepForBusinessInfo(values), [values]); + const startFrom = useMemo(() => getInitialSubStepForBusinessInfo(values), [values]); const { componentToRender: SubStep, diff --git a/src/pages/ReimbursementAccount/USD/BusinessInfo/substeps/AddressBusiness.tsx b/src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/AddressBusiness.tsx similarity index 100% rename from src/pages/ReimbursementAccount/USD/BusinessInfo/substeps/AddressBusiness.tsx rename to src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/AddressBusiness.tsx diff --git a/src/pages/ReimbursementAccount/USD/BusinessInfo/substeps/ConfirmationBusiness.tsx b/src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/ConfirmationBusiness.tsx similarity index 97% rename from src/pages/ReimbursementAccount/USD/BusinessInfo/substeps/ConfirmationBusiness.tsx rename to src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/ConfirmationBusiness.tsx index c96336b28fab..4c0d2edee876 100644 --- a/src/pages/ReimbursementAccount/USD/BusinessInfo/substeps/ConfirmationBusiness.tsx +++ b/src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/ConfirmationBusiness.tsx @@ -13,7 +13,7 @@ import useLocalize from '@hooks/useLocalize'; import type {SubStepProps} from '@hooks/useSubStep/types'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ValidationUtils from '@libs/ValidationUtils'; -import getSubstepValues from '@pages/ReimbursementAccount/utils/getSubstepValues'; +import getSubStepValues from '@pages/ReimbursementAccount/utils/getSubStepValues'; import CONST from '@src/CONST'; import type {TranslationPaths} from '@src/languages/types'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -55,7 +55,7 @@ function ConfirmationBusiness({onNext, onMove}: SubStepProps) { [translate], ); - const values = useMemo(() => getSubstepValues(BUSINESS_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]); + const values = useMemo(() => getSubStepValues(BUSINESS_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]); const defaultCheckboxState = reimbursementAccountDraft?.[BUSINESS_INFO_STEP_KEYS.HAS_NO_CONNECTION_TO_CANNABIS] ?? false; diff --git a/src/pages/ReimbursementAccount/USD/BusinessInfo/substeps/IncorporationDateBusiness.tsx b/src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/IncorporationDateBusiness.tsx similarity index 100% rename from src/pages/ReimbursementAccount/USD/BusinessInfo/substeps/IncorporationDateBusiness.tsx rename to src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/IncorporationDateBusiness.tsx diff --git a/src/pages/ReimbursementAccount/USD/BusinessInfo/substeps/IncorporationStateBusiness.tsx b/src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/IncorporationStateBusiness.tsx similarity index 100% rename from src/pages/ReimbursementAccount/USD/BusinessInfo/substeps/IncorporationStateBusiness.tsx rename to src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/IncorporationStateBusiness.tsx diff --git a/src/pages/ReimbursementAccount/USD/BusinessInfo/substeps/NameBusiness.tsx b/src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/NameBusiness.tsx similarity index 100% rename from src/pages/ReimbursementAccount/USD/BusinessInfo/substeps/NameBusiness.tsx rename to src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/NameBusiness.tsx diff --git a/src/pages/ReimbursementAccount/USD/BusinessInfo/substeps/PhoneNumberBusiness.tsx b/src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/PhoneNumberBusiness.tsx similarity index 100% rename from src/pages/ReimbursementAccount/USD/BusinessInfo/substeps/PhoneNumberBusiness.tsx rename to src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/PhoneNumberBusiness.tsx diff --git a/src/pages/ReimbursementAccount/USD/BusinessInfo/substeps/TaxIdBusiness.tsx b/src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/TaxIdBusiness.tsx similarity index 100% rename from src/pages/ReimbursementAccount/USD/BusinessInfo/substeps/TaxIdBusiness.tsx rename to src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/TaxIdBusiness.tsx diff --git a/src/pages/ReimbursementAccount/USD/BusinessInfo/substeps/TypeBusiness/BusinessTypePicker/BusinessTypeSelectorModal.tsx b/src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/TypeBusiness/BusinessTypePicker/BusinessTypeSelectorModal.tsx similarity index 100% rename from src/pages/ReimbursementAccount/USD/BusinessInfo/substeps/TypeBusiness/BusinessTypePicker/BusinessTypeSelectorModal.tsx rename to src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/TypeBusiness/BusinessTypePicker/BusinessTypeSelectorModal.tsx diff --git a/src/pages/ReimbursementAccount/USD/BusinessInfo/substeps/TypeBusiness/BusinessTypePicker/index.tsx b/src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/TypeBusiness/BusinessTypePicker/index.tsx similarity index 100% rename from src/pages/ReimbursementAccount/USD/BusinessInfo/substeps/TypeBusiness/BusinessTypePicker/index.tsx rename to src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/TypeBusiness/BusinessTypePicker/index.tsx diff --git a/src/pages/ReimbursementAccount/USD/BusinessInfo/substeps/TypeBusiness/BusinessTypePicker/types.ts b/src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/TypeBusiness/BusinessTypePicker/types.ts similarity index 100% rename from src/pages/ReimbursementAccount/USD/BusinessInfo/substeps/TypeBusiness/BusinessTypePicker/types.ts rename to src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/TypeBusiness/BusinessTypePicker/types.ts diff --git a/src/pages/ReimbursementAccount/USD/BusinessInfo/substeps/TypeBusiness/TypeBusiness.tsx b/src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/TypeBusiness/TypeBusiness.tsx similarity index 100% rename from src/pages/ReimbursementAccount/USD/BusinessInfo/substeps/TypeBusiness/TypeBusiness.tsx rename to src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/TypeBusiness/TypeBusiness.tsx diff --git a/src/pages/ReimbursementAccount/USD/BusinessInfo/substeps/WebsiteBusiness.tsx b/src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/WebsiteBusiness.tsx similarity index 100% rename from src/pages/ReimbursementAccount/USD/BusinessInfo/substeps/WebsiteBusiness.tsx rename to src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/WebsiteBusiness.tsx diff --git a/src/pages/ReimbursementAccount/USD/CompleteVerification/CompleteVerification.tsx b/src/pages/ReimbursementAccount/USD/CompleteVerification/CompleteVerification.tsx index cbc9f8d7f403..d2f369a495dd 100644 --- a/src/pages/ReimbursementAccount/USD/CompleteVerification/CompleteVerification.tsx +++ b/src/pages/ReimbursementAccount/USD/CompleteVerification/CompleteVerification.tsx @@ -1,16 +1,16 @@ -import type {ComponentType} from 'react'; import React, {useCallback, useMemo} from 'react'; +import type {ComponentType} from 'react'; import {useOnyx} from 'react-native-onyx'; import InteractiveStepWrapper from '@components/InteractiveStepWrapper'; import useLocalize from '@hooks/useLocalize'; import useSubStep from '@hooks/useSubStep'; import type {SubStepProps} from '@hooks/useSubStep/types'; -import getSubstepValues from '@pages/ReimbursementAccount/utils/getSubstepValues'; +import getSubStepValues from '@pages/ReimbursementAccount/utils/getSubStepValues'; import * as BankAccounts from '@userActions/BankAccounts'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; -import ConfirmAgreements from './substeps/ConfirmAgreements'; +import ConfirmAgreements from './subSteps/ConfirmAgreements'; type CompleteVerificationProps = { /** Handles back button press */ @@ -26,7 +26,7 @@ function CompleteVerification({onBackButtonPress}: CompleteVerificationProps) { const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); - const values = useMemo(() => getSubstepValues(COMPLETE_VERIFICATION_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]); + const values = useMemo(() => getSubStepValues(COMPLETE_VERIFICATION_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]); const policyID = reimbursementAccount?.achData?.policyID ?? '-1'; const submit = useCallback(() => { diff --git a/src/pages/ReimbursementAccount/USD/CompleteVerification/substeps/ConfirmAgreements.tsx b/src/pages/ReimbursementAccount/USD/CompleteVerification/subSteps/ConfirmAgreements.tsx similarity index 100% rename from src/pages/ReimbursementAccount/USD/CompleteVerification/substeps/ConfirmAgreements.tsx rename to src/pages/ReimbursementAccount/USD/CompleteVerification/subSteps/ConfirmAgreements.tsx diff --git a/src/pages/ReimbursementAccount/USD/ConnectBankAccount/ConnectBankAccount.tsx b/src/pages/ReimbursementAccount/USD/ConnectBankAccount/ConnectBankAccount.tsx index 3d56f687d815..101d50df8669 100644 --- a/src/pages/ReimbursementAccount/USD/ConnectBankAccount/ConnectBankAccount.tsx +++ b/src/pages/ReimbursementAccount/USD/ConnectBankAccount/ConnectBankAccount.tsx @@ -17,9 +17,15 @@ import FinishChatCard from './components/FinishChatCard'; type ConnectBankAccountProps = { /** Handles back button press */ onBackButtonPress: () => void; + + /** Method to set the state of shouldShowConnectedVerifiedBankAccount */ + setShouldShowConnectedVerifiedBankAccount: (shouldShowConnectedVerifiedBankAccount: boolean) => void; + + /** Method to set the state of shouldShowConnectedVerifiedBankAccount */ + setUSDBankAccountStep: (step: string | null) => void; }; -function ConnectBankAccount({onBackButtonPress}: ConnectBankAccountProps) { +function ConnectBankAccount({onBackButtonPress, setShouldShowConnectedVerifiedBankAccount, setUSDBankAccountStep}: ConnectBankAccountProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -36,6 +42,8 @@ function ConnectBankAccount({onBackButtonPress}: ConnectBankAccountProps) { ); } diff --git a/src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/PersonalInfo.tsx b/src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/PersonalInfo.tsx index 264e13b4ccd0..f95f2cbd5223 100644 --- a/src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/PersonalInfo.tsx +++ b/src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/PersonalInfo.tsx @@ -5,17 +5,17 @@ import InteractiveStepWrapper from '@components/InteractiveStepWrapper'; import useLocalize from '@hooks/useLocalize'; import useSubStep from '@hooks/useSubStep'; import type {SubStepProps} from '@hooks/useSubStep/types'; -import getInitialSubstepForPersonalInfo from '@pages/ReimbursementAccount/USD/utils/getInitialSubstepForPersonalInfo'; -import getSubstepValues from '@pages/ReimbursementAccount/utils/getSubstepValues'; -import * as BankAccounts from '@userActions/BankAccounts'; +import getInitialSubStepForPersonalInfo from '@pages/ReimbursementAccount/USD/utils/getInitialSubStepForPersonalInfo'; +import getSubStepValues from '@pages/ReimbursementAccount/utils/getSubStepValues'; +import {updatePersonalInformationForBankAccount} from '@userActions/BankAccounts'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; -import Address from './substeps/Address'; -import Confirmation from './substeps/Confirmation'; -import DateOfBirth from './substeps/DateOfBirth'; -import FullName from './substeps/FullName'; -import SocialSecurityNumber from './substeps/SocialSecurityNumber'; +import Address from './subSteps/Address'; +import Confirmation from './subSteps/Confirmation'; +import DateOfBirth from './subSteps/DateOfBirth'; +import FullName from './subSteps/FullName'; +import SocialSecurityNumber from './subSteps/SocialSecurityNumber'; type PersonalInfoProps = { /** Goes to the previous step */ @@ -32,15 +32,15 @@ function PersonalInfo({onBackButtonPress}: PersonalInfoProps, ref: React.Forward const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); const policyID = reimbursementAccount?.achData?.policyID ?? '-1'; - const values = useMemo(() => getSubstepValues(PERSONAL_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]); + const values = useMemo(() => getSubStepValues(PERSONAL_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]); const bankAccountID = Number(reimbursementAccount?.achData?.bankAccountID ?? '-1'); const submit = useCallback( (isConfirmPage: boolean) => { - BankAccounts.updatePersonalInformationForBankAccount(bankAccountID, {...values}, policyID, isConfirmPage); + updatePersonalInformationForBankAccount(bankAccountID, {...values}, policyID, isConfirmPage); }, [values, bankAccountID, policyID], ); - const startFrom = useMemo(() => getInitialSubstepForPersonalInfo(values), [values]); + const startFrom = useMemo(() => getInitialSubStepForPersonalInfo(values), [values]); const { componentToRender: SubStep, diff --git a/src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/substeps/Address.tsx b/src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/subSteps/Address.tsx similarity index 100% rename from src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/substeps/Address.tsx rename to src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/subSteps/Address.tsx diff --git a/src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/substeps/Confirmation.tsx b/src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/subSteps/Confirmation.tsx similarity index 95% rename from src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/substeps/Confirmation.tsx rename to src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/subSteps/Confirmation.tsx index 894ed0b17686..a5e28c657f16 100644 --- a/src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/substeps/Confirmation.tsx +++ b/src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/subSteps/Confirmation.tsx @@ -4,7 +4,7 @@ import ConfirmationStep from '@components/SubStepForms/ConfirmationStep'; import useLocalize from '@hooks/useLocalize'; import type {SubStepProps} from '@hooks/useSubStep/types'; import * as ErrorUtils from '@libs/ErrorUtils'; -import getSubstepValues from '@pages/ReimbursementAccount/utils/getSubstepValues'; +import getSubStepValues from '@pages/ReimbursementAccount/utils/getSubStepValues'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; @@ -19,7 +19,7 @@ function Confirmation({onNext, onMove, isEditing}: SubStepProps) { const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); const isLoading = reimbursementAccount?.isLoading ?? false; - const values = useMemo(() => getSubstepValues(PERSONAL_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]); + const values = useMemo(() => getSubStepValues(PERSONAL_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]); const error = ErrorUtils.getLatestErrorMessage(reimbursementAccount ?? {}); const summaryItems = [ diff --git a/src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/substeps/DateOfBirth.tsx b/src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/subSteps/DateOfBirth.tsx similarity index 100% rename from src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/substeps/DateOfBirth.tsx rename to src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/subSteps/DateOfBirth.tsx diff --git a/src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/substeps/FullName.tsx b/src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/subSteps/FullName.tsx similarity index 100% rename from src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/substeps/FullName.tsx rename to src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/subSteps/FullName.tsx diff --git a/src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/substeps/SocialSecurityNumber.tsx b/src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/subSteps/SocialSecurityNumber.tsx similarity index 100% rename from src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/substeps/SocialSecurityNumber.tsx rename to src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/subSteps/SocialSecurityNumber.tsx diff --git a/src/pages/ReimbursementAccount/USD/Requestor/RequestorStep.tsx b/src/pages/ReimbursementAccount/USD/Requestor/RequestorStep.tsx index ef2901b1370a..547da9e317ef 100644 --- a/src/pages/ReimbursementAccount/USD/Requestor/RequestorStep.tsx +++ b/src/pages/ReimbursementAccount/USD/Requestor/RequestorStep.tsx @@ -1,5 +1,5 @@ -import type {ForwardedRef} from 'react'; import React, {forwardRef} from 'react'; +import type {ForwardedRef} from 'react'; import type {View} from 'react-native'; import PersonalInfo from './PersonalInfo/PersonalInfo'; import VerifyIdentity from './VerifyIdentity/VerifyIdentity'; diff --git a/src/pages/ReimbursementAccount/USD/USDVerifiedBankAccountFlow.tsx b/src/pages/ReimbursementAccount/USD/USDVerifiedBankAccountFlow.tsx index 330cf51b8edc..ba72458002e6 100644 --- a/src/pages/ReimbursementAccount/USD/USDVerifiedBankAccountFlow.tsx +++ b/src/pages/ReimbursementAccount/USD/USDVerifiedBankAccountFlow.tsx @@ -17,9 +17,18 @@ type USDVerifiedBankAccountFlowProps = { requestorStepRef: React.RefObject; onfidoToken: string; setUSDBankAccountStep: (step: string | null) => void; + setShouldShowConnectedVerifiedBankAccount: (shouldShowConnectedVerifiedBankAccount: boolean) => void; }; -function USDVerifiedBankAccountFlow({USDBankAccountStep, policyID = '', onBackButtonPress, requestorStepRef, onfidoToken, setUSDBankAccountStep}: USDVerifiedBankAccountFlowProps) { +function USDVerifiedBankAccountFlow({ + USDBankAccountStep, + policyID = '', + onBackButtonPress, + requestorStepRef, + onfidoToken, + setUSDBankAccountStep, + setShouldShowConnectedVerifiedBankAccount, +}: USDVerifiedBankAccountFlowProps) { const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); switch (USDBankAccountStep) { @@ -46,7 +55,13 @@ function USDVerifiedBankAccountFlow({USDBankAccountStep, policyID = '', onBackBu case CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT: return ; case CONST.BANK_ACCOUNT.STEP.VALIDATION: - return ; + return ( + + ); default: return null; } diff --git a/src/pages/ReimbursementAccount/USD/utils/getInitialSubstepForBusinessInfo.ts b/src/pages/ReimbursementAccount/USD/utils/getInitialSubStepForBusinessInfo.ts similarity index 74% rename from src/pages/ReimbursementAccount/USD/utils/getInitialSubstepForBusinessInfo.ts rename to src/pages/ReimbursementAccount/USD/utils/getInitialSubStepForBusinessInfo.ts index 7173455afd05..dca41edf7e98 100644 --- a/src/pages/ReimbursementAccount/USD/utils/getInitialSubstepForBusinessInfo.ts +++ b/src/pages/ReimbursementAccount/USD/utils/getInitialSubStepForBusinessInfo.ts @@ -1,5 +1,5 @@ import {Str} from 'expensify-common'; -import * as ValidationUtils from '@libs/ValidationUtils'; +import {isValidWebsite} from '@libs/ValidationUtils'; import CONST from '@src/CONST'; import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; import type {CompanyStepProps} from '@src/types/form/ReimbursementAccountForm'; @@ -7,9 +7,9 @@ import type {CompanyStepProps} from '@src/types/form/ReimbursementAccountForm'; const businessInfoStepKeys = INPUT_IDS.BUSINESS_INFO_STEP; /** - * Returns the initial substep for the Business Info step based on already existing data + * Returns the initial subStep for the Business Info step based on already existing data */ -function getInitialSubstepForBusinessInfo(data: CompanyStepProps): number { +function getInitialSubStepForBusinessInfo(data: CompanyStepProps): number { if (data[businessInfoStepKeys.COMPANY_NAME] === '') { return 0; } @@ -18,7 +18,7 @@ function getInitialSubstepForBusinessInfo(data: CompanyStepProps): number { return 1; } - if (!ValidationUtils.isValidWebsite(Str.sanitizeURL(data[businessInfoStepKeys.COMPANY_WEBSITE], CONST.COMPANY_WEBSITE_DEFAULT_SCHEME))) { + if (!isValidWebsite(Str.sanitizeURL(data[businessInfoStepKeys.COMPANY_WEBSITE], CONST.COMPANY_WEBSITE_DEFAULT_SCHEME))) { return 2; } @@ -45,4 +45,4 @@ function getInitialSubstepForBusinessInfo(data: CompanyStepProps): number { return 8; } -export default getInitialSubstepForBusinessInfo; +export default getInitialSubStepForBusinessInfo; diff --git a/src/pages/ReimbursementAccount/USD/utils/getInitialSubstepForPersonalInfo.ts b/src/pages/ReimbursementAccount/USD/utils/getInitialSubStepForPersonalInfo.ts similarity index 80% rename from src/pages/ReimbursementAccount/USD/utils/getInitialSubstepForPersonalInfo.ts rename to src/pages/ReimbursementAccount/USD/utils/getInitialSubStepForPersonalInfo.ts index 73cfff9e5980..da44017c7d1c 100644 --- a/src/pages/ReimbursementAccount/USD/utils/getInitialSubstepForPersonalInfo.ts +++ b/src/pages/ReimbursementAccount/USD/utils/getInitialSubStepForPersonalInfo.ts @@ -4,9 +4,9 @@ import type {RequestorStepProps} from '@src/types/form/ReimbursementAccountForm' const personalInfoKeys = INPUT_IDS.PERSONAL_INFO_STEP; /** - * Returns the initial substep for the Personal Info step based on already existing data + * Returns the initial subStep for the Personal Info step based on already existing data */ -function getInitialSubstepForPersonalInfo(data: RequestorStepProps): number { +function getInitialSubStepForPersonalInfo(data: RequestorStepProps): number { if (data[personalInfoKeys.FIRST_NAME] === '' || data[personalInfoKeys.LAST_NAME] === '') { return 0; } @@ -26,4 +26,4 @@ function getInitialSubstepForPersonalInfo(data: RequestorStepProps): number { return 4; } -export default getInitialSubstepForPersonalInfo; +export default getInitialSubStepForPersonalInfo; diff --git a/src/pages/ReimbursementAccount/utils/getSubStepValues.ts b/src/pages/ReimbursementAccount/utils/getSubStepValues.ts new file mode 100644 index 000000000000..2a73546075c9 --- /dev/null +++ b/src/pages/ReimbursementAccount/utils/getSubStepValues.ts @@ -0,0 +1,24 @@ +import type {OnyxEntry} from 'react-native-onyx'; +import type {ReimbursementAccountForm} from '@src/types/form'; +import type {ReimbursementAccount} from '@src/types/onyx'; +import type {ACHData, Corpay} from '@src/types/onyx/ReimbursementAccount'; + +type SubStepValues = { + [TKey in TProps]: ReimbursementAccountForm[TKey]; +}; + +function getSubStepValues( + inputKeys: Record, + reimbursementAccountDraft: OnyxEntry, + reimbursementAccount: OnyxEntry, +): SubStepValues { + return Object.entries(inputKeys).reduce((acc, [, value]) => { + acc[value] = (reimbursementAccountDraft?.[value] ?? + reimbursementAccount?.achData?.[value as keyof ACHData] ?? + reimbursementAccount?.achData?.corpay?.[value as keyof Corpay] ?? + '') as ReimbursementAccountForm[TProps]; + return acc; + }, {} as SubStepValues); +} + +export default getSubStepValues; diff --git a/src/pages/ReimbursementAccount/utils/getSubstepValues.ts b/src/pages/ReimbursementAccount/utils/getSubstepValues.ts deleted file mode 100644 index f89625c613f7..000000000000 --- a/src/pages/ReimbursementAccount/utils/getSubstepValues.ts +++ /dev/null @@ -1,21 +0,0 @@ -import type {OnyxEntry} from 'react-native-onyx'; -import type {ReimbursementAccountForm} from '@src/types/form'; -import type {ReimbursementAccount} from '@src/types/onyx'; -import type {ACHData} from '@src/types/onyx/ReimbursementAccount'; - -type SubstepValues = { - [TKey in TProps]: ReimbursementAccountForm[TKey]; -}; - -function getSubstepValues( - inputKeys: Record, - reimbursementAccountDraft: OnyxEntry, - reimbursementAccount: OnyxEntry, -): SubstepValues { - return Object.entries(inputKeys).reduce((acc, [, value]) => { - acc[value] = (reimbursementAccountDraft?.[value] ?? reimbursementAccount?.achData?.[value as keyof ACHData] ?? '') as ReimbursementAccountForm[TProps]; - return acc; - }, {} as SubstepValues); -} - -export default getSubstepValues; diff --git a/src/types/onyx/ReimbursementAccount.ts b/src/types/onyx/ReimbursementAccount.ts index ec6f518a341f..44d1a2b61515 100644 --- a/src/types/onyx/ReimbursementAccount.ts +++ b/src/types/onyx/ReimbursementAccount.ts @@ -262,4 +262,4 @@ type ReimbursementAccount = OnyxCommon.OnyxValueWithOfflineFeedback<{ }>; export default ReimbursementAccount; -export type {BankAccountStep, BankAccountSubStep, ACHData, ReimbursementAccountStep, ReimbursementAccountSubStep, ACHDataReimbursementAccount}; +export type {Corpay, BankAccountStep, BankAccountSubStep, ACHData, ReimbursementAccountStep, ReimbursementAccountSubStep, ACHDataReimbursementAccount}; From d0f81fa827dfc366a144049915af76ca5890039d Mon Sep 17 00:00:00 2001 From: Michal Muzyk Date: Fri, 7 Feb 2025 14:51:44 +0100 Subject: [PATCH 16/21] bank info default values --- src/CONST.ts | 8 +++ .../NonUSD/BankInfo/BankInfo.tsx | 14 ++-- .../subSteps/AccountHolderDetails.tsx | 7 +- .../BankInfo/subSteps/BankAccountDetails.tsx | 15 +++- .../NonUSD/BankInfo/subSteps/Confirmation.tsx | 14 ++-- .../NonUSD/BusinessInfo/BusinessInfo.tsx | 10 +-- .../NonUSD/utils/getBankInfoStepValues.ts | 68 +++++++++++++++++++ .../utils/getInitialSubStepForBankInfoStep.ts | 26 +++++++ .../utils/getInputKeysForBankInfoStep.ts | 12 ++++ src/types/form/ReimbursementAccountForm.ts | 63 ++++++++++++++++- src/types/onyx/ReimbursementAccount.ts | 46 ++++++++----- 11 files changed, 238 insertions(+), 45 deletions(-) create mode 100644 src/pages/ReimbursementAccount/NonUSD/utils/getBankInfoStepValues.ts create mode 100644 src/pages/ReimbursementAccount/NonUSD/utils/getInitialSubStepForBankInfoStep.ts create mode 100644 src/pages/ReimbursementAccount/NonUSD/utils/getInputKeysForBankInfoStep.ts diff --git a/src/CONST.ts b/src/CONST.ts index 75779704af26..d4d1a177c861 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -668,6 +668,14 @@ const CONST = { AGREEMENTS: 'AgreementsStep', FINISH: 'FinishStep', }, + BANK_INFO_STEP_ACH_DATA_INPUT_IDS: { + ACCOUNT_HOLDER_NAME: 'addressName', + ACCOUNT_HOLDER_REGION: 'addressState', + ACCOUNT_HOLDER_CITY: 'addressCity', + ACCOUNT_HOLDER_ADDRESS: 'addressStreet', + ACCOUNT_HOLDER_POSTAL_CODE: 'addressZipCode', + ROUTING_CODE: 'routingNumber', + }, BUSINESS_INFO_STEP: { PICKLIST: { ANNUAL_VOLUME_RANGE: 'AnnualVolumeRange', diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx index f7f207546f55..75f67e7e97bd 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx @@ -1,10 +1,13 @@ -import React, {useEffect} from 'react'; +import React, {useEffect, useMemo} from 'react'; import type {ComponentType} from 'react'; import {useOnyx} from 'react-native-onyx'; import InteractiveStepWrapper from '@components/InteractiveStepWrapper'; import useLocalize from '@hooks/useLocalize'; import useSubStep from '@hooks/useSubStep'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; +import {getBankInfoStepValues} from '@pages/ReimbursementAccount/NonUSD/utils/getBankInfoStepValues'; +import getInitialSubStepForBankInfoStep from '@pages/ReimbursementAccount/NonUSD/utils/getInitialSubStepForBankInfoStep'; +import getInputKeysForBankInfoStep from '@pages/ReimbursementAccount/NonUSD/utils/getInputKeysForBankInfoStep'; import {clearReimbursementAccountBankCreation, createCorpayBankAccount, getCorpayBankAccountFields} from '@userActions/BankAccounts'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -35,12 +38,15 @@ function BankInfo({onBackButtonPress, onSubmit}: BankInfoProps) { const policyID = reimbursementAccount?.achData?.policyID; const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`); const currency = policy?.outputCurrency ?? ''; - const country = reimbursementAccount?.achData?.[COUNTRY] ?? ''; + const country = reimbursementAccount?.achData?.[COUNTRY] ?? reimbursementAccountDraft?.[COUNTRY] ?? ''; + const inputKeys = getInputKeysForBankInfoStep(corpayFields); + const values = useMemo(() => getBankInfoStepValues(inputKeys, reimbursementAccountDraft, reimbursementAccount), [inputKeys, reimbursementAccount, reimbursementAccountDraft]); + const startFrom = getInitialSubStepForBankInfoStep(values, corpayFields); const submit = () => { const {formFields, isLoading, isSuccess, ...corpayData} = corpayFields ?? {}; - createCorpayBankAccount({...reimbursementAccountDraft, ...corpayData} as ReimbursementAccountForm, policyID); + createCorpayBankAccount({...values, ...corpayData} as ReimbursementAccountForm, policyID); }; useEffect(() => { @@ -72,7 +78,7 @@ function BankInfo({onBackButtonPress, onSubmit}: BankInfoProps) { prevScreen, moveTo, goToTheLastStep, - } = useSubStep({bodyContent, startFrom: 0, onFinished: submit}); + } = useSubStep({bodyContent, startFrom, onFinished: submit}); const handleBackButtonPress = () => { if (isEditing) { diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/AccountHolderDetails.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/AccountHolderDetails.tsx index 5cbeb629d9c6..9ce9e9862e81 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/AccountHolderDetails.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/AccountHolderDetails.tsx @@ -11,7 +11,7 @@ import useLocalize from '@hooks/useLocalize'; import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit'; import useThemeStyles from '@hooks/useThemeStyles'; import type {BankInfoSubStepProps} from '@pages/ReimbursementAccount/NonUSD/BankInfo/types'; -import getSubStepValues from '@pages/ReimbursementAccount/utils/getSubStepValues'; +import {getBankInfoStepValues} from '@pages/ReimbursementAccount/NonUSD/utils/getBankInfoStepValues'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {ReimbursementAccountForm} from '@src/types/form/ReimbursementAccountForm'; @@ -35,7 +35,10 @@ function AccountHolderDetails({onNext, isEditing, corpayFields}: BankInfoSubStep const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); - const defaultValues = useMemo(() => getSubStepValues(subStepKeys ?? {}, reimbursementAccountDraft, reimbursementAccount), [subStepKeys, reimbursementAccount, reimbursementAccountDraft]); + const defaultValues = useMemo( + () => getBankInfoStepValues(subStepKeys ?? {}, reimbursementAccountDraft, reimbursementAccount), + [subStepKeys, reimbursementAccount, reimbursementAccountDraft], + ); const handleSubmit = useReimbursementAccountStepFormSubmit({ fieldIds: fieldIds as Array>, diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/BankAccountDetails.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/BankAccountDetails.tsx index 052f8560c5ca..1f7fa8c3885c 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/BankAccountDetails.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/BankAccountDetails.tsx @@ -1,5 +1,6 @@ import React, {useCallback, useMemo} from 'react'; import {ActivityIndicator, View} from 'react-native'; +import {useOnyx} from 'react-native-onyx'; import FormProvider from '@components/Form/FormProvider'; import InputWrapper from '@components/Form/InputWrapper'; import type {FormInputErrors, FormOnyxKeys, FormOnyxValues} from '@components/Form/types'; @@ -10,18 +11,29 @@ import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccoun import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import type {BankInfoSubStepProps} from '@pages/ReimbursementAccount/NonUSD/BankInfo/types'; +import {getBankInfoStepValues} from '@pages/ReimbursementAccount/NonUSD/utils/getBankInfoStepValues'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import type {ReimbursementAccountForm} from '@src/types/form'; function BankAccountDetails({onNext, isEditing, corpayFields}: BankInfoSubStepProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const theme = useTheme(); + const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); + const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); const bankAccountDetailsFields = useMemo(() => { return corpayFields?.formFields?.filter((field) => !field.id.includes(CONST.NON_USD_BANK_ACCOUNT.BANK_INFO_STEP_ACCOUNT_HOLDER_KEY_PREFIX)); }, [corpayFields]); + const subStepKeys = bankAccountDetailsFields?.reduce((acc, field) => { + acc[field.id as keyof ReimbursementAccountForm] = field.id as keyof ReimbursementAccountForm; + return acc; + }, {} as Record); + + const defaultValues = getBankInfoStepValues(subStepKeys ?? {}, reimbursementAccountDraft, reimbursementAccount); + const fieldIds = bankAccountDetailsFields?.map((field) => field.id); const validate = useCallback( @@ -73,11 +85,12 @@ function BankAccountDetails({onNext, isEditing, corpayFields}: BankInfoSubStepPr aria-label={field.label} role={CONST.ROLE.PRESENTATION} shouldSaveDraft={!isEditing} + defaultValue={String(defaultValues[field.id as keyof typeof defaultValues]) ?? ''} /> ); }); - }, [bankAccountDetailsFields, styles.mb6, isEditing]); + }, [bankAccountDetailsFields, styles.mb6, isEditing, defaultValues]); return ( { - const keys: Record = {}; - corpayFields?.formFields?.forEach((field) => { - keys[field.id] = field.id as keyof ReimbursementAccountForm; - }); - return keys; - }, [corpayFields]); - const values = useMemo(() => getSubStepValues(inputKeys, reimbursementAccountDraft, reimbursementAccount), [inputKeys, reimbursementAccount, reimbursementAccountDraft]); + const inputKeys = getInputKeysForBankInfoStep(corpayFields); + const values = useMemo(() => getBankInfoStepValues(inputKeys, reimbursementAccountDraft, reimbursementAccount), [inputKeys, reimbursementAccount, reimbursementAccountDraft]); const items = useMemo( () => ( diff --git a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/BusinessInfo.tsx b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/BusinessInfo.tsx index 29a06bd1a3c5..6675305cccd3 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/BusinessInfo.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/BusinessInfo.tsx @@ -5,7 +5,6 @@ import InteractiveStepWrapper from '@components/InteractiveStepWrapper'; import useLocalize from '@hooks/useLocalize'; import useSubStep from '@hooks/useSubStep'; import type {SubStepProps} from '@hooks/useSubStep/types'; -import type {SaveCorpayOnboardingCompanyDetails} from '@libs/API/parameters/SaveCorpayOnboardingCompanyDetailsParams'; import getInitialSubStepForBusinessInfoStep from '@pages/ReimbursementAccount/NonUSD/utils/getInitialSubStepForBusinessInfoStep'; import getSubStepValues from '@pages/ReimbursementAccount/utils/getSubStepValues'; import {clearReimbursementAccountSaveCorpayOnboardingCompanyDetails, getCorpayOnboardingFields, saveCorpayOnboardingCompanyDetails} from '@userActions/BankAccounts'; @@ -31,8 +30,6 @@ type BusinessInfoProps = { onSubmit: () => void; }; -type BusinessInfoParamsPartial = Omit; - const bodyContent: Array> = [ Name, Address, @@ -85,14 +82,9 @@ function BusinessInfo({onBackButtonPress, onSubmit}: BusinessInfoProps) { }, [country]); const submit = useCallback(() => { - const params = {} as BusinessInfoParamsPartial; - Object.values(INPUT_KEYS).forEach((currentKey) => { - params[currentKey] = businessInfoStepValues[currentKey]; - }); - saveCorpayOnboardingCompanyDetails( { - ...params, + ...businessInfoStepValues, fundSourceCountries: country, fundDestinationCountries: country, currencyNeeded: currency, diff --git a/src/pages/ReimbursementAccount/NonUSD/utils/getBankInfoStepValues.ts b/src/pages/ReimbursementAccount/NonUSD/utils/getBankInfoStepValues.ts new file mode 100644 index 000000000000..795c338954ac --- /dev/null +++ b/src/pages/ReimbursementAccount/NonUSD/utils/getBankInfoStepValues.ts @@ -0,0 +1,68 @@ +import type {OnyxEntry} from 'react-native-onyx'; +import type {ReimbursementAccountForm} from '@src/types/form'; +import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; +import type {ReimbursementAccount} from '@src/types/onyx'; +import type {ACHData, Corpay} from '@src/types/onyx/ReimbursementAccount'; + +type SubStepValues = { + [TKey in TProps]: ReimbursementAccountForm[TKey]; +}; + +/** Some values are send under certain key and saved under different key by BE. + * This is forced on BE side which is asking us to send it under certain keys but then saves it and returns under different keys. + * This is why we need a separate util just for this step, so we can correctly gather default values for such cases */ +function getBankInfoStepValues( + inputKeys: Record, + reimbursementAccountDraft: OnyxEntry, + reimbursementAccount: OnyxEntry, +): SubStepValues { + return Object.entries(inputKeys).reduce((acc, [, value]) => { + switch (value) { + case INPUT_IDS.ADDITIONAL_DATA.ROUTING_CODE: + acc[value] = (reimbursementAccountDraft?.[value] ?? + reimbursementAccount?.achData?.[INPUT_IDS.BANK_INFO_STEP.ROUTING_NUMBER as keyof ACHData] ?? + '') as ReimbursementAccountForm[TProps]; + break; + case INPUT_IDS.ADDITIONAL_DATA.CORPAY.SWIFT_BIC_CODE: + acc[value] = (reimbursementAccountDraft?.[value] ?? + reimbursementAccount?.achData?.[INPUT_IDS.BANK_INFO_STEP.ROUTING_NUMBER as keyof ACHData] ?? + '') as ReimbursementAccountForm[TProps]; + break; + case INPUT_IDS.ADDITIONAL_DATA.ACCOUNT_HOLDER_NAME: + acc[value] = (reimbursementAccountDraft?.[value] ?? + reimbursementAccount?.achData?.[INPUT_IDS.ADDITIONAL_DATA.ADDRESS_NAME as keyof ACHData] ?? + '') as ReimbursementAccountForm[TProps]; + break; + case INPUT_IDS.ADDITIONAL_DATA.ACCOUNT_HOLDER_ADDRESS_1: + acc[value] = (reimbursementAccountDraft?.[value] ?? + reimbursementAccount?.achData?.[INPUT_IDS.ADDITIONAL_DATA.ADDRESS_STREET as keyof ACHData] ?? + '') as ReimbursementAccountForm[TProps]; + break; + case INPUT_IDS.ADDITIONAL_DATA.ACCOUNT_HOLDER_CITY: + acc[value] = (reimbursementAccountDraft?.[value] ?? + reimbursementAccount?.achData?.[INPUT_IDS.ADDITIONAL_DATA.ADDRESS_CITY as keyof ACHData] ?? + '') as ReimbursementAccountForm[TProps]; + break; + case INPUT_IDS.ADDITIONAL_DATA.ACCOUNT_HOLDER_REGION: + acc[value] = (reimbursementAccountDraft?.[value] ?? + reimbursementAccount?.achData?.[INPUT_IDS.ADDITIONAL_DATA.ADDRESS_STATE as keyof ACHData] ?? + '') as ReimbursementAccountForm[TProps]; + break; + case INPUT_IDS.ADDITIONAL_DATA.ACCOUNT_HOLDER_POSTAL: + acc[value] = (reimbursementAccountDraft?.[value] ?? + reimbursementAccount?.achData?.[INPUT_IDS.ADDITIONAL_DATA.ADDRESS_ZIP_CODE as keyof ACHData] ?? + '') as ReimbursementAccountForm[TProps]; + break; + default: + acc[value] = (reimbursementAccountDraft?.[value] ?? + reimbursementAccount?.achData?.[value as keyof ACHData] ?? + reimbursementAccount?.achData?.corpay?.[value as keyof Corpay] ?? + '') as ReimbursementAccountForm[TProps]; + break; + } + return acc; + }, {} as SubStepValues); +} + +export {getBankInfoStepValues}; +export type {SubStepValues}; diff --git a/src/pages/ReimbursementAccount/NonUSD/utils/getInitialSubStepForBankInfoStep.ts b/src/pages/ReimbursementAccount/NonUSD/utils/getInitialSubStepForBankInfoStep.ts new file mode 100644 index 000000000000..b2e604e2e0bc --- /dev/null +++ b/src/pages/ReimbursementAccount/NonUSD/utils/getInitialSubStepForBankInfoStep.ts @@ -0,0 +1,26 @@ +import CONST from '@src/CONST'; +import type {ReimbursementAccountForm} from '@src/types/form'; +import type {CorpayFields} from '@src/types/onyx'; +import type {SubStepValues} from './getBankInfoStepValues'; + +/** + * Returns the initial subStep for the Bank info step based on already existing data + */ +function getInitialSubStepForBusinessInfoStep(data: SubStepValues, corpayFields: CorpayFields | undefined): number { + const bankAccountDetailsFields = corpayFields?.formFields?.filter((field) => !field.id.includes(CONST.NON_USD_BANK_ACCOUNT.BANK_INFO_STEP_ACCOUNT_HOLDER_KEY_PREFIX)); + const accountHolderDetailsFields = corpayFields?.formFields?.filter((field) => field.id.includes(CONST.NON_USD_BANK_ACCOUNT.BANK_INFO_STEP_ACCOUNT_HOLDER_KEY_PREFIX)); + const hasAnyMissingBankAccountDetails = bankAccountDetailsFields?.some((field) => data?.[field.id as keyof ReimbursementAccountForm] === ''); + const hasAnyMissingAccountHolderDetails = accountHolderDetailsFields?.some((field) => data?.[field.id as keyof ReimbursementAccountForm] === ''); + + if (hasAnyMissingBankAccountDetails) { + return 0; + } + + if (hasAnyMissingAccountHolderDetails) { + return 1; + } + + return 2; +} + +export default getInitialSubStepForBusinessInfoStep; diff --git a/src/pages/ReimbursementAccount/NonUSD/utils/getInputKeysForBankInfoStep.ts b/src/pages/ReimbursementAccount/NonUSD/utils/getInputKeysForBankInfoStep.ts new file mode 100644 index 000000000000..4557054f71be --- /dev/null +++ b/src/pages/ReimbursementAccount/NonUSD/utils/getInputKeysForBankInfoStep.ts @@ -0,0 +1,12 @@ +import type {ReimbursementAccountForm} from '@src/types/form'; +import type {CorpayFields} from '@src/types/onyx'; + +function getInputKeysForBankInfoStep(corpayFields: CorpayFields | undefined): Record { + const keys: Record = {}; + corpayFields?.formFields?.forEach((field) => { + keys[field.id] = field.id as keyof ReimbursementAccountForm; + }); + return keys; +} + +export default getInputKeysForBankInfoStep; diff --git a/src/types/form/ReimbursementAccountForm.ts b/src/types/form/ReimbursementAccountForm.ts index 19e1f28e0613..76dfa3efbdb2 100644 --- a/src/types/form/ReimbursementAccountForm.ts +++ b/src/types/form/ReimbursementAccountForm.ts @@ -52,19 +52,44 @@ const INPUT_IDS = { AMOUNT1: 'amount1', AMOUNT2: 'amount2', AMOUNT3: 'amount3', + /** Some pairs are send under certain key and saved under different key by BE. + * This is forced on BE side which is asking us to send it under certain keys + * but then saves it and returns under different keys */ ADDITIONAL_DATA: { + /** This pair is send under 1ST key but saved under 2nd key */ ACCOUNT_HOLDER_NAME: 'accountHolderName', + ADDRESS_NAME: 'addressName', + + /** This pair is send under 1ST key but saved under 2nd key */ + ACCOUNT_HOLDER_ADDRESS_1: 'accountHolderAddress1', ADDRESS_STREET: 'addressStreet', + + /** This pair is send under 1ST key but saved under 2nd key */ + ACCOUNT_HOLDER_CITY: 'accountHolderCity', ADDRESS_CITY: 'addressCity', + + /** This pair is send under 1ST key but saved under 2nd key */ + ACCOUNT_HOLDER_REGION: 'accountHolderRegion', ADDRESS_STATE: 'addressState', + + /** This pair is send under 1ST key but saved under 2nd key */ + ACCOUNT_HOLDER_POSTAL: 'accountHolderPostal', ADDRESS_ZIP_CODE: 'addressZipCode', + + /** 2nd key from pair with ROUTING_NUMBER (shares it with SWIFT/BIC code) */ + ROUTING_CODE: 'routingCode', COUNTRY: 'country', CORPAY: { ACCOUNT_HOLDER_COUNTRY: 'accountHolderCountry', - SWIFT_CODE: 'swiftCode', + /** 2nd key from pair with ROUTING_NUMBER (shares it with routing code) */ + SWIFT_BIC_CODE: 'swiftBicCode', BANK_NAME: 'bankName', BANK_CITY: 'bankCity', - BANK_ADDRESS_LINE_1: 'bankAddress', + BANK_REGION: 'bankRegion', + BANK_POSTAL: 'bankPostal', + BANK_ADDRESS_LINE_1: 'bankAddressLine1', + BANK_COUNTRY: 'bankCountry', + BANK_CURRENCY: 'bankCurrency', BANK_STATEMENT: 'bankStatement', COMPANY_NAME: 'companyName', COMPANY_STREET: 'companyStreetAddress', @@ -201,12 +226,32 @@ type NonUSDReimbursementAccountAdditionalProps = { /** Name of the account holder */ [INPUT_IDS.ADDITIONAL_DATA.ACCOUNT_HOLDER_NAME]: string; + [INPUT_IDS.ADDITIONAL_DATA.ADDRESS_NAME]: string; + + /** Street of the account holder */ + [INPUT_IDS.ADDITIONAL_DATA.ACCOUNT_HOLDER_ADDRESS_1]: string; + [INPUT_IDS.ADDITIONAL_DATA.ADDRESS_STREET]: string; + + /** City of the account holder */ + [INPUT_IDS.ADDITIONAL_DATA.ACCOUNT_HOLDER_CITY]: string; + [INPUT_IDS.ADDITIONAL_DATA.ADDRESS_CITY]: string; + + /** State of the account holder */ + [INPUT_IDS.ADDITIONAL_DATA.ACCOUNT_HOLDER_REGION]: string; + [INPUT_IDS.ADDITIONAL_DATA.ADDRESS_STATE]: string; + + /** Postal code of the account holder */ + [INPUT_IDS.ADDITIONAL_DATA.ACCOUNT_HOLDER_POSTAL]: string; + [INPUT_IDS.ADDITIONAL_DATA.ADDRESS_ZIP_CODE]: string; + + /** Routing code */ + [INPUT_IDS.ADDITIONAL_DATA.ROUTING_CODE]: string; /** Country of the account holder */ [INPUT_IDS.ADDITIONAL_DATA.CORPAY.ACCOUNT_HOLDER_COUNTRY]: Country | ''; /** SWIFT code */ - [INPUT_IDS.ADDITIONAL_DATA.CORPAY.SWIFT_CODE]: string; + [INPUT_IDS.ADDITIONAL_DATA.CORPAY.SWIFT_BIC_CODE]: string; /** Bank name */ [INPUT_IDS.ADDITIONAL_DATA.CORPAY.BANK_NAME]: string; @@ -214,6 +259,18 @@ type NonUSDReimbursementAccountAdditionalProps = { /** Bank city */ [INPUT_IDS.ADDITIONAL_DATA.CORPAY.BANK_CITY]: string; + /** Bank region */ + [INPUT_IDS.ADDITIONAL_DATA.CORPAY.BANK_REGION]: string; + + /** Bank postal code */ + [INPUT_IDS.ADDITIONAL_DATA.CORPAY.BANK_POSTAL]: string; + + /** Bank country */ + [INPUT_IDS.ADDITIONAL_DATA.CORPAY.BANK_COUNTRY]: string; + + /** Bank currency */ + [INPUT_IDS.ADDITIONAL_DATA.CORPAY.BANK_CURRENCY]: string; + /** Bank address line 1 */ [INPUT_IDS.ADDITIONAL_DATA.CORPAY.BANK_ADDRESS_LINE_1]: string; diff --git a/src/types/onyx/ReimbursementAccount.ts b/src/types/onyx/ReimbursementAccount.ts index 44d1a2b61515..3531f6aeb792 100644 --- a/src/types/onyx/ReimbursementAccount.ts +++ b/src/types/onyx/ReimbursementAccount.ts @@ -15,14 +15,24 @@ type BankAccountSubStep = ValueOf; /** Model of Corpay data */ type Corpay = { + /** Account holder address - country */ + [INPUT_IDS.ADDITIONAL_DATA.CORPAY.ACCOUNT_HOLDER_COUNTRY]: Country | ''; /** Swift code */ - [INPUT_IDS.ADDITIONAL_DATA.CORPAY.SWIFT_CODE]?: string; + [INPUT_IDS.ADDITIONAL_DATA.CORPAY.SWIFT_BIC_CODE]: string; /** Bank name */ [INPUT_IDS.ADDITIONAL_DATA.CORPAY.BANK_NAME]: string; /** Bank address - city */ [INPUT_IDS.ADDITIONAL_DATA.CORPAY.BANK_CITY]: string; /** Bank address - street and zip code */ [INPUT_IDS.ADDITIONAL_DATA.CORPAY.BANK_ADDRESS_LINE_1]: string; + /** Bank region */ + [INPUT_IDS.ADDITIONAL_DATA.CORPAY.BANK_REGION]: string; + /** Bank postal code */ + [INPUT_IDS.ADDITIONAL_DATA.CORPAY.BANK_POSTAL]: string; + /** Bank country */ + [INPUT_IDS.ADDITIONAL_DATA.CORPAY.BANK_COUNTRY]: string; + /** Bank currency */ + [INPUT_IDS.ADDITIONAL_DATA.CORPAY.BANK_CURRENCY]: string; /** Company name */ [INPUT_IDS.ADDITIONAL_DATA.CORPAY.COMPANY_NAME]: string; /** Company address - street */ @@ -158,9 +168,6 @@ type ACHData = Partial Date: Mon, 10 Feb 2025 13:42:41 +0100 Subject: [PATCH 17/21] fix: polish --- .../BankInfo/subSteps/BankAccountDetails.tsx | 7 ++++--- .../NonUSD/BankInfo/subSteps/Confirmation.tsx | 16 +++++++++++++--- .../utils/getInitialSubStepForBankInfoStep.ts | 2 +- 3 files changed, 18 insertions(+), 7 deletions(-) diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/BankAccountDetails.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/BankAccountDetails.tsx index 1f7fa8c3885c..000e18bb37d0 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/BankAccountDetails.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/BankAccountDetails.tsx @@ -103,15 +103,16 @@ function BankAccountDetails({onNext, isEditing, corpayFields}: BankInfoSubStepPr > <> {translate('bankInfoStep.whatAreYour')} - {inputs} - {!inputs && ( - + {corpayFields?.isLoading ? ( + + ) : ( + inputs )} diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/Confirmation.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/Confirmation.tsx index 00856adbba46..ad902f057bbd 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/Confirmation.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/Confirmation.tsx @@ -1,10 +1,11 @@ import React, {useMemo} from 'react'; -import {View} from 'react-native'; +import {ActivityIndicator, View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import FormProvider from '@components/Form/FormProvider'; import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; +import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import type {BankInfoSubStepProps} from '@pages/ReimbursementAccount/NonUSD/BankInfo/types'; import {getBankInfoStepValues} from '@pages/ReimbursementAccount/NonUSD/utils/getBankInfoStepValues'; @@ -17,6 +18,7 @@ const {ACCOUNT_HOLDER_COUNTRY} = INPUT_IDS.ADDITIONAL_DATA.CORPAY; function Confirmation({onNext, onMove, corpayFields}: BankInfoSubStepProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); + const theme = useTheme(); const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); @@ -70,10 +72,18 @@ function Confirmation({onNext, onMove, corpayFields}: BankInfoSubStepProps) { style={[styles.flexGrow1]} submitButtonStyles={styles.mh5} > - + {translate('bankInfoStep.letsDoubleCheck')} {translate('bankInfoStep.thisBankAccount')} - {items} + {corpayFields?.isLoading ? ( + + ) : ( + items + )} ); diff --git a/src/pages/ReimbursementAccount/NonUSD/utils/getInitialSubStepForBankInfoStep.ts b/src/pages/ReimbursementAccount/NonUSD/utils/getInitialSubStepForBankInfoStep.ts index b2e604e2e0bc..8b14dd7cde01 100644 --- a/src/pages/ReimbursementAccount/NonUSD/utils/getInitialSubStepForBankInfoStep.ts +++ b/src/pages/ReimbursementAccount/NonUSD/utils/getInitialSubStepForBankInfoStep.ts @@ -12,7 +12,7 @@ function getInitialSubStepForBusinessInfoStep(data: SubStepValues data?.[field.id as keyof ReimbursementAccountForm] === ''); const hasAnyMissingAccountHolderDetails = accountHolderDetailsFields?.some((field) => data?.[field.id as keyof ReimbursementAccountForm] === ''); - if (hasAnyMissingBankAccountDetails) { + if (corpayFields === undefined || hasAnyMissingBankAccountDetails) { return 0; } From 74d1ec18f6328aab24dbb7389cab5da77290638e Mon Sep 17 00:00:00 2001 From: Michal Muzyk Date: Tue, 11 Feb 2025 11:15:16 +0100 Subject: [PATCH 18/21] comment --- .../ReimbursementAccount/VerifiedBankAccountFlowEntryPoint.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/ReimbursementAccount/VerifiedBankAccountFlowEntryPoint.tsx b/src/pages/ReimbursementAccount/VerifiedBankAccountFlowEntryPoint.tsx index a8c2c8fa73f3..4998e5c974c0 100644 --- a/src/pages/ReimbursementAccount/VerifiedBankAccountFlowEntryPoint.tsx +++ b/src/pages/ReimbursementAccount/VerifiedBankAccountFlowEntryPoint.tsx @@ -238,6 +238,7 @@ function VerifiedBankAccountFlowEntryPoint({ title={translate('workspace.bankAccount.startOver')} icon={Expensicons.RotateLeft} iconFill={theme.iconMenu} + // TODO add method for non USD accounts in next issue - https://github.com/Expensify/App/issues/50912 onPress={requestResetFreePlanBankAccount} shouldShowRightIcon wrapperStyle={[styles.cardMenuItem, styles.mt4]} From 29ec0eca36d7a5c62a34a0b190f33c43f7b6d42e Mon Sep 17 00:00:00 2001 From: Michal Muzyk Date: Wed, 12 Feb 2025 08:46:29 +0100 Subject: [PATCH 19/21] feat: cut bank statement from step 2 --- .../NonUSD/BankInfo/BankInfo.tsx | 4 +- .../NonUSD/BankInfo/subSteps/Confirmation.tsx | 51 ++++---- .../BankInfo/subSteps/UploadStatement.tsx | 110 ------------------ src/types/form/ReimbursementAccountForm.ts | 4 - src/types/onyx/ReimbursementAccount.ts | 2 - 5 files changed, 21 insertions(+), 150 deletions(-) delete mode 100644 src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/UploadStatement.tsx diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx index 75f67e7e97bd..fae42c0207a8 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx @@ -16,7 +16,6 @@ import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; import AccountHolderDetails from './subSteps/AccountHolderDetails'; import BankAccountDetails from './subSteps/BankAccountDetails'; import Confirmation from './subSteps/Confirmation'; -import UploadStatement from './subSteps/UploadStatement'; import type {BankInfoSubStepProps} from './types'; const {COUNTRY} = INPUT_IDS.ADDITIONAL_DATA; @@ -67,8 +66,7 @@ function BankInfo({onBackButtonPress, onSubmit}: BankInfoProps) { getCorpayBankAccountFields(country, currency); }, [country, currency]); - const bodyContent: Array> = - currency !== CONST.CURRENCY.AUD ? [BankAccountDetails, AccountHolderDetails, Confirmation] : [BankAccountDetails, AccountHolderDetails, UploadStatement, Confirmation]; + const bodyContent: Array> = [BankAccountDetails, AccountHolderDetails, Confirmation]; const { componentToRender: SubStep, diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/Confirmation.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/Confirmation.tsx index ad902f057bbd..037f54ca8fea 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/Confirmation.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/Confirmation.tsx @@ -26,42 +26,31 @@ function Confirmation({onNext, onMove, corpayFields}: BankInfoSubStepProps) { const values = useMemo(() => getBankInfoStepValues(inputKeys, reimbursementAccountDraft, reimbursementAccount), [inputKeys, reimbursementAccount, reimbursementAccountDraft]); const items = useMemo( - () => ( - <> - {corpayFields?.formFields?.map((field) => { - let title = values[field.id as keyof typeof values] ? String(values[field.id as keyof typeof values]) : ''; + () => + corpayFields?.formFields?.map((field) => { + let title = values[field.id as keyof typeof values] ? String(values[field.id as keyof typeof values]) : ''; - if (field.id === ACCOUNT_HOLDER_COUNTRY) { - title = CONST.ALL_COUNTRIES[title as keyof typeof CONST.ALL_COUNTRIES]; - } + if (field.id === ACCOUNT_HOLDER_COUNTRY) { + title = CONST.ALL_COUNTRIES[title as keyof typeof CONST.ALL_COUNTRIES]; + } - return ( - { - if (!field.id.includes(CONST.NON_USD_BANK_ACCOUNT.BANK_INFO_STEP_ACCOUNT_HOLDER_KEY_PREFIX)) { - onMove(0); - } else { - onMove(1); - } - }} - key={field.id} - /> - ); - })} - {!!reimbursementAccountDraft?.[INPUT_IDS.ADDITIONAL_DATA.CORPAY.BANK_STATEMENT] && ( + return ( file.name).join(', ')} + description={field.label} + title={title} shouldShowRightIcon - onPress={() => onMove(2)} + onPress={() => { + if (!field.id.includes(CONST.NON_USD_BANK_ACCOUNT.BANK_INFO_STEP_ACCOUNT_HOLDER_KEY_PREFIX)) { + onMove(0); + } else { + onMove(1); + } + }} + key={field.id} /> - )} - - ), - [corpayFields, onMove, reimbursementAccountDraft, translate, values], + ); + }), + [corpayFields, onMove, values], ); return ( diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/UploadStatement.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/UploadStatement.tsx deleted file mode 100644 index 13831e8cc12d..000000000000 --- a/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/UploadStatement.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import React, {useCallback, useState} from 'react'; -import {View} from 'react-native'; -import {useOnyx} from 'react-native-onyx'; -import type {FileObject} from '@components/AttachmentModal'; -import FormProvider from '@components/Form/FormProvider'; -import InputWrapper from '@components/Form/InputWrapper'; -import type {FormInputErrors, FormOnyxValues} from '@components/Form/types'; -import Text from '@components/Text'; -import UploadFile from '@components/UploadFile'; -import useLocalize from '@hooks/useLocalize'; -import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit'; -import type {SubStepProps} from '@hooks/useSubStep/types'; -import useThemeStyles from '@hooks/useThemeStyles'; -import {getLastFourDigits} from '@libs/BankAccountUtils'; -import {getFieldRequiredErrors} from '@libs/ValidationUtils'; -import WhyLink from '@pages/ReimbursementAccount/NonUSD/WhyLink'; -import {clearErrorFields, setDraftValues, setErrorFields} from '@userActions/FormActions'; -import CONST from '@src/CONST'; -import ONYXKEYS from '@src/ONYXKEYS'; -import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; - -type UploadStatementProps = SubStepProps; - -const {BANK_STATEMENT} = INPUT_IDS.ADDITIONAL_DATA.CORPAY; -const STEP_FIELDS = [BANK_STATEMENT]; - -function UploadStatement({onNext, isEditing}: UploadStatementProps) { - const {translate} = useLocalize(); - const styles = useThemeStyles(); - - const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); - const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); - - const defaultValues = { - [BANK_STATEMENT]: reimbursementAccount?.achData?.corpay?.[BANK_STATEMENT] ?? reimbursementAccountDraft?.[BANK_STATEMENT] ?? [], - }; - - const [uploadedIDs, setUploadedID] = useState(defaultValues[BANK_STATEMENT]); - - const validate = useCallback((values: FormOnyxValues): FormInputErrors => { - const baseError = getFieldRequiredErrors(values, STEP_FIELDS); - - if (baseError) { - return baseError; - } - - return {}; - }, []); - - const handleSubmit = useReimbursementAccountStepFormSubmit({ - fieldIds: STEP_FIELDS, - onNext, - shouldSaveDraft: isEditing, - }); - - const handleSelectIDFile = (files: FileObject[]) => { - setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[BANK_STATEMENT]: [...uploadedIDs, ...files]}); - setUploadedID((prev) => [...prev, ...files]); - }; - - const handleRemoveIDFile = (fileName: string) => { - const newUploadedIDs = uploadedIDs.filter((file) => file.name !== fileName); - setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[BANK_STATEMENT]: newUploadedIDs}); - setUploadedID(newUploadedIDs); - }; - - const setUploadError = (error: string) => { - if (!error) { - clearErrorFields(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM); - return; - } - - setErrorFields(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[BANK_STATEMENT]: {onUpload: error}}); - }; - - return ( - - - {translate('bankInfoStep.uploadYourLatest')} - - {translate('bankInfoStep.pleaseUpload', {lastFourDigits: getLastFourDigits(reimbursementAccountDraft?.accountNumber ?? '')})} - - {translate('bankInfoStep.bankStatement')} - - - - - ); -} - -UploadStatement.displayName = 'UploadStatement'; - -export default UploadStatement; diff --git a/src/types/form/ReimbursementAccountForm.ts b/src/types/form/ReimbursementAccountForm.ts index 76dfa3efbdb2..5c0537600db4 100644 --- a/src/types/form/ReimbursementAccountForm.ts +++ b/src/types/form/ReimbursementAccountForm.ts @@ -90,7 +90,6 @@ const INPUT_IDS = { BANK_ADDRESS_LINE_1: 'bankAddressLine1', BANK_COUNTRY: 'bankCountry', BANK_CURRENCY: 'bankCurrency', - BANK_STATEMENT: 'bankStatement', COMPANY_NAME: 'companyName', COMPANY_STREET: 'companyStreetAddress', COMPANY_CITY: 'companyCity', @@ -274,9 +273,6 @@ type NonUSDReimbursementAccountAdditionalProps = { /** Bank address line 1 */ [INPUT_IDS.ADDITIONAL_DATA.CORPAY.BANK_ADDRESS_LINE_1]: string; - /** Bank statement file */ - [INPUT_IDS.ADDITIONAL_DATA.CORPAY.BANK_STATEMENT]: FileObject[]; - /** Company name */ [INPUT_IDS.ADDITIONAL_DATA.CORPAY.COMPANY_NAME]: string; diff --git a/src/types/onyx/ReimbursementAccount.ts b/src/types/onyx/ReimbursementAccount.ts index 3531f6aeb792..4ffbe7deeb8a 100644 --- a/src/types/onyx/ReimbursementAccount.ts +++ b/src/types/onyx/ReimbursementAccount.ts @@ -135,8 +135,6 @@ type Corpay = { [INPUT_IDS.ADDITIONAL_DATA.CORPAY.CONSENT_TO_PRIVACY_NOTICE]: boolean; /** Checkbox - authorized to bind to client to agreement */ [INPUT_IDS.ADDITIONAL_DATA.CORPAY.AUTHORIZED_TO_BIND_CLIENT_TO_AGREEMENT]: boolean; - /** Bank statement */ - [INPUT_IDS.ADDITIONAL_DATA.CORPAY.BANK_STATEMENT]: FileObject[]; /** Is user also an owner */ [INPUT_IDS.ADDITIONAL_DATA.CORPAY.OWNS_MORE_THAN_25_PERCENT]: boolean; /** Are the more owners */ From 7975811ab41d478b75a8e0793bcfeb61501022f3 Mon Sep 17 00:00:00 2001 From: Michal Muzyk Date: Fri, 21 Feb 2025 11:32:55 +0100 Subject: [PATCH 20/21] fix: display continue setup after going back --- Mobile-Expensify | 2 +- .../NonUSD/NonUSDVerifiedBankAccountFlow.tsx | 4 +++- .../ReimbursementAccount/ReimbursementAccountPage.tsx | 9 +++++++++ 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/Mobile-Expensify b/Mobile-Expensify index 5cdb2418ac3b..110bbdc8aa60 160000 --- a/Mobile-Expensify +++ b/Mobile-Expensify @@ -1 +1 @@ -Subproject commit 5cdb2418ac3b258bd94c47d2f4cb9af07b27e46d +Subproject commit 110bbdc8aa60fe5d48a4eebb69ef9bd9a4290c54 diff --git a/src/pages/ReimbursementAccount/NonUSD/NonUSDVerifiedBankAccountFlow.tsx b/src/pages/ReimbursementAccount/NonUSD/NonUSDVerifiedBankAccountFlow.tsx index 6ee62276cb44..1dd74768ce92 100644 --- a/src/pages/ReimbursementAccount/NonUSD/NonUSDVerifiedBankAccountFlow.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/NonUSDVerifiedBankAccountFlow.tsx @@ -11,9 +11,10 @@ import SignerInfo from './SignerInfo'; type NonUSDVerifiedBankAccountFlowProps = { nonUSDBankAccountStep: string; setNonUSDBankAccountStep: (step: string | null) => void; + setShouldShowContinueSetupButton: (shouldShowConnectedVerifiedBankAccount: boolean) => void; }; -function NonUSDVerifiedBankAccountFlow({nonUSDBankAccountStep, setNonUSDBankAccountStep}: NonUSDVerifiedBankAccountFlowProps) { +function NonUSDVerifiedBankAccountFlow({nonUSDBankAccountStep, setNonUSDBankAccountStep, setShouldShowContinueSetupButton}: NonUSDVerifiedBankAccountFlowProps) { const handleNextNonUSDBankAccountStep = () => { switch (nonUSDBankAccountStep) { case CONST.NON_USD_BANK_ACCOUNT.STEP.COUNTRY: @@ -42,6 +43,7 @@ function NonUSDVerifiedBankAccountFlow({nonUSDBankAccountStep, setNonUSDBankAcco const nonUSDBankAccountsGoBack = () => { switch (nonUSDBankAccountStep) { case CONST.NON_USD_BANK_ACCOUNT.STEP.COUNTRY: + setShouldShowContinueSetupButton(true); setNonUSDBankAccountStep(null); break; case CONST.NON_USD_BANK_ACCOUNT.STEP.BANK_INFO: diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx index 31a4e7cdf3b0..1d5329d75fc5 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx @@ -56,6 +56,8 @@ const SUPPORTED_FOREIGN_CURRENCIES: string[] = [CONST.CURRENCY.EUR, CONST.CURREN function ReimbursementAccountPage({route, policy, isLoadingPolicy}: ReimbursementAccountPageProps) { const session = useSession(); const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); + const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); + const [corpayFields] = useOnyx(ONYXKEYS.CORPAY_FIELDS); const [plaidCurrentEvent = ''] = useOnyx(ONYXKEYS.PLAID_CURRENT_EVENT); const [onfidoToken = ''] = useOnyx(ONYXKEYS.ONFIDO_TOKEN); const [isLoadingApp = false] = useOnyx(ONYXKEYS.IS_LOADING_APP); @@ -71,6 +73,7 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy}: Reimbursemen const prevReimbursementAccount = usePrevious(reimbursementAccount); const prevIsOffline = usePrevious(isOffline); const policyCurrency = policy?.outputCurrency ?? ''; + const nonUSDCountryDraftValue = reimbursementAccountDraft?.country ?? ''; const {isDevelopment} = useEnvironment(); const [isDebugModeEnabled] = useOnyx(ONYXKEYS.USER, {selector: (user) => !!user?.isDebugModeEnabled}); @@ -241,6 +244,11 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy}: Reimbursemen const continueNonUSDVBBASetup = () => { setShouldShowContinueSetupButton(false); + if (policyCurrency === CONST.CURRENCY.EUR && nonUSDCountryDraftValue !== '') { + setNonUSDBankAccountStep(corpayFields !== undefined ? CONST.NON_USD_BANK_ACCOUNT.STEP.BANK_INFO : CONST.NON_USD_BANK_ACCOUNT.STEP.COUNTRY); + return; + } + if (achData?.created && achData?.corpay?.companyName === undefined) { setNonUSDBankAccountStep(CONST.NON_USD_BANK_ACCOUNT.STEP.BUSINESS_INFO); return; @@ -403,6 +411,7 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy}: Reimbursemen ); } From 5778c46790c8cbb96ea7347f16c53d34ec1d8d4f Mon Sep 17 00:00:00 2001 From: Michal Muzyk Date: Mon, 24 Feb 2025 09:30:30 +0100 Subject: [PATCH 21/21] fix: remove submodule changes --- Mobile-Expensify | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Mobile-Expensify b/Mobile-Expensify index 110bbdc8aa60..7bc522cbca72 160000 --- a/Mobile-Expensify +++ b/Mobile-Expensify @@ -1 +1 @@ -Subproject commit 110bbdc8aa60fe5d48a4eebb69ef9bd9a4290c54 +Subproject commit 7bc522cbca72780fa3b9cea498d88c27a2b0b1d8