Merge pull request #19522 from mozilla/FXA-12459

cleanup(settings): Remove MonitorPlus promo

Author: vpomerleau

packages/fxa-auth-server/config/index.ts

@@ -185,7 +185,7 @@ const convictConf = convict({
     rules: {
       doc: 'Mapping of features to country codes that are allowed to see the feature',
       format: Object,
-      default: {}, // ex. { "MONITORPLUSPROMO": ["US"] }
+      default: {}, // ex. { "FEATURE_NAME": ["US"] }
       env: 'GEO_ELIGIBILITY_RULES',
     },
   },

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

@@ -97,13 +97,6 @@ jest.mock('../../lib/glean', () => ({
   },
 }));
 
-const mockUseGeoEligibilityCheck = jest
-  .fn()
-  .mockReturnValue({ eligible: false });
-jest.mock('../../lib/hooks/useGeoEligibilityCheck', () => ({
-  useGeoEligibilityCheck: () => mockUseGeoEligibilityCheck(),
-}));
-
 const mockMetricsQueryAccountAmplitude = {
   recoveryKey: true,
   totpActive: true,
@@ -548,7 +541,6 @@ describe('SettingsRoutes', () => {
             ...mockAppContext({
               account: {
                 ...MOCK_ACCOUNT,
-                getMonitorPlusPromoEligibility: () => Promise.resolve(false),
               } as unknown as Account,
             }),
             ...createAppContext(),
@@ -583,7 +575,6 @@ describe('SettingsRoutes', () => {
           value={mockAppContext({
             account: {
               ...MOCK_ACCOUNT,
-              getMonitorPlusPromoEligibility: () => Promise.resolve(false),
             } as unknown as Account,
           })}
         >

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

@@ -4,7 +4,6 @@
 
 import React from 'react';
 import { Account } from '../../../models/Account';
-import AuthClient from 'fxa-auth-client/browser';
 
 import { PageSettings } from '.';
 import { Config } from '../../../lib/config';
@@ -29,10 +28,6 @@ export default {
   decorators: [withLocalization],
 } as Meta;
 
-const mockAuthClient = {
-  geoEligibilityCheck: async () => ({ eligible: true }),
-} as Partial<AuthClient> as AuthClient;
-
 const storyWithContext = (
   account: Partial<Account>,
   storyName?: string,
@@ -43,12 +38,10 @@ const storyWithContext = (
     ? {
         account: account as Account,
         config: config,
-        authClient: mockAuthClient,
         session: session,
       }
     : {
         account: account as Account,
-        authClient: mockAuthClient,
         session: session,
       };
 

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

@@ -50,16 +50,8 @@ jest.mock('../../../lib/glean', () => ({
   },
 }));
 
-const mockUseGeoEligibilityCheck = jest
-  .fn()
-  .mockReturnValue({ eligible: false });
-jest.mock('../../../lib/hooks/useGeoEligibilityCheck', () => ({
-  useGeoEligibilityCheck: () => mockUseGeoEligibilityCheck(),
-}));
-
 const mockGetProductPromoData = jest.fn().mockReturnValue({
   hidePromo: false,
-  showMonitorPlusPromo: false,
   gleanEvent: { event: { reason: 'default' } },
 });
 jest.mock('../ProductPromo', () => ({
@@ -162,37 +154,14 @@ describe('PageSettings', () => {
     });
 
     describe('product promo event', () => {
-      it('user does not have Monitor', async () => {
-        renderWithRouter(
-          <AppContext.Provider
-            value={mockAppContext({ account: coldStartAccount })}
-          >
-            <PageSettings />
-          </AppContext.Provider>
-        );
-        await waitFor(() =>
-          expect(
-            GleanMetrics.accountPref.promoMonitorView
-          ).toHaveBeenCalledTimes(1)
-        );
-        expect(GleanMetrics.accountPref.promoMonitorView).toHaveBeenCalledWith({
-          event: { reason: 'default' },
-        });
-      });
-
-      it('user has Monitor and is eligible for special promo', async () => {
-        mockUseGeoEligibilityCheck.mockReturnValue({
-          eligible: true,
-          loading: false,
-        });
+      it('user does not have Monitor, promo is shown and glean metric is called', async () => {
         mockGetProductPromoData.mockReturnValue({
           hidePromo: false,
-          showMonitorPlusPromo: true,
-          gleanEvent: { event: { reason: 'special' } },
+          gleanEvent: { event: { reason: 'default' } },
         });
         renderWithRouter(
           <AppContext.Provider
-            value={mockAppContext({ account: completelyFilledOutAccount })}
+            value={mockAppContext({ account: coldStartAccount })}
           >
             <PageSettings />
           </AppContext.Provider>
@@ -203,15 +172,11 @@ describe('PageSettings', () => {
           ).toHaveBeenCalledTimes(1)
         );
         expect(GleanMetrics.accountPref.promoMonitorView).toHaveBeenCalledWith({
-          event: { reason: 'special' },
+          event: { reason: 'default' },
         });
       });
 
-      it('user has all products and subscriptions', async () => {
-        mockUseGeoEligibilityCheck.mockReturnValue({
-          eligible: true,
-          loading: false,
-        });
+      it('user has Monitor, promo is not shown and glean metric is not called', async () => {
         mockGetProductPromoData.mockReturnValue({
           hidePromo: true,
         });

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

@@ -30,7 +30,6 @@ import {
   isRecoveryKeyPromoDismissed,
   isRecoveryPhonePromoDismissed,
 } from '../../../lib/promo-dismissal';
-import { useGeoEligibilityCheck } from '../../../lib/hooks/useGeoEligibilityCheck';
 
 export const PageSettings = ({
   integration,
@@ -47,11 +46,6 @@ export const PageSettings = ({
     recoveryPhone,
   } = account;
 
-  const {
-    eligible: monitorPlusPromoEligible,
-    loading: monitorPlusEligibilityLoading,
-  } = useGeoEligibilityCheck('monitorpluspromo');
-
   const ftlMsgResolver = useFtlMsgResolver();
   const alertBar = useAlertBar();
 
@@ -104,24 +98,15 @@ export const PageSettings = ({
 
   useEffect(() => {
     (async () => {
-      if (monitorPromo !== null || monitorPlusEligibilityLoading) {
+      if (monitorPromo !== null) {
         return;
       }
 
-      const promoData = getProductPromoData(
-        account.attachedClients,
-        account.subscriptions,
-        monitorPlusPromoEligible
-      );
+      const promoData = getProductPromoData(account.attachedClients);
 
       setMonitorPromo(promoData);
     })();
-  }, [
-    account,
-    monitorPlusPromoEligible,
-    monitorPlusEligibilityLoading,
-    monitorPromo,
-  ]);
+  }, [account, monitorPromo]);
 
   // -- Relying party promotion checks --
   useEffect(() => {

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

@@ -3,11 +3,5 @@
 product-promo-monitor =
  .alt = { -product-mozilla-monitor }
 product-promo-monitor-description-v2 = Find where your private info is exposed and take control
-# this message will only be shown to users eligible for a special promotion, based on their location (initially USA only)
-# $price - formatted for user locale, in the target market's currency (for launch, always USD)
-# /mo is 'per month'
-product-promo-monitor-special-promo-description = For { $price }/mo, save on { -product-mozilla-vpn-short }, { -product-mozilla-monitor-short }’s data-broker protection, and { -product-firefox-relay-short }’s unlimited email masks.
 # Links out to the Monitor site
 product-promo-monitor-cta = Get free scan
-# Links out to the Monitor pricing site
-product-promo-monitor-special-promo-cta = Get year-round protection

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

@@ -14,9 +14,6 @@ export default {
   decorators: [withLocalization, withLocation('/settings')],
 } as Meta<typeof ProductPromo>;
 
-/**
- * Helper to generate a Storybook story with a mocked AppContext.
- */
 function storyWithProps(props: ProductPromoProps, storyName?: string) {
   return {
     name: storyName,
@@ -28,34 +25,17 @@ function storyWithProps(props: ProductPromoProps, storyName?: string) {
   };
 }
 
-// --- Generic promo: user *without* Monitor or **with** Monitor‑free but not in market eligible for special promo ----------------------------------
-export const DefaultMobile = storyWithProps(
+export const MobilePromo = storyWithProps(
   {
     type: 'settings',
-    monitorPromo: { hidePromo: false, showMonitorPlusPromo: false },
+    monitorPromo: { hidePromo: false },
   },
-  'Default Monitor promo - Banner - mobile'
+  'Monitor promo - Banner - mobile only'
 );
-export const DefaultDesktop = storyWithProps(
+export const DesktopPromo = storyWithProps(
   {
     type: 'sidebar',
-    monitorPromo: { hidePromo: false, showMonitorPlusPromo: false },
+    monitorPromo: { hidePromo: false },
   },
-  'Default Monitor promo - Sidebar - desktop'
-);
-
-// --- Special promo: Monitor‑free + eligible (US) ----------------------------
-export const SpecialPromoMobile = storyWithProps(
-  {
-    type: 'settings',
-    monitorPromo: { hidePromo: false, showMonitorPlusPromo: true },
-  },
-  'Special promo (US) - Banner - mobile'
-);
-export const SpecialPromoDesktop = storyWithProps(
-  {
-    type: 'sidebar',
-    monitorPromo: { hidePromo: false, showMonitorPlusPromo: true },
-  },
-  'Special promo (US) - Sidebar - desktop'
+  'Monitor promo - Sidebar - desktop'
 );

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

@@ -4,13 +4,12 @@
 
 import React from 'react';
 import { screen, waitFor } from '@testing-library/react';
-import ProductPromo from '.';
-import { Account, AppContext } from '../../../models';
-import { MozServices } from '../../../lib/types';
+import ProductPromo, { getProductPromoData } from '.';
 import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localizationProvider';
-import { mockAppContext } from '../../../models/mocks';
 import GleanMetrics from '../../../lib/glean';
 import userEvent from '@testing-library/user-event';
+import { MozServices } from '../../../lib/types';
+import { AttachedClient } from '../../../models';
 
 jest.mock('../../../lib/glean', () => ({
   __esModule: true,
@@ -38,12 +37,9 @@ describe('ProductPromo', () => {
     );
   });
 
-  it('can show generic promo', async () => {
+  it('can show promo', async () => {
     renderWithLocalizationProvider(
-      <ProductPromo
-        type="settings"
-        monitorPromo={{ hidePromo: false, showMonitorPlusPromo: false }}
-      />
+      <ProductPromo type="settings" monitorPromo={{ hidePromo: false }} />
     );
 
     await waitFor(() =>
@@ -61,35 +57,13 @@ describe('ProductPromo', () => {
     );
   });
 
-  it('can show special promo', async () => {
-    renderWithLocalizationProvider(
-      <ProductPromo
-        type="settings"
-        monitorPromo={{ hidePromo: false, showMonitorPlusPromo: true }}
-      />
-    );
-
-    await waitFor(() =>
-      expect(
-        screen.getByText(/save on VPN, Monitor’s data-broker protection/i)
-      ).toBeVisible()
-    );
-    expect(
-      screen.getByRole('link', { name: /Get year-round protection/i })
-    ).toHaveAttribute(
-      'href',
-      'https://monitor.mozilla.org/subscription-plans?utm_source=moz-account&utm_medium=referral&utm_term=settings&utm_content=get-year-round-protection-us&utm_campaign=settings-promo'
-    );
-  });
-
-  it('emits telemetry when CTA clicked (default)', async () => {
+  it('emits telemetry when CTA clicked', async () => {
     const user = userEvent.setup();
     renderWithLocalizationProvider(
       <ProductPromo
         type="settings"
         monitorPromo={{
           hidePromo: false,
-          showMonitorPlusPromo: false,
           gleanEvent: { event: { reason: 'default' } },
         }}
       />
@@ -114,41 +88,33 @@ describe('ProductPromo', () => {
     });
   });
 
-  it('emits telemetry when CTA clicked (special)', async () => {
-    const user = userEvent.setup();
-    const account = {
-      attachedClients: [{ name: MozServices.Monitor }],
-      subscriptions: [],
-      getMonitorPlusPromoEligibility: () => Promise.resolve({ eligible: true }),
-    } as unknown as Account;
+  describe('getProductPromoData', () => {
+    it('hides promo when Monitor is present', () => {
+      const result = getProductPromoData([
+        { name: MozServices.Monitor },
+      ] as AttachedClient[]);
+      expect(result).toEqual({ hidePromo: true });
+    });
 
-    renderWithLocalizationProvider(
-      <AppContext.Provider value={mockAppContext({ account })}>
-        <ProductPromo
-          type="settings"
-          monitorPromo={{
-            hidePromo: false,
-            showMonitorPlusPromo: true,
-            gleanEvent: { event: { reason: 'special' } },
-          }}
-        />
-      </AppContext.Provider>
-    );
+    it('hides promo when Monitor Stage is present', () => {
+      const result = getProductPromoData([
+        { name: MozServices.MonitorStage },
+      ] as AttachedClient[]);
+      expect(result).toEqual({ hidePromo: true });
+    });
 
-    await waitFor(() =>
-      expect(
-        screen.getByText(/save on VPN, Monitor’s data-broker protection/i)
-      ).toBeVisible()
-    );
-    await user.click(
-      screen.getByRole('link', {
-        name: /Get year-round protection/i,
-      })
-    );
-    await waitFor(() => {
-      expect(GleanMetrics.accountPref.promoMonitorSubmit).toHaveBeenCalledWith({
-        event: { reason: 'special' },
-      });
+    it('shows promo and provides gleanEvent when Monitor not present', () => {
+      const result = getProductPromoData([
+        { name: MozServices.Default },
+      ] as AttachedClient[]);
+      expect(result.hidePromo).toBe(false);
+      expect(result.gleanEvent).toEqual({ event: { reason: 'default' } });
+    });
+
+    it('shows promo with gleanEvent when there are no attached clients', () => {
+      const result = getProductPromoData([] as AttachedClient[]);
+      expect(result.hidePromo).toBe(false);
+      expect(result.gleanEvent).toEqual({ event: { reason: 'default' } });
     });
   });
 });