[Fix] Localize currency symbol

src/libs/CurrencySymbolUtils.js

@@ -0,0 +1,37 @@
+import _ from 'underscore';
+import * as NumberFormatUtils from './NumberFormatUtils';
+
+/**
+ * Get localized currency symbol for currency(ISO 4217) Code
+ * @param {String} preferredLocale
+ * @param {String} currencyCode
+ * @returns {String}
+ */
+function getLocalizedCurrencySymbol(preferredLocale, currencyCode) {
+    const parts = NumberFormatUtils.formatToParts(preferredLocale, 0, {
+        style: 'currency',
+        currency: currencyCode,
+    });
+    return _.find(parts, part => part.type === 'currency').value;
+}
+
+/**
+ * Whether the currency symbol is left-to-right.
+ * @param {String} preferredLocale
+ * @param {String} currencyCode
+ * @returns {Boolean}
+ */
+function isCurrencySymbolLTR(preferredLocale, currencyCode) {
+    const parts = NumberFormatUtils.formatToParts(preferredLocale, 0, {
+        style: 'currency',
+        currency: currencyCode,
+    });
+
+    // Currency is LTR when the first part is of currency type.
+    return parts[0].type === 'currency';
+}
+
+export {
+    getLocalizedCurrencySymbol,
+    isCurrencySymbolLTR,
+};

src/pages/iou/IOUCurrencySelection.js

@@ -20,6 +20,7 @@ import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
 import Button from '../../components/Button';
 import FixedFooter from '../../components/FixedFooter';
 import * as IOU from '../../libs/actions/IOU';
+import * as CurrencySymbolUtils from '../../libs/CurrencySymbolUtils';
 
 /**
  * IOU Currency selection for selecting currency
@@ -113,7 +114,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} - ${CurrencySymbolUtils.getLocalizedCurrencySymbol(this.props.preferredLocale, currencyCode)}`,
             searchText: `${currencyCode} ${this.props.currencyList[currencyCode].symbol}`,
             currencyCode,
         }));

src/pages/iou/steps/IOUAmountPage.js

@@ -20,6 +20,7 @@ import Text from '../../../components/Text';
 import CONST from '../../../CONST';
 import TextInput from '../../../components/TextInput';
 import canUseTouchScreen from '../../../libs/canUseTouchscreen';
+import * as CurrencySymbolUtils from '../../../libs/CurrencySymbolUtils';
 
 const propTypes = {
     /** Whether or not this IOU has multiple participants */
@@ -31,18 +32,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,
 
@@ -207,6 +196,33 @@ class IOUAmountPage extends React.Component {
 
     render() {
         const formattedAmount = this.replaceAllDigits(this.state.amount, this.props.toLocaleDigit);
+        const currencySymbol = CurrencySymbolUtils.getLocalizedCurrencySymbol(this.props.preferredLocale, this.props.iou.selectedCurrencyCode);
+        const isCurrencySymbolLTR = CurrencySymbolUtils.isCurrencySymbolLTR(this.props.preferredLocale, this.props.iou.selectedCurrencyCode);
+
+        const currencySymbolElement = (
+            <TouchableOpacity onPress={() => Navigation.navigate(this.props.hasMultipleParticipants
+                ? ROUTES.getIouBillCurrencyRoute(this.props.reportID)
+                : ROUTES.getIouRequestCurrencyRoute(this.props.reportID))}
+            >
+                <Text style={styles.iouAmountText}>{currencySymbol}</Text>
+            </TouchableOpacity>
+        );
+
+        const amountTextInput = (
+            <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}
+            />
+        );
+
         return (
             <>
                 <View style={[
@@ -217,26 +233,7 @@ 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}
-                    />
+                    {isCurrencySymbolLTR ? [currencySymbolElement, amountTextInput] : [amountTextInput, currencySymbolElement]}
                 </View>
                 <View style={[styles.w100, styles.justifyContentEnd]}>
                     {canUseTouchScreen()
@@ -266,7 +263,6 @@ IOUAmountPage.defaultProps = defaultProps;
 export default compose(
     withLocalize,
     withOnyx({
-        currencyList: {key: ONYXKEYS.CURRENCY_LIST},
         iou: {key: ONYXKEYS.IOU},
     }),
 )(IOUAmountPage);

tests/unit/CurrencySymbolUtilsTest.js

@@ -0,0 +1,31 @@
+import _ from 'underscore';
+import * as CurrencySymbolUtils from '../../src/libs/CurrencySymbolUtils';
+import currencyList from './currencyList.json';
+
+const currencyCodeList = _.keys(currencyList);
+const AVAILABLE_LOCALES = ['en', 'es'];
+
+// Contains item [isLeft, locale, currencyCode]
+const symbolPositions = [
+    [true, 'en', 'USD'],
+    [false, 'es', 'USD'],
+];
+
+describe('CurrencySymbolUtils', () => {
+    describe('getLocalizedCurrencySymbol', () => {
+        test.each(AVAILABLE_LOCALES)('Returns non empty string for all currencyCode with preferredLocale %s', (prefrredLocale) => {
+            _.forEach(currencyCodeList, (currencyCode) => {
+                const localizedSymbol = CurrencySymbolUtils.getLocalizedCurrencySymbol(prefrredLocale, currencyCode);
+
+                expect(localizedSymbol).toBeTruthy();
+            });
+        });
+    });
+
+    describe('isCurrencySymbolLTR', () => {
+        test.each(symbolPositions)('Returns %s for prefrredLocale %s and currencyCode %s', (isLeft, locale, currencyCode) => {
+            const isSymbolLeft = CurrencySymbolUtils.isCurrencySymbolLTR(locale, currencyCode);
+            expect(isSymbolLeft).toBe(isLeft);
+        });
+    });
+});