[FEAT] Survey form revisions (Mintplex-Labs#1069)

* remove options from onboarding survey and allow next button to skip survey * update survey logic --------- Co-authored-by: timothycarambat <rambat1010@gmail.com>
Geronimoes · Apr 9, 2024 · 7407406 · 7407406
1 parent 0081192
commit 7407406
Showing 1 changed file with 29 additions and 81 deletions.
diff --git a/frontend/src/pages/OnboardingFlow/Steps/Survey/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/Survey/index.jsx
@@ -8,7 +8,11 @@ const TITLE = "Welcome to AnythingLLM";
 const DESCRIPTION = "Help us make AnythingLLM built for your needs. Optional.";
 
 async function sendQuestionnaire({ email, useCase, comment }) {
-  if (import.meta.env.DEV) return;
+  if (import.meta.env.DEV) {
+    console.log("sendQuestionnaire", { email, useCase, comment });
+    return;
+  }
+
   return fetch(`https://onboarding-wxich7363q-uc.a.run.app`, {
     method: "POST",
     body: JSON.stringify({
@@ -38,9 +42,25 @@ export default function Survey({ setHeader, setForwardBtn, setBackBtn }) {
       navigate(paths.onboarding.createWorkspace());
       return;
     }
-    if (submitRef.current) {
-      submitRef.current.click();
+
+    if (!formRef.current) {
+      skipSurvey();
+      return;
+    }
+
+    // Check if any inputs are not empty. If that is the case, trigger form validation.
+    // via the requestSubmit() handler
+    const formData = new FormData(formRef.current);
+    if (
+      !!formData.get("email") ||
+      !!formData.get("use_case") ||
+      !!formData.get("comment")
+    ) {
+      formRef.current.requestSubmit();
+      return;
     }
+
+    skipSurvey();
   }
 
   function skipSurvey() {
@@ -116,26 +136,24 @@ export default function Survey({ setHeader, setForwardBtn, setBackBtn }) {
           <div className="mt-2 gap-y-3 flex flex-col">
             <label
               className={`transition-all duration-300 w-full h-11 p-2.5 bg-white/10 rounded-lg flex justify-start items-center gap-2.5 cursor-pointer border border-transparent ${
-                selectedOption === "business"
-                  ? "border-white border-opacity-40"
-                  : ""
+                selectedOption === "job" ? "border-white border-opacity-40" : ""
               } hover:border-white/60`}
             >
               <input
                 type="radio"
                 name="use_case"
-                value={"business"}
-                checked={selectedOption === "business"}
+                value={"job"}
+                checked={selectedOption === "job"}
                 onChange={(e) => setSelectedOption(e.target.value)}
                 className="hidden"
               />
               <div
                 className={`w-4 h-4 rounded-full border-2 border-white mr-2 ${
-                  selectedOption === "business" ? "bg-white" : ""
+                  selectedOption === "job" ? "bg-white" : ""
                 }`}
               ></div>
               <div className="text-white text-sm font-medium font-['Plus Jakarta Sans'] leading-tight">
-                For my business
+                For work
               </div>
             </label>
             <label
@@ -159,77 +177,7 @@ export default function Survey({ setHeader, setForwardBtn, setBackBtn }) {
                 }`}
               ></div>
               <div className="text-white text-sm font-medium font-['Plus Jakarta Sans'] leading-tight">
-                For personal use
-              </div>
-            </label>
-            <label
-              className={`transition-all duration-300 w-full h-11 p-2.5 bg-white/10 rounded-lg flex justify-start items-center gap-2.5 cursor-pointer border border-transparent ${
-                selectedOption === "education"
-                  ? "border-white border-opacity-40"
-                  : ""
-              } hover:border-white/60`}
-            >
-              <input
-                type="radio"
-                name="use_case"
-                value={"education"}
-                checked={selectedOption === "education"}
-                onChange={(e) => setSelectedOption(e.target.value)}
-                className="hidden"
-              />
-              <div
-                className={`w-4 h-4 rounded-full border-2 border-white mr-2 ${
-                  selectedOption === "education" ? "bg-white" : ""
-                }`}
-              ></div>
-              <div className="text-white text-sm font-medium font-['Plus Jakarta Sans'] leading-tight">
-                For my education
-              </div>
-            </label>
-            <label
-              className={`transition-all duration-300 w-full h-11 p-2.5 bg-white/10 rounded-lg flex justify-start items-center gap-2.5 cursor-pointer border border-transparent ${
-                selectedOption === "side_hustle"
-                  ? "border-white border-opacity-40"
-                  : ""
-              } hover:border-white/60`}
-            >
-              <input
-                type="radio"
-                name="use_case"
-                value={"side_hustle"}
-                checked={selectedOption === "side_hustle"}
-                onChange={(e) => setSelectedOption(e.target.value)}
-                className="hidden"
-              />
-              <div
-                className={`w-4 h-4 rounded-full border-2 border-white mr-2 ${
-                  selectedOption === "side_hustle" ? "bg-white" : ""
-                }`}
-              ></div>
-              <div className="text-white text-sm font-medium font-['Plus Jakarta Sans'] leading-tight">
-                For my side-hustle
-              </div>
-            </label>
-            <label
-              className={`transition-all duration-300 w-full h-11 p-2.5 bg-white/10 rounded-lg flex justify-start items-center gap-2.5 cursor-pointer border border-transparent ${
-                selectedOption === "job" ? "border-white border-opacity-40" : ""
-              } hover:border-white/60`}
-            >
-              <input
-                type="radio"
-                name="use_case"
-                value={"job"}
-                checked={selectedOption === "job"}
-                onChange={(e) => setSelectedOption(e.target.value)}
-                className="hidden"
-              />
-              <div
-                className={`w-4 h-4 rounded-full border-2 border-white mr-2 ${
-                  selectedOption === "job" ? "bg-white" : ""
-                }`}
-              ></div>
-              <div className="text-white text-sm font-medium font-['Plus Jakarta Sans'] leading-tight">
-                For my job
+                For my personal use
               </div>
             </label>
             <label