update waitlist questions, add skip button

apps/formbricks-com/components/engine/Survey.tsx

@@ -17,8 +17,8 @@ export function Survey({ survey, formbricksUrl, formId }: SurveyProps) {
 
   const schema = useMemo(() => generateSchema(survey), [survey]);
 
-  const onPageSubmit = (updatedSubmission: any) => {
-    const nextPage = calculateNextPage(survey, updatedSubmission);
+  const navigateToNextPage = (currentSubmission: any) => {
+    const nextPage = calculateNextPage(survey, currentSubmission);
     setCurrentPage(nextPage);
     if (nextPage.endScreen) {
       setFinished(true);
@@ -57,7 +57,8 @@ export function Survey({ survey, formbricksUrl, formId }: SurveyProps) {
 
       <SurveyPage
         page={currentPage}
-        onSubmit={onPageSubmit}
+        onSkip={() => navigateToNextPage(submission)}
+        onSubmit={(updatedSubmission) => navigateToNextPage(updatedSubmission)}
         submission={submission}
         setSubmission={setSubmission}
         finished={finished}

apps/formbricks-com/components/engine/SurveyPage.tsx

@@ -7,6 +7,7 @@ import { SurveyPage } from "./engineTypes";
 
 interface SurveyProps {
   page: SurveyPage;
+  onSkip: () => void;
   onSubmit: (submission: any) => void;
   submission: any;
   setSubmission: (v: any) => void;
@@ -18,6 +19,7 @@ interface SurveyProps {
 
 export function SurveyPage({
   page,
+  onSkip,
   onSubmit,
   submission,
   setSubmission,
@@ -87,6 +89,7 @@ export function SurveyPage({
       setSubmittingPage(false);
       onSubmit(updatedSubmission);
       plausible(`waitlistSubmitPage-${page.id}`);
+      window.scrollTo(0, 0);
     } catch (e) {
       alert("There was an error sending this form. Please try again later.");
     }
@@ -121,15 +124,25 @@ export function SurveyPage({
           );
         })}
       </div>
-      {!finished && !(page.config?.autoSubmit && page.elements.length == 1) && (
-        <div className="mx-auto mt-8 flex w-full max-w-xl justify-end">
-          <Button
-            variant="primary"
-            type="submit"
-            onClick={() => window.scrollTo(0, 0)}
-            className="transition-all ease-in-out hover:scale-105">
-            Next
-          </Button>
+      {!finished && (
+        <div className="mx-auto mt-8 flex w-full justify-end">
+          {page.config?.allowSkip && (
+            <Button
+              variant="secondary"
+              type="button"
+              className="transition-all ease-in-out hover:scale-105"
+              onClick={() => onSkip()}>
+              Skip
+            </Button>
+          )}
+          {!(page.config?.autoSubmit && page.elements.length == 1) && (
+            <Button
+              variant="primary"
+              type="submit"
+              className="ml-2 transition-all ease-in-out hover:scale-105">
+              Next
+            </Button>
+          )}
         </div>
       )}
     </form>

apps/formbricks-com/components/engine/engineTypes.tsx

@@ -9,7 +9,8 @@ export interface SurveyPage {
   endScreen?: boolean;
   elements: SurveyElement[];
   config?: {
-    autoSubmit: boolean;
+    autoSubmit?: boolean;
+    allowSkip?: boolean;
   };
   branchingRules?: {
     type: "value";

apps/formbricks-com/pages/waitlist.tsx

@@ -364,22 +364,25 @@ const WaitlistPage = () => (
                   {
                     id: "scalingResearch",
                     type: "text",
-                    label: "The hardest part about scaling user research is...",
+                    label: "What is your approach for scaling user research?",
                     name: "scalingResearch",
-                    frontend: { placeholder: "Please complete the sentence." },
+                    frontend: { required: true, placeholder: "Last time, I..." },
                     component: Textarea,
                   },
                 ],
               },
               {
-                id: "triedSolveItPage",
+                id: "userResearchHardestPartPage",
+                config: {
+                  allowSkip: true,
+                },
                 elements: [
                   {
-                    id: "triedSolveIt",
+                    id: "userResearchHardestPart",
                     type: "text",
-                    label: "We have tried to solve it by...",
-                    name: "triedSolveIt",
-                    frontend: { placeholder: "Please complete the sentence." },
+                    label: "What is the hardest part about it?",
+                    name: "userResearchHardestPart",
+                    frontend: { required: false, placeholder: "Please tell us about your challenges." },
                     component: Textarea,
                   },
                 ],
@@ -392,7 +395,7 @@ const WaitlistPage = () => (
                     type: "text",
                     label: "What tools help you maintain Product-Market Fit?",
                     name: "toolsMaintainPmf",
-                    frontend: { placehodler: "Mixpanel, Segment, Intercom..." },
+                    frontend: { required: true, placehodler: "Mixpanel, Segment, Intercom..." },
                     component: Textarea,
                   },
                 ],
@@ -420,13 +423,16 @@ const WaitlistPage = () => (
               },
               {
                 id: "pmfHardestPartPage",
+                config: {
+                  allowSkip: true,
+                },
                 elements: [
                   {
                     id: "pmfHardestPart",
                     type: "text",
                     label: "What is the hardest part about it?",
                     name: "pmfHardestPart",
-                    frontend: { placeholder: "Please complete the sentence." },
+                    frontend: { placeholder: "Please tell us about your challenges." },
                     component: Textarea,
                   },
                 ],

apps/web/src/components/forms/submissions/SubmissionsPage.tsx

@@ -28,10 +28,12 @@ export default function SubmissionsPage() {
   const [activeSubmission, setActiveSubmission] = useState<Submission | null>(null);
 
   useEffect(() => {
-    if (finishedOnly) {
-      setFileredSubmission(submissions.filter((submission) => submission.finished));
-    } else {
-      setFileredSubmission(submissions);
+    if (submissions) {
+      if (finishedOnly) {
+        setFileredSubmission(submissions.filter((submission) => submission.finished));
+      } else {
+        setFileredSubmission(submissions);
+      }
     }
   }, [finishedOnly, submissions]);