Edit apps/web/app/(auth)/auth/login/components/SigninForm.tsx

Co-authored-by: Matti Nannt <mail@matthiasnannt.com>

.devcontainer/devcontainer.json

@@ -12,8 +12,8 @@
     // Configure properties specific to VS Code.
     "vscode": {
       // Add the IDs of extensions you want installed when the container is created.
-      "extensions": ["dbaeumer.vscode-eslint"]
-    }
+      "extensions": ["dbaeumer.vscode-eslint"],
+    },
   },
 
   // Use 'forwardPorts' to make a list of ports inside the container available locally.
@@ -25,5 +25,5 @@
   "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"
+  "remoteUser": "node",
 }

.env.example

@@ -56,11 +56,14 @@ SMTP_PASSWORD=smtpPassword
 
 # 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 uplaod in serverless environments like Vercel
+# S3 Storage is required for the file upload in serverless environments like Vercel
 S3_ACCESS_KEY=
 S3_SECRET_KEY=
 S3_REGION=
@@ -162,3 +165,6 @@ ENTERPRISE_LICENSE_KEY=
 
 # Ignore Rate Limiting across the Formbricks app
 # RATE_LIMITING_DISABLED=1
+
+# OpenTelemetry URL for tracing
+# OPENTELEMETRY_LISTENER_URL=http://localhost:4318/v1/traces

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

@@ -6,6 +6,8 @@ runs:
     - name: Checkout repo
       uses: actions/checkout@v3
 
+    - uses: ./.github/actions/dangerous-git-checkout
+
     - name: Cache Build
       uses: actions/cache@v3
       id: cache-build

.github/workflows/kamal.yml

@@ -0,0 +1,119 @@
+name: Kamal Deploy
+concurrency:
+  group: deploy-to-kamal
+  cancel-in-progress: false
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  Deploy:
+    runs-on: ubuntu-latest
+    environment: production
+    env:
+      DOCKER_BUILDKIT: 1
+      IS_FORMBRICKS_CLOUD: ${{ vars.IS_FORMBRICKS_CLOUD }}
+      WEBAPP_URL: ${{ vars.WEBAPP_URL }}
+      DATABASE_URL: ${{ secrets.DATABASE_URL }}
+      NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
+      ENCRYPTION_KEY: ${{ secrets.ENCRYPTION_KEY }}
+      SHORT_URL_BASE: ${{ vars.SHORT_URL_BASE }}
+      MAIL_FROM: ${{ secrets.MAIL_FROM }}
+      SMTP_HOST: ${{ secrets.SMTP_HOST }}
+      SMTP_PORT: ${{ secrets.SMTP_PORT }}
+      SMTP_USER: ${{ secrets.SMTP_USER }}
+      SMTP_PASSWORD: ${{ secrets.SMTP_PASSWORD }}
+      PRIVACY_URL: ${{ vars.PRIVACY_URL }}
+      TERMS_URL: ${{ vars.TERMS_URL }}
+      IMPRINT_URL: ${{ vars.IMPRINT_URL }}
+      GITHUB_ID: ${{ secrets.GITHUB_ID }}
+      GITHUB_SECRET: ${{ secrets.GITHUB_SECRET }}
+      GOOGLE_CLIENT_ID: ${{ secrets.GOOGLE_CLIENT_ID }}
+      GOOGLE_CLIENT_SECRET: ${{ secrets.GOOGLE_CLIENT_SECRET }}
+      AZUREAD_CLIENT_ID: ${{ secrets.AZUREAD_CLIENT_ID }}
+      AZUREAD_CLIENT_SECRET: ${{ secrets.AZUREAD_CLIENT_SECRET }}
+      AZUREAD_TENANT_ID: ${{ secrets.AZUREAD_TENANT_ID }}
+      OIDC_CLIENT_ID: ${{ secrets.OIDC_CLIENT_ID }}
+      OIDC_CLIENT_SECRET: ${{ secrets.OIDC_CLIENT_SECRET }}
+      OIDC_ISSUER: ${{ secrets.OIDC_ISSUER }}
+      OIDC_DISPLAY_NAME: ${{ secrets.OIDC_DISPLAY_NAME }}
+      OIDC_SIGNING_ALGORITHM: ${{ secrets.OIDC_SIGNING_ALGORITHM }}
+      CRON_SECRET: ${{ secrets.CRON_SECRET }}
+      ASSET_PREFIX_URL: ${{ vars.ASSET_PREFIX_URL }}
+      NOTION_OAUTH_CLIENT_ID: ${{ secrets.NOTION_OAUTH_CLIENT_ID }}
+      NOTION_OAUTH_CLIENT_SECRET: ${{ secrets.NOTION_OAUTH_CLIENT_SECRET }}
+      STRIPE_SECRET_KEY: ${{ secrets.STRIPE_SECRET_KEY }}
+      STRIPE_WEBHOOK_SECRET: ${{ secrets.STRIPE_WEBHOOK_SECRET }}
+      GOOGLE_SHEETS_CLIENT_ID: ${{ secrets.GOOGLE_SHEETS_CLIENT_ID }}
+      GOOGLE_SHEETS_CLIENT_SECRET: ${{ secrets.GOOGLE_SHEETS_CLIENT_SECRET }}
+      GOOGLE_SHEETS_REDIRECT_URL: ${{ secrets.GOOGLE_SHEETS_REDIRECT_URL }}
+      AIRTABLE_CLIENT_ID: ${{ secrets.AIRTABLE_CLIENT_ID }}
+      ENTERPRISE_LICENSE_KEY: ${{ secrets.ENTERPRISE_LICENSE_KEY }}
+      DEFAULT_TEAM_ID: ${{ vars.DEFAULT_TEAM_ID }}
+      ONBOARDING_DISABLED: ${{ vars.ONBOARDING_DISABLED }}
+      CUSTOMER_IO_API_KEY: ${{ secrets.CUSTOMER_IO_API_KEY }}
+      CUSTOMER_IO_SITE_ID: ${{ secrets.CUSTOMER_IO_SITE_ID }}
+      NEXT_PUBLIC_POSTHOG_API_KEY: ${{ vars.NEXT_PUBLIC_POSTHOG_API_KEY }}
+      NEXT_PUBLIC_POSTHOG_API_HOST: ${{ vars.NEXT_PUBLIC_POSTHOG_API_HOST }}
+      NEXT_PUBLIC_FORMBRICKS_API_HOST: ${{ vars.NEXT_PUBLIC_FORMBRICKS_API_HOST }}
+      NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID: ${{ vars.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID }}
+      NEXT_PUBLIC_FORMBRICKS_ONBOARDING_SURVEY_ID: ${{ vars.NEXT_PUBLIC_FORMBRICKS_ONBOARDING_SURVEY_ID }}
+      NEXT_PUBLIC_SENTRY_DSN: ${{ vars.NEXT_PUBLIC_SENTRY_DSN }}
+      NODE_ENV: production
+      CLOUDFLARE_EMAIL: ${{ secrets.CLOUDFLARE_EMAIL }}
+      CLOUDFLARE_DNS_API_TOKEN: ${{ secrets.CLOUDFLARE_DNS_API_TOKEN }}
+      S3_ACCESS_KEY: ${{ secrets.S3_ACCESS_KEY }}
+      S3_SECRET_KEY: ${{ secrets.S3_SECRET_KEY }}
+      S3_REGION: ${{ vars.S3_REGION }}
+      S3_BUCKET_NAME: ${{ vars.S3_BUCKET_NAME }}
+      OPENTELEMETRY_LISTENER_URL: ${{ vars.OPENTELEMETRY_LISTENER_URL }}
+      KAMAL_REGISTRY_PASSWORD: ${{ secrets.KAMAL_REGISTRY_PASSWORD }}
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: 3.3.0
+          bundler-cache: true
+
+      - name: Install dependencies
+        run: |
+          gem install kamal
+
+      - uses: webfactory/ssh-agent@v0.9.0
+        with:
+          ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}
+
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Create builder
+        run: docker buildx create --use --name formbricks-gh-actions-builder
+        if: steps.buildx.outputs.should_create_builder == 'true'
+
+      - name: Push env variables to Kamal
+        run: |
+          kamal() { command kamal "$@" -c kamal/deploy.yml; }
+          kamal env push
+
+      - name: Run deploy command
+        run: |
+          kamal() { command kamal "$@" -c kamal/deploy.yml; }
+          set +e
+          DEPLOY_OUTPUT=$(kamal setup 2>&1)
+          DEPLOY_EXIT_CODE=$?
+          echo "$DEPLOY_OUTPUT"
+          if [[ "$DEPLOY_OUTPUT" == *"container not unhealthy (healthy)"* ]]; then
+            echo "Deployment reported healthy container. Considering as success."
+            kamal lock release
+            exit 0
+          else
+            exit $DEPLOY_EXIT_CODE
+          fi
+        shell: bash

.github/workflows/pr.yml

@@ -1,7 +1,7 @@
 name: PR Update
 
 on:
-  pull_request_target:
+  pull_request:
     branches:
       - main
   merge_group:
@@ -30,7 +30,7 @@ jobs:
               - "!(**.md|.github/CODEOWNERS)"
 
   test:
-    name: Run Tests
+    name: Run Unit Tests
     needs: [changes]
     if: ${{ needs.changes.outputs.has-files-requiring-all-checks == 'true' }}
     uses: ./.github/workflows/test.yml
@@ -58,6 +58,7 @@ jobs:
     secrets: inherit
 
   required:
+    name: PR Check Summary
     needs: [lint, test, build, e2e-test]
     if: always()
     runs-on: ubuntu-latest

.github/workflows/test.yml

@@ -3,7 +3,7 @@ on:
   workflow_call:
 jobs:
   build:
-    name: Tests
+    name: Unit Tests
     runs-on: ubuntu-latest
     timeout-minutes: 15
 

.kamal/hooks/post-deploy.sample

@@ -0,0 +1,14 @@
+#!/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

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

.kamal/hooks/pre-build.sample

@@ -0,0 +1,51 @@
+#!/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

@@ -0,0 +1,47 @@
+#!/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

@@ -0,0 +1,109 @@
+#!/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

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

apps/demo/components/Sidebar.tsx

@@ -3,25 +3,25 @@ import {
   ClockIcon,
   CogIcon,
   CreditCardIcon,
-  DocumentChartBarIcon,
+  FileBarChartIcon,
+  HelpCircleIcon,
   HomeIcon,
-  QuestionMarkCircleIcon,
   ScaleIcon,
   ShieldCheckIcon,
-  UserGroupIcon,
-} from "@heroicons/react/24/outline";
+  UsersIcon,
+} from "lucide-react";
 
 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: UserGroupIcon, current: false },
-  { name: "Reports", href: "#", icon: DocumentChartBarIcon, current: false },
+  { name: "Recipients", href: "#", icon: UsersIcon, current: false },
+  { name: "Reports", href: "#", icon: FileBarChartIcon, current: false },
 ];
 const secondaryNavigation = [
   { name: "Settings", href: "#", icon: CogIcon },
-  { name: "Help", href: "#", icon: QuestionMarkCircleIcon },
+  { name: "Help", href: "#", icon: HelpCircleIcon },
   { name: "Privacy", href: "#", icon: ShieldCheckIcon },
 ];
 

apps/demo/package.json

@@ -12,8 +12,8 @@
   },
   "dependencies": {
     "@formbricks/js": "workspace:*",
-    "@heroicons/react": "^2.1.1",
-    "next": "14.1.0",
+    "lucide-react": "^0.356.0",
+    "next": "14.1.3",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

apps/formbricks-com/app/docs/api/management/surveys/page.mdx

@@ -1,13 +1,14 @@
 import { Fence } from "@/components/shared/Fence";
-import {generateManagementApiMetadata} from "@/lib/utils"
+import { generateManagementApiMetadata } from "@/lib/utils";
 
-export const metadata = generateManagementApiMetadata("Surveys",["Fetch","Create","Update","Delete"])
+export const metadata = generateManagementApiMetadata("Surveys", ["Fetch", "Create", "Update", "Delete"]);
 
 #### Management API
 
 # Surveys API
 
 This set of API can be used to
+
 - [List All Surveys](#list-all-surveys)
 - [Get Survey](#get-survey-by-id)
 - [Create Survey](#create-survey)
@@ -22,8 +23,7 @@ This set of API can be used to
 
 <Row>
   <Col>
-
-    Retrieve all the surveys you have for the environment.
+    Retrieve all the surveys you have for the environment with pagination.
 
     ### Mandatory Headers
 
@@ -33,14 +33,26 @@ This set of API can be used to
       </Property>
     </Properties>
 
+    ### Query Parameters
+    <Properties>
+      <Property name="offset" type="number">
+        The number of surveys to skip before returning the results.
+      </Property>
+
+      <Property name="limit" type="number">
+        The number of surveys to return.
+      </Property>
+    </Properties>
+
   </Col>
   <Col sticky>
 
     <CodeGroup title="Request" tag="GET" label="/api/v1/management/surveys">
 
     ```bash {{ title: 'cURL' }}
+
     curl --location \
-    'https://app.formbricks.com/api/v1/management/surveys' \
+    'https://app.formbricks.com/api/v1/management/surveys?offset=20&limit=10' \
     --header \
     'x-api-key: <your-api-key>'
     ```
@@ -403,7 +415,6 @@ This set of API can be used to
     ```
     </CodeGroup>
 
-
   </Col>
   <Col sticky>
 
@@ -453,7 +464,7 @@ This set of API can be used to
         }
     }
     ```
-    
+
     ```json {{ title: '401 Not Authenticated' }}
     {
       "code": "not_authenticated",
@@ -497,7 +508,6 @@ This set of API can be used to
     ```
     </CodeGroup>
 
-
   </Col>
   <Col sticky>
 
@@ -568,7 +578,7 @@ This set of API can be used to
         }
     }
     ```
-    
+
     ```json {{ title: '401 Not Authenticated' }}
     {
       "code": "not_authenticated",
@@ -585,7 +595,6 @@ This set of API can be used to
 
 ---
 
-
 ## Delete Survey by ID {{ tag: 'DELETE', label: '/api/v1/management/surveys/<survey-id>' }}
 
 <Row>

apps/formbricks-com/app/docs/getting-started/framework-guides/page.mdx

@@ -52,7 +52,7 @@ All you need to do is copy a `<script>` tag to your HTML head, and that’s abou
 ```
 </CodeGroup>
 </Col>
-### Required Customizations to be Made
+### Required customizations to be made
 
 <Properties>
   <Property name="environment-id" type="string">
@@ -99,7 +99,6 @@ if (typeof window !== "undefined") {
   formbricks.init({
     environmentId: "<environment-id>",
     apiHost: "<api-host>",
-    debug: true, // remove when in production
   });
 }
 
@@ -112,7 +111,7 @@ export default App;
 
 </CodeGroup>
 </Col>
-### Required Customizations to be Made
+### Required customizations to be made
 
 <Properties>
   <Property name="environment-id" type="string">
@@ -182,7 +181,6 @@ useEffect(() => {
 formbricks.init({
 environmentId: "<environment-id>",
 apiHost: "<api-host>",
-debug: true, // remove when in production
 });
 }, []);
 
@@ -232,7 +230,6 @@ if (typeof window !== "undefined") {
   formbricks.init({
     environmentId: "<environment-id>",
     apiHost: "<api-host>",
-    debug: true, // remove when in production
   });
 }
 
@@ -256,7 +253,7 @@ export default function App({ Component, pageProps }: AppProps) {
 </Col>
 Refer to our [Example NextJS Pages Directory project](https://github.com/formbricks/examples/tree/main/nextjs-pages) for more help!
 
-### Required Customizations to be Made
+### Required customizations to be made
 
 <Properties>
   <Property name="environment-id" type="string">
@@ -269,14 +266,6 @@ Refer to our [Example NextJS Pages Directory project](https://github.com/formbri
   </Property>
 </Properties>
 
-### Optional Customizations to be Made
-
-<Properties>
-  <Property name="debug" type="boolean">
-    Whether you want to see debug messages from Formbricks on your client-side console.
-  </Property>
-</Properties>
-
 ### What are we doing here?
 
 First we need to initialize the Formbricks SDK, making sure it only runs on the client side.
@@ -345,7 +334,7 @@ router.afterEach((to, from) => {
 
 </CodeGroup>
 </Col>
-### Required Customizations to be Made
+### Required customizations to be made
 
 <Properties>
   <Property name="environment-id" type="string">
@@ -358,14 +347,6 @@ router.afterEach((to, from) => {
   </Property>
 </Properties>
 
-### Optional Customizations to be Made
-
-<Properties>
-  <Property name="debug" type="boolean">
-    Whether you want to see debug messages from Formbricks on your client-side console.
-  </Property>
-</Properties>
-
 Refer to our [Example VueJs project](https://github.com/formbricks/examples/tree/main/vuejs) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
 
 ## Validate your setup

apps/formbricks-com/app/docs/self-hosting/external-auth-providers/page.mdx

@@ -76,6 +76,27 @@ GOOGLE_CLIENT_SECRET=your-client-secret-here
    - Navigate to your Docker setup directory where your `docker-compose.yml` file is located.
    - Run the following command to bring down your current Docker containers and then bring them back up with the updated environment configuration:
 
+## Azure SSO Integration
+
+Have an Azure Active Directory (AAD) instance? Integrate it with your Formbricks instance to allow users to log in using their existing AAD credentials. This guide will walk you through the process of setting up Azure SSO for your Formbricks instance.
+
+### Requirements
+
+- An Azure Active Directory (AAD) instance.
+- A Formbricks instance running and accessible.
+
+### Steps
+
+1. Create a new Tenant in Azure Active Directory as per their [official documentation](https://learn.microsoft.com/en-us/entra/fundamentals/create-new-tenant).
+2. Add Users & Groups to your AAD instance.
+3. Now we need to fill the below environment variables in our Formbricks instance so get them from your AD configuration:
+   - `AZUREAD_CLIENT_ID`
+   - `AZUREAD_CLIENT_SECRET`
+   - `AZUREAD_TENANT_ID`
+4. Update these environment variables in your `docker-compose.yml` or pass it like your other environment variables to the Formbricks container.
+5. Restart your Formbricks instance.
+6. You're all set! Users can now signup & log in using their AAD credentials.
+
 ## OpenID Integration
 
 Integrating your own OIDC (OpenID Connect) instance with your Formbricks instance allows users to log in using their OIDC credentials, ensuring a secure and streamlined user experience. Please follow the steps below to set up OIDC for your Formbricks instance.
@@ -115,52 +136,54 @@ OIDC_SIGNING_ALGORITHM=HS256
 
 These variables can be provided at the runtime i.e. in your docker-compose file.
 
-| Variable                    | Description                                                                                  | Required                                                | Default                 |
-| --------------------------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------------------- |
-| WEBAPP_URL                  | Base URL of the site.                                                                        | required                                                | `http://localhost:3000` |
-| DATABASE_URL                | Database URL with credentials.                                                               | required                                                |                         |
-| NEXTAUTH_SECRET             | Secret for NextAuth, used for session signing and encryption.                                | required                                                | (Generated by the user) |
-| ENCRYPTION_KEY              | Secret for used by Formbricks for data encryption                                            | required                                                | (Generated by the user) |
-| NEXTAUTH_URL                | Location of the auth server. By default, this is the Formbricks docker instance itself.      | required                                                | `http://localhost:3000` |
-| S3_ACCESS_KEY               | Access key for S3.                                                                           | optional (required if S3 is enabled)                    |                         |
-| S3_SECRET_KEY               | Secret key for S3.                                                                           | optional (required if S3 is enabled)                    |                         |
-| S3_REGION                   | Region for S3.                                                                               | optional (required if S3 is enabled)                    |                         |
-| S3_BUCKET                   | Bucket name for S3.                                                                          | optional (required if S3 is enabled)                    |                         |
-| S3_ENDPOINT                 | Endpoint for S3.                                                                             | optional (required if S3 is enabled)                    |                         |
-| PRIVACY_URL                 | URL for privacy policy.                                                                      | optional                                                |                         |
-| TERMS_URL                   | URL for terms of service.                                                                    | optional                                                |                         |
-| IMPRINT_URL                 | URL for imprint.                                                                             | optional                                                |                         |
-| SIGNUP_DISABLED             | Disables the ability for new users to create an account if set to `1`.                       | optional                                                |                         |
-| EMAIL_AUTH_DISABLED         | Disables the ability for users to signup or login via email and password if set to `1`.      | optional                                                |                         |
-| PASSWORD_RESET_DISABLED     | Disables password reset functionality if set to `1`.                                         | optional                                                |                         |
-| EMAIL_VERIFICATION_DISABLED | Disables email verification if set to `1`.                                                   | optional                                                |                         |
-| RATE_LIMITING_DISABLED      | Disables rate limiting if set to `1`.                                                        | optional                                                |                         |
-| INVITE_DISABLED             | Disables the ability for invited users to create an account if set to `1`.                   | optional                                                |                         |
-| MAIL_FROM                   | Email address to send emails from.                                                           | optional (required if email services are to be enabled) |                         |
-| SMTP_HOST                   | Host URL of your SMTP server.                                                                | optional (required if email services are to be enabled) |                         |
-| SMTP_PORT                   | Host Port of your SMTP server.                                                               | optional (required if email services are to be enabled) |                         |
-| SMTP_USER                   | Username for your SMTP Server.                                                               | optional (required if email services are to be enabled) |                         |
-| SMTP_PASSWORD               | Password for your SMTP Server.                                                               | optional (required if email services are to be enabled) |                         |
-| SMTP_SECURE_ENABLED         | SMTP secure connection. For using TLS, set to `1` else to `0`.                               | optional (required if email services are to be enabled) |                         |
-| GITHUB_ID                   | Client ID for GitHub.                                                                        | optional (required if GitHub auth is enabled)           |                         |
-| GITHUB_SECRET               | Secret for GitHub.                                                                           | optional (required if GitHub auth is enabled)           |                         |
-| GOOGLE_CLIENT_ID            | Client ID for Google.                                                                        | optional (required if Google auth is enabled)           |                         |
-| GOOGLE_CLIENT_SECRET        | Secret for Google.                                                                           | optional (required if Google auth is enabled)           |                         |
-| CRON_SECRET                 | API Secret for running cron jobs.                                                            | optional                                                |                         |
-| STRIPE_SECRET_KEY           | Secret key for Stripe integration.                                                           | optional                                                |                         |
-| STRIPE_WEBHOOK_SECRET       | Webhook secret for Stripe integration.                                                       | optional                                                |                         |
-| TELEMETRY_DISABLED          | Disables telemetry if set to `1`.                                                            | optional                                                |                         |
-| INSTANCE_ID                 | Instance ID for Formbricks Cloud to be sent to Telemetry.                                    | optional                                                |                         |
-| INTERNAL_SECRET             | Internal Secret (Currently we overwrite the value with a random value).                      | optional                                                |                         |
-| DEFAULT_BRAND_COLOR         | Default brand color for your app (Can be overwritten from the UI as well).                   | optional                                                | `#64748b`               |
-| DEFAULT_TEAM_ID             | Automatically assign new users to a specific team when joining                               | optional                                                |                         |
-| DEFAULT_TEAM_ROLE           | Role of the user in the default team.                                                        | optional                                                | `admin`                 |
-| ONBOARDING_DISABLED         | Disables onboarding for new users if set to `1`                                              | optional                                                |                         |
-| OIDC_DISPLAY_NAME           | Display name for Custom OpenID Connect Provider                                              | optional                                                |                         |
-| OIDC_CLIENT_ID              | Client ID for Custom OpenID Connect Provider                                                 | optional (required if OIDC auth is enabled)             |                         |
-| OIDC_CLIENT_SECRET          | Secret for Custom OpenID Connect Provider                                                    | optional (required if OIDC auth is enabled)             |                         |
-| OIDC_ISSUER                 | Issuer URL for Custom OpenID Connect Provider (should have `.well-known` configured at this) | optional (required if OIDC auth is enabled)             |                         |
-| OIDC_SIGNING_ALGORITHM      | Signing Algorithm for Custom OpenID Connect Provider                                         | optional                                                | `RS256`                 | 
+| Variable                    | Description                                                                                  | Required                                                | Default                   |
+|-----------------------------|----------------------------------------------------------------------------------------------|---------------------------------------------------------|---------------------------|
+| WEBAPP_URL                  | Base URL of the site.                                                                        | required                                                | `http://localhost:3000`   |
+| DATABASE_URL                | Database URL with credentials.                                                               | required                                                |                           |
+| NEXTAUTH_SECRET             | Secret for NextAuth, used for session signing and encryption.                                | required                                                | (Generated by the user)   |
+| ENCRYPTION_KEY              | Secret for used by Formbricks for data encryption                                            | required                                                | (Generated by the user)   |
+| NEXTAUTH_URL                | Location of the auth server. By default, this is the Formbricks docker instance itself.      | required                                                | `http://localhost:3000`   |
+| UPLOADS_DIR                 | Local directory for storing uploads.                                                         | optional                                                | `./uploads`               |
+| S3_ACCESS_KEY               | Access key for S3.                                                                           | optional                                                | (resolved by the AWS SDK) |
+| S3_SECRET_KEY               | Secret key for S3.                                                                           | optional                                                | (resolved by the AWS SDK) |
+| S3_REGION                   | Region for S3.                                                                               | optional                                                | (resolved by the AWS SDK) |
+| S3_BUCKET                   | Bucket name for S3.                                                                          | optional (required if S3 is enabled)                    |                           |
+| S3_ENDPOINT                 | Endpoint for S3.                                                                             | optional                                                | (resolved by the AWS SDK) |
+| PRIVACY_URL                 | URL for privacy policy.                                                                      | optional                                                |                           |
+| TERMS_URL                   | URL for terms of service.                                                                    | optional                                                |                           |
+| IMPRINT_URL                 | URL for imprint.                                                                             | optional                                                |                           |
+| SIGNUP_DISABLED             | Disables the ability for new users to create an account if set to `1`.                       | optional                                                |                           |
+| EMAIL_AUTH_DISABLED         | Disables the ability for users to signup or login via email and password if set to `1`.      | optional                                                |                           |
+| PASSWORD_RESET_DISABLED     | Disables password reset functionality if set to `1`.                                         | optional                                                |                           |
+| EMAIL_VERIFICATION_DISABLED | Disables email verification if set to `1`.                                                   | optional                                                |                           |
+| RATE_LIMITING_DISABLED      | Disables rate limiting if set to `1`.                                                        | optional                                                |                           |
+| INVITE_DISABLED             | Disables the ability for invited users to create an account if set to `1`.                   | optional                                                |                           |
+| MAIL_FROM                   | Email address to send emails from.                                                           | optional (required if email services are to be enabled) |                           |
+| SMTP_HOST                   | Host URL of your SMTP server.                                                                | optional (required if email services are to be enabled) |                           |
+| SMTP_PORT                   | Host Port of your SMTP server.                                                               | optional (required if email services are to be enabled) |                           |
+| SMTP_USER                   | Username for your SMTP Server.                                                               | optional (required if email services are to be enabled) |                           |
+| SMTP_PASSWORD               | Password for your SMTP Server.                                                               | optional (required if email services are to be enabled) |                           |
+| SMTP_SECURE_ENABLED         | SMTP secure connection. For using TLS, set to `1` else to `0`.                               | optional (required if email services are to be enabled) |                           |
+| GITHUB_ID                   | Client ID for GitHub.                                                                        | optional (required if GitHub auth is enabled)           |                           |
+| GITHUB_SECRET               | Secret for GitHub.                                                                           | optional (required if GitHub auth is enabled)           |                           |
+| GOOGLE_CLIENT_ID            | Client ID for Google.                                                                        | optional (required if Google auth is enabled)           |                           |
+| GOOGLE_CLIENT_SECRET        | Secret for Google.                                                                           | optional (required if Google auth is enabled)           |                           |
+| CRON_SECRET                 | API Secret for running cron jobs.                                                            | optional                                                |                           |
+| STRIPE_SECRET_KEY           | Secret key for Stripe integration.                                                           | optional                                                |                           |
+| STRIPE_WEBHOOK_SECRET       | Webhook secret for Stripe integration.                                                       | optional                                                |                           |
+| TELEMETRY_DISABLED          | Disables telemetry if set to `1`.                                                            | optional                                                |                           |
+| INSTANCE_ID                 | Instance ID for Formbricks Cloud to be sent to Telemetry.                                    | optional                                                |                           |
+| INTERNAL_SECRET             | Internal Secret (Currently we overwrite the value with a random value).                      | optional                                                |                           |
+| DEFAULT_BRAND_COLOR         | Default brand color for your app (Can be overwritten from the UI as well).                   | optional                                                | `#64748b`                 |
+| DEFAULT_TEAM_ID             | Automatically assign new users to a specific team when joining                               | optional                                                |                           |
+| DEFAULT_TEAM_ROLE           | Role of the user in the default team.                                                        | optional                                                | `admin`                   |
+| ONBOARDING_DISABLED         | Disables onboarding for new users if set to `1`                                              | optional                                                |                           |
+| OIDC_DISPLAY_NAME           | Display name for Custom OpenID Connect Provider                                              | optional                                                |                           |
+| OIDC_CLIENT_ID              | Client ID for Custom OpenID Connect Provider                                                 | optional (required if OIDC auth is enabled)             |                           |
+| OIDC_CLIENT_SECRET          | Secret for Custom OpenID Connect Provider                                                    | optional (required if OIDC auth is enabled)             |                           |
+| OIDC_ISSUER                 | Issuer URL for Custom OpenID Connect Provider (should have `.well-known` configured at this) | optional (required if OIDC auth is enabled)             |                           |
+| OIDC_SIGNING_ALGORITHM      | Signing Algorithm for Custom OpenID Connect Provider                                         | optional                                                | `RS256`                   |
+| OPENTELEMETRY_LISTENER_URL  | URL for OpenTelemetry listener inside Formbricks.                                            | optional |                                              |                           |
 
 ## Build-time Variables
 

apps/formbricks-com/components/dummyUI/AddEventDummy.tsx

@@ -1,4 +1,4 @@
-import { PlusIcon, TrashIcon } from "@heroicons/react/24/solid";
+import { PlusIcon, TrashIcon } from "lucide-react";
 import { useState } from "react";
 
 import { Button } from "@formbricks/ui/Button";

apps/formbricks-com/components/dummyUI/AddNoCodeEventModalDummy.tsx

@@ -1,4 +1,4 @@
-import { CursorArrowRaysIcon } from "@heroicons/react/24/solid";
+import { MousePointerClickIcon } from "lucide-react";
 
 import { Button } from "@formbricks/ui/Button";
 import { Input } from "@formbricks/ui/Input";
@@ -20,7 +20,7 @@ export const AddNoCodeEventModalDummy: React.FC<EventDetailModalProps> = ({ open
           <div className="p-4 sm:p-6">
             <div className="flex items-center space-x-2">
               <div className="h-6 w-6 text-slate-500">
-                <CursorArrowRaysIcon />
+                <MousePointerClickIcon className="h-5 w-5" />
               </div>
               <div>
                 <div className="text-lg font-medium text-slate-700 dark:text-slate-300">Add Action</div>

apps/formbricks-com/components/dummyUI/HtmlBody.tsx

@@ -1,10 +1,8 @@
-import * as DOMPurify from "dompurify";
-
 export default function HtmlBody({ htmlString, questionId }: { htmlString: string; questionId: string }) {
   return (
     <label
       htmlFor={questionId}
       className="fb-block fb-font-normal fb-leading-6 text-sm text-slate-500 dark:text-slate-300"
-      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(htmlString) }}></label>
+      dangerouslySetInnerHTML={{ __html: htmlString }}></label>
   );
 }

apps/formbricks-com/components/home/Hero.tsx

@@ -8,7 +8,7 @@ import NILogoLight from "@/images/clients/niLogoWhite.svg";
 import OptimoleLogo from "@/images/clients/optimole-logo.svg";
 import ThemeisleLogo from "@/images/clients/themeisle-logo.webp";
 import AnimationFallback from "@/public/animations/opensource-xm-platform-formbricks-fallback.png";
-import { ShieldCheckIcon, StarIcon } from "@heroicons/react/24/outline";
+import { ShieldCheckIcon, StarIcon } from "lucide-react";
 import { usePlausible } from "next-plausible";
 import Image from "next/image";
 import { useRouter } from "next/router";

apps/formbricks-com/components/home/ScrollToTop.tsx

@@ -1,5 +1,5 @@
-import { ArrowUpIcon } from "@heroicons/react/24/solid";
 import throttle from "lodash/throttle";
+import { ArrowUpIcon } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 
 import { Button } from "@formbricks/ui/Button";

apps/formbricks-com/components/home/Steps.tsx

@@ -1,7 +1,7 @@
 import DemoPreview from "@/components/dummyUI/DemoPreview";
 import DashboardMockupDark from "@/images/dashboard-mockup-dark.png";
 import DashboardMockup from "@/images/dashboard-mockup.png";
-import { CursorArrowRaysIcon } from "@heroicons/react/24/solid";
+import { MousePointerClickIcon } from "lucide-react";
 import Image from "next/image";
 import { useState } from "react";
 
@@ -48,7 +48,7 @@ export const Steps: React.FC = () => {
             <div className="order-last w-full rounded-lg bg-slate-100 p-4 sm:py-8 md:order-first dark:bg-slate-800">
               <div className="flex h-40 items-center justify-center">
                 <Button variant="primary">
-                  <CursorArrowRaysIcon className="mr-2 h-5 w-5 text-white" />
+                  <MousePointerClickIcon className="mr-2 h-5 w-5 text-white" />
                   Add Action
                 </Button>
               </div>

apps/formbricks-com/components/shared/APILayout.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/solid";
 import clsx from "clsx";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { useState } from "react";
 
 interface APICallProps {

apps/formbricks-com/components/shared/Header.tsx

@@ -1,8 +1,8 @@
 import GitHubMarkWhite from "@/images/github-mark-white.svg";
 import GitHubMarkDark from "@/images/github-mark.svg";
 import { Popover, Transition } from "@headlessui/react";
-import { Bars3Icon, ChevronDownIcon, ChevronRightIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import clsx from "clsx";
+import { ChevronDownIcon, ChevronRightIcon, MenuIcon, XIcon } from "lucide-react";
 import { usePlausible } from "next-plausible";
 import Image from "next/image";
 import Link from "next/link";
@@ -136,7 +136,7 @@ export default function Header() {
         <div className="-my-2 -mr-2 md:hidden">
           <Popover.Button className="inline-flex items-center justify-center rounded-md bg-slate-100 p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
             <span className="sr-only">Open menu</span>
-            <Bars3Icon className="h-6 w-6" aria-hidden="true" />
+            <MenuIcon className="h-6 w-6" aria-hidden="true" />
           </Popover.Button>
         </div>
         <Popover.Group as="nav" className="hidden space-x-6 md:flex lg:space-x-10">
@@ -356,7 +356,7 @@ export default function Header() {
                 <div className="-mr-2">
                   <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
                     <span className="sr-only">Close menu</span>
-                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                    <XIcon className="h-6 w-6" aria-hidden="true" />
                   </Popover.Button>
                 </div>
               </div>

apps/formbricks-com/components/shared/MdxTryItCTA.tsx

@@ -1,4 +1,4 @@
-import { DocumentDuplicateIcon } from "@heroicons/react/24/outline";
+import { CopyIcon } from "lucide-react";
 import { useRouter } from "next/router";
 
 import { Button } from "@formbricks/ui/Button";
@@ -28,7 +28,7 @@ export default function HeadingCentered() {
         <div className="flex h-20 w-full items-center justify-between rounded-lg bg-slate-300 px-8 text-slate-700 dark:bg-slate-800 dark:text-slate-200 ">
           <p>npm install @formbricks/react</p>
           <button onClick={() => navigator.clipboard.writeText("npm install @formbricks/react")}>
-            <DocumentDuplicateIcon className="h-8 w-8" />
+            <CopyIcon className="h-8 w-8" />
           </button>
         </div>
       </div>

apps/formbricks-com/components/shared/PricingTable.tsx

@@ -1,4 +1,4 @@
-import { CheckIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { CheckIcon, XIcon } from "lucide-react";
 
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@formbricks/ui/Tooltip";
 
@@ -54,13 +54,9 @@ export const PricingTable = ({ leadRow, pricing, endRow }) => {
                   </Tooltip>
                 </TooltipProvider>
               ) : feature.free ? (
-                <div className="h-6 w-6 rounded-full border border-green-300 bg-green-100 p-0.5 dark:border-green-600 dark:bg-green-900">
-                  <CheckIcon className=" text-green-500 dark:text-green-300" />
-                </div>
+                <CheckIcon className=" rounded-full border border-green-300 bg-green-100 p-0.5 text-green-500 dark:border-green-600 dark:bg-green-900 dark:text-green-300" />
               ) : (
-                <div className="h-6 w-6 rounded-full border border-red-300 bg-red-100 p-0.5 dark:border-red-500 dark:bg-red-300">
-                  <XMarkIcon className="text-red-500 dark:text-red-600" />
-                </div>
+                <XIcon className="rounded-full border border-red-300 bg-red-100 p-0.5 text-red-500 dark:border-red-500 dark:bg-red-300 dark:text-red-600" />
               )}
             </div>
             <div className="flex w-1/3 items-center justify-center text-center text-sm text-slate-800 dark:text-slate-100">
@@ -78,13 +74,9 @@ export const PricingTable = ({ leadRow, pricing, endRow }) => {
                   </Tooltip>
                 </TooltipProvider>
               ) : feature.paid ? (
-                <div className="h-6 w-6 rounded-full border border-green-300 bg-green-100 p-0.5 dark:border-green-600 dark:bg-green-900">
-                  <CheckIcon className="text-green-500 dark:text-green-300" />
-                </div>
+                <CheckIcon className=" rounded-full border border-green-300 bg-green-100 p-0.5 text-green-500 dark:border-green-600 dark:bg-green-900 dark:text-green-300" />
               ) : (
-                <div className="h-6 w-6 rounded-full border border-red-300 bg-red-100 p-0.5 dark:border-red-600 dark:bg-red-900">
-                  <XMarkIcon className="text-red-500 dark:text-red-600" />
-                </div>
+                <XIcon className="rounded-full border border-red-300 bg-red-100 p-0.5 text-red-500 dark:border-red-500 dark:bg-red-300 dark:text-red-600" />
               )}
             </div>
           </div>

apps/formbricks-com/components/shared/SlideInBanner.tsx

@@ -1,5 +1,5 @@
 import LFGLuigi from "@/images/blog/lfg-luigi-200px.webp";
-import { XMarkIcon } from "@heroicons/react/24/solid";
+import { XIcon } from "lucide-react";
 import Image from "next/image";
 import React, { useEffect, useState } from "react";
 
@@ -70,7 +70,7 @@ const SlideInBanner: React.FC<Props> = ({ delay = 5000, scrollPercentage = 10, U
             setTimeout(() => setIsDismissed(true), 500);
           }}
           className="rounded-full p-2 hover:bg-slate-600 hover:bg-opacity-30">
-          <XMarkIcon className="h-6 w-6" />
+          <XIcon className="h-6 w-6" />
         </button>
       </div>
     </div>

apps/formbricks-com/components/shared/TryItCTA.tsx

@@ -1,4 +1,4 @@
-import { DocumentDuplicateIcon } from "@heroicons/react/24/outline";
+import { CopyIcon } from "lucide-react";
 import { useRouter } from "next/router";
 
 import { Button } from "@formbricks/ui/Button";
@@ -30,7 +30,7 @@ export default function HeadingCentered() {
         <div className="flex h-20 w-full items-center justify-between rounded-lg bg-slate-800 px-8 text-slate-100 ">
           <p>npm install @formbricks/react</p>
           <button onClick={() => navigator.clipboard.writeText("npm install @formbricks/react")}>
-            <DocumentDuplicateIcon className="h-8 w-8" />
+            <CopyIcon className="h-8 w-8" />
           </button>
         </div>
       </div>

apps/formbricks-com/components/shared/WhyFormbricks.tsx

@@ -1,42 +1,35 @@
-import {
-  CommandLineIcon,
-  CubeTransparentIcon,
-  SquaresPlusIcon,
-  SwatchIcon,
-  UserGroupIcon,
-  UsersIcon,
-} from "@heroicons/react/24/outline";
+import { BlocksIcon, BoxIcon, LockIcon, SwatchBookIcon, TerminalIcon, UsersIcon } from "lucide-react";
 
 const features = [
   {
     name: "Futureproof",
     description: "Form needs change. With Formbricks you’ll avoid island solutions right from the start.",
-    icon: CubeTransparentIcon,
+    icon: BoxIcon,
   },
   {
     name: "Privacy by design",
     description: "Self-host the entire product and fly through privacy compliance reviews.",
-    icon: UsersIcon,
+    icon: LockIcon,
   },
   {
     name: "Community driven",
     description: "We're building for you. If you need something specific, we’re happy to build it!",
-    icon: UserGroupIcon,
+    icon: UsersIcon,
   },
   {
     name: "Great DX",
     description: "We love a solid developer experience. We felt your pain and do our best to avoid it.",
-    icon: CommandLineIcon,
+    icon: TerminalIcon,
   },
   {
     name: "Customizable",
     description: "We have to build opinionated. If it doesn't suit your need, just change it up.",
-    icon: SwatchIcon,
+    icon: SwatchBookIcon,
   },
   {
     name: "Extendable",
     description: "Even though we try, we cannot build every single integration. With Formbricks, you can.",
-    icon: SquaresPlusIcon,
+    icon: BlocksIcon,
   },
 ];
 

apps/formbricks-com/mdx/search.mjs

@@ -1,50 +1,51 @@
-import { slugifyWithCounter } from "@sindresorhus/slugify";
-import glob from "fast-glob";
-import * as fs from "fs";
-import { toString } from "mdast-util-to-string";
-import * as path from "path";
-import { remark } from "remark";
-import remarkMdx from "remark-mdx";
-import { createLoader } from "simple-functional-loader";
-import { filter } from "unist-util-filter";
-import { SKIP, visit } from "unist-util-visit";
-import * as url from "url";
+import { slugifyWithCounter } from '@sindresorhus/slugify'
+import glob from 'fast-glob'
+import * as fs from 'fs'
+import { toString } from 'mdast-util-to-string'
+import * as path from 'path'
+import { remark } from 'remark'
+import remarkMdx from 'remark-mdx'
+import { createLoader } from 'simple-functional-loader'
+import { filter } from 'unist-util-filter'
+import { SKIP, visit } from 'unist-util-visit'
+import * as url from 'url'
 
-const __filename = url.fileURLToPath(import.meta.url);
-const processor = remark().use(remarkMdx).use(extractSections);
-const slugify = slugifyWithCounter();
+const __filename = url.fileURLToPath(import.meta.url)
+const processor = remark().use(remarkMdx).use(extractSections)
+const slugify = slugifyWithCounter()
 
 function isObjectExpression(node) {
   return (
-    node.type === "mdxTextExpression" && node.data?.estree?.body?.[0]?.expression?.type === "ObjectExpression"
-  );
+    node.type === 'mdxTextExpression' &&
+    node.data?.estree?.body?.[0]?.expression?.type === 'ObjectExpression'
+  )
 }
 
 function excludeObjectExpressions(tree) {
-  return filter(tree, (node) => !isObjectExpression(node));
+  return filter(tree, (node) => !isObjectExpression(node))
 }
 
 function extractSections() {
   return (tree, { sections }) => {
-    slugify.reset();
+    slugify.reset()
 
     visit(tree, (node) => {
-      if (node.type === "heading" || node.type === "paragraph") {
-        let content = toString(excludeObjectExpressions(node));
-        if (node.type === "heading" && node.depth <= 2) {
-          let hash = node.depth === 1 ? null : slugify(content);
-          sections.push([content, hash, []]);
+      if (node.type === 'heading' || node.type === 'paragraph') {
+        let content = toString(excludeObjectExpressions(node))
+        if (node.type === 'heading' && node.depth <= 2) {
+          let hash = node.depth === 1 ? null : slugify(content)
+          sections.push([content, hash, []])
         } else {
-          sections.at(-1)?.[2].push(content);
+          sections.at(-1)?.[2].push(content)
         }
-        return SKIP;
+        return SKIP
       }
-    });
-  };
+    })
+  }
 }
 
-export default function (nextConfig = {}) {
-  let cache = new Map();
+export default function Search(nextConfig = {}) {
+  let cache = new Map()
 
   return Object.assign({}, nextConfig, {
     webpack(config, options) {
@@ -52,26 +53,26 @@ export default function (nextConfig = {}) {
         test: __filename,
         use: [
           createLoader(function () {
-            let appDir = path.resolve("./app");
-            this.addContextDependency(appDir);
+            let appDir = path.resolve('./src/app')
+            this.addContextDependency(appDir)
 
-            let files = glob.sync("**/*.mdx", { cwd: appDir });
+            let files = glob.sync('**/*.mdx', { cwd: appDir })
             let data = files.map((file) => {
-              let url = "/" + file.replace(/(^|\/)page\.mdx$/, "");
-              let mdx = fs.readFileSync(path.join(appDir, file), "utf8");
+              let url = '/' + file.replace(/(^|\/)page\.mdx$/, '')
+              let mdx = fs.readFileSync(path.join(appDir, file), 'utf8')
 
-              let sections = [];
+              let sections = []
 
               if (cache.get(file)?.[0] === mdx) {
-                sections = cache.get(file)[1];
+                sections = cache.get(file)[1]
               } else {
-                let vfile = { value: mdx, sections };
-                processor.runSync(processor.parse(vfile), vfile);
-                cache.set(file, [mdx, sections]);
+                let vfile = { value: mdx, sections }
+                processor.runSync(processor.parse(vfile), vfile)
+                cache.set(file, [mdx, sections])
               }
 
-              return { url, sections };
-            });
+              return { url, sections }
+            })
 
             // When this file is imported within the application
             // the following module is loaded:
@@ -119,16 +120,16 @@ export default function (nextConfig = {}) {
                   pageTitle: item.doc.pageTitle,
                 }))
               }
-            `;
+            `
           }),
         ],
-      });
+      })
 
-      if (typeof nextConfig.webpack === "function") {
-        return nextConfig.webpack(config, options);
+      if (typeof nextConfig.webpack === 'function') {
+        return nextConfig.webpack(config, options)
       }
 
-      return config;
+      return config
     },
-  });
+  })
 }

apps/formbricks-com/package.json

@@ -12,62 +12,60 @@
   },
   "browserslist": "defaults, not ie <= 11",
   "dependencies": {
-    "@algolia/autocomplete-core": "^1.13.0",
-    "@calcom/embed-react": "^1.3.0",
-    "@docsearch/react": "^3.5.2",
+    "@algolia/autocomplete-core": "^1.17.0",
+    "@calcom/embed-react": "^1.3.2",
+    "@docsearch/react": "^3.6.0",
     "@formbricks/lib": "workspace:*",
     "@formbricks/types": "workspace:*",
     "@formbricks/ui": "workspace:*",
-    "@headlessui/react": "^1.7.17",
+    "@headlessui/react": "^1.7.18",
     "@headlessui/tailwindcss": "^0.2.0",
-    "@heroicons/react": "^2.1.1",
+    "lucide-react": "^0.356.0",
     "@mapbox/rehype-prism": "^0.9.0",
-    "@mdx-js/loader": "^3.0.0",
-    "@mdx-js/react": "^3.0.0",
-    "@next/mdx": "14.0.4",
+    "@mdx-js/loader": "^3.0.1",
+    "@mdx-js/react": "^3.0.1",
+    "@next/mdx": "14.1.3",
     "@paralleldrive/cuid2": "^2.2.2",
-    "@radix-ui/react-slider": "^1.1.2",
-    "@radix-ui/react-tooltip": "^1.0.6",
     "@sindresorhus/slugify": "^2.2.1",
     "@tailwindcss/typography": "^0.5.10",
-    "@types/dompurify": "^3.0.5",
-    "@types/react-highlight-words": "^0.16.5",
-    "acorn": "^8.10.0",
-    "autoprefixer": "^10.4.15",
-    "clsx": "^2.0.0",
-    "fast-glob": "^3.3.1",
-    "flexsearch": "^0.7.31",
-    "framer-motion": "10.17.8",
+    "acorn": "^8.11.3",
+    "autoprefixer": "^10.4.18",
+    "clsx": "^2.1.0",
+    "fast-glob": "^3.3.2",
+    "flexsearch": "^0.7.43",
+    "framer-motion": "11.0.13",
     "lottie-web": "^5.12.2",
     "mdast-util-to-string": "^4.0.0",
     "mdx-annotations": "^0.1.4",
-    "next": "13.4.19",
+    "next": "14.1.3",
     "next-plausible": "^3.12.0",
-    "next-seo": "^6.4.0",
+    "next-seo": "^6.5.0",
     "next-sitemap": "^4.2.3",
-    "next-themes": "^0.2.1",
+    "next-themes": "^0.3.0",
     "node-fetch": "^3.3.2",
     "prism-react-renderer": "^2.3.1",
     "prismjs": "^1.29.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-highlight-words": "^0.20.0",
-    "react-icons": "^4.12.0",
+    "react-icons": "^5.0.1",
     "react-markdown": "^9.0.1",
     "react-responsive-embed": "^2.1.0",
     "remark": "^15.0.1",
     "remark-gfm": "^4.0.0",
-    "remark-mdx": "^3.0.0",
-    "sharp": "^0.33.1",
+    "remark-mdx": "^3.0.1",
+    "sharp": "^0.33.2",
     "shiki": "^0.14.7",
     "simple-functional-loader": "^1.2.1",
-    "tailwindcss": "^3.4.0",
+    "tailwindcss": "^3.4.1",
     "unist-util-filter": "^5.0.1",
     "unist-util-visit": "^5.0.0",
-    "zustand": "^4.4.7"
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@formbricks/tsconfig": "workspace:*",
+    "@types/dompurify": "^3.0.5",
+    "@types/react-highlight-words": "^0.16.7",
     "eslint-config-formbricks": "workspace:*"
   }
 }

apps/formbricks-com/pages/api/oss-friends/index.ts

@@ -18,7 +18,7 @@ export default async function handle(req: NextApiRequest, res: NextApiResponse)
         },
         {
           name: "Argos",
-          description: "Argos provides the developer tools to debug tests and detect visual regressions..",
+          description: "Argos provides the developer tools to debug tests and detect visual regressions.",
           href: "https://argos-ci.com",
         },
         {
@@ -121,6 +121,11 @@ export default async function handle(req: NextApiRequest, res: NextApiResponse)
             "Open source, end-to-end encrypted platform that lets you securely manage secrets and configs across your team, devices, and infrastructure.",
           href: "https://infisical.com",
         },
+        {
+          name: "Keep",
+          description: "Open source alert management and AIOps platform.",
+          href: "https://keephq.dev",
+        },
         {
           name: "Langfuse",
           description: "Open source LLM engineering platform. Debug, analyze and iterate together.",
@@ -169,7 +174,7 @@ export default async function handle(req: NextApiRequest, res: NextApiResponse)
           name: "Requestly",
           description:
             "Makes frontend development cycle 10x faster with API Client, Mock Server, Intercept & Modify HTTP Requests and Session Replays.",
-          href: "https://requestly.io",
+          href: "https://requestly.com",
         },
         {
           name: "Revert",

apps/formbricks-com/pages/community/HeaderTribe.tsx

@@ -1,5 +1,5 @@
 import footerLogoDark from "@/images/logo/footerlogo-dark.svg";
-import { Bars3Icon } from "@heroicons/react/24/solid";
+import { MenuIcon } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
@@ -50,7 +50,7 @@ export default function HeaderLight() {
         <Popover open={mobileNavMenuOpen} onOpenChange={setMobileNavMenuOpen}>
           <PopoverTrigger onClick={() => setMobileNavMenuOpen(!mobileNavMenuOpen)}>
             <span>
-              <Bars3Icon className="h-8 w-8 rounded-md bg-slate-700 p-1 text-slate-200" />
+              <MenuIcon className="h-8 w-8 rounded-md bg-slate-700 p-1 text-slate-200" />
             </span>
           </PopoverTrigger>
           <PopoverContent className="border-slate-600 bg-slate-700 shadow">

apps/formbricks-com/pages/community/Roadmap.tsx

@@ -1,4 +1,4 @@
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import { ChevronDownIcon } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { FaGithub } from "react-icons/fa6";

apps/formbricks-com/tsconfig.json

@@ -1,16 +1,17 @@
 {
   "extends": "@formbricks/tsconfig/nextjs.json",
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "../../packages/types/*.d.ts"],
+  "exclude": ["../../.env"],
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
       "@/*": ["./*"]
     },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
     "strictNullChecks": true
-  },
-  "plugins": [
-    {
-      "name": "next"
-    }
-  ]
+  }
 }

apps/storybook/package.json

@@ -17,19 +17,19 @@
   },
   "devDependencies": {
     "@formbricks/tsconfig": "workspace:*",
-    "@storybook/addon-essentials": "^7.6.7",
-    "@storybook/addon-interactions": "^7.6.7",
-    "@storybook/addon-links": "^7.6.7",
-    "@storybook/addon-onboarding": "^1.0.10",
-    "@storybook/blocks": "^7.6.7",
-    "@storybook/react": "^7.6.7",
-    "@storybook/react-vite": "^7.6.7",
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/addon-interactions": "^8.0.0",
+    "@storybook/addon-links": "^8.0.0",
+    "@storybook/addon-onboarding": "^8.0.0",
+    "@storybook/blocks": "^8.0.0",
+    "@storybook/react": "^8.0.0",
+    "@storybook/react-vite": "^8.0.0",
     "@storybook/testing-library": "^0.2.2",
-    "@typescript-eslint/eslint-plugin": "^6.18.1",
-    "@typescript-eslint/parser": "^6.18.1",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "esbuild": "^0.19.11",
-    "tsup": "^8.0.1",
-    "vite": "^5.0.12"
+    "esbuild": "^0.20.1",
+    "tsup": "^8.0.2",
+    "vite": "^5.1.6"
   }
 }

apps/web/.gitignore

@@ -42,4 +42,5 @@ next-env.d.ts
 token.json
 
 # Local Uploads
-uploads/
+uploads/
+certificates

apps/web/Dockerfile

@@ -23,21 +23,11 @@ RUN corepack enable && corepack prepare pnpm@latest --activate
 # Install necessary build tools and compilers
 RUN apk update && apk add --no-cache g++ cmake make gcc python3 openssl-dev jq
 
-# Install Supercronic (cron for containers without super user privileges)
-RUN apk add --no-cache curl \
-    && curl -fsSLo /tmp/supercronic \
-       "https://github.com/aptible/supercronic/releases/download/v0.2.27/supercronic-linux-amd64" \
-    && chmod +x /tmp/supercronic
 
-# Set environment variables
-ARG DATABASE_URL
-ENV DATABASE_URL=$DATABASE_URL
-
-ARG NEXTAUTH_SECRET
-ENV NEXTAUTH_SECRET=$NEXTAUTH_SECRET
-
-ARG ENCRYPTION_KEY
-ENV ENCRYPTION_KEY=$ENCRYPTION_KEY
+# Set hardcoded environment variables
+ENV DATABASE_URL="postgresql://placeholder:for@build:5432/gets_overwritten_at_runtime?schema=public"
+ENV NEXTAUTH_SECRET="placeholder_for_next_auth_of_64_chars_get_overwritten_at_runtime"
+ENV ENCRYPTION_KEY="placeholder_for_build_key_of_64_chars_get_overwritten_at_runtime"
 
 ARG NEXT_PUBLIC_SENTRY_DSN
 
@@ -71,12 +61,12 @@ FROM base AS runner
 RUN corepack enable && corepack prepare pnpm@latest --activate
 
 RUN apk add --no-cache curl \
+    && apk add --no-cache supercronic \
     # && addgroup --system --gid 1001 nodejs \
     && adduser --system --uid 1001 nextjs
 
 WORKDIR /home/nextjs
 
-COPY --from=installer /tmp/supercronic /usr/local/bin/supercronic
 COPY --from=installer /app/apps/web/next.config.mjs .
 COPY --from=installer /app/apps/web/package.json .
 # Leverage output traces to reduce image size
@@ -84,10 +74,14 @@ COPY --from=installer --chown=nextjs:nextjs /app/apps/web/.next/standalone ./
 COPY --from=installer --chown=nextjs:nextjs /app/apps/web/.next/static ./apps/web/.next/static
 COPY --from=installer --chown=nextjs:nextjs /app/apps/web/public ./apps/web/public
 COPY --from=installer --chown=nextjs:nextjs /app/packages/database/schema.prisma ./packages/database/schema.prisma
+COPY --from=installer --chown=nextjs:nextjs /app/packages/database/package.json ./packages/database/package.json
 COPY --from=installer --chown=nextjs:nextjs /app/packages/database/migrations ./packages/database/migrations
 COPY --from=installer --chown=nextjs:nextjs /prisma_version.txt .
 COPY /docker/cronjobs /app/docker/cronjobs
 
+# Install Prisma globally
+RUN PRISMA_VERSION=$(cat prisma_version.txt) && npm install -g prisma@$PRISMA_VERSION
+
 EXPOSE 3000
 ENV HOSTNAME "0.0.0.0"
 USER nextjs
@@ -96,12 +90,6 @@ USER nextjs
 RUN mkdir -p /home/nextjs/apps/web/uploads/
 VOLUME /home/nextjs/apps/web/uploads/
 
-CMD PRISMA_VERSION=$(cat prisma_version.txt) && \
-    supercronic -quiet /app/docker/cronjobs & \
-    if [ "$NEXTAUTH_SECRET" != "RANDOM_STRING" ]; then \
-        pnpm dlx prisma@$PRISMA_VERSION migrate deploy && \
-        exec node apps/web/server.js; \
-    else \
-        echo "ERROR: Please set a value for NEXTAUTH_SECRET in your docker compose variables!" >&2; \
-        exit 1; \
-    fi
+CMD supercronic -quiet /app/docker/cronjobs & \
+    (cd packages/database && pnpm db:migrate:deploy) && \
+    exec node apps/web/server.js

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { CodeBracketIcon, CursorArrowRaysIcon, SparklesIcon } from "@heroicons/react/24/solid";
+import { Code2Icon, MousePointerClickIcon, SparklesIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 
 import { capitalizeFirstLetter } from "@formbricks/lib/strings";
@@ -125,11 +125,11 @@ export default function EventActivityTab({ actionClass, environmentId }: Activit
           <div className="mt-1 flex items-center">
             <div className="mr-1.5  h-4 w-4 text-slate-600">
               {actionClass.type === "code" ? (
-                <CodeBracketIcon />
+                <Code2Icon className="h-5 w-5" />
               ) : actionClass.type === "noCode" ? (
-                <CursorArrowRaysIcon />
+                <MousePointerClickIcon className="h-5 w-5" />
               ) : actionClass.type === "automatic" ? (
-                <SparklesIcon />
+                <SparklesIcon className="h-5 w-5" />
               ) : null}
             </div>
             <p className="text-sm text-slate-700 ">{capitalizeFirstLetter(actionClass.type)}</p>

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { CursorArrowRaysIcon } from "@heroicons/react/24/solid";
+import { MousePointerClickIcon } from "lucide-react";
 import { useState } from "react";
 
 import { useMembershipRole } from "@formbricks/lib/membership/hooks/useMembershipRole";
@@ -53,7 +53,7 @@ export default function ActionClassesTable({
               onClick={() => {
                 setAddActionModalOpen(true);
               }}>
-              <CursorArrowRaysIcon className="mr-2 h-5 w-5 text-white" />
+              <MousePointerClickIcon className="mr-2 h-5 w-5 text-white" />
               Add Action
             </Button>
           </div>

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

@@ -1,4 +1,4 @@
-import { CodeBracketIcon, CursorArrowRaysIcon, SparklesIcon } from "@heroicons/react/24/solid";
+import { Code2Icon, MousePointerClickIcon, SparklesIcon } from "lucide-react";
 
 import { TActionClass } from "@formbricks/types/actionClasses";
 import { TMembershipRole } from "@formbricks/types/memberships";
@@ -48,11 +48,11 @@ export default function ActionDetailModal({
         tabs={tabs}
         icon={
           actionClass.type === "code" ? (
-            <CodeBracketIcon />
+            <Code2Icon className="h-5 w-5" />
           ) : actionClass.type === "noCode" ? (
-            <CursorArrowRaysIcon />
+            <MousePointerClickIcon className="h-5 w-5" />
           ) : actionClass.type === "automatic" ? (
-            <SparklesIcon />
+            <SparklesIcon className="h-5 w-5" />
           ) : null
         }
         label={actionClass.name}

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

@@ -1,4 +1,4 @@
-import { CodeBracketIcon, CursorArrowRaysIcon, SparklesIcon } from "@heroicons/react/24/solid";
+import { Code2Icon, MousePointerClickIcon, SparklesIcon } from "lucide-react";
 
 import { timeSinceConditionally } from "@formbricks/lib/time";
 import { TActionClass } from "@formbricks/types/actionClasses";
@@ -10,11 +10,11 @@ export default function ActionClassDataRow({ actionClass }: { actionClass: TActi
         <div className="flex items-center">
           <div className="h-5 w-5 flex-shrink-0 text-slate-500">
             {actionClass.type === "code" ? (
-              <CodeBracketIcon />
+              <Code2Icon className="h-5 w-5" />
             ) : actionClass.type === "noCode" ? (
-              <CursorArrowRaysIcon />
+              <MousePointerClickIcon className="h-5 w-5" />
             ) : actionClass.type === "automatic" ? (
-              <SparklesIcon />
+              <SparklesIcon className="h-5 w-5" />
             ) : null}
           </div>
           <div className="ml-4 text-left">

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

@@ -4,7 +4,7 @@ import {
   deleteActionClassAction,
   updateActionClassAction,
 } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/actions";
-import { TrashIcon } from "@heroicons/react/24/outline";
+import { TrashIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { createActionClassAction } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/actions";
-import { CursorArrowRaysIcon } from "@heroicons/react/24/solid";
+import { MousePointerClickIcon } from "lucide-react";
 import { Terminal } from "lucide-react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -155,7 +155,7 @@ export default function AddNoCodeActionModal({
           <div className="flex w-full items-center justify-between p-6">
             <div className="flex items-center space-x-2">
               <div className="mr-1.5 h-6 w-6 text-slate-500">
-                <CursorArrowRaysIcon />
+                <MousePointerClickIcon className="h-5 w-5" />
               </div>
               <div>
                 <div className="text-xl font-medium text-slate-700">Track New User Action</div>
@@ -224,7 +224,7 @@ export default function AddNoCodeActionModal({
                   Cancel
                 </Button>
                 <Button variant="darkCTA" type="submit" loading={isCreatingAction}>
-                  Track Action
+                  Create Action
                 </Button>
               </div>
             </div>
@@ -275,7 +275,7 @@ export default function AddNoCodeActionModal({
                   Cancel
                 </Button>
                 <Button variant="darkCTA" type="submit" loading={isCreatingAction}>
-                  Track Action
+                  Create Action
                 </Button>
               </div>
             </div>

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

@@ -1,4 +1,4 @@
-import { CursorArrowRaysIcon } from "@heroicons/react/24/solid";
+import { MousePointerClickIcon } from "lucide-react";
 
 import { Button } from "@formbricks/ui/Button";
 
@@ -9,7 +9,7 @@ export default function Loading() {
         <Button
           variant="darkCTA"
           className="pointer-events-none animate-pulse cursor-not-allowed select-none bg-slate-200">
-          <CursorArrowRaysIcon className="mr-2 h-5 w-5 text-white" />
+          <MousePointerClickIcon className="mr-2 h-5 w-5 text-white" />
           Loading
         </Button>
       </div>

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/ActionsAttributesTabs.tsx

@@ -1,5 +1,5 @@
 import SecondNavbar from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/SecondNavbar";
-import { CursorArrowRaysIcon, TagIcon } from "@heroicons/react/24/solid";
+import { MousePointerClickIcon, TagIcon } from "lucide-react";
 
 interface ActionsAttributesTabsProps {
   activeId: string;
@@ -11,13 +11,13 @@ export default function ActionsAttributesTabs({ activeId, environmentId }: Actio
     {
       id: "actions",
       label: "Actions",
-      icon: <CursorArrowRaysIcon />,
+      icon: <MousePointerClickIcon className="h-5 w-5" />,
       href: `/environments/${environmentId}/actions`,
     },
     {
       id: "attributes",
       label: "Attributes",
-      icon: <TagIcon />,
+      icon: <TagIcon className="h-5 w-5" />,
       href: `/environments/${environmentId}/attributes`,
     },
   ];

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/AttributeActivityTab.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { getSegmentsByAttributeClassAction } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/actions";
-import { TagIcon } from "@heroicons/react/24/solid";
+import { TagIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 
 import { capitalizeFirstLetter } from "@formbricks/lib/strings";
@@ -86,7 +86,7 @@ export default function AttributeActivityTab({ attributeClass }: EventActivityTa
           <Label className="block text-xs font-normal text-slate-500">Type</Label>
           <div className="mt-1 flex items-center">
             <div className="mr-1.5  h-4 w-4 text-slate-600">
-              <TagIcon />
+              <TagIcon className="h-4 w-4" />
             </div>
             <p className="text-sm text-slate-700 ">{capitalizeFirstLetter(attributeClass.type)}</p>
           </div>

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/AttributeDetailModal.tsx

@@ -1,4 +1,4 @@
-import { TagIcon } from "@heroicons/react/24/solid";
+import { TagIcon } from "lucide-react";
 
 import { TAttributeClass } from "@formbricks/types/attributeClasses";
 import ModalWithTabs from "@formbricks/ui/ModalWithTabs";
@@ -30,7 +30,7 @@ export default function AttributeDetailModal({ open, setOpen, attributeClass }:
         open={open}
         setOpen={setOpen}
         tabs={tabs}
-        icon={<TagIcon />}
+        icon={<TagIcon className="h-5 w-5" />}
         label={attributeClass.name}
         description={attributeClass.description || ""}
       />

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/AttributeRowData.tsx

@@ -1,4 +1,4 @@
-import { TagIcon } from "@heroicons/react/24/solid";
+import { TagIcon } from "lucide-react";
 
 import { timeSinceConditionally } from "@formbricks/lib/time";
 import { Badge } from "@formbricks/ui/Badge";

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/AttributeSettingsTab.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { ArchiveBoxArrowDownIcon, ArchiveBoxXMarkIcon } from "@heroicons/react/24/solid";
 import type { AttributeClass } from "@prisma/client";
+import { ArchiveIcon, ArchiveXIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -86,13 +86,13 @@ export default function AttributeSettingsTab({ attributeClass, setOpen }: Attrib
                 {attributeClass.archived ? (
                   <>
                     {" "}
-                    <ArchiveBoxXMarkIcon className="mr-2 h-4 text-slate-600" />
+                    <ArchiveXIcon className="mr-2 h-4 text-slate-600" />
                     <span>Unarchive</span>
                   </>
                 ) : (
                   <>
                     {" "}
-                    <ArchiveBoxArrowDownIcon className="mr-2 h-4  text-slate-600" />
+                    <ArchiveIcon className="mr-2 h-4  text-slate-600" />
                     <span>Archive</span>
                   </>
                 )}

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/HowToAddAttributesButton.tsx

@@ -1,4 +1,4 @@
-import { QuestionMarkCircleIcon } from "@heroicons/react/24/solid";
+import { HelpCircleIcon } from "lucide-react";
 
 import { Button } from "@formbricks/ui/Button";
 
@@ -8,7 +8,7 @@ export default function HowToAddAttributesButton() {
       variant="secondary"
       href="https://formbricks.com/docs/attributes/custom-attributes"
       target="_blank">
-      <QuestionMarkCircleIcon className="mr-2 h-4 w-4" />
+      <HelpCircleIcon className="mr-2 h-4 w-4" />
       How to add attributes
     </Button>
   );

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

@@ -1,4 +1,4 @@
-import { QuestionMarkCircleIcon, TagIcon } from "@heroicons/react/24/solid";
+import { HelpCircleIcon, TagIcon } from "lucide-react";
 
 import { Button } from "@formbricks/ui/Button";
 
@@ -10,7 +10,7 @@ export default function Loading() {
           <Button
             variant="secondary"
             className="pointer-events-none animate-pulse cursor-not-allowed select-none">
-            <QuestionMarkCircleIcon className="mr-2 h-4 w-4" />
+            <HelpCircleIcon className="mr-2 h-4 w-4" />
             Loading Attributes
           </Button>
         </div>

apps/web/app/(app)/environments/[environmentId]/(peopleAndSegments)/people/PeopleSegmentsTabs.tsx

@@ -1,5 +1,5 @@
 import SecondNavbar from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/SecondNavbar";
-import { UserGroupIcon, UserIcon } from "@heroicons/react/24/solid";
+import { UserIcon, UsersIcon } from "lucide-react";
 
 interface PeopleSegmentsTabsProps {
   activeId: string;
@@ -12,13 +12,13 @@ export default function PeopleSegmentsTabs({ activeId, environmentId }: PeopleSe
     {
       id: "people",
       label: "People",
-      icon: <UserIcon />,
+      icon: <UserIcon className="h-5 w-5" />,
       href: `/environments/${environmentId}/people`,
     },
     {
       id: "segments",
       label: "Segments",
-      icon: <UserGroupIcon />,
+      icon: <UsersIcon className="h-5 w-5" />,
       href: `/environments/${environmentId}/segments`,
     },
   ];

apps/web/app/(app)/environments/[environmentId]/(peopleAndSegments)/people/[personId]/components/ActivityItemComponents.tsx

@@ -1,5 +1,5 @@
-import { CodeBracketIcon, CursorArrowRaysIcon, SparklesIcon } from "@heroicons/react/24/solid";
 import { formatDistance } from "date-fns";
+import { CodeIcon, MousePointerClickIcon, SparklesIcon } from "lucide-react";
 
 import { TAction } from "@formbricks/types/actions";
 import { Label } from "@formbricks/ui/Label";
@@ -8,9 +8,9 @@ import { Popover, PopoverContent, PopoverTrigger } from "@formbricks/ui/Popover"
 export const ActivityItemIcon = ({ actionItem }: { actionItem: TAction }) => (
   <div className="h-12 w-12 rounded-full bg-white p-3 text-slate-500  duration-100 ease-in-out group-hover:scale-110 group-hover:text-slate-600">
     <div>
-      {actionItem.actionClass?.type === "code" && <CodeBracketIcon />}
-      {actionItem.actionClass?.type === "noCode" && <CursorArrowRaysIcon />}
-      {actionItem.actionClass?.type === "automatic" && <SparklesIcon />}
+      {actionItem.actionClass?.type === "code" && <CodeIcon className="h-5 w-5" />}
+      {actionItem.actionClass?.type === "noCode" && <MousePointerClickIcon className="h-5 w-5" />}
+      {actionItem.actionClass?.type === "automatic" && <SparklesIcon className="h-5 w-5" />}
     </div>
   </div>
 );

apps/web/app/(app)/environments/[environmentId]/(peopleAndSegments)/people/[personId]/components/ResponseTimeline.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import ResponseFeed from "@/app/(app)/environments/[environmentId]/(peopleAndSegments)/people/[personId]/components/ResponsesFeed";
-import { ArrowsUpDownIcon } from "@heroicons/react/24/outline";
+import { ArrowDownUpIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 
 import { TEnvironment } from "@formbricks/types/environment";
@@ -41,7 +41,7 @@ export default function ResponseTimeline({
             type="button"
             onClick={toggleSortResponses}
             className="hover:text-brand-dark flex items-center px-1 text-slate-800">
-            <ArrowsUpDownIcon className="inline h-4 w-4" />
+            <ArrowDownUpIcon className="inline h-4 w-4" />
           </button>
         </div>
       </div>

apps/web/app/(app)/environments/[environmentId]/(peopleAndSegments)/people/[personId]/components/ResponsesFeed.tsx

@@ -2,6 +2,8 @@
 
 import { useEffect, useState } from "react";
 
+import { useMembershipRole } from "@formbricks/lib/membership/hooks/useMembershipRole";
+import { getAccessFlags } from "@formbricks/lib/membership/utils";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TResponse } from "@formbricks/types/responses";
 import { TSurvey } from "@formbricks/types/surveys";
@@ -44,28 +46,62 @@ export default function ResponseFeed({
       {fetchedResponses.length === 0 ? (
         <EmptySpaceFiller type="response" environment={environment} />
       ) : (
-        fetchedResponses.map((response) => {
-          const survey = surveys.find((survey) => {
-            return survey.id === response.surveyId;
-          });
-          return (
-            <div key={response.id}>
-              {survey && (
-                <SingleResponseCard
-                  response={response}
-                  survey={survey}
-                  user={user}
-                  pageType="people"
-                  environmentTags={environmentTags}
-                  environment={environment}
-                  deleteResponse={deleteResponse}
-                  updateResponse={updateResponse}
-                />
-              )}
-            </div>
-          );
-        })
+        fetchedResponses.map((response) => (
+          <ResponseSurveyCard
+            key={response.id}
+            response={response}
+            surveys={surveys}
+            user={user}
+            environmentTags={environmentTags}
+            environment={environment}
+            deleteResponse={deleteResponse}
+            updateResponse={updateResponse}
+          />
+        ))
       )}
     </>
   );
 }
+
+const ResponseSurveyCard = ({
+  response,
+  surveys,
+  user,
+  environmentTags,
+  environment,
+  deleteResponse,
+  updateResponse,
+}: {
+  response: TResponse;
+  surveys: TSurvey[];
+  user: TUser;
+  environmentTags: TTag[];
+  environment: TEnvironment;
+  deleteResponse: (responseId: string) => void;
+  updateResponse: (responseId: string, response: TResponse) => void;
+}) => {
+  const survey = surveys.find((survey) => {
+    return survey.id === response.surveyId;
+  });
+
+  const { membershipRole } = useMembershipRole(survey?.environmentId || "");
+  const { isViewer } = getAccessFlags(membershipRole);
+
+  return (
+    <div key={response.id}>
+      {survey && (
+        <SingleResponseCard
+          response={response}
+          survey={survey}
+          user={user}
+          pageType="people"
+          environmentTags={environmentTags}
+          environment={environment}
+          deleteResponse={deleteResponse}
+          updateResponse={updateResponse}
+          isViewer={isViewer}
+        />
+      )}
+    </div>
+  );
+};

apps/web/app/(app)/environments/[environmentId]/(peopleAndSegments)/people/[personId]/loading.tsx

@@ -2,7 +2,7 @@ import {
   ActivityItemIcon,
   ActivityItemPopover,
 } from "@/app/(app)/environments/[environmentId]/(peopleAndSegments)/people/[personId]/components/ActivityItemComponents";
-import { ArrowsUpDownIcon } from "@heroicons/react/24/outline";
+import { ArrowDownUpIcon } from "lucide-react";
 import { TrashIcon } from "lucide-react";
 
 import { TAction } from "@formbricks/types/actions";
@@ -100,7 +100,7 @@ export default function Loading() {
                 <h2 className="text-lg font-bold text-slate-700">Responses</h2>
                 <div className="text-right">
                   <button className="hover:text-brand-dark pointer-events-none flex animate-pulse cursor-not-allowed select-none items-center px-1 text-slate-800">
-                    <ArrowsUpDownIcon className="inline h-4 w-4" />
+                    <ArrowDownUpIcon className="inline h-4 w-4" />
                   </button>
                 </div>
               </div>

apps/web/app/(app)/environments/[environmentId]/(peopleAndSegments)/segments/components/BasicCreateSegmentModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { UserGroupIcon } from "@heroicons/react/20/solid";
+import { UsersIcon } from "lucide-react";
 import { FilterIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useMemo, useState } from "react";
@@ -136,7 +136,7 @@ const BasicCreateSegmentModal = ({
             <div className="flex w-full items-center gap-4 p-6">
               <div className="flex items-center space-x-2">
                 <div className="mr-1.5 h-6 w-6 text-slate-500">
-                  <UserGroupIcon />
+                  <UsersIcon className="h-5 w-5" />
                 </div>
                 <div>
                   <h3 className="text-base font-medium">Create Segment</h3>

apps/web/app/(app)/environments/[environmentId]/(peopleAndSegments)/segments/components/EditSegmentModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { UserGroupIcon } from "@heroicons/react/24/solid";
+import { UsersIcon } from "lucide-react";
 
 import SegmentSettings from "@formbricks/ee/advancedTargeting/components/SegmentSettings";
 import { TActionClass } from "@formbricks/types/actionClasses";
@@ -76,7 +76,7 @@ export default function EditSegmentModal({
         open={open}
         setOpen={setOpen}
         tabs={tabs}
-        icon={<UserGroupIcon />}
+        icon={<UsersIcon className="h-5 w-5" />}
         label={currentSegment.title}
         description={currentSegment.description || ""}
         closeOnOutsideClick={false}

apps/web/app/(app)/environments/[environmentId]/(peopleAndSegments)/segments/components/SegmentTableDataRow.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { UserGroupIcon } from "@heroicons/react/24/solid";
 import { format, formatDistanceToNow } from "date-fns";
+import { UsersIcon } from "lucide-react";
 import { useState } from "react";
 
 import { TActionClass } from "@formbricks/types/actionClasses";
@@ -39,7 +39,7 @@ const SegmentTableDataRow = ({
         <div className="col-span-4 flex items-center pl-6 text-sm">
           <div className="flex items-center gap-4">
             <div className="ph-no-capture h-8 w-8 flex-shrink-0 text-slate-700">
-              <UserGroupIcon />
+              <UsersIcon className="h-5 w-5" />
             </div>
             <div className="flex flex-col">
               <div className="ph-no-capture font-medium text-slate-900">{title}</div>

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { createProductAction } from "@/app/(app)/environments/[environmentId]/actions";
-import { PlusCircleIcon } from "@heroicons/react/24/outline";
+import { PlusCircleIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -51,7 +51,7 @@ export default function AddProductModal({ environmentId, open, setOpen }: AddPro
           <div className="flex items-center justify-between p-6">
             <div className="flex items-center space-x-2">
               <div className="mr-1.5 h-10 w-10 text-slate-500">
-                <PlusCircleIcon />
+                <PlusCircleIcon className="h-5 w-5" />
               </div>
               <div>
                 <div className="text-xl font-medium text-slate-700">Add Product</div>
@@ -66,6 +66,7 @@ export default function AddProductModal({ environmentId, open, setOpen }: AddPro
               <div>
                 <Label>Name</Label>
                 <Input
+                  autoFocus
                   placeholder="e.g. My New Product"
                   {...register("name", { required: true })}
                   value={productName}

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

@@ -1,11 +1,11 @@
-import { QuestionMarkCircleIcon } from "@heroicons/react/24/solid";
+import { HelpCircleIcon } from "lucide-react";
 
 import { Button } from "@formbricks/ui/Button";
 
 export default function HowToAddPeopleButton() {
   return (
     <Button variant="secondary" href="https://formbricks.com/docs/attributes/identify-users" target="_blank">
-      <QuestionMarkCircleIcon className="mr-2 h-4 w-4" />
+      <HelpCircleIcon className="mr-2 h-4 w-4" />
       How to add people
     </Button>
   );

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

@@ -2,23 +2,23 @@
 
 import FaveIcon from "@/app/favicon.ico";
 import { formbricksLogout } from "@/app/lib/formbricks";
+import clsx from "clsx";
 import {
-  AdjustmentsVerticalIcon,
-  ArrowRightOnRectangleIcon,
-  ChatBubbleBottomCenterTextIcon,
+  BrushIcon,
   ChevronDownIcon,
-  CodeBracketIcon,
+  CodeIcon,
   CreditCardIcon,
-  DocumentCheckIcon,
-  EnvelopeIcon,
+  FileCheckIcon,
   HeartIcon,
   LinkIcon,
-  PaintBrushIcon,
+  LogOutIcon,
+  MailIcon,
+  MessageSquareTextIcon,
   PlusIcon,
+  SlidersIcon,
   UserCircleIcon,
   UsersIcon,
-} from "@heroicons/react/24/solid";
-import clsx from "clsx";
+} from "lucide-react";
 import { MenuIcon } from "lucide-react";
 import type { Session } from "next-auth";
 import { signOut } from "next-auth/react";
@@ -155,13 +155,13 @@ export default function Navigation({
       title: "Survey",
       links: [
         {
-          icon: AdjustmentsVerticalIcon,
+          icon: SlidersIcon,
           label: "Product Settings",
           href: `/environments/${environment.id}/settings/product`,
           hidden: false,
         },
         {
-          icon: PaintBrushIcon,
+          icon: BrushIcon,
           label: "Look & Feel",
           href: `/environments/${environment.id}/settings/lookandfeel`,
           hidden: isViewer,
@@ -189,7 +189,7 @@ export default function Navigation({
       title: "Setup",
       links: [
         {
-          icon: DocumentCheckIcon,
+          icon: FileCheckIcon,
           label: "Setup checklist",
           href: `/environments/${environment.id}/settings/setup`,
           hidden: widgetSetupCompleted,
@@ -203,7 +203,7 @@ export default function Navigation({
           },
         },
         {
-          icon: CodeBracketIcon,
+          icon: CodeIcon,
           label: "Developer Docs",
           href: "https://formbricks.com/docs",
           target: "_blank",
@@ -483,7 +483,7 @@ export default function Navigation({
                           <DropdownMenuItem>
                             <a href="mailto:johannes@formbricks.com">
                               <div className="flex items-center">
-                                <EnvelopeIcon className="mr-2 h-4 w-4" />
+                                <MailIcon className="mr-2 h-4 w-4" />
                                 <span>Email us!</span>
                               </div>
                             </a>
@@ -494,7 +494,7 @@ export default function Navigation({
                                 formbricks.track("Top Menu: Product Feedback");
                               }}>
                               <div className="flex items-center">
-                                <ChatBubbleBottomCenterTextIcon className="mr-2 h-4 w-4" />
+                                <MessageSquareTextIcon className="mr-2 h-4 w-4" />
                                 <span>Product Feedback</span>
                               </div>
                             </button>
@@ -507,7 +507,7 @@ export default function Navigation({
                           await formbricksLogout();
                         }}>
                         <div className="flex h-full w-full items-center">
-                          <ArrowRightOnRectangleIcon className="mr-2 h-4 w-4" />
+                          <LogOutIcon className="mr-2 h-4 w-4" />
                           Logout
                         </div>
                       </DropdownMenuItem>

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

@@ -5,24 +5,54 @@ import { usePostHog } from "posthog-js/react";
 import { useEffect } from "react";
 
 import { env } from "@formbricks/lib/env";
+import { TSubscriptionStatus } from "@formbricks/types/teams";
 
 const posthogEnabled = env.NEXT_PUBLIC_POSTHOG_API_KEY && env.NEXT_PUBLIC_POSTHOG_API_HOST;
 
 export default function PosthogIdentify({
   session,
   environmentId,
+  teamId,
+  teamName,
+  inAppSurveyBillingStatus,
+  linkSurveyBillingStatus,
+  userTargetingBillingStatus,
 }: {
   session: Session;
-  environmentId: string;
+  environmentId?: string;
+  teamId?: string;
+  teamName?: string;
+  inAppSurveyBillingStatus?: TSubscriptionStatus;
+  linkSurveyBillingStatus?: TSubscriptionStatus;
+  userTargetingBillingStatus?: TSubscriptionStatus;
 }) {
   const posthog = usePostHog();
 
   useEffect(() => {
     if (posthogEnabled && session.user && posthog) {
       posthog.identify(session.user.id, { name: session.user.name, email: session.user.email });
-      posthog.group("environment", environmentId, { name: environmentId });
+      if (environmentId) {
+        posthog.group("environment", environmentId, { name: environmentId });
+      }
+      if (teamId) {
+        posthog.group("team", teamId, {
+          name: teamName,
+          inAppSurveyBillingStatus,
+          linkSurveyBillingStatus,
+          userTargetingBillingStatus,
+        });
+      }
     }
-  }, [session, environmentId, posthog]);
+  }, [
+    posthog,
+    session.user,
+    environmentId,
+    teamId,
+    teamName,
+    inAppSurveyBillingStatus,
+    linkSurveyBillingStatus,
+    userTargetingBillingStatus,
+  ]);
 
   return null;
 }

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

@@ -1,4 +1,4 @@
-import { LinkIcon } from "@heroicons/react/24/outline";
+import { LinkIcon } from "lucide-react";
 
 import { Modal } from "@formbricks/ui/Modal";
 
@@ -18,7 +18,7 @@ export default function UrlShortenerModal({ open, setOpen, webAppUrl }: UrlShort
           <div className="flex items-center justify-between p-6">
             <div className="flex items-center space-x-2">
               <div className="mr-1.5 h-10 w-10 text-slate-500">
-                <LinkIcon />
+                <LinkIcon className="h-5 w-5" />
               </div>
               <div>
                 <div className="text-xl font-medium text-slate-700">URL shortener</div>

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

@@ -1,5 +1,5 @@
-import { CheckIcon, ExclamationTriangleIcon } from "@heroicons/react/24/solid";
 import clsx from "clsx";
+import { AlertTriangleIcon, CheckIcon } from "lucide-react";
 import Link from "next/link";
 
 import { getEnvironment } from "@formbricks/lib/environment/service";
@@ -18,7 +18,7 @@ export default async function WidgetStatusIndicator({ environmentId, type }: Wid
 
   const stati = {
     notImplemented: {
-      icon: ExclamationTriangleIcon,
+      icon: AlertTriangleIcon,
       title: "Connect Formbricks to your app or website.",
       subtitle:
         "Your app or website is not yet connected with Formbricks. To run in-app surveys follow the setup guide.",

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

@@ -8,6 +8,7 @@ import { useEffect, useState } from "react";
 import { Control, Controller, UseFormSetValue, useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
 
+import { checkForRecallInHeadline } from "@formbricks/lib/utils/recall";
 import { TIntegrationItem } from "@formbricks/types/integration";
 import {
   TIntegrationAirtable,
@@ -333,7 +334,7 @@ export default function AddIntegrationModal(props: AddIntegrationModalProps) {
                 <Label htmlFor="Surveys">Questions</Label>
                 <div className="mt-1 rounded-lg border border-slate-200">
                   <div className="grid content-center rounded-lg bg-slate-50 p-3 text-left text-sm text-slate-900">
-                    {selectedSurvey?.questions.map((question) => (
+                    {checkForRecallInHeadline(selectedSurvey)?.questions.map((question) => (
                       <Controller
                         key={question.id}
                         control={control}

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

@@ -1,11 +1,12 @@
 import { createOrUpdateIntegrationAction } from "@/app/(app)/environments/[environmentId]/integrations/actions";
-import { ChevronDownIcon } from "@heroicons/react/24/solid";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { ChevronDownIcon } from "lucide-react";
 import Image from "next/image";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import toast from "react-hot-toast";
 
+import { checkForRecallInHeadline } from "@formbricks/lib/utils/recall";
 import { TIntegrationItem } from "@formbricks/types/integration";
 import {
   TIntegrationGoogleSheets,
@@ -273,7 +274,7 @@ export default function AddIntegrationModal({
                   <Label htmlFor="Surveys">Questions</Label>
                   <div className="mt-1 rounded-lg border border-slate-200">
                     <div className="grid content-center rounded-lg bg-slate-50 p-3 text-left text-sm text-slate-900">
-                      {selectedSurvey?.questions.map((question) => (
+                      {checkForRecallInHeadline(selectedSurvey)?.questions.map((question) => (
                         <div key={question.id} className="my-1 flex items-center space-x-2">
                           <label htmlFor={question.id} className="flex cursor-pointer items-center">
                             <Checkbox

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

@@ -6,13 +6,14 @@ import {
 } from "@/app/(app)/environments/[environmentId]/integrations/notion/constants";
 import { questionTypes } from "@/app/lib/questions";
 import NotionLogo from "@/images/notion.png";
-import { ArrowPathIcon, ChevronDownIcon, PlusIcon, XMarkIcon } from "@heroicons/react/24/solid";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { ChevronDownIcon, PlusIcon, RefreshCcwIcon, XIcon } from "lucide-react";
 import Image from "next/image";
 import React, { useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 import toast from "react-hot-toast";
 
+import { checkForRecallInHeadline } from "@formbricks/lib/utils/recall";
 import { TIntegrationInput } from "@formbricks/types/integration";
 import {
   TIntegrationNotion,
@@ -105,12 +106,13 @@ export default function AddIntegrationModal({
   }, [selectedDatabase?.id]);
 
   const questionItems = useMemo(() => {
-    const questions =
-      selectedSurvey?.questions.map((q) => ({
-        id: q.id,
-        name: q.headline,
-        type: q.type,
-      })) || [];
+    const questions = selectedSurvey
+      ? checkForRecallInHeadline(selectedSurvey)?.questions.map((q) => ({
+          id: q.id,
+          name: q.headline,
+          type: q.type,
+        }))
+      : [];
 
     const hiddenFields = selectedSurvey?.hiddenFields.enabled
       ? selectedSurvey?.hiddenFields.fieldIds?.map((fId) => ({
@@ -400,7 +402,7 @@ export default function AddIntegrationModal({
               mapping.length > 1 ? "visible" : "invisible"
             }`}
             onClick={deleteRow}>
-            <XMarkIcon className="h-5 w-5 text-red-500" />
+            <XIcon className="h-5 w-5 text-red-500" />
           </button>
         </div>
       </div>
@@ -580,7 +582,7 @@ const DropdownSelector = ({
             onClick={() => {
               refetch();
             }}>
-            <ArrowPathIcon className="h-5 w-5 font-bold text-slate-500" />
+            <RefreshCcwIcon className="h-5 w-5 font-bold text-slate-500" />
           </button>
         )}
       </div>

apps/web/app/(app)/environments/[environmentId]/integrations/webhooks/components/AddWebhookModal.tsx

@@ -53,7 +53,8 @@ export default function AddWebhookModal({ environmentId, surveys, open, setOpen
       return true;
     } catch (err) {
       setHittingEndpoint(false);
-      toast.error("Oh no! We are unable to ping the webhook!");
+      toast.error("Unable to ping the webhook! Please check browser console for logs");
+      console.error("Webhook Test Failed due to: ", err.message);
       setEndpointAccessible(false);
       return false;
     }

apps/web/app/(app)/environments/[environmentId]/integrations/webhooks/components/WebhookSettingsTab.tsx

@@ -4,8 +4,8 @@ import { triggers } from "@/app/(app)/environments/[environmentId]/integrations/
 import SurveyCheckboxGroup from "@/app/(app)/environments/[environmentId]/integrations/webhooks/components/SurveyCheckboxGroup";
 import TriggerCheckboxGroup from "@/app/(app)/environments/[environmentId]/integrations/webhooks/components/TriggerCheckboxGroup";
 import { testEndpoint } from "@/app/(app)/environments/[environmentId]/integrations/webhooks/components/testEndpoint";
-import { TrashIcon } from "@heroicons/react/24/outline";
 import clsx from "clsx";
+import { TrashIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -63,7 +63,8 @@ export default function WebhookSettingsTab({
       return true;
     } catch (err) {
       setHittingEndpoint(false);
-      toast.error("Oh no! We are unable to ping the webhook!");
+      toast.error("Unable to ping the webhook! Please check browser console for logs");
+      console.error("Webhook Test Failed due to: ", err.message);
       setEndpointAccessible(false);
       return false;
     }

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

@@ -6,6 +6,7 @@ import { redirect } from "next/navigation";
 import { authOptions } from "@formbricks/lib/authOptions";
 import { IS_FORMBRICKS_CLOUD } from "@formbricks/lib/constants";
 import { hasUserEnvironmentAccess } from "@formbricks/lib/environment/auth";
+import { getTeamByEnvironmentId } from "@formbricks/lib/team/service";
 import { AuthorizationError } from "@formbricks/types/errors";
 import ToasterClient from "@formbricks/ui/ToasterClient";
 
@@ -22,10 +23,23 @@ export default async function EnvironmentLayout({ children, params }) {
     throw new AuthorizationError("Not authorized");
   }
 
+  const team = await getTeamByEnvironmentId(params.environmentId);
+  if (!team) {
+    throw new Error("Team not found");
+  }
+
   return (
     <>
       <ResponseFilterProvider>
-        <PosthogIdentify session={session} environmentId={params.environmentId} />
+        <PosthogIdentify
+          session={session}
+          environmentId={params.environmentId}
+          teamId={team.id}
+          teamName={team.name}
+          inAppSurveyBillingStatus={team.billing.features.inAppSurvey.status}
+          linkSurveyBillingStatus={team.billing.features.linkSurvey.status}
+          userTargetingBillingStatus={team.billing.features.userTargeting.status}
+        />
         <FormbricksClient session={session} />
         <ToasterClient />
         <EnvironmentsNavbar

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";
+import { AlertTriangleIcon } from "lucide-react";
 import { useForm } from "react-hook-form";
 
 import { Button } from "@formbricks/ui/Button";
@@ -46,7 +46,7 @@ export default function AddMemberModal({ open, setOpen, onSubmit }: MemberModalP
               </div>
 
               <div className="flex items-center rounded-lg border border-slate-200 bg-slate-100 p-2 text-sm text-slate-700">
-                <ExclamationTriangleIcon className="mx-3 h-12 w-12 text-amber-500" />
+                <AlertTriangleIcon className="mx-3 h-12 w-12 text-amber-500" />
                 <p>
                   For security reasons, the API key will only be <strong>shown once</strong> after creation.
                   Please copy it to your destination right away.

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

@@ -1,7 +1,6 @@
 "use client";
 
-import { TrashIcon } from "@heroicons/react/24/outline";
-import { FilesIcon } from "lucide-react";
+import { FilesIcon, TrashIcon } from "lucide-react";
 import { useState } from "react";
 import toast from "react-hot-toast";
 

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

@@ -0,0 +1,36 @@
+import { Metadata } from "next";
+import { getServerSession } from "next-auth";
+import { notFound } from "next/navigation";
+
+import { authOptions } from "@formbricks/lib/authOptions";
+import { IS_FORMBRICKS_CLOUD } from "@formbricks/lib/constants";
+import { getMembershipByUserIdTeamId } from "@formbricks/lib/membership/service";
+import { getAccessFlags } from "@formbricks/lib/membership/utils";
+import { getTeamByEnvironmentId } from "@formbricks/lib/team/service";
+import { ErrorComponent } from "@formbricks/ui/ErrorComponent";
+
+export const metadata: Metadata = {
+  title: "Billing",
+};
+
+export default async function BillingLayout({ children, params }) {
+  if (!IS_FORMBRICKS_CLOUD) {
+    notFound();
+  }
+
+  const session = await getServerSession(authOptions);
+  const team = await getTeamByEnvironmentId(params.environmentId);
+
+  if (!session) {
+    throw new Error("Unauthorized");
+  }
+  if (!team) {
+    throw new Error("Team not found");
+  }
+
+  const currentUserMembership = await getMembershipByUserIdTeamId(session?.user.id, team.id);
+  const { isAdmin, isOwner } = getAccessFlags(currentUserMembership?.role);
+  const isPricingDisabled = !isOwner && !isAdmin;
+
+  return <>{!isPricingDisabled ? <>{children}</> : <ErrorComponent />}</>;
+}

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

@@ -1,37 +1,15 @@
-import { getServerSession } from "next-auth";
-import { notFound } from "next/navigation";
-
-import { authOptions } from "@formbricks/lib/authOptions";
-import {
-  IS_FORMBRICKS_CLOUD,
-  PRICING_APPSURVEYS_FREE_RESPONSES,
-  PRICING_USERTARGETING_FREE_MTU,
-} from "@formbricks/lib/constants";
-import { getMembershipByUserIdTeamId } from "@formbricks/lib/membership/service";
-import { getAccessFlags } from "@formbricks/lib/membership/utils";
+import { PRICING_APPSURVEYS_FREE_RESPONSES, PRICING_USERTARGETING_FREE_MTU } from "@formbricks/lib/constants";
 import {
   getMonthlyActiveTeamPeopleCount,
   getMonthlyTeamResponseCount,
   getTeamByEnvironmentId,
 } from "@formbricks/lib/team/service";
-import { ErrorComponent } from "@formbricks/ui/ErrorComponent";
 
 import SettingsTitle from "../components/SettingsTitle";
 import PricingTable from "./components/PricingTable";
 
 export default async function BillingPage({ params }) {
-  if (!IS_FORMBRICKS_CLOUD) {
-    notFound();
-  }
-
-  const session = await getServerSession(authOptions);
-
   const team = await getTeamByEnvironmentId(params.environmentId);
-
-  if (!session) {
-    throw new Error("Unauthorized");
-  }
-
   if (!team) {
     throw new Error("Team not found");
   }
@@ -40,26 +18,19 @@ export default async function BillingPage({ params }) {
     getMonthlyActiveTeamPeopleCount(team.id),
     getMonthlyTeamResponseCount(team.id),
   ]);
-  const currentUserMembership = await getMembershipByUserIdTeamId(session?.user.id, team.id);
-  const { isAdmin, isOwner } = getAccessFlags(currentUserMembership?.role);
-  const isPricingDisabled = !isOwner && !isAdmin;
 
   return (
     <>
       <div>
         <SettingsTitle title="Billing & Plan" />
-        {!isPricingDisabled ? (
-          <PricingTable
-            team={team}
-            environmentId={params.environmentId}
-            peopleCount={peopleCount}
-            responseCount={responseCount}
-            userTargetingFreeMtu={PRICING_USERTARGETING_FREE_MTU}
-            inAppSurveyFreeResponses={PRICING_APPSURVEYS_FREE_RESPONSES}
-          />
-        ) : (
-          <ErrorComponent />
-        )}
+        <PricingTable
+          team={team}
+          environmentId={params.environmentId}
+          peopleCount={peopleCount}
+          responseCount={responseCount}
+          userTargetingFreeMtu={PRICING_USERTARGETING_FREE_MTU}
+          inAppSurveyFreeResponses={PRICING_APPSURVEYS_FREE_RESPONSES}
+        />
       </div>
     </>
   );

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

@@ -1,26 +1,12 @@
-import { getServerSession } from "next-auth";
-import { notFound, redirect } from "next/navigation";
+import { redirect } from "next/navigation";
 
 import { StripePriceLookupKeys } from "@formbricks/ee/billing/lib/constants";
-import { authOptions } from "@formbricks/lib/authOptions";
-import { IS_FORMBRICKS_CLOUD } from "@formbricks/lib/constants";
 import { getTeamByEnvironmentId } from "@formbricks/lib/team/service";
 
 import { upgradePlanAction } from "../actions";
 
 export default async function UnlimitedPage({ params }) {
-  if (!IS_FORMBRICKS_CLOUD) {
-    notFound();
-  }
-
-  const session = await getServerSession(authOptions);
-
   const team = await getTeamByEnvironmentId(params.environmentId);
-
-  if (!session) {
-    throw new Error("Unauthorized");
-  }
-
   if (!team) {
     throw new Error("Team not found");
   }

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

@@ -1,26 +1,12 @@
-import { getServerSession } from "next-auth";
-import { notFound, redirect } from "next/navigation";
+import { redirect } from "next/navigation";
 
 import { StripePriceLookupKeys } from "@formbricks/ee/billing/lib/constants";
-import { authOptions } from "@formbricks/lib/authOptions";
-import { IS_FORMBRICKS_CLOUD } from "@formbricks/lib/constants";
 import { getTeamByEnvironmentId } from "@formbricks/lib/team/service";
 
 import { upgradePlanAction } from "../actions";
 
 export default async function UnlimitedPage({ params }) {
-  if (!IS_FORMBRICKS_CLOUD) {
-    notFound();
-  }
-
-  const session = await getServerSession(authOptions);
-
   const team = await getTeamByEnvironmentId(params.environmentId);
-
-  if (!session) {
-    throw new Error("Unauthorized");
-  }
-
   if (!team) {
     throw new Error("Team not found");
   }

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

@@ -1,21 +1,21 @@
 "use client";
 
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
+import clsx from "clsx";
 import {
-  AdjustmentsVerticalIcon,
-  BellAlertIcon,
+  BellRingIcon,
   BoltIcon,
+  BrushIcon,
+  ChevronDownIcon,
   CreditCardIcon,
-  DocumentCheckIcon,
-  DocumentMagnifyingGlassIcon,
-  HashtagIcon,
+  FileCheckIcon,
+  FileSearch2Icon,
+  HashIcon,
   KeyIcon,
   LinkIcon,
-  PaintBrushIcon,
+  SlidersIcon,
   UserCircleIcon,
   UsersIcon,
-} from "@heroicons/react/24/solid";
-import clsx from "clsx";
+} from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useMemo, useState } from "react";
@@ -76,7 +76,7 @@ export default function SettingsNavbar({
           {
             name: "Notifications",
             href: `/environments/${environmentId}/settings/notifications`,
-            icon: BellAlertIcon,
+            icon: BellRingIcon,
             current: pathname?.includes("/notifications"),
             hidden: false,
           },
@@ -89,14 +89,14 @@ export default function SettingsNavbar({
           {
             name: "Settings",
             href: `/environments/${environmentId}/settings/product`,
-            icon: AdjustmentsVerticalIcon,
+            icon: SlidersIcon,
             current: pathname?.includes("/product"),
             hidden: false,
           },
           {
             name: "Look & Feel",
             href: `/environments/${environmentId}/settings/lookandfeel`,
-            icon: PaintBrushIcon,
+            icon: BrushIcon,
             current: pathname?.includes("/lookandfeel"),
             hidden: isViewer,
           },
@@ -110,7 +110,7 @@ export default function SettingsNavbar({
           {
             name: "Tags",
             href: `/environments/${environmentId}/settings/tags`,
-            icon: HashtagIcon,
+            icon: HashIcon,
             current: pathname?.includes("/tags"),
             hidden: isViewer,
           },
@@ -150,14 +150,14 @@ export default function SettingsNavbar({
           {
             name: "Setup Checklist",
             href: `/environments/${environmentId}/settings/setup`,
-            icon: DocumentCheckIcon,
+            icon: FileCheckIcon,
             current: pathname?.includes("/setup"),
             hidden: false,
           },
           {
             name: "Documentation",
             href: "https://formbricks.com/docs",
-            icon: DocumentMagnifyingGlassIcon,
+            icon: FileSearch2Icon,
             target: "_blank",
             hidden: false,
           },

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

@@ -79,7 +79,7 @@ export default function AddMemberModal({
               <div>
                 <AddMemberRole control={control} canDoRoleManagement={canDoRoleManagement} />
                 {!canDoRoleManagement &&
-                  (!isFormbricksCloud ? (
+                  (isFormbricksCloud ? (
                     <UpgradePlanNotice
                       message="To manage access roles,"
                       url={`/environments/${environmentId}/settings/billing`}

apps/web/app/(app)/environments/[environmentId]/settings/members/components/EditMemberships/MemberActions.tsx

@@ -7,7 +7,7 @@ import {
   resendInviteAction,
 } from "@/app/(app)/environments/[environmentId]/settings/members/actions";
 import ShareInviteModal from "@/app/(app)/environments/[environmentId]/settings/members/components/ShareInviteModal";
-import { PaperAirplaneIcon, ShareIcon, TrashIcon } from "@heroicons/react/24/outline";
+import { SendHorizonalIcon, ShareIcon, TrashIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import React, { useMemo, useState } from "react";
 import toast from "react-hot-toast";
@@ -111,7 +111,7 @@ export default function MemberActions({ team, member, invite, showDeleteButton }
                 onClick={() => {
                   handleShareInvite();
                 }}
-                id="shareInviteButton">
+                className="shareInviteButton">
                 <ShareIcon className="h-5 w-5 text-slate-700 hover:text-slate-500" />
               </button>
             </TooltipTrigger>
@@ -127,7 +127,7 @@ export default function MemberActions({ team, member, invite, showDeleteButton }
                   handleResendInvite();
                 }}
                 id="resendInviteButton">
-                <PaperAirplaneIcon className="h-5 w-5 text-slate-700 hover:text-slate-500" />
+                <SendHorizonalIcon className="h-5 w-5 text-slate-700 hover:text-slate-500" />
               </button>
             </TooltipTrigger>
             <TooltipContent className="TooltipContent" sideOffset={5}>

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

@@ -1,7 +1,6 @@
 "use client";
 
-import { CheckIcon } from "@heroicons/react/24/outline";
-import { DocumentDuplicateIcon } from "@heroicons/react/24/solid";
+import { CheckIcon, CopyIcon } from "lucide-react";
 import { useRef } from "react";
 import toast from "react-hot-toast";
 
@@ -59,7 +58,7 @@ export default function ShareInviteModal({ inviteToken, open, setOpen }: ShareIn
               }}
               title="Copy invite link to clipboard"
               aria-label="Copy invite link to clipboard"
-              EndIcon={DocumentDuplicateIcon}>
+              EndIcon={CopyIcon}>
               Copy URL
             </Button>
           </div>

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

@@ -1,4 +1,4 @@
-import { QuestionMarkCircleIcon, UsersIcon } from "@heroicons/react/24/solid";
+import { HelpCircleIcon, UsersIcon } from "lucide-react";
 import Link from "next/link";
 
 import { TUser } from "@formbricks/types/user";
@@ -51,9 +51,9 @@ export default function EditAlerts({
               <TooltipProvider delayDuration={50}>
                 <Tooltip>
                   <TooltipTrigger>
-                    <div className="col-span-1 flex cursor-default items-center justify-center">
+                    <div className="col-span-1 flex cursor-default items-center justify-center space-x-2">
                       <span className="">Every Response</span>
-                      <QuestionMarkCircleIcon className="h-4 w-4 flex-shrink-0 text-slate-500" />
+                      <HelpCircleIcon className="h-4 w-4 flex-shrink-0 text-slate-500" />
                     </div>
                   </TooltipTrigger>
                   <TooltipContent>Sends complete responses, no partials.</TooltipContent>

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

@@ -1,4 +1,4 @@
-import { UsersIcon } from "@heroicons/react/24/solid";
+import { UsersIcon } from "lucide-react";
 import Link from "next/link";
 
 import { TUser } from "@formbricks/types/user";

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

@@ -40,6 +40,23 @@ export const updateProductAction = async (
     throw new AuthorizationError("Not authorized");
   }
 
+  const team = await getTeamByEnvironmentId(environmentId);
+  const membership = team ? await getMembershipByUserIdTeamId(session.user.id, team.id) : null;
+
+  if (!membership) {
+    throw new AuthorizationError("Not authorized");
+  }
+
+  if (membership.role === "viewer") {
+    throw new AuthorizationError("Not authorized");
+  }
+
+  if (membership.role === "developer") {
+    if (!!data.name || !!data.brandColor || !!data.teamId || !!data.environments) {
+      throw new AuthorizationError("Not authorized");
+    }
+  }
+
   const updatedProduct = await updateProduct(productId, data);
   return updatedProduct;
 };

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

@@ -61,7 +61,7 @@ function DeleteAccountModal({ setOpen, open, session, IS_FORMBRICKS_CLOUD }: Del
         await signOut({ redirect: true });
         window.location.replace("https://app.formbricks.com/s/clri52y3z8f221225wjdhsoo2");
       } else {
-        await signOut();
+        await signOut({ callbackUrl: "/auth/login" });
       }
     } catch (error) {
       toast.error("Something went wrong");

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

@@ -42,7 +42,6 @@ if (typeof window !== "undefined") {
   formbricks.init({
     environmentId: "${environmentId}",
     apiHost: "${webAppUrl}",
-    debug: true, // remove when in production 
   });
 }`}</CodeBlock>
 

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

@@ -6,7 +6,7 @@ import {
   updateTagNameAction,
 } from "@/app/(app)/environments/[environmentId]/settings/tags/actions";
 import MergeTagsCombobox from "@/app/(app)/environments/[environmentId]/settings/tags/components/MergeTagsCombobox";
-import { ExclamationCircleIcon } from "@heroicons/react/24/solid";
+import { AlertCircleIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import React, { useState } from "react";
 import { toast } from "react-hot-toast";
@@ -69,7 +69,7 @@ const SingleTag: React.FC<{
                     if (error?.message.includes("Unique constraint failed on the fields")) {
                       toast.error("Tag already exists", {
                         duration: 2000,
-                        icon: <ExclamationCircleIcon className="h-5 w-5 text-orange-500" />,
+                        icon: <AlertCircleIcon className="h-5 w-5 text-orange-500" />,
                       });
                     } else {
                       toast.error(error?.message ?? "Something went wrong", {

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

@@ -4,10 +4,10 @@ import { getServerSession } from "next-auth";
 import { revalidatePath } from "next/cache";
 
 import { authOptions } from "@formbricks/lib/authOptions";
-import { getResponses } from "@formbricks/lib/response/service";
+import { getResponseCountBySurveyId, getResponses, getSurveySummary } from "@formbricks/lib/response/service";
 import { canUserAccessSurvey } from "@formbricks/lib/survey/auth";
 import { AuthorizationError } from "@formbricks/types/errors";
-import { TResponse, TResponseFilterCriteria } from "@formbricks/types/responses";
+import { TResponse, TResponseFilterCriteria, TSurveySummary } from "@formbricks/types/responses";
 
 export default async function revalidateSurveyIdPath(environmentId: string, surveyId: string) {
   revalidatePath(`/environments/${environmentId}/surveys/${surveyId}`);
@@ -45,3 +45,29 @@ export async function getResponsesAction(
   const responses = await getResponses(surveyId, page, batchSize, filterCriteria);
   return responses;
 }
+
+export const getSurveySummaryAction = async (
+  surveyId: string,
+  filterCriteria?: TResponseFilterCriteria
+): Promise<TSurveySummary> => {
+  const session = await getServerSession(authOptions);
+  if (!session) throw new AuthorizationError("Not authorized");
+
+  const isAuthorized = await canUserAccessSurvey(session.user.id, surveyId);
+  if (!isAuthorized) throw new AuthorizationError("Not authorized");
+
+  return await getSurveySummary(surveyId, filterCriteria);
+};
+
+export const getResponseCountAction = async (
+  surveyId: string,
+  filters?: TResponseFilterCriteria
+): Promise<number> => {
+  const session = await getServerSession(authOptions);
+  if (!session) throw new AuthorizationError("Not authorized");
+
+  const isAuthorized = await canUserAccessSurvey(session.user.id, surveyId);
+  if (!isAuthorized) throw new AuthorizationError("Not authorized");
+
+  return await getResponseCountBySurveyId(surveyId, filters);
+};

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

@@ -1,5 +1,5 @@
 import revalidateSurveyIdPath from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/actions";
-import { InboxStackIcon, PresentationChartLineIcon } from "@heroicons/react/24/solid";
+import { InboxIcon, PresentationIcon } from "lucide-react";
 import Link from "next/link";
 
 import { cn } from "@formbricks/lib/cn";
@@ -8,20 +8,26 @@ interface SurveyResultsTabProps {
   activeId: string;
   environmentId: string;
   surveyId: string;
+  responseCount: number | null;
 }
 
-export default function SurveyResultsTab({ activeId, environmentId, surveyId }: SurveyResultsTabProps) {
+export default function SurveyResultsTab({
+  activeId,
+  environmentId,
+  surveyId,
+  responseCount,
+}: SurveyResultsTabProps) {
   const tabs = [
     {
       id: "summary",
       label: "Summary",
-      icon: <PresentationChartLineIcon />,
+      icon: <PresentationIcon className="h-5 w-5" />,
       href: `/environments/${environmentId}/surveys/${surveyId}/summary?referer=true`,
     },
     {
       id: "responses",
-      label: "Responses",
-      icon: <InboxStackIcon />,
+      label: `Responses ${responseCount !== null ? `(${responseCount})` : ""}`,
+      icon: <InboxIcon className="h-5 w-5" />,
       href: `/environments/${environmentId}/surveys/${surveyId}/responses?referer=true`,
     },
   ];

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/data.ts

@@ -1,19 +0,0 @@
-import { getDisplayCountBySurveyId } from "@formbricks/lib/display/service";
-import { getResponses } from "@formbricks/lib/response/service";
-import { getSurvey } from "@formbricks/lib/survey/service";
-import { getTeamByEnvironmentId } from "@formbricks/lib/team/service";
-
-export const getAnalysisData = async (surveyId: string, environmentId: string) => {
-  const [survey, team, responses, displayCount] = await Promise.all([
-    getSurvey(surveyId),
-    getTeamByEnvironmentId(environmentId),
-    getResponses(surveyId),
-    getDisplayCountBySurveyId(surveyId),
-  ]);
-  if (!survey) throw new Error(`Survey not found: ${surveyId}`);
-  if (!team) throw new Error(`Team not found for environment: ${environmentId}`);
-  if (survey.environmentId !== environmentId) throw new Error(`Survey not found: ${surveyId}`);
-  const responseCount = responses.length;
-
-  return { responses, responseCount, survey, displayCount };
-};

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

@@ -1,7 +1,10 @@
 "use client";
 
 import { useResponseFilter } from "@/app/(app)/environments/[environmentId]/components/ResponseFilterContext";
-import { getResponsesAction } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/actions";
+import {
+  getResponseCountAction,
+  getResponsesAction,
+} from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/actions";
 import SurveyResultsTabs from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/SurveyResultsTabs";
 import ResponseTimeline from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTimeline";
 import CustomFilter from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/CustomFilter";
@@ -47,6 +50,7 @@ const ResponsePage = ({
   responsesPerPage,
   membershipRole,
 }: ResponsePageProps) => {
+  const [responseCount, setResponseCount] = useState<number | null>(null);
   const [responses, setResponses] = useState<TResponse[]>([]);
   const [page, setPage] = useState<number>(1);
   const [hasMore, setHasMore] = useState<boolean>(true);
@@ -64,6 +68,27 @@ const ResponsePage = ({
     return checkForRecallInHeadline(survey);
   }, [survey]);
 
+  const fetchNextPage = useCallback(async () => {
+    const newPage = page + 1;
+    const newResponses = await getResponsesAction(surveyId, newPage, responsesPerPage, filters);
+    if (newResponses.length === 0 || newResponses.length < responsesPerPage) {
+      setHasMore(false);
+    }
+    setResponses([...responses, ...newResponses]);
+    setPage(newPage);
+  }, [filters, page, responses, responsesPerPage, surveyId]);
+
+  const deleteResponse = (responseId: string) => {
+    setResponses(responses.filter((response) => response.id !== responseId));
+    if (responseCount) {
+      setResponseCount(responseCount - 1);
+    }
+  };
+
+  const updateResponse = (responseId: string, updatedResponse: TResponse) => {
+    setResponses(responses.map((response) => (response.id === responseId ? updatedResponse : response)));
+  };
+
   useEffect(() => {
     if (!searchParams?.get("referer")) {
       resetState();
@@ -81,27 +106,18 @@ const ResponsePage = ({
     fetchInitialResponses();
   }, [surveyId, filters, responsesPerPage]);
 
-  const fetchNextPage = useCallback(async () => {
-    const newPage = page + 1;
-    const newResponses = await getResponsesAction(surveyId, newPage, responsesPerPage, filters);
-    if (newResponses.length === 0 || newResponses.length < responsesPerPage) {
-      setHasMore(false);
-    }
-    setResponses([...responses, ...newResponses]);
-    setPage(newPage);
-  }, [filters, page, responses, responsesPerPage, surveyId]);
-
-  const deleteResponse = (responseId: string) => {
-    setResponses(responses.filter((response) => response.id !== responseId));
-  };
-
-  const updateResponse = (responseId: string, updatedResponse: TResponse) => {
-    setResponses(responses.map((response) => (response.id === responseId ? updatedResponse : response)));
-  };
+  useEffect(() => {
+    const handleResponsesCount = async () => {
+      const responseCount = await getResponseCountAction(surveyId, filters);
+      setResponseCount(responseCount);
+    };
+    handleResponsesCount();
+  }, [filters, surveyId]);
 
   useEffect(() => {
     setPage(1);
     setHasMore(true);
+    setResponses([]);
   }, [filters]);
 
   return (
@@ -119,7 +135,12 @@ const ResponsePage = ({
         <CustomFilter environmentTags={environmentTags} attributes={attributes} survey={survey} />
         <ResultsShareButton survey={survey} webAppUrl={webAppUrl} product={product} user={user} />
       </div>
-      <SurveyResultsTabs activeId="responses" environmentId={environment.id} surveyId={surveyId} />
+      <SurveyResultsTabs
+        activeId="responses"
+        environmentId={environment.id}
+        surveyId={surveyId}
+        responseCount={responseCount}
+      />
       <ResponseTimeline
         environment={environment}
         surveyId={surveyId}

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

@@ -3,6 +3,8 @@
 import EmptyInAppSurveys from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/EmptyInAppSurveys";
 import React, { useEffect, useRef } from "react";
 
+import { useMembershipRole } from "@formbricks/lib/membership/hooks/useMembershipRole";
+import { getAccessFlags } from "@formbricks/lib/membership/utils";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TResponse } from "@formbricks/types/responses";
 import { TSurvey } from "@formbricks/types/surveys";
@@ -60,6 +62,9 @@ export default function ResponseTimeline({
     };
   }, [fetchNextPage, hasMore]);
 
+  const { membershipRole } = useMembershipRole(survey.environmentId);
+  const { isViewer } = getAccessFlags(membershipRole);
+
   return (
     <div className="space-y-4">
       {survey.type === "web" && responses.length === 0 && !environment.widgetSetupCompleted ? (
@@ -84,6 +89,7 @@ export default function ResponseTimeline({
                   environment={environment}
                   updateResponse={updateResponse}
                   deleteResponse={deleteResponse}
+                  isViewer={isViewer}
                 />
               </div>
             );

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/actions.ts

@@ -9,6 +9,7 @@ import { authOptions } from "@formbricks/lib/authOptions";
 import { sendEmbedSurveyPreviewEmail } from "@formbricks/lib/emails/emails";
 import { canUserAccessSurvey } from "@formbricks/lib/survey/auth";
 import { getSurvey, updateSurvey } from "@formbricks/lib/survey/service";
+import { formatSurveyDateFields } from "@formbricks/lib/survey/util";
 import { AuthenticationError, AuthorizationError, ResourceNotFoundError } from "@formbricks/types/errors";
 
 type TSendEmailActionArgs = {
@@ -54,7 +55,7 @@ export async function generateResultShareUrlAction(surveyId: string): Promise<st
     20
   )();
 
-  await updateSurvey({ ...survey, resultShareKey });
+  await updateSurvey({ ...formatSurveyDateFields(survey), resultShareKey });
 
   return resultShareKey;
 }
@@ -86,7 +87,7 @@ export async function deleteResultShareUrlAction(surveyId: string): Promise<void
     throw new ResourceNotFoundError("Survey", surveyId);
   }
 
-  await updateSurvey({ ...survey, resultShareKey: null });
+  await updateSurvey({ ...formatSurveyDateFields(survey), resultShareKey: null });
 }
 
 export const getEmailHtmlAction = async (surveyId: string) => {

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

@@ -1,34 +1,17 @@
 import Headline from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/Headline";
 import { questionTypes } from "@/app/lib/questions";
-import { InboxStackIcon } from "@heroicons/react/24/solid";
-import { useMemo } from "react";
+import { InboxIcon } from "lucide-react";
 
-import type { TSurveyQuestionSummary } from "@formbricks/types/surveys";
-import { TSurveyCTAQuestion } from "@formbricks/types/surveys";
+import { TSurveySummaryCta } from "@formbricks/types/responses";
 import { ProgressBar } from "@formbricks/ui/ProgressBar";
 
 interface CTASummaryProps {
-  questionSummary: TSurveyQuestionSummary<TSurveyCTAQuestion>;
-}
-
-interface ChoiceResult {
-  count: number;
-  percentage: number;
+  questionSummary: TSurveySummaryCta;
 }
 
 export default function CTASummary({ questionSummary }: CTASummaryProps) {
   const questionTypeInfo = questionTypes.find((type) => type.id === questionSummary.question.type);
 
-  const ctr: ChoiceResult = useMemo(() => {
-    const clickedAbs = questionSummary.responses.filter((response) => response.value === "clicked").length;
-    const count = questionSummary.responses.length;
-    if (count === 0) return { count: 0, percentage: 0 };
-    return {
-      count: count,
-      percentage: clickedAbs / count,
-    };
-  }, [questionSummary]);
-
   return (
     <div className=" rounded-lg border border-slate-200 bg-slate-50 shadow-sm">
       <div className="space-y-2 px-4 pb-5 pt-6 md:px-6">
@@ -40,8 +23,8 @@ export default function CTASummary({ questionSummary }: CTASummaryProps) {
             {questionTypeInfo ? questionTypeInfo.label : "Unknown Question Type"}
           </div>
           <div className=" flex items-center rounded-lg bg-slate-100 p-2">
-            <InboxStackIcon className="mr-2 h-4 w-4 " />
-            {ctr.count} responses
+            <InboxIcon className="mr-2 h-4 w-4 " />
+            {questionSummary.responseCount} responses
           </div>
           {!questionSummary.question.required && (
             <div className="flex items-center  rounded-lg bg-slate-100 p-2">Optional</div>
@@ -54,15 +37,15 @@ export default function CTASummary({ questionSummary }: CTASummaryProps) {
             <p className="font-semibold text-slate-700">Clickthrough Rate (CTR)</p>
             <div>
               <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
-                {Math.round(ctr.percentage * 100)}%
+                {Math.round(questionSummary.ctr.percentage)}%
               </p>
             </div>
           </div>
           <p className="flex w-32 items-end justify-end text-slate-600">
-            {ctr.count} {ctr.count === 1 ? "response" : "responses"}
+            {questionSummary.ctr.count} {questionSummary.ctr.count === 1 ? "response" : "responses"}
           </p>
         </div>
-        <ProgressBar barColor="bg-brand" progress={ctr.percentage} />
+        <ProgressBar barColor="bg-brand" progress={questionSummary.ctr.percentage / 100} />
       </div>
     </div>
   );

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

@@ -1,19 +1,16 @@
 import Headline from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/Headline";
 import { questionTypes } from "@/app/lib/questions";
-import { InboxStackIcon } from "@heroicons/react/24/solid";
-import Link from "next/link";
+import { InboxIcon } from "lucide-react";
 
-import { getPersonIdentifier } from "@formbricks/lib/person/util";
-import { timeSince } from "@formbricks/lib/time";
-import { TSurveyCalQuestion, TSurveyQuestionSummary } from "@formbricks/types/surveys";
-import { PersonAvatar } from "@formbricks/ui/Avatars";
+import { TSurveySummaryCal } from "@formbricks/types/responses";
+import { ProgressBar } from "@formbricks/ui/ProgressBar";
 
 interface CalSummaryProps {
-  questionSummary: TSurveyQuestionSummary<TSurveyCalQuestion>;
+  questionSummary: TSurveySummaryCal;
   environmentId: string;
 }
 
-export default function CalSummary({ questionSummary, environmentId }: CalSummaryProps) {
+export default function CalSummary({ questionSummary }: CalSummaryProps) {
   const questionTypeInfo = questionTypes.find((type) => type.id === questionSummary.question.type);
 
   return (
@@ -27,51 +24,47 @@ export default function CalSummary({ questionSummary, environmentId }: CalSummar
             {questionTypeInfo ? questionTypeInfo.label : "Unknown Question Type"} Question
           </div>
           <div className=" flex items-center rounded-lg bg-slate-100 p-2">
-            <InboxStackIcon className="mr-2 h-4 w-4" />
-            {questionSummary.responses.length} Responses
+            <InboxIcon className="mr-2 h-4 w-4" />
+            {questionSummary.responseCount} Responses
           </div>
+          {!questionSummary.question.required && (
+            <div className="flex items-center  rounded-lg bg-slate-100 p-2">Optional</div>
+          )}
         </div>
       </div>
-      <div className="rounded-b-lg bg-white ">
-        <div className="grid h-10 grid-cols-4 items-center border-y border-slate-200 bg-slate-100 text-sm font-bold text-slate-600">
-          <div className="pl-4 md:pl-6">User</div>
-          <div className="col-span-2 pl-4 md:pl-6">Response</div>
-          <div className="px-4 md:px-6">Time</div>
-        </div>
-        {questionSummary.responses.map((response) => {
-          const displayIdentifier = response.person ? getPersonIdentifier(response.person) : null;
-          return (
-            <div
-              key={response.id}
-              className="grid  grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 md:text-base">
-              <div className="pl-4 md:pl-6">
-                {response.person ? (
-                  <Link
-                    className="ph-no-capture group flex items-center"
-                    href={`/environments/${environmentId}/people/${response.person.id}`}>
-                    <div className="hidden md:flex">
-                      <PersonAvatar personId={response.person.id} />
-                    </div>
-                    <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
-                      {displayIdentifier}
-                    </p>
-                  </Link>
-                ) : (
-                  <div className="group flex items-center">
-                    <div className="hidden md:flex">
-                      <PersonAvatar personId="anonymous" />
-                    </div>
-                    <p className="break-all text-slate-600 md:ml-2">Anonymous</p>
-                  </div>
-                )}
+      <div className="space-y-5 rounded-b-lg bg-white px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
+        <div>
+          <div className="text flex justify-between px-2 pb-2">
+            <div className="mr-8 flex space-x-1">
+              <p className="font-semibold text-slate-700">Booked</p>
+              <div>
+                <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
+                  {Math.round(questionSummary.booked.percentage)}%
+                </p>
               </div>
-              <div className="ph-no-capture col-span-2 whitespace-pre-wrap pl-6 font-semibold capitalize">
-                {response.value}
-              </div>
-              <div className="px-4 text-slate-500 md:px-6">{timeSince(response.updatedAt.toISOString())}</div>
             </div>
-          );
-        })}
+            <p className="flex w-32 items-end justify-end text-slate-600">
+              {questionSummary.booked.count} {questionSummary.booked.count === 1 ? "response" : "responses"}
+            </p>
+          </div>
+          <ProgressBar barColor="bg-brand" progress={questionSummary.booked.percentage / 100} />
+        </div>
+        <div>
+          <div className="text flex justify-between px-2 pb-2">
+            <div className="mr-8 flex space-x-1">
+              <p className="font-semibold text-slate-700">Dismissed</p>
+              <div>
+                <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
+                  {Math.round(questionSummary.skipped.percentage)}%
+                </p>
+              </div>
+            </div>
+            <p className="flex w-32 items-end justify-end text-slate-600">
+              {questionSummary.skipped.count} {questionSummary.skipped.count === 1 ? "response" : "responses"}
+            </p>
+          </div>
+          <ProgressBar barColor="bg-brand" progress={questionSummary.skipped.percentage / 100} />
+        </div>
       </div>
     </div>
   );

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

@@ -1,54 +1,30 @@
 import Headline from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/Headline";
 import { questionTypes } from "@/app/lib/questions";
-import { InboxStackIcon } from "@heroicons/react/24/solid";
-import { useMemo } from "react";
+import { InboxIcon } from "lucide-react";
 
-import type { TSurveyQuestionSummary } from "@formbricks/types/surveys";
-import { TSurveyConsentQuestion } from "@formbricks/types/surveys";
+import { TSurveySummaryConsent } from "@formbricks/types/responses";
 import { ProgressBar } from "@formbricks/ui/ProgressBar";
 
 interface ConsentSummaryProps {
-  questionSummary: TSurveyQuestionSummary<TSurveyConsentQuestion>;
-}
-
-interface ChoiceResult {
-  count: number;
-  acceptedCount: number;
-  acceptedPercentage: number;
-  dismissedCount: number;
-  dismissedPercentage: number;
+  questionSummary: TSurveySummaryConsent;
 }
 
 export default function ConsentSummary({ questionSummary }: ConsentSummaryProps) {
   const questionTypeInfo = questionTypes.find((type) => type.id === questionSummary.question.type);
 
-  const ctr: ChoiceResult = useMemo(() => {
-    const total = questionSummary.responses.length;
-    const clickedAbs = questionSummary.responses.filter((response) => response.value !== "dismissed").length;
-    if (total === 0) {
-      return { count: 0, acceptedCount: 0, acceptedPercentage: 0, dismissedCount: 0, dismissedPercentage: 0 };
-    }
-    return {
-      count: total,
-      acceptedCount: clickedAbs,
-      acceptedPercentage: clickedAbs / total,
-      dismissedCount: total - clickedAbs,
-      dismissedPercentage: 1 - clickedAbs / total,
-    };
-  }, [questionSummary]);
-
   return (
     <div className=" rounded-lg border border-slate-200 bg-slate-50 shadow-sm">
       <div className="space-y-2 px-4 pb-5 pt-6 md:px-6">
         <Headline headline={questionSummary.question.headline} />
+
         <div className="flex space-x-2 text-xs font-semibold text-slate-600 md:text-sm">
           <div className=" flex items-center rounded-lg bg-slate-100 p-2">
             {questionTypeInfo && <questionTypeInfo.icon className="mr-2 h-4 w-4 " />}
             {questionTypeInfo ? questionTypeInfo.label : "Unknown Question Type"}
           </div>
           <div className=" flex items-center rounded-lg bg-slate-100 p-2">
-            <InboxStackIcon className="mr-2 h-4 w-4 " />
-            {ctr.count} responses
+            <InboxIcon className="mr-2 h-4 w-4 " />
+            {questionSummary.responseCount} responses
           </div>
           {!questionSummary.question.required && (
             <div className="flex items-center  rounded-lg bg-slate-100 p-2">Optional</div>
@@ -62,15 +38,16 @@ export default function ConsentSummary({ questionSummary }: ConsentSummaryProps)
               <p className="font-semibold text-slate-700">Accepted</p>
               <div>
                 <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
-                  {Math.round(ctr.acceptedPercentage * 100)}%
+                  {Math.round(questionSummary.accepted.percentage)}%
                 </p>
               </div>
             </div>
             <p className="flex w-32 items-end justify-end text-slate-600">
-              {ctr.acceptedCount} {ctr.acceptedCount === 1 ? "response" : "responses"}
+              {questionSummary.accepted.count}{" "}
+              {questionSummary.accepted.count === 1 ? "response" : "responses"}
             </p>
           </div>
-          <ProgressBar barColor="bg-brand" progress={ctr.acceptedPercentage} />
+          <ProgressBar barColor="bg-brand" progress={questionSummary.accepted.percentage / 100} />
         </div>
         <div>
           <div className="text flex justify-between px-2 pb-2">
@@ -78,15 +55,16 @@ export default function ConsentSummary({ questionSummary }: ConsentSummaryProps)
               <p className="font-semibold text-slate-700">Dismissed</p>
               <div>
                 <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
-                  {Math.round(ctr.dismissedPercentage * 100)}%
+                  {Math.round(questionSummary.dismissed.percentage)}%
                 </p>
               </div>
             </div>
             <p className="flex w-32 items-end justify-end text-slate-600">
-              {ctr.dismissedCount} {ctr.dismissedCount === 1 ? "response" : "responses"}
+              {questionSummary.dismissed.count}{" "}
+              {questionSummary.dismissed.count === 1 ? "response" : "responses"}
             </p>
           </div>
-          <ProgressBar barColor="bg-brand" progress={ctr.dismissedPercentage} />
+          <ProgressBar barColor="bg-brand" progress={questionSummary.dismissed.percentage / 100} />
         </div>
       </div>
     </div>

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

@@ -1,28 +1,21 @@
 import Headline from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/Headline";
 import { questionTypes } from "@/app/lib/questions";
-import { InboxStackIcon } from "@heroicons/react/24/solid";
+import { InboxIcon } from "lucide-react";
 import Link from "next/link";
-import { useState } from "react";
 
 import { getPersonIdentifier } from "@formbricks/lib/person/util";
 import { timeSince } from "@formbricks/lib/time";
 import { formatDateWithOrdinal } from "@formbricks/lib/utils/datetime";
-import type { TSurveyDateQuestion, TSurveyQuestionSummary } from "@formbricks/types/surveys";
+import { TSurveySummaryDate } from "@formbricks/types/responses";
 import { PersonAvatar } from "@formbricks/ui/Avatars";
 
 interface DateQuestionSummary {
-  questionSummary: TSurveyQuestionSummary<TSurveyDateQuestion>;
+  questionSummary: TSurveySummaryDate;
   environmentId: string;
-  responsesPerPage: number;
 }
 
-export default function DateQuestionSummary({
-  questionSummary,
-  environmentId,
-  responsesPerPage,
-}: DateQuestionSummary) {
+export default function DateQuestionSummary({ questionSummary, environmentId }: DateQuestionSummary) {
   const questionTypeInfo = questionTypes.find((type) => type.id === questionSummary.question.type);
-  const [displayCount, setDisplayCount] = useState(responsesPerPage);
 
   return (
     <div className="rounded-lg border border-slate-200 bg-slate-50 shadow-sm">
@@ -35,8 +28,8 @@ export default function DateQuestionSummary({
             {questionTypeInfo ? questionTypeInfo.label : "Unknown Question Type"} Question
           </div>
           <div className=" flex items-center rounded-lg bg-slate-100 p-2">
-            <InboxStackIcon className="mr-2 h-4 w-4" />
-            {questionSummary.responses.length} Responses
+            <InboxIcon className="mr-2 h-4 w-4" />
+            {questionSummary.responseCount} Responses
           </div>
           {!questionSummary.question.required && (
             <div className="flex items-center  rounded-lg bg-slate-100 p-2">Optional</div>
@@ -49,51 +42,39 @@ export default function DateQuestionSummary({
           <div className="col-span-2 pl-4 md:pl-6">Response</div>
           <div className="px-4 md:px-6">Time</div>
         </div>
-        {questionSummary.responses.slice(0, displayCount).map((response) => {
-          const displayIdentifier = getPersonIdentifier(response.person!);
-          return (
-            <div
-              key={response.id}
-              className="grid grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 md:text-base">
-              <div className="pl-4 md:pl-6">
-                {response.person ? (
-                  <Link
-                    className="ph-no-capture group flex items-center"
-                    href={`/environments/${environmentId}/people/${response.person.id}`}>
-                    <div className="hidden md:flex">
-                      <PersonAvatar personId={response.person.id} />
-                    </div>
-                    <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
-                      {displayIdentifier}
-                    </p>
-                  </Link>
-                ) : (
-                  <div className="group flex items-center">
-                    <div className="hidden md:flex">
-                      <PersonAvatar personId="anonymous" />
-                    </div>
-                    <p className="break-all text-slate-600 md:ml-2">Anonymous</p>
+        {questionSummary.samples.map((response) => (
+          <div
+            key={response.id}
+            className="grid grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 md:text-base">
+            <div className="pl-4 md:pl-6">
+              {response.person ? (
+                <Link
+                  className="ph-no-capture group flex items-center"
+                  href={`/environments/${environmentId}/people/${response.person.id}`}>
+                  <div className="hidden md:flex">
+                    <PersonAvatar personId={response.person.id} />
                   </div>
-                )}
-              </div>
-              <div className="ph-no-capture col-span-2 whitespace-pre-wrap pl-6 font-semibold">
-                {formatDateWithOrdinal(new Date(response.value as string))}
-              </div>
-              <div className="px-4 text-slate-500 md:px-6">{timeSince(response.updatedAt.toISOString())}</div>
+                  <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
+                    {getPersonIdentifier(response.person)}
+                  </p>
+                </Link>
+              ) : (
+                <div className="group flex items-center">
+                  <div className="hidden md:flex">
+                    <PersonAvatar personId="anonymous" />
+                  </div>
+                  <p className="break-all text-slate-600 md:ml-2">Anonymous</p>
+                </div>
+              )}
+            </div>
+            <div className="ph-no-capture col-span-2 whitespace-pre-wrap pl-6 font-semibold">
+              {formatDateWithOrdinal(new Date(response.value as string))}
+            </div>
+            <div className="px-4 text-slate-500 md:px-6">
+              {timeSince(new Date(response.updatedAt).toISOString())}
             </div>
-          );
-        })}
-
-        {displayCount < questionSummary.responses.length && (
-          <div className="my-1 flex justify-center">
-            <button
-              type="button"
-              onClick={() => setDisplayCount((prevCount) => prevCount + responsesPerPage)}
-              className="my-2 flex h-8 items-center justify-center rounded-lg border border-slate-300 bg-white px-3 text-sm text-slate-500 hover:bg-slate-100 hover:text-slate-700">
-              Show more
-            </button>
           </div>
-        )}
+        ))}
       </div>
     </div>
   );

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

@@ -1,18 +1,16 @@
 import Headline from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/Headline";
 import { questionTypes } from "@/app/lib/questions";
-import { InboxStackIcon } from "@heroicons/react/24/solid";
-import { DownloadIcon, FileIcon } from "lucide-react";
+import { DownloadIcon, FileIcon, InboxIcon } from "lucide-react";
 import Link from "next/link";
 
 import { getPersonIdentifier } from "@formbricks/lib/person/util";
 import { getOriginalFileNameFromUrl } from "@formbricks/lib/storage/utils";
 import { timeSince } from "@formbricks/lib/time";
-import type { TSurveyQuestionSummary } from "@formbricks/types/surveys";
-import { TSurveyFileUploadQuestion } from "@formbricks/types/surveys";
+import { TSurveySummaryFileUpload } from "@formbricks/types/responses";
 import { PersonAvatar } from "@formbricks/ui/Avatars";
 
 interface FileUploadSummaryProps {
-  questionSummary: TSurveyQuestionSummary<TSurveyFileUploadQuestion>;
+  questionSummary: TSurveySummaryFileUpload;
   environmentId: string;
 }
 
@@ -30,8 +28,8 @@ export default function FileUploadSummary({ questionSummary, environmentId }: Fi
             {questionTypeInfo ? questionTypeInfo.label : "Unknown Question Type"} Question
           </div>
           <div className=" flex items-center rounded-lg bg-slate-100 p-2">
-            <InboxStackIcon className="mr-2 h-4 w-4" />
-            {questionSummary.responses.length} Responses
+            <InboxIcon className="mr-2 h-4 w-4" />
+            {questionSummary.responseCount} Responses
           </div>
           {!questionSummary.question.required && (
             <div className="flex items-center  rounded-lg bg-slate-100 p-2">Optional</div>
@@ -44,80 +42,72 @@ export default function FileUploadSummary({ questionSummary, environmentId }: Fi
           <div className="col-span-2 pl-4 md:pl-6">Response</div>
           <div className="px-4 md:px-6">Time</div>
         </div>
-        {questionSummary.responses.map((response) => {
-          const displayIdentifier = response.person ? getPersonIdentifier(response.person) : null;
-
-          return (
-            <div
-              key={response.id}
-              className="grid grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 md:text-base">
-              <div className="pl-4 md:pl-6">
-                {response.person ? (
-                  <Link
-                    className="ph-no-capture group flex items-center"
-                    href={`/environments/${environmentId}/people/${response.person.id}`}>
-                    <div className="hidden md:flex">
-                      <PersonAvatar personId={response.person.id} />
-                    </div>
-                    <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
-                      {displayIdentifier}
-                    </p>
-                  </Link>
-                ) : (
-                  <div className="group flex items-center">
-                    <div className="hidden md:flex">
-                      <PersonAvatar personId="anonymous" />
-                    </div>
-                    <p className="break-all text-slate-600 md:ml-2">Anonymous</p>
+        {questionSummary.files.map((response) => (
+          <div
+            key={response.id}
+            className="grid grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 md:text-base">
+            <div className="pl-4 md:pl-6">
+              {response.person ? (
+                <Link
+                  className="ph-no-capture group flex items-center"
+                  href={`/environments/${environmentId}/people/${response.person.id}`}>
+                  <div className="hidden md:flex">
+                    <PersonAvatar personId={response.person.id} />
                   </div>
-                )}
-              </div>
+                  <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
+                    {getPersonIdentifier(response.person)}
+                  </p>
+                </Link>
+              ) : (
+                <div className="group flex items-center">
+                  <div className="hidden md:flex">
+                    <PersonAvatar personId="anonymous" />
+                  </div>
+                  <p className="break-all text-slate-600 md:ml-2">Anonymous</p>
+                </div>
+              )}
+            </div>
 
-              <div className="col-span-2 grid">
-                {response.value === "skipped" && (
+            <div className="col-span-2 grid">
+              {Array.isArray(response.value) &&
+                (response.value.length > 0 ? (
+                  response.value.map((fileUrl, index) => {
+                    const fileName = getOriginalFileNameFromUrl(fileUrl);
+
+                    return (
+                      <div className="relative m-2 rounded-lg bg-slate-200" key={fileUrl}>
+                        <a
+                          href={fileUrl as string}
+                          key={index}
+                          download={fileName}
+                          target="_blank"
+                          rel="noopener noreferrer">
+                          <div className="absolute right-0 top-0 m-2">
+                            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-50 hover:bg-white">
+                              <DownloadIcon className="h-6 text-slate-500" />
+                            </div>
+                          </div>
+                        </a>
+
+                        <div className="flex flex-col items-center justify-center p-2">
+                          <FileIcon className="h-6 text-slate-500" />
+                          <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">{fileName}</p>
+                        </div>
+                      </div>
+                    );
+                  })
+                ) : (
                   <div className="flex w-full flex-col items-center justify-center p-2">
                     <p className="mt-2 text-sm font-semibold text-slate-500 dark:text-slate-400">skipped</p>
                   </div>
-                )}
-
-                {Array.isArray(response.value) &&
-                  (response.value.length > 0 ? (
-                    response.value.map((fileUrl, index) => {
-                      const fileName = getOriginalFileNameFromUrl(fileUrl);
-
-                      return (
-                        <div className="relative m-2 rounded-lg bg-slate-200" key={fileUrl}>
-                          <a
-                            href={fileUrl as string}
-                            key={index}
-                            download={fileName}
-                            target="_blank"
-                            rel="noopener noreferrer">
-                            <div className="absolute right-0 top-0 m-2">
-                              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-50 hover:bg-white">
-                                <DownloadIcon className="h-6 text-slate-500" />
-                              </div>
-                            </div>
-                          </a>
-
-                          <div className="flex flex-col items-center justify-center p-2">
-                            <FileIcon className="h-6 text-slate-500" />
-                            <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">{fileName}</p>
-                          </div>
-                        </div>
-                      );
-                    })
-                  ) : (
-                    <div className="flex w-full flex-col items-center justify-center p-2">
-                      <p className="mt-2 text-sm font-semibold text-slate-500 dark:text-slate-400">skipped</p>
-                    </div>
-                  ))}
-              </div>
-
-              <div className="px-4 text-slate-500 md:px-6">{timeSince(response.updatedAt.toISOString())}</div>
+                ))}
             </div>
-          );
-        })}
+
+            <div className="px-4 text-slate-500 md:px-6">
+              {timeSince(new Date(response.updatedAt).toISOString())}
+            </div>
+          </div>
+        ))}
       </div>
     </div>
   );