d7d374bd-7d9e-4def-95ec-5d38769b2b98

Committed 14 Nov 2023 07:39PM UTC coverage: 73.709% (-0.5%) from 74.258%

Build # d7d374bd-7d9e-4def-95ec-5d38769b2b98

Build Type

push

circleci

Committed by

web-flow

Commit Message

Merge pull request #4070 from mozilla/MPP-3478-and-MPP-3555-update-custom-mask-creation

MPP-3478, MPP-3455, MPP-3479: Updates for custom mask creation

Run Details

1958 of 2887 branches covered (0.0%)

Branch coverage included in aggregate %.

44 of 102 new or added lines in 6 files covered. (43.14%)

1 existing line in 1 file now uncovered.

6234 of 8227 relevant lines covered (75.77%)

19.23 hits per line

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

24.39

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

import {
  ButtonHTMLAttributes,
  ChangeEventHandler,
  FormEvent,
  FormEventHandler,
  ReactElement,
  ReactNode,
  RefObject,
  useRef,
  useState,
} from "react";
import Link from "next/link";
import Congratulations from "../images/free-onboarding-congratulations.svg";
import {
  OverlayContainer,
  FocusScope,
  useDialog,
  useModal,
  useOverlay,
  useButton,
  AriaOverlayProps,
  ButtonAria,
} from "react-aria";
import styles from "./CustomAddressGenerationModal.module.scss";
import {
  BulletPointIcon,
  CheckIcon,
  CloseIconNormal,
  CopyIcon,
  ErrorTriangleIcon,
  InfoBulbIcon,
  InvalidIcon,
} from "../../Icons";
import { Button } from "../../Button";
import { InfoTooltip } from "../../InfoTooltip";
import { useL10n } from "../../../hooks/l10n";
import { ProfileData, useProfiles } from "../../../hooks/api/profile";
import { getRuntimeConfig } from "../../../config";
import { MenuTriggerState, useMenuTriggerState } from "react-stately";
import { AliasData } from "../../../hooks/api/aliases";
import Image from "next/image";
import { ReactLocalization } from "@fluent/react";

export type Props = {
  isOpen: boolean;
  onClose: () => void;
  onUpdate: (
    aliasToUpdate: AliasData | undefined,
    blockPromotions: boolean,
    copyToClipboard: boolean | undefined,
  ) => void;
  onPick: (address: string, setErrorState: (flag: boolean) => void) => void;
  subdomain: string;
  aliasGeneratedState: boolean;
  findAliasDataFromPrefix: (aliasPrefix: string) => AliasData | undefined;
};

/**
 * Modal in which the user can create a new custom alias,
 * while also being educated on why they don't need to do that.
 */
export const CustomAddressGenerationModal = (props: Props) => {
  const profileData = useProfiles();
  const l10n = useL10n();
  const cancelButtonRef = useRef<HTMLButtonElement>(null);
  const cancelButton = useButton(
    { onPress: () => props.onClose() },
    cancelButtonRef,
  );
  const [address, setAddress] = useState("");
  const errorExplainerState = useMenuTriggerState({});
  const profile = profileData.data?.[0];
  if (!profile) {
    return null;
  }

  return (
    <>
      <OverlayContainer>
        <PickerDialog
          title={
            !props.aliasGeneratedState
              ? l10n.getString("modal-custom-alias-picker-heading-2")
              : l10n.getString("modal-domain-register-success-title")
          }
          onClose={() => props.onClose()}
          isOpen={props.isOpen}
          isDismissable={true}
          errorStateIsOpen={errorExplainerState.isOpen}
          errorStateOnClose={errorExplainerState.close}
          aliasGeneratedState={props.aliasGeneratedState}
        >
          {!props.aliasGeneratedState ? (
            <CustomMaskCreator
              l10n={l10n}
              address={address}
              profile={profile}
              errorExplainerState={errorExplainerState}
              cancelButton={cancelButton}
              cancelButtonRef={cancelButtonRef}
              onPick={props.onPick}
              setAddress={setAddress}
            />
          ) : (
            <CustomMaskSuccess
              l10n={l10n}
              address={address}
              profile={profile}
              findAliasDataFromPrefix={props.findAliasDataFromPrefix}
              onUpdate={props.onUpdate}
            />
          )}
        </PickerDialog>
      </OverlayContainer>
    </>
  );
};

type CustomMaskCreatorProps = {
  l10n: ReactLocalization;
  address: string;
  profile: ProfileData;
  errorExplainerState: MenuTriggerState;
  cancelButton: ButtonAria<ButtonHTMLAttributes<HTMLButtonElement>>;
  cancelButtonRef: RefObject<HTMLButtonElement>;
  onPick: (address: string, setErrorState: (flag: boolean) => void) => void;
  setAddress: (address: string) => void;
};

const CustomMaskCreator = (props: CustomMaskCreatorProps) => {
  const {
    l10n,
    profile,
    errorExplainerState,
    cancelButton,
    cancelButtonRef,
    onPick,
    address,
    setAddress,
  } = props;
  /**
   * We need a Ref to the address picker field so that we can call the browser's
   * native validation APIs.
   * See:
   * - https://beta.reactjs.org/learn/manipulating-the-dom-with-refs
   * - https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity
   */
  const addressFieldRef = useRef<HTMLInputElement>(null);
  const containsUppercase = /[A-Z]/.test(address);
  const containsSymbols = !/^[A-Za-z0-9.-]*$/.test(address);

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

    const isValid = isAddressValid(address);
    isValid
      ? onPick(address.toLowerCase(), errorExplainerState.setOpen)
      : errorExplainerState.setOpen(!isValid);
  };
  const onChange: ChangeEventHandler<HTMLInputElement> = (event) => {
    setAddress(event.target.value);
    if (errorExplainerState.isOpen) {
      errorExplainerState.close();
    }
  };

  return (
    <form onSubmit={onSubmit}>
      <div className={styles["form-wrapper"]}>
        <div className={styles.prefix}>
          <label htmlFor="address">
            {l10n.getString("modal-custom-alias-picker-form-prefix-label-3")}
          </label>
          <input
            id="address"
            type="text"
            value={address}
            onChange={onChange}
            ref={addressFieldRef}
            placeholder={l10n.getString(
              "modal-custom-alias-picker-form-prefix-placeholder-redesign",
            )}
            autoCapitalize="none"
            className={`${
              errorExplainerState.isOpen || containsUppercase || containsSymbols
                ? styles["invalid-prefix"]
                : null
            }`}
          />
          <ErrorTooltip
            containsUppercase={containsUppercase}
            containsSymbols={containsSymbols}
            address={address}
          />
          <label
            htmlFor="address"
            className={styles["profile-registered-domain-value"]}
          >
            @{profile.subdomain}.{getRuntimeConfig().mozmailDomain}
          </label>
        </div>
      </div>

      <hr />
      <div className={styles.buttons}>
        <button
          {...cancelButton.buttonProps}
          ref={cancelButtonRef}
          className={styles["end-button"]}
        >
          {l10n.getString("profile-label-cancel")}
        </button>
        <Button
          type="submit"
          disabled={
            address.length === 0 || containsUppercase || containsSymbols
          }
        >
          {l10n.getString("modal-custom-alias-picker-form-submit-label-2")}
        </Button>
      </div>
    </form>
  );
};

type CustomMaskSuccessProps = {
  l10n: ReactLocalization;
  address: string;
  profile: ProfileData;
  findAliasDataFromPrefix: (aliasPrefix: string) => AliasData | undefined;
  onUpdate: (
    aliasToUpdate: AliasData | undefined,
    blockPromotions: boolean,
    copyToClipboard: boolean | undefined,
  ) => void;
};

const CustomMaskSuccess = (props: CustomMaskSuccessProps) => {
  const { l10n, address, profile, findAliasDataFromPrefix, onUpdate } = props;

  const [promotionalsBlocking, setPromotionalsBlocking] = useState(false);

  const onFinished = (event: FormEvent, copyToClipboard?: boolean) => {
    event.preventDefault();
    const newlyCreatedAliasData = findAliasDataFromPrefix(address);
    onUpdate(newlyCreatedAliasData, promotionalsBlocking, copyToClipboard);
  };

  const updatePromotionsCheckbox: ChangeEventHandler<HTMLInputElement> = (
    event,
  ) => {
    setPromotionalsBlocking(event.target.checked);
  };

  return (
    <form
      onSubmit={(e) => {
        onFinished(e, true);
      }}
    >
      <div className={styles["newly-created-mask"]}>
        <Image
          src={Congratulations}
          alt={l10n.getString("modal-domain-register-success-title")}
        />
        <p>
          {address}@{profile.subdomain}.{getRuntimeConfig().mozmailDomain}
        </p>
      </div>
      <div className={styles["promotionals-blocking-control"]}>
        <input
          type="checkbox"
          id="promotionalsBlocking"
          onChange={updatePromotionsCheckbox}
        />
        <label htmlFor="promotionalsBlocking">
          {l10n.getString(
            "popover-custom-alias-explainer-promotional-block-checkbox-label",
          )}
        </label>
        <InfoTooltip
          alt={l10n.getString(
            "popover-custom-alias-explainer-promotional-block-tooltip-trigger",
          )}
          iconColor="black"
        >
          <h3>
            {l10n.getString(
              "popover-custom-alias-explainer-promotional-block-checkbox",
            )}
          </h3>
          <p className={styles["promotionals-blocking-description"]}>
            {l10n.getString(
              "popover-custom-alias-explainer-promotional-block-tooltip-2",
            )}
            <Link href="/faq#faq-promotional-email-blocking">
              {l10n.getString("banner-label-data-notification-body-cta")}
            </Link>
          </p>
        </InfoTooltip>
      </div>
      <div className={styles.tip}>
        <span className={styles["tip-icon"]}>
          <InfoBulbIcon alt="" />
        </span>
        <p>{l10n.getString("modal-custom-alias-picker-tip-redesign")}</p>
      </div>
      <hr />
      <div className={styles.buttons}>
        <button className={styles["end-button"]} onClick={onFinished}>
          {l10n.getString("done-msg")}
        </button>
        <Button type="submit">
          {l10n.getString("copy-mask")}
          <CopyIcon alt="" />
        </Button>
      </div>
    </form>
  );
};

type PickerDialogProps = {
  title: string | ReactElement;
  errorStateIsOpen: boolean;
  errorStateOnClose: () => void;
  children: ReactNode;
  isOpen: boolean;
  onClose?: () => void;
  aliasGeneratedState: boolean;
};
const PickerDialog = (props: PickerDialogProps & AriaOverlayProps) => {
  const wrapperRef = useRef<HTMLDivElement>(null);
  const { overlayProps, underlayProps } = useOverlay(props, wrapperRef);
  const { modalProps } = useModal();
  const { dialogProps, titleProps } = useDialog({}, wrapperRef);

  return (
    <div className={styles.underlay} {...underlayProps}>
      <FocusScope contain restoreFocus>
        <div
          className={styles["dialog-wrapper"]}
          {...overlayProps}
          {...dialogProps}
          {...modalProps}
          ref={wrapperRef}
        >
          <InvalidPrefixBanner
            isOpen={props.errorStateIsOpen}
            onClose={props.errorStateOnClose}
          />
          <div className={styles.hero}>
            <h3 {...titleProps}>{props.title}</h3>
          </div>
          {props.children}
        </div>
      </FocusScope>
    </div>
  );
};

type ErrorTooltipProps = {
  containsUppercase: boolean;
  containsSymbols: boolean;
  address: string;
};

const ErrorTooltip = (props: ErrorTooltipProps) => {
  const l10n = useL10n();
  const { containsUppercase, containsSymbols, address } = props;

  return (
    <span className={styles.wrapper}>
      <span className={styles.tooltip}>
        <div className={styles.errors}>
          <ErrorStateIcons address={address} errorState={containsUppercase} />
          <p>
            {l10n.getString(
              "error-alias-picker-prefix-invalid-uppercase-letters",
            )}
          </p>
        </div>
        <div className={styles.errors}>
          <ErrorStateIcons address={address} errorState={containsSymbols} />
          <p>{l10n.getString("error-alias-picker-prefix-invalid-symbols")}</p>
        </div>
      </span>
    </span>
  );
};

type ErrorStateProps = {
  errorState: boolean;
  address: string;
};

const ErrorStateIcons = (props: ErrorStateProps) => {
  const { errorState, address } = props;
  const l10n = useL10n();

  return (
    <>
      <div className={styles["error-icons"]}>
        {address === "" ? (
          <BulletPointIcon alt="" className={styles["bullet-icon"]} />
        ) : !errorState ? (
          <CheckIcon
            alt={l10n.getString("error-state-valid-alt")}
            className={styles["check-icon"]}
          />
        ) : (
          <InvalidIcon
            alt={l10n.getString("error-state-invalid-alt")}
            className={styles["close-icon"]}
          />
        )}
      </div>
    </>
  );
};

type InvalidPrefixProps = {
  isOpen: boolean;
  onClose: () => void;
};

const InvalidPrefixBanner = (props: InvalidPrefixProps) => {
  const l10n = useL10n();

  return (
    <div
      className={`${styles["invalid-address-wrapper"]} ${
        props.isOpen ? styles["active"] : null
      }`}
    >
      <div className={styles["invalid-address-msg"]}>
        <div className={styles["left-content"]}>
          <ErrorTriangleIcon alt="" className={styles["prefix-error-icon"]} />
          <p>{l10n.getString("error-alias-picker-prefix-invalid")}</p>
        </div>
        <button
          onClick={props.onClose}
          className={`${styles["prefix-error-icon"]}  ${styles["close-button"]}`}
        >
          <CloseIconNormal alt={l10n.getString("close-button-label-alt")} />
        </button>
      </div>
    </div>
  );
};

export function isAddressValid(address: string): boolean {
  // Regular expression:
  //
  //   ^[a-z0-9]  Starts with a lowercase letter or number;
  //
  //   (...)?     followed by zero or one of:
  //
  //              [a-z0-9-.]{0,61} zero up to 61 lowercase letters, numbers, hyphens, or periods, and
  //              [a-z0-9]         a lowercase letter or number (but not a hyphen),
  //
  //   $          and nothing following that.
  //
  // All that combines to 1-63 lowercase characters, numbers, or hyphens,
  // but not starting or ending with a hyphen, aligned with the backend's
  // validation (`valid_address_pattern` in emails/models.py).
  return /^[a-z0-9]([a-z0-9-.]{0,61}[a-z0-9])?$/.test(address);
}

1	import {
2	ButtonHTMLAttributes,
3	ChangeEventHandler,
4	FormEvent,
5	FormEventHandler,
6	ReactElement,
7	ReactNode,
8	RefObject,
9	useRef,
10	useState,
11	} from "react";	3✔
12	import Link from "next/link";	3✔
13	import Congratulations from "../images/free-onboarding-congratulations.svg";	3✔
14	import {
15	OverlayContainer,
16	FocusScope,
17	useDialog,
18	useModal,
19	useOverlay,
20	useButton,
21	AriaOverlayProps,
22	ButtonAria,
23	} from "react-aria";	3✔
24	import styles from "./CustomAddressGenerationModal.module.scss";	3✔
25	import {
26	BulletPointIcon,
27	CheckIcon,
28	CloseIconNormal,
29	CopyIcon,
30	ErrorTriangleIcon,
31	InfoBulbIcon,
32	InvalidIcon,
33	} from "../../Icons";	3✔
34	import { Button } from "../../Button";	3✔
35	import { InfoTooltip } from "../../InfoTooltip";	3✔
36	import { useL10n } from "../../../hooks/l10n";	3✔
37	import { ProfileData, useProfiles } from "../../../hooks/api/profile";	3✔
38	import { getRuntimeConfig } from "../../../config";	3✔
39	import { MenuTriggerState, useMenuTriggerState } from "react-stately";	3✔
40	import { AliasData } from "../../../hooks/api/aliases";
41	import Image from "next/image";	3✔
42	import { ReactLocalization } from "@fluent/react";
43
44	export type Props = {
45	isOpen: boolean;
46	onClose: () => void;
47	onUpdate: (
48	aliasToUpdate: AliasData \| undefined,
49	blockPromotions: boolean,
50	copyToClipboard: boolean \| undefined,
51	) => void;
52	onPick: (address: string, setErrorState: (flag: boolean) => void) => void;
53	subdomain: string;
54	aliasGeneratedState: boolean;
55	findAliasDataFromPrefix: (aliasPrefix: string) => AliasData \| undefined;
56	};
57
58	/**
59	* Modal in which the user can create a new custom alias,
60	* while also being educated on why they don't need to do that.
61	*/
62	export const CustomAddressGenerationModal = (props: Props) => {	3✔
NEW 63	const profileData = useProfiles();	×
NEW 64	const l10n = useL10n();	×
NEW 65	const cancelButtonRef = useRef<HTMLButtonElement>(null);	×
NEW 66	const cancelButton = useButton(	×
NEW 67	{ onPress: () => props.onClose() },	×
68	cancelButtonRef,
69	);
NEW 70	const [address, setAddress] = useState("");	×
NEW 71	const errorExplainerState = useMenuTriggerState({});	×
NEW 72	const profile = profileData.data?.[0];	×
NEW 73	if (!profile) {	×
NEW 74	return null;	×
75	}
76
77	return (
78	<>
79	<OverlayContainer>
80	<PickerDialog
81	title={
82	!props.aliasGeneratedState	×
83	? l10n.getString("modal-custom-alias-picker-heading-2")
84	: l10n.getString("modal-domain-register-success-title")
85	}
NEW 86	onClose={() => props.onClose()}	×
87	isOpen={props.isOpen}
88	isDismissable={true}
89	errorStateIsOpen={errorExplainerState.isOpen}
90	errorStateOnClose={errorExplainerState.close}
91	aliasGeneratedState={props.aliasGeneratedState}
92	>
93	{!props.aliasGeneratedState ? (
94	<CustomMaskCreator	×
95	l10n={l10n}
96	address={address}
97	profile={profile}
98	errorExplainerState={errorExplainerState}
99	cancelButton={cancelButton}
100	cancelButtonRef={cancelButtonRef}
101	onPick={props.onPick}
102	setAddress={setAddress}
103	/>
104	) : (
105	<CustomMaskSuccess
106	l10n={l10n}
107	address={address}
108	profile={profile}
109	findAliasDataFromPrefix={props.findAliasDataFromPrefix}
110	onUpdate={props.onUpdate}
111	/>
112	)}
113	</PickerDialog>
114	</OverlayContainer>
115	</>
116	);
117	};
118
119	type CustomMaskCreatorProps = {
120	l10n: ReactLocalization;
121	address: string;
122	profile: ProfileData;
123	errorExplainerState: MenuTriggerState;
124	cancelButton: ButtonAria<ButtonHTMLAttributes<HTMLButtonElement>>;
125	cancelButtonRef: RefObject<HTMLButtonElement>;
126	onPick: (address: string, setErrorState: (flag: boolean) => void) => void;
127	setAddress: (address: string) => void;
128	};
129
130	const CustomMaskCreator = (props: CustomMaskCreatorProps) => {	3✔
131	const {
132	l10n,
133	profile,
134	errorExplainerState,
135	cancelButton,
136	cancelButtonRef,
137	onPick,
138	address,
139	setAddress,
NEW 140	} = props;	×
141	/**
142	* We need a Ref to the address picker field so that we can call the browser's
143	* native validation APIs.
144	* See:
145	* - https://beta.reactjs.org/learn/manipulating-the-dom-with-refs
146	* - https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity
147	*/
NEW 148	const addressFieldRef = useRef<HTMLInputElement>(null);	×
NEW 149	const containsUppercase = /[A-Z]/.test(address);	×
NEW 150	const containsSymbols = !/^[A-Za-z0-9.-]*$/.test(address);	×
151
NEW 152	const onSubmit: FormEventHandler = (event) => {	×
NEW 153	event.preventDefault();	×
154
NEW 155	const isValid = isAddressValid(address);	×
NEW 156	isValid	×
157	? onPick(address.toLowerCase(), errorExplainerState.setOpen)
158	: errorExplainerState.setOpen(!isValid);
159	};
NEW 160	const onChange: ChangeEventHandler<HTMLInputElement> = (event) => {	×
NEW 161	setAddress(event.target.value);	×
NEW 162	if (errorExplainerState.isOpen) {	×
NEW 163	errorExplainerState.close();	×
164	}
165	};
166
167	return (
168	<form onSubmit={onSubmit}>
169	<div className={styles["form-wrapper"]}>
170	<div className={styles.prefix}>
171	<label htmlFor="address">
172	{l10n.getString("modal-custom-alias-picker-form-prefix-label-3")}
173	</label>
174	<input
175	id="address"
176	type="text"
177	value={address}
178	onChange={onChange}
179	ref={addressFieldRef}
180	placeholder={l10n.getString(
181	"modal-custom-alias-picker-form-prefix-placeholder-redesign",
182	)}
183	autoCapitalize="none"
184	className={`${
185	errorExplainerState.isOpen \|\| containsUppercase \|\| containsSymbols	×
186	? styles["invalid-prefix"]
187	: null
188	}`}
189	/>
190	<ErrorTooltip
191	containsUppercase={containsUppercase}
192	containsSymbols={containsSymbols}
193	address={address}
194	/>
195	<label
196	htmlFor="address"
197	className={styles["profile-registered-domain-value"]}
198	>
199	@{profile.subdomain}.{getRuntimeConfig().mozmailDomain}
200	</label>
201	</div>
202	</div>
203
204	<hr />
205	<div className={styles.buttons}>
206	<button
207	{...cancelButton.buttonProps}
208	ref={cancelButtonRef}
209	className={styles["end-button"]}
210	>
211	{l10n.getString("profile-label-cancel")}
212	</button>
213	<Button
214	type="submit"
215	disabled={
216	address.length === 0 \|\| containsUppercase \|\| containsSymbols	×
217	}
218	>
219	{l10n.getString("modal-custom-alias-picker-form-submit-label-2")}
220	</Button>
221	</div>
222	</form>
223	);
224	};
225
226	type CustomMaskSuccessProps = {
227	l10n: ReactLocalization;
228	address: string;
229	profile: ProfileData;
230	findAliasDataFromPrefix: (aliasPrefix: string) => AliasData \| undefined;
231	onUpdate: (
232	aliasToUpdate: AliasData \| undefined,
233	blockPromotions: boolean,
234	copyToClipboard: boolean \| undefined,
235	) => void;
236	};
237
238	const CustomMaskSuccess = (props: CustomMaskSuccessProps) => {	3✔
NEW 239	const { l10n, address, profile, findAliasDataFromPrefix, onUpdate } = props;	×
240
NEW 241	const [promotionalsBlocking, setPromotionalsBlocking] = useState(false);	×
242
NEW 243	const onFinished = (event: FormEvent, copyToClipboard?: boolean) => {	×
NEW 244	event.preventDefault();	×
NEW 245	const newlyCreatedAliasData = findAliasDataFromPrefix(address);	×
NEW 246	onUpdate(newlyCreatedAliasData, promotionalsBlocking, copyToClipboard);	×
247	};
248
NEW 249	const updatePromotionsCheckbox: ChangeEventHandler<HTMLInputElement> = (	×
250	event,
251	) => {
NEW 252	setPromotionalsBlocking(event.target.checked);	×
253	};
254
255	return (
256	<form
257	onSubmit={(e) => {
NEW 258	onFinished(e, true);	×
259	}}
260	>
261	<div className={styles["newly-created-mask"]}>
262	<Image
263	src={Congratulations}
264	alt={l10n.getString("modal-domain-register-success-title")}
265	/>
266	<p>
267	{address}@{profile.subdomain}.{getRuntimeConfig().mozmailDomain}
268	</p>
269	</div>
270	<div className={styles["promotionals-blocking-control"]}>
271	<input
272	type="checkbox"
273	id="promotionalsBlocking"
274	onChange={updatePromotionsCheckbox}
275	/>
276	<label htmlFor="promotionalsBlocking">
277	{l10n.getString(
278	"popover-custom-alias-explainer-promotional-block-checkbox-label",
279	)}
280	</label>
281	<InfoTooltip
282	alt={l10n.getString(
283	"popover-custom-alias-explainer-promotional-block-tooltip-trigger",
284	)}
285	iconColor="black"
286	>
287	<h3>
288	{l10n.getString(
289	"popover-custom-alias-explainer-promotional-block-checkbox",
290	)}
291	</h3>
292	<p className={styles["promotionals-blocking-description"]}>
293	{l10n.getString(
294	"popover-custom-alias-explainer-promotional-block-tooltip-2",
295	)}
296	<Link href="/faq#faq-promotional-email-blocking">
297	{l10n.getString("banner-label-data-notification-body-cta")}
298	</Link>
299	</p>
300	</InfoTooltip>
301	</div>
302	<div className={styles.tip}>
303	<span className={styles["tip-icon"]}>
304	<InfoBulbIcon alt="" />
305	</span>
306	<p>{l10n.getString("modal-custom-alias-picker-tip-redesign")}</p>
307	</div>
308	<hr />
309	<div className={styles.buttons}>
310	<button className={styles["end-button"]} onClick={onFinished}>
311	{l10n.getString("done-msg")}
312	</button>
313	<Button type="submit">
314	{l10n.getString("copy-mask")}
315	<CopyIcon alt="" />
316	</Button>
317	</div>
318	</form>
319	);
320	};
321
322	type PickerDialogProps = {
323	title: string \| ReactElement;
324	errorStateIsOpen: boolean;
325	errorStateOnClose: () => void;
326	children: ReactNode;
327	isOpen: boolean;
328	onClose?: () => void;
329	aliasGeneratedState: boolean;
330	};
331	const PickerDialog = (props: PickerDialogProps & AriaOverlayProps) => {	3✔
NEW 332	const wrapperRef = useRef<HTMLDivElement>(null);	×
NEW 333	const { overlayProps, underlayProps } = useOverlay(props, wrapperRef);	×
NEW 334	const { modalProps } = useModal();	×
NEW 335	const { dialogProps, titleProps } = useDialog({}, wrapperRef);	×
336
337	return (
338	<div className={styles.underlay} {...underlayProps}>
339	<FocusScope contain restoreFocus>
340	<div
341	className={styles["dialog-wrapper"]}
342	{...overlayProps}
343	{...dialogProps}
344	{...modalProps}
345	ref={wrapperRef}
346	>
347	<InvalidPrefixBanner
348	isOpen={props.errorStateIsOpen}
349	onClose={props.errorStateOnClose}
350	/>
351	<div className={styles.hero}>
352	<h3 {...titleProps}>{props.title}</h3>
353	</div>
354	{props.children}
355	</div>
356	</FocusScope>
357	</div>
358	);
359	};
360
361	type ErrorTooltipProps = {
362	containsUppercase: boolean;
363	containsSymbols: boolean;
364	address: string;
365	};
366
367	const ErrorTooltip = (props: ErrorTooltipProps) => {	3✔
NEW 368	const l10n = useL10n();	×
NEW 369	const { containsUppercase, containsSymbols, address } = props;	×
370
371	return (
372	<span className={styles.wrapper}>
373	<span className={styles.tooltip}>
374	<div className={styles.errors}>
375	<ErrorStateIcons address={address} errorState={containsUppercase} />
376	<p>
377	{l10n.getString(
378	"error-alias-picker-prefix-invalid-uppercase-letters",
379	)}
380	</p>
381	</div>
382	<div className={styles.errors}>
383	<ErrorStateIcons address={address} errorState={containsSymbols} />
384	<p>{l10n.getString("error-alias-picker-prefix-invalid-symbols")}</p>
385	</div>
386	</span>
387	</span>
388	);
389	};
390
391	type ErrorStateProps = {
392	errorState: boolean;
393	address: string;
394	};
395
396	const ErrorStateIcons = (props: ErrorStateProps) => {	3✔
NEW 397	const { errorState, address } = props;	×
NEW 398	const l10n = useL10n();	×
399
400	return (
401	<>
402	<div className={styles["error-icons"]}>
403	{address === "" ? (
404	<BulletPointIcon alt="" className={styles["bullet-icon"]} />	×
405	) : !errorState ? (
406	<CheckIcon	×
407	alt={l10n.getString("error-state-valid-alt")}
408	className={styles["check-icon"]}
409	/>
410	) : (
411	<InvalidIcon
412	alt={l10n.getString("error-state-invalid-alt")}
413	className={styles["close-icon"]}
414	/>
415	)}
416	</div>
417	</>
418	);
419	};
420
421	type InvalidPrefixProps = {
422	isOpen: boolean;
423	onClose: () => void;
424	};
425
426	const InvalidPrefixBanner = (props: InvalidPrefixProps) => {	3✔
NEW 427	const l10n = useL10n();	×
428
429	return (
430	<div
431	className={`${styles["invalid-address-wrapper"]} ${
432	props.isOpen ? styles["active"] : null	×
433	}`}
434	>
435	<div className={styles["invalid-address-msg"]}>
436	<div className={styles["left-content"]}>
437	<ErrorTriangleIcon alt="" className={styles["prefix-error-icon"]} />
438	<p>{l10n.getString("error-alias-picker-prefix-invalid")}</p>
439	</div>
440	<button
441	onClick={props.onClose}
442	className={`${styles["prefix-error-icon"]} ${styles["close-button"]}`}
443	>
444	<CloseIconNormal alt={l10n.getString("close-button-label-alt")} />
445	</button>
446	</div>
447	</div>
448	);
449	};
450
NEW 451	export function isAddressValid(address: string): boolean {	×
452	// Regular expression:
453	//
454	// ^[a-z0-9] Starts with a lowercase letter or number;
455	//
456	// (...)? followed by zero or one of:
457	//
458	// [a-z0-9-.]{0,61} zero up to 61 lowercase letters, numbers, hyphens, or periods, and
459	// [a-z0-9] a lowercase letter or number (but not a hyphen),
460	//
461	// $ and nothing following that.
462	//
463	// All that combines to 1-63 lowercase characters, numbers, or hyphens,
464	// but not starting or ending with a hyphen, aligned with the backend's
465	// validation (`valid_address_pattern` in emails/models.py).
NEW 466	return /^[a-z0-9]([a-z0-9-.]{0,61}[a-z0-9])?$/.test(address);	×
467	}

mozilla / fx-private-relay / d7d374bd-7d9e-4def-95ec-5d38769b2b98

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