Migrate UnitSelectorModal to nav RHP

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: yusufdeveloper2903

src/ROUTES.ts

@@ -2874,6 +2874,10 @@ const ROUTES = {
         route: 'workspaces/:policyID/distance-rates/settings',
         getRoute: (policyID: string) => `workspaces/${policyID}/distance-rates/settings` as const,
     },
+    WORKSPACE_DISTANCE_RATES_UNIT: {
+        route: 'workspaces/:policyID/distance-rates/settings/unit',
+        getRoute: (policyID: string) => `workspaces/${policyID}/distance-rates/settings/unit` as const,
+    },
     WORKSPACE_DISTANCE_RATE_DETAILS: {
         route: 'workspaces/:policyID/distance-rates/:rateID',
         getRoute: (policyID: string, rateID: string) => `workspaces/${policyID}/distance-rates/${rateID}` as const,

src/SCREENS.ts

@@ -849,6 +849,7 @@ const SCREENS = {
         CREATE_DISTANCE_RATE: 'Create_Distance_Rate',
         CREATE_DISTANCE_RATE_UPGRADE: 'Create_Distance_Rate_Upgrade',
         DISTANCE_RATES_SETTINGS: 'Distance_Rates_Settings',
+        DISTANCE_RATES_UNIT: 'Distance_Rates_Unit',
         DISTANCE_RATE_DETAILS: 'Distance_Rate_Details',
         DISTANCE_RATE_EDIT: 'Distance_Rate_Edit',
         DISTANCE_RATE_NAME_EDIT: 'Distance_Rate_Name_Edit',

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

@@ -572,6 +572,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.WORKSPACE.CREATE_DISTANCE_RATE]: () => require<ReactComponentModule>('../../../../pages/workspace/distanceRates/CreateDistanceRatePage').default,
     [SCREENS.WORKSPACE.CREATE_DISTANCE_RATE_UPGRADE]: () => require<ReactComponentModule>('../../../../pages/workspace/distanceRates/CreateDistanceRatePage').default,
     [SCREENS.WORKSPACE.DISTANCE_RATES_SETTINGS]: () => require<ReactComponentModule>('../../../../pages/workspace/distanceRates/PolicyDistanceRatesSettingsPage').default,
+    [SCREENS.WORKSPACE.DISTANCE_RATES_UNIT]: () => require<ReactComponentModule>('../../../../pages/workspace/distanceRates/PolicyDistanceRateUnitPage').default,
     [SCREENS.WORKSPACE.DISTANCE_RATE_DETAILS]: () => require<ReactComponentModule>('../../../../pages/workspace/distanceRates/PolicyDistanceRateDetailsPage').default,
     [SCREENS.WORKSPACE.DISTANCE_RATE_EDIT]: () => require<ReactComponentModule>('../../../../pages/workspace/distanceRates/PolicyDistanceRateEditPage').default,
     [SCREENS.WORKSPACE.DISTANCE_RATE_NAME_EDIT]: () => require<ReactComponentModule>('../../../../pages/workspace/distanceRates/PolicyDistanceRateNameEditPage').default,

src/libs/Navigation/linkingConfig/RELATIONS/WORKSPACE_TO_RHP.ts

@@ -224,6 +224,7 @@ const WORKSPACE_TO_RHP: Partial<Record<keyof WorkspaceSplitNavigatorParamList, s
     ],
     [SCREENS.WORKSPACE.DISTANCE_RATES]: [
         SCREENS.WORKSPACE.DISTANCE_RATES_SETTINGS,
+        SCREENS.WORKSPACE.DISTANCE_RATES_UNIT,
         SCREENS.WORKSPACE.DISTANCE_RATE_EDIT,
         SCREENS.WORKSPACE.DISTANCE_RATE_NAME_EDIT,
         SCREENS.WORKSPACE.DISTANCE_RATE_TAX_RECLAIMABLE_ON_EDIT,

src/libs/Navigation/linkingConfig/config.ts

@@ -1072,6 +1072,9 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
                         [SCREENS.WORKSPACE.DISTANCE_RATES_SETTINGS]: {
                             path: ROUTES.WORKSPACE_DISTANCE_RATES_SETTINGS.route,
                         },
+                        [SCREENS.WORKSPACE.DISTANCE_RATES_UNIT]: {
+                            path: ROUTES.WORKSPACE_DISTANCE_RATES_UNIT.route,
+                        },
                         [SCREENS.WORKSPACE.DISTANCE_RATE_DETAILS]: {
                             path: ROUTES.WORKSPACE_DISTANCE_RATE_DETAILS.route,
                         },

src/libs/Navigation/types.ts

@@ -705,6 +705,9 @@ type SettingsNavigatorParamList = {
     [SCREENS.WORKSPACE.DISTANCE_RATES_SETTINGS]: {
         policyID: string;
     };
+    [SCREENS.WORKSPACE.DISTANCE_RATES_UNIT]: {
+        policyID: string;
+    };
     [SCREENS.WORKSPACE.ACCOUNTING.QUICKBOOKS_ONLINE_IMPORT]: {
         policyID: string;
     };

src/pages/workspace/distanceRates/PolicyDistanceRateUnitPage.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import ScreenWrapper from '@components/ScreenWrapper';
+import type {UnitItemType} from '@components/UnitPicker';
+import UnitPicker from '@components/UnitPicker';
+import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
+import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
+import {getDistanceRateCustomUnit} from '@libs/PolicyUtils';
+import type {SettingsNavigatorParamList} from '@navigation/types';
+import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
+import {setPolicyDistanceRatesUnit} from '@userActions/Policy/DistanceRate';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type SCREENS from '@src/SCREENS';
+
+type PolicyDistanceRateUnitPageProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.DISTANCE_RATES_UNIT>;
+
+function PolicyDistanceRateUnitPage({route}: PolicyDistanceRateUnitPageProps) {
+    const policyID = route.params.policyID;
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
+    const customUnit = getDistanceRateCustomUnit(policy);
+
+    const onUnitSelected = (unit: UnitItemType) => {
+        if (!customUnit) {
+            return;
+        }
+        const attributes = {...customUnit.attributes, unit: unit.value};
+        setPolicyDistanceRatesUnit(policyID, customUnit, {...customUnit, attributes});
+        Navigation.goBack();
+    };
+
+    return (
+        <AccessOrNotFoundWrapper
+            accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
+            policyID={policyID}
+            featureName={CONST.POLICY.MORE_FEATURES.ARE_DISTANCE_RATES_ENABLED}
+        >
+            <ScreenWrapper
+                style={[styles.pb0]}
+                includePaddingTop={false}
+                enableEdgeToEdgeBottomSafeAreaPadding
+                testID={PolicyDistanceRateUnitPage.displayName}
+            >
+                <HeaderWithBackButton title={translate('workspace.distanceRates.unit')} />
+                <UnitPicker
+                    defaultValue={customUnit?.attributes?.unit}
+                    onOptionSelected={onUnitSelected}
+                />
+            </ScreenWrapper>
+        </AccessOrNotFoundWrapper>
+    );
+}
+
+PolicyDistanceRateUnitPage.displayName = 'PolicyDistanceRateUnitPage';
+
+export default PolicyDistanceRateUnitPage;

src/pages/workspace/distanceRates/PolicyDistanceRatesSettingsPage.tsx

@@ -1,15 +1,16 @@
+import {Str} from 'expensify-common';
 import React from 'react';
 import {View} from 'react-native';
 import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
 import CustomUnitDefaultCategorySelector from '@components/CustomUnitDefaultCategorySelector';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import RenderHTML from '@components/RenderHTML';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import Switch from '@components/Switch';
 import Text from '@components/Text';
-import type {UnitItemType} from '@components/UnitPicker';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -18,16 +19,16 @@ import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import {hasEnabledOptions} from '@libs/OptionsListUtils';
 import {getDistanceRateCustomUnit} from '@libs/PolicyUtils';
+import {getUnitTranslationKey} from '@libs/WorkspacesSettingsUtils';
 import type {SettingsNavigatorParamList} from '@navigation/types';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
-import {clearPolicyDistanceRatesErrorFields, setPolicyDistanceRatesUnit} from '@userActions/Policy/DistanceRate';
+import {clearPolicyDistanceRatesErrorFields} from '@userActions/Policy/DistanceRate';
 import {enableDistanceRequestTax} from '@userActions/Policy/Policy';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import type {CustomUnit} from '@src/types/onyx/Policy';
-import UnitSelector from './UnitSelector';
 
 type PolicyDistanceRatesSettingsPageProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.DISTANCE_RATES_SETTINGS>;
 
@@ -48,14 +49,6 @@ function PolicyDistanceRatesSettingsPage({route}: PolicyDistanceRatesSettingsPag
 
     const FullPageBlockingView = !customUnit ? FullPageOfflineBlockingView : View;
 
-    const setNewUnit = (unit: UnitItemType) => {
-        if (!customUnit) {
-            return;
-        }
-        const attributes = {...customUnit?.attributes, unit: unit.value};
-        setPolicyDistanceRatesUnit(policyID, customUnit, {...customUnit, attributes});
-    };
-
     const clearErrorFields = (fieldName: keyof CustomUnit) => {
         if (!customUnit?.customUnitID) {
             return;
@@ -98,11 +91,13 @@ function PolicyDistanceRatesSettingsPage({route}: PolicyDistanceRatesSettingsPag
                                     errorRowStyles={styles.mh5}
                                     onClose={() => clearErrorFields('attributes')}
                                 >
-                                    <UnitSelector
-                                        label={translate('workspace.distanceRates.unit')}
-                                        defaultValue={defaultUnit}
+                                    <MenuItemWithTopDescription
+                                        shouldShowRightIcon
+                                        title={defaultUnit ? Str.recapitalize(translate(getUnitTranslationKey(defaultUnit))) : ''}
+                                        description={translate('workspace.distanceRates.unit')}
+                                        onPress={() => Navigation.navigate(ROUTES.WORKSPACE_DISTANCE_RATES_UNIT.getRoute(policyID))}
                                         wrapperStyle={[styles.ph5, styles.mt3]}
-                                        setNewUnit={setNewUnit}
+                                        sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.DISTANCE_RATES.UNIT_SELECTOR}
                                     />
                                 </OfflineWithFeedback>
                             )}