Merge pull request #17376 from mozilla/FXA-10289

fix(promo): Disable MonitorPlus piece of ProductPromo
mozilla · Aug 14, 2024 · f010d5e · f010d5e
2 parents 99dfb9c + 44dbbdc
commit f010d5e
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 31 deletions.
diff --git a/packages/fxa-settings/src/components/Settings/ProductPromo/index.stories.tsx b/packages/fxa-settings/src/components/Settings/ProductPromo/index.stories.tsx
@@ -35,43 +35,38 @@ const storyWithProps = (
   return story;
 };
 
-export const SettingsWithMonitor = storyWithProps(
+export const SettingsWithNoMonitor = storyWithProps(
   { type: ProductPromoType.Settings },
   {
-    attachedClients: [{ name: MozServices.Monitor }],
-    subscriptions: [],
-  },
-  'Settings with Monitor (resize window)'
-);
-export const SidebarWithMonitor = storyWithProps(
-  { type: ProductPromoType.Sidebar },
-  {
-    attachedClients: [{ name: MozServices.Monitor }],
+    attachedClients: [],
     subscriptions: [],
   },
-  'Sidebar with Monitor (resize window)'
+  'Settings, user does not have Monitor (mobile only, resize window)'
 );
+
 export const SidebarWithNoMonitor = storyWithProps(
   { type: ProductPromoType.Sidebar },
   {
     attachedClients: [],
     subscriptions: [],
   },
-  'Sidebar with no Monitor'
+  'Sidebar, user does not have Monitor (resize window)'
 );
-export const SidebarWithMonitorNoPlus = storyWithProps(
-  { type: ProductPromoType.Sidebar },
+
+export const SettingsWithMonitorNoPlus = storyWithProps(
+  { type: ProductPromoType.Settings, monitorPlusEnabled: true },
   {
     attachedClients: [{ name: MozServices.Monitor }],
     subscriptions: [],
   },
-  'Sidebar with Monitor no Plus'
+  'Settings, user has Monitor but not Plus, MonitorPlus enabled (mobile only, resize window)'
 );
-export const SidebarWithMonitorPlus = storyWithProps(
-  { type: ProductPromoType.Sidebar },
+
+export const SidebarWithMonitorNoPlus = storyWithProps(
+  { type: ProductPromoType.Sidebar, monitorPlusEnabled: true },
   {
     attachedClients: [{ name: MozServices.Monitor }],
-    subscriptions: [{ productName: MozServices.MonitorPlus }],
+    subscriptions: [],
   },
-  'Sidebar with Monitor with Plus'
+  'Sidebar, user has Monitor but not Plus, MonitorPlus enabled (resize window)'
 );
diff --git a/packages/fxa-settings/src/components/Settings/ProductPromo/index.test.tsx b/packages/fxa-settings/src/components/Settings/ProductPromo/index.test.tsx
@@ -30,6 +30,27 @@ describe('ProductPromo', () => {
   afterEach(() => {
     jest.clearAllMocks();
   });
+
+  it('renders nothing if user has Monitor but not MonitorPlus, and MonitorPlus Promo is disabled', () => {
+    const services = MOCK_SERVICES.filter((service) =>
+      // TODO: MozServices / string discrepancy, FXA-6802
+      PRODUCT_PROMO_SERVICES.includes(service.name as MozServices)
+    );
+    const account = {
+      attachedClients: services,
+      subscriptions: [],
+    } as unknown as Account;
+
+    const { container } = renderWithLocalizationProvider(
+      <AppContext.Provider value={mockAppContext({ account })}>
+        <ProductPromo />
+      </AppContext.Provider>
+    );
+
+    expect(container.firstChild).toBeNull();
+    expect(GleanMetrics.accountPref.promoMonitorView).not.toHaveBeenCalled();
+  });
+
   it('renders nothing if user has all products and subscriptions', async () => {
     const services = MOCK_SERVICES.filter((service) =>
       // TODO: MozServices / string discrepancy, FXA-6802
@@ -84,7 +105,7 @@ describe('ProductPromo', () => {
     } as unknown as Account;
     renderWithLocalizationProvider(
       <AppContext.Provider value={mockAppContext({ account })}>
-        <ProductPromo />
+        <ProductPromo monitorPlusEnabled={true} />
       </AppContext.Provider>
     );
 
@@ -112,7 +133,7 @@ describe('ProductPromo', () => {
     } as unknown as Account;
     renderWithLocalizationProvider(
       <AppContext.Provider value={mockAppContext({ account })}>
-        <ProductPromo />
+        <ProductPromo monitorPlusEnabled={true} />
       </AppContext.Provider>
     );
 

diff --git a/packages/fxa-settings/src/components/Settings/ProductPromo/index.tsx b/packages/fxa-settings/src/components/Settings/ProductPromo/index.tsx
@@ -18,13 +18,18 @@ export enum ProductPromoType {
   Settings = 'settings',
 }
 
+// TODO, remove this and logic. This is temporary until we work out the UX for
+// this. This was left configurable via props for tests and storybook.
+const MONITOR_PLUS_ENABLED = false;
+
 export interface ProductPromoProps {
   type?: ProductPromoType;
-  // product?: MozServices;
+  monitorPlusEnabled?: boolean;
 }
 
 export const ProductPromo = ({
   type = ProductPromoType.Sidebar,
+  monitorPlusEnabled = MONITOR_PLUS_ENABLED,
 }: ProductPromoProps) => {
   const { attachedClients, subscriptions } = useAccount();
   const { env } = useConfig();
@@ -37,7 +42,10 @@ export const ProductPromo = ({
     ({ productName }) => productName === MozServices.MonitorPlus
   );
 
-  if (hasMonitor && hasMonitorPlus) {
+  const showMonitorPlusPromo =
+    hasMonitor && !hasMonitorPlus && monitorPlusEnabled;
+
+  if (hasMonitor && !showMonitorPlusPromo) {
     return <></>;
   }
 
@@ -59,14 +67,13 @@ export const ProductPromo = ({
     'settings-promo'
   );
 
-  let reason = { event: { reason: 'free' } };
-  if (hasMonitor) {
-    reason = { event: { reason: 'plus' } };
-  }
+  const gleanEvent = showMonitorPlusPromo
+    ? { event: { reason: 'plus' } }
+    : { event: { reason: 'free' } };
 
-  GleanMetrics.accountPref.promoMonitorView(reason);
+  GleanMetrics.accountPref.promoMonitorView(gleanEvent);
 
-  const promoContent = hasMonitor ? (
+  const promoContent = showMonitorPlusPromo ? (
     <>
       <p className="my-2">
         <FtlMsg id="product-promo-monitor-plus-description">
@@ -77,7 +84,7 @@ export const ProductPromo = ({
       <LinkExternal
         href={monitorPlusPromoLink}
         className="link-blue"
-        onClick={() => GleanMetrics.accountPref.promoMonitorSubmit(reason)}
+        onClick={() => GleanMetrics.accountPref.promoMonitorSubmit(gleanEvent)}
       >
         <FtlMsg id="product-promo-monitor-plus-cta">Get started</FtlMsg>
       </LinkExternal>
@@ -92,7 +99,7 @@ export const ProductPromo = ({
       <LinkExternal
         href={monitorPromoLink}
         className="link-blue"
-        onClick={() => GleanMetrics.accountPref.promoMonitorSubmit(reason)}
+        onClick={() => GleanMetrics.accountPref.promoMonitorSubmit(gleanEvent)}
       >
         <FtlMsg id="product-promo-monitor-cta">Get free scan</FtlMsg>
       </LinkExternal>