e6596aaf-157d-4581-acf2-f4e4f97a1130

Committed 21 Sep 2023 08:17PM CUT coverage: 74.433% (-0.1%) from 74.552%

Build # e6596aaf-157d-4581-acf2-f4e4f97a1130

Build Type

push

circleci

Committed by

web-flow

Commit Message

Merge pull request #3907 from mozilla/fix-ga-events-MPP-3422

Fix ga events mpp 3422

Run Details

1895 of 2761 branches covered (0.0%)

Branch coverage included in aggregate %.

21 of 21 new or added lines in 5 files covered. (100.0%)

5977 of 7815 relevant lines covered (76.48%)

18.39 hits per line

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

47.83

/frontend/src/components/dashboard/PremiumPromoBanners.tsx

import { ReactNode } from "react";
import { event as gaEvent } from "react-ga";

import Image from "next/image";
import styles from "./ProfileBanners.module.scss";
import PhoneIllustration from "./images/phone-premium-promo.svg";
import { Banner } from "../Banner";
import { useL10n } from "../../hooks/l10n";

export type Props = {
  showFirstPremiumBanner?: boolean;
};

export const PremiumPromoBanners = (props: Props) => {
  const banners: ReactNode[] = [];

  // Only show the first banner while waiting for the A/B test architecture to be built out
  {
    props.showFirstPremiumBanner
      ? banners.push(<StopSpamBanner key="stop-spam-premium-banner" />)
      : null;
  }

  // TODO: Implement A/B architecture to following banners
  // banners.push(<StopSpamBanner key="stop-spam-premium-banner" />);
  //   banners.push(
  //     <AdvancedIdentityBanner key="advanced-identity-premium-banner" />
  //   );
  //   banners.push(
  //     <ControlReceiverBanner key="control-receiver-premium-banner" />
  //   );
  //   banners.push(
  //     <ExtraProtectionBanner key="extra-protection-premium-banner" />);

  return <div className={styles["profile-banners"]}>{banners}</div>;
};

const phoneImage = <Image src={PhoneIllustration} alt="" />;

const StopSpamBanner = () => {
  const l10n = useL10n();

  return (
    <Banner
      type="promo"
      title={l10n.getString("banner-ab-premium-promo-stop-spam-headline")}
      illustration={{
        img: phoneImage,
        type: "flex-end",
      }}
      cta={{
        size: "large",
        target: "/premium#pricing",
        content: l10n.getString("banner-ab-premium-promo-cta"),
        gaViewPing: {
          category: "Purchase button",
          label: "premium-promo-stop-spam",
        },
        onClick: () => {
          gaEvent({
            category: "Purchase button",
            action: "Engage",
            label: "premium-promo-stop-spam",
          });
        },
      }}
    >
      <p>{l10n.getString("banner-ab-premium-promo-stop-spam-body")}</p>
    </Banner>
  );
};

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const AdvancedIdentityBanner = () => {
  const l10n = useL10n();

  return (
    <Banner
      type="promo"
      title={l10n.getString(
        "banner-ab-premium-promo-advanced-identity-headline",
      )}
      illustration={{
        img: phoneImage,
        type: "flex-end",
      }}
      cta={{
        size: "large",
        target: "/premium#pricing",
        content: l10n.getString("banner-ab-premium-promo-cta"),
        gaViewPing: {
          category: "Purchase button",
          label: "premium-promo-advanced-identity",
        },
        onClick: () => {
          gaEvent({
            category: "Purchase button",
            action: "Engage",
            label: "premium-promo-advanced-identity",
          });
        },
      }}
    >
      <p>{l10n.getString("banner-ab-premium-promo-advanced-identity-body")}</p>
    </Banner>
  );
};

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const ControlReceiverBanner = () => {
  const l10n = useL10n();

  return (
    <Banner
      type="promo"
      title={l10n.getString(
        "banner-ab-premium-promo-control-receiver-headline",
      )}
      illustration={{
        img: phoneImage,
        type: "flex-end",
      }}
      cta={{
        size: "large",
        target: "/premium#pricing",
        content: l10n.getString("banner-ab-premium-promo-cta"),
        gaViewPing: {
          category: "Purchase button",
          label: "premium-promo-control-receiver",
        },
        onClick: () => {
          gaEvent({
            category: "Purchase button",
            action: "Engage",
            label: "premium-promo-control-receiver",
          });
        },
      }}
    >
      <p>{l10n.getString("banner-ab-premium-promo-control-receiver-body")}</p>
    </Banner>
  );
};

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const ExtraProtectionBanner = () => {
  const l10n = useL10n();

  return (
    <Banner
      type="promo"
      title={l10n.getString(
        "banner-ab-premium-promo-extra-protection-headline",
      )}
      illustration={{
        img: phoneImage,
        type: "flex-end",
      }}
      cta={{
        size: "large",
        target: "/premium#pricing",
        content: l10n.getString("banner-ab-premium-promo-cta"),
        gaViewPing: {
          category: "Purchase button",
          label: "premium-promo-extra-protection",
        },
        onClick: () => {
          gaEvent({
            category: "Purchase button",
            action: "Engage",
            label: "premium-promo-extra-protection",
          });
        },
      }}
    >
      <p>{l10n.getString("banner-ab-premium-promo-extra-protection-body")}</p>
    </Banner>
  );
};

1	import { ReactNode } from "react";
2	import { event as gaEvent } from "react-ga";	1✔
3
4	import Image from "next/image";	1✔
5	import styles from "./ProfileBanners.module.scss";	1✔
6	import PhoneIllustration from "./images/phone-premium-promo.svg";	1✔
7	import { Banner } from "../Banner";	1✔
8	import { useL10n } from "../../hooks/l10n";	1✔
9
10	export type Props = {
11	showFirstPremiumBanner?: boolean;
12	};
13
14	export const PremiumPromoBanners = (props: Props) => {	1✔
15	const banners: ReactNode[] = [];	×
16
17	// Only show the first banner while waiting for the A/B test architecture to be built out
18	{
19	props.showFirstPremiumBanner	×
20	? banners.push(<StopSpamBanner key="stop-spam-premium-banner" />)
21	: null;
22	}
23
24	// TODO: Implement A/B architecture to following banners
25	// banners.push(<StopSpamBanner key="stop-spam-premium-banner" />);
26	// banners.push(
27	// <AdvancedIdentityBanner key="advanced-identity-premium-banner" />
28	// );
29	// banners.push(
30	// <ControlReceiverBanner key="control-receiver-premium-banner" />
31	// );
32	// banners.push(
33	// <ExtraProtectionBanner key="extra-protection-premium-banner" />);
34
35	return <div className={styles["profile-banners"]}>{banners}</div>;
36	};
37
38	const phoneImage = <Image src={PhoneIllustration} alt="" />;
39
40	const StopSpamBanner = () => {	1✔
41	const l10n = useL10n();	×
42
43	return (
44	<Banner
45	type="promo"
46	title={l10n.getString("banner-ab-premium-promo-stop-spam-headline")}
47	illustration={{
48	img: phoneImage,
49	type: "flex-end",
50	}}
51	cta={{
52	size: "large",
53	target: "/premium#pricing",
54	content: l10n.getString("banner-ab-premium-promo-cta"),
55	gaViewPing: {
56	category: "Purchase button",
57	label: "premium-promo-stop-spam",
58	},
59	onClick: () => {
60	gaEvent({	×
61	category: "Purchase button",
62	action: "Engage",
63	label: "premium-promo-stop-spam",
64	});
65	},
66	}}
67	>
68	<p>{l10n.getString("banner-ab-premium-promo-stop-spam-body")}</p>
69	</Banner>
70	);
71	};
72
73	// eslint-disable-next-line @typescript-eslint/no-unused-vars
74	const AdvancedIdentityBanner = () => {	1✔
75	const l10n = useL10n();	×
76
77	return (
78	<Banner
79	type="promo"
80	title={l10n.getString(
81	"banner-ab-premium-promo-advanced-identity-headline",
82	)}
83	illustration={{
84	img: phoneImage,
85	type: "flex-end",
86	}}
87	cta={{
88	size: "large",
89	target: "/premium#pricing",
90	content: l10n.getString("banner-ab-premium-promo-cta"),
91	gaViewPing: {
92	category: "Purchase button",
93	label: "premium-promo-advanced-identity",
94	},
95	onClick: () => {
96	gaEvent({	×
97	category: "Purchase button",
98	action: "Engage",
99	label: "premium-promo-advanced-identity",
100	});
101	},
102	}}
103	>
104	<p>{l10n.getString("banner-ab-premium-promo-advanced-identity-body")}</p>
105	</Banner>
106	);
107	};
108
109	// eslint-disable-next-line @typescript-eslint/no-unused-vars
110	const ControlReceiverBanner = () => {	1✔
111	const l10n = useL10n();	×
112
113	return (
114	<Banner
115	type="promo"
116	title={l10n.getString(
117	"banner-ab-premium-promo-control-receiver-headline",
118	)}
119	illustration={{
120	img: phoneImage,
121	type: "flex-end",
122	}}
123	cta={{
124	size: "large",
125	target: "/premium#pricing",
126	content: l10n.getString("banner-ab-premium-promo-cta"),
127	gaViewPing: {
128	category: "Purchase button",
129	label: "premium-promo-control-receiver",
130	},
131	onClick: () => {
132	gaEvent({	×
133	category: "Purchase button",
134	action: "Engage",
135	label: "premium-promo-control-receiver",
136	});
137	},
138	}}
139	>
140	<p>{l10n.getString("banner-ab-premium-promo-control-receiver-body")}</p>
141	</Banner>
142	);
143	};
144
145	// eslint-disable-next-line @typescript-eslint/no-unused-vars
146	const ExtraProtectionBanner = () => {	1✔
147	const l10n = useL10n();	×
148
149	return (
150	<Banner
151	type="promo"
152	title={l10n.getString(
153	"banner-ab-premium-promo-extra-protection-headline",
154	)}
155	illustration={{
156	img: phoneImage,
157	type: "flex-end",
158	}}
159	cta={{
160	size: "large",
161	target: "/premium#pricing",
162	content: l10n.getString("banner-ab-premium-promo-cta"),
163	gaViewPing: {
164	category: "Purchase button",
165	label: "premium-promo-extra-protection",
166	},
167	onClick: () => {
168	gaEvent({	×
169	category: "Purchase button",
170	action: "Engage",
171	label: "premium-promo-extra-protection",
172	});
173	},
174	}}
175	>
176	<p>{l10n.getString("banner-ab-premium-promo-extra-protection-body")}</p>
177	</Banner>
178	);
179	};

mozilla / fx-private-relay / e6596aaf-157d-4581-acf2-f4e4f97a1130

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