Merge pull request #20095 from mozilla/fxa-12989

feat(settings): Add SigninCachedPage customizations

Author: vbudhram

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

@@ -127,6 +127,15 @@ export const RelyingPartyResultFactory = (
     pageTitle: faker.string.sample(),
     splitLayout: faker.datatype.boolean(),
   },
+  SigninCachedPage: {
+    logoUrl: faker.internet.url(),
+    logoAltText: faker.internet.url(),
+    headline: faker.string.sample(),
+    description: faker.string.sample(),
+    primaryButtonText: faker.string.sample(),
+    pageTitle: faker.string.sample(),
+    splitLayout: faker.datatype.boolean(),
+  },
   SigninTokenCodePage: {
     logoUrl: faker.internet.url(),
     logoAltText: faker.internet.url(),

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

@@ -82,6 +82,15 @@ export const relyingPartyQuery = graphql(`
         pageTitle
         splitLayout
       }
+      SigninCachedPage {
+        logoUrl
+        logoAltText
+        headline
+        description
+        primaryButtonText
+        pageTitle
+        splitLayout
+      }
       SigninTokenCodePage {
         headline
         description

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

@@ -60,6 +60,7 @@ export interface RelyingPartyResult {
   SignupConfirmCodePage: Page;
   SignupConfirmedSyncPage: Page;
   SigninPage: Page;
+  SigninCachedPage?: Page;
   SigninTokenCodePage?: Page;
   SigninUnblockCodePage?: Page;
   shared: Shared;

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

@@ -103,6 +103,7 @@ export interface RelierCmsInfo {
   SignupConfirmedSyncPage?: PageRelierCmsInfo;
 
   SigninPage: PageRelierCmsInfo;
+  SigninCachedPage?: PageRelierCmsInfo;
   SigninTotpCodePage?: PageRelierCmsInfo;
   SigninTokenCodePage?: PageRelierCmsInfo;
   SigninUnblockCodePage?: PageRelierCmsInfo;

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

@@ -573,7 +573,10 @@ const SigninContainer = ({
   }
 
   const cmsInfo = integration.getCmsInfo();
-  const splitLayout = cmsInfo?.SigninPage?.splitLayout;
+  // sessionToken is a necessary precondition for showing the cached page
+  const splitLayout = sessionToken
+    ? (cmsInfo?.SigninCachedPage?.splitLayout ?? cmsInfo?.SigninPage?.splitLayout)
+    : cmsInfo?.SigninPage?.splitLayout;
 
   // TODO: if validationError is 'email', in content-server we show "Bad request email param"
   // For now, just redirect to index-first, until FXA-8289 is done

packages/fxa-settings/src/models/integrations/relier-interfaces.ts

@@ -123,6 +123,22 @@ export const SignInWithCmsCachedCredentialsSplitLayout = storyWithProps({
   }),
 });
 
+export const SignInWithCmsCachedPage = storyWithProps({
+  sessionToken: MOCK_SESSION_TOKEN,
+  integration: createMockSigninOAuthIntegration({
+    wantsKeys: false,
+    cmsInfo: {
+      ...MOCK_CMS_INFO,
+      SigninCachedPage: {
+        headline: 'Welcome back',
+        description: 'Continue to your Mozilla account',
+        primaryButtonText: 'Continue',
+        pageTitle: 'Welcome back',
+      },
+    },
+  }),
+});
+
 export const SignInRelayNoPasswordlessSupport = storyWithProps({
   integration: createMockSigninOAuthNativeIntegration({
     service: OAuthNativeServices.Relay,

packages/fxa-settings/src/pages/Signin/container.tsx

@@ -1581,17 +1581,18 @@ describe('Signin component', () => {
         hasPassword: false,
       });
 
-      // the specific case here is the falsy condition of the above ternary
-      // so, we make sure our mock headline is NOT in the document as a guard against
-      // snapshotting the wrong render.
-      expect(
-        screen.queryByText(cmsProps.cmsInfo.SigninPage.headline)
-      ).not.toBeInTheDocument();
-
       const cmsLogo = screen.getByRole('img', {
         name: cmsProps.cmsInfo.shared.logoAltText,
       });
       expect(cmsLogo).toMatchSnapshot();
+
+      // When no SigninCachedPage is set, the non-password path falls back
+      // to SigninPage headline and description
+      expect(
+        screen.getByRole('heading', {
+          name: cmsProps.cmsInfo.SigninPage.headline,
+        })
+      ).toBeInTheDocument();
     });
 
     it('renders the CMS-styled submit button', () => {
@@ -1621,5 +1622,77 @@ describe('Signin component', () => {
 
       expect(additionalInfo).toBeInTheDocument();
     });
+
+    describe('SigninCachedPage CMS config', () => {
+      const cachedCmsProps = {
+        cmsInfo: {
+          ...MOCK_CMS_INFO,
+          SigninCachedPage: {
+            headline: 'Welcome back',
+            description: 'Continue to your Mozilla account',
+            primaryButtonText: 'Continue',
+            pageTitle: 'Welcome back',
+          },
+        },
+      };
+
+      it('renders cached CMS headline and description for cached user', () => {
+        render({
+          integration: createMockSigninWebIntegration(cachedCmsProps),
+          sessionToken: MOCK_SESSION_TOKEN,
+          hasPassword: true,
+        });
+
+        expect(
+          screen.getByRole('heading', { name: 'Welcome back' })
+        ).toBeInTheDocument();
+        expect(
+          screen.getByText('Continue to your Mozilla account')
+        ).toBeInTheDocument();
+      });
+
+      it('renders cached CMS button text for cached user', () => {
+        render({
+          integration: createMockSigninWebIntegration(cachedCmsProps),
+          sessionToken: MOCK_SESSION_TOKEN,
+          hasPassword: true,
+        });
+
+        expect(
+          screen.getByRole('button', { name: 'Continue' })
+        ).toBeInTheDocument();
+      });
+
+      it('falls back to SigninPage CMS config when SigninCachedPage is not set', () => {
+        render({
+          integration: createMockSigninWebIntegration(cmsProps),
+          sessionToken: MOCK_SESSION_TOKEN,
+          hasPassword: true,
+        });
+
+        expect(
+          screen.getByRole('heading', {
+            name: cmsProps.cmsInfo.SigninPage.headline,
+          })
+        ).toBeInTheDocument();
+      });
+
+      it('uses SigninPage CMS config for non-cached user even when SigninCachedPage is set', () => {
+        render({
+          integration: createMockSigninWebIntegration(cachedCmsProps),
+          hasPassword: true,
+          sessionToken: undefined,
+        });
+
+        expect(
+          screen.getByRole('heading', {
+            name: cachedCmsProps.cmsInfo.SigninPage.headline,
+          })
+        ).toBeInTheDocument();
+        expect(
+          screen.queryByRole('heading', { name: 'Welcome back' })
+        ).not.toBeInTheDocument();
+      });
+    });
   });
 });

packages/fxa-settings/src/pages/Signin/index.stories.tsx

@@ -360,8 +360,13 @@ const Signin = ({
   );
 
   const cmsInfo = integration.getCmsInfo();
-  const title = cmsInfo?.SigninPage.pageTitle;
-  const splitLayout = cmsInfo?.SigninPage.splitLayout;
+  const cachedPageCms = cmsInfo?.SigninCachedPage;
+  const signinPageCms = cmsInfo?.SigninPage;
+  // Use cached page config when available and user has cached account, else fall back to SigninPage
+  const activePageCms =
+    !isPasswordNeeded && cachedPageCms ? cachedPageCms : signinPageCms;
+  const title = activePageCms?.pageTitle;
+  const splitLayout = activePageCms?.splitLayout;
   const additionalAccessibilityInfo =
     cmsInfo?.shared.additionalAccessibilityInfo;
 
@@ -383,8 +388,8 @@ const Signin = ({
           {...{
             cmsLogoUrl: cmsInfo?.shared.logoUrl,
             cmsLogoAltText: cmsInfo?.shared.logoAltText,
-            cmsHeadline: cmsInfo?.SigninPage.headline,
-            cmsDescription: cmsInfo?.SigninPage.description,
+            cmsHeadline: activePageCms?.headline,
+            cmsDescription: activePageCms?.description,
             cmsHeadlineFontSize: cmsInfo?.shared.headlineFontSize,
             cmsHeadlineTextColor: cmsInfo?.shared.headlineTextColor,
           }}
@@ -400,6 +405,8 @@ const Signin = ({
             serviceName,
             cmsLogoUrl: cmsInfo?.shared.logoUrl,
             cmsLogoAltText: cmsInfo?.shared.logoAltText,
+            cmsHeadline: activePageCms?.headline,
+            cmsDescription: activePageCms?.description,
             cmsHeadlineFontSize: cmsInfo?.shared.headlineFontSize,
             cmsHeadlineTextColor: cmsInfo?.shared.headlineTextColor,
           }}
@@ -489,6 +496,7 @@ const Signin = ({
                 type="submit"
                 disabled={signinLoading}
                 buttonColor={cmsInfo?.shared.buttonColor}
+                buttonText={activePageCms?.primaryButtonText}
               >
                 Sign in
               </CmsButtonWithFallback>