feat(payments-next): fix localization of prices

Because:

* All the prices are currently localized to 'en'.

This commit:

* Uses l10n locale for price localization.

Closes #FXA-11378

Author: elizabeth-ilina

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

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" />

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

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" />

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>
 

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>

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());

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>
                 )

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)
   );
 }

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>
         </>