fix: delete pre-filled value (#5839)

apps/web/modules/auth/verification-requested/components/request-verification-email.test.tsx

@@ -0,0 +1,81 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import toast from "react-hot-toast";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { resendVerificationEmailAction } from "../actions";
+import { RequestVerificationEmail } from "./request-verification-email";
+
+// Mock dependencies
+vi.mock("@tolgee/react", () => ({
+  useTranslate: () => ({
+    t: (key: string, params?: { email?: string }) => {
+      if (key === "auth.verification-requested.no_email_provided") {
+        return "No email provided";
+      }
+      if (key === "auth.verification-requested.verification_email_successfully_sent") {
+        return `Verification email sent to ${params?.email}`;
+      }
+      if (key === "auth.verification-requested.resend_verification_email") {
+        return "Resend verification email";
+      }
+      return key;
+    },
+  }),
+}));
+
+vi.mock("react-hot-toast", () => ({
+  default: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+vi.mock("../actions", () => ({
+  resendVerificationEmailAction: vi.fn(),
+}));
+
+describe("RequestVerificationEmail", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  test("renders resend verification email button", () => {
+    render(<RequestVerificationEmail email="test@example.com" />);
+    expect(screen.getByText("Resend verification email")).toBeInTheDocument();
+  });
+
+  test("shows error toast when no email is provided", async () => {
+    render(<RequestVerificationEmail email={null} />);
+    const button = screen.getByText("Resend verification email");
+    await fireEvent.click(button);
+    expect(toast.error).toHaveBeenCalledWith("No email provided");
+  });
+
+  test("shows success toast when verification email is sent successfully", async () => {
+    const mockEmail = "test@example.com";
+    vi.mocked(resendVerificationEmailAction).mockResolvedValueOnce({ data: true });
+
+    render(<RequestVerificationEmail email={mockEmail} />);
+    const button = screen.getByText("Resend verification email");
+    await fireEvent.click(button);
+
+    expect(resendVerificationEmailAction).toHaveBeenCalledWith({ email: mockEmail });
+    expect(toast.success).toHaveBeenCalledWith(`Verification email sent to ${mockEmail}`);
+  });
+
+  test("reloads page when visibility changes to visible", () => {
+    const mockReload = vi.fn();
+    Object.defineProperty(window, "location", {
+      value: { reload: mockReload },
+      writable: true,
+    });
+
+    render(<RequestVerificationEmail email="test@example.com" />);
+
+    // Simulate visibility change
+    document.dispatchEvent(new Event("visibilitychange"));
+
+    expect(mockReload).toHaveBeenCalled();
+  });
+});

apps/web/modules/auth/verification-requested/components/request-verification-email.tsx

@@ -31,7 +31,7 @@ export const RequestVerificationEmail = ({ email }: RequestVerificationEmailProp
     if (!email) return toast.error(t("auth.verification-requested.no_email_provided"));
     const response = await resendVerificationEmailAction({ email });
     if (response?.data) {
-      toast.success(t("auth.verification-requested.verification_email_successfully_sent"));
+      toast.success(t("auth.verification-requested.verification_email_successfully_sent", { email }));
     } else {
       const errorMessage = getFormattedErrorMessage(response);
       toast.error(errorMessage);

packages/surveys/src/components/general/question-conditional.test.tsx

@@ -1,6 +1,6 @@
 import "@testing-library/jest-dom/vitest";
 import { render, screen } from "@testing-library/preact";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, test, vi } from "vitest";
 import { TSurveyQuestion, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
 import { QuestionConditional } from "./question-conditional";
 
@@ -40,7 +40,7 @@ describe("QuestionConditional", () => {
     vi.clearAllMocks();
   });
 
-  it("renders OpenText question correctly", () => {
+  test("renders OpenText question correctly", () => {
     const question = {
       id: "q1",
       type: TSurveyQuestionTypeEnum.OpenText as const,
@@ -59,7 +59,7 @@ describe("QuestionConditional", () => {
     expect(screen.getByPlaceholderText("Type your answer here")).toBeInTheDocument();
   });
 
-  it("renders MultipleChoiceSingle question correctly", () => {
+  test("renders MultipleChoiceSingle question correctly", () => {
     const question = {
       id: "q2",
       type: TSurveyQuestionTypeEnum.MultipleChoiceSingle as const,
@@ -81,7 +81,7 @@ describe("QuestionConditional", () => {
     expect(screen.getByText("Blue")).toBeInTheDocument();
   });
 
-  it("handles prefilled values correctly", () => {
+  test("handles prefilled values correctly", () => {
     const question = {
       id: "q1",
       type: TSurveyQuestionTypeEnum.OpenText as const,
@@ -98,7 +98,7 @@ describe("QuestionConditional", () => {
       <QuestionConditional
         {...baseProps}
         question={question}
-        value=""
+        value={undefined as any}
         prefilledQuestionValue="John"
         skipPrefilled={true}
       />
@@ -107,7 +107,7 @@ describe("QuestionConditional", () => {
     expect(mockOnSubmit).toHaveBeenCalledWith({ [question.id]: "John" }, { [question.id]: 0 });
   });
 
-  it("renders Rating question correctly", () => {
+  test("renders Rating question correctly", () => {
     const question = {
       id: "q3",
       type: TSurveyQuestionTypeEnum.Rating as const,
@@ -128,7 +128,7 @@ describe("QuestionConditional", () => {
     expect(screen.getByText("Excellent")).toBeInTheDocument();
   });
 
-  it("renders MultipleChoiceMulti question correctly", () => {
+  test("renders MultipleChoiceMulti question correctly", () => {
     const question = {
       id: "q4",
       type: TSurveyQuestionTypeEnum.MultipleChoiceMulti as const,
@@ -150,7 +150,7 @@ describe("QuestionConditional", () => {
     expect(screen.getByText("Banana")).toBeInTheDocument();
   });
 
-  it("renders NPS question correctly", () => {
+  test("renders NPS question correctly", () => {
     const question = {
       id: "q5",
       type: TSurveyQuestionTypeEnum.NPS as const,
@@ -169,7 +169,7 @@ describe("QuestionConditional", () => {
     expect(screen.getByText("Very likely")).toBeInTheDocument();
   });
 
-  it("renders Date question correctly", () => {
+  test("renders Date question correctly", () => {
     const question = {
       id: "q6",
       type: TSurveyQuestionTypeEnum.Date as const,
@@ -186,7 +186,7 @@ describe("QuestionConditional", () => {
     expect(screen.getByText("When is your birthday?")).toBeInTheDocument();
   });
 
-  it("renders PictureSelection question correctly", () => {
+  test("renders PictureSelection question correctly", () => {
     const question = {
       id: "q7",
       type: TSurveyQuestionTypeEnum.PictureSelection as const,
@@ -206,7 +206,7 @@ describe("QuestionConditional", () => {
     expect(screen.getByText("Choose your favorite picture")).toBeInTheDocument();
   });
 
-  it("handles unimplemented question type correctly", () => {
+  test("handles unimplemented question type correctly", () => {
     const question: TSurveyQuestion = {
       id: "invalid",
       type: TSurveyQuestionTypeEnum.Address, // Address type doesn't have a matching case in the component

packages/surveys/src/components/general/question-conditional.tsx

@@ -14,6 +14,7 @@ import { PictureSelectionQuestion } from "@/components/questions/picture-selecti
 import { RankingQuestion } from "@/components/questions/ranking-question";
 import { RatingQuestion } from "@/components/questions/rating-question";
 import { getLocalizedValue } from "@/lib/i18n";
+import { useEffect } from "react";
 import { type TJsFileUploadParams } from "@formbricks/types/js";
 import { type TResponseData, type TResponseDataValue, type TResponseTtc } from "@formbricks/types/responses";
 import { type TUploadFileConfig } from "@formbricks/types/storage";
@@ -74,13 +75,16 @@ export function QuestionConditional({
       .filter((id): id is TSurveyQuestionChoice["id"] => id !== undefined);
   };
 
-  if (!value && (prefilledQuestionValue || prefilledQuestionValue === "")) {
-    if (skipPrefilled) {
-      onSubmit({ [question.id]: prefilledQuestionValue }, { [question.id]: 0 });
-    } else {
-      onChange({ [question.id]: prefilledQuestionValue });
+  useEffect(() => {
+    if (value === undefined && (prefilledQuestionValue || prefilledQuestionValue === "")) {
+      if (skipPrefilled) {
+        onSubmit({ [question.id]: prefilledQuestionValue }, { [question.id]: 0 });
+      } else {
+        onChange({ [question.id]: prefilledQuestionValue });
+      }
     }
-  }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- we want to run this only once when the question renders for the first time
+  }, []);
 
   return question.type === TSurveyQuestionTypeEnum.OpenText ? (
     <OpenTextQuestion