X2-8166: Correct Currency not Appearing when Viewing the Customer's Reservation in the Purchases Tab

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 (
-        <CurrencyContext.Provider value={currency}>
+        <CurrencyContext.Provider value={value}>
             <table className={clsx("ui-breakdown", "w-full", className)} {...rest}>
                 <tbody>{children}</tbody>
             </table>
@@ -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 (
         <tr className={clsx("ui-breakdown-item", colors[color], className)} {...rest}>
@@ -51,7 +53,7 @@ const BreakdownItem = ({ children, info, methodIcon, secondary, value, className
 
             <td className="w-[1%] whitespace-nowrap pl-4 text-right">
                 {isNumber(value) ? (
-                    <Currency shouldRemoveTrailingZeroes={false} currency={currency}>
+                    <Currency shouldRemoveTrailingZeroes={false} currency={currency} locale={locale}>
                         {value}
                     </Currency>
                 ) : (
@@ -76,15 +78,15 @@ 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 (
         <tr className={clsx("ui-breakdown-subtotal-item", "font-bold", colors[color], className)} {...rest}>
             <td className="pt-1 pb-4 text-left">{children}</td>
             <td className="whitespace-nowrap pt-1 pb-4 text-right">{info}</td>
 
             <td className="w-[1%] whitespace-nowrap pt-1 pb-4 pl-4 text-right">
-                <Currency shouldRemoveTrailingZeroes={false} currency={currency}>
+                <Currency shouldRemoveTrailingZeroes={false} currency={currency} locale={locale}>
                     {value}
                 </Currency>
             </td>

src/helpers/numbers.js

@@ -20,6 +20,7 @@ export const numberFormat = (
     const style = currency ? "currency" : "decimal";
 
     const params = { style, minimumFractionDigits: maximumFractionDigits, maximumFractionDigits };
+
     if (currency) {
         params.currency = currency;
         params.currencyDisplay = isNarrowSymbolForm ? "narrowSymbol" : "symbol";

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" },