Merge pull request #17351 from mozilla/FXA-10213

feat(settings): Update UTM params for monitor plus promo

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

@@ -17,7 +17,7 @@ import vpnIcon from './vpn-logo.svg';
 import { ReactComponent as BentoIcon } from './bento.svg';
 import { ReactComponent as CloseIcon } from '@fxa/shared/assets/images/close.svg';
 import { FtlMsg } from 'fxa-react/lib/utils';
-import { useFtlMsgResolver } from '../../../models/hooks';
+import { useConfig, useFtlMsgResolver } from '../../../models/hooks';
 import { LINK } from '../../../constants';
 import { constructHrefWithUtm } from '../../../lib/utilities';
 
@@ -29,6 +29,8 @@ export const BentoMenu = () => {
   useEscKeydownEffect(setRevealed);
   const dropDownId = 'drop-down-bento-menu';
   const iconClassNames = 'inline-block w-5 -mb-1 me-1';
+
+  const { env } = useConfig();
   const ftlMsgResolver = useFtlMsgResolver();
 
   const bentoMenuTitle = ftlMsgResolver.getMsg(
@@ -55,7 +57,7 @@ export const BentoMenu = () => {
   );
 
   const monitorLink = constructHrefWithUtm(
-    LINK.MONITOR,
+    env === 'stage' ? LINK.MONITOR_STAGE : LINK.MONITOR,
     'mozilla-websites',
     'moz-account',
     'bento',

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

@@ -4,7 +4,7 @@
 
 import React from 'react';
 import { screen } from '@testing-library/react';
-import ProductPromo, { monitorPromoLink, monitorPlusPromoLink } from '.';
+import ProductPromo from '.';
 import { Account, AppContext } from '../../../models';
 import { MOCK_SERVICES } from '../ConnectedServices/mocks';
 import { MozServices } from '../../../lib/types';
@@ -51,9 +51,10 @@ describe('ProductPromo', () => {
     );
     expect(screen.getByRole('link', { name: /Get free scan/ })).toHaveAttribute(
       'href',
-      monitorPromoLink
+      'https://monitor.mozilla.org/?utm_source=moz-account&utm_medium=product-partnership&utm_term=sidebar&utm_content=monitor-free&utm_campaign=settings-promo'
     );
   });
+
   it('renders Monitor Plus promo if user does not have Monitor Plus', async () => {
     const account = {
       attachedClients: [
@@ -75,7 +76,7 @@ describe('ProductPromo', () => {
     );
     expect(screen.getByRole('link', { name: /Get started/ })).toHaveAttribute(
       'href',
-      monitorPlusPromoLink
+      'https://monitor.mozilla.org/#pricing?utm_source=moz-account&utm_medium=product-partnership&utm_term=sidebar&utm_content=monitor-plus&utm_campaign=settings-promo'
     );
   });
 });

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

@@ -8,7 +8,7 @@ import monitorTextLogo from './monitor-text-logo.svg';
 import { FtlMsg } from 'fxa-react/lib/utils';
 import classNames from 'classnames';
 import { MozServices } from '../../../lib/types';
-import { useAccount } from '../../../models';
+import { useAccount, useConfig } from '../../../models';
 import { constructHrefWithUtm } from '../../../lib/utilities';
 import { LINK } from '../../../constants';
 
@@ -22,28 +22,11 @@ export interface ProductPromoProps {
   // product?: MozServices;
 }
 
-export const monitorPromoLink = constructHrefWithUtm(
-  LINK.MONITOR,
-  'product-partnership',
-  'moz-account',
-  'sidebar',
-  'monitor-free',
-  'settings-promo'
-);
-
-export const monitorPlusPromoLink = constructHrefWithUtm(
-  LINK.MONITOR_PLUS,
-  'product-partnership',
-  'moz-account',
-  'sidebar',
-  'monitor-free',
-  'settings-promo'
-);
-
 export const ProductPromo = ({
   type = ProductPromoType.Sidebar,
 }: ProductPromoProps) => {
   const { attachedClients, subscriptions } = useAccount();
+  const { env } = useConfig();
 
   const hasMonitor = attachedClients.some(
     ({ name }) => name === MozServices.Monitor
@@ -57,6 +40,24 @@ export const ProductPromo = ({
     return <></>;
   }
 
+  const monitorPromoLink = constructHrefWithUtm(
+    env === 'stage' ? LINK.MONITOR_STAGE : LINK.MONITOR,
+    'product-partnership',
+    'moz-account',
+    'sidebar',
+    'monitor-free',
+    'settings-promo'
+  );
+
+  const monitorPlusPromoLink = constructHrefWithUtm(
+    env === 'stage' ? LINK.MONITOR_PLUS_STAGE : LINK.MONITOR_PLUS,
+    'product-partnership',
+    'moz-account',
+    'sidebar',
+    'monitor-plus',
+    'settings-promo'
+  );
+
   // if (hasMonitor) {
   // Glean view event
   // }

packages/fxa-settings/src/constants/index.tsx

@@ -22,19 +22,22 @@ export enum ENTRYPOINTS {
   FIREFOX_FX_VIEW_ENTRYPOINT = 'fx-view',
 }
 
-export enum LINK {
-  AMO = 'https://addons.mozilla.org/',
-  FX_DESKTOP = 'https://www.mozilla.org/firefox/new/',
-  FX_MOBILE = 'https://www.mozilla.org/firefox/mobile/',
-  FX_SYNC = 'https://www.mozilla.org/firefox/sync/',
-  HUBS = 'https://hubs.mozilla.com/',
-  MDN = 'https://developer.mozilla.org/',
-  MONITOR = 'https://monitor.mozilla.org/',
-  MONITOR_PLUS = 'https://monitor.mozilla.org/#pricing',
-  POCKET = 'https://getpocket.com/',
-  RELAY = 'https://relay.firefox.com/',
-  VPN = 'https://vpn.mozilla.org/',
-}
+export const LINK = {
+  AMO: 'https://addons.mozilla.org/',
+  FX_DESKTOP: 'https://www.mozilla.org/firefox/new/',
+  FX_MOBILE: 'https://www.mozilla.org/firefox/mobile/',
+  FX_SYNC: 'https://www.mozilla.org/firefox/sync/',
+  HUBS: 'https://hubs.mozilla.com/',
+  MDN: 'https://developer.mozilla.org/',
+  MONITOR: 'https://monitor.mozilla.org/',
+  MONITOR_STAGE: 'https://stage.firefoxmonitor.nonprod.cloudops.mozgcp.net/',
+  MONITOR_PLUS: 'https://monitor.mozilla.org/#pricing',
+  MONITOR_PLUS_STAGE:
+    'https://stage.firefoxmonitor.nonprod.cloudops.mozgcp.net/#pricing',
+  POCKET: 'https://getpocket.com/',
+  RELAY: 'https://relay.firefox.com/',
+  VPN: 'https://vpn.mozilla.org/',
+};
 
 // DISPLAY_SAFE_UNICODE regex matches validation used for auth_server
 // Match display-safe unicode characters.