fixes preview active block

apps/web/modules/ui/components/preview-survey/index.tsx

@@ -7,7 +7,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { TProjectStyling } from "@formbricks/types/project";
 import { TSurvey, TSurveyQuestionId, TSurveyStyling } from "@formbricks/types/surveys/types";
-import { getElementsFromBlocks } from "@/modules/survey/lib/client-utils";
 import { ClientLogo } from "@/modules/ui/components/client-logo";
 import { MediaBackground } from "@/modules/ui/components/media-background";
 import { ResetProgressButton } from "@/modules/ui/components/reset-progress-button";
@@ -56,7 +55,7 @@ const previewParentContainerVariant: Variants = {
   },
 };
 
-let setQuestionId = (_: string) => {};
+let setBlockId = (_: string) => {};
 
 export const PreviewSurvey = ({
   questionId,
@@ -78,8 +77,6 @@ export const PreviewSurvey = ({
   const [shrink, setShrink] = useState(false);
   const { projectOverwrites } = survey || {};
 
-  const questions = useMemo(() => getElementsFromBlocks(survey.blocks), [survey.blocks]);
-
   const previewScreenVariants: Variants = {
     expanded: {
       right: "5%",
@@ -153,9 +150,14 @@ export const PreviewSurvey = ({
       )
         return;
       if (newQuestionId === "start" && !survey.welcomeCard.enabled) return;
-      setQuestionId(newQuestionId);
+
+      // Convert questionId to blockId and set it directly
+      const block = survey.blocks.find((b) => b.elements.some((e) => e.id === newQuestionId));
+      if (block) {
+        setBlockId(block.id);
+      }
     },
-    [survey.welcomeCard.enabled]
+    [survey.welcomeCard.enabled, survey.blocks]
   );
 
   useEffect(() => {
@@ -169,7 +171,9 @@ export const PreviewSurvey = ({
     if (survey.type === "app" && survey.endings.length === 0) {
       setIsModalOpen(false);
       setTimeout(() => {
-        setQuestionId(questions[0]?.id);
+        if (survey.blocks[0]) {
+          setBlockId(survey.blocks[0].id);
+        }
         setIsModalOpen(true);
       }, 500);
     }
@@ -191,7 +195,11 @@ export const PreviewSurvey = ({
       setPreviewMode(storePreviewMode);
     }, 10);
 
-    setQuestionId(survey.welcomeCard.enabled ? "start" : questions[0]?.id);
+    if (survey.welcomeCard.enabled) {
+      setBlockId("start");
+    } else if (survey.blocks[0]) {
+      setBlockId(survey.blocks[0].id);
+    }
   };
 
   useEffect(() => {
@@ -224,7 +232,7 @@ export const PreviewSurvey = ({
     setPreviewMode(mode);
     requestAnimationFrame(() => {
       if (questionId) {
-        setQuestionId(questionId);
+        updateQuestionId(questionId);
       }
     });
   };
@@ -277,8 +285,8 @@ export const PreviewSurvey = ({
                     styling={styling}
                     isCardBorderVisible={!styling.highlightBorderColor?.light}
                     onClose={handlePreviewModalClose}
-                    getSetQuestionId={(f: (value: string) => void) => {
-                      setQuestionId = f;
+                    getSetBlockId={(f: (value: string) => void) => {
+                      setBlockId = f;
                     }}
                     onFinished={onFinished}
                     isSpamProtectionEnabled={isSpamProtectionEnabled}
@@ -299,8 +307,8 @@ export const PreviewSurvey = ({
                       languageCode={languageCode}
                       responseCount={42}
                       styling={styling}
-                      getSetQuestionId={(f: (value: string) => void) => {
-                        setQuestionId = f;
+                      getSetBlockId={(f: (value: string) => void) => {
+                        setBlockId = f;
                       }}
                       isSpamProtectionEnabled={isSpamProtectionEnabled}
                     />
@@ -381,8 +389,8 @@ export const PreviewSurvey = ({
                   styling={styling}
                   isCardBorderVisible={!styling.highlightBorderColor?.light}
                   onClose={handlePreviewModalClose}
-                  getSetQuestionId={(f: (value: string) => void) => {
-                    setQuestionId = f;
+                  getSetBlockId={(f: (value: string) => void) => {
+                    setBlockId = f;
                   }}
                   onFinished={onFinished}
                   isSpamProtectionEnabled={isSpamProtectionEnabled}
@@ -408,8 +416,8 @@ export const PreviewSurvey = ({
                     languageCode={languageCode}
                     responseCount={42}
                     styling={styling}
-                    getSetQuestionId={(f: (value: string) => void) => {
-                      setQuestionId = f;
+                    getSetBlockId={(f: (value: string) => void) => {
+                      setBlockId = f;
                     }}
                     isSpamProtectionEnabled={isSpamProtectionEnabled}
                   />

packages/surveys/src/components/general/survey.tsx

@@ -59,6 +59,7 @@ export function Survey({
   getSetIsError,
   getSetIsResponseSendingFinished,
   getSetQuestionId,
+  getSetBlockId,
   getSetResponseData,
   responseCount,
   startAtQuestionId,
@@ -315,13 +316,21 @@ export function Survey({
     if (getSetQuestionId) {
       getSetQuestionId((value: string) => {
         // Convert question ID to block ID
-        const block = findBlockByElementId(localSurvey, value);
+        const block = findBlockByElementId(survey, value);
         if (block) {
           setBlockId(block.id);
         }
       });
     }
-  }, [getSetQuestionId, localSurvey]);
+  }, [getSetQuestionId, survey]);
+
+  useEffect(() => {
+    if (getSetBlockId) {
+      getSetBlockId((value: string) => {
+        setBlockId(value);
+      });
+    }
+  }, [getSetBlockId]);
 
   useEffect(() => {
     if (getSetResponseData) {

packages/types/formbricks-surveys.ts

@@ -11,6 +11,7 @@ export interface SurveyBaseProps {
   getSetIsError?: (getSetError: (value: boolean) => void) => void;
   getSetIsResponseSendingFinished?: (getSetIsResponseSendingFinished: (value: boolean) => void) => void;
   getSetQuestionId?: (getSetQuestionId: (value: string) => void) => void;
+  getSetBlockId?: (getSetBlockId: (value: string) => void) => void;
   getSetResponseData?: (getSetResponseData: (value: TResponseData) => void) => void;
   onDisplay?: () => Promise<void>;
   onResponse?: (response: TResponseUpdate) => void;