Merge pull request #19976 from mozilla/splitlayout-en

feat(cms): Temporarily don't load splitLayout for non-EN locales

Author: LZoog

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

@@ -17,6 +17,7 @@ import {
   MOCK_CMS_INFO_HEADER_LOGO_WITH_OTHER_PROPS,
 } from './mocks';
 import { MOCK_CMS_INFO } from '../../pages/mocks';
+import { useDynamicLocalization } from '../../contexts/DynamicLocalizationContext';
 
 // Mock the useConfig hook
 jest.mock('../../models/hooks', () => ({
@@ -30,6 +31,17 @@ 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(
@@ -379,4 +391,46 @@ describe('<AppLayout />', () => {
       expect(headerBackground).toMatchSnapshot('header background');
     });
   });
+
+  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,
+      });
+
+      const { container } = renderWithLocalizationProvider(
+        <AppLayout splitLayout={true}>
+          <p>Split layout content</p>
+        </AppLayout>
+      );
+
+      // Split layout does not render the card wrapper
+      expect(container.querySelector('.card')).not.toBeInTheDocument();
+      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,
+      });
+
+      const { container } = renderWithLocalizationProvider(
+        <AppLayout splitLayout={true} cmsInfo={MOCK_CMS_INFO_HEADER_LOGO}>
+          <p>Default layout content</p>
+        </AppLayout>
+      );
+
+      // Default layout renders with card wrapper
+      expect(container.querySelector('.card')).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,6 +13,7 @@ import { LocaleToggle } from '../LocaleToggle';
 import { useConfig } from '../../models/hooks';
 import { CardLoadingSpinner } from '../CardLoadingSpinner';
 import LoadingSpinner from 'fxa-react/components/LoadingSpinner';
+import { useDynamicLocalization } from '../../contexts/DynamicLocalizationContext';
 
 type AppLayoutProps = {
   // TODO: FXA-6803 - the title prop should be made mandatory
@@ -54,16 +55,20 @@ 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(splitLayout);
+      setCurrentSplitLayout(showSplitLayout);
     }
-  }, [splitLayout, setCurrentSplitLayout]);
+  }, [showSplitLayout, setCurrentSplitLayout]);
 
   const cmsBackgrounds = cmsInfo?.shared?.backgrounds;
   const cmsPageTitle = cmsInfo?.shared?.pageTitle;
@@ -83,7 +88,7 @@ export const AppLayout = ({
         className={classNames(
           'flex min-h-screen flex-col items-center',
           cmsBackgrounds?.defaultLayout && 'tablet:[background:var(--cms-bg)]',
-          splitLayout && 'tablet:relative'
+          showSplitLayout && 'tablet:relative'
         )}
         style={
           cmsBackgrounds?.defaultLayout
@@ -101,7 +106,7 @@ export const AppLayout = ({
             cmsBackgrounds?.header &&
               'tablet:[background:var(--cms-header-bg)]',
             // Absolute position so the background-image can optionally show through.
-            splitLayout && 'tablet:absolute'
+            showSplitLayout && 'tablet:absolute'
           )}
           style={
             cmsBackgrounds?.header
@@ -136,7 +141,7 @@ export const AppLayout = ({
           </LinkExternal>
         </header>
 
-        {!splitLayout ? (
+        {!showSplitLayout ? (
           <>
             <main className="flex mobileLandscape:items-center flex-1">
               <section>