682b4a15-7731-49f3-b2a8-f7087e21a341

Committed 03 Mar 2025 08:44PM CUT coverage: 85.123% (+0.009%) from 85.114%

Build # 682b4a15-7731-49f3-b2a8-f7087e21a341

Build Type

push

circleci

Committed by

web-flow

Commit Message

Merge pull request #5407 from mozilla/dependabot/npm_and_yarn/msw-2.7.3

Bump msw from 2.7.1 to 2.7.3

Run Details

2434 of 3561 branches covered (68.35%)

Branch coverage included in aggregate %.

17048 of 19326 relevant lines covered (88.21%)

9.88 hits per line

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

0.0

/frontend/src/components/layout/topmessage/NpsSurvey.tsx

import styles from "./NpsSurvey.module.scss";
import { useFirstSeen } from "../../../hooks/firstSeen";
import { useLocalDismissal } from "../../../hooks/localDismissal";
import { useIsLoggedIn } from "../../../hooks/session";
import { useProfiles } from "../../../hooks/api/profile";
import { CloseIcon } from "../../Icons";
import { useGaEvent } from "../../../hooks/gaEvent";
import { useL10n } from "../../../hooks/l10n";

/**
 * Quickly survey the user for input to our Net Promotor Score.
 *
 * @deprecated We'll replace this with {@link CsatSurvey}.
 */
export const NpsSurvey = () => {
  const profileData = useProfiles();
  const dismissal = useLocalDismissal(
    "nps-survey_" + profileData.data?.[0].id,
    { duration: 30 * 24 * 60 * 60 },
  );
  const firstSeen = useFirstSeen();
  const isLoggedIn = useIsLoggedIn();
  const l10n = useL10n();
  const gaEvent = useGaEvent();

  const hasBeenUserForThreeDays =
    isLoggedIn === "logged-in" &&
    firstSeen instanceof Date &&
    Date.now() - firstSeen.getTime() > 3 * 24 * 60 * 60;

  // TODO: Show if either the user has been one for three days,
  // *or* they've been a Premium customer for three days:
  if (dismissal.isDismissed || !hasBeenUserForThreeDays) {
    return null;
  }

  const submit = (likelihood: number) => {
    dismissal.dismiss();
    let label = "passive";
    let npsValue = 0;
    if (likelihood <= 6) {
      label = "detractor";
      npsValue = -1;
    }
    if (likelihood >= 9) {
      label = "promoter";
      npsValue = 1;
    }
    gaEvent({
      category: "NPS Survey",
      action: "submitted",
      label: label,
      value: likelihood,
      dimension1: label,
      metric1: 1,
      metric2: likelihood,
      metric3: npsValue,
    });
  };

  return (
    <aside className={styles.wrapper}>
      <div className={styles.prompt}>{l10n.getString("survey-question-1")}</div>
      <div className={styles.scale}>
        <span aria-hidden={true} className={styles.legend}>
          {l10n.getString("survey-option-not-likely")}
        </span>
        <ol>
          <li>
            <button className={styles.likelihood} onClick={() => submit(1)}>
              1
            </button>
          </li>
          <li>
            <button className={styles.likelihood} onClick={() => submit(2)}>
              2
            </button>
          </li>
          <li>
            <button className={styles.likelihood} onClick={() => submit(3)}>
              3
            </button>
          </li>
          <li>
            <button className={styles.likelihood} onClick={() => submit(4)}>
              4
            </button>
          </li>
          <li>
            <button className={styles.likelihood} onClick={() => submit(5)}>
              5
            </button>
          </li>
          <li>
            <button className={styles.likelihood} onClick={() => submit(6)}>
              6
            </button>
          </li>
          <li>
            <button className={styles.likelihood} onClick={() => submit(7)}>
              7
            </button>
          </li>
          <li>
            <button className={styles.likelihood} onClick={() => submit(8)}>
              8
            </button>
          </li>
          <li>
            <button className={styles.likelihood} onClick={() => submit(9)}>
              9
            </button>
          </li>
          <li>
            <button className={styles.likelihood} onClick={() => submit(10)}>
              10
            </button>
          </li>
        </ol>
        <span aria-hidden={true} className={styles.legend}>
          {l10n.getString("survey-option-very-likely")}
        </span>
      </div>
      <button
        className={styles["dismiss-button"]}
        onClick={() => dismissal.dismiss()}
        title={l10n.getString("survey-option-dismiss")}
      >
        <CloseIcon alt={l10n.getString("survey-option-dismiss")} />
      </button>
    </aside>
  );
};

1	import styles from "./NpsSurvey.module.scss";	×
2	import { useFirstSeen } from "../../../hooks/firstSeen";	×
3	import { useLocalDismissal } from "../../../hooks/localDismissal";	×
4	import { useIsLoggedIn } from "../../../hooks/session";	×
5	import { useProfiles } from "../../../hooks/api/profile";	×
6	import { CloseIcon } from "../../Icons";	×
7	import { useGaEvent } from "../../../hooks/gaEvent";	×
8	import { useL10n } from "../../../hooks/l10n";	×
9
10	/**
11	* Quickly survey the user for input to our Net Promotor Score.
12	*
13	* @deprecated We'll replace this with {@link CsatSurvey}.
14	*/
15	export const NpsSurvey = () => {	×
16	const profileData = useProfiles();	×
17	const dismissal = useLocalDismissal(	×
18	"nps-survey_" + profileData.data?.[0].id,
19	{ duration: 30 * 24 * 60 * 60 },
20	);
21	const firstSeen = useFirstSeen();	×
22	const isLoggedIn = useIsLoggedIn();	×
23	const l10n = useL10n();	×
24	const gaEvent = useGaEvent();	×
25
26	const hasBeenUserForThreeDays =
27	isLoggedIn === "logged-in" &&	×
28	firstSeen instanceof Date &&
29	Date.now() - firstSeen.getTime() > 3 * 24 * 60 * 60;
30
31	// TODO: Show if either the user has been one for three days,
32	// or they've been a Premium customer for three days:
33	if (dismissal.isDismissed \|\| !hasBeenUserForThreeDays) {	×
34	return null;	×
35	}
36
37	const submit = (likelihood: number) => {	×
38	dismissal.dismiss();	×
39	let label = "passive";	×
40	let npsValue = 0;	×
41	if (likelihood <= 6) {	×
42	label = "detractor";	×
43	npsValue = -1;	×
44	}
45	if (likelihood >= 9) {	×
46	label = "promoter";	×
47	npsValue = 1;	×
48	}
49	gaEvent({	×
50	category: "NPS Survey",
51	action: "submitted",
52	label: label,
53	value: likelihood,
54	dimension1: label,
55	metric1: 1,
56	metric2: likelihood,
57	metric3: npsValue,
58	});
59	};
60
61	return (
62	<aside className={styles.wrapper}>
63	<div className={styles.prompt}>{l10n.getString("survey-question-1")}</div>
64	<div className={styles.scale}>
65	<span aria-hidden={true} className={styles.legend}>
66	{l10n.getString("survey-option-not-likely")}
67	</span>
68	<ol>
69	<li>
70	<button className={styles.likelihood} onClick={() => submit(1)}>	×
71	1
72	</button>
73	</li>
74	<li>
75	<button className={styles.likelihood} onClick={() => submit(2)}>	×
76	2
77	</button>
78	</li>
79	<li>
80	<button className={styles.likelihood} onClick={() => submit(3)}>	×
81	3
82	</button>
83	</li>
84	<li>
85	<button className={styles.likelihood} onClick={() => submit(4)}>	×
86	4
87	</button>
88	</li>
89	<li>
90	<button className={styles.likelihood} onClick={() => submit(5)}>	×
91	5
92	</button>
93	</li>
94	<li>
95	<button className={styles.likelihood} onClick={() => submit(6)}>	×
96	6
97	</button>
98	</li>
99	<li>
100	<button className={styles.likelihood} onClick={() => submit(7)}>	×
101	7
102	</button>
103	</li>
104	<li>
105	<button className={styles.likelihood} onClick={() => submit(8)}>	×
106	8
107	</button>
108	</li>
109	<li>
110	<button className={styles.likelihood} onClick={() => submit(9)}>	×
111	9
112	</button>
113	</li>
114	<li>
115	<button className={styles.likelihood} onClick={() => submit(10)}>	×
116	10
117	</button>
118	</li>
119	</ol>
120	<span aria-hidden={true} className={styles.legend}>
121	{l10n.getString("survey-option-very-likely")}
122	</span>
123	</div>
124	<button
125	className={styles["dismiss-button"]}
126	onClick={() => dismissal.dismiss()}	×
127	title={l10n.getString("survey-option-dismiss")}
128	>
129	<CloseIcon alt={l10n.getString("survey-option-dismiss")} />
130	</button>
131	</aside>
132	);
133	};

mozilla / fx-private-relay / 682b4a15-7731-49f3-b2a8-f7087e21a341

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