diff --git a/apps/web/app/(app)/environments/[environmentId]/product/look/components/ThemeStyling.tsx b/apps/web/app/(app)/environments/[environmentId]/product/look/components/ThemeStyling.tsx
index 9c8d767ec5..c4a9c56b8d 100644
--- a/apps/web/app/(app)/environments/[environmentId]/product/look/components/ThemeStyling.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/product/look/components/ThemeStyling.tsx
@@ -237,7 +237,6 @@ export const ThemeStyling = ({
{}}
survey={getPreviewSurvey(locale) as TSurvey}
product={{
...product,
diff --git a/apps/web/app/(app)/environments/[environmentId]/product/look/components/ThemeStylingPreviewSurvey.tsx b/apps/web/app/(app)/environments/[environmentId]/product/look/components/ThemeStylingPreviewSurvey.tsx
index ba08cd1cc4..4502a4acc0 100644
--- a/apps/web/app/(app)/environments/[environmentId]/product/look/components/ThemeStylingPreviewSurvey.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/product/look/components/ThemeStylingPreviewSurvey.tsx
@@ -2,7 +2,7 @@
import { Variants, motion } from "framer-motion";
import { useTranslations } from "next-intl";
-import { useRef, useState } from "react";
+import { Fragment, useRef, useState } from "react";
import type { TProduct } from "@formbricks/types/product";
import { TSurvey, TSurveyType } from "@formbricks/types/surveys/types";
import { ClientLogo } from "@formbricks/ui/components/ClientLogo";
@@ -13,7 +13,6 @@ import { SurveyInline } from "@formbricks/ui/components/Survey";
interface ThemeStylingPreviewSurveyProps {
survey: TSurvey;
- setQuestionId: (_: string) => void;
product: TProduct;
previewType: TSurveyType;
setPreviewType: (type: TSurveyType) => void;
@@ -51,7 +50,6 @@ export const ThemeStylingPreviewSurvey = ({
product,
previewType,
setPreviewType,
- setQuestionId,
}: ThemeStylingPreviewSurveyProps) => {
const [isFullScreenPreview] = useState(false);
const [previewPosition] = useState("relative");
@@ -104,9 +102,10 @@ export const ThemeStylingPreviewSurvey = ({
const clickOutsideClose = surveyClickOutsideClose ?? product.clickOutsideClose;
const highlightBorderColor = product.styling.highlightBorderColor?.light;
+ const [surveyFormKey, setSurveyFormKey] = useState(Date.now());
const resetQuestionProgress = () => {
- setQuestionId(survey?.questions[0]?.id);
+ setSurveyFormKey(Date.now());
};
const isAppSurvey = previewType === "app";
@@ -161,18 +160,17 @@ export const ThemeStylingPreviewSurvey = ({
previewMode="desktop"
background={product.styling.cardBackgroundColor?.light}
borderRadius={product.styling.roundness ?? 8}>
- file.name}
- styling={product.styling}
- isCardBorderVisible={!highlightBorderColor}
- languageCode="default"
- getSetQuestionId={(f: (value: string) => void) => {
- setQuestionId = f;
- }}
- />
+
+ file.name}
+ styling={product.styling}
+ isCardBorderVisible={!highlightBorderColor}
+ languageCode="default"
+ />
+
) : (
@@ -182,6 +180,7 @@ export const ThemeStylingPreviewSurvey = ({
)}
void) => {
- setQuestionId = f;
- }}
/>