31ad0f6d-922d-4973-9081-ebaa187791e9

Committed 04 Dec 2023 06:37PM UTC coverage: 73.579% (-0.02%) from 73.596%

Build # 31ad0f6d-922d-4973-9081-ebaa187791e9

Build Type

Pull #4198

circleci

Committed by

lloan

Commit Message

fix linting issue

Pull Request Pull Request #4198: Free user onboarding changes from readiness meeting

Run Details

1970 of 2918 branches covered (0.0%)

Branch coverage included in aggregate %.

2 of 3 new or added lines in 2 files covered. (66.67%)

2 existing lines in 2 files now uncovered.

6262 of 8270 relevant lines covered (75.72%)

19.7 hits per line

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

31.76

/frontend/src/components/dashboard/FreeOnboarding.tsx

import styles from "./FreeOnboarding.module.scss";
import { ProfileData } from "../../hooks/api/profile";
import { VisuallyHidden } from "../VisuallyHidden";
import { getRuntimeConfig } from "../../config";
import { useL10n } from "../../hooks/l10n";
import WomanEmail from "./images/woman-email.svg";
import CheckMark from "./images/welcome-to-relay-check.svg";
import Plus from "./images/welcome-to-relay-plus.svg";
import Congratulations from "./images/free-onboarding-congratulations.svg";
import VerticalArrow from "./images/free-onboarding-vertical-arrow.svg";
import Emails from "./images/free-onboarding-emails.svg";
import WorkingMan from "./images/free-onboarding-work-anywhere.svg";
import Extension from "./images/free-onboarding-relay-extension.svg";
import SmallArrow from "./images/free-onboarding-arrow.svg";
import LargeArrow from "./images/free-onboarding-arrow-large.svg";
import Image from "next/image";
import { Button, LinkButton } from "../Button";
import { event as gaEvent } from "react-ga";
import { useGaViewPing } from "../../hooks/gaViewPing";
import { AliasData } from "../../hooks/api/aliases";
import { UserData } from "../../hooks/api/user";
import { RuntimeData } from "../../hooks/api/runtimeData";
import { EmailForwardingModal } from "./EmailForwardingModal";
import { useState } from "react";
import { supportsChromeExtension } from "../../functions/userAgent";
import { CheckBadgeIcon, ChevronRightIcon } from "../Icons";
import { AliasList } from "./aliases/AliasList";

export type Props = {
  profile: ProfileData;
  onNextStep: (step: number) => void;
  onPickSubdomain: (subdomain: string) => void;
  generateNewMask: () => void;
  hasReachedFreeMaskLimit: boolean;
  aliases: AliasData[];
  user: UserData;
  runtimeData?: RuntimeData;
  onUpdate: (alias: AliasData, updatedFields: Partial<AliasData>) => void;
};

/**
 * Shows the user how to take advantage of Premium features when they've just upgraded.
 */
export const FreeOnboarding = (props: Props) => {
  const l10n = useL10n();
  const [isModalOpen, setIsModalOpen] = useState(false);

  let step = null;
  let button = null;
  let skipButton = null;
  let next = null;

  // TODO: Add GA events - for view events and pings
  const skipStepOneButtonRef = useGaViewPing({
    category: "Free Onboarding",
    label: "free-onboarding-step-1-skip",
    value: 1,
  });

  const skipStepTwoButtonRef = useGaViewPing({
    category: "Free Onboarding",
    label: "free-onboarding-step-2-skip",
    value: 1,
  });

  const nextStepTwoButtonRef = useGaViewPing({
    category: "Free Onboarding",
    label: "free-onboarding-step-2-next",
    value: 1,
  });

  const skipStepThreeButtonRef = useGaViewPing({
    category: "Free Onboarding",
    label: "free-onboarding-step-3-skip",
    value: 1,
  });

  if (props.profile.onboarding_free_state === 0) {
    const skipMaskCreation = () => {
      props.onNextStep(3);
      gaEvent({
        category: "Free Onboarding",
        action: "Engage",
        label: "onboarding-step-1-skip",
        value: 1,
      });
    };

    const createNewMask = () => {
      props.generateNewMask();
      props.onNextStep(1);
      gaEvent({
        category: "Free Onboarding",
        action: "Engage",
        label: "onboarding-step-1-create-random-mask",
        value: 1,
      });
    };

    step = <StepOne />;

    skipButton = (
      <button
        ref={skipStepOneButtonRef}
        className={styles["skip-link"]}
        onClick={skipMaskCreation}
      >
        {l10n.getString("profile-free-onboarding-skip-step")}
      </button>
    );

    button = (
      <Button className={styles["generate-new-mask"]} onClick={createNewMask}>
        {l10n.getString("profile-free-onboarding-welcome-generate-new-mask")}
        <Image src={Plus} alt="" />
      </Button>
    );
  }

  if (props.profile.onboarding_free_state === 1) {
    const skipMaskTesting = () => {
      props.onNextStep(3);
      gaEvent({
        category: "Free Onboarding",
        action: "Engage",
        label: "onboarding-step-2-skip",
        value: 1,
      });
    };

    const nextStep = () => {
      props.onNextStep(2);
      gaEvent({
        category: "Free Onboarding",
        action: "Engage",
        label: "onboarding-step-2-next",
        value: 1,
      });
    };

    const forwardedEmail = () => {
      props.onNextStep(2);
      gaEvent({
        category: "Free Onboarding",
        action: "Engage",
        label: "onboarding-step-2-continue",
        value: 1,
      });
    };

    step = (
      <StepTwo
        aliases={props.aliases}
        profile={props.profile}
        user={props.user}
        runtimeData={props.runtimeData}
        continue={forwardedEmail}
        isModalOpen={isModalOpen}
        setIsModalOpen={setIsModalOpen}
        onUpdate={props.onUpdate}
      />
    );

    next = (
      <button
        ref={nextStepTwoButtonRef}
        className={styles["next-link"]}
        onClick={nextStep}
      >
        {l10n.getString("profile-free-onboarding-next-step")}
        <ChevronRightIcon className={styles.chevron} width={16} alt="" />
      </button>
    );

    button = (
      <Button
        className={styles["generate-new-mask"]}
        onClick={() => {
          setIsModalOpen(true);
        }}
      >
        {l10n.getString(
          "profile-free-onboarding-copy-mask-how-forwarding-works",
        )}
      </Button>
    );

    skipButton = (
      <button
        ref={skipStepTwoButtonRef}
        className={styles["skip-link"]}
        onClick={skipMaskTesting}
      >
        {l10n.getString("profile-free-onboarding-skip-step")}
      </button>
    );
  }

  if (props.profile.onboarding_free_state === 2) {
    const linkForBrowser = supportsChromeExtension()
      ? "https://chrome.google.com/webstore/detail/firefox-relay/lknpoadjjkjcmjhbjpcljdednccbldeb?utm_source=fx-relay&utm_medium=onboarding&utm_campaign=install-addon"
      : "https://addons.mozilla.org/firefox/addon/private-relay/";

    const skipAddonStep = () => {
      props.onNextStep(3);
      gaEvent({
        category: "Free Onboarding",
        action: "Engage",
        label: "onboarding-step-3-skip",
        value: 1,
      });
    };

    const finish = () => {
      // this will trigger confetti in the dashboard
      props.onNextStep(4);
      gaEvent({
        category: "Free Onboarding",
        action: "Engage",
        label: "onboarding-step-3-complete",
        value: 1,
      });
    };

    step = <StepThree />;

    next = (
      <button
        ref={nextStepTwoButtonRef}
        className={styles["next-link"]}
        onClick={finish}
      >
        {l10n.getString("profile-free-onboarding-addon-finish")}
        <ChevronRightIcon className={styles.chevron} width={16} alt="" />
      </button>
    );

    button = (
      <>
        <LinkButton
          href={linkForBrowser}
          target="_blank"
          className={`is-hidden-with-addon ${styles["get-addon-button"]}`}
        >
          {l10n.getString("profile-free-onboarding-addon-get-extension")}
        </LinkButton>
        <div className={`${styles["addon-description"]} is-visible-with-addon`}>
          <div className={styles["action-complete"]}>
            <CheckBadgeIcon alt="" width={18} height={18} />
            {l10n.getString("multi-part-onboarding-premium-extension-added")}
          </div>
        </div>
      </>
    );

    skipButton = (
      <button
        ref={skipStepThreeButtonRef}
        className={styles["skip-link"]}
        onClick={skipAddonStep}
      >
        {l10n.getString("profile-free-onboarding-skip-step")}
      </button>
    );
  }

  return (
    <section className={styles.onboarding}>
      {step}
      <div className={styles.controls}>
        {button}
        <div className={styles["progress-container"]}>
          <VisuallyHidden>
            <progress
              max={getRuntimeConfig().maxOnboardingAvailable}
              value={props.profile.onboarding_free_state + 1}
            >
              {l10n.getString("multi-part-onboarding-step-counter", {
                step: props.profile.onboarding_free_state,
                max: getRuntimeConfig().maxOnboardingAvailable,
              })}
            </progress>
          </VisuallyHidden>
          {next}
          <ol className={styles["styled-progress-bar"]} aria-hidden={true}>
            <li
              className={
                props.profile.onboarding_free_state >= 0
                  ? styles["is-completed"]
                  : undefined
              }
            >
              <span></span>1
            </li>
            <li
              className={
                props.profile.onboarding_free_state >= 1
                  ? styles["is-completed"]
                  : undefined
              }
            >
              <span></span>2
            </li>
            <li
              className={
                props.profile.onboarding_free_state >= 2
                  ? styles["is-completed"]
                  : undefined
              }
            >
              <span></span>3
            </li>
          </ol>
        </div>
        {skipButton}
      </div>
    </section>
  );
};

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

  return (
    <div className={`${styles.step} ${styles["step-welcome"]}`}>
      <div className={styles["welcome-header"]}>
        <h1>{l10n.getString("profile-free-onboarding-welcome-headline")}</h1>
        <p>{l10n.getString("profile-free-onboarding-welcome-description")}</p>
      </div>
      <div className={styles["content-wrapper"]}>
        <Image src={WomanEmail} alt="" width={475} />
        <div className={styles["content-text"]}>
          <div>
            <Image className={styles["hidden-mobile"]} src={CheckMark} alt="" />
            <p className={styles["headline"]}>
              {l10n.getString(
                "profile-free-onboarding-welcome-item-headline-1",
              )}
            </p>
            <p className={styles["description"]}>
              {l10n.getString(
                "profile-free-onboarding-welcome-item-description-1",
              )}
            </p>
          </div>
          <div>
            <p className={styles["headline"]}>
              {l10n.getString(
                "profile-free-onboarding-welcome-item-headline-2",
              )}
            </p>
            <p className={styles["description"]}>
              {l10n.getString(
                "profile-free-onboarding-welcome-item-description-2",
              )}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

type StepTwoProps = {
  aliases: AliasData[];
  profile: ProfileData;
  user: UserData;
  runtimeData?: RuntimeData;
  isModalOpen: boolean;
  setIsModalOpen: (isOpen: boolean) => void;
  continue: () => void;
  onUpdate: (alias: AliasData, updatedFields: Partial<AliasData>) => void;
};

const StepTwo = (props: StepTwoProps) => {
  const l10n = useL10n();
  const [isSet, setIsSet] = useState(false);

  return (
    <div className={`${styles.step} ${styles["step-copy-mask"]}`}>
      <EmailForwardingModal
        isOpen={props.isModalOpen}
        onClose={() => {
          props.setIsModalOpen(false);
        }}
        onComplete={() => {
          props.setIsModalOpen(false);
          props.continue();
        }}
        onConfirm={() => {
          setIsSet(true);
        }}
        isSet={isSet}
      />
      <div className={styles["copy-mask-header"]}>
        <h1>{l10n.getString("profile-free-onboarding-copy-mask-headline")}</h1>
        <p>{l10n.getString("profile-free-onboarding-copy-mask-description")}</p>
      </div>
      <div className={styles["content-wrapper-copy-mask"]}>
        <div className={styles["copy-mask-arrow-element"]}>
          <Image src={VerticalArrow} alt="" />
        </div>
        <AliasList
          aliases={props.aliases}
          onCreate={() => {}}
          onUpdate={props.onUpdate}
          onDelete={() => {}}
          profile={props.profile}
          user={props.user}
          runtimeData={props.runtimeData}
          onboarding={true}
        >
          <div className={styles["content-wrapper-copy-mask-items"]}>
            <div className={styles["content-item"]}>
              <Image src={Emails} alt="" />
              <div className={styles["content-text"]}>
                <p className={styles["headline"]}>
                  {l10n.getString(
                    "profile-free-onboarding-copy-mask-item-headline-1",
                  )}
                </p>
                <p className={styles["description"]}>
                  {l10n.getString(
                    "profile-free-onboarding-copy-mask-item-description-1",
                  )}
                </p>
              </div>
            </div>
            <hr />
            <div className={styles["content-item"]}>
              <Image src={Congratulations} alt="" />
              <div className={styles["content-text"]}>
                <p className={styles["headline"]}>
                  {l10n.getString(
                    "profile-free-onboarding-copy-mask-item-headline-2",
                  )}
                </p>
                <p className={styles["description"]}>
                  {l10n.getString(
                    "profile-free-onboarding-copy-mask-item-description-2",
                  )}
                </p>
              </div>
            </div>
          </div>
        </AliasList>
      </div>
    </div>
  );
};

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

  return (
    <div
      className={`${styles.step} ${styles["step-copy-mask"]} ${styles["mask-use"]}`}
    >
      <div className={styles["copy-mask-header"]}>
        <h1>{l10n.getString("profile-free-onboarding-addon-headline")}</h1>
        <p>{l10n.getString("profile-free-onboarding-addon-subheadline")}</p>
      </div>
      <div className={styles["addon-content-wrapper"]}>
        <div className={styles["addon-content-items"]}>
          <div className={styles["addon-content-text"]}>
            <p className={styles.headline}>
              {l10n.getString("profile-free-onboarding-addon-item-headline-1")}
            </p>
            <p className={styles.description}>
              {l10n.getString(
                "profile-free-onboarding-addon-item-description-1",
              )}
            </p>
            <Image className={styles["large-arrow"]} src={LargeArrow} alt="" />
          </div>
          <Image src={WorkingMan} alt="" />
        </div>

        <div className={styles["addon-content-items"]}>
          <Image src={Extension} alt="" />
          <div className={styles["addon-content-text"]}>
            <p className={styles.headline}>
              {l10n.getString("profile-free-onboarding-addon-item-headline-2")}
            </p>
            <p className={styles.description}>
              {l10n.getString(
                "profile-free-onboarding-addon-item-description-2",
              )}
            </p>
            <Image className={styles["small-arrow"]} src={SmallArrow} alt="" />
          </div>
        </div>
      </div>
    </div>
  );
};

1	import styles from "./FreeOnboarding.module.scss";	1✔
2	import { ProfileData } from "../../hooks/api/profile";
3	import { VisuallyHidden } from "../VisuallyHidden";	1✔
4	import { getRuntimeConfig } from "../../config";	1✔
5	import { useL10n } from "../../hooks/l10n";	1✔
6	import WomanEmail from "./images/woman-email.svg";	1✔
7	import CheckMark from "./images/welcome-to-relay-check.svg";	1✔
8	import Plus from "./images/welcome-to-relay-plus.svg";	1✔
9	import Congratulations from "./images/free-onboarding-congratulations.svg";	1✔
10	import VerticalArrow from "./images/free-onboarding-vertical-arrow.svg";	1✔
11	import Emails from "./images/free-onboarding-emails.svg";	1✔
12	import WorkingMan from "./images/free-onboarding-work-anywhere.svg";	1✔
13	import Extension from "./images/free-onboarding-relay-extension.svg";	1✔
14	import SmallArrow from "./images/free-onboarding-arrow.svg";	1✔
15	import LargeArrow from "./images/free-onboarding-arrow-large.svg";	1✔
16	import Image from "next/image";	1✔
17	import { Button, LinkButton } from "../Button";	1✔
18	import { event as gaEvent } from "react-ga";	1✔
19	import { useGaViewPing } from "../../hooks/gaViewPing";	1✔
20	import { AliasData } from "../../hooks/api/aliases";
21	import { UserData } from "../../hooks/api/user";
22	import { RuntimeData } from "../../hooks/api/runtimeData";
23	import { EmailForwardingModal } from "./EmailForwardingModal";	1✔
24	import { useState } from "react";	1✔
25	import { supportsChromeExtension } from "../../functions/userAgent";	1✔
26	import { CheckBadgeIcon, ChevronRightIcon } from "../Icons";	1✔
27	import { AliasList } from "./aliases/AliasList";	1✔
28
29	export type Props = {
30	profile: ProfileData;
31	onNextStep: (step: number) => void;
32	onPickSubdomain: (subdomain: string) => void;
33	generateNewMask: () => void;
34	hasReachedFreeMaskLimit: boolean;
35	aliases: AliasData[];
36	user: UserData;
37	runtimeData?: RuntimeData;
38	onUpdate: (alias: AliasData, updatedFields: Partial<AliasData>) => void;
39	};
40
41	/**
42	* Shows the user how to take advantage of Premium features when they've just upgraded.
43	*/
44	export const FreeOnboarding = (props: Props) => {	1✔
45	const l10n = useL10n();	×
46	const [isModalOpen, setIsModalOpen] = useState(false);	×
47
48	let step = null;	×
49	let button = null;	×
50	let skipButton = null;	×
51	let next = null;	×
52
53	// TODO: Add GA events - for view events and pings
54	const skipStepOneButtonRef = useGaViewPing({	×
55	category: "Free Onboarding",
56	label: "free-onboarding-step-1-skip",
57	value: 1,
58	});
59
60	const skipStepTwoButtonRef = useGaViewPing({	×
61	category: "Free Onboarding",
62	label: "free-onboarding-step-2-skip",
63	value: 1,
64	});
65
66	const nextStepTwoButtonRef = useGaViewPing({	×
67	category: "Free Onboarding",
68	label: "free-onboarding-step-2-next",
69	value: 1,
70	});
71
72	const skipStepThreeButtonRef = useGaViewPing({	×
73	category: "Free Onboarding",
74	label: "free-onboarding-step-3-skip",
75	value: 1,
76	});
77
78	if (props.profile.onboarding_free_state === 0) {	×
79	const skipMaskCreation = () => {	×
80	props.onNextStep(3);	×
81	gaEvent({	×
82	category: "Free Onboarding",
83	action: "Engage",
84	label: "onboarding-step-1-skip",
85	value: 1,
86	});
87	};
88
89	const createNewMask = () => {	×
90	props.generateNewMask();	×
91	props.onNextStep(1);	×
92	gaEvent({	×
93	category: "Free Onboarding",
94	action: "Engage",
95	label: "onboarding-step-1-create-random-mask",
96	value: 1,
97	});
98	};
99
100	step = <StepOne />;	×
101
102	skipButton = (
103	<button
104	ref={skipStepOneButtonRef}
105	className={styles["skip-link"]}
106	onClick={skipMaskCreation}
107	>
108	{l10n.getString("profile-free-onboarding-skip-step")}
109	</button>
110	);
111
112	button = (
113	<Button className={styles["generate-new-mask"]} onClick={createNewMask}>
114	{l10n.getString("profile-free-onboarding-welcome-generate-new-mask")}
115	<Image src={Plus} alt="" />
116	</Button>
117	);
118	}
119
120	if (props.profile.onboarding_free_state === 1) {	×
121	const skipMaskTesting = () => {	×
122	props.onNextStep(3);	×
123	gaEvent({	×
124	category: "Free Onboarding",
125	action: "Engage",
126	label: "onboarding-step-2-skip",
127	value: 1,
128	});
129	};
130
131	const nextStep = () => {	×
132	props.onNextStep(2);	×
133	gaEvent({	×
134	category: "Free Onboarding",
135	action: "Engage",
136	label: "onboarding-step-2-next",
137	value: 1,
138	});
139	};
140
141	const forwardedEmail = () => {	×
142	props.onNextStep(2);	×
143	gaEvent({	×
144	category: "Free Onboarding",
145	action: "Engage",
146	label: "onboarding-step-2-continue",
147	value: 1,
148	});
149	};
150
151	step = (
152	<StepTwo
153	aliases={props.aliases}
154	profile={props.profile}
155	user={props.user}
156	runtimeData={props.runtimeData}
157	continue={forwardedEmail}
158	isModalOpen={isModalOpen}
159	setIsModalOpen={setIsModalOpen}
160	onUpdate={props.onUpdate}
161	/>
162	);
163
164	next = (
165	<button
166	ref={nextStepTwoButtonRef}
167	className={styles["next-link"]}
168	onClick={nextStep}
169	>
170	{l10n.getString("profile-free-onboarding-next-step")}
171	<ChevronRightIcon className={styles.chevron} width={16} alt="" />
172	</button>
173	);
174
175	button = (
176	<Button
177	className={styles["generate-new-mask"]}
178	onClick={() => {
179	setIsModalOpen(true);	×
180	}}
181	>
182	{l10n.getString(
183	"profile-free-onboarding-copy-mask-how-forwarding-works",
184	)}
185	</Button>
186	);
187
188	skipButton = (
189	<button
190	ref={skipStepTwoButtonRef}
191	className={styles["skip-link"]}
192	onClick={skipMaskTesting}
193	>
194	{l10n.getString("profile-free-onboarding-skip-step")}
195	</button>
196	);
197	}
198
199	if (props.profile.onboarding_free_state === 2) {	×
200	const linkForBrowser = supportsChromeExtension()	×
201	? "https://chrome.google.com/webstore/detail/firefox-relay/lknpoadjjkjcmjhbjpcljdednccbldeb?utm_source=fx-relay&utm_medium=onboarding&utm_campaign=install-addon"
202	: "https://addons.mozilla.org/firefox/addon/private-relay/";
203
204	const skipAddonStep = () => {	×
205	props.onNextStep(3);	×
206	gaEvent({	×
207	category: "Free Onboarding",
208	action: "Engage",
209	label: "onboarding-step-3-skip",
210	value: 1,
211	});
212	};
213
214	const finish = () => {	×
215	// this will trigger confetti in the dashboard
NEW 216	props.onNextStep(4);	×
UNCOV 217	gaEvent({	×
218	category: "Free Onboarding",
219	action: "Engage",
220	label: "onboarding-step-3-complete",
221	value: 1,
222	});
223	};
224
225	step = <StepThree />;	×
226
227	next = (
228	<button
229	ref={nextStepTwoButtonRef}
230	className={styles["next-link"]}
231	onClick={finish}
232	>
233	{l10n.getString("profile-free-onboarding-addon-finish")}
234	<ChevronRightIcon className={styles.chevron} width={16} alt="" />
235	</button>
236	);
237
238	button = (
239	<>
240	<LinkButton
241	href={linkForBrowser}
242	target="_blank"
243	className={`is-hidden-with-addon ${styles["get-addon-button"]}`}
244	>
245	{l10n.getString("profile-free-onboarding-addon-get-extension")}
246	</LinkButton>
247	<div className={`${styles["addon-description"]} is-visible-with-addon`}>
248	<div className={styles["action-complete"]}>
249	<CheckBadgeIcon alt="" width={18} height={18} />
250	{l10n.getString("multi-part-onboarding-premium-extension-added")}
251	</div>
252	</div>
253	</>
254	);
255
256	skipButton = (
257	<button
258	ref={skipStepThreeButtonRef}
259	className={styles["skip-link"]}
260	onClick={skipAddonStep}
261	>
262	{l10n.getString("profile-free-onboarding-skip-step")}
263	</button>
264	);
265	}
266
267	return (
268	<section className={styles.onboarding}>
269	{step}
270	<div className={styles.controls}>
271	{button}
272	<div className={styles["progress-container"]}>
273	<VisuallyHidden>
274	<progress
275	max={getRuntimeConfig().maxOnboardingAvailable}
276	value={props.profile.onboarding_free_state + 1}
277	>
278	{l10n.getString("multi-part-onboarding-step-counter", {
279	step: props.profile.onboarding_free_state,
280	max: getRuntimeConfig().maxOnboardingAvailable,
281	})}
282	</progress>
283	</VisuallyHidden>
284	{next}
285	<ol className={styles["styled-progress-bar"]} aria-hidden={true}>
286	<li
287	className={
288	props.profile.onboarding_free_state >= 0	×
289	? styles["is-completed"]
290	: undefined
291	}
292	>
293	<span></span>1
294	</li>
295	<li
296	className={
297	props.profile.onboarding_free_state >= 1	×
298	? styles["is-completed"]
299	: undefined
300	}
301	>
302	<span></span>2
303	</li>
304	<li
305	className={
306	props.profile.onboarding_free_state >= 2	×
307	? styles["is-completed"]
308	: undefined
309	}
310	>
311	<span></span>3
312	</li>
313	</ol>
314	</div>
315	{skipButton}
316	</div>
317	</section>
318	);
319	};
320
321	const StepOne = () => {	1✔
322	const l10n = useL10n();	×
323
324	return (
325	<div className={`${styles.step} ${styles["step-welcome"]}`}>
326	<div className={styles["welcome-header"]}>
327	<h1>{l10n.getString("profile-free-onboarding-welcome-headline")}</h1>
328	<p>{l10n.getString("profile-free-onboarding-welcome-description")}</p>
329	</div>
330	<div className={styles["content-wrapper"]}>
331	<Image src={WomanEmail} alt="" width={475} />
332	<div className={styles["content-text"]}>
333	<div>
334	<Image className={styles["hidden-mobile"]} src={CheckMark} alt="" />
335	<p className={styles["headline"]}>
336	{l10n.getString(
337	"profile-free-onboarding-welcome-item-headline-1",
338	)}
339	</p>
340	<p className={styles["description"]}>
341	{l10n.getString(
342	"profile-free-onboarding-welcome-item-description-1",
343	)}
344	</p>
345	</div>
346	<div>
347	<p className={styles["headline"]}>
348	{l10n.getString(
349	"profile-free-onboarding-welcome-item-headline-2",
350	)}
351	</p>
352	<p className={styles["description"]}>
353	{l10n.getString(
354	"profile-free-onboarding-welcome-item-description-2",
355	)}
356	</p>
357	</div>
358	</div>
359	</div>
360	</div>
361	);
362	};
363
364	type StepTwoProps = {
365	aliases: AliasData[];
366	profile: ProfileData;
367	user: UserData;
368	runtimeData?: RuntimeData;
369	isModalOpen: boolean;
370	setIsModalOpen: (isOpen: boolean) => void;
371	continue: () => void;
372	onUpdate: (alias: AliasData, updatedFields: Partial<AliasData>) => void;
373	};
374
375	const StepTwo = (props: StepTwoProps) => {	1✔
376	const l10n = useL10n();	×
377	const [isSet, setIsSet] = useState(false);	×
378
379	return (
380	<div className={`${styles.step} ${styles["step-copy-mask"]}`}>
381	<EmailForwardingModal
382	isOpen={props.isModalOpen}
383	onClose={() => {
384	props.setIsModalOpen(false);	×
385	}}
386	onComplete={() => {
387	props.setIsModalOpen(false);	×
388	props.continue();	×
389	}}
390	onConfirm={() => {
391	setIsSet(true);	×
392	}}
393	isSet={isSet}
394	/>
395	<div className={styles["copy-mask-header"]}>
396	<h1>{l10n.getString("profile-free-onboarding-copy-mask-headline")}</h1>
397	<p>{l10n.getString("profile-free-onboarding-copy-mask-description")}</p>
398	</div>
399	<div className={styles["content-wrapper-copy-mask"]}>
400	<div className={styles["copy-mask-arrow-element"]}>
401	<Image src={VerticalArrow} alt="" />
402	</div>
403	<AliasList
404	aliases={props.aliases}
405	onCreate={() => {}}
406	onUpdate={props.onUpdate}
407	onDelete={() => {}}
408	profile={props.profile}
409	user={props.user}
410	runtimeData={props.runtimeData}
411	onboarding={true}
412	>
413	<div className={styles["content-wrapper-copy-mask-items"]}>
414	<div className={styles["content-item"]}>
415	<Image src={Emails} alt="" />
416	<div className={styles["content-text"]}>
417	<p className={styles["headline"]}>
418	{l10n.getString(
419	"profile-free-onboarding-copy-mask-item-headline-1",
420	)}
421	</p>
422	<p className={styles["description"]}>
423	{l10n.getString(
424	"profile-free-onboarding-copy-mask-item-description-1",
425	)}
426	</p>
427	</div>
428	</div>
429	<hr />
430	<div className={styles["content-item"]}>
431	<Image src={Congratulations} alt="" />
432	<div className={styles["content-text"]}>
433	<p className={styles["headline"]}>
434	{l10n.getString(
435	"profile-free-onboarding-copy-mask-item-headline-2",
436	)}
437	</p>
438	<p className={styles["description"]}>
439	{l10n.getString(
440	"profile-free-onboarding-copy-mask-item-description-2",
441	)}
442	</p>
443	</div>
444	</div>
445	</div>
446	</AliasList>
447	</div>
448	</div>
449	);
450	};
451
452	const StepThree = () => {	1✔
453	const l10n = useL10n();	×
454
455	return (
456	<div
457	className={`${styles.step} ${styles["step-copy-mask"]} ${styles["mask-use"]}`}
458	>
459	<div className={styles["copy-mask-header"]}>
460	<h1>{l10n.getString("profile-free-onboarding-addon-headline")}</h1>
461	<p>{l10n.getString("profile-free-onboarding-addon-subheadline")}</p>
462	</div>
463	<div className={styles["addon-content-wrapper"]}>
464	<div className={styles["addon-content-items"]}>
465	<div className={styles["addon-content-text"]}>
466	<p className={styles.headline}>
467	{l10n.getString("profile-free-onboarding-addon-item-headline-1")}
468	</p>
469	<p className={styles.description}>
470	{l10n.getString(
471	"profile-free-onboarding-addon-item-description-1",
472	)}
473	</p>
474	<Image className={styles["large-arrow"]} src={LargeArrow} alt="" />
475	</div>
476	<Image src={WorkingMan} alt="" />
477	</div>
478
479	<div className={styles["addon-content-items"]}>
480	<Image src={Extension} alt="" />
481	<div className={styles["addon-content-text"]}>
482	<p className={styles.headline}>
483	{l10n.getString("profile-free-onboarding-addon-item-headline-2")}
484	</p>
485	<p className={styles.description}>
486	{l10n.getString(
487	"profile-free-onboarding-addon-item-description-2",
488	)}
489	</p>
490	<Image className={styles["small-arrow"]} src={SmallArrow} alt="" />
491	</div>
492	</div>
493	</div>
494	</div>
495	);
496	};

mozilla / fx-private-relay / 31ad0f6d-922d-4973-9081-ebaa187791e9

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