f7bc8e83-3560-4369-be54-50d9795958aa

Committed 06 Oct 2025 01:05PM UTC coverage: 88.879% (+0.02%) from 88.863%

Build # f7bc8e83-3560-4369-be54-50d9795958aa

Build Type

Pull #5924

circleci

Committed by

web-flow

Commit Message

Merge pull request #5941 from mozilla/MPP-4348-propagate-utm-params-hydration

Fix hydration errors

Pull Request Pull Request #5924: MPP-4348: propagate UTM params from landing page to SubPlat and Accounts URLs

Run Details

2925 of 3933 branches covered (74.37%)

Branch coverage included in aggregate %.

37 of 43 new or added lines in 12 files covered. (86.05%)

1 existing line in 1 file now uncovered.

18110 of 19734 relevant lines covered (91.77%)

13.22 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

28.57

/frontend/src/components/layout/topmessage/HolidayPromoBanner.tsx

import Link from "next/link";
import { useRouter } from "next/router";
import { useL10n } from "../../../hooks/l10n";
import { Localized } from "../../Localized";
import styles from "./HolidayPromoBanner.module.scss";
import { RuntimeData } from "../../../hooks/api/types";
import {
  getPeriodicalPremiumSubscribeLink,
  isPeriodicalPremiumAvailableInCountry,
} from "../../../functions/getPlan";
import { ProfileData } from "../../../hooks/api/profile";
import { useGaEvent } from "../../../hooks/gaEvent";
import { useGaViewPing } from "../../../hooks/gaViewPing";
import { useUtmApplier } from "../../../hooks/utmApplier";

type Props = {
  isLoading: boolean;
  profile?: ProfileData;
  runtimeData?: RuntimeData;
};

export const HolidayPromoBanner = (props: Props) => {
  const l10n = useL10n();
  const gaEvent = useGaEvent();
  const router = useRouter();
  const coupon = "HOLIDAY20";
  const applyUtmParams = useUtmApplier();
  const subscribeLink = isPeriodicalPremiumAvailableInCountry(props.runtimeData)
    ? applyUtmParams(
        getPeriodicalPremiumSubscribeLink(props.runtimeData, "yearly"),
      )
    : null;
  const todaysDate = new Date();
  const expiryDate = new Date("December 31, 2023");
  const isPastExpiry = todaysDate > expiryDate;
  const gaHolidayBannerViewPing = useGaViewPing({
    category: "Holiday Promotion Banner 2023",
    label: "holiday-promo-banner-view",
  });
  const gaHolidayBannerBtnPing = () => {
    gaEvent({
      category: "Holiday Promotion Banner 2023",
      action: "Engage",
      label: "holiday-promo-banner-get-one-year-btn",
    });
  };

  if (
    props.isLoading ||
    !subscribeLink ||
    (props.profile && router.pathname !== "/premium") ||
    isPastExpiry
  ) {
    return null;
  }

  const utmParams =
    "&utm_source=fx-relay&utm_medium=banner&utm_content=holiday-promo-banner-cta&utm_campaign=relay-holiday-promo-2023";
  const subscriberLinkWithCoupon = `${subscribeLink}&coupon=${coupon}${utmParams}`;

  return (
    <aside className={styles.wrapper}>
      <div className={styles["left-promo-container"]}>
        <div className={styles["promo-container"]}>
          <p className={styles["promo-text"]}>
            {l10n.getString("holiday-promo-banner-protect-inbox")}
          </p>
          <p className={styles["promo-text-bolded"]}>
            {l10n.getString("holiday-promo-banner-code-desc")}
          </p>
        </div>
        <div className={styles["promo-container"]}>
          <Localized
            id="holiday-promo-banner-code-usage"
            vars={{ couponCode: coupon }}
            elems={{
              coupon: <span className={styles["promo-text-bolded"]} />,
            }}
          >
            <p className={styles["promo-text"]} />
          </Localized>
        </div>
      </div>
      <div className={styles["promo-container"]}>
        <Link
          ref={gaHolidayBannerViewPing}
          onClick={gaHolidayBannerBtnPing}
          href={subscriberLinkWithCoupon}
          className={styles["cta-button"]}
        >
          {l10n.getString("holiday-promo-banner-cta-button")}
        </Link>
        <small className={styles["promo-code-expiry"]}>
          {l10n.getString("holiday-promo-banner-promo-expiry")}
        </small>
      </div>
    </aside>
  );
};

1	import Link from "next/link";	7✔
2	import { useRouter } from "next/router";	7✔
3	import { useL10n } from "../../../hooks/l10n";	7✔
4	import { Localized } from "../../Localized";	7✔
5	import styles from "./HolidayPromoBanner.module.scss";	7✔
6	import { RuntimeData } from "../../../hooks/api/types";
7	import {
8	getPeriodicalPremiumSubscribeLink,
9	isPeriodicalPremiumAvailableInCountry,
10	} from "../../../functions/getPlan";	7✔
11	import { ProfileData } from "../../../hooks/api/profile";
12	import { useGaEvent } from "../../../hooks/gaEvent";	7✔
13	import { useGaViewPing } from "../../../hooks/gaViewPing";	7✔
14	import { useUtmApplier } from "../../../hooks/utmApplier";	7✔
15
16	type Props = {
17	isLoading: boolean;
18	profile?: ProfileData;
19	runtimeData?: RuntimeData;
20	};
21
22	export const HolidayPromoBanner = (props: Props) => {	7✔
23	const l10n = useL10n();	×
24	const gaEvent = useGaEvent();	×
25	const router = useRouter();	×
26	const coupon = "HOLIDAY20";	×
NEW 27	const applyUtmParams = useUtmApplier();	×
UNCOV 28	const subscribeLink = isPeriodicalPremiumAvailableInCountry(props.runtimeData)	×
29	? applyUtmParams(
30	getPeriodicalPremiumSubscribeLink(props.runtimeData, "yearly"),
31	)
32	: null;
33	const todaysDate = new Date();	×
34	const expiryDate = new Date("December 31, 2023");	×
35	const isPastExpiry = todaysDate > expiryDate;	×
36	const gaHolidayBannerViewPing = useGaViewPing({	×
37	category: "Holiday Promotion Banner 2023",
38	label: "holiday-promo-banner-view",
39	});
40	const gaHolidayBannerBtnPing = () => {	×
41	gaEvent({	×
42	category: "Holiday Promotion Banner 2023",
43	action: "Engage",
44	label: "holiday-promo-banner-get-one-year-btn",
45	});
46	};
47
48	if (	×
49	props.isLoading \|\|	×
50	!subscribeLink \|\|
51	(props.profile && router.pathname !== "/premium") \|\|
52	isPastExpiry
53	) {
54	return null;	×
55	}
56
57	const utmParams =
58	"&utm_source=fx-relay&utm_medium=banner&utm_content=holiday-promo-banner-cta&utm_campaign=relay-holiday-promo-2023";	×
59	const subscriberLinkWithCoupon = `${subscribeLink}&coupon=${coupon}${utmParams}`;	×
60
61	return (
62	<aside className={styles.wrapper}>
63	<div className={styles["left-promo-container"]}>
64	<div className={styles["promo-container"]}>
65	<p className={styles["promo-text"]}>
66	{l10n.getString("holiday-promo-banner-protect-inbox")}
67	</p>
68	<p className={styles["promo-text-bolded"]}>
69	{l10n.getString("holiday-promo-banner-code-desc")}
70	</p>
71	</div>
72	<div className={styles["promo-container"]}>
73	<Localized
74	id="holiday-promo-banner-code-usage"
75	vars={{ couponCode: coupon }}
76	elems={{
77	coupon: <span className={styles["promo-text-bolded"]} />,
78	}}
79	>
80	<p className={styles["promo-text"]} />
81	</Localized>
82	</div>
83	</div>
84	<div className={styles["promo-container"]}>
85	<Link
86	ref={gaHolidayBannerViewPing}
87	onClick={gaHolidayBannerBtnPing}
88	href={subscriberLinkWithCoupon}
89	className={styles["cta-button"]}
90	>
91	{l10n.getString("holiday-promo-banner-cta-button")}
92	</Link>
93	<small className={styles["promo-code-expiry"]}>
94	{l10n.getString("holiday-promo-banner-promo-expiry")}
95	</small>
96	</div>
97	</aside>
98	);
99	};

mozilla / fx-private-relay / f7bc8e83-3560-4369-be54-50d9795958aa

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous