fixing tailwind

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=

.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:
@@ -57,14 +65,13 @@ runs:
       run: |
         RANDOM_KEY=$(openssl rand -hex 32)
         sed -i "s/ENCRYPTION_KEY=.*/ENCRYPTION_KEY=${RANDOM_KEY}/" .env
-        sed -i "s/CRON_SECRET=.*/CRON_SECRET=${RANDOM_KEY}/" .env
-        sed -i "s/NEXTAUTH_SECRET=.*/NEXTAUTH_SECRET=${RANDOM_KEY}/" .env
-        sed -i "s/ENTERPRISE_LICENSE_KEY=.*/ENTERPRISE_LICENSE_KEY=${RANDOM_KEY}/" .env
         echo "E2E_TESTING=${{ inputs.e2e_testing_mode }}" >> .env
       shell: bash
 
     - 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/deploy-formbricks-cloud.yml

@@ -0,0 +1,64 @@
+name: Formbricks Cloud Deployment
+
+on:
+  workflow_dispatch:
+    inputs:
+      VERSION:
+        description: 'The version of the Docker image to release'
+        required: true
+        type: string
+      REPOSITORY:
+        description: 'The repository to use for the Docker image'
+        required: false
+        type: string
+        default: 'ghcr.io/formbricks/formbricks'
+  workflow_call:
+    inputs:
+      VERSION:
+        description: 'The version of the Docker image to release'
+        required: true
+        type: string
+      REPOSITORY:
+        description: 'The repository to use for the Docker image'
+        required: false
+        type: string
+        default: 'ghcr.io/formbricks/formbricks'
+
+permissions:
+  id-token: write
+  contents: write
+
+jobs:
+  helmfile-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@e3dd6a429d7300a6a4c196c26e071d42e0343502 # v4.0.2
+        with:
+          role-to-assume: ${{ secrets.AWS_ASSUME_ROLE_ARN }}
+          aws-region: "eu-central-1"
+
+      - name: Setup Cluster Access
+        run: |
+          aws eks update-kubeconfig --name formbricks-prod-eks --region eu-central-1
+        env:
+          AWS_REGION: eu-central-1
+
+      - uses: helmfile/helmfile-action@v2
+        env:
+          VERSION: ${{ inputs.VERSION }}
+          REPOSITORY: ${{ inputs.REPOSITORY }}
+          FORMBRICKS_S3_BUCKET: ${{ secrets.FORMBRICKS_S3_BUCKET }}
+          FORMBRICKS_INGRESS_CERT_ARN: ${{ secrets.FORMBRICKS_INGRESS_CERT_ARN }}
+          FORMBRICKS_ROLE_ARN: ${{ secrets.FORMBRICKS_ROLE_ARN }}
+        with:
+          helm-plugins: >
+            https://github.com/databus23/helm-diff,
+            https://github.com/jkroepke/helm-secrets
+          helmfile-args: apply
+          helmfile-auto-init: "false"
+          helmfile-workdirectory: infra/formbricks-cloud-helm
+

.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/formbricks-release.yml

@@ -0,0 +1,33 @@
+name: Build, release & deploy Formbricks images
+
+on:
+  workflow_dispatch:
+  push:
+    tags:
+      - "v*"
+
+jobs:
+  docker-build:
+    name: Build & release stable docker image
+    if: startsWith(github.ref, 'refs/tags/v')
+    uses: ./.github/workflows/release-docker-github.yml
+    secrets: inherit
+
+  helm-chart-release:
+    name: Release Helm Chart
+    uses: ./.github/workflows/release-helm-chart.yml
+    secrets: inherit
+    needs:
+      - docker-build
+    with:
+      VERSION: ${{ needs.docker-build.outputs.VERSION }}
+
+  deploy-formbricks-cloud:
+    name: Deploy Helm Chart to Formbricks Cloud
+    secrets: inherit
+    uses: ./.github/workflows/deploy-formbricks-cloud.yml
+    needs:
+      - docker-build
+      - helm-chart-release
+    with:
+      VERSION: ${{ needs.docker-build.outputs.VERSION }}

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

@@ -15,7 +15,6 @@ env:
   IMAGE_NAME: ${{ github.repository }}-experimental
   TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
   TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-  DATABASE_URL: "postgresql://postgres:postgres@localhost:5432/formbricks?schema=public"
 
 permissions:
   contents: read
@@ -80,6 +79,9 @@ jobs:
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
+          secrets: |
+            database_url=${{ secrets.DUMMY_DATABASE_URL }}
+            encryption_key=${{ secrets.DUMMY_ENCRYPTION_KEY }}
           cache-from: type=gha
           cache-to: type=gha,mode=max
 

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

@@ -6,10 +6,11 @@ name: Docker Release to Github
 # documentation.
 
 on:
-  workflow_dispatch:
-  push:
-    tags:
-      - "v*"
+  workflow_call:
+    outputs:
+      VERSION:
+        description: release version
+        value: ${{ jobs.build.outputs.VERSION }}
 
 env:
   # Use docker.io for Docker Hub if empty
@@ -18,7 +19,6 @@ env:
   IMAGE_NAME: ${{ github.repository }}
   TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
   TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-  DATABASE_URL: "postgresql://postgres:postgres@localhost:5432/formbricks?schema=public"
 
 permissions:
   contents: read
@@ -33,6 +33,9 @@ jobs:
       # with sigstore/fulcio when running outside of PRs.
       id-token: write
 
+    outputs:
+      VERSION: ${{ steps.extract_release_tag.outputs.VERSION }}
+
     steps:
       - name: Harden the runner (Audit all outbound calls)
         uses: step-security/harden-runner@4d991eb9b905ef189e4c376166672c3f2f230481 # v2.11.0
@@ -48,6 +51,7 @@ jobs:
           TAG=${{ github.ref }}
           TAG=${TAG#refs/tags/v}
           echo "RELEASE_TAG=$TAG" >> $GITHUB_ENV
+          echo "VERSION=$TAG" >> $GITHUB_OUTPUT
 
       - name: Update package.json version
         run: |
@@ -95,6 +99,9 @@ jobs:
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
+          secrets: |
+            database_url=${{ secrets.DUMMY_DATABASE_URL }}
+            encryption_key=${{ secrets.DUMMY_ENCRYPTION_KEY }}
           cache-from: type=gha
           cache-to: type=gha,mode=max
 

.github/workflows/release-docker.yml

@@ -1,59 +0,0 @@
-name: Release on Dockerhub
-
-on:
-  push:
-    tags:
-      - "v*"
-
-permissions:
-  contents: read
-
-jobs:
-  release-image-on-dockerhub:
-    name: Release on Dockerhub
-    permissions:
-      contents: read
-    runs-on: ubuntu-latest
-    env:
-      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-      DATABASE_URL: "postgresql://postgres:postgres@localhost:5432/formbricks?schema=public"
-    steps:
-      - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@4d991eb9b905ef189e4c376166672c3f2f230481 # v2.11.0
-        with:
-          egress-policy: audit
-
-      - name: Checkout Repo
-        uses: actions/checkout@ee0669bd1cc54295c223e0bb666b733df41de1c5 # v2.7.0
-
-      - name: Get Release Tag
-        id: extract_release_tag
-        run: |
-          TAG=${{ github.ref }}
-          TAG=${TAG#refs/tags/v}
-          echo "RELEASE_TAG=$TAG" >> $GITHUB_ENV
-
-      - name: Update package.json version
-        run: |
-          sed -i "s/\"version\": \"0.0.0\"/\"version\": \"${{ env.RELEASE_TAG }}\"/" ./apps/web/package.json
-          cat ./apps/web/package.json | grep version
-
-      - name: Log in to Docker Hub
-        uses: docker/login-action@465a07811f14bebb1938fbed4728c6a1ff8901fc # v2.2.0
-        with:
-          username: ${{ secrets.DOCKER_USERNAME }}
-          password: ${{ secrets.DOCKER_PASSWORD }}
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@885d1462b80bc1c1c7f0b00334ad271f09369c55 # v2.10.0
-
-      - name: Build and push Docker image
-        uses: docker/build-push-action@0a97817b6ade9f46837855d676c4cca3a2471fc9 # v4.2.1
-        with:
-          context: .
-          file: ./apps/web/Dockerfile
-          push: true
-          tags: |
-            ${{ secrets.DOCKER_USERNAME }}/formbricks:${{ env.RELEASE_TAG }}
-            ${{ secrets.DOCKER_USERNAME }}/formbricks:latest

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

@@ -1,9 +1,12 @@
 name: Publish Helm Chart
 
 on:
-  release:
-    types:
-      - published
+  workflow_call:
+    inputs:
+      VERSION:
+        description: 'The version of the Helm chart to release'
+        required: true
+        type: string
 
 permissions:
   contents: read
@@ -39,8 +42,8 @@ jobs:
 
       - name: Update Chart.yaml with new version
         run: |
-          yq -i ".version = \"${VERSION#v}\"" helm-chart/Chart.yaml
-          yq -i ".appVersion = \"${VERSION}\"" helm-chart/Chart.yaml
+          yq -i ".version = \"${{ inputs.VERSION }}\"" helm-chart/Chart.yaml
+          yq -i ".appVersion = \"v${{ inputs.VERSION }}\"" helm-chart/Chart.yaml
 
       - name: Package Helm chart
         run: |
@@ -48,4 +51,4 @@ jobs:
 
       - name: Push Helm chart to GitHub Container Registry
         run: |
-          helm push formbricks-${VERSION#v}.tgz oci://ghcr.io/formbricks/helm-charts
+          helm push formbricks-${{ inputs.VERSION }}.tgz oci://ghcr.io/formbricks/helm-charts

.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

@@ -3,16 +3,21 @@ name: 'Terraform'
 on:
   workflow_dispatch:
 # TODO: enable it back when migration is completed.
-#  push:
-#    branches:
-#      - main
-#  pull_request:
-#    branches:
-#      - main
+  push:
+    branches:
+      - main
+    paths:
+      - "infra/terraform/**"
+  pull_request:
+    branches:
+      - main
+    paths:
+      - "infra/terraform/**"
 
 permissions:
   id-token: write
   contents: write
+  pull-requests: write
 
 jobs:
   terraform:
@@ -58,18 +63,17 @@ jobs:
         run: terraform plan -out .planfile
         working-directory: infra/terraform
 
-#      - name: Post PR comment
-#        uses: borchero/terraform-plan-comment@3399d8dbae8b05185e815e02361ede2949cd99c4 # v2.4.0
-#        if: always() && github.ref != 'refs/heads/main' && (steps.validate.outcome == 'success' || steps.validate.outcome == 'failure')
-#        with:
-#          token: ${{ github.token }}
-#          planfile: .planfile
-#          working-directory: "infra/terraform"
-#          skip-comment: true
+      - name: Post PR comment
+        uses: borchero/terraform-plan-comment@3399d8dbae8b05185e815e02361ede2949cd99c4 # v2.4.0
+        if: always() && github.ref != 'refs/heads/main' && (steps.plan.outcome == 'success' || steps.plan.outcome == 'failure')
+        with:
+          token: ${{ github.token }}
+          planfile: .planfile
+          working-directory: "infra/terraform"
 
       - name: Terraform Apply
         id: apply
-#        if: github.ref == 'refs/heads/main' && github.event_name == 'push'
+        if: github.ref == 'refs/heads/main' && github.event_name == 'push'
         run: terraform apply .planfile
         working-directory: "infra/terraform"
 

.vscode/settings.json

@@ -1,4 +1,8 @@
 {
+  "sonarlint.connectedMode.project": {
+    "connectionId": "formbricks",
+    "projectKey": "formbricks_formbricks"
+  },
   "typescript.preferences.importModuleSpecifier": "non-relative",
   "typescript.tsdk": "node_modules/typescript/lib"
 }

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.9"
+    "storybook": "8.6.12",
+    "tsup": "8.4.0",
+    "vite": "6.2.5"
   }
 }

apps/web/Dockerfile

@@ -22,19 +22,27 @@ 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
 
-# Set hardcoded environment variables
-ENV DATABASE_URL="postgresql://placeholder:for@build:5432/gets_overwritten_at_runtime?schema=public"
-ENV NEXTAUTH_SECRET="placeholder_for_next_auth_of_64_chars_get_overwritten_at_runtime"
-ENV ENCRYPTION_KEY="placeholder_for_build_key_of_64_chars_get_overwritten_at_runtime"
-ENV CRON_SECRET="placeholder_for_cron_secret_of_64_chars_get_overwritten_at_runtime"
+# BuildKit secret handling without hardcoded fallback values
+# This approach relies entirely on secrets passed from GitHub Actions
+RUN echo '#!/bin/sh' > /tmp/read-secrets.sh && \
+    echo 'if [ -f "/run/secrets/database_url" ]; then' >> /tmp/read-secrets.sh && \
+    echo '  export DATABASE_URL=$(cat /run/secrets/database_url)' >> /tmp/read-secrets.sh && \
+    echo 'else' >> /tmp/read-secrets.sh && \
+    echo '  echo "DATABASE_URL secret not found. Build may fail if this is required."' >> /tmp/read-secrets.sh && \
+    echo 'fi' >> /tmp/read-secrets.sh && \
+    echo 'if [ -f "/run/secrets/encryption_key" ]; then' >> /tmp/read-secrets.sh && \
+    echo '  export ENCRYPTION_KEY=$(cat /run/secrets/encryption_key)' >> /tmp/read-secrets.sh && \
+    echo 'else' >> /tmp/read-secrets.sh && \
+    echo '  echo "ENCRYPTION_KEY secret not found. Build may fail if this is required."' >> /tmp/read-secrets.sh && \
+    echo 'fi' >> /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
-# ENV NODE_OPTIONS="--max_old_space_size=4096"
+# Increase Node.js memory limit as a regular build argument
+ARG NODE_OPTIONS="--max_old_space_size=4096"
+ENV NODE_OPTIONS=${NODE_OPTIONS}
 
 # Set the working directory
 WORKDIR /app
@@ -53,8 +61,11 @@ RUN touch apps/web/.env
 # Install the dependencies
 RUN pnpm install
 
-# Build the project
-RUN NODE_OPTIONS="--max_old_space_size=4096" pnpm build --filter=@formbricks/web...
+# Build the project using our secret reader script
+# This mounts the secrets only during this build step without storing them in layers
+RUN --mount=type=secret,id=database_url \
+    --mount=type=secret,id=encryption_key \
+    /tmp/read-secrets.sh pnpm build --filter=@formbricks/web...
 
 # Extract Prisma version
 RUN jq -r '.devDependencies.prisma' packages/database/package.json > /prisma_version.txt
@@ -74,31 +85,60 @@ RUN apk add --no-cache curl \
 
 WORKDIR /home/nextjs
 
-COPY --from=installer /app/apps/web/next.config.mjs .
-COPY --from=installer /app/apps/web/package.json .
-# Leverage output traces to reduce image size
-
+# Ensure no write permissions are assigned to the copied resources
 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
+RUN 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 .
+RUN chmod 644 ./package.json
+
+COPY --from=installer --chown=nextjs:nextjs /app/apps/web/.next/static ./apps/web/.next/static
+RUN chmod -R 755 ./apps/web/.next/static
+
+COPY --from=installer --chown=nextjs:nextjs /app/apps/web/public ./apps/web/public
+RUN chmod -R 755 ./apps/web/public
+
+COPY --from=installer --chown=nextjs:nextjs /app/packages/database/schema.prisma ./packages/database/schema.prisma
+RUN chmod 644 ./packages/database/schema.prisma
+
+COPY --from=installer --chown=nextjs:nextjs /app/packages/database/package.json ./packages/database/package.json
+RUN chmod 644 ./packages/database/package.json
+
+COPY --from=installer --chown=nextjs:nextjs /app/packages/database/migration ./packages/database/migration
+RUN chmod -R 755 ./packages/database/migration
+
+COPY --from=installer --chown=nextjs:nextjs /app/packages/database/src ./packages/database/src
+RUN chmod -R 755 ./packages/database/src
+
+COPY --from=installer --chown=nextjs:nextjs /app/packages/database/node_modules ./packages/database/node_modules
+RUN chmod -R 755 ./packages/database/node_modules
+
+COPY --from=installer --chown=nextjs:nextjs /app/packages/logger/dist ./packages/database/node_modules/@formbricks/logger/dist
+RUN chmod -R 755 ./packages/database/node_modules/@formbricks/logger/dist
 
-# Copy Prisma-specific generated files
 COPY --from=installer --chown=nextjs:nextjs /app/node_modules/@prisma/client ./node_modules/@prisma/client
+RUN chmod -R 755 ./node_modules/@prisma/client
+
 COPY --from=installer --chown=nextjs:nextjs /app/node_modules/.prisma ./node_modules/.prisma
+RUN chmod -R 755 ./node_modules/.prisma
 
 COPY --from=installer --chown=nextjs:nextjs /prisma_version.txt .
-COPY /docker/cronjobs /app/docker/cronjobs
+RUN chmod 644 ./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/OnboardingSetupInstructions.test.tsx

@@ -0,0 +1,103 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import toast from "react-hot-toast";
+import { afterEach, beforeAll, describe, expect, test, vi } from "vitest";
+import { OnboardingSetupInstructions } from "./OnboardingSetupInstructions";
+
+// Mock react-hot-toast so we can assert that a success message is shown
+vi.mock("react-hot-toast", () => ({
+  __esModule: true,
+  default: {
+    success: vi.fn(),
+  },
+}));
+
+// Set up a spy for navigator.clipboard.writeText so it becomes a ViTest spy.
+beforeAll(() => {
+  Object.defineProperty(navigator, "clipboard", {
+    configurable: true,
+    writable: true,
+    value: {
+      // Using a mockResolvedValue resolves the promise as writeText is async.
+      writeText: vi.fn().mockResolvedValue(undefined),
+    },
+  });
+});
+
+describe("OnboardingSetupInstructions", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  // Provide some default props for testing
+  const defaultProps = {
+    environmentId: "env-123",
+    webAppUrl: "https://example.com",
+    channel: "app" as const, // Assuming channel is either "app" or "website"
+    widgetSetupCompleted: false,
+  };
+
+  test("renders HTML tab content by default", () => {
+    render(<OnboardingSetupInstructions {...defaultProps} />);
+
+    // Since the default active tab is "html", we check for a unique text
+    expect(
+      screen.getByText(/environments.connect.insert_this_code_into_the_head_tag_of_your_website/i)
+    ).toBeInTheDocument();
+
+    // The HTML snippet contains a marker comment
+    expect(screen.getByText("START")).toBeInTheDocument();
+
+    // Verify the "Copy Code" button is present
+    expect(screen.getByRole("button", { name: /common.copy_code/i })).toBeInTheDocument();
+  });
+
+  test("renders NPM tab content when selected", async () => {
+    render(<OnboardingSetupInstructions {...defaultProps} />);
+    const user = userEvent.setup();
+
+    // Click on the "NPM" tab to switch views.
+    const npmTab = screen.getByText("NPM");
+    await user.click(npmTab);
+
+    // Check that the install commands are present
+    expect(screen.getByText(/npm install @formbricks\/js/)).toBeInTheDocument();
+    expect(screen.getByText(/yarn add @formbricks\/js/)).toBeInTheDocument();
+
+    // Verify the "Read Docs" link has the correct URL (based on channel prop)
+    const readDocsLink = screen.getByRole("link", { name: /common.read_docs/i });
+    expect(readDocsLink).toHaveAttribute("href", "https://formbricks.com/docs/app-surveys/framework-guides");
+  });
+
+  test("copies HTML snippet to clipboard and shows success toast when Copy Code button is clicked", async () => {
+    render(<OnboardingSetupInstructions {...defaultProps} />);
+    const user = userEvent.setup();
+
+    const writeTextSpy = vi.spyOn(navigator.clipboard, "writeText");
+
+    // Click the "Copy Code" button
+    const copyButton = screen.getByRole("button", { name: /common.copy_code/i });
+    await user.click(copyButton);
+
+    // Ensure navigator.clipboard.writeText was called.
+    expect(writeTextSpy).toHaveBeenCalled();
+    const writtenText = (navigator.clipboard.writeText as any).mock.calls[0][0] as string;
+
+    // Check that the pasted snippet contains the expected environment values
+    expect(writtenText).toContain('var appUrl = "https://example.com"');
+    expect(writtenText).toContain('var environmentId = "env-123"');
+
+    // Verify that a success toast was shown
+    expect(toast.success).toHaveBeenCalledWith("common.copied_to_clipboard");
+  });
+
+  test("renders step-by-step manual link with correct URL in HTML tab", () => {
+    render(<OnboardingSetupInstructions {...defaultProps} />);
+    const manualLink = screen.getByRole("link", { name: /common.step_by_step_manual/i });
+    expect(manualLink).toHaveAttribute(
+      "href",
+      "https://formbricks.com/docs/app-surveys/framework-guides#html"
+    );
+  });
+});

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

@@ -36,7 +36,7 @@ export const OnboardingSetupInstructions = ({
   !function(){
       var appUrl = "${webAppUrl}";
       var environmentId = "${environmentId}";
-      var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=appUrl+"/js/formbricks.umd.cjs";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.setup({environmentId: environmentId, appUrl: appUrl})},500)}();
+      var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=appUrl+"/js/formbricks.umd.cjs",t.onload=function(){window.formbricks?window.formbricks.setup({environmentId:environmentId,appUrl:appUrl}):console.error("Formbricks library failed to load properly. The formbricks object is not available.");};var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}();
   </script>
   <!-- END Formbricks Surveys -->
   `;
@@ -46,7 +46,7 @@ export const OnboardingSetupInstructions = ({
   !function(){
     var appUrl = "${webAppUrl}";
     var environmentId = "${environmentId}";
-      var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=appUrl+"/js/formbricks.umd.cjs";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.setup({environmentId: environmentId, appUrl: appUrl })},500)}();
+    var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=appUrl+"/js/formbricks.umd.cjs",t.onload=function(){window.formbricks?window.formbricks.setup({environmentId:environmentId,appUrl:appUrl}):console.error("Formbricks library failed to load properly. The formbricks object is not available.");};var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}();
   </script>
   <!-- END Formbricks Surveys -->
   `;
@@ -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

@@ -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]/xm-templates/page.tsx

@@ -49,7 +49,7 @@ const Page = async (props: XMTemplatePageProps) => {
       <XMTemplateList project={project} user={user} environmentId={environment.id} />
       {projects.length >= 2 && (
         <Button
-          className="absolute 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)/organizations/[organizationId]/landing/components/landing-sidebar.tsx

@@ -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} />
               <>

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

@@ -1,27 +1,25 @@
 import { LandingSidebar } from "@/app/(app)/(onboarding)/organizations/[organizationId]/landing/components/landing-sidebar";
-import { authOptions } from "@/modules/auth/lib/authOptions";
 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 { getServerSession } from "next-auth";
 import { notFound, redirect } from "next/navigation";
-import { getOrganization, getOrganizationsByUserId } from "@formbricks/lib/organization/service";
+import { getOrganizationsByUserId } from "@formbricks/lib/organization/service";
 import { getUser } from "@formbricks/lib/user/service";
 
 const Page = async (props) => {
   const params = await props.params;
   const t = await getTranslate();
-  const session = await getServerSession(authOptions);
-  if (!session || !session.user) {
+
+  const { session, organization } = await getOrganizationAuth(params.organizationId);
+
+  if (!session?.user) {
     return redirect(`/auth/login`);
   }
 
   const user = await getUser(session.user.id);
   if (!user) return notFound();
 
-  const organization = await getOrganization(params.organizationId);
-  if (!organization) return notFound();
-
   const organizations = await getOrganizationsByUserId(session.user.id);
 
   const { features } = await getEnterpriseLicense();

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

@@ -0,0 +1,156 @@
+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 { 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", () => ({
+  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,
+}));
+
+vi.mock("next-auth", () => ({
+  getServerSession: vi.fn(),
+}));
+vi.mock("next/navigation", () => ({
+  redirect: vi.fn(),
+}));
+vi.mock("@formbricks/lib/organization/auth", () => ({
+  canUserAccessOrganization: vi.fn(),
+}));
+vi.mock("@formbricks/lib/organization/service", () => ({
+  getOrganization: vi.fn(),
+}));
+vi.mock("@formbricks/lib/user/service", () => ({
+  getUser: vi.fn(),
+}));
+vi.mock("@/tolgee/server", () => ({
+  getTranslate: vi.fn(() => {
+    // Return a mock translator that just returns the key
+    return (key: string) => key;
+  }),
+}));
+
+// mock the child components
+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="toaster-client" />,
+}));
+
+describe("ProjectOnboardingLayout", () => {
+  beforeEach(() => {
+    cleanup();
+  });
+
+  it("redirects to /auth/login if there is no session", async () => {
+    // Mock no session
+    vi.mocked(getServerSession).mockResolvedValueOnce(null);
+
+    const layoutElement = await ProjectOnboardingLayout({
+      params: { organizationId: "org-123" },
+      children: <div data-testid="child-content">Hello!</div>,
+    });
+
+    expect(redirect).toHaveBeenCalledWith("/auth/login");
+    // Layout returns nothing after redirect
+    expect(layoutElement).toBeUndefined();
+  });
+
+  it("throws an error if user does not exist", async () => {
+    vi.mocked(getServerSession).mockResolvedValueOnce({
+      user: { id: "user-123" },
+    });
+    vi.mocked(getUser).mockResolvedValueOnce(null); // no user in DB
+
+    await expect(
+      ProjectOnboardingLayout({
+        params: { organizationId: "org-123" },
+        children: <div data-testid="child-content">Hello!</div>,
+      })
+    ).rejects.toThrow("common.user_not_found");
+  });
+
+  it("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);
+
+    await expect(
+      ProjectOnboardingLayout({
+        params: { organizationId: "org-123" },
+        children: <div data-testid="child-content">Child</div>,
+      })
+    ).rejects.toThrow("common.not_authorized");
+  });
+
+  it("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);
+    vi.mocked(getOrganization).mockResolvedValueOnce(null);
+
+    await expect(
+      ProjectOnboardingLayout({
+        params: { organizationId: "org-123" },
+        children: <div data-testid="child-content">Hello!</div>,
+      })
+    ).rejects.toThrow("common.organization_not_found");
+  });
+
+  it("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);
+    vi.mocked(canUserAccessOrganization).mockResolvedValueOnce(true);
+    vi.mocked(getOrganization).mockResolvedValueOnce({
+      id: "org-123",
+      name: "Test Org",
+      billing: {
+        plan: "enterprise",
+      },
+    } as TOrganization);
+
+    let layoutElement: React.ReactNode;
+    // Because it's an async server component, do it in an act
+    await act(async () => {
+      layoutElement = await ProjectOnboardingLayout({
+        params: { organizationId: "org-123" },
+        children: <div data-testid="child-content">Hello!</div>,
+      });
+      render(layoutElement);
+    });
+
+    expect(screen.getByTestId("child-content")).toHaveTextContent("Hello!");
+    expect(screen.getByTestId("posthog-identify")).toBeInTheDocument();
+    expect(screen.getByTestId("toaster-client")).toBeInTheDocument();
+  });
+});

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

@@ -4,6 +4,7 @@ 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";
@@ -16,7 +17,8 @@ const ProjectOnboardingLayout = async (props) => {
 
   const t = await getTranslate();
   const session = await getServerSession(authOptions);
-  if (!session || !session.user) {
+
+  if (!session?.user) {
     return redirect(`/auth/login`);
   }
 
@@ -26,8 +28,9 @@ const ProjectOnboardingLayout = async (props) => {
   }
 
   const isAuthorized = await canUserAccessOrganization(session.user.id, params.organizationId);
+
   if (!isAuthorized) {
-    throw AuthorizationError;
+    throw new AuthorizationError(t("common.not_authorized"));
   }
 
   const organization = await getOrganization(params.organizationId);
@@ -43,6 +46,7 @@ const ProjectOnboardingLayout = async (props) => {
         organizationId={organization.id}
         organizationName={organization.name}
         organizationBilling={organization.billing}
+        isPosthogEnabled={IS_POSTHOG_CONFIGURED}
       />
       <ToasterClient />
       {children}

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

@@ -1,10 +1,9 @@
 import { OnboardingOptionsContainer } from "@/app/(app)/(onboarding)/organizations/components/OnboardingOptionsContainer";
-import { authOptions } from "@/modules/auth/lib/authOptions";
+import { getOrganizationAuth } from "@/modules/organization/lib/utils";
 import { Button } from "@/modules/ui/components/button";
 import { Header } from "@/modules/ui/components/header";
 import { getTranslate } from "@/tolgee/server";
 import { PictureInPicture2Icon, SendIcon, XIcon } from "lucide-react";
-import { getServerSession } from "next-auth";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { getUserProjects } from "@formbricks/lib/project/service";
@@ -17,8 +16,10 @@ interface ChannelPageProps {
 
 const Page = async (props: ChannelPageProps) => {
   const params = await props.params;
-  const session = await getServerSession(authOptions);
-  if (!session || !session.user) {
+
+  const { session } = await getOrganizationAuth(params.organizationId);
+
+  if (!session?.user) {
     return redirect(`/auth/login`);
   }
 
@@ -49,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/mode/page.tsx

@@ -1,10 +1,9 @@
 import { OnboardingOptionsContainer } from "@/app/(app)/(onboarding)/organizations/components/OnboardingOptionsContainer";
-import { authOptions } from "@/modules/auth/lib/authOptions";
+import { getOrganizationAuth } from "@/modules/organization/lib/utils";
 import { Button } from "@/modules/ui/components/button";
 import { Header } from "@/modules/ui/components/header";
 import { getTranslate } from "@/tolgee/server";
 import { HeartIcon, ListTodoIcon, XIcon } from "lucide-react";
-import { getServerSession } from "next-auth";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { getUserProjects } from "@formbricks/lib/project/service";
@@ -17,8 +16,10 @@ interface ModePageProps {
 
 const Page = async (props: ModePageProps) => {
   const params = await props.params;
-  const session = await getServerSession(authOptions);
-  if (!session || !session.user) {
+
+  const { session } = await getOrganizationAuth(params.organizationId);
+
+  if (!session?.user) {
     return redirect(`/auth/login`);
   }
 
@@ -46,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

@@ -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,16 +1,14 @@
 import { getTeamsByOrganizationId } from "@/app/(app)/(onboarding)/lib/onboarding";
 import { ProjectSettings } from "@/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/settings/components/ProjectSettings";
-import { authOptions } from "@/modules/auth/lib/authOptions";
 import { getRoleManagementPermission } from "@/modules/ee/license-check/lib/utils";
+import { getOrganizationAuth } from "@/modules/organization/lib/utils";
 import { Button } from "@/modules/ui/components/button";
 import { Header } from "@/modules/ui/components/header";
 import { getTranslate } from "@/tolgee/server";
 import { XIcon } from "lucide-react";
-import { getServerSession } from "next-auth";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { DEFAULT_BRAND_COLOR } from "@formbricks/lib/constants";
-import { getOrganization } from "@formbricks/lib/organization/service";
 import { getUserProjects } from "@formbricks/lib/project/service";
 import { TProjectConfigChannel, TProjectConfigIndustry, TProjectMode } from "@formbricks/types/project";
 
@@ -29,25 +27,20 @@ const Page = async (props: ProjectSettingsPageProps) => {
   const searchParams = await props.searchParams;
   const params = await props.params;
   const t = await getTranslate();
-  const session = await getServerSession(authOptions);
 
-  if (!session || !session.user) {
+  const { session, organization } = await getOrganizationAuth(params.organizationId);
+
+  if (!session?.user) {
     return redirect(`/auth/login`);
   }
 
-  const channel = searchParams.channel || null;
-  const industry = searchParams.industry || null;
-  const mode = searchParams.mode || "surveys";
+  const channel = searchParams.channel ?? null;
+  const industry = searchParams.industry ?? null;
+  const mode = searchParams.mode ?? "surveys";
   const projects = await getUserProjects(session.user.id, params.organizationId);
 
   const organizationTeams = await getTeamsByOrganizationId(params.organizationId);
 
-  const organization = await getOrganization(params.organizationId);
-
-  if (!organization) {
-    throw new Error(t("common.organization_not_found"));
-  }
-
   const canDoRoleManagement = await getRoleManagementPermission(organization.billing.plan);
 
   if (!organizationTeams) {
@@ -72,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

@@ -0,0 +1,120 @@
+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, it, vi } from "vitest";
+import { getEnvironment } from "@formbricks/lib/environment/service";
+import { TEnvironment } from "@formbricks/types/environment";
+import { TOrganization } from "@formbricks/types/organizations";
+import { TUser } from "@formbricks/types/user";
+import SurveyEditorEnvironmentLayout from "./layout";
+
+// 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>
+  ),
+}));
+
+// Mocks for dependencies
+vi.mock("@/modules/environments/lib/utils", () => ({
+  environmentIdLayoutChecks: vi.fn(),
+}));
+vi.mock("@formbricks/lib/environment/service", () => ({
+  getEnvironment: vi.fn(),
+}));
+vi.mock("next/navigation", () => ({
+  redirect: vi.fn(),
+}));
+
+describe("SurveyEditorEnvironmentLayout", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  it("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 result = await SurveyEditorEnvironmentLayout({
+      params: Promise.resolve({ environmentId: "env1" }),
+      children: <div data-testid="child">Survey Editor Content</div>,
+    });
+
+    render(result);
+
+    expect(screen.getByTestId("EnvironmentIdBaseLayout")).toHaveTextContent("env1");
+    expect(screen.getByTestId("DevEnvironmentBanner")).toHaveTextContent("env1");
+    expect(screen.getByTestId("child")).toHaveTextContent("Survey Editor Content");
+  });
+
+  it("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: Promise.resolve({ environmentId: "env1" }),
+        children: <div>Content</div>,
+      })
+    ).rejects.toThrow("common.environment_not_found");
+  });
+
+  it("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");
+    });
+
+    await expect(
+      SurveyEditorEnvironmentLayout({
+        params: Promise.resolve({ environmentId: "env1" }),
+        children: <div>Content</div>,
+      })
+    ).rejects.toThrow("Redirect called");
+  });
+
+  it("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,44 +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 { 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 { 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);
-  if (!session || !session.user) {
+  const { t, session, user, organization } = await environmentIdLayoutChecks(params.environmentId);
+
+  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) {
@@ -46,24 +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}
-        />
-        <FormbricksClient userId={user.id} email={user.email} />
-        <ToasterClient />
-        <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
+      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>
+    </EnvironmentIdBaseLayout>
   );
 };
 

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

@@ -0,0 +1,81 @@
+import { render } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+import formbricks from "@formbricks/js";
+import { FormbricksClient } from "./FormbricksClient";
+
+// Mock next/navigation hooks.
+vi.mock("next/navigation", () => ({
+  usePathname: () => "/test-path",
+  useSearchParams: () => new URLSearchParams("foo=bar"),
+}));
+
+// Mock the flag that enables Formbricks.
+vi.mock("@/app/lib/formbricks", () => ({
+  formbricksEnabled: true,
+}));
+
+// Mock the Formbricks SDK module.
+vi.mock("@formbricks/js", () => ({
+  __esModule: true,
+  default: {
+    setup: vi.fn(),
+    setUserId: vi.fn(),
+    setEmail: vi.fn(),
+    registerRouteChange: vi.fn(),
+  },
+}));
+
+describe("FormbricksClient", () => {
+  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"
+        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({
+      environmentId: "env-test",
+      appUrl: "https://api.test.com",
+    });
+    expect(mockSetUserId).toHaveBeenCalledWith("user-123");
+    expect(mockSetEmail).toHaveBeenCalledWith("test@example.com");
+
+    // And the second effect should always register the route change when Formbricks is enabled.
+    expect(mockRegisterRouteChange).toHaveBeenCalled();
+  });
+
+  test("does not call setup, setUserId, or setEmail if userId is not provided yet still calls registerRouteChange", () => {
+    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=""
+        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();
+    expect(mockSetUserId).not.toHaveBeenCalled();
+    expect(mockSetEmail).not.toHaveBeenCalled();
+
+    // The second effect only checks formbricksEnabled, so registerRouteChange should be called.
+    expect(mockRegisterRouteChange).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)/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

@@ -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]/components/EnvironmentLayout.tsx

@@ -7,7 +7,7 @@ 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 { IS_DEVELOPMENT, 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";
@@ -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/MainNavigation.tsx

@@ -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/PosthogIdentify.test.tsx

@@ -0,0 +1,151 @@
+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 { beforeEach, describe, expect, it, vi } from "vitest";
+import { TOrganizationBilling } from "@formbricks/types/organizations";
+import { TUser } from "@formbricks/types/user";
+import { PosthogIdentify } from "./PosthogIdentify";
+
+type PartialPostHog = Partial<ReturnType<typeof usePostHog>>;
+
+vi.mock("posthog-js/react", () => ({
+  usePostHog: vi.fn(),
+}));
+
+describe("PosthogIdentify", () => {
+  beforeEach(() => {
+    cleanup();
+  });
+
+  it("identifies the user and sets groups when isPosthogEnabled is true", () => {
+    const mockIdentify = vi.fn();
+    const mockGroup = vi.fn();
+
+    const mockPostHog: PartialPostHog = {
+      identify: mockIdentify,
+      group: mockGroup,
+    };
+
+    vi.mocked(usePostHog).mockReturnValue(mockPostHog as ReturnType<typeof usePostHog>);
+
+    render(
+      <PosthogIdentify
+        session={{ user: { id: "user-123" } } as Session}
+        user={
+          {
+            name: "Test User",
+            email: "test@example.com",
+            role: "engineer",
+            objective: "increase_conversion",
+          } as TUser
+        }
+        environmentId="env-456"
+        organizationId="org-789"
+        organizationName="Test Org"
+        organizationBilling={
+          {
+            plan: "enterprise",
+            limits: { monthly: { responses: 1000, miu: 5000 }, projects: 10 },
+          } as TOrganizationBilling
+        }
+        isPosthogEnabled
+      />
+    );
+
+    // verify that identify is called with the session user id + extra info
+    expect(mockIdentify).toHaveBeenCalledWith("user-123", {
+      name: "Test User",
+      email: "test@example.com",
+      role: "engineer",
+      objective: "increase_conversion",
+    });
+
+    // environment + organization groups
+    expect(mockGroup).toHaveBeenCalledTimes(2);
+    expect(mockGroup).toHaveBeenCalledWith("environment", "env-456", { name: "env-456" });
+    expect(mockGroup).toHaveBeenCalledWith("organization", "org-789", {
+      name: "Test Org",
+      plan: "enterprise",
+      responseLimit: 1000,
+      miuLimit: 5000,
+    });
+  });
+
+  it("does nothing if isPosthogEnabled is false", () => {
+    const mockIdentify = vi.fn();
+    const mockGroup = vi.fn();
+
+    const mockPostHog: PartialPostHog = {
+      identify: mockIdentify,
+      group: mockGroup,
+    };
+
+    vi.mocked(usePostHog).mockReturnValue(mockPostHog as ReturnType<typeof usePostHog>);
+
+    render(
+      <PosthogIdentify
+        session={{ user: { id: "user-123" } } as Session}
+        user={{ name: "Test User", email: "test@example.com" } as TUser}
+        isPosthogEnabled={false}
+      />
+    );
+
+    expect(mockIdentify).not.toHaveBeenCalled();
+    expect(mockGroup).not.toHaveBeenCalled();
+  });
+
+  it("does nothing if session user is missing", () => {
+    const mockIdentify = vi.fn();
+    const mockGroup = vi.fn();
+
+    const mockPostHog: PartialPostHog = {
+      identify: mockIdentify,
+      group: mockGroup,
+    };
+
+    vi.mocked(usePostHog).mockReturnValue(mockPostHog as ReturnType<typeof usePostHog>);
+
+    render(
+      <PosthogIdentify
+        // no user in session
+        session={{} as any}
+        user={{ name: "Test User", email: "test@example.com" } as TUser}
+        isPosthogEnabled
+      />
+    );
+
+    // Because there's no session.user, we skip identify
+    expect(mockIdentify).not.toHaveBeenCalled();
+    expect(mockGroup).not.toHaveBeenCalled();
+  });
+
+  it("identifies user but does not group if environmentId/organizationId not provided", () => {
+    const mockIdentify = vi.fn();
+    const mockGroup = vi.fn();
+
+    const mockPostHog: PartialPostHog = {
+      identify: mockIdentify,
+      group: mockGroup,
+    };
+
+    vi.mocked(usePostHog).mockReturnValue(mockPostHog as ReturnType<typeof usePostHog>);
+
+    render(
+      <PosthogIdentify
+        session={{ user: { id: "user-123" } } as Session}
+        user={{ name: "Test User", email: "test@example.com" } as TUser}
+        isPosthogEnabled
+      />
+    );
+
+    expect(mockIdentify).toHaveBeenCalledWith("user-123", {
+      name: "Test User",
+      email: "test@example.com",
+      role: undefined,
+      objective: undefined,
+    });
+    // No environmentId or organizationId => no group calls
+    expect(mockGroup).not.toHaveBeenCalled();
+  });
+});

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

@@ -3,12 +3,9 @@
 import type { Session } from "next-auth";
 import { usePostHog } from "posthog-js/react";
 import { useEffect } from "react";
-import { env } from "@formbricks/lib/env";
 import { TOrganizationBilling } from "@formbricks/types/organizations";
 import { TUser } from "@formbricks/types/user";
 
-const posthogEnabled = env.NEXT_PUBLIC_POSTHOG_API_KEY && env.NEXT_PUBLIC_POSTHOG_API_HOST;
-
 interface PosthogIdentifyProps {
   session: Session;
   user: TUser;
@@ -16,6 +13,7 @@ interface PosthogIdentifyProps {
   organizationId?: string;
   organizationName?: string;
   organizationBilling?: TOrganizationBilling;
+  isPosthogEnabled: boolean;
 }
 
 export const PosthogIdentify = ({
@@ -25,11 +23,12 @@ export const PosthogIdentify = ({
   organizationId,
   organizationName,
   organizationBilling,
+  isPosthogEnabled,
 }: PosthogIdentifyProps) => {
   const posthog = usePostHog();
 
   useEffect(() => {
-    if (posthogEnabled && session.user && posthog) {
+    if (isPosthogEnabled && session.user && posthog) {
       posthog.identify(session.user.id, {
         name: user.name,
         email: user.email,
@@ -59,6 +58,7 @@ export const PosthogIdentify = ({
     user.email,
     user.role,
     user.objective,
+    isPosthogEnabled,
   ]);
 
   return null;

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

@@ -6,7 +6,7 @@ import {
 } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionsComboBox";
 import { QuestionFilterOptions } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ResponseFilter";
 import { getTodayDate } from "@/app/lib/surveys/surveys";
-import { createContext, useCallback, useContext, useState } from "react";
+import React, { createContext, useCallback, useContext, useState } from "react";
 
 export interface FilterValue {
   questionType: Partial<QuestionOption>;

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

@@ -1,6 +1,5 @@
 import { TopControlButtons } from "@/app/(app)/environments/[environmentId]/components/TopControlButtons";
 import { TTeamPermission } from "@/modules/ee/teams/project-teams/types/team";
-import { IS_FORMBRICKS_CLOUD } from "@formbricks/lib/constants";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TOrganizationRole } from "@formbricks/types/memberships";
 
@@ -19,12 +18,11 @@ 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}
             environments={environments}
-            isFormbricksCloud={IS_FORMBRICKS_CLOUD}
             membershipRole={membershipRole}
             projectPermission={projectPermission}
           />

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

@@ -6,9 +6,9 @@ import { getTeamPermissionFlags } from "@/modules/ee/teams/utils/teams";
 import { Button } from "@/modules/ui/components/button";
 import { TooltipRenderer } from "@/modules/ui/components/tooltip";
 import { useTranslate } from "@tolgee/react";
-import { CircleUserIcon, MessageCircleQuestionIcon, PlusIcon } from "lucide-react";
+import { BugIcon, CircleUserIcon, PlusIcon } from "lucide-react";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
-import formbricks from "@formbricks/js";
 import { getAccessFlags } from "@formbricks/lib/membership/utils";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TOrganizationRole } from "@formbricks/types/memberships";
@@ -16,7 +16,6 @@ import { TOrganizationRole } from "@formbricks/types/memberships";
 interface TopControlButtonsProps {
   environment: TEnvironment;
   environments: TEnvironment[];
-  isFormbricksCloud: boolean;
   membershipRole?: TOrganizationRole;
   projectPermission: TTeamPermission | null;
 }
@@ -24,7 +23,6 @@ interface TopControlButtonsProps {
 export const TopControlButtons = ({
   environment,
   environments,
-  isFormbricksCloud,
   membershipRole,
   projectPermission,
 }: TopControlButtonsProps) => {
@@ -38,19 +36,15 @@ export const TopControlButtons = ({
   return (
     <div className="z-50 flex items-center space-x-2">
       {!isBilling && <EnvironmentSwitch environment={environment} environments={environments} />}
-      {isFormbricksCloud && (
-        <TooltipRenderer tooltipContent={t("common.share_feedback")}>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-fit w-fit bg-slate-50 p-1"
-            onClick={() => {
-              formbricks.track("Top Menu: Product Feedback");
-            }}>
-            <MessageCircleQuestionIcon />
-          </Button>
-        </TooltipRenderer>
-      )}
+
+      <TooltipRenderer tooltipContent={t("common.share_feedback")}>
+        <Button variant="ghost" size="icon" className="h-fit w-fit bg-slate-50 p-1" asChild>
+          <Link href="https://github.com/formbricks/formbricks/issues" target="_blank">
+            <BugIcon />
+          </Link>
+        </Button>
+      </TooltipRenderer>
+
       <TooltipRenderer tooltipContent={t("common.account")}>
         <Button
           variant="ghost"

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

@@ -0,0 +1,156 @@
+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, it, vi } from "vitest";
+import { getMembershipByUserIdOrganizationId } from "@formbricks/lib/membership/service";
+import { getProjectByEnvironmentId } from "@formbricks/lib/project/service";
+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 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("@/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="ToasterClient" />,
+}));
+vi.mock("../../components/FormbricksClient", () => ({
+  FormbricksClient: ({ userId, email }: any) => (
+    <div data-testid="FormbricksClient">
+      {userId}-{email}
+    </div>
+  ),
+}));
+vi.mock("./components/EnvironmentStorageHandler", () => ({
+  default: ({ environmentId }: any) => <div data-testid="EnvironmentStorageHandler">{environmentId}</div>,
+}));
+
+// Mocks for dependencies
+vi.mock("@/modules/environments/lib/utils", () => ({
+  environmentIdLayoutChecks: vi.fn(),
+}));
+vi.mock("@formbricks/lib/project/service", () => ({
+  getProjectByEnvironmentId: vi.fn(),
+}));
+vi.mock("@formbricks/lib/membership/service", () => ({
+  getMembershipByUserIdOrganizationId: vi.fn(),
+}));
+
+describe("EnvLayout", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("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);
+
+    const result = await EnvLayout({
+      params: Promise.resolve({ environmentId: "env1" }),
+      children: <div data-testid="child">Content</div>,
+    });
+    render(result);
+
+    expect(screen.getByTestId("EnvironmentIdBaseLayout")).toHaveTextContent("env1");
+    expect(screen.getByTestId("EnvironmentStorageHandler")).toHaveTextContent("env1");
+    expect(screen.getByTestId("EnvironmentLayout")).toBeDefined();
+    expect(screen.getByTestId("child")).toHaveTextContent("Content");
+  });
+
+  it("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(getProjectByEnvironmentId).mockResolvedValueOnce(null);
+    vi.mocked(getMembershipByUserIdOrganizationId).mockResolvedValueOnce({
+      id: "member1",
+    } as unknown as TMembership);
+
+    await expect(
+      EnvLayout({
+        params: Promise.resolve({ environmentId: "env1" }),
+        children: <div>Content</div>,
+      })
+    ).rejects.toThrow("common.project_not_found");
+  });
+
+  it("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(getProjectByEnvironmentId).mockResolvedValueOnce({ id: "proj1" } as TProject);
+    vi.mocked(getMembershipByUserIdOrganizationId).mockResolvedValueOnce(null);
+
+    await expect(
+      EnvLayout({
+        params: Promise.resolve({ environmentId: "env1" }),
+        children: <div>Content</div>,
+      })
+    ).rejects.toThrow("common.membership_not_found");
+  });
+
+  it("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");
+    });
+
+    await expect(
+      EnvLayout({
+        params: Promise.resolve({ environmentId: "env1" }),
+        children: <div>Content</div>,
+      })
+    ).rejects.toThrow("Redirect called");
+  });
+
+  it("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,19 +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 { environmentIdLayoutChecks } from "@/modules/environments/lib/utils";
+import { EnvironmentIdBaseLayout } from "@/modules/ui/components/environmentId-base-layout";
 import { redirect } from "next/navigation";
-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 }>;
@@ -23,26 +14,16 @@ const EnvLayout = async (props: {
 
   const { children } = props;
 
-  const t = await getTranslate();
-  const session = await getServerSession(authOptions);
-  if (!session || !session.user) {
+  const { t, session, user, organization } = await environmentIdLayoutChecks(params.environmentId);
+
+  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"));
@@ -55,24 +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}
-        />
-        <FormbricksClient userId={user.id} email={user.email} />
-        <ToasterClient />
-        <EnvironmentStorageHandler environmentId={params.environmentId} />
-        <EnvironmentLayout environmentId={params.environmentId} session={session}>
-          {children}
-        </EnvironmentLayout>
-      </ResponseFilterProvider>
-    </>
+    <EnvironmentIdBaseLayout
+      environmentId={params.environmentId}
+      session={session}
+      user={user}
+      organization={organization}>
+      <EnvironmentStorageHandler environmentId={params.environmentId} />
+      <EnvironmentLayout environmentId={params.environmentId} session={session}>
+        {children}
+      </EnvironmentLayout>
+    </EnvironmentIdBaseLayout>
   );
 };
 

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

@@ -1,24 +1,11 @@
-import { authOptions } from "@/modules/auth/lib/authOptions";
-import { getTranslate } from "@/tolgee/server";
-import { getServerSession } from "next-auth";
+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";
-import { getOrganizationByEnvironmentId } from "@formbricks/lib/organization/service";
 
 const EnvironmentPage = async (props) => {
   const params = await props.params;
-  const session = await getServerSession(authOptions);
-  const t = await getTranslate();
-  const organization = await getOrganizationByEnvironmentId(params.environmentId);
-
-  if (!session) {
-    return redirect(`/auth/login`);
-  }
-
-  if (!organization) {
-    throw new Error(t("common.organization_not_found"));
-  }
+  const { session, organization } = await getEnvironmentAuth(params.environmentId);
 
   const currentUserMembership = await getMembershipByUserIdOrganizationId(session?.user.id, organization.id);
   const { isBilling } = getAccessFlags(currentUserMembership?.role);

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)/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)/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/(organization)/api-keys/loading.tsx

@@ -0,0 +1,6 @@
+import Loading from "@/modules/organization/settings/api-keys/loading";
+import { IS_FORMBRICKS_CLOUD } from "@formbricks/lib/constants";
+
+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)/components/OrganizationSettingsNavbar.tsx

@@ -54,6 +54,12 @@ 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"),
+    },
   ];
 
   return <SecondaryNavigation navigation={navigation} activeId={activeId} loading={loading} />;

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

@@ -97,7 +97,7 @@ const Page = async (props) => {
       </PageHeader>
       {isEnterpriseEdition ? (
         <div>
-          <div className="mt-8 max-w-4xl rounded-lg border border-slate-300 bg-slate-100 shadow-sm">
+          <div className="mt-8 max-w-4xl rounded-lg border border-slate-300 bg-slate-100 shadow-xs">
             <div className="space-y-4 p-8">
               <div className="flex items-center gap-x-2">
                 <div className="rounded-full border border-green-300 bg-green-100 p-0.5 dark:bg-green-800">
@@ -123,7 +123,7 @@ const Page = async (props) => {
           <div className="relative isolate mt-8 overflow-hidden rounded-lg bg-slate-900 px-3 pt-8 shadow-2xl sm:px-8 md:pt-12 lg:flex lg:gap-x-10 lg:px-12 lg:pt-0">
             <svg
               viewBox="0 0 1024 1024"
-              className="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
+              className="absolute top-1/2 left-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
               aria-hidden="true">
               <circle
                 cx={512}
@@ -152,7 +152,7 @@ const Page = async (props) => {
               </p>
             </div>
           </div>
-          <div className="mt-8 rounded-lg border border-slate-300 bg-slate-100 shadow-sm">
+          <div className="mt-8 rounded-lg border border-slate-300 bg-slate-100 shadow-xs">
             <div className="p-8">
               <h2 className="mr-2 inline-flex text-2xl font-bold text-slate-700">
                 {t("environments.settings.enterprise.enterprise_features")}

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

@@ -3,15 +3,11 @@ import {
   getIsOrganizationAIReady,
   getWhiteLabelPermission,
 } from "@/modules/ee/license-check/lib/utils";
+import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
+import { TEnvironmentAuth } from "@/modules/environments/types/environment-auth";
 import { getTranslate } from "@/tolgee/server";
-import { getServerSession } from "next-auth";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { getMembershipByUserIdOrganizationId } from "@formbricks/lib/membership/service";
-import { getAccessFlags } from "@formbricks/lib/membership/utils";
-import { getOrganizationByEnvironmentId } from "@formbricks/lib/organization/service";
 import { getUser } from "@formbricks/lib/user/service";
-import { TMembership } from "@formbricks/types/memberships";
-import { TOrganization } from "@formbricks/types/organizations";
 import { TUser } from "@formbricks/types/user";
 import Page from "./page";
 
@@ -37,6 +33,12 @@ vi.mock("@formbricks/lib/constants", () => ({
   WEBAPP_URL: "mock-webapp-url",
   SMTP_HOST: "mock-smtp-host",
   SMTP_PORT: "mock-smtp-port",
+  AI_AZURE_LLM_RESSOURCE_NAME: "mock-ai-azure-llm-ressource-name",
+  AI_AZURE_LLM_API_KEY: "mock-ai",
+  AI_AZURE_LLM_DEPLOYMENT_ID: "mock-ai-azure-llm-deployment-id",
+  AI_AZURE_EMBEDDINGS_RESSOURCE_NAME: "mock-ai-azure-embeddings-ressource-name",
+  AI_AZURE_EMBEDDINGS_API_KEY: "mock-ai-azure-embeddings-api-key",
+  AI_AZURE_EMBEDDINGS_DEPLOYMENT_ID: "mock-ai-azure-embeddings-deployment-id",
 }));
 
 vi.mock("next-auth", () => ({
@@ -51,16 +53,8 @@ vi.mock("@formbricks/lib/user/service", () => ({
   getUser: vi.fn(),
 }));
 
-vi.mock("@formbricks/lib/organization/service", () => ({
-  getOrganizationByEnvironmentId: vi.fn(),
-}));
-
-vi.mock("@formbricks/lib/membership/service", () => ({
-  getMembershipByUserIdOrganizationId: vi.fn(),
-}));
-
-vi.mock("@formbricks/lib/membership/utils", () => ({
-  getAccessFlags: vi.fn(),
+vi.mock("@/modules/environments/lib/utils", () => ({
+  getEnvironmentAuth: vi.fn(),
 }));
 
 vi.mock("@/modules/ee/license-check/lib/utils", () => ({
@@ -70,26 +64,21 @@ vi.mock("@/modules/ee/license-check/lib/utils", () => ({
 }));
 
 describe("Page", () => {
-  const mockParams = { environmentId: "test-environment-id" };
-  const mockSession = { user: { id: "test-user-id" } };
+  let mockEnvironmentAuth = {
+    session: { user: { id: "test-user-id" } },
+    currentUserMembership: { role: "owner" },
+    organization: { id: "test-organization-id", billing: { plan: "free" } },
+    isOwner: true,
+    isManager: false,
+  } as unknown as TEnvironmentAuth;
+
   const mockUser = { id: "test-user-id" } as TUser;
-  const mockOrganization = { id: "test-organization-id", billing: { plan: "free" } } as TOrganization;
-  const mockMembership = { role: "owner" } as TMembership;
   const mockTranslate = vi.fn((key) => key);
 
   beforeEach(() => {
-    vi.clearAllMocks();
-    vi.mocked(getServerSession).mockResolvedValue(mockSession);
     vi.mocked(getTranslate).mockResolvedValue(mockTranslate);
     vi.mocked(getUser).mockResolvedValue(mockUser);
-    vi.mocked(getOrganizationByEnvironmentId).mockResolvedValue(mockOrganization);
-    vi.mocked(getMembershipByUserIdOrganizationId).mockResolvedValue(mockMembership);
-    vi.mocked(getAccessFlags).mockReturnValue({
-      isOwner: true,
-      isManager: false,
-      isBilling: false,
-      isMember: false,
-    });
+    vi.mocked(getEnvironmentAuth).mockResolvedValue(mockEnvironmentAuth);
     vi.mocked(getIsMultiOrgEnabled).mockResolvedValue(true);
     vi.mocked(getIsOrganizationAIReady).mockResolvedValue(true);
     vi.mocked(getWhiteLabelPermission).mockResolvedValue(true);
@@ -105,8 +94,10 @@ describe("Page", () => {
     expect(result).toBeTruthy();
   });
 
-  it("renders if session user id is null", async () => {
-    vi.mocked(getServerSession).mockResolvedValue({ user: { id: null } });
+  it("renders if session user id empty", async () => {
+    mockEnvironmentAuth.session.user.id = "";
+
+    vi.mocked(getEnvironmentAuth).mockResolvedValue(mockEnvironmentAuth);
 
     const props = {
       params: Promise.resolve({ environmentId: "env-123" }),
@@ -117,17 +108,13 @@ describe("Page", () => {
     expect(result).toBeTruthy();
   });
 
-  it("throws an error if the session is not found", async () => {
-    vi.mocked(getServerSession).mockResolvedValue(null);
+  it("handles getEnvironmentAuth error", async () => {
+    vi.mocked(getEnvironmentAuth).mockRejectedValue(new Error("Authentication error"));
 
-    await expect(Page({ params: Promise.resolve(mockParams) })).rejects.toThrow("common.session_not_found");
-  });
+    const props = {
+      params: Promise.resolve({ environmentId: "env-123" }),
+    };
 
-  it("throws an error if the organization is not found", async () => {
-    vi.mocked(getOrganizationByEnvironmentId).mockResolvedValue(null);
-
-    await expect(Page({ params: Promise.resolve(mockParams) })).rejects.toThrow(
-      "common.organization_not_found"
-    );
+    await expect(Page(props)).rejects.toThrow("Authentication error");
   });
 });

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

@@ -1,21 +1,17 @@
 import { OrganizationSettingsNavbar } from "@/app/(app)/environments/[environmentId]/settings/(organization)/components/OrganizationSettingsNavbar";
 import { AIToggle } from "@/app/(app)/environments/[environmentId]/settings/(organization)/general/components/AIToggle";
-import { authOptions } from "@/modules/auth/lib/authOptions";
 import {
   getIsMultiOrgEnabled,
   getIsOrganizationAIReady,
   getWhiteLabelPermission,
 } from "@/modules/ee/license-check/lib/utils";
 import { EmailCustomizationSettings } from "@/modules/ee/whitelabel/email-customization/components/email-customization-settings";
+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 { SettingsId } from "@/modules/ui/components/settings-id";
 import { getTranslate } from "@/tolgee/server";
-import { getServerSession } from "next-auth";
 import { FB_LOGO_URL, IS_FORMBRICKS_CLOUD } from "@formbricks/lib/constants";
-import { getMembershipByUserIdOrganizationId } from "@formbricks/lib/membership/service";
-import { getAccessFlags } from "@formbricks/lib/membership/utils";
-import { getOrganizationByEnvironmentId } from "@formbricks/lib/organization/service";
 import { getUser } from "@formbricks/lib/user/service";
 import { SettingsCard } from "../../components/SettingsCard";
 import { DeleteOrganization } from "./components/DeleteOrganization";
@@ -24,20 +20,13 @@ import { EditOrganizationNameForm } from "./components/EditOrganizationNameForm"
 const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
   const params = await props.params;
   const t = await getTranslate();
-  const session = await getServerSession(authOptions);
-  if (!session) {
-    throw new Error(t("common.session_not_found"));
-  }
+
+  const { session, currentUserMembership, organization, isOwner, isManager } = await getEnvironmentAuth(
+    params.environmentId
+  );
+
   const user = session?.user?.id ? await getUser(session.user.id) : null;
 
-  const organization = await getOrganizationByEnvironmentId(params.environmentId);
-
-  if (!organization) {
-    throw new Error(t("common.organization_not_found"));
-  }
-
-  const currentUserMembership = await getMembershipByUserIdOrganizationId(session?.user.id, organization.id);
-  const { isOwner, isManager } = getAccessFlags(currentUserMembership?.role);
   const isMultiOrgEnabled = await getIsMultiOrgEnabled();
   const hasWhiteLabelPermission = await getWhiteLabelPermission(organization.billing.plan);
 
@@ -99,7 +88,7 @@ const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
         </SettingsCard>
       )}
 
-      <SettingsId title={t("common.organization")} id={organization.id}></SettingsId>
+      <SettingsId title={t("common.organization_id")} id={organization.id}></SettingsId>
     </PageContentWrapper>
   );
 };

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

@@ -25,13 +25,13 @@ export const SettingsCard = ({
   return (
     <div
       className={cn(
-        "relative my-4 w-full max-w-4xl rounded-xl border border-slate-200 bg-white py-4 text-left shadow-sm",
+        "relative my-4 w-full max-w-4xl rounded-xl border border-slate-200 bg-white py-4 text-left shadow-xs",
         className
       )}
       id={title}>
       <div className="border-b border-slate-200 px-4 pb-4">
         <div className="flex">
-          <h3 className="text-lg font-medium capitalize leading-6 text-slate-900">{title}</h3>
+          <h3 className="text-lg leading-6 font-medium text-slate-900 capitalize">{title}</h3>
           <div className="ml-2">
             {beta && <Badge size="normal" type="warning" text="Beta" />}
             {soon && (

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

@@ -36,7 +36,7 @@ export const ResponseTableCell = ({
   // Conditional rendering of maximize icon
   const renderMaximizeIcon = cell.column.id === "createdAt" && (
     <div
-      className="hidden flex-shrink-0 cursor-pointer items-center rounded-md border border-slate-200 bg-white p-2 hover:border-slate-300 group-hover:flex"
+      className="hidden shrink-0 cursor-pointer items-center rounded-md border border-slate-200 bg-white p-2 group-hover:flex hover:border-slate-300"
       onClick={handleCellClick}>
       <Maximize2Icon className="h-4 w-4" />
     </div>

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

@@ -71,7 +71,11 @@ const getQuestionColumnsData = (
               <div className="flex items-center justify-between">
                 <div className="flex items-center space-x-2 overflow-hidden">
                   <span className="h-4 w-4">{QUESTIONS_ICON_MAP["matrix"]}</span>
-                  <span className="truncate">{getLocalizedValue(matrixRow, "default")}</span>
+                  <span className="truncate">
+                    {getLocalizedValue(question.headline, "default") +
+                      " - " +
+                      getLocalizedValue(matrixRow, "default")}
+                  </span>
                 </div>
               </div>
             );

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

@@ -3,24 +3,17 @@ import { ResponsePage } from "@/app/(app)/environments/[environmentId]/surveys/[
 import { EnableInsightsBanner } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/EnableInsightsBanner";
 import { SurveyAnalysisCTA } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SurveyAnalysisCTA";
 import { needsInsightsGeneration } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/lib/utils";
-import { authOptions } from "@/modules/auth/lib/authOptions";
 import { getIsAIEnabled } from "@/modules/ee/license-check/lib/utils";
-import { getProjectPermissionByUserId } from "@/modules/ee/teams/lib/roles";
-import { getTeamPermissionFlags } from "@/modules/ee/teams/utils/teams";
+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 { getServerSession } from "next-auth";
 import {
   MAX_RESPONSES_FOR_INSIGHT_GENERATION,
   RESPONSES_PER_PAGE,
   WEBAPP_URL,
 } from "@formbricks/lib/constants";
-import { getEnvironment } from "@formbricks/lib/environment/service";
-import { getMembershipByUserIdOrganizationId } from "@formbricks/lib/membership/service";
-import { getAccessFlags } from "@formbricks/lib/membership/utils";
-import { getOrganizationByEnvironmentId } from "@formbricks/lib/organization/service";
-import { getProjectByEnvironmentId } from "@formbricks/lib/project/service";
+import { getSurveyDomain } from "@formbricks/lib/getSurveyUrl";
 import { getResponseCountBySurveyId } from "@formbricks/lib/response/service";
 import { getSurvey } from "@formbricks/lib/survey/service";
 import { getTagsByEnvironmentId } from "@formbricks/lib/tag/service";
@@ -30,53 +23,32 @@ import { findMatchingLocale } from "@formbricks/lib/utils/locale";
 const Page = async (props) => {
   const params = await props.params;
   const t = await getTranslate();
-  const session = await getServerSession(authOptions);
-  if (!session) {
-    throw new Error(t("common.session_not_found"));
-  }
-  const [survey, environment] = await Promise.all([
-    getSurvey(params.surveyId),
-    getEnvironment(params.environmentId),
-  ]);
 
-  if (!environment) {
-    throw new Error(t("common.environment_not_found"));
-  }
+  const { session, environment, organization, isReadOnly } = await getEnvironmentAuth(params.environmentId);
+
+  const survey = await getSurvey(params.surveyId);
+
   if (!survey) {
     throw new Error(t("common.survey_not_found"));
   }
-  const project = await getProjectByEnvironmentId(environment.id);
-  if (!project) {
-    throw new Error(t("common.project_not_found"));
-  }
 
   const user = await getUser(session.user.id);
+
   if (!user) {
     throw new Error(t("common.user_not_found"));
   }
+
   const tags = await getTagsByEnvironmentId(params.environmentId);
-  const organization = await getOrganizationByEnvironmentId(params.environmentId);
 
-  if (!organization) {
-    throw new Error(t("common.organization_not_found"));
-  }
-
-  const currentUserMembership = await getMembershipByUserIdOrganizationId(session?.user.id, organization.id);
   const totalResponseCount = await getResponseCountBySurveyId(params.surveyId);
 
-  const { isMember } = getAccessFlags(currentUserMembership?.role);
-
-  const permission = await getProjectPermissionByUserId(session.user.id, project.id);
-  const { hasReadAccess } = getTeamPermissionFlags(permission);
-
-  const isReadOnly = isMember && hasReadAccess;
-
   const isAIEnabled = await getIsAIEnabled({
     isAIEnabled: organization.isAIEnabled,
     billing: organization.billing,
   });
   const shouldGenerateInsights = needsInsightsGeneration(survey);
   const locale = await findMatchingLocale();
+  const surveyDomain = getSurveyDomain();
 
   return (
     <PageContentWrapper>
@@ -87,8 +59,8 @@ const Page = async (props) => {
             environment={environment}
             survey={survey}
             isReadOnly={isReadOnly}
-            webAppUrl={WEBAPP_URL}
             user={user}
+            surveyDomain={surveyDomain}
           />
         }>
         {isAIEnabled && shouldGenerateInsights && (

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

@@ -20,7 +20,7 @@ interface AddressSummaryProps {
 export const AddressSummary = ({ questionSummary, environmentId, survey, locale }: AddressSummaryProps) => {
   const { t } = useTranslate();
   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">
       <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
       <div>
         <div className="grid h-10 grid-cols-4 items-center border-y border-slate-200 bg-slate-100 text-sm font-bold text-slate-600">

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

@@ -16,7 +16,7 @@ export const CTASummary = ({ questionSummary, survey }: CTASummaryProps) => {
   const { t } = useTranslate();
 
   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">
       <QuestionSummaryHeader
         survey={survey}
         questionSummary={questionSummary}
@@ -40,7 +40,7 @@ export const CTASummary = ({ questionSummary, survey }: CTASummaryProps) => {
           </>
         }
       />
-      <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
+      <div className="space-y-5 px-4 pt-4 pb-6 text-sm md:px-6 md:text-base">
         <div className="text flex justify-between px-2 pb-2">
           <div className="mr-8 flex space-x-1">
             <p className="font-semibold text-slate-700">CTR</p>

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

@@ -16,9 +16,9 @@ export const CalSummary = ({ questionSummary, survey }: CalSummaryProps) => {
   const { t } = useTranslate();
 
   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">
       <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
-      <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
+      <div className="space-y-5 px-4 pt-4 pb-6 text-sm md:px-6 md:text-base">
         <div>
           <div className="text flex justify-between px-2 pb-2">
             <div className="mr-8 flex space-x-1">

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

@@ -39,9 +39,9 @@ export const ConsentSummary = ({ questionSummary, survey, setFilter }: ConsentSu
     },
   ];
   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">
       <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
-      <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
+      <div className="space-y-5 px-4 pt-4 pb-6 text-sm md:px-6 md:text-base">
         {summaryItems.map((summaryItem) => {
           return (
             <div

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

@@ -25,7 +25,7 @@ export const ContactInfoSummary = ({
 }: ContactInfoSummaryProps) => {
   const { t } = useTranslate();
   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">
       <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
       <div>
         <div className="grid h-10 grid-cols-4 items-center border-y border-slate-200 bg-slate-100 text-sm font-bold text-slate-600">

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

@@ -35,8 +35,18 @@ export const DateQuestionSummary = ({
     );
   };
 
+  const renderResponseValue = (value: string) => {
+    const parsedDate = new Date(value);
+
+    const formattedDate = isNaN(parsedDate.getTime())
+      ? `${t("common.invalid_date")}(${value})`
+      : formatDateWithOrdinal(parsedDate);
+
+    return formattedDate;
+  };
+
   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">
       <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
       <div className="">
         <div className="grid h-10 grid-cols-4 items-center border-y border-slate-200 bg-slate-100 text-sm font-bold text-slate-600">
@@ -70,8 +80,8 @@ export const DateQuestionSummary = ({
                   </div>
                 )}
               </div>
-              <div className="ph-no-capture col-span-2 whitespace-pre-wrap pl-6 font-semibold">
-                {formatDateWithOrdinal(new Date(response.value as string))}
+              <div className="ph-no-capture col-span-2 pl-6 font-semibold whitespace-pre-wrap">
+                {renderResponseValue(response.value)}
               </div>
               <div className="px-4 text-slate-500 md:px-6">
                 {timeSince(new Date(response.updatedAt).toISOString(), locale)}

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

@@ -36,7 +36,7 @@ export const FileUploadSummary = ({
   };
 
   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">
       <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
       <div className="">
         <div className="grid h-10 grid-cols-4 items-center border-y border-slate-200 bg-slate-100 text-sm font-bold text-slate-600">
@@ -80,7 +80,7 @@ export const FileUploadSummary = ({
                       return (
                         <div className="relative m-2 rounded-lg bg-slate-200" key={fileUrl}>
                           <a href={fileUrl} key={index} target="_blank" rel="noopener noreferrer">
-                            <div className="absolute right-0 top-0 m-2">
+                            <div className="absolute top-0 right-0 m-2">
                               <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-50 hover:bg-white">
                                 <DownloadIcon className="h-6 text-slate-500" />
                               </div>

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

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

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

@@ -45,14 +45,14 @@ export const MatrixQuestionSummary = ({ questionSummary, survey, setFilter }: Ma
     : [];
 
   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">
       <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
       <div className="overflow-x-auto p-6">
         {/* Summary Table  */}
         <table className="mx-auto border-collapse cursor-default text-left">
           <thead>
             <tr>
-              <th className="p-4 pb-3 pt-0 font-medium text-slate-400 dark:border-slate-600 dark:text-slate-200"></th>
+              <th className="p-4 pt-0 pb-3 font-medium text-slate-400 dark:border-slate-600 dark:text-slate-200"></th>
               {columns.map((column) => (
                 <th key={column} className="text-center font-medium">
                   <TooltipRenderer tooltipContent={getTooltipContent(column)} shouldRender={true}>
@@ -65,7 +65,7 @@ export const MatrixQuestionSummary = ({ questionSummary, survey, setFilter }: Ma
           <tbody>
             {questionSummary.data.map(({ rowLabel, columnPercentages }, rowIndex) => (
               <tr key={rowLabel}>
-                <td className="max-w-60 overflow-hidden text-ellipsis whitespace-nowrap p-4">
+                <td className="max-w-60 overflow-hidden p-4 text-ellipsis whitespace-nowrap">
                   <TooltipRenderer tooltipContent={getTooltipContent(rowLabel)} shouldRender={true}>
                     <p className="max-w-40 overflow-hidden text-ellipsis whitespace-nowrap">{rowLabel}</p>
                   </TooltipRenderer>
@@ -83,7 +83,7 @@ export const MatrixQuestionSummary = ({ questionSummary, survey, setFilter }: Ma
                       )}>
                       <div
                         style={{ backgroundColor: `rgba(0,196,184,${getOpacityLevel(percentage)})` }}
-                        className="hover:outline-brand-dark m-1 flex h-full w-40 cursor-pointer items-center justify-center rounded p-4 text-sm text-slate-950 hover:outline"
+                        className="hover:outline-brand-dark m-1 flex h-full w-40 cursor-pointer items-center justify-center rounded-sm p-4 text-sm text-slate-950 hover:outline"
                         onClick={() =>
                           setFilter(
                             questionSummary.question.id,

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

@@ -65,7 +65,7 @@ export const MultipleChoiceSummary = ({
   };
 
   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">
       <QuestionSummaryHeader
         questionSummary={questionSummary}
         survey={survey}
@@ -78,7 +78,7 @@ export const MultipleChoiceSummary = ({
           ) : undefined
         }
       />
-      <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
+      <div className="space-y-5 px-4 pt-4 pb-6 text-sm md:px-6 md:text-base">
         {results.map((result, resultsIdx) => (
           <div
             key={result.value}

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

@@ -60,16 +60,16 @@ export const NPSSummary = ({ questionSummary, survey, setFilter }: NPSSummaryPro
   };
 
   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">
       <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
-      <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
+      <div className="space-y-5 px-4 pt-4 pb-6 text-sm md:px-6 md:text-base">
         {["promoters", "passives", "detractors", "dismissed"].map((group) => (
           <div className="cursor-pointer hover:opacity-80" key={group} onClick={() => applyFilter(group)}>
             <div
               className={`mb-2 flex justify-between ${group === "dismissed" ? "mb-2 border-t bg-white pt-4 text-sm md:text-base" : ""}`}>
               <div className="mr-8 flex space-x-1">
                 <p
-                  className={`font-semibold capitalize text-slate-700 ${group === "dismissed" ? "" : "text-slate-700"}`}>
+                  className={`font-semibold text-slate-700 capitalize ${group === "dismissed" ? "" : "text-slate-700"}`}>
                   {group}
                 </p>
                 <div>
@@ -91,7 +91,7 @@ export const NPSSummary = ({ questionSummary, survey, setFilter }: NPSSummaryPro
         ))}
       </div>
 
-      <div className="flex justify-center pb-4 pt-4">
+      <div className="flex justify-center pt-4 pb-4">
         <HalfCircle value={questionSummary.score} />
       </div>
     </div>

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

@@ -60,7 +60,7 @@ export const OpenTextSummary = ({
   ];
 
   return (
-    <div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
+    <div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-xs">
       <QuestionSummaryHeader
         questionSummary={questionSummary}
         survey={survey}

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

@@ -30,7 +30,7 @@ export const PictureChoiceSummary = ({ questionSummary, survey, setFilter }: Pic
   const results = questionSummary.choices;
   const { t } = useTranslate();
   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">
       <QuestionSummaryHeader
         questionSummary={questionSummary}
         survey={survey}
@@ -43,7 +43,7 @@ export const PictureChoiceSummary = ({ questionSummary, survey, setFilter }: Pic
           ) : undefined
         }
       />
-      <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
+      <div className="space-y-5 px-4 pt-4 pb-6 text-sm md:px-6 md:text-base">
         {results.map((result, index) => (
           <div
             className="cursor-pointer hover:opacity-80"

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

@@ -17,16 +17,16 @@ export const RankingSummary = ({ questionSummary, surveyType, survey }: RankingS
   });
 
   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">
       <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
-      <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
+      <div className="space-y-5 px-4 pt-4 pb-6 text-sm md:px-6 md:text-base">
         {results.map((result, resultsIdx) => (
           <div key={result.value} className="group cursor-pointer">
             <div className="text flex flex-col justify-between px-2 pb-2 sm:flex-row">
               <div className="mr-8 flex w-full justify-between space-x-1 sm:justify-normal">
                 <div className="flex w-full items-center">
                   <span className="mr-2 text-slate-400">#{resultsIdx + 1}</span>
-                  <div className="rounded bg-slate-100 px-2 py-1">{result.value}</div>
+                  <div className="rounded-sm bg-slate-100 px-2 py-1">{result.value}</div>
                   <span className="ml-auto flex items-center space-x-1">
                     <span className="font-bold text-slate-600">
                       #{convertFloatToNDecimal(result.avgRanking, 2)}

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

@@ -37,7 +37,7 @@ export const RatingSummary = ({ questionSummary, survey, setFilter }: RatingSumm
   }, [questionSummary]);
 
   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">
       <QuestionSummaryHeader
         questionSummary={questionSummary}
         survey={survey}
@@ -50,7 +50,7 @@ export const RatingSummary = ({ questionSummary, survey, setFilter }: RatingSumm
           </div>
         }
       />
-      <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
+      <div className="space-y-5 px-4 pt-4 pb-6 text-sm md:px-6 md:text-base">
         {questionSummary.choices.map((result) => (
           <div
             className="cursor-pointer hover:opacity-80"

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

@@ -43,7 +43,7 @@ const ScrollToTop: React.FC<ScrollToTopProps> = ({ containerId }) => {
   return (
     <button
       onClick={scrollToTop}
-      className={`fixed bottom-4 right-4 z-[1] flex h-10 w-10 justify-center rounded-md bg-slate-500 p-2 text-white transition-opacity ${
+      className={`fixed right-4 bottom-4 z-1 flex h-10 w-10 justify-center rounded-md bg-slate-500 p-2 text-white transition-opacity ${
         showButton ? "opacity-80" : "opacity-0"
       }`}>
       ↑

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

@@ -23,19 +23,19 @@ import { PanelInfoView } from "./shareEmbedModal/PanelInfoView";
 
 interface ShareEmbedSurveyProps {
   survey: TSurvey;
+  surveyDomain: string;
   open: boolean;
   modalView: "start" | "embed" | "panel";
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  webAppUrl: string;
   user: TUser;
 }
 
 export const ShareEmbedSurvey = ({
   survey,
+  surveyDomain,
   open,
   modalView,
   setOpen,
-  webAppUrl,
   user,
 }: ShareEmbedSurveyProps) => {
   const router = useRouter();
@@ -104,8 +104,8 @@ export const ShareEmbedSurvey = ({
               <DialogDescription className="hidden" />
               <ShareSurveyLink
                 survey={survey}
-                webAppUrl={webAppUrl}
                 surveyUrl={surveyUrl}
+                surveyDomain={surveyDomain}
                 setSurveyUrl={setSurveyUrl}
                 locale={user.locale}
               />
@@ -159,8 +159,8 @@ export const ShareEmbedSurvey = ({
             survey={survey}
             email={email}
             surveyUrl={surveyUrl}
+            surveyDomain={surveyDomain}
             setSurveyUrl={setSurveyUrl}
-            webAppUrl={webAppUrl}
             locale={user.locale}
           />
         ) : showView === "panel" ? (

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

@@ -39,7 +39,7 @@ export const SummaryDropOffs = ({ dropOff, survey }: SummaryDropOffsProps) => {
   };
 
   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">
       <div className="">
         <div className="grid h-10 grid-cols-6 items-center border-y border-slate-200 bg-slate-100 text-sm font-semibold text-slate-600">
           <div className="col-span-3 pl-4 md:pl-6">{t("common.questions")}</div>
@@ -77,10 +77,10 @@ export const SummaryDropOffs = ({ dropOff, survey }: SummaryDropOffsProps) => {
                 )}
               </p>
             </div>
-            <div className="whitespace-pre-wrap text-center font-semibold">
+            <div className="text-center font-semibold whitespace-pre-wrap">
               {quesDropOff.ttc > 0 ? (quesDropOff.ttc / 1000).toFixed(2) + "s" : "N/A"}
             </div>
-            <div className="whitespace-pre-wrap text-center font-semibold">{quesDropOff.impressions}</div>
+            <div className="text-center font-semibold whitespace-pre-wrap">{quesDropOff.impressions}</div>
             <div className="pl-6 text-center md:px-6">
               <span className="mr-1.5 font-semibold">{quesDropOff.dropOffCount}</span>
               <span>({Math.round(quesDropOff.dropOffPercentage)}%)</span>

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

@@ -17,7 +17,7 @@ const StatCard = ({ label, percentage, value, tooltipText, isLoading }) => {
     <TooltipProvider delayDuration={50}>
       <Tooltip>
         <TooltipTrigger>
-          <div className="flex h-full cursor-default flex-col justify-between space-y-2 rounded-xl border border-slate-200 bg-white p-4 text-left shadow-sm">
+          <div className="flex h-full cursor-default flex-col justify-between space-y-2 rounded-xl border border-slate-200 bg-white p-4 text-left shadow-xs">
             <p className="flex items-center gap-1 text-sm text-slate-600">
               {label}
               {typeof percentage === "number" && !isNaN(percentage) && !isLoading && (
@@ -101,7 +101,7 @@ export const SummaryMetadata = ({
             <TooltipTrigger>
               <div
                 onClick={() => setShowDropOffs(!showDropOffs)}
-                className="group flex h-full w-full cursor-pointer flex-col justify-between space-y-2 rounded-lg border border-slate-200 bg-white p-4 text-left shadow-sm">
+                className="group flex h-full w-full cursor-pointer flex-col justify-between space-y-2 rounded-lg border border-slate-200 bg-white p-4 text-left shadow-xs">
                 <span className="text-sm text-slate-600">
                   {t("environments.surveys.summary.drop_offs")}
                   {`${Math.round(dropOffPercentage)}%` !== "NaN%" && !isLoading && (

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

@@ -3,6 +3,8 @@
 import { ShareEmbedSurvey } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ShareEmbedSurvey";
 import { SuccessMessage } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SuccessMessage";
 import { SurveyStatusDropdown } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/SurveyStatusDropdown";
+import { useSingleUseId } from "@/modules/survey/hooks/useSingleUseId";
+import { copySurveyLink } from "@/modules/survey/lib/client-utils";
 import { Badge } from "@/modules/ui/components/badge";
 import { IconBar } from "@/modules/ui/components/iconbar";
 import { useTranslate } from "@tolgee/react";
@@ -18,8 +20,8 @@ interface SurveyAnalysisCTAProps {
   survey: TSurvey;
   environment: TEnvironment;
   isReadOnly: boolean;
-  webAppUrl: string;
   user: TUser;
+  surveyDomain: string;
 }
 
 interface ModalState {
@@ -33,8 +35,8 @@ export const SurveyAnalysisCTA = ({
   survey,
   environment,
   isReadOnly,
-  webAppUrl,
   user,
+  surveyDomain,
 }: SurveyAnalysisCTAProps) => {
   const { t } = useTranslate();
   const searchParams = useSearchParams();
@@ -48,7 +50,8 @@ export const SurveyAnalysisCTA = ({
     dropdown: false,
   });
 
-  const surveyUrl = useMemo(() => `${webAppUrl}/s/${survey.id}`, [survey.id, webAppUrl]);
+  const surveyUrl = useMemo(() => `${surveyDomain}/s/${survey.id}`, [survey.id, surveyDomain]);
+  const { refreshSingleUseId } = useSingleUseId(survey);
 
   const widgetSetupCompleted = survey.type === "app" && environment.appSetupCompleted;
 
@@ -71,8 +74,11 @@ export const SurveyAnalysisCTA = ({
   };
 
   const handleCopyLink = () => {
-    navigator.clipboard
-      .writeText(surveyUrl)
+    refreshSingleUseId()
+      .then((newId) => {
+        const linkToCopy = copySurveyLink(surveyUrl, newId);
+        return navigator.clipboard.writeText(linkToCopy);
+      })
       .then(() => {
         toast.success(t("common.copied_to_clipboard"));
       })
@@ -166,9 +172,9 @@ export const SurveyAnalysisCTA = ({
             <ShareEmbedSurvey
               key={key}
               survey={survey}
+              surveyDomain={surveyDomain}
               open={modalState[key as keyof ModalState]}
               setOpen={setOpen}
-              webAppUrl={webAppUrl}
               user={user}
               modalView={modalView}
             />

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

@@ -20,8 +20,8 @@ interface EmbedViewProps {
   survey: any;
   email: string;
   surveyUrl: string;
+  surveyDomain: string;
   setSurveyUrl: React.Dispatch<React.SetStateAction<string>>;
-  webAppUrl: string;
   locale: TUserLocale;
 }
 
@@ -35,8 +35,8 @@ export const EmbedView = ({
   survey,
   email,
   surveyUrl,
+  surveyDomain,
   setSurveyUrl,
-  webAppUrl,
   locale,
 }: EmbedViewProps) => {
   const { t } = useTranslate();
@@ -82,8 +82,8 @@ export const EmbedView = ({
           ) : activeId === "link" ? (
             <LinkTab
               survey={survey}
-              webAppUrl={webAppUrl}
               surveyUrl={surveyUrl}
+              surveyDomain={surveyDomain}
               setSurveyUrl={setSurveyUrl}
               locale={locale}
             />
@@ -99,7 +99,7 @@ export const EmbedView = ({
                 className={cn(
                   "rounded-md px-4 py-2",
                   tab.id === activeId
-                    ? "bg-white text-slate-900 shadow-sm"
+                    ? "bg-white text-slate-900 shadow-xs"
                     : "border-transparent text-slate-700 hover:text-slate-900"
                 )}>
                 {tab.label}

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

@@ -8,13 +8,13 @@ import { TUserLocale } from "@formbricks/types/user";
 
 interface LinkTabProps {
   survey: TSurvey;
-  webAppUrl: string;
   surveyUrl: string;
+  surveyDomain: string;
   setSurveyUrl: (url: string) => void;
   locale: TUserLocale;
 }
 
-export const LinkTab = ({ survey, webAppUrl, surveyUrl, setSurveyUrl, locale }: LinkTabProps) => {
+export const LinkTab = ({ survey, surveyUrl, surveyDomain, setSurveyUrl, locale }: LinkTabProps) => {
   const { t } = useTranslate();
 
   const docsLinks = [
@@ -43,8 +43,8 @@ export const LinkTab = ({ survey, webAppUrl, surveyUrl, setSurveyUrl, locale }:
         </p>
         <ShareSurveyLink
           survey={survey}
-          webAppUrl={webAppUrl}
           surveyUrl={surveyUrl}
+          surveyDomain={surveyDomain}
           setSurveyUrl={setSurveyUrl}
           locale={locale}
         />

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

@@ -0,0 +1,132 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import toast from "react-hot-toast";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { TEnvironment } from "@formbricks/types/environment";
+import { TSurvey } from "@formbricks/types/surveys/types";
+import { TUser } from "@formbricks/types/user";
+import { SurveyAnalysisCTA } from "../SurveyAnalysisCTA";
+
+// Mock constants
+vi.mock("@formbricks/lib/constants", () => ({
+  IS_FORMBRICKS_CLOUD: false,
+  ENCRYPTION_KEY: "test",
+  ENTERPRISE_LICENSE_KEY: "test",
+  GITHUB_ID: "test",
+  GITHUB_SECRET: "test",
+  GOOGLE_CLIENT_ID: "test",
+  GOOGLE_CLIENT_SECRET: "test",
+  AZUREAD_CLIENT_ID: "mock-azuread-client-id",
+  AZUREAD_CLIENT_SECRET: "mock-azure-client-secret",
+  AZUREAD_TENANT_ID: "mock-azuread-tenant-id",
+  OIDC_CLIENT_ID: "mock-oidc-client-id",
+  OIDC_CLIENT_SECRET: "mock-oidc-client-secret",
+  OIDC_ISSUER: "mock-oidc-issuer",
+  OIDC_DISPLAY_NAME: "mock-oidc-display-name",
+  OIDC_SIGNING_ALGORITHM: "mock-oidc-signing-algorithm",
+  WEBAPP_URL: "mock-webapp-url",
+  AI_AZURE_LLM_RESSOURCE_NAME: "mock-azure-llm-resource-name",
+  AI_AZURE_LLM_API_KEY: "mock-azure-llm-api-key",
+  AI_AZURE_LLM_DEPLOYMENT_ID: "mock-azure-llm-deployment-id",
+  AI_AZURE_EMBEDDINGS_RESSOURCE_NAME: "mock-azure-embeddings-resource-name",
+  AI_AZURE_EMBEDDINGS_API_KEY: "mock-azure-embeddings-api-key",
+  AI_AZURE_EMBEDDINGS_DEPLOYMENT_ID: "mock-azure-embeddings-deployment-id",
+  IS_PRODUCTION: true,
+  FB_LOGO_URL: "https://example.com/mock-logo.png",
+  SMTP_HOST: "mock-smtp-host",
+  SMTP_PORT: "mock-smtp-port",
+  IS_POSTHOG_CONFIGURED: true,
+}));
+
+// Create a spy for refreshSingleUseId so we can override it in tests
+const refreshSingleUseIdSpy = vi.fn(() => Promise.resolve("newSingleUseId"));
+
+// Mock useSingleUseId hook
+vi.mock("@/modules/survey/hooks/useSingleUseId", () => ({
+  useSingleUseId: () => ({
+    refreshSingleUseId: refreshSingleUseIdSpy,
+  }),
+}));
+
+const mockSearchParams = new URLSearchParams();
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn() }),
+  useSearchParams: () => mockSearchParams, // Reuse the same object
+  usePathname: () => "/current",
+}));
+
+// Mock copySurveyLink to return a predictable string
+vi.mock("@/modules/survey/lib/client-utils", () => ({
+  copySurveyLink: vi.fn((url: string, id: string) => `${url}?id=${id}`),
+}));
+
+vi.spyOn(toast, "success");
+vi.spyOn(toast, "error");
+
+// Set up a fake clipboard
+const writeTextMock = vi.fn(() => Promise.resolve());
+Object.assign(navigator, {
+  clipboard: { writeText: writeTextMock },
+});
+
+const dummySurvey = {
+  id: "survey123",
+  type: "link",
+  environmentId: "env123",
+  status: "active",
+} as unknown as TSurvey;
+const dummyEnvironment = { id: "env123", appSetupCompleted: true } as TEnvironment;
+const dummyUser = { id: "user123", name: "Test User" } as TUser;
+const surveyDomain = "https://surveys.test.formbricks.com";
+
+describe("SurveyAnalysisCTA - handleCopyLink", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("calls copySurveyLink and clipboard.writeText on success", async () => {
+    render(
+      <SurveyAnalysisCTA
+        survey={dummySurvey}
+        environment={dummyEnvironment}
+        isReadOnly={false}
+        surveyDomain={surveyDomain}
+        user={dummyUser}
+      />
+    );
+
+    const copyButton = screen.getByRole("button", { name: "common.copy_link" });
+    fireEvent.click(copyButton);
+
+    await waitFor(() => {
+      expect(refreshSingleUseIdSpy).toHaveBeenCalled();
+      expect(writeTextMock).toHaveBeenCalledWith(
+        "https://surveys.test.formbricks.com/s/survey123?id=newSingleUseId"
+      );
+      expect(toast.success).toHaveBeenCalledWith("common.copied_to_clipboard");
+    });
+  });
+
+  it("shows error toast on failure", async () => {
+    refreshSingleUseIdSpy.mockImplementationOnce(() => Promise.reject(new Error("fail")));
+    render(
+      <SurveyAnalysisCTA
+        survey={dummySurvey}
+        environment={dummyEnvironment}
+        isReadOnly={false}
+        surveyDomain={surveyDomain}
+        user={dummyUser}
+      />
+    );
+
+    const copyButton = screen.getByRole("button", { name: "common.copy_link" });
+    fireEvent.click(copyButton);
+
+    await waitFor(() => {
+      expect(refreshSingleUseIdSpy).toHaveBeenCalled();
+      expect(writeTextMock).not.toHaveBeenCalled();
+      expect(toast.error).toHaveBeenCalledWith("environments.surveys.summary.failed_to_copy_link");
+    });
+  });
+});

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

@@ -1,6 +1,6 @@
 import { getPreviewEmailTemplateHtml } from "@/modules/email/components/preview-email-template";
 import { getTranslate } from "@/tolgee/server";
-import { WEBAPP_URL } from "@formbricks/lib/constants";
+import { getSurveyDomain } from "@formbricks/lib/getSurveyUrl";
 import { getProjectByEnvironmentId } from "@formbricks/lib/project/service";
 import { getSurvey } from "@formbricks/lib/survey/service";
 import { getStyling } from "@formbricks/lib/utils/styling";
@@ -17,7 +17,7 @@ export const getEmailTemplateHtml = async (surveyId: string, locale: string) =>
   }
 
   const styling = getStyling(project, survey);
-  const surveyUrl = WEBAPP_URL + "/s/" + survey.id;
+  const surveyUrl = getSurveyDomain() + "/s/" + survey.id;
   const html = await getPreviewEmailTemplateHtml(survey, surveyUrl, styling, locale, t);
   const doctype =
     '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';

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

@@ -3,14 +3,12 @@ import { EnableInsightsBanner } from "@/app/(app)/environments/[environmentId]/s
 import { SummaryPage } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryPage";
 import { SurveyAnalysisCTA } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SurveyAnalysisCTA";
 import { needsInsightsGeneration } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/lib/utils";
-import { authOptions } from "@/modules/auth/lib/authOptions";
 import { getIsAIEnabled } from "@/modules/ee/license-check/lib/utils";
-import { getProjectPermissionByUserId } from "@/modules/ee/teams/lib/roles";
-import { getTeamPermissionFlags } from "@/modules/ee/teams/utils/teams";
+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 { SettingsId } from "@/modules/ui/components/settings-id";
 import { getTranslate } from "@/tolgee/server";
-import { getServerSession } from "next-auth";
 import { notFound } from "next/navigation";
 import {
   DEFAULT_LOCALE,
@@ -18,11 +16,7 @@ import {
   MAX_RESPONSES_FOR_INSIGHT_GENERATION,
   WEBAPP_URL,
 } from "@formbricks/lib/constants";
-import { getEnvironment } from "@formbricks/lib/environment/service";
-import { getMembershipByUserIdOrganizationId } from "@formbricks/lib/membership/service";
-import { getAccessFlags } from "@formbricks/lib/membership/utils";
-import { getOrganizationByEnvironmentId } from "@formbricks/lib/organization/service";
-import { getProjectByEnvironmentId } from "@formbricks/lib/project/service";
+import { getSurveyDomain } from "@formbricks/lib/getSurveyUrl";
 import { getResponseCountBySurveyId } from "@formbricks/lib/response/service";
 import { getSurvey } from "@formbricks/lib/survey/service";
 import { getUser } from "@formbricks/lib/user/service";
@@ -30,10 +24,8 @@ import { getUser } from "@formbricks/lib/user/service";
 const SurveyPage = async (props: { params: Promise<{ environmentId: string; surveyId: string }> }) => {
   const params = await props.params;
   const t = await getTranslate();
-  const session = await getServerSession(authOptions);
-  if (!session) {
-    throw new Error(t("common.session_not_found"));
-  }
+
+  const { session, environment, organization, isReadOnly } = await getEnvironmentAuth(params.environmentId);
 
   const surveyId = params.surveyId;
 
@@ -41,41 +33,20 @@ const SurveyPage = async (props: { params: Promise<{ environmentId: string; surv
     return notFound();
   }
 
-  const [survey, environment] = await Promise.all([
-    getSurvey(params.surveyId),
-    getEnvironment(params.environmentId),
-  ]);
-  if (!environment) {
-    throw new Error(t("common.environment_not_found"));
-  }
+  const survey = await getSurvey(params.surveyId);
+
   if (!survey) {
     throw new Error(t("common.survey_not_found"));
   }
 
-  const project = await getProjectByEnvironmentId(environment.id);
-  if (!project) {
-    throw new Error(t("common.project_not_found"));
-  }
-
   const user = await getUser(session.user.id);
+
   if (!user) {
     throw new Error(t("common.user_not_found"));
   }
 
-  const organization = await getOrganizationByEnvironmentId(params.environmentId);
-
-  if (!organization) {
-    throw new Error(t("common.organization_not_found"));
-  }
-  const currentUserMembership = await getMembershipByUserIdOrganizationId(session?.user.id, organization.id);
   const totalResponseCount = await getResponseCountBySurveyId(params.surveyId);
 
-  const { isMember } = getAccessFlags(currentUserMembership?.role);
-  const projectPermission = await getProjectPermissionByUserId(session.user.id, project.id);
-  const { hasReadAccess } = getTeamPermissionFlags(projectPermission);
-
-  const isReadOnly = isMember && hasReadAccess;
-
   // I took this out cause it's cloud only right?
   // const { active: isEnterpriseEdition } = await getEnterpriseLicense();
 
@@ -84,6 +55,7 @@ const SurveyPage = async (props: { params: Promise<{ environmentId: string; surv
     billing: organization.billing,
   });
   const shouldGenerateInsights = needsInsightsGeneration(survey);
+  const surveyDomain = getSurveyDomain();
 
   return (
     <PageContentWrapper>
@@ -94,8 +66,8 @@ const SurveyPage = async (props: { params: Promise<{ environmentId: string; surv
             environment={environment}
             survey={survey}
             isReadOnly={isReadOnly}
-            webAppUrl={WEBAPP_URL}
             user={user}
+            surveyDomain={surveyDomain}
           />
         }>
         {isAIEnabled && shouldGenerateInsights && (
@@ -124,6 +96,8 @@ const SurveyPage = async (props: { params: Promise<{ environmentId: string; surv
         isReadOnly={isReadOnly}
         locale={user.locale ?? DEFAULT_LOCALE}
       />
+
+      <SettingsId title={t("common.survey_id")} id={surveyId}></SettingsId>
     </PageContentWrapper>
   );
 };

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

@@ -389,8 +389,8 @@ export const CustomFilter = ({ survey }: CustomFilterProps) => {
               onOpenChange={(value) => {
                 value && handleDatePickerClose();
               }}>
-              <DropdownMenuTrigger asChild className="focus:bg-muted cursor-pointer outline-none">
-                <div className="min-w-auto h-auto rounded-md border border-slate-200 bg-white p-3 hover:border-slate-300 sm:flex sm:px-6 sm:py-3">
+              <DropdownMenuTrigger asChild className="focus:bg-muted cursor-pointer outline-hidden">
+                <div className="h-auto min-w-auto rounded-md border border-slate-200 bg-white p-3 hover:border-slate-300 sm:flex sm:px-6 sm:py-3">
                   <div className="hidden w-full items-center justify-between sm:flex">
                     <span className="text-sm text-slate-700">{t("common.download")}</span>
                     <ArrowDownToLineIcon className="ml-2 h-4 w-4" />
@@ -416,14 +416,14 @@ export const CustomFilter = ({ survey }: CustomFilterProps) => {
                   onClick={() => {
                     handleDowndloadResponses(FilterDownload.FILTER, "csv");
                   }}>
-                  <p className="text-slate-700">{t("environments.surveys.summary.current_selection_csv")}</p>
+                  <p className="text-slate-700">{t("environments.surveys.summary.filtered_responses_csv")}</p>
                 </DropdownMenuItem>
                 <DropdownMenuItem
                   onClick={() => {
                     handleDowndloadResponses(FilterDownload.FILTER, "xlsx");
                   }}>
                   <p className="text-slate-700">
-                    {t("environments.surveys.summary.current_selection_excel")}
+                    {t("environments.surveys.summary.filtered_responses_excel")}
                   </p>
                 </DropdownMenuItem>
               </DropdownMenuContent>

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

@@ -96,7 +96,7 @@ export const QuestionFilterComboBox = ({
           <DropdownMenuTrigger
             disabled={disabled}
             className={clsx(
-              "h-9 max-w-fit rounded-md rounded-r-none border-r-[1px] border-slate-300 bg-white p-2 text-sm text-slate-600 focus:outline-transparent focus:ring-0",
+              "h-9 max-w-fit rounded-md rounded-r-none border-r-[1px] border-slate-300 bg-white p-2 text-sm text-slate-600 focus:ring-0 focus:outline-transparent",
               !disabled ? "cursor-pointer" : "opacity-50"
             )}>
             <div className="flex items-center justify-between">
@@ -146,7 +146,7 @@ export const QuestionFilterComboBox = ({
                       key={`${o}-${index}`}
                       type="button"
                       onClick={() => handleRemoveMultiSelect(filterComboBoxValue.filter((i) => i !== o))}
-                      className="w-30 flex items-center whitespace-nowrap bg-slate-100 px-2 text-slate-600">
+                      className="flex w-30 items-center bg-slate-100 px-2 whitespace-nowrap text-slate-600">
                       {o}
                       <X width={14} height={14} className="ml-2" />
                     </button>
@@ -166,7 +166,7 @@ export const QuestionFilterComboBox = ({
         </div>
         <div className="relative mt-2 h-full">
           {open && (
-            <div className="animate-in bg-popover absolute top-0 z-10 max-h-52 w-full overflow-auto rounded-md bg-white outline-none">
+            <div className="animate-in bg-popover absolute top-0 z-10 max-h-52 w-full overflow-auto rounded-md bg-white outline-hidden">
               <CommandList>
                 <div className="p-2">
                   <Input

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

@@ -164,7 +164,7 @@ export const QuestionsComboBox = ({ options, selected, onChangeValue }: Question
             value={inputValue}
             onValueChange={setInputValue}
             placeholder={t("common.search") + "..."}
-            className="h-5 border-none border-transparent p-0 shadow-none outline-0 ring-offset-transparent focus:border-none focus:border-transparent focus:shadow-none focus:outline-0 focus:ring-offset-transparent"
+            className="h-5 border-none border-transparent p-0 shadow-none ring-offset-transparent outline-0 focus:border-none focus:border-transparent focus:shadow-none focus:ring-offset-transparent focus:outline-0"
           />
         )}
         <div>
@@ -177,7 +177,7 @@ export const QuestionsComboBox = ({ options, selected, onChangeValue }: Question
       </div>
       <div className="relative mt-2 h-full">
         {open && (
-          <div className="animate-in bg-popover absolute top-0 z-50 max-h-52 w-full overflow-auto rounded-md bg-white outline-none">
+          <div className="animate-in bg-popover absolute top-0 z-50 max-h-52 w-full overflow-auto rounded-md bg-white outline-hidden">
             <CommandList>
               <CommandEmpty>{t("common.no_result_found")}</CommandEmpty>
               {options?.map((data) => (

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

@@ -199,7 +199,7 @@ export const ResponseFilter = ({ survey }: ResponseFilterProps) => {
 
   return (
     <Popover open={isOpen} onOpenChange={handleOpenChange}>
-      <PopoverTrigger className="flex min-w-[8rem] items-center justify-between rounded border border-slate-200 bg-white p-3 text-sm text-slate-600 hover:border-slate-300 sm:min-w-[11rem] sm:px-6 sm:py-3">
+      <PopoverTrigger className="flex min-w-[8rem] items-center justify-between rounded-sm border border-slate-200 bg-white p-3 text-sm text-slate-600 hover:border-slate-300 sm:min-w-[11rem] sm:px-6 sm:py-3">
         <span>
           Filter <b>{filterValue.filter.length > 0 && `(${filterValue.filter.length})`}</b>
         </span>

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

@@ -86,8 +86,8 @@ export const ResultsShareButton = ({ survey, webAppUrl }: ResultsShareButtonProp
       <DropdownMenu>
         <DropdownMenuTrigger
           asChild
-          className="focus:bg-muted cursor-pointer border border-slate-200 outline-none hover:border-slate-300">
-          <div className="min-w-auto h-auto rounded-md border bg-white p-3 sm:flex sm:min-w-[7rem] sm:px-6 sm:py-3">
+          className="focus:bg-muted cursor-pointer border border-slate-200 outline-hidden hover:border-slate-300">
+          <div className="h-auto min-w-auto rounded-md border bg-white p-3 sm:flex sm:min-w-[7rem] sm:px-6 sm:py-3">
             <div className="hidden w-full items-center justify-between sm:flex">
               <span className="text-sm text-slate-700">
                 {t("environments.surveys.summary.share_results")}

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

@@ -33,6 +33,12 @@ vi.mock("@formbricks/lib/constants", () => ({
   OIDC_CLIENT_SECRET: "test-oidc-client-secret",
   OIDC_SIGNING_ALGORITHM: "test-oidc-signing-algorithm",
   WEBAPP_URL: "test-webapp-url",
+  IS_POSTHOG_CONFIGURED: true,
+  POSTHOG_API_HOST: "test-posthog-api-host",
+  POSTHOG_API_KEY: "test-posthog-api-key",
+  FORMBRICKS_API_HOST: "mock-formbricks-api-host",
+  FORMBRICKS_ENVIRONMENT_ID: "mock-formbricks-environment-id",
+  IS_FORMBRICKS_ENABLED: true,
 }));
 
 vi.mock("@/app/(app)/components/FormbricksClient", () => ({
@@ -44,12 +50,6 @@ vi.mock("@/app/intercom/IntercomClientWrapper", () => ({
 vi.mock("@/modules/ui/components/no-mobile-overlay", () => ({
   NoMobileOverlay: () => <div data-testid="no-mobile-overlay" />,
 }));
-vi.mock("@/modules/ui/components/post-hog-client", () => ({
-  PHProvider: ({ children }: { children: React.ReactNode }) => (
-    <div data-testid="ph-provider">{children}</div>
-  ),
-  PostHogPageview: () => <div data-testid="ph-pageview" />,
-}));
 vi.mock("@/modules/ui/components/toaster-client", () => ({
   ToasterClient: () => <div data-testid="toaster-client" />,
 }));
@@ -71,8 +71,6 @@ describe("(app) AppLayout", () => {
     render(element);
 
     expect(screen.getByTestId("no-mobile-overlay")).toBeInTheDocument();
-    expect(screen.getByTestId("ph-pageview")).toBeInTheDocument();
-    expect(screen.getByTestId("ph-provider")).toBeInTheDocument();
     expect(screen.getByTestId("mock-intercom-wrapper")).toBeInTheDocument();
     expect(screen.getByTestId("toaster-client")).toBeInTheDocument();
     expect(screen.getByTestId("child-content")).toHaveTextContent("Hello from children");