• Home
  • Features
  • Pricing
  • Docs
  • Announcements
  • Sign In

mozilla / fx-private-relay / bedfdc4b-f42b-4a2a-af19-8a456d6b89dc

04 Mar 2024 08:09PM CUT coverage: 74.119%. Remained the same
bedfdc4b-f42b-4a2a-af19-8a456d6b89dc

push

circleci

web-flow
Merge pull request #4473 from mozilla/dependabot/pip/django-csp-3.8

Bump django-csp from 3.7 to 3.8

2046 of 3010 branches covered (67.97%)

Branch coverage included in aggregate %.

6514 of 8539 relevant lines covered (76.29%)

20.66 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
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
};
STATUS · Troubleshooting · Open an Issue · Sales · Support · CAREERS · ENTERPRISE · START FREE · SCHEDULE DEMO
ANNOUNCEMENTS · TWITTER · TOS & SLA · Supported CI Services · What's a CI service? · Automated Testing

© 2025 Coveralls, Inc