From e32b4f0db1ba8513ec1bae1fb38c8d98c11b1fea Mon Sep 17 00:00:00 2001 From: Antoine Clausse Date: Thu, 25 Apr 2024 13:44:05 +0200 Subject: [PATCH] [web] Handle error cause by `currencyDisplay: 'narrowSymbol'` in old browsers (#18060) * Handle error cause by `currencyDisplay: 'narrowSymbol'` in old browsers RangeError Value narrowSymbol out of range for Number.prototype.toLocaleString options property currencyDisplay * Make `formatCurrencyLocalized` bulletproof GitOrigin-RevId: 26e8abc6f9fb7c06c2d14b9d86af2d84fb9f32e3 --- services/web/app/src/util/currency.js | 22 +++++++++++-------- .../web/frontend/js/shared/utils/currency.ts | 22 +++++++++++-------- 2 files changed, 26 insertions(+), 18 deletions(-) diff --git a/services/web/app/src/util/currency.js b/services/web/app/src/util/currency.js index 4a9972d423..52b6411a17 100644 --- a/services/web/app/src/util/currency.js +++ b/services/web/app/src/util/currency.js @@ -14,19 +14,23 @@ * @returns {string} */ function formatCurrencyLocalized(amount, currency, locale, stripIfInteger) { + const options = { style: 'currency', currency } if (stripIfInteger && Number.isInteger(amount)) { + options.minimumFractionDigits = 0 + } + + try { return amount.toLocaleString(locale, { - style: 'currency', - currency, - minimumFractionDigits: 0, + ...options, currencyDisplay: 'narrowSymbol', }) - } - return amount.toLocaleString(locale, { - style: 'currency', - currency, - currencyDisplay: 'narrowSymbol', - }) + } catch {} + + try { + return amount.toLocaleString(locale, options) + } catch {} + + return `${currency} ${amount}` } module.exports = { diff --git a/services/web/frontend/js/shared/utils/currency.ts b/services/web/frontend/js/shared/utils/currency.ts index abf52bcdbf..6b0dbb72a8 100644 --- a/services/web/frontend/js/shared/utils/currency.ts +++ b/services/web/frontend/js/shared/utils/currency.ts @@ -23,17 +23,21 @@ export function formatCurrencyLocalized( locale: string, stripIfInteger = false ): string { + const options: Intl.NumberFormatOptions = { style: 'currency', currency } if (stripIfInteger && Number.isInteger(amount)) { + options.minimumFractionDigits = 0 + } + + try { return amount.toLocaleString(locale, { - style: 'currency', - currency, - minimumFractionDigits: 0, + ...options, currencyDisplay: 'narrowSymbol', }) - } - return amount.toLocaleString(locale, { - style: 'currency', - currency, - currencyDisplay: 'narrowSymbol', - }) + } catch {} + + try { + return amount.toLocaleString(locale, options) + } catch {} + + return `${currency} ${amount}` }