Merge branch 'main' of https://github.com/Dhruwang/formbricks into integration-test

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.devcontainer/devcontainer.json

@@ -22,7 +22,6 @@
 
   // 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=web... --filter=demo...",
 
   // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
   "remoteUser": "node"

.dockerignore

@@ -1,7 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-# **/node_modules
+**/node_modules
 .pnp
 .pnp.js
 .pnpm-store/

.env.example

@@ -1,7 +1,8 @@
 ########################################################################
-# ------------ MANDATORY (CHANGE ACCORDING TO YOUR SETUP) ------------ #
+# ------------ MANDATORY (CHANGE ACCORDING TO YOUR SETUP) ------------#
 ########################################################################
 
+
 ############
 #  BASICS  #
 ############
@@ -50,28 +51,13 @@ SMTP_SECURE_ENABLED=0
 SMTP_USER=smtpUser
 SMTP_PASSWORD=smtpPassword
 
+
 ########################################################################
 # ------------------------------ OPTIONAL -----------------------------#
 ########################################################################
 
 # Uncomment the variables you would like to use and customize the values.
 
-# Custom local storage path for file uploads
-#UPLOADS_DIR=
-
-##############
-# S3 STORAGE #
-##############
-
-# S3 Storage is required for the file upload in serverless environments like Vercel
-S3_ACCESS_KEY=
-S3_SECRET_KEY=
-S3_REGION=
-S3_BUCKET_NAME=
-# Configure a third party S3 compatible storage service endpoint like StorJ leave empty if you use Amazon S3
-# e.g., https://gateway.storjshare.io
-S3_ENDPOINT_URL=
-
 #####################
 # Disable Features  #
 #####################
@@ -85,9 +71,6 @@ PASSWORD_RESET_DISABLED=1
 # Signup. Disable the ability for new users to create an account.
 # SIGNUP_DISABLED=1
 
-# Email login. Disable the ability for users to login with email.
-# EMAIL_AUTH_DISABLED=1
-
 # Team Invite. Disable the ability for invited users to create an account.
 # INVITE_DISABLED=1
 
@@ -101,25 +84,21 @@ TERMS_URL=
 IMPRINT_URL=
 
 # Configure Github Login
+GITHUB_AUTH_ENABLED=0
 GITHUB_ID=
 GITHUB_SECRET=
 
 # Configure Google Login
+GOOGLE_AUTH_ENABLED=0
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
 
 # Configure Azure Active Directory Login
+AZUREAD_AUTH_ENABLED=0
 AZUREAD_CLIENT_ID=
 AZUREAD_CLIENT_SECRET=
 AZUREAD_TENANT_ID=
 
-# OpenID Connect (OIDC) configuration
-# OIDC_CLIENT_ID=
-# OIDC_CLIENT_SECRET=
-# OIDC_ISSUER=
-# OIDC_DISPLAY_NAME=
-# OIDC_SIGNING_ALGORITHM=
-
 # Cron Secret
 CRON_SECRET=
 
@@ -139,18 +118,14 @@ NEXT_PUBLIC_FORMBRICKS_API_HOST=
 NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=
 NEXT_PUBLIC_FORMBRICKS_ONBOARDING_SURVEY_ID=
 
-# Oauth credentials for Google sheet integration
+# Oauth credentials for Google sheet integration 
 GOOGLE_SHEETS_CLIENT_ID=
 GOOGLE_SHEETS_CLIENT_SECRET=
 GOOGLE_SHEETS_REDIRECT_URL=
 
-# Oauth credentials for Airtable integration
+# Oauth credentials for Airtable integration 
 AIRTABLE_CLIENT_ID=
 
-# Oauth credentials for Slack integration
-SLACK_CLIENT_ID=
-SLACK_CLIENT_SECRET=
-
 # Enterprise License Key
 ENTERPRISE_LICENSE_KEY=
 
@@ -162,22 +137,3 @@ ENTERPRISE_LICENSE_KEY=
 
 # set to 1 to skip onboarding for new users
 # ONBOARDING_DISABLED=1
-
-# Send new users to customer.io
-# CUSTOMER_IO_API_KEY=
-# CUSTOMER_IO_SITE_ID=
-
-# Ignore Rate Limiting across the Formbricks app
-# RATE_LIMITING_DISABLED=1
-
-# OpenTelemetry URL for tracing
-# OPENTELEMETRY_LISTENER_URL=http://localhost:4318/v1/traces
-
-# Unsplash API Key
-UNSPLASH_ACCESS_KEY=
-
-# The below is used for Next Caching (uses In-Memory from Next Cache if not provided)
-# REDIS_URL:
-
-# The below is used for Rate Limiting (uses In-Memory LRU Cache if not provided) (You can use a service like Webdis for this)
-# REDIS_HTTP_URL:

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -42,6 +42,7 @@ body:
         - 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.
+        - Everything is type-safe
+        - We use **chatGPT** to help refactor code. Use our [Formbricks ✨ megaprompt ✨](https://github.com/formbricks/formbricks/blob/main/megaprompt.md) to create the right 
+          context before you write your prompt.
         - Anything unclear? [Ask in Discord](https://formbricks.com/discord)

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,5 +1,3 @@
-<!-- We require pull request titles to follow the Conventional Commits specification ( https://www.conventionalcommits.org/en/v1.0.0/#summary ). Please make sure your title follow these conventions -->
-
 ## What does this PR do?
 
 <!-- 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. -->
@@ -10,6 +8,18 @@ Fixes # (issue)
  Loom Video: https://www.loom.com/
 -->
 
+## Type of change
+
+<!-- Please mark the relevant points by using [x] -->
+
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] Chore (refactoring code, technical debt, workflow improvements)
+- [ ] Enhancement (small improvements)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] This change adds a new database migration
+- [ ] This change requires a documentation update
+
 ## How should this be tested?
 
 <!-- Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration -->
@@ -32,7 +42,7 @@ Fixes # (issue)
 - [ ] Removed all `console.logs`
 - [ ] Merged the latest changes from main onto my branch with `git pull origin main`
 - [ ] My changes don't cause any responsiveness issues
-- [ ] First PR at Formbricks? [Please sign the CLA!](https://cla-assistant.io/formbricks/formbricks) Without it we wont be able to merge it 🙏
+- [ ] First PR at Formbricks? [Please sign the CLA!](https://formbricks.com/clmyhzfrymr4ko00hycsg1tvx) Without it we wont be able to merge it 🙏
 
 ### Appreciated
 

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

@@ -1,68 +0,0 @@
-name: Build & Cache Web App
-
-on:
-  workflow_dispatch:
-    inputs:
-      e2e_testing_mode:
-        description: "Set E2E Testing Mode"
-        required: false
-        default: "0"
-
-runs:
-  using: "composite"
-  steps:
-    - name: Checkout repo
-      uses: actions/checkout@v3
-
-    - uses: ./.github/actions/dangerous-git-checkout
-
-    - name: Cache Build
-      uses: actions/cache@v3
-      id: cache-build
-      env:
-        cache-name: prod-build
-        key-1: ${{ hashFiles('pnpm-lock.yaml') }}
-        key-2: ${{ hashFiles('apps/**/**.[jt]s', 'apps/**/**.[jt]sx', 'packages/**/**.[jt]s', 'packages/**/**.[jt]sx', '!**/node_modules') }}
-      with:
-        path: |
-          ${{ github.workspace }}/apps/web/.next
-          **/.turbo/**
-          **/dist/**
-        key: ${{ runner.os }}-${{ env.cache-name }}-${{ env.key-1 }}-${{ env.key-2 }}
-
-    - name: Setup Node.js 20.x
-      uses: actions/setup-node@v3
-      with:
-        node-version: 20.x
-      if: steps.cache-build.outputs.cache-hit != 'true'
-
-    - name: Install pnpm
-      uses: pnpm/action-setup@v2
-      if: steps.cache-build.outputs.cache-hit != 'true'
-
-    - name: Install dependencies
-      run: pnpm install --config.platform=linux --config.architecture=x64
-      if: steps.cache-build.outputs.cache-hit != 'true'
-      shell: bash
-
-    - name: create .env
-      run: cp .env.example .env
-      shell: bash
-
-    - name: Add E2E Testing Mode
-      run: |
-        echo "E2E_TESTING=${{ inputs.e2e_testing_mode }}" >> $GITHUB_ENV
-      shell: bash
-
-    - name: Generate Random ENCRYPTION_KEY
-      run: |
-        SECRET=$(openssl rand -hex 32)
-        echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
-        echo "ENTERPRISE_LICENSE_KEY=$SECRET" >> $GITHUB_ENV
-      shell: bash
-
-    - run: |
-        pnpm build --filter=web...
-
-      if: steps.cache-build.outputs.cache-hit != 'true'
-      shell: bash

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

@@ -1,10 +0,0 @@
-name: Dangerous git Checkout
-description: "Git Checkout from PR code so we can run checks from forks"
-runs:
-  using: "composite"
-  steps:
-    - name: Checkout repo
-      uses: actions/checkout@v3
-      with:
-        ref: ${{ github.event.pull_request.head.sha }}
-        fetch-depth: 2

.github/workflows/build-formbricks-com.yml

@@ -0,0 +1,26 @@
+name: Build
+on:
+  workflow_call:
+jobs:
+  build:
+    name: Build Formbricks-com
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js 18.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+
+      - name: Install dependencies
+        run: pnpm install --config.platform=linux --config.architecture=x64
+
+      - name: Build Formbricks-com
+        run: pnpm build --filter=formbricks-com...

.github/workflows/build-web.yml

@@ -1,4 +1,4 @@
-name: Build web
+name: Build
 on:
   workflow_call:
 jobs:
@@ -8,13 +8,13 @@ jobs:
     timeout-minutes: 30
 
     steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/actions/dangerous-git-checkout
+      - name: Checkout repo
+        uses: actions/checkout@v3
 
-      - name: Setup Node.js 20.x
+      - name: Setup Node.js 18.x
         uses: actions/setup-node@v3
         with:
-          node-version: 20.x
+          node-version: 18.x
 
       - name: Install pnpm
         uses: pnpm/action-setup@v2
@@ -25,7 +25,7 @@ jobs:
       - name: create .env
         run: cp .env.example .env
 
-      - name: Generate Random ENCRYPTION_KEY
+      - name: Generate Random NEXTAUTH_SECRET
         run: |
           SECRET=$(openssl rand -hex 32)
           echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV

.github/workflows/cron-closeOnDate.yml

@@ -1,12 +1,11 @@
-name: Cron - Survey status update
+name: Cron - closeOnDate
 
 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 * * *"
 jobs:
   cron-weeklySummary:
     env:
@@ -17,7 +16,7 @@ jobs:
       - name: cURL request
         if: ${{ env.APP_URL && env.CRON_SECRET }}
         run: |
-          curl ${{ env.APP_URL }}/api/cron/survey-status \
+          curl ${{ env.APP_URL }}/api/cron/close_surveys \
             -X POST \
             -H 'content-type: application/json' \
             -H 'x-api-key: ${{ env.CRON_SECRET }}' \

.github/workflows/cron-reportUsageToStripe.yml

@@ -1,12 +1,11 @@
-name: Cron - Report usage to Stripe
+name: Cron - reportUsageToStripe
 
 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:
-  # This will run the job at 20:00 UTC every day of every month.
-  # - cron: "0 20 * * *"
+  schedule:
+    # This will run the job at 22:00 UTC every day of every month.
+    - cron: "0 22 * * *"
 jobs:
   cron-reportUsageToStripe:
     env:

.github/workflows/cron-weeklySummary.yml

@@ -1,12 +1,11 @@
-name: Cron - Weekly summary
+name: Cron - weeklySummary
 
 on:
-  workflow_dispatch:
   # "Scheduled workflows run on the latest commit on the default or base branch."
   # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
-  # schedule:
-  # Runs “At 08:00 on Monday.” (see https://crontab.guru)
-  # - cron: "0 8 * * 1"
+  schedule:
+    # Runs “At 08:00 on Monday.” (see https://crontab.guru)
+    - cron: "0 8 * * 1"
 jobs:
   cron-weeklySummary:
     env:
@@ -17,7 +16,7 @@ jobs:
       - name: cURL request
         if: ${{ env.APP_URL && env.CRON_SECRET }}
         run: |
-          curl ${{ env.APP_URL }}/api/cron/weekly-summary \
+          curl ${{ env.APP_URL }}/api/cron/weekly_summary \
             -X POST \
             -H 'content-type: application/json' \
             -H 'x-api-key: ${{ env.CRON_SECRET }}' \

.github/workflows/e2e.yml

@@ -1,77 +0,0 @@
-name: E2E Tests
-on:
-  workflow_call:
-  workflow_dispatch:
-jobs:
-  build:
-    name: Run E2E Tests
-    runs-on: ubuntu-latest
-    timeout-minutes: 60
-    steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/actions/dangerous-git-checkout
-
-      - name: Build & Cache Web Binaries
-        uses: ./.github/actions/cache-build-web
-        with:
-          e2e_testing_mode: "1"
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Start PostgreSQL
-        run: |
-          cd packages/database && pnpm db:up &
-          for attempt in {1..20}; do
-            if nc -zv localhost 5432; then
-              echo "Ready"
-              break
-            fi
-            echo "Waiting..."
-            sleep 5
-          done
-          pnpm db:migrate:dev
-      - name: Serve packages for lazy loading
-        run: |
-          cd packages/surveys && pnpm serve &
-
-      - name: Run App
-        run: |
-          NODE_ENV=test pnpm start --filter=web &
-          for attempt in {1..20}; do
-            if [ $(curl -o /dev/null -s -w "%{http_code}" http://localhost:3000/health) -eq 200 ]; then
-              echo "Ready"
-              break
-            fi
-            echo "Waiting..."
-            sleep 10
-          done
-
-      - name: Test Serve endpoints
-        run: |
-          curl -s http://localhost:3003
-
-      - name: Cache Playwright
-        uses: actions/cache@v3
-        id: playwright-cache
-        with:
-          path: ~/.cache/ms-playwright
-          key: ${{ runner.os }}-playwright-${{ hashFiles('pnpm-lock.yaml') }}
-
-      - name: Install Playwright
-        if: steps.playwright-cache.outputs.cache-hit != 'true'
-        run: pnpm exec playwright install --with-deps
-
-      - name: Run E2E Tests
-        run: |
-          pnpm test:e2e
-
-      - uses: actions/upload-artifact@v3
-        if: always()
-        with:
-          name: playwright-report
-          path: playwright-report/
-          retention-days: 30

.github/workflows/lint.yml

@@ -8,8 +8,8 @@ jobs:
     timeout-minutes: 15
 
     steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/actions/dangerous-git-checkout
+      - name: Checkout repo
+        uses: actions/checkout@v3
 
       - name: Setup Node.js 18.x
         uses: actions/setup-node@v3

.github/workflows/playwright.yml

@@ -0,0 +1,40 @@
+name: E2E Tests
+on:
+  workflow_call:
+jobs:
+  build:
+    name: Run E2E Tests
+    runs-on: ubuntu-latest
+    timeout-minutes: 60
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
+      - name: Install Docker Compose
+        run: sudo apt-get update && sudo apt-get install -y docker-compose
+
+      - name: Install dependencies
+        run: npm install -g pnpm && pnpm install
+
+      - name: Build Formricks JS package
+        run: pnpm build --filter=js
+
+      - name: Build Formbricks Image & Run
+        run: docker-compose up -d
+
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: pnpm test:e2e
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.github/workflows/pr.yml

@@ -1,7 +1,7 @@
 name: PR Update
 
 on:
-  pull_request:
+  pull_request_target:
     branches:
       - main
   merge_group:
@@ -12,53 +12,27 @@ 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' }}
+    name: Run Tests
     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
 
   e2e-test:
     name: Run E2E Tests
-    needs: [changes]
-    if: ${{ needs.changes.outputs.has-files-requiring-all-checks == 'true' }}
-    uses: ./.github/workflows/e2e.yml
+    uses: ./.github/workflows/playwright.yml
     secrets: inherit
 
   required:
-    name: PR Check Summary
     needs: [lint, test, build, e2e-test]
     if: always()
     runs-on: ubuntu-latest

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

@@ -1,68 +0,0 @@
-name: Docker for Data Migrations
-
-# This workflow uses actions that are not certified by GitHub.
-# They are provided by a third-party and are governed by
-# separate terms of service, privacy policy, and support
-# documentation.
-
-on:
-  workflow_dispatch:
-  push:
-    tags:
-      - "v*"
-
-env:
-  # Use docker.io for Docker Hub if empty
-  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
-      # This is used to complete the identity challenge
-      # with sigstore/fulcio when running outside of PRs.
-      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 }}
-
-      - 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 }}

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

@@ -1,4 +1,9 @@
-name: Docker Release to GitHub
+name: Docker
+
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
 
 on:
   workflow_dispatch:
@@ -26,17 +31,37 @@ jobs:
       id-token: write
 
     steps:
+      - name: Generate Random NEXTAUTH_SECRET
+        run: |
+          SECRET=$(openssl rand -hex 32)
+          echo "NEXTAUTH_SECRET=$SECRET" >> $GITHUB_ENV
+
+      - name: Generate Random ENCRYPTION_KEY
+        run: |
+          SECRET=$(openssl rand -hex 32)
+          echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
+
       - name: Checkout repository
         uses: actions/checkout@v3
 
-      - name: Set up Depot CLI
-        uses: depot/setup-action@v1
-
       # Install the cosign tool except on PR
       # https://github.com/sigstore/cosign-installer
       - name: Install cosign
         if: github.event_name != 'pull_request'
-        uses: sigstore/cosign-installer@v3.5.0
+        uses: sigstore/cosign-installer@6e04d228eb30da1757ee4e1dd75a0ec73a653e06 #v3.1.1
+        with:
+          cosign-release: "v2.1.1"
+
+        # Add support for more platforms with QEMU (optional)
+        # https://github.com/docker/setup-qemu-action
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      # Set up BuildKit Docker container builder to be able to build
+      # multi-platform images and export cache
+      # https://github.com/docker/setup-buildx-action
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3 # v3.0.0
 
       # Login against a Docker registry except on PR
       # https://github.com/docker/login-action
@@ -48,17 +73,6 @@ jobs:
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Set tags based on event type
-        id: set-tags
-        run: |
-          if [[ "${{ github.event_name }}" == "push" ]]; then
-            if [[ "${{ github.ref }}" == refs/tags/v* ]]; then
-              echo "::set-output name=tags::latest,${{ github.ref }}"
-            fi
-          elif [[ "${{ github.event_name }}" == "workflow_dispatch" ]]; then
-            echo "::set-output name=tags::experimental"
-          fi
-
       # Extract metadata (tags, labels) for Docker
       # https://github.com/docker/metadata-action
       - name: Extract Docker metadata
@@ -66,24 +80,25 @@ jobs:
         uses: docker/metadata-action@v5 # v5.0.0
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
-          tags: ${{ steps.set-tags.outputs.tags }}
 
       # Build and push Docker image with Buildx (don't push on PR)
       # https://github.com/docker/build-push-action
       - name: Build and push Docker image
         id: build-and-push
-        uses: depot/build-push-action@v1
+        uses: docker/build-push-action@v5 # v5.0.0
         with:
-          project: tw0fqmsx3c
-          token: ${{ secrets.DEPOT_PROJECT_TOKEN }}
           context: .
           file: ./apps/web/Dockerfile
-          platforms: linux/amd64,linux/arm64
+          # platforms: linux/amd64,linux/arm64
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
           cache-from: type=gha
           cache-to: type=gha,mode=max
+          build-args: |
+            NEXTAUTH_SECRET=${{ env.NEXTAUTH_SECRET }}
+            DATABASE_URL=${{ env.DATABASE_URL }}
+            ENCRYPTION_KEY=${{ env.ENCRYPTION_KEY }}
 
       # Sign the resulting Docker image digest except on PRs.
       # This will only write to the public Rekor transparency log when the Docker

.github/workflows/release-docker.yml

@@ -0,0 +1,58 @@
+name: Release on Dockerhub
+
+on:
+  push:
+    tags:
+      - "v*"
+
+jobs:
+  release-image-on-dockerhub:
+    name: Release on Dockerhub
+    runs-on: ubuntu-latest
+    env:
+      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+      DATABASE_URL: "postgresql://postgres:postgres@localhost:5432/formbricks?schema=public"
+    steps:
+      - name: Generate Random NEXTAUTH_SECRET
+        run: |
+          SECRET=$(openssl rand -hex 32)
+          echo "NEXTAUTH_SECRET=$SECRET" >> $GITHUB_ENV
+
+      - name: Generate Random ENCRYPTION_KEY
+        run: |
+          SECRET=$(openssl rand -hex 32)
+          echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
+
+      - name: Checkout Repo
+        uses: actions/checkout@v2
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Get Release Tag
+        id: extract_release_tag
+        run: |
+          TAG=${{ github.ref }}
+          TAG=${TAG#refs/tags/v}
+          echo "RELEASE_TAG=$TAG" >> $GITHUB_ENV
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: ./apps/web/Dockerfile
+          push: true
+          tags: |
+            ${{ secrets.DOCKER_USERNAME }}/formbricks:${{ env.RELEASE_TAG }}
+            ${{ secrets.DOCKER_USERNAME }}/formbricks:latest
+          build-args: |
+            NEXTAUTH_SECRET=${{ env.NEXTAUTH_SECRET }}
+            DATABASE_URL=${{ env.DATABASE_URL }}
+            ENCRYPTION_KEY=${{ env.ENCRYPTION_KEY }}

.github/workflows/test.yml

@@ -3,18 +3,22 @@ on:
   workflow_call:
 jobs:
   build:
-    name: Unit Tests
+    name: Tests
     runs-on: ubuntu-latest
     timeout-minutes: 15
 
-    steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/actions/dangerous-git-checkout
+    env:
+      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
 
-      - name: Setup Node.js 20.x
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js 18.x
         uses: actions/setup-node@v3
         with:
-          node-version: 20.x
+          node-version: 18.x
 
       - name: Install pnpm
         uses: pnpm/action-setup@v2
@@ -30,5 +34,8 @@ jobs:
           SECRET=$(openssl rand -hex 32)
           echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
 
+      - name: Build formbricks-js dependencies
+        run: pnpm build --filter=js
+
       - name: Test
         run: pnpm test

.gitignore

@@ -51,10 +51,3 @@ Zone.Identifier
 /playwright-report/
 /blob-report/
 /playwright/.cache/
-
-# uploads
-packages/lib/uploads
-
-# Vite Timestamps
-vite.config.*.timestamp-*
-

.kamal/hooks/post-deploy.sample

@@ -1,14 +0,0 @@
-#!/bin/sh
-
-# A sample post-deploy hook
-#
-# These environment variables are available:
-# KAMAL_RECORDED_AT
-# KAMAL_PERFORMER
-# KAMAL_VERSION
-# KAMAL_HOSTS
-# KAMAL_ROLE (if set)
-# KAMAL_DESTINATION (if set)
-# KAMAL_RUNTIME
-
-echo "$KAMAL_PERFORMER deployed $KAMAL_VERSION to $KAMAL_DESTINATION in $KAMAL_RUNTIME seconds"

.kamal/hooks/post-traefik-reboot.sample

@@ -1,3 +0,0 @@
-#!/bin/sh
-
-echo "Rebooted Traefik on $KAMAL_HOSTS"

.kamal/hooks/pre-build.sample

@@ -1,51 +0,0 @@
-#!/bin/sh
-
-# A sample pre-build hook
-#
-# Checks:
-# 1. We have a clean checkout
-# 2. A remote is configured
-# 3. The branch has been pushed to the remote
-# 4. The version we are deploying matches the remote
-#
-# These environment variables are available:
-# KAMAL_RECORDED_AT
-# KAMAL_PERFORMER
-# KAMAL_VERSION
-# KAMAL_HOSTS
-# KAMAL_ROLE (if set)
-# KAMAL_DESTINATION (if set)
-
-if [ -n "$(git status --porcelain)" ]; then
-  echo "Git checkout is not clean, aborting..." >&2
-  git status --porcelain >&2
-  exit 1
-fi
-
-first_remote=$(git remote)
-
-if [ -z "$first_remote" ]; then
-  echo "No git remote set, aborting..." >&2
-  exit 1
-fi
-
-current_branch=$(git branch --show-current)
-
-if [ -z "$current_branch" ]; then
-  echo "Not on a git branch, aborting..." >&2
-  exit 1
-fi
-
-remote_head=$(git ls-remote $first_remote --tags $current_branch | cut -f1)
-
-if [ -z "$remote_head" ]; then
-  echo "Branch not pushed to remote, aborting..." >&2
-  exit 1
-fi
-
-if [ "$KAMAL_VERSION" != "$remote_head" ]; then
-  echo "Version ($KAMAL_VERSION) does not match remote HEAD ($remote_head), aborting..." >&2
-  exit 1
-fi
-
-exit 0

.kamal/hooks/pre-connect.sample

@@ -1,47 +0,0 @@
-#!/usr/bin/env ruby
-
-# A sample pre-connect check
-#
-# Warms DNS before connecting to hosts in parallel
-#
-# These environment variables are available:
-# KAMAL_RECORDED_AT
-# KAMAL_PERFORMER
-# KAMAL_VERSION
-# KAMAL_HOSTS
-# KAMAL_ROLE (if set)
-# KAMAL_DESTINATION (if set)
-# KAMAL_RUNTIME
-
-hosts = ENV["KAMAL_HOSTS"].split(",")
-results = nil
-max = 3
-
-elapsed = Benchmark.realtime do
-  results = hosts.map do |host|
-    Thread.new do
-      tries = 1
-
-      begin
-        Socket.getaddrinfo(host, 0, Socket::AF_UNSPEC, Socket::SOCK_STREAM, nil, Socket::AI_CANONNAME)
-      rescue SocketError
-        if tries < max
-          puts "Retrying DNS warmup: #{host}"
-          tries += 1
-          sleep rand
-          retry
-        else
-          puts "DNS warmup failed: #{host}"
-          host
-        end
-      end
-
-      tries
-    end
-  end.map(&:value)
-end
-
-retries = results.sum - hosts.size
-nopes = results.count { |r| r == max }
-
-puts "Prewarmed %d DNS lookups in %.2f sec: %d retries, %d failures" % [ hosts.size, elapsed, retries, nopes ]

.kamal/hooks/pre-deploy.sample

@@ -1,109 +0,0 @@
-#!/usr/bin/env ruby
-
-# A sample pre-deploy hook
-#
-# Checks the Github status of the build, waiting for a pending build to complete for up to 720 seconds.
-#
-# Fails unless the combined status is "success"
-#
-# These environment variables are available:
-# KAMAL_RECORDED_AT
-# KAMAL_PERFORMER
-# KAMAL_VERSION
-# KAMAL_HOSTS
-# KAMAL_COMMAND
-# KAMAL_SUBCOMMAND
-# KAMAL_ROLE (if set)
-# KAMAL_DESTINATION (if set)
-
-# Only check the build status for production deployments
-if ENV["KAMAL_COMMAND"] == "rollback" || ENV["KAMAL_DESTINATION"] != "production"
-  exit 0
-end
-
-require "bundler/inline"
-
-# true = install gems so this is fast on repeat invocations
-gemfile(true, quiet: true) do
-  source "https://rubygems.org"
-
-  gem "octokit"
-  gem "faraday-retry"
-end
-
-MAX_ATTEMPTS = 72
-ATTEMPTS_GAP = 10
-
-def exit_with_error(message)
-  $stderr.puts message
-  exit 1
-end
-
-class GithubStatusChecks
-  attr_reader :remote_url, :git_sha, :github_client, :combined_status
-
-  def initialize
-    @remote_url = `git config --get remote.origin.url`.strip.delete_prefix("https://github.com/")
-    @git_sha = `git rev-parse HEAD`.strip
-    @github_client = Octokit::Client.new(access_token: ENV["GITHUB_TOKEN"])
-    refresh!
-  end
-
-  def refresh!
-    @combined_status = github_client.combined_status(remote_url, git_sha)
-  end
-
-  def state
-    combined_status[:state]
-  end
-
-  def first_status_url
-    first_status = combined_status[:statuses].find { |status| status[:state] == state }
-    first_status && first_status[:target_url]
-  end
-
-  def complete_count
-    combined_status[:statuses].count { |status| status[:state] != "pending"}
-  end
-
-  def total_count
-    combined_status[:statuses].count
-  end
-
-  def current_status
-    if total_count > 0
-      "Completed #{complete_count}/#{total_count} checks, see #{first_status_url} ..."
-    else
-      "Build not started..."
-    end
-  end
-end
-
-
-$stdout.sync = true
-
-puts "Checking build status..."
-attempts = 0
-checks = GithubStatusChecks.new
-
-begin
-  loop do
-    case checks.state
-    when "success"
-      puts "Checks passed, see #{checks.first_status_url}"
-      exit 0
-    when "failure"
-      exit_with_error "Checks failed, see #{checks.first_status_url}"
-    when "pending"
-      attempts += 1
-    end
-
-    exit_with_error "Checks are still pending, gave up after #{MAX_ATTEMPTS * ATTEMPTS_GAP} seconds" if attempts == MAX_ATTEMPTS
-
-    puts checks.current_status
-    sleep(ATTEMPTS_GAP)
-    checks.refresh!
-  end
-rescue Octokit::NotFound
-  exit_with_error "Build status could not be found"
-end

.kamal/hooks/pre-traefik-reboot.sample

@@ -1,3 +0,0 @@
-#!/bin/sh
-
-echo "Rebooting Traefik on $KAMAL_HOSTS..."

README.md

@@ -1,46 +1,50 @@
-<div id="top"></div>
+<div  id="top"></div>
 
-<p align="center">
+<p  align="center">
 
-<a href="https://formbricks.com">
+<a  href="https://formbricks.com">
 
-<img width="120" alt="Open Source Privacy First Experience Management Solution Qualtrics Alternative Logo" src="https://github.com/formbricks/formbricks/assets/72809645/0086704f-bee7-4d38-9cc8-fa42ee59e004">
+<img  width="120"  alt="Open Source Privacy First Experience Management Solution Qualtrics Alternative Logo"  src="https://github.com/formbricks/formbricks/assets/72809645/0086704f-bee7-4d38-9cc8-fa42ee59e004">
 
 </a>
 
-<h3 align="center">Formbricks</h3>
+<h3  align="center">Formbricks</h3>
 
-<p align="center">
+<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>
+<br  />
+<a  href="https://formbricks.com/">Website</a> | <a  href="https://formbricks.com/discord">Join Discord community</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://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>
-<a href="https://github.com/formbricks/formbricks/issues?q=is:issue+is:open+label:%22%F0%9F%99%8B%F0%9F%8F%BB%E2%80%8D%E2%99%82%EF%B8%8Fhelp+wanted%22"><img src="https://img.shields.io/badge/Help%20Wanted-Contribute-blue"></a>
+<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://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>
+<a  href="https://github.com/formbricks/formbricks/issues?q=is:issue+is:open+label:%22%F0%9F%99%8B%F0%9F%8F%BB%E2%80%8D%E2%99%82%EF%B8%8Fhelp+wanted%22"><img  src="https://img.shields.io/badge/Help%20Wanted-Contribute-blue"></a>
 </p>
 
 <br/>
 
 <div style="background-color:#f8fafc; border-radius:5px;">
-<p align="center">
-<i>Trusted by</i><br/>
-  <img width="867" alt="clients-hi-res" src="https://github.com/formbricks/formbricks/assets/72809645/924d3693-f66a-4063-bb31-6e5789a8175a">
+<p  align="center">
+<i>Trusted by</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+<a  href="https://flixbus.com"><img  src="https://github.com/formbricks/formbricks/assets/72809645/d6c91d89-7633-4845-ae1e-03bbd2ce0946"  height="35px"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+<a  href="https://github.com/calcom/cal.com/"><img  src="https://github.com/formbricks/formbricks/assets/675065/1a8763cf-f47e-4960-90f6-334f6dc12a17#gh-light-mode-only"  height="20px"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+<a  href="https://github.com/CrowdDotDev/crowd.dev"><img  src="https://github.com/formbricks/formbricks/assets/675065/59b1a4d4-25e4-4ef3-b0bf-4426446fbfd0#gh-light-mode-only"  height="20px"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+<a  href="https://neverinstall.com/"><img  src="https://github.com/formbricks/formbricks/assets/675065/72e5e37b-8ef7-4340-b06e-f1d12a05330f#gh-light-mode-only"  height="20px"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+<a  href="https://clovyr.io/"><img  src="https://github.com/formbricks/formbricks/assets/675065/9291c8df-9aac-423a-a430-a9a581240075"  height="20px"></a>
 </p>
 <div>
 
-<p align="center">
-<a href="https://trendshift.io/repositories/2570" target="_blank"><img src="https://trendshift.io/api/badge/repositories/2570" alt="Trendshift Badge for formbricks/formbricks" style="width: 250px; height: 55px;" width="250" height="55"/></a>
+<p  align="center">
+<a  href="https://trendshift.io/repositories/2570"  target="_blank"><img  src="https://trendshift.io/api/badge/repositories/2570"  alt="Trendshift Badge for formbricks/formbricks"  style="width: 250px; height: 55px;"  width="250"  height="55"/></a>
 </p>
 
 ## ✨ About Formbricks
 
-<img width="1527" alt="formbricks-sneak" src="https://github-production-user-asset-6210df.s3.amazonaws.com/675065/249441967-ccb89ea3-82b4-4bf2-8d2c-528721ec313b.png">
+<img  width="1527"  alt="formbricks-sneak"  src="https://github-production-user-asset-6210df.s3.amazonaws.com/675065/249441967-ccb89ea3-82b4-4bf2-8d2c-528721ec313b.png">
 
 Formbricks provides a free and open source surveying platform. Gather feedback at every point in the user journey with beautiful in-app, website, link and email surveys. Build on top of Formbricks or leverage prebuilt data analysis capabilities.
 
@@ -66,11 +70,11 @@ Formbricks is both a free and open source survey platform - and a privacy-first
 
 - [Contact](#contact-us)
 
-- [Security](#security)
-
 - [License](#license)
 
-<a id="features"></a>
+- [Security](#security)
+
+<a  id="features"></a>
 
 ### Features
 
@@ -104,26 +108,26 @@ Formbricks is both a free and open source survey platform - and a privacy-first
 
 - 🧘‍♂️ [Zod](https://zod.dev/)
 
-- 🐛 [Vitest](https://vitest.dev/)
-
-<a id="getting-started"></a>
+<a  id="getting-started"></a>
 
 ## 🚀 Getting started
 
 We've got several options depending on your need to help you quickly get started with Formbricks.
 
-<a id="cloud-version"></a>
+<a  id="cloud-version"></a>
 
 ### ☁️ Cloud Version
 
 Formbricks has a hosted cloud offering with a generous free plan to get you up and running as quickly as possible. To get started, please visit [formbricks.com](https://app.formbricks.com/auth/signup).
 
-<a id="self-hosted-version"></a>
+<a  id="self-hosted-version"></a>
 
 ### 🐳 Self-hosting Formbricks
 
 Formbricks is available Open-Source under AGPLv3 license. You can host Formbricks on your own servers using Docker without a subscription.
 
+(In the future we may develop additional features that aren't in the free Open-Source version).
+
 If you opt for self-hosting Formbricks, here are a few options to consider:
 
 #### Docker
@@ -138,17 +142,11 @@ You can deploy Formbricks on [Railway](https://railway.app) using the button bel
 
 [![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new/template/PPDzCd)
 
-##### RepoCloud
+<a  id="development"></a>
 
-Or you can also deploy Formbricks on [RepoCloud](https://repocloud.io) using the button below.
+### 👨‍💻 Development
 
-[![Deploy on RepoCloud](https://d16t0pc4846x52.cloudfront.net/deploy.png)](https://repocloud.io/details/?app_id=254)
-
-<a id="development"></a>
-
-## 👨‍💻 Development
-
-### Prerequisites
+#### Prerequisites
 
 Here is what you need to be able to run Formbricks:
 
@@ -158,11 +156,11 @@ Here is what you need to be able to run Formbricks:
 
 - [Docker](https://www.docker.com/) - to run PostgreSQL and MailHog
 
-### Local Setup
+#### Local Setup
 
 To get started locally, we've got a [guide to help you](https://formbricks.com/docs/contributing/setup).
 
-### Gitpod Setup
+#### Gitpod Setup
 
 1. Click the button below to open this project in Gitpod.
 
@@ -170,7 +168,7 @@ To get started locally, we've got a [guide to help you](https://formbricks.com/d
 
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/formbricks/formbricks)
 
-<a id="contribution"></a>
+<a  id="contribution"></a>
 
 ## ✍️ Contribution
 
@@ -188,46 +186,30 @@ Please check out [our contribution guide](https://formbricks.com/docs/contributi
 
 ## All Thanks To Our Contributors
 
-<a href="https://github.com/formbricks/formbricks/graphs/contributors">
+<a  href="https://github.com/formbricks/formbricks/graphs/contributors">
 
-<img src="https://contrib.rocks/image?repo=formbricks/formbricks" />
+<img  src="https://contrib.rocks/image?repo=formbricks/formbricks"  />
 
 </a>
 
-<a id="contact-us"></a>
+<a  id="contact-us"></a>
 
 ## 📆 Contact us
 
 Let's have a chat about your survey needs and get you started.
 
-<a href="https://cal.com/johannes/onboarding?utm_source=banner&utm_campaign=oss"><img alt="Book us with Cal.com" src="https://cal.com/book-with-cal-dark.svg" /></a>
+<a  href="https://cal.com/johannes/onboarding?utm_source=banner&utm_campaign=oss"><img  alt="Book us with Cal.com"  src="https://cal.com/book-with-cal-dark.svg"  /></a>
 
-<a id="license"></a>
+<a  id="license"></a>
 
-<a id="security"></a>
+## ⚖️ License
+
+Distributed under the AGPLv3 License. See [`LICENSE`](./LICENSE) for more information.
+
+<a  id="security"></a>
 
 ## 🔒 Security
 
 We take security very seriously. If you come across any security vulnerabilities, please disclose them by sending an email to security@formbricks.com. We appreciate your help in making our platform as secure as possible and are committed to working with you to resolve any issues quickly and efficiently. See [`SECURITY.md`](./SECURITY.md) for more information.
 
-<a id="license"></a>
-
-## 👩‍⚖️ License
-
-### The AGPL Formbricks Core
-
-The Formbricks core application is licensed under the [AGPLv3 Open Source License](https://github.com/formbricks/formbricks/blob/main/LICENSE). The core application is fully functional and includes everything you need to design & run link surveys, website surveys and in-app surveys. You can use the software for free for personal and commercial use. You're also allowed to create and distribute modified versions as long as you document the changes you make incl. date. The AGPL license requires you to publish your modified version under the AGPLv3 license as well.
-
-### 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.
-
-### 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).
-
-### 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.
-
-<p align="right"><a href="#top">🔼 Back to top</a></p>
+<p  align="right"><a  href="#top">🔼 Back to top</a></p>

apps/demo/components/LayoutApp.tsx

@@ -1,6 +1,6 @@
-import { Sidebar } from "./Sidebar";
+import Sidebar from "./Sidebar";
 
-export const LayoutApp = ({ children }: { children: React.ReactNode }) => {
+export default function LayoutApp({ children }: { children: React.ReactNode }) {
   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

@@ -1,32 +1,31 @@
+import { classNames } from "@/lib/utils";
 import {
   ClockIcon,
   CogIcon,
   CreditCardIcon,
-  FileBarChartIcon,
-  HelpCircleIcon,
+  DocumentChartBarIcon,
   HomeIcon,
+  QuestionMarkCircleIcon,
   ScaleIcon,
   ShieldCheckIcon,
-  UsersIcon,
-} from "lucide-react";
-
-import { classNames } from "../lib/utils";
+  UserGroupIcon,
+} from "@heroicons/react/24/outline";
 
 const navigation = [
   { name: "Home", href: "#", icon: HomeIcon, current: true },
   { name: "History", href: "#", icon: ClockIcon, current: false },
   { name: "Balances", href: "#", icon: ScaleIcon, current: false },
   { name: "Cards", href: "#", icon: CreditCardIcon, current: false },
-  { name: "Recipients", href: "#", icon: UsersIcon, current: false },
-  { name: "Reports", href: "#", icon: FileBarChartIcon, current: false },
+  { name: "Recipients", href: "#", icon: UserGroupIcon, current: false },
+  { name: "Reports", href: "#", icon: DocumentChartBarIcon, current: false },
 ];
 const secondaryNavigation = [
   { name: "Settings", href: "#", icon: CogIcon },
-  { name: "Help", href: "#", icon: HelpCircleIcon },
+  { name: "Help", href: "#", icon: QuestionMarkCircleIcon },
   { name: "Privacy", href: "#", icon: ShieldCheckIcon },
 ];
 
-export const Sidebar = () => {
+export default function Sidebar({}) {
   return (
     <div className="flex flex-grow flex-col overflow-y-auto bg-cyan-700 pb-4 pt-5">
       <nav
@@ -63,4 +62,4 @@ export const Sidebar = () => {
       </nav>
     </div>
   );
-};
+}

apps/demo/components/SurveySwitch.tsx

@@ -1,29 +0,0 @@
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui/Select";
-
-interface SurveySwitchProps {
-  value: "website" | "app";
-  formbricks: any;
-}
-
-export const SurveySwitch = ({ value, formbricks }: SurveySwitchProps) => {
-  return (
-    <Select
-      value={value}
-      onValueChange={(v) => {
-        formbricks.logout();
-        window.location.href = `/${v}`;
-      }}>
-      <SelectTrigger className="w-[180px] px-4">
-        <SelectValue placeholder="Theme" />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectItem value="website" className="h-10 px-4 hover:bg-slate-100">
-          Website Surveys
-        </SelectItem>
-        <SelectItem value="app" className="hover:bg-slate-10 h-10 px-4">
-          App Surveys
-        </SelectItem>
-      </SelectContent>
-    </Select>
-  );
-};

apps/demo/lib/utils.ts

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

apps/demo/next.config.js

@@ -1,7 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  transpilePackages: ["@formbricks/ui"],
   async redirects() {
     return [
       {

apps/demo/package.json

@@ -12,14 +12,12 @@
   },
   "dependencies": {
     "@formbricks/js": "workspace:*",
-    "@formbricks/ui": "workspace:*",
-    "lucide-react": "^0.378.0",
-    "next": "14.2.3",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "@heroicons/react": "^2.1.1",
+    "next": "14.0.4",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "eslint-config-formbricks": "workspace:*",
-    "@formbricks/tsconfig": "workspace:*"
+    "eslint-config-formbricks": "workspace:*"
   }
 }

apps/demo/pages/_app.tsx

@@ -3,7 +3,7 @@ import Head from "next/head";
 
 import "../styles/globals.css";
 
-const App = ({ Component, pageProps }: AppProps) => {
+export default function App({ Component, pageProps }: AppProps) {
   return (
     <>
       <Head>
@@ -18,6 +18,4 @@ const App = ({ Component, pageProps }: AppProps) => {
       <Component {...pageProps} />
     </>
   );
-};
-
-export default App;
+}

apps/demo/pages/_document.tsx

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

apps/demo/pages/app/index.tsx

@@ -2,14 +2,13 @@ import Image from "next/image";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
-import formbricks from "@formbricks/js/app";
+import formbricks from "@formbricks/js";
 
-import { SurveySwitch } from "../../components/SurveySwitch";
 import fbsetup from "../../public/fb-setup.png";
 
 declare const window: any;
 
-const AppPage = ({}) => {
+export default function AppPage({}) {
   const [darkMode, setDarkMode] = useState(false);
   const router = useRouter();
 
@@ -22,32 +21,18 @@ 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);
-      }
-    };
-
-    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",
-      };
-
+      const isUserId = window.location.href.includes("userId=true");
+      const userId = isUserId ? "THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING" : undefined;
+      const attributes = isUserId ? { "Init Attribute 1": "eight", "Init Attribute 2": "two" } : undefined;
       formbricks.init({
         environmentId: process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID,
         apiHost: process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST,
         userId,
-        attributes: userInitAttributes,
+        debug: true,
+        attributes,
       });
+      window.formbricks = formbricks;
     }
 
     // Connect next.js router to Formbricks
@@ -64,19 +49,15 @@ const AppPage = ({}) => {
   return (
     <div className="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 items-center gap-2">
-          <SurveySwitch value="app" formbricks={formbricks} />
-          <div>
-            <h1 className="text-2xl font-bold text-slate-900 dark:text-white">
-              Formbricks In-product Survey Demo App
-            </h1>
-            <p className="text-slate-700 dark:text-slate-300">
-              This app helps you test your app surveys. You can create and test user actions, create and
-              update user attributes, etc.
-            </p>
-          </div>
+        <div>
+          <h1 className="text-2xl font-bold text-slate-900 dark:text-white">
+            Formbricks In-product Survey Demo App
+          </h1>
+          <p className="text-slate-700 dark:text-slate-300">
+            This app helps you test your in-app surveys. You can create and test user actions, create and
+            update user attributes, etc.
+          </p>
         </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)}>
@@ -89,7 +70,7 @@ const AppPage = ({}) => {
           <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
+              Copy the environment ID of your Formbricks app to the env variable in demo/.env
             </p>
             <Image src={fbsetup} alt="fb setup" className="mt-4 rounded" priority />
 
@@ -100,7 +81,7 @@ 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="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
                   <span className="relative inline-flex h-3 w-3 rounded-full bg-green-500"></span>
                 </span>
               </div>
@@ -119,22 +100,22 @@ const AppPage = ({}) => {
         </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 rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-gray-600 dark:bg-gray-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 className="text-slate-700 dark:text-gray-300">
+              On formbricks.reset() a few things happen: <strong>New person is created</strong> and{" "}
+              <strong>surveys & no-code actions are pulled from Formbricks:</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"
+              className="my-4 rounded-lg bg-slate-500 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600"
               onClick={() => {
                 formbricks.reset();
               }}>
               Reset
             </button>
-            <p className="text-xs text-slate-700 dark:text-slate-300">
+            <p className="text-xs text-slate-700 dark:text-gray-300">
               If you made a change in Formbricks app and it does not seem to work, hit &apos;Reset&apos; and
               try again.
             </p>
@@ -142,12 +123,32 @@ 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
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600"
+                onClick={() => {
+                  formbricks.track("Code Action");
+                }}>
+                Code Action
+              </button>
+            </div>
+            <div>
+              <p className="text-xs text-slate-700 dark:text-gray-300">
+                This button sends a{" "}
+                <a href="https://formbricks.com/docs/actions/code" className="underline" target="_blank">
+                  Code Action
+                </a>{" "}
+                to the Formbricks API called &apos;Code Action&apos;. You will find it in the Actions Tab.
+              </p>
+            </div>
+          </div>
+          <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-gray-700 dark:hover:bg-gray-600">
                 No-Code Action
               </button>
             </div>
             <div>
-              <p className="text-xs text-slate-700 dark:text-slate-300">
+              <p className="text-xs text-slate-700 dark:text-gray-300">
                 This button sends a{" "}
                 <a
                   href="https://formbricks.com/docs/actions/no-code"
@@ -171,12 +172,12 @@ const AppPage = ({}) => {
                 onClick={() => {
                   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">
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700  dark:bg-gray-700 dark:hover:bg-gray-600">
                 Set Plan to &apos;Free&apos;
               </button>
             </div>
             <div>
-              <p className="text-xs text-slate-700 dark:text-slate-300">
+              <p className="text-xs text-slate-700 dark:text-gray-300">
                 This button sets the{" "}
                 <a
                   href="https://formbricks.com/docs/attributes/custom-attributes"
@@ -194,12 +195,12 @@ const AppPage = ({}) => {
                 onClick={() => {
                   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">
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700  dark:bg-gray-700 dark:hover:bg-gray-600">
                 Set Plan to &apos;Paid&apos;
               </button>
             </div>
             <div>
-              <p className="text-xs text-slate-700 dark:text-slate-300">
+              <p className="text-xs text-slate-700 dark:text-gray-300">
                 This button sets the{" "}
                 <a
                   href="https://formbricks.com/docs/attributes/custom-attributes"
@@ -217,12 +218,12 @@ const AppPage = ({}) => {
                 onClick={() => {
                   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">
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700  dark:bg-gray-700 dark:hover:bg-gray-600">
                 Set Email
               </button>
             </div>
             <div>
-              <p className="text-xs text-slate-700 dark:text-slate-300">
+              <p className="text-xs text-slate-700 dark:text-gray-300">
                 This button sets the{" "}
                 <a
                   href="https://formbricks.com/docs/attributes/identify-users"
@@ -234,10 +235,43 @@ const AppPage = ({}) => {
               </p>
             </div>
           </div>
+          <div className="p-6">
+            {router.query.userId === "true" ? (
+              <div>
+                <button
+                  onClick={() => {
+                    window.location.href = "/app";
+                  }}
+                  className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700  dark:bg-gray-700 dark:hover:bg-gray-600">
+                  Deactivate User Identification
+                </button>
+              </div>
+            ) : (
+              <div>
+                <button
+                  onClick={() => {
+                    window.location.href = "/app?userId=true";
+                  }}
+                  className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700  dark:bg-gray-700 dark:hover:bg-gray-600">
+                  Activate User Identification
+                </button>
+              </div>
+            )}
+            <div>
+              <p className="text-xs text-slate-700 dark:text-gray-300">
+                This button activates/deactivates{" "}
+                <a
+                  href="https://formbricks.com/docs/attributes/identify-users"
+                  target="_blank"
+                  className="underline dark:text-blue-500">
+                  user identification
+                </a>{" "}
+                with the userId &apos;THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING&apos;
+              </p>
+            </div>
+          </div>
         </div>
       </div>
     </div>
   );
-};
-
-export default AppPage;
+}

apps/demo/pages/website/index.tsx

@@ -1,144 +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: "de",
-      };
-
-      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 items-center gap-2">
-          <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/tsconfig.json

@@ -1,5 +1,23 @@
 {
-  "extends": "@formbricks/tsconfig/nextjs.json",
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]
 }

apps/docs/app/app-surveys/actions/page.mdx

@@ -1,116 +0,0 @@
-import { MdxImage } from "@/components/MdxImage";
-
-import I1 from "./images/I1.webp";
-import I2 from "./images/I2.webp";
-
-export const metadata = {
-  title: "Using Actions in Formbricks | Fine-tuning User Moments",
-  description:
-    "Dive deep into how actions in Formbricks help products and teams to engage users at precise moments in their journey. Discover the power of actions, from coding to no-code setups, to refine user targeting and generate richer, more detailed user insights.",
-};
-
-#### App Surveys
-
-# Actions & Targeting
-
-Understanding user thoughts and feelings at critical moments in their journey is pivotal. To achieve this, Formbricks uses user-centric actions that trigger surveys at precisely the right time. Actions are essentially notifications sent from your application to Formbricks when predefined user activities occur, making it possible to gather insights during key interactions.
-
-<Note>
-  Ensure that you’ve **initialized Formbricks with a userId** to fully utilize this feature along with other
-  app survey capabilities.
-</Note>
-
-## **How Do Actions Work?**
-
-Actions in Formbricks App Surveys are deeply integrated with user activities within your app. When a user performs a specified action, the Formbricks widget detects this activity and can present a survey to that specific user if the trigger conditions match of that survey, while also recording the event. This capability ensures that surveys are not only triggered at the right time but are also tailored to the user’s recent interactions within the app. You can set up these actions through a user-friendly No-Code interface within the Formbricks dashboard.
-
-## **Why Are Actions Useful?**
-
-Actions are invaluable for enhancing survey relevance and effectiveness:
-
-- **Personalized Engagement**: Surveys triggered by user actions ensure content is highly relevant and engaging, matching each user’s current context.
-- **User Attributes**: By tying surveys to specific user attributes, such as activity levels or feature usage, you can customize the survey experience to reflect individual user profiles.
-- **User Segments**: Analyze action data to create detailed user segments, targeting specific groups with surveys that are pertinent to their behaviors or interactions within the app.
-- **User Targeting**: Precise targeting based on user actions and attributes ensures that surveys are shown only to users who meet certain criteria, enhancing the relevance and effectiveness of each survey.
-
-## **Setting Up No-Code Actions**
-
-Formbricks offers an intuitive No-Code interface that allows you to configure actions without needing to write any code.
-
-To add a No-Code Action:
-
-1. Visit the Formbricks Dashboard & switch to the Actions tab:
-
-<MdxImage
-  src={I1}
-  alt="setup checklist ui of survey popup for app surveys"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-2. Now click on “Add Action”
-
-<MdxImage
-  src={I2}
-  alt="setup checklist ui of survey popup for app surveys"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-Here are three types of No-Code actions you can set up:
-
-### **1. Page URL Action**
-
-This action is triggered when a user visits a specific page within your application. You can define the URL match conditions as follows:
-
-- **exactMatch**: Triggers the action when the URL exactly matches the specified string.
-- **contains**: Activates when the URL contains the specified substring.
-- **startsWith**: Fires when the URL starts with the specified string.
-- **endsWith**: Executes when the URL ends with the specified string.
-- **notMatch**: Triggers when the URL does not match the specified condition.
-- **notContains**: Activates when the URL does not contain the specified substring.
-
-### **2. innerText Action**
-
-Checks if the innerText of a clicked HTML element, like a button label, matches a specific text. This action allows you to display a survey based on text interactions within your application.
-
-### **3. CSS Selector Action**
-
-This action verifies if a clicked HTML element matches a provided CSS selector, such as a class, ID, or any other CSS selector used in your website. It enables survey triggers based on element interactions.
-
-<Note>You can have an action use combination of the 3 types as you wish</Note>
-
-## **Setting Up Code Actions**
-
-For more granular control, you can implement actions directly in your codebase:
-
-1. **Configure the Action**: First, add the action via the Formbricks web interface to make it available for survey configuration.
-   After that you can fire an action using `formbricks.track()`
-
-2. **Track an Action**: Use formbricks.track() to send an action event to Formbricks.
-
-<Col>
-<CodeGroup title="Track an action">
-
-```javascript
-formbricks.track("Action Name");
-```
-
-</CodeGroup>
-</Col>
-Here is an example of how to fire an action when a user clicks a button:
-<Col>
-<CodeGroup title="Track Button Click">
-
-```javascript
-const handleClick = () => {
-  formbricks.track("Button Clicked");
-};
-
-return <button onClick={handleClick}>Click Me</button>;
-```
-
-</CodeGroup>
-</Col>
-
-This documentation frames actions around user interactions, emphasizing the connection between the user's activities and the survey experience. By leveraging user-centric actions, you can create highly targeted and timely surveys that resonate with users and yield valuable insights.

apps/docs/app/app-surveys/advanced-targeting/page.mdx

@@ -1,94 +0,0 @@
-import { MdxImage } from "@/components/MdxImage";
-import { ResponsiveVideo } from "@/components/ResponsiveVideo";
-
-import GermansGpt from "./germans-gpt.webp";
-import Hni from "./hni.webp";
-import PowerUsers from "./power-users.webp";
-import RideHailing from "./ride-hailing.webp";
-import UpsellMiro from "./upsell-miro.webp";
-
-export const metadata = {
-  title: "Advanced Targeting in Surveys | Formbricks",
-  description:
-    "Advanced Targeting allows you to show surveys to just the right group of people. You can target surveys based on user attributes, user events, metadata , literally anything! This helps you get more relevant feedback and make data-driven decisions. All of this without writing a single line of code.",
-};
-
-#### App Surveys
-
-# Advanced Targeting
-
-Advanced Targeting allows you to show surveys to the right group of people. You can target surveys based on user attributes, user events, and more instead of spraying and praying. This helps you get more relevant feedback and make data-driven decisions. All of this without writing a single line of code.
-
-<ResponsiveVideo title="Formbricks Multi-language Surveys"
- src="https://www.youtube-nocookie.com/embed/0BQp6N4cXzU?si=KeBM7G7Ch1xtrsOm&amp;controls=0" />
-
-
-## How to setup Advanced Targeting
-
-<Note>
-  Advanced Targeting is available on the Pro plan! Don't worry, you just need to enter your credit card
-  details to start the freemium plan.
-</Note>
-
-1. On the Formbricks dashboard, click on **People** tab from the top navigation bar.
-
-2. Switch to the **Segments** tab & click on **Create Segment**.
-
-3. Give your segment a title & a description to help you remember what this segment is about.
-
-4. Now click on the **Add Filter** button to add a filter. You can filter based on actions, user attributes, other segments, devices, and more.
-
-5. To group a set of filters together, click on the Three Dots icon on the right side of the filter and click on **Create Group**.
-
-6. Try playing around with different filters & conditions that we have provided to see how the segment size changes.
-
-7. Once you are happy with the segment, click on **Save Segment**.
-
-8. Now, when you create a survey, you can select this segment to target your survey to.
-
-## Examples:
-
-1. Let's say you want to upsell to: Miro, Loom, Figma, Slack and Asana.
-
-   <MdxImage
-     src={UpsellMiro}
-     alt="Upselling Opportunity"
-     quality="100"
-     className="max-w-full rounded-lg sm:max-w-3xl"
-   />
-
-2. Post-experience surveying for a ride hailing app where users who have taken more than 1 ride are shown a survey.
-
-   <MdxImage
-     src={RideHailing}
-     alt="Ride Hailing Targeting"
-     quality="100"
-     className="max-w-full rounded-lg sm:max-w-3xl"
-   />
-
-3. Target High Value users who have $100k+ in their bank account, own 20+ stocks, and have are an active user.
-
-   <MdxImage
-     src={Hni}
-     alt="Target Active High Net Worth Individuals"
-     quality="100"
-     className="max-w-full rounded-lg sm:max-w-3xl"
-   />
-
-4. Target Germans on mobile phones who have regenerated chatGPT answers frequently in the last quarter and did so today.
-
-   <MdxImage
-     src={GermansGpt}
-     alt="Target Germans on Mobile Phones who have regenerated chatGPT answers frequently in the last quarter and did so today"
-     quality="100"
-     className="max-w-full rounded-lg sm:max-w-3xl"
-   />
-
-5. Sneak Peak: How we at Formbricks automate inviting power users to chat with us
-
-   <MdxImage
-     src={PowerUsers}
-     alt="Automate inviting power users to chat with us at Formbricks"
-     quality="100"
-     className="max-w-full rounded-lg sm:max-w-3xl"
-   />

apps/docs/app/app-surveys/quickstart/page.mdx

@@ -1,117 +0,0 @@
-import { MdxImage } from "@/components/MdxImage";
-
-import I1 from "./images/I1.webp";
-import I2 from "./images/I2.webp";
-import I3 from "./images/I3.webp";
-import I4 from "./images/I4.webp";
-import I5 from "./images/I5.webp";
-import I6 from "./images/I6.webp";
-import I7 from "./images/I7.webp";
-import I8 from "./images/I8.webp";
-
-export const metadata = {
-  title: "Formbricks Quickstart Guide: App Surveys Made Easier & Faster",
-  description:
-    "Formbricks is the easiest way to create and manage app surveys. This quickstart guide will show you how to create your first app survey in under 5 minutes.",
-};
-
-#### App Surveys
-
-# Quickstart
-
-App surveys have 6-10x better conversion rates than emailed out surveys. This tutorial explains how to run an app survey in your web app in 10 to 15 minutes. Let’s go!
-
-<Note>
-  App Surveys are ideal for websites that **have a user authentication** system. If you are looking to run
-  surveys on your public facing website, head over to the [Website Surveys Quickstart
-  Guide](/website-surveys/quickstart).
-</Note>
-
-1. **Create a free Formbricks Cloud account**: While you can [self-host](/self-hosting/deployment) Formbricks, but the quickest and easiest way to get started is with the free Cloud plan. Just [sign up here](https://app.formbricks.com/auth/signup) and you'll be guided to our onboarding like below:
-
-<Note>
-  Website & App Surveys have the same integration process. The difference will come when we setup our survey.
-</Note>
-
-<MdxImage
-  src={I1}
-  alt="Choose website survey from survey type"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-2. **Connect your App/Website**: Once you get through a couple of onboarding steps, you’ll be asked to connect your app or website. This is where you’ll find the code snippet for both HTML as well as the npm package which you need to embed in your app:
-
-<MdxImage
-  src={I2}
-  alt="Code snippet for connecting app with Formbricks"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-Paste the code snippet in your app and reload the page. You should now see the Formbricks widget in the lower right corner of your app! The integration is now complete.
-
-<MdxImage
-  src={I3}
-  alt="App connected with Formbricks"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-Onboarding is complete! Now let’s create our first survey as you should see templates to choose from after clicking on **Next**:
-
-<MdxImage
-  src={I4}
-  alt="Choose a survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-3. **Create your first survey**: To be able to see a survey in your app, you need to create one. We’ll choose one of the templates and head over to the survey settings:
-
-Pick the Survey Type as **App Survey**.
-
-<MdxImage
-  src={I5}
-  alt="Survey settings for app survey"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-4. **Set Trigger for the Survey**: Scroll down to Survey Trigger and click on **+ Add action**, choose **New Session**. This will cause this survey to appear when the Formbricks Widget tracks a new user session:
-
-<MdxImage
-  src={I6}
-  alt="Survey trigger settings for app survey"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-5. **Set Recontact Options for debugging**: In Recontact Options we choose the following settings, so that we can play around with the survey more easily. By default, each survey will be shown only once to each user to prevent survey fatigue:
-
-<Note>
-  Please change this setting later on after testing your survey to prevent survey fatigue for your users.
-</Note>
-
-<MdxImage
-  src={I7}
-  alt="Recontact options for app survey"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-6. **Publish your survey**: Now hit **Publish** and you’ll be forwarded to the Summary Page. This is where you’ll find the responses to this survey.
-
-<MdxImage
-  src={I8}
-  alt="Survey published successfully"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
----
-
-- We offer framework guides for various frontend tech, head over to the the [App Survey Framework Guides](/app-survey/framework-guides) to get started with your app survey.
-- Head over to our App Survey SDK documentation to get started with the [App Survey JS SDK](/developer-docs/app-survey-sdk).
-
-Still struggling or something not working as expected? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you!

apps/docs/app/app-surveys/recontact/page.mdx

@@ -1,107 +0,0 @@
-import { MdxImage } from "@/components/MdxImage";
-
-import AppSurvey from "./app-survey.webp";
-import GlobalWaitTime from "./global-wait-time.webp";
-import IgnoreWaitTime from "./ignore-wait-time.webp";
-import SurveyRecontact from "./survey-recontact.webp";
-
-export const metadata = {
-  title: "Recontact Options in Formbricks: When to show a survey again to a user",
-  description:
-    "Explore how to configure Recontact options in Formbricks to control the frequency of survey exposure to users, ensuring effective feedback collection without compromising user experience.",
-};
-
-#### App Surveys
-
-# Recontact Options
-
-Recontact options in Formbricks enable you to manage how often and under what conditions a survey is shown to a user. This feature is crucial for balancing effective feedback collection with a positive user experience by preventing survey fatigue.
-
-## When do Recontact Options come into play?
-
-Recontact options are the last layer of the logic that determines if a survey is shown to the current user. The logic goes as follows:
-
-1. Targeting: Does the current user targeted to fill out this survey? If yes...
-2. Trigger: Is the survey triggered? If yes...
-3. **Recontact Options:** Should the survey be shown (again) to this user? That's dependent on:
-
-- Did the user see any survey recently (meaning, has Global Waiting Time passed)?
-- Did the user see this specific survey already?
-- How many times did the user see this specific survey already?
-- Has the user already responded to this survey?
-
-As you can see, there are a lot of different cases to cover. Let's have a closer look 👇
-
-## Recontact Options
-
-<Note>By default, a survey is shown to each user only once.</Note>
-
-You can adjust the default behavior by modifying the Recontact Options for each survey in the settings:
-
-1. Open the Survey Editor for the survey you want to see & modify the Recontact Options for.
-2. Select the Settings Tab.
-3. Ensure your Survey type is set to **App Survey**.
-
-<MdxImage
-  src={AppSurvey}
-  alt="Choose Survey Type as App Survey"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-4. Scroll down to the Recontact Options section.
-
-Available Recontact Options include:
-
-- **Show only once**: (default) Displays the survey a single time, regardless of whether it was completed.
-- **Until they Submit a Response**: If tareting matches and trigger fires, Formbricks keeps showing the survey until the user submits a response.
-- **Keep Showing while Conditions Match**: Always shows the survey while specific conditions are met. Useful for continuous feedback collection, such as in [Docs Feedback Survey](/best-practices/docs-feedback) or the [Feedback Box](/best-practices/feedback-box).
-
-<MdxImage
-  src={SurveyRecontact}
-  alt="Choose Recontanct Options for the Survey"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-## Product-wide Global Waiting Time
-
-The Global Waiting Time is a universal blocker to make sure that no user sees too many surveys. This is particularly helpful when several teams of large organisations use Formbricks at the same time.
-
-<Note>The default Global Waiting Time is set to 7 days.</Note>
-
-To adjust the Global Waiting Time:
-
-1. Visit Formbricks Settings
-2. Go to Product Settings
-3. Find the **Recontact Waiting Time** section
-4. Modify the interval (in days) as needed.
-
-<MdxImage
-  src={GlobalWaitTime}
-  alt="Formbricks Product-Wide Wait Time"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-## Overriding Global Waiting Time for a Specific Survey
-
-For specific surveys, you may need to override the default waiting time. Below is how you can do that:
-
-1. In the Survey Editor, access the Settings Tab.
-2. Find the Ignore Waiting Time between Surveys toggle under Recontact Options.
-3. Enable this toggle to bypass the global setting.
-4. Set a custom recontact period:
-   - **Always Show Survey**: Displays the survey whenever triggered, ignoring the waiting time.
-   - **Wait `X` days before showing this survey again**: Sets a specific interval before the survey can be shown again.
-
-<MdxImage
-  src={IgnoreWaitTime}
-  alt="Ignore Global Waiting Time for a Specific Survey"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
----
-
-Still struggling or something not working as expected? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you!

apps/docs/app/app-surveys/user-identification/page.mdx

@@ -1,123 +0,0 @@
-export const metadata = {
-  title: "Identifying Users in Formbricks App Surveys",
-  description:
-    "Dive into the importance of user identification in surveys. Boost your survey response rates and target the right users with Formbricks.",
-};
-
-#### App Surveys
-
-# User Identification
-
-User Identification helps you to not only segment your users but also to see more information about the user who responded to a survey. This helps you to target surveys to specific user segments and see more information about the user who responded to a survey.
-
-### Understanding Identified vs Unidentified Users
-
-<Note>
-  Formbricks App Surveys can **only be used with identified users**. If you are looking to run surveys on your
-  public-facing website, head over to the [Website Surveys](/website-surveys/quickstart) section.
-</Note>
-
-In Formbricks, understanding the distinction between identified and unidentified users is crucial for effective survey segmentation and targeted feedback collection.
-
-| Feature                                                  | Unidentified Users | Identified Users |
-| -------------------------------------------------------- | ------------------ | ---------------- |
-| Show surveys based on **trigger** actions                | ✅                 | ✅               |
-| Set **recontact details** to avoid survey fatique        | ✅                 | ✅               |
-| Target a subset of users using **attributes & segments** | ❌                 | ✅               |
-| Collect **user information** in Formbricks               | ❌                 | ✅               |
-| Track **custom attributes**                              | ❌                 | ✅               |
-| Counts towards your **monthly tacked user (MTU)** limit  | ❌                 | ✅               |
-| Recommended for **public-facing websites**               | ✅                 | ❌               |
-| Recommended for **web apps after login**                 | ❌                 | ✅               |
-
-## Identified Users
-
-Identified users are those for whom specific information has been set, notably the userId. This identification allows for more precise targeting of surveys and a deeper understanding of the feedback provided. When enabled, all information specified by you and all actions are sent to Formbricks.
-
-This method is recommended for applications where users are required to log in and will often return.
-
-### Setting User ID
-
-To enable the User identification feature you need to set the `userId` in the init() call of Formbricks. Only when the `userId` is set the person will be visible in the Formbricks dashboard. The `userId` can be any string and it's best to use the default identifier you use in your app (e.g. unique id from database or the email address if it's unique) but you can also anonymize these as long as they are unique for every user.
-
-<Col>
-<CodeGroup title="Setting User ID">
-
-```javascript
-formbricks.init({
-  environmentId: "<environment-id>",
-  apiHost: "<api-host>",
-  userId: "<user_id>",
-});
-```
-
-</CodeGroup>
-</Col>
-
-### Enhanced Initialization with User Attributes
-
-In addition to setting the `userId`, Formbricks allows you to set user attributes right at the initialization. This ensures that your user data is seamlessly integrated from the start. Here's how you can include user attributes in the `init()` function:
-
-<Col>
-<CodeGroup title="Enhanced Initialization with User Attributes">
-
-```javascript
-formbricks.init({
-  environmentId: "<environment-id>",
-  apiHost: "<api-host>",
-  userId: "<user_id>",
-  attributes: {
-    // your custom attributes
-    Plan: "premium",
-  },
-});
-```
-
-</CodeGroup>
-</Col>
-
-## Setting Custom User Attributes
-
-You can use the setAttribute function to set any custom attribute for the user (e.g. name, plan, etc.):
-
-<Note>
-  Please note that the number of different attribute classes (e.g., "Plan," "First Name," etc.) is currently
-  limited to 150 attributes per environment.
-</Note>
-
-<Col>
-<CodeGroup title="Setting Custom Attributes">
-
-```javascript
-formbricks.setAttribute("Plan", "free");
-```
-
-</CodeGroup>
-</Col>
-
-Generally speaking, the setAttribute function works like this:
-
-<Col>
-<CodeGroup title="Setting Custom Attributes">
-
-```javascript
-formbricks.setAttribute("attribute_key", "attribute_value");
-```
-
-</CodeGroup>
-</Col>
-Where `attributeName` is the name of the attribute you want to set, and `attributeValue` is the value of the attribute you want to set.
-
-### Logging Out Users
-
-When a user logs out of your webpage, make sure to log them out of Formbricks as well. This will prevent new activity from being associated with an incorrect user. Use the logout function:
-
-<Col>
-<CodeGroup title="Logging out User">
-
-```javascript
-formbricks.logout();
-```
-
-</CodeGroup>
-</Col>

apps/docs/app/best-practices/improve-email-content/page.mdx

@@ -1,110 +0,0 @@
-import { MdxImage } from "@/components/MdxImage";
-
-import NewsletterSurveyType from "./choose-survey-type.webp";
-import NewsletterSurveyEmbedCode from "./embed-survey-code-in-your-email.webp";
-import NewsletterSurveyEmbedPrompt from "./embed-survey-prompt.webp";
-import NewsletterSurveyEditor from "./improve-newsletter-content-editor-formbricks.webp";
-import NewsletterSurvey from "./improve-newsletter-content-survey-location.webp";
-
-export const metadata = {
-  title: "Measure email content quality with Formbricks",
-  description:
-    "Measuring the content quality of both transactional and marketing email is a key element for improving customer communication.",
-};
-
-#### Best Practices
-
-# Improve Email Content
-
-Email remains the predominant way to communicate with your customers. Measure the effectiveness to improve your offering.
-
-## Purpose
-
-Measuring the content quality of both transactional and marketing email is a key element for improving customer communication.
-
-## Formbricks Approach
-
-- Embed the survey into your email so it’s part of the newsletter.
-- Use link prefilling to store the answer users clicked on in the email.
-- Dynamic user identification to append reader's email for personalized profiles and follow ups.
-
-## Installation
-
-To embed the newsletter survey into your email, follow these steps:
-
-1. Create new 'Improve Newsletter Content' survey at [app.formbricks.com](https://app.formbricks.com/)
-2. Select how you where you want to display the survey.
-3. Copy the embed code anywhere you want in your newsletter.
-
-### 1. Create new 'Improve Newsletter Content' Survey
-
-If you don't have an account yet, create one at [app.formbricks.com](https://app.formbricks.com/auth/signup)
-
-Then, create a new survey and look for the "Improve Newsletter Content" template:
-
-<MdxImage
-  src={NewsletterSurvey}
-  alt="Create Improve Newsletter Content by template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-### 2. Customize Survey questions
-
-Customize survey questions, emojis or stars however you like:
-
-<MdxImage
-  src={NewsletterSurveyEditor}
-  alt="Edit Improve Newsletter Content template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-### 3. Configure Survey Settings
-
-When you are done customizing your survey questions, navigate to the Settings tab and choose the type of survey you want. You need to choose Link Survey:
-
-<MdxImage
-  src={NewsletterSurveyType}
-  alt="Choose survey type"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-### 4. Choose how you want to embed your survey
-
-After publishing your survey, a modal that prompts you to embed your survey will pop up.
-
-<MdxImage
-  src={NewsletterSurveyEmbedPrompt}
-  alt="Embed newsletter survey"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-Select the Embed Survey card and you will be directed to another modal, where the first embed option displayed will be to embed the survey in an email.
-
-### 5. Copy code to embed the survey in your newsletter
-
-Click the button with the “View Embed Code” text at the top right corner of the modal and simply paste the HTML code for your survey anywhere you want it in your newsletter. You can see the preview in the below image:
-
-<MdxImage
-  src={NewsletterSurveyEmbedCode}
-  alt="Embed survey code"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-And you're done! Send a test email to yourself and try it out 🤓
-
-## Learn about data prefilling
-
-<Note>
-  ## How does data prefilling work? Learn about how link prefilling and user identification maximize your
-  insights in [this detailed
-  guide](/blog/how-smart-writers-use-formbricks-open-source-tool-to-measure-the-quality-of-their-newsletter-content).
-</Note>
-
-### &nbsp;
-
-# That’s it! 🎉

apps/docs/app/developer-docs/api-sdk/page.mdx

@@ -1,269 +0,0 @@
-import { MdxImage } from "@/components/MdxImage";
-
-export const metadata = {
-  title: "Formbricks API SDK",
-  description:
-    "An overview of all available methods & how to integrate Formbricks API for backend developers in web applications. Learn the key methods, configuration settings, and best practices.",
-};
-
-#### Developer Docs
-
-# SDK: Formbricks API
-
-### Overview
-
-The Formbricks Client API Wrapper is a lightweight package designed to simplify the integration of Formbricks API endpoints into your JavaScript (JS) or TypeScript (TS) projects. With this wrapper, you can easily interact with Formbricks API endpoints without the need for complex setup or manual HTTP requests.
-
-### Install
-
-<Col>
-<CodeGroup title="npm">
-
-```js {{ title: 'npm' }}
-npm install @formbricks/api
-```
-
-```js {{ title: 'yarn' }}
-yarn add @formbricks/api
-```
-
-```js {{ title: 'pnpm' }}
-pnpm add @formbricks/api
-```
-
-</CodeGroup>
-</Col>
-
-## Methods
-
-### Initialize Formbricks
-
-Initialize the Formbricks API Client for backend developers to interact with Formbricks API endpoints:
-
-<Col>
-<CodeGroup title="Initialize Formbricks API">
-
-```javascript
-import { FormbricksAPI } from "@formbricks/api";
-
-const api = new FormbricksAPI({
-  apiHost: `https://app.formbricks.com`, // If you have self-hosted Formbricks, change this to your self hosted instance's URL
-  environmentId: "<environment-id>", // Replace this with your Formbricks environment ID
-});
-```
-
-</CodeGroup>
-</Col>
-
-The API client is now ready to be used across your project. It can be used to interact with the following models:
-
-## Displays
-
-- Create Display
-
-<Col>
-<CodeGroup title="Crate Display">
-
-```javascript {{ title: 'Create Display Method Call'}}
-await api.client.display.create({
-  surveyId: "<your-survey-id>", // required
-  userId: "<your-user-id>", // optional
-  responseId: "<your-response-id>", // optional
-});
-```
-
-```javascript {{ title: 'Create Display Method Return Type' }}
-Promise<{ id: string }, NetworkError | Error>
-```
-
-</CodeGroup>
-</Col>
-
-- Update Display
-
-<Col>
-<CodeGroup title="Update Display">
-
-```javascript {{ title: 'Update Display Method Call'}}
-await api.client.display.update(
-  displayId: "<your-display-id>",
-  {
-    userId: "<your-user-id>", // optional
-    responseId: "<your-response-id>", // optional
-  },
-);
-```
-
-```javascript {{ title: 'Update Display Method Return Type' }}
-Promise<{ }, NetworkError | Error]>
-```
-
-</CodeGroup>
-</Col>
-
-## Responses
-
-- Create Response
-
-<Col>
-<CodeGroup title="Create Response">
-
-```javascript {{ title: 'Create Response Method Call'}}
-await api.client.response.create({
-  surveyId: "<your-survey-id>", // required
-  finished: boolean, // required
-  data: {
-    // required
-    questionId: "<answer-to-this-question-in-string>",
-    anotherQuestionId: 123, // answer to this question in number
-    yetAnotherQuestionId: ["option1", "option2"], // answer to this question in array,
-  },
-
-  userId: "<your-user-id>",
-  singleUseId: "<your-single-use-id>",
-  ttc: {
-    questionId: 123,
-  },
-  meta: {
-    source: "<your-source>",
-    url: "<your-url>",
-    userAgent: {
-      browser: "<your-browser>",
-      device: "<your-device>",
-      os: "<your-os>",
-    },
-    country: "<your-country>",
-  },
-});
-```
-
-```javascript {{ title: 'Create Response Method Return Type' }}
-Promise<{ id: string }, NetworkError | Error>
-```
-
-</CodeGroup>
-</Col>
-
-- Update Response
-
-<Col>
-<CodeGroup title="Update Response">
-
-```javascript {{ title: 'Update Response Method Call'}}
-await api.client.response.update({
-  responseId: "<your-response-id>", // required
-  finished: boolean, // required
-  data: {
-    // required
-    questionId: "<answer-to-this-question-in-string>",
-    anotherQuestionId: 123, // answer to this question in number
-    yetAnotherQuestionId: ["option1", "option2"], // answer to this question in array,
-  },
-  ttc: {
-    // required
-    questionId: 123,
-  },
-});
-```
-
-```javascript {{ title: 'Update Response Method Return Type' }}
-Promise<{ }, NetworkError | Error]>
-```
-
-</CodeGroup>
-</Col>
-
-## Action
-
-- Create Action:
-
-<Note> An environment cannot have 2 actions with the same name. </Note>
-
-<Col>
-<CodeGroup title="Create Action">
-
-```javascript {{ title: 'Create Action Method Call'}}
-await api.client.action.create({
-  name: "<your-action-name>", // required
-  userId: "<your-user-id>", // required
-});
-```
-
-```javascript {{ title: 'Create Action Method Return Type' }}
-Promise<{ }, NetworkError | Error]>
-```
-
-</CodeGroup>
-</Col>
-
-## Attribute
-
-- Update Attribute
-
-<Col>
-<CodeGroup title="Update Attribute">
-
-```javascript {{ title: 'Update Attribute Method Call'}}
-await api.client.attribute.update({
-  userId: "<your-user-id>", // required
-  attributes: {
-    key1: "value1",
-    key2: "value2",
-  }, // required
-});
-```
-
-```javascript {{ title: 'Update Attribute Method Return Type' }}
-Promise<{ changed: boolean, message: string }, NetworkError | Error>
-```
-
-</CodeGroup>
-</Col>
-
-## People
-
-- Create Person
-
-<Col>
-<CodeGroup title="Create Person">
-
-```javascript {{ title: 'Create Person Method Call'}}
-await api.client.people.create({
-  userId: "<your-user-id>", // required
-});
-```
-
-```javascript {{ title: 'Create Person Method Return Type' }}
-Promise<{ }, NetworkError | Error]>
-```
-
-</CodeGroup>
-</Col>
-
-## Storage
-
-- Upload File:
-
-<Col>
-<CodeGroup title="Upload File">
-
-```javascript {{ title: 'Upload Method Call'}}
-await api.client.storage.uploadFile(
-  file: File, // required (of interface File of the browser's File API)
-  {
-    allowedFileTypes: ["file-type-allowed", "for-example", "image/jpeg"],
-    surveyId: "<your-survey-id>",
-  }
-);
-```
-
-```javascript {{ title: 'Upload Method Return Type' }}
-Promise<fileUrl>
-```
-
-</CodeGroup>
-</Col>
-
----
-
-If you have any questions or need help, feel free to reach out to us on our **[Discord](https://formbricks.com/discord)**

apps/docs/app/developer-docs/app-survey-sdk/page.mdx

@@ -1,245 +0,0 @@
-import { MdxImage } from "@/components/MdxImage";
-
-import I1 from "./images/1-set-up-in-app-micro-survey-popup.webp";
-import I2 from "./images/2-micro-survey-pop-up-in-app.webp";
-import I3 from "./images/3-survey-logs-in-app-survey-popup.webp";
-
-export const metadata = {
-  title: "Formbricks App Survey SDK",
-  description:
-    "An overview of all available methods & how to integrate Formbricks App Surveys for frontend developers in web applications. Learn the key methods, configuration settings, and best practices.",
-};
-
-#### Developer Docs
-
-# SDK: App Survey
-
-### Overview
-
-The Formbricks JS SDK is a 2-in-1 SDK for seamlessly integrating both App Surveys and Website Surveys into your projects. In this section, we'll explore how to leverage the SDK specifically for **app** surveys.  It’s available on npm [here](https://www.npmjs.com/package/@formbricks/js/).
-
-### Install
-
-<Col>
-<CodeGroup title="npm">
-
-```js {{ title: 'npm' }}
-npm install @formbricks/js
-```
-```js {{ title: 'yarn' }}
-yarn add @formbricks/js
-```
-```js {{ title: 'pnpm' }}
-pnpm add @formbricks/js
-```
-
-</CodeGroup>
-</Col>
-
-## Methods
-
-### Initialize Formbricks
-
-Initialize the Formbricks JS Client for app surveys where you pass the userId (creates a user if not existing in Formbricks) to attribute & target the user based on their actions.
-
-<Col>
-<CodeGroup title="Initialize Formbricks">
-
-```javascript
-import formbricks from "@formbricks/js/app";
-
-formbricks.init({
-  environmentId: "<your-environment-id>", // required
-  apiHost: "<your-api-host>", // required
-  userId: "<user-id>" // required
-});
-```
-</CodeGroup>
-</Col>
-
-The moment you initialise Formbricks, your user will start seeing surveys that get triggered on simpler actions such as on New Session, Page Exit, & other custom actions!
-
-<Note>
-Formbricks JS is a client SDK meant to be run client-side in their browser so make sure the window object is accessible. Below is an example of how you can set it!
-
-<Col>
-<CodeGroup>
-
-```js
-if (window !== undefined) {
-    formbricks.init({
-        environmentId: "<your-environment-id>",
-        apiHost: "<your-api-host>", 
-        userId: "<user-id>"
-    });
-} else {
-    console.error("Window object not accessible to init Formbricks");
-}
-```
-</CodeGroup>
-</Col>
-
-</Note>
-
-### Set Attribute
-
-You can set custom attributes for the identified user. This can be helpful for segmenting users based on specific characteristics or properties. To learn how to set custom user attributes, please check out our [User Attributes Guide](/app-surveys/user-identification).
-
-<Col>
-<CodeGroup>
-
-```js
-formbricks.setAttribute("Plan", "Paid");
-```
-</CodeGroup>
-</Col>
-
-### Track Action
-
-Track user actions to trigger surveys based on user interactions, such as button clicks or scrolling:
-
-<Col>
-<CodeGroup>
-
-```js
-formbricks.track("Clicked on Claim");
-```
-</CodeGroup>
-</Col>
-
-
-### Logout
-
-To log out and deinitialize Formbricks, use the formbricks.logout() function. This action clears the current initialization configuration and erases stored frontend information, such as the surveys a user has viewed or completed. It's an important step when a user logs out of your application or when you want to reset Formbricks.
-
-<Col>
-<CodeGroup>
-
-```js
-formbricks.logout();
-```
-</CodeGroup>
-</Col>
-
-After calling formbricks.logout(), you'll need to reinitialize Formbricks before using any of its features again. Ensure that you properly reinitialize Formbricks to avoid unexpected errors or behavior in your application.
-
-### Reset
-
-Reset the current instance and fetch the latest surveys and state again:
-
-<Col>
-<CodeGroup>
-
-```js
-formbricks.reset();
-```
-</CodeGroup>
-</Col>
-
-### Register Route Change:
-
-Listen for page changes and dynamically show surveys configured via no-code actions in the Formbricks app:
-
-<Note> This is only needed when your framework has a custom routing system and you want to trigger surveys on route changes. For example: NextJs</Note>
-
-<Col>
-<CodeGroup>
-
-```js
-formbricks.registerRouteChange();
-```
-</CodeGroup>
-</Col>
-
-## Debug Mode
-
-To enable debug mode in Formbricks, add `?formbricksDebug=true` to your app’s URL.
-
-For example, if you’ve integrated Formbricks JS to your app hosted at `https://example.com`, then change the URL to `https://example.com?formbricksDebug=true` and refresh the page, now view the console logs to see the debug mode live in action.
-
-This activates detailed debug messages in the browser console, providing deeper insights into Formbricks' operation and potential issues.
-
----
-
-## Troubleshooting
-
-In case you don’t see your survey right away, here's what you can do. Go through these to find the error fast:
-
-### Formbricks Cloud and your app are not connected properly.
-
-Go back to [app.formbricks.com](http://app.formbricks.com) or your self-hosted instance's URL and go to the Setup Checklist in the Settings. If the status is still indicated as “Not connected” your app hasn't yet pinged the Formbricks Cloud:
-
-<MdxImage
-  src={I1}
-  alt="setup checklist ui of survey popup for app surveys"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-**How to fix it:**
-
-1. Check if your app loads the Formbricks widget correctly.
-2. Make sure you have `debug` mode enabled in your integration and you should see the Formbricks debug logs in your browser console while being in your app (right click in the browser, `Inspect`, switch to the console tab). If you don’t see them, double check your integration.
-
----
-
-### Survey not loaded
-
-If your app is connected with Formbricks Cloud, the survey might have not been loaded properly. Check the debug logs and search for the list of surveys loaded. It should look like so:
-
-<MdxImage
-  src={I3}
-  alt="survey logs for app survey pop up micro"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-**How to fix it:**
-
-The widget only loads surveys which are **public** and **in progress**. Go to Formbricks Cloud and to the Survey Summary page. Check if your survey is live:
-
-<MdxImage
-  src={I2}
-  alt="ui of survey popup for app micro surveys"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
----
-
-### Survey not triggered
-
-If the survey is loaded by the widget it might not have been triggered properly.
-
-**How to fix:**
-
-1. Open your local app in an incognito tab or window. The New Session event is only fired if a user was inactive for 60 minutes or was logged out of Formbricks via formrbicks.logout().
-2. Check the debug logs for “Event ‘New Session” tracked”. If you see it in the logs and the survey still did not get displayed, [please let us know.](mailto:support@formbricks.com)
-
----
-
-### Survey not displayed in HTML page
-
-If the survey is loaded by the widget in the HTML page, try the below steps:
-
-**How to fix:**
-
-1. Make sure you have added the [script](/app-surveys/framework-guides#html) in the head of the HTML page.
-2. Verify that you have set the \<environment-id\> and \<host\> as per your Formbricks instance.
-3. Verify that you have the latest version of the JS Package.
-4. Check the debug logs to see if you still see any errors.
-
----
-
-### Cannot read undefined of .init()
-
-If you see this error in the console, it means that the Formbricks JS package is not loaded properly.
-
-**How to fix:**
-
-1. Update to the latest version of the JS Package.
-2. Verify this wherever you call initialise the Formbricks instance in your code.
-3. It should now start working.
-
----
-
-If you are still facing issues, please [Open an Issue on GitHub](https://github.com/formbricks/formbricks/issues) or [join our Discord](https://formbricks.com/discord)! We’re more than happy to help you get started 😊

apps/docs/app/developer-docs/integrations/google-sheets/page.mdx

@@ -1,123 +0,0 @@
-import { MdxImage } from "@/components/MdxImage";
-
-import ConnectWithGoogle from "./connect-with-google.webp";
-import DeleteConnection from "./delete-connection.webp";
-import GoogleConnected from "./google-connected.webp";
-import IntegrationTab from "./integrations-tab.webp";
-import LinkSurveyWithSheet from "./link-survey-with-sheet.webp";
-import LinkWithQuestions from "./link-with-questions.webp";
-import ListLinkedSurveys from "./list-linked-surveys.webp";
-
-export const metadata = {
-  title: "Google Sheets",
-  description:
-    "The Google Sheets integration allows you to automatically send responses to a Google Sheet of your choice.",
-};
-
-#### Integrations
-
-# Google Sheets
-
-The Google Sheets integration allows you to automatically send responses to a Google Sheet of your choice.
-
-<Note>
-    If you are on a self-hosted instance, you will need to configure this integration separately. Please follow the guides [here](/self-hosting/integrations) to configure integrations on your self-hosted instance.
-</Note>
-
-## Connect Google Sheets
-
-1. Go to the Integrations tab in your [Formbricks Cloud dashboard](https://app.formbricks.com/) and click on the "Connect" button under Google Sheets integration.
-
-<MdxImage
-  src={IntegrationTab}
-  alt="Formbricks Integrations Tab"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-2. Now click on the "Connect with Google" button to authenticate yourself with Google.
-
-<MdxImage
-  src={ConnectWithGoogle}
-  alt="Connect Formbricks with your Google"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-3. You will now be taken to the Google OAuth page where you can select the Google account you want to use for the integration.
-
-4. Once you have selected the account and completed the authentication process, you will be taken back to Formbricks Cloud and see the connected status as below:
-
-<MdxImage
-  src={GoogleConnected}
-  alt="Formbricks is now connected with Google"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-<Note>
-
-Before the next step, make sure that you have a Formbricks Survey with at least one question and a Google Sheet in the Google account you integrated.
-
-</Note>
-
-5. Now click on the "Link New Sheet" button to link a Google Sheet with Formbricks and a modal will open up.
-
-<MdxImage
-  src={LinkSurveyWithSheet}
-  alt="Link Formbricks with a Google Sheet"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-6. Select the Google Sheet you want to link with Formbricks and the Survey. On doing so, you will be asked with what questions' responses you want to feed in the Google Sheet. Select the questions and click on the "Link Sheet" button.
-
-<MdxImage
-  src={LinkWithQuestions}
-  alt="Select question to link with Google Sheet"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-7. On submitting, the modal will close and you will see the linked Google Sheet in the list of linked Google Sheets.
-
-<MdxImage
-  src={ListLinkedSurveys}
-  alt="List of linked Google Sheets"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-Congratulations! You have successfully linked a Google Sheet with Formbricks. Now whenever a response is submitted for the linked survey, it will be automatically added to the linked Google Sheet.
-
-## Remove Integration with Google Account
-
-To remove the integration with Google Account,
-
-1. Visit the Integrations tab in your Formbricks Cloud dashboard.
-2. Select **Manage Sheets** button in the Google Sheets card.
-3. Click on the **Delete Integration** button.
-4. It will now ask for a confirmation to remove the integration. Click on the **Delete** button to remove the integration. You can always come back and connect again with the same Google Account.
-
-<MdxImage
-  src={DeleteConnection}
-  alt="Delete Google Integration with Formbricks"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-## What info do you need?
-
-- Your **Email ID** for authentication (We use this to identify you)
-- Your **Google Sheets Names and IDs** (We fetch this to list and show you the options of choosing a sheet to integrate with)
-- Write access to **selected Google Sheet** (The google sheet you choose to integrate it with, we write survey responses to it)
-
-For the above, we ask for:
-
-1. **User Email**: To identify you (that's it, nothing else, we're opensource, see this in our codebase [here](https://github.com/formbricks/formbricks/blob/main/apps/web/app/api/google-sheet/callback/route.ts#L47C17-L47C25))
-1. **Google Drive API**: To list all your google sheets (that's it, nothing else, we're opensource, see this method in our codebase [here](https://github.com/formbricks/formbricks/blob/main/packages/lib/googleSheet/service.ts#L13))
-1. **Google Spreadsheet API**: To write to the spreadsheet you select (that's it, nothing else, we're opensource, see this method in our codebase [here](https://github.com/formbricks/formbricks/blob/main/packages/lib/googleSheet/service.ts#L70))
-
-<Note>We store as little personal information as possible.</Note>
-
-Still struggling or something not working as expected? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you!