Merge pull request #15245 from Prince-Mendiratta/inconsistent-currenc…

…y-symbol

[Intl] Polyfill Intl.NumberFormat if unexpected locale data on browser

src/CONST.js

@@ -1177,6 +1177,15 @@ const CONST = {
         'Zambia',
         'Zimbabwe',
     ],
+
+    // Values for checking if polyfill is required on a platform
+    POLYFILL_TEST: {
+        STYLE: 'currency',
+        CURRENCY: 'XAF',
+        FORMAT: 'symbol',
+        SAMPLE_INPUT: '123456.789',
+        EXPECTED_OUTPUT: 'FCFA 123,457',
+    },
 };
 
 export default CONST;

src/libs/IntlPolyfill/index.js

@@ -0,0 +1,15 @@
+import shouldPolyfill from './shouldPolyfill';
+import polyfillNumberFormat from './polyfillNumberFormat';
+
+/**
+ * Polyfill the Intl API if the ICU version is old.
+ * This ensures that the currency data is consistent across platforms and browsers.
+ */
+export default function intlPolyfill() {
+    if (!shouldPolyfill()) {
+        return;
+    }
+
+    // Just need to polyfill Intl.NumberFormat for web based platforms
+    polyfillNumberFormat();
+}

src/libs/IntlPolyfill/index.native.js

@@ -0,0 +1,17 @@
+import shouldPolyfill from './shouldPolyfill';
+import polyfillNumberFormat from './polyfillNumberFormat';
+
+/**
+ * Polyfill the Intl API, always performed for native devices.
+ */
+export default function polyfill() {
+    if (!shouldPolyfill()) {
+        return;
+    }
+
+    // Native devices require extra polyfills
+    require('@formatjs/intl-getcanonicallocales/polyfill');
+    require('@formatjs/intl-locale/polyfill');
+    require('@formatjs/intl-pluralrules/polyfill');
+    polyfillNumberFormat();
+}

src/libs/IntlPolyfill/polyfillNumberFormat.js

@@ -0,0 +1,13 @@
+/**
+ * Common imports that are required for all platforms
+ */
+
+function polyfillNumberFormat() {
+    require('@formatjs/intl-numberformat/polyfill-force');
+
+    // Load en & es Locale data
+    require('@formatjs/intl-numberformat/locale-data/en');
+    require('@formatjs/intl-numberformat/locale-data/es');
+}
+
+export default polyfillNumberFormat;

src/libs/IntlPolyfill/shouldPolyfill.js

@@ -0,0 +1,29 @@
+import CONST from '../../CONST';
+
+/**
+ * Check if the locale data is as expected on the device.
+ * Ensures that the currency data is consistent across devices.
+ * @returns {Boolean}
+ */
+function oldCurrencyData() {
+    return (
+        new Intl.NumberFormat(CONST.DEFAULT_LOCALE, {
+            style: CONST.POLYFILL_TEST.STYLE,
+            currency: CONST.POLYFILL_TEST.CURRENCY,
+            currencyDisplay: CONST.POLYFILL_TEST.FORMAT,
+        }).format(CONST.POLYFILL_TEST.SAMPLE_INPUT) !== CONST.POLYFILL_TEST.EXPECTED_OUTPUT
+    );
+}
+
+/**
+ * Check for the existence of the Intl API and ensure results will
+ * be as expected.
+ * @returns {Boolean}
+ */
+export default function shouldPolyfill() {
+    return (
+        typeof Intl === 'undefined'
+        || !('NumberFormat' in Intl)
+        || oldCurrencyData()
+    );
+}

src/setup/index.js

@@ -5,6 +5,7 @@ import CONST from '../CONST';
 import platformSetup from './platformSetup';
 import * as Metrics from '../libs/Metrics';
 import * as Device from '../libs/actions/Device';
+import intlPolyfill from '../libs/IntlPolyfill';
 
 export default function () {
     /*
@@ -47,6 +48,9 @@ export default function () {
     I18nManager.allowRTL(false);
     I18nManager.forceRTL(false);
 
+    // Polyfill the Intl API if locale data is not as expected
+    intlPolyfill();
+
     // Perform any other platform-specific setup
     platformSetup();
 }

src/setup/platformSetup/index.native.js

@@ -4,16 +4,6 @@ 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 () {
     // We do not want to send crash reports if we are on a locally built release version of the app.
     // Crashlytics is disabled by default for debug builds, but not local release builds so we are using