onChange(e.target.value)}>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+Agreeance.propTypes = {
+ id: PropTypes.string.isRequired,
+ onChange: PropTypes.func.isRequired,
+ statement: PropTypes.string.isRequired,
+};
+
+export default Agreeance;
diff --git a/src/components/FeedbackModal/FeedbackModal.js b/src/components/FeedbackModal/FeedbackModal.js
new file mode 100644
index 00000000000..c9ac4b66fdd
--- /dev/null
+++ b/src/components/FeedbackModal/FeedbackModal.js
@@ -0,0 +1,409 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import shuffle from 'lodash/shuffle';
+import {
+ Button,
+ Icon,
+ Portal,
+ useLocale,
+ useTranslation,
+ useTessen,
+} from '@newrelic/gatsby-theme-newrelic';
+import RecaptchaFooter from '@newrelic/gatsby-theme-newrelic/src/components/SignupModal/RecaptchaFooter';
+import Cookies from 'js-cookie';
+import { v4 as uuidv4 } from 'uuid';
+
+import Agreeance from './Agreeance';
+import NumberRater from './NumberRater';
+import { SUPRQ_QUESTIONS } from '../../utils/constants';
+
+const FORM_VERSION = 1;
+const questions = shuffle(['q1', 'q2', 'q3', 'q4', 'q5', 'q6', 'q7', 'q8']);
+// 1/20 chance to see the modal
+const nat20 = Math.ceil(Math.random() * 20) === 20;
+const recaptchaReady = () => {
+ return new Promise((resolve, reject) => {
+ try {
+ window.grecaptcha.ready(resolve);
+ } catch (err) {
+ reject(err);
+ }
+ });
+};
+
+const generateRecaptchaToken = () => {
+ // turn the recaptcha thenable into an actual promise
+ return new Promise((resolve, reject) => {
+ window.grecaptcha
+ .execute('6Lehf-4oAAAAAK-sCeVSRUrRQfImJdwgc2pPkOwZ', {
+ action: 'surveyFeedback',
+ })
+ .then(resolve, reject);
+ });
+};
+
+const FeedbackModal = ({ onClose }) => {
+ const SUPRQ_SCORE = {
+ 'strongly-disagree': 1,
+ 'somewhat-disagree': 2,
+ neutral: 3,
+ 'somewhat-agree': 4,
+ 'strongly-agree': 5,
+ };
+ const surveyDismissed = Cookies.get('surveyDismissed') === 'true';
+ const hadChanceToShow = Cookies.get('surveyHadChanceToShow') === 'true';
+ const shouldShow = useRef(nat20 && !hadChanceToShow && !surveyDismissed);
+ const tessen = useTessen();
+ const locale = useLocale();
+ const [step, setStep] = useState(0);
+ const [showThankYou, setShowThankYou] = useState(false);
+ const advance = () => setStep((s) => s + 1);
+ const [guid] = useState(uuidv4());
+
+ useEffect(() => {
+ if (shouldShow.current) {
+ tessen.track({
+ eventName: 'surveyDisplayed',
+ category: 'SurveyFeedback',
+ formVersion: FORM_VERSION,
+ });
+ }
+ Cookies.set('surveyHadChanceToShow', 'true', { expires: 1 });
+ }, [tessen, surveyDismissed]);
+
+ const setDismissedCookieAndClose = () => {
+ onClose();
+ Cookies.set('surveyDismissed', 'true', { expires: 90 });
+ };
+
+ const submitNpsScore = async (score) => {
+ tessen.track({
+ eventName: 'npsScoreSubmitted',
+ category: 'SurveyFeedback',
+ responseId: guid,
+ response: score,
+ formVersion: FORM_VERSION,
+ });
+ await recaptchaReady();
+ const recaptchaToken = await generateRecaptchaToken();
+ const npsSubmission = {
+ responseId: guid,
+ response: score,
+ formVersion: FORM_VERSION,
+ pageUrl: location.href,
+ locale: locale.locale,
+ recaptchaToken,
+ type: 'nps',
+ };
+ fetch(
+ 'https://docs-user-feedback-service.newrelic-external.com/survey-feedback',
+ {
+ method: 'POST',
+ headers: {
+ Accept: 'application/json',
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(npsSubmission),
+ }
+ );
+ advance();
+ };
+
+ const submitSuprQ = async (responseObj) => {
+ const responses = Object.entries(responseObj);
+ const recaptchaToken = await generateRecaptchaToken();
+ const suprQSubmission = {
+ responseId: guid,
+ formVersion: FORM_VERSION,
+ pageUrl: location.href,
+ locale: locale.locale,
+ responses: responses.map(([questionId, answer]) => ({
+ suprQuestion: SUPRQ_QUESTIONS[questionId],
+ response: answer,
+ score: SUPRQ_SCORE[answer],
+ })),
+ recaptchaToken,
+ type: 'suprQ',
+ };
+ fetch(
+ 'https://docs-user-feedback-service.newrelic-external.com/survey-feedback',
+ {
+ method: 'POST',
+ headers: {
+ Accept: 'application/json',
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(suprQSubmission),
+ }
+ );
+ responses.forEach((response) => {
+ const [questionId, answer] = response;
+ tessen.track({
+ eventName: 'suprQSubmitted',
+ category: 'SurveyFeedback',
+ responseId: guid,
+ suprQuestion: SUPRQ_QUESTIONS[questionId],
+ response: answer,
+ score: SUPRQ_SCORE[answer],
+ formVersion: FORM_VERSION,
+ });
+ });
+ advance();
+ };
+
+ const submitFreetext = async (text) => {
+ tessen.track({
+ eventName: 'freeTextSubmitted',
+ category: 'SurveyFeedback',
+ responseId: guid,
+ response: text,
+ formVersion: FORM_VERSION,
+ });
+ const recaptchaToken = await generateRecaptchaToken();
+ const freetextSubmission = {
+ responseId: guid,
+ response: text,
+ formVersion: FORM_VERSION,
+ pageUrl: location.href,
+ locale: locale.locale,
+ recaptchaToken,
+ type: 'freeText',
+ };
+ fetch(
+ 'https://docs-user-feedback-service.newrelic-external.com/survey-feedback',
+ {
+ method: 'POST',
+ headers: {
+ Accept: 'application/json',
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(freetextSubmission),
+ }
+ );
+ setShowThankYou(true);
+ const timer = setTimeout(() => {
+ setDismissedCookieAndClose();
+ }, 2000);
+ return () => clearTimeout(timer);
+ };
+
+ return (
+ !surveyDismissed &&
+ shouldShow.current && (
+