b5c6db41-1e98-4d3a-aec1-adb2ca42baeb

Committed 08 Dec 2023 08:39PM UTC coverage: 73.56% (+0.03%) from 73.533%

Build # b5c6db41-1e98-4d3a-aec1-adb2ca42baeb

Build Type

push

circleci

Committed by

web-flow

Commit Message

Merge pull request #4204 from mozilla/add-holiday-promo-link-to-wrapped-email-header

 fix MPP-3633: add holiday promo link to wrapped_email.html

Run Details

1972 of 2923 branches covered (0.0%)

Branch coverage included in aggregate %.

16 of 19 new or added lines in 3 files covered. (84.21%)

1 existing line in 1 file now uncovered.

6277 of 8291 relevant lines covered (75.71%)

19.66 hits per line

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

29.03

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

mozilla / fx-private-relay / b5c6db41-1e98-4d3a-aec1-adb2ca42baeb

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