diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/CTAQuestionForm.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/CTAQuestionForm.tsx index 46527bd8d7..bd628fc968 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/CTAQuestionForm.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/CTAQuestionForm.tsx @@ -5,6 +5,7 @@ import type { CTAQuestion } from "@formbricks/types/questions"; import { Survey } from "@formbricks/types/surveys"; import { Editor, Input, Label, RadioGroup, RadioGroupItem } from "@formbricks/ui"; import { useState } from "react"; +import { BackButtonInput } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/QuestionCard"; interface CTAQuestionFormProps { localSurvey: Survey; @@ -80,18 +81,27 @@ export default function CTAQuestionForm({
-
- -
- updateQuestion(questionIdx, { buttonLabel: e.target.value })} - /> +
+
+ +
+ updateQuestion(questionIdx, { buttonLabel: e.target.value })} + /> +
+ {questionIdx !== 0 && ( + updateQuestion(questionIdx, { backButtonLabel: e.target.value })} + /> + )}
+ {question.buttonExternal && (
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/QuestionCard.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/QuestionCard.tsx index e8c91eb372..954052ef66 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/QuestionCard.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/QuestionCard.tsx @@ -42,6 +42,23 @@ interface QuestionCardProps { isInValid: boolean; } +export function BackButtonInput({ value, onChange }) { + return ( +
+ +
+ +
+
+ ); +} + export default function QuestionCard({ localSurvey, questionIdx, @@ -57,6 +74,7 @@ export default function QuestionCard({ const question = localSurvey.questions[questionIdx]; const open = activeQuestionId === question.id; const [openAdvanced, setOpenAdvanced] = useState(question.logic && question.logic.length > 0); + return ( {(provided) => ( @@ -210,19 +228,36 @@ export default function QuestionCard({ {question.type !== QuestionType.NPS && question.type !== QuestionType.Rating && question.type !== QuestionType.CTA ? ( -
- -
- updateQuestion(questionIdx, { buttonLabel: e.target.value })} - /> +
+
+ +
+ updateQuestion(questionIdx, { buttonLabel: e.target.value })} + /> +
+ {questionIdx !== 0 && ( + updateQuestion(questionIdx, { backButtonLabel: e.target.value })} + /> + )}
) : null} + {(question.type === QuestionType.Rating || question.type === QuestionType.NPS) && + questionIdx !== 0 && ( +
+ updateQuestion(questionIdx, { backButtonLabel: e.target.value })} + /> +
+ )} { survey.questions.forEach((question) => { if (!question.logic) return; @@ -68,6 +70,7 @@ export default function QuestionsView({ const updateQuestion = (questionIdx: number, updatedAttributes: any) => { let updatedSurvey = JSON.parse(JSON.stringify(localSurvey)); + if ("id" in updatedAttributes) { // if the survey whose id is to be changed is linked to logic of any other survey then changing it const initialQuestionId = updatedSurvey.questions[questionIdx].id; @@ -89,6 +92,13 @@ export default function QuestionsView({ ...updatedSurvey.questions[questionIdx], ...updatedAttributes, }; + + if ("backButtonLabel" in updatedAttributes) { + updatedSurvey.questions.forEach((question) => { + question.backButtonLabel = updatedAttributes.backButtonLabel; + }); + setbackButtonLabel(updatedAttributes.backButtonLabel); + } setLocalSurvey(updatedSurvey); validateSurvey(updatedSurvey.questions[questionIdx]); }; @@ -138,6 +148,9 @@ export default function QuestionsView({ const addQuestion = (question: any) => { const updatedSurvey = JSON.parse(JSON.stringify(localSurvey)); + if (backButtonLabel) { + question.backButtonLabel = backButtonLabel; + } updatedSurvey.questions.push({ ...question, isDraft: true }); setLocalSurvey(updatedSurvey); setActiveQuestionId(question.id); diff --git a/apps/web/components/preview/BackButton.tsx b/apps/web/components/preview/BackButton.tsx index c23861c06c..3608a3c468 100644 --- a/apps/web/components/preview/BackButton.tsx +++ b/apps/web/components/preview/BackButton.tsx @@ -2,16 +2,17 @@ import { Button } from "@formbricks/ui"; interface BackButtonProps { onClick: () => void; + backButtonLabel?: string; } -export function BackButton({ onClick }: BackButtonProps) { +export function BackButton({ onClick, backButtonLabel }: BackButtonProps) { return ( ); } diff --git a/apps/web/components/preview/CTAQuestion.tsx b/apps/web/components/preview/CTAQuestion.tsx index 189d55afca..adb012da15 100644 --- a/apps/web/components/preview/CTAQuestion.tsx +++ b/apps/web/components/preview/CTAQuestion.tsx @@ -32,7 +32,9 @@ export default function CTAQuestion({
- {goToPreviousQuestion && goToPreviousQuestion()} />} + {goToPreviousQuestion && ( + goToPreviousQuestion()} /> + )}
{(!question.required || storedResponseValue) && ( ); } diff --git a/packages/js/src/components/CTAQuestion.tsx b/packages/js/src/components/CTAQuestion.tsx index 0ad5d46da3..05474fc309 100644 --- a/packages/js/src/components/CTAQuestion.tsx +++ b/packages/js/src/components/CTAQuestion.tsx @@ -31,7 +31,11 @@ export default function CTAQuestion({
-
{goToPreviousQuestion && goToPreviousQuestion()} />}
+
+ {goToPreviousQuestion && ( + goToPreviousQuestion()} /> + )} +
{(!question.required || storedResponseValue) && (