AST-5378: submit and move to next question in case of boolean and mul…

…ti-choice questions (#76) * feat: submit and move to next question in case of boolean and multi-choice questions * remove console log and add note for last question in form wizard * chore: remove isEmpty function as it is not needed anymore
awell-health · Jul 11, 2023 · 6a4f7e1 · 6a4f7e1
1 parent 6ec3a0b
commit 6a4f7e1
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 3 deletions.
diff --git a/src/hostedPages/activities/wizardForm/WizardForm.tsx b/src/hostedPages/activities/wizardForm/WizardForm.tsx
@@ -41,6 +41,21 @@ export const WizardForm = ({
 
   const { showScrollHint, determineShowScrollHint } = useScrollHint()
 
+  /**
+   * For certain questions like Single Select or Boolean questions,
+   * we don't want the user to click on the answer first and then
+   * on the 'next' button. Instead, we just submit the answer when
+   * user clicks on one of the options and move to the next question.
+   *
+   * Except for last question, there user will have to click on submit
+   * button explicitly.
+   */
+  const submitAndMoveToNextQuestion = () => {
+    if (!isLastQuestion) {
+      handleGoToNextQuestion()
+    }
+  }
+
   useEffect(() => {
     determineShowScrollHint()
   }, [currentQuestion])
@@ -69,6 +84,7 @@ export const WizardForm = ({
                 errors={errors}
                 labels={questionLabels}
                 questionTypeConfig={questionTypeConfig}
+                submitAndMoveToNextQuestion={submitAndMoveToNextQuestion}
               />
             </div>
           )}

diff --git a/src/molecules/question/Question.tsx b/src/molecules/question/Question.tsx
@@ -22,9 +22,20 @@ export const QuestionData = ({
   getValues,
   labels,
   questionTypeConfig,
+  submitAndMoveToNextQuestion = () => {},
 }: QuestionDataProps): JSX.Element => {
   const config = question?.questionConfig
   const { isValidE164Number } = useValidate()
+
+  const shouldAutoProgress = (): boolean => {
+    if (question.userQuestionType) {
+      return [UserQuestionType.YesNo, UserQuestionType.MultipleChoice].includes(
+        question.userQuestionType
+      )
+    }
+    return false
+  }
+
   switch (question.userQuestionType) {
     case UserQuestionType.YesNo:
       return (
@@ -45,7 +56,12 @@ export const QuestionData = ({
                   },
                   { id: `${question.id}-no`, value: 0, label: labels.no_label },
                 ]}
-                onChange={(data) => onChange(data)}
+                onChange={(data) => {
+                  onChange(data)
+                  if (value !== data && shouldAutoProgress()) {
+                    submitAndMoveToNextQuestion()
+                  }
+                }}
                 questionId={question.id}
                 value={value}
                 mandatory={config?.mandatory}
@@ -115,7 +131,12 @@ export const QuestionData = ({
                     searchPlaceholder: labels.select?.search_placeholder,
                     noOptions: labels.select?.no_options,
                   }}
-                  onChange={(data) => onChange(data)}
+                  onChange={(data) => {
+                    onChange(data)
+                    if (value !== data && shouldAutoProgress()) {
+                      submitAndMoveToNextQuestion()
+                    }
+                  }}
                   type="single"
                   options={question.options ?? []}
                   mandatory={config?.mandatory}
@@ -129,7 +150,12 @@ export const QuestionData = ({
               <SingleChoiceQuestion
                 label={question.title}
                 options={question.options || []}
-                onChange={(data) => onChange(data)}
+                onChange={(data) => {
+                  onChange(data)
+                  if (value !== data && shouldAutoProgress()) {
+                    submitAndMoveToNextQuestion()
+                  }
+                }}
                 questionId={question.id}
                 value={value}
                 mandatory={config?.mandatory}
@@ -279,6 +305,7 @@ export const Question = ({
     yes_label: 'Yes',
     no_label: 'No',
   },
+  submitAndMoveToNextQuestion,
 }: QuestionProps): JSX.Element => {
   const [isVisible, setVisible] = useState(0)
   const style = { '--awell-question-opacity': isVisible } as React.CSSProperties
@@ -299,6 +326,7 @@ export const Question = ({
         getValues={getValues}
         labels={labels}
         questionTypeConfig={questionTypeConfig}
+        submitAndMoveToNextQuestion={submitAndMoveToNextQuestion}
       />
 
       {currentError && (

diff --git a/src/molecules/question/types.ts b/src/molecules/question/types.ts
@@ -17,6 +17,7 @@ export interface QuestionDataProps {
   getValues: UseFormGetValues<any>
   labels: QuestionLabels
   questionTypeConfig: QuestionConfigByType
+  submitAndMoveToNextQuestion?: () => void
 }
 export interface QuestionProps {
   question: Question
@@ -25,4 +26,5 @@ export interface QuestionProps {
   errors: Array<FormError>
   labels?: QuestionLabels
   questionTypeConfig: QuestionConfigByType
+  submitAndMoveToNextQuestion?: () => void
 }