feat: add Phase 1 testing utilities (TEST_IDS, FIXTURES, setupTestEnvironment)

- Create centralized TEST_IDS constants to eliminate 200+ magic string occurrences
- Create FIXTURES for common test data to reduce 47+ duplicate definitions
- Add setupTestEnvironment() helper to standardize cleanup patterns (36+ occurrences)
- Export utilities from vitestSetup.ts for easy access
- Add comprehensive README with usage examples

This is Phase 1 (Quick Wins) of the testing infrastructure refactor.
Estimated impact: 30-50% reduction in test boilerplate for new tests.

Related analysis documents: TESTING_ANALYSIS_README.md, ANALYSIS_SUMMARY.txt

.cursor/rules/database.mdc

@@ -1,8 +1,13 @@
 ---
 description: >
-globs: schema.prisma
+  This rule provides comprehensive knowledge about the Formbricks database structure, relationships, 
-alwaysApply: false
+  and data patterns. It should be used **only when the agent explicitly requests database schema-level 
+  details** to support tasks such as: writing/debugging Prisma queries, designing/reviewing data models, 
+  investigating multi-tenancy behavior, creating API endpoints, or understanding data relationships.
+globs: []
+alwaysApply: agent-requested
 ---
+
 # Formbricks Database Schema Reference
 
 This rule provides a reference to the Formbricks database structure. For the most up-to-date and complete schema definitions, please refer to the schema.prisma file directly.

.cursor/rules/performance-optimization.mdc

@@ -0,0 +1,5 @@
+---
+description:
+globs:
+alwaysApply: false
+---

.cursor/rules/react-context-providers.mdc

@@ -0,0 +1,5 @@
+---
+description:
+globs:
+alwaysApply: false
+---

.github/workflows/e2e.yml

@@ -17,6 +17,7 @@ on:
   workflow_dispatch:
 
 env:
+  TELEMETRY_DISABLED: 1
   TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
   TURBO_TEAM: ${{ vars.TURBO_TEAM }}
 

apps/web/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/lib/utils.test.ts

@@ -32,22 +32,14 @@ const mockProject: TProject = {
 };
 const mockTemplate: TXMTemplate = {
   name: "$[projectName] Survey",
-  blocks: [
+  questions: [
     {
-      id: "block1",
+      id: "q1",
-      name: "Block 1",
+      inputType: "text",
-      elements: [
+      type: "email" as any,
-        {
+      headline: { default: "$[projectName] Question" },
-          id: "q1",
+      required: false,
-          type: "openText" as const,
+      charLimit: { enabled: true, min: 400, max: 1000 },
-          inputType: "text" as const,
-          headline: { default: "$[projectName] Question" },
-          subheader: { default: "" },
-          required: false,
-          placeholder: { default: "" },
-          charLimit: 1000,
-        },
-      ],
     },
   ],
   endings: [
@@ -74,9 +66,9 @@ describe("replacePresetPlaceholders", () => {
     expect(result.name).toBe("Test Project Survey");
   });
 
-  test("replaces projectName placeholder in element headline", () => {
+  test("replaces projectName placeholder in question headline", () => {
     const result = replacePresetPlaceholders(mockTemplate, mockProject);
-    expect(result.blocks[0].elements[0].headline.default).toBe("Test Project Question");
+    expect(result.questions[0].headline.default).toBe("Test Project Question");
   });
 
   test("returns a new object without mutating the original template", () => {

apps/web/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/lib/utils.ts

@@ -1,16 +1,13 @@
 import { TProject } from "@formbricks/types/project";
-import { TSurveyBlock } from "@formbricks/types/surveys/blocks";
 import { TXMTemplate } from "@formbricks/types/templates";
-import { replaceElementPresetPlaceholders } from "@/lib/utils/templates";
+import { replaceQuestionPresetPlaceholders } from "@/lib/utils/templates";
 
 // replace all occurences of projectName with the actual project name in the current template
-export const replacePresetPlaceholders = (template: TXMTemplate, project: TProject): TXMTemplate => {
+export const replacePresetPlaceholders = (template: TXMTemplate, project: TProject) => {
   const survey = structuredClone(template);
-
+  survey.name = survey.name.replace("$[projectName]", project.name);
-  const modifiedBlocks = survey.blocks.map((block: TSurveyBlock) => ({
+  survey.questions = survey.questions.map((question) => {
-    ...block,
+    return replaceQuestionPresetPlaceholders(question, project);
-    elements: block.elements.map((element) => replaceElementPresetPlaceholders(element, project)),
+  });
-  }));
+  return { ...template, ...survey };
-
-  return { ...survey, name: survey.name.replace("$[projectName]", project.name), blocks: modifiedBlocks };
 };

apps/web/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/lib/xm-templates.test.ts

@@ -20,7 +20,7 @@ describe("xm-templates", () => {
     expect(result).toEqual({
       name: "",
       endings: expect.any(Array),
-      blocks: [],
+      questions: [],
       styling: {
         overwriteThemeStyling: true,
       },

apps/web/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/lib/xm-templates.ts

@@ -3,21 +3,19 @@ import { TFunction } from "i18next";
 import { logger } from "@formbricks/logger";
 import { TXMTemplate } from "@formbricks/types/templates";
 import {
-  buildBlock,
+  buildCTAQuestion,
-  buildCTAElement,
+  buildNPSQuestion,
-  buildNPSElement,
+  buildOpenTextQuestion,
-  buildOpenTextElement,
+  buildRatingQuestion,
-  buildRatingElement,
+  getDefaultEndingCard,
-  createBlockJumpLogic,
+} from "@/app/lib/survey-builder";
-} from "@/app/lib/survey-block-builder";
-import { getDefaultEndingCard } from "@/app/lib/survey-builder";
 
 export const getXMSurveyDefault = (t: TFunction): TXMTemplate => {
   try {
     return {
       name: "",
       endings: [getDefaultEndingCard([], t)],
-      blocks: [],
+      questions: [],
       styling: {
         overwriteThemeStyling: true,
       },
@@ -32,40 +30,25 @@ const npsSurvey = (t: TFunction): TXMTemplate => {
   return {
     ...getXMSurveyDefault(t),
     name: t("templates.nps_survey_name"),
-    blocks: [
+    questions: [
-      buildBlock({
+      buildNPSQuestion({
-        name: "Block 1",
+        headline: t("templates.nps_survey_question_1_headline"),
-        elements: [
+        required: true,
-          buildNPSElement({
+        lowerLabel: t("templates.nps_survey_question_1_lower_label"),
-            headline: t("templates.nps_survey_question_1_headline"),
+        upperLabel: t("templates.nps_survey_question_1_upper_label"),
-            required: true,
+        isColorCodingEnabled: true,
-            lowerLabel: t("templates.nps_survey_question_1_lower_label"),
-            upperLabel: t("templates.nps_survey_question_1_upper_label"),
-            isColorCodingEnabled: true,
-          }),
-        ],
         t,
       }),
-      buildBlock({
+      buildOpenTextQuestion({
-        name: "Block 2",
+        headline: t("templates.nps_survey_question_2_headline"),
-        elements: [
+        required: false,
-          buildOpenTextElement({
+        inputType: "text",
-            headline: t("templates.nps_survey_question_2_headline"),
-            required: false,
-            inputType: "text",
-          }),
-        ],
         t,
       }),
-      buildBlock({
+      buildOpenTextQuestion({
-        name: "Block 3",
+        headline: t("templates.nps_survey_question_3_headline"),
-        elements: [
+        required: false,
-          buildOpenTextElement({
+        inputType: "text",
-            headline: t("templates.nps_survey_question_3_headline"),
-            required: false,
-            inputType: "text",
-          }),
-        ],
         t,
       }),
     ],
@@ -73,27 +56,15 @@ const npsSurvey = (t: TFunction): TXMTemplate => {
 };
 
 const starRatingSurvey = (t: TFunction): TXMTemplate => {
-  const reusableElementIds = [createId(), createId(), createId()];
+  const reusableQuestionIds = [createId(), createId(), createId()];
-  const block3Id = createId(); // Pre-generate Block 3 ID for logic reference
   const defaultSurvey = getXMSurveyDefault(t);
 
   return {
     ...defaultSurvey,
     name: t("templates.star_rating_survey_name"),
-    blocks: [
+    questions: [
-      buildBlock({
+      buildRatingQuestion({
-        name: "Block 1",
+        id: reusableQuestionIds[0],
-        elements: [
-          buildRatingElement({
-            id: reusableElementIds[0],
-            range: 5,
-            scale: "number",
-            headline: t("templates.star_rating_survey_question_1_headline"),
-            required: true,
-            lowerLabel: t("templates.star_rating_survey_question_1_lower_label"),
-            upperLabel: t("templates.star_rating_survey_question_1_upper_label"),
-          }),
-        ],
         logic: [
           {
             id: createId(),
@@ -104,8 +75,8 @@ const starRatingSurvey = (t: TFunction): TXMTemplate => {
                 {
                   id: createId(),
                   leftOperand: {
-                    value: reusableElementIds[0],
+                    value: reusableQuestionIds[0],
-                    type: "element",
+                    type: "question",
                   },
                   operator: "isLessThanOrEqual",
                   rightOperand: {
@@ -118,44 +89,64 @@ const starRatingSurvey = (t: TFunction): TXMTemplate => {
             actions: [
               {
                 id: createId(),
-                objective: "jumpToBlock",
+                objective: "jumpToQuestion",
-                target: block3Id,
+                target: reusableQuestionIds[2],
               },
             ],
           },
         ],
+        range: 5,
+        scale: "number",
+        headline: t("templates.star_rating_survey_question_1_headline"),
+        required: true,
+        lowerLabel: t("templates.star_rating_survey_question_1_lower_label"),
+        upperLabel: t("templates.star_rating_survey_question_1_upper_label"),
         t,
       }),
-      buildBlock({
+      buildCTAQuestion({
-        name: "Block 2",
+        id: reusableQuestionIds[1],
-        elements: [
+        subheader: t("templates.star_rating_survey_question_2_html"),
-          buildCTAElement({
+        logic: [
-            id: reusableElementIds[1],
+          {
-            subheader: t("templates.star_rating_survey_question_2_html"),
+            id: createId(),
-            headline: t("templates.star_rating_survey_question_2_headline"),
+            conditions: {
-            required: false,
+              id: createId(),
-            buttonUrl: "https://formbricks.com/github",
+              connector: "and",
-            buttonExternal: true,
+              conditions: [
-            ctaButtonLabel: t("templates.star_rating_survey_question_2_button_label"),
+                {
-          }),
+                  id: createId(),
+                  leftOperand: {
+                    value: reusableQuestionIds[1],
+                    type: "question",
+                  },
+                  operator: "isClicked",
+                },
+              ],
+            },
+            actions: [
+              {
+                id: createId(),
+                objective: "jumpToQuestion",
+                target: defaultSurvey.endings[0].id,
+              },
+            ],
+          },
         ],
-        logic: [createBlockJumpLogic(reusableElementIds[1], defaultSurvey.endings[0].id, "isClicked")],
+        headline: t("templates.star_rating_survey_question_2_headline"),
+        required: true,
+        buttonUrl: "https://formbricks.com/github",
+        buttonLabel: t("templates.star_rating_survey_question_2_button_label"),
+        buttonExternal: true,
         t,
       }),
-      buildBlock({
+      buildOpenTextQuestion({
-        id: block3Id,
+        id: reusableQuestionIds[2],
-        name: "Block 3",
+        headline: t("templates.star_rating_survey_question_3_headline"),
-        elements: [
+        required: true,
-          buildOpenTextElement({
+        subheader: t("templates.star_rating_survey_question_3_subheader"),
-            id: reusableElementIds[2],
-            headline: t("templates.star_rating_survey_question_3_headline"),
-            required: true,
-            subheader: t("templates.star_rating_survey_question_3_subheader"),
-            placeholder: t("templates.star_rating_survey_question_3_placeholder"),
-            inputType: "text",
-          }),
-        ],
         buttonLabel: t("templates.star_rating_survey_question_3_button_label"),
+        placeholder: t("templates.star_rating_survey_question_3_placeholder"),
+        inputType: "text",
         t,
       }),
     ],
@@ -163,27 +154,15 @@ const starRatingSurvey = (t: TFunction): TXMTemplate => {
 };
 
 const csatSurvey = (t: TFunction): TXMTemplate => {
-  const reusableElementIds = [createId(), createId(), createId()];
+  const reusableQuestionIds = [createId(), createId(), createId()];
-  const block3Id = createId(); // Pre-generate Block 3 ID for logic reference
   const defaultSurvey = getXMSurveyDefault(t);
 
   return {
     ...defaultSurvey,
     name: t("templates.csat_survey_name"),
-    blocks: [
+    questions: [
-      buildBlock({
+      buildRatingQuestion({
-        name: "Block 1",
+        id: reusableQuestionIds[0],
-        elements: [
-          buildRatingElement({
-            id: reusableElementIds[0],
-            range: 5,
-            scale: "smiley",
-            headline: t("templates.csat_survey_question_1_headline"),
-            required: true,
-            lowerLabel: t("templates.csat_survey_question_1_lower_label"),
-            upperLabel: t("templates.csat_survey_question_1_upper_label"),
-          }),
-        ],
         logic: [
           {
             id: createId(),
@@ -194,8 +173,8 @@ const csatSurvey = (t: TFunction): TXMTemplate => {
                 {
                   id: createId(),
                   leftOperand: {
-                    value: reusableElementIds[0],
+                    value: reusableQuestionIds[0],
-                    type: "element",
+                    type: "question",
                   },
                   operator: "isLessThanOrEqual",
                   rightOperand: {
@@ -208,40 +187,60 @@ const csatSurvey = (t: TFunction): TXMTemplate => {
             actions: [
               {
                 id: createId(),
-                objective: "jumpToBlock",
+                objective: "jumpToQuestion",
-                target: block3Id,
+                target: reusableQuestionIds[2],
               },
             ],
           },
         ],
+        range: 5,
+        scale: "smiley",
+        headline: t("templates.csat_survey_question_1_headline"),
+        required: true,
+        lowerLabel: t("templates.csat_survey_question_1_lower_label"),
+        upperLabel: t("templates.csat_survey_question_1_upper_label"),
         t,
       }),
-      buildBlock({
+      buildOpenTextQuestion({
-        name: "Block 2",
+        id: reusableQuestionIds[1],
-        elements: [
+        logic: [
-          buildOpenTextElement({
+          {
-            id: reusableElementIds[1],
+            id: createId(),
-            headline: t("templates.csat_survey_question_2_headline"),
+            conditions: {
-            required: false,
+              id: createId(),
-            placeholder: t("templates.csat_survey_question_2_placeholder"),
+              connector: "and",
-            inputType: "text",
+              conditions: [
-          }),
+                {
+                  id: createId(),
+                  leftOperand: {
+                    value: reusableQuestionIds[1],
+                    type: "question",
+                  },
+                  operator: "isSubmitted",
+                },
+              ],
+            },
+            actions: [
+              {
+                id: createId(),
+                objective: "jumpToQuestion",
+                target: defaultSurvey.endings[0].id,
+              },
+            ],
+          },
         ],
-        logic: [createBlockJumpLogic(reusableElementIds[1], defaultSurvey.endings[0].id, "isSubmitted")],
+        headline: t("templates.csat_survey_question_2_headline"),
+        required: false,
+        placeholder: t("templates.csat_survey_question_2_placeholder"),
+        inputType: "text",
         t,
       }),
-      buildBlock({
+      buildOpenTextQuestion({
-        id: block3Id,
+        id: reusableQuestionIds[2],
-        name: "Block 3",
+        headline: t("templates.csat_survey_question_3_headline"),
-        elements: [
+        required: false,
-          buildOpenTextElement({
+        placeholder: t("templates.csat_survey_question_3_placeholder"),
-            id: reusableElementIds[2],
+        inputType: "text",
-            headline: t("templates.csat_survey_question_3_headline"),
-            required: false,
-            placeholder: t("templates.csat_survey_question_3_placeholder"),
-            inputType: "text",
-          }),
-        ],
         t,
       }),
     ],
@@ -252,31 +251,21 @@ const cessSurvey = (t: TFunction): TXMTemplate => {
   return {
     ...getXMSurveyDefault(t),
     name: t("templates.cess_survey_name"),
-    blocks: [
+    questions: [
-      buildBlock({
+      buildRatingQuestion({
-        name: "Block 1",
+        range: 5,
-        elements: [
+        scale: "number",
-          buildRatingElement({
+        headline: t("templates.cess_survey_question_1_headline"),
-            range: 5,
+        required: true,
-            scale: "number",
+        lowerLabel: t("templates.cess_survey_question_1_lower_label"),
-            headline: t("templates.cess_survey_question_1_headline"),
+        upperLabel: t("templates.cess_survey_question_1_upper_label"),
-            required: true,
-            lowerLabel: t("templates.cess_survey_question_1_lower_label"),
-            upperLabel: t("templates.cess_survey_question_1_upper_label"),
-          }),
-        ],
         t,
       }),
-      buildBlock({
+      buildOpenTextQuestion({
-        name: "Block 2",
+        headline: t("templates.cess_survey_question_2_headline"),
-        elements: [
+        required: true,
-          buildOpenTextElement({
+        placeholder: t("templates.cess_survey_question_2_placeholder"),
-            headline: t("templates.cess_survey_question_2_headline"),
+        inputType: "text",
-            required: true,
-            placeholder: t("templates.cess_survey_question_2_placeholder"),
-            inputType: "text",
-          }),
-        ],
         t,
       }),
     ],
@@ -284,27 +273,15 @@ const cessSurvey = (t: TFunction): TXMTemplate => {
 };
 
 const smileysRatingSurvey = (t: TFunction): TXMTemplate => {
-  const reusableElementIds = [createId(), createId(), createId()];
+  const reusableQuestionIds = [createId(), createId(), createId()];
-  const block3Id = createId(); // Pre-generate Block 3 ID for logic reference
   const defaultSurvey = getXMSurveyDefault(t);
 
   return {
     ...defaultSurvey,
     name: t("templates.smileys_survey_name"),
-    blocks: [
+    questions: [
-      buildBlock({
+      buildRatingQuestion({
-        name: "Block 1",
+        id: reusableQuestionIds[0],
-        elements: [
-          buildRatingElement({
-            id: reusableElementIds[0],
-            range: 5,
-            scale: "smiley",
-            headline: t("templates.smileys_survey_question_1_headline"),
-            required: true,
-            lowerLabel: t("templates.smileys_survey_question_1_lower_label"),
-            upperLabel: t("templates.smileys_survey_question_1_upper_label"),
-          }),
-        ],
         logic: [
           {
             id: createId(),
@@ -315,8 +292,8 @@ const smileysRatingSurvey = (t: TFunction): TXMTemplate => {
                 {
                   id: createId(),
                   leftOperand: {
-                    value: reusableElementIds[0],
+                    value: reusableQuestionIds[0],
-                    type: "element",
+                    type: "question",
                   },
                   operator: "isLessThanOrEqual",
                   rightOperand: {
@@ -329,44 +306,64 @@ const smileysRatingSurvey = (t: TFunction): TXMTemplate => {
             actions: [
               {
                 id: createId(),
-                objective: "jumpToBlock",
+                objective: "jumpToQuestion",
-                target: block3Id,
+                target: reusableQuestionIds[2],
               },
             ],
           },
         ],
+        range: 5,
+        scale: "smiley",
+        headline: t("templates.smileys_survey_question_1_headline"),
+        required: true,
+        lowerLabel: t("templates.smileys_survey_question_1_lower_label"),
+        upperLabel: t("templates.smileys_survey_question_1_upper_label"),
         t,
       }),
-      buildBlock({
+      buildCTAQuestion({
-        name: "Block 2",
+        id: reusableQuestionIds[1],
-        elements: [
+        subheader: t("templates.smileys_survey_question_2_html"),
-          buildCTAElement({
+        logic: [
-            id: reusableElementIds[1],
+          {
-            subheader: t("templates.smileys_survey_question_2_html"),
+            id: createId(),
-            headline: t("templates.smileys_survey_question_2_headline"),
+            conditions: {
-            required: false,
+              id: createId(),
-            buttonUrl: "https://formbricks.com/github",
+              connector: "and",
-            buttonExternal: true,
+              conditions: [
-            ctaButtonLabel: t("templates.smileys_survey_question_2_button_label"),
+                {
-          }),
+                  id: createId(),
+                  leftOperand: {
+                    value: reusableQuestionIds[1],
+                    type: "question",
+                  },
+                  operator: "isClicked",
+                },
+              ],
+            },
+            actions: [
+              {
+                id: createId(),
+                objective: "jumpToQuestion",
+                target: defaultSurvey.endings[0].id,
+              },
+            ],
+          },
         ],
-        logic: [createBlockJumpLogic(reusableElementIds[1], defaultSurvey.endings[0].id, "isClicked")],
+        headline: t("templates.smileys_survey_question_2_headline"),
+        required: true,
+        buttonUrl: "https://formbricks.com/github",
+        buttonLabel: t("templates.smileys_survey_question_2_button_label"),
+        buttonExternal: true,
         t,
       }),
-      buildBlock({
+      buildOpenTextQuestion({
-        id: block3Id,
+        id: reusableQuestionIds[2],
-        name: "Block 3",
+        headline: t("templates.smileys_survey_question_3_headline"),
-        elements: [
+        required: true,
-          buildOpenTextElement({
+        subheader: t("templates.smileys_survey_question_3_subheader"),
-            id: reusableElementIds[2],
-            headline: t("templates.smileys_survey_question_3_headline"),
-            required: true,
-            subheader: t("templates.smileys_survey_question_3_subheader"),
-            placeholder: t("templates.smileys_survey_question_3_placeholder"),
-            inputType: "text",
-          }),
-        ],
         buttonLabel: t("templates.smileys_survey_question_3_button_label"),
+        placeholder: t("templates.smileys_survey_question_3_placeholder"),
+        inputType: "text",
         t,
       }),
     ],
@@ -377,40 +374,25 @@ const enpsSurvey = (t: TFunction): TXMTemplate => {
   return {
     ...getXMSurveyDefault(t),
     name: t("templates.enps_survey_name"),
-    blocks: [
+    questions: [
-      buildBlock({
+      buildNPSQuestion({
-        name: "Block 1",
+        headline: t("templates.enps_survey_question_1_headline"),
-        elements: [
+        required: false,
-          buildNPSElement({
+        lowerLabel: t("templates.enps_survey_question_1_lower_label"),
-            headline: t("templates.enps_survey_question_1_headline"),
+        upperLabel: t("templates.enps_survey_question_1_upper_label"),
-            required: false,
+        isColorCodingEnabled: true,
-            lowerLabel: t("templates.enps_survey_question_1_lower_label"),
-            upperLabel: t("templates.enps_survey_question_1_upper_label"),
-            isColorCodingEnabled: true,
-          }),
-        ],
         t,
       }),
-      buildBlock({
+      buildOpenTextQuestion({
-        name: "Block 2",
+        headline: t("templates.enps_survey_question_2_headline"),
-        elements: [
+        required: false,
-          buildOpenTextElement({
+        inputType: "text",
-            headline: t("templates.enps_survey_question_2_headline"),
-            required: false,
-            inputType: "text",
-          }),
-        ],
         t,
       }),
-      buildBlock({
+      buildOpenTextQuestion({
-        name: "Block 3",
+        headline: t("templates.enps_survey_question_3_headline"),
-        elements: [
+        required: false,
-          buildOpenTextElement({
+        inputType: "text",
-            headline: t("templates.enps_survey_question_3_headline"),
-            required: false,
-            inputType: "text",
-          }),
-        ],
         t,
       }),
     ],

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/layout.tsx

@@ -1,6 +1,8 @@
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
 import { AuthorizationError } from "@formbricks/types/errors";
+import { PosthogIdentify } from "@/app/(app)/environments/[environmentId]/components/PosthogIdentify";
+import { IS_POSTHOG_CONFIGURED } from "@/lib/constants";
 import { canUserAccessOrganization } from "@/lib/organization/auth";
 import { getOrganization } from "@/lib/organization/service";
 import { getUser } from "@/lib/user/service";
@@ -38,6 +40,14 @@ const ProjectOnboardingLayout = async (props) => {
 
   return (
     <div className="flex-1 bg-slate-50">
+      <PosthogIdentify
+        session={session}
+        user={user}
+        organizationId={organization.id}
+        organizationName={organization.name}
+        organizationBilling={organization.billing}
+        isPosthogEnabled={IS_POSTHOG_CONFIGURED}
+      />
       <ToasterClient />
       {children}
     </div>

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/layout.tsx

@@ -1,13 +1,14 @@
 import { redirect } from "next/navigation";
 import { getEnvironment } from "@/lib/environment/service";
 import { environmentIdLayoutChecks } from "@/modules/environments/lib/utils";
+import { EnvironmentIdBaseLayout } from "@/modules/ui/components/environmentId-base-layout";
 
 const SurveyEditorEnvironmentLayout = async (props) => {
   const params = await props.params;
 
   const { children } = props;
 
-  const { t, session, user } = await environmentIdLayoutChecks(params.environmentId);
+  const { t, session, user, organization } = await environmentIdLayoutChecks(params.environmentId);
 
   if (!session) {
     return redirect(`/auth/login`);
@@ -24,9 +25,15 @@ const SurveyEditorEnvironmentLayout = async (props) => {
   }
 
   return (
-    <div className="flex h-screen flex-col">
+    <EnvironmentIdBaseLayout
-      <div className="h-full overflow-y-auto bg-slate-50">{children}</div>
+      environmentId={params.environmentId}
-    </div>
+      session={session}
+      user={user}
+      organization={organization}>
+      <div className="flex h-screen flex-col">
+        <div className="h-full overflow-y-auto bg-slate-50">{children}</div>
+      </div>
+    </EnvironmentIdBaseLayout>
   );
 };
 

apps/web/app/(app)/environments/[environmentId]/components/PosthogIdentify.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import type { Session } from "next-auth";
+import { usePostHog } from "posthog-js/react";
+import { useEffect } from "react";
+import { TOrganizationBilling } from "@formbricks/types/organizations";
+import { TUser } from "@formbricks/types/user";
+
+interface PosthogIdentifyProps {
+  session: Session;
+  user: TUser;
+  environmentId?: string;
+  organizationId?: string;
+  organizationName?: string;
+  organizationBilling?: TOrganizationBilling;
+  isPosthogEnabled: boolean;
+}
+
+export const PosthogIdentify = ({
+  session,
+  user,
+  environmentId,
+  organizationId,
+  organizationName,
+  organizationBilling,
+  isPosthogEnabled,
+}: PosthogIdentifyProps) => {
+  const posthog = usePostHog();
+
+  useEffect(() => {
+    if (isPosthogEnabled && session.user && posthog) {
+      posthog.identify(session.user.id, {
+        name: user.name,
+        email: user.email,
+      });
+      if (environmentId) {
+        posthog.group("environment", environmentId, { name: environmentId });
+      }
+      if (organizationId) {
+        posthog.group("organization", organizationId, {
+          name: organizationName,
+          plan: organizationBilling?.plan,
+          responseLimit: organizationBilling?.limits.monthly.responses,
+          miuLimit: organizationBilling?.limits.monthly.miu,
+        });
+      }
+    }
+  }, [
+    posthog,
+    session.user,
+    environmentId,
+    organizationId,
+    organizationName,
+    organizationBilling,
+    user.name,
+    user.email,
+    isPosthogEnabled,
+  ]);
+
+  return null;
+};

apps/web/app/(app)/environments/[environmentId]/components/ResponseFilterContext.tsx

@@ -2,14 +2,14 @@
 
 import React, { createContext, useCallback, useContext, useState } from "react";
 import {
-  ElementOption,
+  QuestionOption,
-  ElementOptions,
+  QuestionOptions,
-} from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ElementsComboBox";
+} from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionsComboBox";
-import { ElementFilterOptions } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ResponseFilter";
+import { QuestionFilterOptions } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ResponseFilter";
 import { getTodayDate } from "@/app/lib/surveys/surveys";
 
 export interface FilterValue {
-  elementType: Partial<ElementOption>;
+  questionType: Partial<QuestionOption>;
   filterType: {
     filterValue: string | undefined;
     filterComboBoxValue: string | string[] | undefined;
@@ -24,8 +24,8 @@ export interface SelectedFilterValue {
 }
 
 interface SelectedFilterOptions {
-  elementOptions: ElementOptions[];
+  questionOptions: QuestionOptions[];
-  elementFilterOptions: ElementFilterOptions[];
+  questionFilterOptions: QuestionFilterOptions[];
 }
 
 export interface DateRange {
@@ -53,8 +53,8 @@ const ResponseFilterProvider = ({ children }: { children: React.ReactNode }) =>
   });
   // state holds all the options of the responses fetched
   const [selectedOptions, setSelectedOptions] = useState<SelectedFilterOptions>({
-    elementFilterOptions: [],
+    questionFilterOptions: [],
-    elementOptions: [],
+    questionOptions: [],
   });
 
   const [dateRange, setDateRange] = useState<DateRange>({

apps/web/app/(app)/environments/[environmentId]/layout.tsx

@@ -4,6 +4,7 @@ import { EnvironmentLayout } from "@/app/(app)/environments/[environmentId]/comp
 import { EnvironmentContextWrapper } from "@/app/(app)/environments/[environmentId]/context/environment-context";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { getEnvironmentLayoutData } from "@/modules/environments/lib/utils";
+import { EnvironmentIdBaseLayout } from "@/modules/ui/components/environmentId-base-layout";
 import EnvironmentStorageHandler from "./components/EnvironmentStorageHandler";
 
 const EnvLayout = async (props: {
@@ -23,7 +24,11 @@ const EnvLayout = async (props: {
   const layoutData = await getEnvironmentLayoutData(params.environmentId, session.user.id);
 
   return (
-    <>
+    <EnvironmentIdBaseLayout
+      environmentId={params.environmentId}
+      session={layoutData.session}
+      user={layoutData.user}
+      organization={layoutData.organization}>
       <EnvironmentStorageHandler environmentId={params.environmentId} />
       <EnvironmentContextWrapper
         environment={layoutData.environment}
@@ -31,7 +36,7 @@ const EnvLayout = async (props: {
         organization={layoutData.organization}>
         <EnvironmentLayout layoutData={layoutData}>{children}</EnvironmentLayout>
       </EnvironmentContextWrapper>
-    </>
+    </EnvironmentIdBaseLayout>
   );
 };
 

apps/web/app/(app)/environments/[environmentId]/project/integrations/airtable/components/AddIntegrationModal.tsx

@@ -3,7 +3,7 @@
 import { TFunction } from "i18next";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import { Control, Controller, useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
@@ -14,15 +14,14 @@ import {
   TIntegrationAirtableInput,
   TIntegrationAirtableTables,
 } from "@formbricks/types/integration/airtable";
-import { TSurveyElement } from "@formbricks/types/surveys/elements";
 import { TSurvey } from "@formbricks/types/surveys/types";
 import { getTextContent } from "@formbricks/types/surveys/validation";
 import { createOrUpdateIntegrationAction } from "@/app/(app)/environments/[environmentId]/project/integrations/actions";
 import { BaseSelectDropdown } from "@/app/(app)/environments/[environmentId]/project/integrations/airtable/components/BaseSelectDropdown";
 import { fetchTables } from "@/app/(app)/environments/[environmentId]/project/integrations/airtable/lib/airtable";
 import AirtableLogo from "@/images/airtableLogo.svg";
-import { recallToHeadline } from "@/lib/utils/recall";
+import { getLocalizedValue } from "@/lib/i18n/utils";
-import { getElementsFromBlocks } from "@/modules/survey/lib/client-utils";
+import { replaceHeadlineRecall } from "@/lib/utils/recall";
 import { AdditionalIntegrationSettings } from "@/modules/ui/components/additional-integration-settings";
 import { Alert, AlertDescription, AlertTitle } from "@/modules/ui/components/alert";
 import { Button } from "@/modules/ui/components/button";
@@ -46,45 +45,6 @@ import {
 } from "@/modules/ui/components/select";
 import { IntegrationModalInputs } from "../lib/types";
 
-const ElementCheckbox = ({
-  element,
-  selectedSurvey,
-  field,
-}: {
-  element: TSurveyElement;
-  selectedSurvey: TSurvey;
-  field: {
-    value: string[] | undefined;
-    onChange: (value: string[]) => void;
-  };
-}) => {
-  const handleCheckedChange = (checked: boolean) => {
-    if (checked) {
-      field.onChange([...(field.value || []), element.id]);
-    } else {
-      field.onChange(field.value?.filter((value) => value !== element.id) || []);
-    }
-  };
-
-  return (
-    <div className="my-1 flex items-center space-x-2">
-      <label htmlFor={element.id} className="flex cursor-pointer items-center">
-        <Checkbox
-          type="button"
-          id={element.id}
-          value={element.id}
-          className="bg-white"
-          checked={field.value?.includes(element.id)}
-          onCheckedChange={handleCheckedChange}
-        />
-        <span className="ml-2">
-          {getTextContent(recallToHeadline(element.headline, selectedSurvey, false, "default")["default"])}
-        </span>
-      </label>
-    </div>
-  );
-};
-
 type EditModeProps =
   | { isEditMode: false; defaultData?: never }
   | { isEditMode: true; defaultData: IntegrationModalInputs & { index: number } };
@@ -108,10 +68,9 @@ const NoBaseFoundError = () => {
   );
 };
 
-const renderElementSelection = ({
+const renderQuestionSelection = ({
   t,
   selectedSurvey,
-  elements,
   control,
   includeVariables,
   setIncludeVariables,
@@ -124,7 +83,6 @@ const renderElementSelection = ({
 }: {
   t: TFunction;
   selectedSurvey: TSurvey;
-  elements: TSurveyElement[];
   control: Control<IntegrationModalInputs>;
   includeVariables: boolean;
   setIncludeVariables: (value: boolean) => void;
@@ -141,13 +99,31 @@ const renderElementSelection = ({
         <Label htmlFor="Surveys">{t("common.questions")}</Label>
         <div className="mt-1 max-h-[15vh] overflow-y-auto rounded-lg border border-slate-200">
           <div className="grid content-center rounded-lg bg-slate-50 p-3 text-left text-sm text-slate-900">
-            {elements.map((element) => (
+            {replaceHeadlineRecall(selectedSurvey, "default")?.questions.map((question) => (
               <Controller
-                key={element.id}
+                key={question.id}
                 control={control}
-                name={"elements"}
+                name={"questions"}
                 render={({ field }) => (
-                  <ElementCheckbox element={element} selectedSurvey={selectedSurvey} field={field} />
+                  <div className="my-1 flex items-center space-x-2">
+                    <label htmlFor={question.id} className="flex cursor-pointer items-center">
+                      <Checkbox
+                        type="button"
+                        id={question.id}
+                        value={question.id}
+                        className="bg-white"
+                        checked={field.value?.includes(question.id)}
+                        onCheckedChange={(checked) => {
+                          return checked
+                            ? field.onChange([...field.value, question.id])
+                            : field.onChange(field.value?.filter((value) => value !== question.id));
+                        }}
+                      />
+                      <span className="ml-2">
+                        {getTextContent(getLocalizedValue(question.headline, "default"))}
+                      </span>
+                    </label>
+                  </div>
                 )}
               />
             ))}
@@ -218,11 +194,6 @@ export const AddIntegrationModal = ({
   };
 
   const selectedSurvey = surveys.find((item) => item.id === survey);
-  const elements = useMemo(
-    () => (selectedSurvey ? getElementsFromBlocks(selectedSurvey.blocks) : []),
-    [selectedSurvey]
-  );
-
   const submitHandler = async (data: IntegrationModalInputs) => {
     try {
       if (!data.base || data.base === "") {
@@ -237,7 +208,7 @@ export const AddIntegrationModal = ({
         throw new Error(t("environments.integrations.please_select_a_survey_error"));
       }
 
-      if (data.elements.length === 0) {
+      if (data.questions.length === 0) {
         throw new Error(t("environments.integrations.select_at_least_one_question_error"));
       }
 
@@ -245,9 +216,9 @@ export const AddIntegrationModal = ({
       const integrationData: TIntegrationAirtableConfigData = {
         surveyId: selectedSurvey.id,
         surveyName: selectedSurvey.name,
-        elementIds: data.elements,
+        questionIds: data.questions,
-        elements:
+        questions:
-          data.elements.length === elements.length
+          data.questions.length === selectedSurvey.questions.length
             ? t("common.all_questions")
             : t("common.selected_questions"),
         createdAt: new Date(),
@@ -395,7 +366,7 @@ export const AddIntegrationModal = ({
                           required
                           onValueChange={(val) => {
                             field.onChange(val);
-                            setValue("elements", []);
+                            setValue("questions", []);
                           }}
                           defaultValue={defaultData?.survey}>
                           <SelectTrigger>
@@ -421,10 +392,9 @@ export const AddIntegrationModal = ({
 
               {survey &&
                 selectedSurvey &&
-                renderElementSelection({
+                renderQuestionSelection({
                   t,
                   selectedSurvey,
-                  elements: elements,
                   control,
                   includeVariables,
                   setIncludeVariables,

apps/web/app/(app)/environments/[environmentId]/project/integrations/airtable/components/ManageIntegration.tsx

@@ -108,7 +108,7 @@ export const ManageIntegration = (props: ManageIntegrationProps) => {
               onClick={() => {
                 setDefaultValues({
                   base: data.baseId,
-                  elements: data.elementIds,
+                  questions: data.questionIds,
                   survey: data.surveyId,
                   table: data.tableId,
                   includeVariables: !!data.includeVariables,
@@ -121,7 +121,7 @@ export const ManageIntegration = (props: ManageIntegrationProps) => {
               }}>
               <div className="col-span-2 text-center">{data.surveyName}</div>
               <div className="col-span-2 text-center">{data.tableName}</div>
-              <div className="col-span-2 text-center">{data.elements}</div>
+              <div className="col-span-2 text-center">{data.questions}</div>
               <div className="col-span-2 text-center">
                 {timeSince(data.createdAt.toString(), props.locale)}
               </div>

apps/web/app/(app)/environments/[environmentId]/project/integrations/airtable/lib/types.ts

@@ -2,7 +2,7 @@ export type IntegrationModalInputs = {
   base: string;
   table: string;
   survey: string;
-  elements: string[];
+  questions: string[];
   includeVariables: boolean;
   includeHiddenFields: boolean;
   includeMetadata: boolean;

apps/web/app/(app)/environments/[environmentId]/project/integrations/google-sheets/components/AddIntegrationModal.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Image from "next/image";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
@@ -20,9 +20,9 @@ import {
   isValidGoogleSheetsUrl,
 } from "@/app/(app)/environments/[environmentId]/project/integrations/google-sheets/lib/util";
 import GoogleSheetLogo from "@/images/googleSheetsLogo.png";
+import { getLocalizedValue } from "@/lib/i18n/utils";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
-import { recallToHeadline } from "@/lib/utils/recall";
+import { replaceHeadlineRecall } from "@/lib/utils/recall";
-import { getElementsFromBlocks } from "@/modules/survey/lib/client-utils";
 import { AdditionalIntegrationSettings } from "@/modules/ui/components/additional-integration-settings";
 import { Button } from "@/modules/ui/components/button";
 import { Checkbox } from "@/modules/ui/components/checkbox";
@@ -62,12 +62,12 @@ export const AddIntegrationModal = ({
     spreadsheetName: "",
     surveyId: "",
     surveyName: "",
-    elementIds: [""],
+    questionIds: [""],
-    elements: "",
+    questions: "",
     createdAt: new Date(),
   };
   const { handleSubmit } = useForm();
-  const [selectedElements, setSelectedElements] = useState<string[]>([]);
+  const [selectedQuestions, setSelectedQuestions] = useState<string[]>([]);
   const [isLinkingSheet, setIsLinkingSheet] = useState(false);
   const [selectedSurvey, setSelectedSurvey] = useState<TSurvey | null>(null);
   const [spreadsheetUrl, setSpreadsheetUrl] = useState("");
@@ -86,17 +86,12 @@ export const AddIntegrationModal = ({
     },
   };
 
-  const surveyElements = useMemo(
-    () => (selectedSurvey ? getElementsFromBlocks(selectedSurvey.blocks) : []),
-    [selectedSurvey]
-  );
-
   useEffect(() => {
     if (selectedSurvey && !selectedIntegration) {
-      const elementIds = surveyElements.map((element) => element.id);
+      const questionIds = selectedSurvey.questions.map((question) => question.id);
-      setSelectedElements(elementIds);
+      setSelectedQuestions(questionIds);
     }
-  }, [surveyElements, selectedIntegration, selectedSurvey]);
+  }, [selectedIntegration, selectedSurvey]);
 
   useEffect(() => {
     if (selectedIntegration) {
@@ -106,7 +101,7 @@ export const AddIntegrationModal = ({
           return survey.id === selectedIntegration.surveyId;
         })!
       );
-      setSelectedElements(selectedIntegration.elementIds);
+      setSelectedQuestions(selectedIntegration.questionIds);
       setIncludeVariables(!!selectedIntegration.includeVariables);
       setIncludeHiddenFields(!!selectedIntegration.includeHiddenFields);
       setIncludeMetadata(!!selectedIntegration.includeMetadata);
@@ -126,7 +121,7 @@ export const AddIntegrationModal = ({
       if (!selectedSurvey) {
         throw new Error(t("environments.integrations.please_select_a_survey_error"));
       }
-      if (selectedElements.length === 0) {
+      if (selectedQuestions.length === 0) {
         throw new Error(t("environments.integrations.select_at_least_one_question_error"));
       }
       const spreadsheetId = extractSpreadsheetIdFromUrl(spreadsheetUrl);
@@ -148,9 +143,9 @@ export const AddIntegrationModal = ({
       integrationData.spreadsheetName = spreadsheetName;
       integrationData.surveyId = selectedSurvey.id;
       integrationData.surveyName = selectedSurvey.name;
-      integrationData.elementIds = selectedElements;
+      integrationData.questionIds = selectedQuestions;
-      integrationData.elements =
+      integrationData.questions =
-        selectedElements.length === surveyElements.length
+        selectedQuestions.length === selectedSurvey?.questions.length
           ? t("common.all_questions")
           : t("common.selected_questions");
       integrationData.createdAt = new Date();
@@ -181,7 +176,7 @@ export const AddIntegrationModal = ({
   };
 
   const handleCheckboxChange = (questionId: TSurveyQuestionId) => {
-    setSelectedElements((prevValues) =>
+    setSelectedQuestions((prevValues) =>
       prevValues.includes(questionId)
         ? prevValues.filter((value) => value !== questionId)
         : [...prevValues, questionId]
@@ -268,7 +263,7 @@ export const AddIntegrationModal = ({
                     <Label htmlFor="Surveys">{t("common.questions")}</Label>
                     <div className="mt-1 max-h-[15vh] overflow-y-auto overflow-x-hidden rounded-lg border border-slate-200">
                       <div className="grid content-center rounded-lg bg-slate-50 p-3 text-left text-sm text-slate-900">
-                        {surveyElements.map((question) => (
+                        {replaceHeadlineRecall(selectedSurvey, "default")?.questions.map((question) => (
                           <div key={question.id} className="my-1 flex items-center space-x-2">
                             <label htmlFor={question.id} className="flex cursor-pointer items-center">
                               <Checkbox
@@ -276,17 +271,13 @@ export const AddIntegrationModal = ({
                                 id={question.id}
                                 value={question.id}
                                 className="bg-white"
-                                checked={selectedElements.includes(question.id)}
+                                checked={selectedQuestions.includes(question.id)}
                                 onCheckedChange={() => {
                                   handleCheckboxChange(question.id);
                                 }}
                               />
                               <span className="ml-2 w-[30rem] truncate">
-                                {getTextContent(
+                                {getTextContent(getLocalizedValue(question.headline, "default"))}
-                                  recallToHeadline(question.headline, selectedSurvey, false, "default")[
-                                    "default"
-                                  ]
-                                )}
                               </span>
                             </label>
                           </div>

apps/web/app/(app)/environments/[environmentId]/project/integrations/google-sheets/components/ManageIntegration.tsx

@@ -110,7 +110,7 @@ export const ManageIntegration = ({
                   }}>
                   <div className="col-span-2 text-center">{data.surveyName}</div>
                   <div className="col-span-2 text-center">{data.spreadsheetName}</div>
-                  <div className="col-span-2 text-center">{data.elements}</div>
+                  <div className="col-span-2 text-center">{data.questions}</div>
                   <div className="col-span-2 text-center">{timeSince(data.createdAt.toString(), locale)}</div>
                 </button>
               );

apps/web/app/(app)/environments/[environmentId]/project/integrations/notion/components/AddIntegrationModal.tsx

@@ -12,8 +12,7 @@ import {
   TIntegrationNotionConfigData,
   TIntegrationNotionDatabase,
 } from "@formbricks/types/integration/notion";
-import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+import { TSurvey, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
-import { TSurvey } from "@formbricks/types/surveys/types";
 import { getTextContent } from "@formbricks/types/surveys/validation";
 import { createOrUpdateIntegrationAction } from "@/app/(app)/environments/[environmentId]/project/integrations/actions";
 import {
@@ -22,10 +21,10 @@ import {
   UNSUPPORTED_TYPES_BY_NOTION,
 } from "@/app/(app)/environments/[environmentId]/project/integrations/notion/constants";
 import NotionLogo from "@/images/notion.png";
+import { getLocalizedValue } from "@/lib/i18n/utils";
 import { structuredClone } from "@/lib/pollyfills/structuredClone";
-import { recallToHeadline } from "@/lib/utils/recall";
+import { replaceHeadlineRecall } from "@/lib/utils/recall";
-import { getElementsFromBlocks } from "@/modules/survey/lib/client-utils";
+import { getQuestionTypes } from "@/modules/survey/lib/questions";
-import { getElementTypes } from "@/modules/survey/lib/elements";
 import { Button } from "@/modules/ui/components/button";
 import {
   Dialog,
@@ -39,59 +38,6 @@ import {
 import { DropdownSelector } from "@/modules/ui/components/dropdown-selector";
 import { Label } from "@/modules/ui/components/label";
 
-const MappingErrorMessage = ({
-  error,
-  col,
-  elem,
-  t,
-}: {
-  error: { type: string; msg?: React.ReactNode | string } | null | undefined;
-  col: { id: string; name: string; type: string };
-  elem: { id: string; name: string; type: string };
-  t: ReturnType<typeof useTranslation>["t"];
-}) => {
-  const showErrorMsg = useMemo(() => {
-    switch (error?.type) {
-      case ERRORS.UNSUPPORTED_TYPE:
-        return (
-          <>
-            -{" "}
-            {t("environments.integrations.notion.col_name_of_type_is_not_supported", {
-              col_name: col.name,
-              type: col.type,
-            })}
-          </>
-        );
-      case ERRORS.MAPPING:
-        const element = getElementTypes(t).find((et) => et.id === elem.type);
-        if (!element) return null;
-        return (
-          <>
-            {t("environments.integrations.notion.que_name_of_type_cant_be_mapped_to", {
-              que_name: elem.name,
-              question_label: element.label,
-              col_name: col.name,
-              col_type: col.type,
-              mapped_type: TYPE_MAPPING[element.id].join(" ,"),
-            })}
-          </>
-        );
-      default:
-        return null;
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [error, col, elem, t]);
-
-  if (!error) return null;
-
-  return (
-    <div className="my-4 w-full rounded-lg bg-red-100 p-4 text-sm text-red-800">
-      <span className="mb-2 block">{error.type}</span>
-      {showErrorMsg}
-    </div>
-  );
-};
-
 interface AddIntegrationModalProps {
   environmentId: string;
   surveys: TSurvey[];
@@ -118,7 +64,7 @@ export const AddIntegrationModal = ({
   const [mapping, setMapping] = useState<
     {
       column: { id: string; name: string; type: string };
-      element: { id: string; name: string; type: string };
+      question: { id: string; name: string; type: string };
       error?: {
         type: string;
         msg: React.ReactNode | string;
@@ -127,7 +73,7 @@ export const AddIntegrationModal = ({
   >([
     {
       column: { id: "", name: "", type: "" },
-      element: { id: "", name: "", type: "" },
+      question: { id: "", name: "", type: "" },
     },
   ]);
   const [isDeleting, setIsDeleting] = useState<boolean>(false);
@@ -140,17 +86,12 @@ export const AddIntegrationModal = ({
     mapping: [
       {
         column: { id: "", name: "", type: "" },
-        element: { id: "", name: "", type: "" },
+        question: { id: "", name: "", type: "" },
       },
     ],
     createdAt: new Date(),
   };
 
-  const elements = useMemo(
-    () => (selectedSurvey ? getElementsFromBlocks(selectedSurvey.blocks) : []),
-    [selectedSurvey]
-  );
-
   const notionIntegrationData: TIntegrationInput = {
     type: "notion",
     config: {
@@ -178,12 +119,12 @@ export const AddIntegrationModal = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedDatabase?.id]);
 
-  const elementItems = useMemo(() => {
+  const questionItems = useMemo(() => {
-    const mappedElements = selectedSurvey
+    const questions = selectedSurvey
-      ? elements.map((el) => ({
+      ? replaceHeadlineRecall(selectedSurvey, "default")?.questions.map((q) => ({
-          id: el.id,
+          id: q.id,
-          name: getTextContent(recallToHeadline(el.headline, selectedSurvey, false, "default")["default"]),
+          name: getTextContent(getLocalizedValue(q.headline, "default")),
-          type: el.type,
+          type: q.type,
         }))
       : [];
 
@@ -191,31 +132,31 @@ export const AddIntegrationModal = ({
       selectedSurvey?.variables.map((variable) => ({
         id: variable.id,
         name: variable.name,
-        type: TSurveyElementTypeEnum.OpenText,
+        type: TSurveyQuestionTypeEnum.OpenText,
       })) || [];
 
     const hiddenFields =
       selectedSurvey?.hiddenFields.fieldIds?.map((fId) => ({
         id: fId,
         name: `${t("common.hidden_field")} : ${fId}`,
-        type: TSurveyElementTypeEnum.OpenText,
+        type: TSurveyQuestionTypeEnum.OpenText,
       })) || [];
     const Metadata = [
       {
         id: "metadata",
         name: t("common.metadata"),
-        type: TSurveyElementTypeEnum.OpenText,
+        type: TSurveyQuestionTypeEnum.OpenText,
       },
     ];
     const createdAt = [
       {
         id: "createdAt",
         name: t("common.created_at"),
-        type: TSurveyElementTypeEnum.Date,
+        type: TSurveyQuestionTypeEnum.Date,
       },
     ];
 
-    return [...mappedElements, ...variables, ...hiddenFields, ...Metadata, ...createdAt];
+    return [...questions, ...variables, ...hiddenFields, ...Metadata, ...createdAt];
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedSurvey?.id]);
 
@@ -249,7 +190,7 @@ export const AddIntegrationModal = ({
         throw new Error(t("environments.integrations.please_select_a_survey_error"));
       }
 
-      if (mapping.length === 1 && (!mapping[0].element.id || !mapping[0].column.id)) {
+      if (mapping.length === 1 && (!mapping[0].question.id || !mapping[0].column.id)) {
         throw new Error(t("environments.integrations.notion.please_select_at_least_one_mapping"));
       }
 
@@ -258,8 +199,8 @@ export const AddIntegrationModal = ({
       }
 
       if (
-        mapping.filter((m) => m.column.id && !m.element.id).length >= 1 ||
+        mapping.filter((m) => m.column.id && !m.question.id).length >= 1 ||
-        mapping.filter((m) => m.element.id && !m.column.id).length >= 1
+        mapping.filter((m) => m.question.id && !m.column.id).length >= 1
       ) {
         throw new Error(
           t("environments.integrations.notion.please_complete_mapping_fields_with_notion_property")
@@ -320,23 +261,23 @@ export const AddIntegrationModal = ({
     setSelectedDatabase(null);
     setSelectedSurvey(null);
   };
-  const getFilteredElementItems = (selectedIdx) => {
+  const getFilteredQuestionItems = (selectedIdx) => {
-    const selectedElementIds = mapping.filter((_, idx) => idx !== selectedIdx).map((m) => m.element.id);
+    const selectedQuestionIds = mapping.filter((_, idx) => idx !== selectedIdx).map((m) => m.question.id);
 
-    return elementItems.filter((el) => !selectedElementIds.includes(el.id));
+    return questionItems.filter((q) => !selectedQuestionIds.includes(q.id));
   };
 
   const createCopy = (item) => structuredClone(item);
 
   const MappingRow = ({ idx }: { idx: number }) => {
-    const filteredElementItems = getFilteredElementItems(idx);
+    const filteredQuestionItems = getFilteredQuestionItems(idx);
 
     const addRow = () => {
       setMapping((prev) => [
         ...prev,
         {
           column: { id: "", name: "", type: "" },
-          element: { id: "", name: "", type: "" },
+          question: { id: "", name: "", type: "" },
         },
       ]);
     };
@@ -347,6 +288,49 @@ export const AddIntegrationModal = ({
       });
     };
 
+    const ErrorMsg = ({ error, col, ques }) => {
+      const showErrorMsg = useMemo(() => {
+        switch (error?.type) {
+          case ERRORS.UNSUPPORTED_TYPE:
+            return (
+              <>
+                -{" "}
+                {t("environments.integrations.notion.col_name_of_type_is_not_supported", {
+                  col_name: col.name,
+                  type: col.type,
+                })}
+              </>
+            );
+          case ERRORS.MAPPING:
+            const question = getQuestionTypes(t).find((qt) => qt.id === ques.type);
+            if (!question) return null;
+            return (
+              <>
+                {t("environments.integrations.notion.que_name_of_type_cant_be_mapped_to", {
+                  que_name: ques.name,
+                  question_label: question.label,
+                  col_name: col.name,
+                  col_type: col.type,
+                  mapped_type: TYPE_MAPPING[question.id].join(" ,"),
+                })}
+              </>
+            );
+          default:
+            return null;
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [error]);
+
+      if (!error) return null;
+
+      return (
+        <div className="my-4 w-full rounded-lg bg-red-100 p-4 text-sm text-red-800">
+          <span className="mb-2 block">{error.type}</span>
+          {showErrorMsg}
+        </div>
+      );
+    };
+
     const getFilteredDbItems = () => {
       const colMapping = mapping.map((m) => m.column.id);
       return dbItems.filter((item) => !colMapping.includes(item.id));
@@ -354,20 +338,19 @@ export const AddIntegrationModal = ({
 
     return (
       <div className="w-full">
-        <MappingErrorMessage
+        <ErrorMsg
           key={idx}
           error={mapping[idx]?.error}
           col={mapping[idx].column}
-          elem={mapping[idx].element}
+          ques={mapping[idx].question}
-          t={t}
         />
         <div className="flex w-full items-center space-x-2">
           <div className="flex w-full items-center">
             <div className="max-w-full flex-1">
               <DropdownSelector
                 placeholder={t("environments.integrations.notion.select_a_survey_question")}
-                items={filteredElementItems}
+                items={filteredQuestionItems}
-                selectedItem={mapping?.[idx]?.element}
+                selectedItem={mapping?.[idx]?.question}
                 setSelectedItem={(item) => {
                   setMapping((prev) => {
                     const copy = createCopy(prev);
@@ -379,7 +362,7 @@ export const AddIntegrationModal = ({
                           error: {
                             type: ERRORS.UNSUPPORTED_TYPE,
                           },
-                          element: item,
+                          question: item,
                         };
                         return copy;
                       }
@@ -391,7 +374,7 @@ export const AddIntegrationModal = ({
                           error: {
                             type: ERRORS.MAPPING,
                           },
-                          element: item,
+                          question: item,
                         };
                         return copy;
                       }
@@ -399,13 +382,13 @@ export const AddIntegrationModal = ({
 
                     copy[idx] = {
                       ...copy[idx],
-                      element: item,
+                      question: item,
                       error: null,
                     };
                     return copy;
                   });
                 }}
-                disabled={elementItems.length === 0}
+                disabled={questionItems.length === 0}
               />
             </div>
             <div className="h-px w-4 border-t border-t-slate-300" />
@@ -417,9 +400,9 @@ export const AddIntegrationModal = ({
                 setSelectedItem={(item) => {
                   setMapping((prev) => {
                     const copy = createCopy(prev);
-                    const elem = copy[idx].element;
+                    const ques = copy[idx].question;
-                    if (elem.id) {
+                    if (ques.id) {
-                      const isValidElemType = TYPE_MAPPING[elem.type].includes(item.type);
+                      const isValidQuesType = TYPE_MAPPING[ques.type].includes(item.type);
 
                       if (UNSUPPORTED_TYPES_BY_NOTION.includes(item.type)) {
                         copy[idx] = {
@@ -432,7 +415,7 @@ export const AddIntegrationModal = ({
                         return copy;
                       }
 
-                      if (!isValidElemType) {
+                      if (!isValidQuesType) {
                         copy[idx] = {
                           ...copy[idx],
                           error: {

apps/web/app/(app)/environments/[environmentId]/project/integrations/slack/components/AddChannelMappingModal.tsx

@@ -13,12 +13,12 @@ import {
   TIntegrationSlackConfigData,
   TIntegrationSlackInput,
 } from "@formbricks/types/integration/slack";
-import { TSurvey } from "@formbricks/types/surveys/types";
+import { TSurvey, TSurveyQuestionId } from "@formbricks/types/surveys/types";
 import { getTextContent } from "@formbricks/types/surveys/validation";
 import { createOrUpdateIntegrationAction } from "@/app/(app)/environments/[environmentId]/project/integrations/actions";
 import SlackLogo from "@/images/slacklogo.png";
-import { recallToHeadline } from "@/lib/utils/recall";
+import { getLocalizedValue } from "@/lib/i18n/utils";
-import { getElementsFromBlocks } from "@/modules/survey/lib/client-utils";
+import { replaceHeadlineRecall } from "@/lib/utils/recall";
 import { AdditionalIntegrationSettings } from "@/modules/ui/components/additional-integration-settings";
 import { Button } from "@/modules/ui/components/button";
 import { Checkbox } from "@/modules/ui/components/checkbox";
@@ -55,7 +55,7 @@ export const AddChannelMappingModal = ({
 }: AddChannelMappingModalProps) => {
   const { handleSubmit } = useForm();
   const { t } = useTranslation();
-  const [selectedElements, setSelectedElements] = useState<string[]>([]);
+  const [selectedQuestions, setSelectedQuestions] = useState<string[]>([]);
   const [isLinkingChannel, setIsLinkingChannel] = useState(false);
   const [selectedSurvey, setSelectedSurvey] = useState<TSurvey | null>(null);
   const [selectedChannel, setSelectedChannel] = useState<TIntegrationItem | null>(null);
@@ -73,19 +73,14 @@ export const AddChannelMappingModal = ({
     },
   };
 
-  const surveyElements = useMemo(
-    () => (selectedSurvey ? getElementsFromBlocks(selectedSurvey.blocks) : []),
-    [selectedSurvey]
-  );
-
   useEffect(() => {
     if (selectedSurvey) {
-      const elementIds = surveyElements.map((element) => element.id);
+      const questionIds = selectedSurvey.questions.map((question) => question.id);
       if (!selectedIntegration) {
-        setSelectedElements(elementIds);
+        setSelectedQuestions(questionIds);
       }
     }
-  }, [surveyElements, selectedIntegration, selectedSurvey]);
+  }, [selectedIntegration, selectedSurvey]);
 
   useEffect(() => {
     if (selectedIntegration) {
@@ -98,7 +93,7 @@ export const AddChannelMappingModal = ({
           return survey.id === selectedIntegration.surveyId;
         })!
       );
-      setSelectedElements(selectedIntegration.elementIds);
+      setSelectedQuestions(selectedIntegration.questionIds);
       setIncludeVariables(!!selectedIntegration.includeVariables);
       setIncludeHiddenFields(!!selectedIntegration.includeHiddenFields);
       setIncludeMetadata(!!selectedIntegration.includeMetadata);
@@ -117,7 +112,7 @@ export const AddChannelMappingModal = ({
         throw new Error(t("environments.integrations.please_select_a_survey_error"));
       }
 
-      if (selectedElements.length === 0) {
+      if (selectedQuestions.length === 0) {
         throw new Error(t("environments.integrations.select_at_least_one_question_error"));
       }
       setIsLinkingChannel(true);
@@ -126,9 +121,9 @@ export const AddChannelMappingModal = ({
         channelName: selectedChannel.name,
         surveyId: selectedSurvey.id,
         surveyName: selectedSurvey.name,
-        elementIds: selectedElements,
+        questionIds: selectedQuestions,
-        elements:
+        questions:
-          selectedElements.length === surveyElements.length
+          selectedQuestions.length === selectedSurvey?.questions.length
             ? t("common.all_questions")
             : t("common.selected_questions"),
         createdAt: new Date(),
@@ -159,11 +154,11 @@ export const AddChannelMappingModal = ({
     }
   };
 
-  const handleCheckboxChange = (elementId: string) => {
+  const handleCheckboxChange = (questionId: TSurveyQuestionId) => {
-    setSelectedElements((prevValues) =>
+    setSelectedQuestions((prevValues) =>
-      prevValues.includes(elementId)
+      prevValues.includes(questionId)
-        ? prevValues.filter((value) => value !== elementId)
+        ? prevValues.filter((value) => value !== questionId)
-        : [...prevValues, elementId]
+        : [...prevValues, questionId]
     );
   };
 
@@ -274,25 +269,21 @@ export const AddChannelMappingModal = ({
                     <Label htmlFor="Surveys">{t("common.questions")}</Label>
                     <div className="mt-1 max-h-[15vh] overflow-y-auto rounded-lg border border-slate-200">
                       <div className="grid content-center rounded-lg bg-slate-50 p-3 text-left text-sm text-slate-900">
-                        {surveyElements.map((element) => (
+                        {replaceHeadlineRecall(selectedSurvey, "default")?.questions?.map((question) => (
-                          <div key={element.id} className="my-1 flex items-center space-x-2">
+                          <div key={question.id} className="my-1 flex items-center space-x-2">
-                            <label htmlFor={element.id} className="flex cursor-pointer items-center">
+                            <label htmlFor={question.id} className="flex cursor-pointer items-center">
                               <Checkbox
                                 type="button"
-                                id={element.id}
+                                id={question.id}
-                                value={element.id}
+                                value={question.id}
                                 className="bg-white"
-                                checked={selectedElements.includes(element.id)}
+                                checked={selectedQuestions.includes(question.id)}
                                 onCheckedChange={() => {
-                                  handleCheckboxChange(element.id);
+                                  handleCheckboxChange(question.id);
                                 }}
                               />
                               <span className="ml-2">
-                                {getTextContent(
+                                {getTextContent(getLocalizedValue(question.headline, "default"))}
-                                  recallToHeadline(element.headline, selectedSurvey, false, "default")[
-                                    "default"
-                                  ]
-                                )}
                               </span>
                             </label>
                           </div>

apps/web/app/(app)/environments/[environmentId]/project/integrations/slack/components/ManageIntegration.tsx

@@ -126,7 +126,7 @@ export const ManageIntegration = ({
                   }}>
                   <div className="col-span-2 text-center">{data.surveyName}</div>
                   <div className="col-span-2 text-center">{data.channelName}</div>
-                  <div className="col-span-2 text-center">{data.elements}</div>
+                  <div className="col-span-2 text-center">{data.questions}</div>
                   <div className="col-span-2 text-center">{timeSince(data.createdAt.toString(), locale)}</div>
                 </button>
               );

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/layout.tsx

@@ -1,6 +1,5 @@
 import { Metadata } from "next";
 import { getServerSession } from "next-auth";
-import { ResponseFilterProvider } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/response-filter-context";
 import { getResponseCountBySurveyId } from "@/lib/response/service";
 import { getSurvey } from "@/lib/survey/service";
 import { authOptions } from "@/modules/auth/lib/authOptions";
@@ -26,7 +25,7 @@ export const generateMetadata = async (props: Props): Promise<Metadata> => {
 };
 
 const SurveyLayout = async ({ children }) => {
-  return <ResponseFilterProvider>{children}</ResponseFilterProvider>;
+  return <>{children}</>;
 };
 
 export default SurveyLayout;

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseDataView.tsx

@@ -10,7 +10,6 @@ import { TSurvey } from "@formbricks/types/surveys/types";
 import { TTag } from "@formbricks/types/tags";
 import { TUser, TUserLocale } from "@formbricks/types/user";
 import { ResponseTable } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTable";
-import { getElementsFromBlocks } from "@/modules/survey/lib/client-utils";
 
 interface ResponseDataViewProps {
   survey: TSurvey;
@@ -56,11 +55,9 @@ export const formatContactInfoData = (responseValue: TResponseDataValue): Record
 export const extractResponseData = (response: TResponseWithQuotas, survey: TSurvey): Record<string, any> => {
   const responseData: Record<string, any> = {};
 
-  const elements = getElementsFromBlocks(survey.blocks);
+  for (const question of survey.questions) {
-
+    const responseValue = response.data[question.id];
-  for (const element of elements) {
+    switch (question.type) {
-    const responseValue = response.data[element.id];
-    switch (element.type) {
       case "matrix":
         if (typeof responseValue === "object") {
           Object.assign(responseData, responseValue);
@@ -73,7 +70,7 @@ export const extractResponseData = (response: TResponseWithQuotas, survey: TSurv
         Object.assign(responseData, formatContactInfoData(responseValue));
         break;
       default:
-        responseData[element.id] = responseValue;
+        responseData[question.id] = responseValue;
     }
   }
 

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponsePage.tsx

@@ -8,8 +8,8 @@ import { TResponseWithQuotas } from "@formbricks/types/responses";
 import { TSurvey } from "@formbricks/types/surveys/types";
 import { TTag } from "@formbricks/types/tags";
 import { TUser, TUserLocale } from "@formbricks/types/user";
+import { useResponseFilter } from "@/app/(app)/environments/[environmentId]/components/ResponseFilterContext";
 import { getResponsesAction } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/actions";
-import { useResponseFilter } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/response-filter-context";
 import { ResponseDataView } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseDataView";
 import { CustomFilter } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/CustomFilter";
 import { getFormattedFilters } from "@/app/lib/surveys/surveys";

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTableColumns.tsx

@@ -5,8 +5,7 @@ import { TFunction } from "i18next";
 import { CircleHelpIcon, EyeOffIcon, MailIcon, TagIcon } from "lucide-react";
 import Link from "next/link";
 import { TResponseTableData } from "@formbricks/types/responses";
-import { TSurveyElement } from "@formbricks/types/surveys/elements";
+import { TSurvey, TSurveyQuestion } from "@formbricks/types/surveys/types";
-import { TSurvey } from "@formbricks/types/surveys/types";
 import { getTextContent } from "@formbricks/types/surveys/validation";
 import { getLocalizedValue } from "@/lib/i18n/utils";
 import { extractChoiceIdsFromResponse } from "@/lib/response/utils";
@@ -14,8 +13,7 @@ import { getContactIdentifier } from "@/lib/utils/contact";
 import { getFormattedDateTimeString } from "@/lib/utils/datetime";
 import { recallToHeadline } from "@/lib/utils/recall";
 import { RenderResponse } from "@/modules/analysis/components/SingleResponseCard/components/RenderResponse";
-import { getElementsFromBlocks } from "@/modules/survey/lib/client-utils";
+import { VARIABLES_ICON_MAP, getQuestionIconMap } from "@/modules/survey/lib/questions";
-import { VARIABLES_ICON_MAP, getElementIconMap } from "@/modules/survey/lib/elements";
 import { getSelectionColumn } from "@/modules/ui/components/data-table";
 import { IdBadge } from "@/modules/ui/components/id-badge";
 import { ResponseBadges } from "@/modules/ui/components/response-badges";
@@ -30,33 +28,35 @@ import {
   getMetadataValue,
 } from "../lib/utils";
 
-const getElementColumnsData = (
+const getQuestionColumnsData = (
-  element: TSurveyElement,
+  question: TSurveyQuestion,
   survey: TSurvey,
   isExpanded: boolean,
   t: TFunction
 ): ColumnDef<TResponseTableData>[] => {
-  const ELEMENTS_ICON_MAP = getElementIconMap(t);
+  const QUESTIONS_ICON_MAP = getQuestionIconMap(t);
   const addressFields = ["addressLine1", "addressLine2", "city", "state", "zip", "country"];
   const contactInfoFields = ["firstName", "lastName", "email", "phone", "company"];
 
   // Helper function to create consistent column headers
-  const createElementHeader = (elementType: string, headline: string, suffix?: string) => {
+  const createQuestionHeader = (questionType: string, headline: string, suffix?: string) => {
     const title = suffix ? `${headline} - ${suffix}` : headline;
-    const ElementHeader = () => (
+    const QuestionHeader = () => (
       <div className="flex items-center justify-between">
         <div className="flex items-center space-x-2 overflow-hidden">
-          <span className="h-4 w-4">{ELEMENTS_ICON_MAP[elementType]}</span>
+          <span className="h-4 w-4">{QUESTIONS_ICON_MAP[questionType]}</span>
           <span className="truncate">{title}</span>
         </div>
       </div>
     );
-    return ElementHeader;
+    QuestionHeader.displayName = "QuestionHeader";
+    return QuestionHeader;
   };
 
-  const getElementHeadline = (element: TSurveyElement, survey: TSurvey) => {
+  // Helper function to get localized question headline
+  const getQuestionHeadline = (question: TSurveyQuestion, survey: TSurvey) => {
     return getTextContent(
-      getLocalizedValue(recallToHeadline(element.headline, survey, false, "default"), "default")
+      getLocalizedValue(recallToHeadline(question.headline, survey, false, "default"), "default")
     );
   };
 
@@ -75,18 +75,18 @@ const getElementColumnsData = (
     );
   };
 
-  switch (element.type) {
+  switch (question.type) {
     case "matrix":
-      return element.rows.map((matrixRow) => {
+      return question.rows.map((matrixRow) => {
         return {
-          accessorKey: "ELEMENT_" + element.id + "_" + matrixRow.label.default,
+          accessorKey: "QUESTION_" + question.id + "_" + matrixRow.label.default,
           header: () => {
             return (
               <div className="flex items-center justify-between">
                 <div className="flex items-center space-x-2 overflow-hidden">
-                  <span className="h-4 w-4">{ELEMENTS_ICON_MAP["matrix"]}</span>
+                  <span className="h-4 w-4">{QUESTIONS_ICON_MAP["matrix"]}</span>
                   <span className="truncate">
-                    {getTextContent(getLocalizedValue(element.headline, "default")) +
+                    {getTextContent(getLocalizedValue(question.headline, "default")) +
                       " - " +
                       getLocalizedValue(matrixRow.label, "default")}
                   </span>
@@ -106,12 +106,12 @@ const getElementColumnsData = (
     case "address":
       return addressFields.map((addressField) => {
         return {
-          accessorKey: "ELEMENT_" + element.id + "_" + addressField,
+          accessorKey: "QUESTION_" + question.id + "_" + addressField,
           header: () => {
             return (
               <div className="flex items-center justify-between">
                 <div className="flex items-center space-x-2 overflow-hidden">
-                  <span className="h-4 w-4">{ELEMENTS_ICON_MAP["address"]}</span>
+                  <span className="h-4 w-4">{QUESTIONS_ICON_MAP["address"]}</span>
                   <span className="truncate">{getAddressFieldLabel(addressField, t)}</span>
                 </div>
               </div>
@@ -129,12 +129,12 @@ const getElementColumnsData = (
     case "contactInfo":
       return contactInfoFields.map((contactInfoField) => {
         return {
-          accessorKey: "ELEMENT_" + element.id + "_" + contactInfoField,
+          accessorKey: "QUESTION_" + question.id + "_" + contactInfoField,
           header: () => {
             return (
               <div className="flex items-center justify-between">
                 <div className="flex items-center space-x-2 overflow-hidden">
-                  <span className="h-4 w-4">{ELEMENTS_ICON_MAP["contactInfo"]}</span>
+                  <span className="h-4 w-4">{QUESTIONS_ICON_MAP["contactInfo"]}</span>
                   <span className="truncate">{getContactInfoFieldLabel(contactInfoField, t)}</span>
                 </div>
               </div>
@@ -153,17 +153,17 @@ const getElementColumnsData = (
     case "multipleChoiceSingle":
     case "ranking":
     case "pictureSelection": {
-      const elementHeadline = getElementHeadline(element, survey);
+      const questionHeadline = getQuestionHeadline(question, survey);
       return [
         {
-          accessorKey: "ELEMENT_" + element.id,
+          accessorKey: "QUESTION_" + question.id,
-          header: createElementHeader(element.type, elementHeadline),
+          header: createQuestionHeader(question.type, questionHeadline),
           cell: ({ row }) => {
-            const responseValue = row.original.responseData[element.id];
+            const responseValue = row.original.responseData[question.id];
             const language = row.original.language;
             return (
               <RenderResponse
-                element={element}
+                question={question}
                 survey={survey}
                 responseData={responseValue}
                 language={language}
@@ -174,15 +174,15 @@ const getElementColumnsData = (
           },
         },
         {
-          accessorKey: "ELEMENT_" + element.id + "optionIds",
+          accessorKey: "QUESTION_" + question.id + "optionIds",
-          header: createElementHeader(element.type, elementHeadline, t("common.option_id")),
+          header: createQuestionHeader(question.type, questionHeadline, t("common.option_id")),
           cell: ({ row }) => {
-            const responseValue = row.original.responseData[element.id];
+            const responseValue = row.original.responseData[question.id];
             // Type guard to ensure responseValue is the correct type
             if (typeof responseValue === "string" || Array.isArray(responseValue)) {
               const choiceIds = extractChoiceIdsFromResponse(
                 responseValue,
-                element,
+                question,
                 row.original.language || undefined
               );
               return renderChoiceIdBadges(choiceIds, isExpanded);
@@ -196,25 +196,28 @@ const getElementColumnsData = (
     default:
       return [
         {
-          accessorKey: "ELEMENT_" + element.id,
+          accessorKey: "QUESTION_" + question.id,
           header: () => (
             <div className="flex items-center justify-between">
               <div className="flex items-center space-x-2 overflow-hidden">
-                <span className="h-4 w-4">{ELEMENTS_ICON_MAP[element.type]}</span>
+                <span className="h-4 w-4">{QUESTIONS_ICON_MAP[question.type]}</span>
                 <span className="truncate">
                   {getTextContent(
-                    getLocalizedValue(recallToHeadline(element.headline, survey, false, "default"), "default")
+                    getLocalizedValue(
+                      recallToHeadline(question.headline, survey, false, "default"),
+                      "default"
+                    )
                   )}
                 </span>
               </div>
             </div>
           ),
           cell: ({ row }) => {
-            const responseValue = row.original.responseData[element.id];
+            const responseValue = row.original.responseData[question.id];
             const language = row.original.language;
             return (
               <RenderResponse
-                element={element}
+                question={question}
                 survey={survey}
                 responseData={responseValue}
                 language={language}
@@ -262,8 +265,9 @@ export const generateResponseTableColumns = (
   t: TFunction,
   showQuotasColumn: boolean
 ): ColumnDef<TResponseTableData>[] => {
-  const elements = getElementsFromBlocks(survey.blocks);
+  const questionColumns = survey.questions.flatMap((question) =>
-  const elementColumns = elements.flatMap((element) => getElementColumnsData(element, survey, isExpanded, t));
+    getQuestionColumnsData(question, survey, isExpanded, t)
+  );
 
   const dateColumn: ColumnDef<TResponseTableData> = {
     accessorKey: "createdAt",
@@ -410,7 +414,7 @@ export const generateResponseTableColumns = (
     ),
   };
 
-  // Combine the selection column with the dynamic element columns
+  // Combine the selection column with the dynamic question columns
   const baseColumns = [
     personColumn,
     singleUseIdColumn,
@@ -418,7 +422,7 @@ export const generateResponseTableColumns = (
     ...(showQuotasColumn ? [quotasColumn] : []),
     statusColumn,
     ...(survey.isVerifyEmailEnabled ? [verifiedEmailColumn] : []),
-    ...elementColumns,
+    ...questionColumns,
     ...variableColumns,
     ...hiddenFieldColumns,
     ...metadataColumns,

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/AddressSummary.tsx

@@ -2,27 +2,26 @@
 
 import Link from "next/link";
 import { useTranslation } from "react-i18next";
-import { TSurvey, TSurveyElementSummaryAddress } from "@formbricks/types/surveys/types";
+import { TSurvey, TSurveyQuestionSummaryAddress } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";
 import { timeSince } from "@/lib/time";
 import { getContactIdentifier } from "@/lib/utils/contact";
 import { ArrayResponse } from "@/modules/ui/components/array-response";
 import { PersonAvatar } from "@/modules/ui/components/avatars";
-import { EmptyState } from "@/modules/ui/components/empty-state";
+import { QuestionSummaryHeader } from "./QuestionSummaryHeader";
-import { ElementSummaryHeader } from "./ElementSummaryHeader";
 
 interface AddressSummaryProps {
-  elementSummary: TSurveyElementSummaryAddress;
+  questionSummary: TSurveyQuestionSummaryAddress;
   environmentId: string;
   survey: TSurvey;
   locale: TUserLocale;
 }
 
-export const AddressSummary = ({ elementSummary, environmentId, survey, locale }: AddressSummaryProps) => {
+export const AddressSummary = ({ questionSummary, environmentId, survey, locale }: AddressSummaryProps) => {
   const { t } = useTranslation();
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
-      <ElementSummaryHeader elementSummary={elementSummary} survey={survey} />
+      <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
       <div>
         <div className="grid h-10 grid-cols-4 items-center border-y border-slate-200 bg-slate-100 text-sm font-bold text-slate-600">
           <div className="pl-4 md:pl-6">{t("common.user")}</div>
@@ -30,48 +29,42 @@ export const AddressSummary = ({ elementSummary, environmentId, survey, locale }
           <div className="px-4 md:px-6">{t("common.time")}</div>
         </div>
         <div className="max-h-[62vh] w-full overflow-y-auto">
-          {elementSummary.samples.length === 0 ? (
+          {questionSummary.samples.map((response) => {
-            <div className="p-8">
+            return (
-              <EmptyState text={t("environments.surveys.summary.no_responses_found")} variant="simple" />
+              <div
-            </div>
+                key={response.id}
-          ) : (
+                className="grid grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 last:border-transparent md:text-base">
-            elementSummary.samples.map((response) => {
+                <div className="pl-4 md:pl-6">
-              return (
+                  {response.contact ? (
-                <div
+                    <Link
-                  key={response.id}
+                      className="ph-no-capture group flex items-center"
-                  className="grid grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 last:border-transparent md:text-base">
+                      href={`/environments/${environmentId}/contacts/${response.contact.id}`}>
-                  <div className="pl-4 md:pl-6">
+                      <div className="hidden md:flex">
-                    {response.contact ? (
+                        <PersonAvatar personId={response.contact.id} />
-                      <Link
-                        className="ph-no-capture group flex items-center"
-                        href={`/environments/${environmentId}/contacts/${response.contact.id}`}>
-                        <div className="hidden md:flex">
-                          <PersonAvatar personId={response.contact.id} />
-                        </div>
-                        <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
-                          {getContactIdentifier(response.contact, response.contactAttributes)}
-                        </p>
-                      </Link>
-                    ) : (
-                      <div className="group flex items-center">
-                        <div className="hidden md:flex">
-                          <PersonAvatar personId="anonymous" />
-                        </div>
-                        <p className="break-all text-slate-600 md:ml-2">{t("common.anonymous")}</p>
                       </div>
-                    )}
+                      <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
-                  </div>
+                        {getContactIdentifier(response.contact, response.contactAttributes)}
-                  <div className="ph-no-capture col-span-2 pl-6 font-semibold">
+                      </p>
-                    <ArrayResponse value={response.value} />
+                    </Link>
-                  </div>
+                  ) : (
-
+                    <div className="group flex items-center">
-                  <div className="px-4 text-slate-500 md:px-6">
+                      <div className="hidden md:flex">
-                    {timeSince(new Date(response.updatedAt).toISOString(), locale)}
+                        <PersonAvatar personId="anonymous" />
-                  </div>
+                      </div>
+                      <p className="break-all text-slate-600 md:ml-2">{t("common.anonymous")}</p>
+                    </div>
+                  )}
                 </div>
-              );
+                <div className="ph-no-capture col-span-2 pl-6 font-semibold">
-            })
+                  <ArrayResponse value={response.value} />
-          )}
+                </div>
+
+                <div className="px-4 text-slate-500 md:px-6">
+                  {timeSince(new Date(response.updatedAt).toISOString(), locale)}
+                </div>
+              </div>
+            );
+          })}
         </div>
       </div>
     </div>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/CTASummary.tsx

@@ -2,39 +2,39 @@
 
 import { InboxIcon } from "lucide-react";
 import { useTranslation } from "react-i18next";
-import { TSurvey, TSurveyElementSummaryCta } from "@formbricks/types/surveys/types";
+import { TSurvey, TSurveyQuestionSummaryCta } from "@formbricks/types/surveys/types";
 import { ProgressBar } from "@/modules/ui/components/progress-bar";
 import { convertFloatToNDecimal } from "../lib/utils";
-import { ElementSummaryHeader } from "./ElementSummaryHeader";
+import { QuestionSummaryHeader } from "./QuestionSummaryHeader";
 
 interface CTASummaryProps {
-  elementSummary: TSurveyElementSummaryCta;
+  questionSummary: TSurveyQuestionSummaryCta;
   survey: TSurvey;
 }
 
-export const CTASummary = ({ elementSummary, survey }: CTASummaryProps) => {
+export const CTASummary = ({ questionSummary, survey }: CTASummaryProps) => {
   const { t } = useTranslation();
 
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
-      <ElementSummaryHeader
+      <QuestionSummaryHeader
         survey={survey}
-        elementSummary={elementSummary}
+        questionSummary={questionSummary}
         showResponses={false}
         additionalInfo={
           <>
             <div className="flex items-center rounded-lg bg-slate-100 p-2">
               <InboxIcon className="mr-2 h-4 w-4" />
-              {`${elementSummary.impressionCount} ${t("common.impressions")}`}
+              {`${questionSummary.impressionCount} ${t("common.impressions")}`}
             </div>
             <div className="flex items-center rounded-lg bg-slate-100 p-2">
               <InboxIcon className="mr-2 h-4 w-4" />
-              {`${elementSummary.clickCount} ${t("common.clicks")}`}
+              {`${questionSummary.clickCount} ${t("common.clicks")}`}
             </div>
-            {!elementSummary.element.required && (
+            {!questionSummary.question.required && (
               <div className="flex items-center rounded-lg bg-slate-100 p-2">
                 <InboxIcon className="mr-2 h-4 w-4" />
-                {`${elementSummary.skipCount} ${t("common.skips")}`}
+                {`${questionSummary.skipCount} ${t("common.skips")}`}
               </div>
             )}
           </>
@@ -46,16 +46,16 @@ export const CTASummary = ({ elementSummary, survey }: CTASummaryProps) => {
             <p className="font-semibold text-slate-700">CTR</p>
             <div>
               <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
-                {convertFloatToNDecimal(elementSummary.ctr.percentage, 2)}%
+                {convertFloatToNDecimal(questionSummary.ctr.percentage, 2)}%
               </p>
             </div>
           </div>
           <p className="flex w-32 items-end justify-end text-slate-600">
-            {elementSummary.ctr.count}{" "}
+            {questionSummary.ctr.count}{" "}
-            {elementSummary.ctr.count === 1 ? t("common.click") : t("common.clicks")}
+            {questionSummary.ctr.count === 1 ? t("common.click") : t("common.clicks")}
           </p>
         </div>
-        <ProgressBar barColor="bg-brand-dark" progress={elementSummary.ctr.percentage / 100} />
+        <ProgressBar barColor="bg-brand-dark" progress={questionSummary.ctr.percentage / 100} />
       </div>
     </div>
   );

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/CalSummary.tsx

@@ -1,23 +1,23 @@
 "use client";
 
 import { useTranslation } from "react-i18next";
-import { TSurvey, TSurveyElementSummaryCal } from "@formbricks/types/surveys/types";
+import { TSurvey, TSurveyQuestionSummaryCal } from "@formbricks/types/surveys/types";
 import { convertFloatToNDecimal } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/lib/utils";
 import { ProgressBar } from "@/modules/ui/components/progress-bar";
-import { ElementSummaryHeader } from "./ElementSummaryHeader";
+import { QuestionSummaryHeader } from "./QuestionSummaryHeader";
 
 interface CalSummaryProps {
-  elementSummary: TSurveyElementSummaryCal;
+  questionSummary: TSurveyQuestionSummaryCal;
   environmentId: string;
   survey: TSurvey;
 }
 
-export const CalSummary = ({ elementSummary, survey }: CalSummaryProps) => {
+export const CalSummary = ({ questionSummary, survey }: CalSummaryProps) => {
   const { t } = useTranslation();
 
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
-      <ElementSummaryHeader elementSummary={elementSummary} survey={survey} />
+      <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
       <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
         <div>
           <div className="text flex justify-between px-2 pb-2">
@@ -25,16 +25,16 @@ export const CalSummary = ({ elementSummary, survey }: CalSummaryProps) => {
               <p className="font-semibold text-slate-700">{t("common.booked")}</p>
               <div>
                 <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
-                  {convertFloatToNDecimal(elementSummary.booked.percentage, 2)}%
+                  {convertFloatToNDecimal(questionSummary.booked.percentage, 2)}%
                 </p>
               </div>
             </div>
             <p className="flex w-32 items-end justify-end text-slate-600">
-              {elementSummary.booked.count}{" "}
+              {questionSummary.booked.count}{" "}
-              {elementSummary.booked.count === 1 ? t("common.response") : t("common.responses")}
+              {questionSummary.booked.count === 1 ? t("common.response") : t("common.responses")}
             </p>
           </div>
-          <ProgressBar barColor="bg-brand-dark" progress={elementSummary.booked.percentage / 100} />
+          <ProgressBar barColor="bg-brand-dark" progress={questionSummary.booked.percentage / 100} />
         </div>
         <div>
           <div className="text flex justify-between px-2 pb-2">
@@ -42,16 +42,16 @@ export const CalSummary = ({ elementSummary, survey }: CalSummaryProps) => {
               <p className="font-semibold text-slate-700">{t("common.dismissed")}</p>
               <div>
                 <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
-                  {convertFloatToNDecimal(elementSummary.skipped.percentage, 2)}%
+                  {convertFloatToNDecimal(questionSummary.skipped.percentage, 2)}%
                 </p>
               </div>
             </div>
             <p className="flex w-32 items-end justify-end text-slate-600">
-              {elementSummary.skipped.count}{" "}
+              {questionSummary.skipped.count}{" "}
-              {elementSummary.skipped.count === 1 ? t("common.response") : t("common.responses")}
+              {questionSummary.skipped.count === 1 ? t("common.response") : t("common.responses")}
             </p>
           </div>
-          <ProgressBar barColor="bg-brand-dark" progress={elementSummary.skipped.percentage / 100} />
+          <ProgressBar barColor="bg-brand-dark" progress={questionSummary.skipped.percentage / 100} />
         </div>
       </div>
     </div>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ConsentSummary.tsx

@@ -1,42 +1,46 @@
 "use client";
 
 import { useTranslation } from "react-i18next";
-import { type TI18nString } from "@formbricks/types/i18n";
+import {
-import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+  TI18nString,
-import { TSurvey, TSurveyElementSummaryConsent } from "@formbricks/types/surveys/types";
+  TSurvey,
+  TSurveyQuestionId,
+  TSurveyQuestionSummaryConsent,
+  TSurveyQuestionTypeEnum,
+} from "@formbricks/types/surveys/types";
 import { ProgressBar } from "@/modules/ui/components/progress-bar";
 import { convertFloatToNDecimal } from "../lib/utils";
-import { ElementSummaryHeader } from "./ElementSummaryHeader";
+import { QuestionSummaryHeader } from "./QuestionSummaryHeader";
 
 interface ConsentSummaryProps {
-  elementSummary: TSurveyElementSummaryConsent;
+  questionSummary: TSurveyQuestionSummaryConsent;
   survey: TSurvey;
   setFilter: (
-    elementId: string,
+    questionId: TSurveyQuestionId,
     label: TI18nString,
-    elementType: TSurveyElementTypeEnum,
+    questionType: TSurveyQuestionTypeEnum,
     filterValue: string,
     filterComboBoxValue?: string | string[]
   ) => void;
 }
 
-export const ConsentSummary = ({ elementSummary, survey, setFilter }: ConsentSummaryProps) => {
+export const ConsentSummary = ({ questionSummary, survey, setFilter }: ConsentSummaryProps) => {
   const { t } = useTranslation();
   const summaryItems = [
     {
       title: t("common.accepted"),
-      percentage: elementSummary.accepted.percentage,
+      percentage: questionSummary.accepted.percentage,
-      count: elementSummary.accepted.count,
+      count: questionSummary.accepted.count,
     },
     {
       title: t("common.dismissed"),
-      percentage: elementSummary.dismissed.percentage,
+      percentage: questionSummary.dismissed.percentage,
-      count: elementSummary.dismissed.count,
+      count: questionSummary.dismissed.count,
     },
   ];
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
-      <ElementSummaryHeader elementSummary={elementSummary} survey={survey} />
+      <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
       <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
         {summaryItems.map((summaryItem) => {
           return (
@@ -45,9 +49,9 @@ export const ConsentSummary = ({ elementSummary, survey, setFilter }: ConsentSum
               key={summaryItem.title}
               onClick={() =>
                 setFilter(
-                  elementSummary.element.id,
+                  questionSummary.question.id,
-                  elementSummary.element.headline,
+                  questionSummary.question.headline,
-                  elementSummary.element.type,
+                  questionSummary.question.type,
                   "is",
                   summaryItem.title
                 )

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ContactInfoSummary.tsx

@@ -2,24 +2,23 @@
 
 import Link from "next/link";
 import { useTranslation } from "react-i18next";
-import { TSurvey, TSurveyElementSummaryContactInfo } from "@formbricks/types/surveys/types";
+import { TSurvey, TSurveyQuestionSummaryContactInfo } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";
 import { timeSince } from "@/lib/time";
 import { getContactIdentifier } from "@/lib/utils/contact";
 import { ArrayResponse } from "@/modules/ui/components/array-response";
 import { PersonAvatar } from "@/modules/ui/components/avatars";
-import { EmptyState } from "@/modules/ui/components/empty-state";
+import { QuestionSummaryHeader } from "./QuestionSummaryHeader";
-import { ElementSummaryHeader } from "./ElementSummaryHeader";
 
 interface ContactInfoSummaryProps {
-  elementSummary: TSurveyElementSummaryContactInfo;
+  questionSummary: TSurveyQuestionSummaryContactInfo;
   environmentId: string;
   survey: TSurvey;
   locale: TUserLocale;
 }
 
 export const ContactInfoSummary = ({
-  elementSummary,
+  questionSummary,
   environmentId,
   survey,
   locale,
@@ -27,7 +26,7 @@ export const ContactInfoSummary = ({
   const { t } = useTranslation();
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
-      <ElementSummaryHeader elementSummary={elementSummary} survey={survey} />
+      <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
       <div>
         <div className="grid h-10 grid-cols-4 items-center border-y border-slate-200 bg-slate-100 text-sm font-bold text-slate-600">
           <div className="pl-4 md:pl-6">{t("common.user")}</div>
@@ -35,48 +34,42 @@ export const ContactInfoSummary = ({
           <div className="px-4 md:px-6">{t("common.time")}</div>
         </div>
         <div className="max-h-[62vh] w-full overflow-y-auto">
-          {elementSummary.samples.length === 0 ? (
+          {questionSummary.samples.map((response) => {
-            <div className="p-8">
+            return (
-              <EmptyState text={t("environments.surveys.summary.no_responses_found")} variant="simple" />
+              <div
-            </div>
+                key={response.id}
-          ) : (
+                className="grid grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 last:border-transparent md:text-base">
-            elementSummary.samples.map((response) => {
+                <div className="pl-4 md:pl-6">
-              return (
+                  {response.contact ? (
-                <div
+                    <Link
-                  key={response.id}
+                      className="ph-no-capture group flex items-center"
-                  className="grid grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 last:border-transparent md:text-base">
+                      href={`/environments/${environmentId}/contacts/${response.contact.id}`}>
-                  <div className="pl-4 md:pl-6">
+                      <div className="hidden md:flex">
-                    {response.contact ? (
+                        <PersonAvatar personId={response.contact.id} />
-                      <Link
-                        className="ph-no-capture group flex items-center"
-                        href={`/environments/${environmentId}/contacts/${response.contact.id}`}>
-                        <div className="hidden md:flex">
-                          <PersonAvatar personId={response.contact.id} />
-                        </div>
-                        <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
-                          {getContactIdentifier(response.contact, response.contactAttributes)}
-                        </p>
-                      </Link>
-                    ) : (
-                      <div className="group flex items-center">
-                        <div className="hidden md:flex">
-                          <PersonAvatar personId="anonymous" />
-                        </div>
-                        <p className="break-all text-slate-600 md:ml-2">{t("common.anonymous")}</p>
                       </div>
-                    )}
+                      <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
-                  </div>
+                        {getContactIdentifier(response.contact, response.contactAttributes)}
-                  <div className="ph-no-capture col-span-2 pl-6 font-semibold">
+                      </p>
-                    <ArrayResponse value={response.value} />
+                    </Link>
-                  </div>
+                  ) : (
-
+                    <div className="group flex items-center">
-                  <div className="px-4 text-slate-500 md:px-6">
+                      <div className="hidden md:flex">
-                    {timeSince(new Date(response.updatedAt).toISOString(), locale)}
+                        <PersonAvatar personId="anonymous" />
-                  </div>
+                      </div>
+                      <p className="break-all text-slate-600 md:ml-2">{t("common.anonymous")}</p>
+                    </div>
+                  )}
                 </div>
-              );
+                <div className="ph-no-capture col-span-2 pl-6 font-semibold">
-            })
+                  <ArrayResponse value={response.value} />
-          )}
+                </div>
+
+                <div className="px-4 text-slate-500 md:px-6">
+                  {timeSince(new Date(response.updatedAt).toISOString(), locale)}
+                </div>
+              </div>
+            );
+          })}
         </div>
       </div>
     </div>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/DateElementSummary.tsx

@@ -1,104 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { TSurvey, TSurveyElementSummaryDate } from "@formbricks/types/surveys/types";
-import { TUserLocale } from "@formbricks/types/user";
-import { timeSince } from "@/lib/time";
-import { getContactIdentifier } from "@/lib/utils/contact";
-import { formatDateWithOrdinal } from "@/lib/utils/datetime";
-import { PersonAvatar } from "@/modules/ui/components/avatars";
-import { Button } from "@/modules/ui/components/button";
-import { EmptyState } from "@/modules/ui/components/empty-state";
-import { ElementSummaryHeader } from "./ElementSummaryHeader";
-
-interface DateElementSummary {
-  elementSummary: TSurveyElementSummaryDate;
-  environmentId: string;
-  survey: TSurvey;
-  locale: TUserLocale;
-}
-
-export const DateElementSummary = ({ elementSummary, environmentId, survey, locale }: DateElementSummary) => {
-  const { t } = useTranslation();
-  const [visibleResponses, setVisibleResponses] = useState(10);
-
-  const handleLoadMore = () => {
-    // Increase the number of visible responses by 10, not exceeding the total number of responses
-    setVisibleResponses((prevVisibleResponses) =>
-      Math.min(prevVisibleResponses + 10, elementSummary.samples.length)
-    );
-  };
-
-  const renderResponseValue = (value: string) => {
-    const parsedDate = new Date(value);
-
-    const formattedDate = isNaN(parsedDate.getTime())
-      ? `${t("common.invalid_date")}(${value})`
-      : formatDateWithOrdinal(parsedDate);
-
-    return formattedDate;
-  };
-
-  return (
-    <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
-      <ElementSummaryHeader elementSummary={elementSummary} survey={survey} />
-      <div className="">
-        <div className="grid h-10 grid-cols-4 items-center border-y border-slate-200 bg-slate-100 text-sm font-bold text-slate-600">
-          <div className="pl-4 md:pl-6">{t("common.user")}</div>
-          <div className="col-span-2 pl-4 md:pl-6">{t("common.response")}</div>
-          <div className="px-4 md:px-6">{t("common.time")}</div>
-        </div>
-        <div className="max-h-[62vh] w-full overflow-y-auto">
-          {elementSummary.samples.length === 0 ? (
-            <div className="p-8">
-              <EmptyState text={t("environments.surveys.summary.no_responses_found")} variant="simple" />
-            </div>
-          ) : (
-            elementSummary.samples.slice(0, visibleResponses).map((response) => (
-              <div
-                key={response.id}
-                className="grid grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 last:border-transparent md:text-base">
-                <div className="pl-4 md:pl-6">
-                  {response.contact ? (
-                    <Link
-                      className="ph-no-capture group flex items-center"
-                      href={`/environments/${environmentId}/contacts/${response.contact.id}`}>
-                      <div className="hidden md:flex">
-                        <PersonAvatar personId={response.contact.id} />
-                      </div>
-                      <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
-                        {getContactIdentifier(response.contact, response.contactAttributes)}
-                      </p>
-                    </Link>
-                  ) : (
-                    <div className="group flex items-center">
-                      <div className="hidden md:flex">
-                        <PersonAvatar personId="anonymous" />
-                      </div>
-                      <p className="break-all text-slate-600 md:ml-2">{t("common.anonymous")}</p>
-                    </div>
-                  )}
-                </div>
-                <div className="ph-no-capture col-span-2 whitespace-pre-wrap pl-6 font-semibold">
-                  {renderResponseValue(response.value)}
-                </div>
-                <div className="px-4 text-slate-500 md:px-6">
-                  {timeSince(new Date(response.updatedAt).toISOString(), locale)}
-                </div>
-              </div>
-            ))
-          )}
-        </div>
-        {elementSummary.samples.length > 0 && visibleResponses < elementSummary.samples.length && (
-          <div className="flex justify-center py-4">
-            <Button onClick={handleLoadMore} variant="secondary" size="sm">
-              {t("common.load_more")}
-            </Button>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/DateQuestionSummary.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { TSurvey, TSurveyQuestionSummaryDate } from "@formbricks/types/surveys/types";
+import { TUserLocale } from "@formbricks/types/user";
+import { timeSince } from "@/lib/time";
+import { getContactIdentifier } from "@/lib/utils/contact";
+import { formatDateWithOrdinal } from "@/lib/utils/datetime";
+import { PersonAvatar } from "@/modules/ui/components/avatars";
+import { Button } from "@/modules/ui/components/button";
+import { QuestionSummaryHeader } from "./QuestionSummaryHeader";
+
+interface DateQuestionSummary {
+  questionSummary: TSurveyQuestionSummaryDate;
+  environmentId: string;
+  survey: TSurvey;
+  locale: TUserLocale;
+}
+
+export const DateQuestionSummary = ({
+  questionSummary,
+  environmentId,
+  survey,
+  locale,
+}: DateQuestionSummary) => {
+  const { t } = useTranslation();
+  const [visibleResponses, setVisibleResponses] = useState(10);
+
+  const handleLoadMore = () => {
+    // Increase the number of visible responses by 10, not exceeding the total number of responses
+    setVisibleResponses((prevVisibleResponses) =>
+      Math.min(prevVisibleResponses + 10, questionSummary.samples.length)
+    );
+  };
+
+  const renderResponseValue = (value: string) => {
+    const parsedDate = new Date(value);
+
+    const formattedDate = isNaN(parsedDate.getTime())
+      ? `${t("common.invalid_date")}(${value})`
+      : formatDateWithOrdinal(parsedDate);
+
+    return formattedDate;
+  };
+
+  return (
+    <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
+      <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
+      <div className="">
+        <div className="grid h-10 grid-cols-4 items-center border-y border-slate-200 bg-slate-100 text-sm font-bold text-slate-600">
+          <div className="pl-4 md:pl-6">{t("common.user")}</div>
+          <div className="col-span-2 pl-4 md:pl-6">{t("common.response")}</div>
+          <div className="px-4 md:px-6">{t("common.time")}</div>
+        </div>
+        <div className="max-h-[62vh] w-full overflow-y-auto">
+          {questionSummary.samples.slice(0, visibleResponses).map((response) => (
+            <div
+              key={response.id}
+              className="grid grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 last:border-transparent md:text-base">
+              <div className="pl-4 md:pl-6">
+                {response.contact ? (
+                  <Link
+                    className="ph-no-capture group flex items-center"
+                    href={`/environments/${environmentId}/contacts/${response.contact.id}`}>
+                    <div className="hidden md:flex">
+                      <PersonAvatar personId={response.contact.id} />
+                    </div>
+                    <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
+                      {getContactIdentifier(response.contact, response.contactAttributes)}
+                    </p>
+                  </Link>
+                ) : (
+                  <div className="group flex items-center">
+                    <div className="hidden md:flex">
+                      <PersonAvatar personId="anonymous" />
+                    </div>
+                    <p className="break-all text-slate-600 md:ml-2">{t("common.anonymous")}</p>
+                  </div>
+                )}
+              </div>
+              <div className="ph-no-capture col-span-2 whitespace-pre-wrap pl-6 font-semibold">
+                {renderResponseValue(response.value)}
+              </div>
+              <div className="px-4 text-slate-500 md:px-6">
+                {timeSince(new Date(response.updatedAt).toISOString(), locale)}
+              </div>
+            </div>
+          ))}
+        </div>
+        {visibleResponses < questionSummary.samples.length && (
+          <div className="flex justify-center py-4">
+            <Button onClick={handleLoadMore} variant="secondary" size="sm">
+              {t("common.load_more")}
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/FileUploadSummary.tsx

@@ -4,25 +4,24 @@ import { DownloadIcon, FileIcon } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { TSurvey, TSurveyElementSummaryFileUpload } from "@formbricks/types/surveys/types";
+import { TSurvey, TSurveyQuestionSummaryFileUpload } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";
 import { timeSince } from "@/lib/time";
 import { getContactIdentifier } from "@/lib/utils/contact";
 import { getOriginalFileNameFromUrl } from "@/modules/storage/utils";
 import { PersonAvatar } from "@/modules/ui/components/avatars";
 import { Button } from "@/modules/ui/components/button";
-import { EmptyState } from "@/modules/ui/components/empty-state";
+import { QuestionSummaryHeader } from "./QuestionSummaryHeader";
-import { ElementSummaryHeader } from "./ElementSummaryHeader";
 
 interface FileUploadSummaryProps {
-  elementSummary: TSurveyElementSummaryFileUpload;
+  questionSummary: TSurveyQuestionSummaryFileUpload;
   environmentId: string;
   survey: TSurvey;
   locale: TUserLocale;
 }
 
 export const FileUploadSummary = ({
-  elementSummary,
+  questionSummary,
   environmentId,
   survey,
   locale,
@@ -32,13 +31,13 @@ export const FileUploadSummary = ({
   const handleLoadMore = () => {
     // Increase the number of visible responses by 10, not exceeding the total number of responses
     setVisibleResponses((prevVisibleResponses) =>
-      Math.min(prevVisibleResponses + 10, elementSummary.files.length)
+      Math.min(prevVisibleResponses + 10, questionSummary.files.length)
     );
   };
 
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
-      <ElementSummaryHeader elementSummary={elementSummary} survey={survey} />
+      <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
       <div className="">
         <div className="grid h-10 grid-cols-4 items-center border-y border-slate-200 bg-slate-100 text-sm font-bold text-slate-600">
           <div className="pl-4 md:pl-6">{t("common.user")}</div>
@@ -46,77 +45,71 @@ export const FileUploadSummary = ({
           <div className="px-4 md:px-6">{t("common.time")}</div>
         </div>
         <div className="max-h-[62vh] w-full overflow-y-auto">
-          {elementSummary.files.length === 0 ? (
+          {questionSummary.files.slice(0, visibleResponses).map((response) => (
-            <div className="p-8">
+            <div
-              <EmptyState text={t("environments.surveys.summary.no_responses_found")} variant="simple" />
+              key={response.id}
-            </div>
+              className="grid grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 last:border-transparent md:text-base">
-          ) : (
+              <div className="pl-4 md:pl-6">
-            elementSummary.files.slice(0, visibleResponses).map((response) => (
+                {response.contact ? (
-              <div
+                  <Link
-                key={response.id}
+                    className="ph-no-capture group flex items-center"
-                className="grid grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 last:border-transparent md:text-base">
+                    href={`/environments/${environmentId}/contacts/${response.contact.id}`}>
-                <div className="pl-4 md:pl-6">
+                    <div className="hidden md:flex">
-                  {response.contact ? (
+                      <PersonAvatar personId={response.contact.id} />
-                    <Link
-                      className="ph-no-capture group flex items-center"
-                      href={`/environments/${environmentId}/contacts/${response.contact.id}`}>
-                      <div className="hidden md:flex">
-                        <PersonAvatar personId={response.contact.id} />
-                      </div>
-                      <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
-                        {getContactIdentifier(response.contact, response.contactAttributes)}
-                      </p>
-                    </Link>
-                  ) : (
-                    <div className="group flex items-center">
-                      <div className="hidden md:flex">
-                        <PersonAvatar personId="anonymous" />
-                      </div>
-                      <p className="break-all text-slate-600 md:ml-2">{t("common.anonymous")}</p>
                     </div>
-                  )}
+                    <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
-                </div>
+                      {getContactIdentifier(response.contact, response.contactAttributes)}
-
+                    </p>
-                <div className="col-span-2 grid">
+                  </Link>
-                  {Array.isArray(response.value) &&
+                ) : (
-                    (response.value.length > 0 ? (
+                  <div className="group flex items-center">
-                      response.value.map((fileUrl) => {
+                    <div className="hidden md:flex">
-                        const fileName = getOriginalFileNameFromUrl(fileUrl);
+                      <PersonAvatar personId="anonymous" />
-
+                    </div>
-                        return (
+                    <p className="break-all text-slate-600 md:ml-2">{t("common.anonymous")}</p>
-                          <div className="relative m-2 rounded-lg bg-slate-200" key={fileUrl}>
+                  </div>
-                            <a href={fileUrl} key={fileUrl} target="_blank" rel="noopener noreferrer">
+                )}
-                              <div className="absolute right-0 top-0 m-2">
-                                <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-50 hover:bg-white">
-                                  <DownloadIcon className="h-6 text-slate-500" />
-                                </div>
-                              </div>
-                            </a>
-
-                            <div className="flex flex-col items-center justify-center p-2">
-                              <FileIcon className="h-6 text-slate-500" />
-                              <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">{fileName}</p>
-                            </div>
-                          </div>
-                        );
-                      })
-                    ) : (
-                      <div className="flex w-full flex-col items-center justify-center p-2">
-                        <p className="mt-2 text-sm font-semibold text-slate-500 dark:text-slate-400">
-                          {t("common.skipped")}
-                        </p>
-                      </div>
-                    ))}
-                </div>
-
-                <div className="px-4 text-slate-500 md:px-6">
-                  {timeSince(new Date(response.updatedAt).toISOString(), locale)}
-                </div>
               </div>
-            ))
+
-          )}
+              <div className="col-span-2 grid">
+                {Array.isArray(response.value) &&
+                  (response.value.length > 0 ? (
+                    response.value.map((fileUrl) => {
+                      const fileName = getOriginalFileNameFromUrl(fileUrl);
+
+                      return (
+                        <div className="relative m-2 rounded-lg bg-slate-200" key={fileUrl}>
+                          <a href={fileUrl} key={fileUrl} target="_blank" rel="noopener noreferrer">
+                            <div className="absolute right-0 top-0 m-2">
+                              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-50 hover:bg-white">
+                                <DownloadIcon className="h-6 text-slate-500" />
+                              </div>
+                            </div>
+                          </a>
+
+                          <div className="flex flex-col items-center justify-center p-2">
+                            <FileIcon className="h-6 text-slate-500" />
+                            <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">{fileName}</p>
+                          </div>
+                        </div>
+                      );
+                    })
+                  ) : (
+                    <div className="flex w-full flex-col items-center justify-center p-2">
+                      <p className="mt-2 text-sm font-semibold text-slate-500 dark:text-slate-400">
+                        {t("common.skipped")}
+                      </p>
+                    </div>
+                  ))}
+              </div>
+
+              <div className="px-4 text-slate-500 md:px-6">
+                {timeSince(new Date(response.updatedAt).toISOString(), locale)}
+              </div>
+            </div>
+          ))}
         </div>
-        {elementSummary.files.length > 0 && visibleResponses < elementSummary.files.length && (
+        {visibleResponses < questionSummary.files.length && (
           <div className="flex justify-center py-4">
             <Button onClick={handleLoadMore} variant="secondary" size="sm">
               {t("common.load_more")}

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/HiddenFieldsSummary.tsx

@@ -4,34 +4,33 @@ import { InboxIcon, Link, MessageSquareTextIcon } from "lucide-react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { TEnvironment } from "@formbricks/types/environment";
-import { TSurveyElementSummaryHiddenFields } from "@formbricks/types/surveys/types";
+import { TSurveyQuestionSummaryHiddenFields } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";
 import { timeSince } from "@/lib/time";
 import { getContactIdentifier } from "@/lib/utils/contact";
 import { PersonAvatar } from "@/modules/ui/components/avatars";
 import { Button } from "@/modules/ui/components/button";
-import { EmptyState } from "@/modules/ui/components/empty-state";
 
 interface HiddenFieldsSummaryProps {
   environment: TEnvironment;
-  elementSummary: TSurveyElementSummaryHiddenFields;
+  questionSummary: TSurveyQuestionSummaryHiddenFields;
   locale: TUserLocale;
 }
 
-export const HiddenFieldsSummary = ({ environment, elementSummary, locale }: HiddenFieldsSummaryProps) => {
+export const HiddenFieldsSummary = ({ environment, questionSummary, locale }: HiddenFieldsSummaryProps) => {
   const [visibleResponses, setVisibleResponses] = useState(10);
   const { t } = useTranslation();
   const handleLoadMore = () => {
     // Increase the number of visible responses by 10, not exceeding the total number of responses
     setVisibleResponses((prevVisibleResponses) =>
-      Math.min(prevVisibleResponses + 10, elementSummary.samples.length)
+      Math.min(prevVisibleResponses + 10, questionSummary.samples.length)
     );
   };
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
       <div className="space-y-2 px-4 pb-5 pt-6 md:px-6">
         <div className={"align-center flex justify-between gap-4"}>
-          <h3 className="pb-1 text-lg font-semibold text-slate-900 md:text-xl">{elementSummary.id}</h3>
+          <h3 className="pb-1 text-lg font-semibold text-slate-900 md:text-xl">{questionSummary.id}</h3>
         </div>
 
         <div className="flex space-x-2 text-xs font-semibold text-slate-600 md:text-sm">
@@ -41,8 +40,8 @@ export const HiddenFieldsSummary = ({ environment, elementSummary, locale }: Hid
           </div>
           <div className="flex items-center rounded-lg bg-slate-100 p-2">
             <InboxIcon className="mr-2 h-4 w-4" />
-            {elementSummary.responseCount}{" "}
+            {questionSummary.responseCount}{" "}
-            {elementSummary.responseCount === 1 ? t("common.response") : t("common.responses")}
+            {questionSummary.responseCount === 1 ? t("common.response") : t("common.responses")}
           </div>
         </div>
       </div>
@@ -52,46 +51,40 @@ export const HiddenFieldsSummary = ({ environment, elementSummary, locale }: Hid
           <div className="col-span-2 pl-4 md:pl-6">{t("common.response")}</div>
           <div className="px-4 md:px-6">{t("common.time")}</div>
         </div>
-        {elementSummary.samples.length === 0 ? (
+        {questionSummary.samples.slice(0, visibleResponses).map((response, idx) => (
-          <div className="p-8">
+          <div
-            <EmptyState text={t("environments.surveys.summary.no_responses_found")} variant="simple" />
+            key={`${response.value}-${idx}`}
-          </div>
+            className="grid grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 md:text-base">
-        ) : (
+            <div className="pl-4 md:pl-6">
-          elementSummary.samples.slice(0, visibleResponses).map((response, idx) => (
+              {response.contact ? (
-            <div
+                <Link
-              key={`${response.value}-${idx}`}
+                  className="ph-no-capture group flex items-center"
-              className="grid grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 md:text-base">
+                  href={`/environments/${environment.id}/contacts/${response.contact.id}`}>
-              <div className="pl-4 md:pl-6">
+                  <div className="hidden md:flex">
-                {response.contact ? (
+                    <PersonAvatar personId={response.contact.id} />
-                  <Link
-                    className="ph-no-capture group flex items-center"
-                    href={`/environments/${environment.id}/contacts/${response.contact.id}`}>
-                    <div className="hidden md:flex">
-                      <PersonAvatar personId={response.contact.id} />
-                    </div>
-                    <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
-                      {getContactIdentifier(response.contact, response.contactAttributes)}
-                    </p>
-                  </Link>
-                ) : (
-                  <div className="group flex items-center">
-                    <div className="hidden md:flex">
-                      <PersonAvatar personId="anonymous" />
-                    </div>
-                    <p className="break-all text-slate-600 md:ml-2">{t("common.anonymous")}</p>
                   </div>
-                )}
+                  <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
-              </div>
+                    {getContactIdentifier(response.contact, response.contactAttributes)}
-              <div className="ph-no-capture col-span-2 whitespace-pre-wrap pl-6 font-semibold">
+                  </p>
-                {response.value}
+                </Link>
-              </div>
+              ) : (
-              <div className="px-4 text-slate-500 md:px-6">
+                <div className="group flex items-center">
-                {timeSince(new Date(response.updatedAt).toISOString(), locale)}
+                  <div className="hidden md:flex">
-              </div>
+                    <PersonAvatar personId="anonymous" />
+                  </div>
+                  <p className="break-all text-slate-600 md:ml-2">{t("common.anonymous")}</p>
+                </div>
+              )}
             </div>
-          ))
+            <div className="ph-no-capture col-span-2 whitespace-pre-wrap pl-6 font-semibold">
-        )}
+              {response.value}
-        {elementSummary.samples.length > 0 && visibleResponses < elementSummary.samples.length && (
+            </div>
+            <div className="px-4 text-slate-500 md:px-6">
+              {timeSince(new Date(response.updatedAt).toISOString(), locale)}
+            </div>
+          </div>
+        ))}
+        {visibleResponses < questionSummary.samples.length && (
           <div className="flex justify-center py-4">
             <Button onClick={handleLoadMore} variant="secondary" size="sm">
               {t("common.load_more")}

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/MatrixQuestionSummary.tsx

@@ -1,25 +1,29 @@
 "use client";
 
 import { useTranslation } from "react-i18next";
-import { type TI18nString } from "@formbricks/types/i18n";
+import {
-import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+  TI18nString,
-import { TSurvey, TSurveyElementSummaryMatrix } from "@formbricks/types/surveys/types";
+  TSurvey,
+  TSurveyQuestionId,
+  TSurveyQuestionSummaryMatrix,
+  TSurveyQuestionTypeEnum,
+} from "@formbricks/types/surveys/types";
 import { TooltipRenderer } from "@/modules/ui/components/tooltip";
-import { ElementSummaryHeader } from "./ElementSummaryHeader";
+import { QuestionSummaryHeader } from "./QuestionSummaryHeader";
 
-interface MatrixElementSummaryProps {
+interface MatrixQuestionSummaryProps {
-  elementSummary: TSurveyElementSummaryMatrix;
+  questionSummary: TSurveyQuestionSummaryMatrix;
   survey: TSurvey;
   setFilter: (
-    elementId: string,
+    questionId: TSurveyQuestionId,
     label: TI18nString,
-    elementType: TSurveyElementTypeEnum,
+    questionType: TSurveyQuestionTypeEnum,
     filterValue: string,
     filterComboBoxValue?: string | string[]
   ) => void;
 }
 
-export const MatrixElementSummary = ({ elementSummary, survey, setFilter }: MatrixElementSummaryProps) => {
+export const MatrixQuestionSummary = ({ questionSummary, survey, setFilter }: MatrixQuestionSummaryProps) => {
   const { t } = useTranslation();
   const getOpacityLevel = (percentage: number): string => {
     const parsedPercentage = percentage;
@@ -36,11 +40,13 @@ export const MatrixElementSummary = ({ elementSummary, survey, setFilter }: Matr
     return "";
   };
 
-  const columns = elementSummary.data[0] ? elementSummary.data[0].columnPercentages.map((c) => c.column) : [];
+  const columns = questionSummary.data[0]
+    ? questionSummary.data[0].columnPercentages.map((c) => c.column)
+    : [];
 
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
-      <ElementSummaryHeader elementSummary={elementSummary} survey={survey} />
+      <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
       <div className="overflow-x-auto p-6">
         {/* Summary Table  */}
         <table className="mx-auto border-collapse cursor-default text-left">
@@ -57,7 +63,7 @@ export const MatrixElementSummary = ({ elementSummary, survey, setFilter }: Matr
             </tr>
           </thead>
           <tbody>
-            {elementSummary.data.map(({ rowLabel, columnPercentages }, rowIndex) => (
+            {questionSummary.data.map(({ rowLabel, columnPercentages }, rowIndex) => (
               <tr key={rowLabel}>
                 <td className="max-w-60 overflow-hidden text-ellipsis whitespace-nowrap p-4">
                   <TooltipRenderer tooltipContent={getTooltipContent(rowLabel)} shouldRender={true}>
@@ -73,16 +79,16 @@ export const MatrixElementSummary = ({ elementSummary, survey, setFilter }: Matr
                       tooltipContent={getTooltipContent(
                         undefined,
                         percentage,
-                        elementSummary.data[rowIndex].totalResponsesForRow
+                        questionSummary.data[rowIndex].totalResponsesForRow
                       )}>
                       <button
                         style={{ backgroundColor: `rgba(0,196,184,${getOpacityLevel(percentage)})` }}
                         className="hover:outline-brand-dark m-1 flex h-full w-40 cursor-pointer items-center justify-center rounded p-4 text-sm text-slate-950 hover:outline"
                         onClick={() =>
                           setFilter(
-                            elementSummary.element.id,
+                            questionSummary.question.id,
-                            elementSummary.element.headline,
+                            questionSummary.question.headline,
-                            elementSummary.element.type,
+                            questionSummary.question.type,
                             rowLabel,
                             column
                           )

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/MultipleChoiceSummary.tsx

@@ -4,9 +4,14 @@ import { InboxIcon } from "lucide-react";
 import Link from "next/link";
 import { Fragment, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { TI18nString } from "@formbricks/types/i18n";
+import {
-import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+  TI18nString,
-import { TSurvey, TSurveyElementSummaryMultipleChoice, TSurveyType } from "@formbricks/types/surveys/types";
+  TSurvey,
+  TSurveyQuestionId,
+  TSurveyQuestionSummaryMultipleChoice,
+  TSurveyQuestionTypeEnum,
+  TSurveyType,
+} from "@formbricks/types/surveys/types";
 import { getChoiceIdByValue } from "@/lib/response/utils";
 import { getContactIdentifier } from "@/lib/utils/contact";
 import { PersonAvatar } from "@/modules/ui/components/avatars";
@@ -14,24 +19,24 @@ import { Button } from "@/modules/ui/components/button";
 import { IdBadge } from "@/modules/ui/components/id-badge";
 import { ProgressBar } from "@/modules/ui/components/progress-bar";
 import { convertFloatToNDecimal } from "../lib/utils";
-import { ElementSummaryHeader } from "./ElementSummaryHeader";
+import { QuestionSummaryHeader } from "./QuestionSummaryHeader";
 
 interface MultipleChoiceSummaryProps {
-  elementSummary: TSurveyElementSummaryMultipleChoice;
+  questionSummary: TSurveyQuestionSummaryMultipleChoice;
   environmentId: string;
   surveyType: TSurveyType;
   survey: TSurvey;
   setFilter: (
-    elementId: string,
+    questionId: TSurveyQuestionId,
     label: TI18nString,
-    elementType: TSurveyElementTypeEnum,
+    questionType: TSurveyQuestionTypeEnum,
     filterValue: string,
     filterComboBoxValue?: string | string[]
   ) => void;
 }
 
 export const MultipleChoiceSummary = ({
-  elementSummary,
+  questionSummary,
   environmentId,
   surveyType,
   survey,
@@ -39,9 +44,9 @@ export const MultipleChoiceSummary = ({
 }: MultipleChoiceSummaryProps) => {
   const { t } = useTranslation();
   const [visibleOtherResponses, setVisibleOtherResponses] = useState(10);
-  const otherValue = elementSummary.element.choices.find((choice) => choice.id === "other")?.label.default;
+  const otherValue = questionSummary.question.choices.find((choice) => choice.id === "other")?.label.default;
   // sort by count and transform to array
-  const results = Object.values(elementSummary.choices).sort((a, b) => {
+  const results = Object.values(questionSummary.choices).sort((a, b) => {
     const aHasOthers = (a.others?.length ?? 0) > 0;
     const bHasOthers = (b.others?.length ?? 0) > 0;
 
@@ -68,111 +73,108 @@ export const MultipleChoiceSummary = ({
 
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
-      <ElementSummaryHeader
+      <QuestionSummaryHeader
-        elementSummary={elementSummary}
+        questionSummary={questionSummary}
         survey={survey}
         additionalInfo={
-          elementSummary.type === "multipleChoiceMulti" ? (
+          questionSummary.type === "multipleChoiceMulti" ? (
             <div className="flex items-center rounded-lg bg-slate-100 p-2">
               <InboxIcon className="mr-2 h-4 w-4" />
-              {`${elementSummary.selectionCount} ${t("common.selections")}`}
+              {`${questionSummary.selectionCount} ${t("common.selections")}`}
             </div>
           ) : undefined
         }
       />
-      <div className="px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
+      <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
-        <div className="space-y-5">
+        {results.map((result) => {
-          {results.map((result) => {
+          const choiceId = getChoiceIdByValue(result.value, questionSummary.question);
-            const choiceId = getChoiceIdByValue(result.value, elementSummary.element);
+          return (
-            return (
+            <Fragment key={result.value}>
-              <Fragment key={result.value}>
+              <button
-                <button
+                type="button"
-                  type="button"
+                className="group w-full cursor-pointer"
-                  className="group w-full cursor-pointer"
+                onClick={() =>
-                  onClick={() =>
+                  setFilter(
-                    setFilter(
+                    questionSummary.question.id,
-                      elementSummary.element.id,
+                    questionSummary.question.headline,
-                      elementSummary.element.headline,
+                    questionSummary.question.type,
-                      elementSummary.element.type,
+                    questionSummary.type === "multipleChoiceSingle" || otherValue === result.value
-                      elementSummary.type === TSurveyElementTypeEnum.MultipleChoiceSingle ||
+                      ? t("environments.surveys.summary.includes_either")
-                        otherValue === result.value
+                      : t("environments.surveys.summary.includes_all"),
-                        ? t("environments.surveys.summary.includes_either")
+                    [result.value]
-                        : t("environments.surveys.summary.includes_all"),
+                  )
-                      [result.value]
+                }>
-                    )
+                <div className="text flex flex-col justify-between px-2 pb-2 sm:flex-row">
-                  }>
+                  <div className="mr-8 flex w-full justify-between space-x-2 sm:justify-normal">
-                  <div className="text flex flex-col justify-between px-2 pb-2 sm:flex-row">
+                    <p className="font-semibold text-slate-700 underline-offset-4 group-hover:underline">
-                    <div className="mr-8 flex w-full justify-between space-x-2 sm:justify-normal">
+                      {result.value}
-                      <p className="font-semibold text-slate-700 underline-offset-4 group-hover:underline">
+                    </p>
-                        {result.value}
+                    {choiceId && <IdBadge id={choiceId} />}
-                      </p>
-                      {choiceId && <IdBadge id={choiceId} />}
-                    </div>
-                    <div className="flex w-full space-x-2">
-                      <p className="flex w-full pt-1 text-slate-600 sm:items-end sm:justify-end sm:pt-0">
-                        {result.count} {result.count === 1 ? t("common.selection") : t("common.selections")}
-                      </p>
-                      <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
-                        {convertFloatToNDecimal(result.percentage, 2)}%
-                      </p>
-                    </div>
                   </div>
-                  <div className="group-hover:opacity-80">
+                  <div className="flex w-full space-x-2">
-                    <ProgressBar barColor="bg-brand-dark" progress={result.percentage / 100} />
+                    <p className="flex w-full pt-1 text-slate-600 sm:items-end sm:justify-end sm:pt-0">
+                      {result.count} {result.count === 1 ? t("common.selection") : t("common.selections")}
+                    </p>
+                    <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
+                      {convertFloatToNDecimal(result.percentage, 2)}%
+                    </p>
                   </div>
-                </button>
+                </div>
-                {result.others && result.others.length > 0 && (
+                <div className="group-hover:opacity-80">
-                  <div className="mt-4 rounded-lg border border-slate-200">
+                  <ProgressBar barColor="bg-brand-dark" progress={result.percentage / 100} />
-                    <div className="grid h-12 grid-cols-2 content-center rounded-t-lg bg-slate-100 text-left text-sm font-semibold text-slate-900">
+                </div>
-                      <div className="col-span-1 pl-6">
+              </button>
-                        {t("environments.surveys.summary.other_values_found")}
+              {result.others && result.others.length > 0 && (
-                      </div>
+                <div className="mt-4 rounded-lg border border-slate-200">
-                      <div className="col-span-1 pl-6">{surveyType === "app" && t("common.user")}</div>
+                  <div className="grid h-12 grid-cols-2 content-center rounded-t-lg bg-slate-100 text-left text-sm font-semibold text-slate-900">
+                    <div className="col-span-1 pl-6">
+                      {t("environments.surveys.summary.other_values_found")}
                     </div>
-                    {result.others
+                    <div className="col-span-1 pl-6">{surveyType === "app" && t("common.user")}</div>
-                      .filter((otherValue) => otherValue.value !== "")
+                  </div>
-                      .slice(0, visibleOtherResponses)
+                  {result.others
-                      .map((otherValue, idx) => (
+                    .filter((otherValue) => otherValue.value !== "")
-                        <div key={`${idx}-${otherValue}`} dir="auto">
+                    .slice(0, visibleOtherResponses)
-                          {surveyType === "link" && (
+                    .map((otherValue, idx) => (
-                            <div className="ph-no-capture col-span-1 m-2 flex h-10 items-center rounded-lg pl-4 text-sm font-medium text-slate-900">
+                      <div key={`${idx}-${otherValue}`} dir="auto">
+                        {surveyType === "link" && (
+                          <div className="ph-no-capture col-span-1 m-2 flex h-10 items-center rounded-lg pl-4 text-sm font-medium text-slate-900">
+                            <span>{otherValue.value}</span>
+                          </div>
+                        )}
+                        {surveyType === "app" && otherValue.contact && (
+                          <Link
+                            href={
+                              otherValue.contact.id
+                                ? `/environments/${environmentId}/contacts/${otherValue.contact.id}`
+                                : { pathname: null }
+                            }
+                            className="m-2 grid h-16 grid-cols-2 items-center rounded-lg text-sm hover:bg-slate-100">
+                            <div className="ph-no-capture col-span-1 pl-4 font-medium text-slate-900">
                               <span>{otherValue.value}</span>
                             </div>
-                          )}
+                            <div className="ph-no-capture col-span-1 flex items-center space-x-4 pl-6 font-medium text-slate-900">
-                          {surveyType === "app" && otherValue.contact && (
+                              {otherValue.contact.id && <PersonAvatar personId={otherValue.contact.id} />}
-                            <Link
+                              <span>
-                              href={
+                                {getContactIdentifier(otherValue.contact, otherValue.contactAttributes)}
-                                otherValue.contact.id
+                              </span>
-                                  ? `/environments/${environmentId}/contacts/${otherValue.contact.id}`
+                            </div>
-                                  : { pathname: null }
+                          </Link>
-                              }
+                        )}
-                              className="m-2 grid h-16 grid-cols-2 items-center rounded-lg text-sm hover:bg-slate-100">
-                              <div className="ph-no-capture col-span-1 pl-4 font-medium text-slate-900">
-                                <span>{otherValue.value}</span>
-                              </div>
-                              <div className="ph-no-capture col-span-1 flex items-center space-x-4 pl-6 font-medium text-slate-900">
-                                {otherValue.contact.id && <PersonAvatar personId={otherValue.contact.id} />}
-                                <span>
-                                  {getContactIdentifier(otherValue.contact, otherValue.contactAttributes)}
-                                </span>
-                              </div>
-                            </Link>
-                          )}
-                        </div>
-                      ))}
-                    {visibleOtherResponses < result.others.length && (
-                      <div className="flex justify-center py-4">
-                        <Button onClick={handleLoadMore} variant="secondary" size="sm">
-                          {t("common.load_more")}
-                        </Button>
                       </div>
-                    )}
+                    ))}
-                  </div>
+                  {visibleOtherResponses < result.others.length && (
-                )}
+                    <div className="flex justify-center py-4">
-              </Fragment>
+                      <Button onClick={handleLoadMore} variant="secondary" size="sm">
-            );
+                        {t("common.load_more")}
-          })}
+                      </Button>
-        </div>
+                    </div>
+                  )}
+                </div>
+              )}
+            </Fragment>
+          );
+        })}
       </div>
     </div>
   );

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/NPSSummary.tsx

@@ -3,24 +3,28 @@
 import { BarChart, BarChartHorizontal } from "lucide-react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { type TI18nString } from "@formbricks/types/i18n";
+import {
-import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+  TI18nString,
-import { TSurvey, TSurveyElementSummaryNps } from "@formbricks/types/surveys/types";
+  TSurvey,
+  TSurveyQuestionId,
+  TSurveyQuestionSummaryNps,
+  TSurveyQuestionTypeEnum,
+} from "@formbricks/types/surveys/types";
 import { HalfCircle, ProgressBar } from "@/modules/ui/components/progress-bar";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/modules/ui/components/tabs";
 import { TooltipProvider } from "@/modules/ui/components/tooltip";
 import { convertFloatToNDecimal } from "../lib/utils";
 import { ClickableBarSegment } from "./ClickableBarSegment";
-import { ElementSummaryHeader } from "./ElementSummaryHeader";
+import { QuestionSummaryHeader } from "./QuestionSummaryHeader";
 import { SatisfactionIndicator } from "./SatisfactionIndicator";
 
 interface NPSSummaryProps {
-  elementSummary: TSurveyElementSummaryNps;
+  questionSummary: TSurveyQuestionSummaryNps;
   survey: TSurvey;
   setFilter: (
-    elementId: string,
+    questionId: TSurveyQuestionId,
     label: TI18nString,
-    elementType: TSurveyElementTypeEnum,
+    questionType: TSurveyQuestionTypeEnum,
     filterValue: string,
     filterComboBoxValue?: string | string[]
   ) => void;
@@ -36,7 +40,7 @@ const calculateNPSOpacity = (rating: number): number => {
   return 0.8 + ((rating - 8) / 2) * 0.2;
 };
 
-export const NPSSummary = ({ elementSummary, survey, setFilter }: NPSSummaryProps) => {
+export const NPSSummary = ({ questionSummary, survey, setFilter }: NPSSummaryProps) => {
   const { t } = useTranslation();
   const [activeTab, setActiveTab] = useState<"aggregated" | "individual">("aggregated");
 
@@ -64,9 +68,9 @@ export const NPSSummary = ({ elementSummary, survey, setFilter }: NPSSummaryProp
 
     if (filter) {
       setFilter(
-        elementSummary.element.id,
+        questionSummary.question.id,
-        elementSummary.element.headline,
+        questionSummary.question.headline,
-        elementSummary.element.type,
+        questionSummary.question.type,
         filter.comparison,
         filter.values
       );
@@ -75,15 +79,15 @@ export const NPSSummary = ({ elementSummary, survey, setFilter }: NPSSummaryProp
 
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
-      <ElementSummaryHeader
+      <QuestionSummaryHeader
-        elementSummary={elementSummary}
+        questionSummary={questionSummary}
         survey={survey}
         additionalInfo={
           <div className="flex items-center space-x-2 rounded-lg bg-slate-100 p-2">
-            <SatisfactionIndicator percentage={elementSummary.promoters.percentage} />
+            <SatisfactionIndicator percentage={questionSummary.promoters.percentage} />
             <div>
               {t("environments.surveys.summary.promoters")}:{" "}
-              {convertFloatToNDecimal(elementSummary.promoters.percentage, 2)}%
+              {convertFloatToNDecimal(questionSummary.promoters.percentage, 2)}%
             </div>
           </div>
         }
@@ -102,45 +106,43 @@ export const NPSSummary = ({ elementSummary, survey, setFilter }: NPSSummaryProp
         </div>
 
         <TabsContent value="aggregated" className="mt-4">
-          <div className="px-4 pb-6 pt-4 md:px-6">
+          <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
-            <div className="space-y-5 text-sm md:text-base">
+            {["promoters", "passives", "detractors", "dismissed"].map((group) => (
-              {["promoters", "passives", "detractors", "dismissed"].map((group) => (
+              <button
-                <button
+                className="w-full cursor-pointer hover:opacity-80"
-                  className="w-full cursor-pointer hover:opacity-80"
+                key={group}
-                  key={group}
+                onClick={() => applyFilter(group)}>
-                  onClick={() => applyFilter(group)}>
+                <div
-                  <div
+                  className={`mb-2 flex justify-between ${group === "dismissed" ? "mb-2 border-t bg-white pt-4 text-sm md:text-base" : ""}`}>
-                    className={`mb-2 flex justify-between ${group === "dismissed" ? "mb-2 border-t bg-white pt-4 text-sm md:text-base" : ""}`}>
+                  <div className="mr-8 flex space-x-1">
-                    <div className="mr-8 flex space-x-1">
+                    <p
-                      <p
+                      className={`font-semibold capitalize text-slate-700 ${group === "dismissed" ? "" : "text-slate-700"}`}>
-                        className={`font-semibold capitalize text-slate-700 ${group === "dismissed" ? "" : "text-slate-700"}`}>
+                      {group}
-                        {group}
-                      </p>
-                      <div>
-                        <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
-                          {convertFloatToNDecimal(elementSummary[group]?.percentage, 2)}%
-                        </p>
-                      </div>
-                    </div>
-                    <p className="flex w-32 items-end justify-end text-slate-600">
-                      {elementSummary[group]?.count}{" "}
-                      {elementSummary[group]?.count === 1 ? t("common.response") : t("common.responses")}
                     </p>
+                    <div>
+                      <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
+                        {convertFloatToNDecimal(questionSummary[group]?.percentage, 2)}%
+                      </p>
+                    </div>
                   </div>
-                  <ProgressBar
+                  <p className="flex w-32 items-end justify-end text-slate-600">
-                    barColor={group === "dismissed" ? "bg-slate-600" : "bg-brand-dark"}
+                    {questionSummary[group]?.count}{" "}
-                    progress={elementSummary[group]?.percentage / 100}
+                    {questionSummary[group]?.count === 1 ? t("common.response") : t("common.responses")}
-                  />
+                  </p>
-                </button>
+                </div>
-              ))}
+                <ProgressBar
-            </div>
+                  barColor={group === "dismissed" ? "bg-slate-600" : "bg-brand-dark"}
+                  progress={questionSummary[group]?.percentage / 100}
+                />
+              </button>
+            ))}
           </div>
         </TabsContent>
 
         <TabsContent value="individual" className="mt-4">
           <TooltipProvider delayDuration={200}>
             <div className="grid grid-cols-11 gap-2 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
-              {elementSummary.choices.map((choice) => {
+              {questionSummary.choices.map((choice) => {
                 const opacity = calculateNPSOpacity(choice.rating);
 
                 return (
@@ -149,9 +151,9 @@ export const NPSSummary = ({ elementSummary, survey, setFilter }: NPSSummaryProp
                     className="group flex cursor-pointer flex-col items-center"
                     onClick={() =>
                       setFilter(
-                        elementSummary.element.id,
+                        questionSummary.question.id,
-                        elementSummary.element.headline,
+                        questionSummary.question.headline,
-                        elementSummary.element.type,
+                        questionSummary.question.type,
                         t("environments.surveys.summary.is_equal_to"),
                         choice.rating.toString()
                       )
@@ -183,7 +185,7 @@ export const NPSSummary = ({ elementSummary, survey, setFilter }: NPSSummaryProp
       </Tabs>
 
       <div className="flex justify-center pb-4 pt-4">
-        <HalfCircle value={elementSummary.score} />
+        <HalfCircle value={questionSummary.score} />
       </div>
     </div>
   );

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/OpenTextSummary.tsx

@@ -3,98 +3,91 @@
 import Link from "next/link";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { TSurvey, TSurveyElementSummaryOpenText } from "@formbricks/types/surveys/types";
+import { TSurvey, TSurveyQuestionSummaryOpenText } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";
 import { timeSince } from "@/lib/time";
 import { getContactIdentifier } from "@/lib/utils/contact";
 import { renderHyperlinkedContent } from "@/modules/analysis/utils";
 import { PersonAvatar } from "@/modules/ui/components/avatars";
 import { Button } from "@/modules/ui/components/button";
-import { EmptyState } from "@/modules/ui/components/empty-state";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/modules/ui/components/table";
-import { ElementSummaryHeader } from "./ElementSummaryHeader";
+import { QuestionSummaryHeader } from "./QuestionSummaryHeader";
 
 interface OpenTextSummaryProps {
-  elementSummary: TSurveyElementSummaryOpenText;
+  questionSummary: TSurveyQuestionSummaryOpenText;
   environmentId: string;
   survey: TSurvey;
   locale: TUserLocale;
 }
 
-export const OpenTextSummary = ({ elementSummary, environmentId, survey, locale }: OpenTextSummaryProps) => {
+export const OpenTextSummary = ({ questionSummary, environmentId, survey, locale }: OpenTextSummaryProps) => {
   const { t } = useTranslation();
   const [visibleResponses, setVisibleResponses] = useState(10);
 
   const handleLoadMore = () => {
     // Increase the number of visible responses by 10, not exceeding the total number of responses
     setVisibleResponses((prevVisibleResponses) =>
-      Math.min(prevVisibleResponses + 10, elementSummary.samples.length)
+      Math.min(prevVisibleResponses + 10, questionSummary.samples.length)
     );
   };
 
   return (
     <div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
-      <ElementSummaryHeader elementSummary={elementSummary} survey={survey} />
+      <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
       <div className="border-t border-slate-200"></div>
-      {elementSummary.samples.length === 0 ? (
+      <div className="max-h-[40vh] overflow-y-auto">
-        <div className="p-8">
+        <Table>
-          <EmptyState text={t("environments.surveys.summary.no_responses_found")} variant="simple" />
+          <TableHeader className="bg-slate-100">
-        </div>
+            <TableRow>
-      ) : (
+              <TableHead>{t("common.user")}</TableHead>
-        <div className="max-h-[40vh] overflow-y-auto">
+              <TableHead>{t("common.response")}</TableHead>
-          <Table>
+              <TableHead>{t("common.time")}</TableHead>
-            <TableHeader className="bg-slate-100">
+            </TableRow>
-              <TableRow>
+          </TableHeader>
-                <TableHead className="w-1/4">{t("common.user")}</TableHead>
+          <TableBody>
-                <TableHead className="w-2/4">{t("common.response")}</TableHead>
+            {questionSummary.samples.slice(0, visibleResponses).map((response) => (
-                <TableHead className="w-1/4">{t("common.time")}</TableHead>
+              <TableRow key={response.id}>
-              </TableRow>
+                <TableCell>
-            </TableHeader>
+                  {response.contact ? (
-            <TableBody>
+                    <Link
-              {elementSummary.samples.slice(0, visibleResponses).map((response) => (
+                      className="ph-no-capture group flex items-center"
-                <TableRow key={response.id}>
+                      href={`/environments/${environmentId}/contacts/${response.contact.id}`}>
-                  <TableCell className="w-1/4">
+                      <div className="hidden md:flex">
-                    {response.contact ? (
+                        <PersonAvatar personId={response.contact.id} />
-                      <Link
-                        className="ph-no-capture group flex items-center"
-                        href={`/environments/${environmentId}/contacts/${response.contact.id}`}>
-                        <div className="hidden md:flex">
-                          <PersonAvatar personId={response.contact.id} />
-                        </div>
-                        <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
-                          {getContactIdentifier(response.contact, response.contactAttributes)}
-                        </p>
-                      </Link>
-                    ) : (
-                      <div className="group flex items-center">
-                        <div className="hidden md:flex">
-                          <PersonAvatar personId="anonymous" />
-                        </div>
-                        <p className="break-normal text-slate-600 md:ml-2">{t("common.anonymous")}</p>
                       </div>
-                    )}
+                      <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
-                  </TableCell>
+                        {getContactIdentifier(response.contact, response.contactAttributes)}
-                  <TableCell className="w-2/4 font-medium">
+                      </p>
-                    {typeof response.value === "string"
+                    </Link>
-                      ? renderHyperlinkedContent(response.value)
+                  ) : (
-                      : response.value}
+                    <div className="group flex items-center">
-                  </TableCell>
+                      <div className="hidden md:flex">
-                  <TableCell className="w-1/4">
+                        <PersonAvatar personId="anonymous" />
-                    {timeSince(new Date(response.updatedAt).toISOString(), locale)}
+                      </div>
-                  </TableCell>
+                      <p className="break-normal text-slate-600 md:ml-2">{t("common.anonymous")}</p>
-                </TableRow>
+                    </div>
-              ))}
+                  )}
-            </TableBody>
+                </TableCell>
-          </Table>
+                <TableCell className="font-medium">
-          {visibleResponses < elementSummary.samples.length && (
+                  {typeof response.value === "string"
-            <div className="flex justify-center py-4">
+                    ? renderHyperlinkedContent(response.value)
-              <Button onClick={handleLoadMore} variant="secondary" size="sm">
+                    : response.value}
-                {t("common.load_more")}
+                </TableCell>
-              </Button>
+                <TableCell width={120}>
-            </div>
+                  {timeSince(new Date(response.updatedAt).toISOString(), locale)}
-          )}
+                </TableCell>
-        </div>
+              </TableRow>
-      )}
+            ))}
+          </TableBody>
+        </Table>
+        {visibleResponses < questionSummary.samples.length && (
+          <div className="flex justify-center py-4">
+            <Button onClick={handleLoadMore} variant="secondary" size="sm">
+              {t("common.load_more")}
+            </Button>
+          </div>
+        )}
+      </div>
     </div>
   );
 };

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/PictureChoiceSummary.tsx

@@ -3,48 +3,52 @@
 import { InboxIcon } from "lucide-react";
 import Image from "next/image";
 import { useTranslation } from "react-i18next";
-import { type TI18nString } from "@formbricks/types/i18n";
+import {
-import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+  TI18nString,
-import { TSurvey, TSurveyElementSummaryPictureSelection } from "@formbricks/types/surveys/types";
+  TSurvey,
+  TSurveyQuestionId,
+  TSurveyQuestionSummaryPictureSelection,
+  TSurveyQuestionTypeEnum,
+} from "@formbricks/types/surveys/types";
 import { getChoiceIdByValue } from "@/lib/response/utils";
 import { IdBadge } from "@/modules/ui/components/id-badge";
 import { ProgressBar } from "@/modules/ui/components/progress-bar";
 import { convertFloatToNDecimal } from "../lib/utils";
-import { ElementSummaryHeader } from "./ElementSummaryHeader";
+import { QuestionSummaryHeader } from "./QuestionSummaryHeader";
 
 interface PictureChoiceSummaryProps {
-  elementSummary: TSurveyElementSummaryPictureSelection;
+  questionSummary: TSurveyQuestionSummaryPictureSelection;
   survey: TSurvey;
   setFilter: (
-    elementId: string,
+    questionId: TSurveyQuestionId,
     label: TI18nString,
-    elementType: TSurveyElementTypeEnum,
+    questionType: TSurveyQuestionTypeEnum,
     filterValue: string,
     filterComboBoxValue?: string | string[]
   ) => void;
 }
 
-export const PictureChoiceSummary = ({ elementSummary, survey, setFilter }: PictureChoiceSummaryProps) => {
+export const PictureChoiceSummary = ({ questionSummary, survey, setFilter }: PictureChoiceSummaryProps) => {
-  const results = elementSummary.choices;
+  const results = questionSummary.choices;
   const { t } = useTranslation();
 
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
-      <ElementSummaryHeader
+      <QuestionSummaryHeader
-        elementSummary={elementSummary}
+        questionSummary={questionSummary}
         survey={survey}
         additionalInfo={
-          elementSummary.element.allowMulti ? (
+          questionSummary.question.allowMulti ? (
             <div className="flex items-center rounded-lg bg-slate-100 p-2">
               <InboxIcon className="mr-2 h-4 w-4" />
-              {`${elementSummary.selectionCount} ${t("common.selections")}`}
+              {`${questionSummary.selectionCount} ${t("common.selections")}`}
             </div>
           ) : undefined
         }
       />
       <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
         {results.map((result, index) => {
-          const choiceId = getChoiceIdByValue(result.imageUrl, elementSummary.element);
+          const choiceId = getChoiceIdByValue(result.imageUrl, questionSummary.question);
           return (
             <button
               type="button"
@@ -52,9 +56,9 @@ export const PictureChoiceSummary = ({ elementSummary, survey, setFilter }: Pict
               key={result.id}
               onClick={() =>
                 setFilter(
-                  elementSummary.element.id,
+                  questionSummary.question.id,
-                  elementSummary.element.headline,
+                  questionSummary.question.headline,
-                  elementSummary.element.type,
+                  questionSummary.question.type,
                   t("environments.surveys.summary.includes_all"),
                   [`${t("environments.surveys.edit.picture_idx", { idx: index + 1 })}`]
                 )

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/QuestionSummaryHeader.tsx

@@ -3,28 +3,28 @@
 import { InboxIcon } from "lucide-react";
 import type { JSX } from "react";
 import { useTranslation } from "react-i18next";
-import { TSurvey, TSurveyElementSummary } from "@formbricks/types/surveys/types";
+import { TSurvey, TSurveyQuestionSummary } from "@formbricks/types/surveys/types";
 import { getTextContent } from "@formbricks/types/surveys/validation";
 import { recallToHeadline } from "@/lib/utils/recall";
 import { formatTextWithSlashes } from "@/modules/survey/editor/lib/utils";
-import { getElementTypes } from "@/modules/survey/lib/elements";
+import { getQuestionTypes } from "@/modules/survey/lib/questions";
 import { IdBadge } from "@/modules/ui/components/id-badge";
 
 interface HeadProps {
-  elementSummary: TSurveyElementSummary;
+  questionSummary: TSurveyQuestionSummary;
   showResponses?: boolean;
   additionalInfo?: JSX.Element;
   survey: TSurvey;
 }
 
-export const ElementSummaryHeader = ({
+export const QuestionSummaryHeader = ({
-  elementSummary,
+  questionSummary,
   additionalInfo,
   showResponses = true,
   survey,
 }: HeadProps) => {
   const { t } = useTranslation();
-  const elementType = getElementTypes(t).find((type) => type.id === elementSummary.element.type);
+  const questionType = getQuestionTypes(t).find((type) => type.id === questionSummary.question.type);
 
   return (
     <div className="space-y-2 px-4 pb-5 pt-6 md:px-6">
@@ -32,7 +32,7 @@ export const ElementSummaryHeader = ({
         <h3 className="pb-1 text-lg font-semibold text-slate-900 md:text-xl">
           {formatTextWithSlashes(
             getTextContent(
-              recallToHeadline(elementSummary.element.headline, survey, true, "default")["default"]
+              recallToHeadline(questionSummary.question.headline, survey, true, "default")["default"]
             ),
             "@",
             ["text-lg"]
@@ -41,23 +41,23 @@ export const ElementSummaryHeader = ({
       </div>
       <div className="flex space-x-2 text-xs font-semibold text-slate-600 md:text-sm">
         <div className="flex items-center rounded-lg bg-slate-100 p-2">
-          {elementType && <elementType.icon className="mr-2 h-4 w-4" />}
+          {questionType && <questionType.icon className="mr-2 h-4 w-4" />}
-          {elementType ? elementType.label : t("environments.surveys.summary.unknown_question_type")}{" "}
+          {questionType ? questionType.label : t("environments.surveys.summary.unknown_question_type")}{" "}
           {t("common.question")}
         </div>
         {showResponses && (
           <div className="flex items-center rounded-lg bg-slate-100 p-2">
             <InboxIcon className="mr-2 h-4 w-4" />
-            {`${elementSummary.responseCount} ${t("common.responses")}`}
+            {`${questionSummary.responseCount} ${t("common.responses")}`}
           </div>
         )}
         {additionalInfo}
-        {!elementSummary.element.required && (
+        {!questionSummary.question.required && (
           <div className="flex items-center rounded-lg bg-slate-100 p-2">
             {t("environments.surveys.edit.optional")}
           </div>
         )}
-        <IdBadge id={elementSummary.element.id} />
+        <IdBadge id={questionSummary.question.id} />
       </div>
     </div>
   );

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/RankingSummary.tsx

@@ -1,28 +1,28 @@
 import { useTranslation } from "react-i18next";
-import { TSurvey, TSurveyElementSummaryRanking } from "@formbricks/types/surveys/types";
+import { TSurvey, TSurveyQuestionSummaryRanking } from "@formbricks/types/surveys/types";
 import { getChoiceIdByValue } from "@/lib/response/utils";
 import { IdBadge } from "@/modules/ui/components/id-badge";
 import { convertFloatToNDecimal } from "../lib/utils";
-import { ElementSummaryHeader } from "./ElementSummaryHeader";
+import { QuestionSummaryHeader } from "./QuestionSummaryHeader";
 
 interface RankingSummaryProps {
-  elementSummary: TSurveyElementSummaryRanking;
+  questionSummary: TSurveyQuestionSummaryRanking;
   survey: TSurvey;
 }
 
-export const RankingSummary = ({ elementSummary, survey }: RankingSummaryProps) => {
+export const RankingSummary = ({ questionSummary, survey }: RankingSummaryProps) => {
   // sort by count and transform to array
   const { t } = useTranslation();
-  const results = Object.values(elementSummary.choices).sort((a, b) => {
+  const results = Object.values(questionSummary.choices).sort((a, b) => {
     return a.avgRanking - b.avgRanking; // Sort by count
   });
 
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
-      <ElementSummaryHeader elementSummary={elementSummary} survey={survey} />
+      <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
       <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
         {results.map((result, resultsIdx) => {
-          const choiceId = getChoiceIdByValue(result.value, elementSummary.element);
+          const choiceId = getChoiceIdByValue(result.value, questionSummary.question);
           return (
             <div key={result.value} className="group cursor-pointer">
               <div className="text flex flex-col justify-between px-2 pb-2 sm:flex-row">

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/RatingSummary.tsx

@@ -3,61 +3,65 @@
 import { BarChart, BarChartHorizontal, CircleSlash2, SmileIcon, StarIcon } from "lucide-react";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { type TI18nString } from "@formbricks/types/i18n";
+import {
-import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+  TI18nString,
-import { TSurvey, TSurveyElementSummaryRating } from "@formbricks/types/surveys/types";
+  TSurvey,
+  TSurveyQuestionId,
+  TSurveyQuestionSummaryRating,
+  TSurveyQuestionTypeEnum,
+} from "@formbricks/types/surveys/types";
 import { convertFloatToNDecimal } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/lib/utils";
-import { EmptyState } from "@/modules/ui/components/empty-state";
 import { ProgressBar } from "@/modules/ui/components/progress-bar";
 import { RatingResponse } from "@/modules/ui/components/rating-response";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/modules/ui/components/tabs";
 import { TooltipProvider } from "@/modules/ui/components/tooltip";
 import { ClickableBarSegment } from "./ClickableBarSegment";
-import { ElementSummaryHeader } from "./ElementSummaryHeader";
+import { QuestionSummaryHeader } from "./QuestionSummaryHeader";
 import { RatingScaleLegend } from "./RatingScaleLegend";
 import { SatisfactionIndicator } from "./SatisfactionIndicator";
 
 interface RatingSummaryProps {
-  elementSummary: TSurveyElementSummaryRating;
+  questionSummary: TSurveyQuestionSummaryRating;
   survey: TSurvey;
   setFilter: (
-    elementId: string,
+    questionId: TSurveyQuestionId,
     label: TI18nString,
-    elementType: TSurveyElementTypeEnum,
+    questionType: TSurveyQuestionTypeEnum,
     filterValue: string,
     filterComboBoxValue?: string | string[]
   ) => void;
 }
 
-export const RatingSummary = ({ elementSummary, survey, setFilter }: RatingSummaryProps) => {
+export const RatingSummary = ({ questionSummary, survey, setFilter }: RatingSummaryProps) => {
   const { t } = useTranslation();
   const [activeTab, setActiveTab] = useState<"aggregated" | "individual">("aggregated");
 
   const getIconBasedOnScale = useMemo(() => {
-    const scale = elementSummary.element.scale;
+    const scale = questionSummary.question.scale;
     if (scale === "number") return <CircleSlash2 className="h-4 w-4" />;
     else if (scale === "star") return <StarIcon fill="rgb(250 204 21)" className="h-4 w-4 text-yellow-400" />;
     else if (scale === "smiley") return <SmileIcon className="h-4 w-4" />;
-  }, [elementSummary]);
+  }, [questionSummary]);
 
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
-      <ElementSummaryHeader
+      <QuestionSummaryHeader
-        elementSummary={elementSummary}
+        questionSummary={questionSummary}
         survey={survey}
         additionalInfo={
           <div className="flex items-center space-x-2">
             <div className="flex items-center space-x-2 rounded-lg bg-slate-100 p-2">
               {getIconBasedOnScale}
               <div>
-                {t("environments.surveys.summary.overall")}: {elementSummary.average.toFixed(2)}
+                {t("environments.surveys.summary.overall")}: {questionSummary.average.toFixed(2)}
               </div>
             </div>
 
             <div className="flex items-center space-x-2 rounded-lg bg-slate-100 p-2">
-              <SatisfactionIndicator percentage={elementSummary.csat.satisfiedPercentage} />
+              <SatisfactionIndicator percentage={questionSummary.csat.satisfiedPercentage} />
               <div>
-                CSAT: {elementSummary.csat.satisfiedPercentage}% {t("environments.surveys.summary.satisfied")}
+                CSAT: {questionSummary.csat.satisfiedPercentage}%{" "}
+                {t("environments.surveys.summary.satisfied")}
               </div>
             </div>
           </div>
@@ -78,25 +82,29 @@ export const RatingSummary = ({ elementSummary, survey, setFilter }: RatingSumma
 
         <TabsContent value="aggregated" className="mt-4">
           <div className="px-4 pb-6 pt-4 md:px-6">
-            {elementSummary.responseCount === 0 ? (
+            {questionSummary.responseCount === 0 ? (
               <>
-                <EmptyState text={t("environments.surveys.summary.no_responses_found")} variant="simple" />
+                <div className="rounded-lg border border-slate-200 bg-slate-50 p-8 text-center">
+                  <p className="text-sm text-slate-500">
+                    {t("environments.surveys.summary.no_responses_found")}
+                  </p>
+                </div>
                 <RatingScaleLegend
-                  scale={elementSummary.element.scale}
+                  scale={questionSummary.question.scale}
-                  range={elementSummary.element.range}
+                  range={questionSummary.question.range}
                 />
               </>
             ) : (
               <>
                 <TooltipProvider delayDuration={200}>
                   <div className="flex h-12 w-full overflow-hidden rounded-t-lg border border-slate-200">
-                    {elementSummary.choices.map((result, index) => {
+                    {questionSummary.choices.map((result, index) => {
                       if (result.percentage === 0) return null;
 
-                      const range = elementSummary.element.range;
+                      const range = questionSummary.question.range;
                       const opacity = 0.3 + (result.rating / range) * 0.8;
                       const isFirst = index === 0;
-                      const isLast = index === elementSummary.choices.length - 1;
+                      const isLast = index === questionSummary.choices.length - 1;
 
                       return (
                         <ClickableBarSegment
@@ -108,9 +116,9 @@ export const RatingSummary = ({ elementSummary, survey, setFilter }: RatingSumma
                           }}
                           onClick={() =>
                             setFilter(
-                              elementSummary.element.id,
+                              questionSummary.question.id,
-                              elementSummary.element.headline,
+                              questionSummary.question.headline,
-                              elementSummary.element.type,
+                              questionSummary.question.type,
                               t("environments.surveys.summary.is_equal_to"),
                               result.rating.toString()
                             )
@@ -125,7 +133,7 @@ export const RatingSummary = ({ elementSummary, survey, setFilter }: RatingSumma
                   </div>
                 </TooltipProvider>
                 <div className="flex w-full overflow-hidden rounded-b-lg border border-t-0 border-slate-200 bg-slate-50">
-                  {elementSummary.choices.map((result, index) => {
+                  {questionSummary.choices.map((result, index) => {
                     if (result.percentage === 0) return null;
 
                     return (
@@ -135,15 +143,15 @@ export const RatingSummary = ({ elementSummary, survey, setFilter }: RatingSumma
                         style={{
                           width: `${result.percentage}%`,
                           borderRight:
-                            index < elementSummary.choices.length - 1
+                            index < questionSummary.choices.length - 1
                               ? "1px solid rgb(226, 232, 240)"
                               : "none",
                         }}>
                         <div className="mb-1 flex items-center justify-center">
                           <RatingResponse
-                            scale={elementSummary.element.scale}
+                            scale={questionSummary.question.scale}
                             answer={result.rating}
-                            range={elementSummary.element.range}
+                            range={questionSummary.question.range}
                             addColors={false}
                             variant="aggregated"
                           />
@@ -156,8 +164,8 @@ export const RatingSummary = ({ elementSummary, survey, setFilter }: RatingSumma
                   })}
                 </div>
                 <RatingScaleLegend
-                  scale={elementSummary.element.scale}
+                  scale={questionSummary.question.scale}
-                  range={elementSummary.element.range}
+                  range={questionSummary.question.range}
                 />
               </>
             )}
@@ -167,15 +175,15 @@ export const RatingSummary = ({ elementSummary, survey, setFilter }: RatingSumma
         <TabsContent value="individual" className="mt-4">
           <div className="px-4 pb-6 pt-4 md:px-6">
             <div className="space-y-5 text-sm md:text-base">
-              {elementSummary.choices.map((result) => (
+              {questionSummary.choices.map((result) => (
                 <div key={result.rating}>
                   <button
                     className="w-full cursor-pointer hover:opacity-80"
                     onClick={() =>
                       setFilter(
-                        elementSummary.element.id,
+                        questionSummary.question.id,
-                        elementSummary.element.headline,
+                        questionSummary.question.headline,
-                        elementSummary.element.type,
+                        questionSummary.question.type,
                         t("environments.surveys.summary.is_equal_to"),
                         result.rating.toString()
                       )
@@ -184,10 +192,10 @@ export const RatingSummary = ({ elementSummary, survey, setFilter }: RatingSumma
                       <div className="mr-8 flex items-center space-x-1">
                         <div className="font-semibold text-slate-700">
                           <RatingResponse
-                            scale={elementSummary.element.scale}
+                            scale={questionSummary.question.scale}
                             answer={result.rating}
-                            range={elementSummary.element.range}
+                            range={questionSummary.question.range}
-                            addColors={elementSummary.element.isColorCodingEnabled}
+                            addColors={questionSummary.question.isColorCodingEnabled}
                             variant="individual"
                           />
                         </div>
@@ -209,14 +217,14 @@ export const RatingSummary = ({ elementSummary, survey, setFilter }: RatingSumma
           </div>
         </TabsContent>
       </Tabs>
-      {elementSummary.dismissed && elementSummary.dismissed.count > 0 && (
+      {questionSummary.dismissed && questionSummary.dismissed.count > 0 && (
         <div className="rounded-b-lg border-t bg-white px-6 py-4">
           <div key="dismissed">
             <div className="text flex justify-between px-2">
               <p className="font-semibold text-slate-700">{t("common.dismissed")}</p>
               <p className="flex w-32 items-end justify-end text-slate-600">
-                {elementSummary.dismissed.count}{" "}
+                {questionSummary.dismissed.count}{" "}
-                {elementSummary.dismissed.count === 1 ? t("common.response") : t("common.responses")}
+                {questionSummary.dismissed.count === 1 ? t("common.response") : t("common.responses")}
               </p>
             </div>
           </div>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryDropOffs.tsx

@@ -2,11 +2,10 @@
 
 import { TimerIcon } from "lucide-react";
 import { useTranslation } from "react-i18next";
-import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+import { TSurvey, TSurveyQuestionType, TSurveySummary } from "@formbricks/types/surveys/types";
-import { TSurvey, TSurveySummary } from "@formbricks/types/surveys/types";
 import { recallToHeadline } from "@/lib/utils/recall";
 import { formatTextWithSlashes } from "@/modules/survey/editor/lib/utils";
-import { getElementIcon } from "@/modules/survey/lib/elements";
+import { getQuestionIcon } from "@/modules/survey/lib/questions";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/modules/ui/components/tooltip";
 
 interface SummaryDropOffsProps {
@@ -16,8 +15,8 @@ interface SummaryDropOffsProps {
 
 export const SummaryDropOffs = ({ dropOff, survey }: SummaryDropOffsProps) => {
   const { t } = useTranslation();
-  const getIcon = (elementType: TSurveyElementTypeEnum) => {
+  const getIcon = (questionType: TSurveyQuestionType) => {
-    const Icon = getElementIcon(elementType, t);
+    const Icon = getQuestionIcon(questionType, t);
     return <Icon className="mt-[3px] h-5 w-5 shrink-0 text-slate-600" />;
   };
 
@@ -45,10 +44,10 @@ export const SummaryDropOffs = ({ dropOff, survey }: SummaryDropOffsProps) => {
         </div>
         {dropOff.map((quesDropOff) => (
           <div
-            key={quesDropOff.elementId}
+            key={quesDropOff.questionId}
             className="grid grid-cols-6 items-start border-b border-slate-100 text-xs text-slate-800 md:text-sm">
             <div className="col-span-3 flex gap-3 px-4 py-2 md:px-6">
-              {getIcon(quesDropOff.elementType)}
+              {getIcon(quesDropOff.questionType)}
               <p>
                 {formatTextWithSlashes(
                   recallToHeadline(

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryList.tsx

@@ -3,25 +3,28 @@
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { TEnvironment } from "@formbricks/types/environment";
-import { TI18nString } from "@formbricks/types/i18n";
+import {
-import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+  TI18nString,
-import { TSurveySummary } from "@formbricks/types/surveys/types";
+  TSurvey,
-import { TSurvey } from "@formbricks/types/surveys/types";
+  TSurveyQuestionId,
+  TSurveyQuestionTypeEnum,
+  TSurveySummary,
+} from "@formbricks/types/surveys/types";
 import { getTextContent } from "@formbricks/types/surveys/validation";
 import { TUserLocale } from "@formbricks/types/user";
-import { EmptyAppSurveys } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/EmptyInAppSurveys";
 import {
   SelectedFilterValue,
   useResponseFilter,
-} from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/response-filter-context";
+} from "@/app/(app)/environments/[environmentId]/components/ResponseFilterContext";
+import { EmptyAppSurveys } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/EmptyInAppSurveys";
 import { CTASummary } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/CTASummary";
 import { CalSummary } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/CalSummary";
 import { ConsentSummary } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ConsentSummary";
 import { ContactInfoSummary } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ContactInfoSummary";
-import { DateElementSummary } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/DateElementSummary";
+import { DateQuestionSummary } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/DateQuestionSummary";
 import { FileUploadSummary } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/FileUploadSummary";
 import { HiddenFieldsSummary } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/HiddenFieldsSummary";
-import { MatrixElementSummary } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/MatrixElementSummary";
+import { MatrixQuestionSummary } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/MatrixQuestionSummary";
 import { MultipleChoiceSummary } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/MultipleChoiceSummary";
 import { NPSSummary } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/NPSSummary";
 import { OpenTextSummary } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/OpenTextSummary";
@@ -29,7 +32,7 @@ import { PictureChoiceSummary } from "@/app/(app)/environments/[environmentId]/s
 import { RankingSummary } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/RankingSummary";
 import { RatingSummary } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/RatingSummary";
 import { constructToastMessage } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/lib/utils";
-import { OptionsType } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ElementsComboBox";
+import { OptionsType } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionsComboBox";
 import { getLocalizedValue } from "@/lib/i18n/utils";
 import { EmptyState } from "@/modules/ui/components/empty-state";
 import { SkeletonLoader } from "@/modules/ui/components/skeleton-loader";
@@ -47,29 +50,29 @@ export const SummaryList = ({ summary, environment, responseCount, survey, local
   const { setSelectedFilter, selectedFilter } = useResponseFilter();
   const { t } = useTranslation();
   const setFilter = (
-    elementId: string,
+    questionId: TSurveyQuestionId,
     label: TI18nString,
-    elementType: TSurveyElementTypeEnum,
+    questionType: TSurveyQuestionTypeEnum,
     filterValue: string,
     filterComboBoxValue?: string | string[]
   ) => {
     const filterObject: SelectedFilterValue = { ...selectedFilter };
     const value = {
-      id: elementId,
+      id: questionId,
       label: getTextContent(getLocalizedValue(label, "default")),
-      elementType,
+      questionType: questionType,
-      type: OptionsType.ELEMENTS,
+      type: OptionsType.QUESTIONS,
     };
 
-    // Find the index of the existing filter with the same elementId
+    // Find the index of the existing filter with the same questionId
     const existingFilterIndex = filterObject.filter.findIndex(
-      (filter) => filter.elementType.id === elementId
+      (filter) => filter.questionType.id === questionId
     );
 
     if (existingFilterIndex !== -1) {
       // Replace the existing filter
       filterObject.filter[existingFilterIndex] = {
-        elementType: value,
+        questionType: value,
         filterType: {
           filterComboBoxValue: filterComboBoxValue,
           filterValue: filterValue,
@@ -79,14 +82,14 @@ export const SummaryList = ({ summary, environment, responseCount, survey, local
     } else {
       // Add new filter
       filterObject.filter.push({
-        elementType: value,
+        questionType: value,
         filterType: {
           filterComboBoxValue: filterComboBoxValue,
           filterValue: filterValue,
         },
       });
       toast.success(
-        constructToastMessage(elementType, filterValue, survey, elementId, t, filterComboBoxValue) ??
+        constructToastMessage(questionType, filterValue, survey, questionId, t, filterComboBoxValue) ??
           t("environments.surveys.summary.filter_added_successfully"),
         { duration: 5000 }
       );
@@ -107,12 +110,12 @@ export const SummaryList = ({ summary, environment, responseCount, survey, local
       ) : responseCount === 0 ? (
         <EmptyState text={t("environments.surveys.summary.no_responses_found")} />
       ) : (
-        summary.map((elementSummary) => {
+        summary.map((questionSummary) => {
-          if (elementSummary.type === TSurveyElementTypeEnum.OpenText) {
+          if (questionSummary.type === TSurveyQuestionTypeEnum.OpenText) {
             return (
               <OpenTextSummary
-                key={elementSummary.element.id}
+                key={questionSummary.question.id}
-                elementSummary={elementSummary}
+                questionSummary={questionSummary}
                 environmentId={environment.id}
                 survey={survey}
                 locale={locale}
@@ -120,13 +123,13 @@ export const SummaryList = ({ summary, environment, responseCount, survey, local
             );
           }
           if (
-            elementSummary.type === TSurveyElementTypeEnum.MultipleChoiceSingle ||
+            questionSummary.type === TSurveyQuestionTypeEnum.MultipleChoiceSingle ||
-            elementSummary.type === TSurveyElementTypeEnum.MultipleChoiceMulti
+            questionSummary.type === TSurveyQuestionTypeEnum.MultipleChoiceMulti
           ) {
             return (
               <MultipleChoiceSummary
-                key={elementSummary.element.id}
+                key={questionSummary.question.id}
-                elementSummary={elementSummary}
+                questionSummary={questionSummary}
                 environmentId={environment.id}
                 surveyType={survey.type}
                 survey={survey}
@@ -134,128 +137,132 @@ export const SummaryList = ({ summary, environment, responseCount, survey, local
               />
             );
           }
-          if (elementSummary.type === TSurveyElementTypeEnum.NPS) {
+          if (questionSummary.type === TSurveyQuestionTypeEnum.NPS) {
             return (
               <NPSSummary
-                key={elementSummary.element.id}
+                key={questionSummary.question.id}
-                elementSummary={elementSummary}
+                questionSummary={questionSummary}
                 survey={survey}
                 setFilter={setFilter}
               />
             );
           }
-          if (elementSummary.type === TSurveyElementTypeEnum.CTA) {
+          if (questionSummary.type === TSurveyQuestionTypeEnum.CTA) {
             return (
-              <CTASummary key={elementSummary.element.id} elementSummary={elementSummary} survey={survey} />
+              <CTASummary
+                key={questionSummary.question.id}
+                questionSummary={questionSummary}
+                survey={survey}
+              />
             );
           }
-          if (elementSummary.type === TSurveyElementTypeEnum.Rating) {
+          if (questionSummary.type === TSurveyQuestionTypeEnum.Rating) {
             return (
               <RatingSummary
-                key={elementSummary.element.id}
+                key={questionSummary.question.id}
-                elementSummary={elementSummary}
+                questionSummary={questionSummary}
                 survey={survey}
                 setFilter={setFilter}
               />
             );
           }
-          if (elementSummary.type === TSurveyElementTypeEnum.Consent) {
+          if (questionSummary.type === TSurveyQuestionTypeEnum.Consent) {
             return (
               <ConsentSummary
-                key={elementSummary.element.id}
+                key={questionSummary.question.id}
-                elementSummary={elementSummary}
+                questionSummary={questionSummary}
                 survey={survey}
                 setFilter={setFilter}
               />
             );
           }
-          if (elementSummary.type === TSurveyElementTypeEnum.PictureSelection) {
+          if (questionSummary.type === TSurveyQuestionTypeEnum.PictureSelection) {
             return (
               <PictureChoiceSummary
-                key={elementSummary.element.id}
+                key={questionSummary.question.id}
-                elementSummary={elementSummary}
+                questionSummary={questionSummary}
                 survey={survey}
                 setFilter={setFilter}
               />
             );
           }
-          if (elementSummary.type === TSurveyElementTypeEnum.Date) {
+          if (questionSummary.type === TSurveyQuestionTypeEnum.Date) {
             return (
-              <DateElementSummary
+              <DateQuestionSummary
-                key={elementSummary.element.id}
+                key={questionSummary.question.id}
-                elementSummary={elementSummary}
+                questionSummary={questionSummary}
                 environmentId={environment.id}
                 survey={survey}
                 locale={locale}
               />
             );
           }
-          if (elementSummary.type === TSurveyElementTypeEnum.FileUpload) {
+          if (questionSummary.type === TSurveyQuestionTypeEnum.FileUpload) {
             return (
               <FileUploadSummary
-                key={elementSummary.element.id}
+                key={questionSummary.question.id}
-                elementSummary={elementSummary}
+                questionSummary={questionSummary}
                 environmentId={environment.id}
                 survey={survey}
                 locale={locale}
               />
             );
           }
-          if (elementSummary.type === TSurveyElementTypeEnum.Cal) {
+          if (questionSummary.type === TSurveyQuestionTypeEnum.Cal) {
             return (
               <CalSummary
-                key={elementSummary.element.id}
+                key={questionSummary.question.id}
-                elementSummary={elementSummary}
+                questionSummary={questionSummary}
                 environmentId={environment.id}
                 survey={survey}
               />
             );
           }
-          if (elementSummary.type === TSurveyElementTypeEnum.Matrix) {
+          if (questionSummary.type === TSurveyQuestionTypeEnum.Matrix) {
             return (
-              <MatrixElementSummary
+              <MatrixQuestionSummary
-                key={elementSummary.element.id}
+                key={questionSummary.question.id}
-                elementSummary={elementSummary}
+                questionSummary={questionSummary}
                 survey={survey}
                 setFilter={setFilter}
               />
             );
           }
-          if (elementSummary.type === TSurveyElementTypeEnum.Address) {
+          if (questionSummary.type === TSurveyQuestionTypeEnum.Address) {
             return (
               <AddressSummary
-                key={elementSummary.element.id}
+                key={questionSummary.question.id}
-                elementSummary={elementSummary}
+                questionSummary={questionSummary}
                 environmentId={environment.id}
                 survey={survey}
                 locale={locale}
               />
             );
           }
-          if (elementSummary.type === TSurveyElementTypeEnum.Ranking) {
+          if (questionSummary.type === TSurveyQuestionTypeEnum.Ranking) {
             return (
               <RankingSummary
-                key={elementSummary.element.id}
+                key={questionSummary.question.id}
-                elementSummary={elementSummary}
+                questionSummary={questionSummary}
                 survey={survey}
               />
             );
           }
-          if (elementSummary.type === "hiddenField") {
+          if (questionSummary.type === "hiddenField") {
             return (
               <HiddenFieldsSummary
-                key={elementSummary.id}
+                key={questionSummary.id}
-                elementSummary={elementSummary}
+                questionSummary={questionSummary}
                 environment={environment}
                 locale={locale}
               />
             );
           }
-          if (elementSummary.type === TSurveyElementTypeEnum.ContactInfo) {
+          if (questionSummary.type === TSurveyQuestionTypeEnum.ContactInfo) {
             return (
               <ContactInfoSummary
-                key={elementSummary.element.id}
+                key={questionSummary.question.id}
-                elementSummary={elementSummary}
+                questionSummary={questionSummary}
                 environmentId={environment.id}
                 survey={survey}
                 locale={locale}

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryMetadata.tsx

@@ -8,7 +8,6 @@ import { cn } from "@/modules/ui/lib/utils";
 
 interface SummaryMetadataProps {
   surveySummary: TSurveySummary["meta"];
-  quotasCount: number;
   isLoading: boolean;
   tab: "dropOffs" | "quotas" | undefined;
   setTab: React.Dispatch<React.SetStateAction<"dropOffs" | "quotas" | undefined>>;
@@ -32,7 +31,6 @@ const formatTime = (ttc) => {
 
 export const SummaryMetadata = ({
   surveySummary,
-  quotasCount,
   isLoading,
   tab,
   setTab,
@@ -63,7 +61,7 @@ export const SummaryMetadata = ({
       <div
         className={cn(
           `grid gap-4 sm:grid-cols-2 md:grid-cols-3 md:gap-x-2 lg:grid-cols-3 2xl:grid-cols-5`,
-          isQuotasAllowed && quotasCount > 0 && "2xl:grid-cols-6"
+          isQuotasAllowed && "2xl:grid-cols-6"
         )}>
         <StatCard
           label={t("environments.surveys.summary.impressions")}
@@ -107,7 +105,7 @@ export const SummaryMetadata = ({
           isLoading={isLoading}
         />
 
-        {isQuotasAllowed && quotasCount > 0 && (
+        {isQuotasAllowed && (
           <InteractiveCard
             key="quotas"
             tab="quotas"

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryPage.tsx

@@ -5,8 +5,8 @@ import { useEffect, useMemo, useState } from "react";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TSurvey, TSurveySummary } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";
+import { useResponseFilter } from "@/app/(app)/environments/[environmentId]/components/ResponseFilterContext";
 import { getSurveySummaryAction } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/actions";
-import { useResponseFilter } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/response-filter-context";
 import ScrollToTop from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ScrollToTop";
 import { SummaryDropOffs } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryDropOffs";
 import { CustomFilter } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/CustomFilter";
@@ -115,7 +115,6 @@ export const SummaryPage = ({
     <>
       <SummaryMetadata
         surveySummary={surveySummary.meta}
-        quotasCount={surveySummary.quotas?.length ?? 0}
         isLoading={isLoading}
         tab={tab}
         setTab={setTab}

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/link-settings-tab.tsx

@@ -5,8 +5,7 @@ import { useForm } from "react-hook-form";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { getLanguageLabel } from "@formbricks/i18n-utils/src/utils";
-import { TI18nString } from "@formbricks/types/i18n";
+import { TI18nString, TSurvey, TSurveyMetadata } from "@formbricks/types/surveys/types";
-import { TSurvey, TSurveyMetadata } from "@formbricks/types/surveys/types";
 import { useSurvey } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/context/survey-context";
 import { createI18nString, extractLanguageCodes, getEnabledLanguages } from "@/lib/i18n/utils";
 import { updateSurveyAction } from "@/modules/survey/editor/actions";

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/lib/surveySummary.ts

@@ -14,24 +14,23 @@ import {
   TResponseVariables,
   ZResponseFilterCriteria,
 } from "@formbricks/types/responses";
-import {
-  TSurveyElement,
-  TSurveyElementChoice,
-  TSurveyElementTypeEnum,
-} from "@formbricks/types/surveys/elements";
 import {
   TSurvey,
-  TSurveyElementSummaryAddress,
+  TSurveyContactInfoQuestion,
-  TSurveyElementSummaryContactInfo,
-  TSurveyElementSummaryDate,
-  TSurveyElementSummaryFileUpload,
-  TSurveyElementSummaryHiddenFields,
-  TSurveyElementSummaryMultipleChoice,
-  TSurveyElementSummaryOpenText,
-  TSurveyElementSummaryPictureSelection,
-  TSurveyElementSummaryRanking,
-  TSurveyElementSummaryRating,
   TSurveyLanguage,
+  TSurveyMultipleChoiceQuestion,
+  TSurveyQuestion,
+  TSurveyQuestionId,
+  TSurveyQuestionSummaryAddress,
+  TSurveyQuestionSummaryDate,
+  TSurveyQuestionSummaryFileUpload,
+  TSurveyQuestionSummaryHiddenFields,
+  TSurveyQuestionSummaryMultipleChoice,
+  TSurveyQuestionSummaryOpenText,
+  TSurveyQuestionSummaryPictureSelection,
+  TSurveyQuestionSummaryRanking,
+  TSurveyQuestionSummaryRating,
+  TSurveyQuestionTypeEnum,
   TSurveySummary,
 } from "@formbricks/types/surveys/types";
 import { getTextContent } from "@formbricks/types/surveys/validation";
@@ -41,7 +40,6 @@ import { getDisplayCountBySurveyId } from "@/lib/display/service";
 import { getLocalizedValue } from "@/lib/i18n/utils";
 import { buildWhereClause } from "@/lib/response/utils";
 import { getSurvey } from "@/lib/survey/service";
-import { findElementLocation, getElementsFromBlocks } from "@/lib/survey/utils";
 import { evaluateLogic, performActions } from "@/lib/surveyLogic/utils";
 import { validateInputs } from "@/lib/utils/validate";
 import { convertFloatTo2Decimal } from "./utils";
@@ -97,44 +95,39 @@ export const getSurveySummaryMeta = (
   };
 };
 
-const evaluateLogicAndGetNextElementId = (
+const evaluateLogicAndGetNextQuestionId = (
   localSurvey: TSurvey,
-  elements: TSurveyElement[],
   data: TResponseData,
   localVariables: TResponseVariables,
-  currentElementIndex: number,
+  currentQuestionIndex: number,
-  currElementTemp: TSurveyElement,
+  currQuesTemp: TSurveyQuestion,
   selectedLanguage: string | null
 ): {
-  nextElementId: string | undefined;
+  nextQuestionId: TSurveyQuestionId | undefined;
   updatedSurvey: TSurvey;
   updatedVariables: TResponseVariables;
 } => {
+  const questions = localSurvey.questions;
+
   let updatedSurvey = { ...localSurvey };
   let updatedVariables = { ...localVariables };
 
   let firstJumpTarget: string | undefined;
 
-  const { block: currentBlock } = findElementLocation(localSurvey, currElementTemp.id);
+  if (currQuesTemp.logic && currQuesTemp.logic.length > 0) {
-
+    for (const logic of currQuesTemp.logic) {
-  if (currentBlock?.logic && currentBlock.logic.length > 0) {
-    for (const logic of currentBlock.logic) {
       if (evaluateLogic(localSurvey, data, localVariables, logic.conditions, selectedLanguage ?? "default")) {
-        const { jumpTarget, requiredElementIds, calculations } = performActions(
+        const { jumpTarget, requiredQuestionIds, calculations } = performActions(
           updatedSurvey,
           logic.actions,
           data,
           updatedVariables
         );
 
-        if (requiredElementIds.length > 0) {
+        if (requiredQuestionIds.length > 0) {
-          // Update blocks to mark elements as required
+          updatedSurvey.questions = updatedSurvey.questions.map((q) =>
-          updatedSurvey.blocks = updatedSurvey.blocks.map((block) => ({
+            requiredQuestionIds.includes(q.id) ? { ...q, required: true } : q
-            ...block,
+          );
-            elements: block.elements.map((e) =>
-              requiredElementIds.includes(e.id) ? { ...e, required: true } : e
-            ),
-          }));
         }
         updatedVariables = { ...updatedVariables, ...calculations };
 
@@ -146,33 +139,32 @@ const evaluateLogicAndGetNextElementId = (
   }
 
   // If no jump target was set, check for a fallback logic
-  if (!firstJumpTarget && currentBlock?.logicFallback) {
+  if (!firstJumpTarget && currQuesTemp.logicFallback) {
-    firstJumpTarget = currentBlock.logicFallback;
+    firstJumpTarget = currQuesTemp.logicFallback;
   }
 
-  // Return the first jump target if found, otherwise go to the next element
+  // Return the first jump target if found, otherwise go to the next question
-  const nextElementId = firstJumpTarget || elements[currentElementIndex + 1]?.id || undefined;
+  const nextQuestionId = firstJumpTarget || questions[currentQuestionIndex + 1]?.id || undefined;
 
-  return { nextElementId, updatedSurvey, updatedVariables };
+  return { nextQuestionId, updatedSurvey, updatedVariables };
 };
 
 export const getSurveySummaryDropOff = (
   survey: TSurvey,
-  elements: TSurveyElement[],
   responses: TSurveySummaryResponse[],
   displayCount: number
 ): TSurveySummary["dropOff"] => {
-  const initialTtc = elements.reduce((acc: Record<string, number>, element) => {
+  const initialTtc = survey.questions.reduce((acc: Record<string, number>, question) => {
-    acc[element.id] = 0;
+    acc[question.id] = 0;
     return acc;
   }, {});
 
   let totalTtc = { ...initialTtc };
   let responseCounts = { ...initialTtc };
 
-  let dropOffArr = new Array(elements.length).fill(0) as number[];
+  let dropOffArr = new Array(survey.questions.length).fill(0) as number[];
-  let impressionsArr = new Array(elements.length).fill(0) as number[];
+  let impressionsArr = new Array(survey.questions.length).fill(0) as number[];
-  let dropOffPercentageArr = new Array(elements.length).fill(0) as number[];
+  let dropOffPercentageArr = new Array(survey.questions.length).fill(0) as number[];
 
   const surveyVariablesData = survey.variables?.reduce(
     (acc, variable) => {
@@ -184,10 +176,10 @@ export const getSurveySummaryDropOff = (
 
   responses.forEach((response) => {
     // Calculate total time-to-completion
-    Object.keys(totalTtc).forEach((elementId) => {
+    Object.keys(totalTtc).forEach((questionId) => {
-      if (response.ttc && response.ttc[elementId]) {
+      if (response.ttc && response.ttc[questionId]) {
-        totalTtc[elementId] += response.ttc[elementId];
+        totalTtc[questionId] += response.ttc[questionId];
-        responseCounts[elementId]++;
+        responseCounts[questionId]++;
       }
     });
 
@@ -199,11 +191,11 @@ export const getSurveySummaryDropOff = (
 
     let currQuesIdx = 0;
 
-    while (currQuesIdx < elements.length) {
+    while (currQuesIdx < localSurvey.questions.length) {
-      const currQues = elements[currQuesIdx];
+      const currQues = localSurvey.questions[currQuesIdx];
       if (!currQues) break;
 
-      // element is not answered and required
+      // question is not answered and required
       if (response.data[currQues.id] === undefined && currQues.required) {
         dropOffArr[currQuesIdx]++;
         impressionsArr[currQuesIdx]++;
@@ -212,9 +204,8 @@ export const getSurveySummaryDropOff = (
 
       impressionsArr[currQuesIdx]++;
 
-      const { nextElementId, updatedSurvey, updatedVariables } = evaluateLogicAndGetNextElementId(
+      const { nextQuestionId, updatedSurvey, updatedVariables } = evaluateLogicAndGetNextQuestionId(
         localSurvey,
-        elements,
         localResponseData,
         localVariables,
         currQuesIdx,
@@ -225,9 +216,9 @@ export const getSurveySummaryDropOff = (
       localSurvey = updatedSurvey;
       localVariables = updatedVariables;
 
-      if (nextElementId) {
+      if (nextQuestionId) {
-        const nextQuesIdx = elements.findIndex((q) => q.id === nextElementId);
+        const nextQuesIdx = survey.questions.findIndex((q) => q.id === nextQuestionId);
-        if (!response.data[nextElementId] && !response.finished) {
+        if (!response.data[nextQuestionId] && !response.finished) {
           dropOffArr[nextQuesIdx]++;
           impressionsArr[nextQuesIdx]++;
           break;
@@ -239,9 +230,10 @@ export const getSurveySummaryDropOff = (
     }
   });
 
-  // Calculate the average time for each element
+  // Calculate the average time for each question
-  Object.keys(totalTtc).forEach((elementId) => {
+  Object.keys(totalTtc).forEach((questionId) => {
-    totalTtc[elementId] = responseCounts[elementId] > 0 ? totalTtc[elementId] / responseCounts[elementId] : 0;
+    totalTtc[questionId] =
+      responseCounts[questionId] > 0 ? totalTtc[questionId] / responseCounts[questionId] : 0;
   });
 
   if (!survey.welcomeCard.enabled) {
@@ -258,18 +250,18 @@ export const getSurveySummaryDropOff = (
     dropOffPercentageArr[0] = (dropOffArr[0] / impressionsArr[0]) * 100;
   }
 
-  for (let i = 1; i < elements.length; i++) {
+  for (let i = 1; i < survey.questions.length; i++) {
     if (impressionsArr[i] !== 0) {
       dropOffPercentageArr[i] = (dropOffArr[i] / impressionsArr[i]) * 100;
     }
   }
 
-  const dropOff = elements.map((element, index) => {
+  const dropOff = survey.questions.map((question, index) => {
     return {
-      elementId: element.id,
+      questionId: question.id,
-      elementType: element.type,
+      questionType: question.type,
-      headline: getTextContent(getLocalizedValue(element.headline, "default")),
+      headline: getTextContent(getLocalizedValue(question.headline, "default")),
-      ttc: convertFloatTo2Decimal(totalTtc[element.id]) || 0,
+      ttc: convertFloatTo2Decimal(totalTtc[question.id]) || 0,
       impressions: impressionsArr[index] || 0,
       dropOffCount: dropOffArr[index] || 0,
       dropOffPercentage: convertFloatTo2Decimal(dropOffPercentageArr[index]) || 0,
@@ -285,66 +277,51 @@ const getLanguageCode = (surveyLanguages: TSurveyLanguage[], languageCode: strin
   return language?.default ? "default" : language?.language.code || "default";
 };
 
-const checkForI18n = (
+const checkForI18n = (responseData: TResponseData, id: string, survey: TSurvey, languageCode: string) => {
-  responseData: TResponseData,
+  const question = survey.questions.find((question) => question.id === id);
-  id: string,
-  elements: TSurveyElement[],
-  languageCode: string
-) => {
-  const element = elements.find((element) => element.id === id);
 
-  if (element?.type === "multipleChoiceMulti" || element?.type === "ranking") {
+  if (question?.type === "multipleChoiceMulti" || question?.type === "ranking") {
     // Initialize an array to hold the choice values
     let choiceValues = [] as string[];
 
-    // Type guard: both element types have choices property
-    const hasChoices = "choices" in element;
-    if (!hasChoices) return [];
-
     (typeof responseData[id] === "string"
       ? ([responseData[id]] as string[])
       : (responseData[id] as string[])
     )?.forEach((data) => {
       choiceValues.push(
         getLocalizedValue(
-          element.choices.find((choice) => choice.label[languageCode] === data)?.label,
+          question.choices.find((choice) => choice.label[languageCode] === data)?.label,
           "default"
         ) || data
       );
     });
 
-    // Return the array of localized choice values of multiSelect multi elements
+    // Return the array of localized choice values of multiSelect multi questions
     return choiceValues;
   }
 
-  // Return the localized value of the choice fo multiSelect single element
+  // Return the localized value of the choice fo multiSelect single question
-  if (element && "choices" in element) {
+  const choice = (question as TSurveyMultipleChoiceQuestion)?.choices.find(
-    const choice = element.choices?.find(
+    (choice) => choice.label[languageCode] === responseData[id]
-      (choice: TSurveyElementChoice) => choice.label?.[languageCode] === responseData[id]
+  );
-    );
-    return choice && "label" in choice
-      ? getLocalizedValue(choice.label, "default") || responseData[id]
-      : responseData[id];
-  }
 
-  return responseData[id];
+  return getLocalizedValue(choice?.label, "default") || responseData[id];
 };
 
-export const getElementSummary = async (
+export const getQuestionSummary = async (
   survey: TSurvey,
-  elements: TSurveyElement[],
   responses: TSurveySummaryResponse[],
   dropOff: TSurveySummary["dropOff"]
 ): Promise<TSurveySummary["summary"]> => {
   const VALUES_LIMIT = 50;
   let summary: TSurveySummary["summary"] = [];
 
-  for (const element of elements) {
+  for (const question of survey.questions) {
-    switch (element.type) {
+    switch (question.type) {
-      case TSurveyElementTypeEnum.OpenText: {
+      case TSurveyQuestionTypeEnum.OpenText: {
-        let values: TSurveyElementSummaryOpenText["samples"] = [];
+        let values: TSurveyQuestionSummaryOpenText["samples"] = [];
         responses.forEach((response) => {
-          const answer = response.data[element.id];
+          const answer = response.data[question.id];
           if (answer && typeof answer === "string") {
             values.push({
               id: response.id,
@@ -357,8 +334,8 @@ export const getElementSummary = async (
         });
 
         summary.push({
-          type: element.type,
+          type: question.type,
-          element: element,
+          question,
           responseCount: values.length,
           samples: values.slice(0, VALUES_LIMIT),
         });
@@ -366,18 +343,18 @@ export const getElementSummary = async (
         values = [];
         break;
       }
-      case TSurveyElementTypeEnum.MultipleChoiceSingle:
+      case TSurveyQuestionTypeEnum.MultipleChoiceSingle:
-      case TSurveyElementTypeEnum.MultipleChoiceMulti: {
+      case TSurveyQuestionTypeEnum.MultipleChoiceMulti: {
-        let values: TSurveyElementSummaryMultipleChoice["choices"] = [];
+        let values: TSurveyQuestionSummaryMultipleChoice["choices"] = [];
 
-        const otherOption = element.choices.find((choice) => choice.id === "other");
+        const otherOption = question.choices.find((choice) => choice.id === "other");
-        const noneOption = element.choices.find((choice) => choice.id === "none");
+        const noneOption = question.choices.find((choice) => choice.id === "none");
 
-        const elementChoices = element.choices
+        const questionChoices = question.choices
           .filter((choice) => choice.id !== "other" && choice.id !== "none")
           .map((choice) => getLocalizedValue(choice.label, "default"));
 
-        const choiceCountMap = elementChoices.reduce((acc: Record<string, number>, choice) => {
+        const choiceCountMap = questionChoices.reduce((acc: Record<string, number>, choice) => {
           acc[choice] = 0;
           return acc;
         }, {});
@@ -386,7 +363,7 @@ export const getElementSummary = async (
         const noneLabel = noneOption ? getLocalizedValue(noneOption.label, "default") : null;
         let noneCount = 0;
 
-        const otherValues: TSurveyElementSummaryMultipleChoice["choices"][number]["others"] = [];
+        const otherValues: TSurveyQuestionSummaryMultipleChoice["choices"][number]["others"] = [];
         let totalSelectionCount = 0;
         let totalResponseCount = 0;
         responses.forEach((response) => {
@@ -394,16 +371,16 @@ export const getElementSummary = async (
 
           const answer =
             responseLanguageCode === "default"
-              ? response.data[element.id]
+              ? response.data[question.id]
-              : checkForI18n(response.data, element.id, elements, responseLanguageCode);
+              : checkForI18n(response.data, question.id, survey, responseLanguageCode);
 
           let hasValidAnswer = false;
 
-          if (Array.isArray(answer) && element.type === TSurveyElementTypeEnum.MultipleChoiceMulti) {
+          if (Array.isArray(answer) && question.type === TSurveyQuestionTypeEnum.MultipleChoiceMulti) {
             answer.forEach((value) => {
               if (value) {
                 totalSelectionCount++;
-                if (elementChoices.includes(value)) {
+                if (questionChoices.includes(value)) {
                   choiceCountMap[value]++;
                 } else if (noneLabel && value === noneLabel) {
                   noneCount++;
@@ -419,11 +396,11 @@ export const getElementSummary = async (
             });
           } else if (
             typeof answer === "string" &&
-            element.type === TSurveyElementTypeEnum.MultipleChoiceSingle
+            question.type === TSurveyQuestionTypeEnum.MultipleChoiceSingle
           ) {
             if (answer) {
               totalSelectionCount++;
-              if (elementChoices.includes(answer)) {
+              if (questionChoices.includes(answer)) {
                 choiceCountMap[answer]++;
               } else if (noneLabel && answer === noneLabel) {
                 noneCount++;
@@ -475,8 +452,8 @@ export const getElementSummary = async (
         }
 
         summary.push({
-          type: element.type,
+          type: question.type,
-          element,
+          question,
           responseCount: totalResponseCount,
           selectionCount: totalSelectionCount,
           choices: values,
@@ -485,18 +462,18 @@ export const getElementSummary = async (
         values = [];
         break;
       }
-      case TSurveyElementTypeEnum.PictureSelection: {
+      case TSurveyQuestionTypeEnum.PictureSelection: {
-        let values: TSurveyElementSummaryPictureSelection["choices"] = [];
+        let values: TSurveyQuestionSummaryPictureSelection["choices"] = [];
         const choiceCountMap: Record<string, number> = {};
 
-        element.choices.forEach((choice) => {
+        question.choices.forEach((choice) => {
           choiceCountMap[choice.id] = 0;
         });
         let totalResponseCount = 0;
         let totalSelectionCount = 0;
 
         responses.forEach((response) => {
-          const answer = response.data[element.id];
+          const answer = response.data[question.id];
           if (Array.isArray(answer)) {
             totalResponseCount++;
             answer.forEach((value) => {
@@ -506,7 +483,7 @@ export const getElementSummary = async (
           }
         });
 
-        element.choices.forEach((choice) => {
+        question.choices.forEach((choice) => {
           values.push({
             id: choice.id,
             imageUrl: choice.imageUrl,
@@ -519,8 +496,8 @@ export const getElementSummary = async (
         });
 
         summary.push({
-          type: element.type,
+          type: question.type,
-          element,
+          question,
           responseCount: totalResponseCount,
           selectionCount: totalSelectionCount,
           choices: values,
@@ -529,10 +506,10 @@ export const getElementSummary = async (
         values = [];
         break;
       }
-      case TSurveyElementTypeEnum.Rating: {
+      case TSurveyQuestionTypeEnum.Rating: {
-        let values: TSurveyElementSummaryRating["choices"] = [];
+        let values: TSurveyQuestionSummaryRating["choices"] = [];
         const choiceCountMap: Record<number, number> = {};
-        const range = element.range;
+        const range = question.range;
 
         for (let i = 1; i <= range; i++) {
           choiceCountMap[i] = 0;
@@ -543,12 +520,12 @@ export const getElementSummary = async (
         let dismissed = 0;
 
         responses.forEach((response) => {
-          const answer = response.data[element.id];
+          const answer = response.data[question.id];
           if (typeof answer === "number") {
             totalResponseCount++;
             choiceCountMap[answer]++;
             totalRating += answer;
-          } else if (response.ttc && response.ttc[element.id] > 0) {
+          } else if (response.ttc && response.ttc[question.id] > 0) {
             dismissed++;
           }
         });
@@ -581,8 +558,8 @@ export const getElementSummary = async (
           totalResponseCount > 0 ? Math.round((satisfiedCount / totalResponseCount) * 100) : 0;
 
         summary.push({
-          type: element.type,
+          type: question.type,
-          element,
+          question,
           average: convertFloatTo2Decimal(totalRating / totalResponseCount) || 0,
           responseCount: totalResponseCount,
           choices: values,
@@ -598,7 +575,7 @@ export const getElementSummary = async (
         values = [];
         break;
       }
-      case TSurveyElementTypeEnum.NPS: {
+      case TSurveyQuestionTypeEnum.NPS: {
         const data = {
           promoters: 0,
           passives: 0,
@@ -615,7 +592,7 @@ export const getElementSummary = async (
         }
 
         responses.forEach((response) => {
-          const value = response.data[element.id];
+          const value = response.data[question.id];
           if (typeof value === "number") {
             data.total++;
             scoreCountMap[value]++;
@@ -626,7 +603,7 @@ export const getElementSummary = async (
             } else {
               data.detractors++;
             }
-          } else if (response.ttc && response.ttc[element.id] > 0) {
+          } else if (response.ttc && response.ttc[question.id] > 0) {
             data.total++;
             data.dismissed++;
           }
@@ -645,8 +622,8 @@ export const getElementSummary = async (
         }));
 
         summary.push({
-          type: element.type,
+          type: question.type,
-          element,
+          question,
           responseCount: data.total,
           total: data.total,
           score: data.score,
@@ -670,19 +647,14 @@ export const getElementSummary = async (
         });
         break;
       }
-      case TSurveyElementTypeEnum.CTA: {
+      case TSurveyQuestionTypeEnum.CTA: {
-        // Only calculate summary for CTA elements with external buttons (CTR tracking is only meaningful for external links)
-        if (!element.buttonExternal) {
-          break;
-        }
-
         const data = {
           clicked: 0,
           dismissed: 0,
         };
 
         responses.forEach((response) => {
-          const value = response.data[element.id];
+          const value = response.data[question.id];
           if (value === "clicked") {
             data.clicked++;
           } else if (value === "dismissed") {
@@ -691,12 +663,12 @@ export const getElementSummary = async (
         });
 
         const totalResponses = data.clicked + data.dismissed;
-        const idx = elements.findIndex((q) => q.id === element.id);
+        const idx = survey.questions.findIndex((q) => q.id === question.id);
         const impressions = dropOff[idx].impressions;
 
         summary.push({
-          type: element.type,
+          type: question.type,
-          element,
+          question,
           impressionCount: impressions,
           clickCount: data.clicked,
           skipCount: data.dismissed,
@@ -708,17 +680,17 @@ export const getElementSummary = async (
         });
         break;
       }
-      case TSurveyElementTypeEnum.Consent: {
+      case TSurveyQuestionTypeEnum.Consent: {
         const data = {
           accepted: 0,
           dismissed: 0,
         };
 
         responses.forEach((response) => {
-          const value = response.data[element.id];
+          const value = response.data[question.id];
           if (value === "accepted") {
             data.accepted++;
-          } else if (response.ttc && response.ttc[element.id] > 0) {
+          } else if (response.ttc && response.ttc[question.id] > 0) {
             data.dismissed++;
           }
         });
@@ -726,8 +698,8 @@ export const getElementSummary = async (
         const totalResponses = data.accepted + data.dismissed;
 
         summary.push({
-          type: element.type,
+          type: question.type,
-          element,
+          question,
           responseCount: totalResponses,
           accepted: {
             count: data.accepted,
@@ -743,10 +715,10 @@ export const getElementSummary = async (
 
         break;
       }
-      case TSurveyElementTypeEnum.Date: {
+      case TSurveyQuestionTypeEnum.Date: {
-        let values: TSurveyElementSummaryDate["samples"] = [];
+        let values: TSurveyQuestionSummaryDate["samples"] = [];
         responses.forEach((response) => {
-          const answer = response.data[element.id];
+          const answer = response.data[question.id];
           if (answer && typeof answer === "string") {
             values.push({
               id: response.id,
@@ -759,8 +731,8 @@ export const getElementSummary = async (
         });
 
         summary.push({
-          type: element.type,
+          type: question.type,
-          element,
+          question,
           responseCount: values.length,
           samples: values.slice(0, VALUES_LIMIT),
         });
@@ -768,10 +740,10 @@ export const getElementSummary = async (
         values = [];
         break;
       }
-      case TSurveyElementTypeEnum.FileUpload: {
+      case TSurveyQuestionTypeEnum.FileUpload: {
-        let values: TSurveyElementSummaryFileUpload["files"] = [];
+        let values: TSurveyQuestionSummaryFileUpload["files"] = [];
         responses.forEach((response) => {
-          const answer = response.data[element.id];
+          const answer = response.data[question.id];
           if (Array.isArray(answer)) {
             values.push({
               id: response.id,
@@ -784,8 +756,8 @@ export const getElementSummary = async (
         });
 
         summary.push({
-          type: element.type,
+          type: question.type,
-          element,
+          question,
           responseCount: values.length,
           files: values.slice(0, VALUES_LIMIT),
         });
@@ -793,25 +765,25 @@ export const getElementSummary = async (
         values = [];
         break;
       }
-      case TSurveyElementTypeEnum.Cal: {
+      case TSurveyQuestionTypeEnum.Cal: {
         const data = {
           booked: 0,
           skipped: 0,
         };
 
         responses.forEach((response) => {
-          const value = response.data[element.id];
+          const value = response.data[question.id];
           if (value === "booked") {
             data.booked++;
-          } else if (response.ttc && response.ttc[element.id] > 0) {
+          } else if (response.ttc && response.ttc[question.id] > 0) {
             data.skipped++;
           }
         });
         const totalResponses = data.booked + data.skipped;
 
         summary.push({
-          type: element.type,
+          type: question.type,
-          element,
+          question,
           responseCount: totalResponses,
           booked: {
             count: data.booked,
@@ -826,9 +798,9 @@ export const getElementSummary = async (
 
         break;
       }
-      case TSurveyElementTypeEnum.Matrix: {
+      case TSurveyQuestionTypeEnum.Matrix: {
-        const rows = element.rows.map((row) => getLocalizedValue(row.label, "default"));
+        const rows = question.rows.map((row) => getLocalizedValue(row.label, "default"));
-        const columns = element.columns.map((column) => getLocalizedValue(column.label, "default"));
+        const columns = question.columns.map((column) => getLocalizedValue(column.label, "default"));
         let totalResponseCount = 0;
 
         // Initialize count object
@@ -841,13 +813,13 @@ export const getElementSummary = async (
         }, {});
 
         responses.forEach((response) => {
-          const selectedResponses = response.data[element.id] as Record<string, string>;
+          const selectedResponses = response.data[question.id] as Record<string, string>;
           const responseLanguageCode = getLanguageCode(survey.languages, response.language);
           if (selectedResponses) {
             totalResponseCount++;
-            element.rows.forEach((row) => {
+            question.rows.forEach((row) => {
               const localizedRow = getLocalizedValue(row.label, responseLanguageCode);
-              const colValue = element.columns.find((column) => {
+              const colValue = question.columns.find((column) => {
                 return (
                   getLocalizedValue(column.label, responseLanguageCode) === selectedResponses[localizedRow]
                 );
@@ -880,17 +852,18 @@ export const getElementSummary = async (
         });
 
         summary.push({
-          type: element.type,
+          type: question.type,
-          element,
+          question,
           responseCount: totalResponseCount,
           data: matrixSummary,
         });
         break;
       }
-      case TSurveyElementTypeEnum.Address: {
+      case TSurveyQuestionTypeEnum.Address:
-        let values: TSurveyElementSummaryAddress["samples"] = [];
+      case TSurveyQuestionTypeEnum.ContactInfo: {
+        let values: TSurveyQuestionSummaryAddress["samples"] = [];
         responses.forEach((response) => {
-          const answer = response.data[element.id];
+          const answer = response.data[question.id];
           if (Array.isArray(answer) && answer.length > 0) {
             values.push({
               id: response.id,
@@ -903,8 +876,8 @@ export const getElementSummary = async (
         });
 
         summary.push({
-          type: TSurveyElementTypeEnum.Address,
+          type: question.type as TSurveyQuestionTypeEnum.ContactInfo,
-          element,
+          question: question as TSurveyContactInfoQuestion,
           responseCount: values.length,
           samples: values.slice(0, VALUES_LIMIT),
         });
@@ -912,39 +885,13 @@ export const getElementSummary = async (
         values = [];
         break;
       }
-      case TSurveyElementTypeEnum.ContactInfo: {
+      case TSurveyQuestionTypeEnum.Ranking: {
-        let values: TSurveyElementSummaryContactInfo["samples"] = [];
+        let values: TSurveyQuestionSummaryRanking["choices"] = [];
-        responses.forEach((response) => {
+        const questionChoices = question.choices.map((choice) => getLocalizedValue(choice.label, "default"));
-          const answer = response.data[element.id];
-          if (Array.isArray(answer) && answer.length > 0) {
-            values.push({
-              id: response.id,
-              updatedAt: response.updatedAt,
-              value: answer,
-              contact: response.contact,
-              contactAttributes: response.contactAttributes,
-            });
-          }
-        });
-
-        summary.push({
-          type: TSurveyElementTypeEnum.ContactInfo,
-          element,
-          responseCount: values.length,
-          samples: values.slice(0, VALUES_LIMIT),
-        });
-
-        values = [];
-        break;
-      }
-      case TSurveyElementTypeEnum.Ranking: {
-        let values: TSurveyElementSummaryRanking["choices"] = [];
-        const elementChoices = element.choices.map((choice) => getLocalizedValue(choice.label, "default"));
         let totalResponseCount = 0;
         const choiceRankSums: Record<string, number> = {};
         const choiceCountMap: Record<string, number> = {};
-
+        questionChoices.forEach((choice) => {
-        elementChoices.forEach((choice: string) => {
           choiceRankSums[choice] = 0;
           choiceCountMap[choice] = 0;
         });
@@ -954,14 +901,14 @@ export const getElementSummary = async (
 
           const answer =
             responseLanguageCode === "default"
-              ? response.data[element.id]
+              ? response.data[question.id]
-              : checkForI18n(response.data, element.id, elements, responseLanguageCode);
+              : checkForI18n(response.data, question.id, survey, responseLanguageCode);
 
           if (Array.isArray(answer)) {
             totalResponseCount++;
             answer.forEach((value, index) => {
               const ranking = index + 1; // Calculate ranking based on index
-              if (elementChoices.includes(value)) {
+              if (questionChoices.includes(value)) {
                 choiceRankSums[value] += ranking;
                 choiceCountMap[value]++;
               }
@@ -969,7 +916,7 @@ export const getElementSummary = async (
           }
         });
 
-        elementChoices.forEach((choice: string) => {
+        questionChoices.forEach((choice) => {
           const count = choiceCountMap[choice];
           const avgRanking = count > 0 ? choiceRankSums[choice] / count : 0;
           values.push({
@@ -980,8 +927,8 @@ export const getElementSummary = async (
         });
 
         summary.push({
-          type: element.type,
+          type: question.type,
-          element,
+          question,
           responseCount: totalResponseCount,
           choices: values,
         });
@@ -992,7 +939,7 @@ export const getElementSummary = async (
   }
 
   survey.hiddenFields?.fieldIds?.forEach((hiddenFieldId) => {
-    let values: TSurveyElementSummaryHiddenFields["samples"] = [];
+    let values: TSurveyQuestionSummaryHiddenFields["samples"] = [];
     responses.forEach((response) => {
       const answer = response.data[hiddenFieldId];
       if (answer && typeof answer === "string") {
@@ -1028,8 +975,6 @@ export const getSurveySummary = reactCache(
         throw new ResourceNotFoundError("Survey", surveyId);
       }
 
-      const elements = getElementsFromBlocks(survey.blocks);
-
       const batchSize = 5000;
       const hasFilter = Object.keys(filterCriteria ?? {}).length > 0;
 
@@ -1060,16 +1005,16 @@ export const getSurveySummary = reactCache(
         getQuotasSummary(surveyId),
       ]);
 
-      const dropOff = getSurveySummaryDropOff(survey, elements, responses, displayCount);
+      const dropOff = getSurveySummaryDropOff(survey, responses, displayCount);
-      const [meta, elementSummary] = await Promise.all([
+      const [meta, questionWiseSummary] = await Promise.all([
         getSurveySummaryMeta(responses, displayCount, quotas),
-        getElementSummary(survey, elements, responses, dropOff),
+        getQuestionSummary(survey, responses, dropOff),
       ]);
 
       return {
         meta,
         dropOff,
-        summary: elementSummary,
+        summary: questionWiseSummary,
         quotas,
       };
     } catch (error) {

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/lib/utils.test.ts

@@ -1,6 +1,5 @@
 import { describe, expect, test, vi } from "vitest";
-import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+import { TSurvey, TSurveyQuestion, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
-import { TSurvey } from "@formbricks/types/surveys/types";
 import { constructToastMessage, convertFloatTo2Decimal, convertFloatToNDecimal } from "./utils";
 
 describe("Utils Tests", () => {
@@ -35,40 +34,29 @@ describe("Utils Tests", () => {
       type: "app",
       environmentId: "env1",
       status: "draft",
-      blocks: [
+      questions: [
         {
-          id: "block1",
+          id: "q1",
-          name: "Block 1",
+          type: TSurveyQuestionTypeEnum.OpenText,
-          elements: [
+          headline: { default: "Q1" },
-            {
+          required: false,
-              id: "q1",
+        } as unknown as TSurveyQuestion,
-              type: TSurveyElementTypeEnum.OpenText,
+        {
-              headline: { default: "Q1" },
+          id: "q2",
-              required: false,
+          type: TSurveyQuestionTypeEnum.MultipleChoiceSingle,
-              charLimit: { enabled: false },
+          headline: { default: "Q2" },
-            },
+          required: false,
-            {
+          choices: [{ id: "c1", label: { default: "Choice 1" } }],
-              id: "q2",
+        },
-              type: TSurveyElementTypeEnum.MultipleChoiceSingle,
+        {
-              headline: { default: "Q2" },
+          id: "q3",
-              required: false,
+          type: TSurveyQuestionTypeEnum.Matrix,
-              choices: [{ id: "c1", label: { default: "Choice 1" } }],
+          headline: { default: "Q3" },
-              buttonLabel: { default: "Next" },
+          required: false,
-              shuffleOption: "none",
+          rows: [{ id: "r1", label: { default: "Row 1" } }],
-            },
+          columns: [{ id: "col1", label: { default: "Col 1" } }],
-            {
-              id: "q3",
-              type: TSurveyElementTypeEnum.Matrix,
-              headline: { default: "Q3" },
-              required: false,
-              rows: [{ id: "r1", label: { default: "Row 1" } }],
-              columns: [{ id: "col1", label: { default: "Col 1" } }],
-              buttonLabel: { default: "Next" },
-            },
-          ],
         },
       ],
-      questions: [],
       triggers: [],
       recontactDays: null,
       autoClose: null,
@@ -86,7 +74,7 @@ describe("Utils Tests", () => {
 
     test("should construct message for matrix question type", () => {
       const message = constructToastMessage(
-        TSurveyElementTypeEnum.Matrix,
+        TSurveyQuestionTypeEnum.Matrix,
         "is",
         mockSurvey,
         "q3",
@@ -107,7 +95,7 @@ describe("Utils Tests", () => {
     });
 
     test("should construct message for matrix question type with array filterComboBoxValue", () => {
-      const message = constructToastMessage(TSurveyElementTypeEnum.Matrix, "is", mockSurvey, "q3", mockT, [
+      const message = constructToastMessage(TSurveyQuestionTypeEnum.Matrix, "is", mockSurvey, "q3", mockT, [
         "MatrixValue1",
         "MatrixValue2",
       ]);
@@ -126,7 +114,7 @@ describe("Utils Tests", () => {
 
     test("should construct message when filterComboBoxValue is undefined (skipped)", () => {
       const message = constructToastMessage(
-        TSurveyElementTypeEnum.OpenText,
+        TSurveyQuestionTypeEnum.OpenText,
         "is skipped",
         mockSurvey,
         "q1",
@@ -146,7 +134,7 @@ describe("Utils Tests", () => {
 
     test("should construct message for non-matrix question with string filterComboBoxValue", () => {
       const message = constructToastMessage(
-        TSurveyElementTypeEnum.MultipleChoiceSingle,
+        TSurveyQuestionTypeEnum.MultipleChoiceSingle,
         "is",
         mockSurvey,
         "q2",
@@ -168,7 +156,7 @@ describe("Utils Tests", () => {
 
     test("should construct message for non-matrix question with array filterComboBoxValue", () => {
       const message = constructToastMessage(
-        TSurveyElementTypeEnum.MultipleChoiceMulti,
+        TSurveyQuestionTypeEnum.MultipleChoiceMulti,
         "includes all of",
         mockSurvey,
         "q2", // Assuming q2 can be multi for this test case logic
@@ -190,7 +178,7 @@ describe("Utils Tests", () => {
 
     test("should handle questionId not found in survey", () => {
       const message = constructToastMessage(
-        TSurveyElementTypeEnum.OpenText,
+        TSurveyQuestionTypeEnum.OpenText,
         "is",
         mockSurvey,
         "qNonExistent",

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/lib/utils.ts

@@ -1,7 +1,5 @@
 import { TFunction } from "i18next";
-import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+import { TSurvey, TSurveyQuestionId, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
-import { TSurvey } from "@formbricks/types/surveys/types";
-import { getElementsFromBlocks } from "@/modules/survey/lib/client-utils";
 
 export const convertFloatToNDecimal = (num: number, N: number = 2) => {
   return Math.round(num * Math.pow(10, N)) / Math.pow(10, N);
@@ -12,28 +10,27 @@ export const convertFloatTo2Decimal = (num: number) => {
 };
 
 export const constructToastMessage = (
-  elementType: TSurveyElementTypeEnum,
+  questionType: TSurveyQuestionTypeEnum,
   filterValue: string,
   survey: TSurvey,
-  elementId: string,
+  questionId: TSurveyQuestionId,
   t: TFunction,
   filterComboBoxValue?: string | string[]
 ) => {
-  const elements = getElementsFromBlocks(survey.blocks);
+  const questionIdx = survey.questions.findIndex((question) => question.id === questionId);
-  const elementIdx = elements.findIndex((element) => element.id === elementId);
+  if (questionType === "matrix") {
-  if (elementType === "matrix") {
     return t("environments.surveys.summary.added_filter_for_responses_where_answer_to_question", {
-      questionIdx: elementIdx + 1,
+      questionIdx: questionIdx + 1,
       filterComboBoxValue: filterComboBoxValue?.toString() ?? "",
       filterValue,
     });
   } else if (filterComboBoxValue === undefined) {
     return t("environments.surveys.summary.added_filter_for_responses_where_answer_to_question_is_skipped", {
-      questionIdx: elementIdx + 1,
+      questionIdx: questionIdx + 1,
     });
   } else {
     return t("environments.surveys.summary.added_filter_for_responses_where_answer_to_question", {
-      questionIdx: elementIdx + 1,
+      questionIdx: questionIdx + 1,
       filterComboBoxValue: Array.isArray(filterComboBoxValue)
         ? filterComboBoxValue.join(",")
         : filterComboBoxValue,

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/CustomFilter.tsx

@@ -25,7 +25,7 @@ import { TSurvey } from "@formbricks/types/surveys/types";
 import {
   DateRange,
   useResponseFilter,
-} from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/response-filter-context";
+} from "@/app/(app)/environments/[environmentId]/components/ResponseFilterContext";
 import { getResponsesDownloadUrlAction } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/actions";
 import { downloadResponsesFile } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/utils";
 import { getFormattedFilters, getTodayDate } from "@/app/lib/surveys/surveys";
@@ -164,12 +164,12 @@ export const CustomFilter = ({ survey }: CustomFilterProps) => {
 
   const datePickerRef = useRef<HTMLDivElement>(null);
 
-  const extractMetadataKeys = useCallback((obj, parentKey = "") => {
+  const extracMetadataKeys = useCallback((obj, parentKey = "") => {
     let keys: string[] = [];
 
     for (let key in obj) {
       if (typeof obj[key] === "object" && obj[key] !== null) {
-        keys = keys.concat(extractMetadataKeys(obj[key], parentKey + key + " - "));
+        keys = keys.concat(extracMetadataKeys(obj[key], parentKey + key + " - "));
       } else {
         keys.push(parentKey + key);
       }

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionFilterComboBox.tsx

@@ -4,9 +4,8 @@ import clsx from "clsx";
 import { ChevronDown, ChevronUp, X } from "lucide-react";
 import { useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { TI18nString } from "@formbricks/types/i18n";
+import { TI18nString, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
-import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+import { OptionsType } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionsComboBox";
-import { OptionsType } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ElementsComboBox";
 import { getLocalizedValue } from "@/lib/i18n/utils";
 import { useClickOutside } from "@/lib/utils/hooks/useClickOutside";
 import { Button } from "@/modules/ui/components/button";
@@ -26,29 +25,20 @@ import {
 } from "@/modules/ui/components/dropdown-menu";
 import { Input } from "@/modules/ui/components/input";
 
-const DEFAULT_LANGUAGE_CODE = "default";
+type QuestionFilterComboBoxProps = {
-
-// Helper to get localized option value
-const getOptionValue = (option: string | TI18nString): string => {
-  return typeof option === "object" && option !== null
-    ? getLocalizedValue(option, DEFAULT_LANGUAGE_CODE)
-    : option;
-};
-
-type ElementFilterComboBoxProps = {
   filterOptions: (string | TI18nString)[] | undefined;
   filterComboBoxOptions: (string | TI18nString)[] | undefined;
   filterValue: string | undefined;
   filterComboBoxValue: string | string[] | undefined;
   onChangeFilterValue: (o: string) => void;
   onChangeFilterComboBoxValue: (o: string | string[]) => void;
-  type?: TSurveyElementTypeEnum | Omit<OptionsType, OptionsType.ELEMENTS>;
+  type?: TSurveyQuestionTypeEnum | Omit<OptionsType, OptionsType.QUESTIONS>;
   handleRemoveMultiSelect: (value: string[]) => void;
   disabled?: boolean;
   fieldId?: string;
 };
 
-export const ElementFilterComboBox = ({
+export const QuestionFilterComboBox = ({
   filterComboBoxOptions,
   filterComboBoxValue,
   filterOptions,
@@ -59,7 +49,7 @@ export const ElementFilterComboBox = ({
   handleRemoveMultiSelect,
   disabled = false,
   fieldId,
-}: ElementFilterComboBoxProps) => {
+}: QuestionFilterComboBoxProps) => {
   const [open, setOpen] = useState(false);
   const commandRef = useRef(null);
   const [searchQuery, setSearchQuery] = useState("");
@@ -67,28 +57,32 @@ export const ElementFilterComboBox = ({
 
   useClickOutside(commandRef, () => setOpen(false));
 
+  const defaultLanguageCode = "default";
+
   // Check if multiple selection is allowed
-  const isMultiSelectType =
+  const isMultiple = useMemo(
-    type === TSurveyElementTypeEnum.MultipleChoiceMulti ||
+    () =>
-    type === TSurveyElementTypeEnum.MultipleChoiceSingle ||
+      type === TSurveyQuestionTypeEnum.MultipleChoiceMulti ||
-    type === TSurveyElementTypeEnum.PictureSelection;
+      type === TSurveyQuestionTypeEnum.MultipleChoiceSingle ||
-  const isNPSIncludesEither = type === TSurveyElementTypeEnum.NPS && filterValue === "Includes either";
+      type === TSurveyQuestionTypeEnum.PictureSelection ||
-  const isMultiple = isMultiSelectType || isNPSIncludesEither;
+      (type === TSurveyQuestionTypeEnum.NPS && filterValue === "Includes either"),
+    [type, filterValue]
+  );
 
   // Filter out already selected options for multi-select
   const options = useMemo(() => {
     if (!isMultiple) return filterComboBoxOptions;
 
     return filterComboBoxOptions?.filter((o) => {
-      const optionValue = getOptionValue(o);
+      const optionValue = typeof o === "object" && o !== null ? getLocalizedValue(o, defaultLanguageCode) : o;
       return !filterComboBoxValue?.includes(optionValue);
     });
-  }, [isMultiple, filterComboBoxOptions, filterComboBoxValue]);
+  }, [isMultiple, filterComboBoxOptions, filterComboBoxValue, defaultLanguageCode]);
 
   // Disable combo box for NPS/Rating when Submitted/Skipped
-  const isNPSOrRating = type === TSurveyElementTypeEnum.NPS || type === TSurveyElementTypeEnum.Rating;
+  const isDisabledComboBox =
-  const isSubmittedOrSkipped = filterValue === "Submitted" || filterValue === "Skipped";
+    (type === TSurveyQuestionTypeEnum.NPS || type === TSurveyQuestionTypeEnum.Rating) &&
-  const isDisabledComboBox = isNPSOrRating && isSubmittedOrSkipped;
+    (filterValue === "Submitted" || filterValue === "Skipped");
 
   // Check if this is a text input field (URL meta field)
   const isTextInputField = type === OptionsType.META && fieldId === "url";
@@ -97,14 +91,15 @@ export const ElementFilterComboBox = ({
   const filteredOptions = useMemo(
     () =>
       options?.filter((o) => {
-        const optionValue = getOptionValue(o);
+        const optionValue =
+          typeof o === "object" && o !== null ? getLocalizedValue(o, defaultLanguageCode) : o;
         return optionValue.toLowerCase().includes(searchQuery.toLowerCase());
       }),
-    [options, searchQuery]
+    [options, searchQuery, defaultLanguageCode]
   );
 
   const handleCommandItemSelect = (o: string | TI18nString) => {
-    const value = getOptionValue(o);
+    const value = typeof o === "object" && o !== null ? getLocalizedValue(o, defaultLanguageCode) : o;
 
     if (isMultiple) {
       const newValue = Array.isArray(filterComboBoxValue) ? [...filterComboBoxValue, value] : [value];
@@ -207,7 +202,8 @@ export const ElementFilterComboBox = ({
           </DropdownMenuTrigger>
           <DropdownMenuContent className="bg-white">
             {filterOptions?.map((o, index) => {
-              const optionValue = getOptionValue(o);
+              const optionValue =
+                typeof o === "object" && o !== null ? getLocalizedValue(o, defaultLanguageCode) : o;
               return (
                 <DropdownMenuItem
                   key={`${optionValue}-${index}`}
@@ -278,7 +274,8 @@ export const ElementFilterComboBox = ({
                 <CommandEmpty>{t("common.no_result_found")}</CommandEmpty>
                 <CommandGroup>
                   {filteredOptions?.map((o) => {
-                    const optionValue = getOptionValue(o);
+                    const optionValue =
+                      typeof o === "object" && o !== null ? getLocalizedValue(o, defaultLanguageCode) : o;
                     return (
                       <CommandItem
                         key={optionValue}

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionsComboBox.tsx

@@ -29,7 +29,7 @@ import {
 } from "lucide-react";
 import { Fragment, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+import { TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
 import { getLocalizedValue } from "@/lib/i18n/utils";
 import { useClickOutside } from "@/lib/utils/hooks/useClickOutside";
 import { Button } from "@/modules/ui/components/button";
@@ -44,7 +44,7 @@ import {
 import { NetPromoterScoreIcon } from "@/modules/ui/components/icons";
 
 export enum OptionsType {
-  ELEMENTS = "Elements",
+  QUESTIONS = "Questions",
   TAGS = "Tags",
   ATTRIBUTES = "Attributes",
   OTHERS = "Other Filters",
@@ -53,37 +53,37 @@ export enum OptionsType {
   QUOTAS = "Quotas",
 }
 
-export type ElementOption = {
+export type QuestionOption = {
   label: string;
-  elementType?: TSurveyElementTypeEnum;
+  questionType?: TSurveyQuestionTypeEnum;
   type: OptionsType;
   id: string;
 };
-export type ElementOptions = {
+export type QuestionOptions = {
   header: OptionsType;
-  option: ElementOption[];
+  option: QuestionOption[];
 };
 
-interface ElementComboBoxProps {
+interface QuestionComboBoxProps {
-  options: ElementOptions[];
+  options: QuestionOptions[];
-  selected: Partial<ElementOption>;
+  selected: Partial<QuestionOption>;
-  onChangeValue: (option: ElementOption) => void;
+  onChangeValue: (option: QuestionOption) => void;
 }
 
-const elementIcons = {
+const questionIcons = {
-  // elements
+  // questions
-  [TSurveyElementTypeEnum.OpenText]: MessageSquareTextIcon,
+  [TSurveyQuestionTypeEnum.OpenText]: MessageSquareTextIcon,
-  [TSurveyElementTypeEnum.Rating]: StarIcon,
+  [TSurveyQuestionTypeEnum.Rating]: StarIcon,
-  [TSurveyElementTypeEnum.CTA]: MousePointerClickIcon,
+  [TSurveyQuestionTypeEnum.CTA]: MousePointerClickIcon,
-  [TSurveyElementTypeEnum.MultipleChoiceMulti]: ListIcon,
+  [TSurveyQuestionTypeEnum.MultipleChoiceMulti]: ListIcon,
-  [TSurveyElementTypeEnum.MultipleChoiceSingle]: Rows3Icon,
+  [TSurveyQuestionTypeEnum.MultipleChoiceSingle]: Rows3Icon,
-  [TSurveyElementTypeEnum.NPS]: NetPromoterScoreIcon,
+  [TSurveyQuestionTypeEnum.NPS]: NetPromoterScoreIcon,
-  [TSurveyElementTypeEnum.Consent]: CheckIcon,
+  [TSurveyQuestionTypeEnum.Consent]: CheckIcon,
-  [TSurveyElementTypeEnum.PictureSelection]: ImageIcon,
+  [TSurveyQuestionTypeEnum.PictureSelection]: ImageIcon,
-  [TSurveyElementTypeEnum.Matrix]: GridIcon,
+  [TSurveyQuestionTypeEnum.Matrix]: GridIcon,
-  [TSurveyElementTypeEnum.Ranking]: ListOrderedIcon,
+  [TSurveyQuestionTypeEnum.Ranking]: ListOrderedIcon,
-  [TSurveyElementTypeEnum.Address]: HomeIcon,
+  [TSurveyQuestionTypeEnum.Address]: HomeIcon,
-  [TSurveyElementTypeEnum.ContactInfo]: ContactIcon,
+  [TSurveyQuestionTypeEnum.ContactInfo]: ContactIcon,
 
   // attributes
   [OptionsType.ATTRIBUTES]: User,
@@ -111,14 +111,14 @@ const elementIcons = {
 };
 
 const getIcon = (type: string) => {
-  const IconComponent = elementIcons[type];
+  const IconComponent = questionIcons[type];
   return IconComponent ? <IconComponent className="h-5 w-5" strokeWidth={1.5} /> : null;
 };
 
 const getIconBackground = (type: OptionsType | string): string => {
   const backgroundMap: Record<string, string> = {
     [OptionsType.ATTRIBUTES]: "bg-indigo-500",
-    [OptionsType.ELEMENTS]: "bg-brand-dark",
+    [OptionsType.QUESTIONS]: "bg-brand-dark",
     [OptionsType.TAGS]: "bg-indigo-500",
     [OptionsType.QUOTAS]: "bg-slate-500",
   };
@@ -130,10 +130,10 @@ const getLabelClassName = (type: OptionsType | string, label?: string): string =
   return label === "os" || label === "url" ? "uppercase" : "capitalize";
 };
 
-export const SelectedCommandItem = ({ label, elementType, type }: Partial<ElementOption>) => {
+export const SelectedCommandItem = ({ label, questionType, type }: Partial<QuestionOption>) => {
   const getDisplayIcon = () => {
     if (!type) return null;
-    if (type === OptionsType.ELEMENTS && elementType) return getIcon(elementType);
+    if (type === OptionsType.QUESTIONS && questionType) return getIcon(questionType);
     if (type === OptionsType.ATTRIBUTES) return getIcon(OptionsType.ATTRIBUTES);
     if (type === OptionsType.HIDDEN_FIELDS) return getIcon(OptionsType.HIDDEN_FIELDS);
     if ([OptionsType.META, OptionsType.OTHERS].includes(type) && label) return getIcon(label);
@@ -158,7 +158,7 @@ export const SelectedCommandItem = ({ label, elementType, type }: Partial<Elemen
   );
 };
 
-export const ElementsComboBox = ({ options, selected, onChangeValue }: ElementComboBoxProps) => {
+export const QuestionsComboBox = ({ options, selected, onChangeValue }: QuestionComboBoxProps) => {
   const [open, setOpen] = useState(false);
   const { t } = useTranslation();
   const commandRef = useRef(null);
@@ -209,7 +209,7 @@ export const ElementsComboBox = ({ options, selected, onChangeValue }: ElementCo
 
       {open && (
         <div className="animate-in absolute top-full z-10 mt-1 w-full overflow-auto rounded-md shadow-md outline-none">
-          <CommandList className="max-h-[600px]">
+          <CommandList>
             <CommandEmpty>{t("common.no_result_found")}</CommandEmpty>
             {options?.map((data) => (
               <Fragment key={data.header}>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ResponseFilter.tsx

@@ -4,17 +4,15 @@ import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { ChevronDown, ChevronUp, Plus, TrashIcon } from "lucide-react";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { TI18nString } from "@formbricks/types/i18n";
+import { TI18nString, TSurvey, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
-import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
-import { TSurvey } from "@formbricks/types/surveys/types";
 import {
   SelectedFilterValue,
   TResponseStatus,
   useResponseFilter,
-} from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/response-filter-context";
+} from "@/app/(app)/environments/[environmentId]/components/ResponseFilterContext";
 import { getSurveyFilterDataAction } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/actions";
-import { ElementFilterComboBox } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ElementFilterComboBox";
+import { QuestionFilterComboBox } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionFilterComboBox";
-import { generateElementAndFilterOptions } from "@/app/lib/surveys/surveys";
+import { generateQuestionAndFilterOptions } from "@/app/lib/surveys/surveys";
 import { getLocalizedValue } from "@/lib/i18n/utils";
 import { Button } from "@/modules/ui/components/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/modules/ui/components/popover";
@@ -25,11 +23,11 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/modules/ui/components/select";
-import { ElementOption, ElementsComboBox, OptionsType } from "./ElementsComboBox";
+import { OptionsType, QuestionOption, QuestionsComboBox } from "./QuestionsComboBox";
 
-export type ElementFilterOptions = {
+export type QuestionFilterOptions = {
   type:
-    | TSurveyElementTypeEnum
+    | TSurveyQuestionTypeEnum
     | "Attributes"
     | "Tags"
     | "Languages"
@@ -80,7 +78,7 @@ export const ResponseFilter = ({ survey }: ResponseFilterProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [filterValue, setFilterValue] = useState<SelectedFilterValue>(selectedFilter);
 
-  const getDefaultFilterValue = (option?: ElementFilterOptions): string | undefined => {
+  const getDefaultFilterValue = (option?: QuestionFilterOptions): string | undefined => {
     if (!option || option.filterOptions.length === 0) return undefined;
     const firstOption = option.filterOptions[0];
     return typeof firstOption === "object" ? getLocalizedValue(firstOption, "default") : firstOption;
@@ -95,7 +93,7 @@ export const ResponseFilter = ({ survey }: ResponseFilterProps) => {
         if (!surveyFilterData?.data) return;
 
         const { attributes, meta, environmentTags, hiddenFields, quotas } = surveyFilterData.data;
-        const { elementFilterOptions, elementOptions } = generateElementAndFilterOptions(
+        const { questionFilterOptions, questionOptions } = generateQuestionAndFilterOptions(
           survey,
           environmentTags,
           attributes,
@@ -103,23 +101,23 @@ export const ResponseFilter = ({ survey }: ResponseFilterProps) => {
           hiddenFields,
           quotas
         );
-        setSelectedOptions({ elementFilterOptions: elementFilterOptions, elementOptions: elementOptions });
+        setSelectedOptions({ questionFilterOptions, questionOptions });
       }
     };
 
     handleInitialData();
   }, [isOpen, setSelectedOptions, survey]);
 
-  const handleOnChangeElementComboBoxValue = (value: ElementOption, index: number) => {
+  const handleOnChangeQuestionComboBoxValue = (value: QuestionOption, index: number) => {
-    const matchingFilterOption = selectedOptions.elementFilterOptions.find(
+    const matchingFilterOption = selectedOptions.questionFilterOptions.find(
-      (q) => q.type === value.type || q.type === value.elementType
+      (q) => q.type === value.type || q.type === value.questionType
     );
     const defaultFilterValue = getDefaultFilterValue(matchingFilterOption);
 
-    if (filterValue.filter[index].elementType) {
+    if (filterValue.filter[index].questionType) {
       // Create a new array and copy existing values from SelectedFilter
       filterValue.filter[index] = {
-        elementType: value,
+        questionType: value,
         filterType: {
           filterComboBoxValue: undefined,
           filterValue: defaultFilterValue,
@@ -128,7 +126,7 @@ export const ResponseFilter = ({ survey }: ResponseFilterProps) => {
       setFilterValue({ filter: [...filterValue.filter], responseStatus: filterValue.responseStatus });
     } else {
       // Update the existing value at the specified index
-      filterValue.filter[index].elementType = value;
+      filterValue.filter[index].questionType = value;
       filterValue.filter[index].filterType = {
         filterComboBoxValue: undefined,
         filterValue: defaultFilterValue,
@@ -141,8 +139,8 @@ export const ResponseFilter = ({ survey }: ResponseFilterProps) => {
   const clearItem = () => {
     setFilterValue({
       filter: filterValue.filter.filter((s) => {
-        // keep the filter if elementType is selected and filterComboBoxValue is selected
+        // keep the filter if questionType is selected and filterComboBoxValue is selected
-        return s.elementType.hasOwnProperty("label") && s.filterType.filterComboBoxValue?.length;
+        return s.questionType.hasOwnProperty("label") && s.filterType.filterComboBoxValue?.length;
       }),
       responseStatus: filterValue.responseStatus,
     });
@@ -162,7 +160,7 @@ export const ResponseFilter = ({ survey }: ResponseFilterProps) => {
       filter: [
         ...filterValue.filter,
         {
-          elementType: {},
+          questionType: {},
           filterType: { filterComboBoxValue: undefined, filterValue: undefined },
         },
       ],
@@ -214,10 +212,10 @@ export const ResponseFilter = ({ survey }: ResponseFilterProps) => {
   };
 
   // remove the filter which has already been selected
-  const elementComboBoxOptions = selectedOptions.elementOptions.map((q) => {
+  const questionComboBoxOptions = selectedOptions.questionOptions.map((q) => {
     return {
       ...q,
-      option: q.option.filter((o) => !filterValue.filter.some((f) => f?.elementType?.id === o?.id)),
+      option: q.option.filter((o) => !filterValue.filter.some((f) => f?.questionType?.id === o?.id)),
     };
   });
 
@@ -280,41 +278,41 @@ export const ResponseFilter = ({ survey }: ResponseFilterProps) => {
               <div className="flex w-full flex-wrap gap-3 md:flex-nowrap">
                 <div
                   className="grid w-full grid-cols-1 items-center gap-3 md:grid-cols-2"
-                  key={`${s.elementType.id}-${i}-${s.elementType.label}`}>
+                  key={`${s.questionType.id}-${i}-${s.questionType.label}`}>
-                  <ElementsComboBox
+                  <QuestionsComboBox
-                    key={`${s.elementType.label}-${i}-${s.elementType.id}`}
+                    key={`${s.questionType.label}-${i}-${s.questionType.id}`}
-                    options={elementComboBoxOptions}
+                    options={questionComboBoxOptions}
-                    selected={s.elementType}
+                    selected={s.questionType}
-                    onChangeValue={(value) => handleOnChangeElementComboBoxValue(value, i)}
+                    onChangeValue={(value) => handleOnChangeQuestionComboBoxValue(value, i)}
                   />
-                  <ElementFilterComboBox
+                  <QuestionFilterComboBox
-                    key={`${s.elementType.id}-${i}`}
+                    key={`${s.questionType.id}-${i}`}
                     filterOptions={
-                      selectedOptions.elementFilterOptions.find(
+                      selectedOptions.questionFilterOptions.find(
                         (q) =>
-                          (q.type === s.elementType.elementType || q.type === s.elementType.type) &&
+                          (q.type === s.questionType.questionType || q.type === s.questionType.type) &&
-                          q.id === s.elementType.id
+                          q.id === s.questionType.id
                       )?.filterOptions
                     }
                     filterComboBoxOptions={
-                      selectedOptions.elementFilterOptions.find(
+                      selectedOptions.questionFilterOptions.find(
                         (q) =>
-                          (q.type === s.elementType.elementType || q.type === s.elementType.type) &&
+                          (q.type === s.questionType.questionType || q.type === s.questionType.type) &&
-                          q.id === s.elementType.id
+                          q.id === s.questionType.id
                       )?.filterComboBoxOptions
                     }
                     filterValue={filterValue.filter[i].filterType.filterValue}
                     filterComboBoxValue={filterValue.filter[i].filterType.filterComboBoxValue}
                     type={
-                      s?.elementType?.type === OptionsType.ELEMENTS
+                      s?.questionType?.type === OptionsType.QUESTIONS
-                        ? s?.elementType?.elementType
+                        ? s?.questionType?.questionType
-                        : s?.elementType?.type
+                        : s?.questionType?.type
                     }
-                    fieldId={s?.elementType?.id}
+                    fieldId={s?.questionType?.id}
                     handleRemoveMultiSelect={(value) => handleRemoveMultiSelect(value, i)}
                     onChangeFilterComboBoxValue={(value) => handleOnChangeFilterComboBoxValue(value, i)}
                     onChangeFilterValue={(value) => handleOnChangeFilterValue(value, i)}
-                    disabled={!s?.elementType?.label}
+                    disabled={!s?.questionType?.label}
                   />
                 </div>
                 <div className="flex w-full items-center justify-end gap-1 md:w-auto">

apps/web/app/(app)/layout.tsx

@@ -1,9 +1,12 @@
 import { getServerSession } from "next-auth";
+import { Suspense } from "react";
 import { IntercomClientWrapper } from "@/app/intercom/IntercomClientWrapper";
+import { IS_POSTHOG_CONFIGURED, POSTHOG_API_HOST, POSTHOG_API_KEY } from "@/lib/constants";
 import { getUser } from "@/lib/user/service";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { ClientLogout } from "@/modules/ui/components/client-logout";
 import { NoMobileOverlay } from "@/modules/ui/components/no-mobile-overlay";
+import { PHProvider, PostHogPageview } from "@/modules/ui/components/post-hog-client";
 import { ToasterClient } from "@/modules/ui/components/toaster-client";
 
 const AppLayout = async ({ children }) => {
@@ -18,9 +21,20 @@ const AppLayout = async ({ children }) => {
   return (
     <>
       <NoMobileOverlay />
-      <IntercomClientWrapper user={user} />
+      <Suspense>
-      <ToasterClient />
+        <PostHogPageview
-      {children}
+          posthogEnabled={IS_POSTHOG_CONFIGURED}
+          postHogApiHost={POSTHOG_API_HOST}
+          postHogApiKey={POSTHOG_API_KEY}
+        />
+      </Suspense>
+      <PHProvider posthogEnabled={IS_POSTHOG_CONFIGURED}>
+        <>
+          <IntercomClientWrapper user={user} />
+          <ToasterClient />
+          {children}
+        </>
+      </PHProvider>
     </>
   );
 };

apps/web/app/api/(internal)/pipeline/lib/handleIntegrations.test.ts

@@ -23,8 +23,12 @@ import {
   TIntegrationSlackCredential,
 } from "@formbricks/types/integration/slack";
 import { TResponse, TResponseMeta } from "@formbricks/types/responses";
-import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+import {
-import { TSurvey, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
+  TSurvey,
+  TSurveyOpenTextQuestion,
+  TSurveyPictureSelectionQuestion,
+  TSurveyQuestionTypeEnum,
+} from "@formbricks/types/surveys/types";
 import { TPipelineInput } from "@/app/api/(internal)/pipeline/types/pipelines";
 import { writeData as airtableWriteData } from "@/lib/airtable/service";
 import { writeData as googleSheetWriteData } from "@/lib/googleSheet/service";
@@ -97,47 +101,33 @@ const mockPipelineInput = {
 const mockSurvey = {
   id: surveyId,
   name: "Test Survey",
-  blocks: [
+  questions: [
     {
-      id: "block1",
+      id: questionId1,
-      name: "Block 1",
+      type: TSurveyQuestionTypeEnum.OpenText,
-      elements: [
+      headline: { default: "Question 1 {{recall:q2}}" },
-        {
+      required: true,
-          id: questionId1,
+    } as unknown as TSurveyOpenTextQuestion,
-          type: TSurveyElementTypeEnum.OpenText,
+    {
-          headline: { default: "Question 1 {{recall:q2}}" },
+      id: questionId2,
-          required: true,
+      type: TSurveyQuestionTypeEnum.MultipleChoiceMulti,
-          inputType: "text",
+      headline: { default: "Question 2" },
-          charLimit: 1000,
+      required: true,
-          subheader: { default: "" },
+      choices: [
-          placeholder: { default: "" },
+        { id: "choice1", label: { default: "Choice 1" } },
-        },
+        { id: "choice2", label: { default: "Choice 2" } },
-        {
-          id: questionId2,
-          type: TSurveyElementTypeEnum.MultipleChoiceMulti,
-          headline: { default: "Question 2" },
-          required: true,
-          choices: [
-            { id: "choice1", label: { default: "Choice 1" } },
-            { id: "choice2", label: { default: "Choice 2" } },
-          ],
-          shuffleOption: "none",
-          subheader: { default: "" },
-        },
-        {
-          id: questionId3,
-          type: TSurveyElementTypeEnum.PictureSelection,
-          headline: { default: "Question 3" },
-          required: true,
-          choices: [
-            { id: "picChoice1", imageUrl: "http://image.com/1" },
-            { id: "picChoice2", imageUrl: "http://image.com/2" },
-          ],
-          allowMultiple: false,
-          subheader: { default: "" },
-        },
       ],
     },
+    {
+      id: questionId3,
+      type: TSurveyQuestionTypeEnum.PictureSelection,
+      headline: { default: "Question 3" },
+      required: true,
+      choices: [
+        { id: "picChoice1", imageUrl: "http://image.com/1" },
+        { id: "picChoice2", imageUrl: "http://image.com/2" },
+      ],
+    } as unknown as TSurveyPictureSelectionQuestion,
   ],
   hiddenFields: {
     enabled: true,
@@ -172,7 +162,7 @@ const mockAirtableIntegration: TIntegrationAirtable = {
     data: [
       {
         surveyId: surveyId,
-        elementIds: [questionId1, questionId2],
+        questionIds: [questionId1, questionId2],
         baseId: "base1",
         tableId: "table1",
         createdAt: new Date(),
@@ -196,8 +186,8 @@ const mockGoogleSheetsIntegration: TIntegrationGoogleSheets = {
         surveyId: surveyId,
         spreadsheetId: "sheet1",
         spreadsheetName: "Sheet Name",
-        elementIds: [questionId1],
+        questionIds: [questionId1],
-        elements: "What is Q1?",
+        questions: "What is Q1?",
         createdAt: new Date("2024-01-01T00:00:00.000Z"),
         includeHiddenFields: false,
         includeMetadata: false,
@@ -219,8 +209,8 @@ const mockSlackIntegration: TIntegrationSlack = {
         surveyId: surveyId,
         channelId: "channel1",
         channelName: "Channel 1",
-        elementIds: [questionId1, questionId2, questionId3],
+        questionIds: [questionId1, questionId2, questionId3],
-        elements: "Q1, Q2, Q3",
+        questions: "Q1, Q2, Q3",
         createdAt: new Date(),
         includeHiddenFields: true,
         includeMetadata: true,
@@ -249,19 +239,19 @@ const mockNotionIntegration: TIntegrationNotion = {
         databaseName: "DB 1",
         mapping: [
           {
-            element: { id: questionId1, name: "Question 1", type: TSurveyQuestionTypeEnum.OpenText },
+            question: { id: questionId1, name: "Question 1", type: TSurveyQuestionTypeEnum.OpenText },
             column: { id: "col1", name: "Column 1", type: "rich_text" },
           },
           {
-            element: { id: questionId3, name: "Question 3", type: TSurveyQuestionTypeEnum.PictureSelection },
+            question: { id: questionId3, name: "Question 3", type: TSurveyQuestionTypeEnum.PictureSelection },
             column: { id: "col3", name: "Column 3", type: "url" },
           },
           {
-            element: { id: "metadata", name: "Metadata", type: "metadata" },
+            question: { id: "metadata", name: "Metadata", type: "metadata" },
             column: { id: "col_meta", name: "Metadata Col", type: "rich_text" },
           },
           {
-            element: { id: "createdAt", name: "Created At", type: "createdAt" },
+            question: { id: "createdAt", name: "Created At", type: "createdAt" },
             column: { id: "col_created", name: "Created Col", type: "date" },
           },
         ],
@@ -351,14 +341,16 @@ describe("handleIntegrations", () => {
         mockAirtableIntegration.config.key,
         mockAirtableIntegration.config.data[0],
         [
-          "Answer 1",
+          [
-          "Choice 1, Choice 2",
+            "Answer 1",
-          "Hidden Value",
+            "Choice 1, Choice 2",
-          expectedMetadataString,
+            "Hidden Value",
-          "Variable Value",
+            expectedMetadataString,
-          "2024-01-01 12:00",
+            "Variable Value",
-        ], // responses + hidden + meta + var + created
+            "2024-01-01 12:00",
-        ["Question 1 {{recall:q2}}", "Question 2", hiddenFieldId, "Metadata", "Variable 1", "Created At"] // elements (raw headline for Airtable) + hidden + meta + var + created
+          ], // responses + hidden + meta + var + created
+          ["Question 1 {{recall:q2}}", "Question 2", hiddenFieldId, "Metadata", "Variable 1", "Created At"], // questions (raw headline for Airtable) + hidden + meta + var + created
+        ]
       );
     });
 
@@ -393,8 +385,10 @@ describe("handleIntegrations", () => {
       expect(googleSheetWriteData).toHaveBeenCalledWith(
         expectedIntegrationData,
         mockGoogleSheetsIntegration.config.data[0].spreadsheetId,
-        ["Answer 1"], // responses
+        [
-        ["Question 1 {{recall:q2}}"] // elements (raw headline for Google Sheets)
+          ["Answer 1"], // responses
+          ["Question 1 {{recall:q2}}"], // questions (raw headline for Google Sheets)
+        ]
       );
     });
 

apps/web/app/api/(internal)/pipeline/lib/handleIntegrations.ts

@@ -5,9 +5,8 @@ import { TIntegrationAirtable } from "@formbricks/types/integration/airtable";
 import { TIntegrationGoogleSheets } from "@formbricks/types/integration/google-sheet";
 import { TIntegrationNotion, TIntegrationNotionConfigData } from "@formbricks/types/integration/notion";
 import { TIntegrationSlack } from "@formbricks/types/integration/slack";
-import { TResponseDataValue, TResponseMeta } from "@formbricks/types/responses";
+import { TResponseMeta } from "@formbricks/types/responses";
-import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+import { TSurvey, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
-import { TSurvey } from "@formbricks/types/surveys/types";
 import { getTextContent } from "@formbricks/types/surveys/validation";
 import { TPipelineInput } from "@/app/api/(internal)/pipeline/types/pipelines";
 import { writeData as airtableWriteData } from "@/lib/airtable/service";
@@ -17,7 +16,6 @@ import { getLocalizedValue } from "@/lib/i18n/utils";
 import { writeData as writeNotionData } from "@/lib/notion/service";
 import { processResponseData } from "@/lib/responses";
 import { writeDataToSlack } from "@/lib/slack/service";
-import { getElementsFromBlocks } from "@/lib/survey/utils";
 import { getFormattedDateTimeString } from "@/lib/utils/datetime";
 import { parseRecallInfo } from "@/lib/utils/recall";
 import { truncateText } from "@/lib/utils/strings";
@@ -44,40 +42,33 @@ const processDataForIntegration = async (
   includeMetadata: boolean,
   includeHiddenFields: boolean,
   includeCreatedAt: boolean,
-  elementIds: string[]
+  questionIds: string[]
-): Promise<{
+): Promise<string[][]> => {
-  responses: string[];
-  elements: string[];
-}> => {
   const ids =
     includeHiddenFields && survey.hiddenFields.fieldIds
-      ? [...elementIds, ...survey.hiddenFields.fieldIds]
+      ? [...questionIds, ...survey.hiddenFields.fieldIds]
-      : elementIds;
+      : questionIds;
-  const { responses, elements } = await extractResponses(integrationType, data, ids, survey);
+  const values = await extractResponses(integrationType, data, ids, survey);
-
   if (includeMetadata) {
-    responses.push(convertMetaObjectToString(data.response.meta));
+    values[0].push(convertMetaObjectToString(data.response.meta));
-    elements.push("Metadata");
+    values[1].push("Metadata");
   }
   if (includeVariables) {
-    survey.variables?.forEach((variable) => {
+    survey.variables.forEach((variable) => {
       const value = data.response.variables[variable.id];
       if (value !== undefined) {
-        responses.push(String(data.response.variables[variable.id]));
+        values[0].push(String(data.response.variables[variable.id]));
-        elements.push(variable.name);
+        values[1].push(variable.name);
       }
     });
   }
   if (includeCreatedAt) {
     const date = new Date(data.response.createdAt);
-    responses.push(`${getFormattedDateTimeString(date)}`);
+    values[0].push(`${getFormattedDateTimeString(date)}`);
-    elements.push("Created At");
+    values[1].push("Created At");
   }
 
-  return {
+  return values;
-    responses,
-    elements,
-  };
 };
 
 export const handleIntegrations = async (
@@ -140,9 +131,9 @@ const handleAirtableIntegration = async (
             !!element.includeMetadata,
             !!element.includeHiddenFields,
             !!element.includeCreatedAt,
-            element.elementIds
+            element.questionIds
           );
-          await airtableWriteData(integration.config.key, element, values.responses, values.elements);
+          await airtableWriteData(integration.config.key, element, values);
         }
       }
     }
@@ -176,14 +167,14 @@ const handleGoogleSheetsIntegration = async (
             !!element.includeMetadata,
             !!element.includeHiddenFields,
             !!element.includeCreatedAt,
-            element.elementIds
+            element.questionIds
           );
           const integrationData = structuredClone(integration);
           integrationData.config.data.forEach((data) => {
             data.createdAt = new Date(data.createdAt);
           });
 
-          await writeData(integrationData, element.spreadsheetId, values.responses, values.elements);
+          await writeData(integrationData, element.spreadsheetId, values);
         }
       }
     }
@@ -217,15 +208,9 @@ const handleSlackIntegration = async (
             !!element.includeMetadata,
             !!element.includeHiddenFields,
             !!element.includeCreatedAt,
-            element.elementIds
+            element.questionIds
-          );
-          await writeDataToSlack(
-            integration.config.key,
-            element.channelId,
-            values.responses,
-            values.elements,
-            survey?.name
           );
+          await writeDataToSlack(integration.config.key, element.channelId, values, survey?.name);
         }
       }
     }
@@ -242,81 +227,63 @@ const handleSlackIntegration = async (
   }
 };
 
-// Helper to process a single element's response for integrations
-const processElementResponse = (
-  element: ReturnType<typeof getElementsFromBlocks>[number],
-  responseValue: TResponseDataValue
-): string => {
-  if (responseValue === undefined) {
-    return "";
-  }
-
-  if (element.type === TSurveyElementTypeEnum.PictureSelection) {
-    const selectedChoiceIds = responseValue as string[];
-    return element.choices
-      .filter((choice) => selectedChoiceIds.includes(choice.id))
-      .map((choice) => choice.imageUrl)
-      .join("\n");
-  }
-
-  return processResponseData(responseValue);
-};
-
-// Helper to create empty response object for non-slack integrations
-const createEmptyResponseObject = (responseData: Record<string, unknown>): Record<string, string> => {
-  return Object.keys(responseData).reduce(
-    (acc, key) => {
-      acc[key] = "";
-      return acc;
-    },
-    {} as Record<string, string>
-  );
-};
-
 const extractResponses = async (
   integrationType: TIntegrationType,
   pipelineData: TPipelineInput,
-  elementIds: string[],
+  questionIds: string[],
   survey: TSurvey
-): Promise<{
+): Promise<string[][]> => {
-  responses: string[];
-  elements: string[];
-}> => {
   const responses: string[] = [];
-  const elements: string[] = [];
+  const questions: string[] = [];
-  const surveyElements = getElementsFromBlocks(survey.blocks);
-  const emptyResponseObject = createEmptyResponseObject(pipelineData.response.data);
 
-  for (const elementId of elementIds) {
+  for (const questionId of questionIds) {
-    // Check for hidden field Ids
+    //check for hidden field Ids
-    if (survey.hiddenFields.fieldIds?.includes(elementId)) {
+    if (survey.hiddenFields.fieldIds?.includes(questionId)) {
-      responses.push(processResponseData(pipelineData.response.data[elementId]));
+      responses.push(processResponseData(pipelineData.response.data[questionId]));
-      elements.push(elementId);
+      questions.push(questionId);
+      continue;
+    }
+    const question = survey?.questions.find((q) => q.id === questionId);
+    if (!question) {
       continue;
     }
 
-    const element = surveyElements.find((q) => q.id === elementId);
+    const responseValue = pipelineData.response.data[questionId];
-    if (!element) {
+
-      continue;
+    if (responseValue !== undefined) {
+      let answer: typeof responseValue;
+      if (question.type === TSurveyQuestionTypeEnum.PictureSelection) {
+        const selectedChoiceIds = responseValue as string[];
+        answer = question?.choices
+          .filter((choice) => selectedChoiceIds.includes(choice.id))
+          .map((choice) => choice.imageUrl)
+          .join("\n");
+      } else {
+        answer = responseValue;
+      }
+
+      responses.push(processResponseData(answer));
+    } else {
+      responses.push("");
     }
-
+    // Create emptyResponseObject with same keys but empty string values
-    const responseValue = pipelineData.response.data[elementId];
+    const emptyResponseObject = Object.keys(pipelineData.response.data).reduce(
-    responses.push(processElementResponse(element, responseValue));
+      (acc, key) => {
-
+        acc[key] = "";
-    const responseDataForRecall =
+        return acc;
-      integrationType === "slack" ? pipelineData.response.data : emptyResponseObject;
+      },
-    const variablesForRecall = integrationType === "slack" ? pipelineData.response.variables : {};
+      {} as Record<string, string>
-
+    );
-    elements.push(
+    questions.push(
       parseRecallInfo(
-        getTextContent(getLocalizedValue(element.headline, "default")),
+        getTextContent(getLocalizedValue(question?.headline, "default")),
-        responseDataForRecall,
+        integrationType === "slack" ? pipelineData.response.data : emptyResponseObject,
-        variablesForRecall
+        integrationType === "slack" ? pipelineData.response.variables : {}
       ) || ""
     );
   }
 
-  return { responses, elements };
+  return [responses, questions];
 };
 
 const handleNotionIntegration = async (
@@ -354,34 +321,32 @@ const buildNotionPayloadProperties = (
   const properties: any = {};
   const responses = data.response.data;
 
-  const surveyElements = getElementsFromBlocks(surveyData.blocks);
+  const mappingQIds = mapping
-
+    .filter((m) => m.question.type === TSurveyQuestionTypeEnum.PictureSelection)
-  const mappingElementIds = mapping
+    .map((m) => m.question.id);
-    .filter((m) => m.element.type === TSurveyElementTypeEnum.PictureSelection)
-    .map((m) => m.element.id);
 
   Object.keys(responses).forEach((resp) => {
-    if (mappingElementIds.find((elementId) => elementId === resp)) {
+    if (mappingQIds.find((qId) => qId === resp)) {
       const selectedChoiceIds = responses[resp] as string[];
-      const pictureElement = surveyElements.find((el) => el.id === resp);
+      const pictureQuestion = surveyData.questions.find((q) => q.id === resp);
 
-      responses[resp] = (pictureElement as any)?.choices
+      responses[resp] = (pictureQuestion as any)?.choices
         .filter((choice) => selectedChoiceIds.includes(choice.id))
         .map((choice) => choice.imageUrl);
     }
   });
 
   mapping.forEach((map) => {
-    if (map.element.id === "metadata") {
+    if (map.question.id === "metadata") {
       properties[map.column.name] = {
         [map.column.type]: getValue(map.column.type, convertMetaObjectToString(data.response.meta)) || null,
       };
-    } else if (map.element.id === "createdAt") {
+    } else if (map.question.id === "createdAt") {
       properties[map.column.name] = {
         [map.column.type]: getValue(map.column.type, data.response.createdAt) || null,
       };
     } else {
-      const value = responses[map.element.id];
+      const value = responses[map.question.id];
       properties[map.column.name] = {
         [map.column.type]: getValue(map.column.type, value) || null,
       };

apps/web/app/api/lib/utils.ts

@@ -0,0 +1,34 @@
+import { Organization } from "@prisma/client";
+import { logger } from "@formbricks/logger";
+import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
+import { getMonthlyOrganizationResponseCount } from "@/lib/organization/service";
+import { sendPlanLimitsReachedEventToPosthogWeekly } from "@/lib/posthogServer";
+
+export const handleBillingLimitsCheck = async (
+  environmentId: string,
+  organizationId: string,
+  organizationBilling: Organization["billing"]
+): Promise<void> => {
+  if (!IS_FORMBRICKS_CLOUD) return;
+
+  const responsesCount = await getMonthlyOrganizationResponseCount(organizationId);
+  const responsesLimit = organizationBilling.limits.monthly.responses;
+
+  if (responsesLimit && responsesCount >= responsesLimit) {
+    try {
+      await sendPlanLimitsReachedEventToPosthogWeekly(environmentId, {
+        plan: organizationBilling.plan,
+        limits: {
+          projects: null,
+          monthly: {
+            responses: responsesLimit,
+            miu: null,
+          },
+        },
+      });
+    } catch (err) {
+      // Log error but do not throw
+      logger.error(err, "Error sending plan limits reached event to Posthog");
+    }
+  }
+};

apps/web/app/api/v1/client/[environmentId]/app/sync/[userId]/route.ts

@@ -18,6 +18,10 @@ import {
   getMonthlyOrganizationResponseCount,
   getOrganizationByEnvironmentId,
 } from "@/lib/organization/service";
+import {
+  capturePosthogEnvironmentEvent,
+  sendPlanLimitsReachedEventToPosthogWeekly,
+} from "@/lib/posthogServer";
 import { getProjectByEnvironmentId } from "@/lib/project/service";
 import { COLOR_DEFAULTS } from "@/lib/styling/constants";
 
@@ -54,6 +58,20 @@ const checkResponseLimit = async (environmentId: string): Promise<boolean> => {
   const monthlyResponseLimit = organization.billing.limits.monthly.responses;
   const isLimitReached = monthlyResponseLimit !== null && currentResponseCount >= monthlyResponseLimit;
 
+  if (isLimitReached) {
+    try {
+      await sendPlanLimitsReachedEventToPosthogWeekly(environmentId, {
+        plan: organization.billing.plan,
+        limits: {
+          projects: null,
+          monthly: { responses: monthlyResponseLimit, miu: null },
+        },
+      });
+    } catch (error) {
+      logger.error({ error }, `Error sending plan limits reached event to Posthog`);
+    }
+  }
+
   return isLimitReached;
 };
 
@@ -93,7 +111,10 @@ export const GET = withV1ApiWrapper({
       }
 
       if (!environment.appSetupCompleted) {
-        await updateEnvironment(environment.id, { appSetupCompleted: true });
+        await Promise.all([
+          updateEnvironment(environment.id, { appSetupCompleted: true }),
+          capturePosthogEnvironmentEvent(environmentId, "app setup completed"),
+        ]);
       }
 
       // check organization subscriptions and response limits

apps/web/app/api/v1/client/[environmentId]/displays/route.ts

@@ -5,6 +5,7 @@ import { ResourceNotFoundError } from "@formbricks/types/errors";
 import { responses } from "@/app/lib/api/response";
 import { transformErrorToDetails } from "@/app/lib/api/validator";
 import { withV1ApiWrapper } from "@/app/lib/api/with-api-logging";
+import { capturePosthogEnvironmentEvent } from "@/lib/posthogServer";
 import { getIsContactsEnabled } from "@/modules/ee/license-check/lib/utils";
 import { createDisplay } from "./lib/display";
 
@@ -58,6 +59,7 @@ export const POST = withV1ApiWrapper({
     try {
       const response = await createDisplay(inputValidation.data);
 
+      await capturePosthogEnvironmentEvent(inputValidation.data.environmentId, "display created");
       return {
         response: responses.successResponse(response, true),
       };

apps/web/app/api/v1/client/[environmentId]/environment/lib/data.ts

@@ -92,7 +92,6 @@ export const getEnvironmentStateData = async (environmentId: string): Promise<En
             welcomeCard: true,
             name: true,
             questions: true,
-            blocks: true,
             variables: true,
             type: true,
             showLanguageSwitch: true,

apps/web/app/api/v1/client/[environmentId]/environment/lib/environmentState.test.ts

@@ -8,11 +8,16 @@ import { TOrganization } from "@formbricks/types/organizations";
 import { TSurvey } from "@formbricks/types/surveys/types";
 import { cache } from "@/lib/cache";
 import { getMonthlyOrganizationResponseCount } from "@/lib/organization/service";
+import {
+  capturePosthogEnvironmentEvent,
+  sendPlanLimitsReachedEventToPosthogWeekly,
+} from "@/lib/posthogServer";
 import { EnvironmentStateData, getEnvironmentStateData } from "./data";
 import { getEnvironmentState } from "./environmentState";
 
 // Mock dependencies
 vi.mock("@/lib/organization/service");
+vi.mock("@/lib/posthogServer");
 vi.mock("@/lib/cache", () => ({
   cache: {
     withCache: vi.fn(),
@@ -38,6 +43,7 @@ vi.mock("@/lib/constants", () => ({
   RECAPTCHA_SECRET_KEY: "mock_recaptcha_secret_key",
   IS_RECAPTCHA_CONFIGURED: true,
   IS_PRODUCTION: true,
+  IS_POSTHOG_CONFIGURED: false,
   ENTERPRISE_LICENSE_KEY: "mock_enterprise_license_key",
 }));
 
@@ -182,7 +188,9 @@ describe("getEnvironmentState", () => {
     expect(result.data).toEqual(expectedData);
     expect(getEnvironmentStateData).toHaveBeenCalledWith(environmentId);
     expect(prisma.environment.update).not.toHaveBeenCalled();
+    expect(capturePosthogEnvironmentEvent).not.toHaveBeenCalled();
     expect(getMonthlyOrganizationResponseCount).toHaveBeenCalledWith(mockOrganization.id);
+    expect(sendPlanLimitsReachedEventToPosthogWeekly).not.toHaveBeenCalled();
   });
 
   test("should throw ResourceNotFoundError if environment not found", async () => {
@@ -218,6 +226,7 @@ describe("getEnvironmentState", () => {
       where: { id: environmentId },
       data: { appSetupCompleted: true },
     });
+    expect(capturePosthogEnvironmentEvent).toHaveBeenCalledWith(environmentId, "app setup completed");
     expect(result.data).toBeDefined();
   });
 
@@ -228,6 +237,16 @@ describe("getEnvironmentState", () => {
 
     expect(result.data.surveys).toEqual([]);
     expect(getMonthlyOrganizationResponseCount).toHaveBeenCalledWith(mockOrganization.id);
+    expect(sendPlanLimitsReachedEventToPosthogWeekly).toHaveBeenCalledWith(environmentId, {
+      plan: mockOrganization.billing.plan,
+      limits: {
+        projects: null,
+        monthly: {
+          miu: null,
+          responses: mockOrganization.billing.limits.monthly.responses,
+        },
+      },
+    });
   });
 
   test("should return surveys if monthly response limit not reached (Cloud)", async () => {
@@ -237,6 +256,21 @@ describe("getEnvironmentState", () => {
 
     expect(result.data.surveys).toEqual(mockSurveys);
     expect(getMonthlyOrganizationResponseCount).toHaveBeenCalledWith(mockOrganization.id);
+    expect(sendPlanLimitsReachedEventToPosthogWeekly).not.toHaveBeenCalled();
+  });
+
+  test("should handle error when sending Posthog limit reached event", async () => {
+    vi.mocked(getMonthlyOrganizationResponseCount).mockResolvedValue(100);
+    const posthogError = new Error("Posthog failed");
+    vi.mocked(sendPlanLimitsReachedEventToPosthogWeekly).mockRejectedValue(posthogError);
+
+    const result = await getEnvironmentState(environmentId);
+
+    expect(result.data.surveys).toEqual([]);
+    expect(logger.error).toHaveBeenCalledWith(
+      posthogError,
+      "Error sending plan limits reached event to Posthog"
+    );
   });
 
   test("should include recaptchaSiteKey if recaptcha variables are set", async () => {
@@ -279,6 +313,7 @@ describe("getEnvironmentState", () => {
 
     // Should return surveys even with high count since limit is null (unlimited)
     expect(result.data.surveys).toEqual(mockSurveys);
+    expect(sendPlanLimitsReachedEventToPosthogWeekly).not.toHaveBeenCalled();
   });
 
   test("should propagate database update errors", async () => {
@@ -296,6 +331,21 @@ describe("getEnvironmentState", () => {
     await expect(getEnvironmentState(environmentId)).rejects.toThrow("Database error");
   });
 
+  test("should propagate PostHog event capture errors", async () => {
+    const incompleteEnvironmentData = {
+      ...mockEnvironmentStateData,
+      environment: {
+        ...mockEnvironmentStateData.environment,
+        appSetupCompleted: false,
+      },
+    };
+    vi.mocked(getEnvironmentStateData).mockResolvedValue(incompleteEnvironmentData);
+    vi.mocked(capturePosthogEnvironmentEvent).mockRejectedValue(new Error("PostHog error"));
+
+    // Should throw error since Promise.all will fail if PostHog event capture fails
+    await expect(getEnvironmentState(environmentId)).rejects.toThrow("PostHog error");
+  });
+
   test("should include recaptchaSiteKey when IS_RECAPTCHA_CONFIGURED is true", async () => {
     const result = await getEnvironmentState(environmentId);
 

apps/web/app/api/v1/client/[environmentId]/environment/lib/environmentState.ts

@@ -1,10 +1,15 @@
 import "server-only";
 import { createCacheKey } from "@formbricks/cache";
 import { prisma } from "@formbricks/database";
+import { logger } from "@formbricks/logger";
 import { TJsEnvironmentState } from "@formbricks/types/js";
 import { cache } from "@/lib/cache";
 import { IS_FORMBRICKS_CLOUD, IS_RECAPTCHA_CONFIGURED, RECAPTCHA_SITE_KEY } from "@/lib/constants";
 import { getMonthlyOrganizationResponseCount } from "@/lib/organization/service";
+import {
+  capturePosthogEnvironmentEvent,
+  sendPlanLimitsReachedEventToPosthogWeekly,
+} from "@/lib/posthogServer";
 import { getEnvironmentStateData } from "./data";
 
 /**
@@ -28,10 +33,13 @@ export const getEnvironmentState = async (
       // Handle app setup completion update if needed
       // This is a one-time setup flag that can tolerate TTL-based cache expiration
       if (!environment.appSetupCompleted) {
-        await prisma.environment.update({
+        await Promise.all([
-          where: { id: environmentId },
+          prisma.environment.update({
-          data: { appSetupCompleted: true },
+            where: { id: environmentId },
-        });
+            data: { appSetupCompleted: true },
+          }),
+          capturePosthogEnvironmentEvent(environmentId, "app setup completed"),
+        ]);
       }
 
       // Check monthly response limits for Formbricks Cloud
@@ -41,6 +49,24 @@ export const getEnvironmentState = async (
         const currentResponseCount = await getMonthlyOrganizationResponseCount(organization.id);
         isMonthlyResponsesLimitReached =
           monthlyResponseLimit !== null && currentResponseCount >= monthlyResponseLimit;
+
+        // Send plan limits event if needed
+        if (isMonthlyResponsesLimitReached) {
+          try {
+            await sendPlanLimitsReachedEventToPosthogWeekly(environmentId, {
+              plan: organization.billing.plan,
+              limits: {
+                projects: null,
+                monthly: {
+                  miu: null,
+                  responses: organization.billing.limits.monthly.responses,
+                },
+              },
+            });
+          } catch (err) {
+            logger.error(err, "Error sending plan limits reached event to Posthog");
+          }
+        }
       }
 
       // Build the response data

apps/web/app/api/v1/client/[environmentId]/responses/[responseId]/route.ts

@@ -8,7 +8,7 @@ import { withV1ApiWrapper } from "@/app/lib/api/with-api-logging";
 import { sendToPipeline } from "@/app/lib/pipelines";
 import { getResponse } from "@/lib/response/service";
 import { getSurvey } from "@/lib/survey/service";
-import { validateOtherOptionLengthForMultipleChoice } from "@/modules/api/v2/lib/element";
+import { validateOtherOptionLengthForMultipleChoice } from "@/modules/api/v2/lib/question";
 import { createQuotaFullObject } from "@/modules/ee/quotas/lib/helpers";
 import { validateFileUploads } from "@/modules/storage/utils";
 import { updateResponseWithQuotaEvaluation } from "./lib/response";

apps/web/app/api/v1/client/[environmentId]/responses/lib/response.test.ts

@@ -1,10 +1,15 @@
 import { Prisma } from "@prisma/client";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { prisma } from "@formbricks/database";
+import { logger } from "@formbricks/logger";
 import { DatabaseError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { TSurveyQuota } from "@formbricks/types/quota";
 import { TResponseInput } from "@formbricks/types/responses";
-import { getOrganizationByEnvironmentId } from "@/lib/organization/service";
+import {
+  getMonthlyOrganizationResponseCount,
+  getOrganizationByEnvironmentId,
+} from "@/lib/organization/service";
+import { sendPlanLimitsReachedEventToPosthogWeekly } from "@/lib/posthogServer";
 import { calculateTtcTotal } from "@/lib/response/utils";
 import { evaluateResponseQuotas } from "@/modules/ee/quotas/lib/evaluation-service";
 import { createResponse, createResponseWithQuotaEvaluation } from "./response";
@@ -19,13 +24,22 @@ vi.mock("@/lib/constants", () => ({
 }));
 
 vi.mock("@/lib/organization/service", () => ({
+  getMonthlyOrganizationResponseCount: vi.fn(),
   getOrganizationByEnvironmentId: vi.fn(),
 }));
 
+vi.mock("@/lib/posthogServer", () => ({
+  sendPlanLimitsReachedEventToPosthogWeekly: vi.fn(),
+}));
+
 vi.mock("@/lib/response/utils", () => ({
   calculateTtcTotal: vi.fn((ttc) => ttc),
 }));
 
+vi.mock("@/lib/telemetry", () => ({
+  captureTelemetry: vi.fn(),
+}));
+
 vi.mock("@/lib/utils/validate", () => ({
   validateInputs: vi.fn(),
 }));
@@ -124,6 +138,35 @@ describe("createResponse", () => {
     );
   });
 
+  test("should check response limits if IS_FORMBRICKS_CLOUD is true", async () => {
+    mockIsFormbricksCloud = true;
+    vi.mocked(getMonthlyOrganizationResponseCount).mockResolvedValue(50);
+
+    await createResponse(mockResponseInput, prisma);
+
+    expect(getMonthlyOrganizationResponseCount).toHaveBeenCalledWith(organizationId);
+    expect(sendPlanLimitsReachedEventToPosthogWeekly).not.toHaveBeenCalled();
+  });
+
+  test("should send limit reached event if IS_FORMBRICKS_CLOUD is true and limit reached", async () => {
+    mockIsFormbricksCloud = true;
+    vi.mocked(getMonthlyOrganizationResponseCount).mockResolvedValue(100);
+
+    await createResponse(mockResponseInput, prisma);
+
+    expect(getMonthlyOrganizationResponseCount).toHaveBeenCalledWith(organizationId);
+    expect(sendPlanLimitsReachedEventToPosthogWeekly).toHaveBeenCalledWith(environmentId, {
+      plan: "free",
+      limits: {
+        projects: null,
+        monthly: {
+          responses: 100,
+          miu: null,
+        },
+      },
+    });
+  });
+
   test("should throw ResourceNotFoundError if organization not found", async () => {
     vi.mocked(getOrganizationByEnvironmentId).mockResolvedValue(null);
     await expect(createResponse(mockResponseInput, prisma)).rejects.toThrow(ResourceNotFoundError);
@@ -143,6 +186,20 @@ describe("createResponse", () => {
     vi.mocked(prisma.response.create).mockRejectedValue(genericError);
     await expect(createResponse(mockResponseInput)).rejects.toThrow(genericError);
   });
+
+  test("should log error but not throw if sendPlanLimitsReachedEventToPosthogWeekly fails", async () => {
+    mockIsFormbricksCloud = true;
+    vi.mocked(getMonthlyOrganizationResponseCount).mockResolvedValue(100);
+    const posthogError = new Error("PostHog error");
+    vi.mocked(sendPlanLimitsReachedEventToPosthogWeekly).mockRejectedValue(posthogError);
+
+    await createResponse(mockResponseInput);
+
+    expect(logger.error).toHaveBeenCalledWith(
+      posthogError,
+      "Error sending plan limits reached event to Posthog"
+    );
+  });
 });
 
 describe("createResponseWithQuotaEvaluation", () => {

apps/web/app/api/v1/client/[environmentId]/responses/lib/response.ts

@@ -6,9 +6,11 @@ import { DatabaseError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { TResponseWithQuotaFull } from "@formbricks/types/quota";
 import { TResponse, TResponseInput, ZResponseInput } from "@formbricks/types/responses";
 import { TTag } from "@formbricks/types/tags";
+import { handleBillingLimitsCheck } from "@/app/api/lib/utils";
 import { buildPrismaResponseData } from "@/app/api/v1/lib/utils";
 import { getOrganizationByEnvironmentId } from "@/lib/organization/service";
 import { calculateTtcTotal } from "@/lib/response/utils";
+import { captureTelemetry } from "@/lib/telemetry";
 import { validateInputs } from "@/lib/utils/validate";
 import { evaluateResponseQuotas } from "@/modules/ee/quotas/lib/evaluation-service";
 import { getContactByUserId } from "./contact";
@@ -81,6 +83,7 @@ export const createResponse = async (
   tx: Prisma.TransactionClient
 ): Promise<TResponse> => {
   validateInputs([responseInput, ZResponseInput]);
+  captureTelemetry("response created");
 
   const { environmentId, userId, finished, ttc: initialTtc } = responseInput;
 
@@ -118,6 +121,8 @@ export const createResponse = async (
       tags: responsePrisma.tags.map((tagPrisma: { tag: TTag }) => tagPrisma.tag),
     };
 
+    await handleBillingLimitsCheck(environmentId, organization.id, organization.billing);
+
     return response;
   } catch (error) {
     if (error instanceof Prisma.PrismaClientKnownRequestError) {

apps/web/app/api/v1/client/[environmentId]/responses/route.ts

@@ -10,6 +10,7 @@ import { responses } from "@/app/lib/api/response";
 import { transformErrorToDetails } from "@/app/lib/api/validator";
 import { withV1ApiWrapper } from "@/app/lib/api/with-api-logging";
 import { sendToPipeline } from "@/app/lib/pipelines";
+import { capturePosthogEnvironmentEvent } from "@/lib/posthogServer";
 import { getSurvey } from "@/lib/survey/service";
 import { getIsContactsEnabled } from "@/modules/ee/license-check/lib/utils";
 import { createQuotaFullObject } from "@/modules/ee/quotas/lib/helpers";
@@ -171,6 +172,11 @@ export const POST = withV1ApiWrapper({
       });
     }
 
+    await capturePosthogEnvironmentEvent(survey.environmentId, "response created", {
+      surveyId: responseData.surveyId,
+      surveyType: survey.type,
+    });
+
     const quotaObj = createQuotaFullObject(quotaFull);
 
     const responseDataWithQuota = {

apps/web/app/api/v1/management/responses/lib/response.test.ts

@@ -4,7 +4,11 @@ import { prisma } from "@formbricks/database";
 import { logger } from "@formbricks/logger";
 import { DatabaseError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { TResponse, TResponseInput } from "@formbricks/types/responses";
-import { getOrganizationByEnvironmentId } from "@/lib/organization/service";
+import {
+  getMonthlyOrganizationResponseCount,
+  getOrganizationByEnvironmentId,
+} from "@/lib/organization/service";
+import { sendPlanLimitsReachedEventToPosthogWeekly } from "@/lib/posthogServer";
 import { getResponseContact } from "@/lib/response/service";
 import { calculateTtcTotal } from "@/lib/response/utils";
 import { validateInputs } from "@/lib/utils/validate";
@@ -92,6 +96,9 @@ const mockTransformedResponses = [mockResponse, { ...mockResponse, id: "response
 // Mock dependencies
 vi.mock("@/lib/constants", () => ({
   IS_FORMBRICKS_CLOUD: true,
+  POSTHOG_API_KEY: "mock-posthog-api-key",
+  POSTHOG_HOST: "mock-posthog-host",
+  IS_POSTHOG_CONFIGURED: true,
   ENCRYPTION_KEY: "mock-encryption-key",
   ENTERPRISE_LICENSE_KEY: "mock-enterprise-license-key",
   GITHUB_ID: "mock-github-id",
@@ -111,8 +118,10 @@ vi.mock("@/lib/constants", () => ({
   SENTRY_DSN: "mock-sentry-dsn",
 }));
 vi.mock("@/lib/organization/service");
+vi.mock("@/lib/posthogServer");
 vi.mock("@/lib/response/service");
 vi.mock("@/lib/response/utils");
+vi.mock("@/lib/telemetry");
 vi.mock("@/lib/utils/validate");
 vi.mock("@formbricks/database", () => ({
   prisma: {
@@ -153,6 +162,7 @@ describe("Response Lib Tests", () => {
       vi.mocked(mockTx.response.create).mockResolvedValue({
         ...mockResponsePrisma,
       });
+      vi.mocked(getMonthlyOrganizationResponseCount).mockResolvedValue(50);
 
       const response = await createResponse(mockResponseInputWithUserId, mockTx);
 
@@ -207,6 +217,68 @@ describe("Response Lib Tests", () => {
 
       await expect(createResponse(mockResponseInput, mockTx)).rejects.toThrow(genericError);
     });
+
+    describe("Cloud specific tests", () => {
+      test("should check response limit and send event if limit reached", async () => {
+        // IS_FORMBRICKS_CLOUD is true by default from the top-level mock
+        const limit = 100;
+        const mockOrgWithBilling = {
+          ...mockOrganization,
+          billing: { limits: { monthly: { responses: limit } } },
+        } as any;
+        vi.mocked(getOrganizationByEnvironmentId).mockResolvedValue(mockOrgWithBilling);
+        vi.mocked(calculateTtcTotal).mockReturnValue({ total: 10 });
+        vi.mocked(mockTx.response.create).mockResolvedValue(mockResponsePrisma);
+        vi.mocked(getMonthlyOrganizationResponseCount).mockResolvedValue(limit); // Limit reached
+
+        await createResponse(mockResponseInput, mockTx);
+
+        expect(getMonthlyOrganizationResponseCount).toHaveBeenCalledWith(organizationId);
+        expect(sendPlanLimitsReachedEventToPosthogWeekly).toHaveBeenCalled();
+      });
+
+      test("should check response limit and not send event if limit not reached", async () => {
+        const limit = 100;
+        const mockOrgWithBilling = {
+          ...mockOrganization,
+          billing: { limits: { monthly: { responses: limit } } },
+        } as any;
+        vi.mocked(getOrganizationByEnvironmentId).mockResolvedValue(mockOrgWithBilling);
+        vi.mocked(calculateTtcTotal).mockReturnValue({ total: 10 });
+        vi.mocked(mockTx.response.create).mockResolvedValue(mockResponsePrisma);
+        vi.mocked(getMonthlyOrganizationResponseCount).mockResolvedValue(limit - 1); // Limit not reached
+
+        await createResponse(mockResponseInput, mockTx);
+
+        expect(getMonthlyOrganizationResponseCount).toHaveBeenCalledWith(organizationId);
+        expect(sendPlanLimitsReachedEventToPosthogWeekly).not.toHaveBeenCalled();
+      });
+
+      test("should log error if sendPlanLimitsReachedEventToPosthogWeekly fails", async () => {
+        const limit = 100;
+        const mockOrgWithBilling = {
+          ...mockOrganization,
+          billing: { limits: { monthly: { responses: limit } } },
+        } as any;
+        const posthogError = new Error("Posthog error");
+        vi.mocked(getOrganizationByEnvironmentId).mockResolvedValue(mockOrgWithBilling);
+        vi.mocked(calculateTtcTotal).mockReturnValue({ total: 10 });
+        vi.mocked(mockTx.response.create).mockResolvedValue(mockResponsePrisma);
+        vi.mocked(getMonthlyOrganizationResponseCount).mockResolvedValue(limit); // Limit reached
+        vi.mocked(sendPlanLimitsReachedEventToPosthogWeekly).mockRejectedValue(posthogError);
+
+        // Expecting successful response creation despite PostHog error
+        const response = await createResponse(mockResponseInput, mockTx);
+
+        expect(getMonthlyOrganizationResponseCount).toHaveBeenCalledWith(organizationId);
+        expect(sendPlanLimitsReachedEventToPosthogWeekly).toHaveBeenCalled();
+        expect(logger.error).toHaveBeenCalledWith(
+          posthogError,
+          "Error sending plan limits reached event to Posthog"
+        );
+        expect(response).toEqual(mockResponse); // Should still return the created response
+      });
+    });
   });
 
   describe("getResponsesByEnvironmentIds", () => {

apps/web/app/api/v1/management/responses/lib/response.ts

@@ -8,12 +8,14 @@ import { TContactAttributes } from "@formbricks/types/contact-attribute";
 import { DatabaseError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { TResponse, TResponseInput, ZResponseInput } from "@formbricks/types/responses";
 import { TTag } from "@formbricks/types/tags";
+import { handleBillingLimitsCheck } from "@/app/api/lib/utils";
 import { buildPrismaResponseData } from "@/app/api/v1/lib/utils";
 import { RESPONSES_PER_PAGE } from "@/lib/constants";
 import { getOrganizationByEnvironmentId } from "@/lib/organization/service";
 import { getResponseContact } from "@/lib/response/service";
 import { calculateTtcTotal } from "@/lib/response/utils";
 import { getSurvey } from "@/lib/survey/service";
+import { captureTelemetry } from "@/lib/telemetry";
 import { validateInputs } from "@/lib/utils/validate";
 import { evaluateResponseQuotas } from "@/modules/ee/quotas/lib/evaluation-service";
 import { getContactByUserId } from "./contact";
@@ -91,6 +93,7 @@ export const createResponse = async (
   tx?: Prisma.TransactionClient
 ): Promise<TResponse> => {
   validateInputs([responseInput, ZResponseInput]);
+  captureTelemetry("response created");
 
   const { environmentId, userId, finished, ttc: initialTtc } = responseInput;
 
@@ -128,6 +131,8 @@ export const createResponse = async (
       tags: responsePrisma.tags.map((tagPrisma: { tag: TTag }) => tagPrisma.tag),
     };
 
+    await handleBillingLimitsCheck(environmentId, organization.id, organization.billing);
+
     return response;
   } catch (error) {
     if (error instanceof Prisma.PrismaClientKnownRequestError) {

apps/web/app/api/v1/management/surveys/[surveyId]/route.ts

@@ -6,11 +6,6 @@ import { handleErrorResponse } from "@/app/api/v1/auth";
 import { deleteSurvey } from "@/app/api/v1/management/surveys/[surveyId]/lib/surveys";
 import { checkFeaturePermissions } from "@/app/api/v1/management/surveys/lib/utils";
 import { responses } from "@/app/lib/api/response";
-import {
-  transformBlocksToQuestions,
-  transformQuestionsToBlocks,
-  validateSurveyInput,
-} from "@/app/lib/api/survey-transformation";
 import { transformErrorToDetails } from "@/app/lib/api/validator";
 import { TApiAuditLog, TApiKeyAuthentication, withV1ApiWrapper } from "@/app/lib/api/with-api-logging";
 import { getOrganizationByEnvironmentId } from "@/lib/organization/service";
@@ -50,22 +45,6 @@ export const GET = withV1ApiWrapper({
           response: result.error,
         };
       }
-
-      const shouldTransformToQuestions =
-        result.survey.blocks &&
-        result.survey.blocks.length > 0 &&
-        result.survey.blocks.every((block) => block.elements.length === 1);
-
-      if (shouldTransformToQuestions) {
-        return {
-          response: responses.successResponse({
-            ...result.survey,
-            questions: transformBlocksToQuestions(result.survey.blocks, result.survey.endings),
-            blocks: [],
-          }),
-        };
-      }
-
       return {
         response: responses.successResponse(result.survey),
       };
@@ -152,23 +131,6 @@ export const PUT = withV1ApiWrapper({
         };
       }
 
-      const validateResult = validateSurveyInput({ ...surveyUpdate, updateOnly: true });
-      if (!validateResult.ok) {
-        return {
-          response: responses.badRequestResponse(validateResult.error.message),
-        };
-      }
-
-      const { hasQuestions } = validateResult.data;
-
-      if (hasQuestions) {
-        surveyUpdate.blocks = transformQuestionsToBlocks(
-          surveyUpdate.questions,
-          surveyUpdate.endings || result.survey.endings
-        );
-        surveyUpdate.questions = [];
-      }
-
       const inputValidation = ZSurveyUpdateInput.safeParse({
         ...result.survey,
         ...surveyUpdate,
@@ -193,19 +155,6 @@ export const PUT = withV1ApiWrapper({
       try {
         const updatedSurvey = await updateSurvey({ ...inputValidation.data, id: params.surveyId });
         auditLog.newObject = updatedSurvey;
-
-        if (hasQuestions) {
-          const surveyWithQuestions = {
-            ...updatedSurvey,
-            questions: transformBlocksToQuestions(updatedSurvey.blocks, updatedSurvey.endings),
-            blocks: [],
-          };
-
-          return {
-            response: responses.successResponse(surveyWithQuestions),
-          };
-        }
-
         return {
           response: responses.successResponse(updatedSurvey),
         };

apps/web/app/api/v1/management/surveys/route.ts

@@ -4,11 +4,6 @@ import { DatabaseError } from "@formbricks/types/errors";
 import { ZSurveyCreateInputWithEnvironmentId } from "@formbricks/types/surveys/types";
 import { checkFeaturePermissions } from "@/app/api/v1/management/surveys/lib/utils";
 import { responses } from "@/app/lib/api/response";
-import {
-  transformBlocksToQuestions,
-  transformQuestionsToBlocks,
-  validateSurveyInput,
-} from "@/app/lib/api/survey-transformation";
 import { transformErrorToDetails } from "@/app/lib/api/validator";
 import { TApiAuditLog, TApiKeyAuthentication, withV1ApiWrapper } from "@/app/lib/api/with-api-logging";
 import { getOrganizationByEnvironmentId } from "@/lib/organization/service";
@@ -32,30 +27,10 @@ export const GET = withV1ApiWrapper({
       const environmentIds = authentication.environmentPermissions.map(
         (permission) => permission.environmentId
       );
-
       const surveys = await getSurveys(environmentIds, limit, offset);
 
-      const surveysWithQuestions = surveys.map((survey) => {
-        // If the survey has blocks and each block has ONLY ONE element, we can transform the blocks to questions
-        // This is only for backwards compatibility with the older surveys
-        const shouldTransformToQuestions =
-          survey.blocks &&
-          survey.blocks.length > 0 &&
-          survey.blocks.every((block) => block.elements.length === 1);
-
-        if (shouldTransformToQuestions) {
-          return {
-            ...survey,
-            questions: transformBlocksToQuestions(survey.blocks, survey.endings),
-            blocks: [],
-          };
-        }
-
-        return survey;
-      });
-
       return {
-        response: responses.successResponse(surveysWithQuestions),
+        response: responses.successResponse(surveys),
       };
     } catch (error) {
       if (error instanceof DatabaseError) {
@@ -88,7 +63,6 @@ export const POST = withV1ApiWrapper({
           response: responses.badRequestResponse("Malformed JSON input, please check your request body"),
         };
       }
-
       const inputValidation = ZSurveyCreateInputWithEnvironmentId.safeParse(surveyInput);
 
       if (!inputValidation.success) {
@@ -118,20 +92,6 @@ export const POST = withV1ApiWrapper({
 
       const surveyData = { ...inputValidation.data, environmentId };
 
-      const validateResult = validateSurveyInput(surveyData);
-      if (!validateResult.ok) {
-        return {
-          response: responses.badRequestResponse(validateResult.error.message),
-        };
-      }
-
-      const { hasQuestions } = validateResult.data;
-
-      if (hasQuestions) {
-        surveyData.blocks = transformQuestionsToBlocks(surveyData.questions, surveyData.endings || []);
-        surveyData.questions = [];
-      }
-
       const featureCheckResult = await checkFeaturePermissions(surveyData, organization);
       if (featureCheckResult) {
         return {
@@ -143,18 +103,6 @@ export const POST = withV1ApiWrapper({
       auditLog.targetId = survey.id;
       auditLog.newObject = survey;
 
-      if (hasQuestions) {
-        const surveyWithQuestions = {
-          ...survey,
-          questions: transformBlocksToQuestions(survey.blocks, survey.endings),
-          blocks: [],
-        };
-
-        return {
-          response: responses.successResponse(surveyWithQuestions),
-        };
-      }
-
       return {
         response: responses.successResponse(survey),
       };

apps/web/app/api/v2/client/[environmentId]/displays/route.ts

@@ -3,6 +3,7 @@ import { ResourceNotFoundError } from "@formbricks/types/errors";
 import { ZDisplayCreateInputV2 } from "@/app/api/v2/client/[environmentId]/displays/types/display";
 import { responses } from "@/app/lib/api/response";
 import { transformErrorToDetails } from "@/app/lib/api/validator";
+import { capturePosthogEnvironmentEvent } from "@/lib/posthogServer";
 import { getIsContactsEnabled } from "@/modules/ee/license-check/lib/utils";
 import { createDisplay } from "./lib/display";
 
@@ -48,6 +49,7 @@ export const POST = async (request: Request, context: Context): Promise<Response
   try {
     const response = await createDisplay(inputValidation.data);
 
+    await capturePosthogEnvironmentEvent(inputValidation.data.environmentId, "display created");
     return responses.successResponse(response, true);
   } catch (error) {
     if (error instanceof ResourceNotFoundError) {

apps/web/app/api/v2/client/[environmentId]/responses/lib/response.test.ts

@@ -8,8 +8,13 @@ import { TResponseWithQuotaFull, TSurveyQuota } from "@formbricks/types/quota";
 import { TResponse } from "@formbricks/types/responses";
 import { TTag } from "@formbricks/types/tags";
 import { TResponseInputV2 } from "@/app/api/v2/client/[environmentId]/responses/types/response";
-import { getOrganizationByEnvironmentId } from "@/lib/organization/service";
+import {
+  getMonthlyOrganizationResponseCount,
+  getOrganizationByEnvironmentId,
+} from "@/lib/organization/service";
+import { sendPlanLimitsReachedEventToPosthogWeekly } from "@/lib/posthogServer";
 import { calculateTtcTotal } from "@/lib/response/utils";
+import { captureTelemetry } from "@/lib/telemetry";
 import { validateInputs } from "@/lib/utils/validate";
 import { evaluateResponseQuotas } from "@/modules/ee/quotas/lib/evaluation-service";
 import { getContact } from "./contact";
@@ -44,7 +49,9 @@ vi.mock("@/lib/constants", () => ({
 }));
 
 vi.mock("@/lib/organization/service");
+vi.mock("@/lib/posthogServer");
 vi.mock("@/lib/response/utils");
+vi.mock("@/lib/telemetry");
 vi.mock("@/lib/utils/validate");
 vi.mock("@/modules/ee/quotas/lib/evaluation-service");
 vi.mock("@formbricks/database", () => ({
@@ -159,6 +166,9 @@ describe("createResponse V2", () => {
       ...ttc,
       _total: Object.values(ttc).reduce((a, b) => a + b, 0),
     }));
+    vi.mocked(captureTelemetry).mockResolvedValue(undefined);
+    vi.mocked(getMonthlyOrganizationResponseCount).mockResolvedValue(50);
+    vi.mocked(sendPlanLimitsReachedEventToPosthogWeekly).mockResolvedValue(undefined);
     vi.mocked(evaluateResponseQuotas).mockResolvedValue({
       shouldEndSurvey: false,
       quotaFull: null,
@@ -169,6 +179,32 @@ describe("createResponse V2", () => {
     mockIsFormbricksCloud = false;
   });
 
+  test("should check response limits if IS_FORMBRICKS_CLOUD is true", async () => {
+    mockIsFormbricksCloud = true;
+    await createResponse(mockResponseInput, mockTx);
+    expect(getMonthlyOrganizationResponseCount).toHaveBeenCalledWith(organizationId);
+    expect(sendPlanLimitsReachedEventToPosthogWeekly).not.toHaveBeenCalled();
+  });
+
+  test("should send limit reached event if IS_FORMBRICKS_CLOUD is true and limit reached", async () => {
+    mockIsFormbricksCloud = true;
+    vi.mocked(getMonthlyOrganizationResponseCount).mockResolvedValue(100);
+
+    await createResponse(mockResponseInput, mockTx);
+
+    expect(getMonthlyOrganizationResponseCount).toHaveBeenCalledWith(organizationId);
+    expect(sendPlanLimitsReachedEventToPosthogWeekly).toHaveBeenCalledWith(environmentId, {
+      plan: "free",
+      limits: {
+        projects: null,
+        monthly: {
+          responses: 100,
+          miu: null,
+        },
+      },
+    });
+  });
+
   test("should throw ResourceNotFoundError if organization not found", async () => {
     vi.mocked(getOrganizationByEnvironmentId).mockResolvedValue(null);
     await expect(createResponse(mockResponseInput, mockTx)).rejects.toThrow(ResourceNotFoundError);
@@ -189,6 +225,20 @@ describe("createResponse V2", () => {
     await expect(createResponse(mockResponseInput, mockTx)).rejects.toThrow(genericError);
   });
 
+  test("should log error but not throw if sendPlanLimitsReachedEventToPosthogWeekly fails", async () => {
+    mockIsFormbricksCloud = true;
+    vi.mocked(getMonthlyOrganizationResponseCount).mockResolvedValue(100);
+    const posthogError = new Error("PostHog error");
+    vi.mocked(sendPlanLimitsReachedEventToPosthogWeekly).mockRejectedValue(posthogError);
+
+    await createResponse(mockResponseInput, mockTx); // Should not throw
+
+    expect(logger.error).toHaveBeenCalledWith(
+      posthogError,
+      "Error sending plan limits reached event to Posthog"
+    );
+  });
+
   test("should correctly map prisma tags to response tags", async () => {
     const mockTag: TTag = { id: "tag1", name: "Tag 1", environmentId };
     const prismaResponseWithTags = {
@@ -219,6 +269,7 @@ describe("createResponseWithQuotaEvaluation V2", () => {
       ...ttc,
       _total: Object.values(ttc).reduce((a, b) => a + b, 0),
     }));
+    vi.mocked(getMonthlyOrganizationResponseCount).mockResolvedValue(50);
     vi.mocked(evaluateResponseQuotas).mockResolvedValue({
       shouldEndSurvey: false,
       quotaFull: null,

apps/web/app/api/v2/client/[environmentId]/responses/lib/response.ts

@@ -6,10 +6,12 @@ import { DatabaseError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { TResponseWithQuotaFull } from "@formbricks/types/quota";
 import { TResponse, ZResponseInput } from "@formbricks/types/responses";
 import { TTag } from "@formbricks/types/tags";
+import { handleBillingLimitsCheck } from "@/app/api/lib/utils";
 import { responseSelection } from "@/app/api/v1/client/[environmentId]/responses/lib/response";
 import { TResponseInputV2 } from "@/app/api/v2/client/[environmentId]/responses/types/response";
 import { getOrganizationByEnvironmentId } from "@/lib/organization/service";
 import { calculateTtcTotal } from "@/lib/response/utils";
+import { captureTelemetry } from "@/lib/telemetry";
 import { validateInputs } from "@/lib/utils/validate";
 import { evaluateResponseQuotas } from "@/modules/ee/quotas/lib/evaluation-service";
 import { getContact } from "./contact";
@@ -89,6 +91,7 @@ export const createResponse = async (
   tx?: Prisma.TransactionClient
 ): Promise<TResponse> => {
   validateInputs([responseInput, ZResponseInput]);
+  captureTelemetry("response created");
 
   const { environmentId, contactId, finished, ttc: initialTtc } = responseInput;
 
@@ -126,6 +129,8 @@ export const createResponse = async (
       tags: responsePrisma.tags.map((tagPrisma: { tag: TTag }) => tagPrisma.tag),
     };
 
+    await handleBillingLimitsCheck(environmentId, organization.id, organization.billing);
+
     return response;
   } catch (error) {
     if (error instanceof Prisma.PrismaClientKnownRequestError) {

apps/web/app/api/v2/client/[environmentId]/responses/route.ts

@@ -8,9 +8,9 @@ import { checkSurveyValidity } from "@/app/api/v2/client/[environmentId]/respons
 import { responses } from "@/app/lib/api/response";
 import { transformErrorToDetails } from "@/app/lib/api/validator";
 import { sendToPipeline } from "@/app/lib/pipelines";
+import { capturePosthogEnvironmentEvent } from "@/lib/posthogServer";
 import { getSurvey } from "@/lib/survey/service";
-import { getElementsFromBlocks } from "@/lib/survey/utils";
+import { validateOtherOptionLengthForMultipleChoice } from "@/modules/api/v2/lib/question";
-import { validateOtherOptionLengthForMultipleChoice } from "@/modules/api/v2/lib/element";
 import { getIsContactsEnabled } from "@/modules/ee/license-check/lib/utils";
 import { createQuotaFullObject } from "@/modules/ee/quotas/lib/helpers";
 import { createResponseWithQuotaEvaluation } from "./lib/response";
@@ -91,7 +91,7 @@ export const POST = async (request: Request, context: Context): Promise<Response
   // Validate response data for "other" options exceeding character limit
   const otherResponseInvalidQuestionId = validateOtherOptionLengthForMultipleChoice({
     responseData: responseInputData.data,
-    surveyQuestions: getElementsFromBlocks(survey.blocks),
+    surveyQuestions: survey.questions,
     responseLanguage: responseInputData.language,
   });
 
@@ -148,6 +148,11 @@ export const POST = async (request: Request, context: Context): Promise<Response
     });
   }
 
+  await capturePosthogEnvironmentEvent(environmentId, "response created", {
+    surveyId: responseData.surveyId,
+    surveyType: survey.type,
+  });
+
   const quotaObj = createQuotaFullObject(quotaFull);
 
   const responseDataWithQuota = {

apps/web/app/lib/api/survey-transformation.ts

@@ -1,501 +0,0 @@
-import { createId } from "@paralleldrive/cuid2";
-import { Result, err, ok } from "@formbricks/types/error-handlers";
-import { InvalidInputError } from "@formbricks/types/errors";
-import { type TSurveyBlock, TSurveyBlockLogicAction } from "@formbricks/types/surveys/blocks";
-import { type TConditionGroup, type TSingleCondition } from "@formbricks/types/surveys/logic";
-import {
-  type TSurveyEnding,
-  TSurveyLogicAction,
-  type TSurveyQuestion,
-} from "@formbricks/types/surveys/types";
-import { isConditionGroup, isSingleCondition } from "@formbricks/types/surveys/validation";
-import { structuredClone } from "@/lib/pollyfills/structuredClone";
-
-type Condition = TSingleCondition | TConditionGroup;
-
-const conditionReferencesCTA = (
-  condition: Condition | null | undefined,
-  ctaElementId: string,
-  operator?: string
-): boolean => {
-  if (!condition) return false;
-
-  if (isSingleCondition(condition)) {
-    if (condition.leftOperand.value === ctaElementId) {
-      if (operator) {
-        return condition.operator === operator;
-      }
-      return true;
-    }
-    return false;
-  }
-
-  if (isConditionGroup(condition)) {
-    return condition.conditions.some((c) => conditionReferencesCTA(c, ctaElementId, operator));
-  }
-
-  return false;
-};
-
-const removeCtaConditions = (
-  conditionGroup: TConditionGroup,
-  ctaElementId: string,
-  operatorsToRemove: string[]
-): TConditionGroup | null => {
-  const filteredConditions = conditionGroup.conditions.filter((condition) => {
-    if (isSingleCondition(condition)) {
-      if (condition.leftOperand.value === ctaElementId) {
-        return !operatorsToRemove.includes(condition.operator);
-      }
-      return true;
-    }
-
-    if (isConditionGroup(condition)) {
-      const cleaned = removeCtaConditions(condition, ctaElementId, operatorsToRemove);
-      if (!cleaned || cleaned.conditions.length === 0) {
-        return false;
-      }
-      Object.assign(condition, cleaned);
-      return true;
-    }
-
-    return true;
-  });
-
-  if (filteredConditions.length === 0) {
-    return null;
-  }
-
-  return {
-    ...conditionGroup,
-    conditions: filteredConditions,
-  };
-};
-
-const migrateCTAQuestion = (question: Record<string, unknown>): void => {
-  if (question.type !== "cta") return;
-
-  const hasExternalButton = question.buttonExternal === true && Boolean(question.buttonUrl);
-
-  if (hasExternalButton) {
-    if (question.buttonLabel) {
-      question.ctaButtonLabel = question.buttonLabel;
-    }
-    question.buttonExternal = true;
-  } else {
-    delete question.buttonExternal;
-    delete question.buttonUrl;
-  }
-
-  delete question.buttonLabel;
-  delete question.dismissButtonLabel;
-};
-
-const cleanCTALogicFromQuestion = (
-  question: Record<string, unknown>,
-  ctaQuestions: Map<string, boolean>
-): void => {
-  if (!question.logic || !Array.isArray(question.logic) || question.logic.length === 0) return;
-
-  const cleanedLogic: unknown[] = [];
-
-  question.logic.forEach((logicRule: { conditions: TConditionGroup; [key: string]: unknown }) => {
-    let shouldKeepRule = true;
-    let modifiedConditions = logicRule.conditions;
-
-    ctaQuestions.forEach((hasExternalButton, ctaId) => {
-      if (!hasExternalButton) {
-        if (conditionReferencesCTA(modifiedConditions, ctaId)) {
-          const cleanedConditions = removeCtaConditions(modifiedConditions, ctaId, [
-            "isClicked",
-            "isSkipped",
-          ]);
-          if (!cleanedConditions?.conditions || cleanedConditions.conditions.length === 0) {
-            shouldKeepRule = false;
-          } else {
-            modifiedConditions = cleanedConditions;
-          }
-        }
-      } else if (conditionReferencesCTA(modifiedConditions, ctaId, "isSkipped")) {
-        const cleanedConditions = removeCtaConditions(modifiedConditions, ctaId, ["isSkipped"]);
-        if (!cleanedConditions?.conditions || cleanedConditions.conditions.length === 0) {
-          shouldKeepRule = false;
-        } else {
-          modifiedConditions = cleanedConditions;
-        }
-      }
-    });
-
-    if (shouldKeepRule) {
-      cleanedLogic.push({
-        ...logicRule,
-        conditions: modifiedConditions,
-      });
-    }
-  });
-
-  if (cleanedLogic.length === 0) {
-    delete question.logic;
-  } else {
-    question.logic = cleanedLogic;
-  }
-};
-
-const processCTAQuestions = (questions: Record<string, unknown>[]): void => {
-  const ctaQuestions = new Map<string, boolean>();
-
-  questions.forEach((question) => {
-    if (question.type === "cta") {
-      const hasExternalButton = question.buttonExternal === true && Boolean(question.buttonUrl);
-      ctaQuestions.set(question.id as string, hasExternalButton);
-    }
-  });
-
-  if (ctaQuestions.size === 0) return;
-
-  questions.forEach((question) => {
-    migrateCTAQuestion(question);
-  });
-
-  questions.forEach((question) => {
-    cleanCTALogicFromQuestion(question, ctaQuestions);
-  });
-};
-
-const getBlockName = (questionIdx: number): string => {
-  return `Block ${String(questionIdx + 1)}`;
-};
-
-const updateLogicActions = (
-  actions: TSurveyLogicAction[],
-  questionIdToBlockId: Map<string, string>,
-  endingIds: Set<string>
-): TSurveyBlockLogicAction[] => {
-  return actions.map((action) => {
-    if (action.objective === "jumpToQuestion") {
-      const target = action.target;
-      const blockId = questionIdToBlockId.get(target);
-
-      if (blockId) {
-        return {
-          ...action,
-          objective: "jumpToBlock",
-          target: blockId,
-        };
-      }
-
-      if (endingIds.has(target)) {
-        return {
-          ...action,
-          objective: "jumpToBlock",
-          target,
-        };
-      }
-
-      return {
-        ...action,
-        objective: "jumpToBlock",
-        target,
-      };
-    }
-
-    return action as TSurveyBlockLogicAction;
-  });
-};
-
-const updateLogicFallback = (
-  fallback: string,
-  questionIdToBlockId: Map<string, string>,
-  endingIds: Set<string>
-): string | undefined => {
-  const blockId = questionIdToBlockId.get(fallback);
-
-  if (blockId) {
-    return blockId;
-  }
-
-  if (endingIds.has(fallback)) {
-    return fallback;
-  }
-
-  return undefined;
-};
-
-const convertQuestionToElementType = (condition: Condition | null | undefined): Condition | null => {
-  if (!condition) return null;
-
-  if (isSingleCondition(condition)) {
-    const newCondition = { ...condition } as Record<string, unknown>;
-    const leftOperand = { ...condition.leftOperand } as Record<string, unknown>;
-
-    if ((leftOperand.type as string) === "question") {
-      leftOperand.type = "element";
-    }
-    newCondition.leftOperand = leftOperand;
-
-    if (condition.rightOperand) {
-      const rightOperand = { ...condition.rightOperand } as Record<string, unknown>;
-      if ((rightOperand.type as string) === "question") {
-        rightOperand.type = "element";
-      }
-      newCondition.rightOperand = rightOperand;
-    }
-
-    return newCondition as TSingleCondition;
-  }
-
-  if (isConditionGroup(condition)) {
-    const newConditionGroup: TConditionGroup = {
-      ...condition,
-      conditions: condition.conditions.map((nestedCondition) => {
-        const converted = convertQuestionToElementType(nestedCondition);
-        return converted ?? nestedCondition;
-      }),
-    };
-
-    return newConditionGroup;
-  }
-
-  return null;
-};
-
-const convertElementToQuestionType = (condition: Condition | null | undefined): Condition | null => {
-  if (!condition) return null;
-
-  if (isSingleCondition(condition)) {
-    const newCondition = { ...condition } as Record<string, unknown>;
-    const leftOperand = { ...condition.leftOperand } as Record<string, unknown>;
-
-    newCondition.leftOperand = {
-      ...leftOperand,
-      type: leftOperand.type === "element" ? "question" : leftOperand.type,
-    };
-
-    if (condition.rightOperand) {
-      const rightOperand = { ...condition.rightOperand } as Record<string, unknown>;
-      newCondition.rightOperand = {
-        ...rightOperand,
-        type: rightOperand.type === "element" ? "question" : rightOperand.type,
-      };
-    }
-
-    return newCondition as TSingleCondition;
-  }
-
-  if (isConditionGroup(condition)) {
-    const newConditionGroup: TConditionGroup = {
-      ...condition,
-      conditions: condition.conditions.map((nestedCondition) => {
-        const converted = convertElementToQuestionType(nestedCondition);
-        return converted ?? nestedCondition;
-      }),
-    };
-
-    return newConditionGroup;
-  }
-
-  return null;
-};
-
-const reverseLogicActions = (
-  actions: TSurveyBlockLogicAction[],
-  blockIdToQuestionId: Map<string, string>,
-  endingIds: Set<string>
-): TSurveyLogicAction[] => {
-  return actions.map((action) => {
-    if (action.objective === "jumpToBlock") {
-      const target = action.target;
-      const questionId = blockIdToQuestionId.get(target);
-
-      if (questionId) {
-        return {
-          ...action,
-          objective: "jumpToQuestion",
-          target: questionId,
-        };
-      }
-
-      if (endingIds.has(target)) {
-        return {
-          ...action,
-          objective: "jumpToQuestion",
-          target,
-        };
-      }
-
-      return {
-        ...action,
-        objective: "jumpToQuestion",
-        target,
-      };
-    }
-
-    return action;
-  });
-};
-
-const reverseLogicFallback = (
-  fallback: string,
-  blockIdToQuestionId: Map<string, string>,
-  endingIds: Set<string>
-): string | undefined => {
-  const questionId = blockIdToQuestionId.get(fallback);
-
-  if (questionId) {
-    return questionId;
-  }
-
-  if (endingIds.has(fallback)) {
-    return fallback;
-  }
-
-  return undefined;
-};
-
-export const transformQuestionsToBlocks = (
-  questions: TSurveyQuestion[],
-  endings: TSurveyEnding[] = []
-): TSurveyBlock[] => {
-  if (questions.length === 0) {
-    return [];
-  }
-
-  const questionsCopy = structuredClone(questions);
-
-  processCTAQuestions(questionsCopy);
-
-  const endingIds = new Set<string>(endings.map((ending) => ending.id));
-
-  const questionIdToBlockId = new Map<string, string>();
-  const blocks: Record<string, unknown>[] = [];
-
-  for (let i = 0; i < questionsCopy.length; i++) {
-    const question = questionsCopy[i];
-
-    const blockId = createId();
-    questionIdToBlockId.set(question.id as string, blockId);
-
-    const { logic, logicFallback, buttonLabel, backButtonLabel, ...baseElement } = question;
-
-    blocks.push({
-      id: blockId,
-      name: getBlockName(i),
-      elements: [baseElement],
-      buttonLabel,
-      backButtonLabel,
-      logic,
-      logicFallback,
-    });
-  }
-
-  for (const block of blocks) {
-    if (Array.isArray(block.logic) && block.logic.length > 0) {
-      block.logic = block.logic.map(
-        (item: { conditions: TConditionGroup; actions: TSurveyLogicAction[] }) => {
-          const updatedConditions = convertQuestionToElementType(item.conditions);
-
-          if (!updatedConditions || !isConditionGroup(updatedConditions)) {
-            return item;
-          }
-
-          return {
-            ...item,
-            conditions: updatedConditions,
-            actions: updateLogicActions(item.actions, questionIdToBlockId, endingIds),
-          };
-        }
-      );
-    }
-
-    if (typeof block.logicFallback === "string") {
-      block.logicFallback = updateLogicFallback(block.logicFallback, questionIdToBlockId, endingIds);
-    }
-  }
-
-  return blocks as TSurveyBlock[];
-};
-
-export const transformBlocksToQuestions = (
-  blocks: TSurveyBlock[],
-  endings: TSurveyEnding[] = []
-): TSurveyQuestion[] => {
-  if (blocks.length === 0) {
-    return [];
-  }
-
-  const endingIds = new Set<string>(endings.map((ending) => ending.id));
-  const questions: Record<string, unknown>[] = [];
-
-  const blockIdToQuestionId = blocks.reduce((acc, block) => {
-    if (block.elements.length === 0) return acc;
-    acc.set(block.id, block.elements[0].id);
-    return acc;
-  }, new Map<string, string>());
-
-  for (const block of blocks) {
-    if (block.elements.length === 0) continue;
-
-    const element = { ...block.elements[0] } as Record<string, unknown>;
-
-    if (element.type === "cta" && element.ctaButtonLabel) {
-      element.buttonLabel = element.ctaButtonLabel;
-    }
-
-    if (Array.isArray(block.logic) && block.logic.length > 0) {
-      element.logic = block.logic.map(
-        (item: { id: string; conditions: TConditionGroup; actions: TSurveyBlockLogicAction[] }) => {
-          const updatedConditions = convertElementToQuestionType(item.conditions);
-
-          if (!updatedConditions || !isConditionGroup(updatedConditions)) {
-            return item;
-          }
-
-          return {
-            ...item,
-            conditions: updatedConditions,
-            actions: reverseLogicActions(item.actions, blockIdToQuestionId, endingIds),
-          };
-        }
-      );
-    }
-
-    if (block.logicFallback) {
-      element.logicFallback = reverseLogicFallback(block.logicFallback, blockIdToQuestionId, endingIds);
-    }
-
-    if (block.buttonLabel) {
-      element.buttonLabel = block.buttonLabel;
-    }
-
-    if (block.backButtonLabel) {
-      element.backButtonLabel = block.backButtonLabel;
-    }
-
-    questions.push(element);
-  }
-
-  return questions as TSurveyQuestion[];
-};
-
-export const validateSurveyInput = (input: {
-  questions?: TSurveyQuestion[];
-  blocks?: TSurveyBlock[];
-  updateOnly?: boolean;
-}): Result<{ hasQuestions: boolean; hasBlocks: boolean }, InvalidInputError> => {
-  const hasQuestions = Boolean(input.questions && input.questions.length > 0);
-  const hasBlocks = Boolean(input.blocks && input.blocks.length > 0);
-
-  if (hasQuestions && hasBlocks) {
-    return err(
-      new InvalidInputError(
-        "Cannot provide both questions and blocks. Please provide only one of these fields."
-      )
-    );
-  }
-
-  if (!hasQuestions && !hasBlocks && !input.updateOnly) {
-    return err(new InvalidInputError("Must provide either questions or blocks. Both cannot be empty."));
-  }
-
-  return ok({ hasQuestions, hasBlocks });
-};

apps/web/app/lib/survey-block-builder.ts

@@ -1,308 +0,0 @@
-import { createId } from "@paralleldrive/cuid2";
-import type { TFunction } from "i18next";
-import type { TSurveyBlock, TSurveyBlockLogic } from "@formbricks/types/surveys/blocks";
-import type {
-  TSurveyCTAElement,
-  TSurveyConsentElement,
-  TSurveyElement,
-  TSurveyMultipleChoiceElement,
-  TSurveyNPSElement,
-  TSurveyOpenTextElement,
-  TSurveyOpenTextElementInputType,
-  TSurveyRatingElement,
-} from "@formbricks/types/surveys/elements";
-import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
-import type { TShuffleOption } from "@formbricks/types/surveys/types";
-import { createI18nString } from "@/lib/i18n/utils";
-
-const getDefaultButtonLabel = (label: string | undefined, t: TFunction) =>
-  createI18nString(label || t("common.next"), []);
-
-const getDefaultBackButtonLabel = (label: string | undefined, t: TFunction) =>
-  createI18nString(label || t("common.back"), []);
-
-export const buildMultipleChoiceElement = ({
-  id,
-  headline,
-  type,
-  subheader,
-  choices,
-  choiceIds,
-  shuffleOption,
-  required,
-  containsOther = false,
-}: {
-  id?: string;
-  headline: string;
-  type: TSurveyElementTypeEnum.MultipleChoiceMulti | TSurveyElementTypeEnum.MultipleChoiceSingle;
-  subheader?: string;
-  choices: string[];
-  choiceIds?: string[];
-  shuffleOption?: TShuffleOption;
-  required?: boolean;
-  containsOther?: boolean;
-}): TSurveyMultipleChoiceElement => {
-  return {
-    id: id ?? createId(),
-    type,
-    subheader: subheader ? createI18nString(subheader, []) : undefined,
-    headline: createI18nString(headline, []),
-    choices: choices.map((choice, index) => {
-      const isLastIndex = index === choices.length - 1;
-      let choiceId: string;
-      if (containsOther && isLastIndex) {
-        choiceId = "other";
-      } else if (choiceIds) {
-        choiceId = choiceIds[index];
-      } else {
-        choiceId = createId();
-      }
-      return { id: choiceId, label: createI18nString(choice, []) };
-    }),
-    shuffleOption: shuffleOption || "none",
-    required: required ?? false,
-  };
-};
-
-export const buildOpenTextElement = ({
-  id,
-  headline,
-  subheader,
-  placeholder,
-  inputType,
-  required,
-  longAnswer,
-}: {
-  id?: string;
-  headline: string;
-  subheader?: string;
-  placeholder?: string;
-  required?: boolean;
-  inputType: TSurveyOpenTextElementInputType;
-  longAnswer?: boolean;
-}): TSurveyOpenTextElement => {
-  return {
-    id: id ?? createId(),
-    type: TSurveyElementTypeEnum.OpenText,
-    inputType,
-    subheader: subheader ? createI18nString(subheader, []) : undefined,
-    placeholder: placeholder ? createI18nString(placeholder, []) : undefined,
-    headline: createI18nString(headline, []),
-    required: required ?? false,
-    longAnswer,
-    charLimit: {
-      enabled: false,
-    },
-  };
-};
-
-export const buildRatingElement = ({
-  id,
-  headline,
-  subheader,
-  scale,
-  range,
-  lowerLabel,
-  upperLabel,
-  required,
-  isColorCodingEnabled = false,
-}: {
-  id?: string;
-  headline: string;
-  scale: TSurveyRatingElement["scale"];
-  range: TSurveyRatingElement["range"];
-  lowerLabel?: string;
-  upperLabel?: string;
-  subheader?: string;
-  required?: boolean;
-  isColorCodingEnabled?: boolean;
-}): TSurveyRatingElement => {
-  return {
-    id: id ?? createId(),
-    type: TSurveyElementTypeEnum.Rating,
-    subheader: subheader ? createI18nString(subheader, []) : undefined,
-    headline: createI18nString(headline, []),
-    scale,
-    range,
-    required: required ?? false,
-    isColorCodingEnabled,
-    lowerLabel: lowerLabel ? createI18nString(lowerLabel, []) : undefined,
-    upperLabel: upperLabel ? createI18nString(upperLabel, []) : undefined,
-  };
-};
-
-export const buildConsentElement = ({
-  id,
-  headline,
-  subheader,
-  label,
-  required,
-}: {
-  id?: string;
-  headline: string;
-  subheader: string;
-  required?: boolean;
-  label: string;
-}): TSurveyConsentElement => {
-  return {
-    id: id ?? createId(),
-    type: TSurveyElementTypeEnum.Consent,
-    subheader: createI18nString(subheader, []),
-    headline: createI18nString(headline, []),
-    required: required ?? false,
-    label: createI18nString(label, []),
-  };
-};
-
-export const buildCTAElement = ({
-  id,
-  headline,
-  subheader,
-  buttonExternal,
-  required,
-  ctaButtonLabel,
-  buttonUrl,
-}: {
-  id?: string;
-  headline: string;
-  buttonExternal?: boolean;
-  subheader: string;
-  required?: boolean;
-  ctaButtonLabel?: string;
-  buttonUrl?: string;
-}): TSurveyCTAElement => {
-  return {
-    id: id ?? createId(),
-    type: TSurveyElementTypeEnum.CTA,
-    subheader: createI18nString(subheader, []),
-    headline: createI18nString(headline, []),
-    ctaButtonLabel: ctaButtonLabel ? createI18nString(ctaButtonLabel, []) : undefined,
-    required: required ?? false,
-    buttonExternal: buttonExternal ?? false,
-    buttonUrl,
-  };
-};
-
-export const buildNPSElement = ({
-  id,
-  headline,
-  subheader,
-  lowerLabel,
-  upperLabel,
-  required,
-  isColorCodingEnabled = false,
-}: {
-  id?: string;
-  headline: string;
-  subheader?: string;
-  lowerLabel?: string;
-  upperLabel?: string;
-  required?: boolean;
-  isColorCodingEnabled?: boolean;
-}): TSurveyNPSElement => {
-  return {
-    id: id ?? createId(),
-    type: TSurveyElementTypeEnum.NPS,
-    subheader: subheader ? createI18nString(subheader, []) : undefined,
-    headline: createI18nString(headline, []),
-    required: required ?? false,
-    isColorCodingEnabled,
-    lowerLabel: lowerLabel ? createI18nString(lowerLabel, []) : undefined,
-    upperLabel: upperLabel ? createI18nString(upperLabel, []) : undefined,
-  };
-};
-
-// Helper function to create block-level jump logic based on operator
-export const createBlockJumpLogic = (
-  sourceElementId: string,
-  targetBlockId: string,
-  operator: "isSkipped" | "isSubmitted" | "isClicked"
-): TSurveyBlockLogic => ({
-  id: createId(),
-  conditions: {
-    id: createId(),
-    connector: "and",
-    conditions: [
-      {
-        id: createId(),
-        leftOperand: {
-          value: sourceElementId,
-          type: "element",
-        },
-        operator: operator,
-      },
-    ],
-  },
-  actions: [
-    {
-      id: createId(),
-      objective: "jumpToBlock",
-      target: targetBlockId,
-    },
-  ],
-});
-
-// Helper function to create block-level jump logic based on choice selection
-export const createBlockChoiceJumpLogic = (
-  sourceElementId: string,
-  choiceId: string | number,
-  targetBlockId: string
-): TSurveyBlockLogic => ({
-  id: createId(),
-  conditions: {
-    id: createId(),
-    connector: "and",
-    conditions: [
-      {
-        id: createId(),
-        leftOperand: {
-          value: sourceElementId,
-          type: "element",
-        },
-        operator: "equals",
-        rightOperand: {
-          type: "static",
-          value: choiceId,
-        },
-      },
-    ],
-  },
-  actions: [
-    {
-      id: createId(),
-      objective: "jumpToBlock",
-      target: targetBlockId,
-    },
-  ],
-});
-
-// Block builder function
-export const buildBlock = ({
-  id,
-  name,
-  elements,
-  logic,
-  logicFallback,
-  buttonLabel,
-  backButtonLabel,
-  t,
-}: {
-  id?: string;
-  name: string;
-  elements: TSurveyElement[];
-  logic?: TSurveyBlockLogic[];
-  logicFallback?: string;
-  buttonLabel?: string;
-  backButtonLabel?: string;
-  t: TFunction;
-}): TSurveyBlock => {
-  return {
-    id: id ?? createId(),
-    name,
-    elements,
-    logic,
-    logicFallback,
-    buttonLabel: buttonLabel ? getDefaultButtonLabel(buttonLabel, t) : undefined,
-    backButtonLabel: backButtonLabel ? getDefaultBackButtonLabel(backButtonLabel, t) : undefined,
-  };
-};

apps/web/app/lib/survey-builder.test.ts

@@ -1,6 +1,15 @@
 import { describe, expect, test } from "vitest";
+import { TShuffleOption, TSurveyLogic, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
 import {
+  buildCTAQuestion,
+  buildConsentQuestion,
+  buildMultipleChoiceQuestion,
+  buildNPSQuestion,
+  buildOpenTextQuestion,
+  buildRatingQuestion,
   buildSurvey,
+  createChoiceJumpLogic,
+  createJumpLogic,
   getDefaultEndingCard,
   getDefaultSurveyPreset,
   getDefaultWelcomeCard,
@@ -10,81 +19,595 @@ import {
 const mockT = (props: any): string => (typeof props === "string" ? props : props.key);
 
 describe("Survey Builder", () => {
-  describe("Helper Functions", () => {
+  describe("buildMultipleChoiceQuestion", () => {
-    test("getDefaultSurveyPreset returns expected default survey preset", () => {
+    test("creates a single choice question with required fields", () => {
-      const preset = getDefaultSurveyPreset(mockT);
+      const question = buildMultipleChoiceQuestion({
-      expect(preset.name).toBe("New Survey");
+        headline: "Test Question",
-      // test welcomeCard and endings
+        type: TSurveyQuestionTypeEnum.MultipleChoiceSingle,
-      expect(preset.welcomeCard).toHaveProperty("headline");
+        choices: ["Option 1", "Option 2", "Option 3"],
-      expect(preset.endings).toHaveLength(1);
+        t: mockT,
-      expect(preset.endings[0]).toHaveProperty("headline");
-      expect(preset.hiddenFields).toEqual(hiddenFieldsDefault);
-      expect(preset.blocks).toEqual([]);
-    });
-
-    test("getDefaultWelcomeCard returns expected welcome card", () => {
-      const welcomeCard = getDefaultWelcomeCard(mockT);
-      expect(welcomeCard).toMatchObject({
-        enabled: false,
-        headline: { default: "templates.default_welcome_card_headline" },
-        timeToFinish: false,
-        showResponseCount: false,
       });
-      // Check that the welcome card is properly structured
-      expect(welcomeCard).toHaveProperty("enabled");
-      expect(welcomeCard).toHaveProperty("headline");
-      expect(welcomeCard).toHaveProperty("showResponseCount");
-      expect(welcomeCard).toHaveProperty("timeToFinish");
-    });
 
-    test("getDefaultEndingCard returns expected ending card", () => {
+      expect(question).toMatchObject({
-      const languages: string[] = [];
+        type: TSurveyQuestionTypeEnum.MultipleChoiceSingle,
-      const endingCard = getDefaultEndingCard(languages, mockT);
+        headline: { default: "Test Question" },
-      expect(endingCard).toMatchObject({
+        choices: expect.arrayContaining([
-        type: "endScreen",
+          expect.objectContaining({ label: { default: "Option 1" } }),
-        headline: { default: "templates.default_ending_card_headline" },
+          expect.objectContaining({ label: { default: "Option 2" } }),
-        subheader: { default: "templates.default_ending_card_subheader" },
+          expect.objectContaining({ label: { default: "Option 3" } }),
+        ]),
+        buttonLabel: { default: "common.next" },
+        backButtonLabel: { default: "common.back" },
+        shuffleOption: "none",
+        required: false,
       });
-      expect(endingCard.id).toBeDefined();
+      expect(question.choices.length).toBe(3);
-      expect(endingCard).toHaveProperty("buttonLabel");
+      expect(question.id).toBeDefined();
-      expect(endingCard).toHaveProperty("buttonLink");
     });
 
-    test("hiddenFieldsDefault has expected structure", () => {
+    test("creates a multiple choice question with provided ID", () => {
-      expect(hiddenFieldsDefault).toMatchObject({
+      const customId = "custom-id-123";
-        enabled: true,
+      const question = buildMultipleChoiceQuestion({
-        fieldIds: [],
+        id: customId,
+        headline: "Test Question",
+        type: TSurveyQuestionTypeEnum.MultipleChoiceMulti,
+        choices: ["Option 1", "Option 2"],
+        t: mockT,
       });
+
+      expect(question.id).toBe(customId);
+      expect(question.type).toBe(TSurveyQuestionTypeEnum.MultipleChoiceMulti);
     });
 
-    test("buildSurvey returns built survey with overridden preset properties", () => {
+    test("handles 'other' option correctly", () => {
-      const config = {
+      const choices = ["Option 1", "Option 2", "Other"];
-        name: "Custom Survey",
+      const question = buildMultipleChoiceQuestion({
-        role: "productManager" as const,
+        headline: "Test Question",
-        industries: ["saas" as const],
+        type: TSurveyQuestionTypeEnum.MultipleChoiceSingle,
-        channels: ["link" as const],
+        choices,
-        description: "A custom survey description",
+        containsOther: true,
-        blocks: [],
+        t: mockT,
-        endings: [getDefaultEndingCard([], mockT)],
+      });
-        hiddenFields: hiddenFieldsDefault,
-      };
 
-      const survey = buildSurvey(config, mockT);
+      expect(question.choices.length).toBe(3);
+      expect(question.choices[2].id).toBe("other");
+    });
 
-      // role, industries, channels, description
+    test("uses provided choice IDs when available", () => {
-      expect(survey.role).toBe(config.role);
+      const choiceIds = ["id1", "id2", "id3"];
-      expect(survey.industries).toEqual(config.industries);
+      const question = buildMultipleChoiceQuestion({
-      expect(survey.channels).toEqual(config.channels);
+        headline: "Test Question",
-      expect(survey.description).toBe(config.description);
+        type: TSurveyQuestionTypeEnum.MultipleChoiceSingle,
+        choices: ["Option 1", "Option 2", "Option 3"],
+        choiceIds,
+        t: mockT,
+      });
 
-      // preset overrides
+      expect(question.choices[0].id).toBe(choiceIds[0]);
-      expect(survey.preset.name).toBe(config.name);
+      expect(question.choices[1].id).toBe(choiceIds[1]);
-      expect(survey.preset.endings).toEqual(config.endings);
+      expect(question.choices[2].id).toBe(choiceIds[2]);
-      expect(survey.preset.hiddenFields).toEqual(config.hiddenFields);
+    });
-      expect(survey.preset.blocks).toEqual(config.blocks);
 
-      // default values from getDefaultSurveyPreset
+    test("applies all optional parameters correctly", () => {
-      expect(survey.preset.welcomeCard).toHaveProperty("headline");
+      const logic: TSurveyLogic[] = [
+        {
+          id: "logic-1",
+          conditions: {
+            id: "cond-1",
+            connector: "and",
+            conditions: [],
+          },
+          actions: [],
+        },
+      ];
+
+      const shuffleOption: TShuffleOption = "all";
+
+      const question = buildMultipleChoiceQuestion({
+        headline: "Test Question",
+        type: TSurveyQuestionTypeEnum.MultipleChoiceSingle,
+        subheader: "This is a subheader",
+        choices: ["Option 1", "Option 2"],
+        buttonLabel: "Custom Next",
+        backButtonLabel: "Custom Back",
+        shuffleOption,
+        required: false,
+        logic,
+        t: mockT,
+      });
+
+      expect(question.subheader).toEqual({ default: "This is a subheader" });
+      expect(question.buttonLabel).toEqual({ default: "Custom Next" });
+      expect(question.backButtonLabel).toEqual({ default: "Custom Back" });
+      expect(question.shuffleOption).toBe("all");
+      expect(question.required).toBe(false);
+      expect(question.logic).toBe(logic);
+    });
+  });
+
+  describe("buildOpenTextQuestion", () => {
+    test("creates an open text question with required fields", () => {
+      const question = buildOpenTextQuestion({
+        headline: "Open Question",
+        inputType: "text",
+        t: mockT,
+      });
+
+      expect(question).toMatchObject({
+        type: TSurveyQuestionTypeEnum.OpenText,
+        headline: { default: "Open Question" },
+        inputType: "text",
+        buttonLabel: { default: "common.next" },
+        backButtonLabel: { default: "common.back" },
+        required: false,
+        charLimit: {
+          enabled: false,
+        },
+      });
+      expect(question.id).toBeDefined();
+    });
+
+    test("applies all optional parameters correctly", () => {
+      const logic: TSurveyLogic[] = [
+        {
+          id: "logic-1",
+          conditions: {
+            id: "cond-1",
+            connector: "and",
+            conditions: [],
+          },
+          actions: [],
+        },
+      ];
+
+      const question = buildOpenTextQuestion({
+        id: "custom-id",
+        headline: "Open Question",
+        subheader: "Answer this question",
+        placeholder: "Type here",
+        buttonLabel: "Submit",
+        backButtonLabel: "Previous",
+        required: false,
+        longAnswer: true,
+        inputType: "email",
+        logic,
+        t: mockT,
+      });
+
+      expect(question.id).toBe("custom-id");
+      expect(question.subheader).toEqual({ default: "Answer this question" });
+      expect(question.placeholder).toEqual({ default: "Type here" });
+      expect(question.buttonLabel).toEqual({ default: "Submit" });
+      expect(question.backButtonLabel).toEqual({ default: "Previous" });
+      expect(question.required).toBe(false);
+      expect(question.longAnswer).toBe(true);
+      expect(question.inputType).toBe("email");
+      expect(question.logic).toBe(logic);
+    });
+  });
+
+  describe("buildRatingQuestion", () => {
+    test("creates a rating question with required fields", () => {
+      const question = buildRatingQuestion({
+        headline: "Rating Question",
+        scale: "number",
+        range: 5,
+        t: mockT,
+      });
+
+      expect(question).toMatchObject({
+        type: TSurveyQuestionTypeEnum.Rating,
+        headline: { default: "Rating Question" },
+        scale: "number",
+        range: 5,
+        buttonLabel: { default: "common.next" },
+        backButtonLabel: { default: "common.back" },
+        required: false,
+        isColorCodingEnabled: false,
+      });
+      expect(question.id).toBeDefined();
+    });
+
+    test("applies all optional parameters correctly", () => {
+      const logic: TSurveyLogic[] = [
+        {
+          id: "logic-1",
+          conditions: {
+            id: "cond-1",
+            connector: "and",
+            conditions: [],
+          },
+          actions: [],
+        },
+      ];
+
+      const question = buildRatingQuestion({
+        id: "custom-id",
+        headline: "Rating Question",
+        subheader: "Rate us",
+        scale: "star",
+        range: 10,
+        lowerLabel: "Poor",
+        upperLabel: "Excellent",
+        buttonLabel: "Submit",
+        backButtonLabel: "Previous",
+        required: false,
+        isColorCodingEnabled: true,
+        logic,
+        t: mockT,
+      });
+
+      expect(question.id).toBe("custom-id");
+      expect(question.subheader).toEqual({ default: "Rate us" });
+      expect(question.scale).toBe("star");
+      expect(question.range).toBe(10);
+      expect(question.lowerLabel).toEqual({ default: "Poor" });
+      expect(question.upperLabel).toEqual({ default: "Excellent" });
+      expect(question.buttonLabel).toEqual({ default: "Submit" });
+      expect(question.backButtonLabel).toEqual({ default: "Previous" });
+      expect(question.required).toBe(false);
+      expect(question.isColorCodingEnabled).toBe(true);
+      expect(question.logic).toBe(logic);
+    });
+  });
+
+  describe("buildNPSQuestion", () => {
+    test("creates an NPS question with required fields", () => {
+      const question = buildNPSQuestion({
+        headline: "NPS Question",
+        t: mockT,
+      });
+
+      expect(question).toMatchObject({
+        type: TSurveyQuestionTypeEnum.NPS,
+        headline: { default: "NPS Question" },
+        buttonLabel: { default: "common.next" },
+        backButtonLabel: { default: "common.back" },
+        required: false,
+        isColorCodingEnabled: false,
+      });
+      expect(question.id).toBeDefined();
+    });
+
+    test("applies all optional parameters correctly", () => {
+      const logic: TSurveyLogic[] = [
+        {
+          id: "logic-1",
+          conditions: {
+            id: "cond-1",
+            connector: "and",
+            conditions: [],
+          },
+          actions: [],
+        },
+      ];
+
+      const question = buildNPSQuestion({
+        id: "custom-id",
+        headline: "NPS Question",
+        subheader: "How likely are you to recommend us?",
+        lowerLabel: "Not likely",
+        upperLabel: "Very likely",
+        buttonLabel: "Submit",
+        backButtonLabel: "Previous",
+        required: false,
+        isColorCodingEnabled: true,
+        logic,
+        t: mockT,
+      });
+
+      expect(question.id).toBe("custom-id");
+      expect(question.subheader).toEqual({ default: "How likely are you to recommend us?" });
+      expect(question.lowerLabel).toEqual({ default: "Not likely" });
+      expect(question.upperLabel).toEqual({ default: "Very likely" });
+      expect(question.buttonLabel).toEqual({ default: "Submit" });
+      expect(question.backButtonLabel).toEqual({ default: "Previous" });
+      expect(question.required).toBe(false);
+      expect(question.isColorCodingEnabled).toBe(true);
+      expect(question.logic).toBe(logic);
+    });
+  });
+
+  describe("buildConsentQuestion", () => {
+    test("creates a consent question with required fields", () => {
+      const question = buildConsentQuestion({
+        headline: "Consent Question",
+        subheader: "",
+        label: "I agree to terms",
+        t: mockT,
+      });
+
+      expect(question).toMatchObject({
+        type: TSurveyQuestionTypeEnum.Consent,
+        headline: { default: "Consent Question" },
+        subheader: { default: "" },
+        label: { default: "I agree to terms" },
+        buttonLabel: { default: "common.next" },
+        backButtonLabel: { default: "common.back" },
+        required: false,
+      });
+      expect(question.id).toBeDefined();
+    });
+
+    test("applies all optional parameters correctly", () => {
+      const logic: TSurveyLogic[] = [
+        {
+          id: "logic-1",
+          conditions: {
+            id: "cond-1",
+            connector: "and",
+            conditions: [],
+          },
+          actions: [],
+        },
+      ];
+
+      const question = buildConsentQuestion({
+        id: "custom-id",
+        headline: "Consent Question",
+        subheader: "Please read the terms",
+        label: "I agree to terms",
+        buttonLabel: "Submit",
+        backButtonLabel: "Previous",
+        required: false,
+        logic,
+        t: mockT,
+      });
+
+      expect(question.id).toBe("custom-id");
+      expect(question.subheader).toEqual({ default: "Please read the terms" });
+      expect(question.label).toEqual({ default: "I agree to terms" });
+      expect(question.buttonLabel).toEqual({ default: "Submit" });
+      expect(question.backButtonLabel).toEqual({ default: "Previous" });
+      expect(question.required).toBe(false);
+      expect(question.logic).toBe(logic);
+    });
+  });
+
+  describe("buildCTAQuestion", () => {
+    test("creates a CTA question with required fields", () => {
+      const question = buildCTAQuestion({
+        headline: "CTA Question",
+        subheader: "",
+        buttonExternal: false,
+        t: mockT,
+      });
+
+      expect(question).toMatchObject({
+        type: TSurveyQuestionTypeEnum.CTA,
+        headline: { default: "CTA Question" },
+        subheader: { default: "" },
+        buttonLabel: { default: "common.next" },
+        backButtonLabel: { default: "common.back" },
+        required: false,
+        buttonExternal: false,
+      });
+      expect(question.id).toBeDefined();
+    });
+
+    test("applies all optional parameters correctly", () => {
+      const logic: TSurveyLogic[] = [
+        {
+          id: "logic-1",
+          conditions: {
+            id: "cond-1",
+            connector: "and",
+            conditions: [],
+          },
+          actions: [],
+        },
+      ];
+
+      const question = buildCTAQuestion({
+        id: "custom-id",
+        headline: "CTA Question",
+        subheader: "<p>Click the button</p>",
+        buttonLabel: "Click me",
+        buttonExternal: true,
+        buttonUrl: "https://example.com",
+        backButtonLabel: "Previous",
+        required: false,
+        dismissButtonLabel: "No thanks",
+        logic,
+        t: mockT,
+      });
+
+      expect(question.id).toBe("custom-id");
+      expect(question.subheader).toEqual({ default: "<p>Click the button</p>" });
+      expect(question.buttonLabel).toEqual({ default: "Click me" });
+      expect(question.buttonExternal).toBe(true);
+      expect(question.buttonUrl).toBe("https://example.com");
+      expect(question.backButtonLabel).toEqual({ default: "Previous" });
+      expect(question.required).toBe(false);
+      expect(question.dismissButtonLabel).toEqual({ default: "No thanks" });
+      expect(question.logic).toBe(logic);
+    });
+
+    test("handles external button with URL", () => {
+      const question = buildCTAQuestion({
+        headline: "CTA Question",
+        subheader: "",
+        buttonExternal: true,
+        buttonUrl: "https://formbricks.com",
+        t: mockT,
+      });
+
+      expect(question.buttonExternal).toBe(true);
+      expect(question.buttonUrl).toBe("https://formbricks.com");
+    });
+  });
+
+  // Test combinations of parameters for edge cases
+  describe("Edge cases", () => {
+    test("multiple choice question with empty choices array", () => {
+      const question = buildMultipleChoiceQuestion({
+        headline: "Test Question",
+        type: TSurveyQuestionTypeEnum.MultipleChoiceSingle,
+        choices: [],
+        t: mockT,
+      });
+
+      expect(question.choices).toEqual([]);
+    });
+
+    test("open text question with all parameters", () => {
+      const question = buildOpenTextQuestion({
+        id: "custom-id",
+        headline: "Open Question",
+        subheader: "Answer this question",
+        placeholder: "Type here",
+        buttonLabel: "Submit",
+        backButtonLabel: "Previous",
+        required: false,
+        longAnswer: true,
+        inputType: "email",
+        logic: [],
+        t: mockT,
+      });
+
+      expect(question).toMatchObject({
+        id: "custom-id",
+        type: TSurveyQuestionTypeEnum.OpenText,
+        headline: { default: "Open Question" },
+        subheader: { default: "Answer this question" },
+        placeholder: { default: "Type here" },
+        buttonLabel: { default: "Submit" },
+        backButtonLabel: { default: "Previous" },
+        required: false,
+        longAnswer: true,
+        inputType: "email",
+        logic: [],
+      });
     });
   });
 });
+
+describe("Helper Functions", () => {
+  test("createJumpLogic returns valid jump logic", () => {
+    const sourceId = "q1";
+    const targetId = "q2";
+    const operator: "isClicked" = "isClicked";
+    const logic = createJumpLogic(sourceId, targetId, operator);
+
+    // Check structure
+    expect(logic).toHaveProperty("id");
+    expect(logic).toHaveProperty("conditions");
+    expect(logic.conditions).toHaveProperty("conditions");
+    expect(Array.isArray(logic.conditions.conditions)).toBe(true);
+
+    // Check one of the inner conditions
+    const condition = logic.conditions.conditions[0];
+    // Need to use type checking to ensure condition is a TSingleCondition not a TConditionGroup
+    if (!("connector" in condition)) {
+      expect(condition.leftOperand.value).toBe(sourceId);
+      expect(condition.operator).toBe(operator);
+    }
+
+    // Check actions
+    expect(Array.isArray(logic.actions)).toBe(true);
+    const action = logic.actions[0];
+    if (action.objective === "jumpToQuestion") {
+      expect(action.target).toBe(targetId);
+    }
+  });
+
+  test("createChoiceJumpLogic returns valid jump logic based on choice selection", () => {
+    const sourceId = "q1";
+    const choiceId = "choice1";
+    const targetId = "q2";
+    const logic = createChoiceJumpLogic(sourceId, choiceId, targetId);
+
+    expect(logic).toHaveProperty("id");
+    expect(logic.conditions).toHaveProperty("conditions");
+
+    const condition = logic.conditions.conditions[0];
+    if (!("connector" in condition)) {
+      expect(condition.leftOperand.value).toBe(sourceId);
+      expect(condition.operator).toBe("equals");
+      expect(condition.rightOperand?.value).toBe(choiceId);
+    }
+
+    const action = logic.actions[0];
+    if (action.objective === "jumpToQuestion") {
+      expect(action.target).toBe(targetId);
+    }
+  });
+
+  test("getDefaultWelcomeCard returns expected welcome card", () => {
+    const card = getDefaultWelcomeCard(mockT);
+    expect(card.enabled).toBe(false);
+    expect(card.headline).toEqual({ default: "templates.default_welcome_card_headline" });
+    expect(card.subheader).toEqual({ default: "templates.default_welcome_card_html" });
+    expect(card.buttonLabel).toEqual({ default: "templates.default_welcome_card_button_label" });
+    // boolean flags
+    expect(card.timeToFinish).toBe(false);
+    expect(card.showResponseCount).toBe(false);
+  });
+
+  test("getDefaultEndingCard returns expected end screen card", () => {
+    // Pass empty languages array to simulate no languages
+    const card = getDefaultEndingCard([], mockT);
+    expect(card).toHaveProperty("id");
+    expect(card.type).toBe("endScreen");
+    expect(card.headline).toEqual({ default: "templates.default_ending_card_headline" });
+    expect(card.subheader).toEqual({ default: "templates.default_ending_card_subheader" });
+    expect(card.buttonLabel).toEqual({ default: "templates.default_ending_card_button_label" });
+    expect(card.buttonLink).toBe("https://formbricks.com");
+  });
+
+  test("getDefaultSurveyPreset returns expected default survey preset", () => {
+    const preset = getDefaultSurveyPreset(mockT);
+    expect(preset.name).toBe("New Survey");
+    expect(preset.questions).toEqual([]);
+    // test welcomeCard and endings
+    expect(preset.welcomeCard).toHaveProperty("headline");
+    expect(Array.isArray(preset.endings)).toBe(true);
+    expect(preset.hiddenFields).toEqual(hiddenFieldsDefault);
+  });
+
+  test("buildSurvey returns built survey with overridden preset properties", () => {
+    const config = {
+      name: "Custom Survey",
+      industries: ["eCommerce"] as string[],
+      channels: ["link"],
+      description: "Test survey",
+      questions: [
+        {
+          id: "q1",
+          type: TSurveyQuestionTypeEnum.OpenText, // changed from "OpenText"
+          headline: { default: "Question 1" },
+          inputType: "text",
+          buttonLabel: { default: "Next" },
+          backButtonLabel: { default: "Back" },
+          required: true,
+        },
+      ],
+      endings: [
+        {
+          id: "end1",
+          type: "endScreen",
+          headline: { default: "End Screen" },
+          subheader: { default: "Thanks" },
+          buttonLabel: { default: "Finish" },
+          buttonLink: "https://formbricks.com",
+        },
+      ],
+      hiddenFields: { enabled: false, fieldIds: ["f1"] },
+    };
+
+    const survey = buildSurvey(config as any, mockT);
+    expect(survey.name).toBe(config.name);
+    expect(survey.industries).toEqual(config.industries);
+    expect(survey.channels).toEqual(config.channels);
+    expect(survey.description).toBe(config.description);
+    // preset overrides
+    expect(survey.preset.name).toBe(config.name);
+    expect(survey.preset.questions).toEqual(config.questions);
+    expect(survey.preset.endings).toEqual(config.endings);
+    expect(survey.preset.hiddenFields).toEqual(config.hiddenFields);
+  });
+
+  test("hiddenFieldsDefault has expected default configuration", () => {
+    expect(hiddenFieldsDefault).toEqual({ enabled: true, fieldIds: [] });
+  });
+});

apps/web/app/lib/survey-builder.ts

@@ -1,17 +1,284 @@
 import { createId } from "@paralleldrive/cuid2";
-import type { TFunction } from "i18next";
+import { TFunction } from "i18next";
-import type { TSurveyBlock } from "@formbricks/types/surveys/blocks";
+import {
-import type {
+  TShuffleOption,
+  TSurveyCTAQuestion,
+  TSurveyConsentQuestion,
   TSurveyEndScreenCard,
   TSurveyEnding,
   TSurveyHiddenFields,
   TSurveyLanguage,
   TSurveyLogic,
+  TSurveyMultipleChoiceQuestion,
+  TSurveyNPSQuestion,
+  TSurveyOpenTextQuestion,
+  TSurveyOpenTextQuestionInputType,
+  TSurveyQuestion,
+  TSurveyQuestionTypeEnum,
+  TSurveyRatingQuestion,
   TSurveyWelcomeCard,
 } from "@formbricks/types/surveys/types";
-import type { TTemplate, TTemplateRole } from "@formbricks/types/templates";
+import { TTemplate, TTemplateRole } from "@formbricks/types/templates";
 import { createI18nString, extractLanguageCodes } from "@/lib/i18n/utils";
 
+const getDefaultButtonLabel = (label: string | undefined, t: TFunction) =>
+  createI18nString(label || t("common.next"), []);
+
+const getDefaultBackButtonLabel = (label: string | undefined, t: TFunction) =>
+  createI18nString(label || t("common.back"), []);
+
+export const buildMultipleChoiceQuestion = ({
+  id,
+  headline,
+  type,
+  subheader,
+  choices,
+  choiceIds,
+  buttonLabel,
+  backButtonLabel,
+  shuffleOption,
+  required,
+  logic,
+  containsOther = false,
+  t,
+}: {
+  id?: string;
+  headline: string;
+  type: TSurveyQuestionTypeEnum.MultipleChoiceMulti | TSurveyQuestionTypeEnum.MultipleChoiceSingle;
+  subheader?: string;
+  choices: string[];
+  choiceIds?: string[];
+  buttonLabel?: string;
+  backButtonLabel?: string;
+  shuffleOption?: TShuffleOption;
+  required?: boolean;
+  logic?: TSurveyLogic[];
+  containsOther?: boolean;
+  t: TFunction;
+}): TSurveyMultipleChoiceQuestion => {
+  return {
+    id: id ?? createId(),
+    type,
+    subheader: subheader ? createI18nString(subheader, []) : undefined,
+    headline: createI18nString(headline, []),
+    choices: choices.map((choice, index) => {
+      const isLastIndex = index === choices.length - 1;
+      const id = containsOther && isLastIndex ? "other" : choiceIds ? choiceIds[index] : createId();
+      return { id, label: createI18nString(choice, []) };
+    }),
+    buttonLabel: getDefaultButtonLabel(buttonLabel, t),
+    backButtonLabel: getDefaultBackButtonLabel(backButtonLabel, t),
+    shuffleOption: shuffleOption || "none",
+    required: required ?? false,
+    logic,
+  };
+};
+
+export const buildOpenTextQuestion = ({
+  id,
+  headline,
+  subheader,
+  placeholder,
+  inputType,
+  buttonLabel,
+  backButtonLabel,
+  required,
+  logic,
+  longAnswer,
+  t,
+}: {
+  id?: string;
+  headline: string;
+  subheader?: string;
+  placeholder?: string;
+  buttonLabel?: string;
+  backButtonLabel?: string;
+  required?: boolean;
+  logic?: TSurveyLogic[];
+  inputType: TSurveyOpenTextQuestionInputType;
+  longAnswer?: boolean;
+  t: TFunction;
+}): TSurveyOpenTextQuestion => {
+  return {
+    id: id ?? createId(),
+    type: TSurveyQuestionTypeEnum.OpenText,
+    inputType,
+    subheader: subheader ? createI18nString(subheader, []) : undefined,
+    placeholder: placeholder ? createI18nString(placeholder, []) : undefined,
+    headline: createI18nString(headline, []),
+    buttonLabel: getDefaultButtonLabel(buttonLabel, t),
+    backButtonLabel: getDefaultBackButtonLabel(backButtonLabel, t),
+    required: required ?? false,
+    longAnswer,
+    logic,
+    charLimit: {
+      enabled: false,
+    },
+  };
+};
+
+export const buildRatingQuestion = ({
+  id,
+  headline,
+  subheader,
+  scale,
+  range,
+  lowerLabel,
+  upperLabel,
+  buttonLabel,
+  backButtonLabel,
+  required,
+  logic,
+  isColorCodingEnabled = false,
+  t,
+}: {
+  id?: string;
+  headline: string;
+  scale: TSurveyRatingQuestion["scale"];
+  range: TSurveyRatingQuestion["range"];
+  lowerLabel?: string;
+  upperLabel?: string;
+  subheader?: string;
+  placeholder?: string;
+  buttonLabel?: string;
+  backButtonLabel?: string;
+  required?: boolean;
+  logic?: TSurveyLogic[];
+  isColorCodingEnabled?: boolean;
+  t: TFunction;
+}): TSurveyRatingQuestion => {
+  return {
+    id: id ?? createId(),
+    type: TSurveyQuestionTypeEnum.Rating,
+    subheader: subheader ? createI18nString(subheader, []) : undefined,
+    headline: createI18nString(headline, []),
+    scale,
+    range,
+    buttonLabel: getDefaultButtonLabel(buttonLabel, t),
+    backButtonLabel: getDefaultBackButtonLabel(backButtonLabel, t),
+    required: required ?? false,
+    isColorCodingEnabled,
+    lowerLabel: lowerLabel ? createI18nString(lowerLabel, []) : undefined,
+    upperLabel: upperLabel ? createI18nString(upperLabel, []) : undefined,
+    logic,
+  };
+};
+
+export const buildNPSQuestion = ({
+  id,
+  headline,
+  subheader,
+  lowerLabel,
+  upperLabel,
+  buttonLabel,
+  backButtonLabel,
+  required,
+  logic,
+  isColorCodingEnabled = false,
+  t,
+}: {
+  id?: string;
+  headline: string;
+  lowerLabel?: string;
+  upperLabel?: string;
+  subheader?: string;
+  placeholder?: string;
+  buttonLabel?: string;
+  backButtonLabel?: string;
+  required?: boolean;
+  logic?: TSurveyLogic[];
+  isColorCodingEnabled?: boolean;
+  t: TFunction;
+}): TSurveyNPSQuestion => {
+  return {
+    id: id ?? createId(),
+    type: TSurveyQuestionTypeEnum.NPS,
+    subheader: subheader ? createI18nString(subheader, []) : undefined,
+    headline: createI18nString(headline, []),
+    buttonLabel: getDefaultButtonLabel(buttonLabel, t),
+    backButtonLabel: getDefaultBackButtonLabel(backButtonLabel, t),
+    required: required ?? false,
+    isColorCodingEnabled,
+    lowerLabel: lowerLabel ? createI18nString(lowerLabel, []) : undefined,
+    upperLabel: upperLabel ? createI18nString(upperLabel, []) : undefined,
+    logic,
+  };
+};
+
+export const buildConsentQuestion = ({
+  id,
+  headline,
+  subheader,
+  label,
+  buttonLabel,
+  backButtonLabel,
+  required,
+  logic,
+  t,
+}: {
+  id?: string;
+  headline: string;
+  subheader: string;
+  buttonLabel?: string;
+  backButtonLabel?: string;
+  required?: boolean;
+  logic?: TSurveyLogic[];
+  label: string;
+  t: TFunction;
+}): TSurveyConsentQuestion => {
+  return {
+    id: id ?? createId(),
+    type: TSurveyQuestionTypeEnum.Consent,
+    subheader: createI18nString(subheader, []),
+    headline: createI18nString(headline, []),
+    buttonLabel: getDefaultButtonLabel(buttonLabel, t),
+    backButtonLabel: getDefaultBackButtonLabel(backButtonLabel, t),
+    required: required ?? false,
+    label: createI18nString(label, []),
+    logic,
+  };
+};
+
+export const buildCTAQuestion = ({
+  id,
+  headline,
+  subheader,
+  buttonLabel,
+  buttonExternal,
+  backButtonLabel,
+  required,
+  logic,
+  dismissButtonLabel,
+  buttonUrl,
+  t,
+}: {
+  id?: string;
+  headline: string;
+  buttonExternal: boolean;
+  subheader: string;
+  buttonLabel?: string;
+  backButtonLabel?: string;
+  required?: boolean;
+  logic?: TSurveyLogic[];
+  dismissButtonLabel?: string;
+  buttonUrl?: string;
+  t: TFunction;
+}): TSurveyCTAQuestion => {
+  return {
+    id: id ?? createId(),
+    type: TSurveyQuestionTypeEnum.CTA,
+    subheader: createI18nString(subheader, []),
+    headline: createI18nString(headline, []),
+    buttonLabel: getDefaultButtonLabel(buttonLabel, t),
+    backButtonLabel: getDefaultBackButtonLabel(backButtonLabel, t),
+    dismissButtonLabel: dismissButtonLabel ? createI18nString(dismissButtonLabel, []) : undefined,
+    required: required ?? false,
+    buttonExternal,
+    buttonUrl,
+    logic,
+  };
+};
+
 // Helper function to create standard jump logic based on operator
 export const createJumpLogic = (
   sourceQuestionId: string,
@@ -27,7 +294,7 @@ export const createJumpLogic = (
         id: createId(),
         leftOperand: {
           value: sourceQuestionId,
-          type: "element",
+          type: "question",
         },
         operator: operator,
       },
@@ -57,7 +324,7 @@ export const createChoiceJumpLogic = (
         id: createId(),
         leftOperand: {
           value: sourceQuestionId,
-          type: "element",
+          type: "question",
         },
         operator: "equals",
         rightOperand: {
@@ -110,13 +377,13 @@ export const getDefaultSurveyPreset = (t: TFunction): TTemplate["preset"] => {
     welcomeCard: getDefaultWelcomeCard(t),
     endings: [getDefaultEndingCard([], t)],
     hiddenFields: hiddenFieldsDefault,
-    blocks: [],
+    questions: [],
   };
 };
 
 /**
  * Generic builder for survey.
- * @param config - The configuration for survey settings and blocks.
+ * @param config - The configuration for survey settings and questions.
  * @param t - The translation function.
  */
 export const buildSurvey = (
@@ -126,9 +393,9 @@ export const buildSurvey = (
     channels: ("link" | "app" | "website")[];
     role: TTemplateRole;
     description: string;
-    blocks: TSurveyBlock[];
+    questions: TSurveyQuestion[];
-    endings: TSurveyEnding[];
+    endings?: TSurveyEnding[];
-    hiddenFields: TSurveyHiddenFields;
+    hiddenFields?: TSurveyHiddenFields;
   },
   t: TFunction
 ): TTemplate => {
@@ -142,7 +409,7 @@ export const buildSurvey = (
     preset: {
       ...localSurvey,
       name: config.name,
-      blocks: config.blocks ?? [],
+      questions: config.questions,
       endings: config.endings ?? localSurvey.endings,
       hiddenFields: config.hiddenFields ?? hiddenFieldsDefault,
     },

apps/web/app/lib/surveys/surveys.test.ts

@@ -2,15 +2,19 @@ import "@testing-library/jest-dom/vitest";
 import { cleanup } from "@testing-library/react";
 import { afterEach, describe, expect, test } from "vitest";
 import { TLanguage } from "@formbricks/types/project";
-import { type TSurveyElement, TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+import {
-import { TSurvey, TSurveyLanguage } from "@formbricks/types/surveys/types";
+  TSurvey,
+  TSurveyLanguage,
+  TSurveyQuestion,
+  TSurveyQuestionTypeEnum,
+} from "@formbricks/types/surveys/types";
 import { TTag } from "@formbricks/types/tags";
 import {
   DateRange,
   SelectedFilterValue,
-} from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/response-filter-context";
+} from "@/app/(app)/environments/[environmentId]/components/ResponseFilterContext";
-import { OptionsType } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ElementsComboBox";
+import { OptionsType } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionsComboBox";
-import { generateElementAndFilterOptions, getFormattedFilters, getTodayDate } from "./surveys";
+import { generateQuestionAndFilterOptions, getFormattedFilters, getTodayDate } from "./surveys";
 
 describe("surveys", () => {
   afterEach(() => {
@@ -22,42 +26,31 @@ describe("surveys", () => {
       const survey = {
         id: "survey1",
         name: "Test Survey",
-        blocks: [
+        questions: [
           {
-            id: "block1",
+            id: "q1",
-            name: "Block 1",
+            type: TSurveyQuestionTypeEnum.OpenText,
-            elements: [
+            headline: { default: "Open Text Question" },
-              {
+          } as unknown as TSurveyQuestion,
-                id: "q1",
-                type: TSurveyElementTypeEnum.OpenText,
-                headline: { default: "Open Text Question" },
-                required: false,
-                inputType: "text",
-                charLimit: { enabled: false },
-              } as TSurveyElement,
-            ],
-          },
         ],
-        questions: [],
         createdAt: new Date(),
         updatedAt: new Date(),
         environmentId: "env1",
         status: "draft",
       } as unknown as TSurvey;
 
-      const result = generateElementAndFilterOptions(survey, undefined, {}, {}, {}, []);
+      const result = generateQuestionAndFilterOptions(survey, undefined, {}, {}, {}, []);
 
-      expect(result.elementOptions.length).toBeGreaterThan(0);
+      expect(result.questionOptions.length).toBeGreaterThan(0);
-      expect(result.elementOptions[0].header).toBe(OptionsType.ELEMENTS);
+      expect(result.questionOptions[0].header).toBe(OptionsType.QUESTIONS);
-      expect(result.elementFilterOptions.length).toBe(1);
+      expect(result.questionFilterOptions.length).toBe(1);
-      expect(result.elementFilterOptions[0].id).toBe("q1");
+      expect(result.questionFilterOptions[0].id).toBe("q1");
     });
 
     test("should include tags in options when provided", () => {
       const survey = {
         id: "survey1",
         name: "Test Survey",
-        blocks: [],
         questions: [],
         createdAt: new Date(),
         updatedAt: new Date(),
@@ -69,9 +62,9 @@ describe("surveys", () => {
         { id: "tag1", name: "Tag 1", environmentId: "env1", createdAt: new Date(), updatedAt: new Date() },
       ];
 
-      const result = generateElementAndFilterOptions(survey, tags, {}, {}, {}, []);
+      const result = generateQuestionAndFilterOptions(survey, tags, {}, {}, {}, []);
 
-      const tagsHeader = result.elementOptions.find((opt) => opt.header === OptionsType.TAGS);
+      const tagsHeader = result.questionOptions.find((opt) => opt.header === OptionsType.TAGS);
       expect(tagsHeader).toBeDefined();
       expect(tagsHeader?.option.length).toBe(1);
       expect(tagsHeader?.option[0].label).toBe("Tag 1");
@@ -81,7 +74,6 @@ describe("surveys", () => {
       const survey = {
         id: "survey1",
         name: "Test Survey",
-        blocks: [],
         questions: [],
         createdAt: new Date(),
         updatedAt: new Date(),
@@ -93,9 +85,9 @@ describe("surveys", () => {
         role: ["admin", "user"],
       };
 
-      const result = generateElementAndFilterOptions(survey, undefined, attributes, {}, {}, []);
+      const result = generateQuestionAndFilterOptions(survey, undefined, attributes, {}, {}, []);
 
-      const attributesHeader = result.elementOptions.find((opt) => opt.header === OptionsType.ATTRIBUTES);
+      const attributesHeader = result.questionOptions.find((opt) => opt.header === OptionsType.ATTRIBUTES);
       expect(attributesHeader).toBeDefined();
       expect(attributesHeader?.option.length).toBe(1);
       expect(attributesHeader?.option[0].label).toBe("role");
@@ -105,7 +97,6 @@ describe("surveys", () => {
       const survey = {
         id: "survey1",
         name: "Test Survey",
-        blocks: [],
         questions: [],
         createdAt: new Date(),
         updatedAt: new Date(),
@@ -117,9 +108,9 @@ describe("surveys", () => {
         source: ["web", "mobile"],
       };
 
-      const result = generateElementAndFilterOptions(survey, undefined, {}, meta, {}, []);
+      const result = generateQuestionAndFilterOptions(survey, undefined, {}, meta, {}, []);
 
-      const metaHeader = result.elementOptions.find((opt) => opt.header === OptionsType.META);
+      const metaHeader = result.questionOptions.find((opt) => opt.header === OptionsType.META);
       expect(metaHeader).toBeDefined();
       expect(metaHeader?.option.length).toBe(1);
       expect(metaHeader?.option[0].label).toBe("source");
@@ -129,7 +120,6 @@ describe("surveys", () => {
       const survey = {
         id: "survey1",
         name: "Test Survey",
-        blocks: [],
         questions: [],
         createdAt: new Date(),
         updatedAt: new Date(),
@@ -141,9 +131,9 @@ describe("surveys", () => {
         segment: ["free", "paid"],
       };
 
-      const result = generateElementAndFilterOptions(survey, undefined, {}, {}, hiddenFields, []);
+      const result = generateQuestionAndFilterOptions(survey, undefined, {}, {}, hiddenFields, []);
 
-      const hiddenFieldsHeader = result.elementOptions.find(
+      const hiddenFieldsHeader = result.questionOptions.find(
         (opt) => opt.header === OptionsType.HIDDEN_FIELDS
       );
       expect(hiddenFieldsHeader).toBeDefined();
@@ -155,7 +145,6 @@ describe("surveys", () => {
       const survey = {
         id: "survey1",
         name: "Test Survey",
-        blocks: [],
         questions: [],
         createdAt: new Date(),
         updatedAt: new Date(),
@@ -164,9 +153,9 @@ describe("surveys", () => {
         languages: [{ language: { code: "en" } as unknown as TLanguage } as unknown as TSurveyLanguage],
       } as unknown as TSurvey;
 
-      const result = generateElementAndFilterOptions(survey, undefined, {}, {}, {}, []);
+      const result = generateQuestionAndFilterOptions(survey, undefined, {}, {}, {}, []);
 
-      const othersHeader = result.elementOptions.find((opt) => opt.header === OptionsType.OTHERS);
+      const othersHeader = result.questionOptions.find((opt) => opt.header === OptionsType.OTHERS);
       expect(othersHeader).toBeDefined();
       expect(othersHeader?.option.some((o) => o.label === "Language")).toBeTruthy();
     });
@@ -175,107 +164,78 @@ describe("surveys", () => {
       const survey = {
         id: "survey1",
         name: "Test Survey",
-        blocks: [
+        questions: [
           {
-            id: "block1",
+            id: "q1",
-            name: "Block 1",
+            type: TSurveyQuestionTypeEnum.OpenText,
-            elements: [
+            headline: { default: "Open Text" },
-              {
+          } as unknown as TSurveyQuestion,
-                id: "q1",
+          {
-                type: TSurveyElementTypeEnum.OpenText,
+            id: "q2",
-                headline: { default: "Open Text" },
+            type: TSurveyQuestionTypeEnum.MultipleChoiceSingle,
-                required: false,
+            headline: { default: "Multiple Choice Single" },
-                inputType: "text",
+            choices: [{ id: "c1", label: "Choice 1" }],
-                charLimit: { enabled: false },
+          } as unknown as TSurveyQuestion,
-              },
+          {
-              {
+            id: "q3",
-                id: "q2",
+            type: TSurveyQuestionTypeEnum.MultipleChoiceMulti,
-                type: TSurveyElementTypeEnum.MultipleChoiceSingle,
+            headline: { default: "Multiple Choice Multi" },
-                headline: { default: "Multiple Choice Single" },
+            choices: [
-                required: false,
+              { id: "c1", label: "Choice 1" },
-                choices: [{ id: "c1", label: { default: "Choice 1" } }],
+              { id: "other", label: "Other" },
-                shuffleOption: "none",
+            ],
-              },
+          } as unknown as TSurveyQuestion,
-              {
+          {
-                id: "q3",
+            id: "q4",
-                type: TSurveyElementTypeEnum.MultipleChoiceMulti,
+            type: TSurveyQuestionTypeEnum.NPS,
-                headline: { default: "Multiple Choice Multi" },
+            headline: { default: "NPS" },
-                required: false,
+          } as unknown as TSurveyQuestion,
-                choices: [
+          {
-                  { id: "c1", label: { default: "Choice 1" } },
+            id: "q5",
-                  { id: "other", label: { default: "Other" } },
+            type: TSurveyQuestionTypeEnum.Rating,
-                ],
+            headline: { default: "Rating" },
-                shuffleOption: "none",
+          } as unknown as TSurveyQuestion,
-              },
+          {
-              {
+            id: "q6",
-                id: "q4",
+            type: TSurveyQuestionTypeEnum.CTA,
-                type: TSurveyElementTypeEnum.NPS,
+            headline: { default: "CTA" },
-                headline: { default: "NPS" },
+          } as unknown as TSurveyQuestion,
-                required: false,
+          {
-                lowerLabel: { default: "Not likely" },
+            id: "q7",
-                upperLabel: { default: "Very likely" },
+            type: TSurveyQuestionTypeEnum.PictureSelection,
-              },
+            headline: { default: "Picture Selection" },
-              {
+            choices: [
-                id: "q5",
+              { id: "p1", imageUrl: "url1" },
-                type: TSurveyElementTypeEnum.Rating,
+              { id: "p2", imageUrl: "url2" },
-                headline: { default: "Rating" },
+            ],
-                required: false,
+          } as unknown as TSurveyQuestion,
-                scale: "number",
+          {
-                range: 5,
+            id: "q8",
-                lowerLabel: { default: "Low" },
+            type: TSurveyQuestionTypeEnum.Matrix,
-                upperLabel: { default: "High" },
+            headline: { default: "Matrix" },
-              },
+            rows: [{ id: "r1", label: { default: "Row 1" } }],
-              {
+            columns: [{ id: "c1", label: { default: "Column 1" } }],
-                id: "q6",
+          } as unknown as TSurveyQuestion,
-                type: TSurveyElementTypeEnum.CTA,
-                headline: { default: "CTA" },
-                required: false,
-                buttonLabel: { default: "Click me" },
-                buttonExternal: false,
-              },
-              {
-                id: "q7",
-                type: TSurveyElementTypeEnum.PictureSelection,
-                headline: { default: "Picture Selection" },
-                required: false,
-                allowMultiple: false,
-                choices: [
-                  { id: "p1", imageUrl: "url1" },
-                  { id: "p2", imageUrl: "url2" },
-                ],
-              },
-              {
-                id: "q8",
-                type: TSurveyElementTypeEnum.Matrix,
-                headline: { default: "Matrix" },
-                required: false,
-                rows: [{ id: "r1", label: { default: "Row 1" } }],
-                columns: [{ id: "c1", label: { default: "Column 1" } }],
-              },
-            ] as TSurveyElement[],
-          },
         ],
-        questions: [],
         createdAt: new Date(),
         updatedAt: new Date(),
         environmentId: "env1",
         status: "draft",
       } as unknown as TSurvey;
 
-      const result = generateElementAndFilterOptions(survey, undefined, {}, {}, {}, []);
+      const result = generateQuestionAndFilterOptions(survey, undefined, {}, {}, {}, []);
 
-      expect(result.elementFilterOptions.length).toBe(8);
+      expect(result.questionFilterOptions.length).toBe(8);
-      expect(result.elementFilterOptions.some((o) => o.id === "q1")).toBeTruthy();
+      expect(result.questionFilterOptions.some((o) => o.id === "q1")).toBeTruthy();
-      expect(result.elementFilterOptions.some((o) => o.id === "q2")).toBeTruthy();
+      expect(result.questionFilterOptions.some((o) => o.id === "q2")).toBeTruthy();
-      expect(result.elementFilterOptions.some((o) => o.id === "q7")).toBeTruthy();
+      expect(result.questionFilterOptions.some((o) => o.id === "q7")).toBeTruthy();
-      expect(result.elementFilterOptions.some((o) => o.id === "q8")).toBeTruthy();
+      expect(result.questionFilterOptions.some((o) => o.id === "q8")).toBeTruthy();
     });
 
     test("should provide extended filter options for URL meta field", () => {
       const survey = {
         id: "survey1",
         name: "Test Survey",
-        blocks: [],
         questions: [],
         createdAt: new Date(),
         updatedAt: new Date(),
@@ -288,10 +248,10 @@ describe("surveys", () => {
         source: ["web", "mobile"],
       };
 
-      const result = generateElementAndFilterOptions(survey, undefined, {}, meta, {}, []);
+      const result = generateQuestionAndFilterOptions(survey, undefined, {}, meta, {}, []);
 
-      const urlFilterOption = result.elementFilterOptions.find((o) => o.id === "url");
+      const urlFilterOption = result.questionFilterOptions.find((o) => o.id === "url");
-      const sourceFilterOption = result.elementFilterOptions.find((o) => o.id === "source");
+      const sourceFilterOption = result.questionFilterOptions.find((o) => o.id === "source");
 
       expect(urlFilterOption).toBeDefined();
       expect(urlFilterOption?.filterOptions).toEqual([
@@ -308,185 +268,82 @@ describe("surveys", () => {
       expect(sourceFilterOption).toBeDefined();
       expect(sourceFilterOption?.filterOptions).toEqual(["Equals", "Not equals"]);
     });
-
-    test("should include quota options in filter options when quotas are provided", () => {
-      const survey = {
-        id: "survey1",
-        name: "Test Survey",
-        blocks: [],
-        createdAt: new Date(),
-        updatedAt: new Date(),
-        environmentId: "env1",
-        status: "draft",
-      } as unknown as TSurvey;
-
-      const quotas = [{ id: "quota1" }];
-
-      const result = generateElementAndFilterOptions(survey, undefined, {}, {}, {}, quotas as any);
-
-      const quotaFilterOption = result.elementFilterOptions.find((o) => o.id === "quota1");
-      expect(quotaFilterOption).toBeDefined();
-      expect(quotaFilterOption?.type).toBe("Quotas");
-      expect(quotaFilterOption?.filterOptions).toEqual(["Status"]);
-      expect(quotaFilterOption?.filterComboBoxOptions).toEqual([
-        "Screened in",
-        "Screened out (overquota)",
-        "Not in quota",
-      ]);
-    });
-
-    test("should include multiple quota options when multiple quotas are provided", () => {
-      const survey = {
-        id: "survey1",
-        name: "Test Survey",
-        blocks: [],
-        createdAt: new Date(),
-        updatedAt: new Date(),
-        environmentId: "env1",
-        status: "draft",
-      } as unknown as TSurvey;
-
-      const quotas = [{ id: "quota1" }, { id: "quota2" }];
-
-      const result = generateElementAndFilterOptions(survey, undefined, {}, {}, {}, quotas as any);
-
-      const quota1 = result.elementFilterOptions.find((o) => o.id === "quota1");
-      const quota2 = result.elementFilterOptions.find((o) => o.id === "quota2");
-
-      expect(quota1).toBeDefined();
-      expect(quota2).toBeDefined();
-      expect(quota1?.filterComboBoxOptions).toEqual([
-        "Screened in",
-        "Screened out (overquota)",
-        "Not in quota",
-      ]);
-      expect(quota2?.filterComboBoxOptions).toEqual([
-        "Screened in",
-        "Screened out (overquota)",
-        "Not in quota",
-      ]);
-    });
   });
 
   describe("getFormattedFilters", () => {
     const survey = {
       id: "survey1",
       name: "Test Survey",
-      blocks: [
+      questions: [
         {
-          id: "block1",
+          id: "openTextQ",
-          name: "Block 1",
+          type: TSurveyQuestionTypeEnum.OpenText,
-          elements: [
+          headline: { default: "Open Text" },
-            {
+        } as unknown as TSurveyQuestion,
-              id: "openTextQ",
+        {
-              type: TSurveyElementTypeEnum.OpenText,
+          id: "mcSingleQ",
-              headline: { default: "Open Text" },
+          type: TSurveyQuestionTypeEnum.MultipleChoiceSingle,
-              required: false,
+          headline: { default: "Multiple Choice Single" },
-              inputType: "text",
+          choices: [{ id: "c1", label: "Choice 1" }],
-              charLimit: { enabled: false },
+        } as unknown as TSurveyQuestion,
-            },
+        {
-            {
+          id: "mcMultiQ",
-              id: "mcSingleQ",
+          type: TSurveyQuestionTypeEnum.MultipleChoiceMulti,
-              type: TSurveyElementTypeEnum.MultipleChoiceSingle,
+          headline: { default: "Multiple Choice Multi" },
-              headline: { default: "Multiple Choice Single" },
+          choices: [{ id: "c1", label: "Choice 1" }],
-              required: false,
+        } as unknown as TSurveyQuestion,
-              choices: [{ id: "c1", label: { default: "Choice 1" } }],
+        {
-              shuffleOption: "none",
+          id: "npsQ",
-            },
+          type: TSurveyQuestionTypeEnum.NPS,
-            {
+          headline: { default: "NPS" },
-              id: "mcMultiQ",
+        } as unknown as TSurveyQuestion,
-              type: TSurveyElementTypeEnum.MultipleChoiceMulti,
+        {
-              headline: { default: "Multiple Choice Multi" },
+          id: "ratingQ",
-              required: false,
+          type: TSurveyQuestionTypeEnum.Rating,
-              choices: [{ id: "c1", label: { default: "Choice 1" } }],
+          headline: { default: "Rating" },
-              shuffleOption: "none",
+        } as unknown as TSurveyQuestion,
-            },
+        {
-            {
+          id: "ctaQ",
-              id: "npsQ",
+          type: TSurveyQuestionTypeEnum.CTA,
-              type: TSurveyElementTypeEnum.NPS,
+          headline: { default: "CTA" },
-              headline: { default: "NPS" },
+        } as unknown as TSurveyQuestion,
-              required: false,
+        {
-              lowerLabel: { default: "Not likely" },
+          id: "consentQ",
-              upperLabel: { default: "Very likely" },
+          type: TSurveyQuestionTypeEnum.Consent,
-            },
+          headline: { default: "Consent" },
-            {
+        } as unknown as TSurveyQuestion,
-              id: "ratingQ",
+        {
-              type: TSurveyElementTypeEnum.Rating,
+          id: "pictureQ",
-              headline: { default: "Rating" },
+          type: TSurveyQuestionTypeEnum.PictureSelection,
-              required: false,
+          headline: { default: "Picture Selection" },
-              scale: "number",
+          choices: [
-              range: 5,
+            { id: "p1", imageUrl: "url1" },
-              lowerLabel: { default: "Low" },
+            { id: "p2", imageUrl: "url2" },
-              upperLabel: { default: "High" },
+          ],
-            },
+        } as unknown as TSurveyQuestion,
-            {
+        {
-              id: "ctaQ",
+          id: "matrixQ",
-              type: TSurveyElementTypeEnum.CTA,
+          type: TSurveyQuestionTypeEnum.Matrix,
-              headline: { default: "CTA" },
+          headline: { default: "Matrix" },
-              required: false,
+          rows: [{ id: "r1", label: "Row 1" }],
-              buttonLabel: { default: "Click me" },
+          columns: [{ id: "c1", label: "Column 1" }],
-              buttonExternal: false,
+        } as unknown as TSurveyQuestion,
-            },
+        {
-            {
+          id: "addressQ",
-              id: "consentQ",
+          type: TSurveyQuestionTypeEnum.Address,
-              type: TSurveyElementTypeEnum.Consent,
+          headline: { default: "Address" },
-              headline: { default: "Consent" },
+        } as unknown as TSurveyQuestion,
-              required: false,
+        {
-              label: { default: "I agree" },
+          id: "contactQ",
-            },
+          type: TSurveyQuestionTypeEnum.ContactInfo,
-            {
+          headline: { default: "Contact Info" },
-              id: "pictureQ",
+        } as unknown as TSurveyQuestion,
-              type: TSurveyElementTypeEnum.PictureSelection,
+        {
-              headline: { default: "Picture Selection" },
+          id: "rankingQ",
-              required: false,
+          type: TSurveyQuestionTypeEnum.Ranking,
-              allowMultiple: false,
+          headline: { default: "Ranking" },
-              choices: [
+        } as unknown as TSurveyQuestion,
-                { id: "p1", imageUrl: "url1" },
-                { id: "p2", imageUrl: "url2" },
-              ],
-            },
-            {
-              id: "matrixQ",
-              type: TSurveyElementTypeEnum.Matrix,
-              headline: { default: "Matrix" },
-              required: false,
-              rows: [{ id: "r1", label: { default: "Row 1" } }],
-              columns: [{ id: "c1", label: { default: "Column 1" } }],
-            },
-            {
-              id: "addressQ",
-              type: TSurveyElementTypeEnum.Address,
-              headline: { default: "Address" },
-              required: false,
-              zip: { show: true, required: false, placeholder: { default: "Zip" } },
-              city: { show: true, required: false, placeholder: { default: "City" } },
-              state: { show: true, required: false, placeholder: { default: "State" } },
-              country: { show: true, required: false, placeholder: { default: "Country" } },
-              addressLine1: { show: true, required: false, placeholder: { default: "Address Line 1" } },
-              addressLine2: { show: true, required: false, placeholder: { default: "Address Line 2" } },
-            },
-            {
-              id: "contactQ",
-              type: TSurveyElementTypeEnum.ContactInfo,
-              headline: { default: "Contact Info" },
-              required: false,
-              firstName: { show: true, required: false, placeholder: { default: "First Name" } },
-              lastName: { show: true, required: false, placeholder: { default: "Last Name" } },
-              email: { show: true, required: false, placeholder: { default: "Email" } },
-              phone: { show: true, required: false, placeholder: { default: "Phone" } },
-              company: { show: true, required: false, placeholder: { default: "Company" } },
-            },
-            {
-              id: "rankingQ",
-              type: TSurveyElementTypeEnum.Ranking,
-              headline: { default: "Ranking" },
-              required: false,
-              choices: [{ id: "r1", label: { default: "Option 1" } }],
-            },
-          ] as TSurveyElement[],
-        },
       ],
-      questions: [],
       createdAt: new Date(),
       updatedAt: new Date(),
       environmentId: "env1",
@@ -538,11 +395,11 @@ describe("surveys", () => {
         responseStatus: "all",
         filter: [
           {
-            elementType: { type: "Tags", label: "Tag 1", id: "tag1" },
+            questionType: { type: "Tags", label: "Tag 1", id: "tag1" },
             filterType: { filterComboBoxValue: "Applied" },
           },
           {
-            elementType: { type: "Tags", label: "Tag 2", id: "tag2" },
+            questionType: { type: "Tags", label: "Tag 2", id: "tag2" },
             filterType: { filterComboBoxValue: "Not applied" },
           },
         ] as any,
@@ -559,11 +416,11 @@ describe("surveys", () => {
         responseStatus: "all",
         filter: [
           {
-            elementType: {
+            questionType: {
-              type: "Elements",
+              type: "Questions",
               label: "Open Text",
               id: "openTextQ",
-              elementType: TSurveyElementTypeEnum.OpenText,
+              questionType: TSurveyQuestionTypeEnum.OpenText,
             },
             filterType: { filterComboBoxValue: "Filled out" },
           },
@@ -580,11 +437,11 @@ describe("surveys", () => {
         responseStatus: "all",
         filter: [
           {
-            elementType: {
+            questionType: {
-              type: "Elements",
+              type: "Questions",
               label: "Address",
               id: "addressQ",
-              elementType: TSurveyElementTypeEnum.Address,
+              questionType: TSurveyQuestionTypeEnum.Address,
             },
             filterType: { filterComboBoxValue: "Skipped" },
           },
@@ -601,11 +458,11 @@ describe("surveys", () => {
         responseStatus: "all",
         filter: [
           {
-            elementType: {
+            questionType: {
-              type: "Elements",
+              type: "Questions",
               label: "Contact Info",
               id: "contactQ",
-              elementType: TSurveyElementTypeEnum.ContactInfo,
+              questionType: TSurveyQuestionTypeEnum.ContactInfo,
             },
             filterType: { filterComboBoxValue: "Filled out" },
           },
@@ -622,11 +479,11 @@ describe("surveys", () => {
         responseStatus: "all",
         filter: [
           {
-            elementType: {
+            questionType: {
-              type: "Elements",
+              type: "Questions",
               label: "Ranking",
               id: "rankingQ",
-              elementType: TSurveyElementTypeEnum.Ranking,
+              questionType: TSurveyQuestionTypeEnum.Ranking,
             },
             filterType: { filterComboBoxValue: "Filled out" },
           },
@@ -643,11 +500,11 @@ describe("surveys", () => {
         responseStatus: "all",
         filter: [
           {
-            elementType: {
+            questionType: {
-              type: "Elements",
+              type: "Questions",
               label: "MC Single",
               id: "mcSingleQ",
-              elementType: TSurveyElementTypeEnum.MultipleChoiceSingle,
+              questionType: TSurveyQuestionTypeEnum.MultipleChoiceSingle,
             },
             filterType: { filterValue: "Includes either", filterComboBoxValue: ["Choice 1"] },
           },
@@ -664,11 +521,11 @@ describe("surveys", () => {
         responseStatus: "all",
         filter: [
           {
-            elementType: {
+            questionType: {
-              type: "Elements",
+              type: "Questions",
               label: "MC Multi",
               id: "mcMultiQ",
-              elementType: TSurveyElementTypeEnum.MultipleChoiceMulti,
+              questionType: TSurveyQuestionTypeEnum.MultipleChoiceMulti,
             },
             filterType: { filterValue: "Includes all", filterComboBoxValue: ["Choice 1", "Choice 2"] },
           },
@@ -685,11 +542,11 @@ describe("surveys", () => {
         responseStatus: "all",
         filter: [
           {
-            elementType: {
+            questionType: {
-              type: "Elements",
+              type: "Questions",
               label: "NPS",
               id: "npsQ",
-              elementType: TSurveyElementTypeEnum.NPS,
+              questionType: TSurveyQuestionTypeEnum.NPS,
             },
             filterType: { filterValue: "Is equal to", filterComboBoxValue: "7" },
           },
@@ -706,11 +563,11 @@ describe("surveys", () => {
         responseStatus: "all",
         filter: [
           {
-            elementType: {
+            questionType: {
-              type: "Elements",
+              type: "Questions",
               label: "Rating",
               id: "ratingQ",
-              elementType: TSurveyElementTypeEnum.Rating,
+              questionType: TSurveyQuestionTypeEnum.Rating,
             },
             filterType: { filterValue: "Is less than", filterComboBoxValue: "4" },
           },
@@ -727,11 +584,11 @@ describe("surveys", () => {
         responseStatus: "all",
         filter: [
           {
-            elementType: {
+            questionType: {
-              type: "Elements",
+              type: "Questions",
               label: "CTA",
               id: "ctaQ",
-              elementType: TSurveyElementTypeEnum.CTA,
+              questionType: TSurveyQuestionTypeEnum.CTA,
             },
             filterType: { filterComboBoxValue: "Clicked" },
           },
@@ -748,11 +605,11 @@ describe("surveys", () => {
         responseStatus: "all",
         filter: [
           {
-            elementType: {
+            questionType: {
-              type: "Elements",
+              type: "Questions",
               label: "Consent",
               id: "consentQ",
-              elementType: TSurveyElementTypeEnum.Consent,
+              questionType: TSurveyQuestionTypeEnum.Consent,
             },
             filterType: { filterComboBoxValue: "Accepted" },
           },
@@ -769,11 +626,11 @@ describe("surveys", () => {
         responseStatus: "all",
         filter: [
           {
-            elementType: {
+            questionType: {
-              type: "Elements",
+              type: "Questions",
               label: "Picture",
               id: "pictureQ",
-              elementType: TSurveyElementTypeEnum.PictureSelection,
+              questionType: TSurveyQuestionTypeEnum.PictureSelection,
             },
             filterType: { filterValue: "Includes either", filterComboBoxValue: ["Picture 1"] },
           },
@@ -790,11 +647,11 @@ describe("surveys", () => {
         responseStatus: "all",
         filter: [
           {
-            elementType: {
+            questionType: {
-              type: "Elements",
+              type: "Questions",
               label: "Matrix",
               id: "matrixQ",
-              elementType: TSurveyElementTypeEnum.Matrix,
+              questionType: TSurveyQuestionTypeEnum.Matrix,
             },
             filterType: { filterValue: "Row 1", filterComboBoxValue: "Column 1" },
           },
@@ -811,7 +668,7 @@ describe("surveys", () => {
         responseStatus: "all",
         filter: [
           {
-            elementType: { type: "Hidden Fields", label: "plan", id: "plan" },
+            questionType: { type: "Hidden Fields", label: "plan", id: "plan" },
             filterType: { filterValue: "Equals", filterComboBoxValue: "pro" },
           },
         ],
@@ -827,7 +684,7 @@ describe("surveys", () => {
         responseStatus: "all",
         filter: [
           {
-            elementType: { type: "Attributes", label: "role", id: "role" },
+            questionType: { type: "Attributes", label: "role", id: "role" },
             filterType: { filterValue: "Not equals", filterComboBoxValue: "admin" },
           },
         ],
@@ -843,7 +700,7 @@ describe("surveys", () => {
         responseStatus: "all",
         filter: [
           {
-            elementType: { type: "Other Filters", label: "Language", id: "language" },
+            questionType: { type: "Other Filters", label: "Language", id: "language" },
             filterType: { filterValue: "Equals", filterComboBoxValue: "en" },
           },
         ],
@@ -859,7 +716,7 @@ describe("surveys", () => {
         responseStatus: "all",
         filter: [
           {
-            elementType: { type: "Meta", label: "source", id: "source" },
+            questionType: { type: "Meta", label: "source", id: "source" },
             filterType: { filterValue: "Not equals", filterComboBoxValue: "web" },
           },
         ],
@@ -875,16 +732,16 @@ describe("surveys", () => {
         responseStatus: "complete",
         filter: [
           {
-            elementType: {
+            questionType: {
-              type: "Elements",
+              type: "Questions",
               label: "NPS",
               id: "npsQ",
-              elementType: TSurveyElementTypeEnum.NPS,
+              questionType: TSurveyQuestionTypeEnum.NPS,
             },
             filterType: { filterValue: "Is more than", filterComboBoxValue: "7" },
           },
           {
-            elementType: { type: "Tags", label: "Tag 1", id: "tag1" },
+            questionType: { type: "Tags", label: "Tag 1", id: "tag1" },
             filterType: { filterComboBoxValue: "Applied" },
           },
         ],
@@ -903,7 +760,7 @@ describe("surveys", () => {
         responseStatus: "all",
         filter: [
           {
-            elementType: { type: "Meta", label: "url", id: "url" },
+            questionType: { type: "Meta", label: "url", id: "url" },
             filterType: { filterValue: "Contains", filterComboBoxValue: "example.com" },
           },
         ],
@@ -931,7 +788,7 @@ describe("surveys", () => {
           responseStatus: "all",
           filter: [
             {
-              elementType: { type: "Meta", label: "url", id: "url" },
+              questionType: { type: "Meta", label: "url", id: "url" },
               filterType: { filterValue, filterComboBoxValue: expected.value },
             },
           ],
@@ -947,7 +804,7 @@ describe("surveys", () => {
         responseStatus: "all",
         filter: [
           {
-            elementType: { type: "Meta", label: "url", id: "url" },
+            questionType: { type: "Meta", label: "url", id: "url" },
             filterType: { filterValue: "Contains", filterComboBoxValue: "" },
           },
         ],
@@ -963,7 +820,7 @@ describe("surveys", () => {
         responseStatus: "all",
         filter: [
           {
-            elementType: { type: "Meta", label: "url", id: "url" },
+            questionType: { type: "Meta", label: "url", id: "url" },
             filterType: { filterValue: "Contains", filterComboBoxValue: "   " },
           },
         ],
@@ -979,7 +836,7 @@ describe("surveys", () => {
         responseStatus: "all",
         filter: [
           {
-            elementType: { type: "Meta", label: "source", id: "source" },
+            questionType: { type: "Meta", label: "source", id: "source" },
             filterType: { filterValue: "Equals", filterComboBoxValue: ["google"] },
           },
         ],
@@ -995,11 +852,11 @@ describe("surveys", () => {
         responseStatus: "all",
         filter: [
           {
-            elementType: { type: "Meta", label: "url", id: "url" },
+            questionType: { type: "Meta", label: "url", id: "url" },
             filterType: { filterValue: "Contains", filterComboBoxValue: "formbricks.com" },
           },
           {
-            elementType: { type: "Meta", label: "source", id: "source" },
+            questionType: { type: "Meta", label: "source", id: "source" },
             filterType: { filterValue: "Equals", filterComboBoxValue: ["newsletter"] },
           },
         ],
@@ -1010,75 +867,6 @@ describe("surveys", () => {
       expect(result.meta?.url).toEqual({ op: "contains", value: "formbricks.com" });
       expect(result.meta?.source).toEqual({ op: "equals", value: "newsletter" });
     });
-
-    test("should filter by quota with screened in status", () => {
-      const selectedFilter: SelectedFilterValue = {
-        responseStatus: "all",
-        filter: [
-          {
-            elementType: { type: "Quotas", label: "Quota 1", id: "quota1" },
-            filterType: { filterComboBoxValue: "Screened in" },
-          },
-        ],
-      } as any;
-
-      const result = getFormattedFilters(survey, selectedFilter, {} as any);
-
-      expect(result.quotas?.quota1).toEqual({ op: "screenedIn" });
-    });
-
-    test("should filter by quota with screened out status", () => {
-      const selectedFilter: SelectedFilterValue = {
-        responseStatus: "all",
-        filter: [
-          {
-            elementType: { type: "Quotas", label: "Quota 1", id: "quota1" },
-            filterType: { filterComboBoxValue: "Screened out (overquota)" },
-          },
-        ],
-      } as any;
-
-      const result = getFormattedFilters(survey, selectedFilter, {} as any);
-
-      expect(result.quotas?.quota1).toEqual({ op: "screenedOut" });
-    });
-
-    test("should filter by quota with not in quota status", () => {
-      const selectedFilter: SelectedFilterValue = {
-        responseStatus: "all",
-        filter: [
-          {
-            elementType: { type: "Quotas", label: "Quota 1", id: "quota1" },
-            filterType: { filterComboBoxValue: "Not in quota" },
-          },
-        ],
-      } as any;
-
-      const result = getFormattedFilters(survey, selectedFilter, {} as any);
-
-      expect(result.quotas?.quota1).toEqual({ op: "screenedOutNotInQuota" });
-    });
-
-    test("should filter by multiple quotas with different statuses", () => {
-      const selectedFilter: SelectedFilterValue = {
-        responseStatus: "all",
-        filter: [
-          {
-            elementType: { type: "Quotas", label: "Quota 1", id: "quota1" },
-            filterType: { filterComboBoxValue: "Screened in" },
-          },
-          {
-            elementType: { type: "Quotas", label: "Quota 2", id: "quota2" },
-            filterType: { filterComboBoxValue: "Not in quota" },
-          },
-        ],
-      } as any;
-
-      const result = getFormattedFilters(survey, selectedFilter, {} as any);
-
-      expect(result.quotas?.quota1).toEqual({ op: "screenedIn" });
-      expect(result.quotas?.quota2).toEqual({ op: "screenedOutNotInQuota" });
-    });
   });
 
   describe("getTodayDate", () => {

apps/web/app/lib/surveys/surveys.ts

@@ -5,26 +5,24 @@ import {
   TSurveyContactAttributes,
   TSurveyMetaFieldFilter,
 } from "@formbricks/types/responses";
-import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+import { TSurvey, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
-import { TSurvey } from "@formbricks/types/surveys/types";
 import { getTextContent } from "@formbricks/types/surveys/validation";
 import { TTag } from "@formbricks/types/tags";
 import {
   DateRange,
   FilterValue,
   SelectedFilterValue,
-} from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/response-filter-context";
+} from "@/app/(app)/environments/[environmentId]/components/ResponseFilterContext";
 import {
-  ElementOption,
-  ElementOptions,
   OptionsType,
-} from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ElementsComboBox";
+  QuestionOption,
-import { ElementFilterOptions } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ResponseFilter";
+  QuestionOptions,
+} from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionsComboBox";
+import { QuestionFilterOptions } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ResponseFilter";
 import { getLocalizedValue } from "@/lib/i18n/utils";
 import { recallToHeadline } from "@/lib/utils/recall";
-import { getElementsFromBlocks } from "@/modules/survey/lib/client-utils";
 
-const conditionOptions: Record<string, string[]> = {
+const conditionOptions = {
   openText: ["is"],
   multipleChoiceSingle: ["Includes either"],
   multipleChoiceMulti: ["Includes all", "Includes either"],
@@ -41,7 +39,7 @@ const conditionOptions: Record<string, string[]> = {
   contactInfo: ["is"],
   ranking: ["is"],
 };
-const filterOptions: Record<string, string[]> = {
+const filterOptions = {
   openText: ["Filled out", "Skipped"],
   rating: ["1", "2", "3", "4", "5"],
   nps: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
@@ -53,51 +51,6 @@ const filterOptions: Record<string, string[]> = {
   ranking: ["Filled out", "Skipped"],
 };
 
-// Helper function to get filter options for a specific element type
-const getElementFilterOption = (
-  element: ReturnType<typeof getElementsFromBlocks>[number]
-): ElementFilterOptions | null => {
-  if (!Object.keys(conditionOptions).includes(element.type)) {
-    return null;
-  }
-
-  const baseOption = {
-    type: element.type,
-    filterOptions: conditionOptions[element.type],
-    id: element.id,
-  };
-
-  switch (element.type) {
-    case TSurveyElementTypeEnum.MultipleChoiceSingle:
-      return {
-        ...baseOption,
-        filterComboBoxOptions: element.choices?.map((c) => c.label) ?? [""],
-      };
-    case TSurveyElementTypeEnum.MultipleChoiceMulti:
-      return {
-        ...baseOption,
-        filterComboBoxOptions: element.choices?.filter((c) => c.id !== "other").map((c) => c.label) ?? [""],
-      };
-    case TSurveyElementTypeEnum.PictureSelection:
-      return {
-        ...baseOption,
-        filterComboBoxOptions: element.choices?.map((_, idx) => `Picture ${idx + 1}`) ?? [""],
-      };
-    case TSurveyElementTypeEnum.Matrix:
-      return {
-        type: element.type,
-        filterOptions: element.rows.map((row) => getLocalizedValue(row.label, "default")),
-        filterComboBoxOptions: element.columns.map((column) => getLocalizedValue(column.label, "default")),
-        id: element.id,
-      };
-    default:
-      return {
-        ...baseOption,
-        filterComboBoxOptions: filterOptions[element.type],
-      };
-  }
-};
-
 // URL/meta text operators mapping
 const META_OP_MAP = {
   Equals: "equals",
@@ -110,7 +63,8 @@ const META_OP_MAP = {
   "Does not end with": "doesNotEndWith",
 } as const;
 
-export const generateElementAndFilterOptions = (
+// creating the options for the filtering to be selected there are 4 types questions, attributes, tags and metadata
+export const generateQuestionAndFilterOptions = (
   survey: TSurvey,
   environmentTags: TTag[] | undefined,
   attributes: TSurveyContactAttributes,
@@ -118,32 +72,67 @@ export const generateElementAndFilterOptions = (
   hiddenFields: TResponseHiddenFieldsFilter,
   quotas: TSurveyQuota[]
 ): {
-  elementOptions: ElementOptions[];
+  questionOptions: QuestionOptions[];
-  elementFilterOptions: ElementFilterOptions[];
+  questionFilterOptions: QuestionFilterOptions[];
 } => {
-  let elementOptions: ElementOptions[] = [];
+  let questionOptions: QuestionOptions[] = [];
-  let elementFilterOptions: ElementFilterOptions[] = [];
+  let questionFilterOptions: QuestionFilterOptions[] = [];
-  let elementsOptions: ElementOption[] = [];
 
-  const elements = getElementsFromBlocks(survey.blocks);
+  let questionsOptions: QuestionOption[] = [];
 
-  elements.forEach((q) => {
+  survey.questions.forEach((q) => {
     if (Object.keys(conditionOptions).includes(q.type)) {
-      elementsOptions.push({
+      questionsOptions.push({
         label: getTextContent(
           getLocalizedValue(recallToHeadline(q.headline, survey, false, "default"), "default")
         ),
-        elementType: q.type,
+        questionType: q.type,
-        type: OptionsType.ELEMENTS,
+        type: OptionsType.QUESTIONS,
         id: q.id,
       });
     }
   });
-  elementOptions = [...elementOptions, { header: OptionsType.ELEMENTS, option: elementsOptions }];
+  questionOptions = [...questionOptions, { header: OptionsType.QUESTIONS, option: questionsOptions }];
-  elements.forEach((q) => {
+  survey.questions.forEach((q) => {
-    const filterOption = getElementFilterOption(q);
+    if (Object.keys(conditionOptions).includes(q.type)) {
-    if (filterOption) {
+      if (q.type === TSurveyQuestionTypeEnum.MultipleChoiceSingle) {
-      elementFilterOptions.push(filterOption);
+        questionFilterOptions.push({
+          type: q.type,
+          filterOptions: conditionOptions[q.type],
+          filterComboBoxOptions: q?.choices ? q?.choices?.map((c) => c?.label) : [""],
+          id: q.id,
+        });
+      } else if (q.type === TSurveyQuestionTypeEnum.MultipleChoiceMulti) {
+        questionFilterOptions.push({
+          type: q.type,
+          filterOptions: conditionOptions[q.type],
+          filterComboBoxOptions: q?.choices
+            ? q?.choices?.filter((c) => c.id !== "other")?.map((c) => c?.label)
+            : [""],
+          id: q.id,
+        });
+      } else if (q.type === TSurveyQuestionTypeEnum.PictureSelection) {
+        questionFilterOptions.push({
+          type: q.type,
+          filterOptions: conditionOptions[q.type],
+          filterComboBoxOptions: q?.choices ? q?.choices?.map((_, idx) => `Picture ${idx + 1}`) : [""],
+          id: q.id,
+        });
+      } else if (q.type === TSurveyQuestionTypeEnum.Matrix) {
+        questionFilterOptions.push({
+          type: q.type,
+          filterOptions: q.rows.map((row) => getLocalizedValue(row.label, "default")),
+          filterComboBoxOptions: q.columns.map((column) => getLocalizedValue(column.label, "default")),
+          id: q.id,
+        });
+      } else {
+        questionFilterOptions.push({
+          type: q.type,
+          filterOptions: conditionOptions[q.type],
+          filterComboBoxOptions: filterOptions[q.type],
+          id: q.id,
+        });
+      }
     }
   });
 
@@ -151,9 +140,9 @@ export const generateElementAndFilterOptions = (
     return { label: t.name, type: OptionsType.TAGS, id: t.id };
   });
   if (tagsOptions && tagsOptions?.length > 0) {
-    elementOptions = [...elementOptions, { header: OptionsType.TAGS, option: tagsOptions }];
+    questionOptions = [...questionOptions, { header: OptionsType.TAGS, option: tagsOptions }];
     environmentTags?.forEach((t) => {
-      elementFilterOptions.push({
+      questionFilterOptions.push({
         type: "Tags",
         filterOptions: conditionOptions.tags,
         filterComboBoxOptions: filterOptions.tags,
@@ -163,8 +152,8 @@ export const generateElementAndFilterOptions = (
   }
 
   if (attributes) {
-    elementOptions = [
+    questionOptions = [
-      ...elementOptions,
+      ...questionOptions,
       {
         header: OptionsType.ATTRIBUTES,
         option: Object.keys(attributes).map((a) => {
@@ -173,7 +162,7 @@ export const generateElementAndFilterOptions = (
       },
     ];
     Object.keys(attributes).forEach((a) => {
-      elementFilterOptions.push({
+      questionFilterOptions.push({
         type: "Attributes",
         filterOptions: conditionOptions.userAttributes,
         filterComboBoxOptions: attributes[a],
@@ -183,8 +172,8 @@ export const generateElementAndFilterOptions = (
   }
 
   if (meta) {
-    elementOptions = [
+    questionOptions = [
-      ...elementOptions,
+      ...questionOptions,
       {
         header: OptionsType.META,
         option: Object.keys(meta).map((m) => {
@@ -193,7 +182,7 @@ export const generateElementAndFilterOptions = (
       },
     ];
     Object.keys(meta).forEach((m) => {
-      elementFilterOptions.push({
+      questionFilterOptions.push({
         type: "Meta",
         filterOptions: m === "url" ? Object.keys(META_OP_MAP) : ["Equals", "Not equals"],
         filterComboBoxOptions: meta[m],
@@ -203,8 +192,8 @@ export const generateElementAndFilterOptions = (
   }
 
   if (hiddenFields) {
-    elementOptions = [
+    questionOptions = [
-      ...elementOptions,
+      ...questionOptions,
       {
         header: OptionsType.HIDDEN_FIELDS,
         option: Object.keys(hiddenFields).map((hiddenField) => {
@@ -213,7 +202,7 @@ export const generateElementAndFilterOptions = (
       },
     ];
     Object.keys(hiddenFields).forEach((hiddenField) => {
-      elementFilterOptions.push({
+      questionFilterOptions.push({
         type: "Hidden Fields",
         filterOptions: ["Equals", "Not equals"],
         filterComboBoxOptions: hiddenFields[hiddenField],
@@ -222,324 +211,38 @@ export const generateElementAndFilterOptions = (
     });
   }
 
-  let languageElement: ElementOption[] = [];
+  let languageQuestion: QuestionOption[] = [];
 
   //can be extended to include more properties
   if (survey.languages?.length > 0) {
-    languageElement.push({ label: "Language", type: OptionsType.OTHERS, id: "language" });
+    languageQuestion.push({ label: "Language", type: OptionsType.OTHERS, id: "language" });
     const languageOptions = survey.languages.map((sl) => sl.language.code);
-    elementFilterOptions.push({
+    questionFilterOptions.push({
       type: OptionsType.OTHERS,
       filterOptions: conditionOptions.languages,
       filterComboBoxOptions: languageOptions,
       id: "language",
     });
   }
-  elementOptions = [...elementOptions, { header: OptionsType.OTHERS, option: languageElement }];
+  questionOptions = [...questionOptions, { header: OptionsType.OTHERS, option: languageQuestion }];
 
   if (quotas.length > 0) {
     const quotaOptions = quotas.map((quota) => {
       return { label: quota.name, type: OptionsType.QUOTAS, id: quota.id };
     });
-    elementOptions = [...elementOptions, { header: OptionsType.QUOTAS, option: quotaOptions }];
+    questionOptions = [...questionOptions, { header: OptionsType.QUOTAS, option: quotaOptions }];
 
     quotas.forEach((quota) => {
-      elementFilterOptions.push({
+      questionFilterOptions.push({
         type: "Quotas",
         filterOptions: ["Status"],
-        filterComboBoxOptions: ["Screened in", "Screened out (overquota)", "Not in quota"],
+        filterComboBoxOptions: ["Screened in", "Screened out (overquota)", "Screened out (not in quota)"],
         id: quota.id,
       });
     });
   }
 
-  return { elementOptions: [...elementOptions], elementFilterOptions: [...elementFilterOptions] };
+  return { questionOptions: [...questionOptions], questionFilterOptions: [...questionFilterOptions] };
-};
-
-// Helper function to process filled out/skipped filters
-const processFilledOutSkippedFilter = (
-  filterType: FilterValue["filterType"],
-  elementId: string,
-  filters: TResponseFilterCriteria
-) => {
-  if (filterType.filterComboBoxValue === "Filled out") {
-    filters.data![elementId] = { op: "filledOut" };
-  } else if (filterType.filterComboBoxValue === "Skipped") {
-    filters.data![elementId] = { op: "skipped" };
-  }
-};
-
-// Helper function to process ranking filters
-const processRankingFilter = (
-  filterType: FilterValue["filterType"],
-  elementId: string,
-  filters: TResponseFilterCriteria
-) => {
-  if (filterType.filterComboBoxValue === "Filled out") {
-    filters.data![elementId] = { op: "submitted" };
-  } else if (filterType.filterComboBoxValue === "Skipped") {
-    filters.data![elementId] = { op: "skipped" };
-  }
-};
-
-// Helper function to process multiple choice filters
-const processMultipleChoiceFilter = (
-  filterType: FilterValue["filterType"],
-  elementId: string,
-  filters: TResponseFilterCriteria
-) => {
-  if (filterType.filterValue === "Includes either") {
-    filters.data![elementId] = {
-      op: "includesOne",
-      value: filterType.filterComboBoxValue as string[],
-    };
-  } else if (filterType.filterValue === "Includes all") {
-    filters.data![elementId] = {
-      op: "includesAll",
-      value: filterType.filterComboBoxValue as string[],
-    };
-  }
-};
-
-// Helper function to process NPS/Rating filters
-const processNPSRatingFilter = (
-  filterType: FilterValue["filterType"],
-  elementId: string,
-  filters: TResponseFilterCriteria
-) => {
-  if (filterType.filterValue === "Is equal to") {
-    filters.data![elementId] = {
-      op: "equals",
-      value: parseInt(filterType.filterComboBoxValue as string),
-    };
-  } else if (filterType.filterValue === "Is less than") {
-    filters.data![elementId] = {
-      op: "lessThan",
-      value: parseInt(filterType.filterComboBoxValue as string),
-    };
-  } else if (filterType.filterValue === "Is more than") {
-    filters.data![elementId] = {
-      op: "greaterThan",
-      value: parseInt(filterType.filterComboBoxValue as string),
-    };
-  } else if (filterType.filterValue === "Submitted") {
-    filters.data![elementId] = { op: "submitted" };
-  } else if (filterType.filterValue === "Skipped") {
-    filters.data![elementId] = { op: "skipped" };
-  } else if (filterType.filterValue === "Includes either") {
-    filters.data![elementId] = {
-      op: "includesOne",
-      value: (filterType.filterComboBoxValue as string[]).map((value) => parseInt(value)),
-    };
-  }
-};
-
-// Helper function to process CTA filters
-const processCTAFilter = (
-  filterType: FilterValue["filterType"],
-  elementId: string,
-  filters: TResponseFilterCriteria
-) => {
-  if (filterType.filterComboBoxValue === "Clicked") {
-    filters.data![elementId] = { op: "clicked" };
-  } else if (filterType.filterComboBoxValue === "Dismissed") {
-    filters.data![elementId] = { op: "skipped" };
-  }
-};
-
-// Helper function to process Consent filters
-const processConsentFilter = (
-  filterType: FilterValue["filterType"],
-  elementId: string,
-  filters: TResponseFilterCriteria
-) => {
-  if (filterType.filterComboBoxValue === "Accepted") {
-    filters.data![elementId] = { op: "accepted" };
-  } else if (filterType.filterComboBoxValue === "Dismissed") {
-    filters.data![elementId] = { op: "skipped" };
-  }
-};
-
-// Helper function to process Picture Selection filters
-const processPictureSelectionFilter = (
-  filterType: FilterValue["filterType"],
-  elementId: string,
-  element: ReturnType<typeof getElementsFromBlocks>[number] | undefined,
-  filters: TResponseFilterCriteria
-) => {
-  if (
-    element?.type !== TSurveyElementTypeEnum.PictureSelection ||
-    !Array.isArray(filterType.filterComboBoxValue)
-  ) {
-    return;
-  }
-
-  const selectedOptions = filterType.filterComboBoxValue.map((option) => {
-    const index = parseInt(option.split(" ")[1]);
-    return element?.choices[index - 1].id;
-  });
-
-  if (filterType.filterValue === "Includes all") {
-    filters.data![elementId] = { op: "includesAll", value: selectedOptions };
-  } else if (filterType.filterValue === "Includes either") {
-    filters.data![elementId] = { op: "includesOne", value: selectedOptions };
-  }
-};
-
-// Helper function to process Matrix filters
-const processMatrixFilter = (
-  filterType: FilterValue["filterType"],
-  elementId: string,
-  filters: TResponseFilterCriteria
-) => {
-  if (
-    filterType.filterValue &&
-    filterType.filterComboBoxValue &&
-    typeof filterType.filterComboBoxValue === "string"
-  ) {
-    filters.data![elementId] = {
-      op: "matrix",
-      value: { [filterType.filterValue]: filterType.filterComboBoxValue },
-    };
-  }
-};
-
-// Helper function to process element filters
-const processElementFilters = (
-  elements: FilterValue[],
-  survey: TSurvey,
-  filters: TResponseFilterCriteria
-) => {
-  if (!elements.length) return;
-
-  const surveyElements = getElementsFromBlocks(survey.blocks);
-  filters.data = filters.data || {};
-
-  elements.forEach(({ filterType, elementType }) => {
-    const elementId = elementType.id ?? "";
-    const element = surveyElements.find((q) => q.id === elementId);
-
-    switch (elementType.elementType) {
-      case TSurveyElementTypeEnum.OpenText:
-      case TSurveyElementTypeEnum.Address:
-      case TSurveyElementTypeEnum.ContactInfo:
-        processFilledOutSkippedFilter(filterType, elementId, filters);
-        break;
-      case TSurveyElementTypeEnum.Ranking:
-        processRankingFilter(filterType, elementId, filters);
-        break;
-      case TSurveyElementTypeEnum.MultipleChoiceSingle:
-      case TSurveyElementTypeEnum.MultipleChoiceMulti:
-        processMultipleChoiceFilter(filterType, elementId, filters);
-        break;
-      case TSurveyElementTypeEnum.NPS:
-      case TSurveyElementTypeEnum.Rating:
-        processNPSRatingFilter(filterType, elementId, filters);
-        break;
-      case TSurveyElementTypeEnum.CTA:
-        processCTAFilter(filterType, elementId, filters);
-        break;
-      case TSurveyElementTypeEnum.Consent:
-        processConsentFilter(filterType, elementId, filters);
-        break;
-      case TSurveyElementTypeEnum.PictureSelection:
-        processPictureSelectionFilter(filterType, elementId, element, filters);
-        break;
-      case TSurveyElementTypeEnum.Matrix:
-        processMatrixFilter(filterType, elementId, filters);
-        break;
-    }
-  });
-};
-
-// Helper function to process equals/not equals filters (for hiddenFields, attributes, others)
-const processEqualsNotEqualsFilter = (
-  filterType: FilterValue["filterType"],
-  label: string | undefined,
-  filters: TResponseFilterCriteria,
-  targetKey: "data" | "contactAttributes" | "others"
-) => {
-  if (!filterType.filterComboBoxValue) return;
-
-  if (targetKey === "data") {
-    filters.data = filters.data || {};
-    if (filterType.filterValue === "Equals") {
-      filters.data[label ?? ""] = { op: "equals", value: filterType.filterComboBoxValue as string };
-    } else if (filterType.filterValue === "Not equals") {
-      filters.data[label ?? ""] = { op: "notEquals", value: filterType.filterComboBoxValue as string };
-    }
-  } else if (targetKey === "contactAttributes") {
-    filters.contactAttributes = filters.contactAttributes || {};
-    if (filterType.filterValue === "Equals") {
-      filters.contactAttributes[label ?? ""] = {
-        op: "equals",
-        value: filterType.filterComboBoxValue as string,
-      };
-    } else if (filterType.filterValue === "Not equals") {
-      filters.contactAttributes[label ?? ""] = {
-        op: "notEquals",
-        value: filterType.filterComboBoxValue as string,
-      };
-    }
-  } else if (targetKey === "others") {
-    filters.others = filters.others || {};
-    if (filterType.filterValue === "Equals") {
-      filters.others[label ?? ""] = { op: "equals", value: filterType.filterComboBoxValue as string };
-    } else if (filterType.filterValue === "Not equals") {
-      filters.others[label ?? ""] = { op: "notEquals", value: filterType.filterComboBoxValue as string };
-    }
-  }
-};
-
-// Helper function to process meta filters
-const processMetaFilters = (meta: FilterValue[], filters: TResponseFilterCriteria) => {
-  if (!meta.length) return;
-
-  filters.meta = filters.meta || {};
-
-  meta.forEach(({ filterType, elementType }) => {
-    const label = elementType.label ?? "";
-    const metaFilters = filters.meta!; // Safe because we initialized it above
-
-    // For text input cases (URL filtering)
-    if (typeof filterType.filterComboBoxValue === "string" && filterType.filterComboBoxValue.length > 0) {
-      const value = filterType.filterComboBoxValue.trim();
-      const op = META_OP_MAP[filterType.filterValue as keyof typeof META_OP_MAP];
-      if (op) {
-        metaFilters[label] = { op, value };
-      }
-    }
-    // For dropdown/select cases (existing metadata fields)
-    else if (Array.isArray(filterType.filterComboBoxValue) && filterType.filterComboBoxValue.length > 0) {
-      const value = filterType.filterComboBoxValue[0];
-      if (filterType.filterValue === "Equals") {
-        metaFilters[label] = { op: "equals", value };
-      } else if (filterType.filterValue === "Not equals") {
-        metaFilters[label] = { op: "notEquals", value };
-      }
-    }
-  });
-};
-
-// Helper function to process quota filters
-const processQuotaFilters = (quotas: FilterValue[], filters: TResponseFilterCriteria) => {
-  if (!quotas.length) return;
-
-  filters.quotas = filters.quotas || {};
-
-  const statusMap: Record<string, "screenedIn" | "screenedOut" | "screenedOutNotInQuota"> = {
-    "Screened in": "screenedIn",
-    "Screened out (overquota)": "screenedOut",
-    "Not in quota": "screenedOutNotInQuota",
-  };
-
-  quotas.forEach(({ filterType, elementType }) => {
-    const quotaId = elementType.id;
-    if (!quotaId) return;
-
-    const op = statusMap[String(filterType.filterComboBoxValue)];
-    if (op) filters.quotas![quotaId] = { op };
-  });
 };
 
 // get the formatted filter expression to fetch filtered responses
@@ -550,7 +253,7 @@ export const getFormattedFilters = (
 ): TResponseFilterCriteria => {
   const filters: TResponseFilterCriteria = {};
 
-  const elements: FilterValue[] = [];
+  const questions: FilterValue[] = [];
   const tags: FilterValue[] = [];
   const attributes: FilterValue[] = [];
   const others: FilterValue[] = [];
@@ -559,19 +262,19 @@ export const getFormattedFilters = (
   const quotas: FilterValue[] = [];
 
   selectedFilter.filter.forEach((filter) => {
-    if (filter.elementType?.type === "Elements") {
+    if (filter.questionType?.type === "Questions") {
-      elements.push(filter);
+      questions.push(filter);
-    } else if (filter.elementType?.type === "Tags") {
+    } else if (filter.questionType?.type === "Tags") {
       tags.push(filter);
-    } else if (filter.elementType?.type === "Attributes") {
+    } else if (filter.questionType?.type === "Attributes") {
       attributes.push(filter);
-    } else if (filter.elementType?.type === "Other Filters") {
+    } else if (filter.questionType?.type === "Other Filters") {
       others.push(filter);
-    } else if (filter.elementType?.type === "Meta") {
+    } else if (filter.questionType?.type === "Meta") {
       meta.push(filter);
-    } else if (filter.elementType?.type === "Hidden Fields") {
+    } else if (filter.questionType?.type === "Hidden Fields") {
       hiddenFields.push(filter);
-    } else if (filter.elementType?.type === "Quotas") {
+    } else if (filter.questionType?.type === "Quotas") {
       quotas.push(filter);
     }
   });
@@ -599,41 +302,259 @@ export const getFormattedFilters = (
     };
     tags.forEach((tag) => {
       if (tag.filterType.filterComboBoxValue === "Applied") {
-        filters.tags?.applied?.push(tag.elementType.label ?? "");
+        filters.tags?.applied?.push(tag.questionType.label ?? "");
       } else {
-        filters.tags?.notApplied?.push(tag.elementType.label ?? "");
+        filters.tags?.notApplied?.push(tag.questionType.label ?? "");
       }
     });
   }
 
-  processElementFilters(elements, survey, filters);
+  // for questions
+  if (questions.length) {
+    questions.forEach(({ filterType, questionType }) => {
+      if (!filters.data) filters.data = {};
+      switch (questionType.questionType) {
+        case TSurveyQuestionTypeEnum.OpenText:
+        case TSurveyQuestionTypeEnum.Address:
+        case TSurveyQuestionTypeEnum.ContactInfo: {
+          if (filterType.filterComboBoxValue === "Filled out") {
+            filters.data[questionType.id ?? ""] = {
+              op: "filledOut",
+            };
+          } else if (filterType.filterComboBoxValue === "Skipped") {
+            filters.data[questionType.id ?? ""] = {
+              op: "skipped",
+            };
+          }
+          break;
+        }
+        case TSurveyQuestionTypeEnum.Ranking: {
+          if (filterType.filterComboBoxValue === "Filled out") {
+            filters.data[questionType.id ?? ""] = {
+              op: "submitted",
+            };
+          } else if (filterType.filterComboBoxValue === "Skipped") {
+            filters.data[questionType.id ?? ""] = {
+              op: "skipped",
+            };
+          }
+          break;
+        }
+        case TSurveyQuestionTypeEnum.MultipleChoiceSingle:
+        case TSurveyQuestionTypeEnum.MultipleChoiceMulti: {
+          if (filterType.filterValue === "Includes either") {
+            filters.data[questionType.id ?? ""] = {
+              op: "includesOne",
+              value: filterType.filterComboBoxValue as string[],
+            };
+          } else if (filterType.filterValue === "Includes all") {
+            filters.data[questionType.id ?? ""] = {
+              op: "includesAll",
+              value: filterType.filterComboBoxValue as string[],
+            };
+          }
+          break;
+        }
+        case TSurveyQuestionTypeEnum.NPS:
+        case TSurveyQuestionTypeEnum.Rating: {
+          if (filterType.filterValue === "Is equal to") {
+            filters.data[questionType.id ?? ""] = {
+              op: "equals",
+              value: parseInt(filterType.filterComboBoxValue as string),
+            };
+          } else if (filterType.filterValue === "Is less than") {
+            filters.data[questionType.id ?? ""] = {
+              op: "lessThan",
+              value: parseInt(filterType.filterComboBoxValue as string),
+            };
+          } else if (filterType.filterValue === "Is more than") {
+            filters.data[questionType.id ?? ""] = {
+              op: "greaterThan",
+              value: parseInt(filterType.filterComboBoxValue as string),
+            };
+          } else if (filterType.filterValue === "Submitted") {
+            filters.data[questionType.id ?? ""] = {
+              op: "submitted",
+            };
+          } else if (filterType.filterValue === "Skipped") {
+            filters.data[questionType.id ?? ""] = {
+              op: "skipped",
+            };
+          } else if (filterType.filterValue === "Includes either") {
+            filters.data[questionType.id ?? ""] = {
+              op: "includesOne",
+              value: (filterType.filterComboBoxValue as string[]).map((value) => parseInt(value)),
+            };
+          }
+          break;
+        }
+        case TSurveyQuestionTypeEnum.CTA: {
+          if (filterType.filterComboBoxValue === "Clicked") {
+            filters.data[questionType.id ?? ""] = {
+              op: "clicked",
+            };
+          } else if (filterType.filterComboBoxValue === "Dismissed") {
+            filters.data[questionType.id ?? ""] = {
+              op: "skipped",
+            };
+          }
+          break;
+        }
+        case TSurveyQuestionTypeEnum.Consent: {
+          if (filterType.filterComboBoxValue === "Accepted") {
+            filters.data[questionType.id ?? ""] = {
+              op: "accepted",
+            };
+          } else if (filterType.filterComboBoxValue === "Dismissed") {
+            filters.data[questionType.id ?? ""] = {
+              op: "skipped",
+            };
+          }
+          break;
+        }
+        case TSurveyQuestionTypeEnum.PictureSelection: {
+          const questionId = questionType.id ?? "";
+          const question = survey.questions.find((q) => q.id === questionId);
+
+          if (
+            question?.type !== TSurveyQuestionTypeEnum.PictureSelection ||
+            !Array.isArray(filterType.filterComboBoxValue)
+          ) {
+            return;
+          }
+
+          const selectedOptions = filterType.filterComboBoxValue.map((option) => {
+            const index = parseInt(option.split(" ")[1]);
+            return question?.choices[index - 1].id;
+          });
+
+          if (filterType.filterValue === "Includes all") {
+            filters.data[questionId] = {
+              op: "includesAll",
+              value: selectedOptions,
+            };
+          } else if (filterType.filterValue === "Includes either") {
+            filters.data[questionId] = {
+              op: "includesOne",
+              value: selectedOptions,
+            };
+          }
+          break;
+        }
+        case TSurveyQuestionTypeEnum.Matrix: {
+          if (
+            filterType.filterValue &&
+            filterType.filterComboBoxValue &&
+            typeof filterType.filterComboBoxValue === "string"
+          ) {
+            filters.data[questionType.id ?? ""] = {
+              op: "matrix",
+              value: { [filterType.filterValue]: filterType.filterComboBoxValue },
+            };
+          }
+          break;
+        }
+      }
+    });
+  }
 
   // for hidden fields
   if (hiddenFields.length) {
-    filters.data = filters.data || {};
+    hiddenFields.forEach(({ filterType, questionType }) => {
-    hiddenFields.forEach(({ filterType, elementType }) => {
+      if (!filters.data) filters.data = {};
-      processEqualsNotEqualsFilter(filterType, elementType.label, filters, "data");
+      if (!filterType.filterComboBoxValue) return;
+      if (filterType.filterValue === "Equals") {
+        filters.data[questionType.label ?? ""] = {
+          op: "equals",
+          value: filterType.filterComboBoxValue as string,
+        };
+      } else if (filterType.filterValue === "Not equals") {
+        filters.data[questionType.label ?? ""] = {
+          op: "notEquals",
+          value: filterType.filterComboBoxValue as string,
+        };
+      }
     });
   }
 
   // for attributes
   if (attributes.length) {
-    filters.contactAttributes = filters.contactAttributes || {};
+    attributes.forEach(({ filterType, questionType }) => {
-    attributes.forEach(({ filterType, elementType }) => {
+      if (!filters.contactAttributes) filters.contactAttributes = {};
-      processEqualsNotEqualsFilter(filterType, elementType.label, filters, "contactAttributes");
+      if (!filterType.filterComboBoxValue) return;
+      if (filterType.filterValue === "Equals") {
+        filters.contactAttributes[questionType.label ?? ""] = {
+          op: "equals",
+          value: filterType.filterComboBoxValue as string,
+        };
+      } else if (filterType.filterValue === "Not equals") {
+        filters.contactAttributes[questionType.label ?? ""] = {
+          op: "notEquals",
+          value: filterType.filterComboBoxValue as string,
+        };
+      }
     });
   }
 
   // for others
   if (others.length) {
-    filters.others = filters.others || {};
+    others.forEach(({ filterType, questionType }) => {
-    others.forEach(({ filterType, elementType }) => {
+      if (!filters.others) filters.others = {};
-      processEqualsNotEqualsFilter(filterType, elementType.label, filters, "others");
+      if (!filterType.filterComboBoxValue) return;
+      if (filterType.filterValue === "Equals") {
+        filters.others[questionType.label ?? ""] = {
+          op: "equals",
+          value: filterType.filterComboBoxValue as string,
+        };
+      } else if (filterType.filterValue === "Not equals") {
+        filters.others[questionType.label ?? ""] = {
+          op: "notEquals",
+          value: filterType.filterComboBoxValue as string,
+        };
+      }
     });
   }
 
-  processMetaFilters(meta, filters);
+  // for meta
-  processQuotaFilters(quotas, filters);
+  if (meta.length) {
+    meta.forEach(({ filterType, questionType }) => {
+      if (!filters.meta) filters.meta = {};
+
+      // For text input cases (URL filtering)
+      if (typeof filterType.filterComboBoxValue === "string" && filterType.filterComboBoxValue.length > 0) {
+        const value = filterType.filterComboBoxValue.trim();
+        const op = META_OP_MAP[filterType.filterValue as keyof typeof META_OP_MAP];
+        if (op) {
+          filters.meta[questionType.label ?? ""] = { op, value };
+        }
+      }
+      // For dropdown/select cases (existing metadata fields)
+      else if (Array.isArray(filterType.filterComboBoxValue) && filterType.filterComboBoxValue.length > 0) {
+        const value = filterType.filterComboBoxValue[0]; // Take first selected value
+        if (filterType.filterValue === "Equals") {
+          filters.meta[questionType.label ?? ""] = { op: "equals", value };
+        } else if (filterType.filterValue === "Not equals") {
+          filters.meta[questionType.label ?? ""] = { op: "notEquals", value };
+        }
+      }
+    });
+  }
+
+  if (quotas.length) {
+    quotas.forEach(({ filterType, questionType }) => {
+      filters.quotas ??= {};
+      const quotaId = questionType.id;
+      if (!quotaId) return;
+
+      const statusMap: Record<string, "screenedIn" | "screenedOut" | "screenedOutNotInQuota"> = {
+        "Screened in": "screenedIn",
+        "Screened out (overquota)": "screenedOut",
+        "Screened out (not in quota)": "screenedOutNotInQuota",
+      };
+      const op = statusMap[String(filterType.filterComboBoxValue)];
+      if (op) filters.quotas[quotaId] = { op };
+    });
+  }
 
   return filters;
 };

apps/web/i18n.lock

@@ -304,7 +304,7 @@ checksums:
     common/project_not_found: be3b516c02b05553acb4ae338511f645
     common/project_permission_not_found: ace6b03f06bd14e884e4295c5022d61b
     common/projects: fe8af5cfb3c95cb35534872a325b225e
-    common/question: 2a47e06b62410b16003c4979dee0099f
+    common/question: 0576462ce60d4263d7c482463fcc9547
     common/question_id: d0c3672976c281411bdccf749faf5ffd
     common/questions: 38d08215fd7a8026077c7b64eea6bb59
     common/quota: edd33b180b463ee7a70a64a5c4ad7f02
@@ -596,7 +596,6 @@ checksums:
     environments/contacts/upload_contacts_modal_pick_different_file: e748a6e81a425ef9aa33f96ca4edc157
     environments/contacts/upload_contacts_modal_preview: c4406f8d9a54f131abfff4e9928228bb
     environments/contacts/upload_contacts_modal_upload_btn: 47b7f3bcf478a7d8dc258d2efc80af37
-    environments/contacts/upload_contacts_success: cd5d6b6d587586dd4f944868c92835bc
     environments/formbricks_logo: b7ee57de32c8b13463cc8ca8643eddd4
     environments/integrations/activepieces_integration_description: 62a8fbf86762bab01c7d2db2ba60fff4
     environments/integrations/additional_settings: 20936205a75745fba2c4047375a04db3
@@ -749,11 +748,8 @@ checksums:
     environments/project/app-connection/how_to_setup_description: 2ae5cd9456a8acd3986e3d3678e70ed2
     environments/project/app-connection/receiving_data: 9f2a48c0b0278861add70b526061264c
     environments/project/app-connection/recheck: f95f2bbe6990a123d60255c87bdd59f7
-    environments/project/app-connection/sdk_connection_details: 89f2c169fd1604c1df5a834517f1eae1
-    environments/project/app-connection/sdk_connection_details_description: d9b5d06776a139aef6fc8ed53d71bf0a
     environments/project/app-connection/setup_alert_description: 6d676044d01dc2147731ffab7df6c259
     environments/project/app-connection/setup_alert_title: 9561cca2b391e0df81e8a982921ff2bb
-    environments/project/app-connection/webapp_url: d64d8cc3c4c4ecce780d94755f7e4de9
     environments/project/general/cannot_delete_only_project: 24751701a42d8b4d2ba6112a5f642bad
     environments/project/general/delete_project: e4a2a227105c4ec71e561ab1f140eb26
     environments/project/general/delete_project_confirmation: 54a4ee78867537e0244c7170453cdb3f
@@ -1121,9 +1117,9 @@ checksums:
     environments/surveys/edit/add: 5196f5cd4ba3a6ac8edef91345e17f66
     environments/surveys/edit/add_a_delay_or_auto_close_the_survey: b5fa358bf3ff324014060eb0baf6dd2f
     environments/surveys/edit/add_a_four_digit_pin: 953cb3673d2135923e3b4474d33ffb2c
+    environments/surveys/edit/add_a_new_question_to_your_survey: 65f3a4f0d5132eab7aeaed1ad28df56c
     environments/surveys/edit/add_a_variable_to_calculate: c202b50c12fc6f71f06eaf6f1b61e961
     environments/surveys/edit/add_action_below: 46cdbf9a77391aa89593908e508f7af0
-    environments/surveys/edit/add_block: ae8fbf8fdb5c6be7e4951a6cdd486473
     environments/surveys/edit/add_choice_below: abf0416f7a78df61869de63d9766683c
     environments/surveys/edit/add_color_coding: db738f7be21e08c5dc878c09fdf95e44
     environments/surveys/edit/add_color_coding_description: da15c619aa00084ad18f30766906527f
@@ -1144,8 +1140,8 @@ checksums:
     environments/surveys/edit/add_other: de75bd3d40f3b5effdbe1c8d536f936b
     environments/surveys/edit/add_photo_or_video: 7fd213e807ad060e415d1d4195397473
     environments/surveys/edit/add_pin: 1bc282dd7eaea51301655d3e8dd3a9fb
+    environments/surveys/edit/add_question: 10336b52895385f7390540ad5bb4e208
     environments/surveys/edit/add_question_below: 58e64eb2e013f1175ea0dcf79149109f
-    environments/surveys/edit/add_question_to_block: 8589b1042aa93531a836549d6036492c
     environments/surveys/edit/add_row: a613cef4caf1f0e05697c8de5164e2a3
     environments/surveys/edit/add_variable: 23f97e23aba763cc58934df4fa13ffc1
     environments/surveys/edit/address_fields: 9cabb97c3deaff4f6cb3afc3d5cfaf0a
@@ -1171,14 +1167,12 @@ checksums:
     environments/surveys/edit/automatically_mark_the_survey_as_complete_after: c6ede2a5515a4ca72b36aec2583f43aa
     environments/surveys/edit/back_button_label: 25af945e77336724b5276de291cc92d9
     environments/surveys/edit/background_styling: 4e1e6fd2ec767bbff8767f6c0f68a731
-    environments/surveys/edit/block_deleted: c682259eb138ad84f8b4441abfd9b572
-    environments/surveys/edit/block_duplicated: dc9e9fab2b1cd91f6c265324b34c6376
     environments/surveys/edit/bold: 4d7306bc355ed2befd6a9237c5452ee6
     environments/surveys/edit/brand_color: 84ddb5736deb9f5c081ffe4962a6c63e
     environments/surveys/edit/brightness: 45425b6db1872225bfff71cf619d0e64
-    environments/surveys/edit/button_external: d2de24e06574622baf1c0cdd1b718b1a
-    environments/surveys/edit/button_external_description: cbd10d494a70b362bfee811e012c45b1
     environments/surveys/edit/button_label: db3cd7c74f393187bd780c5c3d8b9b4f
+    environments/surveys/edit/button_to_continue_in_survey: 931d87aaf360ab7521f9dd75795a42d0
+    environments/surveys/edit/button_to_link_to_external_url: 7c7cf54e8dc86240b86964133e802888
     environments/surveys/edit/button_url: 6f39f649a165a11873c11ea6403dba90
     environments/surveys/edit/cal_username: a4a9c739af909d975beb1bc4998feae9
     environments/surveys/edit/calculate: c5fcf8d3a38706ae2071b6f78339ec68
@@ -1217,7 +1211,6 @@ checksums:
     environments/surveys/edit/character_limit_toggle_title: fdc45bcc6335e5116aec895fecda0d87
     environments/surveys/edit/checkbox_label: 12a07d6bdf38e283a2e95892ec49b7f8
     environments/surveys/edit/choose_the_actions_which_trigger_the_survey: 773b311a148a112243f3b139506b9987
-    environments/surveys/edit/choose_the_first_question_on_your_block: bdece06ca04f89d0c445ba1554dd5b80
     environments/surveys/edit/choose_where_to_run_the_survey: ad87bcae97c445f1fd9ac110ea24f117
     environments/surveys/edit/city: 1831f32e1babbb29af27fac3053504a2
     environments/surveys/edit/close_survey_on_response_limit: 256d0bccdbcbb3d20e39aabc5b376e5e
@@ -1241,12 +1234,10 @@ checksums:
     environments/surveys/edit/create_group: 4566e056e5217dc02a383105892fe18c
     environments/surveys/edit/create_your_own_survey: e3ddd53e0cfa409ca8dccfb3d77933e7
     environments/surveys/edit/css_selector: 615e9f1b74622df29de28a5b5614c6fe
-    environments/surveys/edit/cta_button_label: ec070ffba38eae24751bb3a4c1e14c81
     environments/surveys/edit/custom_hostname: bc2b1c8de3f9b8ef145b45aeba6ab429
     environments/surveys/edit/darken_or_lighten_background_of_your_choice: 304a64a8050ebf501d195e948cd25b6f
     environments/surveys/edit/date_format: e95dfc41ac944874868487457ddc057a
     environments/surveys/edit/days_before_showing_this_survey_again: 354fb28c5ff076f022d82a20c749ee46
-    environments/surveys/edit/delete_block: c00617cb0724557e486304276063807a
     environments/surveys/edit/delete_choice: fd750208d414b9ad8c980c161a0199e1
     environments/surveys/edit/disable_the_visibility_of_survey_progress: 2af631010114307ac2a91612559c9618
     environments/surveys/edit/display_an_estimate_of_completion_time_for_survey: 03f0a816569399c1c61d08dbc913de06
@@ -1258,12 +1249,9 @@ checksums:
     environments/surveys/edit/does_not_include_all_of: c18c1a71e6d96c681a3e95c7bd6c9482
     environments/surveys/edit/does_not_include_one_of: 91090d2e0667faf654f6a81d9857440f
     environments/surveys/edit/does_not_start_with: 9395869b54cdfb353a51a7e0864f4fd7
-    environments/surveys/edit/duplicate_block: d4ea4afb5fc5b18a81cbe0302fa05997
-    environments/surveys/edit/duplicate_question: 910751de01fdd327165968214717711b
     environments/surveys/edit/edit_link: 40ba9e15beac77a46c5baf30be84ac54
     environments/surveys/edit/edit_recall: 38a4a7378d02453e35d06f2532eef318
     environments/surveys/edit/edit_translations: 2b21bea4b53e88342559272701e9fbf3
-    environments/surveys/edit/element_not_found: 196777ff6811dd177971ffc8e27a72c1
     environments/surveys/edit/enable_participants_to_switch_the_survey_language_at_any_point_during_the_survey: c70466147d49dcbb3686452f35c46428
     environments/surveys/edit/enable_recaptcha_to_protect_your_survey_from_spam: 4483a5763718d201ac97caa1e1216e13
     environments/surveys/edit/enable_spam_protection: e1fb0dd0723044bf040b92d8fc58015d
@@ -1279,7 +1267,7 @@ checksums:
     environments/surveys/edit/error_saving_changes: b75aa9e4e42e1d43c8f9c33c2b7dc9a7
     environments/surveys/edit/even_after_they_submitted_a_response_e_g_feedback_box: 7b99f30397dcde76f65e1ab64bdbd113
     environments/surveys/edit/everyone: 2112aa71b568773e8e8a792c63f4d413
-    environments/surveys/edit/external_urls_paywall_tooltip: a8860ff0a2ad5f283bc0becba374cd54
+    environments/surveys/edit/external_urls_paywall_tooltip: 0dbb62557e8a6fa817f0e74709eeb3d2
     environments/surveys/edit/fallback_missing: 43dbedbe1a178d455e5f80783a7b6722
     environments/surveys/edit/fieldId_is_used_in_logic_of_question_please_remove_it_from_logic_first: ad4afe2980e1dfeffb20aa78eb892350
     environments/surveys/edit/fieldId_is_used_in_quota_please_remove_it_from_quota_first: 374c563964fc805ab0b8974e781687d9
@@ -1339,12 +1327,11 @@ checksums:
     environments/surveys/edit/hidden_field_used_in_recall: 70dee46bae18209e8861b654ff9a04ae
     environments/surveys/edit/hidden_field_used_in_recall_ending_card: a985d03d18e33d83521961c9c981d0ee
     environments/surveys/edit/hidden_field_used_in_recall_welcome: 22fef7001d5e60edbf877e7b435c1991
+    environments/surveys/edit/hide_advanced_settings: ffa251d7762030b72c12e92f3c69a9b4
     environments/surveys/edit/hide_back_button: 9f355fb4a8e80485b9de521a952ffeb9
     environments/surveys/edit/hide_back_button_description: caaa30cf43c5611577933a1c9f44b9ee
-    environments/surveys/edit/hide_block_settings: c24c3d3892c251792e297cdc036d2fde
     environments/surveys/edit/hide_logo: eef4de2e3fffe8cbe32bff4f6f7250d8
     environments/surveys/edit/hide_progress_bar: 7eefe7db6a051105bded521d94204933
-    environments/surveys/edit/hide_question_settings: 99127cd016db2f7fc80333b36473c0ef
     environments/surveys/edit/hide_the_logo_in_this_specific_survey: 29d4c6c714886e57bc29ad292d0f5a00
     environments/surveys/edit/hostname: 9bdaa7692869999df51bb60d58d9ef62
     environments/surveys/edit/how_funky_do_you_want_your_cards_in_survey_type_derived_surveys: 3cb16b37510c01af20a80f51b598346e
@@ -1371,7 +1358,6 @@ checksums:
     environments/surveys/edit/is_clicked: 8977b8cc9ff07d2b8bdb81bb41bb55cf
     environments/surveys/edit/is_completely_submitted: 8c8f0c0a9cf81dac16e486b2f5cdbb3b
     environments/surveys/edit/is_empty: dca87bc415341b1cdf9523f3b795a313
-    environments/surveys/edit/is_not_clicked: 04ac5678998edbdf9f431af74bd480da
     environments/surveys/edit/is_not_empty: 8e53d702b296f172386b1277a8699050
     environments/surveys/edit/is_not_set: c1a6fd89387686d3a5426a768bb286e9
     environments/surveys/edit/is_partially_submitted: f5acf840b87d0d42c69d49a5714a86f3
@@ -1379,7 +1365,7 @@ checksums:
     environments/surveys/edit/is_skipped: 9fb90b6578f603cca37d4e6c912bb401
     environments/surveys/edit/is_submitted: 13e774a97ad5f5609555e6f99514e70f
     environments/surveys/edit/italic: 555c60fb1d12ae305136202afa6deb3d
-    environments/surveys/edit/jump_to_block: 2fc00bd725c44f98861051c57bb2c392
+    environments/surveys/edit/jump_to_question: 742aabed8845190825418aa429f01b2d
     environments/surveys/edit/keep_current_order: a7c944ad6b3515f2c4f83a2c81f8fc26
     environments/surveys/edit/keep_showing_while_conditions_match: 2574802d87bd6da151c9145aacce7281
     environments/surveys/edit/key: 3d1065ab98a1c2f1210507fd5c7bf515
@@ -1393,18 +1379,16 @@ checksums:
     environments/surveys/edit/logic_error_warning: 542fbb918ffdb29e6f9a4a6196ffb558
     environments/surveys/edit/logic_error_warning_text: f2afad8852a95ed169a39959efbf592c
     environments/surveys/edit/long_answer: 3a97f8d2e90aba6e679917a0c5670c53
-    environments/surveys/edit/long_answer_toggle_description: 86bcdfeb74d9825c2f2d5a215e92d111
     environments/surveys/edit/lower_label: 45985bca022d4370bd6e013af75d5160
     environments/surveys/edit/manage_languages: 9c56d5afee8a73dfc283a452470f3a10
     environments/surveys/edit/matrix_all_fields: 187240509163b2f52a400a565e57c67f
     environments/surveys/edit/matrix_rows: 8f41f34e6ca28221cf1ebd948af4c151
     environments/surveys/edit/max_file_size: 3d35a22048f4d22e24da698fb5fb77d7
     environments/surveys/edit/max_file_size_limit_is: 78998639cde3587cecb272ba47e05f9e
-    environments/surveys/edit/move_question_to_block: e8d7ef1e2f727921cb7f5788849492ad
     environments/surveys/edit/multiply: 89a0bb629167f97750ae1645a46ced0d
     environments/surveys/edit/needed_for_self_hosted_cal_com_instance: d241e72f0332177d32ce6c35070757dc
-    environments/surveys/edit/next_block: 53eaa5b1c9333455ab1e99bedd222ba2
     environments/surveys/edit/next_button_label: e23522dd38f3eabeeccd3f48f32b73a8
+    environments/surveys/edit/next_question: 2e0f1ea264fb4bfcb8378b2b0cf7c18f
     environments/surveys/edit/no_hidden_fields_yet_add_first_one_below: 9cc6cab3a6a42dbf835215897b5b8516
     environments/surveys/edit/no_images_found_for: 90f10f4611ed7b115a49595409b66ebe
     environments/surveys/edit/no_languages_found_add_first_one_to_get_started: 22d7782c8504daf693cab3cf7135d6e3
@@ -1514,17 +1498,17 @@ checksums:
     environments/surveys/edit/set_the_global_placement_in_the_look_feel_settings: e34e579e778a918733702edb041ac929
     environments/surveys/edit/settings_saved_successfully: eb109269bc59dd67ae09fd9eb53652d2
     environments/surveys/edit/seven_points: 4ead50fdfda45e8710767e1b1a84bf42
-    environments/surveys/edit/show_block_settings: bad99d99c9908874e45f5c350a88cc79
+    environments/surveys/edit/show_advanced_settings: b6f5bbbb84f34e51cd72ccd332e9613e
     environments/surveys/edit/show_button: 6b364aac9d7ac71f34a438607c9693bc
     environments/surveys/edit/show_language_switch: b6915a7f26d7079f2d4d844d74440413
     environments/surveys/edit/show_multiple_times: 05239c532c9c05ef5d2990ba6ce12f60
     environments/surveys/edit/show_only_once: 31858baf60ebcf193c7e35d9084af0af
-    environments/surveys/edit/show_question_settings: a84698a95df0833a35d653edcdbbe501
     environments/surveys/edit/show_survey_maximum_of: 721ed61b01a9fc8ce4becb72823bb72e
     environments/surveys/edit/show_survey_to_users: d5e90fd17babfea978fce826e9df89b0
     environments/surveys/edit/show_to_x_percentage_of_targeted_users: b745169011fa7e8ca475baa5500c5197
     environments/surveys/edit/simple: 65575bd903091299bc4a94b7517a6288
     environments/surveys/edit/six_points: c6c09b3f07171dc388cb5a610ea79af7
+    environments/surveys/edit/skip_button_label: bfc8993b0f13e6f4fc9ef0c570b808e3
     environments/surveys/edit/smiley: e68e3b28fc3c04255e236c6a0feb662b
     environments/surveys/edit/spam_protection_note: 94059310d07c30f6704e216297036d05
     environments/surveys/edit/spam_protection_threshold_description: ed8b8c9c583077a88bf5dd3ec8b59e60
@@ -1545,7 +1529,6 @@ checksums:
     environments/surveys/edit/survey_placement: 083c10f257337f9648bf9d435b18ec2c
     environments/surveys/edit/survey_trigger: f0c7014a684ca566698b87074fad5579
     environments/surveys/edit/switch_multi_lanugage_on_to_get_started: d2ca06684af26bd6b5121a4656bb6458
-    environments/surveys/edit/target_block_not_found: 0a0c401017ab32364fec2fcbf815d832
     environments/surveys/edit/targeted: ca615f1fc3b490d5a2187b27fb4a2073
     environments/surveys/edit/ten_points: a1317b82003859f77fb3138c55450d63
     environments/surveys/edit/the_survey_will_be_shown_multiple_times_until_they_respond: 2d8d7d2351bd7533eb3788cce228c654
@@ -1565,7 +1548,6 @@ checksums:
     environments/surveys/edit/unlock_targeting_title: 6098caf969cac64cd54e217471ae42d4
     environments/surveys/edit/unsaved_changes_warning: a164f276c9f7344022aa4640b32abcf9
     environments/surveys/edit/until_they_submit_a_response: 2a0fd5dcc6cc40a72ed9b974f22eaf68
-    environments/surveys/edit/untitled_block: fdaa045139deff5cc65fa027df0cc22e
     environments/surveys/edit/upgrade_notice_description: 32b66a4f257ad8d38bc38dcc95fe23c4
     environments/surveys/edit/upgrade_notice_title: 40866066ebc558ad0c92a4f19f12090c
     environments/surveys/edit/upload: 4a6c84aa16db0f4e5697f49b45257bc7
@@ -1937,6 +1919,7 @@ checksums:
     templates/card_abandonment_survey: 705c3dfcc7f6de3a445aaefe0d68c43f
     templates/card_abandonment_survey_description: a3db29212b51402a7659a76248299798
     templates/card_abandonment_survey_question_1_button_label: 6208ac076107506686eb8eae42ac4450
+    templates/card_abandonment_survey_question_1_dismiss_button_label: 17961ce57f78e2cbfded4590014e5e06
     templates/card_abandonment_survey_question_1_headline: d19fc64f80ef192b124f4f9fb070bccc
     templates/card_abandonment_survey_question_1_html: 2a4cbf4a5cc305109d23baa9896a9010
     templates/card_abandonment_survey_question_2_choice_1: 7723bcd15400a40303409716854f88f9
@@ -2023,10 +2006,12 @@ checksums:
     templates/churn_survey_question_2_button_label: 76a8497d7b546628b03bb81d5c1ce995
     templates/churn_survey_question_2_headline: 17d3e7e2ce62af5ef9332c0d208f9172
     templates/churn_survey_question_3_button_label: 43834ccf20c1c7cd49382468abe2edce
+    templates/churn_survey_question_3_dismiss_button_label: b7f28dfa2f58b80b149bb82b392d0291
     templates/churn_survey_question_3_headline: 76444078de5c30666ff65f453f60b420
     templates/churn_survey_question_3_html: 4f723d2aea95570d6fc4559519611b8e
     templates/churn_survey_question_4_headline: c64605fecd9342dffe904d809e9e3762
     templates/churn_survey_question_5_button_label: 03e28ea8c2c970cd1b532fee14b22e2b
+    templates/churn_survey_question_5_dismiss_button_label: b7f28dfa2f58b80b149bb82b392d0291
     templates/churn_survey_question_5_headline: bab9054d83ebc8c67a5bfe7edcb29c85
     templates/churn_survey_question_5_html: da3da01f91e3e922ea4d09c4bd836023
     templates/collect_feedback_description: 450c46ad8406e6ac92940a80ed24c000
@@ -2133,7 +2118,6 @@ checksums:
     templates/csat_survey_question_3_headline: 25974b7f1692cad41908fe305830b6c0
     templates/csat_survey_question_3_placeholder: 3ec4d0b6bb1f26bb2c32e9e8bd377ae3
     templates/cta_description: bc94a2ddc965b286a8677b0642696c7e
-    templates/custom_survey_block_1_name: 5e1b4dce0cb70662441b663507a69454
     templates/custom_survey_description: 0492afdea2ef1bd683eaf48a2bad2caa
     templates/custom_survey_name: 6fc756927ca9ea22c26368cccd64a67e
     templates/custom_survey_question_1_headline: 0abf9d41e0b5c5567c3833fd63048398
@@ -2220,6 +2204,7 @@ checksums:
     templates/evaluate_a_product_idea_description: 734295caa08aac718e9ee01a99c3debe
     templates/evaluate_a_product_idea_name: b0d8039556d686b83dfcd455092b9d9c
     templates/evaluate_a_product_idea_question_1_button_label: 102449dc2f516eb6259c39fa4ed9c56a
+    templates/evaluate_a_product_idea_question_1_dismiss_button_label: b7f28dfa2f58b80b149bb82b392d0291
     templates/evaluate_a_product_idea_question_1_headline: c94096ba66ad74fb3bbfaaa06bd709a0
     templates/evaluate_a_product_idea_question_1_html: bc0dcb887591e018dfeeb65a3a5c4bb9
     templates/evaluate_a_product_idea_question_2_headline: 10a50778c4559554336e7289a48d021c
@@ -2228,6 +2213,7 @@ checksums:
     templates/evaluate_a_product_idea_question_3_headline: 69407cff7b3e2706bdc86cb425e88918
     templates/evaluate_a_product_idea_question_3_placeholder: 3ec4d0b6bb1f26bb2c32e9e8bd377ae3
     templates/evaluate_a_product_idea_question_4_button_label: 89ddbcf710eba274963494f312bdc8a9
+    templates/evaluate_a_product_idea_question_4_dismiss_button_label: b7f28dfa2f58b80b149bb82b392d0291
     templates/evaluate_a_product_idea_question_4_headline: e7e5b5234f617f38f09b2cac639a7ef8
     templates/evaluate_a_product_idea_question_4_html: 8902a0d7738376818d2729644321438f
     templates/evaluate_a_product_idea_question_5_headline: 1d573c2338e6ba5d3cccb09c785bd8c3
@@ -2277,6 +2263,7 @@ checksums:
     templates/feedback_box_question_2_headline: 878b8f17dc18877bfbc07823113cd5d5
     templates/feedback_box_question_2_subheader: 476ff43369a72225b01633e1bce59b95
     templates/feedback_box_question_3_button_label: c631d5b3f14b581c303b782221582fe7
+    templates/feedback_box_question_3_dismiss_button_label: 0d5962c08cdca1a2804dfc4abc308a8f
     templates/feedback_box_question_3_headline: 5cfb173d156555227fbc2c97ad921e72
     templates/feedback_box_question_3_html: 7e5877860eec80971969ae83c89b30f6
     templates/feedback_box_question_4_button_label: 1050569a1ea31d070e0cee55bcab3494
@@ -2301,6 +2288,7 @@ checksums:
     templates/identify_sign_up_barriers_description: 5b2fbee8c425d7a4d0706ec3628cea11
     templates/identify_sign_up_barriers_name: 3bbc5352dfa7a9c237bc2c6b21b608dd
     templates/identify_sign_up_barriers_question_1_button_label: 080fd22c580f56ffdcea6c3d60448b84
+    templates/identify_sign_up_barriers_question_1_dismiss_button_label: 0d5962c08cdca1a2804dfc4abc308a8f
     templates/identify_sign_up_barriers_question_1_headline: c8c247363daf4697e1939aaf8dc5770c
     templates/identify_sign_up_barriers_question_1_html: 51029ae64c19101af608684b6f429eb8
     templates/identify_sign_up_barriers_question_2_headline: f768ea3053b07f6bbcba977f714ec3da
@@ -2323,6 +2311,7 @@ checksums:
     templates/identify_sign_up_barriers_question_8_headline: 1f4ee5675d0d84bf049052be26549037
     templates/identify_sign_up_barriers_question_8_placeholder: 3ec4d0b6bb1f26bb2c32e9e8bd377ae3
     templates/identify_sign_up_barriers_question_9_button_label: 0dd2ae69be4618c1f9e615774a4509ca
+    templates/identify_sign_up_barriers_question_9_dismiss_button_label: b8bf7f2b6e67a523dc4ff5ce009cdb72
     templates/identify_sign_up_barriers_question_9_headline: 54d02e5c8eeb10fed40e2e82f7399f8c
     templates/identify_sign_up_barriers_question_9_html: ed87aa8d325b6063d4150431e9f80ef0
     templates/identify_upsell_opportunities_description: ed6b8dcb162076a380955d7c98482b06
@@ -2359,6 +2348,7 @@ checksums:
     templates/improve_newsletter_content_question_2_headline: abbea0e97841b617a878f1de2c968d0e
     templates/improve_newsletter_content_question_2_placeholder: 3ec4d0b6bb1f26bb2c32e9e8bd377ae3
     templates/improve_newsletter_content_question_3_button_label: 5d5352aba5272de9b1337909d49d4a4c
+    templates/improve_newsletter_content_question_3_dismiss_button_label: 6a6d6f71da4a44cca4fe5ad09f83a9d2
     templates/improve_newsletter_content_question_3_headline: fcd056a1581f5a538aad57641cd0abad
     templates/improve_newsletter_content_question_3_html: 102e73f836fe99b6c333c88c730fa25b
     templates/improve_trial_conversion_description: 3187c4ac1de993326a988c6665d3d4ae
@@ -2373,6 +2363,7 @@ checksums:
     templates/improve_trial_conversion_question_2_button_label: 89ddbcf710eba274963494f312bdc8a9
     templates/improve_trial_conversion_question_2_headline: 05dd4820f60b9d267a9affc7e662f029
     templates/improve_trial_conversion_question_4_button_label: d94a6a11cfdf4ebde4c5332e585e2e96
+    templates/improve_trial_conversion_question_4_dismiss_button_label: b7f28dfa2f58b80b149bb82b392d0291
     templates/improve_trial_conversion_question_4_headline: 9b07341f65574c4165086ec107cebb45
     templates/improve_trial_conversion_question_4_html: 95d13979f92aa0e6c5bce6613ad3b417
     templates/improve_trial_conversion_question_5_button_label: 89ddbcf710eba274963494f312bdc8a9
@@ -2536,6 +2527,7 @@ checksums:
     templates/preview_survey_question_2_choice_2_label: 1af148222f327f28cf0db6513de5989e
     templates/preview_survey_question_2_headline: 5cfb173d156555227fbc2c97ad921e72
     templates/preview_survey_welcome_card_headline: 8778dc41547a2778d0f9482da989fc00
+    templates/preview_survey_welcome_card_html: 5fc24f7cfeba1af9a3fc3ddb6fb67de4
     templates/prioritize_features_description: 1eae41fad0e3947f803d8539081e59ec
     templates/prioritize_features_name: 4ca59ff1f9c319aaa68c3106d820fd6a
     templates/prioritize_features_question_1_choice_1: 7c0b2da44eacc271073d4f15caaa86c8
@@ -2561,6 +2553,7 @@ checksums:
     templates/product_market_fit_superhuman: 48b1b2db74562dea0d00483b29942346
     templates/product_market_fit_superhuman_description: d14c8e7f4eb7c98919de171457d10a31
     templates/product_market_fit_superhuman_question_1_button_label: 5d5352aba5272de9b1337909d49d4a4c
+    templates/product_market_fit_superhuman_question_1_dismiss_button_label: 17961ce57f78e2cbfded4590014e5e06
     templates/product_market_fit_superhuman_question_1_headline: 21a16bc7bc801fdd743ad37354eedbfb
     templates/product_market_fit_superhuman_question_1_html: fa12924d03a014c4a81e770c3eb2175a
     templates/product_market_fit_superhuman_question_2_choice_1: 074b2a608d4bba5706b5c55dae249edf
@@ -2666,6 +2659,7 @@ checksums:
     templates/site_abandonment_survey_description: 46581a9b056f3cbf8c1dc9e630e716b5
     templates/site_abandonment_survey_question_1_html: eec37cddb0c530c72544067712e95670
     templates/site_abandonment_survey_question_2_button_label: 6208ac076107506686eb8eae42ac4450
+    templates/site_abandonment_survey_question_2_dismiss_button_label: 17961ce57f78e2cbfded4590014e5e06
     templates/site_abandonment_survey_question_2_headline: e11a5c95e6a4ba0a3fe9bb0ad1da0b46
     templates/site_abandonment_survey_question_3_choice_1: c86306eb379a1b5f4039e27a0a12caca
     templates/site_abandonment_survey_question_3_choice_2: fee51e29951105d7650c3da72282db6d
@@ -2690,6 +2684,7 @@ checksums:
     templates/site_abandonment_survey_question_7_label: c0d4407cabb5811192c17cbbb8c1a71e
     templates/site_abandonment_survey_question_8_headline: 9e82d6f51788351c7e2c8f73be66d005
     templates/site_abandonment_survey_question_9_headline: ef1289130df46b80d43119380095b579
+    templates/skip: b7f28dfa2f58b80b149bb82b392d0291
     templates/smileys_survey_name: 6ef64e8182e7820efa53a2d1c81eb912
     templates/smileys_survey_question_1_headline: 6b15d118037b729138c2214cfef49a68
     templates/smileys_survey_question_1_lower_label: ff4681be0a94185111459994fe58478c

apps/web/lib/airtable/service.ts

@@ -206,13 +206,15 @@ const getExistingFields = async (key: TIntegrationAirtableCredential, baseId: st
 export const writeData = async (
   key: TIntegrationAirtableCredential,
   configData: TIntegrationAirtableConfigData,
-  responses: string[],
+  values: string[][]
-  elements: string[]
 ) => {
+  const responses = values[0];
+  const questions = values[1];
+
   // 1) Build the record payload
   const data: Record<string, string> = {};
-  for (let i = 0; i < elements.length; i++) {
+  for (let i = 0; i < questions.length; i++) {
-    data[elements[i]] =
+    data[questions[i]] =
       responses[i].length > AIRTABLE_MESSAGE_LIMIT
         ? truncateText(responses[i], AIRTABLE_MESSAGE_LIMIT)
         : responses[i];
@@ -220,7 +222,7 @@ export const writeData = async (
 
   // 2) Figure out which fields need creating
   const existingFields = await getExistingFields(key, configData.baseId, configData.tableId);
-  const fieldsToCreate = elements.filter((q) => !existingFields.has(q));
+  const fieldsToCreate = questions.filter((q) => !existingFields.has(q));
 
   // 3) Create any missing fields with throttling to respect Airtable's 5 req/sec per base limit
   if (fieldsToCreate.length > 0) {

apps/web/lib/constants.ts

@@ -218,6 +218,10 @@ export const INTERCOM_SECRET_KEY = env.INTERCOM_SECRET_KEY;
 export const INTERCOM_APP_ID = env.INTERCOM_APP_ID;
 export const IS_INTERCOM_CONFIGURED = Boolean(env.INTERCOM_APP_ID && INTERCOM_SECRET_KEY);
 
+export const POSTHOG_API_KEY = env.POSTHOG_API_KEY;
+export const POSTHOG_API_HOST = env.POSTHOG_API_HOST;
+export const IS_POSTHOG_CONFIGURED = Boolean(POSTHOG_API_KEY && POSTHOG_API_HOST);
+
 export const TURNSTILE_SECRET_KEY = env.TURNSTILE_SECRET_KEY;
 export const TURNSTILE_SITE_KEY = env.TURNSTILE_SITE_KEY;
 export const IS_TURNSTILE_CONFIGURED = Boolean(env.TURNSTILE_SITE_KEY && TURNSTILE_SECRET_KEY);

apps/web/lib/env.ts

@@ -59,6 +59,8 @@ export const env = createEnv({
         ? z.string().optional()
         : z.string().url("REDIS_URL is required for caching, rate limiting, and audit logging"),
     PASSWORD_RESET_DISABLED: z.enum(["1", "0"]).optional(),
+    POSTHOG_API_HOST: z.string().optional(),
+    POSTHOG_API_KEY: z.string().optional(),
     PRIVACY_URL: z
       .string()
       .url()
@@ -101,6 +103,7 @@ export const env = createEnv({
         }
       )
       .optional(),
+    TELEMETRY_DISABLED: z.enum(["1", "0"]).optional(),
     TERMS_URL: z
       .string()
       .url()
@@ -169,6 +172,8 @@ export const env = createEnv({
     MAIL_FROM_NAME: process.env.MAIL_FROM_NAME,
     NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
     SENTRY_DSN: process.env.SENTRY_DSN,
+    POSTHOG_API_KEY: process.env.POSTHOG_API_KEY,
+    POSTHOG_API_HOST: process.env.POSTHOG_API_HOST,
     OPENTELEMETRY_LISTENER_URL: process.env.OPENTELEMETRY_LISTENER_URL,
     INTERCOM_APP_ID: process.env.INTERCOM_APP_ID,
     NOTION_OAUTH_CLIENT_ID: process.env.NOTION_OAUTH_CLIENT_ID,
@@ -201,6 +206,7 @@ export const env = createEnv({
     STRIPE_SECRET_KEY: process.env.STRIPE_SECRET_KEY,
     STRIPE_WEBHOOK_SECRET: process.env.STRIPE_WEBHOOK_SECRET,
     PUBLIC_URL: process.env.PUBLIC_URL,
+    TELEMETRY_DISABLED: process.env.TELEMETRY_DISABLED,
     TURNSTILE_SECRET_KEY: process.env.TURNSTILE_SECRET_KEY,
     TURNSTILE_SITE_KEY: process.env.TURNSTILE_SITE_KEY,
     RECAPTCHA_SITE_KEY: process.env.RECAPTCHA_SITE_KEY,

apps/web/lib/environment/service.ts

@@ -17,6 +17,7 @@ import {
 } from "@formbricks/types/environment";
 import { DatabaseError, ResourceNotFoundError, ValidationError } from "@formbricks/types/errors";
 import { getOrganizationsByUserId } from "../organization/service";
+import { capturePosthogEnvironmentEvent } from "../posthogServer";
 import { getUserProjects } from "../project/service";
 import { validateInputs } from "../utils/validate";
 
@@ -172,6 +173,10 @@ export const createEnvironment = async (
       },
     });
 
+    await capturePosthogEnvironmentEvent(environment.id, "environment created", {
+      environmentType: environment.type,
+    });
+
     return environment;
   } catch (error) {
     if (error instanceof Prisma.PrismaClientKnownRequestError) {

apps/web/lib/googleSheet/service.ts

@@ -22,36 +22,31 @@ const { google } = require("googleapis");
 export const writeData = async (
   integrationData: TIntegrationGoogleSheets,
   spreadsheetId: string,
-  responses: string[],
+  values: string[][]
-  elements: string[]
 ) => {
   validateInputs(
     [integrationData, ZIntegrationGoogleSheets],
     [spreadsheetId, ZString],
-    [responses, z.array(ZString)],
+    [values, z.array(z.array(ZString))]
-    [elements, z.array(ZString)]
   );
 
   try {
     const authClient = await authorize(integrationData);
     const sheets = google.sheets({ version: "v4", auth: authClient });
-    const responsesMapped = {
+    const responses = {
       values: [
-        responses.map((response) =>
+        values[0].map((value) =>
-          response.length > GOOGLE_SHEET_MESSAGE_LIMIT
+          value.length > GOOGLE_SHEET_MESSAGE_LIMIT ? truncateText(value, GOOGLE_SHEET_MESSAGE_LIMIT) : value
-            ? truncateText(response, GOOGLE_SHEET_MESSAGE_LIMIT)
-            : response
         ),
       ],
     };
-
+    const question = { values: [values[1]] };
-    const element = { values: [elements] };
     sheets.spreadsheets.values.update(
       {
         spreadsheetId: spreadsheetId,
         range: "A1",
         valueInputOption: "RAW",
-        resource: element,
+        resource: question,
       },
       (err: Error) => {
         if (err) {
@@ -65,7 +60,7 @@ export const writeData = async (
         spreadsheetId: spreadsheetId,
         range: "A2",
         valueInputOption: "RAW",
-        resource: responsesMapped,
+        resource: responses,
       },
       (err: Error) => {
         if (err) {

apps/web/lib/i18n/i18n.mock.ts

@@ -1,6 +1,6 @@
-import { TSurveyCTAElement, TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
 import {
   TSurvey,
+  TSurveyCTAQuestion,
   TSurveyCalQuestion,
   TSurveyConsentQuestion,
   TSurveyDateQuestion,
@@ -173,17 +173,20 @@ export const mockNpsQuestion: TSurveyNPSQuestion = {
   isColorCodingEnabled: false,
 };
 
-export const mockCtaQuestion: TSurveyCTAElement = {
+export const mockCtaQuestion: TSurveyCTAQuestion = {
   required: true,
   headline: {
     default: "You are one of our power users!",
   },
-  ctaButtonLabel: {
+  buttonLabel: {
     default: "Book interview",
   },
-  buttonExternal: true,
+  buttonExternal: false,
+  dismissButtonLabel: {
+    default: "Skip",
+  },
   id: "gwn15urom4ffnhfimwbz3vgc",
-  type: TSurveyElementTypeEnum.CTA,
+  type: TSurveyQuestionTypeEnum.CTA,
   isDraft: true,
 };
 
@@ -442,13 +445,15 @@ export const mockLegacyNpsQuestion = {
 export const mockTranslatedCtaQuestion = {
   ...mockCtaQuestion,
   headline: { default: "You are one of our power users!", de: "" },
-  ctaButtonLabel: { default: "Book interview", de: "" },
+  buttonLabel: { default: "Book interview", de: "" },
+  dismissButtonLabel: { default: "Skip", de: "" },
 };
 
 export const mockLegacyCtaQuestion = {
   ...mockCtaQuestion,
   headline: "You are one of our power users!",
-  ctaButtonLabel: "Book interview",
+  buttonLabel: "Book interview",
+  dismissButtonLabel: "Skip",
 };
 
 export const mockTranslatedConsentQuestion = {

apps/web/lib/i18n/utils.ts

@@ -1,7 +1,6 @@
 import { iso639Languages } from "@formbricks/i18n-utils/src/utils";
-import { TI18nString } from "@formbricks/types/i18n";
 import { TLanguage } from "@formbricks/types/project";
-import { TSurveyLanguage } from "@formbricks/types/surveys/types";
+import { TI18nString, TSurveyLanguage } from "@formbricks/types/surveys/types";
 import { structuredClone } from "@/lib/pollyfills/structuredClone";
 
 // Helper function to create an i18nString from a regular string.

apps/web/lib/integration/service.test.ts

@@ -47,8 +47,8 @@ describe("Integration Service", () => {
         spreadsheetName: "Test Spreadsheet",
         surveyId: "survey123",
         surveyName: "Test Survey",
-        elementIds: ["q1", "q2"],
+        questionIds: ["q1", "q2"],
-        elements: "Question 1, Question 2",
+        questions: "Question 1, Question 2",
         createdAt: new Date(),
         includeHiddenFields: false,
         includeMetadata: true,

apps/web/lib/posthogServer.ts

@@ -0,0 +1,56 @@
+import { PostHog } from "posthog-node";
+import { createCacheKey } from "@formbricks/cache";
+import { logger } from "@formbricks/logger";
+import { TOrganizationBillingPlan, TOrganizationBillingPlanLimits } from "@formbricks/types/organizations";
+import { cache } from "@/lib/cache";
+import { IS_POSTHOG_CONFIGURED, IS_PRODUCTION, POSTHOG_API_HOST, POSTHOG_API_KEY } from "./constants";
+
+const enabled = IS_PRODUCTION && IS_POSTHOG_CONFIGURED;
+
+export const capturePosthogEnvironmentEvent = async (
+  environmentId: string,
+  eventName: string,
+  properties: any = {}
+) => {
+  if (!enabled || typeof POSTHOG_API_HOST !== "string" || typeof POSTHOG_API_KEY !== "string") {
+    return;
+  }
+  try {
+    const client = new PostHog(POSTHOG_API_KEY, {
+      host: POSTHOG_API_HOST,
+    });
+    client.capture({
+      // workaround with a static string as exaplained in PostHog docs: https://posthog.com/docs/product-analytics/group-analytics
+      distinctId: "environmentEvents",
+      event: eventName,
+      groups: { environment: environmentId },
+      properties,
+    });
+    await client.shutdown();
+  } catch (error) {
+    logger.error(error, "error sending posthog event");
+  }
+};
+
+export const sendPlanLimitsReachedEventToPosthogWeekly = async (
+  environmentId: string,
+  billing: {
+    plan: TOrganizationBillingPlan;
+    limits: TOrganizationBillingPlanLimits;
+  }
+) =>
+  await cache.withCache(
+    async () => {
+      try {
+        await capturePosthogEnvironmentEvent(environmentId, "plan limit reached", {
+          ...billing,
+        });
+        return "success";
+      } catch (error) {
+        logger.error(error, "error sending plan limits reached event to posthog weekly");
+        throw error;
+      }
+    },
+    createCacheKey.custom("analytics", environmentId, `plan_limits_${billing.plan}`),
+    60 * 60 * 24 * 7 * 1000 // 7 days in milliseconds
+  );

apps/web/lib/response/service.ts

@@ -15,10 +15,8 @@ import {
   ZResponseFilterCriteria,
   ZResponseUpdateInput,
 } from "@formbricks/types/responses";
-import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+import { TSurvey, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
-import { TSurvey } from "@formbricks/types/surveys/types";
 import { TTag } from "@formbricks/types/tags";
-import { getElementsFromBlocks } from "@/lib/survey/utils";
 import { getIsQuotasEnabled } from "@/modules/ee/license-check/lib/utils";
 import { reduceQuotaLimits } from "@/modules/ee/quotas/lib/quotas";
 import { deleteFile } from "@/modules/storage/service";
@@ -370,7 +368,7 @@ export const getResponseDownloadFile = async (
       }
     }
 
-    const { metaDataFields, elements, hiddenFields, variables, userAttributes } = extractSurveyDetails(
+    const { metaDataFields, questions, hiddenFields, variables, userAttributes } = extractSurveyDetails(
       survey,
       responses
     );
@@ -399,7 +397,7 @@ export const getResponseDownloadFile = async (
       "Notes",
       "Tags",
       ...metaDataFields,
-      ...elements.flat(),
+      ...questions.flat(),
       ...variables,
       ...hiddenFields,
       ...userAttributes,
@@ -411,7 +409,7 @@ export const getResponseDownloadFile = async (
     const jsonData = getResponsesJson(
       survey,
       responses,
-      elements,
+      questions,
       userAttributes,
       hiddenFields,
       isQuotasAllowed
@@ -550,15 +548,15 @@ export const updateResponse = async (
 };
 
 const findAndDeleteUploadedFilesInResponse = async (response: TResponse, survey: TSurvey): Promise<void> => {
-  const elements = getElementsFromBlocks(survey.blocks);
+  const fileUploadQuestions = new Set(
-
+    survey.questions
-  const fileUploadElements = new Set(
+      .filter((question) => question.type === TSurveyQuestionTypeEnum.FileUpload)
-    elements.filter((element) => element.type === TSurveyElementTypeEnum.FileUpload).map((q) => q.id)
+      .map((q) => q.id)
   );
 
   const fileUrls = Object.entries(response.data)
-    .filter(([elementId]) => fileUploadElements.has(elementId))
+    .filter(([questionId]) => fileUploadQuestions.has(questionId))
-    .flatMap(([, elementResponse]) => elementResponse as string[]);
+    .flatMap(([, questionResponse]) => questionResponse as string[]);
 
   const deletionPromises = fileUrls.map(async (fileUrl) => {
     try {

apps/web/lib/response/tests/__mocks__/data.mock.ts

@@ -375,8 +375,8 @@ export const mockSurveySummaryOutput = {
       dropOffCount: 0,
       dropOffPercentage: 0,
       headline: "Question Text",
-      elementType: "openText",
+      questionType: "openText",
-      elementId: "ars2tjk8hsi8oqk1uac00mo8",
+      questionId: "ars2tjk8hsi8oqk1uac00mo8",
       ttc: 0,
       impressions: 0,
     },
@@ -396,7 +396,7 @@ export const mockSurveySummaryOutput = {
   quotas: [],
   summary: [
     {
-      element: {
+      question: {
         headline: { default: "Question Text", de: "Fragetext" },
         id: "ars2tjk8hsi8oqk1uac00mo8",
         inputType: "text",

apps/web/lib/response/utils.test.ts

@@ -1,8 +1,12 @@
 import { Prisma } from "@prisma/client";
 import { describe, expect, test } from "vitest";
 import { TResponse } from "@formbricks/types/responses";
-import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+import {
-import { TSurvey } from "@formbricks/types/surveys/types";
+  TSurvey,
+  TSurveyOpenTextQuestion,
+  TSurveyQuestion,
+  TSurveyQuestionTypeEnum,
+} from "@formbricks/types/surveys/types";
 import {
   buildWhereClause,
   calculateTtcTotal,
@@ -40,8 +44,20 @@ describe("Response Utils", () => {
     const mockSurvey: Partial<TSurvey> = {
       id: "survey1",
       name: "Test Survey",
-      blocks: [],
+      questions: [
-      questions: [],
+        {
+          id: "q1",
+          type: TSurveyQuestionTypeEnum.MultipleChoiceSingle,
+          headline: { default: "Question 1" },
+          required: true,
+          choices: [
+            { id: "1", label: { default: "Option 1" } },
+            { id: "other", label: { default: "Other" } },
+          ],
+          shuffleOption: "none",
+          isDraft: false,
+        },
+      ],
       type: "app",
       hiddenFields: { enabled: true, fieldIds: [] },
       createdAt: new Date(),
@@ -99,7 +115,6 @@ describe("Response Utils", () => {
     const baseSurvey: Partial<TSurvey> = {
       id: "s1",
       name: "Survey",
-      blocks: [],
       questions: [],
       type: "app",
       hiddenFields: { enabled: false, fieldIds: [] },
@@ -188,33 +203,26 @@ describe("Response Utils", () => {
     const textSurvey: Partial<TSurvey> = {
       id: "s2",
       name: "TextSurvey",
-      blocks: [
+      questions: [
         {
-          id: "block1",
+          id: "qText",
-          name: "Block 1",
+          type: TSurveyQuestionTypeEnum.OpenText,
-          elements: [
+          headline: { default: "Text Q" },
-            {
+          required: false,
-              id: "qText",
+          isDraft: false,
-              type: TSurveyElementTypeEnum.OpenText,
+          charLimit: {},
-              headline: { default: "Text Q" },
+          inputType: "text",
-              required: false,
+        },
-              isDraft: false,
+        {
-              charLimit: {},
+          id: "qNum",
-              inputType: "text",
+          type: TSurveyQuestionTypeEnum.OpenText,
-            },
+          headline: { default: "Num Q" },
-            {
+          required: false,
-              id: "qNum",
+          isDraft: false,
-              type: TSurveyElementTypeEnum.OpenText,
+          charLimit: {},
-              headline: { default: "Num Q" },
+          inputType: "number",
-              required: false,
-              isDraft: false,
-              charLimit: {},
-              inputType: "number",
-            },
-          ],
         },
       ],
-      questions: [],
       type: "app",
       hiddenFields: { enabled: false, fieldIds: [] },
       createdAt: new Date(),
@@ -224,7 +232,7 @@ describe("Response Utils", () => {
       status: "inProgress",
     };
 
-    const ops: Array<[keyof TSurveyElementTypeEnum | string, any, any]> = [
+    const ops: Array<[keyof TSurveyQuestionTypeEnum | string, any, any]> = [
       ["submitted", { op: "submitted" }, { path: ["qText"], not: Prisma.DbNull }],
       ["filledOut", { op: "filledOut" }, { path: ["qText"], not: [] }],
       ["skipped", { op: "skipped" }, "OR"],
@@ -287,25 +295,18 @@ describe("Response Utils", () => {
       const matrixSurvey: Partial<TSurvey> = {
         id: "s3",
         name: "MatrixSurvey",
-        blocks: [
+        questions: [
           {
-            id: "block1",
+            id: "qM",
-            name: "Block 1",
+            type: TSurveyQuestionTypeEnum.Matrix,
-            elements: [
+            headline: { default: "Matrix" },
-              {
+            required: false,
-                id: "qM",
+            rows: [{ default: "R1" }],
-                type: TSurveyElementTypeEnum.Matrix,
+            columns: [{ default: "C1" }],
-                headline: { default: "Matrix" },
+            shuffleOption: "none",
-                required: false,
+            isDraft: false,
-                rows: [{ id: "r1", label: { default: "R1" } }],
-                columns: [{ id: "c1", label: { default: "C1" } }],
-                shuffleOption: "none",
-                isDraft: false,
-              },
-            ],
           },
         ],
-        questions: [],
         type: "app",
         hiddenFields: { enabled: false, fieldIds: [] },
         createdAt: new Date(),
@@ -359,48 +360,34 @@ describe("Response Utils", () => {
     });
   });
 
-  // TODO: Fix this test after the survey editor poc is merged
   describe("extractSurveyDetails", () => {
     const mockSurvey: Partial<TSurvey> = {
       id: "survey1",
       name: "Test Survey",
-      blocks: [
+      questions: [
         {
-          id: "block1",
+          id: "q1",
-          name: "Block 1",
+          type: TSurveyQuestionTypeEnum.MultipleChoiceSingle,
-          elements: [
+          headline: { default: "Question 1" },
-            {
+          required: true,
-              id: "q1",
+          choices: [
-              type: TSurveyElementTypeEnum.MultipleChoiceSingle,
+            { id: "1", label: { default: "Option 1" } },
-              headline: { default: "Question 1" },
+            { id: "2", label: { default: "Option 2" } },
-              required: true,
-              choices: [
-                { id: "1", label: { default: "Option 1" } },
-                { id: "2", label: { default: "Option 2" } },
-              ],
-              shuffleOption: "none",
-              isDraft: false,
-            },
-            {
-              id: "q2",
-              type: TSurveyElementTypeEnum.Matrix,
-              headline: { default: "Matrix Question" },
-              required: true,
-              rows: [
-                { id: "r1", label: { default: "Row 1" } },
-                { id: "r2", label: { default: "Row 2" } },
-              ],
-              columns: [
-                { id: "c1", label: { default: "Column 1" } },
-                { id: "c2", label: { default: "Column 2" } },
-              ],
-              shuffleOption: "none",
-              isDraft: false,
-            },
           ],
+          shuffleOption: "none",
+          isDraft: false,
+        },
+        {
+          id: "q2",
+          type: TSurveyQuestionTypeEnum.Matrix,
+          headline: { default: "Matrix Question" },
+          required: true,
+          rows: [{ default: "Row 1" }, { default: "Row 2" }],
+          columns: [{ default: "Column 1" }, { default: "Column 2" }],
+          shuffleOption: "none",
+          isDraft: false,
         },
       ],
-      questions: [],
       type: "app",
       hiddenFields: { enabled: true, fieldIds: ["hidden1"] },
       createdAt: new Date(),
@@ -427,7 +414,7 @@ describe("Response Utils", () => {
     test("should extract survey details correctly", () => {
       const result = extractSurveyDetails(mockSurvey as TSurvey, mockResponses as TResponse[]);
       expect(result.metaDataFields).toContain("userAgent - browser");
-      expect(result.elements).toHaveLength(2); // 1 regular question + 2 matrix rows
+      expect(result.questions).toHaveLength(2); // 1 regular question + 2 matrix rows
       expect(result.hiddenFields).toContain("hidden1");
       expect(result.userAttributes).toContain("email");
     });
@@ -437,27 +424,20 @@ describe("Response Utils", () => {
     const mockSurvey: Partial<TSurvey> = {
       id: "survey1",
       name: "Test Survey",
-      blocks: [
+      questions: [
         {
-          id: "block1",
+          id: "q1",
-          name: "Block 1",
+          type: TSurveyQuestionTypeEnum.MultipleChoiceSingle,
-          elements: [
+          headline: { default: "Question 1" },
-            {
+          required: true,
-              id: "q1",
+          choices: [
-              type: TSurveyElementTypeEnum.MultipleChoiceSingle,
+            { id: "1", label: { default: "Option 1" } },
-              headline: { default: "Question 1" },
+            { id: "2", label: { default: "Option 2" } },
-              required: true,
-              choices: [
-                { id: "1", label: { default: "Option 1" } },
-                { id: "2", label: { default: "Option 2" } },
-              ],
-              shuffleOption: "none",
-              isDraft: false,
-            },
           ],
+          shuffleOption: "none",
+          isDraft: false,
         },
       ],
-      questions: [],
       type: "app",
       hiddenFields: { enabled: true, fieldIds: [] },
       createdAt: new Date(),
@@ -710,9 +690,9 @@ describe("Response Utils", () => {
 });
 
 describe("extractChoiceIdsFromResponse", () => {
-  const multipleChoiceMultiQuestion = {
+  const multipleChoiceMultiQuestion: TSurveyQuestion = {
     id: "multi-choice-id",
-    type: TSurveyElementTypeEnum.MultipleChoiceMulti as typeof TSurveyElementTypeEnum.MultipleChoiceMulti,
+    type: TSurveyQuestionTypeEnum.MultipleChoiceMulti,
     headline: { default: "Select multiple options" },
     required: false,
     choices: [
@@ -729,12 +709,11 @@ describe("extractChoiceIdsFromResponse", () => {
         label: { default: "Option 3", es: "Opción 3" },
       },
     ],
-    shuffleOption: "none" as const,
   };
 
-  const multipleChoiceSingleQuestion = {
+  const multipleChoiceSingleQuestion: TSurveyQuestion = {
     id: "single-choice-id",
-    type: TSurveyElementTypeEnum.MultipleChoiceSingle as typeof TSurveyElementTypeEnum.MultipleChoiceSingle,
+    type: TSurveyQuestionTypeEnum.MultipleChoiceSingle,
     headline: { default: "Select one option" },
     required: false,
     choices: [
@@ -747,15 +726,14 @@ describe("extractChoiceIdsFromResponse", () => {
         label: { default: "Choice B", fr: "Choix B" },
       },
     ],
-    shuffleOption: "none" as const,
   };
 
-  const textQuestion = {
+  const textQuestion: TSurveyOpenTextQuestion = {
     id: "text-id",
-    type: TSurveyElementTypeEnum.OpenText as typeof TSurveyElementTypeEnum.OpenText,
+    type: TSurveyQuestionTypeEnum.OpenText,
     headline: { default: "What do you think?" },
     required: false,
-    inputType: "text" as const,
+    inputType: "text",
     charLimit: { enabled: false, min: 0, max: 0 },
   };
 

apps/web/lib/response/utils.ts

@@ -10,49 +10,48 @@ import {
   TSurveyMetaFieldFilter,
 } from "@formbricks/types/responses";
 import {
-  TSurveyElement,
+  TSurvey,
-  TSurveyMultipleChoiceElement,
+  TSurveyMultipleChoiceQuestion,
-  TSurveyPictureSelectionElement,
+  TSurveyPictureSelectionQuestion,
-  TSurveyRankingElement,
+  TSurveyQuestion,
-} from "@formbricks/types/surveys/elements";
+  TSurveyRankingQuestion,
-import { TSurvey } from "@formbricks/types/surveys/types";
+} from "@formbricks/types/surveys/types";
 import { getTextContent } from "@formbricks/types/surveys/validation";
 import { getLocalizedValue } from "@/lib/i18n/utils";
 import { replaceHeadlineRecall } from "@/lib/utils/recall";
-import { getElementsFromBlocks } from "@/modules/survey/lib/client-utils";
 import { processResponseData } from "../responses";
 import { getTodaysDateTimeFormatted } from "../time";
 import { getFormattedDateTimeString } from "../utils/datetime";
 import { sanitizeString } from "../utils/strings";
 
 /**
- * Extracts choice IDs from response values for multiple choice elements
+ * Extracts choice IDs from response values for multiple choice questions
  * @param responseValue - The response value (string for single choice, array for multi choice)
- * @param element - The survey element containing choices
+ * @param question - The survey question containing choices
  * @param language - The language to match against (defaults to "default")
  * @returns Array of choice IDs
  */
 export const extractChoiceIdsFromResponse = (
   responseValue: TResponseDataValue,
-  element: TSurveyElement,
+  question: TSurveyQuestion,
   language: string = "default"
 ): string[] => {
+  // Type guard to ensure the question has choices
   if (
-    element.type !== "multipleChoiceMulti" &&
+    question.type !== "multipleChoiceMulti" &&
-    element.type !== "multipleChoiceSingle" &&
+    question.type !== "multipleChoiceSingle" &&
-    element.type !== "ranking" &&
+    question.type !== "ranking" &&
-    element.type !== "pictureSelection"
+    question.type !== "pictureSelection"
   ) {
     return [];
   }
-
+  const isPictureSelection = question.type === "pictureSelection";
-  const isPictureSelection = element.type === "pictureSelection";
 
   if (!responseValue) {
     return [];
   }
 
-  // For picture selection elements, the response value is already choice ID(s)
+  // For picture selection questions, the response value is already choice ID(s)
   if (isPictureSelection) {
     if (Array.isArray(responseValue)) {
       // Multi-selection: array of choice IDs
@@ -68,7 +67,7 @@ export const extractChoiceIdsFromResponse = (
 
   // Helper function to find choice by label - eliminates duplication
   const findChoiceByLabel = (choiceLabel: string): string | null => {
-    const targetChoice = element.choices.find((c) => {
+    const targetChoice = question.choices.find((c) => {
       // Try exact language match first
       if (c.label[defaultLanguage] === choiceLabel) {
         return true;
@@ -93,13 +92,13 @@ export const extractChoiceIdsFromResponse = (
 
 export const getChoiceIdByValue = (
   value: string,
-  element: TSurveyMultipleChoiceElement | TSurveyRankingElement | TSurveyPictureSelectionElement
+  question: TSurveyMultipleChoiceQuestion | TSurveyRankingQuestion | TSurveyPictureSelectionQuestion
 ) => {
-  if (element.type === "pictureSelection") {
+  if (question.type === "pictureSelection") {
-    return element.choices.find((choice) => choice.imageUrl === value)?.id ?? "other";
+    return question.choices.find((choice) => choice.imageUrl === value)?.id ?? "other";
   }
 
-  return element.choices.find((choice) => choice.label.default === value)?.id ?? "other";
+  return question.choices.find((choice) => choice.label.default === value)?.id ?? "other";
 };
 
 export const calculateTtcTotal = (ttc: TResponseTtc) => {
@@ -325,12 +324,12 @@ export const buildWhereClause = (survey: TSurvey, filterCriteria?: TResponseFilt
     });
   }
 
+  // For Questions Data
   if (filterCriteria?.data) {
     const data: Prisma.ResponseWhereInput[] = [];
 
     Object.entries(filterCriteria.data).forEach(([key, val]) => {
-      const elements = getElementsFromBlocks(survey.blocks);
+      const question = survey.questions.find((question) => question.id === key);
-      const element = elements.find((element) => element.id === key);
 
       switch (val.op) {
         case "submitted":
@@ -364,7 +363,7 @@ export const buildWhereClause = (survey: TSurvey, filterCriteria?: TResponseFilt
                   equals: "",
                 },
               },
-              // For address element
+              // For address question
               {
                 data: {
                   path: [key],
@@ -443,29 +442,29 @@ export const buildWhereClause = (survey: TSurvey, filterCriteria?: TResponseFilt
           });
           break;
         case "includesOne":
-          // * If the element includes an 'other' choice and the user has selected it:
+          // * If the question includes an 'other' choice and the user has selected it:
-          // *   - `predefinedLabels`: Collects labels from the element's choices that aren't selected by the user.
+          // *   - `predefinedLabels`: Collects labels from the question's choices that aren't selected by the user.
           // *   - `subsets`: Generates all possible non-empty permutations of subsets of these predefined labels.
           // *
-          // * Depending on the element type (multiple or single choice), the filter is constructed:
+          // * Depending on the question type (multiple or single choice), the filter is constructed:
           // *   - For "multipleChoiceMulti": Filters out any combinations of choices that match the subsets of predefined labels.
           // *   - For "multipleChoiceSingle": Filters out any single predefined labels that match the user's selection.
           const values: string[] = val.value.map((v) => v.toString());
           const otherChoice =
-            element && (element.type === "multipleChoiceMulti" || element.type === "multipleChoiceSingle")
+            question && (question.type === "multipleChoiceMulti" || question.type === "multipleChoiceSingle")
-              ? element.choices.find((choice) => choice.id === "other")
+              ? question.choices.find((choice) => choice.id === "other")
               : null;
 
           if (
-            element &&
+            question &&
-            (element.type === "multipleChoiceMulti" || element.type === "multipleChoiceSingle") &&
+            (question.type === "multipleChoiceMulti" || question.type === "multipleChoiceSingle") &&
-            element.choices.map((choice) => choice.id).includes("other") &&
+            question.choices.map((choice) => choice.id).includes("other") &&
             otherChoice &&
             values.includes(otherChoice.label.default)
           ) {
             const predefinedLabels: string[] = [];
 
-            element.choices.forEach((choice) => {
+            question.choices.forEach((choice) => {
               Object.values(choice.label).forEach((label) => {
                 if (!values.includes(label)) {
                   predefinedLabels.push(label);
@@ -474,7 +473,7 @@ export const buildWhereClause = (survey: TSurvey, filterCriteria?: TResponseFilt
             });
 
             const subsets = generateAllPermutationsOfSubsets(predefinedLabels);
-            if (element.type === "multipleChoiceMulti") {
+            if (question.type === "multipleChoiceMulti") {
               const subsetConditions = subsets.map((subset) => ({
                 data: { path: [key], equals: subset },
               }));
@@ -664,18 +663,16 @@ export const extractSurveyDetails = (survey: TSurvey, responses: TResponse[]) =>
   const metaDataFields = responses.length > 0 ? extracMetadataKeys(responses[0].meta) : [];
   const modifiedSurvey = replaceHeadlineRecall(survey, "default");
 
-  const modifiedElements = getElementsFromBlocks(modifiedSurvey.blocks);
+  const questions = modifiedSurvey.questions.map((question, idx) => {
-
+    const headline = getTextContent(getLocalizedValue(question.headline, "default")) ?? question.id;
-  const elements = modifiedElements.map((element, idx) => {
+    if (question.type === "matrix") {
-    const headline = getTextContent(getLocalizedValue(element.headline, "default")) ?? element.id;
+      return question.rows.map((row) => {
-    if (element.type === "matrix") {
-      return element.rows.map((row) => {
         return `${idx + 1}. ${headline} - ${getTextContent(getLocalizedValue(row.label, "default"))}`;
       });
     } else if (
-      element.type === "multipleChoiceMulti" ||
+      question.type === "multipleChoiceMulti" ||
-      element.type === "multipleChoiceSingle" ||
+      question.type === "multipleChoiceSingle" ||
-      element.type === "ranking"
+      question.type === "ranking"
     ) {
       return [`${idx + 1}. ${headline}`, `${idx + 1}. ${headline} - Option ID`];
     } else {
@@ -690,13 +687,13 @@ export const extractSurveyDetails = (survey: TSurvey, responses: TResponse[]) =>
       : [];
   const variables = survey.variables?.map((variable) => variable.name) || [];
 
-  return { metaDataFields, elements, hiddenFields, variables, userAttributes };
+  return { metaDataFields, questions, hiddenFields, variables, userAttributes };
 };
 
 export const getResponsesJson = (
   survey: TSurvey,
   responses: TResponseWithQuotas[],
-  elementsHeadlines: string[][],
+  questionsHeadlines: string[][],
   userAttributes: string[],
   hiddenFields: string[],
   isQuotasAllowed: boolean = false
@@ -732,17 +729,16 @@ export const getResponsesJson = (
     });
 
     // survey response data
-    elementsHeadlines.forEach((elementHeadline) => {
+    questionsHeadlines.forEach((questionHeadline) => {
-      const elementIndex = parseInt(elementHeadline[0]) - 1;
+      const questionIndex = parseInt(questionHeadline[0]) - 1;
-      const elements = getElementsFromBlocks(survey.blocks);
+      const question = survey?.questions[questionIndex];
-      const element = elements[elementIndex];
+      const answer = response.data[question.id];
-      const answer = response.data[element.id];
 
-      if (element.type === "matrix") {
+      if (question.type === "matrix") {
-        // For matrix elements, we need to handle each row separately
+        // For matrix questions, we need to handle each row separately
-        elementHeadline.forEach((headline, index) => {
+        questionHeadline.forEach((headline, index) => {
           if (answer) {
-            const row = element.rows[index];
+            const row = question.rows[index];
             if (row && row.label.default && answer[row.label.default] !== undefined) {
               jsonData[idx][headline] = answer[row.label.default];
             } else {
@@ -751,20 +747,20 @@ export const getResponsesJson = (
           }
         });
       } else if (
-        element.type === "multipleChoiceMulti" ||
+        question.type === "multipleChoiceMulti" ||
-        element.type === "multipleChoiceSingle" ||
+        question.type === "multipleChoiceSingle" ||
-        element.type === "ranking"
+        question.type === "ranking"
       ) {
         // Set the main response value
-        jsonData[idx][elementHeadline[0]] = processResponseData(answer);
+        jsonData[idx][questionHeadline[0]] = processResponseData(answer);
 
         // Set the option IDs using the reusable function
-        if (elementHeadline[1]) {
+        if (questionHeadline[1]) {
-          const choiceIds = extractChoiceIdsFromResponse(answer, element, response.language || "default");
+          const choiceIds = extractChoiceIdsFromResponse(answer, question, response.language || "default");
-          jsonData[idx][elementHeadline[1]] = choiceIds.join(", ");
+          jsonData[idx][questionHeadline[1]] = choiceIds.join(", ");
         }
       } else {
-        jsonData[idx][elementHeadline[0]] = processResponseData(answer);
+        jsonData[idx][questionHeadline[0]] = processResponseData(answer);
       }
     });
 

apps/web/lib/responses.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test, vi } from "vitest";
-import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+import { TSurveyQuestionType, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
-import { convertResponseValue, getElementResponseMapping, processResponseData } from "./responses";
+import { convertResponseValue, getQuestionResponseMapping, processResponseData } from "./responses";
 
 // Mock the recall and i18n utils
 vi.mock("@/lib/utils/recall", () => ({
@@ -63,7 +63,7 @@ describe("Response Processing", () => {
   describe("convertResponseValue", () => {
     const mockOpenTextQuestion = {
       id: "q1",
-      type: TSurveyElementTypeEnum.OpenText as const,
+      type: TSurveyQuestionTypeEnum.OpenText as const,
       headline: { default: "Test Question" },
       required: true,
       inputType: "text" as const,
@@ -73,7 +73,7 @@ describe("Response Processing", () => {
 
     const mockRankingQuestion = {
       id: "q1",
-      type: TSurveyElementTypeEnum.Ranking as const,
+      type: TSurveyQuestionTypeEnum.Ranking as const,
       headline: { default: "Test Question" },
       required: true,
       choices: [
@@ -85,7 +85,7 @@ describe("Response Processing", () => {
 
     const mockFileUploadQuestion = {
       id: "q1",
-      type: TSurveyElementTypeEnum.FileUpload as const,
+      type: TSurveyQuestionTypeEnum.FileUpload as const,
       headline: { default: "Test Question" },
       required: true,
       allowMultipleFiles: true,
@@ -93,7 +93,7 @@ describe("Response Processing", () => {
 
     const mockPictureSelectionQuestion = {
       id: "q1",
-      type: TSurveyElementTypeEnum.PictureSelection as const,
+      type: TSurveyQuestionTypeEnum.PictureSelection as const,
       headline: { default: "Test Question" },
       required: true,
       allowMulti: false,
@@ -184,36 +184,28 @@ describe("Response Processing", () => {
       name: "Test Survey",
       environmentId: "env1",
       createdBy: null,
-      blocks: [
+      questions: [
         {
-          id: "block1",
+          id: "q1",
-          name: "Block 1",
+          type: TSurveyQuestionTypeEnum.OpenText as const,
-          elements: [
+          headline: { default: "Question 1" },
-            {
+          required: true,
-              id: "q1",
+          inputType: "text" as const,
-              type: TSurveyElementTypeEnum.OpenText as const,
+          longAnswer: false,
-              headline: { default: "Question 1" },
+          charLimit: { enabled: false },
-              required: true,
+        },
-              inputType: "text" as const,
+        {
-              longAnswer: false,
+          id: "q2",
-              charLimit: { enabled: false },
+          type: TSurveyQuestionTypeEnum.MultipleChoiceMulti as const,
-            },
+          headline: { default: "Question 2" },
-            {
+          required: true,
-              id: "q2",
+          choices: [
-              type: TSurveyElementTypeEnum.MultipleChoiceMulti as const,
+            { id: "1", label: { default: "Option 1" } },
-              headline: { default: "Question 2" },
+            { id: "2", label: { default: "Option 2" } },
-              required: true,
-              choices: [
-                { id: "1", label: { default: "Option 1" } },
-                { id: "2", label: { default: "Option 2" } },
-              ],
-              shuffleOption: "none" as const,
-              buttonLabel: { default: "Next" },
-            },
           ],
+          shuffleOption: "none" as const,
         },
       ],
-      questions: [],
       hiddenFields: {
         enabled: false,
         fieldIds: [],
@@ -263,7 +255,6 @@ describe("Response Processing", () => {
         enabled: false,
         isEncrypted: false,
       },
-      metadata: {},
     };
 
     const mockResponse = {
@@ -295,17 +286,17 @@ describe("Response Processing", () => {
     };
 
     test("should map questions to responses correctly", () => {
-      const mapping = getElementResponseMapping(mockSurvey, mockResponse);
+      const mapping = getQuestionResponseMapping(mockSurvey, mockResponse);
       expect(mapping).toHaveLength(2);
       expect(mapping[0]).toEqual({
-        element: "Question 1",
+        question: "Question 1",
         response: "Answer 1",
-        type: TSurveyElementTypeEnum.OpenText,
+        type: TSurveyQuestionTypeEnum.OpenText,
       });
       expect(mapping[1]).toEqual({
-        element: "Question 2",
+        question: "Question 2",
         response: "Option 1; Option 2",
-        type: TSurveyElementTypeEnum.MultipleChoiceMulti,
+        type: TSurveyQuestionTypeEnum.MultipleChoiceMulti,
       });
     });
 
@@ -334,7 +325,7 @@ describe("Response Processing", () => {
         contactAttributes: {},
         singleUseId: null,
       };
-      const mapping = getElementResponseMapping(mockSurvey, response);
+      const mapping = getQuestionResponseMapping(mockSurvey, response);
       expect(mapping).toHaveLength(2);
       expect(mapping[0].response).toBe("");
       expect(mapping[1].response).toBe("");
@@ -343,24 +334,17 @@ describe("Response Processing", () => {
     test("should handle different language", () => {
       const survey = {
         ...mockSurvey,
-        blocks: [
+        questions: [
           {
-            id: "block1",
+            id: "q1",
-            name: "Block 1",
+            type: TSurveyQuestionTypeEnum.OpenText as const,
-            elements: [
+            headline: { default: "Question 1", en: "Question 1 EN" },
-              {
+            required: true,
-                id: "q1",
+            inputType: "text" as const,
-                type: TSurveyElementTypeEnum.OpenText as const,
+            longAnswer: false,
-                headline: { default: "Question 1", en: "Question 1 EN" },
+            charLimit: { enabled: false },
-                required: true,
-                inputType: "text" as const,
-                longAnswer: false,
-                charLimit: { enabled: false },
-              },
-            ],
           },
         ],
-        questions: [],
         languages: [
           {
             language: {
@@ -412,8 +396,8 @@ describe("Response Processing", () => {
         contactAttributes: {},
         singleUseId: null,
       };
-      const mapping = getElementResponseMapping(survey, response);
+      const mapping = getQuestionResponseMapping(survey, response);
-      expect(mapping[0].element).toBe("Question 1 EN");
+      expect(mapping[0].question).toBe("Question 1 EN");
     });
 
     test("should handle null response language", () => {
@@ -441,9 +425,9 @@ describe("Response Processing", () => {
         contactAttributes: {},
         singleUseId: null,
       };
-      const mapping = getElementResponseMapping(mockSurvey, response);
+      const mapping = getQuestionResponseMapping(mockSurvey, response);
       expect(mapping).toHaveLength(2);
-      expect(mapping[0].element).toBe("Question 1");
+      expect(mapping[0].question).toBe("Question 1");
     });
 
     test("should handle undefined response language", () => {
@@ -471,9 +455,9 @@ describe("Response Processing", () => {
         contactAttributes: {},
         singleUseId: null,
       };
-      const mapping = getElementResponseMapping(mockSurvey, response);
+      const mapping = getQuestionResponseMapping(mockSurvey, response);
       expect(mapping).toHaveLength(2);
-      expect(mapping[0].element).toBe("Question 1");
+      expect(mapping[0].question).toBe("Question 1");
     });
 
     test("should handle empty survey languages", () => {
@@ -505,9 +489,9 @@ describe("Response Processing", () => {
         contactAttributes: {},
         singleUseId: null,
       };
-      const mapping = getElementResponseMapping(survey, response);
+      const mapping = getQuestionResponseMapping(survey, response);
       expect(mapping).toHaveLength(2);
-      expect(mapping[0].element).toBe("Question 1"); // Should fallback to default
+      expect(mapping[0].question).toBe("Question 1"); // Should fallback to default
     });
   });
 });

apps/web/lib/responses.ts

@@ -1,17 +1,15 @@
 import { TResponse, TResponseDataValue } from "@formbricks/types/responses";
-import { TSurveyElement, TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+import { TSurvey, TSurveyQuestion, TSurveyQuestionType } from "@formbricks/types/surveys/types";
-import { TSurvey } from "@formbricks/types/surveys/types";
 import { getTextContent } from "@formbricks/types/surveys/validation";
 import { parseRecallInfo } from "@/lib/utils/recall";
-import { getElementsFromBlocks } from "@/modules/survey/lib/client-utils";
 import { getLanguageCode, getLocalizedValue } from "./i18n/utils";
 
 // function to convert response value of type string | number | string[] or Record<string, string> to string | string[]
 export const convertResponseValue = (
   answer: TResponseDataValue,
-  element: TSurveyElement
+  question: TSurveyQuestion
 ): string | string[] => {
-  switch (element.type) {
+  switch (question.type) {
     case "ranking":
     case "fileUpload":
       if (typeof answer === "string") {
@@ -20,11 +18,11 @@ export const convertResponseValue = (
 
     case "pictureSelection":
       if (typeof answer === "string") {
-        const imageUrl = element.choices.find((choice) => choice.id === answer)?.imageUrl;
+        const imageUrl = question.choices.find((choice) => choice.id === answer)?.imageUrl;
         return imageUrl ? [imageUrl] : [];
       } else if (Array.isArray(answer)) {
         return answer
-          .map((answerId) => element.choices.find((choice) => choice.id === answerId)?.imageUrl)
+          .map((answerId) => question.choices.find((choice) => choice.id === answerId)?.imageUrl)
           .filter((url): url is string => url !== undefined);
       } else return [];
 
@@ -33,32 +31,33 @@ export const convertResponseValue = (
   }
 };
 
-export const getElementResponseMapping = (
+export const getQuestionResponseMapping = (
   survey: TSurvey,
   response: TResponse
-): { element: string; response: string | string[]; type: TSurveyElementTypeEnum }[] => {
+): { question: string; response: string | string[]; type: TSurveyQuestionType }[] => {
-  const elementResponseMapping: {
+  const questionResponseMapping: {
-    element: string;
+    question: string;
     response: string | string[];
-    type: TSurveyElementTypeEnum;
+    type: TSurveyQuestionType;
   }[] = [];
   const responseLanguageCode = getLanguageCode(survey.languages, response.language);
 
-  const elements = getElementsFromBlocks(survey.blocks);
+  for (const question of survey.questions) {
+    const answer = response.data[question.id];
 
-  for (const element of elements) {
+    questionResponseMapping.push({
-    const answer = response.data[element.id];
+      question: getTextContent(
-
+        parseRecallInfo(
-    elementResponseMapping.push({
+          getLocalizedValue(question.headline, responseLanguageCode ?? "default"),
-      element: getTextContent(
+          response.data
-        parseRecallInfo(getLocalizedValue(element.headline, responseLanguageCode ?? "default"), response.data)
+        )
       ),
-      response: convertResponseValue(answer, element),
+      response: convertResponseValue(answer, question),
-      type: element.type,
+      type: question.type,
     });
   }
 
-  return elementResponseMapping;
+  return questionResponseMapping;
 };
 
 export const processResponseData = (responseData: TResponseDataValue): string => {