fixed some of sonarQube errors

.cursor/rules/testing.mdc

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

.env.example

@@ -93,6 +93,10 @@ EMAIL_VERIFICATION_DISABLED=1
 # Password Reset. If you enable Password Reset functionality you have to setup SMTP-Settings, too.
 PASSWORD_RESET_DISABLED=1
 
+# Signup. Disable the ability for new users to create an account.
+# Note: This variable is only available to the SaaS setup of Formbricks Cloud. Signup is disable by default for self-hosting.
+# SIGNUP_DISABLED=1
+
 # Email login. Disable the ability for users to login with email.
 # EMAIL_AUTH_DISABLED=1
 
@@ -116,10 +120,6 @@ IMPRINT_ADDRESS=
 # TURNSTILE_SITE_KEY=
 # TURNSTILE_SECRET_KEY=
 
-# Google reCAPTCHA v3 keys
-RECAPTCHA_SITE_KEY=
-RECAPTCHA_SECRET_KEY=
-
 # Configure Github Login
 GITHUB_ID=
 GITHUB_SECRET=
@@ -154,6 +154,10 @@ NOTION_OAUTH_CLIENT_SECRET=
 STRIPE_SECRET_KEY=
 STRIPE_WEBHOOK_SECRET=
 
+# Configure Formbricks usage within Formbricks
+FORMBRICKS_API_HOST=
+FORMBRICKS_ENVIRONMENT_ID=
+
 # Oauth credentials for Google sheet integration
 GOOGLE_SHEETS_CLIENT_ID=
 GOOGLE_SHEETS_CLIENT_SECRET=
@@ -172,8 +176,8 @@ ENTERPRISE_LICENSE_KEY=
 # Automatically assign new users to a specific organization and role within that organization
 # Insert an existing organization id or generate a valid CUID for a new one at https://www.getuniqueid.com/cuid (e.g. cjld2cjxh0000qzrmn831i7rn)
 # (Role Management is an Enterprise feature)
-# AUTH_SSO_DEFAULT_TEAM_ID=
-# AUTH_SKIP_INVITE_FOR_SSO=
+# DEFAULT_ORGANIZATION_ID=
+# DEFAULT_ORGANIZATION_ROLE=owner
 
 # Send new users to Brevo
 # BREVO_API_KEY=
@@ -190,7 +194,8 @@ UNSPLASH_ACCESS_KEY=
 
 # The below is used for Next Caching (uses In-Memory from Next Cache if not provided)
 # You can also add more configuration to Redis using the redis.conf file in the root directory
-# REDIS_URL=redis://localhost:6379
+REDIS_URL=redis://localhost:6379
+REDIS_DEFAULT_TTL=86400 # 1 day 
 
 # The below is used for Rate Limiting (uses In-Memory LRU Cache if not provided) (You can use a service like Webdis for this)
 # REDIS_HTTP_URL:
@@ -198,6 +203,15 @@ UNSPLASH_ACCESS_KEY=
 # The below is used for Rate Limiting for management API
 UNKEY_ROOT_KEY=
 
+# Disable custom cache handler if necessary (e.g. if deployed on Vercel)
+# CUSTOM_CACHE_DISABLED=1
+
+# Azure AI settings
+# AI_AZURE_RESSOURCE_NAME=
+# AI_AZURE_API_KEY=
+# AI_AZURE_EMBEDDINGS_DEPLOYMENT_ID=
+# AI_AZURE_LLM_DEPLOYMENT_ID=
+
 # INTERCOM_APP_ID=
 # INTERCOM_SECRET_KEY=
 
@@ -210,9 +224,3 @@ UNKEY_ROOT_KEY=
 # The SENTRY_AUTH_TOKEN variable is picked up by the Sentry Build Plugin.
 # It's used automatically by Sentry during the build for authentication when uploading source maps.
 # SENTRY_AUTH_TOKEN=
-
-# Configure the minimum role for user management from UI(owner, manager, disabled)
-# USER_MANAGEMENT_MINIMUM_ROLE="manager"
-
-# Configure the maximum age for the session in seconds. Default is 86400 (24 hours)
-# SESSION_MAX_AGE=86400

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

@@ -49,7 +49,7 @@ runs:
       if: steps.cache-build.outputs.cache-hit != 'true'
 
     - name: Install pnpm
-      uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+      uses: pnpm/action-setup@v4
       if: steps.cache-build.outputs.cache-hit != 'true'
 
     - name: Install dependencies

.github/copilot-instructions.md

@@ -1,32 +0,0 @@
-# Testing Instructions
-
-When generating test files inside the "/app/web" path, follow these rules:
-
-- You are an experienced senior software engineer
-- Use vitest
-- Ensure 100% code coverage
-- Add as few comments as possible
-- The test file should be located in the same folder as the original file
-- Use the `test` function instead of `it`
-- Follow the same test pattern used for other files in the package where the file is located
-- All imports should be at the top of the file, not inside individual tests
-- For mocking inside "test" blocks use "vi.mocked"
-- If the file is located in the "packages/survey" path, use "@testing-library/preact" instead of "@testing-library/react"
-- Don't mock functions that are already mocked in the "apps/web/vitestSetup.ts" file
-- When using "screen.getByText" check for the tolgee string if it is being used in the file.
-- The types for mocked variables can be found in the "packages/types" path. Be sure that every imported type exists before using it. Don't create types that are not already in the codebase.
-- When mocking data check if the properties added are part of the type of the object being mocked. Only specify known properties, don't use properties that are not part of the type.
-  
-If it's a test for a ".tsx" file, follow these extra instructions:
-
-- Add this code inside the "describe" block and before any test:
-
-afterEach(() => {
-    cleanup();
-});
-
-- The "afterEach" function should only have the "cleanup()" line inside it and should be adde to the "vitest" imports.
-- For click events, import userEvent from "@testing-library/user-event"
-- Mock other components that can make the text more complex and but at the same time mocking it wouldn't make the test flaky. It's ok to leave basic and simple components.
-- You don't need to mock @tolgee/react
-- Use "import "@testing-library/jest-dom/vitest";"

.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/apply-issue-labels-to-pr.yml

@@ -19,12 +19,12 @@ jobs:
 
     steps:
       - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
+        uses: step-security/harden-runner@4d991eb9b905ef189e4c376166672c3f2f230481 # v2.11.0
         with:
           egress-policy: audit
 
       - name: Apply labels from linked issue to PR
-        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
+        uses: actions/github-script@211cb3fefb35a799baa5156f9321bb774fe56294 # v5.2.0
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |

.github/workflows/build-web.yml

@@ -13,11 +13,11 @@ jobs:
 
     steps:
       - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
+        uses: step-security/harden-runner@4d991eb9b905ef189e4c376166672c3f2f230481 # v2.11.0
         with:
           egress-policy: audit
 
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0
       - uses: ./.github/actions/dangerous-git-checkout
 
       - name: Build & Cache Web Binaries

.github/workflows/chromatic.yml

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

.github/workflows/dependency-review.yml

@@ -17,11 +17,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
+        uses: step-security/harden-runner@4d991eb9b905ef189e4c376166672c3f2f230481 # v2.11.0
         with:
           egress-policy: audit
 
       - name: 'Checkout Repository'
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
       - name: 'Dependency Review'
-        uses: actions/dependency-review-action@38ecb5b593bf0eb19e335c03f97670f792489a8b # v4.7.0
+        uses: actions/dependency-review-action@3b139cfc5fae8b618d3eae3675e383bb1769c019 # v4.5.0

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

@@ -4,7 +4,7 @@ on:
   workflow_dispatch:
     inputs:
       VERSION:
-        description: 'The version of the Docker image to release, full image tag if image tag is v0.0.0 enter v0.0.0.'
+        description: 'The version of the Docker image to release'
         required: true
         type: string
       REPOSITORY:
@@ -12,13 +12,6 @@ on:
         required: false
         type: string
         default: 'ghcr.io/formbricks/formbricks'
-      ENVIRONMENT:
-        description: 'The environment to deploy to'
-        required: true
-        type: choice
-        options:
-          - stage
-          - prod
   workflow_call:
     inputs:
       VERSION:
@@ -30,10 +23,6 @@ on:
         required: false
         type: string
         default: 'ghcr.io/formbricks/formbricks'
-      ENVIRONMENT:
-        description: 'The environment to deploy to'
-        required: true
-        type: string
 
 permissions:
   id-token: write
@@ -44,17 +33,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4.2.2
-
-      - name: Tailscale
-        uses: tailscale/github-action@v3
-        with:
-          oauth-client-id: ${{ secrets.TS_OAUTH_CLIENT_ID }}
-          oauth-secret: ${{ secrets.TS_OAUTH_SECRET }}
-          tags: tag:github
+        uses: actions/checkout@v4
 
       - name: Configure AWS Credentials
-        uses: aws-actions/configure-aws-credentials@f24d7193d98baebaeacc7e2227925dd47cc267f5 # v4.2.0
+        uses: aws-actions/configure-aws-credentials@e3dd6a429d7300a6a4c196c26e071d42e0343502 # v4.0.2
         with:
           role-to-assume: ${{ secrets.AWS_ASSUME_ROLE_ARN }}
           aws-region: "eu-central-1"
@@ -66,8 +48,6 @@ jobs:
           AWS_REGION: eu-central-1
 
       - uses: helmfile/helmfile-action@v2
-        name: Deploy Formbricks Cloud Prod
-        if: inputs.ENVIRONMENT == 'prod'
         env:
           VERSION: ${{ inputs.VERSION }}
           REPOSITORY: ${{ inputs.REPOSITORY }}
@@ -75,28 +55,10 @@ jobs:
           FORMBRICKS_INGRESS_CERT_ARN: ${{ secrets.FORMBRICKS_INGRESS_CERT_ARN }}
           FORMBRICKS_ROLE_ARN: ${{ secrets.FORMBRICKS_ROLE_ARN }}
         with:
-          helmfile-version: 'v1.0.0'
           helm-plugins: >
             https://github.com/databus23/helm-diff,
             https://github.com/jkroepke/helm-secrets
-          helmfile-args: apply -l environment=prod
-          helmfile-auto-init: "false"
-          helmfile-workdirectory: infra/formbricks-cloud-helm
-
-      - uses: helmfile/helmfile-action@v2
-        name: Deploy Formbricks Cloud Stage
-        if: inputs.ENVIRONMENT == 'stage'
-        env:
-          VERSION: ${{ inputs.VERSION }}
-          REPOSITORY: ${{ inputs.REPOSITORY }}
-          FORMBRICKS_INGRESS_CERT_ARN: ${{ secrets.STAGE_FORMBRICKS_INGRESS_CERT_ARN }}
-          FORMBRICKS_ROLE_ARN: ${{ secrets.STAGE_FORMBRICKS_ROLE_ARN }}
-        with:
-          helmfile-version: 'v1.0.0'
-          helm-plugins: >
-            https://github.com/databus23/helm-diff,
-            https://github.com/jkroepke/helm-secrets
-          helmfile-args: apply -l environment=stage
+          helmfile-args: apply
           helmfile-auto-init: "false"
           helmfile-workdirectory: infra/formbricks-cloud-helm
 

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

@@ -40,7 +40,7 @@ jobs:
 
     steps:
       - name: Checkout Repository
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v3
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3

.github/workflows/e2e.yml

@@ -11,8 +11,6 @@ on:
         required: false
       PLAYWRIGHT_SERVICE_URL:
         required: false
-      ENTERPRISE_LICENSE_KEY:
-        required: true
       # Add other secrets if necessary
   workflow_dispatch:
 
@@ -25,6 +23,7 @@ permissions:
   id-token: write
   contents: read
   actions: read
+  checks: write
 
 jobs:
   build:
@@ -47,19 +46,17 @@ jobs:
           --health-retries=5
     steps:
       - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
+        uses: step-security/harden-runner@4d991eb9b905ef189e4c376166672c3f2f230481 # v2.11.0
         with:
-          egress-policy: allow
-          allowed-endpoints: |
-            ee.formbricks.com:443
+          egress-policy: audit
 
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0
       - uses: ./.github/actions/dangerous-git-checkout
 
-      - name: Setup Node.js 22.x
+      - name: Setup Node.js 20.x
         uses: actions/setup-node@1a4442cacd436585916779262731d5b162bc6ec7 # v3.8.2
         with:
-          node-version: 22.x
+          node-version: 20.x
 
       - name: Install pnpm
         uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
@@ -78,7 +75,7 @@ jobs:
           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=${{ secrets.ENTERPRISE_LICENSE_KEY }}/" .env
+          sed -i "s/ENTERPRISE_LICENSE_KEY=.*/ENTERPRISE_LICENSE_KEY=${RANDOM_KEY}/" .env
           echo "" >> .env
           echo "E2E_TESTING=1" >> .env
         shell: bash
@@ -92,18 +89,8 @@ jobs:
           # pnpm prisma migrate deploy
           pnpm db:migrate:dev
 
-      - name: Check for Enterprise License
-        run: |
-          LICENSE_KEY=$(grep '^ENTERPRISE_LICENSE_KEY=' .env | cut -d'=' -f2-)
-          if [ -z "$LICENSE_KEY" ]; then
-            echo "::error::ENTERPRISE_LICENSE_KEY in .env is empty. Please check your secret configuration."
-            exit 1
-          fi
-          echo "License key length: ${#LICENSE_KEY}"
-
       - name: Run App
         run: |
-          echo "Starting app with enterprise license..."
           NODE_ENV=test pnpm start --filter=@formbricks/web | tee app.log 2>&1 &
           sleep 10  # Optional: gives some buffer for the app to start
           for attempt in {1..10}; do

.github/workflows/formbricks-release.yml

@@ -30,5 +30,4 @@ jobs:
       - docker-build
       - helm-chart-release
     with:
-      VERSION: v${{ needs.docker-build.outputs.VERSION }}
-      ENVIRONMENT: "prod"
+      VERSION: ${{ needs.docker-build.outputs.VERSION }}

.github/workflows/labeler.yml

@@ -0,0 +1,27 @@
+name: "Pull Request Labeler"
+on:
+  - pull_request_target
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+permissions:
+  contents: read
+
+jobs:
+  labeler:
+    name: Pull Request Labeler
+    permissions:
+      contents: read
+      pull-requests: write
+    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
+
+      - uses: actions/labeler@ac9175f8a1f3625fd0d4fb234536d26811351594 # v4.3.0
+        with:
+          repo-token: "${{ secrets.GITHUB_TOKEN }}"
+          # https://github.com/actions/labeler/issues/442#issuecomment-1297359481
+          sync-labels: ""

.github/workflows/lint.yml

@@ -13,7 +13,7 @@ jobs:
 
     steps:
       - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
+        uses: step-security/harden-runner@4d991eb9b905ef189e4c376166672c3f2f230481 # v2.11.0
         with:
           egress-policy: audit
 
@@ -26,7 +26,7 @@ jobs:
           node-version: 20.x
 
       - name: Install pnpm
-        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+        uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2
 
       - name: Install dependencies
         run: pnpm install --config.platform=linux --config.architecture=x64

.github/workflows/pr.yml

@@ -51,7 +51,7 @@ jobs:
       statuses: write
     steps:
       - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0
+        uses: step-security/harden-runner@4d991eb9b905ef189e4c376166672c3f2f230481
         with:
           egress-policy: audit
       - name: fail if conditional jobs failed

.github/workflows/release-changesets.yml

@@ -0,0 +1,56 @@
+name: Release Changesets
+
+on:
+  workflow_dispatch:
+  #push:
+  #  branches:
+  #    - main
+
+permissions:
+  contents: write
+  pull-requests: write
+  packages: write
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+env:
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    env:
+      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+    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: Setup Node.js 18.x
+        uses: actions/setup-node@7c12f8017d5436eb855f1ed4399f037a36fbd9e8 # v2.5.2
+        with:
+          node-version: 18.x
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@c3b53f6a16e57305370b4ae5a540c2077a1d50dd # v2.2.4
+
+      - name: Install Dependencies
+        run: pnpm install --config.platform=linux --config.architecture=x64
+
+      - name: Create Release Pull Request or Publish to npm
+        id: changesets
+        uses: changesets/action@c8bada60c408975afd1a20b3db81d6eee6789308 # v1.4.9
+        with:
+          # This expects you to have a script called release which does a build for your packages and calls changeset publish
+          publish: pnpm release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

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

@@ -31,12 +31,12 @@ jobs:
 
     steps:
       - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
+        uses: step-security/harden-runner@4d991eb9b905ef189e4c376166672c3f2f230481 # v2.11.0
         with:
           egress-policy: audit
 
       - name: Checkout repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0
 
       - name: Set up Depot CLI
         uses: depot/setup-action@b0b1ea4f69e92ebf5dea3f8713a1b0c37b2126a5 # v1.6.0
@@ -45,13 +45,13 @@ jobs:
       # https://github.com/sigstore/cosign-installer
       - name: Install cosign
         if: github.event_name != 'pull_request'
-        uses: sigstore/cosign-installer@3454372f43399081ed03b604cb2d021dabca52bb # v3.8.2
+        uses: sigstore/cosign-installer@59acb6260d9c0ba8f4a2f9d9b48431a222b68e20 # v3.5.0
 
       # Login against a Docker registry except on PR
       # https://github.com/docker/login-action
       - name: Log into registry ${{ env.REGISTRY }}
         if: github.event_name != 'pull_request'
-        uses: docker/login-action@74a5d142397b4f367a81961eba4e8cd7edddf772 # v3.4.0
+        uses: docker/login-action@9780b0c442fbb1117ed29e0efdff1e18412f7567 # v3.3.0
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}

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

@@ -20,27 +20,30 @@ env:
   TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
   TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
 
+permissions:
+  contents: read
+
 jobs:
   build:
     runs-on: ubuntu-latest
     permissions:
       contents: read
       packages: write
-      id-token: write
       # This is used to complete the identity challenge
       # with sigstore/fulcio when running outside of PRs.
+      id-token: write
 
     outputs:
       VERSION: ${{ steps.extract_release_tag.outputs.VERSION }}
 
     steps:
       - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
+        uses: step-security/harden-runner@4d991eb9b905ef189e4c376166672c3f2f230481 # v2.11.0
         with:
           egress-policy: audit
 
       - name: Checkout repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0
 
       - name: Get Release Tag
         id: extract_release_tag
@@ -62,13 +65,13 @@ jobs:
       # https://github.com/sigstore/cosign-installer
       - name: Install cosign
         if: github.event_name != 'pull_request'
-        uses: sigstore/cosign-installer@3454372f43399081ed03b604cb2d021dabca52bb # v3.8.2
+        uses: sigstore/cosign-installer@59acb6260d9c0ba8f4a2f9d9b48431a222b68e20 # v3.5.0
 
       # Login against a Docker registry except on PR
       # https://github.com/docker/login-action
       - name: Log into registry ${{ env.REGISTRY }}
         if: github.event_name != 'pull_request'
-        uses: docker/login-action@74a5d142397b4f367a81961eba4e8cd7edddf772 # v3.4.0
+        uses: docker/login-action@9780b0c442fbb1117ed29e0efdff1e18412f7567 # v3.3.0
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}

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

@@ -4,7 +4,7 @@ on:
   workflow_call:
     inputs:
       VERSION:
-        description: "The version of the Helm chart to release"
+        description: 'The version of the Helm chart to release'
         required: true
         type: string
 
@@ -19,7 +19,7 @@ jobs:
       contents: read
     steps:
       - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
+        uses: step-security/harden-runner@4d991eb9b905ef189e4c376166672c3f2f230481 # v2.11.0
         with:
           egress-policy: audit
 

.github/workflows/scorecard.yml

@@ -35,12 +35,12 @@ jobs:
 
     steps:
       - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
+        uses: step-security/harden-runner@4d991eb9b905ef189e4c376166672c3f2f230481 # v2.11.0
         with:
           egress-policy: audit
 
       - name: "Checkout code"
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
         with:
           persist-credentials: false
 

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

@@ -17,7 +17,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
+        uses: step-security/harden-runner@4d991eb9b905ef189e4c376166672c3f2f230481 # v2.11.0
         with:
           egress-policy: audit
 
@@ -40,7 +40,7 @@ jobs:
             revert
             ossgg
 
-      - uses: marocchino/sticky-pull-request-comment@67d0dec7b07ed060a405f9b2a64b8ab319fdd7db # v2.9.2
+      - uses: marocchino/sticky-pull-request-comment@52423e01640425a022ef5fd42c6fb5f633a02728 # v2.9.1
         # When the previous steps fails, the workflow would stop. By adding this
         # condition you can continue the execution with the populated error message.
         if: always() && (steps.lint_pr_title.outputs.error_message != null)
@@ -59,7 +59,7 @@ jobs:
 
       # Delete a previous comment when the issue has been resolved
       - if: ${{ steps.lint_pr_title.outputs.error_message == null }}
-        uses: marocchino/sticky-pull-request-comment@67d0dec7b07ed060a405f9b2a64b8ab319fdd7db # v2.9.2
+        uses: marocchino/sticky-pull-request-comment@52423e01640425a022ef5fd42c6fb5f633a02728 # v2.9.1
         with:
           header: pr-title-lint-error
           message: |

.github/workflows/sonarqube.yml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
+        uses: step-security/harden-runner@4d991eb9b905ef189e4c376166672c3f2f230481 # v2.11.0
         with:
           egress-policy: audit
 
@@ -29,7 +29,7 @@ jobs:
           node-version: 22.x
 
       - name: Install pnpm
-        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+        uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2
 
       - name: Install dependencies
         run: pnpm install --config.platform=linux --config.architecture=x64
@@ -48,7 +48,7 @@ jobs:
         run: |
           pnpm test:coverage
       - name: SonarQube Scan
-        uses: SonarSource/sonarqube-scan-action@2500896589ef8f7247069a56136f8dc177c27ccf
+        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

@@ -1,8 +1,8 @@
-name: "Terraform"
+name: 'Terraform'
 
 on:
   workflow_dispatch:
-  # TODO: enable it back when migration is completed.
+# TODO: enable it back when migration is completed.
   push:
     branches:
       - main
@@ -14,33 +14,27 @@ on:
     paths:
       - "infra/terraform/**"
 
+permissions:
+  id-token: write
+  contents: write
+  pull-requests: write
+
 jobs:
   terraform:
     runs-on: ubuntu-latest
-    permissions:
-      id-token: write
-      contents: read
-      pull-requests: write
     env:
       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
     steps:
       - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
+        uses: step-security/harden-runner@4d991eb9b905ef189e4c376166672c3f2f230481 # v2.11.0
         with:
           egress-policy: audit
 
       - name: Checkout
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
-      - name: Tailscale
-        uses: tailscale/github-action@v3
-        with:
-          oauth-client-id: ${{ secrets.TS_OAUTH_CLIENT_ID }}
-          oauth-secret: ${{ secrets.TS_OAUTH_SECRET }}
-          tags: tag:github
-
       - name: Configure AWS Credentials
-        uses: aws-actions/configure-aws-credentials@f24d7193d98baebaeacc7e2227925dd47cc267f5 # v4.2.0
+        uses: aws-actions/configure-aws-credentials@e3dd6a429d7300a6a4c196c26e071d42e0343502 # v4.0.2
         with:
           role-to-assume: ${{ secrets.AWS_ASSUME_ROLE_ARN }}
           aws-region: "eu-central-1"
@@ -70,7 +64,7 @@ jobs:
         working-directory: infra/terraform
 
       - name: Post PR comment
-        uses: borchero/terraform-plan-comment@434458316f8f24dd073cd2561c436cce41dc8f34 # v2.4.1
+        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 }}
@@ -82,3 +76,4 @@ jobs:
         if: github.ref == 'refs/heads/main' && github.event_name == 'push'
         run: terraform apply .planfile
         working-directory: "infra/terraform"
+

.github/workflows/test.yml

@@ -14,11 +14,11 @@ jobs:
 
     steps:
       - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
+        uses: step-security/harden-runner@4d991eb9b905ef189e4c376166672c3f2f230481 # v2.11.0
         with:
           egress-policy: audit
 
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0
       - uses: ./.github/actions/dangerous-git-checkout
 
       - name: Setup Node.js 20.x

.github/workflows/tolgee-missing-key-check.yml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
+        uses: step-security/harden-runner@4d991eb9b905ef189e4c376166672c3f2f230481 # v2.11.0
         with:
           egress-policy: audit
 

.github/workflows/tolgee.yml

@@ -16,7 +16,7 @@ jobs:
 
     steps:
       - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
+        uses: step-security/harden-runner@4d991eb9b905ef189e4c376166672c3f2f230481 # v2.11.0
         with:
           egress-policy: audit
 

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

@@ -18,7 +18,7 @@ jobs:
     if: github.event.action == 'opened'
     steps:
       - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
+        uses: step-security/harden-runner@4d991eb9b905ef189e4c376166672c3f2f230481 # v2.11.0
         with:
           egress-policy: audit
 

.husky/pre-commit

@@ -16,6 +16,6 @@ if [ -f branch.json ]; then
     echo "Skipping tolgee-pull: NEXT_PUBLIC_TOLGEE_API_KEY is not set"
   else
     pnpm run tolgee-pull
-    git add apps/web/locales
+    git add packages/lib/messages
   fi
 fi

.tolgeerc.json

@@ -4,33 +4,33 @@
   "patterns": ["./apps/web/**/*.ts?(x)"],
   "projectId": 10304,
   "pull": {
-    "path": "./apps/web/locales"
+    "path": "./packages/lib/messages"
   },
   "push": {
     "files": [
       {
         "language": "en-US",
-        "path": "./apps/web/locales/en-US.json"
+        "path": "./packages/lib/messages/en-US.json"
       },
       {
         "language": "de-DE",
-        "path": "./apps/web/locales/de-DE.json"
+        "path": "./packages/lib/messages/de-DE.json"
       },
       {
         "language": "fr-FR",
-        "path": "./apps/web/locales/fr-FR.json"
+        "path": "./packages/lib/messages/fr-FR.json"
       },
       {
         "language": "pt-BR",
-        "path": "./apps/web/locales/pt-BR.json"
+        "path": "./packages/lib/messages/pt-BR.json"
       },
       {
         "language": "zh-Hant-TW",
-        "path": "./apps/web/locales/zh-Hant-TW.json"
+        "path": "./packages/lib/messages/zh-Hant-TW.json"
       },
       {
         "language": "pt-PT",
-        "path": "./apps/web/locales/pt-PT.json"
+        "path": "./packages/lib/messages/pt-PT.json"
       }
     ],
     "forceMode": "OVERRIDE"

.vscode/settings.json

@@ -1,4 +1,9 @@
 {
+  "github.copilot.chat.codeGeneration.instructions": [
+    {
+      "text": "When generating tests, always use vitest and use the `test` function instead of `it`."
+    }
+  ],
   "javascript.updateImportsOnFileMove.enabled": "always",
   "sonarlint.connectedMode.project": {
     "connectionId": "formbricks",

LICENSE

@@ -3,7 +3,7 @@ Copyright (c) 2024 Formbricks GmbH
 Portions of this software are licensed as follows:
 
 - All content that resides under the "apps/web/modules/ee" directory of this repository, if these directories exist, is licensed under the license defined in "apps/web/modules/ee/LICENSE".
-- All content that resides under the "packages/js/", "packages/android/", "packages/ios/" and "packages/api/" directories of this repository, if that directories exist, is licensed under the "MIT" license as defined in the "LICENSE" files of these packages.
+- All content that resides under the "packages/js/", "packages/react-native/", "packages/android/", "packages/ios/" and "packages/api/" directories of this repository, if that directories exist, is licensed under the "MIT" license as defined in the "LICENSE" files of these packages.
 - All third party components incorporated into the Formbricks Software are licensed under the original license provided by the owner of the applicable component.
 - Content outside of the above mentioned directories or restrictions above is available under the "AGPLv3" license as defined below.
 

apps/demo-react-native/.env.example

@@ -0,0 +1,2 @@
+EXPO_PUBLIC_APP_URL=http://192.168.0.197:3000
+EXPO_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=cm5p0cs7r000819182b32j0a1

apps/demo-react-native/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  extends: ["@formbricks/eslint-config/react.js"],
+  parserOptions: {
+    project: "tsconfig.json",
+    tsconfigRootDir: __dirname,
+  },
+};

apps/demo-react-native/.gitignore

@@ -0,0 +1,35 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo

apps/demo-react-native/app.json

@@ -0,0 +1,35 @@
+{
+  "expo": {
+    "android": {
+      "adaptiveIcon": {
+        "backgroundColor": "#ffffff",
+        "foregroundImage": "./assets/adaptive-icon.png"
+      }
+    },
+    "assetBundlePatterns": ["**/*"],
+    "icon": "./assets/icon.png",
+    "ios": {
+      "infoPlist": {
+        "NSCameraUsageDescription": "Take pictures for certain activities.",
+        "NSMicrophoneUsageDescription": "Need microphone access for recording videos.",
+        "NSPhotoLibraryUsageDescription": "Select pictures for certain activities."
+      },
+      "supportsTablet": true
+    },
+    "jsEngine": "hermes",
+    "name": "react-native-demo",
+    "newArchEnabled": true,
+    "orientation": "portrait",
+    "slug": "react-native-demo",
+    "splash": {
+      "backgroundColor": "#ffffff",
+      "image": "./assets/splash.png",
+      "resizeMode": "contain"
+    },
+    "userInterfaceStyle": "light",
+    "version": "1.0.0",
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

apps/demo-react-native/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function babel(api) {
+  api.cache(true);
+  return {
+    presets: ["babel-preset-expo"],
+  };
+};

apps/demo-react-native/index.js

@@ -0,0 +1,7 @@
+import { registerRootComponent } from "expo";
+import { LogBox } from "react-native";
+import App from "./src/app";
+
+registerRootComponent(App);
+
+LogBox.ignoreAllLogs();

apps/demo-react-native/metro.config.js

@@ -0,0 +1,21 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+const path = require("node:path");
+const { getDefaultConfig } = require("expo/metro-config");
+
+// Find the workspace root, this can be replaced with `find-yarn-workspace-root`
+const workspaceRoot = path.resolve(__dirname, "../..");
+const projectRoot = __dirname;
+
+const config = getDefaultConfig(projectRoot);
+
+// 1. Watch all files within the monorepo
+config.watchFolders = [workspaceRoot];
+// 2. Let Metro know where to resolve packages, and in what order
+config.resolver.nodeModulesPaths = [
+  path.resolve(projectRoot, "node_modules"),
+  path.resolve(workspaceRoot, "node_modules"),
+];
+// 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
+config.resolver.disableHierarchicalLookup = true;
+
+module.exports = config;

apps/demo-react-native/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@formbricks/demo-react-native",
+  "version": "1.0.0",
+  "main": "./index.js",
+  "scripts": {
+    "dev": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject",
+    "clean": "rimraf .turbo node_modules .expo"
+  },
+  "dependencies": {
+    "@formbricks/js": "workspace:*",
+    "@formbricks/react-native": "workspace:*",
+    "@react-native-async-storage/async-storage": "2.1.0",
+    "expo": "52.0.28",
+    "expo-status-bar": "2.0.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.6",
+    "react-native-webview": "13.12.5"
+  },
+  "devDependencies": {
+    "@babel/core": "7.26.0",
+    "@types/react": "18.3.18",
+    "typescript": "5.7.2"
+  },
+  "private": true
+}

apps/demo-react-native/src/app.tsx

@@ -0,0 +1,117 @@
+import { StatusBar } from "expo-status-bar";
+import React, { type JSX } from "react";
+import { Button, LogBox, StyleSheet, Text, View } from "react-native";
+import Formbricks, {
+  logout,
+  setAttribute,
+  setAttributes,
+  setLanguage,
+  setUserId,
+  track,
+} from "@formbricks/react-native";
+
+LogBox.ignoreAllLogs();
+
+export default function App(): JSX.Element {
+  if (!process.env.EXPO_PUBLIC_FORMBRICKS_ENVIRONMENT_ID) {
+    throw new Error("EXPO_PUBLIC_FORMBRICKS_ENVIRONMENT_ID is required");
+  }
+
+  if (!process.env.EXPO_PUBLIC_APP_URL) {
+    throw new Error("EXPO_PUBLIC_APP_URL is required");
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text>Formbricks React Native SDK Demo</Text>
+
+      <View
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 10,
+        }}>
+        <Button
+          title="Trigger Code Action"
+          onPress={() => {
+            track("code").catch((error: unknown) => {
+              // eslint-disable-next-line no-console -- logging is allowed in demo apps
+              console.error("Error tracking event:", error);
+            });
+          }}
+        />
+
+        <Button
+          title="Set User Id"
+          onPress={() => {
+            setUserId("random-user-id").catch((error: unknown) => {
+              // eslint-disable-next-line no-console -- logging is allowed in demo apps
+              console.error("Error setting user id:", error);
+            });
+          }}
+        />
+
+        <Button
+          title="Set User Attributess (multiple)"
+          onPress={() => {
+            setAttributes({
+              testAttr: "attr-test",
+              testAttr2: "attr-test-2",
+              testAttr3: "attr-test-3",
+              testAttr4: "attr-test-4",
+            }).catch((error: unknown) => {
+              // eslint-disable-next-line no-console -- logging is allowed in demo apps
+              console.error("Error setting user attributes:", error);
+            });
+          }}
+        />
+
+        <Button
+          title="Set User Attributes (single)"
+          onPress={() => {
+            setAttribute("testSingleAttr", "testSingleAttr").catch((error: unknown) => {
+              // eslint-disable-next-line no-console -- logging is allowed in demo apps
+              console.error("Error setting user attributes:", error);
+            });
+          }}
+        />
+
+        <Button
+          title="Logout"
+          onPress={() => {
+            logout().catch((error: unknown) => {
+              // eslint-disable-next-line no-console -- logging is allowed in demo apps
+              console.error("Error logging out:", error);
+            });
+          }}
+        />
+
+        <Button
+          title="Set Language (de)"
+          onPress={() => {
+            setLanguage("de").catch((error: unknown) => {
+              // eslint-disable-next-line no-console -- logging is allowed in demo apps
+              console.error("Error setting language:", error);
+            });
+          }}
+        />
+      </View>
+
+      <StatusBar style="auto" />
+
+      <Formbricks
+        appUrl={process.env.EXPO_PUBLIC_APP_URL as string}
+        environmentId={process.env.EXPO_PUBLIC_FORMBRICKS_ENVIRONMENT_ID as string}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

apps/demo-react-native/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "strict": true
+  },
+  "extends": "expo/tsconfig.base"
+}

apps/demo/.env.example

@@ -0,0 +1,5 @@
+NEXT_PUBLIC_FORMBRICKS_API_HOST=http://localhost:3000
+NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=YOUR_ENVIRONMENT_ID
+
+# Copy the environment ID for the URL of your Formbricks App and
+# paste it above to connect your Formbricks App with the Demo App.

apps/demo/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  extends: ["@formbricks/eslint-config/next.js"],
+  parserOptions: {
+    project: "tsconfig.json",
+    tsconfigRootDir: __dirname,
+  },
+};

apps/demo/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/demo/components/layout-app.tsx

@@ -0,0 +1,13 @@
+import { Sidebar } from "./sidebar";
+
+export function LayoutApp({ children }: { children: React.ReactNode }): React.JSX.Element {
+  return (
+    <div className="min-h-full">
+      {/* Static sidebar for desktop */}
+      <div className="hidden lg:fixed lg:inset-y-0 lg:flex lg:w-64 lg:flex-col">
+        <Sidebar />
+      </div>
+      <div className="flex flex-1 flex-col lg:pl-64">{children}</div>
+    </div>
+  );
+}

apps/demo/components/sidebar.tsx

@@ -0,0 +1,65 @@
+import {
+  ClockIcon,
+  CogIcon,
+  CreditCardIcon,
+  FileBarChartIcon,
+  HelpCircleIcon,
+  HomeIcon,
+  ScaleIcon,
+  ShieldCheckIcon,
+  UsersIcon,
+} from "lucide-react";
+import { classNames } from "../lib/utils";
+
+const navigation = [
+  { name: "Home", href: "#", icon: HomeIcon, current: true },
+  { name: "History", href: "#", icon: ClockIcon, current: false },
+  { name: "Balances", href: "#", icon: ScaleIcon, current: false },
+  { name: "Cards", href: "#", icon: CreditCardIcon, current: false },
+  { name: "Recipients", href: "#", icon: UsersIcon, current: false },
+  { name: "Reports", href: "#", icon: FileBarChartIcon, current: false },
+];
+const secondaryNavigation = [
+  { name: "Settings", href: "#", icon: CogIcon },
+  { name: "Help", href: "#", icon: HelpCircleIcon },
+  { name: "Privacy", href: "#", icon: ShieldCheckIcon },
+];
+
+export function Sidebar(): React.JSX.Element {
+  return (
+    <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">
+        <div className="space-y-1 px-2">
+          {navigation.map((item) => (
+            <a
+              key={item.name}
+              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 leading-6 font-medium"
+              )}
+              aria-current={item.current ? "page" : undefined}>
+              <item.icon className="mr-4 h-6 w-6 shrink-0 text-cyan-200" aria-hidden="true" />
+              {item.name}
+            </a>
+          ))}
+        </div>
+        <div className="mt-6 pt-6">
+          <div className="space-y-1 px-2">
+            {secondaryNavigation.map((item) => (
+              <a
+                key={item.name}
+                href={item.href}
+                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>
+            ))}
+          </div>
+        </div>
+      </nav>
+    </div>
+  );
+}

apps/demo/globals.css

@@ -0,0 +1,23 @@
+@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/lib/utils.ts

@@ -0,0 +1,3 @@
+export function classNames(...classes: string[]): string {
+  return classes.filter(Boolean).join(" ");
+}

apps/demo/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

apps/demo/next.config.mjs

@@ -0,0 +1,17 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "tailwindui.com",
+      },
+      {
+        protocol: "https",
+        hostname: "images.unsplash.com",
+      },
+    ],
+  },
+};
+
+export default nextConfig;

apps/demo/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@formbricks/demo",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "clean": "rimraf .turbo node_modules .next",
+    "dev": "next dev -p 3002 --turbopack",
+    "go": "next dev -p 3002 --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@formbricks/js": "workspace:*",
+    "@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:*",
+    "@formbricks/eslint-config": "workspace:*"
+  }
+}

apps/demo/pages/_app.tsx

@@ -0,0 +1,20 @@
+import type { AppProps } from "next/app";
+import Head from "next/head";
+import "../globals.css";
+
+export default function App({ Component, pageProps }: AppProps): React.JSX.Element {
+  return (
+    <>
+      <Head>
+        <title>Demo App</title>
+      </Head>
+      {(!process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID ||
+        !process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) && (
+        <div className="w-full bg-red-500 p-3 text-center text-sm text-white">
+          Please set Formbricks environment variables in apps/demo/.env
+        </div>
+      )}
+      <Component {...pageProps} />
+    </>
+  );
+}

apps/demo/pages/_document.tsx

@@ -0,0 +1,13 @@
+import { Head, Html, Main, NextScript } from "next/document";
+
+export default function Document(): React.JSX.Element {
+  return (
+    <Html lang="en" className="h-full bg-slate-50">
+      <Head />
+      <body className="h-full">
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

apps/demo/pages/index.tsx

@@ -0,0 +1,359 @@
+import Image from "next/image";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import formbricks from "@formbricks/js";
+import fbsetup from "../public/fb-setup.png";
+
+declare const window: Window;
+
+export default function AppPage(): React.JSX.Element {
+  const [darkMode, setDarkMode] = useState(false);
+  const router = useRouter();
+  const userId = "THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING";
+  const userAttributes = {
+    "Attribute 1": "one",
+    "Attribute 2": "two",
+    "Attribute 3": "three",
+  };
+
+  useEffect(() => {
+    if (darkMode) {
+      document.body.classList.add("dark");
+    } else {
+      document.body.classList.remove("dark");
+    }
+  }, [darkMode]);
+
+  useEffect(() => {
+    const initFormbricks = () => {
+      // enable Formbricks debug mode by adding formbricksDebug=true GET parameter
+      const addFormbricksDebugParam = (): void => {
+        const urlParams = new URLSearchParams(window.location.search);
+        if (!urlParams.has("formbricksDebug")) {
+          urlParams.set("formbricksDebug", "true");
+          const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
+          window.history.replaceState({}, "", newUrl);
+        }
+      };
+
+      addFormbricksDebugParam();
+
+      if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
+        void formbricks.setup({
+          environmentId: process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID,
+          appUrl: process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST,
+        });
+      }
+
+      // Connect next.js router to Formbricks
+      if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
+        const handleRouteChange = formbricks.registerRouteChange;
+
+        router.events.on("routeChangeComplete", () => {
+          void handleRouteChange();
+        });
+
+        return () => {
+          router.events.off("routeChangeComplete", () => {
+            void handleRouteChange();
+          });
+        };
+      }
+    };
+
+    initFormbricks();
+  }, [router.events]);
+
+  return (
+    <div className="min-h-screen bg-white px-12 py-6 dark:bg-slate-800">
+      <div className="flex flex-col justify-between md:flex-row">
+        <div className="flex flex-col items-center gap-2 sm:flex-row">
+          <div>
+            <h1 className="text-2xl font-bold text-slate-900 dark:text-white">
+              Formbricks In-product Survey Demo App
+            </h1>
+            <p className="text-slate-700 dark:text-slate-300">
+              This app helps you test your app surveys. You can create and test user actions, create and
+              update user attributes, etc.
+            </p>
+          </div>
+        </div>
+
+        <button
+          type="button"
+          className="mt-2 rounded-lg bg-slate-200 px-6 py-1 dark:bg-slate-700 dark:text-slate-100"
+          onClick={() => {
+            setDarkMode(!darkMode);
+          }}>
+          {darkMode ? "Toggle Light Mode" : "Toggle Dark Mode"}
+        </button>
+      </div>
+
+      <div className="my-4 grid grid-cols-1 gap-6 md:grid-cols-2">
+        <div>
+          <div className="rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-slate-600 dark:bg-slate-900">
+            <h3 className="text-lg font-semibold text-slate-900 dark:text-white">1. Setup .env</h3>
+            <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-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: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}
+                </strong>
+                <span className="relative ml-2 flex h-3 w-3">
+                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-500 opacity-75" />
+                  <span className="relative inline-flex h-3 w-3 rounded-full bg-green-500" />
+                </span>
+              </div>
+            </div>
+          </div>
+          <div className="mt-4 rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-slate-600 dark:bg-slate-900">
+            <h3 className="text-lg font-semibold text-slate-900 dark:text-white">2. Widget Logs</h3>
+            <p className="text-slate-700 dark:text-slate-300">
+              Look at the logs to understand how the widget works.{" "}
+              <strong className="dark:text-white">Open your browser console</strong> to see the logs.
+            </p>
+          </div>
+        </div>
+
+        <div className="md:grid md:grid-cols-3">
+          <div className="col-span-3 self-start rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-slate-600 dark:bg-slate-900">
+            <h3 className="text-lg font-semibold dark:text-white">
+              Set a user ID / pull data from Formbricks app
+            </h3>
+            <p className="text-slate-700 dark:text-slate-300">
+              On formbricks.setUserId() the user state will <strong>be fetched from Formbricks</strong> and
+              the local state gets <strong>updated with the user state</strong>.
+            </p>
+            <button
+              className="my-4 rounded-lg bg-slate-500 px-6 py-3 text-white hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600"
+              type="button"
+              onClick={() => {
+                void formbricks.setUserId(userId);
+              }}>
+              Set user ID
+            </button>
+            <p className="text-xs text-slate-700 dark:text-slate-300">
+              If you made a change in Formbricks app and it does not seem to work, hit &apos;Reset&apos; and
+              try again.
+            </p>
+          </div>
+
+          <div className="p-6">
+            <div>
+              <button
+                type="button"
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600">
+                No-Code Action
+              </button>
+            </div>
+            <div>
+              <p className="text-xs text-slate-700 dark:text-slate-300">
+                This button sends a{" "}
+                <a
+                  href="https://formbricks.com/docs/xm-and-surveys/surveys/website-app-surveys/actions#setting-up-no-code-actions"
+                  rel="noopener noreferrer"
+                  className="underline dark:text-blue-500"
+                  target="_blank">
+                  No Code Action
+                </a>{" "}
+                as long as you created it beforehand in the Formbricks App.{" "}
+                <a
+                  href="https://formbricks.com/docs/xm-and-surveys/surveys/website-app-surveys/actions#setting-up-no-code-actions"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  className="underline dark:text-blue-500">
+                  Here are instructions on how to do it.
+                </a>
+              </p>
+            </div>
+          </div>
+
+          <div className="p-6">
+            <div>
+              <button
+                type="button"
+                onClick={() => {
+                  void formbricks.setAttribute("Plan", "Free");
+                }}
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600">
+                Set Plan to &apos;Free&apos;
+              </button>
+            </div>
+            <div>
+              <p className="text-xs text-slate-700 dark:text-slate-300">
+                This button sets the{" "}
+                <a
+                  href="https://formbricks.com/docs/xm-and-surveys/surveys/website-app-surveys/user-identification#setting-custom-user-attributes"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="underline dark:text-blue-500">
+                  attribute
+                </a>{" "}
+                &apos;Plan&apos; to &apos;Free&apos;. If the attribute does not exist, it creates it.
+              </p>
+            </div>
+          </div>
+          <div className="p-6">
+            <div>
+              <button
+                type="button"
+                onClick={() => {
+                  void formbricks.setAttribute("Plan", "Paid");
+                }}
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600">
+                Set Plan to &apos;Paid&apos;
+              </button>
+            </div>
+            <div>
+              <p className="text-xs text-slate-700 dark:text-slate-300">
+                This button sets the{" "}
+                <a
+                  href="https://formbricks.com/docs/xm-and-surveys/surveys/website-app-surveys/user-identification#setting-custom-user-attributes"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="underline dark:text-blue-500">
+                  attribute
+                </a>{" "}
+                &apos;Plan&apos; to &apos;Paid&apos;. If the attribute does not exist, it creates it.
+              </p>
+            </div>
+          </div>
+          <div className="p-6">
+            <div>
+              <button
+                type="button"
+                onClick={() => {
+                  void formbricks.setEmail("test@web.com");
+                }}
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600">
+                Set Email
+              </button>
+            </div>
+            <div>
+              <p className="text-xs text-slate-700 dark:text-slate-300">
+                This button sets the{" "}
+                <a
+                  href="https://formbricks.com/docs/xm-and-surveys/surveys/website-app-surveys/user-identification"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="underline dark:text-blue-500">
+                  user email
+                </a>{" "}
+                &apos;test@web.com&apos;
+              </p>
+            </div>
+          </div>
+
+          <div className="p-6">
+            <div>
+              <button
+                type="button"
+                onClick={() => {
+                  void formbricks.setAttributes(userAttributes);
+                }}
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600">
+                Set Multiple Attributes
+              </button>
+            </div>
+            <div>
+              <p className="text-xs text-slate-700 dark:text-slate-300">
+                This button sets the{" "}
+                <a
+                  href="https://formbricks.com/docs/xm-and-surveys/surveys/website-app-surveys/user-identification#setting-custom-user-attributes"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="underline dark:text-blue-500">
+                  user attributes
+                </a>{" "}
+                to &apos;one&apos;, &apos;two&apos;, &apos;three&apos;.
+              </p>
+            </div>
+          </div>
+
+          <div className="p-6">
+            <div>
+              <button
+                type="button"
+                onClick={() => {
+                  void formbricks.setLanguage("de");
+                }}
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600">
+                Set Language to &apos;de&apos;
+              </button>
+            </div>
+            <div>
+              <p className="text-xs text-slate-700 dark:text-slate-300">
+                This button sets the{" "}
+                <a
+                  href="https://formbricks.com/docs/xm-and-surveys/surveys/general-features/multi-language-surveys"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="underline dark:text-blue-500">
+                  language
+                </a>{" "}
+                to &apos;de&apos;.
+              </p>
+            </div>
+          </div>
+
+          <div className="p-6">
+            <div>
+              <button
+                type="button"
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600"
+                onClick={() => {
+                  void formbricks.track("code");
+                }}>
+                Code Action
+              </button>
+            </div>
+            <div>
+              <p className="text-xs text-slate-700 dark:text-slate-300">
+                This button sends a{" "}
+                <a
+                  href="https://formbricks.com/docs/xm-and-surveys/surveys/website-app-surveys/actions#setting-up-code-actions"
+                  rel="noopener noreferrer"
+                  className="underline dark:text-blue-500"
+                  target="_blank">
+                  Code Action
+                </a>{" "}
+                as long as you created it beforehand in the Formbricks App.{" "}
+                <a
+                  href="https://formbricks.com/docs/xm-and-surveys/surveys/website-app-surveys/actions#setting-up-code-actions"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  className="underline dark:text-blue-500">
+                  Here are instructions on how to do it.
+                </a>
+              </p>
+            </div>
+          </div>
+
+          <div className="p-6">
+            <div>
+              <button
+                type="button"
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600"
+                onClick={() => {
+                  void formbricks.logout();
+                }}>
+                Logout
+              </button>
+            </div>
+            <div>
+              <p className="text-xs text-slate-700 dark:text-slate-300">
+                This button logs out the user and syncs the local state with Formbricks. (Only works if a
+                userId is set)
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/demo/postcss.config.js

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

apps/demo/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

apps/demo/public/thirteen.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="31" fill="none"><g opacity=".9"><path fill="url(#a)" d="M13 .4v29.3H7V6.3h-.2L0 10.5V5L7.2.4H13Z"/><path fill="url(#b)" d="M28.8 30.1c-2.2 0-4-.3-5.7-1-1.7-.8-3-1.8-4-3.1a7.7 7.7 0 0 1-1.4-4.6h6.2c0 .8.3 1.4.7 2 .4.5 1 .9 1.7 1.2.7.3 1.6.4 2.5.4 1 0 1.7-.2 2.5-.5.7-.3 1.3-.8 1.7-1.4.4-.6.6-1.2.6-2s-.2-1.5-.7-2.1c-.4-.6-1-1-1.8-1.4-.8-.4-1.8-.5-2.9-.5h-2.7v-4.6h2.7a6 6 0 0 0 2.5-.5 4 4 0 0 0 1.7-1.3c.4-.6.6-1.3.6-2a3.5 3.5 0 0 0-2-3.3 5.6 5.6 0 0 0-4.5 0 4 4 0 0 0-1.7 1.2c-.4.6-.6 1.2-.6 2h-6c0-1.7.6-3.2 1.5-4.5 1-1.3 2.2-2.3 3.8-3C25 .4 26.8 0 28.8 0s3.8.4 5.3 1.1c1.5.7 2.7 1.7 3.6 3a7.2 7.2 0 0 1 1.2 4.2c0 1.6-.5 3-1.5 4a7 7 0 0 1-4 2.2v.2c2.2.3 3.8 1 5 2.2a6.4 6.4 0 0 1 1.6 4.6c0 1.7-.5 3.1-1.4 4.4a9.7 9.7 0 0 1-4 3.1c-1.7.8-3.7 1.1-5.8 1.1Z"/></g><defs><linearGradient id="a" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient><linearGradient id="b" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient></defs></svg>

apps/demo/public/vercel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

apps/demo/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "exclude": ["node_modules"],
+  "extends": "@formbricks/config-typescript/nextjs.json",
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+}

apps/storybook/package.json

@@ -11,10 +11,13 @@
     "clean": "rimraf .turbo node_modules dist storybook-static"
   },
   "dependencies": {
-    "eslint-plugin-react-refresh": "0.4.20"
+    "eslint-plugin-react-refresh": "0.4.19",
+    "react": "19.1.0",
+    "react-dom": "19.1.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "3.2.6",
+    "@formbricks/config-typescript": "workspace:*",
     "@storybook/addon-a11y": "8.6.12",
     "@storybook/addon-essentials": "8.6.12",
     "@storybook/addon-interactions": "8.6.12",
@@ -24,13 +27,14 @@
     "@storybook/react": "8.6.12",
     "@storybook/react-vite": "8.6.12",
     "@storybook/test": "8.6.12",
-    "@typescript-eslint/eslint-plugin": "8.32.0",
-    "@typescript-eslint/parser": "8.32.0",
-    "@vitejs/plugin-react": "4.4.1",
-    "esbuild": "0.25.4",
+    "@typescript-eslint/eslint-plugin": "8.29.1",
+    "@typescript-eslint/parser": "8.29.1",
+    "@vitejs/plugin-react": "4.3.4",
+    "esbuild": "0.25.2",
     "eslint-plugin-storybook": "0.12.0",
     "prop-types": "15.8.1",
     "storybook": "8.6.12",
-    "vite": "6.3.5"
+    "tsup": "8.4.0",
+    "vite": "6.2.5"
   }
 }

apps/web/.eslintrc.js

@@ -3,13 +3,13 @@ module.exports = {
   ignorePatterns: ["**/package.json", "**/tsconfig.json"],
   overrides: [
     {
-      files: ["locales/*.json"],
+      files: ["lib/messages/**/*.json"],
       plugins: ["i18n-json"],
       rules: {
         "i18n-json/identical-keys": [
           "error",
           {
-            filePath: require("path").join(__dirname, "locales", "en-US.json"),
+            filePath: require("path").join(__dirname, "messages", "en-US.json"),
             checkExtraKeys: false,
             checkMissingKeys: true,
           },

apps/web/Dockerfile

@@ -18,9 +18,8 @@ FROM node:22-alpine3.21 AS base
 FROM base AS installer
 
 # Enable corepack and prepare pnpm
-RUN npm install --ignore-scripts -g corepack@latest 
+RUN npm install -g corepack@latest
 RUN corepack enable
-RUN corepack prepare pnpm@9.15.9 --activate
 
 # Install necessary build tools and compilers
 RUN apk update && apk add --no-cache cmake g++ gcc jq make openssl-dev python3
@@ -60,7 +59,7 @@ COPY . .
 RUN touch apps/web/.env
 
 # Install the dependencies
-RUN pnpm install --ignore-scripts
+RUN pnpm install
 
 # Build the project using our secret reader script
 # This mounts the secrets only during this build step without storing them in layers
@@ -76,7 +75,7 @@ RUN jq -r '.devDependencies.prisma' packages/database/package.json > /prisma_ver
 #
 FROM base AS runner
 
-RUN npm install --ignore-scripts -g corepack@latest 
+RUN npm install -g corepack@latest
 RUN corepack enable
 
 RUN apk add --no-cache curl \
@@ -142,13 +141,12 @@ 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 --ignore-scripts -g tsx typescript pino-pretty 
-RUN npm install -g prisma
+RUN npm install -g tsx typescript prisma pino-pretty
 
 EXPOSE 3000
 ENV HOSTNAME "0.0.0.0"
 ENV NODE_ENV="production"
-USER nextjs
+# USER nextjs
 
 # Prepare volume for uploads
 RUN mkdir -p /home/nextjs/apps/web/uploads/

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

@@ -1,79 +0,0 @@
-import "@testing-library/jest-dom/vitest";
-import { cleanup, render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { afterEach, describe, expect, test, vi } from "vitest";
-import { ConnectWithFormbricks } from "./ConnectWithFormbricks";
-
-// Mocks before import
-const pushMock = vi.fn();
-const refreshMock = vi.fn();
-vi.mock("@tolgee/react", () => ({ useTranslate: () => ({ t: (key: string) => key }) }));
-vi.mock("next/navigation", () => ({ useRouter: vi.fn(() => ({ push: pushMock, refresh: refreshMock })) }));
-vi.mock("./OnboardingSetupInstructions", () => ({
-  OnboardingSetupInstructions: () => <div data-testid="instructions" />,
-}));
-
-afterEach(() => {
-  cleanup();
-  vi.clearAllMocks();
-});
-
-describe("ConnectWithFormbricks", () => {
-  const environment = { id: "env1" } as any;
-  const webAppUrl = "http://app";
-  const channel = {} as any;
-
-  test("renders waiting state when widgetSetupCompleted is false", () => {
-    render(
-      <ConnectWithFormbricks
-        environment={environment}
-        webAppUrl={webAppUrl}
-        widgetSetupCompleted={false}
-        channel={channel}
-      />
-    );
-    expect(screen.getByTestId("instructions")).toBeInTheDocument();
-    expect(screen.getByText("environments.connect.waiting_for_your_signal")).toBeInTheDocument();
-  });
-
-  test("renders success state when widgetSetupCompleted is true", () => {
-    render(
-      <ConnectWithFormbricks
-        environment={environment}
-        webAppUrl={webAppUrl}
-        widgetSetupCompleted={true}
-        channel={channel}
-      />
-    );
-    expect(screen.getByText("environments.connect.congrats")).toBeInTheDocument();
-    expect(screen.getByText("environments.connect.connection_successful_message")).toBeInTheDocument();
-  });
-
-  test("clicking finish button navigates to surveys", async () => {
-    render(
-      <ConnectWithFormbricks
-        environment={environment}
-        webAppUrl={webAppUrl}
-        widgetSetupCompleted={true}
-        channel={channel}
-      />
-    );
-    const button = screen.getByRole("button", { name: "environments.connect.finish_onboarding" });
-    await userEvent.click(button);
-    expect(pushMock).toHaveBeenCalledWith(`/environments/${environment.id}/surveys`);
-  });
-
-  test("refresh is called on visibilitychange to visible", () => {
-    render(
-      <ConnectWithFormbricks
-        environment={environment}
-        webAppUrl={webAppUrl}
-        widgetSetupCompleted={false}
-        channel={channel}
-      />
-    );
-    Object.defineProperty(document, "visibilityState", { value: "visible", configurable: true });
-    document.dispatchEvent(new Event("visibilitychange"));
-    expect(refreshMock).toHaveBeenCalled();
-  });
-});

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]/layout.test.tsx

@@ -1,145 +0,0 @@
-import { hasUserEnvironmentAccess } from "@/lib/environment/auth";
-import { cleanup, render, screen } from "@testing-library/react";
-import { getServerSession } from "next-auth";
-import { redirect } from "next/navigation";
-import { afterEach, describe, expect, test, vi } from "vitest";
-import OnboardingLayout from "./layout";
-
-vi.mock("@/lib/constants", () => ({
-  IS_FORMBRICKS_CLOUD: false,
-  IS_PRODUCTION: false,
-  IS_DEVELOPMENT: true,
-  E2E_TESTING: false,
-  WEBAPP_URL: "http://localhost:3000",
-  SURVEY_URL: "http://localhost:3000/survey",
-  ENCRYPTION_KEY: "mock-encryption-key",
-  CRON_SECRET: "mock-cron-secret",
-  DEFAULT_BRAND_COLOR: "#64748b",
-  FB_LOGO_URL: "https://mock-logo-url.com/logo.png",
-  PRIVACY_URL: "http://localhost:3000/privacy",
-  TERMS_URL: "http://localhost:3000/terms",
-  IMPRINT_URL: "http://localhost:3000/imprint",
-  IMPRINT_ADDRESS: "Mock Address",
-  PASSWORD_RESET_DISABLED: false,
-  EMAIL_VERIFICATION_DISABLED: false,
-  GOOGLE_OAUTH_ENABLED: false,
-  GITHUB_OAUTH_ENABLED: false,
-  AZURE_OAUTH_ENABLED: false,
-  OIDC_OAUTH_ENABLED: false,
-  SAML_OAUTH_ENABLED: false,
-  SAML_XML_DIR: "./mock-saml-connection",
-  SIGNUP_ENABLED: true,
-  EMAIL_AUTH_ENABLED: true,
-  INVITE_DISABLED: false,
-  SLACK_CLIENT_SECRET: "mock-slack-secret",
-  SLACK_CLIENT_ID: "mock-slack-id",
-  SLACK_AUTH_URL: "https://mock-slack-auth-url.com",
-  GOOGLE_SHEETS_CLIENT_ID: "mock-google-sheets-id",
-  GOOGLE_SHEETS_CLIENT_SECRET: "mock-google-sheets-secret",
-  GOOGLE_SHEETS_REDIRECT_URL: "http://localhost:3000/google-sheets-redirect",
-  NOTION_OAUTH_CLIENT_ID: "mock-notion-id",
-  NOTION_OAUTH_CLIENT_SECRET: "mock-notion-secret",
-  NOTION_REDIRECT_URI: "http://localhost:3000/notion-redirect",
-  NOTION_AUTH_URL: "https://mock-notion-auth-url.com",
-  AIRTABLE_CLIENT_ID: "mock-airtable-id",
-  SMTP_HOST: "mock-smtp-host",
-  SMTP_PORT: "587",
-  SMTP_SECURE_ENABLED: false,
-  SMTP_USER: "mock-smtp-user",
-  SMTP_PASSWORD: "mock-smtp-password",
-  SMTP_AUTHENTICATED: true,
-  SMTP_REJECT_UNAUTHORIZED_TLS: true,
-  MAIL_FROM: "mock@mail.com",
-  MAIL_FROM_NAME: "Mock Mail",
-  NEXTAUTH_SECRET: "mock-nextauth-secret",
-  ITEMS_PER_PAGE: 30,
-  SURVEYS_PER_PAGE: 12,
-  RESPONSES_PER_PAGE: 25,
-  TEXT_RESPONSES_PER_PAGE: 5,
-  INSIGHTS_PER_PAGE: 10,
-  DOCUMENTS_PER_PAGE: 10,
-  MAX_RESPONSES_FOR_INSIGHT_GENERATION: 500,
-  MAX_OTHER_OPTION_LENGTH: 250,
-  ENTERPRISE_LICENSE_KEY: "ABC",
-  GITHUB_ID: "mock-github-id",
-  GITHUB_SECRET: "mock-github-secret",
-  GITHUB_OAUTH_URL: "https://mock-github-auth-url.com",
-  AZURE_ID: "mock-azure-id",
-  AZUREAD_CLIENT_ID: "mock-azure-client-id",
-  AZUREAD_CLIENT_SECRET: "mock-azure-client-secret",
-  GOOGLE_CLIENT_ID: "mock-google-client-id",
-  GOOGLE_CLIENT_SECRET: "mock-google-client-secret",
-  GOOGLE_OAUTH_URL: "https://mock-google-auth-url.com",
-  AZURE_OAUTH_URL: "https://mock-azure-auth-url.com",
-  OIDC_ID: "mock-oidc-id",
-  OIDC_OAUTH_URL: "https://mock-oidc-auth-url.com",
-  SAML_ID: "mock-saml-id",
-  SAML_OAUTH_URL: "https://mock-saml-auth-url.com",
-  SAML_METADATA_URL: "https://mock-saml-metadata-url.com",
-  AZUREAD_TENANT_ID: "mock-azure-tenant-id",
-  AZUREAD_OAUTH_URL: "https://mock-azuread-auth-url.com",
-  OIDC_DISPLAY_NAME: "Mock OIDC",
-  OIDC_CLIENT_ID: "mock-oidc-client-id",
-  OIDC_CLIENT_SECRET: "mock-oidc-client-secret",
-  OIDC_REDIRECT_URL: "http://localhost:3000/oidc-redirect",
-  OIDC_AUTH_URL: "https://mock-oidc-auth-url.com",
-  OIDC_ISSUER: "https://mock-oidc-issuer.com",
-  OIDC_SIGNING_ALGORITHM: "RS256",
-  SESSION_MAX_AGE: 1000,
-}));
-
-vi.mock("next/navigation", () => ({
-  redirect: vi.fn(),
-}));
-
-vi.mock("next-auth", () => ({
-  getServerSession: vi.fn(),
-}));
-
-vi.mock("@/lib/environment/auth", () => ({
-  hasUserEnvironmentAccess: vi.fn(),
-}));
-
-describe("OnboardingLayout", () => {
-  afterEach(() => {
-    cleanup();
-    vi.clearAllMocks();
-  });
-
-  test("redirects to login if session is missing", async () => {
-    vi.mocked(getServerSession).mockResolvedValueOnce(null);
-
-    await OnboardingLayout({
-      params: { environmentId: "env1" },
-      children: <div>Test Content</div>,
-    });
-
-    expect(redirect).toHaveBeenCalledWith("/auth/login");
-  });
-
-  test("throws AuthorizationError if user lacks access", async () => {
-    vi.mocked(getServerSession).mockResolvedValueOnce({ user: { id: "user1" } });
-    vi.mocked(hasUserEnvironmentAccess).mockResolvedValueOnce(false);
-
-    await expect(
-      OnboardingLayout({
-        params: { environmentId: "env1" },
-        children: <div>Test Content</div>,
-      })
-    ).rejects.toThrow("User is not authorized to access this environment");
-  });
-
-  test("renders children if user has access", async () => {
-    vi.mocked(getServerSession).mockResolvedValueOnce({ user: { id: "user1" } });
-    vi.mocked(hasUserEnvironmentAccess).mockResolvedValueOnce(true);
-
-    const result = await OnboardingLayout({
-      params: { environmentId: "env1" },
-      children: <div data-testid="child">Test Content</div>,
-    });
-
-    render(result);
-
-    expect(screen.getByTestId("child")).toHaveTextContent("Test Content");
-  });
-});

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

@@ -16,7 +16,7 @@ const OnboardingLayout = async (props) => {
 
   const isAuthorized = await hasUserEnvironmentAccess(session.user.id, params.environmentId);
   if (!isAuthorized) {
-    throw new AuthorizationError("User is not authorized to access this environment");
+    throw AuthorizationError;
   }
 
   return <div className="flex-1 bg-slate-50">{children}</div>;

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

@@ -1,76 +0,0 @@
-import { createSurveyAction } from "@/modules/survey/components/template-list/actions";
-import "@testing-library/jest-dom/vitest";
-import { cleanup, render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import toast from "react-hot-toast";
-import { afterEach, describe, expect, test, vi } from "vitest";
-import { XMTemplateList } from "./XMTemplateList";
-
-// Prepare push mock and module mocks before importing component
-const pushMock = vi.fn();
-vi.mock("@tolgee/react", () => ({ useTranslate: () => ({ t: (key: string) => key }) }));
-vi.mock("next/navigation", () => ({ useRouter: vi.fn(() => ({ push: pushMock })) }));
-vi.mock("react-hot-toast", () => ({ default: { error: vi.fn() } }));
-vi.mock("@/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/lib/xm-templates", () => ({
-  getXMTemplates: (t: any) => [
-    { id: 1, name: "tmpl1" },
-    { id: 2, name: "tmpl2" },
-  ],
-}));
-vi.mock("@/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/lib/utils", () => ({
-  replacePresetPlaceholders: (template: any, project: any) => ({ ...template, projectId: project.id }),
-}));
-vi.mock("@/modules/survey/components/template-list/actions", () => ({ createSurveyAction: vi.fn() }));
-vi.mock("@/lib/utils/helper", () => ({ getFormattedErrorMessage: () => "formatted-error" }));
-vi.mock("@/app/(app)/(onboarding)/organizations/components/OnboardingOptionsContainer", () => ({
-  OnboardingOptionsContainer: ({ options }: { options: any[] }) => (
-    <div>
-      {options.map((opt, idx) => (
-        <button key={idx} data-testid={`option-${idx}`} onClick={opt.onClick}>
-          {opt.title}
-        </button>
-      ))}
-    </div>
-  ),
-}));
-
-// Reset mocks between tests
-afterEach(() => {
-  cleanup();
-  vi.clearAllMocks();
-});
-
-describe("XMTemplateList component", () => {
-  const project = { id: "proj1" } as any;
-  const user = { id: "user1" } as any;
-  const environmentId = "env1";
-
-  test("creates survey and navigates on success", async () => {
-    // Mock successful survey creation
-    vi.mocked(createSurveyAction).mockResolvedValue({ data: { id: "survey1" } } as any);
-
-    render(<XMTemplateList project={project} user={user} environmentId={environmentId} />);
-
-    const option0 = screen.getByTestId("option-0");
-    await userEvent.click(option0);
-
-    expect(createSurveyAction).toHaveBeenCalledWith({
-      environmentId,
-      surveyBody: expect.objectContaining({ id: 1, projectId: "proj1", type: "link", createdBy: "user1" }),
-    });
-    expect(pushMock).toHaveBeenCalledWith(`/environments/${environmentId}/surveys/survey1/edit?mode=cx`);
-  });
-
-  test("shows error toast on failure", async () => {
-    // Mock failed survey creation
-    vi.mocked(createSurveyAction).mockResolvedValue({ error: "err" } as any);
-
-    render(<XMTemplateList project={project} user={user} environmentId={environmentId} />);
-
-    const option1 = screen.getByTestId("option-1");
-    await userEvent.click(option1);
-
-    expect(createSurveyAction).toHaveBeenCalled();
-    expect(toast.error).toHaveBeenCalledWith("formatted-error");
-  });
-});

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

@@ -1,80 +0,0 @@
-import "@testing-library/jest-dom/vitest";
-import { cleanup } from "@testing-library/react";
-import { afterEach, describe, expect, test } from "vitest";
-import { TProject } from "@formbricks/types/project";
-import { TXMTemplate } from "@formbricks/types/templates";
-import { replacePresetPlaceholders } from "./utils";
-
-// Mock data
-const mockProject: TProject = {
-  id: "project1",
-  createdAt: new Date(),
-  updatedAt: new Date(),
-  name: "Test Project",
-  organizationId: "org1",
-  styling: {
-    allowStyleOverwrite: true,
-    brandColor: { light: "#FFFFFF" },
-  },
-  recontactDays: 30,
-  inAppSurveyBranding: true,
-  linkSurveyBranding: true,
-  config: {
-    channel: "link" as const,
-    industry: "eCommerce" as "eCommerce" | "saas" | "other" | null,
-  },
-  placement: "bottomRight",
-  clickOutsideClose: true,
-  darkOverlay: false,
-  environments: [],
-  languages: [],
-  logo: null,
-};
-const mockTemplate: TXMTemplate = {
-  name: "$[projectName] Survey",
-  questions: [
-    {
-      id: "q1",
-      inputType: "text",
-      type: "email" as any,
-      headline: { default: "$[projectName] Question" },
-      required: false,
-      charLimit: { enabled: true, min: 400, max: 1000 },
-    },
-  ],
-  endings: [
-    {
-      id: "e1",
-      type: "endScreen",
-      headline: { default: "Thank you for completing the survey!" },
-    },
-  ],
-  styling: {
-    brandColor: { light: "#0000FF" },
-    questionColor: { light: "#00FF00" },
-    inputColor: { light: "#FF0000" },
-  },
-};
-
-describe("replacePresetPlaceholders", () => {
-  afterEach(() => {
-    cleanup();
-  });
-
-  test("replaces projectName placeholder in template name", () => {
-    const result = replacePresetPlaceholders(mockTemplate, mockProject);
-    expect(result.name).toBe("Test Project Survey");
-  });
-
-  test("replaces projectName placeholder in question headline", () => {
-    const result = replacePresetPlaceholders(mockTemplate, mockProject);
-    expect(result.questions[0].headline.default).toBe("Test Project Question");
-  });
-
-  test("returns a new object without mutating the original template", () => {
-    const originalTemplate = structuredClone(mockTemplate);
-    const result = replacePresetPlaceholders(mockTemplate, mockProject);
-    expect(result).not.toBe(mockTemplate);
-    expect(mockTemplate).toEqual(originalTemplate);
-  });
-});

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

@@ -1,60 +0,0 @@
-import "@testing-library/jest-dom/vitest";
-import { cleanup } from "@testing-library/preact";
-import { TFnType } from "@tolgee/react";
-import { afterEach, describe, expect, test, vi } from "vitest";
-import { getXMSurveyDefault, getXMTemplates } from "./xm-templates";
-
-vi.mock("@formbricks/logger", () => ({
-  logger: { error: vi.fn() },
-}));
-
-describe("xm-templates", () => {
-  afterEach(() => {
-    cleanup();
-  });
-
-  test("getXMSurveyDefault returns default survey template", () => {
-    const tMock = vi.fn((key) => key) as TFnType;
-    const result = getXMSurveyDefault(tMock);
-
-    expect(result).toEqual({
-      name: "",
-      endings: expect.any(Array),
-      questions: [],
-      styling: {
-        overwriteThemeStyling: true,
-      },
-    });
-    expect(result.endings).toHaveLength(1);
-  });
-
-  test("getXMTemplates returns all templates", () => {
-    const tMock = vi.fn((key) => key) as TFnType;
-    const result = getXMTemplates(tMock);
-
-    expect(result).toHaveLength(6);
-    expect(result[0].name).toBe("templates.nps_survey_name");
-    expect(result[1].name).toBe("templates.star_rating_survey_name");
-    expect(result[2].name).toBe("templates.csat_survey_name");
-    expect(result[3].name).toBe("templates.cess_survey_name");
-    expect(result[4].name).toBe("templates.smileys_survey_name");
-    expect(result[5].name).toBe("templates.enps_survey_name");
-  });
-
-  test("getXMTemplates handles errors gracefully", async () => {
-    const tMock = vi.fn(() => {
-      throw new Error("Test error");
-    }) as TFnType;
-
-    const result = getXMTemplates(tMock);
-
-    // Dynamically import the mocked logger
-    const { logger } = await import("@formbricks/logger");
-
-    expect(result).toEqual([]);
-    expect(logger.error).toHaveBeenCalledWith(
-      expect.any(Error),
-      "Unable to load XM templates, returning empty array"
-    );
-  });
-});

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

@@ -1,13 +1,8 @@
-import {
-  buildCTAQuestion,
-  buildNPSQuestion,
-  buildOpenTextQuestion,
-  buildRatingQuestion,
-  getDefaultEndingCard,
-} from "@/app/lib/survey-builder";
+import { getDefaultEndingCard } from "@/app/lib/templates";
 import { createId } from "@paralleldrive/cuid2";
 import { TFnType } from "@tolgee/react";
 import { logger } from "@formbricks/logger";
+import { TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
 import { TXMTemplate } from "@formbricks/types/templates";
 
 export const getXMSurveyDefault = (t: TFnType): TXMTemplate => {
@@ -31,26 +26,35 @@ const npsSurvey = (t: TFnType): TXMTemplate => {
     ...getXMSurveyDefault(t),
     name: t("templates.nps_survey_name"),
     questions: [
-      buildNPSQuestion({
-        headline: t("templates.nps_survey_question_1_headline"),
+      {
+        id: createId(),
+        type: TSurveyQuestionTypeEnum.NPS,
+        headline: { default: t("templates.nps_survey_question_1_headline") },
         required: true,
-        lowerLabel: t("templates.nps_survey_question_1_lower_label"),
-        upperLabel: t("templates.nps_survey_question_1_upper_label"),
+        lowerLabel: { default: t("templates.nps_survey_question_1_lower_label") },
+        upperLabel: { default: t("templates.nps_survey_question_1_upper_label") },
         isColorCodingEnabled: true,
-        t,
-      }),
-      buildOpenTextQuestion({
-        headline: t("templates.nps_survey_question_2_headline"),
+      },
+      {
+        id: createId(),
+        type: TSurveyQuestionTypeEnum.OpenText,
+        headline: { default: t("templates.nps_survey_question_2_headline") },
         required: false,
         inputType: "text",
-        t,
-      }),
-      buildOpenTextQuestion({
-        headline: t("templates.nps_survey_question_3_headline"),
+        charLimit: {
+          enabled: false,
+        },
+      },
+      {
+        id: createId(),
+        type: TSurveyQuestionTypeEnum.OpenText,
+        headline: { default: t("templates.nps_survey_question_3_headline") },
         required: false,
         inputType: "text",
-        t,
-      }),
+        charLimit: {
+          enabled: false,
+        },
+      },
     ],
   };
 };
@@ -63,8 +67,9 @@ const starRatingSurvey = (t: TFnType): TXMTemplate => {
     ...defaultSurvey,
     name: t("templates.star_rating_survey_name"),
     questions: [
-      buildRatingQuestion({
+      {
         id: reusableQuestionIds[0],
+        type: TSurveyQuestionTypeEnum.Rating,
         logic: [
           {
             id: createId(),
@@ -97,15 +102,16 @@ const starRatingSurvey = (t: TFnType): TXMTemplate => {
         ],
         range: 5,
         scale: "number",
-        headline: t("templates.star_rating_survey_question_1_headline"),
+        headline: { default: t("templates.star_rating_survey_question_1_headline") },
         required: true,
-        lowerLabel: t("templates.star_rating_survey_question_1_lower_label"),
-        upperLabel: t("templates.star_rating_survey_question_1_upper_label"),
-        t,
-      }),
-      buildCTAQuestion({
+        lowerLabel: { default: t("templates.star_rating_survey_question_1_lower_label") },
+        upperLabel: { default: t("templates.star_rating_survey_question_1_upper_label") },
+        isColorCodingEnabled: false,
+      },
+      {
         id: reusableQuestionIds[1],
-        html: t("templates.star_rating_survey_question_2_html"),
+        html: { default: t("templates.star_rating_survey_question_2_html") },
+        type: TSurveyQuestionTypeEnum.CTA,
         logic: [
           {
             id: createId(),
@@ -132,23 +138,25 @@ const starRatingSurvey = (t: TFnType): TXMTemplate => {
             ],
           },
         ],
-        headline: t("templates.star_rating_survey_question_2_headline"),
+        headline: { default: t("templates.star_rating_survey_question_2_headline") },
         required: true,
         buttonUrl: "https://formbricks.com/github",
-        buttonLabel: t("templates.star_rating_survey_question_2_button_label"),
+        buttonLabel: { default: t("templates.star_rating_survey_question_2_button_label") },
         buttonExternal: true,
-        t,
-      }),
-      buildOpenTextQuestion({
+      },
+      {
         id: reusableQuestionIds[2],
-        headline: t("templates.star_rating_survey_question_3_headline"),
+        type: TSurveyQuestionTypeEnum.OpenText,
+        headline: { default: t("templates.star_rating_survey_question_3_headline") },
         required: true,
-        subheader: t("templates.star_rating_survey_question_3_subheader"),
-        buttonLabel: t("templates.star_rating_survey_question_3_button_label"),
-        placeholder: t("templates.star_rating_survey_question_3_placeholder"),
+        subheader: { default: t("templates.star_rating_survey_question_3_subheader") },
+        buttonLabel: { default: t("templates.star_rating_survey_question_3_button_label") },
+        placeholder: { default: t("templates.star_rating_survey_question_3_placeholder") },
         inputType: "text",
-        t,
-      }),
+        charLimit: {
+          enabled: false,
+        },
+      },
     ],
   };
 };
@@ -161,8 +169,9 @@ const csatSurvey = (t: TFnType): TXMTemplate => {
     ...defaultSurvey,
     name: t("templates.csat_survey_name"),
     questions: [
-      buildRatingQuestion({
+      {
         id: reusableQuestionIds[0],
+        type: TSurveyQuestionTypeEnum.Rating,
         logic: [
           {
             id: createId(),
@@ -195,14 +204,15 @@ const csatSurvey = (t: TFnType): TXMTemplate => {
         ],
         range: 5,
         scale: "smiley",
-        headline: t("templates.csat_survey_question_1_headline"),
+        headline: { default: t("templates.csat_survey_question_1_headline") },
         required: true,
-        lowerLabel: t("templates.csat_survey_question_1_lower_label"),
-        upperLabel: t("templates.csat_survey_question_1_upper_label"),
-        t,
-      }),
-      buildOpenTextQuestion({
+        lowerLabel: { default: t("templates.csat_survey_question_1_lower_label") },
+        upperLabel: { default: t("templates.csat_survey_question_1_upper_label") },
+        isColorCodingEnabled: false,
+      },
+      {
         id: reusableQuestionIds[1],
+        type: TSurveyQuestionTypeEnum.OpenText,
         logic: [
           {
             id: createId(),
@@ -229,20 +239,25 @@ const csatSurvey = (t: TFnType): TXMTemplate => {
             ],
           },
         ],
-        headline: t("templates.csat_survey_question_2_headline"),
+        headline: { default: t("templates.csat_survey_question_2_headline") },
         required: false,
-        placeholder: t("templates.csat_survey_question_2_placeholder"),
+        placeholder: { default: t("templates.csat_survey_question_2_placeholder") },
         inputType: "text",
-        t,
-      }),
-      buildOpenTextQuestion({
+        charLimit: {
+          enabled: false,
+        },
+      },
+      {
         id: reusableQuestionIds[2],
-        headline: t("templates.csat_survey_question_3_headline"),
+        type: TSurveyQuestionTypeEnum.OpenText,
+        headline: { default: t("templates.csat_survey_question_3_headline") },
         required: false,
-        placeholder: t("templates.csat_survey_question_3_placeholder"),
+        placeholder: { default: t("templates.csat_survey_question_3_placeholder") },
         inputType: "text",
-        t,
-      }),
+        charLimit: {
+          enabled: false,
+        },
+      },
     ],
   };
 };
@@ -252,22 +267,28 @@ const cessSurvey = (t: TFnType): TXMTemplate => {
     ...getXMSurveyDefault(t),
     name: t("templates.cess_survey_name"),
     questions: [
-      buildRatingQuestion({
+      {
+        id: createId(),
+        type: TSurveyQuestionTypeEnum.Rating,
         range: 5,
         scale: "number",
-        headline: t("templates.cess_survey_question_1_headline"),
+        headline: { default: t("templates.cess_survey_question_1_headline") },
         required: true,
-        lowerLabel: t("templates.cess_survey_question_1_lower_label"),
-        upperLabel: t("templates.cess_survey_question_1_upper_label"),
-        t,
-      }),
-      buildOpenTextQuestion({
-        headline: t("templates.cess_survey_question_2_headline"),
+        lowerLabel: { default: t("templates.cess_survey_question_1_lower_label") },
+        upperLabel: { default: t("templates.cess_survey_question_1_upper_label") },
+        isColorCodingEnabled: false,
+      },
+      {
+        id: createId(),
+        type: TSurveyQuestionTypeEnum.OpenText,
+        headline: { default: t("templates.cess_survey_question_2_headline") },
         required: true,
-        placeholder: t("templates.cess_survey_question_2_placeholder"),
+        placeholder: { default: t("templates.cess_survey_question_2_placeholder") },
         inputType: "text",
-        t,
-      }),
+        charLimit: {
+          enabled: false,
+        },
+      },
     ],
   };
 };
@@ -280,8 +301,9 @@ const smileysRatingSurvey = (t: TFnType): TXMTemplate => {
     ...defaultSurvey,
     name: t("templates.smileys_survey_name"),
     questions: [
-      buildRatingQuestion({
+      {
         id: reusableQuestionIds[0],
+        type: TSurveyQuestionTypeEnum.Rating,
         logic: [
           {
             id: createId(),
@@ -314,15 +336,16 @@ const smileysRatingSurvey = (t: TFnType): TXMTemplate => {
         ],
         range: 5,
         scale: "smiley",
-        headline: t("templates.smileys_survey_question_1_headline"),
+        headline: { default: t("templates.smileys_survey_question_1_headline") },
         required: true,
-        lowerLabel: t("templates.smileys_survey_question_1_lower_label"),
-        upperLabel: t("templates.smileys_survey_question_1_upper_label"),
-        t,
-      }),
-      buildCTAQuestion({
+        lowerLabel: { default: t("templates.smileys_survey_question_1_lower_label") },
+        upperLabel: { default: t("templates.smileys_survey_question_1_upper_label") },
+        isColorCodingEnabled: false,
+      },
+      {
         id: reusableQuestionIds[1],
-        html: t("templates.smileys_survey_question_2_html"),
+        html: { default: t("templates.smileys_survey_question_2_html") },
+        type: TSurveyQuestionTypeEnum.CTA,
         logic: [
           {
             id: createId(),
@@ -349,23 +372,25 @@ const smileysRatingSurvey = (t: TFnType): TXMTemplate => {
             ],
           },
         ],
-        headline: t("templates.smileys_survey_question_2_headline"),
+        headline: { default: t("templates.smileys_survey_question_2_headline") },
         required: true,
         buttonUrl: "https://formbricks.com/github",
-        buttonLabel: t("templates.smileys_survey_question_2_button_label"),
+        buttonLabel: { default: t("templates.smileys_survey_question_2_button_label") },
         buttonExternal: true,
-        t,
-      }),
-      buildOpenTextQuestion({
+      },
+      {
         id: reusableQuestionIds[2],
-        headline: t("templates.smileys_survey_question_3_headline"),
+        type: TSurveyQuestionTypeEnum.OpenText,
+        headline: { default: t("templates.smileys_survey_question_3_headline") },
         required: true,
-        subheader: t("templates.smileys_survey_question_3_subheader"),
-        buttonLabel: t("templates.smileys_survey_question_3_button_label"),
-        placeholder: t("templates.smileys_survey_question_3_placeholder"),
+        subheader: { default: t("templates.smileys_survey_question_3_subheader") },
+        buttonLabel: { default: t("templates.smileys_survey_question_3_button_label") },
+        placeholder: { default: t("templates.smileys_survey_question_3_placeholder") },
         inputType: "text",
-        t,
-      }),
+        charLimit: {
+          enabled: false,
+        },
+      },
     ],
   };
 };
@@ -375,26 +400,37 @@ const enpsSurvey = (t: TFnType): TXMTemplate => {
     ...getXMSurveyDefault(t),
     name: t("templates.enps_survey_name"),
     questions: [
-      buildNPSQuestion({
-        headline: t("templates.enps_survey_question_1_headline"),
+      {
+        id: createId(),
+        type: TSurveyQuestionTypeEnum.NPS,
+        headline: {
+          default: t("templates.enps_survey_question_1_headline"),
+        },
         required: false,
-        lowerLabel: t("templates.enps_survey_question_1_lower_label"),
-        upperLabel: t("templates.enps_survey_question_1_upper_label"),
+        lowerLabel: { default: t("templates.enps_survey_question_1_lower_label") },
+        upperLabel: { default: t("templates.enps_survey_question_1_upper_label") },
         isColorCodingEnabled: true,
-        t,
-      }),
-      buildOpenTextQuestion({
-        headline: t("templates.enps_survey_question_2_headline"),
+      },
+      {
+        id: createId(),
+        type: TSurveyQuestionTypeEnum.OpenText,
+        headline: { default: t("templates.enps_survey_question_2_headline") },
         required: false,
         inputType: "text",
-        t,
-      }),
-      buildOpenTextQuestion({
-        headline: t("templates.enps_survey_question_3_headline"),
+        charLimit: {
+          enabled: false,
+        },
+      },
+      {
+        id: createId(),
+        type: TSurveyQuestionTypeEnum.OpenText,
+        headline: { default: t("templates.enps_survey_question_3_headline") },
         required: false,
         inputType: "text",
-        t,
-      }),
+        charLimit: {
+          enabled: false,
+        },
+      },
     ],
   };
 };

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)/lib/onboarding.test.ts

@@ -1,58 +0,0 @@
-import { Prisma } from "@prisma/client";
-import { beforeEach, describe, expect, test, vi } from "vitest";
-import { prisma } from "@formbricks/database";
-import { DatabaseError } from "@formbricks/types/errors";
-import { getTeamsByOrganizationId } from "./onboarding";
-
-vi.mock("@formbricks/database", () => ({
-  prisma: {
-    team: {
-      findMany: vi.fn(),
-    },
-  },
-}));
-
-vi.mock("@/lib/cache", () => ({
-  cache: (fn: any) => fn,
-}));
-
-vi.mock("@/lib/cache/team", () => ({
-  teamCache: {
-    tag: { byOrganizationId: vi.fn((id: string) => `organization-${id}-teams`) },
-  },
-}));
-
-vi.mock("@/lib/utils/validate", () => ({
-  validateInputs: vi.fn(),
-}));
-
-describe("getTeamsByOrganizationId", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  test("returns mapped teams", async () => {
-    const mockTeams = [
-      { id: "t1", name: "Team 1" },
-      { id: "t2", name: "Team 2" },
-    ];
-    vi.mocked(prisma.team.findMany).mockResolvedValueOnce(mockTeams);
-    const result = await getTeamsByOrganizationId("org1");
-    expect(result).toEqual([
-      { id: "t1", name: "Team 1" },
-      { id: "t2", name: "Team 2" },
-    ]);
-  });
-
-  test("throws DatabaseError on Prisma error", async () => {
-    vi.mocked(prisma.team.findMany).mockRejectedValueOnce(
-      new Prisma.PrismaClientKnownRequestError("fail", { code: "P2002", clientVersion: "1.0.0" })
-    );
-    await expect(getTeamsByOrganizationId("org1")).rejects.toThrow(DatabaseError);
-  });
-
-  test("throws error on unknown error", async () => {
-    vi.mocked(prisma.team.findMany).mockRejectedValueOnce(new Error("fail"));
-    await expect(getTeamsByOrganizationId("org1")).rejects.toThrow("fail");
-  });
-});

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

@@ -1,75 +0,0 @@
-import "@testing-library/jest-dom/vitest";
-import { cleanup, render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { signOut } from "next-auth/react";
-import { afterEach, describe, expect, test, vi } from "vitest";
-import { LandingSidebar } from "./landing-sidebar";
-
-// Module mocks must be declared before importing the component
-vi.mock("@tolgee/react", () => ({
-  useTranslate: () => ({ t: (key: string) => key, isLoading: false }),
-}));
-vi.mock("next-auth/react", () => ({ signOut: vi.fn() }));
-vi.mock("next/navigation", () => ({ useRouter: () => ({ push: vi.fn() }) }));
-vi.mock("@/modules/organization/components/CreateOrganizationModal", () => ({
-  CreateOrganizationModal: ({ open }: { open: boolean }) => (
-    <div data-testid={open ? "modal-open" : "modal-closed"} />
-  ),
-}));
-vi.mock("@/modules/ui/components/avatars", () => ({
-  ProfileAvatar: ({ userId }: { userId: string }) => <div data-testid="avatar">{userId}</div>,
-}));
-
-// Ensure mocks are reset between tests
-afterEach(() => {
-  cleanup();
-  vi.clearAllMocks();
-});
-
-describe("LandingSidebar component", () => {
-  const user = { id: "u1", name: "Alice", email: "alice@example.com", imageUrl: "" } as any;
-  const organization = { id: "o1", name: "orgOne" } as any;
-  const organizations = [
-    { id: "o2", name: "betaOrg" },
-    { id: "o1", name: "alphaOrg" },
-  ] as any;
-
-  test("renders logo, avatar, and initial modal closed", () => {
-    render(
-      <LandingSidebar
-        isMultiOrgEnabled={false}
-        user={user}
-        organization={organization}
-        organizations={organizations}
-      />
-    );
-
-    // Formbricks logo
-    expect(screen.getByAltText("environments.formbricks_logo")).toBeInTheDocument();
-    // Profile avatar
-    expect(screen.getByTestId("avatar")).toHaveTextContent("u1");
-    // CreateOrganizationModal should be closed initially
-    expect(screen.getByTestId("modal-closed")).toBeInTheDocument();
-  });
-
-  test("clicking logout triggers signOut", async () => {
-    render(
-      <LandingSidebar
-        isMultiOrgEnabled={false}
-        user={user}
-        organization={organization}
-        organizations={organizations}
-      />
-    );
-
-    // Open user dropdown by clicking on avatar trigger
-    const trigger = screen.getByTestId("avatar").parentElement;
-    if (trigger) await userEvent.click(trigger);
-
-    // Click logout menu item
-    const logoutItem = await screen.findByText("common.logout");
-    await userEvent.click(logoutItem);
-
-    expect(signOut).toHaveBeenCalledWith({ callbackUrl: "/auth/login" });
-  });
-});

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { formbricksLogout } from "@/app/lib/formbricks";
 import FBLogo from "@/images/formbricks-wordmark.svg";
 import { cn } from "@/lib/cn";
 import { capitalizeFirstLetter } from "@/lib/utils/strings";
@@ -124,6 +125,7 @@ export const LandingSidebar = ({
             <DropdownMenuItem
               onClick={async () => {
                 await signOut({ callbackUrl: "/auth/login" });
+                await formbricksLogout();
               }}
               icon={<LogOutIcon className="mr-2 h-4 w-4" strokeWidth={1.5} />}>
               {t("common.logout")}

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

@@ -1,185 +0,0 @@
-import { getEnvironments } from "@/lib/environment/service";
-import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
-import { getUserProjects } from "@/lib/project/service";
-import "@testing-library/jest-dom/vitest";
-import { cleanup } from "@testing-library/preact";
-import { getServerSession } from "next-auth";
-import { notFound, redirect } from "next/navigation";
-import { afterEach, describe, expect, test, vi } from "vitest";
-import LandingLayout from "./layout";
-
-vi.mock("@/lib/constants", () => ({
-  IS_FORMBRICKS_CLOUD: false,
-  IS_PRODUCTION: false,
-  IS_DEVELOPMENT: true,
-  E2E_TESTING: false,
-  WEBAPP_URL: "http://localhost:3000",
-  SURVEY_URL: "http://localhost:3000/survey",
-  ENCRYPTION_KEY: "mock-encryption-key",
-  CRON_SECRET: "mock-cron-secret",
-  DEFAULT_BRAND_COLOR: "#64748b",
-  FB_LOGO_URL: "https://mock-logo-url.com/logo.png",
-  PRIVACY_URL: "http://localhost:3000/privacy",
-  TERMS_URL: "http://localhost:3000/terms",
-  IMPRINT_URL: "http://localhost:3000/imprint",
-  IMPRINT_ADDRESS: "Mock Address",
-  PASSWORD_RESET_DISABLED: false,
-  EMAIL_VERIFICATION_DISABLED: false,
-  GOOGLE_OAUTH_ENABLED: false,
-  GITHUB_OAUTH_ENABLED: false,
-  AZURE_OAUTH_ENABLED: false,
-  OIDC_OAUTH_ENABLED: false,
-  SAML_OAUTH_ENABLED: false,
-  SAML_XML_DIR: "./mock-saml-connection",
-  SIGNUP_ENABLED: true,
-  EMAIL_AUTH_ENABLED: true,
-  INVITE_DISABLED: false,
-  SLACK_CLIENT_SECRET: "mock-slack-secret",
-  SLACK_CLIENT_ID: "mock-slack-id",
-  SLACK_AUTH_URL: "https://mock-slack-auth-url.com",
-  GOOGLE_SHEETS_CLIENT_ID: "mock-google-sheets-id",
-  GOOGLE_SHEETS_CLIENT_SECRET: "mock-google-sheets-secret",
-  GOOGLE_SHEETS_REDIRECT_URL: "http://localhost:3000/google-sheets-redirect",
-  NOTION_OAUTH_CLIENT_ID: "mock-notion-id",
-  NOTION_OAUTH_CLIENT_SECRET: "mock-notion-secret",
-  NOTION_REDIRECT_URI: "http://localhost:3000/notion-redirect",
-  NOTION_AUTH_URL: "https://mock-notion-auth-url.com",
-  AIRTABLE_CLIENT_ID: "mock-airtable-id",
-  SMTP_HOST: "mock-smtp-host",
-  SMTP_PORT: "587",
-  SMTP_SECURE_ENABLED: false,
-  SMTP_USER: "mock-smtp-user",
-  SMTP_PASSWORD: "mock-smtp-password",
-  SMTP_AUTHENTICATED: true,
-  SMTP_REJECT_UNAUTHORIZED_TLS: true,
-  MAIL_FROM: "mock@mail.com",
-  MAIL_FROM_NAME: "Mock Mail",
-  NEXTAUTH_SECRET: "mock-nextauth-secret",
-  ITEMS_PER_PAGE: 30,
-  SURVEYS_PER_PAGE: 12,
-  RESPONSES_PER_PAGE: 25,
-  TEXT_RESPONSES_PER_PAGE: 5,
-  INSIGHTS_PER_PAGE: 10,
-  DOCUMENTS_PER_PAGE: 10,
-  MAX_RESPONSES_FOR_INSIGHT_GENERATION: 500,
-  MAX_OTHER_OPTION_LENGTH: 250,
-  ENTERPRISE_LICENSE_KEY: "ABC",
-  GITHUB_ID: "mock-github-id",
-  GITHUB_SECRET: "mock-github-secret",
-  GITHUB_OAUTH_URL: "https://mock-github-auth-url.com",
-  AZURE_ID: "mock-azure-id",
-  AZUREAD_CLIENT_ID: "mock-azure-client-id",
-  AZUREAD_CLIENT_SECRET: "mock-azure-client-secret",
-  GOOGLE_CLIENT_ID: "mock-google-client-id",
-  GOOGLE_CLIENT_SECRET: "mock-google-client-secret",
-  GOOGLE_OAUTH_URL: "https://mock-google-auth-url.com",
-  AZURE_OAUTH_URL: "https://mock-azure-auth-url.com",
-  OIDC_ID: "mock-oidc-id",
-  OIDC_OAUTH_URL: "https://mock-oidc-auth-url.com",
-  SAML_ID: "mock-saml-id",
-  SAML_OAUTH_URL: "https://mock-saml-auth-url.com",
-  SAML_METADATA_URL: "https://mock-saml-metadata-url.com",
-  AZUREAD_TENANT_ID: "mock-azure-tenant-id",
-  AZUREAD_OAUTH_URL: "https://mock-azuread-auth-url.com",
-  OIDC_DISPLAY_NAME: "Mock OIDC",
-  OIDC_CLIENT_ID: "mock-oidc-client-id",
-  OIDC_CLIENT_SECRET: "mock-oidc-client-secret",
-  OIDC_REDIRECT_URL: "http://localhost:3000/oidc-redirect",
-  OIDC_AUTH_URL: "https://mock-oidc-auth-url.com",
-  OIDC_ISSUER: "https://mock-oidc-issuer.com",
-  OIDC_SIGNING_ALGORITHM: "RS256",
-  SESSION_MAX_AGE: 1000,
-}));
-
-vi.mock("@/lib/environment/service");
-vi.mock("@/lib/membership/service");
-vi.mock("@/lib/project/service");
-vi.mock("next-auth");
-vi.mock("next/navigation");
-
-afterEach(() => {
-  cleanup();
-});
-
-describe("LandingLayout", () => {
-  test("redirects to login if no session exists", async () => {
-    vi.mocked(getServerSession).mockResolvedValue(null);
-
-    const props = { params: { organizationId: "org-123" }, children: <div>Child Content</div> };
-
-    await LandingLayout(props);
-
-    expect(vi.mocked(redirect)).toHaveBeenCalledWith("/auth/login");
-  });
-
-  test("returns notFound if no membership is found", async () => {
-    vi.mocked(getServerSession).mockResolvedValue({ user: { id: "user-123" } });
-    vi.mocked(getMembershipByUserIdOrganizationId).mockResolvedValue(null);
-
-    const props = { params: { organizationId: "org-123" }, children: <div>Child Content</div> };
-
-    await LandingLayout(props);
-
-    expect(vi.mocked(notFound)).toHaveBeenCalled();
-  });
-
-  test("redirects to production environment if available", async () => {
-    vi.mocked(getServerSession).mockResolvedValue({ user: { id: "user-123" } });
-    vi.mocked(getMembershipByUserIdOrganizationId).mockResolvedValue({
-      organizationId: "org-123",
-      userId: "user-123",
-      accepted: true,
-      role: "owner",
-    });
-    vi.mocked(getUserProjects).mockResolvedValue([
-      {
-        id: "proj-123",
-        organizationId: "org-123",
-        createdAt: new Date("2023-01-01"),
-        updatedAt: new Date("2023-01-02"),
-        name: "Project 1",
-        styling: { allowStyleOverwrite: true },
-        recontactDays: 30,
-        inAppSurveyBranding: true,
-        linkSurveyBranding: true,
-      } as any,
-    ]);
-    vi.mocked(getEnvironments).mockResolvedValue([
-      {
-        id: "env-123",
-        type: "production",
-        projectId: "proj-123",
-        createdAt: new Date("2023-01-01"),
-        updatedAt: new Date("2023-01-02"),
-        appSetupCompleted: true,
-      },
-    ]);
-
-    const props = { params: { organizationId: "org-123" }, children: <div>Child Content</div> };
-
-    await LandingLayout(props);
-
-    expect(vi.mocked(redirect)).toHaveBeenCalledWith("/environments/env-123/");
-  });
-
-  test("renders children if no projects or production environment exist", async () => {
-    vi.mocked(getServerSession).mockResolvedValue({ user: { id: "user-123" } });
-    vi.mocked(getMembershipByUserIdOrganizationId).mockResolvedValue({
-      organizationId: "org-123",
-      userId: "user-123",
-      accepted: true,
-      role: "owner",
-    });
-    vi.mocked(getUserProjects).mockResolvedValue([]);
-
-    const props = { params: { organizationId: "org-123" }, children: <div>Child Content</div> };
-
-    const result = await LandingLayout(props);
-
-    expect(result).toEqual(
-      <>
-        <div>Child Content</div>
-      </>
-    );
-  });
-});

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

@@ -1,198 +0,0 @@
-import { getOrganizationsByUserId } from "@/lib/organization/service";
-import { getUser } from "@/lib/user/service";
-import { getOrganizationAuth } from "@/modules/organization/lib/utils";
-import { getTranslate } from "@/tolgee/server";
-import "@testing-library/jest-dom/vitest";
-import { cleanup, render, screen } from "@testing-library/react";
-import { notFound, redirect } from "next/navigation";
-import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
-
-vi.mock("@/modules/ee/license-check/lib/license", () => ({
-  getEnterpriseLicense: vi.fn().mockResolvedValue({
-    active: true,
-    features: { isMultiOrgEnabled: true },
-    lastChecked: new Date(),
-    isPendingDowngrade: false,
-    fallbackLevel: "live",
-  }),
-}));
-
-vi.mock("@/lib/constants", () => ({
-  IS_FORMBRICKS_CLOUD: false,
-  IS_PRODUCTION: false,
-  IS_DEVELOPMENT: true,
-  E2E_TESTING: false,
-  WEBAPP_URL: "http://localhost:3000",
-  SURVEY_URL: "http://localhost:3000/survey",
-  ENCRYPTION_KEY: "mock-encryption-key",
-  CRON_SECRET: "mock-cron-secret",
-  DEFAULT_BRAND_COLOR: "#64748b",
-  FB_LOGO_URL: "https://mock-logo-url.com/logo.png",
-  PRIVACY_URL: "http://localhost:3000/privacy",
-  TERMS_URL: "http://localhost:3000/terms",
-  IMPRINT_URL: "http://localhost:3000/imprint",
-  IMPRINT_ADDRESS: "Mock Address",
-  PASSWORD_RESET_DISABLED: false,
-  EMAIL_VERIFICATION_DISABLED: false,
-  GOOGLE_OAUTH_ENABLED: false,
-  GITHUB_OAUTH_ENABLED: false,
-  AZURE_OAUTH_ENABLED: false,
-  OIDC_OAUTH_ENABLED: false,
-  SAML_OAUTH_ENABLED: false,
-  SAML_XML_DIR: "./mock-saml-connection",
-  SIGNUP_ENABLED: true,
-  EMAIL_AUTH_ENABLED: true,
-  INVITE_DISABLED: false,
-  SLACK_CLIENT_SECRET: "mock-slack-secret",
-  SLACK_CLIENT_ID: "mock-slack-id",
-  SLACK_AUTH_URL: "https://mock-slack-auth-url.com",
-  GOOGLE_SHEETS_CLIENT_ID: "mock-google-sheets-id",
-  GOOGLE_SHEETS_CLIENT_SECRET: "mock-google-sheets-secret",
-  GOOGLE_SHEETS_REDIRECT_URL: "http://localhost:3000/google-sheets-redirect",
-  NOTION_OAUTH_CLIENT_ID: "mock-notion-id",
-  NOTION_OAUTH_CLIENT_SECRET: "mock-notion-secret",
-  NOTION_REDIRECT_URI: "http://localhost:3000/notion-redirect",
-  NOTION_AUTH_URL: "https://mock-notion-auth-url.com",
-  AIRTABLE_CLIENT_ID: "mock-airtable-id",
-  SMTP_HOST: "mock-smtp-host",
-  SMTP_PORT: "587",
-  SMTP_SECURE_ENABLED: false,
-  SMTP_USER: "mock-smtp-user",
-  SMTP_PASSWORD: "mock-smtp-password",
-  SMTP_AUTHENTICATED: true,
-  SMTP_REJECT_UNAUTHORIZED_TLS: true,
-  MAIL_FROM: "mock@mail.com",
-  MAIL_FROM_NAME: "Mock Mail",
-  NEXTAUTH_SECRET: "mock-nextauth-secret",
-  ITEMS_PER_PAGE: 30,
-  SURVEYS_PER_PAGE: 12,
-  RESPONSES_PER_PAGE: 25,
-  TEXT_RESPONSES_PER_PAGE: 5,
-  INSIGHTS_PER_PAGE: 10,
-  DOCUMENTS_PER_PAGE: 10,
-  MAX_RESPONSES_FOR_INSIGHT_GENERATION: 500,
-  MAX_OTHER_OPTION_LENGTH: 250,
-  ENTERPRISE_LICENSE_KEY: "ABC",
-  GITHUB_ID: "mock-github-id",
-  GITHUB_SECRET: "mock-github-secret",
-  GITHUB_OAUTH_URL: "https://mock-github-auth-url.com",
-  AZURE_ID: "mock-azure-id",
-  AZUREAD_CLIENT_ID: "mock-azure-client-id",
-  AZUREAD_CLIENT_SECRET: "mock-azure-client-secret",
-  GOOGLE_CLIENT_ID: "mock-google-client-id",
-  GOOGLE_CLIENT_SECRET: "mock-google-client-secret",
-  GOOGLE_OAUTH_URL: "https://mock-google-auth-url.com",
-  AZURE_OAUTH_URL: "https://mock-azure-auth-url.com",
-  OIDC_ID: "mock-oidc-id",
-  OIDC_OAUTH_URL: "https://mock-oidc-auth-url.com",
-  SAML_ID: "mock-saml-id",
-  SAML_OAUTH_URL: "https://mock-saml-auth-url.com",
-  SAML_METADATA_URL: "https://mock-saml-metadata-url.com",
-  AZUREAD_TENANT_ID: "mock-azure-tenant-id",
-  AZUREAD_OAUTH_URL: "https://mock-azuread-auth-url.com",
-  OIDC_DISPLAY_NAME: "Mock OIDC",
-  OIDC_CLIENT_ID: "mock-oidc-client-id",
-  OIDC_CLIENT_SECRET: "mock-oidc-client-secret",
-  OIDC_REDIRECT_URL: "http://localhost:3000/oidc-redirect",
-  OIDC_AUTH_URL: "https://mock-oidc-auth-url.com",
-  OIDC_ISSUER: "https://mock-oidc-issuer.com",
-  OIDC_SIGNING_ALGORITHM: "RS256",
-  SESSION_MAX_AGE: 1000,
-}));
-
-vi.mock("@/app/(app)/(onboarding)/organizations/[organizationId]/landing/components/landing-sidebar", () => ({
-  LandingSidebar: () => <div data-testid="landing-sidebar" />,
-}));
-vi.mock("@/modules/organization/lib/utils");
-vi.mock("@/lib/user/service");
-vi.mock("@/lib/organization/service");
-vi.mock("@/tolgee/server");
-vi.mock("next/navigation", () => ({
-  redirect: vi.fn(() => "REDIRECT_STUB"),
-  notFound: vi.fn(() => "NOT_FOUND_STUB"),
-}));
-
-// Mock the React cache function
-vi.mock("react", async () => {
-  const actual = await vi.importActual("react");
-  return {
-    ...actual,
-    cache: (fn: any) => fn,
-  };
-});
-
-describe("Page component", () => {
-  afterEach(() => {
-    cleanup();
-    vi.clearAllMocks();
-  });
-
-  beforeEach(() => {
-    vi.resetModules();
-  });
-
-  test("redirects to login if no user session", async () => {
-    vi.mocked(getOrganizationAuth).mockResolvedValue({ session: {}, organization: {} } as any);
-    await vi.doMock("@/modules/ee/license-check/lib/license", () => ({
-      getEnterpriseLicense: vi.fn().mockResolvedValue({
-        active: true,
-        features: { isMultiOrgEnabled: true },
-        lastChecked: new Date(),
-        isPendingDowngrade: false,
-        fallbackLevel: "live",
-      }),
-    }));
-    const { default: Page } = await import("./page");
-    const result = await Page({ params: { organizationId: "org1" } });
-    expect(redirect).toHaveBeenCalledWith("/auth/login");
-    expect(result).toBe("REDIRECT_STUB");
-  });
-
-  test("returns notFound if user does not exist", async () => {
-    vi.mocked(getOrganizationAuth).mockResolvedValue({
-      session: { user: { id: "user1" } },
-      organization: {},
-    } as any);
-    vi.mocked(getUser).mockResolvedValue(null);
-    await vi.doMock("@/modules/ee/license-check/lib/license", () => ({
-      getEnterpriseLicense: vi.fn().mockResolvedValue({
-        active: true,
-        features: { isMultiOrgEnabled: true },
-        lastChecked: new Date(),
-        isPendingDowngrade: false,
-        fallbackLevel: "live",
-      }),
-    }));
-    const { default: Page } = await import("./page");
-    const result = await Page({ params: { organizationId: "org1" } });
-    expect(notFound).toHaveBeenCalled();
-    expect(result).toBe("NOT_FOUND_STUB");
-  });
-
-  test("renders header and sidebar for authenticated user", async () => {
-    vi.mocked(getOrganizationAuth).mockResolvedValue({
-      session: { user: { id: "user1" } },
-      organization: { id: "org1" },
-    } as any);
-    vi.mocked(getUser).mockResolvedValue({ id: "user1", name: "Test User" } as any);
-    vi.mocked(getOrganizationsByUserId).mockResolvedValue([{ id: "org1", name: "Org One" } as any]);
-    vi.mocked(getTranslate).mockResolvedValue((props: any) =>
-      typeof props === "string" ? props : props.key || ""
-    );
-    await vi.doMock("@/modules/ee/license-check/lib/license", () => ({
-      getEnterpriseLicense: vi.fn().mockResolvedValue({
-        active: true,
-        features: { isMultiOrgEnabled: true },
-        lastChecked: new Date(),
-        isPendingDowngrade: false,
-        fallbackLevel: "live",
-      }),
-    }));
-    const { default: Page } = await import("./page");
-    const element = await Page({ params: { organizationId: "org1" } });
-    render(element as React.ReactElement);
-    expect(screen.getByTestId("landing-sidebar")).toBeInTheDocument();
-    expect(screen.getByText("organizations.landing.no_projects_warning_title")).toBeInTheDocument();
-    expect(screen.getByText("organizations.landing.no_projects_warning_subtitle")).toBeInTheDocument();
-  });
-});

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

@@ -1,7 +1,7 @@
 import { LandingSidebar } from "@/app/(app)/(onboarding)/organizations/[organizationId]/landing/components/landing-sidebar";
 import { getOrganizationsByUserId } from "@/lib/organization/service";
 import { getUser } from "@/lib/user/service";
-import { getEnterpriseLicense } from "@/modules/ee/license-check/lib/license";
+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";

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

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

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

@@ -1,88 +0,0 @@
-import { getUserProjects } from "@/lib/project/service";
-import { getOrganizationAuth } from "@/modules/organization/lib/utils";
-import { getTranslate } from "@/tolgee/server";
-import "@testing-library/jest-dom/vitest";
-import { cleanup, render, screen } from "@testing-library/react";
-import { redirect } from "next/navigation";
-import { afterEach, describe, expect, test, vi } from "vitest";
-import Page from "./page";
-
-const mockTranslate = vi.fn((key) => key);
-
-// Module mocks must be declared before importing the component
-vi.mock("@/lib/project/service", () => ({ getUserProjects: vi.fn() }));
-vi.mock("@/modules/organization/lib/utils", () => ({ getOrganizationAuth: vi.fn() }));
-vi.mock("@/tolgee/server", () => ({ getTranslate: vi.fn() }));
-vi.mock("next/navigation", () => ({ redirect: vi.fn(() => "REDIRECT_STUB") }));
-vi.mock("@/modules/ui/components/header", () => ({
-  Header: ({ title, subtitle }: { title: string; subtitle: string }) => (
-    <div>
-      <h1>{title}</h1>
-      <p>{subtitle}</p>
-    </div>
-  ),
-}));
-vi.mock("@/app/(app)/(onboarding)/organizations/components/OnboardingOptionsContainer", () => ({
-  OnboardingOptionsContainer: ({ options }: { options: any[] }) => (
-    <div data-testid="options">{options.map((o) => o.title).join(",")}</div>
-  ),
-}));
-vi.mock("next/link", () => ({
-  default: ({ href, children }: { href: string; children: React.ReactNode }) => <a href={href}>{children}</a>,
-}));
-
-describe("Page component", () => {
-  afterEach(() => {
-    cleanup();
-    vi.clearAllMocks();
-  });
-
-  const params = Promise.resolve({ organizationId: "org1" });
-
-  test("redirects to login if no user session", async () => {
-    vi.mocked(getOrganizationAuth).mockResolvedValue({ session: {} } as any);
-
-    const result = await Page({ params });
-
-    expect(redirect).toHaveBeenCalledWith("/auth/login");
-    expect(result).toBe("REDIRECT_STUB");
-  });
-
-  test("renders header, options, and close button when projects exist", async () => {
-    vi.mocked(getOrganizationAuth).mockResolvedValue({ session: { user: { id: "user1" } } } as any);
-    vi.mocked(getTranslate).mockResolvedValue(mockTranslate);
-    vi.mocked(getUserProjects).mockResolvedValue([{ id: 1 }] as any);
-
-    const element = await Page({ params });
-    render(element as React.ReactElement);
-
-    // Header title and subtitle
-    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
-      "organizations.projects.new.channel.channel_select_title"
-    );
-    expect(
-      screen.getByText("organizations.projects.new.channel.channel_select_subtitle")
-    ).toBeInTheDocument();
-
-    // Options container with correct titles
-    expect(screen.getByTestId("options")).toHaveTextContent(
-      "organizations.projects.new.channel.link_and_email_surveys," +
-        "organizations.projects.new.channel.in_product_surveys"
-    );
-
-    // Close button link rendered when projects >=1
-    const closeLink = screen.getByRole("link");
-    expect(closeLink).toHaveAttribute("href", "/");
-  });
-
-  test("does not render close button when no projects", async () => {
-    vi.mocked(getOrganizationAuth).mockResolvedValue({ session: { user: { id: "user1" } } } as any);
-    vi.mocked(getTranslate).mockResolvedValue(mockTranslate);
-    vi.mocked(getUserProjects).mockResolvedValue([]);
-
-    const element = await Page({ params });
-    render(element as React.ReactElement);
-
-    expect(screen.queryByRole("link")).toBeNull();
-  });
-});

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

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

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

@@ -1,221 +0,0 @@
-import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
-import { getOrganization } from "@/lib/organization/service";
-import { getOrganizationProjectsCount } from "@/lib/project/service";
-import { getOrganizationProjectsLimit } from "@/modules/ee/license-check/lib/utils";
-import "@testing-library/jest-dom/vitest";
-import { cleanup } from "@testing-library/react";
-import { getServerSession } from "next-auth";
-import { notFound, redirect } from "next/navigation";
-import { afterEach, describe, expect, test, vi } from "vitest";
-import { TMembership } from "@formbricks/types/memberships";
-import { TOrganization } from "@formbricks/types/organizations";
-import OnboardingLayout from "./layout";
-
-// Mock environment variables
-vi.mock("@/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,
-  SESSION_MAX_AGE: 1000,
-}));
-
-// Mock dependencies
-vi.mock("next-auth", () => ({
-  getServerSession: vi.fn(),
-}));
-
-vi.mock("@/lib/membership/service", () => ({
-  getMembershipByUserIdOrganizationId: vi.fn(),
-}));
-
-vi.mock("@/lib/organization/service", () => ({
-  getOrganization: vi.fn(),
-}));
-
-vi.mock("@/lib/project/service", () => ({
-  getOrganizationProjectsCount: vi.fn(),
-}));
-
-vi.mock("@/modules/ee/license-check/lib/utils", () => ({
-  getOrganizationProjectsLimit: vi.fn(),
-}));
-
-vi.mock("@/tolgee/server", () => ({
-  getTranslate: async () => (key: string) => key,
-}));
-
-describe("OnboardingLayout", () => {
-  afterEach(() => {
-    cleanup();
-    vi.clearAllMocks();
-  });
-
-  test("redirects to login if no session", async () => {
-    vi.mocked(getServerSession).mockResolvedValue(null);
-
-    const props = {
-      params: { organizationId: "test-org-id" },
-      children: <div>Test Child</div>,
-    };
-
-    await OnboardingLayout(props);
-    expect(redirect).toHaveBeenCalledWith("/auth/login");
-  });
-
-  test("returns not found if user is member or billing", async () => {
-    const mockSession = {
-      user: { id: "test-user-id" },
-    };
-    vi.mocked(getServerSession).mockResolvedValue(mockSession as any);
-
-    const mockMembership: TMembership = {
-      organizationId: "test-org-id",
-      userId: "test-user-id",
-      accepted: true,
-      role: "member",
-    };
-    vi.mocked(getMembershipByUserIdOrganizationId).mockResolvedValue(mockMembership);
-
-    const props = {
-      params: { organizationId: "test-org-id" },
-      children: <div>Test Child</div>,
-    };
-
-    await OnboardingLayout(props);
-    expect(notFound).toHaveBeenCalled();
-  });
-
-  test("throws error if organization is not found", async () => {
-    const mockSession = {
-      user: { id: "test-user-id" },
-    };
-    vi.mocked(getServerSession).mockResolvedValue(mockSession as any);
-
-    const mockMembership: TMembership = {
-      organizationId: "test-org-id",
-      userId: "test-user-id",
-      accepted: true,
-      role: "owner",
-    };
-    vi.mocked(getMembershipByUserIdOrganizationId).mockResolvedValue(mockMembership);
-    vi.mocked(getOrganization).mockResolvedValue(null);
-
-    const props = {
-      params: { organizationId: "test-org-id" },
-      children: <div>Test Child</div>,
-    };
-
-    await expect(OnboardingLayout(props)).rejects.toThrow("common.organization_not_found");
-  });
-
-  test("redirects to home if project limit is reached", async () => {
-    const mockSession = {
-      user: { id: "test-user-id" },
-    };
-    vi.mocked(getServerSession).mockResolvedValue(mockSession as any);
-
-    const mockMembership: TMembership = {
-      organizationId: "test-org-id",
-      userId: "test-user-id",
-      accepted: true,
-      role: "owner",
-    };
-    vi.mocked(getMembershipByUserIdOrganizationId).mockResolvedValue(mockMembership);
-
-    const mockOrganization: TOrganization = {
-      id: "test-org-id",
-      name: "Test Org",
-      createdAt: new Date(),
-      updatedAt: new Date(),
-      isAIEnabled: false,
-      billing: {
-        stripeCustomerId: null,
-        plan: "free",
-        period: "monthly",
-        limits: {
-          projects: 3,
-          monthly: {
-            responses: 1500,
-            miu: 2000,
-          },
-        },
-        periodStart: new Date(),
-      },
-    };
-    vi.mocked(getOrganization).mockResolvedValue(mockOrganization);
-    vi.mocked(getOrganizationProjectsLimit).mockResolvedValue(3);
-    vi.mocked(getOrganizationProjectsCount).mockResolvedValue(3);
-
-    const props = {
-      params: { organizationId: "test-org-id" },
-      children: <div>Test Child</div>,
-    };
-
-    await OnboardingLayout(props);
-    expect(redirect).toHaveBeenCalledWith("/");
-  });
-
-  test("renders children when all conditions are met", async () => {
-    const mockSession = {
-      user: { id: "test-user-id" },
-    };
-    vi.mocked(getServerSession).mockResolvedValue(mockSession as any);
-
-    const mockMembership: TMembership = {
-      organizationId: "test-org-id",
-      userId: "test-user-id",
-      accepted: true,
-      role: "owner",
-    };
-    vi.mocked(getMembershipByUserIdOrganizationId).mockResolvedValue(mockMembership);
-
-    const mockOrganization: TOrganization = {
-      id: "test-org-id",
-      name: "Test Org",
-      createdAt: new Date(),
-      updatedAt: new Date(),
-      isAIEnabled: false,
-      billing: {
-        stripeCustomerId: null,
-        plan: "free",
-        period: "monthly",
-        limits: {
-          projects: 3,
-          monthly: {
-            responses: 1500,
-            miu: 2000,
-          },
-        },
-        periodStart: new Date(),
-      },
-    };
-    vi.mocked(getOrganization).mockResolvedValue(mockOrganization);
-    vi.mocked(getOrganizationProjectsLimit).mockResolvedValue(3);
-    vi.mocked(getOrganizationProjectsCount).mockResolvedValue(2);
-
-    const props = {
-      params: { organizationId: "test-org-id" },
-      children: <div>Test Child</div>,
-    };
-
-    const result = await OnboardingLayout(props);
-    expect(result).toEqual(<>{props.children}</>);
-  });
-});

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

@@ -1,72 +0,0 @@
-import { getUserProjects } from "@/lib/project/service";
-import { getOrganizationAuth } from "@/modules/organization/lib/utils";
-import { getTranslate } from "@/tolgee/server";
-import "@testing-library/jest-dom/vitest";
-import { cleanup, render, screen } from "@testing-library/react";
-import { redirect } from "next/navigation";
-import { afterEach, describe, expect, test, vi } from "vitest";
-import Page from "./page";
-
-const mockTranslate = vi.fn((key) => key);
-
-vi.mock("@/modules/organization/lib/utils", () => ({ getOrganizationAuth: vi.fn() }));
-vi.mock("@/lib/project/service", () => ({ getUserProjects: vi.fn() }));
-vi.mock("@/tolgee/server", () => ({ getTranslate: vi.fn() }));
-vi.mock("next/navigation", () => ({ redirect: vi.fn() }));
-vi.mock("next/link", () => ({
-  __esModule: true,
-  default: ({ href, children }: any) => <a href={href}>{children}</a>,
-}));
-vi.mock("@/app/(app)/(onboarding)/organizations/components/OnboardingOptionsContainer", () => ({
-  OnboardingOptionsContainer: ({ options }: any) => (
-    <div data-testid="options">{options.map((o: any) => o.title).join(",")}</div>
-  ),
-}));
-vi.mock("@/modules/ui/components/header", () => ({ Header: ({ title }: any) => <h1>{title}</h1> }));
-vi.mock("@/modules/ui/components/button", () => ({
-  Button: ({ children, ...props }: any) => <button {...props}>{children}</button>,
-}));
-
-describe("Mode Page", () => {
-  afterEach(() => {
-    cleanup();
-    vi.clearAllMocks();
-  });
-
-  const params = Promise.resolve({ organizationId: "org1" });
-
-  test("redirects to login if no session user", async () => {
-    vi.mocked(getOrganizationAuth).mockResolvedValueOnce({ session: {} } as any);
-    await Page({ params });
-    expect(redirect).toHaveBeenCalledWith("/auth/login");
-  });
-
-  test("renders header and options without close link when no projects", async () => {
-    vi.mocked(getOrganizationAuth).mockResolvedValueOnce({ session: { user: { id: "u1" } } } as any);
-    vi.mocked(getTranslate).mockResolvedValue(mockTranslate);
-    vi.mocked(getUserProjects).mockResolvedValueOnce([] as any);
-
-    const element = await Page({ params });
-    render(element as React.ReactElement);
-
-    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
-      "organizations.projects.new.mode.what_are_you_here_for"
-    );
-    expect(screen.getByTestId("options")).toHaveTextContent(
-      "organizations.projects.new.mode.formbricks_surveys," + "organizations.projects.new.mode.formbricks_cx"
-    );
-    expect(screen.queryByRole("link")).toBeNull();
-  });
-
-  test("renders close link when projects exist", async () => {
-    vi.mocked(getOrganizationAuth).mockResolvedValueOnce({ session: { user: { id: "u1" } } } as any);
-    vi.mocked(getTranslate).mockResolvedValue(mockTranslate);
-    vi.mocked(getUserProjects).mockResolvedValueOnce([{ id: "p1" } as any]);
-
-    const element = await Page({ params });
-    render(element as React.ReactElement);
-
-    const link = screen.getByRole("link");
-    expect(link).toHaveAttribute("href", "/");
-  });
-});

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

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

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

@@ -1,124 +0,0 @@
-import { createProjectAction } from "@/app/(app)/environments/[environmentId]/actions";
-import "@testing-library/jest-dom/vitest";
-import { cleanup, render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { toast } from "react-hot-toast";
-import { afterEach, describe, expect, test, vi } from "vitest";
-import { ProjectSettings } from "./ProjectSettings";
-
-// Mocks before imports
-const pushMock = vi.fn();
-vi.mock("next/navigation", () => ({ useRouter: () => ({ push: pushMock }) }));
-vi.mock("@tolgee/react", () => ({ useTranslate: () => ({ t: (key: string) => key }) }));
-vi.mock("react-hot-toast", () => ({ toast: { error: vi.fn() } }));
-vi.mock("@/app/(app)/environments/[environmentId]/actions", () => ({ createProjectAction: vi.fn() }));
-vi.mock("@/lib/utils/helper", () => ({ getFormattedErrorMessage: () => "formatted-error" }));
-vi.mock("@/modules/ui/components/color-picker", () => ({
-  ColorPicker: ({ color, onChange }: any) => (
-    <button data-testid="color-picker" onClick={() => onChange("#000")}>
-      {color}
-    </button>
-  ),
-}));
-vi.mock("@/modules/ui/components/input", () => ({
-  Input: ({ value, onChange, placeholder }: any) => (
-    <input placeholder={placeholder} value={value} onChange={(e) => onChange((e.target as any).value)} />
-  ),
-}));
-vi.mock("@/modules/ui/components/multi-select", () => ({
-  MultiSelect: ({ value, options, onChange }: any) => (
-    <select
-      data-testid="multi-select"
-      multiple
-      value={value}
-      onChange={(e) => onChange(Array.from((e.target as any).selectedOptions).map((o: any) => o.value))}>
-      {options.map((o: any) => (
-        <option key={o.value} value={o.value}>
-          {o.label}
-        </option>
-      ))}
-    </select>
-  ),
-}));
-vi.mock("@/modules/ui/components/survey", () => ({
-  SurveyInline: () => <div data-testid="survey-inline" />,
-}));
-vi.mock("@/lib/templates", () => ({ previewSurvey: () => ({}) }));
-vi.mock("@/modules/ee/teams/team-list/components/create-team-modal", () => ({
-  CreateTeamModal: ({ open }: any) => <div data-testid={open ? "team-modal-open" : "team-modal-closed"} />,
-}));
-
-// Clean up after each test
-afterEach(() => {
-  cleanup();
-  vi.clearAllMocks();
-  localStorage.clear();
-});
-
-describe("ProjectSettings component", () => {
-  const baseProps = {
-    organizationId: "org1",
-    projectMode: "cx",
-    industry: "ind",
-    defaultBrandColor: "#fff",
-    organizationTeams: [],
-    canDoRoleManagement: false,
-    userProjectsCount: 0,
-  } as any;
-
-  const fillAndSubmit = async () => {
-    const nameInput = screen.getByPlaceholderText("e.g. Formbricks");
-    await userEvent.clear(nameInput);
-    await userEvent.type(nameInput, "TestProject");
-    const nextButton = screen.getByRole("button", { name: "common.next" });
-    await userEvent.click(nextButton);
-  };
-
-  test("successful createProject for link channel navigates to surveys and clears localStorage", async () => {
-    (createProjectAction as any).mockResolvedValue({
-      data: { environments: [{ id: "env123", type: "production" }] },
-    });
-    render(<ProjectSettings {...baseProps} channel="link" projectMode="cx" />);
-    await fillAndSubmit();
-    expect(createProjectAction).toHaveBeenCalledWith({
-      organizationId: "org1",
-      data: expect.objectContaining({ teamIds: [] }),
-    });
-    expect(pushMock).toHaveBeenCalledWith("/environments/env123/surveys");
-    expect(localStorage.getItem("FORMBRICKS_SURVEYS_FILTERS_KEY_LS")).toBeNull();
-  });
-
-  test("successful createProject for app channel navigates to connect", async () => {
-    (createProjectAction as any).mockResolvedValue({
-      data: { environments: [{ id: "env456", type: "production" }] },
-    });
-    render(<ProjectSettings {...baseProps} channel="app" projectMode="cx" />);
-    await fillAndSubmit();
-    expect(pushMock).toHaveBeenCalledWith("/environments/env456/connect");
-  });
-
-  test("successful createProject for cx mode navigates to xm-templates when channel is neither link nor app", async () => {
-    (createProjectAction as any).mockResolvedValue({
-      data: { environments: [{ id: "env789", type: "production" }] },
-    });
-    render(<ProjectSettings {...baseProps} channel="unknown" projectMode="cx" />);
-    await fillAndSubmit();
-    expect(pushMock).toHaveBeenCalledWith("/environments/env789/xm-templates");
-  });
-
-  test("shows error toast on createProject error response", async () => {
-    (createProjectAction as any).mockResolvedValue({ error: "err" });
-    render(<ProjectSettings {...baseProps} channel="link" projectMode="cx" />);
-    await fillAndSubmit();
-    expect(toast.error).toHaveBeenCalledWith("formatted-error");
-  });
-
-  test("shows error toast on exception", async () => {
-    (createProjectAction as any).mockImplementation(() => {
-      throw new Error("fail");
-    });
-    render(<ProjectSettings {...baseProps} channel="link" projectMode="cx" />);
-    await fillAndSubmit();
-    expect(toast.error).toHaveBeenCalledWith("organizations.projects.new.settings.project_creation_failed");
-  });
-});

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

@@ -225,7 +225,7 @@ export const ProjectSettings = ({
             alt="Logo"
             width={256}
             height={56}
-            className="absolute 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.test.tsx

@@ -1,106 +0,0 @@
-import { getTeamsByOrganizationId } from "@/app/(app)/(onboarding)/lib/onboarding";
-import { getUserProjects } from "@/lib/project/service";
-import { getRoleManagementPermission } from "@/modules/ee/license-check/lib/utils";
-import { getOrganizationAuth } from "@/modules/organization/lib/utils";
-import "@testing-library/jest-dom/vitest";
-import { cleanup, render, screen } from "@testing-library/react";
-import { redirect } from "next/navigation";
-import { afterEach, describe, expect, test, vi } from "vitest";
-import Page from "./page";
-
-vi.mock("@/lib/constants", () => ({ DEFAULT_BRAND_COLOR: "#fff" }));
-// Mocks before component import
-vi.mock("@/app/(app)/(onboarding)/lib/onboarding", () => ({ getTeamsByOrganizationId: vi.fn() }));
-vi.mock("@/lib/project/service", () => ({ getUserProjects: vi.fn() }));
-vi.mock("@/modules/ee/license-check/lib/utils", () => ({ getRoleManagementPermission: vi.fn() }));
-vi.mock("@/modules/organization/lib/utils", () => ({ getOrganizationAuth: vi.fn() }));
-vi.mock("@/tolgee/server", () => ({ getTranslate: () => Promise.resolve((key: string) => key) }));
-vi.mock("next/navigation", () => ({ redirect: vi.fn() }));
-vi.mock("next/link", () => ({
-  __esModule: true,
-  default: ({ href, children }: any) => <a href={href}>{children}</a>,
-}));
-vi.mock("@/modules/ui/components/header", () => ({
-  Header: ({ title, subtitle }: any) => (
-    <div>
-      <h1>{title}</h1>
-      <p>{subtitle}</p>
-    </div>
-  ),
-}));
-vi.mock("@/modules/ui/components/button", () => ({
-  Button: ({ children, ...props }: any) => <button {...props}>{children}</button>,
-}));
-vi.mock(
-  "@/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/settings/components/ProjectSettings",
-  () => ({
-    ProjectSettings: (props: any) => <div data-testid="project-settings" data-mode={props.projectMode} />,
-  })
-);
-
-// Cleanup after each test
-afterEach(() => {
-  cleanup();
-  vi.clearAllMocks();
-});
-
-describe("ProjectSettingsPage", () => {
-  const params = Promise.resolve({ organizationId: "org1" });
-  const searchParams = Promise.resolve({ channel: "link", industry: "other", mode: "cx" } as any);
-
-  test("redirects to login when no session user", async () => {
-    vi.mocked(getOrganizationAuth).mockResolvedValueOnce({ session: {} } as any);
-    await Page({ params, searchParams });
-    expect(redirect).toHaveBeenCalledWith("/auth/login");
-  });
-
-  test("throws when teams not found", async () => {
-    vi.mocked(getOrganizationAuth).mockResolvedValueOnce({
-      session: { user: { id: "u1" } },
-      organization: { billing: { plan: "basic" } },
-    } as any);
-    vi.mocked(getUserProjects).mockResolvedValueOnce([] as any);
-    vi.mocked(getTeamsByOrganizationId).mockResolvedValueOnce(null as any);
-    vi.mocked(getRoleManagementPermission).mockResolvedValueOnce(false as any);
-
-    await expect(Page({ params, searchParams })).rejects.toThrow("common.organization_teams_not_found");
-  });
-
-  test("renders header, settings and close link when projects exist", async () => {
-    vi.mocked(getOrganizationAuth).mockResolvedValueOnce({
-      session: { user: { id: "u1" } },
-      organization: { billing: { plan: "basic" } },
-    } as any);
-    vi.mocked(getUserProjects).mockResolvedValueOnce([{ id: "p1" }] as any);
-    vi.mocked(getTeamsByOrganizationId).mockResolvedValueOnce([{ id: "t1", name: "Team1" }] as any);
-    vi.mocked(getRoleManagementPermission).mockResolvedValueOnce(true as any);
-
-    const element = await Page({ params, searchParams });
-    render(element as React.ReactElement);
-
-    // Header
-    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
-      "organizations.projects.new.settings.project_settings_title"
-    );
-    // ProjectSettings stub receives mode prop
-    expect(screen.getByTestId("project-settings")).toHaveAttribute("data-mode", "cx");
-    // Close link for existing projects
-    const link = screen.getByRole("link");
-    expect(link).toHaveAttribute("href", "/");
-  });
-
-  test("renders without close link when no projects", async () => {
-    vi.mocked(getOrganizationAuth).mockResolvedValueOnce({
-      session: { user: { id: "u1" } },
-      organization: { billing: { plan: "basic" } },
-    } as any);
-    vi.mocked(getUserProjects).mockResolvedValueOnce([] as any);
-    vi.mocked(getTeamsByOrganizationId).mockResolvedValueOnce([{ id: "t1", name: "Team1" }] as any);
-    vi.mocked(getRoleManagementPermission).mockResolvedValueOnce(true as any);
-
-    const element = await Page({ params, searchParams });
-    render(element as React.ReactElement);
-
-    expect(screen.queryByRole("link")).toBeNull();
-  });
-});

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

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

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

@@ -1,106 +0,0 @@
-import "@testing-library/jest-dom/vitest";
-import { cleanup, render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { Home, Settings } from "lucide-react";
-import { afterEach, describe, expect, test, vi } from "vitest";
-import { OnboardingOptionsContainer } from "./OnboardingOptionsContainer";
-
-describe("OnboardingOptionsContainer", () => {
-  afterEach(() => {
-    cleanup();
-  });
-
-  test("renders options with links", () => {
-    const options = [
-      {
-        title: "Test Option",
-        description: "Test Description",
-        icon: Home,
-        href: "/test",
-      },
-    ];
-
-    render(<OnboardingOptionsContainer options={options} />);
-    expect(screen.getByText("Test Option")).toBeInTheDocument();
-    expect(screen.getByText("Test Description")).toBeInTheDocument();
-  });
-
-  test("renders options with onClick handler", () => {
-    const onClickMock = vi.fn();
-    const options = [
-      {
-        title: "Click Option",
-        description: "Click Description",
-        icon: Home,
-        onClick: onClickMock,
-      },
-    ];
-
-    render(<OnboardingOptionsContainer options={options} />);
-    expect(screen.getByText("Click Option")).toBeInTheDocument();
-    expect(screen.getByText("Click Description")).toBeInTheDocument();
-  });
-
-  test("renders options with iconText", () => {
-    const options = [
-      {
-        title: "Icon Text Option",
-        description: "Icon Text Description",
-        icon: Home,
-        iconText: "Custom Icon Text",
-      },
-    ];
-
-    render(<OnboardingOptionsContainer options={options} />);
-    expect(screen.getByText("Custom Icon Text")).toBeInTheDocument();
-  });
-
-  test("renders options with loading state", () => {
-    const options = [
-      {
-        title: "Loading Option",
-        description: "Loading Description",
-        icon: Home,
-        isLoading: true,
-      },
-    ];
-
-    render(<OnboardingOptionsContainer options={options} />);
-    expect(screen.getByText("Loading Option")).toBeInTheDocument();
-  });
-
-  test("renders multiple options", () => {
-    const options = [
-      {
-        title: "First Option",
-        description: "First Description",
-        icon: Home,
-      },
-      {
-        title: "Second Option",
-        description: "Second Description",
-        icon: Settings,
-      },
-    ];
-
-    render(<OnboardingOptionsContainer options={options} />);
-    expect(screen.getByText("First Option")).toBeInTheDocument();
-    expect(screen.getByText("Second Option")).toBeInTheDocument();
-  });
-
-  test("calls onClick handler when clicking an option", async () => {
-    const onClickMock = vi.fn();
-    const options = [
-      {
-        title: "Click Option",
-        description: "Click Description",
-        icon: Home,
-        onClick: onClickMock,
-      },
-    ];
-
-    render(<OnboardingOptionsContainer options={options} />);
-    await userEvent.click(screen.getByText("Click Option"));
-    expect(onClickMock).toHaveBeenCalledTimes(1);
-  });
-});

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

@@ -0,0 +1,44 @@
+"use client";
+
+import { usePathname, useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+import formbricks from "@formbricks/js";
+
+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: formbricksEnvironmentId ?? "",
+        appUrl: formbricksApiHost ?? "",
+      });
+
+      formbricks.setUserId(userId);
+      formbricks.setEmail(email);
+    }
+  }, [userId, email, formbricksEnvironmentId, formbricksApiHost, formbricksEnabled]);
+
+  useEffect(() => {
+    if (formbricksEnabled) {
+      formbricks.registerRouteChange();
+    }
+  }, [pathname, searchParams, formbricksEnabled]);
+
+  return null;
+};

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

@@ -1,35 +0,0 @@
-import { SingleContactPage } from "@/modules/ee/contacts/[contactId]/page";
-import { describe, expect, test, vi } from "vitest";
-import Page from "./page";
-
-// mock constants
-vi.mock("@/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",
-  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,
-  SESSION_MAX_AGE: 1000,
-}));
-
-describe("Contact Page Re-export", () => {
-  test("should re-export SingleContactPage", () => {
-    expect(Page).toBe(SingleContactPage);
-  });
-});

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

@@ -1,15 +0,0 @@
-import { ContactsPage } from "@/modules/ee/contacts/page";
-import { describe, expect, test, vi } from "vitest";
-import Page from "./page";
-
-// Mock the actual ContactsPage component
-vi.mock("@/modules/ee/contacts/page", () => ({
-  ContactsPage: () => <div data-testid="contacts-page">Mock Contacts Page</div>,
-}));
-
-describe("Contacts Page Re-export", () => {
-  test("should re-export ContactsPage from the EE module", () => {
-    // Assert that the default export 'Page' is the same as the mocked 'ContactsPage'
-    expect(Page).toBe(ContactsPage);
-  });
-});