From 55b2372d1344e3b61854139806a53f8a3d7c2b8b Mon Sep 17 00:00:00 2001
From: songlang1994 <songlang1994@outlook.com>
Date: Sat, 15 Jan 2022 14:05:37 +0800
Subject: [PATCH 1/6] Localize amount input

---
 src/components/BigNumberPad.js                |  7 +-
 src/components/ReportActionItem/IOUPreview.js | 13 ++-
 src/components/withLocalize.js                | 29 ++++++-
 src/libs/LocaleDigitUtils.js                  | 82 +++++++++++++++++++
 src/libs/NumberFormatUtils/index.js           | 12 +++
 .../index.native.js                           | 11 ++-
 src/libs/numberFormat/index.js                |  5 --
 src/pages/iou/steps/IOUAmountPage.js          | 43 ++++++++--
 8 files changed, 180 insertions(+), 22 deletions(-)
 create mode 100644 src/libs/LocaleDigitUtils.js
 create mode 100644 src/libs/NumberFormatUtils/index.js
 rename src/libs/{numberFormat => NumberFormatUtils}/index.native.js (67%)
 delete mode 100644 src/libs/numberFormat/index.js

diff --git a/src/components/BigNumberPad.js b/src/components/BigNumberPad.js
index df73132a610e..604eab5b0662 100644
--- a/src/components/BigNumberPad.js
+++ b/src/components/BigNumberPad.js
@@ -5,10 +5,13 @@ import PropTypes from 'prop-types';
 import styles from '../styles/styles';
 import Button from './Button';
 import ControlSelection from '../libs/ControlSelection';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
 
 const propTypes = {
     /** Callback to inform parent modal with key pressed */
     numberPressed: PropTypes.func.isRequired,
+
+    ...withLocalizePropTypes,
 };
 
 const padNumbers = [
@@ -57,7 +60,7 @@ class BigNumberPad extends React.Component {
                                 <Button
                                     key={column}
                                     style={[styles.flex1, marginLeft]}
-                                    text={column}
+                                    text={column === '<' ? column : this.props.toLocaleDigit(column)}
                                     onLongPress={() => this.handleLongPress(column)}
                                     onPress={() => this.props.numberPressed(column)}
                                     onPressIn={ControlSelection.block}
@@ -78,4 +81,4 @@ class BigNumberPad extends React.Component {
 
 BigNumberPad.propTypes = propTypes;
 
-export default BigNumberPad;
+export default withLocalize(BigNumberPad);
diff --git a/src/components/ReportActionItem/IOUPreview.js b/src/components/ReportActionItem/IOUPreview.js
index 8f8eb8d34821..3c766743aeb2 100644
--- a/src/components/ReportActionItem/IOUPreview.js
+++ b/src/components/ReportActionItem/IOUPreview.js
@@ -51,8 +51,11 @@ const propTypes = {
         /** Email address of the creator of this iou report */
         ownerEmail: PropTypes.string,
 
-        /** Outstanding amount of this transaction */
-        cachedTotal: PropTypes.string,
+        /** Outstanding amount in cents of this transaction */
+        total: PropTypes.number,
+
+        /** Currency of outstanding amount of this transaction */
+        currency: PropTypes.string,
 
         /** Does the iouReport have an outstanding IOU? */
         hasOutstandingIOU: PropTypes.bool,
@@ -108,7 +111,11 @@ const IOUPreview = (props) => {
     const ownerName = lodashGet(props.personalDetails, [ownerEmail, 'firstName'], '') || Str.removeSMSDomain(ownerEmail);
     const managerAvatar = lodashGet(props.personalDetails, [managerEmail, 'avatar'], '');
     const ownerAvatar = lodashGet(props.personalDetails, [ownerEmail, 'avatar'], '');
-    const cachedTotal = props.iouReport.cachedTotal ? props.iouReport.cachedTotal.replace(/[()]/g, '') : '';
+    const cachedTotal = props.iouReport.total && props.iouReport.currency
+        ? props.numberFormat(
+            props.iouReport.total / 100,
+            {style: 'currency', currency: props.iouReport.currency},
+        ) : '';
     return (
         <TouchableWithoutFeedback onPress={props.onPreviewPressed}>
             <View style={[styles.iouPreviewBox, ...props.containerStyles]}>
diff --git a/src/components/withLocalize.js b/src/components/withLocalize.js
index 6f885ef36f40..2f8c1d1b643f 100755
--- a/src/components/withLocalize.js
+++ b/src/components/withLocalize.js
@@ -6,7 +6,8 @@ import ONYXKEYS from '../ONYXKEYS';
 import * as Localize from '../libs/Localize';
 import DateUtils from '../libs/DateUtils';
 import * as LocalePhoneNumber from '../libs/LocalePhoneNumber';
-import numberFormat from '../libs/numberFormat';
+import * as NumberFormatUtils from '../libs/NumberFormatUtils';
+import * as LocaleDigitUtils from '../libs/LocaleDigitUtils';
 import CONST from '../CONST';
 
 const LocaleContext = createContext(null);
@@ -29,6 +30,15 @@ const withLocalizePropTypes = {
 
     /** Returns an internationally converted phone number with the country code */
     fromLocalPhone: PropTypes.func.isRequired,
+
+    /** Checks whether the given character is a valid locale digit */
+    isValidLocaleDigit: PropTypes.func.isRequired,
+
+    /** Gets the standard digit corresponding to a locale digit */
+    fromLocaleDigit: PropTypes.func.isRequired,
+
+    /** Gets the locale digit corresponding to a standard digit */
+    toLocaleDigit: PropTypes.func.isRequired,
 };
 
 const localeProviderPropTypes = {
@@ -56,6 +66,9 @@ class LocaleContextProvider extends React.Component {
             timestampToDateTime: this.timestampToDateTime.bind(this),
             fromLocalPhone: this.fromLocalPhone.bind(this),
             toLocalPhone: this.toLocalPhone.bind(this),
+            isValidLocaleDigit: this.isValidLocaleDigit.bind(this),
+            fromLocaleDigit: this.fromLocaleDigit.bind(this),
+            toLocaleDigit: this.toLocaleDigit.bind(this),
             preferredLocale: this.props.preferredLocale,
         };
     }
@@ -75,7 +88,7 @@ class LocaleContextProvider extends React.Component {
      * @returns {String}
      */
     numberFormat(number, options) {
-        return numberFormat(this.props.preferredLocale, number, options);
+        return NumberFormatUtils.format(this.props.preferredLocale, number, options);
     }
 
     /**
@@ -115,6 +128,18 @@ class LocaleContextProvider extends React.Component {
         return LocalePhoneNumber.fromLocalPhone(this.props.preferredLocale, number);
     }
 
+    isValidLocaleDigit(digit) {
+        return LocaleDigitUtils.isValidLocaleDigit(this.props.preferredLocale, digit);
+    }
+
+    toLocaleDigit(digit) {
+        return LocaleDigitUtils.toLocaleDigit(this.props.preferredLocale, digit);
+    }
+
+    fromLocaleDigit(localeDigit) {
+        return LocaleDigitUtils.fromLocaleDigit(this.props.preferredLocale, localeDigit);
+    }
+
     render() {
         return (
             <LocaleContext.Provider value={this.getContextValue()}>
diff --git a/src/libs/LocaleDigitUtils.js b/src/libs/LocaleDigitUtils.js
new file mode 100644
index 000000000000..fba5f1b39dd1
--- /dev/null
+++ b/src/libs/LocaleDigitUtils.js
@@ -0,0 +1,82 @@
+import invariant from 'invariant';
+import _ from 'underscore';
+
+import * as NumberFormatUtils from './NumberFormatUtils';
+
+const STANDARD_DIGITS = Object.freeze(['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '-', ',']);
+
+const INDEX_DECIMAL = 10;
+const INDEX_MINUS_SIGN = 11;
+const INDEX_GROUP = 12;
+
+const getLocaleDigits = _.memoize((locale) => {
+    const localeDigits = _.clone(STANDARD_DIGITS);
+    for (let i = 0; i <= 9; i++) {
+        localeDigits[i] = NumberFormatUtils.format(locale, i);
+    }
+    _.forEach(NumberFormatUtils.formatToParts(locale, 1000000.5), (part) => {
+        switch (part.type) {
+            case 'decimal':
+                localeDigits[INDEX_DECIMAL] = part.value;
+                break;
+            case 'minusSign':
+                localeDigits[INDEX_MINUS_SIGN] = part.value;
+                break;
+            case 'group':
+                localeDigits[INDEX_GROUP] = part.value;
+                break;
+            default:
+                break;
+        }
+    });
+    return Object.freeze(localeDigits);
+});
+
+/**
+ * Checks whether the given character is a valid locale digit.
+ *
+ * @param {String} locale
+ * @param {String} char A single character
+ * @returns {Boolean}
+ */
+function isValidLocaleDigit(locale, char) {
+    return getLocaleDigits(locale).includes(char);
+}
+
+/**
+ * Gets the locale digit corresponding to a standard digit.
+ *
+ * @param {String} locale
+ * @param {String} digit Character of a single standard digit . It may be "0" ~ "9" (digits),
+ * "," (group separator), "." (decimal separator) or "-" (minus sign).
+ * @returns {String}
+ *
+ * @throws If `digit` is not a valid standard digit.
+ */
+function toLocaleDigit(locale, digit) {
+    const index = _.indexOf(STANDARD_DIGITS, digit);
+    invariant(index > -1, `"${digit}" must be in ${JSON.stringify(STANDARD_DIGITS)}`);
+    return getLocaleDigits(locale)[index];
+}
+
+/**
+ * Gets the standard digit corresponding to a locale digit.
+ *
+ * @param {String} locale
+ * @param {String} localeDigit Character of a single locale digit. It may be **the localized version** of
+ * "0" ~ "9" (digits), "," (group separator), "." (decimal separator) or "-" (minus sign).
+ * @returns {String}
+ *
+ * @throws If `localeDigit` is not a valid locale digit.
+ */
+function fromLocaleDigit(locale, localeDigit) {
+    const index = _.indexOf(getLocaleDigits(locale), localeDigit);
+    invariant(index > -1, `"${localeDigit}" must be in ${JSON.stringify(getLocaleDigits(locale))}`);
+    return STANDARD_DIGITS[index];
+}
+
+export {
+    isValidLocaleDigit,
+    toLocaleDigit,
+    fromLocaleDigit,
+};
diff --git a/src/libs/NumberFormatUtils/index.js b/src/libs/NumberFormatUtils/index.js
new file mode 100644
index 000000000000..7369760cecb1
--- /dev/null
+++ b/src/libs/NumberFormatUtils/index.js
@@ -0,0 +1,12 @@
+function format(locale, number, options) {
+    return new Intl.NumberFormat(locale, options).format(number);
+}
+
+function formatToParts(locale, number, options) {
+    return new Intl.NumberFormat(locale, options).formatToParts(number);
+}
+
+export {
+    format,
+    formatToParts,
+};
diff --git a/src/libs/numberFormat/index.native.js b/src/libs/NumberFormatUtils/index.native.js
similarity index 67%
rename from src/libs/numberFormat/index.native.js
rename to src/libs/NumberFormatUtils/index.native.js
index f18ac62148f7..db623f5e1277 100644
--- a/src/libs/numberFormat/index.native.js
+++ b/src/libs/NumberFormatUtils/index.native.js
@@ -8,8 +8,15 @@ import '@formatjs/intl-numberformat/polyfill';
 import '@formatjs/intl-numberformat/locale-data/en';
 import '@formatjs/intl-numberformat/locale-data/es';
 
-function numberFormat(locale, number, options) {
+function format(locale, number, options) {
     return new Intl.NumberFormat(locale, options).format(number);
 }
 
-export default numberFormat;
+function formatToParts(locale, number, options) {
+    return new Intl.NumberFormat(locale, options).formatToParts(number);
+}
+
+export {
+    format,
+    formatToParts,
+};
diff --git a/src/libs/numberFormat/index.js b/src/libs/numberFormat/index.js
deleted file mode 100644
index d956a5499265..000000000000
--- a/src/libs/numberFormat/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-function numberFormat(locale, number, options) {
-    return new Intl.NumberFormat(locale, options).format(number);
-}
-
-export default numberFormat;
diff --git a/src/pages/iou/steps/IOUAmountPage.js b/src/pages/iou/steps/IOUAmountPage.js
index 200fc97b76a0..d1c42f796097 100755
--- a/src/pages/iou/steps/IOUAmountPage.js
+++ b/src/pages/iou/steps/IOUAmountPage.js
@@ -7,6 +7,7 @@ import {
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
+import _ from 'underscore';
 import ONYXKEYS from '../../../ONYXKEYS';
 import styles from '../../../styles/styles';
 import BigNumberPad from '../../../components/BigNumberPad';
@@ -95,6 +96,10 @@ class IOUAmountPage extends React.Component {
         this.focusTextInput();
     }
 
+    get formattedAmount() {
+        return this.replaceAllDigits(this.state.amount, this.props.toLocaleDigit);
+    }
+
     /**
      * Focus text input
      */
@@ -159,14 +164,36 @@ class IOUAmountPage extends React.Component {
      * Update amount on amount change
      * Validate new amount with decimal number regex up to 6 digits and 2 decimal digit
      *
-     * @param {String} amount
+     * @param {String} text Changed text from user input
      */
-    updateAmount(amount) {
-        if (!this.validateAmount(amount)) {
-            return;
-        }
+    updateAmount(text) {
+        this.setState((prevState) => {
+            const amount = this.replaceAllDigits(text, this.props.fromLocaleDigit);
+            return this.validateAmount(amount)
+                ? {amount: this.stripCommaFromAmount(amount)}
+                : prevState;
+        });
+    }
 
-        this.setState({amount: this.stripCommaFromAmount(amount)});
+    /**
+     * Replaces each character by calling `convertFn`. If `convertFn` throws an error, then
+     * the original character will be preserved.
+     *
+     * @param {String} text
+     * @param {Function} convertFn `this.props.fromLocaleDigit` or `this.props.toLocaleDigit`
+     * @returns {String}
+     */
+    replaceAllDigits(text, convertFn) {
+        return _.chain([...text])
+            .map((char) => {
+                try {
+                    return convertFn(char);
+                } catch {
+                    return char;
+                }
+            })
+            .join('')
+            .value();
     }
 
     render() {
@@ -193,8 +220,8 @@ class IOUAmountPage extends React.Component {
                         textStyle={styles.iouAmountText}
                         onChangeText={this.updateAmount}
                         ref={el => this.textInput = el}
-                        value={this.state.amount}
-                        placeholder="0"
+                        value={this.formattedAmount}
+                        placeholder={this.props.numberFormat(0)}
                         keyboardType={CONST.KEYBOARD_TYPE.NUMERIC}
                     />
                 </View>

From 2d6d46a83e9c6406a88fde7d1809e43f9a46ca3e Mon Sep 17 00:00:00 2001
From: songlang1994 <songlang1994@outlook.com>
Date: Sat, 15 Jan 2022 14:11:44 +0800
Subject: [PATCH 2/6] Update README

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 7c2c42969893..d7d2c6902096 100644
--- a/README.md
+++ b/README.md
@@ -333,7 +333,7 @@ localize the following types of data when presented to the user (even accessibil
 
 - Texts: See [translate method](https://github.com/Expensify/App/blob/655ba416d552d5c88e57977a6e0165fb7eb7ab58/src/libs/translate.js#L15)
 - Date/time: see [DateUtils](https://github.com/Expensify/App/blob/f579946fbfbdc62acc5bd281dc75cabb803d9af0/src/libs/DateUtils.js)
-- Numbers and amounts: see [numberFormat](https://github.com/Expensify/App/tree/965f92fc2a5a2a0d01e6114bf5aa8755b9d9fd1a/src/libs/numberFormat)
+- Numbers and amounts: see [NumberFormatUtils](https://github.com/Expensify/App/blob/55b2372d1344e3b61854139806a53f8a3d7c2b8b/src/libs/NumberFormatUtils/index.js) and [LocaleDigitUtils](https://github.com/Expensify/App/blob/55b2372d1344e3b61854139806a53f8a3d7c2b8b/src/libs/LocaleDigitUtils.js)
 - Phones: see [LocalPhoneNumber](https://github.com/Expensify/App/blob/bdfbafe18ee2d60f766c697744f23fad64b62cad/src/libs/LocalePhoneNumber.js#L51-L52)
 
 In most cases, you will be needing to localize data used in a component, if that's the case, there's a HOC [withLocalize](https://github.com/Expensify/App/blob/37465dbd07da1feab8347835d82ed3d2302cde4c/src/components/withLocalize.js).

From 294c2013631e9bfd1c3ba8d2cec084f5a003c2bf Mon Sep 17 00:00:00 2001
From: songlang1994 <songlang1994@outlook.com>
Date: Sat, 15 Jan 2022 17:56:18 +0800
Subject: [PATCH 3/6] Code style

---
 README.md                                     |  2 +-
 src/libs/LocaleDigitUtils.js                  |  9 +++++---
 .../index.js => NumberFormatUtils.js}         |  0
 src/libs/NumberFormatUtils/index.native.js    | 22 -------------------
 src/setup/platformSetup/index.native.js       | 10 +++++++++
 5 files changed, 17 insertions(+), 26 deletions(-)
 rename src/libs/{NumberFormatUtils/index.js => NumberFormatUtils.js} (100%)
 delete mode 100644 src/libs/NumberFormatUtils/index.native.js

diff --git a/README.md b/README.md
index d7d2c6902096..5b55d944f603 100644
--- a/README.md
+++ b/README.md
@@ -333,7 +333,7 @@ localize the following types of data when presented to the user (even accessibil
 
 - Texts: See [translate method](https://github.com/Expensify/App/blob/655ba416d552d5c88e57977a6e0165fb7eb7ab58/src/libs/translate.js#L15)
 - Date/time: see [DateUtils](https://github.com/Expensify/App/blob/f579946fbfbdc62acc5bd281dc75cabb803d9af0/src/libs/DateUtils.js)
-- Numbers and amounts: see [NumberFormatUtils](https://github.com/Expensify/App/blob/55b2372d1344e3b61854139806a53f8a3d7c2b8b/src/libs/NumberFormatUtils/index.js) and [LocaleDigitUtils](https://github.com/Expensify/App/blob/55b2372d1344e3b61854139806a53f8a3d7c2b8b/src/libs/LocaleDigitUtils.js)
+- Numbers and amounts: see [NumberFormatUtils](https://github.com/Expensify/App/blob/55b2372d1344e3b61854139806a53f8a3d7c2b8b/src/libs/NumberFormatUtils.js) and [LocaleDigitUtils](https://github.com/Expensify/App/blob/55b2372d1344e3b61854139806a53f8a3d7c2b8b/src/libs/LocaleDigitUtils.js)
 - Phones: see [LocalPhoneNumber](https://github.com/Expensify/App/blob/bdfbafe18ee2d60f766c697744f23fad64b62cad/src/libs/LocalePhoneNumber.js#L51-L52)
 
 In most cases, you will be needing to localize data used in a component, if that's the case, there's a HOC [withLocalize](https://github.com/Expensify/App/blob/37465dbd07da1feab8347835d82ed3d2302cde4c/src/components/withLocalize.js).
diff --git a/src/libs/LocaleDigitUtils.js b/src/libs/LocaleDigitUtils.js
index fba5f1b39dd1..aba73cc2ac49 100644
--- a/src/libs/LocaleDigitUtils.js
+++ b/src/libs/LocaleDigitUtils.js
@@ -1,4 +1,3 @@
-import invariant from 'invariant';
 import _ from 'underscore';
 
 import * as NumberFormatUtils from './NumberFormatUtils';
@@ -55,7 +54,9 @@ function isValidLocaleDigit(locale, char) {
  */
 function toLocaleDigit(locale, digit) {
     const index = _.indexOf(STANDARD_DIGITS, digit);
-    invariant(index > -1, `"${digit}" must be in ${JSON.stringify(STANDARD_DIGITS)}`);
+    if (index < 0) {
+        throw new Error(`"${digit}" must be in ${JSON.stringify(STANDARD_DIGITS)}`);
+    }
     return getLocaleDigits(locale)[index];
 }
 
@@ -71,7 +72,9 @@ function toLocaleDigit(locale, digit) {
  */
 function fromLocaleDigit(locale, localeDigit) {
     const index = _.indexOf(getLocaleDigits(locale), localeDigit);
-    invariant(index > -1, `"${localeDigit}" must be in ${JSON.stringify(getLocaleDigits(locale))}`);
+    if (index < 0) {
+        throw new Error(`"${localeDigit}" must be in ${JSON.stringify(getLocaleDigits(locale))}`);
+    }
     return STANDARD_DIGITS[index];
 }
 
diff --git a/src/libs/NumberFormatUtils/index.js b/src/libs/NumberFormatUtils.js
similarity index 100%
rename from src/libs/NumberFormatUtils/index.js
rename to src/libs/NumberFormatUtils.js
diff --git a/src/libs/NumberFormatUtils/index.native.js b/src/libs/NumberFormatUtils/index.native.js
deleted file mode 100644
index db623f5e1277..000000000000
--- a/src/libs/NumberFormatUtils/index.native.js
+++ /dev/null
@@ -1,22 +0,0 @@
-// we only need polyfills for Mobile.
-import '@formatjs/intl-getcanonicallocales/polyfill';
-import '@formatjs/intl-locale/polyfill';
-import '@formatjs/intl-pluralrules/polyfill';
-import '@formatjs/intl-numberformat/polyfill';
-
-// Load en & es Locale data
-import '@formatjs/intl-numberformat/locale-data/en';
-import '@formatjs/intl-numberformat/locale-data/es';
-
-function format(locale, number, options) {
-    return new Intl.NumberFormat(locale, options).format(number);
-}
-
-function formatToParts(locale, number, options) {
-    return new Intl.NumberFormat(locale, options).formatToParts(number);
-}
-
-export {
-    format,
-    formatToParts,
-};
diff --git a/src/setup/platformSetup/index.native.js b/src/setup/platformSetup/index.native.js
index 80fd3bfb20c6..c87b10df8c6f 100644
--- a/src/setup/platformSetup/index.native.js
+++ b/src/setup/platformSetup/index.native.js
@@ -2,6 +2,16 @@ import PushNotification from '../../libs/Notification/PushNotification';
 import * as Report from '../../libs/actions/Report';
 import Performance from '../../libs/Performance';
 
+// we only need polyfills for Mobile.
+import '@formatjs/intl-getcanonicallocales/polyfill';
+import '@formatjs/intl-locale/polyfill';
+import '@formatjs/intl-pluralrules/polyfill';
+import '@formatjs/intl-numberformat/polyfill';
+
+// Load en & es Locale data
+import '@formatjs/intl-numberformat/locale-data/en';
+import '@formatjs/intl-numberformat/locale-data/es';
+
 export default function () {
     /*
      * Register callbacks for push notifications.

From 3857085f4648a322241d0935beebab5cbdc468c3 Mon Sep 17 00:00:00 2001
From: songlang1994 <songlang1994@outlook.com>
Date: Sat, 15 Jan 2022 18:09:01 +0800
Subject: [PATCH 4/6] Clean up unused code

---
 src/components/withLocalize.js       |  8 --------
 src/libs/LocaleDigitUtils.js         | 12 ------------
 src/pages/iou/steps/IOUAmountPage.js |  6 +-----
 3 files changed, 1 insertion(+), 25 deletions(-)

diff --git a/src/components/withLocalize.js b/src/components/withLocalize.js
index 2f8c1d1b643f..81eb2b01cf45 100755
--- a/src/components/withLocalize.js
+++ b/src/components/withLocalize.js
@@ -31,9 +31,6 @@ const withLocalizePropTypes = {
     /** Returns an internationally converted phone number with the country code */
     fromLocalPhone: PropTypes.func.isRequired,
 
-    /** Checks whether the given character is a valid locale digit */
-    isValidLocaleDigit: PropTypes.func.isRequired,
-
     /** Gets the standard digit corresponding to a locale digit */
     fromLocaleDigit: PropTypes.func.isRequired,
 
@@ -66,7 +63,6 @@ class LocaleContextProvider extends React.Component {
             timestampToDateTime: this.timestampToDateTime.bind(this),
             fromLocalPhone: this.fromLocalPhone.bind(this),
             toLocalPhone: this.toLocalPhone.bind(this),
-            isValidLocaleDigit: this.isValidLocaleDigit.bind(this),
             fromLocaleDigit: this.fromLocaleDigit.bind(this),
             toLocaleDigit: this.toLocaleDigit.bind(this),
             preferredLocale: this.props.preferredLocale,
@@ -128,10 +124,6 @@ class LocaleContextProvider extends React.Component {
         return LocalePhoneNumber.fromLocalPhone(this.props.preferredLocale, number);
     }
 
-    isValidLocaleDigit(digit) {
-        return LocaleDigitUtils.isValidLocaleDigit(this.props.preferredLocale, digit);
-    }
-
     toLocaleDigit(digit) {
         return LocaleDigitUtils.toLocaleDigit(this.props.preferredLocale, digit);
     }
diff --git a/src/libs/LocaleDigitUtils.js b/src/libs/LocaleDigitUtils.js
index aba73cc2ac49..d4ec74db34a9 100644
--- a/src/libs/LocaleDigitUtils.js
+++ b/src/libs/LocaleDigitUtils.js
@@ -31,17 +31,6 @@ const getLocaleDigits = _.memoize((locale) => {
     return Object.freeze(localeDigits);
 });
 
-/**
- * Checks whether the given character is a valid locale digit.
- *
- * @param {String} locale
- * @param {String} char A single character
- * @returns {Boolean}
- */
-function isValidLocaleDigit(locale, char) {
-    return getLocaleDigits(locale).includes(char);
-}
-
 /**
  * Gets the locale digit corresponding to a standard digit.
  *
@@ -79,7 +68,6 @@ function fromLocaleDigit(locale, localeDigit) {
 }
 
 export {
-    isValidLocaleDigit,
     toLocaleDigit,
     fromLocaleDigit,
 };
diff --git a/src/pages/iou/steps/IOUAmountPage.js b/src/pages/iou/steps/IOUAmountPage.js
index d1c42f796097..d30e765c2a7d 100755
--- a/src/pages/iou/steps/IOUAmountPage.js
+++ b/src/pages/iou/steps/IOUAmountPage.js
@@ -96,10 +96,6 @@ class IOUAmountPage extends React.Component {
         this.focusTextInput();
     }
 
-    get formattedAmount() {
-        return this.replaceAllDigits(this.state.amount, this.props.toLocaleDigit);
-    }
-
     /**
      * Focus text input
      */
@@ -220,7 +216,7 @@ class IOUAmountPage extends React.Component {
                         textStyle={styles.iouAmountText}
                         onChangeText={this.updateAmount}
                         ref={el => this.textInput = el}
-                        value={this.formattedAmount}
+                        value={this.replaceAllDigits(this.state.amount, this.props.toLocaleDigit)}
                         placeholder={this.props.numberFormat(0)}
                         keyboardType={CONST.KEYBOARD_TYPE.NUMERIC}
                     />

From 3d7488f00b2a8edda4e18fbf81a6eda908889e24 Mon Sep 17 00:00:00 2001
From: songlang1994 <songlang1994@outlook.com>
Date: Sat, 15 Jan 2022 18:14:14 +0800
Subject: [PATCH 5/6] Code style

---
 src/pages/iou/steps/IOUAmountPage.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/iou/steps/IOUAmountPage.js b/src/pages/iou/steps/IOUAmountPage.js
index d30e765c2a7d..f4bc06f014aa 100755
--- a/src/pages/iou/steps/IOUAmountPage.js
+++ b/src/pages/iou/steps/IOUAmountPage.js
@@ -193,6 +193,7 @@ class IOUAmountPage extends React.Component {
     }
 
     render() {
+        const formattedAmount = this.replaceAllDigits(this.state.amount, this.props.toLocaleDigit);
         return (
             <>
                 <View style={[
@@ -216,7 +217,7 @@ class IOUAmountPage extends React.Component {
                         textStyle={styles.iouAmountText}
                         onChangeText={this.updateAmount}
                         ref={el => this.textInput = el}
-                        value={this.replaceAllDigits(this.state.amount, this.props.toLocaleDigit)}
+                        value={formattedAmount}
                         placeholder={this.props.numberFormat(0)}
                         keyboardType={CONST.KEYBOARD_TYPE.NUMERIC}
                     />

From 195891f1e12b7c6d92dd6ff2efe045bbd8bcc1be Mon Sep 17 00:00:00 2001
From: songlang1994 <songlang1994@outlook.com>
Date: Sat, 15 Jan 2022 22:56:04 +0800
Subject: [PATCH 6/6] Code style

---
 src/components/withLocalize.js       | 8 ++++++++
 src/libs/LocaleDigitUtils.js         | 8 ++++----
 src/pages/iou/steps/IOUAmountPage.js | 4 ++--
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/withLocalize.js b/src/components/withLocalize.js
index 81eb2b01cf45..1fb7c9ca9dc8 100755
--- a/src/components/withLocalize.js
+++ b/src/components/withLocalize.js
@@ -124,10 +124,18 @@ class LocaleContextProvider extends React.Component {
         return LocalePhoneNumber.fromLocalPhone(this.props.preferredLocale, number);
     }
 
+    /**
+     * @param {String} digit
+     * @returns {String}
+     */
     toLocaleDigit(digit) {
         return LocaleDigitUtils.toLocaleDigit(this.props.preferredLocale, digit);
     }
 
+    /**
+     * @param {String} localeDigit
+     * @returns {String}
+     */
     fromLocaleDigit(localeDigit) {
         return LocaleDigitUtils.fromLocaleDigit(this.props.preferredLocale, localeDigit);
     }
diff --git a/src/libs/LocaleDigitUtils.js b/src/libs/LocaleDigitUtils.js
index d4ec74db34a9..2cacf40cf796 100644
--- a/src/libs/LocaleDigitUtils.js
+++ b/src/libs/LocaleDigitUtils.js
@@ -2,7 +2,7 @@ import _ from 'underscore';
 
 import * as NumberFormatUtils from './NumberFormatUtils';
 
-const STANDARD_DIGITS = Object.freeze(['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '-', ',']);
+const STANDARD_DIGITS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '-', ','];
 
 const INDEX_DECIMAL = 10;
 const INDEX_MINUS_SIGN = 11;
@@ -28,14 +28,14 @@ const getLocaleDigits = _.memoize((locale) => {
                 break;
         }
     });
-    return Object.freeze(localeDigits);
+    return localeDigits;
 });
 
 /**
  * Gets the locale digit corresponding to a standard digit.
  *
  * @param {String} locale
- * @param {String} digit Character of a single standard digit . It may be "0" ~ "9" (digits),
+ * @param {String} digit - Character of a single standard digit . It may be "0" ~ "9" (digits),
  * "," (group separator), "." (decimal separator) or "-" (minus sign).
  * @returns {String}
  *
@@ -53,7 +53,7 @@ function toLocaleDigit(locale, digit) {
  * Gets the standard digit corresponding to a locale digit.
  *
  * @param {String} locale
- * @param {String} localeDigit Character of a single locale digit. It may be **the localized version** of
+ * @param {String} localeDigit - Character of a single locale digit. It may be **the localized version** of
  * "0" ~ "9" (digits), "," (group separator), "." (decimal separator) or "-" (minus sign).
  * @returns {String}
  *
diff --git a/src/pages/iou/steps/IOUAmountPage.js b/src/pages/iou/steps/IOUAmountPage.js
index f4bc06f014aa..b410325b902a 100755
--- a/src/pages/iou/steps/IOUAmountPage.js
+++ b/src/pages/iou/steps/IOUAmountPage.js
@@ -160,7 +160,7 @@ class IOUAmountPage extends React.Component {
      * Update amount on amount change
      * Validate new amount with decimal number regex up to 6 digits and 2 decimal digit
      *
-     * @param {String} text Changed text from user input
+     * @param {String} text - Changed text from user input
      */
     updateAmount(text) {
         this.setState((prevState) => {
@@ -176,7 +176,7 @@ class IOUAmountPage extends React.Component {
      * the original character will be preserved.
      *
      * @param {String} text
-     * @param {Function} convertFn `this.props.fromLocaleDigit` or `this.props.toLocaleDigit`
+     * @param {Function} convertFn - `this.props.fromLocaleDigit` or `this.props.toLocaleDigit`
      * @returns {String}
      */
     replaceAllDigits(text, convertFn) {