Merge pull request #49773 from daledah/fix/49336

fix: fixed 4 decimals for distance rates
Expensify · Sep 27, 2024 · eee1593 · eee1593
2 parents 05ca35c + eb41706
commit eee1593
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 41 deletions.
diff --git a/src/components/AmountForm.tsx b/src/components/AmountForm.tsx
@@ -48,6 +48,9 @@ type AmountFormProps = {
 
     /** Whether the form should use a standard TextInput as a base */
     displayAsTextInput?: boolean;
+
+    /** Number of decimals to display */
+    fixedDecimals?: number;
 } & Pick<TextInputWithCurrencySymbolProps, 'hideCurrencySymbol' | 'extraSymbol'> &
     Pick<BaseTextInputProps, 'autoFocus'>;
 
@@ -75,6 +78,7 @@ function AmountForm(
         displayAsTextInput = false,
         isCurrencyPressable = true,
         label,
+        fixedDecimals,
         ...rest
     }: AmountFormProps,
     forwardedRef: ForwardedRef<BaseTextInputRef>,
@@ -84,7 +88,7 @@ function AmountForm(
 
     const textInput = useRef<BaseTextInputRef | null>(null);
 
-    const decimals = CurrencyUtils.getCurrencyDecimals(currency) + extraDecimals;
+    const decimals = fixedDecimals ?? CurrencyUtils.getCurrencyDecimals(currency) + extraDecimals;
     const currentAmount = useMemo(() => (typeof amount === 'string' ? amount : ''), [amount]);
 
     const [shouldUpdateSelection, setShouldUpdateSelection] = useState(true);

diff --git a/src/libs/CurrencyUtils.ts b/src/libs/CurrencyUtils.ts
@@ -164,7 +164,7 @@ function convertAmountToDisplayString(amount = 0, currency: string = CONST.CURRE
     return NumberFormatUtils.format(BaseLocaleListener.getPreferredLocale(), convertedAmount, {
         style: 'currency',
         currency,
-        minimumFractionDigits: getCurrencyDecimals(currency) + 1,
+        minimumFractionDigits: CONST.MAX_TAX_RATE_DECIMAL_PLACES,
     });
 }
 

diff --git a/src/libs/PolicyDistanceRatesUtils.ts b/src/libs/PolicyDistanceRatesUtils.ts
@@ -2,7 +2,6 @@ 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 Localize from './Localize';
 import * as MoneyRequestUtils from './MoneyRequestUtils';
@@ -18,7 +17,7 @@ function validateRateValue(values: FormOnyxValues<RateValueForm>, currency: stri
     const decimalSeparator = toLocaleDigit('.');
 
     // Allow one more decimal place for accuracy
-    const rateValueRegex = RegExp(String.raw`^-?\d{0,8}([${getPermittedDecimalSeparator(decimalSeparator)}]\d{0,${CurrencyUtils.getCurrencyDecimals(currency) + 1}})?$`, 'i');
+    const rateValueRegex = RegExp(String.raw`^-?\d{0,8}([${getPermittedDecimalSeparator(decimalSeparator)}]\d{0,${CONST.MAX_TAX_RATE_DECIMAL_PLACES}})?$`, 'i');
     if (!rateValueRegex.test(parsedRate) || parsedRate === '') {
         errors.rate = Localize.translateLocal('common.error.invalidRateError');
     } else if (NumberUtils.parseFloatAnyLocale(parsedRate) <= 0) {

diff --git a/src/pages/workspace/distanceRates/CreateDistanceRatePage.tsx b/src/pages/workspace/distanceRates/CreateDistanceRatePage.tsx
@@ -1,8 +1,6 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useCallback} from 'react';
 import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
 import AmountForm from '@components/AmountForm';
 import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
 import FormProvider from '@components/Form/FormProvider';
@@ -12,6 +10,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
+import usePolicy from '@hooks/usePolicy';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {getOptimisticRateName, validateRateValue} from '@libs/PolicyDistanceRatesUtils';
 import Navigation from '@navigation/Navigation';
@@ -24,18 +23,14 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
 import INPUT_IDS from '@src/types/form/PolicyCreateDistanceRateForm';
 import type {Rate} from '@src/types/onyx/Policy';
-import type Policy from '@src/types/onyx/Policy';
 
-type CreateDistanceRatePageOnyxProps = {
-    policy: OnyxEntry<Policy>;
-};
+type CreateDistanceRatePageProps = StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.CREATE_DISTANCE_RATE>;
 
-type CreateDistanceRatePageProps = CreateDistanceRatePageOnyxProps & StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.CREATE_DISTANCE_RATE>;
-
-function CreateDistanceRatePage({policy, route}: CreateDistanceRatePageProps) {
+function CreateDistanceRatePage({route}: CreateDistanceRatePageProps) {
     const styles = useThemeStyles();
     const {translate, toLocaleDigit} = useLocalize();
     const policyID = route.params.policyID;
+    const policy = usePolicy(policyID);
     const currency = policy?.outputCurrency ?? CONST.CURRENCY.USD;
     const customUnits = policy?.customUnits ?? {};
     const customUnitID = customUnits[Object.keys(customUnits)[0]]?.customUnitID ?? '';
@@ -90,7 +85,7 @@ function CreateDistanceRatePage({policy, route}: CreateDistanceRatePageProps) {
                         <InputWrapperWithRef
                             InputComponent={AmountForm}
                             inputID={INPUT_IDS.RATE}
-                            extraDecimals={1}
+                            fixedDecimals={CONST.MAX_TAX_RATE_DECIMAL_PLACES}
                             isCurrencyPressable={false}
                             currency={currency}
                             ref={inputCallbackRef}
@@ -104,8 +99,4 @@ function CreateDistanceRatePage({policy, route}: CreateDistanceRatePageProps) {
 
 CreateDistanceRatePage.displayName = 'CreateDistanceRatePage';
 
-export default withOnyx<CreateDistanceRatePageProps, CreateDistanceRatePageOnyxProps>({
-    policy: {
-        key: ({route}) => `${ONYXKEYS.COLLECTION.POLICY}${route.params.policyID}`,
-    },
-})(CreateDistanceRatePage);
+export default CreateDistanceRatePage;
diff --git a/src/pages/workspace/distanceRates/PolicyDistanceRateEditPage.tsx b/src/pages/workspace/distanceRates/PolicyDistanceRateEditPage.tsx
@@ -1,8 +1,6 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useCallback} from 'react';
 import {Keyboard} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
-import type {OnyxEntry} from 'react-native-onyx';
 import AmountForm from '@components/AmountForm';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapperWithRef from '@components/Form/InputWrapper';
@@ -11,6 +9,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
+import usePolicy from '@hooks/usePolicy';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import {validateRateValue} from '@libs/PolicyDistanceRatesUtils';
@@ -22,27 +21,22 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
 import INPUT_IDS from '@src/types/form/PolicyDistanceRateEditForm';
-import type * as OnyxTypes from '@src/types/onyx';
 
-type PolicyDistanceRateEditPageOnyxProps = {
-    /** Policy details */
-    policy: OnyxEntry<OnyxTypes.Policy>;
-};
+type PolicyDistanceRateEditPageProps = StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.DISTANCE_RATE_EDIT>;
 
-type PolicyDistanceRateEditPageProps = PolicyDistanceRateEditPageOnyxProps & StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.DISTANCE_RATE_EDIT>;
-
-function PolicyDistanceRateEditPage({policy, route}: PolicyDistanceRateEditPageProps) {
+function PolicyDistanceRateEditPage({route}: PolicyDistanceRateEditPageProps) {
     const styles = useThemeStyles();
     const {translate, toLocaleDigit} = useLocalize();
     const {inputCallbackRef} = useAutoFocusInput();
 
     const policyID = route.params.policyID;
     const rateID = route.params.rateID;
+    const policy = usePolicy(policyID);
     const customUnits = policy?.customUnits ?? {};
     const customUnit = customUnits[Object.keys(customUnits)[0]];
     const rate = customUnit?.rates[rateID];
     const currency = rate?.currency ?? CONST.CURRENCY.USD;
-    const currentRateValue = (parseFloat((rate?.rate ?? 0).toString()) / CONST.POLICY.CUSTOM_UNIT_RATE_BASE_OFFSET).toFixed(3);
+    const currentRateValue = (parseFloat((rate?.rate ?? 0).toString()) / CONST.POLICY.CUSTOM_UNIT_RATE_BASE_OFFSET).toFixed(CONST.MAX_TAX_RATE_DECIMAL_PLACES);
 
     const submitRate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.POLICY_DISTANCE_RATE_EDIT_FORM>) => {
         if (currentRateValue === values.rate) {
@@ -94,7 +88,7 @@ function PolicyDistanceRateEditPage({policy, route}: PolicyDistanceRateEditPageP
                     <InputWrapperWithRef
                         InputComponent={AmountForm}
                         inputID={INPUT_IDS.RATE}
-                        extraDecimals={1}
+                        fixedDecimals={CONST.MAX_TAX_RATE_DECIMAL_PLACES}
                         defaultValue={currentRateValue}
                         isCurrencyPressable={false}
                         currency={currency}
@@ -108,8 +102,4 @@ function PolicyDistanceRateEditPage({policy, route}: PolicyDistanceRateEditPageP
 
 PolicyDistanceRateEditPage.displayName = 'PolicyDistanceRateEditPage';
 
-export default withOnyx<PolicyDistanceRateEditPageProps, PolicyDistanceRateEditPageOnyxProps>({
-    policy: {
-        key: ({route}) => `${ONYXKEYS.COLLECTION.POLICY}${route.params.policyID}`,
-    },
-})(PolicyDistanceRateEditPage);
+export default PolicyDistanceRateEditPage;
diff --git a/src/pages/workspace/distanceRates/PolicyDistanceRateTaxReclaimableEditPage.tsx b/src/pages/workspace/distanceRates/PolicyDistanceRateTaxReclaimableEditPage.tsx
@@ -9,7 +9,6 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as CurrencyUtils from '@libs/CurrencyUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import {validateTaxClaimableValue} from '@libs/PolicyDistanceRatesUtils';
 import type {SettingsNavigatorParamList} from '@navigation/types';
@@ -35,9 +34,8 @@ function PolicyDistanceRateTaxReclaimableEditPage({route, policy}: PolicyDistanc
     const customUnit = customUnits[Object.keys(customUnits)[0]];
     const rate = customUnit.rates[rateID];
     const currency = rate.currency ?? CONST.CURRENCY.USD;
-    const extraDecimals = 1;
-    const decimals = CurrencyUtils.getCurrencyDecimals(currency) + extraDecimals;
-    const currentTaxReclaimableOnValue = rate.attributes?.taxClaimablePercentage && rate.rate ? ((rate.attributes.taxClaimablePercentage * rate.rate) / 100).toFixed(decimals) : '';
+    const currentTaxReclaimableOnValue =
+        rate.attributes?.taxClaimablePercentage && rate.rate ? ((rate.attributes.taxClaimablePercentage * rate.rate) / 100).toFixed(CONST.MAX_TAX_RATE_DECIMAL_PLACES) : '';
 
     const submitTaxReclaimableOn = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.POLICY_DISTANCE_RATE_TAX_RECLAIMABLE_ON_EDIT_FORM>) => {
         if (values.taxClaimableValue === currentTaxReclaimableOnValue) {
@@ -88,7 +86,7 @@ function PolicyDistanceRateTaxReclaimableEditPage({route, policy}: PolicyDistanc
                     <InputWrapperWithRef
                         InputComponent={AmountForm}
                         inputID={INPUT_IDS.TAX_CLAIMABLE_VALUE}
-                        extraDecimals={extraDecimals}
+                        fixedDecimals={CONST.MAX_TAX_RATE_DECIMAL_PLACES}
                         defaultValue={currentTaxReclaimableOnValue?.toString() ?? ''}
                         isCurrencyPressable={false}
                         currency={currency}