feat: policy distance rates settings

src/CONST.ts

@@ -1456,6 +1456,10 @@ const CONST = {
             DISABLE: 'disable',
             ENABLE: 'enable',
         },
+        UNITS: {
+            MI: 'Miles',
+            KM: 'Kilometers',
+        },
     },
 
     CUSTOM_UNITS: {

src/ROUTES.ts

@@ -613,6 +613,10 @@ const ROUTES = {
         route: 'settings/workspaces/:policyID/distance-rates/new',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/distance-rates/new` as const,
     },
+    WORKSPACE_DISTANCE_RATES_SETTINGS: {
+        route: 'settings/workspace/:policyID/distance-rates/settings',
+        getRoute: (policyID: string) => `settings/workspace/${policyID}/distance-rates/settings` as const,
+    },
     // Referral program promotion
     REFERRAL_DETAILS_MODAL: {
         route: 'referral/:contentType',

src/SCREENS.ts

@@ -240,6 +240,7 @@ const SCREENS = {
         MEMBER_DETAILS_ROLE_SELECTION: 'Workspace_Member_Details_Role_Selection',
         DISTANCE_RATES: 'Distance_Rates',
         CREATE_DISTANCE_RATE: 'Create_Distance_Rate',
+        DISTANCE_RATES_SETTINGS: 'Distance_Rates_Settings',
     },
 
     EDIT_REQUEST: {

src/languages/en.ts

@@ -1996,6 +1996,12 @@ export default {
             status: 'Status',
             enabled: 'Enabled',
             disabled: 'Disabled',
+            unit: 'Unit',
+            defaultCategory: 'Default category',
+            units: {
+                MI: 'Miles',
+                KM: 'Kilometers',
+            },
         },
         editor: {
             descriptionInputLabel: 'Description',

src/languages/es.ts

@@ -2021,6 +2021,12 @@ export default {
             status: 'Estado',
             enabled: 'Activada',
             disabled: 'Desactivada',
+            unit: 'Unidad',
+            defaultCategory: 'Categoría predeterminada',
+            units: {
+                MI: 'Millas',
+                KM: 'Kilómetros',
+            },
         },
         editor: {
             nameInputLabel: 'Nombre',

src/libs/API/parameters/SetPolicyDistanceRatesDefaultCategoryParams.ts

@@ -0,0 +1,6 @@
+type SetPolicyDistanceRatesDefaultCategoryParams = {
+    policyID: string;
+    customUnit: string;
+};
+
+export default SetPolicyDistanceRatesDefaultCategoryParams;

src/libs/API/parameters/SetPolicyDistanceRatesUnitParams.ts

@@ -0,0 +1,6 @@
+type SetPolicyDistanceRatesUnitParams = {
+    policyID: string;
+    customUnit: string;
+};
+
+export default SetPolicyDistanceRatesUnitParams;

src/libs/API/parameters/index.ts

@@ -180,4 +180,6 @@ export type {default as OpenPolicyTaxesPageParams} from './OpenPolicyTaxesPagePa
 export type {default as EnablePolicyTaxesParams} from './EnablePolicyTaxesParams';
 export type {default as OpenPolicyMoreFeaturesPageParams} from './OpenPolicyMoreFeaturesPageParams';
 export type {default as CreatePolicyDistanceRateParams} from './CreatePolicyDistanceRateParams';
+export type {default as SetPolicyDistanceRatesUnitParams} from './SetPolicyDistanceRatesUnitParams';
+export type {default as SetPolicyDistanceRatesDefaultCategoryParams} from './SetPolicyDistanceRatesDefaultCategoryParams';
 export type {default as CreatePolicyTagsParams} from './CreatePolicyTagsParams';

src/libs/API/types.ts

@@ -177,6 +177,8 @@ const WRITE_COMMANDS = {
     ACCEPT_JOIN_REQUEST: 'AcceptJoinRequest',
     DECLINE_JOIN_REQUEST: 'DeclineJoinRequest',
     CREATE_POLICY_DISTANCE_RATE: 'CreatePolicyDistanceRate',
+    SET_POLICY_DISTANCE_RATES_UNIT: 'SetPolicyDistanceRatesUnit',
+    SET_POLICY_DISTANCE_RATES_DEFAULT_CATEGORY: 'SetPolicyDistanceRatesDefaultCategory',
 } as const;
 
 type WriteCommand = ValueOf<typeof WRITE_COMMANDS>;
@@ -352,6 +354,8 @@ type WriteCommandParameters = {
     [WRITE_COMMANDS.ACCEPT_JOIN_REQUEST]: Parameters.AcceptJoinRequestParams;
     [WRITE_COMMANDS.DECLINE_JOIN_REQUEST]: Parameters.DeclineJoinRequestParams;
     [WRITE_COMMANDS.CREATE_POLICY_DISTANCE_RATE]: Parameters.CreatePolicyDistanceRateParams;
+    [WRITE_COMMANDS.SET_POLICY_DISTANCE_RATES_UNIT]: Parameters.SetPolicyDistanceRatesUnitParams;
+    [WRITE_COMMANDS.SET_POLICY_DISTANCE_RATES_DEFAULT_CATEGORY]: Parameters.SetPolicyDistanceRatesDefaultCategoryParams;
 };
 
 const READ_COMMANDS = {

src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx

@@ -264,7 +264,8 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.WORKSPACE.MEMBER_DETAILS_ROLE_SELECTION]: () => require('../../../pages/workspace/members/WorkspaceMemberDetailsRoleSelectionPage').default as React.ComponentType,
     [SCREENS.WORKSPACE.CATEGORY_CREATE]: () => require('../../../pages/workspace/categories/CreateCategoryPage').default as React.ComponentType,
     [SCREENS.WORKSPACE.CATEGORY_EDIT]: () => require('../../../pages/workspace/categories/EditCategoryPage').default as React.ComponentType,
-    [SCREENS.WORKSPACE.CREATE_DISTANCE_RATE]: () => require('@pages/workspace/distanceRates/CreateDistanceRatePage').default as React.ComponentType,
+    [SCREENS.WORKSPACE.CREATE_DISTANCE_RATE]: () => require('../../../pages/workspace/distanceRates/CreateDistanceRatePage').default as React.ComponentType,
+    [SCREENS.WORKSPACE.DISTANCE_RATES_SETTINGS]: () => require('../../../pages/workspace/distanceRates/PolicyDistanceRatesSettingsPage').default as React.ComponentType,
     [SCREENS.WORKSPACE.TAGS_SETTINGS]: () => require('../../../pages/workspace/tags/WorkspaceTagsSettingsPage').default as React.ComponentType,
     [SCREENS.WORKSPACE.TAG_SETTINGS]: () => require('../../../pages/workspace/tags/TagSettingsPage').default as React.ComponentType,
     [SCREENS.WORKSPACE.TAGS_EDIT]: () => require('../../../pages/workspace/tags/WorkspaceEditTagsPage').default as React.ComponentType,

src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts

@@ -13,7 +13,7 @@ const FULL_SCREEN_TO_RHP_MAPPING: Partial<Record<FullScreenName, string[]>> = {
     ],
     [SCREENS.WORKSPACE.TAGS]: [SCREENS.WORKSPACE.TAGS_SETTINGS, SCREENS.WORKSPACE.TAGS_EDIT, SCREENS.WORKSPACE.TAG_CREATE, SCREENS.WORKSPACE.TAG_SETTINGS],
     [SCREENS.WORKSPACE.CATEGORIES]: [SCREENS.WORKSPACE.CATEGORY_CREATE, SCREENS.WORKSPACE.CATEGORY_SETTINGS, SCREENS.WORKSPACE.CATEGORIES_SETTINGS, SCREENS.WORKSPACE.CATEGORY_EDIT],
-    [SCREENS.WORKSPACE.DISTANCE_RATES]: [SCREENS.WORKSPACE.CREATE_DISTANCE_RATE],
+    [SCREENS.WORKSPACE.DISTANCE_RATES]: [SCREENS.WORKSPACE.CREATE_DISTANCE_RATE, SCREENS.WORKSPACE.DISTANCE_RATES_SETTINGS],
 };
 
 export default FULL_SCREEN_TO_RHP_MAPPING;

src/libs/Navigation/linkingConfig/config.ts

@@ -292,6 +292,9 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                         [SCREENS.WORKSPACE.CREATE_DISTANCE_RATE]: {
                             path: ROUTES.WORKSPACE_CREATE_DISTANCE_RATE.route,
                         },
+                        [SCREENS.WORKSPACE.DISTANCE_RATES_SETTINGS]: {
+                            path: ROUTES.WORKSPACE_DISTANCE_RATES_SETTINGS.route,
+                        },
                         [SCREENS.WORKSPACE.TAGS_SETTINGS]: {
                             path: ROUTES.WORKSPACE_TAGS_SETTINGS.route,
                         },

src/libs/Navigation/types.ts

@@ -206,6 +206,9 @@ type SettingsNavigatorParamList = {
     [SCREENS.WORKSPACE.CREATE_DISTANCE_RATE]: {
         policyID: string;
     };
+    [SCREENS.WORKSPACE.DISTANCE_RATES_SETTINGS]: {
+        policyID: string;
+    };
     [SCREENS.GET_ASSISTANCE]: {
         backTo: Routes;
     };

src/libs/actions/Policy.ts

@@ -34,6 +34,8 @@ import type {
     OpenWorkspaceMembersPageParams,
     OpenWorkspaceParams,
     OpenWorkspaceReimburseViewParams,
+    SetPolicyDistanceRatesDefaultCategoryParams,
+    SetPolicyDistanceRatesUnitParams,
     SetWorkspaceApprovalModeParams,
     SetWorkspaceAutoReportingFrequencyParams,
     SetWorkspaceAutoReportingMonthlyOffsetParams,
@@ -3829,6 +3831,114 @@ function clearCreateDistanceRateItemAndError(policyID: string, customUnitID: str
     });
 }
 
+function setPolicyDistanceRatesUnit(policyID: string, currentCustomUnit: CustomUnit, newCustomUnit: CustomUnit) {
+    const optimisticData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
+            value: {
+                customUnits: {
+                    [newCustomUnit.customUnitID]: {
+                        ...newCustomUnit,
+                        pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+                    },
+                },
+            },
+        },
+    ];
+
+    const successData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
+            value: {
+                customUnits: {
+                    [newCustomUnit.customUnitID]: {
+                        pendingAction: null,
+                    },
+                },
+            },
+        },
+    ];
+
+    const failureData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
+            value: {
+                customUnits: {
+                    [currentCustomUnit.customUnitID]: {
+                        ...currentCustomUnit,
+                        errors: ErrorUtils.getMicroSecondOnyxError('common.genericErrorMessage'),
+                        pendingAction: null,
+                    },
+                },
+            },
+        },
+    ];
+
+    const params: SetPolicyDistanceRatesUnitParams = {
+        policyID,
+        customUnit: JSON.stringify(newCustomUnit),
+    };
+
+    API.write(WRITE_COMMANDS.SET_POLICY_DISTANCE_RATES_UNIT, params, {optimisticData, successData, failureData});
+}
+
+function setPolicyDistanceRatesDefaultCategory(policyID: string, currentCustomUnit: CustomUnit, newCustomUnit: CustomUnit) {
+    const optimisticData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
+            value: {
+                customUnits: {
+                    [newCustomUnit.customUnitID]: {
+                        ...newCustomUnit,
+                        pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+                    },
+                },
+            },
+        },
+    ];
+
+    const successData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
+            value: {
+                customUnits: {
+                    [newCustomUnit.customUnitID]: {
+                        pendingAction: null,
+                    },
+                },
+            },
+        },
+    ];
+
+    const failureData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
+            value: {
+                customUnits: {
+                    [currentCustomUnit.customUnitID]: {
+                        ...currentCustomUnit,
+                        errors: ErrorUtils.getMicroSecondOnyxError('common.genericErrorMessage'),
+                        pendingAction: null,
+                    },
+                },
+            },
+        },
+    ];
+
+    const params: SetPolicyDistanceRatesDefaultCategoryParams = {
+        policyID,
+        customUnit: JSON.stringify(newCustomUnit),
+    };
+
+    API.write(WRITE_COMMANDS.SET_POLICY_DISTANCE_RATES_DEFAULT_CATEGORY, params, {optimisticData, successData, failureData});
+}
+
 export {
     removeMembers,
     updateWorkspaceMembersRole,
@@ -3904,6 +4014,8 @@ export {
     generateCustomUnitID,
     createPolicyDistanceRate,
     clearCreateDistanceRateItemAndError,
+    setPolicyDistanceRatesUnit,
+    setPolicyDistanceRatesDefaultCategory,
     createPolicyTag,
     clearPolicyTagErrors,
     clearWorkspaceReimbursementErrors,

src/pages/workspace/distanceRates/CategorySelector/CategorySelectorModal.tsx

@@ -0,0 +1,82 @@
+import React, {useMemo} from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import Modal from '@components/Modal';
+import ScreenWrapper from '@components/ScreenWrapper';
+import SelectionList from '@components/SelectionList';
+import RadioListItem from '@components/SelectionList/RadioListItem';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+import type * as OnyxTypes from '@src/types/onyx';
+import type CategoryItemType from './types';
+
+type CategorySelectorModalProps = {
+    /** Collection of categories attached to a policy */
+    policyCategories: OnyxEntry<OnyxTypes.PolicyCategories>;
+
+    /** Whether the modal is visible */
+    isVisible: boolean;
+
+    /** Selected category  */
+    currentCategory: string;
+
+    /** Function to call when the user selects a category */
+    onCategorySelected: (value: CategoryItemType) => void;
+
+    /** Function to call when the user closes the category selector modal */
+    onClose: () => void;
+
+    /** Label to display on field */
+    label: string;
+};
+
+function CategorySelectorModal({policyCategories, isVisible, currentCategory, onCategorySelected, onClose, label}: CategorySelectorModalProps) {
+    const styles = useThemeStyles();
+
+    const categories = useMemo(
+        () =>
+            Object.values(policyCategories ?? {}).map((value) => ({
+                value: value.name,
+                text: value.name,
+                keyForList: value.name,
+                isSelected: value.name === currentCategory,
+            })),
+        [currentCategory, policyCategories],
+    );
+
+    return (
+        <Modal
+            type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
+            isVisible={isVisible}
+            onClose={onClose}
+            onModalHide={onClose}
+            hideModalContentWhileAnimating
+            useNativeDriver
+        >
+            <ScreenWrapper
+                style={[styles.pb0]}
+                includePaddingTop={false}
+                includeSafeAreaPaddingBottom={false}
+                testID={CategorySelectorModal.displayName}
+            >
+                <HeaderWithBackButton
+                    title={label}
+                    shouldShowBackButton
+                    onBackButtonPress={onClose}
+                />
+                <SelectionList
+                    ListItem={RadioListItem}
+                    sections={[{data: categories, indexOffset: 0}]}
+                    initiallyFocusedOptionKey={currentCategory}
+                    onSelectRow={onCategorySelected}
+                    shouldStopPropagation
+                    shouldUseDynamicMaxToRenderPerBatch
+                />
+            </ScreenWrapper>
+        </Modal>
+    );
+}
+
+CategorySelectorModal.displayName = 'CategorySelectorModal';
+
+export default CategorySelectorModal;