b3d5484e-035b-41ec-b916-ab205c795015

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

Build # b3d5484e-035b-41ec-b916-ab205c795015

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

1948 of 2847 branches covered (0.0%)

Branch coverage included in aggregate %.

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

6190 of 8130 relevant lines covered (76.14%)

18.39 hits per line

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

33.33

/frontend/src/components/dashboard/EmailForwardingModal.tsx

import {
  FocusEventHandler,
  FormEventHandler,
  ReactElement,
  ReactNode,
  useRef,
  useState,
} from "react";
import {
  OverlayContainer,
  FocusScope,
  useDialog,
  useModal,
  useOverlay,
  usePreventScroll,
  AriaOverlayProps,
} from "react-aria";
import styles from "./EmailForwardingModal.module.scss";
import { useL10n } from "../../hooks/l10n";
import Image from "next/image";
import ForwardEmail from "./images/free-onboarding-forwarding-email.svg";
import ForwardedEmail from "./images/free-onboarding-forwarding-congratulations.svg";
import { Button } from "../Button";
import { StaticImport } from "next/dist/shared/lib/get-img-props";
import { CloseIcon } from "../Icons";
import { aliasEmailTest } from "../../hooks/api/aliases";
import { event as gaEvent } from "react-ga";

export type Props = {
  isOpen: boolean;
  isSet: boolean;
  onClose: () => void;
  onConfirm: () => void;
  onComplete: () => void;
};

/**
 * Modal in which the user can provide an email mask to test email forwarding
 */
export const EmailForwardingModal = (props: Props) => {
  if (!props.isOpen) return null;

  return !props.isSet ? (
    <OverlayContainer>
      <ConfirmModal {...props} />
    </OverlayContainer>
  ) : (
    <OverlayContainer>
      <SuccessModal {...props} />
    </OverlayContainer>
  );
};

const ConfirmModal = (props: Props) => {
  const l10n = useL10n();
  const [inputValue, setInputValue] = useState("");
  const formRef = useRef<HTMLFormElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);

  const onBlur: FocusEventHandler<HTMLInputElement> = (_event) => {
    formRef.current?.dispatchEvent(
      new Event("submit", { bubbles: true, cancelable: true }),
    );
  };

  const onSubmit: FormEventHandler = async (event) => {
    event.preventDefault();

    const isValid = formRef.current?.reportValidity();

    if (isValid) {
      inputRef.current?.blur();

      const response = await aliasEmailTest(inputValue);

      if (response) {
        props.onConfirm();

        gaEvent({
          category: "Free Onboarding",
          action: "Engage",
          label: "onboarding-step-2-forwarding-test",
          value: 1,
        });
      }
    }
  };

  return (
    <PickerDialog
      headline={l10n.getString(
        "profile-free-onboarding--copy-mask-try-out-email-forwarding",
      )}
      onClose={() => props.onClose()}
      image={ForwardEmail}
      isOpen={props.isOpen}
      isDismissable={true}
    >
      <div className={styles["paste-email-mask-container"]}>
        <p className={styles["modal-title"]}>
          {l10n.getString("profile-free-onboarding--copy-mask-paste-the-email")}
        </p>
        <form
          onSubmit={onSubmit}
          ref={formRef}
          className={styles["label-form"]}
        >
          <input
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            onBlur={onBlur}
            aria-label={l10n.getString("profile-label-edit-2")}
            ref={inputRef}
            className={styles["label-input"]}
            placeholder={l10n.getString(
              "profile-free-onboarding--copy-mask-placeholder-relay-email-mask",
            )}
            type="text"
          />
        </form>
      </div>
      <Button
        className={styles["generate-new-mask"]}
        type="submit"
        onClick={onSubmit}
      >
        {l10n.getString("profile-free-onboarding--copy-mask-send-email")}
      </Button>

      <button className={styles["nevermind-link"]} onClick={props.onClose}>
        {l10n.getString("profile-free-onboarding--copy-mask-nevermind")}
      </button>
    </PickerDialog>
  );
};

const SuccessModal = (props: Props) => {
  const l10n = useL10n();

  return (
    <PickerDialog
      headline={l10n.getString(
        "profile-free-onboarding--copy-mask-check-inbox",
      )}
      onClose={() => props.onClose()}
      image={ForwardedEmail}
      isOpen={props.isOpen}
      isDismissable={true}
    >
      <div className={styles["paste-email-mask-container"]}>
        <p className={styles["modal-title-success"]}>
          {l10n.getString("profile-free-onboarding--copy-mask-email-this-mask")}
        </p>
      </div>
      <Button
        className={styles["generate-new-mask"]}
        onClick={props.onComplete}
      >
        {l10n.getString("profile-free-onboarding--copy-mask-continue")}
      </Button>
    </PickerDialog>
  );
};

type PickerDialogProps = {
  title?: string | ReactElement;
  headline?: string;
  image: string | StaticImport;
  isOpen: boolean;
  onClose?: () => void;
  children?: ReactNode;
};

const PickerDialog = (props: PickerDialogProps & AriaOverlayProps) => {
  const wrapperRef = useRef<HTMLDivElement>(null);
  const l10n = useL10n();
  const { overlayProps, underlayProps } = useOverlay(props, wrapperRef);
  usePreventScroll();
  const { modalProps } = useModal();
  const { dialogProps, titleProps } = useDialog({}, wrapperRef);

  return (
    <div className={styles.underlay} {...underlayProps}>
      <FocusScope contain restoreFocus autoFocus>
        <div
          className={styles["dialog-wrapper"]}
          {...overlayProps}
          {...dialogProps}
          {...modalProps}
          ref={wrapperRef}
        >
          <CloseIcon
            className={styles["close-icon"]}
            alt={l10n.getString("profile-free-onboarding--close-modal")}
            onClick={props.onClose}
          />
          <div className={styles.hero}>
            <p className={styles.headline}>{props.headline}</p>
            <Image src={props.image} alt="" />
            <p {...titleProps}>{props.title}</p>
            {props.children}
          </div>
        </div>
      </FocusScope>
    </div>
  );
};

1	import {
2	FocusEventHandler,
3	FormEventHandler,
4	ReactElement,
5	ReactNode,
6	useRef,
7	useState,
8	} from "react";	1✔
9	import {
10	OverlayContainer,
11	FocusScope,
12	useDialog,
13	useModal,
14	useOverlay,
15	usePreventScroll,
16	AriaOverlayProps,
17	} from "react-aria";	1✔
18	import styles from "./EmailForwardingModal.module.scss";	1✔
19	import { useL10n } from "../../hooks/l10n";	1✔
20	import Image from "next/image";	1✔
21	import ForwardEmail from "./images/free-onboarding-forwarding-email.svg";	1✔
22	import ForwardedEmail from "./images/free-onboarding-forwarding-congratulations.svg";	1✔
23	import { Button } from "../Button";	1✔
24	import { StaticImport } from "next/dist/shared/lib/get-img-props";
25	import { CloseIcon } from "../Icons";	1✔
26	import { aliasEmailTest } from "../../hooks/api/aliases";	1✔
27	import { event as gaEvent } from "react-ga";	1✔
28
29	export type Props = {
30	isOpen: boolean;
31	isSet: boolean;
32	onClose: () => void;
33	onConfirm: () => void;
34	onComplete: () => void;
35	};
36
37	/**
38	* Modal in which the user can provide an email mask to test email forwarding
39	*/
40	export const EmailForwardingModal = (props: Props) => {	1✔
41	if (!props.isOpen) return null;	×
42
43	return !props.isSet ? (
44	<OverlayContainer>	×
45	<ConfirmModal {...props} />
46	</OverlayContainer>
47	) : (
48	<OverlayContainer>
49	<SuccessModal {...props} />
50	</OverlayContainer>
51	);
52	};
53
54	const ConfirmModal = (props: Props) => {	1✔
55	const l10n = useL10n();	×
56	const [inputValue, setInputValue] = useState("");	×
57	const formRef = useRef<HTMLFormElement>(null);	×
58	const inputRef = useRef<HTMLInputElement>(null);	×
59
60	const onBlur: FocusEventHandler<HTMLInputElement> = (_event) => {	×
61	formRef.current?.dispatchEvent(	×
62	new Event("submit", { bubbles: true, cancelable: true }),
63	);
64	};
65
66	const onSubmit: FormEventHandler = async (event) => {	×
67	event.preventDefault();	×
68
69	const isValid = formRef.current?.reportValidity();	×
70
71	if (isValid) {	×
72	inputRef.current?.blur();	×
73
74	const response = await aliasEmailTest(inputValue);	×
75
76	if (response) {	×
77	props.onConfirm();	×
78
79	gaEvent({	×
80	category: "Free Onboarding",
81	action: "Engage",
82	label: "onboarding-step-2-forwarding-test",
83	value: 1,
84	});
85	}
86	}
87	};
88
89	return (
90	<PickerDialog
91	headline={l10n.getString(
92	"profile-free-onboarding--copy-mask-try-out-email-forwarding",
93	)}
94	onClose={() => props.onClose()}	×
95	image={ForwardEmail}
96	isOpen={props.isOpen}
97	isDismissable={true}
98	>
99	<div className={styles["paste-email-mask-container"]}>
100	<p className={styles["modal-title"]}>
101	{l10n.getString("profile-free-onboarding--copy-mask-paste-the-email")}
102	</p>
103	<form
104	onSubmit={onSubmit}
105	ref={formRef}
106	className={styles["label-form"]}
107	>
108	<input
109	value={inputValue}
110	onChange={(e) => setInputValue(e.target.value)}	×
111	onBlur={onBlur}
112	aria-label={l10n.getString("profile-label-edit-2")}
113	ref={inputRef}
114	className={styles["label-input"]}
115	placeholder={l10n.getString(
116	"profile-free-onboarding--copy-mask-placeholder-relay-email-mask",
117	)}
118	type="text"
119	/>
120	</form>
121	</div>
122	<Button
123	className={styles["generate-new-mask"]}
124	type="submit"
125	onClick={onSubmit}
126	>
127	{l10n.getString("profile-free-onboarding--copy-mask-send-email")}
128	</Button>
129
130	<button className={styles["nevermind-link"]} onClick={props.onClose}>
131	{l10n.getString("profile-free-onboarding--copy-mask-nevermind")}
132	</button>
133	</PickerDialog>
134	);
135	};
136
137	const SuccessModal = (props: Props) => {	1✔
138	const l10n = useL10n();	×
139
140	return (
141	<PickerDialog
142	headline={l10n.getString(
143	"profile-free-onboarding--copy-mask-check-inbox",
144	)}
145	onClose={() => props.onClose()}	×
146	image={ForwardedEmail}
147	isOpen={props.isOpen}
148	isDismissable={true}
149	>
150	<div className={styles["paste-email-mask-container"]}>
151	<p className={styles["modal-title-success"]}>
152	{l10n.getString("profile-free-onboarding--copy-mask-email-this-mask")}
153	</p>
154	</div>
155	<Button
156	className={styles["generate-new-mask"]}
157	onClick={props.onComplete}
158	>
159	{l10n.getString("profile-free-onboarding--copy-mask-continue")}
160	</Button>
161	</PickerDialog>
162	);
163	};
164
165	type PickerDialogProps = {
166	title?: string \| ReactElement;
167	headline?: string;
168	image: string \| StaticImport;
169	isOpen: boolean;
170	onClose?: () => void;
171	children?: ReactNode;
172	};
173
174	const PickerDialog = (props: PickerDialogProps & AriaOverlayProps) => {	1✔
175	const wrapperRef = useRef<HTMLDivElement>(null);	×
176	const l10n = useL10n();	×
177	const { overlayProps, underlayProps } = useOverlay(props, wrapperRef);	×
178	usePreventScroll();	×
179	const { modalProps } = useModal();	×
180	const { dialogProps, titleProps } = useDialog({}, wrapperRef);	×
181
182	return (
183	<div className={styles.underlay} {...underlayProps}>
184	<FocusScope contain restoreFocus autoFocus>
185	<div
186	className={styles["dialog-wrapper"]}
187	{...overlayProps}
188	{...dialogProps}
189	{...modalProps}
190	ref={wrapperRef}
191	>
192	<CloseIcon
193	className={styles["close-icon"]}
194	alt={l10n.getString("profile-free-onboarding--close-modal")}
195	onClick={props.onClose}
196	/>
197	<div className={styles.hero}>
198	<p className={styles.headline}>{props.headline}</p>
199	<Image src={props.image} alt="" />
200	<p {...titleProps}>{props.title}</p>
201	{props.children}
202	</div>
203	</div>
204	</FocusScope>
205	</div>
206	);
207	};

mozilla / fx-private-relay / b3d5484e-035b-41ec-b916-ab205c795015

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