Merge pull request #18849 from mozilla/FXA-11378

elizabeth-ilina · web-flow · commit 1e1ba4a41479 · 2025-05-14T14:47:34.000-04:00
fix(payments-next): fix localization of prices.
diff --git a/apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/layout.tsx b/apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/layout.tsx
@@ -89,6 +89,7 @@ export default async function CheckoutLayout({
                 amount={cart.upcomingInvoicePreview.listAmount}
                 currency={cart.upcomingInvoicePreview.currency}
                 interval={cart.interval}
+                locale={locale}
               />
             }
             totalPrice={
@@ -97,8 +98,10 @@ export default async function CheckoutLayout({
                 amount={cart.upcomingInvoicePreview.totalAmount}
                 currency={cart.upcomingInvoicePreview.currency}
                 interval={cart.interval}
+                locale={locale}
               />
             }
+            locale={ locale }
           />
           {cart.state === CartState.START && (
             <div
diff --git a/apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/success/page.tsx b/apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/success/page.tsx
@@ -127,7 +127,8 @@ export default async function CheckoutSuccess({
           <div className="flex items-center justify-between text-grey-400">
             {l10n.getLocalizedCurrencyString(
               cart.latestInvoicePreview?.totalAmount,
-              cart.latestInvoicePreview?.currency
+              cart.latestInvoicePreview?.currency,
+              locale
             )}
             {cart.paymentInfo.type === 'external_paypal' ? (
               <Image src={getCardIcon('paypal')} alt="paypal" />
diff --git a/apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(mainLayout)/layout.tsx b/apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(mainLayout)/layout.tsx
@@ -63,6 +63,7 @@ export default async function UpgradeSuccessLayout({
                 amount={cart.upcomingInvoicePreview.listAmount}
                 currency={cart.upcomingInvoicePreview.currency}
                 interval={cart.interval}
+                locale={locale}
               />
             }
             totalPrice={
@@ -71,8 +72,10 @@ export default async function UpgradeSuccessLayout({
                 amount={cart.upcomingInvoicePreview.totalAmount}
                 currency={cart.upcomingInvoicePreview.currency}
                 interval={cart.interval}
+                locale={locale}
               />
             }
+            locale={ locale }
           />
         </section>
         <div className="bg-white rounded-b-lg shadow-sm shadow-grey-300 border-t-0 mb-6 pt-4 px-4 pb-14 rounded-t-lg text-grey-600 tablet:clip-shadow tablet:rounded-t-none desktop:px-12 desktop:pb-12">
diff --git a/apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(mainLayout)/success/page.tsx b/apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(mainLayout)/success/page.tsx
@@ -123,7 +123,8 @@ export default async function UpgradeSuccess({
           <div className="flex items-center justify-between text-grey-400">
             {l10n.getLocalizedCurrencyString(
               cart.latestInvoicePreview?.totalAmount,
-              cart.latestInvoicePreview?.currency
+              cart.latestInvoicePreview?.currency,
+              locale
             )}
             {cart.paymentInfo.type === 'external_paypal' ? (
               <Image src={getCardIcon('paypal')} alt="paypal" />
diff --git a/apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(startLayout)/layout.tsx b/apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(startLayout)/layout.tsx
@@ -73,6 +73,7 @@ export default async function UpgradeLayout({
             fromPrice={cart.fromPrice}
             fromPurchaseDetails={currentPurchaseDetails}
             purchaseDetails={purchaseDetails}
+            locale={locale}
           />
         </section>
 
diff --git a/apps/payments/next/app/page.tsx b/apps/payments/next/app/page.tsx
@@ -3,13 +3,20 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import Link from 'next/link';
+import { headers } from 'next/headers';
+import { determineLocale } from '@fxa/shared/l10n';
 
 export default function Index() {
   // TODO - Remove before launch -
   // This was only added to aid in initial implementation
   // The Subscription Platform doesn't currently have a root page,
   // and instead redirects to the Subscription Management page.
   // This page will be fixed before launch by FXA-8304
+  const acceptLanguage = headers().get('accept-language') || '';
+
+  const browserLocale = determineLocale(acceptLanguage);
+  const locale = browserLocale.split('-')[0];
+
   return (
     <>
       <main className="mt-16 min-h-[calc(100vh_-_4rem)]">
@@ -21,7 +28,7 @@ export default function Index() {
               <h2>VPN - Monthly</h2>
               <Link
                 className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-                href="/en/vpn/monthly/landing"
+                href={`/${locale}/vpn/monthly/landing`}
               >
                 Redirect
               </Link>
@@ -30,7 +37,7 @@ export default function Index() {
               <h2>VPN - Yearly</h2>
               <Link
                 className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-                href="/en/vpn/yearly/landing"
+                href={`/${locale}/vpn/yearly/landing`}
               >
                 Redirect
               </Link>
@@ -42,7 +49,7 @@ export default function Index() {
               <h2>123Done Pro - Monthly</h2>
               <Link
                 className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-                href="/en/123donepro/monthly/new"
+                href={`/${locale}/123donepro/monthly/new`}
               >
                 Redirect
               </Link>
diff --git a/apps/payments/next/tests/app/page.test.tsx b/apps/payments/next/tests/app/page.test.tsx
@@ -6,6 +6,15 @@ import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import Index from '../../app/page';
 
+jest.mock('next/headers', () => ({
+  headers: () => ({
+    get: (key: string) => {
+      if (key === 'accept-language') return 'en-US,en;q=0.5';
+      return null;
+    },
+  }),
+}))
+
 describe('Page', () => {
   it('renders Page as expected', async () => {
     render(Index());
diff --git a/libs/payments/ui/src/lib/client/components/PurchaseDetails/index.tsx b/libs/payments/ui/src/lib/client/components/PurchaseDetails/index.tsx
@@ -25,10 +25,11 @@ type PurchaseDetailsProps = {
     webIcon: string;
   };
   totalPrice: React.ReactNode;
+  locale: string;
 };
 
 export function PurchaseDetails(props: PurchaseDetailsProps) {
-  const { invoice, priceInterval, purchaseDetails, totalPrice } = props;
+  const { invoice, priceInterval, purchaseDetails, totalPrice, locale } = props;
   const { details, productName, subtitle, webIcon } = purchaseDetails;
   const {
     currency,
@@ -92,7 +93,7 @@ export function PurchaseDetails(props: PurchaseDetailsProps) {
               <Localized id="next-plan-details-list-price">
                 <p>List Price</p>
               </Localized>
-              <p>{getLocalizedCurrencyString(listAmount, currency)}</p>
+              <p>{getLocalizedCurrencyString(listAmount, currency, locale)}</p>
             </li>
           )}
 
@@ -101,7 +102,7 @@ export function PurchaseDetails(props: PurchaseDetailsProps) {
               <Localized id="next-coupon-promo-code">
                 <p>Promo Code</p>
               </Localized>
-              <p>{getLocalizedCurrencyString(-1 * discountAmount, currency)}</p>
+              <p>{getLocalizedCurrencyString(-1 * discountAmount, currency, locale)}</p>
             </li>
           )}
 
@@ -114,7 +115,8 @@ export function PurchaseDetails(props: PurchaseDetailsProps) {
                 <p>
                   {getLocalizedCurrencyString(
                     exclusiveTaxRates[0].amount,
-                    currency
+                    currency,
+                    locale
                   )}
                 </p>
               </li>
@@ -132,7 +134,7 @@ export function PurchaseDetails(props: PurchaseDetailsProps) {
                       <p>{taxRate.title}</p>
                     </Localized>
                     <p>
-                      {getLocalizedCurrencyString(taxRate.amount, currency)}
+                      {getLocalizedCurrencyString(taxRate.amount, currency, locale)}
                     </p>
                   </li>
                 )
diff --git a/libs/payments/ui/src/lib/server/components/PriceInterval/index.tsx b/libs/payments/ui/src/lib/server/components/PriceInterval/index.tsx
@@ -10,15 +10,16 @@ type PriceIntervalProps = {
   amount: number;
   currency: string;
   interval: string;
+  locale: string;
 };
 
 export async function PriceInterval(props: PriceIntervalProps) {
-  const { l10n, amount, currency, interval } = props;
+  const { l10n, amount, currency, interval, locale } = props;
   return l10n.getString(
     `plan-price-interval-${interval}`,
     {
       amount: l10n.getLocalizedCurrency(amount, currency),
     },
-    formatPlanPricing(amount, currency, interval)
+    formatPlanPricing(amount, currency, interval, false, 0, locale)
   );
 }
diff --git a/libs/payments/ui/src/lib/server/components/UpgradePurchaseDetails/index.tsx b/libs/payments/ui/src/lib/server/components/UpgradePurchaseDetails/index.tsx
@@ -27,6 +27,7 @@ type UpgradePurchaseDetailsProps = {
     productName: string;
     webIcon: string;
   };
+  locale: string;
 };
 
 export function UpgradePurchaseDetails(props: UpgradePurchaseDetailsProps) {
@@ -37,6 +38,7 @@ export function UpgradePurchaseDetails(props: UpgradePurchaseDetailsProps) {
     invoice,
     l10n,
     purchaseDetails,
+    locale
   } = props;
   const { productName, subtitle, webIcon } = purchaseDetails;
   const {
@@ -77,6 +79,7 @@ export function UpgradePurchaseDetails(props: UpgradePurchaseDetailsProps) {
               amount={fromPrice.listAmount}
               currency={fromPrice.currency}
               interval={fromPrice.interval}
+              locale={locale}
             />
             {fromPurchaseDetails.subtitle && (
               <span>
@@ -112,6 +115,7 @@ export function UpgradePurchaseDetails(props: UpgradePurchaseDetailsProps) {
               amount={listAmount}
               currency={currency}
               interval={interval}
+              locale={locale}
             />
             {subtitle && (
               <span>
@@ -138,7 +142,7 @@ export function UpgradePurchaseDetails(props: UpgradePurchaseDetailsProps) {
                 `${productName} (${formatPlanInterval(interval)})`
               )}
             </p>
-            <p>{l10n.getLocalizedCurrencyString(listAmount, currency)}</p>
+            <p>{l10n.getLocalizedCurrencyString(listAmount, currency, locale)}</p>
           </li>
         )}
 
@@ -151,7 +155,7 @@ export function UpgradePurchaseDetails(props: UpgradePurchaseDetailsProps) {
               )}
             </p>
             <p>
-              {l10n.getLocalizedCurrencyString(-1 * discountAmount, currency)}
+              {l10n.getLocalizedCurrencyString(-1 * discountAmount, currency, locale)}
             </p>
           </li>
         )}
@@ -167,7 +171,8 @@ export function UpgradePurchaseDetails(props: UpgradePurchaseDetailsProps) {
             <p>
               {l10n.getLocalizedCurrencyString(
                 exclusiveTaxRates[0].amount,
-                currency
+                currency,
+                locale
               )}
             </p>
           </li>
@@ -183,7 +188,7 @@ export function UpgradePurchaseDetails(props: UpgradePurchaseDetailsProps) {
                 >
                   <p>{l10n.getString('tax', taxRate.title)}</p>
                   <p>
-                    {l10n.getLocalizedCurrencyString(taxRate.amount, currency)}
+                    {l10n.getLocalizedCurrencyString(taxRate.amount, currency, locale)}
                   </p>
                 </li>
               )
@@ -205,6 +210,7 @@ export function UpgradePurchaseDetails(props: UpgradePurchaseDetailsProps) {
               amount={totalAmount}
               currency={currency}
               interval={interval}
+              locale={locale}
             />
           </p>
         </li>
@@ -224,7 +230,7 @@ export function UpgradePurchaseDetails(props: UpgradePurchaseDetailsProps) {
               className="overflow-hidden text-ellipsis whitespace-nowrap"
               data-testid="prorated-price"
             >
-              {l10n.getLocalizedCurrencyString(oneTimeCharge, currency)}
+              {l10n.getLocalizedCurrencyString(oneTimeCharge, currency, locale)}
             </p>
           </div>
         </>
diff --git a/libs/payments/ui/src/lib/utils/helpers.ts b/libs/payments/ui/src/lib/utils/helpers.ts
@@ -17,14 +17,16 @@ export function formatPriceAmount(
   amount: number | null,
   currency: string,
   showTax: boolean,
-  tax: number | null
+  tax: number | null,
+  locale: string
 ) {
   return showTax
     ? `${getLocalizedCurrencyString(
         amount,
-        currency
-      )} + ${getLocalizedCurrencyString(tax, currency)} tax`
-    : getLocalizedCurrencyString(amount, currency);
+        currency,
+        locale
+      )} + ${getLocalizedCurrencyString(tax, currency, locale)} tax`
+    : getLocalizedCurrencyString(amount, currency, locale);
 }
 
 /**
@@ -45,9 +47,10 @@ export function formatPlanPricing(
   currency: string,
   interval: string,
   showTax = false,
-  tax = 0
+  tax = 0,
+  locale: string
 ): string {
-  const formattedAmount = formatPriceAmount(amount, currency, showTax, tax);
+  const formattedAmount = formatPriceAmount(amount, currency, showTax, tax, locale);
   switch (interval) {
     case 'daily':
     case 'day':
diff --git a/libs/shared/l10n/src/lib/l10n.formatters.ts b/libs/shared/l10n/src/lib/l10n.formatters.ts
@@ -36,12 +36,13 @@ export function getLocalizedCurrency(
  */
 export function getLocalizedCurrencyString(
   amountInCents: number | null,
-  currency: string
+  currency: string,
+  locale = 'en'
 ): string {
   const decimal = (amountInCents || 0) / 100;
   const options = { ...baseCurrencyOptions, currency };
 
-  return new Intl.NumberFormat('en', options).format(decimal);
+  return new Intl.NumberFormat(locale, options).format(decimal);
 }
 
 /**
diff --git a/libs/shared/l10n/src/lib/localizer/localizer.rsc.spec.ts b/libs/shared/l10n/src/lib/localizer/localizer.rsc.spec.ts
@@ -88,6 +88,7 @@ describe('LocalizerRsc', () => {
   describe('formatters', () => {
     const amountInCents = 50;
     const currency = 'usd';
+    const locale = 'fr';
     const unixSeconds = Date.now() / 1000;
     it('should call getLocalizedCurrency', () => {
       const spy = jest.spyOn(formatters, 'getLocalizedCurrency');
@@ -97,8 +98,8 @@ describe('LocalizerRsc', () => {
 
     it('should call getLocalizedCurrencyString', () => {
       const spy = jest.spyOn(formatters, 'getLocalizedCurrencyString');
-      localizerRsc.getLocalizedCurrencyString(amountInCents, currency);
-      expect(spy).toBeCalledWith(amountInCents, currency);
+      localizerRsc.getLocalizedCurrencyString(amountInCents, currency, locale);
+      expect(spy).toBeCalledWith(amountInCents, currency, locale);
     });
 
     it('should call getLocalizedDate', () => {
diff --git a/libs/shared/l10n/src/lib/localizer/localizer.rsc.ts b/libs/shared/l10n/src/lib/localizer/localizer.rsc.ts
@@ -106,8 +106,8 @@ export class LocalizerRsc {
     return getLocalizedCurrency(amountInCents, currency);
   }
 
-  getLocalizedCurrencyString(amountInCents: number | null, currency: string) {
-    return getLocalizedCurrencyString(amountInCents, currency);
+  getLocalizedCurrencyString(amountInCents: number | null, currency: string, locale: string) {
+    return getLocalizedCurrencyString(amountInCents, currency, locale);
   }
 
   getLocalizedDate(unixSeconds: number, numericDate = false): FluentDateTime {
