• Home
  • Features
  • Pricing
  • Docs
  • Announcements
  • Sign In

mozilla / fx-private-relay / edc11f91-0cdc-45a9-a192-e18d39c83ddf

05 May 2025 03:51PM CUT coverage: 85.253% (+0.001%) from 85.252%
edc11f91-0cdc-45a9-a192-e18d39c83ddf

Pull #5546

circleci

vpremamozilla
MPP-4160-modify-popup-banner-4-mask
Pull Request #5546: MPP-4160: Modify Popup Banner - 4 Mask Limit

2468 of 3605 branches covered (68.46%)

Branch coverage included in aggregate %.

1 of 1 new or added line in 1 file covered. (100.0%)

2 existing lines in 1 file now uncovered.

17321 of 19607 relevant lines covered (88.34%)

9.7 hits per line

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

81.82
/frontend/src/components/dashboard/CornerNotification.tsx
1
import { useInView } from "react-intersection-observer";
1✔
2
import styles from "./CornerNotification.module.scss";
1✔
3
import { CloseIcon } from "../Icons";
1✔
4
import Image from "../Image";
1✔
5
import { ProfileData } from "../../hooks/api/profile";
6
import { useLocalDismissal } from "../../hooks/localDismissal";
1✔
7
import UpsellBannerNonUs from "../../pages/accounts/images/upsell-banner-nonus.svg";
1✔
8
import UpsellBannerUs from "../../pages/accounts/images/upsell-banner-us.svg";
1✔
9
import { useGaViewPing } from "../../hooks/gaViewPing";
1✔
10
import { RuntimeData } from "../../hooks/api/runtimeData";
11
import { isFlagActive } from "../../functions/waffle";
1✔
12
import { useGaEvent } from "../../hooks/gaEvent";
1✔
13
import { useL10n } from "../../hooks/l10n";
1✔
14
import { LinkButton } from "../Button";
1✔
15
import { isPhonesAvailableInCountry } from "../../functions/getPlan";
1✔
16
import { AliasData } from "../../hooks/api/aliases";
17

18
export type Props = {
19
  profile: ProfileData;
20
  runtimeData: RuntimeData;
21
  aliases: AliasData[];
22
};
23

24
export const CornerNotification = (props: Props) => {
45✔
25
  const l10n = useL10n();
45✔
26
  const [wrapperRef, wrapperIsInView] = useInView({ threshold: 1 });
45✔
27
  const runtimeData = props.runtimeData;
45✔
28
  const profile = props.profile;
45✔
29
  const dismissal = useLocalDismissal(
45✔
30
    `corner_notification_masks_upsell_${props.profile.id}`,
31
  );
32
  const isPhonesAvailable = isPhonesAvailableInCountry(runtimeData);
45✔
33
  const aliases = props.aliases;
45✔
34
  const ctaRef = useGaViewPing({
45✔
35
    category: "Purchase Button",
36
    label: "4-mask-limit-upsell",
37
  });
38
  const gaEvent = useGaEvent();
45✔
39

40
  const region = isPhonesAvailable ? "us" : "non-us";
45✔
41
  const suffix = isPhonesAvailable ? "-2" : "";
45✔
42

43
  const title = l10n.getString(
45✔
44
    `upsell-banner-4-masks-${region}-heading${suffix}`,
45
  );
46
  const description = l10n.getString(
45✔
47
    `upsell-banner-4-masks-${region}-description${suffix}`,
48
  );
49

50
  const illustration = isPhonesAvailable ? UpsellBannerUs : UpsellBannerNonUs;
45✔
51

52
  if (
45!
53
    isFlagActive(runtimeData, "four_mask_limit_upsell") &&
45!
54
    !profile.has_premium &&
55
    !dismissal.isDismissed &&
56
    aliases.length === 4
57
  ) {
58
    return (
59
      <aside
60
        ref={wrapperRef}
61
        aria-label={title}
62
        className={`${styles.wrapper} ${
63
          wrapperIsInView ? styles["is-in-view"] : styles["is-out-of-view"]
×
64
        }`}
65
      >
66
        <div className={styles.card}>
67
          <div className={styles["card-header"]}>
68
            <button
69
              className={styles["close-button"]}
UNCOV
70
              onClick={() => dismissal.dismiss()}
×
71
            >
72
              <CloseIcon
73
                alt={l10n.getString("upsell-banner-4-masks-button-close-label")}
74
                width={20}
75
                height={20}
76
              />
77
            </button>
78
            <Image src={illustration} alt="" />
79
          </div>
80
          <div className={styles["card-content"]}>
81
            <p className={styles["card-title"]}>{title}</p>
82
            <p className={styles["card-description"]}>{description}</p>
83
            <LinkButton
84
              className={styles["card-cta"]}
85
              href="/premium#pricing"
86
              ref={ctaRef}
87
              onClick={() => {
UNCOV
88
                gaEvent({
×
89
                  category: "Purchase Button",
90
                  action: "Engage",
91
                  label: "4-mask-limit-upsell",
92
                });
93
              }}
94
            >
95
              {l10n.getString("upsell-banner-4-masks-us-cta")}
96
            </LinkButton>
97
          </div>
98
        </div>
99
      </aside>
100
    );
101
  }
102
};
STATUS · Troubleshooting · Open an Issue · Sales · Support · CAREERS · ENTERPRISE · START FREE · SCHEDULE DEMO
ANNOUNCEMENTS · TWITTER · TOS & SLA · Supported CI Services · What's a CI service? · Automated Testing

© 2025 Coveralls, Inc