Merge branch 'main' of https://github.com/formbricks/formbricks into chore/upgrade-web-tailwind4

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

.env.example

@@ -80,6 +80,9 @@ S3_ENDPOINT_URL=
 # Force path style for S3 compatible storage (0 for disabled, 1 for enabled)
 S3_FORCE_PATH_STYLE=0
 
+# Set this URL to add a custom domain to your survey links(default is WEBAPP_URL)
+# SURVEY_URL=https://survey.example.com
+
 #####################
 # Disable Features  #
 #####################
@@ -114,7 +117,7 @@ IMPRINT_URL=
 IMPRINT_ADDRESS=
 
 # Configure Turnstile in signup flow
-# NEXT_PUBLIC_TURNSTILE_SITE_KEY=
+# TURNSTILE_SITE_KEY=
 # TURNSTILE_SECRET_KEY=
 
 # Configure Github Login
@@ -152,9 +155,8 @@ STRIPE_SECRET_KEY=
 STRIPE_WEBHOOK_SECRET=
 
 # Configure Formbricks usage within Formbricks
-NEXT_PUBLIC_FORMBRICKS_API_HOST=
-NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=
-NEXT_PUBLIC_FORMBRICKS_ONBOARDING_SURVEY_ID=
+FORMBRICKS_API_HOST=
+FORMBRICKS_ENVIRONMENT_ID=
 
 # Oauth credentials for Google sheet integration
 GOOGLE_SHEETS_CLIENT_ID=
@@ -217,3 +219,8 @@ UNKEY_ROOT_KEY=
 # PROMETHEUS_ENABLED=
 # PROMETHEUS_EXPORTER_PORT=
 
+# The SENTRY_DSN is used for error tracking and performance monitoring with Sentry.
+# SENTRY_DSN=
+# The SENTRY_AUTH_TOKEN variable is picked up by the Sentry Build Plugin.
+# It's used automatically by Sentry during the build for authentication when uploading source maps.
+# SENTRY_AUTH_TOKEN=

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

@@ -8,6 +8,14 @@ on:
         required: false
         default: "0"
 
+inputs:
+  turbo_token:
+    description: "Turborepo token"
+    required: false
+  turbo_team:
+    description: "Turborepo team"
+    required: false
+
 runs:
   using: "composite"
   steps:
@@ -62,6 +70,8 @@ runs:
 
     - run: |
         pnpm build --filter=@formbricks/web...
-
       if: steps.cache-build.outputs.cache-hit != 'true'
       shell: bash
+      env:
+        TURBO_TOKEN: ${{ inputs.turbo_token }}
+        TURBO_TEAM: ${{ inputs.turbo_team }}

.github/dependabot.yml

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

.github/workflows/build-web.yml

@@ -4,7 +4,7 @@ on:
 
 permissions:
   contents: read
-  
+
 jobs:
   build:
     name: Build Formbricks-web
@@ -25,3 +25,5 @@ jobs:
         id: cache-build-web
         with:
           e2e_testing_mode: "0"
+          turbo_token: ${{ secrets.TURBO_TOKEN }}
+          turbo_team: ${{ vars.TURBO_TEAM }}

.github/workflows/cron-surveyStatusUpdate.yml

@@ -1,33 +0,0 @@
-name: Cron - Survey status update
-
-on:
-  workflow_dispatch:
-  # "Scheduled workflows run on the latest commit on the default or base branch."
-  # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
-  schedule:
-    # Runs "At 00:00." (see https://crontab.guru)
-    - cron: "0 0 * * *"
-
-permissions:
-  contents: read
-
-jobs:
-  cron-weeklySummary:
-    env:
-      APP_URL: ${{ secrets.APP_URL }}
-      CRON_SECRET: ${{ secrets.CRON_SECRET }}
-    runs-on: ubuntu-latest
-    steps:
-      - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@4d991eb9b905ef189e4c376166672c3f2f230481 # v2.11.0
-        with:
-          egress-policy: audit
-
-      - name: cURL request
-        if: ${{ env.APP_URL && env.CRON_SECRET }}
-        run: |
-          curl ${{ env.APP_URL }}/api/cron/survey-status \
-            -X POST \
-            -H 'content-type: application/json' \
-            -H 'x-api-key: ${{ env.CRON_SECRET }}' \
-            --fail

.github/workflows/cron-weeklySummary.yml

@@ -1,33 +0,0 @@
-name: Cron - Weekly summary
-
-on:
-  workflow_dispatch:
-  # "Scheduled workflows run on the latest commit on the default or base branch."
-  # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
-  schedule:
-    # Runs “At 08:00 on Monday.” (see https://crontab.guru)
-    - cron: "0 8 * * 1"
-permissions:
-  contents: read
-
-jobs:
-  cron-weeklySummary:
-    permissions:
-      contents: read    
-    env:
-      APP_URL: ${{ secrets.APP_URL }}
-      CRON_SECRET: ${{ secrets.CRON_SECRET }}
-    runs-on: ubuntu-latest
-    steps:
-      - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@4d991eb9b905ef189e4c376166672c3f2f230481
-        with:
-          egress-policy: audit
-      - name: cURL request
-        if: ${{ env.APP_URL && env.CRON_SECRET }}
-        run: |
-          curl ${{ env.APP_URL }}/api/cron/weekly-summary \
-            -X POST \
-            -H 'content-type: application/json' \
-            -H 'x-api-key: ${{ env.CRON_SECRET }}' \
-            --fail

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

@@ -0,0 +1,167 @@
+name: Docker Build Validation
+
+on:
+  pull_request:
+    branches:
+      - main
+  merge_group:
+    branches:
+      - main
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+env:
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  TURBO_TEAM: ${{ vars.TURBO_TEAM }}
+
+jobs:
+  validate-docker-build:
+    name: Validate Docker Build
+    runs-on: ubuntu-latest
+
+    # Add PostgreSQL service container
+    services:
+      postgres:
+        image: pgvector/pgvector:pg17
+        env:
+          POSTGRES_USER: test
+          POSTGRES_PASSWORD: test
+          POSTGRES_DB: formbricks
+        ports:
+          - 5432:5432
+        # Health check to ensure PostgreSQL is ready before using it
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build Docker Image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: ./apps/web/Dockerfile
+          push: false
+          load: true
+          tags: formbricks-test:${{ github.sha }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+          secrets: |
+            database_url=${{ secrets.DUMMY_DATABASE_URL }}
+            encryption_key=${{ secrets.DUMMY_ENCRYPTION_KEY }}
+
+      - name: Verify PostgreSQL Connection
+        run: |
+          echo "Verifying PostgreSQL connection..."
+          # Install PostgreSQL client to test connection
+          sudo apt-get update && sudo apt-get install -y postgresql-client
+
+          # Test connection using psql
+          PGPASSWORD=test psql -h localhost -U test -d formbricks -c "\dt" || echo "Failed to connect to PostgreSQL"
+
+          # Show network configuration
+          echo "Network configuration:"
+          ip addr show
+          netstat -tulpn | grep 5432 || echo "No process listening on port 5432"
+
+      - name: Test Docker Image with Health Check
+        shell: bash
+        run: |
+          echo "🧪 Testing if the Docker image starts correctly..."
+
+          # Add extra docker run args to support host.docker.internal on Linux
+          DOCKER_RUN_ARGS="--add-host=host.docker.internal:host-gateway"
+
+          # Start the container with host.docker.internal pointing to the host
+          docker run --name formbricks-test \
+            $DOCKER_RUN_ARGS \
+            -p 3000:3000 \
+            -e DATABASE_URL="postgresql://test:test@host.docker.internal:5432/formbricks" \
+            -e ENCRYPTION_KEY="${{ secrets.DUMMY_ENCRYPTION_KEY }}" \
+            -d formbricks-test:${{ github.sha }}
+
+          # Give it more time to start up
+          echo "Waiting 45 seconds for application to start..."
+          sleep 45
+
+          # Check if the container is running
+          if [ "$(docker inspect -f '{{.State.Running}}' formbricks-test)" != "true" ]; then
+            echo "❌ Container failed to start properly!"
+            docker logs formbricks-test
+            exit 1
+          else
+            echo "✅ Container started successfully!"
+          fi
+
+          # Try connecting to PostgreSQL from inside the container
+          echo "Testing PostgreSQL connection from inside container..."
+          docker exec formbricks-test sh -c 'apt-get update && apt-get install -y postgresql-client && PGPASSWORD=test psql -h host.docker.internal -U test -d formbricks -c "\dt" || echo "Failed to connect to PostgreSQL from container"'
+
+          # Try to access the health endpoint
+          echo "🏥 Testing /health endpoint..."
+          MAX_RETRIES=10
+          RETRY_COUNT=0
+          HEALTH_CHECK_SUCCESS=false
+
+          set +e  # Disable exit on error to allow for retries
+
+          while [ $RETRY_COUNT -lt $MAX_RETRIES ]; do
+            RETRY_COUNT=$((RETRY_COUNT + 1))
+            echo "Attempt $RETRY_COUNT of $MAX_RETRIES..."
+            
+            # Show container logs before each attempt to help debugging
+            if [ $RETRY_COUNT -gt 1 ]; then
+              echo "📋 Current container logs:"
+              docker logs --tail 20 formbricks-test
+            fi
+            
+            # Get detailed curl output for debugging
+            HTTP_OUTPUT=$(curl -v -s -m 30 http://localhost:3000/health 2>&1)
+            CURL_EXIT_CODE=$?
+            
+            echo "Curl exit code: $CURL_EXIT_CODE"
+            echo "Curl output: $HTTP_OUTPUT"
+            
+            if [ $CURL_EXIT_CODE -eq 0 ]; then
+              STATUS_CODE=$(echo "$HTTP_OUTPUT" | grep -oP "HTTP/\d(\.\d)? \K\d+")
+              echo "Status code detected: $STATUS_CODE"
+              
+              if [ "$STATUS_CODE" = "200" ]; then
+                echo "✅ Health check successful!"
+                HEALTH_CHECK_SUCCESS=true
+                break
+              else
+                echo "❌ Health check returned non-200 status code: $STATUS_CODE"
+              fi
+            else
+              echo "❌ Curl command failed with exit code: $CURL_EXIT_CODE"
+            fi
+            
+            echo "Waiting 15 seconds before next attempt..."
+            sleep 15
+          done
+
+          # Show full container logs for debugging
+          echo "📋 Full container logs:"
+          docker logs formbricks-test
+
+          # Clean up the container
+          echo "🧹 Cleaning up..."
+          docker rm -f formbricks-test
+
+          # Exit with failure if health check did not succeed
+          if [ "$HEALTH_CHECK_SUCCESS" != "true" ]; then
+            echo "❌ Health check failed after $MAX_RETRIES attempts"
+            exit 1
+          fi
+
+          echo "✨ Docker validation complete - all checks passed!"

.github/workflows/e2e.yml

@@ -16,6 +16,8 @@ on:
 
 env:
   TELEMETRY_DISABLED: 1
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  TURBO_TEAM: ${{ vars.TURBO_TEAM }}
 
 permissions:
   id-token: write

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

@@ -82,8 +82,6 @@ jobs:
           secrets: |
             database_url=${{ secrets.DUMMY_DATABASE_URL }}
             encryption_key=${{ secrets.DUMMY_ENCRYPTION_KEY }}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
 
       # Sign the resulting Docker image digest except on PRs.
       # This will only write to the public Rekor transparency log when the Docker

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

@@ -102,8 +102,6 @@ jobs:
           secrets: |
             database_url=${{ secrets.DUMMY_DATABASE_URL }}
             encryption_key=${{ secrets.DUMMY_ENCRYPTION_KEY }}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
 
       # Sign the resulting Docker image digest except on PRs.
       # This will only write to the public Rekor transparency log when the Docker

.github/workflows/sonarqube.yml

@@ -23,10 +23,10 @@ jobs:
         with:
           fetch-depth: 0 # Shallow clones should be disabled for a better relevancy of analysis
 
-      - name: Setup Node.js 20.x
+      - name: Setup Node.js 22.x
         uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af
         with:
-          node-version: 20.x
+          node-version: 22.x
 
       - name: Install pnpm
         uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2
@@ -48,7 +48,7 @@ jobs:
         run: |
           pnpm test:coverage
       - name: SonarQube Scan
-        uses: SonarSource/sonarqube-scan-action@bfd4e558cda28cda6b5defafb9232d191be8c203
+        uses: SonarSource/sonarqube-scan-action@aa494459d7c39c106cc77b166de8b4250a32bb97
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Needed to get PR information, if any
           SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

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

@@ -6,9 +6,13 @@ on:
   push:
     branches:
       - main
+    paths:
+      - "infra/terraform/**"
   pull_request:
     branches:
       - main
+    paths:
+      - "infra/terraform/**"
 
 permissions:
   id-token: write

.gitignore

@@ -72,3 +72,4 @@ infra/terraform/.terraform/
 # IntelliJ IDEA
 /.idea/
 /*.iml
+packages/ios/FormbricksSDK/FormbricksSDK.xcodeproj/project.xcworkspace/xcuserdata

.vscode/settings.json

@@ -1,4 +1,15 @@
 {
+  "github.copilot.chat.codeGeneration.instructions": [
+    {
+      "text": "When generating tests, always use vitest and use the `test` function instead of `it`."
+    }
+  ],
+  "javascript.updateImportsOnFileMove.enabled": "always",
+  "sonarlint.connectedMode.project": {
+    "connectionId": "formbricks",
+    "projectKey": "formbricks_formbricks"
+  },
   "typescript.preferences.importModuleSpecifier": "non-relative",
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.updateImportsOnFileMove.enabled": "always"
 }

apps/demo/components/sidebar.tsx

@@ -27,7 +27,7 @@ const secondaryNavigation = [
 
 export function Sidebar(): React.JSX.Element {
   return (
-    <div className="flex flex-grow flex-col overflow-y-auto bg-cyan-700 pb-4 pt-5">
+    <div className="flex grow flex-col overflow-y-auto bg-cyan-700 pt-5 pb-4">
       <nav
         className="mt-5 flex flex-1 flex-col divide-y divide-cyan-800 overflow-y-auto"
         aria-label="Sidebar">
@@ -38,10 +38,10 @@ export function Sidebar(): React.JSX.Element {
               href={item.href}
               className={classNames(
                 item.current ? "bg-cyan-800 text-white" : "text-cyan-100 hover:bg-cyan-600 hover:text-white",
-                "group flex items-center rounded-md px-2 py-2 text-sm font-medium leading-6"
+                "group flex items-center rounded-md px-2 py-2 text-sm leading-6 font-medium"
               )}
               aria-current={item.current ? "page" : undefined}>
-              <item.icon className="mr-4 h-6 w-6 flex-shrink-0 text-cyan-200" aria-hidden="true" />
+              <item.icon className="mr-4 h-6 w-6 shrink-0 text-cyan-200" aria-hidden="true" />
               {item.name}
             </a>
           ))}
@@ -52,7 +52,7 @@ export function Sidebar(): React.JSX.Element {
               <a
                 key={item.name}
                 href={item.href}
-                className="group flex items-center rounded-md px-2 py-2 text-sm font-medium leading-6 text-cyan-100 hover:bg-cyan-600 hover:text-white">
+                className="group flex items-center rounded-md px-2 py-2 text-sm leading-6 font-medium text-cyan-100 hover:bg-cyan-600 hover:text-white">
                 <item.icon className="mr-4 h-6 w-6 text-cyan-200" aria-hidden="true" />
                 {item.name}
               </a>

apps/demo/globals.css

@@ -1,3 +1,23 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@plugin '@tailwindcss/forms';
+
+@custom-variant dark (&:is(.dark *));
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}

apps/demo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formbricks/demo",
-  "version": "0.1.0",
+  "version": "0.0.0",
   "private": true,
   "scripts": {
     "clean": "rimraf .turbo node_modules .next",
@@ -12,10 +12,14 @@
   },
   "dependencies": {
     "@formbricks/js": "workspace:*",
-    "lucide-react": "0.468.0",
-    "next": "15.2.3",
-    "react": "19.0.0",
-    "react-dom": "19.0.0"
+    "@tailwindcss/forms": "0.5.9",
+    "@tailwindcss/postcss": "4.1.3",
+    "lucide-react": "0.486.0",
+    "next": "15.2.4",
+    "postcss": "8.5.3",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "tailwindcss": "4.1.3"
   },
   "devDependencies": {
     "@formbricks/config-typescript": "workspace:*",

apps/demo/pages/index.tsx

@@ -96,10 +96,10 @@ export default function AppPage(): React.JSX.Element {
             <p className="text-slate-700 dark:text-slate-300">
               Copy the environment ID of your Formbricks app to the env variable in /apps/demo/.env
             </p>
-            <Image src={fbsetup} alt="fb setup" className="mt-4 rounded" priority />
+            <Image src={fbsetup} alt="fb setup" className="mt-4 rounded-xs" priority />
 
             <div className="mt-4 flex-col items-start text-sm text-slate-700 sm:flex sm:items-center sm:text-base dark:text-slate-300">
-              <p className="mb-1 sm:mb-0 sm:mr-2">You&apos;re connected with env:</p>
+              <p className="mb-1 sm:mr-2 sm:mb-0">You&apos;re connected with env:</p>
               <div className="flex items-center">
                 <strong className="w-32 truncate sm:w-auto">
                   {process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID}

apps/demo/postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };

apps/demo/tailwind.config.js

@@ -1,13 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./app/**/*.{js,ts,jsx,tsx}",
-    "./pages/**/*.{js,ts,jsx,tsx}",
-    "./components/**/*.{js,ts,jsx,tsx}",
-  ],
-  darkMode: "class",
-  theme: {
-    extend: {},
-  },
-  plugins: [require("@tailwindcss/forms")],
-};

apps/storybook/package.json

@@ -11,30 +11,30 @@
     "clean": "rimraf .turbo node_modules dist storybook-static"
   },
   "dependencies": {
-    "eslint-plugin-react-refresh": "0.4.16",
-    "react": "19.0.0",
-    "react-dom": "19.0.0"
+    "eslint-plugin-react-refresh": "0.4.19",
+    "react": "19.1.0",
+    "react-dom": "19.1.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "3.2.2",
+    "@chromatic-com/storybook": "3.2.6",
     "@formbricks/config-typescript": "workspace:*",
-    "@storybook/addon-a11y": "8.4.7",
-    "@storybook/addon-essentials": "8.4.7",
-    "@storybook/addon-interactions": "8.4.7",
-    "@storybook/addon-links": "8.4.7",
-    "@storybook/addon-onboarding": "8.4.7",
-    "@storybook/blocks": "8.4.7",
-    "@storybook/react": "8.4.7",
-    "@storybook/react-vite": "8.4.7",
-    "@storybook/test": "8.4.7",
-    "@typescript-eslint/eslint-plugin": "8.18.0",
-    "@typescript-eslint/parser": "8.18.0",
+    "@storybook/addon-a11y": "8.6.12",
+    "@storybook/addon-essentials": "8.6.12",
+    "@storybook/addon-interactions": "8.6.12",
+    "@storybook/addon-links": "8.6.12",
+    "@storybook/addon-onboarding": "8.6.12",
+    "@storybook/blocks": "8.6.12",
+    "@storybook/react": "8.6.12",
+    "@storybook/react-vite": "8.6.12",
+    "@storybook/test": "8.6.12",
+    "@typescript-eslint/eslint-plugin": "8.29.1",
+    "@typescript-eslint/parser": "8.29.1",
     "@vitejs/plugin-react": "4.3.4",
-    "esbuild": "0.25.1",
-    "eslint-plugin-storybook": "0.11.1",
+    "esbuild": "0.25.2",
+    "eslint-plugin-storybook": "0.12.0",
     "prop-types": "15.8.1",
-    "storybook": "8.4.7",
-    "tsup": "8.3.5",
-    "vite": "6.0.12"
+    "storybook": "8.6.12",
+    "tsup": "8.4.0",
+    "vite": "6.2.5"
   }
 }

apps/web/.eslintrc.js

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

apps/web/.gitignore

@@ -50,4 +50,4 @@ uploads/
 .sentryclirc
 
 # SAML Preloaded Connections
-saml-connection/
+saml-connection/

apps/web/Dockerfile

@@ -22,7 +22,7 @@ RUN npm install -g corepack@latest
 RUN corepack enable
 
 # Install necessary build tools and compilers
-RUN apk update && apk add --no-cache g++ cmake make gcc python3 openssl-dev jq
+RUN apk update && apk add --no-cache cmake g++ gcc jq make openssl-dev python3
 
 # BuildKit secret handling without hardcoded fallback values
 # This approach relies entirely on secrets passed from GitHub Actions
@@ -40,9 +40,6 @@ RUN echo '#!/bin/sh' > /tmp/read-secrets.sh && \
     echo 'exec "$@"' >> /tmp/read-secrets.sh && \
     chmod +x /tmp/read-secrets.sh
 
-ARG NEXT_PUBLIC_SENTRY_DSN
-ARG SENTRY_AUTH_TOKEN
-
 # Increase Node.js memory limit as a regular build argument
 ARG NODE_OPTIONS="--max_old_space_size=4096"
 ENV NODE_OPTIONS=${NODE_OPTIONS}
@@ -84,35 +81,65 @@ RUN corepack enable
 RUN apk add --no-cache curl \
     && apk add --no-cache supercronic \
     # && addgroup --system --gid 1001 nodejs \
-    && adduser --system --uid 1001 nextjs
+    && addgroup -S nextjs \
+    && adduser -S -u 1001 -G nextjs nextjs
 
 WORKDIR /home/nextjs
 
+# Ensure no write permissions are assigned to the copied resources
+COPY --from=installer /app/apps/web/.next/standalone ./
+RUN chown -R nextjs:nextjs ./ && chmod -R 755 ./
+
 COPY --from=installer /app/apps/web/next.config.mjs .
+RUN chmod 644 ./next.config.mjs
+
 COPY --from=installer /app/apps/web/package.json .
-# Leverage output traces to reduce image size
+RUN chmod 644 ./package.json
 
-COPY --from=installer --chown=nextjs:nextjs /app/apps/web/.next/standalone ./
-COPY --from=installer --chown=nextjs:nextjs /app/apps/web/.next/static ./apps/web/.next/static
-COPY --from=installer --chown=nextjs:nextjs /app/apps/web/public ./apps/web/public
-COPY --from=installer --chown=nextjs:nextjs /app/packages/database/schema.prisma ./packages/database/schema.prisma
-COPY --from=installer --chown=nextjs:nextjs /app/packages/database/package.json ./packages/database/package.json
-COPY --from=installer --chown=nextjs:nextjs /app/packages/database/migration ./packages/database/migration
-COPY --from=installer --chown=nextjs:nextjs /app/packages/database/src ./packages/database/src
-COPY --from=installer --chown=nextjs:nextjs /app/packages/database/node_modules ./packages/database/node_modules
-COPY --from=installer --chown=nextjs:nextjs /app/packages/logger/dist ./packages/database/node_modules/@formbricks/logger/dist
+COPY --from=installer /app/apps/web/.next/static ./apps/web/.next/static
+RUN chown -R nextjs:nextjs ./apps/web/.next/static && chmod -R 755 ./apps/web/.next/static
 
-# Copy Prisma-specific generated files
-COPY --from=installer --chown=nextjs:nextjs /app/node_modules/@prisma/client ./node_modules/@prisma/client
-COPY --from=installer --chown=nextjs:nextjs /app/node_modules/.prisma ./node_modules/.prisma
+COPY --from=installer /app/apps/web/public ./apps/web/public
+RUN chown -R nextjs:nextjs ./apps/web/public && chmod -R 755 ./apps/web/public
+
+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/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/migration ./packages/database/migration
+RUN chown -R nextjs:nextjs ./packages/database/migration && chmod -R 755 ./packages/database/migration
+
+COPY --from=installer /app/packages/database/src ./packages/database/src
+RUN chown -R nextjs:nextjs ./packages/database/src && chmod -R 755 ./packages/database/src
+
+COPY --from=installer /app/packages/database/node_modules ./packages/database/node_modules
+RUN chown -R nextjs:nextjs ./packages/database/node_modules && chmod -R 755 ./packages/database/node_modules
+
+COPY --from=installer /app/packages/logger/dist ./packages/database/node_modules/@formbricks/logger/dist
+RUN chown -R nextjs:nextjs ./packages/database/node_modules/@formbricks/logger/dist && chmod -R 755 ./packages/database/node_modules/@formbricks/logger/dist
+
+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 --chown=nextjs:nextjs /prisma_version.txt .
 COPY /docker/cronjobs /app/docker/cronjobs
+RUN chmod -R 755 /app/docker/cronjobs
 
-# Copy required dependencies
 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/@noble/hashes ./node_modules/@noble/hashes
+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 tsx typescript prisma pino-pretty
 

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

@@ -1,11 +1,11 @@
 "use client";
 
+import { cn } from "@/lib/cn";
 import { Button } from "@/modules/ui/components/button";
 import { useTranslate } from "@tolgee/react";
 import { ArrowRight } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
-import { cn } from "@formbricks/lib/cn";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TProjectConfigChannel } from "@formbricks/types/project";
 import { OnboardingSetupInstructions } from "./OnboardingSetupInstructions";

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

@@ -101,17 +101,17 @@ export const OnboardingSetupInstructions = ({
       <div>
         {activeTab === "npm" ? (
           <div className="prose prose-slate w-full">
-            <CodeBlock customEditorClass="!bg-white border border-slate-200" language="sh">
+            <CodeBlock customEditorClass="bg-white! border border-slate-200" language="sh">
               npm install @formbricks/js
             </CodeBlock>
             <p>{t("common.or")}</p>
-            <CodeBlock customEditorClass="!bg-white border border-slate-200" language="sh">
+            <CodeBlock customEditorClass="bg-white! border border-slate-200" language="sh">
               yarn add @formbricks/js
             </CodeBlock>
             <p className="text-sm text-slate-700">
               {t("environments.connect.import_formbricks_and_initialize_the_widget_in_your_component")}
             </p>
-            <CodeBlock customEditorClass="!bg-white border border-slate-200" language="js">
+            <CodeBlock customEditorClass="bg-white! border border-slate-200" language="js">
               {channel === "app" ? npmSnippetForAppSurveys : npmSnippetForWebsiteSurveys}
             </CodeBlock>
             <Button id="onboarding-inapp-connect-read-npm-docs" className="mt-3" variant="secondary" asChild>
@@ -125,11 +125,11 @@ export const OnboardingSetupInstructions = ({
           </div>
         ) : activeTab === "html" ? (
           <div className="prose prose-slate">
-            <p className="-mb-1 mt-6 text-sm text-slate-700">
+            <p className="mt-6 -mb-1 text-sm text-slate-700">
               {t("environments.connect.insert_this_code_into_the_head_tag_of_your_website")}
             </p>
             <div>
-              <CodeBlock customEditorClass="!bg-white border border-slate-200" language="js">
+              <CodeBlock customEditorClass="bg-white! border border-slate-200" language="js">
                 {channel === "app" ? htmlSnippetForAppSurveys : htmlSnippetForWebsiteSurveys}
               </CodeBlock>
             </div>

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

@@ -1,12 +1,12 @@
 import { ConnectWithFormbricks } from "@/app/(app)/(onboarding)/environments/[environmentId]/connect/components/ConnectWithFormbricks";
+import { WEBAPP_URL } from "@/lib/constants";
+import { getEnvironment } from "@/lib/environment/service";
+import { getProjectByEnvironmentId } from "@/lib/project/service";
 import { Button } from "@/modules/ui/components/button";
 import { Header } from "@/modules/ui/components/header";
 import { getTranslate } from "@/tolgee/server";
 import { XIcon } from "lucide-react";
 import Link from "next/link";
-import { WEBAPP_URL } from "@formbricks/lib/constants";
-import { getEnvironment } from "@formbricks/lib/environment/service";
-import { getProjectByEnvironmentId } from "@formbricks/lib/project/service";
 
 interface ConnectPageProps {
   params: Promise<{
@@ -44,7 +44,7 @@ const Page = async (props: ConnectPageProps) => {
         channel={channel}
       />
       <Button
-        className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
+        className="absolute top-5 right-5 mt-0! text-slate-500 hover:text-slate-700"
         variant="ghost"
         asChild>
         <Link href={`/environments/${environment.id}`}>

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

@@ -1,7 +1,7 @@
+import { hasUserEnvironmentAccess } from "@/lib/environment/auth";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
-import { hasUserEnvironmentAccess } from "@formbricks/lib/environment/auth";
 import { AuthorizationError } from "@formbricks/types/errors";
 
 const OnboardingLayout = async (props) => {

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

@@ -1,4 +1,4 @@
-import { replaceQuestionPresetPlaceholders } from "@formbricks/lib/utils/templates";
+import { replaceQuestionPresetPlaceholders } from "@/lib/utils/templates";
 import { TProject } from "@formbricks/types/project";
 import { TXMTemplate } from "@formbricks/types/templates";
 

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

@@ -1,4 +1,7 @@
 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";
+import { getUser } from "@/lib/user/service";
 import { getOrganizationIdFromEnvironmentId } from "@/lib/utils/helper";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { Button } from "@/modules/ui/components/button";
@@ -7,9 +10,6 @@ import { getTranslate } from "@/tolgee/server";
 import { XIcon } from "lucide-react";
 import { getServerSession } from "next-auth";
 import Link from "next/link";
-import { getEnvironment } from "@formbricks/lib/environment/service";
-import { getProjectByEnvironmentId, getUserProjects } from "@formbricks/lib/project/service";
-import { getUser } from "@formbricks/lib/user/service";
 
 interface XMTemplatePageProps {
   params: Promise<{
@@ -49,7 +49,7 @@ const Page = async (props: XMTemplatePageProps) => {
       <XMTemplateList project={project} user={user} environmentId={environment.id} />
       {projects.length >= 2 && (
         <Button
-          className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute top-5 right-5 mt-0! text-slate-500 hover:text-slate-700"
           variant="ghost"
           asChild>
           <Link href={`/environments/${environment.id}/surveys`}>

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

@@ -1,12 +1,12 @@
 "use server";
 
 import { TOrganizationTeam } from "@/app/(app)/(onboarding)/types/onboarding";
+import { cache } from "@/lib/cache";
 import { teamCache } from "@/lib/cache/team";
+import { validateInputs } from "@/lib/utils/validate";
 import { Prisma } from "@prisma/client";
 import { cache as reactCache } from "react";
 import { prisma } from "@formbricks/database";
-import { cache } from "@formbricks/lib/cache";
-import { validateInputs } from "@formbricks/lib/utils/validate";
 import { ZId } from "@formbricks/types/common";
 import { DatabaseError } from "@formbricks/types/errors";
 

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

@@ -2,6 +2,8 @@
 
 import { formbricksLogout } from "@/app/lib/formbricks";
 import FBLogo from "@/images/formbricks-wordmark.svg";
+import { cn } from "@/lib/cn";
+import { capitalizeFirstLetter } from "@/lib/utils/strings";
 import { CreateOrganizationModal } from "@/modules/organization/components/CreateOrganizationModal";
 import { ProfileAvatar } from "@/modules/ui/components/avatars";
 import {
@@ -24,8 +26,6 @@ import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useMemo, useState } from "react";
-import { cn } from "@formbricks/lib/cn";
-import { capitalizeFirstLetter } from "@formbricks/lib/utils/strings";
 import { TOrganization } from "@formbricks/types/organizations";
 import { TUser } from "@formbricks/types/user";
 
@@ -80,7 +80,7 @@ export const LandingSidebar = ({
           <DropdownMenuTrigger
             asChild
             id="userDropdownTrigger"
-            className="w-full rounded-br-xl border-t py-4 pl-4 transition-colors duration-200 hover:bg-slate-50 focus:outline-none">
+            className="w-full rounded-br-xl border-t py-4 pl-4 transition-colors duration-200 hover:bg-slate-50 focus:outline-hidden">
             <div tabIndex={0} className={cn("flex cursor-pointer flex-row items-center space-x-3")}>
               <ProfileAvatar userId={user.id} imageUrl={user.imageUrl} />
               <>
@@ -112,7 +112,7 @@ export const LandingSidebar = ({
             {/* Dropdown Items */}
 
             {dropdownNavigation.map((link) => (
-              <Link href={link.href} target={link.target} className="flex w-full items-center">
+              <Link id={link.href} href={link.href} target={link.target} className="flex w-full items-center">
                 <DropdownMenuItem>
                   <link.icon className="mr-2 h-4 w-4" strokeWidth={1.5} />
                   {link.label}

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

@@ -1,9 +1,9 @@
+import { getEnvironments } from "@/lib/environment/service";
+import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
+import { getUserProjects } from "@/lib/project/service";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { getServerSession } from "next-auth";
 import { notFound, redirect } from "next/navigation";
-import { getEnvironments } from "@formbricks/lib/environment/service";
-import { getMembershipByUserIdOrganizationId } from "@formbricks/lib/membership/service";
-import { getUserProjects } from "@formbricks/lib/project/service";
 
 const LandingLayout = async (props) => {
   const params = await props.params;

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

@@ -1,11 +1,11 @@
 import { LandingSidebar } from "@/app/(app)/(onboarding)/organizations/[organizationId]/landing/components/landing-sidebar";
+import { getOrganizationsByUserId } from "@/lib/organization/service";
+import { getUser } from "@/lib/user/service";
 import { getEnterpriseLicense } from "@/modules/ee/license-check/lib/utils";
 import { getOrganizationAuth } from "@/modules/organization/lib/utils";
 import { Header } from "@/modules/ui/components/header";
 import { getTranslate } from "@/tolgee/server";
 import { notFound, redirect } from "next/navigation";
-import { getOrganizationsByUserId } from "@formbricks/lib/organization/service";
-import { getUser } from "@formbricks/lib/user/service";
 
 const Page = async (props) => {
   const params = await props.params;

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

@@ -1,19 +1,19 @@
+import { canUserAccessOrganization } from "@/lib/organization/auth";
+import { getOrganization } from "@/lib/organization/service";
+import { getUser } from "@/lib/user/service";
 import "@testing-library/jest-dom/vitest";
 import { act, cleanup, render, screen } from "@testing-library/react";
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
 import React from "react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { canUserAccessOrganization } from "@formbricks/lib/organization/auth";
-import { getOrganization } from "@formbricks/lib/organization/service";
-import { getUser } from "@formbricks/lib/user/service";
+import { beforeEach, describe, expect, test, vi } from "vitest";
 import { TOrganization } from "@formbricks/types/organizations";
 import { TUser } from "@formbricks/types/user";
 import ProjectOnboardingLayout from "./layout";
 
 // Mock all the modules and functions that this layout uses:
 
-vi.mock("@formbricks/lib/constants", () => ({
+vi.mock("@/lib/constants", () => ({
   IS_FORMBRICKS_CLOUD: false,
   POSTHOG_API_KEY: "mock-posthog-api-key",
   POSTHOG_HOST: "mock-posthog-host",
@@ -42,13 +42,13 @@ vi.mock("next-auth", () => ({
 vi.mock("next/navigation", () => ({
   redirect: vi.fn(),
 }));
-vi.mock("@formbricks/lib/organization/auth", () => ({
+vi.mock("@/lib/organization/auth", () => ({
   canUserAccessOrganization: vi.fn(),
 }));
-vi.mock("@formbricks/lib/organization/service", () => ({
+vi.mock("@/lib/organization/service", () => ({
   getOrganization: vi.fn(),
 }));
-vi.mock("@formbricks/lib/user/service", () => ({
+vi.mock("@/lib/user/service", () => ({
   getUser: vi.fn(),
 }));
 vi.mock("@/tolgee/server", () => ({
@@ -71,7 +71,7 @@ describe("ProjectOnboardingLayout", () => {
     cleanup();
   });
 
-  it("redirects to /auth/login if there is no session", async () => {
+  test("redirects to /auth/login if there is no session", async () => {
     // Mock no session
     vi.mocked(getServerSession).mockResolvedValueOnce(null);
 
@@ -85,7 +85,7 @@ describe("ProjectOnboardingLayout", () => {
     expect(layoutElement).toBeUndefined();
   });
 
-  it("throws an error if user does not exist", async () => {
+  test("throws an error if user does not exist", async () => {
     vi.mocked(getServerSession).mockResolvedValueOnce({
       user: { id: "user-123" },
     });
@@ -99,7 +99,7 @@ describe("ProjectOnboardingLayout", () => {
     ).rejects.toThrow("common.user_not_found");
   });
 
-  it("throws AuthorizationError if user cannot access organization", async () => {
+  test("throws AuthorizationError if user cannot access organization", async () => {
     vi.mocked(getServerSession).mockResolvedValueOnce({ user: { id: "user-123" } });
     vi.mocked(getUser).mockResolvedValueOnce({ id: "user-123" } as TUser);
     vi.mocked(canUserAccessOrganization).mockResolvedValueOnce(false);
@@ -112,7 +112,7 @@ describe("ProjectOnboardingLayout", () => {
     ).rejects.toThrow("common.not_authorized");
   });
 
-  it("throws an error if organization does not exist", async () => {
+  test("throws an error if organization does not exist", async () => {
     vi.mocked(getServerSession).mockResolvedValueOnce({ user: { id: "user-123" } });
     vi.mocked(getUser).mockResolvedValueOnce({ id: "user-123" } as TUser);
     vi.mocked(canUserAccessOrganization).mockResolvedValueOnce(true);
@@ -126,7 +126,7 @@ describe("ProjectOnboardingLayout", () => {
     ).rejects.toThrow("common.organization_not_found");
   });
 
-  it("renders child content plus PosthogIdentify & ToasterClient if everything is valid", async () => {
+  test("renders child content plus PosthogIdentify & ToasterClient if everything is valid", async () => {
     // Provide valid data
     vi.mocked(getServerSession).mockResolvedValueOnce({ user: { id: "user-123" } });
     vi.mocked(getUser).mockResolvedValueOnce({ id: "user-123", name: "Test User" } as TUser);

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

@@ -1,13 +1,13 @@
 import { PosthogIdentify } from "@/app/(app)/environments/[environmentId]/components/PosthogIdentify";
+import { IS_POSTHOG_CONFIGURED } from "@/lib/constants";
+import { canUserAccessOrganization } from "@/lib/organization/auth";
+import { getOrganization } from "@/lib/organization/service";
+import { getUser } from "@/lib/user/service";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { ToasterClient } from "@/modules/ui/components/toaster-client";
 import { getTranslate } from "@/tolgee/server";
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
-import { IS_POSTHOG_CONFIGURED } from "@formbricks/lib/constants";
-import { canUserAccessOrganization } from "@formbricks/lib/organization/auth";
-import { getOrganization } from "@formbricks/lib/organization/service";
-import { getUser } from "@formbricks/lib/user/service";
 import { AuthorizationError } from "@formbricks/types/errors";
 
 const ProjectOnboardingLayout = async (props) => {

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

@@ -1,4 +1,5 @@
 import { OnboardingOptionsContainer } from "@/app/(app)/(onboarding)/organizations/components/OnboardingOptionsContainer";
+import { getUserProjects } from "@/lib/project/service";
 import { getOrganizationAuth } from "@/modules/organization/lib/utils";
 import { Button } from "@/modules/ui/components/button";
 import { Header } from "@/modules/ui/components/header";
@@ -6,7 +7,6 @@ import { getTranslate } from "@/tolgee/server";
 import { PictureInPicture2Icon, SendIcon, XIcon } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
-import { getUserProjects } from "@formbricks/lib/project/service";
 
 interface ChannelPageProps {
   params: Promise<{
@@ -50,7 +50,7 @@ const Page = async (props: ChannelPageProps) => {
       <OnboardingOptionsContainer options={channelOptions} />
       {projects.length >= 1 && (
         <Button
-          className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute top-5 right-5 mt-0! text-slate-500 hover:text-slate-700"
           variant="ghost"
           asChild>
           <Link href={"/"}>

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

@@ -1,12 +1,12 @@
+import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
+import { getAccessFlags } from "@/lib/membership/utils";
+import { getOrganization } from "@/lib/organization/service";
+import { getOrganizationProjectsCount } from "@/lib/project/service";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { getOrganizationProjectsLimit } from "@/modules/ee/license-check/lib/utils";
 import { getTranslate } from "@/tolgee/server";
 import { getServerSession } from "next-auth";
 import { notFound, redirect } from "next/navigation";
-import { getMembershipByUserIdOrganizationId } from "@formbricks/lib/membership/service";
-import { getAccessFlags } from "@formbricks/lib/membership/utils";
-import { getOrganization } from "@formbricks/lib/organization/service";
-import { getOrganizationProjectsCount } from "@formbricks/lib/project/service";
 
 const OnboardingLayout = async (props) => {
   const params = await props.params;

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

@@ -1,4 +1,5 @@
 import { OnboardingOptionsContainer } from "@/app/(app)/(onboarding)/organizations/components/OnboardingOptionsContainer";
+import { getUserProjects } from "@/lib/project/service";
 import { getOrganizationAuth } from "@/modules/organization/lib/utils";
 import { Button } from "@/modules/ui/components/button";
 import { Header } from "@/modules/ui/components/header";
@@ -6,7 +7,6 @@ import { getTranslate } from "@/tolgee/server";
 import { HeartIcon, ListTodoIcon, XIcon } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
-import { getUserProjects } from "@formbricks/lib/project/service";
 
 interface ModePageProps {
   params: Promise<{
@@ -47,7 +47,7 @@ const Page = async (props: ModePageProps) => {
       <OnboardingOptionsContainer options={channelOptions} />
       {projects.length >= 1 && (
         <Button
-          className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute top-5 right-5 mt-0! text-slate-500 hover:text-slate-700"
           variant="ghost"
           asChild>
           <Link href={"/"}>

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

@@ -2,6 +2,7 @@
 
 import { createProjectAction } from "@/app/(app)/environments/[environmentId]/actions";
 import { previewSurvey } from "@/app/lib/templates";
+import { FORMBRICKS_SURVEYS_FILTERS_KEY_LS } from "@/lib/localStorage";
 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";
@@ -26,7 +27,6 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
-import { FORMBRICKS_SURVEYS_FILTERS_KEY_LS } from "@formbricks/lib/localStorage";
 import {
   TProjectConfigChannel,
   TProjectConfigIndustry,
@@ -218,14 +218,14 @@ 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 h-[30rem] w-1/2 flex-col items-center justify-center space-y-2 rounded-lg border bg-slate-200 shadow-sm">
         {logoUrl && (
           <Image
             src={logoUrl}
             alt="Logo"
             width={256}
             height={56}
-            className="absolute left-2 top-2 -mb-6 h-20 w-auto max-w-64 rounded-lg border object-contain p-1"
+            className="absolute top-2 left-2 -mb-6 h-20 w-auto max-w-64 rounded-lg border object-contain p-1"
           />
         )}
         <p className="text-sm text-slate-400">{t("common.preview")}</p>

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

@@ -1,5 +1,7 @@
 import { getTeamsByOrganizationId } from "@/app/(app)/(onboarding)/lib/onboarding";
 import { ProjectSettings } from "@/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/settings/components/ProjectSettings";
+import { DEFAULT_BRAND_COLOR } from "@/lib/constants";
+import { getUserProjects } from "@/lib/project/service";
 import { getRoleManagementPermission } from "@/modules/ee/license-check/lib/utils";
 import { getOrganizationAuth } from "@/modules/organization/lib/utils";
 import { Button } from "@/modules/ui/components/button";
@@ -8,8 +10,6 @@ import { getTranslate } from "@/tolgee/server";
 import { XIcon } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
-import { DEFAULT_BRAND_COLOR } from "@formbricks/lib/constants";
-import { getUserProjects } from "@formbricks/lib/project/service";
 import { TProjectConfigChannel, TProjectConfigIndustry, TProjectMode } from "@formbricks/types/project";
 
 interface ProjectSettingsPageProps {
@@ -65,7 +65,7 @@ const Page = async (props: ProjectSettingsPageProps) => {
       />
       {projects.length >= 1 && (
         <Button
-          className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute top-5 right-5 mt-0! text-slate-500 hover:text-slate-700"
           variant="ghost"
           asChild>
           <Link href={"/"}>

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

@@ -1,191 +1,120 @@
-import "@testing-library/jest-dom/vitest";
-import { act, cleanup, render, screen } from "@testing-library/react";
-import { getServerSession } from "next-auth";
+import { getEnvironment } from "@/lib/environment/service";
+import { environmentIdLayoutChecks } from "@/modules/environments/lib/utils";
+import { cleanup, render, screen } from "@testing-library/react";
+import { Session } from "next-auth";
 import { redirect } from "next/navigation";
-import React from "react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { hasUserEnvironmentAccess } from "@formbricks/lib/environment/auth";
-import { getEnvironment } from "@formbricks/lib/environment/service";
-import { getOrganizationByEnvironmentId } from "@formbricks/lib/organization/service";
-import { getUser } from "@formbricks/lib/user/service";
+import { afterEach, describe, expect, test, vi } from "vitest";
 import { TEnvironment } from "@formbricks/types/environment";
-import { AuthorizationError } from "@formbricks/types/errors";
 import { TOrganization } from "@formbricks/types/organizations";
 import { TUser } from "@formbricks/types/user";
 import SurveyEditorEnvironmentLayout from "./layout";
 
-// mock all dependencies
-
-vi.mock("@formbricks/lib/constants", () => ({
-  IS_FORMBRICKS_CLOUD: false,
-  POSTHOG_API_KEY: "mock-posthog-api-key",
-  POSTHOG_HOST: "mock-posthog-host",
-  IS_POSTHOG_CONFIGURED: true,
-  ENCRYPTION_KEY: "mock-encryption-key",
-  ENTERPRISE_LICENSE_KEY: "mock-enterprise-license-key",
-  GITHUB_ID: "mock-github-id",
-  GITHUB_SECRET: "test-githubID",
-  GOOGLE_CLIENT_ID: "test-google-client-id",
-  GOOGLE_CLIENT_SECRET: "test-google-client-secret",
-  AZUREAD_CLIENT_ID: "test-azuread-client-id",
-  AZUREAD_CLIENT_SECRET: "test-azure",
-  AZUREAD_TENANT_ID: "test-azuread-tenant-id",
-  OIDC_DISPLAY_NAME: "test-oidc-display-name",
-  OIDC_CLIENT_ID: "test-oidc-client-id",
-  OIDC_ISSUER: "test-oidc-issuer",
-  OIDC_CLIENT_SECRET: "test-oidc-client-secret",
-  OIDC_SIGNING_ALGORITHM: "test-oidc-signing-algorithm",
-  WEBAPP_URL: "test-webapp-url",
-  IS_PRODUCTION: false,
+// Mock sub-components to render identifiable elements
+vi.mock("@/modules/ui/components/environmentId-base-layout", () => ({
+  EnvironmentIdBaseLayout: ({ children, environmentId }: any) => (
+    <div data-testid="EnvironmentIdBaseLayout">
+      {environmentId}
+      {children}
+    </div>
+  ),
+}));
+vi.mock("@/modules/ui/components/dev-environment-banner", () => ({
+  DevEnvironmentBanner: ({ environment }: any) => (
+    <div data-testid="DevEnvironmentBanner">{environment.id}</div>
+  ),
 }));
 
-vi.mock("next-auth", () => ({
-  getServerSession: vi.fn(),
+// Mocks for dependencies
+vi.mock("@/modules/environments/lib/utils", () => ({
+  environmentIdLayoutChecks: vi.fn(),
+}));
+vi.mock("@/lib/environment/service", () => ({
+  getEnvironment: vi.fn(),
 }));
 vi.mock("next/navigation", () => ({
   redirect: vi.fn(),
 }));
-vi.mock("@formbricks/lib/environment/auth", () => ({
-  hasUserEnvironmentAccess: vi.fn(),
-}));
-vi.mock("@formbricks/lib/environment/service", () => ({
-  getEnvironment: vi.fn(),
-}));
-vi.mock("@formbricks/lib/organization/service", () => ({
-  getOrganizationByEnvironmentId: vi.fn(),
-}));
-vi.mock("@formbricks/lib/user/service", () => ({
-  getUser: vi.fn(),
-}));
-vi.mock("@/tolgee/server", () => ({
-  getTranslate: vi.fn(() => {
-    return (key: string) => key; // trivial translator returning the key
-  }),
-}));
-
-// mock child components rendered by the layout:
-vi.mock("@/app/(app)/components/FormbricksClient", () => ({
-  FormbricksClient: () => <div data-testid="formbricks-client" />,
-}));
-vi.mock("@/app/(app)/environments/[environmentId]/components/PosthogIdentify", () => ({
-  PosthogIdentify: () => <div data-testid="posthog-identify" />,
-}));
-vi.mock("@/modules/ui/components/toaster-client", () => ({
-  ToasterClient: () => <div data-testid="mock-toaster" />,
-}));
-vi.mock("@/modules/ui/components/dev-environment-banner", () => ({
-  DevEnvironmentBanner: ({ environment }: { environment: TEnvironment }) => (
-    <div data-testid="dev-environment-banner">{environment?.id || "no-env"}</div>
-  ),
-}));
-vi.mock("@/app/(app)/environments/[environmentId]/components/ResponseFilterContext", () => ({
-  ResponseFilterProvider: ({ children }: { children: React.ReactNode }) => (
-    <div data-testid="mock-response-filter-provider">{children}</div>
-  ),
-}));
 
 describe("SurveyEditorEnvironmentLayout", () => {
-  beforeEach(() => {
+  afterEach(() => {
     cleanup();
     vi.clearAllMocks();
   });
 
-  it("redirects to /auth/login if there is no session", async () => {
-    // Mock no session
-    vi.mocked(getServerSession).mockResolvedValueOnce(null);
+  test("renders successfully when environment is found", async () => {
+    vi.mocked(environmentIdLayoutChecks).mockResolvedValueOnce({
+      t: ((key: string) => key) as any, // Mock translation function, we don't need to implement it for the test
+      session: { user: { id: "user1" } } as Session,
+      user: { id: "user1", email: "user1@example.com" } as TUser,
+      organization: { id: "org1", name: "Org1", billing: {} } as TOrganization,
+    });
+    vi.mocked(getEnvironment).mockResolvedValueOnce({ id: "env1" } as TEnvironment);
 
-    const layoutElement = await SurveyEditorEnvironmentLayout({
-      params: { environmentId: "env-123" },
-      children: <div data-testid="child-content">Hello!</div>,
+    const result = await SurveyEditorEnvironmentLayout({
+      params: Promise.resolve({ environmentId: "env1" }),
+      children: <div data-testid="child">Survey Editor Content</div>,
     });
 
-    expect(redirect).toHaveBeenCalledWith("/auth/login");
-    // No JSX is returned after redirect
-    expect(layoutElement).toBeUndefined();
+    render(result);
+
+    expect(screen.getByTestId("EnvironmentIdBaseLayout")).toHaveTextContent("env1");
+    expect(screen.getByTestId("DevEnvironmentBanner")).toHaveTextContent("env1");
+    expect(screen.getByTestId("child")).toHaveTextContent("Survey Editor Content");
   });
 
-  it("throws error if user does not exist in DB", async () => {
-    vi.mocked(getServerSession).mockResolvedValueOnce({ user: { id: "user-123" } });
-    vi.mocked(getUser).mockResolvedValueOnce(null); // user not found
-
-    await expect(
-      SurveyEditorEnvironmentLayout({
-        params: { environmentId: "env-123" },
-        children: <div data-testid="child-content">Hello!</div>,
-      })
-    ).rejects.toThrow("common.user_not_found");
-  });
-
-  it("throws AuthorizationError if user does not have environment access", async () => {
-    vi.mocked(getServerSession).mockResolvedValueOnce({ user: { id: "user-123" } });
-    vi.mocked(getUser).mockResolvedValueOnce({ id: "user-123", email: "test@example.com" } as TUser);
-    vi.mocked(hasUserEnvironmentAccess).mockResolvedValueOnce(false);
-
-    await expect(
-      SurveyEditorEnvironmentLayout({
-        params: { environmentId: "env-123" },
-        children: <div>Child</div>,
-      })
-    ).rejects.toThrow(AuthorizationError);
-  });
-
-  it("throws if no organization is found", async () => {
-    vi.mocked(getServerSession).mockResolvedValueOnce({ user: { id: "user-123" } });
-    vi.mocked(getUser).mockResolvedValueOnce({ id: "user-123" } as TUser);
-    vi.mocked(hasUserEnvironmentAccess).mockResolvedValueOnce(true);
-    vi.mocked(getOrganizationByEnvironmentId).mockResolvedValueOnce(null);
-
-    await expect(
-      SurveyEditorEnvironmentLayout({
-        params: { environmentId: "env-123" },
-        children: <div data-testid="child-content">Hello from children!</div>,
-      })
-    ).rejects.toThrow("common.organization_not_found");
-  });
-
-  it("throws if no environment is found", async () => {
-    vi.mocked(getServerSession).mockResolvedValueOnce({ user: { id: "user-123" } });
-    vi.mocked(getUser).mockResolvedValueOnce({ id: "user-123" } as TUser);
-    vi.mocked(hasUserEnvironmentAccess).mockResolvedValueOnce(true);
-    vi.mocked(getOrganizationByEnvironmentId).mockResolvedValueOnce({ id: "org-999" } as TOrganization);
+  test("throws an error when environment is not found", async () => {
+    vi.mocked(environmentIdLayoutChecks).mockResolvedValueOnce({
+      t: ((key: string) => key) as any,
+      session: { user: { id: "user1" } } as Session,
+      user: { id: "user1", email: "user1@example.com" } as TUser,
+      organization: { id: "org1", name: "Org1", billing: {} } as TOrganization,
+    });
     vi.mocked(getEnvironment).mockResolvedValueOnce(null);
 
     await expect(
       SurveyEditorEnvironmentLayout({
-        params: { environmentId: "env-123" },
-        children: <div>Child</div>,
+        params: Promise.resolve({ environmentId: "env1" }),
+        children: <div>Content</div>,
       })
     ).rejects.toThrow("common.environment_not_found");
   });
 
-  it("renders environment layout if everything is valid", async () => {
-    // Provide all valid data
-    vi.mocked(getServerSession).mockResolvedValueOnce({ user: { id: "user-123" } });
-    vi.mocked(getUser).mockResolvedValueOnce({ id: "user-123", email: "test@example.com" } as TUser);
-    vi.mocked(hasUserEnvironmentAccess).mockResolvedValueOnce(true);
-    vi.mocked(getOrganizationByEnvironmentId).mockResolvedValueOnce({ id: "org-999" } as TOrganization);
-    vi.mocked(getEnvironment).mockResolvedValueOnce({
-      id: "env-123",
-      name: "My Test Environment",
-    } as unknown as TEnvironment);
-
-    // Because it's an async server component, we typically wrap in act(...)
-    let layoutElement: React.ReactNode;
-
-    await act(async () => {
-      layoutElement = await SurveyEditorEnvironmentLayout({
-        params: { environmentId: "env-123" },
-        children: <div data-testid="child-content">Hello from children!</div>,
-      });
-      render(layoutElement);
+  test("calls redirect when session is null", async () => {
+    vi.mocked(environmentIdLayoutChecks).mockResolvedValueOnce({
+      t: ((key: string) => key) as any,
+      session: undefined as unknown as Session,
+      user: undefined as unknown as TUser,
+      organization: { id: "org1", name: "Org1", billing: {} } as TOrganization,
+    });
+    vi.mocked(redirect).mockImplementationOnce(() => {
+      throw new Error("Redirect called");
     });
 
-    // Now confirm we got the child plus all the mocked sub-components
-    expect(screen.getByTestId("child-content")).toHaveTextContent("Hello from children!");
-    expect(screen.getByTestId("posthog-identify")).toBeInTheDocument();
-    expect(screen.getByTestId("formbricks-client")).toBeInTheDocument();
-    expect(screen.getByTestId("mock-toaster")).toBeInTheDocument();
-    expect(screen.getByTestId("mock-response-filter-provider")).toBeInTheDocument();
-    expect(screen.getByTestId("dev-environment-banner")).toHaveTextContent("env-123");
+    await expect(
+      SurveyEditorEnvironmentLayout({
+        params: Promise.resolve({ environmentId: "env1" }),
+        children: <div>Content</div>,
+      })
+    ).rejects.toThrow("Redirect called");
+  });
+
+  test("throws error if user is null", async () => {
+    vi.mocked(environmentIdLayoutChecks).mockResolvedValueOnce({
+      t: ((key: string) => key) as any,
+      session: { user: { id: "user1" } } as Session,
+      user: undefined as unknown as TUser,
+      organization: { id: "org1", name: "Org1", billing: {} } as TOrganization,
+    });
+
+    vi.mocked(redirect).mockImplementationOnce(() => {
+      throw new Error("Redirect called");
+    });
+
+    await expect(
+      SurveyEditorEnvironmentLayout({
+        params: Promise.resolve({ environmentId: "env1" }),
+        children: <div>Content</div>,
+      })
+    ).rejects.toThrow("common.user_not_found");
   });
 });

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

@@ -1,46 +1,24 @@
-import { FormbricksClient } from "@/app/(app)/components/FormbricksClient";
-import { PosthogIdentify } from "@/app/(app)/environments/[environmentId]/components/PosthogIdentify";
-import { ResponseFilterProvider } from "@/app/(app)/environments/[environmentId]/components/ResponseFilterContext";
-import { authOptions } from "@/modules/auth/lib/authOptions";
+import { getEnvironment } from "@/lib/environment/service";
+import { environmentIdLayoutChecks } from "@/modules/environments/lib/utils";
 import { DevEnvironmentBanner } from "@/modules/ui/components/dev-environment-banner";
-import { ToasterClient } from "@/modules/ui/components/toaster-client";
-import { getTranslate } from "@/tolgee/server";
-import { getServerSession } from "next-auth";
+import { EnvironmentIdBaseLayout } from "@/modules/ui/components/environmentId-base-layout";
 import { redirect } from "next/navigation";
-import { IS_POSTHOG_CONFIGURED } from "@formbricks/lib/constants";
-import { hasUserEnvironmentAccess } from "@formbricks/lib/environment/auth";
-import { getEnvironment } from "@formbricks/lib/environment/service";
-import { getOrganizationByEnvironmentId } from "@formbricks/lib/organization/service";
-import { getUser } from "@formbricks/lib/user/service";
-import { AuthorizationError } from "@formbricks/types/errors";
 
 const SurveyEditorEnvironmentLayout = async (props) => {
   const params = await props.params;
 
   const { children } = props;
 
-  const t = await getTranslate();
-  const session = await getServerSession(authOptions);
+  const { t, session, user, organization } = await environmentIdLayoutChecks(params.environmentId);
 
-  if (!session?.user) {
+  if (!session) {
     return redirect(`/auth/login`);
   }
 
-  const user = await getUser(session.user.id);
   if (!user) {
     throw new Error(t("common.user_not_found"));
   }
 
-  const hasAccess = await hasUserEnvironmentAccess(session.user.id, params.environmentId);
-  if (!hasAccess) {
-    throw new AuthorizationError(t("common.not_authorized"));
-  }
-
-  const organization = await getOrganizationByEnvironmentId(params.environmentId);
-  if (!organization) {
-    throw new Error(t("common.organization_not_found"));
-  }
-
   const environment = await getEnvironment(params.environmentId);
 
   if (!environment) {
@@ -48,23 +26,16 @@ const SurveyEditorEnvironmentLayout = async (props) => {
   }
 
   return (
-    <ResponseFilterProvider>
-      <PosthogIdentify
-        session={session}
-        user={user}
-        environmentId={params.environmentId}
-        organizationId={organization.id}
-        organizationName={organization.name}
-        organizationBilling={organization.billing}
-        isPosthogEnabled={IS_POSTHOG_CONFIGURED}
-      />
-      <FormbricksClient userId={user.id} email={user.email} />
-      <ToasterClient />
+    <EnvironmentIdBaseLayout
+      environmentId={params.environmentId}
+      session={session}
+      user={user}
+      organization={organization}>
       <div className="flex h-screen flex-col">
         <DevEnvironmentBanner environment={environment} />
         <div className="h-full overflow-y-auto bg-slate-50">{children}</div>
       </div>
-    </ResponseFilterProvider>
+    </EnvironmentIdBaseLayout>
   );
 };
 

apps/web/app/(app)/components/FormbricksClient.test.tsx

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { afterEach, describe, expect, test, vi } from "vitest";
+import { describe, expect, test, vi } from "vitest";
 import formbricks from "@formbricks/js";
 import { FormbricksClient } from "./FormbricksClient";
 
@@ -9,14 +9,6 @@ vi.mock("next/navigation", () => ({
   useSearchParams: () => new URLSearchParams("foo=bar"),
 }));
 
-// Mock the environment variables.
-vi.mock("@formbricks/lib/env", () => ({
-  env: {
-    NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID: "env-test",
-    NEXT_PUBLIC_FORMBRICKS_API_HOST: "https://api.test.com",
-  },
-}));
-
 // Mock the flag that enables Formbricks.
 vi.mock("@/app/lib/formbricks", () => ({
   formbricksEnabled: true,
@@ -34,17 +26,21 @@ vi.mock("@formbricks/js", () => ({
 }));
 
 describe("FormbricksClient", () => {
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
   test("calls setup, setUserId, setEmail and registerRouteChange on mount when enabled", () => {
     const mockSetup = vi.spyOn(formbricks, "setup");
     const mockSetUserId = vi.spyOn(formbricks, "setUserId");
     const mockSetEmail = vi.spyOn(formbricks, "setEmail");
     const mockRegisterRouteChange = vi.spyOn(formbricks, "registerRouteChange");
 
-    render(<FormbricksClient userId="user-123" email="test@example.com" />);
+    render(
+      <FormbricksClient
+        userId="user-123"
+        email="test@example.com"
+        formbricksEnvironmentId="env-test"
+        formbricksApiHost="https://api.test.com"
+        formbricksEnabled={true}
+      />
+    );
 
     // Expect the first effect to call setup and assign the provided user details.
     expect(mockSetup).toHaveBeenCalledWith({
@@ -64,7 +60,15 @@ describe("FormbricksClient", () => {
     const mockSetEmail = vi.spyOn(formbricks, "setEmail");
     const mockRegisterRouteChange = vi.spyOn(formbricks, "registerRouteChange");
 
-    render(<FormbricksClient userId="" email="test@example.com" />);
+    render(
+      <FormbricksClient
+        userId=""
+        email="test@example.com"
+        formbricksEnvironmentId="env-test"
+        formbricksApiHost="https://api.test.com"
+        formbricksEnabled={true}
+      />
+    );
 
     // Since userId is falsy, the first effect should not call setup or assign user details.
     expect(mockSetup).not.toHaveBeenCalled();

apps/web/app/(app)/components/FormbricksClient.tsx

@@ -1,32 +1,44 @@
 "use client";
 
-import { formbricksEnabled } from "@/app/lib/formbricks";
 import { usePathname, useSearchParams } from "next/navigation";
 import { useEffect } from "react";
 import formbricks from "@formbricks/js";
-import { env } from "@formbricks/lib/env";
 
-export const FormbricksClient = ({ userId, email }: { userId: string; email: string }) => {
+interface FormbricksClientProps {
+  userId: string;
+  email: string;
+  formbricksEnvironmentId?: string;
+  formbricksApiHost?: string;
+  formbricksEnabled?: boolean;
+}
+
+export const FormbricksClient = ({
+  userId,
+  email,
+  formbricksEnvironmentId,
+  formbricksApiHost,
+  formbricksEnabled,
+}: FormbricksClientProps) => {
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
   useEffect(() => {
     if (formbricksEnabled && userId) {
       formbricks.setup({
-        environmentId: env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID || "",
-        appUrl: env.NEXT_PUBLIC_FORMBRICKS_API_HOST || "",
+        environmentId: formbricksEnvironmentId ?? "",
+        appUrl: formbricksApiHost ?? "",
       });
 
       formbricks.setUserId(userId);
       formbricks.setEmail(email);
     }
-  }, [userId, email]);
+  }, [userId, email, formbricksEnvironmentId, formbricksApiHost, formbricksEnabled]);
 
   useEffect(() => {
     if (formbricksEnabled) {
       formbricks.registerRouteChange();
     }
-  }, [pathname, searchParams]);
+  }, [pathname, searchParams, formbricksEnabled]);
 
   return null;
 };

apps/web/app/(app)/components/LoadingCard.tsx

@@ -1,5 +1,5 @@
 import { SettingsCard } from "@/app/(app)/environments/[environmentId]/settings/components/SettingsCard";
-import { cn } from "@formbricks/lib/cn";
+import { cn } from "@/lib/cn";
 
 export const LoadingCard = ({
   title,

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

@@ -1,5 +1,8 @@
 "use server";
 
+import { getOrganization } from "@/lib/organization/service";
+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-middleware";
 import {
@@ -8,9 +11,6 @@ import {
 } from "@/modules/ee/license-check/lib/utils";
 import { createProject } from "@/modules/projects/settings/lib/project";
 import { z } from "zod";
-import { getOrganization } from "@formbricks/lib/organization/service";
-import { getOrganizationProjectsCount } from "@formbricks/lib/project/service";
-import { updateUser } from "@formbricks/lib/user/service";
 import { ZId } from "@formbricks/types/common";
 import { OperationNotAllowedError } from "@formbricks/types/errors";
 import { ZProjectUpdateInput } from "@formbricks/types/project";

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

@@ -1,12 +1,12 @@
 "use server";
 
+import { deleteActionClass, getActionClass, updateActionClass } from "@/lib/actionClass/service";
+import { cache } from "@/lib/cache";
+import { getSurveysByActionClassId } from "@/lib/survey/service";
 import { actionClient, authenticatedActionClient } from "@/lib/utils/action-client";
 import { checkAuthorizationUpdated } from "@/lib/utils/action-client-middleware";
 import { getOrganizationIdFromActionClassId, getProjectIdFromActionClassId } from "@/lib/utils/helper";
 import { z } from "zod";
-import { deleteActionClass, getActionClass, updateActionClass } from "@formbricks/lib/actionClass/service";
-import { cache } from "@formbricks/lib/cache";
-import { getSurveysByActionClassId } from "@formbricks/lib/survey/service";
 import { ZActionClassInput } from "@formbricks/types/action-classes";
 import { ZId } from "@formbricks/types/common";
 import { ResourceNotFoundError } from "@formbricks/types/errors";

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

@@ -1,7 +1,9 @@
 "use client";
 
 import { ACTION_TYPE_ICON_LOOKUP } from "@/app/(app)/environments/[environmentId]/actions/utils";
+import { convertDateTimeStringShort } from "@/lib/time";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
+import { capitalizeFirstLetter } from "@/lib/utils/strings";
 import { createActionClassAction } from "@/modules/survey/editor/actions";
 import { Button } from "@/modules/ui/components/button";
 import { ErrorComponent } from "@/modules/ui/components/error-component";
@@ -10,8 +12,6 @@ import { LoadingSpinner } from "@/modules/ui/components/loading-spinner";
 import { useTranslate } from "@tolgee/react";
 import { useEffect, useMemo, useState } from "react";
 import toast from "react-hot-toast";
-import { convertDateTimeStringShort } from "@formbricks/lib/time";
-import { capitalizeFirstLetter } from "@formbricks/lib/utils/strings";
 import { TActionClass, TActionClassInput, TActionClassInputCode } from "@formbricks/types/action-classes";
 import { TEnvironment } from "@formbricks/types/environment";
 import { getActiveInactiveSurveysAction } from "../actions";

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

@@ -36,7 +36,7 @@ export const ActionClassesTable = ({
 
   return (
     <>
-      <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
+      <div className="rounded-xl border border-slate-200 bg-white shadow-xs">
         {TableHeading}
         <div id="actionClassesWrapper" className="flex flex-col">
           {actionClasses.length > 0 ? (

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

@@ -1,5 +1,5 @@
 import { ACTION_TYPE_ICON_LOOKUP } from "@/app/(app)/environments/[environmentId]/actions/utils";
-import { timeSince } from "@formbricks/lib/time";
+import { timeSince } from "@/lib/time";
 import { TActionClass } from "@formbricks/types/action-classes";
 import { TUserLocale } from "@formbricks/types/user";
 
@@ -14,16 +14,14 @@ export const ActionClassDataRow = ({
     <div className="m-2 grid h-16 grid-cols-6 content-center rounded-lg transition-colors ease-in-out hover:bg-slate-100">
       <div className="col-span-4 flex items-center pl-6 text-sm">
         <div className="flex items-center">
-          <div className="h-5 w-5 flex-shrink-0 text-slate-500">
-            {ACTION_TYPE_ICON_LOOKUP[actionClass.type]}
-          </div>
+          <div className="h-5 w-5 shrink-0 text-slate-500">{ACTION_TYPE_ICON_LOOKUP[actionClass.type]}</div>
           <div className="ml-4 text-left">
             <div className="font-medium text-slate-900">{actionClass.name}</div>
             <div className="text-xs text-slate-400">{actionClass.description}</div>
           </div>
         </div>
       </div>
-      <div className="col-span-2 my-auto whitespace-nowrap text-center text-sm text-slate-500">
+      <div className="col-span-2 my-auto text-center text-sm whitespace-nowrap text-slate-500">
         {timeSince(actionClass.createdAt.toString(), locale)}
       </div>
       <div className="text-center"></div>

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

@@ -10,7 +10,7 @@ const Loading = () => {
     <>
       <PageContentWrapper>
         <PageHeader pageTitle={t("common.actions")} />
-        <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
+        <div className="rounded-xl border border-slate-200 bg-white shadow-xs">
           <div className="grid h-12 grid-cols-6 content-center border-b border-slate-200 text-left text-sm font-semibold text-slate-900">
             <span className="sr-only">{t("common.edit")}</span>
             <div className="col-span-4 pl-6">{t("environments.actions.user_actions")}</div>
@@ -22,7 +22,7 @@ const Loading = () => {
               className="m-2 grid h-16 grid-cols-6 content-center rounded-lg transition-colors ease-in-out hover:bg-slate-100">
               <div className="col-span-4 flex items-center pl-6 text-sm">
                 <div className="flex items-center">
-                  <div className="h-6 w-6 flex-shrink-0 animate-pulse rounded-full bg-slate-200 text-slate-500" />
+                  <div className="h-6 w-6 shrink-0 animate-pulse rounded-full bg-slate-200 text-slate-500" />
                   <div className="ml-4 text-left">
                     <div className="font-medium text-slate-900">
                       <div className="mt-0 h-4 w-48 animate-pulse rounded-full bg-slate-200"></div>
@@ -33,7 +33,7 @@ const Loading = () => {
                   </div>
                 </div>
               </div>
-              <div className="col-span-2 my-auto flex justify-center whitespace-nowrap text-center text-sm text-slate-500">
+              <div className="col-span-2 my-auto flex justify-center text-center text-sm whitespace-nowrap text-slate-500">
                 <div className="h-4 w-28 animate-pulse rounded-full bg-slate-200"></div>
               </div>
             </div>

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

@@ -2,15 +2,15 @@ import { ActionClassesTable } from "@/app/(app)/environments/[environmentId]/act
 import { ActionClassDataRow } from "@/app/(app)/environments/[environmentId]/actions/components/ActionRowData";
 import { ActionTableHeading } from "@/app/(app)/environments/[environmentId]/actions/components/ActionTableHeading";
 import { AddActionModal } from "@/app/(app)/environments/[environmentId]/actions/components/AddActionModal";
+import { getActionClasses } from "@/lib/actionClass/service";
+import { getEnvironments } from "@/lib/environment/service";
+import { findMatchingLocale } from "@/lib/utils/locale";
 import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
 import { getTranslate } from "@/tolgee/server";
 import { Metadata } from "next";
 import { redirect } from "next/navigation";
-import { getActionClasses } from "@formbricks/lib/actionClass/service";
-import { getEnvironments } from "@formbricks/lib/environment/service";
-import { findMatchingLocale } from "@formbricks/lib/utils/locale";
 
 export const metadata: Metadata = {
   title: "Actions",

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

@@ -1,5 +1,17 @@
 import { MainNavigation } from "@/app/(app)/environments/[environmentId]/components/MainNavigation";
 import { TopControlBar } from "@/app/(app)/environments/[environmentId]/components/TopControlBar";
+import { IS_DEVELOPMENT, IS_FORMBRICKS_CLOUD } from "@/lib/constants";
+import { getEnvironment, getEnvironments } from "@/lib/environment/service";
+import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
+import { getAccessFlags } from "@/lib/membership/utils";
+import {
+  getMonthlyActiveOrganizationPeopleCount,
+  getMonthlyOrganizationResponseCount,
+  getOrganizationByEnvironmentId,
+  getOrganizationsByUserId,
+} from "@/lib/organization/service";
+import { getUserProjects } from "@/lib/project/service";
+import { getUser } from "@/lib/user/service";
 import { getEnterpriseLicense, getOrganizationProjectsLimit } from "@/modules/ee/license-check/lib/utils";
 import { getProjectPermissionByUserId } from "@/modules/ee/teams/lib/roles";
 import { DevEnvironmentBanner } from "@/modules/ui/components/dev-environment-banner";
@@ -7,18 +19,6 @@ import { LimitsReachedBanner } from "@/modules/ui/components/limits-reached-bann
 import { PendingDowngradeBanner } from "@/modules/ui/components/pending-downgrade-banner";
 import { getTranslate } from "@/tolgee/server";
 import type { Session } from "next-auth";
-import { IS_FORMBRICKS_CLOUD } from "@formbricks/lib/constants";
-import { getEnvironment, getEnvironments } from "@formbricks/lib/environment/service";
-import { getMembershipByUserIdOrganizationId } from "@formbricks/lib/membership/service";
-import { getAccessFlags } from "@formbricks/lib/membership/utils";
-import {
-  getMonthlyActiveOrganizationPeopleCount,
-  getMonthlyOrganizationResponseCount,
-  getOrganizationByEnvironmentId,
-  getOrganizationsByUserId,
-} from "@formbricks/lib/organization/service";
-import { getUserProjects } from "@formbricks/lib/project/service";
-import { getUser } from "@formbricks/lib/user/service";
 
 interface EnvironmentLayoutProps {
   environmentId: string;
@@ -111,6 +111,7 @@ export const EnvironmentLayout = async ({ environmentId, session, children }: En
           organizationProjectsLimit={organizationProjectsLimit}
           user={user}
           isFormbricksCloud={IS_FORMBRICKS_CLOUD}
+          isDevelopment={IS_DEVELOPMENT}
           membershipRole={membershipRole}
           isMultiOrgEnabled={isMultiOrgEnabled}
           isLicenseActive={active}

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

@@ -1,7 +1,7 @@
 "use client";
 
+import { FORMBRICKS_ENVIRONMENT_ID_LS } from "@/lib/localStorage";
 import { useEffect } from "react";
-import { FORMBRICKS_ENVIRONMENT_ID_LS } from "@formbricks/lib/localStorage";
 
 interface EnvironmentStorageHandlerProps {
   environmentId: string;

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

@@ -1,11 +1,11 @@
 "use client";
 
+import { cn } from "@/lib/cn";
 import { Label } from "@/modules/ui/components/label";
 import { Switch } from "@/modules/ui/components/switch";
 import { useTranslate } from "@tolgee/react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { cn } from "@formbricks/lib/cn";
 import { TEnvironment } from "@formbricks/types/environment";
 
 interface EnvironmentSwitchProps {

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

@@ -4,6 +4,9 @@ import { getLatestStableFbReleaseAction } from "@/app/(app)/environments/[enviro
 import { NavigationLink } from "@/app/(app)/environments/[environmentId]/components/NavigationLink";
 import { formbricksLogout } from "@/app/lib/formbricks";
 import FBLogo from "@/images/formbricks-wordmark.svg";
+import { cn } from "@/lib/cn";
+import { getAccessFlags } from "@/lib/membership/utils";
+import { capitalizeFirstLetter } from "@/lib/utils/strings";
 import { CreateOrganizationModal } from "@/modules/organization/components/CreateOrganizationModal";
 import { ProjectSwitcher } from "@/modules/projects/components/project-switcher";
 import { ProfileAvatar } from "@/modules/ui/components/avatars";
@@ -45,9 +48,6 @@ import Image from "next/image";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
-import { cn } from "@formbricks/lib/cn";
-import { getAccessFlags } from "@formbricks/lib/membership/utils";
-import { capitalizeFirstLetter } from "@formbricks/lib/utils/strings";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TOrganizationRole } from "@formbricks/types/memberships";
 import { TOrganization } from "@formbricks/types/organizations";
@@ -63,6 +63,7 @@ interface NavigationProps {
   projects: TProject[];
   isMultiOrgEnabled: boolean;
   isFormbricksCloud: boolean;
+  isDevelopment: boolean;
   membershipRole?: TOrganizationRole;
   organizationProjectsLimit: number;
   isLicenseActive: boolean;
@@ -79,6 +80,7 @@ export const MainNavigation = ({
   isFormbricksCloud,
   organizationProjectsLimit,
   isLicenseActive,
+  isDevelopment,
 }: NavigationProps) => {
   const router = useRouter();
   const pathname = usePathname();
@@ -263,7 +265,7 @@ export const MainNavigation = ({
                 size="icon"
                 onClick={toggleSidebar}
                 className={cn(
-                  "rounded-xl bg-slate-50 p-1 text-slate-600 transition-all hover:bg-slate-100 focus:outline-none focus:ring-0 focus:ring-transparent"
+                  "rounded-xl bg-slate-50 p-1 text-slate-600 transition-all hover:bg-slate-100 focus:ring-0 focus:ring-transparent focus:outline-hidden"
                 )}>
                 {isCollapsed ? (
                   <PanelLeftOpenIcon strokeWidth={1.5} />
@@ -296,7 +298,7 @@ export const MainNavigation = ({
 
           <div>
             {/* New Version Available */}
-            {!isCollapsed && isOwnerOrManager && latestVersion && !isFormbricksCloud && (
+            {!isCollapsed && isOwnerOrManager && latestVersion && !isFormbricksCloud && !isDevelopment && (
               <Link
                 href="https://github.com/formbricks/formbricks/releases"
                 target="_blank"
@@ -330,7 +332,7 @@ export const MainNavigation = ({
                 <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="w-full rounded-br-xl border-t py-4 transition-colors duration-200 hover:bg-slate-50 focus:outline-hidden">
                   <div
                     tabIndex={0}
                     className={cn(

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

@@ -1,7 +1,7 @@
+import { cn } from "@/lib/cn";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/modules/ui/components/tooltip";
 import Link from "next/link";
 import React from "react";
-import { cn } from "@formbricks/lib/cn";
 
 interface NavigationLinkProps {
   href: string;

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

@@ -1,10 +1,8 @@
-// PosthogIdentify.test.tsx
 import "@testing-library/jest-dom/vitest";
 import { cleanup, render } from "@testing-library/react";
 import { Session } from "next-auth";
 import { usePostHog } from "posthog-js/react";
-import React from "react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, test, vi } from "vitest";
 import { TOrganizationBilling } from "@formbricks/types/organizations";
 import { TUser } from "@formbricks/types/user";
 import { PosthogIdentify } from "./PosthogIdentify";
@@ -20,7 +18,7 @@ describe("PosthogIdentify", () => {
     cleanup();
   });
 
-  it("identifies the user and sets groups when isPosthogEnabled is true", () => {
+  test("identifies the user and sets groups when isPosthogEnabled is true", () => {
     const mockIdentify = vi.fn();
     const mockGroup = vi.fn();
 
@@ -74,7 +72,7 @@ describe("PosthogIdentify", () => {
     });
   });
 
-  it("does nothing if isPosthogEnabled is false", () => {
+  test("does nothing if isPosthogEnabled is false", () => {
     const mockIdentify = vi.fn();
     const mockGroup = vi.fn();
 
@@ -97,7 +95,7 @@ describe("PosthogIdentify", () => {
     expect(mockGroup).not.toHaveBeenCalled();
   });
 
-  it("does nothing if session user is missing", () => {
+  test("does nothing if session user is missing", () => {
     const mockIdentify = vi.fn();
     const mockGroup = vi.fn();
 
@@ -122,7 +120,7 @@ describe("PosthogIdentify", () => {
     expect(mockGroup).not.toHaveBeenCalled();
   });
 
-  it("identifies user but does not group if environmentId/organizationId not provided", () => {
+  test("identifies user but does not group if environmentId/organizationId not provided", () => {
     const mockIdentify = vi.fn();
     const mockGroup = vi.fn();
 

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

@@ -18,7 +18,7 @@ export const TopControlBar = ({
 }: SideBarProps) => {
   return (
     <div className="fixed inset-0 top-0 z-30 flex h-14 w-full items-center justify-end bg-slate-50 px-6">
-      <div className="shadow-xs z-10">
+      <div className="z-10 shadow-2xs">
         <div className="flex w-fit items-center space-x-2 py-2">
           <TopControlButtons
             environment={environment}

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { EnvironmentSwitch } from "@/app/(app)/environments/[environmentId]/components/EnvironmentSwitch";
+import { getAccessFlags } from "@/lib/membership/utils";
 import { TTeamPermission } from "@/modules/ee/teams/project-teams/types/team";
 import { getTeamPermissionFlags } from "@/modules/ee/teams/utils/teams";
 import { Button } from "@/modules/ui/components/button";
@@ -9,7 +10,6 @@ import { useTranslate } from "@tolgee/react";
 import { BugIcon, CircleUserIcon, PlusIcon } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { getAccessFlags } from "@formbricks/lib/membership/utils";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TOrganizationRole } from "@formbricks/types/memberships";
 

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

@@ -1,10 +1,10 @@
 "use client";
 
+import { cn } from "@/lib/cn";
 import { Button } from "@/modules/ui/components/button";
 import { useTranslate } from "@tolgee/react";
 import { AlertTriangleIcon, CheckIcon, RotateCcwIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { cn } from "@formbricks/lib/cn";
 import { TEnvironment } from "@formbricks/types/environment";
 
 interface WidgetStatusIndicatorProps {
@@ -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-balance text-sm text-slate-600">{currentStatus.subtitle}</p>
+      <p className="w-2/3 text-sm text-balance text-slate-600">{currentStatus.subtitle}</p>
       {status === "notImplemented" && (
         <Button variant="outline" size="sm" className="bg-white" onClick={() => router.refresh()}>
           <RotateCcwIcon />

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

@@ -1,5 +1,6 @@
 "use server";
 
+import { createOrUpdateIntegration, deleteIntegration } from "@/lib/integration/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
 import { checkAuthorizationUpdated } from "@/lib/utils/action-client-middleware";
 import {
@@ -9,7 +10,6 @@ import {
   getProjectIdFromIntegrationId,
 } from "@/lib/utils/helper";
 import { z } from "zod";
-import { createOrUpdateIntegration, deleteIntegration } from "@formbricks/lib/integration/service";
 import { ZId } from "@formbricks/types/common";
 import { ZIntegrationInput } from "@formbricks/types/integration";
 

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

@@ -4,6 +4,8 @@ import { createOrUpdateIntegrationAction } from "@/app/(app)/environments/[envir
 import { BaseSelectDropdown } from "@/app/(app)/environments/[environmentId]/integrations/airtable/components/BaseSelectDropdown";
 import { fetchTables } from "@/app/(app)/environments/[environmentId]/integrations/airtable/lib/airtable";
 import AirtableLogo from "@/images/airtableLogo.svg";
+import { getLocalizedValue } from "@/lib/i18n/utils";
+import { replaceHeadlineRecall } from "@/lib/utils/recall";
 import { AdditionalIntegrationSettings } from "@/modules/ui/components/additional-integration-settings";
 import { Alert, AlertDescription, AlertTitle } from "@/modules/ui/components/alert";
 import { Button } from "@/modules/ui/components/button";
@@ -23,8 +25,6 @@ import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
-import { getLocalizedValue } from "@formbricks/lib/i18n/utils";
-import { replaceHeadlineRecall } from "@formbricks/lib/utils/recall";
 import { TIntegrationItem } from "@formbricks/types/integration";
 import {
   TIntegrationAirtable,

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

@@ -5,6 +5,7 @@ import {
   AddIntegrationModal,
   IntegrationModalInputs,
 } from "@/app/(app)/environments/[environmentId]/integrations/airtable/components/AddIntegrationModal";
+import { timeSince } from "@/lib/time";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { Button } from "@/modules/ui/components/button";
 import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
@@ -13,7 +14,6 @@ import { useTranslate } from "@tolgee/react";
 import { Trash2Icon } from "lucide-react";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
-import { timeSince } from "@formbricks/lib/time";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TIntegrationItem } from "@formbricks/types/integration";
 import { TIntegrationAirtable } from "@formbricks/types/integration/airtable";

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

@@ -1,15 +1,15 @@
 import { AirtableWrapper } from "@/app/(app)/environments/[environmentId]/integrations/airtable/components/AirtableWrapper";
 import { getSurveys } from "@/app/(app)/environments/[environmentId]/integrations/lib/surveys";
+import { getAirtableTables } from "@/lib/airtable/service";
+import { AIRTABLE_CLIENT_ID, WEBAPP_URL } from "@/lib/constants";
+import { getIntegrations } from "@/lib/integration/service";
+import { findMatchingLocale } from "@/lib/utils/locale";
 import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
 import { GoBackButton } from "@/modules/ui/components/go-back-button";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
 import { getTranslate } from "@/tolgee/server";
 import { redirect } from "next/navigation";
-import { getAirtableTables } from "@formbricks/lib/airtable/service";
-import { AIRTABLE_CLIENT_ID, WEBAPP_URL } from "@formbricks/lib/constants";
-import { getIntegrations } from "@formbricks/lib/integration/service";
-import { findMatchingLocale } from "@formbricks/lib/utils/locale";
 import { TIntegrationItem } from "@formbricks/types/integration";
 import { TIntegrationAirtable } from "@formbricks/types/integration/airtable";
 

apps/web/app/(app)/environments/[environmentId]/integrations/google-sheets/actions.ts

@@ -1,10 +1,10 @@
 "use server";
 
+import { getSpreadsheetNameById } from "@/lib/googleSheet/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
 import { checkAuthorizationUpdated } from "@/lib/utils/action-client-middleware";
 import { getOrganizationIdFromEnvironmentId, getProjectIdFromEnvironmentId } from "@/lib/utils/helper";
 import { z } from "zod";
-import { getSpreadsheetNameById } from "@formbricks/lib/googleSheet/service";
 import { ZIntegrationGoogleSheets } from "@formbricks/types/integration/google-sheet";
 
 const ZGetSpreadsheetNameByIdAction = z.object({

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

@@ -8,7 +8,9 @@ import {
   isValidGoogleSheetsUrl,
 } from "@/app/(app)/environments/[environmentId]/integrations/google-sheets/lib/util";
 import GoogleSheetLogo from "@/images/googleSheetsLogo.png";
+import { getLocalizedValue } from "@/lib/i18n/utils";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
+import { replaceHeadlineRecall } from "@/lib/utils/recall";
 import { AdditionalIntegrationSettings } from "@/modules/ui/components/additional-integration-settings";
 import { Button } from "@/modules/ui/components/button";
 import { Checkbox } from "@/modules/ui/components/checkbox";
@@ -21,8 +23,6 @@ import Image from "next/image";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import toast from "react-hot-toast";
-import { getLocalizedValue } from "@formbricks/lib/i18n/utils";
-import { replaceHeadlineRecall } from "@formbricks/lib/utils/recall";
 import {
   TIntegrationGoogleSheets,
   TIntegrationGoogleSheetsConfigData,
@@ -255,7 +255,7 @@ export const AddIntegrationModal = ({
                 <div className="space-y-4">
                   <div>
                     <Label htmlFor="Surveys">{t("common.questions")}</Label>
-                    <div className="mt-1 max-h-[15vh] overflow-y-auto overflow-x-hidden rounded-lg border border-slate-200">
+                    <div className="mt-1 max-h-[15vh] overflow-x-hidden overflow-y-auto rounded-lg border border-slate-200">
                       <div className="grid content-center rounded-lg bg-slate-50 p-3 text-left text-sm text-slate-900">
                         {replaceHeadlineRecall(selectedSurvey, "default")?.questions.map((question) => (
                           <div key={question.id} className="my-1 flex items-center space-x-2">

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { deleteIntegrationAction } from "@/app/(app)/environments/[environmentId]/integrations/actions";
+import { timeSince } from "@/lib/time";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { Button } from "@/modules/ui/components/button";
 import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
@@ -9,7 +10,6 @@ import { useTranslate } from "@tolgee/react";
 import { Trash2Icon } from "lucide-react";
 import { useState } from "react";
 import toast from "react-hot-toast";
-import { timeSince } from "@formbricks/lib/time";
 import { TEnvironment } from "@formbricks/types/environment";
 import {
   TIntegrationGoogleSheets,

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

@@ -1,19 +1,19 @@
 import { GoogleSheetWrapper } from "@/app/(app)/environments/[environmentId]/integrations/google-sheets/components/GoogleSheetWrapper";
 import { getSurveys } from "@/app/(app)/environments/[environmentId]/integrations/lib/surveys";
+import {
+  GOOGLE_SHEETS_CLIENT_ID,
+  GOOGLE_SHEETS_CLIENT_SECRET,
+  GOOGLE_SHEETS_REDIRECT_URL,
+  WEBAPP_URL,
+} from "@/lib/constants";
+import { getIntegrations } from "@/lib/integration/service";
+import { findMatchingLocale } from "@/lib/utils/locale";
 import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
 import { GoBackButton } from "@/modules/ui/components/go-back-button";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
 import { getTranslate } from "@/tolgee/server";
 import { redirect } from "next/navigation";
-import {
-  GOOGLE_SHEETS_CLIENT_ID,
-  GOOGLE_SHEETS_CLIENT_SECRET,
-  GOOGLE_SHEETS_REDIRECT_URL,
-  WEBAPP_URL,
-} from "@formbricks/lib/constants";
-import { getIntegrations } from "@formbricks/lib/integration/service";
-import { findMatchingLocale } from "@formbricks/lib/utils/locale";
 import { TIntegrationGoogleSheets } from "@formbricks/types/integration/google-sheet";
 
 const Page = async (props) => {

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

@@ -1,12 +1,12 @@
 import "server-only";
+import { cache } from "@/lib/cache";
+import { surveyCache } from "@/lib/survey/cache";
+import { selectSurvey } from "@/lib/survey/service";
+import { transformPrismaSurvey } from "@/lib/survey/utils";
+import { validateInputs } from "@/lib/utils/validate";
 import { Prisma } from "@prisma/client";
 import { cache as reactCache } from "react";
 import { prisma } from "@formbricks/database";
-import { cache } from "@formbricks/lib/cache";
-import { surveyCache } from "@formbricks/lib/survey/cache";
-import { selectSurvey } from "@formbricks/lib/survey/service";
-import { transformPrismaSurvey } from "@formbricks/lib/survey/utils";
-import { validateInputs } from "@formbricks/lib/utils/validate";
 import { logger } from "@formbricks/logger";
 import { ZId } from "@formbricks/types/common";
 import { DatabaseError } from "@formbricks/types/errors";

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

@@ -1,9 +1,9 @@
+import { cache } from "@/lib/cache";
 import { webhookCache } from "@/lib/cache/webhook";
+import { validateInputs } from "@/lib/utils/validate";
 import { Prisma, Webhook } from "@prisma/client";
 import { z } from "zod";
 import { prisma } from "@formbricks/database";
-import { cache } from "@formbricks/lib/cache";
-import { validateInputs } from "@formbricks/lib/utils/validate";
 import { ZId } from "@formbricks/types/common";
 import { DatabaseError } from "@formbricks/types/errors";
 

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

@@ -7,6 +7,9 @@ import {
   UNSUPPORTED_TYPES_BY_NOTION,
 } from "@/app/(app)/environments/[environmentId]/integrations/notion/constants";
 import NotionLogo from "@/images/notion.png";
+import { getLocalizedValue } from "@/lib/i18n/utils";
+import { structuredClone } from "@/lib/pollyfills/structuredClone";
+import { replaceHeadlineRecall } from "@/lib/utils/recall";
 import { getQuestionTypes } from "@/modules/survey/lib/questions";
 import { Button } from "@/modules/ui/components/button";
 import { DropdownSelector } from "@/modules/ui/components/dropdown-selector";
@@ -18,9 +21,6 @@ import Image from "next/image";
 import React, { useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 import toast from "react-hot-toast";
-import { getLocalizedValue } from "@formbricks/lib/i18n/utils";
-import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone";
-import { replaceHeadlineRecall } from "@formbricks/lib/utils/recall";
 import { TIntegrationInput } from "@formbricks/types/integration";
 import {
   TIntegrationNotion,

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { deleteIntegrationAction } from "@/app/(app)/environments/[environmentId]/integrations/actions";
+import { timeSince } from "@/lib/time";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { Button } from "@/modules/ui/components/button";
 import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
@@ -10,7 +11,6 @@ import { useTranslate } from "@tolgee/react";
 import { RefreshCcwIcon, Trash2Icon } from "lucide-react";
 import React, { useState } from "react";
 import toast from "react-hot-toast";
-import { timeSince } from "@formbricks/lib/time";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TIntegrationNotion, TIntegrationNotionConfigData } from "@formbricks/types/integration/notion";
 import { TUserLocale } from "@formbricks/types/user";

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

@@ -25,6 +25,8 @@ export const TYPE_MAPPING = {
   [TSurveyQuestionTypeEnum.Address]: ["rich_text"],
   [TSurveyQuestionTypeEnum.Matrix]: ["rich_text"],
   [TSurveyQuestionTypeEnum.Cal]: ["checkbox"],
+  [TSurveyQuestionTypeEnum.ContactInfo]: ["rich_text"],
+  [TSurveyQuestionTypeEnum.Ranking]: ["rich_text"],
 };
 
 export const UNSUPPORTED_TYPES_BY_NOTION = [

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

@@ -1,21 +1,21 @@
 import { getSurveys } from "@/app/(app)/environments/[environmentId]/integrations/lib/surveys";
 import { NotionWrapper } from "@/app/(app)/environments/[environmentId]/integrations/notion/components/NotionWrapper";
-import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
-import { GoBackButton } from "@/modules/ui/components/go-back-button";
-import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
-import { PageHeader } from "@/modules/ui/components/page-header";
-import { getTranslate } from "@/tolgee/server";
-import { redirect } from "next/navigation";
 import {
   NOTION_AUTH_URL,
   NOTION_OAUTH_CLIENT_ID,
   NOTION_OAUTH_CLIENT_SECRET,
   NOTION_REDIRECT_URI,
   WEBAPP_URL,
-} from "@formbricks/lib/constants";
-import { getIntegrationByType } from "@formbricks/lib/integration/service";
-import { getNotionDatabases } from "@formbricks/lib/notion/service";
-import { findMatchingLocale } from "@formbricks/lib/utils/locale";
+} from "@/lib/constants";
+import { getIntegrationByType } from "@/lib/integration/service";
+import { getNotionDatabases } from "@/lib/notion/service";
+import { findMatchingLocale } from "@/lib/utils/locale";
+import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
+import { GoBackButton } from "@/modules/ui/components/go-back-button";
+import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
+import { PageHeader } from "@/modules/ui/components/page-header";
+import { getTranslate } from "@/tolgee/server";
+import { redirect } from "next/navigation";
 import { TIntegrationNotion, TIntegrationNotionDatabase } from "@formbricks/types/integration/notion";
 
 const Page = async (props) => {

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

@@ -9,6 +9,7 @@ import notionLogo from "@/images/notion.png";
 import SlackLogo from "@/images/slacklogo.png";
 import WebhookLogo from "@/images/webhook.png";
 import ZapierLogo from "@/images/zapier-small.png";
+import { getIntegrations } from "@/lib/integration/service";
 import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
 import { Card } from "@/modules/ui/components/integration-card";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
@@ -16,7 +17,6 @@ import { PageHeader } from "@/modules/ui/components/page-header";
 import { getTranslate } from "@/tolgee/server";
 import Image from "next/image";
 import { redirect } from "next/navigation";
-import { getIntegrations } from "@formbricks/lib/integration/service";
 import { TIntegrationType } from "@formbricks/types/integration";
 
 const Page = async (props) => {

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

@@ -1,10 +1,10 @@
 "use server";
 
+import { getSlackChannels } from "@/lib/slack/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
 import { checkAuthorizationUpdated } from "@/lib/utils/action-client-middleware";
 import { getOrganizationIdFromEnvironmentId, getProjectIdFromEnvironmentId } from "@/lib/utils/helper";
 import { z } from "zod";
-import { getSlackChannels } from "@formbricks/lib/slack/service";
 import { ZId } from "@formbricks/types/common";
 
 const ZGetSlackChannelsAction = z.object({

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

@@ -2,6 +2,8 @@
 
 import { createOrUpdateIntegrationAction } from "@/app/(app)/environments/[environmentId]/integrations/actions";
 import SlackLogo from "@/images/slacklogo.png";
+import { getLocalizedValue } from "@/lib/i18n/utils";
+import { replaceHeadlineRecall } from "@/lib/utils/recall";
 import { AdditionalIntegrationSettings } from "@/modules/ui/components/additional-integration-settings";
 import { Button } from "@/modules/ui/components/button";
 import { Checkbox } from "@/modules/ui/components/checkbox";
@@ -15,8 +17,6 @@ import Link from "next/link";
 import { useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 import toast from "react-hot-toast";
-import { getLocalizedValue } from "@formbricks/lib/i18n/utils";
-import { replaceHeadlineRecall } from "@formbricks/lib/utils/recall";
 import { TIntegrationItem } from "@formbricks/types/integration";
 import {
   TIntegrationSlack,

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { deleteIntegrationAction } from "@/app/(app)/environments/[environmentId]/integrations/actions";
+import { timeSince } from "@/lib/time";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { Button } from "@/modules/ui/components/button";
 import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
@@ -10,7 +11,6 @@ import { T } from "@tolgee/react";
 import { Trash2Icon } from "lucide-react";
 import React, { useState } from "react";
 import toast from "react-hot-toast";
-import { timeSince } from "@formbricks/lib/time";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TIntegrationSlack, TIntegrationSlackConfigData } from "@formbricks/types/integration/slack";
 import { TUserLocale } from "@formbricks/types/user";

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

@@ -1,14 +1,14 @@
 import { getSurveys } from "@/app/(app)/environments/[environmentId]/integrations/lib/surveys";
 import { SlackWrapper } from "@/app/(app)/environments/[environmentId]/integrations/slack/components/SlackWrapper";
+import { SLACK_CLIENT_ID, SLACK_CLIENT_SECRET, WEBAPP_URL } from "@/lib/constants";
+import { getIntegrationByType } from "@/lib/integration/service";
+import { findMatchingLocale } from "@/lib/utils/locale";
 import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
 import { GoBackButton } from "@/modules/ui/components/go-back-button";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
 import { getTranslate } from "@/tolgee/server";
 import { redirect } from "next/navigation";
-import { SLACK_CLIENT_ID, SLACK_CLIENT_SECRET, WEBAPP_URL } from "@formbricks/lib/constants";
-import { getIntegrationByType } from "@formbricks/lib/integration/service";
-import { findMatchingLocale } from "@formbricks/lib/utils/locale";
 import { TIntegrationSlack } from "@formbricks/types/integration/slack";
 
 const Page = async (props) => {

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

@@ -1,250 +1,156 @@
-import "@testing-library/jest-dom/vitest";
-import { act, cleanup, render, screen } from "@testing-library/react";
-import { getServerSession } from "next-auth";
-import { notFound, redirect } from "next/navigation";
-import React from "react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { hasUserEnvironmentAccess } from "@formbricks/lib/environment/auth";
-import { getMembershipByUserIdOrganizationId } from "@formbricks/lib/membership/service";
-import { getOrganizationByEnvironmentId } from "@formbricks/lib/organization/service";
-import { getProjectByEnvironmentId } from "@formbricks/lib/project/service";
-import { getUser } from "@formbricks/lib/user/service";
-import { AuthorizationError } from "@formbricks/types/errors";
+import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
+import { getProjectByEnvironmentId } from "@/lib/project/service";
+import { environmentIdLayoutChecks } from "@/modules/environments/lib/utils";
+import { cleanup, render, screen } from "@testing-library/react";
+import { Session } from "next-auth";
+import { redirect } from "next/navigation";
+import { afterEach, describe, expect, test, vi } from "vitest";
 import { TMembership } from "@formbricks/types/memberships";
 import { TOrganization } from "@formbricks/types/organizations";
 import { TProject } from "@formbricks/types/project";
 import { TUser } from "@formbricks/types/user";
 import EnvLayout from "./layout";
 
-// mock all the dependencies
-
-vi.mock("@formbricks/lib/constants", () => ({
-  IS_FORMBRICKS_CLOUD: false,
-  POSTHOG_API_KEY: "mock-posthog-api-key",
-  POSTHOG_HOST: "mock-posthog-host",
-  IS_POSTHOG_CONFIGURED: true,
-  ENCRYPTION_KEY: "mock-encryption-key",
-  ENTERPRISE_LICENSE_KEY: "mock-enterprise-license-key",
-  GITHUB_ID: "mock-github-id",
-  GITHUB_SECRET: "test-githubID",
-  GOOGLE_CLIENT_ID: "test-google-client-id",
-  GOOGLE_CLIENT_SECRET: "test-google-client-secret",
-  AZUREAD_CLIENT_ID: "test-azuread-client-id",
-  AZUREAD_CLIENT_SECRET: "test-azure",
-  AZUREAD_TENANT_ID: "test-azuread-tenant-id",
-  OIDC_DISPLAY_NAME: "test-oidc-display-name",
-  OIDC_CLIENT_ID: "test-oidc-client-id",
-  OIDC_ISSUER: "test-oidc-issuer",
-  OIDC_CLIENT_SECRET: "test-oidc-client-secret",
-  OIDC_SIGNING_ALGORITHM: "test-oidc-signing-algorithm",
-  WEBAPP_URL: "test-webapp-url",
-  IS_PRODUCTION: false,
+// Mock sub-components to render identifiable elements
+vi.mock("@/app/(app)/environments/[environmentId]/components/EnvironmentLayout", () => ({
+  EnvironmentLayout: ({ children }: any) => <div data-testid="EnvironmentLayout">{children}</div>,
 }));
-
-vi.mock("@/tolgee/server", () => ({
-  getTranslate: vi.fn(() => {
-    return (key: string) => {
-      return key;
-    };
-  }),
-}));
-
-vi.mock("next-auth", () => ({
-  getServerSession: vi.fn(),
-}));
-vi.mock("@formbricks/lib/environment/auth", () => ({
-  hasUserEnvironmentAccess: vi.fn(),
-}));
-vi.mock("@formbricks/lib/membership/service", () => ({
-  getMembershipByUserIdOrganizationId: vi.fn(),
-}));
-vi.mock("@formbricks/lib/organization/service", () => ({
-  getOrganizationByEnvironmentId: vi.fn(),
-}));
-vi.mock("@formbricks/lib/project/service", () => ({
-  getProjectByEnvironmentId: vi.fn(),
-}));
-vi.mock("@formbricks/lib/user/service", () => ({
-  getUser: vi.fn(),
-}));
-vi.mock("@formbricks/lib/aiModels", () => ({
-  llmModel: {},
-}));
-
-// mock all the components that are rendered in the layout
-
-vi.mock("./components/PosthogIdentify", () => ({
-  PosthogIdentify: () => <div data-testid="posthog-identify" />,
-}));
-vi.mock("@/app/(app)/components/FormbricksClient", () => ({
-  FormbricksClient: () => <div data-testid="formbricks-client" />,
+vi.mock("@/modules/ui/components/environmentId-base-layout", () => ({
+  EnvironmentIdBaseLayout: ({ children, environmentId }: any) => (
+    <div data-testid="EnvironmentIdBaseLayout">
+      {environmentId}
+      {children}
+    </div>
+  ),
 }));
 vi.mock("@/modules/ui/components/toaster-client", () => ({
-  ToasterClient: () => <div data-testid="mock-toaster" />,
+  ToasterClient: () => <div data-testid="ToasterClient" />,
+}));
+vi.mock("../../components/FormbricksClient", () => ({
+  FormbricksClient: ({ userId, email }: any) => (
+    <div data-testid="FormbricksClient">
+      {userId}-{email}
+    </div>
+  ),
 }));
 vi.mock("./components/EnvironmentStorageHandler", () => ({
-  default: () => <div data-testid="mock-storage-handler" />,
+  default: ({ environmentId }: any) => <div data-testid="EnvironmentStorageHandler">{environmentId}</div>,
 }));
-vi.mock("@/app/(app)/environments/[environmentId]/components/ResponseFilterContext", () => ({
-  ResponseFilterProvider: ({ children }: { children: React.ReactNode }) => (
-    <div data-testid="mock-response-filter-provider">{children}</div>
-  ),
+
+// Mocks for dependencies
+vi.mock("@/modules/environments/lib/utils", () => ({
+  environmentIdLayoutChecks: vi.fn(),
 }));
-vi.mock("@/app/(app)/environments/[environmentId]/components/EnvironmentLayout", () => ({
-  EnvironmentLayout: ({ children }: { children: React.ReactNode }) => (
-    <div data-testid="mock-environment-result">{children}</div>
-  ),
+vi.mock("@/lib/project/service", () => ({
+  getProjectByEnvironmentId: vi.fn(),
+}));
+vi.mock("@/lib/membership/service", () => ({
+  getMembershipByUserIdOrganizationId: vi.fn(),
 }));
 
 describe("EnvLayout", () => {
-  beforeEach(() => {
+  afterEach(() => {
     cleanup();
   });
 
-  it("redirects to /auth/login if there is no session", async () => {
-    vi.mocked(getServerSession).mockResolvedValueOnce(null);
-
-    // Since it's an async server component, call EnvLayout yourself:
-    const layoutElement = await EnvLayout({
-      params: Promise.resolve({ environmentId: "env-123" }),
-      children: <div data-testid="child-content">Hello!</div>,
+  test("renders successfully when all dependencies return valid data", async () => {
+    vi.mocked(environmentIdLayoutChecks).mockResolvedValueOnce({
+      t: ((key: string) => key) as any, // Mock translation function, we don't need to implement it for the test
+      session: { user: { id: "user1" } } as Session,
+      user: { id: "user1", email: "user1@example.com" } as TUser,
+      organization: { id: "org1", name: "Org1", billing: {} } as TOrganization,
     });
+    vi.mocked(getProjectByEnvironmentId).mockResolvedValueOnce({ id: "proj1" } as TProject);
+    vi.mocked(getMembershipByUserIdOrganizationId).mockResolvedValueOnce({
+      id: "member1",
+    } as unknown as TMembership);
 
-    // Because we have no session, we expect a redirect to "/auth/login"
-    expect(redirect).toHaveBeenCalledWith("/auth/login");
+    const result = await EnvLayout({
+      params: Promise.resolve({ environmentId: "env1" }),
+      children: <div data-testid="child">Content</div>,
+    });
+    render(result);
 
-    // If your code calls redirect() early and returns no JSX,
-    // layoutElement might be undefined or null.
-    expect(layoutElement).toBeUndefined();
+    expect(screen.getByTestId("EnvironmentIdBaseLayout")).toHaveTextContent("env1");
+    expect(screen.getByTestId("EnvironmentStorageHandler")).toHaveTextContent("env1");
+    expect(screen.getByTestId("EnvironmentLayout")).toBeDefined();
+    expect(screen.getByTestId("child")).toHaveTextContent("Content");
   });
 
-  it("redirects to /auth/login if user does not exist in DB", async () => {
-    vi.mocked(getServerSession).mockResolvedValueOnce({
-      user: { id: "user-123" },
+  test("throws error if project is not found", async () => {
+    vi.mocked(environmentIdLayoutChecks).mockResolvedValueOnce({
+      t: ((key: string) => key) as any,
+      session: { user: { id: "user1" } } as Session,
+      user: { id: "user1", email: "user1@example.com" } as TUser,
+      organization: { id: "org1", name: "Org1", billing: {} } as TOrganization,
     });
-
-    vi.mocked(getUser).mockResolvedValueOnce(null); // user not found
-
-    const layoutElement = await EnvLayout({
-      params: Promise.resolve({ environmentId: "env-123" }),
-      children: <div data-testid="child-content">Hello!</div>,
-    });
-
-    expect(redirect).toHaveBeenCalledWith("/auth/login");
-    expect(layoutElement).toBeUndefined();
-  });
-
-  it("throws AuthorizationError if user does not have environment access", async () => {
-    vi.mocked(getServerSession).mockResolvedValueOnce({
-      user: { id: "user-123" },
-    });
-    vi.mocked(getUser).mockResolvedValueOnce({
-      id: "user-123",
-      email: "test@example.com",
-    } as TUser);
-    vi.mocked(hasUserEnvironmentAccess).mockResolvedValueOnce(false);
-
-    await expect(
-      EnvLayout({
-        params: Promise.resolve({ environmentId: "env-123" }),
-        children: <div>Child</div>,
-      })
-    ).rejects.toThrow(AuthorizationError);
-  });
-
-  it("throws if no organization is found", async () => {
-    vi.mocked(getServerSession).mockResolvedValueOnce({
-      user: { id: "user-123" },
-    });
-    vi.mocked(getUser).mockResolvedValueOnce({
-      id: "user-123",
-      email: "test@example.com",
-    } as TUser);
-    vi.mocked(hasUserEnvironmentAccess).mockResolvedValueOnce(true);
-    vi.mocked(getOrganizationByEnvironmentId).mockResolvedValueOnce(null);
-
-    await expect(
-      EnvLayout({
-        params: Promise.resolve({ environmentId: "env-123" }),
-        children: <div data-testid="child-content">Hello from children!</div>,
-      })
-    ).rejects.toThrow("common.organization_not_found");
-  });
-
-  it("throws if no project is found", async () => {
-    vi.mocked(getServerSession).mockResolvedValueOnce({
-      user: { id: "user-123" },
-    });
-    vi.mocked(getUser).mockResolvedValueOnce({
-      id: "user-123",
-      email: "test@example.com",
-    } as TUser);
-    vi.mocked(hasUserEnvironmentAccess).mockResolvedValueOnce(true);
-    vi.mocked(getOrganizationByEnvironmentId).mockResolvedValueOnce({ id: "org-999" } as TOrganization);
     vi.mocked(getProjectByEnvironmentId).mockResolvedValueOnce(null);
+    vi.mocked(getMembershipByUserIdOrganizationId).mockResolvedValueOnce({
+      id: "member1",
+    } as unknown as TMembership);
 
     await expect(
       EnvLayout({
-        params: Promise.resolve({ environmentId: "env-123" }),
-        children: <div>Child</div>,
+        params: Promise.resolve({ environmentId: "env1" }),
+        children: <div>Content</div>,
       })
-    ).rejects.toThrow("project_not_found");
+    ).rejects.toThrow("common.project_not_found");
   });
 
-  it("calls notFound if membership is missing", async () => {
-    vi.mocked(getServerSession).mockResolvedValueOnce({
-      user: { id: "user-123" },
+  test("throws error if membership is not found", async () => {
+    vi.mocked(environmentIdLayoutChecks).mockResolvedValueOnce({
+      t: ((key: string) => key) as any,
+      session: { user: { id: "user1" } } as Session,
+      user: { id: "user1", email: "user1@example.com" } as TUser,
+      organization: { id: "org1", name: "Org1", billing: {} } as TOrganization,
     });
-    vi.mocked(getUser).mockResolvedValueOnce({
-      id: "user-123",
-      email: "test@example.com",
-    } as TUser);
-    vi.mocked(hasUserEnvironmentAccess).mockResolvedValueOnce(true);
-    vi.mocked(getOrganizationByEnvironmentId).mockResolvedValueOnce({ id: "org-999" } as TOrganization);
-    vi.mocked(getProjectByEnvironmentId).mockResolvedValueOnce({ id: "proj-111" } as TProject);
+    vi.mocked(getProjectByEnvironmentId).mockResolvedValueOnce({ id: "proj1" } as TProject);
     vi.mocked(getMembershipByUserIdOrganizationId).mockResolvedValueOnce(null);
 
     await expect(
       EnvLayout({
-        params: Promise.resolve({ environmentId: "env-123" }),
-        children: <div>Child</div>,
+        params: Promise.resolve({ environmentId: "env1" }),
+        children: <div>Content</div>,
       })
-    ).rejects.toThrow("membership_not_found");
+    ).rejects.toThrow("common.membership_not_found");
   });
 
-  it("renders environment layout if everything is valid", async () => {
-    vi.mocked(getServerSession).mockResolvedValueOnce({
-      user: { id: "user-123" },
+  test("calls redirect when session is null", async () => {
+    vi.mocked(environmentIdLayoutChecks).mockResolvedValueOnce({
+      t: ((key: string) => key) as any,
+      session: undefined as unknown as Session,
+      user: undefined as unknown as TUser,
+      organization: { id: "org1", name: "Org1", billing: {} } as TOrganization,
     });
-    vi.mocked(getUser).mockResolvedValueOnce({
-      id: "user-123",
-      email: "test@example.com",
-    } as TUser);
-    vi.mocked(hasUserEnvironmentAccess).mockResolvedValueOnce(true);
-    vi.mocked(getOrganizationByEnvironmentId).mockResolvedValueOnce({ id: "org-999" } as TOrganization);
-    vi.mocked(getProjectByEnvironmentId).mockResolvedValueOnce({ id: "proj-111" } as TProject);
-    vi.mocked(getMembershipByUserIdOrganizationId).mockResolvedValueOnce({
-      id: "membership-123",
-    } as unknown as TMembership);
-
-    let layoutElement: React.ReactNode;
-
-    await act(async () => {
-      layoutElement = await EnvLayout({
-        params: Promise.resolve({ environmentId: "env-123" }),
-        children: <div data-testid="child-content">Hello from children!</div>,
-      });
-
-      // Now render the fully resolved layout
-      render(layoutElement);
+    vi.mocked(redirect).mockImplementationOnce(() => {
+      throw new Error("Redirect called");
     });
 
-    expect(screen.getByTestId("child-content")).toHaveTextContent("Hello from children!");
-    expect(screen.getByTestId("posthog-identify")).toBeInTheDocument();
-    expect(screen.getByTestId("formbricks-client")).toBeInTheDocument();
-    expect(screen.getByTestId("mock-toaster")).toBeInTheDocument();
-    expect(screen.getByTestId("mock-storage-handler")).toBeInTheDocument();
-    expect(screen.getByTestId("mock-response-filter-provider")).toBeInTheDocument();
-    expect(screen.getByTestId("mock-environment-result")).toBeInTheDocument();
+    await expect(
+      EnvLayout({
+        params: Promise.resolve({ environmentId: "env1" }),
+        children: <div>Content</div>,
+      })
+    ).rejects.toThrow("Redirect called");
+  });
+
+  test("throws error if user is null", async () => {
+    vi.mocked(environmentIdLayoutChecks).mockResolvedValueOnce({
+      t: ((key: string) => key) as any,
+      session: { user: { id: "user1" } } as Session,
+      user: undefined as unknown as TUser,
+      organization: { id: "org1", name: "Org1", billing: {} } as TOrganization,
+    });
+
+    vi.mocked(redirect).mockImplementationOnce(() => {
+      throw new Error("Redirect called");
+    });
+
+    await expect(
+      EnvLayout({
+        params: Promise.resolve({ environmentId: "env1" }),
+        children: <div>Content</div>,
+      })
+    ).rejects.toThrow("common.user_not_found");
   });
 });

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

@@ -1,20 +1,10 @@
 import { EnvironmentLayout } from "@/app/(app)/environments/[environmentId]/components/EnvironmentLayout";
-import { ResponseFilterProvider } from "@/app/(app)/environments/[environmentId]/components/ResponseFilterContext";
-import { authOptions } from "@/modules/auth/lib/authOptions";
-import { ToasterClient } from "@/modules/ui/components/toaster-client";
-import { getTranslate } from "@/tolgee/server";
-import { getServerSession } from "next-auth";
+import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
+import { getProjectByEnvironmentId } from "@/lib/project/service";
+import { environmentIdLayoutChecks } from "@/modules/environments/lib/utils";
+import { EnvironmentIdBaseLayout } from "@/modules/ui/components/environmentId-base-layout";
 import { redirect } from "next/navigation";
-import { IS_POSTHOG_CONFIGURED } from "@formbricks/lib/constants";
-import { hasUserEnvironmentAccess } from "@formbricks/lib/environment/auth";
-import { getMembershipByUserIdOrganizationId } from "@formbricks/lib/membership/service";
-import { getOrganizationByEnvironmentId } from "@formbricks/lib/organization/service";
-import { getProjectByEnvironmentId } from "@formbricks/lib/project/service";
-import { getUser } from "@formbricks/lib/user/service";
-import { AuthorizationError } from "@formbricks/types/errors";
-import { FormbricksClient } from "../../components/FormbricksClient";
 import EnvironmentStorageHandler from "./components/EnvironmentStorageHandler";
-import { PosthogIdentify } from "./components/PosthogIdentify";
 
 const EnvLayout = async (props: {
   params: Promise<{ environmentId: string }>;
@@ -24,27 +14,16 @@ const EnvLayout = async (props: {
 
   const { children } = props;
 
-  const t = await getTranslate();
-  const session = await getServerSession(authOptions);
+  const { t, session, user, organization } = await environmentIdLayoutChecks(params.environmentId);
 
-  if (!session?.user) {
+  if (!session) {
     return redirect(`/auth/login`);
   }
 
-  const user = await getUser(session.user.id);
   if (!user) {
-    return redirect(`/auth/login`);
+    throw new Error(t("common.user_not_found"));
   }
 
-  const hasAccess = await hasUserEnvironmentAccess(session.user.id, params.environmentId);
-  if (!hasAccess) {
-    throw new AuthorizationError(t("common.not_authorized"));
-  }
-
-  const organization = await getOrganizationByEnvironmentId(params.environmentId);
-  if (!organization) {
-    throw new Error(t("common.organization_not_found"));
-  }
   const project = await getProjectByEnvironmentId(params.environmentId);
   if (!project) {
     throw new Error(t("common.project_not_found"));
@@ -57,23 +36,16 @@ const EnvLayout = async (props: {
   }
 
   return (
-    <ResponseFilterProvider>
-      <PosthogIdentify
-        session={session}
-        user={user}
-        environmentId={params.environmentId}
-        organizationId={organization.id}
-        organizationName={organization.name}
-        organizationBilling={organization.billing}
-        isPosthogEnabled={IS_POSTHOG_CONFIGURED}
-      />
-      <FormbricksClient userId={user.id} email={user.email} />
-      <ToasterClient />
+    <EnvironmentIdBaseLayout
+      environmentId={params.environmentId}
+      session={session}
+      user={user}
+      organization={organization}>
       <EnvironmentStorageHandler environmentId={params.environmentId} />
       <EnvironmentLayout environmentId={params.environmentId} session={session}>
         {children}
       </EnvironmentLayout>
-    </ResponseFilterProvider>
+    </EnvironmentIdBaseLayout>
   );
 };
 

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

@@ -1,7 +1,7 @@
+import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
+import { getAccessFlags } from "@/lib/membership/utils";
 import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
 import { redirect } from "next/navigation";
-import { getMembershipByUserIdOrganizationId } from "@formbricks/lib/membership/service";
-import { getAccessFlags } from "@formbricks/lib/membership/utils";
 
 const EnvironmentPage = async (props) => {
   const params = await props.params;

apps/web/app/(app)/environments/[environmentId]/project/api-keys/loading.tsx

@@ -1,3 +0,0 @@
-import { APIKeysLoading } from "@/modules/projects/settings/api-keys/loading";
-
-export default APIKeysLoading;

apps/web/app/(app)/environments/[environmentId]/project/api-keys/page.tsx

@@ -1,3 +0,0 @@
-import { APIKeysPage } from "@/modules/projects/settings/api-keys/page";
-
-export default APIKeysPage;

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

@@ -1,8 +1,8 @@
+import { getOrganizationByEnvironmentId } from "@/lib/organization/service";
+import { getProjectByEnvironmentId } from "@/lib/project/service";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { getTranslate } from "@/tolgee/server";
 import { getServerSession } from "next-auth";
-import { getOrganizationByEnvironmentId } from "@formbricks/lib/organization/service";
-import { getProjectByEnvironmentId } from "@formbricks/lib/project/service";
 
 const AccountSettingsLayout = async (props) => {
   const params = await props.params;

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

@@ -1,8 +1,8 @@
 "use server";
 
+import { updateUser } from "@/lib/user/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
 import { z } from "zod";
-import { updateUser } from "@formbricks/lib/user/service";
 import { ZUserNotificationSettings } from "@formbricks/types/user";
 
 const ZUpdateNotificationSettingsAction = z.object({

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

@@ -56,7 +56,7 @@ export const EditAlerts = ({
                   <TooltipTrigger>
                     <div className="col-span-1 flex cursor-default items-center justify-center space-x-2">
                       <span>{t("environments.settings.notifications.every_response")}</span>
-                      <HelpCircleIcon className="h-4 w-4 flex-shrink-0 text-slate-500" />
+                      <HelpCircleIcon className="h-4 w-4 shrink-0 text-slate-500" />
                     </div>
                   </TooltipTrigger>
                   <TooltipContent>
@@ -99,7 +99,7 @@ export const EditAlerts = ({
                 ))}
               </div>
             ) : (
-              <div className="m-2 flex h-16 items-center justify-center rounded bg-slate-50 text-sm text-slate-500">
+              <div className="m-2 flex h-16 items-center justify-center rounded-sm bg-slate-50 text-sm text-slate-500">
                 <p>{t("common.no_surveys_found")}</p>
               </div>
             )}

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

@@ -11,7 +11,7 @@ export const IntegrationsTip = ({ environmentId }: IntegrationsTipProps) => {
   const { t } = useTranslate();
   return (
     <div>
-      <div className="flex max-w-4xl items-center space-y-3 rounded-lg border border-blue-100 bg-blue-50 p-4 text-sm text-blue-900 shadow-sm md:space-y-0 md:text-base">
+      <div className="flex max-w-4xl items-center space-y-3 rounded-lg border border-blue-100 bg-blue-50 p-4 text-sm text-blue-900 shadow-xs md:space-y-0 md:text-base">
         <SlackIcon className="mr-3 h-4 w-4 text-blue-400" />
         <p className="text-sm">
           {t("environments.settings.notifications.need_slack_or_discord_notifications")}?

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

@@ -1,12 +1,12 @@
 import { AccountSettingsNavbar } from "@/app/(app)/environments/[environmentId]/settings/(account)/components/AccountSettingsNavbar";
 import { SettingsCard } from "@/app/(app)/environments/[environmentId]/settings/components/SettingsCard";
+import { getUser } from "@/lib/user/service";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
 import { getTranslate } from "@/tolgee/server";
 import { getServerSession } from "next-auth";
 import { prisma } from "@formbricks/database";
-import { getUser } from "@formbricks/lib/user/service";
 import { TUserNotificationSettings } from "@formbricks/types/user";
 import { EditAlerts } from "./components/EditAlerts";
 import { EditWeeklySummary } from "./components/EditWeeklySummary";

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

@@ -1,10 +1,10 @@
 "use server";
 
+import { deleteFile } from "@/lib/storage/service";
+import { getFileNameWithIdFromUrl } from "@/lib/storage/utils";
+import { updateUser } from "@/lib/user/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
 import { z } from "zod";
-import { deleteFile } from "@formbricks/lib/storage/service";
-import { getFileNameWithIdFromUrl } from "@formbricks/lib/storage/utils";
-import { updateUser } from "@formbricks/lib/user/service";
 import { ZId } from "@formbricks/types/common";
 import { ZUserUpdateInput } from "@formbricks/types/user";
 

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

@@ -105,7 +105,7 @@ export const EditProfileAvatarForm = ({ session, environmentId, imageUrl }: Edit
     <div>
       <div className="relative h-10 w-10 overflow-hidden rounded-full">
         {isLoading && (
-          <div className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-30">
+          <div className="absolute inset-0 flex items-center justify-center bg-black/30">
             <svg className="h-7 w-7 animate-spin text-slate-200" viewBox="0 0 24 24">
               <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
               <path

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { appLanguages } from "@/lib/i18n/utils";
 import { Button } from "@/modules/ui/components/button";
 import {
   DropdownMenu,
@@ -23,7 +24,6 @@ import { ChevronDownIcon } from "lucide-react";
 import { SubmitHandler, useForm } from "react-hook-form";
 import toast from "react-hot-toast";
 import { z } from "zod";
-import { appLanguages } from "@formbricks/lib/i18n/utils";
 import { TUser, ZUser } from "@formbricks/types/user";
 import { updateUserAction } from "../actions";
 

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

@@ -1,5 +1,8 @@
 import { AccountSettingsNavbar } from "@/app/(app)/environments/[environmentId]/settings/(account)/components/AccountSettingsNavbar";
 import { AccountSecurity } from "@/app/(app)/environments/[environmentId]/settings/(account)/profile/components/AccountSecurity";
+import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
+import { getOrganizationsWhereUserIsSingleOwner } from "@/lib/organization/service";
+import { getUser } from "@/lib/user/service";
 import { getIsMultiOrgEnabled, getIsTwoFactorAuthEnabled } from "@/modules/ee/license-check/lib/utils";
 import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
@@ -7,9 +10,6 @@ import { PageHeader } from "@/modules/ui/components/page-header";
 import { SettingsId } from "@/modules/ui/components/settings-id";
 import { UpgradePrompt } from "@/modules/ui/components/upgrade-prompt";
 import { getTranslate } from "@/tolgee/server";
-import { IS_FORMBRICKS_CLOUD } from "@formbricks/lib/constants";
-import { getOrganizationsWhereUserIsSingleOwner } from "@formbricks/lib/organization/service";
-import { getUser } from "@formbricks/lib/user/service";
 import { SettingsCard } from "../../components/SettingsCard";
 import { DeleteAccount } from "./components/DeleteAccount";
 import { EditProfileAvatarForm } from "./components/EditProfileAvatarForm";

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/api-keys/loading.tsx

@@ -0,0 +1,6 @@
+import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
+import Loading from "@/modules/organization/settings/api-keys/loading";
+
+export default function LoadingPage() {
+  return <Loading isFormbricksCloud={IS_FORMBRICKS_CLOUD} />;
+}

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/api-keys/page.tsx

@@ -0,0 +1,3 @@
+import { APIKeysPage } from "@/modules/organization/settings/api-keys/page";
+
+export default APIKeysPage;

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

@@ -1,8 +1,8 @@
 import { OrganizationSettingsNavbar } from "@/app/(app)/environments/[environmentId]/settings/(organization)/components/OrganizationSettingsNavbar";
+import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
 import { getTranslate } from "@/tolgee/server";
-import { IS_FORMBRICKS_CLOUD } from "@formbricks/lib/constants";
 
 const Loading = async () => {
   const t = await getTranslate();

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

@@ -1,9 +1,9 @@
 "use client";
 
+import { getAccessFlags } from "@/lib/membership/utils";
 import { SecondaryNavigation } from "@/modules/ui/components/secondary-navigation";
 import { useTranslate } from "@tolgee/react";
 import { usePathname } from "next/navigation";
-import { getAccessFlags } from "@formbricks/lib/membership/utils";
 import { TOrganizationRole } from "@formbricks/types/memberships";
 
 interface OrganizationSettingsNavbarProps {
@@ -22,7 +22,7 @@ export const OrganizationSettingsNavbar = ({
   loading,
 }: OrganizationSettingsNavbarProps) => {
   const pathname = usePathname();
-  const { isMember } = getAccessFlags(membershipRole);
+  const { isMember, isOwner } = getAccessFlags(membershipRole);
   const isPricingDisabled = isMember;
   const { t } = useTranslate();
 
@@ -54,6 +54,13 @@ export const OrganizationSettingsNavbar = ({
       hidden: isFormbricksCloud || isPricingDisabled,
       current: pathname?.includes("/enterprise"),
     },
+    {
+      id: "api-keys",
+      label: t("common.api_keys"),
+      href: `/environments/${environmentId}/settings/api-keys`,
+      current: pathname?.includes("/api-keys"),
+      hidden: !isOwner,
+    },
   ];
 
   return <SecondaryNavigation navigation={navigation} activeId={activeId} loading={loading} />;

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

@@ -1,8 +1,8 @@
 import { OrganizationSettingsNavbar } from "@/app/(app)/environments/[environmentId]/settings/(organization)/components/OrganizationSettingsNavbar";
+import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
 import { getTranslate } from "@/tolgee/server";
-import { IS_FORMBRICKS_CLOUD } from "@formbricks/lib/constants";
 
 const Loading = async () => {
   const t = await getTranslate();