Merge pull request #19320 from mozilla/fxa-12273

feat(l10n): Implement dynamic localization context and language switcher

Author: vbudhram

packages/fxa-content-server/server/config/local.json-dist

@@ -71,6 +71,7 @@
     "recoveryPhonePasswordReset2fa": true,
     "updatedInlineTotpSetupFlow": true,
     "updatedInlineRecoverySetupFlow": true
+    "showLocaleToggle": true
   },
   "rolloutRates": {
     "keyStretchV2": 1,

packages/fxa-content-server/server/lib/beta-settings.js

@@ -120,6 +120,7 @@ const settingsConfig = {
     updatedInlineRecoverySetupFlow: config.get(
       'featureFlags.updatedInlineRecoverySetupFlow'
     ),
+    showLocaleToggle: config.get('featureFlags.showLocaleToggle'),
   },
   nimbusPreview: config.get('nimbusPreview'),
   cms: {

packages/fxa-content-server/server/lib/configuration.js

@@ -265,6 +265,12 @@ const conf = (module.exports = convict({
       format: Boolean,
       env: 'FEATURE_FLAGS_UPDATED_INLINE_RECOVERY_SETUP_FLOW',
     },
+    showLocaleToggle: {
+      default: false,
+      doc: 'Enables the locale toggle in the footer',
+      format: Boolean,
+      env: 'FEATURE_FLAGS_SHOW_LOCALE_TOGGLE',
+    },
   },
   cms: {
     enabled: {

packages/fxa-content-server/server/lib/routes/react-app/route-definition-index.js

@@ -64,6 +64,9 @@ function getIndexRouteDefinition(config) {
   const FEATURE_FLAGS_UPDATED_INLINE_RECOVERY_SETUP_FLOW = config.get(
     'featureFlags.updatedInlineRecoverySetupFlow'
   );
+  const FEATURE_FLAGS_SHOW_LOCALE_TOGGLE = config.get(
+    'featureFlags.showLocaleToggle'
+  );
   const NIMBUS_PREVIEW = config.get('nimbusPreview');
   const GLEAN_ENABLED = config.get('glean.enabled');
   const GLEAN_APPLICATION_ID = config.get('glean.applicationId');
@@ -131,6 +134,7 @@ function getIndexRouteDefinition(config) {
       updated2faSetupFlow: FEATURE_FLAGS_UPDATED_2FA_SETUP_FLOW,
       updatedInlineRecoverySetupFlow:
         FEATURE_FLAGS_UPDATED_INLINE_RECOVERY_SETUP_FLOW,
+      showLocaleToggle: FEATURE_FLAGS_SHOW_LOCALE_TOGGLE,
     },
     cms: {
       enabled: CMS_ENABLED,

packages/fxa-react/components/Footer/index.test.tsx

@@ -8,8 +8,8 @@ import Footer from '.';
 import { renderWithLocalizationProvider } from '../../lib/test-utils/localizationProvider';
 
 describe('Footer', () => {
-  it('renders as expected', () => {
-    renderWithLocalizationProvider(<Footer />);
+  it('renders as expected without LocaleToggle', () => {
+    renderWithLocalizationProvider(<Footer showLocaleToggle={false} />);
 
     const linkMozilla = screen.getByTestId('link-mozilla');
 
@@ -29,5 +29,39 @@ describe('Footer', () => {
       'href',
       'https://www.mozilla.org/about/legal/terms/services/'
     );
+
+    // Check that LocaleToggle placeholder is NOT rendered when showLocaleToggle is false
+    expect(screen.queryByTestId('locale-toggle-placeholder')).not.toBeInTheDocument();
+  });
+
+  it('renders LocaleToggle when showLocaleToggle is true and localeToggleComponent is provided', () => {
+    const MockLocaleToggle = ({ placement }: { placement?: 'footer' | 'header' }) => (
+      <div data-testid="locale-toggle" data-placement={placement}>
+        Mock LocaleToggle
+      </div>
+    );
+
+    renderWithLocalizationProvider(
+      <Footer showLocaleToggle={true} localeToggleComponent={MockLocaleToggle} />
+    );
+
+    // Check that LocaleToggle is rendered in the footer
+    const localeToggle = screen.getByTestId('locale-toggle');
+    expect(localeToggle).toBeInTheDocument();
+    expect(localeToggle).toHaveAttribute('data-placement', 'footer');
+  });
+
+  it('does not render LocaleToggle when showLocaleToggle is true but no localeToggleComponent is provided', () => {
+    renderWithLocalizationProvider(<Footer showLocaleToggle={true} />);
+
+    // Check that nothing is rendered when no component is provided
+    expect(screen.queryByTestId('locale-toggle')).not.toBeInTheDocument();
+  });
+
+  it('renders without LocaleToggle by default', () => {
+    renderWithLocalizationProvider(<Footer />);
+
+    // Check that LocaleToggle placeholder is NOT rendered by default
+    expect(screen.queryByTestId('locale-toggle-placeholder')).not.toBeInTheDocument();
   });
 });

packages/fxa-react/components/Footer/index.tsx

@@ -7,7 +7,13 @@ import { Localized, useLocalization } from '@fluent/react';
 import LinkExternal from '../LinkExternal';
 import mozLogo from '@fxa/shared/assets/images/moz-logo-bw-rgb.svg';
 
-export const Footer = () => {
+export const Footer = ({
+  showLocaleToggle = false,
+  localeToggleComponent
+}: {
+  showLocaleToggle?: boolean;
+  localeToggleComponent?: React.ComponentType<{ placement?: 'footer' | 'header' }>;
+}) => {
   const { l10n } = useLocalization();
   return (
     <footer
@@ -51,6 +57,11 @@ export const Footer = () => {
           </LinkExternal>
         </Localized>
       </div>
+      {showLocaleToggle && localeToggleComponent && (
+        <div className="w-full mobileLandscape:w-auto flex items-center mt-3 mobileLandscape:mt-0 mobileLandscape:ml-10">
+          {React.createElement(localeToggleComponent, { placement: 'footer' })}
+        </div>
+      )}
     </footer>
   );
 };

packages/fxa-settings/src/components/AppLayout/index.test.tsx

@@ -19,6 +19,18 @@ import {
 } from './mocks';
 import { RelierCmsInfo } from '../../models';
 
+// Mock the useConfig hook
+jest.mock('../../models/hooks', () => ({
+  useConfig: jest.fn(() => ({
+    featureFlags: {
+      showLocaleToggle: false
+    }
+  })),
+  useFtlMsgResolver: () => ({
+    getMsg: (id: string, fallback: string) => fallback
+  })
+}));
+
 describe('<AppLayout />', () => {
   it('renders as expected with children', async () => {
     renderWithLocalizationProvider(
@@ -275,6 +287,26 @@ describe('<AppLayout />', () => {
     expect(screen.getAllByRole('img')).toHaveLength(1);
   });
 
+  describe('LocaleToggle visibility', () => {
+    it('shows LocaleToggle when feature flag enabled', () => {
+      // Tried to not use require here but it was not working
+      const { useConfig } = require('../../models/hooks');
+      useConfig.mockReturnValue({
+        featureFlags: {
+          showLocaleToggle: true
+        }
+      });
+
+      renderWithLocalizationProvider(
+        <AppLayout>
+          <p>Hello, world!</p>
+        </AppLayout>
+      );
+
+      expect(screen.getByTestId('locale-select')).toBeInTheDocument();
+    });
+  });
+
   describe('snapshots', () => {
     it('renders correctly with CMS', () => {
       const mockCmsInfo: RelierCmsInfo = {

packages/fxa-settings/src/components/AppLayout/index.tsx

@@ -9,6 +9,8 @@ import { useLocalization } from '@fluent/react';
 import Head from 'fxa-react/components/Head';
 import classNames from 'classnames';
 import { RelierCmsInfo } from '../../models/integrations';
+import { LocaleToggle } from '../LocaleToggle';
+import { useConfig } from '../../models/hooks';
 
 type AppLayoutProps = {
   // TODO: FXA-6803 - the title prop should be made mandatory
@@ -25,6 +27,8 @@ type AppLayoutProps = {
    * `FlowContainer`.
    */
   wrapInCard?: boolean;
+  /** Whether to show the locale toggle in the footer */
+  showLocaleToggle?: boolean;
 };
 
 const looseValidBgCheck = (value: string | undefined) => {
@@ -45,6 +49,7 @@ export const AppLayout = ({
   wrapInCard = true,
 }: AppLayoutProps) => {
   const { l10n } = useLocalization();
+  const config = useConfig();
   const cmsBackgroundColor = cmsInfo?.shared?.backgroundColor;
   const cmsHeaderBackground = cmsInfo?.shared?.headerBackground;
   const cmsPageTitle = cmsInfo?.shared?.pageTitle;
@@ -58,6 +63,8 @@ export const AppLayout = ({
 
   const favicon = cmsInfo?.shared?.favicon;
 
+  const showLocaleToggle =config.featureFlags?.showLocaleToggle;
+
   return (
     <>
       <Head {...{ title: overrideTitle, favicon }} />
@@ -116,7 +123,7 @@ export const AppLayout = ({
           </LinkExternal>
         </header>
         <main className="mobileLandscape:flex mobileLandscape:items-center mobileLandscape:flex-1">
-          <section>
+          <section className="relative">
             {wrapInCard ? (
               <div className={classNames('card', widthClass)}>{children}</div>
             ) : (
@@ -125,6 +132,14 @@ export const AppLayout = ({
           </section>
         </main>
       </div>
+      <footer>
+            {/* LocaleToggle positioned in lower left corner of page */}
+            {showLocaleToggle && (
+              <div className="fixed bottom-6 left-6 z-10">
+                <LocaleToggle placement="footer" />
+              </div>
+            )}
+      </footer>
       <div id="body-bottom" className="w-full block mobileLandscape:hidden" />
     </>
   );

packages/fxa-settings/src/components/FormVerifyTotp/index.test.tsx

@@ -13,14 +13,14 @@ describe('FormVerifyTotp component', () => {
     renderWithLocalizationProvider(<Subject />);
     expect(screen.getByText('Enter 6-digit code')).toBeVisible();
     expect(screen.getAllByRole('textbox')).toHaveLength(1);
-    const button = screen.getByRole('button');
+    const button = screen.getByRole('button', { name: 'Submit' });
     expect(button).toHaveTextContent('Submit');
   });
 
   describe('submit button', () => {
     it('is disabled on render', () => {
       renderWithLocalizationProvider(<Subject />);
-      const button = screen.getByRole('button');
+      const button = screen.getByRole('button', { name: 'Submit' });
       expect(button).toHaveTextContent('Submit');
       expect(button).toBeDisabled();
     });
@@ -29,7 +29,7 @@ describe('FormVerifyTotp component', () => {
       const user = userEvent.setup();
       renderWithLocalizationProvider(<Subject />);
       const input = screen.getByRole('textbox');
-      const button = screen.getByRole('button');
+      const button = screen.getByRole('button', { name: 'Submit' });
       expect(button).toHaveTextContent('Submit');
       expect(button).toBeDisabled();
 
@@ -42,7 +42,7 @@ describe('FormVerifyTotp component', () => {
       const user = userEvent.setup();
       renderWithLocalizationProvider(<Subject />);
       const input = screen.getByRole('textbox');
-      const button = screen.getByRole('button');
+      const button = screen.getByRole('button', { name: 'Submit' });
       expect(button).toHaveTextContent('Submit');
       expect(button).toBeDisabled();
 

packages/fxa-settings/src/components/InputPhoneNumber/index.test.tsx

@@ -16,7 +16,8 @@ describe('InputPhoneNumber', () => {
     expect(usOption).toBeInTheDocument();
     expect(canadaOption).toBeInTheDocument();
 
-    const options = screen.getAllByRole('option');
+    const phoneSelect = screen.getByLabelText('Select country');
+    const options = phoneSelect.querySelectorAll('option');
     expect(options.length).toBe(2);
 
     // expect list to be sorted alphabetically
@@ -34,14 +35,15 @@ describe('InputPhoneNumber', () => {
     renderWithLocalizationProvider(
       <Subject countries={extendedCountryOptions} />
     );
-    let options = screen.getAllByRole('option');
+    const phoneSelect = screen.getByLabelText('Select country');
+    let options = phoneSelect.querySelectorAll('option');
     expect(options.length).toBe(extendedCountryOptions.length);
 
     // There should be an option for each country listed
     expect(extendedCountryOptions.length).toEqual(options.length);
     extendedCountryOptions.forEach((countryOption) => {
       expect(
-        options.some((option) =>
+        Array.from(options).some((option) =>
           option.textContent?.includes(countryOption.name)
         )
       ).toBe(true);