From 556f0864d975f1c619694d205c77762a49feb6aa Mon Sep 17 00:00:00 2001 From: Tomasz Lesniakiewicz Date: Thu, 16 Jul 2026 15:42:40 +0200 Subject: [PATCH 1/2] enter-signer-info-refactor --- src/CONST/index.ts | 8 +++ src/ROUTES.ts | 8 +-- src/hooks/useEnterSignerInfoStepFormSubmit.ts | 4 +- src/libs/Navigation/types.ts | 2 + .../EnterSignerInfo/index.tsx | 53 +++++++++++++------ .../EnterSignerInfo/subSteps/Address.tsx | 4 +- .../EnterSignerInfo/subSteps/Confirmation.tsx | 4 +- .../EnterSignerInfo/subSteps/DateOfBirth.tsx | 4 +- .../EnterSignerInfo/subSteps/JobTitle.tsx | 4 +- .../EnterSignerInfo/subSteps/Name.tsx | 4 +- .../subSteps/UploadDocuments.tsx | 4 +- 11 files changed, 65 insertions(+), 34 deletions(-) diff --git a/src/CONST/index.ts b/src/CONST/index.ts index 7d37ca62ac30..79869099926a 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 f7b9df0bae9d..2b19aff3ef6e 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -1284,12 +1284,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 6303a525a220..29099f90f605 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..aba9ce9ea746 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,20 @@ 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(); From 5a14cc329b45891fb962a61e6bab46ff13f3981d Mon Sep 17 00:00:00 2001 From: Tomasz Lesniakiewicz Date: Thu, 16 Jul 2026 19:31:15 +0200 Subject: [PATCH 2/2] fix: add go-back escape to EnterSignerInfo loading indicator --- src/pages/ReimbursementAccount/EnterSignerInfo/index.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/EnterSignerInfo/index.tsx b/src/pages/ReimbursementAccount/EnterSignerInfo/index.tsx index aba9ce9ea746..9cbfcf636c6a 100644 --- a/src/pages/ReimbursementAccount/EnterSignerInfo/index.tsx +++ b/src/pages/ReimbursementAccount/EnterSignerInfo/index.tsx @@ -110,7 +110,12 @@ function EnterSignerInfo({route}: EnterSignerInfoProps) { }, [isEditing, moveTo, pageIndex, prevPage]); if (isRedirecting) { - return ; + return ( + + ); } return (