mirror of
https://github.com/formbricks/formbricks.git
synced 2026-04-21 03:03:25 -05:00
tyjkerr
ec0d3f2fa2
* 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>
69 lines
2.6 KiB
TypeScript
69 lines
2.6 KiB
TypeScript
import type { CTAQuestion } from "@formbricks/types/questions";
|
|
import Headline from "./Headline";
|
|
import HtmlBody from "./HtmlBody";
|
|
import { cn } from "@/../../packages/lib/cn";
|
|
import { isLight } from "@/lib/utils";
|
|
import { Response } from "@formbricks/types/js";
|
|
import { BackButton } from "@/components/preview/BackButton";
|
|
|
|
interface CTAQuestionProps {
|
|
question: CTAQuestion;
|
|
onSubmit: (data: { [x: string]: any }) => void;
|
|
lastQuestion: boolean;
|
|
brandColor: string;
|
|
storedResponseValue: string | null;
|
|
goToNextQuestion: (answer: Response["data"]) => void;
|
|
goToPreviousQuestion?: (answer?: Response["data"]) => void;
|
|
}
|
|
|
|
export default function CTAQuestion({
|
|
question,
|
|
onSubmit,
|
|
lastQuestion,
|
|
brandColor,
|
|
storedResponseValue,
|
|
goToNextQuestion,
|
|
goToPreviousQuestion,
|
|
}: CTAQuestionProps) {
|
|
return (
|
|
<div>
|
|
<Headline headline={question.headline} questionId={question.id} />
|
|
<HtmlBody htmlString={question.html || ""} questionId={question.id} />
|
|
|
|
<div className="mt-4 flex w-full justify-end">
|
|
{goToPreviousQuestion && <BackButton onClick={() => goToPreviousQuestion()} />}
|
|
<div></div>
|
|
{(!question.required || storedResponseValue) && (
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
if (storedResponseValue) {
|
|
goToNextQuestion({ [question.id]: "clicked" });
|
|
return;
|
|
}
|
|
onSubmit({ [question.id]: "dismissed" });
|
|
}}
|
|
className="mr-4 flex items-center rounded-md px-3 py-3 text-base font-medium leading-4 text-slate-500 hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:border-slate-400 dark:text-slate-400">
|
|
{storedResponseValue === "clicked" ? "Next" : question.dismissButtonLabel || "Skip"}
|
|
</button>
|
|
)}
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
if (question.buttonExternal && question.buttonUrl) {
|
|
window?.open(question.buttonUrl, "_blank")?.focus();
|
|
}
|
|
onSubmit({ [question.id]: "clicked" });
|
|
}}
|
|
className={cn(
|
|
"flex items-center rounded-md border border-transparent px-3 py-3 text-base font-medium leading-4 shadow-sm hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2",
|
|
isLight(brandColor) ? "text-black" : "text-white"
|
|
)}
|
|
style={{ backgroundColor: brandColor }}>
|
|
{question.buttonLabel || (lastQuestion ? "Finish" : "Next")}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|