feat: question delete dialog (#7144)

Co-authored-by: Johannes <johannes@formbricks.com>

.cursor/commands/create-question.md

@@ -0,0 +1,352 @@
+# Create New Question Element
+
+Use this command to scaffold a new question element component in `packages/survey-ui/src/elements/`.
+
+## Usage
+
+When creating a new question type (e.g., `single-select`, `rating`, `nps`), follow these steps:
+
+1. **Create the component file** `{question-type}.tsx` with this structure:
+
+```typescript
+import * as React from "react";
+import { ElementHeader } from "../components/element-header";
+import { useTextDirection } from "../hooks/use-text-direction";
+import { cn } from "../lib/utils";
+
+interface {QuestionType}Props {
+    /** Unique identifier for the element container */
+    elementId: string;
+    /** The main question or prompt text displayed as the headline */
+    headline: string;
+    /** Optional descriptive text displayed below the headline */
+    description?: string;
+    /** Unique identifier for the input/control group */
+    inputId: string;
+    /** Current value */
+    value?: {ValueType};
+    /** Callback function called when the value changes */
+    onChange: (value: {ValueType}) => void;
+    /** Whether the field is required (shows asterisk indicator) */
+    required?: boolean;
+    /** Error message to display */
+    errorMessage?: string;
+    /** Text direction: 'ltr' (left-to-right), 'rtl' (right-to-left), or 'auto' (auto-detect from content) */
+    dir?: "ltr" | "rtl" | "auto";
+    /** Whether the controls are disabled */
+    disabled?: boolean;
+    // Add question-specific props here
+}
+
+function {QuestionType}({
+    elementId,
+    headline,
+    description,
+    inputId,
+    value,
+    onChange,
+    required = false,
+    errorMessage,
+    dir = "auto",
+    disabled = false,
+    // ... question-specific props
+}: {QuestionType}Props): React.JSX.Element {
+    // Ensure value is always the correct type (handle undefined/null)
+    const currentValue = value ?? {defaultValue};
+    
+    // Detect text direction from content
+    const detectedDir = useTextDirection({
+        dir,
+        textContent: [headline, description ?? "", /* add other text content from question */],
+    });
+
+    return (
+        <div className="w-full space-y-4" id={elementId} dir={detectedDir}>
+            {/* Headline */}
+            <ElementHeader 
+                headline={headline} 
+                description={description} 
+                required={required} 
+                htmlFor={inputId} 
+            />
+
+            {/* Question-specific controls */}
+            {/* TODO: Add your question-specific UI here */}
+
+            {/* Error message */}
+            {errorMessage && (
+                <div className="text-destructive flex items-center gap-1 text-sm" dir={detectedDir}>
+                    <span>{errorMessage}</span>
+                </div>
+            )}
+        </div>
+    );
+}
+
+export { {QuestionType} };
+export type { {QuestionType}Props };
+```
+
+2. **Create the Storybook file** `{question-type}.stories.tsx`:
+
+```typescript
+import type { Decorator, Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { {QuestionType}, type {QuestionType}Props } from "./{question-type}";
+
+// Styling options for the StylingPlayground story
+interface StylingOptions {
+    // Question styling
+    questionHeadlineFontFamily: string;
+    questionHeadlineFontSize: string;
+    questionHeadlineFontWeight: string;
+    questionHeadlineColor: string;
+    questionDescriptionFontFamily: string;
+    questionDescriptionFontWeight: string;
+    questionDescriptionFontSize: string;
+    questionDescriptionColor: string;
+    // Add component-specific styling options here
+}
+
+type StoryProps = {QuestionType}Props & Partial<StylingOptions>;
+
+const meta: Meta<StoryProps> = {
+    title: "UI-package/Elements/{QuestionType}",
+    component: {QuestionType},
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: "A complete {question type} question element...",
+            },
+        },
+    },
+    tags: ["autodocs"],
+    argTypes: {
+        headline: {
+            control: "text",
+            description: "The main question text",
+            table: { category: "Content" },
+        },
+        description: {
+            control: "text",
+            description: "Optional description or subheader text",
+            table: { category: "Content" },
+        },
+        value: {
+            control: "object",
+            description: "Current value",
+            table: { category: "State" },
+        },
+        required: {
+            control: "boolean",
+            description: "Whether the field is required",
+            table: { category: "Validation" },
+        },
+        errorMessage: {
+            control: "text",
+            description: "Error message to display",
+            table: { category: "Validation" },
+        },
+        dir: {
+            control: { type: "select" },
+            options: ["ltr", "rtl", "auto"],
+            description: "Text direction for RTL support",
+            table: { category: "Layout" },
+        },
+        disabled: {
+            control: "boolean",
+            description: "Whether the controls are disabled",
+            table: { category: "State" },
+        },
+        onChange: {
+            action: "changed",
+            table: { category: "Events" },
+        },
+        // Add question-specific argTypes here
+    },
+};
+
+export default meta;
+type Story = StoryObj<StoryProps>;
+
+// Decorator to apply CSS variables from story args
+const withCSSVariables: Decorator<StoryProps> = (Story, context) => {
+    const args = context.args as StoryProps;
+    const {
+        questionHeadlineFontFamily,
+        questionHeadlineFontSize,
+        questionHeadlineFontWeight,
+        questionHeadlineColor,
+        questionDescriptionFontFamily,
+        questionDescriptionFontSize,
+        questionDescriptionFontWeight,
+        questionDescriptionColor,
+        // Extract component-specific styling options
+    } = args;
+
+    const cssVarStyle: React.CSSProperties & Record<string, string | undefined> = {
+        "--fb-question-headline-font-family": questionHeadlineFontFamily,
+        "--fb-question-headline-font-size": questionHeadlineFontSize,
+        "--fb-question-headline-font-weight": questionHeadlineFontWeight,
+        "--fb-question-headline-color": questionHeadlineColor,
+        "--fb-question-description-font-family": questionDescriptionFontFamily,
+        "--fb-question-description-font-size": questionDescriptionFontSize,
+        "--fb-question-description-font-weight": questionDescriptionFontWeight,
+        "--fb-question-description-color": questionDescriptionColor,
+        // Add component-specific CSS variables
+    };
+
+    return (
+        <div style={cssVarStyle} className="w-[600px]">
+            <Story />
+        </div>
+    );
+};
+
+export const StylingPlayground: Story = {
+    args: {
+        headline: "Example question?",
+        description: "Example description",
+        // Default styling values
+        questionHeadlineFontFamily: "system-ui, sans-serif",
+        questionHeadlineFontSize: "1.125rem",
+        questionHeadlineFontWeight: "600",
+        questionHeadlineColor: "#1e293b",
+        questionDescriptionFontFamily: "system-ui, sans-serif",
+        questionDescriptionFontSize: "0.875rem",
+        questionDescriptionFontWeight: "400",
+        questionDescriptionColor: "#64748b",
+        // Add component-specific default values
+    },
+    argTypes: {
+        // Question styling argTypes
+        questionHeadlineFontFamily: {
+            control: "text",
+            table: { category: "Question Styling" },
+        },
+        questionHeadlineFontSize: {
+            control: "text",
+            table: { category: "Question Styling" },
+        },
+        questionHeadlineFontWeight: {
+            control: "text",
+            table: { category: "Question Styling" },
+        },
+        questionHeadlineColor: {
+            control: "color",
+            table: { category: "Question Styling" },
+        },
+        questionDescriptionFontFamily: {
+            control: "text",
+            table: { category: "Question Styling" },
+        },
+        questionDescriptionFontSize: {
+            control: "text",
+            table: { category: "Question Styling" },
+        },
+        questionDescriptionFontWeight: {
+            control: "text",
+            table: { category: "Question Styling" },
+        },
+        questionDescriptionColor: {
+            control: "color",
+            table: { category: "Question Styling" },
+        },
+        // Add component-specific argTypes
+    },
+    decorators: [withCSSVariables],
+};
+
+export const Default: Story = {
+    args: {
+        headline: "Example question?",
+        // Add default props
+    },
+};
+
+export const WithDescription: Story = {
+    args: {
+        headline: "Example question?",
+        description: "Example description text",
+    },
+};
+
+export const Required: Story = {
+    args: {
+        headline: "Example question?",
+        required: true,
+    },
+};
+
+export const WithError: Story = {
+    args: {
+        headline: "Example question?",
+        errorMessage: "This field is required",
+        required: true,
+    },
+};
+
+export const Disabled: Story = {
+    args: {
+        headline: "Example question?",
+        disabled: true,
+    },
+};
+
+export const RTL: Story = {
+    args: {
+        headline: "مثال على السؤال؟",
+        description: "مثال على الوصف",
+        // Add RTL-specific props
+    },
+};
+```
+
+3. **Add CSS variables** to `packages/survey-ui/src/styles/globals.css` if needed:
+
+```css
+/* Component-specific CSS variables */
+--fb-{component}-{property}: {default-value};
+```
+
+4. **Export from** `packages/survey-ui/src/index.ts`:
+
+```typescript
+export { {QuestionType}, type {QuestionType}Props } from "./elements/{question-type}";
+```
+
+## Key Requirements
+
+- ✅ Always use `ElementHeader` component for headline/description
+- ✅ Always use `useTextDirection` hook for RTL support
+- ✅ Always handle undefined/null values safely (e.g., `Array.isArray(value) ? value : []`)
+- ✅ Always include error message display if applicable
+- ✅ Always support disabled state if applicable
+- ✅ Always add JSDoc comments to props interface
+- ✅ Always create Storybook stories with styling playground
+- ✅ Always export types from component file
+- ✅ Always add to index.ts exports
+
+## Examples
+
+- `open-text.tsx` - Text input/textarea question (string value)
+- `multi-select.tsx` - Multiple checkbox selection (string[] value)
+
+## Checklist
+
+When creating a new question element, verify:
+
+- [ ] Component file created with proper structure
+- [ ] Props interface with JSDoc comments for all props
+- [ ] Uses `ElementHeader` component (don't duplicate header logic)
+- [ ] Uses `useTextDirection` hook for RTL support
+- [ ] Handles undefined/null values safely
+- [ ] Storybook file created with styling playground
+- [ ] Includes common stories: Default, WithDescription, Required, WithError, Disabled, RTL
+- [ ] CSS variables added to `globals.css` if component needs custom styling
+- [ ] Exported from `index.ts` with types
+- [ ] TypeScript types properly exported
+- [ ] Error message display included if applicable
+- [ ] Disabled state supported if applicable
+

.cursor/rules/build-and-deployment.mdc

@@ -1,61 +0,0 @@
----
-description: 
-globs: 
-alwaysApply: false
----
-# Build & Deployment Best Practices
-
-## Build Process
-
-### Running Builds
-- Use `pnpm build` from project root for full build
-- Monitor for React hooks warnings and fix them immediately
-- Ensure all TypeScript errors are resolved before deployment
-
-### Common Build Issues & Fixes
-
-#### React Hooks Warnings
-- Capture ref values in variables within useEffect cleanup
-- Avoid accessing `.current` directly in cleanup functions
-- Pattern for fixing ref cleanup warnings:
-```typescript
-useEffect(() => {
-  const currentRef = myRef.current;
-  return () => {
-    if (currentRef) {
-      currentRef.cleanup();
-    }
-  };
-}, []);
-```
-
-#### Test Failures During Build
-- Ensure all test mocks include required constants like `SESSION_MAX_AGE`
-- Mock Next.js navigation hooks properly: `useParams`, `useRouter`, `useSearchParams`
-- Remove unused imports and constants from test files
-- Use literal values instead of imported constants when the constant isn't actually needed
-
-### Test Execution
-- Run `pnpm test` to execute all tests
-- Use `pnpm test -- --run filename.test.tsx` for specific test files
-- Fix test failures before merging code
-- Ensure 100% test coverage for new components
-
-### Performance Monitoring
-- Monitor build times and optimize if necessary
-- Watch for memory usage during builds
-- Use proper caching strategies for faster rebuilds
-
-### Deployment Checklist
-1. All tests passing
-2. Build completes without warnings
-3. TypeScript compilation successful
-4. No linter errors
-5. Database migrations applied (if any)
-6. Environment variables configured
-
-### EKS Deployment Considerations
-- Ensure latest code is deployed to all pods
-- Monitor AWS RDS Performance Insights for database issues
-- Verify environment-specific configurations
-- Check pod health and resource usage

.cursor/rules/cache-optimization.mdc

@@ -1,415 +0,0 @@
----
-description: Caching rules for performance improvements
-globs: 
-alwaysApply: false
----
-# Cache Optimization Patterns for Formbricks
-
-## Cache Strategy Overview
-
-Formbricks uses a **hybrid caching approach** optimized for enterprise scale:
-
-- **Redis** for persistent cross-request caching  
-- **React `cache()`** for request-level deduplication
-- **NO Next.js `unstable_cache()`** - avoid for reliability
-
-## Key Files
-
-### Core Cache Infrastructure
-- [packages/cache/src/service.ts](mdc:packages/cache/src/service.ts) - Redis cache service
-- [packages/cache/src/client.ts](mdc:packages/cache/src/client.ts) - Cache client initialization and singleton management  
-- [apps/web/lib/cache/index.ts](mdc:apps/web/lib/cache/index.ts) - Cache service proxy for web app
-- [packages/cache/src/index.ts](mdc:packages/cache/src/index.ts) - Cache package exports and utilities
-
-### Environment State Caching (Critical Endpoint)
-- [apps/web/app/api/v1/client/[environmentId]/environment/route.ts](mdc:apps/web/app/api/v1/client/[environmentId]/environment/route.ts) - Main endpoint serving hundreds of thousands of SDK clients
-- [apps/web/app/api/v1/client/[environmentId]/environment/lib/data.ts](mdc:apps/web/app/api/v1/client/[environmentId]/environment/lib/data.ts) - Optimized data layer with caching
-
-## Enterprise-Grade Cache Key Patterns
-
-**Always use** the `createCacheKey` utilities from the cache package:
-
-```typescript
-// ✅ Correct patterns
-createCacheKey.environment.state(environmentId)     // "fb:env:abc123:state"
-createCacheKey.organization.billing(organizationId) // "fb:org:xyz789:billing"
-createCacheKey.license.status(organizationId)       // "fb:license:org123:status"
-createCacheKey.user.permissions(userId, orgId)      // "fb:user:456:org:123:permissions"
-
-// ❌ Never use flat keys - collision-prone
-"environment_abc123"
-"user_data_456"
-```
-
-## When to Use Each Cache Type
-
-### Use React `cache()` for Request Deduplication
-```typescript
-// ✅ Prevents multiple calls within same request
-export const getEnterpriseLicense = reactCache(async () => {
-  // Complex license validation logic
-});
-```
-
-### Use `cache.withCache()` for Simple Database Queries
-```typescript
-// ✅ Simple caching with automatic fallback (TTL in milliseconds)
-export const getActionClasses = (environmentId: string) => {
-  return cache.withCache(() => fetchActionClassesFromDB(environmentId), 
-    createCacheKey.environment.actionClasses(environmentId),
-    60 * 30 * 1000 // 30 minutes in milliseconds
-  );
-};
-```
-
-### Use Explicit Redis Cache for Complex Business Logic
-```typescript
-// ✅ Full control for high-stakes endpoints
-export const getEnvironmentState = async (environmentId: string) => {
-  const cached = await environmentStateCache.getEnvironmentState(environmentId);
-  if (cached) return cached;
-  
-  const fresh = await buildComplexState(environmentId);
-  await environmentStateCache.setEnvironmentState(environmentId, fresh);
-  return fresh;
-};
-```
-
-## Caching Decision Framework
-
-### When TO Add Caching
-
-```typescript
-// ✅ Expensive operations that benefit from caching
-- Database queries (>10ms typical)
-- External API calls (>50ms typical)  
-- Complex computations (>5ms)
-- File system operations
-- Heavy data transformations
-
-// Example: Database query with complex joins (TTL in milliseconds)
-export const getEnvironmentWithDetails = withCache(
-  async (environmentId: string) => {
-    return prisma.environment.findUnique({
-      where: { id: environmentId },
-      include: { /* complex joins */ }
-    });
-  },
-  { key: createCacheKey.environment.details(environmentId), ttl: 60 * 30 * 1000 } // 30 minutes
-)();
-```
-
-### When NOT to Add Caching
-
-```typescript
-// ❌ Don't cache these operations - minimal overhead
-- Simple property access (<0.1ms)
-- Basic transformations (<1ms)
-- Functions that just call already-cached functions
-- Pure computation without I/O
-
-// ❌ Bad example: Redundant caching
-const getCachedLicenseFeatures = withCache(
-  async () => {
-    const license = await getEnterpriseLicense(); // Already cached!
-    return license.active ? license.features : null; // Just property access
-  },
-  { key: "license-features", ttl: 1800 * 1000 } // 30 minutes in milliseconds
-);
-
-// ✅ Good example: Simple and efficient
-const getLicenseFeatures = async () => {
-  const license = await getEnterpriseLicense(); // Already cached
-  return license.active ? license.features : null; // 0.1ms overhead
-};
-```
-
-### Computational Overhead Analysis
-
-Before adding caching, analyze the overhead:
-
-```typescript
-// ✅ High overhead - CACHE IT
-- Database queries: ~10-100ms
-- External APIs: ~50-500ms  
-- File I/O: ~5-50ms
-- Complex algorithms: >5ms
-
-// ❌ Low overhead - DON'T CACHE
-- Property access: ~0.001ms
-- Simple lookups: ~0.1ms
-- Basic validation: ~1ms
-- Type checks: ~0.01ms
-
-// Example decision tree:
-const expensiveOperation = async () => {
-  return prisma.query(); // 50ms - CACHE IT
-};
-
-const cheapOperation = (data: any) => {
-  return data.property; // 0.001ms - DON'T CACHE
-};
-```
-
-### Avoid Cache Wrapper Anti-Pattern
-
-```typescript
-// ❌ Don't create wrapper functions just for caching
-const getCachedUserPermissions = withCache(
-  async (userId: string) => getUserPermissions(userId),
-  { key: createCacheKey.user.permissions(userId), ttl: 3600 * 1000 } // 1 hour in milliseconds
-);
-
-// ✅ Add caching directly to the original function
-export const getUserPermissions = withCache(
-  async (userId: string) => {
-    return prisma.user.findUnique({
-      where: { id: userId },
-      include: { permissions: true }
-    });
-  },
-  { key: createCacheKey.user.permissions(userId), ttl: 3600 * 1000 } // 1 hour in milliseconds
-);
-```
-
-## TTL Coordination Strategy
-
-### Multi-Layer Cache Coordination
-For endpoints serving client SDKs, coordinate TTLs across layers:
-
-```typescript
-// Client SDK cache (expiresAt) - longest TTL for fewer requests
-const CLIENT_TTL = 60;           // 1 minute (seconds for client)
-
-// Server Redis cache - shorter TTL ensures fresh data for clients  
-const SERVER_TTL = 60 * 1000;   // 1 minutes in milliseconds
-
-// HTTP cache headers (seconds)
-const BROWSER_TTL = 60;         // 1 minute (max-age)
-const CDN_TTL = 60;             // 1 minute (s-maxage)
-const CORS_TTL = 60 * 60;            // 1 hour (balanced approach)
-```
-
-### Standard TTL Guidelines (in milliseconds for cache-manager + Keyv)
-```typescript
-// Configuration data - rarely changes
-const CONFIG_TTL = 60 * 60 * 24 * 1000;     // 24 hours
-
-// User data - moderate frequency  
-const USER_TTL = 60 * 60 * 2 * 1000;        // 2 hours
-
-// Survey data - changes moderately
-const SURVEY_TTL = 60 * 15 * 1000;          // 15 minutes
-
-// Billing data - expensive to compute
-const BILLING_TTL = 60 * 30 * 1000;         // 30 minutes
-
-// Action classes - infrequent changes
-const ACTION_CLASS_TTL = 60 * 30 * 1000;    // 30 minutes
-```
-
-## High-Frequency Endpoint Optimization
-
-### Performance Patterns for High-Volume Endpoints
-
-```typescript
-// ✅ Optimized high-frequency endpoint pattern
-export const GET = async (request: NextRequest, props: { params: Promise<{ id: string }> }) => {
-  const params = await props.params;
-
-  try {
-    // Simple validation (avoid Zod for high-frequency)
-    if (!params.id || typeof params.id !== 'string') {
-      return responses.badRequestResponse("ID is required", undefined, true);
-    }
-
-    // Single optimized query with caching
-    const data = await getOptimizedData(params.id);
-
-    return responses.successResponse(
-      {
-        data,
-        expiresAt: new Date(Date.now() + CLIENT_TTL * 1000), // SDK cache duration
-      },
-      true,
-      "public, s-maxage=1800, max-age=3600, stale-while-revalidate=1800, stale-if-error=3600"
-    );
-  } catch (err) {
-    // Simplified error handling for performance
-    if (err instanceof ResourceNotFoundError) {
-      return responses.notFoundResponse(err.resourceType, err.resourceId);
-    }
-    logger.error({ error: err, url: request.url }, "Error in high-frequency endpoint");
-    return responses.internalServerErrorResponse(err.message, true);
-  }
-};
-```
-
-### Avoid These Performance Anti-Patterns
-
-```typescript
-// ❌ Avoid for high-frequency endpoints
-const inputValidation = ZodSchema.safeParse(input);     // Too slow
-const startTime = Date.now(); logger.debug(...);       // Logging overhead
-const { data, revalidateEnvironment } = await get();   // Complex return types
-```
-
-### CORS Optimization
-```typescript
-// ✅ Balanced CORS caching (not too aggressive)
-export const OPTIONS = async (): Promise<Response> => {
-  return responses.successResponse(
-    {},
-    true,
-    "public, s-maxage=3600, max-age=3600" // 1 hour balanced approach
-  );
-};
-```
-
-## Redis Cache Migration from Next.js
-
-### Avoid Legacy Next.js Patterns
-```typescript
-// ❌ Old Next.js unstable_cache pattern (avoid)
-const getCachedData = unstable_cache(
-  async (id) => fetchData(id),
-  ['cache-key'],
-  { tags: ['environment'], revalidate: 900 }
-);
-
-// ❌ Don't use revalidateEnvironment flags with Redis
-return { data, revalidateEnvironment: true }; // This gets cached incorrectly!
-
-// ✅ New Redis pattern with withCache (TTL in milliseconds)
-export const getCachedData = (id: string) => 
-  withCache(
-    () => fetchData(id),
-    {
-      key: createCacheKey.environment.data(id),
-      ttl: 60 * 15 * 1000, // 15 minutes in milliseconds
-    }
-  )();
-```
-
-### Remove Revalidation Logic
-When migrating from Next.js `unstable_cache`:
-- Remove `revalidateEnvironment` or similar flags
-- Remove tag-based invalidation logic  
-- Use TTL-based expiration instead
-- Handle one-time updates (like `appSetupCompleted`) directly in cache
-
-## Data Layer Optimization
-
-### Single Query Pattern
-```typescript
-// ✅ Optimize with single database query
-export const getOptimizedEnvironmentData = async (environmentId: string) => {
-  return prisma.environment.findUniqueOrThrow({
-    where: { id: environmentId },
-    include: {
-      project: { 
-        select: { id: true, recontactDays: true, /* ... */ }
-      },
-      organization: {
-        select: { id: true, billing: true }
-      },
-      surveys: {
-        where: { status: "inProgress" },
-        select: { id: true, name: true, /* ... */ }
-      },
-      actionClasses: {
-        select: { id: true, name: true, /* ... */ }
-      }
-    }
-  });
-};
-
-// ❌ Avoid multiple separate queries
-const environment = await getEnvironment(id);
-const organization = await getOrganization(environment.organizationId);  
-const surveys = await getSurveys(id);
-const actionClasses = await getActionClasses(id);
-```
-
-## Invalidation Best Practices
-
-**Always use explicit key-based invalidation:**
-
-```typescript
-// ✅ Clear and debuggable
-await invalidateCache(createCacheKey.environment.state(environmentId));
-await invalidateCache([
-  createCacheKey.environment.surveys(environmentId),
-  createCacheKey.environment.actionClasses(environmentId)
-]);
-
-// ❌ Avoid complex tag systems
-await invalidateByTags(["environment", "survey"]); // Don't do this
-```
-
-## Critical Performance Targets
-
-### High-Frequency Endpoint Goals
-- **Cache hit ratio**: >85%
-- **Response time P95**: <200ms  
-- **Database load reduction**: >60%
-- **HTTP cache duration**: 1hr browser, 30min Cloudflare
-- **SDK refresh interval**: 1 hour with 30min server cache
-
-### Performance Monitoring
-- Use **existing elastic cache analytics** for metrics
-- Log cache errors and warnings (not debug info)
-- Track database query reduction
-- Monitor response times for cached endpoints
-- **Avoid performance logging** in high-frequency endpoints
-
-## Error Handling Pattern
-
-Always provide fallback to fresh data on cache errors:
-
-```typescript
-try {
-  const cached = await cache.get(key);
-  if (cached) return cached;
-  
-  const fresh = await fetchFresh();
-  await cache.set(key, fresh, ttl); // ttl in milliseconds
-  return fresh;
-} catch (error) {
-  // ✅ Always fallback to fresh data
-  logger.warn("Cache error, fetching fresh", { key, error });
-  return fetchFresh();
-}
-```
-
-## Common Pitfalls to Avoid
-
-1. **Never use Next.js `unstable_cache()`** - unreliable in production
-2. **Don't use revalidation flags with Redis** - they get cached incorrectly
-3. **Avoid Zod validation** for simple parameters in high-frequency endpoints
-4. **Don't add performance logging** to high-frequency endpoints
-5. **Coordinate TTLs** between client and server caches
-6. **Don't over-engineer** with complex tag systems  
-7. **Avoid caching rapidly changing data** (real-time metrics)
-8. **Always validate cache keys** to prevent collisions
-9. **Don't add redundant caching layers** - analyze computational overhead first
-10. **Avoid cache wrapper functions** - add caching directly to expensive operations
-11. **Don't cache property access or simple transformations** - overhead is negligible
-12. **Analyze the full call chain** before adding caching to avoid double-caching
-13. **Remember TTL is in milliseconds** for cache-manager + Keyv stack (not seconds)
-
-## Monitoring Strategy
-
-- Use **existing elastic cache analytics** for metrics
-- Log cache errors and warnings  
-- Track database query reduction
-- Monitor response times for cached endpoints
-- **Don't add custom metrics** that duplicate existing monitoring
-
-## Important Notes
-
-### TTL Units
-- **cache-manager + Keyv**: TTL in **milliseconds**
-- **Direct Redis commands**: TTL in **seconds** (EXPIRE, SETEX) or **milliseconds** (PEXPIRE, PSETEX)
-- **HTTP cache headers**: TTL in **seconds** (max-age, s-maxage)
-- **Client SDK**: TTL in **seconds** (expiresAt calculation)

.cursor/rules/database-performance.mdc

@@ -1,41 +0,0 @@
----
-description: 
-globs: 
-alwaysApply: false
----
-# Database Performance & Prisma Best Practices
-
-## Critical Performance Rules
-
-### Response Count Queries
-- **NEVER** use `skip`/`offset` with `prisma.response.count()` - this causes expensive subqueries with OFFSET
-- Always use only `where` clauses for count operations: `prisma.response.count({ where: { ... } })`
-- For pagination, separate count queries from data queries
-- Reference: [apps/web/lib/response/service.ts](mdc:apps/web/lib/response/service.ts) line 654-686
-
-### Prisma Query Optimization
-- Use proper indexes defined in [packages/database/schema.prisma](mdc:packages/database/schema.prisma)
-- Leverage existing indexes: `@@index([surveyId, createdAt])`, `@@index([createdAt])`
-- Use cursor-based pagination for large datasets instead of offset-based
-- Cache frequently accessed data using React Cache and custom cache tags
-
-### Date Range Filtering
-- When filtering by `createdAt`, always use indexed queries
-- Combine with `surveyId` for optimal performance: `{ surveyId, createdAt: { gte: start, lt: end } }`
-- Avoid complex WHERE clauses that can't utilize indexes
-
-### Count vs Data Separation
-- Always separate count queries from data fetching queries
-- Use `Promise.all()` to run count and data queries in parallel
-- Example pattern from [apps/web/modules/api/v2/management/responses/lib/response.ts](mdc:apps/web/modules/api/v2/management/responses/lib/response.ts):
-```typescript
-const [responses, totalCount] = await Promise.all([
-  prisma.response.findMany(query),
-  prisma.response.count({ where: whereClause }),
-]);
-```
-
-### Monitoring & Debugging
-- Monitor AWS RDS Performance Insights for problematic queries
-- Look for queries with OFFSET in count operations - these indicate performance issues
-- Use proper error handling with `DatabaseError` for Prisma exceptions

.cursor/rules/database.mdc

@@ -1,105 +0,0 @@
----
-description: >
-globs: schema.prisma
-alwaysApply: false
----
-# 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.
-
-## Database Overview
-
-Formbricks uses PostgreSQL with Prisma ORM. The schema is designed for multi-tenancy with strong data isolation between organizations.
-
-### Core Hierarchy
-
-```
-Organization
-└── Project
-    └── Environment (production/development)
-        ├── Survey
-        ├── Contact
-        ├── ActionClass
-        └── Integration
-```
-
-## Schema Reference
-
-For the complete and up-to-date database schema, please refer to:
-
-- Main schema: `packages/database/schema.prisma`
-- JSON type definitions: `packages/database/json-types.ts`
-
-The schema.prisma file contains all model definitions, relationships, enums, and field types. The json-types.ts file contains TypeScript type definitions for JSON fields.
-
-## Data Access Patterns
-
-### Multi-tenancy
-
-- All data is scoped by Organization
-- Environment-level isolation for surveys and contacts
-- Project-level grouping for related surveys
-
-### Soft Deletion
-
-Some models use soft deletion patterns:
-
-- Check `isActive` fields where present
-- Use proper filtering in queries
-
-### Cascading Deletes
-
-Configured cascade relationships:
-
-- Organization deletion cascades to all child entities
-- Survey deletion removes responses, displays, triggers
-- Contact deletion removes attributes and responses
-
-## Common Query Patterns
-
-### Survey with Responses
-
-```typescript
-// Include response count and latest responses
-const survey = await prisma.survey.findUnique({
-  where: { id: surveyId },
-  include: {
-    responses: {
-      take: 10,
-      orderBy: { createdAt: "desc" },
-    },
-    _count: {
-      select: { responses: true },
-    },
-  },
-});
-```
-
-### Environment Scoping
-
-```typescript
-// Always scope by environment
-const surveys = await prisma.survey.findMany({
-  where: {
-    environmentId: environmentId,
-    // Additional filters...
-  },
-});
-```
-
-### Contact with Attributes
-
-```typescript
-const contact = await prisma.contact.findUnique({
-  where: { id: contactId },
-  include: {
-    attributes: {
-      include: {
-        attributeKey: true,
-      },
-    },
-  },
-});
-```
-
-This schema supports Formbricks' core functionality: multi-tenant survey management, user targeting, response collection, and analysis, all while maintaining strict data isolation and security.

.cursor/rules/documentations.mdc

@@ -1,28 +0,0 @@
----
-description: Guideline for writing end-user facing documentation in the apps/docs folder
-globs:
-alwaysApply: false
----
-
-Follow these instructions and guidelines when asked to write documentation in the apps/docs folder
-
-Follow this structure to write the title, describtion and pick a matching icon and insert it at the top of the MDX file:
-
----
-
-title: "FEATURE NAME"
-description: "1 concise sentence to describe WHEN the feature is being used and FOR WHAT BENEFIT."
-icon: "link"
-
----
-
-- Description: 1 concise sentence to describe WHEN the feature is being used and FOR WHAT BENEFIT.
-- Make ample use of the Mintlify components you can find here https://mintlify.com/docs/llms.txt - e.g. if docs describe consecutive steps, always use Mintlify Step component.
-- In all Headlines, only capitalize the current feature and nothing else, to Camel Case.
-- The page should never start with H1 headline, because it's already part of the template.
-- Tonality: Keep it concise and to the point. Avoid Jargon where possible.
-- If a feature is part of the Enterprise Edition, use this note:
-
-<Note>
-  FEATURE NAME is part of the [Enterprise Edition](/self-hosting/advanced/license) 
-</Note>

.cursor/rules/formbricks-architecture.mdc

@@ -1,332 +0,0 @@
----
-description: 
-globs: 
-alwaysApply: false
----
-# Formbricks Architecture & Patterns
-
-## Monorepo Structure
-
-### Apps Directory
-- `apps/web/` - Main Next.js web application
-- `packages/` - Shared packages and utilities
-
-### Key Directories in Web App
-```
-apps/web/
-├── app/                    # Next.js 13+ app directory
-│   ├── (app)/             # Main application routes
-│   ├── (auth)/            # Authentication routes
-│   ├── api/               # API routes
-├── components/            # Shared components
-├── lib/                   # Utility functions and services
-└── modules/               # Feature-specific modules
-```
-
-## Routing Patterns
-
-### App Router Structure
-The application uses Next.js 13+ app router with route groups:
-
-```
-(app)/environments/[environmentId]/
-├── surveys/[surveyId]/
-│   ├── (analysis)/        # Analysis views
-│   │   ├── responses/     # Response management
-│   │   ├── summary/       # Survey summary
-│   │   └── hooks/         # Analysis-specific hooks
-│   ├── edit/              # Survey editing
-│   └── settings/          # Survey settings
-```
-
-### Dynamic Routes
-- `[environmentId]` - Environment-specific routes
-- `[surveyId]` - Survey-specific routes
-
-## Service Layer Pattern
-
-### Service Organization
-Services are organized by domain in `apps/web/lib/`:
-
-```typescript
-// Example: Response service
-// apps/web/lib/response/service.ts
-export const getResponseCountAction = async ({
-  surveyId,
-  filterCriteria,
-}: {
-  surveyId: string;
-  filterCriteria: any;
-}) => {
-  // Service implementation
-};
-```
-
-### Action Pattern
-Server actions follow a consistent pattern:
-
-```typescript
-// Action wrapper for service calls
-export const getResponseCountAction = async (params) => {
-  try {
-    const result = await responseService.getCount(params);
-    return { data: result };
-  } catch (error) {
-    return { error: error.message };
-  }
-};
-```
-
-## Context Patterns
-
-### Provider Structure
-Context providers follow a consistent pattern:
-
-```typescript
-// Provider component
-export const ResponseFilterProvider = ({ children }: { children: React.ReactNode }) => {
-  const [selectedFilter, setSelectedFilter] = useState(defaultFilter);
-  
-  const value = {
-    selectedFilter,
-    setSelectedFilter,
-    // ... other state and methods
-  };
-
-  return (
-    <ResponseFilterContext.Provider value={value}>
-      {children}
-    </ResponseFilterContext.Provider>
-  );
-};
-
-// Hook for consuming context
-export const useResponseFilter = () => {
-  const context = useContext(ResponseFilterContext);
-  if (!context) {
-    throw new Error('useResponseFilter must be used within ResponseFilterProvider');
-  }
-  return context;
-};
-```
-
-### Context Composition
-Multiple contexts are often composed together:
-
-```typescript
-// Layout component with multiple providers
-export default function AnalysisLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <ResponseFilterProvider>
-      <ResponseCountProvider>
-        {children}
-      </ResponseCountProvider>
-    </ResponseFilterProvider>
-  );
-}
-```
-
-## Component Patterns
-
-### Page Components
-Page components are located in the app directory and follow this pattern:
-
-```typescript
-// apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/page.tsx
-export default function ResponsesPage() {
-  return (
-    <div>
-      <ResponsesTable />
-      <ResponsesPagination />
-    </div>
-  );
-}
-```
-
-### Component Organization
-- **Pages** - Route components in app directory
-- **Components** - Reusable UI components
-- **Modules** - Feature-specific components and logic
-
-### Shared Components
-Common components are in `apps/web/components/`:
-- UI components (buttons, inputs, modals)
-- Layout components (headers, sidebars)
-- Data display components (tables, charts)
-
-## Hook Patterns
-
-### Custom Hook Structure
-Custom hooks follow consistent patterns:
-
-```typescript
-export const useResponseCount = ({ 
-  survey, 
-  initialCount 
-}: {
-  survey: TSurvey;
-  initialCount?: number;
-}) => {
-  const [responseCount, setResponseCount] = useState(initialCount ?? 0);
-  const [isLoading, setIsLoading] = useState(false);
-  
-  // Hook logic...
-  
-  return {
-    responseCount,
-    isLoading,
-    refetch,
-  };
-};
-```
-
-### Hook Dependencies
-- Use context hooks for shared state
-- Implement proper cleanup with AbortController
-- Optimize dependency arrays to prevent unnecessary re-renders
-
-## Data Fetching Patterns
-
-### Server Actions
-The app uses Next.js server actions for data fetching:
-
-```typescript
-// Server action
-export async function getResponsesAction(params: GetResponsesParams) {
-  const responses = await getResponses(params);
-  return { data: responses };
-}
-
-// Client usage
-const { data } = await getResponsesAction(params);
-```
-
-### Error Handling
-Consistent error handling across the application:
-
-```typescript
-try {
-  const result = await apiCall();
-  return { data: result };
-} catch (error) {
-  console.error("Operation failed:", error);
-  return { error: error.message };
-}
-```
-
-## Type Safety
-
-### Type Organization
-Types are organized in packages:
-- `@formbricks/types` - Shared type definitions
-- Local types in component/hook files
-
-### Common Types
-```typescript
-import { TSurvey } from "@formbricks/types/surveys/types";
-import { TResponse } from "@formbricks/types/responses";
-import { TEnvironment } from "@formbricks/types/environment";
-```
-
-## State Management
-
-### Local State
-- Use `useState` for component-specific state
-- Use `useReducer` for complex state logic
-- Use refs for mutable values that don't trigger re-renders
-
-### Global State
-- React Context for feature-specific shared state
-- URL state for filters and pagination
-- Server state through server actions
-
-## Performance Considerations
-
-### Code Splitting
-- Dynamic imports for heavy components
-- Route-based code splitting with app router
-- Lazy loading for non-critical features
-
-### Caching Strategy
-- Server-side caching for database queries
-- Client-side caching with React Query (where applicable)
-- Static generation for public pages
-
-## Testing Strategy
-
-### Test Organization
-```
-component/
-├── Component.tsx
-├── Component.test.tsx
-└── hooks/
-    ├── useHook.ts
-    └── useHook.test.tsx
-```
-
-### Test Patterns
-- Unit tests for utilities and services
-- Integration tests for components with context
-- Hook tests with proper mocking
-
-## Build & Deployment
-
-### Build Process
-- TypeScript compilation
-- Next.js build optimization
-- Asset optimization and bundling
-
-### Environment Configuration
-- Environment-specific configurations
-- Feature flags for gradual rollouts
-- Database connection management
-
-## Security Patterns
-
-### Authentication
-- Session-based authentication
-- Environment-based access control
-- API route protection
-
-### Data Validation
-- Input validation on both client and server
-- Type-safe API contracts
-- Sanitization of user inputs
-
-## Monitoring & Observability
-
-### Error Tracking
-- Client-side error boundaries
-- Server-side error logging
-- Performance monitoring
-
-### Analytics
-- User interaction tracking
-- Performance metrics
-- Database query monitoring
-
-## Best Practices Summary
-
-### Code Organization
-- ✅ Follow the established directory structure
-- ✅ Use consistent naming conventions
-- ✅ Separate concerns (UI, logic, data)
-- ✅ Keep components focused and small
-
-### Performance
-- ✅ Implement proper loading states
-- ✅ Use AbortController for async operations
-- ✅ Optimize database queries
-- ✅ Implement proper caching strategies
-
-### Type Safety
-- ✅ Use TypeScript throughout
-- ✅ Define proper interfaces for props
-- ✅ Use type guards for runtime validation
-- ✅ Leverage shared type packages
-
-### Testing
-- ✅ Write tests for critical functionality
-- ✅ Mock external dependencies properly
-- ✅ Test error scenarios and edge cases
-- ✅ Maintain good test coverage

.cursor/rules/github-actions-security.mdc

@@ -1,232 +0,0 @@
----
-description: Security best practices and guidelines for writing GitHub Actions and workflows
-globs: .github/workflows/*.yml,.github/workflows/*.yaml,.github/actions/*/action.yml,.github/actions/*/action.yaml
----
-
-# GitHub Actions Security Best Practices
-
-## Required Security Measures
-
-### 1. Set Minimum GITHUB_TOKEN Permissions
-
-Always explicitly set the minimum required permissions for GITHUB_TOKEN:
-
-```yaml
-permissions:
-  contents: read
-  # Only add additional permissions if absolutely necessary:
-  # pull-requests: write  # for commenting on PRs
-  # issues: write         # for creating/updating issues
-  # checks: write         # for publishing check results
-```
-
-### 2. Add Harden-Runner as First Step
-
-For **every job** on `ubuntu-latest`, add Harden-Runner as the first step:
-
-```yaml
-- name: Harden the runner
-  uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
-  with:
-    egress-policy: audit # or 'block' for stricter security
-```
-
-### 3. Pin Actions to Full Commit SHA
-
-**Always** pin third-party actions to their full commit SHA, not tags:
-
-```yaml
-# ❌ BAD - uses mutable tag
-- uses: actions/checkout@v4
-
-# ✅ GOOD - pinned to immutable commit SHA
-- uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-```
-
-### 4. Secure Variable Handling
-
-Prevent command injection by properly quoting variables:
-
-```yaml
-# ❌ BAD - potential command injection
-run: echo "Processing ${{ inputs.user_input }}"
-
-# ✅ GOOD - properly quoted
-env:
-  USER_INPUT: ${{ inputs.user_input }}
-run: echo "Processing ${USER_INPUT}"
-```
-
-Use `${VARIABLE}` syntax in shell scripts instead of `$VARIABLE`.
-
-### 5. Environment Variables for Secrets
-
-Store sensitive data in environment variables, not inline:
-
-```yaml
-# ❌ BAD
-run: curl -H "Authorization: Bearer ${{ secrets.TOKEN }}" api.example.com
-
-# ✅ GOOD
-env:
-  API_TOKEN: ${{ secrets.TOKEN }}
-run: curl -H "Authorization: Bearer ${API_TOKEN}" api.example.com
-```
-
-## Workflow Structure Best Practices
-
-### Required Workflow Elements
-
-```yaml
-name: "Descriptive Workflow Name"
-
-on:
-  # Define specific triggers
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-
-# Always set explicit permissions
-permissions:
-  contents: read
-
-jobs:
-  job-name:
-    name: "Descriptive Job Name"
-    runs-on: ubuntu-latest
-    timeout-minutes: 30 # tune per job; standardize repo-wide
-
-    # Set job-level permissions if different from workflow level
-    permissions:
-      contents: read
-
-    steps:
-      # Always start with Harden-Runner on ubuntu-latest
-      - name: Harden the runner
-        uses: step-security/harden-runner@v2
-        with:
-          egress-policy: audit
-
-      # Pin all actions to commit SHA
-      - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-```
-
-### Input Validation for Actions
-
-For composite actions, always validate inputs:
-
-```yaml
-inputs:
-  user_input:
-    description: "User provided input"
-    required: true
-
-runs:
-  using: "composite"
-  steps:
-    - name: Validate input
-      shell: bash
-      run: |
-        # Harden shell and validate input format/content before use
-        set -euo pipefail
-
-        USER_INPUT="${{ inputs.user_input }}"
-
-        if [[ ! "${USER_INPUT}" =~ ^[A-Za-z0-9._-]+$ ]]; then
-          echo "❌ Invalid input format"
-          exit 1
-        fi
-```
-
-## Docker Security in Actions
-
-### Pin Docker Images to Digests
-
-```yaml
-# ❌ BAD - mutable tag
-container: node:18
-
-# ✅ GOOD - pinned to digest
-container: node:18@sha256:a1ba21bf0c92931d02a8416f0a54daad66cb36a85d6a37b82dfe1604c4c09cad
-```
-
-## Common Patterns
-
-### Secure File Operations
-
-```yaml
-- name: Process files securely
-  shell: bash
-  env:
-    FILE_PATH: ${{ inputs.file_path }}
-  run: |
-    set -euo pipefail  # Fail on errors, undefined vars, pipe failures
-
-    # Use absolute paths and validate
-    SAFE_PATH=$(realpath "${FILE_PATH}")
-    if [[ "$SAFE_PATH" != "${GITHUB_WORKSPACE}"/* ]]; then
-      echo "❌ Path outside workspace"
-      exit 1
-    fi
-```
-
-### Artifact Handling
-
-```yaml
-- name: Upload artifacts securely
-  uses: actions/upload-artifact@50769540e7f4bd5e21e526ee35c689e35e0d6874 # v4.4.0
-  with:
-    name: build-artifacts
-    path: |
-      dist/
-      !dist/**/*.log  # Exclude sensitive files
-    retention-days: 30
-```
-
-### GHCR authentication for pulls/scans
-
-```yaml
-# Minimal permissions required for GHCR pulls/scans
-permissions:
-  contents: read
-  packages: read
-
-steps:
-  - name: Log in to GitHub Container Registry
-    uses: docker/login-action@184bdaa0721073962dff0199f1fb9940f07167d1 # v3.5.0
-    with:
-      registry: ghcr.io
-      username: ${{ github.actor }}
-      password: ${{ secrets.GITHUB_TOKEN }}
-```
-
-## Security Checklist
-
-- [ ] Minimum GITHUB_TOKEN permissions set
-- [ ] Harden-Runner added to all ubuntu-latest jobs
-- [ ] All third-party actions pinned to commit SHA
-- [ ] Input validation implemented for custom actions
-- [ ] Variables properly quoted in shell scripts
-- [ ] Secrets stored in environment variables
-- [ ] Docker images pinned to digests (if used)
-- [ ] Error handling with `set -euo pipefail`
-- [ ] File paths validated and sanitized
-- [ ] No sensitive data in logs or outputs
-- [ ] GHCR login performed before pulls/scans (packages: read)
-- [ ] Job timeouts configured (`timeout-minutes`)
-
-## Recommended Additional Workflows
-
-Consider adding these security-focused workflows to your repository:
-
-1. **CodeQL Analysis** - Static Application Security Testing (SAST)
-2. **Dependency Review** - Scan for vulnerable dependencies in PRs
-3. **Dependabot Configuration** - Automated dependency updates
-
-## Resources
-
-- [GitHub Security Hardening Guide](https://docs.github.com/en/actions/security-guides/security-hardening-for-github-actions)
-- [Step Security Harden-Runner](https://github.com/step-security/harden-runner)
-- [Secure-Repo Best Practices](https://github.com/step-security/secure-repo)

.cursor/rules/i18n-management.mdc

@@ -1,457 +0,0 @@
----
-title: i18n Management with Lingo.dev
-description: Guidelines for managing internationalization (i18n) with Lingo.dev, including translation workflow, key validation, and best practices
----
-
-# i18n Management with Lingo.dev
-
-This rule defines the workflow and best practices for managing internationalization (i18n) in the Formbricks project using Lingo.dev.
-
-## Overview
-
-Formbricks uses [Lingo.dev](https://lingo.dev) for managing translations across multiple languages. The translation workflow includes:
-
-1. **Translation Keys**: Defined in code using the `t()` function from `react-i18next`
-2. **Translation Files**: JSON files stored in `apps/web/locales/` for each supported language
-3. **Validation**: Automated scanning to detect missing and unused translation keys
-4. **CI/CD**: Pre-commit hooks and GitHub Actions to enforce translation quality
-
-## Translation Workflow
-
-### 1. Using Translations in Code
-
-When adding translatable text in the web app, use the `t()` function or `<Trans>` component:
-
-**Using the `t()` function:**
-```tsx
-import { useTranslate } from "@/lib/i18n/translate";
-
-const MyComponent = () => {
-  const { t } = useTranslate();
-  
-  return (
-    <div>
-      <h1>{t("common.welcome")}</h1>
-      <p>{t("pages.dashboard.description")}</p>
-    </div>
-  );
-};
-```
-
-**Using the `<Trans>` component (for text with HTML elements):**
-```tsx
-import { Trans } from "react-i18next";
-
-const MyComponent = () => {
-  return (
-    <div>
-      <p>
-        <Trans
-          i18nKey="auth.terms_agreement"
-          components={{ 
-            link: <a href="/terms" />,
-            b: <b />
-          }}
-        />
-      </p>
-    </div>
-  );
-};
-```
-
-**Key Naming Conventions:**
-- Use dot notation for nested keys: `section.subsection.key`
-- Use descriptive names: `auth.login.success_message` not `auth.msg1`
-- Group related keys together: `auth.*`, `errors.*`, `common.*`
-- Use lowercase with underscores: `user_profile_settings` not `UserProfileSettings`
-
-### 2. Translation File Structure
-
-Translation files are located in `apps/web/locales/` and use the following naming convention:
-- `en-US.json` (English - United States, default)
-- `de-DE.json` (German)
-- `fr-FR.json` (French)
-- `pt-BR.json` (Portuguese - Brazil)
-- etc.
-
-**File Structure:**
-```json
-{
-  "common": {
-    "welcome": "Welcome",
-    "save": "Save",
-    "cancel": "Cancel"
-  },
-  "auth": {
-    "login": {
-      "title": "Login",
-      "email_placeholder": "Enter your email",
-      "password_placeholder": "Enter your password"
-    }
-  }
-}
-```
-
-### 3. Adding New Translation Keys
-
-When adding new translation keys:
-
-1. **Add the key in your code** using `t("your.new.key")`
-2. **Add translation for that key in en-US.json file**
-3. **Run the translation workflow:**
-   ```bash
-   pnpm i18n
-   ```
-   This will:
-   - Generate translations for all languages using Lingo.dev
-   - Validate that all keys are present and used
-
-4. **Review and commit** the generated translation files
-
-### 4. Available Scripts
-
-```bash
-# Generate translations using Lingo.dev
-pnpm generate-translations
-
-# Scan and validate translation keys
-pnpm scan-translations
-
-# Full workflow: generate + validate
-pnpm i18n
-
-# Validate only (without generation)
-pnpm i18n:validate
-```
-
-## Translation Key Validation
-
-### Automated Validation
-
-The project includes automated validation that runs:
-- **Pre-commit hook**: Validates translations before allowing commits (when `LINGODOTDEV_API_KEY` is set)
-- **GitHub Actions**: Validates translations on every PR and push to main
-
-### Validation Rules
-
-The validation script (`scan-translations.ts`) checks for:
-
-1. **Missing Keys**: Translation keys used in code but not present in translation files
-2. **Unused Keys**: Translation keys present in translation files but not used in code
-3. **Incomplete Translations**: Keys that exist in the default language (`en-US`) but are missing in target languages
-
-**What gets scanned:**
-- All `.ts` and `.tsx` files in `apps/web/`
-- Both `t()` function calls and `<Trans i18nKey="">` components
-- All locale files (`de-DE.json`, `fr-FR.json`, `ja-JP.json`, etc.)
-
-**What gets excluded:**
-- Test files (`*.test.ts`, `*.test.tsx`, `*.spec.ts`, `*.spec.tsx`)
-- Build directories (`node_modules`, `dist`, `build`, `.next`, `coverage`)
-- Locale files themselves (from code scanning)
-
-**Note:** Test files are excluded because they often use mock or example translation keys for testing purposes that don't need to exist in production translation files.
-
-### Fixing Validation Errors
-
-#### Missing Keys
-
-If you encounter missing key errors:
-
-```
-❌ MISSING KEYS (2):
-
-   These keys are used in code but not found in translation files:
-
-   • auth.signup.email_required
-   • settings.profile.update_success
-```
-
-**Resolution:**
-1. Ensure that translations for those keys are present in en-US.json .  
-2. Run `pnpm generate-translations` to have Lingo.dev generate the missing translations
-3. OR manually add the keys to `apps/web/locales/en-US.json`:
-   ```json
-   {
-     "auth": {
-       "signup": {
-         "email_required": "Email is required"
-       }
-     },
-     "settings": {
-       "profile": {
-         "update_success": "Profile updated successfully"
-       }
-     }
-   }
-   ```
-3. Run `pnpm scan-translations` to verify
-4. Commit the changes
-
-#### Unused Keys
-
-If you encounter unused key errors:
-
-```
-⚠️  UNUSED KEYS (1):
-
-   These keys exist in translation files but are not used in code:
-
-   • old.deprecated.key
-```
-
-**Resolution:**
-1. If the key is truly unused, remove it from all translation files
-2. If the key should be used, add it to your code using `t("old.deprecated.key")`
-3. Run `pnpm scan-translations` to verify
-4. Commit the changes
-
-#### Incomplete Translations
-
-If you encounter incomplete translation errors:
-
-```
-⚠️  INCOMPLETE TRANSLATIONS:
-
-   Some keys from en-US are missing in target languages:
-
-   📝 de-DE (5 missing keys):
-      • auth.new_feature.title
-      • auth.new_feature.description
-      • settings.advanced.option
-      ... and 2 more
-```
-
-**Resolution:**
-1. **Recommended:** Run `pnpm generate-translations` to have Lingo.dev automatically translate the missing keys
-2. **Manual:** Add the missing keys to the target language files:
-   ```bash
-   # Copy the structure from en-US.json and translate the values
-   # For example, in de-DE.json:
-   {
-     "auth": {
-       "new_feature": {
-         "title": "Neues Feature",
-         "description": "Beschreibung des neuen Features"
-       }
-     }
-   }
-   ```
-3. Run `pnpm scan-translations` to verify all translations are complete
-4. Commit the changes
-
-## Pre-commit Hook Behavior
-
-The pre-commit hook will:
-
-1. Run `lint-staged` for code formatting
-2. If `LINGODOTDEV_API_KEY` is set:
-   - Generate translations using Lingo.dev
-   - Validate translation keys
-   - Auto-add updated locale files to the commit
-   - **Block the commit** if validation fails
-3. If `LINGODOTDEV_API_KEY` is not set:
-   - Skip translation validation (for community contributors)
-   - Show a warning message
-
-## Environment Variables
-
-### LINGODOTDEV_API_KEY
-
-This is the API key for Lingo.dev integration.
-
-**For Core Team:**
-- Add to your local `.env` file
-- Required for running translation generation
-
-**For Community Contributors:**
-- Not required for local development
-- Translation validation will be skipped
-- The CI will still validate translations
-
-## Best Practices
-
-### 1. Keep Keys Organized
-
-Group related keys together:
-```json
-{
-  "auth": {
-    "login": { ... },
-    "signup": { ... },
-    "forgot_password": { ... }
-  },
-  "dashboard": {
-    "header": { ... },
-    "sidebar": { ... }
-  }
-}
-```
-
-### 2. Avoid Hardcoded Strings
-
-**❌ Bad:**
-```tsx
-<button>Click here</button>
-```
-
-**✅ Good:**
-```tsx
-<button>{t("common.click_here")}</button>
-```
-
-### 3. Use Interpolation for Dynamic Content
-
-**❌ Bad:**
-```tsx
-{t("welcome")} {userName}!
-```
-
-**✅ Good:**
-```tsx
-{t("auth.welcome_message", { userName })}
-```
-
-With translation:
-```json
-{
-  "auth": {
-    "welcome_message": "Welcome, {userName}!"
-  }
-}
-```
-
-### 4. Avoid Dynamic Key Construction
-
-**❌ Bad:**
-```tsx
-const key = `errors.${errorCode}`;
-t(key);
-```
-
-**✅ Good:**
-```tsx
-switch (errorCode) {
-  case "401":
-    return t("errors.unauthorized");
-  case "404":
-    return t("errors.not_found");
-  default:
-    return t("errors.unknown");
-}
-```
-
-### 5. Test Translation Keys
-
-When adding new features:
-1. Add translation keys
-2. Test in multiple languages using the language switcher
-3. Ensure text doesn't overflow in longer translations (German, French)
-4. Run `pnpm scan-translations` before committing
-
-## Troubleshooting
-
-### Issue: Pre-commit hook fails with validation errors
-
-**Solution:**
-```bash
-# Run the full i18n workflow
-pnpm i18n
-
-# Fix any missing or unused keys
-# Then commit again
-git add .
-git commit -m "your message"
-```
-
-### Issue: Translation validation passes locally but fails in CI
-
-**Solution:**
-- Ensure all translation files are committed
-- Check that `scan-translations.ts` hasn't been modified
-- Verify that locale files are properly formatted JSON
-
-### Issue: Cannot commit because of missing translations
-
-**Solution:**
-```bash
-# If you have LINGODOTDEV_API_KEY:
-pnpm generate-translations
-
-# If you don't have the API key (community contributor):
-# Manually add the missing keys to en-US.json
-# Then run validation:
-pnpm scan-translations
-```
-
-### Issue: Getting "unused keys" for keys that are used
-
-**Solution:**
-- The script scans `.ts` and `.tsx` files only
-- If keys are used in other file types, they may be flagged
-- Verify the key is actually used with `grep -r "your.key" apps/web/`
-- If it's a false positive, consider updating the scanning patterns in `scan-translations.ts`
-
-## AI Assistant Guidelines
-
-When assisting with i18n-related tasks, always:
-
-1. **Use the `t()` function** for all user-facing text
-2. **Follow key naming conventions** (lowercase, dots for nesting)
-3. **Run validation** after making changes: `pnpm scan-translations`
-4. **Fix missing keys** by adding them to `en-US.json`
-5. **Remove unused keys** from all translation files
-6. **Test the pre-commit hook** if making changes to translation workflow
-7. **Update this rule file** if translation workflow changes
-
-### Fixing Missing Translation Keys
-
-When the AI encounters missing translation key errors:
-
-1. Identify the missing keys from the error output
-2. Determine the appropriate section and naming for each key
-3. Add the keys to `apps/web/locales/en-US.json` with meaningful English text
-4. Ensure proper JSON structure and nesting
-5. Run `pnpm scan-translations` to verify
-6. Inform the user that other language files will be updated via Lingo.dev
-
-**Example:**
-```typescript
-// Error: Missing key "settings.api.rate_limit_exceeded"
-
-// Add to en-US.json:
-{
-  "settings": {
-    "api": {
-      "rate_limit_exceeded": "API rate limit exceeded. Please try again later."
-    }
-  }
-}
-```
-
-### Removing Unused Translation Keys
-
-When the AI encounters unused translation key errors:
-
-1. Verify the keys are truly unused by searching the codebase
-2. Remove the keys from `apps/web/locales/en-US.json`
-3. Note that removal from other language files can be handled via Lingo.dev
-4. Run `pnpm scan-translations` to verify
-
-## Migration Notes
-
-This project previously used Tolgee for translations. As of this migration:
-
-- **Old scripts**: `tolgee-pull` is deprecated (kept for reference)
-- **New scripts**: Use `pnpm i18n` or `pnpm generate-translations`
-- **Old workflows**: `tolgee.yml` and `tolgee-missing-key-check.yml` removed
-- **New workflow**: `translation-check.yml` handles all validation
-
----
-
-**Last Updated:** October 14, 2025
-**Related Files:**
-- `scan-translations.ts` - Translation validation script
-- `.husky/pre-commit` - Pre-commit hook with i18n validation
-- `.github/workflows/translation-check.yml` - CI workflow for translation validation
-- `apps/web/locales/*.json` - Translation files

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

@@ -1,52 +0,0 @@
----
-description: 
-globs: 
-alwaysApply: false
----
-# React Context & Provider Patterns
-
-## Context Provider Best Practices
-
-### Provider Implementation
-- Use TypeScript interfaces for provider props with optional `initialCount` for testing
-- Implement proper cleanup in `useEffect` to avoid React hooks warnings
-- Reference: [apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/ResponseCountProvider.tsx](mdc:apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/ResponseCountProvider.tsx)
-
-### Cleanup Pattern for Refs
-```typescript
-useEffect(() => {
-  const currentPendingRequests = pendingRequests.current;
-  const currentAbortController = abortController.current;
-  
-  return () => {
-    if (currentAbortController) {
-      currentAbortController.abort();
-    }
-    currentPendingRequests.clear();
-  };
-}, []);
-```
-
-### Testing Context Providers
-- Always wrap components using context in the provider during tests
-- Use `initialCount` prop for predictable test scenarios
-- Mock context dependencies like `useParams`, `useResponseFilter`
-- Example from [apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SurveyAnalysisCTA.test.tsx](mdc:apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SurveyAnalysisCTA.test.tsx):
-
-```typescript
-render(
-  <ResponseCountProvider survey={dummySurvey} initialCount={5}>
-    <ComponentUnderTest />
-  </ResponseCountProvider>
-);
-```
-
-### Required Mocks for Context Testing
-- Mock `next/navigation` with `useParams` returning environment and survey IDs
-- Mock response filter context and actions
-- Mock API actions that the provider depends on
-
-### Context Hook Usage
-- Create custom hooks like `useResponseCountContext()` for consuming context
-- Provide meaningful error messages when context is used outside provider
-- Use context for shared state that multiple components need to access

.cursor/rules/review-and-refine.mdc

@@ -1,179 +0,0 @@
----
-description: Apply these quality standards before finalizing code changes to ensure DRY principles, React best practices, TypeScript conventions, and maintainable code.
-globs:
-alwaysApply: false
----
-
-# Review & Refine
-
-Before finalizing any code changes, review your implementation against these quality standards:
-
-## Core Principles
-
-### DRY (Don't Repeat Yourself)
-
-- Extract duplicated logic into reusable functions or hooks
-- If the same code appears in multiple places, consolidate it
-- Create helper functions at appropriate scope (component-level, module-level, or utility files)
-- Avoid copy-pasting code blocks
-
-### Code Reduction
-
-- Remove unnecessary code, comments, and abstractions
-- Prefer built-in solutions over custom implementations
-- Consolidate similar logic
-- Remove dead code and unused imports
-- Question if every line of code is truly needed
-
-## React Best Practices
-
-### Component Design
-
-- Keep components focused on a single responsibility
-- Extract complex logic into custom hooks
-- Prefer composition over prop drilling
-- Use children props and render props when appropriate
-- Keep component files under 300 lines when possible
-
-### Hooks Usage
-
-- Follow Rules of Hooks (only call at top level, only in React functions)
-- Extract complex `useEffect` logic into custom hooks
-- Use `useMemo` and `useCallback` only when you have a measured performance issue
-- Declare dependencies arrays correctly - don't ignore exhaustive-deps warnings
-- Keep `useEffect` focused on a single concern
-
-### State Management
-
-- Colocate state as close as possible to where it's used
-- Lift state only when necessary
-- Use `useReducer` for complex state logic with multiple sub-values
-- Avoid derived state - compute values during render instead
-- Don't store values in state that can be computed from props
-
-### Event Handlers
-
-- Name event handlers with `handle` prefix (e.g., `handleClick`, `handleSubmit`)
-- Extract complex event handler logic into separate functions
-- Avoid inline arrow functions in JSX when they contain complex logic
-
-## TypeScript Best Practices
-
-### Type Safety
-
-- Prefer type inference over explicit types when possible
-- Use `const` assertions for literal types
-- Avoid `any` - use `unknown` if type is truly unknown
-- Use discriminated unions for complex conditional logic
-- Leverage type guards and narrowing
-
-### Interface & Type Usage
-
-- Use existing types from `@formbricks/types` - don't recreate them
-- Prefer `interface` for object shapes that might be extended
-- Prefer `type` for unions, intersections, and mapped types
-- Define types close to where they're used unless they're shared
-- Export types from index files for shared types
-
-### Type Assertions
-
-- Avoid type assertions (`as`) when possible
-- Use type guards instead of assertions
-- Only assert when you have more information than TypeScript
-
-## Code Organization
-
-### Separation of Concerns
-
-- Separate business logic from UI rendering
-- Extract API calls into separate functions or modules
-- Keep data transformation separate from component logic
-- Use custom hooks for stateful logic that doesn't render UI
-
-### Function Clarity
-
-- Functions should do one thing well
-- Name functions clearly and descriptively
-- Keep functions small (aim for under 20 lines)
-- Extract complex conditionals into named boolean variables or functions
-- Avoid deep nesting (max 3 levels)
-
-### File Structure
-
-- Group related functions together
-- Order declarations logically (types → hooks → helpers → component)
-- Keep imports organized (external → internal → relative)
-- Consider splitting large files by concern
-
-## Additional Quality Checks
-
-### Performance
-
-- Don't optimize prematurely - measure first
-- Avoid creating new objects/arrays/functions in render unnecessarily
-- Use keys properly in lists (stable, unique identifiers)
-- Lazy load heavy components when appropriate
-
-### Accessibility
-
-- Use semantic HTML elements
-- Include ARIA labels where needed
-- Ensure keyboard navigation works
-- Check color contrast and focus states
-
-### Error Handling
-
-- Handle error states in components
-- Provide user feedback for failed operations
-- Use error boundaries for component errors
-- Log errors appropriately (avoid swallowing errors silently)
-
-### Naming Conventions
-
-- Use descriptive names (avoid abbreviations unless very common)
-- Boolean variables/props should sound like yes/no questions (`isLoading`, `hasError`, `canEdit`)
-- Arrays should be plural (`users`, `choices`, `items`)
-- Event handlers: `handleX` in components, `onX` for props
-- Constants in UPPER_SNAKE_CASE only for true constants
-
-### Code Readability
-
-- Prefer early returns to reduce nesting
-- Use destructuring to make code clearer
-- Break complex expressions into named variables
-- Add comments only when code can't be made self-explanatory
-- Use whitespace to group related code
-
-### Testing Considerations
-
-- Write code that's easy to test (pure functions, clear inputs/outputs)
-- Avoid hard-to-mock dependencies when possible
-- Keep side effects at the edges of your code
-
-## Review Checklist
-
-Before submitting your changes, ask yourself:
-
-1. **DRY**: Is there any duplicated logic I can extract?
-2. **Clarity**: Would another developer understand this code easily?
-3. **Simplicity**: Is this the simplest solution that works?
-4. **Types**: Am I using TypeScript effectively?
-5. **React**: Am I following React idioms and best practices?
-6. **Performance**: Are there obvious performance issues?
-7. **Separation**: Are concerns properly separated?
-8. **Testing**: Is this code testable?
-9. **Maintenance**: Will this be easy to change in 6 months?
-10. **Deletion**: Can I remove any code and still accomplish the goal?
-
-## When to Apply This Rule
-
-Apply this rule:
-
-- After implementing a feature but before marking it complete
-- When you notice your code feels "messy" or complex
-- Before requesting code review
-- When you see yourself copy-pasting code
-- After receiving feedback about code quality
-
-Don't let perfect be the enemy of good, but always strive for:
-**Simple, readable, maintainable code that does one thing well.**

.cursor/rules/storybook-component-migration.mdc

@@ -1,216 +0,0 @@
----
-description: Migrate deprecated UI components to a unified component
-globs: 
-alwaysApply: false
----
-# Component Migration Automation Rule
-
-## Overview
-This rule automates the migration of deprecated components to new component systems in React/TypeScript codebases.
-
-## Trigger
-When the user requests component migration (e.g., "migrate [DeprecatedComponent] to [NewComponent]" or "component migration").
-
-## Process
-
-### Step 1: Discovery and Planning
-1. **Identify migration parameters:**
-   - Ask user for deprecated component name (e.g., "Modal")
-   - Ask user for new component name(s) (e.g., "Dialog")
-   - Ask for any components to exclude (e.g., "ModalWithTabs")
-   - Ask for specific import paths if needed
-
-2. **Scan codebase** for deprecated components:
-   - Search for `import.*[DeprecatedComponent]` patterns
-   - Exclude specified components that should not be migrated
-   - List all found components with file paths
-   - Present numbered list to user for confirmation
-
-### Step 2: Component-by-Component Migration
-For each component, follow this exact sequence:
-
-#### 2.1 Component Migration
-- **Import changes:**
-  - Ask user to provide the new import structure
-  - Example transformation pattern:
-  ```typescript
-  // FROM:
-  import { [DeprecatedComponent] } from "@/components/ui/[DeprecatedComponent]"
-  
-  // TO:
-  import {
-    [NewComponent],
-    [NewComponentPart1],
-    [NewComponentPart2],
-    // ... other parts
-  } from "@/components/ui/[NewComponent]"
-  ```
-
-- **Props transformation:**
-  - Ask user for prop mapping rules (e.g., `open` → `open`, `setOpen` → `onOpenChange`)
-  - Ask for props to remove (e.g., `noPadding`, `closeOnOutsideClick`, `size`)
-  - Apply transformations based on user specifications
-
-- **Structure transformation:**
-  - Ask user for the new component structure pattern
-  - Apply the transformation maintaining all functionality
-  - Preserve all existing logic, state management, and event handlers
-
-#### 2.2 Wait for User Approval
-- Present the migration changes
-- Wait for explicit user approval before proceeding
-- If rejected, ask for specific feedback and iterate
-#### 2.3 Re-read and Apply Additional Changes
-- Re-read the component file to capture any user modifications
-- Apply any additional improvements the user made
-- Ensure all changes are incorporated
-
-#### 2.4 Test File Updates
-- **Find corresponding test file** (same name with `.test.tsx` or `.test.ts`)
-- **Update test mocks:**
-  - Ask user for new component mock structure
-  - Replace old component mocks with new ones
-  - Example pattern:
-  ```typescript
-  // Add to test setup:
-  jest.mock("@/components/ui/[NewComponent]", () => ({
-    [NewComponent]: ({ children, [props] }: any) => ([mock implementation]),
-    [NewComponentPart1]: ({ children }: any) => <div data-testid="[new-component-part1]">{children}</div>,
-    [NewComponentPart2]: ({ children }: any) => <div data-testid="[new-component-part2]">{children}</div>,
-    // ... other parts
-  }));
-  ```
-- **Update test expectations:**
-  - Change test IDs from old component to new component
-  - Update any component-specific assertions
-  - Ensure all new component parts used in the component are mocked
-
-#### 2.5 Run Tests and Optimize
-- Execute `Node package manager test -- ComponentName.test.tsx`
-- Fix any failing tests
-- Optimize code quality (imports, formatting, etc.)
-- Re-run tests until all pass
-- **Maximum 3 iterations** - if still failing, ask user for guidance
-
-#### 2.6 Wait for Final Approval
-- Present test results and any optimizations made
-- Wait for user approval of the complete migration
-- If rejected, iterate based on feedback
-
-#### 2.7 Git Commit
-- Run: `git add .`
-- Run: `git commit -m "migrate [ComponentName] from [DeprecatedComponent] to [NewComponent]"`
-- Confirm commit was successful
-
-### Step 3: Final Report Generation
-After all components are migrated, generate a comprehensive GitHub PR report:
-
-#### PR Title
-```
-feat: migrate [DeprecatedComponent] components to [NewComponent] system
-```
-
-#### PR Description Template
-```markdown
-## 🔄 [DeprecatedComponent] to [NewComponent] Migration
-
-### Overview
-Migrated [X] [DeprecatedComponent] components to the new [NewComponent] component system to modernize the UI architecture and improve consistency.
-
-### Components Migrated
-[List each component with file path]
-
-### Technical Changes
-- **Imports:** Replaced `[DeprecatedComponent]` with `[NewComponent], [NewComponentParts...]`
-- **Props:** [List prop transformations]
-- **Structure:** Implemented proper [NewComponent] component hierarchy
-- **Styling:** [Describe styling changes]
-- **Tests:** Updated all test mocks and expectations
-
-### Migration Pattern
-```typescript
-// Before
-<[DeprecatedComponent] [oldProps]>
-  [oldStructure]
-</[DeprecatedComponent]>
-
-// After
-<[NewComponent] [newProps]>
-  [newStructure]
-</[NewComponent]>
-```
-
-### Testing
-- ✅ All existing tests updated and passing
-- ✅ Component functionality preserved
-- ✅ UI/UX behavior maintained
-
-### How to Test This PR
-1. **Functional Testing:**
-   - Navigate to each migrated component's usage
-   - Verify [component] opens and closes correctly
-   - Test all interactive elements within [components]
-   - Confirm styling and layout are preserved
-
-2. **Automated Testing:**
-   ```bash
-   Node package manager test
-   ```
-
-3. **Visual Testing:**
-   - Check that all [components] maintain proper styling
-   - Verify responsive behavior
-   - Test keyboard navigation and accessibility
-
-### Breaking Changes
-[List any breaking changes or state "None - this is a drop-in replacement maintaining all existing functionality."]
-
-### Notes
-- [Any excluded components] were preserved as they already use [NewComponent] internally
-- All form validation and complex state management preserved
-- Enhanced code quality with better imports and formatting
-```
-
-## Special Considerations
-
-### Excluded Components
-- **DO NOT MIGRATE** components specified by user as exclusions
-- They may already use the new component internally or have other reasons
-- Inform user these are skipped and why
-
-### Complex Components
-- Preserve all existing functionality (forms, validation, state management)
-- Maintain prop interfaces
-- Keep all event handlers and callbacks
-- Preserve accessibility features
-
-### Test Coverage
-- Ensure all new component parts are mocked when used
-- Mock all new component parts that appear in the component
-- Update test IDs from old component to new component
-- Maintain all existing test scenarios
-
-### Error Handling
-- If tests fail after 3 iterations, stop and ask user for guidance
-- If component is too complex, ask user for specific guidance
-- If unsure about functionality preservation, ask for clarification
-
-### Migration Patterns
-- Always ask user for specific migration patterns before starting
-- Confirm import structures, prop mappings, and component hierarchies
-- Adapt to different component architectures (simple replacements, complex restructuring, etc.)
-
-## Success Criteria
-- All deprecated components successfully migrated to new components
-- All tests passing
-- No functionality lost
-- Code quality maintained or improved
-- User approval on each component
-- Successful git commits for each migration
-- Comprehensive PR report generated
-
-## Usage Examples
-- "migrate Modal to Dialog"
-- "migrate Button to NewButton" 
-- "migrate Card to ModernCard"
-- "component migration" (will prompt for details) 

.cursor/rules/storybook-create-new-story.mdc

@@ -1,177 +0,0 @@
----
-description: Create a story in Storybook for a given component
-globs:
-alwaysApply: false
----
-
-# Formbricks Storybook Stories
-
-## When generating Storybook stories for Formbricks components:
-
-### 1. **File Structure**
-- Create `stories.tsx` (not `.stories.tsx`) in component directory
-- Use exact import: `import { Meta, StoryObj } from "@storybook/react-vite";`
-- Import component from `"./index"`
-
-### 2. **Story Structure Template**
-```tsx
-import { Meta, StoryObj } from "@storybook/react-vite";
-import { ComponentName } from "./index";
-
-// For complex components with configurable options
-// consider this as an example the options need to reflect the props types
-interface StoryOptions {
-  showIcon: boolean;
-  numberOfElements: number;
-  customLabels: string[];
-}
-
-type StoryProps = React.ComponentProps<typeof ComponentName> & StoryOptions;
-
-const meta: Meta<StoryProps> = {
-  title: "UI/ComponentName",
-  component: ComponentName,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    controls: { sort: "alpha", exclude: [] },
-    docs: {
-      description: {
-        component: "The **ComponentName** component provides [description].",
-      },
-    },
-  },
-  argTypes: {
-    // Organize in exactly these categories: Behavior, Appearance, Content
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ComponentName> & { args: StoryOptions };
-```
-
-### 3. **ArgTypes Organization**
-Organize ALL argTypes into exactly three categories:
-- **Behavior**: disabled, variant, onChange, etc.
-- **Appearance**: size, color, layout, styling, etc.  
-- **Content**: text, icons, numberOfElements, etc.
-
-Format:
-```tsx
-argTypes: {
-  propName: {
-    control: "select" | "boolean" | "text" | "number",
-    options: ["option1", "option2"], // for select
-    description: "Clear description",
-    table: {
-      category: "Behavior" | "Appearance" | "Content",
-      type: { summary: "string" },
-      defaultValue: { summary: "default" },
-    },
-    order: 1,
-  },
-}
-```
-
-### 4. **Required Stories**
-Every component must include:
-- `Default`: Most common use case
-- `Disabled`: If component supports disabled state
-- `WithIcon`: If component supports icons
-- Variant stories for each variant (Primary, Secondary, Error, etc.)
-- Edge case stories (ManyElements, LongText, CustomStyling)
-
-### 5. **Story Format**
-```tsx
-export const Default: Story = {
-  args: {
-    // Props with realistic values
-  },
-};
-
-export const EdgeCase: Story = {
-  args: { /* ... */ },
-  parameters: {
-    docs: {
-      description: {
-        story: "Use this when [specific scenario].",
-      },
-    },
-  },
-};
-```
-
-### 6. **Dynamic Content Pattern**
-For components with dynamic content, create render function:
-```tsx
-const renderComponent = (args: StoryProps) => {
-  const { numberOfElements, showIcon, customLabels } = args;
-  
-  // Generate dynamic content
-  const elements = Array.from({ length: numberOfElements }, (_, i) => ({
-    id: `element-${i}`,
-    label: customLabels[i] || `Element ${i + 1}`,
-    icon: showIcon ? <IconComponent /> : undefined,
-  }));
-  
-  return <ComponentName {...args} elements={elements} />;
-};
-
-export const Dynamic: Story = {
-  render: renderComponent,
-  args: {
-    numberOfElements: 3,
-    showIcon: true,
-    customLabels: ["First", "Second", "Third"],
-  },
-};
-```
-
-### 7. **State Management**
-For interactive components:
-```tsx
-import { useState } from "react";
-
-const ComponentWithState = (args: any) => {
-  const [value, setValue] = useState(args.defaultValue);
-  
-  return (
-    <ComponentName
-      {...args}
-      value={value}
-      onChange={(newValue) => {
-        setValue(newValue);
-        args.onChange?.(newValue);
-      }}
-    />
-  );
-};
-
-export const Interactive: Story = {
-  render: ComponentWithState,
-  args: { defaultValue: "initial" },
-};
-```
-
-### 8. **Quality Requirements**
-- Include component description in parameters.docs
-- Add story documentation for non-obvious use cases
-- Test edge cases (overflow, empty states, many elements)
-- Ensure no TypeScript errors
-- Use realistic prop values
-- Include at least 3-5 story variants
-- Example values need to be in the context of survey application
-
-### 9. **Naming Conventions**
-- **Story titles**: "UI/ComponentName"
-- **Story exports**: PascalCase (Default, WithIcon, ManyElements)
-- **Categories**: "Behavior", "Appearance", "Content" (exact spelling)
-- **Props**: camelCase matching component props
-
-### 10. **Special Cases**
-- **Generic components**: Remove `component` from meta if type conflicts
-- **Form components**: Include Invalid, WithValue stories
-- **Navigation**: Include ManyItems stories
-- **Modals, Dropdowns and Popups **: Include trigger and content structure
-
-## Generate stories that are comprehensive, well-documented, and reflect all component states and edge cases. 

.env.example

@@ -9,8 +9,12 @@
 WEBAPP_URL=http://localhost:3000
 
 # Required for next-auth. Should be the same as WEBAPP_URL
+# If your pplication uses a custom base path, specify the route to the API endpoint in full, e.g. NEXTAUTH_URL=https://example.com/custom-route/api/auth
 NEXTAUTH_URL=http://localhost:3000
 
+# Can be used to deploy the application under a sub-path of a domain. This can only be set at build time
+# BASE_PATH=
+
 # Encryption keys
 # Please set both for now, we will change this in the future
 
@@ -164,6 +168,9 @@ SLACK_CLIENT_SECRET=
 # Enterprise License Key
 ENTERPRISE_LICENSE_KEY=
 
+# Internal Environment (production, staging) - used for internal staging environment
+# ENVIRONMENT=production
+
 # Automatically assign new users to a specific organization and role within that organization
 # Insert an existing organization id or generate a valid CUID for a new one at https://www.getuniqueid.com/cuid (e.g. cjld2cjxh0000qzrmn831i7rn)
 # (Role Management is an Enterprise feature)
@@ -189,8 +196,9 @@ REDIS_URL=redis://localhost:6379
 # The below is used for Rate Limiting (uses In-Memory LRU Cache if not provided) (You can use a service like Webdis for this)
 # REDIS_HTTP_URL:
 
-# INTERCOM_APP_ID=
-# INTERCOM_SECRET_KEY=
+# Chatwoot
+# CHATWOOT_BASE_URL=
+# CHATWOOT_WEBSITE_TOKEN=
 
 # Enable Prometheus metrics
 # PROMETHEUS_ENABLED=

.github/workflows/chromatic.yml

@@ -13,13 +13,12 @@ jobs:
   chromatic:
     name: Run Chromatic
     runs-on: ubuntu-latest
+    timeout-minutes: 30
     permissions:
-      packages: write
-      id-token: write
-      actions: read
+      contents: read
     steps:
       - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
+        uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
         with:
           egress-policy: audit
 
@@ -27,16 +26,34 @@ jobs:
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: 20
+
       - name: Install pnpm
         uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
       - name: Install dependencies
         run: pnpm install --config.platform=linux --config.architecture=x64
+
       - name: Run Chromatic
-        uses: chromaui/action@c93e0bc3a63aa176e14a75b61a31847cbfdd341c # latest
+        uses: chromaui/action@4c20b95e9d3209ecfdf9cd6aace6bbde71ba1694 # v13.3.4
         with:
-          # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           workingDir: apps/storybook
+          zip: true

.github/workflows/e2e.yml

@@ -3,14 +3,10 @@ name: E2E Tests
 on:
   workflow_call:
     secrets:
-      AZURE_CLIENT_ID:
-        required: false
-      AZURE_TENANT_ID:
-        required: false
-      AZURE_SUBSCRIPTION_ID:
-        required: false
       PLAYWRIGHT_SERVICE_URL:
         required: false
+      PLAYWRIGHT_SERVICE_ACCESS_TOKEN:
+        required: false
       ENTERPRISE_LICENSE_KEY:
         required: true
       # Add other secrets if necessary
@@ -21,7 +17,6 @@ env:
   TURBO_TEAM: ${{ vars.TURBO_TEAM }}
 
 permissions:
-  id-token: write
   contents: read
   actions: read
 
@@ -114,7 +109,7 @@ jobs:
       - name: Start MinIO Server
         run: |
           set -euo pipefail
-          
+
           # Start MinIO server in background
           docker run -d \
             --name minio-server \
@@ -124,7 +119,7 @@ jobs:
             -e MINIO_ROOT_PASSWORD=devminio123 \
             minio/minio:RELEASE.2025-09-07T16-13-09Z \
             server /data --console-address :9001
-          
+
           echo "MinIO server started"
 
       - name: Wait for MinIO and create S3 bucket
@@ -207,32 +202,30 @@ jobs:
       - name: Install Playwright
         run: pnpm exec playwright install --with-deps
 
-      - name: Set Azure Secret Variables
-        run: |
-          if [[ -n "${{ secrets.AZURE_CLIENT_ID }}" && -n "${{ secrets.AZURE_TENANT_ID }}" && -n "${{ secrets.AZURE_SUBSCRIPTION_ID }}" ]]; then
-            echo "AZURE_ENABLED=true" >> $GITHUB_ENV
-          else
-            echo "AZURE_ENABLED=false" >> $GITHUB_ENV
-          fi
-
-      - name: Azure login
-        if: env.AZURE_ENABLED == 'true'
-        uses: azure/login@a65d910e8af852a8061c627c456678983e180302 # v2.2.0
-        with:
-          client-id: ${{ secrets.AZURE_CLIENT_ID }}
-          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
-          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
-
-      - name: Run E2E Tests (Azure)
-        if: env.AZURE_ENABLED == 'true'
+      - name: Determine Playwright execution mode
+        shell: bash
         env:
           PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
-          CI: true
+          PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }}
         run: |
-          pnpm test-e2e:azure
+          set -euo pipefail
+
+          if [[ -n "${PLAYWRIGHT_SERVICE_URL}" && -n "${PLAYWRIGHT_SERVICE_ACCESS_TOKEN}" ]]; then
+            echo "PW_MODE=service" >> "$GITHUB_ENV"
+          else
+            echo "PW_MODE=local" >> "$GITHUB_ENV"
+          fi
+
+      - name: Run E2E Tests (Playwright Service)
+        if: env.PW_MODE == 'service'
+        env:
+          PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
+          PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }}
+          CI: true
+        run: pnpm test-e2e:azure
 
       - name: Run E2E Tests (Local)
-        if: env.AZURE_ENABLED == 'false'
+        if: env.PW_MODE == 'local'
         env:
           CI: true
         run: |

.github/workflows/pr-size-check.yml

@@ -111,27 +111,21 @@ jobs:
             const additions = ${{ steps.check-size.outputs.total_additions }};
             const deletions = ${{ steps.check-size.outputs.total_deletions }};
             
-            const body = `## 🚨 PR Size Warning
-            
-This PR has approximately **${totalChanges} lines** of changes (${additions} additions, ${deletions} deletions across ${countedFiles} files).
-
-Large PRs (>800 lines) are significantly harder to review and increase the chance of merge conflicts. Consider splitting this into smaller, self-contained PRs.
-
-### 💡 Suggestions:
-- **Split by feature or module** - Break down into logical, independent pieces
-- **Create a sequence of PRs** - Each building on the previous one
-- **Branch off PR branches** - Don't wait for reviews to continue dependent work
-
-### 📊 What was counted:
-- ✅ Source files, stylesheets, configuration files
-- ❌ Excluded ${excludedFiles} files (tests, locales, locks, generated files)
-
-### 📚 Guidelines:
-- **Ideal:** 300-500 lines per PR
-- **Warning:** 500-800 lines
-- **Critical:** 800+ lines ⚠️
-
-If this large PR is unavoidable (e.g., migration, dependency update, major refactor), please explain in the PR description why it couldn't be split.`;
+            const body = '## 🚨 PR Size Warning\n\n' +
+              'This PR has approximately **' + totalChanges + ' lines** of changes (' + additions + ' additions, ' + deletions + ' deletions across ' + countedFiles + ' files).\n\n' +
+              'Large PRs (>800 lines) are significantly harder to review and increase the chance of merge conflicts. Consider splitting this into smaller, self-contained PRs.\n\n' +
+              '### 💡 Suggestions:\n' +
+              '- **Split by feature or module** - Break down into logical, independent pieces\n' +
+              '- **Create a sequence of PRs** - Each building on the previous one\n' +
+              '- **Branch off PR branches** - Don\'t wait for reviews to continue dependent work\n\n' +
+              '### 📊 What was counted:\n' +
+              '- ✅ Source files, stylesheets, configuration files\n' +
+              '- ❌ Excluded ' + excludedFiles + ' files (tests, locales, locks, generated files)\n\n' +
+              '### 📚 Guidelines:\n' +
+              '- **Ideal:** 300-500 lines per PR\n' +
+              '- **Warning:** 500-800 lines\n' +
+              '- **Critical:** 800+ lines ⚠️\n\n' +
+              'If this large PR is unavoidable (e.g., migration, dependency update, major refactor), please explain in the PR description why it couldn\'t be split.';
             
             // Check if we already commented
             const { data: comments } = await github.rest.issues.listComments({

.gitignore

@@ -62,3 +62,4 @@ branch.json
 packages/ios/FormbricksSDK/FormbricksSDK.xcodeproj/project.xcworkspace/xcuserdata
 .cursorrules
 i18n.cache
+stats.html

.husky/pre-commit

@@ -1,6 +1,3 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 # Load environment variables from .env files
 if [ -f .env ]; then
   set -a

AGENTS.md

@@ -18,11 +18,65 @@ Formbricks runs as a pnpm/turbo monorepo. `apps/web` is the Next.js product surf
 ## Coding Style & Naming Conventions
 
 TypeScript, React, and Prisma are the primary languages. Use the shared ESLint presets (`@formbricks/eslint-config`) and Prettier preset (110-char width, semicolons, double quotes, sorted import groups). Two-space indentation is standard; prefer `PascalCase` for React components and folders under `modules/`, `camelCase` for functions/variables, and `SCREAMING_SNAKE_CASE` only for constants. When adding mocks, place them inside `__mocks__` so import ordering stays stable.
+We are using SonarQube to identify code smells and security hotspots.
+
+## Architecture & Patterns
+
+- Next.js app router lives in `apps/web/app` with route groups like `(app)` and `(auth)`. Services live in `apps/web/lib`, feature modules in `apps/web/modules`.
+- Server actions wrap service calls and return `{ data }` or `{ error }` consistently.
+- Context providers should guard against missing provider usage and use cleanup patterns that snapshot refs inside `useEffect` to avoid React hooks warnings
+
+## Caching
+
+- Use React `cache()` for request-level dedupe and `cache.withCache()` or explicit Redis for expensive data.
+- Do not use Next.js `unstable_cache()`.
+- Always use `createCacheKey.*` utilities for cache keys.
+
+## i18n (Internationalization)
+
+- All user-facing text must use the `t()` function from `react-i18next`.
+- Key naming: use lowercase with dots for nesting (e.g., `common.welcome`).
+- Translations are in `apps/web/locales/`. Default is `en-US.json`.
+- Lingo.dev is automatically translating strings from en-US into other languages on commit. Run `pnpm i18n` to generate missing translations and validate keys.
+
+## Database & Prisma Performance
+
+- Multi-tenancy: All data must be scoped by Organization or Environment.
+- Soft Deletion: Check for `isActive` or `deletedAt` fields; use proper filtering.
+- Never use `skip`/`offset` with `prisma.response.count()`; only use `where`.
+- Separate count and data queries and run in parallel (`Promise.all`).
+- Prefer cursor pagination for large datasets.
+- When filtering by `createdAt`, include indexed fields (e.g., `surveyId` + `createdAt`).
 
 ## Testing Guidelines
 
 Prefer Vitest with Testing Library for logic in `.ts` files, keeping specs colocated with the code they exercise (`utility.test.ts`). Do not write tests for `.tsx` files—React components are covered by Playwright E2E tests instead. Mock network and storage boundaries through helpers from `@formbricks/*`. Run `pnpm test` before opening a PR and `pnpm test:coverage` when touching critical flows; keep coverage from regressing. End-to-end scenarios belong in `apps/web/playwright`, using descriptive filenames (`billing.spec.ts`) and tagging slow suites with `@slow` when necessary.
 
+## Documentation (apps/docs)
+
+- Add frontmatter with `title`, `description`, and `icon` at the top of the MDX file.
+- Do not start with an H1; use Camel Case headings (only capitalize the feature name).
+- Use Mintlify components for steps and callouts.
+- If Enterprise-only, add the Enterprise note block described in docs.
+
+## Storybook
+
+- Stories live in `stories.tsx` in the component folder and import from `"./index"`.
+- Use `@storybook/react-vite` and organize argTypes into `Behavior`, `Appearance`, `Content`.
+- Include Default, Disabled (if supported), WithIcon (if supported), all variants, and edge cases.
+
+## GitHub Actions
+
+- Always set minimal `permissions` for `GITHUB_TOKEN`.
+- On `ubuntu-latest`, add `step-security/harden-runner` as the first step.
+
+## Quality Checklist
+
+- Keep code DRY and small; remove dead code and unused imports.
+- Follow React hooks rules, keep effects focused, and avoid unnecessary `useMemo`/`useCallback`.
+- Prefer type inference, avoid `any`, and use shared types from `@formbricks/types`.
+- Keep components focused, avoid deep nesting, and ensure basic accessibility.
+
 ## Commit & Pull Request Guidelines
 
 Commits follow a lightweight Conventional Commit format (`fix:`, `chore:`, `feat:`) and usually append the PR number, e.g. `fix: update OpenAPI schema (#6617)`. Keep commits scoped and lint-clean. Pull requests should outline the problem, summarize the solution, and link to issues or product specs. Attach screenshots or gifs for UI-facing work, list any migrations or env changes, and paste the output of relevant commands (`pnpm test`, `pnpm lint`, `pnpm db:migrate:dev`) so reviewers can verify readiness.

README.md

@@ -203,6 +203,14 @@ Here are a few options:
 
 </a>
 
+## Thanks
+
+Formbricks is supported by the following companies who provide us with their tools for free as part of their open-source support:
+
+<a href="https://www.chromatic.com/"><img src="https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png" width="153" height="30" alt="Chromatic" /></a>
+&nbsp;&nbsp;&nbsp;&nbsp;
+<a href="https://sentry.io/"><img src="https://github.com/user-attachments/assets/d743ffd4-b575-4802-a29a-10136be9227e" width="150" height="30" alt="Sentry" /></a>
+
 <a id="contact-us"></a>
 
 ## 📆 Contact us

apps/storybook/.storybook/main.ts

@@ -1,8 +1,11 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 import { createRequire } from "module";
-import { dirname, join } from "path";
+import { dirname, join, resolve } from "path";
+import { fileURLToPath } from "url";
 
 const require = createRequire(import.meta.url);
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 
 /**
  * This function is used to resolve the absolute path of a package.
@@ -13,7 +16,7 @@ function getAbsolutePath(value: string): any {
 }
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../../web/modules/ui/**/stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ["../src/**/*.mdx", "../../../packages/survey-ui/src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     getAbsolutePath("@storybook/addon-onboarding"),
     getAbsolutePath("@storybook/addon-links"),
@@ -25,5 +28,25 @@ const config: StorybookConfig = {
     name: getAbsolutePath("@storybook/react-vite"),
     options: {},
   },
+  async viteFinal(config) {
+    const surveyUiPath = resolve(__dirname, "../../../packages/survey-ui/src");
+    const rootPath = resolve(__dirname, "../../../");
+
+    // Configure server to allow files from outside the storybook directory
+    config.server = config.server || {};
+    config.server.fs = {
+      ...config.server.fs,
+      allow: [...(config.server.fs?.allow || []), rootPath],
+    };
+
+    // Configure simple alias resolution
+    config.resolve = config.resolve || {};
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      "@": surveyUiPath,
+    };
+
+    return config;
+  },
 };
 export default config;

apps/storybook/.storybook/preview.ts

@@ -1,19 +1,6 @@
 import type { Preview } from "@storybook/react-vite";
 import React from "react";
-import { I18nProvider } from "../../web/lingodotdev/client";
-import "../../web/modules/ui/globals.css";
-
-// Create a Storybook-specific Lingodot Dev decorator
-const withLingodotDev = (Story: any) => {
-  return React.createElement(
-    I18nProvider,
-    {
-      language: "en-US",
-      defaultLanguage: "en-US",
-    } as any,
-    React.createElement(Story)
-  );
-};
+import "../../../packages/survey-ui/src/styles/globals.css";
 
 const preview: Preview = {
   parameters: {
@@ -22,9 +9,23 @@ const preview: Preview = {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
+      expanded: true,
+    },
+    backgrounds: {
+      default: "light",
     },
   },
-  decorators: [withLingodotDev],
+  decorators: [
+    (Story) =>
+      React.createElement(
+        "div",
+        {
+          id: "fbjs",
+          className: "w-full h-full min-h-screen p-4 bg-background font-sans antialiased text-foreground",
+        },
+        React.createElement(Story)
+      ),
+  ],
 };
 
 export default preview;

apps/storybook/package.json

@@ -11,22 +11,24 @@
     "clean": "rimraf .turbo node_modules dist storybook-static"
   },
   "dependencies": {
-    "eslint-plugin-react-refresh": "0.4.20"
+    "@formbricks/survey-ui": "workspace:*"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.0.1",
-    "@storybook/addon-a11y": "9.0.15",
-    "@storybook/addon-links": "9.0.15",
-    "@storybook/addon-onboarding": "9.0.15",
-    "@storybook/react-vite": "9.0.15",
-    "@typescript-eslint/eslint-plugin": "8.32.0",
-    "@typescript-eslint/parser": "8.32.0",
-    "@vitejs/plugin-react": "4.4.1",
-    "esbuild": "0.25.4",
-    "eslint-plugin-storybook": "9.0.15",
+    "@chromatic-com/storybook": "^5.0.0",
+    "@storybook/addon-a11y": "10.1.11",
+    "@storybook/addon-links": "10.1.11",
+    "@storybook/addon-onboarding": "10.1.11",
+    "@storybook/react-vite": "10.1.11",
+    "@typescript-eslint/eslint-plugin": "8.53.0",
+    "@tailwindcss/vite": "4.1.18",
+    "@typescript-eslint/parser": "8.53.0",
+    "@vitejs/plugin-react": "5.1.2",
+    "esbuild": "0.27.2",
+    "eslint-plugin-react-refresh": "0.4.26",
+    "eslint-plugin-storybook": "10.1.11",
     "prop-types": "15.8.1",
-    "storybook": "9.0.15",
-    "vite": "6.4.1",
-    "@storybook/addon-docs": "9.0.15"
+    "storybook": "10.1.11",
+    "vite": "7.3.1",
+    "@storybook/addon-docs": "10.1.11"
   }
 }

apps/storybook/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};

apps/storybook/tailwind.config.js

@@ -1,7 +1,15 @@
 /** @type {import('tailwindcss').Config} */
-import base from "../web/tailwind.config";
+import surveyUi from "../../packages/survey-ui/tailwind.config";
 
 export default {
-  ...base,
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}", "../web/modules/ui/**/*.{js,ts,jsx,tsx}"],
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "../../packages/survey-ui/src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      ...surveyUi.theme?.extend,
+    },
+  },
 };

apps/storybook/vite.config.ts

@@ -1,16 +1,17 @@
+import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
 import path from "path";
 import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
   define: {
     "process.env": {},
   },
   resolve: {
     alias: {
-      "@": path.resolve(__dirname, "../web"),
+      "@formbricks/survey-ui": path.resolve(__dirname, "../../packages/survey-ui/src"),
     },
   },
 });

apps/web/.eslintignore

@@ -0,0 +1,7 @@
+node_modules/
+.next/
+public/
+playwright/
+dist/
+coverage/
+vendor/

apps/web/Dockerfile

@@ -37,6 +37,10 @@ ENV NODE_OPTIONS=${NODE_OPTIONS}
 # but needs explicit declaration for some build systems (like Depot)
 ARG TARGETARCH
 
+# Base path for the application (optional)
+ARG BASE_PATH=""
+ENV BASE_PATH=${BASE_PATH}
+
 # Set the working directory
 WORKDIR /app
 
@@ -73,8 +77,8 @@ RUN jq -r '.devDependencies.prisma' packages/database/package.json > /prisma_ver
 #
 FROM base AS runner
 
-RUN npm install --ignore-scripts -g corepack@latest 
-RUN corepack enable
+RUN npm install --ignore-scripts -g corepack@latest && \
+    corepack enable
 
 RUN apk add --no-cache curl \
     && apk add --no-cache supercronic \
@@ -100,6 +104,9 @@ RUN chown -R nextjs:nextjs ./apps/web/.next/static && chmod -R 755 ./apps/web/.n
 COPY --from=installer /app/apps/web/public ./apps/web/public
 RUN chown -R nextjs:nextjs ./apps/web/public && chmod -R 755 ./apps/web/public
 
+# Create packages/database directory structure with proper ownership for runtime migrations
+RUN mkdir -p ./packages/database/migrations && chown -R nextjs:nextjs ./packages/database
+
 COPY --from=installer /app/packages/database/schema.prisma ./packages/database/schema.prisma
 RUN chown nextjs:nextjs ./packages/database/schema.prisma && chmod 644 ./packages/database/schema.prisma
 
@@ -118,6 +125,9 @@ RUN chown nextjs:nextjs ./prisma_version.txt && chmod 644 ./prisma_version.txt
 COPY --from=installer /app/node_modules/@paralleldrive/cuid2 ./node_modules/@paralleldrive/cuid2
 RUN chmod -R 755 ./node_modules/@paralleldrive/cuid2
 
+COPY --from=installer /app/node_modules/uuid ./node_modules/uuid
+RUN chmod -R 755 ./node_modules/uuid
+
 COPY --from=installer /app/node_modules/@noble/hashes ./node_modules/@noble/hashes
 RUN chmod -R 755 ./node_modules/@noble/hashes
 
@@ -134,12 +144,13 @@ EXPOSE 3000
 ENV HOSTNAME="0.0.0.0"
 USER nextjs
 
-# Prepare volume for uploads
-RUN mkdir -p /home/nextjs/apps/web/uploads/
-VOLUME /home/nextjs/apps/web/uploads/
+# Prepare pnpm as the nextjs user to ensure it's available at runtime
+# Prepare volumes for uploads and SAML connections
+RUN corepack prepare pnpm@9.15.9 --activate && \
+    mkdir -p /home/nextjs/apps/web/uploads/ && \
+    mkdir -p /home/nextjs/apps/web/saml-connection
 
-# Prepare volume for SAML preloaded connection
-RUN mkdir -p /home/nextjs/apps/web/saml-connection
+VOLUME /home/nextjs/apps/web/uploads/
 VOLUME /home/nextjs/apps/web/saml-connection
 
 CMD ["/home/nextjs/start.sh"]

apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/page.tsx

@@ -25,7 +25,7 @@ const Page = async (props: ConnectPageProps) => {
 
   const project = await getProjectByEnvironmentId(environment.id);
   if (!project) {
-    throw new Error(t("common.project_not_found"));
+    throw new Error(t("common.workspace_not_found"));
   }
 
   const channel = project.config.channel || null;
@@ -46,7 +46,7 @@ const Page = async (props: ConnectPageProps) => {
         channel={channel}
       />
       <Button
-        className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
+        className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
         variant="ghost"
         asChild>
         <Link href={`/environments/${environment.id}`}>

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

@@ -32,14 +32,22 @@ const mockProject: TProject = {
 };
 const mockTemplate: TXMTemplate = {
   name: "$[projectName] Survey",
-  questions: [
+  blocks: [
     {
-      id: "q1",
-      inputType: "text",
-      type: "email" as any,
-      headline: { default: "$[projectName] Question" },
-      required: false,
-      charLimit: { enabled: true, min: 400, max: 1000 },
+      id: "block1",
+      name: "Block 1",
+      elements: [
+        {
+          id: "q1",
+          type: "openText" as const,
+          inputType: "text" as const,
+          headline: { default: "$[projectName] Question" },
+          subheader: { default: "" },
+          required: false,
+          placeholder: { default: "" },
+          charLimit: 1000,
+        },
+      ],
     },
   ],
   endings: [
@@ -66,9 +74,9 @@ describe("replacePresetPlaceholders", () => {
     expect(result.name).toBe("Test Project Survey");
   });
 
-  test("replaces projectName placeholder in question headline", () => {
+  test("replaces projectName placeholder in element headline", () => {
     const result = replacePresetPlaceholders(mockTemplate, mockProject);
-    expect(result.questions[0].headline.default).toBe("Test Project Question");
+    expect(result.blocks[0].elements[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,13 +1,16 @@
 import { TProject } from "@formbricks/types/project";
+import { TSurveyBlock } from "@formbricks/types/surveys/blocks";
 import { TXMTemplate } from "@formbricks/types/templates";
-import { replaceQuestionPresetPlaceholders } from "@/lib/utils/templates";
+import { replaceElementPresetPlaceholders } 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) => {
+export const replacePresetPlaceholders = (template: TXMTemplate, project: TProject): TXMTemplate => {
   const survey = structuredClone(template);
-  survey.name = survey.name.replace("$[projectName]", project.name);
-  survey.questions = survey.questions.map((question) => {
-    return replaceQuestionPresetPlaceholders(question, project);
-  });
-  return { ...template, ...survey };
+
+  const modifiedBlocks = survey.blocks.map((block: TSurveyBlock) => ({
+    ...block,
+    elements: block.elements.map((element) => replaceElementPresetPlaceholders(element, project)),
+  }));
+
+  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),
-      questions: [],
+      blocks: [],
       styling: {
         overwriteThemeStyling: true,
       },

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

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

apps/web/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/page.tsx

@@ -38,7 +38,7 @@ const Page = async (props: XMTemplatePageProps) => {
 
   const project = await getProjectByEnvironmentId(environment.id);
   if (!project) {
-    throw new Error(t("common.project_not_found"));
+    throw new Error(t("common.workspace_not_found"));
   }
 
   const projects = await getUserProjects(session.user.id, organizationId);
@@ -49,7 +49,7 @@ const Page = async (props: XMTemplatePageProps) => {
       <XMTemplateList project={project} user={user} environmentId={environment.id} />
       {projects.length >= 2 && (
         <Button
-          className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
           variant="ghost"
           asChild>
           <Link href={`/environments/${environment.id}/surveys`}>

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

@@ -50,8 +50,8 @@ const Page = async (props) => {
           </div>
           <div className="flex h-full flex-col items-center justify-center space-y-12">
             <Header
-              title={t("organizations.landing.no_projects_warning_title")}
-              subtitle={t("organizations.landing.no_projects_warning_subtitle")}
+              title={t("organizations.landing.no_workspaces_warning_title")}
+              subtitle={t("organizations.landing.no_workspaces_warning_subtitle")}
             />
           </div>
         </div>

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/workspaces/new/channel/page.tsx

@@ -26,16 +26,16 @@ const Page = async (props: ChannelPageProps) => {
   const t = await getTranslate();
   const channelOptions = [
     {
-      title: t("organizations.projects.new.channel.link_and_email_surveys"),
-      description: t("organizations.projects.new.channel.link_and_email_surveys_description"),
+      title: t("organizations.workspaces.new.channel.link_and_email_surveys"),
+      description: t("organizations.workspaces.new.channel.link_and_email_surveys_description"),
       icon: SendIcon,
-      href: `/organizations/${params.organizationId}/projects/new/settings?channel=link`,
+      href: `/organizations/${params.organizationId}/workspaces/new/settings?channel=link`,
     },
     {
-      title: t("organizations.projects.new.channel.in_product_surveys"),
-      description: t("organizations.projects.new.channel.in_product_surveys_description"),
+      title: t("organizations.workspaces.new.channel.in_product_surveys"),
+      description: t("organizations.workspaces.new.channel.in_product_surveys_description"),
       icon: PictureInPicture2Icon,
-      href: `/organizations/${params.organizationId}/projects/new/settings?channel=app`,
+      href: `/organizations/${params.organizationId}/workspaces/new/settings?channel=app`,
     },
   ];
 
@@ -44,13 +44,13 @@ const Page = async (props: ChannelPageProps) => {
   return (
     <div className="flex min-h-full min-w-full flex-col items-center justify-center space-y-12">
       <Header
-        title={t("organizations.projects.new.channel.channel_select_title")}
-        subtitle={t("organizations.projects.new.channel.channel_select_subtitle")}
+        title={t("organizations.workspaces.new.channel.channel_select_title")}
+        subtitle={t("organizations.workspaces.new.channel.channel_select_subtitle")}
       />
       <OnboardingOptionsContainer options={channelOptions} />
       {projects.length >= 1 && (
         <Button
-          className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
           variant="ghost"
           asChild>
           <Link href={"/"}>

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

@@ -15,7 +15,7 @@ const OnboardingLayout = async (props) => {
   const t = await getTranslate();
 
   const session = await getServerSession(authOptions);
-  if (!session || !session.user) {
+  if (!session?.user) {
     return redirect(`/auth/login`);
   }
 

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/workspaces/new/mode/page.tsx

@@ -26,16 +26,16 @@ const Page = async (props: ModePageProps) => {
   const t = await getTranslate();
   const channelOptions = [
     {
-      title: t("organizations.projects.new.mode.formbricks_surveys"),
-      description: t("organizations.projects.new.mode.formbricks_surveys_description"),
+      title: t("organizations.workspaces.new.mode.formbricks_surveys"),
+      description: t("organizations.workspaces.new.mode.formbricks_surveys_description"),
       icon: ListTodoIcon,
-      href: `/organizations/${params.organizationId}/projects/new/channel`,
+      href: `/organizations/${params.organizationId}/workspaces/new/channel`,
     },
     {
-      title: t("organizations.projects.new.mode.formbricks_cx"),
-      description: t("organizations.projects.new.mode.formbricks_cx_description"),
+      title: t("organizations.workspaces.new.mode.formbricks_cx"),
+      description: t("organizations.workspaces.new.mode.formbricks_cx_description"),
       icon: HeartIcon,
-      href: `/organizations/${params.organizationId}/projects/new/settings?mode=cx`,
+      href: `/organizations/${params.organizationId}/workspaces/new/settings?mode=cx`,
     },
   ];
 
@@ -43,11 +43,11 @@ const Page = async (props: ModePageProps) => {
 
   return (
     <div className="flex min-h-full min-w-full flex-col items-center justify-center space-y-12">
-      <Header title={t("organizations.projects.new.mode.what_are_you_here_for")} />
+      <Header title={t("organizations.workspaces.new.mode.what_are_you_here_for")} />
       <OnboardingOptionsContainer options={channelOptions} />
       {projects.length >= 1 && (
         <Button
-          className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
           variant="ghost"
           asChild>
           <Link href={"/"}>

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/workspaces/new/settings/components/ProjectSettings.tsx

@@ -44,6 +44,7 @@ interface ProjectSettingsProps {
   organizationTeams: TOrganizationTeam[];
   isAccessControlAllowed: boolean;
   userProjectsCount: number;
+  publicDomain: string;
 }
 
 export const ProjectSettings = ({
@@ -55,6 +56,7 @@ export const ProjectSettings = ({
   organizationTeams,
   isAccessControlAllowed = false,
   userProjectsCount,
+  publicDomain,
 }: ProjectSettingsProps) => {
   const [createTeamModalOpen, setCreateTeamModalOpen] = useState(false);
 
@@ -77,7 +79,7 @@ export const ProjectSettings = ({
           (environment) => environment.type === "production"
         );
         if (productionEnvironment) {
-          if (typeof window !== "undefined") {
+          if (globalThis.window !== undefined) {
             // Rmove filters when creating a new project
             localStorage.removeItem(FORMBRICKS_SURVEYS_FILTERS_KEY_LS);
           }
@@ -94,7 +96,7 @@ export const ProjectSettings = ({
         toast.error(errorMessage);
       }
     } catch (error) {
-      toast.error(t("organizations.projects.new.settings.project_creation_failed"));
+      toast.error(t("organizations.workspaces.new.settings.workspace_creation_failed"));
       console.error(error);
     }
   };
@@ -105,7 +107,6 @@ export const ProjectSettings = ({
       styling: { allowStyleOverwrite: true, brandColor: { light: defaultBrandColor } },
       teamIds: [],
     },
-
     resolver: zodResolver(ZProjectUpdateInput),
   });
   const projectName = form.watch("name");
@@ -129,9 +130,9 @@ export const ProjectSettings = ({
               render={({ field, fieldState: { error } }) => (
                 <FormItem className="w-full space-y-4">
                   <div>
-                    <FormLabel>{t("organizations.projects.new.settings.brand_color")}</FormLabel>
+                    <FormLabel>{t("organizations.workspaces.new.settings.brand_color")}</FormLabel>
                     <FormDescription>
-                      {t("organizations.projects.new.settings.brand_color_description")}
+                      {t("organizations.workspaces.new.settings.brand_color_description")}
                     </FormDescription>
                   </div>
                   <FormControl>
@@ -153,9 +154,9 @@ export const ProjectSettings = ({
               render={({ field, fieldState: { error } }) => (
                 <FormItem className="w-full space-y-4">
                   <div>
-                    <FormLabel>{t("organizations.projects.new.settings.project_name")}</FormLabel>
+                    <FormLabel>{t("organizations.workspaces.new.settings.workspace_name")}</FormLabel>
                     <FormDescription>
-                      {t("organizations.projects.new.settings.project_name_description")}
+                      {t("organizations.workspaces.new.settings.workspace_name_description")}
                     </FormDescription>
                   </div>
                   <FormControl>
@@ -184,7 +185,7 @@ export const ProjectSettings = ({
                       <div>
                         <FormLabel>{t("common.teams")}</FormLabel>
                         <FormDescription>
-                          {t("organizations.projects.new.settings.team_description")}
+                          {t("organizations.workspaces.new.settings.team_description")}
                         </FormDescription>
                       </div>
                       <Button
@@ -192,7 +193,7 @@ export const ProjectSettings = ({
                         size="sm"
                         type="button"
                         onClick={() => setCreateTeamModalOpen(true)}>
-                        {t("organizations.projects.new.settings.create_new_team")}
+                        {t("organizations.workspaces.new.settings.create_new_team")}
                       </Button>
                     </div>
                     <FormControl>
@@ -225,12 +226,13 @@ export const ProjectSettings = ({
             alt="Logo"
             width={256}
             height={56}
-            className="absolute left-2 top-2 -mb-6 h-20 w-auto max-w-64 rounded-lg border object-contain p-1"
+            className="absolute top-2 left-2 -mb-6 h-20 w-auto max-w-64 rounded-lg border object-contain p-1"
           />
         )}
         <p className="text-sm text-slate-400">{t("common.preview")}</p>
         <div className="z-0 h-3/4 w-3/4">
           <SurveyInline
+            appUrl={publicDomain}
             isPreviewMode={true}
             survey={previewSurvey(projectName || "my Product", t)}
             styling={{ brandColor: { light: brandColor } }}

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/workspaces/new/settings/page.tsx

@@ -3,8 +3,9 @@ import Link from "next/link";
 import { redirect } from "next/navigation";
 import { TProjectConfigChannel, TProjectConfigIndustry, TProjectMode } from "@formbricks/types/project";
 import { getTeamsByOrganizationId } from "@/app/(app)/(onboarding)/lib/onboarding";
-import { ProjectSettings } from "@/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/settings/components/ProjectSettings";
+import { ProjectSettings } from "@/app/(app)/(onboarding)/organizations/[organizationId]/workspaces/new/settings/components/ProjectSettings";
 import { DEFAULT_BRAND_COLOR } from "@/lib/constants";
+import { getPublicDomain } from "@/lib/getPublicUrl";
 import { getUserProjects } from "@/lib/project/service";
 import { getTranslate } from "@/lingodotdev/server";
 import { getAccessControlPermission } from "@/modules/ee/license-check/lib/utils";
@@ -47,11 +48,13 @@ const Page = async (props: ProjectSettingsPageProps) => {
     throw new Error(t("common.organization_teams_not_found"));
   }
 
+  const publicDomain = getPublicDomain();
+
   return (
     <div className="flex min-h-full min-w-full flex-col items-center justify-center space-y-12">
       <Header
-        title={t("organizations.projects.new.settings.project_settings_title")}
-        subtitle={t("organizations.projects.new.settings.project_settings_subtitle")}
+        title={t("organizations.workspaces.new.settings.workspace_settings_title")}
+        subtitle={t("organizations.workspaces.new.settings.workspace_settings_subtitle")}
       />
       <ProjectSettings
         organizationId={params.organizationId}
@@ -62,10 +65,11 @@ const Page = async (props: ProjectSettingsPageProps) => {
         organizationTeams={organizationTeams}
         isAccessControlAllowed={isAccessControlAllowed}
         userProjectsCount={projects.length}
+        publicDomain={publicDomain}
       />
       {projects.length >= 1 && (
         <Button
-          className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
           variant="ghost"
           asChild>
           <Link href={"/"}>

apps/web/app/(app)/environments/[environmentId]/(contacts)/attributes/page.tsx

@@ -0,0 +1 @@
+export { AttributesPage as default } from "@/modules/ee/contacts/attributes/page";

apps/web/app/(app)/environments/[environmentId]/actions.ts

@@ -57,7 +57,7 @@ export const createProjectAction = authenticatedActionClient.schema(ZCreateProje
       const organizationProjectsCount = await getOrganizationProjectsCount(organization.id);
 
       if (organizationProjectsCount >= organizationProjectsLimit) {
-        throw new OperationNotAllowedError("Organization project limit reached");
+        throw new OperationNotAllowedError("Organization workspace limit reached");
       }
 
       if (parsedInput.data.teamIds && parsedInput.data.teamIds.length > 0) {

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

@@ -1,6 +1,7 @@
 import { MainNavigation } from "@/app/(app)/environments/[environmentId]/components/MainNavigation";
 import { TopControlBar } from "@/app/(app)/environments/[environmentId]/components/TopControlBar";
 import { IS_DEVELOPMENT, IS_FORMBRICKS_CLOUD } from "@/lib/constants";
+import { getPublicDomain } from "@/lib/getPublicUrl";
 import { getAccessFlags } from "@/lib/membership/utils";
 import { getTranslate } from "@/lingodotdev/server";
 import { getOrganizationProjectsLimit } from "@/modules/ee/license-check/lib/utils";
@@ -15,6 +16,7 @@ interface EnvironmentLayoutProps {
 
 export const EnvironmentLayout = async ({ layoutData, children }: EnvironmentLayoutProps) => {
   const t = await getTranslate();
+  const publicDomain = getPublicDomain();
 
   // Destructure all data from props (NO database queries)
   const {
@@ -41,7 +43,7 @@ export const EnvironmentLayout = async ({ layoutData, children }: EnvironmentLay
 
   // Validate that project permission exists for members
   if (isMember && !projectPermission) {
-    throw new Error(t("common.project_permission_not_found"));
+    throw new Error(t("common.workspace_permission_not_found"));
   }
 
   return (
@@ -72,6 +74,7 @@ export const EnvironmentLayout = async ({ layoutData, children }: EnvironmentLay
           isFormbricksCloud={IS_FORMBRICKS_CLOUD}
           isDevelopment={IS_DEVELOPMENT}
           membershipRole={membership.role}
+          publicDomain={publicDomain}
         />
         <div id="mainContent" className="flex flex-1 flex-col overflow-hidden bg-slate-50">
           <TopControlBar

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

@@ -46,6 +46,7 @@ interface NavigationProps {
   isFormbricksCloud: boolean;
   isDevelopment: boolean;
   membershipRole?: TOrganizationRole;
+  publicDomain: string;
 }
 
 export const MainNavigation = ({
@@ -56,6 +57,7 @@ export const MainNavigation = ({
   membershipRole,
   isFormbricksCloud,
   isDevelopment,
+  publicDomain,
 }: NavigationProps) => {
   const router = useRouter();
   const pathname = usePathname();
@@ -111,7 +113,7 @@ export const MainNavigation = ({
       },
       {
         name: t("common.configuration"),
-        href: `/environments/${environment.id}/project/general`,
+        href: `/environments/${environment.id}/workspace/general`,
         icon: Cog,
         isActive: pathname?.includes("/project"),
       },
@@ -162,7 +164,7 @@ export const MainNavigation = ({
         <aside
           className={cn(
             "z-40 flex flex-col justify-between rounded-r-xl border-r border-slate-200 bg-white pt-3 shadow-md transition-all duration-100",
-            !isCollapsed ? "w-sidebar-collapsed" : "w-sidebar-expanded"
+            isCollapsed ? "w-sidebar-expanded" : "w-sidebar-collapsed"
           )}>
           <div>
             {/* Logo and Toggle */}
@@ -183,7 +185,7 @@ export const MainNavigation = ({
                 size="icon"
                 onClick={toggleSidebar}
                 className={cn(
-                  "rounded-xl bg-slate-50 p-1 text-slate-600 transition-all hover:bg-slate-100 focus:outline-none focus:ring-0 focus:ring-transparent"
+                  "rounded-xl bg-slate-50 p-1 text-slate-600 transition-all hover:bg-slate-100 focus:ring-0 focus:ring-transparent focus:outline-none"
                 )}>
                 {isCollapsed ? (
                   <PanelLeftOpenIcon strokeWidth={1.5} />
@@ -286,15 +288,16 @@ export const MainNavigation = ({
                   {/* Logout */}
                   <DropdownMenuItem
                     onClick={async () => {
+                      const loginUrl = `${publicDomain}/auth/login`;
                       const route = await signOutWithAudit({
                         reason: "user_initiated",
-                        redirectUrl: "/auth/login",
+                        redirectUrl: loginUrl,
                         organizationId: organization.id,
                         redirect: false,
-                        callbackUrl: "/auth/login",
+                        callbackUrl: loginUrl,
                         clearEnvironmentId: true,
                       });
-                      router.push(route?.url || "/auth/login"); // NOSONAR // We want to check for empty strings
+                      router.push(route?.url || loginUrl); // NOSONAR // We want to check for empty strings
                     }}
                     icon={<LogOutIcon className="mr-2 h-4 w-4" strokeWidth={1.5} />}>
                     {t("common.logout")}

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

@@ -17,13 +17,13 @@ export const WidgetStatusIndicator = ({ environment }: WidgetStatusIndicatorProp
   const stati = {
     notImplemented: {
       icon: AlertTriangleIcon,
-      title: t("environments.project.app-connection.formbricks_sdk_not_connected"),
-      subtitle: t("environments.project.app-connection.formbricks_sdk_not_connected_description"),
+      title: t("environments.workspace.app-connection.formbricks_sdk_not_connected"),
+      subtitle: t("environments.workspace.app-connection.formbricks_sdk_not_connected_description"),
     },
     running: {
       icon: CheckIcon,
-      title: t("environments.project.app-connection.receiving_data"),
-      subtitle: t("environments.project.app-connection.formbricks_sdk_connected"),
+      title: t("environments.workspace.app-connection.receiving_data"),
+      subtitle: t("environments.workspace.app-connection.formbricks_sdk_connected"),
     },
   };
 
@@ -53,11 +53,11 @@ export const WidgetStatusIndicator = ({ environment }: WidgetStatusIndicatorProp
         <currentStatus.icon />
       </div>
       <p className="text-md font-bold text-slate-800 md:text-xl">{currentStatus.title}</p>
-      <p className="w-2/3 text-balance text-sm text-slate-600">{currentStatus.subtitle}</p>
+      <p className="w-2/3 text-sm text-balance text-slate-600">{currentStatus.subtitle}</p>
       {status === "notImplemented" && (
         <Button variant="outline" size="sm" className="bg-white" onClick={() => router.refresh()}>
           <RotateCcwIcon />
-          {t("environments.project.app-connection.recheck")}
+          {t("environments.workspace.app-connection.recheck")}
         </Button>
       )}
     </div>

apps/web/app/(app)/environments/[environmentId]/components/organization-breadcrumb.tsx

@@ -2,7 +2,7 @@
 
 import * as Sentry from "@sentry/nextjs";
 import {
-  BuildingIcon,
+  Building2Icon,
   ChevronDownIcon,
   ChevronRightIcon,
   Loader2,
@@ -135,7 +135,7 @@ export const OrganizationBreadcrumb = ({
     },
     {
       id: "teams",
-      label: t("common.teams"),
+      label: t("common.members_and_teams"),
       href: `/environments/${currentEnvironmentId}/settings/teams`,
     },
     {
@@ -144,6 +144,12 @@ export const OrganizationBreadcrumb = ({
       href: `/environments/${currentEnvironmentId}/settings/api-keys`,
       hidden: !isOwnerOrManager,
     },
+    {
+      id: "domain",
+      label: t("common.domain"),
+      href: `/environments/${currentEnvironmentId}/settings/domain`,
+      hidden: isFormbricksCloud,
+    },
     {
       id: "billing",
       label: t("common.billing"),
@@ -166,7 +172,7 @@ export const OrganizationBreadcrumb = ({
           id="organizationDropdownTrigger"
           asChild>
           <div className="flex items-center gap-1">
-            <BuildingIcon className="h-3 w-3" strokeWidth={1.5} />
+            <Building2Icon className="h-3 w-3" strokeWidth={1.5} />
             <span>{organizationName}</span>
             {isPending && <Loader2 className="h-3 w-3 animate-spin" strokeWidth={1.5} />}
             {isOrganizationDropdownOpen ? (
@@ -180,7 +186,7 @@ export const OrganizationBreadcrumb = ({
           {showOrganizationDropdown && (
             <>
               <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
-                <BuildingIcon className="mr-2 inline h-4 w-4" />
+                <Building2Icon className="mr-2 inline h-4 w-4" />
                 {t("common.choose_organization")}
               </div>
               {isLoadingOrganizations && (
@@ -203,7 +209,7 @@ export const OrganizationBreadcrumb = ({
               )}
               {!isLoadingOrganizations && !loadError && (
                 <>
-                  <DropdownMenuGroup>
+                  <DropdownMenuGroup className="max-h-[300px] overflow-y-auto">
                     {organizations.map((org) => (
                       <DropdownMenuCheckboxItem
                         key={org.id}

apps/web/app/(app)/environments/[environmentId]/components/project-breadcrumb.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as Sentry from "@sentry/nextjs";
-import { ChevronDownIcon, ChevronRightIcon, CogIcon, FolderOpenIcon, Loader2, PlusIcon } from "lucide-react";
+import { ChevronDownIcon, ChevronRightIcon, CogIcon, HotelIcon, Loader2, PlusIcon } from "lucide-react";
 import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useState, useTransition } from "react";
 import { useTranslation } from "react-i18next";
@@ -36,12 +36,12 @@ interface ProjectBreadcrumbProps {
 }
 
 const isActiveProjectSetting = (pathname: string, settingId: string): boolean => {
-  // Match /project/{settingId} or /project/{settingId}/... but exclude settings paths
+  // Match /workspace/{settingId} or /workspace/{settingId}/... but exclude settings paths
   if (pathname.includes("/settings/")) {
     return false;
   }
-  // Check if path matches /project/{settingId} (with optional trailing path)
-  const pattern = new RegExp(`/project/${settingId}(?:/|$)`);
+  // Check if path matches /workspace/{settingId} (with optional trailing path)
+  const pattern = new RegExp(`/workspace/${settingId}(?:/|$)`);
   return pattern.test(pathname);
 };
 
@@ -90,7 +90,7 @@ export const ProjectBreadcrumb = ({
           const error = new Error(errorMessage);
           logger.error(error, "Failed to load projects");
           Sentry.captureException(error);
-          setLoadError(errorMessage || t("common.failed_to_load_projects"));
+          setLoadError(errorMessage || t("common.failed_to_load_workspaces"));
         }
         setIsLoadingProjects(false);
       });
@@ -101,42 +101,42 @@ export const ProjectBreadcrumb = ({
     {
       id: "general",
       label: t("common.general"),
-      href: `/environments/${currentEnvironmentId}/project/general`,
+      href: `/environments/${currentEnvironmentId}/workspace/general`,
     },
     {
       id: "look",
       label: t("common.look_and_feel"),
-      href: `/environments/${currentEnvironmentId}/project/look`,
+      href: `/environments/${currentEnvironmentId}/workspace/look`,
     },
     {
       id: "app-connection",
       label: t("common.website_and_app_connection"),
-      href: `/environments/${currentEnvironmentId}/project/app-connection`,
+      href: `/environments/${currentEnvironmentId}/workspace/app-connection`,
     },
     {
       id: "integrations",
       label: t("common.integrations"),
-      href: `/environments/${currentEnvironmentId}/project/integrations`,
+      href: `/environments/${currentEnvironmentId}/workspace/integrations`,
     },
     {
       id: "teams",
       label: t("common.team_access"),
-      href: `/environments/${currentEnvironmentId}/project/teams`,
+      href: `/environments/${currentEnvironmentId}/workspace/teams`,
     },
     {
       id: "languages",
       label: t("common.survey_languages"),
-      href: `/environments/${currentEnvironmentId}/project/languages`,
+      href: `/environments/${currentEnvironmentId}/workspace/languages`,
     },
     {
       id: "tags",
       label: t("common.tags"),
-      href: `/environments/${currentEnvironmentId}/project/tags`,
+      href: `/environments/${currentEnvironmentId}/workspace/tags`,
     },
   ];
 
   if (!currentProject) {
-    const errorMessage = `Project not found for project id: ${currentProjectId}`;
+    const errorMessage = `Workspace not found for workspace id: ${currentProjectId}`;
     logger.error(errorMessage);
     Sentry.captureException(new Error(errorMessage));
     return;
@@ -145,7 +145,7 @@ export const ProjectBreadcrumb = ({
   const handleProjectChange = (projectId: string) => {
     if (projectId === currentProjectId) return;
     startTransition(() => {
-      router.push(`/projects/${projectId}/`);
+      router.push(`/workspaces/${projectId}/`);
     });
   };
 
@@ -159,7 +159,7 @@ export const ProjectBreadcrumb = ({
 
   const handleProjectSettingsNavigation = (settingId: string) => {
     startTransition(() => {
-      router.push(`/environments/${currentEnvironmentId}/project/${settingId}`);
+      router.push(`/environments/${currentEnvironmentId}/workspace/${settingId}`);
     });
   };
 
@@ -198,21 +198,21 @@ export const ProjectBreadcrumb = ({
           id="projectDropdownTrigger"
           asChild>
           <div className="flex items-center gap-1">
-            <FolderOpenIcon className="h-3 w-3" strokeWidth={1.5} />
+            <HotelIcon className="h-3 w-3" strokeWidth={1.5} />
             <span>{projectName}</span>
             {isPending && <Loader2 className="h-3 w-3 animate-spin" strokeWidth={1.5} />}
-            {isProjectDropdownOpen ? (
-              <ChevronDownIcon className="h-3 w-3" strokeWidth={1.5} />
+            {isEnvironmentBreadcrumbVisible && !isProjectDropdownOpen ? (
+              <ChevronRightIcon className="h-3 w-3" strokeWidth={1.5} />
             ) : (
-              isEnvironmentBreadcrumbVisible && <ChevronRightIcon className="h-3 w-3" strokeWidth={1.5} />
+              <ChevronDownIcon className="h-3 w-3" strokeWidth={1.5} />
             )}
           </div>
         </DropdownMenuTrigger>
 
         <DropdownMenuContent align="start" className="mt-2">
           <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
-            <FolderOpenIcon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
-            {t("common.choose_project")}
+            <HotelIcon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
+            {t("common.choose_workspace")}
           </div>
           {isLoadingProjects && (
             <div className="flex items-center justify-center py-2">
@@ -234,7 +234,7 @@ export const ProjectBreadcrumb = ({
           )}
           {!isLoadingProjects && !loadError && (
             <>
-              <DropdownMenuGroup>
+              <DropdownMenuGroup className="max-h-[300px] overflow-y-auto">
                 {projects.map((proj) => (
                   <DropdownMenuCheckboxItem
                     key={proj.id}
@@ -251,7 +251,7 @@ export const ProjectBreadcrumb = ({
                 <DropdownMenuCheckboxItem
                   onClick={handleAddProject}
                   className="w-full cursor-pointer justify-between">
-                  <span>{t("common.add_new_project")}</span>
+                  <span>{t("common.add_new_workspace")}</span>
                   <PlusIcon className="ml-2 h-4 w-4" strokeWidth={1.5} />
                 </DropdownMenuCheckboxItem>
               )}
@@ -261,7 +261,7 @@ export const ProjectBreadcrumb = ({
             <DropdownMenuSeparator />
             <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
               <CogIcon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
-              {t("common.project_configuration")}
+              {t("common.workspace_configuration")}
             </div>
             {projectSettings.map((setting) => (
               <DropdownMenuCheckboxItem

apps/web/app/(app)/environments/[environmentId]/project/integrations/notion/constants.ts

@@ -1,43 +0,0 @@
-import { TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
-
-export const TYPE_MAPPING = {
-  [TSurveyQuestionTypeEnum.CTA]: ["checkbox"],
-  [TSurveyQuestionTypeEnum.MultipleChoiceMulti]: ["multi_select"],
-  [TSurveyQuestionTypeEnum.MultipleChoiceSingle]: ["select", "status"],
-  [TSurveyQuestionTypeEnum.OpenText]: [
-    "created_by",
-    "created_time",
-    "email",
-    "last_edited_by",
-    "last_edited_time",
-    "number",
-    "phone_number",
-    "rich_text",
-    "title",
-    "url",
-  ],
-  [TSurveyQuestionTypeEnum.NPS]: ["number"],
-  [TSurveyQuestionTypeEnum.Consent]: ["checkbox"],
-  [TSurveyQuestionTypeEnum.Rating]: ["number"],
-  [TSurveyQuestionTypeEnum.PictureSelection]: ["url"],
-  [TSurveyQuestionTypeEnum.FileUpload]: ["url"],
-  [TSurveyQuestionTypeEnum.Date]: ["date"],
-  [TSurveyQuestionTypeEnum.Address]: ["rich_text"],
-  [TSurveyQuestionTypeEnum.Matrix]: ["rich_text"],
-  [TSurveyQuestionTypeEnum.Cal]: ["checkbox"],
-  [TSurveyQuestionTypeEnum.ContactInfo]: ["rich_text"],
-  [TSurveyQuestionTypeEnum.Ranking]: ["rich_text"],
-};
-
-export const UNSUPPORTED_TYPES_BY_NOTION = [
-  "rollup",
-  "created_by",
-  "created_time",
-  "last_edited_by",
-  "last_edited_time",
-];
-
-export const ERRORS = {
-  MAPPING: "Mapping Error",
-  UNSUPPORTED_TYPE: "Unsupported type by Notion",
-};

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

@@ -21,7 +21,7 @@ const AccountSettingsLayout = async (props) => {
   }
 
   if (!project) {
-    throw new Error(t("common.project_not_found"));
+    throw new Error(t("common.workspace_not_found"));
   }
 
   if (!session) {

apps/web/app/(app)/environments/[environmentId]/settings/(account)/notifications/components/IntegrationsTip.tsx

@@ -16,7 +16,7 @@ export const IntegrationsTip = ({ environmentId }: IntegrationsTipProps) => {
         <p className="text-sm">
           {t("environments.settings.notifications.need_slack_or_discord_notifications")}?
           <a
-            href={`/environments/${environmentId}/project/integrations`}
+            href={`/environments/${environmentId}/workspace/integrations`}
             className="ml-1 cursor-pointer text-sm underline">
             {t("environments.settings.notifications.use_the_integration")}
           </a>

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/actions.ts

@@ -58,7 +58,7 @@ async function handleEmailUpdate({
     payload.email = inputEmail;
     await updateBrevoCustomer({ id: ctx.user.id, email: inputEmail });
   } else {
-    await sendVerificationNewEmail(ctx.user.id, inputEmail);
+    await sendVerificationNewEmail(ctx.user.id, inputEmail, ctx.user.locale);
   }
   return payload;
 }

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/components/OrganizationSettingsNavbar.tsx

@@ -36,7 +36,7 @@ export const OrganizationSettingsNavbar = ({
     },
     {
       id: "teams",
-      label: t("common.teams"),
+      label: t("common.members_and_teams"),
       href: `/environments/${environmentId}/settings/teams`,
       current: pathname?.includes("/teams"),
     },
@@ -47,6 +47,13 @@ export const OrganizationSettingsNavbar = ({
       current: pathname?.includes("/api-keys"),
       hidden: !isOwner,
     },
+    {
+      id: "domain",
+      label: t("common.domain"),
+      href: `/environments/${environmentId}/settings/domain`,
+      current: pathname?.includes("/domain"),
+      hidden: isFormbricksCloud,
+    },
     {
       id: "billing",
       label: t("common.billing"),

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/domain/components/pretty-urls-table.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import Link from "next/link";
+import { useTranslation } from "react-i18next";
+import { TSurveyStatus } from "@formbricks/types/surveys/types";
+import { IdBadge } from "@/modules/ui/components/id-badge";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/modules/ui/components/table";
+
+interface SurveyWithSlug {
+  id: string;
+  name: string;
+  slug: string | null;
+  status: TSurveyStatus;
+  environment: {
+    id: string;
+    type: "production" | "development";
+    project: {
+      id: string;
+      name: string;
+    };
+  };
+  createdAt: Date;
+}
+
+interface PrettyUrlsTableProps {
+  surveys: SurveyWithSlug[];
+}
+
+export const PrettyUrlsTable = ({ surveys }: PrettyUrlsTableProps) => {
+  const { t } = useTranslation();
+
+  const getEnvironmentBadgeColor = (type: string) => {
+    return type === "production" ? "bg-green-100 text-green-800" : "bg-blue-100 text-blue-800";
+  };
+
+  const tableHeaders = [
+    {
+      label: t("environments.settings.domain.survey_name"),
+      key: "name",
+    },
+    {
+      label: t("environments.settings.domain.workspace"),
+      key: "project",
+    },
+    {
+      label: t("environments.settings.domain.pretty_url"),
+      key: "slug",
+    },
+    {
+      label: t("common.environment"),
+      key: "environment",
+    },
+  ];
+
+  return (
+    <div className="overflow-hidden rounded-lg">
+      <Table>
+        <TableHeader>
+          <TableRow className="bg-slate-100">
+            {tableHeaders.map((header) => (
+              <TableHead key={header.key} className="font-medium text-slate-500">
+                {header.label}
+              </TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody className="[&_tr:last-child]:border-b">
+          {surveys.length === 0 && (
+            <TableRow className="hover:bg-transparent">
+              <TableCell colSpan={4} className="text-center text-slate-500">
+                {t("environments.settings.domain.no_pretty_urls")}
+              </TableCell>
+            </TableRow>
+          )}
+          {surveys.map((survey) => (
+            <TableRow key={survey.id} className="border-slate-200 hover:bg-transparent">
+              <TableCell className="font-medium">
+                <Link
+                  href={`/environments/${survey.environment.id}/surveys/${survey.id}/summary`}
+                  className="text-slate-900 hover:text-slate-700 hover:underline">
+                  {survey.name}
+                </Link>
+              </TableCell>
+              <TableCell>{survey.environment.project.name}</TableCell>
+              <TableCell>
+                <IdBadge id={survey.slug ?? ""} />
+              </TableCell>
+              <TableCell>
+                <span
+                  className={`rounded px-2 py-1 text-xs font-medium ${getEnvironmentBadgeColor(survey.environment.type)}`}>
+                  {survey.environment.type === "production"
+                    ? t("common.production")
+                    : t("common.development")}
+                </span>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/domain/page.tsx

@@ -0,0 +1,72 @@
+import { notFound } from "next/navigation";
+import { IS_FORMBRICKS_CLOUD, IS_STORAGE_CONFIGURED } from "@/lib/constants";
+import { getTranslate } from "@/lingodotdev/server";
+import { getWhiteLabelPermission } from "@/modules/ee/license-check/lib/utils";
+import { FaviconCustomizationSettings } from "@/modules/ee/whitelabel/favicon-customization/components/favicon-customization-settings";
+import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
+import { getSurveysWithSlugsByOrganizationId } from "@/modules/survey/lib/slug";
+import { Alert, AlertDescription } from "@/modules/ui/components/alert";
+import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
+import { PageHeader } from "@/modules/ui/components/page-header";
+import { SettingsCard } from "../../components/SettingsCard";
+import { OrganizationSettingsNavbar } from "../components/OrganizationSettingsNavbar";
+import { PrettyUrlsTable } from "./components/pretty-urls-table";
+
+const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
+  const params = await props.params;
+  const t = await getTranslate();
+
+  if (IS_FORMBRICKS_CLOUD) {
+    return notFound();
+  }
+
+  const { session, currentUserMembership, organization, isOwner, isManager } = await getEnvironmentAuth(
+    params.environmentId
+  );
+
+  if (!session) {
+    throw new Error(t("common.session_not_found"));
+  }
+
+  const hasWhiteLabelPermission = await getWhiteLabelPermission(organization.billing.plan);
+  const isOwnerOrManager = isManager || isOwner;
+
+  const surveys = await getSurveysWithSlugsByOrganizationId(organization.id);
+
+  return (
+    <PageContentWrapper>
+      <PageHeader pageTitle={t("environments.settings.general.organization_settings")}>
+        <OrganizationSettingsNavbar
+          environmentId={params.environmentId}
+          isFormbricksCloud={IS_FORMBRICKS_CLOUD}
+          membershipRole={currentUserMembership?.role}
+          activeId="domain"
+        />
+      </PageHeader>
+
+      {!IS_STORAGE_CONFIGURED && (
+        <div className="max-w-4xl">
+          <Alert variant="warning">
+            <AlertDescription>{t("common.storage_not_configured")}</AlertDescription>
+          </Alert>
+        </div>
+      )}
+
+      <FaviconCustomizationSettings
+        organization={organization}
+        hasWhiteLabelPermission={hasWhiteLabelPermission}
+        environmentId={params.environmentId}
+        isReadOnly={!isOwnerOrManager}
+        isStorageConfigured={IS_STORAGE_CONFIGURED}
+      />
+
+      <SettingsCard
+        title={t("environments.settings.domain.title")}
+        description={t("environments.settings.domain.description")}>
+        <PrettyUrlsTable surveys={surveys} />
+      </SettingsCard>
+    </PageContentWrapper>
+  );
+};
+
+export default Page;

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/enterprise/page.tsx

@@ -39,7 +39,7 @@ const Page = async (props) => {
       onRequest: false,
     },
     {
-      title: t("environments.project.languages.multi_language_surveys"),
+      title: t("environments.workspace.languages.multi_language_surveys"),
       comingSoon: false,
       onRequest: false,
     },
@@ -118,7 +118,7 @@ const Page = async (props) => {
           <div className="relative isolate mt-8 overflow-hidden rounded-lg bg-slate-900 px-3 pt-8 shadow-2xl sm:px-8 md:pt-12 lg:flex lg:gap-x-10 lg:px-12 lg:pt-0">
             <svg
               viewBox="0 0 1024 1024"
-              className="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
+              className="absolute top-1/2 left-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
               aria-hidden="true">
               <circle
                 cx={512}

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/general/components/SecurityListTip.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { ShieldCheckIcon } from "lucide-react";
+import Link from "next/link";
+import { useTranslation } from "react-i18next";
+
+export const SecurityListTip = () => {
+  const { t } = useTranslation();
+  return (
+    <div className="max-w-4xl">
+      <div className="flex items-center space-x-3 rounded-lg border border-blue-100 bg-blue-50 p-4 text-sm text-blue-900 shadow-sm">
+        <ShieldCheckIcon className="h-5 w-5 flex-shrink-0 text-blue-400" />
+        <p className="text-sm">
+          {t("environments.settings.general.security_list_tip")}{" "}
+          <Link
+            href="https://formbricks.com/security#stay-informed-with-formbricks-security-updates"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="underline hover:text-blue-700">
+            {t("environments.settings.general.security_list_tip_link")}
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+};

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/general/page.tsx

@@ -12,6 +12,7 @@ import { PageHeader } from "@/modules/ui/components/page-header";
 import { SettingsCard } from "../../components/SettingsCard";
 import { DeleteOrganization } from "./components/DeleteOrganization";
 import { EditOrganizationNameForm } from "./components/EditOrganizationNameForm";
+import { SecurityListTip } from "./components/SecurityListTip";
 
 const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
   const params = await props.params;
@@ -48,6 +49,7 @@ const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
           </Alert>
         </div>
       )}
+      {!IS_FORMBRICKS_CLOUD && <SecurityListTip />}
       <SettingsCard
         title={t("environments.settings.general.organization_name")}
         description={t("environments.settings.general.organization_name_description")}>

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

@@ -21,7 +21,7 @@ const Layout = async (props) => {
   }
 
   if (!project) {
-    throw new Error(t("common.project_not_found"));
+    throw new Error(t("common.workspace_not_found"));
   }
 
   if (!session) {

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

@@ -27,7 +27,7 @@ export const EmptyAppSurveys = ({ environment }: TEmptyAppSurveysProps) => {
           {t("environments.surveys.summary.connect_your_website_or_app_with_formbricks_to_get_started")}
         </p>
 
-        <Link className="mt-2" href={`/environments/${environment.id}/project/app-connection`}>
+        <Link className="mt-2" href={`/environments/${environment.id}/workspace/app-connection`}>
           <Button size="sm" className="flex w-[120px] justify-center">
             {t("common.connect")}
           </Button>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/response-filter-context.tsx

@@ -2,14 +2,14 @@
 
 import React, { createContext, useCallback, useContext, useState } from "react";
 import {
-  QuestionOption,
-  QuestionOptions,
-} from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionsComboBox";
-import { QuestionFilterOptions } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ResponseFilter";
+  ElementOption,
+  ElementOptions,
+} from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ElementsComboBox";
+import { ElementFilterOptions } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ResponseFilter";
 import { getTodayDate } from "@/app/lib/surveys/surveys";
 
 export interface FilterValue {
-  questionType: Partial<QuestionOption>;
+  elementType: Partial<ElementOption>;
   filterType: {
     filterValue: string | undefined;
     filterComboBoxValue: string | string[] | undefined;
@@ -24,8 +24,8 @@ export interface SelectedFilterValue {
 }
 
 interface SelectedFilterOptions {
-  questionOptions: QuestionOptions[];
-  questionFilterOptions: QuestionFilterOptions[];
+  elementOptions: ElementOptions[];
+  elementFilterOptions: ElementFilterOptions[];
 }
 
 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>({
-    questionFilterOptions: [],
-    questionOptions: [],
+    elementFilterOptions: [],
+    elementOptions: [],
   });
 
   const [dateRange, setDateRange] = useState<DateRange>({

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

@@ -10,6 +10,7 @@ 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;
@@ -55,9 +56,11 @@ export const formatContactInfoData = (responseValue: TResponseDataValue): Record
 export const extractResponseData = (response: TResponseWithQuotas, survey: TSurvey): Record<string, any> => {
   const responseData: Record<string, any> = {};
 
-  for (const question of survey.questions) {
-    const responseValue = response.data[question.id];
-    switch (question.type) {
+  const elements = getElementsFromBlocks(survey.blocks);
+
+  for (const element of elements) {
+    const responseValue = response.data[element.id];
+    switch (element.type) {
       case "matrix":
         if (typeof responseValue === "object") {
           Object.assign(responseData, responseValue);
@@ -70,7 +73,7 @@ export const extractResponseData = (response: TResponseWithQuotas, survey: TSurv
         Object.assign(responseData, formatContactInfoData(responseValue));
         break;
       default:
-        responseData[question.id] = responseValue;
+        responseData[element.id] = responseValue;
     }
   }
 

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

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

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

@@ -58,6 +58,7 @@ export const sendEmbedSurveyPreviewEmailAction = authenticatedActionClient
       ctx.user.email,
       emailHtml,
       survey.environmentId,
+      ctx.user.locale,
       organizationLogoUrl || ""
     );
   });

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

@@ -2,27 +2,27 @@
 
 import Link from "next/link";
 import { useTranslation } from "react-i18next";
-import { TSurvey, TSurveyQuestionSummaryAddress } from "@formbricks/types/surveys/types";
+import { TSurvey, TSurveyElementSummaryAddress } 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 {
-  questionSummary: TSurveyQuestionSummaryAddress;
+  elementSummary: TSurveyElementSummaryAddress;
   environmentId: string;
   survey: TSurvey;
   locale: TUserLocale;
 }
 
-export const AddressSummary = ({ questionSummary, environmentId, survey, locale }: AddressSummaryProps) => {
+export const AddressSummary = ({ elementSummary, environmentId, survey, locale }: AddressSummaryProps) => {
   const { t } = useTranslation();
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
-      <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
+      <ElementSummaryHeader elementSummary={elementSummary} 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,12 +30,12 @@ export const AddressSummary = ({ questionSummary, 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">
-          {questionSummary.samples.length === 0 ? (
+          {elementSummary.samples.length === 0 ? (
             <div className="p-8">
               <EmptyState text={t("environments.surveys.summary.no_responses_found")} variant="simple" />
             </div>
           ) : (
-            questionSummary.samples.map((response) => {
+            elementSummary.samples.map((response) => {
               return (
                 <div
                   key={response.id}

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

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

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

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

@@ -2,24 +2,24 @@
 
 import Link from "next/link";
 import { useTranslation } from "react-i18next";
-import { TSurvey, TSurveyQuestionSummaryContactInfo } from "@formbricks/types/surveys/types";
+import { TSurvey, TSurveyElementSummaryContactInfo } 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 {
-  questionSummary: TSurveyQuestionSummaryContactInfo;
+  elementSummary: TSurveyElementSummaryContactInfo;
   environmentId: string;
   survey: TSurvey;
   locale: TUserLocale;
 }
 
 export const ContactInfoSummary = ({
-  questionSummary,
+  elementSummary,
   environmentId,
   survey,
   locale,
@@ -27,7 +27,7 @@ export const ContactInfoSummary = ({
   const { t } = useTranslation();
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
-      <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
+      <ElementSummaryHeader elementSummary={elementSummary} 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,12 +35,12 @@ 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">
-          {questionSummary.samples.length === 0 ? (
+          {elementSummary.samples.length === 0 ? (
             <div className="p-8">
               <EmptyState text={t("environments.surveys.summary.no_responses_found")} variant="simple" />
             </div>
           ) : (
-            questionSummary.samples.map((response) => {
+            elementSummary.samples.map((response) => {
               return (
                 <div
                   key={response.id}

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

@@ -3,7 +3,7 @@
 import Link from "next/link";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { TSurvey, TSurveyQuestionSummaryDate } from "@formbricks/types/surveys/types";
+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";
@@ -11,28 +11,23 @@ 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 { QuestionSummaryHeader } from "./QuestionSummaryHeader";
+import { ElementSummaryHeader } from "./ElementSummaryHeader";
 
-interface DateQuestionSummary {
-  questionSummary: TSurveyQuestionSummaryDate;
+interface DateElementSummary {
+  elementSummary: TSurveyElementSummaryDate;
   environmentId: string;
   survey: TSurvey;
   locale: TUserLocale;
 }
 
-export const DateQuestionSummary = ({
-  questionSummary,
-  environmentId,
-  survey,
-  locale,
-}: DateQuestionSummary) => {
+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, questionSummary.samples.length)
+      Math.min(prevVisibleResponses + 10, elementSummary.samples.length)
     );
   };
 
@@ -48,7 +43,7 @@ export const DateQuestionSummary = ({
 
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
-      <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
+      <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>
@@ -56,12 +51,12 @@ export const DateQuestionSummary = ({
           <div className="px-4 md:px-6">{t("common.time")}</div>
         </div>
         <div className="max-h-[62vh] w-full overflow-y-auto">
-          {questionSummary.samples.length === 0 ? (
+          {elementSummary.samples.length === 0 ? (
             <div className="p-8">
               <EmptyState text={t("environments.surveys.summary.no_responses_found")} variant="simple" />
             </div>
           ) : (
-            questionSummary.samples.slice(0, visibleResponses).map((response) => (
+            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">
@@ -96,7 +91,7 @@ export const DateQuestionSummary = ({
             ))
           )}
         </div>
-        {questionSummary.samples.length > 0 && visibleResponses < questionSummary.samples.length && (
+        {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")}

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

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

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

@@ -4,7 +4,7 @@ import { DownloadIcon, FileIcon } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { TSurvey, TSurveyQuestionSummaryFileUpload } from "@formbricks/types/surveys/types";
+import { TSurvey, TSurveyElementSummaryFileUpload } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";
 import { timeSince } from "@/lib/time";
 import { getContactIdentifier } from "@/lib/utils/contact";
@@ -12,17 +12,17 @@ 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 {
-  questionSummary: TSurveyQuestionSummaryFileUpload;
+  elementSummary: TSurveyElementSummaryFileUpload;
   environmentId: string;
   survey: TSurvey;
   locale: TUserLocale;
 }
 
 export const FileUploadSummary = ({
-  questionSummary,
+  elementSummary,
   environmentId,
   survey,
   locale,
@@ -32,13 +32,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, questionSummary.files.length)
+      Math.min(prevVisibleResponses + 10, elementSummary.files.length)
     );
   };
 
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
-      <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
+      <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>
@@ -46,12 +46,12 @@ 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">
-          {questionSummary.files.length === 0 ? (
+          {elementSummary.files.length === 0 ? (
             <div className="p-8">
               <EmptyState text={t("environments.surveys.summary.no_responses_found")} variant="simple" />
             </div>
           ) : (
-            questionSummary.files.slice(0, visibleResponses).map((response) => (
+            elementSummary.files.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">
@@ -116,7 +116,7 @@ export const FileUploadSummary = ({
             ))
           )}
         </div>
-        {questionSummary.files.length > 0 && visibleResponses < questionSummary.files.length && (
+        {elementSummary.files.length > 0 && visibleResponses < elementSummary.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,7 +4,7 @@ import { InboxIcon, Link, MessageSquareTextIcon } from "lucide-react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { TEnvironment } from "@formbricks/types/environment";
-import { TSurveyQuestionSummaryHiddenFields } from "@formbricks/types/surveys/types";
+import { TSurveyElementSummaryHiddenFields } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";
 import { timeSince } from "@/lib/time";
 import { getContactIdentifier } from "@/lib/utils/contact";
@@ -14,24 +14,24 @@ import { EmptyState } from "@/modules/ui/components/empty-state";
 
 interface HiddenFieldsSummaryProps {
   environment: TEnvironment;
-  questionSummary: TSurveyQuestionSummaryHiddenFields;
+  elementSummary: TSurveyElementSummaryHiddenFields;
   locale: TUserLocale;
 }
 
-export const HiddenFieldsSummary = ({ environment, questionSummary, locale }: HiddenFieldsSummaryProps) => {
+export const HiddenFieldsSummary = ({ environment, elementSummary, 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, questionSummary.samples.length)
+      Math.min(prevVisibleResponses + 10, elementSummary.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">{questionSummary.id}</h3>
+          <h3 className="pb-1 text-lg font-semibold text-slate-900 md:text-xl">{elementSummary.id}</h3>
         </div>
 
         <div className="flex space-x-2 text-xs font-semibold text-slate-600 md:text-sm">
@@ -41,8 +41,8 @@ export const HiddenFieldsSummary = ({ environment, questionSummary, locale }: Hi
           </div>
           <div className="flex items-center rounded-lg bg-slate-100 p-2">
             <InboxIcon className="mr-2 h-4 w-4" />
-            {questionSummary.responseCount}{" "}
-            {questionSummary.responseCount === 1 ? t("common.response") : t("common.responses")}
+            {elementSummary.responseCount}{" "}
+            {elementSummary.responseCount === 1 ? t("common.response") : t("common.responses")}
           </div>
         </div>
       </div>
@@ -52,12 +52,12 @@ export const HiddenFieldsSummary = ({ environment, questionSummary, locale }: Hi
           <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>
-        {questionSummary.samples.length === 0 ? (
+        {elementSummary.samples.length === 0 ? (
           <div className="p-8">
             <EmptyState text={t("environments.surveys.summary.no_responses_found")} variant="simple" />
           </div>
         ) : (
-          questionSummary.samples.slice(0, visibleResponses).map((response, idx) => (
+          elementSummary.samples.slice(0, visibleResponses).map((response, idx) => (
             <div
               key={`${response.value}-${idx}`}
               className="grid grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 md:text-base">
@@ -91,7 +91,7 @@ export const HiddenFieldsSummary = ({ environment, questionSummary, locale }: Hi
             </div>
           ))
         )}
-        {questionSummary.samples.length > 0 && visibleResponses < questionSummary.samples.length && (
+        {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")}

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

@@ -1,29 +1,25 @@
 "use client";
 
 import { useTranslation } from "react-i18next";
-import {
-  TI18nString,
-  TSurvey,
-  TSurveyQuestionId,
-  TSurveyQuestionSummaryMatrix,
-  TSurveyQuestionTypeEnum,
-} from "@formbricks/types/surveys/types";
+import { type TI18nString } from "@formbricks/types/i18n";
+import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+import { TSurvey, TSurveyElementSummaryMatrix } from "@formbricks/types/surveys/types";
 import { TooltipRenderer } from "@/modules/ui/components/tooltip";
-import { QuestionSummaryHeader } from "./QuestionSummaryHeader";
+import { ElementSummaryHeader } from "./ElementSummaryHeader";
 
-interface MatrixQuestionSummaryProps {
-  questionSummary: TSurveyQuestionSummaryMatrix;
+interface MatrixElementSummaryProps {
+  elementSummary: TSurveyElementSummaryMatrix;
   survey: TSurvey;
   setFilter: (
-    questionId: TSurveyQuestionId,
+    elementId: string,
     label: TI18nString,
-    questionType: TSurveyQuestionTypeEnum,
+    elementType: TSurveyElementTypeEnum,
     filterValue: string,
     filterComboBoxValue?: string | string[]
   ) => void;
 }
 
-export const MatrixQuestionSummary = ({ questionSummary, survey, setFilter }: MatrixQuestionSummaryProps) => {
+export const MatrixElementSummary = ({ elementSummary, survey, setFilter }: MatrixElementSummaryProps) => {
   const { t } = useTranslation();
   const getOpacityLevel = (percentage: number): string => {
     const parsedPercentage = percentage;
@@ -40,13 +36,11 @@ export const MatrixQuestionSummary = ({ questionSummary, survey, setFilter }: Ma
     return "";
   };
 
-  const columns = questionSummary.data[0]
-    ? questionSummary.data[0].columnPercentages.map((c) => c.column)
-    : [];
+  const columns = elementSummary.data[0] ? elementSummary.data[0].columnPercentages.map((c) => c.column) : [];
 
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
-      <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
+      <ElementSummaryHeader elementSummary={elementSummary} survey={survey} />
       <div className="overflow-x-auto p-6">
         {/* Summary Table  */}
         <table className="mx-auto border-collapse cursor-default text-left">
@@ -63,7 +57,7 @@ export const MatrixQuestionSummary = ({ questionSummary, survey, setFilter }: Ma
             </tr>
           </thead>
           <tbody>
-            {questionSummary.data.map(({ rowLabel, columnPercentages }, rowIndex) => (
+            {elementSummary.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}>
@@ -79,16 +73,16 @@ export const MatrixQuestionSummary = ({ questionSummary, survey, setFilter }: Ma
                       tooltipContent={getTooltipContent(
                         undefined,
                         percentage,
-                        questionSummary.data[rowIndex].totalResponsesForRow
+                        elementSummary.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(
-                            questionSummary.question.id,
-                            questionSummary.question.headline,
-                            questionSummary.question.type,
+                            elementSummary.element.id,
+                            elementSummary.element.headline,
+                            elementSummary.element.type,
                             rowLabel,
                             column
                           )

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

@@ -4,14 +4,9 @@ import { InboxIcon } from "lucide-react";
 import Link from "next/link";
 import { Fragment, useState } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  TI18nString,
-  TSurvey,
-  TSurveyQuestionId,
-  TSurveyQuestionSummaryMultipleChoice,
-  TSurveyQuestionTypeEnum,
-  TSurveyType,
-} from "@formbricks/types/surveys/types";
+import { TI18nString } from "@formbricks/types/i18n";
+import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+import { TSurvey, TSurveyElementSummaryMultipleChoice, 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";
@@ -19,24 +14,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 { QuestionSummaryHeader } from "./QuestionSummaryHeader";
+import { ElementSummaryHeader } from "./ElementSummaryHeader";
 
 interface MultipleChoiceSummaryProps {
-  questionSummary: TSurveyQuestionSummaryMultipleChoice;
+  elementSummary: TSurveyElementSummaryMultipleChoice;
   environmentId: string;
   surveyType: TSurveyType;
   survey: TSurvey;
   setFilter: (
-    questionId: TSurveyQuestionId,
+    elementId: string,
     label: TI18nString,
-    questionType: TSurveyQuestionTypeEnum,
+    elementType: TSurveyElementTypeEnum,
     filterValue: string,
     filterComboBoxValue?: string | string[]
   ) => void;
 }
 
 export const MultipleChoiceSummary = ({
-  questionSummary,
+  elementSummary,
   environmentId,
   surveyType,
   survey,
@@ -44,9 +39,9 @@ export const MultipleChoiceSummary = ({
 }: MultipleChoiceSummaryProps) => {
   const { t } = useTranslation();
   const [visibleOtherResponses, setVisibleOtherResponses] = useState(10);
-  const otherValue = questionSummary.question.choices.find((choice) => choice.id === "other")?.label.default;
+  const otherValue = elementSummary.element.choices.find((choice) => choice.id === "other")?.label.default;
   // sort by count and transform to array
-  const results = Object.values(questionSummary.choices).sort((a, b) => {
+  const results = Object.values(elementSummary.choices).sort((a, b) => {
     const aHasOthers = (a.others?.length ?? 0) > 0;
     const bHasOthers = (b.others?.length ?? 0) > 0;
 
@@ -73,14 +68,14 @@ export const MultipleChoiceSummary = ({
 
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
-      <QuestionSummaryHeader
-        questionSummary={questionSummary}
+      <ElementSummaryHeader
+        elementSummary={elementSummary}
         survey={survey}
         additionalInfo={
-          questionSummary.type === "multipleChoiceMulti" ? (
+          elementSummary.type === "multipleChoiceMulti" ? (
             <div className="flex items-center rounded-lg bg-slate-100 p-2">
               <InboxIcon className="mr-2 h-4 w-4" />
-              {`${questionSummary.selectionCount} ${t("common.selections")}`}
+              {`${elementSummary.selectionCount} ${t("common.selections")}`}
             </div>
           ) : undefined
         }
@@ -88,7 +83,7 @@ export const MultipleChoiceSummary = ({
       <div className="px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
         <div className="space-y-5">
           {results.map((result) => {
-            const choiceId = getChoiceIdByValue(result.value, questionSummary.question);
+            const choiceId = getChoiceIdByValue(result.value, elementSummary.element);
             return (
               <Fragment key={result.value}>
                 <button
@@ -96,10 +91,11 @@ export const MultipleChoiceSummary = ({
                   className="group w-full cursor-pointer"
                   onClick={() =>
                     setFilter(
-                      questionSummary.question.id,
-                      questionSummary.question.headline,
-                      questionSummary.question.type,
-                      questionSummary.type === "multipleChoiceSingle" || otherValue === result.value
+                      elementSummary.element.id,
+                      elementSummary.element.headline,
+                      elementSummary.element.type,
+                      elementSummary.type === TSurveyElementTypeEnum.MultipleChoiceSingle ||
+                        otherValue === result.value
                         ? t("environments.surveys.summary.includes_either")
                         : t("environments.surveys.summary.includes_all"),
                       [result.value]

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

@@ -3,28 +3,24 @@
 import { BarChart, BarChartHorizontal } from "lucide-react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  TI18nString,
-  TSurvey,
-  TSurveyQuestionId,
-  TSurveyQuestionSummaryNps,
-  TSurveyQuestionTypeEnum,
-} from "@formbricks/types/surveys/types";
+import { type TI18nString } from "@formbricks/types/i18n";
+import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+import { TSurvey, TSurveyElementSummaryNps } 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 { QuestionSummaryHeader } from "./QuestionSummaryHeader";
+import { ElementSummaryHeader } from "./ElementSummaryHeader";
 import { SatisfactionIndicator } from "./SatisfactionIndicator";
 
 interface NPSSummaryProps {
-  questionSummary: TSurveyQuestionSummaryNps;
+  elementSummary: TSurveyElementSummaryNps;
   survey: TSurvey;
   setFilter: (
-    questionId: TSurveyQuestionId,
+    elementId: string,
     label: TI18nString,
-    questionType: TSurveyQuestionTypeEnum,
+    elementType: TSurveyElementTypeEnum,
     filterValue: string,
     filterComboBoxValue?: string | string[]
   ) => void;
@@ -40,7 +36,7 @@ const calculateNPSOpacity = (rating: number): number => {
   return 0.8 + ((rating - 8) / 2) * 0.2;
 };
 
-export const NPSSummary = ({ questionSummary, survey, setFilter }: NPSSummaryProps) => {
+export const NPSSummary = ({ elementSummary, survey, setFilter }: NPSSummaryProps) => {
   const { t } = useTranslation();
   const [activeTab, setActiveTab] = useState<"aggregated" | "individual">("aggregated");
 
@@ -68,9 +64,9 @@ export const NPSSummary = ({ questionSummary, survey, setFilter }: NPSSummaryPro
 
     if (filter) {
       setFilter(
-        questionSummary.question.id,
-        questionSummary.question.headline,
-        questionSummary.question.type,
+        elementSummary.element.id,
+        elementSummary.element.headline,
+        elementSummary.element.type,
         filter.comparison,
         filter.values
       );
@@ -79,15 +75,15 @@ export const NPSSummary = ({ questionSummary, survey, setFilter }: NPSSummaryPro
 
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
-      <QuestionSummaryHeader
-        questionSummary={questionSummary}
+      <ElementSummaryHeader
+        elementSummary={elementSummary}
         survey={survey}
         additionalInfo={
           <div className="flex items-center space-x-2 rounded-lg bg-slate-100 p-2">
-            <SatisfactionIndicator percentage={questionSummary.promoters.percentage} />
+            <SatisfactionIndicator percentage={elementSummary.promoters.percentage} />
             <div>
               {t("environments.surveys.summary.promoters")}:{" "}
-              {convertFloatToNDecimal(questionSummary.promoters.percentage, 2)}%
+              {convertFloatToNDecimal(elementSummary.promoters.percentage, 2)}%
             </div>
           </div>
         }
@@ -122,18 +118,18 @@ export const NPSSummary = ({ questionSummary, survey, setFilter }: NPSSummaryPro
                       </p>
                       <div>
                         <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
-                          {convertFloatToNDecimal(questionSummary[group]?.percentage, 2)}%
+                          {convertFloatToNDecimal(elementSummary[group]?.percentage, 2)}%
                         </p>
                       </div>
                     </div>
                     <p className="flex w-32 items-end justify-end text-slate-600">
-                      {questionSummary[group]?.count}{" "}
-                      {questionSummary[group]?.count === 1 ? t("common.response") : t("common.responses")}
+                      {elementSummary[group]?.count}{" "}
+                      {elementSummary[group]?.count === 1 ? t("common.response") : t("common.responses")}
                     </p>
                   </div>
                   <ProgressBar
                     barColor={group === "dismissed" ? "bg-slate-600" : "bg-brand-dark"}
-                    progress={questionSummary[group]?.percentage / 100}
+                    progress={elementSummary[group]?.percentage / 100}
                   />
                 </button>
               ))}
@@ -144,7 +140,7 @@ export const NPSSummary = ({ questionSummary, survey, setFilter }: NPSSummaryPro
         <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">
-              {questionSummary.choices.map((choice) => {
+              {elementSummary.choices.map((choice) => {
                 const opacity = calculateNPSOpacity(choice.rating);
 
                 return (
@@ -153,9 +149,9 @@ export const NPSSummary = ({ questionSummary, survey, setFilter }: NPSSummaryPro
                     className="group flex cursor-pointer flex-col items-center"
                     onClick={() =>
                       setFilter(
-                        questionSummary.question.id,
-                        questionSummary.question.headline,
-                        questionSummary.question.type,
+                        elementSummary.element.id,
+                        elementSummary.element.headline,
+                        elementSummary.element.type,
                         t("environments.surveys.summary.is_equal_to"),
                         choice.rating.toString()
                       )
@@ -187,7 +183,7 @@ export const NPSSummary = ({ questionSummary, survey, setFilter }: NPSSummaryPro
       </Tabs>
 
       <div className="flex justify-center pb-4 pt-4">
-        <HalfCircle value={questionSummary.score} />
+        <HalfCircle value={elementSummary.score} />
       </div>
     </div>
   );

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

@@ -3,7 +3,7 @@
 import Link from "next/link";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { TSurvey, TSurveyQuestionSummaryOpenText } from "@formbricks/types/surveys/types";
+import { TSurvey, TSurveyElementSummaryOpenText } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";
 import { timeSince } from "@/lib/time";
 import { getContactIdentifier } from "@/lib/utils/contact";
@@ -12,31 +12,31 @@ 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 { QuestionSummaryHeader } from "./QuestionSummaryHeader";
+import { ElementSummaryHeader } from "./ElementSummaryHeader";
 
 interface OpenTextSummaryProps {
-  questionSummary: TSurveyQuestionSummaryOpenText;
+  elementSummary: TSurveyElementSummaryOpenText;
   environmentId: string;
   survey: TSurvey;
   locale: TUserLocale;
 }
 
-export const OpenTextSummary = ({ questionSummary, environmentId, survey, locale }: OpenTextSummaryProps) => {
+export const OpenTextSummary = ({ elementSummary, 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, questionSummary.samples.length)
+      Math.min(prevVisibleResponses + 10, elementSummary.samples.length)
     );
   };
 
   return (
     <div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
-      <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
+      <ElementSummaryHeader elementSummary={elementSummary} survey={survey} />
       <div className="border-t border-slate-200"></div>
-      {questionSummary.samples.length === 0 ? (
+      {elementSummary.samples.length === 0 ? (
         <div className="p-8">
           <EmptyState text={t("environments.surveys.summary.no_responses_found")} variant="simple" />
         </div>
@@ -51,7 +51,7 @@ export const OpenTextSummary = ({ questionSummary, environmentId, survey, locale
               </TableRow>
             </TableHeader>
             <TableBody>
-              {questionSummary.samples.slice(0, visibleResponses).map((response) => (
+              {elementSummary.samples.slice(0, visibleResponses).map((response) => (
                 <TableRow key={response.id}>
                   <TableCell className="w-1/4">
                     {response.contact ? (
@@ -86,7 +86,7 @@ export const OpenTextSummary = ({ questionSummary, environmentId, survey, locale
               ))}
             </TableBody>
           </Table>
-          {visibleResponses < questionSummary.samples.length && (
+          {visibleResponses < elementSummary.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/PictureChoiceSummary.tsx

@@ -3,52 +3,48 @@
 import { InboxIcon } from "lucide-react";
 import Image from "next/image";
 import { useTranslation } from "react-i18next";
-import {
-  TI18nString,
-  TSurvey,
-  TSurveyQuestionId,
-  TSurveyQuestionSummaryPictureSelection,
-  TSurveyQuestionTypeEnum,
-} from "@formbricks/types/surveys/types";
+import { type TI18nString } from "@formbricks/types/i18n";
+import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+import { TSurvey, TSurveyElementSummaryPictureSelection } 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 { QuestionSummaryHeader } from "./QuestionSummaryHeader";
+import { ElementSummaryHeader } from "./ElementSummaryHeader";
 
 interface PictureChoiceSummaryProps {
-  questionSummary: TSurveyQuestionSummaryPictureSelection;
+  elementSummary: TSurveyElementSummaryPictureSelection;
   survey: TSurvey;
   setFilter: (
-    questionId: TSurveyQuestionId,
+    elementId: string,
     label: TI18nString,
-    questionType: TSurveyQuestionTypeEnum,
+    elementType: TSurveyElementTypeEnum,
     filterValue: string,
     filterComboBoxValue?: string | string[]
   ) => void;
 }
 
-export const PictureChoiceSummary = ({ questionSummary, survey, setFilter }: PictureChoiceSummaryProps) => {
-  const results = questionSummary.choices;
+export const PictureChoiceSummary = ({ elementSummary, survey, setFilter }: PictureChoiceSummaryProps) => {
+  const results = elementSummary.choices;
   const { t } = useTranslation();
 
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
-      <QuestionSummaryHeader
-        questionSummary={questionSummary}
+      <ElementSummaryHeader
+        elementSummary={elementSummary}
         survey={survey}
         additionalInfo={
-          questionSummary.question.allowMulti ? (
+          elementSummary.element.allowMulti ? (
             <div className="flex items-center rounded-lg bg-slate-100 p-2">
               <InboxIcon className="mr-2 h-4 w-4" />
-              {`${questionSummary.selectionCount} ${t("common.selections")}`}
+              {`${elementSummary.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, questionSummary.question);
+          const choiceId = getChoiceIdByValue(result.imageUrl, elementSummary.element);
           return (
             <button
               type="button"
@@ -56,9 +52,9 @@ export const PictureChoiceSummary = ({ questionSummary, survey, setFilter }: Pic
               key={result.id}
               onClick={() =>
                 setFilter(
-                  questionSummary.question.id,
-                  questionSummary.question.headline,
-                  questionSummary.question.type,
+                  elementSummary.element.id,
+                  elementSummary.element.headline,
+                  elementSummary.element.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/RankingSummary.tsx

@@ -1,28 +1,28 @@
 import { useTranslation } from "react-i18next";
-import { TSurvey, TSurveyQuestionSummaryRanking } from "@formbricks/types/surveys/types";
+import { TSurvey, TSurveyElementSummaryRanking } 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 { QuestionSummaryHeader } from "./QuestionSummaryHeader";
+import { ElementSummaryHeader } from "./ElementSummaryHeader";
 
 interface RankingSummaryProps {
-  questionSummary: TSurveyQuestionSummaryRanking;
+  elementSummary: TSurveyElementSummaryRanking;
   survey: TSurvey;
 }
 
-export const RankingSummary = ({ questionSummary, survey }: RankingSummaryProps) => {
+export const RankingSummary = ({ elementSummary, survey }: RankingSummaryProps) => {
   // sort by count and transform to array
   const { t } = useTranslation();
-  const results = Object.values(questionSummary.choices).sort((a, b) => {
+  const results = Object.values(elementSummary.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">
-      <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
+      <ElementSummaryHeader elementSummary={elementSummary} 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, questionSummary.question);
+          const choiceId = getChoiceIdByValue(result.value, elementSummary.element);
           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,13 +3,9 @@
 import { BarChart, BarChartHorizontal, CircleSlash2, SmileIcon, StarIcon } from "lucide-react";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  TI18nString,
-  TSurvey,
-  TSurveyQuestionId,
-  TSurveyQuestionSummaryRating,
-  TSurveyQuestionTypeEnum,
-} from "@formbricks/types/surveys/types";
+import { type TI18nString } from "@formbricks/types/i18n";
+import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+import { TSurvey, TSurveyElementSummaryRating } 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";
@@ -17,52 +13,51 @@ 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 { QuestionSummaryHeader } from "./QuestionSummaryHeader";
+import { ElementSummaryHeader } from "./ElementSummaryHeader";
 import { RatingScaleLegend } from "./RatingScaleLegend";
 import { SatisfactionIndicator } from "./SatisfactionIndicator";
 
 interface RatingSummaryProps {
-  questionSummary: TSurveyQuestionSummaryRating;
+  elementSummary: TSurveyElementSummaryRating;
   survey: TSurvey;
   setFilter: (
-    questionId: TSurveyQuestionId,
+    elementId: string,
     label: TI18nString,
-    questionType: TSurveyQuestionTypeEnum,
+    elementType: TSurveyElementTypeEnum,
     filterValue: string,
     filterComboBoxValue?: string | string[]
   ) => void;
 }
 
-export const RatingSummary = ({ questionSummary, survey, setFilter }: RatingSummaryProps) => {
+export const RatingSummary = ({ elementSummary, survey, setFilter }: RatingSummaryProps) => {
   const { t } = useTranslation();
   const [activeTab, setActiveTab] = useState<"aggregated" | "individual">("aggregated");
 
   const getIconBasedOnScale = useMemo(() => {
-    const scale = questionSummary.question.scale;
+    const scale = elementSummary.element.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" />;
-  }, [questionSummary]);
+  }, [elementSummary]);
 
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
-      <QuestionSummaryHeader
-        questionSummary={questionSummary}
+      <ElementSummaryHeader
+        elementSummary={elementSummary}
         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")}: {questionSummary.average.toFixed(2)}
+                {t("environments.surveys.summary.overall")}: {elementSummary.average.toFixed(2)}
               </div>
             </div>
 
             <div className="flex items-center space-x-2 rounded-lg bg-slate-100 p-2">
-              <SatisfactionIndicator percentage={questionSummary.csat.satisfiedPercentage} />
+              <SatisfactionIndicator percentage={elementSummary.csat.satisfiedPercentage} />
               <div>
-                CSAT: {questionSummary.csat.satisfiedPercentage}%{" "}
-                {t("environments.surveys.summary.satisfied")}
+                CSAT: {elementSummary.csat.satisfiedPercentage}% {t("environments.surveys.summary.satisfied")}
               </div>
             </div>
           </div>
@@ -83,25 +78,25 @@ export const RatingSummary = ({ questionSummary, survey, setFilter }: RatingSumm
 
         <TabsContent value="aggregated" className="mt-4">
           <div className="px-4 pb-6 pt-4 md:px-6">
-            {questionSummary.responseCount === 0 ? (
+            {elementSummary.responseCount === 0 ? (
               <>
                 <EmptyState text={t("environments.surveys.summary.no_responses_found")} variant="simple" />
                 <RatingScaleLegend
-                  scale={questionSummary.question.scale}
-                  range={questionSummary.question.range}
+                  scale={elementSummary.element.scale}
+                  range={elementSummary.element.range}
                 />
               </>
             ) : (
               <>
                 <TooltipProvider delayDuration={200}>
                   <div className="flex h-12 w-full overflow-hidden rounded-t-lg border border-slate-200">
-                    {questionSummary.choices.map((result, index) => {
+                    {elementSummary.choices.map((result, index) => {
                       if (result.percentage === 0) return null;
 
-                      const range = questionSummary.question.range;
+                      const range = elementSummary.element.range;
                       const opacity = 0.3 + (result.rating / range) * 0.8;
                       const isFirst = index === 0;
-                      const isLast = index === questionSummary.choices.length - 1;
+                      const isLast = index === elementSummary.choices.length - 1;
 
                       return (
                         <ClickableBarSegment
@@ -113,9 +108,9 @@ export const RatingSummary = ({ questionSummary, survey, setFilter }: RatingSumm
                           }}
                           onClick={() =>
                             setFilter(
-                              questionSummary.question.id,
-                              questionSummary.question.headline,
-                              questionSummary.question.type,
+                              elementSummary.element.id,
+                              elementSummary.element.headline,
+                              elementSummary.element.type,
                               t("environments.surveys.summary.is_equal_to"),
                               result.rating.toString()
                             )
@@ -130,7 +125,7 @@ export const RatingSummary = ({ questionSummary, survey, setFilter }: RatingSumm
                   </div>
                 </TooltipProvider>
                 <div className="flex w-full overflow-hidden rounded-b-lg border border-t-0 border-slate-200 bg-slate-50">
-                  {questionSummary.choices.map((result, index) => {
+                  {elementSummary.choices.map((result, index) => {
                     if (result.percentage === 0) return null;
 
                     return (
@@ -140,15 +135,15 @@ export const RatingSummary = ({ questionSummary, survey, setFilter }: RatingSumm
                         style={{
                           width: `${result.percentage}%`,
                           borderRight:
-                            index < questionSummary.choices.length - 1
+                            index < elementSummary.choices.length - 1
                               ? "1px solid rgb(226, 232, 240)"
                               : "none",
                         }}>
                         <div className="mb-1 flex items-center justify-center">
                           <RatingResponse
-                            scale={questionSummary.question.scale}
+                            scale={elementSummary.element.scale}
                             answer={result.rating}
-                            range={questionSummary.question.range}
+                            range={elementSummary.element.range}
                             addColors={false}
                             variant="aggregated"
                           />
@@ -161,8 +156,8 @@ export const RatingSummary = ({ questionSummary, survey, setFilter }: RatingSumm
                   })}
                 </div>
                 <RatingScaleLegend
-                  scale={questionSummary.question.scale}
-                  range={questionSummary.question.range}
+                  scale={elementSummary.element.scale}
+                  range={elementSummary.element.range}
                 />
               </>
             )}
@@ -172,15 +167,15 @@ export const RatingSummary = ({ questionSummary, survey, setFilter }: RatingSumm
         <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">
-              {questionSummary.choices.map((result) => (
+              {elementSummary.choices.map((result) => (
                 <div key={result.rating}>
                   <button
                     className="w-full cursor-pointer hover:opacity-80"
                     onClick={() =>
                       setFilter(
-                        questionSummary.question.id,
-                        questionSummary.question.headline,
-                        questionSummary.question.type,
+                        elementSummary.element.id,
+                        elementSummary.element.headline,
+                        elementSummary.element.type,
                         t("environments.surveys.summary.is_equal_to"),
                         result.rating.toString()
                       )
@@ -189,10 +184,10 @@ export const RatingSummary = ({ questionSummary, survey, setFilter }: RatingSumm
                       <div className="mr-8 flex items-center space-x-1">
                         <div className="font-semibold text-slate-700">
                           <RatingResponse
-                            scale={questionSummary.question.scale}
+                            scale={elementSummary.element.scale}
                             answer={result.rating}
-                            range={questionSummary.question.range}
-                            addColors={questionSummary.question.isColorCodingEnabled}
+                            range={elementSummary.element.range}
+                            addColors={elementSummary.element.isColorCodingEnabled}
                             variant="individual"
                           />
                         </div>
@@ -214,14 +209,14 @@ export const RatingSummary = ({ questionSummary, survey, setFilter }: RatingSumm
           </div>
         </TabsContent>
       </Tabs>
-      {questionSummary.dismissed && questionSummary.dismissed.count > 0 && (
+      {elementSummary.dismissed && elementSummary.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">
-                {questionSummary.dismissed.count}{" "}
-                {questionSummary.dismissed.count === 1 ? t("common.response") : t("common.responses")}
+                {elementSummary.dismissed.count}{" "}
+                {elementSummary.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,10 +2,11 @@
 
 import { TimerIcon } from "lucide-react";
 import { useTranslation } from "react-i18next";
-import { TSurvey, TSurveyQuestionType, TSurveySummary } from "@formbricks/types/surveys/types";
+import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+import { TSurvey, TSurveySummary } from "@formbricks/types/surveys/types";
 import { recallToHeadline } from "@/lib/utils/recall";
 import { formatTextWithSlashes } from "@/modules/survey/editor/lib/utils";
-import { getQuestionIcon } from "@/modules/survey/lib/questions";
+import { getElementIcon } from "@/modules/survey/lib/elements";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/modules/ui/components/tooltip";
 
 interface SummaryDropOffsProps {
@@ -15,8 +16,8 @@ interface SummaryDropOffsProps {
 
 export const SummaryDropOffs = ({ dropOff, survey }: SummaryDropOffsProps) => {
   const { t } = useTranslation();
-  const getIcon = (questionType: TSurveyQuestionType) => {
-    const Icon = getQuestionIcon(questionType, t);
+  const getIcon = (elementType: TSurveyElementTypeEnum) => {
+    const Icon = getElementIcon(elementType, t);
     return <Icon className="mt-[3px] h-5 w-5 shrink-0 text-slate-600" />;
   };
 
@@ -44,10 +45,10 @@ export const SummaryDropOffs = ({ dropOff, survey }: SummaryDropOffsProps) => {
         </div>
         {dropOff.map((quesDropOff) => (
           <div
-            key={quesDropOff.questionId}
+            key={quesDropOff.elementId}
             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.questionType)}
+              {getIcon(quesDropOff.elementType)}
               <p>
                 {formatTextWithSlashes(
                   recallToHeadline(

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

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

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

@@ -213,6 +213,7 @@ export const SurveyAnalysisCTA = ({
           isFormbricksCloud={isFormbricksCloud}
           isReadOnly={isReadOnly}
           isStorageConfigured={isStorageConfigured}
+          projectCustomScripts={project.customHeadScripts}
         />
       )}
       <SuccessMessage environment={environment} survey={survey} />

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/share-survey-modal.tsx

@@ -3,7 +3,8 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import {
   Code2Icon,
-  LinkIcon,
+  CodeIcon,
+  Link2Icon,
   MailIcon,
   QrCodeIcon,
   Settings,
@@ -18,10 +19,12 @@ import { TSurvey } from "@formbricks/types/surveys/types";
 import { TUser } from "@formbricks/types/user";
 import { AnonymousLinksTab } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/anonymous-links-tab";
 import { AppTab } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/app-tab";
+import { CustomHtmlTab } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/custom-html-tab";
 import { DynamicPopupTab } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/dynamic-popup-tab";
 import { EmailTab } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/email-tab";
 import { LinkSettingsTab } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/link-settings-tab";
 import { PersonalLinksTab } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/personal-links-tab";
+import { PrettyUrlTab } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/pretty-url-tab";
 import { QRCodeTab } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/qr-code-tab";
 import { SocialMediaTab } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/social-media-tab";
 import { TabContainer } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/tab-container";
@@ -50,6 +53,7 @@ interface ShareSurveyModalProps {
   isFormbricksCloud: boolean;
   isReadOnly: boolean;
   isStorageConfigured: boolean;
+  projectCustomScripts?: string | null;
 }
 
 export const ShareSurveyModal = ({
@@ -64,6 +68,7 @@ export const ShareSurveyModal = ({
   isFormbricksCloud,
   isReadOnly,
   isStorageConfigured,
+  projectCustomScripts,
 }: ShareSurveyModalProps) => {
   const environmentId = survey.environmentId;
   const [surveyUrl, setSurveyUrl] = useState<string>(getSurveyUrl(survey, publicDomain, "default"));
@@ -80,13 +85,13 @@ export const ShareSurveyModal = ({
     componentType: React.ComponentType<unknown>;
     componentProps: unknown;
     disabled?: boolean;
-  }[] = useMemo(
-    () => [
+  }[] = useMemo(() => {
+    const tabs = [
       {
         id: ShareViaType.ANON_LINKS,
         type: LinkTabsType.SHARE_VIA,
         label: t("environments.surveys.share.anonymous_links.nav_title"),
-        icon: LinkIcon,
+        icon: Link2Icon,
         title: t("environments.surveys.share.anonymous_links.nav_title"),
         description: t("environments.surveys.share.anonymous_links.description"),
         componentType: AnonymousLinksTab,
@@ -180,22 +185,49 @@ export const ShareSurveyModal = ({
         componentType: LinkSettingsTab,
         componentProps: { isReadOnly, locale: user.locale, isStorageConfigured },
       },
-    ],
-    [
-      t,
-      survey,
-      publicDomain,
-      user.locale,
-      surveyUrl,
-      isReadOnly,
-      environmentId,
-      segments,
-      isContactsEnabled,
-      isFormbricksCloud,
-      email,
-      isStorageConfigured,
-    ]
-  );
+      {
+        id: ShareSettingsType.PRETTY_URL,
+        type: LinkTabsType.SHARE_SETTING,
+        label: t("environments.surveys.share.pretty_url.title"),
+        icon: Link2Icon,
+        title: t("environments.surveys.share.pretty_url.title"),
+        description: t("environments.surveys.share.pretty_url.description"),
+        componentType: PrettyUrlTab,
+        componentProps: { publicDomain, isReadOnly },
+      },
+      {
+        id: ShareSettingsType.CUSTOM_HTML,
+        type: LinkTabsType.SHARE_SETTING,
+        label: t("environments.surveys.share.custom_html.nav_title"),
+        icon: CodeIcon,
+        title: t("environments.surveys.share.custom_html.nav_title"),
+        description: t("environments.surveys.share.custom_html.description"),
+        componentType: CustomHtmlTab,
+        componentProps: { projectCustomScripts, isReadOnly },
+      },
+    ];
+
+    // Filter out tabs that should not be shown on Formbricks Cloud
+    return isFormbricksCloud
+      ? tabs.filter(
+          (tab) => tab.id !== ShareSettingsType.PRETTY_URL && tab.id !== ShareSettingsType.CUSTOM_HTML
+        )
+      : tabs;
+  }, [
+    t,
+    survey,
+    publicDomain,
+    user.locale,
+    surveyUrl,
+    isReadOnly,
+    environmentId,
+    segments,
+    isContactsEnabled,
+    isFormbricksCloud,
+    email,
+    isStorageConfigured,
+    projectCustomScripts,
+  ]);
 
   const getDefaultActiveId = useCallback(() => {
     if (survey.type !== "link") {

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

@@ -2,7 +2,7 @@
 
 import { CirclePlayIcon, CopyIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { TSurvey } from "@formbricks/types/surveys/types";
@@ -34,7 +34,6 @@ export const AnonymousLinksTab = ({
   locale,
   isReadOnly,
 }: AnonymousLinksTabProps) => {
-  const surveyUrlWithCustomSuid = `${surveyUrl}?suId=CUSTOM-ID`;
   const router = useRouter();
   const { t } = useTranslation();
 
@@ -49,6 +48,12 @@ export const AnonymousLinksTab = ({
     pendingAction: () => Promise<void> | void;
   } | null>(null);
 
+  const surveyUrlWithCustomSuid = useMemo(() => {
+    const url = new URL(surveyUrl);
+    url.searchParams.set("suId", "CUSTOM-ID");
+    return url.toString();
+  }, [surveyUrl]);
+
   const resetState = () => {
     const { singleUse } = survey;
     const { enabled, isEncrypted } = singleUse ?? {};
@@ -177,7 +182,11 @@ export const AnonymousLinksTab = ({
 
       if (!!response?.data?.length) {
         const singleUseIds = response.data;
-        const surveyLinks = singleUseIds.map((singleUseId) => `${surveyUrl}?suId=${singleUseId}`);
+        const surveyLinks = singleUseIds.map((singleUseId) => {
+          const url = new URL(surveyUrl);
+          url.searchParams.set("suId", singleUseId);
+          return url.toString();
+        });
 
         // Create content with just the links
         const csvContent = surveyLinks.join("\n");

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

@@ -163,7 +163,7 @@ export const AppTab = () => {
           </AlertDescription>
           {!environment.appSetupCompleted && (
             <AlertButton asChild>
-              <Link href={`/environments/${environment.id}/project/app-connection`}>
+              <Link href={`/environments/${environment.id}/workspace/app-connection`}>
                 {t("common.connect_formbricks")}
               </Link>
             </AlertButton>

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

@@ -0,0 +1,163 @@
+"use client";
+
+import { AlertTriangleIcon } from "lucide-react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import toast from "react-hot-toast";
+import { useTranslation } from "react-i18next";
+import { TSurvey } from "@formbricks/types/surveys/types";
+import { useSurvey } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/context/survey-context";
+import { cn } from "@/lib/cn";
+import { updateSurveyAction } from "@/modules/survey/editor/actions";
+import { Alert, AlertDescription } from "@/modules/ui/components/alert";
+import { Button } from "@/modules/ui/components/button";
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormProvider,
+} from "@/modules/ui/components/form";
+import { TabToggle } from "@/modules/ui/components/tab-toggle";
+
+interface CustomHtmlTabProps {
+  projectCustomScripts: string | null | undefined;
+  isReadOnly: boolean;
+}
+
+interface CustomHtmlFormData {
+  customHeadScripts: string;
+  customHeadScriptsMode: TSurvey["customHeadScriptsMode"];
+}
+
+export const CustomHtmlTab = ({ projectCustomScripts, isReadOnly }: CustomHtmlTabProps) => {
+  const { t } = useTranslation();
+  const { survey } = useSurvey();
+  const [isSaving, setIsSaving] = useState(false);
+
+  const form = useForm<CustomHtmlFormData>({
+    defaultValues: {
+      customHeadScripts: survey.customHeadScripts ?? "",
+      customHeadScriptsMode: survey.customHeadScriptsMode ?? "add",
+    },
+  });
+
+  const {
+    handleSubmit,
+    watch,
+    setValue,
+    reset,
+    formState: { isDirty },
+  } = form;
+
+  const scriptsMode = watch("customHeadScriptsMode");
+
+  const onSubmit = async (data: CustomHtmlFormData) => {
+    if (isSaving || isReadOnly) return;
+
+    setIsSaving(true);
+
+    const updatedSurvey: TSurvey = {
+      ...survey,
+      customHeadScripts: data.customHeadScripts || null,
+      customHeadScriptsMode: data.customHeadScriptsMode,
+    };
+
+    const result = await updateSurveyAction(updatedSurvey);
+
+    if (result?.data) {
+      toast.success(t("environments.surveys.share.custom_html.saved_successfully"));
+      reset(data);
+    } else {
+      toast.error(t("common.something_went_wrong_please_try_again"));
+    }
+
+    setIsSaving(false);
+  };
+
+  return (
+    <div className="px-1">
+      <FormProvider {...form}>
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+          {/* Mode Toggle */}
+          <div className="space-y-2">
+            <FormLabel>{t("environments.surveys.share.custom_html.script_mode")}</FormLabel>
+            <TabToggle
+              id="custom-scripts-mode"
+              options={[
+                { value: "add", label: t("environments.surveys.share.custom_html.add_to_workspace") },
+                { value: "replace", label: t("environments.surveys.share.custom_html.replace_workspace") },
+              ]}
+              defaultSelected={scriptsMode ?? "add"}
+              onChange={(value) => setValue("customHeadScriptsMode", value, { shouldDirty: true })}
+              disabled={isReadOnly}
+            />
+            <p className="text-sm text-slate-500">
+              {scriptsMode === "add"
+                ? t("environments.surveys.share.custom_html.add_mode_description")
+                : t("environments.surveys.share.custom_html.replace_mode_description")}
+            </p>
+          </div>
+
+          {/* Workspace Scripts Preview */}
+          {projectCustomScripts && (
+            <div className={scriptsMode === "replace" ? "opacity-50" : ""}>
+              <FormLabel>{t("environments.surveys.share.custom_html.workspace_scripts_label")}</FormLabel>
+              <div className="mt-2 max-h-32 overflow-auto rounded-md border border-slate-200 bg-slate-50 p-3">
+                <pre className="font-mono text-xs whitespace-pre-wrap text-slate-600">
+                  {projectCustomScripts}
+                </pre>
+              </div>
+            </div>
+          )}
+
+          {!projectCustomScripts && (
+            <div className="rounded-md border border-slate-200 bg-slate-50 p-3">
+              <p className="text-sm text-slate-500">
+                {t("environments.surveys.share.custom_html.no_workspace_scripts")}
+              </p>
+            </div>
+          )}
+
+          {/* Survey Scripts */}
+          <FormField
+            control={form.control}
+            name="customHeadScripts"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t("environments.surveys.share.custom_html.survey_scripts_label")}</FormLabel>
+                <FormDescription>
+                  {t("environments.surveys.share.custom_html.survey_scripts_description")}
+                </FormDescription>
+                <FormControl>
+                  <textarea
+                    rows={8}
+                    placeholder={t("environments.surveys.share.custom_html.placeholder")}
+                    className={cn(
+                      "focus:border-brand-dark flex w-full rounded-md border border-slate-300 bg-white px-3 py-2 font-mono text-xs text-slate-800 placeholder:text-slate-400 focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                    )}
+                    {...field}
+                    disabled={isReadOnly}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+
+          {/* Save Button */}
+          <Button type="submit" disabled={isSaving || isReadOnly || !isDirty}>
+            {isSaving ? t("common.saving") : t("common.save")}
+          </Button>
+          {/* Security Warning */}
+          <Alert variant="warning" className="flex items-start gap-2">
+            <AlertTriangleIcon className="mt-0.5 h-4 w-4 shrink-0" />
+            <AlertDescription>
+              {t("environments.surveys.share.custom_html.security_warning")}
+            </AlertDescription>
+          </Alert>
+        </form>
+      </FormProvider>
+    </div>
+  );
+};

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

@@ -5,7 +5,8 @@ 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, TSurvey, TSurveyMetadata } from "@formbricks/types/surveys/types";
+import { TI18nString } from "@formbricks/types/i18n";
+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/components/shareEmbedModal/pretty-url-input.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useTranslation } from "react-i18next";
+import { Input } from "@/modules/ui/components/input";
+
+interface PrettyUrlInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  publicDomain: string;
+  disabled?: boolean;
+}
+
+export const PrettyUrlInput = ({ value, onChange, publicDomain, disabled = false }: PrettyUrlInputProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex items-center overflow-hidden rounded-md border border-slate-300 bg-white">
+      <span className="flex-shrink-0 border-r border-slate-300 bg-slate-50 px-3 py-2 text-sm text-slate-600">
+        {publicDomain}/p/
+      </span>
+      <Input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value.toLowerCase().replaceAll(/[^a-z0-9-]/g, ""))}
+        placeholder={t("environments.surveys.share.pretty_url.slug_placeholder")}
+        disabled={disabled}
+        className="border-0 bg-white focus-visible:ring-0 focus-visible:ring-offset-0"
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,197 @@
+"use client";
+
+import { Copy, Trash2 } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import toast from "react-hot-toast";
+import { useTranslation } from "react-i18next";
+import { useSurvey } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/context/survey-context";
+import { getFormattedErrorMessage } from "@/lib/utils/helper";
+import { removeSurveySlugAction, updateSurveySlugAction } from "@/modules/survey/slug/actions";
+import { Button } from "@/modules/ui/components/button";
+import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormProvider,
+} from "@/modules/ui/components/form";
+import { PrettyUrlInput } from "./pretty-url-input";
+
+interface PrettyUrlTabProps {
+  publicDomain: string;
+  isReadOnly?: boolean;
+}
+
+interface PrettyUrlFormData {
+  slug: string;
+}
+
+export const PrettyUrlTab = ({ publicDomain, isReadOnly = false }: PrettyUrlTabProps) => {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const { survey } = useSurvey();
+  const [isEditing, setIsEditing] = useState(!survey.slug);
+  const [showRemoveDialog, setShowRemoveDialog] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Initialize form with current values - memoize to prevent re-initialization
+  const initialFormData = useMemo(() => {
+    return {
+      slug: survey.slug || "",
+    };
+  }, [survey.slug]);
+
+  const form = useForm<PrettyUrlFormData>({
+    defaultValues: initialFormData,
+  });
+
+  const { handleSubmit, reset } = form;
+
+  // Sync isEditing state and form with survey.slug changes
+  useEffect(() => {
+    setIsEditing(!survey.slug);
+    reset({ slug: survey.slug || "" });
+  }, [survey.slug, reset]);
+
+  const onSubmit = async (data: PrettyUrlFormData) => {
+    if (!data.slug.trim()) {
+      toast.error(t("environments.surveys.share.pretty_url.slug_required"));
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      const result = await updateSurveySlugAction({
+        surveyId: survey.id,
+        slug: data.slug,
+      });
+
+      const errorMessage = getFormattedErrorMessage(result);
+      if (errorMessage) {
+        toast.error(errorMessage);
+      } else {
+        toast.success(t("environments.surveys.share.pretty_url.save_success"));
+        router.refresh();
+        setIsEditing(false);
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : t("common.something_went_wrong_please_try_again");
+      toast.error(message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleEdit = () => {
+    setIsEditing(true);
+  };
+
+  const handleCancel = () => {
+    reset({ slug: survey.slug || "" });
+    setIsEditing(false);
+  };
+
+  const handleRemove = async () => {
+    setIsSubmitting(true);
+    try {
+      const result = await removeSurveySlugAction({ surveyId: survey.id });
+
+      const errorMessage = getFormattedErrorMessage(result);
+      if (errorMessage) {
+        toast.error(errorMessage);
+      } else {
+        setShowRemoveDialog(false);
+        reset({ slug: "" });
+        router.refresh();
+        setIsEditing(true);
+        toast.success(t("environments.surveys.share.pretty_url.remove_success"));
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : t("common.something_went_wrong_please_try_again");
+      toast.error(message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleCopyUrl = () => {
+    if (!survey.slug) return;
+    const prettyUrl = `${publicDomain}/p/${survey.slug}`;
+    navigator.clipboard.writeText(prettyUrl);
+    toast.success(t("common.copied_to_clipboard"));
+  };
+
+  return (
+    <div className="px-1">
+      <FormProvider {...form}>
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+          <FormField
+            control={form.control}
+            name="slug"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t("environments.surveys.share.pretty_url.slug_label")}</FormLabel>
+                <FormControl>
+                  <PrettyUrlInput
+                    value={field.value}
+                    onChange={field.onChange}
+                    publicDomain={publicDomain}
+                    disabled={isReadOnly || !isEditing}
+                  />
+                </FormControl>
+                <FormDescription>{t("environments.surveys.share.pretty_url.slug_help")}</FormDescription>
+              </FormItem>
+            )}
+          />
+
+          <div className="flex gap-2">
+            {isEditing ? (
+              <>
+                <Button type="submit" disabled={isReadOnly || isSubmitting}>
+                  {t("common.save")}
+                </Button>
+                {survey.slug && (
+                  <Button type="button" variant="secondary" onClick={handleCancel} disabled={isSubmitting}>
+                    {t("common.cancel")}
+                  </Button>
+                )}
+              </>
+            ) : (
+              <Button type="button" variant="secondary" onClick={handleEdit} disabled={isReadOnly}>
+                {t("common.edit")}
+              </Button>
+            )}
+
+            {survey.slug && !isEditing && (
+              <>
+                <Button type="button" variant="default" onClick={handleCopyUrl} disabled={isReadOnly}>
+                  <Copy className="mr-2 h-4 w-4" />
+                  {t("common.copy")} URL
+                </Button>
+                <Button
+                  type="button"
+                  variant="destructive"
+                  onClick={() => setShowRemoveDialog(true)}
+                  disabled={isReadOnly}>
+                  <Trash2 className="mr-2 h-4 w-4" />
+                  {t("common.remove")}
+                </Button>
+              </>
+            )}
+          </div>
+        </form>
+      </FormProvider>
+
+      <DeleteDialog
+        open={showRemoveDialog}
+        setOpen={setShowRemoveDialog}
+        deleteWhat={t("environments.surveys.share.pretty_url.title")}
+        onDelete={handleRemove}
+        text={t("environments.surveys.share.pretty_url.remove_description")}></DeleteDialog>
+    </div>
+  );
+};

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/success-view.tsx

@@ -66,7 +66,7 @@ export const SuccessView: React.FC<SuccessViewProps> = ({
             className="relative flex flex-col items-center gap-3 rounded-lg border border-slate-100 bg-white p-4 text-center text-sm text-slate-900 hover:border-slate-200 md:p-8">
             <UserIcon className="h-8 w-8 stroke-1 text-slate-900" />
             {t("environments.surveys.summary.use_personal_links")}
-            <Badge size="normal" type="success" className="absolute right-3 top-3" text={t("common.new")} />
+            <Badge size="normal" type="success" className="absolute top-3 right-3" text={t("common.new")} />
           </button>
           <Link
             href={`/environments/${environmentId}/settings/notifications`}
@@ -75,7 +75,7 @@ export const SuccessView: React.FC<SuccessViewProps> = ({
             {t("environments.surveys.summary.configure_alerts")}
           </Link>
           <Link
-            href={`/environments/${environmentId}/project/integrations`}
+            href={`/environments/${environmentId}/workspace/integrations`}
             className="flex flex-col items-center gap-3 rounded-lg border border-slate-100 bg-white p-4 text-center text-sm text-slate-900 hover:border-slate-200 md:p-8">
             <BlocksIcon className="h-8 w-8 stroke-1 text-slate-900" />
             {t("environments.surveys.summary.setup_integrations")}

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

@@ -13,7 +13,7 @@ export const getEmailTemplateHtml = async (surveyId: string, locale: string) =>
   }
   const project = await getProjectByEnvironmentId(survey.environmentId);
   if (!project) {
-    throw new Error("Project not found");
+    throw new Error("Workspace not found");
   }
 
   const styling = getStyling(project, survey);

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

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

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

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

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

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

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

@@ -12,6 +12,8 @@ export enum ShareViaType {
 
 export enum ShareSettingsType {
   LINK_SETTINGS = "link-settings",
+  PRETTY_URL = "pretty-url",
+  CUSTOM_HTML = "custom-html",
 }
 
 export enum LinkTabsType {

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

@@ -164,12 +164,12 @@ export const CustomFilter = ({ survey }: CustomFilterProps) => {
 
   const datePickerRef = useRef<HTMLDivElement>(null);
 
-  const extracMetadataKeys = useCallback((obj, parentKey = "") => {
+  const extractMetadataKeys = useCallback((obj, parentKey = "") => {
     let keys: string[] = [];
 
     for (let key in obj) {
       if (typeof obj[key] === "object" && obj[key] !== null) {
-        keys = keys.concat(extracMetadataKeys(obj[key], parentKey + key + " - "));
+        keys = keys.concat(extractMetadataKeys(obj[key], parentKey + key + " - "));
       } else {
         keys.push(parentKey + key);
       }

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

@@ -4,8 +4,9 @@ import clsx from "clsx";
 import { ChevronDown, ChevronUp, X } from "lucide-react";
 import { useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { TI18nString, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
-import { OptionsType } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionsComboBox";
+import { TI18nString } from "@formbricks/types/i18n";
+import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+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";
@@ -25,20 +26,52 @@ import {
 } from "@/modules/ui/components/dropdown-menu";
 import { Input } from "@/modules/ui/components/input";
 
-type QuestionFilterComboBoxProps = {
+const DEFAULT_LANGUAGE_CODE = "default";
+
+// 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?: TSurveyQuestionTypeEnum | Omit<OptionsType, OptionsType.QUESTIONS>;
+  type?: TSurveyElementTypeEnum | Omit<OptionsType, OptionsType.ELEMENTS>;
   handleRemoveMultiSelect: (value: string[]) => void;
   disabled?: boolean;
   fieldId?: string;
 };
 
-export const QuestionFilterComboBox = ({
+// Helper function to check if multiple selection is allowed
+const checkIsMultiple = (
+  type: TSurveyElementTypeEnum | Omit<OptionsType, OptionsType.ELEMENTS> | undefined,
+  filterValue: string | undefined
+): boolean => {
+  const isMultiSelectType =
+    type === TSurveyElementTypeEnum.MultipleChoiceMulti ||
+    type === TSurveyElementTypeEnum.MultipleChoiceSingle ||
+    type === TSurveyElementTypeEnum.PictureSelection;
+  const isNPSIncludesEither = type === TSurveyElementTypeEnum.NPS && filterValue === "Includes either";
+  return isMultiSelectType || isNPSIncludesEither;
+};
+
+// Helper function to check if combo box should be disabled
+const checkIsDisabledComboBox = (
+  type: TSurveyElementTypeEnum | Omit<OptionsType, OptionsType.ELEMENTS> | undefined,
+  filterValue: string | undefined
+): boolean => {
+  const isNPSOrRating = type === TSurveyElementTypeEnum.NPS || type === TSurveyElementTypeEnum.Rating;
+  const isSubmittedOrSkipped = filterValue === "Submitted" || filterValue === "Skipped";
+  return isNPSOrRating && isSubmittedOrSkipped;
+};
+
+export const ElementFilterComboBox = ({
   filterComboBoxOptions,
   filterComboBoxValue,
   filterOptions,
@@ -49,7 +82,7 @@ export const QuestionFilterComboBox = ({
   handleRemoveMultiSelect,
   disabled = false,
   fieldId,
-}: QuestionFilterComboBoxProps) => {
+}: ElementFilterComboBoxProps) => {
   const [open, setOpen] = useState(false);
   const commandRef = useRef(null);
   const [searchQuery, setSearchQuery] = useState("");
@@ -57,32 +90,19 @@ export const QuestionFilterComboBox = ({
 
   useClickOutside(commandRef, () => setOpen(false));
 
-  const defaultLanguageCode = "default";
-
-  // Check if multiple selection is allowed
-  const isMultiple = useMemo(
-    () =>
-      type === TSurveyQuestionTypeEnum.MultipleChoiceMulti ||
-      type === TSurveyQuestionTypeEnum.MultipleChoiceSingle ||
-      type === TSurveyQuestionTypeEnum.PictureSelection ||
-      (type === TSurveyQuestionTypeEnum.NPS && filterValue === "Includes either"),
-    [type, filterValue]
-  );
+  const isMultiple = checkIsMultiple(type, filterValue);
 
   // Filter out already selected options for multi-select
   const options = useMemo(() => {
     if (!isMultiple) return filterComboBoxOptions;
 
     return filterComboBoxOptions?.filter((o) => {
-      const optionValue = typeof o === "object" && o !== null ? getLocalizedValue(o, defaultLanguageCode) : o;
+      const optionValue = getOptionValue(o);
       return !filterComboBoxValue?.includes(optionValue);
     });
-  }, [isMultiple, filterComboBoxOptions, filterComboBoxValue, defaultLanguageCode]);
+  }, [isMultiple, filterComboBoxOptions, filterComboBoxValue]);
 
-  // Disable combo box for NPS/Rating when Submitted/Skipped
-  const isDisabledComboBox =
-    (type === TSurveyQuestionTypeEnum.NPS || type === TSurveyQuestionTypeEnum.Rating) &&
-    (filterValue === "Submitted" || filterValue === "Skipped");
+  const isDisabledComboBox = checkIsDisabledComboBox(type, filterValue);
 
   // Check if this is a text input field (URL meta field)
   const isTextInputField = type === OptionsType.META && fieldId === "url";
@@ -91,15 +111,14 @@ export const QuestionFilterComboBox = ({
   const filteredOptions = useMemo(
     () =>
       options?.filter((o) => {
-        const optionValue =
-          typeof o === "object" && o !== null ? getLocalizedValue(o, defaultLanguageCode) : o;
+        const optionValue = getOptionValue(o);
         return optionValue.toLowerCase().includes(searchQuery.toLowerCase());
       }),
-    [options, searchQuery, defaultLanguageCode]
+    [options, searchQuery]
   );
 
   const handleCommandItemSelect = (o: string | TI18nString) => {
-    const value = typeof o === "object" && o !== null ? getLocalizedValue(o, defaultLanguageCode) : o;
+    const value = getOptionValue(o);
 
     if (isMultiple) {
       const newValue = Array.isArray(filterComboBoxValue) ? [...filterComboBoxValue, value] : [value];
@@ -112,12 +131,56 @@ export const QuestionFilterComboBox = ({
   };
 
   const isComboBoxDisabled = disabled || isDisabledComboBox || !filterValue;
+  const ChevronIcon = open ? ChevronUp : ChevronDown;
+
+  // Render filter options dropdown
+  const renderFilterOptionsDropdown = () => {
+    if (!filterOptions || filterOptions.length <= 1) {
+      return (
+        <div className="flex h-9 max-w-fit items-center rounded-md rounded-r-none border-r border-slate-300 bg-white px-2 text-sm text-slate-600">
+          <p className="mr-1 max-w-[50px] truncate sm:max-w-[100px]">{filterValue}</p>
+        </div>
+      );
+    }
+    return (
+      <DropdownMenu
+        onOpenChange={(value) => {
+          if (value) setOpen(false);
+        }}>
+        <DropdownMenuTrigger
+          disabled={disabled}
+          className={clsx(
+            "flex h-9 max-w-fit items-center justify-between gap-2 rounded-md rounded-r-none border-r border-slate-300 bg-white px-2 text-sm text-slate-600 focus:outline-transparent focus:ring-0",
+            disabled ? "opacity-50" : "cursor-pointer hover:bg-slate-50"
+          )}>
+          {filterValue ? (
+            <p className="max-w-[50px] truncate sm:max-w-[80px]">{filterValue}</p>
+          ) : (
+            <p className="text-slate-400">{t("common.select")}...</p>
+          )}
+          {filterOptions.length > 1 && <ChevronIcon className="h-4 w-4 flex-shrink-0 opacity-50" />}
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="bg-white">
+          {filterOptions.map((o, index) => {
+            const optionValue = getOptionValue(o);
+            return (
+              <DropdownMenuItem
+                key={`${optionValue}-${index}`}
+                className="cursor-pointer"
+                onClick={() => onChangeFilterValue(optionValue)}>
+                {optionValue}
+              </DropdownMenuItem>
+            );
+          })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  };
 
   const handleOpenDropdown = () => {
     if (isComboBoxDisabled) return;
     setOpen(true);
   };
-  const ChevronIcon = open ? ChevronUp : ChevronDown;
 
   // Helper to filter out a specific value from the array
   const getFilteredValues = (valueToRemove: string): string[] => {
@@ -176,46 +239,7 @@ export const QuestionFilterComboBox = ({
 
   return (
     <div className="inline-flex h-fit w-full flex-row rounded-md border border-slate-300 hover:border-slate-400">
-      {filterOptions && filterOptions.length <= 1 ? (
-        <div className="flex h-9 max-w-fit items-center rounded-md rounded-r-none border-r border-slate-300 bg-white px-2 text-sm text-slate-600">
-          <p className="mr-1 max-w-[50px] truncate sm:max-w-[100px]">{filterValue}</p>
-        </div>
-      ) : (
-        <DropdownMenu
-          onOpenChange={(value) => {
-            if (value) setOpen(false);
-          }}>
-          <DropdownMenuTrigger
-            disabled={disabled}
-            className={clsx(
-              "flex h-9 max-w-fit items-center justify-between gap-2 rounded-md rounded-r-none border-r border-slate-300 bg-white px-2 text-sm text-slate-600 focus:outline-transparent focus:ring-0",
-              disabled ? "opacity-50" : "cursor-pointer hover:bg-slate-50"
-            )}>
-            {filterValue ? (
-              <p className="max-w-[50px] truncate sm:max-w-[80px]">{filterValue}</p>
-            ) : (
-              <p className="text-slate-400">{t("common.select")}...</p>
-            )}
-            {filterOptions && filterOptions.length > 1 && (
-              <ChevronIcon className="h-4 w-4 flex-shrink-0 opacity-50" />
-            )}
-          </DropdownMenuTrigger>
-          <DropdownMenuContent className="bg-white">
-            {filterOptions?.map((o, index) => {
-              const optionValue =
-                typeof o === "object" && o !== null ? getLocalizedValue(o, defaultLanguageCode) : o;
-              return (
-                <DropdownMenuItem
-                  key={`${optionValue}-${index}`}
-                  className="cursor-pointer"
-                  onClick={() => onChangeFilterValue(optionValue)}>
-                  {optionValue}
-                </DropdownMenuItem>
-              );
-            })}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      )}
+      {renderFilterOptionsDropdown()}
 
       {isTextInputField ? (
         <Input
@@ -274,8 +298,7 @@ export const QuestionFilterComboBox = ({
                 <CommandEmpty>{t("common.no_result_found")}</CommandEmpty>
                 <CommandGroup>
                   {filteredOptions?.map((o) => {
-                    const optionValue =
-                      typeof o === "object" && o !== null ? getLocalizedValue(o, defaultLanguageCode) : o;
+                    const optionValue = getOptionValue(o);
                     return (
                       <CommandItem
                         key={optionValue}

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

@@ -21,6 +21,7 @@ import {
   ListOrderedIcon,
   MessageSquareTextIcon,
   MousePointerClickIcon,
+  NetworkIcon,
   PieChartIcon,
   Rows3Icon,
   SmartphoneIcon,
@@ -29,7 +30,7 @@ import {
 } from "lucide-react";
 import { Fragment, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
+import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
 import { getLocalizedValue } from "@/lib/i18n/utils";
 import { useClickOutside } from "@/lib/utils/hooks/useClickOutside";
 import { Button } from "@/modules/ui/components/button";
@@ -44,7 +45,7 @@ import {
 import { NetPromoterScoreIcon } from "@/modules/ui/components/icons";
 
 export enum OptionsType {
-  QUESTIONS = "Questions",
+  ELEMENTS = "Elements",
   TAGS = "Tags",
   ATTRIBUTES = "Attributes",
   OTHERS = "Other Filters",
@@ -53,37 +54,37 @@ export enum OptionsType {
   QUOTAS = "Quotas",
 }
 
-export type QuestionOption = {
+export type ElementOption = {
   label: string;
-  questionType?: TSurveyQuestionTypeEnum;
+  elementType?: TSurveyElementTypeEnum;
   type: OptionsType;
   id: string;
 };
-export type QuestionOptions = {
+export type ElementOptions = {
   header: OptionsType;
-  option: QuestionOption[];
+  option: ElementOption[];
 };
 
-interface QuestionComboBoxProps {
-  options: QuestionOptions[];
-  selected: Partial<QuestionOption>;
-  onChangeValue: (option: QuestionOption) => void;
+interface ElementComboBoxProps {
+  options: ElementOptions[];
+  selected: Partial<ElementOption>;
+  onChangeValue: (option: ElementOption) => void;
 }
 
-const questionIcons = {
-  // questions
-  [TSurveyQuestionTypeEnum.OpenText]: MessageSquareTextIcon,
-  [TSurveyQuestionTypeEnum.Rating]: StarIcon,
-  [TSurveyQuestionTypeEnum.CTA]: MousePointerClickIcon,
-  [TSurveyQuestionTypeEnum.MultipleChoiceMulti]: ListIcon,
-  [TSurveyQuestionTypeEnum.MultipleChoiceSingle]: Rows3Icon,
-  [TSurveyQuestionTypeEnum.NPS]: NetPromoterScoreIcon,
-  [TSurveyQuestionTypeEnum.Consent]: CheckIcon,
-  [TSurveyQuestionTypeEnum.PictureSelection]: ImageIcon,
-  [TSurveyQuestionTypeEnum.Matrix]: GridIcon,
-  [TSurveyQuestionTypeEnum.Ranking]: ListOrderedIcon,
-  [TSurveyQuestionTypeEnum.Address]: HomeIcon,
-  [TSurveyQuestionTypeEnum.ContactInfo]: ContactIcon,
+const elementIcons = {
+  // elements
+  [TSurveyElementTypeEnum.OpenText]: MessageSquareTextIcon,
+  [TSurveyElementTypeEnum.Rating]: StarIcon,
+  [TSurveyElementTypeEnum.CTA]: MousePointerClickIcon,
+  [TSurveyElementTypeEnum.MultipleChoiceMulti]: ListIcon,
+  [TSurveyElementTypeEnum.MultipleChoiceSingle]: Rows3Icon,
+  [TSurveyElementTypeEnum.NPS]: NetPromoterScoreIcon,
+  [TSurveyElementTypeEnum.Consent]: CheckIcon,
+  [TSurveyElementTypeEnum.PictureSelection]: ImageIcon,
+  [TSurveyElementTypeEnum.Matrix]: GridIcon,
+  [TSurveyElementTypeEnum.Ranking]: ListOrderedIcon,
+  [TSurveyElementTypeEnum.Address]: HomeIcon,
+  [TSurveyElementTypeEnum.ContactInfo]: ContactIcon,
 
   // attributes
   [OptionsType.ATTRIBUTES]: User,
@@ -99,6 +100,7 @@ const questionIcons = {
   action: MousePointerClickIcon,
   country: FlagIcon,
   url: LinkIcon,
+  ipAddress: NetworkIcon,
 
   // others
   Language: LanguagesIcon,
@@ -111,14 +113,14 @@ const questionIcons = {
 };
 
 const getIcon = (type: string) => {
-  const IconComponent = questionIcons[type];
+  const IconComponent = elementIcons[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.QUESTIONS]: "bg-brand-dark",
+    [OptionsType.ELEMENTS]: "bg-brand-dark",
     [OptionsType.TAGS]: "bg-indigo-500",
     [OptionsType.QUOTAS]: "bg-slate-500",
   };
@@ -130,10 +132,10 @@ const getLabelClassName = (type: OptionsType | string, label?: string): string =
   return label === "os" || label === "url" ? "uppercase" : "capitalize";
 };
 
-export const SelectedCommandItem = ({ label, questionType, type }: Partial<QuestionOption>) => {
+export const SelectedCommandItem = ({ label, elementType, type }: Partial<ElementOption>) => {
   const getDisplayIcon = () => {
     if (!type) return null;
-    if (type === OptionsType.QUESTIONS && questionType) return getIcon(questionType);
+    if (type === OptionsType.ELEMENTS && elementType) return getIcon(elementType);
     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 +160,7 @@ export const SelectedCommandItem = ({ label, questionType, type }: Partial<Quest
   );
 };
 
-export const QuestionsComboBox = ({ options, selected, onChangeValue }: QuestionComboBoxProps) => {
+export const ElementsComboBox = ({ options, selected, onChangeValue }: ElementComboBoxProps) => {
   const [open, setOpen] = useState(false);
   const { t } = useTranslation();
   const commandRef = useRef(null);
@@ -190,7 +192,7 @@ export const QuestionsComboBox = ({ options, selected, onChangeValue }: Question
             value={inputValue}
             onValueChange={setInputValue}
             placeholder={open ? `${t("common.search")}...` : t("common.select_filter")}
-            className="max-w-full grow border-none p-0 pl-2 text-sm shadow-none outline-none ring-offset-transparent focus:border-none focus:shadow-none focus:outline-none focus:ring-offset-0"
+            className="max-w-full grow border-none p-0 pl-2 text-sm shadow-none ring-offset-transparent outline-none focus:border-none focus:shadow-none focus:ring-offset-0 focus:outline-none"
           />
         )}
         <Button