fix: surveys package resize observer issue (#5907)

Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>

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

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

.cursor/rules/database-performance.mdc

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

.cursor/rules/formbricks-architecture.mdc

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

.cursor/rules/performance-optimization.mdc

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

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

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

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

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

.cursor/rules/testing-patterns.mdc

@@ -0,0 +1,282 @@
+---
+description: 
+globs: 
+alwaysApply: false
+---
+# Testing Patterns & Best Practices
+
+## Test File Naming & Environment
+
+### File Extensions
+- Use `.test.tsx` for React component/hook tests (runs in jsdom environment)
+- Use `.test.ts` for utility/service tests (runs in Node environment)
+- The vitest config uses `environmentMatchGlobs` to automatically set jsdom for `.tsx` files
+
+### Test Structure
+```typescript
+// Import the mocked functions first
+import { useHook } from "@/path/to/hook";
+import { serviceFunction } from "@/path/to/service";
+import { renderHook, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+
+// Mock dependencies
+vi.mock("@/path/to/hook", () => ({
+  useHook: vi.fn(),
+}));
+
+describe("ComponentName", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Setup default mocks
+  });
+
+  test("descriptive test name", async () => {
+    // Test implementation
+  });
+});
+```
+
+## React Hook Testing
+
+### Context Mocking
+When testing hooks that use React Context:
+```typescript
+vi.mocked(useResponseFilter).mockReturnValue({
+  selectedFilter: {
+    filter: [],
+    onlyComplete: false,
+  },
+  setSelectedFilter: vi.fn(),
+  selectedOptions: {
+    questionOptions: [],
+    questionFilterOptions: [],
+  },
+  setSelectedOptions: vi.fn(),
+  dateRange: { from: new Date(), to: new Date() },
+  setDateRange: vi.fn(),
+  resetState: vi.fn(),
+});
+```
+
+### Testing Async Hooks
+- Always use `waitFor` for async operations
+- Test both loading and completed states
+- Verify API calls with correct parameters
+
+```typescript
+test("fetches data on mount", async () => {
+  const { result } = renderHook(() => useHook());
+  
+  expect(result.current.isLoading).toBe(true);
+  
+  await waitFor(() => {
+    expect(result.current.isLoading).toBe(false);
+  });
+  
+  expect(result.current.data).toBe(expectedData);
+  expect(vi.mocked(apiCall)).toHaveBeenCalledWith(expectedParams);
+});
+```
+
+### Testing Hook Dependencies
+To test useEffect dependencies, ensure mocks return different values:
+```typescript
+// First render
+mockGetFormattedFilters.mockReturnValue(mockFilters);
+
+// Change dependency and trigger re-render
+const newMockFilters = { ...mockFilters, finished: true };
+mockGetFormattedFilters.mockReturnValue(newMockFilters);
+rerender();
+```
+
+## Performance Testing
+
+### Race Condition Testing
+Test AbortController implementation:
+```typescript
+test("cancels previous request when new request is made", async () => {
+  let resolveFirst: (value: any) => void;
+  let resolveSecond: (value: any) => void;
+
+  const firstPromise = new Promise((resolve) => {
+    resolveFirst = resolve;
+  });
+  const secondPromise = new Promise((resolve) => {
+    resolveSecond = resolve;
+  });
+
+  vi.mocked(apiCall)
+    .mockReturnValueOnce(firstPromise as any)
+    .mockReturnValueOnce(secondPromise as any);
+
+  const { result } = renderHook(() => useHook());
+  
+  // Trigger second request
+  result.current.refetch();
+  
+  // Resolve in order - first should be cancelled
+  resolveFirst!({ data: 100 });
+  resolveSecond!({ data: 200 });
+
+  await waitFor(() => {
+    expect(result.current.isLoading).toBe(false);
+  });
+
+  // Should have result from second request
+  expect(result.current.data).toBe(200);
+});
+```
+
+### Cleanup Testing
+```typescript
+test("cleans up on unmount", () => {
+  const abortSpy = vi.spyOn(AbortController.prototype, "abort");
+  
+  const { unmount } = renderHook(() => useHook());
+  unmount();
+  
+  expect(abortSpy).toHaveBeenCalled();
+  abortSpy.mockRestore();
+});
+```
+
+## Error Handling Testing
+
+### API Error Testing
+```typescript
+test("handles API errors gracefully", async () => {
+  const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+  vi.mocked(apiCall).mockRejectedValue(new Error("API Error"));
+
+  const { result } = renderHook(() => useHook());
+
+  await waitFor(() => {
+    expect(result.current.isLoading).toBe(false);
+  });
+
+  expect(consoleSpy).toHaveBeenCalledWith("Error message:", expect.any(Error));
+  expect(result.current.data).toBe(fallbackValue);
+  
+  consoleSpy.mockRestore();
+});
+```
+
+### Cancelled Request Testing
+```typescript
+test("does not update state for cancelled requests", async () => {
+  const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+  let rejectFirst: (error: any) => void;
+  const firstPromise = new Promise((_, reject) => {
+    rejectFirst = reject;
+  });
+
+  vi.mocked(apiCall)
+    .mockReturnValueOnce(firstPromise as any)
+    .mockResolvedValueOnce({ data: 42 });
+
+  const { result } = renderHook(() => useHook());
+  result.current.refetch();
+
+  const abortError = new Error("Request cancelled");
+  rejectFirst!(abortError);
+
+  await waitFor(() => {
+    expect(result.current.isLoading).toBe(false);
+  });
+
+  // Should not log error for cancelled request
+  expect(consoleSpy).not.toHaveBeenCalled();
+  consoleSpy.mockRestore();
+});
+```
+
+## Type Safety in Tests
+
+### Mock Type Assertions
+Use type assertions for edge cases:
+```typescript
+vi.mocked(apiCall).mockResolvedValue({
+  data: null as any, // For testing null handling
+});
+
+vi.mocked(apiCall).mockResolvedValue({
+  data: undefined as any, // For testing undefined handling
+});
+```
+
+### Proper Mock Typing
+Ensure mocks match the actual interface:
+```typescript
+const mockSurvey: TSurvey = {
+  id: "survey-123",
+  name: "Test Survey",
+  // ... other required properties
+} as unknown as TSurvey; // Use when partial mocking is needed
+```
+
+## Common Test Patterns
+
+### Testing State Changes
+```typescript
+test("updates state correctly", async () => {
+  const { result } = renderHook(() => useHook());
+  
+  // Initial state
+  expect(result.current.value).toBe(initialValue);
+  
+  // Trigger change
+  result.current.updateValue(newValue);
+  
+  // Verify change
+  expect(result.current.value).toBe(newValue);
+});
+```
+
+### Testing Multiple Scenarios
+```typescript
+test("handles different modes", async () => {
+  // Test regular mode
+  vi.mocked(useParams).mockReturnValue({ surveyId: "123" });
+  const { rerender } = renderHook(() => useHook());
+  
+  await waitFor(() => {
+    expect(vi.mocked(regularApi)).toHaveBeenCalled();
+  });
+  
+  // Test sharing mode
+  vi.mocked(useParams).mockReturnValue({ 
+    surveyId: "123", 
+    sharingKey: "share-123" 
+  });
+  rerender();
+  
+  await waitFor(() => {
+    expect(vi.mocked(sharingApi)).toHaveBeenCalled();
+  });
+});
+```
+
+## Test Organization
+
+### Comprehensive Test Coverage
+For hooks, ensure you test:
+- ✅ Initialization (with/without initial values)
+- ✅ Data fetching (success/error cases)
+- ✅ State updates and refetching
+- ✅ Dependency changes triggering effects
+- ✅ Manual actions (refetch, reset)
+- ✅ Race condition prevention
+- ✅ Cleanup on unmount
+- ✅ Mode switching (if applicable)
+- ✅ Edge cases (null/undefined data)
+
+### Test Naming
+Use descriptive test names that explain the scenario:
+- ✅ "initializes with initial count"
+- ✅ "fetches response count on mount for regular survey"
+- ✅ "cancels previous request when new request is made"
+- ❌ "test hook"
+- ❌ "it works"

.cursor/rules/testing.mdc

@@ -0,0 +1,6 @@
+---
+description: Whenever the user asks to write or update a test file for .tsx or .ts files.
+globs: 
+alwaysApply: false
+---
+Use the rules in this file when writing tests [copilot-instructions.md](mdc:.github/copilot-instructions.md)

.env.example

@@ -211,5 +211,8 @@ UNKEY_ROOT_KEY=
 # It's used automatically by Sentry during the build for authentication when uploading source maps.
 # SENTRY_AUTH_TOKEN=
 
-# Disable the user management from UI 
-# DISABLE_USER_MANAGEMENT=1
+# Configure the minimum role for user management from UI(owner, manager, disabled)
+# USER_MANAGEMENT_MINIMUM_ROLE="manager"
+
+# Configure the maximum age for the session in seconds. Default is 86400 (24 hours)
+# SESSION_MAX_AGE=86400

.github/dependabot.yml

@@ -1,84 +0,0 @@
-# To get started with Dependabot version updates, you'll need to specify which
-# package ecosystems to update and where the package manifests are located.
-# Please see the documentation for all configuration options:
-# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
-
-version: 2
-updates:
-  - package-ecosystem: "npm" # For pnpm monorepos, use npm ecosystem
-    directory: "/" # Root package.json
-    schedule:
-      interval: "weekly"
-    versioning-strategy: increase
-
-  # Apps directory packages
-  - package-ecosystem: "npm"
-    directory: "/apps/demo"
-    schedule:
-      interval: "weekly"
-
-  - package-ecosystem: "npm"
-    directory: "/apps/demo-react-native"
-    schedule:
-      interval: "weekly"
-
-  - package-ecosystem: "npm"
-    directory: "/apps/storybook"
-    schedule:
-      interval: "weekly"
-
-  - package-ecosystem: "npm"
-    directory: "/apps/web"
-    schedule:
-      interval: "weekly"
-
-  # Packages directory
-  - package-ecosystem: "npm"
-    directory: "/packages/database"
-    schedule:
-      interval: "weekly"
-
-  - package-ecosystem: "npm"
-    directory: "/packages/lib"
-    schedule:
-      interval: "weekly"
-
-  - package-ecosystem: "npm"
-    directory: "/packages/types"
-    schedule:
-      interval: "weekly"
-
-  - package-ecosystem: "npm"
-    directory: "/packages/config-eslint"
-    schedule:
-      interval: "weekly"
-
-  - package-ecosystem: "npm"
-    directory: "/packages/config-prettier"
-    schedule:
-      interval: "weekly"
-
-  - package-ecosystem: "npm"
-    directory: "/packages/config-typescript"
-    schedule:
-      interval: "weekly"
-      
-  - package-ecosystem: "npm"
-    directory: "/packages/js-core"
-    schedule:
-      interval: "weekly"
-      
-  - package-ecosystem: "npm"
-    directory: "/packages/surveys"
-    schedule:
-      interval: "weekly"
-      
-  - package-ecosystem: "npm"
-    directory: "/packages/logger"
-    schedule:
-      interval: "weekly"
-
-  - package-ecosystem: "github-actions"
-    directory: "/"
-    schedule:
-      interval: "weekly"

.github/workflows/chromatic.yml

@@ -10,6 +10,11 @@ jobs:
   chromatic:
     name: Run Chromatic
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+      id-token: write
+      actions: read
     steps:
       - name: Harden the runner (Audit all outbound calls)
         uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0

.github/workflows/dependency-review.yml

@@ -24,4 +24,4 @@ jobs:
       - name: 'Checkout Repository'
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
       - name: 'Dependency Review'
-        uses: actions/dependency-review-action@ce3cf9537a52e8119d91fd484ab5b8a807627bf8 # v4.6.0
+        uses: actions/dependency-review-action@38ecb5b593bf0eb19e335c03f97670f792489a8b # v4.7.0

.github/workflows/deploy-formbricks-cloud.yml

@@ -54,7 +54,7 @@ jobs:
           tags: tag:github
 
       - name: Configure AWS Credentials
-        uses: aws-actions/configure-aws-credentials@e3dd6a429d7300a6a4c196c26e071d42e0343502 # v4.0.2
+        uses: aws-actions/configure-aws-credentials@f24d7193d98baebaeacc7e2227925dd47cc267f5 # v4.2.0
         with:
           role-to-assume: ${{ secrets.AWS_ASSUME_ROLE_ARN }}
           aws-region: "eu-central-1"

.github/workflows/e2e.yml

@@ -25,7 +25,6 @@ permissions:
   id-token: write
   contents: read
   actions: read
-  checks: write
 
 jobs:
   build:

.github/workflows/release-docker-github.yml

@@ -20,18 +20,15 @@ env:
   TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
   TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
 
-permissions:
-  contents: read
-
 jobs:
   build:
     runs-on: ubuntu-latest
     permissions:
       contents: read
       packages: write
+      id-token: write
       # This is used to complete the identity challenge
       # with sigstore/fulcio when running outside of PRs.
-      id-token: write
 
     outputs:
       VERSION: ${{ steps.extract_release_tag.outputs.VERSION }}

.github/workflows/release-helm-chart.yml

@@ -4,7 +4,7 @@ on:
   workflow_call:
     inputs:
       VERSION:
-        description: 'The version of the Helm chart to release'
+        description: "The version of the Helm chart to release"
         required: true
         type: string
 

.github/workflows/semantic-pull-requests.yml

@@ -40,7 +40,7 @@ jobs:
             revert
             ossgg
 
-      - uses: marocchino/sticky-pull-request-comment@52423e01640425a022ef5fd42c6fb5f633a02728 # v2.9.1
+      - uses: marocchino/sticky-pull-request-comment@67d0dec7b07ed060a405f9b2a64b8ab319fdd7db # v2.9.2
         # When the previous steps fails, the workflow would stop. By adding this
         # condition you can continue the execution with the populated error message.
         if: always() && (steps.lint_pr_title.outputs.error_message != null)
@@ -59,7 +59,7 @@ jobs:
 
       # Delete a previous comment when the issue has been resolved
       - if: ${{ steps.lint_pr_title.outputs.error_message == null }}
-        uses: marocchino/sticky-pull-request-comment@52423e01640425a022ef5fd42c6fb5f633a02728 # v2.9.1
+        uses: marocchino/sticky-pull-request-comment@67d0dec7b07ed060a405f9b2a64b8ab319fdd7db # v2.9.2
         with:
           header: pr-title-lint-error
           message: |

.github/workflows/sonarqube.yml

@@ -48,7 +48,7 @@ jobs:
         run: |
           pnpm test:coverage
       - name: SonarQube Scan
-        uses: SonarSource/sonarqube-scan-action@aa494459d7c39c106cc77b166de8b4250a32bb97
+        uses: SonarSource/sonarqube-scan-action@2500896589ef8f7247069a56136f8dc177c27ccf
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Needed to get PR information, if any
           SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

.github/workflows/terraform-plan-and-apply.yml

@@ -1,8 +1,8 @@
-name: 'Terraform'
+name: "Terraform"
 
 on:
   workflow_dispatch:
-# TODO: enable it back when migration is completed.
+  # TODO: enable it back when migration is completed.
   push:
     branches:
       - main
@@ -14,14 +14,13 @@ on:
     paths:
       - "infra/terraform/**"
 
-permissions:
-  id-token: write
-  contents: write
-  pull-requests: write
-
 jobs:
   terraform:
     runs-on: ubuntu-latest
+    permissions:
+      id-token: write
+      contents: read
+      pull-requests: write
     env:
       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
     steps:
@@ -41,7 +40,7 @@ jobs:
           tags: tag:github
 
       - name: Configure AWS Credentials
-        uses: aws-actions/configure-aws-credentials@e3dd6a429d7300a6a4c196c26e071d42e0343502 # v4.0.2
+        uses: aws-actions/configure-aws-credentials@f24d7193d98baebaeacc7e2227925dd47cc267f5 # v4.2.0
         with:
           role-to-assume: ${{ secrets.AWS_ASSUME_ROLE_ARN }}
           aws-region: "eu-central-1"
@@ -71,7 +70,7 @@ jobs:
         working-directory: infra/terraform
 
       - name: Post PR comment
-        uses: borchero/terraform-plan-comment@3399d8dbae8b05185e815e02361ede2949cd99c4 # v2.4.0
+        uses: borchero/terraform-plan-comment@434458316f8f24dd073cd2561c436cce41dc8f34 # v2.4.1
         if: always() && github.ref != 'refs/heads/main' && (steps.plan.outcome == 'success' || steps.plan.outcome == 'failure')
         with:
           token: ${{ github.token }}
@@ -83,4 +82,3 @@ jobs:
         if: github.ref == 'refs/heads/main' && github.event_name == 'push'
         run: terraform apply .planfile
         working-directory: "infra/terraform"
-

apps/storybook/package.json

@@ -11,9 +11,7 @@
     "clean": "rimraf .turbo node_modules dist storybook-static"
   },
   "dependencies": {
-    "eslint-plugin-react-refresh": "0.4.20",
-    "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "eslint-plugin-react-refresh": "0.4.20"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "3.2.6",

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

@@ -44,7 +44,7 @@ const Page = async (props: ConnectPageProps) => {
         channel={channel}
       />
       <Button
-        className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+        className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
         variant="ghost"
         asChild>
         <Link href={`/environments/${environment.id}`}>

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

@@ -85,6 +85,7 @@ vi.mock("@/lib/constants", () => ({
   OIDC_AUTH_URL: "https://mock-oidc-auth-url.com",
   OIDC_ISSUER: "https://mock-oidc-issuer.com",
   OIDC_SIGNING_ALGORITHM: "RS256",
+  SESSION_MAX_AGE: 1000,
 }));
 
 vi.mock("next/navigation", () => ({

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

@@ -49,7 +49,7 @@ const Page = async (props: XMTemplatePageProps) => {
       <XMTemplateList project={project} user={user} environmentId={environment.id} />
       {projects.length >= 2 && (
         <Button
-          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
           variant="ghost"
           asChild>
           <Link href={`/environments/${environment.id}/surveys`}>

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

@@ -88,6 +88,7 @@ vi.mock("@/lib/constants", () => ({
   OIDC_AUTH_URL: "https://mock-oidc-auth-url.com",
   OIDC_ISSUER: "https://mock-oidc-issuer.com",
   OIDC_SIGNING_ALGORITHM: "RS256",
+  SESSION_MAX_AGE: 1000,
 }));
 
 vi.mock("@/lib/environment/service");

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

@@ -97,6 +97,7 @@ vi.mock("@/lib/constants", () => ({
   OIDC_AUTH_URL: "https://mock-oidc-auth-url.com",
   OIDC_ISSUER: "https://mock-oidc-issuer.com",
   OIDC_SIGNING_ALGORITHM: "RS256",
+  SESSION_MAX_AGE: 1000,
 }));
 
 vi.mock("@/app/(app)/(onboarding)/organizations/[organizationId]/landing/components/landing-sidebar", () => ({

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

@@ -34,6 +34,7 @@ vi.mock("@/lib/constants", () => ({
   OIDC_SIGNING_ALGORITHM: "test-oidc-signing-algorithm",
   WEBAPP_URL: "test-webapp-url",
   IS_PRODUCTION: false,
+  SESSION_MAX_AGE: 1000,
 }));
 
 vi.mock("next-auth", () => ({

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

@@ -50,7 +50,7 @@ const Page = async (props: ChannelPageProps) => {
       <OnboardingOptionsContainer options={channelOptions} />
       {projects.length >= 1 && (
         <Button
-          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
           variant="ghost"
           asChild>
           <Link href={"/"}>

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

@@ -33,6 +33,7 @@ vi.mock("@/lib/constants", () => ({
   OIDC_SIGNING_ALGORITHM: "test-oidc-signing-algorithm",
   WEBAPP_URL: "test-webapp-url",
   IS_PRODUCTION: false,
+  SESSION_MAX_AGE: 1000,
 }));
 
 // Mock dependencies

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

@@ -225,7 +225,7 @@ export const ProjectSettings = ({
             alt="Logo"
             width={256}
             height={56}
-            className="absolute top-2 left-2 -mb-6 h-20 w-auto max-w-64 rounded-lg border object-contain p-1"
+            className="absolute left-2 top-2 -mb-6 h-20 w-auto max-w-64 rounded-lg border object-contain p-1"
           />
         )}
         <p className="text-sm text-slate-400">{t("common.preview")}</p>

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

@@ -25,6 +25,7 @@ vi.mock("@/lib/constants", () => ({
   SMTP_HOST: "mock-smtp-host",
   SMTP_PORT: "mock-smtp-port",
   IS_POSTHOG_CONFIGURED: true,
+  SESSION_MAX_AGE: 1000,
 }));
 
 describe("Contact Page Re-export", () => {

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

@@ -23,7 +23,7 @@ export const ActionClassDataRow = ({
           </div>
         </div>
       </div>
-      <div className="col-span-2 my-auto text-center text-sm whitespace-nowrap text-slate-500">
+      <div className="col-span-2 my-auto whitespace-nowrap text-center text-sm text-slate-500">
         {timeSince(actionClass.createdAt.toString(), locale)}
       </div>
       <div className="text-center"></div>

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

@@ -53,7 +53,7 @@ export const WidgetStatusIndicator = ({ environment }: WidgetStatusIndicatorProp
         <currentStatus.icon />
       </div>
       <p className="text-md font-bold text-slate-800 md:text-xl">{currentStatus.title}</p>
-      <p className="w-2/3 text-sm text-balance text-slate-600">{currentStatus.subtitle}</p>
+      <p className="w-2/3 text-balance text-sm text-slate-600">{currentStatus.subtitle}</p>
       {status === "notImplemented" && (
         <Button variant="outline" size="sm" className="bg-white" onClick={() => router.refresh()}>
           <RotateCcwIcon />

apps/web/app/(app)/environments/[environmentId]/integrations/airtable/page.test.tsx

@@ -48,6 +48,7 @@ vi.mock("@/lib/constants", () => ({
   OIDC_CLIENT_SECRET: "test-oidc-client-secret",
   OIDC_SIGNING_ALGORITHM: "test-oidc-signing-algorithm",
   SENTRY_DSN: "mock-sentry-dsn",
+  SESSION_MAX_AGE: 1000,
 }));
 
 vi.mock("@/lib/integration/service");

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

@@ -255,7 +255,7 @@ export const AddIntegrationModal = ({
                 <div className="space-y-4">
                   <div>
                     <Label htmlFor="Surveys">{t("common.questions")}</Label>
-                    <div className="mt-1 max-h-[15vh] overflow-x-hidden overflow-y-auto rounded-lg border border-slate-200">
+                    <div className="mt-1 max-h-[15vh] overflow-y-auto overflow-x-hidden rounded-lg border border-slate-200">
                       <div className="grid content-center rounded-lg bg-slate-50 p-3 text-left text-sm text-slate-900">
                         {replaceHeadlineRecall(selectedSurvey, "default")?.questions.map((question) => (
                           <div key={question.id} className="my-1 flex items-center space-x-2">

apps/web/app/(app)/environments/[environmentId]/integrations/notion/components/NotionWrapper.test.tsx

@@ -31,6 +31,7 @@ vi.mock("@/lib/constants", () => ({
   SENTRY_DSN: "mock-sentry-dsn",
   GOOGLE_SHEETS_CLIENT_SECRET: "test-client-secret",
   GOOGLE_SHEETS_REDIRECT_URL: "test-redirect-url",
+  SESSION_MAX_AGE: 1000,
 }));
 
 // Mock child components

apps/web/app/(app)/environments/[environmentId]/project/(setup)/app-connection/page.test.tsx

@@ -24,6 +24,7 @@ vi.mock("@/lib/constants", () => ({
   WEBAPP_URL: "test-webapp-url",
   IS_PRODUCTION: false,
   SENTRY_DSN: "mock-sentry-dsn",
+  SESSION_MAX_AGE: 1000,
 }));
 
 describe("AppConnectionPage Re-export", () => {

apps/web/app/(app)/environments/[environmentId]/project/general/page.test.tsx

@@ -24,6 +24,7 @@ vi.mock("@/lib/constants", () => ({
   WEBAPP_URL: "test-webapp-url",
   IS_PRODUCTION: false,
   SENTRY_DSN: "mock-sentry-dsn",
+  SESSION_MAX_AGE: 1000,
 }));
 
 describe("GeneralSettingsPage re-export", () => {

apps/web/app/(app)/environments/[environmentId]/project/languages/page.test.tsx

@@ -24,6 +24,7 @@ vi.mock("@/lib/constants", () => ({
   WEBAPP_URL: "test-webapp-url",
   IS_PRODUCTION: false,
   SENTRY_DSN: "mock-sentry-dsn",
+  SESSION_MAX_AGE: 1000,
 }));
 
 describe("LanguagesPage re-export", () => {

apps/web/app/(app)/environments/[environmentId]/project/look/page.test.tsx

@@ -24,6 +24,7 @@ vi.mock("@/lib/constants", () => ({
   WEBAPP_URL: "test-webapp-url",
   IS_PRODUCTION: false,
   SENTRY_DSN: "mock-sentry-dsn",
+  SESSION_MAX_AGE: 1000,
 }));
 
 describe("ProjectLookSettingsPage re-export", () => {

apps/web/app/(app)/environments/[environmentId]/project/tags/page.test.tsx

@@ -24,6 +24,7 @@ vi.mock("@/lib/constants", () => ({
   WEBAPP_URL: "test-webapp-url",
   IS_PRODUCTION: false,
   SENTRY_DSN: "mock-sentry-dsn",
+  SESSION_MAX_AGE: 1000,
 }));
 
 describe("TagsPage re-export", () => {

apps/web/app/(app)/environments/[environmentId]/project/teams/page.test.tsx

@@ -24,6 +24,7 @@ vi.mock("@/lib/constants", () => ({
   WEBAPP_URL: "test-webapp-url",
   IS_PRODUCTION: false,
   SENTRY_DSN: "mock-sentry-dsn",
+  SESSION_MAX_AGE: 1000,
 }));
 
 describe("ProjectTeams re-export", () => {

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

@@ -40,6 +40,7 @@ vi.mock("@/lib/constants", () => ({
   WEBAPP_URL: "test-webapp-url",
   IS_PRODUCTION: false,
   SENTRY_DSN: "mock-sentry-dsn",
+  SESSION_MAX_AGE: 1000,
 }));
 
 const mockGetOrganizationByEnvironmentId = vi.mocked(getOrganizationByEnvironmentId);

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

@@ -1,17 +1,87 @@
 "use server";
 
+import {
+  getIsEmailUnique,
+  verifyUserPassword,
+} from "@/app/(app)/environments/[environmentId]/settings/(account)/profile/lib/user";
+import { EMAIL_VERIFICATION_DISABLED } from "@/lib/constants";
 import { deleteFile } from "@/lib/storage/service";
 import { getFileNameWithIdFromUrl } from "@/lib/storage/utils";
 import { updateUser } from "@/lib/user/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
+import { rateLimit } from "@/lib/utils/rate-limit";
+import { updateBrevoCustomer } from "@/modules/auth/lib/brevo";
+import { sendVerificationNewEmail } from "@/modules/email";
 import { z } from "zod";
 import { ZId } from "@formbricks/types/common";
-import { ZUserUpdateInput } from "@formbricks/types/user";
+import {
+  AuthenticationError,
+  AuthorizationError,
+  OperationNotAllowedError,
+  TooManyRequestsError,
+} from "@formbricks/types/errors";
+import { TUserUpdateInput, ZUserPassword, ZUserUpdateInput } from "@formbricks/types/user";
+
+const limiter = rateLimit({
+  interval: 60 * 60, // 1 hour
+  allowedPerInterval: 3, // max 3 calls for email verification per hour
+});
 
 export const updateUserAction = authenticatedActionClient
-  .schema(ZUserUpdateInput.pick({ name: true, locale: true }))
+  .schema(
+    ZUserUpdateInput.pick({ name: true, email: true, locale: true }).extend({
+      password: ZUserPassword.optional(),
+    })
+  )
   .action(async ({ parsedInput, ctx }) => {
-    return await updateUser(ctx.user.id, parsedInput);
+    const inputEmail = parsedInput.email?.trim().toLowerCase();
+
+    let payload: TUserUpdateInput = {
+      ...(parsedInput.name && { name: parsedInput.name }),
+      ...(parsedInput.locale && { locale: parsedInput.locale }),
+    };
+
+    // Only process email update if a new email is provided and it's different from current email
+    if (inputEmail && ctx.user.email !== inputEmail) {
+      // Check rate limit
+      try {
+        await limiter(ctx.user.id);
+      } catch {
+        throw new TooManyRequestsError("Too many requests");
+      }
+      if (ctx.user.identityProvider !== "email") {
+        throw new OperationNotAllowedError("Email update is not allowed for non-credential users.");
+      }
+
+      if (!parsedInput.password) {
+        throw new AuthenticationError("Password is required to update email.");
+      }
+
+      const isCorrectPassword = await verifyUserPassword(ctx.user.id, parsedInput.password);
+      if (!isCorrectPassword) {
+        throw new AuthorizationError("Incorrect credentials");
+      }
+
+      // Check if the new email is unique, no user exists with the new email
+      const isEmailUnique = await getIsEmailUnique(inputEmail);
+
+      // If the new email is unique, proceed with the email update
+      if (isEmailUnique) {
+        if (EMAIL_VERIFICATION_DISABLED) {
+          payload.email = inputEmail;
+          await updateBrevoCustomer({ id: ctx.user.id, email: inputEmail });
+        } else {
+          await sendVerificationNewEmail(ctx.user.id, inputEmail);
+        }
+      }
+    }
+
+    // Only proceed with updateUser if we have actual changes to make
+    if (Object.keys(payload).length > 0) {
+      await updateUser(ctx.user.id, payload);
+    }
+
+    return true;
   });
 
 const ZUpdateAvatarAction = z.object({

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/components/EditProfileDetailsForm.test.tsx

@@ -50,11 +50,10 @@ describe("EditProfileDetailsForm", () => {
   test("renders with initial user data and updates successfully", async () => {
     vi.mocked(updateUserAction).mockResolvedValue({ ...mockUser, name: "New Name" } as any);
 
-    render(<EditProfileDetailsForm user={mockUser} />);
+    render(<EditProfileDetailsForm user={mockUser} emailVerificationDisabled={true} />);
 
     const nameInput = screen.getByPlaceholderText("common.full_name");
     expect(nameInput).toHaveValue(mockUser.name);
-    expect(screen.getByDisplayValue(mockUser.email)).toBeDisabled();
     // Check initial language (English)
     expect(screen.getByText("English (US)")).toBeInTheDocument();
 
@@ -72,7 +71,11 @@ describe("EditProfileDetailsForm", () => {
     await userEvent.click(updateButton);
 
     await waitFor(() => {
-      expect(updateUserAction).toHaveBeenCalledWith({ name: "New Name", locale: "de-DE" });
+      expect(updateUserAction).toHaveBeenCalledWith({
+        name: "New Name",
+        locale: "de-DE",
+        email: mockUser.email,
+      });
     });
     await waitFor(() => {
       expect(toast.success).toHaveBeenCalledWith(
@@ -88,7 +91,7 @@ describe("EditProfileDetailsForm", () => {
     const errorMessage = "Update failed";
     vi.mocked(updateUserAction).mockRejectedValue(new Error(errorMessage));
 
-    render(<EditProfileDetailsForm user={mockUser} />);
+    render(<EditProfileDetailsForm user={mockUser} emailVerificationDisabled={false} />);
 
     const nameInput = screen.getByPlaceholderText("common.full_name");
     await userEvent.clear(nameInput);
@@ -106,7 +109,7 @@ describe("EditProfileDetailsForm", () => {
   });
 
   test("update button is disabled initially and enables on change", async () => {
-    render(<EditProfileDetailsForm user={mockUser} />);
+    render(<EditProfileDetailsForm user={mockUser} emailVerificationDisabled={false} />);
     const updateButton = screen.getByText("common.update");
     expect(updateButton).toBeDisabled();
 

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/components/EditProfileDetailsForm.tsx

@@ -1,136 +1,225 @@
 "use client";
 
+import { PasswordConfirmationModal } from "@/app/(app)/environments/[environmentId]/settings/(account)/profile/components/password-confirmation-modal";
 import { appLanguages } from "@/lib/i18n/utils";
+import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { Button } from "@/modules/ui/components/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuTrigger,
 } from "@/modules/ui/components/dropdown-menu";
-import {
-  FormControl,
-  FormError,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormProvider,
-} from "@/modules/ui/components/form";
+import { FormControl, FormError, FormField, FormItem, FormLabel } from "@/modules/ui/components/form";
 import { Input } from "@/modules/ui/components/input";
-import { Label } from "@/modules/ui/components/label";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useTranslate } from "@tolgee/react";
 import { ChevronDownIcon } from "lucide-react";
-import { SubmitHandler, useForm } from "react-hook-form";
+import { signOut } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
 import toast from "react-hot-toast";
 import { z } from "zod";
-import { TUser, ZUser } from "@formbricks/types/user";
+import { TUser, TUserUpdateInput, ZUser, ZUserEmail } from "@formbricks/types/user";
 import { updateUserAction } from "../actions";
 
-const ZEditProfileNameFormSchema = ZUser.pick({ name: true, locale: true });
+// Schema & types
+const ZEditProfileNameFormSchema = ZUser.pick({ name: true, locale: true, email: true }).extend({
+  email: ZUserEmail.transform((val) => val?.trim().toLowerCase()),
+});
 type TEditProfileNameForm = z.infer<typeof ZEditProfileNameFormSchema>;
 
-export const EditProfileDetailsForm = ({ user }: { user: TUser }) => {
+export const EditProfileDetailsForm = ({
+  user,
+  emailVerificationDisabled,
+}: {
+  user: TUser;
+  emailVerificationDisabled: boolean;
+}) => {
+  const { t } = useTranslate();
+  const router = useRouter();
+
   const form = useForm<TEditProfileNameForm>({
-    defaultValues: { name: user.name, locale: user.locale || "en" },
+    defaultValues: {
+      name: user.name,
+      locale: user.locale,
+      email: user.email,
+    },
     mode: "onChange",
     resolver: zodResolver(ZEditProfileNameFormSchema),
   });
 
   const { isSubmitting, isDirty } = form.formState;
-  const { t } = useTranslate();
+  const [showModal, setShowModal] = useState(false);
+
+  const handleConfirmPassword = async (password: string) => {
+    const values = form.getValues();
+    const dirtyFields = form.formState.dirtyFields;
+
+    const emailChanged = "email" in dirtyFields;
+    const nameChanged = "name" in dirtyFields;
+    const localeChanged = "locale" in dirtyFields;
+
+    const name = values.name.trim();
+    const email = values.email.trim().toLowerCase();
+    const locale = values.locale;
+
+    const data: TUserUpdateInput = {};
+
+    if (emailChanged) {
+      data.email = email;
+      data.password = password;
+    }
+    if (nameChanged) {
+      data.name = name;
+    }
+    if (localeChanged) {
+      data.locale = locale;
+    }
+
+    const updatedUserResult = await updateUserAction(data);
+
+    if (updatedUserResult?.data) {
+      if (!emailVerificationDisabled) {
+        toast.success(t("auth.verification-requested.new_email_verification_success"));
+      } else {
+        toast.success(t("environments.settings.profile.email_change_initiated"));
+        await signOut({ redirect: false });
+        router.push(`/email-change-without-verification-success`);
+        return;
+      }
+    } else {
+      const errorMessage = getFormattedErrorMessage(updatedUserResult);
+      toast.error(errorMessage);
+      return;
+    }
+
+    window.location.reload();
+    setShowModal(false);
+  };
 
   const onSubmit: SubmitHandler<TEditProfileNameForm> = async (data) => {
-    try {
-      const name = data.name.trim();
-      const locale = data.locale;
-      await updateUserAction({ name, locale });
-      toast.success(t("environments.settings.profile.profile_updated_successfully"));
-      window.location.reload();
-      form.reset({ name, locale });
-    } catch (error) {
-      toast.error(`${t("common.error")}: ${error.message}`);
+    if (data.email !== user.email) {
+      setShowModal(true);
+    } else {
+      try {
+        await updateUserAction({
+          ...data,
+          name: data.name.trim(),
+        });
+        toast.success(t("environments.settings.profile.profile_updated_successfully"));
+        window.location.reload();
+        form.reset(data);
+      } catch (error: any) {
+        toast.error(`${t("common.error")}: ${error.message}`);
+      }
     }
   };
 
   return (
-    <FormProvider {...form}>
-      <form className="w-full max-w-sm items-center" onSubmit={form.handleSubmit(onSubmit)}>
-        <FormField
-          control={form.control}
-          name="name"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{t("common.full_name")}</FormLabel>
-              <FormControl>
-                <Input
-                  {...field}
-                  type="text"
-                  placeholder={t("common.full_name")}
-                  required
-                  isInvalid={!!form.formState.errors.name}
-                />
-              </FormControl>
-              <FormError />
-            </FormItem>
-          )}
-        />
+    <>
+      <FormProvider {...form}>
+        <form className="w-full max-w-sm" onSubmit={form.handleSubmit(onSubmit)}>
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t("common.full_name")}</FormLabel>
+                <FormControl>
+                  <Input
+                    {...field}
+                    type="text"
+                    required
+                    placeholder={t("common.full_name")}
+                    isInvalid={!!form.formState.errors.name}
+                  />
+                </FormControl>
+                <FormError />
+              </FormItem>
+            )}
+          />
 
-        {/* disabled email field */}
-        <div className="mt-4 space-y-2">
-          <Label htmlFor="email">{t("common.email")}</Label>
-          <Input type="email" id="email" defaultValue={user.email} disabled />
-        </div>
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem className="mt-4">
+                <FormLabel>{t("common.email")}</FormLabel>
+                <FormControl>
+                  <Input
+                    {...field}
+                    type="email"
+                    required
+                    isInvalid={!!form.formState.errors.email}
+                    disabled={user.identityProvider !== "email"}
+                  />
+                </FormControl>
+                <FormError />
+              </FormItem>
+            )}
+          />
 
-        <FormField
-          control={form.control}
-          name="locale"
-          render={({ field }) => (
-            <FormItem className="mt-4">
-              <FormLabel>{t("common.language")}</FormLabel>
-              <FormControl>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button
-                      type="button"
-                      className="h-10 w-full border border-slate-300 px-3 text-left"
-                      variant="ghost">
-                      <div className="flex w-full items-center justify-between">
-                        {appLanguages.find((language) => language.code === field.value)?.label[field.value] ||
-                          "NA"}
-                        <ChevronDownIcon className="h-4 w-4 text-slate-500" />
-                      </div>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent
-                    className="w-40 bg-slate-50 text-slate-700"
-                    align="start"
-                    side="bottom">
-                    {appLanguages.map((language) => (
-                      <DropdownMenuItem
-                        key={language.code}
-                        onClick={() => field.onChange(language.code)}
-                        className="min-h-8 cursor-pointer">
-                        {language.label[field.value]}
-                      </DropdownMenuItem>
-                    ))}
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </FormControl>
-              <FormError />
-            </FormItem>
-          )}
-        />
+          <FormField
+            control={form.control}
+            name="locale"
+            render={({ field }) => (
+              <FormItem className="mt-4">
+                <FormLabel>{t("common.language")}</FormLabel>
+                <FormControl>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        className="h-10 w-full border border-slate-300 px-3 text-left">
+                        <div className="flex w-full items-center justify-between">
+                          {appLanguages.find((l) => l.code === field.value)?.label["en-US"] ?? "NA"}
+                          <ChevronDownIcon className="h-4 w-4 text-slate-500" />
+                        </div>
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent
+                      className="min-w-[var(--radix-dropdown-menu-trigger-width)] bg-slate-50 text-slate-700"
+                      align="start">
+                      <DropdownMenuRadioGroup value={field.value} onValueChange={field.onChange}>
+                        {appLanguages.map((lang) => (
+                          <DropdownMenuRadioItem
+                            key={lang.code}
+                            value={lang.code}
+                            className="min-h-8 cursor-pointer">
+                            {lang.label["en-US"]}
+                          </DropdownMenuRadioItem>
+                        ))}
+                      </DropdownMenuRadioGroup>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </FormControl>
+                <FormError />
+              </FormItem>
+            )}
+          />
 
-        <Button
-          type="submit"
-          className="mt-4"
-          size="sm"
-          loading={isSubmitting}
-          disabled={isSubmitting || !isDirty}>
-          {t("common.update")}
-        </Button>
-      </form>
-    </FormProvider>
+          <Button
+            type="submit"
+            className="mt-4"
+            size="sm"
+            loading={isSubmitting}
+            disabled={isSubmitting || !isDirty}>
+            {t("common.update")}
+          </Button>
+        </form>
+      </FormProvider>
+
+      <PasswordConfirmationModal
+        open={showModal}
+        setOpen={setShowModal}
+        oldEmail={user.email}
+        newEmail={form.getValues("email") || user.email}
+        onConfirm={handleConfirmPassword}
+      />
+    </>
   );
 };

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/components/password-confirmation-modal.test.tsx

@@ -0,0 +1,132 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { PasswordConfirmationModal } from "./password-confirmation-modal";
+
+// Mock the Modal component
+vi.mock("@/modules/ui/components/modal", () => ({
+  Modal: ({ children, open, setOpen, title }: any) =>
+    open ? (
+      <div data-testid="modal">
+        <div data-testid="modal-title">{title}</div>
+        {children}
+        <button data-testid="modal-close" onClick={() => setOpen(false)}>
+          Close
+        </button>
+      </div>
+    ) : null,
+}));
+
+// Mock the PasswordInput component
+vi.mock("@/modules/ui/components/password-input", () => ({
+  PasswordInput: ({ onChange, value, placeholder }: any) => (
+    <input
+      type="password"
+      value={value || ""}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      data-testid="password-input"
+    />
+  ),
+}));
+
+// Mock the useTranslate hook
+vi.mock("@tolgee/react", () => ({
+  useTranslate: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+describe("PasswordConfirmationModal", () => {
+  const defaultProps = {
+    open: true,
+    setOpen: vi.fn(),
+    oldEmail: "old@example.com",
+    newEmail: "new@example.com",
+    onConfirm: vi.fn(),
+  };
+
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  test("renders nothing when open is false", () => {
+    render(<PasswordConfirmationModal {...defaultProps} open={false} />);
+    expect(screen.queryByTestId("modal")).not.toBeInTheDocument();
+  });
+
+  test("renders modal content when open is true", () => {
+    render(<PasswordConfirmationModal {...defaultProps} />);
+    expect(screen.getByTestId("modal")).toBeInTheDocument();
+    expect(screen.getByTestId("modal-title")).toBeInTheDocument();
+  });
+
+  test("displays old and new email addresses", () => {
+    render(<PasswordConfirmationModal {...defaultProps} />);
+    expect(screen.getByText("old@example.com")).toBeInTheDocument();
+    expect(screen.getByText("new@example.com")).toBeInTheDocument();
+  });
+
+  test("shows password input field", () => {
+    render(<PasswordConfirmationModal {...defaultProps} />);
+    const passwordInput = screen.getByTestId("password-input");
+    expect(passwordInput).toBeInTheDocument();
+    expect(passwordInput).toHaveAttribute("placeholder", "*******");
+  });
+
+  test("disables confirm button when form is not dirty", () => {
+    render(<PasswordConfirmationModal {...defaultProps} />);
+    const confirmButton = screen.getByText("common.confirm");
+    expect(confirmButton).toBeDisabled();
+  });
+
+  test("disables confirm button when old and new emails are the same", () => {
+    render(
+      <PasswordConfirmationModal {...defaultProps} oldEmail="same@example.com" newEmail="same@example.com" />
+    );
+    const confirmButton = screen.getByText("common.confirm");
+    expect(confirmButton).toBeDisabled();
+  });
+
+  test("enables confirm button when password is entered and emails are different", async () => {
+    const user = userEvent.setup();
+    render(<PasswordConfirmationModal {...defaultProps} />);
+
+    const passwordInput = screen.getByTestId("password-input");
+    await user.type(passwordInput, "password123");
+
+    const confirmButton = screen.getByText("common.confirm");
+    expect(confirmButton).not.toBeDisabled();
+  });
+
+  test("shows error message when password is too short", async () => {
+    const user = userEvent.setup();
+    render(<PasswordConfirmationModal {...defaultProps} />);
+
+    const passwordInput = screen.getByTestId("password-input");
+    await user.type(passwordInput, "short");
+
+    const confirmButton = screen.getByText("common.confirm");
+    await user.click(confirmButton);
+
+    expect(screen.getByText("String must contain at least 8 character(s)")).toBeInTheDocument();
+  });
+
+  test("handles cancel button click and resets form", async () => {
+    const user = userEvent.setup();
+    render(<PasswordConfirmationModal {...defaultProps} />);
+
+    const passwordInput = screen.getByTestId("password-input");
+    await user.type(passwordInput, "password123");
+
+    const cancelButton = screen.getByText("common.cancel");
+    await user.click(cancelButton);
+
+    expect(defaultProps.setOpen).toHaveBeenCalledWith(false);
+    await waitFor(() => {
+      expect(passwordInput).toHaveValue("");
+    });
+  });
+});

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/components/password-confirmation-modal.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { Button } from "@/modules/ui/components/button";
+import { FormControl, FormError, FormField, FormItem } from "@/modules/ui/components/form";
+import { Modal } from "@/modules/ui/components/modal";
+import { PasswordInput } from "@/modules/ui/components/password-input";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslate } from "@tolgee/react";
+import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
+import { z } from "zod";
+import { ZUserPassword } from "@formbricks/types/user";
+
+interface PasswordConfirmationModalProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  oldEmail: string;
+  newEmail: string;
+  onConfirm: (password: string) => Promise<void>;
+}
+
+const PasswordConfirmationSchema = z.object({
+  password: ZUserPassword,
+});
+
+type FormValues = z.infer<typeof PasswordConfirmationSchema>;
+
+export const PasswordConfirmationModal = ({
+  open,
+  setOpen,
+  oldEmail,
+  newEmail,
+  onConfirm,
+}: PasswordConfirmationModalProps) => {
+  const { t } = useTranslate();
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(PasswordConfirmationSchema),
+  });
+  const { isSubmitting, isDirty } = form.formState;
+
+  const onSubmit: SubmitHandler<FormValues> = async (data) => {
+    try {
+      await onConfirm(data.password);
+      form.reset();
+    } catch (error) {
+      form.setError("password", {
+        message: error instanceof Error ? error.message : "Authentication failed",
+      });
+    }
+  };
+  const handleCancel = () => {
+    form.reset();
+    setOpen(false);
+  };
+
+  return (
+    <Modal open={open} setOpen={setOpen} title={t("auth.forgot-password.reset.confirm_password")}>
+      <FormProvider {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+          <p className="text-muted-foreground text-sm">
+            {t("auth.email-change.confirm_password_description")}
+          </p>
+
+          <div className="flex flex-col gap-2 text-sm sm:flex-row sm:justify-between sm:gap-4">
+            <p>
+              <strong>{t("auth.email-change.old_email")}:</strong>
+              <br /> {oldEmail.toLowerCase()}
+            </p>
+            <p>
+              <strong>{t("auth.email-change.new_email")}:</strong>
+              <br /> {newEmail.toLowerCase()}
+            </p>
+          </div>
+
+          <FormField
+            control={form.control}
+            name="password"
+            render={({ field, fieldState: { error } }) => (
+              <FormItem className="w-full">
+                <FormControl>
+                  <div>
+                    <PasswordInput
+                      id="password"
+                      autoComplete="current-password"
+                      placeholder="*******"
+                      aria-placeholder="password"
+                      aria-label="password"
+                      aria-required="true"
+                      required
+                      className="focus:border-brand-dark focus:ring-brand-dark block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
+                      value={field.value}
+                      onChange={(password) => field.onChange(password)}
+                    />
+                    {error?.message && <FormError className="text-left">{error.message}</FormError>}
+                  </div>
+                </FormControl>
+              </FormItem>
+            )}
+          />
+
+          <div className="mt-4 space-x-2 text-right">
+            <Button type="button" variant="secondary" onClick={handleCancel}>
+              {t("common.cancel")}
+            </Button>
+            <Button
+              type="submit"
+              variant="default"
+              loading={isSubmitting}
+              disabled={isSubmitting || !isDirty || oldEmail.toLowerCase() === newEmail.toLowerCase()}>
+              {t("common.confirm")}
+            </Button>
+          </div>
+        </form>
+      </FormProvider>
+    </Modal>
+  );
+};

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/lib/user.test.ts

@@ -0,0 +1,146 @@
+import { verifyPassword as mockVerifyPasswordImported } from "@/modules/auth/lib/utils";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { prisma } from "@formbricks/database";
+import { InvalidInputError, ResourceNotFoundError } from "@formbricks/types/errors";
+import { getIsEmailUnique, verifyUserPassword } from "./user";
+
+// Mock dependencies
+vi.mock("@/lib/user/cache", () => ({
+  userCache: {
+    tag: {
+      byId: vi.fn((id) => `user-${id}-tag`),
+      byEmail: vi.fn((email) => `user-email-${email}-tag`),
+    },
+  },
+}));
+
+vi.mock("@/modules/auth/lib/utils", () => ({
+  verifyPassword: vi.fn(),
+}));
+
+vi.mock("@formbricks/database", () => ({
+  prisma: {
+    user: {
+      findUnique: vi.fn(),
+    },
+  },
+}));
+
+// reactCache (from "react") and unstable_cache (from "next/cache") are mocked in vitestSetup.ts
+// to be pass-through, so the inner logic of cached functions is tested.
+
+const mockPrismaUserFindUnique = vi.mocked(prisma.user.findUnique);
+const mockVerifyPasswordUtil = vi.mocked(mockVerifyPasswordImported);
+
+describe("User Library Tests", () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+
+  describe("verifyUserPassword", () => {
+    const userId = "test-user-id";
+    const password = "test-password";
+
+    test("should return true for correct password", async () => {
+      mockPrismaUserFindUnique.mockResolvedValue({
+        password: "hashed-password",
+        identityProvider: "email",
+      } as any);
+      mockVerifyPasswordUtil.mockResolvedValue(true);
+
+      const result = await verifyUserPassword(userId, password);
+      expect(result).toBe(true);
+      expect(mockPrismaUserFindUnique).toHaveBeenCalledWith({
+        where: { id: userId },
+        select: { password: true, identityProvider: true },
+      });
+      expect(mockVerifyPasswordUtil).toHaveBeenCalledWith(password, "hashed-password");
+    });
+
+    test("should return false for incorrect password", async () => {
+      mockPrismaUserFindUnique.mockResolvedValue({
+        password: "hashed-password",
+        identityProvider: "email",
+      } as any);
+      mockVerifyPasswordUtil.mockResolvedValue(false);
+
+      const result = await verifyUserPassword(userId, password);
+      expect(result).toBe(false);
+      expect(mockPrismaUserFindUnique).toHaveBeenCalledWith({
+        where: { id: userId },
+        select: { password: true, identityProvider: true },
+      });
+      expect(mockVerifyPasswordUtil).toHaveBeenCalledWith(password, "hashed-password");
+    });
+
+    test("should throw ResourceNotFoundError if user not found", async () => {
+      mockPrismaUserFindUnique.mockResolvedValue(null);
+
+      await expect(verifyUserPassword(userId, password)).rejects.toThrow(ResourceNotFoundError);
+      await expect(verifyUserPassword(userId, password)).rejects.toThrow(`user with ID ${userId} not found`);
+      expect(mockPrismaUserFindUnique).toHaveBeenCalledWith({
+        where: { id: userId },
+        select: { password: true, identityProvider: true },
+      });
+      expect(mockVerifyPasswordUtil).not.toHaveBeenCalled();
+    });
+
+    test("should throw InvalidInputError if identityProvider is not email", async () => {
+      mockPrismaUserFindUnique.mockResolvedValue({
+        password: "hashed-password",
+        identityProvider: "google", // Not 'email'
+      } as any);
+
+      await expect(verifyUserPassword(userId, password)).rejects.toThrow(InvalidInputError);
+      await expect(verifyUserPassword(userId, password)).rejects.toThrow("Password is not set for this user");
+      expect(mockPrismaUserFindUnique).toHaveBeenCalledWith({
+        where: { id: userId },
+        select: { password: true, identityProvider: true },
+      });
+      expect(mockVerifyPasswordUtil).not.toHaveBeenCalled();
+    });
+
+    test("should throw InvalidInputError if password is not set for email provider", async () => {
+      mockPrismaUserFindUnique.mockResolvedValue({
+        password: null, // Password not set
+        identityProvider: "email",
+      } as any);
+
+      await expect(verifyUserPassword(userId, password)).rejects.toThrow(InvalidInputError);
+      await expect(verifyUserPassword(userId, password)).rejects.toThrow("Password is not set for this user");
+      expect(mockPrismaUserFindUnique).toHaveBeenCalledWith({
+        where: { id: userId },
+        select: { password: true, identityProvider: true },
+      });
+      expect(mockVerifyPasswordUtil).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("getIsEmailUnique", () => {
+    const email = "test@example.com";
+
+    test("should return false if user exists", async () => {
+      mockPrismaUserFindUnique.mockResolvedValue({
+        id: "some-user-id",
+      } as any);
+
+      const result = await getIsEmailUnique(email);
+      expect(result).toBe(false);
+      expect(mockPrismaUserFindUnique).toHaveBeenCalledWith({
+        where: { email },
+        select: { id: true },
+      });
+    });
+
+    test("should return true if user does not exist", async () => {
+      mockPrismaUserFindUnique.mockResolvedValue(null);
+
+      const result = await getIsEmailUnique(email);
+      expect(result).toBe(true);
+      expect(mockPrismaUserFindUnique).toHaveBeenCalledWith({
+        where: { email },
+        select: { id: true },
+      });
+    });
+  });
+});

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

@@ -0,0 +1,70 @@
+import { cache } from "@/lib/cache";
+import { userCache } from "@/lib/user/cache";
+import { verifyPassword } from "@/modules/auth/lib/utils";
+import { User } from "@prisma/client";
+import { cache as reactCache } from "react";
+import { prisma } from "@formbricks/database";
+import { InvalidInputError, ResourceNotFoundError } from "@formbricks/types/errors";
+
+export const getUserById = reactCache(
+  async (userId: string): Promise<Pick<User, "password" | "identityProvider">> =>
+    cache(
+      async () => {
+        const user = await prisma.user.findUnique({
+          where: {
+            id: userId,
+          },
+          select: {
+            password: true,
+            identityProvider: true,
+          },
+        });
+        if (!user) {
+          throw new ResourceNotFoundError("user", userId);
+        }
+        return user;
+      },
+      [`getUserById-${userId}`],
+      {
+        tags: [userCache.tag.byId(userId)],
+      }
+    )()
+);
+
+export const verifyUserPassword = async (userId: string, password: string): Promise<boolean> => {
+  const user = await getUserById(userId);
+
+  if (user.identityProvider !== "email" || !user.password) {
+    throw new InvalidInputError("Password is not set for this user");
+  }
+
+  const isCorrectPassword = await verifyPassword(password, user.password);
+
+  if (!isCorrectPassword) {
+    return false;
+  }
+
+  return true;
+};
+
+export const getIsEmailUnique = reactCache(
+  async (email: string): Promise<boolean> =>
+    cache(
+      async () => {
+        const user = await prisma.user.findUnique({
+          where: {
+            email: email.toLowerCase(),
+          },
+          select: {
+            id: true,
+          },
+        });
+
+        return !user;
+      },
+      [`getIsEmailUnique-${email}`],
+      {
+        tags: [userCache.tag.byEmail(email)],
+      }
+    )()
+);

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/page.test.tsx

@@ -13,6 +13,7 @@ import Page from "./page";
 // Mock services and utils
 vi.mock("@/lib/constants", () => ({
   IS_FORMBRICKS_CLOUD: true,
+  EMAIL_VERIFICATION_DISABLED: true,
 }));
 vi.mock("@/lib/organization/service", () => ({
   getOrganizationsWhereUserIsSingleOwner: vi.fn(),

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

@@ -1,6 +1,6 @@
 import { AccountSettingsNavbar } from "@/app/(app)/environments/[environmentId]/settings/(account)/components/AccountSettingsNavbar";
 import { AccountSecurity } from "@/app/(app)/environments/[environmentId]/settings/(account)/profile/components/AccountSecurity";
-import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
+import { EMAIL_VERIFICATION_DISABLED, IS_FORMBRICKS_CLOUD } from "@/lib/constants";
 import { getOrganizationsWhereUserIsSingleOwner } from "@/lib/organization/service";
 import { getUser } from "@/lib/user/service";
 import { getIsMultiOrgEnabled, getIsTwoFactorAuthEnabled } from "@/modules/ee/license-check/lib/utils";
@@ -42,7 +42,7 @@ const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
           <SettingsCard
             title={t("environments.settings.profile.personal_information")}
             description={t("environments.settings.profile.update_personal_info")}>
-            <EditProfileDetailsForm user={user} />
+            <EditProfileDetailsForm emailVerificationDisabled={EMAIL_VERIFICATION_DISABLED} user={user} />
           </SettingsCard>
           <SettingsCard
             title={t("common.avatar")}

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

@@ -29,6 +29,7 @@ vi.mock("@/lib/constants", () => ({
   SMTP_PORT: 587,
   SMTP_USER: "mock-smtp-user",
   SMTP_PASSWORD: "mock-smtp-password",
+  SESSION_MAX_AGE: 1000,
 }));
 
 describe("TeamsPage re-export", () => {

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

@@ -31,7 +31,7 @@ export const SettingsCard = ({
       id={title}>
       <div className="border-b border-slate-200 px-4 pb-4">
         <div className="flex">
-          <h3 className="text-lg leading-6 font-medium text-slate-900 capitalize">{title}</h3>
+          <h3 className="text-lg font-medium capitalize leading-6 text-slate-900">{title}</h3>
           <div className="ml-2">
             {beta && <Badge size="normal" type="warning" text="Beta" />}
             {soon && (

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

@@ -75,7 +75,6 @@ export const getSurveySummaryAction = authenticatedActionClient
         },
       ],
     });
-
     return getSurveySummary(parsedInput.surveyId, parsedInput.filterCriteria);
   });
 

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

@@ -5,7 +5,6 @@ import {
 } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/actions";
 import { SurveyAnalysisNavigation } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/SurveyAnalysisNavigation";
 import { getFormattedFilters } from "@/app/lib/surveys/surveys";
-import { useIntervalWhenFocused } from "@/lib/utils/hooks/useIntervalWhenFocused";
 import { SecondaryNavigation } from "@/modules/ui/components/secondary-navigation";
 import { act, cleanup, render, waitFor } from "@testing-library/react";
 import { useParams, usePathname, useSearchParams } from "next/navigation";
@@ -45,13 +44,13 @@ vi.mock("@/lib/constants", () => ({
   SMTP_PORT: 587,
   SMTP_USER: "mock-smtp-user",
   SMTP_PASSWORD: "mock-smtp-password",
+  SESSION_MAX_AGE: 1000,
 }));
 
 vi.mock("@/app/(app)/environments/[environmentId]/components/ResponseFilterContext");
 vi.mock("@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/actions");
 vi.mock("@/app/lib/surveys/surveys");
 vi.mock("@/app/share/[sharingKey]/actions");
-vi.mock("@/lib/utils/hooks/useIntervalWhenFocused");
 vi.mock("@/modules/ui/components/secondary-navigation", () => ({
   SecondaryNavigation: vi.fn(() => <div data-testid="secondary-navigation" />),
 }));
@@ -68,7 +67,6 @@ const mockUseResponseFilter = vi.mocked(useResponseFilter);
 const mockGetResponseCountAction = vi.mocked(getResponseCountAction);
 const mockRevalidateSurveyIdPath = vi.mocked(revalidateSurveyIdPath);
 const mockGetFormattedFilters = vi.mocked(getFormattedFilters);
-const mockUseIntervalWhenFocused = vi.mocked(useIntervalWhenFocused);
 const MockSecondaryNavigation = vi.mocked(SecondaryNavigation);
 
 const mockSurveyLanguages: TSurveyLanguage[] = [
@@ -119,7 +117,6 @@ const mockSurvey = {
 const defaultProps = {
   environmentId: "testEnvId",
   survey: mockSurvey,
-  initialTotalResponseCount: 10,
   activeId: "summary",
 };
 
@@ -166,23 +163,20 @@ describe("SurveyAnalysisNavigation", () => {
     );
   });
 
-  test("passes correct runWhen flag to useIntervalWhenFocused based on share embed modal", () => {
+  test("renders navigation correctly for sharing page", () => {
     mockUsePathname.mockReturnValue(
       `/environments/${defaultProps.environmentId}/surveys/${mockSurvey.id}/summary`
     );
-    mockUseParams.mockReturnValue({ environmentId: defaultProps.environmentId, surveyId: mockSurvey.id });
+    mockUseParams.mockReturnValue({ sharingKey: "test-sharing-key" });
     mockUseResponseFilter.mockReturnValue({ selectedFilter: "all", dateRange: {} } as any);
     mockGetFormattedFilters.mockReturnValue([] as any);
     mockGetResponseCountAction.mockResolvedValue({ data: 5 });
 
-    mockUseSearchParams.mockReturnValue({ get: vi.fn().mockReturnValue("true") } as any);
     render(<SurveyAnalysisNavigation {...defaultProps} />);
-    expect(mockUseIntervalWhenFocused).toHaveBeenCalledWith(expect.any(Function), 10000, false, false);
-    cleanup();
 
-    mockUseSearchParams.mockReturnValue({ get: vi.fn().mockReturnValue(null) } as any);
-    render(<SurveyAnalysisNavigation {...defaultProps} />);
-    expect(mockUseIntervalWhenFocused).toHaveBeenCalledWith(expect.any(Function), 10000, true, false);
+    expect(MockSecondaryNavigation).toHaveBeenCalled();
+    const lastCallArgs = MockSecondaryNavigation.mock.calls[MockSecondaryNavigation.mock.calls.length - 1][0];
+    expect(lastCallArgs.navigation[0].href).toContain("/share/test-sharing-key");
   });
 
   test("displays correct response count string in label for various scenarios", async () => {
@@ -195,8 +189,8 @@ describe("SurveyAnalysisNavigation", () => {
     mockGetFormattedFilters.mockReturnValue([] as any);
 
     // Scenario 1: total = 10, filtered = null (initial state)
-    render(<SurveyAnalysisNavigation {...defaultProps} initialTotalResponseCount={10} />);
-    expect(MockSecondaryNavigation.mock.calls[0][0].navigation[1].label).toBe("common.responses (10)");
+    render(<SurveyAnalysisNavigation {...defaultProps} />);
+    expect(MockSecondaryNavigation.mock.calls[0][0].navigation[1].label).toBe("common.responses");
     cleanup();
     vi.resetAllMocks(); // Reset mocks for next case
 
@@ -212,11 +206,11 @@ describe("SurveyAnalysisNavigation", () => {
       if (args && "filterCriteria" in args) return { data: 15, error: null, success: true };
       return { data: 15, error: null, success: true };
     });
-    render(<SurveyAnalysisNavigation {...defaultProps} initialTotalResponseCount={15} />);
+    render(<SurveyAnalysisNavigation {...defaultProps} />);
     await waitFor(() => {
       const lastCallArgs =
         MockSecondaryNavigation.mock.calls[MockSecondaryNavigation.mock.calls.length - 1][0];
-      expect(lastCallArgs.navigation[1].label).toBe("common.responses (15)");
+      expect(lastCallArgs.navigation[1].label).toBe("common.responses");
     });
     cleanup();
     vi.resetAllMocks();
@@ -233,11 +227,11 @@ describe("SurveyAnalysisNavigation", () => {
       if (args && "filterCriteria" in args) return { data: 15, error: null, success: true };
       return { data: 10, error: null, success: true };
     });
-    render(<SurveyAnalysisNavigation {...defaultProps} initialTotalResponseCount={10} />);
+    render(<SurveyAnalysisNavigation {...defaultProps} />);
     await waitFor(() => {
       const lastCallArgs =
         MockSecondaryNavigation.mock.calls[MockSecondaryNavigation.mock.calls.length - 1][0];
-      expect(lastCallArgs.navigation[1].label).toBe("common.responses (15)");
+      expect(lastCallArgs.navigation[1].label).toBe("common.responses");
     });
   });
 });

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

@@ -1,105 +1,30 @@
 "use client";
 
-import { useResponseFilter } from "@/app/(app)/environments/[environmentId]/components/ResponseFilterContext";
-import {
-  getResponseCountAction,
-  revalidateSurveyIdPath,
-} from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/actions";
-import { getFormattedFilters } from "@/app/lib/surveys/surveys";
-import { getResponseCountBySurveySharingKeyAction } from "@/app/share/[sharingKey]/actions";
-import { useIntervalWhenFocused } from "@/lib/utils/hooks/useIntervalWhenFocused";
+import { revalidateSurveyIdPath } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/actions";
 import { SecondaryNavigation } from "@/modules/ui/components/secondary-navigation";
 import { useTranslate } from "@tolgee/react";
 import { InboxIcon, PresentationIcon } from "lucide-react";
-import { useParams, usePathname, useSearchParams } from "next/navigation";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useParams, usePathname } from "next/navigation";
 import { TSurvey } from "@formbricks/types/surveys/types";
 
 interface SurveyAnalysisNavigationProps {
   environmentId: string;
   survey: TSurvey;
-  initialTotalResponseCount: number | null;
   activeId: string;
 }
 
 export const SurveyAnalysisNavigation = ({
   environmentId,
   survey,
-  initialTotalResponseCount,
   activeId,
 }: SurveyAnalysisNavigationProps) => {
   const pathname = usePathname();
   const { t } = useTranslate();
   const params = useParams();
-  const [filteredResponseCount, setFilteredResponseCount] = useState<number | null>(null);
-  const [totalResponseCount, setTotalResponseCount] = useState<number | null>(initialTotalResponseCount);
   const sharingKey = params.sharingKey as string;
   const isSharingPage = !!sharingKey;
 
-  const searchParams = useSearchParams();
-  const isShareEmbedModalOpen = searchParams.get("share") === "true";
-
   const url = isSharingPage ? `/share/${sharingKey}` : `/environments/${environmentId}/surveys/${survey.id}`;
-  const { selectedFilter, dateRange } = useResponseFilter();
-
-  const filters = useMemo(
-    () => getFormattedFilters(survey, selectedFilter, dateRange),
-    [selectedFilter, dateRange, survey]
-  );
-
-  const latestFiltersRef = useRef(filters);
-  latestFiltersRef.current = filters;
-
-  const getResponseCount = () => {
-    if (isSharingPage) return getResponseCountBySurveySharingKeyAction({ sharingKey });
-    return getResponseCountAction({ surveyId: survey.id });
-  };
-
-  const fetchResponseCount = async () => {
-    const count = await getResponseCount();
-    const responseCount = count?.data ?? 0;
-    setTotalResponseCount(responseCount);
-  };
-
-  const getFilteredResponseCount = useCallback(() => {
-    if (isSharingPage)
-      return getResponseCountBySurveySharingKeyAction({
-        sharingKey,
-        filterCriteria: latestFiltersRef.current,
-      });
-    return getResponseCountAction({ surveyId: survey.id, filterCriteria: latestFiltersRef.current });
-  }, [isSharingPage, sharingKey, survey.id]);
-
-  const fetchFilteredResponseCount = useCallback(async () => {
-    const count = await getFilteredResponseCount();
-    const responseCount = count?.data ?? 0;
-    setFilteredResponseCount(responseCount);
-  }, [getFilteredResponseCount]);
-
-  useEffect(() => {
-    fetchFilteredResponseCount();
-  }, [filters, isSharingPage, sharingKey, survey.id, fetchFilteredResponseCount]);
-
-  useIntervalWhenFocused(
-    () => {
-      fetchResponseCount();
-      fetchFilteredResponseCount();
-    },
-    10000,
-    !isShareEmbedModalOpen,
-    false
-  );
-
-  const getResponseCountString = () => {
-    if (totalResponseCount === null) return "";
-    if (filteredResponseCount === null) return `(${totalResponseCount})`;
-
-    const totalCount = Math.max(totalResponseCount, filteredResponseCount);
-
-    if (totalCount === filteredResponseCount) return `(${totalCount})`;
-
-    return `(${filteredResponseCount} of ${totalCount})`;
-  };
 
   const navigation = [
     {
@@ -114,7 +39,7 @@ export const SurveyAnalysisNavigation = ({
     },
     {
       id: "responses",
-      label: `${t("common.responses")} ${getResponseCountString()}`,
+      label: t("common.responses"),
       icon: <InboxIcon className="h-5 w-5" />,
       href: `${url}/responses?referer=true`,
       current: pathname?.includes("/responses"),

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

@@ -162,7 +162,6 @@ describe("ResponsePage", () => {
       expect(screen.getByTestId("results-share-button")).toBeInTheDocument();
       expect(screen.getByTestId("response-data-view")).toBeInTheDocument();
     });
-    expect(mockGetResponseCountAction).toHaveBeenCalled();
     expect(mockGetResponsesAction).toHaveBeenCalled();
   });
 
@@ -179,7 +178,6 @@ describe("ResponsePage", () => {
     await waitFor(() => {
       expect(screen.queryByTestId("results-share-button")).not.toBeInTheDocument();
     });
-    expect(mockGetResponseCountBySurveySharingKeyAction).toHaveBeenCalled();
     expect(mockGetResponsesBySurveySharingKeyAction).toHaveBeenCalled();
   });
 
@@ -297,8 +295,7 @@ describe("ResponsePage", () => {
     rerender(<ResponsePage {...defaultProps} />);
 
     await waitFor(() => {
-      // Should fetch count and responses again due to filter change
-      expect(mockGetResponseCountAction).toHaveBeenCalledTimes(2);
+      // Should fetch responses again due to filter change
       expect(mockGetResponsesAction).toHaveBeenCalledTimes(2);
       // Check if it fetches with offset 0 (first page)
       expect(mockGetResponsesAction).toHaveBeenLastCalledWith(

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

@@ -1,18 +1,12 @@
 "use client";
 
 import { useResponseFilter } from "@/app/(app)/environments/[environmentId]/components/ResponseFilterContext";
-import {
-  getResponseCountAction,
-  getResponsesAction,
-} from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/actions";
+import { getResponsesAction } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/actions";
 import { ResponseDataView } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseDataView";
 import { CustomFilter } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/CustomFilter";
 import { ResultsShareButton } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ResultsShareButton";
 import { getFormattedFilters } from "@/app/lib/surveys/surveys";
-import {
-  getResponseCountBySurveySharingKeyAction,
-  getResponsesBySurveySharingKeyAction,
-} from "@/app/share/[sharingKey]/actions";
+import { getResponsesBySurveySharingKeyAction } from "@/app/share/[sharingKey]/actions";
 import { replaceHeadlineRecall } from "@/lib/utils/recall";
 import { useParams, useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -49,7 +43,6 @@ export const ResponsePage = ({
   const sharingKey = params.sharingKey as string;
   const isSharingPage = !!sharingKey;
 
-  const [responseCount, setResponseCount] = useState<number | null>(null);
   const [responses, setResponses] = useState<TResponse[]>([]);
   const [page, setPage] = useState<number>(1);
   const [hasMore, setHasMore] = useState<boolean>(true);
@@ -97,9 +90,6 @@ export const ResponsePage = ({
 
   const deleteResponses = (responseIds: string[]) => {
     setResponses(responses.filter((response) => !responseIds.includes(response.id)));
-    if (responseCount) {
-      setResponseCount(responseCount - responseIds.length);
-    }
   };
 
   const updateResponse = (responseId: string, updatedResponse: TResponse) => {
@@ -118,29 +108,6 @@ export const ResponsePage = ({
     }
   }, [searchParams, resetState]);
 
-  useEffect(() => {
-    const handleResponsesCount = async () => {
-      let responseCount = 0;
-
-      if (isSharingPage) {
-        const responseCountActionResponse = await getResponseCountBySurveySharingKeyAction({
-          sharingKey,
-          filterCriteria: filters,
-        });
-        responseCount = responseCountActionResponse?.data || 0;
-      } else {
-        const responseCountActionResponse = await getResponseCountAction({
-          surveyId,
-          filterCriteria: filters,
-        });
-        responseCount = responseCountActionResponse?.data || 0;
-      }
-
-      setResponseCount(responseCount);
-    };
-    handleResponsesCount();
-  }, [filters, isSharingPage, sharingKey, surveyId]);
-
   useEffect(() => {
     const fetchInitialResponses = async () => {
       try {

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

@@ -1,487 +1,494 @@
-import { generateResponseTableColumns } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTableColumns";
-import { deleteResponseAction } from "@/modules/analysis/components/SingleResponseCard/actions";
-import type { DragEndEvent } from "@dnd-kit/core";
-import { act, cleanup, render, screen } from "@testing-library/react";
+import { ResponseTable } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTable";
+import { getResponsesDownloadUrlAction } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/actions";
+import { getFormattedErrorMessage } from "@/lib/utils/helper";
+import { cleanup, 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 { TEnvironment } from "@formbricks/types/environment";
-import { TResponse, TResponseTableData } from "@formbricks/types/responses";
-import { TSurvey, TSurveyQuestion, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
+import { TResponse } from "@formbricks/types/responses";
+import { TSurvey } from "@formbricks/types/surveys/types";
 import { TTag } from "@formbricks/types/tags";
-import { TUser, TUserLocale } from "@formbricks/types/user";
-import { ResponseTable } from "./ResponseTable";
+import { TUserLocale } from "@formbricks/types/user";
 
-// Hoist variables used in mock factories
-const { DndContextMock, SortableContextMock, arrayMoveMock } = vi.hoisted(() => {
-  const dndMock = vi.fn(({ children, onDragEnd }) => {
-    // Store the onDragEnd prop to allow triggering it in tests
-    (dndMock as any).lastOnDragEnd = onDragEnd;
-    return <div data-testid="dnd-context">{children}</div>;
-  });
-  const sortableMock = vi.fn(({ children }) => <>{children}</>);
-  const moveMock = vi.fn((array, from, to) => {
-    const newArray = [...array];
-    const [item] = newArray.splice(from, 1);
-    newArray.splice(to, 0, item);
-    return newArray;
-  });
-  return {
-    DndContextMock: dndMock,
-    SortableContextMock: sortableMock,
-    arrayMoveMock: moveMock,
-  };
-});
+// Mock react-hot-toast
+vi.mock("react-hot-toast", () => ({
+  default: {
+    error: vi.fn(),
+    success: vi.fn(),
+    dismiss: vi.fn(),
+  },
+}));
 
-vi.mock("@dnd-kit/core", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("@dnd-kit/core")>();
-  return {
-    ...actual,
-    DndContext: DndContextMock,
-    useSensor: vi.fn(),
-    useSensors: vi.fn(),
-    closestCenter: vi.fn(),
-  };
-});
+// Mock components
+vi.mock("@/modules/ui/components/button", () => ({
+  Button: ({ children, onClick, ...props }: any) => (
+    <button onClick={onClick} data-testid="button" {...props}>
+      {children}
+    </button>
+  ),
+}));
+
+// Mock DndContext/SortableContext
+vi.mock("@dnd-kit/core", () => ({
+  DndContext: ({ children }: any) => <div>{children}</div>,
+  useSensor: vi.fn(),
+  useSensors: vi.fn(() => "sensors"),
+  closestCenter: vi.fn(),
+  MouseSensor: vi.fn(),
+  TouchSensor: vi.fn(),
+  KeyboardSensor: vi.fn(),
+}));
 
 vi.mock("@dnd-kit/modifiers", () => ({
-  restrictToHorizontalAxis: vi.fn(),
+  restrictToHorizontalAxis: "restrictToHorizontalAxis",
 }));
 
 vi.mock("@dnd-kit/sortable", () => ({
-  SortableContext: SortableContextMock,
-  arrayMove: arrayMoveMock,
-  horizontalListSortingStrategy: vi.fn(),
+  SortableContext: ({ children }: any) => <>{children}</>,
+  horizontalListSortingStrategy: "horizontalListSortingStrategy",
+  arrayMove: vi.fn((arr, oldIndex, newIndex) => {
+    const result = [...arr];
+    const [removed] = result.splice(oldIndex, 1);
+    result.splice(newIndex, 0, removed);
+    return result;
+  }),
+}));
+
+// Mock AutoAnimate
+vi.mock("@formkit/auto-animate/react", () => ({
+  useAutoAnimate: () => [vi.fn()],
+}));
+
+// Mock UI components
+vi.mock("@/modules/ui/components/data-table", () => ({
+  DataTableHeader: ({ header }: any) => <th data-testid={`header-${header.id}`}>{header.id}</th>,
+  DataTableSettingsModal: ({ open, setOpen }: any) =>
+    open ? (
+      <div data-testid="settings-modal">
+        Settings Modal <button onClick={() => setOpen(false)}>Close</button>
+      </div>
+    ) : null,
+  DataTableToolbar: ({
+    table,
+    deleteRowsAction,
+    downloadRowsAction,
+    setIsTableSettingsModalOpen,
+    setIsExpanded,
+    isExpanded,
+  }: any) => (
+    <div data-testid="table-toolbar">
+      <button
+        data-testid="toggle-expand"
+        onClick={() => setIsExpanded(!isExpanded)}
+        aria-pressed={isExpanded}>
+        Toggle Expand
+      </button>
+      <button data-testid="open-settings" onClick={() => setIsTableSettingsModalOpen(true)}>
+        Open Settings
+      </button>
+      <button
+        data-testid="delete-rows"
+        onClick={() => deleteRowsAction(Object.keys(table.getState().rowSelection))}>
+        Delete Selected
+      </button>
+      <button
+        data-testid="download-csv"
+        onClick={() => downloadRowsAction(Object.keys(table.getState().rowSelection), "csv")}>
+        Download CSV
+      </button>
+      <button
+        data-testid="download-xlsx"
+        onClick={() => downloadRowsAction(Object.keys(table.getState().rowSelection), "xlsx")}>
+        Download XLSX
+      </button>
+    </div>
+  ),
 }));
 
-// Mock child components and hooks
 vi.mock(
   "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseCardModal",
   () => ({
-    ResponseCardModal: vi.fn(({ open, setOpen, selectedResponseId }) =>
+    ResponseCardModal: ({ open, setOpen }: any) =>
       open ? (
-        <div data-testid="response-card-modal">
-          Selected Response ID: {selectedResponseId}
-          <button onClick={() => setOpen(false)}>Close ResponseCardModal</button>
+        <div data-testid="response-modal">
+          Response Modal <button onClick={() => setOpen(false)}>Close</button>
         </div>
-      ) : null
-    ),
+      ) : null,
   })
 );
 
 vi.mock(
   "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTableCell",
   () => ({
-    ResponseTableCell: vi.fn(({ cell, row, setSelectedResponseId }) => (
-      <td data-testid={`cell-${cell.id}`} onClick={() => setSelectedResponseId(row.original.responseId)}>
-        {typeof cell.getValue === "function" ? cell.getValue() : JSON.stringify(cell.getValue())}
+    ResponseTableCell: ({ cell, row, setSelectedResponseId }: any) => (
+      <td data-testid={`cell-${cell.id}-${row.id}`} onClick={() => setSelectedResponseId(row.id)}>
+        Cell Content
       </td>
-    )),
+    ),
   })
 );
 
-const mockGeneratedColumns = [
-  {
-    id: "select",
-    header: () => "Select",
-    cell: vi.fn(() => "SelectCell"),
-    enableSorting: false,
-    meta: { type: "select", questionType: null, hidden: false },
-  },
-  {
-    id: "createdAt",
-    header: () => "Created At",
-    cell: vi.fn(({ row }) => new Date(row.original.createdAt).toISOString()),
-    enableSorting: true,
-    meta: { type: "createdAt", questionType: null, hidden: false },
-  },
-  {
-    id: "q1",
-    header: () => "Question 1",
-    cell: vi.fn(({ row }) => row.original.responseData.q1),
-    enableSorting: true,
-    meta: { type: "question", questionType: "openText", hidden: false },
-  },
-];
 vi.mock(
   "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTableColumns",
   () => ({
-    generateResponseTableColumns: vi.fn(() => mockGeneratedColumns),
+    generateResponseTableColumns: vi.fn(() => [
+      { id: "select", accessorKey: "select", header: "Select" },
+      { id: "createdAt", accessorKey: "createdAt", header: "Created At" },
+      { id: "person", accessorKey: "person", header: "Person" },
+      { id: "status", accessorKey: "status", header: "Status" },
+    ]),
   })
 );
 
+vi.mock("@/modules/ui/components/table", () => ({
+  Table: ({ children, ...props }: any) => <table {...props}>{children}</table>,
+  TableBody: ({ children, ...props }: any) => <tbody {...props}>{children}</tbody>,
+  TableCell: ({ children, ...props }: any) => <td {...props}>{children}</td>,
+  TableHeader: ({ children, ...props }: any) => <thead {...props}>{children}</thead>,
+  TableRow: ({ children, ...props }: any) => <tr {...props}>{children}</tr>,
+}));
+
+vi.mock("@/modules/ui/components/skeleton", () => ({
+  Skeleton: ({ children }: any) => <div data-testid="skeleton">{children}</div>,
+}));
+
+// Mock the actions
+vi.mock("@/app/(app)/environments/[environmentId]/surveys/[surveyId]/actions", () => ({
+  getResponsesDownloadUrlAction: vi.fn(),
+}));
+
 vi.mock("@/modules/analysis/components/SingleResponseCard/actions", () => ({
   deleteResponseAction: vi.fn(),
 }));
 
-vi.mock("@/modules/ui/components/data-table", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("@/modules/ui/components/data-table")>();
-  return {
-    ...actual,
-    DataTableToolbar: vi.fn((props) => (
-      <div data-testid="data-table-toolbar">
-        <button data-testid="toolbar-expand-toggle" onClick={() => props.setIsExpanded(!props.isExpanded)}>
-          Toggle Expand
-        </button>
-        <button data-testid="toolbar-open-settings" onClick={() => props.setIsTableSettingsModalOpen(true)}>
-          Open Settings
-        </button>
-        <button
-          data-testid="toolbar-delete-selected"
-          onClick={() => props.deleteRows(props.table.getSelectedRowModel().rows.map((r) => r.id))}>
-          Delete Selected
-        </button>
-        <button data-testid="toolbar-delete-single" onClick={() => props.deleteAction("single_response_id")}>
-          Delete Single Action
-        </button>
-      </div>
-    )),
-    DataTableHeader: vi.fn(({ header }) => (
-      <th
-        data-testid={`header-${header.id}`}
-        onClick={() => header.column.getToggleSortingHandler()?.(new MouseEvent("click"))}>
-        {typeof header.column.columnDef.header === "function"
-          ? header.column.columnDef.header(header.getContext())
-          : header.column.columnDef.header}
-        <button
-          onMouseDown={header.getResizeHandler()}
-          onTouchStart={header.getResizeHandler()}
-          data-testid={`resize-${header.id}`}>
-          Resize
-        </button>
-      </th>
-    )),
-    DataTableSettingsModal: vi.fn(({ open, setOpen }) =>
-      open ? (
-        <div data-testid="data-table-settings-modal">
-          <button onClick={() => setOpen(false)}>Close Settings</button>
-        </div>
-      ) : null
-    ),
-  };
-});
-
-vi.mock("@formkit/auto-animate/react", () => ({
-  useAutoAnimate: vi.fn(() => [vi.fn()]),
+// Mock helper functions
+vi.mock("@/lib/utils/helper", () => ({
+  getFormattedErrorMessage: vi.fn(),
 }));
 
-vi.mock("@tolgee/react", () => ({
-  useTranslate: () => ({
-    t: vi.fn((key) => key), // Simple pass-through mock
-  }),
-}));
-
-const localStorageMock = (() => {
+// Mock localStorage
+const mockLocalStorage = (() => {
   let store: Record<string, string> = {};
   return {
-    getItem: vi.fn((key: string) => store[key] || null),
-    setItem: vi.fn((key: string, value: string) => {
-      store[key] = value.toString();
+    getItem: vi.fn((key) => store[key] || null),
+    setItem: vi.fn((key, value) => {
+      store[key] = String(value);
     }),
-    clear: () => {
+    clear: vi.fn(() => {
       store = {};
-    },
-    removeItem: vi.fn((key: string) => {
+    }),
+    removeItem: vi.fn((key) => {
       delete store[key];
     }),
   };
 })();
-Object.defineProperty(window, "localStorage", { value: localStorageMock });
+Object.defineProperty(window, "localStorage", { value: mockLocalStorage });
 
-const mockSurvey = {
-  id: "survey1",
-  name: "Test Survey",
-  type: "app",
-  status: "inProgress",
-  questions: [
-    {
-      id: "q1",
-      type: TSurveyQuestionTypeEnum.OpenText,
-      headline: { default: "Question 1" },
-      required: true,
-    } as unknown as TSurveyQuestion,
-  ],
-  hiddenFields: { enabled: true, fieldIds: ["hidden1"] },
-  variables: [{ id: "var1", name: "Variable 1", type: "text", value: "default" }],
-  createdAt: new Date(),
-  updatedAt: new Date(),
-  environmentId: "env1",
-  welcomeCard: {
-    enabled: false,
-    headline: { default: "" },
-    html: { default: "" },
-    timeToFinish: false,
-    showResponseCount: false,
-  },
-  autoClose: null,
-  delay: 0,
-  autoComplete: null,
-  closeOnDate: null,
-  displayOption: "displayOnce",
-  recontactDays: null,
-  singleUse: { enabled: false, isEncrypted: true },
-  triggers: [],
-  languages: [],
-  styling: null,
-  surveyClosedMessage: null,
-  resultShareKey: null,
-  displayPercentage: null,
-} as unknown as TSurvey;
+// Mock Tolgee
+vi.mock("@tolgee/react", () => ({
+  useTranslate: () => ({
+    t: (key: string) => key,
+  }),
+}));
 
-const mockResponses: TResponse[] = [
-  {
-    id: "res1",
-    surveyId: "survey1",
-    finished: true,
-    data: { q1: "Response 1 Text" },
-    createdAt: new Date("2023-01-01T10:00:00.000Z"),
+// Define mock data for tests
+const mockProps = {
+  data: [
+    { responseId: "resp1", createdAt: new Date().toISOString(), status: "completed", person: "Person 1" },
+    { responseId: "resp2", createdAt: new Date().toISOString(), status: "completed", person: "Person 2" },
+  ] as any[],
+  survey: {
+    id: "survey1",
+    createdAt: new Date(),
     updatedAt: new Date(),
-    meta: {},
-    singleUseId: null,
-    ttc: {},
-    tags: [],
-    notes: [],
-    variables: {},
-    language: "en",
-    contact: null,
-    contactAttributes: null,
-  },
-  {
-    id: "res2",
-    surveyId: "survey1",
-    finished: false,
-    data: { q1: "Response 2 Text" },
-    createdAt: new Date("2023-01-02T10:00:00.000Z"),
-    updatedAt: new Date(),
-    meta: {},
-    singleUseId: null,
-    ttc: {},
-    tags: [],
-    notes: [],
-    variables: {},
-    language: "en",
-    contact: null,
-    contactAttributes: null,
-  },
-];
-
-const mockResponseTableData: TResponseTableData[] = [
-  {
-    responseId: "res1",
-    responseData: { q1: "Response 1 Text" },
-    createdAt: new Date("2023-01-01T10:00:00.000Z"),
-    status: "Completed",
-    tags: [],
-    notes: [],
-    variables: {},
-    verifiedEmail: "",
-    language: "en",
-    person: null,
-    contactAttributes: null,
-  },
-  {
-    responseId: "res2",
-    responseData: { q1: "Response 2 Text" },
-    createdAt: new Date("2023-01-02T10:00:00.000Z"),
-    status: "Not Completed",
-    tags: [],
-    notes: [],
-    variables: {},
-    verifiedEmail: "",
-    language: "en",
-    person: null,
-    contactAttributes: null,
-  },
-];
-
-const mockEnvironment = {
-  id: "env1",
-  createdAt: new Date(),
-  updatedAt: new Date(),
-  type: "development",
-  appSetupCompleted: false,
-} as unknown as TEnvironment;
-
-const mockUser = {
-  id: "user1",
-  name: "Test User",
-  email: "user@test.com",
-  emailVerified: new Date(),
-  imageUrl: "",
-  twoFactorEnabled: false,
-  identityProvider: "email",
-  createdAt: new Date(),
-  updatedAt: new Date(),
-  role: "project_manager",
-  objective: "other",
-  notificationSettings: { alert: {}, weeklySummary: {} },
-} as unknown as TUser;
-
-const mockEnvironmentTags: TTag[] = [
-  { id: "tag1", name: "Tag 1", environmentId: "env1", createdAt: new Date(), updatedAt: new Date() },
-];
-const mockLocale: TUserLocale = "en-US";
-
-const defaultProps = {
-  data: mockResponseTableData,
-  survey: mockSurvey,
-  responses: mockResponses,
-  environment: mockEnvironment,
-  user: mockUser,
-  environmentTags: mockEnvironmentTags,
+    name: "name",
+    type: "link",
+    environmentId: "env-1",
+    createdBy: null,
+    status: "draft",
+  } as TSurvey,
+  responses: [
+    { id: "resp1", surveyId: "survey1", data: {}, createdAt: new Date(), updatedAt: new Date() },
+    { id: "resp2", surveyId: "survey1", data: {}, createdAt: new Date(), updatedAt: new Date() },
+  ] as TResponse[],
+  environment: { id: "env1" } as TEnvironment,
+  environmentTags: [] as TTag[],
   isReadOnly: false,
   fetchNextPage: vi.fn(),
-  hasMore: true,
+  hasMore: false,
   deleteResponses: vi.fn(),
   updateResponse: vi.fn(),
   isFetchingFirstPage: false,
-  locale: mockLocale,
+  locale: "en" as TUserLocale,
 };
 
+// Setup a container for React Testing Library before each test
+beforeEach(() => {
+  const container = document.createElement("div");
+  container.id = "test-container";
+  document.body.appendChild(container);
+
+  // Reset all toast mocks before each test
+  vi.mocked(toast.error).mockClear();
+  vi.mocked(toast.success).mockClear();
+
+  // Create a mock anchor element for download tests
+  const mockAnchor = {
+    href: "",
+    click: vi.fn(),
+    style: {},
+  };
+
+  // Update how we mock the document methods to avoid infinite recursion
+  const originalCreateElement = document.createElement.bind(document);
+  vi.spyOn(document, "createElement").mockImplementation((tagName) => {
+    if (tagName === "a") return mockAnchor as any;
+    return originalCreateElement(tagName);
+  });
+
+  vi.spyOn(document.body, "appendChild").mockReturnValue(null as any);
+  vi.spyOn(document.body, "removeChild").mockReturnValue(null as any);
+});
+
+// Cleanup after each test
+afterEach(() => {
+  const container = document.getElementById("test-container");
+  if (container) {
+    document.body.removeChild(container);
+  }
+  cleanup();
+  vi.restoreAllMocks(); // Restore mocks after each test
+});
+
 describe("ResponseTable", () => {
   afterEach(() => {
-    cleanup();
-    localStorageMock.clear();
-    vi.clearAllMocks();
+    cleanup(); // Keep cleanup within describe as per instructions
   });
 
-  test("renders skeleton when isFetchingFirstPage is true", () => {
-    render(<ResponseTable {...defaultProps} isFetchingFirstPage={true} />);
-    // Check for skeleton elements (implementation detail, might need adjustment)
-    // For now, check that data is not directly rendered
-    expect(screen.queryByText("Response 1 Text")).not.toBeInTheDocument();
-    // Check if table headers are still there
-    expect(screen.getByText("Created At")).toBeInTheDocument();
+  test("renders the table with data", () => {
+    const container = document.getElementById("test-container");
+    render(<ResponseTable {...mockProps} />, { container: container! });
+    expect(screen.getByRole("table")).toBeInTheDocument();
+    expect(screen.getByTestId("table-toolbar")).toBeInTheDocument();
   });
 
-  test("loads settings from localStorage on mount", () => {
-    const savedOrder = ["q1", "createdAt", "select"];
-    const savedVisibility = { createdAt: false };
-    const savedExpanded = true;
-    localStorageMock.setItem(`${mockSurvey.id}-columnOrder`, JSON.stringify(savedOrder));
-    localStorageMock.setItem(`${mockSurvey.id}-columnVisibility`, JSON.stringify(savedVisibility));
-    localStorageMock.setItem(`${mockSurvey.id}-rowExpand`, JSON.stringify(savedExpanded));
-
-    render(<ResponseTable {...defaultProps} />);
-
-    // Check if generateResponseTableColumns was called with the loaded expanded state
-    expect(vi.mocked(generateResponseTableColumns)).toHaveBeenCalledWith(
-      mockSurvey,
-      savedExpanded,
-      false,
-      expect.any(Function)
-    );
-  });
-
-  test("saves settings to localStorage when they change", async () => {
-    const { rerender } = render(<ResponseTable {...defaultProps} />);
-
-    // Simulate column order change via DND
-    const dragEvent: DragEndEvent = {
-      active: { id: "createdAt" },
-      over: { id: "q1" },
-      delta: { x: 0, y: 0 },
-      activators: { x: 0, y: 0 },
-      collisions: null,
-      overNode: null,
-      activeNode: null,
-    } as any;
-    act(() => {
-      (DndContextMock as any).lastOnDragEnd?.(dragEvent);
-    });
-    rerender(<ResponseTable {...defaultProps} />); // Rerender to reflect state change if necessary for useEffect
-    expect(localStorageMock.setItem).toHaveBeenCalledWith(
-      `${mockSurvey.id}-columnOrder`,
-      JSON.stringify(["select", "q1", "createdAt"])
-    );
-
-    // Simulate visibility change (e.g. via settings modal - direct state change for test)
-    // This would typically happen via table.setColumnVisibility, which is internal to useReactTable
-    // For this test, we'll assume a mechanism changes columnVisibility state
-    // This part is hard to test without deeper mocking of useReactTable or exposing setColumnVisibility
-
-    // Simulate row expansion change
-    await userEvent.click(screen.getByTestId("toolbar-expand-toggle")); // Toggle to true
-    expect(localStorageMock.setItem).toHaveBeenCalledWith(`${mockSurvey.id}-rowExpand`, "true");
-  });
-
-  test("handles column drag and drop", () => {
-    render(<ResponseTable {...defaultProps} />);
-    const dragEvent: DragEndEvent = {
-      active: { id: "createdAt" },
-      over: { id: "q1" },
-      delta: { x: 0, y: 0 },
-      activators: { x: 0, y: 0 },
-      collisions: null,
-      overNode: null,
-      activeNode: null,
-    } as any;
-    act(() => {
-      (DndContextMock as any).lastOnDragEnd?.(dragEvent);
-    });
-    expect(arrayMoveMock).toHaveBeenCalledWith(expect.arrayContaining(["createdAt", "q1"]), 1, 2); // Example indices
-    expect(localStorageMock.setItem).toHaveBeenCalledWith(
-      `${mockSurvey.id}-columnOrder`,
-      JSON.stringify(["select", "q1", "createdAt"]) // Based on initial ['select', 'createdAt', 'q1']
-    );
-  });
-
-  test("interacts with DataTableToolbar: toggle expand, open settings, delete", async () => {
-    const deleteResponsesMock = vi.fn();
-    const deleteResponseActionMock = vi.mocked(deleteResponseAction);
-    render(<ResponseTable {...defaultProps} deleteResponses={deleteResponsesMock} />);
-
-    // Toggle expand
-    await userEvent.click(screen.getByTestId("toolbar-expand-toggle"));
-    expect(vi.mocked(generateResponseTableColumns)).toHaveBeenCalledWith(
-      mockSurvey,
-      true,
-      false,
-      expect.any(Function)
-    );
-    expect(localStorageMock.setItem).toHaveBeenCalledWith(`${mockSurvey.id}-rowExpand`, "true");
-
-    // Open settings
-    await userEvent.click(screen.getByTestId("toolbar-open-settings"));
-    expect(screen.getByTestId("data-table-settings-modal")).toBeInTheDocument();
-    await userEvent.click(screen.getByText("Close Settings"));
-    expect(screen.queryByTestId("data-table-settings-modal")).not.toBeInTheDocument();
-
-    // Delete selected (mock table selection)
-    // This requires mocking table.getSelectedRowModel().rows
-    // For simplicity, we assume the toolbar button calls deleteRows correctly
-    // The mock for DataTableToolbar calls props.deleteRows with hardcoded IDs for now.
-    // To test properly, we'd need to mock table.getSelectedRowModel
-    // For now, let's assume the mock toolbar calls it.
-    // await userEvent.click(screen.getByTestId("toolbar-delete-selected"));
-    // expect(deleteResponsesMock).toHaveBeenCalledWith(["row1_id", "row2_id"]); // From mock toolbar
-
-    // Delete single action
-    await userEvent.click(screen.getByTestId("toolbar-delete-single"));
-    expect(deleteResponseActionMock).toHaveBeenCalledWith({ responseId: "single_response_id" });
-  });
-
-  test("calls fetchNextPage when 'Load More' is clicked", async () => {
-    const fetchNextPageMock = vi.fn();
-    render(<ResponseTable {...defaultProps} fetchNextPage={fetchNextPageMock} />);
-    await userEvent.click(screen.getByText("common.load_more"));
-    expect(fetchNextPageMock).toHaveBeenCalled();
-  });
-
-  test("does not show 'Load More' if hasMore is false", () => {
-    render(<ResponseTable {...defaultProps} hasMore={false} />);
-    expect(screen.queryByText("common.load_more")).not.toBeInTheDocument();
-  });
-
-  test("shows 'No results' when data is empty", () => {
-    render(<ResponseTable {...defaultProps} data={[]} responses={[]} />);
+  test("renders no results message when data is empty", () => {
+    const container = document.getElementById("test-container");
+    render(<ResponseTable {...mockProps} data={[]} responses={[]} />, { container: container! });
     expect(screen.getByText("common.no_results")).toBeInTheDocument();
   });
 
-  test("deleteResponse function calls deleteResponseAction", async () => {
-    render(<ResponseTable {...defaultProps} />);
-    // This function is called by DataTableToolbar's deleteAction prop
-    // We can trigger it via the mocked DataTableToolbar
-    await userEvent.click(screen.getByTestId("toolbar-delete-single"));
-    expect(vi.mocked(deleteResponseAction)).toHaveBeenCalledWith({ responseId: "single_response_id" });
+  test("renders load more button when hasMore is true", () => {
+    const container = document.getElementById("test-container");
+    render(<ResponseTable {...mockProps} hasMore={true} />, { container: container! });
+    expect(screen.getByText("common.load_more")).toBeInTheDocument();
+  });
+
+  test("calls fetchNextPage when load more button is clicked", async () => {
+    const container = document.getElementById("test-container");
+    render(<ResponseTable {...mockProps} hasMore={true} />, { container: container! });
+    const loadMoreButton = screen.getByText("common.load_more");
+    await userEvent.click(loadMoreButton);
+    expect(mockProps.fetchNextPage).toHaveBeenCalledTimes(1);
+  });
+
+  test("opens settings modal when toolbar button is clicked", async () => {
+    const container = document.getElementById("test-container");
+    render(<ResponseTable {...mockProps} />, { container: container! });
+    const openSettingsButton = screen.getByTestId("open-settings");
+    await userEvent.click(openSettingsButton);
+    expect(screen.getByTestId("settings-modal")).toBeInTheDocument();
+  });
+
+  test("toggles expanded state when toolbar button is clicked", async () => {
+    const container = document.getElementById("test-container");
+    render(<ResponseTable {...mockProps} />, { container: container! });
+    const toggleExpandButton = screen.getByTestId("toggle-expand");
+
+    // Initially might be null, first click should set it to true
+    await userEvent.click(toggleExpandButton);
+    expect(mockLocalStorage.setItem).toHaveBeenCalledWith("survey1-rowExpand", expect.any(String));
+  });
+
+  test("calls downloadSelectedRows with csv format when toolbar button is clicked", async () => {
+    vi.mocked(getResponsesDownloadUrlAction).mockResolvedValueOnce({
+      data: "https://download.url/file.csv",
+    });
+
+    const container = document.getElementById("test-container");
+    render(<ResponseTable {...mockProps} />, { container: container! });
+    const downloadCsvButton = screen.getByTestId("download-csv");
+    await userEvent.click(downloadCsvButton);
+
+    expect(getResponsesDownloadUrlAction).toHaveBeenCalledWith({
+      surveyId: "survey1",
+      format: "csv",
+      filterCriteria: { responseIds: [] },
+    });
+
+    // Check if link was created and clicked
+    expect(document.createElement).toHaveBeenCalledWith("a");
+    const mockLink = document.createElement("a");
+    expect(mockLink.href).toBe("https://download.url/file.csv");
+    expect(document.body.appendChild).toHaveBeenCalled();
+    expect(mockLink.click).toHaveBeenCalled();
+    expect(document.body.removeChild).toHaveBeenCalled();
+  });
+
+  test("calls downloadSelectedRows with xlsx format when toolbar button is clicked", async () => {
+    vi.mocked(getResponsesDownloadUrlAction).mockResolvedValueOnce({
+      data: "https://download.url/file.xlsx",
+    });
+
+    const container = document.getElementById("test-container");
+    render(<ResponseTable {...mockProps} />, { container: container! });
+    const downloadXlsxButton = screen.getByTestId("download-xlsx");
+    await userEvent.click(downloadXlsxButton);
+
+    expect(getResponsesDownloadUrlAction).toHaveBeenCalledWith({
+      surveyId: "survey1",
+      format: "xlsx",
+      filterCriteria: { responseIds: [] },
+    });
+
+    // Check if link was created and clicked
+    expect(document.createElement).toHaveBeenCalledWith("a");
+    const mockLink = document.createElement("a");
+    expect(mockLink.href).toBe("https://download.url/file.xlsx");
+    expect(document.body.appendChild).toHaveBeenCalled();
+    expect(mockLink.click).toHaveBeenCalled();
+    expect(document.body.removeChild).toHaveBeenCalled();
+  });
+
+  // Test response modal
+  test("opens and closes response modal when a cell is clicked", async () => {
+    const container = document.getElementById("test-container");
+    render(<ResponseTable {...mockProps} />, { container: container! });
+    const cell = screen.getByTestId("cell-resp1_select-resp1");
+    await userEvent.click(cell);
+    expect(screen.getByTestId("response-modal")).toBeInTheDocument();
+    // Close the modal
+    const closeButton = screen.getByText("Close");
+    await userEvent.click(closeButton);
+
+    // Modal should be closed now
+    expect(screen.queryByTestId("response-modal")).not.toBeInTheDocument();
+  });
+
+  test("shows error toast when download action returns error", async () => {
+    const errorMsg = "Download failed";
+    vi.mocked(getResponsesDownloadUrlAction).mockResolvedValueOnce({
+      data: undefined,
+      serverError: errorMsg,
+    });
+    vi.mocked(getFormattedErrorMessage).mockReturnValueOnce(errorMsg);
+
+    // Reset document.createElement spy to fix the last test
+    vi.mocked(document.createElement).mockClear();
+
+    const container = document.getElementById("test-container");
+    render(<ResponseTable {...mockProps} />, { container: container! });
+    const downloadCsvButton = screen.getByTestId("download-csv");
+    await userEvent.click(downloadCsvButton);
+
+    await waitFor(() => {
+      expect(getResponsesDownloadUrlAction).toHaveBeenCalled();
+      expect(toast.error).toHaveBeenCalledWith("environments.surveys.responses.error_downloading_responses");
+    });
+  });
+
+  test("shows default error toast when download action returns no data", async () => {
+    vi.mocked(getResponsesDownloadUrlAction).mockResolvedValueOnce({
+      data: undefined,
+    });
+    vi.mocked(getFormattedErrorMessage).mockReturnValueOnce("");
+
+    const container = document.getElementById("test-container");
+    render(<ResponseTable {...mockProps} />, { container: container! });
+    const downloadCsvButton = screen.getByTestId("download-csv");
+    await userEvent.click(downloadCsvButton);
+
+    await waitFor(() => {
+      expect(getResponsesDownloadUrlAction).toHaveBeenCalled();
+      expect(toast.error).toHaveBeenCalledWith("environments.surveys.responses.error_downloading_responses");
+    });
+  });
+
+  test("shows error toast when download action throws exception", async () => {
+    vi.mocked(getResponsesDownloadUrlAction).mockRejectedValueOnce(new Error("Network error"));
+
+    const container = document.getElementById("test-container");
+    render(<ResponseTable {...mockProps} />, { container: container! });
+    const downloadCsvButton = screen.getByTestId("download-csv");
+    await userEvent.click(downloadCsvButton);
+
+    await waitFor(() => {
+      expect(getResponsesDownloadUrlAction).toHaveBeenCalled();
+      expect(toast.error).toHaveBeenCalledWith("environments.surveys.responses.error_downloading_responses");
+    });
+  });
+
+  test("does not create download link when download action fails", async () => {
+    // Clear any previous calls to document.createElement
+    vi.mocked(document.createElement).mockClear();
+
+    vi.mocked(getResponsesDownloadUrlAction).mockResolvedValueOnce({
+      data: undefined,
+      serverError: "Download failed",
+    });
+
+    // Create a fresh spy for createElement for this test only
+    const createElementSpy = vi.spyOn(document, "createElement");
+
+    const container = document.getElementById("test-container");
+    render(<ResponseTable {...mockProps} />, { container: container! });
+    const downloadCsvButton = screen.getByTestId("download-csv");
+    await userEvent.click(downloadCsvButton);
+
+    await waitFor(() => {
+      expect(getResponsesDownloadUrlAction).toHaveBeenCalled();
+      // Check specifically for "a" element creation, not any element
+      expect(createElementSpy).not.toHaveBeenCalledWith("a");
+    });
+  });
+
+  test("loads saved settings from localStorage on mount", () => {
+    const columnOrder = ["status", "person", "createdAt", "select"];
+    const columnVisibility = { status: false };
+    const isExpanded = true;
+
+    mockLocalStorage.getItem.mockImplementation((key) => {
+      if (key === "survey1-columnOrder") return JSON.stringify(columnOrder);
+      if (key === "survey1-columnVisibility") return JSON.stringify(columnVisibility);
+      if (key === "survey1-rowExpand") return JSON.stringify(isExpanded);
+      return null;
+    });
+
+    const container = document.getElementById("test-container");
+    render(<ResponseTable {...mockProps} />, { container: container! });
+
+    // Verify localStorage calls
+    expect(mockLocalStorage.getItem).toHaveBeenCalledWith("survey1-columnOrder");
+    expect(mockLocalStorage.getItem).toHaveBeenCalledWith("survey1-columnVisibility");
+    expect(mockLocalStorage.getItem).toHaveBeenCalledWith("survey1-rowExpand");
+
+    // The mock for generateResponseTableColumns returns this order:
+    // ["select", "createdAt", "person", "status"]
+    // Only visible columns should be rendered, in this order
+    const expectedHeaders = ["select", "createdAt", "person"];
+    const headers = screen.getAllByTestId(/^header-/);
+    expect(headers).toHaveLength(expectedHeaders.length);
+    expectedHeaders.forEach((columnId, index) => {
+      expect(headers[index]).toHaveAttribute("data-testid", `header-${columnId}`);
+    });
+
+    // Verify column visibility is applied
+    const statusHeader = screen.queryByTestId("header-status");
+    expect(statusHeader).not.toBeInTheDocument();
+
+    // Verify row expansion is applied
+    const toggleExpandButton = screen.getByTestId("toggle-expand");
+    expect(toggleExpandButton).toHaveAttribute("aria-pressed", "true");
   });
 });

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

@@ -3,6 +3,7 @@
 import { ResponseCardModal } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseCardModal";
 import { ResponseTableCell } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTableCell";
 import { generateResponseTableColumns } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTableColumns";
+import { getResponsesDownloadUrlAction } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/actions";
 import { deleteResponseAction } from "@/modules/analysis/components/SingleResponseCard/actions";
 import { Button } from "@/modules/ui/components/button";
 import {
@@ -25,15 +26,16 @@ import {
 import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
 import { SortableContext, arrayMove, horizontalListSortingStrategy } from "@dnd-kit/sortable";
 import { useAutoAnimate } from "@formkit/auto-animate/react";
+import * as Sentry from "@sentry/nextjs";
 import { VisibilityState, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import { useTranslate } from "@tolgee/react";
 import { useEffect, useMemo, useState } from "react";
+import toast from "react-hot-toast";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TResponse, TResponseTableData } from "@formbricks/types/responses";
 import { TSurvey } from "@formbricks/types/surveys/types";
 import { TTag } from "@formbricks/types/tags";
-import { TUser } from "@formbricks/types/user";
-import { TUserLocale } from "@formbricks/types/user";
+import { TUser, TUserLocale } from "@formbricks/types/user";
 
 interface ResponseTableProps {
   data: TResponseTableData[];
@@ -180,6 +182,32 @@ export const ResponseTable = ({
     await deleteResponseAction({ responseId });
   };
 
+  // Handle downloading selected responses
+  const downloadSelectedRows = async (responseIds: string[], format: "csv" | "xlsx") => {
+    try {
+      const downloadResponse = await getResponsesDownloadUrlAction({
+        surveyId: survey.id,
+        format: format,
+        filterCriteria: { responseIds },
+      });
+
+      if (downloadResponse?.data) {
+        const link = document.createElement("a");
+        link.href = downloadResponse.data;
+        link.download = "";
+
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+      } else {
+        toast.error(t("environments.surveys.responses.error_downloading_responses"));
+      }
+    } catch (error) {
+      Sentry.captureException(error);
+      toast.error(t("environments.surveys.responses.error_downloading_responses"));
+    }
+  };
+
   return (
     <div>
       <DndContext
@@ -193,9 +221,10 @@ export const ResponseTable = ({
           setIsTableSettingsModalOpen={setIsTableSettingsModalOpen}
           isExpanded={isExpanded ?? false}
           table={table}
-          deleteRows={deleteResponses}
+          deleteRowsAction={deleteResponses}
           type="response"
           deleteAction={deleteResponse}
+          downloadRowsAction={downloadSelectedRows}
         />
         <div className="w-fit max-w-full overflow-hidden overflow-x-auto rounded-xl border border-slate-200">
           <div className="w-full overflow-x-auto">

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

@@ -38,7 +38,7 @@ export const ResponseTableCell = ({
     <button
       type="button"
       aria-label="Expand response"
-      className="hidden flex-shrink-0 cursor-pointer items-center rounded-md border border-slate-200 bg-white p-2 group-hover:flex hover:border-slate-300 focus:outline-none"
+      className="hidden flex-shrink-0 cursor-pointer items-center rounded-md border border-slate-200 bg-white p-2 hover:border-slate-300 focus:outline-none group-hover:flex"
       onClick={handleCellClick}>
       <Maximize2Icon className="h-4 w-4" />
     </button>

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

@@ -1,3 +1,4 @@
+import { ResponseFilterProvider } from "@/app/(app)/environments/[environmentId]/components/ResponseFilterContext";
 import { SurveyAnalysisNavigation } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/SurveyAnalysisNavigation";
 import { ResponsePage } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponsePage";
 import Page from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/page";
@@ -61,6 +62,7 @@ vi.mock("@/lib/constants", () => ({
   SENTRY_DSN: "mock-sentry-dsn",
   WEBAPP_URL: "http://localhost:3000",
   RESPONSES_PER_PAGE: 10,
+  SESSION_MAX_AGE: 1000,
 }));
 
 vi.mock("@/lib/getSurveyUrl", () => ({
@@ -109,6 +111,14 @@ vi.mock("@/tolgee/server", () => ({
   getTranslate: async () => (key: string) => key,
 }));
 
+vi.mock("next/navigation", () => ({
+  useParams: () => ({
+    environmentId: "test-env-id",
+    surveyId: "test-survey-id",
+    sharingKey: null,
+  }),
+}));
+
 const mockEnvironmentId = "test-env-id";
 const mockSurveyId = "test-survey-id";
 const mockUserId = "test-user-id";
@@ -180,7 +190,7 @@ describe("ResponsesPage", () => {
   test("renders correctly with all data", async () => {
     const props = { params: mockParams };
     const jsx = await Page(props);
-    render(jsx);
+    render(<ResponseFilterProvider>{jsx}</ResponseFilterProvider>);
 
     await screen.findByTestId("page-content-wrapper");
     expect(screen.getByTestId("page-header")).toBeInTheDocument();
@@ -196,7 +206,6 @@ describe("ResponsesPage", () => {
         isReadOnly: false,
         user: mockUser,
         surveyDomain: mockSurveyDomain,
-        responseCount: 10,
       }),
       undefined
     );
@@ -206,7 +215,6 @@ describe("ResponsesPage", () => {
         environmentId: mockEnvironmentId,
         survey: mockSurvey,
         activeId: "responses",
-        initialTotalResponseCount: 10,
       }),
       undefined
     );

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

@@ -33,7 +33,8 @@ const Page = async (props) => {
 
   const tags = await getTagsByEnvironmentId(params.environmentId);
 
-  const totalResponseCount = await getResponseCountBySurveyId(params.surveyId);
+  // Get response count for the CTA component
+  const responseCount = await getResponseCountBySurveyId(params.surveyId);
 
   const locale = await findMatchingLocale();
   const surveyDomain = getSurveyDomain();
@@ -49,15 +50,10 @@ const Page = async (props) => {
             isReadOnly={isReadOnly}
             user={user}
             surveyDomain={surveyDomain}
-            responseCount={totalResponseCount}
+            responseCount={responseCount}
           />
         }>
-        <SurveyAnalysisNavigation
-          environmentId={environment.id}
-          survey={survey}
-          activeId="responses"
-          initialTotalResponseCount={totalResponseCount}
-        />
+        <SurveyAnalysisNavigation environmentId={environment.id} survey={survey} activeId="responses" />
       </PageHeader>
       <ResponsePage
         environment={environment}

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

@@ -41,7 +41,7 @@ export const ConsentSummary = ({ questionSummary, survey, setFilter }: ConsentSu
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
       <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
-      <div className="space-y-5 px-4 pt-4 pb-6 text-sm md:px-6 md:text-base">
+      <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
         {summaryItems.map((summaryItem) => {
           return (
             <button

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

@@ -80,7 +80,7 @@ export const DateQuestionSummary = ({
                   </div>
                 )}
               </div>
-              <div className="ph-no-capture col-span-2 pl-6 font-semibold whitespace-pre-wrap">
+              <div className="ph-no-capture col-span-2 whitespace-pre-wrap pl-6 font-semibold">
                 {renderResponseValue(response.value)}
               </div>
               <div className="px-4 text-slate-500 md:px-6">

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

@@ -80,7 +80,7 @@ export const FileUploadSummary = ({
                       return (
                         <div className="relative m-2 rounded-lg bg-slate-200" key={fileUrl}>
                           <a href={fileUrl} key={fileUrl} target="_blank" rel="noopener noreferrer">
-                            <div className="absolute top-0 right-0 m-2">
+                            <div className="absolute right-0 top-0 m-2">
                               <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-50 hover:bg-white">
                                 <DownloadIcon className="h-6 text-slate-500" />
                               </div>

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

@@ -28,7 +28,7 @@ export const HiddenFieldsSummary = ({ environment, questionSummary, locale }: Hi
   };
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
-      <div className="space-y-2 px-4 pt-6 pb-5 md:px-6">
+      <div className="space-y-2 px-4 pb-5 pt-6 md:px-6">
         <div className={"align-center flex justify-between gap-4"}>
           <h3 className="pb-1 text-lg font-semibold text-slate-900 md:text-xl">{questionSummary.id}</h3>
         </div>
@@ -76,7 +76,7 @@ export const HiddenFieldsSummary = ({ environment, questionSummary, locale }: Hi
                 </div>
               )}
             </div>
-            <div className="ph-no-capture col-span-2 pl-6 font-semibold whitespace-pre-wrap">
+            <div className="ph-no-capture col-span-2 whitespace-pre-wrap pl-6 font-semibold">
               {response.value}
             </div>
             <div className="px-4 text-slate-500 md:px-6">

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

@@ -52,7 +52,7 @@ export const MatrixQuestionSummary = ({ questionSummary, survey, setFilter }: Ma
         <table className="mx-auto border-collapse cursor-default text-left">
           <thead>
             <tr>
-              <th className="p-4 pt-0 pb-3 font-medium text-slate-400 dark:border-slate-600 dark:text-slate-200"></th>
+              <th className="p-4 pb-3 pt-0 font-medium text-slate-400 dark:border-slate-600 dark:text-slate-200"></th>
               {columns.map((column) => (
                 <th key={column} className="text-center font-medium">
                   <TooltipRenderer tooltipContent={getTooltipContent(column)} shouldRender={true}>
@@ -65,7 +65,7 @@ export const MatrixQuestionSummary = ({ questionSummary, survey, setFilter }: Ma
           <tbody>
             {questionSummary.data.map(({ rowLabel, columnPercentages }, rowIndex) => (
               <tr key={rowLabel}>
-                <td className="max-w-60 overflow-hidden p-4 text-ellipsis whitespace-nowrap">
+                <td className="max-w-60 overflow-hidden text-ellipsis whitespace-nowrap p-4">
                   <TooltipRenderer tooltipContent={getTooltipContent(rowLabel)} shouldRender={true}>
                     <p className="max-w-40 overflow-hidden text-ellipsis whitespace-nowrap">{rowLabel}</p>
                   </TooltipRenderer>

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

@@ -83,7 +83,7 @@ export const MultipleChoiceSummary = ({
           ) : undefined
         }
       />
-      <div className="space-y-5 px-4 pt-4 pb-6 text-sm md:px-6 md:text-base">
+      <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
         {results.map((result, resultsIdx) => (
           <Fragment key={result.value}>
             <button

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

@@ -62,7 +62,7 @@ export const NPSSummary = ({ questionSummary, survey, setFilter }: NPSSummaryPro
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
       <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
-      <div className="space-y-5 px-4 pt-4 pb-6 text-sm md:px-6 md:text-base">
+      <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
         {["promoters", "passives", "detractors", "dismissed"].map((group) => (
           <button
             className="w-full cursor-pointer hover:opacity-80"
@@ -72,7 +72,7 @@ export const NPSSummary = ({ questionSummary, survey, setFilter }: NPSSummaryPro
               className={`mb-2 flex justify-between ${group === "dismissed" ? "mb-2 border-t bg-white pt-4 text-sm md:text-base" : ""}`}>
               <div className="mr-8 flex space-x-1">
                 <p
-                  className={`font-semibold text-slate-700 capitalize ${group === "dismissed" ? "" : "text-slate-700"}`}>
+                  className={`font-semibold capitalize text-slate-700 ${group === "dismissed" ? "" : "text-slate-700"}`}>
                   {group}
                 </p>
                 <div>
@@ -94,7 +94,7 @@ export const NPSSummary = ({ questionSummary, survey, setFilter }: NPSSummaryPro
         ))}
       </div>
 
-      <div className="flex justify-center pt-4 pb-4">
+      <div className="flex justify-center pb-4 pt-4">
         <HalfCircle value={questionSummary.score} />
       </div>
     </div>

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

@@ -43,7 +43,7 @@ export const PictureChoiceSummary = ({ questionSummary, survey, setFilter }: Pic
           ) : undefined
         }
       />
-      <div className="space-y-5 px-4 pt-4 pb-6 text-sm md:px-6 md:text-base">
+      <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
         {results.map((result, index) => (
           <button
             className="w-full cursor-pointer hover:opacity-80"

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

@@ -26,7 +26,7 @@ export const QuestionSummaryHeader = ({
   const questionType = getQuestionTypes(t).find((type) => type.id === questionSummary.question.type);
 
   return (
-    <div className="space-y-2 px-4 pt-6 pb-5 md:px-6">
+    <div className="space-y-2 px-4 pb-5 pt-6 md:px-6">
       <div className={"align-center flex justify-between gap-4"}>
         <h3 className="pb-1 text-lg font-semibold text-slate-900 md:text-xl">
           {formatTextWithSlashes(

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

@@ -50,7 +50,7 @@ export const RatingSummary = ({ questionSummary, survey, setFilter }: RatingSumm
           </div>
         }
       />
-      <div className="space-y-5 px-4 pt-4 pb-6 text-sm md:px-6 md:text-base">
+      <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
         {questionSummary.choices.map((result) => (
           <button
             className="w-full cursor-pointer hover:opacity-80"

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

@@ -61,10 +61,10 @@ export const SummaryDropOffs = ({ dropOff, survey }: SummaryDropOffsProps) => {
                 )}
               </p>
             </div>
-            <div className="text-center font-semibold whitespace-pre-wrap">
+            <div className="whitespace-pre-wrap text-center font-semibold">
               {quesDropOff.ttc > 0 ? (quesDropOff.ttc / 1000).toFixed(2) + "s" : "N/A"}
             </div>
-            <div className="text-center font-semibold whitespace-pre-wrap">{quesDropOff.impressions}</div>
+            <div className="whitespace-pre-wrap text-center font-semibold">{quesDropOff.impressions}</div>
             <div className="pl-6 text-center md:px-6">
               <span className="mr-1.5 font-semibold">{quesDropOff.dropOffCount}</span>
               <span>({Math.round(quesDropOff.dropOffPercentage)}%)</span>

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

@@ -38,18 +38,10 @@ interface SummaryListProps {
   responseCount: number | null;
   environment: TEnvironment;
   survey: TSurvey;
-  totalResponseCount: number;
   locale: TUserLocale;
 }
 
-export const SummaryList = ({
-  summary,
-  environment,
-  responseCount,
-  survey,
-  totalResponseCount,
-  locale,
-}: SummaryListProps) => {
+export const SummaryList = ({ summary, environment, responseCount, survey, locale }: SummaryListProps) => {
   const { setSelectedFilter, selectedFilter } = useResponseFilter();
   const { t } = useTranslate();
   const setFilter = (
@@ -115,11 +107,7 @@ export const SummaryList = ({
           type="response"
           environment={environment}
           noWidgetRequired={survey.type === "link"}
-          emptyMessage={
-            totalResponseCount === 0
-              ? undefined
-              : t("environments.surveys.summary.no_response_matches_filter")
-          }
+          emptyMessage={t("environments.surveys.summary.no_responses_found")}
         />
       ) : (
         summary.map((questionSummary) => {

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

@@ -11,7 +11,11 @@ vi.mock("lucide-react", () => ({
 vi.mock("@/modules/ui/components/tooltip", () => ({
   TooltipProvider: ({ children }) => <>{children}</>,
   Tooltip: ({ children }) => <>{children}</>,
-  TooltipTrigger: ({ children }) => <>{children}</>,
+  TooltipTrigger: ({ children, onClick }) => (
+    <button tabIndex={0} onClick={onClick} style={{ display: "inline-block" }}>
+      {children}
+    </button>
+  ),
   TooltipContent: ({ children }) => <>{children}</>,
 }));
 
@@ -67,8 +71,10 @@ describe("SummaryMetadata", () => {
     expect(screen.getByText("25%")).toBeInTheDocument();
     expect(screen.getByText("1")).toBeInTheDocument();
     expect(screen.getByText("1m 5.00s")).toBeInTheDocument();
-    const btn = screen.getByRole("button");
-    expect(screen.queryByTestId("down")).toBeInTheDocument();
+    const btn = screen
+      .getAllByRole("button")
+      .find((el) => el.textContent?.includes("environments.surveys.summary.drop_offs"));
+    if (!btn) throw new Error("DropOffs toggle button not found");
     await userEvent.click(btn);
     expect(screen.queryByTestId("up")).toBeInTheDocument();
   });
@@ -101,8 +107,10 @@ describe("SummaryMetadata", () => {
     };
     render(<Wrapper />);
     expect(screen.getAllByText("-")).toHaveLength(1);
-    const btn = screen.getByRole("button");
-    expect(screen.queryByTestId("down")).toBeInTheDocument();
+    const btn = screen
+      .getAllByRole("button")
+      .find((el) => el.textContent?.includes("environments.surveys.summary.drop_offs"));
+    if (!btn) throw new Error("DropOffs toggle button not found");
     await userEvent.click(btn);
     expect(screen.queryByTestId("up")).toBeInTheDocument();
   });

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

@@ -100,8 +100,8 @@ export const SummaryMetadata = ({
 
         <TooltipProvider delayDuration={50}>
           <Tooltip>
-            <TooltipTrigger>
-              <div className="flex h-full cursor-default flex-col justify-between space-y-2 rounded-xl border border-slate-200 bg-white p-4 text-left shadow-sm">
+            <TooltipTrigger onClick={() => setShowDropOffs(!showDropOffs)} data-testid="dropoffs-toggle">
+              <div className="flex h-full cursor-pointer flex-col justify-between space-y-2 rounded-xl border border-slate-200 bg-white p-4 text-left shadow-sm">
                 <span className="text-sm text-slate-600">
                   {t("environments.surveys.summary.drop_offs")}
                   {`${Math.round(dropOffPercentage)}%` !== "NaN%" && !isLoading && (
@@ -117,15 +117,13 @@ export const SummaryMetadata = ({
                     )}
                   </span>
                   {!isLoading && (
-                    <button
-                      className="ml-1 flex items-center rounded-md bg-slate-800 px-2 py-1 text-xs text-slate-50 group-hover:bg-slate-700"
-                      onClick={() => setShowDropOffs(!showDropOffs)}>
+                    <span className="ml-1 flex items-center rounded-md bg-slate-800 px-2 py-1 text-xs text-slate-50 group-hover:bg-slate-700">
                       {showDropOffs ? (
                         <ChevronUpIcon className="h-4 w-4" />
                       ) : (
                         <ChevronDownIcon className="h-4 w-4" />
                       )}
-                    </button>
+                    </span>
                   )}
                 </div>
               </div>

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

@@ -1,30 +1,23 @@
 "use client";
 
 import { useResponseFilter } from "@/app/(app)/environments/[environmentId]/components/ResponseFilterContext";
-import {
-  getResponseCountAction,
-  getSurveySummaryAction,
-} from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/actions";
+import { getSurveySummaryAction } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/actions";
 import ScrollToTop from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ScrollToTop";
 import { SummaryDropOffs } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryDropOffs";
 import { CustomFilter } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/CustomFilter";
 import { ResultsShareButton } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ResultsShareButton";
 import { getFormattedFilters } from "@/app/lib/surveys/surveys";
-import {
-  getResponseCountBySurveySharingKeyAction,
-  getSummaryBySurveySharingKeyAction,
-} from "@/app/share/[sharingKey]/actions";
-import { useIntervalWhenFocused } from "@/lib/utils/hooks/useIntervalWhenFocused";
+import { getSummaryBySurveySharingKeyAction } from "@/app/share/[sharingKey]/actions";
 import { replaceHeadlineRecall } from "@/lib/utils/recall";
 import { useParams, useSearchParams } from "next/navigation";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TSurvey, TSurveySummary } from "@formbricks/types/surveys/types";
-import { TUser, TUserLocale } from "@formbricks/types/user";
+import { TUserLocale } from "@formbricks/types/user";
 import { SummaryList } from "./SummaryList";
 import { SummaryMetadata } from "./SummaryMetadata";
 
-const initialSurveySummary: TSurveySummary = {
+const defaultSurveySummary: TSurveySummary = {
   meta: {
     completedPercentage: 0,
     completedResponses: 0,
@@ -44,11 +37,9 @@ interface SummaryPageProps {
   survey: TSurvey;
   surveyId: string;
   webAppUrl: string;
-  user?: TUser;
-  totalResponseCount: number;
-  documentsPerPage?: number;
   locale: TUserLocale;
   isReadOnly: boolean;
+  initialSurveySummary?: TSurveySummary;
 }
 
 export const SummaryPage = ({
@@ -56,98 +47,69 @@ export const SummaryPage = ({
   survey,
   surveyId,
   webAppUrl,
-  totalResponseCount,
   locale,
   isReadOnly,
+  initialSurveySummary,
 }: SummaryPageProps) => {
   const params = useParams();
   const sharingKey = params.sharingKey as string;
   const isSharingPage = !!sharingKey;
 
   const searchParams = useSearchParams();
-  const isShareEmbedModalOpen = searchParams.get("share") === "true";
 
-  const [responseCount, setResponseCount] = useState<number | null>(null);
-  const [surveySummary, setSurveySummary] = useState<TSurveySummary>(initialSurveySummary);
+  const [surveySummary, setSurveySummary] = useState<TSurveySummary>(
+    initialSurveySummary || defaultSurveySummary
+  );
   const [showDropOffs, setShowDropOffs] = useState<boolean>(false);
-  const [isLoading, setIsLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(!initialSurveySummary);
 
   const { selectedFilter, dateRange, resetState } = useResponseFilter();
 
-  const filters = useMemo(
-    () => getFormattedFilters(survey, selectedFilter, dateRange),
-    [selectedFilter, dateRange, survey]
-  );
+  // Only fetch data when filters change or when there's no initial data
+  useEffect(() => {
+    // If we have initial data and no filters are applied, don't fetch
+    const hasNoFilters =
+      (!selectedFilter ||
+        Object.keys(selectedFilter).length === 0 ||
+        (selectedFilter.filter && selectedFilter.filter.length === 0)) &&
+      (!dateRange || (!dateRange.from && !dateRange.to));
 
-  // Use a ref to keep the latest state and props
-  const latestFiltersRef = useRef(filters);
-  latestFiltersRef.current = filters;
+    if (initialSurveySummary && hasNoFilters) {
+      setIsLoading(false);
+      return;
+    }
 
-  const getResponseCount = useCallback(() => {
-    if (isSharingPage)
-      return getResponseCountBySurveySharingKeyAction({
-        sharingKey,
-        filterCriteria: latestFiltersRef.current,
-      });
-    return getResponseCountAction({
-      surveyId,
-      filterCriteria: latestFiltersRef.current,
-    });
-  }, [isSharingPage, sharingKey, surveyId]);
-
-  const getSummary = useCallback(() => {
-    if (isSharingPage)
-      return getSummaryBySurveySharingKeyAction({
-        sharingKey,
-        filterCriteria: latestFiltersRef.current,
-      });
-
-    return getSurveySummaryAction({
-      surveyId,
-      filterCriteria: latestFiltersRef.current,
-    });
-  }, [isSharingPage, sharingKey, surveyId]);
-
-  const handleInitialData = useCallback(
-    async (isInitialLoad = false) => {
-      if (isInitialLoad) {
-        setIsLoading(true);
-      }
+    const fetchSummary = async () => {
+      setIsLoading(true);
 
       try {
-        const [updatedResponseCountData, updatedSurveySummary] = await Promise.all([
-          getResponseCount(),
-          getSummary(),
-        ]);
+        // Recalculate filters inside the effect to ensure we have the latest values
+        const currentFilters = getFormattedFilters(survey, selectedFilter, dateRange);
+        let updatedSurveySummary;
 
-        const responseCount = updatedResponseCountData?.data ?? 0;
-        const surveySummary = updatedSurveySummary?.data ?? initialSurveySummary;
+        if (isSharingPage) {
+          updatedSurveySummary = await getSummaryBySurveySharingKeyAction({
+            sharingKey,
+            filterCriteria: currentFilters,
+          });
+        } else {
+          updatedSurveySummary = await getSurveySummaryAction({
+            surveyId,
+            filterCriteria: currentFilters,
+          });
+        }
 
-        setResponseCount(responseCount);
+        const surveySummary = updatedSurveySummary?.data ?? defaultSurveySummary;
         setSurveySummary(surveySummary);
       } catch (error) {
         console.error(error);
       } finally {
-        if (isInitialLoad) {
-          setIsLoading(false);
-        }
+        setIsLoading(false);
       }
-    },
-    [getResponseCount, getSummary]
-  );
+    };
 
-  useEffect(() => {
-    handleInitialData(true);
-  }, [filters, isSharingPage, sharingKey, surveyId, handleInitialData]);
-
-  useIntervalWhenFocused(
-    () => {
-      handleInitialData(false);
-    },
-    10000,
-    !isShareEmbedModalOpen,
-    false
-  );
+    fetchSummary();
+  }, [selectedFilter, dateRange, survey.id, isSharingPage, sharingKey, surveyId, initialSurveySummary]);
 
   const surveyMemoized = useMemo(() => {
     return replaceHeadlineRecall(survey, "default");
@@ -177,10 +139,9 @@ export const SummaryPage = ({
       <ScrollToTop containerId="mainContent" />
       <SummaryList
         summary={surveySummary.summary}
-        responseCount={responseCount}
+        responseCount={surveySummary.meta.totalResponses}
         survey={surveyMemoized}
         environment={environment}
-        totalResponseCount={totalResponseCount}
         locale={locale}
       />
     </>

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

@@ -30,6 +30,7 @@ vi.mock("@/lib/constants", () => ({
   SMTP_HOST: "mock-smtp-host",
   SMTP_PORT: "mock-smtp-port",
   IS_POSTHOG_CONFIGURED: true,
+  SESSION_MAX_AGE: 1000,
 }));
 
 // Create a spy for refreshSingleUseId so we can override it in tests
@@ -50,6 +51,7 @@ vi.mock("next/navigation", () => ({
   useRouter: () => ({ push: mockPush }),
   useSearchParams: () => mockSearchParams,
   usePathname: () => "/current",
+  useParams: () => ({ environmentId: "env123", surveyId: "survey123" }),
 }));
 
 // Mock copySurveyLink to return a predictable string
@@ -68,6 +70,23 @@ vi.mock("@/lib/utils/helper", () => ({
   getFormattedErrorMessage: vi.fn((response) => response?.error || "Unknown error"),
 }));
 
+// Mock ResponseCountProvider dependencies
+vi.mock("@/app/(app)/environments/[environmentId]/components/ResponseFilterContext", () => ({
+  useResponseFilter: vi.fn(() => ({ selectedFilter: "all", dateRange: {} })),
+}));
+
+vi.mock("@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/actions", () => ({
+  getResponseCountAction: vi.fn(() => Promise.resolve({ data: 5 })),
+}));
+
+vi.mock("@/app/lib/surveys/surveys", () => ({
+  getFormattedFilters: vi.fn(() => []),
+}));
+
+vi.mock("@/app/share/[sharingKey]/actions", () => ({
+  getResponseCountBySurveySharingKeyAction: vi.fn(() => Promise.resolve({ data: 5 })),
+}));
+
 vi.spyOn(toast, "success");
 vi.spyOn(toast, "error");
 

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

@@ -171,7 +171,7 @@ export const SurveyAnalysisCTA = ({
       icon: SquarePenIcon,
       tooltip: t("common.edit"),
       onClick: () => {
-        responseCount && responseCount > 0
+        responseCount > 0
           ? setIsCautionDialogOpen(true)
           : router.push(`/environments/${environment.id}/surveys/${survey.id}/edit`);
       },

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/lib/survey-qr-code.tsx

@@ -28,7 +28,7 @@ export const useSurveyQRCode = (surveyUrl: string) => {
     } catch (error) {
       toast.error(t("environments.surveys.summary.failed_to_generate_qr_code"));
     }
-  }, [surveyUrl]);
+  }, [surveyUrl, t]);
 
   const downloadQRCode = () => {
     try {

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

@@ -758,7 +758,6 @@ describe("getSurveySummary", () => {
     expect(summary.dropOff).toBeDefined();
     expect(summary.summary).toBeDefined();
     expect(getSurvey).toHaveBeenCalledWith(mockSurveyId);
-    expect(getResponseCountBySurveyId).toHaveBeenCalledWith(mockSurveyId, undefined);
     expect(prisma.response.findMany).toHaveBeenCalled(); // Check if getResponsesForSummary was effectively called
     expect(getDisplayCountBySurveyId).toHaveBeenCalled();
   });
@@ -770,7 +769,6 @@ describe("getSurveySummary", () => {
 
   test("handles filterCriteria", async () => {
     const filterCriteria: TResponseFilterCriteria = { finished: true };
-    vi.mocked(getResponseCountBySurveyId).mockResolvedValue(2); // Assume 2 finished responses
     const finishedResponses = mockResponses
       .filter((r) => r.finished)
       .map((r) => ({ ...r, contactId: null, personAttributes: {} }));
@@ -778,7 +776,6 @@ describe("getSurveySummary", () => {
 
     await getSurveySummary(mockSurveyId, filterCriteria);
 
-    expect(getResponseCountBySurveyId).toHaveBeenCalledWith(mockSurveyId, filterCriteria);
     expect(prisma.response.findMany).toHaveBeenCalledWith(
       expect.objectContaining({
         where: expect.objectContaining({ surveyId: mockSurveyId }), // buildWhereClause is mocked

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

@@ -5,7 +5,6 @@ import { displayCache } from "@/lib/display/cache";
 import { getDisplayCountBySurveyId } from "@/lib/display/service";
 import { getLocalizedValue } from "@/lib/i18n/utils";
 import { responseCache } from "@/lib/response/cache";
-import { getResponseCountBySurveyId } from "@/lib/response/service";
 import { buildWhereClause } from "@/lib/response/utils";
 import { surveyCache } from "@/lib/survey/cache";
 import { getSurvey } from "@/lib/survey/service";
@@ -13,6 +12,7 @@ import { evaluateLogic, performActions } from "@/lib/surveyLogic/utils";
 import { validateInputs } from "@/lib/utils/validate";
 import { Prisma } from "@prisma/client";
 import { cache as reactCache } from "react";
+import { z } from "zod";
 import { prisma } from "@formbricks/database";
 import { ZId, ZOptionalNumber } from "@formbricks/types/common";
 import { DatabaseError, ResourceNotFoundError } from "@formbricks/types/errors";
@@ -917,22 +917,24 @@ export const getSurveySummary = reactCache(
           }
 
           const batchSize = 5000;
-          const responseCount = await getResponseCountBySurveyId(surveyId, filterCriteria);
-
           const hasFilter = Object.keys(filterCriteria ?? {}).length > 0;
 
-          const pages = Math.ceil(responseCount / batchSize);
+          // Use cursor-based pagination instead of count + offset to avoid expensive queries
+          const responses: TSurveySummaryResponse[] = [];
+          let cursor: string | undefined = undefined;
+          let hasMore = true;
 
-          // Create an array of batch fetch promises
-          const batchPromises = Array.from({ length: pages }, (_, i) =>
-            getResponsesForSummary(surveyId, batchSize, i * batchSize, filterCriteria)
-          );
+          while (hasMore) {
+            const batch = await getResponsesForSummary(surveyId, batchSize, 0, filterCriteria, cursor);
+            responses.push(...batch);
 
-          // Fetch all batches in parallel
-          const batchResults = await Promise.all(batchPromises);
-
-          // Combine all batch results
-          const responses = batchResults.flat();
+            if (batch.length < batchSize) {
+              hasMore = false;
+            } else {
+              // Use the last response's ID as cursor for next batch
+              cursor = batch[batch.length - 1].id;
+            }
+          }
 
           const responseIds = hasFilter ? responses.map((response) => response.id) : [];
 
@@ -972,7 +974,8 @@ export const getResponsesForSummary = reactCache(
     surveyId: string,
     limit: number,
     offset: number,
-    filterCriteria?: TResponseFilterCriteria
+    filterCriteria?: TResponseFilterCriteria,
+    cursor?: string
   ): Promise<TSurveySummaryResponse[]> =>
     cache(
       async () => {
@@ -980,18 +983,28 @@ export const getResponsesForSummary = reactCache(
           [surveyId, ZId],
           [limit, ZOptionalNumber],
           [offset, ZOptionalNumber],
-          [filterCriteria, ZResponseFilterCriteria.optional()]
+          [filterCriteria, ZResponseFilterCriteria.optional()],
+          [cursor, z.string().cuid2().optional()]
         );
 
         const queryLimit = limit ?? RESPONSES_PER_PAGE;
         const survey = await getSurvey(surveyId);
         if (!survey) return [];
         try {
+          const whereClause: Prisma.ResponseWhereInput = {
+            surveyId,
+            ...buildWhereClause(survey, filterCriteria),
+          };
+
+          // Add cursor condition for cursor-based pagination
+          if (cursor) {
+            whereClause.id = {
+              lt: cursor, // Get responses with ID less than cursor (for desc order)
+            };
+          }
+
           const responses = await prisma.response.findMany({
-            where: {
-              surveyId,
-              ...buildWhereClause(survey, filterCriteria),
-            },
+            where: whereClause,
             select: {
               id: true,
               data: true,
@@ -1013,6 +1026,9 @@ export const getResponsesForSummary = reactCache(
               {
                 createdAt: "desc",
               },
+              {
+                id: "desc", // Secondary sort by ID for consistent pagination
+              },
             ],
             take: queryLimit,
             skip: offset,
@@ -1043,7 +1059,9 @@ export const getResponsesForSummary = reactCache(
           throw error;
         }
       },
-      [`getResponsesForSummary-${surveyId}-${limit}-${offset}-${JSON.stringify(filterCriteria)}`],
+      [
+        `getResponsesForSummary-${surveyId}-${limit}-${offset}-${JSON.stringify(filterCriteria)}-${cursor || ""}`,
+      ],
       {
         tags: [responseCache.tag.bySurveyId(surveyId)],
       }

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

@@ -1,7 +1,9 @@
+import { ResponseFilterProvider } from "@/app/(app)/environments/[environmentId]/components/ResponseFilterContext";
 import { SurveyAnalysisNavigation } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/SurveyAnalysisNavigation";
 import { SummaryPage } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryPage";
+import { getSurveySummary } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/lib/surveySummary";
 import SurveyPage from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/page";
-import { DEFAULT_LOCALE, DOCUMENTS_PER_PAGE, WEBAPP_URL } from "@/lib/constants";
+import { DEFAULT_LOCALE, WEBAPP_URL } from "@/lib/constants";
 import { getSurveyDomain } from "@/lib/getSurveyUrl";
 import { getResponseCountBySurveyId } from "@/lib/response/service";
 import { getSurvey } from "@/lib/survey/service";
@@ -38,7 +40,7 @@ vi.mock("@/lib/constants", () => ({
   SENTRY_DSN: "mock-sentry-dsn",
   WEBAPP_URL: "http://localhost:3000",
   RESPONSES_PER_PAGE: 10,
-  DOCUMENTS_PER_PAGE: 10,
+  SESSION_MAX_AGE: 1000,
 }));
 
 vi.mock(
@@ -78,6 +80,13 @@ vi.mock("@/lib/user/service", () => ({
   getUser: vi.fn(),
 }));
 
+vi.mock(
+  "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/lib/surveySummary",
+  () => ({
+    getSurveySummary: vi.fn(),
+  })
+);
+
 vi.mock("@/modules/environments/lib/utils", () => ({
   getEnvironmentAuth: vi.fn(),
 }));
@@ -100,6 +109,11 @@ vi.mock("@/tolgee/server", () => ({
 
 vi.mock("next/navigation", () => ({
   notFound: vi.fn(),
+  useParams: () => ({
+    environmentId: "test-environment-id",
+    surveyId: "test-survey-id",
+    sharingKey: null,
+  }),
 }));
 
 const mockEnvironmentId = "test-environment-id";
@@ -172,6 +186,21 @@ const mockSession = {
   expires: new Date(Date.now() + 3600 * 1000).toISOString(), // 1 hour from now
 } as any;
 
+const mockSurveySummary = {
+  meta: {
+    completedPercentage: 75,
+    completedResponses: 15,
+    displayCount: 20,
+    dropOffPercentage: 25,
+    dropOffCount: 5,
+    startsPercentage: 80,
+    totalResponses: 20,
+    ttcAverage: 120,
+  },
+  dropOff: [],
+  summary: [],
+};
+
 describe("SurveyPage", () => {
   beforeEach(() => {
     vi.mocked(getEnvironmentAuth).mockResolvedValue({
@@ -183,6 +212,7 @@ describe("SurveyPage", () => {
     vi.mocked(getUser).mockResolvedValue(mockUser);
     vi.mocked(getResponseCountBySurveyId).mockResolvedValue(10);
     vi.mocked(getSurveyDomain).mockReturnValue("test.domain.com");
+    vi.mocked(getSurveySummary).mockResolvedValue(mockSurveySummary);
     vi.mocked(notFound).mockClear();
   });
 
@@ -193,7 +223,8 @@ describe("SurveyPage", () => {
 
   test("renders correctly with valid data", async () => {
     const params = Promise.resolve({ environmentId: mockEnvironmentId, surveyId: mockSurveyId });
-    render(await SurveyPage({ params }));
+    const jsx = await SurveyPage({ params });
+    render(<ResponseFilterProvider>{jsx}</ResponseFilterProvider>);
 
     expect(screen.getByTestId("page-content-wrapper")).toBeInTheDocument();
     expect(screen.getByTestId("page-header")).toBeInTheDocument();
@@ -204,7 +235,6 @@ describe("SurveyPage", () => {
     expect(vi.mocked(getEnvironmentAuth)).toHaveBeenCalledWith(mockEnvironmentId);
     expect(vi.mocked(getSurvey)).toHaveBeenCalledWith(mockSurveyId);
     expect(vi.mocked(getUser)).toHaveBeenCalledWith(mockUserId);
-    expect(vi.mocked(getResponseCountBySurveyId)).toHaveBeenCalledWith(mockSurveyId);
     expect(vi.mocked(getSurveyDomain)).toHaveBeenCalled();
 
     expect(vi.mocked(SurveyAnalysisNavigation).mock.calls[0][0]).toEqual(
@@ -212,7 +242,6 @@ describe("SurveyPage", () => {
         environmentId: mockEnvironmentId,
         survey: mockSurvey,
         activeId: "summary",
-        initialTotalResponseCount: 10,
       })
     );
 
@@ -222,18 +251,17 @@ describe("SurveyPage", () => {
         survey: mockSurvey,
         surveyId: mockSurveyId,
         webAppUrl: WEBAPP_URL,
-        user: mockUser,
-        totalResponseCount: 10,
-        documentsPerPage: DOCUMENTS_PER_PAGE,
         isReadOnly: false,
         locale: mockUser.locale ?? DEFAULT_LOCALE,
+        initialSurveySummary: mockSurveySummary,
       })
     );
   });
 
   test("calls notFound if surveyId is not present in params", async () => {
     const params = Promise.resolve({ environmentId: mockEnvironmentId, surveyId: undefined }) as any;
-    render(await SurveyPage({ params }));
+    const jsx = await SurveyPage({ params });
+    render(<ResponseFilterProvider>{jsx}</ResponseFilterProvider>);
     expect(vi.mocked(notFound)).toHaveBeenCalled();
   });
 
@@ -243,7 +271,7 @@ describe("SurveyPage", () => {
     try {
       // We need to await the component itself because it's an async component
       const SurveyPageComponent = await SurveyPage({ params });
-      render(SurveyPageComponent);
+      render(<ResponseFilterProvider>{SurveyPageComponent}</ResponseFilterProvider>);
     } catch (e: any) {
       expect(e.message).toBe("common.survey_not_found");
     }
@@ -256,7 +284,7 @@ describe("SurveyPage", () => {
     const params = Promise.resolve({ environmentId: mockEnvironmentId, surveyId: mockSurveyId });
     try {
       const SurveyPageComponent = await SurveyPage({ params });
-      render(SurveyPageComponent);
+      render(<ResponseFilterProvider>{SurveyPageComponent}</ResponseFilterProvider>);
     } catch (e: any) {
       expect(e.message).toBe("common.user_not_found");
     }

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

@@ -1,9 +1,9 @@
 import { SurveyAnalysisNavigation } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/SurveyAnalysisNavigation";
 import { SummaryPage } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryPage";
 import { SurveyAnalysisCTA } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SurveyAnalysisCTA";
-import { DEFAULT_LOCALE, DOCUMENTS_PER_PAGE, WEBAPP_URL } from "@/lib/constants";
+import { getSurveySummary } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/lib/surveySummary";
+import { DEFAULT_LOCALE, WEBAPP_URL } from "@/lib/constants";
 import { getSurveyDomain } from "@/lib/getSurveyUrl";
-import { getResponseCountBySurveyId } from "@/lib/response/service";
 import { getSurvey } from "@/lib/survey/service";
 import { getUser } from "@/lib/user/service";
 import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
@@ -37,10 +37,8 @@ const SurveyPage = async (props: { params: Promise<{ environmentId: string; surv
     throw new Error(t("common.user_not_found"));
   }
 
-  const totalResponseCount = await getResponseCountBySurveyId(params.surveyId);
-
-  // I took this out cause it's cloud only right?
-  // const { active: isEnterpriseEdition } = await getEnterpriseLicense();
+  // Fetch initial survey summary data on the server to prevent duplicate API calls during hydration
+  const initialSurveySummary = await getSurveySummary(surveyId);
 
   const surveyDomain = getSurveyDomain();
 
@@ -55,26 +53,19 @@ const SurveyPage = async (props: { params: Promise<{ environmentId: string; surv
             isReadOnly={isReadOnly}
             user={user}
             surveyDomain={surveyDomain}
-            responseCount={totalResponseCount}
+            responseCount={initialSurveySummary?.meta.totalResponses ?? 0}
           />
         }>
-        <SurveyAnalysisNavigation
-          environmentId={environment.id}
-          survey={survey}
-          activeId="summary"
-          initialTotalResponseCount={totalResponseCount}
-        />
+        <SurveyAnalysisNavigation environmentId={environment.id} survey={survey} activeId="summary" />
       </PageHeader>
       <SummaryPage
         environment={environment}
         survey={survey}
         surveyId={params.surveyId}
         webAppUrl={WEBAPP_URL}
-        user={user}
-        totalResponseCount={totalResponseCount}
-        documentsPerPage={DOCUMENTS_PER_PAGE}
         isReadOnly={isReadOnly}
         locale={user.locale ?? DEFAULT_LOCALE}
+        initialSurveySummary={initialSurveySummary}
       />
 
       <SettingsId title={t("common.survey_id")} id={surveyId}></SettingsId>

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

@@ -96,7 +96,7 @@ const checkSurveyFollowUpsPermission = async (organizationId: string): Promise<v
     throw new ResourceNotFoundError("Organization not found", organizationId);
   }
 
-  const isSurveyFollowUpsEnabled = getSurveyFollowUpsPermission(organization.billing.plan);
+  const isSurveyFollowUpsEnabled = await getSurveyFollowUpsPermission(organization.billing.plan);
   if (!isSurveyFollowUpsEnabled) {
     throw new OperationNotAllowedError("Survey follow ups are not enabled for this organization");
   }

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

@@ -250,6 +250,7 @@ export const CustomFilter = ({ survey }: CustomFilterProps) => {
       if (responsesDownloadUrlResponse?.data) {
         const link = document.createElement("a");
         link.href = responsesDownloadUrlResponse.data;
+        link.download = "";
         document.body.appendChild(link);
         link.click();
         document.body.removeChild(link);
@@ -390,7 +391,7 @@ export const CustomFilter = ({ survey }: CustomFilterProps) => {
                 value && handleDatePickerClose();
               }}>
               <DropdownMenuTrigger asChild className="focus:bg-muted cursor-pointer outline-none">
-                <div className="h-auto min-w-auto rounded-md border border-slate-200 bg-white p-3 hover:border-slate-300 sm:flex sm:px-6 sm:py-3">
+                <div className="min-w-auto h-auto rounded-md border border-slate-200 bg-white p-3 hover:border-slate-300 sm:flex sm:px-6 sm:py-3">
                   <div className="hidden w-full items-center justify-between sm:flex">
                     <span className="text-sm text-slate-700">{t("common.download")}</span>
                     <ArrowDownToLineIcon className="ml-2 h-4 w-4" />

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

@@ -91,7 +91,7 @@ export const QuestionFilterComboBox = ({
             key={`${o}-${index}`}
             type="button"
             onClick={() => handleRemoveMultiSelect(filterComboBoxValue.filter((i) => i !== o))}
-            className="flex w-30 items-center bg-slate-100 px-2 whitespace-nowrap text-slate-600">
+            className="w-30 flex items-center whitespace-nowrap bg-slate-100 px-2 text-slate-600">
             {o}
             <X width={14} height={14} className="ml-2" />
           </button>
@@ -129,7 +129,7 @@ export const QuestionFilterComboBox = ({
           <DropdownMenuTrigger
             disabled={disabled}
             className={clsx(
-              "h-9 max-w-fit rounded-md rounded-r-none border-r-[1px] border-slate-300 bg-white p-2 text-sm text-slate-600 focus:ring-0 focus:outline-transparent",
+              "h-9 max-w-fit rounded-md rounded-r-none border-r-[1px] border-slate-300 bg-white p-2 text-sm text-slate-600 focus:outline-transparent focus:ring-0",
               !disabled ? "cursor-pointer" : "opacity-50"
             )}>
             <div className="flex items-center justify-between">

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

@@ -38,6 +38,7 @@ vi.mock("@/lib/constants", () => ({
   POSTHOG_API_KEY: "test-posthog-api-key",
   FORMBRICKS_ENVIRONMENT_ID: "mock-formbricks-environment-id",
   IS_FORMBRICKS_ENABLED: true,
+  SESSION_MAX_AGE: 1000,
 }));
 
 vi.mock("@/app/intercom/IntercomClientWrapper", () => ({

apps/web/app/(auth)/email-change-without-verification-success/page.test.tsx

@@ -0,0 +1,20 @@
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import EmailChangeWithoutVerificationSuccessPage from "./page";
+
+vi.mock("@/modules/auth/email-change-without-verification-success/page", () => ({
+  EmailChangeWithoutVerificationSuccessPage: ({ children }) => (
+    <div data-testid="email-change-success-page">{children}</div>
+  ),
+}));
+
+describe("EmailChangeWithoutVerificationSuccessPage", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("renders EmailChangeWithoutVerificationSuccessPage", () => {
+    const { getByTestId } = render(<EmailChangeWithoutVerificationSuccessPage />);
+    expect(getByTestId("email-change-success-page")).toBeInTheDocument();
+  });
+});

apps/web/app/(auth)/email-change-without-verification-success/page.tsx

@@ -0,0 +1,3 @@
+import { EmailChangeWithoutVerificationSuccessPage } from "@/modules/auth/email-change-without-verification-success/page";
+
+export default EmailChangeWithoutVerificationSuccessPage;

apps/web/app/(auth)/verify-email-change/page.tsx

@@ -0,0 +1,3 @@
+import { VerifyEmailChangePage } from "@/modules/auth/verify-email-change/page";
+
+export default VerifyEmailChangePage;

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

@@ -57,6 +57,10 @@ export const PUT = async (
     return handleDatabaseError(error, request.url, endpoint, responseId);
   }
 
+  if (response.finished) {
+    return responses.badRequestResponse("Response is already finished", undefined, true);
+  }
+
   // get survey to get environmentId
   let survey;
   try {

apps/web/app/api/v1/og/route.tsx

@@ -7,39 +7,133 @@ export const GET = async (req: NextRequest) => {
 
   return new ImageResponse(
     (
-      <div tw={`flex flex-col w-full h-full items-center  bg-[${brandColor}]/75 rounded-xl `}>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          width: "100%",
+          height: "100%",
+          alignItems: "center",
+          backgroundColor: brandColor ? brandColor + "BF" : "#0000BFBF", // /75 opacity is approximately BF in hex
+          borderRadius: "0.75rem",
+        }}>
         <div
-          tw="flex flex-col w-[80%] h-[60%] bg-white rounded-xl mt-13 absolute left-12 top-3 opacity-20"
           style={{
+            display: "flex",
+            flexDirection: "column",
+            width: "80%",
+            height: "60%",
+            backgroundColor: "white",
+            borderRadius: "0.75rem",
+            marginTop: "3.25rem",
+            position: "absolute",
+            left: "3rem",
+            top: "0.75rem",
+            opacity: 0.2,
             transform: "rotate(356deg)",
           }}></div>
         <div
-          tw="flex flex-col w-[84%] h-[60%] bg-white rounded-xl mt-12 absolute top-5 left-13  border-2 opacity-60"
           style={{
+            display: "flex",
+            flexDirection: "column",
+            width: "84%",
+            height: "60%",
+            backgroundColor: "white",
+            borderRadius: "0.75rem",
+            marginTop: "3rem",
+            position: "absolute",
+            top: "1.25rem",
+            left: "3.25rem",
+            borderWidth: "2px",
+            opacity: 0.6,
             transform: "rotate(357deg)",
           }}></div>
         <div
-          tw="flex flex-col w-[85%] h-[67%] items-center  bg-white rounded-xl  mt-8 absolute top-[2.3rem] left-14"
           style={{
+            display: "flex",
+            flexDirection: "column",
+            width: "85%",
+            height: "67%",
+            alignItems: "center",
+            backgroundColor: "white",
+            borderRadius: "0.75rem",
+            marginTop: "2rem",
+            position: "absolute",
+            top: "2.3rem",
+            left: "3.5rem",
             transform: "rotate(360deg)",
           }}>
-          <div tw="flex flex-col w-full">
-            <div tw="flex flex-col md:flex-row w-full md:items-center justify-between ">
-              <div tw="flex flex-col  px-8">
-                <h2 tw="flex flex-col text-[8] sm:text-4xl font-bold tracking-tight text-slate-900 text-left mt-15">
+          <div style={{ display: "flex", flexDirection: "column", width: "100%" }}>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                width: "100%",
+                justifyContent: "space-between",
+              }}>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  paddingLeft: "2rem",
+                  paddingRight: "2rem",
+                }}>
+                <h2
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    fontSize: "2rem",
+                    fontWeight: "700",
+                    letterSpacing: "-0.025em",
+                    color: "#0f172a",
+                    textAlign: "left",
+                    marginTop: "3.75rem",
+                  }}>
                   {name}
                 </h2>
               </div>
             </div>
-            <div tw="flex justify-end mr-10 ">
-              <div tw="flex rounded-2xl absolute -right-2 mt-2">
-                <a tw={`rounded-xl border border-transparent bg-[${brandColor}] h-18 w-38 opacity-50`}></a>
+            <div style={{ display: "flex", justifyContent: "flex-end", marginRight: "2.5rem" }}>
+              <div
+                style={{
+                  display: "flex",
+                  borderRadius: "1rem",
+                  position: "absolute",
+                  right: "-0.5rem",
+                  marginTop: "0.5rem",
+                }}>
+                <div
+                  content=""
+                  style={{
+                    borderRadius: "0.75rem",
+                    border: "1px solid transparent",
+                    backgroundColor: brandColor ?? "#000",
+                    height: "4.5rem",
+                    width: "9.5rem",
+                    opacity: 0.5,
+                  }}></div>
               </div>
-              <div tw="flex rounded-2xl shadow ">
-                <a
-                  tw={`flex items-center justify-center rounded-xl border border-transparent bg-[${brandColor}] text-2xl text-white h-18 w-38`}>
+              <div
+                style={{
+                  display: "flex",
+                  borderRadius: "1rem",
+                  boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+                }}>
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    borderRadius: "0.75rem",
+                    border: "1px solid transparent",
+                    backgroundColor: brandColor ?? "#000",
+                    fontSize: "1.5rem",
+                    color: "white",
+                    height: "4.5rem",
+                    width: "9.5rem",
+                  }}>
                   Begin!
-                </a>
+                </div>
               </div>
             </div>
           </div>

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

@@ -3,6 +3,7 @@ import { verifyRecaptchaToken } from "@/app/api/v2/client/[environmentId]/respon
 import { checkSurveyValidity } from "@/app/api/v2/client/[environmentId]/responses/lib/utils";
 import { TResponseInputV2 } from "@/app/api/v2/client/[environmentId]/responses/types/response";
 import { responses } from "@/app/lib/api/response";
+import { symmetricDecrypt } from "@/lib/crypto";
 import { getIsSpamProtectionEnabled } from "@/modules/ee/license-check/lib/utils";
 import { Organization } from "@prisma/client";
 import { beforeEach, describe, expect, test, vi } from "vitest";
@@ -40,6 +41,13 @@ vi.mock("@formbricks/logger", () => ({
   },
 }));
 
+vi.mock("@/lib/crypto", () => ({
+  symmetricDecrypt: vi.fn(),
+}));
+vi.mock("@/lib/constants", () => ({
+  ENCRYPTION_KEY: "test-key",
+}));
+
 const mockSurvey: TSurvey = {
   id: "survey-1",
   createdAt: new Date(),
@@ -206,4 +214,119 @@ describe("checkSurveyValidity", () => {
     const result = await checkSurveyValidity(survey, "env-1", mockResponseInput);
     expect(result).toBeNull();
   });
+
+  test("should return badRequestResponse if singleUse is enabled and singleUseId is missing", async () => {
+    const survey = { ...mockSurvey, singleUse: { enabled: true, isEncrypted: false } };
+    const result = await checkSurveyValidity(survey, "env-1", { ...mockResponseInput });
+    expect(result).toBeInstanceOf(Response);
+    expect(result?.status).toBe(400);
+    expect(responses.badRequestResponse).toHaveBeenCalledWith("Missing single use id", {
+      surveyId: survey.id,
+      environmentId: "env-1",
+    });
+  });
+
+  test("should return badRequestResponse if singleUse is enabled and meta.url is missing", async () => {
+    const survey = { ...mockSurvey, singleUse: { enabled: true, isEncrypted: false } };
+    const result = await checkSurveyValidity(survey, "env-1", {
+      ...mockResponseInput,
+      singleUseId: "su-1",
+      meta: {},
+    });
+    expect(result).toBeInstanceOf(Response);
+    expect(result?.status).toBe(400);
+    expect(responses.badRequestResponse).toHaveBeenCalledWith("Missing or invalid URL in response metadata", {
+      surveyId: survey.id,
+      environmentId: "env-1",
+    });
+  });
+
+  test("should return badRequestResponse if meta.url is invalid", async () => {
+    const survey = { ...mockSurvey, singleUse: { enabled: true, isEncrypted: false } };
+    const result = await checkSurveyValidity(survey, "env-1", {
+      ...mockResponseInput,
+      singleUseId: "su-1",
+      meta: { url: "not-a-url" },
+    });
+    expect(result).toBeInstanceOf(Response);
+    expect(result?.status).toBe(400);
+    expect(responses.badRequestResponse).toHaveBeenCalledWith(
+      "Invalid URL in response metadata",
+      expect.objectContaining({ surveyId: survey.id, environmentId: "env-1" })
+    );
+  });
+
+  test("should return badRequestResponse if suId is missing from url", async () => {
+    const survey = { ...mockSurvey, singleUse: { enabled: true, isEncrypted: false } };
+    const url = "https://example.com/?foo=bar";
+    const result = await checkSurveyValidity(survey, "env-1", {
+      ...mockResponseInput,
+      singleUseId: "su-1",
+      meta: { url },
+    });
+    expect(result).toBeInstanceOf(Response);
+    expect(result?.status).toBe(400);
+    expect(responses.badRequestResponse).toHaveBeenCalledWith("Missing single use id", {
+      surveyId: survey.id,
+      environmentId: "env-1",
+    });
+  });
+
+  test("should return badRequestResponse if isEncrypted and decrypted suId does not match singleUseId", async () => {
+    const survey = { ...mockSurvey, singleUse: { enabled: true, isEncrypted: true } };
+    const url = "https://example.com/?suId=encrypted-id";
+    vi.mocked(symmetricDecrypt).mockReturnValue("decrypted-id");
+    const resultEncryptedMismatch = await checkSurveyValidity(survey, "env-1", {
+      ...mockResponseInput,
+      singleUseId: "su-1",
+      meta: { url },
+    });
+    expect(symmetricDecrypt).toHaveBeenCalledWith("encrypted-id", "test-key");
+    expect(resultEncryptedMismatch).toBeInstanceOf(Response);
+    expect(resultEncryptedMismatch?.status).toBe(400);
+    expect(responses.badRequestResponse).toHaveBeenCalledWith("Invalid single use id", {
+      surveyId: survey.id,
+      environmentId: "env-1",
+    });
+  });
+
+  test("should return badRequestResponse if not encrypted and suId does not match singleUseId", async () => {
+    const survey = { ...mockSurvey, singleUse: { enabled: true, isEncrypted: false } };
+    const url = "https://example.com/?suId=su-2";
+    const result = await checkSurveyValidity(survey, "env-1", {
+      ...mockResponseInput,
+      singleUseId: "su-1",
+      meta: { url },
+    });
+    expect(result).toBeInstanceOf(Response);
+    expect(result?.status).toBe(400);
+    expect(responses.badRequestResponse).toHaveBeenCalledWith("Invalid single use id", {
+      surveyId: survey.id,
+      environmentId: "env-1",
+    });
+  });
+
+  test("should return null if singleUse is enabled, not encrypted, and suId matches singleUseId", async () => {
+    const survey = { ...mockSurvey, singleUse: { enabled: true, isEncrypted: false } };
+    const url = "https://example.com/?suId=su-1";
+    const result = await checkSurveyValidity(survey, "env-1", {
+      ...mockResponseInput,
+      singleUseId: "su-1",
+      meta: { url },
+    });
+    expect(result).toBeNull();
+  });
+
+  test("should return null if singleUse is enabled, encrypted, and decrypted suId matches singleUseId", async () => {
+    const survey = { ...mockSurvey, singleUse: { enabled: true, isEncrypted: true } };
+    const url = "https://example.com/?suId=encrypted-id";
+    vi.mocked(symmetricDecrypt).mockReturnValue("su-1");
+    const _resultEncryptedMatch = await checkSurveyValidity(survey, "env-1", {
+      ...mockResponseInput,
+      singleUseId: "su-1",
+      meta: { url },
+    });
+    expect(symmetricDecrypt).toHaveBeenCalledWith("encrypted-id", "test-key");
+    expect(_resultEncryptedMatch).toBeNull();
+  });
 });

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

@@ -2,6 +2,8 @@ import { getOrganizationBillingByEnvironmentId } from "@/app/api/v2/client/[envi
 import { verifyRecaptchaToken } from "@/app/api/v2/client/[environmentId]/responses/lib/recaptcha";
 import { TResponseInputV2 } from "@/app/api/v2/client/[environmentId]/responses/types/response";
 import { responses } from "@/app/lib/api/response";
+import { ENCRYPTION_KEY } from "@/lib/constants";
+import { symmetricDecrypt } from "@/lib/crypto";
 import { getIsSpamProtectionEnabled } from "@/modules/ee/license-check/lib/utils";
 import { logger } from "@formbricks/logger";
 import { TSurvey } from "@formbricks/types/surveys/types";
@@ -24,6 +26,55 @@ export const checkSurveyValidity = async (
     );
   }
 
+  if (survey.type === "link" && survey.singleUse?.enabled) {
+    if (!responseInput.singleUseId) {
+      return responses.badRequestResponse("Missing single use id", {
+        surveyId: survey.id,
+        environmentId,
+      });
+    }
+
+    if (!responseInput.meta?.url) {
+      return responses.badRequestResponse("Missing or invalid URL in response metadata", {
+        surveyId: survey.id,
+        environmentId,
+      });
+    }
+
+    let url;
+    try {
+      url = new URL(responseInput.meta.url);
+    } catch (error) {
+      return responses.badRequestResponse("Invalid URL in response metadata", {
+        surveyId: survey.id,
+        environmentId,
+        error: error.message,
+      });
+    }
+    const suId = url.searchParams.get("suId");
+    if (!suId) {
+      return responses.badRequestResponse("Missing single use id", {
+        surveyId: survey.id,
+        environmentId,
+      });
+    }
+
+    if (survey.singleUse.isEncrypted) {
+      const decryptedSuId = symmetricDecrypt(suId, ENCRYPTION_KEY);
+      if (decryptedSuId !== responseInput.singleUseId) {
+        return responses.badRequestResponse("Invalid single use id", {
+          surveyId: survey.id,
+          environmentId,
+        });
+      }
+    } else if (responseInput.singleUseId !== suId) {
+      return responses.badRequestResponse("Invalid single use id", {
+        surveyId: survey.id,
+        environmentId,
+      });
+    }
+  }
+
   if (survey.recaptcha?.enabled) {
     if (!responseInput.recaptchaToken) {
       logger.error("Missing recaptcha token");

apps/web/app/middleware/endpoint-validator.test.ts

@@ -59,7 +59,6 @@ describe("endpoint-validator", () => {
 
   describe("isClientSideApiRoute", () => {
     test("should return true for client-side API routes", () => {
-      expect(isClientSideApiRoute("/api/packages/something")).toBe(true);
       expect(isClientSideApiRoute("/api/v1/js/actions")).toBe(true);
       expect(isClientSideApiRoute("/api/v1/client/storage")).toBe(true);
       expect(isClientSideApiRoute("/api/v1/client/other")).toBe(true);

apps/web/app/middleware/endpoint-validator.ts

@@ -8,7 +8,6 @@ export const isVerifyEmailRoute = (url: string) => url === "/auth/verify-email";
 export const isForgotPasswordRoute = (url: string) => url === "/auth/forgot-password";
 
 export const isClientSideApiRoute = (url: string): boolean => {
-  if (url.includes("/api/packages/")) return true;
   if (url.includes("/api/v1/js/actions")) return true;
   if (url.includes("/api/v1/client/storage")) return true;
   const regex = /^\/api\/v\d+\/client\//;

apps/web/app/sentry/SentryProvider.test.tsx

@@ -38,7 +38,7 @@ describe("SentryProvider", () => {
     expect(initSpy).toHaveBeenCalledWith(
       expect.objectContaining({
         dsn: sentryDsn,
-        tracesSampleRate: 1,
+        tracesSampleRate: 0,
         debug: false,
         replaysOnErrorSampleRate: 1.0,
         replaysSessionSampleRate: 0.1,
@@ -81,6 +81,26 @@ describe("SentryProvider", () => {
     expect(screen.getByTestId("child")).toHaveTextContent("Test Content");
   });
 
+  test("does not reinitialize Sentry when props change after initial render", () => {
+    const initSpy = vi.spyOn(Sentry, "init").mockImplementation(() => undefined);
+
+    const { rerender } = render(
+      <SentryProvider sentryDsn={sentryDsn} isEnabled>
+        <div data-testid="child">Test Content</div>
+      </SentryProvider>
+    );
+
+    expect(initSpy).toHaveBeenCalledTimes(1);
+
+    rerender(
+      <SentryProvider sentryDsn="https://newDsn@o0.ingest.sentry.io/0" isEnabled={false}>
+        <div data-testid="child">Test Content</div>
+      </SentryProvider>
+    );
+
+    expect(initSpy).toHaveBeenCalledTimes(1);
+  });
+
   test("processes beforeSend correctly", () => {
     const initSpy = vi.spyOn(Sentry, "init").mockImplementation(() => undefined);
 
@@ -109,4 +129,36 @@ describe("SentryProvider", () => {
     const hintWithoutError = { originalException: undefined };
     expect(beforeSend(dummyEvent, hintWithoutError)).toEqual(dummyEvent);
   });
+
+  test("processes beforeSend correctly when hint.originalException is not an Error object", () => {
+    const initSpy = vi.spyOn(Sentry, "init").mockImplementation(() => undefined);
+
+    render(
+      <SentryProvider sentryDsn={sentryDsn} isEnabled>
+        <div data-testid="child">Test Content</div>
+      </SentryProvider>
+    );
+
+    const config = initSpy.mock.calls[0][0];
+    expect(config).toHaveProperty("beforeSend");
+    const beforeSend = config.beforeSend;
+
+    if (!beforeSend) {
+      throw new Error("beforeSend is not defined");
+    }
+
+    const dummyEvent = { some: "event" } as unknown as Sentry.ErrorEvent;
+
+    const hintWithString = { originalException: "string exception" };
+    expect(() => beforeSend(dummyEvent, hintWithString)).not.toThrow();
+    expect(beforeSend(dummyEvent, hintWithString)).toEqual(dummyEvent);
+
+    const hintWithNumber = { originalException: 123 };
+    expect(() => beforeSend(dummyEvent, hintWithNumber)).not.toThrow();
+    expect(beforeSend(dummyEvent, hintWithNumber)).toEqual(dummyEvent);
+
+    const hintWithNull = { originalException: null };
+    expect(() => beforeSend(dummyEvent, hintWithNull)).not.toThrow();
+    expect(beforeSend(dummyEvent, hintWithNull)).toEqual(dummyEvent);
+  });
 });