diff --git a/src/CONST/index.ts b/src/CONST/index.ts index 8815f0a12af4..dc978d3ef72e 100644 --- a/src/CONST/index.ts +++ b/src/CONST/index.ts @@ -962,6 +962,14 @@ const CONST = { }, ENTER_SIGNER_INFO: { ALLOWED_FILE_TYPES: ['pdf', 'jpg', 'jpeg', 'png'], + SUB_PAGE_NAMES: { + NAME: 'name', + JOB_TITLE: 'job-title', + DATE_OF_BIRTH: 'date-of-birth', + ADDRESS: 'address', + UPLOAD_DOCUMENTS: 'upload-documents', + CONFIRMATION: 'confirmation', + }, }, INCORPORATION_TYPES: { LLC: 'LLC', diff --git a/src/ROUTES.ts b/src/ROUTES.ts index c780d47199f8..0cc898e71a76 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -1273,12 +1273,14 @@ const ROUTES = { }, }, BANK_ACCOUNT_ENTER_SIGNER_INFO: { - route: 'bank-account/enter-signer-info', - getRoute: (policyID: string | undefined, bankAccountID: string | undefined, isCompleted: boolean) => { + route: 'bank-account/enter-signer-info/:subPage?/:action?', + getRoute: (policyID: string | undefined, bankAccountID: string | undefined, isCompleted: boolean, subPage?: string, action?: 'edit') => { if (!policyID) { Log.warn('Invalid policyID is used to build the BANK_ACCOUNT_ENTER_SIGNER_INFO route'); } - return `bank-account/enter-signer-info?policyID=${policyID}&bankAccountID=${bankAccountID}&isCompleted=${isCompleted}` as const; + const subPagePart = subPage ? `/${subPage}` : ''; + const actionPart = action ? `/${action}` : ''; + return `bank-account/enter-signer-info${subPagePart}${actionPart}?policyID=${policyID}&bankAccountID=${bankAccountID}&isCompleted=${isCompleted}` as const; }, }, BANK_ACCOUNT_CONNECT_EXISTING_BUSINESS_BANK_ACCOUNT: { diff --git a/src/hooks/useEnterSignerInfoStepFormSubmit.ts b/src/hooks/useEnterSignerInfoStepFormSubmit.ts index 0a1151812c8e..dbf3da97b41e 100644 --- a/src/hooks/useEnterSignerInfoStepFormSubmit.ts +++ b/src/hooks/useEnterSignerInfoStepFormSubmit.ts @@ -3,11 +3,11 @@ import type {FormOnyxKeys} from '@components/Form/types'; import type {OnyxFormKey} from '@src/ONYXKEYS'; import ONYXKEYS from '@src/ONYXKEYS'; -import type {SubStepProps} from './useSubStep/types'; +import type {SubPageProps} from './useSubPage/types'; import useStepFormSubmit from './useStepFormSubmit'; -type UseEnterSignerInfoStepFormSubmit = Pick & { +type UseEnterSignerInfoStepFormSubmit = Pick & { formId?: OnyxFormKey; fieldIds: Array>; shouldSaveDraft: boolean; diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index 7384568c7d11..d0ae739c7c70 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -2464,6 +2464,8 @@ type ReimbursementAccountEnterSignerInfoNavigatorParamList = { policyID: string; bankAccountID: string; isCompleted: string; + subPage?: string; + action?: 'edit'; }; }; diff --git a/src/pages/ReimbursementAccount/EnterSignerInfo/index.tsx b/src/pages/ReimbursementAccount/EnterSignerInfo/index.tsx index e8ee58e11210..9cbfcf636c6a 100644 --- a/src/pages/ReimbursementAccount/EnterSignerInfo/index.tsx +++ b/src/pages/ReimbursementAccount/EnterSignerInfo/index.tsx @@ -1,9 +1,10 @@ +import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import InteractiveStepWrapper from '@components/InteractiveStepWrapper'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; -import useSubStep from '@hooks/useSubStep'; -import type {SubStepProps} from '@hooks/useSubStep/types'; +import useSubPage from '@hooks/useSubPage'; +import type {SubPageProps} from '@hooks/useSubPage/types'; import Navigation from '@navigation/Navigation'; import type {PlatformStackScreenProps} from '@navigation/PlatformStackNavigation/types'; @@ -12,11 +13,11 @@ import type {ReimbursementAccountEnterSignerInfoNavigatorParamList} from '@navig import {clearEnterSignerInformationFormSave, saveCorpayOnboardingDirectorInformation} from '@userActions/BankAccounts'; import {clearErrors} from '@userActions/FormActions'; +import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -import type {ComponentType} from 'react'; - import React, {useCallback, useEffect} from 'react'; import Address from './subSteps/Address'; @@ -29,9 +30,20 @@ import getSignerDetailsAndSignerFiles from './utils/getSignerDetailsAndSignerFil type EnterSignerInfoProps = PlatformStackScreenProps; -type EnterSignerInfoFormSubStepProps = SubStepProps & {policyID: string}; +type EnterSignerInfoFormSubPageProps = SubPageProps & {policyID: string}; + +const SUB_PAGE_NAMES = CONST.ENTER_SIGNER_INFO.SUB_PAGE_NAMES; + +const pages = [ + {pageName: SUB_PAGE_NAMES.NAME, component: Name}, + {pageName: SUB_PAGE_NAMES.JOB_TITLE, component: JobTitle}, + {pageName: SUB_PAGE_NAMES.DATE_OF_BIRTH, component: DateOfBirth}, + {pageName: SUB_PAGE_NAMES.ADDRESS, component: Address}, + {pageName: SUB_PAGE_NAMES.UPLOAD_DOCUMENTS, component: UploadDocuments}, + {pageName: SUB_PAGE_NAMES.CONFIRMATION, component: Confirmation}, +]; -const bodyContent: Array> = [Name, JobTitle, DateOfBirth, Address, UploadDocuments, Confirmation]; +const confirmationIndex = pages.findIndex((page) => page.pageName === SUB_PAGE_NAMES.CONFIRMATION); function EnterSignerInfo({route}: EnterSignerInfoProps) { const {translate} = useLocalize(); @@ -51,15 +63,18 @@ function EnterSignerInfo({route}: EnterSignerInfoProps) { }); }, [account?.primaryLogin, bankAccountID, enterSignerInfoFormDraft]); + const buildRoute = (pageName: string, action?: 'edit') => + ROUTES.BANK_ACCOUNT_ENTER_SIGNER_INFO.getRoute(policyID, route.params.bankAccountID, route.params.isCompleted === 'true', pageName, action); + const { - componentToRender: EnterSignerInfoForm, + CurrentPage: EnterSignerInfoForm, isEditing, - screenIndex, - nextScreen, - prevScreen, + pageIndex, + nextPage, + prevPage, moveTo, - goToTheLastStep, - } = useSubStep({bodyContent, startFrom: 0, onFinished: submit}); + isRedirecting, + } = useSubPage({pages, startFrom: 0, onFinished: submit, buildRoute}); useEffect(() => { if (enterSignerInfoForm?.errors || enterSignerInfoForm?.isSavingSignerInformation || !enterSignerInfoForm?.isSuccess) { @@ -83,16 +98,25 @@ function EnterSignerInfo({route}: EnterSignerInfoProps) { const handleBackButtonPress = useCallback(() => { clearErrors(ONYXKEYS.FORMS.ENTER_SINGER_INFO_FORM); if (isEditing) { - goToTheLastStep(); + moveTo(confirmationIndex, false); return; } - if (screenIndex > 0) { - prevScreen(); + if (pageIndex > 0) { + prevPage(); } else { Navigation.goBack(); } - }, [goToTheLastStep, isEditing, prevScreen, screenIndex]); + }, [isEditing, moveTo, pageIndex, prevPage]); + + if (isRedirecting) { + return ( + + ); + } return ( diff --git a/src/pages/ReimbursementAccount/EnterSignerInfo/subSteps/Address.tsx b/src/pages/ReimbursementAccount/EnterSignerInfo/subSteps/Address.tsx index 334cffaf0ff4..0d39cfdc3861 100644 --- a/src/pages/ReimbursementAccount/EnterSignerInfo/subSteps/Address.tsx +++ b/src/pages/ReimbursementAccount/EnterSignerInfo/subSteps/Address.tsx @@ -3,7 +3,7 @@ import AddressStep from '@components/SubStepForms/AddressStep'; import useEnterSignerInfoStepFormSubmit from '@hooks/useEnterSignerInfoStepFormSubmit'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; -import type {SubStepProps} from '@hooks/useSubStep/types'; +import type {SubPageProps} from '@hooks/useSubPage/types'; import CONST from '@src/CONST'; import type {Country} from '@src/CONST'; @@ -12,7 +12,7 @@ import INPUT_IDS from '@src/types/form/EnterSignerInfoForm'; import React, {useMemo, useState} from 'react'; -function Address({onNext, isEditing, onMove}: SubStepProps) { +function Address({onNext, isEditing, onMove}: SubPageProps) { const {translate} = useLocalize(); const [enterSignerInfoFormDraft] = useOnyx(ONYXKEYS.FORMS.ENTER_SINGER_INFO_FORM_DRAFT); diff --git a/src/pages/ReimbursementAccount/EnterSignerInfo/subSteps/Confirmation.tsx b/src/pages/ReimbursementAccount/EnterSignerInfo/subSteps/Confirmation.tsx index ea068426d349..86cb2e00fa45 100644 --- a/src/pages/ReimbursementAccount/EnterSignerInfo/subSteps/Confirmation.tsx +++ b/src/pages/ReimbursementAccount/EnterSignerInfo/subSteps/Confirmation.tsx @@ -2,7 +2,7 @@ import ConfirmationStep from '@components/SubStepForms/ConfirmationStep'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; -import type {SubStepProps} from '@hooks/useSubStep/types'; +import type {SubPageProps} from '@hooks/useSubPage/types'; import mapCurrencyToCountry from '@libs/mapCurrencyToCountry'; @@ -13,7 +13,7 @@ import INPUT_IDS from '@src/types/form/EnterSignerInfoForm'; import React from 'react'; -type ConfirmationProps = SubStepProps & {policyID: string}; +type ConfirmationProps = SubPageProps & {policyID: string}; function Confirmation({onNext, onMove, isEditing, policyID}: ConfirmationProps) { const {translate} = useLocalize(); diff --git a/src/pages/ReimbursementAccount/EnterSignerInfo/subSteps/DateOfBirth.tsx b/src/pages/ReimbursementAccount/EnterSignerInfo/subSteps/DateOfBirth.tsx index 44a66c325f13..c3e7aae33fc7 100644 --- a/src/pages/ReimbursementAccount/EnterSignerInfo/subSteps/DateOfBirth.tsx +++ b/src/pages/ReimbursementAccount/EnterSignerInfo/subSteps/DateOfBirth.tsx @@ -3,7 +3,7 @@ import DateOfBirthStep from '@components/SubStepForms/DateOfBirthStep'; import useEnterSignerInfoStepFormSubmit from '@hooks/useEnterSignerInfoStepFormSubmit'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; -import type {SubStepProps} from '@hooks/useSubStep/types'; +import type {SubPageProps} from '@hooks/useSubPage/types'; import useThemeStyles from '@hooks/useThemeStyles'; import WhyLink from '@pages/ReimbursementAccount/WhyLink'; @@ -13,7 +13,7 @@ import INPUT_IDS from '@src/types/form/EnterSignerInfoForm'; import React from 'react'; -function DateOfBirth({onNext, onMove, isEditing}: SubStepProps) { +function DateOfBirth({onNext, onMove, isEditing}: SubPageProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); diff --git a/src/pages/ReimbursementAccount/EnterSignerInfo/subSteps/JobTitle.tsx b/src/pages/ReimbursementAccount/EnterSignerInfo/subSteps/JobTitle.tsx index 256e105e8d6a..a52e11c2ce77 100644 --- a/src/pages/ReimbursementAccount/EnterSignerInfo/subSteps/JobTitle.tsx +++ b/src/pages/ReimbursementAccount/EnterSignerInfo/subSteps/JobTitle.tsx @@ -4,7 +4,7 @@ import SingleFieldStep from '@components/SubStepForms/SingleFieldStep'; import useEnterSignerInfoStepFormSubmit from '@hooks/useEnterSignerInfoStepFormSubmit'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; -import type {SubStepProps} from '@hooks/useSubStep/types'; +import type {SubPageProps} from '@hooks/useSubPage/types'; import {getFieldRequiredErrors} from '@libs/ValidationUtils'; @@ -14,7 +14,7 @@ import INPUT_IDS from '@src/types/form/EnterSignerInfoForm'; import React, {useCallback} from 'react'; -function JobTitle({onNext, onMove, isEditing}: SubStepProps) { +function JobTitle({onNext, onMove, isEditing}: SubPageProps) { const {translate} = useLocalize(); const [enterSignerInfoFormDraft] = useOnyx(ONYXKEYS.FORMS.ENTER_SINGER_INFO_FORM_DRAFT); diff --git a/src/pages/ReimbursementAccount/EnterSignerInfo/subSteps/Name.tsx b/src/pages/ReimbursementAccount/EnterSignerInfo/subSteps/Name.tsx index a1136bf47bb7..ec53c897cee5 100644 --- a/src/pages/ReimbursementAccount/EnterSignerInfo/subSteps/Name.tsx +++ b/src/pages/ReimbursementAccount/EnterSignerInfo/subSteps/Name.tsx @@ -4,7 +4,7 @@ import SingleFieldStep from '@components/SubStepForms/SingleFieldStep'; import useEnterSignerInfoStepFormSubmit from '@hooks/useEnterSignerInfoStepFormSubmit'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; -import type {SubStepProps} from '@hooks/useSubStep/types'; +import type {SubPageProps} from '@hooks/useSubPage/types'; import {getFieldRequiredErrors, isValidLegalName} from '@libs/ValidationUtils'; @@ -14,7 +14,7 @@ import INPUT_IDS from '@src/types/form/EnterSignerInfoForm'; import React, {useCallback} from 'react'; -function Name({onNext, onMove, isEditing}: SubStepProps) { +function Name({onNext, onMove, isEditing}: SubPageProps) { const {translate} = useLocalize(); const [enterSignerInfoFormDraft] = useOnyx(ONYXKEYS.FORMS.ENTER_SINGER_INFO_FORM_DRAFT); diff --git a/src/pages/ReimbursementAccount/EnterSignerInfo/subSteps/UploadDocuments.tsx b/src/pages/ReimbursementAccount/EnterSignerInfo/subSteps/UploadDocuments.tsx index c332856f670f..b9e1c583e8bd 100644 --- a/src/pages/ReimbursementAccount/EnterSignerInfo/subSteps/UploadDocuments.tsx +++ b/src/pages/ReimbursementAccount/EnterSignerInfo/subSteps/UploadDocuments.tsx @@ -9,7 +9,7 @@ import UploadFile from '@components/UploadFile'; import useEnterSignerInfoStepFormSubmit from '@hooks/useEnterSignerInfoStepFormSubmit'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; -import type {SubStepProps} from '@hooks/useSubStep/types'; +import type {SubPageProps} from '@hooks/useSubPage/types'; import useThemeStyles from '@hooks/useThemeStyles'; import {getEnvironmentURL} from '@libs/Environment/Environment'; @@ -30,7 +30,7 @@ import type {FileObject} from '@src/types/utils/Attachment'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; import {View} from 'react-native'; -type UploadDocumentsProps = SubStepProps & {policyID: string}; +type UploadDocumentsProps = SubPageProps & {policyID: string}; function UploadDocuments({onNext, isEditing, policyID}: UploadDocumentsProps) { const {translate} = useLocalize();