diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 4229b4e7d2bc..4ddca3c3b391 100644 --- a/src/ROUTES.ts +++ b/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, diff --git a/src/SCREENS.ts b/src/SCREENS.ts index 407668282679..a16d81bffb02 100644 --- a/src/SCREENS.ts +++ b/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', diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index a4ae8576f891..f18ce8a6f3f3 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -1070,8 +1070,8 @@ const DebugModalStackNavigator = createModalStackNavigator({ [SCREENS.DEBUG.REPORT]: () => require('../../../../pages/Debug/Report/DebugReportPage').default, [SCREENS.DEBUG.REPORT_ACTION]: () => require('../../../../pages/Debug/ReportAction/DebugReportActionPage').default, [SCREENS.DEBUG.REPORT_ACTION_CREATE]: () => require('../../../../pages/Debug/ReportAction/DebugReportActionCreatePage').default, - [SCREENS.DEBUG.DETAILS_CONSTANT_PICKER_PAGE]: () => require('../../../../pages/Debug/DebugDetailsConstantPickerPage').default, - [SCREENS.DEBUG.DETAILS_DATE_TIME_PICKER_PAGE]: () => require('../../../../pages/Debug/DebugDetailsDateTimePickerPage').default, + [SCREENS.DEBUG.DYNAMIC_DETAILS_CONSTANT_PICKER_PAGE]: () => require('../../../../pages/Debug/DynamicDebugDetailsConstantPickerPage').default, + [SCREENS.DEBUG.DYNAMIC_DETAILS_DATE_TIME_PICKER_PAGE]: () => require('../../../../pages/Debug/DynamicDebugDetailsDateTimePickerPage').default, [SCREENS.DEBUG.TRANSACTION]: () => require('../../../../pages/Debug/Transaction/DebugTransactionPage').default, [SCREENS.DEBUG.TRANSACTION_VIOLATION_CREATE]: () => require('../../../../pages/Debug/TransactionViolation/DebugTransactionViolationCreatePage').default, [SCREENS.DEBUG.TRANSACTION_VIOLATION]: () => require('../../../../pages/Debug/TransactionViolation/DebugTransactionViolationPage').default, diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts index 07dd69d5c78f..4308034d8dbc 100644 --- a/src/libs/Navigation/linkingConfig/config.ts +++ b/src/libs/Navigation/linkingConfig/config.ts @@ -2031,14 +2031,8 @@ const config: LinkingOptions['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, diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index ceb52bdcb30f..05abef226318 100644 --- a/src/libs/Navigation/types.ts +++ b/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; diff --git a/src/pages/Debug/ConstantSelector.tsx b/src/pages/Debug/ConstantSelector.tsx index 637370390169..33509de90ac3 100644 --- a/src/pages/Debug/ConstantSelector.tsx +++ b/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 /> diff --git a/src/pages/Debug/DateTimeSelector.tsx b/src/pages/Debug/DateTimeSelector.tsx index f9da6e064c9f..4dd552c1bc02 100644 --- a/src/pages/Debug/DateTimeSelector.tsx +++ b/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 /> diff --git a/src/pages/Debug/DebugDetailsConstantPickerPage.tsx b/src/pages/Debug/DynamicDebugDetailsConstantPickerPage.tsx similarity index 65% rename from src/pages/Debug/DebugDetailsConstantPickerPage.tsx rename to src/pages/Debug/DynamicDebugDetailsConstantPickerPage.tsx index 8e832527a3f8..9ceb714752b7 100644 --- a/src/pages/Debug/DebugDetailsConstantPickerPage.tsx +++ b/src/pages/Debug/DynamicDebugDetailsConstantPickerPage.tsx @@ -4,6 +4,7 @@ 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'; @@ -11,38 +12,26 @@ import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavig 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; +type DynamicDebugDetailsConstantPickerPageProps = PlatformStackScreenProps; -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 ( - + { + Navigation.goBack(fieldValue ? appendParam(backPath, fieldName, fieldValue) : backPath, {compareParams: false}); + }} + /> {renderPicker()} ); } -export default DebugDetailsConstantPickerPage; +export default DynamicDebugDetailsConstantPickerPage; diff --git a/src/pages/Debug/DebugDetailsDateTimePickerPage.tsx b/src/pages/Debug/DynamicDebugDetailsDateTimePickerPage.tsx similarity index 52% rename from src/pages/Debug/DebugDetailsDateTimePickerPage.tsx rename to src/pages/Debug/DynamicDebugDetailsDateTimePickerPage.tsx index 91598772b9fb..b5d024a41b1b 100644 --- a/src/pages/Debug/DebugDetailsDateTimePickerPage.tsx +++ b/src/pages/Debug/DynamicDebugDetailsDateTimePickerPage.tsx @@ -7,6 +7,7 @@ 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'; @@ -14,22 +15,35 @@ 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; +type DynamicDebugDetailsDateTimePickerPageProps = PlatformStackScreenProps; -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 ( - - + + { + Navigation.goBack(fieldValue ? appendParam(backPath, fieldName, fieldValue) : backPath, {compareParams: false}); + }} + /> {translate('debug.date')} @@ -42,19 +56,7 @@ function DebugDetailsDateTimePickerPage({ {translate('debug.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;