fix: allow user to instantly edit created distance rate

src/libs/PolicyDistanceRatesUtils.ts

@@ -1,5 +1,7 @@
 import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
+import CONST from '@src/CONST';
 import type ONYXKEYS from '@src/ONYXKEYS';
+import type {Rate} from '@src/types/onyx/Policy';
 import * as CurrencyUtils from './CurrencyUtils';
 import getPermittedDecimalSeparator from './getPermittedDecimalSeparator';
 import * as MoneyRequestUtils from './MoneyRequestUtils';
@@ -22,4 +24,13 @@ function validateRateValue(values: FormOnyxValues<RateValueForm>, currency: stri
     return errors;
 }
 
-export default validateRateValue;
+/**
+ * Get the optimistic rate name in a way that matches BE logic
+ * @param rates
+ */
+function getOptimisticRateName(rates: Record<string, Rate>): string {
+    const existingRatesWithSameName = Object.values(rates).filter((rate) => (rate.name ?? '').startsWith(CONST.CUSTOM_UNITS.DEFAULT_RATE));
+    return existingRatesWithSameName.length ? `${CONST.CUSTOM_UNITS.DEFAULT_RATE} ${existingRatesWithSameName.length + 1}` : CONST.CUSTOM_UNITS.DEFAULT_RATE;
+}
+
+export {validateRateValue, getOptimisticRateName};

src/pages/workspace/distanceRates/CreateDistanceRatePage.tsx

@@ -11,7 +11,7 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import validateRateValue from '@libs/PolicyDistanceRatesUtils';
+import {getOptimisticRateName, validateRateValue} from '@libs/PolicyDistanceRatesUtils';
 import Navigation from '@navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@navigation/types';
 import AdminPolicyAccessOrNotFoundWrapper from '@pages/workspace/AdminPolicyAccessOrNotFoundWrapper';
@@ -49,7 +49,7 @@ function CreateDistanceRatePage({policy, route}: CreateDistanceRatePageProps) {
     const submit = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.POLICY_CREATE_DISTANCE_RATE_FORM>) => {
         const newRate: Rate = {
             currency,
-            name: CONST.CUSTOM_UNITS.DEFAULT_RATE,
+            name: getOptimisticRateName(customUnits[customUnitID]?.rates),
             rate: parseFloat(values.rate) * CONST.POLICY.CUSTOM_UNIT_RATE_BASE_OFFSET,
             customUnitRateID,
             enabled: true,

src/pages/workspace/distanceRates/PolicyDistanceRateEditPage.tsx

@@ -13,7 +13,7 @@ import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import validateRateValue from '@libs/PolicyDistanceRatesUtils';
+import {validateRateValue} from '@libs/PolicyDistanceRatesUtils';
 import type {SettingsNavigatorParamList} from '@navigation/types';
 import AdminPolicyAccessOrNotFoundWrapper from '@pages/workspace/AdminPolicyAccessOrNotFoundWrapper';
 import FeatureEnabledAccessOrNotFoundWrapper from '@pages/workspace/FeatureEnabledAccessOrNotFoundWrapper';

src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx

@@ -179,10 +179,12 @@ function PolicyDistanceRatesPage({policy, route}: PolicyDistanceRatesPageProps)
     };
 
     const toggleAllRates = () => {
-        if (selectedDistanceRates.length === Object.values(customUnitRates).length) {
+        const allSelectableRates = Object.values(customUnitRates).filter((rate) => rate.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE);
+
+        if (selectedDistanceRates.length === allSelectableRates.length) {
             setSelectedDistanceRates([]);
         } else {
-            setSelectedDistanceRates([...Object.values(customUnitRates).filter((rate) => rate.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE)]);
+            setSelectedDistanceRates([...allSelectableRates]);
         }
     };
 

src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/RatePage.tsx

@@ -9,7 +9,7 @@ import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import validateRateValue from '@libs/PolicyDistanceRatesUtils';
+import {validateRateValue} from '@libs/PolicyDistanceRatesUtils';
 import withPolicy from '@pages/workspace/withPolicy';
 import type {WithPolicyProps} from '@pages/workspace/withPolicy';
 import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections';