3f1a4922-6438-402b-8a31-b68b7edbe989

Build # 3f1a4922-6438-402b-8a31-b68b7edbe989

Build Type

push

circleci

Committed by GitHub Actions — l10n sync

Commit Message

Merge in latest l10n strings

Run Details

1561 of 2384 branches covered (65.48%)

Branch coverage included in aggregate %.

5107 of 6949 relevant lines covered (73.49%)

19.12 hits per line

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

92.0

/frontend/src/pages/premium.page.tsx

import { NextPage } from "next";
import { event as gaEvent } from "react-ga";
import styles from "./premium.module.scss";
import { Layout } from "../components/layout/Layout";
import { useGaViewPing } from "../hooks/gaViewPing";
import { LinkButton } from "../components/Button";
import { DemoPhone } from "../components/landing/DemoPhone";
import { useRuntimeData } from "../hooks/api/runtimeData";
import {
  isBundleAvailableInCountry,
  isPeriodicalPremiumAvailableInCountry,
} from "../functions/getPlan";
import { PlanMatrix } from "../components/landing/PlanMatrix";
import { BundleBanner } from "../components/landing/BundleBanner";
import { useFlaggedAnchorLinks } from "../hooks/flaggedAnchorLinks";
import { useL10n } from "../hooks/l10n";
import { Localized } from "../components/Localized";
import { HighlightedFeatures } from "../components/landing/HighlightedFeatures";

const PremiumPromo: NextPage = () => {
  const l10n = useL10n();
  const runtimeData = useRuntimeData();
  useFlaggedAnchorLinks([runtimeData.data]);
  const heroCtaRef = useGaViewPing({
    category: "Purchase Button",
    label: "premium-promo-cta",
  });

  const cta = isPeriodicalPremiumAvailableInCountry(runtimeData.data) ? (
    <LinkButton
      ref={heroCtaRef}
      href="#pricing"
      onClick={() => {
        gaEvent({
          category: "Purchase Button",
          action: "Engage",
          label: "home-hero-cta",
        });
      }}
    >
      {l10n.getString("premium-promo-hero-cta")}
    </LinkButton>
  ) : (
    <LinkButton
      href="/premium/waitlist"
      title={l10n.getString("premium-promo-availability-warning-2")}
    >
      {l10n.getString("waitlist-submit-label")}
    </LinkButton>
  );

  return (
    <Layout theme="premium" runtimeData={runtimeData.data}>
      <main>
        <section id="hero" className={styles.hero}>
          <div className={styles.lead}>
            <h2>{l10n.getString("premium-promo-hero-headline")}</h2>
            <Localized id="premium-promo-hero-body-3">
              <p />
            </Localized>
            {cta}
            <p>{l10n.getString("premium-promo-availability-warning-2")}</p>
          </div>
          <div className={styles["demo-phone"]}>
            <DemoPhone
              premium={isPeriodicalPremiumAvailableInCountry(runtimeData.data)}
            />
          </div>
        </section>

        {isBundleAvailableInCountry(runtimeData.data) && (
          <section id="vpn_promo" className={styles["bundle-banner-section"]}>
            <BundleBanner runtimeData={runtimeData.data} />
          </section>
        )}

        <section id="perks" className={styles["perks-wrapper"]}>
          <HighlightedFeatures />
        </section>

        <section className={styles["plans-wrapper"]}>
          <div className={styles.plans}>
            <PlanMatrix runtimeData={runtimeData.data} />
          </div>
        </section>
      </main>
    </Layout>
  );
};

export default PremiumPromo;

1	import { NextPage } from "next";
2	import { event as gaEvent } from "react-ga";	1✔
3	import styles from "./premium.module.scss";	1✔
4	import { Layout } from "../components/layout/Layout";	1✔
5	import { useGaViewPing } from "../hooks/gaViewPing";	1✔
6	import { LinkButton } from "../components/Button";	1✔
7	import { DemoPhone } from "../components/landing/DemoPhone";	1✔
8	import { useRuntimeData } from "../hooks/api/runtimeData";	1✔
9	import {
10	isBundleAvailableInCountry,
11	isPeriodicalPremiumAvailableInCountry,
12	} from "../functions/getPlan";	1✔
13	import { PlanMatrix } from "../components/landing/PlanMatrix";	1✔
14	import { BundleBanner } from "../components/landing/BundleBanner";	1✔
15	import { useFlaggedAnchorLinks } from "../hooks/flaggedAnchorLinks";	1✔
16	import { useL10n } from "../hooks/l10n";	1✔
17	import { Localized } from "../components/Localized";	1✔
18	import { HighlightedFeatures } from "../components/landing/HighlightedFeatures";	1✔
19
20	const PremiumPromo: NextPage = () => {	1✔
21	const l10n = useL10n();	1✔
22	const runtimeData = useRuntimeData();	1✔
23	useFlaggedAnchorLinks([runtimeData.data]);	1✔
24	const heroCtaRef = useGaViewPing({	1✔
25	category: "Purchase Button",
26	label: "premium-promo-cta",
27	});
28
29	const cta = isPeriodicalPremiumAvailableInCountry(runtimeData.data) ? (	1!
30	<LinkButton
31	ref={heroCtaRef}
32	href="#pricing"
33	onClick={() => {
34	gaEvent({	×
35	category: "Purchase Button",
36	action: "Engage",
37	label: "home-hero-cta",
38	});
39	}}
40	>
41	{l10n.getString("premium-promo-hero-cta")}
42	</LinkButton>
43	) : (
44	<LinkButton
45	href="/premium/waitlist"
46	title={l10n.getString("premium-promo-availability-warning-2")}
47	>
48	{l10n.getString("waitlist-submit-label")}
49	</LinkButton>
50	);
51
52	return (
53	<Layout theme="premium" runtimeData={runtimeData.data}>
54	<main>
55	<section id="hero" className={styles.hero}>
56	<div className={styles.lead}>
57	<h2>{l10n.getString("premium-promo-hero-headline")}</h2>
58	<Localized id="premium-promo-hero-body-3">
59	<p />
60	</Localized>
61	{cta}
62	<p>{l10n.getString("premium-promo-availability-warning-2")}</p>
63	</div>
64	<div className={styles["demo-phone"]}>
65	<DemoPhone
66	premium={isPeriodicalPremiumAvailableInCountry(runtimeData.data)}
67	/>
68	</div>
69	</section>
70
71	{isBundleAvailableInCountry(runtimeData.data) && (	1✔
72	<section id="vpn_promo" className={styles["bundle-banner-section"]}>
73	<BundleBanner runtimeData={runtimeData.data} />
74	</section>
75	)}
76
77	<section id="perks" className={styles["perks-wrapper"]}>
78	<HighlightedFeatures />
79	</section>
80
81	<section className={styles["plans-wrapper"]}>
82	<div className={styles.plans}>
83	<PlanMatrix runtimeData={runtimeData.data} />
84	</div>
85	</section>
86	</main>
87	</Layout>
88	);
89	};
90
91	export default PremiumPromo;	1✔

mozilla / fx-private-relay / 3f1a4922-6438-402b-8a31-b68b7edbe989

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