83363 migrate debug final misc

src/ROUTES.ts

@@ -120,6 +120,29 @@ const DYNAMIC_ROUTES = {
         getRoute: (country = '') => `country?country=${country}`,
         queryParams: ['country'],
     },
+    DETAILS_CONSTANT_PICKER: {
+        path: 'constant-picker',
+        entryScreens: [SCREENS.DEBUG.REPORT, SCREENS.DEBUG.REPORT_ACTION, SCREENS.DEBUG.TRANSACTION, SCREENS.DEBUG.TRANSACTION_VIOLATION],
+        getRoute: (formType: string, fieldName: string, fieldValue?: string, policyID?: string) =>
+            getUrlWithParams('constant-picker', {
+                formType,
+                fieldName,
+                fieldValue,
+                policyID,
+            }),
+        queryParams: ['formType', 'fieldName', 'fieldValue', 'policyID'],
+    },
+    DETAILS_DATE_TIME_PICKER: {
+        path: 'datetime-picker',
+        entryScreens: [SCREENS.DEBUG.REPORT, SCREENS.DEBUG.REPORT_ACTION, SCREENS.DEBUG.TRANSACTION, SCREENS.DEBUG.TRANSACTION_VIOLATION],
+        getRoute: (fieldName: string, fieldValue?: string, policyID?: string) =>
+            getUrlWithParams('datetime-picker', {
+                fieldName,
+                fieldValue,
+                policyID,
+            }),
+        queryParams: ['fieldName', 'fieldValue', 'policyID'],
+    },
 } as const satisfies DynamicRoutes;
 
 const ROUTES = {
@@ -3907,18 +3930,6 @@ const ROUTES = {
         route: 'debug/report/:reportID/actions/:reportActionID/preview',
         getRoute: (reportID: string, reportActionID: string) => `debug/report/${reportID}/actions/${reportActionID}/preview` as const,
     },
-    DETAILS_CONSTANT_PICKER_PAGE: {
-        route: 'debug/:formType/details/constant/:fieldName',
-        getRoute: (formType: string, fieldName: string, fieldValue?: string, policyID?: string, backTo?: string) =>
-            // eslint-disable-next-line no-restricted-syntax -- Legacy route generation
-            getUrlWithBackToParam(`debug/${formType}/details/constant/${fieldName}?fieldValue=${fieldValue}&policyID=${policyID}`, backTo),
-    },
-    DETAILS_DATE_TIME_PICKER_PAGE: {
-        route: 'debug/details/datetime/:fieldName',
-
-        // eslint-disable-next-line no-restricted-syntax -- Legacy route generation
-        getRoute: (fieldName: string, fieldValue?: string, backTo?: string) => getUrlWithBackToParam(`debug/details/datetime/${fieldName}?fieldValue=${fieldValue}`, backTo),
-    },
     DEBUG_TRANSACTION: {
         route: 'debug/transaction/:transactionID',
         getRoute: (transactionID: string) => `debug/transaction/${transactionID}` as const,

src/SCREENS.ts

@@ -927,8 +927,8 @@ const SCREENS = {
         REPORT: 'Debug_Report',
         REPORT_ACTION: 'Debug_Report_Action',
         REPORT_ACTION_CREATE: 'Debug_Report_Action_Create',
-        DETAILS_CONSTANT_PICKER_PAGE: 'Debug_Details_Constant_Picker_Page',
-        DETAILS_DATE_TIME_PICKER_PAGE: 'Debug_Details_Date_Time_Picker_Page',
+        DYNAMIC_DETAILS_CONSTANT_PICKER_PAGE: 'Dynamic_Debug_Details_Constant_Picker_Page',
+        DYNAMIC_DETAILS_DATE_TIME_PICKER_PAGE: 'Dynamic_Debug_Details_Date_Time_Picker_Page',
         TRANSACTION: 'Debug_Transaction',
         TRANSACTION_VIOLATION_CREATE: 'Debug_Transaction_Violation_Create',
         TRANSACTION_VIOLATION: 'Debug_Transaction_Violation',

src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

@@ -1070,8 +1070,8 @@ const DebugModalStackNavigator = createModalStackNavigator<DebugParamList>({
     [SCREENS.DEBUG.REPORT]: () => require<ReactComponentModule>('../../../../pages/Debug/Report/DebugReportPage').default,
     [SCREENS.DEBUG.REPORT_ACTION]: () => require<ReactComponentModule>('../../../../pages/Debug/ReportAction/DebugReportActionPage').default,
     [SCREENS.DEBUG.REPORT_ACTION_CREATE]: () => require<ReactComponentModule>('../../../../pages/Debug/ReportAction/DebugReportActionCreatePage').default,
-    [SCREENS.DEBUG.DETAILS_CONSTANT_PICKER_PAGE]: () => require<ReactComponentModule>('../../../../pages/Debug/DebugDetailsConstantPickerPage').default,
-    [SCREENS.DEBUG.DETAILS_DATE_TIME_PICKER_PAGE]: () => require<ReactComponentModule>('../../../../pages/Debug/DebugDetailsDateTimePickerPage').default,
+    [SCREENS.DEBUG.DYNAMIC_DETAILS_CONSTANT_PICKER_PAGE]: () => require<ReactComponentModule>('../../../../pages/Debug/DynamicDebugDetailsConstantPickerPage').default,
+    [SCREENS.DEBUG.DYNAMIC_DETAILS_DATE_TIME_PICKER_PAGE]: () => require<ReactComponentModule>('../../../../pages/Debug/DynamicDebugDetailsDateTimePickerPage').default,
     [SCREENS.DEBUG.TRANSACTION]: () => require<ReactComponentModule>('../../../../pages/Debug/Transaction/DebugTransactionPage').default,
     [SCREENS.DEBUG.TRANSACTION_VIOLATION_CREATE]: () => require<ReactComponentModule>('../../../../pages/Debug/TransactionViolation/DebugTransactionViolationCreatePage').default,
     [SCREENS.DEBUG.TRANSACTION_VIOLATION]: () => require<ReactComponentModule>('../../../../pages/Debug/TransactionViolation/DebugTransactionViolationPage').default,

src/libs/Navigation/linkingConfig/config.ts

@@ -2031,14 +2031,8 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
                             path: ROUTES.DEBUG_REPORT_ACTION_CREATE.route,
                             exact: true,
                         },
-                        [SCREENS.DEBUG.DETAILS_CONSTANT_PICKER_PAGE]: {
-                            path: ROUTES.DETAILS_CONSTANT_PICKER_PAGE.route,
-                            exact: true,
-                        },
-                        [SCREENS.DEBUG.DETAILS_DATE_TIME_PICKER_PAGE]: {
-                            path: ROUTES.DETAILS_DATE_TIME_PICKER_PAGE.route,
-                            exact: true,
-                        },
+                        [SCREENS.DEBUG.DYNAMIC_DETAILS_CONSTANT_PICKER_PAGE]: DYNAMIC_ROUTES.DETAILS_CONSTANT_PICKER.path,
+                        [SCREENS.DEBUG.DYNAMIC_DETAILS_DATE_TIME_PICKER_PAGE]: DYNAMIC_ROUTES.DETAILS_DATE_TIME_PICKER.path,
                         [SCREENS.DEBUG.TRANSACTION]: {
                             path: ROUTES.DEBUG_TRANSACTION.route,
                             exact: true,

src/libs/Navigation/types.ts

@@ -3130,19 +3130,15 @@ type DebugParamList = {
     [SCREENS.DEBUG.REPORT_ACTION_CREATE]: {
         reportID: string;
     };
-    [SCREENS.DEBUG.DETAILS_CONSTANT_PICKER_PAGE]: {
+    [SCREENS.DEBUG.DYNAMIC_DETAILS_CONSTANT_PICKER_PAGE]: {
         formType: string;
         fieldName: string;
         fieldValue?: string;
         policyID?: string;
-        // eslint-disable-next-line no-restricted-syntax -- `backTo` usages in this file are legacy. Do not add new `backTo` params to screens. See contributingGuides/NAVIGATION.md
-        backTo?: string;
     };
-    [SCREENS.DEBUG.DETAILS_DATE_TIME_PICKER_PAGE]: {
+    [SCREENS.DEBUG.DYNAMIC_DETAILS_DATE_TIME_PICKER_PAGE]: {
         fieldName: string;
         fieldValue?: string;
-        // eslint-disable-next-line no-restricted-syntax -- `backTo` usages in this file are legacy. Do not add new `backTo` params to screens. See contributingGuides/NAVIGATION.md
-        backTo?: string;
     };
     [SCREENS.DEBUG.TRANSACTION]: {
         transactionID: string;

src/pages/Debug/ConstantSelector.tsx

@@ -4,9 +4,10 @@ import React, {useEffect} from 'react';
 import type {View} from 'react-native';
 import type {ValueOf} from 'type-fest';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import createDynamicRoute from '@libs/Navigation/helpers/dynamicRoutesUtils/createDynamicRoute';
 import Navigation from '@libs/Navigation/Navigation';
 import CONST from '@src/CONST';
-import ROUTES from '@src/ROUTES';
+import {DYNAMIC_ROUTES} from '@src/ROUTES';
 
 type ConstantSelectorProps = {
     /** Form error text. e.g when no constant is selected */
@@ -63,7 +64,7 @@ function ConstantSelector(
             brickRoadIndicator={errorText ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
             errorText={errorText}
             onPress={() => {
-                Navigation.navigate(ROUTES.DETAILS_CONSTANT_PICKER_PAGE.getRoute(formType, name, value, policyID, Navigation.getActiveRoute()));
+                Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.DETAILS_CONSTANT_PICKER.getRoute(formType, name, value, policyID)));
             }}
             shouldShowRightIcon
         />

src/pages/Debug/DateTimeSelector.tsx

@@ -3,9 +3,10 @@ import type {ForwardedRef} from 'react';
 import React, {useEffect} from 'react';
 import type {View} from 'react-native';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import createDynamicRoute from '@libs/Navigation/helpers/dynamicRoutesUtils/createDynamicRoute';
 import Navigation from '@libs/Navigation/Navigation';
 import CONST from '@src/CONST';
-import ROUTES from '@src/ROUTES';
+import {DYNAMIC_ROUTES} from '@src/ROUTES';
 
 type DateTimeSelectorProps = {
     /** Form error text. e.g when no datetime is selected */
@@ -57,7 +58,7 @@ function DateTimeSelector(
             brickRoadIndicator={errorText ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
             errorText={errorText}
             onPress={() => {
-                Navigation.navigate(ROUTES.DETAILS_DATE_TIME_PICKER_PAGE.getRoute(name, value, Navigation.getActiveRoute()));
+                Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.DETAILS_DATE_TIME_PICKER.getRoute(name, value)));
             }}
             shouldShowRightIcon
         />

src/pages/Debug/DebugDetailsConstantPickerPage.tsx → src/pages/Debug/DynamicDebugDetailsConstantPickerPage.tsx

@@ -4,45 +4,34 @@ import CategoryPicker from '@components/CategoryPicker';
 import CurrencySelectionList from '@components/CurrencySelectionList';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
+import useDynamicBackPath from '@hooks/useDynamicBackPath';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {DebugParamList} from '@libs/Navigation/types';
 import {appendParam} from '@libs/Url';
 import CONST from '@src/CONST';
+import {DYNAMIC_ROUTES} from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import TRANSACTION_FORM_INPUT_IDS from '@src/types/form/DebugTransactionForm';
 import ConstantPicker from './ConstantPicker';
 import DebugTagPicker from './DebugTagPicker';
 
-type DebugDetailsConstantPickerPageProps = PlatformStackScreenProps<DebugParamList, typeof SCREENS.DEBUG.DETAILS_CONSTANT_PICKER_PAGE>;
+type DynamicDebugDetailsConstantPickerPageProps = PlatformStackScreenProps<DebugParamList, typeof SCREENS.DEBUG.DYNAMIC_DETAILS_CONSTANT_PICKER_PAGE>;
 
-function DebugDetailsConstantPickerPage({
+function DynamicDebugDetailsConstantPickerPage({
     route: {
-        params: {formType, fieldName, fieldValue, policyID = '', backTo = ''},
+        params: {formType, fieldName, fieldValue, policyID = ''},
     },
-    navigation,
-}: DebugDetailsConstantPickerPageProps) {
+}: DynamicDebugDetailsConstantPickerPageProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
-    const onSubmit = useCallback(
-        (item: {text?: string; keyForList?: string}) => {
-            const value = item.text === fieldValue ? '' : (item.text ?? '');
-            // Check the navigation state and "backTo" parameter to decide navigation behavior
-            if (navigation.getState().routes.length === 1 && !backTo) {
-                // If there is only one route and "backTo" is empty, go back in navigation
-                Navigation.goBack();
-            } else if (!!backTo && navigation.getState().routes.length === 1) {
-                // If "backTo" is not empty and there is only one route, go back to the specific route defined in "backTo" with a country parameter
-                Navigation.goBack(appendParam(backTo, fieldName, value));
-            } else {
-                // Otherwise, navigate to the specific route defined in "backTo" with a country parameter
-                Navigation.navigate(appendParam(backTo, fieldName, value));
-            }
-        },
-        [backTo, fieldName, fieldValue, navigation],
-    );
+    const backPath = useDynamicBackPath(DYNAMIC_ROUTES.DETAILS_CONSTANT_PICKER.path);
+    const onSubmit = (item: {text?: string; keyForList?: string}) => {
+        const value = item.text === fieldValue ? '' : (item.text ?? '');
+        Navigation.goBack(appendParam(backPath, fieldName ?? '', value), {compareParams: false});
+    };
 
     const renderPicker = useCallback(() => {
         if (([TRANSACTION_FORM_INPUT_IDS.CURRENCY, TRANSACTION_FORM_INPUT_IDS.MODIFIED_CURRENCY, TRANSACTION_FORM_INPUT_IDS.ORIGINAL_CURRENCY] as string[]).includes(fieldName)) {
@@ -91,10 +80,16 @@ function DebugDetailsConstantPickerPage({
 
     return (
         <ScreenWrapper testID="DebugDetailsConstantPickerPage">
-            <HeaderWithBackButton title={fieldName} />
+            <HeaderWithBackButton
+                title={fieldName}
+                shouldShowBackButton
+                onBackButtonPress={() => {
+                    Navigation.goBack(fieldValue ? appendParam(backPath, fieldName, fieldValue) : backPath, {compareParams: false});
+                }}
+            />
             <View style={styles.containerWithSpaceBetween}>{renderPicker()}</View>
         </ScreenWrapper>
     );
 }
 
-export default DebugDetailsConstantPickerPage;
+export default DynamicDebugDetailsConstantPickerPage;

src/pages/Debug/DebugDetailsDateTimePickerPage.tsx → src/pages/Debug/DynamicDebugDetailsDateTimePickerPage.tsx

@@ -7,29 +7,43 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
 import TimePicker from '@components/TimePicker/TimePicker';
+import useDynamicBackPath from '@hooks/useDynamicBackPath';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {DebugParamList} from '@libs/Navigation/types';
 import {appendParam} from '@libs/Url';
+import {DYNAMIC_ROUTES} from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 
-type DebugDetailsDateTimePickerPageProps = PlatformStackScreenProps<DebugParamList, typeof SCREENS.DEBUG.DETAILS_DATE_TIME_PICKER_PAGE>;
+type DynamicDebugDetailsDateTimePickerPageProps = PlatformStackScreenProps<DebugParamList, typeof SCREENS.DEBUG.DYNAMIC_DETAILS_DATE_TIME_PICKER_PAGE>;
 
-function DebugDetailsDateTimePickerPage({
+function DynamicDebugDetailsDateTimePickerPage({
     route: {
-        params: {fieldName, fieldValue = '', backTo = ''},
+        params: {fieldName, fieldValue = ''},
     },
-    navigation,
-}: DebugDetailsDateTimePickerPageProps) {
+}: DynamicDebugDetailsDateTimePickerPageProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
+    const backPath = useDynamicBackPath(DYNAMIC_ROUTES.DETAILS_DATE_TIME_PICKER.path);
     const [date, setDate] = useState(() => DateUtils.extractDate(fieldValue));
+
+    const handleSubmit = (time: string) => {
+        const formattedDateTime = format(new Date(`${date} ${time}`), 'yyyy-MM-dd HH:mm:ss.SSS');
+        Navigation.goBack(appendParam(backPath, fieldName ?? '', formattedDateTime), {compareParams: false});
+    };
+
     return (
-        <ScreenWrapper testID="DebugDetailsDateTimePickerPage">
-            <HeaderWithBackButton title={fieldName} />
+        <ScreenWrapper testID="DynamicDebugDetailsDateTimePickerPage">
+            <HeaderWithBackButton
+                title={fieldName}
+                shouldShowBackButton
+                onBackButtonPress={() => {
+                    Navigation.goBack(fieldValue ? appendParam(backPath, fieldName, fieldValue) : backPath, {compareParams: false});
+                }}
+            />
             <ScrollView contentContainerStyle={styles.gap8}>
                 <View style={styles.ph5}>
                     <Text style={styles.headerText}>{translate('debug.date')}</Text>
@@ -42,19 +56,7 @@ function DebugDetailsDateTimePickerPage({
                 <View>
                     <Text style={[styles.headerText, styles.ph5]}>{translate('debug.time')}</Text>
                     <TimePicker
-                        onSubmit={(time) => {
-                            // Check the navigation state and "backTo" parameter to decide navigation behavior
-                            if (navigation.getState().routes.length === 1 && !backTo) {
-                                // If there is only one route and "backTo" is empty, go back in navigation
-                                Navigation.goBack();
-                            } else if (!!backTo && navigation.getState().routes.length === 1) {
-                                // If "backTo" is not empty and there is only one route, go back to the specific route defined in "backTo" with a country parameter
-                                Navigation.goBack(appendParam(backTo, fieldName, format(new Date(`${date} ${time}`), 'yyyy-MM-dd HH:mm:ss.SSS')));
-                            } else {
-                                // Otherwise, navigate to the specific route defined in "backTo" with a country parameter
-                                Navigation.navigate(appendParam(backTo, fieldName, format(new Date(`${date} ${time}`), 'yyyy-MM-dd HH:mm:ss.SSS')));
-                            }
-                        }}
+                        onSubmit={handleSubmit}
                         defaultValue={fieldValue}
                         shouldValidate={false}
                         showFullFormat
@@ -65,4 +67,4 @@ function DebugDetailsDateTimePickerPage({
     );
 }
 
-export default DebugDetailsDateTimePickerPage;
+export default DynamicDebugDetailsDateTimePickerPage;