EnterSignerInfo flow refactor

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',

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: {

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<SubStepProps, 'onNext'> & {
+type UseEnterSignerInfoStepFormSubmit = Pick<SubPageProps, 'onNext'> & {
     formId?: OnyxFormKey;
     fieldIds: Array<FormOnyxKeys<typeof ONYXKEYS.FORMS.ENTER_SINGER_INFO_FORM>>;
     shouldSaveDraft: boolean;

src/libs/Navigation/types.ts

@@ -2464,6 +2464,8 @@ type ReimbursementAccountEnterSignerInfoNavigatorParamList = {
         policyID: string;
         bankAccountID: string;
         isCompleted: string;
+        subPage?: string;
+        action?: 'edit';
     };
 };
 

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<ReimbursementAccountEnterSignerInfoNavigatorParamList, typeof SCREENS.REIMBURSEMENT_ACCOUNT_ENTER_SIGNER_INFO>;
 
-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<ComponentType<EnterSignerInfoFormSubStepProps>> = [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<EnterSignerInfoFormSubStepProps>({bodyContent, startFrom: 0, onFinished: submit});
+        isRedirecting,
+    } = useSubPage<EnterSignerInfoFormSubPageProps>({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 (
+            <FullScreenLoadingIndicator
+                shouldUseGoBackButton
+                reasonAttributes={{context: 'EnterSignerInfo', isRedirecting}}
+            />
+        );
+    }
 
     return (
         <InteractiveStepWrapper
@@ -102,7 +126,7 @@ function EnterSignerInfo({route}: EnterSignerInfoProps) {
         >
             <EnterSignerInfoForm
                 isEditing={isEditing}
-                onNext={nextScreen}
+                onNext={nextPage}
                 onMove={moveTo}
                 policyID={policyID}
             />

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);
 

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();

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();
 

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);

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);
 

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();