[Fix] Localize currency symbol

src/components/withLocalize.js

@@ -1,6 +1,7 @@
 import React, {createContext, forwardRef} from 'react';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
+import _ from 'underscore';
 import getComponentDisplayName from '../libs/getComponentDisplayName';
 import ONYXKEYS from '../ONYXKEYS';
 import * as Localize from '../libs/Localize';
@@ -19,6 +20,9 @@ const withLocalizePropTypes = {
     /** Formats number formatted according to locale and options */
     numberFormat: PropTypes.func.isRequired,
 
+    /** Formats number to parts according to locale and options */
+    formatToParts: PropTypes.func.isRequired,
+
     /** Converts a timestamp into a localized string representation that's relative to current moment in time */
     timestampToRelative: PropTypes.func.isRequired,
 
@@ -34,6 +38,9 @@ const withLocalizePropTypes = {
     /** Gets the standard digit corresponding to a locale digit */
     fromLocaleDigit: PropTypes.func.isRequired,
 
+    /** Get localized currency symbol for SO4217 Code */
+    toLocalizedCurrencySymbol: PropTypes.func.isRequired,
+
     /** Gets the locale digit corresponding to a standard digit */
     toLocaleDigit: PropTypes.func.isRequired,
 };
@@ -59,12 +66,14 @@ class LocaleContextProvider extends React.Component {
         return {
             translate: this.translate.bind(this),
             numberFormat: this.numberFormat.bind(this),
+            formatToParts: this.formatToParts.bind(this),
             timestampToRelative: this.timestampToRelative.bind(this),
             timestampToDateTime: this.timestampToDateTime.bind(this),
             fromLocalPhone: this.fromLocalPhone.bind(this),
             toLocalPhone: this.toLocalPhone.bind(this),
             fromLocaleDigit: this.fromLocaleDigit.bind(this),
             toLocaleDigit: this.toLocaleDigit.bind(this),
+            toLocalizedCurrencySymbol: this.toLocalizedCurrencySymbol.bind(this),
             preferredLocale: this.props.preferredLocale,
         };
     }
@@ -87,6 +96,15 @@ class LocaleContextProvider extends React.Component {
         return NumberFormatUtils.format(this.props.preferredLocale, number, options);
     }
 
+    /**
+     * @param {Number} number
+     * @param {Intl.NumberFormatOptions} options
+     * @returns {Array}
+     */
+    formatToParts(number, options) {
+        return NumberFormatUtils.formatToParts(this.props.preferredLocale, number, options);
+    }
+
     /**
      * @param {Number} timestamp
      * @returns {String}
@@ -140,6 +158,19 @@ class LocaleContextProvider extends React.Component {
         return LocaleDigitUtils.fromLocaleDigit(this.props.preferredLocale, localeDigit);
     }
 
+    /**
+     * @param {String} currencyCode
+     * @return {String}
+     */
+    toLocalizedCurrencySymbol(currencyCode) {
+        const parts = NumberFormatUtils.formatToParts(this.props.preferredLocale, 0, {
+            style: 'currency',
+            currency: currencyCode,
+        });
+        const currencySymbol = _.find(parts, part => part.type === 'currency').value;
+        return currencySymbol;
+    }
+
     render() {
         return (
             <LocaleContext.Provider value={this.getContextValue()}>

src/pages/iou/IOUCurrencySelection.js

@@ -113,7 +113,7 @@ class IOUCurrencySelection extends Component {
     getCurrencyOptions() {
         const currencyListKeys = _.keys(this.props.currencyList);
         const currencyOptions = _.map(currencyListKeys, currencyCode => ({
-            text: `${currencyCode} - ${this.props.currencyList[currencyCode].symbol}`,
+            text: `${currencyCode} - ${this.props.toLocalizedCurrencySymbol(currencyCode)}`,
             searchText: `${currencyCode} ${this.props.currencyList[currencyCode].symbol}`,
             currencyCode,
         }));

src/pages/iou/steps/IOUAmountPage.js

@@ -31,18 +31,6 @@ const propTypes = {
     /** Callback to inform parent modal of success */
     onStepComplete: PropTypes.func.isRequired,
 
-    /** The currency list constant object from Onyx */
-    currencyList: PropTypes.objectOf(PropTypes.shape({
-        /** Symbol for the currency */
-        symbol: PropTypes.string,
-
-        /** Name of the currency */
-        name: PropTypes.string,
-
-        /** ISO4217 Code for the currency */
-        ISO4217: PropTypes.string,
-    })).isRequired,
-
     /** Previously selected amount to show if the user comes back to this screen */
     selectedAmount: PropTypes.string.isRequired,
 
@@ -75,6 +63,7 @@ class IOUAmountPage extends React.Component {
         this.updateAmount = this.updateAmount.bind(this);
         this.stripCommaFromAmount = this.stripCommaFromAmount.bind(this);
         this.focusTextInput = this.focusTextInput.bind(this);
+        this.isCurrencySymbolToLeft = this.isCurrencySymbolToLeft.bind(this);
 
         this.state = {
             amount: props.selectedAmount,
@@ -93,6 +82,24 @@ class IOUAmountPage extends React.Component {
         this.focusTextInput();
     }
 
+    /**
+     * Is currency symbol to left
+     * @param {String} currencyCode
+     * @return {Boolean}
+     */
+    isCurrencySymbolToLeft(currencyCode) {
+        const parts = this.props.formatToParts(0, {
+            style: 'currency',
+            currency: currencyCode,
+        });
+
+        // The first element of parts will be type: currency for all currency
+        // Where it starts with symbol and the other will have it at last
+        // If it is not the first, it must be at last
+        const isLeft = parts[0].type === 'currency';
+        return isLeft;
+    }
+
     /**
      * Focus text input
      */
@@ -206,7 +213,9 @@ class IOUAmountPage extends React.Component {
     }
 
     render() {
+        const currencySymbol = this.props.toLocalizedCurrencySymbol(this.props.iou.selectedCurrencyCode);
         const formattedAmount = this.replaceAllDigits(this.state.amount, this.props.toLocaleDigit);
+        const isCurrencySymbolToLeft = this.isCurrencySymbolToLeft(this.props.iou.selectedCurrencyCode);
         return (
             <>
                 <View style={[
@@ -217,26 +226,49 @@ class IOUAmountPage extends React.Component {
                     styles.justifyContentCenter,
                 ]}
                 >
-                    <TouchableOpacity onPress={() => Navigation.navigate(this.props.hasMultipleParticipants
-                        ? ROUTES.getIouBillCurrencyRoute(this.props.reportID)
-                        : ROUTES.getIouRequestCurrencyRoute(this.props.reportID))}
-                    >
-                        <Text style={styles.iouAmountText}>
-                            {lodashGet(this.props.currencyList, [this.props.iou.selectedCurrencyCode, 'symbol'])}
-                        </Text>
-                    </TouchableOpacity>
-                    <TextInput
-                        disableKeyboard
-                        autoGrow
-                        hideFocusedState
-                        inputStyle={[styles.iouAmountTextInput, styles.p0, styles.noLeftBorderRadius, styles.noRightBorderRadius]}
-                        textInputContainerStyles={[styles.borderNone, styles.noLeftBorderRadius, styles.noRightBorderRadius]}
-                        onChangeText={this.updateAmount}
-                        ref={el => this.textInput = el}
-                        value={formattedAmount}
-                        placeholder={this.props.numberFormat(0)}
-                        keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
-                    />
+                    {isCurrencySymbolToLeft ? (
+                        <>
+                            <TouchableOpacity onPress={() => Navigation.navigate(this.props.hasMultipleParticipants
+                                ? ROUTES.getIouBillCurrencyRoute(this.props.reportID)
+                                : ROUTES.getIouRequestCurrencyRoute(this.props.reportID))}
+                            >
+                                <Text style={styles.iouAmountText}>{currencySymbol}</Text>
+                            </TouchableOpacity>
+                            <TextInput
+                                disableKeyboard
+                                autoGrow
+                                hideFocusedState
+                                inputStyle={[styles.iouAmountTextInput, styles.p0, styles.noLeftBorderRadius, styles.noRightBorderRadius]}
+                                textInputContainerStyles={[styles.borderNone, styles.noLeftBorderRadius, styles.noRightBorderRadius]}
+                                onChangeText={this.updateAmount}
+                                ref={el => this.textInput = el}
+                                value={formattedAmount}
+                                placeholder={this.props.numberFormat(0)}
+                                keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
+                            />
+                        </>
+                    ) : (
+                        <>
+                            <TextInput
+                                disableKeyboard
+                                autoGrow
+                                hideFocusedState
+                                inputStyle={[styles.iouAmountTextInput, styles.p0, styles.noLeftBorderRadius, styles.noRightBorderRadius]}
+                                textInputContainerStyles={[styles.borderNone, styles.noLeftBorderRadius, styles.noRightBorderRadius]}
+                                onChangeText={this.updateAmount}
+                                ref={el => this.textInput = el}
+                                value={formattedAmount}
+                                placeholder={this.props.numberFormat(0)}
+                                keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
+                            />
+                            <TouchableOpacity onPress={() => Navigation.navigate(this.props.hasMultipleParticipants
+                                ? ROUTES.getIouBillCurrencyRoute(this.props.reportID)
+                                : ROUTES.getIouRequestCurrencyRoute(this.props.reportID))}
+                            >
+                                <Text style={styles.iouAmountText}>{currencySymbol}</Text>
+                            </TouchableOpacity>
+                        </>
+                    )}
                 </View>
                 <View style={[styles.w100, styles.justifyContentEnd]}>
                     {canUseTouchScreen()
@@ -266,7 +298,6 @@ IOUAmountPage.defaultProps = defaultProps;
 export default compose(
     withLocalize,
     withOnyx({
-        currencyList: {key: ONYXKEYS.CURRENCY_LIST},
         iou: {key: ONYXKEYS.IOU},
     }),
 )(IOUAmountPage);