Refactor: isolate getLocalizedCurrencySymbol from Intl locale

src/components/AmountForm.tsx

@@ -1,5 +1,6 @@
 import type {ForwardedRef} from 'react';
 import React from 'react';
+import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {getCurrencyDecimals, getLocalizedCurrencySymbol} from '@libs/CurrencyUtils';
 import CONST from '@src/CONST';
@@ -67,6 +68,7 @@ function AmountForm({
     autoGrowMarginSide,
     ref,
 }: AmountFormProps) {
+    const {preferredLocale} = useLocalize();
     const styles = useThemeStyles();
     const decimals = decimalsProp ?? getCurrencyDecimals(currency);
 
@@ -87,7 +89,7 @@ function AmountForm({
                     ref.current = newRef;
                 }
             }}
-            symbol={getLocalizedCurrencySymbol(currency) ?? ''}
+            symbol={getLocalizedCurrencySymbol(preferredLocale, currency) ?? ''}
             symbolPosition={CONST.TEXT_INPUT_SYMBOL_POSITION.PREFIX}
             isSymbolPressable={isCurrencyPressable}
             hideSymbol={hideCurrencySymbol}

src/components/MoneyRequestAmountInput.tsx

@@ -1,6 +1,7 @@
 import type {ForwardedRef} from 'react';
 import React, {useCallback, useEffect, useRef} from 'react';
 import type {BlurEvent, StyleProp, TextStyle, ViewStyle} from 'react-native';
+import useLocalize from '@hooks/useLocalize';
 import {convertToFrontendAmountAsString, getCurrencyDecimals, getLocalizedCurrencySymbol} from '@libs/CurrencyUtils';
 import CONST from '@src/CONST';
 import NumberWithSymbolForm from './NumberWithSymbolForm';
@@ -166,6 +167,7 @@ function MoneyRequestAmountInput({
     disabled,
     ...props
 }: MoneyRequestAmountInputProps) {
+    const {preferredLocale} = useLocalize();
     const textInput = useRef<BaseTextInputRef | null>(null);
     const numberFormRef = useRef<NumberWithSymbolFormRef | null>(null);
     const decimals = getCurrencyDecimals(currency);
@@ -228,7 +230,7 @@ function MoneyRequestAmountInput({
                 }
                 numberFormRef.current = newRef;
             }}
-            symbol={getLocalizedCurrencySymbol(currency) ?? ''}
+            symbol={getLocalizedCurrencySymbol(preferredLocale, currency) ?? ''}
             symbolPosition={CONST.TEXT_INPUT_SYMBOL_POSITION.PREFIX}
             currency={currency}
             hideSymbol={hideCurrencySymbol}

src/libs/CurrencyUtils.ts

@@ -3,12 +3,12 @@
 import IntlStore from '@src/languages/IntlStore';
 import type {OnyxValues} from '@src/ONYXKEYS';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Currency, CurrencyList} from '@src/types/onyx';
+import type {Currency, CurrencyList, Locale} from '@src/types/onyx';
 import {format, formatToParts} from './NumberFormatUtils';
 
 let currencyList: OnyxValues[typeof ONYXKEYS.CURRENCY_LIST] = {};
 
 Onyx.connect({
     key: ONYXKEYS.CURRENCY_LIST,
     callback: (val) => {
         if (!val || Object.keys(val).length === 0) {
@@ -49,8 +49,8 @@
 /**
  * Get localized currency symbol for currency(ISO 4217) Code
  */
-function getLocalizedCurrencySymbol(currencyCode: string): string | undefined {
-    const parts = formatToParts(IntlStore.getCurrentLocale(), 0, {
+function getLocalizedCurrencySymbol(locale: Locale | undefined, currencyCode: string): string | undefined {
+    const parts = formatToParts(locale, 0, {
         style: 'currency',
         currency: currencyCode,
     });

tests/unit/CurrencyUtilsTest.ts

@@ -41,7 +41,7 @@ describe('CurrencyUtils', () => {
         test.each(AVAILABLE_LOCALES)('Returns non empty string for all currencyCode with preferredLocale %s', (preferredLocale) =>
             IntlStore.load(preferredLocale).then(() => {
                 for (const currencyCode of currencyCodeList) {
-                    const localizedSymbol = CurrencyUtils.getLocalizedCurrencySymbol(currencyCode);
+                    const localizedSymbol = CurrencyUtils.getLocalizedCurrencySymbol(preferredLocale, currencyCode);
 
                     expect(localizedSymbol).toBeTruthy();
                 }