Merge branch 'main' into fix/environment-route-cache

Co-authored-by: pandeymangg <anshuman.pandey9999@gmail.com>
Co-authored-by: Anshuman Pandey <54475686+pandeymangg@users.noreply.github.com>

.changeset/config.json

@@ -1,11 +1,11 @@
 {
   "$schema": "https://unpkg.com/@changesets/config@2.2.0/schema.json",
+  "access": "public",
+  "baseBranch": "main",
   "changelog": "@changesets/cli/changelog",
   "commit": false,
   "fixed": [],
+  "ignore": ["@formbricks/demo", "@formbricks/web"],
   "linked": [],
-  "access": "public",
-  "baseBranch": "main",
-  "updateInternalDependencies": "patch",
-  "ignore": ["@formbricks/formbricks-com", "@formbricks/demo", "@formbricks/web"]
+  "updateInternalDependencies": "patch"
 }

.devcontainer/Dockerfile

@@ -1,16 +0,0 @@
-# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 18, 16, 14, 18-bullseye, 16-bullseye, 14-bullseye, 18-buster, 16-buster, 14-buster
-ARG VARIANT=20
-FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
-
-# [Optional] Uncomment this section to install additional OS packages.
-# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
-#     && apt-get -y install --no-install-recommends <your-package-list-here>
-
-# [Optional] Uncomment if you want to install an additional version of node using nvm
-# ARG EXTRA_NODE_VERSION=10
-# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
-
-# [Optional] Uncomment if you want to install more global node modules
-# RUN su node -c "npm install -g <your-package-list-here>"
-
-RUN su node -c "npm install -g pnpm"

.devcontainer/devcontainer.json

@@ -1,29 +1,6 @@
-// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
-// https://github.com/microsoft/vscode-dev-containers/tree/v0.245.2/containers/javascript-node-postgres
-// Update the VARIANT arg in docker-compose.yml to pick a Node.js version
 {
-  "name": "Node.js & PostgreSQL",
-  "dockerComposeFile": "docker-compose.yml",
-  "service": "app",
-  "workspaceFolder": "/workspace",
-
-  // Configure tool-specific properties.
-  "customizations": {
-    // Configure properties specific to VS Code.
-    "vscode": {
-      // Add the IDs of extensions you want installed when the container is created.
-      "extensions": ["dbaeumer.vscode-eslint"]
-    }
-  },
-
-  // Use 'forwardPorts' to make a list of ports inside the container available locally.
-  // This can be used to network with other containers or with the host.
-  "forwardPorts": [3000, 5432, 8025],
-
-  // Use 'postCreateCommand' to run commands after the container is created.
-  "postCreateCommand": "cp .env.example .env && sed -i '/^ENCRYPTION_KEY=/c\\ENCRYPTION_KEY='$(openssl rand -hex 32) .env && sed -i '/^NEXTAUTH_SECRET=/c\\NEXTAUTH_SECRET='$(openssl rand -hex 32) .env && pnpm install && pnpm db:migrate:dev",
-  "postAttachCommand": "pnpm dev --filter=@formbricks/web... --filter=@formbricks/demo...",
-
-  // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
-  "remoteUser": "node"
+  "features": {},
+  "image": "mcr.microsoft.com/devcontainers/universal:2",
+  "postAttachCommand": "pnpm go",
+  "postCreateCommand": "cp .env.example .env && sed -i '/^ENCRYPTION_KEY=/c\\ENCRYPTION_KEY='$(openssl rand -hex 32) .env && sed -i '/^NEXTAUTH_SECRET=/c\\NEXTAUTH_SECRET='$(openssl rand -hex 32) .env && sed -i '/^CRON_SECRET=/c\\CRON_SECRET='$(openssl rand -hex 32) .env && pnpm install && pnpm db:migrate:dev"
 }

.devcontainer/docker-compose.yml

@@ -1,52 +0,0 @@
-version: '3.8'
-
-services:
-  app:
-    build:
-      context: .
-      dockerfile: Dockerfile
-      args:
-        # Update 'VARIANT' to pick an LTS version of Node.js: 20, 18, 16, 14.
-        # Append -bullseye or -buster to pin to an OS version.
-        # Use -bullseye variants on local arm64/Apple Silicon.
-        VARIANT: "20"
-
-    volumes:
-      - ..:/workspace:cached
-
-    # Overrides default command so things don't shut down after the process ends.
-    command: sleep infinity
-
-    # Runs app on the same network as the database container, allows "forwardPorts" in devcontainer.json function.
-    network_mode: service:db
-    # Uncomment the next line to use a non-root user for all processes.
-    # user: node
-
-    # Use "forwardPorts" in **devcontainer.json** to forward an app port locally. 
-    # (Adding the "ports" property to this file will not forward from a Codespace.)
-
-  db:
-    image: postgres:latest
-    restart: unless-stopped
-    volumes:
-      - postgres-data:/var/lib/postgresql/data
-    environment:
-      POSTGRES_PASSWORD: postgres
-      POSTGRES_USER: postgres
-      POSTGRES_DB: formbricks
-    # Add "forwardPorts": ["5432"] to **devcontainer.json** to forward PostgreSQL locally.
-    # (Adding the "ports" property to this file will not forward from a Codespace.)
-
-  mailhog:
-    image: mailhog/mailhog
-    network_mode: service:app
-    logging:
-      driver: "none" # disable saving logs
-        #    ports:
-      #    - 8025:8025 # web ui
-      # 1025:1025 # smtp server
-
-
-
-volumes:
-  postgres-data: null

.env.example

@@ -46,6 +46,9 @@ SMTP_SECURE_ENABLED=0
 SMTP_USER=smtpUser
 SMTP_PASSWORD=smtpPassword
 
+# If set to 0, the server will not require SMTP_USER and SMTP_PASSWORD(default is 1)
+# SMTP_AUTHENTICATED=
+
 # If set to 0, the server will accept connections without requiring authorization from the list of supplied CAs (default is 1). 
 # SMTP_REJECT_UNAUTHORIZED_TLS=0
 
@@ -101,6 +104,11 @@ PASSWORD_RESET_DISABLED=1
 PRIVACY_URL=
 TERMS_URL=
 IMPRINT_URL=
+IMPRINT_ADDRESS=
+
+# Configure Turnstile in signup flow
+# NEXT_PUBLIC_TURNSTILE_SITE_KEY=
+# TURNSTILE_SECRET_KEY=
 
 # Configure Github Login
 GITHUB_ID=
@@ -157,11 +165,11 @@ ENTERPRISE_LICENSE_KEY=
 # 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)
 # DEFAULT_ORGANIZATION_ID=
-# DEFAULT_ORGANIZATION_ROLE=admin
+# DEFAULT_ORGANIZATION_ROLE=owner
 
-# Send new users to customer.io
-# CUSTOMER_IO_API_KEY=
-# CUSTOMER_IO_SITE_ID=
+# Send new users to Brevo
+# BREVO_API_KEY=
+# BREVO_LIST_ID=
 
 # Ignore Rate Limiting across the Formbricks app
 # RATE_LIMITING_DISABLED=1
@@ -180,3 +188,12 @@ UNSPLASH_ACCESS_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=
+
+# NEXT_PUBLIC_INTERCOM_APP_ID=
+# INTERCOM_SECRET_KEY=

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,81 +1,31 @@
 name: Bug report
 description: "Found a bug? Please fill out the sections below. \U0001F44D"
-title: "[BUG]"
-labels: bug
-assignees: []
+type: bug
 body:
-- type: textarea
-  id: issue-summary
-  attributes:
-    label: Issue Summary
-    description: A summary of the issue. This needs to be a clear detailed-rich summary.
-  validations:
-    required: true
-- type: textarea
-  id: steps-to-reproduce
-  attributes:
-    label: Steps to Reproduce
-    value: |
-      1. (for example) Went to ...
-      2. Clicked on...
-      3. ...
-  validations:
-    required: true
-- type: textarea
-  id: expected-behavior
-  attributes:
-    label: Expected behavior
-    description: A clear and concise description of what you expected to happen.
-  validations:
-    required: true
-- type: textarea
-  id: other-information
-  attributes:
-    label: Other information
-  validations:
-    required: false
-- type: textarea
-  id: screenshots
-  attributes:
-    label: Screenshots
-    description: If applicable, add screenshots to help explain your problem.
-  validations:
-    required: false
-- type: checkboxes
-  id: environment
-  attributes:
-    label: Environment
-    options:
-      - label: Formbricks Cloud (app.formbricks.com)
-      - label: Self-hosted Formbricks
-- type: textarea
-  id: desktop-version
-  attributes:
-    label: Desktop (please complete the following information)
-    description: | 
-      examples: 
-      - **OS**: [e.g. iOS]
-      - **Browser**: [e.g. chrome, safari]
-      - **Version**: [e.g. 22]
-    value: |
-      - OS:
-      - Node:
-      - npm: 
-    render: markdown
-  validations:
-    required: true
-- type: markdown
-  id: nodejs-version
-  attributes:
-    value: | 
-      #### Node.JS version
-      
-      [e.g. v18.15.0] 
-- type: markdown
-  id: anything-else
-  attributes:
-    value: |
-      #### Anything else?
-      
-      - Screen recording, console logs, network requests: You can make a recording with [Loom](https://www.loom.com).
-      - Anything else that you think could be an issue?
+  - type: textarea
+    id: issue-summary
+    attributes:
+      label: Issue Summary
+      description: A summary of the issue. This needs to be a clear detailed-rich summary.
+    validations:
+      required: true
+  - type: textarea
+    id: issue-expected-behavior
+    attributes:
+      label: Expected Behavior
+      description: A clear and concise description of what you expected to happen.
+    validations:
+      required: false
+  - type: textarea
+    id: other-information
+    attributes:
+      label: Other information (incl. screenshots, Formbricks version, steps to reproduce,...)
+    validations:
+      required: false
+  - type: dropdown
+    id: environment
+    attributes:
+      label: Your Environment
+      options:
+        - Formbricks Cloud (app.formbricks.com)
+        - Self-hosted Formbricks

.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +1,5 @@
 blank_issues_enabled: false
 contact_links:
   - name: Questions
-    url: https://formbricks.com/discord
-    about: Ask a general question about the project on our Discord server
+    url: https://github.com/formbricks/formbricks/discussions
+    about: Need help selfhosting or ask a general question about the project? Open a discussion

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -1,8 +1,6 @@
 name: Feature request
 description: "Suggest an idea for this project \U0001F680"
-title: "[FEATURE]"
-labels: enhancement
-assignees: []
+type: feature
 body:
   - type: textarea
     id: problem-description
@@ -18,13 +16,6 @@ body:
       description: A clear and concise description of what you want to happen.
     validations:
       required: true
-  - type: textarea
-    id: alternate-solution-description
-    attributes:
-      label: Describe alternatives you've considered
-      description: A clear and concise description of any alternative solutions or features you've considered.
-    validations:
-      required: false
   - type: textarea
     id: additional-context
     attributes:
@@ -33,15 +24,9 @@ body:
     validations:
       required: false
   - type: markdown
-    id: formbricks-info
     attributes:
       value: |
-        ### How we code at Formbricks 🤓
+        ### Additional resources 🤓
 
-        - Follow Best Practices lined out in our [Contributor Docs](https://formbricks.com/docs/contributing/how-we-code)
-        - First time: Please read our [introductory blog post](https://formbricks.com/blog/join-the-formtribe)
-        - All UI components are in the package `formbricks/ui`
-        - Run `pnpm go` to find a demo app to test in-app surveys at `localhost:3002`
-        - Everything is type-safe.
-        - We use **chatGPT** to help refactor code.
-        - Anything unclear? [Ask in Discord](https://formbricks.com/discord)
+        - Check out our [Contributor Docs](https://formbricks.com/docs/developer-docs/contributing/get-started)
+        - Anything unclear? [Ask in Github Discussions](https://github.com/formbricks/formbricks/discussions)

.github/ISSUE_TEMPLATE/oss-gg-hack-submission.yml

@@ -1,33 +0,0 @@
-name: oss.gg hack submission 🕹️
-description: "Submit your contribution for the for the oss.gg hackathon"
-title: "[oss.gg hackathon]"
-labels: 🕹️ oss.gg, player submission
-assignees: []
-body:
-  - type: textarea
-    id: contribution-name
-    attributes:
-      label: What side quest or challenge are you solving?
-      description: Add the name of the side quest or challenge.
-    validations:
-      required: true
-  - type: textarea
-    id: points
-    attributes:
-      label: Points
-      description: How many points are assigned to this contribution?
-    validations:
-      required: true
-  - type: textarea
-    id: description
-    attributes:
-      label: Description
-      description: What's the task your performed?
-    validations:
-  - type: textarea
-    id: proof
-    attributes:
-      label: Provide proof that you've completed the task
-      description: Screenshots, loom recordings, links to the content you shared or interacted with.
-    validations:
-      required: true

.github/ISSUE_TEMPLATE/task.yml

@@ -0,0 +1,11 @@
+name: Task (internal)
+description: "Template for creating a task. Used by the Formbricks Team only \U0001f4e5"
+type: task
+body:
+  - type: textarea
+    id: task-summary
+    attributes:
+      label: Task description
+      description: A clear detailed-rich description of the task.
+    validations:
+      required: true

.github/pull_request_template.md

@@ -4,7 +4,7 @@
 
 <!-- Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change. -->
 
-Fixes # (issue)
+Fixes #(issue)
 
 <!-- Please provide a screenshots or a loom video for visual changes to speed up reviews
  Loom Video: https://www.loom.com/

.github/workflows/build-docs.yml

@@ -0,0 +1,32 @@
+name: Build Docs
+on:
+  workflow_call:
+
+permissions:
+  contents: read
+  
+jobs:
+  build:
+    name: Build Docs
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
+
+      - name: Setup Node.js 20.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20.x
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Install dependencies
+        run: pnpm install --config.platform=linux --config.architecture=x64
+        shell: bash
+
+      - run: |
+          pnpm build --filter=@formbricks/docs...
+        shell: bash

.github/workflows/build-web.yml

@@ -1,6 +1,10 @@
-name: Build web
+name: Build Web
 on:
   workflow_call:
+
+permissions:
+  contents: read
+  
 jobs:
   build:
     name: Build Formbricks-web

.github/workflows/cron-surveyStatusUpdate.yml

@@ -4,9 +4,13 @@ on:
   workflow_dispatch:
   # "Scheduled workflows run on the latest commit on the default or base branch."
   # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
-  # schedule:
-  # Runs “At 00:00.” (see https://crontab.guru)
-  # - cron: "0 0 * * *"
+  schedule:
+    # Runs "At 00:00." (see https://crontab.guru)
+    - cron: "0 0 * * *"
+
+permissions:
+  contents: read
+
 jobs:
   cron-weeklySummary:
     env:

.github/workflows/cron-weeklySummary.yml

@@ -9,6 +9,8 @@ on:
     - cron: "0 8 * * 1"
 jobs:
   cron-weeklySummary:
+    permissions:
+      contents: read    
     env:
       APP_URL: ${{ secrets.APP_URL }}
       CRON_SECRET: ${{ secrets.CRON_SECRET }}

.github/workflows/e2e.yml

@@ -1,9 +1,28 @@
 name: E2E Tests
+
 on:
   workflow_call:
+    secrets:
+      AZURE_CLIENT_ID:
+        required: false
+      AZURE_TENANT_ID:
+        required: false
+      AZURE_SUBSCRIPTION_ID:
+        required: false
+      PLAYWRIGHT_SERVICE_URL:
+        required: false
+      # Add other secrets if necessary
   workflow_dispatch:
+
 env:
   TELEMETRY_DISABLED: 1
+
+permissions:
+  id-token: write
+  contents: read
+  actions: read
+  checks: write
+
 jobs:
   build:
     name: Run E2E Tests
@@ -11,7 +30,7 @@ jobs:
     timeout-minutes: 60
     services:
       postgres:
-        image: postgres:latest
+        image: pgvector/pgvector:pg17
         env:
           POSTGRES_DB: postgres
           POSTGRES_USER: postgres
@@ -50,6 +69,7 @@ jobs:
           sed -i "s/CRON_SECRET=.*/CRON_SECRET=${RANDOM_KEY}/" .env
           sed -i "s/NEXTAUTH_SECRET=.*/NEXTAUTH_SECRET=${RANDOM_KEY}/" .env
           sed -i "s/ENTERPRISE_LICENSE_KEY=.*/ENTERPRISE_LICENSE_KEY=${RANDOM_KEY}/" .env
+          echo "" >> .env
           echo "E2E_TESTING=1" >> .env
         shell: bash
 
@@ -59,7 +79,8 @@ jobs:
 
       - name: Apply Prisma Migrations
         run: |
-          pnpm prisma migrate deploy
+          # pnpm prisma migrate deploy
+          pnpm db:migrate:dev
 
       - name: Run App
         run: |
@@ -81,11 +102,35 @@ jobs:
       - name: Install Playwright
         run: pnpm exec playwright install --with-deps
 
-      - name: Run E2E Tests
+      - name: Set Azure Secret Variables
+        run: |
+          if [[ -n "${{ secrets.AZURE_CLIENT_ID }}" && -n "${{ secrets.AZURE_TENANT_ID }}" && -n "${{ secrets.AZURE_SUBSCRIPTION_ID }}" ]]; then
+            echo "AZURE_ENABLED=true" >> $GITHUB_ENV
+          else
+            echo "AZURE_ENABLED=false" >> $GITHUB_ENV
+          fi
+
+      - name: Azure login
+        if: env.AZURE_ENABLED == 'true'
+        uses: azure/login@v2
+        with:
+          client-id: ${{ secrets.AZURE_CLIENT_ID }}
+          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
+          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
+
+      - name: Run E2E Tests (Azure)
+        if: env.AZURE_ENABLED == 'true'
+        env:
+          PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
+        run: |
+          pnpm test-e2e:azure
+
+      - name: Run E2E Tests (Local)
+        if: env.AZURE_ENABLED == 'false'
         run: |
           pnpm test:e2e
 
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report

.github/workflows/lint.yml

@@ -1,6 +1,10 @@
 name: Lint
 on:
   workflow_call:
+
+permissions:
+  contents: read
+
 jobs:
   build:
     name: Linters
@@ -8,16 +12,16 @@ jobs:
     timeout-minutes: 15
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
       - uses: ./.github/actions/dangerous-git-checkout
 
       - name: Setup Node.js 20.x
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af
         with:
           node-version: 20.x
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2
 
       - name: Install dependencies
         run: pnpm install --config.platform=linux --config.architecture=x64

.github/workflows/pr.yml

@@ -1,5 +1,13 @@
 name: PR Update
 
+# Update permissions to include all necessary ones
+permissions:
+  contents: read
+  pull-requests: read
+  actions: read
+  checks: write
+  id-token: write
+
 on:
   pull_request:
     branches:
@@ -12,56 +20,40 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  changes:
-    name: Detect changes
-    runs-on: ubuntu-latest
-    permissions:
-      pull-requests: read
-    outputs:
-      has-files-requiring-all-checks: ${{ steps.filter.outputs.has-files-requiring-all-checks }}
-    steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/actions/dangerous-git-checkout
-      - uses: dorny/paths-filter@v2
-        id: filter
-        with:
-          filters: |
-            has-files-requiring-all-checks:
-              - "!(**.md|.github/CODEOWNERS)"
-
   test:
     name: Run Unit Tests
-    needs: [changes]
-    if: ${{ needs.changes.outputs.has-files-requiring-all-checks == 'true' }}
     uses: ./.github/workflows/test.yml
     secrets: inherit
 
   lint:
     name: Run Linters
-    needs: [changes]
-    if: ${{ needs.changes.outputs.has-files-requiring-all-checks == 'true' }}
     uses: ./.github/workflows/lint.yml
     secrets: inherit
 
   build:
     name: Build Formbricks-web
-    needs: [changes]
-    if: ${{ needs.changes.outputs.has-files-requiring-all-checks == 'true' }}
     uses: ./.github/workflows/build-web.yml
     secrets: inherit
 
+  docs:
+    name: Build Docs
+    uses: ./.github/workflows/build-docs.yml
+    secrets: inherit
+
   e2e-test:
     name: Run E2E Tests
-    needs: [changes]
-    if: ${{ needs.changes.outputs.has-files-requiring-all-checks == 'true' }}
     uses: ./.github/workflows/e2e.yml
     secrets: inherit
 
   required:
     name: PR Check Summary
-    needs: [lint, test, build, e2e-test]
+    needs: [lint, test, build, e2e-test, docs]
     if: always()
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      checks: write
+      statuses: write
     steps:
       - name: fail if conditional jobs failed
         if: contains(needs.*.result, 'failure') || contains(needs.*.result, 'skipped') || contains(needs.*.result, 'cancelled')

.github/workflows/prepare-release.yml

@@ -0,0 +1,62 @@
+name: Prepare release
+run-name: Prepare release ${{ inputs.next_version }}
+
+on:
+  workflow_dispatch:
+    inputs:
+      next_version:
+        required: true
+        type: string
+        description: "Version name"
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  prepare_release:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
+
+      - uses: ./.github/actions/dangerous-git-checkout
+
+      - name: Configure git
+        run: |
+          git config --local user.email "github-actions@github.com"
+          git config --local user.name "GitHub Actions"
+
+      - name: Setup Node.js 20.x
+        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af
+        with:
+          node-version: 20.x
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2
+
+      - name: Install dependencies
+        run: pnpm install --config.platform=linux --config.architecture=x64
+
+      - name: Bump version
+        run: |
+          cd apps/web
+          pnpm version ${{ inputs.next_version }} --no-workspaces-update
+
+      - name: Commit changes and create a branch
+        run: |
+          branch_name="release-v${{ inputs.next_version }}"
+          git checkout -b "$branch_name"
+          git add .
+          git commit -m "chore: release v${{ inputs.next_version }}"
+          git push origin "$branch_name"
+
+      - name: Create pull request
+        run: |
+          gh pr create \
+            --base main \
+            --head "release-v${{ inputs.next_version }}" \
+            --title "chore: bump version to v${{ inputs.next_version }}" \
+            --body "This PR contains the changes for the v${{ inputs.next_version }} release."
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release-changesets.yml

@@ -6,6 +6,11 @@ on:
   #  branches:
   #    - main
 
+permissions:
+  contents: write
+  pull-requests: write
+  packages: write
+
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 
 env:

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

@@ -1,62 +0,0 @@
-name: Docker for Data Migrations
-
-on:
-  workflow_dispatch:
-  push:
-    tags:
-      - "v*"
-
-env:
-  REGISTRY: ghcr.io
-  IMAGE_NAME: formbricks/data-migrations
-  DATABASE_URL: "postgresql://postgres:postgres@postgres:5432/formbricks?schema=public"
-
-jobs:
-  build-and-push:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      packages: write
-      id-token: write
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3
-
-      - name: Install cosign
-        if: github.event_name != 'pull_request'
-        uses: sigstore/cosign-installer@v3.5.0
-
-      - name: Log in to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ${{ env.REGISTRY }}
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Extract Docker metadata
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
-          tags: |
-            type=ref,event=tag
-            type=raw,value=${{ github.ref_name }}
-            type=raw,value=latest
-
-      - name: Build and push Docker image
-        uses: docker/build-push-action@v3
-        with:
-          context: .
-          file: ./packages/database/Dockerfile
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          build-args: |
-            DATABASE_URL=${{ env.DATABASE_URL }}
-
-      - name: Sign the published Docker image
-        if: ${{ github.event_name != 'pull_request' }}
-        run: |
-          cosign sign --yes ghcr.io/${{ env.IMAGE_NAME }}:${{ github.ref_name }}
-          cosign sign --yes ghcr.io/${{ env.IMAGE_NAME }}:latest

.github/workflows/release-docker.yml

@@ -8,6 +8,8 @@ on:
 jobs:
   release-image-on-dockerhub:
     name: Release on Dockerhub
+    permissions:
+      contents: read
     runs-on: ubuntu-latest
     env:
       TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}

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

@@ -20,6 +20,20 @@ jobs:
         id: lint_pr_title
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          types: |
+            fix
+            feat
+            chore
+            docs
+            style
+            refactor
+            perf
+            test
+            build
+            ci
+            revert
+            ossgg
 
       - uses: marocchino/sticky-pull-request-comment@v2
         # When the previous steps fails, the workflow would stop. By adding this

.github/workflows/sonarqube.yml

@@ -0,0 +1,52 @@
+name: SonarQube
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [opened, synchronize, reopened]
+permissions:
+  contents: read
+jobs:
+  sonarqube:
+    name: SonarQube
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # Shallow clones should be disabled for a better relevancy of analysis
+
+      - name: Setup Node.js 20.x
+        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af
+        with:
+          node-version: 20.x
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2
+
+      - name: Install dependencies
+        run: pnpm install --config.platform=linux --config.architecture=x64
+
+      - name: create .env
+        run: cp .env.example .env
+
+      - name: Generate Random ENCRYPTION_KEY, CRON_SECRET & NEXTAUTH_SECRET and fill in .env
+        run: |
+          RANDOM_KEY=$(openssl rand -hex 32)
+          sed -i "s/ENCRYPTION_KEY=.*/ENCRYPTION_KEY=${RANDOM_KEY}/" .env
+          sed -i "s/CRON_SECRET=.*/CRON_SECRET=${RANDOM_KEY}/" .env
+          sed -i "s/NEXTAUTH_SECRET=.*/NEXTAUTH_SECRET=${RANDOM_KEY}/" .env
+
+      - name: Run tests with coverage
+        run: |
+          cd apps/web
+          pnpm test:coverage
+          cd ../../
+          # The Vitest coverage config is in your vite.config.mts
+
+      - name: SonarQube Scan
+        uses: SonarSource/sonarqube-scan-action@bfd4e558cda28cda6b5defafb9232d191be8c203
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Needed to get PR information, if any
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

.github/workflows/test.yml

@@ -6,6 +6,8 @@ jobs:
     name: Unit Tests
     runs-on: ubuntu-latest
     timeout-minutes: 15
+    permissions:
+      contents: read
 
     steps:
       - uses: actions/checkout@v3

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

@@ -0,0 +1,39 @@
+name: Check Missing Translations
+
+permissions:
+  contents: read
+
+on:
+  workflow_dispatch:
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  check-missing-translations:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: Install Tolgee CLI
+        run: npm install -g @tolgee/cli
+
+      - name: Compare Tolgee Keys
+        id: compare
+        run: |
+          tolgee compare --api-key ${{ secrets.TOLGEE_API_KEY }} > compare_output.txt
+          cat compare_output.txt
+
+      - name: Check for Missing Translations
+        run: |
+          if grep -q "new key found" compare_output.txt; then
+            echo "New keys found that may require translations:"
+            exit 1
+          else
+            echo "No new keys found."
+          fi

.github/workflows/tolgee.yml

@@ -0,0 +1,42 @@
+name: Tolgee Tagging on PR Merge
+permissions:
+  contents: read
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  tag-production-keys:
+    name: Tag Production Keys
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18 # Ensure compatibility with your project
+
+      - name: Install Tolgee CLI
+        run: npm install -g @tolgee/cli
+
+      - name: Tag Production Keys
+        run: |
+          BRANCH_NAME=${GITHUB_REF##*/}
+          npx tolgee tag \
+            --api-key ${{ secrets.TOLGEE_API_KEY }} \
+            --filter-extracted \
+            --filter-tag "draft: ${BRANCH_NAME}" \
+            --tag production \
+            --untag "draft: ${BRANCH_NAME}"
+
+      - name: Tag Deprecated Keys
+        run: |
+          npx tolgee tag \
+            --api-key ${{ secrets.TOLGEE_API_KEY }} \
+            --filter-not-extracted --filter-tag production \
+            --tag deprecated --untag production

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

@@ -3,7 +3,7 @@ name: "Welcome new contributors"
 on:
   issues:
     types: opened
-  pull_request:
+  pull_request_target:
     types: opened
 
 permissions:
@@ -22,6 +22,6 @@ jobs:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           pr-message: |-
             Thank you so much for making your first Pull Request and taking the time to improve Formbricks! 🚀🙏❤️
-            Feel free to join the conversation at [Discord](https://formbricks.com/discord)
+            Feel free to join the conversation on [Github Discussions](https://github.com/formbricks/formbricks/discussions) if you need any help or have any questions. 😊
           issue-message: |
             Thank you for opening your first issue! 🙏❤️ One of our team members will review it and get back to you as soon as it possible. 😊

.gitignore

@@ -35,9 +35,6 @@ yarn-error.log*
 !packages/database/.env
 !apps/web/.env
 
-# Prisma generated files
-packages/database/zod
-
 # turbo
 .turbo
 
@@ -58,3 +55,8 @@ packages/lib/uploads
 # Vite Timestamps
 *vite.config.*.timestamp-*
 
+# js compiled assets
+apps/web/public/js
+
+
+packages/database/migrations

.gitpod.Dockerfile

@@ -1,6 +0,0 @@
-FROM gitpod/workspace-full
-
-# Install custom tools, runtime, etc.
-RUN brew install yq 
-
-RUN pnpm install turbo --global

.gitpod.yml

@@ -1,77 +0,0 @@
-tasks:
-  - name: demo
-    init: |
-      gp sync-await init-install && 
-      bash .gitpod/setup-demo.bash
-    command: |
-      cd apps/demo && 
-      cp .env.example .env &&
-      sed -i -r "s#^(NEXT_PUBLIC_FORMBRICKS_API_HOST=).*#\1 $(gp url 3000)#" .env &&
-      gp sync-await init && 
-      turbo --filter "@formbricks/demo" go
-
-  - name: website
-    command: gp sync-await init && turbo --filter "@formbricks/formbricks-com" dev
-
-  - name: Init Formbricks
-    init: |
-      cp .env.example .env &&
-      bash .gitpod/init.bash && 
-      turbo --filter "@formbricks/js" build && 
-      gp sync-done init-install
-    command: |
-      gp sync-done init && 
-      gp tasks list &&
-      gp ports await 3002 && gp ports await 3000 && gp open apps/demo/.env && gp preview $(gp url 3002) --external
-
-  - name: web
-    init: |
-      gp sync-await init-install && 
-      bash .gitpod/setup-web.bash &&
-      turbo --filter "@formbricks/database" db:down
-    command: |
-      gp sync-await init &&
-      cp .env.example .env &&
-      sed -i -r "s#^(WEBAPP_URL=).*#\1 $(gp url 3000)#" .env &&
-      RANDOM_ENCRYPTION_KEY=$(openssl rand -hex 32)
-      sed -i 's/^ENCRYPTION_KEY=.*/ENCRYPTION_KEY='"$RANDOM_ENCRYPTION_KEY"'/' .env
-      turbo --filter "@formbricks/web" go
-
-image:
-  file: .gitpod.Dockerfile
-
-ports:
-  - port: 3000
-    visibility: public
-    onOpen: open-browser
-  - port: 3001
-    visibility: public
-    onOpen: ignore
-  - port: 3002
-    visibility: public
-    onOpen: ignore
-  - port: 5432
-    visibility: public
-    onOpen: ignore
-  - port: 1025
-    visibility: public
-    onOpen: ignore
-  - port: 8025
-    visibility: public
-    onOpen: open-browser
-
-github:
-  prebuilds:
-    master: true
-    pullRequests: true
-    addComment: true
-
-vscode:
-  extensions:
-    - "ban.spellright"
-    - "bradlc.vscode-tailwindcss"
-    - "DavidAnson.vscode-markdownlint"
-    - "dbaeumer.vscode-eslint"
-    - "esbenp.prettier-vscode"
-    - "Prisma.prisma"
-    - "yzhang.markdown-all-in-one"

.husky/post-checkout

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

.husky/post-commit

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

.husky/pre-commit

@@ -1 +1,5 @@
-pnpm lint-staged
+pnpm lint-staged
+pnpm tolgee-pull || true 
+echo "{\"branchName\": \"main\"}" > ../branch.json
+git add branch.json packages/lib/messages/*.json
+

.npmrc

@@ -5,4 +5,5 @@ shared-workspace-shrinkwrap = true
 access = public
 enable-pre-post-scripts = true
 legacy-peer-deps=true
-node-linker=hoisted
+node-linker=hoisted
+save-exact=true

.nvmrc

@@ -0,0 +1 @@
+22.1.0

.prettierrc.js

@@ -2,5 +2,10 @@ const baseConfig = require("./packages/config-prettier/prettier-preset");
 
 module.exports = {
   ...baseConfig,
-  plugins: ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
+  plugins: [
+    "@trivago/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss",
+    "prettier-plugin-sort-json",
+  ],
+  jsonRecursiveSort: true,
 };

.tolgeerc.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "https://docs.tolgee.io/cli-schema.json",
+  "format": "JSON_TOLGEE",
+  "patterns": ["./apps/web/**/*.ts?(x)"],
+  "projectId": 10304,
+  "pull": {
+    "path": "./packages/lib/messages"
+  },
+  "push": {
+    "files": [
+      {
+        "language": "en-US",
+        "path": "./packages/lib/messages/en-US.json"
+      },
+      {
+        "language": "de-DE",
+        "path": "./packages/lib/messages/de-DE.json"
+      },
+      {
+        "language": "fr-FR",
+        "path": "./packages/lib/messages/fr-FR.json"
+      },
+      {
+        "language": "pt-BR",
+        "path": "./packages/lib/messages/pt-BR.json"
+      }
+    ],
+    "forceMode": "OVERRIDE"
+  },
+  "strictNamespace": false
+}

.vscode/launch.json

@@ -1,21 +1,21 @@
 {
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
   "configurations": [
     {
       "name": "Launch localhost:3002",
-      "type": "firefox",
-      "request": "launch",
       "reAttach": true,
+      "request": "launch",
+      "type": "firefox",
       "url": "http://localhost:3002/",
       "webRoot": "${workspaceFolder}"
     },
     {
       "name": "Attach",
-      "type": "firefox",
-      "request": "attach"
+      "request": "attach",
+      "type": "firefox"
     }
-  ]
+  ],
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0"
 }

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "typescript.preferences.importModuleSpecifier": "non-relative"
+  "typescript.preferences.importModuleSpecifier": "non-relative",
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

CONTRIBUTING.md

@@ -16,15 +16,15 @@ Are you brimming with brilliant ideas? For new features that can elevate Formbri
 
 Ready to dive into the code and make a real impact? Here's your path:
 
-1. **Read our Best Practices**: [It takes 5 minutes](https://formbricks.com/docs/contributing/how-we-code) but will help you save hours 🤓
+1. **Read our Best Practices**: [It takes 5 minutes](https://formbricks.com/docs/developer-docs/contributing/get-started) but will help you save hours 🤓
 
-1. **Fork the Repository:** Fork our repository or use [Gitpod](https://formbricks.com/docs/contributing/gitpod)
+1. **Fork the Repository:** Fork our repository or use [Gitpod](https://gitpod.io) or use [Github Codespaces](https://github.com/features/codespaces) to get started instantly.
 
 1. **Tweak and Transform:** Work your coding magic and apply your changes.
 
 1. **Pull Request Act:** If you're ready to go, craft a new pull request closely following our PR template 🙏
 
-Would you prefer a chat before you dive into a lot of work? Our [Discord server](https://formbricks.com/discord) is your harbor. Share your thoughts, and we'll meet you there with open arms. We're responsive and friendly, promise!
+Would you prefer a chat before you dive into a lot of work? [Github Discussions](https://github.com/formbricks/formbricks/discussions) is your harbor. Share your thoughts, and we'll meet you there with open arms. We're responsive and friendly, promise!
 
 ## 🚀 Aspiring Features
 

LICENSE

@@ -1,9 +1,9 @@
-Copyright (c) 2023 Formbricks GmbH
+Copyright (c) 2024 Formbricks GmbH
 
 Portions of this software are licensed as follows:
 
-- All content that resides under the "packages/ee/" directory of this repository, if that directory exists, is licensed under the license defined in "packages/ee/LICENSE".
-- All content that resides under the "packages/js/", "packages/errors/" 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 "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/react-native/" 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.
 

README.md

@@ -1,5 +1,7 @@
 <div id="top"></div>
 
+<p align="center">Help us grow and star us on Github! ⭐️</p>
+
 <p align="center">
 
 <a href="https://formbricks.com">
@@ -13,12 +15,12 @@
 <p align="center">
 Harvest user-insights, build irresistible experiences.
 <br />
-<a href="https://formbricks.com/">Website</a> | <a href="https://formbricks.com/discord">Join Discord community</a>
+<a href="https://formbricks.com/">Website</a>
 </p>
 </p>
 
 <p align="center">
-<a href="https://github.com/formbricks/formbricks/blob/main/LICENSE"><img src="https://img.shields.io/badge/License-AGPL-purple" alt="License"></a> <a href="https://formbricks.com/discord"><img src="https://img.shields.io/discord/979077669410979880?label=Discord&logo=discord&logoColor=%23fff" alt="Join Formbricks Discord"></a> <a href="https://github.com/formbricks/formbricks/stargazers"><img src="https://img.shields.io/github/stars/formbricks/formbricks?logo=github" alt="Github Stars"></a>
+<a href="https://github.com/formbricks/formbricks/blob/main/LICENSE"><img src="https://img.shields.io/badge/License-AGPL-purple" alt="License"></a> <a href="https://github.com/formbricks/formbricks/stargazers"><img src="https://img.shields.io/github/stars/formbricks/formbricks?logo=github" alt="Github Stars"></a>
 <a href="https://news.ycombinator.com/item?id=32303986"><img src="https://img.shields.io/badge/Hacker%20News-122-%23FF6600" alt="Hacker News"></a>
 <a href="[https://www.producthunt.com/products/formbricks](https://www.producthunt.com/posts/formbricks)"><img src="https://img.shields.io/badge/Product%20Hunt-455-orange?logo=producthunt&logoColor=%23fff" alt="Product Hunt"></a>
 <a href="https://github.blog/2023-04-12-github-accelerator-our-first-cohort-and-whats-next/"><img src="https://img.shields.io/badge/2023-blue?logo=github&label=Github%20Accelerator" alt="Github Accelerator"></a>
@@ -226,14 +228,14 @@ The Formbricks core application is licensed under the [AGPLv3 Open Source Licens
 
 ### The Enterprise Edition
 
-Additional to the AGPL licensed Formbricks core, this repository contains code licensed under an Enterprise license. The [code](https://github.com/formbricks/formbricks/tree/main/packages/ee) and [license](https://github.com/formbricks/formbricks/blob/main/packages/ee/LICENSE) for the enterprise functionality can be found in the `/packages/ee` folder of this repository. This additional functionality is not part of the AGPLv3 licensed Formbricks core and is designed to meet the needs of larger teams and enterprises. This advanced functionality is already included in the Docker images, but you need an [Enterprise License Key](https://formbricks.com/docs/self-hosting/enterprise) to unlock it.
+Additional to the AGPL licensed Formbricks core, this repository contains code licensed under an Enterprise license. The [code](https://github.com/formbricks/formbricks/tree/main/apps/web/modules/ee) and [license](https://github.com/formbricks/formbricks/blob/main/apps/web/modules/ee/LICENSE) for the enterprise functionality can be found in the `/apps/web/modules/ee` folder of this repository. This additional functionality is not part of the AGPLv3 licensed Formbricks core and is designed to meet the needs of larger teams and enterprises. This advanced functionality is already included in the Docker images, but you need an [Enterprise License Key](https://formbricks.com/docs/self-hosting/enterprise) to unlock it.
 
 ### White-Labeling Formbricks and Other Licensing Needs
 
-We currently do not offer Formbricks white-labeled. Any other needs? [Send us an email](mailto:hola@formbricks.com).
+We currently do not offer Formbricks white-labeled. That means that we don't sell a license which let's other companies resell Formbricks to third parties under their name nor take parts (like the survey editor) out of Formbricks to add to their own software products. Any other needs? [Send us an email](mailto:hola@formbricks.com).
 
 ### Why charge for Enterprise Features?
 
-The Enterprise Edition and White-Label Licenses allow us to fund the development of Formbricks sustainably. It guarantees that the open-source surveying infrastructure we're building will be around for decades to come.
+The Enterprise Edition allows us to fund the development of Formbricks sustainably. It guarantees that the free and open-source surveying infrastructure we're building will be around for decades to come.
 
 <p align="right"><a href="#top">🔼 Back to top</a></p>

SECURITY.md

@@ -1,7 +1,7 @@
 # Security Policy of Formbricks
 
 This is Formbrick's security policy. Please reach out to us
-on our Discord or, if privately, via <security@formbricks.com>
+on Github or, if privately, via <security@formbricks.com>
 
 ## Introduction
 
@@ -40,7 +40,7 @@ We invite you to report if:
 
 Avoid reporting if:
 
-- Assistance is needed to optimize Formbricks for security – please engage on our Discord for this.
+- Assistance is needed to optimize Formbricks for security – please engage on Github Discussions for this.
 - Help is required for applying security-related updates.
 - The concern is not related to security.
 
@@ -51,13 +51,13 @@ In the interest of responsibly managing vulnerabilities, please adhere to the fo
 > Do not reveal the problem to others until it has been resolved.
 
 1. **Send a Detailed Report**:
-   - Address emails to [security@formbricks.com](mailto:security@formbricks.com).
+   - Raise a security report on [Github](https://github.com/formbricks/formbricks/issues/new/choose) or send an email to [security@formbricks.com](mailto:security@formbricks.com).
    - Include:
      - Problem description.
      - Detailed, reproducible steps, with screenshots where possible.
      - Affected version(s).
      - Known possible mitigations.
-     - Your Discord username or preferred contact method.
+     - Your preferred contact method.
 2. **Acknowledgement of Receipt**:
    - Our security team will acknowledge receipt and provide an initial response within 48 hours.
    - Following verification of the vulnerability and the fix, a release plan will be formulated, with the fix deployed between 7 to 28 days, depending on the severity and complexity.

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

@@ -1,2 +1,2 @@
-EXPO_PUBLIC_API_HOST=http://192.168.178.20:3000
-EXPO_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=clzr04nkd000bcdl110j0ijyq
+EXPO_PUBLIC_APP_URL=http://192.168.0.197:3000
+EXPO_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=cm5p0cs7r000819182b32j0a1

apps/demo-react-native/app.json

@@ -1,32 +1,33 @@
 {
   "expo": {
-    "name": "react-native-demo",
-    "slug": "react-native-demo",
-    "version": "1.0.0",
-    "orientation": "portrait",
-    "icon": "./assets/icon.png",
-    "userInterfaceStyle": "light",
-    "splash": {
-      "image": "./assets/splash.png",
-      "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
-    },
-    "jsEngine": "hermes",
-    "assetBundlePatterns": ["**/*"],
-    "ios": {
-      "supportsTablet": true,
-      "infoPlist": {
-        "NSCameraUsageDescription": "Take pictures for certain activities.",
-        "NSPhotoLibraryUsageDescription": "Select pictures for certain activities.",
-        "NSMicrophoneUsageDescription": "Need microphone access for recording videos."
-      }
-    },
     "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png",
-        "backgroundColor": "#ffffff"
+        "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/package.json

@@ -13,16 +13,18 @@
   "dependencies": {
     "@formbricks/js": "workspace:*",
     "@formbricks/react-native": "workspace:*",
-    "expo": "^51.0.26",
-    "expo-status-bar": "~1.12.1",
-    "react": "^18.2.0",
-    "react-native": "^0.74.4",
-    "react-native-webview": "13.8.6"
+    "@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.25.2",
-    "@types/react": "~18.2.79",
-    "typescript": "^5.3.3"
+    "@babel/core": "7.26.0",
+    "@types/react": "18.3.18",
+    "typescript": "5.7.2"
   },
   "private": true
 }

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

@@ -1,6 +1,14 @@
 import { StatusBar } from "expo-status-bar";
+import React, { type JSX } from "react";
 import { Button, LogBox, StyleSheet, Text, View } from "react-native";
-import Formbricks, { track } from "@formbricks/react-native";
+import Formbricks, {
+  logout,
+  setAttribute,
+  setAttributes,
+  setLanguage,
+  setUserId,
+  track,
+} from "@formbricks/react-native";
 
 LogBox.ignoreAllLogs();
 
@@ -9,35 +17,92 @@ export default function App(): JSX.Element {
     throw new Error("EXPO_PUBLIC_FORMBRICKS_ENVIRONMENT_ID is required");
   }
 
-  if (!process.env.EXPO_PUBLIC_API_HOST) {
-    throw new Error("EXPO_PUBLIC_API_HOST is required");
+  if (!process.env.EXPO_PUBLIC_APP_URL) {
+    throw new Error("EXPO_PUBLIC_APP_URL is required");
   }
 
-  const config = {
-    environmentId: process.env.EXPO_PUBLIC_FORMBRICKS_ENVIRONMENT_ID,
-    apiHost: process.env.EXPO_PUBLIC_API_HOST,
-    userId: "random-user-id",
-    attributes: {
-      language: "en",
-      testAttr: "attr-test",
-    },
-  };
-
   return (
     <View style={styles.container}>
       <Text>Formbricks React Native SDK Demo</Text>
 
-      <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);
-          });
-        }}
-      />
+      <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 initConfig={config} />
+
+      <Formbricks
+        appUrl={process.env.EXPO_PUBLIC_APP_URL as string}
+        environmentId={process.env.EXPO_PUBLIC_FORMBRICKS_ENVIRONMENT_ID as string}
+      />
     </View>
   );
 }

apps/demo-react-native/tsconfig.json

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

apps/demo/.eslintrc.js

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

apps/demo/components/SurveySwitch.tsx

@@ -1,22 +0,0 @@
-interface SurveySwitchProps {
-  value: "website" | "app";
-  formbricks: any;
-}
-
-export const SurveySwitch = ({ value, formbricks }: SurveySwitchProps) => {
-  return (
-    <select
-      value={value}
-      onChange={(v) => {
-        formbricks.logout();
-        window.location.href = `/${v.target.value}`;
-      }}>
-      <option value="website" className="h-10 px-4 hover:bg-slate-100">
-        Website Surveys
-      </option>
-      <option value="app" className="hover:bg-slate-10 h-10 px-4">
-        App Surveys
-      </option>
-    </select>
-  );
-};

apps/demo/components/layout-app.tsx

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

apps/demo/components/sidebar.tsx

@@ -25,7 +25,7 @@ const secondaryNavigation = [
   { name: "Privacy", href: "#", icon: ShieldCheckIcon },
 ];
 
-export const Sidebar = () => {
+export function Sidebar(): React.JSX.Element {
   return (
     <div className="flex flex-grow flex-col overflow-y-auto bg-cyan-700 pb-4 pt-5">
       <nav
@@ -62,4 +62,4 @@ export const Sidebar = () => {
       </nav>
     </div>
   );
-};
+}

apps/demo/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/demo/lib/utils.ts

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

apps/demo/next-env.d.ts

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

apps/demo/next.config.mjs

@@ -1,15 +1,5 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: true,
-  async redirects() {
-    return [
-      {
-        source: "/",
-        destination: "/app",
-        permanent: false,
-      },
-    ];
-  },
   images: {
     remotePatterns: [
       {

apps/demo/package.json

@@ -4,22 +4,21 @@
   "private": true,
   "scripts": {
     "clean": "rimraf .turbo node_modules .next",
-    "dev": "next dev -p 3002 --turbo",
-    "go": "next dev -p 3002",
+    "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:*",
-    "@formbricks/ui": "workspace:*",
-    "lucide-react": "^0.418.0",
-    "next": "14.2.5",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "lucide-react": "0.468.0",
+    "next": "15.1.2",
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   },
   "devDependencies": {
-    "@formbricks/eslint-config": "workspace:*",
-    "@formbricks/config-typescript": "workspace:*"
+    "@formbricks/config-typescript": "workspace:*",
+    "@formbricks/eslint-config": "workspace:*"
   }
 }

apps/demo/pages/_app.tsx

@@ -1,8 +1,8 @@
 import type { AppProps } from "next/app";
 import Head from "next/head";
-import "../styles/globals.css";
+import "../globals.css";
 
-const App = ({ Component, pageProps }: AppProps) => {
+export default function App({ Component, pageProps }: AppProps): React.JSX.Element {
   return (
     <>
       <Head>
@@ -17,6 +17,4 @@ const App = ({ Component, pageProps }: AppProps) => {
       <Component {...pageProps} />
     </>
   );
-};
-
-export default App;
+}

apps/demo/pages/_document.tsx

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

apps/demo/pages/index.tsx

@@ -1,13 +1,12 @@
 import Image from "next/image";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import formbricks from "@formbricks/js/app";
-import { SurveySwitch } from "../../components/SurveySwitch";
-import fbsetup from "../../public/fb-setup.png";
+import formbricks from "@formbricks/js";
+import fbsetup from "../public/fb-setup.png";
 
-declare const window: any;
+declare const window: Window;
 
-const AppPage = ({}) => {
+export default function AppPage(): React.JSX.Element {
   const [darkMode, setDarkMode] = useState(false);
   const router = useRouter();
 
@@ -20,50 +19,58 @@ const AppPage = ({}) => {
   }, [darkMode]);
 
   useEffect(() => {
-    // enable Formbricks debug mode by adding formbricksDebug=true GET parameter
-    const addFormbricksDebugParam = () => {
-      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);
+    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) {
+        const userId = "THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING";
+        const userInitAttributes = {
+          language: "de",
+          "Init Attribute 1": "eight",
+          "Init Attribute 2": "two",
+        };
+
+        void formbricks.init({
+          environmentId: process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID,
+          apiHost: process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST,
+          userId,
+          attributes: userInitAttributes,
+        });
+      }
+
+      // 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();
+          });
+        };
       }
     };
 
-    addFormbricksDebugParam();
-
-    if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
-      const userId = "THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING";
-      const userInitAttributes = {
-        language: "de",
-        "Init Attribute 1": "eight",
-        "Init Attribute 2": "two",
-      };
-
-      formbricks.init({
-        environmentId: process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID,
-        apiHost: process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST,
-        userId,
-        attributes: userInitAttributes,
-      });
-    }
-
-    // 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", handleRouteChange);
-
-      return () => {
-        router.events.off("routeChangeComplete", handleRouteChange);
-      };
-    }
-  }, []);
+    initFormbricks();
+  }, [router.events]);
 
   return (
-    <div className="h-screen bg-white px-12 py-6 dark:bg-slate-800">
+    <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">
-          <SurveySwitch value="app" formbricks={formbricks} />
           <div>
             <h1 className="text-2xl font-bold text-slate-900 dark:text-white">
               Formbricks In-product Survey Demo App
@@ -76,8 +83,11 @@ const AppPage = ({}) => {
         </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)}>
+          onClick={() => {
+            setDarkMode(!darkMode);
+          }}>
           {darkMode ? "Toggle Light Mode" : "Toggle Dark Mode"}
         </button>
       </div>
@@ -98,8 +108,8 @@ const AppPage = ({}) => {
                   {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>
-                  <span className="relative inline-flex h-3 w-3 rounded-full bg-green-500"></span>
+                  <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>
@@ -110,14 +120,11 @@ const AppPage = ({}) => {
               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 className="max-h-[40vh] overflow-y-auto py-4">
-              <LogsContainer />
-            </div> */}
           </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-800">
+          <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">
               Reset person / pull data from Formbricks app
             </h3>
@@ -127,8 +134,9 @@ const AppPage = ({}) => {
             </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={() => {
-                formbricks.reset();
+                void formbricks.reset();
               }}>
               Reset
             </button>
@@ -140,7 +148,9 @@ const AppPage = ({}) => {
 
           <div className="p-6">
             <div>
-              <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">
+              <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>
@@ -149,6 +159,7 @@ const AppPage = ({}) => {
                 This button sends a{" "}
                 <a
                   href="https://formbricks.com/docs/actions/no-code"
+                  rel="noopener noreferrer"
                   className="underline dark:text-blue-500"
                   target="_blank">
                   No Code Action
@@ -156,6 +167,7 @@ const AppPage = ({}) => {
                 as long as you created it beforehand in the Formbricks App.{" "}
                 <a
                   href="https://formbricks.com/docs/actions/no-code"
+                  rel="noopener noreferrer"
                   target="_blank"
                   className="underline dark:text-blue-500">
                   Here are instructions on how to do it.
@@ -166,8 +178,9 @@ const AppPage = ({}) => {
           <div className="p-6">
             <div>
               <button
+                type="button"
                 onClick={() => {
-                  formbricks.setAttribute("Plan", "Free");
+                  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;
@@ -179,6 +192,7 @@ const AppPage = ({}) => {
                 <a
                   href="https://formbricks.com/docs/attributes/custom-attributes"
                   target="_blank"
+                  rel="noopener noreferrer"
                   className="underline dark:text-blue-500">
                   attribute
                 </a>{" "}
@@ -189,8 +203,9 @@ const AppPage = ({}) => {
           <div className="p-6">
             <div>
               <button
+                type="button"
                 onClick={() => {
-                  formbricks.setAttribute("Plan", "Paid");
+                  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;
@@ -202,6 +217,7 @@ const AppPage = ({}) => {
                 <a
                   href="https://formbricks.com/docs/attributes/custom-attributes"
                   target="_blank"
+                  rel="noopener noreferrer"
                   className="underline dark:text-blue-500">
                   attribute
                 </a>{" "}
@@ -212,8 +228,9 @@ const AppPage = ({}) => {
           <div className="p-6">
             <div>
               <button
+                type="button"
                 onClick={() => {
-                  formbricks.setEmail("test@web.com");
+                  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
@@ -225,6 +242,7 @@ const AppPage = ({}) => {
                 <a
                   href="https://formbricks.com/docs/attributes/identify-users"
                   target="_blank"
+                  rel="noopener noreferrer"
                   className="underline dark:text-blue-500">
                   user email
                 </a>{" "}
@@ -236,6 +254,4 @@ const AppPage = ({}) => {
       </div>
     </div>
   );
-};
-
-export default AppPage;
+}

apps/demo/pages/website/index.tsx

@@ -1,143 +0,0 @@
-import Image from "next/image";
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import formbricks from "@formbricks/js/website";
-import { SurveySwitch } from "../../components/SurveySwitch";
-import fbsetup from "../../public/fb-setup.png";
-
-declare const window: any;
-
-const AppPage = ({}) => {
-  const [darkMode, setDarkMode] = useState(false);
-  const router = useRouter();
-
-  useEffect(() => {
-    if (darkMode) {
-      document.body.classList.add("dark");
-    } else {
-      document.body.classList.remove("dark");
-    }
-  }, [darkMode]);
-
-  useEffect(() => {
-    // enable Formbricks debug mode by adding formbricksDebug=true GET parameter
-    const addFormbricksDebugParam = () => {
-      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) {
-      const defaultAttributes = {
-        language: "en",
-      };
-
-      formbricks.init({
-        environmentId: process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID,
-        apiHost: process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST,
-        attributes: defaultAttributes,
-      });
-    }
-
-    // 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", handleRouteChange);
-
-      return () => {
-        router.events.off("routeChangeComplete", handleRouteChange);
-      };
-    }
-  });
-
-  return (
-    <div className="h-screen bg-white px-12 py-6 dark:bg-slate-800">
-      <div className="flex flex-col items-center justify-between md:flex-row">
-        <div className="flex flex-col items-center gap-2 sm:flex-row">
-          <SurveySwitch value="website" formbricks={formbricks} />
-          <div>
-            <h1 className="text-2xl font-bold text-slate-900 dark:text-white">
-              Formbricks Website 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
-          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" priority />
-
-            <div className="mt-4 flex-col items-start text-sm text-slate-700 sm:flex sm:items-center sm:text-base dark:text-slate-300">
-              <p className="mb-1 sm:mb-0 sm:mr-2">You&apos;re connected with env:</p>
-              <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>
-                  <span className="relative inline-flex h-3 w-3 rounded-full bg-green-500"></span>
-                </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 className="max-h-[40vh] overflow-y-auto py-4">
-              <LogsContainer />
-            </div> */}
-          </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-800">
-            <h3 className="text-lg font-semibold dark:text-white">
-              Reset person / pull data from Formbricks app
-            </h3>
-            <p className="text-slate-700 dark:text-slate-300">
-              On formbricks.reset() the local state will <strong>be deleted</strong> and formbricks gets{" "}
-              <strong>reinitialized</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"
-              onClick={() => {
-                formbricks.reset();
-              }}>
-              Reset
-            </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>
-      </div>
-    </div>
-  );
-};
-
-export default AppPage;

apps/demo/postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

apps/demo/styles/globals.css

@@ -1,26 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* Example on overriding packages/js colors */
-.dark {
-  --fb-brand-color: red;
-  --fb-brand-text-color: white;
-  --fb-border-color: green;
-  --fb-border-color-highlight: var(--slate-500);
-  --fb-focus-color: red;
-  --fb-heading-color: yellow;
-  --fb-subheading-color: green;
-  --fb-info-text-color: orange;
-  --fb-signature-text-color: blue;
-  --fb-survey-background-color: black;
-  --fb-accent-background-color: rgb(13, 13, 12);
-  --fb-accent-background-color-selected: red;
-  --fb-placeholder-color: white;
-  --fb-shadow-color: yellow;
-  --fb-rating-fill: var(--yellow-300);
-  --fb-rating-hover: var(--yellow-500);
-  --fb-back-btn-border: currentColor;
-  --fb-submit-btn-border: transparent;
-  --fb-rating-selected: black;
-}

apps/demo/tsconfig.json

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

apps/docs/.eslintrc.js

@@ -1,3 +1,19 @@
 module.exports = {
-  extends: ["@formbricks/eslint-config/legacy-next.js"],
+  root: true,
+  extends: ["@formbricks/eslint-config/next.js"],
+  parserOptions: {
+    project: "tsconfig.json",
+    tsconfigRootDir: __dirname,
+  },
+  rules: {
+    "@typescript-eslint/restrict-template-expressions": "off",
+    "import/no-cycle": "off",
+  },
+  settings: {
+    "import/resolver": {
+      typescript: {
+        project: "tsconfig.json",
+      },
+    },
+  },
 };

apps/docs/app/[survey-type]/global/access-roles/page.mdx

@@ -0,0 +1,173 @@
+import { MdxImage } from "@/components/mdx-image";
+
+import AddMember from "./images/add-member.webp";
+import BulkInvite from "./images/bulk-invite.webp";
+import IndvInvite from "./images/individual-invite.webp";
+import MenuItem from "./images/organization-settings-menu.webp";
+
+export const metadata = {
+  title: "User Management",
+  description:
+    "Assign different roles to organization members to grant them specific rights like creating surveys, viewing responses, or managing organization members.",
+};
+
+# Organization Access Roles
+
+Learn about the different organization-level and team-level roles and how they affect permissions in Formbricks.
+
+## Memberships
+
+Permissions in Formbricks are broadly handled using organization-level roles, which apply to all teams and projects in the organization. Users on a self-hosting and Enterprise plan, have access to team-level roles, which enable more granular permissions.
+
+<Note>
+  Access Roles is a feature of the **Enterprise Edition**. In the **Community Edition** and on the **Free** and **Startup** plan in the Cloud you can invite unlimited organization members as `Owner`.
+</Note>
+
+Here are the different access permissions, ranked from highest to lowest access
+
+1. Owner
+2. Manager
+3. Billing
+4. Member
+
+### Organisational level
+
+All users and their organization-level roles are listed in **Organization Settings > General**. Users can hold any of the following org-level roles:
+
+- **Billing** users can manage payment and compliance details in the organization.
+- **Org Members** can view most data in the organization and act in the projects they are members of. They cannot join projects on their own and need to be assigned.
+- **Org Managers** have full management access to all teams and projects. They can also manage the organization's membership. Org Managers can perform Team Admin actions without needing to join the team. They cannot change other organization settings.
+- **Org Owners** have full access to the organization, its data, and settings. Org Owners can perform Team Admin actions without needing to join the team.
+
+### Permissions at project level
+
+- **read**: read access to all resources (except settings) in the project.
+- **read & write**: read & write access to all resources (except settings) in the project.
+- **manage**: read & write access to all resources including settings in the project.
+
+### Team-level Roles
+
+- **Team Contributors** can view and act on surveys and responses.
+- **Team Admins** have additional permissions to manage their team's membership and projects. These permissions are granted at the team-level, and don't apply to teams where they're not a Team Admin.
+
+For more information on user roles & permissions, see below:
+
+|                                  | Owner | Manager | Billing | Member |
+| -------------------------------- | ----- | ------- | ------- | ------ |
+| **Organization**                 |       |         |         |        |
+| Update organization              | ✅    | ❌      | ❌      | ❌     |
+| Delete organization              | ✅    | ❌      | ❌      | ❌     |
+| Add new Member                   | ✅    | ✅      | ❌      | ❌     |
+| Delete Member                    | ✅    | ✅      | ❌      | ❌     |
+| Update Member Access             | ✅    | ✅      | ❌      | ❌     |
+| Update Billing                   | ✅    | ✅      | ✅      | ❌     |
+| **Project**                      |       |         |         |        |
+| Create Project                   | ✅    | ✅      | ❌      | ❌     |
+| Update Project Name              | ✅    | ✅      | ❌      | ✅\*\* |
+| Update Project Recontact Options | ✅    | ✅      | ❌      | ✅\*\* |
+| Update Look & Feel               | ✅    | ✅      | ❌      | ✅\*\* |
+| Update Survey Languages          | ✅    | ✅      | ❌      | ✅\*\* |
+| Delete Project                   | ✅    | ✅      | ❌      | ❌     |
+| **Surveys**                      |       |         |         |        |
+| Create New Survey                | ✅    | ✅      | ❌      | ✅\*   |
+| Edit Survey                      | ✅    | ✅      | ❌      | ✅\*   |
+| Delete Survey                    | ✅    | ✅      | ❌      | ✅\*   |
+| View survey results              | ✅    | ✅      | ❌      | ✅     |
+| **Response**                     |       |         |         |        |
+| Delete response                  | ✅    | ✅      | ❌      | ✅\*   |
+| Add tags on response             | ✅    | ✅      | ❌      | ✅\*   |
+| Edit tags on response            | ✅    | ✅      | ❌      | ✅\*   |
+| **Actions**                      |       |         |         |        |
+| Create Action                    | ✅    | ✅      | ❌      | ✅\*   |
+| Update Action                    | ✅    | ✅      | ❌      | ✅\*   |
+| Delete Action                    | ✅    | ✅      | ❌      | ✅\*   |
+| **API Keys**                     |       |         |         |        |
+| Create API key                   | ✅    | ✅      | ❌      | ✅\*\* |
+| Update API key                   | ✅    | ✅      | ❌      | ✅\*\* |
+| Delete API key                   | ✅    | ✅      | ❌      | ✅\*\* |
+| **Tags**                         |       |         |         |        |
+| Create tags                      | ✅    | ✅      | ❌      | ✅\*   |
+| Update tags                      | ✅    | ✅      | ❌      | ✅\*   |
+| Delete tags                      | ✅    | ✅      | ❌      | ✅\*\* |
+| **People**                       |       |         |         |        |
+| Delete Person                    | ✅    | ✅      | ❌      | ✅\*   |
+| **Integrations**                 |       |         |         |        |
+| Manage Integrations              | ✅    | ✅      | ❌      | ✅\*   |
+
+\* - for the read & write permissions team members
+
+\*\* - for the manage permissions team members
+
+## Inviting organization members
+
+There are two ways to invite organization members: One by one or in bulk.
+
+### Invite organization members one by one
+
+1. Go to the `Organization Settings` page via the menu in the lower right corner:
+
+<MdxImage
+  src={MenuItem}
+  alt="Where to find the Menu Item for Organization Settings"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+2. Click on the `Add member` button:
+
+<MdxImage
+  src={AddMember}
+  alt="Add member Button Position"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+3. In the modal, add the Name, Email and Role of the organization member you want to invite:
+
+<MdxImage
+  src={IndvInvite}
+  alt="Individual Invite Modal Tab"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+<Note>
+  Access Roles is a feature of the **Enterprise Edition**. In the **Community Edition** and on the **Free** and **Startup** plan in the Cloud you can invite unlimited organization members as `Owners`.
+</Note>
+
+Formbricks sends an email to the organization member with an invitation link. The organization member can accept the invitation or create a new account by clicking on the link.
+
+### Invite organization members in bulk
+
+1. Go to the `Organization Settings` page via the menu in the lower right corner:
+
+<MdxImage
+  src={MenuItem}
+  alt="Where to find the Menu Item for Organization Settings"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+2. Click on the `Add member` button:
+
+<MdxImage
+  src={AddMember}
+  alt="Add member Button Position"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+3. In the modal, switch to `Bulk Invite`. You can download an example .CSV file to fill in the Name, Email and Role of the organization members you want to invite:
+
+<MdxImage
+  src={BulkInvite}
+  alt="Individual Invite Modal Tab"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+4. Upload the filled .CSV file and invite the organization members in bulk ✅
+
+Formbricks sends an email to each organization member in the CSV. The member can accept the invitation or create a new account by clicking on the link.
+
+---

apps/docs/app/[survey-type]/global/add-image-or-video-question/page.mdx

@@ -0,0 +1,48 @@
+import { MdxImage } from "@/components/mdx-image";
+import SurveyEmbed from "@/components/survey-embed";
+import AddImageOrVideoToQuestionImage from "./images/add-image-or-video-to-question-image.webp";
+import AddImageOrVideoToQuestionVideo from "./images/add-image-or-video-to-question-video.webp";
+import AddImageOrVideoToQuestion from "./images/add-image-or-video-to-question.webp";
+
+# Add Image or Video to a Question
+
+Enhance your questions by adding images or videos. This makes instructions clearer and the survey more engaging.
+
+## How to Add Images
+
+Click the icon on the right side of the question to add an image or video:
+
+<MdxImage
+  src={AddImageOrVideoToQuestion}
+  alt="Overview of adding image or video to question"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+Upload an image by clicking the upload icon or dragging the file:
+
+<MdxImage
+  src={AddImageOrVideoToQuestionImage}
+  alt="Overview of adding image to question"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+## How to Add Videos
+
+Toggle to add a video via link:
+
+<MdxImage
+  src={AddImageOrVideoToQuestionVideo}
+  alt="Overview of adding video to question"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+### Supported Video Platforms
+
+We support YouTube, Vimeo, and Loom URLs.
+
+<Note>
+  **YouTube Privacy Mode**: This option reduces tracking by converting YouTube URLs to no-cookie URLs. It only works with YouTube.
+</Note>

apps/docs/app/[survey-type]/global/conditional-logic/page.mdx

@@ -0,0 +1,169 @@
+import { MdxImage } from "@/components/mdx-image";
+import ActionCalculateOperators from "./images/action-calculate-operators.webp";
+import ActionCalculateValue from "./images/action-calculate-value.webp";
+import ActionCalculateVariables from "./images/action-calculate-variables.webp";
+import ActionCalculate from "./images/action-calculate.webp";
+import ActionJump from "./images/action-jump.webp";
+import ActionOptions from "./images/action-options.webp";
+import ActionRequire from "./images/action-require.webp";
+import AddLogic from "./images/add-logic.webp";
+import ConditionChaining from "./images/condition-chaining.webp";
+import ConditionOperators from "./images/condition-operators.webp";
+import ConditionOptions from "./images/condition-options.webp";
+import ConditionValue from "./images/condition-value.webp";
+import Conditions from "./images/conditions.webp";
+import Editor from "./images/editor.webp";
+import QuestionLogic from "./images/question-logic.webp";
+
+export const metadata = {
+  title: "Conditional Logic",
+  description:
+    "Create complex survey logic with the Logic Editor. Use conditions, actions, and variables to create a personalized survey experience.",
+};
+
+# Conditional Logic
+
+Create complex survey logic with the Logic Editor. Use conditions, actions, and variables to create a personalized survey experience.
+
+<MdxImage src={Editor} alt="Logic Editor" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
+
+## Terminology
+
+- **Condition**: A rule that determines when an action should be executed.
+- **Action**: A task that is executed when a condition is met.
+
+## **Creating Logic**
+
+1. **Add a Logic Block**: Click the `Add logic +` button to add a new logic block.
+
+<MdxImage src={AddLogic} alt="Add Logic" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
+<Note>
+  You can add multiple logic blocks to a survey. Logic blocks are executed in the order they are added. You can rearrange the order of logic blocks.
+</Note>
+
+2. **Add Conditions**: Add conditions to the logic block. Conditions are rules that determine when an action should be executed.
+
+<MdxImage
+  src={Conditions}
+  alt="Add Conditions"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+Conditons can be based on:
+
+- **Question**: The answer to a question.
+- **Variable**: A variable value.
+- **Hidden Field**: The value of a hidden field.
+
+  2.a **Condition Options**: Choose from a list of available conditions.
+
+  <MdxImage
+    src={ConditionOptions}
+    alt="Condition Options"
+    quality="100"
+    className="max-w-full rounded-lg sm:max-w-3xl"
+  />
+
+  2.b **Condition Operators**: Choose an operator to compare the condition value.
+
+  <MdxImage
+    src={ConditionOperators}
+    alt="Condition Operators"
+    quality="100"
+    className="max-w-full rounded-lg sm:max-w-3xl"
+  />
+
+  2.c **Condition Value**: Enter a value to compare the condition against.
+  Comparisons can be made against a fixed value or a dynamic value.
+  Dynamic values can be based on a question, variable, or hidden field.
+
+  <MdxImage
+    src={ConditionValue}
+    alt="Condition Value"
+    quality="100"
+    className="max-w-full rounded-lg sm:max-w-3xl"
+  />
+
+<Note>
+  - Conditions can be grouped. - Conditions can be combined using AND or OR operators. You can add multiple conditions to a logic block. Conditions are evaluated in the order they are added.
+</Note>
+
+<MdxImage
+  src={ConditionChaining}
+  alt="Condition Chaining"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+3. **Add Actions**: Add actions to the logic block. Actions are tasks that are executed when a condition is met.
+
+<Note>You can add multiple actions to a logic block. Actions are executed in the order they are added.</Note>
+
+- 3.a **Action Options**: Choose from a list of available actions.
+
+  <MdxImage
+    src={ActionOptions}
+    alt="Add Actions"
+    quality="100"
+    className="max-w-full rounded-lg sm:max-w-3xl"
+  />
+
+  Action is of the following types:
+
+  - **Calculate**: Perform a calculation. These variables are then available for use in other questions.
+
+    - Calculations can be performed on variables.
+    - Calculations can be based on fixed values or dynamic values.
+      <MdxImage
+        src={ActionCalculateVariables}
+        alt="Action Calculate Variables"
+        quality="100"
+        className="max-w-full rounded-lg sm:max-w-3xl"
+      />
+      <MdxImage
+        src={ActionCalculateOperators}
+        alt="Action Calculate Variables"
+        quality="100"
+        className="max-w-full rounded-lg sm:max-w-3xl"
+      />
+      <MdxImage
+        src={ActionCalculateValue}
+        alt="Action Calculate Variables"
+        quality="100"
+        className="max-w-full rounded-lg sm:max-w-3xl"
+      />
+      <MdxImage
+        src={ActionCalculate}
+        alt="Action Calculate"
+        quality="100"
+        className="max-w-full rounded-lg sm:max-w-3xl"
+      />
+
+  - **Require Answer**: Make a question required. Only the optional questions can be marked as required while filling the survey.
+    <MdxImage
+      src={ActionRequire}
+      alt="Action Require"
+      quality="100"
+      className="max-w-full rounded-lg sm:max-w-3xl"
+    />
+  - **Jump to Question**: Skip to a specific question. The user will be redirected to the specified question based on the condition.
+    <MdxImage
+      src={ActionJump}
+      alt="Action Jump"
+      quality="100"
+      className="max-w-full rounded-lg sm:max-w-3xl"
+    />
+
+4. **Save Logic**: Click the `Save` button to save the logic block.
+
+# Question Logic
+
+This logic is executed when the user answers the question. Logic can be as simple as showing a follow-up question based on the answer or as complex as calculating a score based on multiple answers.
+
+<MdxImage
+  src={QuestionLogic}
+  alt="Question Logic"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>

apps/docs/app/[survey-type]/global/email-customization/page.mdx

@@ -0,0 +1,48 @@
+import { MdxImage } from "@/components/mdx-image";
+
+import EmailCustomizationSettings from "./email-customization-card.webp";
+import EmailSample from "./email-sample.webp";
+import UpdatedLogo from "./updated-logo.webp";
+
+export const metadata = {
+  title: "Email Customization",
+  description: "Customize the email that is sent to your users!",
+};
+
+# Email Customization
+
+Email customization is a white-label feature that allows you to customize the email that is sent to your users. You can upload a logo of your company and use it in the email.
+
+<Note>
+  This feature is a white-label feature. It is only available for users on paid plans or have an enterprise license.
+</Note>
+
+## How to Upload a Logo
+
+1. Go to the Organization Settings page.
+2. You will see a card called **Email Customization** under the **General** section.
+
+<MdxImage
+  src={EmailCustomizationSettings}
+  alt="Email Customization Settings"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+3. Upload a logo of your company.
+4. Click on the **Save** button.
+
+<MdxImage src={UpdatedLogo} alt="Updated Logo" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
+
+## Viewing the Logo in the Email
+
+You can click on the **Send test email** button to get a test email with the logo.
+
+<MdxImage src={EmailSample} alt="Email Sample" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
+
+<Note>Only the owner and managers of the organization can modify the logo.</Note>
+
+## Use Cases
+
+- **White-labeling**: You can use this feature to white-label your emails to your users.
+- **Branding**: You can use this feature to add your logo to your emails to increase brand recognition.