diff --git a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/AdvancedSettings.tsx b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/AdvancedSettings.tsx new file mode 100644 index 0000000000..b46bead798 --- /dev/null +++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/AdvancedSettings.tsx @@ -0,0 +1,39 @@ +import React from "react"; +import LogicEditor from "@/app/environments/[environmentId]/surveys/[surveyId]/edit/LogicEditor"; +import UpdateQuestionId from "./UpdateQuestionId"; +import { Question } from "@formbricks/types/questions"; +import { Survey } from "@formbricks/types/surveys"; + +interface AdvancedSettingsProps { + question: Question; + questionIdx: number; + localSurvey: Survey; + updateQuestion: (questionIdx: number, updatedAttributes: any) => void; +} + +export default function AdvancedSettings({ + question, + questionIdx, + localSurvey, + updateQuestion, +}: AdvancedSettingsProps) { + return ( +
+
+ +
+ + +
+ ); +} diff --git a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/MultipleChoiceMultiForm.tsx b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/MultipleChoiceMultiForm.tsx index 45817f8b75..2cd2c0f6ab 100644 --- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/MultipleChoiceMultiForm.tsx +++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/MultipleChoiceMultiForm.tsx @@ -1,7 +1,7 @@ import type { MultipleChoiceMultiQuestion } from "@formbricks/types/questions"; import { Survey } from "@formbricks/types/surveys"; import { Button, Input, Label } from "@formbricks/ui"; -import { TrashIcon } from "@heroicons/react/24/solid"; +import { PlusIcon, TrashIcon } from "@heroicons/react/24/solid"; import { createId } from "@paralleldrive/cuid2"; import { cn } from "@formbricks/lib/cn"; import { useEffect, useRef, useState } from "react"; @@ -36,14 +36,33 @@ export default function MultipleChoiceMultiForm({ updateQuestion(questionIdx, { choices: newChoices }); }; - const addChoice = () => { + // const addChoice = () => { + // setIsNew(false); // This question is no longer new. + // let newChoices = !question.choices ? [] : question.choices; + // const otherChoice = newChoices.find((choice) => choice.id === "other"); + // if (otherChoice) { + // newChoices = newChoices.filter((choice) => choice.id !== "other"); + // } + // newChoices.push({ id: createId(), label: "" }); + // if (otherChoice) { + // newChoices.push(otherChoice); + // } + // updateQuestion(questionIdx, { choices: newChoices }); + // }; + + const addChoice = (choiceIdx?: number) => { setIsNew(false); // This question is no longer new. let newChoices = !question.choices ? [] : question.choices; const otherChoice = newChoices.find((choice) => choice.id === "other"); if (otherChoice) { newChoices = newChoices.filter((choice) => choice.id !== "other"); } - newChoices.push({ id: createId(), label: "" }); + const newChoice = { id: createId(), label: "" }; + if (choiceIdx !== undefined) { + newChoices.splice(choiceIdx + 1, 0, newChoice); + } else { + newChoices.push(newChoice); + } if (otherChoice) { newChoices.push(otherChoice); } @@ -104,7 +123,7 @@ export default function MultipleChoiceMultiForm({ -
+ {/*
updateQuestion(questionIdx, { subheader: e.target.value })} />
-
+
*/} + + {question.subheader && ( +
+ +
+ updateQuestion(questionIdx, { subheader: e.target.value })} + /> + updateQuestion(questionIdx, { subheader: "" })} + /> +
+
+ )}
@@ -137,15 +174,17 @@ export default function MultipleChoiceMultiForm({ onClick={() => deleteChoice(choiceIdx)} /> )} + {choice.id !== "other" && ( + addChoice(choiceIdx)} + /> + )}
))}
- {question.choices.filter((c) => c.id === "other").length === 0 && ( <> -

or

@@ -154,19 +193,6 @@ export default function MultipleChoiceMultiForm({
- -
- -
- updateQuestion(questionIdx, { buttonLabel: e.target.value })} - /> -
-
); } diff --git a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/MultipleChoiceSingleForm.tsx b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/MultipleChoiceSingleForm.tsx index 046b2a02cd..aae4917d68 100644 --- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/MultipleChoiceSingleForm.tsx +++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/MultipleChoiceSingleForm.tsx @@ -148,10 +148,12 @@ export default function MultipleChoiceSingleForm({ onClick={() => deleteChoice(choiceIdx)} /> )} - addChoice(choiceIdx)} - /> + {choice.id !== "other" && ( + addChoice(choiceIdx)} + /> + )} ))}
diff --git a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/NPSQuestionForm.tsx b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/NPSQuestionForm.tsx index 22e70ea49a..abe6f74da5 100644 --- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/NPSQuestionForm.tsx +++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/NPSQuestionForm.tsx @@ -1,6 +1,7 @@ import type { NPSQuestion } from "@formbricks/types/questions"; import { Survey } from "@formbricks/types/surveys"; import { Input, Label } from "@formbricks/ui"; +import { TrashIcon } from "@heroicons/react/24/solid"; interface NPSQuestionFormProps { localSurvey: Survey; @@ -31,17 +32,23 @@ export default function NPSQuestionForm({
-
- -
- updateQuestion(questionIdx, { subheader: e.target.value })} - /> + {question.subheader && ( +
+ +
+ updateQuestion(questionIdx, { subheader: e.target.value })} + /> + updateQuestion(questionIdx, { subheader: "" })} + /> +
-
+ )}
diff --git a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/OpenQuestionForm.tsx b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/OpenQuestionForm.tsx index c044292b4e..358bf80427 100644 --- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/OpenQuestionForm.tsx +++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/OpenQuestionForm.tsx @@ -1,6 +1,7 @@ import type { OpenTextQuestion } from "@formbricks/types/questions"; import { Survey } from "@formbricks/types/surveys"; import { Input, Label } from "@formbricks/ui"; +import { TrashIcon } from "@heroicons/react/24/solid"; interface OpenQuestionFormProps { localSurvey: Survey; @@ -31,7 +32,7 @@ export default function OpenQuestionForm({
-
+ {/*
updateQuestion(questionIdx, { subheader: e.target.value })} />
-
+
*/} + + {question.subheader && ( +
+ +
+ updateQuestion(questionIdx, { subheader: e.target.value })} + /> + updateQuestion(questionIdx, { subheader: "" })} + /> +
+
+ )}
@@ -54,19 +73,6 @@ export default function OpenQuestionForm({ />
- -
- -
- updateQuestion(questionIdx, { buttonLabel: e.target.value })} - /> -
-
); } diff --git a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/QuestionCard.tsx b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/QuestionCard.tsx index 0ead1a7ff4..1bad9c1cda 100644 --- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/QuestionCard.tsx +++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/QuestionCard.tsx @@ -26,7 +26,7 @@ import NPSQuestionForm from "./NPSQuestionForm"; import OpenQuestionForm from "./OpenQuestionForm"; import QuestionDropdown from "./QuestionMenu"; import RatingQuestionForm from "./RatingQuestionForm"; -import UpdateQuestionId from "./UpdateQuestionId"; +import AdvancedSettings from "@/app/environments/[environmentId]/surveys/[surveyId]/edit/AdvancedSettings"; interface QuestionCardProps { localSurvey: Survey; @@ -54,7 +54,7 @@ export default function QuestionCard({ lastQuestion, }: QuestionCardProps) { const open = activeQuestionId === question.id; - const [openAdvanced, setOpenAdvanced] = useState(false); + const [openAdvanced, setOpenAdvanced] = useState(question.logic && question.logic.length > 0); return ( {(provided) => ( @@ -176,9 +176,9 @@ export default function QuestionCard({ lastQuestion={lastQuestion} /> ) : null} -
+
- + {openAdvanced ? ( ) : ( @@ -187,40 +187,36 @@ export default function QuestionCard({ {openAdvanced ? "Hide Advanced Settings" : "Show Advanced Settings"} - -
- -
- updateQuestion(questionIdx, { buttonLabel: e.target.value })} - /> + + {question.type !== "nps" && question.type !== "rating" && question.type !== "cta" ? ( +
+ +
+ updateQuestion(questionIdx, { buttonLabel: e.target.value })} + /> +
-
- -
- -
-
- {open && ( -
+ + {open && ( +
+
- )} -
+
+ )}
)} diff --git a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/QuestionMenu.tsx b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/QuestionMenu.tsx index e521dd8f7c..57e394fba9 100644 --- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/QuestionMenu.tsx +++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/QuestionMenu.tsx @@ -20,7 +20,9 @@ export default function QuestionActions({ return (
{ if (questionIdx !== 0) { e.stopPropagation(); @@ -29,7 +31,9 @@ export default function QuestionActions({ }} /> { if (!lastQuestion) { e.stopPropagation(); @@ -38,14 +42,14 @@ export default function QuestionActions({ }} /> { e.stopPropagation(); duplicateQuestion(questionIdx); }} /> { e.stopPropagation(); deleteQuestion(questionIdx);