feat: avatar upload (#1546)

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

.env.example

@@ -124,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/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/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

@@ -19,7 +19,7 @@ jobs:
           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 -hex 32)
           echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
@@ -55,3 +55,4 @@ jobs:
           build-args: |
             NEXTAUTH_SECRET=${{ env.NEXTAUTH_SECRET }}
             DATABASE_URL=${{ env.DATABASE_URL }}
+            ENCRYPTION_KEY=${{ env.ENCRYPTION_KEY }}

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,4 +1,4 @@
-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",

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!",

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",

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",

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,7 +247,6 @@ 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: "From Source", href: "/docs/self-hosting/from-source" },
       { title: "Migration Guide", href: "/docs/self-hosting/migration-guide" },
     ],
   },
@@ -254,10 +254,11 @@ export const navigation: Array<NavGroup> = [
     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/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/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,12 +28,12 @@ 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-2 bg-blue-100 p-1 text-xs text-slate-400 dark:bg-slate-700 dark:text-teal-500">
+                <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>
               )}

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,
       },
       {

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/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,7 +244,7 @@ const FAQ = [
 const Leaderboard = [
   {
     name: "Piyush",
-    points: "2650",
+    points: "4045",
     link: "https://github.com/gupta-piyush19",
   },
   {
@@ -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: "2250",
+    points: "3250",
     link: "https://github.com/KapadiaNaitik",
   },
   {
@@ -359,7 +334,7 @@ const Leaderboard = [
   },
   {
     name: "Aditya Deshlahre",
-    points: "1320",
+    points: "2120",
     link: "https://github.com/adityadeshlahre",
   },
   {
@@ -392,7 +367,7 @@ const Leaderboard = [
   },
   {
     name: "thanmaisai",
-    points: "860",
+    points: "2825",
   },
   {
     name: "Rayyan Alam (Rayy)",
@@ -412,7 +387,7 @@ const Leaderboard = [
   },
   {
     name: "Anjaneya Gupta",
-    points: "1650",
+    points: "3150",
   },
   {
     name: "Sachin Kuber",
@@ -445,7 +420,7 @@ const Leaderboard = [
   },
   {
     name: "Abhinav Arya",
-    points: "900",
+    points: "1100",
     link: "github.com/itzabhinavarya",
   },
   {
@@ -454,7 +429,7 @@ const Leaderboard = [
   },
   {
     name: "Rohan Gupta",
-    points: "1300",
+    points: "1350",
     link: "https://github.com/rohan9896",
   },
   {
@@ -509,7 +484,7 @@ const Leaderboard = [
   },
   {
     name: "Bilal Mirza",
-    points: "1025",
+    points: "2095",
   },
   {
     name: "Asharan2511",
@@ -545,7 +520,7 @@ const Leaderboard = [
   },
   {
     name: "Moheyt",
-    points: "450",
+    points: "550",
   },
   {
     name: "ortin779",
@@ -553,11 +528,11 @@ const Leaderboard = [
   },
   {
     name: "Piyush Garg",
-    points: "150",
+    points: "650",
   },
   {
     name: "Sachin Mittal",
-    points: "100",
+    points: "850",
   },
   {
     name: "Sha1kh4",
@@ -589,7 +564,7 @@ const Leaderboard = [
   },
   {
     name: "aashish",
-    points: "880",
+    points: "980",
   },
   {
     name: "AliYar-Khan",
@@ -621,7 +596,7 @@ const Leaderboard = [
   },
   {
     name: "Ola",
-    points: "1550",
+    points: "1800",
   },
   {
     name: "Olalaye Blessing",
@@ -637,11 +612,11 @@ const Leaderboard = [
   },
   {
     name: "Shyam Raghu",
-    points: "300",
+    points: "500",
   },
   {
     name: "Vikas Patil",
-    points: "100",
+    points: "250",
   },
   {
     name: "0Armaan025",
@@ -649,6 +624,22 @@ const Leaderboard = [
   },
   {
     name: "mandharet",
+    points: "100",
+  },
+  {
+    name: "Harshit Vashisht",
+    points: "200",
+  },
+  {
+    name: "JiyaGupta-cs",
+    points: "50",
+  },
+  {
+    name: "Kurayami",
+    points: "100",
+  },
+  {
+    name: "Sandy-1711",
     points: "50",
   },
 ];
@@ -672,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 🚀
@@ -1135,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,52 +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: "Team Role Management", free: false, paid: true },
+    { 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 },
-
-    {
-      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",
-    },
   ],
   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>
     ),
   },
@@ -56,6 +80,7 @@ const inProductSurveys = {
 const linkSurveys = {
   leadRow: {
     title: "Link Surveys",
+    comparison: "like Typeform",
     free: <span>Unlimited</span>,
     paid: "Unlimited",
   },
@@ -64,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",
   },
 };
 
@@ -90,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",
@@ -105,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
@@ -134,7 +210,7 @@ const PricingPage = () => {
           endRow={integrations.endRow}
         />
         <div>
-          <PricingCalculator />
+          {/* <PricingCalculator /> */}
           <OpenSourceInfo />
         </div>
       </div>

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);

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

@@ -4,7 +4,7 @@ import LoadingSpinner from "@formbricks/ui/LoadingSpinner";
 import { ErrorComponent } from "@formbricks/ui/ErrorComponent";
 import { Label } from "@formbricks/ui/Label";
 import { convertDateTimeStringShort } from "@formbricks/lib/time";
-import { capitalizeFirstLetter } from "@/app/lib/utils";
+import { capitalizeFirstLetter } from "@formbricks/lib/strings";
 import { CodeBracketIcon, CursorArrowRaysIcon, SparklesIcon } from "@heroicons/react/24/solid";
 import { TActionClass } from "@formbricks/types/actionClasses";
 import { useEffect, useState } from "react";
@@ -16,9 +16,10 @@ import {
 } from "../actions";
 interface ActivityTabProps {
   actionClass: TActionClass;
+  environmentId: string;
 }
 
-export default function EventActivityTab({ actionClass }: ActivityTabProps) {
+export default function EventActivityTab({ actionClass, environmentId }: ActivityTabProps) {
   // const { eventClass, isLoadingEventClass, isErrorEventClass } = useEventClass(environmentId, actionClass.id);
 
   const [numEventsLastHour, setNumEventsLastHour] = useState<number | undefined>();
@@ -42,10 +43,10 @@ export default function EventActivityTab({ actionClass }: ActivityTabProps) {
           numEventsLast7DaysData,
           activeInactiveSurveys,
         ] = await Promise.all([
-          getActionCountInLastHourAction(actionClass.id),
-          getActionCountInLast24HoursAction(actionClass.id),
-          getActionCountInLast7DaysAction(actionClass.id),
-          GetActiveInactiveSurveysAction(actionClass.id),
+          getActionCountInLastHourAction(actionClass.id, environmentId),
+          getActionCountInLast24HoursAction(actionClass.id, environmentId),
+          getActionCountInLast7DaysAction(actionClass.id, environmentId),
+          GetActiveInactiveSurveysAction(actionClass.id, environmentId),
         ]);
         setNumEventsLastHour(numEventsLastHourData);
         setNumEventsLast24Hours(numEventsLast24HoursData);
@@ -58,7 +59,7 @@ export default function EventActivityTab({ actionClass }: ActivityTabProps) {
         setLoading(false);
       }
     }
-  }, [actionClass.id]);
+  }, [actionClass.id, environmentId]);
 
   if (loading) return <LoadingSpinner />;
   if (error) return <ErrorComponent />;

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

@@ -6,6 +6,9 @@ import { useState } from "react";
 import AddNoCodeActionModal from "./AddNoCodeActionModal";
 import ActionDetailModal from "./ActionDetailModal";
 import { TActionClass } from "@formbricks/types/actionClasses";
+import { useMembershipRole } from "@formbricks/lib/membership/hooks/useMembershipRole";
+import { getAccessFlags } from "@formbricks/lib/membership/utils";
+import { LoadingWrapper } from "@formbricks/ui/LoadingWrapper";
 
 export default function ActionClassesTable({
   environmentId,
@@ -18,6 +21,8 @@ export default function ActionClassesTable({
 }) {
   const [isActionDetailModalOpen, setActionDetailModalOpen] = useState(false);
   const [isAddActionModalOpen, setAddActionModalOpen] = useState(false);
+  const { membershipRole, isLoading, error } = useMembershipRole(environmentId);
+  const { isViewer } = getAccessFlags(membershipRole);
 
   const [activeActionClass, setActiveActionClass] = useState<TActionClass>({
     environmentId,
@@ -38,16 +43,20 @@ export default function ActionClassesTable({
 
   return (
     <>
-      <div className="mb-6 text-right">
-        <Button
-          variant="darkCTA"
-          onClick={() => {
-            setAddActionModalOpen(true);
-          }}>
-          <CursorArrowRaysIcon className="mr-2 h-5 w-5 text-white" />
-          Add Action
-        </Button>
-      </div>
+      <LoadingWrapper isLoading={isLoading} error={error}>
+        {!isViewer && (
+          <div className="mb-6 text-right">
+            <Button
+              variant="darkCTA"
+              onClick={() => {
+                setAddActionModalOpen(true);
+              }}>
+              <CursorArrowRaysIcon className="mr-2 h-5 w-5 text-white" />
+              Add Action
+            </Button>
+          </div>
+        )}
+      </LoadingWrapper>
       <div className="rounded-lg border border-slate-200">
         {TableHeading}
         <div className="grid-cols-7">
@@ -68,11 +77,13 @@ export default function ActionClassesTable({
         open={isActionDetailModalOpen}
         setOpen={setActionDetailModalOpen}
         actionClass={activeActionClass}
+        membershipRole={membershipRole}
       />
       <AddNoCodeActionModal
         environmentId={environmentId}
         open={isAddActionModalOpen}
         setOpen={setAddActionModalOpen}
+        isViewer={isViewer}
       />
     </>
   );

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

@@ -3,12 +3,14 @@ import { CodeBracketIcon, CursorArrowRaysIcon, SparklesIcon } from "@heroicons/r
 import EventActivityTab from "./ActionActivityTab";
 import ActionSettingsTab from "./ActionSettingsTab";
 import { TActionClass } from "@formbricks/types/actionClasses";
+import { TMembershipRole } from "@formbricks/types/memberships";
 
 interface ActionDetailModalProps {
   environmentId: string;
   open: boolean;
   setOpen: (v: boolean) => void;
   actionClass: TActionClass;
+  membershipRole?: TMembershipRole;
 }
 
 export default function ActionDetailModal({
@@ -16,16 +18,22 @@ export default function ActionDetailModal({
   open,
   setOpen,
   actionClass,
+  membershipRole,
 }: ActionDetailModalProps) {
   const tabs = [
     {
       title: "Activity",
-      children: <EventActivityTab actionClass={actionClass} />,
+      children: <EventActivityTab actionClass={actionClass} environmentId={environmentId} />,
     },
     {
       title: "Settings",
       children: (
-        <ActionSettingsTab environmentId={environmentId} actionClass={actionClass} setOpen={setOpen} />
+        <ActionSettingsTab
+          environmentId={environmentId}
+          actionClass={actionClass}
+          setOpen={setOpen}
+          membershipRole={membershipRole}
+        />
       ),
     },
   ];

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

@@ -1,8 +1,15 @@
 "use client";
 
-import { DeleteDialog } from "@formbricks/ui/DeleteDialog";
-import { TNoCodeConfig } from "@formbricks/types/actionClasses";
+import {
+  deleteActionClassAction,
+  updateActionClassAction,
+} from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/actions";
+import { CssSelector } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/CssSelector";
+import { InnerHtmlSelector } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/InnerHtmlSelector";
+import { PageUrlSelector } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/PageUrlSelector";
+import { TActionClassInput, TActionClassNoCodeConfig, TNoCodeConfig } from "@formbricks/types/actionClasses";
 import { Button } from "@formbricks/ui/Button";
+import { DeleteDialog } from "@formbricks/ui/DeleteDialog";
 import { Input } from "@formbricks/ui/Input";
 import { Label } from "@formbricks/ui/Label";
 import { TrashIcon } from "@heroicons/react/24/outline";
@@ -11,22 +18,22 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
 import { testURLmatch } from "../lib/testURLmatch";
-import { TActionClassInput, TActionClassNoCodeConfig } from "@formbricks/types/actionClasses";
-import { CssSelector } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/CssSelector";
-import { PageUrlSelector } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/PageUrlSelector";
-import { InnerHtmlSelector } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/InnerHtmlSelector";
-import {
-  deleteActionClassAction,
-  updateActionClassAction,
-} from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/actions";
+import { TMembershipRole } from "@formbricks/types/memberships";
+import { getAccessFlags } from "@formbricks/lib/membership/utils";
 
 interface ActionSettingsTabProps {
   environmentId: string;
   actionClass: any;
   setOpen: (v: boolean) => void;
+  membershipRole?: TMembershipRole;
 }
 
-export default function ActionSettingsTab({ environmentId, actionClass, setOpen }: ActionSettingsTabProps) {
+export default function ActionSettingsTab({
+  environmentId,
+  actionClass,
+  setOpen,
+  membershipRole,
+}: ActionSettingsTabProps) {
   const router = useRouter();
   const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
   const [testUrl, setTestUrl] = useState("");
@@ -36,6 +43,7 @@ export default function ActionSettingsTab({ environmentId, actionClass, setOpen
   const [isInnerHtml, setIsInnerHtml] = useState(actionClass.noCodeConfig?.innerHtml ? true : false);
   const [isUpdatingAction, setIsUpdatingAction] = useState(false);
   const [isDeletingAction, setIsDeletingAction] = useState(false);
+  const { isViewer } = getAccessFlags(membershipRole);
 
   const { register, handleSubmit, control, watch } = useForm({
     defaultValues: {
@@ -75,16 +83,20 @@ export default function ActionSettingsTab({ environmentId, actionClass, setOpen
 
   const onSubmit = async (data) => {
     try {
+      const isCodeAction = actionClass.type === "code";
       setIsUpdatingAction(true);
       if (data.name === "") throw new Error("Please give your action a name");
-      if (!isPageUrl && !isCssSelector && !isInnerHtml) throw new Error("Please select atleast one selector");
-
-      const filteredNoCodeConfig = filterNoCodeConfig(data.noCodeConfig as TNoCodeConfig);
+      if (!isPageUrl && !isCssSelector && !isInnerHtml && !isCodeAction)
+        throw new Error("Please select at least one selector");
+      let filteredNoCodeConfig = data.noCodeConfig;
+      if (!isCodeAction) {
+        filteredNoCodeConfig = filterNoCodeConfig(data.noCodeConfig as TNoCodeConfig);
+      }
       const updatedData: TActionClassInput = {
         ...data,
         environmentId,
         noCodeConfig: filteredNoCodeConfig,
-        type: "noCode",
+        type: isCodeAction ? "code" : "noCode",
       } as TActionClassInput;
       await updateActionClassAction(environmentId, actionClass.id, updatedData);
       setOpen(false);
@@ -125,16 +137,18 @@ export default function ActionSettingsTab({ environmentId, actionClass, setOpen
               })}
             />
           </div>
-          <div className="col-span-1">
-            <Label>Description</Label>
-            <Input
-              placeholder="User clicked Download Button "
-              {...register("description", {
-                value: actionClass.description,
-                disabled: actionClass.type === "automatic" ? true : false,
-              })}
-            />
-          </div>
+          {!isViewer && (
+            <div className="col-span-1">
+              <Label>Description</Label>
+              <Input
+                placeholder="User clicked Download Button "
+                {...register("description", {
+                  value: actionClass.description,
+                  disabled: actionClass.type === "automatic" ? true : false,
+                })}
+              />
+            </div>
+          )}
         </div>
         {actionClass.type === "code" ? (
           <p className="text-sm text-slate-600">
@@ -174,7 +188,7 @@ export default function ActionSettingsTab({ environmentId, actionClass, setOpen
         ) : null}
         <div className="flex justify-between border-t border-slate-200 py-6">
           <div>
-            {actionClass.type !== "automatic" && (
+            {!isViewer && actionClass.type !== "automatic" && (
               <Button
                 type="button"
                 variant="warn"

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

@@ -1,25 +1,26 @@
 "use client";
 
-import { Modal } from "@formbricks/ui/Modal";
+import { createActionClassAction } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/actions";
+import { CssSelector } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/CssSelector";
+import { InnerHtmlSelector } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/InnerHtmlSelector";
+import { PageUrlSelector } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/PageUrlSelector";
+import { TActionClass, TActionClassInput, TActionClassNoCodeConfig } from "@formbricks/types/actionClasses";
 import { Button } from "@formbricks/ui/Button";
 import { Input } from "@formbricks/ui/Input";
 import { Label } from "@formbricks/ui/Label";
+import { Modal } from "@formbricks/ui/Modal";
 import { CursorArrowRaysIcon } from "@heroicons/react/24/solid";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import toast from "react-hot-toast";
 import { testURLmatch } from "../lib/testURLmatch";
-import { TActionClassInput, TActionClassNoCodeConfig, TActionClass } from "@formbricks/types/actionClasses";
-import { CssSelector } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/CssSelector";
-import { PageUrlSelector } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/PageUrlSelector";
-import { InnerHtmlSelector } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/InnerHtmlSelector";
-import { createActionClassAction } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/actions";
 
 interface AddNoCodeActionModalProps {
   environmentId: string;
   open: boolean;
   setOpen: (v: boolean) => void;
   setActionClassArray?;
+  isViewer: boolean;
 }
 
 function isValidCssSelector(selector?: string) {
@@ -40,6 +41,7 @@ export default function AddNoCodeActionModal({
   open,
   setOpen,
   setActionClassArray,
+  isViewer,
 }: AddNoCodeActionModalProps) {
   const { register, control, handleSubmit, watch, reset } = useForm();
   const [isPageUrl, setIsPageUrl] = useState(false);
@@ -80,9 +82,13 @@ export default function AddNoCodeActionModal({
   const submitEventClass = async (data: Partial<TActionClassInput>): Promise<void> => {
     const { noCodeConfig } = data;
     try {
+      if (isViewer) {
+        throw new Error("You are not authorised to perform this action.");
+      }
       setIsCreatingAction(true);
       if (data.name === "") throw new Error("Please give your action a name");
-      if (!isPageUrl && !isCssSelector && !isInnerHtml) throw new Error("Please select atleast one selector");
+      if (!isPageUrl && !isCssSelector && !isInnerHtml)
+        throw new Error("Please select at least one selector");
 
       if (isCssSelector && !isValidCssSelector(noCodeConfig?.cssSelector?.value)) {
         throw new Error("Please enter a valid CSS Selector");

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

@@ -2,7 +2,7 @@
 
 import { GetActiveInactiveSurveysAction } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/actions";
 import LoadingSpinner from "@formbricks/ui/LoadingSpinner";
-import { capitalizeFirstLetter } from "@/app/lib/utils";
+import { capitalizeFirstLetter } from "@formbricks/lib/strings";
 import { convertDateTimeStringShort } from "@formbricks/lib/time";
 import { TAttributeClass } from "@formbricks/types/attributeClasses";
 import { ErrorComponent } from "@formbricks/ui/ErrorComponent";

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

@@ -7,8 +7,8 @@ import { hasUserEnvironmentAccess } from "@formbricks/lib/environment/auth";
 import { createMembership } from "@formbricks/lib/membership/service";
 import { createProduct } from "@formbricks/lib/product/service";
 import { createShortUrl } from "@formbricks/lib/shortUrl/service";
-import { canUserAccessSurvey } from "@formbricks/lib/survey/auth";
-import { deleteSurvey, duplicateSurvey } from "@formbricks/lib/survey/service";
+import { canUserAccessSurvey, verifyUserRoleAccess } from "@formbricks/lib/survey/auth";
+import { deleteSurvey, duplicateSurvey, getSurvey } from "@formbricks/lib/survey/service";
 import { createTeam, getTeamByEnvironmentId } from "@formbricks/lib/team/service";
 import { AuthenticationError, AuthorizationError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { Team } from "@prisma/client";
@@ -215,6 +215,11 @@ export const deleteSurveyAction = async (surveyId: string) => {
   const isAuthorized = await canUserAccessSurvey(session.user.id, surveyId);
   if (!isAuthorized) throw new AuthorizationError("Not authorized");
 
+  const survey = await getSurvey(surveyId);
+
+  const { hasDeleteAccess } = await verifyUserRoleAccess(survey!.environmentId, session.user.id);
+  if (!hasDeleteAccess) throw new AuthorizationError("Not authorized");
+
   await deleteSurvey(surveyId);
 };
 

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

@@ -3,6 +3,7 @@ export const revalidate = REVALIDATION_INTERVAL;
 import Navigation from "@/app/(app)/environments/[environmentId]/components/Navigation";
 import { IS_FORMBRICKS_CLOUD, REVALIDATION_INTERVAL, WEBAPP_URL } from "@formbricks/lib/constants";
 import { getEnvironment, getEnvironments } from "@formbricks/lib/environment/service";
+import { getMembershipByUserIdTeamId } from "@formbricks/lib/membership/service";
 import { getProducts } from "@formbricks/lib/product/service";
 import { getTeamByEnvironmentId, getTeamsByUserId } from "@formbricks/lib/team/service";
 import { ErrorComponent } from "@formbricks/ui/ErrorComponent";
@@ -33,6 +34,7 @@ export default async function EnvironmentsNavbar({ environmentId, session }: Env
   if (!products || !environments || !teams) {
     return <ErrorComponent />;
   }
+  const currentUserMembership = await getMembershipByUserIdTeamId(session?.user.id, team.id);
 
   return (
     <Navigation
@@ -44,6 +46,7 @@ export default async function EnvironmentsNavbar({ environmentId, session }: Env
       session={session}
       isFormbricksCloud={IS_FORMBRICKS_CLOUD}
       webAppUrl={WEBAPP_URL}
+      membershipRole={currentUserMembership?.role}
     />
   );
 }

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

@@ -19,7 +19,7 @@ import {
 import CreateTeamModal from "@formbricks/ui/CreateTeamModal";
 import UrlShortenerModal from "./UrlShortenerModal";
 import { formbricksLogout } from "@/app/lib/formbricks";
-import { capitalizeFirstLetter, truncate } from "@/app/lib/utils";
+import { capitalizeFirstLetter, truncate } from "@formbricks/lib/strings";
 import formbricks from "@formbricks/js";
 import { cn } from "@formbricks/lib/cn";
 import { TEnvironment } from "@formbricks/types/environment";
@@ -53,6 +53,8 @@ import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
 import AddProductModal from "./AddProductModal";
+import { TMembershipRole } from "@formbricks/types/memberships";
+import { getAccessFlags } from "@formbricks/lib/membership/utils";
 
 interface NavigationProps {
   environment: TEnvironment;
@@ -63,6 +65,7 @@ interface NavigationProps {
   environments: TEnvironment[];
   isFormbricksCloud: boolean;
   webAppUrl: string;
+  membershipRole?: TMembershipRole;
 }
 
 export default function Navigation({
@@ -74,6 +77,7 @@ export default function Navigation({
   environments,
   isFormbricksCloud,
   webAppUrl,
+  membershipRole,
 }: NavigationProps) {
   const router = useRouter();
   const pathname = usePathname();
@@ -85,6 +89,8 @@ export default function Navigation({
   const [showLinkShortenerModal, setShowLinkShortenerModal] = useState(false);
   const product = products.find((product) => product.id === environment.productId);
   const [mobileNavMenuOpen, setMobileNavMenuOpen] = useState(false);
+  const { isAdmin, isOwner, isViewer } = getAccessFlags(membershipRole);
+  const isPricingDisabled = !isOwner && !isAdmin;
 
   useEffect(() => {
     if (environment && environment.widgetSetupCompleted) {
@@ -108,30 +114,35 @@ export default function Navigation({
         href: `/environments/${environment.id}/surveys`,
         icon: FormIcon,
         current: pathname?.includes("/surveys"),
+        hidden: false,
       },
       {
         name: "People",
         href: `/environments/${environment.id}/people`,
         icon: CustomersIcon,
         current: pathname?.includes("/people"),
+        hidden: false,
       },
       {
         name: "Actions & Attributes",
         href: `/environments/${environment.id}/actions`,
         icon: FilterIcon,
         current: pathname?.includes("/actions") || pathname?.includes("/attributes"),
+        hidden: false,
       },
       {
         name: "Integrations",
         href: `/environments/${environment.id}/integrations`,
         icon: DashboardIcon,
         current: pathname?.includes("/integrations"),
+        hidden: isViewer,
       },
       {
         name: "Settings",
         href: `/environments/${environment.id}/settings/profile`,
         icon: SettingsIcon,
         current: pathname?.includes("/settings"),
+        hidden: false,
       },
     ],
     [environment.id, pathname]
@@ -145,11 +156,13 @@ export default function Navigation({
           icon: AdjustmentsVerticalIcon,
           label: "Product Settings",
           href: `/environments/${environment.id}/settings/product`,
+          hidden: false,
         },
         {
           icon: PaintBrushIcon,
           label: "Look & Feel",
           href: `/environments/${environment.id}/settings/lookandfeel`,
+          hidden: isViewer,
         },
       ],
     },
@@ -166,7 +179,7 @@ export default function Navigation({
           icon: CreditCardIcon,
           label: "Billing & Plan",
           href: `/environments/${environment.id}/settings/billing`,
-          hidden: !isFormbricksCloud,
+          hidden: !isFormbricksCloud || isPricingDisabled,
         },
       ],
     },
@@ -243,19 +256,21 @@ export default function Navigation({
                   const IconComponent: React.ElementType = item.icon;
 
                   return (
-                    <Link
-                      key={item.name}
-                      href={item.href}
-                      className={clsx(
-                        item.current
-                          ? "bg-slate-100 text-slate-900"
-                          : "text-slate-900 hover:bg-slate-50 hover:text-slate-900",
-                        "hidden items-center rounded-md px-2 py-1 text-sm font-medium lg:inline-flex"
-                      )}
-                      aria-current={item.current ? "page" : undefined}>
-                      <IconComponent className="mr-3 h-5 w-5" />
-                      {item.name}
-                    </Link>
+                    !item.hidden && (
+                      <Link
+                        key={item.name}
+                        href={item.href}
+                        className={clsx(
+                          item.current
+                            ? "bg-slate-100 text-slate-900"
+                            : "text-slate-900 hover:bg-slate-50 hover:text-slate-900",
+                          "hidden items-center rounded-md px-2 py-1 text-sm font-medium lg:inline-flex"
+                        )}
+                        aria-current={item.current ? "page" : undefined}>
+                        <IconComponent className="mr-3 h-5 w-5" />
+                        {item.name}
+                      </Link>
+                    )
                   );
                 })}
               </div>
@@ -270,19 +285,22 @@ export default function Navigation({
                   </PopoverTrigger>
                   <PopoverContent className="mr-4 bg-slate-100 shadow">
                     <div className="flex flex-col">
-                      {navigation.map((navItem) => (
-                        <Link key={navItem.name} href={navItem.href}>
-                          <div
-                            onClick={() => setMobileNavMenuOpen(false)}
-                            className={cn(
-                              "flex items-center space-x-2 rounded-md p-2",
-                              navItem.current && "bg-slate-200"
-                            )}>
-                            <navItem.icon className="h-5 w-5" />
-                            <span className="font-medium text-slate-600">{navItem.name}</span>
-                          </div>
-                        </Link>
-                      ))}
+                      {navigation.map(
+                        (navItem) =>
+                          !navItem.hidden && (
+                            <Link key={navItem.name} href={navItem.href}>
+                              <div
+                                onClick={() => setMobileNavMenuOpen(false)}
+                                className={cn(
+                                  "flex items-center space-x-2 rounded-md p-2",
+                                  navItem.current && "bg-slate-200"
+                                )}>
+                                <navItem.icon className="h-5 w-5" />
+                                <span className="font-medium text-slate-600">{navItem.name}</span>
+                              </div>
+                            </Link>
+                          )
+                      )}
                     </div>
                   </PopoverContent>
                 </Popover>
@@ -293,18 +311,17 @@ export default function Navigation({
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
                     <div tabIndex={0} className="flex cursor-pointer flex-row items-center space-x-5">
-                      <ProfileAvatar userId={session.user.id} />
-                      {/* {session.user.image ? (
+                      {session.user.imageUrl ? (
                         <Image
-                          src={session.user.image}
-                          width="100"
-                          height="100"
-                          className="ph-no-capture h-9 w-9 rounded-full"
+                          src={session.user.imageUrl}
+                          width="40"
+                          height="40"
+                          className="ph-no-capture h-10 w-10 rounded-full"
                           alt="Profile picture"
                         />
                       ) : (
                         <ProfileAvatar userId={session.user.id} />
-                      )} */}
+                      )}
 
                       <div>
                         <p className="ph-no-capture ph-no-capture -mb-0.5 text-sm font-bold text-slate-700">
@@ -375,10 +392,12 @@ export default function Navigation({
                           </DropdownMenuRadioGroup>
 
                           <DropdownMenuSeparator />
-                          <DropdownMenuItem onClick={() => setShowAddProductModal(true)}>
-                            <PlusIcon className="mr-2 h-4 w-4" />
-                            <span>Add product</span>
-                          </DropdownMenuItem>
+                          {!isViewer && (
+                            <DropdownMenuItem onClick={() => setShowAddProductModal(true)}>
+                              <PlusIcon className="mr-2 h-4 w-4" />
+                              <span>Add product</span>
+                            </DropdownMenuItem>
+                          )}
                         </DropdownMenuSubContent>
                       </DropdownMenuPortal>
                     </DropdownMenuSub>