fix: reset survey button (#3069)

apps/web/app/s/[surveyId]/components/LinkSurvey.tsx

@@ -12,7 +12,12 @@ import { SurveyState } from "@formbricks/lib/surveyState";
 import { TAttributeClass } from "@formbricks/types/attribute-classes";
 import { TJsFileUploadParams } from "@formbricks/types/js";
 import { TProduct } from "@formbricks/types/product";
-import { TResponse, TResponseHiddenFieldValue, TResponseUpdate } from "@formbricks/types/responses";
+import {
+  TResponse,
+  TResponseData,
+  TResponseHiddenFieldValue,
+  TResponseUpdate,
+} from "@formbricks/types/responses";
 import { TUploadFileConfig } from "@formbricks/types/storage";
 import { TSurvey } from "@formbricks/types/surveys/types";
 import { SurveyInline } from "@formbricks/ui/Survey";
@@ -20,6 +25,7 @@ import { SurveyInline } from "@formbricks/ui/Survey";
 let setIsError = (_: boolean) => {};
 let setIsResponseSendingFinished = (_: boolean) => {};
 let setQuestionId = (_: string) => {};
+let setResponseData = (_: TResponseData) => {};
 
 interface LinkSurveyProps {
   survey: TSurvey;
@@ -123,10 +129,6 @@ export const LinkSurvey = ({
     if (window.self === window.top) {
       setAutofocus(true);
     }
-    // For safari on mobile devices, scroll is a bit off due to dynamic height of address bar, so on inital load, we scroll to the bottom
-    // window.scrollTo({
-    //   top: document.body.scrollHeight,
-    // });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -203,12 +205,17 @@ export const LinkSurvey = ({
     return product.styling;
   };
 
+  const handleResetSurvey = () => {
+    setQuestionId(survey.welcomeCard.enabled ? "start" : survey?.questions[0]?.id);
+    setResponseData({});
+  };
+
   return (
     <LinkSurveyWrapper
       product={product}
       survey={survey}
       isPreview={isPreview}
-      setQuestionId={setQuestionId}
+      handleResetSurvey={handleResetSurvey}
       determineStyling={determineStyling}
       isEmbed={isEmbed}
       webAppUrl={webAppUrl}
@@ -290,6 +297,9 @@ export const LinkSurvey = ({
         getSetQuestionId={(f: (value: string) => void) => {
           setQuestionId = f;
         }}
+        getSetResponseData={(f: (value: TResponseData) => void) => {
+          setResponseData = f;
+        }}
         startAtQuestionId={startAt && isStartAtValid ? startAt : undefined}
         fullSizeCards={isEmbed ? true : false}
         hiddenFieldsRecord={hiddenFieldsRecord}

apps/web/app/s/[surveyId]/components/LinkSurveyWrapper.tsx

@@ -15,7 +15,7 @@ interface LinkSurveyWrapperProps {
   isPreview: boolean;
   isEmbed: boolean;
   determineStyling: () => TSurveyStyling | TProductStyling;
-  setQuestionId: (_: string) => void;
+  handleResetSurvey: () => void;
   IMPRINT_URL?: string;
   PRIVACY_URL?: string;
   IS_FORMBRICKS_CLOUD: boolean;
@@ -29,7 +29,7 @@ export const LinkSurveyWrapper = ({
   isPreview,
   isEmbed,
   determineStyling,
-  setQuestionId,
+  handleResetSurvey,
   IMPRINT_URL,
   PRIVACY_URL,
   IS_FORMBRICKS_CLOUD,
@@ -68,11 +68,7 @@ export const LinkSurveyWrapper = ({
                 <div className="fixed left-0 top-0 flex w-full items-center justify-between bg-slate-600 p-2 px-4 text-center text-sm text-white shadow-sm">
                   <div />
                   Survey Preview 👀
-                  <ResetProgressButton
-                    onClick={() =>
-                      setQuestionId(survey.welcomeCard.enabled ? "start" : survey?.questions[0]?.id)
-                    }
-                  />
+                  <ResetProgressButton onClick={handleResetSurvey} />
                 </div>
               )}
               {children}

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

@@ -32,6 +32,7 @@ export const Survey = ({
   getSetIsError,
   getSetIsResponseSendingFinished,
   getSetQuestionId,
+  getSetResponseData,
   onFileUpload,
   responseCount,
   startAtQuestionId,
@@ -121,6 +122,14 @@ export const Survey = ({
     }
   }, [getSetQuestionId]);
 
+  useEffect(() => {
+    if (getSetResponseData) {
+      getSetResponseData((value: TResponseData) => {
+        setResponseData(value);
+      });
+    }
+  }, [getSetResponseData]);
+
   useEffect(() => {
     if (getSetIsResponseSendingFinished) {
       getSetIsResponseSendingFinished((value: boolean) => {

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;
+  getSetResponseData?: (getSetResponseData: (value: TResponseData) => void) => void;
   onDisplay?: () => void;
   onResponse?: (response: TResponseUpdate) => void;
   onFinished?: () => void;