From e02df9683ed262949e96873627a8db7e26eb3b1d Mon Sep 17 00:00:00 2001 From: Matthias Nannt Date: Fri, 20 Jan 2023 16:18:45 +0100 Subject: [PATCH] update waitlist questions, add skip button --- .../components/engine/Survey.tsx | 7 +++-- .../components/engine/SurveyPage.tsx | 31 +++++++++++++------ .../components/engine/engineTypes.tsx | 3 +- apps/formbricks-com/pages/waitlist.tsx | 24 ++++++++------ .../forms/submissions/SubmissionsPage.tsx | 10 +++--- 5 files changed, 49 insertions(+), 26 deletions(-) diff --git a/apps/formbricks-com/components/engine/Survey.tsx b/apps/formbricks-com/components/engine/Survey.tsx index 320872edfe..a1b4bb218d 100644 --- a/apps/formbricks-com/components/engine/Survey.tsx +++ b/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) { navigateToNextPage(submission)} + onSubmit={(updatedSubmission) => navigateToNextPage(updatedSubmission)} submission={submission} setSubmission={setSubmission} finished={finished} diff --git a/apps/formbricks-com/components/engine/SurveyPage.tsx b/apps/formbricks-com/components/engine/SurveyPage.tsx index c687fda8c6..61d07765e5 100644 --- a/apps/formbricks-com/components/engine/SurveyPage.tsx +++ b/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({ ); })} - {!finished && !(page.config?.autoSubmit && page.elements.length == 1) && ( -
- + {!finished && ( +
+ {page.config?.allowSkip && ( + + )} + {!(page.config?.autoSubmit && page.elements.length == 1) && ( + + )}
)} diff --git a/apps/formbricks-com/components/engine/engineTypes.tsx b/apps/formbricks-com/components/engine/engineTypes.tsx index 1a5b564297..f2539229b0 100644 --- a/apps/formbricks-com/components/engine/engineTypes.tsx +++ b/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"; diff --git a/apps/formbricks-com/pages/waitlist.tsx b/apps/formbricks-com/pages/waitlist.tsx index 3da60d69af..130d79a00f 100644 --- a/apps/formbricks-com/pages/waitlist.tsx +++ b/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, }, ], diff --git a/apps/web/src/components/forms/submissions/SubmissionsPage.tsx b/apps/web/src/components/forms/submissions/SubmissionsPage.tsx index 964c61b868..1e9bebe0dd 100644 --- a/apps/web/src/components/forms/submissions/SubmissionsPage.tsx +++ b/apps/web/src/components/forms/submissions/SubmissionsPage.tsx @@ -28,10 +28,12 @@ export default function SubmissionsPage() { const [activeSubmission, setActiveSubmission] = useState(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]);