Update lockfile

feat: make branding hideable in the new booker (#9033 )
* feat: make branding hideable * fix: typo
2023-05-23 00:26:22 +02:00 · 2023-05-22 21:54:43 +00:00 · 2023-05-22 21:53:37 +00:00 · 2023-05-22 18:02:49 +00:00 · 2023-05-22 18:56:17 +01:00 · 2023-05-22 18:54:09 +01:00
420 changed files with 7449 additions and 3076 deletions
@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}
@@ -16,11 +16,12 @@
 #   - WEB3
 #   - SALESFORCE
 #   - ZOHOCRM
+#   - ZOHO_BIGIN

 # - APP STORE **********************************************************************************************
 # ⚠️ ⚠️ ⚠️ THESE WILL BE MIGRATED TO THE DATABASE TO PREVENT AWS's 4KB ENV QUOTA ⚠️ ⚠️ ⚠️
 #   - DAILY.CO VIDEO
-# Enables Cal Video. to get your key 
+# Enables Cal Video. to get your key
 # 1. Visit our [Daily.co Partnership Form](https://go.cal.com/daily) and enter your information
 # 2. From within your dashboard, go to the [developers](https://dashboard.daily.co/developers) tab.
 # @see https://github.com/calcom/cal.com#obtaining-daily-api-credentials
@@ -138,12 +138,16 @@ API_KEY_PREFIX=cal_
 EMAIL_FROM='notifications@yourselfhostedcal.com'

 # Configure SMTP settings (@see https://nodemailer.com/smtp/).
+# Configuration to receive emails locally (mailhog)
+EMAIL_SERVER_HOST='localhost'
+EMAIL_SERVER_PORT=1025
+
 # Note: The below configuration for Office 365 has been verified to work.
-EMAIL_SERVER_HOST='smtp.office365.com'
-EMAIL_SERVER_PORT=587
-EMAIL_SERVER_USER='<office365_emailAddress>'
+# EMAIL_SERVER_HOST='smtp.office365.com'
+# EMAIL_SERVER_PORT=587
+# EMAIL_SERVER_USER='<office365_emailAddress>'
 # Keep in mind that if you have 2FA enabled, you will need to provision an App Password.
-EMAIL_SERVER_PASSWORD='<office365_password>'
+# EMAIL_SERVER_PASSWORD='<office365_password>'

 # The following configuration for Gmail has been verified to work.
 # EMAIL_SERVER_HOST='smtp.gmail.com'
@@ -7,6 +7,7 @@ on:
    paths-ignore:
      - "**.md"
      - ".github/CODEOWNERS"
+  merge_group:
  workflow_dispatch:

 concurrency:
@@ -1,28 +0,0 @@
-name: TODO to Issue
-on:
-  push:
-    branches:
-      - main
-  workflow_dispatch:
-    inputs:
-      MANUAL_COMMIT_REF:
-        description: "The SHA of the commit to get the diff for"
-        required: true
-      MANUAL_BASE_REF:
-        description: "By default, the commit entered above is compared to the one directly before it; to go back further, enter an earlier SHA here"
-        required: false
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-jobs:
-  todos:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - name: "Add TODOs to issues"
-        uses: "alstr/todo-to-issue-action@v4"
-        env:
-          MANUAL_COMMIT_REF: ${{ inputs.MANUAL_COMMIT_REF }}
-          MANUAL_BASE_REF: ${{ inputs.MANUAL_BASE_REF }}
-        with:
-          IDENTIFIERS: '[{"name": "TODO", "labels": ["🙋🏻‍♂️help wanted"]}, {"name": "FIXME", "labels": ["🐛 bug"]}]'
@@ -0,0 +1,43 @@
+tasks:
+  - init: |
+      yarn &&
+      cp .env.example .env &&
+      next_auth_secret=$(openssl rand -base64 32) &&
+      calendso_encryption_key=$(openssl rand -base64 24) &&
+      sed -i -e "s|^NEXTAUTH_SECRET=.*|NEXTAUTH_SECRET=$next_auth_secret|" \
+             -e "s|^CALENDSO_ENCRYPTION_KEY=.*|CALENDSO_ENCRYPTION_KEY=$calendso_encryption_key|" .env
+    command: yarn dx
+
+ports:
+  - port: 3000
+    visibility: public
+    onOpen: open-preview
+  - port: 5420
+    visibility: private
+    onOpen: ignore
+  - port: 1025
+    visibility: private
+    onOpen: ignore
+  - port: 8025
+    visibility: private
+    onOpen: ignore
+
+github:
+  prebuilds:
+    master: true
+    pullRequests: true
+    pullRequestsFromForks: true
+    addCheck: true
+    addComment: true
+    addBadge: true
+
+vscode:
+  extensions:
+    - DavidAnson.vscode-markdownlint
+    - yzhang.markdown-all-in-one
+    - esbenp.prettier-vscode
+    - dbaeumer.vscode-eslint
+    - bradlc.vscode-tailwindcss
+    - ban.spellright
+    - stripe.vscode-stripe
+    - Prisma.prisma
@@ -3,5 +3,7 @@ nodeLinker: node-modules
 plugins:
  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
    spec: "@yarnpkg/plugin-interactive-tools"
+  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
+    spec: "@yarnpkg/plugin-workspace-tools"

 yarnPath: .yarn/releases/yarn-3.4.1.cjs
@@ -86,7 +86,12 @@ To develop locally:
   yarn
   ```

-5. Start developing and watch for code changes:
+5. Set up your `.env` file:
+
+   - Use `openssl rand -base64 32` to generate a key and add it under `NEXTAUTH_SECRET` in the `.env` file.
+   - Use `openssl rand -base64 24` to generate a key and add it under `CALENDSO_ENCRYPTION_KEY` in the `.env` file.
+
+6. Start developing and watch for code changes:

   ```sh
   yarn dev
@@ -2,7 +2,7 @@ Copyright (c) 2020-present Cal.com, Inc.

 Portions of this software are licensed as follows:

-* All content that resides under https://github.com/calcom/cal.com/tree/main/packages/features/ee directory of this repository (Enterprise Edition) is licensed under the license defined in "ee/LICENSE".
+* All content that resides under https://github.com/calcom/cal.com/tree/main/packages/features/ee directory of this repository (Commercial License) is licensed under the license defined in "ee/LICENSE".
 * All third party components incorporated into the Cal.com Software are licensed under the original license provided by the owner of the applicable component.
 * Content outside of the above mentioned directories or restrictions above is available under the "AGPLv3" license as defined below.

@@ -24,7 +24,7 @@

 <p align="center">
   <a href="https://cal.com/slack"><img src="https://img.shields.io/badge/Slack-calendso.slack.com-%234A154B" alt="Join Cal.com Slack"></a>
-   <a href="https://www.producthunt.com/posts/calendso"><img src="https://img.shields.io/badge/Product%20Hunt-%231%20Product%20of%20the%20Month-%23DA552E" alt="Product Hunt"></a>
+   <a href="https://producthunt.com/posts/calendso"><img src="https://img.shields.io/badge/Product%20Hunt-%231%20Product%20of%20the%20Month-%23DA552E" alt="Product Hunt"></a>
   <a href="https://status.cal.com"><img height="20px" src="https://betteruptime.com/status-badges/v1/monitor/a9kf.svg" alt="Uptime"></a>
   <a href="https://github.com/calcom/cal.com/stargazers"><img src="https://img.shields.io/github/stars/calcom/cal.com" alt="Github Stars"></a>
   <a href="https://news.ycombinator.com/item?id=34507672"><img src="https://img.shields.io/badge/Hacker%20News-%231-%23FF6600" alt="Hacker News"></a>
@@ -38,13 +38,13 @@
   <a href="https://github.com/calcom/cal.com/issues?q=is:issue+is:open+label:%22%F0%9F%99%8B%F0%9F%8F%BB%E2%80%8D%E2%99%82%EF%B8%8Fhelp+wanted%22"><img src="https://img.shields.io/badge/Help%20Wanted-Contribute-blue"></a>
   <a href="https://cal.com/figma"><img src="https://img.shields.io/badge/Figma-Design%20System-blueviolet"></a>
   <a href="https://calendso.slack.com/archives/C02BY67GMMW"><img src="https://img.shields.io/badge/translations-contribute-brightgreen" /></a>
-   <a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct/ "><img src="https://img.shields.io/badge/Contributor%20Covenant-1.4-purple" /></a>
+   <a href="https://contributor-covenant.org/version/1/4/code-of-conduct/ "><img src="https://img.shields.io/badge/Contributor%20Covenant-1.4-purple" /></a>
   <a href="https://console.algora.io/org/cal/bounties?status=open"><img src="https://img.shields.io/endpoint?url=https%3A%2F%2Fconsole.algora.io%2Fapi%2Fshields%2Fcal%2Fbounties%3Fstatus%3Dopen" /></a>
 </p>

 <!-- ABOUT THE PROJECT -->

-## About The Project
+## About the Project

 <img width="100%" alt="booking-screen" src="https://user-images.githubusercontent.com/8019099/176390354-f1bc7069-0341-437a-9bb8-eb41092b4016.gif">

@@ -53,13 +53,13 @@
 The open source Calendly alternative. You are in charge
 of your own data, workflow and appearance.

-Calendly and other scheduling tools are awesome. It made our lives massively easier. We're using it for business meetings, seminars, yoga classes and even calls with our families. However, most tools are very limited in terms of control and customisations.
+Calendly and other scheduling tools are awesome. It made our lives massively easier. We're using it for business meetings, seminars, yoga classes and even calls with our families. However, most tools are very limited in terms of control and customizations.

 That's where Cal.com comes in. Self-hosted or hosted by us. White-label by design. API-driven and ready to be deployed on your own domain. Full control of your events and data.

 ## Recognition

-#### Hacker News
+#### [Hacker News](https://news.ycombinator.com/from?site=cal.com)

 <a href="https://news.ycombinator.com/item?id=34507672">
  <img
@@ -77,22 +77,22 @@ That's where Cal.com comes in. Self-hosted or hosted by us. White-label by desig
  />
 </a>

-#### [Product Hunt](https://www.producthunt.com/posts/calendso?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-calendso)
+#### [Product Hunt](https://producthunt.com/products/cal-com?utm_source=badge-top-post-badge&utm_medium=badge)

-<a href="https://www.producthunt.com/posts/calendso?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-calendso" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=291910&theme=light&period=monthly" alt="Cal.com - The open source Calendly alternative | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a> <a href="https://www.producthunt.com/posts/calendso?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-calendso" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=291910&theme=light" alt="Cal.com - The open source Calendly alternative | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a> <a href="https://www.producthunt.com/stories/how-this-open-source-calendly-alternative-rocketed-to-product-of-the-day" target="_blank"><img src="https://cal.com/maker-grant.svg" alt="Cal.com - The open source Calendly alternative | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+<a href="https://producthunt.com/posts/calendso?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-calendso" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=291910&theme=light&period=monthly" alt="Cal.com - The open source Calendly alternative | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a> <a href="https://producthunt.com/posts/calendso?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-calendso" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=291910&theme=light" alt="Cal.com - The open source Calendly alternative | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a> <a href="https://producthunt.com/stories/how-this-open-source-calendly-alternative-rocketed-to-product-of-the-day" target="_blank"><img src="https://cal.com/maker-grant.svg" alt="Cal.com - The open source Calendly alternative | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>

 ### Built With

 - [Next.js](https://nextjs.org/?ref=cal.com)
 - [tRPC](https://trpc.io/?ref=cal.com)
- [React](https://reactjs.org/?ref=cal.com)
- [Tailwind](https://tailwindcss.com/?ref=cal.com)
- [Prisma](https://prisma.io/?ref=cal.com)
+- [React.js](https://reactjs.org/?ref=cal.com)
+- [Tailwind CSS](https://tailwindcss.com/?ref=cal.com)
+- [Prisma.io](https://prisma.io/?ref=cal.com)
 - [Daily.co](https://go.cal.com/daily)

 ## Stay Up-to-Date

-Cal officially launched as v.1.0 on 15th of September, however a lot of new features are coming. Watch **releases** of this repository to be notified for future updates:
+Cal.com officially launched as v.1.0 on 15th of September, however a lot of new features are coming. Watch **releases** of this repository to be notified for future updates:

 ![cal-star-github](https://user-images.githubusercontent.com/8019099/154853944-a9e3c999-3da3-4048-b149-b4f73893c6fb.gif)

@@ -104,7 +104,7 @@ To get a local copy up and running, please follow these simple steps.

 ### Prerequisites

-Here is what you need to be able to run Cal.
+Here is what you need to be able to run Cal.com.

 - Node.js (Version: >=15.x <17)
 - PostgreSQL
@@ -121,6 +121,9 @@ Here is what you need to be able to run Cal.
   ```sh
   git clone https://github.com/calcom/cal.com.git
   ```
+   > If you are on windows, run the following command on `gitbash` with admin privileges: <br>
+   ```git clone -c core.symlinks=true https://github.com/calcom/cal.com.git``` <br>
+   See [docs](https://cal.com/docs/how-to-guides/how-to-troubleshoot-symbolic-link-issues-on-windows#enable-symbolic-links) for more details.

 1. Go to the project folder

@@ -134,10 +137,10 @@ Here is what you need to be able to run Cal.
   yarn
   ```

-1. Set up your .env file
+1. Set up your `.env` file
   - Duplicate `.env.example` to `.env`
-   - Use `openssl rand -base64 32` to generate a key and add it under `NEXTAUTH_SECRET` in the .env file.
-   - Use `openssl rand -base64 24` to generate a key and add it under `CALENDSO_ENCRYPTION_KEY` in the .env file.
+   - Use `openssl rand -base64 32` to generate a key and add it under `NEXTAUTH_SECRET` in the `.env` file.
+   - Use `openssl rand -base64 24` to generate a key and add it under `CALENDSO_ENCRYPTION_KEY` in the `.env` file.

 #### Quick start with `yarn dx`

@@ -150,53 +153,63 @@ yarn dx

 #### Development tip

-> Add `NEXT_PUBLIC_DEBUG=1` anywhere in your `.env` to get logging information for all the queries and mutations driven by **trpc**.
+> Add `NEXT_PUBLIC_DEBUG=1` anywhere in your `.env` to get logging information for all the queries and mutations driven by **tRPC**.

 ```sh
 echo 'NEXT_PUBLIC_DEBUG=1' >> .env
 ```
+#### Gitpod Setup
+
+1. Click the button below to open this project in Gitpod.
+
+2. This will open a fully configured workspace in your browser with all the necessary dependencies already installed.
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/calcom/cal.com)
+
+

 #### Manual setup

-1. Configure environment variables in the `.env` file. Replace `<user>`, `<pass>`, `<db-host>`, `<db-port>` with their applicable values
+1. Configure environment variables in the `.env` file. Replace `<user>`, `<pass>`, `<db-host>`, and `<db-port>` with their applicable values

   ```
   DATABASE_URL='postgresql://<user>:<pass>@<db-host>:<db-port>'
   ```
-
   <details>
-   <summary>If you don't know how to configure the DATABASE_URL, then follow the steps here to create a quick DB using Heroku</summary>
+   <summary>If you don't know how to configure the DATABASE_URL, then follow the steps here to create a quick local DB</summary>

-   1. Create a free account with [Heroku](https://www.heroku.com/).
+   1. [Download](https://www.postgresql.org/download/) and install postgres in your local (if you don't have it already).

-   2. Create a new app.
-      <img width="306" alt="Create an App" src="https://user-images.githubusercontent.com/16905768/115322780-b3d58c00-a17e-11eb-8a52-b758fb0ea942.png">
+   2. Create your own local db by executing `createDB <DB name>` 

-   3. In your new app, go to `Overview` and next to `Installed add-ons`, click `Configure Add-ons`. We need this to set up our database.
-      ![image](https://user-images.githubusercontent.com/16905768/115323232-a53ba480-a17f-11eb-98db-58e2f8c52426.png)
+   3. Now open your psql shell with the DB you created: `psql -h localhost -U postgres -d <DB name>`

-   4. Once you clicked on `Configure Add-ons`, click on `Find more add-ons` and search for `postgres`. One of the options will be `Heroku Postgres` - click on that option.
-      ![image](https://user-images.githubusercontent.com/16905768/115323126-5beb5500-a17f-11eb-8030-7380310807a9.png)
+   4. Inside the psql shell execute `\conninfo`. And you will get the following info.   
+      ![image](https://user-images.githubusercontent.com/39329182/236612291-51d87f69-6dc1-4a23-bf4d-1ca1754e0a35.png)

-   5. Once the pop-up appears, click `Submit Order Form` - plan name should be `Hobby Dev - Free`.
-      <img width="512" alt="Submit Order Form" src="https://user-images.githubusercontent.com/16905768/115323265-b4baed80-a17f-11eb-99f0-d67f019aa6df.png">
+   5. Now extract all the info and add it to your DATABASE_URL. The url would look something like this 
+   `postgresql://postgres:postgres@localhost:5432/Your-DB-Name`.

-   6. Once you completed the above steps, click on your newly created `Heroku Postgres` and go to its `Settings`.
-      ![image](https://user-images.githubusercontent.com/16905768/115323367-e92ea980-a17f-11eb-9ff4-dec95f2ec349.png)
-
-   7. In `Settings`, copy your URI to your Cal.com .env file and replace the `postgresql://<user>:<pass>@<db-host>:<db-port>` with it.
-      ![image](https://user-images.githubusercontent.com/16905768/115323556-4591c900-a180-11eb-9808-2f55d2aa3995.png)
-      ![image](https://user-images.githubusercontent.com/16905768/115323697-7a9e1b80-a180-11eb-9f08-a742b1037f90.png)
-
-   8. To view your DB, once you add new data in Prisma, you can use [Heroku Data Explorer](https://heroku-data-explorer.herokuapp.com/).
   </details>

-1. Set a 32 character random string in your .env file for the `CALENDSO_ENCRYPTION_KEY` (You can use a command like `openssl rand -base64 24` to generate one).
+   If you don't want to create a local DB. Then you can also consider using services like railway.app or render.
+   - [Setup postgres DB with railway.app](https://arctype.com/postgres/setup/railway-postgres)
+   - [Setup postgres DB with render](https://render.com/docs/databases)
+
+1. Copy and paste your `DATABASE_URL` from `.env` to `.env.appStore`.
+
+1. Set a 32 character random string in your `.env` file for the `CALENDSO_ENCRYPTION_KEY` (You can use a command like `openssl rand -base64 24` to generate one).
 1. Set up the database using the Prisma schema (found in `packages/prisma/schema.prisma`)

   ```sh
   yarn workspace @calcom/prisma db-deploy
   ```
+1. Run [mailhog](https://github.com/mailhog/MailHog) to view emails sent during development
+
+   ```sh
+   docker pull mailhog/mailhog
+   docker run -d -p 8025:8025 -p 1025:1025 mailhog/mailhog
+   ```

 1. Run (in development mode)

@@ -206,7 +219,7 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> .env

 #### Setting up your first user

-1. Open [Prisma Studio](https://www.prisma.io/studio) to look at or modify the database content:
+1. Open [Prisma Studio](https://prisma.io/studio) to look at or modify the database content:

   ```sh
   yarn db-studio
@@ -251,7 +264,7 @@ yarn playwright show-report test-results/reports/playwright-html-report
   yarn workspace @calcom/prisma db-migrate
   ```

-   (this can clear your development database in some cases)
+   (This can clear your development database in some cases)

   In a production environment, run:

@@ -285,7 +298,7 @@ yarn playwright show-report test-results/reports/playwright-html-report

 ### Docker

-The Docker configuration for Cal is an effort powered by people within the community.
+The Docker configuration for Cal.com is an effort powered by people within the community.

 If you want to contribute to the Docker repository, [reply here](https://github.com/calcom/docker/discussions/32).

@@ -298,14 +311,14 @@ Cal.com, Inc. does not provide official support for Docker, but we will accept f
 ### Heroku

 <a href="https://heroku.com/deploy?template=https://github.com/calcom/cal.com">
-  <img width="185px" height="auto" src="https://www.herokucdn.com/deploy/button.svg" alt="Deploy">
+  <img width="185px" height="auto" src="https://herokucdn.com/deploy/button.svg" alt="Deploy">
 </a>

 ### Railway

 [![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new/template/cal)

-You can deploy Cal on [Railway](https://railway.app/) using the button above. The team at Railway also have a [detailed blog post](https://blog.railway.app/p/calendso) on deploying Cal on their platform.
+You can deploy Cal.com on [Railway](https://railway.app) using the button above. The team at Railway also have a [detailed blog post](https://blog.railway.app/p/calendso) on deploying Cal.com on their platform.

 ### Vercel

@@ -386,7 +399,7 @@ Don't code but still want to contribute? Join our [slack](https://cal.com/slack)
 8. Select Web Application as the Application Type.
 9. Under Authorized redirect URI's, select Add URI and then add the URI `<Cal.com URL>/api/integrations/googlecalendar/callback` and `<Cal.com URL>/api/auth/callback/google` replacing Cal.com URL with the URI at which your application runs.
 10. The key will be created and you will be redirected back to the Credentials page. Select the newly generated client ID under OAuth 2.0 Client IDs.
-11. Select Download JSON. Copy the contents of this file and paste the entire JSON string in the .env file as the value for GOOGLE_API_CREDENTIALS key.
+11. Select Download JSON. Copy the contents of this file and paste the entire JSON string in the `.env` file as the value for `GOOGLE_API_CREDENTIALS` key.

 #### _Adding google calendar to Cal.com App Store_

@@ -423,7 +436,7 @@ following
 5. Choose "User-managed app" as the app type.
 6. De-select the option to publish the app on the Zoom App Marketplace.
 7. Click "Create".
-8. Now copy the Client ID and Client Secret to your .env file into the `ZOOM_CLIENT_ID` and `ZOOM_CLIENT_SECRET` fields.
+8. Now copy the Client ID and Client Secret to your `.env` file into the `ZOOM_CLIENT_ID` and `ZOOM_CLIENT_SECRET` fields.
 9. Set the Redirect URL for OAuth `<Cal.com URL>/api/integrations/zoomvideo/callback` replacing Cal.com URL with the URI at which your application runs.
 10. Also add the redirect URL given above as a allow list URL and enable "Subdomain check". Make sure, it says "saved" below the form.
 11. You don't need to provide basic information about your app. Instead click at "Scopes" and then at "+ Add Scopes". On the left, click the category "Meeting" and check the scope `meeting:write`.
@@ -435,8 +448,8 @@ following
 1. Visit our [Daily.co Partnership Form](https://go.cal.com/daily) and enter your information
 2. From within your dashboard, go to the [developers](https://dashboard.daily.co/developers) tab.
 3. Copy your API key.
-4. Now paste the API key to your .env file into the `DAILY_API_KEY` field in your .env file.
-5. If you have the [Daily Scale Plan](https://www.daily.co/pricing) set the `DAILY_SCALE_PLAN` variable to `true` in order to use features like video recording.
+4. Now paste the API key to your `.env` file into the `DAILY_API_KEY` field in your `.env` file.
+5. If you have the [Daily Scale Plan](https://daily.co/pricing) set the `DAILY_SCALE_PLAN` variable to `true` in order to use features like video recording.

 ### Obtaining HubSpot Client ID and Secret

@@ -445,12 +458,16 @@ following
 3. Click "Create app" button top right.
 4. Fill in any information you want in the "App info" tab
 5. Go to tab "Auth"
-6. Now copy the Client ID and Client Secret to your .env file into the `HUBSPOT_CLIENT_ID` and `HUBSPOT_CLIENT_SECRET` fields.
+6. Now copy the Client ID and Client Secret to your `.env` file into the `HUBSPOT_CLIENT_ID` and `HUBSPOT_CLIENT_SECRET` fields.
 7. Set the Redirect URL for OAuth `<Cal.com URL>/api/integrations/hubspot/callback` replacing Cal.com URL with the URI at which your application runs.
 8. In the "Scopes" section at the bottom of the page, make sure you select "Read" and "Write" for scope called `crm.objects.contacts`
 9. Click the "Save" button at the bottom footer.
 10. You're good to go. Now you can see any booking in Cal.com created as a meeting in HubSpot for your contacts.

+### Obtaining Webex Client ID and Secret
+
+[See Webex Readme](./packages/app-store/webex/)
+
 ### Obtaining ZohoCRM Client ID and Secret

 1. Open [Zoho API Console](https://api-console.zoho.com/) and sign into your account, or create a new one.
@@ -458,31 +475,33 @@ following
 3. Click "ADD CLIENT" button top right and select "Server-based Applications".
 4. Fill in any information you want in the "Client Details" tab
 5. Go to tab "Client Secret" tab.
-6. Now copy the Client ID and Client Secret to your .env file into the `ZOHOCRM_CLIENT_ID` and `ZOHOCRM_CLIENT_SECRET` fields.
+6. Now copy the Client ID and Client Secret to your `.env` file into the `ZOHOCRM_CLIENT_ID` and `ZOHOCRM_CLIENT_SECRET` fields.
 7. Set the Redirect URL for OAuth `<Cal.com URL>/api/integrations/zohocrm/callback` replacing Cal.com URL with the URI at which your application runs.
 8. In the "Settings" section check the "Multi-DC" option if you wish to use the same OAuth credentials for all data centers.
 9. Click the "Save"/ "UPDATE" button at the bottom footer.
 10. You're good to go. Now you can easily add your ZohoCRM integration in the Cal.com settings.

+### Obtaining Zoho Bigin Client ID and Secret
+[Follow these steps](./packages/app-store/zoho-bigin/)
 ## Workflows

 ### Setting up SendGrid for Email reminders

 1. Create a SendGrid account (https://signup.sendgrid.com/)
 2. Go to Settings -> API keys and create an API key
-3. Copy API key to your .env file into the SENDGRID_API_KEY field
+3. Copy API key to your `.env` file into the `SENDGRID_API_KEY` field
 4. Go to Settings -> Sender Authentication and verify a single sender
-5. Copy the verified E-Mail to your .env file into the SENDGRID_EMAIL field
-6. Add your custom sender name to the .env file into the NEXT_PUBLIC_SENDGRID_SENDER_NAME field (fallback is Cal.com)
+5. Copy the verified E-Mail to your `.env` file into the `SENDGRID_EMAIL` field
+6. Add your custom sender name to the `.env` file into the `NEXT_PUBLIC_SENDGRID_SENDER_NAME` field (fallback is Cal.com)

 ### Setting up Twilio for SMS reminders

-1. Create a Twilio account (https://www.twilio.com/try-twilio)
+1. Create a Twilio account (https://twilio.com/try-twilio)
 2. Click ‘Get a Twilio phone number’
-3. Copy Account SID to your .env file into the TWILIO_SID field
-4. Copy Auth Token to your .env file into the TWILIO_TOKEN field
-5. Copy your Twilio phone number to your .env file into the TWILIO_PHONE_NUMBER field
-6. Add your own sender id to the .env file into the NEXT_PUBLIC_SENDER_ID field (fallback is Cal)
+3. Copy Account SID to your `.env` file into the `TWILIO_SID` field
+4. Copy Auth Token to your `.env` file into the `TWILIO_TOKEN` field
+5. Copy your Twilio phone number to your `.env` file into the `TWILIO_PHONE_NUMBER` field
+6. Add your own sender id to the `.env` file into the `NEXT_PUBLIC_SENDER_ID` field (fallback is Cal.com)
 7. Create a messaging service (Develop -> Messaging -> Services)
 8. Choose any name for the messaging service
 9. Click 'Add Senders'
@@ -490,15 +509,15 @@ following
 11. Add the listed phone number
 12. Leave all other fields as they are
 13. Complete setup and click ‘View my new Messaging Service’
-14. Copy Messaging Service SID to your .env file into the TWILIO_MESSAGING_SID field
+14. Copy Messaging Service SID to your `.env` file into the `TWILIO_MESSAGING_SID` field
 15. Create a verify service
-16. Copy Verify Service SID to your .env file into the TWILIO_VERIFY_SID field
+16. Copy Verify Service SID to your `.env` file into the `TWILIO_VERIFY_SID` field

 <!-- LICENSE -->

 ## License

-Distributed under the AGPLv3 License. See `LICENSE` for more information.
+Distributed under the [AGPLv3 License](https://github.com/calcom/cal.com/blob/main/LICENSE). See `LICENSE` for more information.

 <!-- ACKNOWLEDGEMENTS -->

@@ -1,6 +1,7 @@
 {
  "name": "@calcom/docs",
  "version": "1.0.0",
+  "private": true,
  "description": "",
  "main": "index.js",
  "scripts": {
@@ -0,0 +1,10 @@
+# @calcom/web
+
+## 2.7.16
+
+### Patch Changes
+
+- Updated dependencies
+  - @calcom/embed-snippet@1.0.7
+  - @calcom/embed-react@1.0.12
+  - @calcom/embed-core@1.1.5
@@ -36,6 +36,7 @@ const Component = ({
  tos,
  privacy,
  isProOnly,
+  teamsPlanRequired,
  descriptionItems,
  isTemplate,
  dependencies,
@@ -152,6 +153,7 @@ const Component = ({
                  type={type}
                  isProOnly={isProOnly}
                  disableInstall={disableInstall}
+                  teamsPlanRequired={teamsPlanRequired}
                  render={({ useDefaultComponent, ...props }) => {
                    if (useDefaultComponent) {
                      props = {
@@ -192,6 +194,7 @@ const Component = ({
              type={type}
              isProOnly={isProOnly}
              disableInstall={disableInstall}
+              teamsPlanRequired={teamsPlanRequired}
              render={({ useDefaultComponent, ...props }) => {
                if (useDefaultComponent) {
                  props = {
@@ -241,7 +244,9 @@ const Component = ({
        </div>
        <h4 className="text-emphasis mt-8 font-semibold ">{t("pricing")}</h4>
        <span className="text-default">
-          {price === 0 ? (
+          {teamsPlanRequired ? (
+            t("teams_plan_required")
+          ) : price === 0 ? (
            t("free_to_use_apps")
          ) : (
            <>
@@ -358,6 +363,7 @@ export default function App(props: {
  privacy?: string;
  licenseRequired: AppType["licenseRequired"];
  isProOnly: AppType["isProOnly"];
+  teamsPlanRequired: AppType["teamsPlanRequired"];
  descriptionItems?: Array<string | { iframe: IframeHTMLAttributes<HTMLIFrameElement> }>;
  isTemplate?: boolean;
  disableInstall?: boolean;
@@ -1,9 +1,9 @@
-import { useMutation } from "@tanstack/react-query";
 import Link from "next/link";
 import { Fragment } from "react";

 import { InstallAppButton } from "@calcom/app-store/components";
 import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
+import { CalendarSwitch } from "@calcom/features/calendars/CalendarSwitch";
 import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
@@ -12,12 +12,10 @@ import {
  Button,
  EmptyScreen,
  List,
-  showToast,
  AppSkeletonLoader as SkeletonLoader,
-  Switch,
  ShellSubHeading,
 } from "@calcom/ui";
-import { ArrowLeft, Calendar, Plus } from "@calcom/ui/components/icon";
+import { Calendar, Plus } from "@calcom/ui/components/icon";

 import { QueryCell } from "@lib/QueryCell";

@@ -31,83 +29,6 @@ type Props = {
  destinationCalendarId?: string;
 };

-function CalendarSwitch(props: {
-  type: string;
-  externalId: string;
-  title: string;
-  defaultSelected: boolean;
-  destination?: boolean;
-}) {
-  const { t } = useLocale();
-  const utils = trpc.useContext();
-
-  const mutation = useMutation<
-    unknown,
-    unknown,
-    {
-      isOn: boolean;
-    }
-  >(
-    async ({ isOn }) => {
-      const body = {
-        integration: props.type,
-        externalId: props.externalId,
-      };
-      if (isOn) {
-        const res = await fetch("/api/availability/calendar", {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(body),
-        });
-        if (!res.ok) {
-          throw new Error("Something went wrong");
-        }
-      } else {
-        const res = await fetch("/api/availability/calendar", {
-          method: "DELETE",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(body),
-        });
-
-        if (!res.ok) {
-          throw new Error("Something went wrong");
-        }
-      }
-    },
-    {
-      async onSettled() {
-        await utils.viewer.integrations.invalidate();
-      },
-      onError() {
-        showToast(`Something went wrong when toggling "${props.title}""`, "error");
-      },
-    }
-  );
-  return (
-    <div className="flex flex-col py-1 sm:flex-row">
-      <Switch
-        key={props.externalId}
-        name="enabled"
-        label={props.title}
-        defaultChecked={props.defaultSelected}
-        onCheckedChange={(isOn: boolean) => {
-          mutation.mutate({ isOn });
-        }}
-      />
-      {!!props.destination && (
-        <span className="bg-subtle text-default ml-8 inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm font-normal sm:ml-4">
-          <ArrowLeft className="h-4 w-4" />
-          {t("adding_events_to")}
-        </span>
-      )}
-    </div>
-  );
-}
-
 function CalendarList(props: Props) {
  const { t } = useLocale();
  const query = trpc.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: false });
@@ -185,14 +106,15 @@ function ConnectedCalendarsList(props: Props) {
                      {!fromOnboarding && (
                        <>
                          <p className="text-subtle px-5 pt-4 text-sm">{t("toggle_calendars_conflict")}</p>
-                          <ul className="space-y-2 px-5 py-4">
+                          <ul className="space-y-4 px-5 py-4">
                            {item.calendars.map((cal) => (
                              <CalendarSwitch
                                key={cal.externalId}
                                externalId={cal.externalId}
                                title={cal.name || "Nameless calendar"}
+                                name={cal.name || "Nameless calendar"}
                                type={item.integration.type}
-                                defaultSelected={cal.isSelected}
+                                isChecked={cal.isSelected}
                                destination={cal.externalId === props.destinationCalendarId}
                              />
                            ))}
@@ -18,9 +18,9 @@ export default function AppsLayout({ children, actions, emptyStore, ...rest }: A
  const { t } = useLocale();
  const session = useSession();
  const router = useRouter();
+  const isAdmin = session.data?.user.role === "ADMIN";

  if (session.status === "loading") return <></>;
-
  return (
    <Shell {...rest} actions={actions?.("block")} hideHeadingOnMobile>
      <div className="flex flex-col xl:flex-row">
@@ -29,8 +29,8 @@ export default function AppsLayout({ children, actions, emptyStore, ...rest }: A
            <EmptyScreen
              Icon={AlertCircle}
              headline={t("no_apps")}
-              description={session.data?.user.role === "ADMIN" ? "You can enable apps in the settings" : ""}
-              buttonText={session.data?.user.role === "ADMIN" ? t("apps_settings") : ""}
+              description={isAdmin ? "You can enable apps in the settings" : ""}
+              buttonText={isAdmin ? t("apps_settings") : ""}
              buttonOnClick={() => router.push("/settings/admin/apps/calendar")}
            />
          ) : (
@@ -47,7 +47,7 @@ export function AvailableEventLocations({ locations }: { locations: Props["event
            src={eventLocationType.iconUrl}
            className={classNames(
              "ml-[2px] h-4 w-4 opacity-70 ltr:mr-[10px] rtl:ml-[10px] dark:opacity-100 ",
-              !eventLocationType.iconUrl?.includes("api") ? "dark:invert-[.65]" : ""
+              !eventLocationType.iconUrl?.startsWith("/app-store") ? "dark:invert-[.65]" : ""
            )}
            alt={`${eventLocationType.label} icon`}
          />
@@ -72,6 +72,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
      slotUtcStartDate: slot.time,
      eventTypeId,
      slotUtcEndDate: dayjs(slot.time).utc().add(duration, "minutes").format(),
+      bookingUid: slot.bookingUid,
    });
  };

@@ -29,7 +29,7 @@ import {
  TableActions,
  TextAreaField,
 } from "@calcom/ui";
-import { Check, Clock, MapPin, RefreshCcw, Send, Slash, X, CreditCard } from "@calcom/ui/components/icon";
+import { Check, Clock, MapPin, RefreshCcw, Send, Ban, X, CreditCard } from "@calcom/ui/components/icon";

 import useMeQuery from "@lib/hooks/useMeQuery";

@@ -119,7 +119,7 @@ function BookingListItem(booking: BookingItemProps) {
      onClick: () => {
        setRejectionDialogIsOpen(true);
      },
-      icon: Slash,
+      icon: Ban,
      disabled: mutation.isLoading,
    },
    // For bookings with payment, only confirm if the booking is paid for
@@ -17,7 +17,7 @@ export function TimezoneDropdown({

  return (
    <>
-      <div className="dark:focus-within:bg-darkgray-200 dark:bg-darkgray-100 dark:hover:bg-darkgray-200 !mt-3 flex w-full max-w-[20rem] items-center rounded-[4px] px-1 text-sm font-medium focus-within:bg-gray-200 hover:bg-gray-100 lg:max-w-[12rem] [&_p]:focus-within:text-gray-900 dark:[&_p]:focus-within:text-white [&_svg]:focus-within:text-gray-900 dark:[&_svg]:focus-within:text-white">
+      <div className="dark:focus-within:bg-darkgray-200  dark:hover:bg-darkgray-200 !mt-3 flex w-full max-w-[20rem] items-center rounded-[4px] px-1 text-sm font-medium focus-within:bg-gray-200 hover:bg-gray-100 lg:max-w-[12rem] [&_p]:focus-within:text-gray-900 dark:[&_p]:focus-within:text-white [&_svg]:focus-within:text-gray-900 dark:[&_svg]:focus-within:text-white">
        <Globe className="dark:text-darkgray-600 flex h-4 w-4 text-gray-600 ltr:mr-2 rtl:ml-2" />
        <TimeOptions onSelectTimeZone={handleSelectTimeZone} />
      </div>
@@ -230,12 +230,14 @@ const BookingPage = ({
    }),
    {}
  );
+
  const reserveSlot = () => {
    if (queryDuration) {
      reserveSlotMutation.mutate({
        eventTypeId: eventType.id,
        slotUtcStartDate: dayjs(queryDate).utc().format(),
        slotUtcEndDate: dayjs(queryDate).utc().add(parseInt(queryDuration), "minutes").format(),
+        bookingUid: currentSlotBooking?.uid,
      });
    }
  };
@@ -550,7 +552,7 @@ const BookingPage = ({
          )}>
          <div className="sm:flex">
            {showEventTypeDetails && (
-              <div className="sm:border-subtle  text-default flex flex-col px-6 pt-6 pb-0 sm:w-1/2 sm:border-r sm:pb-6">
+              <div className="sm:border-subtle text-default flex flex-col px-6 pt-6 pb-0 sm:w-1/2 sm:border-r sm:pb-6">
                <BookingDescription isBookingPage profile={profile} eventType={eventType}>
                  <BookingDescriptionPayment eventType={eventType} t={t} i18n={i18n} />
                  {!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
@@ -11,6 +11,10 @@ import { getEventName } from "@calcom/core/event";
 import getLocationsOptionsForSelect from "@calcom/features/bookings/lib/getLocationOptionsForSelect";
 import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
 import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
+import {
+  allowDisablingAttendeeConfirmationEmails,
+  allowDisablingHostConfirmationEmails,
+} from "@calcom/features/ee/workflows/lib/allowDisablingStandardEmails";
 import { FormBuilder } from "@calcom/features/form-builder/FormBuilder";
 import { classNames } from "@calcom/lib";
 import { APP_NAME, CAL_URL } from "@calcom/lib/constants";
@@ -43,6 +47,8 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,

  const bookingFields: Prisma.JsonObject = {};

+  const workflows = eventType.workflows.map((workflowOnEventType) => workflowOnEventType.workflow);
+
  eventType.bookingFields.forEach(({ name }) => {
    bookingFields[name] = name + " input";
  });
@@ -316,7 +322,6 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                      disabled={seatsLocked.disabled}
                      defaultValue={value || 2}
                      min={1}
-                      className="w-24"
                      addOnSuffix={<>{t("seats")}</>}
                      onChange={(e) => {
                        onChange(Math.abs(Number(e.target.value)));
@@ -338,7 +343,51 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
          </>
        )}
      />
-
+      {allowDisablingAttendeeConfirmationEmails(workflows) && (
+        <>
+          <hr className="border-subtle" />
+          <Controller
+            name="metadata.disableStandardEmails.confirmation.attendee"
+            control={formMethods.control}
+            render={({ field: { value, onChange } }) => (
+              <>
+                <SettingsToggle
+                  title={t("disable_attendees_confirmation_emails")}
+                  description={t("disable_attendees_confirmation_emails_description")}
+                  checked={value || false}
+                  onCheckedChange={(e) => {
+                    formMethods.setValue("metadata.disableStandardEmails.confirmation.attendee", e);
+                    onChange(e);
+                  }}
+                />
+              </>
+            )}
+          />
+        </>
+      )}
+      {allowDisablingHostConfirmationEmails(workflows) && (
+        <>
+          <hr className="border-subtle" />
+          <Controller
+            name="metadata.disableStandardEmails.confirmation.host"
+            control={formMethods.control}
+            defaultValue={!!eventType.seatsPerTimeSlot}
+            render={({ field: { value, onChange } }) => (
+              <>
+                <SettingsToggle
+                  title={t("disable_host_confirmation_emails")}
+                  description={t("disable_host_confirmation_emails_description")}
+                  checked={value || false}
+                  onCheckedChange={(e) => {
+                    formMethods.setValue("metadata.disableStandardEmails.confirmation.host", e);
+                    onChange(e);
+                  }}
+                />
+              </>
+            )}
+          />
+        </>
+      )}
      {showEventNameTip && (
        <CustomEventTypeModal
          close={closeEventNameTip}
@@ -119,7 +119,7 @@ const EventTypeScheduleDetails = ({
                        {format(dayRange.startTime, timeFormat === 12)}
                      </span>
                      <span className="ms-4">-</span>
-                      <div className="ml-6">{format(dayRange.endTime, timeFormat === 12)}</div>
+                      <div className="ml-6 sm:w-28">{format(dayRange.endTime, timeFormat === 12)}</div>
                    </div>
                  ))}
                </div>
@@ -154,12 +154,11 @@ const EventTypeScheduleDetails = ({

 const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
  const { t } = useLocale();
-  const { shouldLockIndicator, shouldLockDisableProps, isManagedEventType, isChildrenManagedEventType } =
-    useLockedFieldsManager(
-      eventType,
-      t("locked_fields_admin_description"),
-      t("locked_fields_member_description")
-    );
+  const { shouldLockIndicator, isManagedEventType, isChildrenManagedEventType } = useLockedFieldsManager(
+    eventType,
+    t("locked_fields_admin_description"),
+    t("locked_fields_member_description")
+  );
  const { watch } = useFormContext<FormValues>();
  const watchSchedule = watch("schedule");
  const formMethods = useFormContext<FormValues>();
@@ -205,6 +204,8 @@ const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
      const value = options.find((option) =>
        scheduleId
          ? option.value === scheduleId
+          : isManagedEventType
+          ? option.value === 0
          : option.value === schedules.find((schedule) => schedule.isDefault)?.id
      );

@@ -108,7 +108,7 @@ const MinimumBookingNoticeInput = React.forwardRef<
 });

 export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventType">) => {
-  const { t } = useLocale();
+  const { t, i18n } = useLocale();
  const formMethods = useFormContext<FormValues>();

  const PERIOD_TYPES = [
@@ -149,12 +149,25 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
  const bookingLimitsLocked = shouldLockDisableProps("bookingLimits");
  const durationLimitsLocked = shouldLockDisableProps("durationLimits");
  const periodTypeLocked = shouldLockDisableProps("periodType");
+  const offsetStartLockedProps = shouldLockDisableProps("offsetStart");

  const optionsPeriod = [
    { value: 1, label: t("calendar_days") },
    { value: 0, label: t("business_days") },
  ];

+  // offsetStart toggle is client-side only, opened by default if offsetStart is set
+  const offsetStartValue = useWatch({
+    control: formMethods.control,
+    name: "offsetStart",
+  });
+  const [offsetToggle, setOffsetToggle] = useState(() => offsetStartValue > 0);
+
+  // Preview how the offset will affect start times
+  const offsetOriginalTime = new Date();
+  offsetOriginalTime.setHours(9, 0, 0, 0);
+  const offsetAdjustedTime = new Date(offsetOriginalTime.getTime() + offsetStartValue * 60 * 1000);
+
  return (
    <div className="space-y-8">
      <div className="space-y-4 lg:space-y-8">
@@ -432,6 +445,32 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
          </SettingsToggle>
        )}
      />
+      <hr className="border-subtle" />
+      <SettingsToggle
+        title={t("offset_toggle")}
+        description={t("offset_toggle_description")}
+        {...offsetStartLockedProps}
+        checked={offsetToggle}
+        onCheckedChange={(active) => {
+          setOffsetToggle(active);
+          if (!active) {
+            formMethods.setValue("offsetStart", 0);
+          }
+        }}>
+        <TextField
+          required
+          type="number"
+          {...offsetStartLockedProps}
+          label={t("offset_start")}
+          defaultValue={eventType.offsetStart}
+          {...formMethods.register("offsetStart")}
+          addOnSuffix={<>{t("minutes")}</>}
+          hint={t("offset_start_description", {
+            originalTime: offsetOriginalTime.toLocaleTimeString(i18n.language, { timeStyle: "short" }),
+            adjustedTime: offsetAdjustedTime.toLocaleTimeString(i18n.language, { timeStyle: "short" }),
+          })}
+        />
+      </SettingsToggle>
    </div>
  );
 };
@@ -285,7 +285,7 @@ export const EventSetupTab = (
                          "h-4 w-4",
                          // invert all the icons except app icons
                          eventLocationType.iconUrl &&
-                            !eventLocationType.iconUrl.startsWith("/api") &&
+                            !eventLocationType.iconUrl.startsWith("/app-store") &&
                            "dark:invert"
                        )}
                        alt={`${eventLocationType.label} logo`}
@@ -390,7 +390,12 @@ export const EventSetupTab = (
          addOnLeading={
            <>
              {CAL_URL?.replace(/^(https?:|)\/\//, "")}/
-              {team ? "team/" + team.slug : eventType.users[0].username}/
+              {!isManagedEventType
+                ? team
+                  ? "team/" + team.slug
+                  : eventType.users[0].username
+                : t("username_placeholder")}
+              /
            </>
          }
          {...formMethods.register("slug", {
@@ -466,6 +471,7 @@ export const EventSetupTab = (
            defaultValue={eventType.length ?? 15}
            {...formMethods.register("length")}
            addOnSuffix={<>{t("minutes")}</>}
+            min={1}
          />
        )}
        {!lengthLockedProps.disabled && (
@@ -170,7 +170,7 @@ export const EventTeamWebhooksTab = ({
          </Dialog>
          {/* Edit webhook dialog */}
          <Dialog open={editModalOpen} onOpenChange={(isOpen) => !isOpen && setEditModalOpen(false)}>
-            <DialogContent title={t("edit_webhook")}>
+            <DialogContent enableOverflow title={t("edit_webhook")}>
              <WebhookForm
                webhook={webhookToEdit}
                apps={installedApps?.items.map((app) => app.slug)}
@@ -170,7 +170,7 @@ function EventTypeSingleLayout({

  // Define tab navigation here
  const EventTypeTabs = useMemo(() => {
-    let navigation = getNavigation({
+    const navigation = getNavigation({
      t,
      eventType,
      enabledAppsNumber,
@@ -210,7 +210,7 @@ function EventTypeSingleLayout({
    }
    if (isManagedEventType || isChildrenManagedEventType) {
      // Removing apps and workflows for manageg event types by admins v1
-      navigation = navigation.slice(0, -2);
+      navigation.splice(-2, 1);
    } else {
      navigation.push({
        name: "webhooks",
@@ -238,7 +238,7 @@ function EventTypeSingleLayout({
        <div className="flex items-center justify-end">
          {!eventType.metadata.managedEventConfig && (
            <>
-              <div className="sm:hover:bg-subtle hidden items-center rounded-md px-2 lg:flex">
+              <div className="sm:hover:bg-muted hidden items-center rounded-md px-2 lg:flex">
                <Skeleton
                  as={Label}
                  htmlFor="hiddenSwitch"
@@ -3,15 +3,16 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { App } from "@calcom/types/App";
 import { Button } from "@calcom/ui";

-interface ICalendarItem {
+interface IAppConnectionItem {
  title: string;
  description?: string;
  logo: string;
  type: App["type"];
+  installed?: boolean;
 }

-const CalendarItem = (props: ICalendarItem) => {
-  const { title, logo, type } = props;
+const AppConnectionItem = (props: IAppConnectionItem) => {
+  const { title, logo, type, installed } = props;
  const { t } = useLocale();
  return (
    <div className="flex flex-row items-center justify-between p-5">
@@ -25,13 +26,14 @@ const CalendarItem = (props: ICalendarItem) => {
          <Button
            {...buttonProps}
            color="secondary"
+            disabled={installed}
            type="button"
            onClick={(event) => {
              // Save cookie key to return url step
              document.cookie = `return-to=${window.location.href};path=/;max-age=3600;SameSite=Lax`;
              buttonProps && buttonProps.onClick && buttonProps?.onClick(event);
            }}>
-            {t("connect")}
+            {installed ? t("installed") : t("connect")}
          </Button>
        )}
      />
@@ -39,4 +41,4 @@ const CalendarItem = (props: ICalendarItem) => {
  );
 };

-export { CalendarItem };
+export { AppConnectionItem };
@@ -1,4 +1,4 @@
-import { CalendarSwitch } from "./CalendarSwitch";
+import { CalendarSwitch } from "@calcom/features/calendars/CalendarSwitch";

 interface IConnectedCalendarItem {
  name: string;
@@ -0,0 +1,17 @@
+import { SkeletonAvatar, SkeletonText, SkeletonButton } from "@calcom/ui";
+
+export function StepConnectionLoader() {
+  return (
+    <ul className="bg-default divide-subtle border-subtle divide-y rounded-md border p-0 dark:bg-black">
+      {Array.from({ length: 4 }).map((_item, index) => {
+        return (
+          <li className="flex w-full flex-row justify-center border-b-0 py-6" key={index}>
+            <SkeletonAvatar className="mx-6 h-8 w-8 px-4" />
+            <SkeletonText className="ml-1 mr-4 mt-3 h-5 w-full" />
+            <SkeletonButton className="mr-6 h-8 w-20 rounded-md p-5" />
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
@@ -1,13 +1,13 @@
-import { ArrowRightIcon } from "@heroicons/react/solid";
-
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { SkeletonAvatar, SkeletonText, SkeletonButton, List } from "@calcom/ui";
+import { List } from "@calcom/ui";
+import { ArrowRight } from "@calcom/ui/components/icon";

-import { CalendarItem } from "../components/CalendarItem";
+import { AppConnectionItem } from "../components/AppConnectionItem";
 import { ConnectedCalendarItem } from "../components/ConnectedCalendarItem";
 import { CreateEventsOnCalendarSelect } from "../components/CreateEventsOnCalendarSelect";
+import { StepConnectionLoader } from "../components/StepConnectionLoader";

 interface IConnectCalendarsProps {
  nextStep: () => void;
@@ -33,7 +33,7 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
        firstCalendar.integration.title &&
        firstCalendar.integration.logo && (
          <>
-            <List className="bg-default border-subtle rounded-md border p-0 dark:bg-black">
+            <List className="bg-default border-subtle rounded-md border p-0 dark:bg-black ">
              <ConnectedCalendarItem
                key={firstCalendar.integration.title}
                name={firstCalendar.integration.title}
@@ -60,7 +60,7 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
            queryIntegrations.data.items.map((item) => (
              <li key={item.title}>
                {item.title && item.logo && (
-                  <CalendarItem
+                  <AppConnectionItem
                    type={item.type}
                    title={item.title}
                    description={item.description}
@@ -72,19 +72,8 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
        </List>
      )}

-      {queryIntegrations.isLoading && (
-        <ul className="bg-default divide-subtle border-subtle divide-y rounded-md border p-0 dark:bg-black">
-          {[0, 0, 0, 0].map((_item, index) => {
-            return (
-              <li className="flex w-full flex-row justify-center border-b-0 py-6" key={index}>
-                <SkeletonAvatar className="mx-6 h-8 w-8 px-4" />
-                <SkeletonText className="ml-1 mr-4 mt-3 h-5 w-full" />
-                <SkeletonButton className="mr-6 h-8 w-20 rounded-md p-5" />
-              </li>
-            );
-          })}
-        </ul>
-      )}
+      {queryIntegrations.isLoading && <StepConnectionLoader />}
+
      <button
        type="button"
        data-testid="save-calendar-button"
@@ -95,7 +84,7 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
        onClick={() => nextStep()}
        disabled={disabledNextButton}>
        {firstCalendar ? `${t("continue")}` : `${t("next_step_text")}`}
-        <ArrowRightIcon className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
+        <ArrowRight className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
      </button>
    </>
  );
@@ -0,0 +1,67 @@
+import classNames from "@calcom/lib/classNames";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import { List } from "@calcom/ui";
+import { ArrowRight } from "@calcom/ui/components/icon";
+
+import { AppConnectionItem } from "../components/AppConnectionItem";
+import { StepConnectionLoader } from "../components/StepConnectionLoader";
+
+interface ConnectedAppStepProps {
+  nextStep: () => void;
+}
+
+const ConnectedVideoStep = (props: ConnectedAppStepProps) => {
+  const { nextStep } = props;
+  const { data: queryConnectedVideoApps, isLoading } = trpc.viewer.integrations.useQuery({
+    variant: "conferencing",
+    onlyInstalled: false,
+  });
+  const { t } = useLocale();
+
+  const hasAnyInstalledVideoApps = queryConnectedVideoApps?.items.some(
+    (item) => item.credentialIds.length > 0
+  );
+
+  return (
+    <>
+      {!isLoading && (
+        <List className="bg-default  border-subtle divide-subtle scroll-bar mx-1 max-h-[45vh] divide-y !overflow-y-scroll rounded-md border p-0 sm:mx-0">
+          {queryConnectedVideoApps?.items &&
+            queryConnectedVideoApps?.items.map((item) => {
+              if (item.slug === "daily-video") return null; // we dont want to show daily here as it is installed by default
+              return (
+                <li key={item.name}>
+                  {item.name && item.logo && (
+                    <AppConnectionItem
+                      type={item.type}
+                      title={item.name}
+                      description={item.description}
+                      logo={item.logo}
+                      installed={item.credentialIds.length > 0}
+                    />
+                  )}
+                </li>
+              );
+            })}
+        </List>
+      )}
+
+      {isLoading && <StepConnectionLoader />}
+      <button
+        type="button"
+        data-testid="save-video-button"
+        className={classNames(
+          "text-inverted mt-8 flex w-full flex-row justify-center rounded-md border border-black bg-black p-2 text-center text-sm",
+          !hasAnyInstalledVideoApps ? "cursor-not-allowed opacity-20" : ""
+        )}
+        disabled={!hasAnyInstalledVideoApps}
+        onClick={() => nextStep()}>
+        {t("next_step_text")}
+        <ArrowRight className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
+      </button>
+    </>
+  );
+};
+
+export { ConnectedVideoStep };
@@ -1,4 +1,3 @@
-import { ArrowRightIcon } from "@heroicons/react/solid";
 import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";

@@ -9,6 +8,7 @@ import type { TRPCClientErrorLike } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
 import { Button, Form } from "@calcom/ui";
+import { ArrowRight } from "@calcom/ui/components/icon";

 interface ISetupAvailabilityProps {
  nextStep: () => void;
@@ -81,7 +81,7 @@ const SetupAvailability = (props: ISetupAvailabilityProps) => {
          type="submit"
          className="mt-2 w-full justify-center p-2 text-sm sm:mt-8"
          disabled={availabilityForm.formState.isSubmitting}>
-          {t("next_step_text")} <ArrowRightIcon className="ml-2 h-4 w-4 self-center" />
+          {t("next_step_text")} <ArrowRight className="ml-2 h-4 w-4 self-center" />
        </Button>
      </div>
    </Form>
@@ -1,4 +1,3 @@
-import { ArrowRightIcon } from "@heroicons/react/solid";
 import { useRouter } from "next/router";
 import type { FormEvent } from "react";
 import { useRef, useState } from "react";
@@ -11,6 +10,7 @@ import turndown from "@calcom/lib/turndownService";
 import { trpc } from "@calcom/trpc/react";
 import { Button, Editor, ImageUploader, Label, showToast } from "@calcom/ui";
 import { Avatar } from "@calcom/ui";
+import { ArrowRight } from "@calcom/ui/components/icon";

 import type { IOnboardingPageProps } from "../../../pages/getting-started/[[...step]]";

@@ -159,7 +159,7 @@ const UserProfile = (props: IUserProfileProps) => {
        type="submit"
        className="text-inverted mt-8 flex w-full flex-row justify-center rounded-md border border-black bg-black p-2 text-center text-sm">
        {t("finish")}
-        <ArrowRightIcon className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
+        <ArrowRight className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
      </Button>
    </form>
  );
@@ -1,4 +1,3 @@
-import { ArrowRightIcon } from "@heroicons/react/outline";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -10,6 +9,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { trpc } from "@calcom/trpc/react";
 import { Button, TimezoneSelect } from "@calcom/ui";
+import { ArrowRight } from "@calcom/ui/components/icon";

 import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";

@@ -116,7 +116,7 @@ const UserSettings = (props: IUserSettingsProps) => {
        className="mt-8 flex w-full flex-row justify-center"
        disabled={mutation.isLoading}>
        {t("next_step_text")}
-        <ArrowRightIcon className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
+        <ArrowRight className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
      </Button>
    </form>
  );
@@ -1,85 +0,0 @@
-import { useMutation } from "@tanstack/react-query";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc/react";
-import { Badge, showToast, Switch } from "@calcom/ui";
-import { ArrowLeft } from "@calcom/ui/components/icon";
-
-export function CalendarSwitch(props: {
-  type: string;
-  externalId: string;
-  title: string;
-  defaultSelected: boolean;
-  isSelected: boolean;
-}) {
-  const { t } = useLocale();
-
-  const utils = trpc.useContext();
-
-  const mutation = useMutation<
-    unknown,
-    unknown,
-    {
-      isOn: boolean;
-    }
-  >(
-    async ({ isOn }) => {
-      const body = {
-        integration: props.type,
-        externalId: props.externalId,
-      };
-      if (isOn) {
-        const res = await fetch("/api/availability/calendar", {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(body),
-        });
-        if (!res.ok) {
-          throw new Error("Something went wrong");
-        }
-      } else {
-        const res = await fetch("/api/availability/calendar", {
-          method: "DELETE",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(body),
-        });
-
-        if (!res.ok) {
-          throw new Error("Something went wrong");
-        }
-      }
-    },
-    {
-      async onSettled() {
-        await utils.viewer.integrations.invalidate();
-      },
-      onError() {
-        showToast(`Something went wrong when toggling "${props.title}""`, "error");
-      },
-    }
-  );
-  return (
-    <div className="flex space-x-2 py-1 rtl:space-x-reverse">
-      <Switch
-        key={props.externalId}
-        name="enabled"
-        label={props.title}
-        defaultChecked={props.isSelected}
-        onCheckedChange={(isOn: boolean) => {
-          mutation.mutate({ isOn });
-        }}
-      />
-      {props.defaultSelected && (
-        <Badge variant="gray">
-          <div className="flex items-center">
-            <ArrowLeft className="text-default mr-1 h-4 w-4" /> {t("adding_events_to")}
-          </div>
-        </Badge>
-      )}
-    </div>
-  );
-}
@@ -31,7 +31,7 @@ const Member = ({ member, teamName }: { member: MemberType; teamName: string | n
            {!isBioEmpty ? (
              <>
                <div
-                  className=" text-subtle text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                  className="  text-subtle break-words text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                  dangerouslySetInnerHTML={{ __html: md.render(member.bio || "") }}
                />
              </>
@@ -1,4 +1,3 @@
-import { StarIcon as StarIconSolid } from "@heroicons/react/solid";
 import classNames from "classnames";
 import { debounce, noop } from "lodash";
 import { useRouter } from "next/router";
@@ -15,6 +14,7 @@ import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
 import { Button, Dialog, DialogClose, DialogContent, Input, Label } from "@calcom/ui";
+import { Star as StarSolid } from "@calcom/ui/components/icon";
 import { Check, Edit2, ExternalLink } from "@calcom/ui/components/icon";

 export enum UsernameChangeStatusEnum {
@@ -230,12 +230,16 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
          <div className="absolute top-0 right-2 flex flex-row">
            <span
              className={classNames(
-                "mx-2 py-1",
-                isInputUsernamePremium ? "text-orange-400" : "",
+                "mx-2 py-2",
+                isInputUsernamePremium ? "text-transparent" : "",
                usernameIsAvailable ? "" : ""
              )}>
-              {isInputUsernamePremium ? <StarIconSolid className="mt-[2px] h-4 w-4" /> : <></>}
-              {!isInputUsernamePremium && usernameIsAvailable ? <Check className="mt-2 h-4 w-4" /> : <></>}
+              {isInputUsernamePremium ? <StarSolid className="mt-[2px] h-4 w-4 fill-orange-400" /> : <></>}
+              {!isInputUsernamePremium && usernameIsAvailable ? (
+                <Check className="mt-[2px] h-4 w-4" />
+              ) : (
+                <></>
+              )}
            </span>
          </div>
        </div>
@@ -25,7 +25,7 @@ const OptionWithIcon = ({ icon, label }: { icon?: string; label: string }) => {
          src={icon}
          alt="cover"
          // invert all the icons except app icons
-          className={cx("h-3.5 w-3.5", icon && !icon.startsWith("/api") && "dark:invert")}
+          className={cx("h-3.5 w-3.5", icon && !icon.startsWith("/app-store") && "dark:invert")}
        />
      )}
      <span className={classNames("text-sm font-medium")}>{label}</span>
@@ -26,7 +26,10 @@ const I18nextAdapter = appWithTranslation<NextJsAppProps<SSRConfig> & { children
 );

 // Workaround for https://github.com/vercel/next.js/issues/8592
-export type AppProps = Omit<NextAppProps<WithNonceProps & Record<string, unknown>>, "Component"> & {
+export type AppProps = Omit<
+  NextAppProps<WithNonceProps & { themeBasis?: string } & Record<string, unknown>>,
+  "Component"
+> & {
  Component: NextAppProps["Component"] & {
    requiresLicense?: boolean;
    isThemeSupported?: boolean;
@@ -72,58 +75,21 @@ const enum ThemeSupport {
  Booking = "userConfigured",
 }

-const CalcomThemeProvider = (
-  props: PropsWithChildren<
-    WithNonceProps & {
-      isBookingPage?: boolean | ((arg: { router: NextRouter }) => boolean);
-      isThemeSupported?: boolean;
-    }
-  >
-) => {
-  // We now support the inverse of how we handled it in the past. Setting this to false will disable theme.
-  // undefined or true means we use system theme
+type CalcomThemeProps = PropsWithChildren<
+  Pick<AppProps["pageProps"], "nonce" | "themeBasis"> &
+    Pick<AppProps["Component"], "isBookingPage" | "isThemeSupported">
+>;
+const CalcomThemeProvider = (props: CalcomThemeProps) => {
  const router = useRouter();
-  const isBookingPage = (() => {
-    if (typeof props.isBookingPage === "function") {
-      return props.isBookingPage({ router: router });
-    }

-    return props.isBookingPage;
-  })();
-
-  const themeSupport = isBookingPage
-    ? ThemeSupport.Booking
-    : // if isThemeSupported is explicitly false, we don't use theme there
-    props.isThemeSupported === false
-    ? ThemeSupport.None
-    : ThemeSupport.App;
-
-  const forcedTheme = themeSupport === ThemeSupport.None ? "light" : undefined;
  // Use namespace of embed to ensure same namespaced embed are displayed with same theme. This allows different embeds on the same website to be themed differently
  // One such example is our Embeds Demo and Testing page at http://localhost:3100
  // Having `getEmbedNamespace` defined on window before react initializes the app, ensures that embedNamespace is available on the first mount and can be used as part of storageKey
  const embedNamespace = typeof window !== "undefined" ? window.getEmbedNamespace() : null;
  const isEmbedMode = typeof embedNamespace === "string";

-  const storageKey = isEmbedMode
-    ? `embed-theme-${embedNamespace}`
-    : themeSupport === ThemeSupport.App
-    ? "app-theme"
-    : themeSupport === ThemeSupport.Booking
-    ? "booking-theme"
-    : undefined;
-
  return (
-    <ThemeProvider
-      nonce={props.nonce}
-      enableColorScheme={false}
-      enableSystem={themeSupport !== ThemeSupport.None}
-      forcedTheme={forcedTheme}
-      storageKey={storageKey}
-      // next-themes doesn't listen to changes on storageKey. So we need to force a re-render when storageKey changes
-      // This is how login to dashboard soft navigation changes theme from light to dark
-      key={storageKey}
-      attribute="class">
+    <ThemeProvider {...getThemeProviderProps({ props, isEmbedMode, embedNamespace, router })}>
      {/* Embed Mode can be detected reliably only on client side here as there can be static generated pages as well which can't determine if it's embed mode at backend */}
      {/* color-scheme makes background:transparent not work in iframe which is required by embed. */}
      {typeof window !== "undefined" && !isEmbedMode && (
@@ -140,6 +106,100 @@ const CalcomThemeProvider = (
  );
 };

+/**
+ * The most important job for this fn is to generate correct storageKey for theme persistenc.
+ * `storageKey` is important because that key is listened for changes(using [`storage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event) event) and any pages opened will change it's theme based on that(as part of next-themes implementation).
+ * Choosing the right storageKey avoids theme flickering caused by another page using different theme
+ * So, we handle all the cases here namely,
+ * - Both Booking Pages, /free/30min and /pro/30min but configured with different themes but being operated together.
+ * - Embeds using different namespace. They can be completely themed different on the same page.
+ * - Embeds using the same namespace but showing different cal.com links with different themes
+ * - Embeds using the same namespace and showing same cal.com links with different themes(Different theme is possible for same cal.com link in case of embed because of theme config available in embed)
+ * - App has different theme then Booking Pages.
+ *
+ * All the above cases have one thing in common, which is the origin and thus localStorage is shared and thus `storageKey` is critical to avoid theme flickering.
+ *
+ * Some things to note:
+ * - There is a side effect of so many factors in `storageKey` that many localStorage keys will be created if a user goes through all these scenarios(e.g like booking a lot of different users)
+ * - Some might recommend disabling localStorage persistence but that doesn't give good UX as then we would default to light theme always for a few seconds before switching to dark theme(if that's the user's preference).
+ * - We can't disable [`storage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event) event handling as well because changing theme in one tab won't change the theme without refresh in other tabs. That's again a bad UX
+ * - Theme flickering becomes infinitely ongoing in case of embeds because of the browser's delay in processing `storage` event within iframes. Consider two embeds simulatenously opened with pages A and B. Note the timeline and keep in mind that it happened
+ *  because 'setItem(A)' and 'Receives storageEvent(A)' allowed executing setItem(B) in b/w because of the delay.
+ *    - t1 -> setItem(A) & Fires storageEvent(A) - On Page A) - Current State(A)
+ *    - t2 -> setItem(B) & Fires storageEvent(B) - On Page B) - Current State(B)
+ *    - t3 -> Receives storageEvent(A) & thus setItem(A) & thus fires storageEvent(A) (On Page B) - Current State(A)
+ *    - t4 -> Receives storageEvent(B) & thus setItem(B) & thus fires storageEvent(B) (On Page A) - Current State(B)
+ *    - ... and so on ...
+ */
+function getThemeProviderProps({
+  props,
+  isEmbedMode,
+  embedNamespace,
+  router,
+}: {
+  props: Omit<CalcomThemeProps, "children">;
+  isEmbedMode: boolean;
+  embedNamespace: string | null;
+  router: NextRouter;
+}) {
+  const isBookingPage = (() => {
+    if (typeof props.isBookingPage === "function") {
+      return props.isBookingPage({ router: router });
+    }
+    return props.isBookingPage;
+  })();
+
+  const themeSupport = isBookingPage
+    ? ThemeSupport.Booking
+    : // if isThemeSupported is explicitly false, we don't use theme there
+    props.isThemeSupported === false
+    ? ThemeSupport.None
+    : ThemeSupport.App;
+
+  const isBookingPageThemSupportRequired = themeSupport === ThemeSupport.Booking;
+  const themeBasis = props.themeBasis;
+
+  if ((isBookingPageThemSupportRequired || isEmbedMode) && !themeBasis) {
+    console.warn(
+      "`themeBasis` is required for booking page theme support. Not providing it will cause theme flicker."
+    );
+  }
+
+  const appearanceIdSuffix = themeBasis ? ":" + themeBasis : "";
+  const forcedTheme = themeSupport === ThemeSupport.None ? "light" : undefined;
+  let embedExplicitlySetThemeSuffix = "";
+
+  if (typeof window !== "undefined") {
+    const embedTheme = window.getEmbedTheme();
+    if (embedTheme) {
+      embedExplicitlySetThemeSuffix = ":" + embedTheme;
+    }
+  }
+
+  const storageKey = isEmbedMode
+    ? // Same Namespace, Same Organizer but different themes would still work seamless and not cause theme flicker
+      // Even though it's recommended to use different namespaces when you want to theme differently on the same page but if the embeds are on different pages, the problem can still arise
+      `embed-theme-${embedNamespace}${appearanceIdSuffix}${embedExplicitlySetThemeSuffix}`
+    : themeSupport === ThemeSupport.App
+    ? "app-theme"
+    : isBookingPageThemSupportRequired
+    ? `booking-theme${appearanceIdSuffix}`
+    : undefined;
+
+  return {
+    storageKey,
+    forcedTheme,
+    themeSupport,
+    nonce: props.nonce,
+    enableColorScheme: false,
+    enableSystem: themeSupport !== ThemeSupport.None,
+    // next-themes doesn't listen to changes on storageKey. So we need to force a re-render when storageKey changes
+    // This is how login to dashboard soft navigation changes theme from light to dark
+    key: storageKey,
+    attribute: "class",
+  };
+}
+
 function FeatureFlagsProvider({ children }: { children: React.ReactNode }) {
  const flags = useFlags();
  return <FeatureProvider value={flags}>{children}</FeatureProvider>;
@@ -157,6 +217,7 @@ const AppProviders = (props: AppPropsWithChildren) => {
          <TooltipProvider>
            {/* color-scheme makes background:transparent not work which is required by embed. We need to ensure next-theme adds color-scheme to `body` instead of `html`(https://github.com/pacocoursey/next-themes/blob/main/src/index.tsx#L74). Once that's done we can enable color-scheme support */}
            <CalcomThemeProvider
+              themeBasis={props.pageProps.themeBasis}
              nonce={props.pageProps.nonce}
              isThemeSupported={props.Component.isThemeSupported}
              isBookingPage={props.Component.isBookingPage}>
@@ -105,19 +105,12 @@ const nextConfig = {
    "@calcom/trpc",
    "@calcom/ui",
    "lucide-react",
-    "react-timezone-select",
  ],
  modularizeImports: {
    "@calcom/ui/components/icon": {
      transform: "lucide-react/dist/esm/icons/{{ kebabCase member }}",
      preventFullImport: true,
    },
-    "@heroicons/react/solid": {
-      transform: "@heroicons/react/solid/esm/{{ member }}",
-    },
-    "@heroicons/react/outline": {
-      transform: "@heroicons/react/outline/esm/{{ member }}",
-    },
    "@calcom/features/insights/components": {
      transform: "@calcom/features/insights/components/{{member}}",
      skipDefaultConversion: true,
@@ -1,6 +1,6 @@
 {
  "name": "@calcom/web",
-  "version": "2.8.12",
+  "version": "2.9.1",
  "private": true,
  "scripts": {
    "analyze": "ANALYZE=true next build",
@@ -41,7 +41,6 @@
    "@daily-co/daily-js": "^0.37.0",
    "@formkit/auto-animate": "^1.0.0-beta.5",
    "@glidejs/glide": "^3.5.2",
-    "@heroicons/react": "^1.0.6",
    "@hookform/error-message": "^2.0.0",
    "@hookform/resolvers": "^2.9.7",
    "@next-auth/prisma-adapter": "^1.0.4",
@@ -113,14 +112,13 @@
    "react-phone-number-input": "^3.2.7",
    "react-schemaorg": "^2.0.0",
    "react-select": "^5.7.0",
-    "react-timezone-select": "^1.5.1",
+    "react-timezone-select": "^1.4.0",
    "react-use-intercom": "1.5.1",
-    "remark": "^14.0.2",
+    "remove-markdown": "^0.5.0",
    "rrule": "^2.7.1",
    "sanitize-html": "^2.10.0",
    "schema-dts": "^1.1.0",
    "short-uuid": "^4.2.0",
-    "strip-markdown": "^5.0.0",
    "stripe": "^9.16.0",
    "superjson": "1.9.1",
    "tailwindcss-radix": "^2.6.0",
@@ -153,6 +151,7 @@
    "@types/qrcode": "^1.4.3",
    "@types/react": "18.0.26",
    "@types/react-phone-number-input": "^3.0.14",
+    "@types/remove-markdown": "^0.3.1",
    "@types/sanitize-html": "^2.9.0",
    "@types/stripe": "^8.0.417",
    "@types/uuid": "8.3.1",
@@ -1,4 +1,3 @@
-import { BadgeCheckIcon } from "@heroicons/react/solid";
 import classNames from "classnames";
 import type { GetServerSidePropsContext } from "next";
 import Link from "next/link";
@@ -23,11 +22,12 @@ import defaultEvents, {
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
+import { stripMarkdown } from "@calcom/lib/stripMarkdown";
 import prisma from "@calcom/prisma";
 import { baseEventTypeSelect } from "@calcom/prisma/selects";
 import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 import { Avatar, AvatarGroup, HeadSeo } from "@calcom/ui";
-import { ArrowRight } from "@calcom/ui/components/icon";
+import { Verified, ArrowRight } from "@calcom/ui/components/icon";

 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 import type { EmbedProps } from "@lib/withEmbedSsr";
@@ -37,7 +37,16 @@ import PageWrapper from "@components/PageWrapper";
 import { ssrInit } from "@server/lib/ssr";

 export default function User(props: inferSSRProps<typeof getServerSideProps> & EmbedProps) {
-  const { users, profile, eventTypes, isDynamicGroup, dynamicNames, dynamicUsernames, isSingleUser } = props;
+  const {
+    users,
+    profile,
+    eventTypes,
+    isDynamicGroup,
+    dynamicNames,
+    dynamicUsernames,
+    isSingleUser,
+    markdownStrippedBio,
+  } = props;
  const [user] = users; //To be used when we only have a single user, not dynamic group
  useTheme(user.theme);
  const { t } = useLocale();
@@ -107,11 +116,9 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
    <>
      <HeadSeo
        title={isDynamicGroup ? dynamicNames.join(", ") : nameOrUsername}
-        description={
-          isDynamicGroup ? `Book events with ${dynamicUsernames.join(", ")}` : (user.bio as string) || ""
-        }
+        description={isDynamicGroup ? `Book events with ${dynamicUsernames.join(", ")}` : markdownStrippedBio}
        meeting={{
-          title: isDynamicGroup ? "" : `${user.bio}`,
+          title: isDynamicGroup ? "" : markdownStrippedBio,
          profile: { name: `${profile.name}`, image: null },
          users: isDynamicGroup
            ? dynamicUsernames.map((username, index) => ({ username, name: dynamicNames[index] }))
@@ -131,12 +138,14 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
              <Avatar imageSrc={user.avatar} size="xl" alt={nameOrUsername} />
              <h1 className="font-cal text-emphasis mb-1 text-3xl">
                {nameOrUsername}
-                {user.verified && <BadgeCheckIcon className=" mx-1 -mt-1 inline h-6 w-6 text-blue-500" />}
+                {user.verified && (
+                  <Verified className=" mx-1 -mt-1 inline h-6 w-6 fill-blue-500 text-white dark:text-black" />
+                )}
              </h1>
              {!isBioEmpty && (
                <>
                  <div
-                    className="  text-subtle text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                    className="  text-subtle break-words text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                    dangerouslySetInnerHTML={{ __html: props.safeBio }}
                  />
                </>
@@ -342,11 +351,14 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>

  const safeBio = markdownToSafeHTML(user.bio) || "";

+  const markdownStrippedBio = stripMarkdown(user?.bio || "");
  return {
    props: {
      users,
      safeBio,
      profile,
+      // Dynamic group has no theme preference right now. It uses system theme.
+      themeBasis: isDynamicGroup ? null : user.username,
      user: {
        emailMd5: crypto.createHash("md5").update(user.email).digest("hex"),
      },
@@ -361,6 +373,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
      dynamicNames,
      dynamicUsernames,
      isSingleUser,
+      markdownStrippedBio,
    },
  };
 };
@@ -177,6 +177,8 @@ async function getUserPageProps(context: GetStaticPropsContext) {
        slug: `${user.username}/${eventType.slug}`,
        image: `${WEBAPP_URL}/${user.username}/avatar.png`,
      },
+      // Dynamic group has no theme preference right now. It uses system theme.
+      themeBasis: user.username,
      away: user?.away,
      isDynamic: false,
      trpcState: ssg.dehydrate(),
@@ -307,6 +309,8 @@ async function getDynamicGroupPageProps(context: GetStaticPropsContext) {
    props: {
      eventType: eventTypeObject,
      profile,
+      // Dynamic group has no theme preference right now. It uses system theme.
+      themeBasis: null,
      isDynamic: true,
      away: false,
      trpcState: ssg.dehydrate(),
@@ -293,6 +293,8 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
    props: {
      away: user.away,
      profile,
+      // Dynamic group has no theme preference right now. It uses system theme.
+      themeBasis: isDynamicGroupBooking ? null : user.username,
      eventType: eventTypeObject,
      booking,
      currentSlotBooking: currentSlotBooking,
@@ -23,6 +23,7 @@ class MyDocument extends Document<Props> {
      // If x-csp not set by gSSP, then it's initialPropsOnly
      setHeader(ctx, "x-csp", "initialPropsOnly");
    }
+
    const asPath = ctx.asPath || "";
    // Use a dummy URL as default so that URL parsing works for relative URLs as well. We care about searchParams and pathname only
    const parsedUrl = new URL(asPath, "https://dummyurl");
@@ -45,7 +46,8 @@ class MyDocument extends Document<Props> {
          <link rel="manifest" href="/site.webmanifest" />
          <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000" />
          <meta name="msapplication-TileColor" content="#ff0000" />
-          <meta name="theme-color" content="var(--cal-bg)" />
+          <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f9fafb" />
+          <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1C1C1C" />
        </Head>

        <body
@@ -4,7 +4,6 @@ import { z } from "zod";
 import { symmetricDecrypt } from "@calcom/lib/crypto";
 import { defaultResponder } from "@calcom/lib/server";
 import prisma from "@calcom/prisma";
-import { UserPermissionRole } from "@calcom/prisma/enums";
 import { TRPCError } from "@calcom/trpc/server";
 import { createContext } from "@calcom/trpc/server/createContext";
 import { viewerRouter } from "@calcom/trpc/server/routers/viewer/_router";
@@ -27,32 +26,18 @@ const decryptedSchema = z.object({

 async function handler(req: NextApiRequest, res: NextApiResponse<Response>) {
  const { action, token, reason } = querySchema.parse(req.query);
-  const { bookingUid, userId } = decryptedSchema.parse(
+  const { bookingUid } = decryptedSchema.parse(
    JSON.parse(symmetricDecrypt(decodeURIComponent(token), process.env.CALENDSO_ENCRYPTION_KEY || ""))
  );

-  /** We shape the session as required by tRPC router */
-  async function sessionGetter() {
-    return {
-      user: {
-        id: userId,
-        username: "" /* Not used in this context */,
-        role: UserPermissionRole.USER,
-      },
-      hasValidLicense: true,
-      expires: "" /* Not used in this context */,
-    };
-  }
-
  const booking = await prisma.booking.findUniqueOrThrow({
    where: { uid: bookingUid },
  });

  try {
    /** @see https://trpc.io/docs/server-side-calls */
-    const ctx = await createContext({ req, res }, sessionGetter);
+    const ctx = await createContext({ req, res });
    const caller = viewerRouter.createCaller({ ...ctx, req, res });
-
    await caller.bookings.confirm({
      bookingId: booking.id,
      recurringEventId: booking.recurringEventId || undefined,
@@ -1,3 +1,4 @@
+import type { WebhookTriggerEvents } from "@prisma/client";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { z } from "zod";

@@ -5,6 +6,8 @@ import { DailyLocationType } from "@calcom/app-store/locations";
 import { getDownloadLinkOfCalVideoByRecordingId } from "@calcom/core/videoClient";
 import { sendDailyVideoRecordingEmails } from "@calcom/emails";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import getWebhooks from "@calcom/features/webhooks/lib/getWebhooks";
+import sendPayload from "@calcom/features/webhooks/lib/sendPayload";
 import { IS_SELF_HOSTED } from "@calcom/lib/constants";
 import { defaultHandler } from "@calcom/lib/server";
 import { getTranslation } from "@calcom/lib/server/i18n";
@@ -20,6 +23,38 @@ const downloadLinkSchema = z.object({
  download_link: z.string(),
 });

+const triggerWebhook = async ({
+  evt,
+  downloadLink,
+  booking,
+}: {
+  evt: CalendarEvent;
+  downloadLink: string;
+  booking: {
+    userId: number | undefined;
+    eventTypeId: number | null;
+  };
+}) => {
+  const eventTrigger: WebhookTriggerEvents = "RECORDING_READY";
+  // Send Webhook call if hooked to BOOKING.RECORDING_READY
+  const subscriberOptions = {
+    userId: booking.userId ?? 0,
+    eventTypeId: booking.eventTypeId ?? 0,
+    triggerEvent: eventTrigger,
+  };
+  const webhooks = await getWebhooks(subscriberOptions);
+
+  const promises = webhooks.map((webhook) =>
+    sendPayload(webhook.secret, eventTrigger, new Date().toISOString(), webhook, {
+      ...evt,
+      downloadLink,
+    }).catch((e) => {
+      console.error(`Error executing webhook for event: ${eventTrigger}, URL: ${webhook.subscriberUrl}`, e);
+    })
+  );
+  await Promise.all(promises);
+};
+
 async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (!process.env.SENDGRID_API_KEY || !process.env.SENDGRID_EMAIL) {
    return res.status(405).json({ message: "No SendGrid API key or email" });
@@ -51,6 +86,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
        uid: true,
        location: true,
        isRecorded: true,
+        eventTypeId: true,
        user: {
          select: {
            id: true,
@@ -105,31 +141,36 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
      },
    });

+    const response = await getDownloadLinkOfCalVideoByRecordingId(recordingId);
+    const downloadLinkResponse = downloadLinkSchema.parse(response);
+    const downloadLink = downloadLinkResponse.download_link;
+
+    const evt: CalendarEvent = {
+      type: booking.title,
+      title: booking.title,
+      description: booking.description || undefined,
+      startTime: booking.startTime.toISOString(),
+      endTime: booking.endTime.toISOString(),
+      organizer: {
+        email: booking.user?.email || "Email-less",
+        name: booking.user?.name || "Nameless",
+        timeZone: booking.user?.timeZone || "Europe/London",
+        language: { translate: t, locale: booking?.user?.locale ?? "en" },
+      },
+      attendees: attendeesList,
+      uid: booking.uid,
+    };
+
+    await triggerWebhook({
+      evt,
+      downloadLink,
+      booking: { userId: booking?.user?.id, eventTypeId: booking.eventTypeId },
+    });
+
    const isSendingEmailsAllowed = IS_SELF_HOSTED || session?.user?.belongsToActiveTeam;

    // send emails to all attendees only when user has team plan
    if (isSendingEmailsAllowed) {
-      const response = await getDownloadLinkOfCalVideoByRecordingId(recordingId);
-
-      const downloadLinkResponse = downloadLinkSchema.parse(response);
-      const downloadLink = downloadLinkResponse.download_link;
-
-      const evt: CalendarEvent = {
-        type: booking.title,
-        title: booking.title,
-        description: booking.description || undefined,
-        startTime: booking.startTime.toISOString(),
-        endTime: booking.endTime.toISOString(),
-        organizer: {
-          email: booking.user?.email || "Email-less",
-          name: booking.user?.name || "Nameless",
-          timeZone: booking.user?.timeZone || "Europe/London",
-          language: { translate: t, locale: booking?.user?.locale ?? "en" },
-        },
-        attendees: attendeesList,
-        uid: booking.uid,
-      };
-
      await sendDailyVideoRecordingEmails(evt, downloadLink);
      return res.status(200).json({ message: "Success" });
    }
@@ -4,7 +4,6 @@ import type { SatoriOptions } from "satori";
 import { z } from "zod";

 import { Meeting, App, Generic } from "@calcom/lib/OgImages";
-import { md } from "@calcom/lib/markdownIt";

 const calFont = fetch(new URL("../../../../public/fonts/cal.ttf", import.meta.url)).then((res) =>
  res.arrayBuffer()
@@ -75,12 +74,10 @@ export default async function handler(req: NextApiRequest) {
        imageType,
      });

-      const title_ = md.render(title).replace(/(<([^>]+)>)/gi, "");
-
      const img = new ImageResponse(
        (
          <Meeting
-            title={title_}
+            title={title}
            profile={{ name: meetingProfileName, image: meetingImage }}
            users={names.map((name, index) => ({ name, username: usernames[index] }))}
          />
@@ -1,83 +0,0 @@
-/**
- * This file contains tRPC's HTTP response handler
- */
-import { z } from "zod";
-
-import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
-import * as trpcNext from "@calcom/trpc/server/adapters/next";
-import { createContext as createTrpcContext } from "@calcom/trpc/server/createContext";
-import { appRouter } from "@calcom/trpc/server/routers/_app";
-
-export default trpcNext.createNextApiHandler({
-  router: appRouter,
-  /**
-   * @link https://trpc.io/docs/context
-   */
-  createContext: ({ req, res }) => {
-    const sessionGetter = () => getServerSession({ req, res });
-
-    return createTrpcContext({ req, res }, sessionGetter);
-  },
-  /**
-   * @link https://trpc.io/docs/error-handling
-   */
-  onError({ error }) {
-    if (error.code === "INTERNAL_SERVER_ERROR") {
-      // send to bug reporting
-      console.error("Something went wrong", error);
-    }
-  },
-  /**
-   * Enable query batching
-   */
-  batching: {
-    enabled: true,
-  },
-  /**
-   * @link https://trpc.io/docs/caching#api-response-caching
-   */
-  responseMeta({ ctx, paths, type, errors }) {
-    // Some helpers relevant to this function only
-    const ONE_DAY_IN_SECONDS = 60 * 60 * 24;
-    // assuming you have all your public routes with the keyword `public` in them
-    const allPublic = paths && paths.every((path) => path.startsWith("viewer.public."));
-    // checking that no procedures errored
-    const allOk = errors.length === 0;
-    // checking we're doing a query request
-    const isQuery = type === "query";
-    const noHeaders = {};
-
-    // We cannot set headers on SSG queries
-    if (!ctx?.res) return noHeaders;
-
-    const defaultHeaders: Record<"headers", Record<string, string>> = {
-      headers: {},
-    };
-
-    const timezone = z.string().safeParse(ctx.req?.headers["x-vercel-ip-timezone"]);
-    if (timezone.success) defaultHeaders.headers["x-cal-timezone"] = timezone.data;
-
-    // We need all these conditions to be true to set cache headers
-    if (!(allPublic && allOk && isQuery)) return defaultHeaders;
-
-    // No cache by default
-    defaultHeaders.headers["cache-control"] = `no-cache`;
-
-    // Our cache can change depending on our current paths value. Since paths is an array,
-    // we want to create a map that can match potential paths with their desired cache value
-    const cacheRules = {
-      "viewer.public.session": `no-cache`,
-      "viewer.public.i18n": `no-cache`,
-      // Revalidation time here should be 1 second, per https://github.com/calcom/cal.com/pull/6823#issuecomment-1423215321
-      "viewer.public.slots.getSchedule": `no-cache`, // FIXME
-      "viewer.public.cityTimezones": `max-age=${ONE_DAY_IN_SECONDS}, stale-while-revalidate`,
-    } as const;
-
-    // Find which element above is an exact match for this group of paths
-    const matchedPath = paths.find((v) => v in cacheRules) as keyof typeof cacheRules;
-
-    if (matchedPath) defaultHeaders.headers["cache-control"] = cacheRules[matchedPath];
-
-    return defaultHeaders;
-  },
-});
@@ -0,0 +1,4 @@
+import { createNextApiHandler } from "@calcom/trpc/server/createNextApiHandler";
+import { apiKeysRouter } from "@calcom/trpc/server/routers/viewer/apiKeys/_router";
+
+export default createNextApiHandler(apiKeysRouter);
@@ -0,0 +1,4 @@
+import appRoutingForms from "@calcom/app-store/routing-forms/trpc-router";
+import { createNextApiHandler } from "@calcom/trpc/server/createNextApiHandler";
+
+export default createNextApiHandler(appRoutingForms);
@@ -0,0 +1,4 @@
+import { createNextApiHandler } from "@calcom/trpc/server/createNextApiHandler";
+import { appsRouter } from "@calcom/trpc/server/routers/viewer/apps/_router";
+
+export default createNextApiHandler(appsRouter);
@@ -0,0 +1,4 @@
+import { createNextApiHandler } from "@calcom/trpc/server/createNextApiHandler";
+import { appsRouter } from "@calcom/trpc/server/routers/viewer/apps/_router";
+
+export default createNextApiHandler(appsRouter);
@@ -0,0 +1,4 @@
+import { createNextApiHandler } from "@calcom/trpc/server/createNextApiHandler";
+import { authRouter } from "@calcom/trpc/server/routers/viewer/auth/_router";
+
+export default createNextApiHandler(authRouter);
@@ -0,0 +1,4 @@
+import { createNextApiHandler } from "@calcom/trpc/server/createNextApiHandler";
+import { availabilityRouter } from "@calcom/trpc/server/routers/viewer/availability/_router";
+
+export default createNextApiHandler(availabilityRouter);
@@ -0,0 +1,4 @@
+import { createNextApiHandler } from "@calcom/trpc/server/createNextApiHandler";
+import { bookingsRouter } from "@calcom/trpc/server/routers/viewer/bookings/_router";
+
+export default createNextApiHandler(bookingsRouter);
@@ -0,0 +1,4 @@
+import { createNextApiHandler } from "@calcom/trpc/server/createNextApiHandler";
+import { deploymentSetupRouter } from "@calcom/trpc/server/routers/viewer/deploymentSetup/_router";
+
+export default createNextApiHandler(deploymentSetupRouter);
@@ -0,0 +1,4 @@
+import ethRouter from "@calcom/app-store/rainbow/trpc/router";
+import { createNextApiHandler } from "@calcom/trpc/server/createNextApiHandler";
+
+export default createNextApiHandler(ethRouter);
@@ -0,0 +1,4 @@
+import { createNextApiHandler } from "@calcom/trpc/server/createNextApiHandler";
+import { eventTypesRouter } from "@calcom/trpc/server/routers/viewer/eventTypes/_router";
+
+export default createNextApiHandler(eventTypesRouter);
@@ -0,0 +1,4 @@
+import { featureFlagRouter } from "@calcom/features/flags/server/router";
+import { createNextApiHandler } from "@calcom/trpc/server/createNextApiHandler";
+
+export default createNextApiHandler(featureFlagRouter);
@@ -0,0 +1,4 @@
+import { insightsRouter } from "@calcom/features/insights/server/trpc-router";
+import { createNextApiHandler } from "@calcom/trpc/server/createNextApiHandler";
+
+export default createNextApiHandler(insightsRouter);
@@ -0,0 +1,4 @@
+import { createNextApiHandler } from "@calcom/trpc/server/createNextApiHandler";
+import { paymentsRouter } from "@calcom/trpc/server/routers/viewer/payments/_router";
+
+export default createNextApiHandler(paymentsRouter);
@@ -0,0 +1,4 @@
+import { createNextApiHandler } from "@calcom/trpc/server/createNextApiHandler";
+import { publicViewerRouter } from "@calcom/trpc/server/routers/publicViewer/_router";
+
+export default createNextApiHandler(publicViewerRouter, true);
@@ -0,0 +1,4 @@
+import { createNextApiHandler } from "@calcom/trpc/server/createNextApiHandler";
+import { ssoRouter } from "@calcom/trpc/server/routers/viewer/sso/_router";
+
+export default createNextApiHandler(ssoRouter);
@@ -0,0 +1,4 @@
+import { createNextApiHandler } from "@calcom/trpc/server/createNextApiHandler";
+import { slotsRouter } from "@calcom/trpc/server/routers/viewer/slots/_router";
+
+export default createNextApiHandler(slotsRouter);
@@ -0,0 +1,4 @@
+import { createNextApiHandler } from "@calcom/trpc/server/createNextApiHandler";
+import { viewerTeamsRouter } from "@calcom/trpc/server/routers/viewer/teams/_router";
+
+export default createNextApiHandler(viewerTeamsRouter);
@@ -0,0 +1,4 @@
+import { userAdminRouter } from "@calcom/features/ee/users/server/trpc-router";
+import { createNextApiHandler } from "@calcom/trpc/server/createNextApiHandler";
+
+export default createNextApiHandler(userAdminRouter);
@@ -0,0 +1,4 @@
+import { createNextApiHandler } from "@calcom/trpc/server/createNextApiHandler";
+import { loggedInViewerRouter } from "@calcom/trpc/server/routers/loggedInViewer/_router";
+
+export default createNextApiHandler(loggedInViewerRouter);
@@ -0,0 +1,4 @@
+import { createNextApiHandler } from "@calcom/trpc/server/createNextApiHandler";
+import { webhookRouter } from "@calcom/trpc/server/routers/viewer/webhook/_router";
+
+export default createNextApiHandler(webhookRouter);
@@ -0,0 +1,4 @@
+import { createNextApiHandler } from "@calcom/trpc/server/createNextApiHandler";
+import { workflowsRouter } from "@calcom/trpc/server/routers/viewer/workflows/_router";
+
+export default createNextApiHandler(workflowsRouter);
@@ -2,6 +2,7 @@ import fs from "fs";
 import matter from "gray-matter";
 import MarkdownIt from "markdown-it";
 import type { GetStaticPaths, GetStaticPropsContext } from "next";
+import Link from "next/link";
 import path from "path";
 import { z } from "zod";

@@ -33,7 +34,26 @@ const sourceSchema = z.object({
  }),
 });

-function SingleAppPage({ data, source }: inferSSRProps<typeof getStaticProps>) {
+function SingleAppPage(props: inferSSRProps<typeof getStaticProps>) {
+  // If it's not production environment, it would be a better idea to inform that the App is disabled.
+  if (props.isAppDisabled) {
+    if (process.env.NODE_ENV !== "production") {
+      // TODO: Improve disabled App UI. This is just a placeholder.
+      return (
+        <div className="p-2">
+          This App seems to be disabled. If you are an admin, you can enable this app from{" "}
+          <Link href="/settings/admin/apps" className="cursor-pointer text-blue-500 underline">
+            here
+          </Link>
+        </div>
+      );
+    }
+
+    // Disabled App should give 404 any ways in production.
+    return null;
+  }
+
+  const { source, data } = props;
  return (
    <App
      name={data.name}
@@ -52,6 +72,7 @@ function SingleAppPage({ data, source }: inferSSRProps<typeof getStaticProps>) {
      website={data.url}
      email={data.email}
      licenseRequired={data.licenseRequired}
+      teamsPlanRequired={data.teamsPlanRequired}
      isProOnly={data.isProOnly}
      descriptionItems={source.data?.items as string[] | undefined}
      isTemplate={data.isTemplate}
@@ -80,29 +101,43 @@ export const getStaticPaths: GetStaticPaths<{ slug: string }> = async () => {
 export const getStaticProps = async (ctx: GetStaticPropsContext) => {
  if (typeof ctx.params?.slug !== "string") return { notFound: true };

-  const app = await prisma.app.findUnique({
+  const appMeta = await getAppWithMetadata({
+    slug: ctx.params?.slug,
+  });
+
+  const appFromDb = await prisma.app.findUnique({
    where: { slug: ctx.params.slug.toLowerCase() },
  });

-  if (!app) return { notFound: true };
+  const isAppAvailableInFileSystem = appMeta;
+  const isAppDisabled = isAppAvailableInFileSystem && (!appFromDb || !appFromDb.enabled);

-  const singleApp = await getAppWithMetadata(app);
+  if (process.env.NODE_ENV !== "production" && isAppDisabled) {
+    return {
+      props: {
+        isAppDisabled: true as const,
+        data: {
+          ...appMeta,
+        },
+      },
+    };
+  }

-  if (!singleApp) return { notFound: true };
+  if (!appFromDb || !appMeta || isAppDisabled) return { notFound: true };

-  const isTemplate = singleApp.isTemplate;
-  const appDirname = path.join(isTemplate ? "templates" : "", app.dirName);
+  const isTemplate = appMeta.isTemplate;
+  const appDirname = path.join(isTemplate ? "templates" : "", appFromDb.dirName);
  const README_PATH = path.join(process.cwd(), "..", "..", `packages/app-store/${appDirname}/DESCRIPTION.md`);
  const postFilePath = path.join(README_PATH);
  let source = "";

  try {
    source = fs.readFileSync(postFilePath).toString();
-    source = source.replace(/{DESCRIPTION}/g, singleApp.description);
+    source = source.replace(/{DESCRIPTION}/g, appMeta.description);
  } catch (error) {
    /* If the app doesn't have a README we fallback to the package description */
    console.log(`No DESCRIPTION.md provided for: ${appDirname}`);
-    source = singleApp.description;
+    source = appMeta.description;
  }

  const result = matter(source);
@@ -111,8 +146,8 @@ export const getStaticProps = async (ctx: GetStaticPropsContext) => {
    data.items = data.items.map((item) => {
      if (typeof item === "string") {
        return getAppAssetFullPath(item, {
-          dirName: singleApp.dirName,
-          isTemplate: singleApp.isTemplate,
+          dirName: appMeta.dirName,
+          isTemplate: appMeta.isTemplate,
        });
      }
      return item;
@@ -120,8 +155,9 @@ export const getStaticProps = async (ctx: GetStaticPropsContext) => {
  }
  return {
    props: {
+      isAppDisabled: false as const,
      source: { content, data },
-      data: singleApp,
+      data: appMeta,
    },
  };
 };
@@ -40,7 +40,7 @@ function AppsSearch({
      className="bg-subtle !border-muted !pl-0 focus:!ring-offset-0"
      addOnLeading={<Search className="text-subtle h-4 w-4" />}
      addOnClassname="!border-muted"
-      containerClassName={classNames("focus:!ring-offset-0", className)}
+      containerClassName={classNames("focus:!ring-offset-0 m-1", className)}
      type="search"
      autoComplete="false"
      onChange={onChange}
@@ -157,10 +157,13 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
    };
  }

-  let deploymentKey = await getDeploymentKey(prisma);
+  const deploymentKey = await prisma.deployment.findUnique({
+    where: { id: 1 },
+    select: { licenseKey: true },
+  });

  // Check existant CALCOM_LICENSE_KEY env var and acccount for it
-  if (!!process.env.CALCOM_LICENSE_KEY && !deploymentKey) {
+  if (!!process.env.CALCOM_LICENSE_KEY && !deploymentKey?.licenseKey) {
    await prisma.deployment.upsert({
      where: { id: 1 },
      update: {
@@ -172,10 +175,9 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
        agreedLicenseAt: new Date(),
      },
    });
-    deploymentKey = await getDeploymentKey(prisma);
  }

-  const isFreeLicense = deploymentKey === "";
+  const isFreeLicense = (await getDeploymentKey(prisma)) === "";

  return {
    props: {
@@ -1,4 +1,3 @@
-import { CheckIcon, MailOpenIcon, ExclamationIcon } from "@heroicons/react/outline";
 import { signIn } from "next-auth/react";
 import Head from "next/head";
 import { useRouter } from "next/router";
@@ -9,6 +8,7 @@ import z from "zod";
 import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants";
 import { trpc } from "@calcom/trpc/react";
 import { Button, showToast } from "@calcom/ui";
+import { Check, MailOpen, AlertTriangle } from "@calcom/ui/components/icon";

 import Loader from "@components/Loader";
 import PageWrapper from "@components/PageWrapper";
@@ -118,11 +118,11 @@ export default function Verify() {
        <div className="m-10 flex max-w-2xl flex-col items-start border border-white p-12 text-left">
          <div className="rounded-full border border-white p-3">
            {hasPaymentFailed ? (
-              <ExclamationIcon className="text-inverted h-12 w-12 flex-shrink-0 p-0.5 font-extralight" />
+              <AlertTriangle className="text-inverted h-12 w-12 flex-shrink-0 p-0.5 font-extralight" />
            ) : sessionId ? (
-              <CheckIcon className="text-inverted h-12 w-12 flex-shrink-0 p-0.5 font-extralight" />
+              <Check className="text-inverted h-12 w-12 flex-shrink-0 p-0.5 font-extralight" />
            ) : (
-              <MailOpenIcon className="text-inverted h-12 w-12 flex-shrink-0 p-0.5 font-extralight" />
+              <MailOpen className="text-inverted h-12 w-12 flex-shrink-0 p-0.5 font-extralight" />
            )}
          </div>
          <h3 className="font-cal my-6 text-3xl font-normal">
@@ -62,7 +62,7 @@ const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
      <h3 className="text-emphasis font-medium leading-6">
        {t("date_overrides")}{" "}
        <Tooltip content={t("date_overrides_info")}>
-          <span className="inline-block">
+          <span className="inline-block align-middle">
            <Info className="h-4 w-4" />
          </span>
        </Tooltip>
@@ -188,7 +188,7 @@ export default function Availability() {
      }
      CTA={
        <div className="flex items-center justify-end">
-          <div className="hidden items-center rounded-md px-2 sm:flex sm:hover:bg-gray-100">
+          <div className="sm:hover:bg-muted hidden items-center rounded-md px-2 sm:flex">
            <Skeleton as={Label} htmlFor="hiddenSwitch" className="mt-2 cursor-pointer self-center pr-2 ">
              {t("set_to_default")}
            </Skeleton>
@@ -212,7 +212,7 @@ export default function Availability() {
                aria-label={t("delete")}
                className="hidden sm:inline"
                disabled={schedule?.isLastSchedule}
-                tooltip={t("requires_at_least_one_schedule")}
+                tooltip={schedule?.isLastSchedule ? t("requires_at_least_one_schedule") : t("delete")}
              />
            </DialogTrigger>
            <ConfirmationDialogContent
@@ -309,7 +309,7 @@ export default function Success(props: SuccessProps) {
        <div className="mt-2 ml-4 -mb-4">
          <Link
            href={allRemainingBookings ? "/bookings/recurring" : "/bookings/upcoming"}
-            className="hover:bg-subtle text-subtle dark:hover:text-inverted hover:text-default mt-2 inline-flex px-1 py-2 text-sm dark:hover:bg-transparent">
+            className="hover:bg-subtle text-subtle hover:text-default mt-2 inline-flex px-1 py-2 text-sm dark:hover:bg-transparent">
            <ChevronLeft className="h-5 w-5" /> {t("back_to_bookings")}
          </Link>
        </div>
@@ -1092,6 +1092,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {

  return {
    props: {
+      themeBasis: eventType.team ? eventType.team.slug : eventType.users[0]?.username,
      hideBranding: eventType.team ? eventType.team.hideBranding : eventType.users[0].hideBranding,
      profile,
      eventType,
@@ -160,6 +160,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
  return {
    props: {
      away: user.away,
+      themeBasis: user.username,
      isDynamicGroup: false,
      profile,
      date,
@@ -122,6 +122,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
  return {
    props: {
      profile,
+      themeBasis: user.username,
      eventType: eventTypeObject,
      booking: null,
      currentSlotBooking: null,
@@ -51,6 +51,7 @@ export type FormValues = {
  eventName: string;
  slug: string;
  length: number;
+  offsetStart: number;
  description: string;
  disableGuests: boolean;
  requiresConfirmation: boolean;
@@ -211,6 +212,7 @@ const EventTypePage = (props: EventTypeSetupProps) => {
    bookingLimits: eventType.bookingLimits || undefined,
    durationLimits: eventType.durationLimits || undefined,
    length: eventType.length,
+    offsetStart: eventType.offsetStart,
    hidden: eventType.hidden,
    periodDates: {
      startDate: periodDates.startDate,
@@ -255,6 +257,7 @@ const EventTypePage = (props: EventTypeSetupProps) => {
            )
            .optional(),
          length: z.union([z.string().transform((val) => +val), z.number()]).optional(),
+          offsetStart: z.union([z.string().transform((val) => +val), z.number()]).optional(),
          bookingFields: eventTypeBookingFields,
        })
        // TODO: Add schema for other fields later.
@@ -352,6 +352,9 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL

  const firstItem = types[0];
  const lastItem = types[types.length - 1];
+  const isManagedEventPrefix = () => {
+    return deleteDialogTypeSchedulingType === SchedulingType.MANAGED ? "_managed" : "";
+  };
  return (
    <div className="bg-default border-subtle mb-16 flex overflow-hidden rounded-md border">
      <ul ref={parent} className="divide-subtle !static w-full divide-y" data-testid="event-types">
@@ -487,21 +490,23 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                                      {t("duplicate")}
                                    </DropdownItem>
                                  </DropdownMenuItem>
-                                  <DropdownMenuItem className="outline-none">
-                                    <EmbedButton
-                                      as={DropdownItem}
-                                      type="button"
-                                      StartIcon={Code}
-                                      className="w-full rounded-none"
-                                      embedUrl={encodeURIComponent(embedLink)}>
-                                      {t("embed")}
-                                    </EmbedButton>
-                                  </DropdownMenuItem>
                                </>
                              )}
+                              {!isManagedEventType && (
+                                <DropdownMenuItem className="outline-none">
+                                  <EmbedButton
+                                    as={DropdownItem}
+                                    type="button"
+                                    StartIcon={Code}
+                                    className="w-full rounded-none"
+                                    embedUrl={encodeURIComponent(embedLink)}>
+                                    {t("embed")}
+                                  </EmbedButton>
+                                </DropdownMenuItem>
+                              )}
                              {/* readonly is only set when we are on a team - if we are on a user event type null will be the value. */}
                              {(group.metadata?.readOnly === false || group.metadata.readOnly === null) &&
-                                isManagedEventType && (
+                                !isChildrenManagedEventType && (
                                  <>
                                    <DropdownMenuSeparator />
                                    <DropdownMenuItem>
@@ -533,27 +538,31 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                    </DropdownMenuTrigger>
                    <DropdownMenuPortal>
                      <DropdownMenuContent>
-                        <DropdownMenuItem className="outline-none">
-                          <DropdownItem
-                            href={calLink}
-                            target="_blank"
-                            StartIcon={ExternalLink}
-                            className="w-full rounded-none">
-                            {t("preview")}
-                          </DropdownItem>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem className="outline-none">
-                          <DropdownItem
-                            data-testid={"event-type-duplicate-" + type.id}
-                            onClick={() => {
-                              navigator.clipboard.writeText(calLink);
-                              showToast(t("link_copied"), "success");
-                            }}
-                            StartIcon={Clipboard}
-                            className="w-full rounded-none text-left">
-                            {t("copy_link")}
-                          </DropdownItem>
-                        </DropdownMenuItem>
+                        {!isManagedEventType && (
+                          <>
+                            <DropdownMenuItem className="outline-none">
+                              <DropdownItem
+                                href={calLink}
+                                target="_blank"
+                                StartIcon={ExternalLink}
+                                className="w-full rounded-none">
+                                {t("preview")}
+                              </DropdownItem>
+                            </DropdownMenuItem>
+                            <DropdownMenuItem className="outline-none">
+                              <DropdownItem
+                                data-testid={"event-type-duplicate-" + type.id}
+                                onClick={() => {
+                                  navigator.clipboard.writeText(calLink);
+                                  showToast(t("link_copied"), "success");
+                                }}
+                                StartIcon={Clipboard}
+                                className="w-full rounded-none text-left">
+                                {t("copy_link")}
+                              </DropdownItem>
+                            </DropdownMenuItem>
+                          </>
+                        )}
                        {isNativeShare ? (
                          <DropdownMenuItem className="outline-none">
                            <DropdownItem
@@ -574,36 +583,46 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                            </DropdownItem>
                          </DropdownMenuItem>
                        ) : null}
-                        <DropdownMenuItem className="outline-none">
-                          <DropdownItem
-                            onClick={() => router.push("/event-types/" + type.id)}
-                            StartIcon={Edit}
-                            className="w-full rounded-none">
-                            {t("edit")}
-                          </DropdownItem>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem className="outline-none">
-                          <DropdownItem
-                            onClick={() => openDuplicateModal(type, group)}
-                            StartIcon={Copy}
-                            data-testid={"event-type-duplicate-" + type.id}>
-                            {t("duplicate")}
-                          </DropdownItem>
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem className="outline-none">
-                          <DropdownItem
-                            color="destructive"
-                            onClick={() => {
-                              setDeleteDialogOpen(true);
-                              setDeleteDialogTypeId(type.id);
-                              setDeleteDialogSchedulingType(type.schedulingType);
-                            }}
-                            StartIcon={Trash}
-                            className="w-full rounded-none">
-                            {t("delete")}
-                          </DropdownItem>
-                        </DropdownMenuItem>
+                        {!readOnly && (
+                          <DropdownMenuItem className="outline-none">
+                            <DropdownItem
+                              onClick={() => router.push("/event-types/" + type.id)}
+                              StartIcon={Edit}
+                              className="w-full rounded-none">
+                              {t("edit")}
+                            </DropdownItem>
+                          </DropdownMenuItem>
+                        )}
+                        {!isManagedEventType && !isChildrenManagedEventType && (
+                          <DropdownMenuItem className="outline-none">
+                            <DropdownItem
+                              onClick={() => openDuplicateModal(type, group)}
+                              StartIcon={Copy}
+                              data-testid={"event-type-duplicate-" + type.id}>
+                              {t("duplicate")}
+                            </DropdownItem>
+                          </DropdownMenuItem>
+                        )}
+                        {/* readonly is only set when we are on a team - if we are on a user event type null will be the value. */}
+                        {(group.metadata?.readOnly === false || group.metadata.readOnly === null) &&
+                          !isChildrenManagedEventType && (
+                            <>
+                              <DropdownMenuSeparator />
+                              <DropdownMenuItem className="outline-none">
+                                <DropdownItem
+                                  color="destructive"
+                                  onClick={() => {
+                                    setDeleteDialogOpen(true);
+                                    setDeleteDialogTypeId(type.id);
+                                    setDeleteDialogSchedulingType(type.schedulingType);
+                                  }}
+                                  StartIcon={Trash}
+                                  className="w-full rounded-none">
+                                  {t("delete")}
+                                </DropdownItem>
+                              </DropdownMenuItem>
+                            </>
+                          )}
                      </DropdownMenuContent>
                    </DropdownMenuPortal>
                  </Dropdown>
@@ -616,36 +635,24 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <ConfirmationDialogContent
          variety="danger"
-          title={t(
-            `delete_${deleteDialogTypeSchedulingType === SchedulingType.MANAGED && "managed"}_event_type`
-          )}
-          confirmBtnText={t(
-            `confirm_delete_${
-              deleteDialogTypeSchedulingType === SchedulingType.MANAGED && "managed"
-            }_event_type`
-          )}
-          loadingText={t(
-            `confirm_delete_${
-              deleteDialogTypeSchedulingType === SchedulingType.MANAGED && "managed"
-            }_event_type`
-          )}
+          title={t(`delete${isManagedEventPrefix()}_event_type`)}
+          confirmBtnText={t(`confirm_delete_event_type`)}
+          loadingText={t(`confirm_delete_event_type`)}
          onConfirm={(e) => {
            e.preventDefault();
            deleteEventTypeHandler(deleteDialogTypeId);
          }}>
-          <p className="mt-5">
-            {t(
-              `delete_${
-                deleteDialogTypeSchedulingType === SchedulingType.MANAGED && "managed"
-              }_event_type_description`
-            )}
-          </p>
          <p className="mt-5">
            <Trans
-              i18nKey={`delete_${
-                deleteDialogTypeSchedulingType === SchedulingType.MANAGED && "managed"
-              }_event_type_warning`}
-            />
+              i18nKey={`delete${isManagedEventPrefix()}_event_type_description`}
+              components={{ li: <li />, ul: <ul className="ml-4 list-disc" /> }}>
+              <ul>
+                <li>Members assigned to this event type will also have their event types deleted.</li>
+                <li>
+                  Anyone who they&apos;ve shared their link with will no longer be able to book using it.
+                </li>
+              </ul>
+            </Trans>
          </p>
        </ConfirmationDialogContent>
      </Dialog>
@@ -15,6 +15,7 @@ import type { inferSSRProps } from "@lib/types/inferSSRProps";

 import PageWrapper from "@components/PageWrapper";
 import { ConnectedCalendars } from "@components/getting-started/steps-views/ConnectCalendars";
+import { ConnectedVideoStep } from "@components/getting-started/steps-views/ConnectedVideoStep";
 import { SetupAvailability } from "@components/getting-started/steps-views/SetupAvailability";
 import UserProfile from "@components/getting-started/steps-views/UserProfile";
 import { UserSettings } from "@components/getting-started/steps-views/UserSettings";
@@ -22,7 +23,13 @@ import { UserSettings } from "@components/getting-started/steps-views/UserSettin
 export type IOnboardingPageProps = inferSSRProps<typeof getServerSideProps>;

 const INITIAL_STEP = "user-settings";
-const steps = ["user-settings", "connected-calendar", "setup-availability", "user-profile"] as const;
+const steps = [
+  "user-settings",
+  "connected-calendar",
+  "connected-video",
+  "setup-availability",
+  "user-profile",
+] as const;

 const stepTransform = (step: (typeof steps)[number]) => {
  const stepIndex = steps.indexOf(step);
@@ -36,9 +43,9 @@ const stepRouteSchema = z.object({
  step: z.array(z.enum(steps)).default([INITIAL_STEP]),
 });

+// TODO: Refactor how steps work to be contained in one array/object. Currently we have steps,initalsteps,headers etc. These can all be in one place
 const OnboardingPage = (props: IOnboardingPageProps) => {
  const router = useRouter();
-
  const { user } = props;
  const { t } = useLocale();

@@ -55,6 +62,11 @@ const OnboardingPage = (props: IOnboardingPageProps) => {
      subtitle: [`${t("connect_your_calendar_instructions")}`],
      skipText: `${t("connect_calendar_later")}`,
    },
+    {
+      title: `${t("connect_your_video_app")}`,
+      subtitle: [`${t("connect_your_video_app_instructions")}`],
+      skipText: `${t("set_up_later")}`,
+    },
    {
      title: `${t("set_availability")}`,
      subtitle: [
@@ -68,6 +80,17 @@ const OnboardingPage = (props: IOnboardingPageProps) => {
    },
  ];

+  // TODO: Add this in when we have solved the ability to move to tokens accept invite and note invitedto
+  // Ability to accept other pending invites if any (low priority)
+  // if (props.hasPendingInvites) {
+  //   headers.unshift(
+  //     props.hasPendingInvites && {
+  //       title: `${t("email_no_user_invite_heading", { appName: APP_NAME })}`,
+  //       subtitle: [], // TODO: come up with some subtitle text here
+  //     }
+  //   );
+  // }
+
  const goToIndex = (index: number) => {
    const newStep = steps[index];
    router.push(
@@ -122,12 +145,15 @@ const OnboardingPage = (props: IOnboardingPageProps) => {

              {currentStep === "connected-calendar" && <ConnectedCalendars nextStep={() => goToIndex(2)} />}

+              {currentStep === "connected-video" && <ConnectedVideoStep nextStep={() => goToIndex(3)} />}
+
              {currentStep === "setup-availability" && (
-                <SetupAvailability nextStep={() => goToIndex(3)} defaultScheduleId={user.defaultScheduleId} />
+                <SetupAvailability nextStep={() => goToIndex(4)} defaultScheduleId={user.defaultScheduleId} />
              )}

              {currentStep === "user-profile" && <UserProfile user={user} />}
            </StepCard>
+
            {headers[currentStepIndex]?.skipText && (
              <div className="flex w-full flex-row justify-center">
                <Button
@@ -181,6 +207,18 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
      allowDynamicBooking: true,
      defaultScheduleId: true,
      completedOnboarding: true,
+      teams: {
+        select: {
+          accepted: true,
+          team: {
+            select: {
+              id: true,
+              name: true,
+              logo: true,
+            },
+          },
+        },
+      },
    },
  });

@@ -199,6 +237,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
        ...user,
        emailMd5: crypto.createHash("md5").update(user.email).digest("hex"),
      },
+      hasPendingInvites: user.teams.find((team) => team.accepted === false) ?? false,
    },
  };
 };
@@ -2,6 +2,7 @@ import type { GetServerSidePropsContext } from "next";
 import { z } from "zod";

 import { Booker } from "@calcom/atoms";
+import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo";
 import { getBookingByUidOrRescheduleUid } from "@calcom/features/bookings/lib/get-booking";
 import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
 import { getUsernameList } from "@calcom/lib/defaultEvents";
@@ -13,10 +14,22 @@ import PageWrapper from "@components/PageWrapper";

 type PageProps = inferSSRProps<typeof getServerSideProps>;

-export default function Type({ slug, user, booking, away }: PageProps) {
+export default function Type({ slug, user, booking, away, isBrandingHidden }: PageProps) {
  return (
-    <main className="flex justify-center">
-      <Booker username={user} eventSlug={slug} rescheduleBooking={booking} isAway={away} />
+    <main className="flex h-full min-h-[100dvh] items-center justify-center">
+      <BookerSeo
+        username={user}
+        eventSlug={slug}
+        rescheduleUid={booking?.uid}
+        hideBranding={isBrandingHidden}
+      />
+      <Booker
+        username={user}
+        eventSlug={slug}
+        rescheduleBooking={booking}
+        isAway={away}
+        hideBranding={isBrandingHidden}
+      />
    </main>
  );
 }
@@ -27,8 +40,8 @@ async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
  const { user, type: slug } = paramsSchema.parse(context.params);
  const { rescheduleUid } = context.query;

-  const { ssgInit } = await import("@server/lib/ssg");
-  const ssg = await ssgInit(context);
+  const { ssrInit } = await import("@server/lib/ssr");
+  const ssr = await ssrInit(context);
  const usernameList = getUsernameList(user);

  const users = await prisma.user.findMany({
@@ -53,13 +66,16 @@ async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
    booking = await getBookingByUidOrRescheduleUid(`${rescheduleUid}`);
  }

+  await ssr.viewer.public.event.prefetch({ username: user, eventSlug: slug });
+
  return {
    props: {
      booking,
      user,
      slug,
      away: false,
-      trpcState: ssg.dehydrate(),
+      trpcState: ssr.dehydrate(),
+      isBrandingHidden: false,
    },
  };
 }
@@ -67,14 +83,16 @@ async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
 async function getUserPageProps(context: GetServerSidePropsContext) {
  const { user: username, type: slug } = paramsSchema.parse(context.params);
  const { rescheduleUid } = context.query;
-  const { ssgInit } = await import("@server/lib/ssg");
-  const ssg = await ssgInit(context);
+
+  const { ssrInit } = await import("@server/lib/ssr");
+  const ssr = await ssrInit(context);
  const user = await prisma.user.findUnique({
    where: {
      username,
    },
    select: {
      away: true,
+      hideBranding: true,
    },
  });

@@ -89,13 +107,16 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
    booking = await getBookingByUidOrRescheduleUid(`${rescheduleUid}`);
  }

+  await ssr.viewer.public.event.prefetch({ username, eventSlug: slug });
+
  return {
    props: {
      booking,
      away: user?.away,
      user: username,
      slug,
-      trpcState: ssg.dehydrate(),
+      trpcState: ssr.dehydrate(),
+      isBrandingHidden: user?.hideBranding,
    },
  };
 }
@@ -2,6 +2,7 @@ import type { GetServerSidePropsContext } from "next";
 import { z } from "zod";

 import { Booker } from "@calcom/atoms";
+import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo";
 import { getBookingByUidOrRescheduleUid } from "@calcom/features/bookings/lib/get-booking";
 import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
 import prisma from "@calcom/prisma";
@@ -12,10 +13,22 @@ import PageWrapper from "@components/PageWrapper";

 type PageProps = inferSSRProps<typeof getServerSideProps>;

-export default function Type({ slug, user, booking, away }: PageProps) {
+export default function Type({ slug, user, booking, away, isBrandingHidden }: PageProps) {
  return (
-    <main className="flex justify-center">
-      <Booker username={user} eventSlug={slug} rescheduleBooking={booking} isAway={away} />
+    <main className="flex h-full min-h-[100dvh] items-center justify-center">
+      <BookerSeo
+        username={user}
+        eventSlug={slug}
+        rescheduleUid={booking?.uid}
+        hideBranding={isBrandingHidden}
+      />
+      <Booker
+        username={user}
+        eventSlug={slug}
+        rescheduleBooking={booking}
+        isAway={away}
+        hideBranding={isBrandingHidden}
+      />
    </main>
  );
 }
@@ -30,8 +43,8 @@ const paramsSchema = z.object({ type: z.string(), slug: z.string() });
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
  const { slug: teamSlug, type: meetingSlug } = paramsSchema.parse(context.params);
  const { rescheduleUid } = context.query;
-  const { ssgInit } = await import("@server/lib/ssg");
-  const ssg = await ssgInit(context);
+  const { ssrInit } = await import("@server/lib/ssr");
+  const ssr = await ssrInit(context);

  const team = await prisma.team.findFirst({
    where: {
@@ -39,6 +52,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
    },
    select: {
      id: true,
+      hideBranding: true,
    },
  });

@@ -52,14 +66,15 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
  if (rescheduleUid) {
    booking = await getBookingByUidOrRescheduleUid(`${rescheduleUid}`);
  }
-
+  await ssr.viewer.public.event.prefetch({ username: teamSlug, eventSlug: meetingSlug });
  return {
    props: {
      booking,
      away: false,
      user: teamSlug,
      slug: meetingSlug,
-      trpcState: ssg.dehydrate(),
+      trpcState: ssr.dehydrate(),
+      isBrandingHidden: team?.hideBranding,
    },
  };
 };
@@ -146,6 +146,7 @@ const AppearanceView = () => {
              <p className="text-default mb-2 block text-sm font-medium">{t("light_brand_color")}</p>
              <ColorPicker
                defaultValue={user.brandColor}
+                resetDefaultValue="#292929"
                onChange={(value) => {
                  if (!checkWCAGContrastColor("#ffffff", value)) {
                    setLightModeError(true);
@@ -167,6 +168,7 @@ const AppearanceView = () => {
              <p className="text-default mb-2 block text-sm font-medium">{t("dark_brand_color")}</p>
              <ColorPicker
                defaultValue={user.darkBrandColor}
+                resetDefaultValue="#fafafa"
                onChange={(value) => {
                  if (!checkWCAGContrastColor("#101010", value)) {
                    setDarkModeError(true);
@@ -4,6 +4,7 @@ import { useRouter } from "next/router";
 import { Fragment } from "react";

 import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
+import { CalendarSwitch } from "@calcom/features/calendars/CalendarSwitch";
 import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
 import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 import { classNames } from "@calcom/lib";
@@ -29,7 +30,6 @@ import { Plus, Calendar } from "@calcom/ui/components/icon";
 import { QueryCell } from "@lib/QueryCell";

 import PageWrapper from "@components/PageWrapper";
-import { CalendarSwitch } from "@components/settings/CalendarSwitch";

 const SkeletonLoader = () => {
  return (
@@ -178,15 +178,17 @@ const CalendarsView = () => {
                        </div>
                        <div className="border-subtle w-full border-t">
                          <p className="text-subtle px-2 pt-4 text-sm">{t("toggle_calendars_conflict")}</p>
-                          <ul className="space-y-2 p-4">
+                          <ul className="space-y-4 p-4">
                            {item.calendars.map((cal) => (
                              <CalendarSwitch
                                key={cal.externalId}
                                externalId={cal.externalId}
                                title={cal.name || "Nameless calendar"}
+                                name={cal.name || "Nameless calendar"}
                                type={item.integration.type}
-                                isSelected={cal.isSelected}
-                                defaultSelected={cal.externalId === data?.destinationCalendar?.externalId}
+                                isChecked={
+                                  cal.isSelected || cal.externalId === data?.destinationCalendar?.externalId
+                                }
                              />
                            ))}
                          </ul>
@@ -24,7 +24,7 @@ import {
  SkeletonContainer,
  SkeletonText,
 } from "@calcom/ui";
-import { AlertCircle, MoreHorizontal, Trash, Video } from "@calcom/ui/components/icon";
+import { AlertCircle, MoreHorizontal, Trash, Video, Plus } from "@calcom/ui/components/icon";

 import AppListCard from "@components/AppListCard";
 import PageWrapper from "@components/PageWrapper";
@@ -41,6 +41,18 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
  );
 };

+const AddConferencingButton = () => {
+  const { t } = useLocale();
+
+  return (
+    <>
+      <Button color="secondary" StartIcon={Plus} href="/apps/categories/video">
+        {t("add_conferencing_app")}
+      </Button>
+    </>
+  );
+};
+
 const ConferencingLayout = () => {
  const { t } = useLocale();
  const utils = trpc.useContext();
@@ -91,7 +103,11 @@ const ConferencingLayout = () => {

  return (
    <div className="bg-default w-full sm:mx-0 xl:mt-0">
-      <Meta title={t("conferencing")} description={t("conferencing_description")} />
+      <Meta
+        title={t("conferencing")}
+        description={t("conferencing_description")}
+        CTA={<AddConferencingButton />}
+      />
      <List>
        {apps?.items &&
          apps.items
@@ -50,6 +50,7 @@ const ProfileImpersonationView = () => {
    setValue,
    reset,
    getValues,
+    watch,
  } = formMethods;

  const isDisabled = isSubmitting || !isDirty;
@@ -63,11 +64,11 @@ const ProfileImpersonationView = () => {
        }}>
        <div className="flex space-x-3">
          <Switch
-            defaultChecked={!user?.disableImpersonation}
            onCheckedChange={(e) => {
              setValue("disableImpersonation", !e, { shouldDirty: true });
            }}
            fitToHeight={true}
+            checked={!watch("disableImpersonation")}
          />
          <div className="flex flex-col">
            <Skeleton as={Label} className="text-emphasis text-sm font-semibold leading-none">
@@ -4,10 +4,12 @@ import { useRouter } from "next/router";
 import type { CSSProperties } from "react";
 import type { SubmitHandler } from "react-hook-form";
 import { FormProvider, useForm } from "react-hook-form";
+import { z } from "zod";

 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
+import { checkPremiumUsername } from "@calcom/features/ee/common/lib/checkPremiumUsername";
 import { isSAMLLoginEnabled } from "@calcom/features/ee/sso/lib/saml";
-import { WEBAPP_URL } from "@calcom/lib/constants";
+import { IS_SELF_HOSTED, WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import prisma from "@calcom/prisma";
@@ -16,7 +18,6 @@ import { Alert, Button, EmailField, HeadSeo, PasswordField, TextField } from "@c

 import PageWrapper from "@components/PageWrapper";

-import { asStringOrNull } from "../lib/asStringOrNull";
 import { IS_GOOGLE_LOGIN_ENABLED } from "../server/lib/constants";
 import { ssrInit } from "../server/lib/ssr";

@@ -24,11 +25,10 @@ type FormValues = {
  username: string;
  email: string;
  password: string;
-  passwordcheck: string;
  apiError: string;
 };

-export default function Signup({ prepopulateFormValues }: inferSSRProps<typeof getServerSideProps>) {
+export default function Signup({ prepopulateFormValues, token }: inferSSRProps<typeof getServerSideProps>) {
  const { t } = useLocale();
  const router = useRouter();
  const telemetry = useTelemetry();
@@ -76,7 +76,7 @@ export default function Signup({ prepopulateFormValues }: inferSSRProps<typeof g
  return (
    <LicenseRequired>
      <div
-        className="bg-muted flex min-h-screen flex-col justify-center py-12 sm:px-6 lg:px-8"
+        className="bg-muted flex min-h-screen flex-col justify-center "
        style={
          {
            "--cal-brand": "#111827",
@@ -95,7 +95,7 @@ export default function Signup({ prepopulateFormValues }: inferSSRProps<typeof g
          </h2>
        </div>
        <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-          <div className="bg-default mx-2 px-4 py-8 shadow sm:rounded-lg sm:px-10">
+          <div className="bg-default mx-2 p-6 shadow sm:rounded-lg lg:p-8">
            <FormProvider {...methods}>
              <form
                onSubmit={(event) => {
@@ -109,7 +109,7 @@ export default function Signup({ prepopulateFormValues }: inferSSRProps<typeof g
                }}
                className="bg-default space-y-6">
                {errors.apiError && <Alert severity="error" message={errors.apiError?.message} />}
-                <div className="space-y-2">
+                <div className="space-y-4">
                  <TextField
                    addOnLeading={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/`}
                    {...register("username")}
@@ -125,32 +125,28 @@ export default function Signup({ prepopulateFormValues }: inferSSRProps<typeof g
                      className: "block text-sm font-medium text-default",
                    }}
                    {...register("password")}
+                    hintErrors={["caplow", "min", "num"]}
                    className="border-default mt-1 block w-full rounded-md border px-3 py-2 shadow-sm focus:border-black focus:outline-none focus:ring-black sm:text-sm"
                  />
-                  <PasswordField
-                    label={t("confirm_password")}
-                    {...register("passwordcheck", {
-                      validate: (value) =>
-                        value === methods.watch("password") || (t("error_password_mismatch") as string),
-                    })}
-                  />
                </div>
                <div className="flex space-x-2 rtl:space-x-reverse">
-                  <Button type="submit" loading={isSubmitting} className="w-7/12 justify-center">
+                  <Button type="submit" loading={isSubmitting} className="w-full justify-center">
                    {t("create_account")}
                  </Button>
-                  <Button
-                    color="secondary"
-                    className="w-5/12 justify-center"
-                    onClick={() =>
-                      signIn("Cal.com", {
-                        callbackUrl: router.query.callbackUrl
-                          ? `${WEBAPP_URL}/${router.query.callbackUrl}`
-                          : `${WEBAPP_URL}/getting-started`,
-                      })
-                    }>
-                    {t("login_instead")}
-                  </Button>
+                  {!token && (
+                    <Button
+                      color="secondary"
+                      className="w-full justify-center"
+                      onClick={() =>
+                        signIn("Cal.com", {
+                          callbackUrl: router.query.callbackUrl
+                            ? `${WEBAPP_URL}/${router.query.callbackUrl}`
+                            : `${WEBAPP_URL}/getting-started`,
+                        })
+                      }>
+                      {t("login_instead")}
+                    </Button>
+                  )}
                </div>
              </form>
            </FormProvider>
@@ -163,7 +159,7 @@ export default function Signup({ prepopulateFormValues }: inferSSRProps<typeof g

 export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
  const ssr = await ssrInit(ctx);
-  const token = asStringOrNull(ctx.query.token);
+  const token = z.string().optional().parse(ctx.query.token);

  const props = {
    isGoogleLoginEnabled: IS_GOOGLE_LOGIN_ENABLED,
@@ -221,11 +217,27 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
    };
  }

+  const guessUsernameFromEmail = (email: string) => {
+    const [username] = email.split("@");
+    return username;
+  };
+
+  let username = guessUsernameFromEmail(verificationToken.identifier);
+
+  if (!IS_SELF_HOSTED) {
+    // Im not sure we actually hit this because of next redirects signup to website repo - but just in case this is pretty cool :)
+    const { available, suggestion } = await checkPremiumUsername(username);
+
+    username = available ? username : suggestion || username;
+  }
+
  return {
    props: {
      ...props,
+      token,
      prepopulateFormValues: {
        email: verificationToken.identifier,
+        username,
      },
    },
  };
@@ -4,7 +4,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect } from "react";

-import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
+import { sdkActionManager, useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import EventTypeDescription from "@calcom/features/eventtypes/components/EventTypeDescription";
 import { CAL_URL } from "@calcom/lib/constants";
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
@@ -12,6 +12,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import { getTeamWithMembers } from "@calcom/lib/server/queries/teams";
+import { stripMarkdown } from "@calcom/lib/stripMarkdown";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import prisma from "@calcom/prisma";
 import { Avatar, AvatarGroup, Button, EmptyScreen, HeadSeo } from "@calcom/ui";
@@ -26,7 +27,7 @@ import Team from "@components/team/screens/Team";
 import { ssrInit } from "@server/lib/ssr";

 export type TeamPageProps = inferSSRProps<typeof getServerSideProps>;
-function TeamPage({ team, isUnpublished }: TeamPageProps) {
+function TeamPage({ team, isUnpublished, markdownStrippedBio }: TeamPageProps) {
  useTheme(team.theme);
  const showMembers = useToggleQuery("members");
  const { t } = useLocale();
@@ -67,6 +68,11 @@ function TeamPage({ team, isUnpublished }: TeamPageProps) {
          <div className="px-6 py-4 ">
            <Link
              href={`/team/${team.slug}/${type.slug}`}
+              onClick={async () => {
+                sdkActionManager?.fire("eventTypeSelected", {
+                  eventType: type,
+                });
+              }}
              data-testid="event-type-link"
              className="flex justify-between">
              <div className="flex-shrink">
@@ -100,7 +106,7 @@ function TeamPage({ team, isUnpublished }: TeamPageProps) {
        title={teamName}
        description={teamName}
        meeting={{
-          title: team?.bio || "",
+          title: markdownStrippedBio,
          profile: { name: `${team.name}`, image: getPlaceholderAvatar(team.logo, team.name) },
        }}
      />
@@ -111,7 +117,7 @@ function TeamPage({ team, isUnpublished }: TeamPageProps) {
          {!isBioEmpty && (
            <>
              <div
-                className=" text-subtle text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                className="  text-subtle break-words text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                dangerouslySetInnerHTML={{ __html: team.safeBio }}
              />
            </>
@@ -196,10 +202,14 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
    return { ...member, safeBio: markdownToSafeHTML(member.bio || "") };
  });

+  const markdownStrippedBio = stripMarkdown(team?.bio || "");
+
  return {
    props: {
      team: { ...team, safeBio, members },
+      themeBasis: team.slug,
      trpcState: ssr.dehydrate(),
+      markdownStrippedBio,
    },
  } as const;
 };
@@ -196,6 +196,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
        brandColor: team.brandColor,
        darkBrandColor: team.darkBrandColor,
      },
+      themeBasis: team.slug,
      date: dateParam,
      eventType: eventTypeObject,
      workingHours,
@@ -153,6 +153,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
        image: eventTypeObject.team?.logo || null,
        eventName: null,
      },
+      themeBasis: eventTypeObject.team?.slug,
      eventType: eventTypeObject,
      recurringEventCount,
      booking,
@@ -12,6 +12,7 @@ test.describe("App Store - Authed", () => {
    await pro.login();
    await page.goto("/apps/categories/calendar");
    await page.click('[data-testid="app-store-app-card-apple-calendar"]');
+    await page.waitForURL("/apps/apple-calendar");
    await page.click('[data-testid="install-app-button"]');
    await expect(page.locator(`text=Connect to Apple Server`)).toBeVisible();
  });
@@ -33,7 +33,7 @@ test.describe("Availablity tests", () => {
    });

    await test.step("Date override is displayed in troubleshooter", async () => {
-      const response = await page.waitForResponse("**/api/trpc/viewer.availability.schedule.update?batch=1");
+      const response = await page.waitForResponse("**/api/trpc/availability/schedule.update?batch=1");
      const json = await response.json();
      // @ts-expect-error trust me bro
      const date = json[0].result.data.json.schedule.availability.find((a) => !!a.date);
@@ -94,7 +94,12 @@ testBothBookers.describe("pro user", () => {
    });
  });

-  test("Can cancel the recently created booking and rebook the same timeslot", async ({ page, users }) => {
+  test("Can cancel the recently created booking and rebook the same timeslot", async ({
+    page,
+    users,
+  }, testInfo) => {
+    // Because it tests the entire booking flow + the cancellation + rebooking
+    test.setTimeout(testInfo.timeout * 3);
    await bookFirstEvent(page);

    const [pro] = users.get();
@@ -103,7 +108,7 @@ testBothBookers.describe("pro user", () => {
    await page.goto("/bookings/upcoming");
    await page.locator('[data-testid="cancel"]').first().click();
    await page.waitForURL((url) => {
-      return url.pathname.startsWith("/booking");
+      return url.pathname.startsWith("/booking/");
    });
    await page.locator('[data-testid="cancel"]').click();

@@ -126,7 +131,7 @@ testBothBookers.describe("pro user", () => {
    await page.goto("/bookings/unconfirmed");
    await Promise.all([
      page.click('[data-testid="confirm"]'),
-      page.waitForResponse((response) => response.url().includes("/api/trpc/viewer.bookings.confirm")),
+      page.waitForResponse((response) => response.url().includes("/api/trpc/bookings/confirm")),
    ]);
    // This is the only booking in there that needed confirmation and now it should be empty screen
    await expect(page.locator('[data-testid="empty-screen"]')).toBeVisible();
@@ -47,10 +47,19 @@ test.describe("Onboarding", () => {
        // tests skip button, we don't want to test entire flow.
        await page.locator("button[data-testid=skip-step]").click();

-        await expect(page).toHaveURL(/.*setup-availability/);
+        await expect(page).toHaveURL(/.*connected-video/);
      });

      await test.step("step 3", async () => {
+        const isDisabled = await page.locator("button[data-testid=save-video-button]").isDisabled();
+        await expect(isDisabled).toBe(true);
+        // tests skip button, we don't want to test entire flow.
+        await page.locator("button[data-testid=skip-step]").click();
+
+        await expect(page).toHaveURL(/.*setup-availability/);
+      });
+
+      await test.step("step 4", async () => {
        const isDisabled = await page.locator("button[data-testid=save-availability]").isDisabled();
        await expect(isDisabled).toBe(false);
        // same here, skip this step.
@@ -59,7 +68,7 @@ test.describe("Onboarding", () => {
        await expect(page).toHaveURL(/.*user-profile/);
      });

-      await test.step("step 4", async () => {
+      await test.step("step 5", async () => {
        await page.locator("button[type=submit]").click();

        // should redirect to /event-types after onboarding
@@ -1,3 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-  <path stroke="white" stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ban"><circle cx="12" cy="12" r="10"></circle><line x1="4.93" x2="19.07" y1="4.93" y2="19.07"></line></svg>
@@ -1038,7 +1038,6 @@
  "event_cancelled_trigger": "متى تم إلغاء هذا الحدث",
  "new_event_trigger": "متى تم حجز الحدث الجديد",
  "email_host_action": "إرسال رسالة إلكترونية إلى المضيف",
-  "email_attendee_action": "إرسال رسالة إلكترونية إلى واحد من الحضور",
  "sms_attendee_action": "إرسال رسالة نصية قصيرة إلى واحد من الحضور",
  "sms_number_action": "إرسال رسالة نصية قصيرة إلى رقم محدد",
  "workflows": "سير العمل",
@@ -1573,7 +1572,7 @@
  "sender_name": "اسم المرسل",
  "already_invited": "تمت دعوة هذا الحاضر بالفعل",
  "no_recordings_found": "لم يتم العثور على تسجيلات",
-  "new_workflow_subtitle": "سير عمل جديد من أجل...",
+  "new_workflow_subtitle": "سير عمل جديد لـ...",
  "reporting": "تقديم التقارير",
  "reporting_feature": "عرض جميع البيانات الواردة وتنزيلها كملف CSV",
  "teams_plan_required": "خطة Teams مطلوبة",
@@ -1725,7 +1724,6 @@
  "locked_apps_description": "سيكون الأعضاء قادرين على رؤية التطبيقات النشطة، ولكن من دون القدرة على تعديل أي إعدادات للتطبيق",
  "locked_webhooks_description": "سيكون الأعضاء قادرين على رؤية قوالب الويب النشطة، ولكن من دون القدرة على تعديل أي إعدادات للقوالب",
  "locked_workflows_description": "سيكون الأعضاء قادرين على رؤية مسارات العمل النشطة، ولكن من دون القدرة على تعديل أي إعدادات لمسار العمل",
-  "locked_by_admin": "مقفل من قبل المشرف",
  "app_not_connected": "أنت غير متصل بحساب {{appName}}.",
  "connect_now": "اتصل الآن",
  "managed_event_dialog_confirm_button_one": "استبدال وإشعار العضو {{count}}",
--- a/Show More
+++ b/Show More