feat(next): add `Localization` wrapper client

Because:

* We want to localize client components using the Fluent/react library.

This commit:

* Adds component FluentLocalizationProvider that initializes and wraps
 `children` in Fluent `<LocalizationProvider>`.
* Adds a test string to `Checkout` page as a means to test the client
  component localization works as expected.

Closes FXA-7827

libs/payments/ui/src/index.ts

@@ -6,3 +6,4 @@
 
 export * from './lib/utils/helpers';
 export * from './lib/client/components/StripeWrapper';
+export * from './lib/client/components/Providers';

libs/payments/ui/src/lib/client/components/FluentLocalizationProvider.tsx

@@ -0,0 +1,39 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { ReactLocalization, LocalizationProvider } from '@fluent/react';
+import {
+  LocalizerClient,
+  LocalizerBindingsClient,
+} from '@fxa/shared/l10n/client';
+
+export function FluentLocalizationProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [l10n, setL10n] = useState<ReactLocalization>();
+
+  useEffect(() => {
+    const setLocalization = async () => {
+      const locale = navigator.language;
+      const bindings = new LocalizerBindingsClient();
+      const localizerClient = new LocalizerClient(bindings);
+      const { l10n } = await localizerClient.setupReactLocalization(locale);
+
+      setL10n(l10n);
+    };
+
+    setLocalization();
+  }, []);
+
+  if (!l10n) {
+    return;
+  }
+
+  return <LocalizationProvider l10n={l10n}>{children}</LocalizationProvider>;
+}

libs/payments/ui/src/lib/client/components/Providers.tsx

@@ -0,0 +1,11 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+'use client';
+
+import { FluentLocalizationProvider } from './FluentLocalizationProvider';
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return <FluentLocalizationProvider>{children}</FluentLocalizationProvider>;
+}

libs/payments/ui/src/lib/client/components/StripeWrapper.tsx

@@ -3,9 +3,11 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 'use client';
 
+import { Localized } from '@fluent/react';
 import { loadStripe, StripeElementsOptions } from '@stripe/stripe-js';
 import { Elements } from '@stripe/react-stripe-js';
 import { CheckoutForm } from './CheckoutForm';
+import { Providers } from './Providers';
 
 interface StripeWrapperProps {
   amount: number;
@@ -57,8 +59,11 @@ export function StripeWrapper({ amount, currency, cart }: StripeWrapperProps) {
   };
 
   return (
-    <Elements stripe={stripePromise} options={options}>
-      <CheckoutForm cart={cart} />
-    </Elements>
+    <Providers>
+      <Localized id="next-pay-with-heading-card-only"></Localized>
+      <Elements stripe={stripePromise} options={options}>
+        <CheckoutForm cart={cart} />
+      </Elements>
+    </Providers>
   );
 }

libs/shared/l10n/src/lib/localizer/localizer.client.bindings.ts

@@ -10,7 +10,7 @@ export class LocalizerBindingsClient implements ILocalizerBindings {
     this.opts = Object.assign(
       {
         translations: {
-          basePath: './locales',
+          basePath: '/locales',
         },
       },
       opts