fix: 2.2 data migration for self-hosters (#2792)

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

.env.example

@@ -162,9 +162,6 @@ ENTERPRISE_LICENSE_KEY=
 # DEFAULT_ORGANIZATION_ID=
 # DEFAULT_ORGANIZATION_ROLE=admin
 
-# set to 1 to skip onboarding for new users
-# ONBOARDING_DISABLED=1
-
 # Send new users to customer.io
 # CUSTOMER_IO_API_KEY=
 # CUSTOMER_IO_SITE_ID=

.github/workflows/cron-reportUsageToStripe.yml

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

.github/workflows/cron-weeklySummary.yml

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

.github/workflows/kamal-deploy.yml

@@ -5,9 +5,9 @@ concurrency:
 
 on:
   workflow_dispatch:
-  push:
-    branches:
-      - main
+  #push:
+  #  branches:
+  #    - main
 
 jobs:
   Deploy:
@@ -57,7 +57,6 @@ jobs:
       AIRTABLE_CLIENT_ID: ${{ secrets.AIRTABLE_CLIENT_ID }}
       ENTERPRISE_LICENSE_KEY: ${{ secrets.ENTERPRISE_LICENSE_KEY }}
       DEFAULT_ORGANIZATION_ID: ${{ vars.DEFAULT_ORGANIZATION_ID }}
-      ONBOARDING_DISABLED: ${{ vars.ONBOARDING_DISABLED }}
       CUSTOMER_IO_API_KEY: ${{ secrets.CUSTOMER_IO_API_KEY }}
       CUSTOMER_IO_SITE_ID: ${{ secrets.CUSTOMER_IO_SITE_ID }}
       NEXT_PUBLIC_POSTHOG_API_KEY: ${{ vars.NEXT_PUBLIC_POSTHOG_API_KEY }}

.github/workflows/kamal-setup.yml

@@ -54,7 +54,6 @@ jobs:
       AIRTABLE_CLIENT_ID: ${{ secrets.AIRTABLE_CLIENT_ID }}
       ENTERPRISE_LICENSE_KEY: ${{ secrets.ENTERPRISE_LICENSE_KEY }}
       DEFAULT_ORGANIZATION_ID: ${{ vars.DEFAULT_ORGANIZATION_ID }}
-      ONBOARDING_DISABLED: ${{ vars.ONBOARDING_DISABLED }}
       CUSTOMER_IO_API_KEY: ${{ secrets.CUSTOMER_IO_API_KEY }}
       CUSTOMER_IO_SITE_ID: ${{ secrets.CUSTOMER_IO_SITE_ID }}
       NEXT_PUBLIC_POSTHOG_API_KEY: ${{ vars.NEXT_PUBLIC_POSTHOG_API_KEY }}

.github/workflows/release-changesets.yml

@@ -1,9 +1,10 @@
 name: Release Changesets
 
 on:
-  push:
-    branches:
-      - main
+  workflow_dispatch:
+  #push:
+  #  branches:
+  #    - main
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 

apps/demo/components/Sidebar.tsx

@@ -9,7 +9,6 @@ import {
   ShieldCheckIcon,
   UsersIcon,
 } from "lucide-react";
-
 import { classNames } from "../lib/utils";
 
 const navigation = [

apps/demo/package.json

@@ -13,8 +13,8 @@
   "dependencies": {
     "@formbricks/js": "workspace:*",
     "@formbricks/ui": "workspace:*",
-    "lucide-react": "^0.379.0",
-    "next": "14.2.3",
+    "lucide-react": "^0.395.0",
+    "next": "14.2.4",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },

apps/demo/pages/_app.tsx

@@ -1,6 +1,5 @@
 import type { AppProps } from "next/app";
 import Head from "next/head";
-
 import "../styles/globals.css";
 
 const App = ({ Component, pageProps }: AppProps) => {

apps/demo/pages/app/index.tsx

@@ -1,9 +1,7 @@
 import Image from "next/image";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-
 import formbricks from "@formbricks/js/app";
-
 import { SurveySwitch } from "../../components/SurveySwitch";
 import fbsetup from "../../public/fb-setup.png";
 

apps/demo/pages/website/index.tsx

@@ -1,9 +1,7 @@
 import Image from "next/image";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-
 import formbricks from "@formbricks/js/website";
-
 import { SurveySwitch } from "../../components/SurveySwitch";
 import fbsetup from "../../public/fb-setup.png";
 
@@ -36,7 +34,7 @@ const AppPage = ({}) => {
 
     if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
       const defaultAttributes = {
-        language: "de",
+        language: "en",
       };
 
       formbricks.init({

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

@@ -22,9 +22,7 @@ export const metadata = {
 App surveys have 6-10x better conversion rates than emailed out surveys. This tutorial explains how to run an app survey in your web app in 10 to 15 minutes. Let’s go!
 
 <Note>
-  App Surveys are ideal for websites that **have a user authentication** system. If you are looking to run
-  surveys on your public facing website, head over to the [Website Surveys Quickstart
-  Guide](/website-surveys/quickstart).
+  App Surveys are ideal for websites that **have a user authentication** system. If you are looking to run surveys on your public facing website, head over to the [Website Surveys Quickstart Guide](/website-surveys/quickstart).
 </Note>
 
 1. **Create a free Formbricks Cloud account**: While you can [self-host](/self-hosting/deployment) Formbricks, but the quickest and easiest way to get started is with the free Cloud plan. Just [sign up here](https://app.formbricks.com/auth/signup) and you'll be guided to our onboarding like below:

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

@@ -16,7 +16,7 @@ export const metadata = {
 
 ### Overview
 
-The Formbricks JS SDK is a 2-in-1 SDK for seamlessly integrating both App Surveys and Website Surveys into your projects. In this section, we'll explore how to leverage the SDK specifically for **app** surveys.  It’s available on npm [here](https://www.npmjs.com/package/@formbricks/js/).
+The Formbricks JS SDK is a 2-in-1 SDK for seamlessly integrating both App Surveys and Website Surveys into your projects. In this section, we'll explore how to leverage the SDK specifically for **app** surveys. It’s available on npm [here](https://www.npmjs.com/package/@formbricks/js/).
 
 ### Install
 
@@ -26,9 +26,11 @@ The Formbricks JS SDK is a 2-in-1 SDK for seamlessly integrating both App Survey
 ```js {{ title: 'npm' }}
 npm install @formbricks/js
 ```
+
 ```js {{ title: 'yarn' }}
 yarn add @formbricks/js
 ```
+
 ```js {{ title: 'pnpm' }}
 pnpm add @formbricks/js
 ```
@@ -51,9 +53,10 @@ import formbricks from "@formbricks/js/app";
 formbricks.init({
   environmentId: "<your-environment-id>", // required
   apiHost: "<your-api-host>", // required
-  userId: "<user-id>" // required
+  userId: "<user-id>", // required
 });
 ```
+
 </CodeGroup>
 </Col>
 
@@ -67,15 +70,16 @@ Formbricks JS is a client SDK meant to be run client-side in their browser so ma
 
 ```js
 if (window !== undefined) {
-    formbricks.init({
-        environmentId: "<your-environment-id>",
-        apiHost: "<your-api-host>", 
-        userId: "<user-id>"
-    });
+  formbricks.init({
+    environmentId: "<your-environment-id>",
+    apiHost: "<your-api-host>",
+    userId: "<user-id>",
+  });
 } else {
-    console.error("Window object not accessible to init Formbricks");
+  console.error("Window object not accessible to init Formbricks");
 }
 ```
+
 </CodeGroup>
 </Col>
 
@@ -91,6 +95,7 @@ You can set custom attributes for the identified user. This can be helpful for s
 ```js
 formbricks.setAttribute("Plan", "Paid");
 ```
+
 </CodeGroup>
 </Col>
 
@@ -104,10 +109,10 @@ Track user actions to trigger surveys based on user interactions, such as button
 ```js
 formbricks.track("Clicked on Claim");
 ```
+
 </CodeGroup>
 </Col>
 
-
 ### Logout
 
 To log out and deinitialize Formbricks, use the formbricks.logout() function. This action clears the current initialization configuration and erases stored frontend information, such as the surveys a user has viewed or completed. It's an important step when a user logs out of your application or when you want to reset Formbricks.
@@ -118,6 +123,7 @@ To log out and deinitialize Formbricks, use the formbricks.logout() function. Th
 ```js
 formbricks.logout();
 ```
+
 </CodeGroup>
 </Col>
 
@@ -133,6 +139,7 @@ Reset the current instance and fetch the latest surveys and state again:
 ```js
 formbricks.reset();
 ```
+
 </CodeGroup>
 </Col>
 
@@ -140,7 +147,11 @@ formbricks.reset();
 
 Listen for page changes and dynamically show surveys configured via no-code actions in the Formbricks app:
 
-<Note> This is only needed when your framework has a custom routing system and you want to trigger surveys on route changes. For example: NextJs</Note>
+<Note>
+  {" "}
+  This is only needed when your framework has a custom routing system and you want to trigger surveys on route
+  changes. For example: NextJs
+</Note>
 
 <Col>
 <CodeGroup>
@@ -148,6 +159,7 @@ Listen for page changes and dynamically show surveys configured via no-code acti
 ```js
 formbricks.registerRouteChange();
 ```
+
 </CodeGroup>
 </Col>
 
@@ -167,7 +179,7 @@ In case you don’t see your survey right away, here's what you can do. Go throu
 
 ### Formbricks Cloud and your app are not connected properly.
 
-Go back to [app.formbricks.com](http://app.formbricks.com) or your self-hosted instance's URL and go to the Setup Checklist in the Settings. If the status is still indicated as “Not connected” your app hasn't yet pinged the Formbricks Cloud:
+Go back to [app.formbricks.com](http://app.formbricks.com) or your self-hosted instance's URL and go to the App connection in the Configuration. If the status is still indicated as “Not connected” your app hasn't yet pinged the Formbricks Cloud:
 
 <MdxImage
   src={I1}

apps/docs/app/developer-docs/contributing/components/FAQ.tsx

@@ -1,5 +1,4 @@
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@formbricks/ui/Accordion";
-
 import { FaqJsonLdComponent } from "./FAQPageJsonLd";
 
 const FAQ_DATA = [

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

@@ -67,8 +67,7 @@ The API requests are authorized with a personal API key. This API key gives you
    />
 
 <Note>
-  ### Store API key safely!
-  Anyone who has your API key has full control over your account. For security reasons, you cannot view the API key again.
+  ### Store API key safely! Anyone who has your API key has full control over your account. For security reasons, you cannot view the API key again.
 </Note>
 
 ### Test your API Key
@@ -123,7 +122,8 @@ Hit the below request to verify that you are authenticated with your API Key and
           "id": "cll2m30r60003mx0hnemjfckr",
           "name": "My Product"
       },
-      "widgetSetupCompleted": false
+      "appSetupCompleted": false,
+      "websiteSetupCompleted": false,
     }
     ```
     ```json {{ title: '401 Not Authenticated' }}

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

@@ -1,4 +1,5 @@
 import { MdxImage } from "@/components/MdxImage";
+import I1 from "./images/1-set-up-website-micro-survey-popup.webp";
 
 export const metadata = {
   title: "Formbricks Website Survey SDK",
@@ -142,4 +143,25 @@ This activates detailed debug messages in the browser console, providing deeper
 
 ---
 
+## Troubleshooting
+
+In case you don’t see your survey right away, here's what you can do. Go through these to find the error fast:
+
+### Formbricks Cloud and your website are not connected properly.
+
+Go back to [app.formbricks.com](http://app.formbricks.com) or your self-hosted instance's URL and go to the Website connection in the Configuration. If the status is still indicated as “Not connected” your app hasn't yet pinged the Formbricks Cloud:
+
+<MdxImage
+  src={I1}
+  alt="setup checklist ui of survey popup for website surveys"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+**How to fix it:**
+
+1. Check if your website loads the Formbricks widget correctly.
+2. Make sure you have `debug` mode enabled in your integration and you should see the Formbricks debug logs in your browser console while being in your app (right click in the browser, `Inspect`, switch to the console tab). If you don’t see them, double check your integration.
+
+---
+
 If you have any questions or need help, feel free to reach out to us on our **[Discord](https://formbricks.com/discord)**

apps/docs/app/global/api/page.mdx

@@ -67,8 +67,7 @@ The API requests are authorized with a personal API key. This API key gives you
    />
 
 <Note>
-  ### Store API key safely! Anyone who has your API key has full control over your account. For security
-  reasons, you cannot view the API key again.
+  ### Store API key safely! Anyone who has your API key has full control over your account. For security reasons, you cannot view the API key again.
 </Note>
 
 ### Test your API Key
@@ -123,7 +122,8 @@ Hit the below request to verify that you are authenticated with your API Key and
           "id": "cll2m30r60003mx0hnemjfckr",
           "name": "My Product"
       },
-      "widgetSetupCompleted": false
+      "appSetupCompleted": false,
+      "websiteSetupCompleted": false,
     }
     ```
     ```json {{ title: '401 Not Authenticated' }}

apps/docs/app/global/multi-language-surveys/page.mdx

@@ -49,7 +49,7 @@ How to deliver a specific language depends on the survey type (app or link surve
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-2. Click on the **Edit Languages** button, to add a new language to your survey
+2. Click on the **Edit languages** button, to add a new language to your survey
 
 <MdxImage
   src={SurveyLanguageSettings}
@@ -58,7 +58,7 @@ How to deliver a specific language depends on the survey type (app or link surve
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-3. Select the preferred language from the dropdown and assign an identifier Alias. Click the **Add Language** button to add the language to your product.
+3. Select the preferred language from the dropdown and assign an identifier Alias. Click the **Add language** button to add the language to your product.
 
 <MdxImage
   src={AddLanguages}

apps/docs/app/self-hosting/configuration/page.mdx

@@ -52,7 +52,6 @@ These variables are present inside your machine’s docker-compose file. Restart
 | DEFAULT_BRAND_COLOR         | Default brand color for your app (Can be overwritten from the UI as well).                 | optional                                                | #64748b                   |
 | DEFAULT_ORGANIZATION_ID     | Automatically assign new users to a specific organization when joining                     | optional                                                |                           |
 | DEFAULT_ORGANIZATION_ROLE   | Role of the user in the default organization.                                              | optional                                                | admin                     |
-| ONBOARDING_DISABLED         | Disables onboarding for new users if set to 1                                              | optional                                                |                           |
 | OIDC_DISPLAY_NAME           | Display name for Custom OpenID Connect Provider                                            | optional                                                |                           |
 | OIDC_CLIENT_ID              | Client ID for Custom OpenID Connect Provider                                               | optional (required if OIDC auth is enabled)             |                           |
 | OIDC_CLIENT_SECRET          | Secret for Custom OpenID Connect Provider                                                  | optional (required if OIDC auth is enabled)             |                           |

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

@@ -8,6 +8,101 @@ export const metadata = {
 
 # Migration Guide
 
+## v2.2
+
+Formbricks v2.2 introduces XM research presets into your products with a brand new product onboarding. Our objective is to make user research “obviously easy”, industry by industry. And we're starting with Software-as-a-Service and E-Commerce.
+
+### Steps to Migrate
+
+This guide is for users who are self-hosting Formbricks using our one-click setup. If you are using a different setup, you might adjust the commands accordingly.
+
+To run all these steps, please navigate to the `formbricks` folder where your `docker-compose.yml` file is located.
+
+1. **Backup your Database**: This is a crucial step. Please make sure to backup your database before proceeding with the upgrade. You can use the following command to backup your database:
+
+<Col>
+<CodeGroup title="Backup Postgres">
+
+```bash
+docker exec formbricks-postgres-1 pg_dump -Fc -U postgres -d formbricks > formbricks_pre_v2.2_$(date +%Y%m%d_%H%M%S).dump
+```
+
+</CodeGroup>
+</Col>
+
+<Note>
+  If you run into “No such container”, use `docker ps` to find your container name, e.g.
+  `formbricks_postgres_1`.
+</Note>
+
+<Note>
+  If you prefer storing the backup as an `*.sql` file remove the `-Fc` (custom format) option. In case of a
+  restore scenario you will need to use `psql` then with an empty `formbricks` database.
+</Note>
+
+2. Pull the latest version of Formbricks:
+
+<Col>
+<CodeGroup title="Stop the containers">
+
+```bash
+docker compose pull
+```
+
+</CodeGroup>
+</Col>
+
+3. Stop the running Formbricks instance & remove the related containers:
+
+<Col>
+<CodeGroup title="Stop the containers">
+
+```bash
+docker compose down
+```
+
+</CodeGroup>
+</Col>
+
+4. Restarting the containers with the latest version of Formbricks:
+
+<Col>
+<CodeGroup title="Restart the containers">
+
+```bash
+docker compose up -d
+```
+
+</CodeGroup>
+</Col>
+
+5. Now let's migrate the data to the latest schema:
+
+<Note>To find your Docker Network name for your Postgres Database, find it using `docker network ls`</Note>
+
+<Col>
+<CodeGroup title="Migrate the data">
+
+```bash
+docker pull ghcr.io/formbricks/data-migrations:latest && \
+docker run --rm \
+  --network=formbricks_default \
+  -e DATABASE_URL="postgresql://postgres:postgres@postgres:5432/formbricks?schema=public" \
+  -e UPGRADE_TO_VERSION="v2.2" \
+  ghcr.io/formbricks/data-migrations:latest
+```
+
+</CodeGroup>
+</Col>
+
+The above command will migrate your data to the latest schema. This is a crucial step to migrate your existing data to the new structure. Only if the script runs successful, changes are made to the database. The script can safely run multiple times.
+
+6. That's it! Once the migration is complete, you can **now access your Formbricks instance** at the same URL as before.
+
+### Changes in Environment Variables
+
+- `ONBOARDING_DISABLED` is now deprecated since we replaced the user onboarding with a product onboarding that only runs when creating a new product.
+
 ## v2.1
 
 Formbricks v2.1 introduces more options for creating No-Code Actions and lays the foundation for easier self-hosting of Formbricks starting with an Onboarding for fresh instances.

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

@@ -22,9 +22,7 @@ export const metadata = {
 Website Surveys make it easy for your public website visitors to give you feedback. They are a great way to get feedback from your users, without interrupting their workflow. This quickstart guide will show you how to create your first website survey in under 5 minutes.
 
 <Note>
-  Website Surveys are ideal for **public facing websites**. If you are looking to run surveys in your app
-  where you have user identification & want advanced user targeting, head over to the [App Surveys Quickstart
-  Guide](/app-surveys/quickstart).
+  Website Surveys are ideal for **public facing websites**. If you are looking to run surveys in your app where you have user identification & want advanced user targeting, head over to the [App Surveys Quickstart Guide](/app-surveys/quickstart).
 </Note>
 
 1. **Create a free Formbricks Cloud account**: While you can [self-host](/self-hosting/deployment) Formbricks, but the quickest and easiest way to get started is with the free Cloud plan. Just [sign up here](https://app.formbricks.com/auth/signup) and you'll be guided to our onboarding like below:

apps/docs/components/Footer.tsx

@@ -3,7 +3,6 @@
 import { navigation } from "@/lib/navigation";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-
 import { Button } from "./Button";
 import { DiscordIcon } from "./icons/DiscordIcon";
 import { GithubIcon } from "./icons/GithubIcon";
@@ -116,7 +115,7 @@ const SmallPrint = () => {
 
 export const Footer = () => {
   return (
-    <footer className="mx-auto w-full max-w-2xl space-y-10 pb-16 lg:max-w-5xl">
+    <footer className="my-10 flex-auto pb-16">
       <PageNavigation />
       <SmallPrint />
     </footer>

apps/docs/components/Header.tsx

@@ -6,7 +6,6 @@ import clsx from "clsx";
 import { motion, useScroll, useTransform } from "framer-motion";
 import Link from "next/link";
 import { forwardRef } from "react";
-
 import { Button } from "./Button";
 import { MobileNavigation, useIsInsideMobileNavigation, useMobileNavigationStore } from "./MobileNavigation";
 import { ThemeToggle } from "./ThemeToggle";

apps/docs/components/Heading.tsx

@@ -44,7 +44,7 @@ const Anchor = ({ id, inView, children }: { id: string; inView: boolean; childre
   );
 };
 
-export const Heading = <Level extends 2 | 3>({
+export const Heading = <Level extends 2 | 3 | 4>({
   children,
   tag,
   label,
@@ -59,11 +59,11 @@ export const Heading = <Level extends 2 | 3>({
   anchor?: boolean;
 }) => {
   level = level ?? (2 as Level);
-  let Component = `h${level}` as "h2" | "h3";
-  let ref = useRef<HTMLHeadingElement>(null);
-  let registerHeading = useSectionStore((s) => s.registerHeading);
+  const Component: "h2" | "h3" | "h4" = `h${level}`;
+  const ref = useRef<HTMLHeadingElement>(null);
+  const registerHeading = useSectionStore((s) => s.registerHeading);
 
-  let inView = useInView(ref, {
+  const inView = useInView(ref, {
     margin: `${remToPx(-3.5)}px 0px 0px 0px`,
     amount: "all",
   });
@@ -71,8 +71,12 @@ export const Heading = <Level extends 2 | 3>({
   useEffect(() => {
     if (level === 2) {
       registerHeading({ id: props.id, ref, offsetRem: tag || label ? 8 : 6 });
+    } else if (level === 3) {
+      registerHeading({ id: props.id, ref, offsetRem: tag || label ? 7 : 5 });
+    } else if (level === 4) {
+      registerHeading({ id: props.id, ref, offsetRem: tag || label ? 6 : 4 });
     }
-  });
+  }, [label, level, props.id, registerHeading, tag]);
 
   return (
     <>

apps/docs/components/Layout.tsx

@@ -2,10 +2,10 @@
 
 import { Logo } from "@/components/Logo";
 import { Navigation } from "@/components/Navigation";
+import { SideNavigation } from "@/components/SideNavigation";
 import { motion } from "framer-motion";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-
 import { Footer } from "./Footer";
 import { Header } from "./Header";
 import { type Section, SectionProvider } from "./SectionProvider";
@@ -17,7 +17,7 @@ export const Layout = ({
   children: React.ReactNode;
   allSections: Record<string, Array<Section>>;
 }) => {
-  let pathname = usePathname();
+  const pathname = usePathname();
 
   return (
     <SectionProvider sections={allSections[pathname || ""] ?? []}>
@@ -35,9 +35,12 @@ export const Layout = ({
             <Navigation className="hidden lg:mt-10 lg:block" isMobile={false} />
           </div>
         </motion.header>
-        <div className="relative flex h-full flex-col px-4 pt-14 sm:px-6 lg:px-8">
-          <main className="flex-auto">{children}</main>
-          <Footer />
+        <div className="flex h-screen flex-col">
+          <div className="flex flex-col px-4 pt-14 sm:px-6 lg:w-[calc(100%-20rem)] lg:px-8">
+            <main className="overflow-y-auto overflow-x-hidden">{children}</main>
+            <Footer />
+          </div>
+          <SideNavigation pathname={pathname} />
         </div>
       </div>
     </SectionProvider>

apps/docs/components/MdxImage.tsx

@@ -1,6 +1,15 @@
 import Image, { ImageProps } from "next/image";
-import React from "react";
 
 export const MdxImage = (props: ImageProps) => {
-  return <Image {...props} alt={props.alt} />;
+  return (
+    <Image
+      {...props}
+      alt={props.alt}
+      sizes="100vw"
+      style={{
+        width: "100%",
+        height: "auto",
+      }}
+    />
+  );
 };

apps/docs/components/Navigation.tsx

@@ -8,7 +8,6 @@ import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useRef, useState } from "react";
-
 import { Button } from "./Button";
 import { useIsInsideMobileNavigation } from "./MobileNavigation";
 import { useSectionStore } from "./SectionProvider";

apps/docs/components/SideNavigation.tsx

@@ -0,0 +1,82 @@
+import { useTableContentObserver } from "@/hooks/useTableContentObserver";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+type Heading = {
+  id: string;
+  text: string | null;
+  level: number;
+};
+
+export const SideNavigation = ({ pathname }) => {
+  const [headings, setHeadings] = useState<Heading[]>([]);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+
+  useTableContentObserver(setSelectedId, pathname);
+
+  useEffect(() => {
+    const getHeadings = () => {
+      // Select all heading elements (h2, h3, h4) with an 'id' attribute
+      const headingElements = document.querySelectorAll("h2[id], h3[id], h4[id]");
+      // Convert the NodeList of heading elements into an array and map them to an array of 'Heading' objects
+      const headings: Heading[] = Array.from(headingElements).map((heading) => ({
+        id: heading.id,
+        text: heading.textContent,
+        level: parseInt(heading.tagName.slice(1)),
+      }));
+
+      // Check if there are any h2 headings in the list
+      const hasH2 = headings.some((heading) => heading.level === 2);
+
+      // Update the 'headings' state with the retrieved headings, but only if there are h2 headings
+      setHeadings(hasH2 ? headings : []);
+    };
+
+    getHeadings();
+  }, [pathname]);
+
+  const renderHeading = (items: Heading[], currentLevel: number) => (
+    <ul className="ml-1 mt-4">
+      {items.map((heading, index) => {
+        if (heading.level === currentLevel) {
+          let nextIndex = index + 1;
+          while (nextIndex < items.length && items[nextIndex].level > currentLevel) {
+            nextIndex++;
+          }
+
+          return (
+            <li
+              key={heading.text}
+              className={`mb-4 ml-4 text-slate-900 dark:text-white  ml-${heading.level === 2 ? 0 : heading.level === 3 ? 4 : 6}`}>
+              <Link
+                href={`#${heading.id}`}
+                onClick={() => setSelectedId(heading.id)}
+                className={`${
+                  heading.id === selectedId
+                    ? "text-brand font-medium text-opacity-35"
+                    : "font-normal text-slate-600 hover:text-slate-950 dark:text-white dark:hover:text-slate-50"
+                }`}>
+                {heading.text}
+              </Link>
+              {nextIndex > index + 1 && renderHeading(items.slice(index + 1, nextIndex), currentLevel + 1)}
+            </li>
+          );
+        }
+        return null;
+      })}
+    </ul>
+  );
+
+  if (headings.length) {
+    return (
+      <aside className="fixed right-0 top-0 hidden h-[calc(100%-2.5rem)] w-80 overflow-hidden overflow-y-auto pr-8 pt-16 text-sm [scrollbar-width:none] lg:mt-10 lg:block">
+        <div className="border-l border-slate-200 dark:border-slate-700">
+          <h3 className="ml-5 mt-1 text-xs font-semibold uppercase text-slate-400">on this page</h3>
+          {renderHeading(headings, 2)}
+        </div>
+      </aside>
+    );
+  }
+
+  return null;
+};

apps/docs/components/mdx.tsx

@@ -19,10 +19,19 @@ export const wrapper = ({ children }: { children: React.ReactNode }) => {
   );
 };
 
-export const h2 = (props: Omit<React.ComponentPropsWithoutRef<typeof Heading>, "level">) => {
-  return <Heading level={2} {...props} />;
+const createHeadingComponent = (level: 2 | 3 | 4) => {
+  const Component = (props: Omit<React.ComponentPropsWithoutRef<typeof Heading>, "level">) => {
+    return <Heading level={level} {...props} />;
+  };
+
+  Component.displayName = `H${level}`;
+  return Component;
 };
 
+export const h2 = createHeadingComponent(2);
+export const h3 = createHeadingComponent(3);
+export const h4 = createHeadingComponent(4);
+
 const InfoIcon = (props: React.ComponentPropsWithoutRef<"svg">) => {
   return (
     <svg viewBox="0 0 16 16" aria-hidden="true" {...props}>

apps/docs/hooks/useTableContentObserver.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useRef } from "react";
+
+interface HeadingElement extends IntersectionObserverEntry {
+  target: HTMLHeadingElement;
+}
+
+/**
+ * A custom hook that sets up an IntersectionObserver to track the visibility of headings on the page.
+ *
+ * @param {Function} setActiveId - A function to set the active heading ID.
+ * @param {string} pathname - The current pathname, used as a dependency for the useEffect hook.
+ * @returns {void}
+ *
+ * This hook performs the following tasks:
+ * 1. Creates a map of heading elements, where the key is the heading's ID and the value is the heading element.
+ * 2. Finds the visible headings (i.e., headings that are currently intersecting with the viewport).
+ * 3. If there is only one visible heading, sets it as the active heading using the `setActiveId` function.
+ * 4. If there are multiple visible headings, sets the active heading to the one that is highest on the page (i.e., the one with the lowest index in the `headingElements` array).
+ * 5. Cleans up the IntersectionObserver and the `headingElementsRef` when the component is unmounted.
+ */
+export const useTableContentObserver = (setActiveId: (id: string) => void, pathname: string) => {
+  const headingElementsRef = useRef<Record<string, HeadingElement>>({});
+
+  useEffect(() => {
+    const callback = (headings: HeadingElement[]) => {
+      // Create a map of heading elements, where the key is the heading's ID and the value is the heading element
+      headingElementsRef.current = headings.reduce(
+        (map, headingElement) => {
+          return { ...map, [headingElement.target.id]: headingElement };
+        },
+        {} as Record<string, HeadingElement>
+      );
+
+      // Find the visible headings (i.e., headings that are currently intersecting with the viewport)
+      const visibleHeadings: HeadingElement[] = [];
+      Object.keys(headingElementsRef.current).forEach((key) => {
+        const headingElement = headingElementsRef.current[key];
+        if (headingElement.isIntersecting) visibleHeadings.push(headingElement);
+      });
+
+      // Define a function to get the index of a heading element in the headingElements array
+      const getIndexFromId = (id: string) => headingElements.findIndex((heading) => heading.id === id);
+
+      // If there is only one visible heading, set it as the active heading
+      if (visibleHeadings.length === 1) {
+        setActiveId(visibleHeadings[0].target.id);
+      }
+      // If there are multiple visible headings, set the active heading to the one that is highest on the page
+      else if (visibleHeadings.length > 1) {
+        const sortedVisibleHeadings = visibleHeadings.sort((a, b) => {
+          const aIndex = getIndexFromId(a.target.id);
+          const bIndex = getIndexFromId(b.target.id);
+          return aIndex - bIndex;
+        });
+        setActiveId(sortedVisibleHeadings[0].target.id);
+      }
+    };
+
+    const observer = new IntersectionObserver(callback, {
+      rootMargin: "-40px 0px -40% 0px",
+    });
+
+    const headingElements = Array.from(document.querySelectorAll("h2[id], h3[id], h4[id]"));
+    headingElements.forEach((element) => observer.observe(element));
+
+    return () => {
+      observer.disconnect();
+      headingElementsRef.current = {};
+    };
+  }, [setActiveId, pathname]);
+};

apps/docs/mdx/rehype.mjs

@@ -46,9 +46,9 @@ const rehypeShiki = () => {
 
 const rehypeSlugify = () => {
   return (tree) => {
-    let slugify = slugifyWithCounter();
+    const slugify = slugifyWithCounter();
     visit(tree, "element", (node) => {
-      if (node.tagName === "h2" && !node.properties.id) {
+      if (["h2", "h3", "h4"].includes(node.tagName) && !node.properties.id) {
         node.properties.id = slugify(toString(node));
       }
     });
@@ -83,15 +83,15 @@ const rehypeAddMDXExports = (getExports) => {
 };
 
 const getSections = (node) => {
-  let sections = [];
+  const sections = [];
 
-  for (let child of node.children ?? []) {
-    if (child.type === "element" && child.tagName === "h2") {
+  for (const child of node.children ?? []) {
+    if (child.type === "element" && ["h2", "h3", "h4"].includes(child.tagName)) {
       sections.push(`{
-        title: ${JSON.stringify(toString(child))},
-        id: ${JSON.stringify(child.properties.id)},
-        ...${child.properties.annotation}
-      }`);
+          title: ${JSON.stringify(toString(child))},
+          id: ${JSON.stringify(child.properties.id)},
+          ...${child.properties.annotation}
+        }`);
     } else if (child.children) {
       sections.push(...getSections(child));
     }

apps/docs/package.json

@@ -12,34 +12,34 @@
   },
   "browserslist": "defaults, not ie <= 11",
   "dependencies": {
-    "@algolia/autocomplete-core": "^1.17.0",
-    "@calcom/embed-react": "^1.4.0",
+    "@algolia/autocomplete-core": "^1.17.2",
+    "@calcom/embed-react": "^1.5.0",
     "@docsearch/css": "3",
     "@docsearch/react": "^3.6.0",
     "@formbricks/lib": "workspace:*",
     "@formbricks/types": "workspace:*",
     "@formbricks/ui": "workspace:*",
-    "@headlessui/react": "^2.0.3",
-    "@headlessui/tailwindcss": "^0.2.0",
+    "@headlessui/react": "^2.0.4",
+    "@headlessui/tailwindcss": "^0.2.1",
     "@mapbox/rehype-prism": "^0.9.0",
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
-    "@next/mdx": "14.2.3",
+    "@next/mdx": "14.2.4",
     "@paralleldrive/cuid2": "^2.2.2",
     "@sindresorhus/slugify": "^2.2.1",
     "@tailwindcss/typography": "^0.5.13",
-    "acorn": "^8.11.3",
+    "acorn": "^8.12.0",
     "autoprefixer": "^10.4.19",
     "clsx": "^2.1.1",
     "fast-glob": "^3.3.2",
     "flexsearch": "^0.7.43",
-    "framer-motion": "11.1.9",
+    "framer-motion": "11.2.11",
     "lottie-web": "^5.12.2",
-    "lucide": "^0.378.0",
-    "lucide-react": "^0.378.0",
+    "lucide": "^0.395.0",
+    "lucide-react": "^0.395.0",
     "mdast-util-to-string": "^4.0.0",
     "mdx-annotations": "^0.1.4",
-    "next": "14.2.3",
+    "next": "14.2.4",
     "next-plausible": "^3.12.0",
     "next-seo": "^6.5.0",
     "next-sitemap": "^4.2.3",
@@ -59,7 +59,7 @@
     "sharp": "^0.33.4",
     "shiki": "^0.14.7",
     "simple-functional-loader": "^1.2.1",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^3.4.4",
     "unist-util-filter": "^5.0.1",
     "unist-util-visit": "^5.0.0",
     "zustand": "^4.5.2"
@@ -67,7 +67,7 @@
   "devDependencies": {
     "@formbricks/config-typescript": "workspace:*",
     "@types/dompurify": "^3.0.5",
-    "@types/react-highlight-words": "^0.16.7",
+    "@types/react-highlight-words": "^0.20.0",
     "@formbricks/eslint-config": "workspace:*"
   }
 }

apps/docs/tailwind.config.ts

@@ -3,7 +3,6 @@ import forms from "@tailwindcss/forms";
 import typographyPlugin from "@tailwindcss/typography";
 import { type Config } from "tailwindcss";
 import defaultTheme from "tailwindcss/defaultTheme";
-
 import typographyStyles from "./typography";
 
 export default {

apps/formbricks-com/next-env.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/formbricks-com/public/sitemap-0.xml

@@ -1,118 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://formbricks.com</loc><lastmod>2024-04-08T07:33:12.606Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/blog</loc><lastmod>2024-04-08T07:33:12.613Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/blog/author/johannes</loc><lastmod>2024-04-08T07:33:12.613Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/blog/author/shubham</loc><lastmod>2024-04-08T07:33:12.613Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/blog/author/sudhanshu</loc><lastmod>2024-04-08T07:33:12.613Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/blog/best-feedback-app-and-how-to-use-them</loc><lastmod>2024-04-08T07:33:12.613Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/blog/best-hotjar-alternatives-2024-incl-open-source</loc><lastmod>2024-04-08T07:33:12.613Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/blog/best-open-source-survey-software-2023</loc><lastmod>2024-04-08T07:33:12.613Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/blog/best-website-feedback-tools-2024</loc><lastmod>2024-04-08T07:33:12.613Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/blog/experience-management-open-source</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/blog/first-end-to-endcommunity-feature</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/blog/github-accelerator-experience</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/blog/granular-targeting-in-app-surveys</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/blog/how-smart-writers-use-formbricks-open-source-tool-to-measure-the-quality-of-their-newsletter-content</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/blog/inaugural-batch-github-accelerator</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/blog/join-the-formtribe</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/blog/open-source-forms-will-save-the-world</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/blog/open-source-qualtrics-beats-typeform</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/blog/remove-branding-for-free</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/blog/snoopforms-becomes-formbricks</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/blog/terraform-ecs-aws-self-hosting</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/blog/the-perfect-waitlist-survey</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/blog/understanding-formbricks-self-hosting</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/blog/why-open-source-no-code-is-the-future-of-enterprise-gov-software</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/careers</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/community</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/community/ContributorGrid</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/community/HallOfFame</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/community/HeaderTribe</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/community/LayoutTribe</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/community/LevelCard</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/community/LevelGrid</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/community/Roadmap</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/concierge</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs-feedback</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/feature-chaser</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/feedback-box</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/gdpr</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/gdpr-guide</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/imprint</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/improve-trial-conversion</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/in-app-survey</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/interview-prompt</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/learn-from-churn</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/measure-product-market-fit</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/onboarding-segmentation</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/open-source-form-builder</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/oss-friends</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/pricing</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/privacy-policy</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/terms</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/vs-formspree</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/vs-google-forms</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/vs-ohmyform</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/website-survey</loc><lastmod>2024-04-08T07:33:12.614Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/api/client/responses</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/api/management/action-classes</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/api/management/attribute-classes</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/api/management/me</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/api/management/people</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/api/client/overview</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/api/management/responses</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/api/management/webhooks</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/api/client/displays</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/best-practices/cancel-subscription</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/api/client/people</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/best-practices/feedback-box</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/best-practices/feature-chaser</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/best-practices/docs-feedback</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/best-practices/improve-trial-cr</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/api/management/api-key-setup</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/best-practices/improve-email-content</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/best-practices/pmf-survey</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/best-practices/interview-prompt</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/contributing/demo</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/contributing/how-we-code</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/contributing/introduction</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/contributing/creating-a-service</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/contributing/setup</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/additional-features/multi-language-surveys</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/contributing/troubleshooting</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/getting-started/quickstart-in-app-survey</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/faq</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/in-app-surveys/actions</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/api/client/actions</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/getting-started/framework-guides</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/in-app-surveys/advanced-targeting</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/in-app-surveys/user-identification</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/getting-started/troubleshooting</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/in-app-surveys/attributes</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/api/management/surveys</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/integrations/make</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/integrations/airtable</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/integrations/notion</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/integrations/zapier</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/link-surveys/data-prefilling</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/integrations/wordpress</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/introduction/what-is-formbricks</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/introduction/how-it-works</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/introduction/why-is-it-better</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/link-surveys/single-use-links</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/link-surveys/hidden-fields</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/link-surveys/quickstart</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/link-surveys/source-tracking</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/self-hosting/docker</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/self-hosting/deployment</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/link-surveys/start-at-question</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/link-surveys/user-identification</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/self-hosting/enterprise</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/self-hosting/external-auth-providers</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/self-hosting/migration-guide</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/self-hosting/production</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/self-hosting/license</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/integrations/n8n</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/integrations/google-sheets</loc><lastmod>2024-04-08T07:33:12.615Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-</urlset>

apps/formbricks-com/public/sitemap.xml

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-<sitemap><loc>https://formbricks.com/sitemap-0.xml</loc></sitemap>
-</sitemapindex>

apps/storybook/.storybook/preview.ts

@@ -1,5 +1,4 @@
 import type { Preview } from "@storybook/react";
-
 import "../../web/app/globals.css";
 
 const preview: Preview = {

apps/storybook/package.json

@@ -19,22 +19,22 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^1.5.0",
     "@formbricks/config-typescript": "workspace:*",
-    "@storybook/addon-essentials": "^8.1.5",
-    "@storybook/addon-interactions": "^8.1.5",
-    "@storybook/addon-links": "^8.1.5",
-    "@storybook/addon-onboarding": "^8.1.5",
-    "@storybook/blocks": "^8.1.5",
-    "@storybook/react": "^8.1.5",
-    "@storybook/react-vite": "^8.1.5",
-    "@storybook/test": "^8.1.5",
-    "@typescript-eslint/eslint-plugin": "^7.12.0",
-    "@typescript-eslint/parser": "^7.12.0",
-    "@vitejs/plugin-react": "^4.3.0",
-    "esbuild": "^0.21.4",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-interactions": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/addon-onboarding": "^8.1.10",
+    "@storybook/blocks": "^8.1.10",
+    "@storybook/react": "^8.1.10",
+    "@storybook/react-vite": "^8.1.10",
+    "@storybook/test": "^8.1.10",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/parser": "^7.13.1",
+    "@vitejs/plugin-react": "^4.3.1",
+    "esbuild": "^0.21.5",
     "eslint-plugin-storybook": "^0.8.0",
     "prop-types": "^15.8.1",
-    "storybook": "^8.1.5",
+    "storybook": "^8.1.10",
     "tsup": "^8.1.0",
-    "vite": "^5.2.12"
+    "vite": "^5.3.1"
   }
 }

apps/storybook/src/App.tsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-
 import "./App.css";
 
 export const App = () => {

apps/storybook/src/main.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-
 import App from "./App.tsx";
 import "./index.css";
 

apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/components/ConnectWithFormbricks.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import Dance from "@/images/onboarding-dance.gif";
+import Lost from "@/images/onboarding-lost.gif";
+import { ArrowRight } from "lucide-react";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { cn } from "@formbricks/lib/cn";
+import { TEnvironment } from "@formbricks/types/environment";
+import { TProductConfigChannel } from "@formbricks/types/product";
+import { Button } from "@formbricks/ui/Button";
+import { OnboardingSetupInstructions } from "./OnboardingSetupInstructions";
+
+interface ConnectWithFormbricksProps {
+  environment: TEnvironment;
+  webAppUrl: string;
+  widgetSetupCompleted: boolean;
+  channel: TProductConfigChannel;
+}
+
+export const ConnectWithFormbricks = ({
+  environment,
+  webAppUrl,
+  widgetSetupCompleted,
+  channel,
+}: ConnectWithFormbricksProps) => {
+  const router = useRouter();
+
+  const handleFinishOnboarding = async () => {
+    if (!widgetSetupCompleted) {
+      router.push(`/environments/${environment.id}/connect/invite`);
+      return;
+    }
+    router.push(`/environments/${environment.id}/surveys`);
+  };
+
+  useEffect(() => {
+    const handleVisibilityChange = async () => {
+      if (document.visibilityState === "visible") {
+        router.refresh();
+      }
+    };
+
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className="mt-6 flex w-5/6 flex-col items-center space-y-10 lg:w-2/3 2xl:w-1/2">
+      <div className="flex w-full space-x-10">
+        <div className="flex w-1/2 flex-col space-y-4">
+          <OnboardingSetupInstructions
+            environmentId={environment.id}
+            webAppUrl={webAppUrl}
+            channel={channel}
+            widgetSetupCompleted={widgetSetupCompleted}
+          />
+        </div>
+        <div
+          className={cn(
+            "flex h-[30rem] w-1/2 flex-col items-center justify-center rounded-lg border bg-slate-200 text-center shadow",
+            widgetSetupCompleted ? "border-green-500 bg-green-100" : ""
+          )}>
+          {widgetSetupCompleted ? (
+            <div>
+              <Image src={Dance} alt="lost" height={250} />
+              <p className="mt-6 text-xl font-bold">Connection successful ✅</p>
+            </div>
+          ) : (
+            <div className="space-y-4">
+              <Image src={Lost} alt="lost" height={250} />
+              <p className="pt-4 text-slate-400">Waiting for your signal...</p>
+            </div>
+          )}
+        </div>
+      </div>
+      <Button
+        id="finishOnboarding"
+        variant={widgetSetupCompleted ? "darkCTA" : "minimal"}
+        onClick={handleFinishOnboarding}
+        EndIcon={ArrowRight}>
+        {widgetSetupCompleted ? "Finish Onboarding" : "Skip"}
+      </Button>
+    </div>
+  );
+};

apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/components/InviteOrganizationMember.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { inviteOrganizationMemberAction } from "@/app/(app)/(onboarding)/organizations/actions";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useRouter } from "next/navigation";
+import { FormProvider, useForm } from "react-hook-form";
+import { toast } from "react-hot-toast";
+import { z } from "zod";
+import { TOrganization } from "@formbricks/types/organizations";
+import { Button } from "@formbricks/ui/Button";
+import { FormControl, FormError, FormField, FormItem, FormLabel } from "@formbricks/ui/Form";
+import { Input } from "@formbricks/ui/Input";
+
+interface InviteOrganizationMemberProps {
+  organization: TOrganization;
+  environmentId: string;
+}
+
+const ZInviteOrganizationMemberDetails = z.object({
+  email: z.string().email(),
+  inviteMessage: z.string().trim().min(1),
+});
+type TInviteOrganizationMemberDetails = z.infer<typeof ZInviteOrganizationMemberDetails>;
+
+export const InviteOrganizationMember = ({ organization, environmentId }: InviteOrganizationMemberProps) => {
+  const router = useRouter();
+
+  const form = useForm<TInviteOrganizationMemberDetails>({
+    defaultValues: {
+      email: "",
+      inviteMessage: "I'm looking into Formbricks to run targeted surveys. Can you help me set it up? 🙏",
+    },
+    resolver: zodResolver(ZInviteOrganizationMemberDetails),
+  });
+  const { isSubmitting } = form.formState;
+
+  const handleInvite = async (data: TInviteOrganizationMemberDetails) => {
+    try {
+      await inviteOrganizationMemberAction(organization.id, data.email, "developer", data.inviteMessage);
+      toast.success("Invite sent successful");
+      await finishOnboarding();
+    } catch (error) {
+      toast.error("An unexpected error occurred");
+    }
+  };
+
+  const finishOnboarding = async () => {
+    router.push(`/environments/${environmentId}/surveys`);
+  };
+
+  return (
+    <div className="mb-8 w-full max-w-xl space-y-8">
+      <FormProvider {...form}>
+        <form onSubmit={form.handleSubmit(handleInvite)} className="w-full space-y-4">
+          <div className="space-y-4">
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field, fieldState: { error } }) => (
+                <FormItem className="w-full space-y-4">
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <div>
+                      <Input
+                        value={field.value}
+                        onChange={(email) => field.onChange(email)}
+                        placeholder="engineering@acme.com"
+                        className=" bg-white"
+                      />
+                      {error?.message && <FormError className="text-left">{error.message}</FormError>}
+                    </div>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="inviteMessage"
+              render={({ field, fieldState: { error } }) => (
+                <FormItem className="w-full space-y-4">
+                  <FormLabel>Invite Message</FormLabel>
+                  <FormControl>
+                    <div>
+                      <textarea
+                        rows={5}
+                        className="focus:border-brand-dark flex w-full rounded-md border border-slate-300 bg-transparent bg-white px-3 py-2 text-sm text-slate-800 placeholder:text-slate-400 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-500 dark:text-slate-300"
+                        value={field.value}
+                        onChange={(inviteMessage) => field.onChange(inviteMessage)}
+                      />
+                      {error?.message && <FormError className="text-left">{error.message}</FormError>}
+                    </div>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+
+            <div className="flex w-full justify-end space-x-2">
+              <Button
+                id="onboarding-inapp-invite-have-a-look-first"
+                className="font-normal text-slate-400"
+                variant="minimal"
+                onClick={(e) => {
+                  e.preventDefault();
+                  finishOnboarding();
+                }}>
+                Skip
+              </Button>
+              <Button
+                id="onboarding-inapp-invite-send-invite"
+                variant="darkCTA"
+                type={"submit"}
+                loading={isSubmitting}>
+                Invite
+              </Button>
+            </div>
+          </div>
+        </form>
+      </FormProvider>
+    </div>
+  );
+};

apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/components/OnboardingSetupInstructions.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+import "prismjs/themes/prism.css";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { TProductConfigChannel } from "@formbricks/types/product";
+import { Button } from "@formbricks/ui/Button";
+import { CodeBlock } from "@formbricks/ui/CodeBlock";
+import { TabBar } from "@formbricks/ui/TabBar";
+import { Html5Icon, NpmIcon } from "@formbricks/ui/icons";
+
+const tabs = [
+  { id: "html", label: "HTML", icon: <Html5Icon /> },
+  { id: "npm", label: "NPM", icon: <NpmIcon /> },
+];
+
+interface OnboardingSetupInstructionsProps {
+  environmentId: string;
+  webAppUrl: string;
+  channel: TProductConfigChannel;
+  widgetSetupCompleted: boolean;
+}
+
+export const OnboardingSetupInstructions = ({
+  environmentId,
+  webAppUrl,
+  channel,
+  widgetSetupCompleted,
+}: OnboardingSetupInstructionsProps) => {
+  const [activeTab, setActiveTab] = useState(tabs[0].id);
+  const htmlSnippetForAppSurveys = `<!-- START Formbricks Surveys -->
+  <script type="text/javascript">
+  !function(){
+      var apiHost = "${webAppUrl}";
+      var environmentId = "${environmentId}";
+      var userId = "testUser";
+      var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=apiHost+"/api/packages/app";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.init({environmentId: environmentId, apiHost: apiHost, userId: userId})},500)}();
+  </script>
+  <!-- END Formbricks Surveys -->
+  `;
+
+  const htmlSnippetForWebsiteSurveys = `<!-- START Formbricks Surveys -->
+  <script type="text/javascript">
+  !function(){
+    var apiHost = "${webAppUrl}";
+    var environmentId = "${environmentId}";
+      var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=apiHost+"/api/packages/website";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.init({environmentId: environmentId, apiHost: apiHost})},500)}();
+  </script>
+  <!-- END Formbricks Surveys -->
+  `;
+
+  const npmSnippetForAppSurveys = `
+  import formbricks from "@formbricks/js/app";
+  
+  if (typeof window !== "undefined") {
+    formbricks.init({
+      environmentId: "${environmentId}",
+      apiHost: "${webAppUrl}",
+      userId: "testUser",
+    });
+  }
+  
+  function App() {
+    // your own app
+  }
+  
+  export default App;
+  `;
+
+  const npmSnippetForWebsiteSurveys = `
+  // other imports
+  import formbricks from "@formbricks/js/website";
+  
+  if (typeof window !== "undefined") {
+    formbricks.init({
+      environmentId: "${environmentId}",
+      apiHost: "${webAppUrl}",
+    });
+  }
+  
+  function App() {
+    // your own app
+  }
+  
+  export default App;
+  
+  `;
+
+  return (
+    <div>
+      <div className="flex h-14 w-full items-center justify-center rounded-md border border-slate-200 bg-white">
+        <TabBar
+          tabs={tabs}
+          activeId={activeTab}
+          setActiveId={setActiveTab}
+          tabStyle="button"
+          className="bg-slate-100"
+        />
+      </div>
+      <div>
+        {activeTab === "npm" ? (
+          <div className="prose prose-slate w-full">
+            <CodeBlock customEditorClass="!bg-white border border-slate-200" language="sh">
+              npm install @formbricks/js
+            </CodeBlock>
+            <p>or</p>
+            <CodeBlock customEditorClass="!bg-white border border-slate-200" language="sh">
+              yarn add @formbricks/js
+            </CodeBlock>
+            <p className="text-sm text-slate-700">
+              Import Formbricks and initialize the widget in your Component (e.g. App.tsx):
+            </p>
+            <CodeBlock customEditorClass="!bg-white border border-slate-200" language="js">
+              {channel === "app" ? npmSnippetForAppSurveys : npmSnippetForWebsiteSurveys}
+            </CodeBlock>
+            <Button
+              id="onboarding-inapp-connect-read-npm-docs"
+              className="mt-3"
+              variant="secondary"
+              href={`https://formbricks.com/docs/${channel}-surveys/framework-guides`}
+              target="_blank">
+              Read docs
+            </Button>
+          </div>
+        ) : activeTab === "html" ? (
+          <div className="prose prose-slate">
+            <p className="-mb-1 mt-6 text-sm text-slate-700">
+              Insert this code into the &lt;head&gt; tag of your website:
+            </p>
+            <div>
+              <CodeBlock customEditorClass="!bg-white border border-slate-200" language="js">
+                {channel === "app" ? htmlSnippetForAppSurveys : htmlSnippetForWebsiteSurveys}
+              </CodeBlock>
+            </div>
+
+            <div className="mt-4 flex justify-between space-x-2">
+              <Button
+                id="onboarding-inapp-connect-copy-code"
+                variant={widgetSetupCompleted ? "secondary" : "darkCTA"}
+                onClick={() => {
+                  navigator.clipboard.writeText(
+                    channel === "app" ? htmlSnippetForAppSurveys : htmlSnippetForWebsiteSurveys
+                  );
+                  toast.success("Copied to clipboard");
+                }}>
+                Copy code
+              </Button>
+              <Button
+                id="onboarding-inapp-connect-step-by-step-manual"
+                variant="secondary"
+                href={`https://formbricks.com/docs/${channel}-surveys/framework-guides#html`}
+                target="_blank">
+                Step by step manual
+              </Button>
+            </div>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+};

apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/invite/page.tsx

@@ -0,0 +1,53 @@
+import { InviteOrganizationMember } from "@/app/(app)/(onboarding)/environments/[environmentId]/connect/components/InviteOrganizationMember";
+import { XIcon } from "lucide-react";
+import { getServerSession } from "next-auth";
+import { notFound, redirect } from "next/navigation";
+import { authOptions } from "@formbricks/lib/authOptions";
+import { getMembershipByUserIdOrganizationId } from "@formbricks/lib/membership/service";
+import { getOrganizationByEnvironmentId } from "@formbricks/lib/organization/service";
+import { Button } from "@formbricks/ui/Button";
+import { Header } from "@formbricks/ui/Header";
+
+interface InvitePageProps {
+  params: {
+    environmentId: string;
+  };
+}
+
+const Page = async ({ params }: InvitePageProps) => {
+  const session = await getServerSession(authOptions);
+  if (!session || !session.user) {
+    return redirect(`/auth/login`);
+  }
+  const organization = await getOrganizationByEnvironmentId(params.environmentId);
+  if (!organization) {
+    throw new Error("Organization not Found");
+  }
+
+  const membership = await getMembershipByUserIdOrganizationId(session.user.id, organization.id);
+  if (!membership || (membership.role !== "owner" && membership.role !== "admin")) {
+    return notFound();
+  }
+
+  return (
+    <div className="flex min-h-full min-w-full flex-col items-center justify-center">
+      <Header
+        title="Invite your organization to help out"
+        subtitle="Ask your tech-savvy co-worker to finish the setup:"
+      />
+      <div className="space-y-4 text-center">
+        <p className="text-4xl font-medium text-slate-800"></p>
+        <p className="text-sm text-slate-500"></p>
+      </div>
+      <InviteOrganizationMember organization={organization} environmentId={params.environmentId} />
+      <Button
+        className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
+        variant="minimal"
+        href={`/environments/${params.environmentId}/`}>
+        <XIcon className="h-7 w-7" strokeWidth={1.5} />
+      </Button>
+    </div>
+  );
+};
+
+export default Page;

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

@@ -0,0 +1,21 @@
+import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
+import { authOptions } from "@formbricks/lib/authOptions";
+import { hasUserEnvironmentAccess } from "@formbricks/lib/environment/auth";
+import { AuthorizationError } from "@formbricks/types/errors";
+
+const OnboardingLayout = async ({ children, params }) => {
+  const session = await getServerSession(authOptions);
+  if (!session || !session.user) {
+    return redirect(`/auth/login`);
+  }
+
+  const isAuthorized = await hasUserEnvironmentAccess(session.user.id, params.environmentId);
+  if (!isAuthorized) {
+    throw AuthorizationError;
+  }
+
+  return <div className="flex-1 bg-slate-50">{children}</div>;
+};
+
+export default OnboardingLayout;

apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/page.tsx

@@ -0,0 +1,65 @@
+import { ConnectWithFormbricks } from "@/app/(app)/(onboarding)/environments/[environmentId]/connect/components/ConnectWithFormbricks";
+import { getCustomHeadline } from "@/app/(app)/(onboarding)/lib/utils";
+import { XIcon } from "lucide-react";
+import { notFound } from "next/navigation";
+import { WEBAPP_URL } from "@formbricks/lib/constants";
+import { getEnvironment } from "@formbricks/lib/environment/service";
+import { getProductByEnvironmentId } from "@formbricks/lib/product/service";
+import { Button } from "@formbricks/ui/Button";
+import { Header } from "@formbricks/ui/Header";
+
+interface ConnectPageProps {
+  params: {
+    environmentId: string;
+  };
+}
+
+const Page = async ({ params }: ConnectPageProps) => {
+  const environment = await getEnvironment(params.environmentId);
+
+  if (!environment) {
+    throw new Error("Environment not found");
+  }
+
+  const product = await getProductByEnvironmentId(environment.id);
+  if (!product) {
+    throw new Error("Product not found");
+  }
+
+  const channel = product.config.channel;
+  const industry = product.config.industry;
+
+  if (!channel || !industry) {
+    return notFound();
+  }
+  const customHeadline = getCustomHeadline(channel, industry);
+
+  return (
+    <div className="flex min-h-full flex-col items-center justify-center py-10">
+      <Header
+        title={`Let's connect your ${customHeadline} with Formbricks`}
+        subtitle="If you don't do it now, chances are low that you will ever do it!"
+      />
+      <div className="space-y-4 text-center">
+        <p className="text-4xl font-medium text-slate-800"></p>
+        <p className="text-sm text-slate-500"></p>
+      </div>
+      <ConnectWithFormbricks
+        environment={environment}
+        webAppUrl={WEBAPP_URL}
+        widgetSetupCompleted={
+          channel === "app" ? environment.appSetupCompleted : environment.websiteSetupCompleted
+        }
+        channel={channel}
+      />
+      <Button
+        className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
+        variant="minimal"
+        href={`/environments/${environment.id}/`}>
+        <XIcon className="h-7 w-7" strokeWidth={1.5} />
+      </Button>
+    </div>
+  );
+};
+
+export default Page;

apps/web/app/(app)/(onboarding)/lib/utils.ts

@@ -0,0 +1,11 @@
+import { TProductConfigChannel, TProductConfigIndustry } from "@formbricks/types/product";
+
+export const getCustomHeadline = (channel: TProductConfigChannel, industry: TProductConfigIndustry) => {
+  const combinations = {
+    "website+eCommerce": "web shop",
+    "website+saas": "landing page",
+    "app+eCommerce": "shopping app",
+    "app+saas": "SaaS app",
+  };
+  return combinations[`${channel}+${industry}`] || "app";
+};

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/layout.tsx

@@ -0,0 +1,31 @@
+import { getServerSession } from "next-auth";
+import { notFound, redirect } from "next/navigation";
+import { authOptions } from "@formbricks/lib/authOptions";
+import { getMembershipByUserIdOrganizationId } from "@formbricks/lib/membership/service";
+import { canUserAccessOrganization } from "@formbricks/lib/organization/auth";
+import { AuthorizationError } from "@formbricks/types/errors";
+import { ToasterClient } from "@formbricks/ui/ToasterClient";
+
+const ProductOnboardingLayout = async ({ children, params }) => {
+  const session = await getServerSession(authOptions);
+  if (!session || !session.user) {
+    return redirect(`/auth/login`);
+  }
+
+  const isAuthorized = await canUserAccessOrganization(session.user.id, params.organizationId);
+  if (!isAuthorized) {
+    throw AuthorizationError;
+  }
+
+  const membership = await getMembershipByUserIdOrganizationId(session.user.id, params.organizationId);
+  if (!membership || membership.role === "viewer") return notFound();
+
+  return (
+    <div className="flex-1 bg-slate-50">
+      <ToasterClient />
+      {children}
+    </div>
+  );
+};
+
+export default ProductOnboardingLayout;

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/products/new/channel/page.tsx

@@ -0,0 +1,60 @@
+import { OnboardingOptionsContainer } from "@/app/(app)/(onboarding)/organizations/components/OnboardingOptionsContainer";
+import { CircleUserRoundIcon, EarthIcon, SendHorizonalIcon, XIcon } from "lucide-react";
+import { getProducts } from "@formbricks/lib/product/service";
+import { Button } from "@formbricks/ui/Button";
+import { Header } from "@formbricks/ui/Header";
+
+interface ChannelPageProps {
+  params: {
+    organizationId: string;
+  };
+}
+
+const Page = async ({ params }: ChannelPageProps) => {
+  const channelOptions = [
+    {
+      title: "Public website",
+      description: "Display surveys on public websites, well timed and targeted.",
+      icon: EarthIcon,
+      iconText: "Built for scale",
+      href: `/organizations/${params.organizationId}/products/new/industry?channel=website`,
+    },
+    {
+      title: "App with sign up",
+      description: "Run highly targeted surveys with any user cohort.",
+      icon: CircleUserRoundIcon,
+      iconText: "Enrich user profiles",
+      href: `/organizations/${params.organizationId}/products/new/industry?channel=app`,
+    },
+    {
+      channel: "link",
+      title: "Anywhere online",
+      description: "Create link and email surveys, reach your people anywhere.",
+      icon: SendHorizonalIcon,
+      iconText: "100% custom branding",
+      href: `/organizations/${params.organizationId}/products/new/industry?channel=link`,
+    },
+  ];
+
+  const products = await getProducts(params.organizationId);
+
+  return (
+    <div className="flex min-h-full min-w-full flex-col items-center justify-center space-y-12">
+      <Header
+        title="Where do you want to survey people?"
+        subtitle="Get started with proven best practices 🚀"
+      />
+      <OnboardingOptionsContainer options={channelOptions} />
+      {products.length >= 1 && (
+        <Button
+          className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
+          variant="minimal"
+          href={"/"}>
+          <XIcon className="h-7 w-7" strokeWidth={1.5} />
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default Page;

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/products/new/industry/page.tsx

@@ -0,0 +1,69 @@
+import { OnboardingOptionsContainer } from "@/app/(app)/(onboarding)/organizations/components/OnboardingOptionsContainer";
+import { HeartIcon, MonitorIcon, ShoppingCart, XIcon } from "lucide-react";
+import { notFound } from "next/navigation";
+import { IS_FORMBRICKS_CLOUD } from "@formbricks/lib/constants";
+import { getProducts } from "@formbricks/lib/product/service";
+import { TProductConfigChannel } from "@formbricks/types/product";
+import { Button } from "@formbricks/ui/Button";
+import { Header } from "@formbricks/ui/Header";
+
+interface IndustryPageProps {
+  params: {
+    organizationId: string;
+  };
+  searchParams: {
+    channel?: TProductConfigChannel;
+  };
+}
+
+const Page = async ({ params, searchParams }: IndustryPageProps) => {
+  const channel = searchParams.channel;
+  if (!channel) {
+    return notFound();
+  }
+
+  const products = await getProducts(params.organizationId);
+
+  const industryOptions = [
+    {
+      title: "E-Commerce",
+      description: "Implement proven best practices to understand why people buy.",
+      icon: ShoppingCart,
+      iconText: "B2B and B2C",
+      href: `/organizations/${params.organizationId}/products/new/settings?channel=${channel}&industry=eCommerce`,
+    },
+    {
+      title: "SaaS",
+      description: "Gather contextualized feedback to improve product-market fit.",
+      icon: MonitorIcon,
+      iconText: "Proven methods",
+      href: `/organizations/${params.organizationId}/products/new/settings?channel=${channel}&industry=saas`,
+    },
+    {
+      title: "Other",
+      description: "Universal Formricks experience with features for every industry.",
+      icon: HeartIcon,
+      iconText: "Customer insights",
+      href: IS_FORMBRICKS_CLOUD
+        ? `/organizations/${params.organizationId}/products/new/survey?channel=${channel}&industry=other`
+        : `/organizations/${params.organizationId}/products/new/settings?channel=${channel}&industry=other`,
+    },
+  ];
+
+  return (
+    <div className="flex min-h-full min-w-full flex-col items-center justify-center space-y-12">
+      <Header title="Which industry do you work for?" subtitle="Get started with proven best practices 🚀" />
+      <OnboardingOptionsContainer options={industryOptions} />
+      {products.length >= 1 && (
+        <Button
+          className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
+          variant="minimal"
+          href={"/"}>
+          <XIcon className="h-7 w-7" strokeWidth={1.5} />
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default Page;

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/products/new/settings/components/ProductSettings.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+import { getCustomHeadline } from "@/app/(app)/(onboarding)/lib/utils";
+import { createProductAction } from "@/app/(app)/environments/[environmentId]/actions";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { useForm } from "react-hook-form";
+import { toast } from "react-hot-toast";
+import { PREVIEW_SURVEY } from "@formbricks/lib/styling/constants";
+import {
+  TProductConfigChannel,
+  TProductConfigIndustry,
+  TProductUpdateInput,
+  ZProductUpdateInput,
+} from "@formbricks/types/product";
+import { Button } from "@formbricks/ui/Button";
+import { ColorPicker } from "@formbricks/ui/ColorPicker";
+import {
+  FormControl,
+  FormDescription,
+  FormError,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormProvider,
+} from "@formbricks/ui/Form";
+import { Input } from "@formbricks/ui/Input";
+import { SurveyInline } from "@formbricks/ui/Survey";
+
+interface ProductSettingsProps {
+  organizationId: string;
+  channel: TProductConfigChannel;
+  industry: TProductConfigIndustry;
+  defaultBrandColor: string;
+}
+
+export const ProductSettings = ({
+  organizationId,
+  channel,
+  industry,
+  defaultBrandColor,
+}: ProductSettingsProps) => {
+  const router = useRouter();
+
+  const addProduct = async (data: TProductUpdateInput) => {
+    try {
+      const product = await createProductAction(organizationId, {
+        ...data,
+        config: { channel, industry },
+      });
+      // get production environment
+      const productionEnvironment = product.environments.find(
+        (environment) => environment.type === "production"
+      );
+      if (channel !== "link") {
+        router.push(`/environments/${productionEnvironment?.id}/connect`);
+      } else {
+        router.push(`/environments/${productionEnvironment?.id}/surveys`);
+      }
+    } catch (error) {
+      toast.error("Product creation failed");
+      console.error(error);
+    }
+  };
+
+  const form = useForm<TProductUpdateInput>({
+    defaultValues: {
+      name: "",
+      styling: { allowStyleOverwrite: true, brandColor: { light: defaultBrandColor } },
+    },
+    resolver: zodResolver(ZProductUpdateInput),
+  });
+  const logoUrl = form.watch("logo.url");
+  const brandColor = form.watch("styling.brandColor.light") ?? defaultBrandColor;
+  const { isSubmitting } = form.formState;
+
+  return (
+    <div className="mt-6 flex w-5/6 space-x-10 lg:w-2/3 2xl:w-1/2">
+      <div className="flex w-1/2 flex-col space-y-4">
+        <FormProvider {...form}>
+          <form onSubmit={form.handleSubmit(addProduct)} className="w-full space-y-4">
+            <FormField
+              control={form.control}
+              name="styling.brandColor.light"
+              render={({ field, fieldState: { error } }) => (
+                <FormItem className="w-full space-y-4">
+                  <div>
+                    <FormLabel>Brand color</FormLabel>
+                    <FormDescription>Change the brand color of the survey.</FormDescription>
+                  </div>
+                  <FormControl>
+                    <div>
+                      <ColorPicker
+                        color={field.value || defaultBrandColor}
+                        onChange={(color) => field.onChange(color)}
+                      />
+                      {error?.message && <FormError className="text-left">{error.message}</FormError>}
+                    </div>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field, fieldState: { error } }) => (
+                <FormItem className="w-full space-y-4">
+                  <div>
+                    <FormLabel>Product Name</FormLabel>
+                    <FormDescription>
+                      What is your {getCustomHeadline(channel, industry)} called ?
+                    </FormDescription>
+                  </div>
+                  <FormControl>
+                    <div>
+                      <Input
+                        value={field.value}
+                        onChange={(name) => field.onChange(name)}
+                        placeholder="Formbricks Merch Store"
+                        className="bg-white"
+                        autoFocus={true}
+                      />
+                      {error?.message && <FormError className="text-left">{error.message}</FormError>}
+                    </div>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+
+            <div className="flex w-full justify-end">
+              <Button variant="darkCTA" loading={isSubmitting} type="submit">
+                Next
+              </Button>
+            </div>
+          </form>
+        </FormProvider>
+      </div>
+
+      <div className="relative flex h-[30rem] w-1/2 flex-col items-center justify-center space-y-2 rounded-lg border bg-slate-200 shadow">
+        {logoUrl && (
+          <Image
+            src={logoUrl}
+            alt="Logo"
+            width={256}
+            height={56}
+            className="absolute left-2 top-2 -mb-6 h-20 w-auto max-w-64 rounded-lg border object-contain p-1"
+          />
+        )}
+        <p className="text-sm text-slate-400">Preview</p>
+        <div className="h-3/4 w-3/4">
+          <SurveyInline
+            survey={PREVIEW_SURVEY}
+            styling={{ brandColor: { light: brandColor } }}
+            isBrandingEnabled={false}
+            languageCode="default"
+            onFileUpload={async (file) => file.name}
+            autoFocus={false}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/products/new/settings/page.tsx

@@ -0,0 +1,60 @@
+import { getCustomHeadline } from "@/app/(app)/(onboarding)/lib/utils";
+import { ProductSettings } from "@/app/(app)/(onboarding)/organizations/[organizationId]/products/new/settings/components/ProductSettings";
+import { XIcon } from "lucide-react";
+import { notFound } from "next/navigation";
+import { DEFAULT_BRAND_COLOR } from "@formbricks/lib/constants";
+import { getProducts } from "@formbricks/lib/product/service";
+import { startsWithVowel } from "@formbricks/lib/utils/strings";
+import { TProductConfigChannel, TProductConfigIndustry } from "@formbricks/types/product";
+import { Button } from "@formbricks/ui/Button";
+import { Header } from "@formbricks/ui/Header";
+
+interface ProductSettingsPageProps {
+  params: {
+    organizationId: string;
+  };
+  searchParams: {
+    channel?: TProductConfigChannel;
+    industry?: TProductConfigIndustry;
+  };
+}
+
+const Page = async ({ params, searchParams }: ProductSettingsPageProps) => {
+  const channel = searchParams.channel;
+  const industry = searchParams.industry;
+  if (!channel || !industry) return notFound();
+  const customHeadline = getCustomHeadline(channel, industry);
+  const products = await getProducts(params.organizationId);
+
+  return (
+    <div className="flex min-h-full min-w-full flex-col items-center justify-center space-y-12">
+      {channel === "link" ? (
+        <Header
+          title="Match your brand, get 2x more responses."
+          subtitle="When people recognize your brand, they are much more likely to start and complete responses."
+        />
+      ) : (
+        <Header
+          title={`You run ${startsWithVowel(customHeadline) ? "an " + customHeadline : "a " + customHeadline}, how exciting!`}
+          subtitle="Get 2x more responses matching surveys with your brand and UI"
+        />
+      )}
+      <ProductSettings
+        organizationId={params.organizationId}
+        channel={channel}
+        industry={industry}
+        defaultBrandColor={DEFAULT_BRAND_COLOR}
+      />
+      {products.length >= 1 && (
+        <Button
+          className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
+          variant="minimal"
+          href={"/"}>
+          <XIcon className="h-7 w-7" strokeWidth={1.5} />
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default Page;

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/products/new/survey/components/OnboardingSurvey.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import OnboardingSurveyBg from "@/images/onboarding-survey-bg.jpg";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import React, { useEffect, useState } from "react";
+import { TProductConfigChannel } from "@formbricks/types/product";
+
+interface OnboardingSurveyProps {
+  organizationId: string;
+  channel: TProductConfigChannel;
+}
+
+export const OnboardingSurvey = ({ organizationId, channel }: OnboardingSurveyProps) => {
+  const [isIFrameVisible, setIsIFrameVisible] = useState(false);
+  const [fadeout, setFadeout] = useState(false);
+  const router = useRouter();
+
+  const handleMessageEvent = (event: MessageEvent) => {
+    if (event.data === "formbricksSurveyCompleted") {
+      setFadeout(true); // Start fade-out
+      setTimeout(() => {
+        router.push(
+          `/organizations/${organizationId}/products/new/settings?channel=${channel}&industry=other`
+        );
+      }, 800); // Delay the navigation until fade-out completes
+    }
+  };
+
+  useEffect(() => {
+    if (isIFrameVisible) {
+      window.addEventListener("message", handleMessageEvent, false);
+      return () => {
+        window.removeEventListener("message", handleMessageEvent, false);
+      };
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isIFrameVisible]);
+
+  return (
+    <div
+      className={`overflow relative flex h-[100vh] flex-col items-center justify-center ${fadeout ? "opacity-0 transition-opacity duration-1000" : "opacity-100"}`}>
+      <Image src={OnboardingSurveyBg} className="absolute inset-0 h-full w-full" alt="OnboardingSurveyBg" />
+      <div className="relative h-[60vh] w-[50vh] overflow-auto">
+        <iframe
+          onLoad={() => setIsIFrameVisible(true)}
+          src="https://app.formbricks.com/s/clxcwr22p0cwlpvgekzdab2x5?embed=true"
+          className="absolute left-0 top-0 h-full w-full overflow-visible border-0"></iframe>
+      </div>
+    </div>
+  );
+};

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/products/new/survey/page.tsx

@@ -0,0 +1,23 @@
+import { OnboardingSurvey } from "@/app/(app)/(onboarding)/organizations/[organizationId]/products/new/survey/components/OnboardingSurvey";
+import { notFound } from "next/navigation";
+import { TProductConfigChannel, TProductConfigIndustry } from "@formbricks/types/product";
+
+interface OnboardingSurveyPageProps {
+  params: {
+    organizationId: string;
+  };
+  searchParams: {
+    channel?: TProductConfigChannel;
+    industry?: TProductConfigIndustry;
+  };
+}
+
+const Page = async ({ params, searchParams }: OnboardingSurveyPageProps) => {
+  const channel = searchParams.channel;
+  const industry = searchParams.industry;
+  if (!channel || !industry) return notFound();
+
+  return <OnboardingSurvey organizationId={params.organizationId} channel={channel} />;
+};
+
+export default Page;

apps/web/app/(app)/(onboarding)/organizations/actions.ts

@@ -0,0 +1,61 @@
+"use server";
+
+import { getServerSession } from "next-auth";
+import { sendInviteMemberEmail } from "@formbricks/email";
+import { hasOrganizationAuthority } from "@formbricks/lib/auth";
+import { authOptions } from "@formbricks/lib/authOptions";
+import { INVITE_DISABLED } from "@formbricks/lib/constants";
+import { inviteUser } from "@formbricks/lib/invite/service";
+import { verifyUserRoleAccess } from "@formbricks/lib/organization/auth";
+import { AuthenticationError } from "@formbricks/types/errors";
+import { TMembershipRole } from "@formbricks/types/memberships";
+
+export const inviteOrganizationMemberAction = async (
+  organizationId: string,
+  email: string,
+  role: TMembershipRole,
+  inviteMessage: string
+) => {
+  const session = await getServerSession(authOptions);
+
+  if (!session) {
+    throw new AuthenticationError("Not authenticated");
+  }
+
+  const isUserAuthorized = await hasOrganizationAuthority(session.user.id, organizationId);
+
+  if (INVITE_DISABLED) {
+    throw new AuthenticationError("Invite disabled");
+  }
+
+  if (!isUserAuthorized) {
+    throw new AuthenticationError("Not authorized");
+  }
+
+  const { hasCreateOrUpdateMembersAccess } = await verifyUserRoleAccess(organizationId, session.user.id);
+  if (!hasCreateOrUpdateMembersAccess) {
+    throw new AuthenticationError("Not authorized");
+  }
+
+  const invite = await inviteUser({
+    organizationId,
+    invitee: {
+      email,
+      name: "",
+      role,
+    },
+  });
+
+  if (invite) {
+    await sendInviteMemberEmail(
+      invite.id,
+      email,
+      session.user.name ?? "",
+      "",
+      true, // is onboarding invite
+      inviteMessage
+    );
+  }
+
+  return invite;
+};

apps/web/app/(app)/(onboarding)/organizations/components/OnboardingOptionsContainer.tsx

@@ -0,0 +1,41 @@
+import { LucideProps } from "lucide-react";
+import Link from "next/link";
+import { ForwardRefExoticComponent, RefAttributes } from "react";
+import { OptionCard } from "@formbricks/ui/OptionCard";
+
+interface OnboardingOptionsContainerProps {
+  options: {
+    title: string;
+    description: string;
+    icon: ForwardRefExoticComponent<Omit<LucideProps, "ref"> & RefAttributes<SVGSVGElement>>;
+    iconText: string;
+    href: string;
+  }[];
+}
+
+export const OnboardingOptionsContainer = ({ options }: OnboardingOptionsContainerProps) => {
+  return (
+    <div className="grid w-5/6 grid-cols-3 gap-8 text-center lg:w-2/3">
+      {options.map((option, index) => {
+        const Icon = option.icon;
+        return (
+          <Link href={option.href}>
+            <OptionCard
+              size="md"
+              key={index}
+              title={option.title}
+              description={option.description}
+              loading={false}>
+              <div className="flex flex-col items-center">
+                <Icon className="h-16 w-16 text-slate-600" strokeWidth={0.5} />
+                <p className="mt-4 w-fit rounded-xl bg-slate-200 px-4 text-sm text-slate-700">
+                  {option.iconText}
+                </p>
+              </div>
+            </OptionCard>
+          </Link>
+        );
+      })}
+    </div>
+  );
+};

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

@@ -3,7 +3,6 @@ import { PosthogIdentify } from "@/app/(app)/environments/[environmentId]/compon
 import { ResponseFilterProvider } from "@/app/(app)/environments/[environmentId]/components/ResponseFilterContext";
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
-
 import { authOptions } from "@formbricks/lib/authOptions";
 import { hasUserEnvironmentAccess } from "@formbricks/lib/environment/auth";
 import { getEnvironment } from "@formbricks/lib/environment/service";
@@ -41,9 +40,7 @@ const EnvLayout = async ({ children, params }) => {
           environmentId={params.environmentId}
           organizationId={organization.id}
           organizationName={organization.name}
-          inAppSurveyBillingStatus={organization.billing.features.inAppSurvey.status}
-          linkSurveyBillingStatus={organization.billing.features.linkSurvey.status}
-          userTargetingBillingStatus={organization.billing.features.userTargeting.status}
+          organizationBilling={organization.billing}
         />
         <FormbricksClient session={session} />
         <ToasterClient />

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/AddQuestionButton.tsx

@@ -5,7 +5,6 @@ import { createId } from "@paralleldrive/cuid2";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { PlusIcon } from "lucide-react";
 import { useState } from "react";
-
 import { cn } from "@formbricks/lib/cn";
 import { TProduct } from "@formbricks/types/product";
 

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/AddressQuestionForm.tsx

@@ -1,8 +1,6 @@
 "use client";
 
-import { PlusIcon, TrashIcon } from "lucide-react";
-import { useState } from "react";
-
+import { PlusIcon } from "lucide-react";
 import { createI18nString, extractLanguageCodes } from "@formbricks/lib/i18n/utils";
 import { TAttributeClass } from "@formbricks/types/attributeClasses";
 import { TSurvey, TSurveyAddressQuestion } from "@formbricks/types/surveys";
@@ -32,7 +30,6 @@ export const AddressQuestionForm = ({
   setSelectedLanguageCode,
   attributeClasses,
 }: AddressQuestionFormProps): JSX.Element => {
-  const [showSubheader, setShowSubheader] = useState(!!question.subheader);
   const surveyLanguageCodes = extractLanguageCodes(localSurvey.languages ?? []);
 
   return (
@@ -51,7 +48,7 @@ export const AddressQuestionForm = ({
       />
 
       <div>
-        {showSubheader && (
+        {question.subheader !== undefined && (
           <div className="inline-flex w-full items-center">
             <div className="w-full">
               <QuestionFormInput
@@ -67,17 +64,9 @@ export const AddressQuestionForm = ({
                 attributeClasses={attributeClasses}
               />
             </div>
-
-            <TrashIcon
-              className="ml-2 mt-10 h-4 w-4 cursor-pointer text-slate-400 hover:text-slate-500"
-              onClick={() => {
-                setShowSubheader(false);
-                updateQuestion(questionIdx, { subheader: undefined });
-              }}
-            />
           </div>
         )}
-        {!showSubheader && (
+        {question.subheader === undefined && (
           <Button
             size="sm"
             variant="minimal"
@@ -87,7 +76,6 @@ export const AddressQuestionForm = ({
               updateQuestion(questionIdx, {
                 subheader: createI18nString("", surveyLanguageCodes),
               });
-              setShowSubheader(true);
             }}>
             <PlusIcon className="mr-1 h-4 w-4" />
             Add Description

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/AdvancedSettings.tsx

@@ -1,6 +1,5 @@
 import { TAttributeClass } from "@formbricks/types/attributeClasses";
 import { TSurvey, TSurveyQuestion } from "@formbricks/types/surveys";
-
 import { LogicEditor } from "./LogicEditor";
 import { UpdateQuestionId } from "./UpdateQuestionId";
 

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/BackgroundStylingCard.tsx

@@ -3,14 +3,12 @@
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { CheckIcon } from "lucide-react";
 import { UseFormReturn } from "react-hook-form";
-
 import { cn } from "@formbricks/lib/cn";
 import { TProductStyling } from "@formbricks/types/product";
 import { TSurveyStyling } from "@formbricks/types/surveys";
 import { Badge } from "@formbricks/ui/Badge";
 import { FormControl, FormDescription, FormField, FormItem, FormLabel } from "@formbricks/ui/Form";
 import { Slider } from "@formbricks/ui/Slider";
-
 import { SurveyBgSelectorTab } from "./SurveyBgSelectorTab";
 
 interface BackgroundStylingCardProps {

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/CalQuestionForm.tsx

@@ -1,6 +1,4 @@
-import { PlusIcon, TrashIcon } from "lucide-react";
-import { useState } from "react";
-
+import { PlusIcon } from "lucide-react";
 import { createI18nString, extractLanguageCodes } from "@formbricks/lib/i18n/utils";
 import { TAttributeClass } from "@formbricks/types/attributeClasses";
 import { TSurvey, TSurveyCalQuestion } from "@formbricks/types/surveys";
@@ -31,7 +29,6 @@ export const CalQuestionForm = ({
   isInvalid,
   attributeClasses,
 }: CalQuestionFormProps): JSX.Element => {
-  const [showSubheader, setShowSubheader] = useState(!!question.subheader);
   const surveyLanguageCodes = extractLanguageCodes(localSurvey.languages);
 
   return (
@@ -49,7 +46,7 @@ export const CalQuestionForm = ({
         attributeClasses={attributeClasses}
       />
       <div>
-        {showSubheader && (
+        {question.subheader !== undefined && (
           <div className="inline-flex w-full items-center">
             <div className="w-full">
               <QuestionFormInput
@@ -65,17 +62,9 @@ export const CalQuestionForm = ({
                 attributeClasses={attributeClasses}
               />
             </div>
-
-            <TrashIcon
-              className="ml-2 mt-10 h-4 w-4 cursor-pointer text-slate-400 hover:text-slate-500"
-              onClick={() => {
-                setShowSubheader(false);
-                updateQuestion(questionIdx, { subheader: undefined });
-              }}
-            />
           </div>
         )}
-        {!showSubheader && (
+        {question.subheader === undefined && (
           <Button
             size="sm"
             className="mt-3"
@@ -85,7 +74,6 @@ export const CalQuestionForm = ({
               updateQuestion(questionIdx, {
                 subheader: createI18nString("", surveyLanguageCodes),
               });
-              setShowSubheader(true);
             }}>
             {" "}
             <PlusIcon className="mr-1 h-4 w-4" />

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/ColorSurveyBg.tsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-
 import { ColorPicker } from "@formbricks/ui/ColorPicker";
 
 interface ColorSurveyBgProps {

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/DateQuestionForm.tsx

@@ -1,6 +1,4 @@
-import { PlusIcon, TrashIcon } from "lucide-react";
-import { useState } from "react";
-
+import { PlusIcon } from "lucide-react";
 import { createI18nString, extractLanguageCodes } from "@formbricks/lib/i18n/utils";
 import { TAttributeClass } from "@formbricks/types/attributeClasses";
 import { TSurvey, TSurveyDateQuestion } from "@formbricks/types/surveys";
@@ -46,7 +44,6 @@ export const DateQuestionForm = ({
   setSelectedLanguageCode,
   attributeClasses,
 }: IDateQuestionFormProps): JSX.Element => {
-  const [showSubheader, setShowSubheader] = useState(!!question.subheader);
   const surveyLanguageCodes = extractLanguageCodes(localSurvey.languages);
 
   return (
@@ -64,7 +61,7 @@ export const DateQuestionForm = ({
         attributeClasses={attributeClasses}
       />
       <div>
-        {showSubheader && (
+        {question.subheader !== undefined && (
           <div className="mt-2 inline-flex w-full items-center">
             <div className="w-full">
               <QuestionFormInput
@@ -80,18 +77,10 @@ export const DateQuestionForm = ({
                 attributeClasses={attributeClasses}
               />
             </div>
-
-            <TrashIcon
-              className="ml-2 mt-10 h-4 w-4 cursor-pointer text-slate-400 hover:text-slate-500"
-              onClick={() => {
-                setShowSubheader(false);
-                updateQuestion(questionIdx, { subheader: undefined });
-              }}
-            />
           </div>
         )}
 
-        {!showSubheader && (
+        {question.subheader === undefined && (
           <Button
             size="sm"
             className="mt-3"
@@ -101,9 +90,7 @@ export const DateQuestionForm = ({
               updateQuestion(questionIdx, {
                 subheader: createI18nString("", surveyLanguageCodes),
               });
-              setShowSubheader(true);
             }}>
-            {" "}
             <PlusIcon className="mr-1 h-4 w-4" />
             Add Description
           </Button>

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/EditThankYouCard.tsx

@@ -2,7 +2,6 @@
 
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { useState } from "react";
-
 import { cn } from "@formbricks/lib/cn";
 import { getLocalizedValue } from "@formbricks/lib/i18n/utils";
 import { TAttributeClass } from "@formbricks/types/attributeClasses";

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/FileUploadQuestionForm.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { PlusIcon, TrashIcon, XCircleIcon } from "lucide-react";
+import { PlusIcon, XCircleIcon } from "lucide-react";
+import Link from "next/link";
 import { useMemo, useState } from "react";
 import { toast } from "react-hot-toast";
-
 import { extractLanguageCodes } from "@formbricks/lib/i18n/utils";
 import { createI18nString } from "@formbricks/lib/i18n/utils";
 import { useGetBillingInfo } from "@formbricks/lib/organization/hooks/useGetBillingInfo";
@@ -27,6 +27,7 @@ interface FileUploadFormProps {
   setSelectedLanguageCode: (languageCode: string) => void;
   isInvalid: boolean;
   attributeClasses: TAttributeClass[];
+  isFormbricksCloud: boolean;
 }
 
 export const FileUploadQuestionForm = ({
@@ -39,9 +40,10 @@ export const FileUploadQuestionForm = ({
   selectedLanguageCode,
   setSelectedLanguageCode,
   attributeClasses,
+  isFormbricksCloud,
 }: FileUploadFormProps): JSX.Element => {
-  const [showSubheader, setShowSubheader] = useState(!!question.subheader);
   const [extension, setExtension] = useState("");
+  const [isMaxSizeError, setMaxSizeError] = useState(false);
   const {
     billingInfo,
     error: billingInfoError,
@@ -105,7 +107,7 @@ export const FileUploadQuestionForm = ({
       return 10;
     }
 
-    if (billingInfo.features.linkSurvey.status === "active") {
+    if (billingInfo.plan !== "free") {
       // 1GB in MB
       return 1024;
     }
@@ -113,6 +115,12 @@ export const FileUploadQuestionForm = ({
     return 10;
   }, [billingInfo, billingInfoError, billingInfoLoading]);
 
+  const handleMaxSizeInMBToggle = (checked: boolean) => {
+    const defaultMaxSizeInMB = isFormbricksCloud ? maxSizeInMBLimit : 1024;
+
+    updateQuestion(questionIdx, { maxSizeInMB: checked ? defaultMaxSizeInMB : undefined });
+  };
+
   return (
     <form>
       <QuestionFormInput
@@ -128,7 +136,7 @@ export const FileUploadQuestionForm = ({
         attributeClasses={attributeClasses}
       />
       <div>
-        {showSubheader && (
+        {question.subheader !== undefined && (
           <div className="inline-flex w-full items-center">
             <div className="w-full">
               <QuestionFormInput
@@ -144,17 +152,9 @@ export const FileUploadQuestionForm = ({
                 attributeClasses={attributeClasses}
               />
             </div>
-
-            <TrashIcon
-              className="ml-2 mt-10 h-4 w-4 cursor-pointer text-slate-400 hover:text-slate-500"
-              onClick={() => {
-                setShowSubheader(false);
-                updateQuestion(questionIdx, { subheader: undefined });
-              }}
-            />
           </div>
         )}
-        {!showSubheader && (
+        {question.subheader === undefined && (
           <Button
             size="sm"
             className="mt-3"
@@ -164,9 +164,7 @@ export const FileUploadQuestionForm = ({
               updateQuestion(questionIdx, {
                 subheader: createI18nString("", surveyLanguageCodes),
               });
-              setShowSubheader(true);
             }}>
-            {" "}
             <PlusIcon className="mr-1 h-4 w-4" />
             Add Description
           </Button>
@@ -184,7 +182,7 @@ export const FileUploadQuestionForm = ({
 
         <AdvancedOptionToggle
           isChecked={!!question.maxSizeInMB}
-          onToggle={(checked) => updateQuestion(questionIdx, { maxSizeInMB: checked ? 10 : undefined })}
+          onToggle={handleMaxSizeInMBToggle}
           htmlId="maxFileSize"
           title="Max file size"
           description="Limit the maximum file size."
@@ -201,8 +199,9 @@ export const FileUploadQuestionForm = ({
                 onChange={(e) => {
                   const parsedValue = parseInt(e.target.value, 10);
 
-                  if (parsedValue > maxSizeInMBLimit) {
+                  if (isFormbricksCloud && parsedValue > maxSizeInMBLimit) {
                     toast.error(`Max file size limit is ${maxSizeInMBLimit} MB`);
+                    setMaxSizeError(true);
                     updateQuestion(questionIdx, { maxSizeInMB: maxSizeInMBLimit });
                     return;
                   }
@@ -213,6 +212,17 @@ export const FileUploadQuestionForm = ({
               />
               MB
             </p>
+            {isMaxSizeError && (
+              <p className="text-xs text-red-500">
+                Max file size limit is {maxSizeInMBLimit} MB. If you need more, please{" "}
+                <Link
+                  className="underline"
+                  target="_blank"
+                  href={`/environments/${localSurvey.environmentId}/settings/billing`}>
+                  upgrade your plan.
+                </Link>
+              </p>
+            )}
           </label>
         </AdvancedOptionToggle>
 

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/HiddenFieldsCard.tsx

@@ -3,7 +3,6 @@
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
-
 import { cn } from "@formbricks/lib/cn";
 import { TSurvey, TSurveyHiddenFields } from "@formbricks/types/surveys";
 import { Button } from "@formbricks/ui/Button";
@@ -11,7 +10,6 @@ import { Input } from "@formbricks/ui/Input";
 import { Label } from "@formbricks/ui/Label";
 import { Switch } from "@formbricks/ui/Switch";
 import { Tag } from "@formbricks/ui/Tag";
-
 import { validateId } from "../lib/validation";
 
 interface HiddenFieldsCardProps {

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/HowToSendCard.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import * as Collapsible from "@radix-ui/react-collapsible";
-import { AlertCircleIcon, CheckIcon, EarthIcon, LinkIcon, MonitorIcon, SmartphoneIcon } from "lucide-react";
+import { AlertCircleIcon, BlocksIcon, CheckIcon, EarthIcon, LinkIcon, MonitorIcon } from "lucide-react";
 import Link from "next/link";
 import { useEffect, useState } from "react";
-
 import { cn } from "@formbricks/lib/cn";
 import { TEnvironment } from "@formbricks/types/environment";
+import { TProduct } from "@formbricks/types/product";
 import { TSegment } from "@formbricks/types/segment";
 import { TSurvey, TSurveyType } from "@formbricks/types/surveys";
 import { Badge } from "@formbricks/ui/Badge";
@@ -17,17 +17,18 @@ interface HowToSendCardProps {
   localSurvey: TSurvey;
   setLocalSurvey: (survey: TSurvey | ((TSurvey: TSurvey) => TSurvey)) => void;
   environment: TEnvironment;
+  product: TProduct;
 }
 
-export const HowToSendCard = ({ localSurvey, setLocalSurvey, environment }: HowToSendCardProps) => {
+export const HowToSendCard = ({ localSurvey, setLocalSurvey, environment, product }: HowToSendCardProps) => {
   const [open, setOpen] = useState(false);
-  const [widgetSetupCompleted, setWidgetSetupCompleted] = useState(false);
+  const [appSetupCompleted, setAppSetupCompleted] = useState(false);
+  const [websiteSetupCompleted, setWebsiteSetupCompleted] = useState(false);
 
   useEffect(() => {
-    if (environment && environment.widgetSetupCompleted) {
-      setWidgetSetupCompleted(true);
-    } else {
-      setWidgetSetupCompleted(false);
+    if (environment) {
+      setAppSetupCompleted(environment.appSetupCompleted);
+      setWebsiteSetupCompleted(environment.websiteSetupCompleted);
     }
   }, [environment]);
 
@@ -77,7 +78,8 @@ export const HowToSendCard = ({ localSurvey, setLocalSurvey, environment }: HowT
       icon: EarthIcon,
       description: "Run targeted surveys on public websites.",
       comingSoon: false,
-      alert: !widgetSetupCompleted,
+      alert: !websiteSetupCompleted,
+      hide: product.config.channel && product.config.channel !== "website",
     },
     {
       id: "app",
@@ -85,7 +87,8 @@ export const HowToSendCard = ({ localSurvey, setLocalSurvey, environment }: HowT
       icon: MonitorIcon,
       description: "Embed a survey in your web app to collect responses with user identification.",
       comingSoon: false,
-      alert: !widgetSetupCompleted,
+      alert: !appSetupCompleted,
+      hide: product.config.channel && product.config.channel !== "app",
     },
     {
       id: "link",
@@ -94,24 +97,35 @@ export const HowToSendCard = ({ localSurvey, setLocalSurvey, environment }: HowT
       description: "Share a link to a survey page or embed it in a web page or email.",
       comingSoon: false,
       alert: false,
+      hide: false,
     },
     {
-      id: "mobile",
-      name: "Mobile App Survey",
-      icon: SmartphoneIcon,
-      description: "Survey users inside a mobile app (iOS & Android).",
+      id: "headless",
+      name: "Headless Survey",
+      icon: BlocksIcon,
+      description: "Use Formbricks API only and create your own frontend experience.",
       comingSoon: true,
       alert: false,
+      hide: false,
     },
   ];
 
+  const promotedFeaturesString =
+    product.config.channel === "website"
+      ? "app"
+      : product.config.channel === "app"
+        ? "website"
+        : product.config.channel === "link"
+          ? "app or website"
+          : "";
+
   return (
     <Collapsible.Root
       open={open}
       onOpenChange={setOpen}
       className={cn(
         open ? "" : "hover:bg-slate-50",
-        "w-full space-y-2 rounded-lg border border-slate-300 bg-white "
+        "w-full space-y-2 rounded-lg border border-slate-300 bg-white"
       )}>
       <Collapsible.CollapsibleTrigger
         asChild
@@ -126,7 +140,7 @@ export const HowToSendCard = ({ localSurvey, setLocalSurvey, environment }: HowT
           </div>
           <div>
             <p className="font-semibold text-slate-800">Survey Type</p>
-            <p className="mt-1 text-sm text-slate-500">Choose between website, in-app or link survey.</p>
+            <p className="mt-1 text-sm text-slate-500">Choose where to run the survey.</p>
           </div>
         </div>
       </Collapsible.CollapsibleTrigger>
@@ -138,66 +152,79 @@ export const HowToSendCard = ({ localSurvey, setLocalSurvey, environment }: HowT
             value={localSurvey.type}
             onValueChange={setSurveyType}
             className="flex flex-col space-y-3">
-            {options.map((option) => (
-              <Label
-                key={option.id}
-                htmlFor={option.id}
-                className={cn(
-                  "flex w-full  items-center rounded-lg border bg-slate-50 p-4",
-                  option.comingSoon
-                    ? "border-slate-200 bg-slate-50/50"
-                    : option.id === localSurvey.type
-                      ? "border-brand-dark cursor-pointer bg-slate-50"
-                      : "cursor-pointer bg-slate-50"
-                )}
-                id={`howToSendCardOption-${option.id}`}>
-                <RadioGroupItem
-                  value={option.id}
-                  id={option.id}
-                  className="aria-checked:border-brand-dark  mx-5 disabled:border-slate-400 aria-checked:border-2"
-                  disabled={option.comingSoon}
-                />
-                <div className=" inline-flex items-center">
-                  <option.icon className="mr-4 h-8 w-8 text-slate-500" />
-                  <div>
-                    <div className="inline-flex items-center">
-                      <p
-                        className={cn(
-                          "font-semibold",
-                          option.comingSoon ? "text-slate-500" : "text-slate-800"
-                        )}>
-                        {option.name}
-                      </p>
-                      {option.comingSoon && (
-                        <Badge text="coming soon" size="normal" type="success" className="ml-2" />
+            {options
+              .filter((option) => !Boolean(option.hide))
+              .map((option) => (
+                <Label
+                  key={option.id}
+                  htmlFor={option.id}
+                  className={cn(
+                    "flex w-full items-center rounded-lg border bg-slate-50 p-4",
+                    option.comingSoon
+                      ? "border-slate-200 bg-slate-50/50"
+                      : option.id === localSurvey.type
+                        ? "border-brand-dark cursor-pointer bg-slate-50"
+                        : "cursor-pointer bg-slate-50"
+                  )}
+                  id={`howToSendCardOption-${option.id}`}>
+                  <RadioGroupItem
+                    value={option.id}
+                    id={option.id}
+                    className="aria-checked:border-brand-dark mx-5 disabled:border-slate-400 aria-checked:border-2"
+                    disabled={option.comingSoon}
+                  />
+                  <div className="inline-flex items-center">
+                    <option.icon className="mr-4 h-8 w-8 text-slate-500" />
+                    <div>
+                      <div className="inline-flex items-center">
+                        <p
+                          className={cn(
+                            "font-semibold",
+                            option.comingSoon ? "text-slate-500" : "text-slate-800"
+                          )}>
+                          {option.name}
+                        </p>
+                        {option.comingSoon && (
+                          <Badge text="coming soon" size="normal" type="success" className="ml-2" />
+                        )}
+                      </div>
+                      <p className="mt-2 text-xs font-normal text-slate-600">{option.description}</p>
+                      {option.alert && (
+                        <div className="mt-2 flex items-center space-x-3 rounded-lg border border-amber-200 bg-amber-50 px-4 py-2">
+                          <AlertCircleIcon className="h-5 w-5 text-amber-500" />
+                          <div className="text-amber-800">
+                            <p className="text-xs font-semibold">
+                              Your {option.id} is not yet connected to Formbricks.
+                            </p>
+                            <p className="text-xs font-normal">
+                              <Link
+                                href={`/environments/${environment.id}/product/${option.id}-connection`}
+                                className="underline hover:text-amber-900"
+                                target="_blank">
+                                Connect Formbricks
+                              </Link>{" "}
+                              and launch surveys in your {option.id}.
+                            </p>
+                          </div>
+                        </div>
                       )}
                     </div>
-                    <p className="mt-2 text-xs font-normal text-slate-600">{option.description}</p>
-                    {option.alert && (
-                      <div className="mt-2 flex items-center space-x-3 rounded-lg border border-amber-200 bg-amber-50 px-4 py-2">
-                        <AlertCircleIcon className="h-5 w-5 text-amber-500" />
-                        <div className=" text-amber-800">
-                          <p className="text-xs font-semibold">
-                            Your app is not yet connected to Formbricks.
-                          </p>
-                          <p className="text-xs font-normal">
-                            <Link
-                              href={`/environments/${environment.id}/product/setup`}
-                              className="underline hover:text-amber-900"
-                              target="_blank">
-                              Connect Formbricks
-                            </Link>{" "}
-                            and launch surveys in your app or website.
-                          </p>
-                        </div>
-                      </div>
-                    )}
                   </div>
-                </div>
-              </Label>
-            ))}
+                </Label>
+              ))}
           </RadioGroup>
         </div>
+        {promotedFeaturesString && (
+          <div className="mt-2 flex items-center space-x-3 rounded-b-lg border border-slate-200 bg-slate-50/50 px-4 py-2">
+            <AlertCircleIcon className="h-5 w-5 text-slate-500" />
+            <div className="text-slate-500">
+              <p className="text-xs">
+                You can also use Formbricks to run {promotedFeaturesString} surveys. Create a new product for
+                your {promotedFeaturesString} to use this feature.
+              </p>
+            </div>
+          </div>
+        )}
       </Collapsible.CollapsibleContent>
     </Collapsible.Root>
   );

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/MatrixQuestionForm.tsx

@@ -1,16 +1,13 @@
 "use client";
 
 import { PlusIcon, TrashIcon } from "lucide-react";
-import { useState } from "react";
 import { toast } from "react-hot-toast";
-
 import { createI18nString, extractLanguageCodes, getLocalizedValue } from "@formbricks/lib/i18n/utils";
 import { TAttributeClass } from "@formbricks/types/attributeClasses";
 import { TI18nString, TSurvey, TSurveyMatrixQuestion } from "@formbricks/types/surveys";
 import { Button } from "@formbricks/ui/Button";
 import { Label } from "@formbricks/ui/Label";
 import { QuestionFormInput } from "@formbricks/ui/QuestionFormInput";
-
 import { isLabelValidForAllLanguages } from "../lib/validation";
 
 interface MatrixQuestionFormProps {
@@ -35,7 +32,6 @@ export const MatrixQuestionForm = ({
   setSelectedLanguageCode,
   attributeClasses,
 }: MatrixQuestionFormProps): JSX.Element => {
-  const [showSubheader, setShowSubheader] = useState(!!question.subheader);
   const languageCodes = extractLanguageCodes(localSurvey.languages);
   // Function to add a new Label input field
   const handleAddLabel = (type: "row" | "column") => {
@@ -117,7 +113,7 @@ export const MatrixQuestionForm = ({
         attributeClasses={attributeClasses}
       />
       <div>
-        {showSubheader && (
+        {question.subheader !== undefined && (
           <div className="inline-flex w-full items-center">
             <div className="w-full">
               <QuestionFormInput
@@ -133,23 +129,19 @@ export const MatrixQuestionForm = ({
                 attributeClasses={attributeClasses}
               />
             </div>
-
-            <TrashIcon
-              className="ml-2 mt-10 h-4 w-4 cursor-pointer text-slate-400 hover:text-slate-500"
-              onClick={() => {
-                setShowSubheader(false);
-                updateQuestion(questionIdx, { subheader: undefined });
-              }}
-            />
           </div>
         )}
-        {!showSubheader && (
+        {question.subheader === undefined && (
           <Button
             size="sm"
             variant="minimal"
             className="mt-3"
             type="button"
-            onClick={() => setShowSubheader(true)}>
+            onClick={() => {
+              updateQuestion(questionIdx, {
+                subheader: createI18nString("", languageCodes),
+              });
+            }}>
             <PlusIcon className="mr-1 h-4 w-4" />
             Add Description
           </Button>

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/MultipleChoiceQuestionForm.tsx

@@ -3,7 +3,7 @@
 import { DndContext } from "@dnd-kit/core";
 import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { createId } from "@paralleldrive/cuid2";
-import { PlusIcon, TrashIcon } from "lucide-react";
+import { PlusIcon } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { createI18nString, extractLanguageCodes } from "@formbricks/lib/i18n/utils";
 import { getLocalizedValue } from "@formbricks/lib/i18n/utils";
@@ -45,7 +45,6 @@ export const MultipleChoiceQuestionForm = ({
 }: OpenQuestionFormProps): JSX.Element => {
   const lastChoiceRef = useRef<HTMLInputElement>(null);
   const [isNew, setIsNew] = useState(true);
-  const [showSubheader, setShowSubheader] = useState(!!question.subheader);
   const [isInvalidValue, setisInvalidValue] = useState<string | null>(null);
 
   const questionRef = useRef<HTMLInputElement>(null);
@@ -196,7 +195,7 @@ export const MultipleChoiceQuestionForm = ({
       />
 
       <div>
-        {showSubheader && (
+        {question.subheader !== undefined && (
           <div className="inline-flex w-full items-center">
             <div className="w-full">
               <QuestionFormInput
@@ -212,17 +211,9 @@ export const MultipleChoiceQuestionForm = ({
                 attributeClasses={attributeClasses}
               />
             </div>
-
-            <TrashIcon
-              className="ml-2 mt-10 h-4 w-4 cursor-pointer text-slate-400 hover:text-slate-500"
-              onClick={() => {
-                setShowSubheader(false);
-                updateQuestion(questionIdx, { subheader: undefined });
-              }}
-            />
           </div>
         )}
-        {!showSubheader && (
+        {question.subheader === undefined && (
           <Button
             size="sm"
             variant="minimal"
@@ -232,9 +223,7 @@ export const MultipleChoiceQuestionForm = ({
               updateQuestion(questionIdx, {
                 subheader: createI18nString("", surveyLanguageCodes),
               });
-              setShowSubheader(true);
             }}>
-            {" "}
             <PlusIcon className="mr-1 h-4 w-4" />
             Add Description
           </Button>

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/NPSQuestionForm.tsx

@@ -1,8 +1,6 @@
 "use client";
 
-import { PlusIcon, TrashIcon } from "lucide-react";
-import { useState } from "react";
-
+import { PlusIcon } from "lucide-react";
 import { createI18nString, extractLanguageCodes } from "@formbricks/lib/i18n/utils";
 import { TAttributeClass } from "@formbricks/types/attributeClasses";
 import { TSurvey, TSurveyNPSQuestion } from "@formbricks/types/surveys";
@@ -32,7 +30,6 @@ export const NPSQuestionForm = ({
   setSelectedLanguageCode,
   attributeClasses,
 }: NPSQuestionFormProps): JSX.Element => {
-  const [showSubheader, setShowSubheader] = useState(!!question.subheader);
   const surveyLanguageCodes = extractLanguageCodes(localSurvey.languages);
   return (
     <form>
@@ -50,7 +47,7 @@ export const NPSQuestionForm = ({
       />
 
       <div>
-        {showSubheader && (
+        {question.subheader !== undefined && (
           <div className="mt-2 inline-flex w-full items-center">
             <div className="w-full">
               <QuestionFormInput
@@ -66,17 +63,9 @@ export const NPSQuestionForm = ({
                 attributeClasses={attributeClasses}
               />
             </div>
-
-            <TrashIcon
-              className="ml-2 mt-10 h-4 w-4 cursor-pointer text-slate-400 hover:text-slate-500"
-              onClick={() => {
-                setShowSubheader(false);
-                updateQuestion(questionIdx, { subheader: undefined });
-              }}
-            />
           </div>
         )}
-        {!showSubheader && (
+        {question.subheader === undefined && (
           <Button
             size="sm"
             variant="minimal"
@@ -86,7 +75,6 @@ export const NPSQuestionForm = ({
               updateQuestion(questionIdx, {
                 subheader: createI18nString("", surveyLanguageCodes),
               });
-              setShowSubheader(true);
             }}>
             {" "}
             <PlusIcon className="mr-1 h-4 w-4" />

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/OpenQuestionForm.tsx

@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  HashIcon,
-  LinkIcon,
-  MailIcon,
-  MessageSquareTextIcon,
-  PhoneIcon,
-  PlusIcon,
-  TrashIcon,
-} from "lucide-react";
-import { useState } from "react";
-
+import { HashIcon, LinkIcon, MailIcon, MessageSquareTextIcon, PhoneIcon, PlusIcon } from "lucide-react";
 import { createI18nString, extractLanguageCodes } from "@formbricks/lib/i18n/utils";
 import { TAttributeClass } from "@formbricks/types/attributeClasses";
 import {
@@ -53,7 +43,6 @@ export const OpenQuestionForm = ({
   setSelectedLanguageCode,
   attributeClasses,
 }: OpenQuestionFormProps): JSX.Element => {
-  const [showSubheader, setShowSubheader] = useState(!!question.subheader);
   const defaultPlaceholder = getPlaceholderByInputType(question.inputType ?? "text");
   const surveyLanguageCodes = extractLanguageCodes(localSurvey.languages ?? []);
   const handleInputChange = (inputType: TSurveyOpenTextQuestionInputType) => {
@@ -81,7 +70,7 @@ export const OpenQuestionForm = ({
       />
 
       <div>
-        {showSubheader && (
+        {question.subheader !== undefined && (
           <div className="inline-flex w-full items-center">
             <div className="w-full">
               <QuestionFormInput
@@ -97,17 +86,9 @@ export const OpenQuestionForm = ({
                 label={"Description"}
               />
             </div>
-
-            <TrashIcon
-              className="ml-2 mt-10 h-4 w-4 cursor-pointer text-slate-400 hover:text-slate-500"
-              onClick={() => {
-                setShowSubheader(false);
-                updateQuestion(questionIdx, { subheader: undefined });
-              }}
-            />
           </div>
         )}
-        {!showSubheader && (
+        {question.subheader === undefined && (
           <Button
             size="sm"
             variant="minimal"
@@ -117,7 +98,6 @@ export const OpenQuestionForm = ({
               updateQuestion(questionIdx, {
                 subheader: createI18nString("", surveyLanguageCodes),
               });
-              setShowSubheader(true);
             }}>
             <PlusIcon className="mr-1 h-4 w-4" />
             Add Description

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/PictureSelectionForm.tsx

@@ -1,7 +1,5 @@
 import { createId } from "@paralleldrive/cuid2";
-import { PlusIcon, TrashIcon } from "lucide-react";
-import { useState } from "react";
-
+import { PlusIcon } from "lucide-react";
 import { cn } from "@formbricks/lib/cn";
 import { createI18nString, extractLanguageCodes } from "@formbricks/lib/i18n/utils";
 import { TAttributeClass } from "@formbricks/types/attributeClasses";
@@ -34,7 +32,6 @@ export const PictureSelectionForm = ({
   isInvalid,
   attributeClasses,
 }: PictureSelectionFormProps): JSX.Element => {
-  const [showSubheader, setShowSubheader] = useState(!!question.subheader);
   const environmentId = localSurvey.environmentId;
   const surveyLanguageCodes = extractLanguageCodes(localSurvey.languages);
 
@@ -53,7 +50,7 @@ export const PictureSelectionForm = ({
         attributeClasses={attributeClasses}
       />
       <div>
-        {showSubheader && (
+        {question.subheader !== undefined && (
           <div className="mt-2 inline-flex w-full items-center">
             <div className="w-full">
               <QuestionFormInput
@@ -69,17 +66,9 @@ export const PictureSelectionForm = ({
                 attributeClasses={attributeClasses}
               />
             </div>
-
-            <TrashIcon
-              className="ml-2 mt-10 h-4 w-4 cursor-pointer text-slate-400 hover:text-slate-500"
-              onClick={() => {
-                setShowSubheader(false);
-                updateQuestion(questionIdx, { subheader: undefined });
-              }}
-            />
           </div>
         )}
-        {!showSubheader && (
+        {question.subheader === undefined && (
           <Button
             size="sm"
             variant="minimal"
@@ -89,9 +78,7 @@ export const PictureSelectionForm = ({
               updateQuestion(questionIdx, {
                 subheader: createI18nString("", surveyLanguageCodes),
               });
-              setShowSubheader(true);
             }}>
-            {" "}
             <PlusIcon className="mr-1 h-4 w-4" />
             Add Description
           </Button>

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionCard.tsx

@@ -46,6 +46,7 @@ interface QuestionCardProps {
   isInvalid: boolean;
   attributeClasses: TAttributeClass[];
   addQuestion: (question: any, index?: number) => void;
+  isFormbricksCloud: boolean;
 }
 
 export const QuestionCard = ({
@@ -65,6 +66,7 @@ export const QuestionCard = ({
   isInvalid,
   attributeClasses,
   addQuestion,
+  isFormbricksCloud,
 }: QuestionCardProps) => {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: question.id,
@@ -166,13 +168,13 @@ export const QuestionCard = ({
         className="flex-1 rounded-r-lg border border-slate-200">
         <Collapsible.CollapsibleTrigger
           asChild
-          className={cn(open ? "" : "  ", "flex cursor-pointer justify-between p-4 hover:bg-slate-50")}>
+          className={cn(open ? "" : "  ", "flex cursor-pointer justify-between gap-4 p-4 hover:bg-slate-50")}>
           <div>
-            <div className="inline-flex">
+            <div className="flex grow">
               <div className="-ml-0.5 mr-3 h-6 min-w-[1.5rem] text-slate-400">
                 {QUESTIONS_ICON_MAP[question.type]}
               </div>
-              <div>
+              <div className="grow" dir="auto">
                 <p className="text-sm font-semibold">
                   {recallToHeadline(
                     question.headline,
@@ -333,6 +335,7 @@ export const QuestionCard = ({
               setSelectedLanguageCode={setSelectedLanguageCode}
               isInvalid={isInvalid}
               attributeClasses={attributeClasses}
+              isFormbricksCloud={isFormbricksCloud}
             />
           ) : question.type === TSurveyQuestionTypeEnum.Cal ? (
             <CalQuestionForm

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionMenu.tsx

@@ -17,7 +17,7 @@ import {
   DropdownMenuTrigger,
 } from "@formbricks/ui/DropdownMenu";
 
-interface QuestionDropdownProps {
+interface QuestionMenuProps {
   questionIdx: number;
   lastQuestion: boolean;
   duplicateQuestion: (questionIdx: number) => void;
@@ -39,7 +39,7 @@ export const QuestionMenu = ({
   question,
   updateQuestion,
   addQuestion,
-}: QuestionDropdownProps) => {
+}: QuestionMenuProps) => {
   const [logicWarningModal, setLogicWarningModal] = useState(false);
   const [changeToType, setChangeToType] = useState(question.type);
 

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionsDroppable.tsx

@@ -1,9 +1,7 @@
 import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
-
 import { TAttributeClass } from "@formbricks/types/attributeClasses";
 import { TProduct } from "@formbricks/types/product";
 import { TSurvey } from "@formbricks/types/surveys";
-
 import { QuestionCard } from "./QuestionCard";
 
 interface QuestionsDraggableProps {
@@ -21,6 +19,7 @@ interface QuestionsDraggableProps {
   internalQuestionIdMap: Record<string, string>;
   attributeClasses: TAttributeClass[];
   addQuestion: (question: any, index?: number) => void;
+  isFormbricksCloud: boolean;
 }
 
 export const QuestionsDroppable = ({
@@ -38,6 +37,7 @@ export const QuestionsDroppable = ({
   internalQuestionIdMap,
   attributeClasses,
   addQuestion,
+  isFormbricksCloud,
 }: QuestionsDraggableProps) => {
   return (
     <div className="group mb-5 grid w-full gap-5">
@@ -61,6 +61,7 @@ export const QuestionsDroppable = ({
             isInvalid={invalidQuestions ? invalidQuestions.includes(question.id) : false}
             attributeClasses={attributeClasses}
             addQuestion={addQuestion}
+            isFormbricksCloud={isFormbricksCloud}
           />
         ))}
       </SortableContext>

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionsStylingSettingsTabs.tsx

@@ -1,6 +1,5 @@
 import { PaintbrushIcon, Rows3Icon, SettingsIcon } from "lucide-react";
 import { useMemo } from "react";
-
 import { cn } from "@formbricks/lib/cn";
 import { TSurveyEditorTabs } from "@formbricks/types/surveys";
 
@@ -47,7 +46,7 @@ export const QuestionsAudienceTabs = ({
   }, [isStylingTabVisible]);
 
   return (
-    <div className="fixed z-20 flex h-14 w-full items-center justify-center border bg-white md:w-1/2">
+    <div className="fixed z-30 flex h-14 w-full items-center justify-center border bg-white md:w-1/2">
       <nav className="flex h-full items-center space-x-4" aria-label="Tabs">
         {tabsComputed.map((tab) => (
           <button

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionsView.tsx

@@ -365,6 +365,7 @@ export const QuestionsView = ({
           internalQuestionIdMap={internalQuestionIdMap}
           attributeClasses={attributeClasses}
           addQuestion={addQuestion}
+          isFormbricksCloud={isFormbricksCloud}
         />
       </DndContext>
 

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/RatingQuestionForm.tsx

@@ -1,13 +1,10 @@
-import { HashIcon, PlusIcon, SmileIcon, StarIcon, TrashIcon } from "lucide-react";
-import { useState } from "react";
-
+import { HashIcon, PlusIcon, SmileIcon, StarIcon } from "lucide-react";
 import { createI18nString, extractLanguageCodes } from "@formbricks/lib/i18n/utils";
 import { TAttributeClass } from "@formbricks/types/attributeClasses";
 import { TSurvey, TSurveyRatingQuestion } from "@formbricks/types/surveys";
 import { Button } from "@formbricks/ui/Button";
 import { Label } from "@formbricks/ui/Label";
 import { QuestionFormInput } from "@formbricks/ui/QuestionFormInput";
-
 import { Dropdown } from "./RatingTypeDropdown";
 
 interface RatingQuestionFormProps {
@@ -32,7 +29,6 @@ export const RatingQuestionForm = ({
   setSelectedLanguageCode,
   attributeClasses,
 }: RatingQuestionFormProps) => {
-  const [showSubheader, setShowSubheader] = useState(!!question.subheader);
   const surveyLanguageCodes = extractLanguageCodes(localSurvey.languages);
 
   return (
@@ -51,7 +47,7 @@ export const RatingQuestionForm = ({
       />
 
       <div>
-        {showSubheader && (
+        {question.subheader !== undefined && (
           <div className="mt-2 inline-flex w-full items-center">
             <div className="w-full">
               <QuestionFormInput
@@ -67,17 +63,9 @@ export const RatingQuestionForm = ({
                 attributeClasses={attributeClasses}
               />
             </div>
-
-            <TrashIcon
-              className="ml-2 mt-10 h-4 w-4 cursor-pointer text-slate-400 hover:text-slate-500"
-              onClick={() => {
-                setShowSubheader(false);
-                updateQuestion(questionIdx, { subheader: undefined });
-              }}
-            />
           </div>
         )}
-        {!showSubheader && (
+        {question.subheader === undefined && (
           <Button
             size="sm"
             variant="minimal"
@@ -87,9 +75,7 @@ export const RatingQuestionForm = ({
               updateQuestion(questionIdx, {
                 subheader: createI18nString("", surveyLanguageCodes),
               });
-              setShowSubheader(true);
             }}>
-            {" "}
             <PlusIcon className="mr-1 h-4 w-4" />
             Add Description
           </Button>

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/RecontactOptionsCard.tsx

@@ -4,7 +4,6 @@ import * as Collapsible from "@radix-ui/react-collapsible";
 import { CheckIcon } from "lucide-react";
 import Link from "next/link";
 import { useEffect, useState } from "react";
-
 import { TSurvey } from "@formbricks/types/surveys";
 import { AdvancedOptionToggle } from "@formbricks/ui/AdvancedOptionToggle";
 import { Input } from "@formbricks/ui/Input";
@@ -105,7 +104,8 @@ export const RecontactOptionsCard = ({
       className="w-full rounded-lg border border-slate-300 bg-white">
       <Collapsible.CollapsibleTrigger
         asChild
-        className="h-full w-full cursor-pointer rounded-lg hover:bg-slate-50">
+        className="h-full w-full cursor-pointer rounded-lg hover:bg-slate-50"
+        id="recontactOptionsCardTrigger">
         <div className="inline-flex px-4 py-4">
           <div className="flex items-center pl-2 pr-5">
             <CheckIcon
@@ -147,7 +147,7 @@ export const RecontactOptionsCard = ({
                   <RadioGroupItem
                     value={option.id}
                     id={option.name}
-                    className="aria-checked:border-brand-dark  mx-5 disabled:border-slate-400 aria-checked:border-2"
+                    className="aria-checked:border-brand-dark mx-5 disabled:border-slate-400 aria-checked:border-2"
                   />
                   <div>
                     <p className="font-semibold text-slate-700">{option.name}</p>

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/ResponseOptionsCard.tsx

@@ -5,7 +5,6 @@ import { ArrowUpRight, CheckIcon } from "lucide-react";
 import Link from "next/link";
 import { KeyboardEventHandler, useEffect, useState } from "react";
 import toast from "react-hot-toast";
-
 import { cn } from "@formbricks/lib/cn";
 import { TSurvey } from "@formbricks/types/surveys";
 import { AdvancedOptionToggle } from "@formbricks/ui/AdvancedOptionToggle";

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/SavedActionsTab.tsx

@@ -1,6 +1,5 @@
 import { Code2Icon, MousePointerClickIcon, SparklesIcon } from "lucide-react";
 import { useState } from "react";
-
 import { TActionClass } from "@formbricks/types/actionClasses";
 import { TSurvey } from "@formbricks/types/surveys";
 import { Input } from "@formbricks/ui/Input";

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/SelectQuestionChoice.tsx

@@ -2,7 +2,6 @@ import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { GripVerticalIcon, PlusIcon, TrashIcon } from "lucide-react";
 import toast from "react-hot-toast";
-
 import { cn } from "@formbricks/lib/cn";
 import { createI18nString } from "@formbricks/lib/i18n/utils";
 import { TAttributeClass } from "@formbricks/types/attributeClasses";
@@ -13,7 +12,6 @@ import {
   TSurveyMultipleChoiceQuestion,
 } from "@formbricks/types/surveys";
 import { QuestionFormInput } from "@formbricks/ui/QuestionFormInput";
-
 import { isLabelValidForAllLanguages } from "../lib/validation";
 
 interface ChoiceProps {
@@ -70,13 +68,10 @@ export const SelectQuestionChoice = ({
   };
 
   return (
-    <div className="flex w-full items-center gap-2" ref={setNodeRef} style={style}>
+    <div className="flex w-full gap-2" ref={setNodeRef} style={style}>
       {/* drag handle */}
-      <div
-        className={cn("flex items-center", choice.id === "other" && "invisible")}
-        {...listeners}
-        {...attributes}>
-        <GripVerticalIcon className="mt-3 h-4 w-4 cursor-move text-slate-400" />
+      <div className={cn("mt-6", choice.id === "other" && "invisible")} {...listeners} {...attributes}>
+        <GripVerticalIcon className="h-4 w-4 cursor-move text-slate-400" />
       </div>
 
       <div className="flex w-full space-x-2">
@@ -129,8 +124,7 @@ export const SelectQuestionChoice = ({
           />
         )}
       </div>
-
-      <div className="mt-3 flex items-center gap-2">
+      <div className="mt-6 flex gap-2">
         {question.choices && question.choices.length > 2 && (
           <TrashIcon
             className="h-4 w-4 cursor-pointer text-slate-400 hover:text-slate-500"

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/SettingsView.tsx

@@ -3,6 +3,7 @@ import { TActionClass } from "@formbricks/types/actionClasses";
 import { TAttributeClass } from "@formbricks/types/attributeClasses";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TMembershipRole } from "@formbricks/types/memberships";
+import { TProduct } from "@formbricks/types/product";
 import { TSegment } from "@formbricks/types/segment";
 import { TSurvey } from "@formbricks/types/surveys";
 import { HowToSendCard } from "./HowToSendCard";
@@ -23,6 +24,7 @@ interface SettingsViewProps {
   membershipRole?: TMembershipRole;
   isUserTargetingAllowed?: boolean;
   isFormbricksCloud: boolean;
+  product: TProduct;
 }
 
 export const SettingsView = ({
@@ -36,12 +38,18 @@ export const SettingsView = ({
   membershipRole,
   isUserTargetingAllowed = false,
   isFormbricksCloud,
+  product,
 }: SettingsViewProps) => {
   const isWebSurvey = localSurvey.type === "website" || localSurvey.type === "app";
 
   return (
     <div className="mt-12 space-y-3 p-5">
-      <HowToSendCard localSurvey={localSurvey} setLocalSurvey={setLocalSurvey} environment={environment} />
+      <HowToSendCard
+        localSurvey={localSurvey}
+        setLocalSurvey={setLocalSurvey}
+        environment={environment}
+        product={product}
+      />
 
       {localSurvey.type === "app" ? (
         !isUserTargetingAllowed ? (

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/StylingView.tsx

@@ -3,7 +3,6 @@ import Link from "next/link";
 import React, { useEffect, useMemo, useState } from "react";
 import { UseFormReturn, useForm, useWatch } from "react-hook-form";
 import toast from "react-hot-toast";
-
 import { COLOR_DEFAULTS } from "@formbricks/lib/styling/constants";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TProduct, TProductStyling } from "@formbricks/types/product";
@@ -20,7 +19,6 @@ import {
   FormProvider,
 } from "@formbricks/ui/Form";
 import { Switch } from "@formbricks/ui/Switch";
-
 import { BackgroundStylingCard } from "./BackgroundStylingCard";
 import { CardStylingSettings } from "./CardStylingSettings";
 import { FormStylingSettings } from "./FormStylingSettings";

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyBgSelectorTab.tsx

@@ -1,7 +1,5 @@
 import { useEffect, useState } from "react";
-
 import { TabBar } from "@formbricks/ui/TabBar";
-
 import { AnimatedSurveyBg } from "./AnimatedSurveyBg";
 import { ColorSurveyBg } from "./ColorSurveyBg";
 import { UploadImageSurveyBg } from "./ImageSurveyBg";

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyEditor.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useCallback, useEffect, useRef, useState } from "react";
-
 import { extractLanguageCodes, getEnabledLanguages } from "@formbricks/lib/i18n/utils";
 import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone";
 import { useDocumentVisibility } from "@formbricks/lib/useDocumentVisibility";
@@ -13,7 +12,6 @@ import { TProduct } from "@formbricks/types/product";
 import { TSegment } from "@formbricks/types/segment";
 import { TSurvey, TSurveyEditorTabs, TSurveyStyling } from "@formbricks/types/surveys";
 import { PreviewSurvey } from "@formbricks/ui/PreviewSurvey";
-
 import { refetchProductAction } from "../actions";
 import { LoadingSkeleton } from "./LoadingSkeleton";
 import { QuestionsAudienceTabs } from "./QuestionsStylingSettingsTabs";
@@ -194,6 +192,7 @@ export const SurveyEditor = ({
                 membershipRole={membershipRole}
                 isUserTargetingAllowed={isUserTargetingAllowed}
                 isFormbricksCloud={isFormbricksCloud}
+                product={localProduct}
               />
             )}
           </main>

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyPlacementCard.tsx

@@ -4,12 +4,10 @@ import * as Collapsible from "@radix-ui/react-collapsible";
 import { CheckIcon } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
-
 import { TPlacement } from "@formbricks/types/common";
 import { TSurvey, TSurveyProductOverwrites } from "@formbricks/types/surveys";
 import { Label } from "@formbricks/ui/Label";
 import { Switch } from "@formbricks/ui/Switch";
-
 import { Placement } from "./Placement";
 
 interface SurveyPlacementCardProps {

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/TargetingCard.tsx

@@ -6,7 +6,6 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
 import { toast } from "react-hot-toast";
-
 import { cn } from "@formbricks/lib/cn";
 import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone";
 import { isAdvancedSegment } from "@formbricks/lib/segment/utils";
@@ -22,7 +21,6 @@ import { SaveAsNewSegmentModal } from "@formbricks/ui/SaveAsNewSegmentModal";
 import { SegmentTitle } from "@formbricks/ui/SegmentTitle";
 import { TargetingIndicator } from "@formbricks/ui/TargetingIndicator";
 import { UpgradePlanNotice } from "@formbricks/ui/UpgradePlanNotice";
-
 import {
   cloneBasicSegmentAction,
   createBasicSegmentAction,

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/UnsplashImages.tsx

@@ -5,12 +5,10 @@ import { SearchIcon } from "lucide-react";
 import UnsplashImage from "next/image";
 import { useEffect, useRef, useState } from "react";
 import toast from "react-hot-toast";
-
 import { TSurveyBackgroundBgType } from "@formbricks/types/surveys";
 import { Button } from "@formbricks/ui/Button";
 import { Input } from "@formbricks/ui/Input";
 import { LoadingSpinner } from "@formbricks/ui/LoadingSpinner";
-
 import { getImagesFromUnsplashAction, triggerDownloadUnsplashImageAction } from "../actions";
 
 interface ImageFromUnsplashSurveyBgProps {

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/UpdateQuestionId.tsx

@@ -2,12 +2,10 @@
 
 import { useState } from "react";
 import toast from "react-hot-toast";
-
 import { TSurvey, TSurveyQuestion } from "@formbricks/types/surveys";
 import { Button } from "@formbricks/ui/Button";
 import { Input } from "@formbricks/ui/Input";
 import { Label } from "@formbricks/ui/Label";
-
 import { validateId } from "../lib/validation";
 
 interface UpdateQuestionIdProps {
@@ -63,6 +61,7 @@ export const UpdateQuestionId = ({
           onChange={(e) => {
             setCurrentValue(e.target.value);
           }}
+          dir="auto"
           disabled={localSurvey.status !== "draft" && !question.isDraft}
           className={`h-10 ${isInputInvalid ? "border-red-300 focus:border-red-300" : ""}`}
         />

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/WhenToSendCard.tsx

@@ -10,7 +10,6 @@ import {
   Trash2Icon,
 } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
-
 import { getAccessFlags } from "@formbricks/lib/membership/utils";
 import { TActionClass } from "@formbricks/types/actionClasses";
 import { TMembershipRole } from "@formbricks/types/memberships";
@@ -18,7 +17,6 @@ import { TSurvey } from "@formbricks/types/surveys";
 import { AdvancedOptionToggle } from "@formbricks/ui/AdvancedOptionToggle";
 import { Button } from "@formbricks/ui/Button";
 import { Input } from "@formbricks/ui/Input";
-
 import { AddActionModal } from "./AddActionModal";
 
 interface WhenToSendCardProps {

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/page.tsx

@@ -1,5 +1,4 @@
 import { getServerSession } from "next-auth";
-
 import { getAdvancedTargetingPermission, getMultiLanguagePermission } from "@formbricks/ee/lib/service";
 import { getActionClasses } from "@formbricks/lib/actionClass/service";
 import { getAttributeClasses } from "@formbricks/lib/attributeClass/service";
@@ -14,7 +13,6 @@ import { getResponseCountBySurveyId } from "@formbricks/lib/response/service";
 import { getSegments } from "@formbricks/lib/segment/service";
 import { getSurvey } from "@formbricks/lib/survey/service";
 import { ErrorComponent } from "@formbricks/ui/ErrorComponent";
-
 import { SurveyEditor } from "./components/SurveyEditor";
 
 export const generateMetadata = async ({ params }) => {

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/lib/minimalSurvey.ts

@@ -43,4 +43,5 @@ export const minimalSurvey: TSurvey = {
   resultShareKey: null,
   segment: null,
   languages: [],
+  showLanguageSwitch: false,
 };

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/templates/actions.ts

@@ -1,19 +0,0 @@
-"use server";
-
-import { getServerSession } from "next-auth";
-
-import { authOptions } from "@formbricks/lib/authOptions";
-import { hasUserEnvironmentAccess } from "@formbricks/lib/environment/auth";
-import { createSurvey } from "@formbricks/lib/survey/service";
-import { AuthorizationError } from "@formbricks/types/errors";
-import { TSurveyInput } from "@formbricks/types/surveys";
-
-export const createSurveyAction = async (environmentId: string, surveyBody: TSurveyInput) => {
-  const session = await getServerSession(authOptions);
-  if (!session) throw new AuthorizationError("Not authorized");
-
-  const isAuthorized = await hasUserEnvironmentAccess(session.user.id, environmentId);
-  if (!isAuthorized) throw new AuthorizationError("Not authorized");
-
-  return await createSurvey(environmentId, surveyBody);
-};

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/templates/components/BackButton.tsx

@@ -2,7 +2,6 @@
 
 import { ArrowLeftIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
-
 import { Button } from "@formbricks/ui/Button";
 
 export const BackButton = () => {

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/templates/components/TemplateContainer.tsx

@@ -2,16 +2,14 @@
 
 import { MenuBar } from "@/app/(app)/(survey-editor)/environments/[environmentId]/surveys/templates/components/MenuBar";
 import { useState } from "react";
-
 import { customSurvey } from "@formbricks/lib/templates";
 import type { TEnvironment } from "@formbricks/types/environment";
-import type { TProduct } from "@formbricks/types/product";
-import type { TTemplate } from "@formbricks/types/templates";
+import type { TProduct, TProductConfigChannel, TProductConfigIndustry } from "@formbricks/types/product";
+import type { TTemplate, TTemplateRole } from "@formbricks/types/templates";
 import { TUser } from "@formbricks/types/user";
 import { PreviewSurvey } from "@formbricks/ui/PreviewSurvey";
 import { SearchBox } from "@formbricks/ui/SearchBox";
 import { TemplateList } from "@formbricks/ui/TemplateList";
-
 import { minimalSurvey } from "../../lib/minimalSurvey";
 
 type TemplateContainerWithPreviewProps = {
@@ -19,13 +17,14 @@ type TemplateContainerWithPreviewProps = {
   product: TProduct;
   environment: TEnvironment;
   user: TUser;
+  prefilledFilters: (TProductConfigChannel | TProductConfigIndustry | TTemplateRole | null)[];
 };
 
 export const TemplateContainerWithPreview = ({
-  environmentId,
   product,
   environment,
   user,
+  prefilledFilters,
 }: TemplateContainerWithPreviewProps) => {
   const initialTemplate = customSurvey;
   const [activeTemplate, setActiveTemplate] = useState<TTemplate>(initialTemplate);
@@ -37,7 +36,7 @@ export const TemplateContainerWithPreview = ({
       <MenuBar />
       <div className="relative z-0 flex flex-1 overflow-hidden">
         <div className="flex-1 flex-col overflow-auto bg-slate-50">
-          <div className="ml-6 mt-6 flex flex-col items-center justify-between md:flex-row md:items-start">
+          <div className="mb-3 ml-6 mt-6 flex flex-col items-center justify-between md:flex-row md:items-end">
             <h1 className="text-2xl font-bold text-slate-800">Create a new survey</h1>
             <div className="px-6">
               <SearchBox
@@ -53,7 +52,6 @@ export const TemplateContainerWithPreview = ({
           </div>
 
           <TemplateList
-            environmentId={environmentId}
             environment={environment}
             product={product}
             user={user}
@@ -62,6 +60,7 @@ export const TemplateContainerWithPreview = ({
               setActiveQuestionId(template.preset.questions[0].id);
               setActiveTemplate(template);
             }}
+            prefilledFilters={prefilledFilters}
           />
         </div>
         <aside className="group hidden flex-1 flex-shrink-0 items-center justify-center overflow-hidden border-l border-slate-100 bg-slate-50 md:flex md:flex-col">