Merge pull request #20393 from mozilla/FXA-13465

fix(splitLayout): Remove temp 'en-only' splitLayout guard

Author: LZoog

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

@@ -18,7 +18,6 @@ import {
   MOCK_CMS_INFO_SPLIT_LAYOUT_BG,
 } from './mocks';
 import { MOCK_CMS_INFO } from '../../pages/mocks';
-import { useDynamicLocalization } from '../../contexts/DynamicLocalizationContext';
 
 // Mock the useConfig hook
 jest.mock('../../models/hooks', () => ({
@@ -32,17 +31,6 @@ jest.mock('../../models/hooks', () => ({
   }),
 }));
 
-jest.mock('../../contexts/DynamicLocalizationContext', () => ({
-  useDynamicLocalization: jest.fn(() => ({
-    currentLocale: 'en',
-    switchLanguage: jest.fn(),
-    clearLanguagePreference: jest.fn(),
-    isLoading: false,
-  })),
-}));
-
-const mockUseDynamicLocalization = useDynamicLocalization as jest.Mock;
-
 describe('<AppLayout />', () => {
   it('renders as expected with children', async () => {
     renderWithLocalizationProvider(
@@ -393,15 +381,8 @@ describe('<AppLayout />', () => {
     });
   });
 
-  describe('splitLayout with locale restrictions (temp hack)', () => {
-    it('renders split layout when splitLayout is true and locale is English', () => {
-      mockUseDynamicLocalization.mockReturnValue({
-        currentLocale: 'en-US',
-        switchLanguage: jest.fn(),
-        clearLanguagePreference: jest.fn(),
-        isLoading: false,
-      });
-
+  describe('splitLayout', () => {
+    it('renders split layout when splitLayout is true', () => {
       renderWithLocalizationProvider(
         <AppLayout splitLayout={true} cmsInfo={MOCK_CMS_INFO_SPLIT_LAYOUT_BG}>
           <p>Split layout content</p>
@@ -417,31 +398,5 @@ describe('<AppLayout />', () => {
 
       screen.getByText('Split layout content');
     });
-
-    it('renders default layout when splitLayout is true but locale is not English', () => {
-      mockUseDynamicLocalization.mockReturnValue({
-        currentLocale: 'fr',
-        switchLanguage: jest.fn(),
-        clearLanguagePreference: jest.fn(),
-        isLoading: false,
-      });
-
-      renderWithLocalizationProvider(
-        <AppLayout splitLayout={true} cmsInfo={MOCK_CMS_INFO_HEADER_LOGO}>
-          <p>Default layout content</p>
-        </AppLayout>
-      );
-
-      expect(
-        screen.queryByRole('img', {
-          name: MOCK_CMS_INFO_SPLIT_LAYOUT_BG.shared.backgrounds
-            ?.splitLayoutAltText as string,
-        })
-      ).not.toBeInTheDocument();
-
-      screen.getByText('Default layout content');
-      // CMS info is still applied even when split layout is disabled
-      expect(screen.getByAltText('CMS Custom Logo')).toBeInTheDocument();
-    });
   });
 });

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

@@ -13,7 +13,6 @@ import { LocaleToggle } from '../LocaleToggle';
 import { DarkModeToggle } from '../DarkModeToggle';
 import { useConfig } from '../../models/hooks';
 import { CardLoadingSpinner } from '../CardLoadingSpinner';
-import { useDynamicLocalization } from '../../contexts/DynamicLocalizationContext';
 
 type AppLayoutProps = {
   // TODO: FXA-6803 - the title prop should be made mandatory
@@ -55,20 +54,16 @@ export const AppLayout = ({
 }: AppLayoutProps) => {
   const { l10n } = useLocalization();
   const config = useConfig();
-  const { currentLocale } = useDynamicLocalization();
-
-  // TEMP HACK (FXA-12988): Only show split layout for English locales
-  const showSplitLayout = splitLayout && currentLocale.startsWith('en');
 
   // Set the current page's layout preference in state so navigation
   // preserves the layout during Suspense fallback, preventing visual flash.
   // Only update if setCurrentSplitLayout is provided (it's omitted from Suspense fallback).
   // Uses useLayoutEffect instead of useEffect to prevent flicker of incorrect layout before paint
   useLayoutEffect(() => {
     if (setCurrentSplitLayout) {
-      setCurrentSplitLayout(showSplitLayout);
+      setCurrentSplitLayout(splitLayout);
     }
-  }, [showSplitLayout, setCurrentSplitLayout]);
+  }, [splitLayout, setCurrentSplitLayout]);
 
   const cmsBackgrounds = cmsInfo?.shared?.backgrounds;
   const cmsPageTitle = cmsInfo?.shared?.pageTitle;
@@ -90,7 +85,7 @@ export const AppLayout = ({
           'flex min-h-screen flex-col items-center dark:bg-grey-900',
           cmsBackgrounds?.defaultLayout &&
             'mobileLandscape:[background:var(--cms-bg)]',
-          showSplitLayout && 'mobileLandscape:relative'
+          splitLayout && 'mobileLandscape:relative'
         )}
         style={
           cmsBackgrounds?.defaultLayout
@@ -108,7 +103,7 @@ export const AppLayout = ({
             cmsBackgrounds?.header &&
               'mobileLandscape:[background:var(--cms-header-bg)]',
             // Absolute position so the background-image can optionally show through.
-            showSplitLayout && !cmsBackgrounds?.header && 'desktop:absolute'
+            splitLayout && !cmsBackgrounds?.header && 'desktop:absolute'
           )}
           style={
             cmsBackgrounds?.header
@@ -143,7 +138,7 @@ export const AppLayout = ({
           </LinkExternal>
         </header>
 
-        {!showSplitLayout ? (
+        {!splitLayout ? (
           <>
             <main className="flex mobileLandscape:items-center flex-1">
               <section>