feat: avatar upload (#1546)

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

.env.example

@@ -10,18 +10,13 @@
 
 WEBAPP_URL=http://localhost:3000
 
-SURVEY_BASE_URL=http://localhost:3000/s
-
 # Set this if you want to have a shorter link for surveys
-SHORT_SURVEY_BASE_URL=
+SHORT_URL_BASE=
 
 # Encryption keys
 # Please set both for now, we will change this in the future
 
-# You can use: `openssl rand -base64 16` to generate one
-FORMBRICKS_ENCRYPTION_KEY=
-
-# You can use: `openssl rand -base64 24` to generate one
+# You can use: `openssl rand -hex 32` to generate one
 ENCRYPTION_KEY=
 
 ##############
@@ -35,7 +30,7 @@ DATABASE_URL='postgresql://postgres:postgres@localhost:5432/formbricks?schema=pu
 ###############
 
 # @see: https://next-auth.js.org/configuration/options#nextauth_secret
-# You can use: `openssl rand -base64 32` to generate one
+# You can use: `openssl rand -hex 32` to generate one
 NEXTAUTH_SECRET=RANDOM_STRING
 
 # Set this to your public-facing URL, e.g., https://example.com
@@ -129,4 +124,7 @@ GOOGLE_SHEETS_REDIRECT_URL=
 # Oauth credentials for Airtable integration 
 AIR_TABLE_CLIENT_ID=
 
+# Enterprise License Key
+ENTERPRISE_LICENSE_KEY=
+
 */

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

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

.github/workflows/build-web.yml

@@ -27,7 +27,7 @@ jobs:
 
       - name: Generate Random NEXTAUTH_SECRET
         run: |
-          SECRET=$(openssl rand -base64 24)
+          SECRET=$(openssl rand -hex 32)
           echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
 
       - name: Build Formbricks-web

.github/workflows/cron-reportUsageToStripe.yml

@@ -0,0 +1,22 @@
+name: Cron - reportUsageToStripe
+
+on:
+  # "Scheduled workflows run on the latest commit on the default or base branch."
+  # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
+  schedule:
+    # This will run the job at 23:00 UTC every day of every month.
+    - cron: "0 21 * * *"
+jobs:
+  cron-reportUsageToStripe:
+    env:
+      APP_URL: ${{ secrets.APP_URL }}
+      API_KEY: ${{ secrets.API_KEY }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: cURL request
+        if: ${{ env.APP_URL && env.API_KEY }}
+        run: |
+          curl ${{ env.APP_URL }}/api/cron/report-usage \
+            -X GET \
+            -H 'x-api-key: ${{ env.API_KEY }}' \
+            --fail

.github/workflows/lint.yml

@@ -27,7 +27,7 @@ jobs:
 
       - name: Generate Random NEXTAUTH_SECRET
         run: |
-          SECRET=$(openssl rand -base64 24)
+          SECRET=$(openssl rand -hex 32)
           echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
 
       - name: Lint

.github/workflows/pr.yml

@@ -24,7 +24,7 @@ jobs:
 
   build:
     name: Build Formbricks-web
-    uses: ./.github/workflows/build.yml
+    uses: ./.github/workflows/build-web.yml
     secrets: inherit
 
   required:

.github/workflows/release-docker.yml

@@ -16,12 +16,12 @@ jobs:
     steps:
       - name: Generate Random NEXTAUTH_SECRET
         run: |
-          SECRET=$(openssl rand -hex 16)
+          SECRET=$(openssl rand -hex 32)
           echo "NEXTAUTH_SECRET=$SECRET" >> $GITHUB_ENV
 
-      - name: Generate Random NEXTAUTH_SECRET
+      - name: Generate Random ENCRYPTION_KEY
         run: |
-          SECRET=$(openssl rand -base64 24)
+          SECRET=$(openssl rand -hex 32)
           echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
 
       - name: Checkout Repo
@@ -55,3 +55,4 @@ jobs:
           build-args: |
             NEXTAUTH_SECRET=${{ env.NEXTAUTH_SECRET }}
             DATABASE_URL=${{ env.DATABASE_URL }}
+            ENCRYPTION_KEY=${{ env.ENCRYPTION_KEY }}

.gitpod.yml

@@ -10,7 +10,7 @@ tasks:
       gp sync-await init && 
       turbo --filter "@formbricks/demo" go
 
-  - name : website
+  - name: website
     command: gp sync-await init && turbo --filter "@formbricks/formbricks-com" dev
 
   - name: Init Formbricks
@@ -34,12 +34,10 @@ tasks:
       cp .env.example .env &&
       sed -i -r "s#^(WEBAPP_URL=).*#\1 $(gp url 3000)#" .env &&
       sed -i -r "s#^(NEXTAUTH_URL=).*#\1 $(gp url 3000)#" .env &&
-      RANDOM_FORMBRICKS_ENCRYPTION_KEY=$(openssl rand -base64 16)
-      sed -i 's/^FORMBRICKS_ENCRYPTION_KEY=.*/FORMBRICKS_ENCRYPTION_KEY='"$RANDOM_FORMBRICKS_ENCRYPTION_KEY"'/' .env
-      RANDOM_ENCRYPTION_KEY=$(openssl rand -base64 24)
+      RANDOM_ENCRYPTION_KEY=$(openssl rand -hex 32)
       sed -i 's/^ENCRYPTION_KEY=.*/ENCRYPTION_KEY='"$RANDOM_ENCRYPTION_KEY"'/' .env
       turbo --filter "@formbricks/web" go
-      
+
 image:
   file: .gitpod.Dockerfile
 
@@ -62,7 +60,7 @@ ports:
   - port: 8025
     visibility: public
     onOpen: open-browser
-    
+
 github:
   prebuilds:
     master: true
@@ -77,4 +75,4 @@ vscode:
     - "dbaeumer.vscode-eslint"
     - "esbenp.prettier-vscode"
     - "Prisma.prisma"
-    - "yzhang.markdown-all-in-one"
+    - "yzhang.markdown-all-in-one"

CODE_OF_CONDUCT.md

@@ -0,0 +1,70 @@
+# Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to make participation in Formbricks and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment include:
+
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+- The use of sexualized language or imagery and unwelcome sexual attention or advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic address, without explicit permission
+- Other conduct that could reasonably be considered inappropriate in a professional setting
+
+## Our Responsibilities
+
+We as project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
+
+We have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned with this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project email address, posting via an official social media account, or acting as an appointed representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at hola@formbricks.com - all complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident.
+
+## Enforcement Guidelines
+
+Community managers will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public of private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior,  harassment of an individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the community.
+
+
+## Attribution
+
+This Code of Conduct is adapted from the Contributor Covenant, version 2.0, available at [https://www.contributor-covenant.org/version/2/0/code_of_conduct.html](https://www.contributor-covenant.org/version/2/0/code_of_conduct.html).

CONTRIBUTING.md

@@ -1,29 +1,34 @@
-We are so happy that you are interested in contributing to Formbricks 🤗
+# 🚀 Join the Formbricks Tribe! 🧱
 
-There are many ways to contribute to Formbricks with writing Issues, fixing bugs, building new features or updating the docs.
+First and foremost, we're absolutely thrilled that you're considering becoming a part of the Formbricks Tribe! 🤗
 
-# Issues
+Discover a myriad of ways to leave your mark on Formbricks — whether it's by squashing bugs, crafting new features, or enhancing our documentation.
 
-Spotted a bug? Has deployment gone wrong? Do you have user feedback? [Raise an issue](https://github.com/formbricks/formbricks/issues/new/choose) for the fastest response.
+## 🐛 Issue Hunters
 
-... or pick up and fix an issue if you want to do a Pull Request.
+Did you stumble upon a bug? Encountered a hiccup in deployment? Perhaps you have some user feedback to share? Your quickest route to help us out is by [raising an issue](https://github.com/formbricks/formbricks/issues/new/choose). We're on standby to respond swiftly. 
 
-# Feature requests
+## 💡 Feature Architects
 
-Raise an issue for these and tag it as an Enhancement. We love every idea. Please give us as much context on the why as possible.
+Are you brimming with brilliant ideas? For new features that can elevate Formbricks, create an issue and slap on the "Enhancement" tag. We adore every concept that you throw our way. Just make sure to provide us with the "why" behind your idea. We're all ears!
 
-# Creating a PR
+## 🛠 Crafting Pull Requests
 
-Please fork the repository, make your changes and create a new pull request if you want to make an update.
+Ready to dive into the code and make a real impact? Here's your path:
 
-If you want to speak to us before doing lots of work, please join our [Discord server](https://formbricks.com/discord) and tell us what you would like to work on - we're very responsive and friendly!
+1. **Read our Best Practices**: [It takes 5 minutes](https://formbricks.com/docs/contributing/how-we-code) but will help you save hours 🤓
 
-For QA of your Pull-Request, you can also get in touch with Matti on Discord. But we will also get to your PR without you taking additional action ;-)
+1. **Fork the Repository:** Fork our repository or use [Gitpod](https://formbricks.com/docs/contributing/gitpod)
 
-# Features
+2. **Tweak and Transform:** Work your coding magic and apply your changes.
 
-We are currently working on having a clear [Roadmap](https://github.com/orgs/formbricks/projects/1) for the next steps ahead.
+3. **Pull Request Act:** If you're ready to go, craft a new pull request closely following our PR template 🙏
 
-But you can also pick a feature that is not already on the roadmap if you think it creates a positive impact for Formbricks.
+Would you prefer a chat before you dive into a lot of work? Our [Discord server](https://formbricks.com/discord) is your harbor. Share your thoughts, and we'll meet you there with open arms. We're responsive and friendly, promise!
 
-If you are at all unsure, just raise it as an enhancement issue first and tell us that you like to work on it, and we'll very quickly respond.
+
+## 🚀 Aspiring Features
+
+If you spot a feature that isn't part of our official plan but could propel Formbricks forward, don't hesitate. Raise it as an enhancement issue, and let us know you're ready to take the lead. We'll be quick to respond.
+
+Together, let's craft the future of Formbricks, making it better, bolder, and more brilliant! 🚀🧱🌟

README.md

@@ -1,4 +1,7 @@
 <div id="top"></div>
+
+[<img src="ph.png">](https://www.producthunt.com/posts/formbricks)
+
 <p align="center">
 <a href="https://formbricks.com">
     <img width="120" alt="Open Source Experience Management Solution Qualtrics Alternative Logo" src="https://github.com/formbricks/formbricks/assets/72809645/0086704f-bee7-4d38-9cc8-fa42ee59e004">
@@ -6,7 +9,7 @@
   <h3 align="center">Formbricks</h3>
 
   <p align="center">
-    The Open Source Survey & Experience Management solution for fast growing companies
+    The Open Source Survey Toolbox
     <br />
     <a href="https://formbricks.com/">Website</a>  |  <a href="https://formbricks.com/discord">Join Discord community</a>
   </p>
@@ -34,14 +37,6 @@
   <a href="https://trendshift.io/repositories/2570" target="_blank"><img src="https://trendshift.io/api/badge/repositories/2570" alt="Trendshift Badge for formbricks/formbricks" style="width: 250px; height: 55px;" width="250" height="55"/></a>
 </p>
 
-<img width="1527" alt="formtribe hackathon" src="https://github.com/formbricks/formbricks/assets/72809645/addc3a5b-421c-4c8d-8be2-eedf087100ed">
-
-## 🔥 The FormTribe Hackathon is on!
-
-To celebrate Hacktoberfest, we've launched our FormTribe hackathon. Write code or perform non-code side quests to collect points and increase your chances of winning the MacBook Air M2!
-
-**Join lottery with a [single tweet!](https://formtribe.com). All info on [formtribe.com](https://formtribe.com)**
-
 ## ✨ About Formbricks
 
 <img width="1527" alt="formbricks-sneak" src="https://github-production-user-asset-6210df.s3.amazonaws.com/675065/249441967-ccb89ea3-82b4-4bf2-8d2c-528721ec313b.png">
@@ -52,11 +47,25 @@ Formbricks is your go-to solution for in-product micro-surveys that will superch
 
 ## 💪 Mission: Make customer-centric decisions based on data.
 
-Formbricks helps you apply best practices from data-driven work and experience management to make better business decisions. Ask users as they experience your product - and leverage a significantly higher conversion rate. Gather all insights you can - including partial submissions and build conviction for the next product decision. Better data, better business.
+Formbricks is a powerful tool for creating in-product micro-surveys - and leverage a significantly higher conversion rate. It allows you to gather valuable insights from your users, enabling you to make data-driven decisions that enhance your product's user experience. With Formbricks, you can create surveys with our no-code editor, choose from a variety of templates, target specific user groups, and much more.
+
+### Table of Contents
+
+- [Features](#features)
+- [Getting Started](#getting-started)
+  - [Cloud Version](#cloud-version)
+  - [Self-hosted Version](#self-hosted-version)
+  - [Development](#development)
+- [Contribution](#contribution)
+- [Contact](#contact-us)
+- [License](#license)
+- [Security](#security)
+
+<a id="features"></a>
 
 ### Features
 
-- 📲 Create **in-product surveys** with our no code editor with multiple question types.
+- 📲 Create **in-product surveys** with our no-code editor with multiple question types.
 - 📚 Choose from a variety of best-practice **templates**.
 - 👩🏻 Launch and **target your surveys to specific user groups** without changing your application code.
 - 🔗 Create shareable **link surveys**.
@@ -74,14 +83,20 @@ Formbricks helps you apply best practices from data-driven work and experience m
 - 🔒 [Auth.js](https://authjs.dev/)
 - 🧘‍♂️ [Zod](https://zod.dev/)
 
+<a id="getting-started"></a>
+
 ## 🚀 Getting started
 
 We've got several options depending on your need to help you quickly get started with Formbricks.
 
+<a id="cloud-version"></a>
+
 ### ☁️ Cloud Version
 
 Formbricks has a hosted cloud offering with a generous free plan to get you up and running as quickly as possible. To get started, please visit [formbricks.com](https://formbricks.com).
 
+<a id="self-hosted-version"></a>
+
 ### 🐳 Self-hosted version
 
 Formbricks is available Open-Source under AGPLv3 license. You can host Formbricks on your own servers using Docker without a subscription.
@@ -94,7 +109,7 @@ If you opt for self-hosting Formbricks, here are a few options to consider:
 
 To get started with self-hosting with Docker, take a look at our [self-hosting docs](https://formbricks.com/docs/self-hosting/deployment).
 
-#### Community managed One Click Hosting
+#### Community-managed One Click Hosting
 
 ##### Railway
 
@@ -102,6 +117,8 @@ You can deploy Formbricks on [Railway](https://railway.app) using the button bel
 
 [![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new/template/PPDzCd)
 
+<a id="development"></a>
+
 ### 👨‍💻 Development
 
 #### Prerequisites
@@ -124,6 +141,8 @@ To get started locally, we've got a [guide to help you](https://formbricks.com/d
 
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/formbricks/formbricks)
 
+<a id="contribution"></a>
+
 ## ✍️ Contribution
 
 We are very happy if you are interested in contributing to Formbricks 🤗
@@ -132,7 +151,7 @@ Here are a few options:
 
 - Star this repo.
 - Create issues every time you feel something is missing or goes wrong.
-- Upvote issues with 👍 reaction so we know what's the demand for a particular issue to prioritize it within the roadmap.
+- Upvote issues with 👍 reaction so we know what the demand for a particular issue is to prioritize it within the roadmap.
 
 Please check out [our contribution guide](https://formbricks.com/docs/contributing/introduction) and our [list of open issues](https://github.com/formbricks/formbricks/issues) for more information.
 
@@ -142,16 +161,22 @@ Please check out [our contribution guide](https://formbricks.com/docs/contributi
   <img src="https://contrib.rocks/image?repo=formbricks/formbricks" />
 </a>
 
+<a id="contact-us"></a>
+
 ## 📆 Contact us
 
 Let's have a chat about your survey needs and get you started.
 
 <a href="https://cal.com/johannes/onboarding?utm_source=banner&utm_campaign=oss"><img alt="Book us with Cal.com" src="https://cal.com/book-with-cal-dark.svg" /></a>
 
+<a id="license"></a>
+
 ## ⚖️ License
 
 Distributed under the AGPLv3 License. See [`LICENSE`](./LICENSE) for more information.
 
+<a id="security"></a>
+
 ## 🔒 Security
 
 We take security very seriously. If you come across any security vulnerabilities, please disclose them by sending an email to security@formbricks.com. We appreciate your help in making our platform as secure as possible and are committed to working with you to resolve any issues quickly and efficiently. See [`SECURITY.md`](./SECURITY.md) for more information.

apps/demo/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@formbricks/js": "workspace:*",
     "@heroicons/react": "^2.0.18",
-    "next": "13.5.5",
+    "next": "14.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

apps/formbricks-com/app/docs/actions/code/page.mdx

@@ -1,4 +1,4 @@
-export const meta = {
+export const metadata = {
   title: "Implementing Code Actions in Formbricks | Real-time User Action Tracking",
   description:
     "Dive into the world of Formbricks' code actions. Learn how to seamlessly integrate formbricks.track() method into your codebase, enabling real-time tracking of user actions like button clicks, visiting a specific URL. Up your survey game with precise and exact triggers.",

apps/formbricks-com/app/docs/actions/no-code/page.mdx

@@ -1,4 +1,4 @@
-export const meta = {
+export const metadata = {
   title: "Implementing No-Code Actions in Formbricks | Real-time User Action Tracking",
   description:
     "Discover the power of Formbricks' No-Code Actions. Easily set up triggers based on Page URL, innerText, and CSS Selectors without touching a line of code. Inccrease user engagement and get insights at precise moments in the user journey.",

apps/formbricks-com/app/docs/actions/why/page.mdx

@@ -1,4 +1,4 @@
-export const meta = {
+export const metadata = {
   title: "Using Actions in Formbricks | Fine-tuning User Moments",
   description:
     "Dive deep into how actions in Formbricks help products and teams to engage users at precise moments in their journey. Discover the power of actions, from coding to no-code setups, to refine user targeting and generate richer, more detailed user insights.",

apps/formbricks-com/app/docs/api/client/displays/page.mdx

@@ -1,6 +1,6 @@
 import { Fence } from "@/components/shared/Fence";
 
-export const meta = {
+export const metadata = {
   title: "Formbricks Public Client API Guide: Manage Survey Displays & Responses",
   description:
     "Dive deep into Formbricks' Public Client API designed for customisation. This comprehensive guide provides detailed instructions on how to mark surveys as displayed as well as responded for individual persons, ensuring seamless client-side interactions without compromising data security.",

apps/formbricks-com/app/docs/api/client/overview/page.mdx

@@ -1,4 +1,4 @@
-export const meta = {
+export const metadata = {
   title: "Formbricks API Overview: Public Client & Management API Breakdown",
   description:
     "Get a detailed understanding of Formbricks' dual API offerings: the unauthenticated Public Client API optimized for client-side tasks and the secured Management API for advanced account operations. Choose the perfect fit for your integration needs and ensure robust data handling",

apps/formbricks-com/app/docs/api/client/responses/page.mdx

@@ -1,6 +1,6 @@
 import { Fence } from "@/components/shared/Fence";
 
-export const meta = {
+export const metadata = {
   title: "Formbricks Responses API Documentation - Manage Your Survey Data Seamlessly",
   description:
     "Unlock the full potential of Formbricks' Responses API. From fetching to updating survey responses, our comprehensive guide helps you integrate and manage survey data efficiently without compromising security. Ideal for client-side interactions.",

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

@@ -1,6 +1,6 @@
 import { Fence } from "@/components/shared/Fence";
 
-export const meta = {
+export const metadata = {
   title: "Formbricks People API: Fetch or Create Person Overview",
   description:
     "Dive into Formbricks' People API within the Public Client API suite, designed to work without authentication requirements. Seamlessly fetch or create a person by their userId and environmentId, optimizing client-side interactions while maintaining data privacy.",

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

@@ -3,7 +3,7 @@ import Image from "next/image";
 import AddApiKey from "./add-api-key.webp";
 import ApiKeySecret from "./api-key-secret.webp";
 
-export const meta = {
+export const metadata = {
   title: "Formbricks API Key: Setup and Testing",
   description:
     "This guide provides step-by-step instructions to generate, store, and delete API keys, ensuring safe and authenticated access to your Formbricks account.",

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

@@ -1,6 +1,6 @@
 import { Fence } from "@/components/shared/Fence";
 
-export const meta = {
+export const metadata = {
   title: "Formbricks People API: Fetch or Create Person Overview",
   description:
     "Dive into Formbricks' People API within the Public Client API suite, designed to work without authentication requirements. Seamlessly fetch or create a person by their userId and environmentId, optimizing client-side interAttributes while maintaining data privacy.",

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

@@ -1,6 +1,6 @@
 import { Fence } from "@/components/shared/Fence";
 
-export const meta = {
+export const metadata = {
   title: "Formbricks People API: Fetch or Create Person Overview",
   description:
     "Dive into Formbricks' People API within the Public Client API suite, designed to work without authentication requirements. Seamlessly fetch or create a person by their userId and environmentId, optimizing client-side interactions while maintaining data privacy.",

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

@@ -1,6 +1,6 @@
 import { Fence } from "@/components/shared/Fence";
 
-export const meta = {
+export const metadata = {
   title: "Formbricks People API: Fetch or Create Person Overview",
   description:
     "Dive into Formbricks' People API within the Public Client API suite, designed to work without authentication requirements. Seamlessly fetch or create a person by their userId and environmentId, optimizing client-side interactions while maintaining data privacy.",

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

@@ -1,6 +1,6 @@
 import { Fence } from "@/components/shared/Fence";
 
-export const meta = {
+export const metadata = {
   title: "Formbricks Responses API Documentation - Manage Your Survey Data Seamlessly",
   description:
     "Unlock the full potential of Formbricks' Responses API. From fetching to updating survey responses, our comprehensive guide helps you integrate and manage survey data efficiently without compromising security. Ideal for client-side interactions.",

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

@@ -1,6 +1,6 @@
 import { Fence } from "@/components/shared/Fence";
 
-export const meta = {
+export const metadata = {
   title: "Formbricks Surveys API Documentation - How to Retrieve All Surveys",
   description:
     "Explore the comprehensive guide to the Formbricks Surveys API. Learn how to effectively retrieve all the surveys in your environment with the necessary headers and API key setup. Includes sample request and response formats.",

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

@@ -1,4 +1,4 @@
-export const meta = {
+export const metadata = {
   title: "Formbricks Webhook API Documentation - List, Retrieve, Create, and Delete Webhooks",
   description:
     "Explore the comprehensive guide to the Formbricks Webhooks API. This is all you need to interact and play with the Formbricks Webhooks and integrate them into any third party app of your choice",
@@ -20,7 +20,7 @@ This set of API can be used to
 - [Create Webhook](#create-webhook)
 - [Delete Webhook](#delete-webhook-by-id)
 
-And the detailed Webhook Paylod is elaborated [here](#webhook-payload).
+And the detailed Webhook Payload is elaborated [here](#webhook-payload).
 
 These APIs are designed to facilitate seamless integration of Formbricks with third-party systems. By making use of our webhook API, you can automate the process of sending data to these systems whenever significant events occur within your Formbricks environment.
 

apps/formbricks-com/app/docs/attributes/custom-attributes/page.mdx

@@ -1,4 +1,4 @@
-export const meta = {
+export const metadata = {
   title: "Guide for Setting Custom Attributes | Formbricks Documentation",
   description:
     "Learn how to set attributes in code using setAttribute function. Enhance user segmentation, target surveys effectively, and gather valuable insights for better decisions. Easily send user-specific details for better survey segmentation and gain deeper insights.",

apps/formbricks-com/app/docs/attributes/identify-users/page.mdx

@@ -1,4 +1,4 @@
-export const meta = {
+export const metadata = {
   title: "User Identification in Formbricks | Enhancing Survey Feedback",
   description:
     "A comprehensive guide on identifying users in Formbricks without compromising privacy. Learn how to set User ID, email, and custom attributes to optimize survey targeting, recontact users, and control survey intervals, all while respecting user anonymity.",

apps/formbricks-com/app/docs/attributes/why/page.mdx

@@ -1,4 +1,4 @@
-export const meta = {
+export const metadata = {
   title: "Understanding User Attributes in Formbricks Surveys",
   description:
     "Dive into the importance of attributes in surveys. Learn how key-value pairs can significantly improve survey targeting, enhance feedback quality, and guide data-driven decisions with Formbricks.",

apps/formbricks-com/app/docs/best-practices/cancel-subscription/page.mdx

@@ -10,7 +10,7 @@ import RecontactOptions from "./recontact-options.webp";
 import PublishSurvey from "./publish-survey.webp";
 import SelectAction from "./select-action.webp";
 
-export const meta = {
+export const metadata = {
   title: "Mastering Churn Surveys with Formbricks | Essential Tips & Steps",
   description: "Learn how to effectively utilize Formbricks' Churn Surveys to gain deeper insights into user departures. Dive into a step-by-step guide to craft, trigger, and optimize your churn surveys, ensuring you capture invaluable feedback at critical junctures",
 };
@@ -23,7 +23,7 @@ Churn is hard, but can teach you a lot. Whenever a user decides that your produc
 
 ## Purpose
 
-The Churn Survey is among the most effective ways to identify weaknesses in you offering. People were willing to pay but now are not anymore: What changed? Let’s find out!
+The Churn Survey is among the most effective ways to identify weaknesses in your offering. People were willing to pay but now are not anymore: What changed? Let’s find out!
 
 ## Preview
 

apps/formbricks-com/app/docs/best-practices/docs-feedback/page.mdx

@@ -10,7 +10,7 @@ import SwitchToDev from "./switch-to-dev.webp";
 import WhenToAsk from "./when-to-ask.webp";
 import CopyIds from "./copy-ids.webp";
 
-export const meta = {
+export const metadata = {
   title:
     "Integrate Docs Feedback in Your Website: A Step-by-Step Guide on getting feedback on your Documentation with Formbricks",
   description:
@@ -74,7 +74,7 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
 5. In the same way, you can change the Internal Question ID of the _Please elaborate_ question to **“additionalFeedback”** and the one of the _Page URL_ question to **“pageUrl”**.
 
 <Note>
-  ## Answers need to be identical If you want different answers than “Yes 👍” and “No 👎” you need update the
+  ## Answers need to be identical If you want different answers than “Yes 👍” and “No 👎” you need to update the
   choices accordingly. They have to be identical to the frontend we're building in the next step.
 </Note>
 

apps/formbricks-com/app/docs/best-practices/feature-chaser/page.mdx

@@ -9,7 +9,7 @@ import Publish from "./publish.webp";
 import RecontactOptions from "./recontact-options.webp";
 import SelectAction from "./select-action.webp";
 
-export const meta = {
+export const metadata = {
   title: "Setting Up Feature Chaser Surveys with Formbricks: A Comprehensive Guide",
   description: "Learn how to harness the power of Formbricks to gather targeted user feedback on specific features. Dive deep into creating, triggering, and publishing the Feature Chaser survey to enhance your product with actionable insights for specific users.",
 };
@@ -22,7 +22,7 @@ Following up on specific features only makes sense with very targeted surveys. F
 
 ## Purpose
 
-Product analytics never tell you why a feature is used - and why not. Following up on specfic features with highly relevant questions is a great way to gather feedback and improve your product.
+Product analytics never tell you why a feature is used - and why not. Following up on specific features with highly relevant questions is a great way to gather feedback and improve your product.
 
 ## Preview
 

apps/formbricks-com/app/docs/best-practices/feedback-box/page.mdx

@@ -11,7 +11,7 @@ import PublishSurvey from "./publish-survey.webp";
 import SelectAction from "./select-feedback-button-action.webp";
 import RecontactOptions from "./set-recontact-options.webp";
 
-export const meta = {
+export const metadata = {
   title: "Implementing the Feedback Box with Formbricks: A Step-by-Step Tutorial",
   description: "Unlock user insights effortlessly! Discover how to set up the Feedback Box in your app using Formbricks, allowing your users to provide real-time feedback. Follow our comprehensive guide to enhance user experience and respond rapidly to feedback",
 };

apps/formbricks-com/app/docs/best-practices/improve-trial-cr/page.mdx

@@ -9,7 +9,7 @@ import Publish from "./publish.webp";
 import RecontactOptions from "./recontact-options.webp";
 import SelectAction from "./select-action.webp";
 
-export const meta = {
+export const metadata = {
   title: "Boost Your Trial Conversion Rates with Formbricks: Comprehensive Guide",
   description: "Unlock the secret to converting more trial users into paying customers using Formbricks. Understand insights behind trial cancellations and tailor your offering to fit user needs. Dive into our step-by-step tutorial and improve your conversion strategy today",
 };

apps/formbricks-com/app/docs/best-practices/interview-prompt/page.mdx

@@ -12,7 +12,7 @@ import Publish from "./publish-survey.webp";
 import RecontactOptions from "./recontact-options.webp";
 import SelectAction from "./select-action.webp";
 
-export const meta = {
+export const metadata = {
   title: "Maximize User Interview Participation with In-app Interview Prompts",
   description: "Engage with your power users seamlessly using Formbricks' In-app Interview Prompt. Ditch traditional email invites and experience way more more respondents. Dive into our comprehensive guide on setting up auto-scheduled interviews today and enhance your user understanding",
 };
@@ -112,7 +112,7 @@ To create the trigger to show your Interview Prompt, go to the “Audience” ta
   appear in your Actions overview as long as the SDK is embedded.
 </Note>
 
-Generally, we have two types of user actions: Page views and clicks. The Interview Prompt, you’ll likely want to display on a page visit since you already filter who sees the prompt by attributes.
+Generally, we have two types of user actions: Page views and clicks. The Interview Prompt, you’ll likely want to display it on a page visit since you already filter who sees the prompt by attributes.
 
 1. **pageURL:** Whenever a user visits a page the survey will be displayed, as long as the other conditions match. Other conditions are pre-segmentation, if this user has seen a survey in the past 2 weeks, etc.
 

apps/formbricks-com/app/docs/best-practices/pmf-survey/page.mdx

@@ -9,7 +9,7 @@ import Publish from "./publish.webp";
 import RecontactOptions from "./recontact-options.webp";
 import SelectAction from "./select-action.webp";
 
-export const meta = {
+export const metadata = {
   title: "How to Set Up a Product-Market Fit Survey Using Formbricks - Step-by-Step Guide",
   description: "Learn to leverage Formbricks to create and implement a Product-Market Fit survey in your web app. Follow our detailed step-by-step guide to measure and understand your PMF effectively. Ensure high data quality, efficient triggers, and actionable insights.",
 };

apps/formbricks-com/app/docs/contributing/creating-a-service/page.mdx

@@ -0,0 +1,280 @@
+import Image from "next/image";
+import UnstableCache from "./unstable-cache-documentation.webp";
+
+export const metadata = {
+  title: "Formbricks Code Contribution Guide: How to create a service in Formbricks",
+  description:
+    "Services are the core backbone of the Formbricks codebase. This is the complete guide to help you create a service in Formbricks.",
+};
+
+#### Contributing
+
+# How to Create a Service
+
+In this guide, you will learn how to create a new service in Formbricks codebase. To begin let’s define what we mean when we use the word `Service`
+
+<Note>
+A service is an abstraction of database calls related to a specific model in the database which comprises of cached functions that can perform generic database level functionalities.
+
+</Note>
+
+Let’s break down some of the jargon in that definition:
+
+**Abstraction of database calls**
+
+From our guide on [How we Code at Formbricks](https://formbricks.com/docs/contributing/how-we-code), we mention that database calls should not be made directly from components or other places other than a **service**. This means that if you need to make a request to the database to fetch some data, let’s say “get the **surveys** of the current user in the current **environment**”, you would need a function in the surveys service like `getSurveysByEnvironmentId`. It is also worth mentioning that we use [Prisma](https://prisma.io/) as a database abstraction layer to perform database calls.
+
+**Comprises of cached functions**
+
+A service consists of multiple functions that can be easily reused in server actions. The other important part of this is that the output of a function in a service MUST be cached so we don’t have make unnecessary database calls for data that hasn’t changed. We will talk more about caching in services a bit later.
+
+**Generic database level functionalities**
+
+By generic we mean that if in the `survey` service there is a function that only gets a survey and now you want a function to get both survey and all its responses, you should not create another function specifically for that. Instead use the `getSurvey` function and then a `getResponsesBySurveyId` function in the `response` service to get this data. The functions need to be generic so that they can be reused for cases like this where you need to combine multiple cached functions to get what you need.
+
+## Do you need a new service?
+
+Firstly you must note that you almost won’t need to create a new service unless a new model was created. If you think that you need a new service or a new function in an existing service, first double check if you can combine one or two existing functions in an existing service to achieve what you want. If you still think that it doesn’t meet your need, please discuss with Matti first with your specific use-case to get the green light to create a new service or function in a service.
+
+This is critical to us as a project because services are a key part of our project and we want to make them as organised, minimal, easy to change and use as possible. This is important to us as a team to move quickly and still keep a good and maintainable codebase.
+
+## Steps to creating a new service
+
+Below is a break down on how to create a new service, if you ned to implement a function in an existing service you can jump to Step 3:
+
+### Step 1: Create the service folder in `packages/lib`
+
+For the sake of this section, let’s say we just added a new model called `ApiKey`, (note this model already exists)
+
+<Col>
+<CodeGroup title="packages/database/schema.prisma">
+
+```sql
+model ApiKey {
+  id            String      @id @unique @default(cuid())
+  createdAt     DateTime    @default(now())
+  lastUsedAt    DateTime?
+  label         String?
+  hashedKey     String      @unique()
+  environment   Environment @relation(fields: [environmentId], references: [id], onDelete: Cascade)
+  environmentId String
+}
+```
+
+</CodeGroup>
+</Col>
+
+**Step 1a**: The first thing you need to do is go to `packages/lib` and create a new folder called `apiKey`, note that this is the camel cased version of the Model name.
+
+**Step 1b**: We need to create the types for our service once we have the model. To do that you go to `packages/types` and create a file called `apiKey.ts`.
+
+In the type file, we must first create a Zod type that matches the Prisma model called`ZApiKey` (note here that it MUST begin with `Z` (indicating a Zod type) then the service name in pascal case). Next from this Zod type, we create a derived Typescript type called `TApiKey` (this MUST begin with a `T` and then the service name in pascal case).
+
+The reason we need both of them is because the Zod type is used for validating arguments passed into a service and we use the Typescript type to specify what data type a service function returns.
+
+### Step 2: Create `service.ts` and `cache.ts` in the service folder.
+
+The 2 required files are `service.ts` and `cache.ts`, note they are in singular form.
+
+`service.ts` - Where all the reusable cached functions are placed.
+
+`cache.ts` - Where the caching functionality for that service is abstracted to.
+
+### Step 3: Writing your functions in `service.ts` .
+
+A function in a service must have the following requirements:
+
+1. Follow the same naming pattern as we have in other services
+   - If using Prisma’s `findUnique` then the name should be `get` + `ServiceName` (in singular), e.g `getApiKey`
+   - If using Prisma’s `findMany` then the name should be `get` + `ServiceName` (in plural), e.g `getApiKeys`
+   - If your function's primary purpose is to retrieve or manipulate data based on a specific attribute or property of a resource, use "`by`" followed by the attribute name. For example:
+     - **`getMembersByTeamId`**: This function retrieves members filtered by the team's ID.
+     - **`getMembershipByUserIdTeamId`**: It retrieves a membership by the user's and team's IDs.
+   - If using Prisma’s `create` then `createApiKey`
+   - If using Prisma’s `update` then `updateApiKey`
+   - if using Prisma’s `delete` then `deleteApiKey`
+2. All its arguments must be properly typed.
+3. It should have a return type.
+4. The arguments should be validated using `validateInputs` (reference the code to see how it is used)
+5. Every function must return the standardised data types (`TApiKey`), including create or delete functions.
+6. Handle errors in the function and return specific error types for DatabaseErrors.
+
+<Note>
+  A standardised data type is the derived Typescript type in this case `TApiKey` that matches the model of the
+  service.
+</Note>
+
+Here is an example of a function that gets an api key by id:
+
+<Col>
+<CodeGroup title="packages/lib/apiKey/service.ts">
+
+```ts
+export const getApiKey = async (apiKeyId: string): Promise<TApiKey> => {
+  validateInputs([apiKeyId, ZString]);
+
+  try {
+    const apiKeyData = await prisma.apiKey.findUnique({
+      where: {
+        id: apiKeyId,
+      },
+    });
+
+    if (!apiKeyData) {
+      throw new ResourceNotFoundError("API Key from ID", apiKeyId);
+    }
+
+    return apiKeyData;
+  } catch (error) {
+    if (error instanceof Prisma.PrismaClientKnownRequestError) {
+      throw new DatabaseError(error.message);
+    }
+
+    throw error;
+  }
+};
+```
+
+</CodeGroup>
+</Col>
+
+### Step 4: Implementing caching for your function
+
+**Step 4a**: Firstly in the cache.ts file, you need to follow this structure:
+
+<Col>
+<CodeGroup title="packages/lib/apiKey/cache.ts">
+
+```ts
+import { revalidateTag } from "next/cache";
+
+interface RevalidateProps {
+  id?: string;
+  environmentId?: string;
+}
+
+export const apiKeyCache = {
+  tag: {
+    // Tags can be different depending on your use case
+    byId(id: string) {
+      return `apiKeys-${id}`;
+    },
+    byEnvironmentId(environmentId: string) {
+      return `environments-${environmentId}-apiKeys`;
+    },
+  },
+  revalidate({ id, environmentId }: RevalidateProps): void {
+    if (id) {
+      revalidateTag(this.tag.byId(id));
+    }
+
+    if (environmentId) {
+      revalidateTag(this.tag.byEnvironmentId(environmentId));
+    }
+  },
+};
+```
+
+</CodeGroup>
+</Col>
+
+_Breakdown of the above code._
+
+1. **apiKeyCache**: The name of this object is `serviceName` + `Cache`, which is why this is called `apiKeyCache` .
+2. **tag**: This object is where all the tags for the service cache will be stored. Read below for the definition of a tag
+3. **byId**: This is the required tag, since every service must query by Id at some point, `byId` is a must have in each tag. It is used to revalidate the cache of a single item, e.g. `getApiKey(id)`. If there is a good reason not to query by id, you can avoid creating this tag. The returned string of this function needs to begin with the service name in plural then a dash and the id (which must be passed in).
+4. **byEnvironmentId**: It is used to revalidate the cache of a list of items of the same parent, e.g. `getApiKeys(environmentId)`. For parent dependencies used to query this service, you should add the plural of the name in this case `environments` plus the id of the parent dependency plus the name of the service you are working with in plural, in this case `apiKeys` which results to `environments-${environmentId}-apiKeys`.
+5. **revalidate**: This function receives an object with optional keys. Depending on the key that is passed in, we optionally call the `revalidateTag` from `next/cache` on the appropriate tag. Note each key passed into this function has to match a `tag`.
+
+<Note>
+  A tag is a label or metadata identifier attached to a piece of data, content, or an object to categorize,
+  classify, or organize it for easier retrieval, grouping, or management. In the context of revalidation, tags
+  are used to associate groups of cached data with specific events or triggers. When an event occurs, such as
+  a form submission or content update, the tags are used to identify and revalidate all the cached data items
+  associated with that tag. This ensures that the latest and most up-to-date data is retrieved and displayed
+  in response to the event, contributing to the effective management and real-time updating of cached content.
+</Note>
+
+<Note>
+  We have a [script](https://gist.github.com/rotimi-best/7bd7e4ebda09a68ff0a1dc8ae6fa0009) that can help you
+  auto-generate the `cache.ts` file with the basic structure.
+</Note>
+
+**Step 4b:** Now that you have the `cache.ts`, it is time to actually use the tags and revalidate method in your `service.ts`.
+
+We will rewrite the function `getApiKey` we created in the `service.ts` file to support caching:
+
+<Col>
+<CodeGroup title="packages/lib/apiKey/service.ts">
+
+```ts
+import { unstable_cache } from "next/cache";
+import { SERVICES_REVALIDATION_INTERVAL } from "../constants";
+import { apiKeyCache } from "./cache";
+
+export const getApiKey = async (apiKeyId: string): Promise<TApiKey> =>
+  unstable_cache(
+    async () => {
+      validateInputs([apiKeyId, ZString]);
+
+      try {
+        const apiKeyData = await prisma.apiKey.findUnique({
+          where: {
+            id: apiKeyId,
+          },
+        });
+
+        if (!apiKeyData) {
+          throw new ResourceNotFoundError("API Key from ID", apiKeyId);
+        }
+
+        return apiKeyData;
+      } catch (error) {
+        if (error instanceof Prisma.PrismaClientKnownRequestError) {
+          throw new DatabaseError(error.message);
+        }
+
+        throw error;
+      }
+    },
+    [`getApiKey-${apiKeyId}`],
+    {
+      tags: [apiKeyCache.tag.byId(apiKeyId)],
+      revalidate: SERVICES_REVALIDATION_INTERVAL,
+    }
+  )();
+```
+
+</CodeGroup>
+</Col>
+
+_Breakdown of the above code._
+
+In the above code we only introduce something new called `unstable_cache`, read more about it [here](https://nextjs.org/docs/app/api-reference/functions/unstable_cache#parameters). In a nutshell these are its parameters:
+
+<Image
+  src={UnstableCache}
+  alt="Unstable Cache Parameters"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+From the screenshot above we see that `unstable_cache` receives 3 arguments:
+
+1. `fetchData`: In our case this is the exact function of your service without caching (step 3)
+2. `keyParts`: As a rule of thumb, the key must consist of the name of the function and the arguments passed into the function, all separated by a dash. In our case it is called `getApiKey-${apiKeyId}` because the function name is `getApiKey` and we receive only one argument called `apiKeyId`
+3. `options`: which consists of **tags** and **revalidate**
+   1. `tags`: This is where the tags you created in step 4a comes in, tags are created solely based on the arguments passed to the function. (please reference existing services in `packages/lib` to see more variations of this when dealing with more than one argument)
+   2. `revalidate`: We have a global constant for this which you can use called `SERVICES_REVALIDATION_INTERVAL`
+
+<Note>
+In create, update and delete requests, you don’t need caching however these are the places where the revalidate method is called. For example when the apiKey is deleted we want to call the revalidate method and pass in the id and environmentId, so we invalidate every cached function with `id` and `environmentId` tags.
+`apiKeyCache.revalidate({ id: [apiKey.id](http://apikey.id/), environmentId: apiKey.environmentId });`
+
+</Note>
+
+### Step 5: Check if you need to add these 2 optional files (`auth.ts` and `util.ts`)
+
+`auth.ts` - Is for verifying if the user is authorised to access the service. Typically it has only one function with this naming `canUserAccessApiKey`. Please note that ApiKey at the end of the name is specific to the service name.
+
+`util.ts` - This file holds any helper function that is used in that specific service. For example one common use case for this files is for converting Date fields from string to Date. The reason for this is that when we cache a function using `unstable_cache`, [it does not support deserialisation of dates](https://github.com/vercel/next.js/issues/51613). We therefore need to manually deserialise date fields by writing a function that receives the data of a service and we check for its date fields that are in strings and we convert them into Date.

apps/formbricks-com/app/docs/contributing/demo/page.mdx

@@ -2,7 +2,7 @@ import Image from "next/image";
 
 import DemoApp from "./demoapp.webp";
 
-export const meta = {
+export const metadata = {
   title: "Formbricks Demo App Guide: Play around with Formbricks",
   description: "To test in-app surveys, trigger actions and set attributes, you can use the Demo App. This guide provides hands-on examples of sending both code and no-code actions",
 };

apps/formbricks-com/app/docs/contributing/gitpod/page.mdx

@@ -5,7 +5,7 @@ import GitpodNewWorkspace from "./gitpod-new-workspace.webp";
 import GitpodPreparing from "./gitpod-preparing.webp";
 import GitpodRunning from "./gitpod-running.webp";
 
-export const meta = {
+export const metadata = {
   title: "Gitpod Setup",
   description:
     "With one click, you can setup the Formbricks developer environment in your browser using Gitpod",
@@ -35,7 +35,7 @@ export const meta = {
         3. Installing Docker images by extracting them from the `packages/database/docker-compose.yml` file.
         4. Building the @formbricks/js component.
      - When the workspace starts:
-        1. Waiting for web and demo apps to start and openening the `apps/demo/.env` file automatically such that users can start playing around with the demo app by configuring `NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID` straight away!
+        1. Wait for the web and demo apps to launch on Gitpod. This automatically opens the `apps/demo/.env` file. Utilize dynamic localhost URLs (e.g., `localhost:3000` for signup and `localhost:8025` for email confirmation) to configure `NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID`. After creating your account and finding the `ID` in the URL at `localhost:3000`, replace `YOUR_ENVIRONMENT_ID` in the `.env` file located in `app/demo`. 
 
     **Web Component Initialization:** 
      - we initialize the @formbricks/web component during prebuilds. This involves:
@@ -74,7 +74,7 @@ After clicking the one-click setup button, Gitpod will open a new tab or window.
 - This is the Gitpod Authentication Page. It appears when you click the "Open in GitPod" button and Gitpod needs to authenticate your access to the workspace. Click on 'Continue With Github' to authorize your GitPod session.
 
 ### 3. Creating a New Workspace
-<Image src={GitpodNewWorkspace} alt="Gitpod New Worskpace Page" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+<Image src={GitpodNewWorkspace} alt="Gitpod New workspace Page" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
 - After authentication, Gitpod asks to create a new workspace for you. This page displays the configurations of your workspace. 
 - You can use either choose either VS Code Browser or  VS Code Desktop editor with the 'Standard Class' for your workspace class.
 - If you opt for the VS Code Desktop, follow the following steps
@@ -83,7 +83,7 @@ After clicking the one-click setup button, Gitpod will open a new tab or window.
 
 
 ### 4. Gitpod preparing the created Workspace
-<Image src={GitpodPreparing} alt="Gitpod Preparing Worskpace Page" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+<Image src={GitpodPreparing} alt="Gitpod Preparing workspace Page" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
 - Gitpod is preparing your workspace with all the necessary dependencies and configurations. You will see this page while Gitpod sets up your development environment.
 
 ### 5. Gitpod running the Workspace

apps/formbricks-com/app/docs/contributing/how-we-code/page.mdx

@@ -1,7 +1,7 @@
 import Image from "next/image";
 import CorsHandling from "./cors-handling-in-api.webp";
 
-export const meta = {
+export const metadata = {
   title: "Formbricks Code Contribution Guide: Best Practices and Standards",
   description:
     "Effortlessly Navigate Your Contribution Journey with Formbricks' Coding Guidelines and PR Review Process",
@@ -81,7 +81,7 @@ You should store constants in `packages/lib/constants`
 
 ## Types should be in the packages folder
 
-You should store type in `packages/types/v1`
+You should store type in `packages/types`
 
 ## Read environment variables from `.env.mjs`
 

apps/formbricks-com/app/docs/contributing/introduction/page.mdx

@@ -1,4 +1,4 @@
-export const meta = {
+export const metadata = {
   title: "Formbricks Open Source Contribution Guide: How to Enhance yourself and Contribute to Formbricks",
   description:
     "Join the Formbricks community and learn how to effectively contribute. From raising issues and feature requests to creating PRs, discover the best practices and communicate with our responsive team on Discord",

apps/formbricks-com/app/docs/contributing/setup/page.mdx

@@ -1,6 +1,7 @@
-export const meta = {
+export const metadata = {
   title: "Formbricks Development Setup: Complete Guide to Local Environment Configuration for Dev",
-  description: "Step-by-step guide to setting up your local development environment for Formbricks. Includes installing essential tools like Node.JS, pnpm, and Docker, and accessing the entire Formbricks stack including the Demo app and the main website",
+  description:
+    "Step-by-step guide to setting up your local development environment for Formbricks. Includes installing essential tools like Node.JS, pnpm, and Docker, and accessing the entire Formbricks stack including the Demo app and the main website",
 };
 
 #### Contributing
@@ -14,6 +15,7 @@ To get the project running locally on your machine you need to have the followin
 - [Docker](https://www.docker.com/) (to run PostgreSQL / MailHog)
 
 1. Clone the project:
+
 <Col>
    <CodeGroup title="Git clone Formbricks monorepo">
 
@@ -33,7 +35,9 @@ To get the project running locally on your machine you need to have the followin
 
    </CodeGroup>
 </Col>
+
 1. Install Node.JS packages via pnpm. Don't have pnpm? Get it [here](https://pnpm.io/installation)
+
 <Col>
    <CodeGroup title="Install dependencies via pnpm">
 
@@ -43,7 +47,9 @@ To get the project running locally on your machine you need to have the followin
 
    </CodeGroup>
 </Col>
+
 1. Create a `.env` file based on `.env.example`. It's already preset to work with the docker-compose setup but you can also change values if needed.
+
 <Col>
    <CodeGroup title="Define environment variables">
 
@@ -53,18 +59,21 @@ To get the project running locally on your machine you need to have the followin
 
    </CodeGroup>
 </Col>
+
 1. Generate a secret value mandatory to be set for the key ENCRYPTION_KEY in the .env file. You can use the following command to generate the random string of required length:
+
 <Col>
    <CodeGroup title="Set value of ENCRYPTION_KEY">
 
    ```bash
-   openssl rand -base64 24
+   openssl rand -hex 32
    ```
 
    </CodeGroup>
 </Col>
 
 1. Make sure you have [`Docker`](https://docs.docker.com/compose/) & [`docker-compose`](https://docs.docker.com/compose/) installed and running on your machine. Then run the following command to start the formbricks dev setup:
+
 <Col>
    <CodeGroup title="Start Formbricks Dev Setup">
 
@@ -86,6 +95,7 @@ To get the project running locally on your machine you need to have the followin
 ### Build
 
 To build all apps and packages and check for build errors, run the following command:
+
 <Col>
 <CodeGroup title="Build Formbricks stack">
 
@@ -98,6 +108,7 @@ pnpm build
 ### Access Demo app
 
 To run the [Demo app](/docs/contributing/demo), run the following command in a separate terminal window:
+
 <Col>
 <CodeGroup title="Start Formbricks Demo App">
 
@@ -112,6 +123,7 @@ You can now access the Demo app on [http://localhost:3002](http://localhost:3002
 ### Access Formbricks website
 
 If you want to make changes to the Formbricks website, e.g. to update the documentation, run the following command in a separate terminal window:
+
 <Col>
 <CodeGroup title="Start Formbricks Website">
 

apps/formbricks-com/app/docs/contributing/troubleshooting/page.mdx

@@ -4,7 +4,7 @@ import ClearAppData from "./clear-app-data.webp";
 import UncaughtPromise from "./uncaught-promise.webp";
 import Logout from "./logout.webp";
 
-export const meta = {
+export const metadata = {
   title: "Formbricks Troubleshooting Guide: How to Solve & Debug Common Issues",
   description:
     "Facing issues with Formbricks? This troubleshooting guide covers frequently encountered problems, from Prisma migrations to package errors and more. Detailed solutions, accompanied by visual aids, ensure a smoother user experience with Formbricks",

apps/formbricks-com/app/docs/faq/page.mdx

@@ -1,6 +1,6 @@
 import FAQ from "@/components/docs/docsFaq";
 
-export const meta = {
+export const metadata = {
   title: "FAQ",
   description: "Frequently Asked Questions about Formbricks and how to use it.",
 };

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

@@ -13,7 +13,7 @@ export const metadata = {
 
 # Framework Guides
 
-One can integrate Formbricks into their app using multipe options! Checkout the options below that we provide! If you are looking
+One can integrate Formbricks into their app using multiple options! Checkout the options below that we provide! If you are looking
 for something else, please [join our Discord!](https://formbricks.com/discord) and we would be glad to help. {{ className: 'lead' }}
 
 <Libraries />
@@ -24,7 +24,7 @@ for something else, please [join our Discord!](https://formbricks.com/discord) a
 
 Before getting started, make sure you have:
 
-1. A web application in your desired framework set up and running.
+1. A web application in your desired framework is set up and running.
 2. A Formbricks account with access to your environment ID and API host. You can find these in the **Setup Checklist** in the Settings:
 
 <Image
@@ -64,7 +64,7 @@ All you need to do is copy a `<script>` tag to your HTML head, and that’s abou
   </Property>
 </Properties>
 
-Refer our [Example HTML project](https://github.com/formbricks/examples/tree/main/html) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
+Refer to our [Example HTML project](https://github.com/formbricks/examples/tree/main/html) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
 
 ---
 
@@ -135,7 +135,7 @@ The app initializes 'formbricks' when it's loaded in a browser environment (due
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-Refer our [Example ReactJs project](https://github.com/formbricks/examples/tree/main/reactjs) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
+Refer to our [Example ReactJs project](https://github.com/formbricks/examples/tree/main/reactjs) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
 
 ---
 
@@ -213,7 +213,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 </CodeGroup>
 </Col>
 
-Refer our [Example NextJS App Directory project](https://github.com/formbricks/examples/tree/main/nextjs-app) for more help!
+Refer to our [Example NextJS App Directory project](https://github.com/formbricks/examples/tree/main/nextjs-app) for more help!
 
 ### Pages Directory
 
@@ -252,7 +252,7 @@ export default function App({ Component, pageProps }: AppProps) {
 
 </CodeGroup>
 </Col>
-Refer our [Example NextJS Pages Directory project](https://github.com/formbricks/examples/tree/main/nextjs-pages) for more help!
+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
 
@@ -364,7 +364,7 @@ router.afterEach((to, from) => {
   </Property>
 </Properties>
 
-Refer 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!
+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/getting-started/quickstart-in-app-survey/page.mdx

@@ -13,7 +13,7 @@ import I10 from "./10-micro-survey-pop-up-in-app.webp";
 import I11 from "./11-survey-logs-in-app-survey-popup.webp";
 import ReactApp from "../framework-guides/react-in-app-survey-app-popup-form.webp";
 
-export const meta = {
+export const metadata = {
   title: "Formbricks Quickstart Guide: In-App Surveys Made Simple",
   description: "Launch your first in-app survey effortlessly. Dive into our step-by-step guide to set up, integrate, and debug Formbricks in your web app in under 15 minutes.",
 };

apps/formbricks-com/app/docs/integrations/airtable/page.mdx

@@ -0,0 +1,189 @@
+import { Fence } from "@/components/shared/Fence";
+import { Callout } from "@/components/shared/Callout";
+import IntegrationTab from "./integrations-tab.webp";
+import ConnectWithAirtable from "./connect-with-airtable.webp";
+import AirtableConnected from "./airtable-connected.webp";
+import LinkSurveyWithTable from "./link-survey-with-table.webp";
+import LinkWithQuestions from "./link-with-questions.webp";
+import ListLinkedSurveys from "./list-linked-surveys.webp";
+import OpenDeveloperHub from "./open-developer-hub.webp";
+import CreateNewIntegration from "./create-new-integration.webp";
+import RegisterNewIntegration from "./register-new-integration.webp";
+import SelectScopes from "./select-scopes.webp";
+import DeleteIntegration from "./deleteIntegration.webp";
+import Image from "next/image";
+
+export const metadata = {
+  title: "Airtable Setup",
+  description: "Instantly populate your airtable table with survey data",
+};
+
+#### Integrations
+
+# Airtable
+
+The Airtable integration allows you to automatically send responses to an Airtable of your choice.
+
+<Note>
+  This feature is enabled by default in Formbricks Cloud but needs to be self-configured when running a
+  self-hosted version of Formbricks.
+</Note>
+
+## Formbricks Cloud
+
+1. Go to the Integrations tab in your [Formbricks Cloud dashboard](https://app.formbricks.com/) and click on the "Connect" button under Airtable integration.
+
+<Image
+  src={IntegrationTab}
+  alt="Formbricks Integrations Tab"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+2. Now click on the "Connect with Airtable" button to authenticate yourself with Airtable.
+
+<Image
+  src={ConnectWithAirtable}
+  alt="Connect Formbricks with Airtable"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+3. You will now be taken to a page where you need to add and grant access to the base you want to use for the integration.
+
+<Image
+  src={ConnectWithAirtable}
+  alt="Add and grant access to airtable base"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+4. Once you add and grant access to your base, you will be taken back to Formbricks Cloud and see the connected status as below:
+
+<Image
+  src={AirtableConnected}
+  alt="Formbricks is now connected with Google"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+<Note>
+
+Before the next step, make sure that you have a Formbricks Survey with at least one question and a Airtable base with atleast one table in the Airtable account you integrated.
+
+</Note>
+
+6. Now click on the "Link New Table" button to link a new Airtable with Formbricks and a modal will open up.
+
+<Image
+  src={LinkSurveyWithTable}
+  alt="Link Formbricks with a Airtable"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+7. Select the Base and table you want to link with Formbricks and the Survey. On doing so, you will be asked with what questions' responses you want to feed in Airtable. Select the questions and click on the "Save" button.
+
+<Image
+  src={LinkWithQuestions}
+  alt="Select question to link with Airtable"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+
+/>
+
+8. On submitting, the modal will close and you will see the linked table in the list of linked tables.
+
+<Image
+  src={ListLinkedSurveys}
+  alt="List of linked tables"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+Congratulations! You have successfully linked an Airtable with Formbricks. Now whenever a response is submitted for the linked Survey, it will be automatically added to the linked Airtable.
+
+Still struggling or something not working as expected? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you!
+
+## Setup in self-hosted Formbricks
+
+Enabling the Airtable Integration in a self-hosted environment requires creating an airtable account and changing the environment variables of your Formbricks instance.
+
+1. Go to the [Airtable](https://airtable.com) and create a new account if you dont already have one.
+
+2. Click on user icon on top left and open to Developer hub
+
+<Image
+  src={OpenDeveloperHub}
+  alt="List of linked tables"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+3. Navigate to OAuth integrations and click on **Register an OAuth integrations**
+
+<Image
+  src={CreateNewIntegration}
+  alt="List of linked tables"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+3. Select a name for you integration and also add a redirect URL which will be YOUR_WEBAPP_URL/api/v1/integrations/airtable/callback
+
+   <Image
+     src={RegisterNewIntegration}
+     alt="List of linked tables"
+     quality="100"
+     className="max-w-full rounded-lg sm:max-w-3xl"
+   />
+
+4. Now fill some basic details about your integrations and then go to scope section. You need to enable 5 scopes
+
+   - data.records:read
+   - data.records:write
+   - schema.bases:read
+   - schema.bases:write
+   - user.email:read
+
+{" "}
+
+<Image
+  src={SelectScopes}
+  alt="List of linked tables"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+5. Click on the "Save" button and you are done
+6. Now just copy client id and redirect url for your integration and add it to formbricks .env file
+
+### By now, your environment variables should include the below ones:
+
+- `AIR_TABLE_CLIENT_ID`
+- `AIR_TABLE_REDIRECT_URL`
+
+Voila! You have successfully enabled the Airtable integration in your self-hosted Formbricks instance. Now you can follow the steps mentioned in the [Formbricks Cloud](#formbricks-cloud) section to link an Airtable with Formbricks.
+
+## Remove Integration with Airtable
+
+To remove the integration with Airtable,
+
+1. Visit the Integrations tab in your Formbricks Cloud dashboard.
+2. Select "Manage" button in the Airtable card.
+3. Click on the "Connected with `<your-email-here`>" just before the "Link new Table" button.
+4. It will now ask for a confirmation to remove the integration. Click on the "Delete" button to remove the integration. You can always come back and connect again with the same Airtable Account.
+
+<Image
+  src={DeleteIntegration}
+  alt="Delete Airtable Integration with Formbricks"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+<Note>
+  We do not store any other information of yours! We value Privacy more than you and rest assured you're safe
+  with us!
+</Note>
+
+Still struggling or something not working as expected? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you!

apps/formbricks-com/app/docs/integrations/google-sheets/page.mdx

@@ -9,7 +9,7 @@ import ListLinkedSurveys from "./list-linked-surveys.webp";
 import DeleteConnection from "./delete-connection.webp";
 import Image from "next/image";
 
-export const meta = {
+export const metadata = {
   title: "n8n Setup",
   description: "Wire up Formbricks with n8n and 350+ other apps",
 };

apps/formbricks-com/app/docs/integrations/make/page.mdx

@@ -14,7 +14,7 @@ import SelectFields from "./select-fields.webp";
 import Result from "./result.webp";
 import SelectAction from "./select-action.webp";
 
-export const meta = {
+export const metadata = {
   title: "Formbricks Integration with Make.com: A Step-by-Step Guide",
   description: "Discover how to seamlessly integrate Formbricks with Make.com. Dive into our comprehensive guide to set up scenarios, connect with a plethora of apps, and send your survey data to more than 1000 platforms.",
 };

apps/formbricks-com/app/docs/integrations/n8n/page.mdx

@@ -18,7 +18,7 @@ import SubmitTestResponse from "./submit-test-response.png";
 import SuccessConnection from "./success-connection.png";
 import UpdateQuestionId from "./update-question-id.png";
 
-export const meta = {
+export const metadata = {
   title: "Comprehensive Guide to Integrating Formbricks with n8n",
   description: "Unlock the potential of combining Formbricks with n8n for a streamlined workflow experience. Dive into our step-by-step guide and send your survey data effortlessly to 350+ applications. Streamline your data processes now!",
 };

apps/formbricks-com/app/docs/integrations/zapier/page.mdx

@@ -14,7 +14,7 @@ import TestSubmission from "./test-submission.webp";
 import UpdateQuestionId from "./update-question-id.webp";
 import ZapierMessage from "./zapier-message.webp";
 
-export const meta = {
+export const metadata = {
   title: "Step-by-Step Guide to Integrating Formbricks with Zapier",
   description: "Master the integration of Formbricks with Zapier using our detailed guide. Seamlessly connect your surveys to 5000+ apps, automate data transfers, and enhance feedback management. Start optimizing your workflow today.",
 };

apps/formbricks-com/app/docs/introduction/how-it-works/page.mdx

@@ -1,4 +1,4 @@
-export const meta = {
+export const metadata = {
   title: "Inside Look: Formbricks In-Product Micro-Surveys",
   description:
     "Unlock the full potential of Formbricks: From intuitive form-building and event-based triggers to effortless integrations and deep analytics. Master the art of in-product surveys for your SaaS or digital platform.",

apps/formbricks-com/app/docs/introduction/why-is-it-better/page.mdx

@@ -1,4 +1,4 @@
-export const meta = {
+export const metadata = {
   title: "Formbricks vs. Generic Survey Tools: A Comparative Insight",
   description:
     "Discover how Formbricks excels as a specialized in-product micro-survey platform for SaaS. Get unmatched targeting, seamless integrations, and make informed decisions with our open-source advantage.",

apps/formbricks-com/app/docs/layout.tsx

@@ -8,7 +8,7 @@ import { type Metadata } from "next";
 
 export const metadata: Metadata = {
   title: {
-    template: "Formbricks – Open Source Experience Management",
+    template: "%s - Formbricks Docs",
     default: "Formbricks Docs",
   },
 };

apps/formbricks-com/app/docs/link-surveys/data-prefilling/page.mdx

@@ -2,7 +2,7 @@ import Image from "next/image";
 
 import QuestionId from "./question-id.webp";
 
-export const meta = {
+export const metadata = {
   title: "URL Data Prefilling for Link Surveys in Formbricks",
   description: "Master the art of data prefilling in Formbricks link surveys. Dive into our guide on how to use URL parameters to prepopulate answers, boosting conversion rates and enhancing user experience. Learn through examples and ensure correct validation for each question type.",
 };

apps/formbricks-com/app/docs/link-surveys/single-use-links/page.mdx

@@ -6,7 +6,7 @@ import Settings from "./single-use-setting.webp";
 import Message from "./used-message.webp";
 import Metadata from "./metadata.webp";
 
-export const meta = {
+export const metadata = {
   title: "Single Use Links",
   description: "Make sure that each respondent only replies once with single use links.",
 };
@@ -59,7 +59,7 @@ You can encrypt single use URLs to assure information to be protected. To enable
 
 ## Check suId of a submission
 
-You can find the suId of each submission in the submission meta data. To view it, simplte hover over the Avatar:
+You can find the suId of each submission in the submission meta data. To view it, simple hover over the Avatar:
 
 <Image
   src={Metadata}

apps/formbricks-com/app/docs/link-surveys/user-identification/page.mdx

@@ -2,7 +2,7 @@ import Image from "next/image";
 
 import PeopleView from "./people-view.webp";
 
-export const meta = {
+export const metadata = {
   title: "Effective User Identification in Formbricks Link Surveys",
   description:
     "Discover how to seamlessly connect responses from Formbricks link surveys to existing users in your database. Learn the intricacies of the userId URL parameter to enhance user tracking, profiling, and segmentation, ensuring more personalized interactions and data-driven decisions.",

apps/formbricks-com/app/docs/self-hosting/deployment/page.mdx

@@ -1,4 +1,4 @@
-export const meta = {
+export const metadata = {
   title: "Comprehensive Guide to Self-Hosting Formbricks",
   description:
     "Discover versatile options to deploy Formbricks tailored to your expertise level. From Ubuntu setups using shell scripts, swift Docker deployments, to manual source configurations, harness the flexibility and power of Formbricks to fit your unique hosting needs. Dive in today!",
@@ -8,7 +8,7 @@ export const meta = {
 
 # Self Hosting Formbricks
 
-At Formbricks, we understand that different users have different needs, and we strive to cater to a wide variety of situations. This is why we currently provide three ways of running our application:
+At Formbricks, we understand that different users have different needs, and we strive to cater to a wide variety of situations. This is why we currently provide two ways of running our application:
 
 1. **Production Instance Setup with Shell Script on Ubuntu**: If you want to quickly set up a production instance of Formbricks on a server running Ubuntu, we've got you covered! This method utilizes a convenient shell script that takes care of everything, including Docker, Postgres DB, and SSL certificate configuration. The shell script will automatically install all the required dependencies and configure your server, making the process a breeze. Visit the [Production Instance Setup with a Bash Script Documentation](/docs/self-hosting/production).
 

apps/formbricks-com/app/docs/self-hosting/docker/page.mdx

@@ -1,4 +1,4 @@
-export const meta = {
+export const metadata = {
   title: "Guide to Deploying Formbricks Using Docker",
   description:
     "Step-by-step tutorial on how to effortlessly set up and run Formbricks via Docker. Explore the quick deployment process with Docker-Compose, learn how to update Formbricks, and troubleshoot common issues. Ideal for those looking for a hassle-free Formbricks experience",
@@ -21,98 +21,131 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
   Docker documentation.
 </Note>
 
-1. **Create a New Directory for Formbricks**
+1.  **Create a New Directory for Formbricks**
+
+Open a terminal and create a new directory for Formbricks, then navigate into this new directory:
 
-   Open a terminal and create a new directory for Formbricks, then navigate into this new directory:
 <Col>
    <CodeGroup title="Create and cd into the new directory">
 
-   ```bash
-   mkdir formbricks-quickstart && cd formbricks-quickstart
-   ```
+    ```bash
+    mkdir formbricks-quickstart && cd formbricks-quickstart
+    ```
+
+    </CodeGroup>
 
-   </CodeGroup>
 </Col>
-2. **Download the Docker-Compose File**
 
-   Download the docker-compose file directly from the Formbricks repository:
+2.  **Download the Docker-Compose File**
+
+Download the docker-compose file directly from the Formbricks repository:
+
 <Col>
    <CodeGroup title="Download docker compose file">
 
-   ```bash
-   curl -o docker-compose.yml https://raw.githubusercontent.com/formbricks/formbricks/main/docker/docker-compose.yml
-   ```
+    ```bash
+    curl -o docker-compose.yml https://raw.githubusercontent.com/formbricks/formbricks/main/docker/docker-compose.yml
+    ```
+
+    </CodeGroup>
 
-   </CodeGroup>
 </Col>
-3. **Generate NextAuth Secret**
 
-   Next, you need to generate a NextAuth secret. This will be used for session signing and encryption. The `sed` command below generates a random string using `openssl`, then replaces the `NEXTAUTH_SECRET:` placeholder in the `docker-compose.yml` file with this generated secret:
+3.  **Generate NextAuth Secret**
+
+Next, you need to generate a NextAuth secret. This will be used for session signing and encryption. The `sed` command below generates a random string using `openssl`, then replaces the `NEXTAUTH_SECRET:` placeholder in the `docker-compose.yml` file with this generated secret:
+
 <Col>
    <CodeGroup title="Generate NextAuth Secret">
 
-   ```bash
-   sed -i "/NEXTAUTH_SECRET:$/s/NEXTAUTH_SECRET:.*/NEXTAUTH_SECRET: $(openssl rand -base64 32 | tr -dc 'a-zA-Z0-9' | head -c 32)/" docker-compose.yml
-   ```
+    ```bash
+    sed -i "/NEXTAUTH_SECRET:$/s/NEXTAUTH_SECRET:.*/NEXTAUTH_SECRET: $(openssl rand -hex 32)/" docker-compose.yml
+    ```
+
+    </CodeGroup>
 
-   </CodeGroup>
 </Col>
-4. **Start the Docker Setup**
 
-   You're now ready to start the Formbricks Docker setup. The following command will start Formbricks together with a postgreSQL database using Docker Compose:
+4.  **Generate Encryption Key**
+
+Next, you need to generate an Encryption Key. This will be used for authenticating and verifying 2 Factor Authentication. The `sed` command below generates a random string using `openssl`, then replaces the `ENCRYPTION_KEY:` placeholder in the `docker-compose.yml` file with this generated secret:
+
+<Col>
+   <CodeGroup title="Generate Encryption Key">
+
+    ```bash
+    sed -i "/ENCRYPTION_KEY:$/s/ENCRYPTION_KEY:.*/ENCRYPTION_KEY: $(openssl rand -hex 32)/" docker-compose.yml
+    ```
+
+    </CodeGroup>
+
+</Col>
+
+5.  **Start the Docker Setup**
+
+You're now ready to start the Formbricks Docker setup. The following command will start Formbricks together with a postgreSQL database using Docker Compose:
 
-   We pass the `--env-file /dev/null` flag to docker-compose to prevent it from reading the .env file. This is because we're using environment variables directly in the docker-compose.yml file as the env file is currently in a format not well recognised by docker systems.
 <Col>
    <CodeGroup title="Launch Docker Instance">
 
-   ```bash
-    docker compose --env-file /dev/null up -d
-   ```
+```bash
+ docker compose up -d
+```
 
    </CodeGroup>
 </Col>
    The `-d` flag will run the containers in detached mode, meaning they'll run in the background.
 
-5. **Visit Formbricks in Your Browser**
+6. **Visit Formbricks in Your Browser**
 
    After starting the Docker setup, visit http://localhost:3000 in your browser to interact with the Formbricks application. The first time you access this page, you'll be greeted by a setup wizard. Follow the prompts to define your first user and get started.
 
 ## Updating Formbricks
 
-1. Stop the Formbricks stack
+1.  Stop the Formbricks stack
+
 <Col>
    <CodeGroup title="Stop the docker instance">
 
-   ```bash
-   docker compose down
-   ```
+    ```bash
+    docker compose down
+    ```
+
+    </CodeGroup>
 
-   </CodeGroup>
 </Col>
-2. Pull the latest changes
+
+2.  Pull the latest changes
+
 <Col>
    <CodeGroup title="Pull the changes into docker">
 
-   ```bash
-   docker compose pull
-   ```
+    ```bash
+    docker compose pull
+    ```
+
+    </CodeGroup>
 
-   </CodeGroup>
 </Col>
-3. Update env vars as necessary in the docker-compose file.
-4. Re-start the Formbricks stack
+
+3.  Update env vars as necessary in the docker-compose file.
+4.  Re-start the Formbricks stack
+
 <Col>
    <CodeGroup title="Relaunch the Docker Instance">
 
-   ```bash
-   docker compose --env-file /dev/null up -d
-   ```
+    ```bash
+    docker compose up -d
+    ```
+
+    </CodeGroup>
 
-   </CodeGroup>
 </Col>
+
 ## Debugging
 
 If you encounter any issues, you can check the logs of the container with:
+
 <Col>
 <CodeGroup title="Look into docker logs">
 
@@ -178,40 +211,39 @@ To edit any of the variables that start with `NEXT_PUBLIC_`, you need to rebuild
 
 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`                                                 |
-| SURVEY_BASE_URL             | Base URL of the link surveys.                                                                | required                                                | `http://localhost:3000/s/`                                              |
-| DATABASE_URL                | Database URL with credentials.                                                               | required                                                | `postgresql://postgres:postgres@postgres:5432/formbricks?schema=public` |
-| NEXTAUTH_SECRET             | Secret for NextAuth, used for session signing and 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`                                                 |
-| 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                                                |                                                                         |
-| PASSWORD_RESET_DISABLED     | Disables password reset functionality if set to `1`.                                         | optional                                                |                                                                         |
-| EMAIL_VERIFICATION_DISABLED | Disables email verification 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_AUTH_ENABLED         | Enables GitHub login if set to `1`.                                                          | optional                                                |                                                                         |
-| GOOGLE_AUTH_ENABLED         | Enables Google login if set to `1`.                                                          | optional                                                |                                                                         |
-| 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                                                |                                                                         |
-| IS_FORMBRICKS_CLOUD         | Uses Formbricks Cloud if set to `1`                                                          | optional                                                |                                                                         |
-| DEFAULT_BRAND_COLOR         | Default brand color for your app (Can be overwritten from the UI as well).                   | optional                                                | `#64748b`                                                               |
+| Variable                    | Description                                                                             | Required                                                | Default                                                                 |
+| --------------------------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------------------------------------------------------------------- |
+| WEBAPP_URL                  | Base URL of the site.                                                                   | required                                                | `http://localhost:3000`                                                 |
+| DATABASE_URL                | Database URL with credentials.                                                          | required                                                | `postgresql://postgres:postgres@postgres:5432/formbricks?schema=public` |
+| NEXTAUTH_SECRET             | Secret for NextAuth, used for session signing and 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`                                                 |
+| 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                                                |                                                                         |
+| PASSWORD_RESET_DISABLED     | Disables password reset functionality if set to `1`.                                    | optional                                                |                                                                         |
+| EMAIL_VERIFICATION_DISABLED | Disables email verification 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_AUTH_ENABLED         | Enables GitHub login if set to `1`.                                                     | optional                                                |                                                                         |
+| GOOGLE_AUTH_ENABLED         | Enables Google login if set to `1`.                                                     | optional                                                |                                                                         |
+| 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                                                |                                                                         |
+| IS_FORMBRICKS_CLOUD         | Uses Formbricks Cloud if set to `1`                                                     | optional                                                |                                                                         |
+| DEFAULT_BRAND_COLOR         | Default brand color for your app (Can be overwritten from the UI as well).              | optional                                                | `#64748b`                                                               |
 
 ## Build-time Variables
 
@@ -232,5 +264,4 @@ These variables must be provided at the time of the docker build and would requi
 | NEXT_PUBLIC_FORMBRICKS_COM_DOCS_FEEDBACK_SURVEY_ID | Survey ID for the feedback survey on the docs site.             | optional |         |
 | NEXT_PUBLIC_FORMBRICKS_COM_API_HOST                | Host for the Formbricks API.                                    | optional |         |
 
-
 Still facing issues? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you!

apps/formbricks-com/app/docs/self-hosting/migration-guide/page.mdx

@@ -1,4 +1,4 @@
-export const meta = {
+export const metadata = {
   title: "Migrating Formbricks to v1.1",
   description:
     "Formbricks v1.1 comes with an amazing set of features including the ability to define most environment variables at runtime itself! No need to build the image again! This guide will help you migrate your existing Formbricks instance to v1.1",
@@ -6,33 +6,53 @@ export const meta = {
 
 #### Self-Hosting
 
-# Migrating to v1.1
+# Migration Guide
+
+## v1.1 -> v1.2
+
+Formbricks v1.2 ships a lot of features targeting our Link Surveys. We have also improved our security posture to be as robust as ever. However, it also comes with a few breaking changes specifically with the environment variables. This guide will help you migrate your existing Formbricks instance to v1.2 without any hassles or build errors.
+
+### New Environment Variables
+
+| Environment Variable | Required | Recommended Generation         | Comments                                                    |
+| -------------------- | -------- | ------------------------------ | ----------------------------------------------------------- |
+| ENCRYPTION_KEY       | true     | `openssl rand -hex 32`         | Needed for 2 Factor Authentication                          |
+| SHORT_URL_BASE       | false    | `<your-short-base-url>`        | Needed if you want to enable shorter links for Link Surveys |
+| ASSET_PREFIX_URL     | false    | `<your-asset-hosted-base-url>` | Needed if you have a separate URL for hosted assets         |
+
+### Deprecated / Removed Environment Variables
+
+| Environment Variable | Comments                                                                  |
+| -------------------- | ------------------------------------------------------------------------- |
+| SURVEY_BASE_URL      | The WEBAPP_URL is now used to determine the survey base url in all places |
+
+## v1.0 -> v1.1
 
 Formbricks v1.1 includes a lot of new features and improvements. However, it also comes with a few breaking changes specifically with the environment variables. This guide will help you migrate your existing Formbricks instance to v1.1 without losing any data.
 
-## Changes in .env
-
 ### Renamed Environment Variables
+
 This was introduced because we got a lot of requests from our users for the ability to define some common environment variables at runtime itself i.e. without having to rebuild the image for the changes to take effect.
-This is now possible with v1.1. However, due to Next.JS best practices, we had to deprecate the prefix **NEXT_PUBLIC_** in the following environment variables:
+This is now possible with v1.1. However, due to Next.JS best practices, we had to deprecate the prefix **NEXT*PUBLIC*** in the following environment variables:
 
 | till v1.0                                   | v1.1                        |
 | ------------------------------------------- | --------------------------- |
-| **NEXT_PUBLIC_**EMAIL_VERIFICATION_DISABLED | EMAIL_VERIFICATION_DISABLED |
-| **NEXT_PUBLIC_**PASSWORD_RESET_DISABLED     | PASSWORD_RESET_DISABLED     |
-| **NEXT_PUBLIC_**SIGNUP_DISABLED             | SIGNUP_DISABLED             |
-| **NEXT_PUBLIC_**INVITE_DISABLED             | INVITE_DISABLED             |
-| **NEXT_PUBLIC_**PRIVACY_URL                 | PRIVACY_URL                 |
-| **NEXT_PUBLIC_**TERMS_URL                   | TERMS_URL                   |
-| **NEXT_PUBLIC_**IMPRINT_URL                 | IMPRINT_URL                 |
-| **NEXT_PUBLIC_**GITHUB_AUTH_ENABLED         | GITHUB_AUTH_ENABLED         |
-| **NEXT_PUBLIC_**GOOGLE_AUTH_ENABLED         | GOOGLE_AUTH_ENABLED         |
-| **NEXT_PUBLIC_**WEBAPP_URL                  | WEBAPP_URL                  |
-| **NEXT_PUBLIC_**IS_FORMBRICKS_CLOUD         | IS_FORMBRICKS_CLOUD         |
-| **NEXT_PUBLIC_**SURVEY_BASE_URL             | SURVEY_BASE_URL             |
+| **NEXT*PUBLIC***EMAIL_VERIFICATION_DISABLED | EMAIL_VERIFICATION_DISABLED |
+| **NEXT*PUBLIC***PASSWORD_RESET_DISABLED     | PASSWORD_RESET_DISABLED     |
+| **NEXT*PUBLIC***SIGNUP_DISABLED             | SIGNUP_DISABLED             |
+| **NEXT*PUBLIC***INVITE_DISABLED             | INVITE_DISABLED             |
+| **NEXT*PUBLIC***PRIVACY_URL                 | PRIVACY_URL                 |
+| **NEXT*PUBLIC***TERMS_URL                   | TERMS_URL                   |
+| **NEXT*PUBLIC***IMPRINT_URL                 | IMPRINT_URL                 |
+| **NEXT*PUBLIC***GITHUB_AUTH_ENABLED         | GITHUB_AUTH_ENABLED         |
+| **NEXT*PUBLIC***GOOGLE_AUTH_ENABLED         | GOOGLE_AUTH_ENABLED         |
+| **NEXT*PUBLIC***WEBAPP_URL                  | WEBAPP_URL                  |
+| **NEXT*PUBLIC***IS_FORMBRICKS_CLOUD         | IS_FORMBRICKS_CLOUD         |
+| **NEXT*PUBLIC***SURVEY_BASE_URL             | SURVEY_BASE_URL             |
 
 <Note>
-Please note that their values and the logic remains exactly the same. Only the prefix has been deprecated. The other environment variables remain the same as well.
+  Please note that their values and the logic remains exactly the same. Only the prefix has been deprecated.
+  The other environment variables remain the same as well.
 </Note>
 
 ### Deprecated Environment Variables
@@ -44,13 +64,15 @@ Please note that their values and the logic remains exactly the same. Only the p
 - **NEXT_PUBLIC_WEBAPP_URL**: Was used for the same purpose as WEBAPP_URL, but from v1.1, you can just set the WEBAPP_URL environment variable.
 - **PRISMA_GENERATE_DATAPROXY**: Was used to tell Prisma that it should generate the runtime for Dataproxy usage. But its officially deprecated now.
 
-## Helper Shell Script
+### Helper Shell Script
+
 For a seamless migration, below is a shell script for your self-hosted instance that will automatically update your environment variables to be compliant with the new naming conventions.
 
 ### Docker & Single Script Setup
 
 Now that these variables can be defined at runtime, you can append them inside your `x-environment` in the `docker-compose.yml` itself.
 For a more detailed guide on these environment variables, please refer to the [Important Runtime Variables](/docs/self-hosting/docker#important-run-time-variables) section.
+
 <Col>
 <CodeGroup title="docker-compose.yml">
 ```yaml {{ title: 'docker-compose.yml' }}
@@ -65,7 +87,7 @@ x-environment: &environment
 
     # NextJS Auth
     # @see: https://next-auth.js.org/configuration/options#nextauth_secret
-    # You can use: `openssl rand -base64 32` to generate one
+    # You can use: `openssl rand -hex 32` to generate one
     NEXTAUTH_SECRET:
 
     # Set this to your public-facing URL, e.g., https://example.com
@@ -106,7 +128,7 @@ x-environment: &environment
 
     # Uncomment the below and set to 1 if you want to enable GitHub OAuth
     # GITHUB_AUTH_ENABLED:
-    # GITHUB_ID: 
+    # GITHUB_ID:
     # GITHUB_SECRET:
 
     # Uncomment the below and set to 1 if you want to enable Google OAuth
@@ -117,4 +139,4 @@ x-environment: &environment
 ```
 </CodeGroup>
 </Col>
-Did we miss something? Are you still facing issues migrating your app? [Join our Discord!](https://formbricks.com/discord) We'd be happy to help!
+Did we miss something? Are you still facing issues migrating your app? [Join our Discord!](https://formbricks.com/discord) We'd be happy to help!

apps/formbricks-com/app/docs/self-hosting/production/page.mdx

@@ -1,4 +1,4 @@
-export const meta = {
+export const metadata = {
   title: "Step by Step Guide on Deploying Formbricks to Production on Ubuntu",
   description:
     "Master the swift deployment of Formbricks on an Ubuntu server with our step-by-step guide. Use a single command to automate Docker, Postgres DB, SSL certificate configuration, and more. Encounter issues? Dive into our troubleshooting steps or join our community on Discord for assistance.",

apps/formbricks-com/components/docs/Navigation.tsx

@@ -226,10 +226,11 @@ export const navigation: Array<NavGroup> = [
   {
     title: "Integrations",
     links: [
-      { title: "Zapier", href: "/docs/integrations/zapier" },
-      { title: "n8n", href: "/docs/integrations/n8n" },
-      { title: "Make.com", href: "/docs/integrations/make" },
+      { title: "Airtable", href: "/docs/integrations/airtable" },
       { title: "Google Sheets", href: "/docs/integrations/google-sheets" },
+      { title: "Make.com", href: "/docs/integrations/make" },
+      { title: "n8n", href: "/docs/integrations/n8n" },
+      { title: "Zapier", href: "/docs/integrations/zapier" },
     ],
   },
   {
@@ -246,17 +247,18 @@ export const navigation: Array<NavGroup> = [
       { title: "Deployment", href: "/docs/self-hosting/deployment" },
       { title: "Production", href: "/docs/self-hosting/production" },
       { title: "Docker", href: "/docs/self-hosting/docker" },
-      { title: "Migration to v1.1", href: "/docs/self-hosting/migrating-to-1.1" },
+      { title: "Migration Guide", href: "/docs/self-hosting/migration-guide" },
     ],
   },
   {
     title: "Contributing",
     links: [
       { title: "Introduction", href: "/docs/contributing/introduction" },
-      { title: "How we code at Formbricks", href: "/docs/contributing/how-we-code" },
+      { title: "Demo App", href: "/docs/contributing/demo" },
       { title: "Setup Dev Environment", href: "/docs/contributing/setup" },
       { title: "Gitpod", href: "/docs/contributing/gitpod" },
-      { title: "Demo App", href: "/docs/contributing/demo" },
+      { title: "How we code at Formbricks", href: "/docs/contributing/how-we-code" },
+      { title: "How to create a service", href: "/docs/contributing/creating-a-service" },
       { title: "Troubleshooting", href: "/docs/contributing/troubleshooting" },
       { title: "FAQ", href: "/docs/faq" },
     ],

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

@@ -1,14 +1,11 @@
-import HackIconGold from "@/images/formtribe/hack-icon-gold.svg";
+import PHIcon from "@/images/formtribe/ph-logo.png";
 import Image from "next/image";
 import Link from "next/link";
 
 export const GitHubSponsorship: React.FC = () => {
   return (
-    <div className="mx-4 my-4 mb-12 mt-12 rounded-xl bg-gradient-to-br from-slate-100 to-slate-200 px-4 py-8 dark:from-slate-800 dark:via-slate-800 dark:to-slate-700 sm:px-6 sm:pb-12 sm:pt-8 md:max-w-none lg:mt-6 lg:px-8 lg:pt-8">
-      <style jsx>{`
-        @media (min-width: 426px);
-      `}</style>
-      <div className="right-24 lg:absolute">
+    <Link href="https://www.producthunt.com/posts/formbricks" target="_blank">
+      <div className="my-12 grid w-full grid-cols-3 rounded-2xl border border-[#ff6154] bg-gradient-to-br from-slate-100 to-slate-200 p-12 transition-all hover:scale-105 dark:from-slate-800 dark:via-slate-800 dark:to-slate-700">
         {/*         <Image
           src={GitHubMarkDark}
           alt="GitHub Sponsors Formbricks badge"
@@ -23,20 +20,28 @@ export const GitHubSponsorship: React.FC = () => {
           height={100}
           className="mr-12 hidden dark:block md:mr-4"
         /> */}
-        <Image src={HackIconGold} alt="Hacktober Icon Gold" width={100} className="mr-12 md:mr-4" />
+
+        <div className="col-span-2">
+          <h2 className="text-2xl font-bold tracking-tight text-slate-800 dark:text-slate-200 lg:text-2xl">
+            We are live on ProductHunt today 🚀
+          </h2>
+          <p className="lg:text-md mt-2 max-w-3xl  text-slate-500 dark:text-slate-400">
+            Support our open source project with an upvote and comment.
+            <span>
+              <Link
+                href="https://www.producthunt.com/posts/formbricks"
+                className="ml-2 underline decoration-[#ff6154] underline-offset-4"
+                target="_blank">
+                View launch post.
+              </Link>
+            </span>
+          </p>
+        </div>
+        <div className="flex items-center justify-end">
+          <Image src={PHIcon} alt="Product Hunt Logo" width={80} className="" />
+        </div>
       </div>
-      <h2 className="mt-4 text-2xl font-bold tracking-tight text-slate-800 dark:text-slate-200 lg:text-2xl">
-        The FormTribe goes Hacktoberfest 🥨
-      </h2>
-      <p className="lg:text-md mt-4 max-w-3xl  text-slate-500 dark:text-slate-400">
-        Write code, win a Mac! We&apos;re running a Hacktoberfest community Hackathon:
-        <span>
-          <Link href="/formtribe" className="decoration-brand-dark ml-2 underline underline-offset-4">
-            Find out more.
-          </Link>
-        </span>
-      </p>
-    </div>
+    </Link>
   );
 };
 

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

@@ -20,30 +20,26 @@ export const Hero: React.FC = ({}) => {
     <div className="relative">
       <div className="px-4 pb-20 pt-16 text-center sm:px-6 lg:px-8 lg:pb-32 lg:pt-20">
         <a
-          href="https://formbricks.com/formtribe"
+          href="https://formbricks.com/github"
           target="_blank"
           className="border-brand-dark xs:text-sm animate-bounce rounded-full border px-4 py-1.5 text-xs text-slate-500 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800">
-          The FormTribe Hackathon is on 🔥
-          <ChevronRightIcon className="inline h-5 w-5 text-slate-300" />
+          We&apos;re Open Source - Star us on GitHub
+          <ChevronRightIcon className="mb-1 ml-1 inline h-4 w-4 text-slate-300" />
         </a>
         <h1 className="mt-10 text-3xl font-bold tracking-tight text-slate-800 dark:text-slate-200 sm:text-4xl md:text-5xl">
-          <span className="xl:inline">Open-source Experience Management</span>
+          <span className="xl:inline">The Open Source Survey Suite</span>
         </h1>
 
         <p className="xs:max-w-none mx-auto mt-3 max-w-xs text-base text-slate-500 dark:text-slate-400 sm:text-lg md:mt-5 md:text-xl">
-          Understand what customers think & feel about your product.
-          <br />
-          <span className="hidden md:block">
-            Natively integrate user research with minimal dev attention,{" "}
-            <span className="decoration-brand-dark underline underline-offset-4">privacy-first.</span>
-          </span>
+          Run link surveys, in-app surveys and email surveys in one app —{" "}
+          <span className="decoration-brand-dark underline underline-offset-4">all privacy-first.</span>
         </p>
 
-        <div className="mx-auto mt-5 max-w-3xl items-center px-4 sm:flex sm:justify-center md:mt-8 md:space-x-8 md:px-0">
+        <div className="mx-auto mt-5 max-w-2xl items-center px-4 sm:flex sm:justify-center md:mt-6 md:space-x-8 md:px-0">
           <p className="hidden whitespace-nowrap pt-3 text-xs text-slate-400 dark:text-slate-500 md:block">
             Trusted by
           </p>
-          <div className="grid grid-cols-4 items-center gap-5 pt-2 md:gap-8">
+          <div className="grid grid-cols-4 items-center gap-6 pt-2 md:gap-8">
             <Image
               src={CalLogoLight}
               alt="Cal Logo"
@@ -68,12 +64,6 @@ export const Hero: React.FC = ({}) => {
               className="hidden rounded-lg pb-1 hover:opacity-100 dark:block md:opacity-50"
               width={200}
             />
-            <Image
-              src={ClovyrLogo}
-              alt="Clovyr Logo"
-              className="rounded-lg pb-1 hover:opacity-100 md:opacity-50"
-              width={200}
-            />
             <Image
               src={NILogoDark}
               alt="Neverinstall Logo"
@@ -86,6 +76,12 @@ export const Hero: React.FC = ({}) => {
               className="hidden  pb-1 hover:opacity-100 dark:block md:opacity-50"
               width={200}
             />
+            <Image
+              src={ClovyrLogo}
+              alt="Clovyr Logo"
+              className="rounded-lg pb-1 hover:opacity-100 md:opacity-50"
+              width={200}
+            />
           </div>
         </div>
         <div className="hidden pt-10 md:block">
@@ -102,10 +98,10 @@ export const Hero: React.FC = ({}) => {
             variant="secondary"
             className="px-6"
             onClick={() => {
-              router.push("/demo");
-              plausible("Hero_CTA_LaunchDemo");
+              router.push("https://formbricks.com/github");
+              /*  plausible("Hero_CTA_LaunchDemo"); */
             }}>
-            Live demo
+            View Code on GitHub
           </Button>
         </div>
       </div>

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

@@ -1,5 +1,5 @@
-import Image from "next/image";
 import AuthorJohannes from "@/images/blog/johannes-co-founder-formbricks-small.jpg";
+import Image from "next/image";
 
 interface AuthorBoxProps {
   name: string;
@@ -23,12 +23,12 @@ export default function AuthorBox({ name, title, date, duration }: AuthorBoxProp
       />
       <div className="flex w-full items-end justify-between">
         <div>
-          <p className="m-0 font-medium text-slate-600 dark:text-slate-300">{name}</p>
-          <p className="m-0 text-sm text-slate-400">{title}</p>
+          <p className="leading-0 !m-0  font-medium text-slate-600 dark:text-slate-300">{name}</p>
+          <p className="!m-0 text-sm text-slate-400">{title}</p>
         </div>
         <div className="text-right">
-          <p className="m-0 font-medium text-slate-600 dark:text-slate-300">{duration} Minutes</p>
-          <p className="m-0 text-sm text-slate-400">{date}</p>
+          <p className="!m-0 font-medium text-slate-600 dark:text-slate-300">{duration} Minutes</p>
+          <p className="!m-0 text-sm text-slate-400">{date}</p>
         </div>
       </div>
     </div>

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

@@ -1,11 +1,6 @@
-import { Button } from "@formbricks/ui/Button";
-import { usePlausible } from "next-plausible";
-import { useRouter } from "next/router";
 import BestPracticeNavigation from "./BestPracticeNavigation";
 
 export default function InsightOppos() {
-  const plausible = usePlausible();
-  const router = useRouter();
   return (
     <div className="pb-10 pt-12 md:pt-20">
       <div className="px-4 py-20 text-center sm:px-6 lg:px-8" id="best-practices">
@@ -21,18 +16,6 @@ export default function InsightOppos() {
       </div>
 
       <BestPracticeNavigation />
-
-      <div className="mx-auto mt-4 w-fit px-4 py-2 text-center">
-        <Button
-          className="hidden md:block"
-          variant="highlight"
-          onClick={() => {
-            router.push("/demo");
-            plausible("subPractices_CTA_LaunchDemo");
-          }}>
-          Launch Live Demo
-        </Button>
-      </div>
     </div>
   );
 }

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

@@ -1,22 +1,47 @@
 // components/ui/CodeBlock.tsx
 import Prism from "prismjs";
 import "prismjs/themes/prism.css";
-import React, { useEffect } from "react";
+import React, { CSSProperties, useEffect } from "react";
 
 interface CodeBlockProps {
   children: React.ReactNode;
 }
 
+const styles: Record<string, CSSProperties> = {
+  div: {
+    position: "relative",
+    marginTop: "1rem",
+    borderRadius: "0.375rem",
+    fontSize: "0.875rem",
+    fontWeight: "lighter",
+    color: "#e5e7eb",
+  },
+  pre: {
+    background: "none",
+  },
+  code: {
+    textShadow: "none",
+    color: "#fbbf24",
+  },
+};
+
 const CodeBlock: React.FC<CodeBlockProps> = ({ children }) => {
   useEffect(() => {
     Prism.highlightAll();
   }, [children]);
 
   return (
-    <div className="group relative mt-4 rounded-md text-sm font-light text-slate-200 sm:text-base">
-      <pre>
-        <code className="language-js">{children}</code>
+    <div style={styles.div} className="code-block-container">
+      <pre style={styles.pre}>
+        <code style={styles.code} className="language-js">
+          {children}
+        </code>
       </pre>
+      <style jsx global>{`
+        .operator {
+          background: none !important;
+        }
+      `}</style>
     </div>
   );
 };

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

@@ -116,15 +116,15 @@ export default function Header() {
   }, []);
 
   const stickyNavClass = stickyNav
-    ? `bg-transparent shadow-md backdrop-blur-lg fixed top-0 z-30 w-full`
+    ? `bg-transparent dark:bg-slate-900/[0.8] shadow-md backdrop-blur-lg fixed top-0 z-30 w-full`
     : "relative";
   return (
     <Popover className={`${stickyNavClass}`} as="header">
-      <a href="https://www.producthunt.com/products/formbricks" target="_blank">
+      {/*       <a href="https://www.producthunt.com/posts/formbricks" target="_blank">
         <div className="hidden bg-[#ff6154] px-4 py-2 text-center text-sm text-white md:block lg:py-0">
-          We&apos;re launching soon on Product Hunt - get notified 🚀
+          We&apos;re live on Product Hunt - Show your support for Open Source 🚀
         </div>
-      </a>
+      </a> */}
       <div className="flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start ">
         <div className="flex w-0 flex-1 justify-start">
           <Link href="/">

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

@@ -59,7 +59,7 @@ export default function LayoutMdx({ meta, children }: Props) {
               )}
             </header>
           )}
-          <Prose className="prose-h2:text-2xl prose-h3:text-xl prose-a:text-slate-900 prose-a:hover:text-slate-900 prose-a:text-decoration-brand prose-a:not-italic ">
+          <Prose className="prose-h2:text-2xl prose-h2:mt-4 prose-p:text-base prose-p:mb-4 prose-h3:text-xl prose-a:text-slate-900 prose-a:hover:text-slate-900 prose-a:text-decoration-brand prose-a:not-italic ">
             {children}
           </Prose>
         </article>

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

@@ -1,162 +0,0 @@
-import { Button } from "@formbricks/ui/Button";
-import clsx from "clsx";
-import HeadingCentered from "./HeadingCentered";
-import { CheckIcon } from "@heroicons/react/24/outline";
-import { usePlausible } from "next-plausible";
-import { useRouter } from "next/router";
-
-const tiers = [
-  {
-    name: "Self-hosting",
-    priceMonthly: "free",
-    paymentRythm: "/always",
-    button: "secondary",
-    discounted: false,
-    highlight: false,
-    description: "Host Formbricks on your own server.",
-    features: [
-      "All Free features",
-      "Easy self-hosting (Docker)",
-      "Unlimited surveys",
-      "Unlimited responses",
-      "Unlimited team members",
-    ],
-    ctaName: "Read docs",
-    plausibleGoal: "Pricing_CTA_SelfHosting",
-    href: "/docs/self-hosting/deployment",
-  },
-  {
-    name: "Cloud",
-    href: "https://app.formbricks.com/auth/signup",
-    priceMonthly: "$0",
-    paymentRythm: "/month",
-    button: "highlight",
-    discounted: false,
-    highlight: true,
-    description: "Start with the 'Free forever' plan.",
-    features: [
-      "Unlimited surveys",
-      "In-product surveys",
-      "Link surveys",
-      "Remove branding",
-      "Granular targeting",
-      "30+ templates",
-      "API access",
-      "Integrations (Zapier, Make, ...)",
-      "Unlimited team members",
-      "100 responses per survey",
-    ],
-    ctaName: "Get started",
-    plausibleGoal: "Pricing_CTA_FreePlan",
-  },
-  {
-    name: "Cloud Pro",
-    href: "https://app.formbricks.com/auth/signup",
-    priceMonthly: "$99",
-    paymentRythm: "/month",
-    button: "secondary",
-    discounted: false,
-    highlight: false,
-    description: "All features, unlimited usage.",
-    features: ["Everything in 'Cloud'", "Unlimited responses per survey"],
-    ctaName: "Start for free",
-    plausibleGoal: "Pricing_CTA_ProPlan",
-  },
-];
-
-export default function Pricing() {
-  const plausible = usePlausible();
-  const router = useRouter();
-
-  return (
-    <div className="-mt-10 pb-20">
-      <div className="mx-auto max-w-7xl py-4 sm:px-6 sm:pb-6 lg:px-8" id="pricing">
-        <HeadingCentered heading="One price, unlimited usage." teaser="Pricing" />
-
-        <div className="mx-auto  space-y-4 px-4 lg:grid lg:grid-cols-3 lg:gap-6 lg:space-y-0 lg:px-0">
-          {tiers.map((tier) => (
-            <div
-              key={tier.name}
-              className={clsx(
-                `h-fit rounded-lg shadow-sm`,
-                tier.highlight
-                  ? "border border-slate-300 bg-slate-200 dark:border-slate-500 dark:bg-slate-800"
-                  : "bg-slate-100 dark:bg-slate-700"
-              )}>
-              <div className="p-8">
-                <h2
-                  className={clsx(
-                    "inline-flex text-3xl font-bold",
-                    tier.highlight
-                      ? "text-slate-700 dark:text-slate-200"
-                      : "text-slate-500 dark:text-slate-300"
-                  )}>
-                  {tier.name}
-                </h2>
-                <p className="mt-4 whitespace-pre-wrap text-sm text-slate-600 dark:text-slate-300">
-                  {tier.description}
-                </p>
-                <ul className="mt-4 space-y-4">
-                  {tier.features.map((feature, index) => (
-                    <li key={index} className="flex items-start">
-                      <div className="rounded-full border border-green-300 bg-green-100 p-0.5 dark:border-green-600 dark:bg-green-900">
-                        <CheckIcon className="h-5 w-5 p-0.5 text-green-500 dark:text-green-300" />
-                      </div>
-                      <span className="ml-2 text-sm text-slate-500 dark:text-slate-400">{feature}</span>
-                    </li>
-                  ))}
-                </ul>
-                <p className="mt-8">
-                  <span
-                    className={clsx(
-                      `text-4xl font-light`,
-                      tier.highlight
-                        ? "text-slate-800 dark:text-slate-100"
-                        : "text-slate-500 dark:text-slate-200",
-                      tier.discounted ? "decoration-brand line-through" : ""
-                    )}>
-                    {tier.priceMonthly}
-                  </span>{" "}
-                  <span className="text-4xl font-bold text-slate-900 dark:text-slate-50">
-                    {tier.discounted && "$49"}
-                  </span>
-                  <span
-                    className={clsx(
-                      "text-base font-medium",
-                      tier.highlight
-                        ? "text-slate-500 dark:text-slate-400"
-                        : "text-slate-400 dark:text-slate-500"
-                    )}>
-                    {tier.paymentRythm}
-                  </span>
-                </p>
-
-                <Button
-                  onClick={() => {
-                    plausible(`${tier.plausibleGoal}`);
-                    router.push(`${tier.href}`);
-                  }}
-                  className={clsx(
-                    "mt-6 w-full justify-center py-4 text-lg shadow-sm",
-                    tier.highlight
-                      ? ""
-                      : "bg-slate-300 hover:bg-slate-200 dark:bg-slate-600 dark:hover:bg-slate-500"
-                  )}
-                  variant={tier.highlight ? "highlight" : "secondary"}>
-                  {tier.ctaName}
-                </Button>
-
-                {tier.name == "Cloud Pro" && (
-                  <p className="mt-1.5 text-center text-xs text-slate-500">No Creditcard required.</p>
-                )}
-                {tier.name == "Cloud" && (
-                  <p className="mt-1.5 text-center text-xs text-slate-500">Free forever 🤍</p>
-                )}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,14 +1,14 @@
 import { Slider } from "@/components/shared/Slider";
 import { useState } from "react";
 
-const ProductItem = ({ label, usersCount, price, onSliderChange }) => (
+const LinkSurveySlider = ({ label, usersCount, price, onSliderChange }) => (
   <div className="mt-12">
     <div className="mb-2 flex items-center gap-x-2 md:gap-x-4">
       <div className="md:text-md w-3/6 text-left text-sm font-medium text-slate-700 dark:text-slate-200">
         {label}
       </div>
       <div className="md:text-md w-2/6 text-center text-sm font-medium text-slate-700 dark:text-slate-200">
-        {Math.round(usersCount).toLocaleString()} MTU
+        {Math.round(usersCount).toLocaleString()} Submissions
       </div>
       <div className="md:text-md flex w-1/6 items-center justify-end text-center text-sm font-medium text-slate-700 dark:text-slate-200 md:justify-center">
         <span>${price.toFixed(2)}</span>
@@ -34,6 +34,72 @@ const ProductItem = ({ label, usersCount, price, onSliderChange }) => (
   </div>
 );
 
+const InAppSlider = ({ label, usersCount, price, onSliderChange }) => (
+  <div className="mt-12">
+    <div className="mb-2 flex items-center gap-x-2 md:gap-x-4">
+      <div className="md:text-md w-3/6 text-left text-sm font-medium text-slate-700 dark:text-slate-200">
+        {label}
+      </div>
+      <div className="md:text-md w-2/6 text-center text-sm font-medium text-slate-700 dark:text-slate-200">
+        {Math.round(usersCount).toLocaleString()} Submissions
+      </div>
+      <div className="md:text-md flex w-1/6 items-center justify-end text-center text-sm font-medium text-slate-700 dark:text-slate-200 md:justify-center">
+        <span>${price.toFixed(2)}</span>
+      </div>
+    </div>
+    <div className="my-2 w-5/6 pr-8 md:pr-20">
+      <Slider
+        className="slider-class"
+        defaultValue={[Math.log10(250)]}
+        min={3}
+        max={6}
+        step={0.01}
+        onValueChange={onSliderChange}
+      />
+      <div className="mt-2 flex items-center justify-between text-sm">
+        {[3, 4, 5, 6].map((mark) => (
+          <span key={mark} className="text-slate-600 dark:text-slate-300">
+            {mark === 3 ? "1K" : mark === 4 ? "10K" : mark === 5 ? "100K" : "1M"}
+          </span>
+        ))}
+      </div>
+    </div>
+  </div>
+);
+
+const UserSegmentationSlider = ({ label, usersCount, price, onSliderChange }) => (
+  <div className="mt-12">
+    <div className="mb-2 flex items-center gap-x-2 md:gap-x-4">
+      <div className="md:text-md w-3/6 text-left text-sm font-medium text-slate-700 dark:text-slate-200">
+        {label}
+      </div>
+      <div className="md:text-md w-2/6 text-center text-sm font-medium text-slate-700 dark:text-slate-200">
+        {Math.round(usersCount).toLocaleString()} Submissions
+      </div>
+      <div className="md:text-md flex w-1/6 items-center justify-end text-center text-sm font-medium text-slate-700 dark:text-slate-200 md:justify-center">
+        <span>${price.toFixed(2)}</span>
+      </div>
+    </div>
+    <div className="my-2 w-5/6 pr-8 md:pr-20">
+      <Slider
+        className="slider-class"
+        defaultValue={[Math.log10(250)]}
+        min={3}
+        max={6}
+        step={0.01}
+        onValueChange={onSliderChange}
+      />
+      <div className="mt-2 flex items-center justify-between text-sm">
+        {[3, 4, 5, 6].map((mark) => (
+          <span key={mark} className="text-slate-600 dark:text-slate-300">
+            {mark === 3 ? "1K" : mark === 4 ? "10K" : mark === 5 ? "100K" : "1M"}
+          </span>
+        ))}
+      </div>
+    </div>
+  </div>
+);
+
 const Headers = () => (
   <div className="mb-4 flex justify-between">
     <h3 className="text-base font-semibold text-slate-700 dark:text-slate-200 md:text-lg">Product</h3>
@@ -89,16 +155,7 @@ export const PricingCalculator = () => {
 
           <hr className="my-4" />
 
-          <ProductItem
-            label="In Product Surveys"
-            usersCount={usersCountForInProductSlider}
-            price={productSurveysPrice}
-            onSliderChange={(value) => setInProductSlider(value[0])}
-          />
-
-          <hr className="my-4" />
-
-          <ProductItem
+          <LinkSurveySlider
             label="Link Surveys"
             usersCount={transformToLog(linkSlider)}
             price={0}
@@ -107,6 +164,22 @@ export const PricingCalculator = () => {
 
           <hr className="my-4" />
 
+          <InAppSlider
+            label="Website and In-App Surveys"
+            usersCount={transformToLog(linkSlider)}
+            price={0}
+            onSliderChange={(value) => setLinkSlider(value[0])}
+          />
+
+          <hr className="my-4" />
+
+          <UserSegmentationSlider
+            label="User Segmentation"
+            usersCount={usersCountForInProductSlider}
+            price={productSurveysPrice}
+            onSliderChange={(value) => setInProductSlider(value[0])}
+          />
+
           <MonthlyEstimate price={productSurveysPrice} />
         </div>
       </div>

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

@@ -8,6 +8,7 @@ export const PricingTable = ({ leadRow, pricing, endRow }) => {
         <div className="flex items-center gap-x-4">
           <div className="w-1/3 text-left font-semibold text-slate-700 dark:text-slate-200 md:text-xl">
             {leadRow.title}
+            <span className="pl-2 text-sm font-normal text-slate-600">{leadRow.comparison}</span>
           </div>
           <div
             className="flex w-1/3 items-center justify-center text-center text-sm font-semibold
@@ -27,10 +28,15 @@ export const PricingTable = ({ leadRow, pricing, endRow }) => {
             <div className="w-1/3 text-left text-sm text-slate-700 dark:text-slate-200 md:text-base">
               {feature.name}
               {feature.addOnText && (
-                <span className=" mx-2 bg-teal-100 p-1 text-xs text-slate-400 dark:bg-slate-700 dark:text-teal-500">
+                <span className=" mx-3 rounded-full bg-emerald-200 px-2 text-xs text-slate-800 dark:bg-slate-700 dark:text-teal-500">
                   Addon
                 </span>
               )}
+              {feature.comingSoon && (
+                <span className="mx-3 rounded-full bg-slate-200 px-2 text-xs text-slate-800 dark:bg-slate-700 dark:text-teal-500">
+                  coming soon
+                </span>
+              )}
             </div>
             <div className="flex w-1/3 items-center justify-center text-center text-sm text-slate-800 dark:text-slate-100">
               {feature.addOnText ? (

apps/formbricks-com/components/shared/ThemeSelector.jsx

@@ -1,12 +1,4 @@
 import { useEffect, useState } from "react";
-import { Listbox } from "@headlessui/react";
-import clsx from "clsx";
-
-const themes = [
-  { name: "Light", value: "light", icon: LightIcon },
-  { name: "Dark", value: "dark", icon: DarkIcon },
-  { name: "System", value: "system", icon: SystemIcon },
-];
 
 function LightIcon(props) {
   return (
@@ -32,80 +24,37 @@ function DarkIcon(props) {
   );
 }
 
-function SystemIcon(props) {
-  return (
-    <svg aria-hidden="true" viewBox="0 0 16 16" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M1 4a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3h-1.5l.31 1.242c.084.333.36.573.63.808.091.08.182.158.264.24A1 1 0 0 1 11 15H5a1 1 0 0 1-.704-1.71c.082-.082.173-.16.264-.24.27-.235.546-.475.63-.808L5.5 11H4a3 3 0 0 1-3-3V4Zm3-1a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H4Z"
-      />
-    </svg>
-  );
-}
-
 export function ThemeSelector(props) {
-  const [selectedTheme, setSelectedTheme] = useState(null);
+  // Initialize the state with a default value
+  const [isDarkMode, setIsDarkMode] = useState(true);
 
+  // Use a useEffect to run code on the client side
   useEffect(() => {
-    if (selectedTheme) {
-      document.documentElement.setAttribute("data-theme", selectedTheme.value);
-    } else {
-      setSelectedTheme(
-        themes.find((theme) => theme.value === document.documentElement.getAttribute("data-theme"))
-      );
-    }
-  }, [selectedTheme]);
+    // Check the system theme on the client side
+    const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
 
-  useEffect(() => {
-    let handler = () =>
-      setSelectedTheme(themes.find((theme) => theme.value === (window.localStorage.theme ?? "system")));
+    // Update the state based on the system theme
+    setIsDarkMode(systemTheme);
 
-    window.addEventListener("storage", handler);
-
-    return () => window.removeEventListener("storage", handler);
+    // Set the HTML attribute based on the initial state
+    document.documentElement.setAttribute("data-theme", systemTheme ? "dark" : "light");
   }, []);
 
+  const toggleTheme = () => {
+    setIsDarkMode(!isDarkMode);
+    document.documentElement.setAttribute("data-theme", isDarkMode ? "light" : "dark");
+  };
+
   return (
-    <Listbox as="div" value={selectedTheme} onChange={setSelectedTheme} {...props}>
-      <Listbox.Label className="sr-only">Theme</Listbox.Label>
-      <Listbox.Button
-        className="flex h-6 w-6 items-center justify-center rounded-lg shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5"
-        aria-label={selectedTheme?.name}>
-        <LightIcon className="fill-brand hidden h-4 w-4 [[data-theme=light]_&]:block" />
-        <DarkIcon className="fill-brand hidden h-4 w-4 [[data-theme=dark]_&]:block" />
-        <LightIcon className="hidden h-4 w-4 fill-slate-400 [:not(.dark)[data-theme=system]_&]:block" />
-        <DarkIcon className="hidden h-4 w-4 fill-slate-400 [.dark[data-theme=system]_&]:block" />
-      </Listbox.Button>
-      <Listbox.Options className="absolute left-1/2 top-full mt-3 w-36 -translate-x-1/2 space-y-1 rounded-xl bg-white p-3 text-sm font-medium shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-800 dark:ring-white/5">
-        {themes.map((theme) => (
-          <Listbox.Option
-            key={theme.value}
-            value={theme}
-            className={({ active, selected }) =>
-              clsx("flex cursor-pointer select-none items-center rounded-[0.625rem] p-1", {
-                "text-brand-dark dark:text-brand-light": selected,
-                "text-slate-800 dark:text-slate-100": active && !selected,
-                "text-slate-700 dark:text-slate-400": !active && !selected,
-                "bg-slate-100 dark:bg-slate-900/40": active,
-              })
-            }>
-            {({ selected }) => (
-              <>
-                <div className="rounded-md bg-white p-1 shadow ring-1 ring-slate-900/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5">
-                  <theme.icon
-                    className={clsx(
-                      "h-4 w-4",
-                      selected ? "fill-brand-dark dark:fill-brand-light" : "fill-slate-400"
-                    )}
-                  />
-                </div>
-                <div className="ml-3">{theme.name}</div>
-              </>
-            )}
-          </Listbox.Option>
-        ))}
-      </Listbox.Options>
-    </Listbox>
+    <div
+      className="shadow-black/8 mr-5 flex h-6 w-6 items-center justify-center rounded-lg shadow-md ring-1 ring-black/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5"
+      onClick={toggleTheme}
+      style={{ cursor: "pointer" }}>
+      {isDarkMode ? (
+        <DarkIcon className="fill-brand h-4 w-4" />
+      ) : (
+        <LightIcon className="fill-brand h-4 w-4" />
+      )}
+    </div>
   );
 }

apps/formbricks-com/next.config.mjs

@@ -132,7 +132,7 @@ const nextConfig = {
       },
       {
         source: "/launch",
-        destination: "https://www.producthunt.com/products/formbricks",
+        destination: "https://www.producthunt.com/posts/formbricks",
         permanent: true,
       },
       {
@@ -145,12 +145,16 @@ const nextConfig = {
         destination: "https://app.formbricks.com/s/clhys1p9r001cpr0hu65rwh17",
         permanent: true,
       },
+      {
+        source: "/docs/self-hosting/migrating-to-1.1",
+        destination: "/docs/self-hosting/migration-guide",
+        permanent: true,
+      },
       {
         source: "/cla",
         destination: "https://formbricks.com/clmyhzfrymr4ko00hycsg1tvx",
         permanent: true,
       },
-      
     ];
   },
   async rewrites() {

apps/formbricks-com/package.json

@@ -38,7 +38,7 @@
     "lottie-web": "^5.12.2",
     "mdast-util-to-string": "^4.0.0",
     "mdx-annotations": "^0.1.3",
-    "next": "13.5.5",
+    "next": "13.4.19",
     "next-plausible": "^3.11.1",
     "next-seo": "^6.1.0",
     "next-sitemap": "^4.2.3",

apps/formbricks-com/pages/_app.tsx

@@ -2,10 +2,21 @@ import PlausibleProvider from "next-plausible";
 import type { AppProps } from "next/app";
 import "../styles/globals.css";
 
+import { Jost } from "next/font/google";
+
+const jost = Jost({
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
+  style: ["normal", "italic"],
+  subsets: ["latin"],
+  display: "swap",
+});
+
 export default function App({ Component, pageProps }: AppProps) {
   return (
-    <PlausibleProvider domain="formbricks.com" selfHosted={true}>
-      <Component {...pageProps} />
-    </PlausibleProvider>
+    <div className={jost.className}>
+      <PlausibleProvider domain="formbricks.com" selfHosted={true}>
+        <Component {...pageProps} />
+      </PlausibleProvider>
+    </div>
   );
 }

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

@@ -52,6 +52,11 @@ export default async function handle(req: NextApiRequest, res: NextApiResponse)
             "Survey granular user segments at any point in the user journey. Gather up to 6x more insights with targeted micro-surveys. All open-source.",
           href: "https://formbricks.com",
         },
+        {
+          name: "Firecamp",
+          description: "vscode for apis, open-source postman/insomnia alternative",
+          href: "https://firecamp.io",
+        },
         {
           name: "Ghostfolio",
           description:
@@ -139,6 +144,12 @@ export default async function handle(req: NextApiRequest, res: NextApiResponse)
             "Sniffnet is a network monitoring tool to help you easily keep track of your Internet traffic.",
           href: "https://www.sniffnet.net",
         },
+        {
+          name: "Spark.NET",
+          description:
+            "The .NET Web Framework for Makers. Build production ready, full-stack web applications fast without sweating the small stuff.",
+          href: "https://spark-framework.net",
+        },
         {
           name: "Tolgee",
           description: "Software localization from A to Z made really easy.",
@@ -162,6 +173,12 @@ export default async function handle(req: NextApiRequest, res: NextApiResponse)
             "A modern CRM offering the flexibility of open-source, advanced features and sleek design.",
           href: "https://twenty.com",
         },
+        {
+          name: "Unkey",
+          description:
+            "An API authentication and authorization platform for scaling user facing APIs. Create, verify, and manage low latency API keys in seconds.",
+          href: "https://unkey.dev",
+        },
         {
           name: "Webiny",
           description:
@@ -173,17 +190,6 @@ export default async function handle(req: NextApiRequest, res: NextApiResponse)
           description: "Webstudio is an open source alternative to Webflow",
           href: "https://webstudio.is",
         },
-        {
-          name: "Spark.NET",
-          description:
-            "The .NET Web Framework for Makers. Build production ready, full-stack web applications fast without sweating the small stuff.",
-          href: "https://spark-framework.net",
-        },
-        {
-          name: "Firecamp",
-          description: "vscode for apis, open-source postman/insomnia alternative",
-          href: "https://firecamp.io",
-        },
       ],
     });
   }

apps/formbricks-com/pages/blog/preseed-announcement/index.mdx

@@ -0,0 +1,56 @@
+import Image from "next/image";
+import LayoutMdx from "@/components/shared/LayoutMdx";
+import AuthorBox from "@/components/shared/AuthorBox";
+import Preseed from "./preseed-header.webp";
+
+export const meta = {
+  title: "We raised Pre-Seed Funding 💸",
+  description:
+    "We’re delighted to announce that Formbricks successfully acquired pre-seed funding in May 2023.",
+  date: "2023-11-01",
+  publishedTime: "2023-11-01T12:00:00",
+  authors: ["Johannes"],
+  section: "Open Source Surveys",
+  tags: ["Open Source Surveys", "Formbricks", "Typeform", "SurveyJS", "Typebot", "OpnForm", "LimeSurvey"],
+};
+
+<Image
+  src={Preseed}
+  alt="Formbricks raises a preseed round led by OSS Capital"
+  className="w-full rounded-lg"
+/>
+
+_We’re delighted to announce that Formbricks successfully acquired pre-seed funding in May 2023._
+
+<AuthorBox name="Johannes" title="Co-Founder" date="November 1st, 2023" duration="2" />
+
+The Formbricks pre-seed round was led by [OSS Capital](https://oss.capital/portfolio) with participation of Peer Richelsen, co-founder at [Cal.com](http://Cal.com), as well as other angel investors.
+
+## OSS Capital leads the round
+
+We are both humbled and excited to have won such highly specialized and experienced investors for our mission! This influx of capital allows us to be even more ambitious in shaping the future of Experience Management globally.
+
+We are on a mission to enable organizations to **gather, analyze and leverage** qualitative data to improve customer experience from first principles. Building Open Source uniquely allows us to offer a privacy-first solution which can be natively embedded into existing products and services.
+
+Even in large organizations, every product decision **can** be based on user insight. We make that possible.
+
+## How it started, and how it's going
+
+Matti and Johannes kicked this off as a side project a good year ago. Today, we have several thousand users collecting valuable insights with both in-product surveys and standalone surveys.
+
+Over the past couple of months, we gathered:
+
+- 4.000+ GitHub stars ⭐
+- 3.200+ Dockerhub clones 🐳
+- 750+ Discord Members 👻
+- 120+ community contributors 👨‍👩‍👧
+
+… and we are just warming up!
+
+Our journey has just begun, and with the support of our investors and the enthusiasm of our community, we can’t wait to see where we stand 6 months from now!
+
+## Onwards,
+
+The Formbricks Team 🤍
+
+export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;

apps/formbricks-com/pages/formtribe/index.tsx

@@ -50,21 +50,11 @@ const HowTo = [
 ];
 
 const SideQuests = [
-  {
-    points: "Join the Tribe Tweet (100 Points)",
-    quest: "Tweet a single “🧱” emoji before the 7th of October EOD to join the #FormTribe.",
-    proof: "Share the link to the tweet in the “side-quest” channel.",
-  },
   {
     points: "Spread the Word Tweet (100 Points)",
     quest: "Tweet “🧱🚀” on the day of the ProductHunt launch to spread the word.",
     proof: "Share the link to the tweet in the “side-quest” channel.",
   },
-  {
-    points: "Setup Insights (200 Points)",
-    quest: "Screen record yourself setting up the Formbricks dev environment.",
-    proof: "Upload to WeTransfer and send to johannes@formbricks.com",
-  },
   {
     points: "Meme Magic (50 Points + up to 100 Points)",
     quest:
@@ -82,25 +72,15 @@ const SideQuests = [
     quest: "Illustrate a captivating background for survey enthusiasts (more infos on Notion).",
     proof: "Share the design in the “side-quest” channel.",
   },
-  {
-    points: "Transform Animation to CSS (350 Points per background)",
-    quest: "Animate an existing background to CSS versions (more infos on Notion).",
-    proof: "Share the animated background.",
-  },
-  {
-    points: "Enhance Docs (50-250 Points)",
-    quest:
-      "Add a new section to our docs where you see gaps. Follow the current style of documentation incl. code snippets and screenshots. Pls no spam.",
-    proof: "Open a PR with “docs” in the title",
-  },
   {
     points: "Starry-eyed Supporter (250 Points)",
     quest: "Get five friends to star our repository.",
     proof: "Share 5 screenshots of the chats where you asked them and they confirmed + their GitHub names",
   },
   {
-    points: "Bug Hunter (50-250 Points)",
-    quest: "Find and report any functionality bugs.",
+    points: "Bug Hunter (100 Points)",
+    quest:
+      "Find and report any bugs in our core product. We will close all bugs on the landing page bc we don't have time for that before the launch :)",
     proof: "Open a bug issue in our repository.",
   },
   {
@@ -109,11 +89,6 @@ const SideQuests = [
       "Find someone whose name would be funny as a play on words with “brick”. Then, with the help of AI, create a brick version of this person like Brick Astley, Brickj Minaj, etc. For extra points, tweet it, tag us and score +5 for each like.",
     proof: "Share your art or link to the tweet in the “side-quest” channel.",
   },
-  {
-    points: "SEO Sage (50-250 Points)",
-    quest: "Provide detailed SEO recommendations or improvements for our main website.",
-    proof: "Share your insights.",
-  },
   {
     points: "Community Connector (50 points each, up to 250 points)",
     quest:
@@ -269,12 +244,12 @@ const FAQ = [
 const Leaderboard = [
   {
     name: "Piyush",
-    points: "1600",
+    points: "4045",
     link: "https://github.com/gupta-piyush19",
   },
   {
     name: "Suman",
-    points: "700",
+    points: "1000",
   },
   {
     name: "Subhdeep",
@@ -282,7 +257,7 @@ const Leaderboard = [
   },
   {
     name: "Pratik",
-    points: "350",
+    points: "1350",
   },
   {
     name: "Karuppiah",
@@ -302,7 +277,7 @@ const Leaderboard = [
   },
   {
     name: "Naitik Kapadia (Arjun)",
-    points: "1500",
+    points: "3250",
     link: "https://github.com/KapadiaNaitik",
   },
   {
@@ -343,7 +318,7 @@ const Leaderboard = [
   },
   {
     name: "Nafees Nazik",
-    points: "100",
+    points: "600",
   },
   {
     name: "monk",
@@ -359,12 +334,12 @@ const Leaderboard = [
   },
   {
     name: "Aditya Deshlahre",
-    points: "1220",
+    points: "2120",
     link: "https://github.com/adityadeshlahre",
   },
   {
     name: "Rutam",
-    points: "955",
+    points: "1105",
   },
   {
     name: "Sagnik Sahoo",
@@ -391,8 +366,8 @@ const Leaderboard = [
     points: "205",
   },
   {
-    name: "noobcoder",
-    points: "250",
+    name: "thanmaisai",
+    points: "2825",
   },
   {
     name: "Rayyan Alam (Rayy)",
@@ -412,7 +387,7 @@ const Leaderboard = [
   },
   {
     name: "Anjaneya Gupta",
-    points: "1150",
+    points: "3150",
   },
   {
     name: "Sachin Kuber",
@@ -445,7 +420,7 @@ const Leaderboard = [
   },
   {
     name: "Abhinav Arya",
-    points: "550",
+    points: "1100",
     link: "github.com/itzabhinavarya",
   },
   {
@@ -454,7 +429,7 @@ const Leaderboard = [
   },
   {
     name: "Rohan Gupta",
-    points: "1150",
+    points: "1350",
     link: "https://github.com/rohan9896",
   },
   {
@@ -509,7 +484,7 @@ const Leaderboard = [
   },
   {
     name: "Bilal Mirza",
-    points: "925",
+    points: "2095",
   },
   {
     name: "Asharan2511",
@@ -545,19 +520,19 @@ const Leaderboard = [
   },
   {
     name: "Moheyt",
-    points: "400",
+    points: "550",
   },
   {
     name: "ortin779",
-    points: "125",
+    points: "275",
   },
   {
     name: "Piyush Garg",
-    points: "100",
+    points: "650",
   },
   {
     name: "Sachin Mittal",
-    points: "100",
+    points: "850",
   },
   {
     name: "Sha1kh4",
@@ -589,7 +564,7 @@ const Leaderboard = [
   },
   {
     name: "aashish",
-    points: "350",
+    points: "980",
   },
   {
     name: "AliYar-Khan",
@@ -615,6 +590,58 @@ const Leaderboard = [
     name: "Vineetjk",
     points: "50",
   },
+  {
+    name: "Hemanth Wasthere",
+    points: "100",
+  },
+  {
+    name: "Ola",
+    points: "1800",
+  },
+  {
+    name: "Olalaye Blessing",
+    points: "150",
+  },
+  {
+    name: "Raju Gangitla",
+    points: "100",
+  },
+  {
+    name: "Ronit Panda",
+    points: "1650",
+  },
+  {
+    name: "Shyam Raghu",
+    points: "500",
+  },
+  {
+    name: "Vikas Patil",
+    points: "250",
+  },
+  {
+    name: "0Armaan025",
+    points: "100",
+  },
+  {
+    name: "mandharet",
+    points: "100",
+  },
+  {
+    name: "Harshit Vashisht",
+    points: "200",
+  },
+  {
+    name: "JiyaGupta-cs",
+    points: "50",
+  },
+  {
+    name: "Kurayami",
+    points: "100",
+  },
+  {
+    name: "Sandy-1711",
+    points: "50",
+  },
 ];
 
 export default function FormTribeHackathon() {
@@ -636,7 +663,7 @@ export default function FormTribeHackathon() {
 
       <div className="px-4 pb-16 pt-16 text-center sm:px-6 lg:px-8 lg:pb-32 lg:pt-20">
         <a
-          href="https://www.producthunt.com/products/formbricks"
+          href="https://www.producthunt.com/posts/formbricks"
           target="_blank"
           className=" rounded-full border bg-slate-100 px-4 py-1.5 text-sm text-slate-500 hover:scale-105">
           Don&apos;t miss the launch! Get notified 🚀
@@ -1099,7 +1126,7 @@ const Breaker = ({ icon, title }) => {
       <div className="mt-4 flex items-center justify-center">
         <Image src={PHLogo} alt="ph-logo" className="mr-2 h-8 w-8" />
         <a
-          href="https://www.producthunt.com/products/formbricks"
+          href="https://www.producthunt.com/posts/formbricks"
           target="_blank"
           className="text-sm font-semibold text-[#ff6154]">
           Get notified on Product Hunt.

apps/formbricks-com/pages/index.tsx

@@ -14,9 +14,9 @@ const IndexPage = () => (
     title="Formbricks | Privacy-first Experience Management"
     description="Build qualitative user research into your product. Leverage Best practices to increase Product-Market Fit.">
     <Hero />
-    <div className="hidden lg:block">
+    {/*     <div className="hidden lg:block">
       <GitHubSponsorship />
-    </div>
+    </div> */}
     <BestPractices />
     <Features />
     <Highlights />

apps/formbricks-com/pages/pricing.tsx

@@ -2,51 +2,76 @@ import HeroTitle from "@/components/shared/HeroTitle";
 import Layout from "@/components/shared/Layout";
 import { OpenSourceInfo } from "@/components/shared/OpenSourceInfo";
 import { GetStartedWithPricing } from "@/components/shared/PricingGetStarted";
-import { PricingCalculator } from "../components/shared/PricingCalculator";
 import { PricingTable } from "../components/shared/PricingTable";
 
 const inProductSurveys = {
   leadRow: {
-    title: "In-Product Surveys",
+    title: "Website and In-App Surveys",
+    comparison: "like HotJar",
     free: (
       <div>
-        <span>5000 tracked users</span> <span className="text-slate-400">/mo</span>{" "}
+        <span>250 Submissions</span> <span className="text-slate-400">/ Month</span>{" "}
       </div>
     ),
     paid: "Unlimited",
   },
   features: [
     { name: "Unlimited Surveys", free: true, paid: true },
-    { name: "Granular Targeting", free: true, paid: true },
-    { name: "30+ Templates", free: true, paid: true },
-    { name: "API Access", free: true, paid: true },
-    { name: "Third-Party Integrations", free: true, paid: true },
     { name: "Unlimited Team Members", free: true, paid: true },
-    { name: "Unlimited Responses per Survey", free: true, paid: true },
-    { name: "Advanced User Targeting", free: false, paid: true },
-    { name: "Multi Language", free: false, paid: true },
-
-    {
-      name: "Custom URL for Link Surveys",
-      free: "10$/mo",
-      paid: "10$/mo",
-      addOnText: "Free if you self-host",
-    },
-    {
-      name: "Remove Formbricks Branding",
-      free: "10$/mo",
-      paid: "10$/mo",
-      addOnText: "Free if you self-host",
-    },
+    { name: "API Access", free: true, paid: true },
+    { name: "30+ Templates", free: true, paid: true },
+    { name: "Unlimited Responses per Survey", free: false, paid: true },
+    { name: "Team Role Management", free: false, paid: true, comingSoon: true },
+    { name: "Advanced User Targeting", free: false, paid: true, comingSoon: true },
+    { name: "Multi Language Surveys", free: false, paid: true, comingSoon: true },
   ],
   endRow: {
-    title: "In-Product Surveys Pricing",
+    title: "Website and In-App Surveys",
     free: "Free",
     paid: (
       <div>
-        <span>Free</span> <span className="text-slate-400">up to 5000 tracked users/mo, then </span>
-        <span>$0.005</span>
-        <span className="text-slate-400"> / tracked user</span>
+        <span>Free</span>{" "}
+        <span className="text-slate-400">
+          up to 250 submissions / month <br />
+          then{" "}
+        </span>
+        <span>$0.15</span>
+        <span className="text-slate-400"> / submission</span>
+      </div>
+    ),
+  },
+};
+
+const userSegmentation = {
+  leadRow: {
+    title: "User Segmentation",
+    comparison: "like Segment",
+    free: (
+      <div>
+        <span>2500 Users</span> <span className="text-slate-400">/ Month</span>{" "}
+      </div>
+    ),
+    paid: "Unlimited",
+  },
+  features: [
+    { name: "Identify Users", free: true, paid: true },
+    { name: "Collect Events", free: true, paid: true },
+    { name: "Collect Attributes", free: true, paid: true },
+    { name: "Advanced User Targeting", free: false, paid: true, comingSoon: true },
+    { name: "Reusable Segments", free: false, paid: true, comingSoon: true },
+  ],
+  endRow: {
+    title: "User Segmentation like Segment",
+    free: "Free",
+    paid: (
+      <div>
+        <span>Free</span>{" "}
+        <span className="text-slate-400">
+          up to 2500 users / month <br />
+          then{" "}
+        </span>
+        <span>$0.01</span>
+        <span className="text-slate-400"> / user</span>
       </div>
     ),
   },
@@ -55,6 +80,7 @@ const inProductSurveys = {
 const linkSurveys = {
   leadRow: {
     title: "Link Surveys",
+    comparison: "like Typeform",
     free: <span>Unlimited</span>,
     paid: "Unlimited",
   },
@@ -63,20 +89,22 @@ const linkSurveys = {
     { name: "Unlimited Surveys", free: true, paid: true },
     { name: "Unlimited Responses", free: true, paid: true },
     { name: "Partial Responses", free: true, paid: true },
-    { name: "⚙️ URL Shortener", free: true, paid: true },
-    { name: "⚙️ Recall Information", free: true, paid: true },
-    { name: "⚙️ Hidden Field Questions", free: true, paid: true },
-    { name: "⚙️ Time to Complete Metadata", free: true, paid: true },
-    { name: "⚙️ File Upload", free: true, paid: true },
-    { name: "⚙️ Signature Question", free: true, paid: true },
-    { name: "⚙️ Question Grouping", free: true, paid: true },
-    { name: "⚙️ Add Media to Questions", free: true, paid: true },
+    { name: "Multi-media Backgrounds", free: true, paid: true },
+    { name: "File Upload", free: true, paid: true, comingSoon: true },
+    { name: "Hidden Fields", free: true, paid: true },
+    { name: "Single Use Survey Links", free: true, paid: true },
+    { name: "Pin-protected Surveys", free: true, paid: true },
+    { name: "Custom Styling", free: true, paid: true, comingSoon: true },
+    { name: "Recall Information", free: true, paid: true, comingSoon: true },
+    { name: "Collect Payments, Signatures and Appointments", free: true, paid: true, comingSoon: true },
+    { name: "Custom URL", free: false, paid: true },
+    { name: "Remove Formbricks Branding", free: false, paid: true },
   ],
 
   endRow: {
     title: "Link Surveys Pricing",
     free: "Free",
-    paid: "Free",
+    paid: "$30 / month",
   },
 };
 
@@ -89,9 +117,11 @@ const integrations = {
   features: [
     { name: "Webhooks", free: true, paid: true },
     { name: "Zapier", free: true, paid: true },
-    { name: "Google Sheets", free: true, paid: true },
+    { name: "Notion", free: true, paid: true },
     { name: "n8n", free: true, paid: true },
     { name: "Make", free: true, paid: true },
+    { name: "Google Sheets", free: true, paid: true },
+    { name: "Airtable", free: true, paid: true },
   ],
   endRow: {
     title: "Integrations Pricing",
@@ -104,27 +134,74 @@ const PricingPage = () => {
   return (
     <Layout
       title="Pricing | Formbricks Open Source Experience Management"
-      description="Choose what's best for you! All our plans start free.">
+      description="All our plans start free - choose what's best for you!">
+      {/* Formbricks Unlimited Deal */}
+      {/* <div className="relative isolate mx-5 mt-8 overflow-hidden rounded-lg bg-slate-50 px-3 pt-4 shadow-2xl dark:bg-slate-800 sm:px-8 md:pt-8 lg:gap-x-10 lg:px-12 lg:pt-0">
+        <svg
+          viewBox="0 0 1024 1024"
+          className="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
+          aria-hidden="true">
+          <circle
+            cx={512}
+            cy={512}
+            r={512}
+            fill="url(#759c1415-0410-454c-8f7c-9a820de03641)"
+            fillOpacity="0.7"
+          />
+          <defs>
+            <radialGradient id="759c1415-0410-454c-8f7c-9a820de03641">
+              <stop stopColor="#00E6CA" />
+              <stop offset={0} stopColor="#00C4B8" />
+            </radialGradient>
+          </defs>
+        </svg>
+        <div className="mx-auto w-full text-center lg:mx-0 lg:flex-auto lg:py-8 lg:text-left">
+          <h2 className="text-2xl font-bold text-slate-800 dark:text-slate-50 sm:text-3xl">
+            Launch Special:
+            <br /> Go Unlimited! Forever!
+          </h2>
+          <p className="text-md mt-6 leading-8 text-slate-700 dark:text-slate-50">
+            Get access to all pro features and unlimited responses + identified users for a flat fee of{" "}
+            <b>only $99/month.</b>
+            <br /> <br />
+            <span className="text-slate-400 dark:text-slate-300">
+              This deal ends on 31st of October 2023 at 11:59 PM PST.
+            </span>
+          </p>
+        </div>
+        <div className="mb-8 mt-2 items-center justify-center">
+          <Button className="w-full justify-center py-2 shadow-sm" href="https://app.formbricks.com/">
+            Get Started
+          </Button>
+        </div>
+      </div> */}
+
       <HeroTitle
         headingPt1=""
         headingTeal="Pricing"
-        subheading="Choose what's best for you! All our plans start free."
+        subheading="All our plans start free - choose what's best for you!"
       />
       <div className="space-y-24">
         <div>
           <GetStartedWithPricing showDetailed={true} />
 
           <PricingTable
-            leadRow={inProductSurveys.leadRow}
-            pricing={inProductSurveys.features}
-            endRow={inProductSurveys.endRow}
+            leadRow={linkSurveys.leadRow}
+            pricing={linkSurveys.features}
+            endRow={linkSurveys.endRow}
           />
         </div>
 
         <PricingTable
-          leadRow={linkSurveys.leadRow}
-          pricing={linkSurveys.features}
-          endRow={linkSurveys.endRow}
+          leadRow={inProductSurveys.leadRow}
+          pricing={inProductSurveys.features}
+          endRow={inProductSurveys.endRow}
+        />
+
+        <PricingTable
+          leadRow={userSegmentation.leadRow}
+          pricing={userSegmentation.features}
+          endRow={userSegmentation.endRow}
         />
 
         <PricingTable
@@ -133,7 +210,7 @@ const PricingPage = () => {
           endRow={integrations.endRow}
         />
         <div>
-          <PricingCalculator />
+          {/* <PricingCalculator /> */}
           <OpenSourceInfo />
         </div>
       </div>

apps/formbricks-com/pages/privacy-policy.mdx

@@ -5,9 +5,9 @@ export const meta = {
   description: "Formbricks Privacy Policy",
 };
 
-## **1. Introduction**
+## **Introduction**
 
-We take your data privacy serious. It is our highest priority to offer a solution, both self-hosted and in our managed cloud. We take on considerable additional effort to collect as little data as neccessary and handle it safely and securely.
+We take your data privacy serious. It is our highest priority to offer a privacy-first solution, both self-hosted and in our managed cloud. We take on considerable additional effort to collect as little data as neccessary and handle it safely and securely.
 
 This Privacy Policy explains how and why our organization collects personal data and how it is used. If you have any questions after reading this Privacy Policy, feel free to contact us at **privacy@formbricks.com**
 
@@ -24,34 +24,49 @@ To avoid confusion, let’s define who we collect data from:
 
 ### We are data processor, you are data controller
 
-With our Cloud we are a provider of this service. We are not the owner of the collected personal data from survey respondents. The Researcher (the person who sends out a form i.e. you) is responsible for the data they collect and thus data controller of respondent data.
+With our Cloud we are a provider of this Service. We are not the owner of the collected personal data from survey respondents. The Researcher (the person who sends out a form i.e. you) is responsible for the data they collect and thus data controller of respondent data.
 
-## **2. What data do we collect**
+## **Data do we collect**
 
-This is the information we collect from **Website visitors** and **Researchers as** long as you are using our service:
+This is the information we collect from **Website visitors** and **Researchers** as long as you are using our Service:
 
 - **Electronical identification data**: including anonymized IP address, device & browser data;
-- Anonymized **information about your use of our website**: including how you end up on our website, what actions you perform and the pages you visited.
+- **Anonymized information about your use of our website**: including how you end up on our website, what actions you perform and the pages you visited.
 - **Registration information:**
   When you register for an account, we collect your name, username, hashed password and email address.
 - **Billing information:**
   If you pay for Formbricks, we will ask for your billing details including name, address and financial information depending on your payment method (stored by our payment service provider Stripe)
-- **Form data:**
-  We store your form data (questions and responses) for you and provide tools for you to use this data.
+- **Survey data:**
+  We store your survey data (questions and responses) for you and provide tools for you to analyse and use this data.
 
-## **3. How we use your data**
+## **How we use your data**
 
 Formbricks does not sell personal data to third parties. Generally, we only collect your data with your consent in order to:
 
-- Deliver our service to you
-- To improve your user experience
-- To email you with essential product updates
-- To troubleshoot product functionality and fix bugs
-- To respond to legal requests or prevent fraud
+- Provide and improve our Service.
+- Email you essential updates and offers (only if you're interested).
+- Ensure our product works smoothly and fix any issues.
+- Respond to legal situations and prevent fraud.
+- Let you engage with our Service's interactive features.
+- Support you when you need help.
+- Track how our Service is used.
+- Handle technical problems.
+- Manage our relationship with you, including billing.
+- Inform you about account changes or renewals.
+- Share news and offers about our other services (only if you've shown interest).
+- Use data in ways we explain when you provide it.
+- Other reasons, but only with your agreement.
 
-## **4. Data Subprocessors**
+## **Retention of Data**
 
-We only share your information with our service providers who help us operate our business, in which case those third parties are also required to comply with the GDPR framework. We worked hard to reduce the number of subprocessors to a minimum and keep your information within the EU. This is a list of the subprocessors we are working with:
+We will retain your Personal Data only for as long as is necessary for the purposes set out in this Privacy Policy. We will retain and use your Personal Data to the extent necessary to comply with our legal obligations (for example, if we are required to retain your data to comply with applicable laws), resolve disputes, and enforce our legal agreements and policies.
+
+We will also retain Usage Data for internal analysis purposes. Usage Data is generally retained for a shorter period, except when this data is used to strengthen the security or to improve the functionality of our Service, or we are legally obligated to retain this data for longer time periods.
+
+
+## **Data Subprocessors**
+
+We only share your information with our Service providers who help us operate our business, in which case those third parties are also required to comply with the GDPR framework. We worked hard to reduce the number of subprocessors to a minimum and keep your information within the EU. This is a list of the subprocessors we are working with:
 
 | Subprocessor | Data                                   | Use               | Server Location | DPA         | GDPR Info                                                                         |
 | ------------ | -------------------------------------- | ----------------- | --------------- | ----------- | --------------------------------------------------------------------------------- |
@@ -60,7 +75,7 @@ We only share your information with our service providers who help us operate ou
 | PostHog EU   | Anon. IP, Browser & Device Information | Product Analytics | 🇩🇪              | DPA signed  | [GDPR Info](https://posthog.com/docs/privacy/gdpr-compliance)                     |
 | Stripe       | Billing Information                    | Payments          | 🇺🇸              | Part of ToS | [GDPR Info](https://stripe.com/privacy-center/legal#international-data-transfers) |
 
-## **5. Data retention**
+## **Data retention**
 
 If you are a Formbricks Researcher we do not delete the data in your account. You can delete data in your Formbricks account. You are responsible for the time period for which you store the data.
 
@@ -68,17 +83,75 @@ If you are a Respondent, you will need to ask the Researcher how long your respo
 
 All form data which has been deleted by the form Researcher is permanently deleted from our back-ups within 90 days.
 
-## **6. Your data protection rights**
+## **Researcher's data protection rights**
 
 Formbricks Researchers can exercise their rights directly with us.
 
 If you’ve submitted your personal data through a Formbricks form, the Researcher who created the form is responsible for the collected data. Formbricks only processes the data. Respondents should contact the person or organization which created the form. If this isn't possible, please contact us. We'll help in any way we can.
 
-## **7. Marketing**
+## **Researcher's Rights Under GDPR**
+
+If you are a resident of the European Union (EU) and European Economic Area (EEA), you have certain data protection rights, covered by GDPR. – See more at [GDPR Official Site](https://eur-lex.europa.eu/eli/reg/2016/679/oj).
+
+We aim to take reasonable steps to allow you to correct, amend, delete, or limit the use of your Personal Data.
+
+If you wish to be informed what Personal Data we hold about you and if you want it to be removed from our systems, please email us at hola@formbricks.com.
+
+In certain circumstances, you have the following data protection rights:
+
+- The right to access, update or to delete the information we have on you.
+- The right of rectification. You have the right to have your information rectified if that information is inaccurate or incomplete.
+- The right to object. You have the right to object to our processing of your Personal Data.
+- The right of restriction. You have the right to request that we restrict the processing of your personal information.
+- The right to data portability. You have the right to be provided with a copy of your Personal Data in a structured, machine-readable and commonly used format.
+- The right to withdraw consent. You also have the right to withdraw your consent at any time where we rely on your consent to process your personal information.
+
+Please note that we may ask you to verify your identity before responding to such requests. Additionally, we may not be able to provide Service without some necessary data.
+
+You have the right to complain to a Data Protection Authority about our collection and use of your Personal Data. For more information, please contact your local data protection authority in the European Economic Area (EEA).
+
+## **Researcher's Data Protection Rights under CalOPPA**
+
+CalOPPA is the first state law in the nation to require commercial websites and online services to post a privacy policy. The law’s reach stretches well beyond California to require a person or company in the United States (and conceivable the world) that operates websites collecting personally identifiable information from California consumers to post a conspicuous privacy policy on its website stating exactly the information being collected and those individuals with whom it is being shared, and to comply with this policy. – See more at [CalOPPA Official Site](https://consumercal.org/about-cfc/cfc-education-foundation/california-online-privacy-protection-act-caloppa-3/).
+
+According to CalOPPA we agree to the following:
+
+- Users can visit our site anonymously.
+- Our Privacy Policy link includes the word “Privacy”, and can easily be found on the home page of our website.
+- Users will be notified of any privacy policy changes on our Privacy Policy Page.
+- Users are able to change their personal information by emailing us at hola@formbricks.com
+
+**Our Policy on “Do Not Track” Signals:**
+
+We honor Do Not Track signals and do not track, plant cookies, or use advertising when a Do Not Track browser mechanism is in place. Do Not Track is a preference you can set in your web browser to inform websites that you do not want to be tracked.
+
+You can enable or disable Do Not Track by visiting the Preferences or Settings page of your web browser.
+
+## **Your Data Protection Rights under CCPA**
+
+If you are a California resident, you are entitled to learn what data we collect about you, ask to delete your data and not to sell (share) it. To exercise your data protection rights, you can make certain requests and ask us:
+
+- What personal information we have about you.
+- The categories of personal information we have collected about you.
+- The categories of sources from which we collect your personal information.
+- The business or commercial purpose for collecting or selling your personal information.
+- The categories of third parties with whom we share personal information.
+- The specific pieces of personal information we have collected about you.
+- A list of categories of personal information that we have sold, along with the category of any other company we sold it to. If we have not sold your personal information, we will inform you of that fact.
+- A list of categories of personal information that we have disclosed for a business purpose, along with the category of any other company we shared it with.
+
+Please note, you are entitled to ask us to provide you with this information up to two times in a rolling twelve-month period. When you make this request, the information provided may be limited to the personal information we collected about you in the previous 12 months.
+
+To exercise your California data protection rights described above, please send your request(s) by email to hola@formbricks.com.
+
+Your data protection rights, described above, are covered by the CCPA, short for the California Consumer Privacy Act. To find out more, visit the [official California Legislative Information website](https://www.leginfo.legislature.ca.gov/). The CCPA took effect on 01/01/2020.
+
+
+## **Marketing**
 
 If Researchers register to Formbricks, we may send them emails about company news, updates, related product or service information, etc. Researchers can always opt out of the email communications.
 
-## **8. Cookies**
+## **Cookies**
 
 Cookies are small text files that are placed on your computer or mobile device by websites you visit. They are widely used in order to make a website work, or work more efficiently, as well as to provide information to the owners of the site. Formbricks uses cookies to improve your experience on our website and with our product.
 
@@ -89,27 +162,33 @@ Formbricks uses cookies to improve your user experience, including:
 
 ### What types of cookies does Formbricks use?
 
-1. **Required cookies:** Certain cookies are necessary in order for the website to operate correctly and remain secure. For example, we use cookies to authenticate you. When you log on to our website, authentication cookies are set which let us know who you are during a browsing session. We have to load essential cookies for legitimate interests pursued by us in delivering our Sites essential functionality to you.
+**Required cookies:** Certain cookies are necessary in order for the website to operate correctly and remain secure. For example, we use cookies to authenticate you. When you log on to our website, authentication cookies are set which let us know who you are during a browsing session. We have to load essential cookies for legitimate interests pursued by us in delivering our Sites essential functionality to you.
 
 ### How can you block or eliminate cookies?
 
-We only use cookies when you are logged into our service. You can allow, eliminate, or block cookies within your browser. If you block all cookies, some websites will not work properly anymore.
+We only use cookies when you are logged into our Service. You can allow, eliminate, or block cookies within your browser. If you block all cookies, some websites will not work properly anymore.
 
-## **9. Data Transfers**
+## **Data Transfers**
 
-Formbricks is based in the EU and all form and user data is stored in Germany, EU. Only billing information processed by Stripe Inc. and anonymized personal data neccessary to provide this service may be transfered overseas.
+Formbricks is based in the EU and all form and user data is stored in Germany, EU. Only billing information processed by Stripe Inc. and anonymized personal data neccessary to provide this Service may be transfered overseas.
 
-## **10. Users Acceptance Of These Terms**
+## **Users Acceptance Of These Terms**
 
 By using Formbricks, Researchers signify their acceptance of this policy. If Researchers do not agree to this policy, they should not use Formbricks. Researchers continued use of Formbricks following the posting of changes to this policy will be deemed their acceptance of those changes.
 
-## **11. Changes to our Privacy Policy**
+## **Links to Other Sites**
+
+Our Service may contain links to other sites that are not operated by us. If you click a third party link, you will be directed to that third party's site. We strongly advise you to review the Privacy Policy of every site you visit.
+
+We have no control over and assume no responsibility for the content, privacy policies, or practices of any third party sites or services.
+
+## **Changes to our Privacy Policy**
 
 We can make changes to this Privacy Policy from time to time. In circumstances where a change will materially change the way in which we collect or use your personal information or data, we will send a notice of this change to all of our account holders.
 
-We keep our privacy policy under regular review and will place any updates on this web page. This privacy policy was last updated on 12th December 2022.
+We keep our privacy policy under regular review and will place any updates on this web page. This privacy policy was last updated on 25th October 2023.
 
-## **11. Contact**
+## **Contact**
 
 Please use the following contact information for privacy inquiries:
 

apps/web/Dockerfile

@@ -7,6 +7,9 @@ ENV DATABASE_URL=$DATABASE_URL
 ARG NEXTAUTH_SECRET
 ENV NEXTAUTH_SECRET=$NEXTAUTH_SECRET
 
+ARG ENCRYPTION_KEY
+ENV ENCRYPTION_KEY=$ENCRYPTION_KEY
+
 WORKDIR /app
 
 COPY . .

apps/web/app/(app)/billing-confirmation/components/ConfirmationPage.tsx

@@ -5,7 +5,11 @@ import { Button } from "@formbricks/ui/Button";
 import { Confetti } from "@formbricks/ui/Confetti";
 import { useEffect, useState } from "react";
 
-export default function ConfirmationPage() {
+interface ConfirmationPageProps {
+  environmentId: string;
+}
+
+export default function ConfirmationPage({ environmentId }: ConfirmationPageProps) {
   const [showConfetti, setShowConfetti] = useState(false);
   useEffect(() => {
     setShowConfetti(true);
@@ -18,11 +22,14 @@ export default function ConfirmationPage() {
           <div className="my-6 sm:flex-auto">
             <h1 className="text-center text-xl font-semibold text-slate-900">Upgrade successful</h1>
             <p className="mt-2 text-center text-sm text-slate-700">
-              Thanks a lot for upgrading your Formbricks subscription. You have now unlimited access.
+              Thanks a lot for upgrading your Formbricks subscription.
             </p>
           </div>
-          <Button variant="darkCTA" className="w-full justify-center" href="/">
-            Back to my surveys
+          <Button
+            variant="darkCTA"
+            className="w-full justify-center"
+            href={`/environments/${environmentId}/settings/billing`}>
+            Back to billing overview
           </Button>
         </div>
       </ContentWrapper>

apps/web/app/(app)/billing-confirmation/page.tsx

@@ -1,5 +1,7 @@
 import ConfirmationPage from "./components/ConfirmationPage";
 
-export default function BillingConfirmation({}) {
-  return <ConfirmationPage />;
+export default function BillingConfirmation({ searchParams }) {
+  const { environmentId } = searchParams;
+
+  return <ConfirmationPage environmentId={environmentId?.toString()} />;
 }

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

@@ -3,7 +3,7 @@
 import { authOptions } from "@formbricks/lib/authOptions";
 import { hasUserEnvironmentAccess } from "@formbricks/lib/environment/auth";
 import { createActionClass, deleteActionClass, updateActionClass } from "@formbricks/lib/actionClass/service";
-import { canUserAccessActionClass } from "@formbricks/lib/actionClass/auth";
+import { canUserUpdateActionClass, verifyUserRoleAccess } from "@formbricks/lib/actionClass/auth";
 import { getServerSession } from "next-auth";
 import { TActionClassInput } from "@formbricks/types/actionClasses";
 
@@ -14,14 +14,24 @@ import {
 } from "@formbricks/lib/action/service";
 import { getSurveysByActionClassId } from "@formbricks/lib/survey/service";
 import { AuthorizationError } from "@formbricks/types/errors";
+import { getTeamByEnvironmentId } from "@formbricks/lib/team/service";
 
 export async function deleteActionClassAction(environmentId, actionClassId: string) {
   const session = await getServerSession(authOptions);
   if (!session) throw new AuthorizationError("Not authorized");
 
-  const isAuthorized = await canUserAccessActionClass(session.user.id, actionClassId);
+  const team = await getTeamByEnvironmentId(environmentId);
+
+  if (!team) {
+    throw new Error("Team not found");
+  }
+
+  const isAuthorized = await canUserUpdateActionClass(session.user.id, actionClassId);
   if (!isAuthorized) throw new AuthorizationError("Not authorized");
 
+  const { hasDeleteAccess } = await verifyUserRoleAccess(environmentId, session.user.id);
+  if (!hasDeleteAccess) throw new AuthorizationError("Not authorized");
+
   await deleteActionClass(environmentId, actionClassId);
 }
 
@@ -33,9 +43,18 @@ export async function updateActionClassAction(
   const session = await getServerSession(authOptions);
   if (!session) throw new AuthorizationError("Not authorized");
 
-  const isAuthorized = await canUserAccessActionClass(session.user.id, actionClassId);
+  const team = await getTeamByEnvironmentId(environmentId);
+
+  if (!team) {
+    throw new Error("Team not found");
+  }
+
+  const isAuthorized = await canUserUpdateActionClass(session.user.id, actionClassId);
   if (!isAuthorized) throw new AuthorizationError("Not authorized");
 
+  const { hasCreateOrUpdateAccess } = await verifyUserRoleAccess(environmentId, session.user.id);
+  if (!hasCreateOrUpdateAccess) throw new AuthorizationError("Not authorized");
+
   return await updateActionClass(environmentId, actionClassId, updatedAction);
 }
 
@@ -49,43 +68,68 @@ export async function createActionClassAction(action: TActionClassInput) {
   return await createActionClass(action.environmentId, action);
 }
 
-export const getActionCountInLastHourAction = async (actionClassId: string) => {
+export const getActionCountInLastHourAction = async (actionClassId: string, environmentId: string) => {
   const session = await getServerSession(authOptions);
   if (!session) throw new AuthorizationError("Not authorized");
 
-  const isAuthorized = await canUserAccessActionClass(session.user.id, actionClassId);
+  const team = await getTeamByEnvironmentId(environmentId);
+
+  if (!team) {
+    throw new Error("Team not found");
+  }
+
+  const isAuthorized = await canUserUpdateActionClass(session.user.id, actionClassId);
   if (!isAuthorized) throw new AuthorizationError("Not authorized");
 
   return await getActionCountInLastHour(actionClassId);
 };
 
-export const getActionCountInLast24HoursAction = async (actionClassId: string) => {
+export const getActionCountInLast24HoursAction = async (actionClassId: string, environmentId: string) => {
   const session = await getServerSession(authOptions);
   if (!session) throw new AuthorizationError("Not authorized");
 
-  const isAuthorized = await canUserAccessActionClass(session.user.id, actionClassId);
+  const team = await getTeamByEnvironmentId(environmentId);
+
+  if (!team) {
+    throw new Error("Team not found");
+  }
+
+  const isAuthorized = await canUserUpdateActionClass(session.user.id, actionClassId);
   if (!isAuthorized) throw new AuthorizationError("Not authorized");
 
   return await getActionCountInLast24Hours(actionClassId);
 };
 
-export const getActionCountInLast7DaysAction = async (actionClassId: string) => {
+export const getActionCountInLast7DaysAction = async (actionClassId: string, environmentId: string) => {
   const session = await getServerSession(authOptions);
   if (!session) throw new AuthorizationError("Not authorized");
 
-  const isAuthorized = await canUserAccessActionClass(session.user.id, actionClassId);
+  const team = await getTeamByEnvironmentId(environmentId);
+
+  if (!team) {
+    throw new Error("Team not found");
+  }
+
+  const isAuthorized = await canUserUpdateActionClass(session.user.id, actionClassId);
   if (!isAuthorized) throw new AuthorizationError("Not authorized");
 
   return await getActionCountInLast7Days(actionClassId);
 };
 
 export const GetActiveInactiveSurveysAction = async (
-  actionClassId: string
+  actionClassId: string,
+  environmentId: string
 ): Promise<{ activeSurveys: string[]; inactiveSurveys: string[] }> => {
   const session = await getServerSession(authOptions);
   if (!session) throw new AuthorizationError("Not authorized");
 
-  const isAuthorized = await canUserAccessActionClass(session.user.id, actionClassId);
+  const team = await getTeamByEnvironmentId(environmentId);
+
+  if (!team) {
+    throw new Error("Team not found");
+  }
+
+  const isAuthorized = await canUserUpdateActionClass(session.user.id, actionClassId);
   if (!isAuthorized) throw new AuthorizationError("Not authorized");
 
   const surveys = await getSurveysByActionClassId(actionClassId);