ad545982-969e-4b90-a26a-9546035a3425

Committed 27 Oct 2023 06:13PM UTC coverage: 74.155% (-0.6%) from 74.769%

Build # ad545982-969e-4b90-a26a-9546035a3425

Build Type

push

circleci

Committed by

web-flow

Commit Message

Merge pull request #3961 from mozilla/MPP-3443

MPP-3443 & MPP-3444 - Free user onboarding experience

Run Details

1949 of 2847 branches covered (0.0%)

Branch coverage included in aggregate %.

141 of 141 new or added lines in 7 files covered. (100.0%)

6191 of 8130 relevant lines covered (76.15%)

18.39 hits per line

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

64.76

/frontend/src/components/dashboard/aliases/MaskCard.tsx

import {
  createContext,
  ReactElement,
  ReactNode,
  useContext,
  useId,
  useRef,
  useState,
} from "react";
import {
  RadioGroupProps,
  RadioGroupState,
  useRadioGroupState,
  useToggleState,
} from "react-stately";
import {
  AriaRadioGroupProps,
  AriaRadioProps,
  useFocusRing,
  useRadio,
  useRadioGroup,
  useToggleButton,
} from "react-aria";
import Link from "next/link";
import Image from "next/image";
import styles from "./MaskCard.module.scss";
import CalendarIcon from "./images/calendar.svg";
import EmailIcon from "./images/email.svg";
import {
  AliasData,
  isBlockingLevelOneTrackers,
} from "../../../hooks/api/aliases";
import { UserData } from "../../../hooks/api/user";
import { ProfileData } from "../../../hooks/api/profile";
import { RuntimeData } from "../../../hooks/api/runtimeData";
import { useL10n } from "../../../hooks/l10n";
import { LabelEditor } from "./LabelEditor";
import { ArrowDownIcon, CopyIcon, LockIcon } from "../../Icons";
import { getLocale } from "../../../functions/getLocale";
import { isFlagActive } from "../../../functions/waffle";
import { renderDate } from "../../../functions/renderDate";
import { AliasDeletionButton } from "./AliasDeletionButton";
import { VisuallyHidden } from "./../../VisuallyHidden";
import HorizontalArrow from "./../images/free-onboarding-horizontal-arrow.svg";

export type Props = {
  mask: AliasData;
  user: UserData;
  profile: ProfileData;
  onUpdate: (updatedFields: Partial<AliasData>) => void;
  onDelete: () => void;
  isOpen: boolean;
  onChangeOpen: (isOpen: boolean) => void;
  showLabelEditor?: boolean;
  runtimeData?: RuntimeData;
  placeholder?: string;
  isOnboarding?: boolean;
  children?: ReactNode;
};

export const MaskCard = (props: Props) => {
  const l10n = useL10n();
  const [justCopied, setJustCopied] = useState(false);
  const [promoIsSelected, setPromoIsSelectedState] = useState(false);

  const expandButtonRef = useRef<HTMLButtonElement>(null);
  const expandButtonState = useToggleState({
    isSelected: props.isOpen === true,
    onChange: props.onChangeOpen,
  });
  const expandButtonProps = useToggleButton(
    {},
    expandButtonState,
    expandButtonRef,
  ).buttonProps;
  // Used to link the expandButton to the area-to-be-expanded:
  const detailsElementId = useId();

  const copyAddressToClipboard = () => {
    navigator.clipboard.writeText(props.mask.full_address);
    setJustCopied(true);
    setTimeout(() => {
      setJustCopied(false);
    }, 1 * 1000);
  };

  const statNumberFormatter = new Intl.NumberFormat(getLocale(l10n), {
    notation: "compact",
    compactDisplay: "short",
  });

  const classNames = [
    styles.card,
    props.mask.enabled ? styles["is-enabled"] : styles["is-disabled"],
    props.mask.block_list_emails
      ? styles["is-blocking-promotionals"]
      : styles["is-not-blocking-promotionals"],
    isBlockingLevelOneTrackers(props.mask, props.profile)
      ? styles["is-removing-trackers"]
      : styles["is-not-removing-trackers"],
    props.isOnboarding ? styles["is-onboarding"] : "",
  ].join(" ");

  const blockLevel =
    props.mask.enabled === false
      ? "all"
      : props.mask.block_list_emails === true
      ? "promotionals"
      : "none";

  return (
    <>
      <div className={classNames}>
        <div className={styles.bar}>
          <div className={styles.summary}>
            {props.showLabelEditor && (
              <div className={styles["label-editor-wrapper"]}>
                <LabelEditor
                  label={props.mask.description}
                  placeholder={props.placeholder}
                  onSubmit={(newLabel) =>
                    props.onUpdate({ description: newLabel })
                  }
                />
              </div>
            )}
            <div className={styles["copy-button-wrapper"]}>
              <button
                className={styles["copy-button"]}
                title={l10n.getString("profile-label-click-to-copy")}
                aria-label={l10n.getString("profile-label-click-to-copy-alt", {
                  address: props.mask.full_address,
                })}
                onClick={copyAddressToClipboard}
              >
                <samp className={styles.address}>
                  {props.mask.full_address}
                </samp>
                <span className={styles["copy-icon"]}>
                  <CopyIcon alt="" />
                </span>
              </button>
              <span
                aria-hidden={!justCopied}
                className={styles["copied-confirmation"]}
              >
                {l10n.getString("profile-label-copied")}
              </span>
            </div>
            <div className={styles["block-level-label"]}>
              {props.mask.enabled === false
                ? l10n.getString("profile-promo-email-blocking-label-none")
                : props.mask.block_list_emails === true
                ? l10n.getString(
                    "profile-promo-email-blocking-label-promotionals",
                  )
                : null}
            </div>
          </div>
          <button
            {...expandButtonProps}
            ref={expandButtonRef}
            className={styles["expand-button"]}
            aria-expanded={expandButtonState.isSelected}
            aria-controls={detailsElementId}
          >
            <ArrowDownIcon
              alt={l10n.getString(
                expandButtonState.isSelected
                  ? "profile-details-collapse"
                  : "profile-details-expand",
              )}
              width={16}
              height={16}
            />
          </button>
        </div>
        <div
          id={detailsElementId}
          className={styles["details-wrapper"]}
          hidden={!expandButtonState.isSelected}
        >
          <div className={styles.details}>
            <dl className={styles.stats}>
              <div className={`${styles.stat} ${styles["blocked-stat"]}`}>
                <dt>{l10n.getString("profile-label-blocked")}</dt>
                <dd>{statNumberFormatter.format(props.mask.num_blocked)}</dd>
              </div>
              <div className={`${styles.stat} ${styles["forwarded-stat"]}`}>
                <dt>{l10n.getString("profile-label-forwarded")}</dt>
                <dd>{statNumberFormatter.format(props.mask.num_forwarded)}</dd>
              </div>
              {/* If user is not premium, hide the replies count */}
              {props.profile.has_premium && (
                <div className={`${styles.stat} ${styles["replies-stat"]}`}>
                  <dt>{l10n.getString("profile-label-replies")}</dt>
                  <dd>{statNumberFormatter.format(props.mask.num_replied)}</dd>
                </div>
              )}

              {/*
              If the back-end does not yet support providing tracker blocking stats,
              hide the blocked trackers count:
            */}
              {isFlagActive(props.runtimeData, "tracker_removal") &&
                typeof props.mask.num_level_one_trackers_blocked ===
                  "number" && (
                  <div
                    className={`${styles.stat} ${styles["trackers-removed-stat"]}`}
                  >
                    <dt>{l10n.getString("profile-label-trackers-removed")}</dt>
                    <dd>
                      {statNumberFormatter.format(
                        props.mask.num_level_one_trackers_blocked,
                      )}
                    </dd>
                  </div>
                )}
            </dl>
            <div
              className={`${styles["block-level"]} ${
                styles[`is-blocking-${blockLevel}`]
              }`}
            >
              {props.isOnboarding && props.isOpen && (
                <div className={styles["onboarding-alias-container"]}>
                  <Image src={HorizontalArrow} alt="" />
                  <div className={styles["onboarding-alias-text"]}>
                    <p>
                      {l10n.getString(
                        "profile-free-onboarding--copy-mask-what-emails-to-block",
                      )}
                    </p>
                  </div>
                </div>
              )}
              <div className={styles["block-level-setting"]}>
                <BlockLevelSegmentedControl
                  defaultValue={blockLevel}
                  onChange={(blockLevel) => {
                    if (blockLevel === "all") {
                      return props.onUpdate({ enabled: false });
                    }
                    if (blockLevel === "promotionals") {
                      return props.onUpdate({
                        enabled: true,
                        block_list_emails: true,
                      });
                    }
                    if (blockLevel === "none") {
                      return props.onUpdate({
                        enabled: true,
                        block_list_emails: false,
                      });
                    }
                  }}
                  label={l10n.getString("profile-promo-email-blocking-title")}
                >
                  <BlockLevelOption
                    value="none"
                    setPromoSelectedState={setPromoIsSelectedState}
                  >
                    {l10n.getString("profile-promo-email-blocking-option-none")}
                  </BlockLevelOption>
                  <BlockLevelOption
                    value="promotionals"
                    isDisabled={!props.profile.has_premium}
                    title={l10n.getString(
                      "profile-promo-email-blocking-description-promotionals-locked-label",
                    )}
                    isPromo={true}
                    promoSelectedState={promoIsSelected}
                    setPromoSelectedState={setPromoIsSelectedState}
                  >
                    {!props.profile.has_premium && (
                      <LockIcon
                        alt={l10n.getString(
                          "profile-promo-email-blocking-description-promotionals-locked-label",
                        )}
                      />
                    )}
                    {l10n.getString(
                      "profile-promo-email-blocking-option-promotions",
                    )}
                  </BlockLevelOption>
                  <BlockLevelOption
                    value="all"
                    setPromoSelectedState={setPromoIsSelectedState}
                  >
                    {l10n.getString("profile-promo-email-blocking-option-all")}
                  </BlockLevelOption>
                </BlockLevelSegmentedControl>
                {promoIsSelected && !props.profile.has_premium ? (
                  <div
                    className={styles["promotions-locked-description-wrapper"]}
                  >
                    <strong>
                      <LockIcon
                        alt={l10n.getString(
                          "profile-promo-email-blocking-description-promotionals-locked-label",
                        )}
                      />
                      {l10n.getString(
                        "profile-promo-email-blocking-description-promotionals-locked-label",
                      )}
                    </strong>
                    <p>
                      {l10n.getString(
                        "profile-promo-email-blocking-description-promotionals",
                      )}
                    </p>
                    <Link
                      href="/premium#pricing"
                      className={styles["upgrade-btn"]}
                    >
                      {l10n.getString("banner-pack-upgrade-cta")}
                    </Link>
                  </div>
                ) : null}
              </div>
              <div
                className={`${styles["block-level-setting-description"]}
              ${
                // Only add chevron on mobile for premium users
                promoIsSelected &&
                !props.profile.has_premium &&
                styles["without-chevron"]
              }`}
              >
                {blockLevel === "all" &&
                  l10n.getString(
                    "profile-promo-email-blocking-description-all-2",
                  )}
                {blockLevel === "promotionals" && (
                  <>
                    <p>
                      {l10n.getString(
                        "profile-promo-email-blocking-description-promotionals",
                      )}
                    </p>
                    <p>
                      <Link href="/faq#faq-promotional-email-blocking">
                        {l10n.getString(
                          "banner-label-data-notification-body-cta",
                        )}
                      </Link>
                    </p>
                  </>
                )}
                {blockLevel === "none" &&
                  l10n.getString(
                    "profile-promo-email-blocking-description-none-2",
                  )}
              </div>
            </div>
            <div className={styles.meta}>
              <dl>
                <div className={styles.metadata}>
                  <dt>{l10n.getString("profile-label-created")}</dt>
                  <dd>
                    <Image src={CalendarIcon} alt="" />
                    {renderDate(props.mask.created_at, l10n)}
                  </dd>
                </div>
                <div className={styles.metadata}>
                  <dt>{l10n.getString("profile-label-forward-emails")}</dt>
                  <dd>
                    <Image src={EmailIcon} alt="" />
                    {props.user.email}
                  </dd>
                </div>
              </dl>
              {!props.isOnboarding && (
                <div className={styles["deletion-button-wrapper"]}>
                  <AliasDeletionButton
                    onDelete={props.onDelete}
                    alias={props.mask}
                  />
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
      {props.isOnboarding && (
        <div
          className={
            styles[
              expandButtonState.isSelected
                ? "onboarding-open"
                : "onboarding-closed"
            ]
          }
        >
          {props.children}
        </div>
      )}
    </>
  );
};

const BlockLevelContext = createContext<RadioGroupState | null>(null);

/**
 * A "segmented control" (aka a switch with more than two options) used to set
 * the block level.
 */
const BlockLevelSegmentedControl = (
  props: { children: ReactElement[] } & RadioGroupProps &
    AriaRadioGroupProps &
    Required<Pick<AriaRadioGroupProps, "label">>,
) => {
  const state = useRadioGroupState(props);
  const { radioGroupProps, labelProps } = useRadioGroup(
    { orientation: "horizontal", ...props },
    state,
  );

  return (
    <div {...radioGroupProps} className={styles["block-level-control-wrapper"]}>
      <span {...labelProps} className={styles["block-level-control-label"]}>
        {props.label}
      </span>
      <div className={styles["block-level-segmented-control"]}>
        <BlockLevelContext.Provider value={state}>
          {props.children}
        </BlockLevelContext.Provider>
      </div>
    </div>
  );
};

const BlockLevelOption = (
  props: AriaRadioProps & {
    children: ReactNode;
    title?: string;
    isPromo?: boolean;
    promoSelectedState?: boolean;
    setPromoSelectedState: (promoSelectedState: boolean) => void;
  },
) => {
  const state = useContext(BlockLevelContext);
  const inputRef = useRef<HTMLInputElement>(null);
  // The `!` is safe here as long as <BlockLevelOption> is only used as a child
  // of <BlockLevelSwitch>, which sets the state in the context:
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  const { inputProps, isSelected } = useRadio(props, state!, inputRef);
  const { isFocusVisible, focusProps } = useFocusRing();

  return (
    <label
      className={`${isSelected ? styles["is-selected"] : ""} ${
        isFocusVisible ? styles["is-focused"] : ""
      } ${props.isDisabled ? styles["is-disabled"] : ""} ${
        props.promoSelectedState ? styles["promo-selected"] : ""
      }`}
      title={props.title}
      onClick={() =>
        props.isPromo
          ? props.setPromoSelectedState(!props.promoSelectedState)
          : props.setPromoSelectedState(false)
      }
    >
      <VisuallyHidden>
        <input {...inputProps} {...focusProps} ref={inputRef} />
      </VisuallyHidden>
      {props.children}
    </label>
  );
};

1	import {
2	createContext,
3	ReactElement,
4	ReactNode,
5	useContext,
6	useId,
7	useRef,
8	useState,
9	} from "react";	2✔
10	import {
11	RadioGroupProps,
12	RadioGroupState,
13	useRadioGroupState,
14	useToggleState,
15	} from "react-stately";	2✔
16	import {
17	AriaRadioGroupProps,
18	AriaRadioProps,
19	useFocusRing,
20	useRadio,
21	useRadioGroup,
22	useToggleButton,
23	} from "react-aria";	2✔
24	import Link from "next/link";	2✔
25	import Image from "next/image";	2✔
26	import styles from "./MaskCard.module.scss";	2✔
27	import CalendarIcon from "./images/calendar.svg";	2✔
28	import EmailIcon from "./images/email.svg";	2✔
29	import {
30	AliasData,
31	isBlockingLevelOneTrackers,
32	} from "../../../hooks/api/aliases";	2✔
33	import { UserData } from "../../../hooks/api/user";
34	import { ProfileData } from "../../../hooks/api/profile";
35	import { RuntimeData } from "../../../hooks/api/runtimeData";
36	import { useL10n } from "../../../hooks/l10n";	2✔
37	import { LabelEditor } from "./LabelEditor";	2✔
38	import { ArrowDownIcon, CopyIcon, LockIcon } from "../../Icons";	2✔
39	import { getLocale } from "../../../functions/getLocale";	2✔
40	import { isFlagActive } from "../../../functions/waffle";	2✔
41	import { renderDate } from "../../../functions/renderDate";	2✔
42	import { AliasDeletionButton } from "./AliasDeletionButton";	2✔
43	import { VisuallyHidden } from "./../../VisuallyHidden";	2✔
44	import HorizontalArrow from "./../images/free-onboarding-horizontal-arrow.svg";	2✔
45
46	export type Props = {
47	mask: AliasData;
48	user: UserData;
49	profile: ProfileData;
50	onUpdate: (updatedFields: Partial<AliasData>) => void;
51	onDelete: () => void;
52	isOpen: boolean;
53	onChangeOpen: (isOpen: boolean) => void;
54	showLabelEditor?: boolean;
55	runtimeData?: RuntimeData;
56	placeholder?: string;
57	isOnboarding?: boolean;
58	children?: ReactNode;
59	};
60
61	export const MaskCard = (props: Props) => {	2✔
62	const l10n = useL10n();	2✔
63	const [justCopied, setJustCopied] = useState(false);	2✔
64	const [promoIsSelected, setPromoIsSelectedState] = useState(false);	2✔
65
66	const expandButtonRef = useRef<HTMLButtonElement>(null);	2✔
67	const expandButtonState = useToggleState({	2✔
68	isSelected: props.isOpen === true,
69	onChange: props.onChangeOpen,
70	});
71	const expandButtonProps = useToggleButton(	2✔
72	{},
73	expandButtonState,
74	expandButtonRef,
75	).buttonProps;
76	// Used to link the expandButton to the area-to-be-expanded:
77	const detailsElementId = useId();	2✔
78
79	const copyAddressToClipboard = () => {	2✔
80	navigator.clipboard.writeText(props.mask.full_address);	×
81	setJustCopied(true);	×
82	setTimeout(() => {	×
83	setJustCopied(false);	×
84	}, 1 * 1000);
85	};
86
87	const statNumberFormatter = new Intl.NumberFormat(getLocale(l10n), {	2✔
88	notation: "compact",
89	compactDisplay: "short",
90	});
91
92	const classNames = [	2✔
93	styles.card,
94	props.mask.enabled ? styles["is-enabled"] : styles["is-disabled"],	2!
95	props.mask.block_list_emails	2!
96	? styles["is-blocking-promotionals"]
97	: styles["is-not-blocking-promotionals"],
98	isBlockingLevelOneTrackers(props.mask, props.profile)	2!
99	? styles["is-removing-trackers"]
100	: styles["is-not-removing-trackers"],
101	props.isOnboarding ? styles["is-onboarding"] : "",	2!
102	].join(" ");
103
104	const blockLevel =
105	props.mask.enabled === false	2!
106	? "all"
107	: props.mask.block_list_emails === true	2!
108	? "promotionals"
109	: "none";
110
111	return (
112	<>
113	<div className={classNames}>
114	<div className={styles.bar}>
115	<div className={styles.summary}>
116	{props.showLabelEditor && (	2✔
117	<div className={styles["label-editor-wrapper"]}>
118	<LabelEditor
119	label={props.mask.description}
120	placeholder={props.placeholder}
121	onSubmit={(newLabel) =>
122	props.onUpdate({ description: newLabel })	×
123	}
124	/>
125	</div>
126	)}
127	<div className={styles["copy-button-wrapper"]}>
128	<button
129	className={styles["copy-button"]}
130	title={l10n.getString("profile-label-click-to-copy")}
131	aria-label={l10n.getString("profile-label-click-to-copy-alt", {
132	address: props.mask.full_address,
133	})}
134	onClick={copyAddressToClipboard}
135	>
136	<samp className={styles.address}>
137	{props.mask.full_address}
138	</samp>
139	<span className={styles["copy-icon"]}>
140	<CopyIcon alt="" />
141	</span>
142	</button>
143	<span
144	aria-hidden={!justCopied}
145	className={styles["copied-confirmation"]}
146	>
147	{l10n.getString("profile-label-copied")}
148	</span>
149	</div>
150	<div className={styles["block-level-label"]}>
151	{props.mask.enabled === false	2!
152	? l10n.getString("profile-promo-email-blocking-label-none")
153	: props.mask.block_list_emails === true	2!
154	? l10n.getString(
155	"profile-promo-email-blocking-label-promotionals",
156	)
157	: null}
158	</div>
159	</div>
160	<button
161	{...expandButtonProps}
162	ref={expandButtonRef}
163	className={styles["expand-button"]}
164	aria-expanded={expandButtonState.isSelected}
165	aria-controls={detailsElementId}
166	>
167	<ArrowDownIcon
168	alt={l10n.getString(
169	expandButtonState.isSelected	2!
170	? "profile-details-collapse"
171	: "profile-details-expand",
172	)}
173	width={16}
174	height={16}
175	/>
176	</button>
177	</div>
178	<div
179	id={detailsElementId}
180	className={styles["details-wrapper"]}
181	hidden={!expandButtonState.isSelected}
182	>
183	<div className={styles.details}>
184	<dl className={styles.stats}>
185	<div className={`${styles.stat} ${styles["blocked-stat"]}`}>
186	<dt>{l10n.getString("profile-label-blocked")}</dt>
187	<dd>{statNumberFormatter.format(props.mask.num_blocked)}</dd>
188	</div>
189	<div className={`${styles.stat} ${styles["forwarded-stat"]}`}>
190	<dt>{l10n.getString("profile-label-forwarded")}</dt>
191	<dd>{statNumberFormatter.format(props.mask.num_forwarded)}</dd>
192	</div>
193	{/* If user is not premium, hide the replies count */}
194	{props.profile.has_premium && (	2✔
195	<div className={`${styles.stat} ${styles["replies-stat"]}`}>
196	<dt>{l10n.getString("profile-label-replies")}</dt>
197	<dd>{statNumberFormatter.format(props.mask.num_replied)}</dd>
198	</div>
199	)}
200
201	{/*
202	If the back-end does not yet support providing tracker blocking stats,
203	hide the blocked trackers count:
204	*/}
205	{isFlagActive(props.runtimeData, "tracker_removal") &&	2!
206	typeof props.mask.num_level_one_trackers_blocked ===
207	"number" && (
208	<div
209	className={`${styles.stat} ${styles["trackers-removed-stat"]}`}
210	>
211	<dt>{l10n.getString("profile-label-trackers-removed")}</dt>
212	<dd>
213	{statNumberFormatter.format(
214	props.mask.num_level_one_trackers_blocked,
215	)}
216	</dd>
217	</div>
218	)}
219	</dl>
220	<div
221	className={`${styles["block-level"]} ${
222	styles[`is-blocking-${blockLevel}`]
223	}`}
224	>
225	{props.isOnboarding && props.isOpen && (	2!
226	<div className={styles["onboarding-alias-container"]}>
227	<Image src={HorizontalArrow} alt="" />
228	<div className={styles["onboarding-alias-text"]}>
229	<p>
230	{l10n.getString(
231	"profile-free-onboarding--copy-mask-what-emails-to-block",
232	)}
233	</p>
234	</div>
235	</div>
236	)}
237	<div className={styles["block-level-setting"]}>
238	<BlockLevelSegmentedControl
239	defaultValue={blockLevel}
240	onChange={(blockLevel) => {
241	if (blockLevel === "all") {	×
242	return props.onUpdate({ enabled: false });	×
243	}
244	if (blockLevel === "promotionals") {	×
245	return props.onUpdate({	×
246	enabled: true,
247	block_list_emails: true,
248	});
249	}
250	if (blockLevel === "none") {	×
251	return props.onUpdate({	×
252	enabled: true,
253	block_list_emails: false,
254	});
255	}
256	}}
257	label={l10n.getString("profile-promo-email-blocking-title")}
258	>
259	<BlockLevelOption
260	value="none"
261	setPromoSelectedState={setPromoIsSelectedState}
262	>
263	{l10n.getString("profile-promo-email-blocking-option-none")}
264	</BlockLevelOption>
265	<BlockLevelOption
266	value="promotionals"
267	isDisabled={!props.profile.has_premium}
268	title={l10n.getString(
269	"profile-promo-email-blocking-description-promotionals-locked-label",
270	)}
271	isPromo={true}
272	promoSelectedState={promoIsSelected}
273	setPromoSelectedState={setPromoIsSelectedState}
274	>
275	{!props.profile.has_premium && (	2✔
276	<LockIcon
277	alt={l10n.getString(
278	"profile-promo-email-blocking-description-promotionals-locked-label",
279	)}
280	/>
281	)}
282	{l10n.getString(
283	"profile-promo-email-blocking-option-promotions",
284	)}
285	</BlockLevelOption>
286	<BlockLevelOption
287	value="all"
288	setPromoSelectedState={setPromoIsSelectedState}
289	>
290	{l10n.getString("profile-promo-email-blocking-option-all")}
291	</BlockLevelOption>
292	</BlockLevelSegmentedControl>
293	{promoIsSelected && !props.profile.has_premium ? (	4!
294	<div
295	className={styles["promotions-locked-description-wrapper"]}
296	>
297	<strong>
298	<LockIcon
299	alt={l10n.getString(
300	"profile-promo-email-blocking-description-promotionals-locked-label",
301	)}
302	/>
303	{l10n.getString(
304	"profile-promo-email-blocking-description-promotionals-locked-label",
305	)}
306	</strong>
307	<p>
308	{l10n.getString(
309	"profile-promo-email-blocking-description-promotionals",
310	)}
311	</p>
312	<Link
313	href="/premium#pricing"
314	className={styles["upgrade-btn"]}
315	>
316	{l10n.getString("banner-pack-upgrade-cta")}
317	</Link>
318	</div>
319	) : null}
320	</div>
321	<div
322	className={`${styles["block-level-setting-description"]}
323	${
324	// Only add chevron on mobile for premium users
325	promoIsSelected &&	2!
326	!props.profile.has_premium &&
327	styles["without-chevron"]
328	}`}
329	>
330	{blockLevel === "all" &&	2!
331	l10n.getString(
332	"profile-promo-email-blocking-description-all-2",
333	)}
334	{blockLevel === "promotionals" && (	2✔
335	<>
336	<p>
337	{l10n.getString(
338	"profile-promo-email-blocking-description-promotionals",
339	)}
340	</p>
341	<p>
342	<Link href="/faq#faq-promotional-email-blocking">
343	{l10n.getString(
344	"banner-label-data-notification-body-cta",
345	)}
346	</Link>
347	</p>
348	</>
349	)}
350	{blockLevel === "none" &&	4✔
351	l10n.getString(
352	"profile-promo-email-blocking-description-none-2",
353	)}
354	</div>
355	</div>
356	<div className={styles.meta}>
357	<dl>
358	<div className={styles.metadata}>
359	<dt>{l10n.getString("profile-label-created")}</dt>
360	<dd>
361	<Image src={CalendarIcon} alt="" />
362	{renderDate(props.mask.created_at, l10n)}
363	</dd>
364	</div>
365	<div className={styles.metadata}>
366	<dt>{l10n.getString("profile-label-forward-emails")}</dt>
367	<dd>
368	<Image src={EmailIcon} alt="" />
369	{props.user.email}
370	</dd>
371	</div>
372	</dl>
373	{!props.isOnboarding && (	2✔
374	<div className={styles["deletion-button-wrapper"]}>
375	<AliasDeletionButton
376	onDelete={props.onDelete}
377	alias={props.mask}
378	/>
379	</div>
380	)}
381	</div>
382	</div>
383	</div>
384	</div>
385	{props.isOnboarding && (	2✔
386	<div
387	className={
388	styles[
389	expandButtonState.isSelected	×
390	? "onboarding-open"
391	: "onboarding-closed"
392	]
393	}
394	>
395	{props.children}
396	</div>
397	)}
398	</>
399	);
400	};
401
402	const BlockLevelContext = createContext<RadioGroupState \| null>(null);	2✔
403
404	/**
405	* A "segmented control" (aka a switch with more than two options) used to set
406	* the block level.
407	*/
408	const BlockLevelSegmentedControl = (	2✔
409	props: { children: ReactElement[] } & RadioGroupProps &
410	AriaRadioGroupProps &
411	Required<Pick<AriaRadioGroupProps, "label">>,
412	) => {
413	const state = useRadioGroupState(props);	4✔
414	const { radioGroupProps, labelProps } = useRadioGroup(	4✔
415	{ orientation: "horizontal", ...props },
416	state,
417	);
418
419	return (
420	<div {...radioGroupProps} className={styles["block-level-control-wrapper"]}>
421	<span {...labelProps} className={styles["block-level-control-label"]}>
422	{props.label}
423	</span>
424	<div className={styles["block-level-segmented-control"]}>
425	<BlockLevelContext.Provider value={state}>
426	{props.children}
427	</BlockLevelContext.Provider>
428	</div>
429	</div>
430	);
431	};
432
433	const BlockLevelOption = (	2✔
434	props: AriaRadioProps & {
435	children: ReactNode;
436	title?: string;
437	isPromo?: boolean;
438	promoSelectedState?: boolean;
439	setPromoSelectedState: (promoSelectedState: boolean) => void;
440	},
441	) => {
442	const state = useContext(BlockLevelContext);	12✔
443	const inputRef = useRef<HTMLInputElement>(null);	12✔
444	// The `!` is safe here as long as <BlockLevelOption> is only used as a child
445	// of <BlockLevelSwitch>, which sets the state in the context:
446	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
447	const { inputProps, isSelected } = useRadio(props, state!, inputRef);	12✔
448	const { isFocusVisible, focusProps } = useFocusRing();	12✔
449
450	return (
451	<label
452	className={`${isSelected ? styles["is-selected"] : ""} ${	12✔
453	isFocusVisible ? styles["is-focused"] : ""	12!
454	} ${props.isDisabled ? styles["is-disabled"] : ""} ${	12✔
455	props.promoSelectedState ? styles["promo-selected"] : ""	12!
456	}`}
457	title={props.title}
458	onClick={() =>
459	props.isPromo	×
460	? props.setPromoSelectedState(!props.promoSelectedState)
461	: props.setPromoSelectedState(false)
462	}
463	>
464	<VisuallyHidden>
465	<input {...inputProps} {...focusProps} ref={inputRef} />
466	</VisuallyHidden>
467	{props.children}
468	</label>
469	);
470	};

mozilla / fx-private-relay / ad545982-969e-4b90-a26a-9546035a3425

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