v2.9.2

Co-authored-by: Peer Richelsen <peeroke@gmail.com>

.changeset/README.md

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

.changeset/config.json

@@ -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": []
+}

.devcontainer/devcontainer.json

@@ -1,42 +0,0 @@
-// For format details, see https://aka.ms/devcontainer.json. For config options, see the
-// README at: https://github.com/devcontainers/templates/tree/main/src/docker-outside-of-docker
-{
-  "name": "Docker outside of Docker",
-  // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
-  "image": "mcr.microsoft.com/devcontainers/base:bullseye",
-
-  "features": {
-    "ghcr.io/devcontainers/features/docker-from-docker:1": {
-      "version": "latest",
-      "enableNonRootDocker": "true",
-      "moby": "true"
-    },
-    "ghcr.io/devcontainers/features/node:1": {},
-    "ghcr.io/devcontainers-contrib/features/npm-package:1": {},
-    "ghcr.io/devcontainers-contrib/features/jest:2": {},
-    "ghcr.io/devcontainers-contrib/features/prisma:2": {},
-    "ghcr.io/guiyomh/features/vim:0": {}
-  },
-
-  // Use this environment variable if you need to bind mount your local source code into a new container.
-  "remoteEnv": {
-    "LOCAL_WORKSPACE_FOLDER": "${localWorkspaceFolder}"
-  },
-
-  "hostRequirements": {
-    "cpus": 4,
-    "memory": "8gb"
-  },
-
-  // Use 'postCreateCommand' to run commands after the container is created.
-  "postCreateCommand": "./deploy/install.sh"
-
-  // Use 'forwardPorts' to make a list of ports inside the container available locally.
-  // "forwardPorts": [],
-
-  // Configure tool-specific properties.
-  // "customizations": {},
-
-  // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
-  // "remoteUser": "root"
-}

.env.appStore.example

@@ -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

.env.example

@@ -79,6 +79,9 @@ CALENDSO_ENCRYPTION_KEY=
 # Intercom Config
 NEXT_PUBLIC_INTERCOM_APP_ID=
 
+# Secret to enable Intercom Identity Verification
+INTERCOM_SECRET=
+
 # Zendesk Config
 NEXT_PUBLIC_ZENDESK_KEY=
 
@@ -135,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'
@@ -160,9 +167,6 @@ CLOSECOM_API_KEY=
 # Sendgrid internal sync service
 SENDGRID_SYNC_API_KEY=
 
-# Sentry
-NEXT_PUBLIC_SENTRY_DSN=
-SENTRY_IGNORE_API_RESOLUTION_ERROR=
 
 # Change your Brand
 NEXT_PUBLIC_APP_NAME="Cal.com"
@@ -177,3 +181,5 @@ CSP_POLICY=
 
 # Vercel Edge Config
 EDGE_CONFIG=
+
+NEXT_PUBLIC_MINUTES_TO_BOOK=5 # Minutes

.github/CODEOWNERS

@@ -5,7 +5,8 @@
 # the repo. Unless a later match takes precedence,
 # @global-owner1 and @global-owner2 will be requested for
 # review when someone opens a pull request.
-*           @calcom/reviewers
+# ⬇️ Removed so we can manually trigger checks
+# *           @calcom/reviewers
 
 .github/    @calcom/core
 .husky/     @calcom/core

.github/workflows/cron-stale-issue.yml

@@ -2,6 +2,7 @@ name: Cron - mark stale for inactive issues
 
 permissions:
   issues: write
+  pull-requests: write
 
 on:
   # "Scheduled workflows run on the latest commit on the default or base branch."
@@ -15,6 +16,9 @@ jobs:
     steps:
       - uses: actions/stale@v7
         with:
-          days-before-stale: 60
-          include-only-assigned: true
-          days-before-close: -1
+          days-before-issue-stale: 60
+          days-before-issue-close: -1
+          days-before-pr-stale: 14
+          days-before-pr-close: 7
+          stale-pr-message: "This PR is being marked as stale due to inactivity."
+          close-pr-message: "This PR is being closed due to inactivity. Please reopen if work is intended to be continued."

.github/workflows/nextjs-bundle-analysis.yml

@@ -24,7 +24,7 @@ jobs:
       - name: Analyze bundle
         run: |
           cd apps/web
-          npx -p nextjs-bundle-analysis report
+          npx -p nextjs-bundle-analysis@0.5.0 report
 
       - name: Upload bundle
         uses: actions/upload-artifact@v2
@@ -76,7 +76,7 @@ jobs:
         id: fc
         with:
           issue-number: ${{ github.event.number }}
-          body-includes: "<!-- __NEXTJS_BUNDLE -->"
+          body-includes: "<!-- __NEXTJS_BUNDLE_@calcom/web -->"
 
       - name: Create Comment
         uses: peter-evans/create-or-update-comment@v1.4.4

.github/workflows/pr.yml

@@ -7,6 +7,7 @@ on:
     paths-ignore:
       - "**.md"
       - ".github/CODEOWNERS"
+  merge_group:
   workflow_dispatch:
 
 concurrency:

.github/workflows/scripts/apply-issue-labels-to-pr.ts

@@ -1,7 +1,6 @@
 const https = require("https");
 
 async function applyLabelFromLinkedIssueToPR(pr, token) {
-  
   // Get the labels from issues linked to the PR
   const query = `
     query GetLinkedIssues($owner: String!, $repo: String!, $prNumber: Int!) {
@@ -38,7 +37,7 @@ async function applyLabelFromLinkedIssueToPR(pr, token) {
     headers: {
       "Content-Type": "application/json",
       "Content-Length": graphqlData.length,
-      "Authorization": "Bearer " + token,
+      Authorization: "Bearer " + token,
       "User-Agent": "Node.js",
     },
   };
@@ -52,14 +51,7 @@ async function applyLabelFromLinkedIssueToPR(pr, token) {
         responseBody += chunk;
       });
       response.on("end", () => {
-        resolve(
-          JSON.parse(responseBody)
-            ?.data
-            ?.repository
-            ?.pullRequest
-            ?.closingIssuesReferences
-            ?.nodes
-        );
+        resolve(JSON.parse(responseBody)?.data?.repository?.pullRequest?.closingIssuesReferences?.nodes);
       });
     });
 
@@ -96,7 +88,7 @@ async function applyLabelFromLinkedIssueToPR(pr, token) {
       headers: {
         "Content-Type": "application/json",
         "Content-Length": labelsData.length,
-        "Authorization": "Bearer " + token,
+        Authorization: "Bearer " + token,
         "User-Agent": "Node.js",
       },
     };
@@ -126,11 +118,9 @@ async function applyLabelFromLinkedIssueToPR(pr, token) {
       console.log(`Error labelling PR: ${labelResult.message}`);
       continue;
     }
-    
+
     console.log(
-      `Applied labels: ${labels.join(", ")} to PR #${
-        pr.number
-      } from linked issue #${issue.number}`
+      `Applied labels: ${labels.join(", ")} to PR #${pr.number} from linked issue #${issue.number}`
     );
   }
 }

.github/workflows/todo-to-issue.yml

@@ -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"]}]'

.gitignore

@@ -65,8 +65,9 @@ tsconfig.tsbuildinfo
 # turbo
 .turbo
 
-# Prisma-Zod
+# Prisma generated files
 packages/prisma/zod/*.ts
+packages/prisma/enums
 
 # Builds
 dist

.gitpod.yml

@@ -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

.prettierignore

@@ -14,4 +14,5 @@ public
 .DS_Store
 .eslintignore
 packages/prisma/zod
+packages/prisma/enums
 apps/web/public/embed

.vscode/settings.json

@@ -6,6 +6,6 @@
   },
   "typescript.preferences.importModuleSpecifier": "non-relative",
   "spellright.language": ["en"],
-  "spellright.documentTypes": ["markdown", "typescript"],
+  "spellright.documentTypes": ["markdown", "typescript", "typescriptreact"],
   "tailwindCSS.experimental.classRegex": [["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]]
 }

.yarnrc.yml

@@ -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

CONTRIBUTING.md

@@ -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

LICENSE

@@ -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.
 

README.md

@@ -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 -->
 

apps/docs/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@calcom/docs",
   "version": "1.0.0",
+  "private": true,
   "description": "",
   "main": "index.js",
   "scripts": {

apps/storybook/.storybook/main.js

@@ -4,6 +4,7 @@ module.exports = {
   stories: [
     "../intro.stories.mdx",
     "../../../packages/ui/components/**/*.stories.mdx",
+    "../../../packages/atoms/**/*.stories.mdx",
     "../../../packages/features/**/*.stories.mdx",
     "../../../packages/ui/components/**/*.stories.@(js|jsx|ts|tsx)",
   ],
@@ -70,4 +71,5 @@ module.exports = {
 
     return config;
   },
+  typescript: { reactDocgen: "react-docgen" },
 };

apps/web/.gitignore

@@ -68,5 +68,3 @@ public/embed
 
 # Copied app-store images
 public/app-store
-# Sentry
-.sentryclirc

apps/web/CHANGELOG.md

@@ -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

apps/web/calendso.yaml

@@ -103,59 +103,6 @@ paths:
       summary: Reset a user's password
       tags:
         - Authentication
-  "/api/availability/{user}?dateFrom={dateFrom}&dateTo={dateTo}":
-    get:
-      description: "Gets the busy times for a particular user, by username."
-      summary: Gets the busy times for a user
-      tags:
-        - Availability
-      responses:
-        "200":
-          description: OK
-          content:
-            application/json:
-              schema:
-                type: array
-                description: ""
-                minItems: 1
-                uniqueItems: true
-                x-examples:
-                  example-1:
-                    - start: "Fri, 03 Sep 2021 17:00:00 GMT"
-                      end: "Fri, 03 Sep 2021 17:40:00 GMT"
-                items:
-                  type: object
-                  properties:
-                    start:
-                      type: string
-                      minLength: 1
-                    end:
-                      type: string
-                      minLength: 1
-                  required:
-                    - start
-                    - end
-        "500":
-          description: Internal Server Error
-    parameters:
-      - schema:
-          type: string
-        name: user
-        in: path
-        required: true
-        description: The username of who you want to check availability for
-      - schema:
-          type: string
-        name: dateFrom
-        in: path
-        required: true
-        description: The timestamp of which time you want to get busy times from
-      - schema:
-          type: string
-        name: dateTo
-        in: path
-        required: true
-        description: The timestamp of which time you want to get busy times until
   /api/availability/calendar:
     get:
       description: Gets the user's selected calendars.

apps/web/components/AddToHomescreen.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { FiX } from "@calcom/ui/components/icon";
+import { X } from "@calcom/ui/components/icon";
 
 export default function AddToHomescreen() {
   const { t } = useLocale();
@@ -40,7 +40,7 @@ export default function AddToHomescreen() {
                 type="button"
                 className="-mr-1 flex rounded-md p-2 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
                 <span className="sr-only">{t("dismiss")}</span>
-                <FiX className="text-inverted h-6 w-6" aria-hidden="true" />
+                <X className="text-inverted h-6 w-6" aria-hidden="true" />
               </button>
             </div>
           </div>

apps/web/components/AppListCard.tsx

@@ -6,7 +6,7 @@ import { z } from "zod";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
 import { Badge, ListItemText } from "@calcom/ui";
-import { FiAlertCircle } from "@calcom/ui/components/icon";
+import { AlertCircle } from "@calcom/ui/components/icon";
 
 type ShouldHighlight = { slug: string; shouldHighlight: true } | { shouldHighlight?: never; slug?: never };
 
@@ -77,7 +77,7 @@ export default function AppListCard(props: AppListCardProps) {
           <ListItemText component="p">{description}</ListItemText>
           {invalidCredential && (
             <div className="flex gap-x-2 pt-2">
-              <FiAlertCircle className="h-8 w-8 text-red-500 sm:h-4 sm:w-4" />
+              <AlertCircle className="h-8 w-8 text-red-500 sm:h-4 sm:w-4" />
               <ListItemText component="p" className="whitespace-pre-wrap text-red-500">
                 {t("invalid_credential")}
               </ListItemText>

apps/web/components/Embed.tsx

@@ -1,5 +1,6 @@
 import { Collapsible, CollapsibleContent } from "@radix-ui/react-collapsible";
 import classNames from "classnames";
+import type { TFunction } from "next-i18next";
 import type { NextRouter } from "next/router";
 import { useRouter } from "next/router";
 import type { MutableRefObject, RefObject } from "react";
@@ -21,10 +22,9 @@ import {
   TextArea,
   TextField,
   ColorPicker,
+  Select,
 } from "@calcom/ui";
-import { FiCode, FiTrello, FiSun, FiArrowLeft } from "@calcom/ui/components/icon";
-
-import Select from "@components/ui/form/Select";
+import { Code, Trello, Sun, ArrowLeft } from "@calcom/ui/components/icon";
 
 type EmbedType = "inline" | "floating-popup" | "element-click";
 type EmbedFramework = "react" | "HTML";
@@ -305,195 +305,194 @@ const getEmbedTypeSpecificString = ({
   return "";
 };
 
-const embeds: {
-  illustration: React.ReactElement;
-  title: string;
-  subtitle: string;
-  type: EmbedType;
-}[] = [
-  {
-    title: "Inline Embed",
-    subtitle: "Loads your event type directly inline with your other website content.",
-    type: "inline",
-    illustration: (
-      <svg
-        width="100%"
-        height="100%"
-        className="rounded-md"
-        viewBox="0 0 308 265"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg">
-        <path
-          d="M0 1.99999C0 0.895423 0.895431 0 2 0H306C307.105 0 308 0.895431 308 2V263C308 264.105 307.105 265 306 265H2C0.895431 265 0 264.105 0 263V1.99999Z"
-          fill="white"
-        />
-        <rect x="24" width="260" height="38.5" rx="6" fill="#F3F4F6" />
-        <rect x="24.5" y="51" width="139" height="163" rx="1.5" fill="#F8F8F8" />
-        <rect opacity="0.8" x="48" y="74.5" width="80" height="8" rx="6" fill="#F3F4F6" />
-        <rect x="48" y="86.5" width="48" height="4" rx="6" fill="#F3F4F6" />
-        <rect x="49" y="99.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="61" y="99.5" width="6" height="6" rx="1" fill="#3E3E3E" />
-        <rect x="73" y="99.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="85" y="99.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="97" y="99.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="109" y="99.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="121" y="99.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="133" y="99.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="85" y="113.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="97" y="113.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="109" y="113.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="121" y="113.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="133" y="113.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="49" y="125.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="61" y="125.5" width="6" height="6" rx="1" fill="#3E3E3E" />
-        <path
-          d="M61 124.5H67V122.5H61V124.5ZM68 125.5V131.5H70V125.5H68ZM67 132.5H61V134.5H67V132.5ZM60 131.5V125.5H58V131.5H60ZM61 132.5C60.4477 132.5 60 132.052 60 131.5H58C58 133.157 59.3431 134.5 61 134.5V132.5ZM68 131.5C68 132.052 67.5523 132.5 67 132.5V134.5C68.6569 134.5 70 133.157 70 131.5H68ZM67 124.5C67.5523 124.5 68 124.948 68 125.5H70C70 123.843 68.6569 122.5 67 122.5V124.5ZM61 122.5C59.3431 122.5 58 123.843 58 125.5H60C60 124.948 60.4477 124.5 61 124.5V122.5Z"
-          fill="#3E3E3E"
-        />
-        <rect x="73" y="125.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="85" y="125.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="97" y="125.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="109" y="125.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="121" y="125.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="133" y="125.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="49" y="137.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="61" y="137.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="73" y="137.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="85" y="137.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="97" y="137.5" width="6" height="6" rx="1" fill="#3E3E3E" />
-        <rect x="109" y="137.5" width="6" height="6" rx="1" fill="#3E3E3E" />
-        <rect x="121" y="137.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="133" y="137.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="49" y="149.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="61" y="149.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="73" y="149.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="85" y="149.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="97" y="149.5" width="6" height="6" rx="1" fill="#3E3E3E" />
-        <rect x="109" y="149.5" width="6" height="6" rx="1" fill="#3E3E3E" />
-        <rect x="121" y="149.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="133" y="149.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="49" y="161.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="61" y="161.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="73" y="161.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="85" y="161.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="97" y="161.5" width="6" height="6" rx="1" fill="#3E3E3E" />
-        <rect x="109" y="161.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="24.5" y="51" width="139" height="163" rx="6" stroke="#292929" />
-        <rect x="176" y="50.5" width="108" height="164" rx="6" fill="#F3F4F6" />
-        <rect x="24" y="226.5" width="260" height="38.5" rx="6" fill="#F3F4F6" />
-      </svg>
-    ),
-  },
-  {
-    title: "Floating pop-up button",
-    subtitle: "Adds a floating button on your site that launches Cal in a dialog.",
-    type: "floating-popup",
-    illustration: (
-      <svg
-        width="100%"
-        height="100%"
-        className="rounded-md"
-        viewBox="0 0 308 265"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg">
-        <path
-          d="M0 1.99999C0 0.895423 0.895431 0 2 0H306C307.105 0 308 0.895431 308 2V263C308 264.105 307.105 265 306 265H2C0.895431 265 0 264.105 0 263V1.99999Z"
-          fill="white"
-        />
-        <rect x="24" width="260" height="38.5" rx="6" fill="#F3F4F6" />
-        <rect x="24" y="50.5" width="120" height="76" rx="6" fill="#F3F4F6" />
-        <rect x="24" y="138.5" width="120" height="76" rx="6" fill="#F3F4F6" />
-        <rect x="156" y="50.5" width="128" height="164" rx="6" fill="#F3F4F6" />
-        <rect x="24" y="226.5" width="260" height="38.5" rx="6" fill="#F3F4F6" />
-        <rect x="226" y="223.5" width="66" height="26" rx="6" fill="#292929" />
-        <rect x="242" y="235.5" width="34" height="2" rx="1" fill="white" />
-      </svg>
-    ),
-  },
-  {
-    title: "Pop up via element click",
-    subtitle: "Open your Cal dialog when someone clicks an element.",
-    type: "element-click",
-    illustration: (
-      <svg
-        width="100%"
-        height="100%"
-        className="rounded-md"
-        viewBox="0 0 308 265"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg">
-        <path
-          d="M0 1.99999C0 0.895423 0.895431 0 2 0H306C307.105 0 308 0.895431 308 2V263C308 264.105 307.105 265 306 265H2C0.895431 265 0 264.105 0 263V1.99999Z"
-          fill="white"
-        />
-        <rect x="24" y="0.50293" width="260" height="24" rx="6" fill="#F3F4F6" />
-        <rect x="24" y="35" width="259" height="192" rx="5.5" fill="#F9FAFB" />
-        <g filter="url(#filter0_i_3223_14162)">
-          <rect opacity="0.8" x="40" y="99" width="24" height="24" rx="2" fill="#E5E7EB" />
-          <rect x="40" y="127" width="48" height="8" rx="1" fill="#E5E7EB" />
-          <rect x="40" y="139" width="82" height="8" rx="1" fill="#E5E7EB" />
-          <rect x="40" y="151" width="34" height="4" rx="1" fill="#E5E7EB" />
-          <rect x="40" y="159" width="34" height="4" rx="1" fill="#E5E7EB" />
-        </g>
-        <rect x="152" y="48" width="2" height="169" rx="2" fill="#E5E7EB" />
+const embeds = (t: TFunction) =>
+  (() => {
+    return [
+      {
+        title: t("inline_embed"),
+        subtitle: t("load_inline_content"),
+        type: "inline",
+        illustration: (
+          <svg
+            width="100%"
+            height="100%"
+            className="rounded-md"
+            viewBox="0 0 308 265"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M0 1.99999C0 0.895423 0.895431 0 2 0H306C307.105 0 308 0.895431 308 2V263C308 264.105 307.105 265 306 265H2C0.895431 265 0 264.105 0 263V1.99999Z"
+              fill="white"
+            />
+            <rect x="24" width="260" height="38.5" rx="6" fill="#F3F4F6" />
+            <rect x="24.5" y="51" width="139" height="163" rx="1.5" fill="#F8F8F8" />
+            <rect opacity="0.8" x="48" y="74.5" width="80" height="8" rx="6" fill="#F3F4F6" />
+            <rect x="48" y="86.5" width="48" height="4" rx="6" fill="#F3F4F6" />
+            <rect x="49" y="99.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="61" y="99.5" width="6" height="6" rx="1" fill="#3E3E3E" />
+            <rect x="73" y="99.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="85" y="99.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="97" y="99.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="109" y="99.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="121" y="99.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="133" y="99.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="85" y="113.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="97" y="113.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="109" y="113.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="121" y="113.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="133" y="113.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="49" y="125.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="61" y="125.5" width="6" height="6" rx="1" fill="#3E3E3E" />
+            <path
+              d="M61 124.5H67V122.5H61V124.5ZM68 125.5V131.5H70V125.5H68ZM67 132.5H61V134.5H67V132.5ZM60 131.5V125.5H58V131.5H60ZM61 132.5C60.4477 132.5 60 132.052 60 131.5H58C58 133.157 59.3431 134.5 61 134.5V132.5ZM68 131.5C68 132.052 67.5523 132.5 67 132.5V134.5C68.6569 134.5 70 133.157 70 131.5H68ZM67 124.5C67.5523 124.5 68 124.948 68 125.5H70C70 123.843 68.6569 122.5 67 122.5V124.5ZM61 122.5C59.3431 122.5 58 123.843 58 125.5H60C60 124.948 60.4477 124.5 61 124.5V122.5Z"
+              fill="#3E3E3E"
+            />
+            <rect x="73" y="125.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="85" y="125.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="97" y="125.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="109" y="125.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="121" y="125.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="133" y="125.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="49" y="137.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="61" y="137.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="73" y="137.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="85" y="137.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="97" y="137.5" width="6" height="6" rx="1" fill="#3E3E3E" />
+            <rect x="109" y="137.5" width="6" height="6" rx="1" fill="#3E3E3E" />
+            <rect x="121" y="137.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="133" y="137.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="49" y="149.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="61" y="149.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="73" y="149.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="85" y="149.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="97" y="149.5" width="6" height="6" rx="1" fill="#3E3E3E" />
+            <rect x="109" y="149.5" width="6" height="6" rx="1" fill="#3E3E3E" />
+            <rect x="121" y="149.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="133" y="149.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="49" y="161.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="61" y="161.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="73" y="161.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="85" y="161.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="97" y="161.5" width="6" height="6" rx="1" fill="#3E3E3E" />
+            <rect x="109" y="161.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+            <rect x="24.5" y="51" width="139" height="163" rx="6" stroke="#292929" />
+            <rect x="176" y="50.5" width="108" height="164" rx="6" fill="#F3F4F6" />
+            <rect x="24" y="226.5" width="260" height="38.5" rx="6" fill="#F3F4F6" />
+          </svg>
+        ),
+      },
+      {
+        title: t("floating_pop_up_button"),
+        subtitle: t("floating_button_trigger_modal"),
+        type: "floating-popup",
+        illustration: (
+          <svg
+            width="100%"
+            height="100%"
+            className="rounded-md"
+            viewBox="0 0 308 265"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M0 1.99999C0 0.895423 0.895431 0 2 0H306C307.105 0 308 0.895431 308 2V263C308 264.105 307.105 265 306 265H2C0.895431 265 0 264.105 0 263V1.99999Z"
+              fill="white"
+            />
+            <rect x="24" width="260" height="38.5" rx="6" fill="#F3F4F6" />
+            <rect x="24" y="50.5" width="120" height="76" rx="6" fill="#F3F4F6" />
+            <rect x="24" y="138.5" width="120" height="76" rx="6" fill="#F3F4F6" />
+            <rect x="156" y="50.5" width="128" height="164" rx="6" fill="#F3F4F6" />
+            <rect x="24" y="226.5" width="260" height="38.5" rx="6" fill="#F3F4F6" />
+            <rect x="226" y="223.5" width="66" height="26" rx="6" fill="#292929" />
+            <rect x="242" y="235.5" width="34" height="2" rx="1" fill="white" />
+          </svg>
+        ),
+      },
+      {
+        title: t("pop_up_element_click"),
+        subtitle: t("open_dialog_with_element_click"),
+        type: "element-click",
+        illustration: (
+          <svg
+            width="100%"
+            height="100%"
+            className="rounded-md"
+            viewBox="0 0 308 265"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M0 1.99999C0 0.895423 0.895431 0 2 0H306C307.105 0 308 0.895431 308 2V263C308 264.105 307.105 265 306 265H2C0.895431 265 0 264.105 0 263V1.99999Z"
+              fill="white"
+            />
+            <rect x="24" y="0.50293" width="260" height="24" rx="6" fill="#F3F4F6" />
+            <rect x="24" y="35" width="259" height="192" rx="5.5" fill="#F9FAFB" />
+            <g filter="url(#filter0_i_3223_14162)">
+              <rect opacity="0.8" x="40" y="99" width="24" height="24" rx="2" fill="#E5E7EB" />
+              <rect x="40" y="127" width="48" height="8" rx="1" fill="#E5E7EB" />
+              <rect x="40" y="139" width="82" height="8" rx="1" fill="#E5E7EB" />
+              <rect x="40" y="151" width="34" height="4" rx="1" fill="#E5E7EB" />
+              <rect x="40" y="159" width="34" height="4" rx="1" fill="#E5E7EB" />
+            </g>
+            <rect x="152" y="48" width="2" height="169" rx="2" fill="#E5E7EB" />
+
+            <rect opacity="0.8" x="176" y="84" width="80" height="8" rx="2" fill="#E5E7EB" />
+            <rect x="176" y="96" width="48" height="4" rx="1" fill="#E5E7EB" />
+            <rect x="177" y="109" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="189" y="109" width="6" height="6" rx="1" fill="#0D121D" />
+            <rect x="201" y="109" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="213" y="109" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="225" y="109" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="237" y="109" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="249" y="109" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="261" y="109" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="213" y="123" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="225" y="123" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="237" y="123" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="249" y="123" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="261" y="123" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="177" y="135" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="189" y="135" width="6" height="6" rx="1" fill="#0D121D" />
+            <rect x="187.3" y="133.4" width="9" height="9" rx="1.5" stroke="#0D121D" />
+            <rect x="201" y="135" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="213" y="135" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="225" y="135" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="237" y="135" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="249" y="135" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="261" y="135" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="177" y="147" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="189" y="147" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="201" y="147" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="213" y="147" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="225" y="147" width="6" height="6" rx="1" fill="#0D121D" />
+            <rect x="237" y="147" width="6" height="6" rx="1" fill="#0D121D" />
+            <rect x="249" y="147" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="261" y="147" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="177" y="159" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="189" y="159" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="201" y="159" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="213" y="159" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="225" y="159" width="6" height="6" rx="1" fill="#0D121D" />
+            <rect x="237" y="159" width="6" height="6" rx="1" fill="#0D121D" />
+            <rect x="249" y="159" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="261" y="159" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="177" y="171" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="189" y="171" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="201" y="171" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="213" y="171" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="225" y="171" width="6" height="6" rx="1" fill="#0D121D" />
+            <rect x="237" y="171" width="6" height="6" rx="1" fill="#E5E7EB" />
+            <rect x="24" y="35" width="259" height="192" rx="5.5" stroke="#101010" />
+            <rect x="24" y="241.503" width="260" height="24" rx="6" fill="#F3F4F6" />
+          </svg>
+        ),
+      },
+    ];
+  })();
 
-        <rect opacity="0.8" x="176" y="84" width="80" height="8" rx="2" fill="#E5E7EB" />
-        <rect x="176" y="96" width="48" height="4" rx="1" fill="#E5E7EB" />
-        <rect x="177" y="109" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="189" y="109" width="6" height="6" rx="1" fill="#0D121D" />
-        <rect x="201" y="109" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="213" y="109" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="225" y="109" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="237" y="109" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="249" y="109" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="261" y="109" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="213" y="123" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="225" y="123" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="237" y="123" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="249" y="123" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="261" y="123" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="177" y="135" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="189" y="135" width="6" height="6" rx="1" fill="#0D121D" />
-        <rect x="187.3" y="133.4" width="9" height="9" rx="1.5" stroke="#0D121D" />
-        <rect x="201" y="135" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="213" y="135" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="225" y="135" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="237" y="135" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="249" y="135" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="261" y="135" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="177" y="147" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="189" y="147" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="201" y="147" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="213" y="147" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="225" y="147" width="6" height="6" rx="1" fill="#0D121D" />
-        <rect x="237" y="147" width="6" height="6" rx="1" fill="#0D121D" />
-        <rect x="249" y="147" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="261" y="147" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="177" y="159" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="189" y="159" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="201" y="159" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="213" y="159" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="225" y="159" width="6" height="6" rx="1" fill="#0D121D" />
-        <rect x="237" y="159" width="6" height="6" rx="1" fill="#0D121D" />
-        <rect x="249" y="159" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="261" y="159" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="177" y="171" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="189" y="171" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="201" y="171" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="213" y="171" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="225" y="171" width="6" height="6" rx="1" fill="#0D121D" />
-        <rect x="237" y="171" width="6" height="6" rx="1" fill="#E5E7EB" />
-        <rect x="24" y="35" width="259" height="192" rx="5.5" stroke="#101010" />
-        <rect x="24" y="241.503" width="260" height="24" rx="6" fill="#F3F4F6" />
-      </svg>
-    ),
-  },
-];
 const tabs = [
   {
     name: "HTML",
     href: "embedTabName=embed-code",
-    icon: FiCode,
+    icon: Code,
     type: "code",
     Component: forwardRef<
       HTMLTextAreaElement | HTMLIFrameElement | null,
@@ -534,11 +533,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ
 <!-- Cal ${embedType} embed code ends -->`
             }
           />
-          <p className="text-subtle hidden text-sm">
-            {t(
-              "Need help? See our guides for embedding Cal on Wix, Squarespace, or WordPress, check our common questions, or explore advanced embed options."
-            )}
-          </p>
+          <p className="text-subtle hidden text-sm">{t("need_help_embedding")}</p>
         </>
       );
     }),
@@ -546,7 +541,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ
   {
     name: "React",
     href: "embedTabName=embed-react",
-    icon: FiCode,
+    icon: Code,
     type: "code",
     Component: forwardRef<
       HTMLTextAreaElement | HTMLIFrameElement | null,
@@ -586,7 +581,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, prev
   {
     name: "Preview",
     href: "embedTabName=embed-preview",
-    icon: FiTrello,
+    icon: Trello,
     type: "iframe",
     Component: forwardRef<
       HTMLIFrameElement | HTMLTextAreaElement | null,
@@ -622,7 +617,7 @@ Cal("init", {origin:"${WEBAPP_URL}"});
 const ThemeSelectControl = ({ children, ...props }: ControlProps<{ value: Theme; label: string }, false>) => {
   return (
     <components.Control {...props}>
-      <FiSun className="text-subtle ml-2 h-4 w-4" />
+      <Sun className="text-subtle mr-2 h-4 w-4" />
       {children}
     </components.Control>
   );
@@ -642,7 +637,7 @@ const ChooseEmbedTypesDialogContent = () => {
         </div>
       </div>
       <div className="items-start space-y-2 md:flex md:space-y-0">
-        {embeds.map((embed, index) => (
+        {embeds(t).map((embed, index) => (
           <button
             className="hover:bg-subtle bg-muted w-full rounded-md border border-transparent p-6 text-left hover:rounded-md ltr:mr-4 ltr:last:mr-0 rtl:ml-4 rtl:last:ml-0 lg:w-1/3"
             key={index}
@@ -692,7 +687,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
     });
 
   const refOfEmbedCodesRefs = useRef(embedCodeRefs);
-  const embed = embeds.find((embed) => embed.type === embedType);
+  const embed = embeds(t).find((embed) => embed.type === embedType);
 
   const [isEmbedCustomizationOpen, setIsEmbedCustomizationOpen] = useState(true);
   const [isBookingCustomizationOpen, setIsBookingCustomizationOpen] = useState(true);
@@ -806,11 +801,11 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   const FloatingPopupPositionOptions = [
     {
       value: "bottom-right",
-      label: "Bottom Right",
+      label: "Bottom right",
     },
     {
       value: "bottom-left",
-      label: "Bottom Left",
+      label: "Bottom left",
     },
   ];
 
@@ -830,11 +825,11 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
               onClick={() => {
                 removeQueryParams(router, ["embedType", "embedTabName"]);
               }}>
-              <FiArrowLeft className="mr-4 w-4" />
+              <ArrowLeft className="mr-4 w-4" />
             </button>
             {embed.title}
           </h3>
-          <h4 className="text-emphasis mb-6 text-sm font-normal">{embed.subtitle}</h4>
+          <h4 className="text-subtle mb-6 text-sm font-normal">{embed.subtitle}</h4>
           <div className="flex flex-col">
             <div className={classNames("font-medium", embedType === "element-click" ? "hidden" : "")}>
               <Collapsible
@@ -844,7 +839,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                   <div className={classNames(embedType === "inline" ? "block" : "hidden")}>
                     {/*TODO: Add Auto/Fixed toggle from Figma */}
                     <div className="text-default mb-[9px] text-sm">Window sizing</div>
-                    <div className="justify-left flex items-center !font-normal">
+                    <div className="justify-left mb-6 flex items-center !font-normal ">
                       <div className="mr-[9px]">
                         <TextField
                           labelProps={{ className: "hidden" }}
@@ -892,10 +887,10 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                   </div>
                   <div
                     className={classNames(
-                      "mt-4 items-center justify-between",
+                      "items-center justify-between",
                       embedType === "floating-popup" ? "text-emphasis" : "hidden"
                     )}>
-                    <div className="mb-2 text-sm">Button Text</div>
+                    <div className="mb-2 text-sm">Button text</div>
                     {/* Default Values should come from preview iframe */}
                     <TextField
                       labelProps={{ className: "hidden" }}
@@ -910,7 +905,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                           };
                         });
                       }}
-                      defaultValue="Book my Cal"
+                      defaultValue={t("book_my_cal")}
                       required
                     />
                   </div>
@@ -935,14 +930,14 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                         });
                       }}
                     />
-                    <div className="text-default text-sm">Display Calendar Icon Button</div>
+                    <div className="text-default my-2 text-sm">Display calendar icon</div>
                   </div>
                   <div
                     className={classNames(
                       "mt-4 items-center justify-between",
                       embedType === "floating-popup" ? "text-emphasis" : "hidden"
                     )}>
-                    <div className="mb-2">Position of Button</div>
+                    <div className="mb-2">Position of button</div>
                     <Select
                       onChange={(position) => {
                         setPreviewState((previewState) => {
@@ -959,54 +954,50 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                       options={FloatingPopupPositionOptions}
                     />
                   </div>
-                  <div
-                    className={classNames(
-                      "mt-4",
-                      embedType === "floating-popup" ? "text-emphasis" : "hidden"
-                    )}>
-                    <div>Button Color</div>
-                    <div className="w-full">
-                      <ColorPicker
-                        popoverAlign="start"
-                        container={dialogContentRef?.current ?? undefined}
-                        defaultValue="#000000"
-                        onChange={(color) => {
-                          setPreviewState((previewState) => {
-                            return {
-                              ...previewState,
-                              floatingPopup: {
-                                ...previewState.floatingPopup,
-                                buttonColor: color,
-                              },
-                            };
-                          });
-                        }}
-                      />
+                  <div className="mt-3 flex flex-col xl:flex-row xl:justify-between">
+                    <div className={classNames("mt-4", embedType === "floating-popup" ? "" : "hidden")}>
+                      <div className="whitespace-nowrap">Button color</div>
+                      <div className="mt-2 w-40 xl:mt-0 xl:w-full">
+                        <ColorPicker
+                          className="w-[130px]"
+                          popoverAlign="start"
+                          container={dialogContentRef?.current ?? undefined}
+                          defaultValue="#000000"
+                          onChange={(color) => {
+                            setPreviewState((previewState) => {
+                              return {
+                                ...previewState,
+                                floatingPopup: {
+                                  ...previewState.floatingPopup,
+                                  buttonColor: color,
+                                },
+                              };
+                            });
+                          }}
+                        />
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    className={classNames(
-                      "mt-4",
-                      embedType === "floating-popup" ? "text-emphasis" : "hidden"
-                    )}>
-                    <div>Text Color</div>
-                    <div className="w-full">
-                      <ColorPicker
-                        popoverAlign="start"
-                        container={dialogContentRef?.current ?? undefined}
-                        defaultValue="#000000"
-                        onChange={(color) => {
-                          setPreviewState((previewState) => {
-                            return {
-                              ...previewState,
-                              floatingPopup: {
-                                ...previewState.floatingPopup,
-                                buttonTextColor: color,
-                              },
-                            };
-                          });
-                        }}
-                      />
+                    <div className={classNames("mt-4", embedType === "floating-popup" ? "" : "hidden")}>
+                      <div className="whitespace-nowrap">Text color</div>
+                      <div className="mt-2 mb-6 w-40 xl:mt-0 xl:w-full">
+                        <ColorPicker
+                          className="w-[130px]"
+                          popoverAlign="start"
+                          container={dialogContentRef?.current ?? undefined}
+                          defaultValue="#000000"
+                          onChange={(color) => {
+                            setPreviewState((previewState) => {
+                              return {
+                                ...previewState,
+                                floatingPopup: {
+                                  ...previewState.floatingPopup,
+                                  buttonTextColor: color,
+                                },
+                              };
+                            });
+                          }}
+                        />
+                      </div>
                     </div>
                   </div>
                 </CollapsibleContent>
@@ -1017,7 +1008,30 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                 open={isBookingCustomizationOpen}
                 onOpenChange={() => setIsBookingCustomizationOpen((val) => !val)}>
                 <CollapsibleContent>
-                  <div className="mt-6 text-sm">
+                  <div className="text-sm">
+                    <Label className="mb-6">
+                      <div className="mb-2">Theme</div>
+                      <Select
+                        className="w-full"
+                        defaultValue={ThemeOptions[0]}
+                        components={{
+                          Control: ThemeSelectControl,
+                          IndicatorSeparator: () => null,
+                        }}
+                        onChange={(option) => {
+                          if (!option) {
+                            return;
+                          }
+                          setPreviewState((previewState) => {
+                            return {
+                              ...previewState,
+                              theme: option.value,
+                            };
+                          });
+                        }}
+                        options={ThemeOptions}
+                      />
+                    </Label>
                     <div className="mb-6 flex items-center justify-start space-x-2 rtl:space-x-reverse">
                       <Switch
                         checked={previewState.hideEventTypeDetails}
@@ -1056,29 +1070,6 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                         </div>
                       </Label>
                     ))}
-                    <Label>
-                      <div className="mb-2">Theme</div>
-                      <Select
-                        className="w-full"
-                        defaultValue={ThemeOptions[0]}
-                        components={{
-                          Control: ThemeSelectControl,
-                          IndicatorSeparator: () => null,
-                        }}
-                        onChange={(option) => {
-                          if (!option) {
-                            return;
-                          }
-                          setPreviewState((previewState) => {
-                            return {
-                              ...previewState,
-                              theme: option.value,
-                            };
-                          });
-                        }}
-                        options={ThemeOptions}
-                      />
-                    </Label>
                   </div>
                 </CollapsibleContent>
               </Collapsible>

apps/web/components/I18nLanguageHandler.tsx

@@ -1,7 +1,7 @@
+import { isEmpty } from "lodash";
 import { useTranslation } from "next-i18next";
 import { useEffect } from "react";
 
-import { getDirFromLang } from "@calcom/lib/i18n";
 import { trpc } from "@calcom/trpc/react";
 
 export function useViewerI18n() {
@@ -22,16 +22,18 @@ export function useViewerI18n() {
  */
 const I18nLanguageHandler = (): null => {
   const { i18n } = useTranslation("common");
-  const locale = useViewerI18n().data?.locale || "en";
+  const locale = useViewerI18n().data?.locale || i18n.language;
 
   useEffect(() => {
-    if (locale && i18n.language && i18n.language !== locale) {
-      if (typeof i18n.changeLanguage === "function") i18n.changeLanguage(locale);
+    // bail early when i18n = {}
+    if (isEmpty(i18n)) return;
+    // if locale is ready and the i18n.language does != locale - changeLanguage
+    if (locale && i18n.language !== locale) {
+      i18n.changeLanguage(locale);
     }
-
-    const dir = getDirFromLang(locale);
+    // set dir="rtl|ltr"
+    document.dir = i18n.dir();
     document.documentElement.setAttribute("lang", locale);
-    document.documentElement.setAttribute("dir", dir);
   }, [locale, i18n]);
 
   return null;

apps/web/components/ImageUploader.tsx

@@ -1,167 +0,0 @@
-import type { FormEvent } from "react";
-import { useCallback, useEffect, useState } from "react";
-import Cropper from "react-easy-crop";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui";
-
-import type { Area } from "@lib/cropImage";
-import { getCroppedImg } from "@lib/cropImage";
-import { useFileReader } from "@lib/hooks/useFileReader";
-
-import Slider from "@components/Slider";
-
-type ImageUploaderProps = {
-  id: string;
-  buttonMsg: string;
-  handleAvatarChange: (imageSrc: string) => void;
-  imageSrc?: string;
-  target: string;
-};
-
-interface FileEvent<T = Element> extends FormEvent<T> {
-  target: EventTarget & T;
-}
-
-// This is separate to prevent loading the component until file upload
-function CropContainer({
-  onCropComplete,
-  imageSrc,
-}: {
-  imageSrc: string;
-  onCropComplete: (croppedAreaPixels: Area) => void;
-}) {
-  const { t } = useLocale();
-  const [crop, setCrop] = useState({ x: 0, y: 0 });
-  const [zoom, setZoom] = useState(1);
-
-  const handleZoomSliderChange = (value: number) => {
-    value < 1 ? setZoom(1) : setZoom(value);
-  };
-
-  return (
-    <div className="crop-container h-40 max-h-40 w-40 rounded-full">
-      <div className="relative h-40 w-40 rounded-full">
-        <Cropper
-          image={imageSrc}
-          crop={crop}
-          zoom={zoom}
-          aspect={1}
-          onCropChange={setCrop}
-          onCropComplete={(croppedArea, croppedAreaPixels) => onCropComplete(croppedAreaPixels)}
-          onZoomChange={setZoom}
-        />
-      </div>
-      <Slider
-        value={zoom}
-        min={1}
-        max={3}
-        step={0.1}
-        label={t("slide_zoom_drag_instructions")}
-        changeHandler={handleZoomSliderChange}
-      />
-    </div>
-  );
-}
-
-/** @deprecated Use `packages/ui/v2/core/ImageUploader.tsx` */
-export default function ImageUploader({
-  target,
-  id,
-  buttonMsg,
-  handleAvatarChange,
-  ...props
-}: ImageUploaderProps) {
-  const { t } = useLocale();
-  const [imageSrc, setImageSrc] = useState<string | null>(null);
-  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);
-
-  const [{ result }, setFile] = useFileReader({
-    method: "readAsDataURL",
-  });
-
-  useEffect(() => {
-    if (props.imageSrc) setImageSrc(props.imageSrc);
-  }, [props.imageSrc]);
-
-  const onInputFile = (e: FileEvent<HTMLInputElement>) => {
-    if (!e.target.files?.length) {
-      return;
-    }
-    setFile(e.target.files[0]);
-  };
-
-  const showCroppedImage = useCallback(
-    async (croppedAreaPixels: Area | null) => {
-      try {
-        if (!croppedAreaPixels) return;
-        const croppedImage = await getCroppedImg(
-          result as string /* result is always string when using readAsDataUrl */,
-          croppedAreaPixels
-        );
-        setImageSrc(croppedImage);
-        handleAvatarChange(croppedImage);
-      } catch (e) {
-        console.error(e);
-      }
-    },
-    [result, handleAvatarChange]
-  );
-
-  return (
-    <Dialog
-      onOpenChange={
-        (opened) => !opened && setFile(null) // unset file on close
-      }>
-      <DialogTrigger asChild>
-        <div className="flex items-center">
-          <Button color="secondary" type="button" className="py-1 text-xs">
-            {buttonMsg}
-          </Button>
-        </div>
-      </DialogTrigger>
-      <DialogContent>
-        <div className="mb-4 sm:flex sm:items-start">
-          <div className="mt-3 text-center sm:mt-0 sm:text-left">
-            <h3 className="font-cal text-emphasis text-lg leading-6" id="modal-title">
-              {t("upload_target", { target })}
-            </h3>
-          </div>
-        </div>
-        <div className="mb-4">
-          <div className="cropper mt-6 flex flex-col items-center justify-center p-8">
-            {!result && (
-              <div className="bg-muted flex h-20 max-h-20 w-20 items-center justify-start rounded-full">
-                {!imageSrc && (
-                  <p className="text-inverted w-full text-center text-sm sm:text-xs">
-                    {t("no_target", { target })}
-                  </p>
-                )}
-                {imageSrc && (
-                  // eslint-disable-next-line @next/next/no-img-element
-                  <img className="h-20 w-20 rounded-full" src={imageSrc} alt={target} />
-                )}
-              </div>
-            )}
-            {result && <CropContainer imageSrc={result as string} onCropComplete={setCroppedAreaPixels} />}
-            <label className="border-default bg-default hover:bg-mutedover:text-emphasis dark:hover:bg-inverted text-default dark:text-inverted focus:ring-empthasis mt-8 rounded-sm border px-3 py-1 text-xs font-medium leading-4 focus:outline-none focus:ring-2 focus:ring-offset-1 dark:border-gray-800 dark:bg-transparent">
-              <input
-                onInput={onInputFile}
-                type="file"
-                name={id}
-                placeholder={t("upload_image")}
-                className="pointer-events-none absolute mt-4 opacity-0"
-                accept="image/*"
-              />
-              {t("choose_a_file")}
-            </label>
-          </div>
-        </div>
-        <div className="mt-5 gap-x-2 sm:mt-4 sm:flex sm:flex-row-reverse">
-          <DialogClose onClick={() => showCroppedImage(croppedAreaPixels)}>{t("save")}</DialogClose>
-          <DialogClose color="secondary">{t("cancel")}</DialogClose>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}

apps/web/components/NavTabs.tsx

@@ -1,4 +1,3 @@
-import { AdminRequired } from "components/ui/AdminRequired";
 import { noop } from "lodash";
 import type { LinkProps } from "next/link";
 import Link from "next/link";
@@ -6,6 +5,7 @@ import { useRouter } from "next/router";
 import type { FC, MouseEventHandler } from "react";
 import { Fragment } from "react";
 
+import { PermissionContainer } from "@calcom/features/auth/PermissionContainer";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 import classNames from "@lib/classNames";
@@ -60,7 +60,7 @@ const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
               }
             : noop;
 
-          const Component = tab.adminRequired ? AdminRequired : Fragment;
+          const Component = tab.adminRequired ? PermissionContainer : Fragment;
           const className = tab.className || "";
           return (
             <Component key={tab.name}>

apps/web/components/PageWrapper.tsx

@@ -0,0 +1,82 @@
+import { DefaultSeo } from "next-seo";
+import { Inter } from "next/font/google";
+import localFont from "next/font/local";
+import Script from "next/script";
+
+import "@calcom/embed-core/src/embed-iframe";
+import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
+
+import type { AppProps } from "@lib/app-providers";
+import AppProviders from "@lib/app-providers";
+import { seoConfig } from "@lib/config/next-seo.config";
+
+import I18nLanguageHandler from "@components/I18nLanguageHandler";
+
+export interface CalPageWrapper {
+  (props?: any): JSX.Element;
+  PageWrapper?: AppProps["Component"]["PageWrapper"];
+}
+
+const interFont = Inter({ subsets: ["latin"], variable: "--font-inter", preload: true, display: "swap" });
+const calFont = localFont({
+  src: "../fonts/CalSans-SemiBold.woff2",
+  variable: "--font-cal",
+  preload: true,
+  display: "swap",
+});
+
+function PageWrapper(props: AppProps) {
+  const { Component, pageProps, err, router } = props;
+  let pageStatus = "200";
+
+  if (router.pathname === "/404") {
+    pageStatus = "404";
+  } else if (router.pathname === "/500") {
+    pageStatus = "500";
+  }
+
+  // On client side don't let nonce creep into DOM
+  // It also avoids hydration warning that says that Client has the nonce value but server has "" because browser removes nonce attributes before DOM is built
+  // See https://github.com/kentcdodds/nonce-hydration-issues
+  // Set "" only if server had it set otherwise keep it undefined because server has to match with client to avoid hydration error
+  const nonce = typeof window !== "undefined" ? (pageProps.nonce ? "" : undefined) : pageProps.nonce;
+  const providerProps = {
+    ...props,
+    pageProps: {
+      ...props.pageProps,
+      nonce,
+    },
+  };
+  // Use the layout defined at the page level, if available
+  const getLayout = Component.getLayout ?? ((page) => page);
+  return (
+    <AppProviders {...providerProps}>
+      <DefaultSeo {...seoConfig.defaultNextSeo} />
+      <I18nLanguageHandler />
+      <Script
+        nonce={nonce}
+        id="page-status"
+        dangerouslySetInnerHTML={{ __html: `window.CalComPageStatus = '${pageStatus}'` }}
+      />
+      <style jsx global>{`
+        :root {
+          --font-inter: ${interFont.style.fontFamily};
+          --font-cal: ${calFont.style.fontFamily};
+        }
+      `}</style>
+
+      {getLayout(
+        Component.requiresLicense ? (
+          <LicenseRequired>
+            <Component {...pageProps} err={err} />
+          </LicenseRequired>
+        ) : (
+          <Component {...pageProps} err={err} />
+        ),
+        router
+      )}
+    </AppProviders>
+  );
+}
+
+export default PageWrapper;

apps/web/components/SettingsShell.tsx

@@ -3,7 +3,7 @@ import React from "react";
 
 import Shell from "@calcom/features/shell/Shell";
 import { ErrorBoundary } from "@calcom/ui";
-import { FiCreditCard, FiKey, FiLock, FiTerminal, FiUser, FiUsers } from "@calcom/ui/components/icon";
+import { CreditCard, Key, Lock, Terminal, User, Users } from "@calcom/ui/components/icon";
 
 import NavTabs from "./NavTabs";
 
@@ -11,32 +11,32 @@ const tabs = [
   {
     name: "profile",
     href: "/settings/my-account/profile",
-    icon: FiUser,
+    icon: User,
   },
   {
     name: "teams",
     href: "/settings/teams",
-    icon: FiUsers,
+    icon: Users,
   },
   {
     name: "security",
     href: "/settings/security",
-    icon: FiKey,
+    icon: Key,
   },
   {
     name: "developer",
     href: "/settings/developer",
-    icon: FiTerminal,
+    icon: Terminal,
   },
   {
     name: "billing",
     href: "/settings/billing",
-    icon: FiCreditCard,
+    icon: CreditCard,
   },
   {
     name: "admin",
     href: "/settings/admin",
-    icon: FiLock,
+    icon: Lock,
     adminRequired: true,
   },
 ];
@@ -46,7 +46,7 @@ export default function SettingsShell({
   ...rest
 }: { children: React.ReactNode } & ComponentProps<typeof Shell>) {
   return (
-    <Shell {...rest}>
+    <Shell {...rest} hideHeadingOnMobile>
       <div className="sm:mx-auto">
         <NavTabs tabs={tabs} />
       </div>

apps/web/components/Slider.tsx

@@ -1,27 +0,0 @@
-import * as SliderPrimitive from "@radix-ui/react-slider";
-import React from "react";
-
-const Slider = ({
-  value,
-  label,
-  changeHandler,
-  ...props
-}: Omit<SliderPrimitive.SliderProps, "value"> & {
-  value: number;
-  label: string;
-  changeHandler: (value: number) => void;
-}) => (
-  <SliderPrimitive.Root
-    className="slider mt-2"
-    value={[value]}
-    aria-label={label}
-    onValueChange={(value: number[]) => changeHandler(value[0] ?? value)}
-    {...props}>
-    <SliderPrimitive.Track className="slider-track">
-      <SliderPrimitive.Range className="slider-range" />
-    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="slider-thumb" />
-  </SliderPrimitive.Root>
-);
-
-export default Slider;

apps/web/components/apps/AdditionalCalendarSelector.tsx

@@ -9,7 +9,7 @@ import {
   DropdownMenuItem,
   DropdownItem,
 } from "@calcom/ui";
-import { FiPlus } from "@calcom/ui/components/icon";
+import { Plus } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
 
@@ -40,7 +40,7 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
         return (
           <Dropdown modal={false}>
             <DropdownMenuTrigger asChild>
-              <Button StartIcon={FiPlus} color="secondary" {...(isLoading && { loading: isLoading })}>
+              <Button StartIcon={Plus} color="secondary" {...(isLoading && { loading: isLoading })}>
                 {t("add")}
               </Button>
             </DropdownMenuTrigger>
@@ -48,7 +48,7 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
               {options.map((data) => (
                 <DropdownMenuItem key={data.slug} className="focus:outline-none">
                   {data.slug === "add-new" ? (
-                    <DropdownItem StartIcon={FiPlus} color="minimal" href="/apps/categories/calendar">
+                    <DropdownItem StartIcon={Plus} color="minimal" href="/apps/categories/calendar">
                       {t("install_new_calendar_app")}
                     </DropdownItem>
                   ) : (

apps/web/components/apps/App.tsx

@@ -1,12 +1,11 @@
 import Link from "next/link";
-import { useRouter } from "next/router";
 import type { IframeHTMLAttributes } from "react";
 import React, { useState } from "react";
 
 import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
 import { InstallAppButton, AppDependencyComponent } from "@calcom/app-store/components";
 import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
-import LicenseRequired from "@calcom/features/ee/common/components/v2/LicenseRequired";
+import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import Shell from "@calcom/features/shell/Shell";
 import classNames from "@calcom/lib/classNames";
 import { APP_NAME, COMPANY_NAME, SUPPORT_MAIL_ADDRESS } from "@calcom/lib/constants";
@@ -14,16 +13,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import type { App as AppType } from "@calcom/types/App";
 import { Button, showToast, SkeletonButton, SkeletonText, HeadSeo, Badge } from "@calcom/ui";
-import {
-  FiBookOpen,
-  FiCheck,
-  FiExternalLink,
-  FiFile,
-  FiFlag,
-  FiMail,
-  FiPlus,
-  FiShield,
-} from "@calcom/ui/components/icon";
+import { BookOpen, Check, ExternalLink, File, Flag, Mail, Plus, Shield } from "@calcom/ui/components/icon";
 
 /* These app slugs all require Google Cal to be installed */
 
@@ -46,13 +36,13 @@ const Component = ({
   tos,
   privacy,
   isProOnly,
+  teamsPlanRequired,
   descriptionItems,
   isTemplate,
   dependencies,
 }: Parameters<typeof App>[0]) => {
-  const { t } = useLocale();
+  const { t, i18n } = useLocale();
   const hasDescriptionItems = descriptionItems && descriptionItems.length > 0;
-  const router = useRouter();
 
   const mutation = useAddAppMutation(null, {
     onSuccess: (data) => {
@@ -153,7 +143,7 @@ const Component = ({
           isGlobal ||
           (existingCredentials.length > 0 && allowedMultipleInstalls ? (
             <div className="flex space-x-3">
-              <Button StartIcon={FiCheck} color="secondary" disabled>
+              <Button StartIcon={Check} color="secondary" disabled>
                 {existingCredentials.length > 0
                   ? t("active_install", { count: existingCredentials.length })
                   : t("default")}
@@ -163,6 +153,7 @@ const Component = ({
                   type={type}
                   isProOnly={isProOnly}
                   disableInstall={disableInstall}
+                  teamsPlanRequired={teamsPlanRequired}
                   render={({ useDefaultComponent, ...props }) => {
                     if (useDefaultComponent) {
                       props = {
@@ -175,7 +166,7 @@ const Component = ({
                     }
                     return (
                       <Button
-                        StartIcon={FiPlus}
+                        StartIcon={Plus}
                         {...props}
                         // @TODO: Overriding color and size prevent us from
                         // having to duplicate InstallAppButton for now.
@@ -195,7 +186,7 @@ const Component = ({
               label={t("disconnect")}
               credentialId={existingCredentials[0]}
               onSuccess={() => {
-                router.replace("/apps/installed");
+                appCredentials.refetch();
               }}
             />
           ) : (
@@ -203,6 +194,7 @@ const Component = ({
               type={type}
               isProOnly={isProOnly}
               disableInstall={disableInstall}
+              teamsPlanRequired={teamsPlanRequired}
               render={({ useDefaultComponent, ...props }) => {
                 if (useDefaultComponent) {
                   props = {
@@ -247,16 +239,18 @@ const Component = ({
           </span>
         )}
 
-        <div className="prose-sm prose prose-headings:text-emphasis prose-code:text-default prose-strong:text-default text-default mt-8">
+        <div className="prose-sm prose prose-a:text-default prose-headings:text-emphasis prose-code:text-default prose-strong:text-default text-default mt-8">
           {body}
         </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")
           ) : (
             <>
-              {Intl.NumberFormat("en-US", {
+              {Intl.NumberFormat(i18n.language, {
                 style: "currency",
                 currency: "USD",
                 useGrouping: false,
@@ -275,7 +269,7 @@ const Component = ({
                 rel="noreferrer"
                 className="text-emphasis text-sm font-normal no-underline hover:underline"
                 href={docs}>
-                <FiBookOpen className="text-subtle mr-1 -mt-1 inline h-4 w-4" />
+                <BookOpen className="text-subtle mr-1 -mt-1 inline h-4 w-4" />
                 {t("documentation")}
               </a>
             </li>
@@ -287,7 +281,7 @@ const Component = ({
                 rel="noreferrer"
                 className="text-emphasis font-normal no-underline hover:underline"
                 href={website}>
-                <FiExternalLink className="text-subtle mr-1 -mt-px inline h-4 w-4" />
+                <ExternalLink className="text-subtle mr-1 -mt-px inline h-4 w-4" />
                 {website.replace("https://", "")}
               </a>
             </li>
@@ -299,7 +293,7 @@ const Component = ({
                 rel="noreferrer"
                 className="text-emphasis font-normal no-underline hover:underline"
                 href={"mailto:" + email}>
-                <FiMail className="text-subtle mr-1 -mt-px inline h-4 w-4" />
+                <Mail className="text-subtle mr-1 -mt-px inline h-4 w-4" />
 
                 {email}
               </a>
@@ -312,7 +306,7 @@ const Component = ({
                 rel="noreferrer"
                 className="text-emphasis font-normal no-underline hover:underline"
                 href={tos}>
-                <FiFile className="text-subtle mr-1 -mt-px inline h-4 w-4" />
+                <File className="text-subtle mr-1 -mt-px inline h-4 w-4" />
                 {t("terms_of_service")}
               </a>
             </li>
@@ -324,7 +318,7 @@ const Component = ({
                 rel="noreferrer"
                 className="text-emphasis font-normal no-underline hover:underline"
                 href={privacy}>
-                <FiShield className="text-subtle mr-1 -mt-px inline h-4 w-4" />
+                <Shield className="text-subtle mr-1 -mt-px inline h-4 w-4" />
                 {t("privacy_policy")}
               </a>
             </li>
@@ -335,7 +329,7 @@ const Component = ({
           {t("every_app_published", { appName: APP_NAME, companyName: COMPANY_NAME })}
         </span>
         <a className="mt-2 block text-xs text-red-500" href={`mailto:${SUPPORT_MAIL_ADDRESS}`}>
-          <FiFlag className="inline h-3 w-3" /> {t("report_app")}
+          <Flag className="inline h-3 w-3" /> {t("report_app")}
         </a>
       </div>
     </div>
@@ -369,13 +363,14 @@ 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;
   dependencies?: string[];
 }) {
   return (
-    <Shell smallHeading isPublic heading={<ShellHeading />} backPath="/apps" withoutSeo>
+    <Shell smallHeading isPublic hideHeadingOnMobile heading={<ShellHeading />} backPath="/apps" withoutSeo>
       <HeadSeo
         title={props.name}
         description={props.description}

apps/web/components/apps/CalendarListContainer.tsx

@@ -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 { FiArrowLeft, FiCalendar, FiPlus } 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">
-          <FiArrowLeft 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}
                               />
                             ))}
@@ -264,7 +186,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
             {!!data.connectedCalendars.length || !!installedCalendars.data?.items.length ? (
               <>
                 {heading && (
-                  <div className="flex flex-col gap-6 rounded-md border p-7">
+                  <div className="border-default flex flex-col gap-6 rounded-md border p-7">
                     <ShellSubHeading
                       title={t("calendar")}
                       subtitle={t("installed_app_calendar_description")}
@@ -282,8 +204,8 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
                     <div className="bg-muted border-subtle flex justify-between rounded-md border p-4">
                       <div className="flex w-full flex-col items-start gap-4 md:flex-row md:items-center">
                         <div className="bg-default border-subtle relative rounded-md border p-1.5">
-                          <FiCalendar className="text-default h-8 w-8" strokeWidth="1" />
-                          <FiPlus
+                          <Calendar className="text-default h-8 w-8" strokeWidth="1" />
+                          <Plus
                             className="text-emphasis absolute left-4 top-1/2 ml-0.5 mt-[1px] h-2 w-2"
                             strokeWidth="4"
                           />
@@ -322,7 +244,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
               </>
             ) : (
               <EmptyScreen
-                Icon={FiCalendar}
+                Icon={Calendar}
                 headline={t("no_category_apps", {
                   category: t("calendar").toLowerCase(),
                 })}

apps/web/components/apps/layouts/AppsLayout.tsx

@@ -6,7 +6,7 @@ import React from "react";
 import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { EmptyScreen } from "@calcom/ui";
-import { FiAlertCircle } from "@calcom/ui/components/icon";
+import { AlertCircle } from "@calcom/ui/components/icon";
 
 type AppsLayoutProps = {
   children: React.ReactNode;
@@ -18,19 +18,19 @@ 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")}>
+    <Shell {...rest} actions={actions?.("block")} hideHeadingOnMobile>
       <div className="flex flex-col xl:flex-row">
         <main className="w-full">
           {emptyStore ? (
             <EmptyScreen
-              Icon={FiAlertCircle}
+              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")}
             />
           ) : (

apps/web/components/apps/layouts/InstalledAppsLayout.tsx

@@ -6,38 +6,38 @@ import type { InstalledAppVariants } from "@calcom/app-store/utils";
 import Shell from "@calcom/features/shell/Shell";
 import { trpc } from "@calcom/trpc/react";
 import type { HorizontalTabItemProps, VerticalTabItemProps } from "@calcom/ui";
-import { FiBarChart, FiCalendar, FiCreditCard, FiGrid, FiShare2, FiVideo } from "@calcom/ui/components/icon";
+import { BarChart, Calendar, CreditCard, Grid, Share2, Video } from "@calcom/ui/components/icon";
 
 const tabs: (VerticalTabItemProps | HorizontalTabItemProps)[] = [
   {
     name: "calendar",
     href: "/apps/installed/calendar",
-    icon: FiCalendar,
+    icon: Calendar,
   },
   {
     name: "conferencing",
     href: "/apps/installed/conferencing",
-    icon: FiVideo,
+    icon: Video,
   },
   {
     name: "payment",
     href: "/apps/installed/payment",
-    icon: FiCreditCard,
+    icon: CreditCard,
   },
   {
     name: "automation",
     href: "/apps/installed/automation",
-    icon: FiShare2,
+    icon: Share2,
   },
   {
     name: "analytics",
     href: "/apps/installed/analytics",
-    icon: FiBarChart,
+    icon: BarChart,
   },
   {
     name: "other",
     href: "/apps/installed/other",
-    icon: FiGrid,
+    icon: Grid,
   },
 ];
 
@@ -57,7 +57,7 @@ export default function InstalledAppsLayout({
   }
 
   return (
-    <Shell {...rest}>
+    <Shell {...rest} hideHeadingOnMobile>
       <AppCategoryNavigation baseURL="/apps/installed" containerClassname="min-w-0 w-full">
         {children}
       </AppCategoryNavigation>

apps/web/components/auth/layouts/AdminLayout.tsx

@@ -1,4 +1,3 @@
-import { UserPermissionRole } from "@prisma/client";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import type { ComponentProps } from "react";
@@ -6,6 +5,7 @@ import React, { useEffect } from "react";
 
 import SettingsLayout from "@calcom/features/settings/layouts/SettingsLayout";
 import type Shell from "@calcom/features/shell/Shell";
+import { UserPermissionRole } from "@calcom/prisma/enums";
 import { ErrorBoundary } from "@calcom/ui";
 
 export default function AdminLayout({

apps/web/components/availability/SkeletonLoader.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { Button, SkeletonText } from "@calcom/ui";
-import { FiMoreHorizontal } from "@calcom/ui/components/icon";
+import { MoreHorizontal } from "@calcom/ui/components/icon";
 
 import classNames from "@lib/classNames";
 
@@ -31,7 +31,7 @@ function SkeletonItem() {
           type="button"
           variant="icon"
           color="secondary"
-          StartIcon={FiMoreHorizontal}
+          StartIcon={MoreHorizontal}
           disabled
         />
       </div>

apps/web/components/booking/AvailableEventLocations.tsx

@@ -4,7 +4,7 @@ import { getEventLocationType, locationKeyToString } from "@calcom/app-store/loc
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Tooltip } from "@calcom/ui";
-import { FiLink } from "@calcom/ui/components/icon";
+import { Link } from "@calcom/ui/components/icon";
 
 import type { Props } from "./pages/AvailabilityPage";
 
@@ -41,13 +41,13 @@ export function AvailableEventLocations({ locations }: { locations: Props["event
     return (
       <div key={`${location.type}-${index}`} className="flex flex-row items-center text-sm font-medium">
         {eventLocationType.iconUrl === "/link.svg" ? (
-          <FiLink className="text-default min-h-4 min-w-4 ml-[2px] opacity-70 ltr:mr-[10px] rtl:ml-[10px] " />
+          <Link className="text-default ml-[2px] h-4 w-4  ltr:mr-[10px] rtl:ml-[10px] " />
         ) : (
           <img
             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`}
           />

apps/web/components/booking/AvailableTimes.tsx

@@ -10,7 +10,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
 import { TimeFormat } from "@calcom/lib/timeFormat";
 import { nameOfDay } from "@calcom/lib/weekday";
-import type { Slot } from "@calcom/trpc/server/routers/viewer/slots";
+import { trpc } from "@calcom/trpc/react";
+import type { Slot } from "@calcom/trpc/server/routers/viewer/slots/types";
 import { SkeletonContainer, SkeletonText, ToggleGroup } from "@calcom/ui";
 
 import classNames from "@lib/classNames";
@@ -28,6 +29,7 @@ type AvailableTimesProps = {
   slots?: Slot[];
   isLoading: boolean;
   ethSignature?: string;
+  duration: number;
 };
 
 const AvailableTimes: FC<AvailableTimesProps> = ({
@@ -42,7 +44,9 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
   seatsPerTimeSlot,
   bookingAttendees,
   ethSignature,
+  duration,
 }) => {
+  const reserveSlotMutation = trpc.viewer.public.slots.reserveSlot.useMutation();
   const [slotPickerRef] = useAutoAnimate<HTMLDivElement>();
   const { t, i18n } = useLocale();
   const router = useRouter();
@@ -63,6 +67,15 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
     [isMobile]
   );
 
+  const reserveSlot = (slot: Slot) => {
+    reserveSlotMutation.mutate({
+      slotUtcStartDate: slot.time,
+      eventTypeId,
+      slotUtcEndDate: dayjs(slot.time).utc().add(duration, "minutes").format(),
+      bookingUid: slot.bookingUid,
+    });
+  };
+
   return (
     <div ref={slotPickerRef}>
       {!!date ? (
@@ -150,6 +163,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                           " bg-default dark:bg-muted border-default hover:bg-subtle hover:border-brand-default text-emphasis mb-2 block rounded-md border py-2 text-sm font-medium",
                           brand === "#fff" || brand === "#ffffff" ? "" : ""
                         )}
+                        onClick={() => reserveSlot(slot)}
                         data-testid="time">
                         {dayjs(slot.time).tz(timeZone()).format(timeFormat)}
                         {!!seatsPerTimeSlot && (

apps/web/components/booking/BookingDescription.tsx

@@ -1,12 +1,12 @@
-import { SchedulingType } from "@prisma/client";
 import type { FC, ReactNode } from "react";
 import { useEffect } from "react";
 
 import dayjs from "@calcom/dayjs";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { SchedulingType } from "@calcom/prisma/enums";
 import { Badge } from "@calcom/ui";
-import { FiCheckSquare, FiClock } from "@calcom/ui/components/icon";
+import { CheckSquare, Clock } from "@calcom/ui/components/icon";
 
 import useRouterQuery from "@lib/hooks/useRouterQuery";
 
@@ -103,7 +103,7 @@ const BookingDescription: FC<Props> = (props) => {
         {requiresConfirmation && (
           <div className={classNames("items-top flex", isBookingPage && "text-default text-sm font-medium")}>
             <div>
-              <FiCheckSquare className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
+              <CheckSquare className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
             </div>
             {requiresConfirmationText}
           </div>
@@ -117,9 +117,9 @@ const BookingDescription: FC<Props> = (props) => {
             isBookingPage && "text-default",
             !eventType.metadata?.multipleDuration && "items-center"
           )}>
-          <FiClock
+          <Clock
             className={classNames(
-              "min-h-4 min-w-4 ml-[2px] inline-block ltr:mr-[10px] rtl:ml-[10px]",
+              "ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]",
               isBookingPage && "mt-[2px]"
             )}
           />
@@ -132,9 +132,9 @@ const BookingDescription: FC<Props> = (props) => {
                       variant="gray"
                       className={classNames(
                         duration === dur.toString()
-                          ? "bg-darkgray-200 text-darkgray-900 dark:bg-darkmodebrand dark:!text-darkmodebrandcontrast"
-                          : "hover:bg-darkgray-200 dark:hover:bg-darkmodebrand hover:text-darkgray-900 dark:hover:text-darkmodebrandcontrast dark:bg-darkgray-200 bg-emphasis text-emphasis dark:text-inverted",
-                        "cursor-pointer"
+                          ? "bg-emphasis border-emphasis text-emphasis "
+                          : "bg-subtle text-default border-transparent ",
+                        "cursor-pointer border"
                       )}
                       onClick={() => {
                         setDuration(dur);

apps/web/components/booking/BookingDescriptionPayment.tsx

@@ -1,22 +1,36 @@
-import { FormattedNumber, IntlProvider } from "react-intl";
+import { i18n } from "next-i18next";
+import type { TFunction } from "next-i18next";
 
 import getPaymentAppData from "@calcom/lib/getPaymentAppData";
-import { FiCreditCard } from "@calcom/ui/components/icon";
+import { CreditCard } from "@calcom/ui/components/icon";
 
-const BookingDescriptionPayment = (props: { eventType: Parameters<typeof getPaymentAppData>[0] }) => {
+const BookingDescriptionPayment = (props: {
+  eventType: Parameters<typeof getPaymentAppData>[0];
+  t: TFunction;
+  i18n: typeof i18n;
+}) => {
   const paymentAppData = getPaymentAppData(props.eventType);
   if (!paymentAppData || paymentAppData.price <= 0) return null;
 
+  const params = {
+    amount: paymentAppData.price / 100.0,
+    formatParams: { amount: { currency: paymentAppData.currency } },
+  };
+
   return (
     <p className="text-bookinglight -ml-2 px-2 text-sm ">
-      <FiCreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
-      <IntlProvider locale="en">
-        <FormattedNumber
-          value={paymentAppData.price / 100.0}
-          style="currency"
-          currency={paymentAppData.currency?.toUpperCase()}
-        />
-      </IntlProvider>
+      <CreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
+      {paymentAppData.paymentOption === "HOLD" ? (
+        <>{props.t("no_show_fee_amount", params)}</>
+      ) : (
+        <>
+          {/* If undefined this will default to the browser locale */}
+          {new Intl.NumberFormat(i18n?.language, {
+            style: "currency",
+            currency: paymentAppData.currency,
+          }).format(paymentAppData.price / 100)}
+        </>
+      )}
     </p>
   );
 };

apps/web/components/booking/BookingListItem.tsx

@@ -1,4 +1,3 @@
-import { BookingStatus } from "@prisma/client";
 import { useRouter } from "next/router";
 import { useState } from "react";
 
@@ -10,8 +9,10 @@ import "@calcom/dayjs/locales";
 import ViewRecordingsDialog from "@calcom/features/ee/video/ViewRecordingsDialog";
 import classNames from "@calcom/lib/classNames";
 import { formatTime } from "@calcom/lib/date-fns";
+import getPaymentAppData from "@calcom/lib/getPaymentAppData";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
+import { BookingStatus } from "@calcom/prisma/enums";
 import type { RouterInputs, RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import type { ActionType } from "@calcom/ui";
@@ -28,10 +29,11 @@ import {
   TableActions,
   TextAreaField,
 } from "@calcom/ui";
-import { FiCheck, FiClock, FiMapPin, FiRefreshCcw, FiSend, FiSlash, FiX } 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";
 
+import { ChargeCardDialog } from "@components/dialog/ChargeCardDialog";
 import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
 import { RescheduleDialog } from "@components/dialog/RescheduleDialog";
 
@@ -56,7 +58,9 @@ function BookingListItem(booking: BookingItemProps) {
   const router = useRouter();
   const [rejectionReason, setRejectionReason] = useState<string>("");
   const [rejectionDialogIsOpen, setRejectionDialogIsOpen] = useState(false);
+  const [chargeCardDialogIsOpen, setChargeCardDialogIsOpen] = useState(false);
   const [viewRecordingsDialogIsOpen, setViewRecordingsDialogIsOpen] = useState<boolean>(false);
+  const cardCharged = booking?.payment[0]?.success;
   const mutation = trpc.viewer.bookings.confirm.useMutation({
     onSuccess: (data) => {
       if (data?.status === BookingStatus.REJECTED) {
@@ -83,6 +87,8 @@ function BookingListItem(booking: BookingItemProps) {
   const isTabRecurring = booking.listingStatus === "recurring";
   const isTabUnconfirmed = booking.listingStatus === "unconfirmed";
 
+  const paymentAppData = getPaymentAppData(booking.eventType);
+
   const bookingConfirm = async (confirm: boolean) => {
     let body = {
       bookingId: booking.id,
@@ -113,19 +119,23 @@ function BookingListItem(booking: BookingItemProps) {
       onClick: () => {
         setRejectionDialogIsOpen(true);
       },
-      icon: FiSlash,
+      icon: Ban,
       disabled: mutation.isLoading,
     },
-    {
-      id: "confirm",
-      label: (isTabRecurring || isTabUnconfirmed) && isRecurring ? t("confirm_all") : t("confirm"),
-      onClick: () => {
-        bookingConfirm(true);
-      },
-      icon: FiCheck,
-      disabled: mutation.isLoading,
-      color: "primary",
-    },
+    // For bookings with payment, only confirm if the booking is paid for
+    ...((isPending && !booking?.eventType?.price) || (!!booking?.eventType?.price && booking.paid)
+      ? [
+          {
+            id: "confirm",
+            label: (isTabRecurring || isTabUnconfirmed) && isRecurring ? t("confirm_all") : t("confirm"),
+            onClick: () => {
+              bookingConfirm(true);
+            },
+            icon: Check,
+            disabled: mutation.isLoading,
+          },
+        ]
+      : []),
   ];
 
   const showRecordingActions: ActionType[] = [
@@ -149,7 +159,7 @@ function BookingListItem(booking: BookingItemProps) {
         isTabRecurring && isRecurring ? "&allRemainingBookings=true" : ""
       }${booking.seatsReferences.length ? `&seatReferenceUid=${getSeatReferenceUid()}` : ""}
       `,
-      icon: FiX,
+      icon: X,
     },
     {
       id: "edit_booking",
@@ -157,7 +167,7 @@ function BookingListItem(booking: BookingItemProps) {
       actions: [
         {
           id: "reschedule",
-          icon: FiClock,
+          icon: Clock,
           label: t("reschedule_booking"),
           href: `/reschedule/${booking.uid}${
             booking.seatsReferences.length ? `?seatReferenceUid=${getSeatReferenceUid()}` : ""
@@ -165,7 +175,7 @@ function BookingListItem(booking: BookingItemProps) {
         },
         {
           id: "reschedule_request",
-          icon: FiSend,
+          icon: Send,
           iconClassName: "rotate-45 w-[16px] -translate-x-0.5 ",
           label: t("send_reschedule_request"),
           onClick: () => {
@@ -178,12 +188,24 @@ function BookingListItem(booking: BookingItemProps) {
           onClick: () => {
             setIsOpenLocationDialog(true);
           },
-          icon: FiMapPin,
+          icon: MapPin,
         },
       ],
     },
   ];
 
+  const chargeCardActions: ActionType[] = [
+    {
+      id: "charge_card",
+      label: cardCharged ? t("no_show_fee_charged") : t("collect_no_show_fee"),
+      disabled: cardCharged,
+      onClick: () => {
+        setChargeCardDialogIsOpen(true);
+      },
+      icon: CreditCard,
+    },
+  ];
+
   if (isTabRecurring && isRecurring) {
     bookedActions = bookedActions.filter((action) => action.id !== "edit_booking");
   }
@@ -194,7 +216,7 @@ function BookingListItem(booking: BookingItemProps) {
 
   const RequestSentMessage = () => {
     return (
-      <Badge startIcon={FiSend} size="md" variant="gray" data-testid="request_reschedule_sent">
+      <Badge startIcon={Send} size="md" variant="gray" data-testid="request_reschedule_sent">
         {t("reschedule_request_sent")}
       </Badge>
     );
@@ -237,10 +259,14 @@ function BookingListItem(booking: BookingItemProps) {
       },
     });
   };
+
+  const title = booking.title;
+  // To be used after we run query on legacy bookings
+  // const showRecordingsButtons = booking.isRecorded && isPast && isConfirmed;
+
   const showRecordingsButtons =
     (booking.location === "integrations:daily" || booking?.location?.trim() === "") && isPast && isConfirmed;
 
-  const title = booking.title;
   return (
     <>
       <RescheduleDialog
@@ -254,6 +280,15 @@ function BookingListItem(booking: BookingItemProps) {
         isOpenDialog={isOpenSetLocationDialog}
         setShowLocationModal={setIsOpenLocationDialog}
       />
+      {booking.paid && booking.payment[0] && (
+        <ChargeCardDialog
+          isOpenDialog={chargeCardDialogIsOpen}
+          setIsOpenDialog={setChargeCardDialogIsOpen}
+          bookingId={booking.id}
+          paymentAmount={booking.payment[0].amount}
+          paymentCurrency={booking.payment[0].currency}
+        />
+      )}
       {showRecordingsButtons && (
         <ViewRecordingsDialog
           booking={booking}
@@ -319,11 +354,15 @@ function BookingListItem(booking: BookingItemProps) {
                 {booking.eventType.team.name}
               </Badge>
             )}
-            {booking.paid && (
-              <Badge className="ltr:mr-2 rtl:ml-2" variant="green">
-                {t("paid")}
+            {booking.paid && !booking.payment[0] ? (
+              <Badge className="ltr:mr-2 rtl:ml-2" variant="orange">
+                {t("error_collecting_card")}
               </Badge>
-            )}
+            ) : booking.paid ? (
+              <Badge className="ltr:mr-2 rtl:ml-2" variant="green">
+                {booking.payment[0].paymentOption === "HOLD" ? t("card_held") : t("paid")}
+              </Badge>
+            ) : null}
             {recurringDates !== undefined && (
               <div className="text-muted mt-2 text-sm">
                 <RecurringBookingsTooltip booking={booking} recurringDates={recurringDates} />
@@ -381,7 +420,7 @@ function BookingListItem(booking: BookingItemProps) {
               {title}
               <span> </span>
 
-              {!!booking?.eventType?.price && !booking.paid && (
+              {paymentAppData.enabled && !booking.paid && booking.payment.length && (
                 <Badge className="ms-2 me-2 hidden sm:inline-flex" variant="orange">
                   {t("pending_payment")}
                 </Badge>
@@ -423,6 +462,11 @@ function BookingListItem(booking: BookingItemProps) {
               <RequestSentMessage />
             </div>
           )}
+          {booking.status === "ACCEPTED" && booking.paid && booking.payment[0]?.paymentOption === "HOLD" && (
+            <div className="ml-2">
+              <TableActions actions={chargeCardActions} />
+            </div>
+          )}
         </td>
       </tr>
     </>
@@ -443,12 +487,12 @@ const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookings
     i18n: { language },
   } = useLocale();
   const now = new Date();
-  const recurringCount = recurringDates.filter((date) => {
+  const recurringCount = recurringDates.filter((recurringDate) => {
     return (
-      date >= now &&
+      recurringDate >= now &&
       !booking.recurringInfo?.bookings[BookingStatus.CANCELLED]
         .map((date) => date.toDateString())
-        .includes(date.toDateString())
+        .includes(recurringDate.toDateString())
     );
   }).length;
 
@@ -476,7 +520,7 @@ const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookings
                 );
               })}>
               <div className="text-default">
-                <FiRefreshCcw
+                <RefreshCcw
                   strokeWidth="3"
                   className="text-muted float-left mr-1 mt-1.5 inline-block h-3 w-3"
                 />

apps/web/components/booking/CancelBooking.tsx

@@ -2,11 +2,10 @@ import { useRouter } from "next/router";
 import { useCallback, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import useTheme from "@calcom/lib/hooks/useTheme";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import type { RecurringEvent } from "@calcom/types/Calendar";
 import { Button, TextArea } from "@calcom/ui";
-import { FiX } from "@calcom/ui/components/icon";
+import { X } from "@calcom/ui/components/icon";
 
 type Props = {
   booking: {
@@ -34,7 +33,6 @@ export default function CancelBooking(props: Props) {
   const [loading, setLoading] = useState(false);
   const telemetry = useTelemetry();
   const [error, setError] = useState<string | null>(booking ? null : t("booking_already_cancelled"));
-  useTheme(props.theme);
 
   const cancelBookingRef = useCallback((node: HTMLTextAreaElement) => {
     if (node !== null) {
@@ -48,7 +46,7 @@ export default function CancelBooking(props: Props) {
       {error && (
         <div className="mt-8">
           <div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full">
-            <FiX className="h-6 w-6 text-red-600" />
+            <X className="h-6 w-6 text-red-600" />
           </div>
           <div className="mt-3 text-center sm:mt-5">
             <h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">

apps/web/components/booking/SlotPicker.tsx

@@ -194,6 +194,7 @@ export const SlotPicker = ({
         bookingAttendees={bookingAttendees}
         recurringCount={recurringEventCount}
         ethSignature={ethSignature}
+        duration={parseInt(duration)}
       />
     </>
   );

apps/web/components/booking/TimeOptions.tsx

@@ -29,7 +29,7 @@ const TimeOptions: FC<Props> = ({ onSelectTimeZone }) => {
       classNames={{
         singleValue: () => "text-default",
         dropdownIndicator: () => "text-default",
-        menu: () => "!w-64 max-w-[90vw]",
+        menu: () => "!w-64 max-w-[90vw] shadow-dropdown bg-default border-subtle border rounded-md mt-1",
       }}
       variant="minimal"
       value={selectedTimeZone}

apps/web/components/booking/TimezoneDropdown.tsx

@@ -1,4 +1,4 @@
-import { FiGlobe } from "@calcom/ui/components/icon";
+import { Globe } from "@calcom/ui/components/icon";
 
 import { timeZone as localStorageTimeZone } from "@lib/clock";
 
@@ -17,8 +17,8 @@ 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">
-        <FiGlobe className="dark:text-darkgray-600 flex h-4 w-4 text-gray-600 ltr:mr-2 rtl:ml-2" />
+      <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>
     </>

apps/web/components/booking/pages/AvailabilityPage.tsx

@@ -1,7 +1,6 @@
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
 import { useEffect, useMemo, useReducer, useState } from "react";
-import { FormattedNumber, IntlProvider } from "react-intl";
 import { z } from "zod";
 
 import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
@@ -21,11 +20,10 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import notEmpty from "@calcom/lib/notEmpty";
 import { getRecurringFreq } from "@calcom/lib/recurringStrings";
-import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { detectBrowserTimeFormat, setIs24hClockInLocalStorage, TimeFormat } from "@calcom/lib/timeFormat";
 import { trpc } from "@calcom/trpc";
-import { HeadSeo, useCalcomTheme } from "@calcom/ui";
-import { FiCreditCard, FiUser, FiRefreshCcw } from "@calcom/ui/components/icon";
+import { HeadSeo, NumberInput, useCalcomTheme } from "@calcom/ui";
+import { CreditCard, User, RefreshCcw } from "@calcom/ui/components/icon";
 
 import { timeZone as localStorageTimeZone } from "@lib/clock";
 
@@ -38,7 +36,7 @@ import type { AvailabilityPageProps } from "../../../pages/[user]/[type]";
 import type { DynamicAvailabilityPageProps } from "../../../pages/d/[link]/[slug]";
 import type { AvailabilityTeamPageProps } from "../../../pages/team/[slug]/[type]";
 
-const PoweredByCal = dynamic(() => import("@components/ui/PoweredByCal"));
+const PoweredBy = dynamic(() => import("@calcom/ee/components/PoweredBy"));
 
 const Toaster = dynamic(() => import("react-hot-toast").then((mod) => mod.Toaster), { ssr: false });
 /*const SlotPicker = dynamic(() => import("../SlotPicker").then((mod) => mod.SlotPicker), {
@@ -76,7 +74,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
     brandColor: profile.brandColor,
     darkBrandColor: profile.darkBrandColor,
   });
-  const { t } = useLocale();
+  const { t, i18n } = useLocale();
   const availabilityDatePickerEmbedStyles = useEmbedStyles("availabilityDatePicker");
   //TODO: Plan to remove shouldAlignCentrallyInEmbed config
   const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
@@ -105,8 +103,9 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
 
   const [recurringEventCount, setRecurringEventCount] = useState(eventType.recurringEvent?.count);
 
+  /*
   const telemetry = useTelemetry();
-  useEffect(() => {
+   useEffect(() => {
     if (top !== window) {
       //page_view will be collected automatically by _middleware.ts
       telemetry.event(
@@ -114,7 +113,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
         collectPageParameters("/availability", { isTeamBooking: document.URL.includes("team/") })
       );
     }
-  }, [telemetry]);
+  }, [telemetry]); */
   const embedUiConfig = useEmbedUiConfig();
   // get dynamic user list here
   const userList = eventType.users ? eventType.users.map((user) => user.username).filter(notEmpty) : [];
@@ -124,6 +123,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
     [timeZone]
   );
   const paymentAppData = getPaymentAppData(eventType);
+
   const rainbowAppData = getEventTypeAppData(eventType, "rainbow") || {};
   const rawSlug = profile.slug ? profile.slug.split("/") : [];
   if (rawSlug.length > 1) rawSlug.pop(); //team events have team name as slug, but user events have [user]/[type] as slug.
@@ -181,7 +181,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
               style={availabilityDatePickerEmbedStyles}
               className={classNames(
                 isBackgroundTransparent ? "" : "bg-default dark:bg-muted pb-4 md:pb-0",
-                "border-subtle md:rounded-md md:border",
+                "border-booker md:border-booker-width md:rounded-md",
                 isEmbed && "mx-auto"
               )}>
               <div className="md:flex">
@@ -200,7 +200,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                             " text-default",
                             "ltr:mr-[10px] rtl:ml-[10px]"
                           )}>
-                          <FiUser
+                          <User
                             className={classNames(
                               "min-h-4 min-w-4 ml-[2px] inline-block ltr:mr-[10px] rtl:ml-[10px]",
                               "mt-[2px]"
@@ -211,21 +211,23 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                       )}
                       {!rescheduleUid && eventType.recurringEvent && (
                         <div className="flex items-start text-sm font-medium">
-                          <FiRefreshCcw className="float-left mt-[7px] ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
+                          <RefreshCcw className="float-left mt-[7px] ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
                           <div>
                             <p className="mb-1 -ml-2 inline px-2 py-1">
                               {getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
                             </p>
-                            <input
-                              type="number"
+
+                            <NumberInput
+                              defaultValue={eventType.recurringEvent.count}
                               min="1"
                               max={eventType.recurringEvent.count}
-                              className="w-15 border-default bg-default dark:border-empthasis h-7 rounded-sm text-sm font-medium [appearance:textfield] ltr:mr-2 rtl:ml-2"
-                              defaultValue={eventType.recurringEvent.count}
+                              isFullWidth={false}
+                              className="me-2 inline w-16"
                               onChange={(event) => {
                                 setRecurringEventCount(parseInt(event?.target.value));
                               }}
                             />
+
                             <p className="inline">
                               {t("occurrence", {
                                 count: recurringEventCount,
@@ -236,14 +238,22 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                       )}
                       {paymentAppData.price > 0 && (
                         <p className="-ml-2 px-2 text-sm font-medium">
-                          <FiCreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
-                          <IntlProvider locale="en">
-                            <FormattedNumber
-                              value={paymentAppData.price / 100.0}
-                              style="currency"
-                              currency={paymentAppData.currency?.toUpperCase()}
-                            />
-                          </IntlProvider>
+                          <CreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
+                          {paymentAppData.paymentOption === "HOLD" ? (
+                            <>
+                              {t("no_show_fee_amount", {
+                                amount: paymentAppData.price / 100.0,
+                                formatParams: { amount: { currency: paymentAppData.currency } },
+                              })}
+                            </>
+                          ) : (
+                            <>
+                              {new Intl.NumberFormat(i18n.language, {
+                                style: "currency",
+                                currency: paymentAppData.currency,
+                              }).format(paymentAppData.price / 100)}
+                            </>
+                          )}
                         </p>
                       )}
                       {timezoneDropdown}
@@ -291,7 +301,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
               </div>
             </div>
             {/* FIXME: We don't show branding in Embed yet because we need to place branding on top of the main content. Keeping it outside the main content would have visibility issues because outside main content background is transparent */}
-            {!restProps.isBrandingHidden && !isEmbed && <PoweredByCal />}
+            {!restProps.isBrandingHidden && !isEmbed && <PoweredBy />}
           </div>
         </main>
       </div>

apps/web/components/booking/pages/BookingPage.tsx

@@ -21,6 +21,7 @@ import {
   useIsBackgroundTransparent,
   useIsEmbed,
 } from "@calcom/embed-core/embed-iframe";
+import { createBooking, createRecurringBooking } from "@calcom/features/bookings/lib";
 import {
   getBookingFieldsWithSystemFields,
   SystemField,
@@ -32,23 +33,22 @@ import getLocationOptionsForSelect from "@calcom/features/bookings/lib/getLocati
 import { FormBuilderField } from "@calcom/features/form-builder/FormBuilder";
 import { bookingSuccessRedirect } from "@calcom/lib/bookingSuccessRedirect";
 import classNames from "@calcom/lib/classNames";
-import { APP_NAME } from "@calcom/lib/constants";
+import { APP_NAME, MINUTES_TO_BOOK } from "@calcom/lib/constants";
 import useGetBrandingColours from "@calcom/lib/getBrandColours";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
 import { HttpError } from "@calcom/lib/http-error";
+import { parseDate, parseRecurringDates } from "@calcom/lib/parse-dates";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
-import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
+import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { TimeFormat } from "@calcom/lib/timeFormat";
+import { trpc } from "@calcom/trpc";
 import { Button, Form, Tooltip, useCalcomTheme } from "@calcom/ui";
-import { FiAlertTriangle, FiCalendar, FiRefreshCw, FiUser } from "@calcom/ui/components/icon";
+import { AlertTriangle, Calendar, RefreshCw, User } from "@calcom/ui/components/icon";
 
 import { timeZone } from "@lib/clock";
 import useRouterQuery from "@lib/hooks/useRouterQuery";
-import createBooking from "@lib/mutations/bookings/create-booking";
-import createRecurringBooking from "@lib/mutations/bookings/create-recurring-booking";
-import { parseRecurringDates, parseDate } from "@lib/parseDate";
 
 import type { Gate, GateState } from "@components/Gates";
 import Gates from "@components/Gates";
@@ -210,8 +210,11 @@ const BookingPage = ({
   hashedLink,
   ...restProps
 }: BookingPageProps) => {
+  const removeSelectedSlotMarkMutation = trpc.viewer.public.slots.removeSelectedSlotMark.useMutation();
+  const reserveSlotMutation = trpc.viewer.public.slots.reserveSlot.useMutation();
   const { t, i18n } = useLocale();
   const { duration: queryDuration } = useRouterQuery("duration");
+  const { date: queryDate } = useRouterQuery("date");
   const isEmbed = useIsEmbed(restProps.isEmbed);
   const embedUiConfig = useEmbedUiConfig();
   const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
@@ -227,6 +230,17 @@ 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,
+      });
+    }
+  };
   // Define duration now that we support multiple duration eventTypes
   let duration = eventType.length;
   if (
@@ -239,13 +253,19 @@ const BookingPage = ({
   }
 
   useEffect(() => {
-    if (top !== window) {
+    /* if (top !== window) {
       //page_view will be collected automatically by _middleware.ts
       telemetry.event(
         telemetryEventTypes.embedView,
         collectPageParameters("/book", { isTeamBooking: document.URL.includes("team/") })
       );
-    }
+    } */
+    reserveSlot();
+    const interval = setInterval(reserveSlot, parseInt(MINUTES_TO_BOOK) * 60 * 1000 - 2000);
+    return () => {
+      clearInterval(interval);
+      removeSelectedSlotMarkMutation.mutate();
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -414,7 +434,6 @@ const BookingPage = ({
   // Calculate the booking date(s)
   let recurringStrings: string[] = [],
     recurringDates: Date[] = [];
-
   if (eventType.recurringEvent?.freq && recurringEventCount !== null) {
     [recurringStrings, recurringDates] = parseRecurringDates(
       {
@@ -424,7 +443,7 @@ const BookingPage = ({
         recurringCount: parseInt(recurringEventCount.toString()),
         selectedTimeFormat: timeFormat,
       },
-      i18n
+      i18n.language
     );
   }
 
@@ -528,17 +547,17 @@ const BookingPage = ({
         <div
           className={classNames(
             "main",
-            isBackgroundTransparent ? "" : "dark:bg-darkgray-100 bg-default dark:border",
-            "dark:border-darkgray-300 rounded-md sm:border"
+            isBackgroundTransparent ? "" : "bg-default dark:bg-muted",
+            "border-booker sm:border-booker-width rounded-md"
           )}>
           <div className="sm:flex">
             {showEventTypeDetails && (
-              <div className="sm:dark:border-darkgray-300  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} />
+                  <BookingDescriptionPayment eventType={eventType} t={t} i18n={i18n} />
                   {!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
-                    <div className="dark:text-inverted text-default items-start text-sm font-medium">
-                      <FiRefreshCw className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
+                    <div className="text-default items-start text-sm font-medium">
+                      <RefreshCw className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
                       <p className="-ml-2 inline-block items-center px-2">
                         {getEveryFreqFor({
                           t,
@@ -549,11 +568,11 @@ const BookingPage = ({
                     </div>
                   )}
                   <div className="text-bookinghighlight flex items-start text-sm">
-                    <FiCalendar className="ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
+                    <Calendar className="ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
                     <div className="text-sm font-medium">
                       {isClientTimezoneAvailable &&
                         (rescheduleUid || !eventType.recurringEvent?.freq) &&
-                        `${parseDate(date, i18n, timeFormat)}`}
+                        `${parseDate(date, i18n.language, { selectedTimeFormat: timeFormat })}`}
                       {isClientTimezoneAvailable &&
                         !rescheduleUid &&
                         eventType.recurringEvent?.freq &&
@@ -580,16 +599,18 @@ const BookingPage = ({
                         {t("former_time")}
                       </p>
                       <p className="line-through ">
-                        <FiCalendar className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
+                        <Calendar className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
                         {isClientTimezoneAvailable &&
                           typeof booking.startTime === "string" &&
-                          parseDate(dayjs(booking.startTime), i18n, timeFormat)}
+                          parseDate(dayjs(booking.startTime), i18n.language, {
+                            selectedTimeFormat: timeFormat,
+                          })}
                       </p>
                     </div>
                   )}
                   {!!eventType.seatsPerTimeSlot && (
                     <div className="text-bookinghighlight flex items-start text-sm">
-                      <FiUser
+                      <User
                         className={`ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] ${
                           currentSlotBooking &&
                           currentSlotBooking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
@@ -649,9 +670,9 @@ const BookingPage = ({
                   </Button>
                 </div>
               </Form>
-              {(mutation.isError || recurringMutation.isError) && (
+              {mutation.isError || recurringMutation.isError ? (
                 <ErrorMessage error={mutation.error || recurringMutation.error} />
-              )}
+              ) : null}
             </div>
           </div>
         </div>
@@ -672,7 +693,7 @@ function ErrorMessage({ error }: { error: unknown }) {
     <div data-testid="booking-fail" className="mt-2 border-l-4 border-blue-400 bg-blue-50 p-4">
       <div className="flex">
         <div className="flex-shrink-0">
-          <FiAlertTriangle className="h-5 w-5 text-blue-400" aria-hidden="true" />
+          <AlertTriangle className="h-5 w-5 text-blue-400" aria-hidden="true" />
         </div>
         <div className="ms-3">
           <p className="text-sm text-blue-700">

apps/web/components/dialog/ChargeCardDialog.tsx

@@ -0,0 +1,82 @@
+import { useState } from "react";
+import type { Dispatch, SetStateAction } from "react";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import {
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  showToast,
+} from "@calcom/ui";
+import { CreditCard, AlertTriangle } from "@calcom/ui/components/icon";
+
+interface IRescheduleDialog {
+  isOpenDialog: boolean;
+  setIsOpenDialog: Dispatch<SetStateAction<boolean>>;
+  bookingId: number;
+  paymentAmount: number;
+  paymentCurrency: string;
+}
+
+export const ChargeCardDialog = (props: IRescheduleDialog) => {
+  const { t } = useLocale();
+  const utils = trpc.useContext();
+  const { isOpenDialog, setIsOpenDialog, bookingId } = props;
+  const [chargeError, setChargeError] = useState(false);
+  const chargeCardMutation = trpc.viewer.payments.chargeCard.useMutation({
+    onSuccess: () => {
+      utils.viewer.bookings.invalidate();
+      setIsOpenDialog(false);
+      showToast("Charge successful", "success");
+    },
+    onError: () => {
+      setChargeError(true);
+    },
+  });
+
+  const currencyStringParams = {
+    amount: props.paymentAmount / 100.0,
+    formatParams: { amount: { currency: props.paymentCurrency } },
+  };
+
+  return (
+    <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
+      <DialogContent>
+        <div className="flex flex-row space-x-3">
+          <div className="flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
+            <CreditCard className="m-auto h-6 w-6" />
+          </div>
+          <div className="pt-1">
+            <DialogHeader title={t("charge_card")} />
+            <p>{t("charge_card_dialog_body", currencyStringParams)}</p>
+
+            {chargeError && (
+              <div className="mt-4 flex text-red-500">
+                <AlertTriangle className="mr-2 h-5 w-5 " aria-hidden="true" />
+                <p className="text-sm">{t("error_charging_card")}</p>
+              </div>
+            )}
+
+            <DialogFooter>
+              <DialogClose />
+              <Button
+                data-testid="send_request"
+                disabled={chargeCardMutation.isLoading || chargeError}
+                onClick={() =>
+                  chargeCardMutation.mutate({
+                    bookingId,
+                  })
+                }>
+                {t("charge_attendee", currencyStringParams)}
+              </Button>
+            </DialogFooter>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/web/components/dialog/EditLocationDialog.tsx

@@ -19,7 +19,7 @@ import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import { Input } from "@calcom/ui";
 import { Button, Dialog, DialogContent, DialogFooter, Form, PhoneInput } from "@calcom/ui";
-import { FiMapPin } from "@calcom/ui/components/icon";
+import { MapPin } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
 
@@ -174,7 +174,6 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
               id="locationInput"
               placeholder={t(eventLocationType.organizerInputPlaceholder || "")}
               required
-              className="border-default block w-full rounded-sm text-sm"
               // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
               defaultValue={
                 defaultLocation ? defaultLocation[eventLocationType.defaultValueVariable] : undefined
@@ -218,7 +217,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
       <DialogContent>
         <div className="flex flex-row space-x-3">
           <div className="bg-subtle mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
-            <FiMapPin className="text-emphasis h-6 w-6" />
+            <MapPin className="text-emphasis h-6 w-6" />
           </div>
           <div className="w-full">
             <div className="mt-3 text-center sm:mt-0 sm:text-left">

apps/web/components/dialog/RescheduleDialog.tsx

@@ -13,7 +13,7 @@ import {
   showToast,
   TextArea,
 } from "@calcom/ui";
-import { FiClock } from "@calcom/ui/components/icon";
+import { Clock } from "@calcom/ui/components/icon";
 
 interface IRescheduleDialog {
   isOpenDialog: boolean;
@@ -44,7 +44,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
       <DialogContent>
         <div className="flex flex-row space-x-3">
           <div className="flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
-            <FiClock className="m-auto h-6 w-6" />
+            <Clock className="m-auto h-6 w-6" />
           </div>
           <div className="pt-1">
             <DialogHeader title={t("send_reschedule_request")} />

apps/web/components/error/error-page.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { HttpError } from "@lib/core/http/error";
+import { HttpError } from "@calcom/lib/http-error";
 
 type Props = {
   statusCode?: number | null;

apps/web/components/eventtype/AvailabilityTab.tsx

@@ -1,251 +0,0 @@
-import type { FormValues } from "pages/event-types/[type]";
-import { Controller, useFormContext } from "react-hook-form";
-import type { OptionProps, SingleValueProps } from "react-select";
-import { components } from "react-select";
-
-import dayjs from "@calcom/dayjs";
-import { NewScheduleButton } from "@calcom/features/schedules";
-import classNames from "@calcom/lib/classNames";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { weekdayNames } from "@calcom/lib/weekday";
-import type { RouterOutputs } from "@calcom/trpc/react";
-import { trpc } from "@calcom/trpc/react";
-import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
-import { Badge, Button, Select, SettingsToggle, SkeletonText, EmptyScreen } from "@calcom/ui";
-import { FiExternalLink, FiGlobe, FiClock } from "@calcom/ui/components/icon";
-
-import { SelectSkeletonLoader } from "@components/availability/SkeletonLoader";
-
-type AvailabilityOption = {
-  label: string;
-  value: number;
-  isDefault: boolean;
-};
-
-const Option = ({ ...props }: OptionProps<AvailabilityOption>) => {
-  const { label, isDefault } = props.data;
-  const { t } = useLocale();
-  return (
-    <components.Option {...props}>
-      <span>{label}</span>
-      {isDefault && (
-        <Badge variant="blue" className="ml-2">
-          {t("default")}
-        </Badge>
-      )}
-    </components.Option>
-  );
-};
-
-const SingleValue = ({ ...props }: SingleValueProps<AvailabilityOption>) => {
-  const { label, isDefault } = props.data;
-  const { t } = useLocale();
-  return (
-    <components.SingleValue {...props}>
-      <span>{label}</span>
-      {isDefault && (
-        <Badge variant="blue" className="ml-2">
-          {t("default")}
-        </Badge>
-      )}
-    </components.SingleValue>
-  );
-};
-
-const AvailabilitySelect = ({
-  className = "",
-  isLoading,
-  schedules,
-  ...props
-}: {
-  className?: string;
-  name: string;
-  value: number;
-  isLoading: boolean;
-  schedules: RouterOutputs["viewer"]["availability"]["list"]["schedules"] | [];
-  onBlur: () => void;
-  onChange: (value: AvailabilityOption | null) => void;
-}) => {
-  const { t } = useLocale();
-
-  if (isLoading) {
-    return <SelectSkeletonLoader />;
-  }
-
-  const options = schedules.map((schedule) => ({
-    value: schedule.id,
-    label: schedule.name,
-    isDefault: schedule.isDefault,
-  }));
-
-  const value = options.find((option) =>
-    props.value
-      ? option.value === props.value
-      : option.value === schedules.find((schedule) => schedule.isDefault)?.id
-  );
-
-  return (
-    <Select
-      placeholder={t("select")}
-      options={options}
-      isSearchable={false}
-      onChange={props.onChange}
-      className={classNames("block w-full min-w-0 flex-1 rounded-sm text-sm", className)}
-      value={value}
-      components={{ Option, SingleValue }}
-      isMulti={false}
-    />
-  );
-};
-
-const format = (date: Date, hour12: boolean) =>
-  Intl.DateTimeFormat(undefined, { hour: "numeric", minute: "numeric", hour12 }).format(
-    new Date(dayjs.utc(date).format("YYYY-MM-DDTHH:mm:ss"))
-  );
-
-const EventTypeScheduleDetails = () => {
-  const { data: loggedInUser } = useMeQuery();
-  const timeFormat = loggedInUser?.timeFormat;
-  const { t, i18n } = useLocale();
-  const { watch } = useFormContext<FormValues>();
-
-  const scheduleId = watch("schedule");
-
-  const { isLoading, data: schedule } = trpc.viewer.availability.schedule.get.useQuery(
-    { scheduleId: scheduleId || loggedInUser?.defaultScheduleId || undefined },
-    { enabled: !!scheduleId || !!loggedInUser?.defaultScheduleId }
-  );
-
-  const filterDays = (dayNum: number) =>
-    schedule?.schedule.filter((item) => item.days.includes((dayNum + 1) % 7)) || [];
-
-  return (
-    <div className="border-default space-y-4 rounded border px-6 pb-4">
-      <ol className="table border-collapse text-sm">
-        {weekdayNames(i18n.language, 1, "long").map((day, index) => {
-          const isAvailable = !!filterDays(index).length;
-          return (
-            <li key={day} className="my-6 flex border-transparent last:mb-2">
-              <span
-                className={classNames(
-                  "w-20 font-medium sm:w-32 ",
-                  !isAvailable ? "text-subtle line-through" : "text-default"
-                )}>
-                {day}
-              </span>
-              {isLoading ? (
-                <SkeletonText className="block h-5 w-60" />
-              ) : isAvailable ? (
-                <div className="space-y-3 text-right">
-                  {filterDays(index).map((dayRange, i) => (
-                    <div key={i} className="text-default flex items-center leading-4">
-                      <span className="w-16 sm:w-28 sm:text-left">
-                        {format(dayRange.startTime, timeFormat === 12)}
-                      </span>
-                      <span className="ms-4">-</span>
-                      <div className="ml-6">{format(dayRange.endTime, timeFormat === 12)}</div>
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <span className="text-subtle ml-6 sm:ml-0">{t("unavailable")}</span>
-              )}
-            </li>
-          );
-        })}
-      </ol>
-      <hr className="border-subtle" />
-      <div className="flex flex-col justify-center gap-2 sm:flex-row sm:justify-between">
-        <span className="text-default flex items-center justify-center text-sm sm:justify-start">
-          <FiGlobe className="ltr:mr-2 rtl:ml-2" />
-          {schedule?.timeZone || <SkeletonText className="block h-5 w-32" />}
-        </span>
-        {!!schedule?.id && (
-          <Button
-            href={`/availability/${schedule.id}`}
-            disabled={isLoading}
-            color="minimal"
-            EndIcon={FiExternalLink}
-            target="_blank"
-            rel="noopener noreferrer">
-            {t("edit_availability")}
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-};
-
-const EventTypeSchedule = () => {
-  const { t } = useLocale();
-  const { data: schedules, isLoading } = trpc.viewer.availability.list.useQuery();
-
-  if (!schedules?.schedules.length && !isLoading)
-    return (
-      <EmptyScreen
-        Icon={FiClock}
-        headline={t("new_schedule_heading")}
-        description={t("new_schedule_description")}
-        buttonRaw={<NewScheduleButton fromEventType />}
-        border={false}
-      />
-    );
-
-  return (
-    <div className="space-y-4">
-      <div>
-        <label htmlFor="availability" className="text-default mb-2 block text-sm font-medium leading-none">
-          {t("availability")}
-        </label>
-        <Controller
-          name="schedule"
-          render={({ field }) => (
-            <>
-              <AvailabilitySelect
-                value={field.value}
-                onBlur={field.onBlur}
-                name={field.name}
-                schedules={schedules?.schedules || []}
-                isLoading={isLoading}
-                onChange={(selected) => {
-                  field.onChange(selected?.value || null);
-                }}
-              />
-            </>
-          )}
-        />
-      </div>
-      <EventTypeScheduleDetails />
-    </div>
-  );
-};
-
-const UseCommonScheduleSettingsToggle = () => {
-  const { t } = useLocale();
-  const { resetField, setValue } = useFormContext<FormValues>();
-  return (
-    <Controller
-      name="metadata.config.useHostSchedulesForTeamEvent"
-      render={({ field: { value, onChange } }) => (
-        <SettingsToggle
-          checked={!value}
-          onCheckedChange={(checked) => {
-            onChange(!checked);
-            if (checked) {
-              resetField("schedule");
-            } else {
-              setValue("schedule", null);
-            }
-          }}
-          title={t("choose_common_schedule_team_event")}
-          description={t("choose_common_schedule_team_event_description")}>
-          <EventTypeSchedule />
-        </SettingsToggle>
-      )}
-    />
-  );
-};
-
-export const AvailabilityTab = ({ isTeamEvent }: { isTeamEvent: boolean }) => {
-  return isTeamEvent ? <UseCommonScheduleSettingsToggle /> : <EventTypeSchedule />;
-};

apps/web/components/eventtype/EventAdvancedTab.tsx

@@ -10,14 +10,19 @@ import type { EventNameObjectType } from "@calcom/core/event";
 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";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { Prisma } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Checkbox, Label, SettingsToggle, showToast, TextField, Tooltip } from "@calcom/ui";
-import { FiEdit, FiCopy } from "@calcom/ui/components/icon";
+import { Button, Checkbox, Label, SettingsToggle, showToast, TextField, Tooltip, Alert } from "@calcom/ui";
+import { Edit, Copy } from "@calcom/ui/components/icon";
 
 import RequiresConfirmationController from "./RequiresConfirmationController";
 
@@ -42,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";
   });
@@ -58,6 +65,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
   const [requiresConfirmation, setRequiresConfirmation] = useState(eventType.requiresConfirmation);
   const placeholderHashedLink = `${CAL_URL}/d/${hashedUrl}/${eventType.slug}`;
   const seatsEnabled = formMethods.watch("seatsPerTimeSlotEnabled");
+  const noShowFeeEnabled = eventType.metadata.apps?.stripe?.paymentOption === "HOLD";
 
   useEffect(() => {
     !hashedUrl && setHashedUrl(generateHashedLink(eventType.users[0]?.id ?? team?.id));
@@ -79,11 +87,19 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
     );
   };
 
+  const { shouldLockDisableProps } = useLockedFieldsManager(
+    eventType,
+    t("locked_fields_admin_description"),
+    t("locked_fields_member_description")
+  );
   const eventNamePlaceholder = getEventName({
     ...eventNameObject,
     eventName: formMethods.watch("eventName"),
   });
 
+  const successRedirectUrlLocked = shouldLockDisableProps("successRedirectUrl");
+  const seatsLocked = shouldLockDisableProps("seatsPerTimeSlotEnabled");
+
   const closeEventNameTip = () => setShowEventNameTip(false);
 
   const setEventName = (value: string) => formMethods.setValue("eventName", value);
@@ -127,19 +143,19 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         <TextField
           label={t("event_name_in_calendar")}
           type="text"
+          {...shouldLockDisableProps("eventName")}
           placeholder={eventNamePlaceholder}
           defaultValue={eventType.eventName || ""}
           {...formMethods.register("eventName")}
           addOnSuffix={
             <Button
-              type="button"
-              StartIcon={FiEdit}
-              variant="icon"
               color="minimal"
-              className="hover:stroke-3 hover:text-emphasis min-w-fit px-0 hover:bg-transparent"
-              onClick={() => setShowEventNameTip((old) => !old)}
+              size="sm"
               aria-label="edit custom name"
-            />
+              className="hover:stroke-3 hover:text-emphasis min-w-fit px-0 !py-0 hover:bg-transparent"
+              onClick={() => setShowEventNameTip((old) => !old)}>
+              <Edit className="h-4 w-4" />
+            </Button>
           }
         />
       </div>
@@ -149,6 +165,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         description={t("booking_questions_description")}
         addFieldLabel={t("add_a_booking_question")}
         formProp="bookingFields"
+        {...shouldLockDisableProps("bookingFields")}
         dataStore={{
           options: {
             locations: getLocationsOptionsForSelect(eventType?.locations ?? [], t),
@@ -157,6 +174,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
       />
       <hr className="border-subtle" />
       <RequiresConfirmationController
+        eventType={eventType}
         seatsEnabled={seatsEnabled}
         metadata={eventType.metadata}
         requiresConfirmation={requiresConfirmation}
@@ -170,6 +188,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         render={({ field: { value, onChange } }) => (
           <SettingsToggle
             title={t("disable_notes")}
+            {...shouldLockDisableProps("hideCalendarNotes")}
             description={t("disable_notes_description")}
             checked={value}
             onCheckedChange={(e) => onChange(e)}
@@ -184,6 +203,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           <>
             <SettingsToggle
               title={t("redirect_success_booking")}
+              {...successRedirectUrlLocked}
               description={t("redirect_url_description")}
               checked={redirectUrlVisible}
               onCheckedChange={(e) => {
@@ -196,6 +216,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                   className="w-full"
                   label={t("redirect_success_booking")}
                   labelSrOnly
+                  disabled={successRedirectUrlLocked.disabled}
                   placeholder={t("external_redirect_url")}
                   required={redirectUrlVisible}
                   type="text"
@@ -218,6 +239,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
       <SettingsToggle
         data-testid="hashedLinkCheck"
         title={t("private_link")}
+        {...shouldLockDisableProps("hashedLinkCheck")}
         description={t("private_link_description", { appName: APP_NAME })}
         checked={hashedLinkVisible}
         onCheckedChange={(e) => {
@@ -239,6 +261,10 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
               <Tooltip content={eventType.hashedLink ? t("copy_to_clipboard") : t("enabled_after_update")}>
                 <Button
                   color="minimal"
+                  size="sm"
+                  type="button"
+                  className="hover:stroke-3 hover:text-emphasis min-w-fit px-0 !py-0 hover:bg-transparent"
+                  aria-label="copy link"
                   onClick={() => {
                     navigator.clipboard.writeText(placeholderHashedLink);
                     if (eventType.hashedLink) {
@@ -246,10 +272,8 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                     } else {
                       showToast(t("enabled_after_update_description"), "warning");
                     }
-                  }}
-                  className="hover:stroke-3 hover:text-emphasis hover:bg-transparent"
-                  type="button">
-                  <FiCopy />
+                  }}>
+                  <Copy className="h-4 w-4" />
                 </Button>
               </Tooltip>
             }
@@ -262,57 +286,108 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         control={formMethods.control}
         defaultValue={!!eventType.seatsPerTimeSlot}
         render={({ field: { value, onChange } }) => (
-          <SettingsToggle
-            data-testid="offer-seats-toggle"
-            title={t("offer_seats")}
-            description={t("offer_seats_description")}
-            checked={value}
-            onCheckedChange={(e) => {
-              // Enabling seats will disable guests and requiring confirmation until fully supported
-              if (e) {
-                toggleGuests(false);
-                formMethods.setValue("requiresConfirmation", false);
-                setRequiresConfirmation(false);
-                formMethods.setValue("seatsPerTimeSlot", 2);
-              } else {
-                formMethods.setValue("seatsPerTimeSlot", null);
-                toggleGuests(true);
-              }
-              onChange(e);
-            }}>
-            <Controller
-              name="seatsPerTimeSlot"
-              control={formMethods.control}
-              defaultValue={eventType.seatsPerTimeSlot}
-              render={({ field: { value, onChange } }) => (
-                <div className="lg:-ml-2">
-                  <TextField
-                    required
-                    name="seatsPerTimeSlot"
-                    labelSrOnly
-                    label={t("number_of_seats")}
-                    type="number"
-                    defaultValue={value || 2}
-                    min={1}
-                    addOnSuffix={<>{t("seats")}</>}
-                    onChange={(e) => {
-                      onChange(Math.abs(Number(e.target.value)));
-                    }}
-                  />
-                  <div className="mt-2">
-                    <Checkbox
-                      description={t("show_attendees")}
-                      onChange={(e) => formMethods.setValue("seatsShowAttendees", e.target.checked)}
-                      defaultChecked={!!eventType.seatsShowAttendees}
+          <>
+            <SettingsToggle
+              data-testid="offer-seats-toggle"
+              title={t("offer_seats")}
+              {...seatsLocked}
+              description={t("offer_seats_description")}
+              checked={value}
+              disabled={noShowFeeEnabled}
+              onCheckedChange={(e) => {
+                // Enabling seats will disable guests and requiring confirmation until fully supported
+                if (e) {
+                  toggleGuests(false);
+                  formMethods.setValue("requiresConfirmation", false);
+                  setRequiresConfirmation(false);
+                  formMethods.setValue("seatsPerTimeSlot", 2);
+                } else {
+                  formMethods.setValue("seatsPerTimeSlot", null);
+                  toggleGuests(true);
+                }
+                onChange(e);
+              }}>
+              <Controller
+                name="seatsPerTimeSlot"
+                control={formMethods.control}
+                defaultValue={eventType.seatsPerTimeSlot}
+                render={({ field: { value, onChange } }) => (
+                  <div className="lg:-ml-2">
+                    <TextField
+                      required
+                      name="seatsPerTimeSlot"
+                      labelSrOnly
+                      label={t("number_of_seats")}
+                      type="number"
+                      disabled={seatsLocked.disabled}
+                      defaultValue={value || 2}
+                      min={1}
+                      addOnSuffix={<>{t("seats")}</>}
+                      onChange={(e) => {
+                        onChange(Math.abs(Number(e.target.value)));
+                      }}
                     />
+                    <div className="mt-2">
+                      <Checkbox
+                        description={t("show_attendees")}
+                        disabled={seatsLocked.disabled}
+                        onChange={(e) => formMethods.setValue("seatsShowAttendees", e.target.checked)}
+                        defaultChecked={!!eventType.seatsShowAttendees}
+                      />
+                    </div>
                   </div>
-                </div>
-              )}
-            />
-          </SettingsToggle>
+                )}
+              />
+            </SettingsToggle>
+            {noShowFeeEnabled && <Alert severity="warning" title={t("seats_and_no_show_fee_error")} />}
+          </>
         )}
       />
-
+      {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}

apps/web/components/eventtype/EventAppsTab.tsx

@@ -5,10 +5,11 @@ import type { GetAppData, SetAppData } from "@calcom/app-store/EventTypeAppConte
 import { EventTypeAppCard } from "@calcom/app-store/_components/EventTypeAppCardInterface";
 import type { EventTypeAppCardComponentProps } from "@calcom/app-store/types";
 import type { EventTypeAppsList } from "@calcom/app-store/utils";
+import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button, EmptyScreen } from "@calcom/ui";
-import { FiGrid } from "@calcom/ui/components/icon";
+import { Button, EmptyScreen, Alert } from "@calcom/ui";
+import { Grid, Lock } from "@calcom/ui/components/icon";
 
 export type EventType = Pick<EventTypeSetupProps, "eventType">["eventType"] &
   EventTypeAppCardComponentProps["eventType"];
@@ -55,19 +56,39 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
     };
   };
 
+  const { shouldLockDisableProps, isManagedEventType, isChildrenManagedEventType } = useLockedFieldsManager(
+    eventType,
+    t("locked_fields_admin_description"),
+    t("locked_fields_member_description")
+  );
+
   return (
     <>
       <div>
         <div className="before:border-0">
+          {!installedApps?.length && isManagedEventType && (
+            <Alert
+              severity="neutral"
+              className="mb-2"
+              title={t("locked_for_members")}
+              message={t("locked_apps_description")}
+            />
+          )}
           {!isLoading && !installedApps?.length ? (
             <EmptyScreen
-              Icon={FiGrid}
+              Icon={Grid}
               headline={t("empty_installed_apps_headline")}
               description={t("empty_installed_apps_description")}
               buttonRaw={
-                <Button target="_blank" color="secondary" href="/apps">
-                  {t("empty_installed_apps_button")}{" "}
-                </Button>
+                isChildrenManagedEventType && !isManagedEventType ? (
+                  <Button StartIcon={Lock} color="secondary" disabled>
+                    {t("locked_by_admin")}
+                  </Button>
+                ) : (
+                  <Button target="_blank" color="secondary" href="/apps">
+                    {t("empty_installed_apps_button")}{" "}
+                  </Button>
+                )
               }
             />
           ) : null}
@@ -82,22 +103,24 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
           ))}
         </div>
       </div>
-      <div>
-        {!isLoading && notInstalledApps?.length ? (
-          <h2 className="text-emphasis mt-0 mb-2 text-lg font-semibold">Available Apps</h2>
-        ) : null}
-        <div className="before:border-0">
-          {notInstalledApps?.map((app) => (
-            <EventTypeAppCard
-              getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}
-              setAppData={getAppDataSetter(app.slug as EventTypeAppsList)}
-              key={app.slug}
-              app={app}
-              eventType={eventType}
-            />
-          ))}
+      {!shouldLockDisableProps("apps").disabled && (
+        <div>
+          {!isLoading && notInstalledApps?.length ? (
+            <h2 className="text-emphasis my-2 text-lg font-semibold">{t("available_apps")}</h2>
+          ) : null}
+          <div className="before:border-0">
+            {notInstalledApps?.map((app) => (
+              <EventTypeAppCard
+                getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}
+                setAppData={getAppDataSetter(app.slug as EventTypeAppsList)}
+                key={app.slug}
+                app={app}
+                eventType={eventType}
+              />
+            ))}
+          </div>
         </div>
-      </div>
+      )}
     </>
   );
 };

apps/web/components/eventtype/EventAvailabilityTab.tsx

@@ -0,0 +1,301 @@
+import type { EventTypeSetup, FormValues } from "pages/event-types/[type]";
+import { useState } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import type { OptionProps, SingleValueProps } from "react-select";
+import { components } from "react-select";
+
+import dayjs from "@calcom/dayjs";
+import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
+import classNames from "@calcom/lib/classNames";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { weekdayNames } from "@calcom/lib/weekday";
+import { SchedulingType } from "@calcom/prisma/enums";
+import { trpc } from "@calcom/trpc/react";
+import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
+import { Badge, Button, Select, SettingsToggle, SkeletonText } from "@calcom/ui";
+import { ExternalLink, Globe } from "@calcom/ui/components/icon";
+
+import { SelectSkeletonLoader } from "@components/availability/SkeletonLoader";
+
+export type AvailabilityOption = {
+  label: string;
+  value: number;
+  isDefault: boolean;
+  isManaged?: boolean;
+};
+
+const Option = ({ ...props }: OptionProps<AvailabilityOption>) => {
+  const { label, isDefault, isManaged = false } = props.data;
+  const { t } = useLocale();
+  return (
+    <components.Option {...props}>
+      <span>{label}</span>
+      {isDefault && (
+        <Badge variant="blue" className="ml-2">
+          {t("default")}
+        </Badge>
+      )}
+      {isManaged && (
+        <Badge variant="gray" className="ml-2">
+          {t("managed")}
+        </Badge>
+      )}
+    </components.Option>
+  );
+};
+
+const SingleValue = ({ ...props }: SingleValueProps<AvailabilityOption>) => {
+  const { label, isDefault, isManaged = false } = props.data;
+  const { t } = useLocale();
+  return (
+    <components.SingleValue {...props}>
+      <span>{label}</span>
+      {isDefault && (
+        <Badge variant="blue" className="ml-2">
+          {t("default")}
+        </Badge>
+      )}
+      {isManaged && (
+        <Badge variant="gray" className="ml-2">
+          {t("managed")}
+        </Badge>
+      )}
+    </components.SingleValue>
+  );
+};
+
+const format = (date: Date, hour12: boolean) =>
+  Intl.DateTimeFormat(undefined, {
+    hour: "numeric",
+    minute: "numeric",
+    hourCycle: hour12 ? "h12" : "h24",
+  }).format(new Date(dayjs.utc(date).format("YYYY-MM-DDTHH:mm:ss")));
+
+const EventTypeScheduleDetails = ({
+  isManagedEventType,
+  selectedScheduleValue,
+}: {
+  isManagedEventType: boolean;
+  selectedScheduleValue: AvailabilityOption | undefined;
+}) => {
+  const { data: loggedInUser } = useMeQuery();
+  const timeFormat = loggedInUser?.timeFormat;
+  const { t, i18n } = useLocale();
+  const { watch } = useFormContext<FormValues>();
+
+  const scheduleId = watch("schedule");
+  const { isLoading, data: schedule } = trpc.viewer.availability.schedule.get.useQuery(
+    {
+      scheduleId: scheduleId || loggedInUser?.defaultScheduleId || selectedScheduleValue?.value || undefined,
+      isManagedEventType,
+    },
+    { enabled: !!scheduleId || !!loggedInUser?.defaultScheduleId || !!selectedScheduleValue }
+  );
+
+  const filterDays = (dayNum: number) =>
+    schedule?.schedule.filter((item) => item.days.includes((dayNum + 1) % 7)) || [];
+
+  return (
+    <div className="border-default space-y-4 rounded border px-6 pb-4">
+      <ol className="table border-collapse text-sm">
+        {weekdayNames(i18n.language, 1, "long").map((day, index) => {
+          const isAvailable = !!filterDays(index).length;
+          return (
+            <li key={day} className="my-6 flex border-transparent last:mb-2">
+              <span
+                className={classNames(
+                  "w-20 font-medium sm:w-32 ",
+                  !isAvailable ? "text-subtle line-through" : "text-default"
+                )}>
+                {day}
+              </span>
+              {isLoading ? (
+                <SkeletonText className="block h-5 w-60" />
+              ) : isAvailable ? (
+                <div className="space-y-3 text-right">
+                  {filterDays(index).map((dayRange, i) => (
+                    <div key={i} className="text-default flex items-center leading-4">
+                      <span className="w-16 sm:w-28 sm:text-left">
+                        {format(dayRange.startTime, timeFormat === 12)}
+                      </span>
+                      <span className="ms-4">-</span>
+                      <div className="ml-6 sm:w-28">{format(dayRange.endTime, timeFormat === 12)}</div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <span className="text-subtle ml-6 sm:ml-0">{t("unavailable")}</span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+      <hr className="border-subtle" />
+      <div className="flex flex-col justify-center gap-2 sm:flex-row sm:justify-between">
+        <span className="text-default flex items-center justify-center text-sm sm:justify-start">
+          <Globe className="h-3.5 w-3.5 ltr:mr-2 rtl:ml-2" />
+          {schedule?.timeZone || <SkeletonText className="block h-5 w-32" />}
+        </span>
+        {!!schedule?.id && !schedule.isManaged && (
+          <Button
+            href={`/availability/${schedule.id}`}
+            disabled={isLoading}
+            color="minimal"
+            EndIcon={ExternalLink}
+            target="_blank"
+            rel="noopener noreferrer">
+            {t("edit_availability")}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
+  const { t } = useLocale();
+  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>();
+  const [options, setOptions] = useState<AvailabilityOption[]>([]);
+
+  const { isLoading } = trpc.viewer.availability.list.useQuery(undefined, {
+    onSuccess: ({ schedules }) => {
+      const options = schedules.map((schedule) => ({
+        value: schedule.id,
+        label: schedule.name,
+        isDefault: schedule.isDefault,
+        isManaged: false,
+      }));
+
+      // We are showing a managed event for a team admin, so adding the option to let members choose their schedule
+      if (isManagedEventType) {
+        options.push({
+          value: 0,
+          label: t("members_default_schedule"),
+          isDefault: false,
+          isManaged: false,
+        });
+      }
+
+      // We are showing a managed event for a member and team owner selected their own schedule, so adding
+      // the managed schedule option
+      if (
+        isChildrenManagedEventType &&
+        watchSchedule &&
+        !schedules.find((schedule) => schedule.id === watchSchedule)
+      ) {
+        options.push({
+          value: watchSchedule,
+          label: eventType.scheduleName ?? t("default_schedule_name"),
+          isDefault: false,
+          isManaged: false,
+        });
+      }
+
+      setOptions(options);
+
+      const scheduleId = formMethods.getValues("schedule");
+      const value = options.find((option) =>
+        scheduleId
+          ? option.value === scheduleId
+          : isManagedEventType
+          ? option.value === 0
+          : option.value === schedules.find((schedule) => schedule.isDefault)?.id
+      );
+
+      formMethods.setValue("availability", value);
+    },
+  });
+
+  const availabilityValue = formMethods.watch("availability");
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="availability" className="text-default mb-2 block text-sm font-medium leading-none">
+          {t("availability")}
+          {shouldLockIndicator("availability")}
+        </label>
+        {isLoading && <SelectSkeletonLoader />}
+        {!isLoading && (
+          <Controller
+            name="schedule"
+            render={({ field }) => {
+              return (
+                <Select
+                  placeholder={t("select")}
+                  options={options}
+                  isSearchable={false}
+                  onChange={(selected) => {
+                    field.onChange(selected?.value || null);
+                    if (selected?.value) formMethods.setValue("availability", selected);
+                  }}
+                  className="block w-full min-w-0 flex-1 rounded-sm text-sm"
+                  value={availabilityValue}
+                  components={{ Option, SingleValue }}
+                  isMulti={false}
+                />
+              );
+            }}
+          />
+        )}
+      </div>
+      {availabilityValue?.value !== 0 ? (
+        <EventTypeScheduleDetails
+          selectedScheduleValue={availabilityValue}
+          isManagedEventType={isManagedEventType || isChildrenManagedEventType}
+        />
+      ) : (
+        isManagedEventType && (
+          <p className="!mt-2 ml-1 text-sm text-gray-600">{t("members_default_schedule_description")}</p>
+        )
+      )}
+    </div>
+  );
+};
+
+const UseCommonScheduleSettingsToggle = ({ eventType }: { eventType: EventTypeSetup }) => {
+  const { t } = useLocale();
+  const { resetField, setValue } = useFormContext<FormValues>();
+  return (
+    <Controller
+      name="metadata.config.useHostSchedulesForTeamEvent"
+      render={({ field: { value, onChange } }) => (
+        <SettingsToggle
+          checked={!value}
+          onCheckedChange={(checked) => {
+            onChange(!checked);
+            if (checked) {
+              resetField("schedule");
+            } else {
+              setValue("schedule", null);
+            }
+          }}
+          title={t("choose_common_schedule_team_event")}
+          description={t("choose_common_schedule_team_event_description")}>
+          <EventTypeSchedule eventType={eventType} />
+        </SettingsToggle>
+      )}
+    />
+  );
+};
+
+export const EventAvailabilityTab = ({
+  eventType,
+  isTeamEvent,
+}: {
+  eventType: EventTypeSetup;
+  isTeamEvent: boolean;
+}) => {
+  return isTeamEvent && eventType.schedulingType !== SchedulingType.MANAGED ? (
+    <UseCommonScheduleSettingsToggle eventType={eventType} />
+  ) : (
+    <EventTypeSchedule eventType={eventType} />
+  );
+};

apps/web/components/eventtype/EventLimitsTab.tsx

@@ -7,24 +7,16 @@ import type { UseFormRegisterReturn } from "react-hook-form";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import type { SingleValue } from "react-select";
 
+import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
 import { classNames } from "@calcom/lib";
 import type { DurationType } from "@calcom/lib/convertToNewDurationType";
 import convertToNewDurationType from "@calcom/lib/convertToNewDurationType";
 import findDurationType from "@calcom/lib/findDurationType";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import type { PeriodType } from "@calcom/prisma/client";
+import type { PeriodType } from "@calcom/prisma/enums";
 import type { IntervalLimit } from "@calcom/types/Calendar";
-import {
-  Button,
-  DateRangePicker,
-  Input,
-  InputField,
-  Label,
-  Select,
-  SettingsToggle,
-  TextField,
-} from "@calcom/ui";
-import { FiPlus, FiTrash } from "@calcom/ui/components/icon";
+import { Button, DateRangePicker, InputField, Label, Select, SettingsToggle, TextField } from "@calcom/ui";
+import { Plus, Trash } from "@calcom/ui/components/icon";
 
 const MinimumBookingNoticeInput = React.forwardRef<
   HTMLInputElement,
@@ -78,6 +70,7 @@ const MinimumBookingNoticeInput = React.forwardRef<
       <div className="w-1/2 md:w-full">
         <InputField
           required
+          disabled={passThroughProps.disabled}
           defaultValue={minimumBookingNoticeDisplayValues.value}
           onChange={(e) =>
             setMinimumBookingNoticeDisplayValues({
@@ -95,6 +88,7 @@ const MinimumBookingNoticeInput = React.forwardRef<
       </div>
       <Select
         isSearchable={false}
+        isDisabled={passThroughProps.disabled}
         className="mb-0 ml-2 h-[38px] w-full capitalize md:min-w-[150px] md:max-w-[200px]"
         defaultValue={durationTypeOptions.find(
           (option) => option.value === minimumBookingNoticeDisplayValues.type
@@ -114,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 = [
@@ -146,12 +140,43 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
     defaultValue: periodType?.type,
   });
 
+  const { shouldLockIndicator, shouldLockDisableProps } = useLockedFieldsManager(
+    eventType,
+    t("locked_fields_admin_description"),
+    t("locked_fields_member_description")
+  );
+
+  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">
         <div className="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4">
           <div className="w-full">
-            <Label htmlFor="beforeBufferTime">{t("before_event")} </Label>
+            <Label htmlFor="beforeBufferTime">
+              {t("before_event")}
+              {shouldLockIndicator("bookingLimits")}
+            </Label>
             <Controller
               name="beforeBufferTime"
               control={formMethods.control}
@@ -170,6 +195,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                 return (
                   <Select
                     isSearchable={false}
+                    isDisabled={shouldLockDisableProps("bookingLimits").disabled}
                     onChange={(val) => {
                       if (val) onChange(val.value);
                     }}
@@ -183,7 +209,10 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
             />
           </div>
           <div className="w-full">
-            <Label htmlFor="afterBufferTime">{t("after_event")} </Label>
+            <Label htmlFor="afterBufferTime">
+              {t("after_event")}
+              {shouldLockIndicator("bookingLimits")}
+            </Label>
             <Controller
               name="afterBufferTime"
               control={formMethods.control}
@@ -202,6 +231,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                 return (
                   <Select
                     isSearchable={false}
+                    isDisabled={shouldLockDisableProps("bookingLimits").disabled}
                     onChange={(val) => {
                       if (val) onChange(val.value);
                     }}
@@ -217,11 +247,20 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
         </div>
         <div className="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4">
           <div className="w-full">
-            <Label htmlFor="minimumBookingNotice">{t("minimum_booking_notice")} </Label>
-            <MinimumBookingNoticeInput {...formMethods.register("minimumBookingNotice")} />
+            <Label htmlFor="minimumBookingNotice">
+              {t("minimum_booking_notice")}
+              {shouldLockIndicator("minimumBookingNotice")}
+            </Label>
+            <MinimumBookingNoticeInput
+              disabled={shouldLockDisableProps("minimumBookingNotice").disabled}
+              {...formMethods.register("minimumBookingNotice")}
+            />
           </div>
           <div className="w-full">
-            <Label htmlFor="slotInterval">{t("slot_interval")} </Label>
+            <Label htmlFor="slotInterval">
+              {t("slot_interval")}
+              {shouldLockIndicator("slotInterval")}
+            </Label>
             <Controller
               name="slotInterval"
               control={formMethods.control}
@@ -239,6 +278,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                 return (
                   <Select
                     isSearchable={false}
+                    isDisabled={shouldLockDisableProps("slotInterval").disabled}
                     onChange={(val) => {
                       formMethods.setValue("slotInterval", val && (val.value || 0) > 0 ? val.value : null);
                     }}
@@ -261,6 +301,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
         render={({ field: { value } }) => (
           <SettingsToggle
             title={t("limit_booking_frequency")}
+            {...bookingLimitsLocked}
             description={t("limit_booking_frequency_description")}
             checked={Object.keys(value ?? {}).length > 0}
             onCheckedChange={(active) => {
@@ -272,7 +313,12 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                 formMethods.setValue("bookingLimits", {});
               }
             }}>
-            <IntervalLimitsManager propertyName="bookingLimits" defaultLimit={1} step={1} />
+            <IntervalLimitsManager
+              disabled={bookingLimitsLocked.disabled}
+              propertyName="bookingLimits"
+              defaultLimit={1}
+              step={1}
+            />
           </SettingsToggle>
         )}
       />
@@ -284,6 +330,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
           <SettingsToggle
             title={t("limit_total_booking_duration")}
             description={t("limit_total_booking_duration_description")}
+            {...durationLimitsLocked}
             checked={Object.keys(value ?? {}).length > 0}
             onCheckedChange={(active) => {
               if (active) {
@@ -297,6 +344,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
             <IntervalLimitsManager
               propertyName="durationLimits"
               defaultLimit={60}
+              disabled={durationLimitsLocked.disabled}
               step={15}
               textFieldSuffix={t("minutes")}
             />
@@ -311,13 +359,16 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
           <SettingsToggle
             title={t("limit_future_bookings")}
             description={t("limit_future_bookings_description")}
+            {...periodTypeLocked}
             checked={value && value !== "UNLIMITED"}
             onCheckedChange={(bool) => formMethods.setValue("periodType", bool ? "ROLLING" : "UNLIMITED")}>
             <RadioGroup.Root
               defaultValue={watchPeriodType}
               value={watchPeriodType}
               onValueChange={(val) => formMethods.setValue("periodType", val as PeriodType)}>
-              {PERIOD_TYPES.map((period) => {
+              {PERIOD_TYPES.filter((opt) =>
+                periodTypeLocked.disabled ? watchPeriodType === opt.type : true
+              ).map((period) => {
                 if (period.type === "UNLIMITED") return null;
                 return (
                   <div
@@ -326,30 +377,42 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                       watchPeriodType === "UNLIMITED" && "pointer-events-none opacity-30"
                     )}
                     key={period.type}>
-                    <RadioGroup.Item
-                      id={period.type}
-                      value={period.type}
-                      className="min-w-4 bg-default flex h-4 w-4 cursor-pointer items-center rounded-full border border-black focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
-                      <RadioGroup.Indicator className="relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-black" />
-                    </RadioGroup.Item>
+                    {!periodTypeLocked.disabled && (
+                      <RadioGroup.Item
+                        id={period.type}
+                        value={period.type}
+                        className="min-w-4 bg-default border-default flex h-4 w-4 cursor-pointer items-center rounded-full border focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
+                        <RadioGroup.Indicator className="after:bg-inverted relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full" />
+                      </RadioGroup.Item>
+                    )}
                     {period.prefix ? <span>{period.prefix}&nbsp;</span> : null}
                     {period.type === "ROLLING" && (
-                      <div className="flex h-9">
-                        <Input
+                      <div className="flex items-center">
+                        <TextField
+                          labelSrOnly
                           type="number"
-                          className="border-default block w-16 rounded-md py-3 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
+                          className="border-default my-0 block w-16 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
                           placeholder="30"
+                          disabled={periodTypeLocked.disabled}
                           {...formMethods.register("periodDays", { valueAsNumber: true })}
                           defaultValue={eventType.periodDays || 30}
                         />
-                        <select
-                          id=""
-                          className="border-default bg-default text-default block h-9 w-full rounded-md py-2 pl-3 pr-10 text-sm focus:outline-none"
-                          {...formMethods.register("periodCountCalendarDays")}
-                          defaultValue={eventType.periodCountCalendarDays ? "1" : "0"}>
-                          <option value="1">{t("calendar_days")}</option>
-                          <option value="0">{t("business_days")}</option>
-                        </select>
+                        <Select
+                          options={optionsPeriod}
+                          isSearchable={false}
+                          isDisabled={periodTypeLocked.disabled}
+                          onChange={(opt) => {
+                            formMethods.setValue(
+                              "periodCountCalendarDays",
+                              opt?.value.toString() as "0" | "1"
+                            );
+                          }}
+                          defaultValue={
+                            optionsPeriod.find(
+                              (opt) => opt.value === (eventType.periodCountCalendarDays ? 1 : 0)
+                            ) ?? optionsPeriod[0]
+                          }
+                        />
                       </div>
                     )}
                     {period.type === "RANGE" && (
@@ -362,6 +425,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                             <DateRangePicker
                               startDate={formMethods.getValues("periodDates").startDate}
                               endDate={formMethods.getValues("periodDates").endDate}
+                              disabled={periodTypeLocked.disabled}
                               onDatesChange={({ startDate, endDate }) => {
                                 formMethods.setValue("periodDates", {
                                   startDate,
@@ -381,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>
   );
 };
@@ -400,6 +490,7 @@ type IntervalLimitItemProps = {
   step: number;
   value: number;
   textFieldSuffix?: string;
+  disabled?: boolean;
   selectOptions: { value: keyof IntervalLimit; label: string }[];
   hasDeleteButton?: boolean;
   onDelete: (intervalLimitsKey: IntervalLimitsKey) => void;
@@ -414,6 +505,7 @@ const IntervalLimitItem = ({
   textFieldSuffix,
   selectOptions,
   hasDeleteButton,
+  disabled,
   onDelete,
   onLimitChange,
   onIntervalSelect,
@@ -424,8 +516,9 @@ const IntervalLimitItem = ({
         required
         type="number"
         containerClassName={textFieldSuffix ? "w-44 -mb-1" : "w-16 mb-0"}
-        className="mb-0"
+        className="mb-0 !h-auto"
         placeholder={`${value}`}
+        disabled={disabled}
         min={step}
         step={step}
         defaultValue={value}
@@ -435,11 +528,12 @@ const IntervalLimitItem = ({
       <Select
         options={selectOptions}
         isSearchable={false}
+        isDisabled={disabled}
         defaultValue={INTERVAL_LIMIT_OPTIONS.find((option) => option.value === limitKey)}
         onChange={onIntervalSelect}
       />
-      {hasDeleteButton && (
-        <Button variant="icon" StartIcon={FiTrash} color="destructive" onClick={() => onDelete(limitKey)} />
+      {hasDeleteButton && !disabled && (
+        <Button variant="icon" StartIcon={Trash} color="destructive" onClick={() => onDelete(limitKey)} />
       )}
     </div>
   );
@@ -450,6 +544,7 @@ type IntervalLimitsManagerProps<K extends "durationLimits" | "bookingLimits"> =
   defaultLimit: number;
   step: number;
   textFieldSuffix?: string;
+  disabled?: boolean;
 };
 
 const IntervalLimitsManager = <K extends "durationLimits" | "bookingLimits">({
@@ -457,6 +552,7 @@ const IntervalLimitsManager = <K extends "durationLimits" | "bookingLimits">({
   defaultLimit,
   step,
   textFieldSuffix,
+  disabled,
 }: IntervalLimitsManagerProps<K>) => {
   const { watch, setValue, control } = useFormContext<FormValues>();
   const watchIntervalLimits = watch(propertyName);
@@ -506,6 +602,7 @@ const IntervalLimitsManager = <K extends "durationLimits" | "bookingLimits">({
                       limitKey={limitKey}
                       step={step}
                       value={value}
+                      disabled={disabled}
                       textFieldSuffix={textFieldSuffix}
                       hasDeleteButton={Object.keys(currentIntervalLimits).length > 1}
                       selectOptions={INTERVAL_LIMIT_OPTIONS.filter(
@@ -536,8 +633,8 @@ const IntervalLimitsManager = <K extends "durationLimits" | "bookingLimits">({
                     />
                   );
                 })}
-            {currentIntervalLimits && Object.keys(currentIntervalLimits).length <= 3 && (
-              <Button color="minimal" StartIcon={FiPlus} onClick={addLimit}>
+            {currentIntervalLimits && Object.keys(currentIntervalLimits).length <= 3 && !disabled && (
+              <Button color="minimal" StartIcon={Plus} onClick={addLimit}>
                 {t("add_limit")}
               </Button>
             )}

apps/web/components/eventtype/EventRecurringTab.tsx

@@ -11,7 +11,7 @@ export const EventRecurringTab = ({ eventType }: Pick<EventTypeSetupProps, "even
 
   return (
     <div className="">
-      <RecurringEventController paymentEnabled={requirePayment} recurringEvent={eventType.recurringEvent} />
+      <RecurringEventController paymentEnabled={requirePayment} eventType={eventType} />
     </div>
   );
 };

apps/web/components/eventtype/EventSetupTab.tsx

@@ -11,6 +11,8 @@ import { z } from "zod";
 
 import type { EventLocationType } from "@calcom/app-store/locations";
 import { getEventLocationType, MeetLocationType, LocationType } from "@calcom/app-store/locations";
+import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
+import cx from "@calcom/lib/classNames";
 import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { md } from "@calcom/lib/markdownIt";
@@ -27,7 +29,7 @@ import {
   SkeletonContainer,
   SkeletonText,
 } from "@calcom/ui";
-import { FiEdit2, FiCheck, FiX, FiPlus } from "@calcom/ui/components/icon";
+import { Edit2, Check, X, Plus } from "@calcom/ui/components/icon";
 
 import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
 import type { SingleValueLocationOption, LocationOption } from "@components/ui/form/LocationSelect";
@@ -45,8 +47,33 @@ const getLocationFromType = (
   }
 };
 
+const getLocationInfo = (props: Pick<EventTypeSetupProps, "eventType" | "locationOptions">) => {
+  const locationAvailable =
+    props.eventType.locations &&
+    props.eventType.locations.length > 0 &&
+    props.locationOptions.some((op) =>
+      op.options.find((opt) => opt.value === props.eventType.locations[0].type)
+    );
+  const locationDetails = props.eventType.locations &&
+    props.eventType.locations.length > 0 &&
+    !locationAvailable && {
+      slug: props.eventType.locations[0].type
+        .replace("integrations:", "")
+        .replace(":", "-")
+        .replace("_video", ""),
+      name: props.eventType.locations[0].type
+        .replace("integrations:", "")
+        .replace(":", " ")
+        .replace("_video", "")
+        .split(" ")
+        .map((word) => word[0].toUpperCase() + word.slice(1))
+        .join(" "),
+    };
+  return { locationAvailable, locationDetails };
+};
 interface DescriptionEditorProps {
   description?: string | null;
+  editable?: boolean;
 }
 
 const DescriptionEditor = (props: DescriptionEditorProps) => {
@@ -54,6 +81,7 @@ const DescriptionEditor = (props: DescriptionEditorProps) => {
   const [mounted, setIsMounted] = useState(false);
   const { t } = useLocale();
   const { description } = props;
+  const [firstRender, setFirstRender] = useState(true);
   useEffect(() => {
     setIsMounted(true);
   }, []);
@@ -64,6 +92,9 @@ const DescriptionEditor = (props: DescriptionEditorProps) => {
       setText={(value: string) => formMethods.setValue("description", turndown(value))}
       excludedToolbarItems={["blockType"]}
       placeholder={t("quick_video_meeting")}
+      editable={props.editable}
+      firstRender={firstRender}
+      setFirstRender={setFirstRender}
     />
   ) : (
     <SkeletonContainer>
@@ -174,6 +205,13 @@ export const EventSetupTab = (
     resolver: zodResolver(locationFormSchema),
   });
 
+  const { isChildrenManagedEventType, isManagedEventType, shouldLockIndicator, shouldLockDisableProps } =
+    useLockedFieldsManager(
+      eventType,
+      t("locked_fields_admin_description"),
+      t("locked_fields_member_description")
+    );
+
   const Locations = () => {
     const { t } = useLocale();
 
@@ -188,6 +226,12 @@ export const EventSetupTab = (
       return true;
     });
 
+    const defaultValue = isManagedEventType
+      ? locationOptions.find((op) => op.label === t("default"))?.options[0]
+      : undefined;
+
+    const { locationDetails, locationAvailable } = getLocationInfo(props);
+
     return (
       <div className="w-full">
         {validLocations.length === 0 && (
@@ -195,6 +239,8 @@ export const EventSetupTab = (
             <LocationSelect
               placeholder={t("select")}
               options={locationOptions}
+              isDisabled={shouldLockDisableProps("locations").disabled}
+              defaultValue={defaultValue}
               isSearchable={false}
               className="block w-full min-w-0 flex-1 rounded-sm text-sm"
               menuPlacement="auto"
@@ -230,12 +276,18 @@ export const EventSetupTab = (
               return (
                 <li
                   key={`${location.type}${index}`}
-                  className="border-default text-default mb-2 rounded-md border py-1.5 px-2 hover:cursor-pointer">
+                  className="border-default text-default mb-2 h-9 rounded-md border py-1.5 px-2 hover:cursor-pointer">
                   <div className="flex items-center justify-between">
                     <div className="flex items-center">
                       <img
                         src={eventLocationType.iconUrl}
-                        className="h-4 w-4"
+                        className={cx(
+                          "h-4 w-4",
+                          // invert all the icons except app icons
+                          eventLocationType.iconUrl &&
+                            !eventLocationType.iconUrl.startsWith("/app-store") &&
+                            "dark:invert"
+                        )}
                         alt={`${eventLocationType.label} logo`}
                       />
                       <span className="line-clamp-1 ms-1 text-sm">{eventLabel}</span>
@@ -253,10 +305,10 @@ export const EventSetupTab = (
                         }}
                         aria-label={t("edit")}
                         className="hover:text-emphasis text-subtle mr-1 p-1">
-                        <FiEdit2 className="h-4 w-4" />
+                        <Edit2 className="h-4 w-4" />
                       </button>
                       <button type="button" onClick={() => removeLocation(location)} aria-label={t("remove")}>
-                        <FiX className="border-l-1 hover:text-emphasis text-subtle h-6 w-6 pl-1 " />
+                        <X className="border-l-1 hover:text-emphasis text-subtle h-6 w-6 pl-1 " />
                       </button>
                     </div>
                   </div>
@@ -268,7 +320,7 @@ export const EventSetupTab = (
                 location.type === MeetLocationType && destinationCalendar?.integration !== "google_calendar"
             ) && (
               <div className="text-default flex text-sm">
-                <FiCheck className="mt-0.5 mr-1.5 h-2 w-2.5" />
+                <Check className="mt-0.5 mr-1.5 h-2 w-2.5" />
                 <Trans i18nKey="event_type_requres_google_cal">
                   <p>
                     The “Add to calendar” for this event type needs to be a Google Calendar for Meet to work.
@@ -282,11 +334,19 @@ export const EventSetupTab = (
                 </Trans>
               </div>
             )}
-            {validLocations.length > 0 && (
+            {isChildrenManagedEventType && !locationAvailable && locationDetails && (
+              <p className="pl-1 text-sm leading-none text-red-600">
+                {t("app_not_connected", { appName: locationDetails.name })}{" "}
+                <a className="underline" href={`${CAL_URL}/apps/${locationDetails.slug}`}>
+                  {t("connect_now")}
+                </a>
+              </p>
+            )}
+            {validLocations.length > 0 && !isManagedEventType && !isChildrenManagedEventType && (
               <li>
                 <Button
                   data-testid="add-location"
-                  StartIcon={FiPlus}
+                  StartIcon={Plus}
                   color="minimal"
                   onClick={() => setShowLocationModal(true)}>
                   {t("add_location")}
@@ -299,27 +359,43 @@ export const EventSetupTab = (
     );
   };
 
+  const lengthLockedProps = shouldLockDisableProps("length");
+  const descriptionLockedProps = shouldLockDisableProps("description");
+
   return (
     <div>
       <div className="space-y-8">
         <TextField
           required
           label={t("title")}
+          {...shouldLockDisableProps("title")}
           defaultValue={eventType.title}
           {...formMethods.register("title")}
         />
         <div>
-          <Label>{t("description")}</Label>
-          <DescriptionEditor description={eventType?.description} />
+          <Label>
+            {t("description")}
+            {shouldLockIndicator("description")}
+          </Label>
+          <DescriptionEditor
+            description={eventType?.description}
+            editable={!descriptionLockedProps.disabled}
+          />
         </div>
         <TextField
           required
           label={t("URL")}
+          {...shouldLockDisableProps("slug")}
           defaultValue={eventType.slug}
           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", {
@@ -367,12 +443,14 @@ export const EventSetupTab = (
             <div>
               <Skeleton as={Label} loadingClassName="w-16">
                 {t("default_duration")}
+                {shouldLockIndicator("length")}
               </Skeleton>
               <Select
                 value={defaultDuration}
                 isSearchable={false}
                 name="length"
                 className="text-sm"
+                isDisabled={lengthLockedProps.disabled}
                 noOptionsMessage={() => t("default_duration_no_options")}
                 options={selectedMultipleDuration}
                 onChange={(option) => {
@@ -388,32 +466,37 @@ export const EventSetupTab = (
           <TextField
             required
             type="number"
+            {...lengthLockedProps}
             label={t("duration")}
             defaultValue={eventType.length ?? 15}
             {...formMethods.register("length")}
             addOnSuffix={<>{t("minutes")}</>}
+            min={1}
           />
         )}
-        <div className="!mt-4 [&_label]:my-1 [&_label]:font-normal">
-          <SettingsToggle
-            title={t("allow_booker_to_select_duration")}
-            checked={multipleDuration !== undefined}
-            onCheckedChange={() => {
-              if (multipleDuration !== undefined) {
-                setMultipleDuration(undefined);
-                formMethods.setValue("metadata.multipleDuration", undefined);
-                formMethods.setValue("length", eventType.length);
-              } else {
-                setMultipleDuration([]);
-                formMethods.setValue("metadata.multipleDuration", []);
-                formMethods.setValue("length", 0);
-              }
-            }}
-          />
-        </div>
+        {!lengthLockedProps.disabled && (
+          <div className="!mt-4 [&_label]:my-1 [&_label]:font-normal">
+            <SettingsToggle
+              title={t("allow_booker_to_select_duration")}
+              checked={multipleDuration !== undefined}
+              onCheckedChange={() => {
+                if (multipleDuration !== undefined) {
+                  setMultipleDuration(undefined);
+                  formMethods.setValue("metadata.multipleDuration", undefined);
+                  formMethods.setValue("length", eventType.length);
+                } else {
+                  setMultipleDuration([]);
+                  formMethods.setValue("metadata.multipleDuration", []);
+                  formMethods.setValue("length", 0);
+                }
+              }}
+            />
+          </div>
+        )}
         <div>
           <Skeleton as={Label} loadingClassName="w-16">
             {t("location")}
+            {shouldLockIndicator("locations")}
           </Skeleton>
 
           <Controller

apps/web/components/eventtype/EventTeamTab.tsx

@@ -1,4 +1,3 @@
-import type { SchedulingType } from "@prisma/client";
 import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
 import { useEffect, useRef } from "react";
 import type { ComponentProps } from "react";
@@ -7,24 +6,47 @@ import type { Options } from "react-select";
 
 import type { CheckedSelectOption } from "@calcom/features/eventtypes/components/CheckedTeamSelect";
 import CheckedTeamSelect from "@calcom/features/eventtypes/components/CheckedTeamSelect";
+import ChildrenEventTypeSelect from "@calcom/features/eventtypes/components/ChildrenEventTypeSelect";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { SchedulingType } from "@calcom/prisma/enums";
 import { Label, Select } from "@calcom/ui";
 
-interface IMemberToValue {
+interface IUserToValue {
   id: number | null;
   name: string | null;
   username: string | null;
   email: string;
 }
 
-const mapUserToValue = ({ id, name, username, email }: IMemberToValue) => ({
+const mapUserToValue = ({ id, name, username, email }: IUserToValue) => ({
   value: `${id || ""}`,
   label: `${name || ""}`,
   avatar: `${WEBAPP_URL}/${username}/avatar.png`,
   email,
 });
 
+export const mapMemberToChildrenOption = (
+  member: EventTypeSetupProps["teamMembers"][number],
+  slug: string
+) => {
+  return {
+    slug,
+    hidden: false,
+    created: false,
+    owner: {
+      id: member.id,
+      name: member.name ?? "",
+      email: member.email,
+      username: member.username ?? "",
+      membership: member.membership,
+      eventTypeSlugs: member.eventTypes ?? [],
+    },
+    value: `${member.id ?? ""}`,
+    label: member.name ?? "",
+  };
+};
+
 const sortByLabel = (a: ReturnType<typeof mapUserToValue>, b: ReturnType<typeof mapUserToValue>) => {
   if (a.label < b.label) {
     return -1;
@@ -35,6 +57,40 @@ const sortByLabel = (a: ReturnType<typeof mapUserToValue>, b: ReturnType<typeof
   return 0;
 };
 
+const ChildrenEventTypesList = ({
+  options = [],
+  value,
+  onChange,
+  ...rest
+}: {
+  value: ReturnType<typeof mapMemberToChildrenOption>[];
+  onChange?: (options: ReturnType<typeof mapMemberToChildrenOption>[]) => void;
+  options?: Options<ReturnType<typeof mapMemberToChildrenOption>>;
+} & Omit<Partial<ComponentProps<typeof ChildrenEventTypeSelect>>, "onChange" | "value">) => {
+  const { t } = useLocale();
+  return (
+    <div className="flex flex-col space-y-5">
+      <div>
+        <Label>{t("assign_to")}</Label>
+        <ChildrenEventTypeSelect
+          onChange={(options) => {
+            onChange &&
+              onChange(
+                options.map((option) => ({
+                  ...option,
+                }))
+              );
+          }}
+          value={value}
+          options={options.filter((opt) => !value.find((val) => val.owner.id.toString() === opt.value))}
+          controlShouldRenderValue={false}
+          {...rest}
+        />
+      </div>
+    </div>
+  );
+};
+
 const CheckedHostField = ({
   labelText,
   placeholder,
@@ -123,6 +179,21 @@ const RoundRobinHosts = ({
   );
 };
 
+const ChildrenEventTypes = ({
+  childrenEventTypeOptions,
+}: {
+  childrenEventTypeOptions: ReturnType<typeof mapMemberToChildrenOption>[];
+}) => {
+  return (
+    <Controller<FormValues>
+      name="children"
+      render={({ field: { onChange, value } }) => (
+        <ChildrenEventTypesList value={value} options={childrenEventTypeOptions} onChange={onChange} />
+      )}
+    />
+  );
+};
+
 const Hosts = ({
   teamMembers,
 }: {
@@ -189,6 +260,7 @@ const Hosts = ({
                 />*/}
             </>
           ),
+          MANAGED: <></>,
         };
         return !!schedulingType ? schedulingTypeRender[schedulingType] : <></>;
       }}
@@ -196,7 +268,11 @@ const Hosts = ({
   );
 };
 
-export const EventTeamTab = ({ team, teamMembers }: Pick<EventTypeSetupProps, "teamMembers" | "team">) => {
+export const EventTeamTab = ({
+  team,
+  teamMembers,
+  eventType,
+}: Pick<EventTypeSetupProps, "teamMembers" | "team" | "eventType">) => {
   const { t } = useLocale();
 
   const schedulingTypeOptions: {
@@ -216,9 +292,13 @@ export const EventTeamTab = ({ team, teamMembers }: Pick<EventTypeSetupProps, "t
     },
   ];
   const teamMembersOptions = teamMembers.map(mapUserToValue);
+  const childrenEventTypeOptions = teamMembers.map((member) => {
+    return mapMemberToChildrenOption(member, eventType.slug);
+  });
+  const isManagedEventType = eventType.schedulingType === SchedulingType.MANAGED;
   return (
     <div>
-      {team && (
+      {team && !isManagedEventType && (
         <div className="space-y-5">
           <div className="flex flex-col">
             <Label>{t("scheduling_type")}</Label>
@@ -239,6 +319,9 @@ export const EventTeamTab = ({ team, teamMembers }: Pick<EventTypeSetupProps, "t
           <Hosts teamMembers={teamMembersOptions} />
         </div>
       )}
+      {team && isManagedEventType && (
+        <ChildrenEventTypes childrenEventTypeOptions={childrenEventTypeOptions} />
+      )}
     </div>
   );
 };

apps/web/components/eventtype/EventTeamWebhooksTab.tsx

@@ -1,16 +1,17 @@
+import type { Webhook } from "@prisma/client";
+import { Webhook as TbWebhook } from "lucide-react";
 import type { EventTypeSetupProps } from "pages/event-types/[type]";
 import { useState } from "react";
-import { TbWebhook } from "react-icons/tb";
 
+import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
 import { WebhookForm } from "@calcom/features/webhooks/components";
 import type { WebhookFormSubmitData } from "@calcom/features/webhooks/components/WebhookForm";
 import WebhookListItem from "@calcom/features/webhooks/components/WebhookListItem";
 import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import type { Webhook } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Dialog, DialogContent, EmptyScreen, showToast } from "@calcom/ui";
-import { FiPlus } from "@calcom/ui/components/icon";
+import { Alert, Button, Dialog, DialogContent, EmptyScreen, showToast } from "@calcom/ui";
+import { Plus, Lock } from "@calcom/ui/components/icon";
 
 export const EventTeamWebhooksTab = ({
   eventType,
@@ -85,12 +86,20 @@ export const EventTeamWebhooksTab = ({
       <Button
         color="secondary"
         data-testid="new_webhook"
-        StartIcon={FiPlus}
+        StartIcon={Plus}
         onClick={() => setCreateModalOpen(true)}>
         {t("new_webhook")}
       </Button>
     );
   };
+
+  const { shouldLockDisableProps, isChildrenManagedEventType, isManagedEventType } = useLockedFieldsManager(
+    eventType,
+    t("locked_fields_admin_description"),
+    t("locked_fields_member_description")
+  );
+  const webhookLockedStatus = shouldLockDisableProps("webhooks");
+
   return (
     <div>
       {team && webhooks && !isLoading && (
@@ -98,15 +107,24 @@ export const EventTeamWebhooksTab = ({
           <div>
             <div>
               <>
+                {isManagedEventType && (
+                  <Alert
+                    severity="neutral"
+                    className="mb-2"
+                    title={t("locked_for_members")}
+                    message={t("locked_webhooks_description")}
+                  />
+                )}
                 {webhooks.length ? (
                   <>
-                    <div className="mb-8 rounded-md border">
+                    <div className="mb-2 rounded-md border">
                       {webhooks.map((webhook, index) => {
                         return (
                           <WebhookListItem
                             key={webhook.id}
                             webhook={webhook}
                             lastItem={webhooks.length === index + 1}
+                            canEditWebhook={!webhookLockedStatus.disabled}
                             onEditWebhook={() => {
                               setEditModalOpen(true);
                               setWebhookToEdit(webhook);
@@ -122,7 +140,15 @@ export const EventTeamWebhooksTab = ({
                     Icon={TbWebhook}
                     headline={t("create_your_first_webhook")}
                     description={t("create_your_first_team_webhook_description", { appName: APP_NAME })}
-                    buttonRaw={<NewWebhookButton />}
+                    buttonRaw={
+                      isChildrenManagedEventType && !isManagedEventType ? (
+                        <Button StartIcon={Lock} color="secondary" disabled>
+                          {t("locked_by_admin")}
+                        </Button>
+                      ) : (
+                        <NewWebhookButton />
+                      )
+                    }
                   />
                 )}
               </>
@@ -144,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)}

apps/web/components/eventtype/EventTypeSingleLayout.tsx

@@ -1,15 +1,18 @@
+import { Webhook as TbWebhook } from "lucide-react";
 import type { TFunction } from "next-i18next";
+import { Trans } from "next-i18next";
 import { useRouter } from "next/router";
 import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
 import { useMemo, useState, Suspense } from "react";
 import type { UseFormReturn } from "react-hook-form";
-import { TbWebhook } from "react-icons/tb";
 
+import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
 import Shell from "@calcom/features/shell/Shell";
 import { classNames } from "@calcom/lib";
 import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
+import { SchedulingType } from "@calcom/prisma/enums";
 import { trpc, TRPCClientError } from "@calcom/trpc/react";
 import {
   Button,
@@ -32,22 +35,23 @@ import {
   VerticalTabs,
 } from "@calcom/ui";
 import {
-  FiLink,
-  FiCalendar,
-  FiClock,
-  FiSliders,
-  FiRepeat,
-  FiGrid,
-  FiZap,
-  FiUsers,
-  FiExternalLink,
-  FiCode,
-  FiTrash,
-  FiMoreHorizontal,
-  FiLoader,
+  Link as LinkIcon,
+  Calendar,
+  Clock,
+  Sliders,
+  Repeat,
+  Grid,
+  Zap,
+  Users,
+  ExternalLink,
+  Code,
+  Trash,
+  MoreHorizontal,
+  Loader,
 } from "@calcom/ui/components/icon";
 
 import { EmbedButton, EmbedDialog } from "@components/Embed";
+import type { AvailabilityOption } from "@components/eventtype/EventAvailabilityTab";
 
 type Props = {
   children: React.ReactNode;
@@ -60,6 +64,7 @@ type Props = {
   enabledWorkflowsNumber: number;
   formMethods: UseFormReturn<FormValues>;
   isUpdateMutationLoading?: boolean;
+  availability?: AvailabilityOption;
 };
 
 function getNavigation(props: {
@@ -68,8 +73,10 @@ function getNavigation(props: {
   enabledAppsNumber: number;
   enabledWorkflowsNumber: number;
   installedAppsNumber: number;
+  availability: AvailabilityOption | undefined;
 }) {
-  const { eventType, t, enabledAppsNumber, installedAppsNumber, enabledWorkflowsNumber } = props;
+  const { eventType, t, enabledAppsNumber, installedAppsNumber, enabledWorkflowsNumber, availability } =
+    props;
   const duration =
     eventType.metadata?.multipleDuration?.map((duration) => ` ${duration}`) || eventType.length;
 
@@ -77,44 +84,38 @@ function getNavigation(props: {
     {
       name: "event_setup_tab_title",
       href: `/event-types/${eventType.id}?tabName=setup`,
-      icon: FiLink,
+      icon: LinkIcon,
       info: `${duration} ${t("minute_timeUnit")}`, // TODO: Get this from props
     },
-    {
-      name: "availability",
-      href: `/event-types/${eventType.id}?tabName=availability`,
-      icon: FiCalendar,
-      info: `default_schedule_name`, // TODO: Get this from props
-    },
     {
       name: "event_limit_tab_title",
       href: `/event-types/${eventType.id}?tabName=limits`,
-      icon: FiClock,
+      icon: Clock,
       info: `event_limit_tab_description`,
     },
     {
       name: "event_advanced_tab_title",
       href: `/event-types/${eventType.id}?tabName=advanced`,
-      icon: FiSliders,
+      icon: Sliders,
       info: `event_advanced_tab_description`,
     },
     {
       name: "recurring",
       href: `/event-types/${eventType.id}?tabName=recurring`,
-      icon: FiRepeat,
+      icon: Repeat,
       info: `recurring_event_tab_description`,
     },
     {
       name: "apps",
       href: `/event-types/${eventType.id}?tabName=apps`,
-      icon: FiGrid,
+      icon: Grid,
       //TODO: Handle proper translation with count handling
       info: `${installedAppsNumber} apps, ${enabledAppsNumber} ${t("active")}`,
     },
     {
       name: "workflows",
       href: `/event-types/${eventType.id}?tabName=workflows`,
-      icon: FiZap,
+      icon: Zap,
       info: `${enabledWorkflowsNumber} ${t("active")}`,
     },
   ];
@@ -131,13 +132,17 @@ function EventTypeSingleLayout({
   enabledWorkflowsNumber,
   isUpdateMutationLoading,
   formMethods,
+  availability,
 }: Props) {
   const utils = trpc.useContext();
   const { t } = useLocale();
   const router = useRouter();
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
 
-  const hasPermsToDelete = currentUserMembership?.role !== "MEMBER" || !currentUserMembership;
+  const hasPermsToDelete =
+    currentUserMembership?.role !== "MEMBER" ||
+    !currentUserMembership ||
+    eventType.schedulingType === SchedulingType.MANAGED;
 
   const deleteMutation = trpc.viewer.eventTypes.delete.useMutation({
     onSuccess: async () => {
@@ -157,6 +162,12 @@ function EventTypeSingleLayout({
     },
   });
 
+  const { isManagedEventType, isChildrenManagedEventType } = useLockedFieldsManager(
+    eventType,
+    t("locked_fields_admin_description"),
+    t("locked_fields_member_description")
+  );
+
   // Define tab navigation here
   const EventTypeTabs = useMemo(() => {
     const navigation = getNavigation({
@@ -165,15 +176,42 @@ function EventTypeSingleLayout({
       enabledAppsNumber,
       installedAppsNumber,
       enabledWorkflowsNumber,
+      availability,
+    });
+    navigation.splice(1, 0, {
+      name: "availability",
+      href: `/event-types/${eventType.id}?tabName=availability`,
+      icon: Calendar,
+      info:
+        isManagedEventType || isChildrenManagedEventType
+          ? eventType.schedule === null
+            ? "Member's default schedule"
+            : isChildrenManagedEventType
+            ? `${
+                eventType.scheduleName
+                  ? `${eventType.scheduleName} - ${t("managed")}`
+                  : `default_schedule_name`
+              }`
+            : eventType.scheduleName ?? `default_schedule_name`
+          : `default_schedule_name`,
     });
     // If there is a team put this navigation item within the tabs
     if (team) {
       navigation.splice(2, 0, {
         name: "assignment",
         href: `/event-types/${eventType.id}?tabName=team`,
-        icon: FiUsers,
-        info: eventType.schedulingType === "COLLECTIVE" ? "collective" : "round_robin",
+        icon: Users,
+        info: `${t(eventType.schedulingType?.toLowerCase() ?? "")}${
+          isManagedEventType
+            ? ` - ${t("count_members", { count: formMethods.watch("children").length || 0 })}`
+            : ""
+        }`,
       });
+    }
+    if (isManagedEventType || isChildrenManagedEventType) {
+      // Removing apps and workflows for manageg event types by admins v1
+      navigation.splice(-2, 1);
+    } else {
       navigation.push({
         name: "webhooks",
         href: `/event-types/${eventType.id}?tabName=webhooks`,
@@ -182,13 +220,14 @@ function EventTypeSingleLayout({
       });
     }
     return navigation;
-  }, [t, eventType, installedAppsNumber, enabledAppsNumber, enabledWorkflowsNumber, team]);
+  }, [t, eventType, installedAppsNumber, enabledAppsNumber, enabledWorkflowsNumber, team, availability]);
 
   const permalink = `${CAL_URL}/${team ? `team/${team.slug}` : eventType.users[0].username}/${
     eventType.slug
   }`;
 
   const embedLink = `${team ? `team/${team.slug}` : eventType.users[0].username}/${eventType.slug}`;
+  const isManagedEvent = eventType.schedulingType === SchedulingType.MANAGED ? "_managed" : "";
 
   return (
     <Shell
@@ -197,77 +236,87 @@ function EventTypeSingleLayout({
       heading={eventType.title}
       CTA={
         <div className="flex items-center justify-end">
-          <div className="sm:hover:bg-subtle hidden items-center rounded-md px-2 lg:flex">
-            <Skeleton
-              as={Label}
-              htmlFor="hiddenSwitch"
-              className="mt-2 hidden cursor-pointer self-center whitespace-nowrap pr-2 sm:inline">
-              {t("hide_from_profile")}
-            </Skeleton>
-            <Switch
-              id="hiddenSwitch"
-              checked={formMethods.watch("hidden")}
-              onCheckedChange={(e) => {
-                formMethods.setValue("hidden", e);
-              }}
-            />
-          </div>
-          <VerticalDivider className="hidden lg:block" />
+          {!eventType.metadata.managedEventConfig && (
+            <>
+              <div className="sm:hover:bg-muted hidden items-center rounded-md px-2 lg:flex">
+                <Skeleton
+                  as={Label}
+                  htmlFor="hiddenSwitch"
+                  className="mt-2 hidden cursor-pointer self-center whitespace-nowrap pr-2 sm:inline">
+                  {t("hide_from_profile")}
+                </Skeleton>
+                <Switch
+                  id="hiddenSwitch"
+                  checked={formMethods.watch("hidden")}
+                  onCheckedChange={(e) => {
+                    formMethods.setValue("hidden", e);
+                  }}
+                />
+              </div>
+              <VerticalDivider className="hidden lg:block" />
+            </>
+          )}
 
           {/* TODO: Figure out why combined isnt working - works in storybook */}
           <ButtonGroup combined containerProps={{ className: "border-default hidden lg:flex" }}>
-            {/* We have to warp this in tooltip as it has a href which disabels the tooltip on buttons */}
-            <Tooltip content={t("preview")}>
-              <Button
-                color="secondary"
-                data-testid="preview-button"
-                target="_blank"
-                variant="icon"
-                href={permalink}
-                rel="noreferrer"
-                StartIcon={FiExternalLink}
-              />
-            </Tooltip>
+            {!isManagedEventType && (
+              <>
+                {/* We have to warp this in tooltip as it has a href which disabels the tooltip on buttons */}
+                <Tooltip content={t("preview")}>
+                  <Button
+                    color="secondary"
+                    data-testid="preview-button"
+                    target="_blank"
+                    variant="icon"
+                    href={permalink}
+                    rel="noreferrer"
+                    StartIcon={ExternalLink}
+                  />
+                </Tooltip>
 
-            <Button
-              color="secondary"
-              variant="icon"
-              StartIcon={FiLink}
-              tooltip={t("copy_link")}
-              onClick={() => {
-                navigator.clipboard.writeText(permalink);
-                showToast("Link copied!", "success");
-              }}
-            />
-            <EmbedButton
-              embedUrl={encodeURIComponent(embedLink)}
-              StartIcon={FiCode}
-              color="secondary"
-              variant="icon"
-              tooltip={t("embed")}
-            />
-            <Button
-              color="destructive"
-              variant="icon"
-              StartIcon={FiTrash}
-              tooltip={t("delete")}
-              disabled={!hasPermsToDelete}
-              onClick={() => setDeleteDialogOpen(true)}
-            />
+                <Button
+                  color="secondary"
+                  variant="icon"
+                  StartIcon={LinkIcon}
+                  tooltip={t("copy_link")}
+                  onClick={() => {
+                    navigator.clipboard.writeText(permalink);
+                    showToast("Link copied!", "success");
+                  }}
+                />
+                <EmbedButton
+                  embedUrl={encodeURIComponent(embedLink)}
+                  StartIcon={Code}
+                  color="secondary"
+                  variant="icon"
+                  tooltip={t("embed")}
+                />
+              </>
+            )}
+            {!isChildrenManagedEventType && (
+              <Button
+                color="destructive"
+                variant="icon"
+                StartIcon={Trash}
+                tooltip={t("delete")}
+                disabled={!hasPermsToDelete}
+                onClick={() => setDeleteDialogOpen(true)}
+              />
+            )}
           </ButtonGroup>
 
           <VerticalDivider className="hidden lg:block" />
 
           <Dropdown>
             <DropdownMenuTrigger asChild>
-              <Button className="lg:hidden" StartIcon={FiMoreHorizontal} variant="icon" color="secondary" />
+              <Button className="lg:hidden" StartIcon={MoreHorizontal} variant="icon" color="secondary" />
             </DropdownMenuTrigger>
             <DropdownMenuContent style={{ minWidth: "200px" }}>
               <DropdownMenuItem className="focus:ring-muted">
                 <DropdownItem
                   target="_blank"
                   type="button"
-                  StartIcon={FiExternalLink}
+                  StartIcon={ExternalLink}
                   href={permalink}
                   rel="noreferrer">
                   {t("preview")}
@@ -276,7 +325,7 @@ function EventTypeSingleLayout({
               <DropdownMenuItem className="focus:ring-muted">
                 <DropdownItem
                   type="button"
-                  StartIcon={FiLink}
+                  StartIcon={LinkIcon}
                   onClick={() => {
                     navigator.clipboard.writeText(permalink);
                     showToast("Link copied!", "success");
@@ -288,7 +337,7 @@ function EventTypeSingleLayout({
                 <DropdownItem
                   type="button"
                   color="destructive"
-                  StartIcon={FiTrash}
+                  StartIcon={Trash}
                   disabled={!hasPermsToDelete}
                   onClick={() => setDeleteDialogOpen(true)}>
                   {t("delete")}
@@ -323,7 +372,7 @@ function EventTypeSingleLayout({
           </Button>
         </div>
       }>
-      <Suspense fallback={<FiLoader />}>
+      <Suspense fallback={<Loader />}>
         <div className="flex flex-col xl:flex-row xl:space-x-6">
           <div className="hidden xl:block">
             <VerticalTabs
@@ -331,6 +380,8 @@ function EventTypeSingleLayout({
               tabs={EventTypeTabs}
               sticky
               linkProps={{ shallow: true }}
+              itemClassname="items-start"
+              iconClassName="md:mt-px"
             />
           </div>
           <div className="p-2 md:mx-0 md:p-0 xl:hidden">
@@ -351,14 +402,25 @@ function EventTypeSingleLayout({
         <ConfirmationDialogContent
           isLoading={deleteMutation.isLoading}
           variety="danger"
-          title={t("delete_event_type")}
-          confirmBtnText={t("confirm_delete_event_type")}
-          loadingText={t("confirm_delete_event_type")}
+          title={t(`delete${isManagedEvent}_event_type`)}
+          confirmBtnText={t(`confirm_delete_event_type`)}
+          loadingText={t(`confirm_delete_event_type`)}
           onConfirm={(e) => {
             e.preventDefault();
             deleteMutation.mutate({ id: eventType.id });
           }}>
-          {t("delete_event_type_description")}
+          <p className="mt-5">
+            <Trans
+              i18nKey={`delete${isManagedEvent}_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>
       <EmbedDialog />

apps/web/components/eventtype/RecurringEventController.tsx

@@ -1,23 +1,26 @@
-import type { FormValues } from "pages/event-types/[type]";
+import type { EventTypeSetup, FormValues } from "pages/event-types/[type]";
 import { useState } from "react";
 import { useFormContext } from "react-hook-form";
 
+import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Frequency } from "@calcom/prisma/zod-utils";
 import type { RecurringEvent } from "@calcom/types/Calendar";
-import { Alert, Select, SettingsToggle } from "@calcom/ui";
+import { Alert, Select, SettingsToggle, TextField } from "@calcom/ui";
 
 type RecurringEventControllerProps = {
-  recurringEvent: RecurringEvent | null;
+  eventType: EventTypeSetup;
   paymentEnabled: boolean;
 };
 
 export default function RecurringEventController({
-  recurringEvent,
+  eventType,
   paymentEnabled,
 }: RecurringEventControllerProps) {
   const { t } = useLocale();
-  const [recurringEventState, setRecurringEventState] = useState<RecurringEvent | null>(recurringEvent);
+  const [recurringEventState, setRecurringEventState] = useState<RecurringEvent | null>(
+    eventType.recurringEvent
+  );
   const formMethods = useFormContext<FormValues>();
 
   /* Just yearly-0, monthly-1 and weekly-2 */
@@ -28,6 +31,14 @@ export default function RecurringEventController({
       value: value.toString(),
     }));
 
+  const { shouldLockDisableProps } = useLockedFieldsManager(
+    eventType,
+    t("locked_fields_admin_description"),
+    t("locked_fields_member_description")
+  );
+
+  const recurringLocked = shouldLockDisableProps("recurringEvent");
+
   return (
     <div className="block items-start sm:flex">
       <div className={!paymentEnabled ? "w-full" : ""}>
@@ -37,6 +48,7 @@ export default function RecurringEventController({
           <>
             <SettingsToggle
               title={t("recurring_event")}
+              {...recurringLocked}
               description={t("recurring_event_description")}
               checked={recurringEventState !== null}
               data-testid="recurring-event-check"
@@ -45,7 +57,7 @@ export default function RecurringEventController({
                   formMethods.setValue("recurringEvent", null);
                   setRecurringEventState(null);
                 } else {
-                  const newVal = recurringEvent || {
+                  const newVal = eventType.recurringEvent || {
                     interval: 1,
                     count: 12,
                     freq: Frequency.WEEKLY,
@@ -58,11 +70,12 @@ export default function RecurringEventController({
                 <div data-testid="recurring-event-collapsible" className="text-sm">
                   <div className="flex items-center">
                     <p className="text-emphasis ltr:mr-2 rtl:ml-2">{t("repeats_every")}</p>
-                    <input
+                    <TextField
+                      disabled={recurringLocked.disabled}
                       type="number"
                       min="1"
                       max="20"
-                      className="border-default bg-default text-default block h-[36px] w-16 rounded-md text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
+                      className="mb-0"
                       defaultValue={recurringEventState.interval}
                       onChange={(event) => {
                         const newVal = {
@@ -77,7 +90,8 @@ export default function RecurringEventController({
                       options={recurringEventFreqOptions}
                       value={recurringEventFreqOptions[recurringEventState.freq]}
                       isSearchable={false}
-                      className="w-18 block h-[36px] min-w-0 rounded-md text-sm"
+                      className="w-18 ml-2 block min-w-0 rounded-md text-sm"
+                      isDisabled={recurringLocked.disabled}
                       onChange={(event) => {
                         const newVal = {
                           ...recurringEventState,
@@ -90,12 +104,13 @@ export default function RecurringEventController({
                   </div>
                   <div className="mt-4 flex items-center">
                     <p className="text-emphasis ltr:mr-2 rtl:ml-2">{t("for_a_maximum_of")}</p>
-                    <input
+                    <TextField
+                      disabled={recurringLocked.disabled}
                       type="number"
                       min="1"
                       max="20"
-                      className="border-default bg-default text-default block h-[36px] w-16 rounded-md text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
                       defaultValue={recurringEventState.count}
+                      className="mb-0"
                       onChange={(event) => {
                         const newVal = {
                           ...recurringEventState,
@@ -105,7 +120,7 @@ export default function RecurringEventController({
                         setRecurringEventState(newVal);
                       }}
                     />
-                    <p className="text-emphasis ltr:mr-2 rtl:ml-2">
+                    <p className="text-emphasis ltr:ml-2 rtl:mr-2">
                       {t("events", {
                         count: recurringEventState.count,
                       })}

apps/web/components/eventtype/RequiresConfirmationController.tsx

@@ -1,25 +1,29 @@
 import * as RadioGroup from "@radix-ui/react-radio-group";
 import type { UnitTypeLongPlural } from "dayjs";
 import { Trans } from "next-i18next";
-import type { FormValues } from "pages/event-types/[type]";
+import type { EventTypeSetup, FormValues } from "pages/event-types/[type]";
 import type { Dispatch, SetStateAction } from "react";
 import { useEffect, useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import type z from "zod";
 
+import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
+import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
-import { Input, Label, SettingsToggle, RadioField } from "@calcom/ui";
+import { Input, SettingsToggle, RadioField, Select } from "@calcom/ui";
 
 type RequiresConfirmationControllerProps = {
   metadata: z.infer<typeof EventTypeMetaDataSchema>;
   requiresConfirmation: boolean;
   onRequiresConfirmation: Dispatch<SetStateAction<boolean>>;
   seatsEnabled: boolean;
+  eventType: EventTypeSetup;
 };
 
 export default function RequiresConfirmationController({
   metadata,
+  eventType,
   requiresConfirmation,
   onRequiresConfirmation,
   seatsEnabled,
@@ -37,6 +41,23 @@ export default function RequiresConfirmationController({
     }
   }, [requiresConfirmation]);
 
+  const { shouldLockDisableProps } = useLockedFieldsManager(
+    eventType,
+    t("locked_fields_admin_description"),
+    t("locked_fields_member_description")
+  );
+  const requiresConfirmationLockedProps = shouldLockDisableProps("requiresConfirmation");
+
+  const options = [
+    { label: t("minute_timeUnit"), value: "minutes" },
+    { label: t("hour_timeUnit"), value: "hours" },
+  ];
+
+  const defaultValue = options.find(
+    (opt) =>
+      opt.value === (metadata?.requiresConfirmationThreshold?.unit ?? defaultRequiresConfirmationSetup.unit)
+  );
+
   return (
     <div className="block items-start sm:flex">
       <div className="w-full">
@@ -46,10 +67,11 @@ export default function RequiresConfirmationController({
           render={() => (
             <SettingsToggle
               title={t("requires_confirmation")}
-              disabled={seatsEnabled}
+              disabled={seatsEnabled || requiresConfirmationLockedProps.disabled}
               tooltip={seatsEnabled ? t("seat_options_doesnt_support_confirmation") : undefined}
               description={t("requires_confirmation_description")}
               checked={requiresConfirmation}
+              LockedIcon={requiresConfirmationLockedProps.LockedIcon}
               onCheckedChange={(val) => {
                 formMethods.setValue("requiresConfirmation", val);
                 onRequiresConfirmation(val);
@@ -77,70 +99,82 @@ export default function RequiresConfirmationController({
                     );
                   }
                 }}>
-                <div className="flex flex-col flex-wrap justify-start gap-y-2 space-y-2">
-                  <RadioField label={t("always_requires_confirmation")} id="always" value="always" />
-                  <RadioField
-                    label={
-                      <>
-                        <Trans
-                          i18nKey="when_booked_with_less_than_notice"
-                          defaults="When booked with less than <time></time> notice"
-                          components={{
-                            time: (
-                              <div className="mx-2 flex">
-                                <Input
-                                  type="number"
-                                  min={1}
-                                  onChange={(evt) => {
-                                    const val = Number(evt.target?.value);
-                                    setRequiresConfirmationSetup({
-                                      unit:
-                                        requiresConfirmationSetup?.unit ??
-                                        defaultRequiresConfirmationSetup.unit,
-                                      time: val,
-                                    });
-                                    formMethods.setValue("metadata.requiresConfirmationThreshold.time", val);
-                                  }}
-                                  className="border-default !m-0 block w-16 rounded-md text-sm [appearance:textfield]"
-                                  defaultValue={metadata?.requiresConfirmationThreshold?.time || 30}
-                                />
-                                <select
-                                  onChange={(evt) => {
-                                    const val = evt.target.value as UnitTypeLongPlural;
-                                    setRequiresConfirmationSetup({
-                                      time:
-                                        requiresConfirmationSetup?.time ??
-                                        defaultRequiresConfirmationSetup.time,
-                                      unit: val,
-                                    });
-                                    formMethods.setValue("metadata.requiresConfirmationThreshold.unit", val);
-                                  }}
-                                  className="border-default text-default bg-default ml-2 block h-9 rounded-md py-2 pl-3 pr-10 text-sm focus:outline-none"
-                                  defaultValue={
-                                    metadata?.requiresConfirmationThreshold?.unit ||
-                                    defaultRequiresConfirmationSetup.unit
-                                  }>
-                                  <option value="minutes">{t("minute_timeUnit")}</option>
-                                  <option value="hours">{t("hour_timeUnit")}</option>
-                                </select>
-                              </div>
-                            ),
-                          }}
-                        />
-                      </>
-                    }
-                    id="notice"
-                    value="notice"
-                  />
-                  <div className="flex items-center">
-                    <RadioGroup.Item
+                <div className="flex flex-col flex-wrap justify-start gap-y-2">
+                  {(requiresConfirmationSetup === undefined || !requiresConfirmationLockedProps.disabled) && (
+                    <RadioField
+                      label={t("always_requires_confirmation")}
+                      disabled={requiresConfirmationLockedProps.disabled}
+                      id="always"
+                      value="always"
+                    />
+                  )}
+                  {(requiresConfirmationSetup !== undefined || !requiresConfirmationLockedProps.disabled) && (
+                    <RadioField
+                      disabled={requiresConfirmationLockedProps.disabled}
+                      className="items-center"
+                      label={
+                        <>
+                          <Trans
+                            i18nKey="when_booked_with_less_than_notice"
+                            defaults="When booked with less than <time></time> notice"
+                            components={{
+                              time: (
+                                <div className="mx-2 inline-flex">
+                                  <Input
+                                    type="number"
+                                    min={1}
+                                    disabled={requiresConfirmationLockedProps.disabled}
+                                    onChange={(evt) => {
+                                      const val = Number(evt.target?.value);
+                                      setRequiresConfirmationSetup({
+                                        unit:
+                                          requiresConfirmationSetup?.unit ??
+                                          defaultRequiresConfirmationSetup.unit,
+                                        time: val,
+                                      });
+                                      formMethods.setValue(
+                                        "metadata.requiresConfirmationThreshold.time",
+                                        val
+                                      );
+                                    }}
+                                    className="border-default !m-0 block w-16 rounded-md text-sm [appearance:textfield]"
+                                    defaultValue={metadata?.requiresConfirmationThreshold?.time || 30}
+                                  />
+                                  <label
+                                    className={classNames(
+                                      requiresConfirmationLockedProps.disabled && "cursor-not-allowed"
+                                    )}>
+                                    <Select
+                                      inputId="notice"
+                                      options={options}
+                                      isSearchable={false}
+                                      isDisabled={requiresConfirmationLockedProps.disabled}
+                                      className="ml-2"
+                                      onChange={(opt) => {
+                                        setRequiresConfirmationSetup({
+                                          time:
+                                            requiresConfirmationSetup?.time ??
+                                            defaultRequiresConfirmationSetup.time,
+                                          unit: opt?.value as UnitTypeLongPlural,
+                                        });
+                                        formMethods.setValue(
+                                          "metadata.requiresConfirmationThreshold.unit",
+                                          opt?.value as UnitTypeLongPlural
+                                        );
+                                      }}
+                                      defaultValue={defaultValue}
+                                    />
+                                  </label>
+                                </div>
+                              ),
+                            }}
+                          />
+                        </>
+                      }
                       id="notice"
                       value="notice"
-                      className="min-w-4 bg-default flex h-4 w-4 cursor-pointer items-center rounded-full border border-black focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
-                      <RadioGroup.Indicator className="relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-black" />
-                    </RadioGroup.Item>
-                    <Label htmlFor="notice" className="!m-0 flex items-center" />
-                  </div>
+                    />
+                  )}
                 </div>
               </RadioGroup.Root>
             </SettingsToggle>

apps/web/components/eventtype/SkeletonLoader.tsx

@@ -1,5 +1,5 @@
 import { SkeletonAvatar, SkeletonContainer, SkeletonText } from "@calcom/ui";
-import { FiClock, FiUser } from "@calcom/ui/components/icon";
+import { Clock, User } from "@calcom/ui/components/icon";
 
 function SkeletonLoader() {
   return (
@@ -32,11 +32,11 @@ function SkeletonItem() {
         <div className="">
           <ul className="mt-2 flex space-x-4 rtl:space-x-reverse ">
             <li className="flex items-center whitespace-nowrap">
-              <FiClock className="text-subtle mt-0.5 mr-1.5 inline h-4 w-4" />
+              <Clock className="text-subtle mt-0.5 mr-1.5 inline h-4 w-4" />
               <SkeletonText className="h-4 w-12" />
             </li>
             <li className="flex items-center whitespace-nowrap">
-              <FiUser className="text-subtle mt-0.5 mr-1.5 inline h-4 w-4" />
+              <User className="text-subtle mt-0.5 mr-1.5 inline h-4 w-4" />
               <SkeletonText className="h-4 w-12" />
             </li>
           </ul>

apps/web/components/getting-started/components/AppConnectionItem.tsx

@@ -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 };

apps/web/components/getting-started/components/ConnectedCalendarItem.tsx

@@ -1,4 +1,4 @@
-import { CalendarSwitch } from "./CalendarSwitch";
+import { CalendarSwitch } from "@calcom/features/calendars/CalendarSwitch";
 
 interface IConnectedCalendarItem {
   name: string;

apps/web/components/getting-started/components/StepConnectionLoader.tsx

@@ -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>
+  );
+}

apps/web/components/getting-started/steps-views/ConnectCalendars.tsx

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

apps/web/components/getting-started/steps-views/ConnectedVideoStep.tsx

@@ -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 };

apps/web/components/getting-started/steps-views/SetupAvailability.tsx

@@ -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;
@@ -50,7 +50,7 @@ const SetupAvailability = (props: ISetupAvailabilityProps) => {
   const updateSchedule = trpc.viewer.availability.schedule.update.useMutation(mutationOptions);
   return (
     <Form
-      className="bg-default dark:text-inverted text-emphasis w-full dark:bg-opacity-5"
+      className="bg-default dark:text-inverted text-emphasis w-full [--cal-brand-accent:#fafafa] dark:bg-opacity-5"
       form={availabilityForm}
       handleSubmit={async (values) => {
         try {
@@ -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>

apps/web/components/getting-started/steps-views/UserProfile.tsx

@@ -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]]";
 
@@ -35,6 +35,7 @@ const UserProfile = (props: IUserProfileProps) => {
   const router = useRouter();
   const createEventType = trpc.viewer.eventTypes.create.useMutation();
   const telemetry = useTelemetry();
+  const [firstRender, setFirstRender] = useState(true);
 
   const mutation = trpc.viewer.updateProfile.useMutation({
     onSuccess: async (_data, context) => {
@@ -147,6 +148,8 @@ const UserProfile = (props: IUserProfileProps) => {
           getText={() => md.render(getValues("bio") || user?.bio || "")}
           setText={(value: string) => setValue("bio", turndown(value))}
           excludedToolbarItems={["blockType"]}
+          firstRender={firstRender}
+          setFirstRender={setFirstRender}
         />
         <p className="dark:text-inverted text-default mt-2 font-sans text-sm font-normal">
           {t("few_sentences_about_yourself")}
@@ -156,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>
   );

apps/web/components/getting-started/steps-views/UserSettings.tsx

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

apps/web/components/security/TwoFactorModalHeader.tsx

@@ -1,10 +1,10 @@
-import { FiShield } from "@calcom/ui/components/icon";
+import { Shield } from "@calcom/ui/components/icon";
 
 const TwoFactorModalHeader = ({ title, description }: { title: string; description: string }) => {
   return (
     <div className="mb-4 sm:flex sm:items-start">
       <div className="bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
-        <FiShield className="text-inverted h-6 w-6" />
+        <Shield className="text-inverted h-6 w-6" />
       </div>
       <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
         <h3 className="font-cal text-emphasis text-lg font-medium leading-6" id="modal-title">

apps/web/components/settings/CalendarSwitch.tsx

@@ -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 { FiArrowLeft } 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">
-            <FiArrowLeft className="text-default mr-1" /> {t("adding_events_to")}
-          </div>
-        </Badge>
-      )}
-    </div>
-  );
-}

apps/web/components/setup/AdminUser.tsx

@@ -9,7 +9,7 @@ import { isPasswordValid } from "@calcom/features/auth/lib/isPasswordValid";
 import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { EmailField, EmptyScreen, Label, PasswordField, TextField } from "@calcom/ui";
-import { FiUserCheck } from "@calcom/ui/components/icon";
+import { UserCheck } from "@calcom/ui/components/icon";
 
 export const AdminUserContainer = (props: React.ComponentProps<typeof AdminUser> & { userCount: number }) => {
   const { t } = useLocale();
@@ -24,7 +24,7 @@ export const AdminUserContainer = (props: React.ComponentProps<typeof AdminUser>
           props.onSuccess();
         }}>
         <EmptyScreen
-          Icon={FiUserCheck}
+          Icon={UserCheck}
           headline={t("admin_user_created")}
           description={t("admin_user_created_description")}
         />

apps/web/components/setup/EnterpriseLicense.tsx

@@ -10,7 +10,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterInputs, RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import { Button, TextField } from "@calcom/ui";
-import { FiCheck, FiExternalLink, FiLoader } from "@calcom/ui/components/icon";
+import { Check, ExternalLink, Loader } from "@calcom/ui/components/icon";
 
 type EnterpriseLicenseFormValues = {
   licenseKey: string;
@@ -91,7 +91,7 @@ const EnterpriseLicense = (
         <div>
           <Button
             className="w-full justify-center text-lg"
-            EndIcon={FiExternalLink}
+            EndIcon={ExternalLink}
             href="https://console.cal.com"
             target="_blank">
             {t("purchase_license")}
@@ -121,9 +121,9 @@ const EnterpriseLicense = (
                 )}
                 addOnSuffix={
                   checkLicenseLoading ? (
-                    <FiLoader className="h-5 w-5 animate-spin" />
+                    <Loader className="h-5 w-5 animate-spin" />
                   ) : errors.licenseKey === undefined && isDirty ? (
-                    <FiCheck className="h-5 w-5 text-green-700" />
+                    <Check className="h-5 w-5 text-green-700" />
                   ) : undefined
                 }
                 color={errors.licenseKey ? "warn" : ""}

apps/web/components/setup/StepDone.tsx

@@ -2,7 +2,7 @@ import { useRouter } from "next/router";
 import type { Dispatch, SetStateAction } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { FiCheck } from "@calcom/ui/components/icon";
+import { Check } from "@calcom/ui/components/icon";
 
 const StepDone = (props: {
   currentStep: number;
@@ -24,7 +24,7 @@ const StepDone = (props: {
       }}>
       <div className="min-h-36 my-6 flex flex-col items-center justify-center">
         <div className="dark:bg-default flex h-[72px] w-[72px] items-center justify-center rounded-full bg-gray-600">
-          <FiCheck className="text-inverted dark:bg-default dark:text-default inline-block h-10 w-10" />
+          <Check className="text-inverted dark:bg-default dark:text-default inline-block h-10 w-10" />
         </div>
         <div className="max-w-[420px] text-center">
           <h2 className="mt-6 mb-1 text-lg font-medium dark:text-gray-300">{t("all_done")}</h2>

apps/web/components/team/screens/Team.tsx

@@ -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 || "") }}
                 />
               </>

apps/web/components/ui/AdminRequired.tsx

@@ -1,17 +0,0 @@
-import { useSession } from "next-auth/react";
-import type { FC } from "react";
-import { Fragment } from "react";
-
-type AdminRequiredProps = {
-  as?: keyof JSX.IntrinsicElements;
-  children?: React.ReactNode;
-};
-
-/** @deprecated use PermssionContainer instead. Will delete once V2 goes live */
-export const AdminRequired: FC<AdminRequiredProps> = ({ children, as, ...rest }) => {
-  const session = useSession();
-
-  if (session.data?.user.role !== "ADMIN") return null;
-  const Component = as ?? Fragment;
-  return <Component {...rest}>{children}</Component>;
-};

apps/web/components/ui/AuthContainer.tsx

@@ -1,7 +1,6 @@
 import classNames from "classnames";
 
-import { APP_NAME, LOGO } from "@calcom/lib/constants";
-import { HeadSeo } from "@calcom/ui";
+import { HeadSeo, Logo } from "@calcom/ui";
 
 import Loader from "@components/Loader";
 
@@ -18,10 +17,7 @@ export default function AuthContainer(props: React.PropsWithChildren<Props>) {
   return (
     <div className="flex min-h-screen flex-col justify-center bg-[#f3f4f6] py-12 sm:px-6 lg:px-8">
       <HeadSeo title={props.title} description={props.description} />
-      {props.showLogo && (
-        // eslint-disable-next-line @next/next/no-img-element
-        <img className="mb-auto h-4" src={LOGO} alt={`${APP_NAME} Logo`} />
-      )}
+      {props.showLogo && <Logo small inline={false} className="mx-auto mb-auto" />}
 
       <div className={classNames(props.showLogo ? "text-center" : "", "sm:mx-auto sm:w-full sm:max-w-md")}>
         {props.heading && <h2 className="font-cal text-emphasis text-center text-3xl">{props.heading}</h2>}

apps/web/components/ui/EditableHeading.tsx

@@ -2,7 +2,7 @@ import classNames from "classnames";
 import { useState } from "react";
 import type { ControllerRenderProps } from "react-hook-form";
 
-import { FiEdit2 } from "@calcom/ui/components/icon";
+import { Edit2 } from "@calcom/ui/components/icon";
 
 const EditableHeading = function EditableHeading({
   value,
@@ -16,12 +16,14 @@ const EditableHeading = function EditableHeading({
   const [isEditing, setIsEditing] = useState(false);
   const enableEditing = () => setIsEditing(true);
   return (
-    <div className="group relative cursor-pointer" onClick={enableEditing}>
-      <div className="flex items-center">
+    <div
+      className="group pointer-events-none relative truncate sm:pointer-events-auto"
+      onClick={enableEditing}>
+      <div className="flex cursor-pointer items-center">
         <label className="min-w-8 relative inline-block">
           <span className="whitespace-pre text-xl tracking-normal text-transparent">{value}&nbsp;</span>
           {!isEditing && isReady && (
-            <FiEdit2 className=" text-subtle group-hover:text-subtle ml-1 -mt-px inline  h-3 w-3" />
+            <Edit2 className=" text-subtle group-hover:text-subtle ml-1 -mt-px inline  h-3 w-3" />
           )}
           <input
             {...passThroughProps}
@@ -29,7 +31,7 @@ const EditableHeading = function EditableHeading({
             value={value}
             required
             className={classNames(
-              "text-emphasis hover:text-default focus:text-emphasis absolute top-0 left-0 w-full cursor-pointer border-none bg-transparent p-0 align-top text-xl focus:outline-none focus:ring-0"
+              "text-emphasis hover:text-default focus:text-emphasis absolute top-0 left-0 w-full cursor-pointer truncate border-none bg-transparent p-0 align-top text-xl focus:outline-none focus:ring-0"
             )}
             onFocus={(e) => {
               setIsEditing(true);

apps/web/components/ui/InfoBadge.tsx

@@ -1,12 +1,12 @@
 import { Tooltip } from "@calcom/ui";
-import { FiInfo } from "@calcom/ui/components/icon";
+import { Info } from "@calcom/ui/components/icon";
 
 export default function InfoBadge({ content }: { content: string }) {
   return (
     <>
       <Tooltip side="top" content={content}>
         <span title={content}>
-          <FiInfo className="text-subtle relative top-px left-1 right-1 mt-px h-4 w-4" />
+          <Info className="text-subtle relative top-px left-1 right-1 mt-px h-4 w-4" />
         </span>
       </Tooltip>
     </>

apps/web/components/ui/PoweredByCal.tsx

@@ -1,29 +0,0 @@
-import Link from "next/link";
-
-import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
-import { POWERED_BY_URL } from "@calcom/lib/constants";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-
-const PoweredByCal = () => {
-  const { t } = useLocale();
-  const isEmbed = useIsEmbed();
-  return (
-    <div className={"p-2 text-center text-xs sm:text-right" + (isEmbed ? " max-w-3xl" : "")}>
-      <Link href={POWERED_BY_URL} target="_blank" className="text-subtle opacity-50 hover:opacity-100">
-        {t("powered_by")}{" "}
-        <img
-          className="relative -mt-px inline h-[10px] w-auto dark:hidden"
-          src="/cal-logo-word.svg"
-          alt="Cal.com Logo"
-        />
-        <img
-          className="relativ -mt-px hidden h-[10px] w-auto dark:inline"
-          src="/cal-logo-word-dark.svg"
-          alt="Cal.com Logo"
-        />
-      </Link>
-    </div>
-  );
-};
-
-export default PoweredByCal;

apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx

@@ -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,7 +14,8 @@ 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 { FiCheck, FiEdit2, FiExternalLink } from "@calcom/ui/components/icon";
+import { Star as StarSolid } from "@calcom/ui/components/icon";
+import { Check, Edit2, ExternalLink } from "@calcom/ui/components/icon";
 
 export enum UsernameChangeStatusEnum {
   UPGRADE = "UPGRADE",
@@ -195,7 +195,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
         <span
           className={classNames(
             isInputUsernamePremium ? "border border-orange-400 " : "",
-            "border-default bg-muted text-subtle hidden h-9 items-center rounded-l-md border border-r-0 border-r-gray-300 px-3 text-sm md:inline-flex"
+            "border-default bg-muted text-subtle hidden h-9 items-center rounded-l-md border border-r-0 px-3 text-sm md:inline-flex"
           )}>
           {process.env.NEXT_PUBLIC_WEBSITE_URL.replace("https://", "").replace("http://", "")}/
         </span>
@@ -215,7 +215,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
                 : "border focus:border",
               markAsError
                 ? "focus:shadow-0 focus:ring-shadow-0 border-red-500  focus:border-red-500 focus:outline-none"
-                : "border-l-gray-300",
+                : "border-l-default",
               disabled ? "bg-subtle text-muted focus:border-0" : ""
             )}
             value={inputUsernameValue}
@@ -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] w-6" /> : <></>}
-              {!isInputUsernamePremium && usernameIsAvailable ? <FiCheck className="mt-2 w-6" /> : <></>}
+              {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>
@@ -251,7 +255,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
 
       <Dialog open={openDialogSaveUsername}>
         <DialogContent
-          Icon={FiEdit2}
+          Icon={Edit2}
           title={t("confirm_username_change_dialog_title")}
           description={
             <>
@@ -288,7 +292,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
                 data-testid="go-to-billing"
                 href={paymentLink}>
                 <>
-                  {t("go_to_stripe_billing")} <FiExternalLink className="ml-1 h-4 w-4" />
+                  {t("go_to_stripe_billing")} <ExternalLink className="ml-1 h-4 w-4" />
                 </>
               </Button>
             )}

apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx

@@ -9,7 +9,7 @@ import type { TRPCClientErrorLike } from "@calcom/trpc/client";
 import { trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
 import { Button, Dialog, DialogClose, DialogContent, TextField } from "@calcom/ui";
-import { FiCheck, FiEdit2 } from "@calcom/ui/components/icon";
+import { Check, Edit2 } from "@calcom/ui/components/icon";
 
 interface ICustomUsernameProps {
   currentUsername: string | undefined;
@@ -79,7 +79,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
 
   const ActionButtons = () => {
     return usernameIsAvailable && currentUsername !== inputUsernameValue ? (
-      <div className="rlt:space-x-reverse ms-2 me-2 mt-px flex flex-row space-x-2 rtl:space-x-reverse">
+      <div className="ms-2 me-2 mt-px flex flex-row space-x-2">
         <Button
           type="button"
           onClick={() => setOpenDialogSaveUsername(true)}
@@ -123,7 +123,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
             autoCapitalize="none"
             autoCorrect="none"
             className={classNames(
-              "mb-0 mt-0 rounded-md ltr:rounded-l-none rtl:rounded-r-none",
+              "mb-0 mt-0 rounded-md rounded-l-none",
               markAsError
                 ? "focus:shadow-0 focus:ring-shadow-0 border-red-500 focus:border-red-500 focus:outline-none focus:ring-0"
                 : ""
@@ -136,8 +136,8 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
           />
           {currentUsername !== inputUsernameValue && (
             <div className="absolute right-[2px] top-6 flex flex-row">
-              <span className={classNames("mx-2 py-2")}>
-                {usernameIsAvailable ? <FiCheck className="w-6" /> : <></>}
+              <span className={classNames("mx-2 py-2.5")}>
+                {usernameIsAvailable ? <Check className="h-4 w-4" /> : <></>}
               </span>
             </div>
           )}
@@ -154,7 +154,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
         </div>
       )}
       <Dialog open={openDialogSaveUsername}>
-        <DialogContent type="confirmation" Icon={FiEdit2} title={t("confirm_username_change_dialog_title")}>
+        <DialogContent type="confirmation" Icon={Edit2} title={t("confirm_username_change_dialog_title")}>
           <div className="flex flex-row">
             <div className="mb-4 w-full pt-1">
               <div className="bg-subtle flex w-full flex-wrap rounded-sm py-3 text-sm">

apps/web/components/ui/form/CheckboxField.tsx

@@ -49,7 +49,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
                     {...rest}
                     ref={ref}
                     type="checkbox"
-                    className="text-primary-600 focus:ring-primary-500 border-default h-4 w-4 rounded"
+                    className="text-primary-600 focus:ring-primary-500 border-default bg-default h-4 w-4 rounded"
                   />
                 </div>
                 <span className="ms-3 text-sm">{description}</span>

apps/web/components/ui/form/CheckedSelect.tsx

@@ -3,7 +3,7 @@ import type { Props } from "react-select";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Avatar } from "@calcom/ui";
-import { FiX } from "@calcom/ui/components/icon";
+import { X } from "@calcom/ui/components/icon";
 
 import Select from "@components/ui/form/Select";
 
@@ -49,7 +49,7 @@ export const CheckedSelect = ({
             alt={option.label}
           />
           {option.label}
-          <FiX
+          <X
             onClick={() => props.onChange(value.filter((item) => item.value !== option.value))}
             className="text-subtle float-right mt-0.5 h-5 w-5 cursor-pointer"
           />

apps/web/components/ui/form/DatePicker.tsx

@@ -3,7 +3,7 @@ import "react-calendar/dist/Calendar.css";
 import "react-date-picker/dist/DatePicker.css";
 import PrimitiveDatePicker from "react-date-picker/dist/entry.nostyle";
 
-import { FiCalendar } from "@calcom/ui/components/icon";
+import { Calendar } from "@calcom/ui/components/icon";
 
 import classNames from "@lib/classNames";
 
@@ -23,7 +23,7 @@ export const DatePicker = ({ minDate, disabled, date, onDatesChange, className }
         className
       )}
       clearIcon={null}
-      calendarIcon={<FiCalendar className="text-subtle h-5 w-5" />}
+      calendarIcon={<Calendar className="text-subtle h-5 w-5" />}
       value={date}
       minDate={minDate}
       disabled={disabled}

apps/web/components/ui/form/LocationSelect.tsx

@@ -3,6 +3,7 @@ import { components } from "react-select";
 
 import type { EventLocationType } from "@calcom/app-store/locations";
 import { classNames } from "@calcom/lib";
+import cx from "@calcom/lib/classNames";
 import { Select } from "@calcom/ui";
 
 export type LocationOption = {
@@ -19,10 +20,14 @@ export type GroupOptionType = GroupBase<LocationOption>;
 const OptionWithIcon = ({ icon, label }: { icon?: string; label: string }) => {
   return (
     <div className="flex items-center gap-3">
-      {/* TODO: figure out a way to invert icons when in dark mode. We can't just
-        dark:invert due to google meet cal etc all breaking when we do this
-      */}
-      {icon && <img src={icon} alt="cover" className="h-3.5 w-3.5 dark:hidden" />}
+      {icon && (
+        <img
+          src={icon}
+          alt="cover"
+          // invert all the icons except app icons
+          className={cx("h-3.5 w-3.5", icon && !icon.startsWith("/app-store") && "dark:invert")}
+        />
+      )}
       <span className={classNames("text-sm font-medium")}>{label}</span>
     </div>
   );

apps/web/lib/app-providers.tsx

@@ -19,16 +19,23 @@ import { MetaProvider } from "@calcom/ui";
 import usePublicPage from "@lib/hooks/usePublicPage";
 import type { WithNonceProps } from "@lib/withNonce";
 
+import { useViewerI18n } from "@components/I18nLanguageHandler";
+
 const I18nextAdapter = appWithTranslation<NextJsAppProps<SSRConfig> & { children: React.ReactNode }>(
   ({ children }) => <>{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 | ((arg: { router: NextRouter }) => boolean);
+    isThemeSupported?: boolean;
+    isBookingPage?: boolean | ((arg: { router: NextRouter }) => boolean);
     getLayout?: (page: React.ReactElement, router: NextRouter) => ReactNode;
+    PageWrapper?: (props: AppProps) => JSX.Element;
   };
 
   /** Will be defined only is there was an error */
@@ -44,9 +51,7 @@ const CustomI18nextProvider = (props: AppPropsWithChildren) => {
    * i18n should never be clubbed with other queries, so that it's caching can be managed independently.
    * We intend to not cache i18n query
    **/
-  const { i18n, locale } = trpc.viewer.public.i18n.useQuery(undefined, {
-    trpc: { context: { skipBatch: true } },
-  }).data ?? {
+  const { i18n, locale } = useViewerI18n().data ?? {
     locale: "en",
   };
 
@@ -61,51 +66,140 @@ const CustomI18nextProvider = (props: AppPropsWithChildren) => {
   return <I18nextAdapter {...passedProps} />;
 };
 
-const CalcomThemeProvider = (
-  props: PropsWithChildren<
-    WithNonceProps & { isThemeSupported?: boolean | ((arg: { router: NextRouter }) => 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
-  const router = useRouter();
-  const isThemeSupported = (() => {
-    if (typeof props.isThemeSupported === "function") {
-      return props.isThemeSupported({ router: router });
-    }
-    if (typeof props.isThemeSupported === "undefined") {
-      return true;
-    }
-    return props.isThemeSupported;
-  })();
+const enum ThemeSupport {
+  // e.g. Login Page
+  None = "none",
+  // Entire App except Booking Pages
+  App = "systemOnly",
+  // Booking Pages(including Routing Forms)
+  Booking = "userConfigured",
+}
+
+type CalcomThemeProps = PropsWithChildren<
+  Pick<AppProps["pageProps"], "nonce" | "themeBasis"> &
+    Pick<AppProps["Component"], "isBookingPage" | "isThemeSupported">
+>;
+const CalcomThemeProvider = (props: CalcomThemeProps) => {
+  const router = useRouter();
 
-  const forcedTheme = !isThemeSupported ? "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;
-  // If embedNamespace is not defined, we use the default storageKey -> The default storage key changs based on if we force light mode or not
-  // This is done to ensure that the default theme is light when we force light mode and as soon as you navigate to a page that is dark we dont need a hard refresh to change
-  const storageKey =
-    typeof embedNamespace === "string"
-      ? `embed-theme-${embedNamespace}`
-      : !isThemeSupported
-      ? "cal-light"
-      : "theme";
+  const isEmbedMode = typeof embedNamespace === "string";
 
   return (
-    <ThemeProvider
-      nonce={props.nonce}
-      enableColorScheme={false}
-      enableSystem={isThemeSupported}
-      forcedTheme={forcedTheme}
-      storageKey={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 && (
+        <style jsx global>
+          {`
+            .dark {
+              color-scheme: dark;
+            }
+          `}
+        </style>
+      )}
       {props.children}
     </ThemeProvider>
   );
 };
 
+/**
+ * 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>;
@@ -123,8 +217,10 @@ 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}>
+              isThemeSupported={props.Component.isThemeSupported}
+              isBookingPage={props.Component.isBookingPage}>
               <FeatureFlagsProvider>
                 <MetaProvider>{props.children}</MetaProvider>
               </FeatureFlagsProvider>

apps/web/lib/csp.ts

@@ -13,9 +13,6 @@ function getCspPolicy(nonce: string) {
   // We can remove 'unsafe-inline' from style-src when we add nonces to all style tags
   // Maybe see how @next-safe/middleware does it if it's supported.
   const useNonStrictPolicy = CSP_POLICY === "non-strict";
-  const SENTRY_ENDPOINT = process.env.NEXT_PUBLIC_SENTRY_DSN
-    ? new URL(process.env.NEXT_PUBLIC_SENTRY_DSN, "http://base_url").origin
-    : "";
 
   // We add WEBAPP_URL to img-src because of booking pages, which end up loading images from app.cal.com on cal.com
   // FIXME: Write a layer to extract out EventType Analytics tracking endpoints and add them to img-src or connect-src as needed. e.g. fathom, Google Analytics and others
@@ -36,7 +33,7 @@ function getCspPolicy(nonce: string) {
     } app.cal.com;
 	  font-src 'self';
 	  img-src 'self' ${WEBAPP_URL} https://www.gravatar.com https://img.youtube.com https://eu.ui-avatars.com/api/ data:;
-    connect-src 'self' ${SENTRY_ENDPOINT}
+    connect-src 'self'
 	`;
 }
 

apps/web/lib/mutations/bookings/create-booking.ts

@@ -1,13 +0,0 @@
-import type { BookingCreateBody } from "@calcom/prisma/zod-utils";
-
-import * as fetch from "@lib/core/http/fetch-wrapper";
-import type { BookingResponse } from "@lib/types/booking";
-
-type BookingCreateBodyForMutation = Omit<BookingCreateBody, "location">;
-const createBooking = async (data: BookingCreateBodyForMutation) => {
-  const response = await fetch.post<BookingCreateBodyForMutation, BookingResponse>("/api/book/event", data);
-
-  return response;
-};
-
-export default createBooking;

apps/web/middleware.ts

@@ -7,9 +7,16 @@ import { CONSOLE_URL, WEBAPP_URL, WEBSITE_URL } from "@calcom/lib/constants";
 import { isIpInBanlist } from "@calcom/lib/getIP";
 import { extendEventData, nextCollectBasicSettings } from "@calcom/lib/telemetry";
 
+let cold = true;
+
 const middleware: NextMiddleware = async (req) => {
   const url = req.nextUrl;
+  const requestHeaders = new Headers(req.headers);
 
+  // This console.log is required to create a report in axios for hot and cold requests
+  console.log(cold ? "Cold Start" : "Hot Start");
+  requestHeaders.set("x-cal-cold-start", cold ? "true" : "false");
+  cold = false;
   if (!url.pathname.startsWith("/api")) {
     //
     // NOTE: When tRPC hits an error a 500 is returned, when this is received
@@ -61,27 +68,19 @@ const middleware: NextMiddleware = async (req) => {
   }
 
   if (url.pathname.startsWith("/api/trpc/")) {
-    const requestHeaders = new Headers(req.headers);
     requestHeaders.set("x-cal-timezone", req.headers.get("x-vercel-ip-timezone") ?? "");
-    return NextResponse.next({
-      request: {
-        headers: requestHeaders,
-      },
-    });
   }
 
   if (url.pathname.startsWith("/auth/login")) {
-    const moreHeaders = new Headers(req.headers);
     // Use this header to actually enforce CSP, otherwise it is running in Report Only mode on all pages.
-    moreHeaders.set("x-csp-enforce", "true");
-    return NextResponse.next({
-      request: {
-        headers: moreHeaders,
-      },
-    });
+    requestHeaders.set("x-csp-enforce", "true");
   }
 
-  return NextResponse.next();
+  return NextResponse.next({
+    request: {
+      headers: requestHeaders,
+    },
+  });
 };
 
 export const config = {

apps/web/next.config.js

@@ -1,7 +1,7 @@
 require("dotenv").config({ path: "../../.env" });
 const CopyWebpackPlugin = require("copy-webpack-plugin");
-const { withSentryConfig } = require("@sentry/nextjs");
 const os = require("os");
+const glob = require("glob");
 
 const { withAxiom } = require("next-axiom");
 const { i18n } = require("./next-i18next.config");
@@ -67,6 +67,18 @@ if (process.env.ANALYZE === "true") {
 }
 
 plugins.push(withAxiom);
+
+/** Needed to rewrite public booking page, gets all static pages but [user] */
+const pages = glob
+  .sync("pages/**/[^_]*.{tsx,js,ts}", { cwd: __dirname })
+  .map((filename) =>
+    filename
+      .substr(6)
+      .replace(/(\.tsx|\.js|\.ts)/, "")
+      .replace(/\/.*/, "")
+  )
+  .filter((v, i, self) => self.indexOf(v) === i && !v.startsWith("[user]"));
+
 /** @type {import("next").NextConfig} */
 const nextConfig = {
   i18n,
@@ -92,11 +104,11 @@ const nextConfig = {
     "@calcom/prisma",
     "@calcom/trpc",
     "@calcom/ui",
+    "lucide-react",
   ],
   modularizeImports: {
     "@calcom/ui/components/icon": {
-      transform: "@react-icons/all-files/fi/{{member}}",
-      skipDefaultConversion: true,
+      transform: "lucide-react/dist/esm/icons/{{ kebabCase member }}",
       preventFullImport: true,
     },
     "@calcom/features/insights/components": {
@@ -193,6 +205,16 @@ const nextConfig = {
         source: "/embed/embed.js",
         destination: process.env.NEXT_PUBLIC_EMBED_LIB_URL?,
       }, */
+      {
+        source: `/:user((?!${pages.join("|")}).*)/:type`,
+        destination: "/new-booker/:user/:type",
+        has: [{ type: "cookie", key: "new-booker-enabled" }],
+      },
+      {
+        source: "/team/:slug/:type",
+        destination: "/new-booker/team/:slug/:type",
+        has: [{ type: "cookie", key: "new-booker-enabled" }],
+      },
     ];
   },
   async headers() {
@@ -292,6 +314,11 @@ const nextConfig = {
         destination: "/api/link?action=:action&email=:email&bookingUid=:bookingUid&oldToken=:oldToken",
         permanent: true,
       },
+      {
+        source: "/support",
+        destination: "/event-types?openIntercom=true",
+        permanent: true,
+      },
     ];
 
     if (process.env.NEXT_PUBLIC_WEBAPP_URL === "https://app.cal.com") {
@@ -318,21 +345,4 @@ const nextConfig = {
   },
 };
 
-const sentryWebpackPluginOptions = {
-  silent: true, // Suppresses all logs
-};
-
-const moduleExports = () => plugins.reduce((acc, next) => next(acc), nextConfig);
-
-if (process.env.NEXT_PUBLIC_SENTRY_DSN) {
-  nextConfig.sentry = {
-    hideSourceMaps: true,
-    // Prevents Sentry from running on this Edge function, where Sentry doesn't work yet (build whould crash the api route).
-    excludeServerRoutes: [/\/api\/social\/og\/image\/?/],
-  };
-}
-
-// Sentry should be the last thing to export to catch everything right
-module.exports = process.env.NEXT_PUBLIC_SENTRY_DSN
-  ? withSentryConfig(moduleExports, sentryWebpackPluginOptions)
-  : moduleExports;
+module.exports = () => plugins.reduce((acc, next) => next(acc), nextConfig);

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calcom/web",
-  "version": "2.7.12",
+  "version": "2.9.2",
   "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",
@@ -57,7 +56,6 @@
     "@radix-ui/react-switch": "^1.0.0",
     "@radix-ui/react-toggle-group": "^1.0.0",
     "@radix-ui/react-tooltip": "^1.0.0",
-    "@sentry/nextjs": "^7.20.0",
     "@stripe/react-stripe-js": "^1.10.0",
     "@stripe/stripe-js": "^1.35.0",
     "@tanstack/react-query": "^4.3.9",
@@ -116,14 +114,11 @@
     "react-select": "^5.7.0",
     "react-timezone-select": "^1.4.0",
     "react-use-intercom": "1.5.1",
-    "react-virtualized-auto-sizer": "^1.0.6",
-    "react-window": "^1.8.7",
-    "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",
@@ -156,8 +151,7 @@
     "@types/qrcode": "^1.4.3",
     "@types/react": "18.0.26",
     "@types/react-phone-number-input": "^3.0.14",
-    "@types/react-virtualized-auto-sizer": "^1.0.1",
-    "@types/react-window": "^1.8.5",
+    "@types/remove-markdown": "^0.3.1",
     "@types/sanitize-html": "^2.9.0",
     "@types/stripe": "^8.0.417",
     "@types/uuid": "8.3.1",