34266847-098a-4560-870b-f2e195c8fb5f

Committed 27 Nov 2023 11:41PM UTC coverage: 73.558% (-0.04%) from 73.598%

Build # 34266847-098a-4560-870b-f2e195c8fb5f

Build Type

push

circleci

Committed by

web-flow

Commit Message

Merge pull request #4165 from mozilla/holiday-banner-ga-ping

Holiday promo banner ga ping and UTM params

Run Details

1961 of 2905 branches covered (0.0%)

Branch coverage included in aggregate %.

2 of 7 new or added lines in 1 file covered. (28.57%)

1 existing line in 1 file now uncovered.

6254 of 8263 relevant lines covered (75.69%)

19.68 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 { useL10n } from "../../../hooks/l10n";
import { Localized } from "../../Localized";
import styles from "./HolidayPromoBanner.module.scss";
import { RuntimeData } from "../../../hooks/api/runtimeData";
import {
  getPeriodicalPremiumSubscribeLink,
  isPeriodicalPremiumAvailableInCountry,
} from "../../../functions/getPlan";
import { ProfileData } from "../../../hooks/api/profile";
import { event as gaEvent } from "react-ga";
import { useGaViewPing } from "../../../hooks/gaViewPing";

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

export const HolidayPromoBanner = (props: Props) => {
  const l10n = useL10n();
  const coupon = "HOLIDAY20";
  const subscribeLink = isPeriodicalPremiumAvailableInCountry(props.runtimeData)
    ? 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 || isPastExpiry) {
    return null;
  }

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

mozilla / fx-private-relay / 34266847-098a-4560-870b-f2e195c8fb5f

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