Merge pull request #18299 from mozilla/FXA-10983

feat(settings): Show banner when unverified accounts signin

Author: jonalmeida

packages/fxa-settings/src/components/Settings/PageSettings/en.ftl

@@ -1,2 +1,4 @@
 # Link to delete account on main Settings page
 delete-account-link = Delete account
+# Success message displayed in alert bar after the user has successfully confirmed their account is not inactive.
+inactive-update-status-success-alert = Signed in successfully. Your { -product-mozilla-account } and data will stay active.

packages/fxa-settings/src/components/Settings/PageSettings/index.test.tsx

@@ -9,6 +9,7 @@ import PageSettings from '.';
 import {
   MOCK_ACCOUNT,
   mockAppContext,
+  mockSettingsContext,
   renderWithRouter,
 } from '../../../models/mocks';
 import * as Metrics from '../../../lib/metrics';
@@ -19,6 +20,10 @@ import {
   ALL_PRODUCT_PROMO_SUBSCRIPTIONS,
 } from '../../../pages/mocks';
 import { MOCK_SERVICES } from '../ConnectedServices/mocks';
+import { mockWebIntegration } from '../../../pages/Signin/SigninRecoveryCode/mocks';
+import { SettingsContext } from '../../../models/contexts/SettingsContext';
+
+jest.mock('../../../models/AlertBarInfo');
 
 jest.mock('../../../lib/metrics', () => ({
   setProperties: jest.fn(),
@@ -35,6 +40,9 @@ jest.mock('../../../lib/glean', () => ({
     deleteAccount: {
       settingsSubmit: jest.fn(),
     },
+    accountBanner: {
+      reactivationSuccessView: jest.fn(),
+    },
   },
 }));
 
@@ -68,6 +76,25 @@ describe('PageSettings', () => {
     });
   });
 
+  it('renders without imploding when passing an integration', async () => {
+    renderWithRouter(<PageSettings integration={mockWebIntegration} />);
+
+    // assert all typical PageSetting elements
+    expect(screen.getByTestId('settings-profile')).toBeInTheDocument();
+    expect(screen.getByTestId('settings-security')).toBeInTheDocument();
+    expect(
+      screen.getByTestId('settings-connected-services')
+    ).toBeInTheDocument();
+    expect(screen.getByTestId('settings-delete-account')).toBeInTheDocument();
+    expect(
+      screen.queryByTestId('settings-data-collection')
+    ).toBeInTheDocument();
+    expect(Metrics.setProperties).toHaveBeenCalledWith({
+      lang: null,
+      uid: 'abc123',
+    });
+  });
+
   describe('glean metrics', () => {
     it('emits the expected event on render', async () => {
       renderWithRouter(<PageSettings />);
@@ -118,5 +145,32 @@ describe('PageSettings', () => {
         expect(GleanMetrics.accountPref.promoMonitorView).not.toBeCalled();
       });
     });
+    describe('inactive account verified', () => {
+      const alertBarInfo = {
+        success: jest.fn(),
+      } as any;
+      const settingsContext = mockSettingsContext({ alertBarInfo });
+
+      it('user has seen the reactivation banner', async () => {
+        mockWebIntegration.data.utmCampaign =
+          'fx-account-inactive-reminder-third';
+        mockWebIntegration.data.utmMedium = 'email';
+        mockWebIntegration.data.utmContent = 'fx-account-deletion';
+        renderWithRouter(
+          <AppContext.Provider value={mockAppContext()}>
+            <SettingsContext.Provider value={settingsContext}>
+              <PageSettings integration={mockWebIntegration} />
+            </SettingsContext.Provider>
+          </AppContext.Provider>
+        );
+
+        expect(alertBarInfo.success).toHaveBeenCalledWith(
+          'Signed in successfully. Your Mozilla account and data will stay active.'
+        );
+        expect(
+          GleanMetrics.accountBanner.reactivationSuccessView
+        ).toBeCalledTimes(1);
+      });
+    });
   });
 });

packages/fxa-settings/src/components/Settings/PageSettings/index.tsx

@@ -10,7 +10,7 @@ import ConnectedServices from '../ConnectedServices';
 import LinkedAccounts from '../LinkedAccounts';
 
 import * as Metrics from '../../../lib/metrics';
-import { useAccount, useFtlMsgResolver } from '../../../models';
+import { useAccount, useAlertBar, useFtlMsgResolver } from '../../../models';
 import { SETTINGS_PATH } from 'fxa-settings/src/constants';
 import { Localized } from '@fluent/react';
 import DataCollection from '../DataCollection';
@@ -23,10 +23,14 @@ import SideBar from '../Sidebar';
 import NotificationPromoBanner from '../../NotificationPromoBanner';
 import keyImage from '../../NotificationPromoBanner/key.svg';
 import Head from 'fxa-react/components/Head';
+import { SettingsIntegration } from '../interfaces';
 
-export const PageSettings = (_: RouteComponentProps) => {
+export const PageSettings = ({
+  integration,
+}: RouteComponentProps & { integration?: SettingsIntegration }) => {
   const { uid, recoveryKey, attachedClients, subscriptions } = useAccount();
   const ftlMsgResolver = useFtlMsgResolver();
+  const alertBar = useAlertBar();
 
   Metrics.setProperties({
     lang: document.querySelector('html')?.getAttribute('lang'),
@@ -41,6 +45,37 @@ export const PageSettings = (_: RouteComponentProps) => {
   const [productPromoGleanEventSent, setProductPromoGleanEventSent] =
     useState(false);
 
+  useEffect(() => {
+    function showInactiveVerifiedBanner() {
+      const emailCampaigns = [
+        'fx-account-inactive-reminder-first',
+        'fx-account-inactive-reminder-second',
+        'fx-account-inactive-reminder-third',
+      ];
+      if (!emailCampaigns.some((e) => integration?.data?.utmCampaign === e)) {
+        return false;
+      }
+      if (
+        integration?.data?.utmContent !== 'fx-account-deletion' ||
+        integration?.data?.utmMedium !== 'email'
+      ) {
+        return false;
+      }
+      return true;
+    }
+
+    if (showInactiveVerifiedBanner()) {
+      GleanMetrics.accountBanner.reactivationSuccessView();
+      alertBar.success(
+        ftlMsgResolver.getMsg(
+          'inactive-update-status-success-alert',
+          'Signed in successfully. Your Mozilla account and data will stay active.'
+        )
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   useEffect(() => {
     // We want this view event to fire whenever the account settings page view
     // event fires, if the user is shown the promo.

packages/fxa-settings/src/components/Settings/PageSettings/mocks.tsx

@@ -36,12 +36,12 @@ import PageAvatar from './PageAvatar';
 import PageRecentActivity from './PageRecentActivity';
 import PageRecoveryKeyCreate from './PageRecoveryKeyCreate';
 import { hardNavigate } from 'fxa-react/lib/utils';
-import { SettingsIntegration } from './interfaces';
 import { currentAccount } from '../../lib/cache';
 import { hasAccount, setCurrentAccount } from '../../lib/storage-utils';
 import GleanMetrics from '../../lib/glean';
 import Head from 'fxa-react/components/Head';
 import PageRecoveryPhoneRemove from './PageRecoveryPhoneRemove';
+import { SettingsIntegration } from './interfaces';
 
 export const Settings = ({
   integration,
@@ -157,7 +157,7 @@ export const Settings = ({
       <Head />
       <Router basepath={SETTINGS_PATH}>
         <ScrollToTop default>
-          <PageSettings path="/" />
+          <PageSettings path="/" {...{ integration }} />
           <PageDisplayName path="/display_name" />
           <PageAvatar path="/avatar" />
           {account.hasPassword ? (

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

@@ -4,4 +4,4 @@
 
 import { Integration } from '../../models';
 
-export type SettingsIntegration = Pick<Integration, 'type' | 'isSync'>;
+export type SettingsIntegration = Pick<Integration, 'type' | 'data'>;

packages/fxa-settings/src/components/Settings/interfaces.ts

@@ -15,7 +15,7 @@ export function createMockSettingsIntegration({
 } = {}): SettingsIntegration {
   return {
     type,
-    isSync: () => isSync,
+    data: {},
   };
 }
 

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

@@ -518,6 +518,9 @@ const recordEventMetric = (
     case 'account_banner_create_recovery_key_view':
       accountBanner.createRecoveryKeyView.record();
       break;
+    case 'account_banner_reactivation_success_view':
+      accountBanner.reactivationSuccessView.record();
+      break;
     case 'error_view':
       error.view.record({
         reason: gleanPingMetrics?.event?.['reason'] || '',

packages/fxa-settings/src/lib/glean/index.ts

@@ -2460,6 +2460,24 @@ account_banner:
     expires: never
     data_sensitivity:
       - interaction
+  reactivation_success_view:
+    type: event
+    description: |
+      User sees the reactivation banner after receiving the inactive
+      account email and clicking the provided link inside it.
+    send_in_pings:
+      - events
+    notification_emails:
+      - [email protected]
+      - [email protected]
+    bugs:
+      - https://mozilla-hub.atlassian.net/browse/FXA-10983
+    data_reviews:
+      - https://bugzilla.mozilla.org/show_bug.cgi?id=1830504
+      - https://bugzilla.mozilla.org/show_bug.cgi?id=1844121
+    expires: never
+    data_sensitivity:
+      - interaction
 
 delete_account:
   settings_submit:

packages/fxa-shared/metrics/glean/fxa-ui-metrics.yaml

@@ -21,3 +21,20 @@ export const createRecoveryKeyView = new EventMetricType(
   },
   []
 );
+
+/**
+ * User sees the reactivation banner after receiving the inactive
+ * account email and clicking the provided link inside it.
+ *
+ * Generated from `account_banner.reactivation_success_view`.
+ */
+export const reactivationSuccessView = new EventMetricType(
+  {
+    category: 'account_banner',
+    name: 'reactivation_success_view',
+    sendInPings: ['events'],
+    lifetime: 'ping',
+    disabled: false,
+  },
+  []
+);