chore: consolidate CE enterprise trial license links to a single form URL

Co-authored-by: Dhruwang <dhruwangjariwala18@gmail.com>

.codex/environments/environment.toml

@@ -0,0 +1,9 @@
+# THIS IS AUTOGENERATED. DO NOT EDIT MANUALLY
+version = 1
+name = "formbricks"
+
+[setup]
+script = '''
+pnpm install
+pnpm dev:setup
+'''

.env.example

@@ -94,6 +94,12 @@ EMAIL_VERIFICATION_DISABLED=1
 # Password Reset. If you enable Password Reset functionality you have to setup SMTP-Settings, too.
 PASSWORD_RESET_DISABLED=1
 
+# Password reset token lifetime in minutes. Must be between 5 and 120 if set.
+# PASSWORD_RESET_TOKEN_LIFETIME_MINUTES=30
+
+# Development-only helper: log the password reset link to the server console instead of sending reset emails.
+# DEBUG_SHOW_RESET_LINK=1
+
 # Email login. Disable the ability for users to login with email.
 # EMAIL_AUTH_DISABLED=1
 
@@ -132,6 +138,31 @@ AZUREAD_CLIENT_ID=
 AZUREAD_CLIENT_SECRET=
 AZUREAD_TENANT_ID=
 
+# Configure Formbricks AI at the instance level
+# Set the provider used for AI features on this instance.
+# Accepted values for AI_PROVIDER: aws, gcp, azure
+# Set AI_MODEL to the provider-specific model or deployment name and configure the matching credentials below.
+# AI_PROVIDER=gcp
+# AI_MODEL=gemini-2.5-flash
+
+# Google Vertex AI credentials
+# AI_GCP_PROJECT=
+# AI_GCP_LOCATION=
+# AI_GCP_CREDENTIALS_JSON=
+# AI_GCP_APPLICATION_CREDENTIALS=
+
+# Amazon Bedrock credentials
+# AI_AWS_REGION=
+# AI_AWS_ACCESS_KEY_ID=
+# AI_AWS_SECRET_ACCESS_KEY=
+# AI_AWS_SESSION_TOKEN=
+
+# Azure AI / Microsoft Foundry credentials
+# AI_AZURE_BASE_URL=
+# AI_AZURE_RESOURCE_NAME=
+# AI_AZURE_API_KEY=
+# AI_AZURE_API_VERSION=v1
+
 # OpenID Connect (OIDC) configuration
 # OIDC_CLIENT_ID=
 # OIDC_CLIENT_SECRET=
@@ -150,6 +181,7 @@ NOTION_OAUTH_CLIENT_ID=
 NOTION_OAUTH_CLIENT_SECRET=
 
 # Stripe Billing Variables
+STRIPE_PUBLISHABLE_KEY=
 STRIPE_SECRET_KEY=
 STRIPE_WEBHOOK_SECRET=
 
@@ -184,8 +216,21 @@ ENTERPRISE_LICENSE_KEY=
 # Ignore Rate Limiting across the Formbricks app
 # RATE_LIMITING_DISABLED=1
 
-# OpenTelemetry URL for tracing
+# Disable telemetry reporting (usage stats sent to Formbricks). Ignored when an EE license is active.
-# OPENTELEMETRY_LISTENER_URL=http://localhost:4318/v1/traces
+# TELEMETRY_DISABLED=1
+
+# Allow webhook URLs to point to internal/private network addresses (e.g. localhost, 192.168.x.x)
+# WARNING: Only enable this if you understand the SSRF risks. Useful for self-hosted instances
+# that need to send webhooks to internal services.
+# DANGEROUSLY_ALLOW_WEBHOOK_INTERNAL_URLS=1
+
+# OpenTelemetry OTLP endpoint (base URL, exporters append /v1/traces and /v1/metrics)
+# OTEL_EXPORTER_OTLP_ENDPOINT=http://localhost:4318
+# OTEL_EXPORTER_OTLP_PROTOCOL=http/protobuf
+# OTEL_SERVICE_NAME=formbricks
+# OTEL_RESOURCE_ATTRIBUTES=deployment.environment=development
+# OTEL_TRACES_SAMPLER=parentbased_traceidratio
+# OTEL_TRACES_SAMPLER_ARG=1
 
 # Unsplash API Key
 UNSPLASH_ACCESS_KEY=
@@ -225,4 +270,4 @@ REDIS_URL=redis://localhost:6379
 
 
 # Lingo.dev API key for translation generation
-LINGODOTDEV_API_KEY=your_api_key_here
+LINGO_API_KEY=your_api_key_here

.github/actions/build-and-push-docker/action.yml

@@ -285,12 +285,14 @@ runs:
           encryption_key=${{ env.DUMMY_ENCRYPTION_KEY }}
           redis_url=${{ env.DUMMY_REDIS_URL }}
           sentry_auth_token=${{ env.SENTRY_AUTH_TOKEN }}
+          posthog_key=${{ env.POSTHOG_KEY }}
       env:
         DEPOT_PROJECT_TOKEN: ${{ env.DEPOT_PROJECT_TOKEN }}
         DUMMY_DATABASE_URL: ${{ env.DUMMY_DATABASE_URL }}
         DUMMY_ENCRYPTION_KEY: ${{ env.DUMMY_ENCRYPTION_KEY }}
         DUMMY_REDIS_URL: ${{ env.DUMMY_REDIS_URL }}
         SENTRY_AUTH_TOKEN: ${{ env.SENTRY_AUTH_TOKEN }}
+        POSTHOG_KEY: ${{ env.POSTHOG_KEY }}
 
     - name: Sign GHCR image (GHCR only)
       if: ${{ inputs.registry_type == 'ghcr' && (github.event_name == 'workflow_call' || github.event_name == 'release' || github.event_name == 'workflow_dispatch') }}

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

@@ -20,12 +20,12 @@ runs:
   using: "composite"
   steps:
     - name: Checkout repo
-      uses: actions/checkout@v3
+      uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
     - uses: ./.github/actions/dangerous-git-checkout
 
     - name: Cache Build
-      uses: actions/cache@v3
+      uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
       id: cache-build
       env:
         cache-name: prod-build
@@ -43,7 +43,7 @@ runs:
       shell: bash
 
     - name: Setup Node.js 20.x
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
       with:
         node-version: 20.x
       if: steps.cache-build.outputs.cache-hit != 'true'
@@ -53,7 +53,7 @@ runs:
       if: steps.cache-build.outputs.cache-hit != 'true'
 
     - name: Install dependencies
-      run: pnpm install --config.platform=linux --config.architecture=x64
+      run: pnpm install --frozen-lockfile --config.platform=linux --config.architecture=x64
       if: steps.cache-build.outputs.cache-hit != 'true'
       shell: bash
 

.github/actions/dangerous-git-checkout/action.yml

@@ -4,7 +4,7 @@ runs:
   using: "composite"
   steps:
     - name: Checkout repo
-      uses: actions/checkout@v3
+      uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
       with:
         ref: ${{ github.event.pull_request.head.sha }}
         fetch-depth: 2

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

@@ -92,3 +92,4 @@ jobs:
           DUMMY_ENCRYPTION_KEY: ${{ secrets.DUMMY_ENCRYPTION_KEY }}
           DUMMY_REDIS_URL: ${{ secrets.DUMMY_REDIS_URL }}
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          POSTHOG_KEY: ${{ secrets.POSTHOG_KEY }}

.github/workflows/chromatic.yml

@@ -49,7 +49,7 @@ jobs:
             ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
-        run: pnpm install --config.platform=linux --config.architecture=x64
+        run: pnpm install --frozen-lockfile --config.platform=linux --config.architecture=x64
 
       - name: Run Chromatic
         uses: chromaui/action@4c20b95e9d3209ecfdf9cd6aace6bbde71ba1694 # v13.3.4

.github/workflows/e2e.yml

@@ -57,7 +57,7 @@ jobs:
       - uses: ./.github/actions/dangerous-git-checkout
 
       - name: Setup Node.js 22.x
-        uses: actions/setup-node@1a4442cacd436585916779262731d5b162bc6ec7 # v3.8.2
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: 22.x
 
@@ -65,7 +65,7 @@ jobs:
         uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
 
       - name: Install dependencies
-        run: pnpm install --config.platform=linux --config.architecture=x64
+        run: pnpm install --frozen-lockfile --config.platform=linux --config.architecture=x64
         shell: bash
 
       - name: create .env
@@ -85,65 +85,48 @@ jobs:
           echo "S3_REGION=us-east-1" >> .env
           echo "S3_BUCKET_NAME=formbricks-e2e" >> .env
           echo "S3_ENDPOINT_URL=http://localhost:9000" >> .env
-          echo "S3_ACCESS_KEY=devminio" >> .env
+          echo "S3_ACCESS_KEY=devrustfs-service" >> .env
-          echo "S3_SECRET_KEY=devminio123" >> .env
+          echo "S3_SECRET_KEY=devrustfs-service123" >> .env
           echo "S3_FORCE_PATH_STYLE=1" >> .env
         shell: bash
 
-      - name: Install MinIO client (mc)
+      - name: Start RustFS Server
-        run: |
-          set -euo pipefail
-          MC_VERSION="RELEASE.2025-08-13T08-35-41Z"
-          MC_BASE="https://dl.min.io/client/mc/release/linux-amd64/archive"
-          MC_BIN="mc.${MC_VERSION}"
-          MC_SUM="${MC_BIN}.sha256sum"
-
-          curl -fsSL "${MC_BASE}/${MC_BIN}" -o "${MC_BIN}"
-          curl -fsSL "${MC_BASE}/${MC_SUM}" -o "${MC_SUM}"
-
-          sha256sum -c "${MC_SUM}"
-
-          chmod +x "${MC_BIN}"
-          sudo mv "${MC_BIN}" /usr/local/bin/mc
-
-      - name: Start MinIO Server
         run: |
           set -euo pipefail
 
-          # Start MinIO server in background
+          # Start RustFS server in background
           docker run -d \
-            --name minio-server \
+            --name rustfs-server \
             -p 9000:9000 \
             -p 9001:9001 \
-            -e MINIO_ROOT_USER=devminio \
+            -e RUSTFS_ACCESS_KEY=devrustfs \
-            -e MINIO_ROOT_PASSWORD=devminio123 \
+            -e RUSTFS_SECRET_KEY=devrustfs123 \
-            minio/minio:RELEASE.2025-09-07T16-13-09Z \
+            -e RUSTFS_ADDRESS=:9000 \
-            server /data --console-address :9001
+            -e RUSTFS_CONSOLE_ENABLE=true \
+            -e RUSTFS_CONSOLE_ADDRESS=:9001 \
+            rustfs/rustfs:1.0.0-alpha.93 \
+            /data
 
-          echo "MinIO server started"
+          echo "RustFS server started"
 
-      - name: Wait for MinIO and create S3 bucket
+      - name: Bootstrap RustFS bucket and browser upload CORS
         run: |
           set -euo pipefail
 
-          echo "Waiting for MinIO to be ready..."
+          docker run --rm \
-          ready=0
+            --network host \
-          for i in {1..60}; do
+            --entrypoint /bin/sh \
-            if curl -fsS http://localhost:9000/minio/health/live >/dev/null; then
+            -e RUSTFS_ENDPOINT_URL=http://127.0.0.1:9000 \
-              echo "MinIO is up after ${i} seconds"
+            -e RUSTFS_ADMIN_USER=devrustfs \
-              ready=1
+            -e RUSTFS_ADMIN_PASSWORD=devrustfs123 \
-              break
+            -e RUSTFS_SERVICE_USER=devrustfs-service \
-            fi
+            -e RUSTFS_SERVICE_PASSWORD=devrustfs-service123 \
-            sleep 1
+            -e RUSTFS_BUCKET_NAME=formbricks-e2e \
-          done
+            -e RUSTFS_POLICY_NAME=formbricks-e2e-policy \
-
+            -e RUSTFS_CORS_ALLOWED_ORIGINS=http://localhost:3000,http://127.0.0.1:3000 \
-          if [ "$ready" -ne 1 ]; then
+            -v "$PWD/docker/rustfs-init.sh:/tmp/rustfs-init.sh:ro" \
-            echo "::error::MinIO did not become ready within 60 seconds"
+            minio/mc@sha256:95b5f3f7969a5c5a9f3a700ba72d5c84172819e13385aaf916e237cf111ab868 \
-            exit 1
+            /tmp/rustfs-init.sh
-          fi
-
-          mc alias set local http://localhost:9000 devminio devminio123
-          mc mb --ignore-existing local/formbricks-e2e
 
       - name: Build App
         run: |
@@ -242,8 +225,14 @@ jobs:
         if: failure()
         with:
           name: app-logs
+          if-no-files-found: ignore
           path: app.log
 
       - name: Output App Logs
         if: failure()
-        run: cat app.log
+        run: |
+          if [ -f app.log ]; then
+            cat app.log
+          else
+            echo "app.log not found because the Run App step did not execute or failed before log creation."
+          fi

.github/workflows/lint.yml

@@ -21,7 +21,7 @@ jobs:
       - uses: ./.github/actions/dangerous-git-checkout
 
       - name: Setup Node.js 20.x
-        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: 20.x
 
@@ -29,7 +29,7 @@ jobs:
         uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
 
       - name: Install dependencies
-        run: pnpm install --config.platform=linux --config.architecture=x64
+        run: pnpm install --frozen-lockfile --config.platform=linux --config.architecture=x64
 
       - name: create .env
         run: cp .env.example .env

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

@@ -65,8 +65,8 @@ jobs:
           set -euo pipefail
 
           echo "Updating Chart.yaml with version: ${VERSION}"
-          yq -i ".version = \"${VERSION}\"" helm-chart/Chart.yaml
+          yq -i ".version = \"${VERSION}\"" charts/formbricks/Chart.yaml
-          yq -i ".appVersion = \"${VERSION}\"" helm-chart/Chart.yaml
+          yq -i ".appVersion = \"${VERSION}\"" charts/formbricks/Chart.yaml
 
           echo "✅ Successfully updated Chart.yaml"
 
@@ -77,7 +77,7 @@ jobs:
           set -euo pipefail
 
           echo "Packaging Helm chart version: ${VERSION}"
-          helm package ./helm-chart
+          helm package ./charts/formbricks
 
           echo "✅ Successfully packaged formbricks-${VERSION}.tgz"
 

.github/workflows/sonarqube.yml

@@ -9,6 +9,7 @@ on:
   merge_group:
 permissions:
   contents: read
+  pull-requests: read
 jobs:
   sonarqube:
     name: SonarQube
@@ -24,7 +25,7 @@ jobs:
           fetch-depth: 0 # Shallow clones should be disabled for a better relevancy of analysis
 
       - name: Setup Node.js 22.x
-        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: 22.x
 
@@ -32,7 +33,7 @@ jobs:
         uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
 
       - name: Install dependencies
-        run: pnpm install --config.platform=linux --config.architecture=x64
+        run: pnpm install --frozen-lockfile --config.platform=linux --config.architecture=x64
 
       - name: create .env
         run: cp .env.example .env
@@ -50,6 +51,9 @@ jobs:
           pnpm test:coverage
       - name: SonarQube Scan
         uses: SonarSource/sonarqube-scan-action@2500896589ef8f7247069a56136f8dc177c27ccf
+        with:
+          args: >
+            -Dsonar.verbose=true
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Needed to get PR information, if any
           SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

.github/workflows/test.yml

@@ -22,7 +22,7 @@ jobs:
       - uses: ./.github/actions/dangerous-git-checkout
 
       - name: Setup Node.js 20.x
-        uses: actions/setup-node@1a4442cacd436585916779262731d5b162bc6ec7 # v3.8.2
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: 20.x
 
@@ -30,7 +30,7 @@ jobs:
         uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
 
       - name: Install dependencies
-        run: pnpm install --config.platform=linux --config.architecture=x64
+        run: pnpm install --frozen-lockfile --config.platform=linux --config.architecture=x64
 
       - name: create .env
         run: cp .env.example .env

.github/workflows/translation-check.yml

@@ -2,23 +2,14 @@ name: Translation Validation
 
 permissions:
   contents: read
+  pull-requests: read
 
 on:
   pull_request:
     types: [opened, synchronize, reopened]
-    paths:
-      - "apps/web/**/*.ts"
-      - "apps/web/**/*.tsx"
-      - "apps/web/locales/**/*.json"
-      - "scan-translations.ts"
   push:
     branches:
       - main
-    paths:
-      - "apps/web/**/*.ts"
-      - "apps/web/**/*.tsx"
-      - "apps/web/locales/**/*.json"
-      - "scan-translations.ts"
 
 jobs:
   validate-translations:
@@ -32,32 +23,39 @@ jobs:
         with:
           egress-policy: audit
 
-      - name: Checkout repository
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
-      - name: Setup Node.js
+      - name: Check for relevant changes
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        id: changes
+        uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
         with:
-          node-version: 18
+          filters: |
+            translations:
+              - 'apps/web/**/*.ts'
+              - 'apps/web/**/*.tsx'
+              - 'apps/web/locales/**/*.json'
+              - 'packages/surveys/src/**/*.{ts,tsx}'
+              - 'packages/surveys/locales/**/*.json'
+              - 'packages/email/**/*.{ts,tsx}'
 
-      - name: Setup pnpm
+      - name: Setup Node.js 22.x
-        uses: pnpm/action-setup@a3252b78c470c02df07e9d59298aecedc3ccdd6d # v3.0.0
+        if: steps.changes.outputs.translations == 'true'
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
-          version: 9.15.9
+          node-version: 22.x
+
+      - name: Install pnpm
+        if: steps.changes.outputs.translations == 'true'
+        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
 
       - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+        if: steps.changes.outputs.translations == 'true'
+        run: pnpm install --frozen-lockfile --config.platform=linux --config.architecture=x64
 
       - name: Validate translation keys
-        run: |
+        if: steps.changes.outputs.translations == 'true'
-          echo ""
+        run: pnpm run scan-translations
-          echo "🔍 Validating translation keys..."
-          echo ""
-          pnpm run scan-translations
 
-      - name: Summary
+      - name: Skip (no translation-related changes)
-        if: success()
+        if: steps.changes.outputs.translations != 'true'
-        run: |
+        run: echo "No translation-related files changed — skipping validation."
-          echo ""
-          echo "✅ Translation validation completed successfully!"
-          echo ""

.gitignore

@@ -13,6 +13,7 @@
 **/.next/
 **/out/
 **/build
+**/next-env.d.ts
 
 # node
 **/dist/
@@ -44,7 +45,7 @@ yarn-error.log*
 .direnv
 
 # Playwright
-/test-results/
+**/test-results/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
@@ -63,3 +64,5 @@ packages/ios/FormbricksSDK/FormbricksSDK.xcodeproj/project.xcworkspace/xcuserdat
 .cursorrules
 i18n.cache
 stats.html
+# next-agents-md
+.next-docs/

.husky/post-checkout

@@ -1,2 +0,0 @@
-echo "{\"branchName\": \"$(git rev-parse --abbrev-ref HEAD)\"}" > ./branch.json
-prettier --write ./branch.json

.husky/pre-commit

@@ -1,40 +1,13 @@
-# Load environment variables from .env files
+#!/usr/bin/env sh
-if [ -f .env ]; then
-  set -a
-  . .env
-  set +a
-fi
 
-pnpm lint-staged
+if command -v pnpm >/dev/null 2>&1; then
-
+  pnpm lint-staged
-# Run Lingo.dev i18n workflow if LINGODOTDEV_API_KEY is set
+elif command -v npm >/dev/null 2>&1; then
-if [ -n "$LINGODOTDEV_API_KEY" ]; then
+  npm exec --yes pnpm@10.32.1 lint-staged
-  echo ""
+elif command -v corepack >/dev/null 2>&1; then
-  echo "🌍 Running Lingo.dev translation workflow..."
+  corepack pnpm lint-staged
-  echo ""
-  
-  # Run translation generation and validation
-  if pnpm run i18n; then
-    echo ""
-    echo "✅ Translation validation passed"
-    echo ""
-    # Add updated locale files to git
-    git add apps/web/locales/*.json
-  else
-    echo ""
-    echo "❌ Translation validation failed!"
-    echo ""
-    echo "Please fix the translation issues above before committing:"
-    echo "  • Add missing translation keys to your locale files"
-    echo "  • Remove unused translation keys"
-    echo ""
-    echo "Or run 'pnpm i18n' to see the detailed report"
-    echo ""
-    exit 1
-  fi
 else
-  echo ""
+  echo "Error: pnpm, npm, and corepack are unavailable in this Git hook PATH."
-  echo "⚠️  Skipping translation validation: LINGODOTDEV_API_KEY is not set"
+  echo "Install Node.js tooling or update your PATH, then retry the commit."
-  echo "   (This is expected for community contributors)"
+  exit 127
-  echo ""
 fi

README.md

@@ -127,34 +127,10 @@ Formbricks has a hosted cloud offering with a generous free plan to get you up a
 
 Formbricks is available Open-Source under AGPLv3 license. You can host Formbricks on your own servers using Docker without a subscription.
 
-If you opt for self-hosting Formbricks, here are a few options to consider:
-
 #### Docker
 
 To get started with self-hosting with Docker, take a look at our [self-hosting docs](https://formbricks.com/docs/self-hosting/deployment).
 
-#### Community-managed One Click Hosting
-
-##### Railway
-
-You can deploy Formbricks on [Railway](https://railway.app) using the button below.
-
-[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new/template/PPDzCd)
-
-##### RepoCloud
-
-Or you can also deploy Formbricks on [RepoCloud](https://repocloud.io) using the button below.
-
-[![Deploy on RepoCloud](https://d16t0pc4846x52.cloudfront.net/deploy.png)](https://repocloud.io/details/?app_id=254)
-
-##### Zeabur
-
-Or you can also deploy Formbricks on [Zeabur](https://zeabur.com) using the button below.
-
-[![Deploy to Zeabur](https://zeabur.com/button.svg)](https://zeabur.com/templates/G4TUJL)
-
-<a id="development"></a>
-
 ## 👨‍💻 Development
 
 ### Prerequisites
@@ -247,4 +223,4 @@ We currently do not offer Formbricks white-labeled. That means that we don't sel
 
 The Enterprise Edition allows us to fund the development of Formbricks sustainably. It guarantees that the free and open-source surveying infrastructure we're building will be around for decades to come.
 
-<p align="right"><a href="#top">🔼 Back to top</a></p>
+<a id="readme-de"></a>

apps/storybook/package.json

@@ -10,25 +10,20 @@
     "build-storybook": "storybook build",
     "clean": "rimraf .turbo node_modules dist storybook-static"
   },
-  "dependencies": {
-    "@formbricks/survey-ui": "workspace:*"
-  },
   "devDependencies": {
-    "@chromatic-com/storybook": "^5.0.0",
+    "@chromatic-com/storybook": "5.0.2",
-    "@storybook/addon-a11y": "10.1.11",
+    "@storybook/addon-a11y": "10.3.5",
-    "@storybook/addon-links": "10.1.11",
+    "@storybook/addon-docs": "10.3.5",
-    "@storybook/addon-onboarding": "10.1.11",
+    "@storybook/addon-links": "10.3.5",
-    "@storybook/react-vite": "10.1.11",
+    "@storybook/addon-onboarding": "10.3.5",
-    "@typescript-eslint/eslint-plugin": "8.53.0",
+    "@storybook/react-vite": "10.3.5",
-    "@tailwindcss/vite": "4.1.18",
+    "@tailwindcss/vite": "4.2.4",
-    "@typescript-eslint/parser": "8.53.0",
+    "@typescript-eslint/eslint-plugin": "8.57.2",
-    "@vitejs/plugin-react": "5.1.2",
+    "@typescript-eslint/parser": "8.57.2",
-    "esbuild": "0.27.2",
+    "@vitejs/plugin-react": "5.1.4",
     "eslint-plugin-react-refresh": "0.4.26",
-    "eslint-plugin-storybook": "10.1.11",
+    "eslint-plugin-storybook": "10.3.5",
-    "prop-types": "15.8.1",
+    "storybook": "10.3.5",
-    "storybook": "10.1.11",
+    "vite": "7.3.2"
-    "vite": "7.3.1",
-    "@storybook/addon-docs": "10.1.11"
   }
 }

apps/web/.eslintrc.js

@@ -1,20 +1,4 @@
 module.exports = {
   extends: ["@formbricks/eslint-config/legacy-next.js"],
   ignorePatterns: ["**/package.json", "**/tsconfig.json"],
-  overrides: [
-    {
-      files: ["locales/*.json"],
-      plugins: ["i18n-json"],
-      rules: {
-        "i18n-json/identical-keys": [
-          "error",
-          {
-            filePath: require("path").join(__dirname, "locales", "en-US.json"),
-            checkExtraKeys: false,
-            checkMissingKeys: true,
-          },
-        ],
-      },
-    },
-  ],
 };

apps/web/.prettierrc.js

@@ -0,0 +1,6 @@
+const baseConfig = require("../../.prettierrc.js");
+
+module.exports = {
+  ...baseConfig,
+  tailwindConfig: "./tailwind.config.js",
+};

apps/web/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:22-alpine3.22 AS base
+FROM node:24-alpine3.23 AS base
 
 #
 ## step 1: Prune monorepo
@@ -18,9 +18,9 @@ FROM node:22-alpine3.22 AS base
 FROM base AS installer
 
 # Enable corepack and prepare pnpm
-RUN npm install --ignore-scripts -g corepack@latest 
+RUN npm install --ignore-scripts -g corepack@latest
 RUN corepack enable
-RUN corepack prepare pnpm@9.15.9 --activate
+RUN corepack prepare pnpm@10.28.2 --activate
 
 # Install necessary build tools and compilers
 RUN apk update && apk add --no-cache cmake g++ gcc jq make openssl-dev python3
@@ -67,22 +67,18 @@ RUN --mount=type=secret,id=database_url \
     --mount=type=secret,id=encryption_key \
     --mount=type=secret,id=redis_url \
     --mount=type=secret,id=sentry_auth_token \
+    --mount=type=secret,id=posthog_key \
     /tmp/read-secrets.sh pnpm build --filter=@formbricks/web...
 
-# Extract Prisma version
-RUN jq -r '.devDependencies.prisma' packages/database/package.json > /prisma_version.txt
-
 #
 ## step 3: setup production runner
 #
 FROM base AS runner
 
-RUN npm install --ignore-scripts -g corepack@latest && \
+# Upgrade Alpine system packages to pick up security patches, update npm to latest, then create user
-    corepack enable
+# Note: npm's bundled tar has a known vulnerability but npm is only used during build, not at runtime
-
+RUN apk update && apk upgrade --no-cache \
-RUN apk add --no-cache curl \
+    && npm install --ignore-scripts -g npm@latest \
-    && apk add --no-cache supercronic \
-    # && addgroup --system --gid 1001 nodejs \
     && addgroup -S nextjs \
     && adduser -S -u 1001 -G nextjs nextjs
 
@@ -107,26 +103,30 @@ RUN chown -R nextjs:nextjs ./apps/web/public && chmod -R 755 ./apps/web/public
 # Create packages/database directory structure with proper ownership for runtime migrations
 RUN mkdir -p ./packages/database/migrations && chown -R nextjs:nextjs ./packages/database
 
+COPY --from=installer /app/packages/database/package.json ./packages/database/package.json
+RUN chown nextjs:nextjs ./packages/database/package.json && chmod 644 ./packages/database/package.json
+
 COPY --from=installer /app/packages/database/schema.prisma ./packages/database/schema.prisma
 RUN chown nextjs:nextjs ./packages/database/schema.prisma && chmod 644 ./packages/database/schema.prisma
 
 COPY --from=installer /app/packages/database/dist ./packages/database/dist
 RUN chown -R nextjs:nextjs ./packages/database/dist && chmod -R 755 ./packages/database/dist
 
+# Copy prisma client packages
 COPY --from=installer /app/node_modules/@prisma/client ./node_modules/@prisma/client
 RUN chown -R nextjs:nextjs ./node_modules/@prisma/client && chmod -R 755 ./node_modules/@prisma/client
 
 COPY --from=installer /app/node_modules/.prisma ./node_modules/.prisma
 RUN chown -R nextjs:nextjs ./node_modules/.prisma && chmod -R 755 ./node_modules/.prisma
 
-COPY --from=installer /prisma_version.txt .
-RUN chown nextjs:nextjs ./prisma_version.txt && chmod 644 ./prisma_version.txt
-
 COPY --from=installer /app/node_modules/@paralleldrive/cuid2 ./node_modules/@paralleldrive/cuid2
 RUN chmod -R 755 ./node_modules/@paralleldrive/cuid2
 
-COPY --from=installer /app/node_modules/uuid ./node_modules/uuid
+# Runtime migrations import uuid v7 from the database package, so copy the
-RUN chmod -R 755 ./node_modules/uuid
+# database package's resolved install instead of the repo-root hoisted version.
+COPY --from=installer /app/packages/database/node_modules/uuid ./node_modules/uuid
+RUN chmod -R 755 ./node_modules/uuid \
+    && node --input-type=module -e "import('uuid').then((module) => { if (typeof module.v7 !== 'function') throw new Error('uuid v7 missing in runtime image'); })"
 
 COPY --from=installer /app/node_modules/@noble/hashes ./node_modules/@noble/hashes
 RUN chmod -R 755 ./node_modules/@noble/hashes
@@ -134,7 +134,25 @@ RUN chmod -R 755 ./node_modules/@noble/hashes
 COPY --from=installer /app/node_modules/zod ./node_modules/zod
 RUN chmod -R 755 ./node_modules/zod
 
-RUN npm install -g prisma@6
+# Pino loads transport code in worker threads via dynamic require().
+# Next.js file tracing only traces static imports, missing runtime-loaded files
+# (e.g. pino/lib/transport-stream.js, transport targets).
+# Copy the full packages to ensure all runtime files are available.
+COPY --from=installer /app/node_modules/pino ./node_modules/pino
+RUN chmod -R 755 ./node_modules/pino
+
+COPY --from=installer /app/node_modules/pino-opentelemetry-transport ./node_modules/pino-opentelemetry-transport
+RUN chmod -R 755 ./node_modules/pino-opentelemetry-transport
+
+COPY --from=installer /app/node_modules/pino-abstract-transport ./node_modules/pino-abstract-transport
+RUN chmod -R 755 ./node_modules/pino-abstract-transport
+
+COPY --from=installer /app/node_modules/otlp-logger ./node_modules/otlp-logger
+RUN chmod -R 755 ./node_modules/otlp-logger
+
+# Install prisma CLI globally for database migrations and fix permissions for nextjs user
+RUN npm install --ignore-scripts -g prisma@6 \
+    && chown -R nextjs:nextjs /usr/local/lib/node_modules/prisma
 
 # Create a startup script to handle the conditional logic
 COPY --from=installer /app/apps/web/scripts/docker/next-start.sh /home/nextjs/start.sh
@@ -144,13 +162,11 @@ EXPOSE 3000
 ENV HOSTNAME="0.0.0.0"
 USER nextjs
 
-# Prepare pnpm as the nextjs user to ensure it's available at runtime
 # Prepare volumes for uploads and SAML connections
-RUN corepack prepare pnpm@9.15.9 --activate && \
+RUN mkdir -p /home/nextjs/apps/web/uploads/ && \
-    mkdir -p /home/nextjs/apps/web/uploads/ && \
     mkdir -p /home/nextjs/apps/web/saml-connection
 
 VOLUME /home/nextjs/apps/web/uploads/
 VOLUME /home/nextjs/apps/web/saml-connection
 
-CMD ["/home/nextjs/start.sh"]
+CMD ["/home/nextjs/start.sh"]

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

@@ -69,7 +69,7 @@ export const ConnectWithFormbricks = ({
           ) : (
             <div className="flex animate-pulse flex-col items-center space-y-4">
               <span className="relative flex h-10 w-10">
-                <span className="animate-ping-slow absolute inline-flex h-full w-full rounded-full bg-slate-400 opacity-75"></span>
+                <span className="absolute inline-flex h-full w-full animate-ping-slow rounded-full bg-slate-400 opacity-75"></span>
                 <span className="relative inline-flex h-10 w-10 rounded-full bg-slate-500"></span>
               </span>
               <p className="pt-4 text-sm font-medium text-slate-600">

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

@@ -1,5 +1,6 @@
 import { XIcon } from "lucide-react";
 import Link from "next/link";
+import { ResourceNotFoundError } from "@formbricks/types/errors";
 import { ConnectWithFormbricks } from "@/app/(app)/(onboarding)/environments/[environmentId]/connect/components/ConnectWithFormbricks";
 import { getEnvironment } from "@/lib/environment/service";
 import { getPublicDomain } from "@/lib/getPublicUrl";
@@ -20,12 +21,12 @@ const Page = async (props: ConnectPageProps) => {
   const environment = await getEnvironment(params.environmentId);
 
   if (!environment) {
-    throw new Error(t("common.environment_not_found"));
+    throw new ResourceNotFoundError(t("common.environment"), params.environmentId);
   }
 
   const project = await getProjectByEnvironmentId(environment.id);
   if (!project) {
-    throw new Error(t("common.workspace_not_found"));
+    throw new ResourceNotFoundError(t("common.workspace"), null);
   }
 
   const channel = project.config.channel || null;
@@ -46,7 +47,7 @@ const Page = async (props: ConnectPageProps) => {
         channel={channel}
       />
       <Button
-        className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+        className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
         variant="ghost"
         asChild>
         <Link href={`/environments/${environment.id}`}>

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

@@ -4,7 +4,10 @@ import { AuthorizationError } from "@formbricks/types/errors";
 import { hasUserEnvironmentAccess } from "@/lib/environment/auth";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 
-const OnboardingLayout = async (props) => {
+const OnboardingLayout = async (props: {
+  params: Promise<{ environmentId: string }>;
+  children: React.ReactNode;
+}) => {
   const params = await props.params;
 
   const { children } = props;

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

@@ -2,6 +2,7 @@ import "@testing-library/jest-dom/vitest";
 import { cleanup } from "@testing-library/react";
 import { afterEach, describe, expect, test } from "vitest";
 import { TProject } from "@formbricks/types/project";
+import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/constants";
 import { TXMTemplate } from "@formbricks/types/templates";
 import { replacePresetPlaceholders } from "./utils";
 
@@ -25,7 +26,7 @@ const mockProject: TProject = {
   },
   placement: "bottomRight",
   clickOutsideClose: true,
-  darkOverlay: false,
+  overlay: "none",
   environments: [],
   languages: [],
   logo: null,
@@ -39,13 +40,13 @@ const mockTemplate: TXMTemplate = {
       elements: [
         {
           id: "q1",
-          type: "openText" as const,
+          type: "openText" as TSurveyElementTypeEnum.OpenText,
           inputType: "text" as const,
           headline: { default: "$[projectName] Question" },
           subheader: { default: "" },
           required: false,
           placeholder: { default: "" },
-          charLimit: 1000,
+          charLimit: { enabled: true, max: 1000 },
         },
       ],
     },

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

@@ -14,7 +14,7 @@ describe("xm-templates", () => {
   });
 
   test("getXMSurveyDefault returns default survey template", () => {
-    const tMock = vi.fn((key) => key) as TFunction;
+    const tMock = vi.fn((key: string) => key) as unknown as TFunction;
     const result = getXMSurveyDefault(tMock);
 
     expect(result).toEqual({
@@ -29,7 +29,7 @@ describe("xm-templates", () => {
   });
 
   test("getXMTemplates returns all templates", () => {
-    const tMock = vi.fn((key) => key) as TFunction;
+    const tMock = vi.fn((key: string) => key) as unknown as TFunction;
     const result = getXMTemplates(tMock);
 
     expect(result).toHaveLength(6);
@@ -44,7 +44,7 @@ describe("xm-templates", () => {
   test("getXMTemplates handles errors gracefully", async () => {
     const tMock = vi.fn(() => {
       throw new Error("Test error");
-    }) as TFunction;
+    }) as unknown as TFunction;
 
     const result = getXMTemplates(tMock);
 

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

@@ -1,6 +1,7 @@
 import { XIcon } from "lucide-react";
 import { getServerSession } from "next-auth";
 import Link from "next/link";
+import { AuthenticationError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { XMTemplateList } from "@/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/components/XMTemplateList";
 import { getEnvironment } from "@/lib/environment/service";
 import { getProjectByEnvironmentId, getUserProjects } from "@/lib/project/service";
@@ -23,22 +24,22 @@ const Page = async (props: XMTemplatePageProps) => {
   const environment = await getEnvironment(params.environmentId);
   const t = await getTranslate();
   if (!session) {
-    throw new Error(t("common.session_not_found"));
+    throw new AuthenticationError(t("common.not_authenticated"));
   }
 
   const user = await getUser(session.user.id);
   if (!user) {
-    throw new Error(t("common.user_not_found"));
+    throw new AuthenticationError(t("common.not_authenticated"));
   }
   if (!environment) {
-    throw new Error(t("common.environment_not_found"));
+    throw new ResourceNotFoundError(t("common.environment"), params.environmentId);
   }
 
   const organizationId = await getOrganizationIdFromEnvironmentId(environment.id);
 
   const project = await getProjectByEnvironmentId(environment.id);
   if (!project) {
-    throw new Error(t("common.workspace_not_found"));
+    throw new ResourceNotFoundError(t("common.workspace"), null);
   }
 
   const projects = await getUserProjects(session.user.id, organizationId);
@@ -49,7 +50,7 @@ const Page = async (props: XMTemplatePageProps) => {
       <XMTemplateList project={project} user={user} environmentId={environment.id} />
       {projects.length >= 2 && (
         <Button
-          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
           variant="ghost"
           asChild>
           <Link href={`/environments/${environment.id}/surveys`}>

apps/web/app/(app)/(onboarding)/lib/onboarding.test.ts

@@ -1,4 +1,4 @@
-import { Prisma } from "@prisma/client";
+import { PrismaClientKnownRequestError } from "@prisma/client/runtime/library";
 import { beforeEach, describe, expect, test, vi } from "vitest";
 import { prisma } from "@formbricks/database";
 import { DatabaseError } from "@formbricks/types/errors";
@@ -19,8 +19,8 @@ describe("getTeamsByOrganizationId", () => {
 
   test("returns mapped teams", async () => {
     const mockTeams = [
-      { id: "t1", name: "Team 1" },
+      { id: "t1", name: "Team 1", createdAt: new Date(), updatedAt: new Date(), organizationId: "org1" },
-      { id: "t2", name: "Team 2" },
+      { id: "t2", name: "Team 2", createdAt: new Date(), updatedAt: new Date(), organizationId: "org1" },
     ];
     vi.mocked(prisma.team.findMany).mockResolvedValueOnce(mockTeams);
     const result = await getTeamsByOrganizationId("org1");
@@ -32,7 +32,7 @@ describe("getTeamsByOrganizationId", () => {
 
   test("throws DatabaseError on Prisma error", async () => {
     vi.mocked(prisma.team.findMany).mockRejectedValueOnce(
-      new Prisma.PrismaClientKnownRequestError("fail", { code: "P2002", clientVersion: "1.0.0" })
+      new PrismaClientKnownRequestError("fail", { code: "P2002", clientVersion: "1.0.0" })
     );
     await expect(getTeamsByOrganizationId("org1")).rejects.toThrow(DatabaseError);
   });

apps/web/app/(app)/(onboarding)/lib/onboarding.ts

@@ -1,6 +1,6 @@
 "use server";
 
-import { Prisma } from "@prisma/client";
+import { PrismaClientKnownRequestError } from "@prisma/client/runtime/library";
 import { cache as reactCache } from "react";
 import { prisma } from "@formbricks/database";
 import { ZId } from "@formbricks/types/common";
@@ -22,14 +22,12 @@ export const getTeamsByOrganizationId = reactCache(
         },
       });
 
-      const projectTeams = teams.map((team) => ({
+      return teams.map((team: TOrganizationTeam) => ({
         id: team.id,
         name: team.name,
       }));
-
-      return projectTeams;
     } catch (error) {
-      if (error instanceof Prisma.PrismaClientKnownRequestError) {
+      if (error instanceof PrismaClientKnownRequestError) {
         throw new DatabaseError(error.message);
       }
 

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

@@ -42,7 +42,7 @@ export const LandingSidebar = ({ user, organization }: LandingSidebarProps) => {
   return (
     <aside
       className={cn(
-        "w-sidebar-collapsed 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"
+        "z-40 flex w-sidebar-collapsed flex-col justify-between rounded-r-xl border-r border-slate-200 bg-white pt-3 shadow-md transition-all duration-100"
       )}>
       <Image src={FBLogo} width={160} height={30} alt={t("environments.formbricks_logo")} />
 

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

@@ -5,7 +5,10 @@ import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
 import { getUserProjects } from "@/lib/project/service";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 
-const LandingLayout = async (props) => {
+const LandingLayout = async (props: {
+  params: Promise<{ organizationId: string }>;
+  children: React.ReactNode;
+}) => {
   const params = await props.params;
 
   const { children } = props;

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

@@ -10,7 +10,7 @@ import { getIsMultiOrgEnabled } from "@/modules/ee/license-check/lib/utils";
 import { getOrganizationAuth } from "@/modules/organization/lib/utils";
 import { Header } from "@/modules/ui/components/header";
 
-const Page = async (props) => {
+const Page = async (props: { params: Promise<{ organizationId: string }> }) => {
   const params = await props.params;
   const t = await getTranslate();
 
@@ -26,7 +26,8 @@ const Page = async (props) => {
   const isMultiOrgEnabled = await getIsMultiOrgEnabled();
 
   const membership = await getMembershipByUserIdOrganizationId(session.user.id, organization.id);
-  const { isMember } = getAccessFlags(membership?.role);
+  const { isMember, isBilling } = getAccessFlags(membership?.role);
+  const isMembershipPending = membership?.role === undefined;
 
   return (
     <div className="flex min-h-full min-w-full flex-row">
@@ -45,6 +46,8 @@ const Page = async (props) => {
               isOwnerOrManager={false}
               isAccessControlAllowed={false}
               isMember={isMember}
+              isBilling={isBilling}
+              isMembershipPending={isMembershipPending}
               environments={[]}
             />
           </div>

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

@@ -1,6 +1,6 @@
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
-import { AuthorizationError } from "@formbricks/types/errors";
+import { AuthenticationError, AuthorizationError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { canUserAccessOrganization } from "@/lib/organization/auth";
 import { getOrganization } from "@/lib/organization/service";
 import { getUser } from "@/lib/user/service";
@@ -8,7 +8,10 @@ import { getTranslate } from "@/lingodotdev/server";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { ToasterClient } from "@/modules/ui/components/toaster-client";
 
-const ProjectOnboardingLayout = async (props) => {
+const ProjectOnboardingLayout = async (props: {
+  params: Promise<{ organizationId: string }>;
+  children: React.ReactNode;
+}) => {
   const params = await props.params;
 
   const { children } = props;
@@ -22,7 +25,7 @@ const ProjectOnboardingLayout = async (props) => {
 
   const user = await getUser(session.user.id);
   if (!user) {
-    throw new Error(t("common.user_not_found"));
+    throw new AuthenticationError(t("common.not_authenticated"));
   }
 
   const isAuthorized = await canUserAccessOrganization(session.user.id, params.organizationId);
@@ -33,7 +36,7 @@ const ProjectOnboardingLayout = async (props) => {
 
   const organization = await getOrganization(params.organizationId);
   if (!organization) {
-    throw new Error(t("common.organization_not_found"));
+    throw new ResourceNotFoundError(t("common.organization"), params.organizationId);
   }
 
   return (

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

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

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

@@ -1,5 +1,6 @@
 import { getServerSession } from "next-auth";
 import { notFound, redirect } from "next/navigation";
+import { ResourceNotFoundError } from "@formbricks/types/errors";
 import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
 import { getAccessFlags } from "@/lib/membership/utils";
 import { getOrganization } from "@/lib/organization/service";
@@ -8,7 +9,10 @@ import { getTranslate } from "@/lingodotdev/server";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { getOrganizationProjectsLimit } from "@/modules/ee/license-check/lib/utils";
 
-const OnboardingLayout = async (props) => {
+const OnboardingLayout = async (props: {
+  params: Promise<{ organizationId: string }>;
+  children: React.ReactNode;
+}) => {
   const params = await props.params;
 
   const { children } = props;
@@ -25,11 +29,13 @@ const OnboardingLayout = async (props) => {
 
   const organization = await getOrganization(params.organizationId);
   if (!organization) {
-    throw new Error(t("common.organization_not_found"));
+    throw new ResourceNotFoundError(t("common.organization"), params.organizationId);
   }
 
-  const organizationProjectsLimit = await getOrganizationProjectsLimit(organization.billing.limits);
+  const [organizationProjectsLimit, organizationProjectsCount] = await Promise.all([
-  const organizationProjectsCount = await getOrganizationProjectsCount(organization.id);
+    getOrganizationProjectsLimit(organization.id),
+    getOrganizationProjectsCount(organization.id),
+  ]);
 
   if (organizationProjectsCount >= organizationProjectsLimit) {
     return redirect(`/`);

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

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

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/workspaces/new/plan/components/select-plan-onboarding.tsx

@@ -0,0 +1,22 @@
+import { getTranslate } from "@/lingodotdev/server";
+import { SelectPlanCard } from "@/modules/ee/billing/components/select-plan-card";
+import { Header } from "@/modules/ui/components/header";
+
+interface SelectPlanOnboardingProps {
+  organizationId: string;
+}
+
+export const SelectPlanOnboarding = async ({ organizationId }: SelectPlanOnboardingProps) => {
+  const t = await getTranslate();
+  const nextUrl = `/organizations/${organizationId}/workspaces/new/mode`;
+
+  return (
+    <div className="flex min-h-full min-w-full flex-col items-center justify-center space-y-8">
+      <Header
+        title={t("environments.settings.billing.select_plan_header_title")}
+        subtitle={t("environments.settings.billing.select_plan_header_subtitle")}
+      />
+      <SelectPlanCard nextUrl={nextUrl} organizationId={organizationId} />
+    </div>
+  );
+};

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

@@ -0,0 +1,42 @@
+import { redirect } from "next/navigation";
+import { TCloudBillingPlan } from "@formbricks/types/organizations";
+import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
+import { getOrganizationBillingWithReadThroughSync } from "@/modules/ee/billing/lib/organization-billing";
+import { getOrganizationAuth } from "@/modules/organization/lib/utils";
+import { SelectPlanOnboarding } from "./components/select-plan-onboarding";
+
+const PAID_PLANS = new Set<TCloudBillingPlan>(["pro", "scale", "custom"]);
+
+interface PlanPageProps {
+  params: Promise<{
+    organizationId: string;
+  }>;
+}
+
+const Page = async (props: PlanPageProps) => {
+  const params = await props.params;
+
+  if (!IS_FORMBRICKS_CLOUD) {
+    return redirect(`/organizations/${params.organizationId}/workspaces/new/mode`);
+  }
+
+  const { session } = await getOrganizationAuth(params.organizationId);
+
+  if (!session?.user) {
+    return redirect(`/auth/login`);
+  }
+
+  // Users with an existing paid/trial subscription should not be shown the trial page.
+  // Redirect them directly to the next onboarding step.
+  const billing = await getOrganizationBillingWithReadThroughSync(params.organizationId);
+  const currentPlan = billing?.stripe?.plan;
+  const hasExistingSubscription = currentPlan !== undefined && PAID_PLANS.has(currentPlan);
+
+  if (hasExistingSubscription) {
+    return redirect(`/organizations/${params.organizationId}/workspaces/new/mode`);
+  }
+
+  return <SelectPlanOnboarding organizationId={params.organizationId} />;
+};
+
+export default Page;

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

@@ -3,7 +3,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
@@ -17,6 +17,7 @@ import {
 import { createProjectAction } from "@/app/(app)/environments/[environmentId]/actions";
 import { previewSurvey } from "@/app/lib/templates";
 import { FORMBRICKS_SURVEYS_FILTERS_KEY_LS } from "@/lib/localStorage";
+import { buildStylingFromBrandColor } from "@/lib/styling/constants";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { TOrganizationTeam } from "@/modules/ee/teams/project-teams/types/team";
 import { CreateTeamModal } from "@/modules/ee/teams/team-list/components/create-team-modal";
@@ -64,10 +65,17 @@ export const ProjectSettings = ({
   const { t } = useTranslation();
   const addProject = async (data: TProjectUpdateInput) => {
     try {
+      // Build the full styling from the chosen brand color so all derived
+      // colours (question, button, input, option, progress, etc.) are persisted.
+      // Without this, only brandColor is saved and the look-and-feel page falls
+      // back to STYLE_DEFAULTS computed from the default brand (#64748b).
+      const fullStyling = buildStylingFromBrandColor(data.styling?.brandColor?.light);
+
       const createProjectResponse = await createProjectAction({
         organizationId,
         data: {
           ...data,
+          styling: fullStyling,
           config: { channel, industry },
           teamIds: data.teamIds,
         },
@@ -112,6 +120,7 @@ export const ProjectSettings = ({
   const projectName = form.watch("name");
   const logoUrl = form.watch("logo.url");
   const brandColor = form.watch("styling.brandColor.light") ?? defaultBrandColor;
+  const previewStyling = useMemo(() => buildStylingFromBrandColor(brandColor), [brandColor]);
   const { isSubmitting } = form.formState;
 
   const organizationTeamsOptions = organizationTeams.map((team) => ({
@@ -219,29 +228,27 @@ export const ProjectSettings = ({
         </FormProvider>
       </div>
 
-      <div className="relative flex h-[30rem] w-1/2 flex-col items-center justify-center space-y-2 rounded-lg border bg-slate-200 shadow">
+      <div className="relative flex w-1/2 flex-col items-center justify-center space-y-2 rounded-lg border bg-slate-200 p-6 shadow">
         {logoUrl && (
           <Image
             src={logoUrl}
             alt="Logo"
             width={256}
             height={56}
-            className="absolute top-2 left-2 -mb-6 h-20 w-auto max-w-64 rounded-lg border object-contain p-1"
+            className="absolute left-2 top-2 -mb-6 h-20 w-auto max-w-64 rounded-lg border object-contain p-1"
           />
         )}
         <p className="text-sm text-slate-400">{t("common.preview")}</p>
-        <div className="z-0 h-3/4 w-3/4">
+        <SurveyInline
-          <SurveyInline
+          appUrl={publicDomain}
-            appUrl={publicDomain}
+          isPreviewMode={true}
-            isPreviewMode={true}
+          survey={previewSurvey(projectName || t("common.my_product"), t)}
-            survey={previewSurvey(projectName || "my Product", t)}
+          styling={previewStyling}
-            styling={{ brandColor: { light: brandColor } }}
+          isBrandingEnabled={false}
-            isBrandingEnabled={false}
+          languageCode="default"
-            languageCode="default"
+          onFileUpload={async (file) => file.name}
-            onFileUpload={async (file) => file.name}
+          autoFocus={false}
-            autoFocus={false}
+        />
-          />
-        </div>
       </div>
       <CreateTeamModal
         open={createTeamModalOpen}

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

@@ -1,6 +1,7 @@
 import { XIcon } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
+import { ResourceNotFoundError } from "@formbricks/types/errors";
 import { TProjectConfigChannel, TProjectConfigIndustry, TProjectMode } from "@formbricks/types/project";
 import { getTeamsByOrganizationId } from "@/app/(app)/(onboarding)/lib/onboarding";
 import { ProjectSettings } from "@/app/(app)/(onboarding)/organizations/[organizationId]/workspaces/new/settings/components/ProjectSettings";
@@ -42,10 +43,10 @@ const Page = async (props: ProjectSettingsPageProps) => {
 
   const organizationTeams = await getTeamsByOrganizationId(params.organizationId);
 
-  const isAccessControlAllowed = await getAccessControlPermission(organization.billing.plan);
+  const isAccessControlAllowed = await getAccessControlPermission(organization.id);
 
   if (!organizationTeams) {
-    throw new Error(t("common.organization_teams_not_found"));
+    throw new ResourceNotFoundError(t("common.team"), null);
   }
 
   const publicDomain = getPublicDomain();
@@ -69,7 +70,7 @@ const Page = async (props: ProjectSettingsPageProps) => {
       />
       {projects.length >= 1 && (
         <Button
-          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
           variant="ghost"
           asChild>
           <Link href={"/"}>

apps/web/app/(app)/(onboarding)/organizations/components/OnboardingOptionsContainer.tsx

@@ -16,7 +16,7 @@ interface OnboardingOptionsContainerProps {
 }
 
 export const OnboardingOptionsContainer = ({ options }: OnboardingOptionsContainerProps) => {
-  const getOptionCard = (option) => {
+  const getOptionCard = (option: OnboardingOptionsContainerProps["options"][number]) => {
     const Icon = option.icon;
     return (
       <OptionCard

apps/web/app/(app)/(onboarding)/types/onboarding.ts

@@ -1,7 +1,7 @@
 import { z } from "zod";
 
 export const ZOrganizationTeam = z.object({
-  id: z.string().cuid2(),
+  id: z.cuid2(),
   name: z.string(),
 });
 

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

@@ -1,8 +1,12 @@
 import { redirect } from "next/navigation";
+import { AuthenticationError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { getEnvironment } from "@/lib/environment/service";
 import { environmentIdLayoutChecks } from "@/modules/environments/lib/utils";
 
-const SurveyEditorEnvironmentLayout = async (props) => {
+const SurveyEditorEnvironmentLayout = async (props: {
+  params: Promise<{ environmentId: string }>;
+  children: React.ReactNode;
+}) => {
   const params = await props.params;
 
   const { children } = props;
@@ -14,13 +18,13 @@ const SurveyEditorEnvironmentLayout = async (props) => {
   }
 
   if (!user) {
-    throw new Error(t("common.user_not_found"));
+    throw new AuthenticationError(t("common.not_authenticated"));
   }
 
   const environment = await getEnvironment(params.environmentId);
 
   if (!environment) {
-    throw new Error(t("common.environment_not_found"));
+    throw new ResourceNotFoundError(t("common.environment"), params.environmentId);
   }
 
   return (

apps/web/app/(app)/billing-confirmation/components/ConfirmationPage.tsx

@@ -6,15 +6,26 @@ import { useTranslation } from "react-i18next";
 import { Button } from "@/modules/ui/components/button";
 import { Confetti } from "@/modules/ui/components/confetti";
 
-interface ConfirmationPageProps {
+const BILLING_CONFIRMATION_ENVIRONMENT_ID_KEY = "billingConfirmationEnvironmentId";
-  environmentId: string;
-}
 
-export const ConfirmationPage = ({ environmentId }: ConfirmationPageProps) => {
+export const ConfirmationPage = () => {
   const { t } = useTranslation();
   const [showConfetti, setShowConfetti] = useState(false);
+  const [resolvedEnvironmentId, setResolvedEnvironmentId] = useState<string | null>(null);
+
   useEffect(() => {
     setShowConfetti(true);
+
+    if (globalThis.window === undefined) {
+      return;
+    }
+
+    const storedEnvironmentId = globalThis.window.sessionStorage.getItem(
+      BILLING_CONFIRMATION_ENVIRONMENT_ID_KEY
+    );
+    if (storedEnvironmentId) {
+      setResolvedEnvironmentId(storedEnvironmentId);
+    }
   }, []);
 
   return (
@@ -30,7 +41,12 @@ export const ConfirmationPage = ({ environmentId }: ConfirmationPageProps) => {
           </p>
         </div>
         <Button asChild className="w-full justify-center">
-          <Link href={`/environments/${environmentId}/settings/billing`}>
+          <Link
+            href={
+              resolvedEnvironmentId
+                ? `/environments/${resolvedEnvironmentId}/settings/billing`
+                : "/environments"
+            }>
             {t("billing_confirmation.back_to_billing_overview")}
           </Link>
         </Button>

apps/web/app/(app)/billing-confirmation/page.tsx

@@ -3,13 +3,10 @@ import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper
 
 export const dynamic = "force-dynamic";
 
-const Page = async (props) => {
+const Page = async () => {
-  const searchParams = await props.searchParams;
-  const { environmentId } = searchParams;
-
   return (
     <PageContentWrapper>
-      <ConfirmationPage environmentId={environmentId?.toString()} />
+      <ConfirmationPage />
     </PageContentWrapper>
   );
 };

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

@@ -2,7 +2,11 @@
 
 import { z } from "zod";
 import { ZId } from "@formbricks/types/common";
-import { OperationNotAllowedError } from "@formbricks/types/errors";
+import {
+  AuthorizationError,
+  OperationNotAllowedError,
+  ResourceNotFoundError,
+} from "@formbricks/types/errors";
 import { ZProjectUpdateInput } from "@formbricks/types/project";
 import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
 import { getOrganization } from "@/lib/organization/service";
@@ -10,7 +14,6 @@ import { getOrganizationProjectsCount } from "@/lib/project/service";
 import { updateUser } from "@/lib/user/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
 import { checkAuthorizationUpdated } from "@/lib/utils/action-client/action-client-middleware";
-import { AuthenticatedActionClientCtx } from "@/lib/utils/action-client/types/context";
 import { withAuditLogging } from "@/modules/ee/audit-logs/lib/handler";
 import {
   getAccessControlPermission,
@@ -25,67 +28,63 @@ const ZCreateProjectAction = z.object({
   data: ZProjectUpdateInput,
 });
 
-export const createProjectAction = authenticatedActionClient.schema(ZCreateProjectAction).action(
+export const createProjectAction = authenticatedActionClient.inputSchema(ZCreateProjectAction).action(
-  withAuditLogging(
+  withAuditLogging("created", "project", async ({ ctx, parsedInput }) => {
-    "created",
+    const { user } = ctx;
-    "project",
-    async ({ ctx, parsedInput }: { ctx: AuthenticatedActionClientCtx; parsedInput: Record<string, any> }) => {
-      const { user } = ctx;
 
-      const organizationId = parsedInput.organizationId;
+    const organizationId = parsedInput.organizationId;
 
-      await checkAuthorizationUpdated({
+    await checkAuthorizationUpdated({
-        userId: user.id,
+      userId: user.id,
-        organizationId: parsedInput.organizationId,
+      organizationId: parsedInput.organizationId,
-        access: [
+      access: [
-          {
+        {
-            data: parsedInput.data,
+          data: parsedInput.data,
-            schema: ZProjectUpdateInput,
+          schema: ZProjectUpdateInput,
-            type: "organization",
+          type: "organization",
-            roles: ["owner", "manager"],
+          roles: ["owner", "manager"],
-          },
-        ],
-      });
-
-      const organization = await getOrganization(organizationId);
-
-      if (!organization) {
-        throw new Error("Organization not found");
-      }
-
-      const organizationProjectsLimit = await getOrganizationProjectsLimit(organization.billing.limits);
-      const organizationProjectsCount = await getOrganizationProjectsCount(organization.id);
-
-      if (organizationProjectsCount >= organizationProjectsLimit) {
-        throw new OperationNotAllowedError("Organization workspace limit reached");
-      }
-
-      if (parsedInput.data.teamIds && parsedInput.data.teamIds.length > 0) {
-        const isAccessControlAllowed = await getAccessControlPermission(organization.billing.plan);
-
-        if (!isAccessControlAllowed) {
-          throw new OperationNotAllowedError("You do not have permission to manage roles");
-        }
-      }
-
-      const project = await createProject(parsedInput.organizationId, parsedInput.data);
-      const updatedNotificationSettings = {
-        ...user.notificationSettings,
-        alert: {
-          ...user.notificationSettings?.alert,
         },
-      };
+      ],
+    });
 
-      await updateUser(user.id, {
+    const organization = await getOrganization(organizationId);
-        notificationSettings: updatedNotificationSettings,
-      });
 
-      ctx.auditLoggingCtx.organizationId = organizationId;
+    if (!organization) {
-      ctx.auditLoggingCtx.projectId = project.id;
+      throw new ResourceNotFoundError("Organization", organizationId);
-      ctx.auditLoggingCtx.newObject = project;
-      return project;
     }
-  )
+
+    const organizationProjectsLimit = await getOrganizationProjectsLimit(organization.id);
+    const organizationProjectsCount = await getOrganizationProjectsCount(organization.id);
+
+    if (organizationProjectsCount >= organizationProjectsLimit) {
+      throw new OperationNotAllowedError("Organization workspace limit reached");
+    }
+
+    if (parsedInput.data.teamIds && parsedInput.data.teamIds.length > 0) {
+      const isAccessControlAllowed = await getAccessControlPermission(organization.id);
+
+      if (!isAccessControlAllowed) {
+        throw new OperationNotAllowedError("You do not have permission to manage roles");
+      }
+    }
+
+    const project = await createProject(parsedInput.organizationId, parsedInput.data);
+    const updatedNotificationSettings = {
+      ...user.notificationSettings,
+      alert: {
+        ...user.notificationSettings?.alert,
+      },
+    };
+
+    await updateUser(user.id, {
+      notificationSettings: updatedNotificationSettings,
+    });
+
+    ctx.auditLoggingCtx.organizationId = organizationId;
+    ctx.auditLoggingCtx.projectId = project.id;
+    ctx.auditLoggingCtx.newObject = project;
+    return project;
+  })
 );
 
 const ZGetOrganizationsForSwitcherAction = z.object({
@@ -97,7 +96,7 @@ const ZGetOrganizationsForSwitcherAction = z.object({
  * Called on-demand when user opens the organization switcher.
  */
 export const getOrganizationsForSwitcherAction = authenticatedActionClient
-  .schema(ZGetOrganizationsForSwitcherAction)
+  .inputSchema(ZGetOrganizationsForSwitcherAction)
   .action(async ({ ctx, parsedInput }) => {
     await checkAuthorizationUpdated({
       userId: ctx.user.id,
@@ -122,7 +121,7 @@ const ZGetProjectsForSwitcherAction = z.object({
  * Called on-demand when user opens the project switcher.
  */
 export const getProjectsForSwitcherAction = authenticatedActionClient
-  .schema(ZGetProjectsForSwitcherAction)
+  .inputSchema(ZGetProjectsForSwitcherAction)
   .action(async ({ ctx, parsedInput }) => {
     await checkAuthorizationUpdated({
       userId: ctx.user.id,
@@ -138,7 +137,7 @@ export const getProjectsForSwitcherAction = authenticatedActionClient
     // Need membership for getProjectsByUserId (1 DB query)
     const membership = await getMembershipByUserIdOrganizationId(ctx.user.id, parsedInput.organizationId);
     if (!membership) {
-      throw new Error("Membership not found");
+      throw new AuthorizationError("Membership not found");
     }
 
     return await getProjectsByUserId(ctx.user.id, membership);

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

@@ -1,3 +1,4 @@
+import { ResourceNotFoundError } from "@formbricks/types/errors";
 import { MainNavigation } from "@/app/(app)/environments/[environmentId]/components/MainNavigation";
 import { TopControlBar } from "@/app/(app)/environments/[environmentId]/components/TopControlBar";
 import { IS_DEVELOPMENT, IS_FORMBRICKS_CLOUD } from "@/lib/constants";
@@ -29,21 +30,20 @@ export const EnvironmentLayout = async ({ layoutData, children }: EnvironmentLay
     isAccessControlAllowed,
     projectPermission,
     license,
-    peopleCount,
     responseCount,
   } = layoutData;
 
   // Calculate derived values (no queries)
   const { isMember, isOwner, isManager } = getAccessFlags(membership.role);
 
-  const { features, lastChecked, isPendingDowngrade, active } = license;
+  const { features, lastChecked, isPendingDowngrade, active, status } = license;
   const isMultiOrgEnabled = features?.isMultiOrgEnabled ?? false;
-  const organizationProjectsLimit = await getOrganizationProjectsLimit(organization.billing.limits);
+  const organizationProjectsLimit = await getOrganizationProjectsLimit(organization.id);
   const isOwnerOrManager = isOwner || isManager;
 
   // Validate that project permission exists for members
   if (isMember && !projectPermission) {
-    throw new Error(t("common.workspace_permission_not_found"));
+    throw new ResourceNotFoundError(t("common.workspace"), null);
   }
 
   return (
@@ -52,7 +52,6 @@ export const EnvironmentLayout = async ({ layoutData, children }: EnvironmentLay
         <LimitsReachedBanner
           organization={organization}
           environmentId={environment.id}
-          peopleCount={peopleCount}
           responseCount={responseCount}
         />
       )}
@@ -63,6 +62,7 @@ export const EnvironmentLayout = async ({ layoutData, children }: EnvironmentLay
         active={active}
         environmentId={environment.id}
         locale={user.locale}
+        status={status}
       />
 
       <div className="flex h-full">
@@ -75,6 +75,10 @@ export const EnvironmentLayout = async ({ layoutData, children }: EnvironmentLay
           isDevelopment={IS_DEVELOPMENT}
           membershipRole={membership.role}
           publicDomain={publicDomain}
+          isMultiOrgEnabled={isMultiOrgEnabled}
+          organizationProjectsLimit={organizationProjectsLimit}
+          isLicenseActive={active}
+          isAccessControlAllowed={isAccessControlAllowed}
         />
         <div id="mainContent" className="flex flex-1 flex-col overflow-hidden bg-slate-50">
           <TopControlBar

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

@@ -2,40 +2,59 @@
 
 import {
   ArrowUpRightIcon,
+  Building2Icon,
   ChevronRightIcon,
   Cog,
+  FoldersIcon,
+  Loader2,
   LogOutIcon,
   MessageCircle,
   PanelLeftCloseIcon,
   PanelLeftOpenIcon,
+  PlusIcon,
   RocketIcon,
+  SettingsIcon,
   UserCircleIcon,
   UserIcon,
 } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState, useTransition } from "react";
 import { useTranslation } from "react-i18next";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TOrganizationRole } from "@formbricks/types/memberships";
 import { TOrganization } from "@formbricks/types/organizations";
 import { TUser } from "@formbricks/types/user";
+import {
+  getOrganizationsForSwitcherAction,
+  getProjectsForSwitcherAction,
+} from "@/app/(app)/environments/[environmentId]/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 { getBillingFallbackPath } from "@/lib/membership/navigation";
 import { getAccessFlags } from "@/lib/membership/utils";
+import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { useSignOut } from "@/modules/auth/hooks/use-sign-out";
+import { TrialAlert } from "@/modules/ee/billing/components/trial-alert";
+import { CreateOrganizationModal } from "@/modules/organization/components/CreateOrganizationModal";
+import { CreateProjectModal } from "@/modules/projects/components/create-project-modal";
+import { ProjectLimitModal } from "@/modules/projects/components/project-limit-modal";
 import { getLatestStableFbReleaseAction } from "@/modules/projects/settings/(setup)/app-connection/actions";
 import { ProfileAvatar } from "@/modules/ui/components/avatars";
 import { Button } from "@/modules/ui/components/button";
 import {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/modules/ui/components/dropdown-menu";
+import { ModalButton } from "@/modules/ui/components/upgrade-prompt";
 import packageJson from "../../../../../package.json";
 
 interface NavigationProps {
@@ -47,8 +66,31 @@ interface NavigationProps {
   isDevelopment: boolean;
   membershipRole?: TOrganizationRole;
   publicDomain: string;
+  isMultiOrgEnabled: boolean;
+  organizationProjectsLimit: number;
+  isLicenseActive: boolean;
+  isAccessControlAllowed: boolean;
 }
 
+const isActiveProjectSetting = (pathname: string, settingId: string): boolean => {
+  if (pathname.includes("/settings/")) {
+    return false;
+  }
+
+  const pattern = new RegExp(`/workspace/${settingId}(?:/|$)`);
+  return pattern.test(pathname);
+};
+
+const isActiveOrganizationSetting = (pathname: string, settingId: string): boolean => {
+  const accountSettingsPattern = /\/settings\/(profile|account|notifications|security|appearance)(?:\/|$)/;
+  if (accountSettingsPattern.test(pathname)) {
+    return false;
+  }
+
+  const pattern = new RegExp(`/settings/${settingId}(?:/|$)`);
+  return pattern.test(pathname);
+};
+
 export const MainNavigation = ({
   environment,
   organization,
@@ -58,6 +100,10 @@ export const MainNavigation = ({
   isFormbricksCloud,
   isDevelopment,
   publicDomain,
+  isMultiOrgEnabled,
+  organizationProjectsLimit,
+  isLicenseActive,
+  isAccessControlAllowed,
 }: NavigationProps) => {
   const router = useRouter();
   const pathname = usePathname();
@@ -67,7 +113,12 @@ export const MainNavigation = ({
   const [latestVersion, setLatestVersion] = useState("");
   const { signOut: signOutWithAudit } = useSignOut({ id: user.id, email: user.email });
 
-  const { isManager, isOwner, isBilling } = getAccessFlags(membershipRole);
+  const [isPending, startTransition] = useTransition();
+  const { isManager, isOwner, isBilling, isMember } = getAccessFlags(membershipRole);
+  const isMembershipPending = membershipRole === undefined;
+  const disabledNavigationMessage = isMembershipPending
+    ? t("common.loading")
+    : t("common.you_are_not_authorized_to_perform_this_action");
 
   const isOwnerOrManager = isManager || isOwner;
 
@@ -104,21 +155,27 @@ export const MainNavigation = ({
         icon: MessageCircle,
         isActive: pathname?.includes("/surveys"),
         isHidden: false,
+        disabled: isMembershipPending || isBilling,
       },
       {
         href: `/environments/${environment.id}/contacts`,
         name: t("common.contacts"),
         icon: UserIcon,
-        isActive: pathname?.includes("/contacts") || pathname?.includes("/segments"),
+        isActive:
+          pathname?.includes("/contacts") ||
+          pathname?.includes("/segments") ||
+          pathname?.includes("/attributes"),
+        disabled: isMembershipPending || isBilling,
       },
       {
         name: t("common.configuration"),
         href: `/environments/${environment.id}/workspace/general`,
         icon: Cog,
-        isActive: pathname?.includes("/project"),
+        isActive: pathname?.includes("/workspace"),
+        disabled: isMembershipPending || isBilling,
       },
     ],
-    [t, environment.id, pathname]
+    [t, environment.id, pathname, isMembershipPending, isBilling]
   );
 
   const dropdownNavigation = [
@@ -141,6 +198,183 @@ export const MainNavigation = ({
     },
   ];
 
+  const [isWorkspaceDropdownOpen, setIsWorkspaceDropdownOpen] = useState(false);
+  const [isOrganizationDropdownOpen, setIsOrganizationDropdownOpen] = useState(false);
+  const [projects, setProjects] = useState<{ id: string; name: string }[]>([]);
+  const [organizations, setOrganizations] = useState<{ id: string; name: string }[]>([]);
+  const [isLoadingProjects, setIsLoadingProjects] = useState(false);
+  const [hasInitializedProjects, setHasInitializedProjects] = useState(false);
+  const [isLoadingOrganizations, setIsLoadingOrganizations] = useState(false);
+  const [workspaceLoadError, setWorkspaceLoadError] = useState<string | null>(null);
+  const [organizationLoadError, setOrganizationLoadError] = useState<string | null>(null);
+  const [openCreateProjectModal, setOpenCreateProjectModal] = useState(false);
+  const [openCreateOrganizationModal, setOpenCreateOrganizationModal] = useState(false);
+  const [openProjectLimitModal, setOpenProjectLimitModal] = useState(false);
+
+  const renderSwitcherError = (error: string, onRetry: () => void, retryLabel: string) => (
+    <div className="px-2 py-4">
+      <p className="mb-2 text-sm text-red-600">{error}</p>
+      <button onClick={onRetry} className="text-xs text-slate-600 underline hover:text-slate-800">
+        {retryLabel}
+      </button>
+    </div>
+  );
+
+  const projectSettings = [
+    {
+      id: "general",
+      label: t("common.general"),
+      href: `/environments/${environment.id}/workspace/general`,
+    },
+    {
+      id: "look",
+      label: t("common.look_and_feel"),
+      href: `/environments/${environment.id}/workspace/look`,
+    },
+    {
+      id: "app-connection",
+      label: t("common.website_and_app_connection"),
+      href: `/environments/${environment.id}/workspace/app-connection`,
+    },
+    {
+      id: "integrations",
+      label: t("common.integrations"),
+      href: `/environments/${environment.id}/workspace/integrations`,
+    },
+    {
+      id: "teams",
+      label: t("common.team_access"),
+      href: `/environments/${environment.id}/workspace/teams`,
+    },
+    {
+      id: "languages",
+      label: t("common.survey_languages"),
+      href: `/environments/${environment.id}/workspace/languages`,
+    },
+    {
+      id: "tags",
+      label: t("common.tags"),
+      href: `/environments/${environment.id}/workspace/tags`,
+    },
+  ];
+
+  const organizationSettings = [
+    {
+      id: "general",
+      label: t("common.general"),
+      href: `/environments/${environment.id}/settings/general`,
+    },
+    {
+      id: "teams",
+      label: t("common.members_and_teams"),
+      href: `/environments/${environment.id}/settings/teams`,
+    },
+    {
+      id: "api-keys",
+      label: t("common.api_keys"),
+      href: `/environments/${environment.id}/settings/api-keys`,
+      hidden: !isOwnerOrManager,
+    },
+    {
+      id: "domain",
+      label: t("common.domain"),
+      href: `/environments/${environment.id}/settings/domain`,
+      hidden: isFormbricksCloud,
+    },
+    {
+      id: "billing",
+      label: t("common.billing"),
+      href: `/environments/${environment.id}/settings/billing`,
+      hidden: !isFormbricksCloud,
+    },
+    {
+      id: "enterprise",
+      label: t("common.enterprise_license"),
+      href: `/environments/${environment.id}/settings/enterprise`,
+      hidden: isFormbricksCloud || isMember,
+    },
+  ];
+
+  const loadProjects = useCallback(async () => {
+    setIsLoadingProjects(true);
+    setWorkspaceLoadError(null);
+
+    try {
+      const result = await getProjectsForSwitcherAction({ organizationId: organization.id });
+      if (result?.data) {
+        const sorted = [...result.data].sort((a, b) => a.name.localeCompare(b.name));
+        setProjects(sorted);
+      } else {
+        setWorkspaceLoadError(getFormattedErrorMessage(result) || t("common.failed_to_load_workspaces"));
+      }
+    } catch (error) {
+      const formattedError =
+        typeof error === "object" && error !== null
+          ? getFormattedErrorMessage(error as { serverError?: string; validationErrors?: unknown })
+          : "";
+      setWorkspaceLoadError(
+        formattedError || (error instanceof Error ? error.message : t("common.failed_to_load_workspaces"))
+      );
+    } finally {
+      setIsLoadingProjects(false);
+      setHasInitializedProjects(true);
+    }
+  }, [organization.id, t]);
+
+  useEffect(() => {
+    if (!isWorkspaceDropdownOpen || projects.length > 0 || isLoadingProjects || workspaceLoadError) {
+      return;
+    }
+
+    loadProjects();
+  }, [isWorkspaceDropdownOpen, projects.length, isLoadingProjects, workspaceLoadError, loadProjects]);
+
+  const loadOrganizations = useCallback(async () => {
+    setIsLoadingOrganizations(true);
+    setOrganizationLoadError(null);
+
+    try {
+      const result = await getOrganizationsForSwitcherAction({ organizationId: organization.id });
+      if (result?.data) {
+        const sorted = [...result.data].sort((a, b) => a.name.localeCompare(b.name));
+        setOrganizations(sorted);
+      } else {
+        setOrganizationLoadError(
+          getFormattedErrorMessage(result) || t("common.failed_to_load_organizations")
+        );
+      }
+    } catch (error) {
+      const formattedError =
+        typeof error === "object" && error !== null
+          ? getFormattedErrorMessage(error as { serverError?: string; validationErrors?: unknown })
+          : "";
+      setOrganizationLoadError(
+        formattedError || (error instanceof Error ? error.message : t("common.failed_to_load_organizations"))
+      );
+    } finally {
+      setIsLoadingOrganizations(false);
+    }
+  }, [organization.id, t]);
+
+  useEffect(() => {
+    if (
+      !isOrganizationDropdownOpen ||
+      organizations.length > 0 ||
+      isLoadingOrganizations ||
+      organizationLoadError
+    ) {
+      return;
+    }
+
+    loadOrganizations();
+  }, [
+    isOrganizationDropdownOpen,
+    organizations.length,
+    isLoadingOrganizations,
+    organizationLoadError,
+    loadOrganizations,
+  ]);
+
   useEffect(() => {
     async function loadReleases() {
       const res = await getLatestStableFbReleaseAction();
@@ -156,7 +390,99 @@ export const MainNavigation = ({
     if (isOwnerOrManager) loadReleases();
   }, [isOwnerOrManager]);
 
-  const mainNavigationLink = `/environments/${environment.id}/${isBilling ? "settings/billing/" : "surveys/"}`;
+  const trialDaysRemaining = useMemo(() => {
+    if (!isFormbricksCloud || organization.billing?.stripe?.subscriptionStatus !== "trialing") return null;
+    const trialEnd = organization.billing.stripe.trialEnd;
+    if (!trialEnd) return null;
+    const ts = new Date(trialEnd).getTime();
+    if (!Number.isFinite(ts)) return null;
+    const msPerDay = 86_400_000;
+    return Math.ceil((ts - Date.now()) / msPerDay);
+  }, [
+    isFormbricksCloud,
+    organization.billing?.stripe?.subscriptionStatus,
+    organization.billing?.stripe?.trialEnd,
+  ]);
+
+  const mainNavigationLink = isBilling
+    ? getBillingFallbackPath(environment.id, isFormbricksCloud)
+    : `/environments/${environment.id}/surveys/`;
+
+  const handleProjectChange = (projectId: string) => {
+    const targetPath =
+      projectId === project.id ? `/environments/${environment.id}/surveys` : `/workspaces/${projectId}/`;
+    startTransition(() => {
+      setIsWorkspaceDropdownOpen(false);
+      router.push(targetPath);
+    });
+  };
+
+  const handleOrganizationChange = (organizationId: string) => {
+    const targetPath =
+      organizationId === organization.id
+        ? `/environments/${environment.id}/settings/general`
+        : `/organizations/${organizationId}/`;
+    startTransition(() => {
+      setIsOrganizationDropdownOpen(false);
+      router.push(targetPath);
+    });
+  };
+
+  const handleSettingNavigation = (href: string) => {
+    startTransition(() => {
+      router.push(href);
+    });
+  };
+
+  const handleProjectCreate = () => {
+    if (!hasInitializedProjects || isLoadingProjects) {
+      return;
+    }
+
+    if (projects.length >= organizationProjectsLimit) {
+      setOpenProjectLimitModal(true);
+      return;
+    }
+
+    setOpenCreateProjectModal(true);
+  };
+
+  const projectLimitModalButtons = (): [ModalButton, ModalButton] => {
+    if (isFormbricksCloud) {
+      return [
+        {
+          text: t("environments.settings.billing.upgrade"),
+          href: `/environments/${environment.id}/settings/billing`,
+        },
+        {
+          text: t("common.cancel"),
+          onClick: () => setOpenProjectLimitModal(false),
+        },
+      ];
+    }
+
+    return [
+      {
+        text: t("environments.settings.billing.upgrade"),
+        href: isLicenseActive
+          ? `/environments/${environment.id}/settings/enterprise`
+          : "https://formbricks.com/upgrade-self-hosted-license",
+      },
+      {
+        text: t("common.cancel"),
+        onClick: () => setOpenProjectLimitModal(false),
+      },
+    ];
+  };
+
+  const switcherTriggerClasses = cn(
+    "w-full border-t px-3 py-3 text-left transition-colors duration-200 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-500 focus-visible:ring-inset",
+    isCollapsed ? "flex items-center justify-center" : ""
+  );
+
+  const switcherIconClasses =
+    "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-slate-100 text-slate-600";
+  const isInitialProjectsLoading = isWorkspaceDropdownOpen && !hasInitializedProjects && !workspaceLoadError;
 
   return (
     <>
@@ -185,7 +511,7 @@ export const MainNavigation = ({
                 size="icon"
                 onClick={toggleSidebar}
                 className={cn(
-                  "rounded-xl bg-slate-50 p-1 text-slate-600 transition-all hover:bg-slate-100 focus:ring-0 focus:ring-transparent focus:outline-none"
+                  "rounded-xl bg-slate-50 p-1 text-slate-600 transition-all hover:bg-slate-100 focus:outline-none focus:ring-0 focus:ring-transparent"
                 )}>
                 {isCollapsed ? (
                   <PanelLeftOpenIcon strokeWidth={1.5} />
@@ -196,24 +522,24 @@ export const MainNavigation = ({
             </div>
 
             {/* Main Nav Switch */}
-            {!isBilling && (
+            <ul>
-              <ul>
+              {mainNavigation.map(
-                {mainNavigation.map(
+                (item) =>
-                  (item) =>
+                  !item.isHidden && (
-                    !item.isHidden && (
+                    <NavigationLink
-                      <NavigationLink
+                      key={item.name}
-                        key={item.name}
+                      href={item.href}
-                        href={item.href}
+                      isActive={item.isActive}
-                        isActive={item.isActive}
+                      isCollapsed={isCollapsed}
-                        isCollapsed={isCollapsed}
+                      isTextVisible={isTextVisible}
-                        isTextVisible={isTextVisible}
+                      disabled={item.disabled}
-                        linkText={item.name}>
+                      disabledMessage={item.disabled ? disabledNavigationMessage : undefined}
-                        <item.icon strokeWidth={1.5} />
+                      linkText={item.name}>
-                      </NavigationLink>
+                      <item.icon strokeWidth={1.5} />
-                    )
+                    </NavigationLink>
-                )}
+                  )
-              </ul>
+              )}
-            )}
+            </ul>
           </div>
 
           <div>
@@ -230,38 +556,217 @@ export const MainNavigation = ({
               </Link>
             )}
 
-            {/* User Switch */}
+            {/* Trial Days Remaining */}
-            <div className="flex items-center">
+            {!isCollapsed && isFormbricksCloud && trialDaysRemaining !== null && (
+              <Link href={`/environments/${environment.id}/settings/billing`} className="m-2 block">
+                <TrialAlert trialDaysRemaining={trialDaysRemaining} size="small" />
+              </Link>
+            )}
+
+            <div className="flex flex-col">
+              <DropdownMenu onOpenChange={setIsWorkspaceDropdownOpen}>
+                <DropdownMenuTrigger asChild id="workspaceDropdownTrigger" className={switcherTriggerClasses}>
+                  <button
+                    type="button"
+                    aria-label={isCollapsed ? t("common.change_workspace") : undefined}
+                    className={cn("flex w-full items-center gap-3", isCollapsed && "justify-center")}>
+                    <span className={switcherIconClasses}>
+                      <FoldersIcon className="h-4 w-4" strokeWidth={1.5} />
+                    </span>
+                    {!isCollapsed && !isTextVisible && (
+                      <>
+                        <div className="grow overflow-hidden">
+                          <p className="truncate text-sm font-bold text-slate-700">{project.name}</p>
+                          <p className="text-sm text-slate-500">{t("common.workspace")}</p>
+                        </div>
+                        {isPending && (
+                          <Loader2 className="h-4 w-4 animate-spin text-slate-600" strokeWidth={1.5} />
+                        )}
+                        <ChevronRightIcon className="h-4 w-4 shrink-0 text-slate-600" strokeWidth={1.5} />
+                      </>
+                    )}
+                  </button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent side="right" sideOffset={10} alignOffset={5} align="end">
+                  <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
+                    <FoldersIcon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
+                    {t("common.change_workspace")}
+                  </div>
+                  {(isLoadingProjects || isInitialProjectsLoading) && (
+                    <div className="flex items-center justify-center py-2">
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                    </div>
+                  )}
+                  {!isLoadingProjects &&
+                    !isInitialProjectsLoading &&
+                    workspaceLoadError &&
+                    renderSwitcherError(
+                      workspaceLoadError,
+                      () => {
+                        setWorkspaceLoadError(null);
+                        setProjects([]);
+                      },
+                      t("common.try_again")
+                    )}
+                  {!isLoadingProjects && !isInitialProjectsLoading && !workspaceLoadError && (
+                    <>
+                      <DropdownMenuGroup className="max-h-[300px] overflow-y-auto">
+                        {projects.map((proj) => (
+                          <DropdownMenuCheckboxItem
+                            key={proj.id}
+                            checked={proj.id === project.id}
+                            onClick={() => handleProjectChange(proj.id)}
+                            className="cursor-pointer">
+                            {proj.name}
+                          </DropdownMenuCheckboxItem>
+                        ))}
+                      </DropdownMenuGroup>
+                      {isOwnerOrManager && (
+                        <DropdownMenuCheckboxItem
+                          onClick={handleProjectCreate}
+                          className="w-full cursor-pointer justify-between">
+                          <span>{t("common.add_new_workspace")}</span>
+                          <PlusIcon className="ml-2 h-4 w-4" strokeWidth={1.5} />
+                        </DropdownMenuCheckboxItem>
+                      )}
+                    </>
+                  )}
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                    <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
+                      <Cog className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
+                      {t("common.workspace_configuration")}
+                    </div>
+                    {projectSettings.map((setting) => (
+                      <DropdownMenuCheckboxItem
+                        key={setting.id}
+                        checked={isActiveProjectSetting(pathname, setting.id)}
+                        onClick={() => handleSettingNavigation(setting.href)}
+                        className="cursor-pointer">
+                        {setting.label}
+                      </DropdownMenuCheckboxItem>
+                    ))}
+                  </DropdownMenuGroup>
+                </DropdownMenuContent>
+              </DropdownMenu>
+
+              <DropdownMenu onOpenChange={setIsOrganizationDropdownOpen}>
+                <DropdownMenuTrigger
+                  asChild
+                  id="organizationDropdownTriggerSidebar"
+                  className={switcherTriggerClasses}>
+                  <button
+                    type="button"
+                    aria-label={isCollapsed ? t("common.change_organization") : undefined}
+                    className={cn("flex w-full items-center gap-3", isCollapsed && "justify-center")}>
+                    <span className={switcherIconClasses}>
+                      <Building2Icon className="h-4 w-4" strokeWidth={1.5} />
+                    </span>
+                    {!isCollapsed && !isTextVisible && (
+                      <>
+                        <div className="grow overflow-hidden">
+                          <p className="truncate text-sm font-bold text-slate-700">{organization.name}</p>
+                          <p className="text-sm text-slate-500">{t("common.organization")}</p>
+                        </div>
+                        {isPending && (
+                          <Loader2 className="h-4 w-4 animate-spin text-slate-600" strokeWidth={1.5} />
+                        )}
+                        <ChevronRightIcon className="h-4 w-4 shrink-0 text-slate-600" strokeWidth={1.5} />
+                      </>
+                    )}
+                  </button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent side="right" sideOffset={10} alignOffset={5} align="end">
+                  <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
+                    <Building2Icon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
+                    {t("common.change_organization")}
+                  </div>
+                  {isLoadingOrganizations && (
+                    <div className="flex items-center justify-center py-2">
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                    </div>
+                  )}
+                  {!isLoadingOrganizations &&
+                    organizationLoadError &&
+                    renderSwitcherError(
+                      organizationLoadError,
+                      () => {
+                        setOrganizationLoadError(null);
+                        setOrganizations([]);
+                      },
+                      t("common.try_again")
+                    )}
+                  {!isLoadingOrganizations && !organizationLoadError && (
+                    <>
+                      <DropdownMenuGroup className="max-h-[300px] overflow-y-auto">
+                        {organizations.map((org) => (
+                          <DropdownMenuCheckboxItem
+                            key={org.id}
+                            checked={org.id === organization.id}
+                            onClick={() => handleOrganizationChange(org.id)}
+                            className="cursor-pointer">
+                            {org.name}
+                          </DropdownMenuCheckboxItem>
+                        ))}
+                      </DropdownMenuGroup>
+                      {isMultiOrgEnabled && (
+                        <DropdownMenuCheckboxItem
+                          onClick={() => setOpenCreateOrganizationModal(true)}
+                          className="w-full cursor-pointer justify-between">
+                          <span>{t("common.create_new_organization")}</span>
+                          <PlusIcon className="ml-2 h-4 w-4" strokeWidth={1.5} />
+                        </DropdownMenuCheckboxItem>
+                      )}
+                    </>
+                  )}
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                    <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
+                      <SettingsIcon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
+                      {t("common.organization_settings")}
+                    </div>
+                    {organizationSettings.map((setting) => {
+                      if (setting.hidden) return null;
+                      return (
+                        <DropdownMenuCheckboxItem
+                          key={setting.id}
+                          checked={isActiveOrganizationSetting(pathname, setting.id)}
+                          onClick={() => handleSettingNavigation(setting.href)}
+                          className="cursor-pointer">
+                          {setting.label}
+                        </DropdownMenuCheckboxItem>
+                      );
+                    })}
+                  </DropdownMenuGroup>
+                </DropdownMenuContent>
+              </DropdownMenu>
+
               <DropdownMenu>
                 <DropdownMenuTrigger
                   asChild
                   id="userDropdownTrigger"
-                  className="w-full rounded-br-xl border-t py-4 transition-colors duration-200 hover:bg-slate-50 focus:outline-none">
+                  className={cn(switcherTriggerClasses, "rounded-br-xl")}>
-                  <div
+                  <button
-                    className={cn(
+                    type="button"
-                      "flex cursor-pointer flex-row items-center gap-3",
+                    aria-label={isCollapsed ? t("common.account_settings") : undefined}
-                      isCollapsed ? "justify-center px-2" : "px-4"
+                    className={cn("flex w-full items-center gap-3", isCollapsed && "justify-center")}>
-                    )}>
+                    <span className={switcherIconClasses}>
-                    <ProfileAvatar userId={user.id} />
+                      <ProfileAvatar userId={user.id} />
+                    </span>
                     {!isCollapsed && !isTextVisible && (
                       <>
-                        <div
+                        <div className="grow overflow-hidden">
-                          className={cn(isTextVisible ? "opacity-0" : "opacity-100", "grow overflow-hidden")}>
                           <p
                             title={user?.email}
-                            className={cn(
+                            className="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 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 className="text-sm text-slate-500">{t("common.account")}</p>
                         </div>
-                        <ChevronRightIcon
+                        <ChevronRightIcon className="h-4 w-4 shrink-0 text-slate-600" strokeWidth={1.5} />
-                          className={cn("h-5 w-5 shrink-0 text-slate-700 hover:text-slate-500")}
-                        />
                       </>
                     )}
-                  </div>
+                  </button>
                 </DropdownMenuTrigger>
 
                 <DropdownMenuContent
@@ -270,8 +775,6 @@ export const MainNavigation = ({
                   sideOffset={10}
                   alignOffset={5}
                   align="end">
-                  {/* Dropdown Items */}
-
                   {dropdownNavigation.map((link) => (
                     <Link
                       href={link.href}
@@ -285,7 +788,6 @@ export const MainNavigation = ({
                       </DropdownMenuItem>
                     </Link>
                   ))}
-                  {/* Logout */}
                   <DropdownMenuItem
                     onClick={async () => {
                       const loginUrl = `${publicDomain}/auth/login`;
@@ -308,6 +810,28 @@ export const MainNavigation = ({
           </div>
         </aside>
       )}
+      {openProjectLimitModal && (
+        <ProjectLimitModal
+          open={openProjectLimitModal}
+          setOpen={setOpenProjectLimitModal}
+          buttons={projectLimitModalButtons()}
+          projectLimit={organizationProjectsLimit}
+        />
+      )}
+      {openCreateProjectModal && (
+        <CreateProjectModal
+          open={openCreateProjectModal}
+          setOpen={setOpenCreateProjectModal}
+          organizationId={organization.id}
+          isAccessControlAllowed={isAccessControlAllowed}
+        />
+      )}
+      {openCreateOrganizationModal && (
+        <CreateOrganizationModal
+          open={openCreateOrganizationModal}
+          setOpen={setOpenCreateOrganizationModal}
+        />
+      )}
     </>
   );
 };

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

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import React from "react";
 import { cn } from "@/lib/cn";
+import { Popover, PopoverContent, PopoverTrigger } from "@/modules/ui/components/popover";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/modules/ui/components/tooltip";
 
 interface NavigationLinkProps {
@@ -10,6 +11,8 @@ interface NavigationLinkProps {
   children: React.ReactNode;
   linkText: string;
   isTextVisible: boolean;
+  disabled?: boolean;
+  disabledMessage?: string;
 }
 
 export const NavigationLink = ({
@@ -19,10 +22,34 @@ export const NavigationLink = ({
   children,
   linkText,
   isTextVisible = true,
+  disabled = false,
+  disabledMessage,
 }: NavigationLinkProps) => {
+  const tooltipText = disabled ? disabledMessage || linkText : linkText;
   const activeClass = "bg-slate-50 border-r-4 border-brand-dark font-semibold text-slate-900";
   const inactiveClass =
     "hover:bg-slate-50 border-r-4 border-transparent hover:border-slate-300 transition-all duration-150 ease-in-out";
+  const disabledClass = "cursor-not-allowed border-r-4 border-transparent text-slate-400";
+  const getColorClass = (baseClass: string) => {
+    if (disabled) {
+      return disabledClass;
+    }
+
+    return cn(baseClass, isActive ? activeClass : inactiveClass);
+  };
+
+  const collapsedColorClass = getColorClass("text-slate-700 hover:text-slate-900");
+  const expandedColorClass = getColorClass("text-slate-600 hover:text-slate-900");
+
+  const label = (
+    <span
+      className={cn(
+        "ml-2 flex transition-opacity duration-100",
+        isTextVisible ? "opacity-0" : "opacity-100"
+      )}>
+      {linkText}
+    </span>
+  );
 
   return (
     <>
@@ -30,35 +57,37 @@ export const NavigationLink = ({
         <TooltipProvider delayDuration={0}>
           <Tooltip>
             <TooltipTrigger asChild>
-              <li
+              <li className={cn("mb-1 ml-2 rounded-l-md py-2 pl-2 text-sm", collapsedColorClass)}>
-                className={cn(
+                {disabled ? (
-                  "mb-1 ml-2 rounded-l-md py-2 pl-2 text-sm text-slate-700 hover:text-slate-900",
+                  <div className="flex items-center">{children}</div>
-                  isActive ? activeClass : inactiveClass
+                ) : (
-                )}>
+                  <Link href={href}>{children}</Link>
-                <Link href={href} className="flex items-center">
+                )}
-                  {children}
-                </Link>
               </li>
             </TooltipTrigger>
-            <TooltipContent side="right">{linkText}</TooltipContent>
+            <TooltipContent side="right">{tooltipText}</TooltipContent>
           </Tooltip>
         </TooltipProvider>
       ) : (
-        <li
+        <li className={cn("mb-1 rounded-l-md py-2 pl-5 text-sm", expandedColorClass)}>
-          className={cn(
+          {disabled ? (
-            "mb-1 rounded-l-md py-2 pl-5 text-sm text-slate-600 hover:text-slate-900",
+            <Popover>
-            isActive ? activeClass : inactiveClass
+              <PopoverTrigger asChild>
-          )}>
+                <div className="flex items-center">
-          <Link href={href} className="flex items-center">
+                  {children}
-            {children}
+                  {label}
-            <span
+                </div>
-              className={cn(
+              </PopoverTrigger>
-                "ml-2 flex transition-opacity duration-100",
+              <PopoverContent className="w-fit max-w-72 px-3 py-2 text-sm text-slate-700">
-                isTextVisible ? "opacity-0" : "opacity-100"
+                {disabledMessage || linkText}
-              )}>
+              </PopoverContent>
-              {linkText}
+            </Popover>
-            </span>
+          ) : (
-          </Link>
+            <Link href={href} className="flex items-center">
+              {children}
+              {label}
+            </Link>
+          )}
         </li>
       )}
     </>

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

@@ -31,7 +31,8 @@ export const TopControlBar = ({
   isAccessControlAllowed,
   membershipRole,
 }: TopControlBarProps) => {
-  const { isMember } = getAccessFlags(membershipRole);
+  const { isMember, isBilling } = getAccessFlags(membershipRole);
+  const isMembershipPending = membershipRole === undefined;
   const { environment } = useEnvironment();
 
   return (
@@ -49,6 +50,8 @@ export const TopControlBar = ({
         isLicenseActive={isLicenseActive}
         isOwnerOrManager={isOwnerOrManager}
         isMember={isMember}
+        isBilling={isBilling}
+        isMembershipPending={isMembershipPending}
         isAccessControlAllowed={isAccessControlAllowed}
       />
     </div>

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

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

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

@@ -25,6 +25,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/modules/ui/components/dropdown-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "@/modules/ui/components/popover";
 import { useOrganization } from "../context/environment-context";
 
 interface OrganizationBreadcrumbProps {
@@ -35,6 +36,7 @@ interface OrganizationBreadcrumbProps {
   isFormbricksCloud: boolean;
   isMember: boolean;
   isOwnerOrManager: boolean;
+  isMembershipPending: boolean;
 }
 
 const isActiveOrganizationSetting = (pathname: string, settingId: string): boolean => {
@@ -56,6 +58,7 @@ export const OrganizationBreadcrumb = ({
   isFormbricksCloud,
   isMember,
   isOwnerOrManager,
+  isMembershipPending,
 }: OrganizationBreadcrumbProps) => {
   const { t } = useTranslation();
   const [isOrganizationDropdownOpen, setIsOrganizationDropdownOpen] = useState(false);
@@ -81,7 +84,7 @@ export const OrganizationBreadcrumb = ({
       getOrganizationsForSwitcherAction({ organizationId: currentOrganizationId }).then((result) => {
         if (result?.data) {
           // Sort organizations by name
-          const sorted = result.data.toSorted((a, b) => a.name.localeCompare(b.name));
+          const sorted = [...result.data].sort((a, b) => a.name.localeCompare(b.name));
           setOrganizations(sorted);
         } else {
           // Handle server errors or validation errors
@@ -111,8 +114,12 @@ export const OrganizationBreadcrumb = ({
   }
 
   const handleOrganizationChange = (organizationId: string) => {
-    if (organizationId === currentOrganizationId) return;
     startTransition(() => {
+      setIsOrganizationDropdownOpen(false);
+      if (organizationId === currentOrganizationId && currentEnvironmentId) {
+        router.push(`/environments/${currentEnvironmentId}/settings/general`);
+        return;
+      }
       router.push(`/organizations/${organizationId}/`);
     });
   };
@@ -142,7 +149,10 @@ export const OrganizationBreadcrumb = ({
       id: "api-keys",
       label: t("common.api_keys"),
       href: `/environments/${currentEnvironmentId}/settings/api-keys`,
-      hidden: !isOwnerOrManager,
+      disabled: isMembershipPending || !isOwnerOrManager,
+      disabledMessage: isMembershipPending
+        ? t("common.loading")
+        : t("common.you_are_not_authorized_to_perform_this_action"),
     },
     {
       id: "domain",
@@ -160,7 +170,11 @@ export const OrganizationBreadcrumb = ({
       id: "enterprise",
       label: t("common.enterprise_license"),
       href: `/environments/${currentEnvironmentId}/settings/enterprise`,
-      hidden: isFormbricksCloud || isMember,
+      hidden: isFormbricksCloud,
+      disabled: isMembershipPending || isMember,
+      disabledMessage: isMembershipPending
+        ? t("common.loading")
+        : t("common.you_are_not_authorized_to_perform_this_action"),
     },
   ];
 
@@ -242,14 +256,30 @@ export const OrganizationBreadcrumb = ({
 
               {organizationSettings.map((setting) => {
                 return setting.hidden ? null : (
-                  <DropdownMenuCheckboxItem
+                  <div key={setting.id}>
-                    key={setting.id}
+                    {setting.disabled ? (
-                    checked={isActiveOrganizationSetting(pathname, setting.id)}
+                      <Popover>
-                    hidden={setting.hidden}
+                        <PopoverTrigger asChild>
-                    onClick={() => handleSettingChange(setting.href)}
+                          <button
-                    className="cursor-pointer">
+                            type="button"
-                    {setting.label}
+                            aria-disabled="true"
-                  </DropdownMenuCheckboxItem>
+                            className="relative flex w-full cursor-not-allowed select-none items-center rounded-lg py-1.5 pl-8 pr-2 text-sm font-medium text-slate-400">
+                            {setting.label}
+                          </button>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-fit max-w-72 px-3 py-2 text-sm text-slate-700">
+                          {setting.disabledMessage}
+                        </PopoverContent>
+                      </Popover>
+                    ) : (
+                      <DropdownMenuCheckboxItem
+                        checked={isActiveOrganizationSetting(pathname, setting.id)}
+                        onClick={() => handleSettingChange(setting.href)}
+                        className="cursor-pointer">
+                        {setting.label}
+                      </DropdownMenuCheckboxItem>
+                    )}
+                  </div>
                 );
               })}
             </div>

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

@@ -18,6 +18,8 @@ interface ProjectAndOrgSwitchProps {
   isLicenseActive: boolean;
   isOwnerOrManager: boolean;
   isMember: boolean;
+  isBilling: boolean;
+  isMembershipPending: boolean;
   isAccessControlAllowed: boolean;
 }
 
@@ -35,6 +37,8 @@ export const ProjectAndOrgSwitch = ({
   isOwnerOrManager,
   isAccessControlAllowed,
   isMember,
+  isBilling,
+  isMembershipPending,
 }: ProjectAndOrgSwitchProps) => {
   const currentEnvironment = environments.find((env) => env.id === currentEnvironmentId);
   const showEnvironmentBreadcrumb = currentEnvironment?.type === "development";
@@ -50,6 +54,7 @@ export const ProjectAndOrgSwitch = ({
           isFormbricksCloud={isFormbricksCloud}
           isMember={isMember}
           isOwnerOrManager={isOwnerOrManager}
+          isMembershipPending={isMembershipPending}
         />
         {currentProjectId && currentEnvironmentId && (
           <ProjectBreadcrumb
@@ -63,6 +68,8 @@ export const ProjectAndOrgSwitch = ({
             isLicenseActive={isLicenseActive}
             isAccessControlAllowed={isAccessControlAllowed}
             isEnvironmentBreadcrumbVisible={showEnvironmentBreadcrumb}
+            isBilling={isBilling}
+            isMembershipPending={isMembershipPending}
           />
         )}
         {showEnvironmentBreadcrumb && (

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

@@ -1,7 +1,7 @@
 "use client";
 
 import * as Sentry from "@sentry/nextjs";
-import { ChevronDownIcon, ChevronRightIcon, CogIcon, HotelIcon, Loader2, PlusIcon } from "lucide-react";
+import { ChevronDownIcon, ChevronRightIcon, CogIcon, FoldersIcon, Loader2, PlusIcon } from "lucide-react";
 import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useState, useTransition } from "react";
 import { useTranslation } from "react-i18next";
@@ -19,6 +19,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/modules/ui/components/dropdown-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "@/modules/ui/components/popover";
 import { ModalButton } from "@/modules/ui/components/upgrade-prompt";
 import { useProject } from "../context/environment-context";
 
@@ -33,6 +34,8 @@ interface ProjectBreadcrumbProps {
   currentEnvironmentId: string;
   isAccessControlAllowed: boolean;
   isEnvironmentBreadcrumbVisible: boolean;
+  isBilling: boolean;
+  isMembershipPending: boolean;
 }
 
 const isActiveProjectSetting = (pathname: string, settingId: string): boolean => {
@@ -56,6 +59,8 @@ export const ProjectBreadcrumb = ({
   currentEnvironmentId,
   isAccessControlAllowed,
   isEnvironmentBreadcrumbVisible,
+  isBilling,
+  isMembershipPending,
 }: ProjectBreadcrumbProps) => {
   const { t } = useTranslation();
   const [isProjectDropdownOpen, setIsProjectDropdownOpen] = useState(false);
@@ -82,7 +87,7 @@ export const ProjectBreadcrumb = ({
       getProjectsForSwitcherAction({ organizationId: currentOrganizationId }).then((result) => {
         if (result?.data) {
           // Sort projects by name
-          const sorted = result.data.toSorted((a, b) => a.name.localeCompare(b.name));
+          const sorted = [...result.data].sort((a, b) => a.name.localeCompare(b.name));
           setProjects(sorted);
         } else {
           // Handle server errors or validation errors
@@ -134,6 +139,10 @@ export const ProjectBreadcrumb = ({
       href: `/environments/${currentEnvironmentId}/workspace/tags`,
     },
   ];
+  const areProjectSettingsDisabled = isMembershipPending || isBilling;
+  const projectSettingsDisabledMessage = isMembershipPending
+    ? t("common.loading")
+    : t("common.you_are_not_authorized_to_perform_this_action");
 
   if (!currentProject) {
     const errorMessage = `Workspace not found for workspace id: ${currentProjectId}`;
@@ -143,9 +152,13 @@ export const ProjectBreadcrumb = ({
   }
 
   const handleProjectChange = (projectId: string) => {
-    if (projectId === currentProjectId) return;
+    const targetPath =
+      projectId === currentProjectId
+        ? `/environments/${currentEnvironmentId}/surveys`
+        : `/workspaces/${projectId}/`;
     startTransition(() => {
-      router.push(`/workspaces/${projectId}/`);
+      setIsProjectDropdownOpen(false);
+      router.push(targetPath);
     });
   };
 
@@ -198,7 +211,7 @@ export const ProjectBreadcrumb = ({
           id="projectDropdownTrigger"
           asChild>
           <div className="flex items-center gap-1">
-            <HotelIcon className="h-3 w-3" strokeWidth={1.5} />
+            <FoldersIcon className="h-3 w-3" strokeWidth={1.5} />
             <span>{projectName}</span>
             {isPending && <Loader2 className="h-3 w-3 animate-spin" strokeWidth={1.5} />}
             {isEnvironmentBreadcrumbVisible && !isProjectDropdownOpen ? (
@@ -211,7 +224,7 @@ export const ProjectBreadcrumb = ({
 
         <DropdownMenuContent align="start" className="mt-2">
           <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
-            <HotelIcon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
+            <FoldersIcon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
             {t("common.choose_workspace")}
           </div>
           {isLoadingProjects && (
@@ -247,7 +260,24 @@ export const ProjectBreadcrumb = ({
                   </DropdownMenuCheckboxItem>
                 ))}
               </DropdownMenuGroup>
-              {isOwnerOrManager && (
+              {isMembershipPending || !isOwnerOrManager ? (
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <button
+                      type="button"
+                      aria-disabled="true"
+                      className="relative flex w-full cursor-not-allowed select-none items-center justify-between rounded-lg py-1.5 pl-8 pr-2 text-sm font-medium text-slate-400">
+                      <span>{t("common.add_new_workspace")}</span>
+                      <PlusIcon className="ml-2 h-4 w-4" strokeWidth={1.5} />
+                    </button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-fit max-w-72 px-3 py-2 text-sm text-slate-700">
+                    {isMembershipPending
+                      ? t("common.loading")
+                      : t("common.you_are_not_authorized_to_perform_this_action")}
+                  </PopoverContent>
+                </Popover>
+              ) : (
                 <DropdownMenuCheckboxItem
                   onClick={handleAddProject}
                   className="w-full cursor-pointer justify-between">
@@ -264,13 +294,30 @@ export const ProjectBreadcrumb = ({
               {t("common.workspace_configuration")}
             </div>
             {projectSettings.map((setting) => (
-              <DropdownMenuCheckboxItem
+              <div key={setting.id}>
-                key={setting.id}
+                {areProjectSettingsDisabled ? (
-                checked={isActiveProjectSetting(pathname, setting.id)}
+                  <Popover>
-                onClick={() => handleProjectSettingsNavigation(setting.id)}
+                    <PopoverTrigger asChild>
-                className="cursor-pointer">
+                      <button
-                {setting.label}
+                        type="button"
-              </DropdownMenuCheckboxItem>
+                        aria-disabled="true"
+                        className="relative flex w-full cursor-not-allowed select-none items-center rounded-lg py-1.5 pl-8 pr-2 text-sm font-medium text-slate-400">
+                        {setting.label}
+                      </button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-fit max-w-72 px-3 py-2 text-sm text-slate-700">
+                      {projectSettingsDisabledMessage}
+                    </PopoverContent>
+                  </Popover>
+                ) : (
+                  <DropdownMenuCheckboxItem
+                    checked={isActiveProjectSetting(pathname, setting.id)}
+                    onClick={() => handleProjectSettingsNavigation(setting.id)}
+                    className="cursor-pointer">
+                    {setting.label}
+                  </DropdownMenuCheckboxItem>
+                )}
+              </div>
             ))}
           </DropdownMenuGroup>
         </DropdownMenuContent>

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

@@ -1,10 +1,11 @@
 import { redirect } from "next/navigation";
 import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
+import { getBillingFallbackPath } from "@/lib/membership/navigation";
 import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
 import { getAccessFlags } from "@/lib/membership/utils";
 import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
 
-const EnvironmentPage = async (props) => {
+const EnvironmentPage = async (props: { params: Promise<{ environmentId: string }> }) => {
   const params = await props.params;
   const { session, organization } = await getEnvironmentAuth(params.environmentId);
 
@@ -12,11 +13,7 @@ const EnvironmentPage = async (props) => {
   const { isBilling } = getAccessFlags(currentUserMembership?.role);
 
   if (isBilling) {
-    if (IS_FORMBRICKS_CLOUD) {
+    return redirect(getBillingFallbackPath(params.environmentId, IS_FORMBRICKS_CLOUD));
-      return redirect(`/environments/${params.environmentId}/settings/billing`);
-    } else {
-      return redirect(`/environments/${params.environmentId}/settings/enterprise`);
-    }
   }
 
   return redirect(`/environments/${params.environmentId}/surveys`);

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

@@ -1,10 +1,14 @@
 import { getServerSession } from "next-auth";
+import { AuthenticationError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { getOrganizationByEnvironmentId } from "@/lib/organization/service";
 import { getProjectByEnvironmentId } from "@/lib/project/service";
 import { getTranslate } from "@/lingodotdev/server";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 
-const AccountSettingsLayout = async (props) => {
+const AccountSettingsLayout = async (props: {
+  params: Promise<{ environmentId: string }>;
+  children: React.ReactNode;
+}) => {
   const params = await props.params;
 
   const { children } = props;
@@ -17,15 +21,15 @@ const AccountSettingsLayout = async (props) => {
   ]);
 
   if (!organization) {
-    throw new Error(t("common.organization_not_found"));
+    throw new ResourceNotFoundError(t("common.organization"), null);
   }
 
   if (!project) {
-    throw new Error(t("common.workspace_not_found"));
+    throw new ResourceNotFoundError(t("common.workspace"), null);
   }
 
   if (!session) {
-    throw new Error(t("common.session_not_found"));
+    throw new AuthenticationError(t("common.not_authenticated"));
   }
 
   return <>{children}</>;

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

@@ -4,7 +4,6 @@ import { z } from "zod";
 import { ZUserNotificationSettings } from "@formbricks/types/user";
 import { getUser, updateUser } from "@/lib/user/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
-import { AuthenticatedActionClientCtx } from "@/lib/utils/action-client/types/context";
 import { withAuditLogging } from "@/modules/ee/audit-logs/lib/handler";
 
 const ZUpdateNotificationSettingsAction = z.object({
@@ -12,26 +11,16 @@ const ZUpdateNotificationSettingsAction = z.object({
 });
 
 export const updateNotificationSettingsAction = authenticatedActionClient
-  .schema(ZUpdateNotificationSettingsAction)
+  .inputSchema(ZUpdateNotificationSettingsAction)
   .action(
-    withAuditLogging(
+    withAuditLogging("updated", "user", async ({ ctx, parsedInput }) => {
-      "updated",
+      const oldObject = await getUser(ctx.user.id);
-      "user",
+      const result = await updateUser(ctx.user.id, {
-      async ({
+        notificationSettings: parsedInput.notificationSettings,
-        ctx,
+      });
-        parsedInput,
+      ctx.auditLoggingCtx.userId = ctx.user.id;
-      }: {
+      ctx.auditLoggingCtx.oldObject = oldObject;
-        ctx: AuthenticatedActionClientCtx;
+      ctx.auditLoggingCtx.newObject = result;
-        parsedInput: Record<string, any>;
+      return result;
-      }) => {
+    })
-        const oldObject = await getUser(ctx.user.id);
-        const result = await updateUser(ctx.user.id, {
-          notificationSettings: parsedInput.notificationSettings,
-        });
-        ctx.auditLoggingCtx.userId = ctx.user.id;
-        ctx.auditLoggingCtx.oldObject = oldObject;
-        ctx.auditLoggingCtx.newObject = result;
-        return result;
-      }
-    )
   );

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

@@ -30,7 +30,7 @@ export const NotificationSwitch = ({
   const isChecked =
     notificationType === "unsubscribedOrganizationIds"
       ? !notificationSettings.unsubscribedOrganizationIds?.includes(surveyOrProjectOrOrganizationId)
-      : notificationSettings[notificationType][surveyOrProjectOrOrganizationId] === true;
+      : notificationSettings[notificationType]?.[surveyOrProjectOrOrganizationId] === true;
 
   const handleSwitchChange = async () => {
     setIsLoading(true);
@@ -49,8 +49,11 @@ export const NotificationSwitch = ({
         ];
       }
     } else {
-      updatedNotificationSettings[notificationType][surveyOrProjectOrOrganizationId] =
+      updatedNotificationSettings[notificationType] = {
-        !updatedNotificationSettings[notificationType][surveyOrProjectOrOrganizationId];
+        ...updatedNotificationSettings[notificationType],
+        [surveyOrProjectOrOrganizationId]:
+          !updatedNotificationSettings[notificationType]?.[surveyOrProjectOrOrganizationId],
+      };
     }
 
     const updatedNotificationSettingsActionResponse = await updateNotificationSettingsAction({
@@ -78,7 +81,7 @@ export const NotificationSwitch = ({
     ) {
       switch (notificationType) {
         case "alert":
-          if (notificationSettings[notificationType][surveyOrProjectOrOrganizationId] === true) {
+          if (notificationSettings[notificationType]?.[surveyOrProjectOrOrganizationId] === true) {
             handleSwitchChange();
             toast.success(
               t(

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

@@ -1,5 +1,6 @@
 import { getServerSession } from "next-auth";
 import { prisma } from "@formbricks/database";
+import { AuthenticationError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { TUserNotificationSettings } from "@formbricks/types/user";
 import { AccountSettingsNavbar } from "@/app/(app)/environments/[environmentId]/settings/(account)/components/AccountSettingsNavbar";
 import { SettingsCard } from "@/app/(app)/environments/[environmentId]/settings/components/SettingsCard";
@@ -16,8 +17,8 @@ const setCompleteNotificationSettings = (
   notificationSettings: TUserNotificationSettings,
   memberships: Membership[]
 ): TUserNotificationSettings => {
-  const newNotificationSettings = {
+  const newNotificationSettings: TUserNotificationSettings = {
-    alert: {},
+    alert: {} as Record<string, boolean>,
     unsubscribedOrganizationIds: notificationSettings.unsubscribedOrganizationIds || [],
   };
   for (const membership of memberships) {
@@ -26,7 +27,8 @@ const setCompleteNotificationSettings = (
       for (const environment of project.environments) {
         for (const survey of environment.surveys) {
           newNotificationSettings.alert[survey.id] =
-            notificationSettings[survey.id]?.responseFinished ||
+            (notificationSettings as unknown as Record<string, Record<string, boolean>>)[survey.id]
+              ?.responseFinished ||
             (notificationSettings.alert && notificationSettings.alert[survey.id]) ||
             false; // check for legacy notification settings w/o "alerts" key
         }
@@ -136,24 +138,27 @@ const getMemberships = async (userId: string): Promise<Membership[]> => {
   return memberships;
 };
 
-const Page = async (props) => {
+const Page = async (props: {
+  params: Promise<{ environmentId: string }>;
+  searchParams: Promise<Record<string, string>>;
+}) => {
   const searchParams = await props.searchParams;
   const params = await props.params;
   const t = await getTranslate();
   const session = await getServerSession(authOptions);
   if (!session) {
-    throw new Error(t("common.session_not_found"));
+    throw new AuthenticationError(t("common.not_authenticated"));
   }
   const autoDisableNotificationType = searchParams["type"];
   const autoDisableNotificationElementId = searchParams["elementId"];
 
   const [user, memberships] = await Promise.all([getUser(session.user.id), getMemberships(session.user.id)]);
   if (!user) {
-    throw new Error(t("common.user_not_found"));
+    throw new AuthenticationError(t("common.not_authenticated"));
   }
 
   if (!memberships) {
-    throw new Error(t("common.membership_not_found"));
+    throw new ResourceNotFoundError(t("common.membership"), null);
   }
 
   if (user?.notificationSettings) {

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

@@ -6,21 +6,20 @@ import {
   TUserUpdateInput,
   ZUserPersonalInfoUpdateInput,
 } from "@formbricks/types/user";
-import {
+import { getIsEmailUnique } from "@/app/(app)/environments/[environmentId]/settings/(account)/profile/lib/user";
-  getIsEmailUnique,
+import { EMAIL_VERIFICATION_DISABLED, PASSWORD_RESET_DISABLED } from "@/lib/constants";
-  verifyUserPassword,
+import { verifyUserPassword } from "@/lib/user/password";
-} from "@/app/(app)/environments/[environmentId]/settings/(account)/profile/lib/user";
-import { EMAIL_VERIFICATION_DISABLED } from "@/lib/constants";
 import { getUser, updateUser } from "@/lib/user/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
 import { AuthenticatedActionClientCtx } from "@/lib/utils/action-client/types/context";
+import { requestPasswordReset } from "@/modules/auth/forgot-password/lib/password-reset-service";
 import { updateBrevoCustomer } from "@/modules/auth/lib/brevo";
 import { applyRateLimit } from "@/modules/core/rate-limit/helpers";
 import { rateLimitConfigs } from "@/modules/core/rate-limit/rate-limit-configs";
 import { withAuditLogging } from "@/modules/ee/audit-logs/lib/handler";
-import { sendForgotPasswordEmail, sendVerificationNewEmail } from "@/modules/email";
+import { sendVerificationNewEmail } from "@/modules/email";
 
-function buildUserUpdatePayload(parsedInput: any): TUserUpdateInput {
+function buildUserUpdatePayload(parsedInput: TUserPersonalInfoUpdateInput): TUserUpdateInput {
   return {
     ...(parsedInput.name && { name: parsedInput.name }),
     ...(parsedInput.locale && { locale: parsedInput.locale }),
@@ -63,50 +62,40 @@ async function handleEmailUpdate({
   return payload;
 }
 
-export const updateUserAction = authenticatedActionClient.schema(ZUserPersonalInfoUpdateInput).action(
+export const updateUserAction = authenticatedActionClient.inputSchema(ZUserPersonalInfoUpdateInput).action(
-  withAuditLogging(
+  withAuditLogging("updated", "user", async ({ ctx, parsedInput }) => {
-    "updated",
+    const oldObject = await getUser(ctx.user.id);
-    "user",
+    let payload = buildUserUpdatePayload(parsedInput);
-    async ({
+    payload = await handleEmailUpdate({ ctx, parsedInput, payload });
-      ctx,
-      parsedInput,
-    }: {
-      ctx: AuthenticatedActionClientCtx;
-      parsedInput: TUserPersonalInfoUpdateInput;
-    }) => {
-      const oldObject = await getUser(ctx.user.id);
-      let payload = buildUserUpdatePayload(parsedInput);
-      payload = await handleEmailUpdate({ ctx, parsedInput, payload });
 
-      // Only proceed with updateUser if we have actual changes to make
+    // Only proceed with updateUser if we have actual changes to make
-      let newObject = oldObject;
+    let newObject = oldObject;
-      if (Object.keys(payload).length > 0) {
+    if (Object.keys(payload).length > 0) {
-        newObject = await updateUser(ctx.user.id, payload);
+      newObject = await updateUser(ctx.user.id, payload);
-      }
-
-      ctx.auditLoggingCtx.userId = ctx.user.id;
-      ctx.auditLoggingCtx.oldObject = oldObject;
-      ctx.auditLoggingCtx.newObject = newObject;
-
-      return true;
     }
-  )
+
+    ctx.auditLoggingCtx.userId = ctx.user.id;
+    ctx.auditLoggingCtx.oldObject = oldObject;
+    ctx.auditLoggingCtx.newObject = newObject;
+
+    return true;
+  })
 );
 
 export const resetPasswordAction = authenticatedActionClient.action(
-  withAuditLogging(
+  withAuditLogging("passwordReset", "user", async ({ ctx }) => {
-    "passwordReset",
+    if (PASSWORD_RESET_DISABLED) {
-    "user",
+      throw new OperationNotAllowedError("Password reset is disabled");
-    async ({ ctx }: { ctx: AuthenticatedActionClientCtx; parsedInput: undefined }) => {
-      if (ctx.user.identityProvider !== "email") {
-        throw new OperationNotAllowedError("Password reset is not allowed for this user.");
-      }
-
-      await sendForgotPasswordEmail(ctx.user);
-
-      ctx.auditLoggingCtx.userId = ctx.user.id;
-
-      return { success: true };
     }
-  )
+
+    if (ctx.user.identityProvider !== "email") {
+      throw new OperationNotAllowedError("Password reset is not allowed for this user.");
+    }
+
+    await requestPasswordReset(ctx.user, "profile");
+
+    ctx.auditLoggingCtx.userId = ctx.user.id;
+
+    return { success: true };
+  })
 );

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

@@ -9,7 +9,7 @@ import { useTranslation } from "react-i18next";
 import { z } from "zod";
 import { TUser, TUserUpdateInput, ZUser, ZUserEmail } from "@formbricks/types/user";
 import { PasswordConfirmationModal } from "@/app/(app)/environments/[environmentId]/settings/(account)/profile/components/password-confirmation-modal";
-import { appLanguages } from "@/lib/i18n/utils";
+import { appLanguages, sortedAppLanguages } from "@/lib/i18n/utils";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { useSignOut } from "@/modules/auth/hooks/use-sign-out";
 import { Button } from "@/modules/ui/components/button";
@@ -116,10 +116,14 @@ export const EditProfileDetailsForm = ({
       setShowModal(true);
     } else {
       try {
-        await updateUserAction({
+        const result = await updateUserAction({
           ...data,
           name: data.name.trim(),
         });
+        if (result?.serverError) {
+          toast.error(getFormattedErrorMessage(result));
+          return;
+        }
         toast.success(t("environments.settings.profile.profile_updated_successfully"));
         window.location.reload();
         form.reset(data);
@@ -198,41 +202,54 @@ export const EditProfileDetailsForm = ({
           <FormField
             control={form.control}
             name="locale"
-            render={({ field }) => (
+            render={({ field }) => {
-              <FormItem className="mt-4">
+              const selectedLanguage = appLanguages.find((l) => l.code === field.value);
-                <FormLabel>{t("common.language")}</FormLabel>
+
-                <FormControl>
+              return (
-                  <DropdownMenu>
+                <FormItem className="mt-4">
-                    <DropdownMenuTrigger asChild>
+                  <FormLabel>{t("common.language")}</FormLabel>
-                      <Button
+                  <FormControl>
-                        type="button"
+                    <DropdownMenu>
-                        variant="ghost"
+                      <DropdownMenuTrigger asChild>
-                        className="h-10 w-full border border-slate-300 px-3 text-left">
+                        <Button
-                        <div className="flex w-full items-center justify-between">
+                          type="button"
-                          {appLanguages.find((l) => l.code === field.value)?.label["en-US"] ?? "NA"}
+                          variant="ghost"
-                          <ChevronDownIcon className="h-4 w-4 text-slate-500" />
+                          className="h-10 w-full border border-slate-300 px-3 text-left">
-                        </div>
+                          <div className="flex w-full items-center justify-between">
-                      </Button>
+                            {selectedLanguage ? (
-                    </DropdownMenuTrigger>
+                              <>
-                    <DropdownMenuContent
+                                {selectedLanguage.label["en-US"]}
-                      className="min-w-[var(--radix-dropdown-menu-trigger-width)] bg-white text-slate-700"
+                                {selectedLanguage.label.native !== selectedLanguage.label["en-US"] &&
-                      align="start">
+                                  ` (${selectedLanguage.label.native})`}
-                      <DropdownMenuRadioGroup value={field.value} onValueChange={field.onChange}>
+                              </>
-                        {appLanguages.map((lang) => (
+                            ) : (
-                          <DropdownMenuRadioItem
+                              t("common.select")
-                            key={lang.code}
+                            )}
-                            value={lang.code}
+                            <ChevronDownIcon className="h-4 w-4 text-slate-500" />
-                            className="min-h-8 cursor-pointer">
+                          </div>
-                            {lang.label["en-US"]}
+                        </Button>
-                          </DropdownMenuRadioItem>
+                      </DropdownMenuTrigger>
-                        ))}
+                      <DropdownMenuContent
-                      </DropdownMenuRadioGroup>
+                        className="min-w-[var(--radix-dropdown-menu-trigger-width)] bg-white text-slate-700"
-                    </DropdownMenuContent>
+                        align="start">
-                  </DropdownMenu>
+                        <DropdownMenuRadioGroup value={field.value} onValueChange={field.onChange}>
-                </FormControl>
+                          {sortedAppLanguages.map((lang) => (
-                <FormError />
+                            <DropdownMenuRadioItem
-              </FormItem>
+                              key={lang.code}
-            )}
+                              value={lang.code}
+                              className="min-h-8 cursor-pointer">
+                              {lang.label["en-US"]}
+                              {lang.label.native !== lang.label["en-US"] && ` (${lang.label.native})`}
+                            </DropdownMenuRadioItem>
+                          ))}
+                        </DropdownMenuRadioGroup>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </FormControl>
+                  <FormError />
+                </FormItem>
+              );
+            }}
           />
 
           {isPasswordResetEnabled && (

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

@@ -98,7 +98,7 @@ export const PasswordConfirmationModal = ({
                             aria-label="password"
                             aria-required="true"
                             required
-                            className="focus:border-brand-dark focus:ring-brand-dark block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
+                            className="block w-full rounded-md border-slate-300 shadow-sm focus:border-brand-dark focus:ring-brand-dark sm:text-sm"
                             value={field.value}
                             onChange={(password) => field.onChange(password)}
                           />

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

@@ -1,8 +1,9 @@
 import { beforeEach, describe, expect, test, vi } from "vitest";
 import { prisma } from "@formbricks/database";
 import { InvalidInputError, ResourceNotFoundError } from "@formbricks/types/errors";
+import { verifyUserPassword } from "@/lib/user/password";
 import { verifyPassword as mockVerifyPasswordImported } from "@/modules/auth/lib/utils";
-import { getIsEmailUnique, verifyUserPassword } from "./user";
+import { getIsEmailUnique } from "./user";
 
 vi.mock("@/modules/auth/lib/utils", () => ({
   verifyPassword: vi.fn(),

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

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

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

@@ -1,6 +1,12 @@
+import { AuthenticationError } from "@formbricks/types/errors";
 import { AccountSettingsNavbar } from "@/app/(app)/environments/[environmentId]/settings/(account)/components/AccountSettingsNavbar";
 import { AccountSecurity } from "@/app/(app)/environments/[environmentId]/settings/(account)/profile/components/AccountSecurity";
-import { EMAIL_VERIFICATION_DISABLED, IS_FORMBRICKS_CLOUD, PASSWORD_RESET_DISABLED } from "@/lib/constants";
+import {
+  EMAIL_VERIFICATION_DISABLED,
+  ENTERPRISE_LICENSE_REQUEST_FORM_URL,
+  IS_FORMBRICKS_CLOUD,
+  PASSWORD_RESET_DISABLED,
+} from "@/lib/constants";
 import { getOrganizationsWhereUserIsSingleOwner } from "@/lib/organization/service";
 import { getUser } from "@/lib/user/service";
 import { getTranslate } from "@/lingodotdev/server";
@@ -28,7 +34,7 @@ const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
   const user = session?.user ? await getUser(session.user.id) : null;
 
   if (!user) {
-    throw new Error(t("common.user_not_found"));
+    throw new AuthenticationError(t("common.not_authenticated"));
   }
 
   const isPasswordResetEnabled = !PASSWORD_RESET_DISABLED && user.identityProvider === "email";
@@ -60,11 +66,11 @@ const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
                   buttons={[
                     {
                       text: IS_FORMBRICKS_CLOUD
-                        ? t("common.start_free_trial")
+                        ? t("common.upgrade_plan")
                         : t("common.request_trial_license"),
                       href: IS_FORMBRICKS_CLOUD
                         ? `/environments/${params.environmentId}/settings/billing`
-                        : "https://formbricks.com/upgrade-self-hosting-license",
+                        : ENTERPRISE_LICENSE_REQUEST_FORM_URL,
                     },
                     {
                       text: t("common.learn_more"),

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

@@ -22,8 +22,9 @@ export const OrganizationSettingsNavbar = ({
   loading,
 }: OrganizationSettingsNavbarProps) => {
   const pathname = usePathname();
-  const { isMember, isOwner } = getAccessFlags(membershipRole);
+  const { isMember, isOwner, isManager } = getAccessFlags(membershipRole);
-  const isPricingDisabled = isMember;
+  const isOwnerOrManager = isOwner || isManager;
+  const isMembershipPending = membershipRole === undefined || loading;
   const { t } = useTranslation();
 
   const navigation = [
@@ -45,7 +46,10 @@ export const OrganizationSettingsNavbar = ({
       label: t("common.api_keys"),
       href: `/environments/${environmentId}/settings/api-keys`,
       current: pathname?.includes("/api-keys"),
-      hidden: !isOwner,
+      disabled: isMembershipPending || !isOwnerOrManager,
+      disabledMessage: isMembershipPending
+        ? t("common.loading")
+        : t("common.you_are_not_authorized_to_perform_this_action"),
     },
     {
       id: "domain",
@@ -58,14 +62,18 @@ export const OrganizationSettingsNavbar = ({
       id: "billing",
       label: t("common.billing"),
       href: `/environments/${environmentId}/settings/billing`,
-      hidden: !isFormbricksCloud || loading,
+      hidden: !isFormbricksCloud,
       current: pathname?.includes("/billing"),
     },
     {
       id: "enterprise",
       label: t("common.enterprise_license"),
       href: `/environments/${environmentId}/settings/enterprise`,
-      hidden: isFormbricksCloud || isPricingDisabled,
+      hidden: isFormbricksCloud,
+      disabled: isMembershipPending || isMember,
+      disabledMessage: isMembershipPending
+        ? t("common.loading")
+        : t("common.you_are_not_authorized_to_perform_this_action"),
       current: pathname?.includes("/enterprise"),
     },
   ];

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

@@ -1,4 +1,5 @@
 import { notFound } from "next/navigation";
+import { AuthenticationError } from "@formbricks/types/errors";
 import { IS_FORMBRICKS_CLOUD, IS_STORAGE_CONFIGURED } from "@/lib/constants";
 import { getTranslate } from "@/lingodotdev/server";
 import { getWhiteLabelPermission } from "@/modules/ee/license-check/lib/utils";
@@ -25,10 +26,10 @@ const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
   );
 
   if (!session) {
-    throw new Error(t("common.session_not_found"));
+    throw new AuthenticationError(t("common.not_authenticated"));
   }
 
-  const hasWhiteLabelPermission = await getWhiteLabelPermission(organization.billing.plan);
+  const hasWhiteLabelPermission = await getWhiteLabelPermission(organization.id);
   const isOwnerOrManager = isManager || isOwner;
 
   const surveys = await getSurveysWithSlugsByOrganizationId(organization.id);

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

@@ -0,0 +1,146 @@
+"use client";
+
+import type { TFunction } from "i18next";
+import Link from "next/link";
+import { useTranslation } from "react-i18next";
+import { SettingsCard } from "@/app/(app)/environments/[environmentId]/settings/components/SettingsCard";
+import type { TEnterpriseLicenseFeatures } from "@/modules/ee/license-check/types/enterprise-license";
+import { Badge } from "@/modules/ui/components/badge";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/modules/ui/components/table";
+
+type TPublicLicenseFeatureKey = Exclude<keyof TEnterpriseLicenseFeatures, "isMultiOrgEnabled" | "ai">;
+
+type TFeatureDefinition = {
+  key: TPublicLicenseFeatureKey;
+  labelKey: string;
+  docsUrl: string;
+};
+
+const getFeatureDefinitions = (t: TFunction): TFeatureDefinition[] => {
+  return [
+    {
+      key: "contacts",
+      labelKey: t("environments.settings.enterprise.license_feature_contacts"),
+      docsUrl:
+        "https://formbricks.com/docs/self-hosting/advanced/enterprise-features/contact-management-segments",
+    },
+    {
+      key: "projects",
+      labelKey: t("environments.settings.enterprise.license_feature_projects"),
+      docsUrl: "https://formbricks.com/docs/self-hosting/advanced/license",
+    },
+    {
+      key: "whitelabel",
+      labelKey: t("environments.settings.enterprise.license_feature_whitelabel"),
+      docsUrl:
+        "https://formbricks.com/docs/self-hosting/advanced/enterprise-features/whitelabel-email-follow-ups",
+    },
+    {
+      key: "removeBranding",
+      labelKey: t("environments.settings.enterprise.license_feature_remove_branding"),
+      docsUrl:
+        "https://formbricks.com/docs/self-hosting/advanced/enterprise-features/hide-powered-by-formbricks",
+    },
+    {
+      key: "twoFactorAuth",
+      labelKey: t("environments.settings.enterprise.license_feature_two_factor_auth"),
+      docsUrl: "https://formbricks.com/docs/xm-and-surveys/core-features/user-management/two-factor-auth",
+    },
+    {
+      key: "sso",
+      labelKey: t("environments.settings.enterprise.license_feature_sso"),
+      docsUrl: "https://formbricks.com/docs/self-hosting/advanced/enterprise-features/oidc-sso",
+    },
+    {
+      key: "saml",
+      labelKey: t("environments.settings.enterprise.license_feature_saml"),
+      docsUrl: "https://formbricks.com/docs/self-hosting/advanced/enterprise-features/saml-sso",
+    },
+    {
+      key: "spamProtection",
+      labelKey: t("environments.settings.enterprise.license_feature_spam_protection"),
+      docsUrl: "https://formbricks.com/docs/xm-and-surveys/surveys/general-features/spam-protection",
+    },
+    {
+      key: "auditLogs",
+      labelKey: t("environments.settings.enterprise.license_feature_audit_logs"),
+      docsUrl: "https://formbricks.com/docs/self-hosting/advanced/enterprise-features/audit-logging",
+    },
+    {
+      key: "accessControl",
+      labelKey: t("environments.settings.enterprise.license_feature_access_control"),
+      docsUrl: "https://formbricks.com/docs/self-hosting/advanced/enterprise-features/team-access",
+    },
+    {
+      key: "quotas",
+      labelKey: t("environments.settings.enterprise.license_feature_quotas"),
+      docsUrl: "https://formbricks.com/docs/xm-and-surveys/surveys/general-features/quota-management",
+    },
+  ];
+};
+
+interface EnterpriseLicenseFeaturesTableProps {
+  features: TEnterpriseLicenseFeatures;
+}
+
+export const EnterpriseLicenseFeaturesTable = ({ features }: EnterpriseLicenseFeaturesTableProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <SettingsCard
+      title={t("environments.settings.enterprise.license_features_table_title")}
+      description={t("environments.settings.enterprise.license_features_table_description")}
+      noPadding>
+      <Table>
+        <TableHeader>
+          <TableRow className="hover:bg-white">
+            <TableHead>{t("environments.settings.enterprise.license_features_table_feature")}</TableHead>
+            <TableHead>{t("environments.settings.enterprise.license_features_table_access")}</TableHead>
+            <TableHead>{t("environments.settings.enterprise.license_features_table_value")}</TableHead>
+            <TableHead>{t("common.documentation")}</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {getFeatureDefinitions(t).map((feature) => {
+            const value = features[feature.key];
+            const isEnabled = typeof value === "boolean" ? value : value === null || value > 0;
+            let displayValue: number | string = "—";
+
+            if (typeof value === "number") {
+              displayValue = value;
+            } else if (value === null) {
+              displayValue = t("environments.settings.enterprise.license_features_table_unlimited");
+            }
+
+            return (
+              <TableRow key={feature.key} className="hover:bg-white">
+                <TableCell className="font-medium text-slate-900">{t(feature.labelKey)}</TableCell>
+                <TableCell>
+                  <Badge
+                    type={isEnabled ? "success" : "gray"}
+                    size="normal"
+                    text={
+                      isEnabled
+                        ? t("environments.settings.enterprise.license_features_table_enabled")
+                        : t("environments.settings.enterprise.license_features_table_disabled")
+                    }
+                  />
+                </TableCell>
+                <TableCell className="text-slate-600">{displayValue}</TableCell>
+                <TableCell>
+                  <Link
+                    href={feature.docsUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-sm font-medium text-slate-700 underline underline-offset-2 hover:text-slate-900">
+                    {t("common.read_docs")}
+                  </Link>
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </SettingsCard>
+  );
+};

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

@@ -0,0 +1,164 @@
+"use client";
+
+import { TFunction } from "i18next";
+import { RotateCcwIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { useTranslation } from "react-i18next";
+import { formatDateForDisplay, formatDateTimeForDisplay } from "@/lib/utils/datetime";
+import { recheckLicenseAction } from "@/modules/ee/license-check/actions";
+import type { TLicenseStatus } from "@/modules/ee/license-check/types/enterprise-license";
+import { Alert, AlertDescription } from "@/modules/ui/components/alert";
+import { Badge } from "@/modules/ui/components/badge";
+import { Button } from "@/modules/ui/components/button";
+import { SettingsCard } from "../../../components/SettingsCard";
+
+interface EnterpriseLicenseStatusProps {
+  status: TLicenseStatus;
+  lastChecked: Date;
+  gracePeriodEnd?: Date;
+  environmentId: string;
+}
+
+const getBadgeConfig = (
+  status: TLicenseStatus,
+  t: TFunction
+): { type: "success" | "error" | "warning" | "gray"; label: string } => {
+  switch (status) {
+    case "active":
+      return { type: "success", label: t("environments.settings.enterprise.license_status_active") };
+    case "expired":
+      return { type: "error", label: t("environments.settings.enterprise.license_status_expired") };
+    case "instance_mismatch":
+      return {
+        type: "error",
+        label: t("environments.settings.enterprise.license_status_instance_mismatch"),
+      };
+    case "unreachable":
+      return { type: "warning", label: t("environments.settings.enterprise.license_status_unreachable") };
+    case "invalid_license":
+      return { type: "error", label: t("environments.settings.enterprise.license_status_invalid") };
+    default:
+      return { type: "gray", label: t("environments.settings.enterprise.license_status") };
+  }
+};
+
+export const EnterpriseLicenseStatus = ({
+  status,
+  lastChecked,
+  gracePeriodEnd,
+  environmentId,
+}: EnterpriseLicenseStatusProps) => {
+  const { t, i18n } = useTranslation();
+  const locale = i18n.resolvedLanguage ?? i18n.language ?? "en-US";
+  const router = useRouter();
+  const [isRechecking, setIsRechecking] = useState(false);
+
+  const handleRecheck = async () => {
+    setIsRechecking(true);
+    try {
+      const result = await recheckLicenseAction({ environmentId });
+      if (result?.serverError) {
+        toast.error(result.serverError || t("environments.settings.enterprise.recheck_license_failed"));
+        return;
+      }
+
+      if (result?.data) {
+        if (result.data.status === "unreachable") {
+          toast.error(t("environments.settings.enterprise.recheck_license_unreachable"));
+        } else if (result.data.status === "instance_mismatch") {
+          toast.error(t("environments.settings.enterprise.recheck_license_instance_mismatch"));
+        } else if (result.data.status === "invalid_license") {
+          toast.error(t("environments.settings.enterprise.recheck_license_invalid"));
+        } else {
+          toast.success(t("environments.settings.enterprise.recheck_license_success"));
+        }
+        router.refresh();
+      } else {
+        toast.error(t("environments.settings.enterprise.recheck_license_failed"));
+      }
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : t("environments.settings.enterprise.recheck_license_failed")
+      );
+    } finally {
+      setIsRechecking(false);
+    }
+  };
+
+  const badgeConfig = getBadgeConfig(status, t);
+
+  return (
+    <SettingsCard
+      title={t("environments.settings.enterprise.license_status")}
+      description={t("environments.settings.enterprise.license_status_description")}>
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center justify-between gap-3">
+          <div className="flex flex-col gap-1.5">
+            <div className="flex flex-wrap items-center gap-3">
+              <Badge type={badgeConfig.type} text={badgeConfig.label} size="normal" className="w-fit" />
+              <span className="text-sm text-slate-500">
+                {t("common.updated_at")} {formatDateTimeForDisplay(new Date(lastChecked), locale)}
+              </span>
+            </div>
+          </div>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={handleRecheck}
+            disabled={isRechecking}
+            className="shrink-0">
+            {isRechecking ? (
+              <>
+                <RotateCcwIcon className="mr-2 h-4 w-4 animate-spin" />
+                {t("environments.settings.enterprise.rechecking")}
+              </>
+            ) : (
+              <>
+                <RotateCcwIcon className="mr-2 h-4 w-4" />
+                {t("environments.settings.enterprise.recheck_license")}
+              </>
+            )}
+          </Button>
+        </div>
+        {status === "unreachable" && gracePeriodEnd && (
+          <Alert variant="warning" size="small">
+            <AlertDescription className="overflow-visible whitespace-normal">
+              {t("environments.settings.enterprise.license_unreachable_grace_period", {
+                gracePeriodEnd: formatDateForDisplay(new Date(gracePeriodEnd), locale, {
+                  year: "numeric",
+                  month: "short",
+                  day: "numeric",
+                }),
+              })}
+            </AlertDescription>
+          </Alert>
+        )}
+        {status === "invalid_license" && (
+          <Alert variant="error" size="small">
+            <AlertDescription className="overflow-visible whitespace-normal">
+              {t("environments.settings.enterprise.license_invalid_description")}
+            </AlertDescription>
+          </Alert>
+        )}
+        {status === "instance_mismatch" && (
+          <Alert variant="error" size="small">
+            <AlertDescription className="overflow-visible whitespace-normal">
+              {t("environments.settings.enterprise.license_instance_mismatch_description")}
+            </AlertDescription>
+          </Alert>
+        )}
+        <p className="border-t border-slate-100 pt-4 text-sm text-slate-500">
+          {t("environments.settings.enterprise.questions_please_reach_out_to")}{" "}
+          <a
+            className="font-medium text-slate-700 underline hover:text-slate-900"
+            href="mailto:hola@formbricks.com">
+            hola@formbricks.com
+          </a>
+        </p>
+      </div>
+    </SettingsCard>
+  );
+};

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

@@ -2,15 +2,17 @@ import { CheckIcon } from "lucide-react";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { OrganizationSettingsNavbar } from "@/app/(app)/environments/[environmentId]/settings/(organization)/components/OrganizationSettingsNavbar";
-import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
+import { EnterpriseLicenseStatus } from "@/app/(app)/environments/[environmentId]/settings/(organization)/enterprise/components/EnterpriseLicenseStatus";
+import { ENTERPRISE_LICENSE_REQUEST_FORM_URL, IS_FORMBRICKS_CLOUD } from "@/lib/constants";
 import { getTranslate } from "@/lingodotdev/server";
-import { getEnterpriseLicense } from "@/modules/ee/license-check/lib/license";
+import { GRACE_PERIOD_MS, getEnterpriseLicense } from "@/modules/ee/license-check/lib/license";
 import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
 import { Button } from "@/modules/ui/components/button";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
+import { EnterpriseLicenseFeaturesTable } from "./components/EnterpriseLicenseFeaturesTable";
 
-const Page = async (props) => {
+const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
   const params = await props.params;
   const t = await getTranslate();
   if (IS_FORMBRICKS_CLOUD) {
@@ -25,7 +27,8 @@ const Page = async (props) => {
     return notFound();
   }
 
-  const { active: isEnterpriseEdition } = await getEnterpriseLicense();
+  const licenseState = await getEnterpriseLicense();
+  const hasLicense = licenseState.status !== "no-license";
 
   const paidFeatures = [
     {
@@ -90,35 +93,26 @@ const Page = async (props) => {
           activeId="enterprise"
         />
       </PageHeader>
-      {isEnterpriseEdition ? (
+      {hasLicense ? (
-        <div>
+        <>
-          <div className="mt-8 max-w-4xl rounded-lg border border-slate-300 bg-slate-100 shadow-sm">
+          <EnterpriseLicenseStatus
-            <div className="space-y-4 p-8">
+            status={licenseState.status}
-              <div className="flex items-center gap-x-2">
+            lastChecked={licenseState.lastChecked}
-                <div className="rounded-full border border-green-300 bg-green-100 p-0.5 dark:bg-green-800">
+            gracePeriodEnd={
-                  <CheckIcon className="h-5 w-5 p-0.5 text-green-500 dark:text-green-400" />
+              licenseState.status === "unreachable"
-                </div>
+                ? new Date(licenseState.lastChecked.getTime() + GRACE_PERIOD_MS)
-                <p className="text-slate-800">
+                : undefined
-                  {t(
+            }
-                    "environments.settings.enterprise.your_enterprise_license_is_active_all_features_unlocked"
+            environmentId={params.environmentId}
-                  )}
+          />
-                </p>
+          {licenseState.features && <EnterpriseLicenseFeaturesTable features={licenseState.features} />}
-              </div>
+        </>
-              <p className="text-sm text-slate-500">
-                {t("environments.settings.enterprise.questions_please_reach_out_to")}{" "}
-                <a className="font-semibold underline" href="mailto:hola@formbricks.com">
-                  hola@formbricks.com
-                </a>
-              </p>
-            </div>
-          </div>
-        </div>
       ) : (
         <div>
           <div className="relative isolate mt-8 overflow-hidden rounded-lg bg-slate-900 px-3 pt-8 shadow-2xl sm:px-8 md:pt-12 lg:flex lg:gap-x-10 lg:px-12 lg:pt-0">
             <svg
               viewBox="0 0 1024 1024"
-              className="absolute top-1/2 left-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
+              className="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
               aria-hidden="true">
               <circle
                 cx={512}
@@ -153,8 +147,8 @@ const Page = async (props) => {
                 {t("environments.settings.enterprise.enterprise_features")}
               </h2>
               <ul className="my-4 space-y-4">
-                {paidFeatures.map((feature, index) => (
+                {paidFeatures.map((feature) => (
-                  <li key={index} className="flex items-center">
+                  <li key={feature.title} className="flex items-center">
                     <div className="rounded-full border border-green-300 bg-green-100 p-0.5 dark:bg-green-800">
                       <CheckIcon className="h-5 w-5 p-0.5 text-green-500 dark:text-green-400" />
                     </div>
@@ -179,7 +173,7 @@ const Page = async (props) => {
               </p>
               <Button asChild>
                 <Link
-                  href="https://app.formbricks.com/s/clvupq3y205i5yrm3sm9v1xt5"
+                  href={ENTERPRISE_LICENSE_REQUEST_FORM_URL}
                   target="_blank"
                   rel="noopener noreferrer nofollow"
                   referrerPolicy="no-referrer">

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/general/actions.test.ts

@@ -0,0 +1,218 @@
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { AuthorizationError, OperationNotAllowedError } from "@formbricks/types/errors";
+import { updateOrganizationAISettingsAction } from "./actions";
+import { ZOrganizationAISettingsInput } from "./schemas";
+
+const mocks = vi.hoisted(() => ({
+  isInstanceAIConfigured: vi.fn(),
+  checkAuthorizationUpdated: vi.fn(),
+  deleteOrganization: vi.fn(),
+  getOrganization: vi.fn(),
+  getIsMultiOrgEnabled: vi.fn(),
+  getTranslate: vi.fn(),
+  updateOrganization: vi.fn(),
+}));
+
+vi.mock("@/lib/utils/action-client", () => ({
+  authenticatedActionClient: {
+    inputSchema: vi.fn(() => ({
+      action: vi.fn((fn) => fn),
+    })),
+  },
+}));
+
+vi.mock("@/lib/utils/action-client/action-client-middleware", () => ({
+  checkAuthorizationUpdated: mocks.checkAuthorizationUpdated,
+}));
+
+vi.mock("@/lib/organization/service", () => ({
+  deleteOrganization: mocks.deleteOrganization,
+  getOrganization: mocks.getOrganization,
+  updateOrganization: mocks.updateOrganization,
+}));
+
+vi.mock("@/lib/ai/service", () => ({
+  isInstanceAIConfigured: mocks.isInstanceAIConfigured,
+}));
+
+vi.mock("@/lingodotdev/server", () => ({
+  getTranslate: mocks.getTranslate,
+}));
+
+vi.mock("@/modules/ee/audit-logs/lib/handler", () => ({
+  withAuditLogging: vi.fn((_eventName, _objectType, fn) => fn),
+}));
+
+vi.mock("@/modules/ee/license-check/lib/utils", () => ({
+  getIsMultiOrgEnabled: mocks.getIsMultiOrgEnabled,
+}));
+
+const organizationId = "cm9gptbhg0000192zceq9ayuc";
+
+describe("organization AI settings actions", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    mocks.checkAuthorizationUpdated.mockResolvedValue(undefined);
+    mocks.getOrganization.mockResolvedValue({
+      id: organizationId,
+      isAISmartToolsEnabled: false,
+      isAIDataAnalysisEnabled: false,
+    });
+    mocks.isInstanceAIConfigured.mockReturnValue(true);
+    mocks.getTranslate.mockResolvedValue((key: string, values?: Record<string, string>) =>
+      values ? `${key}:${JSON.stringify(values)}` : key
+    );
+    mocks.updateOrganization.mockResolvedValue({
+      id: organizationId,
+      isAISmartToolsEnabled: true,
+      isAIDataAnalysisEnabled: false,
+    });
+    mocks.getIsMultiOrgEnabled.mockResolvedValue(true);
+  });
+
+  test("accepts AI toggle updates", () => {
+    expect(
+      ZOrganizationAISettingsInput.parse({
+        isAISmartToolsEnabled: true,
+      })
+    ).toEqual({
+      isAISmartToolsEnabled: true,
+    });
+  });
+
+  test("passes owner and manager roles to the authorization check and updates organization settings", async () => {
+    const ctx = {
+      user: { id: "user_1", locale: "en-US" },
+      auditLoggingCtx: {},
+    };
+    const parsedInput = {
+      organizationId,
+      data: {
+        isAISmartToolsEnabled: true,
+      },
+    };
+
+    const result = await updateOrganizationAISettingsAction({ ctx, parsedInput } as any);
+
+    expect(mocks.checkAuthorizationUpdated).toHaveBeenCalledWith({
+      userId: "user_1",
+      organizationId,
+      access: [
+        {
+          type: "organization",
+          schema: ZOrganizationAISettingsInput,
+          data: parsedInput.data,
+          roles: ["owner", "manager"],
+        },
+      ],
+    });
+    expect(mocks.getOrganization).toHaveBeenCalledWith(organizationId);
+    expect(mocks.updateOrganization).toHaveBeenCalledWith(organizationId, parsedInput.data);
+    expect(ctx.auditLoggingCtx).toMatchObject({
+      organizationId,
+      oldObject: {
+        id: organizationId,
+        isAISmartToolsEnabled: false,
+        isAIDataAnalysisEnabled: false,
+      },
+      newObject: {
+        id: organizationId,
+        isAISmartToolsEnabled: true,
+        isAIDataAnalysisEnabled: false,
+      },
+    });
+    expect(result).toEqual({
+      id: organizationId,
+      isAISmartToolsEnabled: true,
+      isAIDataAnalysisEnabled: false,
+    });
+  });
+
+  test("propagates authorization failures so members cannot update AI settings", async () => {
+    mocks.checkAuthorizationUpdated.mockRejectedValueOnce(new AuthorizationError("Not authorized"));
+
+    await expect(
+      updateOrganizationAISettingsAction({
+        ctx: {
+          user: { id: "user_member", locale: "en-US" },
+          auditLoggingCtx: {},
+        },
+        parsedInput: {
+          organizationId,
+          data: {
+            isAISmartToolsEnabled: true,
+          },
+        },
+      } as any)
+    ).rejects.toThrow(AuthorizationError);
+
+    expect(mocks.updateOrganization).not.toHaveBeenCalled();
+  });
+
+  test("rejects enabling AI when the instance AI provider is not configured", async () => {
+    mocks.isInstanceAIConfigured.mockReturnValueOnce(false);
+
+    await expect(
+      updateOrganizationAISettingsAction({
+        ctx: {
+          user: { id: "user_owner", locale: "en-US" },
+          auditLoggingCtx: {},
+        },
+        parsedInput: {
+          organizationId,
+          data: {
+            isAISmartToolsEnabled: true,
+          },
+        },
+      } as any)
+    ).rejects.toThrow(OperationNotAllowedError);
+
+    expect(mocks.updateOrganization).not.toHaveBeenCalled();
+  });
+
+  test("allows enabling AI when the instance configuration is valid", async () => {
+    await updateOrganizationAISettingsAction({
+      ctx: {
+        user: { id: "user_owner", locale: "en-US" },
+        auditLoggingCtx: {},
+      },
+      parsedInput: {
+        organizationId,
+        data: {
+          isAISmartToolsEnabled: true,
+        },
+      },
+    } as any);
+
+    expect(mocks.updateOrganization).toHaveBeenCalledWith(organizationId, {
+      isAISmartToolsEnabled: true,
+    });
+  });
+
+  test("allows disabling AI when the instance configuration later becomes invalid", async () => {
+    mocks.getOrganization.mockResolvedValueOnce({
+      id: organizationId,
+      isAISmartToolsEnabled: true,
+      isAIDataAnalysisEnabled: false,
+    });
+    mocks.isInstanceAIConfigured.mockReturnValueOnce(false);
+
+    await updateOrganizationAISettingsAction({
+      ctx: {
+        user: { id: "user_owner", locale: "en-US" },
+        auditLoggingCtx: {},
+      },
+      parsedInput: {
+        organizationId,
+        data: {
+          isAISmartToolsEnabled: false,
+        },
+      },
+    } as any);
+
+    expect(mocks.updateOrganization).toHaveBeenCalledWith(organizationId, {
+      isAISmartToolsEnabled: false,
+    });
+  });
+});

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

@@ -2,14 +2,44 @@
 
 import { z } from "zod";
 import { ZId } from "@formbricks/types/common";
-import { OperationNotAllowedError } from "@formbricks/types/errors";
+import { OperationNotAllowedError, ResourceNotFoundError } from "@formbricks/types/errors";
+import type { TOrganizationRole } from "@formbricks/types/memberships";
 import { ZOrganizationUpdateInput } from "@formbricks/types/organizations";
+import { isInstanceAIConfigured } from "@/lib/ai/service";
 import { deleteOrganization, getOrganization, updateOrganization } from "@/lib/organization/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
 import { checkAuthorizationUpdated } from "@/lib/utils/action-client/action-client-middleware";
 import { AuthenticatedActionClientCtx } from "@/lib/utils/action-client/types/context";
+import { getTranslate } from "@/lingodotdev/server";
 import { withAuditLogging } from "@/modules/ee/audit-logs/lib/handler";
 import { getIsMultiOrgEnabled } from "@/modules/ee/license-check/lib/utils";
+import { ZOrganizationAISettingsInput, ZUpdateOrganizationAISettingsAction } from "./schemas";
+
+async function updateOrganizationAction<T extends z.ZodRawShape>({
+  ctx,
+  organizationId,
+  schema,
+  data,
+  roles,
+}: {
+  ctx: AuthenticatedActionClientCtx;
+  organizationId: string;
+  schema: z.ZodObject<T>;
+  data: z.infer<z.ZodObject<T>>;
+  roles: TOrganizationRole[];
+}) {
+  await checkAuthorizationUpdated({
+    userId: ctx.user.id,
+    organizationId,
+    access: [{ type: "organization", schema, data, roles }],
+  });
+  ctx.auditLoggingCtx.organizationId = organizationId;
+  const oldObject = await getOrganization(organizationId);
+  const result = await updateOrganization(organizationId, data);
+  ctx.auditLoggingCtx.oldObject = oldObject;
+  ctx.auditLoggingCtx.newObject = result;
+  return result;
+}
 
 const ZUpdateOrganizationNameAction = z.object({
   organizationId: ZId,
@@ -17,7 +47,7 @@ const ZUpdateOrganizationNameAction = z.object({
 });
 
 export const updateOrganizationNameAction = authenticatedActionClient
-  .schema(ZUpdateOrganizationNameAction)
+  .inputSchema(ZUpdateOrganizationNameAction)
   .action(
     withAuditLogging(
       "updated",
@@ -27,26 +57,104 @@ export const updateOrganizationNameAction = authenticatedActionClient
         parsedInput,
       }: {
         ctx: AuthenticatedActionClientCtx;
-        parsedInput: Record<string, any>;
+        parsedInput: z.infer<typeof ZUpdateOrganizationNameAction>;
-      }) => {
+      }) =>
-        await checkAuthorizationUpdated({
+        updateOrganizationAction({
-          userId: ctx.user.id,
+          ctx,
           organizationId: parsedInput.organizationId,
-          access: [
+          schema: ZOrganizationUpdateInput.pick({ name: true }),
-            {
+          data: parsedInput.data,
-              type: "organization",
+          roles: ["owner"],
-              schema: ZOrganizationUpdateInput.pick({ name: true }),
+        })
-              data: parsedInput.data,
+    )
-              roles: ["owner"],
+  );
-            },
+
-          ],
+type TOrganizationAISettings = Pick<
+  NonNullable<Awaited<ReturnType<typeof getOrganization>>>,
+  "isAISmartToolsEnabled" | "isAIDataAnalysisEnabled"
+>;
+
+type TResolvedOrganizationAISettings = {
+  smartToolsEnabled: boolean;
+  dataAnalysisEnabled: boolean;
+  isEnablingAnyAISetting: boolean;
+};
+
+const resolveOrganizationAISettings = ({
+  data,
+  organization,
+}: {
+  data: z.infer<typeof ZOrganizationAISettingsInput>;
+  organization: TOrganizationAISettings;
+}): TResolvedOrganizationAISettings => {
+  const smartToolsEnabled = Object.hasOwn(data, "isAISmartToolsEnabled")
+    ? (data.isAISmartToolsEnabled ?? organization.isAISmartToolsEnabled)
+    : organization.isAISmartToolsEnabled;
+  const dataAnalysisEnabled = Object.hasOwn(data, "isAIDataAnalysisEnabled")
+    ? (data.isAIDataAnalysisEnabled ?? organization.isAIDataAnalysisEnabled)
+    : organization.isAIDataAnalysisEnabled;
+
+  return {
+    smartToolsEnabled,
+    dataAnalysisEnabled,
+    isEnablingAnyAISetting:
+      (smartToolsEnabled && !organization.isAISmartToolsEnabled) ||
+      (dataAnalysisEnabled && !organization.isAIDataAnalysisEnabled),
+  };
+};
+
+const assertOrganizationAISettingsUpdateAllowed = ({
+  isInstanceAIConfigured,
+  resolvedSettings,
+  t,
+}: {
+  isInstanceAIConfigured: boolean;
+  resolvedSettings: TResolvedOrganizationAISettings;
+  t: Awaited<ReturnType<typeof getTranslate>>;
+}) => {
+  if (resolvedSettings.isEnablingAnyAISetting && !isInstanceAIConfigured) {
+    throw new OperationNotAllowedError(t("environments.settings.general.ai_instance_not_configured"));
+  }
+};
+
+export const updateOrganizationAISettingsAction = authenticatedActionClient
+  .inputSchema(ZUpdateOrganizationAISettingsAction)
+  .action(
+    withAuditLogging(
+      "updated",
+      "organization",
+      async ({
+        ctx,
+        parsedInput,
+      }: {
+        ctx: AuthenticatedActionClientCtx;
+        parsedInput: z.infer<typeof ZUpdateOrganizationAISettingsAction>;
+      }) => {
+        const t = await getTranslate(ctx.user.locale);
+        const organization = await getOrganization(parsedInput.organizationId);
+
+        if (!organization) {
+          throw new ResourceNotFoundError("Organization", parsedInput.organizationId);
+        }
+
+        const resolvedSettings = resolveOrganizationAISettings({
+          data: parsedInput.data,
+          organization,
+        });
+
+        assertOrganizationAISettingsUpdateAllowed({
+          isInstanceAIConfigured: isInstanceAIConfigured(),
+          resolvedSettings,
+          t,
+        });
+
+        return updateOrganizationAction({
+          ctx,
+          organizationId: parsedInput.organizationId,
+          schema: ZOrganizationAISettingsInput,
+          data: parsedInput.data,
+          roles: ["owner", "manager"],
         });
-        ctx.auditLoggingCtx.organizationId = parsedInput.organizationId;
-        const oldObject = await getOrganization(parsedInput.organizationId);
-        const result = await updateOrganization(parsedInput.organizationId, parsedInput.data);
-        ctx.auditLoggingCtx.oldObject = oldObject;
-        ctx.auditLoggingCtx.newObject = result;
-        return result;
       }
     )
   );
@@ -55,13 +163,15 @@ const ZDeleteOrganizationAction = z.object({
   organizationId: ZId,
 });
 
-export const deleteOrganizationAction = authenticatedActionClient.schema(ZDeleteOrganizationAction).action(
+export const deleteOrganizationAction = authenticatedActionClient
-  withAuditLogging(
+  .inputSchema(ZDeleteOrganizationAction)
-    "deleted",
+  .action(
-    "organization",
+    withAuditLogging("deleted", "organization", async ({ ctx, parsedInput }) => {
-    async ({ ctx, parsedInput }: { ctx: AuthenticatedActionClientCtx; parsedInput: Record<string, any> }) => {
       const isMultiOrgEnabled = await getIsMultiOrgEnabled();
-      if (!isMultiOrgEnabled) throw new OperationNotAllowedError("Organization deletion disabled");
+      if (!isMultiOrgEnabled) {
+        const t = await getTranslate(ctx.user.locale);
+        throw new OperationNotAllowedError(t("environments.settings.general.organization_deletion_disabled"));
+      }
 
       await checkAuthorizationUpdated({
         userId: ctx.user.id,
@@ -77,6 +187,5 @@ export const deleteOrganizationAction = authenticatedActionClient.schema(ZDelete
       const oldObject = await getOrganization(parsedInput.organizationId);
       ctx.auditLoggingCtx.oldObject = oldObject;
       return await deleteOrganization(parsedInput.organizationId);
-    }
+    })
-  )
+  );
-);

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

@@ -0,0 +1,118 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { useTranslation } from "react-i18next";
+import { TOrganizationRole } from "@formbricks/types/memberships";
+import { TOrganization } from "@formbricks/types/organizations";
+import { updateOrganizationAISettingsAction } from "@/app/(app)/environments/[environmentId]/settings/(organization)/general/actions";
+import { getDisplayedOrganizationAISettingValue, getOrganizationAIEnablementState } from "@/lib/ai/utils";
+import { getAccessFlags } from "@/lib/membership/utils";
+import { getFormattedErrorMessage } from "@/lib/utils/helper";
+import { AdvancedOptionToggle } from "@/modules/ui/components/advanced-option-toggle";
+import { Alert, AlertDescription } from "@/modules/ui/components/alert";
+
+interface AISettingsToggleProps {
+  organization: TOrganization;
+  membershipRole?: TOrganizationRole;
+  isInstanceAIConfigured: boolean;
+}
+
+export const AISettingsToggle = ({
+  organization,
+  membershipRole,
+  isInstanceAIConfigured,
+}: Readonly<AISettingsToggleProps>) => {
+  const [loadingField, setLoadingField] = useState<string | null>(null);
+  const { t } = useTranslation();
+  const router = useRouter();
+
+  const { isOwner, isManager } = getAccessFlags(membershipRole);
+  const canEdit = isOwner || isManager;
+  const aiEnablementState = getOrganizationAIEnablementState({
+    isInstanceConfigured: isInstanceAIConfigured,
+  });
+  const showInstanceConfigWarning = aiEnablementState.blockReason === "instanceNotConfigured";
+  const isToggleDisabled = loadingField !== null || !canEdit || !aiEnablementState.canEnableFeatures;
+  const aiEnablementBlockedMessage = t("environments.settings.general.ai_instance_not_configured");
+  const displayedSmartToolsValue = getDisplayedOrganizationAISettingValue({
+    currentValue: organization.isAISmartToolsEnabled,
+    isInstanceConfigured: isInstanceAIConfigured,
+  });
+  const displayedDataAnalysisValue = getDisplayedOrganizationAISettingValue({
+    currentValue: organization.isAIDataAnalysisEnabled,
+    isInstanceConfigured: isInstanceAIConfigured,
+  });
+
+  const handleToggle = async (
+    field: "isAISmartToolsEnabled" | "isAIDataAnalysisEnabled",
+    checked: boolean
+  ) => {
+    if (checked && !aiEnablementState.canEnableFeatures) {
+      toast.error(aiEnablementBlockedMessage);
+      return;
+    }
+
+    setLoadingField(field);
+    try {
+      const data =
+        field === "isAISmartToolsEnabled"
+          ? { isAISmartToolsEnabled: checked }
+          : { isAIDataAnalysisEnabled: checked };
+      const response = await updateOrganizationAISettingsAction({
+        organizationId: organization.id,
+        data,
+      });
+
+      if (response?.data) {
+        toast.success(t("environments.settings.general.ai_settings_updated_successfully"));
+        router.refresh();
+      } else {
+        toast.error(getFormattedErrorMessage(response));
+      }
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : t("common.something_went_wrong_please_try_again"));
+    } finally {
+      setLoadingField(null);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {showInstanceConfigWarning && (
+        <Alert variant="warning">
+          <AlertDescription>{aiEnablementBlockedMessage}</AlertDescription>
+        </Alert>
+      )}
+
+      <AdvancedOptionToggle
+        isChecked={displayedSmartToolsValue}
+        onToggle={(checked) => handleToggle("isAISmartToolsEnabled", checked)}
+        htmlId="ai-smart-tools-toggle"
+        title={t("environments.settings.general.ai_smart_tools_enabled")}
+        description={t("environments.settings.general.ai_smart_tools_enabled_description")}
+        disabled={isToggleDisabled}
+        customContainerClass="px-0"
+      />
+
+      <AdvancedOptionToggle
+        isChecked={displayedDataAnalysisValue}
+        onToggle={(checked) => handleToggle("isAIDataAnalysisEnabled", checked)}
+        htmlId="ai-data-analysis-toggle"
+        title={t("environments.settings.general.ai_data_analysis_enabled")}
+        description={t("environments.settings.general.ai_data_analysis_enabled_description")}
+        disabled={isToggleDisabled}
+        customContainerClass="px-0"
+      />
+
+      {!canEdit && (
+        <Alert variant="warning">
+          <AlertDescription>
+            {t("common.only_owners_managers_and_manage_access_members_can_perform_this_action")}
+          </AlertDescription>
+        </Alert>
+      )}
+    </div>
+  );
+};

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

@@ -7,6 +7,7 @@ import { useTranslation } from "react-i18next";
 import { TOrganization } from "@formbricks/types/organizations";
 import { deleteOrganizationAction } from "@/app/(app)/environments/[environmentId]/settings/(organization)/general/actions";
 import { FORMBRICKS_ENVIRONMENT_ID_LS } from "@/lib/localStorage";
+import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { Alert, AlertDescription } from "@/modules/ui/components/alert";
 import { Button } from "@/modules/ui/components/button";
 import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
@@ -32,7 +33,12 @@ export const DeleteOrganization = ({
     setIsDeleting(true);
 
     try {
-      await deleteOrganizationAction({ organizationId: organization.id });
+      const result = await deleteOrganizationAction({ organizationId: organization.id });
+      if (result?.serverError) {
+        toast.error(getFormattedErrorMessage(result));
+        setIsDeleting(false);
+        return;
+      }
       toast.success(t("environments.settings.general.organization_deleted_successfully"));
       if (typeof localStorage !== "undefined") {
         localStorage.removeItem(FORMBRICKS_ENVIRONMENT_ID_LS);
@@ -101,7 +107,7 @@ const DeleteOrganizationModal = ({
 }: DeleteOrganizationModalProps) => {
   const [inputValue, setInputValue] = useState("");
   const { t } = useTranslation();
-  const handleInputChange = (e) => {
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(e.target.value);
   };
 

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

@@ -61,7 +61,7 @@ export const EditOrganizationNameForm = ({ organization, membershipRole }: EditO
         toast.error(errorMessage);
       }
     } catch (err) {
-      toast.error(`Error: ${err.message}`);
+      toast.error(`Error: ${err instanceof Error ? err.message : "Unknown error occurred"}`);
     }
   };
 

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

@@ -1,5 +1,11 @@
 import { OrganizationSettingsNavbar } from "@/app/(app)/environments/[environmentId]/settings/(organization)/components/OrganizationSettingsNavbar";
-import { FB_LOGO_URL, IS_FORMBRICKS_CLOUD, IS_STORAGE_CONFIGURED } from "@/lib/constants";
+import { isInstanceAIConfigured } from "@/lib/ai/service";
+import {
+  ENTERPRISE_LICENSE_REQUEST_FORM_URL,
+  FB_LOGO_URL,
+  IS_FORMBRICKS_CLOUD,
+  IS_STORAGE_CONFIGURED,
+} from "@/lib/constants";
 import { getUser } from "@/lib/user/service";
 import { getTranslate } from "@/lingodotdev/server";
 import { getIsMultiOrgEnabled, getWhiteLabelPermission } from "@/modules/ee/license-check/lib/utils";
@@ -9,7 +15,9 @@ import { Alert, AlertDescription } from "@/modules/ui/components/alert";
 import { IdBadge } from "@/modules/ui/components/id-badge";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
+import packageJson from "@/package.json";
 import { SettingsCard } from "../../components/SettingsCard";
+import { AISettingsToggle } from "./components/AISettingsToggle";
 import { DeleteOrganization } from "./components/DeleteOrganization";
 import { EditOrganizationNameForm } from "./components/EditOrganizationNameForm";
 import { SecurityListTip } from "./components/SecurityListTip";
@@ -25,7 +33,7 @@ const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
   const user = session?.user?.id ? await getUser(session.user.id) : null;
 
   const isMultiOrgEnabled = await getIsMultiOrgEnabled();
-  const hasWhiteLabelPermission = await getWhiteLabelPermission(organization.billing.plan);
+  const hasWhiteLabelPermission = await getWhiteLabelPermission(organization.id);
 
   const isDeleteDisabled = !isOwner || !isMultiOrgEnabled;
   const currentUserRole = currentUserMembership?.role;
@@ -59,6 +67,15 @@ const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
           membershipRole={currentUserMembership?.role}
         />
       </SettingsCard>
+      <SettingsCard
+        title={t("environments.settings.general.ai_enabled")}
+        description={t("environments.settings.general.ai_enabled_description")}>
+        <AISettingsToggle
+          organization={organization}
+          membershipRole={currentUserMembership?.role}
+          isInstanceAIConfigured={isInstanceAIConfigured()}
+        />
+      </SettingsCard>
       <EmailCustomizationSettings
         organization={organization}
         hasWhiteLabelPermission={hasWhiteLabelPermission}
@@ -68,6 +85,7 @@ const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
         fbLogoUrl={FB_LOGO_URL}
         user={user}
         isStorageConfigured={IS_STORAGE_CONFIGURED}
+        enterpriseLicenseRequestFormUrl={ENTERPRISE_LICENSE_REQUEST_FORM_URL}
       />
       {isMultiOrgEnabled && (
         <SettingsCard
@@ -81,7 +99,10 @@ const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
         </SettingsCard>
       )}
 
-      <IdBadge id={organization.id} label={t("common.organization_id")} variant="column" />
+      <div className="space-y-2">
+        <IdBadge id={organization.id} label={t("common.organization_id")} variant="column" />
+        <IdBadge id={packageJson.version} label={t("common.formbricks_version")} variant="column" />
+      </div>
     </PageContentWrapper>
   );
 };

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/general/schemas.ts

@@ -0,0 +1,13 @@
+import { z } from "zod";
+import { ZId } from "@formbricks/types/common";
+import { ZOrganizationUpdateInput } from "@formbricks/types/organizations";
+
+export const ZOrganizationAISettingsInput = ZOrganizationUpdateInput.pick({
+  isAISmartToolsEnabled: true,
+  isAIDataAnalysisEnabled: true,
+});
+
+export const ZUpdateOrganizationAISettingsAction = z.object({
+  organizationId: ZId,
+  data: ZOrganizationAISettingsInput,
+});

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

@@ -1,10 +1,11 @@
 import { getServerSession } from "next-auth";
+import { AuthenticationError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { getOrganizationByEnvironmentId } from "@/lib/organization/service";
 import { getProjectByEnvironmentId } from "@/lib/project/service";
 import { getTranslate } from "@/lingodotdev/server";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 
-const Layout = async (props) => {
+const Layout = async (props: { params: Promise<{ environmentId: string }>; children: React.ReactNode }) => {
   const params = await props.params;
 
   const { children } = props;
@@ -17,15 +18,15 @@ const Layout = async (props) => {
   ]);
 
   if (!organization) {
-    throw new Error(t("common.organization_not_found"));
+    throw new ResourceNotFoundError(t("common.organization"), null);
   }
 
   if (!project) {
-    throw new Error(t("common.workspace_not_found"));
+    throw new ResourceNotFoundError(t("common.workspace"), null);
   }
 
   if (!session) {
-    throw new Error(t("common.session_not_found"));
+    throw new AuthenticationError(t("common.not_authenticated"));
   }
 
   return <>{children}</>;

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

@@ -1,3 +1,3 @@
-export const SettingsTitle = ({ title }) => {
+export const SettingsTitle = ({ title }: { title: string }) => {
   return <h2 className="my-4 text-2xl font-medium leading-6 text-slate-800">{title}</h2>;
 };

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

@@ -1,6 +1,6 @@
 import { redirect } from "next/navigation";
 
-const Page = async (props) => {
+const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
   const params = await props.params;
   return redirect(`/environments/${params.environmentId}/settings/profile`);
 };

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

@@ -4,6 +4,7 @@ import { revalidatePath } from "next/cache";
 import { z } from "zod";
 import { ZId } from "@formbricks/types/common";
 import { ZResponseFilterCriteria } from "@formbricks/types/responses";
+import { getDisplaysBySurveyIdWithContact } from "@/lib/display/service";
 import { getResponseCountBySurveyId, getResponses } from "@/lib/response/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
 import { checkAuthorizationUpdated } from "@/lib/utils/action-client/action-client-middleware";
@@ -22,7 +23,7 @@ const ZGetResponsesAction = z.object({
 });
 
 export const getResponsesAction = authenticatedActionClient
-  .schema(ZGetResponsesAction)
+  .inputSchema(ZGetResponsesAction)
   .action(async ({ ctx, parsedInput }) => {
     await checkAuthorizationUpdated({
       userId: ctx.user.id,
@@ -56,7 +57,7 @@ const ZGetSurveySummaryAction = z.object({
 });
 
 export const getSurveySummaryAction = authenticatedActionClient
-  .schema(ZGetSurveySummaryAction)
+  .inputSchema(ZGetSurveySummaryAction)
   .action(async ({ ctx, parsedInput }) => {
     await checkAuthorizationUpdated({
       userId: ctx.user.id,
@@ -84,7 +85,7 @@ const ZGetResponseCountAction = z.object({
 });
 
 export const getResponseCountAction = authenticatedActionClient
-  .schema(ZGetResponseCountAction)
+  .inputSchema(ZGetResponseCountAction)
   .action(async ({ ctx, parsedInput }) => {
     await checkAuthorizationUpdated({
       userId: ctx.user.id,
@@ -106,3 +107,31 @@ export const getResponseCountAction = authenticatedActionClient
 
     return getResponseCountBySurveyId(parsedInput.surveyId, parsedInput.filterCriteria);
   });
+
+const ZGetDisplaysWithContactAction = z.object({
+  surveyId: ZId,
+  limit: z.int().min(1).max(100),
+  offset: z.int().nonnegative(),
+});
+
+export const getDisplaysWithContactAction = authenticatedActionClient
+  .inputSchema(ZGetDisplaysWithContactAction)
+  .action(async ({ ctx, parsedInput }) => {
+    await checkAuthorizationUpdated({
+      userId: ctx.user.id,
+      organizationId: await getOrganizationIdFromSurveyId(parsedInput.surveyId),
+      access: [
+        {
+          type: "organization",
+          roles: ["owner", "manager"],
+        },
+        {
+          type: "projectTeam",
+          minPermission: "read",
+          projectId: await getProjectIdFromSurveyId(parsedInput.surveyId),
+        },
+      ],
+    });
+
+    return getDisplaysBySurveyIdWithContact(parsedInput.surveyId, parsedInput.limit, parsedInput.offset);
+  });

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

@@ -3,25 +3,22 @@
 import { InboxIcon, PresentationIcon } from "lucide-react";
 import { usePathname } from "next/navigation";
 import { useTranslation } from "react-i18next";
-import { TSurvey } from "@formbricks/types/surveys/types";
+import { useEnvironment } from "@/app/(app)/environments/[environmentId]/context/environment-context";
 import { revalidateSurveyIdPath } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/actions";
+import { useSurvey } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/context/survey-context";
 import { SecondaryNavigation } from "@/modules/ui/components/secondary-navigation";
 
 interface SurveyAnalysisNavigationProps {
-  environmentId: string;
-  survey: TSurvey;
   activeId: string;
 }
 
-export const SurveyAnalysisNavigation = ({
+export const SurveyAnalysisNavigation = ({ activeId }: SurveyAnalysisNavigationProps) => {
-  environmentId,
-  survey,
-  activeId,
-}: SurveyAnalysisNavigationProps) => {
   const pathname = usePathname();
   const { t } = useTranslation();
+  const { environment } = useEnvironment();
+  const { survey } = useSurvey();
 
-  const url = `/environments/${environmentId}/surveys/${survey.id}`;
+  const url = `/environments/${environment.id}/surveys/${survey.id}`;
 
   const navigation = [
     {
@@ -31,7 +28,7 @@ export const SurveyAnalysisNavigation = ({
       href: `${url}/summary?referer=true`,
       current: pathname?.includes("/summary"),
       onClick: () => {
-        revalidateSurveyIdPath(environmentId, survey.id);
+        revalidateSurveyIdPath(environment.id, survey.id);
       },
     },
     {
@@ -41,7 +38,7 @@ export const SurveyAnalysisNavigation = ({
       href: `${url}/responses?referer=true`,
       current: pathname?.includes("/responses"),
       onClick: () => {
-        revalidateSurveyIdPath(environmentId, survey.id);
+        revalidateSurveyIdPath(environment.id, survey.id);
       },
     },
   ];

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

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { createContext, useCallback, useContext, useState } from "react";
+import React, { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
 import {
   ElementOption,
   ElementOptions,
@@ -30,7 +30,7 @@ interface SelectedFilterOptions {
 
 export interface DateRange {
   from: Date | undefined;
-  to?: Date | undefined;
+  to?: Date;
 }
 
 interface FilterDateContextProps {
@@ -41,6 +41,8 @@ interface FilterDateContextProps {
   dateRange: DateRange;
   setDateRange: React.Dispatch<React.SetStateAction<DateRange>>;
   resetState: () => void;
+  refreshAnalysisData: () => Promise<void>;
+  registerAnalysisRefreshHandler: (handler: () => Promise<void>) => () => void;
 }
 
 const ResponseFilterContext = createContext<FilterDateContextProps | undefined>(undefined);
@@ -61,6 +63,7 @@ const ResponseFilterProvider = ({ children }: { children: React.ReactNode }) =>
     from: undefined,
     to: getTodayDate(),
   });
+  const refreshHandlerRef = useRef<(() => Promise<void>) | null>(null);
 
   const resetState = useCallback(() => {
     setDateRange({
@@ -73,20 +76,43 @@ const ResponseFilterProvider = ({ children }: { children: React.ReactNode }) =>
     });
   }, []);
 
-  return (
+  const refreshAnalysisData = useCallback(async () => {
-    <ResponseFilterContext.Provider
+    await refreshHandlerRef.current?.();
-      value={{
+  }, []);
-        setSelectedFilter,
+
-        selectedFilter,
+  const registerAnalysisRefreshHandler = useCallback((handler: () => Promise<void>) => {
-        selectedOptions,
+    refreshHandlerRef.current = handler;
-        setSelectedOptions,
+
-        dateRange,
+    return () => {
-        setDateRange,
+      if (refreshHandlerRef.current === handler) {
-        resetState,
+        refreshHandlerRef.current = null;
-      }}>
+      }
-      {children}
+    };
-    </ResponseFilterContext.Provider>
+  }, []);
+
+  const contextValue = useMemo(
+    () => ({
+      setSelectedFilter,
+      selectedFilter,
+      selectedOptions,
+      setSelectedOptions,
+      dateRange,
+      setDateRange,
+      resetState,
+      refreshAnalysisData,
+      registerAnalysisRefreshHandler,
+    }),
+    [
+      dateRange,
+      refreshAnalysisData,
+      registerAnalysisRefreshHandler,
+      resetState,
+      selectedFilter,
+      selectedOptions,
+    ]
   );
+
+  return <ResponseFilterContext.Provider value={contextValue}>{children}</ResponseFilterContext.Provider>;
 };
 
 const useResponseFilter = () => {

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

@@ -3,6 +3,7 @@ import { getServerSession } from "next-auth";
 import { ResponseFilterProvider } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/response-filter-context";
 import { getResponseCountBySurveyId } from "@/lib/response/service";
 import { getSurvey } from "@/lib/survey/service";
+import { getTranslate } from "@/lingodotdev/server";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 
 type Props = {
@@ -14,10 +15,11 @@ export const generateMetadata = async (props: Props): Promise<Metadata> => {
   const session = await getServerSession(authOptions);
   const survey = await getSurvey(params.surveyId);
   const responseCount = await getResponseCountBySurveyId(params.surveyId);
+  const t = await getTranslate();
 
   if (session) {
     return {
-      title: `${responseCount} Responses | ${survey?.name} Results`,
+      title: `${t("common.count_responses", { count: responseCount })} | ${t("environments.surveys.summary.survey_results", { surveyName: survey?.name })}`,
     };
   }
   return {
@@ -25,7 +27,7 @@ export const generateMetadata = async (props: Props): Promise<Metadata> => {
   };
 };
 
-const SurveyLayout = async ({ children }) => {
+const SurveyLayout = async ({ children }: { children: React.ReactNode }) => {
   return <ResponseFilterProvider>{children}</ResponseFilterProvider>;
 };
 

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

@@ -0,0 +1,22 @@
+"use client";
+
+import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
+import { PageHeader } from "@/modules/ui/components/page-header";
+import { SkeletonLoader } from "@/modules/ui/components/skeleton-loader";
+
+const Loading = () => {
+  return (
+    <PageContentWrapper>
+      <PageHeader pageTitle="" />
+      <div className="flex h-9 animate-pulse gap-2">
+        <div className="h-9 w-36 rounded-full bg-slate-200" />
+        <div className="h-9 w-36 rounded-full bg-slate-200" />
+        <div className="h-9 w-36 rounded-full bg-slate-200" />
+        <div className="h-9 w-36 rounded-full bg-slate-200" />
+      </div>
+      <SkeletonLoader type="summary" />
+    </PageContentWrapper>
+  );
+};
+
+export default Loading;

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

@@ -2,6 +2,8 @@
 
 import { useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import toast from "react-hot-toast";
+import { useTranslation } from "react-i18next";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TSurveyQuota } from "@formbricks/types/quota";
 import { TResponseWithQuotas } from "@formbricks/types/responses";
@@ -13,6 +15,7 @@ import { useResponseFilter } from "@/app/(app)/environments/[environmentId]/surv
 import { ResponseDataView } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseDataView";
 import { CustomFilter } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/CustomFilter";
 import { getFormattedFilters } from "@/app/lib/surveys/surveys";
+import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { replaceHeadlineRecall } from "@/lib/utils/recall";
 
 interface ResponsePageProps {
@@ -46,8 +49,8 @@ export const ResponsePage = ({
   const [page, setPage] = useState<number | null>(null);
   const [hasMore, setHasMore] = useState<boolean>(initialResponses.length >= responsesPerPage);
   const [isFetchingFirstPage, setIsFetchingFirstPage] = useState<boolean>(false);
-  const { selectedFilter, dateRange, resetState } = useResponseFilter();
+  const { selectedFilter, dateRange, resetState, registerAnalysisRefreshHandler } = useResponseFilter();
-
+  const { t } = useTranslation();
   const filters = useMemo(
     () => getFormattedFilters(survey, selectedFilter, dateRange),
 
@@ -86,6 +89,34 @@ export const ResponsePage = ({
     setResponses((prev) => prev.map((r) => (r.id === responseId ? updatedResponse : r)));
   };
 
+  const refetchResponses = useCallback(async () => {
+    setIsFetchingFirstPage(true);
+
+    try {
+      const getResponsesActionResponse = await getResponsesAction({
+        surveyId,
+        limit: responsesPerPage,
+        offset: 0,
+        filterCriteria: filters,
+      });
+
+      if (getResponsesActionResponse?.serverError) {
+        toast.error(getFormattedErrorMessage(getResponsesActionResponse) ?? t("common.something_went_wrong"));
+      }
+
+      const freshResponses = getResponsesActionResponse?.data ?? [];
+      setResponses(freshResponses);
+      setPage(1);
+      setHasMore(freshResponses.length >= responsesPerPage);
+    } finally {
+      setIsFetchingFirstPage(false);
+    }
+  }, [filters, responsesPerPage, surveyId]);
+
+  useEffect(() => {
+    return registerAnalysisRefreshHandler(refetchResponses);
+  }, [refetchResponses, registerAnalysisRefreshHandler]);
+
   const surveyMemoized = useMemo(() => {
     return replaceHeadlineRecall(survey, "default");
   }, [survey]);
@@ -134,6 +165,8 @@ export const ResponsePage = ({
       }
     };
     fetchFilteredResponses();
+    // page is intentionally omitted to avoid refetching after the initial page setup.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filters, responsesPerPage, selectedFilter, dateRange, surveyId]);
 
   return (

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

@@ -29,6 +29,7 @@ import { ResponseTableCell } from "@/app/(app)/environments/[environmentId]/surv
 import { generateResponseTableColumns } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTableColumns";
 import { getResponsesDownloadUrlAction } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/actions";
 import { downloadResponsesFile } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/utils";
+import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { deleteResponseAction } from "@/modules/analysis/components/SingleResponseCard/actions";
 import { Button } from "@/modules/ui/components/button";
 import {
@@ -96,8 +97,8 @@ export const ResponseTable = ({
   const showQuotasColumn = isQuotasAllowed && quotas.length > 0;
   // Generate columns
   const columns = useMemo(
-    () => generateResponseTableColumns(survey, isExpanded ?? false, isReadOnly, t, showQuotasColumn),
+    () => generateResponseTableColumns(survey, isExpanded ?? false, isReadOnly, locale, t, showQuotasColumn),
-    [survey, isExpanded, isReadOnly, t, showQuotasColumn]
+    [survey, isExpanded, isReadOnly, locale, t, showQuotasColumn]
   );
 
   // Save settings to localStorage when they change
@@ -201,15 +202,21 @@ export const ResponseTable = ({
   };
 
   const deleteResponse = async (responseId: string, params?: { decrementQuotas?: boolean }) => {
-    await deleteResponseAction({ responseId, decrementQuotas: params?.decrementQuotas ?? false });
+    const result = await deleteResponseAction({
+      responseId,
+      decrementQuotas: params?.decrementQuotas ?? false,
+    });
+    if (result?.serverError) {
+      throw new Error(getFormattedErrorMessage(result));
+    }
   };
 
   // Handle downloading selected responses
-  const downloadSelectedRows = async (responseIds: string[], format: "csv" | "xlsx") => {
+  const downloadSelectedRows = async (responseIds: string[], format: "xlsx" | "csv") => {
     try {
       const downloadResponse = await getResponsesDownloadUrlAction({
         surveyId: survey.id,
-        format: format,
+        format,
         filterCriteria: { responseIds },
       });
 
@@ -300,7 +307,6 @@ export const ResponseTable = ({
         <DataTableSettingsModal
           open={isTableSettingsModalOpen}
           setOpen={setIsTableSettingsModalOpen}
-          survey={survey}
           table={table}
           columnOrder={columnOrder}
           handleDragEnd={handleDragEnd}

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

@@ -5,13 +5,14 @@ import { TFunction } from "i18next";
 import { CircleHelpIcon, EyeOffIcon, MailIcon, TagIcon } from "lucide-react";
 import Link from "next/link";
 import { TResponseTableData } from "@formbricks/types/responses";
-import { TSurveyElement } from "@formbricks/types/surveys/elements";
+import { TSurveyElement, TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
 import { TSurvey } from "@formbricks/types/surveys/types";
 import { getTextContent } from "@formbricks/types/surveys/validation";
+import { TUserLocale } from "@formbricks/types/user";
 import { getLocalizedValue } from "@/lib/i18n/utils";
 import { extractChoiceIdsFromResponse } from "@/lib/response/utils";
 import { getContactIdentifier } from "@/lib/utils/contact";
-import { getFormattedDateTimeString } from "@/lib/utils/datetime";
+import { formatDateTimeForDisplay } from "@/lib/utils/datetime";
 import { recallToHeadline } from "@/lib/utils/recall";
 import { RenderResponse } from "@/modules/analysis/components/SingleResponseCard/components/RenderResponse";
 import { getElementsFromBlocks } from "@/modules/survey/lib/client-utils";
@@ -34,6 +35,7 @@ const getElementColumnsData = (
   element: TSurveyElement,
   survey: TSurvey,
   isExpanded: boolean,
+  locale: TUserLocale,
   t: TFunction
 ): ColumnDef<TResponseTableData>[] => {
   const ELEMENTS_ICON_MAP = getElementIconMap(t);
@@ -41,7 +43,7 @@ const getElementColumnsData = (
   const contactInfoFields = ["firstName", "lastName", "email", "phone", "company"];
 
   // Helper function to create consistent column headers
-  const createElementHeader = (elementType: string, headline: string, suffix?: string) => {
+  const createElementHeader = (elementType: TSurveyElementTypeEnum, headline: string, suffix?: string) => {
     const title = suffix ? `${headline} - ${suffix}` : headline;
     const ElementHeader = () => (
       <div className="flex items-center justify-between">
@@ -167,6 +169,7 @@ const getElementColumnsData = (
                 survey={survey}
                 responseData={responseValue}
                 language={language}
+                locale={locale}
                 isExpanded={isExpanded}
                 showId={false}
               />
@@ -218,6 +221,7 @@ const getElementColumnsData = (
                 survey={survey}
                 responseData={responseValue}
                 language={language}
+                locale={locale}
                 isExpanded={isExpanded}
                 showId={false}
               />
@@ -232,7 +236,7 @@ const getMetadataColumnsData = (t: TFunction): ColumnDef<TResponseTableData>[] =
   const metadataColumns: ColumnDef<TResponseTableData>[] = [];
 
   METADATA_FIELDS.forEach((label) => {
-    const IconComponent = COLUMNS_ICON_MAP[label];
+    const IconComponent = COLUMNS_ICON_MAP[label as keyof typeof COLUMNS_ICON_MAP];
 
     metadataColumns.push({
       accessorKey: "METADATA_" + label,
@@ -259,11 +263,14 @@ export const generateResponseTableColumns = (
   survey: TSurvey,
   isExpanded: boolean,
   isReadOnly: boolean,
+  locale: TUserLocale,
   t: TFunction,
   showQuotasColumn: boolean
 ): ColumnDef<TResponseTableData>[] => {
   const elements = getElementsFromBlocks(survey.blocks);
-  const elementColumns = elements.flatMap((element) => getElementColumnsData(element, survey, isExpanded, t));
+  const elementColumns = elements.flatMap((element) =>
+    getElementColumnsData(element, survey, isExpanded, locale, t)
+  );
 
   const dateColumn: ColumnDef<TResponseTableData> = {
     accessorKey: "createdAt",
@@ -271,7 +278,7 @@ export const generateResponseTableColumns = (
     size: 200,
     cell: ({ row }) => {
       const date = new Date(row.original.createdAt);
-      return <p className="text-slate-900">{getFormattedDateTimeString(date)}</p>;
+      return <p className="text-slate-900">{formatDateTimeForDisplay(date, locale)}</p>;
     },
   };
 
@@ -316,6 +323,14 @@ export const generateResponseTableColumns = (
     },
   };
 
+  const responseIdColumn: ColumnDef<TResponseTableData> = {
+    accessorKey: "responseId",
+    header: () => <div className="gap-x-1.5">{t("common.response_id")}</div>,
+    cell: ({ row }) => {
+      return <IdBadge id={row.original.responseId} />;
+    },
+  };
+
   const quotasColumn: ColumnDef<TResponseTableData> = {
     accessorKey: "quota",
     header: t("common.quota"),
@@ -414,6 +429,7 @@ export const generateResponseTableColumns = (
   const baseColumns = [
     personColumn,
     singleUseIdColumn,
+    responseIdColumn,
     dateColumn,
     ...(showQuotasColumn ? [quotasColumn] : []),
     statusColumn,

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

@@ -1,4 +1,5 @@
 import "@testing-library/jest-dom/vitest";
+import { TFunction } from "i18next";
 import {
   AirplayIcon,
   ArrowUpFromDotIcon,
@@ -38,7 +39,7 @@ describe("utils", () => {
       "environments.surveys.responses.source": "Source",
     };
     return translations[key] || key;
-  });
+  }) as unknown as TFunction;
 
   describe("getAddressFieldLabel", () => {
     test("returns correct label for addressLine1", () => {

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

@@ -1,5 +1,4 @@
 import { TFunction } from "i18next";
-import { capitalize } from "lodash";
 import {
   AirplayIcon,
   ArrowUpFromDotIcon,
@@ -9,6 +8,7 @@ import {
   SmartphoneIcon,
 } from "lucide-react";
 import { TResponseMeta } from "@formbricks/types/responses";
+import { capitalize } from "@/lib/utils/object";
 
 export const getAddressFieldLabel = (field: string, t: TFunction) => {
   switch (field) {
@@ -80,9 +80,24 @@ export const COLUMNS_ICON_MAP = {
 const userAgentFields = ["browser", "os", "device"];
 export const METADATA_FIELDS = ["action", "country", ...userAgentFields, "source", "url"];
 
-export const getMetadataValue = (meta: TResponseMeta, label: string) => {
+export const getMetadataValue = (
-  if (userAgentFields.includes(label)) {
+  meta: TResponseMeta,
-    return meta.userAgent?.[label];
+  label: (typeof METADATA_FIELDS)[number]
+): string | undefined => {
+  switch (label) {
+    case "browser":
+      return meta.userAgent?.browser;
+    case "os":
+      return meta.userAgent?.os;
+    case "device":
+      return meta.userAgent?.device;
+    case "action":
+      return meta.action;
+    case "country":
+      return meta.country;
+    case "source":
+      return meta.source;
+    case "url":
+      return meta.url;
   }
-  return meta[label];
 };

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

@@ -0,0 +1,23 @@
+"use client";
+
+import { useTranslation } from "react-i18next";
+import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
+import { PageHeader } from "@/modules/ui/components/page-header";
+import { SkeletonLoader } from "@/modules/ui/components/skeleton-loader";
+
+const Loading = () => {
+  const { t } = useTranslation();
+
+  return (
+    <PageContentWrapper>
+      <PageHeader pageTitle={t("common.responses")} />
+      <div className="flex h-9 animate-pulse gap-1.5">
+        <div className="h-9 w-36 rounded-full bg-slate-200" />
+        <div className="h-9 w-36 rounded-full bg-slate-200" />
+      </div>
+      <SkeletonLoader type="responseTable" />
+    </PageContentWrapper>
+  );
+};
+
+export default Loading;

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

@@ -1,13 +1,18 @@
+import { AuthenticationError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { SurveyAnalysisNavigation } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/SurveyAnalysisNavigation";
 import { ResponsePage } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponsePage";
 import { SurveyAnalysisCTA } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SurveyAnalysisCTA";
-import { IS_FORMBRICKS_CLOUD, IS_STORAGE_CONFIGURED, RESPONSES_PER_PAGE } from "@/lib/constants";
+import {
+  ENTERPRISE_LICENSE_REQUEST_FORM_URL,
+  IS_FORMBRICKS_CLOUD,
+  IS_STORAGE_CONFIGURED,
+  RESPONSES_PER_PAGE,
+} from "@/lib/constants";
 import { getPublicDomain } from "@/lib/getPublicUrl";
 import { getResponseCountBySurveyId, getResponses } from "@/lib/response/service";
 import { getSurvey } from "@/lib/survey/service";
 import { getTagsByEnvironmentId } from "@/lib/tag/service";
 import { getUser } from "@/lib/user/service";
-import { findMatchingLocale } from "@/lib/utils/locale";
 import { getTranslate } from "@/lingodotdev/server";
 import { getSegments } from "@/modules/ee/contacts/segments/lib/segments";
 import { getIsContactsEnabled, getIsQuotasEnabled } from "@/modules/ee/license-check/lib/utils";
@@ -17,31 +22,30 @@ import { getOrganizationBilling } from "@/modules/survey/lib/survey";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
 
-const Page = async (props) => {
+const Page = async (props: { params: Promise<{ environmentId: string; surveyId: string }> }) => {
   const params = await props.params;
   const t = await getTranslate();
 
   const { session, environment, organization, isReadOnly } = await getEnvironmentAuth(params.environmentId);
 
-  const [survey, user, tags, isContactsEnabled, responseCount, locale] = await Promise.all([
+  const [survey, user, tags, isContactsEnabled, responseCount] = await Promise.all([
     getSurvey(params.surveyId),
     getUser(session.user.id),
     getTagsByEnvironmentId(params.environmentId),
-    getIsContactsEnabled(),
+    getIsContactsEnabled(organization.id),
     getResponseCountBySurveyId(params.surveyId),
-    findMatchingLocale(),
   ]);
 
   if (!survey) {
-    throw new Error(t("common.survey_not_found"));
+    throw new ResourceNotFoundError(t("common.survey"), params.surveyId);
   }
 
   if (!user) {
-    throw new Error(t("common.user_not_found"));
+    throw new AuthenticationError(t("common.not_authenticated"));
   }
 
   if (!organization) {
-    throw new Error(t("common.organization_not_found"));
+    throw new ResourceNotFoundError(t("common.organization"), null);
   }
 
   const segments = isContactsEnabled ? await getSegments(params.environmentId) : [];
@@ -50,10 +54,10 @@ const Page = async (props) => {
 
   const organizationBilling = await getOrganizationBilling(organization.id);
   if (!organizationBilling) {
-    throw new Error(t("common.organization_not_found"));
+    throw new ResourceNotFoundError(t("common.organization"), organization.id);
   }
 
-  const isQuotasAllowed = await getIsQuotasEnabled(organizationBilling.plan);
+  const isQuotasAllowed = await getIsQuotasEnabled(organization.id);
   const quotas = isQuotasAllowed ? await getQuotas(survey.id) : [];
 
   // Fetch initial responses on the server to prevent duplicate client-side fetch
@@ -65,8 +69,6 @@ const Page = async (props) => {
         pageTitle={survey.name}
         cta={
           <SurveyAnalysisCTA
-            environment={environment}
-            survey={survey}
             isReadOnly={isReadOnly}
             user={user}
             publicDomain={publicDomain}
@@ -75,9 +77,10 @@ const Page = async (props) => {
             isContactsEnabled={isContactsEnabled}
             isFormbricksCloud={IS_FORMBRICKS_CLOUD}
             isStorageConfigured={IS_STORAGE_CONFIGURED}
+            enterpriseLicenseRequestFormUrl={ENTERPRISE_LICENSE_REQUEST_FORM_URL}
           />
         }>
-        <SurveyAnalysisNavigation environmentId={environment.id} survey={survey} activeId="responses" />
+        <SurveyAnalysisNavigation activeId="responses" />
       </PageHeader>
       <ResponsePage
         environment={environment}
@@ -86,7 +89,7 @@ const Page = async (props) => {
         environmentTags={tags}
         user={user}
         responsesPerPage={RESPONSES_PER_PAGE}
-        locale={locale}
+        locale={user.locale}
         isReadOnly={isReadOnly}
         isQuotasAllowed={isQuotasAllowed}
         quotas={quotas}

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

@@ -7,7 +7,6 @@ import { getEmailTemplateHtml } from "@/app/(app)/environments/[environmentId]/s
 import { getSurvey, updateSurvey } from "@/lib/survey/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
 import { checkAuthorizationUpdated } from "@/lib/utils/action-client/action-client-middleware";
-import { AuthenticatedActionClientCtx } from "@/lib/utils/action-client/types/context";
 import { convertToCsv } from "@/lib/utils/file-conversion";
 import { getOrganizationIdFromSurveyId, getProjectIdFromSurveyId } from "@/lib/utils/helper";
 import { withAuditLogging } from "@/modules/ee/audit-logs/lib/handler";
@@ -22,7 +21,7 @@ const ZSendEmbedSurveyPreviewEmailAction = z.object({
 });
 
 export const sendEmbedSurveyPreviewEmailAction = authenticatedActionClient
-  .schema(ZSendEmbedSurveyPreviewEmailAction)
+  .inputSchema(ZSendEmbedSurveyPreviewEmailAction)
   .action(async ({ ctx, parsedInput }) => {
     const organizationId = await getOrganizationIdFromSurveyId(parsedInput.surveyId);
     const organizationLogoUrl = await getOrganizationLogoUrl(organizationId);
@@ -65,57 +64,49 @@ export const sendEmbedSurveyPreviewEmailAction = authenticatedActionClient
 
 const ZResetSurveyAction = z.object({
   surveyId: ZId,
-  organizationId: ZId,
   projectId: ZId,
 });
 
-export const resetSurveyAction = authenticatedActionClient.schema(ZResetSurveyAction).action(
+export const resetSurveyAction = authenticatedActionClient.inputSchema(ZResetSurveyAction).action(
-  withAuditLogging(
+  withAuditLogging("updated", "survey", async ({ ctx, parsedInput }) => {
-    "updated",
+    const organizationId = await getOrganizationIdFromSurveyId(parsedInput.surveyId);
-    "survey",
+    const projectId = await getProjectIdFromSurveyId(parsedInput.surveyId);
-    async ({
-      ctx,
-      parsedInput,
-    }: {
-      ctx: AuthenticatedActionClientCtx;
-      parsedInput: z.infer<typeof ZResetSurveyAction>;
-    }) => {
-      await checkAuthorizationUpdated({
-        userId: ctx.user.id,
-        organizationId: parsedInput.organizationId,
-        access: [
-          {
-            type: "organization",
-            roles: ["owner", "manager"],
-          },
-          {
-            type: "projectTeam",
-            minPermission: "readWrite",
-            projectId: parsedInput.projectId,
-          },
-        ],
-      });
 
-      ctx.auditLoggingCtx.organizationId = parsedInput.organizationId;
+    await checkAuthorizationUpdated({
-      ctx.auditLoggingCtx.surveyId = parsedInput.surveyId;
+      userId: ctx.user.id,
-      ctx.auditLoggingCtx.oldObject = null;
+      organizationId,
+      access: [
+        {
+          type: "organization",
+          roles: ["owner", "manager"],
+        },
+        {
+          type: "projectTeam",
+          minPermission: "readWrite",
+          projectId,
+        },
+      ],
+    });
 
-      const { deletedResponsesCount, deletedDisplaysCount } = await deleteResponsesAndDisplaysForSurvey(
+    ctx.auditLoggingCtx.organizationId = organizationId;
-        parsedInput.surveyId
+    ctx.auditLoggingCtx.surveyId = parsedInput.surveyId;
-      );
+    ctx.auditLoggingCtx.oldObject = null;
 
-      ctx.auditLoggingCtx.newObject = {
+    const { deletedResponsesCount, deletedDisplaysCount } = await deleteResponsesAndDisplaysForSurvey(
-        deletedResponsesCount: deletedResponsesCount,
+      parsedInput.surveyId
-        deletedDisplaysCount: deletedDisplaysCount,
+    );
-      };
 
-      return {
+    ctx.auditLoggingCtx.newObject = {
-        success: true,
+      deletedResponsesCount: deletedResponsesCount,
-        deletedResponsesCount: deletedResponsesCount,
+      deletedDisplaysCount: deletedDisplaysCount,
-        deletedDisplaysCount: deletedDisplaysCount,
+    };
-      };
+
-    }
+    return {
-  )
+      success: true,
+      deletedResponsesCount: deletedResponsesCount,
+      deletedDisplaysCount: deletedDisplaysCount,
+    };
+  })
 );
 
 const ZGetEmailHtmlAction = z.object({
@@ -123,7 +114,7 @@ const ZGetEmailHtmlAction = z.object({
 });
 
 export const getEmailHtmlAction = authenticatedActionClient
-  .schema(ZGetEmailHtmlAction)
+  .inputSchema(ZGetEmailHtmlAction)
   .action(async ({ ctx, parsedInput }) => {
     await checkAuthorizationUpdated({
       userId: ctx.user.id,
@@ -152,9 +143,10 @@ const ZGeneratePersonalLinksAction = z.object({
 });
 
 export const generatePersonalLinksAction = authenticatedActionClient
-  .schema(ZGeneratePersonalLinksAction)
+  .inputSchema(ZGeneratePersonalLinksAction)
   .action(async ({ ctx, parsedInput }) => {
-    const isContactsEnabled = await getIsContactsEnabled();
+    const organizationId = await getOrganizationIdFromSurveyId(parsedInput.surveyId);
+    const isContactsEnabled = await getIsContactsEnabled(organizationId);
     if (!isContactsEnabled) {
       throw new OperationNotAllowedError("Contacts are not enabled for this environment");
     }
@@ -231,7 +223,7 @@ const ZUpdateSingleUseLinksAction = z.object({
 });
 
 export const updateSingleUseLinksAction = authenticatedActionClient
-  .schema(ZUpdateSingleUseLinksAction)
+  .inputSchema(ZUpdateSingleUseLinksAction)
   .action(async ({ ctx, parsedInput }) => {
     await checkAuthorizationUpdated({
       userId: ctx.user.id,

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

@@ -30,8 +30,7 @@ export const CalSummary = ({ elementSummary, survey }: CalSummaryProps) => {
               </div>
             </div>
             <p className="flex w-32 items-end justify-end text-slate-600">
-              {elementSummary.booked.count}{" "}
+              {t("common.count_responses", { count: elementSummary.booked.count })}
-              {elementSummary.booked.count === 1 ? t("common.response") : t("common.responses")}
             </p>
           </div>
           <ProgressBar barColor="bg-brand-dark" progress={elementSummary.booked.percentage / 100} />
@@ -47,8 +46,7 @@ export const CalSummary = ({ elementSummary, survey }: CalSummaryProps) => {
               </div>
             </div>
             <p className="flex w-32 items-end justify-end text-slate-600">
-              {elementSummary.skipped.count}{" "}
+              {t("common.count_responses", { count: elementSummary.skipped.count })}
-              {elementSummary.skipped.count === 1 ? t("common.response") : t("common.responses")}
             </p>
           </div>
           <ProgressBar barColor="bg-brand-dark" progress={elementSummary.skipped.percentage / 100} />

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

@@ -64,7 +64,7 @@ export const ConsentSummary = ({ elementSummary, survey, setFilter }: ConsentSum
                   </div>
                 </div>
                 <p className="flex w-32 items-end justify-end text-slate-600">
-                  {summaryItem.count} {summaryItem.count === 1 ? t("common.response") : t("common.responses")}
+                  {t("common.count_responses", { count: summaryItem.count })}
                 </p>
               </div>
               <div className="group-hover:opacity-80">

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

@@ -7,7 +7,7 @@ import { TSurvey, TSurveyElementSummaryDate } from "@formbricks/types/surveys/ty
 import { TUserLocale } from "@formbricks/types/user";
 import { timeSince } from "@/lib/time";
 import { getContactIdentifier } from "@/lib/utils/contact";
-import { formatDateWithOrdinal } from "@/lib/utils/datetime";
+import { formatStoredDateForDisplay } from "@/lib/utils/date-display";
 import { PersonAvatar } from "@/modules/ui/components/avatars";
 import { Button } from "@/modules/ui/components/button";
 import { EmptyState } from "@/modules/ui/components/empty-state";
@@ -32,13 +32,14 @@ export const DateElementSummary = ({ elementSummary, environmentId, survey, loca
   };
 
   const renderResponseValue = (value: string) => {
-    const parsedDate = new Date(value);
+    const formattedDate = formatStoredDateForDisplay(value, elementSummary.element.format, locale);
 
-    const formattedDate = isNaN(parsedDate.getTime())
+    return (
-      ? `${t("common.invalid_date")}(${value})`
+      formattedDate ??
-      : formatDateWithOrdinal(parsedDate);
+      t("common.invalid_date_with_value", {
-
+        value,
-    return formattedDate;
+      })
+    );
   };
 
   return (
@@ -59,7 +60,7 @@ export const DateElementSummary = ({ elementSummary, environmentId, survey, loca
             elementSummary.samples.slice(0, visibleResponses).map((response) => (
               <div
                 key={response.id}
-                className="grid grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 last:border-transparent md:text-base">
+                className="grid grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 last:border-transparent">
                 <div className="pl-4 md:pl-6">
                   {response.contact ? (
                     <Link
@@ -84,7 +85,7 @@ export const DateElementSummary = ({ elementSummary, environmentId, survey, loca
                 <div className="ph-no-capture col-span-2 whitespace-pre-wrap pl-6 font-semibold">
                   {renderResponseValue(response.value)}
                 </div>
-                <div className="px-4 text-slate-500 md:px-6">
+                <div className="px-4 md:px-6">
                   {timeSince(new Date(response.updatedAt).toISOString(), locale)}
                 </div>
               </div>

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

@@ -48,7 +48,7 @@ export const ElementSummaryHeader = ({
         {showResponses && (
           <div className="flex items-center rounded-lg bg-slate-100 p-2">
             <InboxIcon className="mr-2 h-4 w-4" />
-            {`${elementSummary.responseCount} ${t("common.responses")}`}
+            {t("common.count_responses", { count: elementSummary.responseCount })}
           </div>
         )}
         {additionalInfo}

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

@@ -8,7 +8,7 @@ import { TSurvey, TSurveyElementSummaryFileUpload } from "@formbricks/types/surv
 import { TUserLocale } from "@formbricks/types/user";
 import { timeSince } from "@/lib/time";
 import { getContactIdentifier } from "@/lib/utils/contact";
-import { getOriginalFileNameFromUrl } from "@/modules/storage/utils";
+import { getOriginalFileNameFromUrl } from "@/modules/storage/url-helpers";
 import { PersonAvatar } from "@/modules/ui/components/avatars";
 import { Button } from "@/modules/ui/components/button";
 import { EmptyState } from "@/modules/ui/components/empty-state";

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

@@ -41,8 +41,7 @@ export const HiddenFieldsSummary = ({ environment, elementSummary, locale }: Hid
           </div>
           <div className="flex items-center rounded-lg bg-slate-100 p-2">
             <InboxIcon className="mr-2 h-4 w-4" />
-            {elementSummary.responseCount}{" "}
+            {t("common.count_responses", { count: elementSummary.responseCount })}
-            {elementSummary.responseCount === 1 ? t("common.response") : t("common.responses")}
           </div>
         </div>
       </div>