1f0f8ecb-4bd0-435e-8d49-d84d2d7ca16d

Build # 1f0f8ecb-4bd0-435e-8d49-d84d2d7ca16d

Build Type

circleci

Committed by Se Yeon Kim

Commit Message

Move update_abuse_metrics to increment only when forwarding emails and NOT when handling replies too

Pull Request Pull Request #2409: 2022.08.24 hotfix

Run Details

1589 of 2506 branches covered (63.41%)

Branch coverage included in aggregate %.

15 of 15 new or added lines in 3 files covered. (100.0%)

4351 of 6119 relevant lines covered (71.11%)

14.52 hits per line

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

69.43

/frontend/src/pages/accounts/profile.page.tsx

import { Localized, useLocalization } from "@fluent/react";
import type { NextPage } from "next";
import {
  forwardRef,
  HTMLAttributes,
  ReactNode,
  RefObject,
  useEffect,
  useRef,
} from "react";
import { event as gaEvent } from "react-ga";
import {
  FocusScope,
  useButton,
  useOverlay,
  useOverlayPosition,
  useOverlayTrigger,
} from "react-aria";
import { useMenuTriggerState } from "react-stately";
import { toast } from "react-toastify";
import styles from "./profile.module.scss";
import BottomBannerIllustration from "../../../public/images/woman-couch-left.svg";
import { CheckBadgeIcon } from "../../components/Icons";
import { Layout } from "../../components/layout/Layout";
import { useProfiles } from "../../hooks/api/profile";
import {
  AliasData,
  getAllAliases,
  getFullAddress,
  useAliases,
} from "../../hooks/api/aliases";
import { useUsers } from "../../hooks/api/user";
import { AliasList } from "../../components/dashboard/aliases/AliasList";
import { ProfileBanners } from "../../components/dashboard/ProfileBanners";
import { LinkButton } from "../../components/Button";
import { useRuntimeData } from "../../hooks/api/runtimeData";
import {
  getPremiumSubscribeLink,
  isPremiumAvailableInCountry,
} from "../../functions/getPlan";
import { useGaViewPing } from "../../hooks/gaViewPing";
import { trackPurchaseStart } from "../../functions/trackPurchase";
import { PremiumOnboarding } from "../../components/dashboard/PremiumOnboarding";
import { Onboarding } from "../../components/dashboard/Onboarding";
import { getRuntimeConfig } from "../../config";
import { SubdomainIndicator } from "../../components/dashboard/subdomain/SubdomainIndicator";
import { Tips } from "../../components/dashboard/tips/Tips";
import { clearCookie, getCookie } from "../../functions/cookies";
import { getLocale } from "../../functions/getLocale";
import { InfoTooltip } from "../../components/InfoTooltip";
import { AddonData } from "../../components/dashboard/AddonData";
import { useAddonData } from "../../hooks/addon";
import { CloseIcon } from "../../components/Icons";
import { isFlagActive } from "../../functions/waffle";

const Profile: NextPage = () => {
  const runtimeData = useRuntimeData();
  const profileData = useProfiles();
  const userData = useUsers();
  const aliasData = useAliases();
  const addonData = useAddonData();
  const { l10n } = useLocalization();
  const bottomBannerSubscriptionLinkRef = useGaViewPing({
    category: "Purchase Button",
    label: "profile-bottom-promo",
  });

  useEffect(() => {
    // This cookie is set in `trackPurchaseStart()`
    const hasClickedPurchaseCookie = getCookie("clicked-purchase") === "true";
    if (hasClickedPurchaseCookie && profileData.data?.[0].has_premium) {
      gaEvent({
        // This used to be an event set by the server;
        // I kept that name even though it's now generated by the client
        // to ensure reports remain consistent:
        category: "server event",
        action: "fired",
        label: "user_purchased_premium",
      });
      clearCookie("clicked-purchase");
    }
  }, [profileData.data]);

  if (!userData.isValidating && userData.error) {
    document.location.assign(getRuntimeConfig().fxaLoginUrl);
  }

  const profile = profileData.data?.[0];
  const user = userData.data?.[0];
  if (
    !runtimeData.data ||
    !profile ||
    !user ||
    !aliasData.randomAliasData.data ||
    !aliasData.customAliasData.data
  ) {
    // TODO: Show a loading spinner?
    return null;
  }

  const setCustomSubdomain = async (customSubdomain: string) => {
    const response = await profileData.setSubdomain(customSubdomain);
    if (!response.ok) {
      toast(
        l10n.getString("error-subdomain-not-available-2", {
          unavailable_subdomain: customSubdomain,
        }),
        { type: "error" }
      );
    }
    addonData.sendEvent("subdomainClaimed", { subdomain: customSubdomain });
  };

  const allAliases = getAllAliases(
    aliasData.randomAliasData.data,
    aliasData.customAliasData.data
  );

  if (
    profile.has_premium &&
    profile.onboarding_state < getRuntimeConfig().maxOnboardingAvailable
  ) {
    const onNextStep = (step: number) => {
      profileData.update(profile.id, {
        onboarding_state: step,
      });
    };

    return (
      <>
        <AddonData
          aliases={allAliases}
          profile={profile}
          runtimeData={runtimeData.data}
          totalBlockedEmails={profile.emails_blocked}
          totalForwardedEmails={profile.emails_forwarded}
        />
        <Layout runtimeData={runtimeData.data}>
          <PremiumOnboarding
            profile={profile}
            onNextStep={onNextStep}
            onPickSubdomain={setCustomSubdomain}
          />
        </Layout>
      </>
    );
  }

  const createAlias = async (
    options:
      | { mask_type: "random" }
      | { mask_type: "custom"; address: string; blockPromotionals: boolean }
  ) => {
    try {
      const response = await aliasData.create(options);
      if (!response.ok) {
        throw new Error(
          "Immediately caught to land in the same code path as failed requests."
        );
      }
      addonData.sendEvent("aliasListUpdate");
    } catch (error) {
      toast(l10n.getString("error-mask-create-failed"), { type: "error" });
    }
  };

  const updateAlias = async (
    alias: AliasData,
    updatedFields: Partial<AliasData>
  ) => {
    try {
      const response = await aliasData.update(alias, updatedFields);
      if (!response.ok) {
        throw new Error(
          "Immediately caught to land in the same code path as failed requests."
        );
      }
    } catch (error) {
      toast(
        l10n.getString("error-mask-update-failed", {
          alias: getFullAddress(alias),
        }),
        { type: "error" }
      );
    }
  };

  const deleteAlias = async (alias: AliasData) => {
    try {
      const response = await aliasData.delete(alias);
      if (!response.ok) {
        throw new Error(
          "Immediately caught to land in the same code path as failed requests."
        );
      }
      addonData.sendEvent("aliasListUpdate");
    } catch (error: unknown) {
      toast(
        l10n.getString("error-mask-delete-failed", {
          alias: getFullAddress(alias),
        }),
        { type: "error" }
      );
    }
  };

  const subdomainMessage =
    typeof profile.subdomain === "string" ? (
      <>
        <span>{l10n.getString("profile-label-subdomain")}</span>
        <span className={styles["profile-registered-domain-value"]}>
          <SubdomainIndicator
            subdomain={profile.subdomain}
            onCreateAlias={(
              address: string,
              settings: { blockPromotionals: boolean }
            ) =>
              createAlias({
                mask_type: "custom",
                address: address,
                blockPromotionals: settings.blockPromotionals,
              })
            }
          />
        </span>
      </>
    ) : (
      <>
        <a className={styles["open-button"]} href="#mpp-choose-subdomain">
          {l10n.getString("profile-label-create-subdomain")}
        </a>
        <InfoTooltip
          alt={l10n.getString("profile-label-subdomain-tooltip-trigger")}
        >
          {l10n.getString("profile-label-subdomain-tooltip")}
        </InfoTooltip>
      </>
    );

  const numberFormatter = new Intl.NumberFormat(getLocale(l10n), {
    notation: "compact",
    compactDisplay: "short",
  });
  // Non-Premium users have only five aliases, making the stats less insightful,
  // so only show them for Premium users:
  const stats = profile.has_premium ? (
    <section className={styles.header}>
      <div className={styles["header-wrapper"]}>
        <div className={styles["user-details"]}>
          <Localized
            id="profile-label-welcome-html"
            vars={{
              email: user.email,
            }}
            elems={{
              span: <span className={styles.lead} />,
            }}
          >
            <span className={styles.greeting} />
          </Localized>
          <strong className={styles.subdomain}>
            <CheckBadgeIcon alt="" />
            {subdomainMessage}
          </strong>
        </div>
        <dl className={styles["account-stats"]}>
          <div className={styles.stat}>
            <dt className={styles.label}>
              {l10n.getString("profile-stat-label-aliases-used-2")}
            </dt>
            <dd className={styles.value}>
              {numberFormatter.format(allAliases.length)}
            </dd>
          </div>
          <div className={styles.stat}>
            <dt className={styles.label}>
              {l10n.getString("profile-stat-label-blocked")}
            </dt>
            <dd className={styles.value}>
              {numberFormatter.format(profile.emails_blocked)}
            </dd>
          </div>
          <div className={styles.stat}>
            <dt className={styles.label}>
              {l10n.getString("profile-stat-label-forwarded")}
            </dt>
            <dd className={styles.value}>
              {numberFormatter.format(profile.emails_forwarded)}
            </dd>
          </div>
          {/*
            Only show tracker blocking stats if the back-end provides them:
          */}
          {isFlagActive(runtimeData.data, "tracker_removal") &&
            typeof profile.level_one_trackers_blocked === "number" && (
              <div className={styles.stat}>
                <dt className={styles.label}>
                  {l10n.getString("profile-stat-label-trackers-removed")}
                </dt>
                <dd className={styles.value}>
                  {numberFormatter.format(profile.level_one_trackers_blocked)}
                  <StatExplainer>
                    <p>
                      {l10n.getString(
                        "profile-stat-label-trackers-learn-more-part1"
                      )}
                    </p>
                    <p>
                      {l10n.getString(
                        "profile-stat-label-trackers-learn-more-part2-2"
                      )}
                    </p>
                  </StatExplainer>
                </dd>
              </div>
            )}
        </dl>
      </div>
    </section>
  ) : (
    <Localized
      id="profile-label-welcome-html"
      vars={{ email: user.email }}
      elems={{ span: <span /> }}
    >
      <section className={styles["no-premium-header"]} />
    </Localized>
  );

  const bottomPremiumSection =
    profile.has_premium ||
    !isPremiumAvailableInCountry(runtimeData.data) ? null : (
      <section className={styles["bottom-banner"]}>
        <div className={styles["bottom-banner-wrapper"]}>
          <div className={styles["bottom-banner-content"]}>
            <Localized
              id="banner-pack-upgrade-headline-2-html"
              elems={{ strong: <strong /> }}
            >
              <h3 />
            </Localized>
            <p>{l10n.getString("banner-pack-upgrade-copy-2")}</p>
            <LinkButton
              href={getPremiumSubscribeLink(runtimeData.data)}
              ref={bottomBannerSubscriptionLinkRef}
              onClick={() =>
                trackPurchaseStart({ label: "profile-bottom-promo" })
              }
            >
              {l10n.getString("banner-pack-upgrade-cta")}
            </LinkButton>
          </div>
          <img src={BottomBannerIllustration.src} alt="" />
        </div>
      </section>
    );

  const banners = (
    <section className={styles["banners-wrapper"]}>
      <ProfileBanners
        profile={profile}
        user={user}
        onCreateSubdomain={setCustomSubdomain}
        runtimeData={runtimeData.data}
        aliases={allAliases}
      />
    </section>
  );
  const topBanners = allAliases.length > 0 ? banners : null;
  const bottomBanners = allAliases.length === 0 ? banners : null;

  return (
    <>
      <AddonData
        aliases={allAliases}
        profile={profile}
        runtimeData={runtimeData.data}
        totalBlockedEmails={profile.emails_blocked}
        totalForwardedEmails={profile.emails_forwarded}
      />
      <Layout runtimeData={runtimeData.data}>
        <main className={styles["profile-wrapper"]}>
          {stats}
          {topBanners}
          <section className={styles["main-wrapper"]}>
            <Onboarding
              aliases={allAliases}
              onCreate={() => createAlias({ mask_type: "random" })}
            />
            <AliasList
              aliases={allAliases}
              onCreate={createAlias}
              onUpdate={updateAlias}
              onDelete={deleteAlias}
              profile={profile}
              user={user}
              runtimeData={runtimeData.data}
            />
            <p className={styles["size-information"]}>
              {l10n.getString("profile-supports-email-forwarding", {
                size: getRuntimeConfig().emailSizeLimitNumber,
                unit: getRuntimeConfig().emailSizeLimitUnit,
              })}
            </p>
          </section>
          {bottomBanners}
        </main>
        <aside>{bottomPremiumSection}</aside>
        <Tips profile={profile} />
      </Layout>
    </>
  );
};

const StatExplainer = (props: { children: React.ReactNode }) => {
  const { l10n } = useLocalization();
  const explainerState = useMenuTriggerState({});
  const overlayRef = useRef<HTMLDivElement>(null);
  const openButtonRef = useRef<HTMLButtonElement>(null);
  const closeButtonRef = useRef<HTMLButtonElement>(null);
  const { triggerProps } = useOverlayTrigger(
    { type: "dialog" },
    explainerState,
    openButtonRef
  );

  const openButtonProps = useButton(
    { onPress: () => explainerState.open() },
    openButtonRef
  ).buttonProps;
  const closeButtonProps = useButton(
    { onPress: explainerState.close },
    closeButtonRef
  ).buttonProps;

  const positionProps = useOverlayPosition({
    targetRef: openButtonRef,
    overlayRef: overlayRef,
    placement: "bottom",
    // $spacing-sm is 8px:
    offset: 8,
    isOpen: explainerState.isOpen,
  }).overlayProps;

  return (
    <div
      className={`${styles["learn-more-wrapper"]} ${
        explainerState.isOpen ? styles["is-open"] : styles["is-closed"]
      }`}
    >
      <button
        {...openButtonProps}
        {...triggerProps}
        ref={openButtonRef}
        className={styles["open-button"]}
      >
        {l10n.getString("profile-stat-learn-more")}
      </button>
      {explainerState.isOpen && (
        <StatExplainerTooltip
          ref={overlayRef}
          overlayProps={{
            isOpen: explainerState.isOpen,
            isDismissable: true,
            onClose: explainerState.close,
          }}
          positionProps={positionProps}
        >
          <button
            ref={closeButtonRef}
            {...closeButtonProps}
            className={styles["close-button"]}
          >
            <CloseIcon alt={l10n.getString("profile-stat-learn-more-close")} />
          </button>
          {props.children}
        </StatExplainerTooltip>
      )}
    </div>
  );
};

type StatExplainerTooltipProps = {
  children: ReactNode;
  overlayProps: Parameters<typeof useOverlay>[0];
  positionProps: HTMLAttributes<HTMLDivElement>;
};
const StatExplainerTooltip = forwardRef<
  HTMLDivElement,
  StatExplainerTooltipProps
>(function StatExplainerTooltipWithForwardedRef(props, overlayRef) {
  const { overlayProps } = useOverlay(
    props.overlayProps,
    overlayRef as RefObject<HTMLDivElement>
  );

  return (
    <FocusScope restoreFocus>
      <div
        {...overlayProps}
        {...props.positionProps}
        style={{
          ...props.positionProps.style,
          // Don't let `useOverlayPosition` handle the horizontal positioning,
          // as it will align the tooltip with the `.stat` element, whereas we
          // want it to span almost the full width on mobile:
          left: undefined,
          right: undefined,
        }}
        ref={overlayRef}
        className={styles["learn-more-tooltip"]}
      >
        {props.children}
      </div>
    </FocusScope>
  );
});

export default Profile;

1	import { Localized, useLocalization } from "@fluent/react";	1✔
2	import type { NextPage } from "next";
3	import {
4	forwardRef,
5	HTMLAttributes,
6	ReactNode,
7	RefObject,
8	useEffect,
9	useRef,
10	} from "react";	1✔
11	import { event as gaEvent } from "react-ga";	1✔
12	import {
13	FocusScope,
14	useButton,
15	useOverlay,
16	useOverlayPosition,
17	useOverlayTrigger,
18	} from "react-aria";	1✔
19	import { useMenuTriggerState } from "react-stately";	1✔
20	import { toast } from "react-toastify";	1✔
21	import styles from "./profile.module.scss";	1✔
22	import BottomBannerIllustration from "../../../public/images/woman-couch-left.svg";	1✔
23	import { CheckBadgeIcon } from "../../components/Icons";	1✔
24	import { Layout } from "../../components/layout/Layout";	1✔
25	import { useProfiles } from "../../hooks/api/profile";	1✔
26	import {
27	AliasData,
28	getAllAliases,
29	getFullAddress,
30	useAliases,
31	} from "../../hooks/api/aliases";	1✔
32	import { useUsers } from "../../hooks/api/user";	1✔
33	import { AliasList } from "../../components/dashboard/aliases/AliasList";	1✔
34	import { ProfileBanners } from "../../components/dashboard/ProfileBanners";	1✔
35	import { LinkButton } from "../../components/Button";	1✔
36	import { useRuntimeData } from "../../hooks/api/runtimeData";	1✔
37	import {
38	getPremiumSubscribeLink,
39	isPremiumAvailableInCountry,
40	} from "../../functions/getPlan";	1✔
41	import { useGaViewPing } from "../../hooks/gaViewPing";	1✔
42	import { trackPurchaseStart } from "../../functions/trackPurchase";	1✔
43	import { PremiumOnboarding } from "../../components/dashboard/PremiumOnboarding";	1✔
44	import { Onboarding } from "../../components/dashboard/Onboarding";	1✔
45	import { getRuntimeConfig } from "../../config";	1✔
46	import { SubdomainIndicator } from "../../components/dashboard/subdomain/SubdomainIndicator";	1✔
47	import { Tips } from "../../components/dashboard/tips/Tips";	1✔
48	import { clearCookie, getCookie } from "../../functions/cookies";	1✔
49	import { getLocale } from "../../functions/getLocale";	1✔
50	import { InfoTooltip } from "../../components/InfoTooltip";	1✔
51	import { AddonData } from "../../components/dashboard/AddonData";	1✔
52	import { useAddonData } from "../../hooks/addon";	1✔
53	import { CloseIcon } from "../../components/Icons";
54	import { isFlagActive } from "../../functions/waffle";	1✔
55
56	const Profile: NextPage = () => {	1✔
57	const runtimeData = useRuntimeData();	47✔
58	const profileData = useProfiles();	47✔
59	const userData = useUsers();	47✔
60	const aliasData = useAliases();	47✔
61	const addonData = useAddonData();	47✔
62	const { l10n } = useLocalization();	47✔
63	const bottomBannerSubscriptionLinkRef = useGaViewPing({	47✔
64	category: "Purchase Button",
65	label: "profile-bottom-promo",
66	});
67
68	useEffect(() => {	47✔
69	// This cookie is set in `trackPurchaseStart()`
70	const hasClickedPurchaseCookie = getCookie("clicked-purchase") === "true";	46✔
71	if (hasClickedPurchaseCookie && profileData.data?.[0].has_premium) {	46!
72	gaEvent({	×
73	// This used to be an event set by the server;
74	// I kept that name even though it's now generated by the client
75	// to ensure reports remain consistent:
76	category: "server event",
77	action: "fired",
78	label: "user_purchased_premium",
79	});
80	clearCookie("clicked-purchase");	×
81	}
82	}, [profileData.data]);
83
84	if (!userData.isValidating && userData.error) {	46!
85	document.location.assign(getRuntimeConfig().fxaLoginUrl);	×
86	}
87
88	const profile = profileData.data?.[0];	46!
89	const user = userData.data?.[0];	46!
90	if (	46!
91	!runtimeData.data \|\|	230✔
92	!profile \|\|
93	!user \|\|
94	!aliasData.randomAliasData.data \|\|
95	!aliasData.customAliasData.data
96	) {
97	// TODO: Show a loading spinner?
98	return null;	×
99	}
100
101	const setCustomSubdomain = async (customSubdomain: string) => {	46✔
102	const response = await profileData.setSubdomain(customSubdomain);	×
103	if (!response.ok) {	×
104	toast(	×
105	l10n.getString("error-subdomain-not-available-2", {
106	unavailable_subdomain: customSubdomain,
107	}),
108	{ type: "error" }
109	);
110	}
111	addonData.sendEvent("subdomainClaimed", { subdomain: customSubdomain });	×
112	};
113
114	const allAliases = getAllAliases(	46✔
115	aliasData.randomAliasData.data,
116	aliasData.customAliasData.data
117	);
118
119	if (	46✔
120	profile.has_premium &&	71✔
121	profile.onboarding_state < getRuntimeConfig().maxOnboardingAvailable
122	) {
123	const onNextStep = (step: number) => {	7✔
124	profileData.update(profile.id, {	1✔
125	onboarding_state: step,
126	});
127	};
128
129	return (	7✔
130	<>
131	<AddonData
132	aliases={allAliases}
133	profile={profile}
134	runtimeData={runtimeData.data}
135	totalBlockedEmails={profile.emails_blocked}
136	totalForwardedEmails={profile.emails_forwarded}
137	/>
138	<Layout runtimeData={runtimeData.data}>
139	<PremiumOnboarding
140	profile={profile}
141	onNextStep={onNextStep}
142	onPickSubdomain={setCustomSubdomain}
143	/>
144	</Layout>
145	</>
146	);
147	}
148
149	const createAlias = async (	39✔
150	options:
151	\| { mask_type: "random" }
152	\| { mask_type: "custom"; address: string; blockPromotionals: boolean }
153	) => {
154	try {	1✔
155	const response = await aliasData.create(options);	1✔
156	if (!response.ok) {	1!
157	throw new Error(	×
158	"Immediately caught to land in the same code path as failed requests."
159	);
160	}
161	addonData.sendEvent("aliasListUpdate");	1✔
162	} catch (error) {
163	toast(l10n.getString("error-mask-create-failed"), { type: "error" });	×
164	}
165	};
166
167	const updateAlias = async (	39✔
168	alias: AliasData,
169	updatedFields: Partial<AliasData>
170	) => {
171	try {	3✔
172	const response = await aliasData.update(alias, updatedFields);	3✔
173	if (!response.ok) {	3!
174	throw new Error(	×
175	"Immediately caught to land in the same code path as failed requests."
176	);
177	}
178	} catch (error) {
179	toast(	3✔
180	l10n.getString("error-mask-update-failed", {
181	alias: getFullAddress(alias),
182	}),
183	{ type: "error" }
184	);
185	}
186	};
187
188	const deleteAlias = async (alias: AliasData) => {	39✔
189	try {	1✔
190	const response = await aliasData.delete(alias);	1✔
191	if (!response.ok) {	1!
192	throw new Error(	×
193	"Immediately caught to land in the same code path as failed requests."
194	);
195	}
196	addonData.sendEvent("aliasListUpdate");	1✔
197	} catch (error: unknown) {
198	toast(	×
199	l10n.getString("error-mask-delete-failed", {
200	alias: getFullAddress(alias),
201	}),
202	{ type: "error" }
203	);
204	}
205	};
206
207	const subdomainMessage =
208	typeof profile.subdomain === "string" ? (	39✔
209	<>
210	<span>{l10n.getString("profile-label-subdomain")}</span>
211	<span className={styles["profile-registered-domain-value"]}>
212	<SubdomainIndicator
213	subdomain={profile.subdomain}
214	onCreateAlias={(
215	address: string,
216	settings: { blockPromotionals: boolean }
217	) =>
218	createAlias({	×
219	mask_type: "custom",
220	address: address,
221	blockPromotionals: settings.blockPromotionals,
222	})
223	}
224	/>
225	</span>
226	</>
227	) : (
228	<>
229	<a className={styles["open-button"]} href="#mpp-choose-subdomain">
230	{l10n.getString("profile-label-create-subdomain")}
231	</a>
232	<InfoTooltip
233	alt={l10n.getString("profile-label-subdomain-tooltip-trigger")}
234	>
235	{l10n.getString("profile-label-subdomain-tooltip")}
236	</InfoTooltip>
237	</>
238	);
239
240	const numberFormatter = new Intl.NumberFormat(getLocale(l10n), {	39✔
241	notation: "compact",
242	compactDisplay: "short",
243	});
244	// Non-Premium users have only five aliases, making the stats less insightful,
245	// so only show them for Premium users:
246	const stats = profile.has_premium ? (	39✔
247	<section className={styles.header}>
248	<div className={styles["header-wrapper"]}>
249	<div className={styles["user-details"]}>
250	<Localized
251	id="profile-label-welcome-html"
252	vars={{
253	email: user.email,
254	}}
255	elems={{
256	span: <span className={styles.lead} />,
257	}}
258	>
259	<span className={styles.greeting} />
260	</Localized>
261	<strong className={styles.subdomain}>
262	<CheckBadgeIcon alt="" />
263	{subdomainMessage}
264	</strong>
265	</div>
266	<dl className={styles["account-stats"]}>
267	<div className={styles.stat}>
268	<dt className={styles.label}>
269	{l10n.getString("profile-stat-label-aliases-used-2")}
270	</dt>
271	<dd className={styles.value}>
272	{numberFormatter.format(allAliases.length)}
273	</dd>
274	</div>
275	<div className={styles.stat}>
276	<dt className={styles.label}>
277	{l10n.getString("profile-stat-label-blocked")}
278	</dt>
279	<dd className={styles.value}>
280	{numberFormatter.format(profile.emails_blocked)}
281	</dd>
282	</div>
283	<div className={styles.stat}>
284	<dt className={styles.label}>
285	{l10n.getString("profile-stat-label-forwarded")}
286	</dt>
287	<dd className={styles.value}>
288	{numberFormatter.format(profile.emails_forwarded)}
289	</dd>
290	</div>
291	{/*
292	Only show tracker blocking stats if the back-end provides them:
293	*/}
294	{isFlagActive(runtimeData.data, "tracker_removal") &&	18!
295	typeof profile.level_one_trackers_blocked === "number" && (
296	<div className={styles.stat}>
297	<dt className={styles.label}>
298	{l10n.getString("profile-stat-label-trackers-removed")}
299	</dt>
300	<dd className={styles.value}>
301	{numberFormatter.format(profile.level_one_trackers_blocked)}
302	<StatExplainer>
303	<p>
304	{l10n.getString(
305	"profile-stat-label-trackers-learn-more-part1"
306	)}
307	</p>
308	<p>
309	{l10n.getString(
310	"profile-stat-label-trackers-learn-more-part2-2"
311	)}
312	</p>
313	</StatExplainer>
314	</dd>
315	</div>
316	)}
317	</dl>
318	</div>
319	</section>
320	) : (
321	<Localized
322	id="profile-label-welcome-html"
323	vars={{ email: user.email }}
324	elems={{ span: <span /> }}
325	>
326	<section className={styles["no-premium-header"]} />
327	</Localized>
328	);
329
330	const bottomPremiumSection =
331	profile.has_premium \|\|	39✔
332	!isPremiumAvailableInCountry(runtimeData.data) ? null : (
333	<section className={styles["bottom-banner"]}>
334	<div className={styles["bottom-banner-wrapper"]}>
335	<div className={styles["bottom-banner-content"]}>
336	<Localized
337	id="banner-pack-upgrade-headline-2-html"
338	elems={{ strong: <strong /> }}
339	>
340	<h3 />
341	</Localized>
342	<p>{l10n.getString("banner-pack-upgrade-copy-2")}</p>
343	<LinkButton
344	href={getPremiumSubscribeLink(runtimeData.data)}
345	ref={bottomBannerSubscriptionLinkRef}
346	onClick={() =>
347	trackPurchaseStart({ label: "profile-bottom-promo" })	×
348	}
349	>
350	{l10n.getString("banner-pack-upgrade-cta")}
351	</LinkButton>
352	</div>
353	<img src={BottomBannerIllustration.src} alt="" />
354	</div>
355	</section>
356	);
357
358	const banners = (
359	<section className={styles["banners-wrapper"]}>	39✔
360	<ProfileBanners
361	profile={profile}
362	user={user}
363	onCreateSubdomain={setCustomSubdomain}
364	runtimeData={runtimeData.data}
365	aliases={allAliases}
366	/>
367	</section>
368	);
369	const topBanners = allAliases.length > 0 ? banners : null;	39✔
370	const bottomBanners = allAliases.length === 0 ? banners : null;	39✔
371
372	return (	39✔
373	<>
374	<AddonData
375	aliases={allAliases}
376	profile={profile}
377	runtimeData={runtimeData.data}
378	totalBlockedEmails={profile.emails_blocked}
379	totalForwardedEmails={profile.emails_forwarded}
380	/>
381	<Layout runtimeData={runtimeData.data}>
382	<main className={styles["profile-wrapper"]}>
383	{stats}
384	{topBanners}
385	<section className={styles["main-wrapper"]}>
386	<Onboarding
387	aliases={allAliases}
388	onCreate={() => createAlias({ mask_type: "random" })}	1✔
389	/>
390	<AliasList
391	aliases={allAliases}
392	onCreate={createAlias}
393	onUpdate={updateAlias}
394	onDelete={deleteAlias}
395	profile={profile}
396	user={user}
397	runtimeData={runtimeData.data}
398	/>
399	<p className={styles["size-information"]}>
400	{l10n.getString("profile-supports-email-forwarding", {
401	size: getRuntimeConfig().emailSizeLimitNumber,
402	unit: getRuntimeConfig().emailSizeLimitUnit,
403	})}
404	</p>
405	</section>
406	{bottomBanners}
407	</main>
408	<aside>{bottomPremiumSection}</aside>
409	<Tips profile={profile} />
410	</Layout>
411	</>
412	);
413	};
414
415	const StatExplainer = (props: { children: React.ReactNode }) => {	1✔
416	const { l10n } = useLocalization();	×
417	const explainerState = useMenuTriggerState({});	×
418	const overlayRef = useRef<HTMLDivElement>(null);	×
419	const openButtonRef = useRef<HTMLButtonElement>(null);	×
420	const closeButtonRef = useRef<HTMLButtonElement>(null);	×
421	const { triggerProps } = useOverlayTrigger(	×
422	{ type: "dialog" },
423	explainerState,
424	openButtonRef
425	);
426
427	const openButtonProps = useButton(	×
428	{ onPress: () => explainerState.open() },	×
429	openButtonRef
430	).buttonProps;
431	const closeButtonProps = useButton(	×
432	{ onPress: explainerState.close },
433	closeButtonRef
434	).buttonProps;
435
436	const positionProps = useOverlayPosition({	×
437	targetRef: openButtonRef,
438	overlayRef: overlayRef,
439	placement: "bottom",
440	// $spacing-sm is 8px:
441	offset: 8,
442	isOpen: explainerState.isOpen,
443	}).overlayProps;
444
445	return (	×
446	<div
447	className={`${styles["learn-more-wrapper"]} ${
448	explainerState.isOpen ? styles["is-open"] : styles["is-closed"]	×
449	}`}
450	>
451	<button
452	{...openButtonProps}
453	{...triggerProps}
454	ref={openButtonRef}
455	className={styles["open-button"]}
456	>
457	{l10n.getString("profile-stat-learn-more")}
458	</button>
459	{explainerState.isOpen && (	×
460	<StatExplainerTooltip
461	ref={overlayRef}
462	overlayProps={{
463	isOpen: explainerState.isOpen,
464	isDismissable: true,
465	onClose: explainerState.close,
466	}}
467	positionProps={positionProps}
468	>
469	<button
470	ref={closeButtonRef}
471	{...closeButtonProps}
472	className={styles["close-button"]}
473	>
474	<CloseIcon alt={l10n.getString("profile-stat-learn-more-close")} />
475	</button>
476	{props.children}
477	</StatExplainerTooltip>
478	)}
479	</div>
480	);
481	};
482
483	type StatExplainerTooltipProps = {
484	children: ReactNode;
485	overlayProps: Parameters<typeof useOverlay>[0];
486	positionProps: HTMLAttributes<HTMLDivElement>;
487	};
488	const StatExplainerTooltip = forwardRef<	1✔
489	HTMLDivElement,
490	StatExplainerTooltipProps
491	>(function StatExplainerTooltipWithForwardedRef(props, overlayRef) {
492	const { overlayProps } = useOverlay(	×
493	props.overlayProps,
494	overlayRef as RefObject<HTMLDivElement>
495	);
496
497	return (	×
498	<FocusScope restoreFocus>
499	<div
500	{...overlayProps}
501	{...props.positionProps}
502	style={{
503	...props.positionProps.style,
504	// Don't let `useOverlayPosition` handle the horizontal positioning,
505	// as it will align the tooltip with the `.stat` element, whereas we
506	// want it to span almost the full width on mobile:
507	left: undefined,
508	right: undefined,
509	}}
510	ref={overlayRef}
511	className={styles["learn-more-tooltip"]}
512	>
513	{props.children}
514	</div>
515	</FocusScope>
516	);
517	});
518
519	export default Profile;	46✔

mozilla / fx-private-relay / 1f0f8ecb-4bd0-435e-8d49-d84d2d7ca16d

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