requested changes

.cursor/rules/database.mdc

@@ -1,8 +1,12 @@
 ---
-description: It should be used **only when the agent explicitly requests database schema-level, details** to support tasks such as: writing/debugging Prisma queries, designing/reviewing data models, investigating multi-tenancy behavior, creating API endpoints, or understanding data relationships.
-alwaysApply: false
+description: >
+  This rule provides comprehensive knowledge about the Formbricks database structure, relationships, 
+  and data patterns. It should be used **only when the agent explicitly requests database schema-level 
+  details** to support tasks such as: writing/debugging Prisma queries, designing/reviewing data models, 
+  investigating multi-tenancy behavior, creating API endpoints, or understanding data relationships.
+globs: []
+alwaysApply: agent-requested
 ---
-
 # Formbricks Database Schema Reference
 
 This rule provides a reference to the Formbricks database structure. For the most up-to-date and complete schema definitions, please refer to the schema.prisma file directly.
@@ -12,7 +16,6 @@ This rule provides a reference to the Formbricks database structure. For the mos
 Formbricks uses PostgreSQL with Prisma ORM. The schema is designed for multi-tenancy with strong data isolation between organizations.
 
 ### Core Hierarchy
-
 ```
 Organization
 └── Project
@@ -26,7 +29,6 @@ Organization
 ## Schema Reference
 
 For the complete and up-to-date database schema, please refer to:
-
 - Main schema: `packages/database/schema.prisma`
 - JSON type definitions: `packages/database/json-types.ts`
 
@@ -35,22 +37,17 @@ The schema.prisma file contains all model definitions, relationships, enums, and
 ## Data Access Patterns
 
 ### Multi-tenancy
-
 - All data is scoped by Organization
 - Environment-level isolation for surveys and contacts
 - Project-level grouping for related surveys
 
 ### Soft Deletion
-
 Some models use soft deletion patterns:
-
 - Check `isActive` fields where present
 - Use proper filtering in queries
 
 ### Cascading Deletes
-
 Configured cascade relationships:
-
 - Organization deletion cascades to all child entities
 - Survey deletion removes responses, displays, triggers
 - Contact deletion removes attributes and responses
@@ -58,7 +55,6 @@ Configured cascade relationships:
 ## Common Query Patterns
 
 ### Survey with Responses
-
 ```typescript
 // Include response count and latest responses
 const survey = await prisma.survey.findUnique({
@@ -66,40 +62,40 @@ const survey = await prisma.survey.findUnique({
   include: {
     responses: {
       take: 10,
-      orderBy: { createdAt: "desc" },
+      orderBy: { createdAt: 'desc' }
     },
     _count: {
-      select: { responses: true },
-    },
-  },
+      select: { responses: true }
+    }
+  }
 });
 ```
 
 ### Environment Scoping
-
 ```typescript
 // Always scope by environment
 const surveys = await prisma.survey.findMany({
   where: {
     environmentId: environmentId,
     // Additional filters...
-  },
+  }
 });
 ```
 
 ### Contact with Attributes
-
 ```typescript
 const contact = await prisma.contact.findUnique({
   where: { id: contactId },
   include: {
     attributes: {
       include: {
-        attributeKey: true,
-      },
-    },
-  },
+        attributeKey: true
+      }
+    }
+  }
 });
 ```
 
 This schema supports Formbricks' core functionality: multi-tenant survey management, user targeting, response collection, and analysis, all while maintaining strict data isolation and security.
+
+

.cursor/rules/documentations.mdc

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

.cursor/rules/formbricks-architecture.mdc

@@ -18,6 +18,7 @@ apps/web/
 │   ├── (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
@@ -42,6 +43,7 @@ The application uses Next.js 13+ app router with route groups:
 ### Dynamic Routes
 - `[environmentId]` - Environment-specific routes
 - `[surveyId]` - Survey-specific routes
+- `[sharingKey]` - Public sharing routes
 
 ## Service Layer Pattern
 

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

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

.cursor/rules/overview.mdc

@@ -1,74 +0,0 @@
----
-alwaysApply: true
----
-
-### Formbricks Monorepo Overview
-
-- **Project**: Formbricks — open‑source survey and experience management platform. Repo: [formbricks/formbricks](https://github.com/formbricks/formbricks)
-- **Monorepo**: Turborepo + pnpm workspaces. Root configs: [package.json](mdc:package.json), [turbo.json](mdc:turbo.json)
-- **Core app**: Next.js app in `apps/web` with Prisma, Auth.js, TailwindCSS, Vitest, Playwright. Enterprise modules live in [apps/web/modules/ee](mdc:apps/web/modules/ee)
-- **Datastores**: PostgreSQL + Redis. Local dev via [docker-compose.dev.yml](mdc:docker-compose.dev.yml); Prisma schema at [packages/database/schema.prisma](mdc:packages/database/schema.prisma)
-- **Docs & Ops**: Docs in `docs/` (Mintlify), Helm in `helm-chart/`, IaC in `infra/`
-
-### Apps
-
-- **apps/web**: Next.js product application (API, UI, SSO, i18n, emails, uploads, integrations)
-- **apps/storybook**: Storybook for UI components; a11y addon + Vite builder
-
-### Packages
-
-- **@formbricks/database** (`packages/database`): Prisma schema, DB scripts, migrations, data layer
-- **@formbricks/js-core** (`packages/js-core`): Core runtime for web embed / async loader
-- **@formbricks/surveys** (`packages/surveys`): Embeddable survey rendering and helpers
-- **@formbricks/logger** (`packages/logger`): Shared logging (pino) + Zod types
-- **@formbricks/types** (`packages/types`): Shared types (Zod, Prisma clients)
-- **@formbricks/i18n-utils** (`packages/i18n-utils`): i18n helpers and build output
-- **@formbricks/eslint-config** (`packages/config-eslint`): Central ESLint config (Next, TS, Vitest, Prettier)
-- **@formbricks/config-typescript** (`packages/config-typescript`): Central TS config and types
-- **@formbricks/vite-plugins** (`packages/vite-plugins`): Internal Vite plugins
-- **packages/android, packages/ios**: Native SDKs (built with platform toolchains)
-
-### Enterprise‑ready by design
-
-- **Quality & safety**: Strict TypeScript, repo‑wide ESLint + Prettier, lint‑staged + Husky, CI checks, typed env validation
-- **Security‑first**: Auth.js, SSO/SAML/OIDC, session controls, rate limiting, Sentry, structured logging
-
-### Accessible by design
-
-- **UI foundations**: Radix UI, TailwindCSS, Storybook with `@storybook/addon-a11y`, keyboard and screen‑reader‑friendly components
-
-### Root pnpm commands
-
-```bash
-pnpm clean:all           # Clean turbo cache, node_modules, lockfile, coverage, out
-pnpm clean               # Clean turbo cache, node_modules, coverage, out
-pnpm build               # Build all packages/apps (turbo)
-pnpm build:dev           # Dev-optimized builds (where supported)
-pnpm dev                 # Run all dev servers in parallel
-pnpm start               # Start built apps/services
-pnpm go                  # Start DB (docker compose) and run long-running dev tasks
-pnpm generate            # Run generators (e.g., Prisma, API specs)
-pnpm lint                # Lint all
-pnpm format              # Prettier write across repo
-pnpm test                # Unit tests
-pnpm test:coverage       # Unit tests with coverage
-pnpm test:e2e            # Playwright tests
-pnpm test-e2e:azure      # Playwright tests with Azure config
-pnpm storybook           # Run Storybook
-pnpm db:up               # Start local Postgres/Redis via docker compose
-pnpm db:down             # Stop local DB stack
-pnpm db:start            # Project-level DB setup choreography
-pnpm db:push             # Prisma db push (accept data loss in package script)
-pnpm db:migrate:dev      # Apply dev migrations
-pnpm db:migrate:deploy   # Apply prod migrations
-pnpm fb-migrate-dev      # Create DB migration (database package) and prisma generate
-pnpm tolgee-pull         # Pull translation keys for current branch and format
-```
-
-### Essentials for every prompt
-
-- **Tech stack**: Next.js, React 19, TypeScript, Prisma, Zod, TailwindCSS, Turborepo, Vitest, Playwright
-- **Environments**: See `.env.example`. Many tasks require DB up and env variables set
-- **Licensing**: Core under AGPLv3; Enterprise code in `apps/web/modules/ee` (included in Docker, unlocked via Enterprise License Key)
-
-For deeper details, consult per‑package `package.json` and scripts (e.g., [apps/web/package.json](mdc:apps/web/package.json)).

.cursor/rules/testing-patterns.mdc

@@ -90,7 +90,7 @@ When testing hooks that use React Context:
 vi.mocked(useResponseFilter).mockReturnValue({
   selectedFilter: {
     filter: [],
-    responseStatus: "all",
+    onlyComplete: false,
   },
   setSelectedFilter: vi.fn(),
   selectedOptions: {
@@ -291,6 +291,11 @@ test("handles different modes", async () => {
     expect(vi.mocked(regularApi)).toHaveBeenCalled();
   });
   
+  // Test sharing mode
+  vi.mocked(useParams).mockReturnValue({ 
+    surveyId: "123", 
+    sharingKey: "share-123" 
+  });
   rerender();
   
   await waitFor(() => {

.env.example

@@ -194,6 +194,9 @@ REDIS_URL=redis://localhost:6379
 # The below is used for Rate Limiting (uses In-Memory LRU Cache if not provided) (You can use a service like Webdis for this)
 # REDIS_HTTP_URL:
 
+# The below is used for Rate Limiting for management API
+UNKEY_ROOT_KEY=
+
 # INTERCOM_APP_ID=
 # INTERCOM_SECRET_KEY=
 

.github/ISSUE_TEMPLATE/config.yml

@@ -1,4 +1,4 @@
-blank_issues_enabled: true
+blank_issues_enabled: false
 contact_links:
   - name: Questions
     url: https://github.com/formbricks/formbricks/discussions

.github/actions/cache-build-web/action.yml

@@ -62,12 +62,10 @@ runs:
       shell: bash
 
     - name: Fill ENCRYPTION_KEY, ENTERPRISE_LICENSE_KEY and E2E_TESTING in .env
-      env:
-        E2E_TESTING_MODE: ${{ inputs.e2e_testing_mode }}
       run: |
         RANDOM_KEY=$(openssl rand -hex 32)
         sed -i "s/ENCRYPTION_KEY=.*/ENCRYPTION_KEY=${RANDOM_KEY}/" .env
-        echo "E2E_TESTING=$E2E_TESTING_MODE" >> .env
+        echo "E2E_TESTING=${{ inputs.e2e_testing_mode }}" >> .env
       shell: bash
 
     - run: |

.github/actions/upload-sentry-sourcemaps/action.yml

@@ -0,0 +1,125 @@
+name: 'Upload Sentry Sourcemaps'
+description: 'Extract sourcemaps from Docker image and upload to Sentry'
+
+inputs:
+  docker_image:
+    description: 'Docker image to extract sourcemaps from'
+    required: true
+  release_version:
+    description: 'Sentry release version (e.g., v1.2.3)'
+    required: true
+  sentry_auth_token:
+    description: 'Sentry authentication token'
+    required: true
+  environment:
+    description: 'Sentry environment (e.g., production, staging)'
+    required: false
+    default: 'staging'
+
+runs:
+  using: 'composite'
+  steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+      with:
+        fetch-depth: 0
+
+    - name: Validate Sentry auth token
+      shell: bash
+      run: |
+        set -euo pipefail
+        echo "🔐 Validating Sentry authentication token..."
+
+        # Assign token to local variable for secure handling
+        SENTRY_TOKEN="${{ inputs.sentry_auth_token }}"
+
+        # Test the token by making a simple API call to Sentry
+        response=$(curl -s -w "%{http_code}" -o /tmp/sentry_response.json \
+          -H "Authorization: Bearer $SENTRY_TOKEN" \
+          "https://sentry.io/api/0/organizations/formbricks/")
+
+        http_code=$(echo "$response" | tail -n1)
+
+        if [ "$http_code" != "200" ]; then
+          echo "❌ Error: Invalid Sentry auth token (HTTP $http_code)"
+          echo "Please check your SENTRY_AUTH_TOKEN is correct and has the necessary permissions."
+          if [ -f /tmp/sentry_response.json ]; then
+            echo "Response body:"
+            cat /tmp/sentry_response.json
+          fi
+          exit 1
+        fi
+
+        echo "✅ Sentry auth token validated successfully"
+
+        # Clean up temp file
+        rm -f /tmp/sentry_response.json
+
+    - name: Extract sourcemaps from Docker image
+      shell: bash
+      run: |
+        set -euo pipefail
+        echo "📦 Extracting sourcemaps from Docker image: ${{ inputs.docker_image }}"
+
+        # Create temporary container from the image and capture its ID
+        echo "Creating temporary container..."
+        CONTAINER_ID=$(docker create "${{ inputs.docker_image }}")
+        echo "Container created with ID: $CONTAINER_ID"
+
+        # Set up cleanup function to ensure container is removed on script exit
+        cleanup_container() {
+          # Capture the current exit code to preserve it
+          local original_exit_code=$?
+          
+          echo "🧹 Cleaning up Docker container..."
+          
+          # Remove the container if it exists (ignore errors if already removed)
+          if [ -n "$CONTAINER_ID" ]; then
+            docker rm -f "$CONTAINER_ID" 2>/dev/null || true
+            echo "Container $CONTAINER_ID removed"
+          fi
+          
+          # Exit with the original exit code to preserve script success/failure status
+          exit $original_exit_code
+        }
+        
+        # Register cleanup function to run on script exit (success or failure)
+        trap cleanup_container EXIT
+
+        # Extract .next directory containing sourcemaps
+        docker cp "$CONTAINER_ID:/home/nextjs/apps/web/.next" ./extracted-next
+
+        # Verify sourcemaps exist
+        if [ ! -d "./extracted-next/static/chunks" ]; then
+          echo "❌ Error: .next/static/chunks directory not found in Docker image"
+          echo "Expected structure: /home/nextjs/apps/web/.next/static/chunks/"
+          exit 1
+        fi
+
+        sourcemap_count=$(find ./extracted-next/static/chunks -name "*.map" | wc -l)
+        echo "✅ Found $sourcemap_count sourcemap files"
+
+        if [ "$sourcemap_count" -eq 0 ]; then
+          echo "❌ Error: No sourcemap files found. Check that productionBrowserSourceMaps is enabled."
+          exit 1
+        fi
+
+    - name: Create Sentry release and upload sourcemaps
+      uses: getsentry/action-release@v3
+      env:
+        SENTRY_AUTH_TOKEN: ${{ inputs.sentry_auth_token }}
+        SENTRY_ORG: formbricks
+        SENTRY_PROJECT: formbricks-cloud
+      with:
+        environment: ${{ inputs.environment }}
+        version: ${{ inputs.release_version }}
+        sourcemaps: './extracted-next/'
+
+    - name: Clean up extracted files
+      shell: bash
+      if: always()
+      run: |
+        set -euo pipefail
+        # Clean up extracted files
+        rm -rf ./extracted-next
+        echo "🧹 Cleaned up extracted files"

.github/workflows/apply-issue-labels-to-pr.yml

@@ -0,0 +1,82 @@
+name: "Apply issue labels to PR"
+
+on:
+  pull_request_target:
+    types:
+      - opened
+
+permissions:
+  contents: read
+
+jobs:
+  label_on_pr:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: none
+      issues: read
+      pull-requests: write
+
+    steps:
+      - name: Harden the runner (Audit all outbound calls)
+        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
+        with:
+          egress-policy: audit
+
+      - name: Apply labels from linked issue to PR
+        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            async function getLinkedIssues(owner, repo, prNumber) {
+              const query = `query GetLinkedIssues($owner: String!, $repo: String!, $prNumber: Int!) {
+                repository(owner: $owner, name: $repo) {
+                  pullRequest(number: $prNumber) {
+                    closingIssuesReferences(first: 10) {
+                      nodes {
+                        number
+                        labels(first: 10) {
+                          nodes {
+                            name
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }`;
+
+              const variables = {
+                owner: owner,
+                repo: repo,
+                prNumber: prNumber,
+              };
+
+              const result = await github.graphql(query, variables);
+              return result.repository.pullRequest.closingIssuesReferences.nodes;
+            }
+
+            const pr = context.payload.pull_request;
+            const linkedIssues = await getLinkedIssues(
+              context.repo.owner,
+              context.repo.repo,
+              pr.number
+            );
+
+            const labelsToAdd = new Set();
+            for (const issue of linkedIssues) {
+              if (issue.labels && issue.labels.nodes) {
+                for (const label of issue.labels.nodes) {
+                  labelsToAdd.add(label.name);
+                }
+              }
+            }
+
+            if (labelsToAdd.size) {
+              await github.rest.issues.addLabels({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: pr.number,
+                labels: Array.from(labelsToAdd),
+              });
+            }

.github/workflows/build-and-push-ecr.yml

@@ -1,168 +0,0 @@
-name: Build & Push Docker to ECR
-
-on:
-  workflow_dispatch:
-    inputs:
-      image_tag:
-        description: "Image tag to push (e.g., v3.16.1, main)"
-        required: true
-        default: "v3.16.1"
-      deploy_production:
-        description: "Tag image for production deployment"
-        required: false
-        default: false
-        type: boolean
-      deploy_staging:
-        description: "Tag image for staging deployment"
-        required: false
-        default: false
-        type: boolean
-
-permissions:
-  contents: read
-  id-token: write
-
-env:
-  ECR_REGION: ${{ vars.ECR_REGION }}
-  # ECR settings are sourced from repository/environment variables for portability across envs/forks
-  ECR_REGISTRY: ${{ vars.ECR_REGISTRY }}
-  ECR_REPOSITORY: ${{ vars.ECR_REPOSITORY }}
-  DOCKERFILE: apps/web/Dockerfile
-  CONTEXT: .
-
-jobs:
-  build-and-push:
-    name: Build and Push
-    runs-on: ubuntu-latest
-    timeout-minutes: 45
-    steps:
-      - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
-        with:
-          egress-policy: audit
-
-      - name: Checkout repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-
-      - name: Validate image tag input
-        shell: bash
-        env:
-          IMAGE_TAG: ${{ inputs.image_tag }}
-        run: |
-          set -euo pipefail
-          if [[ -z "${IMAGE_TAG}" ]]; then
-            echo "❌ Image tag is required (non-empty)."
-            exit 1
-          fi
-          if (( ${#IMAGE_TAG} > 128 )); then
-            echo "❌ Image tag must be at most 128 characters."
-            exit 1
-          fi
-          if [[ ! "${IMAGE_TAG}" =~ ^[a-z0-9._-]+$ ]]; then
-            echo "❌ Image tag may only contain lowercase letters, digits, '.', '_' and '-'."
-            exit 1
-          fi
-          if [[ "${IMAGE_TAG}" =~ ^[.-] || "${IMAGE_TAG}" =~ [.-]$ ]]; then
-            echo "❌ Image tag must not start or end with '.' or '-'."
-            exit 1
-          fi
-
-      - name: Validate required variables
-        shell: bash
-        env:
-          ECR_REGISTRY: ${{ env.ECR_REGISTRY }}
-          ECR_REPOSITORY: ${{ env.ECR_REPOSITORY }}
-          ECR_REGION: ${{ env.ECR_REGION }}
-        run: |
-          set -euo pipefail
-          if [[ -z "${ECR_REGISTRY}" || -z "${ECR_REPOSITORY}" || -z "${ECR_REGION}" ]]; then
-            echo "ECR_REGION, ECR_REGISTRY and ECR_REPOSITORY must be set via repository or environment variables (Settings → Variables)."
-            exit 1
-          fi
-
-      - name: Update package.json version
-        shell: bash
-        env:
-          IMAGE_TAG: ${{ inputs.image_tag }}
-        run: |
-          set -euo pipefail
-          
-          # Remove 'v' prefix if present (e.g., v3.16.1 -> 3.16.1)
-          VERSION="${IMAGE_TAG#v}"
-          
-          # Validate SemVer format (major.minor.patch with optional prerelease and build metadata)
-          if [[ ! "${VERSION}" =~ ^[0-9]+\.[0-9]+\.[0-9]+(-[a-zA-Z0-9.-]+)?(\+[a-zA-Z0-9.-]+)?$ ]]; then
-            echo "❌ Error: Invalid version format after extraction. Must be SemVer (e.g., 1.2.3, 1.2.3-alpha, 1.2.3+build.1)"
-            echo "Original input: ${IMAGE_TAG}"
-            echo "Extracted version: ${VERSION}"
-            echo "Expected format: MAJOR.MINOR.PATCH[-PRERELEASE][+BUILDMETADATA]"
-            exit 1
-          fi
-          
-          echo "✅ Valid SemVer format detected: ${VERSION}"
-          echo "Updating package.json version to: ${VERSION}"
-          sed -i "s/\"version\": \"0.0.0\"/\"version\": \"${VERSION}\"/" ./apps/web/package.json
-          cat ./apps/web/package.json | grep version
-
-      - name: Build tag list
-        id: tags
-        shell: bash
-        env:
-          IMAGE_TAG: ${{ inputs.image_tag }}
-          DEPLOY_PRODUCTION: ${{ inputs.deploy_production }}
-          DEPLOY_STAGING: ${{ inputs.deploy_staging }}
-          ECR_REGISTRY: ${{ env.ECR_REGISTRY }}
-          ECR_REPOSITORY: ${{ env.ECR_REPOSITORY }}
-        run: |
-          set -euo pipefail
-
-          # Start with the base image tag
-          TAGS="${ECR_REGISTRY}/${ECR_REPOSITORY}:${IMAGE_TAG}"
-
-          # Add production tag if requested
-          if [[ "${DEPLOY_PRODUCTION}" == "true" ]]; then
-            TAGS="${TAGS}\n${ECR_REGISTRY}/${ECR_REPOSITORY}:production"
-          fi
-
-          # Add staging tag if requested
-          if [[ "${DEPLOY_STAGING}" == "true" ]]; then
-            TAGS="${TAGS}\n${ECR_REGISTRY}/${ECR_REPOSITORY}:staging"
-          fi
-
-          # Output for debugging
-          echo "Generated tags:"
-          echo -e "${TAGS}"
-
-          # Set output for next step (escape newlines for GitHub Actions)
-          {
-            echo "tags<<EOF"
-            echo -e "${TAGS}"
-            echo "EOF"
-          } >> "${GITHUB_OUTPUT}"
-
-      - name: Configure AWS credentials (OIDC)
-        uses: aws-actions/configure-aws-credentials@7474bc4690e29a8392af63c5b98e7449536d5c3a
-        with:
-          role-to-assume: ${{ secrets.AWS_ECR_PUSH_ROLE_ARN }}
-          aws-region: ${{ env.ECR_REGION }}
-
-      - name: Log in to Amazon ECR
-        uses: aws-actions/amazon-ecr-login@062b18b96a7aff071d4dc91bc00c4c1a7945b076
-
-      - name: Set up Depot CLI
-        uses: depot/setup-action@b0b1ea4f69e92ebf5dea3f8713a1b0c37b2126a5 # v1.6.0
-
-      - name: Build and push image (Depot remote builder)
-        uses: depot/build-push-action@636daae76684e38c301daa0c5eca1c095b24e780 # v1.14.0
-        with:
-          project: tw0fqmsx3c
-          token: ${{ secrets.DEPOT_PROJECT_TOKEN }}
-          context: ${{ env.CONTEXT }}
-          file: ${{ env.DOCKERFILE }}
-          platforms: linux/amd64,linux/arm64
-          push: true
-          tags: ${{ steps.tags.outputs.tags }}
-          secrets: |
-            database_url=${{ secrets.DUMMY_DATABASE_URL }}
-            encryption_key=${{ secrets.DUMMY_ENCRYPTION_KEY }}
-            sentry_auth_token=${{ secrets.SENTRY_AUTH_TOKEN }}

.github/workflows/chromatic.yml

@@ -6,14 +6,12 @@ on:
       - main
   workflow_dispatch:
 
-permissions:
-  contents: read
-
 jobs:
   chromatic:
     name: Run Chromatic
     runs-on: ubuntu-latest
     permissions:
+      contents: read
       packages: write
       id-token: write
       actions: read

.github/workflows/dependency-review.yml

@@ -0,0 +1,27 @@
+# Dependency Review Action
+#
+# This Action will scan dependency manifest files that change as part of a Pull Request,
+# surfacing known-vulnerable versions of the packages declared or updated in the PR.
+# Once installed, if the workflow run is marked as required,
+# PRs introducing known-vulnerable packages will be blocked from merging.
+#
+# Source repository: https://github.com/actions/dependency-review-action
+name: 'Dependency Review'
+on: [pull_request]
+
+permissions:
+  contents: read
+
+jobs:
+  dependency-review:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Harden the runner (Audit all outbound calls)
+        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
+        with:
+          egress-policy: audit
+
+      - name: 'Checkout Repository'
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - name: 'Dependency Review'
+        uses: actions/dependency-review-action@38ecb5b593bf0eb19e335c03f97670f792489a8b # v4.7.0

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

@@ -37,22 +37,17 @@ on:
 
 permissions:
   id-token: write
-  contents: read
+  contents: write
 
 jobs:
   helmfile-deploy:
     runs-on: ubuntu-latest
     steps:
-      - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
-        with:
-          egress-policy: audit
-
       - name: Checkout
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@v4.2.2
 
       - name: Tailscale
-        uses: tailscale/github-action@84a3f23bb4d843bcf4da6cf824ec1be473daf4de # v3.2.3
+        uses: tailscale/github-action@v3
         with:
           oauth-client-id: ${{ secrets.TS_OAUTH_CLIENT_ID }}
           oauth-secret: ${{ secrets.TS_OAUTH_SECRET }}
@@ -71,7 +66,7 @@ jobs:
         env:
           AWS_REGION: eu-central-1
 
-      - uses: helmfile/helmfile-action@712000e3d4e28c72778ecc53857746082f555ef3 # v2.0.4
+      - uses: helmfile/helmfile-action@v2
         name: Deploy Formbricks Cloud Production
         if: inputs.ENVIRONMENT == 'production'
         env:
@@ -89,7 +84,7 @@ jobs:
           helmfile-auto-init: "false"
           helmfile-workdirectory: infra/formbricks-cloud-helm
 
-      - uses: helmfile/helmfile-action@712000e3d4e28c72778ecc53857746082f555ef3 # v2.0.4
+      - uses: helmfile/helmfile-action@v2
         name: Deploy Formbricks Cloud Staging
         if: inputs.ENVIRONMENT == 'staging'
         env:
@@ -111,16 +106,15 @@ jobs:
         env:
           CF_ZONE_ID: ${{ secrets.CLOUDFLARE_ZONE_ID }}
           CF_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          ENVIRONMENT: ${{ inputs.ENVIRONMENT }}
         run: |
           # Set hostname based on environment
-          if [[ "$ENVIRONMENT" == "production" ]]; then
+          if [[ "${{ inputs.ENVIRONMENT }}" == "production" ]]; then
             PURGE_HOST="app.formbricks.com"
           else
             PURGE_HOST="stage.app.formbricks.com"
           fi
 
-          echo "Purging Cloudflare cache for host: $PURGE_HOST (environment: $ENVIRONMENT, zone: $CF_ZONE_ID)"
+          echo "Purging Cloudflare cache for host: $PURGE_HOST (environment: ${{ inputs.ENVIRONMENT }}, zone: $CF_ZONE_ID)"
 
           # Prepare JSON payload for selective cache purge
           json_payload=$(cat << EOF

.github/workflows/docker-build-validation.yml

@@ -39,68 +39,42 @@ jobs:
           --health-retries 5
 
     steps:
-      - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
-        with:
-          egress-policy: audit
-
       - name: Checkout Repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-        with:
-          fetch-depth: 0
+        uses: actions/checkout@v4.2.2
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@e468171a9de216ec08956ac3ada2f0791b6bd435 # v3.11.1
+        uses: docker/setup-buildx-action@v3
 
       - name: Build Docker Image
-        uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83 # v6.18.0
-        env:
-          GITHUB_SHA: ${{ github.sha }}
+        uses: docker/build-push-action@v6
         with:
           context: .
           file: ./apps/web/Dockerfile
           push: false
           load: true
-          tags: formbricks-test:${{ env.GITHUB_SHA }}
+          tags: formbricks-test:${{ github.sha }}
           cache-from: type=gha
           cache-to: type=gha,mode=max
           secrets: |
             database_url=${{ secrets.DUMMY_DATABASE_URL }}
             encryption_key=${{ secrets.DUMMY_ENCRYPTION_KEY }}
 
-      - name: Verify and Initialize PostgreSQL
+      - name: Verify PostgreSQL Connection
         run: |
           echo "Verifying PostgreSQL connection..."
           # Install PostgreSQL client to test connection
           sudo apt-get update && sudo apt-get install -y postgresql-client
 
-          # Test connection using psql with timeout and proper error handling
-          echo "Testing PostgreSQL connection with 30 second timeout..."
-          if timeout 30 bash -c 'until PGPASSWORD=test psql -h localhost -U test -d formbricks -c "\dt" >/dev/null 2>&1; do
-            echo "Waiting for PostgreSQL to be ready..."
-            sleep 2
-          done'; then
-            echo "✅ PostgreSQL connection successful"
-            PGPASSWORD=test psql -h localhost -U test -d formbricks -c "SELECT version();"
-
-            # Enable necessary extensions that might be required by migrations
-            echo "Enabling required PostgreSQL extensions..."
-            PGPASSWORD=test psql -h localhost -U test -d formbricks -c "CREATE EXTENSION IF NOT EXISTS vector;" || echo "Vector extension already exists or not available"
-
-          else
-            echo "❌ PostgreSQL connection failed after 30 seconds"
-            exit 1
-          fi
+          # Test connection using psql
+          PGPASSWORD=test psql -h localhost -U test -d formbricks -c "\dt" || echo "Failed to connect to PostgreSQL"
 
           # Show network configuration
           echo "Network configuration:"
+          ip addr show
           netstat -tulpn | grep 5432 || echo "No process listening on port 5432"
 
       - name: Test Docker Image with Health Check
         shell: bash
-        env:
-          GITHUB_SHA: ${{ github.sha }}
-          DUMMY_ENCRYPTION_KEY: ${{ secrets.DUMMY_ENCRYPTION_KEY }}
         run: |
           echo "🧪 Testing if the Docker image starts correctly..."
 
@@ -112,12 +86,29 @@ jobs:
             $DOCKER_RUN_ARGS \
             -p 3000:3000 \
             -e DATABASE_URL="postgresql://test:test@host.docker.internal:5432/formbricks" \
-            -e ENCRYPTION_KEY="$DUMMY_ENCRYPTION_KEY" \
-            -d "formbricks-test:$GITHUB_SHA"
+            -e ENCRYPTION_KEY="${{ secrets.DUMMY_ENCRYPTION_KEY }}" \
+            -d formbricks-test:${{ github.sha }}
 
-          # Start health check polling immediately (every 5 seconds for up to 5 minutes)
-          echo "🏥 Polling /health endpoint every 5 seconds for up to 5 minutes..."
-          MAX_RETRIES=60  # 60 attempts × 5 seconds = 5 minutes
+          # Give it more time to start up
+          echo "Waiting 45 seconds for application to start..."
+          sleep 45
+
+          # Check if the container is running
+          if [ "$(docker inspect -f '{{.State.Running}}' formbricks-test)" != "true" ]; then
+            echo "❌ Container failed to start properly!"
+            docker logs formbricks-test
+            exit 1
+          else
+            echo "✅ Container started successfully!"
+          fi
+
+          # Try connecting to PostgreSQL from inside the container
+          echo "Testing PostgreSQL connection from inside container..."
+          docker exec formbricks-test sh -c 'apt-get update && apt-get install -y postgresql-client && PGPASSWORD=test psql -h host.docker.internal -U test -d formbricks -c "\dt" || echo "Failed to connect to PostgreSQL from container"'
+
+          # Try to access the health endpoint
+          echo "🏥 Testing /health endpoint..."
+          MAX_RETRIES=10
           RETRY_COUNT=0
           HEALTH_CHECK_SUCCESS=false
 
@@ -125,32 +116,38 @@ jobs:
 
           while [ $RETRY_COUNT -lt $MAX_RETRIES ]; do
             RETRY_COUNT=$((RETRY_COUNT + 1))
-
-            # Check if container is still running
-            if [ "$(docker inspect -f '{{.State.Running}}' formbricks-test 2>/dev/null)" != "true" ]; then
-              echo "❌ Container stopped running after $((RETRY_COUNT * 5)) seconds!"
-              echo "📋 Container logs:"
-              docker logs formbricks-test
-              exit 1
+            echo "Attempt $RETRY_COUNT of $MAX_RETRIES..."
+            
+            # Show container logs before each attempt to help debugging
+            if [ $RETRY_COUNT -gt 1 ]; then
+              echo "📋 Current container logs:"
+              docker logs --tail 20 formbricks-test
             fi
-
-            # Show progress and diagnostic info every 12 attempts (1 minute intervals)
-            if [ $((RETRY_COUNT % 12)) -eq 0 ] || [ $RETRY_COUNT -eq 1 ]; then
-              echo "Health check attempt $RETRY_COUNT of $MAX_RETRIES ($(($RETRY_COUNT * 5)) seconds elapsed)..."
-              echo "📋 Recent container logs:"
-              docker logs --tail 10 formbricks-test
+            
+            # Get detailed curl output for debugging
+            HTTP_OUTPUT=$(curl -v -s -m 30 http://localhost:3000/health 2>&1)
+            CURL_EXIT_CODE=$?
+            
+            echo "Curl exit code: $CURL_EXIT_CODE"
+            echo "Curl output: $HTTP_OUTPUT"
+            
+            if [ $CURL_EXIT_CODE -eq 0 ]; then
+              STATUS_CODE=$(echo "$HTTP_OUTPUT" | grep -oP "HTTP/\d(\.\d)? \K\d+")
+              echo "Status code detected: $STATUS_CODE"
+              
+              if [ "$STATUS_CODE" = "200" ]; then
+                echo "✅ Health check successful!"
+                HEALTH_CHECK_SUCCESS=true
+                break
+              else
+                echo "❌ Health check returned non-200 status code: $STATUS_CODE"
+              fi
+            else
+              echo "❌ Curl command failed with exit code: $CURL_EXIT_CODE"
             fi
-
-            # Try health endpoint with shorter timeout for faster polling
-            # Use -f flag to make curl fail on HTTP error status codes (4xx, 5xx)
-            if curl -f -s -m 10 http://localhost:3000/health >/dev/null 2>&1; then
-              echo "✅ Health check successful after $((RETRY_COUNT * 5)) seconds!"
-              HEALTH_CHECK_SUCCESS=true
-              break
-            fi
-
-            # Wait 5 seconds before next attempt
-            sleep 5
+            
+            echo "Waiting 15 seconds before next attempt..."
+            sleep 15
           done
 
           # Show full container logs for debugging
@@ -163,7 +160,7 @@ jobs:
 
           # Exit with failure if health check did not succeed
           if [ "$HEALTH_CHECK_SUCCESS" != "true" ]; then
-            echo "❌ Health check failed after $((MAX_RETRIES * 5)) seconds (5 minutes)"
+            echo "❌ Health check failed after $MAX_RETRIES attempts"
             exit 1
           fi
 

.github/workflows/docker-security-scan.yml

@@ -1,70 +0,0 @@
-name: Docker Security Scan
-
-on:
-  schedule:
-    - cron: "0 2 * * *" # Daily at 2 AM UTC
-  workflow_dispatch:
-  workflow_run:
-    workflows: ["Docker Release to Github"]
-    types: [completed]
-
-permissions:
-  contents: read
-  packages: read
-  security-events: write
-
-jobs:
-  scan:
-    name: Vulnerability Scan
-    runs-on: ubuntu-latest
-    timeout-minutes: 30
-    steps:
-      - name: Harden the runner
-        uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
-        with:
-          egress-policy: audit
-
-      - name: Checkout (for SARIF fingerprinting only)
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-        with:
-          fetch-depth: 1
-
-      - name: Determine ref and commit for upload
-        id: gitref
-        shell: bash
-        env:
-          EVENT_NAME: ${{ github.event_name }}
-          HEAD_BRANCH: ${{ github.event.workflow_run.head_branch }}
-          HEAD_SHA: ${{ github.event.workflow_run.head_sha }}
-        run: |
-          set -euo pipefail
-          if [[ "${EVENT_NAME}" == "workflow_run" ]]; then
-            echo "ref=refs/heads/${HEAD_BRANCH}" >> "$GITHUB_OUTPUT"
-            echo "sha=${HEAD_SHA}" >> "$GITHUB_OUTPUT"
-          else
-            echo "ref=${GITHUB_REF}" >> "$GITHUB_OUTPUT"
-            echo "sha=${GITHUB_SHA}" >> "$GITHUB_OUTPUT"
-          fi
-      - name: Log in to GitHub Container Registry
-        uses: docker/login-action@184bdaa0721073962dff0199f1fb9940f07167d1 # v3.5.0
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Run Trivy vulnerability scanner
-        uses: aquasecurity/trivy-action@dc5a429b52fcf669ce959baa2c2dd26090d2a6c4 # v0.32.0
-        with:
-          image-ref: "ghcr.io/${{ github.repository }}:latest"
-          format: "sarif"
-          output: "trivy-results.sarif"
-          severity: "CRITICAL,HIGH,MEDIUM,LOW"
-
-      - name: Upload Trivy scan results to GitHub Security tab
-        uses: github/codeql-action/upload-sarif@a4e1a019f5e24960714ff6296aee04b736cbc3cf # v3.29.6
-        if: ${{ always() }}
-        with:
-          sarif_file: "trivy-results.sarif"
-          ref: ${{ steps.gitref.outputs.ref }}
-          sha: ${{ steps.gitref.outputs.sha }}
-          category: "trivy-container-scan"

.github/workflows/formbricks-release.yml

@@ -7,13 +7,12 @@ on:
 permissions:
   contents: read
 
+env:
+  ENVIRONMENT: ${{ github.event.release.prerelease && 'staging' || 'production' }}
+
 jobs:
   docker-build:
     name: Build & release docker image
-    permissions:
-      contents: read
-      packages: write
-      id-token: write
     uses: ./.github/workflows/release-docker-github.yml
     secrets: inherit
     with:
@@ -21,9 +20,6 @@ jobs:
 
   helm-chart-release:
     name: Release Helm Chart
-    permissions:
-      contents: read
-      packages: write
     uses: ./.github/workflows/release-helm-chart.yml
     secrets: inherit
     needs:
@@ -33,9 +29,6 @@ jobs:
 
   deploy-formbricks-cloud:
     name: Deploy Helm Chart to Formbricks Cloud
-    permissions:
-      contents: read
-      id-token: write
     secrets: inherit
     uses: ./.github/workflows/deploy-formbricks-cloud.yml
     needs:
@@ -43,6 +36,27 @@ jobs:
       - helm-chart-release
     with:
       VERSION: v${{ needs.docker-build.outputs.VERSION }}
-      ENVIRONMENT: ${{ github.event.release.prerelease && 'staging' || 'production' }}
+      ENVIRONMENT: ${{ env.ENVIRONMENT }}
 
+  upload-sentry-sourcemaps:
+    name: Upload Sentry Sourcemaps
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    needs:
+      - docker-build
+      - deploy-formbricks-cloud
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4.2.2
+        with:
+          fetch-depth: 0
 
+      - name: Upload Sentry Sourcemaps
+        uses: ./.github/actions/upload-sentry-sourcemaps
+        continue-on-error: true
+        with:
+          docker_image: ghcr.io/formbricks/formbricks:v${{ needs.docker-build.outputs.VERSION }}
+          release_version: v${{ needs.docker-build.outputs.VERSION }}
+          sentry_auth_token: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          environment: ${{ env.ENVIRONMENT }}

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

@@ -29,7 +29,9 @@ jobs:
       # with sigstore/fulcio when running outside of PRs.
       id-token: write
 
-
+    outputs:
+      DOCKER_IMAGE: ${{ steps.extract_image_info.outputs.DOCKER_IMAGE }}
+      RELEASE_VERSION: ${{ steps.extract_image_info.outputs.RELEASE_VERSION }}
 
     steps:
       - name: Harden the runner (Audit all outbound calls)
@@ -39,40 +41,34 @@ jobs:
 
       - name: Checkout repository
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-        with:
-          fetch-depth: 0
 
       - name: Generate SemVer version from branch or tag
         id: generate_version
-        env:
-          REF_NAME: ${{ github.ref_name }}
-          REF_TYPE: ${{ github.ref_type }}
         run: |
-          # Get reference name and type from environment variables
+          # Get reference name and type
+          REF_NAME="${{ github.ref_name }}"
+          REF_TYPE="${{ github.ref_type }}"
+
           echo "Reference type: $REF_TYPE"
           echo "Reference name: $REF_NAME"
 
-          # Create unique timestamped version for testing sourcemap resolution
-          TIMESTAMP=$(date +%s)
-          
           if [[ "$REF_TYPE" == "tag" ]]; then
-            # If running from a tag, use the tag name + timestamp
+            # If running from a tag, use the tag name
             if [[ "$REF_NAME" =~ ^v?[0-9]+\.[0-9]+\.[0-9]+.*$ ]]; then
               # Tag looks like a SemVer, use it directly (remove 'v' prefix if present)
-              BASE_VERSION=$(echo "$REF_NAME" | sed 's/^v//')
-              VERSION="${BASE_VERSION}-${TIMESTAMP}"
-              echo "Using SemVer tag with timestamp: $VERSION"
+              VERSION=$(echo "$REF_NAME" | sed 's/^v//')
+              echo "Using SemVer tag: $VERSION"
             else
               # Tag is not SemVer, treat as prerelease
               SANITIZED_TAG=$(echo "$REF_NAME" | sed 's/[^a-zA-Z0-9.-]/-/g' | sed 's/--*/-/g' | sed 's/^-\|-$//g')
-              VERSION="0.0.0-${SANITIZED_TAG}-${TIMESTAMP}"
-              echo "Using tag as prerelease with timestamp: $VERSION"
+              VERSION="0.0.0-$SANITIZED_TAG"
+              echo "Using tag as prerelease: $VERSION"
             fi
           else
-            # Running from branch, use branch name as prerelease + timestamp
+            # Running from branch, use branch name as prerelease
             SANITIZED_BRANCH=$(echo "$REF_NAME" | sed 's/[^a-zA-Z0-9.-]/-/g' | sed 's/--*/-/g' | sed 's/^-\|-$//g')
-            VERSION="0.0.0-${SANITIZED_BRANCH}-${TIMESTAMP}"
-            echo "Using branch as prerelease with timestamp: $VERSION"
+            VERSION="0.0.0-$SANITIZED_BRANCH"
+            echo "Using branch as prerelease: $VERSION"
           fi
 
           echo "VERSION=$VERSION" >> $GITHUB_ENV
@@ -80,9 +76,21 @@ jobs:
           echo "Generated SemVer version: $VERSION"
 
       - name: Update package.json version
+        env:
+          VERSION: ${{ env.VERSION }}
         run: |
-          sed -i "s/\"version\": \"0.0.0\"/\"version\": \"${{ env.VERSION }}\"/" ./apps/web/package.json
-          cat ./apps/web/package.json | grep version
+          cd ./apps/web
+          npm version $VERSION --no-git-tag-version
+          echo "Updated version to: $(npm pkg get version)"
+
+      - name: Set Sentry environment in .env
+        run: |
+          if ! grep -q "^SENTRY_ENVIRONMENT=staging$" .env 2>/dev/null; then
+            echo "SENTRY_ENVIRONMENT=staging" >> .env
+            echo "Added SENTRY_ENVIRONMENT=staging to .env file"
+          else
+            echo "SENTRY_ENVIRONMENT=staging already exists in .env file"
+          fi
 
       - name: Set up Depot CLI
         uses: depot/setup-action@b0b1ea4f69e92ebf5dea3f8713a1b0c37b2126a5 # v1.6.0
@@ -110,9 +118,6 @@ jobs:
         uses: docker/metadata-action@902fa8ec7d6ecbf8d84d538b9b233a880e428804 # v5.7.0
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
-          tags: |
-            type=ref,event=branch
-            type=raw,value=${{ env.VERSION }}
 
       # Build and push Docker image with Buildx (don't push on PR)
       # https://github.com/docker/build-push-action
@@ -131,9 +136,21 @@ jobs:
           secrets: |
             database_url=${{ secrets.DUMMY_DATABASE_URL }}
             encryption_key=${{ secrets.DUMMY_ENCRYPTION_KEY }}
-            sentry_auth_token=${{ secrets.SENTRY_AUTH_TOKEN }}
 
+      - name: Extract image info for sourcemap upload
+        id: extract_image_info
+        run: |
+          # Use the first readable tag from metadata action output
+          DOCKER_IMAGE=$(echo "${{ steps.meta.outputs.tags }}" | head -n1 | xargs)
+          echo "DOCKER_IMAGE=$DOCKER_IMAGE" >> $GITHUB_OUTPUT
 
+          # Use the generated version for Sentry release
+          RELEASE_VERSION="$VERSION"
+          echo "RELEASE_VERSION=$RELEASE_VERSION" >> $GITHUB_OUTPUT
+
+          echo "Docker image: $DOCKER_IMAGE"
+          echo "Release version: $RELEASE_VERSION"
+          echo "Available tags: ${{ steps.meta.outputs.tags }}"
 
       # Sign the resulting Docker image digest except on PRs.
       # This will only write to the public Rekor transparency log when the Docker
@@ -148,4 +165,26 @@ jobs:
           DIGEST: ${{ steps.build-and-push.outputs.digest }}
         # This step uses the identity token to provision an ephemeral certificate
         # against the sigstore community Fulcio instance.
-        run: echo "${TAGS}" | xargs -I {} cosign sign --yes "{}@${DIGEST}"
+        run: echo "${TAGS}" | xargs -I {} cosign sign --yes {}@${DIGEST}
+
+  upload-sentry-sourcemaps:
+    name: Upload Sentry Sourcemaps
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    needs:
+      - build
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4.2.2
+        with:
+          fetch-depth: 0
+
+      - name: Upload Sentry Sourcemaps
+        uses: ./.github/actions/upload-sentry-sourcemaps
+        continue-on-error: true
+        with:
+          docker_image: ${{ needs.build.outputs.DOCKER_IMAGE }}
+          release_version: ${{ needs.build.outputs.RELEASE_VERSION }}
+          sentry_auth_token: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          environment: staging

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

@@ -9,7 +9,7 @@ on:
   workflow_call:
     inputs:
       IS_PRERELEASE:
-        description: "Whether this is a prerelease (affects latest tag)"
+        description: 'Whether this is a prerelease (affects latest tag)'
         required: false
         type: boolean
         default: false
@@ -26,9 +26,6 @@ env:
   TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
   TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
 
-permissions:
-  contents: read
-
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -55,20 +52,9 @@ jobs:
         id: extract_release_tag
         run: |
           # Extract version from tag (e.g., refs/tags/v1.2.3 -> 1.2.3)
-          TAG="$GITHUB_REF"
+          TAG=${{ github.ref }}
           TAG=${TAG#refs/tags/v}
-
-          # Validate the extracted tag format
-          if [[ ! "$TAG" =~ ^[0-9]+\.[0-9]+\.[0-9]+(-[a-zA-Z0-9.-]+)?(\+[a-zA-Z0-9.-]+)?$ ]]; then
-            echo "❌ Error: Invalid release tag format after extraction. Must be semver (e.g., 1.2.3, 1.2.3-alpha)"
-            echo "Original ref: $GITHUB_REF"
-            echo "Extracted tag: $TAG"
-            exit 1
-          fi
-
-          # Safely add to environment variables
           echo "RELEASE_TAG=$TAG" >> $GITHUB_ENV
-
           echo "VERSION=$TAG" >> $GITHUB_OUTPUT
           echo "Using tag-based version: $TAG"
 
@@ -109,7 +95,7 @@ jobs:
             type=semver,pattern={{major}}.{{minor}}
             type=semver,pattern={{major}}
             # Only tag as 'latest' for stable releases (not prereleases)
-            type=raw,value=latest,enable=${{ !inputs.IS_PRERELEASE  }}
+            type=raw,value=latest,enable=${{ inputs.IS_PRERELEASE != 'true' }}
 
       # Build and push Docker image with Buildx (don't push on PR)
       # https://github.com/docker/build-push-action
@@ -128,7 +114,6 @@ jobs:
           secrets: |
             database_url=${{ secrets.DUMMY_DATABASE_URL }}
             encryption_key=${{ secrets.DUMMY_ENCRYPTION_KEY }}
-            sentry_auth_token=${{ secrets.SENTRY_AUTH_TOKEN }}
 
       # Sign the resulting Docker image digest except on PRs.
       # This will only write to the public Rekor transparency log when the Docker

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

@@ -26,23 +26,8 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
-      - name: Validate input version
-        env:
-          INPUT_VERSION: ${{ inputs.VERSION }}
-        run: |
-          set -euo pipefail
-          # Validate input version format (expects clean semver without 'v' prefix)
-          if [[ ! "$INPUT_VERSION" =~ ^[0-9]+\.[0-9]+\.[0-9]+(-[a-zA-Z0-9.-]+)?(\+[a-zA-Z0-9.-]+)?$ ]]; then
-            echo "❌ Error: Invalid version format. Must be clean semver (e.g., 1.2.3, 1.2.3-alpha)"
-            echo "Expected: clean version without 'v' prefix"
-            echo "Provided: $INPUT_VERSION"
-            exit 1
-          fi
-
-          # Store validated version in environment variable
-          echo "VERSION<<EOF" >> $GITHUB_ENV
-          echo "$INPUT_VERSION" >> $GITHUB_ENV
-          echo "EOF" >> $GITHUB_ENV
+      - name: Extract release version
+        run: echo "VERSION=${{ github.event.release.tag_name }}" >> $GITHUB_ENV
 
       - name: Set up Helm
         uses: azure/setup-helm@5119fcb9089d432beecbf79bb2c7915207344b78 # v3.5
@@ -50,18 +35,15 @@ jobs:
           version: latest
 
       - name: Log in to GitHub Container Registry
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          GITHUB_ACTOR: ${{ github.actor }}
-        run: printf '%s' "$GITHUB_TOKEN" | helm registry login ghcr.io --username "$GITHUB_ACTOR" --password-stdin
+        run: echo "${{ secrets.GITHUB_TOKEN }}" | helm registry login ghcr.io --username ${{ github.actor }} --password-stdin
 
       - name: Install YQ
         uses: dcarbone/install-yq-action@4075b4dca348d74bd83f2bf82d30f25d7c54539b # v1.3.1
 
       - name: Update Chart.yaml with new version
         run: |
-          yq -i ".version = \"$VERSION\"" helm-chart/Chart.yaml
-          yq -i ".appVersion = \"v$VERSION\"" helm-chart/Chart.yaml
+          yq -i ".version = \"${{ inputs.VERSION }}\"" helm-chart/Chart.yaml
+          yq -i ".appVersion = \"v${{ inputs.VERSION }}\"" helm-chart/Chart.yaml
 
       - name: Package Helm chart
         run: |
@@ -69,4 +51,4 @@ jobs:
 
       - name: Push Helm chart to GitHub Container Registry
         run: |
-          helm push "formbricks-$VERSION.tgz" oci://ghcr.io/formbricks/helm-charts
+          helm push formbricks-${{ inputs.VERSION }}.tgz oci://ghcr.io/formbricks/helm-charts

.github/workflows/scorecard.yml

@@ -0,0 +1,81 @@
+# This workflow uses actions that are not certified by GitHub. They are provided
+# by a third-party and are governed by separate terms of service, privacy
+# policy, and support documentation.
+
+name: Scorecard supply-chain security
+on:
+  # For Branch-Protection check. Only the default branch is supported. See
+  # https://github.com/ossf/scorecard/blob/main/docs/checks.md#branch-protection
+  branch_protection_rule:
+  # To guarantee Maintained check is occasionally updated. See
+  # https://github.com/ossf/scorecard/blob/main/docs/checks.md#maintained
+  schedule:
+    - cron: "17 17 * * 6"
+  push:
+    branches: ["main"]
+  workflow_dispatch:
+
+# Declare default permissions as read only.
+permissions: read-all
+
+jobs:
+  analysis:
+    name: Scorecard analysis
+    runs-on: ubuntu-latest
+    permissions:
+      # Needed to upload the results to code-scanning dashboard.
+      security-events: write
+      # Needed to publish results and get a badge (see publish_results below).
+      id-token: write
+      # Add this permission
+      actions: write # Required for artifact upload
+      # Uncomment the permissions below if installing in a private repository.
+      # contents: read
+      # actions: read
+
+    steps:
+      - name: Harden the runner (Audit all outbound calls)
+        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
+        with:
+          egress-policy: audit
+
+      - name: "Checkout code"
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        with:
+          persist-credentials: false
+
+      - name: "Run analysis"
+        uses: ossf/scorecard-action@0864cf19026789058feabb7e87baa5f140aac736 # v2.3.1
+        with:
+          results_file: results.sarif
+          results_format: sarif
+          # (Optional) "write" PAT token. Uncomment the `repo_token` line below if:
+          # - you want to enable the Branch-Protection check on a *public* repository, or
+          # - you are installing Scorecard on a *private* repository
+          # To create the PAT, follow the steps in https://github.com/ossf/scorecard-action?tab=readme-ov-file#authentication-with-fine-grained-pat-optional.
+          # repo_token: ${{ secrets.SCORECARD_TOKEN }}
+
+          # Public repositories:
+          #   - Publish results to OpenSSF REST API for easy access by consumers
+          #   - Allows the repository to include the Scorecard badge.
+          #   - See https://github.com/ossf/scorecard-action#publishing-results.
+          # For private repositories:
+          #   - `publish_results` will always be set to `false`, regardless
+          #     of the value entered here.
+          publish_results: true
+
+      # Upload the results as artifacts (optional). Commenting out will disable uploads of run results in SARIF
+      # format to the repository Actions tab.
+      - name: "Upload artifact"
+        uses: actions/upload-artifact@65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08 # v4.6.0
+        with:
+          name: sarif
+          path: results.sarif
+          retention-days: 5
+
+      # Upload the results to GitHub's code scanning dashboard (optional).
+      # Commenting out will disable upload of results to your repo's Code Scanning dashboard
+      - name: "Upload to code-scanning"
+        uses: github/codeql-action/upload-sarif@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
+        with:
+          sarif_file: results.sarif

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

@@ -56,3 +56,11 @@ jobs:
             ```
             ${{ steps.lint_pr_title.outputs.error_message }}
             ```
+
+      # 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@67d0dec7b07ed060a405f9b2a64b8ab319fdd7db # v2.9.2
+        with:
+          header: pr-title-lint-error
+          message: |
+            Thank you for following the naming conventions for pull request titles! 🙏

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

@@ -14,14 +14,12 @@ on:
     paths:
       - "infra/terraform/**"
 
-permissions:
-  contents: read
-
 jobs:
   terraform:
     runs-on: ubuntu-latest
     permissions:
       id-token: write
+      contents: read
       pull-requests: write
     env:
       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -35,7 +33,7 @@ jobs:
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
       - name: Tailscale
-        uses: tailscale/github-action@84a3f23bb4d843bcf4da6cf824ec1be473daf4de # v3.2.3
+        uses: tailscale/github-action@v3
         with:
           oauth-client-id: ${{ secrets.TS_OAUTH_CLIENT_ID }}
           oauth-secret: ${{ secrets.TS_OAUTH_SECRET }}

.github/workflows/tolgee.yml

@@ -27,18 +27,10 @@ jobs:
 
       - name: Get source branch name
         id: branch-name
-        env:
-          RAW_BRANCH: ${{ github.head_ref }}
         run: |
-          # Validate and sanitize branch name - only allow alphanumeric, dots, underscores, hyphens, and forward slashes
+          RAW_BRANCH="${{ github.head_ref }}"
           SOURCE_BRANCH=$(echo "$RAW_BRANCH" | sed 's/[^a-zA-Z0-9._\/-]//g')
 
-          # Additional validation - ensure branch name is not empty after sanitization
-          if [[ -z "$SOURCE_BRANCH" ]]; then
-            echo "❌ Error: Branch name is empty after sanitization"
-            echo "Original branch: $RAW_BRANCH"
-            exit 1
-          fi
 
           # Safely add to environment variables using GitHub's recommended method
           # This prevents environment variable injection attacks

.github/workflows/upload-sentry-sourcemaps.yml

@@ -0,0 +1,46 @@
+name: Upload Sentry Sourcemaps (Manual)
+
+on:
+  workflow_dispatch:
+    inputs:
+      docker_image:
+        description: "Docker image to extract sourcemaps from"
+        required: true
+        type: string
+      release_version:
+        description: "Release version (e.g., v1.2.3)"
+        required: true
+        type: string
+      tag_version:
+        description: "Docker image tag (leave empty to use release_version)"
+        required: false
+        type: string
+
+permissions:
+  contents: read
+
+jobs:
+  upload-sourcemaps:
+    name: Upload Sourcemaps to Sentry
+    runs-on: ubuntu-latest
+    
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4.2.2
+        with:
+          fetch-depth: 0
+
+      - name: Set Docker Image
+        run: |
+          if [ -n "${{ inputs.tag_version }}" ]; then
+            echo "DOCKER_IMAGE=${{ inputs.docker_image }}:${{ inputs.tag_version }}" >> $GITHUB_ENV
+          else
+            echo "DOCKER_IMAGE=${{ inputs.docker_image }}:${{ inputs.release_version }}" >> $GITHUB_ENV
+          fi
+
+      - name: Upload Sourcemaps to Sentry
+        uses: ./.github/actions/upload-sentry-sourcemaps
+        with:
+          docker_image: ${{ env.DOCKER_IMAGE }}
+          release_version: ${{ inputs.release_version }}
+          sentry_auth_token: ${{ secrets.SENTRY_AUTH_TOKEN }} 

.github/workflows/welcome-new-contributors.yml

@@ -0,0 +1,32 @@
+name: "Welcome new contributors"
+
+on:
+  issues:
+    types: opened
+  pull_request_target:
+    types: opened
+
+permissions:
+  pull-requests: write
+  issues: write
+
+jobs:
+  welcome-message:
+    name: Welcoming New Users
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    if: github.event.action == 'opened'
+    steps:
+      - name: Harden the runner (Audit all outbound calls)
+        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
+        with:
+          egress-policy: audit
+
+      - uses: actions/first-interaction@3c71ce730280171fd1cfb57c00c774f8998586f7 # v1
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          pr-message: |-
+            Thank you so much for making your first Pull Request and taking the time to improve Formbricks! 🚀🙏❤️
+            Feel free to join the conversation on [Github Discussions](https://github.com/formbricks/formbricks/discussions) if you need any help or have any questions. 😊
+          issue-message: |
+            Thank you for opening your first issue! 🙏❤️ One of our team members will review it and get back to you as soon as it possible. 😊

.tolgeerc.json

@@ -31,18 +31,6 @@
       {
         "language": "pt-PT",
         "path": "./apps/web/locales/pt-PT.json"
-      },
-      {
-        "language": "ro-RO",
-        "path": "./apps/web/locales/ro-RO.json"
-      },
-      {
-        "language": "ja-JP",
-        "path": "./apps/web/locales/ja-JP.json"
-      },
-      {
-        "language": "zh-Hans-CN",
-        "path": "./apps/web/locales/zh-Hans-CN.json"
       }
     ],
     "forceMode": "OVERRIDE"

README.md

@@ -21,7 +21,6 @@ The Open Source Qualtrics Alternative
 
 <p align="center">
 <a href="https://github.com/formbricks/formbricks/blob/main/LICENSE"><img src="https://img.shields.io/badge/License-AGPL-purple" alt="License"></a> <a href="https://github.com/formbricks/formbricks/stargazers"><img src="https://img.shields.io/github/stars/formbricks/formbricks?logo=github" alt="Github Stars"></a>
-<a href="https://insights.linuxfoundation.org/project/formbricks"><img src="https://insights.linuxfoundation.org/api/badge/health-score?project=formbricks"></a>
 <a href="https://news.ycombinator.com/item?id=32303986"><img src="https://img.shields.io/badge/Hacker%20News-122-%23FF6600" alt="Hacker News"></a>
 <a href="[https://www.producthunt.com/products/formbricks](https://www.producthunt.com/posts/formbricks)"><img src="https://img.shields.io/badge/Product%20Hunt-455-orange?logo=producthunt&logoColor=%23fff" alt="Product Hunt"></a>
 <a href="https://github.blog/2023-04-12-github-accelerator-our-first-cohort-and-whats-next/"><img src="https://img.shields.io/badge/2023-blue?logo=github&label=Github%20Accelerator" alt="Github Accelerator"></a>

apps/storybook/.storybook/main.ts

@@ -1,16 +1,13 @@
 import type { StorybookConfig } from "@storybook/react-vite";
-import { createRequire } from "module";
 import { dirname, join } from "path";
 
-const require = createRequire(import.meta.url);
-
 /**
  * This function is used to resolve the absolute path of a package.
  * It is needed in projects that use Yarn PnP or are set up within a monorepo.
  */
-function getAbsolutePath(value: string): any {
+const getAbsolutePath = (value: string) => {
   return dirname(require.resolve(join(value, "package.json")));
-}
+};
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../../web/modules/ui/**/stories.@(js|jsx|mjs|ts|tsx)"],

apps/storybook/.storybook/preview.ts

@@ -1,8 +1,6 @@
 import type { Preview } from "@storybook/react-vite";
 import { TolgeeProvider } from "@tolgee/react";
 import React from "react";
-// Import translation data for Storybook
-import enUSTranslations from "../../web/locales/en-US.json";
 import "../../web/modules/ui/globals.css";
 import { TolgeeBase } from "../../web/tolgee/shared";
 
@@ -14,16 +12,7 @@ const withTolgee = (Story: any) => {
 
   return React.createElement(
     TolgeeProvider,
-    {
-      tolgee,
-      fallback: "Loading",
-      ssr: {
-        language: "en-US",
-        staticData: {
-          "en-US": enUSTranslations,
-        },
-      },
-    },
+    { tolgee, fallback: "Loading", ssr: { language: "en", staticData: {} } },
     React.createElement(Story)
   );
 };

apps/web/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:22-alpine3.22 AS base
+FROM node:22-alpine3.21 AS base
 
 #
 ## step 1: Prune monorepo
@@ -30,13 +30,9 @@ COPY apps/web/scripts/docker/read-secrets.sh /tmp/read-secrets.sh
 RUN chmod +x /tmp/read-secrets.sh
 
 # Increase Node.js memory limit as a regular build argument
-ARG NODE_OPTIONS="--max_old_space_size=8192"
+ARG NODE_OPTIONS="--max_old_space_size=4096"
 ENV NODE_OPTIONS=${NODE_OPTIONS}
 
-# Target architecture - automatically provided by Docker in multi-platform builds
-# but needs explicit declaration for some build systems (like Depot)
-ARG TARGETARCH
-
 # Set the working directory
 WORKDIR /app
 
@@ -61,7 +57,6 @@ RUN pnpm build --filter=@formbricks/database
 # This mounts the secrets only during this build step without storing them in layers
 RUN --mount=type=secret,id=database_url \
     --mount=type=secret,id=encryption_key \
-    --mount=type=secret,id=sentry_auth_token \
     /tmp/read-secrets.sh pnpm build --filter=@formbricks/web...
 
 # Extract Prisma version

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/landing/components/landing-sidebar.test.tsx

@@ -45,11 +45,22 @@ afterEach(() => {
 });
 
 describe("LandingSidebar component", () => {
-  const user = { id: "u1", name: "Alice", email: "alice@example.com" } as any;
+  const user = { id: "u1", name: "Alice", email: "alice@example.com", imageUrl: "" } as any;
   const organization = { id: "o1", name: "orgOne" } as any;
+  const organizations = [
+    { id: "o2", name: "betaOrg" },
+    { id: "o1", name: "alphaOrg" },
+  ] as any;
 
   test("renders logo, avatar, and initial modal closed", () => {
-    render(<LandingSidebar user={user} organization={organization} />);
+    render(
+      <LandingSidebar
+        isMultiOrgEnabled={false}
+        user={user}
+        organization={organization}
+        organizations={organizations}
+      />
+    );
 
     // Formbricks logo
     expect(screen.getByAltText("environments.formbricks_logo")).toBeInTheDocument();
@@ -60,7 +71,14 @@ describe("LandingSidebar component", () => {
   });
 
   test("clicking logout triggers signOut", async () => {
-    render(<LandingSidebar user={user} organization={organization} />);
+    render(
+      <LandingSidebar
+        isMultiOrgEnabled={false}
+        user={user}
+        organization={organization}
+        organizations={organizations}
+      />
+    );
 
     // Open user dropdown by clicking on avatar trigger
     const trigger = screen.getByTestId("avatar").parentElement;

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/landing/components/landing-sidebar.tsx

@@ -10,27 +10,48 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@/modules/ui/components/dropdown-menu";
 import { useTranslate } from "@tolgee/react";
-import { ArrowUpRightIcon, ChevronRightIcon, LogOutIcon } from "lucide-react";
+import { ArrowUpRightIcon, ChevronRightIcon, LogOutIcon, PlusIcon } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
-import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useMemo, useState } from "react";
 import { TOrganization } from "@formbricks/types/organizations";
 import { TUser } from "@formbricks/types/user";
 
 interface LandingSidebarProps {
+  isMultiOrgEnabled: boolean;
   user: TUser;
   organization: TOrganization;
+  organizations: TOrganization[];
 }
 
-export const LandingSidebar = ({ user, organization }: LandingSidebarProps) => {
+export const LandingSidebar = ({
+  isMultiOrgEnabled,
+  user,
+  organization,
+  organizations,
+}: LandingSidebarProps) => {
   const [openCreateOrganizationModal, setOpenCreateOrganizationModal] = useState<boolean>(false);
 
   const { t } = useTranslate();
   const { signOut: signOutWithAudit } = useSignOut({ id: user.id, email: user.email });
 
+  const router = useRouter();
+
+  const handleEnvironmentChangeByOrganization = (organizationId: string) => {
+    router.push(`/organizations/${organizationId}/`);
+  };
+
   const dropdownNavigation = [
     {
       label: t("common.documentation"),
@@ -40,6 +61,13 @@ export const LandingSidebar = ({ user, organization }: LandingSidebarProps) => {
     },
   ];
 
+  const currentOrganizationId = organization?.id;
+  const currentOrganizationName = capitalizeFirstLetter(organization?.name);
+
+  const sortedOrganizations = useMemo(() => {
+    return [...organizations].sort((a, b) => a.name.localeCompare(b.name));
+  }, [organizations]);
+
   return (
     <aside
       className={cn(
@@ -52,28 +80,27 @@ export const LandingSidebar = ({ user, organization }: LandingSidebarProps) => {
           <DropdownMenuTrigger
             asChild
             id="userDropdownTrigger"
-            className="w-full rounded-br-xl border-t p-4 transition-colors duration-200 hover:bg-slate-50 focus:outline-none">
-            <button
-              type="button"
-              className={cn("flex w-full cursor-pointer flex-row items-center gap-3 text-left")}
-              aria-haspopup="menu">
-              <ProfileAvatar userId={user.id} />
-              <div className="grow overflow-hidden">
-                <p
-                  title={user?.email}
-                  className={cn(
-                    "ph-no-capture ph-no-capture -mb-0.5 truncate text-sm font-bold text-slate-700"
-                  )}>
-                  {user?.name ? <span>{user?.name}</span> : <span>{user?.email}</span>}
-                </p>
-                <p
-                  title={capitalizeFirstLetter(organization?.name)}
-                  className="truncate text-sm text-slate-500">
-                  {capitalizeFirstLetter(organization?.name)}
-                </p>
-              </div>
-              <ChevronRightIcon className={cn("h-5 w-5 shrink-0 text-slate-700 hover:text-slate-500")} />
-            </button>
+            className="w-full rounded-br-xl border-t py-4 pl-4 transition-colors duration-200 hover:bg-slate-50 focus:outline-none">
+            <div tabIndex={0} className={cn("flex cursor-pointer flex-row items-center space-x-3")}>
+              <ProfileAvatar userId={user.id} imageUrl={user.imageUrl} />
+              <>
+                <div>
+                  <p
+                    title={user?.email}
+                    className={cn(
+                      "ph-no-capture ph-no-capture -mb-0.5 max-w-28 truncate text-sm font-bold text-slate-700"
+                    )}>
+                    {user?.name ? <span>{user?.name}</span> : <span>{user?.email}</span>}
+                  </p>
+                  <p
+                    title={capitalizeFirstLetter(organization?.name)}
+                    className="max-w-28 truncate text-sm text-slate-500">
+                    {capitalizeFirstLetter(organization?.name)}
+                  </p>
+                </div>
+                <ChevronRightIcon className={cn("h-5 w-5 text-slate-700 hover:text-slate-500")} />
+              </>
+            </div>
           </DropdownMenuTrigger>
 
           <DropdownMenuContent
@@ -85,13 +112,7 @@ export const LandingSidebar = ({ user, organization }: LandingSidebarProps) => {
             {/* Dropdown Items */}
 
             {dropdownNavigation.map((link) => (
-              <Link
-                key={link.href}
-                id={link.href}
-                href={link.href}
-                target={link.target}
-                rel={link.target === "_blank" ? "noopener noreferrer" : undefined}
-                className="flex w-full items-center">
+              <Link id={link.href} href={link.href} target={link.target} className="flex w-full items-center">
                 <DropdownMenuItem>
                   <link.icon className="mr-2 h-4 w-4" strokeWidth={1.5} />
                   {link.label}
@@ -100,6 +121,7 @@ export const LandingSidebar = ({ user, organization }: LandingSidebarProps) => {
             ))}
 
             {/* Logout */}
+
             <DropdownMenuItem
               onClick={async () => {
                 await signOutWithAudit({
@@ -114,6 +136,45 @@ export const LandingSidebar = ({ user, organization }: LandingSidebarProps) => {
               icon={<LogOutIcon className="mr-2 h-4 w-4" strokeWidth={1.5} />}>
               {t("common.logout")}
             </DropdownMenuItem>
+
+            {/* Organization Switch */}
+
+            {(isMultiOrgEnabled || organizations.length > 1) && (
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger className="rounded-lg">
+                  <div>
+                    <p>{currentOrganizationName}</p>
+                    <p className="block text-xs text-slate-500">{t("common.switch_organization")}</p>
+                  </div>
+                </DropdownMenuSubTrigger>
+                <DropdownMenuPortal>
+                  <DropdownMenuSubContent sideOffset={10} alignOffset={5}>
+                    <DropdownMenuRadioGroup
+                      value={currentOrganizationId}
+                      onValueChange={(organizationId) =>
+                        handleEnvironmentChangeByOrganization(organizationId)
+                      }>
+                      {sortedOrganizations.map((organization) => (
+                        <DropdownMenuRadioItem
+                          value={organization.id}
+                          className="cursor-pointer rounded-lg"
+                          key={organization.id}>
+                          {organization.name}
+                        </DropdownMenuRadioItem>
+                      ))}
+                    </DropdownMenuRadioGroup>
+                    <DropdownMenuSeparator />
+                    {isMultiOrgEnabled && (
+                      <DropdownMenuItem
+                        onClick={() => setOpenCreateOrganizationModal(true)}
+                        icon={<PlusIcon className="mr-2 h-4 w-4" />}>
+                        <span>{t("common.create_new_organization")}</span>
+                      </DropdownMenuItem>
+                    )}
+                  </DropdownMenuSubContent>
+                </DropdownMenuPortal>
+              </DropdownMenuSub>
+            )}
           </DropdownMenuContent>
         </DropdownMenu>
       </div>

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

@@ -1,4 +1,3 @@
-import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
 import { getOrganizationsByUserId } from "@/lib/organization/service";
 import { getUser } from "@/lib/user/service";
 import { getOrganizationAuth } from "@/modules/organization/lib/utils";
@@ -16,7 +15,6 @@ vi.mock("@/modules/ee/license-check/lib/license", () => ({
     isPendingDowngrade: false,
     fallbackLevel: "live",
   }),
-  getLicenseFeatures: vi.fn().mockResolvedValue({ isMultiOrgEnabled: true }),
 }));
 
 vi.mock("@/lib/constants", () => ({
@@ -103,32 +101,16 @@ vi.mock("@/lib/constants", () => ({
   AUDIT_LOG_ENABLED: true,
 }));
 
-vi.mock("@/lib/getPublicUrl", () => ({
-  getPublicDomain: vi.fn().mockReturnValue("http://localhost:3000"),
-}));
-
 vi.mock("@/app/(app)/(onboarding)/organizations/[organizationId]/landing/components/landing-sidebar", () => ({
   LandingSidebar: () => <div data-testid="landing-sidebar" />,
 }));
-vi.mock("@/app/(app)/environments/[environmentId]/components/project-and-org-switch", () => ({
-  ProjectAndOrgSwitch: () => <div data-testid="project-and-org-switch" />,
-}));
 vi.mock("@/modules/organization/lib/utils");
 vi.mock("@/lib/user/service");
 vi.mock("@/lib/organization/service");
-vi.mock("@/lib/membership/service");
 vi.mock("@/tolgee/server");
 vi.mock("next/navigation", () => ({
   redirect: vi.fn(() => "REDIRECT_STUB"),
   notFound: vi.fn(() => "NOT_FOUND_STUB"),
-  usePathname: vi.fn(() => "/organizations/org1"),
-  useRouter: vi.fn(() => ({
-    push: vi.fn(),
-    replace: vi.fn(),
-    back: vi.fn(),
-    forward: vi.fn(),
-    refresh: vi.fn(),
-  })),
 }));
 
 // Mock the React cache function
@@ -160,7 +142,6 @@ describe("Page component", () => {
         isPendingDowngrade: false,
         fallbackLevel: "live",
       }),
-      getLicenseFeatures: vi.fn().mockResolvedValue({ isMultiOrgEnabled: true }),
     }));
     const { default: Page } = await import("./page");
     const result = await Page({ params: { organizationId: "org1" } });
@@ -182,7 +163,6 @@ describe("Page component", () => {
         isPendingDowngrade: false,
         fallbackLevel: "live",
       }),
-      getLicenseFeatures: vi.fn().mockResolvedValue({ isMultiOrgEnabled: true }),
     }));
     const { default: Page } = await import("./page");
     const result = await Page({ params: { organizationId: "org1" } });
@@ -193,16 +173,10 @@ describe("Page component", () => {
   test("renders header and sidebar for authenticated user", async () => {
     vi.mocked(getOrganizationAuth).mockResolvedValue({
       session: { user: { id: "user1" } },
-      organization: { id: "org1", billing: { plan: "free" } },
+      organization: { id: "org1" },
     } as any);
     vi.mocked(getUser).mockResolvedValue({ id: "user1", name: "Test User" } as any);
     vi.mocked(getOrganizationsByUserId).mockResolvedValue([{ id: "org1", name: "Org One" } as any]);
-    vi.mocked(getMembershipByUserIdOrganizationId).mockResolvedValue({
-      organizationId: "org1",
-      userId: "user1",
-      accepted: true,
-      role: "member",
-    } as any);
     vi.mocked(getTranslate).mockResolvedValue((props: any) =>
       typeof props === "string" ? props : props.key || ""
     );
@@ -214,13 +188,11 @@ describe("Page component", () => {
         isPendingDowngrade: false,
         fallbackLevel: "live",
       }),
-      getLicenseFeatures: vi.fn().mockResolvedValue({ isMultiOrgEnabled: true }),
     }));
     const { default: Page } = await import("./page");
     const element = await Page({ params: { organizationId: "org1" } });
     render(element as React.ReactElement);
     expect(screen.getByTestId("landing-sidebar")).toBeInTheDocument();
-    expect(screen.getByTestId("project-and-org-switch")).toBeInTheDocument();
     expect(screen.getByText("organizations.landing.no_projects_warning_title")).toBeInTheDocument();
     expect(screen.getByText("organizations.landing.no_projects_warning_subtitle")).toBeInTheDocument();
   });

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

@@ -1,11 +1,7 @@
 import { LandingSidebar } from "@/app/(app)/(onboarding)/organizations/[organizationId]/landing/components/landing-sidebar";
-import { ProjectAndOrgSwitch } from "@/app/(app)/environments/[environmentId]/components/project-and-org-switch";
-import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
-import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
-import { getAccessFlags } from "@/lib/membership/utils";
 import { getOrganizationsByUserId } from "@/lib/organization/service";
 import { getUser } from "@/lib/user/service";
-import { getIsMultiOrgEnabled } from "@/modules/ee/license-check/lib/utils";
+import { getEnterpriseLicense } from "@/modules/ee/license-check/lib/license";
 import { getOrganizationAuth } from "@/modules/organization/lib/utils";
 import { Header } from "@/modules/ui/components/header";
 import { getTranslate } from "@/tolgee/server";
@@ -26,38 +22,24 @@ const Page = async (props) => {
 
   const organizations = await getOrganizationsByUserId(session.user.id);
 
-  const isMultiOrgEnabled = await getIsMultiOrgEnabled();
+  const { features } = await getEnterpriseLicense();
 
-  const membership = await getMembershipByUserIdOrganizationId(session.user.id, organization.id);
-  const { isMember } = getAccessFlags(membership?.role);
+  const isMultiOrgEnabled = features?.isMultiOrgEnabled ?? false;
 
   return (
     <div className="flex min-h-full min-w-full flex-row">
-      <LandingSidebar user={user} organization={organization} />
+      <LandingSidebar
+        user={user}
+        organization={organization}
+        isMultiOrgEnabled={isMultiOrgEnabled}
+        organizations={organizations}
+      />
       <div className="flex-1">
-        <div className="flex h-full flex-col">
-          <div className="p-6">
-            {/* we only need to render organization breadcrumb on this page, so we pass some default value without actually calculating them to ProjectAndOrgSwitch component  */}
-            <ProjectAndOrgSwitch
-              currentOrganizationId={organization.id}
-              organizations={organizations}
-              projects={[]}
-              isMultiOrgEnabled={isMultiOrgEnabled}
-              organizationProjectsLimit={0}
-              isFormbricksCloud={IS_FORMBRICKS_CLOUD}
-              isLicenseActive={false}
-              isOwnerOrManager={false}
-              isAccessControlAllowed={false}
-              isMember={isMember}
-              environments={[]}
-            />
-          </div>
-          <div className="flex h-full flex-col items-center justify-center space-y-12">
-            <Header
-              title={t("organizations.landing.no_projects_warning_title")}
-              subtitle={t("organizations.landing.no_projects_warning_subtitle")}
-            />
-          </div>
+        <div className="flex h-full flex-col items-center justify-center space-y-12">
+          <Header
+            title={t("organizations.landing.no_projects_warning_title")}
+            subtitle={t("organizations.landing.no_projects_warning_subtitle")}
+          />
         </div>
       </div>
     </div>

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

@@ -62,7 +62,7 @@ describe("ProjectSettings component", () => {
     industry: "ind",
     defaultBrandColor: "#fff",
     organizationTeams: [],
-    isAccessControlAllowed: false,
+    canDoRoleManagement: false,
     userProjectsCount: 0,
   } as any;
 

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

@@ -42,7 +42,7 @@ interface ProjectSettingsProps {
   industry: TProjectConfigIndustry;
   defaultBrandColor: string;
   organizationTeams: TOrganizationTeam[];
-  isAccessControlAllowed: boolean;
+  canDoRoleManagement: boolean;
   userProjectsCount: number;
 }
 
@@ -53,7 +53,7 @@ export const ProjectSettings = ({
   industry,
   defaultBrandColor,
   organizationTeams,
-  isAccessControlAllowed = false,
+  canDoRoleManagement = false,
   userProjectsCount,
 }: ProjectSettingsProps) => {
   const [createTeamModalOpen, setCreateTeamModalOpen] = useState(false);
@@ -174,7 +174,7 @@ export const ProjectSettings = ({
               )}
             />
 
-            {isAccessControlAllowed && userProjectsCount > 0 && (
+            {canDoRoleManagement && userProjectsCount > 0 && (
               <FormField
                 control={form.control}
                 name="teamIds"

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

@@ -1,6 +1,6 @@
 import { getTeamsByOrganizationId } from "@/app/(app)/(onboarding)/lib/onboarding";
 import { getUserProjects } from "@/lib/project/service";
-import { getAccessControlPermission } from "@/modules/ee/license-check/lib/utils";
+import { getRoleManagementPermission } from "@/modules/ee/license-check/lib/utils";
 import { getOrganizationAuth } from "@/modules/organization/lib/utils";
 import "@testing-library/jest-dom/vitest";
 import { cleanup, render, screen } from "@testing-library/react";
@@ -12,7 +12,7 @@ vi.mock("@/lib/constants", () => ({ DEFAULT_BRAND_COLOR: "#fff" }));
 // Mocks before component import
 vi.mock("@/app/(app)/(onboarding)/lib/onboarding", () => ({ getTeamsByOrganizationId: vi.fn() }));
 vi.mock("@/lib/project/service", () => ({ getUserProjects: vi.fn() }));
-vi.mock("@/modules/ee/license-check/lib/utils", () => ({ getAccessControlPermission: vi.fn() }));
+vi.mock("@/modules/ee/license-check/lib/utils", () => ({ getRoleManagementPermission: vi.fn() }));
 vi.mock("@/modules/organization/lib/utils", () => ({ getOrganizationAuth: vi.fn() }));
 vi.mock("@/tolgee/server", () => ({ getTranslate: () => Promise.resolve((key: string) => key) }));
 vi.mock("next/navigation", () => ({ redirect: vi.fn() }));
@@ -61,7 +61,7 @@ describe("ProjectSettingsPage", () => {
     } as any);
     vi.mocked(getUserProjects).mockResolvedValueOnce([] as any);
     vi.mocked(getTeamsByOrganizationId).mockResolvedValueOnce(null as any);
-    vi.mocked(getAccessControlPermission).mockResolvedValueOnce(false as any);
+    vi.mocked(getRoleManagementPermission).mockResolvedValueOnce(false as any);
 
     await expect(Page({ params, searchParams })).rejects.toThrow("common.organization_teams_not_found");
   });
@@ -73,7 +73,7 @@ describe("ProjectSettingsPage", () => {
     } as any);
     vi.mocked(getUserProjects).mockResolvedValueOnce([{ id: "p1" }] as any);
     vi.mocked(getTeamsByOrganizationId).mockResolvedValueOnce([{ id: "t1", name: "Team1" }] as any);
-    vi.mocked(getAccessControlPermission).mockResolvedValueOnce(true as any);
+    vi.mocked(getRoleManagementPermission).mockResolvedValueOnce(true as any);
 
     const element = await Page({ params, searchParams });
     render(element as React.ReactElement);
@@ -96,7 +96,7 @@ describe("ProjectSettingsPage", () => {
     } as any);
     vi.mocked(getUserProjects).mockResolvedValueOnce([] as any);
     vi.mocked(getTeamsByOrganizationId).mockResolvedValueOnce([{ id: "t1", name: "Team1" }] as any);
-    vi.mocked(getAccessControlPermission).mockResolvedValueOnce(true as any);
+    vi.mocked(getRoleManagementPermission).mockResolvedValueOnce(true as any);
 
     const element = await Page({ params, searchParams });
     render(element as React.ReactElement);

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

@@ -2,7 +2,7 @@ import { getTeamsByOrganizationId } from "@/app/(app)/(onboarding)/lib/onboardin
 import { ProjectSettings } from "@/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/settings/components/ProjectSettings";
 import { DEFAULT_BRAND_COLOR } from "@/lib/constants";
 import { getUserProjects } from "@/lib/project/service";
-import { getAccessControlPermission } from "@/modules/ee/license-check/lib/utils";
+import { getRoleManagementPermission } from "@/modules/ee/license-check/lib/utils";
 import { getOrganizationAuth } from "@/modules/organization/lib/utils";
 import { Button } from "@/modules/ui/components/button";
 import { Header } from "@/modules/ui/components/header";
@@ -41,7 +41,7 @@ const Page = async (props: ProjectSettingsPageProps) => {
 
   const organizationTeams = await getTeamsByOrganizationId(params.organizationId);
 
-  const isAccessControlAllowed = await getAccessControlPermission(organization.billing.plan);
+  const canDoRoleManagement = await getRoleManagementPermission(organization.billing.plan);
 
   if (!organizationTeams) {
     throw new Error(t("common.organization_teams_not_found"));
@@ -60,7 +60,7 @@ const Page = async (props: ProjectSettingsPageProps) => {
         industry={industry}
         defaultBrandColor={DEFAULT_BRAND_COLOR}
         organizationTeams={organizationTeams}
-        isAccessControlAllowed={isAccessControlAllowed}
+        canDoRoleManagement={canDoRoleManagement}
         userProjectsCount={projects.length}
       />
       {projects.length >= 1 && (

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

@@ -18,6 +18,11 @@ vi.mock("@/modules/ui/components/environmentId-base-layout", () => ({
     </div>
   ),
 }));
+vi.mock("@/modules/ui/components/dev-environment-banner", () => ({
+  DevEnvironmentBanner: ({ environment }: any) => (
+    <div data-testid="DevEnvironmentBanner">{environment.id}</div>
+  ),
+}));
 
 // Mocks for dependencies
 vi.mock("@/modules/environments/lib/utils", () => ({
@@ -53,6 +58,7 @@ describe("SurveyEditorEnvironmentLayout", () => {
     render(result);
 
     expect(screen.getByTestId("EnvironmentIdBaseLayout")).toHaveTextContent("env1");
+    expect(screen.getByTestId("DevEnvironmentBanner")).toHaveTextContent("env1");
     expect(screen.getByTestId("child")).toHaveTextContent("Survey Editor Content");
   });
 

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

@@ -1,5 +1,6 @@
 import { getEnvironment } from "@/lib/environment/service";
 import { environmentIdLayoutChecks } from "@/modules/environments/lib/utils";
+import { DevEnvironmentBanner } from "@/modules/ui/components/dev-environment-banner";
 import { EnvironmentIdBaseLayout } from "@/modules/ui/components/environmentId-base-layout";
 import { redirect } from "next/navigation";
 
@@ -31,6 +32,7 @@ const SurveyEditorEnvironmentLayout = async (props) => {
       user={user}
       organization={organization}>
       <div className="flex h-screen flex-col">
+        <DevEnvironmentBanner environment={environment} />
         <div className="h-full overflow-y-auto bg-slate-50">{children}</div>
       </div>
     </EnvironmentIdBaseLayout>

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

@@ -8,8 +8,8 @@ import { checkAuthorizationUpdated } from "@/lib/utils/action-client/action-clie
 import { AuthenticatedActionClientCtx } from "@/lib/utils/action-client/types/context";
 import { withAuditLogging } from "@/modules/ee/audit-logs/lib/handler";
 import {
-  getAccessControlPermission,
   getOrganizationProjectsLimit,
+  getRoleManagementPermission,
 } from "@/modules/ee/license-check/lib/utils";
 import { createProject } from "@/modules/projects/settings/lib/project";
 import { z } from "zod";
@@ -58,9 +58,9 @@ export const createProjectAction = authenticatedActionClient.schema(ZCreateProje
       }
 
       if (parsedInput.data.teamIds && parsedInput.data.teamIds.length > 0) {
-        const isAccessControlAllowed = await getAccessControlPermission(organization.billing.plan);
+        const canDoRoleManagement = await getRoleManagementPermission(organization.billing.plan);
 
-        if (!isAccessControlAllowed) {
+        if (!canDoRoleManagement) {
           throw new OperationNotAllowedError("You do not have permission to manage roles");
         }
       }
@@ -71,6 +71,10 @@ export const createProjectAction = authenticatedActionClient.schema(ZCreateProje
         alert: {
           ...user.notificationSettings?.alert,
         },
+        weeklySummary: {
+          ...user.notificationSettings?.weeklySummary,
+          [project.id]: true,
+        },
       };
 
       await updateUser(user.id, {

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

@@ -24,17 +24,14 @@ export const ActionClassesTable = ({
   otherEnvActionClasses,
   otherEnvironment,
 }: ActionClassesTableProps) => {
-  const [isActionDetailModalOpen, setIsActionDetailModalOpen] = useState(false);
+  const [isActionDetailModalOpen, setActionDetailModalOpen] = useState(false);
 
   const [activeActionClass, setActiveActionClass] = useState<TActionClass>();
 
-  const handleOpenActionDetailModalClick = (
-    e: React.MouseEvent<HTMLButtonElement>,
-    actionClass: TActionClass
-  ) => {
+  const handleOpenActionDetailModalClick = (e, actionClass: TActionClass) => {
     e.preventDefault();
     setActiveActionClass(actionClass);
-    setIsActionDetailModalOpen(true);
+    setActionDetailModalOpen(true);
   };
 
   return (
@@ -45,7 +42,7 @@ export const ActionClassesTable = ({
           {actionClasses.length > 0 ? (
             actionClasses.map((actionClass, index) => (
               <button
-                onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+                onClick={(e) => {
                   handleOpenActionDetailModalClick(e, actionClass);
                 }}
                 className="w-full"
@@ -66,7 +63,7 @@ export const ActionClassesTable = ({
           environmentId={environmentId}
           environment={environment}
           open={isActionDetailModalOpen}
-          setOpen={setIsActionDetailModalOpen}
+          setOpen={setActionDetailModalOpen}
           actionClasses={actionClasses}
           actionClass={activeActionClass}
           isReadOnly={isReadOnly}

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

@@ -70,13 +70,15 @@ export const ActionDetailModal = ({
   };
 
   return (
-    <ModalWithTabs
-      open={open}
-      setOpen={setOpen}
-      tabs={tabs}
-      icon={ACTION_TYPE_ICON_LOOKUP[actionClass.type]}
-      label={actionClass.name}
-      description={typeDescription()}
-    />
+    <>
+      <ModalWithTabs
+        open={open}
+        setOpen={setOpen}
+        tabs={tabs}
+        icon={ACTION_TYPE_ICON_LOOKUP[actionClass.type]}
+        label={actionClass.name}
+        description={typeDescription()}
+      />
+    </>
   );
 };

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

@@ -11,21 +11,6 @@ vi.mock("@/app/(app)/environments/[environmentId]/actions/actions", () => ({
   updateActionClassAction: vi.fn(),
 }));
 
-// Mock action utils
-vi.mock("@/modules/survey/editor/lib/action-utils", () => ({
-  useActionClassKeys: vi.fn(() => ["existing-key"]),
-  createActionClassZodResolver: vi.fn(() => vi.fn()),
-  validatePermissions: vi.fn(),
-}));
-
-// Mock action builder
-vi.mock("@/modules/survey/editor/lib/action-builder", () => ({
-  buildActionObject: vi.fn((data, environmentId, t) => ({
-    ...data,
-    environmentId,
-  })),
-}));
-
 // Mock utils
 vi.mock("@/app/lib/actionClass/actionClass", () => ({
   isValidCssSelector: vi.fn((selector) => selector !== "invalid-selector"),
@@ -39,7 +24,6 @@ vi.mock("@/modules/ui/components/button", () => ({
     </button>
   ),
 }));
-
 vi.mock("@/modules/ui/components/code-action-form", () => ({
   CodeActionForm: ({ isReadOnly }: { isReadOnly: boolean }) => (
     <div data-testid="code-action-form" data-readonly={isReadOnly}>
@@ -47,7 +31,6 @@ vi.mock("@/modules/ui/components/code-action-form", () => ({
     </div>
   ),
 }));
-
 vi.mock("@/modules/ui/components/delete-dialog", () => ({
   DeleteDialog: ({ open, setOpen, isDeleting, onDelete }: any) =>
     open ? (
@@ -60,26 +43,6 @@ vi.mock("@/modules/ui/components/delete-dialog", () => ({
       </div>
     ) : null,
 }));
-
-vi.mock("@/modules/ui/components/action-name-description-fields", () => ({
-  ActionNameDescriptionFields: ({ isReadOnly, nameInputId, descriptionInputId }: any) => (
-    <div data-testid="action-name-description-fields">
-      <input
-        data-testid={`name-input-${nameInputId}`}
-        placeholder="environments.actions.eg_clicked_download"
-        disabled={isReadOnly}
-        defaultValue="Test Action"
-      />
-      <input
-        data-testid={`description-input-${descriptionInputId}`}
-        placeholder="environments.actions.user_clicked_download_button"
-        disabled={isReadOnly}
-        defaultValue="Test Description"
-      />
-    </div>
-  ),
-}));
-
 vi.mock("@/modules/ui/components/no-code-action-form", () => ({
   NoCodeActionForm: ({ isReadOnly }: { isReadOnly: boolean }) => (
     <div data-testid="no-code-action-form" data-readonly={isReadOnly}>
@@ -93,23 +56,6 @@ vi.mock("lucide-react", () => ({
   TrashIcon: () => <div data-testid="trash-icon">Trash</div>,
 }));
 
-// Mock react-hook-form
-const mockHandleSubmit = vi.fn();
-const mockForm = {
-  handleSubmit: mockHandleSubmit,
-  control: {},
-  formState: { errors: {} },
-};
-
-vi.mock("react-hook-form", async () => {
-  const actual = await vi.importActual("react-hook-form");
-  return {
-    ...actual,
-    useForm: vi.fn(() => mockForm),
-    FormProvider: ({ children }: any) => <div>{children}</div>,
-  };
-});
-
 const mockSetOpen = vi.fn();
 const mockActionClasses: TActionClass[] = [
   {
@@ -142,7 +88,6 @@ const createMockActionClass = (id: string, type: TActionClassType, name: string)
 describe("ActionSettingsTab", () => {
   beforeEach(() => {
     vi.clearAllMocks();
-    mockHandleSubmit.mockImplementation((fn) => fn);
   });
 
   afterEach(() => {
@@ -160,9 +105,13 @@ describe("ActionSettingsTab", () => {
       />
     );
 
-    expect(screen.getByTestId("action-name-description-fields")).toBeInTheDocument();
-    expect(screen.getByTestId("name-input-actionNameSettingsInput")).toBeInTheDocument();
-    expect(screen.getByTestId("description-input-actionDescriptionSettingsInput")).toBeInTheDocument();
+    // Use getByPlaceholderText or getByLabelText now that Input isn't mocked
+    expect(screen.getByPlaceholderText("environments.actions.eg_clicked_download")).toHaveValue(
+      actionClass.name
+    );
+    expect(screen.getByPlaceholderText("environments.actions.user_clicked_download_button")).toHaveValue(
+      actionClass.description
+    );
     expect(screen.getByTestId("code-action-form")).toBeInTheDocument();
     expect(
       screen.getByText("environments.actions.this_is_a_code_action_please_make_changes_in_your_code_base")
@@ -182,104 +131,18 @@ describe("ActionSettingsTab", () => {
       />
     );
 
-    expect(screen.getByTestId("action-name-description-fields")).toBeInTheDocument();
+    // Use getByPlaceholderText or getByLabelText now that Input isn't mocked
+    expect(screen.getByPlaceholderText("environments.actions.eg_clicked_download")).toHaveValue(
+      actionClass.name
+    );
+    expect(screen.getByPlaceholderText("environments.actions.user_clicked_download_button")).toHaveValue(
+      actionClass.description
+    );
     expect(screen.getByTestId("no-code-action-form")).toBeInTheDocument();
     expect(screen.getByRole("button", { name: "common.save_changes" })).toBeInTheDocument();
     expect(screen.getByRole("button", { name: /common.delete/ })).toBeInTheDocument();
   });
 
-  test("renders correctly for other action types (fallback)", () => {
-    const actionClass = {
-      ...createMockActionClass("auto1", "noCode", "Auto Action"),
-      type: "automatic" as any,
-    };
-    render(
-      <ActionSettingsTab
-        actionClass={actionClass}
-        actionClasses={mockActionClasses}
-        setOpen={mockSetOpen}
-        isReadOnly={false}
-      />
-    );
-
-    expect(screen.getByTestId("action-name-description-fields")).toBeInTheDocument();
-    expect(
-      screen.getByText(
-        "environments.actions.this_action_was_created_automatically_you_cannot_make_changes_to_it"
-      )
-    ).toBeInTheDocument();
-  });
-
-  test("calls utility functions on initialization", async () => {
-    const actionUtilsMock = await import("@/modules/survey/editor/lib/action-utils");
-
-    const actionClass = createMockActionClass("noCode1", "noCode", "No Code Action");
-    render(
-      <ActionSettingsTab
-        actionClass={actionClass}
-        actionClasses={mockActionClasses}
-        setOpen={mockSetOpen}
-        isReadOnly={false}
-      />
-    );
-
-    expect(actionUtilsMock.useActionClassKeys).toHaveBeenCalledWith(mockActionClasses);
-    expect(actionUtilsMock.createActionClassZodResolver).toHaveBeenCalled();
-  });
-
-  test("handles successful form submission", async () => {
-    const { updateActionClassAction } = await import(
-      "@/app/(app)/environments/[environmentId]/actions/actions"
-    );
-    const actionUtilsMock = await import("@/modules/survey/editor/lib/action-utils");
-
-    vi.mocked(updateActionClassAction).mockResolvedValue({ data: {} } as any);
-
-    const actionClass = createMockActionClass("noCode1", "noCode", "No Code Action");
-    render(
-      <ActionSettingsTab
-        actionClass={actionClass}
-        actionClasses={mockActionClasses}
-        setOpen={mockSetOpen}
-        isReadOnly={false}
-      />
-    );
-
-    // Check that utility functions were called during component initialization
-    expect(actionUtilsMock.useActionClassKeys).toHaveBeenCalledWith(mockActionClasses);
-    expect(actionUtilsMock.createActionClassZodResolver).toHaveBeenCalled();
-  });
-
-  test("handles permission validation error", async () => {
-    const actionUtilsMock = await import("@/modules/survey/editor/lib/action-utils");
-    vi.mocked(actionUtilsMock.validatePermissions).mockImplementation(() => {
-      throw new Error("Not authorized");
-    });
-
-    const actionClass = createMockActionClass("noCode1", "noCode", "No Code Action");
-    render(
-      <ActionSettingsTab
-        actionClass={actionClass}
-        actionClasses={mockActionClasses}
-        setOpen={mockSetOpen}
-        isReadOnly={false}
-      />
-    );
-
-    const submitButton = screen.getByRole("button", { name: "common.save_changes" });
-
-    mockHandleSubmit.mockImplementation((fn) => (e) => {
-      e.preventDefault();
-      return fn({ name: "Test", type: "noCode" });
-    });
-
-    await userEvent.click(submitButton);
-
-    await waitFor(() => {
-      expect(toast.error).toHaveBeenCalledWith("Not authorized");
-    });
-  });
-
   test("handles successful deletion", async () => {
     const actionClass = createMockActionClass("noCode1", "noCode", "No Code Action");
     const { deleteActionClassAction } = await import(
@@ -346,16 +209,17 @@ describe("ActionSettingsTab", () => {
         actionClass={actionClass}
         actionClasses={mockActionClasses}
         setOpen={mockSetOpen}
-        isReadOnly={true}
+        isReadOnly={true} // Set to read-only
       />
     );
 
-    expect(screen.getByTestId("name-input-actionNameSettingsInput")).toBeDisabled();
-    expect(screen.getByTestId("description-input-actionDescriptionSettingsInput")).toBeDisabled();
+    // Use getByPlaceholderText or getByLabelText now that Input isn't mocked
+    expect(screen.getByPlaceholderText("environments.actions.eg_clicked_download")).toBeDisabled();
+    expect(screen.getByPlaceholderText("environments.actions.user_clicked_download_button")).toBeDisabled();
     expect(screen.getByTestId("no-code-action-form")).toHaveAttribute("data-readonly", "true");
     expect(screen.queryByRole("button", { name: "common.save_changes" })).not.toBeInTheDocument();
     expect(screen.queryByRole("button", { name: /common.delete/ })).not.toBeInTheDocument();
-    expect(screen.getByRole("link", { name: "common.read_docs" })).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "common.read_docs" })).toBeInTheDocument(); // Docs link still visible
   });
 
   test("prevents delete when read-only", async () => {
@@ -364,6 +228,7 @@ describe("ActionSettingsTab", () => {
       "@/app/(app)/environments/[environmentId]/actions/actions"
     );
 
+    // Render with isReadOnly=true, but simulate a delete attempt
     render(
       <ActionSettingsTab
         actionClass={actionClass}
@@ -373,6 +238,12 @@ describe("ActionSettingsTab", () => {
       />
     );
 
+    // Try to open and confirm delete dialog (buttons won't exist, so we simulate the flow)
+    // This test primarily checks the logic within handleDeleteAction if it were called.
+    // A better approach might be to export handleDeleteAction for direct testing,
+    // but for now, we assume the UI prevents calling it.
+
+    // We can assert that the delete button isn't there to prevent the flow
     expect(screen.queryByRole("button", { name: /common.delete/ })).not.toBeInTheDocument();
     expect(deleteActionClassAction).not.toHaveBeenCalled();
   });
@@ -391,19 +262,4 @@ describe("ActionSettingsTab", () => {
     expect(docsLink).toHaveAttribute("href", "https://formbricks.com/docs/actions/no-code");
     expect(docsLink).toHaveAttribute("target", "_blank");
   });
-
-  test("uses correct input IDs for ActionNameDescriptionFields", () => {
-    const actionClass = createMockActionClass("noCode1", "noCode", "No Code Action");
-    render(
-      <ActionSettingsTab
-        actionClass={actionClass}
-        actionClasses={mockActionClasses}
-        setOpen={mockSetOpen}
-        isReadOnly={false}
-      />
-    );
-
-    expect(screen.getByTestId("name-input-actionNameSettingsInput")).toBeInTheDocument();
-    expect(screen.getByTestId("description-input-actionDescriptionSettingsInput")).toBeInTheDocument();
-  });
 });

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

@@ -4,17 +4,14 @@ import {
   deleteActionClassAction,
   updateActionClassAction,
 } from "@/app/(app)/environments/[environmentId]/actions/actions";
-import { buildActionObject } from "@/modules/survey/editor/lib/action-builder";
-import {
-  createActionClassZodResolver,
-  useActionClassKeys,
-  validatePermissions,
-} from "@/modules/survey/editor/lib/action-utils";
-import { ActionNameDescriptionFields } from "@/modules/ui/components/action-name-description-fields";
+import { isValidCssSelector } from "@/app/lib/actionClass/actionClass";
 import { Button } from "@/modules/ui/components/button";
 import { CodeActionForm } from "@/modules/ui/components/code-action-form";
 import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
+import { FormControl, FormError, FormField, FormItem, FormLabel } from "@/modules/ui/components/form";
+import { Input } from "@/modules/ui/components/input";
 import { NoCodeActionForm } from "@/modules/ui/components/no-code-action-form";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { useTranslate } from "@tolgee/react";
 import { TrashIcon } from "lucide-react";
 import Link from "next/link";
@@ -22,7 +19,8 @@ import { useRouter } from "next/navigation";
 import { useMemo, useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
-import { TActionClass, TActionClassInput } from "@formbricks/types/action-classes";
+import { z } from "zod";
+import { TActionClass, TActionClassInput, ZActionClassInput } from "@formbricks/types/action-classes";
 
 interface ActionSettingsTabProps {
   actionClass: TActionClass;
@@ -50,51 +48,63 @@ export const ActionSettingsTab = ({
     [actionClass.id, actionClasses]
   );
 
-  const actionClassKeys = useActionClassKeys(actionClasses).filter((key) => key !== actionClass.key);
-
   const form = useForm<TActionClassInput>({
     defaultValues: {
       ...restActionClass,
     },
-    resolver: createActionClassZodResolver(actionClassNames, actionClassKeys, t),
+    resolver: zodResolver(
+      ZActionClassInput.superRefine((data, ctx) => {
+        if (data.name && actionClassNames.includes(data.name)) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            path: ["name"],
+            message: t("environments.actions.action_with_name_already_exists", { name: data.name }),
+          });
+        }
+      })
+    ),
 
     mode: "onChange",
   });
 
   const { handleSubmit, control } = form;
 
-  const renderActionForm = () => {
-    if (actionClass.type === "code") {
-      return (
-        <>
-          <CodeActionForm form={form} isReadOnly={true} />
-          <p className="text-sm text-slate-600">
-            {t("environments.actions.this_is_a_code_action_please_make_changes_in_your_code_base")}
-          </p>
-        </>
-      );
-    }
-
-    if (actionClass.type === "noCode") {
-      return <NoCodeActionForm form={form} isReadOnly={isReadOnly} />;
-    }
-
-    return (
-      <p className="text-sm text-slate-600">
-        {t("environments.actions.this_action_was_created_automatically_you_cannot_make_changes_to_it")}
-      </p>
-    );
-  };
-
   const onSubmit = async (data: TActionClassInput) => {
     try {
+      if (isReadOnly) {
+        throw new Error(t("common.you_are_not_authorised_to_perform_this_action"));
+      }
       setIsUpdatingAction(true);
-      validatePermissions(isReadOnly, t);
-      const updatedAction = buildActionObject(data, actionClass.environmentId, t);
 
+      if (data.name && actionClassNames.includes(data.name)) {
+        throw new Error(t("environments.actions.action_with_name_already_exists", { name: data.name }));
+      }
+
+      if (
+        data.type === "noCode" &&
+        data.noCodeConfig?.type === "click" &&
+        data.noCodeConfig.elementSelector.cssSelector &&
+        !isValidCssSelector(data.noCodeConfig.elementSelector.cssSelector)
+      ) {
+        throw new Error(t("environments.actions.invalid_css_selector"));
+      }
+
+      const updatedData: TActionClassInput = {
+        ...data,
+        ...(data.type === "noCode" &&
+          data.noCodeConfig?.type === "click" && {
+            noCodeConfig: {
+              ...data.noCodeConfig,
+              elementSelector: {
+                cssSelector: data.noCodeConfig.elementSelector.cssSelector,
+                innerHtml: data.noCodeConfig.elementSelector.innerHtml,
+              },
+            },
+          }),
+      };
       await updateActionClassAction({
         actionClassId: actionClass.id,
-        updatedAction: updatedAction,
+        updatedAction: updatedData,
       });
       setOpen(false);
       router.refresh();
@@ -113,7 +123,7 @@ export const ActionSettingsTab = ({
       router.refresh();
       toast.success(t("environments.actions.action_deleted_successfully"));
       setOpen(false);
-    } catch {
+    } catch (error) {
       toast.error(t("common.something_went_wrong_please_try_again"));
     } finally {
       setIsDeletingAction(false);
@@ -125,14 +135,79 @@ export const ActionSettingsTab = ({
       <FormProvider {...form}>
         <form onSubmit={handleSubmit(onSubmit)}>
           <div className="max-h-[400px] w-full space-y-4 overflow-y-auto">
-            <ActionNameDescriptionFields
-              control={control}
-              isReadOnly={isReadOnly}
-              nameInputId="actionNameSettingsInput"
-              descriptionInputId="actionDescriptionSettingsInput"
-            />
+            <div className="grid w-full grid-cols-2 gap-x-4">
+              <div className="col-span-1">
+                <FormField
+                  control={control}
+                  name="name"
+                  disabled={isReadOnly}
+                  render={({ field, fieldState: { error } }) => (
+                    <FormItem>
+                      <FormLabel htmlFor="actionNameSettingsInput">
+                        {actionClass.type === "noCode"
+                          ? t("environments.actions.what_did_your_user_do")
+                          : t("environments.actions.display_name")}
+                      </FormLabel>
 
-            {renderActionForm()}
+                      <FormControl>
+                        <Input
+                          type="text"
+                          id="actionNameSettingsInput"
+                          {...field}
+                          placeholder={t("environments.actions.eg_clicked_download")}
+                          isInvalid={!!error?.message}
+                          disabled={isReadOnly}
+                        />
+                      </FormControl>
+
+                      <FormError />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <div className="col-span-1">
+                <FormField
+                  control={control}
+                  name="description"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel htmlFor="actionDescriptionSettingsInput">
+                        {t("common.description")}
+                      </FormLabel>
+
+                      <FormControl>
+                        <Input
+                          type="text"
+                          id="actionDescriptionSettingsInput"
+                          {...field}
+                          placeholder={t("environments.actions.user_clicked_download_button")}
+                          value={field.value ?? ""}
+                          disabled={isReadOnly}
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </div>
+
+            {actionClass.type === "code" ? (
+              <>
+                <CodeActionForm form={form} isReadOnly={true} />
+                <p className="text-sm text-slate-600">
+                  {t("environments.actions.this_is_a_code_action_please_make_changes_in_your_code_base")}
+                </p>
+              </>
+            ) : actionClass.type === "noCode" ? (
+              <NoCodeActionForm form={form} isReadOnly={isReadOnly} />
+            ) : (
+              <p className="text-sm text-slate-600">
+                {t(
+                  "environments.actions.this_action_was_created_automatically_you_cannot_make_changes_to_it"
+                )}
+              </p>
+            )}
           </div>
 
           <div className="flex justify-between gap-x-2 border-slate-200 pt-4">

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

@@ -1,5 +1,3 @@
-import { getOrganizationsByUserId } from "@/app/(app)/environments/[environmentId]/lib/organization";
-import { getProjectsByUserId } from "@/app/(app)/environments/[environmentId]/lib/project";
 import { getEnvironment, getEnvironments } from "@/lib/environment/service";
 import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
 import { getAccessFlags } from "@/lib/membership/utils";
@@ -7,20 +5,22 @@ import {
   getMonthlyActiveOrganizationPeopleCount,
   getMonthlyOrganizationResponseCount,
   getOrganizationByEnvironmentId,
+  getOrganizationsByUserId,
 } from "@/lib/organization/service";
+import { getUserProjects } from "@/lib/project/service";
 import { getUser } from "@/lib/user/service";
-import {
-  getAccessControlPermission,
-  getOrganizationProjectsLimit,
-} from "@/modules/ee/license-check/lib/utils";
+import { getOrganizationProjectsLimit } from "@/modules/ee/license-check/lib/utils";
 import { getProjectPermissionByUserId } from "@/modules/ee/teams/lib/roles";
-import { getTeamsByOrganizationId } from "@/modules/ee/teams/team-list/lib/team";
 import { cleanup, render, screen } from "@testing-library/react";
 import type { Session } from "next-auth";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TMembership } from "@formbricks/types/memberships";
-import { TOrganization } from "@formbricks/types/organizations";
+import {
+  TOrganization,
+  TOrganizationBilling,
+  TOrganizationBillingPlanLimits,
+} from "@formbricks/types/organizations";
 import { TProject } from "@formbricks/types/project";
 import { TUser } from "@formbricks/types/user";
 
@@ -31,12 +31,16 @@ vi.mock("@/lib/environment/service", () => ({
 }));
 vi.mock("@/lib/organization/service", () => ({
   getOrganizationByEnvironmentId: vi.fn(),
+  getOrganizationsByUserId: vi.fn(),
   getMonthlyActiveOrganizationPeopleCount: vi.fn(),
   getMonthlyOrganizationResponseCount: vi.fn(),
 }));
 vi.mock("@/lib/user/service", () => ({
   getUser: vi.fn(),
 }));
+vi.mock("@/lib/project/service", () => ({
+  getUserProjects: vi.fn(),
+}));
 vi.mock("@/lib/membership/service", () => ({
   getMembershipByUserIdOrganizationId: vi.fn(),
 }));
@@ -45,33 +49,13 @@ vi.mock("@/lib/membership/utils", () => ({
 }));
 vi.mock("@/modules/ee/license-check/lib/utils", () => ({
   getOrganizationProjectsLimit: vi.fn(),
-  getAccessControlPermission: vi.fn(),
 }));
 vi.mock("@/modules/ee/teams/lib/roles", () => ({
   getProjectPermissionByUserId: vi.fn(),
 }));
-vi.mock("@/modules/ee/teams/team-list/lib/team", () => ({
-  getTeamsByOrganizationId: vi.fn(),
-}));
 vi.mock("@/tolgee/server", () => ({
   getTranslate: async () => (key: string) => key,
 }));
-vi.mock("@/app/(app)/environments/[environmentId]/lib/organization", () => ({
-  getOrganizationsByUserId: vi.fn(),
-}));
-vi.mock("@/app/(app)/environments/[environmentId]/lib/project", () => ({
-  getProjectsByUserId: vi.fn(),
-}));
-vi.mock("@formbricks/database", () => ({
-  prisma: {
-    project: {
-      findMany: vi.fn(),
-    },
-    organization: {
-      findMany: vi.fn(),
-    },
-  },
-}));
 
 let mockIsFormbricksCloud = false;
 let mockIsDevelopment = false;
@@ -87,17 +71,15 @@ vi.mock("@/lib/constants", () => ({
 
 // Mock components
 vi.mock("@/app/(app)/environments/[environmentId]/components/MainNavigation", () => ({
-  MainNavigation: ({ organizationTeams, isAccessControlAllowed }: any) => (
-    <div data-testid="main-navigation">
-      MainNavigation
-      <div data-testid="organization-teams">{JSON.stringify(organizationTeams || [])}</div>
-      <div data-testid="is-access-control-allowed">{isAccessControlAllowed?.toString() || "false"}</div>
-    </div>
-  ),
+  MainNavigation: () => <div data-testid="main-navigation">MainNavigation</div>,
 }));
 vi.mock("@/app/(app)/environments/[environmentId]/components/TopControlBar", () => ({
   TopControlBar: () => <div data-testid="top-control-bar">TopControlBar</div>,
 }));
+vi.mock("@/modules/ui/components/dev-environment-banner", () => ({
+  DevEnvironmentBanner: ({ environment }: { environment: TEnvironment }) =>
+    environment.type === "development" ? <div data-testid="dev-banner">DevEnvironmentBanner</div> : null,
+}));
 vi.mock("@/modules/ui/components/limits-reached-banner", () => ({
   LimitsReachedBanner: () => <div data-testid="limits-banner">LimitsReachedBanner</div>,
 }));
@@ -117,20 +99,23 @@ const mockUser = {
   name: "Test User",
   email: "test@example.com",
   emailVerified: new Date(),
+  imageUrl: "",
   twoFactorEnabled: false,
   identityProvider: "email",
   createdAt: new Date(),
   updatedAt: new Date(),
-  notificationSettings: { alert: {} },
+  notificationSettings: { alert: {}, weeklySummary: {} },
 } as unknown as TUser;
 
 const mockOrganization = {
   id: "org-1",
   name: "Test Org",
+  createdAt: new Date(),
+  updatedAt: new Date(),
   billing: {
-    plan: "free",
-    limits: {},
-  },
+    stripeCustomerId: null,
+    limits: { monthly: { responses: null } } as unknown as TOrganizationBillingPlanLimits,
+  } as unknown as TOrganizationBilling,
 } as unknown as TOrganization;
 
 const mockEnvironment: TEnvironment = {
@@ -171,17 +156,6 @@ const mockProjectPermission = {
   role: "admin",
 } as any;
 
-const mockOrganizationTeams = [
-  {
-    id: "team-1",
-    name: "Development Team",
-  },
-  {
-    id: "team-2",
-    name: "Marketing Team",
-  },
-];
-
 const mockSession: Session = {
   user: {
     id: "user-1",
@@ -193,19 +167,15 @@ describe("EnvironmentLayout", () => {
   beforeEach(() => {
     vi.mocked(getUser).mockResolvedValue(mockUser);
     vi.mocked(getEnvironment).mockResolvedValue(mockEnvironment);
-    vi.mocked(getOrganizationsByUserId).mockResolvedValue([
-      { id: mockOrganization.id, name: mockOrganization.name },
-    ]);
+    vi.mocked(getOrganizationsByUserId).mockResolvedValue([mockOrganization]);
     vi.mocked(getOrganizationByEnvironmentId).mockResolvedValue(mockOrganization);
-    vi.mocked(getProjectsByUserId).mockResolvedValue([{ id: mockProject.id, name: mockProject.name }]);
+    vi.mocked(getUserProjects).mockResolvedValue([mockProject]);
     vi.mocked(getEnvironments).mockResolvedValue([mockEnvironment]);
     vi.mocked(getMembershipByUserIdOrganizationId).mockResolvedValue(mockMembership);
     vi.mocked(getMonthlyActiveOrganizationPeopleCount).mockResolvedValue(100);
     vi.mocked(getMonthlyOrganizationResponseCount).mockResolvedValue(500);
     vi.mocked(getOrganizationProjectsLimit).mockResolvedValue(null as any);
     vi.mocked(getProjectPermissionByUserId).mockResolvedValue(mockProjectPermission);
-    vi.mocked(getTeamsByOrganizationId).mockResolvedValue(mockOrganizationTeams);
-    vi.mocked(getAccessControlPermission).mockResolvedValue(true);
     mockIsDevelopment = false;
     mockIsFormbricksCloud = false;
   });
@@ -244,6 +214,33 @@ describe("EnvironmentLayout", () => {
     expect(screen.queryByTestId("downgrade-banner")).not.toBeInTheDocument();
   });
 
+  test("renders DevEnvironmentBanner in development environment", async () => {
+    const devEnvironment = { ...mockEnvironment, type: "development" as const };
+    vi.mocked(getEnvironment).mockResolvedValue(devEnvironment);
+    mockIsDevelopment = true;
+    vi.resetModules();
+    await vi.doMock("@/modules/ee/license-check/lib/license", () => ({
+      getEnterpriseLicense: vi.fn().mockResolvedValue({
+        active: false,
+        isPendingDowngrade: false,
+        features: { isMultiOrgEnabled: false },
+        lastChecked: new Date(),
+        fallbackLevel: "live",
+      }),
+    }));
+    const { EnvironmentLayout } = await import(
+      "@/app/(app)/environments/[environmentId]/components/EnvironmentLayout"
+    );
+    render(
+      await EnvironmentLayout({
+        environmentId: "env-1",
+        session: mockSession,
+        children: <div>Child Content</div>,
+      })
+    );
+    expect(screen.getByTestId("dev-banner")).toBeInTheDocument();
+  });
+
   test("renders LimitsReachedBanner in Formbricks Cloud", async () => {
     mockIsFormbricksCloud = true;
     vi.resetModules();
@@ -291,84 +288,6 @@ describe("EnvironmentLayout", () => {
     expect(screen.getByTestId("downgrade-banner")).toBeInTheDocument();
   });
 
-  test("handles empty organizationTeams array", async () => {
-    vi.mocked(getTeamsByOrganizationId).mockResolvedValue([]);
-    vi.resetModules();
-    await vi.doMock("@/modules/ee/license-check/lib/license", () => ({
-      getEnterpriseLicense: vi.fn().mockResolvedValue({
-        active: false,
-        isPendingDowngrade: false,
-        features: { isMultiOrgEnabled: false },
-        lastChecked: new Date(),
-        fallbackLevel: "live",
-      }),
-    }));
-    const { EnvironmentLayout } = await import(
-      "@/app/(app)/environments/[environmentId]/components/EnvironmentLayout"
-    );
-    render(
-      await EnvironmentLayout({
-        environmentId: "env-1",
-        session: mockSession,
-        children: <div>Child Content</div>,
-      })
-    );
-
-    expect(screen.getByTestId("organization-teams")).toHaveTextContent("[]");
-  });
-
-  test("handles null organizationTeams", async () => {
-    vi.mocked(getTeamsByOrganizationId).mockResolvedValue(null);
-    vi.resetModules();
-    await vi.doMock("@/modules/ee/license-check/lib/license", () => ({
-      getEnterpriseLicense: vi.fn().mockResolvedValue({
-        active: false,
-        isPendingDowngrade: false,
-        features: { isMultiOrgEnabled: false },
-        lastChecked: new Date(),
-        fallbackLevel: "live",
-      }),
-    }));
-    const { EnvironmentLayout } = await import(
-      "@/app/(app)/environments/[environmentId]/components/EnvironmentLayout"
-    );
-    render(
-      await EnvironmentLayout({
-        environmentId: "env-1",
-        session: mockSession,
-        children: <div>Child Content</div>,
-      })
-    );
-
-    expect(screen.getByTestId("organization-teams")).toHaveTextContent("[]");
-  });
-
-  test("handles isAccessControlAllowed false", async () => {
-    vi.mocked(getAccessControlPermission).mockResolvedValue(false);
-    vi.resetModules();
-    await vi.doMock("@/modules/ee/license-check/lib/license", () => ({
-      getEnterpriseLicense: vi.fn().mockResolvedValue({
-        active: false,
-        isPendingDowngrade: false,
-        features: { isMultiOrgEnabled: false },
-        lastChecked: new Date(),
-        fallbackLevel: "live",
-      }),
-    }));
-    const { EnvironmentLayout } = await import(
-      "@/app/(app)/environments/[environmentId]/components/EnvironmentLayout"
-    );
-    render(
-      await EnvironmentLayout({
-        environmentId: "env-1",
-        session: mockSession,
-        children: <div>Child Content</div>,
-      })
-    );
-
-    expect(screen.getByTestId("is-access-control-allowed")).toHaveTextContent("false");
-  });
-
   test("throws error if user not found", async () => {
     vi.mocked(getUser).mockResolvedValue(null);
     vi.resetModules();
@@ -430,7 +349,7 @@ describe("EnvironmentLayout", () => {
   });
 
   test("throws error if projects, environments or organizations not found", async () => {
-    vi.mocked(getProjectsByUserId).mockResolvedValue(null as any);
+    vi.mocked(getUserProjects).mockResolvedValue(null as any);
     vi.resetModules();
     await vi.doMock("@/modules/ee/license-check/lib/license", () => ({
       getEnterpriseLicense: vi.fn().mockResolvedValue({

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

@@ -1,7 +1,5 @@
 import { MainNavigation } from "@/app/(app)/environments/[environmentId]/components/MainNavigation";
 import { TopControlBar } from "@/app/(app)/environments/[environmentId]/components/TopControlBar";
-import { getOrganizationsByUserId } from "@/app/(app)/environments/[environmentId]/lib/organization";
-import { getProjectsByUserId } from "@/app/(app)/environments/[environmentId]/lib/project";
 import { IS_DEVELOPMENT, IS_FORMBRICKS_CLOUD } from "@/lib/constants";
 import { getEnvironment, getEnvironments } from "@/lib/environment/service";
 import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
@@ -10,14 +8,14 @@ import {
   getMonthlyActiveOrganizationPeopleCount,
   getMonthlyOrganizationResponseCount,
   getOrganizationByEnvironmentId,
+  getOrganizationsByUserId,
 } from "@/lib/organization/service";
+import { getUserProjects } from "@/lib/project/service";
 import { getUser } from "@/lib/user/service";
 import { getEnterpriseLicense } from "@/modules/ee/license-check/lib/license";
-import {
-  getAccessControlPermission,
-  getOrganizationProjectsLimit,
-} from "@/modules/ee/license-check/lib/utils";
+import { getOrganizationProjectsLimit } from "@/modules/ee/license-check/lib/utils";
 import { getProjectPermissionByUserId } from "@/modules/ee/teams/lib/roles";
+import { DevEnvironmentBanner } from "@/modules/ui/components/dev-environment-banner";
 import { LimitsReachedBanner } from "@/modules/ui/components/limits-reached-banner";
 import { PendingDowngradeBanner } from "@/modules/ui/components/pending-downgrade-banner";
 import { getTranslate } from "@/tolgee/server";
@@ -50,22 +48,17 @@ export const EnvironmentLayout = async ({ environmentId, session, children }: En
     throw new Error(t("common.environment_not_found"));
   }
 
-  const currentUserMembership = await getMembershipByUserIdOrganizationId(session?.user.id, organization.id);
-  if (!currentUserMembership) {
-    throw new Error(t("common.membership_not_found"));
-  }
-  const membershipRole = currentUserMembership?.role;
-
-  const [projects, environments, isAccessControlAllowed] = await Promise.all([
-    getProjectsByUserId(user.id, currentUserMembership),
+  const [projects, environments] = await Promise.all([
+    getUserProjects(user.id, organization.id),
     getEnvironments(environment.projectId),
-    getAccessControlPermission(organization.billing.plan),
   ]);
 
   if (!projects || !environments || !organizations) {
     throw new Error(t("environments.projects_environments_organizations_not_found"));
   }
 
+  const currentUserMembership = await getMembershipByUserIdOrganizationId(session?.user.id, organization.id);
+  const membershipRole = currentUserMembership?.role;
   const { isMember } = getAccessFlags(membershipRole);
 
   const { features, lastChecked, isPendingDowngrade, active } = await getEnterpriseLicense();
@@ -90,17 +83,10 @@ export const EnvironmentLayout = async ({ environmentId, session, children }: En
 
   const organizationProjectsLimit = await getOrganizationProjectsLimit(organization.billing.limits);
 
-  // Find the current project from the projects array
-  const project = projects.find((p) => p.id === environment.projectId);
-  if (!project) {
-    throw new Error(t("common.project_not_found"));
-  }
-
-  const { isManager, isOwner } = getAccessFlags(membershipRole);
-  const isOwnerOrManager = isManager || isOwner;
-
   return (
     <div className="flex h-screen min-h-screen flex-col overflow-hidden">
+      <DevEnvironmentBanner environment={environment} />
+
       {IS_FORMBRICKS_CLOUD && (
         <LimitsReachedBanner
           organization={organization}
@@ -122,29 +108,24 @@ export const EnvironmentLayout = async ({ environmentId, session, children }: En
         <MainNavigation
           environment={environment}
           organization={organization}
+          organizations={organizations}
           projects={projects}
+          organizationProjectsLimit={organizationProjectsLimit}
           user={user}
           isFormbricksCloud={IS_FORMBRICKS_CLOUD}
           isDevelopment={IS_DEVELOPMENT}
           membershipRole={membershipRole}
+          isMultiOrgEnabled={isMultiOrgEnabled}
+          isLicenseActive={active}
         />
-        <div id="mainContent" className="flex flex-1 flex-col overflow-hidden bg-slate-50">
+        <div id="mainContent" className="flex-1 overflow-y-auto bg-slate-50">
           <TopControlBar
+            environment={environment}
             environments={environments}
-            currentOrganizationId={organization.id}
-            organizations={organizations}
-            currentProjectId={project.id}
-            projects={projects}
-            isMultiOrgEnabled={isMultiOrgEnabled}
-            organizationProjectsLimit={organizationProjectsLimit}
-            isFormbricksCloud={IS_FORMBRICKS_CLOUD}
-            isLicenseActive={active}
-            isOwnerOrManager={isOwnerOrManager}
-            isAccessControlAllowed={isAccessControlAllowed}
             membershipRole={membershipRole}
             projectPermission={projectPermission}
           />
-          <div className="flex-1 overflow-y-auto">{children}</div>
+          <div className="mt-14">{children}</div>
         </div>
       </div>
     </div>

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

@@ -51,6 +51,13 @@ vi.mock("@/modules/organization/components/CreateOrganizationModal", () => ({
   CreateOrganizationModal: ({ open }: { open: boolean }) =>
     open ? <div data-testid="create-org-modal">Create Org Modal</div> : null,
 }));
+vi.mock("@/modules/projects/components/project-switcher", () => ({
+  ProjectSwitcher: ({ isCollapsed }: { isCollapsed: boolean }) => (
+    <div data-testid="project-switcher" data-collapsed={isCollapsed}>
+      Project Switcher
+    </div>
+  ),
+}));
 vi.mock("@/modules/ui/components/avatars", () => ({
   ProfileAvatar: () => <div data-testid="profile-avatar">Avatar</div>,
 }));
@@ -93,12 +100,13 @@ const mockUser = {
   id: "user1",
   name: "Test User",
   email: "test@example.com",
+  imageUrl: "http://example.com/avatar.png",
   emailVerified: new Date(),
   twoFactorEnabled: false,
   identityProvider: "email",
   createdAt: new Date(),
   updatedAt: new Date(),
-  notificationSettings: { alert: {} },
+  notificationSettings: { alert: {}, weeklySummary: {} },
   role: "project_manager",
   objective: "other",
 } as unknown as TUser;
@@ -138,7 +146,6 @@ const defaultProps = {
   membershipRole: "owner" as const,
   organizationProjectsLimit: 5,
   isLicenseActive: true,
-  isAccessControlAllowed: true,
 };
 
 describe("MainNavigation", () => {
@@ -159,11 +166,13 @@ describe("MainNavigation", () => {
 
   test("renders expanded by default and collapses on toggle", async () => {
     render(<MainNavigation {...defaultProps} />);
+    const projectSwitcher = screen.getByTestId("project-switcher");
     // Assuming the toggle button is the only one initially without an accessible name
     // A more specific selector like data-testid would be better if available.
     const toggleButton = screen.getByRole("button", { name: "" });
 
     // Check initial state (expanded)
+    expect(projectSwitcher).toHaveAttribute("data-collapsed", "false");
     expect(screen.getByAltText("environments.formbricks_logo")).toBeInTheDocument();
     // Check localStorage is not set initially after clear()
     expect(localStorage.getItem("isMainNavCollapsed")).toBeNull();
@@ -174,6 +183,7 @@ describe("MainNavigation", () => {
     // Check state after first toggle (collapsed)
     await waitFor(() => {
       // Check that the attribute eventually becomes true
+      expect(projectSwitcher).toHaveAttribute("data-collapsed", "true");
       // Check that localStorage is updated
       expect(localStorage.getItem("isMainNavCollapsed")).toBe("true");
     });
@@ -188,6 +198,7 @@ describe("MainNavigation", () => {
     // Check state after second toggle (expanded)
     await waitFor(() => {
       // Check that the attribute eventually becomes false
+      expect(projectSwitcher).toHaveAttribute("data-collapsed", "false");
       // Check that localStorage is updated
       expect(localStorage.getItem("isMainNavCollapsed")).toBe("false");
     });
@@ -223,6 +234,8 @@ describe("MainNavigation", () => {
       expect(screen.getByText("common.account")).toBeInTheDocument();
     });
 
+    expect(screen.getByText("common.organization")).toBeInTheDocument();
+    expect(screen.getByText("common.license")).toBeInTheDocument(); // Not cloud, not member
     expect(screen.getByText("common.documentation")).toBeInTheDocument();
     expect(screen.getByText("common.logout")).toBeInTheDocument();
 
@@ -243,6 +256,46 @@ describe("MainNavigation", () => {
     });
   });
 
+  test("handles organization switching", async () => {
+    render(<MainNavigation {...defaultProps} />);
+
+    const userTrigger = screen.getByTestId("profile-avatar").parentElement!;
+    await userEvent.click(userTrigger);
+
+    // Wait for the initial dropdown items
+    await waitFor(() => {
+      expect(screen.getByText("common.switch_organization")).toBeInTheDocument();
+    });
+
+    const switchOrgTrigger = screen.getByText("common.switch_organization").closest("div[role='menuitem']")!;
+    await userEvent.hover(switchOrgTrigger); // Hover to open sub-menu
+
+    const org2Item = await screen.findByText("Another Org"); // findByText includes waitFor
+    await userEvent.click(org2Item);
+
+    expect(mockRouterPush).toHaveBeenCalledWith("/organizations/org2/");
+  });
+
+  test("opens create organization modal", async () => {
+    render(<MainNavigation {...defaultProps} />);
+
+    const userTrigger = screen.getByTestId("profile-avatar").parentElement!;
+    await userEvent.click(userTrigger);
+
+    // Wait for the initial dropdown items
+    await waitFor(() => {
+      expect(screen.getByText("common.switch_organization")).toBeInTheDocument();
+    });
+
+    const switchOrgTrigger = screen.getByText("common.switch_organization").closest("div[role='menuitem']")!;
+    await userEvent.hover(switchOrgTrigger); // Hover to open sub-menu
+
+    const createOrgButton = await screen.findByText("common.create_new_organization"); // findByText includes waitFor
+    await userEvent.click(createOrgButton);
+
+    expect(screen.getByTestId("create-org-modal")).toBeInTheDocument();
+  });
+
   test("hides new version banner for members or if no new version", async () => {
     // Test for member
     vi.mocked(getLatestStableFbReleaseAction).mockResolvedValue({ data: "v1.1.0" });
@@ -270,25 +323,15 @@ describe("MainNavigation", () => {
     expect(screen.queryByTestId("project-switcher")).not.toBeInTheDocument();
   });
 
-  test("passes isAccessControlAllowed props to ProjectSwitcher", () => {
-    render(<MainNavigation {...defaultProps} />);
+  test("shows billing link and hides license link in cloud", async () => {
+    render(<MainNavigation {...defaultProps} isFormbricksCloud={true} />);
+    const userTrigger = screen.getByTestId("profile-avatar").parentElement!;
+    await userEvent.click(userTrigger);
 
-    // Test basic navigation structure is rendered (aside element with complementary role)
-    expect(screen.getByRole("complementary")).toBeInTheDocument();
-    expect(screen.getByTestId("profile-avatar")).toBeInTheDocument();
-  });
-
-  test("handles no organizationTeams", () => {
-    render(<MainNavigation {...defaultProps} />);
-
-    // Test that navigation renders correctly with no teams
-    expect(screen.getByRole("complementary")).toBeInTheDocument();
-  });
-
-  test("handles isAccessControlAllowed false", () => {
-    render(<MainNavigation {...defaultProps} />);
-
-    // Test that navigation renders correctly with access control disabled
-    expect(screen.getByRole("complementary")).toBeInTheDocument();
+    // Wait for dropdown items
+    await waitFor(() => {
+      expect(screen.getByText("common.billing")).toBeInTheDocument();
+    });
+    expect(screen.queryByText("common.license")).not.toBeInTheDocument();
   });
 });

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

@@ -2,17 +2,26 @@
 
 import { getLatestStableFbReleaseAction } from "@/app/(app)/environments/[environmentId]/actions/actions";
 import { NavigationLink } from "@/app/(app)/environments/[environmentId]/components/NavigationLink";
-import { isNewerVersion } from "@/app/(app)/environments/[environmentId]/lib/utils";
 import FBLogo from "@/images/formbricks-wordmark.svg";
 import { cn } from "@/lib/cn";
 import { getAccessFlags } from "@/lib/membership/utils";
+import { capitalizeFirstLetter } from "@/lib/utils/strings";
 import { useSignOut } from "@/modules/auth/hooks/use-sign-out";
+import { CreateOrganizationModal } from "@/modules/organization/components/CreateOrganizationModal";
+import { ProjectSwitcher } from "@/modules/projects/components/project-switcher";
 import { ProfileAvatar } from "@/modules/ui/components/avatars";
 import { Button } from "@/modules/ui/components/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@/modules/ui/components/dropdown-menu";
 import { useTranslate } from "@tolgee/react";
@@ -21,14 +30,18 @@ import {
   BlocksIcon,
   ChevronRightIcon,
   Cog,
+  CreditCardIcon,
+  KeyIcon,
   LogOutIcon,
   MessageCircle,
   MousePointerClick,
   PanelLeftCloseIcon,
   PanelLeftOpenIcon,
+  PlusIcon,
   RocketIcon,
   UserCircleIcon,
   UserIcon,
+  UsersIcon,
 } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
@@ -37,40 +50,53 @@ import { useEffect, useMemo, useState } from "react";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TOrganizationRole } from "@formbricks/types/memberships";
 import { TOrganization } from "@formbricks/types/organizations";
+import { TProject } from "@formbricks/types/project";
 import { TUser } from "@formbricks/types/user";
 import packageJson from "../../../../../package.json";
 
 interface NavigationProps {
   environment: TEnvironment;
+  organizations: TOrganization[];
   user: TUser;
   organization: TOrganization;
-  projects: { id: string; name: string }[];
+  projects: TProject[];
+  isMultiOrgEnabled: boolean;
   isFormbricksCloud: boolean;
   isDevelopment: boolean;
   membershipRole?: TOrganizationRole;
+  organizationProjectsLimit: number;
+  isLicenseActive: boolean;
 }
 
 export const MainNavigation = ({
   environment,
+  organizations,
   organization,
   user,
   projects,
+  isMultiOrgEnabled,
   membershipRole,
   isFormbricksCloud,
+  organizationProjectsLimit,
+  isLicenseActive,
   isDevelopment,
 }: NavigationProps) => {
   const router = useRouter();
   const pathname = usePathname();
   const { t } = useTranslate();
+  const [currentOrganizationName, setCurrentOrganizationName] = useState("");
+  const [currentOrganizationId, setCurrentOrganizationId] = useState("");
+  const [showCreateOrganizationModal, setShowCreateOrganizationModal] = useState(false);
   const [isCollapsed, setIsCollapsed] = useState(true);
   const [isTextVisible, setIsTextVisible] = useState(true);
   const [latestVersion, setLatestVersion] = useState("");
   const { signOut: signOutWithAudit } = useSignOut({ id: user.id, email: user.email });
 
   const project = projects.find((project) => project.id === environment.projectId);
-  const { isManager, isOwner, isBilling } = getAccessFlags(membershipRole);
+  const { isManager, isOwner, isMember, isBilling } = getAccessFlags(membershipRole);
 
   const isOwnerOrManager = isManager || isOwner;
+  const isPricingDisabled = isMember;
 
   const toggleSidebar = () => {
     setIsCollapsed(!isCollapsed);
@@ -91,11 +117,40 @@ export const MainNavigation = ({
   }, [isCollapsed]);
 
   useEffect(() => {
-    // Auto collapse project navbar on org and account settings
-    if (pathname?.includes("/settings")) {
-      setIsCollapsed(true);
+    if (organization && organization.name !== "") {
+      setCurrentOrganizationName(organization.name);
+      setCurrentOrganizationId(organization.id);
     }
-  }, [pathname]);
+  }, [organization]);
+
+  const sortedOrganizations = useMemo(() => {
+    return [...organizations].sort((a, b) => a.name.localeCompare(b.name));
+  }, [organizations]);
+
+  const sortedProjects = useMemo(() => {
+    const channelOrder: (string | null)[] = ["website", "app", "link", null];
+
+    const groupedProjects = projects.reduce(
+      (acc, project) => {
+        const channel = project.config.channel;
+        const key = channel !== null ? channel : "null";
+        acc[key] = acc[key] || [];
+        acc[key].push(project);
+        return acc;
+      },
+      {} as Record<string, typeof projects>
+    );
+
+    Object.keys(groupedProjects).forEach((channel) => {
+      groupedProjects[channel].sort((a, b) => a.name.localeCompare(b.name));
+    });
+
+    return channelOrder.flatMap((channel) => groupedProjects[channel !== null ? channel : "null"] || []);
+  }, [projects]);
+
+  const handleEnvironmentChangeByOrganization = (organizationId: string) => {
+    router.push(`/organizations/${organizationId}/`);
+  };
 
   const mainNavigation = useMemo(
     () => [
@@ -141,14 +196,25 @@ export const MainNavigation = ({
       icon: UserCircleIcon,
     },
     {
-      label: t("common.documentation"),
-      href: "https://formbricks.com/docs",
-      target: "_blank",
-      icon: ArrowUpRightIcon,
+      label: t("common.organization"),
+      href: `/environments/${environment.id}/settings/general`,
+      icon: UsersIcon,
     },
     {
-      label: t("common.share_feedback"),
-      href: "https://github.com/formbricks/formbricks/issues",
+      label: t("common.billing"),
+      href: `/environments/${environment.id}/settings/billing`,
+      hidden: !isFormbricksCloud,
+      icon: CreditCardIcon,
+    },
+    {
+      label: t("common.license"),
+      href: `/environments/${environment.id}/settings/enterprise`,
+      hidden: isFormbricksCloud || isPricingDisabled,
+      icon: KeyIcon,
+    },
+    {
+      label: t("common.documentation"),
+      href: "https://formbricks.com/docs",
       target: "_blank",
       icon: ArrowUpRightIcon,
     },
@@ -161,7 +227,7 @@ export const MainNavigation = ({
         const latestVersionTag = res.data;
         const currentVersionTag = `v${packageJson.version}`;
 
-        if (isNewerVersion(currentVersionTag, latestVersionTag)) {
+        if (currentVersionTag !== latestVersionTag) {
           setLatestVersion(latestVersionTag);
         }
       }
@@ -177,7 +243,8 @@ export const MainNavigation = ({
         <aside
           className={cn(
             "z-40 flex flex-col justify-between rounded-r-xl border-r border-slate-200 bg-white pt-3 shadow-md transition-all duration-100",
-            !isCollapsed ? "w-sidebar-collapsed" : "w-sidebar-expanded"
+            !isCollapsed ? "w-sidebar-collapsed" : "w-sidebar-expanded",
+            environment.type === "development" ? `h-[calc(100vh-1.25rem)]` : "h-screen"
           )}>
           <div>
             {/* Logo and Toggle */}
@@ -243,6 +310,22 @@ export const MainNavigation = ({
               </Link>
             )}
 
+            {/* Project Switch */}
+            {!isBilling && (
+              <ProjectSwitcher
+                environmentId={environment.id}
+                projects={sortedProjects}
+                project={project}
+                isCollapsed={isCollapsed}
+                isFormbricksCloud={isFormbricksCloud}
+                isLicenseActive={isLicenseActive}
+                isOwnerOrManager={isOwnerOrManager}
+                isTextVisible={isTextVisible}
+                organization={organization}
+                organizationProjectsLimit={organizationProjectsLimit}
+              />
+            )}
+
             {/* User Switch */}
             <div className="flex items-center">
               <DropdownMenu>
@@ -251,27 +334,29 @@ export const MainNavigation = ({
                   id="userDropdownTrigger"
                   className="w-full rounded-br-xl border-t py-4 transition-colors duration-200 hover:bg-slate-50 focus:outline-none">
                   <div
+                    tabIndex={0}
                     className={cn(
-                      "flex cursor-pointer flex-row items-center gap-3",
-                      isCollapsed ? "justify-center px-2" : "px-4"
+                      "flex cursor-pointer flex-row items-center space-x-3",
+                      isCollapsed ? "pl-2" : "pl-4"
                     )}>
-                    <ProfileAvatar userId={user.id} />
+                    <ProfileAvatar userId={user.id} imageUrl={user.imageUrl} />
                     {!isCollapsed && !isTextVisible && (
                       <>
-                        <div
-                          className={cn(isTextVisible ? "opacity-0" : "opacity-100", "grow overflow-hidden")}>
+                        <div className={cn(isTextVisible ? "opacity-0" : "opacity-100")}>
                           <p
                             title={user?.email}
                             className={cn(
-                              "ph-no-capture ph-no-capture -mb-0.5 truncate text-sm font-bold text-slate-700"
+                              "ph-no-capture ph-no-capture -mb-0.5 max-w-28 truncate text-sm font-bold text-slate-700"
                             )}>
                             {user?.name ? <span>{user?.name}</span> : <span>{user?.email}</span>}
                           </p>
-                          <p className="text-sm text-slate-700">{t("common.account")}</p>
+                          <p
+                            title={capitalizeFirstLetter(organization?.name)}
+                            className="max-w-28 truncate text-sm text-slate-500">
+                            {capitalizeFirstLetter(organization?.name)}
+                          </p>
                         </div>
-                        <ChevronRightIcon
-                          className={cn("h-5 w-5 shrink-0 text-slate-700 hover:text-slate-500")}
-                        />
+                        <ChevronRightIcon className={cn("h-5 w-5 text-slate-700 hover:text-slate-500")} />
                       </>
                     )}
                   </div>
@@ -285,20 +370,24 @@ export const MainNavigation = ({
                   align="end">
                   {/* Dropdown Items */}
 
-                  {dropdownNavigation.map((link) => (
-                    <Link
-                      href={link.href}
-                      target={link.target}
-                      className="flex w-full items-center"
-                      key={link.label}
-                      rel={link.target === "_blank" ? "noopener noreferrer" : undefined}>
-                      <DropdownMenuItem>
-                        <link.icon className="mr-2 h-4 w-4" strokeWidth={1.5} />
-                        {link.label}
-                      </DropdownMenuItem>
-                    </Link>
-                  ))}
+                  {dropdownNavigation.map(
+                    (link) =>
+                      !link.hidden && (
+                        <Link
+                          href={link.href}
+                          target={link.target}
+                          className="flex w-full items-center"
+                          key={link.label}>
+                          <DropdownMenuItem>
+                            <link.icon className="mr-2 h-4 w-4" strokeWidth={1.5} />
+                            {link.label}
+                          </DropdownMenuItem>
+                        </Link>
+                      )
+                  )}
+
                   {/* Logout */}
+
                   <DropdownMenuItem
                     onClick={async () => {
                       const route = await signOutWithAudit({
@@ -314,12 +403,55 @@ export const MainNavigation = ({
                     icon={<LogOutIcon className="mr-2 h-4 w-4" strokeWidth={1.5} />}>
                     {t("common.logout")}
                   </DropdownMenuItem>
+
+                  {/* Organization Switch */}
+
+                  {(isMultiOrgEnabled || organizations.length > 1) && (
+                    <DropdownMenuSub>
+                      <DropdownMenuSubTrigger className="rounded-lg">
+                        <div>
+                          <p>{currentOrganizationName}</p>
+                          <p className="block text-xs text-slate-500">{t("common.switch_organization")}</p>
+                        </div>
+                      </DropdownMenuSubTrigger>
+                      <DropdownMenuPortal>
+                        <DropdownMenuSubContent sideOffset={10} alignOffset={5}>
+                          <DropdownMenuRadioGroup
+                            value={currentOrganizationId}
+                            onValueChange={(organizationId) =>
+                              handleEnvironmentChangeByOrganization(organizationId)
+                            }>
+                            {sortedOrganizations.map((organization) => (
+                              <DropdownMenuRadioItem
+                                value={organization.id}
+                                className="cursor-pointer rounded-lg"
+                                key={organization.id}>
+                                {organization.name}
+                              </DropdownMenuRadioItem>
+                            ))}
+                          </DropdownMenuRadioGroup>
+                          <DropdownMenuSeparator />
+                          {isMultiOrgEnabled && (
+                            <DropdownMenuItem
+                              onClick={() => setShowCreateOrganizationModal(true)}
+                              icon={<PlusIcon className="mr-2 h-4 w-4" />}>
+                              <span>{t("common.create_new_organization")}</span>
+                            </DropdownMenuItem>
+                          )}
+                        </DropdownMenuSubContent>
+                      </DropdownMenuPortal>
+                    </DropdownMenuSub>
+                  )}
                 </DropdownMenuContent>
               </DropdownMenu>
             </div>
           </div>
         </aside>
       )}
+      <CreateOrganizationModal
+        open={showCreateOrganizationModal}
+        setOpen={(val) => setShowCreateOrganizationModal(val)}
+      />
     </>
   );
 };

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

@@ -28,7 +28,7 @@ const TestComponent = () => {
 
   return (
     <div>
-      <div data-testid="responseStatus">{selectedFilter.responseStatus}</div>
+      <div data-testid="onlyComplete">{selectedFilter.onlyComplete.toString()}</div>
       <div data-testid="filterLength">{selectedFilter.filter.length}</div>
       <div data-testid="questionOptionsLength">{selectedOptions.questionOptions.length}</div>
       <div data-testid="questionFilterOptionsLength">{selectedOptions.questionFilterOptions.length}</div>
@@ -44,7 +44,7 @@ const TestComponent = () => {
                 filterType: { filterValue: "value1", filterComboBoxValue: "option1" },
               },
             ],
-            responseStatus: "complete",
+            onlyComplete: true,
           })
         }>
         Update Filter
@@ -81,7 +81,7 @@ describe("ResponseFilterContext", () => {
       </ResponseFilterProvider>
     );
 
-    expect(screen.getByTestId("responseStatus").textContent).toBe("all");
+    expect(screen.getByTestId("onlyComplete").textContent).toBe("false");
     expect(screen.getByTestId("filterLength").textContent).toBe("0");
     expect(screen.getByTestId("questionOptionsLength").textContent).toBe("0");
     expect(screen.getByTestId("questionFilterOptionsLength").textContent).toBe("0");
@@ -99,7 +99,7 @@ describe("ResponseFilterContext", () => {
     const updateButton = screen.getByText("Update Filter");
     await userEvent.click(updateButton);
 
-    expect(screen.getByTestId("responseStatus").textContent).toBe("complete");
+    expect(screen.getByTestId("onlyComplete").textContent).toBe("true");
     expect(screen.getByTestId("filterLength").textContent).toBe("1");
   });
 

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

@@ -16,11 +16,9 @@ export interface FilterValue {
   };
 }
 
-export type TResponseStatus = "all" | "complete" | "partial";
-
 export interface SelectedFilterValue {
   filter: FilterValue[];
-  responseStatus: TResponseStatus;
+  onlyComplete: boolean;
 }
 
 interface SelectedFilterOptions {
@@ -49,7 +47,7 @@ const ResponseFilterProvider = ({ children }: { children: React.ReactNode }) =>
   // state holds the filter selected value
   const [selectedFilter, setSelectedFilter] = useState<SelectedFilterValue>({
     filter: [],
-    responseStatus: "all",
+    onlyComplete: false,
   });
   // state holds all the options of the responses fetched
   const [selectedOptions, setSelectedOptions] = useState<SelectedFilterOptions>({
@@ -69,7 +67,7 @@ const ResponseFilterProvider = ({ children }: { children: React.ReactNode }) =>
     });
     setSelectedFilter({
       filter: [],
-      responseStatus: "all",
+      onlyComplete: false,
     });
   }, []);
 

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

@@ -0,0 +1,66 @@
+import { TopControlButtons } from "@/app/(app)/environments/[environmentId]/components/TopControlButtons";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { TEnvironment } from "@formbricks/types/environment";
+import { TOrganizationRole } from "@formbricks/types/memberships";
+import { TopControlBar } from "./TopControlBar";
+
+// Mock the child component
+vi.mock("@/app/(app)/environments/[environmentId]/components/TopControlButtons", () => ({
+  TopControlButtons: vi.fn(() => <div data-testid="top-control-buttons">Mocked TopControlButtons</div>),
+}));
+
+const mockEnvironment: TEnvironment = {
+  id: "env1",
+  createdAt: new Date(),
+  updatedAt: new Date(),
+  type: "production",
+  projectId: "proj1",
+  appSetupCompleted: true,
+};
+
+const mockEnvironments: TEnvironment[] = [
+  mockEnvironment,
+  { ...mockEnvironment, id: "env2", type: "development" },
+];
+
+const mockMembershipRole: TOrganizationRole = "owner";
+const mockProjectPermission = "manage";
+
+describe("TopControlBar", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  test("renders correctly and passes props to TopControlButtons", () => {
+    render(
+      <TopControlBar
+        environment={mockEnvironment}
+        environments={mockEnvironments}
+        membershipRole={mockMembershipRole}
+        projectPermission={mockProjectPermission}
+      />
+    );
+
+    // Check if the main div is rendered
+    const mainDiv = screen.getByTestId("top-control-buttons").parentElement?.parentElement?.parentElement;
+    expect(mainDiv).toHaveClass(
+      "fixed inset-0 top-0 z-30 flex h-14 w-full items-center justify-end bg-slate-50 px-6"
+    );
+
+    // Check if the mocked child component is rendered
+    expect(screen.getByTestId("top-control-buttons")).toBeInTheDocument();
+
+    // Check if the child component received the correct props
+    expect(TopControlButtons).toHaveBeenCalledWith(
+      {
+        environment: mockEnvironment,
+        environments: mockEnvironments,
+        membershipRole: mockMembershipRole,
+        projectPermission: mockProjectPermission,
+      },
+      undefined // Updated from {} to undefined
+    );
+  });
+});

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

@@ -1,110 +1,32 @@
-"use client";
-
-import { ProjectAndOrgSwitch } from "@/app/(app)/environments/[environmentId]/components/project-and-org-switch";
-import { useEnvironment } from "@/app/(app)/environments/[environmentId]/context/environment-context";
-import { getAccessFlags } from "@/lib/membership/utils";
+import { TopControlButtons } from "@/app/(app)/environments/[environmentId]/components/TopControlButtons";
 import { TTeamPermission } from "@/modules/ee/teams/project-teams/types/team";
-import { getTeamPermissionFlags } from "@/modules/ee/teams/utils/teams";
-import { Button } from "@/modules/ui/components/button";
-import { TooltipRenderer } from "@/modules/ui/components/tooltip";
-import { useTranslate } from "@tolgee/react";
-import { BugIcon, CircleUserIcon, PlusIcon } from "lucide-react";
-import Link from "next/link";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TOrganizationRole } from "@formbricks/types/memberships";
 
-interface TopControlBarProps {
+interface SideBarProps {
+  environment: TEnvironment;
   environments: TEnvironment[];
-  currentOrganizationId: string;
-  organizations: { id: string; name: string }[];
-  currentProjectId: string;
-  projects: { id: string; name: string }[];
-  isMultiOrgEnabled: boolean;
-  organizationProjectsLimit: number;
-  isFormbricksCloud: boolean;
-  isLicenseActive: boolean;
-  isOwnerOrManager: boolean;
-  isAccessControlAllowed: boolean;
   membershipRole?: TOrganizationRole;
   projectPermission: TTeamPermission | null;
 }
 
 export const TopControlBar = ({
+  environment,
   environments,
-  currentOrganizationId,
-  organizations,
-  currentProjectId,
-  projects,
-  isMultiOrgEnabled,
-  organizationProjectsLimit,
-  isFormbricksCloud,
-  isLicenseActive,
-  isOwnerOrManager,
-  isAccessControlAllowed,
   membershipRole,
   projectPermission,
-}: TopControlBarProps) => {
-  const { t } = useTranslate();
-
-  const { isMember, isBilling } = getAccessFlags(membershipRole);
-  const { hasReadAccess } = getTeamPermissionFlags(projectPermission);
-  const isReadOnly = isMember && hasReadAccess;
-  const { environment } = useEnvironment();
-
+}: SideBarProps) => {
   return (
-    <div
-      className="flex h-14 w-full items-center justify-between bg-slate-50 px-6"
-      data-testid="fb__global-top-control-bar">
-      <div className="flex items-center">
-        <ProjectAndOrgSwitch
-          currentEnvironmentId={environment.id}
-          environments={environments}
-          currentOrganizationId={currentOrganizationId}
-          organizations={organizations}
-          currentProjectId={currentProjectId}
-          projects={projects}
-          isMultiOrgEnabled={isMultiOrgEnabled}
-          organizationProjectsLimit={organizationProjectsLimit}
-          isFormbricksCloud={isFormbricksCloud}
-          isLicenseActive={isLicenseActive}
-          isOwnerOrManager={isOwnerOrManager}
-          isMember={isMember}
-          isAccessControlAllowed={isAccessControlAllowed}
-        />
-      </div>
-      <div className="z-50 flex items-center space-x-2">
-        <TooltipRenderer tooltipContent={t("common.share_feedback")}>
-          <Button variant="ghost" size="icon" className="h-fit w-fit bg-slate-50 p-1" asChild>
-            <Link
-              href="https://github.com/formbricks/formbricks/issues"
-              target="_blank"
-              aria-label={t("common.share_feedback")}
-              rel="noopener noreferrer">
-              <BugIcon />
-            </Link>
-          </Button>
-        </TooltipRenderer>
-
-        <TooltipRenderer tooltipContent={t("common.account")}>
-          <Button variant="ghost" size="icon" className="h-fit w-fit bg-slate-50 p-1" asChild>
-            <Link href={`/environments/${environment.id}/settings/profile`} aria-label={t("common.account")}>
-              <CircleUserIcon />
-            </Link>
-          </Button>
-        </TooltipRenderer>
-        {isBilling || isReadOnly ? (
-          <></>
-        ) : (
-          <TooltipRenderer tooltipContent={t("common.new_survey")}>
-            <Button variant="secondary" size="icon" className="h-fit w-fit p-1" asChild>
-              <Link
-                href={`/environments/${environment.id}/surveys/templates`}
-                aria-label={t("common.new_survey")}>
-                <PlusIcon />
-              </Link>
-            </Button>
-          </TooltipRenderer>
-        )}
+    <div className="fixed inset-0 top-0 z-30 flex h-14 w-full items-center justify-end bg-slate-50 px-6">
+      <div className="shadow-xs z-10">
+        <div className="flex w-fit items-center space-x-2 py-2">
+          <TopControlButtons
+            environment={environment}
+            environments={environments}
+            membershipRole={membershipRole}
+            projectPermission={projectPermission}
+          />
+        </div>
       </div>
     </div>
   );

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

@@ -0,0 +1,182 @@
+import { getAccessFlags } from "@/lib/membership/utils";
+import { getTeamPermissionFlags } from "@/modules/ee/teams/utils/teams";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { TEnvironment } from "@formbricks/types/environment";
+import { TOrganizationRole } from "@formbricks/types/memberships";
+import { TopControlButtons } from "./TopControlButtons";
+
+// Mock dependencies
+const mockPush = vi.fn();
+vi.mock("next/navigation", () => ({
+  useRouter: vi.fn(() => ({ push: mockPush })),
+}));
+
+vi.mock("@/lib/membership/utils", () => ({
+  getAccessFlags: vi.fn(),
+}));
+
+vi.mock("@/modules/ee/teams/utils/teams", () => ({
+  getTeamPermissionFlags: vi.fn(),
+}));
+
+vi.mock("@/app/(app)/environments/[environmentId]/components/EnvironmentSwitch", () => ({
+  EnvironmentSwitch: vi.fn(() => <div data-testid="environment-switch">EnvironmentSwitch</div>),
+}));
+
+vi.mock("@/modules/ui/components/button", () => ({
+  Button: ({ children, onClick, variant, size, className, asChild, ...props }: any) => {
+    const Tag = asChild ? "div" : "button"; // Use div if asChild is true for Link mock
+    return (
+      <Tag onClick={onClick} data-testid={`button-${className}`} {...props}>
+        {children}
+      </Tag>
+    );
+  },
+}));
+
+vi.mock("@/modules/ui/components/tooltip", () => ({
+  TooltipRenderer: ({ children, tooltipContent }: { children: React.ReactNode; tooltipContent: string }) => (
+    <div data-testid={`tooltip-${tooltipContent.split(".").pop()}`}>{children}</div>
+  ),
+}));
+
+vi.mock("lucide-react", () => ({
+  BugIcon: () => <div data-testid="bug-icon" />,
+  CircleUserIcon: () => <div data-testid="circle-user-icon" />,
+  PlusIcon: () => <div data-testid="plus-icon" />,
+}));
+
+vi.mock("next/link", () => ({
+  default: ({ children, href, target }: { children: React.ReactNode; href: string; target?: string }) => (
+    <a href={href} target={target} data-testid="link-mock">
+      {children}
+    </a>
+  ),
+}));
+
+// Mock data
+const mockEnvironmentDev: TEnvironment = {
+  id: "dev-env-id",
+  createdAt: new Date(),
+  updatedAt: new Date(),
+  type: "development",
+  projectId: "project-id",
+  appSetupCompleted: true,
+};
+
+const mockEnvironmentProd: TEnvironment = {
+  id: "prod-env-id",
+  createdAt: new Date(),
+  updatedAt: new Date(),
+  type: "production",
+  projectId: "project-id",
+  appSetupCompleted: true,
+};
+
+const mockEnvironments = [mockEnvironmentDev, mockEnvironmentProd];
+
+describe("TopControlButtons", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Default mocks for access flags
+    vi.mocked(getAccessFlags).mockReturnValue({
+      isOwner: false,
+      isMember: false,
+      isBilling: false,
+    } as any);
+    vi.mocked(getTeamPermissionFlags).mockReturnValue({
+      hasReadAccess: false,
+    } as any);
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  const renderComponent = (
+    membershipRole?: TOrganizationRole,
+    projectPermission: any = null,
+    isBilling = false,
+    hasReadAccess = false
+  ) => {
+    vi.mocked(getAccessFlags).mockReturnValue({
+      isMember: membershipRole === "member",
+      isBilling: isBilling,
+      isOwner: membershipRole === "owner",
+    } as any);
+    vi.mocked(getTeamPermissionFlags).mockReturnValue({
+      hasReadAccess: hasReadAccess,
+    } as any);
+
+    return render(
+      <TopControlButtons
+        environment={mockEnvironmentDev}
+        environments={mockEnvironments}
+        membershipRole={membershipRole}
+        projectPermission={projectPermission}
+      />
+    );
+  };
+
+  test("renders correctly for Owner role", async () => {
+    renderComponent("owner");
+
+    expect(screen.getByTestId("environment-switch")).toBeInTheDocument();
+    expect(screen.getByTestId("tooltip-share_feedback")).toBeInTheDocument();
+    expect(screen.getByTestId("bug-icon")).toBeInTheDocument();
+    expect(screen.getByTestId("tooltip-account")).toBeInTheDocument();
+    expect(screen.getByTestId("circle-user-icon")).toBeInTheDocument();
+    expect(screen.getByTestId("tooltip-new_survey")).toBeInTheDocument();
+    expect(screen.getByTestId("plus-icon")).toBeInTheDocument();
+
+    // Check link
+    const link = screen.getByTestId("link-mock");
+    expect(link).toHaveAttribute("href", "https://github.com/formbricks/formbricks/issues");
+    expect(link).toHaveAttribute("target", "_blank");
+
+    // Click account button
+    const accountButton = screen.getByTestId("circle-user-icon").closest("button");
+    await userEvent.click(accountButton!);
+    await waitFor(() => {
+      expect(mockPush).toHaveBeenCalledWith(`/environments/${mockEnvironmentDev.id}/settings/profile`);
+    });
+
+    // Click new survey button
+    const newSurveyButton = screen.getByTestId("plus-icon").closest("button");
+    await userEvent.click(newSurveyButton!);
+    await waitFor(() => {
+      expect(mockPush).toHaveBeenCalledWith(`/environments/${mockEnvironmentDev.id}/surveys/templates`);
+    });
+  });
+
+  test("hides EnvironmentSwitch for Billing role", () => {
+    renderComponent(undefined, null, true); // isBilling = true
+    expect(screen.queryByTestId("environment-switch")).not.toBeInTheDocument();
+    expect(screen.getByTestId("tooltip-share_feedback")).toBeInTheDocument();
+    expect(screen.getByTestId("tooltip-account")).toBeInTheDocument();
+    expect(screen.queryByTestId("tooltip-new_survey")).not.toBeInTheDocument(); // Hidden for billing
+  });
+
+  test("hides New Survey button for Billing role", () => {
+    renderComponent(undefined, null, true); // isBilling = true
+    expect(screen.queryByTestId("tooltip-new_survey")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("plus-icon")).not.toBeInTheDocument();
+  });
+
+  test("hides New Survey button for read-only Member", () => {
+    renderComponent("member", null, false, true); // isMember = true, hasReadAccess = true
+    expect(screen.getByTestId("environment-switch")).toBeInTheDocument();
+    expect(screen.getByTestId("tooltip-share_feedback")).toBeInTheDocument();
+    expect(screen.getByTestId("tooltip-account")).toBeInTheDocument();
+    expect(screen.queryByTestId("tooltip-new_survey")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("plus-icon")).not.toBeInTheDocument();
+  });
+
+  test("shows New Survey button for Member with write access", () => {
+    renderComponent("member", null, false, false); // isMember = true, hasReadAccess = false
+    expect(screen.getByTestId("tooltip-new_survey")).toBeInTheDocument();
+    expect(screen.getByTestId("plus-icon")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,76 @@
+"use client";
+
+import { EnvironmentSwitch } from "@/app/(app)/environments/[environmentId]/components/EnvironmentSwitch";
+import { getAccessFlags } from "@/lib/membership/utils";
+import { TTeamPermission } from "@/modules/ee/teams/project-teams/types/team";
+import { getTeamPermissionFlags } from "@/modules/ee/teams/utils/teams";
+import { Button } from "@/modules/ui/components/button";
+import { TooltipRenderer } from "@/modules/ui/components/tooltip";
+import { useTranslate } from "@tolgee/react";
+import { BugIcon, CircleUserIcon, PlusIcon } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { TEnvironment } from "@formbricks/types/environment";
+import { TOrganizationRole } from "@formbricks/types/memberships";
+
+interface TopControlButtonsProps {
+  environment: TEnvironment;
+  environments: TEnvironment[];
+  membershipRole?: TOrganizationRole;
+  projectPermission: TTeamPermission | null;
+}
+
+export const TopControlButtons = ({
+  environment,
+  environments,
+  membershipRole,
+  projectPermission,
+}: TopControlButtonsProps) => {
+  const { t } = useTranslate();
+  const router = useRouter();
+
+  const { isMember, isBilling } = getAccessFlags(membershipRole);
+  const { hasReadAccess } = getTeamPermissionFlags(projectPermission);
+  const isReadOnly = isMember && hasReadAccess;
+
+  return (
+    <div className="z-50 flex items-center space-x-2">
+      {!isBilling && <EnvironmentSwitch environment={environment} environments={environments} />}
+
+      <TooltipRenderer tooltipContent={t("common.share_feedback")}>
+        <Button variant="ghost" size="icon" className="h-fit w-fit bg-slate-50 p-1" asChild>
+          <Link href="https://github.com/formbricks/formbricks/issues" target="_blank">
+            <BugIcon />
+          </Link>
+        </Button>
+      </TooltipRenderer>
+
+      <TooltipRenderer tooltipContent={t("common.account")}>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-fit w-fit bg-slate-50 p-1"
+          onClick={() => {
+            router.push(`/environments/${environment.id}/settings/profile`);
+          }}>
+          <CircleUserIcon />
+        </Button>
+      </TooltipRenderer>
+      {isBilling || isReadOnly ? (
+        <></>
+      ) : (
+        <TooltipRenderer tooltipContent={t("common.new_survey")}>
+          <Button
+            variant="secondary"
+            size="icon"
+            className="h-fit w-fit p-1"
+            onClick={() => {
+              router.push(`/environments/${environment.id}/surveys/templates`);
+            }}>
+            <PlusIcon />
+          </Button>
+        </TooltipRenderer>
+      )}
+    </div>
+  );
+};

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

@@ -1,349 +0,0 @@
-import "@testing-library/jest-dom/vitest";
-import { cleanup, render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { useRouter } from "next/navigation";
-import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
-import { TEnvironment } from "@formbricks/types/environment";
-import { EnvironmentBreadcrumb } from "./environment-breadcrumb";
-
-// Mock the dependencies
-vi.mock("next/navigation", () => ({
-  useRouter: vi.fn(),
-}));
-
-// Mock the UI components
-vi.mock("@/modules/ui/components/breadcrumb", () => ({
-  BreadcrumbItem: ({ children, isActive, isHighlighted, ...props }: any) => (
-    <li data-testid="breadcrumb-item" data-active={isActive} data-highlighted={isHighlighted} {...props}>
-      {children}
-    </li>
-  ),
-}));
-
-vi.mock("@/modules/ui/components/dropdown-menu", () => ({
-  DropdownMenu: ({ children, onOpenChange }: any) => (
-    <button
-      type="button"
-      data-testid="dropdown-menu"
-      onClick={() => onOpenChange?.(true)}
-      onKeyDown={(e: any) => e.key === "Enter" && onOpenChange?.(true)}>
-      {children}
-    </button>
-  ),
-  DropdownMenuContent: ({ children, ...props }: any) => (
-    <div data-testid="dropdown-content" {...props}>
-      {children}
-    </div>
-  ),
-  DropdownMenuCheckboxItem: ({ children, onClick, checked, ...props }: any) => (
-    <div
-      data-testid="dropdown-checkbox-item"
-      data-checked={checked}
-      onClick={onClick}
-      onKeyDown={(e: any) => e.key === "Enter" && onClick?.()}
-      role="menuitemcheckbox"
-      aria-checked={checked}
-      tabIndex={0}
-      {...props}>
-      {children}
-    </div>
-  ),
-  DropdownMenuTrigger: ({ children, ...props }: any) => (
-    <button data-testid="dropdown-trigger" {...props}>
-      {children}
-    </button>
-  ),
-  DropdownMenuGroup: ({ children }: any) => <div data-testid="dropdown-group">{children}</div>,
-}));
-
-vi.mock("@/modules/ui/components/tooltip", () => ({
-  TooltipProvider: ({ children }: any) => <div data-testid="tooltip-provider">{children}</div>,
-  Tooltip: ({ children }: any) => <div data-testid="tooltip">{children}</div>,
-  TooltipTrigger: ({ children, asChild }: any) => (
-    <div data-testid="tooltip-trigger" data-as-child={asChild}>
-      {children}
-    </div>
-  ),
-  TooltipContent: ({ children, className }: any) => (
-    <div data-testid="tooltip-content" className={className}>
-      {children}
-    </div>
-  ),
-}));
-
-// Mock Lucide React icons
-vi.mock("lucide-react", () => ({
-  Code2Icon: ({ className, strokeWidth }: any) => {
-    const isHeader = className?.includes("mr-2");
-    return (
-      <svg
-        data-testid={isHeader ? "code2-header-icon" : "code2-icon"}
-        className={className}
-        strokeWidth={strokeWidth}>
-        <title>Code2 Icon</title>
-      </svg>
-    );
-  },
-  ChevronDownIcon: ({ className, strokeWidth }: any) => (
-    <svg data-testid="chevron-down-icon" className={className} strokeWidth={strokeWidth}>
-      <title>ChevronDown Icon</title>
-    </svg>
-  ),
-  CircleHelpIcon: ({ className }: any) => (
-    <svg data-testid="circle-help-icon" className={className}>
-      <title>CircleHelp Icon</title>
-    </svg>
-  ),
-  Loader2: ({ className }: any) => (
-    <svg data-testid="loader-2-icon" className={className}>
-      <title>Loader2 Icon</title>
-    </svg>
-  ),
-}));
-
-describe("EnvironmentBreadcrumb", () => {
-  const mockPush = vi.fn();
-  const mockRouter = {
-    push: mockPush,
-    replace: vi.fn(),
-    refresh: vi.fn(),
-    back: vi.fn(),
-    forward: vi.fn(),
-    prefetch: vi.fn(),
-  };
-
-  const mockProductionEnvironment: TEnvironment = {
-    id: "env-prod-1",
-    createdAt: new Date("2023-01-01"),
-    updatedAt: new Date("2023-01-01"),
-    type: "production",
-    projectId: "project-1",
-    appSetupCompleted: true,
-  };
-
-  const mockDevelopmentEnvironment: TEnvironment = {
-    id: "env-dev-1",
-    createdAt: new Date("2023-01-01"),
-    updatedAt: new Date("2023-01-01"),
-    type: "development",
-    projectId: "project-1",
-    appSetupCompleted: true,
-  };
-
-  const mockEnvironments: TEnvironment[] = [mockProductionEnvironment, mockDevelopmentEnvironment];
-
-  beforeEach(() => {
-    vi.mocked(useRouter).mockReturnValue(mockRouter as any);
-  });
-
-  afterEach(() => {
-    cleanup();
-    vi.clearAllMocks();
-  });
-
-  test("renders environment breadcrumb with production environment", () => {
-    render(
-      <EnvironmentBreadcrumb
-        environments={mockEnvironments}
-        currentEnvironmentId={mockProductionEnvironment.id}
-      />
-    );
-
-    expect(screen.getByTestId("breadcrumb-item")).toBeInTheDocument();
-    expect(screen.getByTestId("dropdown-trigger")).toBeInTheDocument();
-    expect(screen.getByTestId("code2-icon")).toBeInTheDocument();
-    expect(screen.getAllByText("production")).toHaveLength(2); // trigger + dropdown option
-  });
-
-  test("renders environment breadcrumb with development environment and shows tooltip", () => {
-    render(
-      <EnvironmentBreadcrumb
-        environments={mockEnvironments}
-        currentEnvironmentId={mockDevelopmentEnvironment.id}
-      />
-    );
-
-    expect(screen.getAllByText("development")).toHaveLength(2); // trigger + dropdown option
-    expect(screen.getByTestId("tooltip-provider")).toBeInTheDocument();
-    expect(screen.getByTestId("circle-help-icon")).toBeInTheDocument();
-  });
-
-  test("highlights breadcrumb item for development environment", () => {
-    render(
-      <EnvironmentBreadcrumb
-        environments={mockEnvironments}
-        currentEnvironmentId={mockDevelopmentEnvironment.id}
-      />
-    );
-
-    const breadcrumbItem = screen.getByTestId("breadcrumb-item");
-    expect(breadcrumbItem).toHaveAttribute("data-highlighted", "true");
-  });
-
-  test("does not highlight breadcrumb item for production environment", () => {
-    render(
-      <EnvironmentBreadcrumb
-        environments={mockEnvironments}
-        currentEnvironmentId={mockProductionEnvironment.id}
-      />
-    );
-
-    const breadcrumbItem = screen.getByTestId("breadcrumb-item");
-    expect(breadcrumbItem).toHaveAttribute("data-highlighted", "false");
-  });
-
-  test("shows chevron down icon when dropdown is open", async () => {
-    const user = userEvent.setup();
-    render(
-      <EnvironmentBreadcrumb
-        environments={mockEnvironments}
-        currentEnvironmentId={mockProductionEnvironment.id}
-      />
-    );
-
-    const dropdownMenu = screen.getByTestId("dropdown-menu");
-    await user.click(dropdownMenu);
-
-    await waitFor(() => {
-      expect(screen.getAllByTestId("chevron-down-icon")).toHaveLength(1);
-    });
-  });
-
-  test("renders dropdown content with environment options", async () => {
-    const user = userEvent.setup();
-    render(
-      <EnvironmentBreadcrumb
-        environments={mockEnvironments}
-        currentEnvironmentId={mockProductionEnvironment.id}
-      />
-    );
-
-    const dropdownMenu = screen.getByTestId("dropdown-menu");
-    await user.click(dropdownMenu);
-
-    expect(screen.getByTestId("dropdown-content")).toBeInTheDocument();
-    expect(screen.getByText("common.choose_environment")).toBeInTheDocument();
-    expect(screen.getByTestId("dropdown-group")).toBeInTheDocument();
-  });
-
-  test("renders all environment options in dropdown", async () => {
-    const user = userEvent.setup();
-    render(
-      <EnvironmentBreadcrumb
-        environments={mockEnvironments}
-        currentEnvironmentId={mockProductionEnvironment.id}
-      />
-    );
-
-    const dropdownMenu = screen.getByTestId("dropdown-menu");
-    await user.click(dropdownMenu);
-
-    const checkboxItems = screen.getAllByTestId("dropdown-checkbox-item");
-    expect(checkboxItems).toHaveLength(2);
-
-    // Check production environment option
-    const productionOption = checkboxItems.find((item) => item.textContent?.includes("production"));
-    expect(productionOption).toBeInTheDocument();
-    expect(productionOption).toHaveAttribute("data-checked", "true");
-
-    // Check development environment option
-    const developmentOption = checkboxItems.find((item) => item.textContent?.includes("development"));
-    expect(developmentOption).toBeInTheDocument();
-    expect(developmentOption).toHaveAttribute("data-checked", "false");
-  });
-
-  test("handles environment change when clicking dropdown option", async () => {
-    const user = userEvent.setup();
-    render(
-      <EnvironmentBreadcrumb
-        environments={mockEnvironments}
-        currentEnvironmentId={mockProductionEnvironment.id}
-      />
-    );
-
-    const dropdownMenu = screen.getByTestId("dropdown-menu");
-    await user.click(dropdownMenu);
-
-    const checkboxItems = screen.getAllByTestId("dropdown-checkbox-item");
-    const developmentOption = checkboxItems.find((item) => item.textContent?.includes("development"));
-
-    expect(developmentOption).toBeInTheDocument();
-    await user.click(developmentOption!);
-
-    expect(mockPush).toHaveBeenCalledWith("/environments/env-dev-1/");
-  });
-
-  test("capitalizes environment type in display", () => {
-    render(
-      <EnvironmentBreadcrumb
-        environments={mockEnvironments}
-        currentEnvironmentId={mockProductionEnvironment.id}
-      />
-    );
-
-    const environmentSpans = screen.getAllByText("production");
-    const triggerSpan = environmentSpans.find((span) => span.className.includes("capitalize"));
-    expect(triggerSpan).toHaveClass("capitalize");
-  });
-
-  test("tooltip shows correct content for development environment", () => {
-    render(
-      <EnvironmentBreadcrumb
-        environments={mockEnvironments}
-        currentEnvironmentId={mockDevelopmentEnvironment.id}
-      />
-    );
-
-    const tooltipContent = screen.getByTestId("tooltip-content");
-    expect(tooltipContent).toHaveClass("text-white bg-red-800 border-none mt-2");
-    expect(tooltipContent).toHaveTextContent("common.development_environment_banner");
-  });
-
-  test("renders without tooltip for production environment", () => {
-    render(
-      <EnvironmentBreadcrumb
-        environments={mockEnvironments}
-        currentEnvironmentId={mockProductionEnvironment.id}
-      />
-    );
-
-    expect(screen.queryByTestId("circle-help-icon")).not.toBeInTheDocument();
-    expect(screen.queryByTestId("tooltip-provider")).not.toBeInTheDocument();
-  });
-
-  test("sets breadcrumb item as active when dropdown is open", async () => {
-    const user = userEvent.setup();
-    render(
-      <EnvironmentBreadcrumb
-        environments={mockEnvironments}
-        currentEnvironmentId={mockProductionEnvironment.id}
-      />
-    );
-
-    // Initially not active
-    let breadcrumbItem = screen.getByTestId("breadcrumb-item");
-    expect(breadcrumbItem).toHaveAttribute("data-active", "false");
-
-    // Open dropdown
-    const dropdownMenu = screen.getByTestId("dropdown-menu");
-    await user.click(dropdownMenu);
-
-    // Should be active when dropdown is open
-    breadcrumbItem = screen.getByTestId("breadcrumb-item");
-    expect(breadcrumbItem).toHaveAttribute("data-active", "true");
-  });
-
-  test("handles single environment scenario", () => {
-    const singleEnvironment = [mockProductionEnvironment];
-
-    render(
-      <EnvironmentBreadcrumb
-        environments={singleEnvironment}
-        currentEnvironmentId={mockProductionEnvironment.id}
-      />
-    );
-
-    expect(screen.getByTestId("breadcrumb-item")).toBeInTheDocument();
-    expect(screen.getAllByText("production")).toHaveLength(2); // trigger + dropdown option
-  });
-});

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

@@ -1,93 +0,0 @@
-"use client";
-
-import { BreadcrumbItem } from "@/modules/ui/components/breadcrumb";
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuTrigger,
-} from "@/modules/ui/components/dropdown-menu";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/modules/ui/components/tooltip";
-import { useTranslate } from "@tolgee/react";
-import { ChevronDownIcon, CircleHelpIcon, Code2Icon, Loader2 } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-
-export const EnvironmentBreadcrumb = ({
-  environments,
-  currentEnvironmentId,
-}: {
-  environments: { id: string; type: string }[];
-  currentEnvironmentId: string;
-}) => {
-  const { t } = useTranslate();
-  const [isEnvironmentDropdownOpen, setIsEnvironmentDropdownOpen] = useState(false);
-  const router = useRouter();
-  const [isLoading, setIsLoading] = useState(false);
-  const currentEnvironment = environments.find((env) => env.id === currentEnvironmentId);
-
-  if (!currentEnvironment) {
-    return null;
-  }
-
-  const handleEnvironmentChange = (environmentId: string) => {
-    setIsLoading(true);
-    router.push(`/environments/${environmentId}/`);
-  };
-
-  const developmentTooltip = () => {
-    return (
-      <TooltipProvider>
-        <Tooltip delayDuration={0}>
-          <TooltipTrigger asChild>
-            <CircleHelpIcon className="h-3 w-3" />
-          </TooltipTrigger>
-          <TooltipContent className="mt-2 border-none bg-red-800 text-white">
-            {t("common.development_environment_banner")}
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    );
-  };
-
-  return (
-    <BreadcrumbItem
-      isActive={isEnvironmentDropdownOpen}
-      isHighlighted={currentEnvironment.type === "development"}>
-      <DropdownMenu onOpenChange={setIsEnvironmentDropdownOpen}>
-        <DropdownMenuTrigger
-          className="flex cursor-pointer items-center gap-1 outline-none"
-          id="environmentDropdownTrigger"
-          asChild>
-          <div className="flex items-center gap-1">
-            <Code2Icon className="h-3 w-3" strokeWidth={1.5} />
-            <span className="capitalize">{currentEnvironment.type}</span>
-            {isLoading && <Loader2 className="h-3 w-3 animate-spin" strokeWidth={1.5} />}
-            {currentEnvironment.type === "development" && developmentTooltip()}
-            {isEnvironmentDropdownOpen && <ChevronDownIcon className="h-3 w-3" strokeWidth={1.5} />}
-          </div>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="mt-2" align="start">
-          <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
-            <Code2Icon className="mr-2 inline h-4 w-4" />
-            {t("common.choose_environment")}
-          </div>
-          <DropdownMenuGroup>
-            {environments.map((env) => (
-              <DropdownMenuCheckboxItem
-                key={env.id}
-                checked={env.id === currentEnvironment.id}
-                onClick={() => handleEnvironmentChange(env.id)}
-                className="cursor-pointer">
-                <div className="flex items-center gap-2 capitalize">
-                  <span>{env.type}</span>
-                </div>
-              </DropdownMenuCheckboxItem>
-            ))}
-          </DropdownMenuGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </BreadcrumbItem>
-  );
-};

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

@@ -1,560 +0,0 @@
-import "@testing-library/jest-dom/vitest";
-import { cleanup, render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { usePathname, useRouter } from "next/navigation";
-import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
-import { TOrganization, TOrganizationBilling } from "@formbricks/types/organizations";
-import { OrganizationBreadcrumb } from "./organization-breadcrumb";
-
-// Mock the dependencies
-vi.mock("next/navigation", () => ({
-  useRouter: vi.fn(),
-  usePathname: vi.fn(),
-}));
-
-vi.mock("@tolgee/react", () => ({
-  useTranslate: () => ({
-    t: (key: string) => key,
-  }),
-}));
-
-vi.mock("@/modules/organization/components/CreateOrganizationModal", () => ({
-  CreateOrganizationModal: ({ open, setOpen }: any) =>
-    open ? (
-      <div data-testid="create-organization-modal">
-        <button type="button" onClick={() => setOpen(false)}>
-          Close Modal
-        </button>
-        Create Organization Modal
-      </div>
-    ) : null,
-}));
-
-// Mock the UI components
-vi.mock("@/modules/ui/components/breadcrumb", () => ({
-  BreadcrumbItem: ({ children, isActive, ...props }: any) => (
-    <li data-testid="breadcrumb-item" data-active={isActive} {...props}>
-      {children}
-    </li>
-  ),
-}));
-
-vi.mock("@/modules/ui/components/dropdown-menu", () => ({
-  DropdownMenu: ({ children, onOpenChange }: any) => (
-    <div
-      data-testid="dropdown-menu"
-      onClick={() => onOpenChange?.(true)}
-      onKeyDown={(e: any) => e.key === "Enter" && onOpenChange?.(true)}
-      role="button"
-      tabIndex={0}>
-      {children}
-    </div>
-  ),
-  DropdownMenuContent: ({ children, ...props }: any) => (
-    <div data-testid="dropdown-content" {...props}>
-      {children}
-    </div>
-  ),
-  DropdownMenuCheckboxItem: ({ children, onClick, checked, ...props }: any) => (
-    <div
-      data-testid="dropdown-checkbox-item"
-      data-checked={checked}
-      onClick={onClick}
-      onKeyDown={(e: any) => e.key === "Enter" && onClick?.()}
-      role="menuitemcheckbox"
-      aria-checked={checked}
-      tabIndex={0}
-      {...props}>
-      {children}
-    </div>
-  ),
-  DropdownMenuTrigger: ({ children, ...props }: any) => (
-    <button data-testid="dropdown-trigger" {...props}>
-      {children}
-    </button>
-  ),
-  DropdownMenuGroup: ({ children }: any) => <div data-testid="dropdown-group">{children}</div>,
-  DropdownMenuSeparator: () => <div data-testid="dropdown-separator" />,
-}));
-
-// Mock Lucide React icons
-vi.mock("lucide-react", () => ({
-  BuildingIcon: ({ className, strokeWidth }: any) => {
-    const isHeader = className?.includes("mr-2");
-    return (
-      <svg
-        data-testid={isHeader ? "building-header-icon" : "building-icon"}
-        className={className}
-        strokeWidth={strokeWidth}>
-        <title>Building Icon</title>
-      </svg>
-    );
-  },
-  ChevronDownIcon: ({ className, strokeWidth }: any) => (
-    <svg data-testid="chevron-down-icon" className={className} strokeWidth={strokeWidth}>
-      <title>ChevronDown Icon</title>
-    </svg>
-  ),
-  ChevronRightIcon: ({ className, strokeWidth }: any) => (
-    <svg data-testid="chevron-right-icon" className={className} strokeWidth={strokeWidth}>
-      <title>ChevronRight Icon</title>
-    </svg>
-  ),
-  PlusIcon: ({ className }: any) => (
-    <svg data-testid="plus-icon" className={className}>
-      <title>Plus Icon</title>
-    </svg>
-  ),
-  SettingsIcon: ({ className }: any) => (
-    <svg data-testid="settings-icon" className={className}>
-      <title>Settings Icon</title>
-    </svg>
-  ),
-  Loader2: ({ className }: any) => (
-    <svg data-testid="loader-2-icon" className={className}>
-      <title>Loader2 Icon</title>
-    </svg>
-  ),
-}));
-
-describe("OrganizationBreadcrumb", () => {
-  const mockPush = vi.fn();
-  const mockRouter = {
-    push: mockPush,
-    replace: vi.fn(),
-    refresh: vi.fn(),
-    back: vi.fn(),
-    forward: vi.fn(),
-    prefetch: vi.fn(),
-  };
-
-  const mockOrganization1: TOrganization = {
-    id: "org-1",
-    name: "Test Organization 1",
-    createdAt: new Date("2023-01-01"),
-    updatedAt: new Date("2023-01-01"),
-    billing: {
-      plan: "free",
-      stripeCustomerId: null,
-    } as unknown as TOrganizationBilling,
-    isAIEnabled: false,
-  };
-
-  const mockOrganization2: TOrganization = {
-    id: "org-2",
-    name: "Test Organization 2",
-    createdAt: new Date("2023-01-01"),
-    updatedAt: new Date("2023-01-01"),
-    billing: {
-      plan: "startup",
-      stripeCustomerId: null,
-    } as unknown as TOrganizationBilling,
-    isAIEnabled: true,
-  };
-
-  const mockOrganizations = [mockOrganization1, mockOrganization2];
-  const currentEnvironmentId = "env-123";
-
-  beforeEach(() => {
-    vi.mocked(useRouter).mockReturnValue(mockRouter as any);
-    vi.mocked(usePathname).mockReturnValue("/environments/env-123/");
-  });
-
-  afterEach(() => {
-    cleanup();
-    vi.clearAllMocks();
-  });
-
-  describe("Single Organization Setup", () => {
-    test("renders organization breadcrumb without dropdown for single org", () => {
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={[mockOrganization1]}
-          isMultiOrgEnabled={false}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      expect(screen.getByTestId("breadcrumb-item")).toBeInTheDocument();
-      expect(screen.getByTestId("dropdown-trigger")).toBeInTheDocument();
-      expect(screen.getByTestId("building-icon")).toBeInTheDocument();
-      expect(screen.getByText("Test Organization 1")).toBeInTheDocument();
-    });
-
-    test("shows organization settings without organization switcher", async () => {
-      const user = userEvent.setup();
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={[mockOrganization1]}
-          isMultiOrgEnabled={false}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      expect(screen.getByTestId("dropdown-content")).toBeInTheDocument();
-      expect(screen.getByText("common.organization_settings")).toBeInTheDocument();
-      expect(screen.queryByText("common.choose_organization")).not.toBeInTheDocument();
-    });
-  });
-
-  describe("Multi Organization Setup", () => {
-    test("renders organization breadcrumb with dropdown for multi org", () => {
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={mockOrganizations}
-          isMultiOrgEnabled={true}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      expect(screen.getByTestId("breadcrumb-item")).toBeInTheDocument();
-      expect(screen.getByTestId("building-icon")).toBeInTheDocument();
-      expect(screen.getAllByText("Test Organization 1")).toHaveLength(2); // trigger + dropdown option
-    });
-
-    test("shows chevron icons correctly", () => {
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={mockOrganizations}
-          isMultiOrgEnabled={true}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      // Should show chevron right when closed
-      expect(screen.getByTestId("chevron-right-icon")).toBeInTheDocument();
-      expect(screen.queryByTestId("chevron-down-icon")).not.toBeInTheDocument();
-    });
-
-    test("shows chevron down when dropdown is open", async () => {
-      const user = userEvent.setup();
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={mockOrganizations}
-          isMultiOrgEnabled={true}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      await waitFor(() => {
-        expect(screen.getByTestId("chevron-down-icon")).toBeInTheDocument();
-      });
-    });
-
-    test("renders organization selector in dropdown", async () => {
-      const user = userEvent.setup();
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={mockOrganizations}
-          isMultiOrgEnabled={true}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      expect(screen.getByText("common.choose_organization")).toBeInTheDocument();
-      expect(screen.getByTestId("dropdown-group")).toBeInTheDocument();
-
-      const checkboxItems = screen.getAllByTestId("dropdown-checkbox-item");
-      expect(checkboxItems.length).toBeGreaterThanOrEqual(2); // Organizations + create new option + settings
-    });
-
-    test("handles organization change when clicking dropdown option", async () => {
-      const user = userEvent.setup();
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={mockOrganizations}
-          isMultiOrgEnabled={true}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const checkboxItems = screen.getAllByTestId("dropdown-checkbox-item");
-      const org2Option = checkboxItems.find((item) => item.textContent?.includes("Test Organization 2"));
-
-      expect(org2Option).toBeInTheDocument();
-      await user.click(org2Option!);
-
-      expect(mockPush).toHaveBeenCalledWith("/organizations/org-2/");
-    });
-
-    test("shows create new organization option when multi org is enabled", async () => {
-      const user = userEvent.setup();
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={mockOrganizations}
-          isMultiOrgEnabled={true}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const createOrgOption = screen.getByText("common.create_new_organization");
-      expect(createOrgOption).toBeInTheDocument();
-      expect(screen.getByTestId("plus-icon")).toBeInTheDocument();
-    });
-
-    test("opens create organization modal when clicking create new option", async () => {
-      const user = userEvent.setup();
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={mockOrganizations}
-          isMultiOrgEnabled={true}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const createOrgOption = screen.getByText("common.create_new_organization");
-      await user.click(createOrgOption);
-
-      expect(screen.getByTestId("create-organization-modal")).toBeInTheDocument();
-    });
-
-    test("hides create new organization option when multi org is disabled", async () => {
-      const user = userEvent.setup();
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={mockOrganizations}
-          isMultiOrgEnabled={false}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      expect(screen.queryByText("common.create_new_organization")).not.toBeInTheDocument();
-    });
-  });
-
-  describe("Organization Settings", () => {
-    test("renders all organization settings options", async () => {
-      const user = userEvent.setup();
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={mockOrganizations}
-          isMultiOrgEnabled={true}
-          isFormbricksCloud={true}
-          isMember={false}
-          currentEnvironmentId={currentEnvironmentId}
-          isOwnerOrManager={true}
-        />
-      );
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      expect(screen.getByText("common.organization_settings")).toBeInTheDocument();
-      expect(screen.getByTestId("settings-icon")).toBeInTheDocument();
-      expect(screen.getByText("common.general")).toBeInTheDocument();
-      expect(screen.getByText("common.teams")).toBeInTheDocument();
-      expect(screen.getByText("common.api_keys")).toBeInTheDocument();
-      expect(screen.getByText("common.billing")).toBeInTheDocument();
-    });
-
-    test("handles navigation to organization settings", async () => {
-      const user = userEvent.setup();
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={mockOrganizations}
-          isMultiOrgEnabled={true}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const generalOption = screen.getByText("common.general");
-      await user.click(generalOption);
-
-      expect(mockPush).toHaveBeenCalledWith(`/environments/${currentEnvironmentId}/settings/general`);
-    });
-
-    test("marks current settings page as checked", async () => {
-      vi.mocked(usePathname).mockReturnValue("/environments/env-123/settings/teams");
-
-      const user = userEvent.setup();
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={mockOrganizations}
-          isMultiOrgEnabled={true}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const checkboxItems = screen.getAllByTestId("dropdown-checkbox-item");
-      const teamsOption = checkboxItems.find((item) => item.textContent?.includes("common.teams"));
-
-      expect(teamsOption).toBeInTheDocument();
-      expect(teamsOption).toHaveAttribute("data-checked", "true");
-    });
-  });
-
-  describe("Edge Cases", () => {
-    test("handles single organization with multi org enabled", async () => {
-      const user = userEvent.setup();
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={[mockOrganization1]}
-          isMultiOrgEnabled={true}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      // Should still show organization selector since multi org is enabled
-      expect(screen.getByText("common.choose_organization")).toBeInTheDocument();
-      expect(screen.getByText("common.create_new_organization")).toBeInTheDocument();
-    });
-
-    test("shows separator between organization switcher and settings", async () => {
-      const user = userEvent.setup();
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={mockOrganizations}
-          isMultiOrgEnabled={true}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      expect(screen.getByTestId("dropdown-separator")).toBeInTheDocument();
-    });
-
-    test("sets breadcrumb item as active when dropdown is open", async () => {
-      const user = userEvent.setup();
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={mockOrganizations}
-          isMultiOrgEnabled={true}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      // Initially not active
-      let breadcrumbItem = screen.getByTestId("breadcrumb-item");
-      expect(breadcrumbItem).toHaveAttribute("data-active", "false");
-
-      // Open dropdown
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      // Should be active when dropdown is open
-      breadcrumbItem = screen.getByTestId("breadcrumb-item");
-      expect(breadcrumbItem).toHaveAttribute("data-active", "true");
-    });
-
-    test("closes create organization modal correctly", async () => {
-      const user = userEvent.setup();
-      render(
-        <OrganizationBreadcrumb
-          currentOrganizationId={mockOrganization1.id}
-          organizations={mockOrganizations}
-          isMultiOrgEnabled={true}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={true}
-          isMember={false}
-          isOwnerOrManager={true}
-        />
-      );
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const createOrgOption = screen.getByText("common.create_new_organization");
-      await user.click(createOrgOption);
-
-      expect(screen.getByTestId("create-organization-modal")).toBeInTheDocument();
-
-      const closeButton = screen.getByText("Close Modal");
-      await user.click(closeButton);
-
-      expect(screen.queryByTestId("create-organization-modal")).not.toBeInTheDocument();
-    });
-  });
-});

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

@@ -1,173 +0,0 @@
-"use client";
-
-import { CreateOrganizationModal } from "@/modules/organization/components/CreateOrganizationModal";
-import { BreadcrumbItem } from "@/modules/ui/components/breadcrumb";
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/modules/ui/components/dropdown-menu";
-import { useTranslate } from "@tolgee/react";
-import {
-  BuildingIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
-  Loader2,
-  PlusIcon,
-  SettingsIcon,
-} from "lucide-react";
-import { usePathname, useRouter } from "next/navigation";
-import { useState } from "react";
-
-interface OrganizationBreadcrumbProps {
-  currentOrganizationId: string;
-  organizations: { id: string; name: string }[];
-  isMultiOrgEnabled: boolean;
-  currentEnvironmentId?: string;
-  isFormbricksCloud: boolean;
-  isMember: boolean;
-  isOwnerOrManager: boolean;
-}
-
-export const OrganizationBreadcrumb = ({
-  currentOrganizationId,
-  organizations,
-  isMultiOrgEnabled,
-  currentEnvironmentId,
-  isFormbricksCloud,
-  isMember,
-  isOwnerOrManager,
-}: OrganizationBreadcrumbProps) => {
-  const { t } = useTranslate();
-  const [isOrganizationDropdownOpen, setIsOrganizationDropdownOpen] = useState(false);
-  const [openCreateOrganizationModal, setOpenCreateOrganizationModal] = useState(false);
-  const pathname = usePathname();
-  const router = useRouter();
-  const [isLoading, setIsLoading] = useState(false);
-  const currentOrganization = organizations.find((org) => org.id === currentOrganizationId);
-
-  if (!currentOrganization) {
-    return null;
-  }
-
-  const handleOrganizationChange = (organizationId: string) => {
-    setIsLoading(true);
-    router.push(`/organizations/${organizationId}/`);
-  };
-
-  // Hide organization dropdown for single org setups (on-premise)
-  const showOrganizationDropdown = isMultiOrgEnabled || organizations.length > 1;
-
-  const organizationSettings = [
-    {
-      id: "general",
-      label: t("common.general"),
-      href: `/environments/${currentEnvironmentId}/settings/general`,
-    },
-    {
-      id: "teams",
-      label: t("common.teams"),
-      href: `/environments/${currentEnvironmentId}/settings/teams`,
-    },
-    {
-      id: "api-keys",
-      label: t("common.api_keys"),
-      href: `/environments/${currentEnvironmentId}/settings/api-keys`,
-      hidden: !isOwnerOrManager,
-    },
-    {
-      id: "billing",
-      label: t("common.billing"),
-      href: `/environments/${currentEnvironmentId}/settings/billing`,
-      hidden: !isFormbricksCloud,
-    },
-    {
-      id: "enterprise",
-      label: t("common.enterprise_license"),
-      href: `/environments/${currentEnvironmentId}/settings/enterprise`,
-      hidden: isFormbricksCloud || isMember,
-    },
-  ];
-
-  return (
-    <BreadcrumbItem isActive={isOrganizationDropdownOpen}>
-      <DropdownMenu onOpenChange={setIsOrganizationDropdownOpen}>
-        <DropdownMenuTrigger
-          className="flex cursor-pointer items-center gap-1 outline-none"
-          id="organizationDropdownTrigger"
-          asChild>
-          <div className="flex items-center gap-1">
-            <BuildingIcon className="h-3 w-3" strokeWidth={1.5} />
-            <span>{currentOrganization.name}</span>
-            {isLoading && <Loader2 className="h-3 w-3 animate-spin" strokeWidth={1.5} />}
-            {isOrganizationDropdownOpen ? (
-              <ChevronDownIcon className="h-3 w-3" strokeWidth={1.5} />
-            ) : (
-              <ChevronRightIcon className="h-3 w-3" strokeWidth={1.5} />
-            )}
-          </div>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start" className="mt-2">
-          {showOrganizationDropdown && (
-            <>
-              <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
-                <BuildingIcon className="mr-2 inline h-4 w-4" />
-                {t("common.choose_organization")}
-              </div>
-              <DropdownMenuGroup>
-                {organizations.map((org) => (
-                  <DropdownMenuCheckboxItem
-                    key={org.id}
-                    checked={org.id === currentOrganization.id}
-                    onClick={() => handleOrganizationChange(org.id)}
-                    className="cursor-pointer">
-                    {org.name}
-                  </DropdownMenuCheckboxItem>
-                ))}
-              </DropdownMenuGroup>
-              {isMultiOrgEnabled && (
-                <DropdownMenuCheckboxItem
-                  onClick={() => setOpenCreateOrganizationModal(true)}
-                  className="cursor-pointer">
-                  <span>{t("common.create_new_organization")}</span>
-                  <PlusIcon className="ml-2 h-4 w-4" />
-                </DropdownMenuCheckboxItem>
-              )}
-            </>
-          )}
-          {currentEnvironmentId && (
-            <div>
-              <DropdownMenuSeparator />
-              <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
-                <SettingsIcon className="mr-2 inline h-4 w-4" />
-                {t("common.organization_settings")}
-              </div>
-
-              {organizationSettings.map((setting) => {
-                return setting.hidden ? null : (
-                  <DropdownMenuCheckboxItem
-                    key={setting.id}
-                    checked={pathname.includes(setting.id)}
-                    hidden={setting.hidden}
-                    onClick={() => router.push(setting.href)}
-                    className="cursor-pointer">
-                    {setting.label}
-                  </DropdownMenuCheckboxItem>
-                );
-              })}
-            </div>
-          )}
-        </DropdownMenuContent>
-      </DropdownMenu>
-      {openCreateOrganizationModal && (
-        <CreateOrganizationModal
-          open={openCreateOrganizationModal}
-          setOpen={setOpenCreateOrganizationModal}
-        />
-      )}
-    </BreadcrumbItem>
-  );
-};

apps/web/app/(app)/environments/[environmentId]/components/project-and-org-switch.test.tsx

@@ -1,351 +0,0 @@
-import "@testing-library/jest-dom/vitest";
-import { cleanup, render, screen } from "@testing-library/react";
-import { afterEach, describe, expect, test, vi } from "vitest";
-import { TEnvironment } from "@formbricks/types/environment";
-import { ProjectAndOrgSwitch } from "./project-and-org-switch";
-
-// Mock the individual breadcrumb components
-vi.mock("@/app/(app)/environments/[environmentId]/components/organization-breadcrumb", () => ({
-  OrganizationBreadcrumb: ({
-    currentOrganizationId,
-    organizations,
-    isMultiOrgEnabled,
-    currentEnvironmentId,
-  }: any) => {
-    const currentOrganization = organizations.find((org: any) => org.id === currentOrganizationId);
-    return (
-      <div data-testid="organization-breadcrumb">
-        <div>Organization: {currentOrganization?.name}</div>
-        <div>Organizations Count: {organizations.length}</div>
-        <div>Multi Org: {isMultiOrgEnabled ? "Enabled" : "Disabled"}</div>
-        <div>Environment ID: {currentEnvironmentId}</div>
-      </div>
-    );
-  },
-}));
-
-vi.mock("@/app/(app)/environments/[environmentId]/components/project-breadcrumb", () => ({
-  ProjectBreadcrumb: ({
-    currentProjectId,
-    projects,
-    isOwnerOrManager,
-    organizationProjectsLimit,
-    isFormbricksCloud,
-    isLicenseActive,
-    currentOrganizationId,
-    currentEnvironmentId,
-    isAccessControlAllowed,
-  }: any) => {
-    const currentProject = projects.find((project: any) => project.id === currentProjectId);
-    return (
-      <div data-testid="project-breadcrumb">
-        <div>Project: {currentProject?.name}</div>
-        <div>Projects Count: {projects.length}</div>
-        <div>Owner/Manager: {isOwnerOrManager ? "Yes" : "No"}</div>
-        <div>Project Limit: {organizationProjectsLimit}</div>
-        <div>Formbricks Cloud: {isFormbricksCloud ? "Yes" : "No"}</div>
-        <div>License Active: {isLicenseActive ? "Yes" : "No"}</div>
-        <div>Organization ID: {currentOrganizationId}</div>
-        <div>Environment ID: {currentEnvironmentId}</div>
-        <div>Access Control: {isAccessControlAllowed ? "Allowed" : "Not Allowed"}</div>
-      </div>
-    );
-  },
-}));
-
-vi.mock("@/app/(app)/environments/[environmentId]/components/environment-breadcrumb", () => ({
-  EnvironmentBreadcrumb: ({ environments, currentEnvironmentId }: any) => {
-    const currentEnvironment = environments.find((env: any) => env.id === currentEnvironmentId);
-    return (
-      <div data-testid="environment-breadcrumb">
-        <div>Environment: {currentEnvironment?.type}</div>
-        <div>Environments Count: {environments.length}</div>
-        <div>Environment ID: {currentEnvironment?.id}</div>
-      </div>
-    );
-  },
-}));
-
-// Mock the UI components
-vi.mock("@/modules/ui/components/breadcrumb", () => ({
-  Breadcrumb: ({ children }: any) => (
-    <nav data-testid="breadcrumb" aria-label="breadcrumb">
-      {children}
-    </nav>
-  ),
-  BreadcrumbList: ({ children, className }: any) => (
-    <ol data-testid="breadcrumb-list" className={className}>
-      {children}
-    </ol>
-  ),
-}));
-
-describe("ProjectAndOrgSwitch", () => {
-  const mockOrganization1 = {
-    id: "org-1",
-    name: "Test Organization 1",
-  };
-
-  const mockOrganization2 = {
-    id: "org-2",
-    name: "Test Organization 2",
-  };
-
-  const mockProject1 = {
-    id: "proj-1",
-    name: "Test Project 1",
-  };
-
-  const mockProject2 = {
-    id: "proj-2",
-    name: "Test Project 2",
-  };
-
-  const mockEnvironment1: TEnvironment = {
-    id: "env-1",
-    createdAt: new Date("2023-01-01"),
-    updatedAt: new Date("2023-01-01"),
-    type: "production",
-    projectId: "proj-1",
-    appSetupCompleted: true,
-  };
-
-  const mockEnvironment2: TEnvironment = {
-    id: "env-2",
-    createdAt: new Date("2023-01-01"),
-    updatedAt: new Date("2023-01-01"),
-    type: "development",
-    projectId: "proj-1",
-    appSetupCompleted: true,
-  };
-
-  const defaultProps = {
-    currentOrganizationId: "org-1",
-    organizations: [mockOrganization1, mockOrganization2],
-    currentProjectId: "proj-1",
-    projects: [mockProject1, mockProject2],
-    currentEnvironmentId: "env-1",
-    environments: [mockEnvironment1, mockEnvironment2],
-    isMultiOrgEnabled: true,
-    organizationProjectsLimit: 5,
-    isFormbricksCloud: true,
-    isLicenseActive: false,
-    isOwnerOrManager: true,
-    isAccessControlAllowed: true,
-    isMember: true,
-  };
-
-  afterEach(() => {
-    cleanup();
-  });
-
-  describe("Basic Rendering", () => {
-    test("renders main breadcrumb structure", () => {
-      render(<ProjectAndOrgSwitch {...defaultProps} />);
-
-      expect(screen.getByTestId("breadcrumb")).toBeInTheDocument();
-      expect(screen.getByTestId("breadcrumb-list")).toBeInTheDocument();
-      expect(screen.getByTestId("breadcrumb")).toHaveAttribute("aria-label", "breadcrumb");
-    });
-
-    test("applies correct CSS classes to breadcrumb list", () => {
-      render(<ProjectAndOrgSwitch {...defaultProps} />);
-
-      const breadcrumbList = screen.getByTestId("breadcrumb-list");
-      expect(breadcrumbList).toHaveClass("gap-0");
-    });
-
-    test("renders all three breadcrumb components", () => {
-      render(<ProjectAndOrgSwitch {...defaultProps} />);
-
-      expect(screen.getByTestId("organization-breadcrumb")).toBeInTheDocument();
-      expect(screen.getByTestId("project-breadcrumb")).toBeInTheDocument();
-      expect(screen.getByTestId("environment-breadcrumb")).toBeInTheDocument();
-    });
-  });
-
-  describe("Organization Breadcrumb Integration", () => {
-    test("passes correct props to organization breadcrumb", () => {
-      render(<ProjectAndOrgSwitch {...defaultProps} />);
-
-      const orgBreadcrumb = screen.getByTestId("organization-breadcrumb");
-      expect(orgBreadcrumb).toHaveTextContent("Organization: Test Organization 1");
-      expect(orgBreadcrumb).toHaveTextContent("Organizations Count: 2");
-      expect(orgBreadcrumb).toHaveTextContent("Multi Org: Enabled");
-      expect(orgBreadcrumb).toHaveTextContent("Environment ID: env-1");
-    });
-
-    test("handles single organization setup", () => {
-      render(
-        <ProjectAndOrgSwitch
-          {...defaultProps}
-          organizations={[mockOrganization1]}
-          isMultiOrgEnabled={false}
-        />
-      );
-
-      const orgBreadcrumb = screen.getByTestId("organization-breadcrumb");
-      expect(orgBreadcrumb).toHaveTextContent("Organizations Count: 1");
-      expect(orgBreadcrumb).toHaveTextContent("Multi Org: Disabled");
-    });
-  });
-
-  describe("Project Breadcrumb Integration", () => {
-    test("passes correct props to project breadcrumb", () => {
-      render(<ProjectAndOrgSwitch {...defaultProps} />);
-
-      const projectBreadcrumb = screen.getByTestId("project-breadcrumb");
-      expect(projectBreadcrumb).toHaveTextContent("Project: Test Project 1");
-      expect(projectBreadcrumb).toHaveTextContent("Projects Count: 2");
-      expect(projectBreadcrumb).toHaveTextContent("Owner/Manager: Yes");
-      expect(projectBreadcrumb).toHaveTextContent("Project Limit: 5");
-      expect(projectBreadcrumb).toHaveTextContent("Formbricks Cloud: Yes");
-      expect(projectBreadcrumb).toHaveTextContent("License Active: No");
-      expect(projectBreadcrumb).toHaveTextContent("Organization ID: org-1");
-      expect(projectBreadcrumb).toHaveTextContent("Environment ID: env-1");
-      expect(projectBreadcrumb).toHaveTextContent("Access Control: Allowed");
-    });
-
-    test("handles non-owner/manager user", () => {
-      render(<ProjectAndOrgSwitch {...defaultProps} isOwnerOrManager={false} />);
-
-      const projectBreadcrumb = screen.getByTestId("project-breadcrumb");
-      expect(projectBreadcrumb).toHaveTextContent("Owner/Manager: No");
-    });
-
-    test("handles self-hosted setup", () => {
-      render(<ProjectAndOrgSwitch {...defaultProps} isFormbricksCloud={false} isLicenseActive={true} />);
-
-      const projectBreadcrumb = screen.getByTestId("project-breadcrumb");
-      expect(projectBreadcrumb).toHaveTextContent("Formbricks Cloud: No");
-      expect(projectBreadcrumb).toHaveTextContent("License Active: Yes");
-    });
-
-    test("handles access control restrictions", () => {
-      render(<ProjectAndOrgSwitch {...defaultProps} isAccessControlAllowed={false} />);
-
-      const projectBreadcrumb = screen.getByTestId("project-breadcrumb");
-      expect(projectBreadcrumb).toHaveTextContent("Access Control: Not Allowed");
-    });
-  });
-
-  describe("Environment Breadcrumb Integration", () => {
-    test("passes correct props to environment breadcrumb", () => {
-      render(<ProjectAndOrgSwitch {...defaultProps} />);
-
-      const envBreadcrumb = screen.getByTestId("environment-breadcrumb");
-      expect(envBreadcrumb).toHaveTextContent("Environment: production");
-      expect(envBreadcrumb).toHaveTextContent("Environments Count: 2");
-      expect(envBreadcrumb).toHaveTextContent("Environment ID: env-1");
-    });
-
-    test("handles development environment", () => {
-      render(<ProjectAndOrgSwitch {...defaultProps} currentEnvironmentId="env-2" />);
-
-      const envBreadcrumb = screen.getByTestId("environment-breadcrumb");
-      expect(envBreadcrumb).toHaveTextContent("Environment: development");
-      expect(envBreadcrumb).toHaveTextContent("Environment ID: env-2");
-    });
-
-    test("handles single environment", () => {
-      render(<ProjectAndOrgSwitch {...defaultProps} environments={[mockEnvironment1]} />);
-
-      const envBreadcrumb = screen.getByTestId("environment-breadcrumb");
-      expect(envBreadcrumb).toHaveTextContent("Environments Count: 1");
-    });
-  });
-
-  describe("Props Propagation", () => {
-    test("correctly propagates organization limits", () => {
-      render(<ProjectAndOrgSwitch {...defaultProps} organizationProjectsLimit={10} />);
-
-      const projectBreadcrumb = screen.getByTestId("project-breadcrumb");
-      expect(projectBreadcrumb).toHaveTextContent("Project Limit: 10");
-    });
-
-    test("correctly propagates current organization to project breadcrumb", () => {
-      render(<ProjectAndOrgSwitch {...defaultProps} currentOrganizationId="org-2" />);
-
-      const orgBreadcrumb = screen.getByTestId("organization-breadcrumb");
-      const projectBreadcrumb = screen.getByTestId("project-breadcrumb");
-
-      expect(orgBreadcrumb).toHaveTextContent("Organization: Test Organization 2");
-      expect(projectBreadcrumb).toHaveTextContent("Organization ID: org-2");
-    });
-  });
-
-  describe("Edge Cases", () => {
-    test("handles zero project limit", () => {
-      render(<ProjectAndOrgSwitch {...defaultProps} organizationProjectsLimit={0} />);
-
-      const projectBreadcrumb = screen.getByTestId("project-breadcrumb");
-      expect(projectBreadcrumb).toHaveTextContent("Project Limit: 0");
-    });
-
-    test("handles all boolean props as false", () => {
-      render(
-        <ProjectAndOrgSwitch
-          {...defaultProps}
-          isMultiOrgEnabled={false}
-          isFormbricksCloud={false}
-          isLicenseActive={false}
-          isOwnerOrManager={false}
-          isAccessControlAllowed={false}
-        />
-      );
-
-      const orgBreadcrumb = screen.getByTestId("organization-breadcrumb");
-      const projectBreadcrumb = screen.getByTestId("project-breadcrumb");
-
-      expect(orgBreadcrumb).toHaveTextContent("Multi Org: Disabled");
-      expect(projectBreadcrumb).toHaveTextContent("Owner/Manager: No");
-      expect(projectBreadcrumb).toHaveTextContent("Formbricks Cloud: No");
-      expect(projectBreadcrumb).toHaveTextContent("License Active: No");
-      expect(projectBreadcrumb).toHaveTextContent("Access Control: Not Allowed");
-    });
-
-    test("maintains component order in DOM", () => {
-      render(<ProjectAndOrgSwitch {...defaultProps} />);
-
-      const breadcrumbList = screen.getByTestId("breadcrumb-list");
-      const children = Array.from(breadcrumbList.children);
-
-      expect(children[0]).toHaveAttribute("data-testid", "organization-breadcrumb");
-      expect(children[1]).toHaveAttribute("data-testid", "project-breadcrumb");
-      expect(children[2]).toHaveAttribute("data-testid", "environment-breadcrumb");
-    });
-  });
-
-  describe("TypeScript Props Interface", () => {
-    test("accepts all required props without error", () => {
-      // This test ensures the component accepts the full interface
-      expect(() => {
-        render(<ProjectAndOrgSwitch {...defaultProps} />);
-      }).not.toThrow();
-    });
-
-    test("works with minimal valid props", () => {
-      const minimalProps = {
-        currentOrganizationId: "org-1",
-        organizations: [mockOrganization1],
-        currentProjectId: "proj-1",
-        projects: [mockProject1],
-        currentEnvironmentId: "env-1",
-        environments: [mockEnvironment1],
-        isMultiOrgEnabled: false,
-        organizationProjectsLimit: 1,
-        isFormbricksCloud: false,
-        isLicenseActive: false,
-        isOwnerOrManager: false,
-        isAccessControlAllowed: false,
-        isMember: true,
-      };
-
-      expect(() => {
-        render(<ProjectAndOrgSwitch {...minimalProps} />);
-      }).not.toThrow();
-
-      expect(screen.getByTestId("breadcrumb")).toBeInTheDocument();
-    });
-  });
-});

apps/web/app/(app)/environments/[environmentId]/components/project-and-org-switch.tsx

@@ -1,77 +0,0 @@
-"use client";
-
-import { EnvironmentBreadcrumb } from "@/app/(app)/environments/[environmentId]/components/environment-breadcrumb";
-import { OrganizationBreadcrumb } from "@/app/(app)/environments/[environmentId]/components/organization-breadcrumb";
-import { ProjectBreadcrumb } from "@/app/(app)/environments/[environmentId]/components/project-breadcrumb";
-import { Breadcrumb, BreadcrumbList } from "@/modules/ui/components/breadcrumb";
-import { useMemo } from "react";
-
-interface ProjectAndOrgSwitchProps {
-  currentOrganizationId: string;
-  organizations: { id: string; name: string }[];
-  currentProjectId?: string;
-  projects: { id: string; name: string }[];
-  currentEnvironmentId?: string;
-  environments: { id: string; type: string }[];
-  isMultiOrgEnabled: boolean;
-  organizationProjectsLimit: number;
-  isFormbricksCloud: boolean;
-  isLicenseActive: boolean;
-  isOwnerOrManager: boolean;
-  isAccessControlAllowed: boolean;
-  isMember: boolean;
-}
-
-export const ProjectAndOrgSwitch = ({
-  currentOrganizationId,
-  organizations,
-  currentProjectId,
-  projects,
-  currentEnvironmentId,
-  environments,
-  isMultiOrgEnabled,
-  organizationProjectsLimit,
-  isFormbricksCloud,
-  isLicenseActive,
-  isOwnerOrManager,
-  isAccessControlAllowed,
-  isMember,
-}: ProjectAndOrgSwitchProps) => {
-  const sortedProjects = useMemo(() => projects.toSorted((a, b) => a.name.localeCompare(b.name)), [projects]);
-  const sortedOrganizations = useMemo(
-    () => organizations.toSorted((a, b) => a.name.localeCompare(b.name)),
-    [organizations]
-  );
-
-  return (
-    <Breadcrumb>
-      <BreadcrumbList className="gap-0">
-        <OrganizationBreadcrumb
-          currentOrganizationId={currentOrganizationId}
-          organizations={sortedOrganizations}
-          isMultiOrgEnabled={isMultiOrgEnabled}
-          currentEnvironmentId={currentEnvironmentId}
-          isFormbricksCloud={isFormbricksCloud}
-          isMember={isMember}
-          isOwnerOrManager={isOwnerOrManager}
-        />
-        {currentProjectId && currentEnvironmentId && (
-          <ProjectBreadcrumb
-            currentProjectId={currentProjectId}
-            currentOrganizationId={currentOrganizationId}
-            currentEnvironmentId={currentEnvironmentId}
-            projects={sortedProjects}
-            isOwnerOrManager={isOwnerOrManager}
-            organizationProjectsLimit={organizationProjectsLimit}
-            isFormbricksCloud={isFormbricksCloud}
-            isLicenseActive={isLicenseActive}
-            isAccessControlAllowed={isAccessControlAllowed}
-          />
-        )}
-        {currentEnvironmentId && (
-          <EnvironmentBreadcrumb environments={environments} currentEnvironmentId={currentEnvironmentId} />
-        )}
-      </BreadcrumbList>
-    </Breadcrumb>
-  );
-};

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

@@ -1,497 +0,0 @@
-import "@testing-library/jest-dom/vitest";
-import { cleanup, render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { useRouter } from "next/navigation";
-import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
-import { TOrganization, TOrganizationBilling } from "@formbricks/types/organizations";
-import { TProject } from "@formbricks/types/project";
-import { ProjectBreadcrumb } from "./project-breadcrumb";
-
-// Mock the dependencies
-vi.mock("next/navigation", () => ({
-  useRouter: vi.fn(),
-}));
-
-vi.mock("@tolgee/react", () => ({
-  useTranslate: () => ({
-    t: (key: string) => key,
-  }),
-}));
-
-vi.mock("@/modules/projects/components/project-limit-modal", () => ({
-  ProjectLimitModal: ({ open, setOpen, buttons, projectLimit }: any) =>
-    open ? (
-      <div data-testid="project-limit-modal">
-        <div>Project Limit: {projectLimit}</div>
-        <button onClick={() => setOpen(false)}>Close Limit Modal</button>
-        {buttons.map((button: any) => (
-          <button key={button.text} type="button" onClick={() => button.href && window.open(button.href)}>
-            {button.text}
-          </button>
-        ))}
-      </div>
-    ) : null,
-}));
-
-vi.mock("@/modules/projects/components/create-project-modal", () => ({
-  CreateProjectModal: ({ open, setOpen, organizationId, isAccessControlAllowed }: any) =>
-    open ? (
-      <div data-testid="create-project-modal">
-        <div>Organization: {organizationId}</div>
-        <div>Access Control: {isAccessControlAllowed ? "Allowed" : "Not Allowed"}</div>
-        <button onClick={() => setOpen(false)}>Close Create Modal</button>
-      </div>
-    ) : null,
-}));
-
-// Mock the UI components
-vi.mock("@/modules/ui/components/breadcrumb", () => ({
-  BreadcrumbItem: ({ children, isActive, ...props }: any) => (
-    <li data-testid="breadcrumb-item" data-active={isActive} {...props}>
-      {children}
-    </li>
-  ),
-}));
-
-vi.mock("@/modules/ui/components/dropdown-menu", () => ({
-  DropdownMenu: ({ children, onOpenChange }: any) => (
-    <button
-      type="button"
-      data-testid="dropdown-menu"
-      onClick={() => onOpenChange?.(true)}
-      onKeyDown={(e: any) => e.key === "Enter" && onOpenChange?.(true)}>
-      {children}
-    </button>
-  ),
-  DropdownMenuContent: ({ children, ...props }: any) => (
-    <div data-testid="dropdown-content" {...props}>
-      {children}
-    </div>
-  ),
-  DropdownMenuCheckboxItem: ({ children, onClick, checked, ...props }: any) => (
-    <div
-      data-testid="dropdown-checkbox-item"
-      data-checked={checked}
-      onClick={onClick}
-      onKeyDown={(e: any) => e.key === "Enter" && onClick?.()}
-      role="menuitemcheckbox"
-      aria-checked={checked}
-      tabIndex={0}
-      {...props}>
-      {children}
-    </div>
-  ),
-  DropdownMenuTrigger: ({ children, ...props }: any) => (
-    <button data-testid="dropdown-trigger" {...props}>
-      {children}
-    </button>
-  ),
-  DropdownMenuGroup: ({ children }: any) => <div data-testid="dropdown-group">{children}</div>,
-}));
-
-// Mock Lucide React icons
-vi.mock("lucide-react", () => ({
-  FolderOpenIcon: ({ className, strokeWidth }: any) => {
-    const isHeader = className?.includes("mr-2");
-    return (
-      <svg
-        data-testid={isHeader ? "folder-open-header-icon" : "folder-open-icon"}
-        className={className}
-        strokeWidth={strokeWidth}>
-        <title>FolderOpen Icon</title>
-      </svg>
-    );
-  },
-  ChevronDownIcon: ({ className, strokeWidth }: any) => (
-    <svg data-testid="chevron-down-icon" className={className} strokeWidth={strokeWidth}>
-      <title>ChevronDown Icon</title>
-    </svg>
-  ),
-  ChevronRightIcon: ({ className, strokeWidth }: any) => (
-    <svg data-testid="chevron-right-icon" className={className} strokeWidth={strokeWidth}>
-      <title>ChevronRight Icon</title>
-    </svg>
-  ),
-  PlusIcon: ({ className }: any) => (
-    <svg data-testid="plus-icon" className={className}>
-      <title>Plus Icon</title>
-    </svg>
-  ),
-  Loader2: ({ className }: any) => (
-    <svg data-testid="loader-2-icon" className={className}>
-      <title>Loader2 Icon</title>
-    </svg>
-  ),
-}));
-
-describe("ProjectBreadcrumb", () => {
-  const mockPush = vi.fn();
-  const mockRouter = {
-    push: mockPush,
-    replace: vi.fn(),
-    refresh: vi.fn(),
-    back: vi.fn(),
-    forward: vi.fn(),
-    prefetch: vi.fn(),
-  };
-
-  const mockProject1 = {
-    id: "proj-1",
-    name: "Test Project 1",
-    createdAt: new Date("2023-01-01"),
-    updatedAt: new Date("2023-01-01"),
-    organizationId: "org-1",
-    languages: [],
-  } as unknown as TProject;
-
-  const mockProject2 = {
-    id: "proj-2",
-    name: "Test Project 2",
-    createdAt: new Date("2023-01-01"),
-    updatedAt: new Date("2023-01-01"),
-    organizationId: "org-1",
-    languages: [],
-  } as unknown as TProject;
-
-  const mockProjects = [mockProject1, mockProject2];
-
-  const mockOrganization: TOrganization = {
-    id: "org-1",
-    name: "Test Organization",
-    createdAt: new Date("2023-01-01"),
-    updatedAt: new Date("2023-01-01"),
-    billing: {
-      plan: "free",
-      stripeCustomerId: null,
-    } as unknown as TOrganizationBilling,
-    isAIEnabled: false,
-  };
-
-  const defaultProps = {
-    currentProjectId: "proj-1",
-    currentOrganizationId: "org-1",
-    projects: mockProjects,
-    isOwnerOrManager: true,
-    organizationProjectsLimit: 3,
-    isFormbricksCloud: true,
-    isLicenseActive: false,
-    currentEnvironmentId: "env-123",
-    isAccessControlAllowed: true,
-  };
-
-  beforeEach(() => {
-    vi.mocked(useRouter).mockReturnValue(mockRouter as any);
-  });
-
-  afterEach(() => {
-    cleanup();
-    vi.clearAllMocks();
-  });
-
-  describe("Basic Rendering", () => {
-    test("renders project breadcrumb correctly", () => {
-      render(<ProjectBreadcrumb {...defaultProps} />);
-
-      expect(screen.getByTestId("breadcrumb-item")).toBeInTheDocument();
-      expect(screen.getByTestId("dropdown-trigger")).toBeInTheDocument();
-      expect(screen.getByTestId("folder-open-icon")).toBeInTheDocument();
-      expect(screen.getAllByText("Test Project 1")).toHaveLength(2); // trigger + dropdown option
-    });
-
-    test("shows chevron icons correctly", () => {
-      render(<ProjectBreadcrumb {...defaultProps} />);
-
-      // Should show chevron right when closed
-      expect(screen.getByTestId("chevron-right-icon")).toBeInTheDocument();
-      expect(screen.queryByTestId("chevron-down-icon")).not.toBeInTheDocument();
-    });
-
-    test("shows chevron down when dropdown is open", async () => {
-      const user = userEvent.setup();
-      render(<ProjectBreadcrumb {...defaultProps} />);
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      await waitFor(() => {
-        expect(screen.getByTestId("chevron-down-icon")).toBeInTheDocument();
-      });
-    });
-  });
-
-  describe("Project Selection", () => {
-    test("renders dropdown content with project options", async () => {
-      const user = userEvent.setup();
-      render(<ProjectBreadcrumb {...defaultProps} />);
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      expect(screen.getByTestId("dropdown-content")).toBeInTheDocument();
-      expect(screen.getByText("common.choose_project")).toBeInTheDocument();
-      expect(screen.getByTestId("dropdown-group")).toBeInTheDocument();
-    });
-
-    test("renders all project options in dropdown", async () => {
-      const user = userEvent.setup();
-      render(<ProjectBreadcrumb {...defaultProps} />);
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const checkboxItems = screen.getAllByTestId("dropdown-checkbox-item");
-
-      // Find project options (excluding the add new project option)
-      const projectOptions = checkboxItems.filter((item) => item.textContent?.includes("Test Project"));
-      expect(projectOptions).toHaveLength(2);
-
-      // Check current project is marked as selected
-      const currentProjectOption = checkboxItems.find((item) => item.textContent?.includes("Test Project 1"));
-      expect(currentProjectOption).toHaveAttribute("data-checked", "true");
-
-      // Check other project is not selected
-      const otherProjectOption = checkboxItems.find((item) => item.textContent?.includes("Test Project 2"));
-      expect(otherProjectOption).toHaveAttribute("data-checked", "false");
-    });
-
-    test("handles project change when clicking dropdown option", async () => {
-      const user = userEvent.setup();
-      render(<ProjectBreadcrumb {...defaultProps} />);
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const checkboxItems = screen.getAllByTestId("dropdown-checkbox-item");
-      const project2Option = checkboxItems.find((item) => item.textContent?.includes("Test Project 2"));
-
-      expect(project2Option).toBeInTheDocument();
-      await user.click(project2Option!);
-
-      expect(mockPush).toHaveBeenCalledWith("/projects/proj-2/");
-    });
-  });
-
-  describe("Add New Project", () => {
-    test("shows add new project option when user is owner or manager", async () => {
-      const user = userEvent.setup();
-      render(<ProjectBreadcrumb {...defaultProps} />);
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      expect(screen.getByText("common.add_new_project")).toBeInTheDocument();
-      expect(screen.getByTestId("plus-icon")).toBeInTheDocument();
-    });
-
-    test("hides add new project option when user is not owner or manager", async () => {
-      const user = userEvent.setup();
-      render(<ProjectBreadcrumb {...defaultProps} isOwnerOrManager={false} />);
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      expect(screen.queryByText("common.add_new_project")).not.toBeInTheDocument();
-    });
-
-    test("opens create project modal when within project limit", async () => {
-      const user = userEvent.setup();
-      render(<ProjectBreadcrumb {...defaultProps} />);
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const addProjectOption = screen.getByText("common.add_new_project");
-      await user.click(addProjectOption);
-
-      expect(screen.getByTestId("create-project-modal")).toBeInTheDocument();
-      expect(screen.getByText("Organization: org-1")).toBeInTheDocument();
-      expect(screen.getByText("Access Control: Allowed")).toBeInTheDocument();
-    });
-
-    test("opens limit modal when exceeding project limit", async () => {
-      const user = userEvent.setup();
-      const props = {
-        ...defaultProps,
-        projects: [mockProject1, mockProject2, { ...mockProject1, id: "proj-3", name: "Project 3" }],
-        organizationProjectsLimit: 3,
-      };
-      render(<ProjectBreadcrumb {...props} />);
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const addProjectOption = screen.getByText("common.add_new_project");
-      await user.click(addProjectOption);
-
-      expect(screen.getByTestId("project-limit-modal")).toBeInTheDocument();
-      expect(screen.getByText("Project Limit: 3")).toBeInTheDocument();
-    });
-  });
-
-  describe("Project Limit Modal", () => {
-    test("shows correct buttons for Formbricks Cloud with non-enterprise plan", async () => {
-      const user = userEvent.setup();
-      const props = {
-        ...defaultProps,
-        projects: [mockProject1, mockProject2, { ...mockProject1, id: "proj-3", name: "Project 3" }],
-        organizationProjectsLimit: 3,
-        isFormbricksCloud: true,
-        currentOrganization: {
-          ...mockOrganization,
-          billing: { ...mockOrganization.billing, plan: "startup" } as unknown as TOrganizationBilling,
-        },
-      };
-      render(<ProjectBreadcrumb {...props} />);
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const addProjectOption = screen.getByText("common.add_new_project");
-      await user.click(addProjectOption);
-
-      expect(screen.getByText("environments.settings.billing.upgrade")).toBeInTheDocument();
-      expect(screen.getByText("common.cancel")).toBeInTheDocument();
-    });
-
-    test("shows correct buttons for self-hosted with active license", async () => {
-      const user = userEvent.setup();
-      const props = {
-        ...defaultProps,
-        projects: [mockProject1, mockProject2, { ...mockProject1, id: "proj-3", name: "Project 3" }],
-        organizationProjectsLimit: 3,
-        isFormbricksCloud: false,
-        isLicenseActive: true,
-      };
-      render(<ProjectBreadcrumb {...props} />);
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const addProjectOption = screen.getByText("common.add_new_project");
-      await user.click(addProjectOption);
-
-      expect(screen.getByText("environments.settings.billing.upgrade")).toBeInTheDocument();
-      expect(screen.getByText("common.cancel")).toBeInTheDocument();
-    });
-
-    test("closes limit modal correctly", async () => {
-      const user = userEvent.setup();
-      const props = {
-        ...defaultProps,
-        projects: [mockProject1, mockProject2, { ...mockProject1, id: "proj-3", name: "Project 3" }],
-        organizationProjectsLimit: 3,
-      };
-      render(<ProjectBreadcrumb {...props} />);
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const addProjectOption = screen.getByText("common.add_new_project");
-      await user.click(addProjectOption);
-
-      expect(screen.getByTestId("project-limit-modal")).toBeInTheDocument();
-
-      const closeButton = screen.getByText("Close Limit Modal");
-      await user.click(closeButton);
-
-      expect(screen.queryByTestId("project-limit-modal")).not.toBeInTheDocument();
-    });
-  });
-
-  describe("Create Project Modal", () => {
-    test("closes create project modal correctly", async () => {
-      const user = userEvent.setup();
-      render(<ProjectBreadcrumb {...defaultProps} />);
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const addProjectOption = screen.getByText("common.add_new_project");
-      await user.click(addProjectOption);
-
-      expect(screen.getByTestId("create-project-modal")).toBeInTheDocument();
-
-      const closeButton = screen.getByText("Close Create Modal");
-      await user.click(closeButton);
-
-      expect(screen.queryByTestId("create-project-modal")).not.toBeInTheDocument();
-    });
-
-    test("passes correct props to create project modal", async () => {
-      const user = userEvent.setup();
-      render(<ProjectBreadcrumb {...defaultProps} isAccessControlAllowed={false} />);
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const addProjectOption = screen.getByText("common.add_new_project");
-      await user.click(addProjectOption);
-
-      expect(screen.getByText("Access Control: Not Allowed")).toBeInTheDocument();
-    });
-  });
-
-  describe("Edge Cases", () => {
-    test("handles single project scenario", () => {
-      render(<ProjectBreadcrumb {...defaultProps} projects={[mockProject1]} />);
-
-      expect(screen.getByTestId("breadcrumb-item")).toBeInTheDocument();
-      expect(screen.getAllByText("Test Project 1")).toHaveLength(2); // trigger + dropdown option
-    });
-
-    test("sets breadcrumb item as active when dropdown is open", async () => {
-      const user = userEvent.setup();
-      render(<ProjectBreadcrumb {...defaultProps} />);
-
-      // Initially not active
-      let breadcrumbItem = screen.getByTestId("breadcrumb-item");
-      expect(breadcrumbItem).toHaveAttribute("data-active", "false");
-
-      // Open dropdown
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      // Should be active when dropdown is open
-      breadcrumbItem = screen.getByTestId("breadcrumb-item");
-      expect(breadcrumbItem).toHaveAttribute("data-active", "true");
-    });
-
-    test("handles project limit of zero", async () => {
-      const user = userEvent.setup();
-      render(<ProjectBreadcrumb {...defaultProps} organizationProjectsLimit={0} />);
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const addProjectOption = screen.getByText("common.add_new_project");
-      await user.click(addProjectOption);
-
-      // Should show limit modal even with 0 projects when limit is 0
-      expect(screen.getByTestId("project-limit-modal")).toBeInTheDocument();
-      expect(screen.getByText("Project Limit: 0")).toBeInTheDocument();
-    });
-
-    test("handles enterprise plan on Formbricks Cloud", async () => {
-      const user = userEvent.setup();
-      const props = {
-        ...defaultProps,
-        projects: [mockProject1, mockProject2, { ...mockProject1, id: "proj-3", name: "Project 3" }],
-        organizationProjectsLimit: 3,
-        currentOrganization: {
-          ...mockOrganization,
-          billing: { ...mockOrganization.billing, plan: "enterprise" } as unknown as TOrganizationBilling,
-        },
-      };
-      render(<ProjectBreadcrumb {...props} />);
-
-      const dropdownMenu = screen.getByTestId("dropdown-menu");
-      await user.click(dropdownMenu);
-
-      const addProjectOption = screen.getByText("common.add_new_project");
-      await user.click(addProjectOption);
-
-      // Should show self-hosted style buttons for enterprise plan
-      expect(screen.getByTestId("project-limit-modal")).toBeInTheDocument();
-    });
-  });
-});

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

@@ -1,160 +0,0 @@
-"use client";
-
-import { CreateProjectModal } from "@/modules/projects/components/create-project-modal";
-import { ProjectLimitModal } from "@/modules/projects/components/project-limit-modal";
-import { BreadcrumbItem } from "@/modules/ui/components/breadcrumb";
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuTrigger,
-} from "@/modules/ui/components/dropdown-menu";
-import { ModalButton } from "@/modules/ui/components/upgrade-prompt";
-import { useTranslate } from "@tolgee/react";
-import { ChevronDownIcon, ChevronRightIcon, FolderOpenIcon, Loader2, PlusIcon } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-
-interface ProjectBreadcrumbProps {
-  currentProjectId: string;
-  projects: { id: string; name: string }[];
-  isOwnerOrManager: boolean;
-  organizationProjectsLimit: number;
-  isFormbricksCloud: boolean;
-  isLicenseActive: boolean;
-  currentOrganizationId: string;
-  currentEnvironmentId: string;
-  isAccessControlAllowed: boolean;
-}
-
-export const ProjectBreadcrumb = ({
-  currentProjectId,
-  projects,
-  isOwnerOrManager,
-  organizationProjectsLimit,
-  isFormbricksCloud,
-  isLicenseActive,
-  currentOrganizationId,
-  currentEnvironmentId,
-  isAccessControlAllowed,
-}: ProjectBreadcrumbProps) => {
-  const { t } = useTranslate();
-  const [isProjectDropdownOpen, setIsProjectDropdownOpen] = useState(false);
-  const [openCreateProjectModal, setOpenCreateProjectModal] = useState(false);
-  const [openLimitModal, setOpenLimitModal] = useState(false);
-  const router = useRouter();
-  const [isLoading, setIsLoading] = useState(false);
-  const currentProject = projects.find((project) => project.id === currentProjectId);
-
-  if (!currentProject) {
-    return null;
-  }
-
-  const handleProjectChange = (projectId: string) => {
-    setIsLoading(true);
-    router.push(`/projects/${projectId}/`);
-  };
-
-  const handleAddProject = () => {
-    if (projects.length >= organizationProjectsLimit) {
-      setOpenLimitModal(true);
-      return;
-    }
-    setOpenCreateProjectModal(true);
-  };
-
-  const LimitModalButtons = (): [ModalButton, ModalButton] => {
-    if (isFormbricksCloud) {
-      return [
-        {
-          text: t("environments.settings.billing.upgrade"),
-          href: `/environments/${currentEnvironmentId}/settings/billing`,
-        },
-        {
-          text: t("common.cancel"),
-          onClick: () => setOpenLimitModal(false),
-        },
-      ];
-    }
-
-    return [
-      {
-        text: t("environments.settings.billing.upgrade"),
-        href: isLicenseActive
-          ? `/environments/${currentEnvironmentId}/settings/enterprise`
-          : "https://formbricks.com/upgrade-self-hosted-license",
-      },
-      {
-        text: t("common.cancel"),
-        onClick: () => setOpenLimitModal(false),
-      },
-    ];
-  };
-  return (
-    <BreadcrumbItem isActive={isProjectDropdownOpen}>
-      <DropdownMenu onOpenChange={setIsProjectDropdownOpen}>
-        <DropdownMenuTrigger
-          className="flex cursor-pointer items-center gap-1 outline-none"
-          id="projectDropdownTrigger"
-          asChild>
-          <div className="flex items-center gap-1">
-            <FolderOpenIcon className="h-3 w-3" strokeWidth={1.5} />
-            <span>{currentProject.name}</span>
-            {isLoading && <Loader2 className="h-3 w-3 animate-spin" strokeWidth={1.5} />}
-            {isProjectDropdownOpen ? (
-              <ChevronDownIcon className="h-3 w-3" strokeWidth={1.5} />
-            ) : (
-              <ChevronRightIcon className="h-3 w-3" strokeWidth={1.5} />
-            )}
-          </div>
-        </DropdownMenuTrigger>
-
-        <DropdownMenuContent align="start" className="mt-2">
-          <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
-            <FolderOpenIcon className="mr-2 inline h-4 w-4" />
-            {t("common.choose_project")}
-          </div>
-          <DropdownMenuGroup>
-            {projects.map((proj) => (
-              <DropdownMenuCheckboxItem
-                key={proj.id}
-                checked={proj.id === currentProject.id}
-                onClick={() => handleProjectChange(proj.id)}
-                className="cursor-pointer">
-                <div className="flex items-center gap-2">
-                  <span>{proj.name}</span>
-                </div>
-              </DropdownMenuCheckboxItem>
-            ))}
-          </DropdownMenuGroup>
-          {isOwnerOrManager && (
-            <DropdownMenuCheckboxItem
-              onClick={handleAddProject}
-              className="w-full cursor-pointer justify-between">
-              <span>{t("common.add_new_project")}</span>
-              <PlusIcon className="ml-2 h-4 w-4" />
-            </DropdownMenuCheckboxItem>
-          )}
-        </DropdownMenuContent>
-      </DropdownMenu>
-      {/* Modals */}
-      {openLimitModal && (
-        <ProjectLimitModal
-          open={openLimitModal}
-          setOpen={setOpenLimitModal}
-          buttons={LimitModalButtons()}
-          projectLimit={organizationProjectsLimit}
-        />
-      )}
-      {openCreateProjectModal && (
-        <CreateProjectModal
-          open={openCreateProjectModal}
-          setOpen={setOpenCreateProjectModal}
-          organizationId={currentOrganizationId}
-          isAccessControlAllowed={isAccessControlAllowed}
-        />
-      )}
-    </BreadcrumbItem>
-  );
-};

apps/web/app/(app)/environments/[environmentId]/context/environment-context.tsx

@@ -7,7 +7,6 @@ import { TProject } from "@formbricks/types/project";
 export interface EnvironmentContextType {
   environment: TEnvironment;
   project: TProject;
-  organizationId: string;
 }
 
 const EnvironmentContext = createContext<EnvironmentContextType | null>(null);
@@ -36,7 +35,6 @@ export const EnvironmentContextWrapper = ({
     () => ({
       environment,
       project,
-      organizationId: project.organizationId,
     }),
     [environment, project]
   );

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

@@ -30,16 +30,16 @@ interface ManageIntegrationProps {
   locale: TUserLocale;
 }
 
+const tableHeaders = [
+  "common.survey",
+  "environments.integrations.airtable.table_name",
+  "common.questions",
+  "common.updated_at",
+];
+
 export const ManageIntegration = (props: ManageIntegrationProps) => {
   const { airtableIntegration, environment, environmentId, setIsConnected, surveys, airtableArray } = props;
   const { t } = useTranslate();
-
-  const tableHeaders = [
-    t("common.survey"),
-    t("environments.integrations.airtable.table_name"),
-    t("common.questions"),
-    t("common.updated_at"),
-  ];
   const [isDeleting, setisDeleting] = useState(false);
   const [isDeleteIntegrationModalOpen, setIsDeleteIntegrationModalOpen] = useState(false);
   const [defaultValues, setDefaultValues] = useState<(IntegrationModalInputs & { index: number }) | null>(
@@ -100,7 +100,7 @@ export const ManageIntegration = (props: ManageIntegrationProps) => {
           <div className="grid h-12 grid-cols-8 content-center rounded-lg bg-slate-100 text-left text-sm font-semibold text-slate-900">
             {tableHeaders.map((header) => (
               <div key={header} className={`col-span-2 hidden text-center sm:block`}>
-                {header}
+                {t(header)}
               </div>
             ))}
           </div>

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

@@ -37,7 +37,7 @@ const Page = async (props) => {
   const locale = await findMatchingLocale();
 
   if (isReadOnly) {
-    return redirect("./");
+    redirect("./");
   }
 
   return (

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

@@ -0,0 +1,116 @@
+"use client";
+
+import { Button } from "@/modules/ui/components/button";
+import { EmptySpaceFiller } from "@/modules/ui/components/empty-space-filler";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/modules/ui/components/tooltip";
+import React from "react";
+import { TEnvironment } from "@formbricks/types/environment";
+
+interface Column<T> {
+  /** Header text rendered in the table head */
+  header: React.ReactNode;
+  /** Cell renderer for an item */
+  render: (item: T) => React.ReactNode;
+}
+
+interface ActionButtonProps {
+  label: string;
+  onClick: () => void;
+  /** Optional Lucide Icon */
+  icon?: React.ReactNode;
+  /** Tooltip content */
+  tooltip?: string;
+  /** Variant override */
+  variant?: "default" | "outline" | "secondary" | "destructive" | "ghost";
+}
+
+interface IntegrationListPanelProps<T> {
+  readonly environment: TEnvironment;
+  readonly statusNode: React.ReactNode;
+  readonly reconnectAction: ActionButtonProps;
+  readonly addNewAction: ActionButtonProps;
+  readonly emptyMessage: string;
+  readonly items: T[];
+  readonly columns: Column<T>[];
+  readonly onRowClick: (index: number) => void;
+  readonly getRowKey?: (item: T, index: number) => string | number;
+}
+
+export function IntegrationListPanel<T>({
+  environment,
+  statusNode,
+  reconnectAction,
+  addNewAction,
+  emptyMessage,
+  items,
+  columns,
+  onRowClick,
+  getRowKey,
+}: IntegrationListPanelProps<T>) {
+  return (
+    <div className="mt-6 flex w-full flex-col items-center justify-center p-6">
+      {/* Toolbar */}
+      <div className="flex w-full justify-end space-x-2">
+        <div className="mr-6 flex items-center">{statusNode}</div>
+
+        {/* Re-connect */}
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant={reconnectAction.variant ?? "outline"} onClick={reconnectAction.onClick}>
+                {reconnectAction.icon}
+                {reconnectAction.label}
+              </Button>
+            </TooltipTrigger>
+            {reconnectAction.tooltip && <TooltipContent>{reconnectAction.tooltip}</TooltipContent>}
+          </Tooltip>
+        </TooltipProvider>
+
+        {/* Add new */}
+        <Button variant={addNewAction.variant ?? "default"} onClick={addNewAction.onClick}>
+          {addNewAction.icon}
+          {addNewAction.label}
+        </Button>
+      </div>
+
+      {/* Empty table view */}
+      {!items || items.length === 0 ? (
+        <div className="mt-4 w-full">
+          <EmptySpaceFiller
+            type="table"
+            environment={environment}
+            noWidgetRequired={true}
+            emptyMessage={emptyMessage}
+          />
+        </div>
+      ) : (
+        <div className="mt-4 flex w-full flex-col items-center justify-center">
+          <div className="mt-6 w-full rounded-lg border border-slate-200">
+            <div className="grid h-12 grid-cols-6 content-center rounded-lg bg-slate-100 text-left text-sm font-semibold text-slate-900">
+              {columns.map((col) => (
+                <div key={`hdr-${String(col.header)}`} className="col-span-2 hidden text-center sm:block">
+                  {col.header}
+                </div>
+              ))}
+            </div>
+            {items.map((item, index) => {
+              const key = getRowKey ? getRowKey(item, index) : index;
+              return (
+                <button
+                  key={key}
+                  className="grid h-16 w-full cursor-pointer grid-cols-6 content-center rounded-lg p-2 hover:bg-slate-100"
+                  onClick={() => onRowClick(index)}>
+                  {columns.map((col) => (
+                    <div key={`cell-${String(col.header)}`} className="col-span-2 text-center">
+                      {col.render(item)}
+                    </div>
+                  ))}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -220,6 +220,7 @@ const surveys: TSurvey[] = [
     welcomeCard: { enabled: true } as unknown as TSurvey["welcomeCard"],
     hiddenFields: { enabled: true, fieldIds: [] },
     pin: null,
+    resultShareKey: null,
     displayLimit: null,
   } as unknown as TSurvey,
   {
@@ -257,6 +258,7 @@ const surveys: TSurvey[] = [
     welcomeCard: { enabled: true } as unknown as TSurvey["welcomeCard"],
     hiddenFields: { enabled: true, fieldIds: [] },
     pin: null,
+    resultShareKey: null,
     displayLimit: null,
   } as unknown as TSurvey,
 ];

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

@@ -119,6 +119,7 @@ const mockSurveys: TSurvey[] = [
     displayPercentage: null,
     languages: [],
     pin: null,
+    resultShareKey: null,
     segment: null,
     singleUse: null,
     styling: null,

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

@@ -35,7 +35,7 @@ const Page = async (props) => {
   const locale = await findMatchingLocale();
 
   if (isReadOnly) {
-    return redirect("./");
+    redirect("./");
   }
 
   return (

apps/web/app/(app)/environments/[environmentId]/integrations/lib/questionItems.ts

@@ -0,0 +1,60 @@
+import { getLocalizedValue } from "@/lib/i18n/utils";
+import { replaceHeadlineRecall } from "@/lib/utils/recall";
+import { TFnType } from "@tolgee/react";
+import { TSurvey, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
+
+export interface QuestionItem {
+  id: string;
+  name: string;
+  type: TSurveyQuestionTypeEnum;
+}
+
+/**
+ * Build a flat list of selectable question / metadata items for integrations.
+ * Extracted to avoid duplication between integration modals.
+ */
+export const buildQuestionItems = (
+  selectedSurvey: TSurvey | null | undefined,
+  t: TFnType
+): QuestionItem[] => {
+  const questions: QuestionItem[] = selectedSurvey
+    ? replaceHeadlineRecall(selectedSurvey, "default")?.questions.map((q) => ({
+        id: q.id,
+        name: getLocalizedValue(q.headline, "default"),
+        type: q.type,
+      })) || []
+    : [];
+
+  const variables: QuestionItem[] =
+    selectedSurvey?.variables.map((variable) => ({
+      id: variable.id,
+      name: variable.name,
+      type: TSurveyQuestionTypeEnum.OpenText,
+    })) || [];
+
+  const hiddenFields: QuestionItem[] = selectedSurvey?.hiddenFields.enabled
+    ? selectedSurvey?.hiddenFields.fieldIds?.map((fId) => ({
+        id: fId,
+        name: `${t("common.hidden_field")} : ${fId}`,
+        type: TSurveyQuestionTypeEnum.OpenText,
+      })) || []
+    : [];
+
+  const metadata: QuestionItem[] = [
+    {
+      id: "metadata",
+      name: t("common.metadata"),
+      type: TSurveyQuestionTypeEnum.OpenText,
+    },
+  ];
+
+  const createdAt: QuestionItem[] = [
+    {
+      id: "createdAt",
+      name: t("common.created_at"),
+      type: TSurveyQuestionTypeEnum.Date,
+    },
+  ];
+
+  return [...questions, ...variables, ...hiddenFields, ...metadata, ...createdAt];
+};

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

@@ -236,6 +236,7 @@ const surveys: TSurvey[] = [
     languages: [],
     welcomeCard: { enabled: true } as unknown as TSurvey["welcomeCard"],
     pin: null,
+    resultShareKey: null,
     displayLimit: null,
   } as unknown as TSurvey,
   {
@@ -271,6 +272,7 @@ const surveys: TSurvey[] = [
     languages: [],
     welcomeCard: { enabled: true } as unknown as TSurvey["welcomeCard"],
     pin: null,
+    resultShareKey: null,
     displayLimit: null,
   } as unknown as TSurvey,
 ];

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

@@ -1,15 +1,14 @@
 "use client";
 
 import { createOrUpdateIntegrationAction } from "@/app/(app)/environments/[environmentId]/integrations/actions";
+import { buildQuestionItems } from "@/app/(app)/environments/[environmentId]/integrations/lib/questionItems";
 import {
   ERRORS,
   TYPE_MAPPING,
   UNSUPPORTED_TYPES_BY_NOTION,
 } from "@/app/(app)/environments/[environmentId]/integrations/notion/constants";
 import NotionLogo from "@/images/notion.png";
-import { getLocalizedValue } from "@/lib/i18n/utils";
 import { structuredClone } from "@/lib/pollyfills/structuredClone";
-import { replaceHeadlineRecall } from "@/lib/utils/recall";
 import { getQuestionTypes } from "@/modules/survey/lib/questions";
 import { Button } from "@/modules/ui/components/button";
 import {
@@ -35,7 +34,7 @@ import {
   TIntegrationNotionConfigData,
   TIntegrationNotionDatabase,
 } from "@formbricks/types/integration/notion";
-import { TSurvey, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
+import { TSurvey } from "@formbricks/types/surveys/types";
 
 interface AddIntegrationModalProps {
   environmentId: string;
@@ -118,47 +117,7 @@ export const AddIntegrationModal = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedDatabase?.id]);
 
-  const questionItems = useMemo(() => {
-    const questions = selectedSurvey
-      ? replaceHeadlineRecall(selectedSurvey, "default")?.questions.map((q) => ({
-          id: q.id,
-          name: getLocalizedValue(q.headline, "default"),
-          type: q.type,
-        }))
-      : [];
-
-    const variables =
-      selectedSurvey?.variables.map((variable) => ({
-        id: variable.id,
-        name: variable.name,
-        type: TSurveyQuestionTypeEnum.OpenText,
-      })) || [];
-
-    const hiddenFields = selectedSurvey?.hiddenFields.enabled
-      ? selectedSurvey?.hiddenFields.fieldIds?.map((fId) => ({
-          id: fId,
-          name: `${t("common.hidden_field")} : ${fId}`,
-          type: TSurveyQuestionTypeEnum.OpenText,
-        })) || []
-      : [];
-    const Metadata = [
-      {
-        id: "metadata",
-        name: t("common.metadata"),
-        type: TSurveyQuestionTypeEnum.OpenText,
-      },
-    ];
-    const createdAt = [
-      {
-        id: "createdAt",
-        name: t("common.created_at"),
-        type: TSurveyQuestionTypeEnum.Date,
-      },
-    ];
-
-    return [...questions, ...variables, ...hiddenFields, ...Metadata, ...createdAt];
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedSurvey?.id]);
+  const questionItems = useMemo(() => buildQuestionItems(selectedSurvey, t), [selectedSurvey?.id, t]);
 
   useEffect(() => {
     if (selectedIntegration) {

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

@@ -5,8 +5,6 @@ import { timeSince } from "@/lib/time";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { Button } from "@/modules/ui/components/button";
 import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
-import { EmptySpaceFiller } from "@/modules/ui/components/empty-space-filler";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/modules/ui/components/tooltip";
 import { useTranslate } from "@tolgee/react";
 import { RefreshCcwIcon, Trash2Icon } from "lucide-react";
 import React, { useState } from "react";
@@ -14,6 +12,7 @@ import toast from "react-hot-toast";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TIntegrationNotion, TIntegrationNotionConfigData } from "@formbricks/types/integration/notion";
 import { TUserLocale } from "@formbricks/types/user";
+import { IntegrationListPanel } from "../../components/IntegrationListPanel";
 
 interface ManageIntegrationProps {
   environment: TEnvironment;
@@ -70,78 +69,58 @@ export const ManageIntegration = ({
   };
 
   return (
-    <div className="mt-6 flex w-full flex-col items-center justify-center p-6">
-      <div className="flex w-full justify-end space-x-2">
-        <div className="mr-6 flex items-center">
-          <span className="mr-4 h-4 w-4 rounded-full bg-green-600"></span>
-          <span className="text-slate-500">
-            {t("environments.integrations.notion.connected_with_workspace", {
-              workspace: notionIntegration.config.key.workspace_name,
-            })}
-          </span>
-        </div>
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant="outline" onClick={handleNotionAuthorization}>
-                <RefreshCcwIcon className="mr-2 h-4 w-4" />
-                {t("environments.integrations.notion.update_connection")}
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>{t("environments.integrations.notion.update_connection_tooltip")}</TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-        <Button
-          onClick={() => {
+    <>
+      <IntegrationListPanel
+        environment={environment}
+        statusNode={
+          <>
+            <span className="mr-4 h-4 w-4 rounded-full bg-green-600"></span>
+            <span className="text-slate-500">
+              {t("environments.integrations.notion.connected_with_workspace", {
+                workspace: notionIntegration.config.key.workspace_name,
+              })}
+            </span>
+          </>
+        }
+        reconnectAction={{
+          label: t("environments.integrations.notion.update_connection"),
+          onClick: handleNotionAuthorization,
+          icon: <RefreshCcwIcon className="mr-2 h-4 w-4" />,
+          tooltip: t("environments.integrations.notion.update_connection_tooltip"),
+          variant: "outline",
+        }}
+        addNewAction={{
+          label: t("environments.integrations.notion.link_new_database"),
+          onClick: () => {
             setSelectedIntegration(null);
             setOpenAddIntegrationModal(true);
-          }}>
-          {t("environments.integrations.notion.link_new_database")}
+          },
+        }}
+        emptyMessage={t("environments.integrations.notion.no_databases_found")}
+        items={integrationArray}
+        columns={[
+          {
+            header: t("common.survey"),
+            render: (item: TIntegrationNotionConfigData) => item.surveyName,
+          },
+          {
+            header: t("environments.integrations.notion.database_name"),
+            render: (item: TIntegrationNotionConfigData) => item.databaseName,
+          },
+          {
+            header: t("common.updated_at"),
+            render: (item: TIntegrationNotionConfigData) => timeSince(item.createdAt.toString(), locale),
+          },
+        ]}
+        onRowClick={editIntegration}
+        getRowKey={(item: TIntegrationNotionConfigData, idx) => `${idx}-${item.databaseId}`}
+      />
+      <div className="mt-4 flex justify-center">
+        <Button variant="ghost" onClick={() => setIsDeleteIntegrationModalOpen(true)}>
+          <Trash2Icon />
+          {t("environments.integrations.delete_integration")}
         </Button>
       </div>
-      {!integrationArray || integrationArray.length === 0 ? (
-        <div className="mt-4 w-full">
-          <EmptySpaceFiller
-            type="table"
-            environment={environment}
-            noWidgetRequired={true}
-            emptyMessage={t("environments.integrations.notion.no_databases_found")}
-          />
-        </div>
-      ) : (
-        <div className="mt-4 flex w-full flex-col items-center justify-center">
-          <div className="mt-6 w-full rounded-lg border border-slate-200">
-            <div className="grid h-12 grid-cols-6 content-center rounded-lg bg-slate-100 text-left text-sm font-semibold text-slate-900">
-              <div className="col-span-2 hidden text-center sm:block">{t("common.survey")}</div>
-              <div className="col-span-2 hidden text-center sm:block">
-                {t("environments.integrations.notion.database_name")}
-              </div>
-              <div className="col-span-2 hidden text-center sm:block">{t("common.updated_at")}</div>
-            </div>
-            {integrationArray &&
-              integrationArray.map((data, index) => {
-                return (
-                  <button
-                    key={`${index}-${data.databaseId}`}
-                    className="grid h-16 w-full cursor-pointer grid-cols-6 content-center rounded-lg p-2 hover:bg-slate-100"
-                    onClick={() => {
-                      editIntegration(index);
-                    }}>
-                    <div className="col-span-2 text-center">{data.surveyName}</div>
-                    <div className="col-span-2 text-center">{data.databaseName}</div>
-                    <div className="col-span-2 text-center">
-                      {timeSince(data.createdAt.toString(), locale)}
-                    </div>
-                  </button>
-                );
-              })}
-          </div>
-        </div>
-      )}
-      <Button variant="ghost" onClick={() => setIsDeleteIntegrationModalOpen(true)} className="mt-4">
-        <Trash2Icon />
-        {t("environments.integrations.delete_integration")}
-      </Button>
 
       <DeleteDialog
         open={isDeleteIntegrationModalOpen}
@@ -151,6 +130,6 @@ export const ManageIntegration = ({
         text={t("environments.integrations.delete_integration_confirmation")}
         isDeleting={isDeleting}
       />
-    </div>
+    </>
   );
 };

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

@@ -128,6 +128,7 @@ const mockSurveys: TSurvey[] = [
     displayPercentage: null,
     languages: [],
     pin: null,
+    resultShareKey: null,
     segment: null,
     singleUse: null,
     styling: null,
@@ -191,7 +192,9 @@ describe("NotionIntegrationPage", () => {
     expect(screen.getByTestId("webAppUrl")).toHaveTextContent("test-webapp-url");
     expect(screen.getByTestId("databaseCount")).toHaveTextContent(mockDatabases.length.toString());
     expect(screen.getByTestId("locale")).toHaveTextContent("en-US");
-    expect(screen.getByTestId("go-back")).toHaveTextContent("./");
+    expect(screen.getByTestId("go-back")).toHaveTextContent(
+      `test-webapp-url/environments/${mockProps.params.environmentId}/integrations`
+    );
     expect(vi.mocked(redirect)).not.toHaveBeenCalled();
     expect(vi.mocked(getNotionDatabases)).toHaveBeenCalledWith(mockEnvironment.id);
   });

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

@@ -42,12 +42,12 @@ const Page = async (props) => {
   const locale = await findMatchingLocale();
 
   if (isReadOnly) {
-    return redirect("./");
+    redirect("./");
   }
 
   return (
     <PageContentWrapper>
-      <GoBackButton url={"./"} />
+      <GoBackButton url={`${WEBAPP_URL}/environments/${params.environmentId}/integrations`} />
       <PageHeader pageTitle={t("environments.integrations.notion.notion_integration")} />
       <NotionWrapper
         enabled={enabled}

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

@@ -6,6 +6,7 @@ import JsLogo from "@/images/jslogo.png";
 import MakeLogo from "@/images/make-small.png";
 import n8nLogo from "@/images/n8n.png";
 import notionLogo from "@/images/notion.png";
+import PlainCom from "@/images/plain.webp";
 import SlackLogo from "@/images/slacklogo.png";
 import WebhookLogo from "@/images/webhook.png";
 import ZapierLogo from "@/images/zapier-small.png";
@@ -50,6 +51,7 @@ const Page = async (props) => {
 
   const isGoogleSheetsIntegrationConnected = isIntegrationConnected("googleSheets");
   const isNotionIntegrationConnected = isIntegrationConnected("notion");
+  const isPlainIntegrationConnected = isIntegrationConnected("plain");
   const isAirtableIntegrationConnected = isIntegrationConnected("airtable");
   const isN8nIntegrationConnected = isIntegrationConnected("n8n");
   const isSlackIntegrationConnected = isIntegrationConnected("slack");
@@ -207,6 +209,20 @@ const Page = async (props) => {
             : `${activePiecesWebhookCount} ${t("common.integrations")}`,
       disabled: isReadOnly,
     },
+    {
+      docsHref: "https://formbricks.com/docs/xm-and-surveys/core-features/integrations/activepieces",
+      docsText: t("common.docs"),
+      docsNewTab: true,
+      connectHref: `/environments/${params.environmentId}/integrations/plain`,
+      connectText: `${isPlainIntegrationConnected ? t("common.manage") : t("common.connect")}`,
+      connectNewTab: false,
+      label: "Plain",
+      description: t("environments.integrations.plain.plain_integration_description"),
+      icon: <Image src={PlainCom} alt="Plain.com Logo" />,
+      connected: isPlainIntegrationConnected,
+      statusText: isPlainIntegrationConnected ? t("common.connected") : t("common.not_connected"),
+      disabled: isReadOnly,
+    },
   ];
 
   integrationCards.unshift({

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

@@ -0,0 +1,62 @@
+"use server";
+
+import { ENCRYPTION_KEY } from "@/lib/constants";
+import { symmetricEncrypt } from "@/lib/crypto";
+import { createOrUpdateIntegration, getIntegrationByType } from "@/lib/integration/service";
+import { authenticatedActionClient } from "@/lib/utils/action-client";
+import { checkAuthorizationUpdated } from "@/lib/utils/action-client/action-client-middleware";
+import { getOrganizationIdFromEnvironmentId, getProjectIdFromEnvironmentId } from "@/lib/utils/helper";
+import { z } from "zod";
+import { ZId } from "@formbricks/types/common";
+import type { TIntegrationPlainConfigData } from "@formbricks/types/integration/plain";
+
+const ZConnectPlainIntegration = z.object({
+  environmentId: ZId,
+  key: z.string().min(1),
+});
+
+export const connectPlainIntegrationAction = authenticatedActionClient
+  .schema(ZConnectPlainIntegration)
+  .action(async ({ ctx, parsedInput }) => {
+    const { environmentId, key } = parsedInput;
+
+    const organizationId = await getOrganizationIdFromEnvironmentId(environmentId);
+    const projectId = await getProjectIdFromEnvironmentId(environmentId);
+
+    await checkAuthorizationUpdated({
+      userId: ctx.user.id,
+      organizationId,
+      access: [
+        {
+          type: "organization",
+          roles: ["owner", "manager"],
+        },
+        {
+          type: "projectTeam",
+          minPermission: "readWrite",
+          projectId,
+        },
+      ],
+    });
+
+    const encryptedAccessToken = symmetricEncrypt(key, ENCRYPTION_KEY);
+
+    const existingIntegration = await getIntegrationByType(environmentId, "plain");
+    const plainData: TIntegrationPlainConfigData[] =
+      existingIntegration?.type === "plain"
+        ? (existingIntegration.config.data as TIntegrationPlainConfigData[])
+        : [];
+
+    const integration = await createOrUpdateIntegration(environmentId, {
+      type: "plain",
+      config: {
+        key: encryptedAccessToken,
+        data: plainData,
+      },
+    });
+
+    return {
+      success: true,
+      integration,
+    };
+  });

apps/web/app/(app)/environments/[environmentId]/integrations/plain/components/AddIntegrationModal.test.tsx

@@ -0,0 +1,567 @@
+import { AddIntegrationModal } from "@/app/(app)/environments/[environmentId]/integrations/plain/components/AddIntegrationModal";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import {
+  TIntegrationPlain,
+  TIntegrationPlainConfigData,
+  TPlainFieldType,
+} from "@formbricks/types/integration/plain";
+import { TSurvey, TSurveyQuestion, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
+
+// Mock actions and utilities
+vi.mock("@/app/(app)/environments/[environmentId]/integrations/actions", () => ({
+  createOrUpdateIntegrationAction: vi.fn(),
+}));
+vi.mock("@/lib/i18n/utils", () => ({
+  getLocalizedValue: (value: any, _locale: string) => value?.default || "",
+}));
+vi.mock("@/lib/pollyfills/structuredClone", () => ({
+  structuredClone: (obj: any) => JSON.parse(JSON.stringify(obj)),
+}));
+vi.mock("@/lib/utils/recall", () => ({
+  replaceHeadlineRecall: (survey: any) => survey,
+}));
+vi.mock("@/modules/ui/components/button", () => ({
+  Button: ({ children, onClick, loading, variant, type = "button" }: any) => (
+    <button onClick={onClick} disabled={loading} data-variant={variant} type={type}>
+      {loading ? "Loading..." : children}
+    </button>
+  ),
+}));
+vi.mock("@/modules/ui/components/dropdown-selector", () => ({
+  DropdownSelector: ({ label, items, selectedItem, setSelectedItem, placeholder, disabled }: any) => {
+    // Ensure the selected item is always available as an option
+    const allOptions = [...items];
+    if (selectedItem && !items.some((item: any) => item.id === selectedItem.id)) {
+      // Use a simple object structure consistent with how options are likely used
+      allOptions.push({ id: selectedItem.id, name: selectedItem.name });
+    }
+    // Remove duplicates just in case
+    const uniqueOptions = Array.from(new Map(allOptions.map((item) => [item.id, item])).values());
+
+    return (
+      <div>
+        {label && <label>{label}</label>}
+        <select
+          data-testid={`dropdown-${label?.toLowerCase().replace(/\s+/g, "-") || placeholder?.toLowerCase().replace(/\s+/g, "-")}`}
+          value={selectedItem?.id || ""} // Still set value based on selectedItem prop
+          onChange={(e) => {
+            const selected = uniqueOptions.find((item: any) => item.id === e.target.value);
+            setSelectedItem(selected);
+          }}
+          disabled={disabled}>
+          <option value="">{placeholder || "Select..."}</option>
+          {/* Render options from the potentially augmented list */}
+          {uniqueOptions.map((item: any) => (
+            <option key={item.id} value={item.id}>
+              {item.name}
+            </option>
+          ))}
+        </select>
+      </div>
+    );
+  },
+}));
+vi.mock("@/modules/ui/components/label", () => ({
+  Label: ({ children }: { children: React.ReactNode }) => <label>{children}</label>,
+}));
+vi.mock("@/modules/ui/components/dialog", () => ({
+  Dialog: ({ open, children }: { open: boolean; children: React.ReactNode }) =>
+    open ? <div data-testid="dialog">{children}</div> : null,
+  DialogContent: ({ children, className }: { children: React.ReactNode; className?: string }) => (
+    <div data-testid="dialog-content" className={className}>
+      {children}
+    </div>
+  ),
+  DialogHeader: ({ children, className }: { children: React.ReactNode; className?: string }) => (
+    <div data-testid="dialog-header" className={className}>
+      {children}
+    </div>
+  ),
+  DialogDescription: ({ children, className }: { children: React.ReactNode; className?: string }) => (
+    <p data-testid="dialog-description" className={className}>
+      {children}
+    </p>
+  ),
+  DialogTitle: ({ children }: { children: React.ReactNode }) => (
+    <h2 data-testid="dialog-title">{children}</h2>
+  ),
+  DialogBody: ({ children, className }: { children: React.ReactNode; className?: string }) => (
+    <div data-testid="dialog-body" className={className}>
+      {children}
+    </div>
+  ),
+  DialogFooter: ({ children, className }: { children: React.ReactNode; className?: string }) => (
+    <div data-testid="dialog-footer" className={className}>
+      {children}
+    </div>
+  ),
+}));
+vi.mock("lucide-react", () => ({
+  PlusIcon: () => <span data-testid="plus-icon">+</span>,
+  TrashIcon: () => <span data-testid="trash-icon">🗑️</span>,
+}));
+vi.mock("next/image", () => ({
+  // eslint-disable-next-line @next/next/no-img-element
+  default: ({ src, alt }: { src: string; alt: string }) => <img src={src} alt={alt} />,
+}));
+vi.mock("react-hook-form", () => ({
+  useForm: () => ({
+    handleSubmit: (callback: any) => (event: any) => {
+      event.preventDefault();
+      return callback();
+    },
+    register: vi.fn(),
+    setValue: vi.fn(),
+    watch: vi.fn(),
+    formState: { errors: {} },
+  }),
+}));
+vi.mock("react-hot-toast", () => ({
+  default: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+vi.mock("@tolgee/react", async () => {
+  const MockTolgeeProvider = ({ children }: { children: React.ReactNode }) => <>{children}</>;
+  const useTranslate = () => ({
+    t: (key: string) => {
+      // Simple mock translation function
+      if (key === "common.warning") return "Warning";
+      if (key === "common.metadata") return "Metadata";
+      if (key === "common.created_at") return "Created at";
+      if (key === "common.hidden_field") return "Hidden Field";
+      if (key === "common.first_name") return "First Name";
+      if (key === "common.last_name") return "Last Name";
+      if (key === "common.email") return "Email";
+      if (key === "common.select_survey") return "Select survey";
+      if (key === "common.delete") return "Delete";
+      if (key === "common.cancel") return "Cancel";
+      if (key === "common.update") return "Update";
+      if (key === "environments.integrations.plain.configure_plain_integration")
+        return "Configure Plain Integration";
+      if (key === "environments.integrations.plain.plain_integration_description")
+        return "Connect your Plain account to send survey responses as threads.";
+      if (key === "environments.integrations.plain.plain_logo") return "Plain logo";
+      if (key === "environments.integrations.plain.map_formbricks_fields_to_plain")
+        return "Map Formbricks fields to Plain";
+      if (key === "environments.integrations.plain.select_a_survey_question")
+        return "Select a survey question";
+      if (key === "environments.integrations.plain.select_a_field_to_map") return "Select a field to map";
+      if (key === "environments.integrations.plain.enter_label_id") return "Enter Label ID";
+      if (key === "environments.integrations.plain.connect") return "Connect";
+      if (key === "environments.integrations.plain.no_contact_info_question")
+        return "No contact info question found in survey";
+      if (key === "environments.integrations.plain.contact_info_missing_fields")
+        return "Contact info question is missing required fields:";
+      if (key === "environments.integrations.plain.contact_info_warning") return "Contact Info Warning";
+      if (key === "environments.integrations.plain.contact_info_missing_fields_description")
+        return "The following fields are missing";
+      if (key === "environments.integrations.plain.please_select_at_least_one_mapping")
+        return "Please select at least one mapping.";
+      if (key === "environments.integrations.plain.please_resolve_mapping_errors")
+        return "Please resolve mapping errors.";
+      if (key === "environments.integrations.plain.please_complete_mapping_fields")
+        return "Please complete mapping fields.";
+      if (key === "environments.integrations.please_select_a_survey_error") return "Please select a survey.";
+      if (key === "environments.integrations.create_survey_warning")
+        return "You need to create a survey first.";
+      if (key === "environments.integrations.integration_updated_successfully")
+        return "Integration updated successfully.";
+      if (key === "environments.integrations.integration_added_successfully")
+        return "Integration added successfully.";
+      if (key === "environments.integrations.integration_removed_successfully")
+        return "Integration removed successfully.";
+
+      return key; // Return key if no translation is found
+    },
+  });
+  return { TolgeeProvider: MockTolgeeProvider, useTranslate };
+});
+
+// Mock dependencies
+const createOrUpdateIntegrationAction = vi.mocked(
+  (await import("@/app/(app)/environments/[environmentId]/integrations/actions"))
+    .createOrUpdateIntegrationAction
+);
+const toast = vi.mocked((await import("react-hot-toast")).default);
+
+const environmentId = "test-env-id";
+const mockSetOpen = vi.fn();
+
+// Create a mock survey with a ContactInfo question
+const surveys: TSurvey[] = [
+  {
+    id: "survey1",
+    createdAt: new Date(),
+    updatedAt: new Date(),
+    name: "Survey 1",
+    type: "app",
+    environmentId: environmentId,
+    status: "inProgress",
+    questions: [
+      {
+        id: "q1",
+        type: TSurveyQuestionTypeEnum.OpenText,
+        headline: { default: "Question 1?" },
+        required: true,
+      } as unknown as TSurveyQuestion,
+      {
+        id: "q2",
+        type: TSurveyQuestionTypeEnum.ContactInfo,
+        headline: { default: "Contact Info" },
+        required: true,
+        firstName: { show: true },
+        lastName: { show: true },
+        email: { show: true },
+      } as unknown as TSurveyQuestion,
+    ],
+    variables: [{ id: "var1", name: "Variable 1" }],
+    hiddenFields: { enabled: true, fieldIds: ["hf1"] },
+    triggers: [],
+    recontactDays: null,
+    autoClose: null,
+    closeOnDate: null,
+    delay: 0,
+    displayOption: "displayOnce",
+    displayPercentage: null,
+    autoComplete: null,
+    singleUse: null,
+    styling: null,
+    surveyClosedMessage: null,
+    segment: null,
+    languages: [],
+    welcomeCard: { enabled: true } as unknown as TSurvey["welcomeCard"],
+    pin: null,
+    resultShareKey: null,
+    displayLimit: null,
+  } as unknown as TSurvey,
+  {
+    id: "survey2",
+    createdAt: new Date(),
+    updatedAt: new Date(),
+    name: "Survey 2",
+    type: "link",
+    environmentId: environmentId,
+    status: "draft",
+    questions: [
+      {
+        id: "q3",
+        type: TSurveyQuestionTypeEnum.ContactInfo,
+        headline: { default: "Partial Contact Info" },
+        required: true,
+        firstName: { show: true },
+        lastName: { show: false }, // Missing lastName
+        email: { show: true },
+      } as unknown as TSurveyQuestion,
+    ],
+    variables: [],
+    hiddenFields: { enabled: false },
+    triggers: [],
+    recontactDays: null,
+    autoClose: null,
+    closeOnDate: null,
+    delay: 0,
+    displayOption: "displayOnce",
+    displayPercentage: null,
+    autoComplete: null,
+    singleUse: null,
+    styling: null,
+    surveyClosedMessage: null,
+    segment: null,
+    languages: [],
+    welcomeCard: { enabled: true } as unknown as TSurvey["welcomeCard"],
+    pin: null,
+    resultShareKey: null,
+    displayLimit: null,
+  } as unknown as TSurvey,
+];
+
+const mockPlainIntegration: TIntegrationPlain = {
+  id: "integration1",
+  type: "plain",
+  environmentId: environmentId,
+  config: {
+    key: "test-api-key",
+    data: [], // Initially empty
+  },
+};
+
+const mockSelectedIntegration: TIntegrationPlainConfigData & { index: number } = {
+  surveyId: surveys[0].id,
+  surveyName: surveys[0].name,
+  mapping: [
+    {
+      plainField: { id: "threadTitle", name: "Thread Title", type: "title" as TPlainFieldType },
+      question: { id: "q1", name: "Question 1?", type: TSurveyQuestionTypeEnum.OpenText },
+    },
+    {
+      plainField: { id: "componentText", name: "Component Text", type: "componentText" as TPlainFieldType },
+      question: { id: "var1", name: "Variable 1", type: TSurveyQuestionTypeEnum.OpenText },
+    },
+  ],
+  includeCreatedAt: true,
+  includeComponents: true,
+  labelId: "custom-label",
+  createdAt: new Date(),
+  index: 0,
+};
+
+describe("AddIntegrationModal (Plain)", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  beforeEach(() => {
+    // Reset integration data before each test if needed
+    mockPlainIntegration.config.data = [
+      { ...mockSelectedIntegration }, // Simulate existing data for update/delete tests
+    ];
+  });
+
+  test("renders correctly when open (create mode)", () => {
+    render(
+      <AddIntegrationModal
+        environmentId={environmentId}
+        open={true}
+        surveys={surveys}
+        setOpen={mockSetOpen}
+        plainIntegration={{
+          ...mockPlainIntegration,
+          config: { ...mockPlainIntegration.config, data: [] },
+        }}
+        selectedIntegration={null}
+      />
+    );
+
+    expect(screen.getByTestId("dialog")).toBeInTheDocument();
+    expect(screen.getByText("Configure Plain Integration")).toBeInTheDocument();
+    expect(screen.getByTestId("dropdown-select-survey")).toBeInTheDocument();
+    expect(screen.getByText("Cancel")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Connect" })).toBeInTheDocument();
+    expect(screen.queryByText("Delete")).not.toBeInTheDocument();
+  });
+
+  test("renders correctly when open (update mode)", async () => {
+    render(
+      <AddIntegrationModal
+        environmentId={environmentId}
+        open={true}
+        surveys={surveys}
+        setOpen={mockSetOpen}
+        plainIntegration={mockPlainIntegration}
+        selectedIntegration={mockSelectedIntegration}
+      />
+    );
+
+    expect(screen.getByTestId("dialog")).toBeInTheDocument();
+    expect(screen.getByTestId("dropdown-select-survey")).toHaveValue(surveys[0].id);
+    expect(screen.getByText("Map Formbricks fields to Plain")).toBeInTheDocument();
+
+    // Check if mapping rows are rendered
+    await waitFor(() => {
+      const questionDropdowns = screen.getAllByTestId("dropdown-select-a-survey-question");
+      expect(questionDropdowns).toHaveLength(2); // Expecting two rows based on mockSelectedIntegration
+    });
+
+    expect(screen.getByText("Delete")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Update" })).toBeInTheDocument();
+  });
+
+  test("shows survey selection and enables mapping when survey is selected", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <AddIntegrationModal
+        environmentId={environmentId}
+        open={true}
+        surveys={surveys}
+        setOpen={mockSetOpen}
+        plainIntegration={{
+          ...mockPlainIntegration,
+          config: { ...mockPlainIntegration.config, data: [] },
+        }}
+        selectedIntegration={null}
+      />
+    );
+
+    // Select a survey
+    const surveyDropdown = screen.getByTestId("dropdown-select-survey");
+    await user.selectOptions(surveyDropdown, surveys[0].id);
+
+    // Check if mapping section appears
+    expect(screen.getByText("Map Formbricks fields to Plain")).toBeInTheDocument();
+
+    // Check if default mapping rows are present
+    const questionDropdowns = screen.getAllByTestId("dropdown-select-a-survey-question");
+    expect(questionDropdowns).toHaveLength(2); // Two default mapping rows
+  });
+
+  test("adds and removes mapping rows", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <AddIntegrationModal
+        environmentId={environmentId}
+        open={true}
+        surveys={surveys}
+        setOpen={mockSetOpen}
+        plainIntegration={mockPlainIntegration}
+        selectedIntegration={null}
+      />
+    );
+
+    // Select a survey first
+    const surveyDropdown = screen.getByTestId("dropdown-select-survey");
+    await user.selectOptions(surveyDropdown, surveys[0].id);
+
+    // Initial mapping rows
+    let plusButtons = screen.getAllByTestId("plus-icon");
+    expect(plusButtons).toHaveLength(2); // Two default rows
+
+    // Add a new row
+    await user.click(plusButtons[0]);
+
+    // Check if a new row was added
+    plusButtons = screen.getAllByTestId("plus-icon");
+    expect(plusButtons).toHaveLength(3); // Now three rows
+
+    // Try to remove a row (not the mandatory ones)
+    const trashButtons = screen.getAllByTestId("trash-icon");
+    expect(trashButtons).toHaveLength(1); // Only the new row should be removable
+
+    await user.click(trashButtons[0]);
+
+    // Check if row was removed
+    plusButtons = screen.getAllByTestId("plus-icon");
+    expect(plusButtons).toHaveLength(2); // Back to two rows
+  });
+
+  test("shows warning for survey with incomplete contact info", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <AddIntegrationModal
+        environmentId={environmentId}
+        open={true}
+        surveys={surveys}
+        setOpen={mockSetOpen}
+        plainIntegration={mockPlainIntegration}
+        selectedIntegration={null}
+      />
+    );
+
+    // Select survey with incomplete contact info
+    const surveyDropdown = screen.getByTestId("dropdown-select-survey");
+    await user.selectOptions(surveyDropdown, surveys[1].id);
+
+    // Check if warning appears
+    expect(screen.getByText("Contact Info Warning")).toBeInTheDocument();
+    expect(screen.getByText(/Last Name/)).toBeInTheDocument(); // Missing field
+  });
+
+  test("handles form submission with validation errors", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <AddIntegrationModal
+        environmentId={environmentId}
+        open={true}
+        surveys={surveys}
+        setOpen={mockSetOpen}
+        plainIntegration={mockPlainIntegration}
+        selectedIntegration={null}
+      />
+    );
+
+    // Try to submit without selecting a survey
+    const connectButton = screen.getByRole("button", { name: "Connect" });
+    await user.click(connectButton);
+
+    // Check if error toast was shown
+    expect(toast.error).toHaveBeenCalledWith("Please select a survey.");
+  });
+
+  test("handles successful integration update", async () => {
+    const user = userEvent.setup();
+    createOrUpdateIntegrationAction.mockResolvedValue({});
+
+    render(
+      <AddIntegrationModal
+        environmentId={environmentId}
+        open={true}
+        surveys={surveys}
+        setOpen={mockSetOpen}
+        plainIntegration={mockPlainIntegration}
+        selectedIntegration={mockSelectedIntegration}
+      />
+    );
+
+    // Change a mapping
+    const questionDropdowns = screen.getAllByTestId("dropdown-select-a-survey-question");
+    await user.selectOptions(questionDropdowns[0], "q2"); // Change to Contact Info question
+
+    // Submit the form
+    const updateButton = screen.getByRole("button", { name: "Update" });
+    await user.click(updateButton);
+
+    // Check if integration was updated
+    await waitFor(() => {
+      expect(createOrUpdateIntegrationAction).toHaveBeenCalled();
+      expect(toast.success).toHaveBeenCalledWith("Integration updated successfully.");
+      expect(mockSetOpen).toHaveBeenCalledWith(false);
+    });
+  });
+
+  test("handles integration deletion", async () => {
+    const user = userEvent.setup();
+    createOrUpdateIntegrationAction.mockResolvedValue({});
+
+    render(
+      <AddIntegrationModal
+        environmentId={environmentId}
+        open={true}
+        surveys={surveys}
+        setOpen={mockSetOpen}
+        plainIntegration={mockPlainIntegration}
+        selectedIntegration={mockSelectedIntegration}
+      />
+    );
+
+    // Click delete button
+    const deleteButton = screen.getByRole("button", { name: "Delete" });
+    await user.click(deleteButton);
+
+    // Check if integration was deleted
+    await waitFor(() => {
+      expect(createOrUpdateIntegrationAction).toHaveBeenCalled();
+      expect(toast.success).toHaveBeenCalledWith("Integration removed successfully.");
+      expect(mockSetOpen).toHaveBeenCalledWith(false);
+    });
+  });
+
+  test("calls setOpen(false) and resets form on cancel", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <AddIntegrationModal
+        environmentId={environmentId}
+        open={true}
+        surveys={surveys}
+        setOpen={mockSetOpen}
+        plainIntegration={mockPlainIntegration}
+        selectedIntegration={null}
+      />
+    );
+
+    // Click cancel button
+    const cancelButton = screen.getByRole("button", { name: "Cancel" });
+    await user.click(cancelButton);
+
+    // Check if modal was closed
+    expect(mockSetOpen).toHaveBeenCalledWith(false);
+  });
+});

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

@@ -0,0 +1,627 @@
+"use client";
+
+import { createOrUpdateIntegrationAction } from "@/app/(app)/environments/[environmentId]/integrations/actions";
+import { buildQuestionItems } from "@/app/(app)/environments/[environmentId]/integrations/lib/questionItems";
+import PlainLogo from "@/images/plain.webp";
+import { structuredClone } from "@/lib/pollyfills/structuredClone";
+import { Button } from "@/modules/ui/components/button";
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/modules/ui/components/dialog";
+import { DropdownSelector } from "@/modules/ui/components/dropdown-selector";
+import { Label } from "@/modules/ui/components/label";
+import { useTranslate } from "@tolgee/react";
+import { PlusIcon, TrashIcon } from "lucide-react";
+import Image from "next/image";
+import React, { useEffect, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import toast from "react-hot-toast";
+import { TIntegrationInput } from "@formbricks/types/integration";
+import {
+  TIntegrationPlain,
+  TIntegrationPlainConfigData,
+  TPlainFieldType,
+  TPlainMapping,
+} from "@formbricks/types/integration/plain";
+import { TSurvey, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
+import { INITIAL_MAPPING, PLAIN_FIELD_TYPES } from "../constants";
+
+interface AddIntegrationModalProps {
+  environmentId: string;
+  surveys: TSurvey[];
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  plainIntegration: TIntegrationPlain;
+  selectedIntegration: (TIntegrationPlainConfigData & { index: number }) | null;
+}
+
+export const AddIntegrationModal = ({
+  environmentId,
+  surveys,
+  open,
+  setOpen,
+  plainIntegration,
+  selectedIntegration,
+}: AddIntegrationModalProps) => {
+  const { t } = useTranslate();
+  const { handleSubmit } = useForm();
+  const [selectedSurvey, setSelectedSurvey] = useState<TSurvey | null>(null);
+  const [mapping, setMapping] = useState<
+    {
+      plainField: { id: string; name: string; type: TPlainFieldType; config?: Record<string, any> };
+      question: { id: string; name: string; type: string };
+      error?: {
+        type: string;
+        msg: React.ReactNode | string;
+      } | null;
+      isMandatory?: boolean;
+    }[]
+  >(INITIAL_MAPPING.map((m) => ({ ...m })));
+
+  const [isDeleting, setIsDeleting] = useState<boolean>(false);
+  const [isLinkingIntegration, setIsLinkingIntegration] = useState(false);
+
+  const plainFieldTypes = PLAIN_FIELD_TYPES;
+
+  // State to track custom label ID values
+  const [labelIdValues, setLabelIdValues] = useState<Record<string, string>>({});
+
+  const plainIntegrationData: TIntegrationInput = {
+    type: "plain",
+    config: {
+      key: plainIntegration?.config?.key,
+      data: plainIntegration.config?.data || [],
+    },
+  };
+
+  const questionItems = useMemo(() => buildQuestionItems(selectedSurvey, t), [selectedSurvey?.id, t]);
+
+  const checkContactInfoQuestion = (survey: TSurvey | null) => {
+    if (!survey) return { hasContactInfo: false, missingFields: [] };
+
+    // Find ContactInfo questions in the survey
+    const contactInfoQuestions = survey.questions.filter(
+      (q) => q.type === TSurveyQuestionTypeEnum.ContactInfo
+    );
+
+    if (contactInfoQuestions.length === 0) {
+      return { hasContactInfo: false, missingFields: [] };
+    }
+
+    // Check if any ContactInfo question has all required fields enabled
+    for (const question of contactInfoQuestions) {
+      const contactQuestion = question as any; // Type assertion to access fields
+      const missingFields: string[] = [];
+
+      if (!contactQuestion.firstName?.show) {
+        missingFields.push("firstName");
+      }
+
+      if (!contactQuestion.lastName?.show) {
+        missingFields.push("lastName");
+      }
+
+      if (!contactQuestion.email?.show) {
+        missingFields.push("email");
+      }
+
+      // If this question has all required fields, return success
+      if (missingFields.length === 0) {
+        return {
+          hasContactInfo: true,
+          missingFields: [],
+          questionId: question.id,
+          question: contactQuestion,
+        };
+      }
+
+      // Otherwise continue checking other questions
+    }
+
+    // If we get here, we found ContactInfo questions but none with all required fields
+    return {
+      hasContactInfo: true,
+      missingFields: ["firstName", "lastName", "email"],
+      partialMatch: true,
+    };
+  };
+
+  useEffect(() => {
+    if (selectedIntegration) {
+      setSelectedSurvey(
+        surveys.find((survey) => {
+          return survey.id === selectedIntegration.surveyId;
+        })!
+      );
+      // Ensure mandatory fields remain protected from deletion when editing
+      setMapping(
+        selectedIntegration.mapping.map((m) => ({
+          ...m,
+          // Re-apply mandatory flag based on field id
+          isMandatory: m.plainField.id === "threadTitle" || m.plainField.id === "componentText",
+        }))
+      );
+
+      // Initialize labelIdValues from existing mapping
+      const newLabelIdValues: Record<string, string> = {};
+      selectedIntegration.mapping.forEach((m, idx) => {
+        if (m.plainField.id === "labelTypeId") {
+          newLabelIdValues[idx] = m.question.id;
+        }
+      });
+      setLabelIdValues(newLabelIdValues);
+
+      return;
+    }
+    resetForm();
+  }, [selectedIntegration, surveys]);
+
+  // State to track contact info validation results
+  const [contactInfoValidation, setContactInfoValidation] = useState<{
+    hasContactInfo: boolean;
+    missingFields: string[];
+    partialMatch?: boolean;
+    questionId?: string;
+    question?: any;
+  }>({ hasContactInfo: false, missingFields: [] });
+
+  // Check for ContactInfo question when survey is selected
+  useEffect(() => {
+    if (selectedSurvey) {
+      const contactCheck = checkContactInfoQuestion(selectedSurvey);
+      setContactInfoValidation(contactCheck);
+    } else {
+      setContactInfoValidation({ hasContactInfo: false, missingFields: [] });
+    }
+  }, [selectedSurvey]);
+
+  const linkIntegration = async () => {
+    try {
+      if (!selectedSurvey) {
+        throw new Error(t("environments.integrations.please_select_a_survey_error"));
+      }
+
+      const contactCheck = checkContactInfoQuestion(selectedSurvey);
+      if (!contactCheck.hasContactInfo) {
+        toast.error(t("environments.integrations.plain.no_contact_info_question"));
+        return;
+      } else if (contactCheck.partialMatch || contactCheck.missingFields.length > 0) {
+        const missingFieldsFormatted = contactCheck.missingFields
+          .map((field) => {
+            switch (field) {
+              case "firstName":
+                return t("common.first_name");
+              case "lastName":
+                return t("common.last_name");
+              case "email":
+                return t("common.email");
+              default:
+                return field;
+            }
+          })
+          .join(", ");
+
+        toast.error(
+          `${t("environments.integrations.plain.contact_info_missing_fields")} ${missingFieldsFormatted}.`
+        );
+        return;
+      }
+
+      if (mapping.length === 0 || (mapping.length === 1 && !mapping[0].question.id)) {
+        throw new Error(t("environments.integrations.plain.please_select_at_least_one_mapping"));
+      }
+
+      if (mapping.filter((m) => m.error).length > 0) {
+        throw new Error(t("environments.integrations.plain.please_resolve_mapping_errors"));
+      }
+
+      if (mapping.filter((m) => !m.question.id).length >= 1) {
+        throw new Error(t("environments.integrations.plain.please_complete_mapping_fields"));
+      }
+
+      setIsLinkingIntegration(true);
+
+      // Find Label ID mapping if it exists
+      const labelIdMapping = mapping.find((m) => m.plainField.id === "labelTypeId");
+      const labelId = labelIdMapping?.question.id || "";
+
+      const integrationData: TIntegrationPlainConfigData = {
+        surveyId: selectedSurvey.id,
+        surveyName: selectedSurvey.name,
+        mapping: mapping.map((m) => {
+          const { error, ...rest } = m;
+          return rest as TPlainMapping;
+        }),
+        includeCreatedAt: true,
+        includeComponents: true,
+        labelId: labelId, // Add the Label ID from the mapping
+        createdAt: new Date(),
+      };
+
+      if (selectedIntegration) {
+        // update action
+        plainIntegrationData.config.data[selectedIntegration.index] = integrationData;
+      } else {
+        // create action
+        plainIntegrationData.config.data.push(integrationData);
+      }
+
+      await createOrUpdateIntegrationAction({ environmentId, integrationData: plainIntegrationData });
+      if (selectedIntegration) {
+        toast.success(t("environments.integrations.integration_updated_successfully"));
+      } else {
+        toast.success(t("environments.integrations.integration_added_successfully"));
+      }
+      resetForm();
+      setOpen(false);
+    } catch (e) {
+      toast.error(e.message);
+    } finally {
+      setIsLinkingIntegration(false);
+    }
+  };
+
+  const deleteLink = async () => {
+    plainIntegrationData.config.data.splice(selectedIntegration!.index, 1);
+    try {
+      setIsDeleting(true);
+      await createOrUpdateIntegrationAction({ environmentId, integrationData: plainIntegrationData });
+      toast.success(t("environments.integrations.integration_removed_successfully"));
+      setOpen(false);
+    } catch (error) {
+      toast.error(error.message);
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const resetForm = () => {
+    setIsLinkingIntegration(false);
+    setSelectedSurvey(null);
+    setLabelIdValues({});
+    setMapping(INITIAL_MAPPING.map((m) => ({ ...m })));
+  };
+
+  const getFilteredQuestionItems = (selectedIdx) => {
+    const selectedQuestionIds = mapping.filter((_, idx) => idx !== selectedIdx).map((m) => m.question.id);
+    return questionItems.filter((q) => !selectedQuestionIds.includes(q.id));
+  };
+
+  const createCopy = (item) => structuredClone(item);
+
+  const getFilteredPlainFieldTypes = (selectedIdx: number) => {
+    const selectedPlainFieldIds = mapping.filter((_, idx) => idx !== selectedIdx).map((m) => m.plainField.id);
+
+    return plainFieldTypes.filter((field) => !selectedPlainFieldIds.includes(field.id));
+  };
+
+  const MappingRow = ({ idx }: { idx: number }) => {
+    const filteredQuestionItems = getFilteredQuestionItems(idx);
+    const filteredPlainFields = getFilteredPlainFieldTypes(idx);
+
+    const addRow = () => {
+      const usedFieldIds = mapping.map((m) => m.plainField.id);
+      const availableField = plainFieldTypes.find((field) => !usedFieldIds.includes(field.id)) || {
+        id: "threadField",
+        name: "Thread Field",
+        type: "threadField" as TPlainFieldType,
+      };
+
+      setMapping((prev) => [
+        ...prev,
+        {
+          plainField: availableField,
+          question: { id: "", name: "", type: "" },
+          isMandatory: false,
+        },
+      ]);
+    };
+
+    const deleteRow = () => {
+      if (mapping[idx].isMandatory) return;
+
+      setMapping((prev) => {
+        return prev.filter((_, i) => i !== idx);
+      });
+    };
+
+    interface ErrorMsgProps {
+      error:
+        | {
+            type: string;
+            msg: React.ReactNode | string;
+          }
+        | null
+        | undefined;
+      field?: { id: string; name: string; type: TPlainFieldType; config?: Record<string, any> };
+      ques?: { id: string; name: string; type: string };
+    }
+
+    const ErrorMsg = ({ error }: ErrorMsgProps) => {
+      if (!error) return null;
+
+      return (
+        <div className="my-4 w-full rounded-lg bg-red-100 p-4 text-sm text-red-800">
+          <span className="mb-2 block">{error.type}</span>
+          {error.msg}
+        </div>
+      );
+    };
+
+    return (
+      <div className="w-full">
+        <ErrorMsg
+          key={idx}
+          error={mapping[idx]?.error}
+          field={mapping[idx].plainField}
+          ques={mapping[idx].question}
+        />
+        <div className="flex w-full items-center space-x-2">
+          <div className="flex w-full items-center">
+            {mapping[idx].plainField.id === "labelTypeId" ? (
+              <div className="max-w-full flex-1">
+                <input
+                  type="text"
+                  className="w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-200"
+                  placeholder={t("environments.integrations.plain.enter_label_id")}
+                  value={labelIdValues[idx] || ""}
+                  onChange={(e) => {
+                    setLabelIdValues((prev) => ({
+                      ...prev,
+                      [idx]: e.target.value,
+                    }));
+                    setMapping((prev) => {
+                      const copy = createCopy(prev);
+                      copy[idx] = {
+                        ...copy[idx],
+                        question: {
+                          id: e.target.value,
+                          name: "Label ID",
+                          type: "labelTypeId",
+                        },
+                        error: null,
+                      };
+                      return copy;
+                    });
+                  }}
+                />
+              </div>
+            ) : (
+              // Regular question dropdown for non-Label ID fields
+              <div className="max-w-full flex-1">
+                <DropdownSelector
+                  placeholder={t("environments.integrations.plain.select_a_survey_question")}
+                  items={filteredQuestionItems}
+                  selectedItem={mapping?.[idx]?.question}
+                  setSelectedItem={(item) => {
+                    setMapping((prev) => {
+                      const copy = createCopy(prev);
+                      copy[idx] = {
+                        ...copy[idx],
+                        question: item,
+                        error: null,
+                      };
+                      return copy;
+                    });
+                  }}
+                  disabled={questionItems.length === 0}
+                />
+              </div>
+            )}
+            <div className="h-px w-4 border-t border-t-slate-300" />
+            <div className="max-w-full flex-1">
+              <DropdownSelector
+                placeholder={t("environments.integrations.plain.select_a_field_to_map")}
+                items={filteredPlainFields}
+                selectedItem={mapping?.[idx]?.plainField}
+                disabled={filteredPlainFields.length === 0}
+                setSelectedItem={(item) => {
+                  setMapping((prev) => {
+                    const copy = createCopy(prev);
+                    copy[idx] = {
+                      ...copy[idx],
+                      plainField: item,
+                      error: null,
+                    };
+                    return copy;
+                  });
+                }}
+              />
+            </div>
+          </div>
+          <div className="flex space-x-2">
+            {!mapping[idx].isMandatory && (
+              <Button variant="secondary" size="icon" className="size-10" onClick={deleteRow}>
+                <TrashIcon />
+              </Button>
+            )}
+            <Button variant="secondary" size="icon" className="size-10" onClick={addRow}>
+              <PlusIcon />
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <div className="mb-4 flex items-start space-x-2">
+            <div className="relative size-8">
+              <Image
+                fill
+                className="object-contain object-center"
+                src={PlainLogo}
+                alt={t("environments.integrations.plain.plain_logo")}
+              />
+            </div>
+            <div className="space-y-0.5">
+              <DialogTitle>{t("environments.integrations.plain.configure_plain_integration")}</DialogTitle>
+              <DialogDescription>
+                {t("environments.integrations.plain.plain_integration_description")}
+              </DialogDescription>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit(linkIntegration)} className="contents space-y-4">
+          <DialogBody>
+            <div className="w-full space-y-4">
+              <div>
+                <div className="mb-4">
+                  <DropdownSelector
+                    label={t("common.select_survey")}
+                    items={surveys}
+                    selectedItem={selectedSurvey}
+                    setSelectedItem={setSelectedSurvey}
+                    disabled={surveys.length === 0}
+                  />
+                  <p className="m-1 text-xs text-slate-500">
+                    {surveys.length === 0 && t("environments.integrations.create_survey_warning")}
+                  </p>
+
+                  {/* Contact Info Validation Alerts */}
+                  {selectedSurvey && (
+                    <>
+                      {/* Success – all required fields present */}
+                      {contactInfoValidation.hasContactInfo &&
+                        contactInfoValidation.missingFields.length === 0 && (
+                          <div className="my-4 rounded-md bg-green-50 p-3 text-sm text-green-800">
+                            <p className="font-medium">
+                              {t("environments.integrations.plain.contact_info_success_title", {
+                                defaultValue: "Contact-Info question found",
+                              })}
+                            </p>
+                            <p className="mt-1">
+                              {t("environments.integrations.plain.contact_info_all_present", {
+                                defaultValue:
+                                  "This survey contains a complete Contact-Info question (first name, last name & email).",
+                              })}
+                            </p>
+                          </div>
+                        )}
+
+                      {/* Error – no contact info question */}
+                      {!contactInfoValidation.hasContactInfo && (
+                        <div className="mt-2 rounded-md bg-red-50 p-3 text-sm text-red-800">
+                          <p className="font-medium">
+                            {t("environments.integrations.plain.contact_info_missing_title", {
+                              defaultValue: "No Contact-Info question",
+                            })}
+                          </p>
+                          <p className="mt-1">
+                            {t("environments.integrations.plain.no_contact_info_question", {
+                              defaultValue:
+                                "This survey does not include a Contact-Info question. Please add one with first name, last name and email enabled to use Plain.",
+                            })}
+                          </p>
+                          <a
+                            href="https://formbricks.com/docs/integrations/plain#contact-info"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="mt-2 inline-block text-xs font-medium underline">
+                            {t("common.learn_more", { defaultValue: "Learn more" })}
+                          </a>
+                        </div>
+                      )}
+
+                      {/* Warning – partial match (retain existing implementation) */}
+                      {contactInfoValidation.hasContactInfo && contactInfoValidation.partialMatch && (
+                        <div className="mt-2 rounded-md bg-red-50 p-3 text-sm text-red-800">
+                          <p className="font-medium">
+                            {t("environments.integrations.plain.contact_info_warning")}
+                          </p>
+                          <p className="mt-1">
+                            {t("environments.integrations.plain.contact_info_missing_fields_description")}:{" "}
+                            {contactInfoValidation.missingFields
+                              .map((field) => {
+                                switch (field) {
+                                  case "firstName":
+                                    return t("common.first_name");
+                                  case "lastName":
+                                    return t("common.last_name");
+                                  case "email":
+                                    return t("common.email");
+                                  default:
+                                    return field;
+                                }
+                              })
+                              .join(", ")}
+                          </p>
+                          <a
+                            href="https://docs.formbricks.com/integrations/plain#contact-info"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="mt-2 inline-block text-xs font-medium underline">
+                            {t("common.learn_more", { defaultValue: "Learn more" })}
+                          </a>
+                        </div>
+                      )}
+                    </>
+                  )}
+                </div>
+
+                {selectedSurvey && (
+                  <div className="space-y-4">
+                    <div>
+                      <Label>{t("environments.integrations.plain.map_formbricks_fields_to_plain")}</Label>
+                      <p className="mt-1 text-xs text-slate-500">
+                        {t("environments.integrations.plain.mandatory_mapping_note", {
+                          defaultValue:
+                            "Thread Title and Component Text are mandatory mappings and cannot be removed.",
+                        })}
+                      </p>
+                      <div className="mt-1 space-y-2 overflow-y-auto">
+                        {mapping.map((_, idx) => (
+                          <MappingRow idx={idx} key={idx} />
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </DialogBody>
+
+          <DialogFooter>
+            {selectedIntegration ? (
+              <Button
+                type="button"
+                variant="destructive"
+                loading={isDeleting}
+                onClick={() => {
+                  deleteLink();
+                }}>
+                {t("common.delete")}
+              </Button>
+            ) : (
+              <Button
+                type="button"
+                variant="secondary"
+                onClick={() => {
+                  setOpen(false);
+                  resetForm();
+                }}>
+                {t("common.cancel")}
+              </Button>
+            )}
+            <Button
+              type="submit"
+              loading={isLinkingIntegration}
+              disabled={mapping.filter((m) => m.error).length > 0}>
+              {selectedIntegration ? t("common.update") : t("environments.integrations.plain.connect")}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/web/app/(app)/environments/[environmentId]/integrations/plain/components/AddKeyModal.test.tsx

@@ -0,0 +1,71 @@
+import { AddKeyModal } from "@/app/(app)/environments/[environmentId]/integrations/plain/components/AddKeyModal";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import toast from "react-hot-toast";
+import { type Mock, beforeEach, describe, expect, test, vi } from "vitest";
+import { connectPlainIntegrationAction } from "../actions";
+
+vi.mock("../actions", () => ({
+  connectPlainIntegrationAction: vi.fn(),
+}));
+
+vi.mock("react-hot-toast");
+
+vi.mock("@tolgee/react", () => ({
+  useTranslate: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+describe("AddKeyModal", () => {
+  const environmentId = "test-environment-id";
+  const setOpen = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test("should disable the connect button when the API key is empty", () => {
+    render(<AddKeyModal environmentId={environmentId} open={true} setOpen={setOpen} />);
+    const connectButton = screen.getByRole("button", { name: "common.connect" });
+    expect(connectButton).toBeDisabled();
+  });
+
+  test("should enable the connect button when the API key is not empty", async () => {
+    render(<AddKeyModal environmentId={environmentId} open={true} setOpen={setOpen} />);
+    const apiKeyInput = screen.getByLabelText("environments.integrations.plain.api_key_label");
+    await userEvent.type(apiKeyInput, "test-api-key", { pointerEventsCheck: 0 });
+    const connectButton = screen.getByRole("button", { name: "common.connect" });
+    expect(connectButton).not.toBeDisabled();
+  });
+
+  test("should call the connect action and show a success toast on successful connection", async () => {
+    render(<AddKeyModal environmentId={environmentId} open={true} setOpen={setOpen} />);
+    const apiKeyInput = screen.getByLabelText("environments.integrations.plain.api_key_label");
+    await userEvent.type(apiKeyInput, "test-api-key", { pointerEventsCheck: 0 });
+    const connectButton = screen.getByRole("button", { name: "common.connect" });
+    await userEvent.click(connectButton);
+
+    await waitFor(() => {
+      expect(connectPlainIntegrationAction).toHaveBeenCalledWith({
+        environmentId,
+        key: "test-api-key",
+      });
+      expect(toast.success).toHaveBeenCalledWith("environments.integrations.plain.connection_success");
+      expect(setOpen).toHaveBeenCalledWith(false);
+    });
+  });
+
+  test("should show an error toast on a failed connection", async () => {
+    (connectPlainIntegrationAction as Mock).mockRejectedValue(new Error("Connection error"));
+    render(<AddKeyModal environmentId={environmentId} open={true} setOpen={setOpen} />);
+    const apiKeyInput = screen.getByLabelText("environments.integrations.plain.api_key_label");
+    await userEvent.type(apiKeyInput, "test-api-key", { pointerEventsCheck: 0 });
+    const connectButton = screen.getByRole("button", { name: "common.connect" });
+    await userEvent.click(connectButton);
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith("environments.integrations.plain.connection_error");
+    });
+  });
+});

apps/web/app/(app)/environments/[environmentId]/integrations/plain/components/AddKeyModal.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { Button } from "@/modules/ui/components/button";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/modules/ui/components/dialog";
+import { Input } from "@/modules/ui/components/input";
+import { LoadingSpinner } from "@/modules/ui/components/loading-spinner";
+import { useTranslate } from "@tolgee/react";
+import { KeyIcon } from "lucide-react";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { connectPlainIntegrationAction } from "../actions";
+
+interface AddKeyModalProps {
+  environmentId: string;
+  open?: boolean;
+  setOpen?: (open: boolean) => void;
+}
+
+export const AddKeyModal = ({
+  environmentId,
+  open: externalOpen,
+  setOpen: externalSetOpen,
+}: AddKeyModalProps) => {
+  const { t } = useTranslate();
+  const [internalOpen, setInternalOpen] = useState(false);
+  const [keyLabel, setKeyLabel] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const open = externalOpen ?? internalOpen;
+  const setOpen = externalSetOpen || setInternalOpen;
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center">
+            <div className="mr-1.5 h-6 w-6 text-slate-500">
+              <KeyIcon className="h-5 w-5" />
+            </div>
+            <div>
+              <span className="font-medium">{t("environments.integrations.plain.add_key")}</span>
+              <p className="text-sm font-normal text-slate-500">
+                {t("environments.integrations.plain.add_key_description")}
+              </p>
+            </div>
+          </DialogTitle>
+        </DialogHeader>
+        <div>
+          <div className="mb-4">
+            <label htmlFor="keyLabel" className="mb-2 block text-sm font-medium text-slate-700">
+              {t("environments.integrations.plain.api_key_label")}
+            </label>
+            <Input
+              id="keyLabel"
+              name="keyLabel"
+              placeholder="plainApiKey_123"
+              value={keyLabel}
+              onChange={(e) => setKeyLabel(e.target.value)}
+              className="w-full"
+            />
+          </div>
+          <div className="flex justify-end space-x-2">
+            <Button variant="outline" onClick={() => setOpen(false)} disabled={isSubmitting}>
+              {t("common.cancel")}
+            </Button>
+            <Button
+              variant="default"
+              disabled={!keyLabel.trim() || isSubmitting}
+              onClick={async () => {
+                try {
+                  setIsSubmitting(true);
+                  await connectPlainIntegrationAction({
+                    environmentId,
+                    key: keyLabel.trim(),
+                  });
+                  toast.success(t("environments.integrations.plain.connection_success"));
+                  setOpen(false);
+                } catch {
+                  toast.error(t("environments.integrations.plain.connection_error"));
+                } finally {
+                  setIsSubmitting(false);
+                }
+              }}>
+              {isSubmitting ? <LoadingSpinner className="h-4 w-4" /> : t("common.connect")}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/web/app/(app)/environments/[environmentId]/integrations/plain/components/ManageIntegration.test.tsx

@@ -0,0 +1,186 @@
+import { deleteIntegrationAction } from "@/app/(app)/environments/[environmentId]/integrations/actions";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { TEnvironment } from "@formbricks/types/environment";
+import { TIntegrationPlain, TIntegrationPlainConfigData } from "@formbricks/types/integration/plain";
+import { ManageIntegration } from "./ManageIntegration";
+
+vi.mock("@/app/(app)/environments/[environmentId]/integrations/actions", () => ({
+  deleteIntegrationAction: vi.fn(),
+}));
+
+vi.mock("@/lib/time", () => ({
+  timeSince: vi.fn((time) => `mock-time-since-${time}`),
+}));
+
+vi.mock("@/lib/utils/helper", () => ({
+  getFormattedErrorMessage: vi.fn((err) => err?.message || "An error occurred"),
+}));
+
+vi.mock("@/modules/ui/components/delete-dialog", () => ({
+  DeleteDialog: ({ open, setOpen, onDelete, text, isDeleting }) =>
+    open ? (
+      <div>
+        <span>{text}</span>
+        <button onClick={() => onDelete()}>{isDeleting ? "Deleting..." : "Delete"}</button>
+        <button onClick={() => setOpen(false)}>Cancel</button>
+      </div>
+    ) : null,
+}));
+
+vi.mock("@/modules/ui/components/empty-space-filler", () => ({
+  EmptySpaceFiller: ({ emptyMessage }) => <div>{emptyMessage}</div>,
+}));
+
+vi.mock("@/lib/constants", () => {
+  const base = {
+    IS_FORMBRICKS_CLOUD: false,
+    IS_PRODUCTION: false,
+    IS_DEVELOPMENT: true,
+    E2E_TESTING: false,
+    ENCRYPTION_KEY: "12345678901234567890123456789012",
+    REDIS_URL: undefined,
+    ENTERPRISE_LICENSE_KEY: undefined,
+    POSTHOG_API_KEY: undefined,
+    POSTHOG_HOST: undefined,
+    IS_POSTHOG_CONFIGURED: false,
+    GITHUB_ID: undefined,
+    GITHUB_SECRET: undefined,
+    GOOGLE_CLIENT_ID: undefined,
+    GOOGLE_CLIENT_SECRET: undefined,
+    AZUREAD_CLIENT_ID: undefined,
+    AZUREAD_CLIENT_SECRET: undefined,
+    AZUREAD_TENANT_ID: undefined,
+    OIDC_DISPLAY_NAME: undefined,
+    OIDC_CLIENT_ID: undefined,
+    OIDC_ISSUER: undefined,
+    OIDC_CLIENT_SECRET: undefined,
+    OIDC_SIGNING_ALGORITHM: undefined,
+    SESSION_MAX_AGE: 1000,
+    AUDIT_LOG_ENABLED: 1,
+    WEBAPP_URL: undefined,
+    SENTRY_DSN: undefined,
+    SENTRY_RELEASE: undefined,
+    SENTRY_ENVIRONMENT: undefined,
+  };
+  return new Proxy(base, {
+    get(target, prop) {
+      return prop in target ? target[prop as keyof typeof target] : undefined;
+    },
+  });
+});
+
+vi.mock("@tolgee/react", () => ({
+  useTranslate: () => ({
+    t: (key) => key,
+  }),
+}));
+
+vi.mock("react-hot-toast", () => ({
+  default: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+const mockEnvironment = { id: "test-env-id" } as TEnvironment;
+const mockIntegrationData: TIntegrationPlainConfigData[] = [
+  {
+    surveyId: "survey-1",
+    surveyName: "Survey One",
+    createdAt: new Date(),
+    mapping: [],
+    includeMetadata: true,
+    includeHiddenFields: true,
+    includeComponents: false,
+  },
+  {
+    surveyId: "survey-2",
+    surveyName: "Survey Two",
+    createdAt: new Date(),
+    mapping: [],
+    includeMetadata: true,
+    includeHiddenFields: true,
+    includeComponents: false,
+  },
+];
+
+const mockPlainIntegration: TIntegrationPlain = {
+  id: "integration-id",
+  type: "plain",
+  environmentId: "test-env-id",
+  config: {
+    key: "test-key",
+    data: mockIntegrationData,
+  },
+};
+
+describe("ManageIntegration", () => {
+  let setOpenAddIntegrationModal: (isOpen: boolean) => void;
+  let setIsConnected: (isConnected: boolean) => void;
+  let setSelectedIntegration: (integration: (TIntegrationPlainConfigData & { index: number }) | null) => void;
+
+  beforeEach(() => {
+    setOpenAddIntegrationModal = vi.fn();
+    setIsConnected = vi.fn();
+    setSelectedIntegration = vi.fn();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test("renders empty state when no integrations are configured", () => {
+    render(
+      <ManageIntegration
+        environment={mockEnvironment}
+        plainIntegration={{ ...mockPlainIntegration, config: { ...mockPlainIntegration.config, data: [] } }}
+        setOpenAddIntegrationModal={setOpenAddIntegrationModal}
+        setIsConnected={setIsConnected}
+        setSelectedIntegration={setSelectedIntegration}
+        locale={"en-US"}
+      />
+    );
+    expect(screen.getByText("environments.integrations.plain.no_databases_found")).toBeInTheDocument();
+  });
+
+  test("renders a list of integrations when configured", () => {
+    render(
+      <ManageIntegration
+        environment={mockEnvironment}
+        plainIntegration={mockPlainIntegration}
+        setOpenAddIntegrationModal={setOpenAddIntegrationModal}
+        setIsConnected={setIsConnected}
+        setSelectedIntegration={setSelectedIntegration}
+        locale={"en-US"}
+      />
+    );
+    expect(screen.getAllByText("Survey One")[0]).toBeInTheDocument();
+    expect(screen.getAllByText("Survey Two")[0]).toBeInTheDocument();
+  });
+
+  test("handles successful deletion of an integration", async () => {
+    vi.mocked(deleteIntegrationAction).mockResolvedValue({ data: mockPlainIntegration });
+
+    render(
+      <ManageIntegration
+        environment={mockEnvironment}
+        plainIntegration={mockPlainIntegration}
+        setOpenAddIntegrationModal={setOpenAddIntegrationModal}
+        setIsConnected={setIsConnected}
+        setSelectedIntegration={setSelectedIntegration}
+        locale={"en-US"}
+      />
+    );
+
+    await userEvent.click(screen.getAllByText("environments.integrations.delete_integration")[0]);
+    expect(screen.getByText("environments.integrations.delete_integration_confirmation")).toBeInTheDocument();
+
+    await userEvent.click(screen.getByText("Delete"));
+
+    await waitFor(() => {
+      expect(deleteIntegrationAction).toHaveBeenCalledWith({ integrationId: mockPlainIntegration.id });
+    });
+  });
+});

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

@@ -0,0 +1,133 @@
+"use client";
+
+import { deleteIntegrationAction } from "@/app/(app)/environments/[environmentId]/integrations/actions";
+import { timeSince } from "@/lib/time";
+import { getFormattedErrorMessage } from "@/lib/utils/helper";
+import { Button } from "@/modules/ui/components/button";
+import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
+import { useTranslate } from "@tolgee/react";
+import { RefreshCcwIcon, Trash2Icon } from "lucide-react";
+import React, { useState } from "react";
+import toast from "react-hot-toast";
+import { TEnvironment } from "@formbricks/types/environment";
+import { TIntegrationPlain, TIntegrationPlainConfigData } from "@formbricks/types/integration/plain";
+import { TUserLocale } from "@formbricks/types/user";
+import { IntegrationListPanel } from "../../components/IntegrationListPanel";
+import { AddKeyModal } from "./AddKeyModal";
+
+interface ManageIntegrationProps {
+  environment: TEnvironment;
+  plainIntegration: TIntegrationPlain;
+  setOpenAddIntegrationModal: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsConnected: React.Dispatch<React.SetStateAction<boolean>>;
+  setSelectedIntegration: React.Dispatch<
+    React.SetStateAction<(TIntegrationPlainConfigData & { index: number }) | null>
+  >;
+  locale: TUserLocale;
+}
+
+export const ManageIntegration = ({
+  environment,
+  plainIntegration,
+  setOpenAddIntegrationModal,
+  setIsConnected,
+  setSelectedIntegration,
+  locale,
+}: ManageIntegrationProps) => {
+  const { t } = useTranslate();
+  const [isDeleteIntegrationModalOpen, setIsDeleteIntegrationModalOpen] = useState(false);
+  const [isKeyModalOpen, setIsKeyModalOpen] = useState(false);
+  const [isDeleting, setisDeleting] = useState(false);
+
+  let integrationArray: TIntegrationPlainConfigData[] = [];
+  if (plainIntegration?.config.data) {
+    integrationArray = plainIntegration.config.data;
+  }
+
+  const handleDeleteIntegration = async () => {
+    setisDeleting(true);
+
+    const deleteIntegrationActionResult = await deleteIntegrationAction({
+      integrationId: plainIntegration.id,
+    });
+
+    if (deleteIntegrationActionResult?.data) {
+      toast.success(t("environments.integrations.integration_removed_successfully"));
+      setIsConnected(false);
+    } else {
+      const errorMessage = getFormattedErrorMessage(deleteIntegrationActionResult);
+      toast.error(errorMessage);
+    }
+
+    setisDeleting(false);
+    setIsDeleteIntegrationModalOpen(false);
+  };
+
+  const editIntegration = (index: number) => {
+    setSelectedIntegration({ ...plainIntegration.config.data[index], index });
+    setOpenAddIntegrationModal(true);
+  };
+
+  return (
+    <>
+      <IntegrationListPanel
+        environment={environment}
+        statusNode={
+          <>
+            <span className="mr-4 h-4 w-4 rounded-full bg-green-600"></span>
+            <span className="text-slate-500">{t("common.connected")}</span>
+          </>
+        }
+        reconnectAction={{
+          label: t("environments.integrations.plain.update_connection"),
+          onClick: () => setIsKeyModalOpen(true),
+          icon: <RefreshCcwIcon className="mr-2 h-4 w-4" />,
+          tooltip: t("environments.integrations.plain.update_connection_tooltip"),
+          variant: "outline",
+        }}
+        addNewAction={{
+          label: t("environments.integrations.plain.link_new_database"),
+          onClick: () => {
+            setSelectedIntegration(null);
+            setOpenAddIntegrationModal(true);
+          },
+        }}
+        emptyMessage={t("environments.integrations.plain.no_databases_found")}
+        items={integrationArray}
+        columns={[
+          {
+            header: t("common.survey"),
+            render: (item: TIntegrationPlainConfigData) => item.surveyName,
+          },
+          {
+            header: t("common.survey_id"),
+            render: (item: TIntegrationPlainConfigData) => item.surveyId,
+          },
+          {
+            header: t("common.updated_at"),
+            render: (item: TIntegrationPlainConfigData) => timeSince(item.createdAt.toString(), locale),
+          },
+        ]}
+        onRowClick={editIntegration}
+        getRowKey={(item: TIntegrationPlainConfigData, idx) => `${idx}-${item.surveyId}`}
+      />
+      <div className="mt-4 flex justify-center">
+        <Button variant="ghost" onClick={() => setIsDeleteIntegrationModalOpen(true)}>
+          <Trash2Icon />
+          {t("environments.integrations.delete_integration")}
+        </Button>
+      </div>
+
+      <AddKeyModal environmentId={environment.id} open={isKeyModalOpen} setOpen={setIsKeyModalOpen} />
+
+      <DeleteDialog
+        open={isDeleteIntegrationModalOpen}
+        setOpen={setIsDeleteIntegrationModalOpen}
+        deleteWhat={t("environments.integrations.plain.plain_integration")}
+        onDelete={handleDeleteIntegration}
+        text={t("environments.integrations.delete_integration_confirmation")}
+        isDeleting={isDeleting}
+      />
+    </>
+  );
+};

apps/web/app/(app)/environments/[environmentId]/integrations/plain/components/PlainWrapper.test.tsx

@@ -0,0 +1,81 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { TEnvironment } from "@formbricks/types/environment";
+import { TIntegrationPlain } from "@formbricks/types/integration/plain";
+import { TSurvey } from "@formbricks/types/surveys/types";
+import { PlainWrapper } from "./PlainWrapper";
+
+// Mock child components
+vi.mock("@/modules/ui/components/connect-integration", () => ({
+  ConnectIntegration: vi.fn(() => <div>Mocked ConnectIntegration</div>),
+}));
+
+vi.mock("./AddIntegrationModal", () => ({
+  AddIntegrationModal: vi.fn(() => <div>Mocked AddIntegrationModal</div>),
+}));
+
+vi.mock("./AddKeyModal", () => ({
+  AddKeyModal: vi.fn(() => <div>Mocked AddKeyModal</div>),
+}));
+
+vi.mock("./ManageIntegration", () => ({
+  ManageIntegration: vi.fn(() => <div>Mocked ManageIntegration</div>),
+}));
+
+const mockEnvironment = {
+  id: "test-env-id",
+  name: "Test Environment",
+} as unknown as TEnvironment;
+
+const mockSurveys: TSurvey[] = [];
+
+const mockPlainIntegration: TIntegrationPlain = {
+  id: "integration-id",
+  type: "plain",
+  environmentId: "test-env-id",
+  config: {
+    key: "test-key",
+    data: [],
+  },
+};
+
+describe("PlainWrapper", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  test("renders ConnectIntegration when not connected", () => {
+    render(
+      <PlainWrapper
+        plainIntegration={undefined}
+        enabled={true}
+        environment={mockEnvironment}
+        webAppUrl="http://localhost:3000"
+        surveys={mockSurveys}
+        databasesArray={[]}
+        locale="en-US"
+      />
+    );
+
+    expect(screen.getByText("Mocked ConnectIntegration")).toBeInTheDocument();
+    expect(screen.queryByText("Mocked ManageIntegration")).not.toBeInTheDocument();
+  });
+
+  test("renders ManageIntegration when connected", () => {
+    render(
+      <PlainWrapper
+        plainIntegration={mockPlainIntegration}
+        enabled={true}
+        environment={mockEnvironment}
+        webAppUrl="http://localhost:3000"
+        surveys={mockSurveys}
+        databasesArray={[]}
+        locale="en-US"
+      />
+    );
+
+    expect(screen.getByText("Mocked ManageIntegration")).toBeInTheDocument();
+    expect(screen.queryByText("Mocked ConnectIntegration")).not.toBeInTheDocument();
+  });
+});

apps/web/app/(app)/environments/[environmentId]/integrations/plain/components/PlainWrapper.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import PlainLogo from "@/images/plain.webp";
+import { ConnectIntegration } from "@/modules/ui/components/connect-integration";
+import { useState } from "react";
+import { TEnvironment } from "@formbricks/types/environment";
+import { TIntegrationPlain, TIntegrationPlainConfigData } from "@formbricks/types/integration/plain";
+import { TSurvey } from "@formbricks/types/surveys/types";
+import { TUserLocale } from "@formbricks/types/user";
+import { AddIntegrationModal } from "./AddIntegrationModal";
+import { AddKeyModal } from "./AddKeyModal";
+import { ManageIntegration } from "./ManageIntegration";
+
+interface PlainWrapperProps {
+  plainIntegration: TIntegrationPlain | undefined;
+  enabled: boolean;
+  environment: TEnvironment;
+  webAppUrl: string;
+  surveys: TSurvey[];
+  databasesArray: any[];
+  locale: TUserLocale;
+}
+
+export const PlainWrapper = ({
+  plainIntegration,
+  enabled,
+  environment,
+
+  surveys,
+  locale,
+}: PlainWrapperProps) => {
+  const [isModalOpen, setModalOpen] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [isConnected, setIsConnected] = useState(plainIntegration ? plainIntegration.config.key : false);
+  const [selectedIntegration, setSelectedIntegration] = useState<
+    (TIntegrationPlainConfigData & { index: number }) | null
+  >(null);
+
+  const handlePlainAuthorization = async () => {
+    setOpen(true);
+  };
+
+  return (
+    <>
+      {isConnected && plainIntegration ? (
+        <>
+          <AddIntegrationModal
+            environmentId={environment.id}
+            surveys={surveys}
+            open={isModalOpen}
+            setOpen={setModalOpen}
+            plainIntegration={plainIntegration}
+            selectedIntegration={selectedIntegration}
+          />
+          <ManageIntegration
+            environment={environment}
+            plainIntegration={plainIntegration}
+            setOpenAddIntegrationModal={setModalOpen}
+            setIsConnected={setIsConnected}
+            setSelectedIntegration={setSelectedIntegration}
+            locale={locale}
+          />
+        </>
+      ) : (
+        <>
+          <AddKeyModal environmentId={environment.id} open={open} setOpen={setOpen} />
+          <ConnectIntegration
+            isEnabled={enabled}
+            integrationType={"plain"}
+            handleAuthorization={handlePlainAuthorization}
+            integrationLogoSrc={PlainLogo}
+          />
+        </>
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,24 @@
+import { TPlainFieldType } from "@formbricks/types/integration/plain";
+
+export const PLAIN_FIELD_TYPES: {
+  id: string;
+  name: string;
+  type: TPlainFieldType;
+}[] = [
+  { id: "threadTitle", name: "Thread Title", type: "threadField" as TPlainFieldType },
+  { id: "componentText", name: "Component Text", type: "componentText" as TPlainFieldType },
+  { id: "labelTypeId", name: "Label ID", type: "labelTypeId" as TPlainFieldType },
+];
+
+export const INITIAL_MAPPING = [
+  {
+    plainField: { id: "threadTitle", name: "Thread Title", type: "title" as TPlainFieldType },
+    question: { id: "", name: "", type: "" },
+    isMandatory: true,
+  },
+  {
+    plainField: { id: "componentText", name: "Component Text", type: "componentText" as TPlainFieldType },
+    question: { id: "", name: "", type: "" },
+    isMandatory: true,
+  },
+] as const;

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

@@ -0,0 +1,210 @@
+import { getSurveys } from "@/app/(app)/environments/[environmentId]/integrations/lib/surveys";
+import { getIntegrationByType } from "@/lib/integration/service";
+import { findMatchingLocale } from "@/lib/utils/locale";
+import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
+import { cleanup, render, screen } from "@testing-library/react";
+import { redirect } from "next/navigation";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { TEnvironment } from "@formbricks/types/environment";
+import { TIntegrationPlain } from "@formbricks/types/integration/plain";
+import { TSurvey } from "@formbricks/types/surveys/types";
+import Page from "./page";
+
+// Mock dependencies
+vi.mock("@/app/(app)/environments/[environmentId]/integrations/plain/components/PlainWrapper", () => ({
+  PlainWrapper: vi.fn(
+    ({ enabled, surveys, environment, plainIntegration, webAppUrl, databasesArray, locale }) => (
+      <div>
+        <span>Mocked PlainWrapper</span>
+        <span data-testid="enabled">{enabled.toString()}</span>
+        <span data-testid="environmentId">{environment.id}</span>
+        <span data-testid="surveyCount">{surveys?.length ?? 0}</span>
+        <span data-testid="integrationId">{plainIntegration?.id}</span>
+        <span data-testid="webAppUrl">{webAppUrl}</span>
+        <span data-testid="databasesArray">{databasesArray?.length ?? 0}</span>
+        <span data-testid="locale">{locale}</span>
+      </div>
+    )
+  ),
+}));
+vi.mock("@/app/(app)/environments/[environmentId]/integrations/lib/surveys", () => ({
+  getSurveys: vi.fn(),
+}));
+vi.mock("@/lib/integration/service", () => ({
+  getIntegrationByType: vi.fn(),
+}));
+vi.mock("@/lib/utils/locale", () => ({
+  findMatchingLocale: vi.fn(),
+}));
+vi.mock("@/modules/environments/lib/utils", () => ({
+  getEnvironmentAuth: vi.fn(),
+}));
+vi.mock("@/modules/ui/components/go-back-button", () => ({
+  GoBackButton: vi.fn(({ url }) => <div data-testid="go-back">{url}</div>),
+}));
+vi.mock("@/modules/ui/components/page-content-wrapper", () => ({
+  PageContentWrapper: vi.fn(({ children }) => <div>{children}</div>),
+}));
+vi.mock("@/modules/ui/components/page-header", () => ({
+  PageHeader: vi.fn(({ pageTitle }) => <h1>{pageTitle}</h1>),
+}));
+vi.mock("@/tolgee/server", () => ({
+  getTranslate: async () => (key) => key,
+}));
+vi.mock("next/navigation", () => ({
+  redirect: vi.fn(),
+}));
+vi.mock("@/lib/constants", () => ({
+  WEBAPP_URL: "https://app.formbricks.com",
+}));
+
+const mockEnvironment = {
+  id: "test-env-id",
+  createdAt: new Date(),
+  updatedAt: new Date(),
+  appSetupCompleted: true,
+  type: "development",
+  projectId: "project-id",
+  project: {
+    id: "project-id",
+    name: "Test Project",
+    environments: [],
+    people: [],
+    surveys: [],
+    tags: [],
+    webhooks: [],
+    apiKey: {
+      id: "api-key",
+      createdAt: new Date(),
+      updatedAt: new Date(),
+      hashedKey: "hashed",
+      label: "api",
+    },
+    logo: null,
+    createdAt: new Date(),
+    updatedAt: new Date(),
+    organizationId: "org-id",
+    recontactDays: 30,
+    inAppSurveyBranding: false,
+    linkSurveyBranding: false,
+    placement: "bottomRight",
+    clickOutsideClose: true,
+    darkOverlay: false,
+  },
+} as unknown as TEnvironment;
+
+const mockSurveys: TSurvey[] = [
+  {
+    id: "survey1",
+    name: "Survey 1",
+    createdAt: new Date(),
+    updatedAt: new Date(),
+    environmentId: "test-env-id",
+    status: "inProgress",
+    type: "app",
+    questions: [],
+    triggers: [],
+    recontactDays: null,
+    autoClose: null,
+    closeOnDate: null,
+    delay: 0,
+    displayOption: "displayOnce",
+    displayPercentage: null,
+    languages: [],
+    pin: null,
+    resultShareKey: null,
+    segment: null,
+    singleUse: null,
+    styling: null,
+    surveyClosedMessage: null,
+    welcomeCard: { enabled: false } as unknown as TSurvey["welcomeCard"],
+    autoComplete: null,
+    runOnDate: null,
+  } as unknown as TSurvey,
+];
+
+const mockPlainIntegration = {
+  id: "integration1",
+  type: "plain",
+  environmentId: "test-env-id",
+  config: {
+    key: "plain-key",
+    data: [],
+  },
+} as unknown as TIntegrationPlain;
+
+const mockProps = {
+  params: { environmentId: "test-env-id" },
+};
+
+describe("PlainIntegrationPage", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  beforeEach(() => {
+    vi.mocked(getEnvironmentAuth).mockResolvedValue({
+      environment: mockEnvironment,
+      project: {} as any,
+      organization: {} as any,
+      session: {} as any,
+      currentUserMembership: {} as any,
+      projectPermission: {} as any,
+      isMember: true,
+      isOwner: false,
+      isManager: false,
+      isBilling: false,
+      hasReadAccess: true,
+      hasReadWriteAccess: true,
+      hasManageAccess: false,
+      isReadOnly: false,
+    });
+    vi.mocked(getSurveys).mockResolvedValue(mockSurveys);
+    vi.mocked(getIntegrationByType).mockResolvedValue(mockPlainIntegration);
+    vi.mocked(findMatchingLocale).mockResolvedValue("en-US");
+  });
+
+  test("renders the page with PlainWrapper when enabled and not read-only", async () => {
+    const PageComponent = await Page(mockProps);
+    render(PageComponent);
+
+    expect(screen.getByText("environments.integrations.plain.plain_integration")).toBeInTheDocument();
+    expect(screen.getByText("Mocked PlainWrapper")).toBeInTheDocument();
+    expect(screen.getByTestId("enabled")).toHaveTextContent("true");
+    expect(screen.getByTestId("environmentId")).toHaveTextContent(mockEnvironment.id);
+    expect(screen.getByTestId("surveyCount")).toHaveTextContent(mockSurveys.length.toString());
+    expect(screen.getByTestId("integrationId")).toHaveTextContent(mockPlainIntegration.id);
+    expect(screen.getByTestId("webAppUrl")).toHaveTextContent("https://app.formbricks.com");
+    expect(screen.getByTestId("databasesArray")).toHaveTextContent("0");
+    expect(screen.getByTestId("locale")).toHaveTextContent("en-US");
+    expect(screen.getByTestId("go-back")).toHaveTextContent(
+      `https://app.formbricks.com/environments/${mockProps.params.environmentId}/integrations`
+    );
+    expect(vi.mocked(redirect)).not.toHaveBeenCalled();
+  });
+
+  test("calls redirect when user is read-only", async () => {
+    vi.mocked(getEnvironmentAuth).mockResolvedValue({
+      environment: mockEnvironment,
+      project: {} as any,
+      organization: {} as any,
+      session: {} as any,
+      currentUserMembership: {} as any,
+      projectPermission: {} as any,
+      isMember: true,
+      isOwner: false,
+      isManager: false,
+      isBilling: false,
+      hasReadAccess: true,
+      hasReadWriteAccess: false,
+      hasManageAccess: false,
+      isReadOnly: true,
+    });
+
+    const PageComponent = await Page(mockProps);
+    render(PageComponent);
+
+    expect(vi.mocked(redirect)).toHaveBeenCalledWith("./");
+  });
+});

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

@@ -0,0 +1,49 @@
+import { getSurveys } from "@/app/(app)/environments/[environmentId]/integrations/lib/surveys";
+import { PlainWrapper } from "@/app/(app)/environments/[environmentId]/integrations/plain/components/PlainWrapper";
+import { WEBAPP_URL } from "@/lib/constants";
+import { getIntegrationByType } from "@/lib/integration/service";
+import { findMatchingLocale } from "@/lib/utils/locale";
+import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
+import { GoBackButton } from "@/modules/ui/components/go-back-button";
+import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
+import { PageHeader } from "@/modules/ui/components/page-header";
+import { getTranslate } from "@/tolgee/server";
+import { redirect } from "next/navigation";
+import { TIntegrationPlain } from "@formbricks/types/integration/plain";
+
+const Page = async (props) => {
+  const params = await props.params;
+  const t = await getTranslate();
+
+  const { isReadOnly, environment } = await getEnvironmentAuth(params.environmentId);
+
+  const [surveys, plainIntegration] = await Promise.all([
+    getSurveys(params.environmentId),
+    getIntegrationByType(params.environmentId, "plain"),
+  ]);
+
+  const databasesArray = [];
+  const locale = await findMatchingLocale();
+
+  if (isReadOnly) {
+    redirect("./");
+  }
+
+  return (
+    <PageContentWrapper>
+      <GoBackButton url={`${WEBAPP_URL}/environments/${params.environmentId}/integrations`} />
+      <PageHeader pageTitle={t("environments.integrations.plain.plain_integration") || "Plain Integration"} />
+      <PlainWrapper
+        enabled={true}
+        surveys={surveys}
+        environment={environment}
+        plainIntegration={plainIntegration as TIntegrationPlain}
+        webAppUrl={WEBAPP_URL}
+        databasesArray={databasesArray}
+        locale={locale}
+      />
+    </PageContentWrapper>
+  );
+};
+
+export default Page;

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

@@ -226,6 +226,7 @@ const surveys: TSurvey[] = [
     welcomeCard: { enabled: true } as unknown as TSurvey["welcomeCard"],
     hiddenFields: { enabled: true, fieldIds: [] },
     pin: null,
+    resultShareKey: null,
     displayLimit: null,
   } as unknown as TSurvey,
   {
@@ -263,6 +264,7 @@ const surveys: TSurvey[] = [
     welcomeCard: { enabled: true } as unknown as TSurvey["welcomeCard"],
     hiddenFields: { enabled: true, fieldIds: [] },
     pin: null,
+    resultShareKey: null,
     displayLimit: null,
   } as unknown as TSurvey,
 ];

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

@@ -114,6 +114,7 @@ const mockSurveys: TSurvey[] = [
     languages: [],
     styling: null,
     segment: null,
+    resultShareKey: null,
     displayPercentage: null,
     closeOnDate: null,
     runOnDate: null,

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

@@ -27,7 +27,7 @@ const Page = async (props) => {
   const locale = await findMatchingLocale();
 
   if (isReadOnly) {
-    return redirect("./");
+    redirect("./");
   }
 
   return (

apps/web/app/(app)/environments/[environmentId]/lib/organization.test.ts

@@ -1,77 +0,0 @@
-import { Prisma } from "@prisma/client";
-import { describe, expect, test, vi } from "vitest";
-import { prisma } from "@formbricks/database";
-import { DatabaseError, ResourceNotFoundError } from "@formbricks/types/errors";
-import { getOrganizationsByUserId } from "./organization";
-
-vi.mock("@formbricks/database", () => ({
-  prisma: {
-    organization: {
-      findMany: vi.fn(),
-    },
-  },
-}));
-
-describe("Organization", () => {
-  describe("getOrganizationsByUserId", () => {
-    test("should return organizations when found", async () => {
-      const mockOrganizations = [
-        { id: "org1", name: "Organization 1" },
-        { id: "org2", name: "Organization 2" },
-      ];
-
-      vi.mocked(prisma.organization.findMany).mockResolvedValue(mockOrganizations as any);
-
-      const result = await getOrganizationsByUserId("user1");
-
-      expect(prisma.organization.findMany).toHaveBeenCalledWith({
-        where: {
-          memberships: {
-            some: {
-              userId: "user1",
-            },
-          },
-        },
-        select: {
-          id: true,
-          name: true,
-        },
-      });
-      expect(result).toEqual(mockOrganizations);
-    });
-
-    test("should throw ResourceNotFoundError when organizations is null", async () => {
-      vi.mocked(prisma.organization.findMany).mockResolvedValue(null as any);
-
-      await expect(getOrganizationsByUserId("user1")).rejects.toThrow(
-        new ResourceNotFoundError("Organizations by UserId", "user1")
-      );
-    });
-
-    test("should throw DatabaseError on Prisma error", async () => {
-      const prismaError = new Prisma.PrismaClientKnownRequestError("Database error", {
-        code: "P2002",
-        clientVersion: "5.0.0",
-      });
-
-      vi.mocked(prisma.organization.findMany).mockRejectedValue(prismaError);
-
-      await expect(getOrganizationsByUserId("user1")).rejects.toThrow(new DatabaseError("Database error"));
-    });
-
-    test("should re-throw unknown errors", async () => {
-      const unknownError = new Error("Unknown error");
-      vi.mocked(prisma.organization.findMany).mockRejectedValue(unknownError);
-
-      await expect(getOrganizationsByUserId("user1")).rejects.toThrow(unknownError);
-    });
-
-    test("should validate inputs correctly", async () => {
-      await expect(getOrganizationsByUserId("")).rejects.toThrow();
-    });
-
-    test("should validate userId input with invalid type", async () => {
-      await expect(getOrganizationsByUserId(123 as any)).rejects.toThrow();
-    });
-  });
-});

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

@@ -1,38 +0,0 @@
-import { validateInputs } from "@/lib/utils/validate";
-import { Prisma } from "@prisma/client";
-import { cache as reactCache } from "react";
-import { prisma } from "@formbricks/database";
-import { ZString } from "@formbricks/types/common";
-import { DatabaseError, ResourceNotFoundError } from "@formbricks/types/errors";
-
-export const getOrganizationsByUserId = reactCache(
-  async (userId: string): Promise<{ id: string; name: string }[]> => {
-    validateInputs([userId, ZString]);
-
-    try {
-      const organizations = await prisma.organization.findMany({
-        where: {
-          memberships: {
-            some: {
-              userId,
-            },
-          },
-        },
-        select: {
-          id: true,
-          name: true,
-        },
-      });
-      if (!organizations) {
-        throw new ResourceNotFoundError("Organizations by UserId", userId);
-      }
-      return organizations;
-    } catch (error) {
-      if (error instanceof Prisma.PrismaClientKnownRequestError) {
-        throw new DatabaseError(error.message);
-      }
-
-      throw error;
-    }
-  }
-);

apps/web/app/(app)/environments/[environmentId]/lib/project.test.ts

@@ -1,146 +0,0 @@
-import { Prisma } from "@prisma/client";
-import { describe, expect, test, vi } from "vitest";
-import { prisma } from "@formbricks/database";
-import { DatabaseError } from "@formbricks/types/errors";
-import { TMembership } from "@formbricks/types/memberships";
-import { getProjectsByUserId } from "./project";
-
-vi.mock("@formbricks/database", () => ({
-  prisma: {
-    project: {
-      findMany: vi.fn(),
-    },
-  },
-}));
-
-describe("Project", () => {
-  describe("getUserProjects", () => {
-    const mockAdminMembership: TMembership = {
-      role: "manager",
-      organizationId: "org1",
-      userId: "user1",
-      accepted: true,
-    };
-
-    const mockMemberMembership: TMembership = {
-      role: "member",
-      organizationId: "org1",
-      userId: "user1",
-      accepted: true,
-    };
-
-    test("should return projects for admin role", async () => {
-      const mockProjects = [
-        { id: "project1", name: "Project 1" },
-        { id: "project2", name: "Project 2" },
-      ];
-
-      vi.mocked(prisma.project.findMany).mockResolvedValue(mockProjects as any);
-
-      const result = await getProjectsByUserId("user1", mockAdminMembership);
-
-      expect(prisma.project.findMany).toHaveBeenCalledWith({
-        where: {
-          organizationId: "org1",
-        },
-        select: {
-          id: true,
-          name: true,
-        },
-      });
-      expect(result).toEqual(mockProjects);
-    });
-
-    test("should return projects for member role with team restrictions", async () => {
-      const mockProjects = [{ id: "project1", name: "Project 1" }];
-
-      vi.mocked(prisma.project.findMany).mockResolvedValue(mockProjects as any);
-
-      const result = await getProjectsByUserId("user1", mockMemberMembership);
-
-      expect(prisma.project.findMany).toHaveBeenCalledWith({
-        where: {
-          organizationId: "org1",
-          projectTeams: {
-            some: {
-              team: {
-                teamUsers: {
-                  some: {
-                    userId: "user1",
-                  },
-                },
-              },
-            },
-          },
-        },
-        select: {
-          id: true,
-          name: true,
-        },
-      });
-      expect(result).toEqual(mockProjects);
-    });
-
-    test("should return empty array when no projects found", async () => {
-      vi.mocked(prisma.project.findMany).mockResolvedValue([]);
-
-      const result = await getProjectsByUserId("user1", mockAdminMembership);
-
-      expect(result).toEqual([]);
-    });
-
-    test("should throw DatabaseError on Prisma error", async () => {
-      const prismaError = new Prisma.PrismaClientKnownRequestError("Database error", {
-        code: "P2002",
-        clientVersion: "5.0.0",
-      });
-
-      vi.mocked(prisma.project.findMany).mockRejectedValue(prismaError);
-
-      await expect(getProjectsByUserId("user1", mockAdminMembership)).rejects.toThrow(
-        new DatabaseError("Database error")
-      );
-    });
-
-    test("should re-throw unknown errors", async () => {
-      const unknownError = new Error("Unknown error");
-      vi.mocked(prisma.project.findMany).mockRejectedValue(unknownError);
-
-      await expect(getProjectsByUserId("user1", mockAdminMembership)).rejects.toThrow(unknownError);
-    });
-
-    test("should validate inputs correctly", async () => {
-      await expect(getProjectsByUserId(123 as any, mockAdminMembership)).rejects.toThrow();
-    });
-
-    test("should validate membership input correctly", async () => {
-      const invalidMembership = {} as TMembership;
-      await expect(getProjectsByUserId("user1", invalidMembership)).rejects.toThrow();
-    });
-
-    test("should handle owner role like manager", async () => {
-      const mockOwnerMembership: TMembership = {
-        role: "owner",
-        organizationId: "org1",
-        userId: "user1",
-        accepted: true,
-      };
-
-      const mockProjects = [{ id: "project1", name: "Project 1" }];
-      vi.mocked(prisma.project.findMany).mockResolvedValue(mockProjects as any);
-
-      const result = await getProjectsByUserId("user1", mockOwnerMembership);
-
-      expect(prisma.project.findMany).toHaveBeenCalledWith({
-        where: {
-          organizationId: "org1",
-        },
-        select: {
-          id: true,
-          name: true,
-        },
-      });
-      expect(result).toEqual(mockProjects);
-    });
-  });
-});

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

@@ -1,51 +0,0 @@
-import { validateInputs } from "@/lib/utils/validate";
-import { Prisma } from "@prisma/client";
-import { cache as reactCache } from "react";
-import { prisma } from "@formbricks/database";
-import { ZString } from "@formbricks/types/common";
-import { DatabaseError } from "@formbricks/types/errors";
-import { TMembership, ZMembership } from "@formbricks/types/memberships";
-
-export const getProjectsByUserId = reactCache(
-  async (userId: string, orgMembership: TMembership): Promise<{ id: string; name: string }[]> => {
-    validateInputs([userId, ZString], [orgMembership, ZMembership]);
-
-    let projectWhereClause: Prisma.ProjectWhereInput = {};
-
-    if (orgMembership.role === "member") {
-      projectWhereClause = {
-        projectTeams: {
-          some: {
-            team: {
-              teamUsers: {
-                some: {
-                  userId,
-                },
-              },
-            },
-          },
-        },
-      };
-    }
-
-    try {
-      const projects = await prisma.project.findMany({
-        where: {
-          organizationId: orgMembership.organizationId,
-          ...projectWhereClause,
-        },
-        select: {
-          id: true,
-          name: true,
-        },
-      });
-      return projects;
-    } catch (error) {
-      if (error instanceof Prisma.PrismaClientKnownRequestError) {
-        throw new DatabaseError(error.message);
-      }
-
-      throw error;
-    }
-  }
-);

apps/web/app/(app)/environments/[environmentId]/lib/utils.test.ts

@@ -1,82 +0,0 @@
-// apps/web/lib/utils/version.test.ts
-import { describe, expect, test } from "vitest";
-import { isNewerVersion, parseVersion } from "./utils";
-
-describe("Version utilities", () => {
-  describe("parseVersion", () => {
-    test("should parse valid semantic versions", () => {
-      expect(parseVersion("1.2.3")).toEqual({
-        major: 1,
-        minor: 2,
-        patch: 3,
-      });
-
-      expect(parseVersion("v2.0.0-beta.1")).toEqual({
-        major: 2,
-        minor: 0,
-        patch: 0,
-        prerelease: "beta.1",
-      });
-    });
-
-    test("should return null for invalid versions", () => {
-      expect(parseVersion("invalid")).toBeNull();
-      expect(parseVersion("1.2")).toEqual({
-        major: 1,
-        minor: 2,
-        patch: 0,
-      });
-    });
-  });
-
-  describe("isNewerVersion", () => {
-    test("should correctly identify newer versions", () => {
-      expect(isNewerVersion("1.0.0", "1.0.1")).toBe(true);
-      expect(isNewerVersion("1.0.0", "1.1.0")).toBe(true);
-      expect(isNewerVersion("1.0.0", "2.0.0")).toBe(true);
-
-      expect(isNewerVersion("1.0.1", "1.0.0")).toBe(false);
-      expect(isNewerVersion("1.0.0", "1.0.0")).toBe(false);
-    });
-
-    test("should handle version prefixes", () => {
-      expect(isNewerVersion("v1.0.0", "v1.0.1")).toBe(true);
-      expect(isNewerVersion("1.0.0", "v1.0.1")).toBe(true);
-    });
-
-    test("should handle prerelease versions", () => {
-      expect(isNewerVersion("1.0.0-beta.1", "1.0.0")).toBe(true);
-      expect(isNewerVersion("1.0.0", "1.0.0-beta.1")).toBe(false);
-    });
-
-    test("should correctly compare prerelease versions with numeric parts", () => {
-      // Test the main issue: rc.5 vs rc.10
-      expect(isNewerVersion("3.17.0-rc.5", "3.17.0-rc.10")).toBe(true);
-      expect(isNewerVersion("3.17.0-rc.10", "3.17.0-rc.5")).toBe(false);
-
-      // Test other numeric comparisons
-      expect(isNewerVersion("1.0.0-beta.1", "1.0.0-beta.2")).toBe(true);
-      expect(isNewerVersion("1.0.0-alpha.9", "1.0.0-alpha.10")).toBe(true);
-      expect(isNewerVersion("1.0.0-rc.99", "1.0.0-rc.100")).toBe(true);
-
-      // Test mixed alphanumeric comparisons
-      expect(isNewerVersion("1.0.0-alpha.1", "1.0.0-beta.1")).toBe(true);
-      expect(isNewerVersion("1.0.0-beta.1", "1.0.0-rc.1")).toBe(true);
-
-      // Test versions with different number of parts
-      expect(isNewerVersion("1.0.0-beta", "1.0.0-beta.1")).toBe(true);
-      expect(isNewerVersion("1.0.0-beta.1", "1.0.0-beta")).toBe(false);
-    });
-
-    test("should treat two-part versions as patch=0 (e.g., 3.16 == 3.16.0)", () => {
-      expect(isNewerVersion("3.16", "3.16.0")).toBe(false);
-      expect(isNewerVersion("3.16.0", "3.16")).toBe(false);
-      expect(isNewerVersion("3.16", "3.16.1")).toBe(true);
-    });
-
-    test("should ignore build metadata for precedence", () => {
-      expect(isNewerVersion("1.0.0+001", "1.0.0+002")).toBe(false);
-      expect(isNewerVersion("1.0.0", "1.0.0+exp.sha.5114f85")).toBe(false);
-    });
-  });
-});

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

@@ -1,93 +0,0 @@
-export interface VersionInfo {
-  major: number;
-  minor: number;
-  patch: number;
-  prerelease?: string;
-}
-
-export const parseVersion = (version: string): VersionInfo | null => {
-  // Remove 'v' prefix if present
-  const cleanVersion = version.replace(/^v/, "");
-
-  // Regex for semantic versioning with optional patch and prerelease (no build metadata)
-  // Supports both 2-part (1.2) and 3-part (1.2.3) versions
-  const semverRegex = /^(\d+)\.(\d+)(?:\.(\d+))?(?:-([0-9A-Za-z-]+(?:\.[0-9A-Za-z-]+)*))?$/;
-
-  const match = semverRegex.exec(cleanVersion);
-  if (!match) {
-    console.warn(`Invalid version format: ${version}`);
-    return null;
-  }
-
-  return {
-    major: parseInt(match[1], 10),
-    minor: parseInt(match[2], 10),
-    patch: match[3] ? parseInt(match[3], 10) : 0, // Default to 0 if patch is missing
-    prerelease: match[4],
-  };
-};
-
-const comparePrereleaseVersions = (current: string, latest: string): number => {
-  const currentParts = current.split(".");
-  const latestParts = latest.split(".");
-  const max = Math.max(currentParts.length, latestParts.length);
-
-  const isNumeric = (s: string) => /^\d+$/.test(s);
-
-  const comparePart = (a?: string, b?: string): number => {
-    if (!a && b) return 1; // latest has more segments → newer
-    if (a && !b) return -1; // current has more segments → older
-    if (!a && !b) return 0;
-
-    const aNum = isNumeric(a!);
-    const bNum = isNumeric(b!);
-    if (aNum && bNum) return parseInt(b!, 10) - parseInt(a!, 10);
-    return b!.localeCompare(a!);
-  };
-
-  for (let i = 0; i < max; i++) {
-    const diff = comparePart(currentParts[i], latestParts[i]);
-    if (diff !== 0) return diff;
-  }
-  return 0;
-};
-
-export const compareVersions = (current: string, latest: string): number => {
-  const currentVersion = parseVersion(current);
-  const latestVersion = parseVersion(latest);
-
-  // If either version is invalid, treat as different
-  if (!currentVersion || !latestVersion) {
-    return current === latest ? 0 : -1;
-  }
-
-  // Compare major.minor.patch
-  const majorDiff = latestVersion.major - currentVersion.major;
-  if (majorDiff !== 0) return majorDiff;
-
-  const minorDiff = latestVersion.minor - currentVersion.minor;
-  if (minorDiff !== 0) return minorDiff;
-
-  const patchDiff = latestVersion.patch - currentVersion.patch;
-  if (patchDiff !== 0) return patchDiff;
-
-  // Handle prerelease versions
-  if (!currentVersion.prerelease && !latestVersion.prerelease) {
-    return 0; // Both are stable, same version
-  }
-
-  if (!currentVersion.prerelease && latestVersion.prerelease) {
-    return -1; // Current is stable, latest is prerelease - current is "newer"
-  }
-
-  if (currentVersion.prerelease && !latestVersion.prerelease) {
-    return 1; // Current is prerelease, latest is stable - latest is newer
-  }
-
-  // Both are prerelease, compare properly
-  return comparePrereleaseVersions(currentVersion.prerelease!, latestVersion.prerelease!);
-};
-
-export const isNewerVersion = (current: string, latest: string): boolean => {
-  return compareVersions(current, latest) > 0;
-};