Merge pull request #19353 from mozilla/FXA-12286-accounts-required-properties

chore(cms): Update required Accounts CMS properties

Author: nshirley

libs/shared/cms/src/__generated__/graphql.ts

@@ -3,9 +3,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 export interface Page {
-  headline: string | null;
+  headline: string;
   description: string | null;
-  primaryButtonText: string | null;
+  primaryButtonText: string;
   logoUrl: string | null;
   logoAltText: string | null;
   pageTitle: string | null;
@@ -44,14 +44,14 @@ export interface RelyingPartyResult {
   entrypoint: string | null;
   name: string | null;
   l10nId: string;
-  EmailFirstPage?: Page;
-  SignupSetPasswordPage?: Page;
-  SignupConfirmCodePage?: Page;
-  SignupConfirmedSyncPage?: Page;
-  SigninPage?: Page;
+  EmailFirstPage: Page;
+  SignupSetPasswordPage: Page;
+  SignupConfirmCodePage: Page;
+  SignupConfirmedSyncPage: Page;
+  SigninPage: Page;
   SigninTokenCodePage?: Page;
   SigninUnblockCodePage?: Page;
-  shared?: Shared;
+  shared: Shared;
   NewDeviceLoginEmail?: Email;
   VerifyLoginCodeEmail?: Email;
   VerifyShortCodeEmail?: Email;

libs/shared/cms/src/lib/queries/relying-party/types.ts

@@ -4,7 +4,7 @@ exports[`<AppLayout /> snapshots renders correctly with CMS: background wrapper
 <div
   class="flex min-h-screen flex-col items-center tablet:[background:var(--cms-bg)]"
   data-testid="app"
-  style="--cms-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);"
+  style="--cms-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 26, 26, 0.25) 40%, rgba(230, 0, 0, 0.3) 70%, rgba(179, 0, 0, 0.45) 100%);"
 />
 `;
 
@@ -17,13 +17,13 @@ exports[`<AppLayout /> snapshots renders correctly with CMS: header background 1
 
 exports[`<AppLayout /> snapshots renders correctly with CMS: header logo 1`] = `
 <img
-  alt="Snapshot CMS Custom Logo"
+  alt="custom-header-logo"
   class="h-auto w-[140px] mx-0"
-  src="https://example.com/snapshot-cms-logo.png"
+  src="https://cdn.accounts.firefox.com/other/firefox-browser-logo.svg"
 />
 `;
 
-exports[`<AppLayout /> snapshots renders correctly with CMS: title 1`] = `"Snapshot App - Custom Title | Mozilla accounts"`;
+exports[`<AppLayout /> snapshots renders correctly with CMS: title 1`] = `"MOCK Shared Title | Mozilla accounts"`;
 
 exports[`<AppLayout /> snapshots renders correctly without CMS: background wrapper 1`] = `
 <div

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

@@ -17,7 +17,7 @@ import {
   MOCK_CMS_INFO_DEFAULT_LOGO,
   MOCK_CMS_INFO_HEADER_LOGO_WITH_OTHER_PROPS,
 } from './mocks';
-import { RelierCmsInfo } from '../../models';
+import { MOCK_CMS_INFO } from '../../pages/mocks';
 
 // Mock the useConfig hook
 jest.mock('../../models/hooks', () => ({
@@ -309,34 +309,16 @@ describe('<AppLayout />', () => {
 
   describe('snapshots', () => {
     it('renders correctly with CMS', () => {
-      const mockCmsInfo: RelierCmsInfo = {
-        name: 'Test App',
-        clientId: 'test123',
-        entrypoint: 'snapshot-test',
-        shared: {
-          headerLogoUrl: 'https://example.com/snapshot-cms-logo.png',
-          headerLogoAltText: 'Snapshot CMS Custom Logo',
-          buttonColor: '#0078d4',
-          logoUrl: 'https://example.com/snapshot-cms-logo.png',
-          logoAltText: 'Snapshot App Logo',
-          backgroundColor: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-          headerBackground: 'linear-gradient(135deg, #764ba2 0%, #667eea 100%)',
-          pageTitle: 'Snapshot App - Custom Title',
-        },
-      };
-
       const { container } = renderWithLocalizationProvider(
-        <AppLayout cmsInfo={mockCmsInfo}>
+        <AppLayout cmsInfo={MOCK_CMS_INFO}>
           <p>Hello, world!</p>
         </AppLayout>
       );
 
       // title should have override
       const title = document.title;
       // header logo image
-      const headerLogo = screen.getByRole('img', {
-        name: mockCmsInfo.shared?.headerLogoAltText,
-      });
+      const headerLogo = screen.getByRole('img', { name: MOCK_CMS_INFO.shared.headerLogoAltText });
       // div containing the background styling. We use cloneNode to remove
       // child content so the snap is only the background styles we want to ensure
       // are getting passed through

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

@@ -61,7 +61,7 @@ export const AppLayout = ({
   const hasValidBackgroundImage = looseValidBgCheck(cmsBackgroundColor);
   const hasValidHeaderBackground = looseValidBgCheck(cmsHeaderBackground);
 
-  const favicon = cmsInfo?.shared?.favicon;
+  const favicon = cmsInfo?.shared.favicon;
 
   const showLocaleToggle =config.featureFlags?.showLocaleToggle;
 

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

@@ -4,7 +4,7 @@
 
 import { RelierCmsInfo } from '../../models/integrations';
 
-export const MOCK_CMS_INFO_VALID_LINEAR_BG: RelierCmsInfo = {
+export const MOCK_CMS_INFO_VALID_LINEAR_BG = {
   name: 'Test App',
   clientId: 'test123',
   entrypoint: 'test',
@@ -15,9 +15,9 @@ export const MOCK_CMS_INFO_VALID_LINEAR_BG: RelierCmsInfo = {
     backgroundColor: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
     pageTitle: 'Test App - Custom Title',
   },
-};
+} as RelierCmsInfo;
 
-export const MOCK_CMS_INFO_VALID_RADIAL_BG: RelierCmsInfo = {
+export const MOCK_CMS_INFO_VALID_RADIAL_BG = {
   name: 'Test App',
   clientId: 'test123',
   entrypoint: 'test',
@@ -28,9 +28,9 @@ export const MOCK_CMS_INFO_VALID_RADIAL_BG: RelierCmsInfo = {
     backgroundColor: 'radial-gradient(circle, #ff6b6b, #4ecdc4)',
     pageTitle: 'Test App - Custom Title',
   },
-};
+} as RelierCmsInfo;
 
-export const MOCK_CMS_INFO_NO_BG: RelierCmsInfo = {
+export const MOCK_CMS_INFO_NO_BG = {
   name: 'Test App',
   clientId: 'test123',
   entrypoint: 'test',
@@ -40,9 +40,9 @@ export const MOCK_CMS_INFO_NO_BG: RelierCmsInfo = {
     logoAltText: 'Test App Logo',
     pageTitle: 'Test App - Custom Title',
   },
-};
+} as RelierCmsInfo;
 
-export const MOCK_CMS_INFO_INVALID_BG_COLOR: RelierCmsInfo = {
+export const MOCK_CMS_INFO_INVALID_BG_COLOR = {
   name: 'Test App',
   clientId: 'test123',
   entrypoint: 'test',
@@ -53,9 +53,9 @@ export const MOCK_CMS_INFO_INVALID_BG_COLOR: RelierCmsInfo = {
     backgroundColor: 'solid-color-red',
     pageTitle: 'Test App - Custom Title',
   },
-};
+} as RelierCmsInfo;
 
-export const MOCK_CMS_INFO_WITH_PAGE_TITLE: RelierCmsInfo = {
+export const MOCK_CMS_INFO_WITH_PAGE_TITLE = {
   name: 'Test App',
   clientId: 'test123',
   entrypoint: 'test',
@@ -65,9 +65,9 @@ export const MOCK_CMS_INFO_WITH_PAGE_TITLE: RelierCmsInfo = {
     logoAltText: 'Test App Logo',
     pageTitle: 'CMS Custom Title',
   },
-};
+} as RelierCmsInfo;
 
-export const MOCK_CMS_INFO_NO_PAGE_TITLE: RelierCmsInfo = {
+export const MOCK_CMS_INFO_NO_PAGE_TITLE = {
   name: 'Test App',
   clientId: 'test123',
   entrypoint: 'test',
@@ -76,9 +76,9 @@ export const MOCK_CMS_INFO_NO_PAGE_TITLE: RelierCmsInfo = {
     logoUrl: 'https://example.com/logo.png',
     logoAltText: 'Test App Logo',
   },
-};
+} as RelierCmsInfo;
 
-export const MOCK_CMS_INFO_HEADER_LOGO: RelierCmsInfo = {
+export const MOCK_CMS_INFO_HEADER_LOGO = {
   name: 'Test App',
   clientId: 'test123',
   entrypoint: 'test',
@@ -89,9 +89,9 @@ export const MOCK_CMS_INFO_HEADER_LOGO: RelierCmsInfo = {
     headerLogoUrl: 'https://example.com/cms-logo.png',
     headerLogoAltText: 'CMS Custom Logo',
   },
-};
+} as RelierCmsInfo;
 
-export const MOCK_CMS_INFO_HEADER_LOGO_NO_ALT: RelierCmsInfo = {
+export const MOCK_CMS_INFO_HEADER_LOGO_NO_ALT = {
   name: 'Test App',
   clientId: 'test123',
   entrypoint: 'test',
@@ -101,9 +101,9 @@ export const MOCK_CMS_INFO_HEADER_LOGO_NO_ALT: RelierCmsInfo = {
     logoAltText: undefined,
     headerLogoUrl: 'https://example.com/cms-logo.png',
   },
-};
+} as RelierCmsInfo;
 
-export const MOCK_CMS_INFO_DEFAULT_LOGO: RelierCmsInfo = {
+export const MOCK_CMS_INFO_DEFAULT_LOGO = {
   name: 'Test App',
   clientId: 'test123',
   entrypoint: 'test',
@@ -112,9 +112,9 @@ export const MOCK_CMS_INFO_DEFAULT_LOGO: RelierCmsInfo = {
     logoUrl: undefined,
     logoAltText: undefined,
   },
-};
+} as RelierCmsInfo;
 
-export const MOCK_CMS_INFO_HEADER_LOGO_WITH_OTHER_PROPS: RelierCmsInfo = {
+export const MOCK_CMS_INFO_HEADER_LOGO_WITH_OTHER_PROPS = {
   name: 'Test App',
   clientId: 'test123',
   entrypoint: 'test',
@@ -127,7 +127,7 @@ export const MOCK_CMS_INFO_HEADER_LOGO_WITH_OTHER_PROPS: RelierCmsInfo = {
     backgroundColor: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
     pageTitle: 'Test App - Custom Title',
   },
-};
+} as RelierCmsInfo;
 
 export const INTEGRATION_WITH_UNDEFINED_GETCMSINFO = {
   getCmsInfo: () => undefined,

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

@@ -154,7 +154,7 @@ export const ButtonDownloadRecoveryKeyPDF = ({
             await downloadFile();
             navigateForward && navigateForward();
           }}
-          buttonColor={cmsInfo?.shared?.buttonColor}
+          buttonColor={cmsInfo?.shared.buttonColor}
         >
           Download and continue
         </CmsButtonWithFallback>

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

@@ -95,7 +95,7 @@ const CmsButtonWithFallback: React.FC<CmsButtonWithFallbackProps> = ({
         isCms ? 'cta-primary-cms' : 'cta-primary',
         'cta-xl',
         {
-          // add a text-shadow if the CMS background color does not meet color contast
+          // add a text-shadow if the CMS background color does not meet color contrast
           // standards, as our CTA button text is always white
           'text-shadow-cms': isCms && buttonColor && !hasSufficientContrast(buttonColor.trim(), '#ffffff'),
         },

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

@@ -19,7 +19,7 @@ exports[`InlineRecoveryKeySetupCreate renders button with CMS passthrough 1`] =
 <button
   class="cta-primary-cms cta-xl flex justify-center items-center"
   data-glean-id="inline_recovery_key_cta_submit"
-  style="--cta-bg: #000000; --cta-border: #000000; --cta-active: #000000; --cta-disabled: #00000060;"
+  style="--cta-bg: #D41C1C; --cta-border: #D41C1C; --cta-active: #D41C1C; --cta-disabled: #D41C1C60;"
   type="submit"
 >
   <span

packages/fxa-settings/src/components/InlineRecoveryKeySetupCreate/__snapshots__/index.test.tsx.snap

@@ -5,7 +5,7 @@
 import { screen } from '@testing-library/react';
 import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localizationProvider';
 import { Subject } from './mocks';
-import { RelierCmsInfo } from '../../models';
+import { MOCK_CMS_INFO } from '../../pages/mocks';
 
 describe('InlineRecoveryKeySetupCreate', () => {
   it('renders as expected', () => {
@@ -39,20 +39,11 @@ describe('InlineRecoveryKeySetupCreate', () => {
   });
 
   it('renders button with CMS passthrough', () => {
-    const cmsInfo: RelierCmsInfo = {
-      name: '',
-      clientId: '',
-      entrypoint: '',
-      shared: {
-        buttonColor: '#000000',
-        logoUrl: '',
-        logoAltText: ''
-      }
-    };
+
     // in this test, we don't want the full container, only the button that
     // cms info is passed onto to ensure we're still passing through
     renderWithLocalizationProvider(
-      <Subject cmsInfo={cmsInfo} />
+      <Subject cmsInfo={MOCK_CMS_INFO} />
     );
 
     const cmsButton = screen.queryByRole('button', {