Merge pull request Expensify#81505 from software-mansion-labs/collectioneur/dynamic-routes-batch-6

mjasikowski · web-flow · commit 5b4e825f4517 · 2026-02-24T12:08:22.000+01:00
diff --git a/src/ROUTES.ts b/src/ROUTES.ts
@@ -81,7 +81,7 @@ type DynamicRoutes = Record<string, DynamicRouteConfig>;
 const DYNAMIC_ROUTES = {
     VERIFY_ACCOUNT: {
         path: 'verify-account',
-        entryScreens: [],
+        entryScreens: [SCREENS.SETTINGS.WALLET.ROOT],
     },
 } as const satisfies DynamicRoutes;
 
@@ -359,7 +359,6 @@ const ROUTES = {
     SETTINGS_ABOUT: 'settings/about',
     SETTINGS_APP_DOWNLOAD_LINKS: 'settings/about/app-download-links',
     SETTINGS_WALLET: 'settings/wallet',
-    SETTINGS_WALLET_VERIFY_ACCOUNT: `settings/wallet/${VERIFY_ACCOUNT}`,
     SETTINGS_WALLET_DOMAIN_CARD: {
         route: 'settings/wallet/card/:cardID?',
         getRoute: (cardID: string) => `settings/wallet/card/${cardID}` as const,
diff --git a/src/SCREENS.ts b/src/SCREENS.ts
@@ -178,7 +178,6 @@ const SCREENS = {
 
         WALLET: {
             ROOT: 'Settings_Wallet',
-            VERIFY_ACCOUNT: 'Settings_Wallet_VerifyAccount',
             DOMAIN_CARD: 'Settings_Wallet_DomainCard',
             DOMAIN_CARD_CONFIRM_MAGIC_CODE: 'Settings_Wallet_DomainCard_ConfirmMagicCode',
             CARD_MISSING_DETAILS: 'Settings_Wallet_Card_MissingDetails',
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
@@ -406,7 +406,6 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.SETTINGS.CLOSE]: () => require<ReactComponentModule>('../../../../pages/settings/Security/CloseAccountPage').default,
     [SCREENS.SETTINGS.APP_DOWNLOAD_LINKS]: () => require<ReactComponentModule>('../../../../pages/settings/AppDownloadLinks').default,
     [SCREENS.SETTINGS.WALLET.CARDS_DIGITAL_DETAILS_UPDATE_ADDRESS]: () => require<ReactComponentModule>('../../../../pages/settings/Profile/PersonalDetails/PersonalAddressPage').default,
-    [SCREENS.SETTINGS.WALLET.VERIFY_ACCOUNT]: () => require<ReactComponentModule>('../../../../pages/settings/Wallet/VerifyAccountPage').default,
     [SCREENS.SETTINGS.WALLET.DOMAIN_CARD]: () => require<ReactComponentModule>('../../../../pages/settings/Wallet/ExpensifyCardPage/index').default,
     [SCREENS.SETTINGS.WALLET.DOMAIN_CARD_CONFIRM_MAGIC_CODE]: () =>
         require<ReactComponentModule>('../../../../pages/settings/Wallet/ExpensifyCardPage/ExpensifyCardVerifyAccountPage').default,
diff --git a/src/libs/Navigation/helpers/getLastSuffixFromPath.ts b/src/libs/Navigation/helpers/getLastSuffixFromPath.ts
@@ -1,4 +1,5 @@
 import Log from '@libs/Log';
+import splitPathAndQuery from './splitPathAndQuery';
 
 /**
  * Extracts the last segment from a URL path, removing query parameters and trailing slashes.
@@ -7,16 +8,14 @@ import Log from '@libs/Log';
  * @returns The last segment of the path as a string
  */
 function getLastSuffixFromPath(path: string | undefined): string {
-    const pathWithoutParams = path?.split('?').at(0);
+    const [normalizedPath] = splitPathAndQuery(path ?? '');
 
-    if (!pathWithoutParams) {
+    if (!normalizedPath) {
         Log.warn('[getLastSuffixFromPath.ts] Failed to parse the path, path is empty');
         return '';
     }
 
-    const pathWithoutTrailingSlash = pathWithoutParams.endsWith('/') ? pathWithoutParams.slice(0, -1) : pathWithoutParams;
-
-    const lastSuffix = pathWithoutTrailingSlash.split('/').pop() ?? '';
+    const lastSuffix = normalizedPath.split('/').pop() ?? '';
 
     return lastSuffix;
 }
diff --git a/src/libs/Navigation/helpers/getPathFromState.ts b/src/libs/Navigation/helpers/getPathFromState.ts
@@ -3,11 +3,13 @@ import type {NavigationState, PartialState} from '@react-navigation/routers';
 import {linkingConfig} from '@libs/Navigation/linkingConfig';
 import {normalizedConfigs} from '@libs/Navigation/linkingConfig/config';
 import {DYNAMIC_ROUTES} from '@src/ROUTES';
+import type {DynamicRouteSuffix} from '@src/ROUTES';
 import type {Screen} from '@src/SCREENS';
 
 type State = NavigationState | Omit<PartialState<NavigationState>, 'stale'>;
 
 const dynamicRouteEntries = Object.values(DYNAMIC_ROUTES);
+const dynamicRoutePaths = new Set(dynamicRouteEntries.map(({path}) => path));
 
 /**
  * Checks if a screen name is a dynamic route screen
@@ -19,12 +21,7 @@ function isDynamicRouteScreen(screenName: Screen): boolean {
         return false;
     }
 
-    for (const {path} of dynamicRouteEntries) {
-        if (screenPath === path) {
-            return true;
-        }
-    }
-    return false;
+    return dynamicRoutePaths.has(screenPath as DynamicRouteSuffix);
 }
 
 const getPathFromState = (state: State): string => {
diff --git a/src/libs/Navigation/helpers/splitPathAndQuery.ts b/src/libs/Navigation/helpers/splitPathAndQuery.ts
@@ -5,7 +5,7 @@
  *          and the second element is the query string (if any).
  */
 function splitPathAndQuery(fullPath: string | undefined): [string | undefined, string | undefined] {
-    const [path, query] = fullPath?.split('?') ?? [undefined, undefined];
+    const [path, query] = fullPath?.split('?', 2) ?? [undefined, undefined];
     const normalizedPath = path?.endsWith('/') && path.length > 1 ? path.slice(0, -1) : path;
     return [normalizedPath, query];
 }
diff --git a/src/libs/Navigation/linkingConfig/RELATIONS/SETTINGS_TO_RHP.ts b/src/libs/Navigation/linkingConfig/RELATIONS/SETTINGS_TO_RHP.ts
@@ -37,7 +37,6 @@ const SETTINGS_TO_RHP: Partial<Record<keyof SettingsSplitNavigatorParamList, str
         SCREENS.SETTINGS.WALLET.PERSONAL_CARD_DETAILS,
         SCREENS.SETTINGS.WALLET.PERSONAL_CARD_EDIT_NAME,
         SCREENS.SETTINGS.WALLET.PERSONAL_CARD_EDIT_TRANSACTION_START_DATE,
-        SCREENS.SETTINGS.WALLET.VERIFY_ACCOUNT,
         SCREENS.SETTINGS.WALLET.TRANSFER_BALANCE,
         SCREENS.SETTINGS.WALLET.CHOOSE_TRANSFER_ACCOUNT,
         SCREENS.SETTINGS.WALLET.IMPORT_TRANSACTIONS,
diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts
@@ -241,10 +241,6 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
                             path: ROUTES.SETTINGS_WALLET_CARD_MISSING_DETAILS_CONFIRM_MAGIC_CODE.route,
                             exact: true,
                         },
-                        [SCREENS.SETTINGS.WALLET.VERIFY_ACCOUNT]: {
-                            path: ROUTES.SETTINGS_WALLET_VERIFY_ACCOUNT,
-                            exact: true,
-                        },
                         [SCREENS.SETTINGS.WALLET.REPORT_VIRTUAL_CARD_FRAUD]: {
                             path: ROUTES.SETTINGS_REPORT_FRAUD.route,
                             exact: true,
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
@@ -197,7 +197,6 @@ type SettingsNavigatorParamList = {
     [SCREENS.WORKSPACE.WORKFLOWS_PAYER]: {
         policyID: string;
     };
-    [SCREENS.SETTINGS.WALLET.VERIFY_ACCOUNT]: undefined;
     [SCREENS.SETTINGS.WALLET.TRANSFER_BALANCE]: undefined;
     [SCREENS.SETTINGS.WALLET.CHOOSE_TRANSFER_ACCOUNT]: undefined;
     [SCREENS.SETTINGS.WALLET.IMPORT_TRANSACTIONS]: undefined;
diff --git a/src/libs/actions/Welcome/OnboardingFlow.ts b/src/libs/actions/Welcome/OnboardingFlow.ts
@@ -13,8 +13,8 @@ import CONST from '@src/CONST';
 import IntlStore from '@src/languages/IntlStore';
 import NAVIGATORS from '@src/NAVIGATORS';
 import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
 import type {Route} from '@src/ROUTES';
+import ROUTES from '@src/ROUTES';
 import {hasCompletedGuidedSetupFlowSelector} from '@src/selectors/Onboarding';
 import type {Locale, Onboarding} from '@src/types/onyx';
 
diff --git a/src/pages/settings/DynamicVerifyAccountPage.tsx b/src/pages/settings/DynamicVerifyAccountPage.tsx
@@ -1,12 +1,16 @@
 import React from 'react';
 import useDynamicBackPath from '@hooks/useDynamicBackPath';
-import {DYNAMIC_ROUTES} from '@src/ROUTES';
+import ROUTES, {DYNAMIC_ROUTES} from '@src/ROUTES';
 import VerifyAccountPageBase from './VerifyAccountPageBase';
 
 function DynamicVerifyAccountPage() {
     const backPath = useDynamicBackPath(DYNAMIC_ROUTES.VERIFY_ACCOUNT.path);
-    // currently, the default behavior of this component after completing verification is to navigate back
-    const forwardPath = backPath;
+
+    let forwardPath = backPath;
+    if (backPath === ROUTES.SETTINGS_WALLET) {
+        forwardPath = ROUTES.SETTINGS_ENABLE_PAYMENTS;
+    }
+
     return (
         <VerifyAccountPageBase
             navigateBackTo={backPath}
diff --git a/src/pages/settings/Wallet/VerifyAccountPage.tsx b/src/pages/settings/Wallet/VerifyAccountPage.tsx
diff --git a/src/pages/settings/Wallet/WalletPage/index.tsx b/src/pages/settings/Wallet/WalletPage/index.tsx
@@ -34,6 +34,7 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {hasDisplayableAssignedCards, maskCardNumber} from '@libs/CardUtils';
 import {convertToDisplayString} from '@libs/CurrencyUtils';
+import createDynamicRoute from '@libs/Navigation/helpers/createDynamicRoute';
 import Navigation from '@libs/Navigation/Navigation';
 import {formatPaymentMethods, getPaymentMethodDescription} from '@libs/PaymentUtils';
 import {getDescriptionForPolicyDomainCard, hasActiveAdminWorkspaces, hasEligibleActiveAdminFromWorkspaces} from '@libs/PolicyUtils';
@@ -47,7 +48,7 @@ import {clearWalletError, clearWalletTermsError, deletePaymentCard, getPaymentMe
 import {navigateToBankAccountRoute} from '@userActions/ReimbursementAccount';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
+import ROUTES, {DYNAMIC_ROUTES} from '@src/ROUTES';
 import type * as OnyxTypes from '@src/types/onyx';
 import {getEmptyObject} from '@src/types/utils/EmptyObject';
 import type {CardPressHandlerParams, PaymentMethodPressHandlerParams} from './types';
@@ -717,7 +718,7 @@ function WalletPage() {
                                                         }
 
                                                         if (!isUserValidated) {
-                                                            Navigation.navigate(ROUTES.SETTINGS_WALLET_VERIFY_ACCOUNT);
+                                                            Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.VERIFY_ACCOUNT.path));
                                                             return;
                                                         }
                                                         Navigation.navigate(ROUTES.SETTINGS_ENABLE_PAYMENTS);
diff --git a/tests/navigation/createDynamicRouteTests.ts b/tests/navigation/createDynamicRouteTests.ts
@@ -0,0 +1,81 @@
+import createDynamicRoute from '@libs/Navigation/helpers/createDynamicRoute';
+import Navigation from '@libs/Navigation/Navigation';
+import type {DynamicRouteSuffix} from '@src/ROUTES';
+
+jest.mock('@libs/Navigation/Navigation', () => ({
+    getActiveRoute: jest.fn(),
+}));
+
+jest.mock('@src/ROUTES', () => ({
+    DYNAMIC_ROUTES: {
+        VERIFY_ACCOUNT: {path: 'verify-account'},
+        CUSTOM_FLOW: {path: 'custom-flow'},
+        DETAILS: {path: 'details'},
+        INVITE: {path: 'invite'},
+        FILTERS: {path: 'filters'},
+    },
+}));
+
+describe('createDynamicRoute', () => {
+    const mockGetActiveRoute = Navigation.getActiveRoute as jest.Mock;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should append suffix to a simple path', () => {
+        const activeRoute = 'settings/profile';
+        const suffix = 'verify-account';
+        const expectedPath = 'settings/profile/verify-account';
+
+        mockGetActiveRoute.mockReturnValue(activeRoute);
+
+        const result = createDynamicRoute(suffix);
+
+        expect(result).toBe(expectedPath);
+        expect(mockGetActiveRoute).toHaveBeenCalled();
+    });
+
+    it('should append suffix and preserve query parameters at the end', () => {
+        const activeRoute = 'report/123?sortBy=date';
+        const suffix = 'details';
+        const expectedPath = 'report/123/details?sortBy=date';
+
+        mockGetActiveRoute.mockReturnValue(activeRoute);
+
+        const result = createDynamicRoute(suffix as unknown as DynamicRouteSuffix);
+
+        expect(result).toBe(expectedPath);
+    });
+
+    it('should throw an error if the suffix is invalid', () => {
+        const suffix = 'invalid-suffix';
+
+        expect(() => createDynamicRoute(suffix as unknown as DynamicRouteSuffix)).toThrow(`The route name ${suffix} is not supported in createDynamicRoute`);
+        expect(mockGetActiveRoute).not.toHaveBeenCalled();
+    });
+
+    it('should handle paths with trailing slashes if splitPathAndQuery normalizes them', () => {
+        const activeRoute = 'workspace/100/';
+        const suffix = 'invite';
+        const expectedPath = 'workspace/100/invite';
+
+        mockGetActiveRoute.mockReturnValue(activeRoute);
+
+        const result = createDynamicRoute(suffix as unknown as DynamicRouteSuffix);
+
+        expect(result).toBe(expectedPath);
+    });
+
+    it('should correctly construct path when multiple query parameters exist', () => {
+        const activeRoute = 'search?q=test&type=expense';
+        const suffix = 'filters';
+        const expectedPath = 'search/filters?q=test&type=expense';
+
+        mockGetActiveRoute.mockReturnValue(activeRoute);
+
+        const result = createDynamicRoute(suffix as unknown as DynamicRouteSuffix);
+
+        expect(result).toBe(expectedPath);
+    });
+});
diff --git a/tests/navigation/getLastSuffixFromPathTests.ts b/tests/navigation/getLastSuffixFromPathTests.ts
@@ -0,0 +1,39 @@
+import getLastSuffixFromPath from '@libs/Navigation/helpers/getLastSuffixFromPath';
+
+jest.mock('@libs/Log', () => ({
+    warn: jest.fn(),
+}));
+
+describe('getLastSuffixFromPath', () => {
+    it('should extract correct suffix from standard path', () => {
+        const path = 'settings/profile/verify-account';
+        const expected = 'verify-account';
+        const result = getLastSuffixFromPath(path);
+
+        expect(result).toBe(expected);
+    });
+
+    it('should handle path that is just the suffix', () => {
+        const path = 'verify-account';
+        const expected = 'verify-account';
+        const result = getLastSuffixFromPath(path);
+
+        expect(result).toBe(expected);
+    });
+
+    it('should ignore query params', () => {
+        const path = 'settings/profile/verify-account?sortBy=date';
+        const expected = 'verify-account';
+        const result = getLastSuffixFromPath(path);
+
+        expect(result).toBe(expected);
+    });
+
+    it('should handle trailing slashes', () => {
+        const path = 'settings/profile/verify-account/';
+        const expected = 'verify-account';
+        const result = getLastSuffixFromPath(path);
+
+        expect(result).toBe(expected);
+    });
+});
diff --git a/tests/navigation/getMatchingFullScreenRouteTests.ts b/tests/navigation/getMatchingFullScreenRouteTests.ts
diff --git a/tests/navigation/getPathFromStateTests.ts b/tests/navigation/getPathFromStateTests.ts
diff --git a/tests/navigation/getStateForDynamicRouteTests.ts b/tests/navigation/getStateForDynamicRouteTests.ts
diff --git a/tests/navigation/getStateFromPathTests.ts b/tests/navigation/getStateFromPathTests.ts
diff --git a/tests/navigation/splitPathAndQueryTests.ts b/tests/navigation/splitPathAndQueryTests.ts
diff --git a/tests/navigation/useDynamicBackPathTests.ts b/tests/navigation/useDynamicBackPathTests.ts

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@`
`5`	`5`	`* and the second element is the query string (if any).`
`6`	`6`	`*/`
`7`	`7`	`function splitPathAndQuery(fullPath: string \| undefined): [string \| undefined, string \| undefined] {`
`8`		`- const [path, query] = fullPath?.split('?') ?? [undefined, undefined];`
	`8`	`+ const [path, query] = fullPath?.split('?', 2) ?? [undefined, undefined];`
`9`	`9`	`const normalizedPath = path?.endsWith('/') && path.length > 1 ? path.slice(0, -1) : path;`
`10`	`10`	`return [normalizedPath, query];`
`11`	`11`	`}`