feat(settings): swap Monitor promo for VPN by MagentaManifold · Pull Request #20404 · mozilla/fxa

MagentaManifold · 2026-04-20T16:43:41Z

Because

we want to promote VPN

This pull request

swaps Monitor promo for VPN

Issue that this pull request solves

Closes: FXA-12815

Checklist

Put an x in the boxes that apply

My commit is GPG signed.
If applicable, I have modified or added tests which pass locally.
I have added necessary documentation (if appropriate).
I have verified that my changes render correctly in RTL (if appropriate).
I have manually reviewed all AI generated code.

How to review (Optional)

Key files/areas to focus on:
Suggested review order:
Risky or complex parts:

Screenshots (Optional)

Please attach the screenshots of the changes made in case of change in user interface.

Other information (Optional)

Any other information that is important to this pull request.

Copilot

Pull request overview

Updates the FxA Settings product promotion from Mozilla Monitor to Mozilla VPN, including UI assets/localization and corresponding Glean telemetry so impressions and CTA clicks are tracked under new VPN-specific event names.

Changes:

Replace Monitor promo UI/content with VPN promo (new SVG, new Fluent strings, updated props/wiring in Settings pages/sidebar).
Rename Glean metrics/events from promo_monitor_* to promo_vpn_* across the shared metrics definitions and settings event recorder.
Update/adjust unit tests and Storybook stories to reflect the new promo and telemetry.

Reviewed changes

Copilot reviewed 14 out of 16 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/fxa-shared/metrics/glean/web/index.ts	Renames event map entries from Monitor promo to VPN promo.
packages/fxa-shared/metrics/glean/web/event.ts	Minor generated import ordering change.
packages/fxa-shared/metrics/glean/web/accountPref.ts	Updates generated event metric definitions for VPN promo view/submit.
packages/fxa-shared/metrics/glean/fxa-ui-metrics.yaml	Renames/updates metrics definitions for VPN promo events.
packages/fxa-settings/src/lib/glean/index.ts	Routes new VPN promo event names to the correct Glean metric recorders.
packages/fxa-settings/src/lib/glean/index.test.ts	Updates telemetry plumbing tests for new VPN promo event names.
packages/fxa-settings/src/components/Settings/Sidebar/index.tsx	Switches sidebar promo prop/wiring from Monitor to VPN.
packages/fxa-settings/src/components/Settings/ProductPromo/vpn-text-logo.svg	Adds VPN logo asset used by the promo.
packages/fxa-settings/src/components/Settings/ProductPromo/monitor-text-logo.svg	Removes old Monitor logo asset.
packages/fxa-settings/src/components/Settings/ProductPromo/index.tsx	Replaces Monitor promo UI/logic with VPN promo content and CTA telemetry.
packages/fxa-settings/src/components/Settings/ProductPromo/index.test.tsx	Updates component tests for VPN content, link, and telemetry call.
packages/fxa-settings/src/components/Settings/ProductPromo/index.stories.tsx	Updates Storybook stories to use VPN promo props and labels.
packages/fxa-settings/src/components/Settings/ProductPromo/en.ftl	Replaces Monitor promo strings with VPN promo strings.
packages/fxa-settings/src/components/Settings/PageSettings/index.tsx	Wires VPN promo state and view telemetry into the settings page.
packages/fxa-settings/src/components/Settings/PageSettings/index.test.tsx	Updates settings page tests for VPN promo view telemetry behavior.
packages/fxa-settings/src/components/App/index.test.tsx	Updates mocked Glean shape to reference `promoVpnView`.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Because: * we wanna promote VPN This commit: * swaps Monitor promo for VPN Closes FXA-12815

MagentaManifold · 2026-04-21T18:27:45Z

- * @param {'moz-account'} utmSource - The source of the traffic.
- * @param {'bento' | 'sidebar' | 'settings' } utmTerm - The search term or keyword associated with the campaign.
- * @param {'fx-desktop' | 'fx-mobile' | 'monitor' | 'monitor-free' | 'relay' | 'vpn' | 'get-free-scan-global' | 'get-year-round-protection-us' } utmContent - The specific content or product that the link is associated with.
- * @param {'permanent' | 'settings-promo' | 'connect-device'} utmCampaign - The name of the marketing campaign.


Removed types here since they are already in the function signature

MagentaManifold · 2026-04-21T18:31:36Z

-    ({ name }) =>
-      name === MozServices.Monitor || name === MozServices.MonitorStage
+  const hasVpn = attachedClients.some(
+    ({ name }) => name === MozServices.MozillaVPN


We don't have a service name for VPN on stage... Should we add one? Not a big deal, except that QA won't be able to test this behavior on stage

The service name on stage may be Firefox Private Network - Stage (from admin panel data), but I haven't tried to connect a stage client previously. Not sure if that's possible and if QA already has test steps.

MagentaManifold · 2026-04-21T18:34:22Z

 }

+const VPN_PROMO_URL = constructHrefWithUtm(
+  LINK.VPN,


Similarly we don't have a link to the stage VPN website. (This does not affect functionality or QA testing at all, since QA doesn't have to sign in from this link)

This is the stage link: https://www-dev.allizom.org/products/vpn/

MagentaManifold · 2026-04-21T18:37:21Z

+  'moz-account',
+  'settings',
+  'vpn',
+  'promo'


utm params differ from the ticket description because we want to be somewhat consistent with bento menu's. These are what Ross gave me.

promo instead of settings-promo?

vpomerleau

If we can set this up for QA validation on stage that would be ideal

vpomerleau · 2026-04-21T20:53:27Z

 }

+const VPN_PROMO_URL = constructHrefWithUtm(
+  LINK.VPN,


This is the stage link: https://www-dev.allizom.org/products/vpn/

vpomerleau · 2026-04-21T20:57:20Z

-    ({ name }) =>
-      name === MozServices.Monitor || name === MozServices.MonitorStage
+  const hasVpn = attachedClients.some(
+    ({ name }) => name === MozServices.MozillaVPN


The service name on stage may be Firefox Private Network - Stage (from admin panel data), but I haven't tried to connect a stage client previously. Not sure if that's possible and if QA already has test steps.

vpomerleau · 2026-04-21T21:00:17Z

+  'moz-account',
+  'settings',
+  'vpn',
+  'promo'


promo instead of settings-promo?

Copilot AI review requested due to automatic review settings April 20, 2026 16:43

MagentaManifold requested review from a team as code owners April 20, 2026 16:43

Copilot started reviewing on behalf of MagentaManifold April 20, 2026 16:44 View session

Copilot AI reviewed Apr 20, 2026

View reviewed changes

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

MagentaManifold marked this pull request as draft April 20, 2026 17:49

MagentaManifold force-pushed the FXA-12815 branch from 53a71a4 to 7455b72 Compare April 21, 2026 17:01

MagentaManifold marked this pull request as ready for review April 21, 2026 17:57

feat(settings): swap Monitor promo for VPN

ee13a09

Because: * we wanna promote VPN This commit: * swaps Monitor promo for VPN Closes FXA-12815

MagentaManifold force-pushed the FXA-12815 branch from 7455b72 to ee13a09 Compare April 21, 2026 18:25

MagentaManifold commented Apr 21, 2026

View reviewed changes

vpomerleau self-requested a review April 21, 2026 19:05

vpomerleau approved these changes Apr 21, 2026

View reviewed changes

bcolsson approved these changes Apr 21, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(settings): swap Monitor promo for VPN#20404

feat(settings): swap Monitor promo for VPN#20404
MagentaManifold wants to merge 1 commit intomainfrom
FXA-12815

MagentaManifold commented Apr 20, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

MagentaManifold Apr 21, 2026

Uh oh!

MagentaManifold Apr 21, 2026

Uh oh!

vpomerleau Apr 21, 2026

Uh oh!

MagentaManifold Apr 21, 2026

Uh oh!

vpomerleau Apr 21, 2026

Uh oh!

MagentaManifold Apr 21, 2026

Uh oh!

vpomerleau Apr 21, 2026

Uh oh!

vpomerleau left a comment

Uh oh!

vpomerleau Apr 21, 2026

Uh oh!

vpomerleau Apr 21, 2026

Uh oh!

vpomerleau Apr 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

MagentaManifold commented Apr 20, 2026

Because

This pull request

Issue that this pull request solves

Checklist

How to review (Optional)

Screenshots (Optional)

Other information (Optional)

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vpomerleau left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants