Add UTM Params for Bundle Onboarding links (#5910)

* add utm params

* update tests

Author: codemist

src/app/(bundle)/bundle/onboarding/BundleOnboardingView.module.scss

@@ -14,9 +14,9 @@
 
     .gradientTextFill {
       background: linear-gradient(
-        180deg,
-        tokens.$color-blue-30 30%,
-        tokens.$color-purple-40 100%
+        45deg,
+        tokens.$color-purple-50 20%,
+        tokens.$color-blue-30 100%
       );
       // src: https://www.geeksforgeeks.org/how-to-create-linear-gradient-text-using-html-and-css/
       -webkit-background-clip: text;

src/app/(bundle)/bundle/onboarding/BundleOnboardingView.test.tsx

@@ -10,6 +10,11 @@ import { useTelemetry } from "../../../hooks/useTelemetry";
 import userEvent from "@testing-library/user-event";
 import FooterMeta, { BundleFooterDefault } from "./BundleFooter.stories";
 import HeaderMeta, { BundleHeaderDefault } from "./BundleHeader.stories";
+import {
+  bundleQueryParamsExternalProducts,
+  bundleQueryParamsMonitor,
+  promptNoneAuthParams,
+} from "./BundleOnboardingView";
 
 jest.mock("../../../hooks/useTelemetry");
 
@@ -65,7 +70,10 @@ it("opens a new tab when cta is selected", async () => {
   render(<ComposedBundlePage />);
 
   const monitorLink = screen.getByRole("link", { name: "Go to ⁨Monitor⁩" });
-  expect(monitorLink).toHaveAttribute("href", "/user/dashboard");
+  expect(monitorLink).toHaveAttribute(
+    "href",
+    "/user/dashboard?" + `${bundleQueryParamsMonitor}`,
+  );
 
   await user.click(monitorLink);
 
@@ -75,7 +83,11 @@ it("opens a new tab when cta is selected", async () => {
   jest.spyOn(console, "error").mockImplementationOnce(() => undefined);
 
   const vpnLink = screen.getByRole("link", { name: "Get ⁨VPN⁩" });
-  expect(vpnLink).toHaveAttribute("href", process.env.MOZILLA_VPN_LANDING_URL);
+  const vpnHref =
+    process.env.MOZILLA_VPN_LANDING_URL +
+    "/download?" +
+    bundleQueryParamsExternalProducts;
+  expect(vpnLink).toHaveAttribute("href", vpnHref);
 
   await user.click(vpnLink);
 
@@ -85,10 +97,15 @@ it("opens a new tab when cta is selected", async () => {
   jest.spyOn(console, "error").mockImplementationOnce(() => undefined);
 
   const relayLink = screen.getByRole("link", { name: "Go to ⁨Relay⁩" });
-  expect(relayLink).toHaveAttribute(
-    "href",
-    process.env.FIREFOX_RELAY_LANDING_URL,
-  );
+
+  const relayHref =
+    process.env.FIREFOX_RELAY_LANDING_URL +
+    "/accounts/fxa/login?process=login&" +
+    bundleQueryParamsExternalProducts +
+    "&auth_params=" +
+    encodeURIComponent(promptNoneAuthParams);
+
+  expect(relayLink).toHaveAttribute("href", relayHref);
 
   await user.click(relayLink);
 

src/app/(bundle)/bundle/onboarding/BundleOnboardingView.tsx

@@ -16,8 +16,35 @@ export type Props = {
   enabledFeatureFlags: FeatureFlagName[];
 };
 
+export const bundleQueryParamsExternalProducts = new URLSearchParams({
+  utm_medium: "referral",
+  utm_source: "bundle-onboarding-page",
+  utm_campaign: "evergreen",
+}).toString();
+
+export const bundleQueryParamsMonitor = new URLSearchParams({
+  utm_medium: "mozilla-websites",
+  utm_source: "bundle",
+  utm_campaign: "onboarding-page",
+  utm_content: "launch-us",
+}).toString();
+
+export const promptNoneAuthParams = new URLSearchParams({
+  prompt: "none",
+}).toString();
+
 export const BundleOnboardingView = (props: Props) => {
   const l10n = props.l10n;
+  const relayLink =
+    process.env.FIREFOX_RELAY_LANDING_URL +
+    "/accounts/fxa/login?process=login&" +
+    bundleQueryParamsExternalProducts +
+    "&auth_params=" +
+    encodeURIComponent(promptNoneAuthParams);
+  const vpnLink =
+    process.env.MOZILLA_VPN_LANDING_URL +
+    "/download?" +
+    bundleQueryParamsExternalProducts;
 
   return (
     <main>
@@ -49,7 +76,7 @@ export const BundleOnboardingView = (props: Props) => {
                 data: { button_id: "launch_vpn_download_page" },
               }}
               variant="primary"
-              href={process.env.MOZILLA_VPN_LANDING_URL}
+              href={vpnLink}
             >
               {l10n.getString("bundle-mozilla-vpn-cta")}
             </TelemetryButton>
@@ -70,7 +97,7 @@ export const BundleOnboardingView = (props: Props) => {
                 data: { button_id: "launch_monitor" },
               }}
               variant="primary"
-              href="/user/dashboard"
+              href={`/user/dashboard?${bundleQueryParamsMonitor}`}
             >
               {l10n.getString("bundle-monitor-plus-cta")}
             </TelemetryButton>
@@ -91,7 +118,8 @@ export const BundleOnboardingView = (props: Props) => {
                 data: { button_id: "launch_relay" },
               }}
               variant="primary"
-              href={process.env.FIREFOX_RELAY_LANDING_URL}
+              // Relay's OAuth library accepts the url params in auth_params and passes them through to the FxA OAuth url
+              href={relayLink}
             >
               {l10n.getString("bundle-relay-premium-cta")}
             </TelemetryButton>