use new route for confirmation page

dukenv0307 · dukenv0307 · commit e006ecbe320f · 2026-07-22T10:07:34.000+07:00
diff --git a/src/ROUTES.ts b/src/ROUTES.ts
@@ -1492,6 +1492,10 @@ const ROUTES = {
             return `${base}${pagePart}${subPagePart}${actionPart}` as const;
         },
     },
+    SETTINGS_ENABLE_PAYMENTS_CONFIRM_MAGIC_CODE: {
+        route: 'settings/wallet/enable-payments/confirm-magic-code',
+        getRoute: () => 'settings/wallet/enable-payments/confirm-magic-code' as const,
+    },
     SETTINGS_WALLET_UNSHARE_BANK_ACCOUNT: {
         route: 'settings/wallet/:bankAccountID/unshare-bank-account',
         getRoute: (bankAccountID: number | undefined) => `settings/wallet/${bankAccountID}/unshare-bank-account` as const,
diff --git a/src/SCREENS.ts b/src/SCREENS.ts
@@ -178,6 +178,7 @@ const SCREENS = {
             IMPORT_TRANSACTIONS_SPREADSHEET: 'Settings_Wallet_Import_Transactions_Spreadsheet',
             TRANSACTIONS_IMPORTED: 'Settings_Wallet_Transactions_Imported',
             ENABLE_PAYMENTS: 'Settings_Wallet_EnablePayments',
+            ENABLE_PAYMENTS_CONFIRM_MAGIC_CODE: 'Settings_Wallet_EnablePayments_ConfirmMagicCode',
             CARD_ACTIVATE: 'Settings_Wallet_Card_Activate',
             CARD_CHANGE_PIN: 'Settings_Wallet_Card_Change_PIN',
             CARD_CHANGE_PIN_ATM: 'Settings_Wallet_Card_Change_PIN_ATM',
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
@@ -448,6 +448,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.SETTINGS.WALLET.IMPORT_TRANSACTIONS_SPREADSHEET]: () => require<ReactComponentModule>('../../../../pages/settings/Wallet/ImportTransactionsSpreadsheetPage').default,
     [SCREENS.SETTINGS.WALLET.TRANSACTIONS_IMPORTED]: () => require<ReactComponentModule>('../../../../pages/settings/Wallet/TransactionsImportedPage').default,
     [SCREENS.SETTINGS.WALLET.ENABLE_PAYMENTS]: () => require<ReactComponentModule>('../../../../pages/EnablePayments/Wallet/EnablePayments').default,
+    [SCREENS.SETTINGS.WALLET.ENABLE_PAYMENTS_CONFIRM_MAGIC_CODE]: () => require<ReactComponentModule>('../../../../pages/EnablePayments/shared/WalletConfirmMagicCodePage').default,
     [SCREENS.SETTINGS.WALLET.UNSHARE_BANK_ACCOUNT]: () => require<ReactComponentModule>('../../../../pages/settings/Wallet/UnshareBankAccount/UnshareBankAccount').default,
     [SCREENS.SETTINGS.WALLET.ENABLE_GLOBAL_REIMBURSEMENTS_BUSINESS]: () =>
         require<ReactComponentModule>('../../../../pages/settings/Wallet/EnableGlobalReimbursements/EnableGlobalReimbursementsBusinessPage').default,
diff --git a/src/libs/Navigation/linkingConfig/RELATIONS/SETTINGS_TO_RHP.ts b/src/libs/Navigation/linkingConfig/RELATIONS/SETTINGS_TO_RHP.ts
@@ -46,6 +46,7 @@ const SETTINGS_TO_RHP: Partial<Record<keyof SettingsSplitNavigatorParamList, str
         SCREENS.SETTINGS.WALLET.IMPORT_TRANSACTIONS_SPREADSHEET,
         SCREENS.SETTINGS.WALLET.TRANSACTIONS_IMPORTED,
         SCREENS.SETTINGS.WALLET.ENABLE_PAYMENTS,
+        SCREENS.SETTINGS.WALLET.ENABLE_PAYMENTS_CONFIRM_MAGIC_CODE,
         SCREENS.SETTINGS.WALLET.UNSHARE_BANK_ACCOUNT,
         SCREENS.SETTINGS.WALLET.ENABLE_GLOBAL_REIMBURSEMENTS_BUSINESS,
         SCREENS.SETTINGS.WALLET.ENABLE_GLOBAL_REIMBURSEMENTS_AGREEMENTS,
diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts
@@ -219,6 +219,10 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
                             path: ROUTES.SETTINGS_ENABLE_PAYMENTS.route,
                             exact: true,
                         },
+                        [SCREENS.SETTINGS.WALLET.ENABLE_PAYMENTS_CONFIRM_MAGIC_CODE]: {
+                            path: ROUTES.SETTINGS_ENABLE_PAYMENTS_CONFIRM_MAGIC_CODE.route,
+                            exact: true,
+                        },
                         [SCREENS.SETTINGS.WALLET.UNSHARE_BANK_ACCOUNT]: {
                             path: ROUTES.SETTINGS_WALLET_UNSHARE_BANK_ACCOUNT.route,
                             exact: true,
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
@@ -205,6 +205,7 @@ type SettingsNavigatorParamList = {
         subPage?: EnablePaymentsSubPageType;
         action?: 'edit';
     };
+    [SCREENS.SETTINGS.WALLET.ENABLE_PAYMENTS_CONFIRM_MAGIC_CODE]: undefined;
     [SCREENS.SETTINGS.WALLET.UNSHARE_BANK_ACCOUNT]: {
         bankAccountID: string;
     };
diff --git a/src/pages/EnablePayments/Pay/AdditionalDetails/AdditionalDetailsStep.tsx b/src/pages/EnablePayments/Pay/AdditionalDetails/AdditionalDetailsStep.tsx
@@ -14,9 +14,7 @@ import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 
-import type {UpdatePersonalDetailsForWalletParams} from '@libs/API/parameters';
 import {extractFirstAndLastNameFromAvailableDetails} from '@libs/PersonalDetailsUtils';
-import {parsePhoneNumber} from '@libs/PhoneNumber';
 import {
     getFieldRequiredErrors,
     getInvalidAddressErrorTranslationPath,
@@ -29,9 +27,9 @@ import {
     meetsMinimumAgeRequirement,
 } from '@libs/ValidationUtils';
 
+import getWalletPersonalDetailsParams from '@pages/EnablePayments/shared/getWalletPersonalDetailsParams';
 import IdologyQuestions from '@pages/EnablePayments/shared/IdologyQuestions';
 import useWalletPhoneMagicCode from '@pages/EnablePayments/shared/useWalletPhoneMagicCode';
-import WalletMagicCodePrompt from '@pages/EnablePayments/shared/WalletMagicCodePrompt';
 import AddressFormFields from '@pages/ReimbursementAccount/AddressFormFields';
 
 import {setAdditionalDetailsQuestions} from '@userActions/Wallet';
@@ -84,7 +82,7 @@ function AdditionalDetailsStep({currentUserPersonalDetails}: AdditionalDetailsSt
     const maxDate = subYears(currentDate, CONST.DATE_BIRTH.MIN_AGE_FOR_PAYMENT);
     const shouldAskForFullSSN = walletAdditionalDetails?.errorCode === CONST.WALLET.ERROR.SSN;
 
-    const {isMagicCodeRequired, submitPersonalDetails, confirmPersonalDetailsWithMagicCode, closeMagicCodePrompt} = useWalletPhoneMagicCode();
+    const {submitPersonalDetails} = useWalletPhoneMagicCode();
 
     const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS>): FormInputErrors<typeof ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS> => {
         const errors = getFieldRequiredErrors(values, STEP_FIELDS, translate);
@@ -124,29 +122,9 @@ function AdditionalDetailsStep({currentUserPersonalDetails}: AdditionalDetailsSt
     };
 
     const activateWallet = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS>) => {
-        const personalDetails: UpdatePersonalDetailsForWalletParams = {
-            phoneNumber: (values.phoneNumber && parsePhoneNumber(values.phoneNumber, {regionCode: CONST.COUNTRY.US}).number?.significant) ?? '',
-            legalFirstName: values.legalFirstName ?? '',
-            legalLastName: values.legalLastName ?? '',
-            addressStreet: values.addressStreet ?? '',
-            addressCity: values.addressCity ?? '',
-            addressState: values.addressState ?? '',
-            addressZip: values.addressZipCode ?? '',
-            dob: values.dob ?? '',
-            ssn: values.ssn ?? '',
-        };
-        submitPersonalDetails(personalDetails);
+        submitPersonalDetails(getWalletPersonalDetailsParams(values));
     };
 
-    if (isMagicCodeRequired) {
-        return (
-            <WalletMagicCodePrompt
-                onConfirm={confirmPersonalDetailsWithMagicCode}
-                onClose={closeMagicCodePrompt}
-            />
-        );
-    }
-
     if (walletAdditionalDetails?.questions && walletAdditionalDetails.questions.length > 0) {
         return (
             <ScreenWrapper
diff --git a/src/pages/EnablePayments/Wallet/PersonalInfo/PersonalInfo.tsx b/src/pages/EnablePayments/Wallet/PersonalInfo/PersonalInfo.tsx
@@ -6,12 +6,9 @@ import useOnyx from '@hooks/useOnyx';
 import useSubPage from '@hooks/useSubPage';
 import type {SubPageProps} from '@hooks/useSubPage/types';
 
-import type {UpdatePersonalDetailsForWalletParams} from '@libs/API/parameters';
-import {parsePhoneNumber} from '@libs/PhoneNumber';
-
+import getWalletPersonalDetailsParams from '@pages/EnablePayments/shared/getWalletPersonalDetailsParams';
 import IdologyQuestions from '@pages/EnablePayments/shared/IdologyQuestions';
 import useWalletPhoneMagicCode from '@pages/EnablePayments/shared/useWalletPhoneMagicCode';
-import WalletMagicCodePrompt from '@pages/EnablePayments/shared/WalletMagicCodePrompt';
 import getInitialSubstepForPersonalInfo from '@pages/EnablePayments/Wallet/utils/getInitialSubstepForPersonalInfo';
 import getSubstepValues from '@pages/EnablePayments/Wallet/utils/getSubstepValues';
 
@@ -23,7 +20,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import INPUT_IDS from '@src/types/form/WalletAdditionalDetailsForm';
 
-import React, {useMemo} from 'react';
+import {useMemo} from 'react';
 
 import Address from './substeps/AddressStep';
 import Confirmation from './substeps/ConfirmationStep';
@@ -52,23 +49,12 @@ function PersonalInfoPage() {
 
     const showIdologyQuestions = walletAdditionalDetails?.questions && walletAdditionalDetails?.questions.length > 0;
 
-    const {isMagicCodeRequired, submitPersonalDetails, confirmPersonalDetailsWithMagicCode, closeMagicCodePrompt} = useWalletPhoneMagicCode();
+    const {submitPersonalDetails} = useWalletPhoneMagicCode();
 
     const values = useMemo(() => getSubstepValues(PERSONAL_INFO_STEP_KEYS, walletAdditionalDetailsDraft, walletAdditionalDetails), [walletAdditionalDetails, walletAdditionalDetailsDraft]);
 
     const submit = () => {
-        const personalDetails: UpdatePersonalDetailsForWalletParams = {
-            phoneNumber: (values.phoneNumber && parsePhoneNumber(values.phoneNumber, {regionCode: CONST.COUNTRY.US}).number?.significant) ?? '',
-            legalFirstName: values?.[PERSONAL_INFO_STEP_KEYS.FIRST_NAME] ?? '',
-            legalLastName: values?.[PERSONAL_INFO_STEP_KEYS.LAST_NAME] ?? '',
-            addressStreet: values?.[PERSONAL_INFO_STEP_KEYS.STREET] ?? '',
-            addressCity: values?.[PERSONAL_INFO_STEP_KEYS.CITY] ?? '',
-            addressState: values?.[PERSONAL_INFO_STEP_KEYS.STATE] ?? '',
-            addressZip: values?.[PERSONAL_INFO_STEP_KEYS.ZIP_CODE] ?? '',
-            dob: values?.[PERSONAL_INFO_STEP_KEYS.DOB] ?? '',
-            ssn: values?.[PERSONAL_INFO_STEP_KEYS.SSN_LAST_4] ?? '',
-        };
-        submitPersonalDetails(personalDetails);
+        submitPersonalDetails(getWalletPersonalDetailsParams(values));
     };
 
     const startFrom = useMemo(() => getInitialSubstepForPersonalInfo(values), [values]);
@@ -108,15 +94,6 @@ function PersonalInfoPage() {
         return <FullScreenLoadingIndicator reasonAttributes={{context: 'EnablePaymentsPersonalInfo', isRedirecting}} />;
     }
 
-    if (isMagicCodeRequired) {
-        return (
-            <WalletMagicCodePrompt
-                onConfirm={confirmPersonalDetailsWithMagicCode}
-                onClose={closeMagicCodePrompt}
-            />
-        );
-    }
-
     return (
         <InteractiveStepWrapper
             wrapperID="PersonalInfoPage"
diff --git a/src/pages/EnablePayments/shared/WalletConfirmMagicCodePage.tsx b/src/pages/EnablePayments/shared/WalletConfirmMagicCodePage.tsx
@@ -0,0 +1,75 @@
+import useOnyx from '@hooks/useOnyx';
+
+import Navigation from '@libs/Navigation/Navigation';
+
+import getSubstepValues from '@pages/EnablePayments/Wallet/utils/getSubstepValues';
+
+import {clearWalletAdditionalDetailsErrors, updatePersonalDetails} from '@userActions/Wallet';
+
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import INPUT_IDS from '@src/types/form/WalletAdditionalDetailsForm';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
+
+import {useEffect, useRef} from 'react';
+
+import getWalletPersonalDetailsParams from './getWalletPersonalDetailsParams';
+import WalletMagicCodePrompt from './WalletMagicCodePrompt';
+
+const PERSONAL_INFO_STEP_KEYS = INPUT_IDS.PERSONAL_INFO_STEP;
+
+/**
+ * Dedicated screen for entering the magic code that authorizes a wallet phone-number change. Living on its own route
+ * (rather than being rendered inline in the step page) keeps the code form stably mounted, so a wrong-code error is
+ * not wiped by a remount while the submission response settles.
+ */
+function WalletConfirmMagicCodePage() {
+    const [walletAdditionalDetails] = useOnyx(ONYXKEYS.WALLET_ADDITIONAL_DETAILS);
+    const [walletAdditionalDetailsDraft] = useOnyx(ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS_DRAFT);
+    const [formData] = useOnyx(ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS);
+
+    // The submitted details live in the form draft, so rebuild them here and submit together with the entered code.
+    const values = getSubstepValues(PERSONAL_INFO_STEP_KEYS, walletAdditionalDetailsDraft, walletAdditionalDetails);
+    const personalDetails = getWalletPersonalDetailsParams(values);
+
+    const confirm = (validateCode: string) => {
+        updatePersonalDetails({...personalDetails, validateCode});
+    };
+
+    useEffect(
+        () => () => {
+            clearWalletAdditionalDetailsErrors();
+        },
+        [],
+    );
+
+    const hasErrors = !!walletAdditionalDetails?.errorCode || !isEmptyObject(walletAdditionalDetails?.errors);
+
+    const wasLoading = useRef(false);
+    useEffect(() => {
+        if (formData?.isLoading) {
+            wasLoading.current = true;
+            return;
+        }
+        // Once a submission finishes cleanly the code was accepted, so advance to the identity-verification step;
+        // EnablePaymentsPage corrects the URL if the real next step differs (e.g. KBA questions). Any error (incorrect
+        // code, SSN, or a generic failure) keeps the screen open to retry.
+        if (wasLoading.current && !hasErrors) {
+            wasLoading.current = false;
+            Navigation.navigate(ROUTES.SETTINGS_ENABLE_PAYMENTS.getRoute({page: CONST.ENABLE_PAYMENTS.PAGE_NAMES.VERIFY_IDENTITY}));
+        }
+        wasLoading.current = false;
+    }, [formData?.isLoading, hasErrors]);
+
+    return (
+        <WalletMagicCodePrompt
+            onConfirm={confirm}
+            onClose={() => Navigation.goBack()}
+        />
+    );
+}
+
+WalletConfirmMagicCodePage.displayName = 'WalletConfirmMagicCodePage';
+
+export default WalletConfirmMagicCodePage;
diff --git a/src/pages/EnablePayments/shared/getWalletPersonalDetailsParams.ts b/src/pages/EnablePayments/shared/getWalletPersonalDetailsParams.ts
@@ -0,0 +1,27 @@
+import type {UpdatePersonalDetailsForWalletParams} from '@libs/API/parameters';
+import {parsePhoneNumber} from '@libs/PhoneNumber';
+
+import CONST from '@src/CONST';
+import type {PersonalInfoStepProps} from '@src/types/form/WalletAdditionalDetailsForm';
+
+/**
+ * Builds the wallet personal-details API params from the collected form values. Shared by the personal-info and
+ * additional-details flows and by the magic-code confirmation screen so the phone-change check and the
+ * code submission always build identical params. The phone number is normalized to significant digits to match how
+ * the backend stores it.
+ */
+function getWalletPersonalDetailsParams(values: PersonalInfoStepProps): UpdatePersonalDetailsForWalletParams {
+    return {
+        phoneNumber: (values.phoneNumber && parsePhoneNumber(values.phoneNumber, {regionCode: CONST.COUNTRY.US}).number?.significant) ?? '',
+        legalFirstName: values.legalFirstName ?? '',
+        legalLastName: values.legalLastName ?? '',
+        addressStreet: values.addressStreet ?? '',
+        addressCity: values.addressCity ?? '',
+        addressState: values.addressState ?? '',
+        addressZip: values.addressZipCode ?? '',
+        dob: values.dob ?? '',
+        ssn: values.ssn ?? '',
+    };
+}
+
+export default getWalletPersonalDetailsParams;
diff --git a/src/pages/EnablePayments/shared/useWalletPhoneMagicCode.ts b/src/pages/EnablePayments/shared/useWalletPhoneMagicCode.ts
@@ -1,79 +1,40 @@
 import useOnyx from '@hooks/useOnyx';
 
 import type {UpdatePersonalDetailsForWalletParams} from '@libs/API/parameters';
+import Navigation from '@libs/Navigation/Navigation';
 import {parsePhoneNumber} from '@libs/PhoneNumber';
 
-import {clearWalletAdditionalDetailsErrors, updatePersonalDetails} from '@userActions/Wallet';
+import {updatePersonalDetails} from '@userActions/Wallet';
 
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-
-import {useEffect, useRef, useState} from 'react';
+import ROUTES from '@src/ROUTES';
 
 /**
  * Shared magic-code handling for the wallet KYC personal-details flows. Changing an existing phone number is protected
- * by a magic code because it is used for card 3DS verification, so both flows prompt for a code before submitting the
- * change and keep the prompt open until the code is accepted.
+ * by a magic code because it is used for card 3DS verification, so both flows send the user to a dedicated
+ * confirmation screen to enter the code before the change is submitted.
  */
 function useWalletPhoneMagicCode() {
-    const [walletAdditionalDetails] = useOnyx(ONYXKEYS.WALLET_ADDITIONAL_DETAILS);
-    const [formData] = useOnyx(ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS);
     const [privatePersonalDetails] = useOnyx(ONYXKEYS.PRIVATE_PERSONAL_DETAILS);
 
-    // The details the user submitted, held while we prompt for a magic code to confirm a phone number change
-    const submittedPersonalDetailsRef = useRef<UpdatePersonalDetailsForWalletParams | null>(null);
-    const [isConfirmingMagicCode, setIsConfirmingMagicCode] = useState(false);
-
-    // The backend requires a valid magic code to change an existing phone number. Keep the prompt open if the
-    // submitted code was missing or invalid, even when the change wasn't detected client-side.
-    const isMagicCodeRequired = isConfirmingMagicCode || walletAdditionalDetails?.errorCode === CONST.WALLET.ERROR.INCORRECT_MAGIC_CODE;
-
-    // Once a submission finishes, keep prompting only if the magic code was missing or invalid; otherwise dismiss the
-    // prompt so the flow can advance (e.g. to Onfido or KBA questions).
-    const wasSubmittingRef = useRef(false);
-    useEffect(() => {
-        if (formData?.isLoading) {
-            wasSubmittingRef.current = true;
-            return;
-        }
-        if (!wasSubmittingRef.current) {
-            return;
-        }
-        wasSubmittingRef.current = false;
-        setIsConfirmingMagicCode(walletAdditionalDetails?.errorCode === CONST.WALLET.ERROR.INCORRECT_MAGIC_CODE);
-    }, [formData?.isLoading, walletAdditionalDetails?.errorCode]);
-
-    // Submits the personal details, first prompting for a magic code when an existing phone number is being changed.
+    // Submits the personal details, first routing to the magic-code screen when an existing phone number is changed.
     const submitPersonalDetails = (personalDetails: UpdatePersonalDetailsForWalletParams) => {
-        submittedPersonalDetailsRef.current = personalDetails;
-
         // The stored phone number keeps its country code, so normalize it the same way as the submitted one before
         // comparing, otherwise an unchanged phone would look like a change and wrongly prompt for a magic code.
         const storedPhoneNumber = privatePersonalDetails?.phoneNumber;
         const normalizedStoredPhoneNumber = (storedPhoneNumber && parsePhoneNumber(storedPhoneNumber, {regionCode: CONST.COUNTRY.US}).number?.significant) ?? '';
         const hasPhoneNumberChanged = !!normalizedStoredPhoneNumber && personalDetails.phoneNumber !== normalizedStoredPhoneNumber;
         if (hasPhoneNumberChanged) {
-            setIsConfirmingMagicCode(true);
+            Navigation.navigate(ROUTES.SETTINGS_ENABLE_PAYMENTS_CONFIRM_MAGIC_CODE.getRoute());
             return;
         }
 
         // Attempt to set the personal details
         updatePersonalDetails(personalDetails);
     };
 
-    const confirmPersonalDetailsWithMagicCode = (validateCode: string) => {
-        if (!submittedPersonalDetailsRef.current) {
-            return;
-        }
-        updatePersonalDetails({...submittedPersonalDetailsRef.current, validateCode});
-    };
-
-    const closeMagicCodePrompt = () => {
-        setIsConfirmingMagicCode(false);
-        clearWalletAdditionalDetailsErrors();
-    };
-
-    return {isMagicCodeRequired, submitPersonalDetails, confirmPersonalDetailsWithMagicCode, closeMagicCodePrompt};
+    return {submitPersonalDetails};
 }
 
 export default useWalletPhoneMagicCode;
diff --git a/tests/unit/useWalletPhoneMagicCodeTest.tsx b/tests/unit/useWalletPhoneMagicCodeTest.tsx
