[Taxes] Add extra decimal places, new API

src/CONST.ts

@@ -4149,6 +4149,8 @@ const CONST = {
             },
         },
     },
+
+    MAX_TAX_RATE_DECIMAL_PLACES: 16,
 } as const;
 
 type Country = keyof typeof CONST.ALL_COUNTRIES;

src/components/AmountForm.tsx

@@ -37,6 +37,9 @@ type AmountFormProps = {
 
     /** Whether the currency symbol is pressable */
     isCurrencyPressable?: boolean;
+
+    /** Custom max amount length. It defaults to CONST.IOU.AMOUNT_MAX_LENGTH */
+    amountMaxLength?: number;
 } & Pick<TextInputWithCurrencySymbolProps, 'hideCurrencySymbol' | 'extraSymbol'> &
     Pick<BaseTextInputProps, 'autoFocus'>;
 
@@ -53,7 +56,7 @@ const NUM_PAD_CONTAINER_VIEW_ID = 'numPadContainerView';
 const NUM_PAD_VIEW_ID = 'numPadView';
 
 function AmountForm(
-    {value: amount, currency = CONST.CURRENCY.USD, extraDecimals = 0, errorText, onInputChange, onCurrencyButtonPress, isCurrencyPressable = true, ...rest}: AmountFormProps,
+    {value: amount, currency = CONST.CURRENCY.USD, extraDecimals = 0, amountMaxLength, errorText, onInputChange, onCurrencyButtonPress, isCurrencyPressable = true, ...rest}: AmountFormProps,
     forwardedRef: ForwardedRef<BaseTextInputRef>,
 ) {
     const styles = useThemeStyles();
@@ -101,7 +104,7 @@ function AmountForm(
             const newAmountWithoutSpaces = MoneyRequestUtils.stripSpacesFromAmount(newAmount);
             // Use a shallow copy of selection to trigger setSelection
             // More info: https://github.com/Expensify/App/issues/16385
-            if (!MoneyRequestUtils.validateAmount(newAmountWithoutSpaces, decimals)) {
+            if (!MoneyRequestUtils.validateAmount(newAmountWithoutSpaces, decimals, amountMaxLength)) {
                 setSelection((prevSelection) => ({...prevSelection}));
                 return;
             }
@@ -111,13 +114,13 @@ function AmountForm(
             setSelection((prevSelection) => getNewSelection(prevSelection, isForwardDelete ? strippedAmount.length : currentAmount.length, strippedAmount.length));
             onInputChange?.(strippedAmount);
         },
-        [currentAmount, decimals, onInputChange],
+        [amountMaxLength, currentAmount, decimals, onInputChange],
     );
 
     // Modifies the amount to match the decimals for changed currency.
     useEffect(() => {
         // If the changed currency supports decimals, we can return
-        if (MoneyRequestUtils.validateAmount(currentAmount, decimals)) {
+        if (MoneyRequestUtils.validateAmount(currentAmount, decimals, amountMaxLength)) {
             return;
         }
 

src/libs/API/parameters/UpdatePolicyTaxValueParams.ts

@@ -1,7 +1,8 @@
 type UpdatePolicyTaxValueParams = {
     policyID: string;
     taxCode: string;
-    taxAmount: number;
+    // String in the format: "1.1234%"
+    taxRate: string;
 };
 
 export default UpdatePolicyTaxValueParams;

src/libs/MoneyRequestUtils.ts

@@ -49,13 +49,13 @@ function calculateAmountLength(amount: string, decimals: number): number {
 /**
  * Check if amount is a decimal up to 3 digits
  */
-function validateAmount(amount: string, decimals: number): boolean {
+function validateAmount(amount: string, decimals: number, amountMaxLength: number = CONST.IOU.AMOUNT_MAX_LENGTH): boolean {
     const regexString =
         decimals === 0
             ? `^\\d+(,\\d*)*$` // Don't allow decimal point if decimals === 0
             : `^\\d+(,\\d*)*(\\.\\d{0,${decimals}})?$`; // Allow the decimal point and the desired number of digits after the point
     const decimalNumberRegex = new RegExp(regexString, 'i');
-    return amount === '' || (decimalNumberRegex.test(amount) && calculateAmountLength(amount, decimals) <= CONST.IOU.AMOUNT_MAX_LENGTH);
+    return amount === '' || (decimalNumberRegex.test(amount) && calculateAmountLength(amount, decimals) <= amountMaxLength);
 }
 
 /**

src/libs/actions/TaxRate.ts

@@ -322,7 +322,7 @@ function deletePolicyTaxes(policyID: string, taxesToDelete: string[]) {
     API.write(WRITE_COMMANDS.DELETE_POLICY_TAXES, parameters, onyxData);
 }
 
-function updatePolicyTaxValue(policyID: string, taxID: string, taxValue: number) {
+function updatePolicyTaxValue(policyID: string, taxID: string, taxValue: string) {
     const policy = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${policyID}`];
     const originalTaxRate = {...policy?.taxRates?.taxes[taxID]};
     const stringTaxValue = `${taxValue}%`;
@@ -380,7 +380,7 @@ function updatePolicyTaxValue(policyID: string, taxID: string, taxValue: number)
     const parameters = {
         policyID,
         taxCode: taxID,
-        taxAmount: Number(taxValue),
+        taxRate: stringTaxValue,
     } satisfies UpdatePolicyTaxValueParams;
 
     API.write(WRITE_COMMANDS.UPDATE_POLICY_TAX_VALUE, parameters, onyxData);

src/pages/workspace/taxes/ValuePage.tsx

@@ -1,5 +1,5 @@
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useCallback, useState} from 'react';
+import React, {useCallback} from 'react';
 import AmountForm from '@components/AmountForm';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
@@ -38,13 +38,13 @@ function ValuePage({
     const {translate} = useLocalize();
     const {inputCallbackRef} = useAutoFocusInput();
     const currentTaxRate = PolicyUtils.getTaxByID(policy, taxID);
-    const [value, setValue] = useState(currentTaxRate?.value?.replace('%', ''));
+    const defaultValue = currentTaxRate?.value?.replace('%', '');
 
     const goBack = useCallback(() => Navigation.goBack(ROUTES.WORKSPACE_TAX_EDIT.getRoute(policyID ?? '', taxID)), [policyID, taxID]);
 
     const submit = useCallback(
         (values: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_TAX_VALUE_FORM>) => {
-            updatePolicyTaxValue(policyID, taxID, Number(values.value));
+            updatePolicyTaxValue(policyID, taxID, values.value);
             goBack();
         },
         [goBack, policyID, taxID],
@@ -87,9 +87,12 @@ function ValuePage({
                             <InputWrapper
                                 InputComponent={AmountForm}
                                 inputID={INPUT_IDS.VALUE}
-                                defaultValue={value}
-                                onInputChange={setValue}
+                                defaultValue={defaultValue}
                                 hideCurrencySymbol
+                                // The default currency uses 2 decimal places, so we substract it
+                                extraDecimals={CONST.MAX_TAX_RATE_DECIMAL_PLACES - 2}
+                                // We increase the amount max length. We have to add 2 places for one digit and comma.
+                                amountMaxLength={CONST.MAX_TAX_RATE_DECIMAL_PLACES + 2}
                                 extraSymbol={<Text style={styles.iouAmountText}>%</Text>}
                                 ref={inputCallbackRef}
                             />

src/pages/workspace/taxes/WorkspaceCreateTaxPage.tsx

@@ -106,6 +106,10 @@ function WorkspaceCreateTaxPage({
                                         description={translate('workspace.taxes.value')}
                                         rightLabel={translate('common.required')}
                                         hideCurrencySymbol
+                                        // The default currency uses 2 decimal places, so we substract it
+                                        extraDecimals={CONST.MAX_TAX_RATE_DECIMAL_PLACES - 2}
+                                        // We increase the amount max length. We have to add 2 places for one digit and comma.
+                                        amountMaxLength={CONST.MAX_TAX_RATE_DECIMAL_PLACES + 2}
                                         extraSymbol={<Text style={styles.iouAmountText}>%</Text>}
                                     />
                                 </View>