From fc592a17ac6df2a7b486935b6eaae8164df228b7 Mon Sep 17 00:00:00 2001
From: Rajesh Jonnalagadda <38752904+rajeshj11@users.noreply.github.com>
Date: Sun, 18 Aug 2024 23:04:59 +0530
Subject: [PATCH] feat: Add 'Disable on Prefill' option for fields (#15715)

* feat:add prefilcheck check box in the field creation

* chore:formatted the li8 translations

* feat:add e2e test case for this feature

* refactor:reanmed the key from prefilledCheck to disableOnPrefill and moved the readOnly logic to formbuilderField

* chore:fixed the type check

* fix:if prefilled has error. do not disabble it

* chore:removed the e2e tests for prefill in e2e

* chore:revert back to old changes

* chore:remove unwanted code frome2e

* Support name field as well

* refactor:handled the feedback changes. still unit test cases pending

* feat: add unit tests for  disable field on prefill logic

* chore: resolved the type check and typos

* chore:renamed the files and type clean up

* Apply suggestions from code review

* chore:renaming test files and moving the disableonprefill hook to formbuilderFeild.

* refactor: add unit test for serach params and form values check and minor code formatting and file name changes

* fix: validating the input value partially at the intialising phase. so that form response values and  from ui values are same and making sure invalid data not sent to backend on submit.

* chore:fix the type check issue

* fix: field value valdiation at initilisation and add the  unit test cases for that change

* chore:add comments to the tests

* chore:resolve type check

* chore: moved the tests to the formBuilder

* Simplify codebase by ensuring select and multiselect changes the value when no option is found

* Relocate and refactor tests

* handle special cases

* Dont disable for dirty fields

* Update schema.prisma

---------

Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Co-authored-by: Hariom <hariombalhara@gmail.com>
---
 .../inputs/update-event-type.input.ts         |   4 +
 .../outputs/get-event-type-public.output.ts   |   4 +
 apps/web/public/static/locales/en/common.json |   1 +
 .../components/FormInputFields.tsx            |   2 +-
 .../widgets.test.tsx                          | 103 ++++
 .../react-awesome-query-builder/widgets.tsx   |  17 +-
 .../embed-core/playwright/lib/testUtils.ts    |   2 +-
 packages/features/form-builder/Components.tsx |   4 +-
 .../features/form-builder/FormBuilder.tsx     |  10 +
 .../form-builder/FormBuilderField.tsx         |   9 +-
 .../lib/formbuilder/test/FormBuilder.test.tsx |  77 +++
 .../lib/formbuilder/test/testUtils.ts         | 184 ++++++
 packages/features/form-builder/schema.ts      |   5 +-
 .../useShouldBeDisabledDueToPrefill.test.ts   | 554 ++++++++++++++++++
 .../useShouldBeDisabledDueToPrefill.tsx       | 118 ++++
 packages/prisma/schema.prisma                 |   2 +-
 vitest.workspace.ts                           |  13 +-
 17 files changed, 1098 insertions(+), 11 deletions(-)
 create mode 100644 packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.test.tsx
 create mode 100644 packages/features/form-builder/lib/formbuilder/test/FormBuilder.test.tsx
 create mode 100644 packages/features/form-builder/lib/formbuilder/test/testUtils.ts
 create mode 100644 packages/features/form-builder/useShouldBeDisabledDueToPrefill.test.ts
 create mode 100644 packages/features/form-builder/useShouldBeDisabledDueToPrefill.tsx

diff --git a/apps/api/v2/src/ee/event-types/event-types_2024_04_15/inputs/update-event-type.input.ts b/apps/api/v2/src/ee/event-types/event-types_2024_04_15/inputs/update-event-type.input.ts
index cf9c3c901c..1f1f5c50a7 100644
--- a/apps/api/v2/src/ee/event-types/event-types_2024_04_15/inputs/update-event-type.input.ts
+++ b/apps/api/v2/src/ee/event-types/event-types_2024_04_15/inputs/update-event-type.input.ts
@@ -177,6 +177,10 @@ export class BookingField_2024_04_15 {
   @ValidateNested({ each: true })
   @Type(() => Source)
   sources?: Source[];
+
+  @IsOptional()
+  @IsBoolean()
+  disableOnPrefill?: boolean;
 }
 
 export class RecurringEvent_2024_04_15 {
diff --git a/apps/api/v2/src/ee/event-types/event-types_2024_04_15/outputs/get-event-type-public.output.ts b/apps/api/v2/src/ee/event-types/event-types_2024_04_15/outputs/get-event-type-public.output.ts
index 887e1f6bef..7d71d04965 100644
--- a/apps/api/v2/src/ee/event-types/event-types_2024_04_15/outputs/get-event-type-public.output.ts
+++ b/apps/api/v2/src/ee/event-types/event-types_2024_04_15/outputs/get-event-type-public.output.ts
@@ -87,6 +87,10 @@ class BookingField {
   @Type(() => Source)
   @IsOptional()
   sources?: Source[];
+
+  @IsOptional()
+  @IsBoolean()
+  disableOnPrefill?: boolean;
 }
 
 class Organization {
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index b04c5ea5ea..b30e514580 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -2561,5 +2561,6 @@
   "number_of_options":"{{count}} options",
   "reschedule_with_same_round_robin_host_title": "Reschedule with same Round-Robin host",
   "reschedule_with_same_round_robin_host_description": "Rescheduled events will be assigned to the same host as initially scheduled",
+   "disable_input_if_prefilled": "Disable input if the URL identifier is prefilled",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }
diff --git a/packages/app-store/routing-forms/components/FormInputFields.tsx b/packages/app-store/routing-forms/components/FormInputFields.tsx
index 4a15f6550f..ad87020c33 100644
--- a/packages/app-store/routing-forms/components/FormInputFields.tsx
+++ b/packages/app-store/routing-forms/components/FormInputFields.tsx
@@ -47,7 +47,7 @@ export default function FormInputFields(props: Props) {
               </label>
             </div>
             <Component
-              value={response[field.id]?.value}
+              value={response[field.id]?.value ?? ""}
               placeholder={field.placeholder ?? ""}
               // required property isn't accepted by query-builder types
               // eslint-disable-next-line @typescript-eslint/ban-ts-comment
diff --git a/packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.test.tsx b/packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.test.tsx
new file mode 100644
index 0000000000..3c932cf4c2
--- /dev/null
+++ b/packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.test.tsx
@@ -0,0 +1,103 @@
+import { render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+
+import widgets from "./widgets";
+
+const { SelectWidget, MultiSelectWidget } = widgets;
+
+// Mock the dynamic import of Select component
+vi.mock("next/dynamic", () => ({
+  __esModule: true,
+  default: () => {
+    return function MockSelect({
+      options,
+      onChange,
+      value,
+      isMulti,
+    }: {
+      options: { value: string; label: string }[];
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      onChange: (value: any) => void;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      value: any;
+      isMulti: boolean;
+    }) {
+      return (
+        <select
+          data-testid="mock-select"
+          multiple={isMulti}
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          value={isMulti ? value.map((v: any) => v.value) : value?.value}
+          onChange={(e) => {
+            const selectedOptions = Array.from(e.target.selectedOptions, (option) => ({
+              value: option.value,
+              label: option.text,
+            }));
+            onChange(isMulti ? selectedOptions : selectedOptions[0]);
+          }}>
+          {options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      );
+    };
+  },
+}));
+
+describe("Select Widgets", () => {
+  describe("SelectWidget", () => {
+    const listValues = [
+      { title: "Option 1", value: "1" },
+      { title: "Option 2", value: "2" },
+      { title: "Option 3", value: "3" },
+    ];
+
+    it("should handle render the value in option correctly", () => {
+      const setValue = vi.fn();
+      render(<SelectWidget value="2" setValue={setValue} listValues={listValues} />);
+
+      const select = screen.getByTestId("mock-select");
+      expect(select).toBeInTheDocument();
+      expect(screen.getAllByRole("option")).toHaveLength(3);
+      expect(setValue).not.toHaveBeenCalled();
+    });
+
+    it("should handle a value that is not in the list and reset the value to empty string", () => {
+      const setValue = vi.fn();
+      render(<SelectWidget value="4" setValue={setValue} listValues={listValues} />);
+
+      const select = screen.getByTestId("mock-select");
+      expect(select).toBeInTheDocument();
+      expect(screen.getAllByRole("option")).toHaveLength(3);
+      expect(setValue).toHaveBeenCalledWith("");
+    });
+  });
+
+  describe("MultiSelectWidget", () => {
+    const listValues = [
+      { title: "Option 1", value: "1" },
+      { title: "Option 2", value: "2" },
+      { title: "Option 3", value: "3" },
+    ];
+
+    it("renders options correctly", () => {
+      const setValue = vi.fn();
+
+      render(<MultiSelectWidget value={[]} setValue={setValue} listValues={listValues} />);
+
+      const select = screen.getByTestId("mock-select");
+      expect(select).toBeInTheDocument();
+      expect(screen.getAllByRole("option")).toHaveLength(3);
+      expect(setValue).not.toHaveBeenCalled();
+    });
+
+    it("sets value to empty array when no options match", () => {
+      const setValue = vi.fn();
+      render(<MultiSelectWidget value={["4", "5"]} setValue={setValue} listValues={listValues} />);
+
+      expect(setValue).toHaveBeenCalledWith([]);
+    });
+  });
+});
diff --git a/packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx b/packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx
index 5065df70c7..0d7220b3b2 100644
--- a/packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx
+++ b/packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx
@@ -150,8 +150,6 @@ const MultiSelectWidget = ({
   value,
   ...remainingProps
 }: SelectLikeComponentPropsRAQB<string[]>) => {
-  //TODO: Use Select here.
-  //TODO: Let's set listValue itself as label and value instead of using title.
   if (!listValues) {
     return null;
   }
@@ -164,6 +162,14 @@ const MultiSelectWidget = ({
 
   const optionsFromList = selectItems.filter((item) => value?.includes(item.value));
 
+  // If no value could be found in the list, then we set the value to undefined.
+  // This is to update the value back to the source that we couldn't set it. This is important otherwise the outside party thinks that the value is set but it is not.
+  // Do it only when it is not already empty, this is to avoid infinite state updates
+  // NOTE: value is some times sent as undefined even though the type will tell you that it can't be
+  if (optionsFromList.length === 0 && value?.length) {
+    setValue([]);
+  }
+
   return (
     <Select
       aria-label="multi-select-dropdown"
@@ -192,6 +198,13 @@ function SelectWidget({ listValues, setValue, value, ...remainingProps }: Select
   });
   const optionFromList = selectItems.find((item) => item.value === value);
 
+  // If the value is not in the list, then we set the value to undefined.
+  // This is to update the value back to the source that we couldn't set it. This is important otherwise the outside party thinks that the value is set but it is not.
+  // Do it only when it is not already empty string, this is to avoid infinite state updates
+  if (!optionFromList && value) {
+    setValue("");
+  }
+
   return (
     <Select
       aria-label="select-dropdown"
diff --git a/packages/embeds/embed-core/playwright/lib/testUtils.ts b/packages/embeds/embed-core/playwright/lib/testUtils.ts
index 7ef345a7ed..01bb74c085 100644
--- a/packages/embeds/embed-core/playwright/lib/testUtils.ts
+++ b/packages/embeds/embed-core/playwright/lib/testUtils.ts
@@ -68,7 +68,7 @@ export const getEmbedIframe = async ({
         }, hardTimeout);
       });
     },
-    !process.env.CI ? 150000 : 15000
+    !process.env.CI ? 15000 : 15000
   );
   if (!iframeReady) {
     return null;
diff --git a/packages/features/form-builder/Components.tsx b/packages/features/form-builder/Components.tsx
index b2b430bb4a..6e1fd5e790 100644
--- a/packages/features/form-builder/Components.tsx
+++ b/packages/features/form-builder/Components.tsx
@@ -223,6 +223,7 @@ export const Components: Record<FieldType, Component> = {
             props.setValue(val);
           }}
           {...props}
+          disabled={props.readOnly}
         />
       );
     },
@@ -364,9 +365,10 @@ export const Components: Record<FieldType, Component> = {
   },
   radio: {
     propsType: propsTypes.radio,
-    factory: ({ setValue, name, value, options }) => {
+    factory: ({ setValue, name, value, options, readOnly }) => {
       return (
         <Group
+          disabled={readOnly}
           value={value}
           onValueChange={(e) => {
             setValue(e);
diff --git a/packages/features/form-builder/FormBuilder.tsx b/packages/features/form-builder/FormBuilder.tsx
index 8031cb107f..eb138b7f65 100644
--- a/packages/features/form-builder/FormBuilder.tsx
+++ b/packages/features/form-builder/FormBuilder.tsx
@@ -11,6 +11,7 @@ import {
   Badge,
   BooleanToggleGroupField,
   Button,
+  CheckboxField,
   Dialog,
   DialogClose,
   DialogContent,
@@ -491,6 +492,10 @@ function FieldEditDialog({
                       }
                       label={t("identifier")}
                     />
+                    <CheckboxField
+                      description={t("disable_input_if_prefilled")}
+                      {...fieldForm.register("disableOnPrefill", { setValueAs: Boolean })}
+                    />
                     <InputField
                       {...fieldForm.register("label")}
                       // System fields have a defaultLabel, so there a label is not required
@@ -727,6 +732,11 @@ function VariantFields({
         label={t("identifier")}
       />
 
+      <CheckboxField
+        description={t("disable_input_if_prefilled")}
+        {...fieldForm.register("disableOnPrefill", { setValueAs: Boolean })}
+      />
+
       <ul
         className={classNames(
           !isSimpleVariant ? "border-subtle divide-subtle mt-2 divide-y rounded-md border" : ""
diff --git a/packages/features/form-builder/FormBuilderField.tsx b/packages/features/form-builder/FormBuilderField.tsx
index a9f2e46fa9..e5cb5ee0f4 100644
--- a/packages/features/form-builder/FormBuilderField.tsx
+++ b/packages/features/form-builder/FormBuilderField.tsx
@@ -11,6 +11,10 @@ import { Components, isValidValueProp } from "./Components";
 import { fieldTypesConfigMap } from "./fieldTypes";
 import { fieldsThatSupportLabelAsSafeHtml } from "./fieldsThatSupportLabelAsSafeHtml";
 import type { fieldsSchema } from "./schema";
+import {
+  useShouldBeDisabledDueToPrefill,
+  getFieldNameFromErrorMessage,
+} from "./useShouldBeDisabledDueToPrefill";
 import { getTranslatedConfig as getTranslatedVariantsConfig } from "./utils/variantsConfig";
 
 type RhfForm = {
@@ -59,6 +63,7 @@ export const FormBuilderField = ({
     t
   );
 
+  const shouldBeDisabled = useShouldBeDisabledDueToPrefill(field);
   return (
     <div data-fob-field-name={field.name} className={classNames(className, hidden ? "hidden" : "")}>
       <Controller
@@ -71,7 +76,7 @@ export const FormBuilderField = ({
               <ComponentForField
                 field={{ ...field, label, placeholder, hidden }}
                 value={value}
-                readOnly={readOnly}
+                readOnly={readOnly || shouldBeDisabled}
                 setValue={(val: unknown) => {
                   onChange(val);
                 }}
@@ -84,7 +89,7 @@ export const FormBuilderField = ({
                 render={({ message }: { message: string | undefined }) => {
                   message = message || "";
                   // If the error comes due to parsing the `responses` object(which can have error for any field), we need to identify the field that has the error from the message
-                  const name = message.replace(/\{([^}]+)\}.*/, "$1");
+                  const name = getFieldNameFromErrorMessage(message);
                   const isResponsesErrorForThisField = name === field.name;
                   // If the error comes for the specific property of responses(Possible for system fields), then also we would go ahead and show the error
                   if (!isResponsesErrorForThisField && !error) {
diff --git a/packages/features/form-builder/lib/formbuilder/test/FormBuilder.test.tsx b/packages/features/form-builder/lib/formbuilder/test/FormBuilder.test.tsx
new file mode 100644
index 0000000000..6e369b2977
--- /dev/null
+++ b/packages/features/form-builder/lib/formbuilder/test/FormBuilder.test.tsx
@@ -0,0 +1,77 @@
+import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { render } from "@testing-library/react";
+import React from "react";
+import type { ReactNode } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { vi } from "vitest";
+
+import { FormBuilder } from "@calcom/features/form-builder/FormBuilder";
+
+import { mockProps, questionUtils, setMockIntersectionObserver, setMockMatchMedia } from "./testUtils";
+
+vi.mock("@formkit/auto-animate/react", () => ({
+  useAutoAnimate: () => [null],
+}));
+
+const renderComponent = () => {
+  const Wrapper = ({ children }: { children: ReactNode }) => {
+    const methods = useForm();
+    return (
+      <TooltipProvider>
+        <FormProvider {...methods}>{children}</FormProvider>
+      </TooltipProvider>
+    );
+  };
+
+  return render(<FormBuilder {...mockProps} />, { wrapper: Wrapper });
+};
+
+const questionTypes = [
+  { questionType: "email", label: "Email Field" },
+  { questionType: "phone", label: "Phone Field" },
+  { questionType: "address", label: "Address Field" },
+  { questionType: "text", label: "Short Text Field" },
+  { questionType: "number", label: "Number Field" },
+  { questionType: "textarea", label: "Long Text Field" },
+  { questionType: "select", label: "Select Field" },
+  { questionType: "multiselect", label: "MultiSelect Field" },
+  { questionType: "multiemail", label: "Multiple Emails Field" },
+  { questionType: "checkbox", label: "CheckBox Group Field" },
+  { questionType: "radio", label: "Radio Group Field" },
+  { questionType: "boolean", label: "Checkbox Field" },
+];
+
+describe("Form Builder - Add and Edit", () => {
+  beforeAll(() => {
+    setMockMatchMedia();
+    setMockIntersectionObserver();
+  });
+
+  beforeEach(() => {
+    renderComponent();
+  });
+
+  for (const { questionType, label } of questionTypes) {
+    it(`should successfully create or edit a ${label} question type in the form builder, with the option to disable the field on prefill`, async () => {
+      const defaultIdentifier = `${questionType}-id`;
+      const newIdentifier = `${defaultIdentifier}-edited`;
+
+      // Add a question
+      await questionUtils.addQuestion({
+        questionType,
+        identifier: defaultIdentifier,
+        label,
+        disableOnPrefill: true,
+      });
+      questionUtils.expectedValueForDisablePreFillCheckox(true);
+
+      // Edit the question
+      await questionUtils.editQuestion({
+        identifier: newIdentifier,
+        existingQuestionId: defaultIdentifier,
+        disableOnPrefill: false,
+      });
+      questionUtils.expectedValueForDisablePreFillCheckox(false);
+    });
+  }
+});
diff --git a/packages/features/form-builder/lib/formbuilder/test/testUtils.ts b/packages/features/form-builder/lib/formbuilder/test/testUtils.ts
new file mode 100644
index 0000000000..f3f83f40cc
--- /dev/null
+++ b/packages/features/form-builder/lib/formbuilder/test/testUtils.ts
@@ -0,0 +1,184 @@
+import { fireEvent, waitFor, screen } from "@testing-library/react";
+import { vi } from "vitest";
+import type { z } from "zod";
+
+import type { fieldsSchema } from "@calcom/features/form-builder/schema";
+
+type RhfForm = {
+  fields: z.infer<typeof fieldsSchema>;
+};
+
+type RhfFormFields = RhfForm["fields"];
+
+export type RhfFormField = RhfFormFields[number];
+
+export type FieldType = RhfFormField["type"];
+export interface QuestionProps {
+  questionType: string;
+  identifier: string;
+  label: string;
+  disableOnPrefill?: boolean;
+}
+
+export interface FormBuilderProps {
+  formProp: string;
+  title: string;
+  description: string;
+  addFieldLabel: string;
+  disabled: boolean;
+  LockedIcon: false | JSX.Element;
+  dataStore: {
+    options: Record<string, { label: string; value: string; inputPlaceholder?: string }[]>;
+  };
+  disableOnPrefill?: boolean;
+}
+
+export interface FormBuildFieldProps {
+  field: Omit<RhfFormField, "editable" | "label"> & {
+    // Label is optional because radioInput doesn't have a label
+    label?: string;
+    value: string;
+  };
+  readOnly: boolean;
+}
+
+export const mockProps: FormBuilderProps = {
+  formProp: "formProp",
+  title: "FormBuilder Title",
+  description: "FormBuilder Description",
+  addFieldLabel: "Add Field",
+  disabled: false,
+  LockedIcon: false,
+  dataStore: { options: {} },
+  disableOnPrefill: false,
+};
+
+export const mockFieldProps: FormBuildFieldProps = {
+  field: {
+    type: "text",
+    name: "test-text-n",
+    variant: "text",
+    placeholder: "text-test-p",
+    required: false,
+    label: "text-test-l",
+    disableOnPrefill: false,
+    value: "",
+  },
+  readOnly: false,
+};
+
+export const setMockMatchMedia = () => {
+  Object.defineProperty(window, "matchMedia", {
+    value: vi.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  });
+};
+
+export const setMockIntersectionObserver = () => {
+  Object.defineProperty(window, "IntersectionObserver", {
+    value: vi.fn().mockImplementation(() => ({
+      observe: vi.fn(),
+      unobserve: vi.fn(),
+      disconnect: vi.fn(),
+      takeRecords: vi.fn(() => []),
+    })),
+  });
+};
+
+export const clickDisablePrefillBasedOnUserInput = (disableOnPrefill?: boolean) => {
+  if (typeof disableOnPrefill === "boolean") {
+    // Get the checkbox element
+    const checkbox = getDisablePrefillCheckbox(disableOnPrefill) as HTMLInputElement;
+
+    // Determine if the checkbox's current state differs from the `disableOnPrefill` prop
+    const isChecked = checkbox ? checkbox.checked : false;
+
+    // Click the checkbox only if its current state differs from the `disableOnPrefill` value
+    if (isChecked !== disableOnPrefill) {
+      fireEvent.click(checkbox);
+    }
+  }
+};
+
+export const getDisablePrefillCheckbox = (disableOnPrefill?: boolean) => {
+  if (typeof disableOnPrefill === "boolean") {
+    const checkbox = screen.getByRole("checkbox", { name: /disable_input_if_prefilled/i });
+    return checkbox;
+  }
+};
+
+export const checkForDisablePreFillCheckox = (disableOnPrefill?: boolean) => {
+  const checkbox = getDisablePrefillCheckbox(disableOnPrefill);
+  expect(checkbox).toBeInTheDocument();
+};
+
+export const questionUtils = {
+  addQuestion: async (props: QuestionProps) => {
+    fireEvent.click(screen.getByTestId("add-field"));
+    checkForDisablePreFillCheckox(props?.disableOnPrefill);
+    fireEvent.keyDown(screen.getByTestId("test-field-type"), { key: "ArrowDown", code: "ArrowDown" });
+    fireEvent.click(screen.getByTestId(`select-option-${props.questionType}`));
+    fireEvent.change(screen.getAllByRole("textbox")[0], { target: { value: props.identifier } });
+    fireEvent.change(screen.getAllByRole("textbox")[1], { target: { value: props.label } });
+    clickDisablePrefillBasedOnUserInput(props?.disableOnPrefill);
+    fireEvent.click(screen.getByTestId("field-add-save"));
+    await waitFor(() => {
+      expect(screen.queryByTestId(`field-${props.identifier}`)).toBeInTheDocument();
+    });
+  },
+  editQuestion: async (props: {
+    identifier: string;
+    existingQuestionId: string;
+    disableOnPrefill?: boolean;
+  }) => {
+    fireEvent.click(screen.getByTestId("edit-field-action"));
+    checkForDisablePreFillCheckox(props?.disableOnPrefill);
+    fireEvent.change(screen.getAllByRole("textbox")[0], { target: { value: props.identifier } });
+    clickDisablePrefillBasedOnUserInput(props?.disableOnPrefill);
+
+    fireEvent.click(screen.getByTestId("field-add-save"));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId(`field-${props.identifier}`)).toBeInTheDocument();
+      expect(screen.queryByTestId(`field-${props.existingQuestionId}`)).not.toBeInTheDocument();
+    });
+  },
+  deleteQuestion: async (existingQuestionId: string) => {
+    expect(screen.queryByTestId(`field-${existingQuestionId}`)).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId("delete-field-action"));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId(`field-${existingQuestionId}`)).not.toBeInTheDocument();
+    });
+  },
+  hideQuestion: async () => {
+    fireEvent.click(screen.getByTestId("toggle-field"));
+
+    await waitFor(() => {
+      expect(screen.queryByText(/hidden/i)).toBeInTheDocument();
+    });
+  },
+  requiredAndOptionalQuestion: async () => {
+    expect(screen.queryByTestId("required")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId("edit-field-action"));
+    fireEvent.click(screen.getAllByRole("radio")[1]);
+    fireEvent.click(screen.getByTestId("field-add-save"));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("optional")).toBeInTheDocument();
+    });
+  },
+  expectedValueForDisablePreFillCheckox: async (expectedValue: boolean) => {
+    fireEvent.click(screen.getByTestId("edit-field-action"));
+    const checkbox = getDisablePrefillCheckbox(expectedValue) as HTMLInputElement;
+    await expect(checkbox?.checked).toBe(expectedValue);
+  },
+};
diff --git a/packages/features/form-builder/schema.ts b/packages/features/form-builder/schema.ts
index 0d9c275006..b7934e0369 100644
--- a/packages/features/form-builder/schema.ts
+++ b/packages/features/form-builder/schema.ts
@@ -238,6 +238,7 @@ export const fieldSchema = baseFieldSchema.merge(
         })
       )
       .optional(),
+    disableOnPrefill: z.boolean().default(false).optional(),
   })
 );
 
@@ -329,12 +330,12 @@ export const fieldTypesSchemaMap: Partial<
         }
         const valueIdentified = response as unknown as Record<string, string>;
         if (subField.required) {
+          if (!isPartialSchema && !valueIdentified[subField.name])
+            ctx.addIssue({ code: z.ZodIssueCode.custom, message: m(`error_required_field`) });
           if (!schema.safeParse(valueIdentified[subField.name]).success) {
             ctx.addIssue({ code: z.ZodIssueCode.custom, message: m("Invalid string") });
             return;
           }
-          if (!isPartialSchema && !valueIdentified[subField.name])
-            ctx.addIssue({ code: z.ZodIssueCode.custom, message: m(`error_required_field`) });
         }
       });
     },
diff --git a/packages/features/form-builder/useShouldBeDisabledDueToPrefill.test.ts b/packages/features/form-builder/useShouldBeDisabledDueToPrefill.test.ts
new file mode 100644
index 0000000000..73b238996d
--- /dev/null
+++ b/packages/features/form-builder/useShouldBeDisabledDueToPrefill.test.ts
@@ -0,0 +1,554 @@
+import type { Control } from "react-hook-form";
+import { useFormContext } from "react-hook-form";
+import { describe, expect, vi, beforeEach, test } from "vitest";
+
+import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
+
+import { useShouldBeDisabledDueToPrefill } from "./useShouldBeDisabledDueToPrefill";
+
+vi.mock("@calcom/lib/hooks/useRouterQuery", () => ({
+  useRouterQuery: vi.fn(),
+}));
+
+// Mock `react-hook-form` module
+vi.mock("react-hook-form", async () => {
+  const actual: any = await vi.importActual("react-hook-form");
+  return {
+    ...actual,
+    useFormContext: vi.fn(),
+  };
+});
+
+const defaultField = {
+  name: "test-field",
+  type: "text" as const,
+};
+
+type FormState = {
+  dirtyFields: {
+    responses: Record<string, boolean>;
+  };
+};
+
+const buildFormState = (formState?: FormState) => {
+  formState = formState || {
+    dirtyFields: {
+      responses: {},
+    },
+  };
+  return {
+    ...formState,
+  };
+};
+
+const buildFormStateWithErrorForField = ({
+  fieldName,
+  formState,
+}: {
+  fieldName: string;
+  formState?: FormState;
+}) => {
+  return {
+    ...buildFormState(formState),
+    errors: {
+      responses: {
+        message: `{${fieldName}}Some error in the field`,
+      },
+    },
+  };
+};
+
+const buildFormStateWithNoErrors = (formState?: FormState) => {
+  return buildFormState(formState);
+};
+
+const getMockFormContext = ({
+  formState,
+  responses,
+}: {
+  formState: FormState;
+  responses: Record<string, string | string[]>;
+}) => {
+  return {
+    formState,
+    control: {} as Control,
+    getValues: () => ({
+      responses,
+    }),
+  };
+};
+
+function mockFormContext({ formState, responses }: { formState: any; responses: any }) {
+  (vi.mocked(useFormContext) as any).mockReturnValue(getMockFormContext({ formState, responses }));
+}
+
+function mockScenario({
+  formState,
+  responses,
+  searchParams,
+}: {
+  formState: any;
+  responses: any;
+  searchParams: any;
+}) {
+  mockFormContext({ formState, responses });
+  vi.mocked(useRouterQuery).mockReturnValue(searchParams);
+}
+
+describe("useShouldBeDisabledDueToPrefill", () => {
+  beforeEach(() => {
+    // Reset mocks before each test
+    vi.resetAllMocks();
+  });
+
+  describe("When disableOnPrefill is true", () => {
+    test("should return `false` for a field if there is an error for the field", () => {
+      const field = {
+        ...defaultField,
+        disableOnPrefill: true,
+      };
+      mockScenario({
+        formState: buildFormStateWithErrorForField({ fieldName: field.name }),
+        responses: {
+          [field.name]: "TestValue",
+        },
+        searchParams: {
+          [field.name]: "TestValue",
+        },
+      });
+      const shouldBeDisabled = useShouldBeDisabledDueToPrefill(field);
+
+      expect(shouldBeDisabled).toBe(false);
+    });
+
+    test("should return `true` for a field if there is an error but not for that field", () => {
+      const field = {
+        ...defaultField,
+        disableOnPrefill: true,
+      };
+      mockScenario({
+        formState: buildFormStateWithErrorForField({ fieldName: "some-other-field" }),
+        responses: {
+          [field.name]: "TestValue",
+        },
+        searchParams: {
+          [field.name]: "TestValue",
+        },
+      });
+      const shouldBeDisabled = useShouldBeDisabledDueToPrefill(field);
+
+      expect(shouldBeDisabled).toBe(true);
+    });
+
+    test("should return `true` for a field if there are no errors", () => {
+      const field = {
+        ...defaultField,
+        disableOnPrefill: true,
+      };
+      mockScenario({
+        formState: buildFormStateWithNoErrors(),
+        responses: {
+          [field.name]: "TestValue",
+        },
+        searchParams: {
+          [field.name]: "TestValue",
+        },
+      });
+      const shouldBeDisabled = useShouldBeDisabledDueToPrefill(field);
+
+      expect(shouldBeDisabled).toBe(true);
+    });
+
+    test("should return `false` when the responses and searchParams both are empty(handles the undefined === undefined case)", () => {
+      const field = {
+        ...defaultField,
+        disableOnPrefill: true,
+      };
+      mockScenario({
+        formState: buildFormStateWithNoErrors(),
+        responses: {},
+        searchParams: {},
+      });
+      const shouldBeDisabled = useShouldBeDisabledDueToPrefill(field);
+
+      expect(shouldBeDisabled).toBe(false);
+    });
+
+    describe("Special handling of radioInput and variantsConfig type fields", () => {
+      describe("radioInput type field", () => {
+        test(`should return true for radioInput type field when the searchParams value is set and response is also set even though it doesn't match`, () => {
+          const field = {
+            ...defaultField,
+            type: "radioInput" as const,
+            disableOnPrefill: true,
+            optionsInputs: {
+              phone: {
+                type: "phone" as const,
+              },
+            },
+          };
+          mockScenario({
+            formState: buildFormStateWithNoErrors(),
+            searchParams: {
+              [field.name]: "TestValue1",
+            },
+            responses: {
+              [field.name]: {
+                value: "phone",
+                optionValue: "TestValue2",
+              },
+            },
+          });
+          const shouldBeDisabled = useShouldBeDisabledDueToPrefill(field);
+          expect(shouldBeDisabled).toBe(true);
+        });
+
+        test(`should return false for radioInput type field when the searchParams value is set and response is also set but it isn't valid`, () => {
+          const field = {
+            ...defaultField,
+            type: "radioInput" as const,
+            disableOnPrefill: true,
+            optionsInputs: {
+              phone: {
+                type: "phone" as const,
+              },
+            },
+          };
+          mockScenario({
+            formState: buildFormStateWithNoErrors(),
+            searchParams: {
+              [field.name]: "TestValue1",
+            },
+            responses: {
+              [field.name]: "TestValue2",
+            },
+          });
+          const shouldBeDisabled = useShouldBeDisabledDueToPrefill(field);
+          expect(shouldBeDisabled).toBe(false);
+        });
+
+        test(`should return false for radioInput type field when the searchParams value is set and response is also set but it radioInput value isn't completely filled(optionsInputs case)`, () => {
+          const field = {
+            ...defaultField,
+            type: "radioInput" as const,
+            disableOnPrefill: true,
+            optionsInputs: {
+              phone: {
+                type: "phone" as const,
+              },
+            },
+          };
+          mockScenario({
+            formState: buildFormStateWithNoErrors(),
+            searchParams: {
+              [field.name]: "TestValue1",
+            },
+            responses: {
+              [field.name]: {
+                value: "phone",
+                // Not filled
+                optionValue: "",
+              },
+            },
+          });
+          const shouldBeDisabled = useShouldBeDisabledDueToPrefill(field);
+          expect(shouldBeDisabled).toBe(false);
+        });
+
+        test(`should return false for radioInput type field when the searchParams value is set and response is also set but it radioInput value isn't completely filled`, () => {
+          const field = {
+            ...defaultField,
+            type: "radioInput" as const,
+            disableOnPrefill: true,
+            optionsInputs: {
+              not_phone: {
+                type: "phone" as const,
+              },
+            },
+          };
+          mockScenario({
+            formState: buildFormStateWithNoErrors(),
+            searchParams: {
+              [field.name]: "TestValue1",
+            },
+            responses: {
+              [field.name]: {
+                value: "phone",
+                // Not filled but doesn't matter because phone type doesn't need optionValue as per the optionsInputs
+                optionValue: "",
+              },
+            },
+          });
+          const shouldBeDisabled = useShouldBeDisabledDueToPrefill(field);
+          expect(shouldBeDisabled).toBe(true);
+        });
+
+        test(`should return false for radioInput type field if some other field is set in the searchParams`, () => {
+          const field = {
+            ...defaultField,
+            type: "radioInput" as const,
+            disableOnPrefill: true,
+          };
+          mockScenario({
+            formState: buildFormStateWithNoErrors(),
+            searchParams: {
+              ["some-other-field"]: "TestValue1",
+            },
+            responses: {},
+          });
+          const shouldBeDisabled = useShouldBeDisabledDueToPrefill(field);
+          expect(shouldBeDisabled).toBe(false);
+        });
+      });
+
+      test(`should return true for field with variantsConfig when the searchParams value is set and response is also set even though it doesn't match`, () => {
+        const field = {
+          ...defaultField,
+          type: "text" as const,
+          variantsConfig: {
+            variants: {
+              TestValue1: {
+                fields: [],
+              },
+            },
+          },
+          disableOnPrefill: true,
+        };
+        mockScenario({
+          formState: buildFormStateWithNoErrors(),
+          searchParams: {
+            [field.name]: "TestValue1",
+          },
+          responses: {
+            [field.name]: "TestValue2",
+          },
+        });
+        const shouldBeDisabled = useShouldBeDisabledDueToPrefill(field);
+        expect(shouldBeDisabled).toBe(true);
+      });
+    });
+
+    describe("for array type value", () => {
+      test(`should return 'true' when there is complete match of values b/w the searchParams and the responses prefilled`, () => {
+        const field = {
+          ...defaultField,
+          disableOnPrefill: true,
+        };
+        mockScenario({
+          formState: buildFormStateWithNoErrors(),
+          responses: {
+            [field.name]: ["TestValue1", "TestValue2"],
+          },
+          searchParams: {
+            [field.name]: ["TestValue1", "TestValue2"],
+          },
+        });
+        const shouldBeDisabled = useShouldBeDisabledDueToPrefill(field);
+        expect(shouldBeDisabled).toBe(true);
+      });
+
+      test(`should return 'true' even when searchParams value partially exists in the responses`, () => {
+        const field = {
+          ...defaultField,
+          disableOnPrefill: true,
+        };
+        mockScenario({
+          formState: buildFormStateWithNoErrors(),
+          responses: {
+            [field.name]: ["TestValue1", "TestValue2"],
+          },
+          searchParams: {
+            [field.name]: ["TestValue1"],
+          },
+        });
+        const shouldBeDisabled = useShouldBeDisabledDueToPrefill(field);
+        expect(shouldBeDisabled).toBe(true);
+      });
+
+      test(`should return 'true' even when responses value partially exists in the searchParams`, () => {
+        const field = {
+          ...defaultField,
+          disableOnPrefill: true,
+        };
+        mockScenario({
+          formState: buildFormStateWithNoErrors(),
+          responses: {
+            [field.name]: ["TestValue1"],
+          },
+          searchParams: {
+            [field.name]: ["TestValue1", "TestValue2"],
+          },
+        });
+        const shouldBeDisabled = useShouldBeDisabledDueToPrefill(field);
+        expect(shouldBeDisabled).toBe(true);
+      });
+
+      test(`should return 'false' when there is a mismatch`, () => {
+        const field = {
+          ...defaultField,
+          disableOnPrefill: true,
+        };
+        mockScenario({
+          formState: buildFormStateWithNoErrors(),
+          responses: {
+            [field.name]: ["TestValue3"],
+          },
+          searchParams: {
+            [field.name]: ["TestValue1", "TestValue2"],
+          },
+        });
+        const shouldBeDisabled = useShouldBeDisabledDueToPrefill(field);
+        expect(shouldBeDisabled).toBe(false);
+      });
+    });
+
+    describe("for number type value", () => {
+      test(`should return 'true' when number type value is prefilled`, () => {
+        const field = {
+          ...defaultField,
+          disableOnPrefill: true,
+        };
+        mockScenario({
+          formState: buildFormStateWithNoErrors(),
+          responses: {
+            [field.name]: 123,
+          },
+          searchParams: {
+            [field.name]: 123,
+          },
+        });
+        const shouldBeDisabled = useShouldBeDisabledDueToPrefill(field);
+        expect(shouldBeDisabled).toBe(true);
+      });
+
+      test(`should return 'true' when when the searchParams value is a string and the responses value is a number`, () => {
+        const field = {
+          ...defaultField,
+          disableOnPrefill: true,
+        };
+        mockScenario({
+          formState: buildFormStateWithNoErrors(),
+          responses: {
+            [field.name]: "123",
+          },
+          searchParams: {
+            [field.name]: 123,
+          },
+        });
+        const shouldBeDisabled = useShouldBeDisabledDueToPrefill(field);
+        expect(shouldBeDisabled).toBe(true);
+      });
+
+      test(`should return 'true' when when the searchParams value is a number and the responses value is a string`, () => {
+        const field = {
+          ...defaultField,
+          disableOnPrefill: true,
+        };
+        mockScenario({
+          formState: buildFormStateWithNoErrors(),
+          responses: {
+            [field.name]: 123,
+          },
+          searchParams: {
+            [field.name]: "123",
+          },
+        });
+        const shouldBeDisabled = useShouldBeDisabledDueToPrefill(field);
+        expect(shouldBeDisabled).toBe(true);
+      });
+    });
+
+    test("should return `false` for a field even if there are no errors and it is prefilled but the field is dirty", () => {
+      const field = {
+        ...defaultField,
+        disableOnPrefill: true,
+      };
+      mockScenario({
+        formState: buildFormStateWithNoErrors({
+          dirtyFields: {
+            responses: {
+              [field.name]: true,
+            },
+          },
+        }),
+        responses: {
+          [field.name]: "TestValue",
+        },
+        searchParams: {
+          [field.name]: "TestValue",
+        },
+      });
+      const shouldBeDisabled = useShouldBeDisabledDueToPrefill(field);
+
+      expect(shouldBeDisabled).toBe(false);
+    });
+  });
+
+  describe("When disableOnPrefill is false", () => {
+    test(`should return 'false' for the field`, () => {
+      const field = {
+        ...defaultField,
+        disableOnPrefill: false,
+      };
+
+      mockScenario({
+        formState: buildFormStateWithNoErrors(),
+        responses: {},
+        searchParams: {},
+      });
+
+      const shouldBeDisabled = useShouldBeDisabledDueToPrefill(field);
+      expect(shouldBeDisabled).toBe(false);
+    });
+
+    test(`should return 'false' for the field even when the field is prefilled`, () => {
+      const field = {
+        ...defaultField,
+        disableOnPrefill: false,
+      };
+
+      mockScenario({
+        formState: buildFormStateWithNoErrors(),
+        responses: {
+          [field.name]: "TestValue",
+        },
+        searchParams: {
+          [field.name]: "TestValue",
+        },
+      });
+
+      const shouldBeDisabled = useShouldBeDisabledDueToPrefill(field);
+      expect(shouldBeDisabled).toBe(false);
+    });
+
+    test(`should return 'false' for field having variantsConfig even when the field is prefilled`, () => {
+      const field = {
+        ...defaultField,
+        variantsConfig: {
+          variants: {
+            TestValue1: {
+              fields: [],
+            },
+            TestValue2: {
+              fields: [],
+            },
+          },
+        },
+        disableOnPrefill: false,
+      };
+
+      mockScenario({
+        formState: buildFormStateWithNoErrors(),
+        responses: {
+          [field.name]: "TestValue1",
+        },
+        searchParams: {
+          [field.name]: "TestValue",
+        },
+      });
+
+      const shouldBeDisabled = useShouldBeDisabledDueToPrefill(field);
+      expect(shouldBeDisabled).toBe(false);
+    });
+  });
+});
diff --git a/packages/features/form-builder/useShouldBeDisabledDueToPrefill.tsx b/packages/features/form-builder/useShouldBeDisabledDueToPrefill.tsx
new file mode 100644
index 0000000000..3eb619d4e9
--- /dev/null
+++ b/packages/features/form-builder/useShouldBeDisabledDueToPrefill.tsx
@@ -0,0 +1,118 @@
+import { useFormContext } from "react-hook-form";
+import type { z } from "zod";
+
+import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
+
+import type { fieldsSchema } from "./schema";
+
+type RhfForm = {
+  fields: z.infer<typeof fieldsSchema>;
+};
+
+type RhfFormFields = RhfForm["fields"];
+
+type RhfFormField = RhfFormFields[number];
+
+type FieldProps = Pick<
+  RhfFormField,
+  "name" | "type" | "disableOnPrefill" | "variantsConfig" | "optionsInputs"
+>;
+
+export const getFieldNameFromErrorMessage = (errorMessage: string): string => {
+  const name = errorMessage?.replace(/\{([^}]+)\}.*/, "$1");
+  return name;
+};
+
+function toArray(value: string[] | string): string[] {
+  return Array.isArray(value) ? value : [value];
+}
+
+function intersected(arr1: string[], arr2: string[]): boolean {
+  return !!arr1.find((value) => arr2.find((innerValue) => innerValue?.toString() == value?.toString()));
+}
+
+function isEqual(searchParamValue: string | string[], formValue: string[] | string): boolean {
+  if (typeof formValue === "string") {
+    return searchParamValue?.toString() == formValue?.toString();
+  }
+
+  const formValueToArray = toArray(formValue as string | string[]);
+  const urlValueToArray = toArray(searchParamValue);
+
+  return intersected(formValueToArray, urlValueToArray);
+}
+
+export const useShouldBeDisabledDueToPrefill = (field: FieldProps): boolean => {
+  const { getValues, formState } = useFormContext();
+  const toPrefillValues = useRouterQuery();
+  if (!field.disableOnPrefill) {
+    return false;
+  }
+  // If the field is dirty, it means that some change has been made to the input by user, so we shouldn't disable it anymore
+  // It avoids a scenario like this
+  // 1. Input Prefilled and thus disabled
+  // 2. User submits the form but error is shown for that field(as it was invalid value)
+  // 3. Field is enabled back to correct the value
+  // 3. User tries to correct the value and enters the previous value(partially typed) but input suddenly gets disabled
+  if (formState.dirtyFields?.responses?.[field.name]) {
+    return false;
+  }
+
+  const prefilledValues = getValues()?.responses || {};
+  // radioInput and variantsConfig type fields have complex transformations, so we can't directly compare them with search params
+  // e.g. name = John Doe in search params will be transformed to {firstName: John, lastName: Doe} and we can't directly compare it with toPrefill value
+  const shouldMatchPrefilledValue = field.type !== "radioInput" && !field.variantsConfig;
+  const errorMessage = (formState?.errors?.responses?.message || "") as string;
+  const fieldNameThatHasError = getFieldNameFromErrorMessage(errorMessage);
+  if (fieldNameThatHasError === field.name) {
+    return false;
+  }
+
+  const searchParamValue = toPrefillValues[field.name];
+  const prefilledValue = prefilledValues[field.name];
+
+  if (!shouldMatchPrefilledValue) {
+    // In this case we just ensure they have some values
+    if (isValueSet(searchParamValue) && isValueSet(prefilledValue)) {
+      if (field.type === "radioInput") {
+        return hasValidRadioInputValue({ value: prefilledValue, optionsInputs: field.optionsInputs });
+      }
+      return true;
+    }
+  }
+
+  if (!isValueSet(prefilledValue)) {
+    return false;
+  }
+
+  if (!toPrefillValues) {
+    // If there are no toPrefillValues, nothing can be prefilled and thus nothing should be disabled
+    return false;
+  }
+
+  // If the specified prefill value is filled, then we disable the field. If it is changed due to some reason, then we don't disable the field
+  if (searchParamValue == prefilledValue?.toString()) {
+    return true;
+  }
+
+  return isEqual(searchParamValue, prefilledValue);
+
+  function isValueSet(value: string | string[] | null | undefined): boolean {
+    return value !== null && value !== undefined && value !== "";
+  }
+
+  function hasValidRadioInputValue({
+    value,
+    optionsInputs,
+  }: {
+    value: { optionValue: string; value: string };
+    optionsInputs: Record<string, unknown> | undefined;
+  }): boolean {
+    const requiresOptionInputField = optionsInputs?.[value.value];
+    if (!requiresOptionInputField) {
+      return !!value.value;
+    }
+
+    return !!value.value && !!value.optionValue;
+  }
+};
diff --git a/packages/prisma/schema.prisma b/packages/prisma/schema.prisma
index 3b8fc9de27..3a79e90a18 100644
--- a/packages/prisma/schema.prisma
+++ b/packages/prisma/schema.prisma
@@ -1,4 +1,4 @@
-// This is your Prisma schema file,
+// This is your Prisma Schema file
 // learn more about it in the docs: https://pris.ly/d/prisma-schema
 
 datasource db {
diff --git a/vitest.workspace.ts b/vitest.workspace.ts
index 9226ff0f37..ae6537e1c3 100644
--- a/vitest.workspace.ts
+++ b/vitest.workspace.ts
@@ -108,7 +108,7 @@ const workspaces = packagedEmbedTestsOnly
           name: "@calcom/features",
           include: ["packages/features/**/*.{test,spec}.tsx"],
           environment: "jsdom",
-          setupFiles: ["setupVitest.ts"],
+          setupFiles: ["setupVitest.ts", "packages/ui/components/test-setup.ts"],
         },
       },
 
@@ -129,6 +129,17 @@ const workspaces = packagedEmbedTestsOnly
           setupFiles: ["packages/ui/components/test-setup.ts"],
         },
       },
+      {
+        test: {
+          globals: true,
+          name: "@calcom/routing-forms/widgets",
+          include: [
+            "packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.test.tsx",
+          ],
+          environment: "jsdom",
+          setupFiles: ["packages/ui/components/test-setup.ts"],
+        },
+      },
       {
         test: {
           globals: true,