Introduce Restart Survey Button on Preview of Survey

Introduce Restart Survey Button on Preview of Survey

apps/web/app/(app)/environments/[environmentId]/surveys/PreviewSurvey.tsx

@@ -7,9 +7,11 @@ import QuestionConditional from "@/components/preview/QuestionConditional";
 import ThankYouCard from "@/components/preview/ThankYouCard";
 import type { Logic, Question } from "@formbricks/types/questions";
 import { Survey } from "@formbricks/types/surveys";
-import { useEffect, useRef, useState } from "react";
-import type { TProduct } from "@formbricks/types/v1/product";
 import type { TEnvironment } from "@formbricks/types/v1/environment";
+import type { TProduct } from "@formbricks/types/v1/product";
+import { Button } from "@formbricks/ui";
+import { ArrowPathRoundedSquareIcon } from "@heroicons/react/24/outline";
+import { useEffect, useRef, useState } from "react";
 interface PreviewSurveyProps {
   setActiveQuestionId: (id: string | null) => void;
   activeQuestionId?: string | null;
@@ -243,6 +245,12 @@ export default function PreviewSurvey({
     setActiveQuestionId(previousQuestionId);
   }
 
+  function resetQuestionProgress() {
+    setProgress(0);
+    setActiveQuestionId(questions[0].id);
+    setStoredResponse({});
+  }
+
   useEffect(() => {
     if (environment && environment.widgetSetupCompleted) {
       setWidgetSetupCompleted(true);
@@ -272,6 +280,15 @@ export default function PreviewSurvey({
             {previewType === "modal" ? "Your web app" : "Preview"}
           </span>
         </p>
+        <div className="ml-auto flex items-center">
+          <Button
+            variant="minimal"
+            className="mx-2 my-4 px-2 py-0.2 text-sm text-slate-500 bg-white"
+            onClick={resetQuestionProgress}>
+            Restart
+            <ArrowPathRoundedSquareIcon className="ml-2 h-4 w-4" />
+          </Button>
+        </div>
       </div>
 
       {previewType === "modal" ? (

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/LogicEditor.tsx

@@ -245,13 +245,13 @@ export default function LogicEditor({
                 <div className="flex-1 basis-1/5">
                   {!logicConditions[logic.condition].multiSelect ? (
                     <Select value={logic.value} onValueChange={(e) => updateLogic(logicIdx, { value: e })}>
-                      <SelectTrigger>
+                      <SelectTrigger className="overflow-hidden">
                         <SelectValue placeholder="Select match type" />
                       </SelectTrigger>
                       <SelectContent>
                         {logicConditions[logic.condition].values?.map((value) => (
-                          <SelectItem key={value} value={value}>
-                            {value}
+                          <SelectItem key={value} value={value} title={value}>
+                            {truncate(value, 20)}
                           </SelectItem>
                         ))}
                       </SelectContent>