refactor: Extract MatrixLabelSection component to eliminate code duplication

- Create reusable MatrixLabelSection component for both rows and columns
- Consolidate duplicate DndContext/SortableContext patterns
- Reduce code duplication from 22.5% to meet SonarCloud 3% threshold
- Maintain all existing drag and drop functionality
- All tests passing locally (13/13 matrix tests)

Co-Authored-By: Johannes <johannes@formbricks.com>

.cursor/rules/component-migration.mdc

@@ -0,0 +1,216 @@
+---
+description: 
+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/documentations.mdc

@@ -0,0 +1,23 @@
+---
+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
+- In all Headlines, only capitalize the current feature and nothing else, to Camel Case
+- If a feature is part of the Enterprise Edition, use this note:
+
+<Note>
+  FEATURE NAME is part of the @Enterprise Edition. 
+</Note>

.husky/pre-commit

@@ -1,10 +1,9 @@
 #!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
 
 # Load environment variables from .env files
-if [ -f .env ]; then
+if [ -f "$(git rev-parse --show-toplevel)/.env" ]; then
   set -a
-  . .env
+  . "$(git rev-parse --show-toplevel)/.env"
   set +a
 fi
 
@@ -18,4 +17,4 @@ if [ -f branch.json ]; then
     pnpm run tolgee-pull
     git add apps/web/locales
   fi
-fi
+fi

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

@@ -220,6 +220,9 @@ describe("MainNavigation", () => {
     const mockSignOut = vi.fn().mockResolvedValue({ url: "/auth/login" });
     vi.mocked(useSignOut).mockReturnValue({ signOut: mockSignOut });
 
+    // Set up localStorage spy on the mocked localStorage
+    const removeItemSpy = vi.spyOn(window.localStorage, "removeItem");
+
     render(<MainNavigation {...defaultProps} />);
 
     // Find the avatar and get its parent div which acts as the trigger
@@ -240,6 +243,9 @@ describe("MainNavigation", () => {
     const logoutButton = screen.getByText("common.logout");
     await userEvent.click(logoutButton);
 
+    // Verify localStorage.removeItem is called with the correct key
+    expect(removeItemSpy).toHaveBeenCalledWith("formbricks-environment-id");
+
     expect(mockSignOut).toHaveBeenCalledWith({
       reason: "user_initiated",
       redirectUrl: "/auth/login",
@@ -247,9 +253,13 @@ describe("MainNavigation", () => {
       redirect: false,
       callbackUrl: "/auth/login",
     });
+
     await waitFor(() => {
       expect(mockRouterPush).toHaveBeenCalledWith("/auth/login");
     });
+
+    // Clean up spy
+    removeItemSpy.mockRestore();
   });
 
   test("handles organization switching", async () => {

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

@@ -4,6 +4,7 @@ import { getLatestStableFbReleaseAction } from "@/app/(app)/environments/[enviro
 import { NavigationLink } from "@/app/(app)/environments/[environmentId]/components/NavigationLink";
 import FBLogo from "@/images/formbricks-wordmark.svg";
 import { cn } from "@/lib/cn";
+import { FORMBRICKS_ENVIRONMENT_ID_LS } from "@/lib/localStorage";
 import { getAccessFlags } from "@/lib/membership/utils";
 import { capitalizeFirstLetter } from "@/lib/utils/strings";
 import { useSignOut } from "@/modules/auth/hooks/use-sign-out";
@@ -390,6 +391,8 @@ export const MainNavigation = ({
 
                   <DropdownMenuItem
                     onClick={async () => {
+                      localStorage.removeItem(FORMBRICKS_ENVIRONMENT_ID_LS);
+
                       const route = await signOutWithAudit({
                         reason: "user_initiated",
                         redirectUrl: "/auth/login",

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

@@ -106,8 +106,7 @@ export const ShareEmbedSurvey = ({
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogTitle className="sr-only" />
-      <DialogContent className="w-full max-w-xl bg-white p-0 md:max-w-3xl lg:h-[700px] lg:max-w-5xl">
+      <DialogContent className="w-full bg-white p-0 lg:h-[700px]" width="wide">
         {showView === "start" ? (
           <div className="h-full max-w-full overflow-hidden">
             <div className="flex h-[200px] w-full flex-col items-center justify-center space-y-6 p-8 text-center lg:h-2/5">

apps/web/app/ClientEnvironmentRedirect.test.tsx

@@ -14,41 +14,64 @@ describe("ClientEnvironmentRedirect", () => {
     cleanup();
   });
 
-  test("should redirect to the provided environment ID when no last environment exists", () => {
+  test("should redirect to the first environment ID when no last environment exists", () => {
     const mockPush = vi.fn();
     vi.mocked(useRouter).mockReturnValue({ push: mockPush } as any);
 
     // Mock localStorage
     const localStorageMock = {
       getItem: vi.fn().mockReturnValue(null),
+      removeItem: vi.fn(),
     };
+
     Object.defineProperty(window, "localStorage", {
       value: localStorageMock,
     });
 
-    render(<ClientEnvironmentRedirect environmentId="test-env-id" />);
+    render(<ClientEnvironmentRedirect userEnvironments={["test-env-id"]} />);
 
     expect(mockPush).toHaveBeenCalledWith("/environments/test-env-id");
   });
 
-  test("should redirect to the last environment ID when it exists in localStorage", () => {
+  test("should redirect to the last environment ID when it exists in localStorage and is valid", () => {
     const mockPush = vi.fn();
     vi.mocked(useRouter).mockReturnValue({ push: mockPush } as any);
 
     // Mock localStorage with a last environment ID
     const localStorageMock = {
       getItem: vi.fn().mockReturnValue("last-env-id"),
+      removeItem: vi.fn(),
     };
     Object.defineProperty(window, "localStorage", {
       value: localStorageMock,
     });
 
-    render(<ClientEnvironmentRedirect environmentId="test-env-id" />);
+    render(<ClientEnvironmentRedirect userEnvironments={["last-env-id", "other-env-id"]} />);
 
     expect(localStorageMock.getItem).toHaveBeenCalledWith(FORMBRICKS_ENVIRONMENT_ID_LS);
     expect(mockPush).toHaveBeenCalledWith("/environments/last-env-id");
   });
 
+  test("should clear invalid environment ID and redirect to default when stored ID is not in user environments", () => {
+    const mockPush = vi.fn();
+    vi.mocked(useRouter).mockReturnValue({ push: mockPush } as any);
+
+    // Mock localStorage with an invalid environment ID
+    const localStorageMock = {
+      getItem: vi.fn().mockReturnValue("invalid-env-id"),
+      removeItem: vi.fn(),
+    };
+    Object.defineProperty(window, "localStorage", {
+      value: localStorageMock,
+    });
+
+    render(<ClientEnvironmentRedirect userEnvironments={["valid-env-1", "valid-env-2"]} />);
+
+    expect(localStorageMock.getItem).toHaveBeenCalledWith(FORMBRICKS_ENVIRONMENT_ID_LS);
+    expect(localStorageMock.removeItem).toHaveBeenCalledWith(FORMBRICKS_ENVIRONMENT_ID_LS);
+    expect(mockPush).toHaveBeenCalledWith("/environments/valid-env-1");
+  });
+
   test("should update redirect when environment ID prop changes", () => {
     const mockPush = vi.fn();
     vi.mocked(useRouter).mockReturnValue({ push: mockPush } as any);
@@ -56,19 +79,20 @@ describe("ClientEnvironmentRedirect", () => {
     // Mock localStorage
     const localStorageMock = {
       getItem: vi.fn().mockReturnValue(null),
+      removeItem: vi.fn(),
     };
     Object.defineProperty(window, "localStorage", {
       value: localStorageMock,
     });
 
-    const { rerender } = render(<ClientEnvironmentRedirect environmentId="initial-env-id" />);
+    const { rerender } = render(<ClientEnvironmentRedirect userEnvironments={["initial-env-id"]} />);
     expect(mockPush).toHaveBeenCalledWith("/environments/initial-env-id");
 
     // Clear mock calls
     mockPush.mockClear();
 
     // Rerender with new environment ID
-    rerender(<ClientEnvironmentRedirect environmentId="new-env-id" />);
+    rerender(<ClientEnvironmentRedirect userEnvironments={["new-env-id"]} />);
     expect(mockPush).toHaveBeenCalledWith("/environments/new-env-id");
   });
 });

apps/web/app/ClientEnvironmentRedirect.tsx

@@ -5,22 +5,23 @@ import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 
 interface ClientEnvironmentRedirectProps {
-  environmentId: string;
+  userEnvironments: string[];
 }
 
-const ClientEnvironmentRedirect = ({ environmentId }: ClientEnvironmentRedirectProps) => {
+const ClientEnvironmentRedirect = ({ userEnvironments }: ClientEnvironmentRedirectProps) => {
   const router = useRouter();
 
   useEffect(() => {
     const lastEnvironmentId = localStorage.getItem(FORMBRICKS_ENVIRONMENT_ID_LS);
 
-    if (lastEnvironmentId) {
-      // Redirect to the last environment the user was in
+    if (lastEnvironmentId && userEnvironments.includes(lastEnvironmentId)) {
       router.push(`/environments/${lastEnvironmentId}`);
     } else {
-      router.push(`/environments/${environmentId}`);
+      // If the last environmentId is not valid, remove it from localStorage and redirect to the provided environmentId
+      localStorage.removeItem(FORMBRICKS_ENVIRONMENT_ID_LS);
+      router.push(`/environments/${userEnvironments[0]}`);
     }
-  }, [environmentId, router]);
+  }, [userEnvironments, router]);
 
   return null;
 };

apps/web/app/api/v1/management/storage/lib/utils.test.ts

@@ -1,13 +1,13 @@
-import { checkForRequiredFields } from "./utils";
-import { describe, test, expect } from "vitest";
+import { authenticateRequest } from "@/app/api/v1/auth";
 import { responses } from "@/app/lib/api/response";
 import { hasUserEnvironmentAccess } from "@/lib/environment/auth";
 import { hasPermission } from "@/modules/organization/settings/api-keys/lib/utils";
-import { NextRequest } from "next/server";
 import { Session } from "next-auth";
+import { NextRequest } from "next/server";
+import { describe, expect, test } from "vitest";
 import { vi } from "vitest";
 import { TAuthenticationApiKey } from "@formbricks/types/auth";
-import { authenticateRequest } from "@/app/api/v1/auth";
+import { checkForRequiredFields } from "./utils";
 import { checkAuth } from "./utils";
 
 // Create mock response objects
@@ -16,189 +16,197 @@ const mockNotAuthenticatedResponse = new Response("Not authenticated", { status:
 const mockUnauthorizedResponse = new Response("Unauthorized", { status: 401 });
 
 vi.mock("@/app/api/v1/auth", () => ({
-    authenticateRequest: vi.fn(),
+  authenticateRequest: vi.fn(),
 }));
 
 vi.mock("@/lib/environment/auth", () => ({
-    hasUserEnvironmentAccess: vi.fn(),
+  hasUserEnvironmentAccess: vi.fn(),
 }));
 
 vi.mock("@/modules/organization/settings/api-keys/lib/utils", () => ({
-    hasPermission: vi.fn(),
+  hasPermission: vi.fn(),
 }));
 
 vi.mock("@/app/lib/api/response", () => ({
-    responses: {
-        badRequestResponse: vi.fn(() => mockBadRequestResponse),
-        notAuthenticatedResponse: vi.fn(() => mockNotAuthenticatedResponse),
-        unauthorizedResponse: vi.fn(() => mockUnauthorizedResponse),
-    },
+  responses: {
+    badRequestResponse: vi.fn(() => mockBadRequestResponse),
+    notAuthenticatedResponse: vi.fn(() => mockNotAuthenticatedResponse),
+    unauthorizedResponse: vi.fn(() => mockUnauthorizedResponse),
+  },
 }));
 
 describe("checkForRequiredFields", () => {
-    test("should return undefined when all required fields are present", () => {
-        const result = checkForRequiredFields("env-123", "image/png", "test-file.png");
-        expect(result).toBeUndefined();
-    });
+  test("should return undefined when all required fields are present", () => {
+    const result = checkForRequiredFields("env-123", "image/png", "test-file.png");
+    expect(result).toBeUndefined();
+  });
 
-    test("should return bad request response when environmentId is missing", () => {
-        const result = checkForRequiredFields("", "image/png", "test-file.png");
-        expect(responses.badRequestResponse).toHaveBeenCalledWith("environmentId is required");
-        expect(result).toBe(mockBadRequestResponse);
-    });
+  test("should return bad request response when environmentId is missing", () => {
+    const result = checkForRequiredFields("", "image/png", "test-file.png");
+    expect(responses.badRequestResponse).toHaveBeenCalledWith("environmentId is required");
+    expect(result).toBe(mockBadRequestResponse);
+  });
 
-    test("should return bad request response when fileType is missing", () => {
-        const result = checkForRequiredFields("env-123", "", "test-file.png");
-        expect(responses.badRequestResponse).toHaveBeenCalledWith("contentType is required");
-        expect(result).toBe(mockBadRequestResponse);
-    });
+  test("should return bad request response when fileType is missing", () => {
+    const result = checkForRequiredFields("env-123", "", "test-file.png");
+    expect(responses.badRequestResponse).toHaveBeenCalledWith("contentType is required");
+    expect(result).toBe(mockBadRequestResponse);
+  });
 
-    test("should return bad request response when encodedFileName is missing", () => {
-        const result = checkForRequiredFields("env-123", "image/png", "");
-        expect(responses.badRequestResponse).toHaveBeenCalledWith("fileName is required");
-        expect(result).toBe(mockBadRequestResponse);
-    });
+  test("should return bad request response when encodedFileName is missing", () => {
+    const result = checkForRequiredFields("env-123", "image/png", "");
+    expect(responses.badRequestResponse).toHaveBeenCalledWith("fileName is required");
+    expect(result).toBe(mockBadRequestResponse);
+  });
 
-    test("should return bad request response when environmentId is undefined", () => {
-        const result = checkForRequiredFields(undefined as any, "image/png", "test-file.png");
-        expect(responses.badRequestResponse).toHaveBeenCalledWith("environmentId is required");
-        expect(result).toBe(mockBadRequestResponse);
-    });
+  test("should return bad request response when environmentId is undefined", () => {
+    const result = checkForRequiredFields(undefined as any, "image/png", "test-file.png");
+    expect(responses.badRequestResponse).toHaveBeenCalledWith("environmentId is required");
+    expect(result).toBe(mockBadRequestResponse);
+  });
 
-    test("should return bad request response when fileType is undefined", () => {
-        const result = checkForRequiredFields("env-123", undefined as any, "test-file.png");
-        expect(responses.badRequestResponse).toHaveBeenCalledWith("contentType is required");
-        expect(result).toBe(mockBadRequestResponse);
-    });
+  test("should return bad request response when fileType is undefined", () => {
+    const result = checkForRequiredFields("env-123", undefined as any, "test-file.png");
+    expect(responses.badRequestResponse).toHaveBeenCalledWith("contentType is required");
+    expect(result).toBe(mockBadRequestResponse);
+  });
 
-    test("should return bad request response when encodedFileName is undefined", () => {
-        const result = checkForRequiredFields("env-123", "image/png", undefined as any);
-        expect(responses.badRequestResponse).toHaveBeenCalledWith("fileName is required");
-        expect(result).toBe(mockBadRequestResponse);
-    });
+  test("should return bad request response when encodedFileName is undefined", () => {
+    const result = checkForRequiredFields("env-123", "image/png", undefined as any);
+    expect(responses.badRequestResponse).toHaveBeenCalledWith("fileName is required");
+    expect(result).toBe(mockBadRequestResponse);
+  });
 });
 
 describe("checkAuth", () => {
-    const environmentId = "env-123";
-    const mockRequest = new NextRequest("http://localhost:3000/api/test");
+  const environmentId = "env-123";
+  const mockRequest = new NextRequest("http://localhost:3000/api/test");
 
-    test("returns notAuthenticatedResponse when no session and no authentication", async () => {
-        vi.mocked(authenticateRequest).mockResolvedValue(null);
+  test("returns notAuthenticatedResponse when no session and no authentication", async () => {
+    vi.mocked(authenticateRequest).mockResolvedValue(null);
 
-        const result = await checkAuth(null, environmentId, mockRequest);
+    const result = await checkAuth(null, environmentId, mockRequest);
 
-        expect(authenticateRequest).toHaveBeenCalledWith(mockRequest);
-        expect(responses.notAuthenticatedResponse).toHaveBeenCalled();
-        expect(result).toBe(mockNotAuthenticatedResponse);
-    });
+    expect(authenticateRequest).toHaveBeenCalledWith(mockRequest);
+    expect(responses.notAuthenticatedResponse).toHaveBeenCalled();
+    expect(result).toBe(mockNotAuthenticatedResponse);
+  });
 
-    test("returns unauthorizedResponse when no session and authentication lacks POST permission", async () => {
-        const mockAuthentication: TAuthenticationApiKey = {
-            type: "apiKey",
-            environmentPermissions: [
-                {
-                    environmentId: "env-123",
-                    permission: "read",
-                    environmentType: "development",
-                    projectId: "project-1",
-                    projectName: "Project 1",
-                },
-            ],
-            hashedApiKey: "hashed-key",
-            apiKeyId: "api-key-id",
-            organizationId: "org-id",
-            organizationAccess: {
-                accessControl: {},
-            },
-        };
+  test("returns unauthorizedResponse when no session and authentication lacks POST permission", async () => {
+    const mockAuthentication: TAuthenticationApiKey = {
+      type: "apiKey",
+      environmentPermissions: [
+        {
+          environmentId: "env-123",
+          permission: "read",
+          environmentType: "development",
+          projectId: "project-1",
+          projectName: "Project 1",
+        },
+      ],
+      hashedApiKey: "hashed-key",
+      apiKeyId: "api-key-id",
+      organizationId: "org-id",
+      organizationAccess: {
+        accessControl: {},
+      },
+    };
 
-        vi.mocked(authenticateRequest).mockResolvedValue(mockAuthentication);
-        vi.mocked(hasPermission).mockReturnValue(false);
+    vi.mocked(authenticateRequest).mockResolvedValue(mockAuthentication);
+    vi.mocked(hasPermission).mockReturnValue(false);
 
-        const result = await checkAuth(null, environmentId, mockRequest);
+    const result = await checkAuth(null, environmentId, mockRequest);
 
-        expect(authenticateRequest).toHaveBeenCalledWith(mockRequest);
-        expect(hasPermission).toHaveBeenCalledWith(mockAuthentication.environmentPermissions, environmentId, "POST");
-        expect(responses.unauthorizedResponse).toHaveBeenCalled();
-        expect(result).toBe(mockUnauthorizedResponse);
-    });
+    expect(authenticateRequest).toHaveBeenCalledWith(mockRequest);
+    expect(hasPermission).toHaveBeenCalledWith(
+      mockAuthentication.environmentPermissions,
+      environmentId,
+      "POST"
+    );
+    expect(responses.unauthorizedResponse).toHaveBeenCalled();
+    expect(result).toBe(mockUnauthorizedResponse);
+  });
 
-    test("returns undefined when no session and authentication has POST permission", async () => {
-        const mockAuthentication: TAuthenticationApiKey = {
-            type: "apiKey",
-            environmentPermissions: [
-                {
-                    environmentId: "env-123",
-                    permission: "write",
-                    environmentType: "development",
-                    projectId: "project-1",
-                    projectName: "Project 1",
-                },
-            ],
-            hashedApiKey: "hashed-key",
-            apiKeyId: "api-key-id",
-            organizationId: "org-id",
-            organizationAccess: {
-                accessControl: {},
-            },
-        };
+  test("returns undefined when no session and authentication has POST permission", async () => {
+    const mockAuthentication: TAuthenticationApiKey = {
+      type: "apiKey",
+      environmentPermissions: [
+        {
+          environmentId: "env-123",
+          permission: "write",
+          environmentType: "development",
+          projectId: "project-1",
+          projectName: "Project 1",
+        },
+      ],
+      hashedApiKey: "hashed-key",
+      apiKeyId: "api-key-id",
+      organizationId: "org-id",
+      organizationAccess: {
+        accessControl: {},
+      },
+    };
 
-        vi.mocked(authenticateRequest).mockResolvedValue(mockAuthentication);
-        vi.mocked(hasPermission).mockReturnValue(true);
+    vi.mocked(authenticateRequest).mockResolvedValue(mockAuthentication);
+    vi.mocked(hasPermission).mockReturnValue(true);
 
-        const result = await checkAuth(null, environmentId, mockRequest);
+    const result = await checkAuth(null, environmentId, mockRequest);
 
-        expect(authenticateRequest).toHaveBeenCalledWith(mockRequest);
-        expect(hasPermission).toHaveBeenCalledWith(mockAuthentication.environmentPermissions, environmentId, "POST");
-        expect(result).toBeUndefined();
-    });
+    expect(authenticateRequest).toHaveBeenCalledWith(mockRequest);
+    expect(hasPermission).toHaveBeenCalledWith(
+      mockAuthentication.environmentPermissions,
+      environmentId,
+      "POST"
+    );
+    expect(result).toBeUndefined();
+  });
 
-    test("returns unauthorizedResponse when session exists but user lacks environment access", async () => {
-        const mockSession: Session = {
-            user: {
-                id: "user-123",
-            },
-            expires: "2024-12-31T23:59:59.999Z",
-        };
+  test("returns unauthorizedResponse when session exists but user lacks environment access", async () => {
+    const mockSession: Session = {
+      user: {
+        id: "user-123",
+      },
+      expires: "2024-12-31T23:59:59.999Z",
+    };
 
-        vi.mocked(hasUserEnvironmentAccess).mockResolvedValue(false);
+    vi.mocked(hasUserEnvironmentAccess).mockResolvedValue(false);
 
-        const result = await checkAuth(mockSession, environmentId, mockRequest);
+    const result = await checkAuth(mockSession, environmentId, mockRequest);
 
-        expect(hasUserEnvironmentAccess).toHaveBeenCalledWith("user-123", environmentId);
-        expect(responses.unauthorizedResponse).toHaveBeenCalled();
-        expect(result).toBe(mockUnauthorizedResponse);
-    });
+    expect(hasUserEnvironmentAccess).toHaveBeenCalledWith("user-123", environmentId);
+    expect(responses.unauthorizedResponse).toHaveBeenCalled();
+    expect(result).toBe(mockUnauthorizedResponse);
+  });
 
-    test("returns undefined when session exists and user has environment access", async () => {
-        const mockSession: Session = {
-            user: {
-                id: "user-123",
-            },
-            expires: "2024-12-31T23:59:59.999Z",
-        };
+  test("returns undefined when session exists and user has environment access", async () => {
+    const mockSession: Session = {
+      user: {
+        id: "user-123",
+      },
+      expires: "2024-12-31T23:59:59.999Z",
+    };
 
-        vi.mocked(hasUserEnvironmentAccess).mockResolvedValue(true);
+    vi.mocked(hasUserEnvironmentAccess).mockResolvedValue(true);
 
-        const result = await checkAuth(mockSession, environmentId, mockRequest);
+    const result = await checkAuth(mockSession, environmentId, mockRequest);
 
-        expect(hasUserEnvironmentAccess).toHaveBeenCalledWith("user-123", environmentId);
-        expect(result).toBeUndefined();
-    });
+    expect(hasUserEnvironmentAccess).toHaveBeenCalledWith("user-123", environmentId);
+    expect(result).toBeUndefined();
+  });
 
-    test("does not call authenticateRequest when session exists", async () => {
-        const mockSession: Session = {
-            user: {
-                id: "user-123",
-            },
-            expires: "2024-12-31T23:59:59.999Z",
-        };
+  test("does not call authenticateRequest when session exists", async () => {
+    const mockSession: Session = {
+      user: {
+        id: "user-123",
+      },
+      expires: "2024-12-31T23:59:59.999Z",
+    };
 
-        vi.mocked(hasUserEnvironmentAccess).mockResolvedValue(true);
+    vi.mocked(hasUserEnvironmentAccess).mockResolvedValue(true);
 
-        await checkAuth(mockSession, environmentId, mockRequest);
+    await checkAuth(mockSession, environmentId, mockRequest);
 
-        expect(authenticateRequest).not.toHaveBeenCalled();
-        expect(hasUserEnvironmentAccess).toHaveBeenCalledWith("user-123", environmentId);
-    });
-}); 
+    expect(authenticateRequest).not.toHaveBeenCalled();
+    expect(hasUserEnvironmentAccess).toHaveBeenCalledWith("user-123", environmentId);
+  });
+});

apps/web/app/api/v1/management/storage/lib/utils.ts

@@ -1,38 +1,41 @@
 import { authenticateRequest } from "@/app/api/v1/auth";
 import { responses } from "@/app/lib/api/response";
 import { hasUserEnvironmentAccess } from "@/lib/environment/auth";
-import { NextRequest } from "next/server";
-import { Session } from "next-auth";
 import { hasPermission } from "@/modules/organization/settings/api-keys/lib/utils";
+import { Session } from "next-auth";
+import { NextRequest } from "next/server";
 
+export const checkForRequiredFields = (
+  environmentId: string,
+  fileType: string,
+  encodedFileName: string
+): Response | undefined => {
+  if (!environmentId) {
+    return responses.badRequestResponse("environmentId is required");
+  }
 
-export const checkForRequiredFields = (environmentId: string, fileType: string, encodedFileName: string): Response | undefined => {
-    if (!environmentId) {
-        return responses.badRequestResponse("environmentId is required");
-    }
+  if (!fileType) {
+    return responses.badRequestResponse("contentType is required");
+  }
 
-    if (!fileType) {
-        return responses.badRequestResponse("contentType is required");
-    }
-
-    if (!encodedFileName) {
-        return responses.badRequestResponse("fileName is required");
-    }
+  if (!encodedFileName) {
+    return responses.badRequestResponse("fileName is required");
+  }
 };
 
 export const checkAuth = async (session: Session | null, environmentId: string, request: NextRequest) => {
-    if (!session) {
-        //check whether its using API key
-        const authentication = await authenticateRequest(request);
-        if (!authentication) return responses.notAuthenticatedResponse();
+  if (!session) {
+    //check whether its using API key
+    const authentication = await authenticateRequest(request);
+    if (!authentication) return responses.notAuthenticatedResponse();
 
-        if (!hasPermission(authentication.environmentPermissions, environmentId, "POST")) {
-            return responses.unauthorizedResponse();
-        }
-    } else {
-        const isUserAuthorized = await hasUserEnvironmentAccess(session.user.id, environmentId);
-        if (!isUserAuthorized) {
-            return responses.unauthorizedResponse();
-        }
+    if (!hasPermission(authentication.environmentPermissions, environmentId, "POST")) {
+      return responses.unauthorizedResponse();
     }
-};
+  } else {
+    const isUserAuthorized = await hasUserEnvironmentAccess(session.user.id, environmentId);
+    if (!isUserAuthorized) {
+      return responses.unauthorizedResponse();
+    }
+  }
+};

apps/web/app/api/v1/management/storage/local/route.ts

@@ -1,6 +1,7 @@
 // headers -> "Content-Type" should be present and set to a valid MIME type
 // body -> should be a valid file object (buffer)
 // method -> PUT (to be the same as the signedUrl method)
+import { checkAuth, checkForRequiredFields } from "@/app/api/v1/management/storage/lib/utils";
 import { responses } from "@/app/lib/api/response";
 import { ENCRYPTION_KEY, UPLOADS_DIR } from "@/lib/constants";
 import { validateLocalSignedUrl } from "@/lib/crypto";
@@ -10,7 +11,6 @@ import { authOptions } from "@/modules/auth/lib/authOptions";
 import { getServerSession } from "next-auth";
 import { NextRequest } from "next/server";
 import { logger } from "@formbricks/logger";
-import { checkAuth, checkForRequiredFields } from "@/app/api/v1/management/storage/lib/utils";
 
 export const POST = async (req: NextRequest): Promise<Response> => {
   if (!ENCRYPTION_KEY) {

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

@@ -1,3 +1,4 @@
+import { checkAuth, checkForRequiredFields } from "@/app/api/v1/management/storage/lib/utils";
 import { responses } from "@/app/lib/api/response";
 import { validateFile } from "@/lib/fileValidation";
 import { authOptions } from "@/modules/auth/lib/authOptions";
@@ -5,8 +6,6 @@ import { getServerSession } from "next-auth";
 import { NextRequest } from "next/server";
 import { logger } from "@formbricks/logger";
 import { getSignedUrlForPublicFile } from "./lib/getSignedUrl";
-import { checkAuth, checkForRequiredFields } from "@/app/api/v1/management/storage/lib/utils";
-
 
 // api endpoint for uploading public files
 // uploaded files will be public, anyone can access the file
@@ -14,7 +13,6 @@ import { checkAuth, checkForRequiredFields } from "@/app/api/v1/management/stora
 // use this to upload files for a specific resource, e.g. a user profile picture or a survey
 // this api endpoint will return a signed url for uploading the file to s3 and another url for uploading file to the local storage
 
-
 export const POST = async (request: NextRequest): Promise<Response> => {
   let storageInput;
 
@@ -34,7 +32,6 @@ export const POST = async (request: NextRequest): Promise<Response> => {
   const authResponse = await checkAuth(session, environmentId, request);
   if (authResponse) return authResponse;
 
-
   // Perform server-side file validation first to block dangerous file types
   const fileValidation = validateFile(fileName, fileType);
   if (!fileValidation.valid) {

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

@@ -41,7 +41,7 @@ describe("Survey Builder", () => {
         buttonLabel: { default: "common.next" },
         backButtonLabel: { default: "common.back" },
         shuffleOption: "none",
-        required: true,
+        required: false,
       });
       expect(question.choices.length).toBe(3);
       expect(question.id).toBeDefined();
@@ -141,7 +141,7 @@ describe("Survey Builder", () => {
         inputType: "text",
         buttonLabel: { default: "common.next" },
         backButtonLabel: { default: "common.back" },
-        required: true,
+        required: false,
         charLimit: {
           enabled: false,
         },
@@ -204,7 +204,7 @@ describe("Survey Builder", () => {
         range: 5,
         buttonLabel: { default: "common.next" },
         backButtonLabel: { default: "common.back" },
-        required: true,
+        required: false,
         isColorCodingEnabled: false,
       });
       expect(question.id).toBeDefined();
@@ -265,7 +265,7 @@ describe("Survey Builder", () => {
         headline: { default: "NPS Question" },
         buttonLabel: { default: "common.next" },
         backButtonLabel: { default: "common.back" },
-        required: true,
+        required: false,
         isColorCodingEnabled: false,
       });
       expect(question.id).toBeDefined();
@@ -324,7 +324,7 @@ describe("Survey Builder", () => {
         label: { default: "I agree to terms" },
         buttonLabel: { default: "common.next" },
         backButtonLabel: { default: "common.back" },
-        required: true,
+        required: false,
       });
       expect(question.id).toBeDefined();
     });
@@ -377,7 +377,7 @@ describe("Survey Builder", () => {
         headline: { default: "CTA Question" },
         buttonLabel: { default: "common.next" },
         backButtonLabel: { default: "common.back" },
-        required: true,
+        required: false,
         buttonExternal: false,
       });
       expect(question.id).toBeDefined();

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

@@ -66,7 +66,7 @@ export const buildMultipleChoiceQuestion = ({
     buttonLabel: createI18nString(buttonLabel || t(defaultButtonLabel), []),
     backButtonLabel: createI18nString(backButtonLabel || t(defaultBackButtonLabel), []),
     shuffleOption: shuffleOption || "none",
-    required: required ?? true,
+    required: required ?? false,
     logic,
   };
 };
@@ -105,7 +105,7 @@ export const buildOpenTextQuestion = ({
     headline: createI18nString(headline, []),
     buttonLabel: createI18nString(buttonLabel || t(defaultButtonLabel), []),
     backButtonLabel: createI18nString(backButtonLabel || t(defaultBackButtonLabel), []),
-    required: required ?? true,
+    required: required ?? false,
     longAnswer,
     logic,
     charLimit: {
@@ -153,7 +153,7 @@ export const buildRatingQuestion = ({
     range,
     buttonLabel: createI18nString(buttonLabel || t(defaultButtonLabel), []),
     backButtonLabel: createI18nString(backButtonLabel || t(defaultBackButtonLabel), []),
-    required: required ?? true,
+    required: required ?? false,
     isColorCodingEnabled,
     lowerLabel: lowerLabel ? createI18nString(lowerLabel, []) : undefined,
     upperLabel: upperLabel ? createI18nString(upperLabel, []) : undefined,
@@ -194,7 +194,7 @@ export const buildNPSQuestion = ({
     headline: createI18nString(headline, []),
     buttonLabel: createI18nString(buttonLabel || t(defaultButtonLabel), []),
     backButtonLabel: createI18nString(backButtonLabel || t(defaultBackButtonLabel), []),
-    required: required ?? true,
+    required: required ?? false,
     isColorCodingEnabled,
     lowerLabel: lowerLabel ? createI18nString(lowerLabel, []) : undefined,
     upperLabel: upperLabel ? createI18nString(upperLabel, []) : undefined,
@@ -230,7 +230,7 @@ export const buildConsentQuestion = ({
     headline: createI18nString(headline, []),
     buttonLabel: createI18nString(buttonLabel || t(defaultButtonLabel), []),
     backButtonLabel: createI18nString(backButtonLabel || t(defaultBackButtonLabel), []),
-    required: required ?? true,
+    required: required ?? false,
     label: createI18nString(label, []),
     logic,
   };
@@ -269,7 +269,7 @@ export const buildCTAQuestion = ({
     buttonLabel: createI18nString(buttonLabel || t(defaultButtonLabel), []),
     backButtonLabel: createI18nString(backButtonLabel || t(defaultBackButtonLabel), []),
     dismissButtonLabel: dismissButtonLabel ? createI18nString(dismissButtonLabel, []) : undefined,
-    required: required ?? true,
+    required: required ?? false,
     buttonExternal,
     buttonUrl,
     logic,

apps/web/app/lib/templates.ts

@@ -3006,12 +3006,7 @@ const understandLowEngagement = (t: TFnType): TTemplate => {
             t("templates.understand_low_engagement_question_1_choice_4"),
             t("templates.understand_low_engagement_question_1_choice_5"),
           ],
-          choiceIds: [
-            reusableOptionIds[0],
-            reusableOptionIds[1],
-            reusableOptionIds[2],
-            reusableOptionIds[3],
-          ],
+          choiceIds: [reusableOptionIds[0], reusableOptionIds[1], reusableOptionIds[2], reusableOptionIds[3]],
           headline: t("templates.understand_low_engagement_question_1_headline"),
           required: true,
           containsOther: true,

apps/web/app/page.test.tsx

@@ -3,12 +3,12 @@ import { cleanup } from "@testing-library/react";
 import { beforeEach, describe, expect, test, vi } from "vitest";
 import { TMembership } from "@formbricks/types/memberships";
 import { TOrganization } from "@formbricks/types/organizations";
+import { TProject } from "@formbricks/types/project";
 import { TUser } from "@formbricks/types/user";
 import Page from "./page";
 
-// Mock dependencies
-vi.mock("@/lib/environment/service", () => ({
-  getFirstEnvironmentIdByUserId: vi.fn(),
+vi.mock("@/lib/project/service", () => ({
+  getUserProjectEnvironmentsByOrganizationIds: vi.fn(),
 }));
 
 vi.mock("@/lib/instance/service", () => ({
@@ -48,8 +48,11 @@ vi.mock("@/modules/ui/components/client-logout", () => ({
 }));
 
 vi.mock("@/app/ClientEnvironmentRedirect", () => ({
-  default: ({ environmentId }: { environmentId: string }) => (
-    <div data-testid="client-environment-redirect">Environment ID: {environmentId}</div>
+  default: ({ environmentId, userEnvironments }: { environmentId: string; userEnvironments?: string[] }) => (
+    <div data-testid="client-environment-redirect">
+      Environment ID: {environmentId}
+      {userEnvironments && ` | User Environments: ${userEnvironments.join(", ")}`}
+    </div>
   ),
 }));
 
@@ -149,7 +152,7 @@ describe("Page", () => {
     const { getIsFreshInstance } = await import("@/lib/instance/service");
     const { getUser } = await import("@/lib/user/service");
     const { getOrganizationsByUserId } = await import("@/lib/organization/service");
-    const { getFirstEnvironmentIdByUserId } = await import("@/lib/environment/service");
+    const { getUserProjectEnvironmentsByOrganizationIds } = await import("@/lib/project/service");
     const { getMembershipByUserIdOrganizationId } = await import("@/lib/membership/service");
     const { getAccessFlags } = await import("@/lib/membership/utils");
     const { redirect } = await import("next/navigation");
@@ -204,13 +207,23 @@ describe("Page", () => {
       role: "owner",
     };
 
+    const mockUserProjects = [
+      {
+        id: "test-project-id",
+        name: "Test Project",
+        environments: [],
+      },
+    ];
+
     vi.mocked(getServerSession).mockResolvedValue({
       user: { id: "test-user-id" },
     } as any);
     vi.mocked(getIsFreshInstance).mockResolvedValue(false);
     vi.mocked(getUser).mockResolvedValue(mockUser);
+    vi.mocked(getUserProjectEnvironmentsByOrganizationIds).mockResolvedValue(
+      mockUserProjects as unknown as TProject[]
+    );
     vi.mocked(getOrganizationsByUserId).mockResolvedValue([mockOrganization]);
-    vi.mocked(getFirstEnvironmentIdByUserId).mockResolvedValue(null);
     vi.mocked(getMembershipByUserIdOrganizationId).mockResolvedValue(mockMembership);
     vi.mocked(getAccessFlags).mockReturnValue({
       isManager: false,
@@ -228,8 +241,8 @@ describe("Page", () => {
     const { getServerSession } = await import("next-auth");
     const { getIsFreshInstance } = await import("@/lib/instance/service");
     const { getUser } = await import("@/lib/user/service");
+    const { getUserProjectEnvironmentsByOrganizationIds } = await import("@/lib/project/service");
     const { getOrganizationsByUserId } = await import("@/lib/organization/service");
-    const { getFirstEnvironmentIdByUserId } = await import("@/lib/environment/service");
     const { getMembershipByUserIdOrganizationId } = await import("@/lib/membership/service");
     const { getAccessFlags } = await import("@/lib/membership/utils");
     const { redirect } = await import("next/navigation");
@@ -284,13 +297,23 @@ describe("Page", () => {
       role: "member",
     };
 
+    const mockUserProjects = [
+      {
+        id: "test-project-id",
+        name: "Test Project",
+        environments: [],
+      },
+    ];
+
     vi.mocked(getServerSession).mockResolvedValue({
       user: { id: "test-user-id" },
     } as any);
     vi.mocked(getIsFreshInstance).mockResolvedValue(false);
     vi.mocked(getUser).mockResolvedValue(mockUser);
+    vi.mocked(getUserProjectEnvironmentsByOrganizationIds).mockResolvedValue(
+      mockUserProjects as unknown as TProject[]
+    );
     vi.mocked(getOrganizationsByUserId).mockResolvedValue([mockOrganization]);
-    vi.mocked(getFirstEnvironmentIdByUserId).mockResolvedValue(null);
     vi.mocked(getMembershipByUserIdOrganizationId).mockResolvedValue(mockMembership);
     vi.mocked(getAccessFlags).mockReturnValue({
       isManager: false,
@@ -309,9 +332,9 @@ describe("Page", () => {
     const { getIsFreshInstance } = await import("@/lib/instance/service");
     const { getUser } = await import("@/lib/user/service");
     const { getOrganizationsByUserId } = await import("@/lib/organization/service");
-    const { getFirstEnvironmentIdByUserId } = await import("@/lib/environment/service");
     const { getMembershipByUserIdOrganizationId } = await import("@/lib/membership/service");
     const { getAccessFlags } = await import("@/lib/membership/utils");
+    const { getUserProjectEnvironmentsByOrganizationIds } = await import("@/lib/project/service");
     const { render } = await import("@testing-library/react");
 
     const mockUser: TUser = {
@@ -364,7 +387,43 @@ describe("Page", () => {
       role: "member",
     };
 
-    const mockEnvironmentId = "test-env-id";
+    const mockUserProjects = [
+      {
+        id: "project-1",
+        name: "Test Project",
+        createdAt: new Date(),
+        updatedAt: new Date(),
+        organizationId: "test-org-id",
+        styling: { allowStyleOverwrite: true },
+        recontactDays: 0,
+        inAppSurveyBranding: false,
+        linkSurveyBranding: false,
+        config: { channel: "link" as const, industry: "saas" as const },
+        placement: "bottomRight" as const,
+        clickOutsideClose: false,
+        darkOverlay: false,
+        languages: [],
+        logo: null,
+        environments: [
+          {
+            id: "test-env-id",
+            type: "production" as const,
+            createdAt: new Date(),
+            updatedAt: new Date(),
+            projectId: "project-1",
+            appSetupCompleted: true,
+          },
+          {
+            id: "test-env-dev",
+            type: "development" as const,
+            createdAt: new Date(),
+            updatedAt: new Date(),
+            projectId: "project-1",
+            appSetupCompleted: true,
+          },
+        ],
+      },
+    ] as any;
 
     vi.mocked(getServerSession).mockResolvedValue({
       user: { id: "test-user-id" },
@@ -372,8 +431,8 @@ describe("Page", () => {
     vi.mocked(getIsFreshInstance).mockResolvedValue(false);
     vi.mocked(getUser).mockResolvedValue(mockUser);
     vi.mocked(getOrganizationsByUserId).mockResolvedValue([mockOrganization]);
-    vi.mocked(getFirstEnvironmentIdByUserId).mockResolvedValue(mockEnvironmentId);
     vi.mocked(getMembershipByUserIdOrganizationId).mockResolvedValue(mockMembership);
+    vi.mocked(getUserProjectEnvironmentsByOrganizationIds).mockResolvedValue(mockUserProjects);
     vi.mocked(getAccessFlags).mockReturnValue({
       isManager: false,
       isOwner: false,
@@ -385,7 +444,7 @@ describe("Page", () => {
     const { container } = render(result);
 
     expect(container.querySelector('[data-testid="client-environment-redirect"]')).toHaveTextContent(
-      `Environment ID: ${mockEnvironmentId}`
+      `User Environments: test-env-id, test-env-dev`
     );
   });
 });

apps/web/app/page.tsx

@@ -1,9 +1,9 @@
 import ClientEnvironmentRedirect from "@/app/ClientEnvironmentRedirect";
-import { getFirstEnvironmentIdByUserId } from "@/lib/environment/service";
 import { getIsFreshInstance } from "@/lib/instance/service";
 import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
 import { getAccessFlags } from "@/lib/membership/utils";
 import { getOrganizationsByUserId } from "@/lib/organization/service";
+import { getUserProjectEnvironmentsByOrganizationIds } from "@/lib/project/service";
 import { getUser } from "@/lib/user/service";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { ClientLogout } from "@/modules/ui/components/client-logout";
@@ -34,16 +34,37 @@ const Page = async () => {
     return redirect("/setup/organization/create");
   }
 
-  let environmentId: string | null = null;
-  environmentId = await getFirstEnvironmentIdByUserId(session.user.id);
+  const projectsByOrg = await getUserProjectEnvironmentsByOrganizationIds(
+    userOrganizations.map((org) => org.id),
+    user.id
+  );
+
+  // Flatten all environments from all projects across all organizations
+  const allEnvironments = projectsByOrg.flatMap((project) => project.environments);
+
+  // Find first production environment and collect all other environment IDs in one pass
+  const { firstProductionEnvironmentId, otherEnvironmentIds } = allEnvironments.reduce(
+    (acc, env) => {
+      if (env.type === "production" && !acc.firstProductionEnvironmentId) {
+        acc.firstProductionEnvironmentId = env.id;
+      } else {
+        acc.otherEnvironmentIds.add(env.id);
+      }
+      return acc;
+    },
+    { firstProductionEnvironmentId: null as string | null, otherEnvironmentIds: new Set<string>() }
+  );
+
+  const userEnvironments = [...otherEnvironmentIds];
 
   const currentUserMembership = await getMembershipByUserIdOrganizationId(
     session.user.id,
     userOrganizations[0].id
   );
+
   const { isManager, isOwner } = getAccessFlags(currentUserMembership?.role);
 
-  if (!environmentId) {
+  if (!firstProductionEnvironmentId) {
     if (isOwner || isManager) {
       return redirect(`/organizations/${userOrganizations[0].id}/projects/new/mode`);
     } else {
@@ -51,7 +72,10 @@ const Page = async () => {
     }
   }
 
-  return <ClientEnvironmentRedirect environmentId={environmentId} />;
+  // Put the first production environment at the front of the array
+  const sortedUserEnvironments = [firstProductionEnvironmentId, ...userEnvironments];
+
+  return <ClientEnvironmentRedirect userEnvironments={sortedUserEnvironments} />;
 };
 
 export default Page;

apps/web/app/s/[surveyId]/not-found.tsx

@@ -1,3 +1,5 @@
 import { LinkSurveyNotFound } from "@/modules/survey/link/not-found";
 
-export default LinkSurveyNotFound;
+export default function NotFound() {
+  return <LinkSurveyNotFound />;
+}

apps/web/lib/airtable/service.ts

@@ -13,7 +13,8 @@ import {
   ZIntegrationAirtableTokenSchema,
 } from "@formbricks/types/integration/airtable";
 import { AIRTABLE_CLIENT_ID, AIRTABLE_MESSAGE_LIMIT } from "../constants";
-import { createOrUpdateIntegration, deleteIntegration, getIntegrationByType } from "../integration/service";
+import { createOrUpdateIntegration, getIntegrationByType } from "../integration/service";
+import { delay } from "../utils/promises";
 import { truncateText } from "../utils/strings";
 
 export const getBases = async (key: string) => {
@@ -99,7 +100,11 @@ export const getAirtableToken = async (environmentId: string) => {
       });
 
       if (!newToken) {
-        throw new Error("Failed to create new token");
+        logger.error("Failed to fetch new Airtable token", {
+          environmentId,
+          airtableIntegration,
+        });
+        throw new Error("Failed to fetch new Airtable token");
       }
 
       await createOrUpdateIntegration(environmentId, {
@@ -116,9 +121,11 @@ export const getAirtableToken = async (environmentId: string) => {
 
     return access_token;
   } catch (error) {
-    await deleteIntegration(environmentId);
-
-    throw new Error("invalid token");
+    logger.error("Failed to get Airtable token", {
+      environmentId,
+      error,
+    });
+    throw new Error("Failed to get Airtable token");
   }
 };
 
@@ -178,6 +185,18 @@ const addField = async (
   return await req.json();
 };
 
+const getExistingFields = async (key: TIntegrationAirtableCredential, baseId: string, tableId: string) => {
+  const req = await tableFetcher(key, baseId);
+  const tables = ZIntegrationAirtableTablesWithFields.parse(req).tables;
+  const currentTable = tables.find((t) => t.id === tableId);
+
+  if (!currentTable) {
+    throw new Error(`Table with ID ${tableId} not found`);
+  }
+
+  return new Set(currentTable.fields.map((f) => f.name));
+};
+
 export const writeData = async (
   key: TIntegrationAirtableCredential,
   configData: TIntegrationAirtableConfigData,
@@ -186,6 +205,7 @@ export const writeData = async (
   const responses = values[0];
   const questions = values[1];
 
+  // 1) Build the record payload
   const data: Record<string, string> = {};
   for (let i = 0; i < questions.length; i++) {
     data[questions[i]] =
@@ -194,34 +214,73 @@ export const writeData = async (
         : responses[i];
   }
 
-  const req = await tableFetcher(key, configData.baseId);
-  const tables = ZIntegrationAirtableTablesWithFields.parse(req).tables;
+  // 2) Figure out which fields need creating
+  const existingFields = await getExistingFields(key, configData.baseId, configData.tableId);
+  const fieldsToCreate = questions.filter((q) => !existingFields.has(q));
 
-  const currentTable = tables.find((table) => table.id === configData.tableId);
-  if (currentTable) {
-    const currentFields = new Set(currentTable.fields.map((field) => field.name));
-    const fieldsToCreate = new Set<string>();
-    for (const field of questions) {
-      const hasField = currentFields.has(field);
-      if (!hasField) {
-        fieldsToCreate.add(field);
+  // 3) Create any missing fields with throttling to respect Airtable's 5 req/sec per base limit
+  if (fieldsToCreate.length > 0) {
+    // Sequential processing with delays
+    const DELAY_BETWEEN_REQUESTS = 250; // 250ms = 4 requests per second (staying under 5/sec limit)
+
+    for (let i = 0; i < fieldsToCreate.length; i++) {
+      const fieldName = fieldsToCreate[i];
+
+      const createRes = await addField(key, configData.baseId, configData.tableId, {
+        name: fieldName,
+        type: "singleLineText",
+      });
+
+      if (createRes?.error) {
+        throw new Error(`Failed to create field "${fieldName}": ${JSON.stringify(createRes)}`);
+      }
+
+      // Add delay between requests (except for the last one)
+      if (i < fieldsToCreate.length - 1) {
+        await delay(DELAY_BETWEEN_REQUESTS);
       }
     }
 
-    if (fieldsToCreate.size > 0) {
-      const createFieldPromise: Promise<any>[] = [];
-      fieldsToCreate.forEach((fieldName) => {
-        createFieldPromise.push(
-          addField(key, configData.baseId, configData.tableId, {
-            name: fieldName,
-            type: "singleLineText",
-          })
-        );
-      });
+    // 4) Wait for the new fields to show up
+    await waitForFieldsToExist(key, configData, fieldsToCreate);
+  }
 
-      await Promise.all(createFieldPromise);
+  // 5) Finally, add the records
+  await addRecords(key, configData.baseId, configData.tableId, data);
+};
+
+async function waitForFieldsToExist(
+  key: TIntegrationAirtableCredential,
+  configData: TIntegrationAirtableConfigData,
+  fieldNames: string[],
+  maxRetries = 5,
+  intervalMs = 2000
+) {
+  let existingFields: Set<string> = new Set(),
+    missingFields: string[] = [];
+
+  for (let attempt = 1; attempt <= maxRetries; attempt++) {
+    existingFields = await getExistingFields(key, configData.baseId, configData.tableId);
+    missingFields = fieldNames.filter((f) => !existingFields.has(f));
+
+    if (missingFields.length === 0) {
+      return;
+    }
+
+    if (attempt < maxRetries) {
+      logger.error(
+        `Attempt ${attempt}/${maxRetries}: ${missingFields.length} field(s) still missing [${missingFields.join(
+          ", "
+        )}], retrying in ${intervalMs / 1000}s…`
+      );
+
+      await new Promise((r) => setTimeout(r, intervalMs));
     }
   }
 
-  await addRecords(key, configData.baseId, configData.tableId, data);
-};
+  throw new Error(
+    `Timed out waiting for ${missingFields.length} field(s) [${missingFields.join(
+      ", "
+    )}] to become available. Available fields: [${Array.from(existingFields).join(", ")}]`
+  );
+}

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

@@ -1,10 +1,16 @@
 import { createId } from "@paralleldrive/cuid2";
-import { Prisma } from "@prisma/client";
+import { OrganizationRole, Prisma, WidgetPlacement } from "@prisma/client";
 import { afterEach, describe, expect, test, vi } from "vitest";
 import { prisma } from "@formbricks/database";
 import { DatabaseError, ValidationError } from "@formbricks/types/errors";
 import { ITEMS_PER_PAGE } from "../constants";
-import { getProject, getProjectByEnvironmentId, getProjects, getUserProjects } from "./service";
+import {
+  getProject,
+  getProjectByEnvironmentId,
+  getProjects,
+  getUserProjectEnvironmentsByOrganizationIds,
+  getUserProjects,
+} from "./service";
 
 vi.mock("@formbricks/database", () => ({
   prisma: {
@@ -15,6 +21,7 @@ vi.mock("@formbricks/database", () => ({
     },
     membership: {
       findFirst: vi.fn(),
+      findMany: vi.fn(),
     },
   },
 }));
@@ -35,13 +42,20 @@ describe("Project Service", () => {
       recontactDays: 0,
       linkSurveyBranding: true,
       inAppSurveyBranding: true,
-      config: {},
-      placement: "bottomRight",
+      config: {
+        channel: null,
+        industry: null,
+      },
+      placement: WidgetPlacement.bottomRight,
       clickOutsideClose: true,
       darkOverlay: false,
       environments: [],
-      styling: {},
+      styling: {
+        allowStyleOverwrite: true,
+      },
       logo: null,
+      brandColor: null,
+      highlightBorderColor: null,
     };
 
     vi.mocked(prisma.project.findUnique).mockResolvedValue(mockProject);
@@ -86,13 +100,20 @@ describe("Project Service", () => {
       recontactDays: 0,
       linkSurveyBranding: true,
       inAppSurveyBranding: true,
-      config: {},
-      placement: "bottomRight",
+      config: {
+        channel: null,
+        industry: null,
+      },
+      placement: WidgetPlacement.bottomRight,
       clickOutsideClose: true,
       darkOverlay: false,
       environments: [],
-      styling: {},
+      styling: {
+        allowStyleOverwrite: true,
+      },
       logo: null,
+      brandColor: null,
+      highlightBorderColor: null,
     };
 
     vi.mocked(prisma.project.findFirst).mockResolvedValue(mockProject);
@@ -144,13 +165,20 @@ describe("Project Service", () => {
         recontactDays: 0,
         linkSurveyBranding: true,
         inAppSurveyBranding: true,
-        config: {},
-        placement: "bottomRight",
+        config: {
+          channel: null,
+          industry: null,
+        },
+        placement: WidgetPlacement.bottomRight,
         clickOutsideClose: true,
         darkOverlay: false,
         environments: [],
-        styling: {},
+        styling: {
+          allowStyleOverwrite: true,
+        },
         logo: null,
+        brandColor: null,
+        highlightBorderColor: null,
       },
       {
         id: createId(),
@@ -162,23 +190,29 @@ describe("Project Service", () => {
         recontactDays: 0,
         linkSurveyBranding: true,
         inAppSurveyBranding: true,
-        config: {},
-        placement: "bottomRight",
+        config: {
+          channel: null,
+          industry: null,
+        },
+        placement: WidgetPlacement.bottomRight,
         clickOutsideClose: true,
         darkOverlay: false,
         environments: [],
-        styling: {},
+        styling: {
+          allowStyleOverwrite: true,
+        },
         logo: null,
+        brandColor: null,
+        highlightBorderColor: null,
       },
     ];
 
     vi.mocked(prisma.membership.findFirst).mockResolvedValue({
-      id: createId(),
       userId,
       organizationId,
-      role: "admin",
-      createdAt: new Date(),
-      updatedAt: new Date(),
+      role: OrganizationRole.owner,
+      accepted: true,
+      deprecatedRole: null,
     });
 
     vi.mocked(prisma.project.findMany).mockResolvedValue(mockProjects);
@@ -210,23 +244,29 @@ describe("Project Service", () => {
         recontactDays: 0,
         linkSurveyBranding: true,
         inAppSurveyBranding: true,
-        config: {},
-        placement: "bottomRight",
+        config: {
+          channel: null,
+          industry: null,
+        },
+        placement: WidgetPlacement.bottomRight,
         clickOutsideClose: true,
         darkOverlay: false,
         environments: [],
-        styling: {},
+        styling: {
+          allowStyleOverwrite: true,
+        },
         logo: null,
+        brandColor: null,
+        highlightBorderColor: null,
       },
     ];
 
     vi.mocked(prisma.membership.findFirst).mockResolvedValue({
-      id: createId(),
       userId,
       organizationId,
-      role: "member",
-      createdAt: new Date(),
-      updatedAt: new Date(),
+      role: OrganizationRole.member,
+      accepted: true,
+      deprecatedRole: null,
     });
 
     vi.mocked(prisma.project.findMany).mockResolvedValue(mockProjects);
@@ -278,23 +318,29 @@ describe("Project Service", () => {
         recontactDays: 0,
         linkSurveyBranding: true,
         inAppSurveyBranding: true,
-        config: {},
-        placement: "bottomRight",
+        config: {
+          channel: null,
+          industry: null,
+        },
+        placement: WidgetPlacement.bottomRight,
         clickOutsideClose: true,
         darkOverlay: false,
         environments: [],
-        styling: {},
+        styling: {
+          allowStyleOverwrite: true,
+        },
         logo: null,
+        brandColor: null,
+        highlightBorderColor: null,
       },
     ];
 
     vi.mocked(prisma.membership.findFirst).mockResolvedValue({
-      id: createId(),
       userId,
       organizationId,
-      role: "admin",
-      createdAt: new Date(),
-      updatedAt: new Date(),
+      role: OrganizationRole.owner,
+      accepted: true,
+      deprecatedRole: null,
     });
 
     vi.mocked(prisma.project.findMany).mockResolvedValue(mockProjects);
@@ -326,13 +372,20 @@ describe("Project Service", () => {
         recontactDays: 0,
         linkSurveyBranding: true,
         inAppSurveyBranding: true,
-        config: {},
-        placement: "bottomRight",
+        config: {
+          channel: null,
+          industry: null,
+        },
+        placement: WidgetPlacement.bottomRight,
         clickOutsideClose: true,
         darkOverlay: false,
         environments: [],
-        styling: {},
+        styling: {
+          allowStyleOverwrite: true,
+        },
         logo: null,
+        brandColor: null,
+        highlightBorderColor: null,
       },
       {
         id: createId(),
@@ -344,13 +397,20 @@ describe("Project Service", () => {
         recontactDays: 0,
         linkSurveyBranding: true,
         inAppSurveyBranding: true,
-        config: {},
-        placement: "bottomRight",
+        config: {
+          channel: null,
+          industry: null,
+        },
+        placement: WidgetPlacement.bottomRight,
         clickOutsideClose: true,
         darkOverlay: false,
         environments: [],
-        styling: {},
+        styling: {
+          allowStyleOverwrite: true,
+        },
         logo: null,
+        brandColor: null,
+        highlightBorderColor: null,
       },
     ];
 
@@ -382,13 +442,20 @@ describe("Project Service", () => {
         recontactDays: 0,
         linkSurveyBranding: true,
         inAppSurveyBranding: true,
-        config: {},
-        placement: "bottomRight",
+        config: {
+          channel: null,
+          industry: null,
+        },
+        placement: WidgetPlacement.bottomRight,
         clickOutsideClose: true,
         darkOverlay: false,
         environments: [],
-        styling: {},
+        styling: {
+          allowStyleOverwrite: true,
+        },
         logo: null,
+        brandColor: null,
+        highlightBorderColor: null,
       },
     ];
 
@@ -418,4 +485,199 @@ describe("Project Service", () => {
 
     await expect(getProjects(organizationId)).rejects.toThrow(DatabaseError);
   });
+
+  test("getProjectsByOrganizationIds should return projects for given organization IDs", async () => {
+    const organizationId1 = createId();
+    const organizationId2 = createId();
+    const userId = createId();
+    const mockProjects = [
+      {
+        environments: [],
+      },
+      {
+        environments: [],
+      },
+    ];
+
+    vi.mocked(prisma.membership.findMany).mockResolvedValue([
+      {
+        userId,
+        organizationId: organizationId1,
+        role: "owner" as any,
+        accepted: true,
+        deprecatedRole: null,
+      },
+      {
+        userId,
+        organizationId: organizationId2,
+        role: "owner" as any,
+        accepted: true,
+        deprecatedRole: null,
+      },
+    ]);
+
+    vi.mocked(prisma.project.findMany).mockResolvedValue(mockProjects as any);
+
+    const result = await getUserProjectEnvironmentsByOrganizationIds(
+      [organizationId1, organizationId2],
+      userId
+    );
+
+    expect(result).toEqual(mockProjects);
+    expect(prisma.project.findMany).toHaveBeenCalledWith({
+      where: {
+        OR: [{ organizationId: organizationId1 }, { organizationId: organizationId2 }],
+      },
+      select: { environments: true },
+    });
+  });
+
+  test("getProjectsByOrganizationIds should return empty array when no projects are found", async () => {
+    const organizationId1 = createId();
+    const organizationId2 = createId();
+    const userId = createId();
+
+    vi.mocked(prisma.membership.findMany).mockResolvedValue([
+      {
+        userId,
+        organizationId: organizationId1,
+        role: "owner" as any,
+        accepted: true,
+        deprecatedRole: null,
+      },
+      {
+        userId,
+        organizationId: organizationId2,
+        role: "owner" as any,
+        accepted: true,
+        deprecatedRole: null,
+      },
+    ]);
+
+    vi.mocked(prisma.project.findMany).mockResolvedValue([]);
+
+    const result = await getUserProjectEnvironmentsByOrganizationIds(
+      [organizationId1, organizationId2],
+      userId
+    );
+
+    expect(result).toEqual([]);
+    expect(prisma.project.findMany).toHaveBeenCalledWith({
+      where: {
+        OR: [{ organizationId: organizationId1 }, { organizationId: organizationId2 }],
+      },
+      select: { environments: true },
+    });
+  });
+
+  test("getProjectsByOrganizationIds should throw DatabaseError when prisma throws", async () => {
+    const organizationId1 = createId();
+    const organizationId2 = createId();
+    const userId = createId();
+    const prismaError = new Prisma.PrismaClientKnownRequestError("Database error", {
+      code: "P2002",
+      clientVersion: "5.0.0",
+    });
+
+    vi.mocked(prisma.membership.findMany).mockResolvedValue([
+      {
+        userId,
+        organizationId: organizationId1,
+        role: "owner" as any,
+        accepted: true,
+        deprecatedRole: null,
+      },
+    ]);
+
+    vi.mocked(prisma.project.findMany).mockRejectedValue(prismaError);
+
+    await expect(
+      getUserProjectEnvironmentsByOrganizationIds([organizationId1, organizationId2], userId)
+    ).rejects.toThrow(DatabaseError);
+  });
+
+  test("getProjectsByOrganizationIds should throw ValidationError with wrong input", async () => {
+    const userId = createId();
+    await expect(getUserProjectEnvironmentsByOrganizationIds(["wrong-id"], userId)).rejects.toThrow(
+      ValidationError
+    );
+  });
+
+  test("getProjectsByOrganizationIds should return empty array when user has no memberships", async () => {
+    const organizationId1 = createId();
+    const organizationId2 = createId();
+    const userId = createId();
+
+    // Mock no memberships found
+    vi.mocked(prisma.membership.findMany).mockResolvedValue([]);
+
+    const result = await getUserProjectEnvironmentsByOrganizationIds(
+      [organizationId1, organizationId2],
+      userId
+    );
+
+    expect(result).toEqual([]);
+    expect(prisma.membership.findMany).toHaveBeenCalledWith({
+      where: {
+        userId,
+        organizationId: {
+          in: [organizationId1, organizationId2],
+        },
+      },
+    });
+    // Should not call project.findMany when no memberships
+    expect(prisma.project.findMany).not.toHaveBeenCalled();
+  });
+
+  test("getProjectsByOrganizationIds should handle member role with team access", async () => {
+    const organizationId1 = createId();
+    const organizationId2 = createId();
+    const userId = createId();
+    const mockProjects = [
+      {
+        environments: [],
+      },
+    ];
+
+    // Mock membership where user is a member
+    vi.mocked(prisma.membership.findMany).mockResolvedValue([
+      {
+        userId,
+        organizationId: organizationId1,
+        role: "member" as any,
+        accepted: true,
+        deprecatedRole: null,
+      },
+    ]);
+
+    vi.mocked(prisma.project.findMany).mockResolvedValue(mockProjects as any);
+
+    const result = await getUserProjectEnvironmentsByOrganizationIds(
+      [organizationId1, organizationId2],
+      userId
+    );
+
+    expect(result).toEqual(mockProjects);
+    expect(prisma.project.findMany).toHaveBeenCalledWith({
+      where: {
+        OR: [
+          {
+            organizationId: organizationId1,
+            projectTeams: {
+              some: {
+                team: {
+                  teamUsers: {
+                    some: {
+                      userId,
+                    },
+                  },
+                },
+              },
+            },
+          },
+        ],
+      },
+      select: { environments: true },
+    });
+  });
 });

apps/web/lib/project/service.ts

@@ -170,3 +170,67 @@ export const getOrganizationProjectsCount = reactCache(async (organizationId: st
     throw error;
   }
 });
+
+export const getUserProjectEnvironmentsByOrganizationIds = reactCache(
+  async (organizationIds: string[], userId: string): Promise<Pick<TProject, "environments">[]> => {
+    validateInputs([organizationIds, ZId.array()], [userId, ZId]);
+    try {
+      if (organizationIds.length === 0) {
+        return [];
+      }
+
+      const memberships = await prisma.membership.findMany({
+        where: {
+          userId,
+          organizationId: {
+            in: organizationIds,
+          },
+        },
+      });
+
+      if (memberships.length === 0) {
+        return [];
+      }
+
+      const whereConditions: Prisma.ProjectWhereInput[] = memberships.map((membership) => {
+        let projectWhereClause: Prisma.ProjectWhereInput = {
+          organizationId: membership.organizationId,
+        };
+
+        if (membership.role === "member") {
+          projectWhereClause = {
+            ...projectWhereClause,
+            projectTeams: {
+              some: {
+                team: {
+                  teamUsers: {
+                    some: {
+                      userId,
+                    },
+                  },
+                },
+              },
+            },
+          };
+        }
+
+        return projectWhereClause;
+      });
+
+      const projects = await prisma.project.findMany({
+        where: {
+          OR: whereConditions,
+        },
+        select: { environments: true },
+      });
+
+      return projects;
+    } catch (err) {
+      if (err instanceof Prisma.PrismaClientKnownRequestError) {
+        throw new DatabaseError(err.message);
+      }
+
+      throw err;
+    }
+  }
+);

apps/web/locales/de-DE.json

@@ -309,7 +309,6 @@
     "project_not_found": "Projekt nicht gefunden",
     "project_permission_not_found": "Projekt-Berechtigung nicht gefunden",
     "projects": "Projekte",
-    "projects_limit_reached": "Projektlimit erreicht",
     "question": "Frage",
     "question_id": "Frage-ID",
     "questions": "Fragen",

apps/web/locales/en-US.json

@@ -309,7 +309,6 @@
     "project_not_found": "Project not found",
     "project_permission_not_found": "Project permission not found",
     "projects": "Projects",
-    "projects_limit_reached": "Projects limit reached",
     "question": "Question",
     "question_id": "Question ID",
     "questions": "Questions",
@@ -1892,12 +1891,12 @@
   },
   "s": {
     "check_inbox_or_spam": "Please also check your spam folder if you don't see the email in your inbox.",
-    "completed": "This free & open-source survey has been closed.",
-    "create_your_own": "Create your own",
+    "completed": "This survey is closed.",
+    "create_your_own": "Create your own open-source survey",
     "enter_pin": "This survey is protected. Enter the PIN below",
     "just_curious": "Just curious?",
     "link_invalid": "This survey can only be taken by invitation.",
-    "paused": "This free & open-source survey is temporarily paused.",
+    "paused": "This survey is temporarily paused.",
     "please_try_again_with_the_original_link": "Please try again with the original link",
     "preview_survey_questions": "Preview survey questions.",
     "question_preview": "Question Preview",

apps/web/locales/fr-FR.json

@@ -309,7 +309,6 @@
     "project_not_found": "Projet non trouvé",
     "project_permission_not_found": "Autorisation de projet non trouvée",
     "projects": "Projets",
-    "projects_limit_reached": "Limite de projets atteinte",
     "question": "Question",
     "question_id": "ID de la question",
     "questions": "Questions",

apps/web/locales/pt-BR.json

@@ -309,7 +309,6 @@
     "project_not_found": "Projeto não encontrado",
     "project_permission_not_found": "Permissão do projeto não encontrada",
     "projects": "Projetos",
-    "projects_limit_reached": "Limites de projetos atingidos",
     "question": "Pergunta",
     "question_id": "ID da Pergunta",
     "questions": "Perguntas",

apps/web/locales/pt-PT.json

@@ -309,7 +309,6 @@
     "project_not_found": "Projeto não encontrado",
     "project_permission_not_found": "Permissão do projeto não encontrada",
     "projects": "Projetos",
-    "projects_limit_reached": "Limite de projetos atingido",
     "question": "Pergunta",
     "question_id": "ID da pergunta",
     "questions": "Perguntas",
@@ -1892,12 +1891,12 @@
   },
   "s": {
     "check_inbox_or_spam": "Por favor, verifique também a sua pasta de spam se não vir o email na sua caixa de entrada.",
-    "completed": "Este inquérito gratuito e de código aberto foi encerrado.",
-    "create_your_own": "Crie o seu próprio",
+    "completed": "Este inquérito está encerrado.",
+    "create_your_own": "Crie o seu próprio inquérito de código aberto",
     "enter_pin": "Este inquérito está protegido. Introduza o PIN abaixo",
     "just_curious": "Só por curiosidade?",
     "link_invalid": "Este inquérito só pode ser respondido por convite.",
-    "paused": "Este inquérito gratuito e de código aberto está temporariamente pausado.",
+    "paused": "Este inquérito está temporariamente suspenso.",
     "please_try_again_with_the_original_link": "Por favor, tente novamente com o link original",
     "preview_survey_questions": "Pré-visualizar perguntas do inquérito.",
     "question_preview": "Pré-visualização da Pergunta",

apps/web/locales/zh-Hant-TW.json

@@ -309,7 +309,6 @@
     "project_not_found": "找不到專案",
     "project_permission_not_found": "找不到專案權限",
     "projects": "專案",
-    "projects_limit_reached": "已達到專案上限",
     "question": "問題",
     "question_id": "問題 ID",
     "questions": "問題",

apps/web/modules/account/components/DeleteAccountModal/index.test.tsx

@@ -1,3 +1,4 @@
+import { FORMBRICKS_ENVIRONMENT_ID_LS } from "@/lib/localStorage";
 import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { afterEach, describe, expect, test, vi } from "vitest";
 import { TOrganization } from "@formbricks/types/organizations";
@@ -78,6 +79,11 @@ describe("DeleteAccountModal", () => {
       .spyOn(actions, "deleteUserAction")
       .mockResolvedValue("deleted-user-id" as any); // the return doesn't matter here
 
+    Object.defineProperty(window, "localStorage", {
+      writable: true,
+      value: { removeItem: vi.fn() },
+    });
+
     // Mock window.location.replace
     Object.defineProperty(window, "location", {
       writable: true,
@@ -94,6 +100,8 @@ describe("DeleteAccountModal", () => {
       />
     );
 
+    const removeItemSpy = vi.spyOn(window.localStorage, "removeItem");
+
     const input = screen.getByTestId("deleteAccountConfirmation");
     fireEvent.change(input, { target: { value: mockUser.email } });
 
@@ -106,6 +114,7 @@ describe("DeleteAccountModal", () => {
         reason: "account_deletion",
         redirect: false, // Updated to match new implementation
       });
+      expect(removeItemSpy).toHaveBeenCalledWith(FORMBRICKS_ENVIRONMENT_ID_LS);
       expect(window.location.replace).toHaveBeenCalledWith("/auth/login");
       expect(mockSetOpen).toHaveBeenCalledWith(false);
     });
@@ -116,6 +125,11 @@ describe("DeleteAccountModal", () => {
       .spyOn(actions, "deleteUserAction")
       .mockResolvedValue("deleted-user-id" as any); // the return doesn't matter here
 
+    Object.defineProperty(window, "localStorage", {
+      writable: true,
+      value: { removeItem: vi.fn() },
+    });
+
     Object.defineProperty(window, "location", {
       writable: true,
       value: { replace: vi.fn() },
@@ -137,12 +151,15 @@ describe("DeleteAccountModal", () => {
     const form = screen.getByTestId("deleteAccountForm");
     fireEvent.submit(form);
 
+    const removeItemSpy = vi.spyOn(window.localStorage, "removeItem");
+
     await waitFor(() => {
       expect(deleteUserAction).toHaveBeenCalled();
       expect(mockSignOut).toHaveBeenCalledWith({
         reason: "account_deletion",
         redirect: false, // Updated to match new implementation
       });
+      expect(removeItemSpy).toHaveBeenCalledWith(FORMBRICKS_ENVIRONMENT_ID_LS);
       expect(window.location.replace).toHaveBeenCalledWith(
         "https://app.formbricks.com/s/clri52y3z8f221225wjdhsoo2"
       );

apps/web/modules/account/components/DeleteAccountModal/index.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { FORMBRICKS_ENVIRONMENT_ID_LS } from "@/lib/localStorage";
 import { useSignOut } from "@/modules/auth/hooks/use-sign-out";
 import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
 import { Input } from "@/modules/ui/components/input";
@@ -38,6 +39,8 @@ export const DeleteAccountModal = ({
       setDeleting(true);
       await deleteUserAction();
 
+      localStorage.removeItem(FORMBRICKS_ENVIRONMENT_ID_LS);
+
       // Sign out with account deletion reason (no automatic redirect)
       await signOutWithAudit({
         reason: "account_deletion",

apps/web/modules/ee/audit-logs/lib/service.test.ts

@@ -9,7 +9,7 @@ vi.mock("../../../ee/license-check/lib/utils", () => ({
   getIsAuditLogsEnabled: vi.fn(),
 }));
 vi.mock("@formbricks/logger", () => ({
-  logger: { audit: vi.fn(), error: vi.fn() },
+  logger: { info: vi.fn(), error: vi.fn() },
 }));
 
 const validEvent = {
@@ -37,7 +37,7 @@ describe("logAuditEvent", () => {
   test("logs event if access is granted and event is valid", async () => {
     getIsAuditLogsEnabled.mockResolvedValue(true);
     await logAuditEvent(validEvent);
-    expect(logger.audit).toHaveBeenCalledWith(validEvent);
+    expect(logger.info).toHaveBeenCalledWith(validEvent, "Audit event logged");
     expect(logger.error).not.toHaveBeenCalled();
   });
 
@@ -45,7 +45,7 @@ describe("logAuditEvent", () => {
     getIsAuditLogsEnabled.mockResolvedValue(true);
     const invalidEvent = { ...validEvent, action: "invalid.action" };
     await logAuditEvent(invalidEvent as any);
-    expect(logger.audit).not.toHaveBeenCalled();
+    expect(logger.info).not.toHaveBeenCalled();
     expect(logger.error).toHaveBeenCalled();
   });
 
@@ -53,12 +53,12 @@ describe("logAuditEvent", () => {
     getIsAuditLogsEnabled.mockResolvedValue(true);
     const event = { ...validEvent, organizationId: UNKNOWN_DATA };
     await logAuditEvent(event);
-    expect(logger.audit).toHaveBeenCalledWith(event);
+    expect(logger.info).toHaveBeenCalledWith(event, "Audit event logged");
   });
 
-  test("does not throw if logger.audit throws", async () => {
+  test("does not throw if logger.info throws", async () => {
     getIsAuditLogsEnabled.mockResolvedValue(true);
-    logger.audit.mockImplementation(() => {
+    logger.info.mockImplementation(() => {
       throw new Error("fail");
     });
     await logAuditEvent(validEvent);

apps/web/modules/ee/audit-logs/lib/service.ts

@@ -11,7 +11,7 @@ const validateEvent = (event: TAuditLogEvent): void => {
 export const logAuditEvent = async (event: TAuditLogEvent): Promise<void> => {
   try {
     validateEvent(event);
-    logger.audit(event);
+    logger.info(event, "Audit event logged");
   } catch (error) {
     // Log error to application logger but don't throw
     // This ensures audit logging failures don't break the application

apps/web/modules/ee/contacts/api/v2/management/contacts/bulk/lib/openapi.ts

@@ -6,13 +6,70 @@ import { ZodOpenApiOperationObject, ZodOpenApiPathsObject } from "zod-openapi";
 const bulkContactEndpoint: ZodOpenApiOperationObject = {
   operationId: "uploadBulkContacts",
   summary: "Upload Bulk Contacts",
-  description: "Uploads contacts in bulk",
+  description:
+    "Uploads contacts in bulk. Each contact in the payload must have an 'email' attribute present in their attributes array. The email attribute is mandatory and must be a valid email format. Without a valid email, the contact will be skipped during processing.",
   requestBody: {
     required: true,
-    description: "The contacts to upload",
+    description:
+      "The contacts to upload. Each contact must include an 'email' attribute in their attributes array. The email is used as the unique identifier for the contact.",
     content: {
       "application/json": {
         schema: ZContactBulkUploadRequest,
+        example: {
+          environmentId: "env_01h2xce9q8p3w4x5y6z7a8b9c0",
+          contacts: [
+            {
+              attributes: [
+                {
+                  attributeKey: {
+                    key: "email",
+                    name: "Email Address",
+                  },
+                  value: "john.doe@example.com",
+                },
+                {
+                  attributeKey: {
+                    key: "firstName",
+                    name: "First Name",
+                  },
+                  value: "John",
+                },
+                {
+                  attributeKey: {
+                    key: "lastName",
+                    name: "Last Name",
+                  },
+                  value: "Doe",
+                },
+              ],
+            },
+            {
+              attributes: [
+                {
+                  attributeKey: {
+                    key: "email",
+                    name: "Email Address",
+                  },
+                  value: "jane.smith@example.com",
+                },
+                {
+                  attributeKey: {
+                    key: "firstName",
+                    name: "First Name",
+                  },
+                  value: "Jane",
+                },
+                {
+                  attributeKey: {
+                    key: "lastName",
+                    name: "Last Name",
+                  },
+                  value: "Smith",
+                },
+              ],
+            },
+          ],
+        },
       },
     },
   },

apps/web/modules/projects/components/project-limit-modal/index.test.tsx

@@ -44,8 +44,6 @@ describe("ProjectLimitModal", () => {
   test("renders dialog and upgrade prompt with correct props", () => {
     render(<ProjectLimitModal open={true} setOpen={setOpen} projectLimit={3} buttons={buttons} />);
     expect(screen.getByTestId("dialog")).toBeInTheDocument();
-    expect(screen.getByTestId("dialog-content")).toHaveClass("bg-white");
-    expect(screen.getByTestId("dialog-title")).toHaveTextContent("common.projects_limit_reached");
     expect(screen.getByTestId("upgrade-prompt")).toBeInTheDocument();
     expect(screen.getByText("common.unlock_more_projects_with_a_higher_plan")).toBeInTheDocument();
     expect(screen.getByText("common.you_have_reached_your_limit_of_project_limit")).toBeInTheDocument();

apps/web/modules/projects/components/project-limit-modal/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Dialog, DialogContent, DialogTitle } from "@/modules/ui/components/dialog";
+import { Dialog, DialogContent } from "@/modules/ui/components/dialog";
 import { ModalButton, UpgradePrompt } from "@/modules/ui/components/upgrade-prompt";
 import { useTranslate } from "@tolgee/react";
 
@@ -16,8 +16,7 @@ export const ProjectLimitModal = ({ open, setOpen, projectLimit, buttons }: Proj
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogContent className="w-full max-w-[564px] bg-white">
-        <DialogTitle>{t("common.projects_limit_reached")}</DialogTitle>
+      <DialogContent>
         <UpgradePrompt
           title={t("common.unlock_more_projects_with_a_higher_plan")}
           description={t("common.you_have_reached_your_limit_of_project_limit", { projectLimit })}

apps/web/modules/survey/editor/components/add-ending-card-button.tsx

@@ -13,7 +13,7 @@ export const AddEndingCardButton = ({ localSurvey, addEndingCard }: AddEndingCar
   const { t } = useTranslate();
   return (
     <button
-      className="group inline-flex rounded-lg border border-slate-300 bg-slate-50 hover:cursor-pointer hover:bg-white"
+      className="group inline-flex items-stretch rounded-lg border border-slate-300 bg-slate-50 hover:cursor-pointer hover:bg-white"
       onClick={() => addEndingCard(localSurvey.endings.length)}>
       <div className="flex w-10 items-center justify-center rounded-l-lg bg-slate-400 transition-all duration-300 ease-in-out group-hover:bg-slate-500 group-aria-expanded:rounded-bl-none group-aria-expanded:rounded-br">
         <PlusIcon className="h-6 w-6 text-white" />

apps/web/modules/survey/editor/components/matrix-label-choice.test.tsx

@@ -0,0 +1,299 @@
+import { createI18nString } from "@/lib/i18n/utils";
+import { DndContext } from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import {
+  TSurvey,
+  TSurveyLanguage,
+  TSurveyMatrixQuestion,
+  TSurveyQuestionTypeEnum,
+} from "@formbricks/types/surveys/types";
+import { TUserLocale } from "@formbricks/types/user";
+import { MatrixLabelChoice } from "./matrix-label-choice";
+
+// Mock constants
+vi.mock("@/lib/constants", () => ({
+  IS_FORMBRICKS_CLOUD: false,
+  ENCRYPTION_KEY: "test",
+  ENTERPRISE_LICENSE_KEY: "test",
+  GITHUB_ID: "test",
+  GITHUB_SECRET: "test",
+  GOOGLE_CLIENT_ID: "test",
+  GOOGLE_CLIENT_SECRET: "test",
+  AZUREAD_CLIENT_ID: "mock-azuread-client-id",
+  AZUREAD_CLIENT_SECRET: "mock-azure-client-secret",
+  AZUREAD_TENANT_ID: "mock-azuread-tenant-id",
+  OIDC_CLIENT_ID: "mock-oidc-client-id",
+  OIDC_CLIENT_SECRET: "mock-oidc-client-secret",
+  OIDC_ISSUER: "mock-oidc-issuer",
+  OIDC_DISPLAY_NAME: "mock-oidc-display-name",
+  OIDC_SIGNING_ALGORITHM: "mock-oidc-signing-algorithm",
+  WEBAPP_URL: "mock-webapp-url",
+  AI_AZURE_LLM_RESSOURCE_NAME: "mock-azure-llm-resource-name",
+  AI_AZURE_LLM_API_KEY: "mock-azure-llm-api-key",
+  AI_AZURE_LLM_DEPLOYMENT_ID: "mock-azure-llm-deployment-id",
+  AI_AZURE_EMBEDDINGS_RESSOURCE_NAME: "mock-azure-embeddings-resource-name",
+  AI_AZURE_EMBEDDINGS_API_KEY: "mock-azure-embeddings-api-key",
+  AI_AZURE_EMBEDDINGS_DEPLOYMENT_ID: "mock-azure-embeddings-deployment-id",
+  IS_PRODUCTION: true,
+  FB_LOGO_URL: "https://example.com/mock-logo.png",
+  SMTP_HOST: "mock-smtp-host",
+  SMTP_PORT: "mock-smtp-port",
+  IS_POSTHOG_CONFIGURED: true,
+}));
+
+// Mock tolgee
+vi.mock("@tolgee/react", () => ({
+  useTranslate: () => ({
+    t: (key: string, params?: any) => {
+      if (key === "environments.surveys.edit.row_idx") {
+        return `Row ${params?.rowIndex}`;
+      }
+      if (key === "environments.surveys.edit.column_idx") {
+        return `Column ${params?.columnIndex}`;
+      }
+      if (key === "environments.surveys.edit.delete_row") {
+        return "Delete row";
+      }
+      if (key === "environments.surveys.edit.delete_column") {
+        return "Delete column";
+      }
+      return key;
+    },
+  }),
+}));
+
+// Mock QuestionFormInput component
+vi.mock("@/modules/survey/components/question-form-input", () => ({
+  QuestionFormInput: vi.fn(({ id, updateMatrixLabel, value, onKeyDown }) => (
+    <div data-testid={`question-input-${id}`}>
+      <input
+        data-testid={`input-${id}`}
+        onChange={(e) => {
+          if (updateMatrixLabel) {
+            const type = id.startsWith("row") ? "row" : "column";
+            const index = parseInt(id.split("-")[1]);
+            updateMatrixLabel(index, type, { default: e.target.value });
+          }
+        }}
+        value={value?.default || ""}
+        onKeyDown={onKeyDown}
+      />
+    </div>
+  )),
+}));
+
+// Mock TooltipRenderer component
+vi.mock("@/modules/ui/components/tooltip", () => ({
+  TooltipRenderer: vi.fn(({ children }) => <div data-testid="tooltip-renderer">{children}</div>),
+}));
+
+// Mock validation
+vi.mock("../lib/validation", () => ({
+  isLabelValidForAllLanguages: vi.fn().mockReturnValue(true),
+}));
+
+// Mock survey languages
+const mockSurveyLanguages: TSurveyLanguage[] = [
+  {
+    default: true,
+    enabled: true,
+    language: {
+      id: "en",
+      code: "en",
+      alias: "English",
+      createdAt: new Date(),
+      updatedAt: new Date(),
+      projectId: "project-1",
+    },
+  },
+];
+
+// Mock matrix question
+const mockQuestion: TSurveyMatrixQuestion = {
+  id: "matrix-1",
+  type: TSurveyQuestionTypeEnum.Matrix,
+  headline: createI18nString("Matrix Question", ["en"]),
+  required: false,
+  logic: [],
+  rows: [
+    createI18nString("Row 1", ["en"]),
+    createI18nString("Row 2", ["en"]),
+    createI18nString("Row 3", ["en"]),
+  ],
+  columns: [
+    createI18nString("Column 1", ["en"]),
+    createI18nString("Column 2", ["en"]),
+    createI18nString("Column 3", ["en"]),
+  ],
+  shuffleOption: "none",
+};
+
+// Mock survey
+const mockSurvey: TSurvey = {
+  id: "survey-1",
+  name: "Test Survey",
+  questions: [mockQuestion],
+  languages: mockSurveyLanguages,
+} as unknown as TSurvey;
+
+const defaultProps = {
+  labelIdx: 0,
+  type: "row" as const,
+  questionIdx: 0,
+  updateMatrixLabel: vi.fn(),
+  handleDeleteLabel: vi.fn(),
+  handleKeyDown: vi.fn(),
+  isInvalid: false,
+  localSurvey: mockSurvey,
+  selectedLanguageCode: "en",
+  setSelectedLanguageCode: vi.fn(),
+  question: mockQuestion,
+  locale: "en-US" as TUserLocale,
+};
+
+const renderWithDndContext = (props = {}) => {
+  const finalProps = { ...defaultProps, ...props };
+  return render(
+    <DndContext>
+      <SortableContext
+        items={[`${finalProps.type}-${finalProps.labelIdx}`]}
+        strategy={verticalListSortingStrategy}>
+        <MatrixLabelChoice {...finalProps} />
+      </SortableContext>
+    </DndContext>
+  );
+};
+
+describe("MatrixLabelChoice", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  describe("Row type", () => {
+    test("renders the row choice with drag handle and input", () => {
+      renderWithDndContext({ type: "row" });
+
+      expect(screen.getByDisplayValue("Row 1")).toBeInTheDocument();
+      expect(screen.getByRole("textbox")).toBeInTheDocument();
+    });
+
+    test("shows delete button when there are more than 2 rows", () => {
+      renderWithDndContext({ type: "row" });
+
+      const buttons = screen.getAllByRole("button");
+      const deleteButton = buttons.find((button) => button.querySelector('svg[class*="lucide-trash"]'));
+      expect(deleteButton).toBeInTheDocument();
+    });
+
+    test("hides delete button when there are only 2 rows", () => {
+      const questionWith2Rows = {
+        ...mockQuestion,
+        rows: [createI18nString("Row 1", ["en"]), createI18nString("Row 2", ["en"])],
+      };
+
+      renderWithDndContext({ type: "row", question: questionWith2Rows });
+
+      const buttons = screen.getAllByRole("button");
+      const deleteButton = buttons.find((button) => button.querySelector('svg[class*="lucide-trash"]'));
+      expect(deleteButton).toBeUndefined();
+    });
+
+    test("calls handleDeleteLabel when delete button is clicked", async () => {
+      const user = userEvent.setup();
+      const handleDeleteLabel = vi.fn();
+
+      renderWithDndContext({ type: "row", handleDeleteLabel });
+
+      const buttons = screen.getAllByRole("button");
+      const deleteButton = buttons.find((button) => button.querySelector('svg[class*="lucide-trash"]'));
+      expect(deleteButton).toBeDefined();
+
+      await user.click(deleteButton!);
+
+      expect(handleDeleteLabel).toHaveBeenCalledWith("row", 0);
+    });
+  });
+
+  describe("Column type", () => {
+    test("renders the column choice with drag handle and input", () => {
+      renderWithDndContext({ type: "column" });
+
+      expect(screen.getByDisplayValue("Column 1")).toBeInTheDocument();
+      expect(screen.getByRole("textbox")).toBeInTheDocument();
+    });
+
+    test("shows delete button when there are more than 2 columns", () => {
+      renderWithDndContext({ type: "column" });
+
+      const buttons = screen.getAllByRole("button");
+      const deleteButton = buttons.find((button) => button.querySelector('svg[class*="lucide-trash"]'));
+      expect(deleteButton).toBeInTheDocument();
+    });
+
+    test("hides delete button when there are only 2 columns", () => {
+      const questionWith2Columns = {
+        ...mockQuestion,
+        columns: [createI18nString("Column 1", ["en"]), createI18nString("Column 2", ["en"])],
+      };
+
+      renderWithDndContext({ type: "column", question: questionWith2Columns });
+
+      const buttons = screen.getAllByRole("button");
+      const deleteButton = buttons.find((button) => button.querySelector('svg[class*="lucide-trash"]'));
+      expect(deleteButton).toBeUndefined();
+    });
+
+    test("calls handleDeleteLabel when delete button is clicked", async () => {
+      const user = userEvent.setup();
+      const handleDeleteLabel = vi.fn();
+
+      renderWithDndContext({ type: "column", handleDeleteLabel });
+
+      const buttons = screen.getAllByRole("button");
+      const deleteButton = buttons.find((button) => button.querySelector('svg[class*="lucide-trash"]'));
+      expect(deleteButton).toBeDefined();
+
+      await user.click(deleteButton!);
+
+      expect(handleDeleteLabel).toHaveBeenCalledWith("column", 0);
+    });
+  });
+
+  describe("Common functionality", () => {
+    test("calls updateMatrixLabel when input value changes", async () => {
+      const user = userEvent.setup();
+      const updateMatrixLabel = vi.fn();
+
+      renderWithDndContext({ updateMatrixLabel });
+
+      const input = screen.getByDisplayValue("Row 1");
+      await user.clear(input);
+      await user.type(input, "Updated Row");
+
+      expect(updateMatrixLabel).toHaveBeenCalled();
+    });
+
+    test("calls handleKeyDown when Enter key is pressed", async () => {
+      const user = userEvent.setup();
+      const handleKeyDown = vi.fn();
+
+      renderWithDndContext({ handleKeyDown });
+
+      const input = screen.getByDisplayValue("Row 1");
+      await user.type(input, "{Enter}");
+
+      expect(handleKeyDown).toHaveBeenCalled();
+    });
+
+    test("applies invalid styling when isInvalid is true", () => {
+      renderWithDndContext({ isInvalid: true });
+
+      const input = screen.getByDisplayValue("Row 1");
+      expect(input).toBeInTheDocument();
+    });
+  });
+});

apps/web/modules/survey/editor/components/matrix-label-choice.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { QuestionFormInput } from "@/modules/survey/components/question-form-input";
+import { Button } from "@/modules/ui/components/button";
+import { TooltipRenderer } from "@/modules/ui/components/tooltip";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { useTranslate } from "@tolgee/react";
+import { GripVerticalIcon, TrashIcon } from "lucide-react";
+import { TI18nString, TSurvey, TSurveyMatrixQuestion } from "@formbricks/types/surveys/types";
+import { TUserLocale } from "@formbricks/types/user";
+import { isLabelValidForAllLanguages } from "../lib/validation";
+
+interface MatrixLabelChoiceProps {
+  labelIdx: number;
+  type: "row" | "column";
+  questionIdx: number;
+  updateMatrixLabel: (index: number, type: "row" | "column", data: TI18nString) => void;
+  handleDeleteLabel: (type: "row" | "column", index: number) => void;
+  handleKeyDown: (e: React.KeyboardEvent, type: "row" | "column") => void;
+  isInvalid: boolean;
+  localSurvey: TSurvey;
+  selectedLanguageCode: string;
+  setSelectedLanguageCode: (language: string) => void;
+  question: TSurveyMatrixQuestion;
+  locale: TUserLocale;
+}
+
+export const MatrixLabelChoice = ({
+  labelIdx,
+  type,
+  questionIdx,
+  updateMatrixLabel,
+  handleDeleteLabel,
+  handleKeyDown,
+  isInvalid,
+  localSurvey,
+  selectedLanguageCode,
+  setSelectedLanguageCode,
+  question,
+  locale,
+}: MatrixLabelChoiceProps) => {
+  const { t } = useTranslate();
+  const labels = type === "row" ? question.rows : question.columns;
+  const surveyLanguages = localSurvey.languages ?? [];
+
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+    id: `${type}-${labelIdx}`,
+  });
+
+  const style = {
+    transition: transition ?? "transform 100ms ease",
+    transform: CSS.Translate.toString(transform),
+  };
+
+  return (
+    <div className="flex w-full items-center gap-2" ref={setNodeRef} style={style}>
+      {/* drag handle */}
+      <div {...listeners} {...attributes}>
+        <GripVerticalIcon className="h-4 w-4 cursor-move text-slate-400" />
+      </div>
+
+      <div className="flex w-full space-x-2">
+        <QuestionFormInput
+          key={`${type}-${labelIdx}`}
+          id={`${type}-${labelIdx}`}
+          placeholder={t(`environments.surveys.edit.${type}_idx`, {
+            [`${type}Index`]: labelIdx + 1,
+          })}
+          label=""
+          localSurvey={localSurvey}
+          questionIdx={questionIdx}
+          value={labels[labelIdx]}
+          updateMatrixLabel={updateMatrixLabel}
+          selectedLanguageCode={selectedLanguageCode}
+          setSelectedLanguageCode={setSelectedLanguageCode}
+          isInvalid={isInvalid && !isLabelValidForAllLanguages(labels[labelIdx], surveyLanguages)}
+          onKeyDown={(e) => handleKeyDown(e, type)}
+          locale={locale}
+        />
+      </div>
+
+      <div className="flex gap-2">
+        {labels.length > 2 && (
+          <TooltipRenderer tooltipContent={t(`environments.surveys.edit.delete_${type}`)}>
+            <Button
+              variant="secondary"
+              size="icon"
+              aria-label={`Delete ${type}`}
+              onClick={(e) => {
+                e.preventDefault();
+                handleDeleteLabel(type, labelIdx);
+              }}>
+              <TrashIcon />
+            </Button>
+          </TooltipRenderer>
+        )}
+      </div>
+    </div>
+  );
+};

apps/web/modules/survey/editor/components/matrix-label-section.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { MatrixLabelChoice } from "@/modules/survey/editor/components/matrix-label-choice";
+import { Button } from "@/modules/ui/components/button";
+import { Label } from "@/modules/ui/components/label";
+import { DndContext } from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { useTranslate } from "@tolgee/react";
+import { PlusIcon } from "lucide-react";
+import { TI18nString, TSurvey, TSurveyMatrixQuestion } from "@formbricks/types/surveys/types";
+import { TUserLocale } from "@formbricks/types/user";
+
+interface MatrixLabelSectionProps {
+  type: "row" | "column";
+  labels: TI18nString[];
+  question: TSurveyMatrixQuestion;
+  questionIdx: number;
+  updateMatrixLabel: (index: number, type: "row" | "column", data: TI18nString) => void;
+  handleDeleteLabel: (type: "row" | "column", index: number) => void;
+  handleKeyDown: (e: React.KeyboardEvent, type: "row" | "column") => void;
+  handleAddLabel: (type: "row" | "column") => void;
+  onDragEnd: (event: any) => void;
+  isInvalid: boolean;
+  localSurvey: TSurvey;
+  selectedLanguageCode: string;
+  setSelectedLanguageCode: (language: string) => void;
+  locale: TUserLocale;
+  parent: any;
+}
+
+export const MatrixLabelSection = ({
+  type,
+  labels,
+  question,
+  questionIdx,
+  updateMatrixLabel,
+  handleDeleteLabel,
+  handleKeyDown,
+  handleAddLabel,
+  onDragEnd,
+  isInvalid,
+  localSurvey,
+  selectedLanguageCode,
+  setSelectedLanguageCode,
+  locale,
+  parent,
+}: MatrixLabelSectionProps) => {
+  const { t } = useTranslate();
+  const labelKey = type === "row" ? "rows" : "columns";
+  const addKey = type === "row" ? "add_row" : "add_column";
+
+  return (
+    <div>
+      <Label htmlFor={labelKey}>{t(`environments.surveys.edit.${labelKey}`)}</Label>
+      <div className="mt-2" id={labelKey}>
+        <DndContext id={`matrix-${labelKey}`} onDragEnd={onDragEnd}>
+          <SortableContext
+            items={labels.map((_, idx) => `${type}-${idx}`)}
+            strategy={verticalListSortingStrategy}>
+            <div className="flex flex-col gap-2" ref={parent}>
+              {labels.map((_, index) => (
+                <MatrixLabelChoice
+                  key={`${type}-${index}`}
+                  labelIdx={index}
+                  type={type}
+                  questionIdx={questionIdx}
+                  updateMatrixLabel={updateMatrixLabel}
+                  handleDeleteLabel={handleDeleteLabel}
+                  handleKeyDown={handleKeyDown}
+                  isInvalid={isInvalid}
+                  localSurvey={localSurvey}
+                  selectedLanguageCode={selectedLanguageCode}
+                  setSelectedLanguageCode={setSelectedLanguageCode}
+                  question={question}
+                  locale={locale}
+                />
+              ))}
+            </div>
+          </SortableContext>
+        </DndContext>
+        <Button
+          variant="secondary"
+          size="sm"
+          className="mt-2 w-fit"
+          onClick={(e) => {
+            e.preventDefault();
+            handleAddLabel(type);
+          }}>
+          <PlusIcon />
+          {t(`environments.surveys.edit.${addKey}`)}
+        </Button>
+      </div>
+    </div>
+  );
+};

apps/web/modules/survey/editor/components/matrix-question-form.tsx

@@ -2,19 +2,17 @@
 
 import { createI18nString, extractLanguageCodes } from "@/lib/i18n/utils";
 import { QuestionFormInput } from "@/modules/survey/components/question-form-input";
+import { MatrixLabelSection } from "@/modules/survey/editor/components/matrix-label-section";
 import { findOptionUsedInLogic } from "@/modules/survey/editor/lib/utils";
 import { Button } from "@/modules/ui/components/button";
-import { Label } from "@/modules/ui/components/label";
 import { ShuffleOptionSelect } from "@/modules/ui/components/shuffle-option-select";
-import { TooltipRenderer } from "@/modules/ui/components/tooltip";
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { useTranslate } from "@tolgee/react";
-import { PlusIcon, TrashIcon } from "lucide-react";
+import { PlusIcon } from "lucide-react";
 import type { JSX } from "react";
 import toast from "react-hot-toast";
 import { TI18nString, TSurvey, TSurveyMatrixQuestion } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";
-import { isLabelValidForAllLanguages } from "../lib/validation";
 
 interface MatrixQuestionFormProps {
   localSurvey: TSurvey;
@@ -109,6 +107,42 @@ export const MatrixQuestionForm = ({
     }
   };
 
+  const handleRowDragEnd = (event: any) => {
+    const { active, over } = event;
+
+    if (!active || !over) {
+      return;
+    }
+
+    const activeIndex = question.rows.findIndex((_, idx) => `row-${idx}` === active.id);
+    const overIndex = question.rows.findIndex((_, idx) => `row-${idx}` === over.id);
+
+    if (activeIndex !== overIndex) {
+      const newRows = [...question.rows];
+      const [reorderedItem] = newRows.splice(activeIndex, 1);
+      newRows.splice(overIndex, 0, reorderedItem);
+      updateQuestion(questionIdx, { rows: newRows });
+    }
+  };
+
+  const handleColumnDragEnd = (event: any) => {
+    const { active, over } = event;
+
+    if (!active || !over) {
+      return;
+    }
+
+    const activeIndex = question.columns.findIndex((_, idx) => `column-${idx}` === active.id);
+    const overIndex = question.columns.findIndex((_, idx) => `column-${idx}` === over.id);
+
+    if (activeIndex !== overIndex) {
+      const newColumns = [...question.columns];
+      const [reorderedItem] = newColumns.splice(activeIndex, 1);
+      newColumns.splice(overIndex, 0, reorderedItem);
+      updateQuestion(questionIdx, { columns: newColumns });
+    }
+  };
+
   const shuffleOptionsTypes = {
     none: {
       id: "none",
@@ -178,105 +212,41 @@ export const MatrixQuestionForm = ({
         )}
       </div>
       <div className="mt-3 grid grid-cols-2 gap-4">
+        <MatrixLabelSection
+          type="row"
+          labels={question.rows}
+          question={question}
+          questionIdx={questionIdx}
+          updateMatrixLabel={updateMatrixLabel}
+          handleDeleteLabel={handleDeleteLabel}
+          handleKeyDown={handleKeyDown}
+          handleAddLabel={handleAddLabel}
+          onDragEnd={handleRowDragEnd}
+          isInvalid={isInvalid}
+          localSurvey={localSurvey}
+          selectedLanguageCode={selectedLanguageCode}
+          setSelectedLanguageCode={setSelectedLanguageCode}
+          locale={locale}
+          parent={parent}
+        />
         <div>
-          {/* Rows section */}
-          <Label htmlFor="rows">{t("environments.surveys.edit.rows")}</Label>
-          <div className="mt-2 flex flex-col gap-2" ref={parent}>
-            {question.rows.map((row, index) => (
-              <div className="flex items-center" key={`${row}-${index}`}>
-                <QuestionFormInput
-                  id={`row-${index}`}
-                  label={""}
-                  localSurvey={localSurvey}
-                  questionIdx={questionIdx}
-                  value={question.rows[index]}
-                  updateMatrixLabel={updateMatrixLabel}
-                  selectedLanguageCode={selectedLanguageCode}
-                  setSelectedLanguageCode={setSelectedLanguageCode}
-                  isInvalid={
-                    isInvalid && !isLabelValidForAllLanguages(question.rows[index], localSurvey.languages)
-                  }
-                  locale={locale}
-                  onKeyDown={(e) => handleKeyDown(e, "row")}
-                />
-                {question.rows.length > 2 && (
-                  <TooltipRenderer data-testid="tooltip-renderer" tooltipContent={t("common.delete")}>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="ml-2"
-                      onClick={(e) => {
-                        e.preventDefault();
-                        handleDeleteLabel("row", index);
-                      }}>
-                      <TrashIcon />
-                    </Button>
-                  </TooltipRenderer>
-                )}
-              </div>
-            ))}
-            <Button
-              variant="secondary"
-              size="sm"
-              className="w-fit"
-              onClick={(e) => {
-                e.preventDefault();
-                handleAddLabel("row");
-              }}>
-              <PlusIcon />
-              {t("environments.surveys.edit.add_row")}
-            </Button>
-          </div>
-        </div>
-        <div>
-          {/* Columns section */}
-          <Label htmlFor="columns">{t("environments.surveys.edit.columns")}</Label>
-          <div className="mt-2 flex flex-col gap-2" ref={parent}>
-            {question.columns.map((column, index) => (
-              <div className="flex items-center" key={`${column}-${index}`}>
-                <QuestionFormInput
-                  id={`column-${index}`}
-                  label={""}
-                  localSurvey={localSurvey}
-                  questionIdx={questionIdx}
-                  value={question.columns[index]}
-                  updateMatrixLabel={updateMatrixLabel}
-                  selectedLanguageCode={selectedLanguageCode}
-                  setSelectedLanguageCode={setSelectedLanguageCode}
-                  isInvalid={
-                    isInvalid && !isLabelValidForAllLanguages(question.columns[index], localSurvey.languages)
-                  }
-                  locale={locale}
-                  onKeyDown={(e) => handleKeyDown(e, "column")}
-                />
-                {question.columns.length > 2 && (
-                  <TooltipRenderer data-testid="tooltip-renderer" tooltipContent={t("common.delete")}>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="ml-2"
-                      onClick={(e) => {
-                        e.preventDefault();
-                        handleDeleteLabel("column", index);
-                      }}>
-                      <TrashIcon />
-                    </Button>
-                  </TooltipRenderer>
-                )}
-              </div>
-            ))}
-            <Button
-              variant="secondary"
-              size="sm"
-              className="w-fit"
-              onClick={(e) => {
-                e.preventDefault();
-                handleAddLabel("column");
-              }}>
-              <PlusIcon />
-              {t("environments.surveys.edit.add_column")}
-            </Button>
-          </div>
+          <MatrixLabelSection
+            type="column"
+            labels={question.columns}
+            question={question}
+            questionIdx={questionIdx}
+            updateMatrixLabel={updateMatrixLabel}
+            handleDeleteLabel={handleDeleteLabel}
+            handleKeyDown={handleKeyDown}
+            handleAddLabel={handleAddLabel}
+            onDragEnd={handleColumnDragEnd}
+            isInvalid={isInvalid}
+            localSurvey={localSurvey}
+            selectedLanguageCode={selectedLanguageCode}
+            setSelectedLanguageCode={setSelectedLanguageCode}
+            locale={locale}
+            parent={parent}
+          />
           <div className="mt-3 flex flex-1 items-center justify-end gap-2">
             <ShuffleOptionSelect
               shuffleOptionsTypes={shuffleOptionsTypes}

apps/web/modules/survey/lib/questions.tsx

@@ -336,7 +336,7 @@ export const getCXQuestionNameMap = (t: TFnType) =>
   ) as Record<TSurveyQuestionTypeEnum, string>;
 
 export const universalQuestionPresets = {
-  required: true,
+  required: false,
 };
 
 export const getQuestionDefaults = (id: string, project: any, t: TFnType) => {

apps/web/modules/survey/link/components/link-survey.tsx

@@ -118,7 +118,7 @@ export const LinkSurvey = ({
   }, [survey.isVerifyEmailEnabled, verifiedEmail]);
 
   if (hasFinishedSingleUseResponse) {
-    return <SurveyLinkUsed singleUseMessage={survey.singleUse} />;
+    return <SurveyLinkUsed singleUseMessage={survey.singleUse} project={project} />;
   }
 
   if (survey.isVerifyEmailEnabled && emailVerificationStatus !== "verified") {

apps/web/modules/survey/link/components/survey-inactive.test.tsx

@@ -126,4 +126,19 @@ describe("SurveyInactive", () => {
     expect(screen.getByTestId("button")).toBeInTheDocument();
     expect(screen.getByTestId("mock-image")).toBeInTheDocument();
   });
+
+  test("shows branding when linkSurveyBranding is true", async () => {
+    const Component = await SurveyInactive({ status: "paused", project: { linkSurveyBranding: true } });
+    render(Component);
+    expect(screen.getByTestId("mock-image")).toBeInTheDocument();
+    expect(screen.getByTestId("footer-link")).toBeInTheDocument();
+    expect(screen.getByTestId("footer-link")).toHaveAttribute("href", "https://formbricks.com");
+  });
+
+  test("hides branding when linkSurveyBranding is false", async () => {
+    const Component = await SurveyInactive({ status: "paused", project: { linkSurveyBranding: false } });
+    render(Component);
+    expect(screen.queryByTestId("mock-image")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("footer-link")).not.toBeInTheDocument();
+  });
 });

apps/web/modules/survey/link/components/survey-inactive.tsx

@@ -1,5 +1,6 @@
 import { Button } from "@/modules/ui/components/button";
 import { getTranslate } from "@/tolgee/server";
+import { Project } from "@prisma/client";
 import { CheckCircle2Icon, HelpCircleIcon, PauseCircleIcon } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
@@ -9,9 +10,11 @@ import footerLogo from "../lib/footerlogo.svg";
 export const SurveyInactive = async ({
   status,
   surveyClosedMessage,
+  project,
 }: {
   status: "paused" | "completed" | "link invalid" | "scheduled" | "response submitted";
   surveyClosedMessage?: TSurveyClosedMessage | null;
+  project?: Pick<Project, "linkSurveyBranding">;
 }) => {
   const t = await getTranslate();
   const icons = {
@@ -28,10 +31,15 @@ export const SurveyInactive = async ({
     "response submitted": t("s.response_submitted"),
   };
 
+  const showCTA =
+    status !== "link invalid" &&
+    status !== "response submitted" &&
+    ((status !== "paused" && status !== "completed") || project?.linkSurveyBranding || !project) &&
+    !(status === "completed" && surveyClosedMessage);
+
   return (
     <div className="flex h-full flex-col items-center justify-between bg-gradient-to-br from-slate-200 to-slate-50 px-4 py-8 text-center">
-      <div></div>
-      <div className="flex flex-col items-center space-y-3 text-slate-300">
+      <div className="my-auto flex flex-col items-center space-y-3 text-slate-300">
         {icons[status]}
         <h1 className="text-4xl font-bold text-slate-800">
           {status === "completed" && surveyClosedMessage
@@ -43,19 +51,19 @@ export const SurveyInactive = async ({
             ? surveyClosedMessage.subheading
             : descriptions[status]}
         </p>
-        {!(status === "completed" && surveyClosedMessage) &&
-          status !== "link invalid" &&
-          status !== "response submitted" && (
-            <Button className="mt-2" asChild>
-              <Link href="https://formbricks.com">{t("s.create_your_own")}</Link>
-            </Button>
-          )}
-      </div>
-      <div>
-        <Link href="https://formbricks.com">
-          <Image src={footerLogo as string} alt="Brand logo" className="mx-auto w-40" />
-        </Link>
+        {showCTA && (
+          <Button className="mt-2" asChild>
+            <Link href="https://formbricks.com">{t("s.create_your_own")}</Link>
+          </Button>
+        )}
       </div>
+      {(!project || project.linkSurveyBranding) && (
+        <div>
+          <Link href="https://formbricks.com">
+            <Image src={footerLogo as string} alt="Brand logo" className="mx-auto w-40" />
+          </Link>
+        </div>
+      )}
     </div>
   );
 };

apps/web/modules/survey/link/components/survey-link-used.test.tsx

@@ -13,13 +13,17 @@ vi.mock("next/link", () => ({
   default: vi.fn(({ children, href }) => <a href={href}>{children}</a>),
 }));
 
+const mockProject = {
+  linkSurveyBranding: true,
+};
+
 describe("SurveyLinkUsed", () => {
   afterEach(() => {
     cleanup();
   });
 
   test("renders with default values when singleUseMessage is null", () => {
-    render(<SurveyLinkUsed singleUseMessage={null} />);
+    render(<SurveyLinkUsed singleUseMessage={null} project={mockProject} />);
 
     expect(screen.getByText("s.survey_already_answered_heading")).toBeInTheDocument();
     expect(screen.getByText("s.survey_already_answered_subheading")).toBeInTheDocument();
@@ -31,17 +35,28 @@ describe("SurveyLinkUsed", () => {
       subheading: "Custom Subheading",
     } as any;
 
-    render(<SurveyLinkUsed singleUseMessage={singleUseMessage} />);
+    render(<SurveyLinkUsed singleUseMessage={singleUseMessage} project={mockProject} />);
 
     expect(screen.getByText("Custom Heading")).toBeInTheDocument();
     expect(screen.getByText("Custom Subheading")).toBeInTheDocument();
   });
 
-  test("renders footer with link to Formbricks", () => {
-    render(<SurveyLinkUsed singleUseMessage={null} />);
+  test("renders footer with link to Formbricks when branding is enabled", () => {
+    render(<SurveyLinkUsed singleUseMessage={null} project={mockProject} />);
 
     const link = document.querySelector('a[href="https://formbricks.com"]');
     expect(link).toBeInTheDocument();
     expect(vi.mocked(Image)).toHaveBeenCalled();
   });
+
+  test("does not render footer when branding is disabled", () => {
+    const projectWithoutBranding = {
+      linkSurveyBranding: false,
+    };
+
+    render(<SurveyLinkUsed singleUseMessage={null} project={projectWithoutBranding} />);
+
+    const link = document.querySelector('a[href="https://formbricks.com"]');
+    expect(link).not.toBeInTheDocument();
+  });
 });

apps/web/modules/survey/link/components/survey-link-used.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Project } from "@prisma/client";
 import { useTranslate } from "@tolgee/react";
 import { CheckCircle2Icon } from "lucide-react";
 import Image from "next/image";
@@ -9,27 +10,29 @@ import footerLogo from "../lib/footerlogo.svg";
 
 interface SurveyLinkUsedProps {
   singleUseMessage: TSurveySingleUse | null;
+  project?: Pick<Project, "linkSurveyBranding">;
 }
 
-export const SurveyLinkUsed = ({ singleUseMessage }: SurveyLinkUsedProps) => {
+export const SurveyLinkUsed = ({ singleUseMessage, project }: SurveyLinkUsedProps) => {
   const { t } = useTranslate();
   const defaultHeading = t("s.survey_already_answered_heading");
   const defaultSubheading = t("s.survey_already_answered_subheading");
   return (
     <div className="flex min-h-screen flex-col items-center justify-between bg-gradient-to-tr from-slate-200 to-slate-50 py-8 text-center">
-      <div></div>
-      <div className="flex flex-col items-center space-y-3 text-slate-300">
+      <div className="my-auto flex flex-col items-center space-y-3 text-slate-300">
         <CheckCircle2Icon className="h-20 w-20" />
         <h1 className="text-4xl font-bold text-slate-800">{singleUseMessage?.heading ?? defaultHeading}</h1>
         <p className="text-lg leading-10 text-slate-500">
           {singleUseMessage?.subheading ?? defaultSubheading}
         </p>
       </div>
-      <div>
-        <Link href="https://formbricks.com">
-          <Image src={footerLogo as string} alt="Brand logo" className="mx-auto w-40" />
-        </Link>
-      </div>
+      {(!project || project.linkSurveyBranding) && (
+        <div>
+          <Link href="https://formbricks.com">
+            <Image src={footerLogo as string} alt="Brand logo" className="mx-auto w-40" />
+          </Link>
+        </div>
+      )}
     </div>
   );
 };

apps/web/modules/survey/link/components/survey-renderer.test.tsx

@@ -251,4 +251,33 @@ describe("renderSurvey", () => {
       })
     ).rejects.toThrow("Project not found");
   });
+
+  describe("Survey Inactive States", () => {
+    test("renders SurveyInactive with project when survey is paused", async () => {
+      const survey: TSurvey = { ...mockSurvey, status: "paused" };
+      const project = { id: "project-123", linkSurveyBranding: true };
+      vi.mocked(getProjectByEnvironmentId).mockResolvedValueOnce(project as any);
+
+      const result = await renderSurvey({
+        survey: survey,
+        searchParams: {},
+        isPreview: false,
+      });
+
+      expect(result).toBeDefined();
+    });
+
+    test("renders SurveyInactive without project when project is not found", async () => {
+      const survey: TSurvey = { ...mockSurvey, status: "paused" };
+      vi.mocked(getProjectByEnvironmentId).mockResolvedValueOnce(null);
+
+      const result = await renderSurvey({
+        survey: survey,
+        searchParams: {},
+        isPreview: false,
+      });
+
+      expect(result).toBeDefined();
+    });
+  });
 });

apps/web/modules/survey/link/components/survey-renderer.tsx

@@ -60,10 +60,12 @@ export const renderSurvey = async ({
   const isSpamProtectionEnabled = Boolean(IS_RECAPTCHA_CONFIGURED && survey.recaptcha?.enabled);
 
   if (survey.status !== "inProgress" && !isPreview) {
+    const project = await getProjectByEnvironmentId(survey.environmentId);
     return (
       <SurveyInactive
         status={survey.status}
         surveyClosedMessage={survey.surveyClosedMessage ? survey.surveyClosedMessage : undefined}
+        project={project || undefined}
       />
     );
   }

apps/web/modules/survey/link/contact-survey/page.tsx

@@ -4,6 +4,7 @@ import { SurveyInactive } from "@/modules/survey/link/components/survey-inactive
 import { renderSurvey } from "@/modules/survey/link/components/survey-renderer";
 import { getExistingContactResponse } from "@/modules/survey/link/lib/data";
 import { getBasicSurveyMetadata } from "@/modules/survey/link/lib/metadata-utils";
+import { getProjectByEnvironmentId } from "@/modules/survey/link/lib/project";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 
@@ -50,12 +51,19 @@ export const ContactSurveyPage = async (props: ContactSurveyPageProps) => {
 
   const result = verifyContactSurveyToken(jwt);
   if (!result.ok) {
+    // When token is invalid, we don't have survey data to get project branding settings
+    // So we show SurveyInactive without project data (shows branding by default for backward compatibility)
     return <SurveyInactive status="link invalid" />;
   }
   const { surveyId, contactId } = result.data;
 
   const existingResponse = await getExistingContactResponse(surveyId, contactId)();
   if (existingResponse) {
+    const survey = await getSurvey(surveyId);
+    if (survey) {
+      const project = await getProjectByEnvironmentId(survey.environmentId);
+      return <SurveyInactive status="response submitted" project={project || undefined} />;
+    }
     return <SurveyInactive status="response submitted" />;
   }
 

apps/web/modules/survey/link/not-found.test.tsx

@@ -47,9 +47,5 @@ describe("LinkSurveyNotFound", () => {
     // Check the basic elements that are visible in the rendered output
     expect(screen.getByText("Survey not found.")).toBeInTheDocument();
     expect(screen.getByText("There is no survey with this ID.")).toBeInTheDocument();
-    expect(screen.getByTestId("mock-help-circle-icon")).toBeInTheDocument();
-
-    // Check the button exists
-    expect(screen.getByTestId("mock-button")).toBeInTheDocument();
   });
 });

apps/web/modules/survey/link/not-found.tsx

@@ -1,26 +1,12 @@
-import { Button } from "@/modules/ui/components/button";
 import { HelpCircleIcon } from "lucide-react";
-import { StaticImport } from "next/dist/shared/lib/get-img-props";
-import Image from "next/image";
-import Link from "next/link";
-import footerLogo from "./lib/footerlogo.svg";
 
 export const LinkSurveyNotFound = () => {
   return (
-    <div className="flex h-full flex-col items-center justify-between bg-gradient-to-br from-slate-200 to-slate-50 py-8 text-center">
-      <div></div>
+    <div className="flex h-full flex-col items-center justify-center bg-gradient-to-br from-slate-200 to-slate-50 py-8 text-center">
       <div className="flex flex-col items-center space-y-3 text-slate-300">
-        <HelpCircleIcon className="h-20 w-20" />,
+        <HelpCircleIcon className="h-20 w-20" />
         <h1 className="text-4xl font-bold text-slate-800">Survey not found.</h1>
         <p className="text-lg leading-10 text-slate-500">There is no survey with this ID.</p>
-        <Button className="mt-2" asChild>
-          <Link href="https://formbricks.com">Create your own</Link>
-        </Button>
-      </div>
-      <div>
-        <Link href="https://formbricks.com">
-          <Image src={footerLogo as StaticImport} alt="Brand logo" className="mx-auto w-40" />
-        </Link>
       </div>
     </div>
   );

apps/web/modules/survey/link/page.test.tsx

@@ -1,14 +1,15 @@
 import { validateSurveySingleUseId } from "@/app/lib/singleUseSurveys";
 import { getSurvey } from "@/modules/survey/lib/survey";
+import { SurveyInactive } from "@/modules/survey/link/components/survey-inactive";
 import { renderSurvey } from "@/modules/survey/link/components/survey-renderer";
-import { getResponseBySingleUseId } from "@/modules/survey/link/lib/data";
-import { getSurveyWithMetadata } from "@/modules/survey/link/lib/data";
+import { getResponseBySingleUseId, getSurveyWithMetadata } from "@/modules/survey/link/lib/data";
+import { getProjectByEnvironmentId } from "@/modules/survey/link/lib/project";
 import { getMetadataForLinkSurvey } from "@/modules/survey/link/metadata";
 import "@testing-library/jest-dom/vitest";
-import { cleanup } from "@testing-library/react";
+import { cleanup, render } from "@testing-library/react";
 import { notFound } from "next/navigation";
 import { afterEach, describe, expect, test, vi } from "vitest";
-import { TResponseData } from "@formbricks/types/responses";
+import { logger } from "@formbricks/logger";
 import { TSurvey } from "@formbricks/types/surveys/types";
 import { LinkSurveyPage, generateMetadata } from "./page";
 
@@ -26,22 +27,32 @@ vi.mock("@/modules/survey/lib/survey", () => ({
 }));
 
 vi.mock("@/modules/survey/link/components/survey-inactive", () => ({
-  SurveyInactive: vi.fn(() => <div data-testid="survey-inactive" />),
+  SurveyInactive: vi.fn(() => <div>Survey Inactive</div>),
 }));
 
 vi.mock("@/modules/survey/link/components/survey-renderer", () => ({
-  renderSurvey: vi.fn(() => <div data-testid="survey-renderer" />),
+  renderSurvey: vi.fn(() => <div>Render Survey</div>),
 }));
 
 vi.mock("@/modules/survey/link/lib/data", () => ({
-  getResponseBySingleUseId: vi.fn(() => vi.fn()),
+  getResponseBySingleUseId: vi.fn(),
   getSurveyWithMetadata: vi.fn(),
 }));
 
+vi.mock("@/modules/survey/link/lib/project", () => ({
+  getProjectByEnvironmentId: vi.fn(),
+}));
+
 vi.mock("@/modules/survey/link/metadata", () => ({
   getMetadataForLinkSurvey: vi.fn(),
 }));
 
+vi.mock("@formbricks/logger", () => ({
+  logger: {
+    error: vi.fn(),
+  },
+}));
+
 describe("LinkSurveyPage", () => {
   afterEach(() => {
     cleanup();
@@ -232,4 +243,169 @@ describe("LinkSurveyPage", () => {
       })
     );
   });
+
+  test("should show 'link invalid' for single-use survey without suId", async () => {
+    const singleUseSurvey = { ...mockSurvey, singleUse: { enabled: true, isEncrypted: false } };
+    vi.mocked(getSurveyWithMetadata).mockResolvedValue(singleUseSurvey);
+    vi.mocked(getProjectByEnvironmentId).mockResolvedValue({ id: "proj-123" } as any);
+
+    const props = {
+      params: Promise.resolve({ surveyId: "survey123" }),
+      searchParams: Promise.resolve({}),
+    };
+    const Page = await LinkSurveyPage(props);
+    render(Page);
+
+    expect(vi.mocked(SurveyInactive).mock.calls[0][0]).toEqual({
+      status: "link invalid",
+      project: { id: "proj-123" },
+    });
+  });
+
+  test("should show 'link invalid' for encrypted single-use survey with invalid suId", async () => {
+    const singleUseSurvey = { ...mockSurvey, singleUse: { enabled: true, isEncrypted: true } };
+    vi.mocked(getSurveyWithMetadata).mockResolvedValue(singleUseSurvey);
+    vi.mocked(validateSurveySingleUseId).mockReturnValue(undefined);
+    vi.mocked(getProjectByEnvironmentId).mockResolvedValue({ id: "proj-123" } as any);
+
+    const props = {
+      params: Promise.resolve({ surveyId: "survey123" }),
+      searchParams: Promise.resolve({ suId: "invalid-suid" }),
+    };
+    const Page = await LinkSurveyPage(props);
+    render(Page);
+
+    expect(vi.mocked(SurveyInactive).mock.calls[0][0]).toEqual({
+      status: "link invalid",
+      project: { id: "proj-123" },
+    });
+  });
+
+  test("should render survey for encrypted single-use survey with valid suId", async () => {
+    const singleUseSurvey = { ...mockSurvey, singleUse: { enabled: true, isEncrypted: true } };
+    vi.mocked(getSurveyWithMetadata).mockResolvedValue(singleUseSurvey);
+    vi.mocked(validateSurveySingleUseId).mockReturnValue("valid-suid");
+
+    const mockResponseFn = vi.fn().mockResolvedValue({ id: "res-1" });
+    vi.mocked(getResponseBySingleUseId).mockReturnValue(mockResponseFn);
+
+    const props = {
+      params: Promise.resolve({ surveyId: "survey-123" }),
+      searchParams: Promise.resolve({ suId: "encrypted-suid" }),
+    };
+    const Page = await LinkSurveyPage(props);
+    render(Page);
+
+    expect(vi.mocked(renderSurvey).mock.calls[0][0]).toEqual(
+      expect.objectContaining({
+        singleUseId: "valid-suid",
+        singleUseResponse: { id: "res-1" },
+      })
+    );
+  });
+
+  test("should render survey for non-encrypted single-use survey", async () => {
+    const singleUseSurvey = { ...mockSurvey, singleUse: { enabled: true, isEncrypted: false } };
+    vi.mocked(getSurveyWithMetadata).mockResolvedValue(singleUseSurvey);
+
+    const mockResponseFn = vi.fn().mockResolvedValue({ id: "res-1" });
+    vi.mocked(getResponseBySingleUseId).mockReturnValue(mockResponseFn);
+
+    const props = {
+      params: Promise.resolve({ surveyId: "survey-123" }),
+      searchParams: Promise.resolve({ suId: "plain-suid" }),
+    };
+    const Page = await LinkSurveyPage(props);
+    render(Page);
+
+    expect(vi.mocked(renderSurvey).mock.calls[0][0]).toEqual(
+      expect.objectContaining({
+        singleUseId: "plain-suid",
+        singleUseResponse: { id: "res-1" },
+      })
+    );
+  });
+
+  test("should render survey with undefined response when getResponseBySingleUseId fails", async () => {
+    const singleUseSurvey = { ...mockSurvey, singleUse: { enabled: true, isEncrypted: false } };
+    vi.mocked(getSurveyWithMetadata).mockResolvedValue(singleUseSurvey);
+
+    const mockResponseFn = vi.fn().mockRejectedValue(new Error("DB error"));
+    vi.mocked(getResponseBySingleUseId).mockReturnValue(mockResponseFn);
+
+    const props = {
+      params: Promise.resolve({ surveyId: "survey123" }),
+      searchParams: Promise.resolve({ suId: "plain-suid" }),
+    };
+    const Page = await LinkSurveyPage(props);
+    render(Page);
+
+    expect(logger.error).toHaveBeenCalled();
+    expect(vi.mocked(renderSurvey).mock.calls[0][0]).toEqual(
+      expect.objectContaining({
+        singleUseId: "plain-suid",
+        singleUseResponse: undefined,
+      })
+    );
+  });
+
+  test("should handle missing project for single-use survey without suId", async () => {
+    const singleUseSurvey = { ...mockSurvey, singleUse: { enabled: true, isEncrypted: false } };
+    vi.mocked(getSurveyWithMetadata).mockResolvedValue(singleUseSurvey);
+    vi.mocked(getProjectByEnvironmentId).mockResolvedValue(null);
+
+    const props = {
+      params: Promise.resolve({ surveyId: "survey123" }),
+      searchParams: Promise.resolve({}),
+    };
+    const Page = await LinkSurveyPage(props);
+    render(Page);
+
+    expect(vi.mocked(SurveyInactive).mock.calls[0][0]).toEqual({
+      status: "link invalid",
+      project: undefined,
+    });
+  });
+
+  test("LinkSurveyPage calls notFound when getSurveyWithMetadata throws an error", async () => {
+    const databaseError = new Error("Database connection failed");
+    vi.mocked(getSurveyWithMetadata).mockRejectedValue(databaseError);
+
+    const props = {
+      params: Promise.resolve({ surveyId: "survey123" }),
+      searchParams: Promise.resolve({}),
+    };
+
+    await LinkSurveyPage(props);
+
+    expect(getSurveyWithMetadata).toHaveBeenCalledWith("survey123");
+    expect(logger.error).toHaveBeenCalledWith(databaseError, "Error fetching survey");
+    expect(notFound).toHaveBeenCalled();
+  });
+});
+
+describe("generateMetadata", () => {
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  test("should call notFound for invalid surveyId", async () => {
+    const props = {
+      params: Promise.resolve({ surveyId: "invalid-id" }),
+      searchParams: Promise.resolve({}),
+    };
+    await generateMetadata(props);
+    expect(notFound).toHaveBeenCalled();
+  });
+
+  test("should call getMetadataForLinkSurvey for valid surveyId", async () => {
+    vi.mocked(getMetadataForLinkSurvey).mockResolvedValue({ title: "Test Survey" });
+    const props = {
+      params: Promise.resolve({ surveyId: "survey-123" }),
+      searchParams: Promise.resolve({}),
+    };
+    const metadata = await generateMetadata(props);
+    expect(getMetadataForLinkSurvey).toHaveBeenCalledWith("survey-123");
+    expect(metadata).toEqual({ title: "Test Survey" });
+  });
 });

apps/web/modules/survey/link/page.tsx

@@ -2,11 +2,13 @@ import { validateSurveySingleUseId } from "@/app/lib/singleUseSurveys";
 import { SurveyInactive } from "@/modules/survey/link/components/survey-inactive";
 import { renderSurvey } from "@/modules/survey/link/components/survey-renderer";
 import { getResponseBySingleUseId, getSurveyWithMetadata } from "@/modules/survey/link/lib/data";
+import { getProjectByEnvironmentId } from "@/modules/survey/link/lib/project";
 import { getMetadataForLinkSurvey } from "@/modules/survey/link/metadata";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { logger } from "@formbricks/logger";
 import { ZId } from "@formbricks/types/common";
+import { TSurvey } from "@formbricks/types/surveys/types";
 
 interface LinkSurveyPageProps {
   params: Promise<{
@@ -42,7 +44,14 @@ export const LinkSurveyPage = async (props: LinkSurveyPageProps) => {
   const isPreview = searchParams.preview === "true";
 
   // Use optimized survey data fetcher (includes all necessary data)
-  const survey = await getSurveyWithMetadata(params.surveyId);
+  let survey: TSurvey | null = null;
+  try {
+    survey = await getSurveyWithMetadata(params.surveyId);
+  } catch (error) {
+    logger.error(error, "Error fetching survey");
+    return notFound();
+  }
+
   const suId = searchParams.suId;
 
   const isSingleUseSurvey = survey?.singleUse?.enabled;
@@ -53,7 +62,8 @@ export const LinkSurveyPage = async (props: LinkSurveyPageProps) => {
   if (isSingleUseSurvey) {
     // check if the single use id is present for single use surveys
     if (!suId) {
-      return <SurveyInactive status="link invalid" />;
+      const project = await getProjectByEnvironmentId(survey.environmentId);
+      return <SurveyInactive status="link invalid" project={project ?? undefined} />;
     }
 
     // if encryption is enabled, validate the single use id
@@ -61,7 +71,8 @@ export const LinkSurveyPage = async (props: LinkSurveyPageProps) => {
     if (isSingleUseSurveyEncrypted) {
       validatedSingleUseId = validateSurveySingleUseId(suId);
       if (!validatedSingleUseId) {
-        return <SurveyInactive status="link invalid" />;
+        const project = await getProjectByEnvironmentId(survey.environmentId);
+        return <SurveyInactive status="link invalid" project={project ?? undefined} />;
       }
     }
     // if encryption is disabled, use the suId as is

apps/web/modules/survey/list/components/survey-dropdown-menu.test.tsx

@@ -1,9 +1,16 @@
+// Import the actions to access mocked functions
+import { deleteSurveyAction } from "@/modules/survey/list/actions";
 import { TSurvey } from "@/modules/survey/list/types/surveys";
 import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
-import { afterEach, describe, expect, test, vi } from "vitest";
+import toast from "react-hot-toast";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { SurveyDropDownMenu } from "./survey-dropdown-menu";
 
+// Cast to mocked functions
+const mockDeleteSurveyAction = vi.mocked(deleteSurveyAction);
+const mockToast = vi.mocked(toast);
+
 // Mock translation
 vi.mock("@tolgee/react", () => ({
   useTranslate: () => ({ t: (key: string) => key }),
@@ -43,6 +50,24 @@ vi.mock("@/modules/survey/list/actions", () => ({
   getSurveyAction: vi.fn(() =>
     Promise.resolve({ data: { id: "duplicatedSurveyId", name: "Duplicated Survey" } })
   ),
+  deleteSurveyAction: vi.fn(),
+}));
+
+// Mock next/navigation
+const mockRouterRefresh = vi.fn();
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({
+    refresh: mockRouterRefresh,
+    push: vi.fn(),
+  }),
+}));
+
+// Mock react-hot-toast
+vi.mock("react-hot-toast", () => ({
+  default: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
 }));
 
 describe("SurveyDropDownMenu", () => {
@@ -240,4 +265,245 @@ describe("SurveyDropDownMenu", () => {
       expect(mockDuplicateSurvey).toHaveBeenCalled();
     });
   });
+
+  describe("handleDeleteSurvey", () => {
+    beforeEach(() => {
+      vi.clearAllMocks();
+    });
+
+    test("successfully deletes survey - calls all expected functions and shows success toast", async () => {
+      const mockDeleteSurvey = vi.fn();
+      mockDeleteSurveyAction.mockResolvedValueOnce({ data: true });
+
+      render(
+        <SurveyDropDownMenu
+          environmentId="env123"
+          survey={fakeSurvey}
+          publicDomain="http://survey.test"
+          refreshSingleUseId={vi.fn()}
+          duplicateSurvey={vi.fn()}
+          deleteSurvey={mockDeleteSurvey}
+        />
+      );
+
+      // Open dropdown and click delete
+      const menuWrapper = screen.getByTestId("survey-dropdown-menu");
+      const triggerElement = menuWrapper.querySelector("[class*='p-2']") as HTMLElement;
+      await userEvent.click(triggerElement);
+
+      const deleteButton = screen.getByText("common.delete");
+      await userEvent.click(deleteButton);
+
+      // Confirm deletion in dialog
+      const confirmDeleteButton = screen.getByText("common.delete");
+      await userEvent.click(confirmDeleteButton);
+
+      await waitFor(() => {
+        expect(mockDeleteSurveyAction).toHaveBeenCalledWith({ surveyId: "testSurvey" });
+        expect(mockDeleteSurvey).toHaveBeenCalledWith("testSurvey");
+        expect(mockToast.success).toHaveBeenCalledWith("environments.surveys.survey_deleted_successfully");
+        expect(mockRouterRefresh).toHaveBeenCalled();
+      });
+    });
+
+    test("handles deletion error - shows error toast and resets loading state", async () => {
+      const mockDeleteSurvey = vi.fn();
+      const deletionError = new Error("Deletion failed");
+      mockDeleteSurveyAction.mockRejectedValueOnce(deletionError);
+
+      render(
+        <SurveyDropDownMenu
+          environmentId="env123"
+          survey={fakeSurvey}
+          publicDomain="http://survey.test"
+          refreshSingleUseId={vi.fn()}
+          duplicateSurvey={vi.fn()}
+          deleteSurvey={mockDeleteSurvey}
+        />
+      );
+
+      // Open dropdown and click delete
+      const menuWrapper = screen.getByTestId("survey-dropdown-menu");
+      const triggerElement = menuWrapper.querySelector("[class*='p-2']") as HTMLElement;
+      await userEvent.click(triggerElement);
+
+      const deleteButton = screen.getByText("common.delete");
+      await userEvent.click(deleteButton);
+
+      // Confirm deletion in dialog
+      const confirmDeleteButton = screen.getByText("common.delete");
+      await userEvent.click(confirmDeleteButton);
+
+      await waitFor(() => {
+        expect(mockDeleteSurveyAction).toHaveBeenCalledWith({ surveyId: "testSurvey" });
+        expect(mockDeleteSurvey).not.toHaveBeenCalled();
+        expect(mockToast.error).toHaveBeenCalledWith("environments.surveys.error_deleting_survey");
+        expect(mockRouterRefresh).not.toHaveBeenCalled();
+      });
+    });
+
+    test("manages loading state correctly during successful deletion", async () => {
+      const mockDeleteSurvey = vi.fn();
+      mockDeleteSurveyAction.mockImplementation(
+        () => new Promise((resolve) => setTimeout(() => resolve({ data: true }), 100))
+      );
+
+      render(
+        <SurveyDropDownMenu
+          environmentId="env123"
+          survey={fakeSurvey}
+          publicDomain="http://survey.test"
+          refreshSingleUseId={vi.fn()}
+          duplicateSurvey={vi.fn()}
+          deleteSurvey={mockDeleteSurvey}
+        />
+      );
+
+      // Open dropdown and click delete
+      const menuWrapper = screen.getByTestId("survey-dropdown-menu");
+      const triggerElement = menuWrapper.querySelector("[class*='p-2']") as HTMLElement;
+      await userEvent.click(triggerElement);
+
+      const deleteButton = screen.getByText("common.delete");
+      await userEvent.click(deleteButton);
+
+      // Confirm deletion in dialog using a more reliable selector
+      const confirmDeleteButton = screen.getByText("common.delete");
+      await userEvent.click(confirmDeleteButton);
+
+      // Wait for the deletion process to complete
+      await waitFor(() => {
+        expect(mockDeleteSurveyAction).toHaveBeenCalled();
+        expect(mockDeleteSurvey).toHaveBeenCalled();
+        expect(mockToast.success).toHaveBeenCalled();
+      });
+    });
+
+    test("manages loading state correctly during failed deletion", async () => {
+      const mockDeleteSurvey = vi.fn();
+      mockDeleteSurveyAction.mockImplementation(
+        () => new Promise((_, reject) => setTimeout(() => reject(new Error("Network error")), 100))
+      );
+
+      render(
+        <SurveyDropDownMenu
+          environmentId="env123"
+          survey={fakeSurvey}
+          publicDomain="http://survey.test"
+          refreshSingleUseId={vi.fn()}
+          duplicateSurvey={vi.fn()}
+          deleteSurvey={mockDeleteSurvey}
+        />
+      );
+
+      // Open dropdown and click delete
+      const menuWrapper = screen.getByTestId("survey-dropdown-menu");
+      const triggerElement = menuWrapper.querySelector("[class*='p-2']") as HTMLElement;
+      await userEvent.click(triggerElement);
+
+      const deleteButton = screen.getByText("common.delete");
+      await userEvent.click(deleteButton);
+
+      // Confirm deletion in dialog using a more reliable selector
+      const confirmDeleteButton = screen.getByText("common.delete");
+      await userEvent.click(confirmDeleteButton);
+
+      // Wait for the error to occur
+      await waitFor(() => {
+        expect(mockDeleteSurveyAction).toHaveBeenCalled();
+        expect(mockToast.error).toHaveBeenCalledWith("environments.surveys.error_deleting_survey");
+      });
+
+      // Verify that deleteSurvey callback was not called due to error
+      expect(mockDeleteSurvey).not.toHaveBeenCalled();
+      expect(mockRouterRefresh).not.toHaveBeenCalled();
+    });
+
+    test("does not call router.refresh or success toast when deleteSurveyAction throws", async () => {
+      const mockDeleteSurvey = vi.fn();
+      mockDeleteSurveyAction.mockRejectedValueOnce(new Error("API Error"));
+
+      render(
+        <SurveyDropDownMenu
+          environmentId="env123"
+          survey={fakeSurvey}
+          publicDomain="http://survey.test"
+          refreshSingleUseId={vi.fn()}
+          duplicateSurvey={vi.fn()}
+          deleteSurvey={mockDeleteSurvey}
+        />
+      );
+
+      // Open dropdown and click delete
+      const menuWrapper = screen.getByTestId("survey-dropdown-menu");
+      const triggerElement = menuWrapper.querySelector("[class*='p-2']") as HTMLElement;
+      await userEvent.click(triggerElement);
+
+      const deleteButton = screen.getByText("common.delete");
+      await userEvent.click(deleteButton);
+
+      // Confirm deletion in dialog
+      const confirmDeleteButton = screen.getByText("common.delete");
+      await userEvent.click(confirmDeleteButton);
+
+      await waitFor(() => {
+        expect(mockDeleteSurveyAction).toHaveBeenCalled();
+        expect(mockToast.error).toHaveBeenCalled();
+      });
+
+      // Verify success-path functions are not called
+      expect(mockDeleteSurvey).not.toHaveBeenCalled();
+      expect(mockToast.success).not.toHaveBeenCalled();
+      expect(mockRouterRefresh).not.toHaveBeenCalled();
+    });
+
+    test("calls functions in correct order during successful deletion", async () => {
+      const mockDeleteSurvey = vi.fn();
+      const callOrder: string[] = [];
+
+      mockDeleteSurveyAction.mockImplementation(async () => {
+        callOrder.push("deleteSurveyAction");
+        return { data: true };
+      });
+
+      mockDeleteSurvey.mockImplementation(() => {
+        callOrder.push("deleteSurvey");
+      });
+
+      (mockToast.success as any).mockImplementation(() => {
+        callOrder.push("toast.success");
+      });
+
+      mockRouterRefresh.mockImplementation(() => {
+        callOrder.push("router.refresh");
+      });
+
+      render(
+        <SurveyDropDownMenu
+          environmentId="env123"
+          survey={fakeSurvey}
+          publicDomain="http://survey.test"
+          refreshSingleUseId={vi.fn()}
+          duplicateSurvey={vi.fn()}
+          deleteSurvey={mockDeleteSurvey}
+        />
+      );
+
+      // Open dropdown and click delete
+      const menuWrapper = screen.getByTestId("survey-dropdown-menu");
+      const triggerElement = menuWrapper.querySelector("[class*='p-2']") as HTMLElement;
+      await userEvent.click(triggerElement);
+
+      const deleteButton = screen.getByText("common.delete");
+      await userEvent.click(deleteButton);
+
+      // Confirm deletion in dialog
+      const confirmDeleteButton = screen.getByText("common.delete");
+      await userEvent.click(confirmDeleteButton);
+
+      await waitFor(() => {
+        expect(callOrder).toEqual(["deleteSurveyAction", "deleteSurvey", "toast.success", "router.refresh"]);
+      });
+    });
+  });
 });

apps/web/modules/survey/list/components/survey-dropdown-menu.tsx

@@ -71,13 +71,13 @@ export const SurveyDropDownMenu = ({
     try {
       await deleteSurveyAction({ surveyId });
       deleteSurvey(surveyId);
-      router.refresh();
-      setDeleteDialogOpen(false);
       toast.success(t("environments.surveys.survey_deleted_successfully"));
+      router.refresh();
     } catch (error) {
       toast.error(t("environments.surveys.error_deleting_survey"));
+    } finally {
+      setLoading(false);
     }
-    setLoading(false);
   };
 
   const handleCopyLink = async (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -242,6 +242,7 @@ export const SurveyDropDownMenu = ({
           setOpen={setDeleteDialogOpen}
           onDelete={() => handleDeleteSurvey(survey.id)}
           text={t("environments.surveys.delete_survey_and_responses_warning")}
+          isDeleting={loading}
         />
       )}
 

apps/web/modules/survey/list/components/survey-list.test.tsx

@@ -10,7 +10,6 @@ import { TProjectConfigChannel } from "@formbricks/types/project";
 import { TSurveyFilters } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";
 import { SurveyCard } from "./survey-card";
-import { SurveyFilters } from "./survey-filters";
 import { SurveysList, initialFilters as surveyFiltersInitialFiltersFromModule } from "./survey-list";
 import { SurveyLoading } from "./survey-loading";
 
@@ -324,6 +323,24 @@ describe("SurveysList", () => {
     expect(screen.getByText("Survey Two")).toBeInTheDocument();
   });
 
+  test("handleDeleteSurvey shows loading state when the last survey is deleted", async () => {
+    const surveysData = [{ ...surveyMock, id: "s1", name: "Last Survey" }];
+    vi.mocked(getSurveysAction).mockResolvedValueOnce({ data: surveysData });
+    const user = userEvent.setup();
+    render(<SurveysList {...defaultProps} />);
+
+    await waitFor(() => expect(screen.getByText("Last Survey")).toBeInTheDocument());
+    expect(screen.queryByTestId("survey-loading")).not.toBeInTheDocument();
+
+    const deleteButtonS1 = screen.getByTestId("delete-s1");
+    await user.click(deleteButtonS1);
+
+    await waitFor(() => {
+      expect(screen.queryByText("Last Survey")).not.toBeInTheDocument();
+      expect(screen.getByTestId("survey-loading")).toBeInTheDocument();
+    });
+  });
+
   test("handleDuplicateSurvey adds the duplicated survey to the beginning of the list", async () => {
     const initialSurvey = { ...surveyMock, id: "s1", name: "Original Survey" };
     vi.mocked(getSurveysAction).mockResolvedValueOnce({ data: [initialSurvey] });

apps/web/modules/survey/list/components/survey-list.tsx

@@ -123,6 +123,7 @@ export const SurveysList = ({
   const handleDeleteSurvey = async (surveyId: string) => {
     const newSurveys = surveys.filter((survey) => survey.id !== surveyId);
     setSurveys(newSurveys);
+    if (newSurveys.length === 0) setIsFetching(true);
   };
 
   const handleDuplicateSurvey = async (survey: TSurvey) => {

apps/web/modules/ui/components/client-logout/index.test.tsx

@@ -1,17 +1,61 @@
+import { useSignOut } from "@/modules/auth/hooks/use-sign-out";
 import { render } from "@testing-library/react";
-import { signOut } from "next-auth/react";
-import { describe, expect, test, vi } from "vitest";
+import { type MockedFunction, beforeEach, describe, expect, test, vi } from "vitest";
 import { ClientLogout } from "./index";
 
+// Mock the localStorage
+const mockRemoveItem = vi.fn();
+Object.defineProperty(window, "localStorage", {
+  value: {
+    removeItem: mockRemoveItem,
+  },
+});
+
 // Mock next-auth/react
-vi.mock("next-auth/react", () => ({
-  signOut: vi.fn(),
+const mockSignOut = vi.fn();
+vi.mock("@/modules/auth/hooks/use-sign-out", () => ({
+  useSignOut: vi.fn(),
 }));
 
+const mockUseSignOut = useSignOut as MockedFunction<typeof useSignOut>;
+
 describe("ClientLogout", () => {
-  test("calls signOut on render", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockUseSignOut.mockReturnValue({
+      signOut: mockSignOut,
+    });
+  });
+
+  test("calls signOut with correct parameters on render", () => {
     render(<ClientLogout />);
-    expect(signOut).toHaveBeenCalled();
+
+    expect(mockUseSignOut).toHaveBeenCalled();
+
+    expect(mockSignOut).toHaveBeenCalledWith({
+      reason: "forced_logout",
+      redirectUrl: "/auth/login",
+      redirect: false,
+      callbackUrl: "/auth/login",
+    });
+  });
+
+  test("handles missing userId and userEmail", () => {
+    render(<ClientLogout />);
+
+    expect(mockUseSignOut).toHaveBeenCalled();
+
+    expect(mockSignOut).toHaveBeenCalledWith({
+      reason: "forced_logout",
+      redirectUrl: "/auth/login",
+      redirect: false,
+      callbackUrl: "/auth/login",
+    });
+  });
+
+  test("removes environment ID from localStorage", () => {
+    render(<ClientLogout />);
+    expect(mockRemoveItem).toHaveBeenCalledWith("formbricks-environment-id");
   });
 
   test("renders null", () => {

apps/web/modules/ui/components/client-logout/index.tsx

@@ -1,11 +1,20 @@
 "use client";
 
-import { signOut } from "next-auth/react";
+import { FORMBRICKS_ENVIRONMENT_ID_LS } from "@/lib/localStorage";
+import { useSignOut } from "@/modules/auth/hooks/use-sign-out";
 import { useEffect } from "react";
 
 export const ClientLogout = () => {
+  const { signOut: signOutWithAudit } = useSignOut();
+
   useEffect(() => {
-    signOut();
+    localStorage.removeItem(FORMBRICKS_ENVIRONMENT_ID_LS);
+    signOutWithAudit({
+      reason: "forced_logout",
+      redirectUrl: "/auth/login",
+      redirect: false,
+      callbackUrl: "/auth/login",
+    });
   });
   return null;
 };

apps/web/modules/ui/components/dialog/index.test.tsx

@@ -9,7 +9,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "./index";
+} from ".";
 
 // Mock Radix UI Dialog components
 vi.mock("@radix-ui/react-dialog", () => {
@@ -120,7 +120,7 @@ describe("Dialog Components", () => {
       </DialogContent>
     );
 
-    expect(screen.queryByTestId("dialog-close")).toBeInTheDocument();
+    expect(screen.queryByTestId("dialog-close")).not.toBeInTheDocument();
     expect(screen.queryByTestId("x-icon")).not.toBeInTheDocument();
   });
 

apps/web/modules/ui/components/dialog/index.tsx

@@ -11,19 +11,19 @@ const DialogTrigger = DialogPrimitive.Trigger;
 
 const DialogPortal = ({ children, ...props }: DialogPrimitive.DialogPortalProps) => (
   <DialogPrimitive.Portal {...props}>
-    <div className="fixed inset-0 z-50 flex items-start justify-center sm:items-center">{children}</div>
+    <div className="fixed inset-0 z-50 flex items-end justify-center md:items-center">{children}</div>
   </DialogPrimitive.Portal>
 );
 DialogPortal.displayName = DialogPrimitive.Portal.displayName;
 
 const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentRef<typeof DialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "bg-background/80 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in fixed inset-0 z-50 backdrop-blur-sm transition-all duration-100",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in fixed inset-0 z-50 bg-black/80 backdrop-blur-sm transition-all duration-100",
       className
     )}
     {...props}
@@ -31,29 +31,43 @@ const DialogOverlay = React.forwardRef<
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
+interface DialogContentProps {
+  hideCloseButton?: boolean;
+  disableCloseOnOutsideClick?: boolean;
+  width?: "default" | "wide";
+}
+
 const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
-    hideCloseButton?: boolean;
-  }
->(({ className, children, hideCloseButton, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "bg-background animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0 fixed z-50 grid gap-4 rounded-b-lg border p-6 shadow-lg sm:rounded-lg",
-        className
-      )}
-      {...props}>
-      {children}
-      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
-        {!hideCloseButton ? <X className="h-4 w-4" /> : null}
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
+  React.ComponentRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & DialogContentProps
+>(
+  (
+    { className, children, hideCloseButton, disableCloseOnOutsideClick, width = "default", ...props },
+    ref
+  ) => (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          "animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 md:zoom-in-90 data-[state=open]:md:slide-in-from-bottom-0 fixed z-50 flex max-h-[90dvh] w-full flex-col space-y-4 rounded-t-lg border bg-white p-4 shadow-lg md:overflow-hidden md:rounded-lg",
+          width === "default" ? "md:w-[720px]" : "md:w-[720px] lg:w-[960px]",
+          className
+        )}
+        onPointerDownOutside={disableCloseOnOutsideClick ? (e) => e.preventDefault() : undefined}
+        onEscapeKeyDown={disableCloseOnOutsideClick ? (e) => e.preventDefault() : undefined}
+        {...props}>
+        {children}
+        {!hideCloseButton && (
+          <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent absolute right-3 top-[-0.25rem] z-10 rounded-sm bg-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:text-slate-500">
+            <X className="size-4 text-slate-500" />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+);
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 type DialogHeaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, "dangerouslySetInnerHTML"> & {
@@ -63,7 +77,14 @@ type DialogHeaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, "dangerously
 };
 
 const DialogHeader = ({ className, ...props }: DialogHeaderProps) => (
-  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
+  <div
+    className={cn(
+      "sticky top-[-32px] z-10 flex flex-shrink-0 flex-col gap-y-1 bg-white text-left",
+      "[&>svg]:text-primary [&>svg]:absolute [&>svg]:size-4 [&>svg~*]:items-center [&>svg~*]:pl-6 md:[&>svg~*]:flex",
+      className
+    )}
+    {...props}
+  />
 );
 DialogHeader.displayName = "DialogHeader";
 
@@ -75,35 +96,56 @@ type DialogFooterProps = Omit<React.HTMLAttributes<HTMLDivElement>, "dangerously
 
 const DialogFooter = ({ className, ...props }: DialogFooterProps) => (
   <div
-    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    className={cn(
+      "bottom-0 z-10 flex flex-shrink-0 flex-col-reverse bg-white md:sticky md:flex-row md:justify-end",
+      className
+    )}
     {...props}
   />
 );
 
 DialogFooter.displayName = "DialogFooter";
 
+const DialogBody = ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
+  <section
+    className={cn("flex-1 overflow-y-auto text-sm", className)}
+    aria-label="Dialog content"
+    {...props}
+  />
+);
+DialogBody.displayName = "DialogBody";
+
 const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentRef<typeof DialogPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    className={cn("text-primary min-h-4 text-sm font-medium leading-none tracking-tight", className)}
     {...props}
   />
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentRef<typeof DialogPrimitive.Description>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-muted-foreground text-sm", className)}
+    className={cn("font-regular text-sm text-slate-500", className)}
     {...props}
   />
 ));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
-export { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };
+export {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogBody,
+};

apps/web/modules/ui/components/dialog/stories.tsx

@@ -0,0 +1,460 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AlertCircle } from "lucide-react";
+import { Button } from "../button";
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./index";
+
+// Story options separate from component props
+interface StoryOptions {
+  triggerText: string;
+  showHeader: boolean;
+  showIcon: boolean;
+  title: string;
+  showDescription: boolean;
+  description: string;
+  bodyContent?: React.ReactNode;
+  showFooter: boolean;
+  footerButtonConfiguration: "1" | "2" | "3";
+  primaryButtonText: string;
+  secondaryButtonText: string;
+  tertiaryButtonText: string;
+  bodyElementCount: number;
+}
+
+type StoryProps = React.ComponentProps<typeof DialogContent> & StoryOptions;
+
+const DefaultBodyContent = (elementCount: number): React.ReactNode => {
+  return (
+    <div>
+      {Array(elementCount)
+        .fill(0)
+        .map((_, i) => (
+          <p key={i}>Scrollable content line {i + 1}</p>
+        ))}
+    </div>
+  );
+};
+
+const meta: Meta<StoryProps> = {
+  title: "UI/Modal",
+  component: DialogContent,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    controls: {
+      sort: "requiredFirst",
+      exclude: [],
+    },
+  },
+  argTypes: {
+    // Component Props - Behavior Category
+    hideCloseButton: {
+      control: "boolean",
+      description: "Whether to hide the close button (X)",
+      table: {
+        category: "Behavior",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+      order: 2,
+    },
+    disableCloseOnOutsideClick: {
+      control: "boolean",
+      description: "Whether to disable closing when clicking outside",
+      table: {
+        category: "Behavior",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+      order: 1,
+    },
+
+    // Story Options - Appearance Category
+    width: {
+      control: "select",
+      options: ["default", "wide"],
+      description: "Width of the modal",
+      table: {
+        category: "Appearance",
+        type: { summary: "string" },
+        defaultValue: { summary: "default" },
+      },
+      order: 1,
+    },
+    showHeader: {
+      control: "boolean",
+      description: "Whether to show the header section",
+      table: {
+        category: "Appearance",
+        type: { summary: "boolean" },
+      },
+      order: 2,
+    },
+    showIcon: {
+      control: "boolean",
+      description: "Whether to show an icon in the header",
+      table: {
+        category: "Appearance",
+        type: { summary: "boolean" },
+      },
+      order: 3,
+    },
+    showDescription: {
+      control: "boolean",
+      description: "Whether to show a description in the header",
+      table: {
+        category: "Appearance",
+        type: { summary: "boolean" },
+      },
+      order: 4,
+    },
+    showFooter: {
+      control: "boolean",
+      description: "Whether to show the footer section",
+      table: {
+        category: "Appearance",
+        type: { summary: "boolean" },
+      },
+      order: 5,
+    },
+    footerButtonConfiguration: {
+      control: "select",
+      options: ["1", "2", "3"],
+      description: "Number of buttons to show in footer",
+      table: {
+        category: "Appearance",
+        type: { summary: "string" },
+      },
+      order: 6,
+    },
+
+    // Story Options - Content Category
+    triggerText: {
+      control: "text",
+      description: "Text for the trigger button",
+      table: {
+        category: "Content",
+        type: { summary: "string" },
+      },
+      order: 1,
+    },
+    title: {
+      control: "text",
+      description: "Modal title text",
+      table: {
+        category: "Content",
+        type: { summary: "string" },
+      },
+      order: 2,
+    },
+    description: {
+      control: "text",
+      description: "Modal description text",
+      table: {
+        category: "Content",
+        type: { summary: "string" },
+      },
+      order: 3,
+    },
+    primaryButtonText: {
+      control: "text",
+      description: "Text for the primary button",
+      table: {
+        category: "Content",
+        type: { summary: "string" },
+      },
+      order: 4,
+    },
+    secondaryButtonText: {
+      control: "text",
+      description: "Text for the secondary button",
+      table: {
+        category: "Content",
+        type: { summary: "string" },
+      },
+      order: 5,
+    },
+    tertiaryButtonText: {
+      control: "text",
+      description: "Text for the tertiary button",
+      table: {
+        category: "Content",
+        type: { summary: "string" },
+      },
+      order: 6,
+    },
+    bodyElementCount: {
+      control: { type: "number", min: 1, max: 100, step: 1 },
+      description: "Number of elements in the body content",
+      table: {
+        category: "Content",
+        type: { summary: "number" },
+      },
+      order: 7,
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DialogContent> & { args: StoryOptions };
+
+// Create a common render function to reduce duplication
+const renderModal = (args: StoryProps) => {
+  // Extract component props
+  const {
+    hideCloseButton = false,
+    disableCloseOnOutsideClick = false,
+    width = "default",
+    className = "",
+  } = args;
+
+  // Extract story content options
+  const {
+    triggerText = "Open Modal",
+    showHeader = true,
+    showIcon = false,
+    title = "Modal Title",
+    showDescription = true,
+    description = "Modal description",
+    showFooter = true,
+    footerButtonConfiguration = "3",
+    primaryButtonText = "Confirm",
+    secondaryButtonText = "Cancel",
+    tertiaryButtonText = "Learn more",
+    bodyElementCount = 5,
+  } = args as StoryOptions;
+
+  const bodyContent = DefaultBodyContent(bodyElementCount);
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">{triggerText}</Button>
+      </DialogTrigger>
+      <DialogContent
+        hideCloseButton={hideCloseButton}
+        disableCloseOnOutsideClick={disableCloseOnOutsideClick}
+        width={width}
+        className={className}>
+        {showHeader && (
+          <DialogHeader>
+            {showIcon && <AlertCircle />}
+            <DialogTitle>{title}</DialogTitle>
+            {showDescription && <DialogDescription>{description}</DialogDescription>}
+          </DialogHeader>
+        )}
+        <DialogBody>{bodyContent}</DialogBody>
+        {showFooter && footerButtonConfiguration === "3" && (
+          <DialogFooter className="md:justify-between">
+            <div className="flex w-full flex-col space-y-2 md:hidden">
+              <Button className="w-full">{primaryButtonText}</Button>
+              <Button className="w-full" variant="secondary">
+                {secondaryButtonText}
+              </Button>
+              <Button className="w-full" variant="ghost">
+                {tertiaryButtonText}
+              </Button>
+            </div>
+            <div className="hidden md:block">
+              <Button className="justify-self-start" variant="ghost">
+                {tertiaryButtonText}
+              </Button>
+            </div>
+            <div className="hidden md:flex md:space-x-2">
+              <Button variant="secondary">{secondaryButtonText}</Button>
+              <Button>{primaryButtonText}</Button>
+            </div>
+          </DialogFooter>
+        )}
+        {showFooter && footerButtonConfiguration !== "3" && (
+          <DialogFooter>
+            <div className="flex w-full flex-col space-y-2 md:hidden">
+              <Button className="w-full">{primaryButtonText}</Button>
+              {footerButtonConfiguration !== "1" && (
+                <Button className="w-full" variant="secondary">
+                  {secondaryButtonText}
+                </Button>
+              )}
+            </div>
+            <div className="hidden md:flex md:space-x-2">
+              {footerButtonConfiguration !== "1" && (
+                <Button variant="secondary">{secondaryButtonText}</Button>
+              )}
+              <Button>{primaryButtonText}</Button>
+            </div>
+          </DialogFooter>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export const Default: Story = {
+  render: renderModal,
+  args: {
+    triggerText: "Open Modal",
+    showHeader: true,
+    showIcon: true,
+    title: "Modal Title",
+    showDescription: true,
+    description: "This is a description of what this modal is for.",
+    showFooter: true,
+    footerButtonConfiguration: "3",
+    primaryButtonText: "Confirm",
+    secondaryButtonText: "Cancel",
+    tertiaryButtonText: "Learn more",
+    bodyElementCount: 5,
+    hideCloseButton: false,
+    disableCloseOnOutsideClick: false,
+    width: "default",
+  },
+};
+
+export const OnlyBody: Story = {
+  render: renderModal,
+  args: {
+    triggerText: "Open Modal - Body Only",
+    showHeader: false,
+    showIcon: false,
+    title: "",
+    showDescription: false,
+    description: "",
+    showFooter: false,
+    footerButtonConfiguration: "1",
+    primaryButtonText: "",
+    secondaryButtonText: "",
+    tertiaryButtonText: "",
+    bodyElementCount: 50,
+    hideCloseButton: false,
+    disableCloseOnOutsideClick: false,
+    width: "default",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "A minimal modal with only body content, useful for simple content display.",
+      },
+    },
+  },
+};
+
+export const NoFooter: Story = {
+  render: renderModal,
+  args: {
+    triggerText: "Open Modal - No Footer",
+    showHeader: true,
+    showIcon: true,
+    title: "Modal Without Footer",
+    showDescription: false,
+    description: "This modal has a header and body but no footer buttons.",
+    showFooter: false,
+    footerButtonConfiguration: "1",
+    primaryButtonText: "",
+    secondaryButtonText: "",
+    tertiaryButtonText: "",
+    bodyElementCount: 10,
+    hideCloseButton: false,
+    disableCloseOnOutsideClick: false,
+    width: "default",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Modal with header and body content but no footer actions.",
+      },
+    },
+  },
+};
+
+export const NoHeader: Story = {
+  render: renderModal,
+  args: {
+    triggerText: "Open Modal - No Header",
+    showHeader: false,
+    showIcon: false,
+    title: "",
+    showDescription: false,
+    description: "",
+    showFooter: true,
+    footerButtonConfiguration: "2",
+    primaryButtonText: "Confirm",
+    secondaryButtonText: "Cancel",
+    tertiaryButtonText: "",
+    bodyElementCount: 8,
+    hideCloseButton: false,
+    disableCloseOnOutsideClick: false,
+    width: "default",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Modal without header, useful when you want to focus on content and actions.",
+      },
+    },
+  },
+};
+
+export const RestrictClose: Story = {
+  render: renderModal,
+  args: {
+    triggerText: "Open Modal - Restrict Close",
+    showHeader: true,
+    showIcon: true,
+    title: "Modal with Restricted Close",
+    showDescription: false,
+    description: "This modal hides the close button and prevents closing on outside click.",
+    showFooter: true,
+    footerButtonConfiguration: "2",
+    primaryButtonText: "Save",
+    secondaryButtonText: "Cancel",
+    tertiaryButtonText: "",
+    bodyElementCount: 5,
+    hideCloseButton: true,
+    disableCloseOnOutsideClick: true,
+    width: "default",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Use when you need to force user interaction with the modal content before closing.",
+      },
+    },
+  },
+};
+
+export const WideModal: Story = {
+  render: renderModal,
+  args: {
+    triggerText: "Open Modal - Wide Modal",
+    showHeader: true,
+    showIcon: true,
+    title: "Modal with more width",
+    showDescription: false,
+    description: "This modal has more width than the default modal.",
+    showFooter: true,
+    footerButtonConfiguration: "2",
+    primaryButtonText: "Save",
+    secondaryButtonText: "Cancel",
+    tertiaryButtonText: "",
+    bodyElementCount: 5,
+    hideCloseButton: false,
+    disableCloseOnOutsideClick: false,
+    width: "wide",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Use when you need to force user interaction with the modal content before closing.",
+      },
+    },
+  },
+};

apps/web/modules/ui/components/modal/stories.tsx

@@ -1,106 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-import { Modal } from "./index";
-
-const meta = {
-  title: "UI/Modal",
-  component: Modal,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      description: {
-        component: "Modal component for displaying content in an overlay.",
-      },
-      story: {
-        inline: true,
-      },
-    },
-  },
-  argTypes: {
-    open: { control: "boolean" },
-    setOpen: { action: "setOpen" },
-    title: { control: "text" },
-    noPadding: { control: "boolean" },
-    blur: { control: "boolean" },
-    closeOnOutsideClick: { control: "boolean" },
-    size: { control: { type: "select", options: ["md", "lg"] } },
-    hideCloseButton: { control: "boolean" },
-    restrictOverflow: { control: "boolean" },
-  },
-  args: { setOpen: fn() },
-} satisfies Meta<typeof Modal>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    open: true,
-    children: <div>Default Modal Content</div>,
-    title: "Default Modal",
-  },
-  parameters: {
-    docs: {
-      primary: true,
-    },
-  },
-};
-
-export const LargeSize: Story = {
-  args: {
-    ...Default.args,
-    size: "lg",
-    title: "Large Modal",
-  },
-};
-
-export const NoPadding: Story = {
-  args: {
-    ...Default.args,
-    noPadding: true,
-    title: "Modal without Padding",
-  },
-};
-
-export const WithBlur: Story = {
-  args: {
-    ...Default.args,
-    blur: true,
-    title: "Modal with Blur",
-  },
-};
-
-export const HideCloseButton: Story = {
-  args: {
-    ...Default.args,
-    hideCloseButton: true,
-    title: "Modal without Close Button",
-  },
-};
-
-export const PreventCloseOnOutsideClick: Story = {
-  args: {
-    ...Default.args,
-    closeOnOutsideClick: false,
-    title: "Modal that doesn't close on outside click",
-  },
-};
-
-export const RestrictOverflow: Story = {
-  args: {
-    ...Default.args,
-    restrictOverflow: true,
-    title: "Modal with Restricted Overflow",
-    children: (
-      <div style={{ height: "500px", overflowY: "auto" }}>
-        {Array(50)
-          .fill(0)
-          .map((_, i) => (
-            <p key={i}>Scrollable content line {i + 1}</p>
-          ))}
-      </div>
-    ),
-  },
-};

apps/web/modules/ui/components/upgrade-prompt/index.tsx

@@ -23,7 +23,7 @@ export const UpgradePrompt = ({ title, description, buttons }: UpgradePromptProp
         <KeyIcon className="h-6 w-6 text-slate-900" />
       </div>
       <div className="flex max-w-[80%] flex-col items-center gap-2 text-center">
-        <p className="text-xl font-semibold text-slate-900">{title}</p>
+        <h2 className="text-xl font-semibold text-slate-900">{title}</h2>
         <p className="text-sm text-slate-500">{description}</p>
       </div>
       <div className="flex gap-3">

apps/web/playwright/survey.spec.ts

@@ -103,7 +103,7 @@ test.describe("Survey Create & Submit Response without logic", async () => {
         page.locator("#questionCard-3").getByText(surveys.createAndSubmit.ratingQuestion.highLabel)
       ).toBeVisible();
       expect(await page.getByRole("group", { name: "Choices" }).locator("label").count()).toBe(5);
-      await expect(page.locator("#questionCard-3").getByRole("button", { name: "Next" })).not.toBeVisible();
+      await expect(page.locator("#questionCard-3").getByRole("button", { name: "Next" })).toBeVisible();
       await expect(page.locator("#questionCard-3").getByRole("button", { name: "Back" })).toBeVisible();
       await page.locator("path").nth(3).click();
 
@@ -115,7 +115,7 @@ test.describe("Survey Create & Submit Response without logic", async () => {
       await expect(
         page.locator("#questionCard-4").getByText(surveys.createAndSubmit.npsQuestion.highLabel)
       ).toBeVisible();
-      await expect(page.locator("#questionCard-4").getByRole("button", { name: "Next" })).not.toBeVisible();
+      await expect(page.locator("#questionCard-4").getByRole("button", { name: "Next" })).toBeVisible();
       await expect(page.locator("#questionCard-4").getByRole("button", { name: "Back" })).toBeVisible();
 
       for (let i = 0; i < 11; i++) {
@@ -135,7 +135,7 @@ test.describe("Survey Create & Submit Response without logic", async () => {
       await expect(page.getByText(surveys.createAndSubmit.consentQuestion.checkboxLabel)).toBeVisible();
       await expect(page.locator("#questionCard-6").getByRole("button", { name: "Next" })).toBeVisible();
       await expect(page.locator("#questionCard-6").getByRole("button", { name: "Back" })).toBeVisible();
-      await page.getByText(surveys.createAndSubmit.consentQuestion.checkboxLabel).check();
+      await page.getByLabel(surveys.createAndSubmit.consentQuestion.checkboxLabel).check();
       await page.locator("#questionCard-6").getByRole("button", { name: "Next" }).click();
 
       // Picture Select Question
@@ -760,7 +760,7 @@ test.describe("Testing Survey with advanced logic", async () => {
         page.locator("#questionCard-4").getByText(surveys.createWithLogicAndSubmit.ratingQuestion.highLabel)
       ).toBeVisible();
       expect(await page.getByRole("group", { name: "Choices" }).locator("label").count()).toBe(5);
-      await expect(page.locator("#questionCard-4").getByRole("button", { name: "Next" })).not.toBeVisible();
+      await expect(page.locator("#questionCard-4").getByRole("button", { name: "Next" })).toBeVisible();
       await expect(page.locator("#questionCard-4").getByRole("button", { name: "Back" })).toBeVisible();
       await page.getByRole("group", { name: "Choices" }).locator("path").nth(3).click();
 
@@ -772,7 +772,7 @@ test.describe("Testing Survey with advanced logic", async () => {
       await expect(
         page.locator("#questionCard-5").getByText(surveys.createWithLogicAndSubmit.npsQuestion.highLabel)
       ).toBeVisible();
-      await expect(page.locator("#questionCard-5").getByRole("button", { name: "Next" })).not.toBeVisible();
+      await expect(page.locator("#questionCard-5").getByRole("button", { name: "Next" })).toBeVisible();
       await expect(page.locator("#questionCard-5").getByRole("button", { name: "Back" })).toBeVisible();
 
       for (let i = 0; i < 11; i++) {
@@ -831,7 +831,7 @@ test.describe("Testing Survey with advanced logic", async () => {
       ).toBeVisible();
       await expect(page.locator("#questionCard-9").getByRole("button", { name: "Next" })).toBeVisible();
       await expect(page.locator("#questionCard-9").getByRole("button", { name: "Back" })).toBeVisible();
-      await page.getByText(surveys.createWithLogicAndSubmit.consentQuestion.checkboxLabel).check();
+      await page.getByLabel(surveys.createWithLogicAndSubmit.consentQuestion.checkboxLabel).check();
       await page.locator("#questionCard-9").getByRole("button", { name: "Next" }).click();
 
       // File Upload Question

apps/web/playwright/utils/helper.ts

@@ -418,7 +418,6 @@ export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWith
   await page.getByPlaceholder("Option 1").fill(params.singleSelectQuestion.options[0]);
   await page.getByPlaceholder("Option 2").fill(params.singleSelectQuestion.options[1]);
   await page.getByRole("button", { name: 'Add "Other"', exact: true }).click();
-  await page.getByLabel("Required").click();
 
   // Multi Select Question
   await page
@@ -463,8 +462,6 @@ export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWith
     },
   ]);
 
-  await page.getByLabel("Required").click();
-
   // Rating Question
   await page
     .locator("div")
@@ -510,7 +507,6 @@ export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWith
   await page.getByRole("button", { name: "Add option" }).click();
   await page.getByPlaceholder("Option 5").click();
   await page.getByPlaceholder("Option 5").fill(params.ranking.choices[4]);
-  await page.getByLabel("Required").click();
 
   // Matrix Question
   await page
@@ -549,7 +545,6 @@ export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWith
   await page.getByRole("button", { name: "Statement (Call to Action)" }).click();
   await page.getByPlaceholder("Your question here. Recall").fill(params.ctaQuestion.question);
   await page.getByPlaceholder("Finish").fill(params.ctaQuestion.buttonLabel);
-  await page.getByLabel("Required").click();
 
   // Consent Question
   await page
@@ -578,7 +573,6 @@ export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWith
     .click();
   await page.getByRole("button", { name: "Date" }).click();
   await page.getByLabel("Question*").fill(params.date.question);
-  await page.getByLabel("Required").click();
 
   // Cal Question
   await page
@@ -588,7 +582,6 @@ export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWith
     .click();
   await page.getByRole("button", { name: "Schedule a meeting" }).click();
   await page.getByLabel("Question*").fill(params.cal.question);
-  await page.getByLabel("Required").click();
 
   // Fill Address Question
   await page
@@ -633,8 +626,8 @@ export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWith
   await page.getByRole("option", { name: "secret" }).click();
   await page.locator("#action-2-operator").click();
   await page.getByRole("option", { name: "Assign =" }).click();
-  await page.getByRole("textbox", { name: "Value" }).click();
-  await page.getByRole("textbox", { name: "Value" }).fill("This ");
+  await page.locator("#action-2-value-input").click();
+  await page.locator("#action-2-value-input").fill("1");
 
   // Single Select Question
   await page.getByRole("heading", { name: params.singleSelectQuestion.question }).click();

apps/web/scripts/merge-client-endpoints.ts

@@ -4,11 +4,19 @@ import { logger } from "@formbricks/logger";
 
 // Define the v1 (now v2) client endpoints to be merged
 const v1ClientEndpoints = {
-  "/responses/{responseId}": {
+  "/client/{environmentId}/responses/{responseId}": {
     put: {
+      security: [],
       description:
         "Update an existing response for example when you want to mark a response as finished or you want to change an existing response's value.",
       parameters: [
+        {
+          in: "path",
+          name: "environmentId",
+          required: true,
+          schema: { type: "string" },
+          description: "The ID of the environment.",
+        },
         {
           in: "path",
           name: "responseId",
@@ -57,14 +65,15 @@ const v1ClientEndpoints = {
       tags: ["Client API > Response"],
       servers: [
         {
-          url: "https://app.formbricks.com/api/v2/client",
+          url: "https://app.formbricks.com/api/v2",
           description: "Formbricks Client",
         },
       ],
     },
   },
-  "/{environmentId}/responses": {
+  "/client/{environmentId}/responses": {
     post: {
+      security: [],
       description:
         "Create a response for a survey and its fields with the user's responses. The userId & meta here is optional",
       requestBody: {
@@ -89,14 +98,15 @@ const v1ClientEndpoints = {
       tags: ["Client API > Response"],
       servers: [
         {
-          url: "https://app.formbricks.com/api/v2/client",
+          url: "https://app.formbricks.com/api/v2",
           description: "Formbricks Client",
         },
       ],
     },
   },
-  "/{environmentId}/contacts/{userId}/attributes": {
+  "/client/{environmentId}/contacts/{userId}/attributes": {
     put: {
+      security: [],
       description:
         "Update a contact's attributes in Formbricks to keep them in sync with your app or when you want to set a custom attribute in Formbricks.",
       parameters: [
@@ -138,14 +148,15 @@ const v1ClientEndpoints = {
       tags: ["Client API > Contacts"],
       servers: [
         {
-          url: "https://app.formbricks.com/api/v2/client",
+          url: "https://app.formbricks.com/api/v2",
           description: "Formbricks Client",
         },
       ],
     },
   },
-  "/{environmentId}/identify/contacts/{userId}": {
+  "/client/{environmentId}/identify/contacts/{userId}": {
     get: {
+      security: [],
       description:
         "Retrieves a contact's state including their segments, displays, responses and other tracking information. If the contact doesn't exist, it will be created.",
       parameters: [
@@ -167,14 +178,15 @@ const v1ClientEndpoints = {
       tags: ["Client API > Contacts"],
       servers: [
         {
-          url: "https://app.formbricks.com/api/v2/client",
+          url: "https://app.formbricks.com/api/v2",
           description: "Formbricks Client",
         },
       ],
     },
   },
-  "/{environmentId}/displays": {
+  "/client/{environmentId}/displays": {
     post: {
+      security: [],
       description:
         "Create a new display for a valid survey ID. If a userId is passed, the display is linked to the user.",
       requestBody: {
@@ -199,48 +211,25 @@ const v1ClientEndpoints = {
       tags: ["Client API > Display"],
       servers: [
         {
-          url: "https://app.formbricks.com/api/v2/client",
+          url: "https://app.formbricks.com/api/v2",
           description: "Formbricks Client",
         },
       ],
     },
   },
-  "/{environmentId}/displays/{displayId}": {
-    put: {
-      description:
-        "Update a Display for a user. A use case can be when a user submits a response & you want to link it to an existing display.",
-      parameters: [{ in: "path", name: "displayId", required: true, schema: { type: "string" } }],
-      requestBody: {
-        content: {
-          "application/json": {
-            schema: { example: { responseId: "response123" }, type: "object" },
-          },
-        },
-      },
-      responses: {
-        "200": {
-          content: {
-            "application/json": {
-              example: { displayId: "display123" },
-              schema: { type: "object" },
-            },
-          },
-          description: "OK",
-        },
-      },
-      summary: "Update Display",
-      tags: ["Client API > Display"],
-      servers: [
-        {
-          url: "https://app.formbricks.com/api/v2/client",
-          description: "Formbricks Client",
-        },
-      ],
-    },
-  },
-  "/{environmentId}/environment": {
+  "/client/{environmentId}/environment": {
     get: {
+      security: [],
       description: "Retrieves the environment state to be used in Formbricks SDKs",
+      parameters: [
+        {
+          in: "path",
+          name: "environmentId",
+          required: true,
+          schema: { type: "string" },
+          description: "The ID of the environment.",
+        },
+      ],
       responses: {
         "200": {
           content: {
@@ -256,14 +245,15 @@ const v1ClientEndpoints = {
       tags: ["Client API > Environment"],
       servers: [
         {
-          url: "https://app.formbricks.com/api/v2/client",
+          url: "https://app.formbricks.com/api/v2",
           description: "Formbricks Client",
         },
       ],
     },
   },
-  "/{environmentId}/user": {
+  "/client/{environmentId}/user": {
     post: {
+      security: [],
       description:
         "Endpoint for creating or identifying a user within the specified environment. If the user already exists, this will identify them and potentially update user attributes. If they don't exist, it will create a new user.",
       requestBody: {
@@ -288,14 +278,15 @@ const v1ClientEndpoints = {
       tags: ["Client API > User"],
       servers: [
         {
-          url: "https://app.formbricks.com/api/v2/client",
+          url: "https://app.formbricks.com/api/v2",
           description: "Formbricks Client",
         },
       ],
     },
   },
-  "/{environmentId}/storage": {
+  "/client/{environmentId}/storage": {
     post: {
+      security: [],
       summary: "Upload Private File",
       description:
         "API endpoint for uploading private files. Uploaded files are kept private so that only users with access to the specified environment can retrieve them. The endpoint validates the survey ID, file name, and file type from the request body, and returns a signed URL for S3 uploads along with a local upload URL.",
@@ -442,14 +433,15 @@ const v1ClientEndpoints = {
       },
       servers: [
         {
-          url: "https://app.formbricks.com/api/v2/client",
+          url: "https://app.formbricks.com/api/v2",
           description: "Formbricks API Server",
         },
       ],
     },
   },
-  "/{environmentId}/storage/local": {
+  "/client/{environmentId}/storage/local": {
     post: {
+      security: [],
       summary: "Upload Private File to Local Storage",
       description:
         'API endpoint for uploading private files to local storage. The request must include a valid signature, UUID, and timestamp to verify the upload. The file is provided as a Base64 encoded string in the request body. The "Content-Type" header must be set to a valid MIME type, and the file data must be a valid file object (buffer).',
@@ -478,7 +470,8 @@ const v1ClientEndpoints = {
                 },
                 fileName: {
                   type: "string",
-                  description: "The URI encoded file name.",
+                  description:
+                    "This must be the `fileName` returned from the [Upload Private File](/api-v2-reference/client-api->-file-upload/upload-private-file) endpoint (Step 1).",
                 },
                 fileType: {
                   type: "string",

docker/formbricks.sh

@@ -197,6 +197,7 @@ tls:
       alpnProtocols:
         - h2
         - http/1.1
+        - acme-tls/1
 EOT
 
   echo "💡 Created traefik.yaml and traefik-dynamic.yaml file."

docs/api-v2-reference/openapi.yml

@@ -34,11 +34,18 @@ tags:
 security:
   - apiKeyAuth: []
 paths:
-  /responses/{responseId}:
+  /client/{environmentId}/responses/{responseId}:
     put:
+      security: []
       description: Update an existing response for example when you want to mark a
         response as finished or you want to change an existing response's value.
       parameters:
+        - in: path
+          name: environmentId
+          required: true
+          schema:
+            type: string
+          description: The ID of the environment.
         - in: path
           name: responseId
           required: true
@@ -77,10 +84,11 @@ paths:
       tags:
         - Client API > Response
       servers:
-        - url: https://app.formbricks.com/api/v2/client
+        - url: https://app.formbricks.com/api/v2
           description: Formbricks Client
-  /{environmentId}/responses:
+  /client/{environmentId}/responses:
     post:
+      security: []
       description: Create a response for a survey and its fields with the user's
         responses. The userId & meta here is optional
       requestBody:
@@ -104,10 +112,11 @@ paths:
       tags:
         - Client API > Response
       servers:
-        - url: https://app.formbricks.com/api/v2/client
+        - url: https://app.formbricks.com/api/v2
           description: Formbricks Client
-  /{environmentId}/contacts/{userId}/attributes:
+  /client/{environmentId}/contacts/{userId}/attributes:
     put:
+      security: []
       description: Update a contact's attributes in Formbricks to keep them in sync
         with your app or when you want to set a custom attribute in Formbricks.
       parameters:
@@ -152,10 +161,11 @@ paths:
       tags:
         - Client API > Contacts
       servers:
-        - url: https://app.formbricks.com/api/v2/client
+        - url: https://app.formbricks.com/api/v2
           description: Formbricks Client
-  /{environmentId}/identify/contacts/{userId}:
+  /client/{environmentId}/identify/contacts/{userId}:
     get:
+      security: []
       description: Retrieves a contact's state including their segments, displays,
         responses and other tracking information. If the contact doesn't exist,
         it will be created.
@@ -184,10 +194,11 @@ paths:
       tags:
         - Client API > Contacts
       servers:
-        - url: https://app.formbricks.com/api/v2/client
+        - url: https://app.formbricks.com/api/v2
           description: Formbricks Client
-  /{environmentId}/displays:
+  /client/{environmentId}/displays:
     post:
+      security: []
       description: Create a new display for a valid survey ID. If a userId is passed,
         the display is linked to the user.
       requestBody:
@@ -211,43 +222,19 @@ paths:
       tags:
         - Client API > Display
       servers:
-        - url: https://app.formbricks.com/api/v2/client
+        - url: https://app.formbricks.com/api/v2
           description: Formbricks Client
-  /{environmentId}/displays/{displayId}:
-    put:
-      description: Update a Display for a user. A use case can be when a user submits
-        a response & you want to link it to an existing display.
+  /client/{environmentId}/environment:
+    get:
+      security: []
+      description: Retrieves the environment state to be used in Formbricks SDKs
       parameters:
         - in: path
-          name: displayId
+          name: environmentId
           required: true
           schema:
             type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              example:
-                responseId: response123
-              type: object
-      responses:
-        "200":
-          content:
-            application/json:
-              example:
-                displayId: display123
-              schema:
-                type: object
-          description: OK
-      summary: Update Display
-      tags:
-        - Client API > Display
-      servers:
-        - url: https://app.formbricks.com/api/v2/client
-          description: Formbricks Client
-  /{environmentId}/environment:
-    get:
-      description: Retrieves the environment state to be used in Formbricks SDKs
+          description: The ID of the environment.
       responses:
         "200":
           content:
@@ -262,10 +249,11 @@ paths:
       tags:
         - Client API > Environment
       servers:
-        - url: https://app.formbricks.com/api/v2/client
+        - url: https://app.formbricks.com/api/v2
           description: Formbricks Client
-  /{environmentId}/user:
+  /client/{environmentId}/user:
     post:
+      security: []
       description: Endpoint for creating or identifying a user within the specified
         environment. If the user already exists, this will identify them and
         potentially update user attributes. If they don't exist, it will create
@@ -292,10 +280,11 @@ paths:
       tags:
         - Client API > User
       servers:
-        - url: https://app.formbricks.com/api/v2/client
+        - url: https://app.formbricks.com/api/v2
           description: Formbricks Client
-  /{environmentId}/storage:
+  /client/{environmentId}/storage:
     post:
+      security: []
       summary: Upload Private File
       description: API endpoint for uploading private files. Uploaded files are kept
         private so that only users with access to the specified environment can
@@ -402,10 +391,11 @@ paths:
                 example:
                   error: Survey survey123 not found
       servers:
-        - url: https://app.formbricks.com/api/v2/client
+        - url: https://app.formbricks.com/api/v2
           description: Formbricks API Server
-  /{environmentId}/storage/local:
+  /client/{environmentId}/storage/local:
     post:
+      security: []
       summary: Upload Private File to Local Storage
       description: API endpoint for uploading private files to local storage. The
         request must include a valid signature, UUID, and timestamp to verify
@@ -433,7 +423,9 @@ paths:
                   description: The ID of the survey associated with the file.
                 fileName:
                   type: string
-                  description: The URI encoded file name.
+                  description: This must be the `fileName` returned from the [Upload Private
+                    File](/api-v2-reference/client-api->-file-upload/upload-private-file)
+                    endpoint (Step 1).
                 fileType:
                   type: string
                   description: The MIME type of the file.
@@ -1531,12 +1523,15 @@ paths:
     put:
       operationId: uploadBulkContacts
       summary: Upload Bulk Contacts
-      description: Uploads contacts in bulk
+      description: Uploads contacts in bulk. Each contact in the payload must have an
+        'email' attribute present in their attributes array. The email attribute
+        is mandatory and must be a valid email format.
       tags:
         - Management API > Contacts
       requestBody:
         required: true
-        description: The contacts to upload
+        description: The contacts to upload. Each contact **must include an 'email'
+          attribute** in their attributes array.
         content:
           application/json:
             schema:
@@ -1571,10 +1566,39 @@ paths:
                             - value
                     required:
                       - attributes
-                  maxItems: 1000
+                  maxItems: 250
               required:
                 - environmentId
                 - contacts
+            example:
+              environmentId: env_01h2xce9q8p3w4x5y6z7a8b9c0
+              contacts:
+                - attributes:
+                    - attributeKey:
+                        key: email
+                        name: Email Address
+                      value: john.doe@example.com
+                    - attributeKey:
+                        key: firstName
+                        name: First Name
+                      value: John
+                    - attributeKey:
+                        key: lastName
+                        name: Last Name
+                      value: Doe
+                - attributes:
+                    - attributeKey:
+                        key: email
+                        name: Email Address
+                      value: jane.smith@example.com
+                    - attributeKey:
+                        key: firstName
+                        name: First Name
+                      value: Jane
+                    - attributeKey:
+                        key: lastName
+                        name: Last Name
+                      value: Smith
       responses:
         "200":
           description: Contacts uploaded successfully.
@@ -4383,6 +4407,22 @@ components:
             - enabled
             - message
           description: Email verification configuration (deprecated)
+        recaptcha:
+          type:
+            - object
+            - "null"
+          properties:
+            enabled:
+              type: boolean
+            threshold:
+              type: number
+              multipleOf: 0.1
+              minimum: 0.1
+              maximum: 0.9
+          required:
+            - enabled
+            - threshold
+          description: Google reCAPTCHA configuration
         displayPercentage:
           type:
             - number
@@ -4431,6 +4471,7 @@ components:
         - inlineTriggers
         - isBackButtonHidden
         - verifyEmail
+        - recaptcha
         - displayPercentage
         - questions
     webhook:

infra/formbricks-cloud-helm/values-staging.yaml.gotmpl

@@ -74,6 +74,8 @@ cronJob:
 
 ## Deployment & Autoscaling
 deployment:
+  image:
+    pullPolicy: Always
   resources:
     limits:
       cpu: 2
@@ -132,10 +134,9 @@ externalSecret:
 ingress:
   annotations:
     alb.ingress.kubernetes.io/certificate-arn: {{ requiredEnv "FORMBRICKS_INGRESS_CERT_ARN" }}
-    alb.ingress.kubernetes.io/group.name: formbricks-stage
+    alb.ingress.kubernetes.io/group.name: internal
     alb.ingress.kubernetes.io/healthcheck-path: /health
     alb.ingress.kubernetes.io/listen-ports: '[{"HTTP": 80}, {"HTTPS": 443}]'
-    alb.ingress.kubernetes.io/scheme: internet-facing
     alb.ingress.kubernetes.io/ssl-policy: ELBSecurityPolicy-TLS13-1-2-Res-2021-06
     alb.ingress.kubernetes.io/ssl-redirect: "443"
     alb.ingress.kubernetes.io/target-type: ip

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

@@ -1,3 +1,4 @@
+import { cn } from "@/lib/utils";
 import { checkForLoomUrl, checkForVimeoUrl, checkForYoutubeUrl, convertToEmbedUrl } from "@/lib/video-upload";
 import { useState } from "preact/hooks";
 
@@ -26,7 +27,7 @@ export function QuestionMedia({ imgUrl, videoUrl, altText = "Image" }: QuestionM
   const [isLoading, setIsLoading] = useState(true);
 
   return (
-    <div className="fb-group/image fb-relative fb-mb-4 fb-block fb-min-h-40 fb-rounded-md">
+    <div className="fb-group/image fb-relative fb-mb-6 fb-block fb-min-h-40 fb-rounded-md">
       {isLoading ? (
         <div className="fb-absolute fb-inset-auto fb-flex fb-h-full fb-w-full fb-animate-pulse fb-items-center fb-justify-center fb-rounded-md fb-bg-slate-200" />
       ) : null}
@@ -35,10 +36,16 @@ export function QuestionMedia({ imgUrl, videoUrl, altText = "Image" }: QuestionM
           key={imgUrl}
           src={imgUrl}
           alt={altText}
-          className="fb-rounded-custom"
+          className={cn(
+            "fb-rounded-custom fb-max-h-[40dvh] fb-mx-auto fb-object-contain",
+            isLoading ? "fb-opacity-0" : ""
+          )}
           onLoad={() => {
             setIsLoading(false);
           }}
+          onError={() => {
+            setIsLoading(false);
+          }}
         />
       ) : null}
       {videoUrlWithParams ? (
@@ -48,10 +55,13 @@ export function QuestionMedia({ imgUrl, videoUrl, altText = "Image" }: QuestionM
               src={videoUrlWithParams}
               title="Question Video"
               frameBorder="0"
-              className="fb-rounded-custom fb-aspect-video fb-w-full"
+              className={cn("fb-rounded-custom fb-aspect-video fb-w-full", isLoading ? "fb-opacity-0" : "")}
               onLoad={() => {
                 setIsLoading(false);
               }}
+              onError={() => {
+                setIsLoading(false);
+              }}
               allow="accelerometer; autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
               referrerPolicy="strict-origin-when-cross-origin"
             />

packages/surveys/src/components/questions/address-question.tsx

@@ -43,7 +43,7 @@ export function AddressQuestion({
   currentQuestionId,
   autoFocusEnabled,
   isBackButtonHidden,
-}: AddressQuestionProps) {
+}: Readonly<AddressQuestionProps>) {
   const [startTime, setStartTime] = useState(performance.now());
   const isMediaAvailable = question.imageUrl || question.videoUrl;
   const formRef = useRef<HTMLFormElement>(null);

packages/surveys/src/components/questions/cal-question.tsx

@@ -40,7 +40,7 @@ export function CalQuestion({
   setTtc,
   currentQuestionId,
   isBackButtonHidden,
-}: CalQuestionProps) {
+}: Readonly<CalQuestionProps>) {
   const [startTime, setStartTime] = useState(performance.now());
   const isMediaAvailable = question.imageUrl || question.videoUrl;
   const [errorMessage, setErrorMessage] = useState("");

packages/surveys/src/components/questions/consent-question.tsx

@@ -40,7 +40,7 @@ export function ConsentQuestion({
   currentQuestionId,
   autoFocusEnabled,
   isBackButtonHidden,
-}: ConsentQuestionProps) {
+}: Readonly<ConsentQuestionProps>) {
   const [startTime, setStartTime] = useState(performance.now());
   const isMediaAvailable = question.imageUrl || question.videoUrl;
   const isCurrent = question.id === currentQuestionId;

packages/surveys/src/components/questions/contact-info-question.tsx

@@ -43,7 +43,7 @@ export function ContactInfoQuestion({
   currentQuestionId,
   autoFocusEnabled,
   isBackButtonHidden,
-}: ContactInfoQuestionProps) {
+}: Readonly<ContactInfoQuestionProps>) {
   const [startTime, setStartTime] = useState(performance.now());
   const isMediaAvailable = question.imageUrl || question.videoUrl;
   const formRef = useRef<HTMLFormElement>(null);

packages/surveys/src/components/questions/cta-question.tsx

@@ -41,7 +41,7 @@ export function CTAQuestion({
   currentQuestionId,
   isBackButtonHidden,
   onOpenExternalURL,
-}: CTAQuestionProps) {
+}: Readonly<CTAQuestionProps>) {
   const [startTime, setStartTime] = useState(performance.now());
   const isMediaAvailable = question.imageUrl || question.videoUrl;
   const isCurrent = question.id === currentQuestionId;

packages/surveys/src/components/questions/date-question.tsx

@@ -94,7 +94,7 @@ export function DateQuestion({
   ttc,
   currentQuestionId,
   isBackButtonHidden,
-}: DateQuestionProps) {
+}: Readonly<DateQuestionProps>) {
   const [startTime, setStartTime] = useState(performance.now());
   const [errorMessage, setErrorMessage] = useState("");
   const isMediaAvailable = question.imageUrl || question.videoUrl;

packages/surveys/src/components/questions/file-upload-question.tsx

@@ -14,21 +14,21 @@ import { FileInput } from "../general/file-input";
 import { Subheader } from "../general/subheader";
 
 interface FileUploadQuestionProps {
-  readonly question: TSurveyFileUploadQuestion;
-  readonly value: string[];
-  readonly onChange: (responseData: TResponseData) => void;
-  readonly onSubmit: (data: TResponseData, ttc: TResponseTtc) => void;
-  readonly onBack: () => void;
-  readonly onFileUpload: (file: TJsFileUploadParams["file"], config?: TUploadFileConfig) => Promise<string>;
-  readonly isFirstQuestion: boolean;
-  readonly isLastQuestion: boolean;
-  readonly surveyId: string;
-  readonly languageCode: string;
-  readonly ttc: TResponseTtc;
-  readonly setTtc: (ttc: TResponseTtc) => void;
-  readonly autoFocusEnabled: boolean;
-  readonly currentQuestionId: TSurveyQuestionId;
-  readonly isBackButtonHidden: boolean;
+  question: TSurveyFileUploadQuestion;
+  value: string[];
+  onChange: (responseData: TResponseData) => void;
+  onSubmit: (data: TResponseData, ttc: TResponseTtc) => void;
+  onBack: () => void;
+  onFileUpload: (file: TJsFileUploadParams["file"], config?: TUploadFileConfig) => Promise<string>;
+  isFirstQuestion: boolean;
+  isLastQuestion: boolean;
+  surveyId: string;
+  languageCode: string;
+  ttc: TResponseTtc;
+  setTtc: (ttc: TResponseTtc) => void;
+  autoFocusEnabled: boolean;
+  currentQuestionId: TSurveyQuestionId;
+  isBackButtonHidden: boolean;
 }
 
 export function FileUploadQuestion({
@@ -46,7 +46,7 @@ export function FileUploadQuestion({
   setTtc,
   currentQuestionId,
   isBackButtonHidden,
-}: FileUploadQuestionProps) {
+}: Readonly<FileUploadQuestionProps>) {
   const [startTime, setStartTime] = useState(performance.now());
   const isMediaAvailable = question.imageUrl || question.videoUrl;
   useTtc(question.id, ttc, setTtc, startTime, setStartTime, question.id === currentQuestionId);

packages/surveys/src/components/questions/matrix-question.tsx

@@ -40,7 +40,7 @@ export function MatrixQuestion({
   setTtc,
   currentQuestionId,
   isBackButtonHidden,
-}: MatrixQuestionProps) {
+}: Readonly<MatrixQuestionProps>) {
   const [startTime, setStartTime] = useState(performance.now());
   const isMediaAvailable = question.imageUrl || question.videoUrl;
   useTtc(question.id, ttc, setTtc, startTime, setStartTime, question.id === currentQuestionId);

packages/surveys/src/components/questions/multiple-choice-multi-question.tsx

@@ -41,7 +41,7 @@ export function MultipleChoiceMultiQuestion({
   autoFocusEnabled,
   currentQuestionId,
   isBackButtonHidden,
-}: MultipleChoiceMultiProps) {
+}: Readonly<MultipleChoiceMultiProps>) {
   const [startTime, setStartTime] = useState(performance.now());
   const isMediaAvailable = question.imageUrl || question.videoUrl;
   useTtc(question.id, ttc, setTtc, startTime, setStartTime, question.id === currentQuestionId);

packages/surveys/src/components/questions/multiple-choice-single-question.tsx

@@ -41,7 +41,7 @@ export function MultipleChoiceSingleQuestion({
   autoFocusEnabled,
   currentQuestionId,
   isBackButtonHidden,
-}: MultipleChoiceSingleProps) {
+}: Readonly<MultipleChoiceSingleProps>) {
   const [startTime, setStartTime] = useState(performance.now());
   const [otherSelected, setOtherSelected] = useState(false);
   const otherSpecify = useRef<HTMLInputElement | null>(null);

packages/surveys/src/components/questions/nps-question.tsx

@@ -40,7 +40,7 @@ export function NPSQuestion({
   setTtc,
   currentQuestionId,
   isBackButtonHidden,
-}: NPSQuestionProps) {
+}: Readonly<NPSQuestionProps>) {
   const [startTime, setStartTime] = useState(performance.now());
   const [hoveredNumber, setHoveredNumber] = useState(-1);
   const isMediaAvailable = question.imageUrl || question.videoUrl;

packages/surveys/src/components/questions/open-text-question.tsx

@@ -43,7 +43,7 @@ export function OpenTextQuestion({
   autoFocusEnabled,
   currentQuestionId,
   isBackButtonHidden,
-}: OpenTextQuestionProps) {
+}: Readonly<OpenTextQuestionProps>) {
   const [startTime, setStartTime] = useState(performance.now());
   const [currentLength, setCurrentLength] = useState(value.length || 0);
   const isMediaAvailable = question.imageUrl || question.videoUrl;

packages/surveys/src/components/questions/picture-selection-question.test.tsx

@@ -171,7 +171,7 @@ describe("PictureSelectionQuestion", () => {
     render(<PictureSelectionQuestion {...mockProps} />);
 
     const images = screen.getAllByRole("img");
-    const label = images[0].closest("label");
+    const label = images[0].closest("button");
 
     fireEvent.keyDown(label!, { key: " " });
 

packages/surveys/src/components/questions/picture-selection-question.tsx

@@ -41,8 +41,15 @@ export function PictureSelectionQuestion({
   setTtc,
   currentQuestionId,
   isBackButtonHidden,
-}: PictureSelectionProps) {
+}: Readonly<PictureSelectionProps>) {
   const [startTime, setStartTime] = useState(performance.now());
+  const [loadingImages, setLoadingImages] = useState<Record<string, boolean>>(() => {
+    const initialLoadingState: Record<string, boolean> = {};
+    question.choices.forEach((choice) => {
+      initialLoadingState[choice.id] = true;
+    });
+    return initialLoadingState;
+  });
   const isMediaAvailable = question.imageUrl || question.videoUrl;
   const isCurrent = question.id === currentQuestionId;
   useTtc(question.id, ttc, setTtc, startTime, setStartTime, isCurrent);
@@ -115,35 +122,75 @@ export function PictureSelectionQuestion({
           <div className="fb-mt-4">
             <fieldset>
               <legend className="fb-sr-only">Options</legend>
-              <div className="fb-bg-survey-bg fb-relative fb-grid fb-grid-cols-2 fb-gap-4">
+              <div className="fb-bg-survey-bg fb-relative fb-grid fb-grid-cols-1 sm:fb-grid-cols-2 fb-gap-4">
                 {questionChoices.map((choice) => (
-                  <label
-                    key={choice.id}
-                    tabIndex={isCurrent ? 0 : -1}
-                    htmlFor={choice.id}
-                    onKeyDown={(e) => {
-                      // Accessibility: if spacebar was pressed pass this down to the input
-                      if (e.key === " ") {
-                        e.preventDefault();
-                        document.getElementById(choice.id)?.click();
-                        document.getElementById(choice.id)?.focus();
-                      }
-                    }}
-                    onClick={() => {
-                      handleChange(choice.id);
-                    }}
-                    className={cn(
-                      "fb-relative fb-w-full fb-cursor-pointer fb-overflow-hidden fb-border fb-rounded-custom focus:fb-outline-none fb-aspect-[4/3] fb-min-h-[7rem] fb-max-h-[50vh] focus:fb-border-brand focus:fb-border-4 group/image",
-                      Array.isArray(value) && value.includes(choice.id)
-                        ? "fb-border-brand fb-text-brand fb-z-10 fb-border-4 fb-shadow-sm"
-                        : ""
-                    )}>
-                    <img
-                      src={choice.imageUrl}
-                      id={choice.id}
-                      alt={getOriginalFileNameFromUrl(choice.imageUrl)}
-                      className="fb-h-full fb-w-full fb-object-cover"
-                    />
+                  <div className="fb-relative" key={choice.id}>
+                    <button
+                      type="button"
+                      tabIndex={isCurrent ? 0 : -1}
+                      onKeyDown={(e) => {
+                        // Accessibility: if spacebar was pressed pass this down to the input
+                        if (e.key === " ") {
+                          e.preventDefault();
+                          e.currentTarget.click();
+                          e.currentTarget.focus();
+                        }
+                      }}
+                      onClick={() => {
+                        handleChange(choice.id);
+                      }}
+                      className={cn(
+                        "fb-relative fb-w-full fb-cursor-pointer fb-overflow-hidden fb-border fb-rounded-custom focus-visible:fb-outline-none focus-visible:fb-ring-2 focus-visible:fb-ring-brand focus-visible:fb-ring-offset-2 fb-aspect-[4/3] fb-min-h-[7rem] fb-max-h-[50vh] group/image",
+                        Array.isArray(value) && value.includes(choice.id)
+                          ? "fb-border-brand fb-text-brand fb-z-10 fb-border-4 fb-shadow-sm"
+                          : ""
+                      )}>
+                      {loadingImages[choice.id] && (
+                        <div className="fb-absolute fb-inset-0 fb-flex fb-h-full fb-w-full fb-animate-pulse fb-items-center fb-justify-center fb-rounded-md fb-bg-slate-200" />
+                      )}
+                      <img
+                        src={choice.imageUrl}
+                        id={choice.id}
+                        alt={getOriginalFileNameFromUrl(choice.imageUrl)}
+                        className={cn(
+                          "fb-h-full fb-w-full fb-object-cover",
+                          loadingImages[choice.id] ? "fb-opacity-0" : ""
+                        )}
+                        onLoad={() => {
+                          setLoadingImages((prev) => ({ ...prev, [choice.id]: false }));
+                        }}
+                        onError={() => {
+                          setLoadingImages((prev) => ({ ...prev, [choice.id]: false }));
+                        }}
+                      />
+                      {question.allowMulti ? (
+                        <input
+                          id={`${choice.id}-checked`}
+                          name={`${choice.id}-checkbox`}
+                          type="checkbox"
+                          tabIndex={-1}
+                          checked={value.includes(choice.id)}
+                          className={cn(
+                            "fb-border-border fb-rounded-custom fb-pointer-events-none fb-absolute fb-right-2 fb-top-2 fb-z-20 fb-h-5 fb-w-5 fb-border",
+                            value.includes(choice.id) ? "fb-border-brand fb-text-brand" : ""
+                          )}
+                          required={question.required && value.length ? false : question.required}
+                        />
+                      ) : (
+                        <input
+                          id={`${choice.id}-radio`}
+                          name={`${question.id}`}
+                          type="radio"
+                          tabIndex={-1}
+                          checked={value.includes(choice.id)}
+                          className={cn(
+                            "fb-border-border fb-pointer-events-none fb-absolute fb-right-2 fb-top-2 fb-z-20 fb-h-5 fb-w-5 fb-rounded-full fb-border",
+                            value.includes(choice.id) ? "fb-border-brand fb-text-brand" : ""
+                          )}
+                          required={question.required && value.length ? false : question.required}
+                        />
+                      )}
+                    </button>
                     <a
                       tabIndex={-1}
                       href={choice.imageUrl}
@@ -153,52 +200,25 @@ export function PictureSelectionQuestion({
                       onClick={(e) => {
                         e.stopPropagation();
                       }}
-                      className="fb-absolute fb-bottom-2 fb-right-2 fb-flex fb-items-center fb-gap-2 fb-whitespace-nowrap fb-rounded-md fb-bg-slate-800 fb-bg-opacity-40 fb-p-1.5 fb-text-white fb-opacity-0 fb-backdrop-blur-lg fb-transition fb-duration-300 fb-ease-in-out hover:fb-bg-opacity-65 group-hover/image:fb-opacity-100">
+                      className="fb-absolute fb-bottom-4 fb-right-2 fb-flex fb-items-center fb-gap-2 fb-whitespace-nowrap fb-rounded-md fb-bg-slate-800 fb-bg-opacity-40 fb-p-1.5 fb-text-white fb-backdrop-blur-lg fb-transition fb-duration-300 fb-ease-in-out hover:fb-bg-opacity-65 group-hover/image:fb-opacity-100 fb-z-20">
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
-                        width="16"
-                        height="16"
+                        width="24"
+                        height="24"
                         viewBox="0 0 24 24"
                         fill="none"
                         stroke="currentColor"
                         strokeWidth="1"
                         strokeLinecap="round"
                         strokeLinejoin="round"
-                        className="lucide lucide-expand">
-                        <path d="m21 21-6-6m6 6v-4.8m0 4.8h-4.8" />
-                        <path d="M3 16.2V21m0 0h4.8M3 21l6-6" />
-                        <path d="M21 7.8V3m0 0h-4.8M21 3l-6 6" />
-                        <path d="M3 7.8V3m0 0h4.8M3 3l6 6" />
+                        className="lucide lucide-image-down-icon lucide-image-down">
+                        <path d="M10.3 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10l-3.1-3.1a2 2 0 0 0-2.814.014L6 21" />
+                        <path d="m14 19 3 3v-5.5" />
+                        <path d="m17 22 3-3" />
+                        <circle cx="9" cy="9" r="2" />
                       </svg>
                     </a>
-                    {question.allowMulti ? (
-                      <input
-                        id={`${choice.id}-checked`}
-                        name={`${choice.id}-checkbox`}
-                        type="checkbox"
-                        tabIndex={-1}
-                        checked={value.includes(choice.id)}
-                        className={cn(
-                          "fb-border-border fb-rounded-custom fb-pointer-events-none fb-absolute fb-right-2 fb-top-2 fb-z-20 fb-h-5 fb-w-5 fb-border",
-                          value.includes(choice.id) ? "fb-border-brand fb-text-brand" : ""
-                        )}
-                        required={question.required && value.length ? false : question.required}
-                      />
-                    ) : (
-                      <input
-                        id={`${choice.id}-radio`}
-                        name={`${choice.id}-radio`}
-                        type="radio"
-                        tabIndex={-1}
-                        checked={value.includes(choice.id)}
-                        className={cn(
-                          "fb-border-border fb-pointer-events-none fb-absolute fb-right-2 fb-top-2 fb-z-20 fb-h-5 fb-w-5 fb-rounded-full fb-border",
-                          value.includes(choice.id) ? "fb-border-brand fb-text-brand" : ""
-                        )}
-                        required={question.required && value.length ? false : question.required}
-                      />
-                    )}
-                  </label>
+                  </div>
                 ))}
               </div>
             </fieldset>

packages/surveys/src/components/questions/ranking-question.tsx

@@ -46,7 +46,7 @@ export function RankingQuestion({
   autoFocusEnabled,
   currentQuestionId,
   isBackButtonHidden,
-}: RankingQuestionProps) {
+}: Readonly<RankingQuestionProps>) {
   const [startTime, setStartTime] = useState(performance.now());
   const isCurrent = question.id === currentQuestionId;
   const shuffledChoicesIds = useMemo(() => {

packages/surveys/src/components/wrappers/scrollable-container.tsx

@@ -6,7 +6,7 @@ interface ScrollableContainerProps {
   children: JSX.Element;
 }
 
-export function ScrollableContainer({ children }: ScrollableContainerProps) {
+export function ScrollableContainer({ children }: Readonly<ScrollableContainerProps>) {
   const [isAtBottom, setIsAtBottom] = useState(false);
   const [isAtTop, setIsAtTop] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);

packages/surveys/src/components/wrappers/stacked-cards-container.tsx

@@ -30,7 +30,7 @@ export function StackedCardsContainer({
   setQuestionId,
   shouldResetQuestionId = true,
   fullSizeCards = false,
-}: StackedCardsContainerProps) {
+}: Readonly<StackedCardsContainerProps>) {
   const [hovered, setHovered] = useState(false);
   const highlightBorderColor = survey.styling?.overwriteThemeStyling
     ? survey.styling?.highlightBorderColor?.light

packages/surveys/src/components/wrappers/survey-container.tsx

@@ -20,7 +20,7 @@ export function SurveyContainer({
   onClose,
   clickOutside,
   isOpen = true,
-}: SurveyContainerProps) {
+}: Readonly<SurveyContainerProps>) {
   const modalRef = useRef<HTMLDivElement>(null);
   const isCenter = placement === "center";
   const isModal = mode === "modal";