From 61ffca4923badb8ee3570260cba6cfb6060140b5 Mon Sep 17 00:00:00 2001
From: Carlos Martins <cmartins@expensify.com>
Date: Tue, 4 Feb 2025 09:17:52 -0800
Subject: [PATCH] Merge pull request #56340 from
 margelo/fix/respect-comma-as-separator-for-spanish-locale

[CP Staging] fix: use locale-specific separators

(cherry picked from commit b90c4c65077af25a21dece8db8c8bcb768746a5f)

(CP triggered by luacmartins)
---
 src/components/AmountWithoutCurrencyInput.tsx | 33 +++++++++++++++++--
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/components/AmountWithoutCurrencyInput.tsx b/src/components/AmountWithoutCurrencyInput.tsx
index 4d54258dbef0..448357188b45 100644
--- a/src/components/AmountWithoutCurrencyInput.tsx
+++ b/src/components/AmountWithoutCurrencyInput.tsx
@@ -1,5 +1,7 @@
-import React from 'react';
+import React, {useCallback, useMemo} from 'react';
 import type {ForwardedRef} from 'react';
+import useLocalize from '@hooks/useLocalize';
+import {replaceAllDigits, replaceCommasWithPeriod, stripSpacesFromAmount} from '@libs/MoneyRequestUtils';
 import CONST from '@src/CONST';
 import TextInput from './TextInput';
 import type {BaseTextInputProps, BaseTextInputRef} from './TextInput/BaseTextInput/types';
@@ -16,21 +18,46 @@ type AmountFormProps = {
 } & Partial<BaseTextInputProps>;
 
 function AmountWithoutCurrencyInput(
-    {value: amount, shouldAllowNegative = false, inputID, name, defaultValue, accessibilityLabel, role, label, ...rest}: AmountFormProps,
+    {value: amount, shouldAllowNegative = false, inputID, name, defaultValue, accessibilityLabel, role, label, onInputChange, ...rest}: AmountFormProps,
     ref: ForwardedRef<BaseTextInputRef>,
 ) {
+    const {toLocaleDigit} = useLocalize();
+    const separator = useMemo(
+        () =>
+            replaceAllDigits('1.1', toLocaleDigit)
+                .split('')
+                .filter((char) => char !== '1')
+                .join(''),
+        [toLocaleDigit],
+    );
+    /**
+     * Sets the selection and the amount accordingly to the value passed to the input
+     * @param newAmount - Changed amount from user input
+     */
+    const setNewAmount = useCallback(
+        (newAmount: string) => {
+            // Remove spaces from the newAmount value because Safari on iOS adds spaces when pasting a copied value
+            // More info: https://github.com/Expensify/App/issues/16974
+            const newAmountWithoutSpaces = stripSpacesFromAmount(newAmount);
+            const replacedCommasAmount = replaceCommasWithPeriod(newAmountWithoutSpaces);
+            onInputChange?.(replacedCommasAmount);
+        },
+        [onInputChange],
+    );
+
     return (
         <TextInput
             inputID={inputID}
             name={name}
             label={label}
+            onChangeText={setNewAmount}
             defaultValue={defaultValue}
             accessibilityLabel={accessibilityLabel}
             role={role}
             ref={ref}
             keyboardType={!shouldAllowNegative ? CONST.KEYBOARD_TYPE.DECIMAL_PAD : undefined}
             type="mask"
-            mask="[09999999].[09]"
+            mask={`[09999999]${separator}[09]`}
             allowedKeys="0123456789.,"
             // On android autoCapitalize="words" is necessary when keyboardType="decimal-pad" or inputMode="decimal" to prevent input lag.
             // See https://github.com/Expensify/App/issues/51868 for more information