feat: add new strapi customization for user expectation on the final authentication screens

Because:

* we want to customize "Firefox will try sending you back to use an email mask after you sign in." because we need something similar for smart window

This commit:

* adds additionalAccessibilityInfo (name suggested by Ross) to cmsInfo.shared

Closes FXA-12638

Author: MagentaManifold

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

@@ -92,6 +92,7 @@ export const RelyingPartyResultFactory = (
       Enum_Componentaccountsshared_Headlinefontsize.Large,
     ]),
     headlineTextColor: faker.color.rgb(),
+    additionalAccessibilityInfo: faker.string.sample(),
   },
   NewDeviceLoginEmail: {
     logoUrl: faker.internet.url(),

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

@@ -37,6 +37,7 @@ export const relyingPartyQuery = graphql(`
         favicon
         headlineFontSize
         headlineTextColor
+        additionalAccessibilityInfo
       }
       EmailFirstPage {
         logoUrl

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

@@ -42,6 +42,7 @@ export interface Shared {
   favicon: string | null;
   headlineFontSize: Enum_Componentaccountsshared_Headlinefontsize | null;
   headlineTextColor: string | null;
+  additionalAccessibilityInfo: string | null;
 }
 
 export interface FeatureFlags {

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

@@ -75,6 +75,7 @@ export interface SharedRelierCmsInfo {
   favicon?: string | undefined;
   headlineFontSize?: HeadlineFontSize | null;
   headlineTextColor?: string | null;
+  additionalAccessibilityInfo?: string | undefined;
 }
 
 export interface FeatureFlagsRelierCmsInfo {

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

@@ -371,8 +371,7 @@ const CompleteResetPasswordContainer = ({
         recoveryKeyExists,
         estimatedSyncDeviceCount,
       }}
-      isFirefoxClientServiceRelay={integration.isFirefoxClientServiceRelay()}
-      integrationIsSync={integration.isSync()}
+      integration={integration}
       locationState={location.state as CompleteResetPasswordLocationState}
     />
   );

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

@@ -5,8 +5,9 @@
 import React from 'react';
 import { Meta } from '@storybook/react';
 import { withLocalization } from 'fxa-react/lib/storybooks';
-import { Subject } from './mocks';
+import { createMockWebIntegration, Subject } from './mocks';
 import CompleteResetPassword from '.';
+import { MOCK_CMS_INFO } from '../../mocks';
 
 export default {
   title: 'Pages/ResetPassword/CompleteResetPassword',
@@ -18,11 +19,11 @@ export const NoSync = () => (
   <Subject recoveryKeyExists={true} estimatedSyncDeviceCount={0} />
 );
 
-export const OAuthDesktopServiceRelay = () => (
+export const WithCmsAdditionalAccessibilityInfo = () => (
   <Subject
-    isFirefoxClientServiceRelay={true}
     estimatedSyncDeviceCount={0}
     recoveryKeyExists={false}
+    integration={createMockWebIntegration({ cmsInfo: MOCK_CMS_INFO })}
   />
 );
 

packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/container.tsx

@@ -3,10 +3,10 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localizationProvider';
-import { Subject } from './mocks';
+import { createMockWebIntegration, Subject } from './mocks';
 import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { MOCK_PASSWORD } from '../../mocks';
+import { MOCK_CMS_INFO, MOCK_PASSWORD } from '../../mocks';
 import GleanMetrics from '../../../lib/glean';
 
 const mockSubmitNewPassword = jest.fn((newPassword: string) =>
@@ -23,9 +23,6 @@ jest.mock('../../../lib/glean', () => ({
   },
 }));
 
-const serviceRelayText =
-  'Firefox will try sending you back to use an email mask after you sign in.';
-
 describe('CompleteResetPassword page', () => {
   beforeEach(() => {
     (GleanMetrics.passwordReset.createNewView as jest.Mock).mockClear();
@@ -75,19 +72,20 @@ describe('CompleteResetPassword page', () => {
       expect(
         screen.queryByRole('link', { name: 'Use account recovery key' })
       ).not.toBeInTheDocument();
-      expect(screen.queryByText(serviceRelayText)).not.toBeInTheDocument();
     });
 
-    it('renders expected text when service=relay', async () => {
+    it('renders additional accessibility info from CMS', async () => {
       renderWithLocalizationProvider(
         <Subject
-          isFirefoxClientServiceRelay={true}
           estimatedSyncDeviceCount={0}
           recoveryKeyExists={false}
+          integration={createMockWebIntegration({ cmsInfo: MOCK_CMS_INFO })}
         />
       );
       await waitFor(() =>
-        expect(screen.getByText(serviceRelayText)).toBeVisible()
+        expect(
+          screen.getByText(MOCK_CMS_INFO.shared.additionalAccessibilityInfo)
+        ).toBeVisible()
       );
     });
 

packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/index.stories.tsx

@@ -19,7 +19,6 @@ import ResetPasswordWarning from '../../../components/ResetPasswordWarning';
 import { Link, useLocation } from '@reach/router';
 import Banner from '../../../components/Banner';
 import { HeadingPrimary } from '../../../components/HeadingPrimary';
-import { useFtlMsgResolver } from '../../../models';
 
 const CompleteResetPassword = ({
   email,
@@ -29,11 +28,12 @@ const CompleteResetPassword = ({
   submitNewPassword,
   estimatedSyncDeviceCount,
   recoveryKeyExists,
-  integrationIsSync,
-  isFirefoxClientServiceRelay,
+  integration,
 }: CompleteResetPasswordProps) => {
   const location = useLocation();
   const searchParams = location.search;
+  const additionalAccessibilityInfo =
+    integration.getCmsInfo()?.shared.additionalAccessibilityInfo;
   useEffect(() => {
     if (hasConfirmedRecoveryKey) {
       GleanMetrics.passwordReset.recoveryKeyCreatePasswordView();
@@ -43,11 +43,9 @@ const CompleteResetPassword = ({
     }
   }, [hasConfirmedRecoveryKey, recoveryKeyExists]);
 
-  const ftlMsgResolver = useFtlMsgResolver();
-
   const [isSubmitting, setIsSubmitting] = useState(false);
   const isActiveSyncUser = !!(
-    integrationIsSync ||
+    integration.isSync() ||
     (estimatedSyncDeviceCount !== undefined && estimatedSyncDeviceCount > 0)
   );
   const defaultClosed = !isActiveSyncUser;
@@ -98,15 +96,10 @@ const CompleteResetPassword = ({
       */}
       <input type="email" value={email} className="hidden" readOnly />
 
-      {isFirefoxClientServiceRelay && (
+      {additionalAccessibilityInfo && (
         <Banner
           type="info"
-          content={{
-            localizedHeading: ftlMsgResolver.getMsg(
-              'complete-reset-password-desktop-relay',
-              'Firefox will try sending you back to use an email mask after you sign in.'
-            ),
-          }}
+          content={{ localizedHeading: additionalAccessibilityInfo }}
         />
       )}