[Feature] Do not allow touchpoints form submission until 8 seconds ha…

…ve passed Attempt to avoid form submission by bots. Humans are unlikely to submit the form within 8 seconds of page load.
18F · Oct 15, 2024 · 5f17784 · 5f17784
1 parent cae6540
commit 5f17784
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 63 deletions.
diff --git a/js/components/touchpoints_page_helpful_survey/TouchpointsPageHelpfulSurvey.js b/js/components/touchpoints_page_helpful_survey/TouchpointsPageHelpfulSurvey.js
@@ -1,5 +1,4 @@
 import { useEffect, React } from "react";
-//import PropTypes from "prop-types";
 
 /**
  * Creates the site TouchpointsPageHelpfulSurvey. Loads the JS code provided by
@@ -9,22 +8,89 @@ import { useEffect, React } from "react";
  * @returns {import('react').ReactElement} The rendered element
  */
 function TouchpointsPageHelpfulSurvey() {
+  const initialFormDelayMilliseconds = 8000;
+
   useEffect(() => {
-    // Hide the touchpoints footer when the form loads
     document.addEventListener("onTouchpointsFormLoaded", (e) => {
       if (
         e.detail &&
         e.detail.formComponent
           .formComponent()
           .getAttribute("data-touchpoints-form-id") === "8fc3c209"
       ) {
+        /**
+         * Set an initial timeout for the form. If the form is submitted too
+         * quickly (because it's a bot), then sendFeedback is a no-op
+         */
+        const originalSendFeedbackFunction =
+          e.detail.formComponent.sendFeedback;
+        /* eslint-disable no-empty */
+        e.detail.formComponent.sendFeedback = () => {};
+        /* eslint-enable no-empty */
+
+        setTimeout(() => {
+          e.detail.formComponent.sendFeedback = originalSendFeedbackFunction;
+        }, initialFormDelayMilliseconds);
+
         const touchpointsFooter = e.detail.formComponent
           .formComponent()
           .querySelector("footer.touchpoints-footer-banner");
+        const yesButton = e.detail.formComponent
+          .formComponent()
+          .querySelector('input.usa-radio__input[value="Yes"]');
+        const noButton = e.detail.formComponent
+          .formComponent()
+          .querySelector('input.usa-radio__input[value="No"]');
+        const questions = e.detail.formComponent
+          .formComponent()
+          .querySelectorAll(".questions .question");
+        const header = e.detail.formComponent
+          .formComponent()
+          .querySelector("header");
+        const submitButton = e.detail.formComponent
+          .formComponent()
+          .querySelector('button.submit_form_button[type="submit"]');
 
+        // Hide the touchpoints footer always
         if (touchpointsFooter) {
           touchpointsFooter.classList.add("hide");
         }
+
+        // Hide the second question and submit button initially
+        if (questions.length > 0 && submitButton) {
+          questions[1].classList.add("hide");
+          submitButton.classList.add("hide");
+        }
+
+        const handleYesNoButtonClick = (clickEvent, response) => {
+          if (questions.length > 0 && header && submitButton) {
+            // Hide the first form question and the header. Show the second along
+            // with the submit button.
+            questions[0].classList.add("hide");
+            header.classList.add("hide");
+            questions[1].classList.remove("hide");
+            submitButton.classList.remove("hide");
+          }
+
+          // Send metrics for the yes/no button click
+          gas4("was_this_helpful_submit", {
+            event_category: "cx_feedback",
+            event_action: "was_this_page_helpful_v2.0",
+            event_label: response,
+          });
+        };
+
+        if (yesButton) {
+          yesButton.addEventListener("click", (event) => {
+            handleYesNoButtonClick(event, "yes");
+          });
+        }
+
+        if (noButton) {
+          noButton.addEventListener("click", (event) => {
+            handleYesNoButtonClick(event, "no");
+          });
+        }
       }
     });
     require("../../lib/touchpoints_page_helpful_survey");

diff --git a/js/lib/eventhandler.js b/js/lib/eventhandler.js
@@ -29,65 +29,4 @@ export default function () {
       ga("send", "event", "Top-Download File", link, eventText);
     });
   });
-
-  document.addEventListener("onTouchpointsFormLoaded", (e) => {
-    // Adds event handlers for the "Was this page helpful?" form
-    if (
-      e.detail &&
-      e.detail.formComponent
-        .formComponent()
-        .getAttribute("data-touchpoints-form-id") === "8fc3c209"
-    ) {
-      const yesButton = e.detail.formComponent
-        .formComponent()
-        .querySelector('input.usa-radio__input[value="Yes"]');
-      const noButton = e.detail.formComponent
-        .formComponent()
-        .querySelector('input.usa-radio__input[value="No"]');
-      const questions = e.detail.formComponent
-        .formComponent()
-        .querySelectorAll(".questions .question");
-      const header = e.detail.formComponent
-        .formComponent()
-        .querySelector("header");
-      const submitButton = e.detail.formComponent
-        .formComponent()
-        .querySelector('button.submit_form_button[type="submit"]');
-
-      if (questions.length > 0 && submitButton) {
-        questions[1].classList.add("hide");
-        submitButton.classList.add("hide");
-      }
-
-      const handleYesNoButtonClick = (clickEvent, response) => {
-        if (questions.length > 0 && header && submitButton) {
-          // Hide the first form question and the header. Show the second along
-          // with the submit button.
-          questions[0].classList.add("hide");
-          header.classList.add("hide");
-          questions[1].classList.remove("hide");
-          submitButton.classList.remove("hide");
-        }
-
-        // Send metrics for the yes/no button click
-        gas4("was_this_helpful_submit", {
-          event_category: "cx_feedback",
-          event_action: "was_this_page_helpful_v2.0",
-          event_label: response,
-        });
-      };
-
-      if (yesButton) {
-        yesButton.addEventListener("click", (event) => {
-          handleYesNoButtonClick(event, "yes");
-        });
-      }
-
-      if (noButton) {
-        noButton.addEventListener("click", (event) => {
-          handleYesNoButtonClick(event, "no");
-        });
-      }
-    }
-  });
 }