From 07f87bc09df7edc2086ce3f7bfb4c2a254b43fd1 Mon Sep 17 00:00:00 2001 From: Oleksandr Khomyakov <10237454+khomyakov@users.noreply.github.com> Date: Tue, 12 Dec 2023 19:17:42 +0200 Subject: [PATCH 1/5] Fix for CAD with Canadian locale --- src/helpers/numbers.js | 15 +++++++++++++-- src/stories/DataDisplay/Currency.stories.js | 2 +- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/helpers/numbers.js b/src/helpers/numbers.js index 92e20edf..b6f702d7 100644 --- a/src/helpers/numbers.js +++ b/src/helpers/numbers.js @@ -19,13 +19,24 @@ export const numberFormat = ( ) => { const style = currency ? "currency" : "decimal"; + const isCanadianLocale = ["en-CA", "fr-CA"].includes(locale); + const isCanadianCurrency = currency === "CAD"; + const params = { style, minimumFractionDigits: maximumFractionDigits, maximumFractionDigits }; if (currency) { params.currency = currency; - params.currencyDisplay = isNarrowSymbolForm ? "narrowSymbol" : "symbol"; + params.currencyDisplay = + isCanadianLocale && isCanadianCurrency ? "code" : isNarrowSymbolForm ? "narrowSymbol" : "symbol"; + } + + let formattedAmount = isCompact + ? compactNumber(amount, locale) + : new Intl.NumberFormat(locale, params).format(amount); + if (isCanadianLocale && isCanadianCurrency) { + formattedAmount = formattedAmount.replace("CAD", "CA$"); } - return isCompact ? compactNumber(amount, locale) : new Intl.NumberFormat(locale, params).format(amount); + return formattedAmount; }; export const roundNumber = (currency, amount) => { diff --git a/src/stories/DataDisplay/Currency.stories.js b/src/stories/DataDisplay/Currency.stories.js index 6c62b99f..86b21144 100644 --- a/src/stories/DataDisplay/Currency.stories.js +++ b/src/stories/DataDisplay/Currency.stories.js @@ -29,7 +29,7 @@ const CurrencyStories = { description: "A locale string", type: { required: true }, control: { type: "select" }, - options: ["en-IN", "en-US", "fr-FR", "ja-JP", "de-DE", "ar-AE"], + options: ["en-IN", "en-US", "fr-FR", "ja-JP", "de-DE", "ar-AE", "en-CA", "fr-CA"], table: { type: { summary: null }, defaultValue: { summary: "Auto-detected based on browser settings" }, From d6197e8958f1530288fc95100bf53b46cab79fe3 Mon Sep 17 00:00:00 2001 From: Oleksandr Khomyakov <10237454+khomyakov@users.noreply.github.com> Date: Wed, 13 Dec 2023 15:45:21 +0200 Subject: [PATCH 2/5] Add locale prop to Breakdown component --- src/components/Breakdown.jsx | 16 ++++++++++------ src/helpers/numbers.js | 16 +++------------- 2 files changed, 13 insertions(+), 19 deletions(-) diff --git a/src/components/Breakdown.jsx b/src/components/Breakdown.jsx index 62e0de96..79a4dea7 100644 --- a/src/components/Breakdown.jsx +++ b/src/components/Breakdown.jsx @@ -1,6 +1,6 @@ import clsx from "clsx"; import PropTypes from "prop-types"; -import React, { createContext, useContext } from "react"; +import React, { createContext, useContext, useMemo } from "react"; import { isNumber } from "lodash"; import { Currency } from "./Utilities/Currency"; @@ -17,9 +17,10 @@ const colors = { const CurrencyContext = createContext(); -export const Breakdown = ({ children, className, currency, ...rest }) => { +export const Breakdown = ({ children, className, currency, locale, ...rest }) => { + const value = useMemo(() => ({ currency, locale }), [currency, locale]); return ( - + {children}
@@ -31,10 +32,11 @@ Breakdown.propTypes = { children: PropTypes.node, className: PropTypes.string, currency: PropTypes.string.isRequired, + locale: PropTypes.string, }; const BreakdownItem = ({ children, info, methodIcon, secondary, value, className, color = "default", ...rest }) => { - const currency = useContext(CurrencyContext); + const { currency, locale } = useContext(CurrencyContext); return ( @@ -52,6 +54,8 @@ const BreakdownItem = ({ children, info, methodIcon, secondary, value, className {isNumber(value) ? ( + {" "} + locale={locale} {value} ) : ( @@ -76,7 +80,7 @@ Breakdown.Item = BreakdownItem; Breakdown.Item.displayName = "Breakdown.Item"; const BreakdownSubtotalItem = ({ children, info, value, className, color = "black", ...rest }) => { - const currency = useContext(CurrencyContext); + const { currency, locale } = useContext(CurrencyContext); return ( @@ -84,7 +88,7 @@ const BreakdownSubtotalItem = ({ children, info, value, className, color = "blac {info} - + {value} diff --git a/src/helpers/numbers.js b/src/helpers/numbers.js index b6f702d7..ee1dadf9 100644 --- a/src/helpers/numbers.js +++ b/src/helpers/numbers.js @@ -19,24 +19,14 @@ export const numberFormat = ( ) => { const style = currency ? "currency" : "decimal"; - const isCanadianLocale = ["en-CA", "fr-CA"].includes(locale); - const isCanadianCurrency = currency === "CAD"; - const params = { style, minimumFractionDigits: maximumFractionDigits, maximumFractionDigits }; + if (currency) { params.currency = currency; - params.currencyDisplay = - isCanadianLocale && isCanadianCurrency ? "code" : isNarrowSymbolForm ? "narrowSymbol" : "symbol"; - } - - let formattedAmount = isCompact - ? compactNumber(amount, locale) - : new Intl.NumberFormat(locale, params).format(amount); - if (isCanadianLocale && isCanadianCurrency) { - formattedAmount = formattedAmount.replace("CAD", "CA$"); + params.currencyDisplay = isNarrowSymbolForm ? "narrowSymbol" : "symbol"; } - return formattedAmount; + return isCompact ? compactNumber(amount, locale) : new Intl.NumberFormat(locale, params).format(amount); }; export const roundNumber = (currency, amount) => { From 339c16c6d7a454803c592289ae3251e2fc03f84b Mon Sep 17 00:00:00 2001 From: Oleksandr Khomyakov <10237454+khomyakov@users.noreply.github.com> Date: Wed, 13 Dec 2023 15:48:24 +0200 Subject: [PATCH 3/5] Fix currency display issue in BreakdownItem component --- src/components/Breakdown.jsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/Breakdown.jsx b/src/components/Breakdown.jsx index 79a4dea7..e6d07931 100644 --- a/src/components/Breakdown.jsx +++ b/src/components/Breakdown.jsx @@ -53,9 +53,7 @@ const BreakdownItem = ({ children, info, methodIcon, secondary, value, className {isNumber(value) ? ( - - {" "} - locale={locale} + {value} ) : ( From 42a80ea2024199d60e109bfb3b9158df0b20149a Mon Sep 17 00:00:00 2001 From: kirtesh-xola Date: Fri, 29 Dec 2023 12:12:45 +0530 Subject: [PATCH 4/5] X2-8166 fix(breakdown): resolves context destructuring issue --- src/components/Breakdown.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Breakdown.jsx b/src/components/Breakdown.jsx index e6d07931..192dde07 100644 --- a/src/components/Breakdown.jsx +++ b/src/components/Breakdown.jsx @@ -36,7 +36,8 @@ Breakdown.propTypes = { }; const BreakdownItem = ({ children, info, methodIcon, secondary, value, className, color = "default", ...rest }) => { - const { currency, locale } = useContext(CurrencyContext); + /** When BreakdownItem is directly used without outer component, the context would be `undefined` */ + const { currency, locale } = useContext(CurrencyContext) ?? {}; return ( From d39341b9724e28c166f6177305a5ab4cce8972f8 Mon Sep 17 00:00:00 2001 From: Oleksandr Khomyakov <10237454+khomyakov@users.noreply.github.com> Date: Tue, 2 Jan 2024 15:32:54 +0200 Subject: [PATCH 5/5] Defaulted context to empty object if undefined --- src/components/Breakdown.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Breakdown.jsx b/src/components/Breakdown.jsx index 192dde07..e1ad4308 100644 --- a/src/components/Breakdown.jsx +++ b/src/components/Breakdown.jsx @@ -79,7 +79,7 @@ Breakdown.Item = BreakdownItem; Breakdown.Item.displayName = "Breakdown.Item"; const BreakdownSubtotalItem = ({ children, info, value, className, color = "black", ...rest }) => { - const { currency, locale } = useContext(CurrencyContext); + const { currency, locale } = useContext(CurrencyContext) ?? {}; return (