Files
formbricks/apps/web/components/preview/QuestionConditional.tsx
tyjkerr ec0d3f2fa2 Add Back Button to Surveys (#501)
* add back button, next with local storaage wip

* handle submission and skip submission logic

* handle showing stored value on same concurrent question type.

* remove console.log

* fix next button not showing, add saving answer on pressing back to local storage

* add temp props to QuestionCondition in preview modal

* add temp props to QuestionCondition in preview modal again...

* update navigation logic

* update survey question preview

* add back-button component

* add back button to formbricks/js

* refactor localStorage functions to lib

* remove unused import

* add form prefilling when reloading forms

* merge main into branch

* Revert "merge main into branch"

This reverts commit 13bc9c06ec.

* rename localStorage key answers->responses

* rename answers -> responses in linkSurvey lib

* when survey page reloaded jump to next question instead of current question

* rename getStoredAnswer -> getStoredResponse

* continue renaming

* continue renaming

* rename answerValue -> responseValue

---------

Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>
2023-08-02 13:08:20 +02:00

104 lines
3.3 KiB
TypeScript

import { QuestionType, type Question } from "@formbricks/types/questions";
import OpenTextQuestion from "./OpenTextQuestion";
import MultipleChoiceSingleQuestion from "./MultipleChoiceSingleQuestion";
import MultipleChoiceMultiQuestion from "./MultipleChoiceMultiQuestion";
import NPSQuestion from "./NPSQuestion";
import CTAQuestion from "./CTAQuestion";
import RatingQuestion from "./RatingQuestion";
import ConsentQuestion from "./ConsentQuestion";
interface QuestionConditionalProps {
question: Question;
onSubmit: (data: { [x: string]: any }) => void;
lastQuestion: boolean;
brandColor: string;
storedResponseValue: any;
goToNextQuestion: (answer: any) => void;
goToPreviousQuestion?: (answer: any) => void;
autoFocus: boolean;
}
export default function QuestionConditional({
question,
onSubmit,
lastQuestion,
brandColor,
storedResponseValue,
goToNextQuestion,
goToPreviousQuestion,
autoFocus,
}: QuestionConditionalProps) {
return question.type === QuestionType.OpenText ? (
<OpenTextQuestion
question={question}
onSubmit={onSubmit}
lastQuestion={lastQuestion}
brandColor={brandColor}
storedResponseValue={storedResponseValue}
goToNextQuestion={goToNextQuestion}
goToPreviousQuestion={goToPreviousQuestion}
autoFocus={autoFocus}
/>
) : question.type === QuestionType.MultipleChoiceSingle ? (
<MultipleChoiceSingleQuestion
question={question}
onSubmit={onSubmit}
lastQuestion={lastQuestion}
brandColor={brandColor}
storedResponseValue={storedResponseValue}
goToNextQuestion={goToNextQuestion}
goToPreviousQuestion={goToPreviousQuestion}
/>
) : question.type === QuestionType.MultipleChoiceMulti ? (
<MultipleChoiceMultiQuestion
question={question}
onSubmit={onSubmit}
lastQuestion={lastQuestion}
brandColor={brandColor}
storedResponseValue={storedResponseValue}
goToNextQuestion={goToNextQuestion}
goToPreviousQuestion={goToPreviousQuestion}
/>
) : question.type === QuestionType.NPS ? (
<NPSQuestion
question={question}
onSubmit={onSubmit}
lastQuestion={lastQuestion}
brandColor={brandColor}
storedResponseValue={storedResponseValue}
goToNextQuestion={goToNextQuestion}
goToPreviousQuestion={goToPreviousQuestion}
/>
) : question.type === QuestionType.CTA ? (
<CTAQuestion
question={question}
onSubmit={onSubmit}
lastQuestion={lastQuestion}
brandColor={brandColor}
storedResponseValue={storedResponseValue}
goToNextQuestion={goToNextQuestion}
goToPreviousQuestion={goToPreviousQuestion}
/>
) : question.type === QuestionType.Rating ? (
<RatingQuestion
question={question}
onSubmit={onSubmit}
lastQuestion={lastQuestion}
brandColor={brandColor}
storedResponseValue={storedResponseValue}
goToNextQuestion={goToNextQuestion}
goToPreviousQuestion={goToPreviousQuestion}
/>
) : question.type === "consent" ? (
<ConsentQuestion
question={question}
onSubmit={onSubmit}
lastQuestion={lastQuestion}
brandColor={brandColor}
storedResponseValue={storedResponseValue}
goToNextQuestion={goToNextQuestion}
goToPreviousQuestion={goToPreviousQuestion}
/>
) : null;
}