diff --git a/src/components/AmountForm.tsx b/src/components/AmountForm.tsx index 5d86de37fc21..77f48570f41e 100644 --- a/src/components/AmountForm.tsx +++ b/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} diff --git a/src/components/MoneyRequestAmountInput.tsx b/src/components/MoneyRequestAmountInput.tsx index bf7e4feb5d7a..55a8192f985b 100644 --- a/src/components/MoneyRequestAmountInput.tsx +++ b/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(null); const numberFormRef = useRef(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} diff --git a/src/libs/CurrencyUtils.ts b/src/libs/CurrencyUtils.ts index dd687f8c8093..04d7c2adcb6c 100644 --- a/src/libs/CurrencyUtils.ts +++ b/src/libs/CurrencyUtils.ts @@ -3,7 +3,7 @@ import CONST from '@src/CONST'; 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] = {}; @@ -49,8 +49,8 @@ function getCurrencyUnit(currency: string = CONST.CURRENCY.USD): number { /** * 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, }); diff --git a/tests/unit/CurrencyUtilsTest.ts b/tests/unit/CurrencyUtilsTest.ts index f8ada759f71e..7ce37b8a9a06 100644 --- a/tests/unit/CurrencyUtilsTest.ts +++ b/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(); }