v2.5.5

This reverts commit 4f293edb6b.

.devcontainer/devcontainer.json

@@ -0,0 +1,42 @@
+// 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

@@ -11,6 +11,10 @@
 #   - ZOOM
 #   - GIPHY
 #   - VITAL
+#   - ZAPIER
+#   - LARK
+#   - WEB3
+#   - SALESFORCE
 
 # - APP STORE **********************************************************************************************
 # ⚠️ ⚠️ ⚠️ THESE WILL BE MIGRATED TO THE DATABASE TO PREVENT AWS's 4KB ENV QUOTA ⚠️ ⚠️ ⚠️
@@ -88,7 +92,7 @@ VITAL_REGION="us"
 # @see https://github.com/calcom/cal.com/blob/main/packages/app-store/zapier/README.md
 ZAPIER_INVITE_LINK=""
 
-# - LARK
+#   - LARK
 # Needed to enable Lark Calendar integration and Login with Lark
 # @see <https://open.larksuite.com/document/ukTMukTMukTM/ukDNz4SO0MjL5QzM/g>
 LARK_OPEN_APP_ID=""
@@ -100,4 +104,9 @@ LARK_OPEN_VERIFICATION_TOKEN=""
 # @see https://github.com/calcom/cal.com/blob/main/packages/app-store/rainbow/README.md
 ALCHEMY_API_KEY=""
 INFURA_API_KEY=""
+
+#   - SALESFORCE
+# Used for the Salesforce (Sales Cloud) app
+SALESFORCE_CONSUMER_KEY=""
+SALESFORCE_CONSUMER_SECRET=""
 # *********************************************************************************************************

.env.example

@@ -7,14 +7,13 @@
 # - E-MAIL SETTINGS
 
 # - LICENSE *************************************************************************************************
-# Set this value to 'agree' to accept our license:
-# LICENSE: https://github.com/calendso/calendso/blob/main/LICENSE
+# https://github.com/calendso/calendso/blob/main/LICENSE
 #
 # Summary of terms:
 # - The codebase has to stay open source, whether it was modified or not
 # - You can not repackage or sell the codebase
 # - Acquire a commercial license to remove these terms by visiting: cal.com/sales
-NEXT_PUBLIC_LICENSE_CONSENT=''
+#
 # To enable enterprise-only features, fill your license key in here.
 # @see https://console.cal.com
 CALCOM_LICENSE_KEY=
@@ -32,11 +31,14 @@ NEXT_PUBLIC_CONSOLE_URL='http://localhost:3004'
 NEXT_PUBLIC_EMBED_LIB_URL='http://localhost:3000/embed/embed.js'
 
 # To enable SAML login, set both these variables
-# @see https://github.com/calcom/cal.com/tree/main/packages/ee#setting-up-saml-login
+# @see https://github.com/calcom/cal.com/tree/main/packages/features/ee#setting-up-saml-login
 # SAML_DATABASE_URL="postgresql://postgres:@localhost:5450/cal-saml"
 SAML_DATABASE_URL=
 # SAML_ADMINS='pro@example.com'
 SAML_ADMINS=
+# NEXT_PUBLIC_HOSTED_CAL_FEATURES=1
+NEXT_PUBLIC_HOSTED_CAL_FEATURES=
+
 # If you use Heroku to deploy Postgres (or use self-signed certs for Postgres) then uncomment the follow line.
 # @see https://devcenter.heroku.com/articles/connecting-heroku-postgres#connecting-in-node-js
 # PGSSLMODE='no-verify'
@@ -80,12 +82,17 @@ SEND_FEEDBACK_EMAIL=
 # Used for email reminders in workflows and internal sync services
 SENDGRID_API_KEY=
 SENDGRID_EMAIL=
+NEXT_PUBLIC_SENDGRID_SENDER_NAME=
 
 # Twilio
 # Used to send SMS reminders in workflows
 TWILIO_SID=
 TWILIO_TOKEN=
 TWILIO_MESSAGING_SID=
+TWILIO_PHONE_NUMBER=
+# For NEXT_PUBLIC_SENDER_ID only letters, numbers and spaces are allowed (max. 11 characters)
+NEXT_PUBLIC_SENDER_ID=
+TWILIO_VERIFY_SID=
 
 # This is used so we can bypass emails in auth flows for E2E testing
 # Set it to "1" if you need to run E2E tests locally
@@ -100,6 +107,8 @@ STRIPE_TEAM_MONTHLY_PRICE_ID=
 STRIPE_WEBHOOK_SECRET=
 STRIPE_PRIVATE_KEY=
 STRIPE_CLIENT_ID=
+PAYMENT_FEE_FIXED=
+PAYMENT_FEE_PERCENTAGE=
 
 # Use for internal Public API Keys and optional
 API_KEY_PREFIX=cal_
@@ -140,3 +149,11 @@ SENDGRID_SYNC_API_KEY=
 # Sentry
 NEXT_PUBLIC_SENTRY_DSN=
 SENTRY_IGNORE_API_RESOLUTION_ERROR=
+
+# Change your Brand
+NEXT_PUBLIC_APP_NAME="Cal.com"
+NEXT_PUBLIC_SUPPORT_MAIL_ADDRESS="help@cal.com"
+NEXT_PUBLIC_COMPANY_NAME="Cal.com, Inc."
+# Set this to true in to disable new signups
+# NEXT_PUBLIC_DISABLE_SIGNUP=true
+NEXT_PUBLIC_DISABLE_SIGNUP=

.github/labeler.yml

@@ -1,5 +1,6 @@
-"♻️ autoupdate":
-  - apps/web/public/static/locales/**/*.json
+"❗️ migrations":
+  - packages/prisma/migrations/**/migration.sql
 
-automerge:
-  - apps/web/public/static/locales/**/*.json
+"❗️ .env changes":
+  - .env.example
+  - .env.appStore.example

.github/workflows/add-to-project.yml

@@ -1,22 +0,0 @@
-name: Add bugs to Bug Hunting
-
-on:
-  issues:
-    types:
-      - opened
-      - labeled
-  pull_request:
-    types:
-      - opened
-      - labeled
-
-jobs:
-  add-to-project:
-    name: Add issue to project
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/add-to-project@v0.1.0
-        with:
-          project-url: https://github.com/orgs/calcom/projects/9
-          github-token: ${{ secrets.GH_ACCESS_TOKEN }}
-          labeled:  🙋🏻‍♂️help wanted

.github/workflows/crowdin.yml

@@ -9,6 +9,8 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
+  required-checks:
+    uses: calcom/cal.com/.github/workflows/required-checks.yml@main
   synchronize-with-crowdin:
     runs-on: ubuntu-latest
 
@@ -21,6 +23,7 @@ jobs:
         with:
           upload_translations: true
           download_translations: true
+          pull_request_labels: "♻️ autoupdate, automerge"
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}

.github/workflows/e2e-embed.yml

@@ -7,6 +7,7 @@ on:
     paths:
       - apps/web/**
       - packages/embeds/**
+  workflow_call:
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true

.github/workflows/e2e.yml

@@ -1,13 +1,12 @@
 name: E2E test
 on:
-  push:
-    branches: [fixes/e2e-consolidation] # TODO: Remove this after merged in main
   pull_request_target: # So we can test on forks
     branches:
       - main
     paths:
       - apps/web/**
       - packages/**
+  workflow_call:
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true

.github/workflows/labeler.yml

@@ -12,8 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/labeler@v4
-        # Checking the actor will prevent your Action run failing on non-Dependabot
-        # PRs but also ensures that it only does work for Dependabot PRs.
-        if: ${{ github.actor == 'github-actions[bot]' }}
         with:
           repo-token: "${{ secrets.GITHUB_TOKEN }}"
+          # https://github.com/actions/labeler/issues/442#issuecomment-1297359481
+          sync-labels: ""

.github/workflows/release.yml

@@ -11,6 +11,7 @@ jobs:
     steps:
       - uses: actions/checkout@v3
         with:
+          ref: main # Always checkout main even for tagged releases
           fetch-depth: 0
           token: ${{ secrets.GH_ACCESS_TOKEN }}
       - run: git push origin +main:production

.github/workflows/required-checks.yml

@@ -1,10 +1,9 @@
 name: "Meta Workflow: Require Conditional Status Checks"
 on:
-  push:
-    branches: [fixes/e2e-consolidation] # TODO: Remove this after merged in main
   pull_request:
     branches:
       - main
+  workflow_call:
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true

.github/workflows/test.yml

@@ -1,13 +1,14 @@
 name: Unit tests
 on:
-  push:
-    branches: [ feat/routing-forms/reporting ] # TODO: Remove this after merged in main
   pull_request_target: # So we can test on forks
     branches:
       - main
     paths:
       - apps/web/**
       - packages/**
+  workflow_run:
+    workflows: [Crowdin Action]
+    types: [completed]
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true

.gitignore

@@ -80,3 +80,10 @@ apps/storybook/build-storybook.log
 # Snaplet
 .snaplet/snapshots
 .snaplet/structure.d.ts
+
+# Submodules
+.gitmodules
+apps/api
+apps/website
+apps/console
+apps/auth

.gitmodules

@@ -1,12 +0,0 @@
-[submodule "apps/console"]
-	path = apps/console
-	url = https://github.com/calcom/console.git
-	branch = main
-[submodule "apps/api"]
-	path = apps/api
-	url = https://github.com/calcom/api.git
-	branch = main
-[submodule "apps/website"]
-	path = apps/website
-	url = https://github.com/calcom/website.git
-	branch = main

.vscode/settings.json

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

__checks__/location-link.check.js

@@ -0,0 +1,35 @@
+/**
+ * This is a Playwright script Checkly generated for you based on your Vercel project.
+ * To learn more about Browser checks and Playwright visit: https://www.checklyhq.com/docs/browser-checks
+ */
+
+// Create a Chromium browser
+const { chromium } = require("playwright");
+
+// Checkly supports top level await, but we wrap your code in an async function so you can run it locally too.
+async function run() {
+  const browser = await chromium.launch();
+  const page = await browser.newPage();
+  const targetUrl = process.env.ENVIRONMENT_URL || "https://cal.com";
+  await page.goto(`${targetUrl}/rick/test-location-link`);
+
+  await page.waitForSelector('[data-testid="day"][data-disabled="false"]');
+  await page.click('[data-testid="day"][data-disabled="false"]');
+
+  await page.waitForSelector('[data-testid="time"]');
+  await page.click('[data-testid="time"]');
+
+  await page.waitForSelector("#name");
+  await page.click("#name");
+
+  await page.type("#name", "Calcom");
+
+  await page.type('[name="email"]', "cal@cal.com");
+
+  await page.waitForSelector('[data-testid="confirm-book-button"]');
+  await page.click('[data-testid="confirm-book-button"]');
+
+  await browser.close();
+}
+
+run();

app.json

@@ -33,11 +33,6 @@
       "generator": "secret",
       "required": "true"
     },
-    "NEXT_PUBLIC_LICENSE_CONSENT": {
-      "description": "License consent",
-      "value": "true",
-      "required": "true"
-    },
     "CRON_API_KEY": {
       "description": "ApiKey for cronjobs",
       "value": ""

apps/docs/package.json

@@ -17,7 +17,7 @@
   "license": "MIT",
   "dependencies": {
     "iframe-resizer-react": "^1.1.0",
-    "next": "^12.3.1",
+    "next": "^13.1.1",
     "nextra": "^1.1.0",
     "nextra-theme-docs": "^1.2.2",
     "react": "^18.2.0",

apps/docs/pages/developer/adding-css.mdx

@@ -14,14 +14,13 @@ Cal.com uses [TailwindCSS](https://tailwindcss.com) as a replacement for traditi
 
 CSS files should be stored in the `styles` directory within the codebase.
 
-Within the `styles` directory, you will find two CSS files, `fonts.css` and `global.css`. We suggest not to add to these files, and instead create new CSS files and import them into the application. This helps reduce conflicts when pulling in changes that we've made to either of the existing CSS files.
+Within the `styles` directory, you will find a single CSS file, `global.css`. We suggest not to add to this file, and instead create new CSS files and import them into the application. This helps reduce conflicts when pulling in changes that we've made to either of the existing CSS files.
 
 ## Adding new stylesheets
 Firstly, create the CSS file inside the `styles` directory.
 
 Then, open the `pages/_app.tsx` file, and you will see the following two lines:
 ```javascript
-import "../styles/fonts.css";
 import "../styles/globals.css";
 ```
 

apps/docs/pages/developer/app-store.mdx

@@ -31,7 +31,7 @@ All apps can be found under `packages/app-store`. In this folder is `_example` w
 |   ├──index.ts
 |   ├──package.json
 |   ├──.env.example
-|	├──README.mdx
+|	├──DESCRIPTION.md
 ```
 
 ## Getting Started
@@ -48,9 +48,9 @@ Under the `/components` folder, this is where the install button for your app sh
 
 The `/lib` folder is where the functions of your app live. For example, when creating a booking with a MS Teams link the function to make the call to grab the link lives in the `/lib` folder. Export your endpoints in an `index.ts` file under `/lib` folder and import them in your main `index.ts` file.
 
-On the app store page you can customize your apps description by adding a markdown file called `README.mdx`. If you do not add one then the description from you `package.json` will be used instead.
+On the app store page you can customize your apps description by adding a markdown file called `DESCRIPTION.md`. If you do not add one then the description from you `package.json` will be used instead.
 
-The `/static` folder is where you can store your app icon and any images that your `README.mdx` may use.
+The `/static` folder is where you can store your app icon and any images that your `DESCRIPTION.md` may use.
 
 ## Adding Your App to the App Store
 To render your app on the app store page, go to `packages/app-store/index.ts`. Import your app into the file and add it to the `appStore` object.

apps/storybook/.gitignore

@@ -8,6 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+storybook-static
 dist
 dist-ssr
 *.local
@@ -21,4 +22,4 @@ dist-ssr
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?
+*.sw?

apps/storybook/.storybook/main.js

@@ -4,19 +4,22 @@ module.exports = {
   stories: [
     "../intro.stories.mdx",
     "../../../packages/ui/components/**/*.stories.mdx",
+    "../../../packages/features/**/*.stories.mdx",
     "../../../packages/ui/components/**/*.stories.@(js|jsx|ts|tsx)",
   ],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
+    "storybook-addon-rtl-direction",
     "storybook-react-i18next",
-    {
+    "storybook-addon-next",
+    /*{
       name: "storybook-addon-next",
       options: {
         nextConfigPath: path.resolve(__dirname, "../../web/next.config.js"),
       },
-    },
+    },*/
   ],
   framework: "@storybook/react",
   core: {
@@ -50,6 +53,21 @@ module.exports = {
       vm: false,
       zlib: false,
     };
+
+    config.module.rules.push({
+      test: /\.css$/,
+      use: [
+        "style-loader",
+        {
+          loader: "css-loader",
+          options: {
+            modules: true, // Enable modules to help you using className
+          },
+        },
+      ],
+      include: path.resolve(__dirname, "../src"),
+    });
+
     return config;
   },
 };

apps/storybook/.storybook/preview.jsx

@@ -15,7 +15,11 @@ export const parameters = {
   },
 };
 
-addDecorator((storyFn) => <I18nextProvider i18n={i18n}>{storyFn()}</I18nextProvider>);
+addDecorator((storyFn) => (
+  <I18nextProvider i18n={i18n}>
+    <div style={{ margin: "2rem" }}>{storyFn()}</div>
+  </I18nextProvider>
+));
 
 window.getEmbedNamespace = () => {
   const url = new URL(document.URL);

apps/storybook/components/VariantsTable.tsx

@@ -19,7 +19,7 @@ export function VariantsTable({
     <div
       className={classNames(
         isDark &&
-          "relative py-8 before:absolute before:left-0 before:top-0 before:block before:h-full before:w-screen before:bg-[#22252A]"
+          "relative py-8 before:absolute before:left-0 before:top-0 before:block before:h-full before:w-screen before:bg-[#1C1C1C]"
       )}>
       <div className="z-1 relative mx-auto w-full max-w-[1200px] overflow-auto pr-8 pt-6">
         <table>

apps/storybook/next.config.js

@@ -0,0 +1,45 @@
+const withBundleAnalyzer = require("@next/bundle-analyzer");
+
+const withTM = require("next-transpile-modules")([
+  "@calcom/app-store",
+  "@calcom/dayjs",
+  "@calcom/emails",
+  "@calcom/trpc",
+  "@calcom/embed-core",
+  "@calcom/embed-react",
+  "@calcom/features",
+  "@calcom/lib",
+  "@calcom/prisma",
+  "@calcom/ui",
+]);
+const glob = require("glob");
+
+const plugins = [];
+plugins.push(withTM, withBundleAnalyzer({ enabled: process.env.ANALYZE === "true" }));
+
+/** @type {import("next").NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  images: {
+    domains: ["www.datocms-assets.com"],
+    formats: ["image/avif", "image/webp"],
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  experimental: { images: { allowFutureImage: true } },
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  webpack: (config, { isServer }) => {
+    if (!isServer) {
+      // don't resolve 'fs' module on the client to prevent this error on build --> Error: Can't resolve 'fs'
+      config.resolve.fallback = {
+        fs: false,
+      };
+    }
+    return config;
+  },
+};
+
+module.exports = () => plugins.reduce((acc, next) => next(acc), nextConfig);

apps/storybook/package.json

@@ -20,9 +20,10 @@
     "@radix-ui/react-slider": "^1.0.0",
     "@radix-ui/react-switch": "^1.0.0",
     "@radix-ui/react-tooltip": "^1.0.0",
-    "next": "^12.3.1",
+    "next": "^13.1.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "storybook-addon-rtl-direction": "^0.0.19"
   },
   "devDependencies": {
     "@babel/core": "^7.19.6",

apps/storybook/styles/globals.css

@@ -2,4 +2,4 @@
 @tailwind components;
 @tailwind utilities;
 
-@import "../../../packages/ui/styles/shared-globals.css"
+@import "../../../packages/ui/styles/shared-globals.css"

apps/storybook/styles/storybook-styles.css

@@ -1,3 +1,5 @@
+@import url("../../../packages/features/calendars/weeklyview/styles/styles.css");
+
 .sbdocs {
   font-family: 'Inter var' !important;
   padding: 0!important;
@@ -36,7 +38,7 @@
 
 /** Docs table **/
 .custom-args-wrapper{
-  max-height: 600px;
+  max-height: 400px;
   overflow-y: scroll;
   overflow-x: hidden;
   margin-bottom: 1rem;
@@ -187,3 +189,7 @@
     padding: 24px !important;
   }
 }
+
+.docs-story {
+  padding: 24px !important;
+}

apps/swagger/package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "highlight.js": "^11.6.0",
     "isarray": "2.0.5",
-    "next": "^12.3.1",
+    "next": "^13.1.1",
     "openapi-snippet": "^0.13.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

apps/web/.nvmrc

@@ -1 +1 @@
-14.17
+v16

apps/web/@types/@wojtekmaj__react-daterange-picker.d.ts

@@ -1,15 +0,0 @@
-declare module "@wojtekmaj/react-daterange-picker/dist/entry.nostyle" {
-  import { CalendarProps } from "react-calendar";
-  export type DateRangePickerCalendarProps = Omit<
-    CalendarProps,
-    "calendarClassName" | "onChange" | "value"
-  > & {
-    calendarClassName?: string;
-    onChange: (value: [Date, Date]) => void;
-    value: [Date, Date];
-    clearIcon: JSX.Element | null;
-    calendarIcon: JSX.Element | null;
-    rangeDivider: JSX.Element | null;
-  };
-  export default function DateRangePicker(props: DateRangePickerCalendarProps): JSX.Element;
-}

apps/web/components/AddToHomescreen.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/Icon";
+import { FiX } 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>
-                <Icon.FiX className="h-6 w-6 text-white" aria-hidden="true" />
+                <FiX className="h-6 w-6 text-white" aria-hidden="true" />
               </button>
             </div>
           </div>

apps/web/components/AppListCard.tsx

@@ -0,0 +1,35 @@
+import { ReactNode } from "react";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Badge, ListItemText } from "@calcom/ui";
+
+interface AppListCardProps {
+  logo?: string;
+  title: string;
+  description: string;
+  actions?: ReactNode;
+  isDefault?: boolean;
+}
+
+export default function AppListCard(props: AppListCardProps) {
+  const { t } = useLocale();
+  const { logo, title, description, actions, isDefault } = props;
+
+  return (
+    <div className="p-4">
+      <div className="flex items-center gap-x-3">
+        {logo ? <img className="h-10 w-10" src={logo} alt={`${title} logo`} /> : null}
+
+        <div className="flex grow flex-col gap-y-1 truncate">
+          <div className="flex items-center gap-x-2">
+            <h3 className="truncate text-sm font-semibold text-gray-900">{title}</h3>
+            {isDefault ? <Badge variant="green">{t("default")}</Badge> : null}
+          </div>
+          <ListItemText component="p">{description}</ListItemText>
+        </div>
+
+        {actions}
+      </div>
+    </div>
+  );
+}

apps/web/components/ClientSuspense.tsx

@@ -1,9 +0,0 @@
-import { Suspense, SuspenseProps } from "react";
-
-/**
- * Wrapper around `<Suspense />` which will render the `fallback` when on server
- * Can be simply replaced by `<Suspense />` once React 18 is ready.
- */
-export const ClientSuspense = (props: SuspenseProps) => {
-  return <>{typeof window !== "undefined" ? <Suspense {...props} /> : props.fallback}</>;
-};

apps/web/components/Embed.tsx

@@ -4,14 +4,22 @@ import { NextRouter, useRouter } from "next/router";
 import { createRef, forwardRef, MutableRefObject, RefObject, useRef, useState } from "react";
 import { components, ControlProps } from "react-select";
 
+import { APP_NAME, EMBED_LIB_URL, WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components";
-import { InputLeading, Label, TextArea, TextField } from "@calcom/ui/form/fields";
-import { HorizontalTabs, showToast, Switch } from "@calcom/ui/v2";
-import { Dialog, DialogClose, DialogContent } from "@calcom/ui/v2/core/Dialog";
-
-import { EMBED_LIB_URL, WEBAPP_URL } from "@lib/config/constants";
+import {
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  HorizontalTabs,
+  InputLeading,
+  Label,
+  showToast,
+  Switch,
+  TextArea,
+  TextField,
+} from "@calcom/ui";
+import { FiCode, FiTrello, FiSun, FiArrowLeft, FiChevronRight } from "@calcom/ui/components/icon";
 
 import ColorPicker from "@components/ui/colorpicker";
 import Select from "@components/ui/form/Select";
@@ -36,6 +44,7 @@ type PreviewState = {
   palette: {
     brandColor: string;
   };
+  hideEventTypeDetails: boolean;
 };
 const queryParamsForDialog = ["embedType", "embedTabName", "embedUrl"];
 
@@ -117,10 +126,12 @@ const getEmbedUIInstructionString = ({
   apiName,
   theme,
   brandColor,
+  hideEventTypeDetails,
 }: {
   apiName: string;
   theme?: string;
   brandColor: string;
+  hideEventTypeDetails: boolean;
 }) => {
   theme = theme !== "auto" ? theme : undefined;
   return getInstructionString({
@@ -133,6 +144,7 @@ const getEmbedUIInstructionString = ({
           brandColor,
         },
       },
+      hideEventTypeDetails: hideEventTypeDetails,
     },
   });
 };
@@ -245,18 +257,21 @@ const getEmbedTypeSpecificString = ({
     apiName: string;
     theme: PreviewState["theme"];
     brandColor: string;
+    hideEventTypeDetails: boolean;
   };
   if (embedFramework === "react") {
     uiInstructionStringArg = {
       apiName: "cal",
       theme: previewState.theme,
       brandColor: previewState.palette.brandColor,
+      hideEventTypeDetails: previewState.hideEventTypeDetails,
     };
   } else {
     uiInstructionStringArg = {
       apiName: "Cal",
       theme: previewState.theme,
       brandColor: previewState.palette.brandColor,
+      hideEventTypeDetails: previewState.hideEventTypeDetails,
     };
   }
   if (!frameworkCodes[embedType]) {
@@ -473,7 +488,7 @@ const tabs = [
   {
     name: "HTML",
     href: "embedTabName=embed-code",
-    icon: Icon.FiCode,
+    icon: FiCode,
     type: "code",
     Component: forwardRef<
       HTMLTextAreaElement | HTMLIFrameElement | null,
@@ -489,7 +504,9 @@ const tabs = [
       return (
         <>
           <div>
-            <small className="flex py-4 text-neutral-500">{t("place_where_cal_widget_appear")}</small>
+            <small className="flex py-4 text-gray-500">
+              {t("place_where_cal_widget_appear", { appName: APP_NAME })}
+            </small>
           </div>
           <TextArea
             data-testid="embed-code"
@@ -524,7 +541,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ
   {
     name: "React",
     href: "embedTabName=embed-react",
-    icon: Icon.FiCode,
+    icon: FiCode,
     type: "code",
     Component: forwardRef<
       HTMLTextAreaElement | HTMLIFrameElement | null,
@@ -539,7 +556,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ
       }
       return (
         <>
-          <small className="flex py-4 text-neutral-500">{t("create_update_react_component")}</small>
+          <small className="flex py-4 text-gray-500">{t("create_update_react_component")}</small>
           <TextArea
             data-testid="embed-react"
             ref={ref as typeof ref & MutableRefObject<HTMLTextAreaElement>}
@@ -564,7 +581,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, prev
   {
     name: "Preview",
     href: "embedTabName=embed-preview",
-    icon: Icon.FiTrello,
+    icon: FiTrello,
     type: "iframe",
     Component: forwardRef<
       HTMLIFrameElement | HTMLTextAreaElement | null,
@@ -580,7 +597,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, prev
         <iframe
           ref={ref as typeof ref & MutableRefObject<HTMLIFrameElement>}
           data-testid="embed-preview"
-          className="border-1 h-[100vh] border"
+          className="h-[100vh] border"
           width="100%"
           height="100%"
           src={`${WEBAPP_URL}/embed/preview.html?embedType=${embedType}&calLink=${calLink}`}
@@ -600,7 +617,7 @@ Cal("init", {origin:"${WEBAPP_URL}"});
 const ThemeSelectControl = ({ children, ...props }: ControlProps<{ value: Theme; label: string }, false>) => {
   return (
     <components.Control {...props}>
-      <Icon.FiSun className="ml-2 h-4 w-4 text-gray-500" />
+      <FiSun className="ml-2 h-4 w-4 text-gray-500" />
       {children}
     </components.Control>
   );
@@ -610,19 +627,19 @@ const ChooseEmbedTypesDialogContent = () => {
   const { t } = useLocale();
   const router = useRouter();
   return (
-    <DialogContent type="creation" useOwnActionButtons size="lg">
+    <DialogContent type="creation" size="lg">
       <div className="mb-4">
         <h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">
-          {t("how_you_want_add_cal_site")}
+          {t("how_you_want_add_cal_site", { appName: APP_NAME })}
         </h3>
         <div>
-          <p className="text-sm text-gray-500">{t("choose_ways_put_cal_site")}</p>
+          <p className="text-sm text-gray-500">{t("choose_ways_put_cal_site", { appName: APP_NAME })}</p>
         </div>
       </div>
       <div className="flex items-start">
         {embeds.map((embed, index) => (
           <button
-            className="mr-2 w-1/3 border border-transparent p-3 text-left hover:rounded-md hover:border-gray-200 hover:bg-neutral-100"
+            className="w-1/3 border border-transparent p-3 text-left hover:rounded-md hover:border-gray-200 hover:bg-gray-100 ltr:mr-2 rtl:ml-2"
             key={index}
             data-testid={embed.type}
             onClick={() => {
@@ -633,7 +650,7 @@ const ChooseEmbedTypesDialogContent = () => {
             <div className="order-none box-border flex-none rounded-sm border border-solid bg-white">
               {embed.illustration}
             </div>
-            <div className="mt-2 font-medium text-neutral-900">{embed.title}</div>
+            <div className="mt-2 font-medium text-gray-900">{embed.title}</div>
             <p className="text-sm text-gray-500">{embed.subtitle}</p>
           </button>
         ))}
@@ -679,6 +696,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
     theme: Theme.auto,
     floatingPopup: {},
     elementClick: {},
+    hideEventTypeDetails: false,
     palette: {
       brandColor: "#000000",
     },
@@ -743,6 +761,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
     name: "ui",
     arg: {
       theme: previewState.theme,
+      hideEventTypeDetails: previewState.hideEventTypeDetails,
       styles: {
         branding: {
           ...previewState.palette,
@@ -788,7 +807,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   ];
 
   return (
-    <DialogContent size="xl" className="p-0.5" type="creation" useOwnActionButtons>
+    <DialogContent size="xl" className="p-0.5" type="creation">
       <div className="flex">
         <div className="flex w-1/3 flex-col bg-gray-50 p-8">
           <h3 className="mb-2 flex text-xl font-bold leading-6 text-gray-900" id="modal-title">
@@ -796,19 +815,19 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
               onClick={() => {
                 removeQueryParams(router, ["embedType", "embedTabName"]);
               }}>
-              <Icon.FiArrowLeft className="mr-4 w-4" />
+              <FiArrowLeft className="mr-4 w-4" />
             </button>
             {embed.title}
           </h3>
           <hr className={classNames("mt-4", embedType === "element-click" ? "hidden" : "")} />
-          <div className="max-h-97 flex flex-col overflow-y-auto">
+          <div className="flex flex-col overflow-y-auto">
             <div className={classNames("mt-4 font-medium", embedType === "element-click" ? "hidden" : "")}>
               <Collapsible
                 open={isEmbedCustomizationOpen}
                 onOpenChange={() => setIsEmbedCustomizationOpen((val) => !val)}>
                 <CollapsibleTrigger
                   type="button"
-                  className="flex w-full items-center text-base font-medium text-neutral-900">
+                  className="flex w-full items-center text-base font-medium text-gray-900">
                   <div>
                     {embedType === "inline"
                       ? "Inline Embed Customization"
@@ -816,10 +835,10 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                       ? "Floating Popup Customization"
                       : "Element Click Customization"}
                   </div>
-                  <Icon.FiChevronRight
+                  <FiChevronRight
                     className={`${
                       isEmbedCustomizationOpen ? "rotate-90 transform" : ""
-                    } ml-auto h-5 w-5 text-neutral-500`}
+                    } ml-auto h-5 w-5 text-gray-500`}
                   />
                 </CollapsibleTrigger>
                 <CollapsibleContent className="text-sm">
@@ -828,7 +847,6 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                     <div className="text-sm">Embed Window Sizing</div>
                     <div className="justify-left flex items-center">
                       <TextField
-                        name="width"
                         labelProps={{ className: "hidden" }}
                         required
                         value={previewState.inline.width}
@@ -850,7 +868,6 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                       <span className="p-2">×</span>
                       <TextField
                         labelProps={{ className: "hidden" }}
-                        name="height"
                         value={previewState.inline.height}
                         required
                         onChange={(e) => {
@@ -878,7 +895,6 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                     <div className="mb-2 text-sm">Button Text</div>
                     {/* Default Values should come from preview iframe */}
                     <TextField
-                      name="buttonText"
                       labelProps={{ className: "hidden" }}
                       onChange={(e) => {
                         setPreviewState((previewState) => {
@@ -898,7 +914,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                   <div
                     className={classNames(
                       "mt-4 flex items-center justify-start",
-                      embedType === "floating-popup" ? "space-x-2" : "hidden"
+                      embedType === "floating-popup" ? "space-x-2 rtl:space-x-reverse" : "hidden"
                     )}>
                     <Switch
                       defaultChecked={true}
@@ -985,15 +1001,29 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                 open={isBookingCustomizationOpen}
                 onOpenChange={() => setIsBookingCustomizationOpen((val) => !val)}>
                 <CollapsibleTrigger className="flex w-full" type="button">
-                  <div className="text-base  font-medium text-neutral-900">Cal Booking Customization</div>
-                  <Icon.FiChevronRight
+                  <div className="text-base  font-medium text-gray-900">Cal Booking Customization</div>
+                  <FiChevronRight
                     className={`${
                       isBookingCustomizationOpen ? "rotate-90 transform" : ""
-                    } ml-auto h-5 w-5 text-neutral-500`}
+                    } ml-auto h-5 w-5 text-gray-500`}
                   />
                 </CollapsibleTrigger>
                 <CollapsibleContent>
                   <div className="mt-6 text-sm">
+                    <div className="mb-4 flex items-center justify-start space-x-2 rtl:space-x-reverse">
+                      <Switch
+                        checked={previewState.hideEventTypeDetails}
+                        onCheckedChange={(checked) => {
+                          setPreviewState((previewState) => {
+                            return {
+                              ...previewState,
+                              hideEventTypeDetails: checked,
+                            };
+                          });
+                        }}
+                      />
+                      <div className="text-sm">{t("hide_eventtype_details")}</div>
+                    </div>
                     <Label className="">
                       <div className="mb-2">Theme</div>
                       <Select
@@ -1086,9 +1116,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                       {t("copy_code")}
                     </Button>
                   ) : null}
-                  <DialogClose asChild>
-                    <Button color="secondary">{t("Close")}</Button>
-                  </DialogClose>
+                  <DialogClose />
                 </div>
               </div>
             );
@@ -1135,7 +1163,7 @@ export const EmbedButton = <T extends React.ElementType>({
   ...props
 }: EmbedButtonProps<T> & React.ComponentPropsWithoutRef<T>) => {
   const router = useRouter();
-  className = classNames(className, "hidden lg:inline-flex");
+  className = classNames("hidden lg:inline-flex", className);
   const openEmbedModal = () => {
     goto(router, {
       dialog: "embed",

apps/web/components/I18nLanguageHandler.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from "next-i18next";
 import { useEffect } from "react";
 
+import { getDirFromLang } from "@calcom/lib/i18n";
 import { trpc } from "@calcom/trpc/react";
 
 export function useViewerI18n() {
@@ -21,12 +22,16 @@ export function useViewerI18n() {
  */
 const I18nLanguageHandler = (): null => {
   const { i18n } = useTranslation("common");
-  const locale = useViewerI18n().data?.locale;
+  const locale = useViewerI18n().data?.locale || "en";
 
   useEffect(() => {
     if (locale && i18n.language && i18n.language !== locale) {
       if (typeof i18n.changeLanguage === "function") i18n.changeLanguage(locale);
     }
+
+    const dir = getDirFromLang(locale);
+    document.documentElement.setAttribute("lang", locale);
+    document.documentElement.setAttribute("dir", dir);
   }, [locale, i18n]);
 
   return null;

apps/web/components/ImageUploader.tsx

@@ -1,8 +1,7 @@
 import { FormEvent, useCallback, useEffect, useState } from "react";
 import Cropper from "react-easy-crop";
 
-import Button from "@calcom/ui/Button";
-import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
+import { Button, Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui";
 
 import { Area, getCroppedImg } from "@lib/cropImage";
 import { useFileReader } from "@lib/hooks/useFileReader";
@@ -143,7 +142,7 @@ export default function ImageUploader({
               </div>
             )}
             {result && <CropContainer imageSrc={result as string} onCropComplete={setCroppedAreaPixels} />}
-            <label className="mt-8 rounded-sm border border-gray-300 bg-white px-3 py-1 text-xs font-medium leading-4 text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-1 dark:border-gray-800 dark:bg-transparent dark:text-white dark:hover:bg-gray-900">
+            <label className="mt-8 rounded-sm border border-gray-300 bg-white px-3 py-1 text-xs font-medium leading-4 text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-1 dark:border-gray-800 dark:bg-transparent dark:text-white dark:hover:bg-gray-900">
               <input
                 onInput={onInputFile}
                 type="file"
@@ -157,12 +156,8 @@ export default function ImageUploader({
           </div>
         </div>
         <div className="mt-5 gap-x-2 sm:mt-4 sm:flex sm:flex-row-reverse">
-          <DialogClose asChild>
-            <Button onClick={() => showCroppedImage(croppedAreaPixels)}>{t("save")}</Button>
-          </DialogClose>
-          <DialogClose asChild>
-            <Button color="secondary">{t("cancel")}</Button>
-          </DialogClose>
+          <DialogClose onClick={() => showCroppedImage(croppedAreaPixels)}>{t("save")}</DialogClose>
+          <DialogClose color="secondary">{t("cancel")}</DialogClose>
         </div>
       </DialogContent>
     </Dialog>

apps/web/components/Loader.tsx

@@ -1,4 +1,4 @@
 /**
  * @deprecated Use custom Skeletons instead
  **/
-export { default } from "@calcom/ui/Loader";
+export { Loader as default } from "@calcom/ui";

apps/web/components/NavTabs.tsx

@@ -62,12 +62,12 @@ const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
           const className = tab.className || "";
           return (
             <Component key={tab.name}>
-              <Link key={tab.name} href={href} {...linkProps}>
+              <Link key={tab.name} href={href} {...linkProps} legacyBehavior>
                 <a
                   onClick={onClick}
                   className={classNames(
                     isCurrent
-                      ? "border-neutral-900 text-neutral-900"
+                      ? "border-gray-900 text-gray-900"
                       : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
                     "group inline-flex items-center border-b-2 py-4 px-1 text-sm font-medium",
                     className
@@ -76,7 +76,7 @@ const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
                   {tab.icon && (
                     <tab.icon
                       className={classNames(
-                        isCurrent ? "text-neutral-900" : "text-gray-400 group-hover:text-gray-500",
+                        isCurrent ? "text-gray-900" : "text-gray-400 group-hover:text-gray-500",
                         "-ml-0.5 hidden h-4 w-4 ltr:mr-2 rtl:ml-2 sm:inline-block"
                       )}
                       aria-hidden="true"

apps/web/components/SettingsShell.tsx

@@ -1,8 +1,8 @@
 import React, { ComponentProps } from "react";
 
-import ErrorBoundary from "@calcom/ui/ErrorBoundary";
-import { Icon } from "@calcom/ui/Icon";
-import Shell from "@calcom/ui/Shell";
+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 NavTabs from "./NavTabs";
 
@@ -10,32 +10,32 @@ const tabs = [
   {
     name: "profile",
     href: "/settings/profile",
-    icon: Icon.FiUser,
+    icon: FiUser,
   },
   {
     name: "teams",
     href: "/settings/teams",
-    icon: Icon.FiUsers,
+    icon: FiUsers,
   },
   {
     name: "security",
     href: "/settings/security",
-    icon: Icon.FiKey,
+    icon: FiKey,
   },
   {
     name: "developer",
     href: "/settings/developer",
-    icon: Icon.FiTerminal,
+    icon: FiTerminal,
   },
   {
     name: "billing",
     href: "/settings/billing",
-    icon: Icon.FiCreditCard,
+    icon: FiCreditCard,
   },
   {
     name: "admin",
     href: "/settings/admin",
-    icon: Icon.FiLock,
+    icon: FiLock,
     adminRequired: true,
   },
 ];

apps/web/components/apps/AdditionalCalendarSelector.tsx

@@ -1,13 +1,11 @@
-import React from "react";
 import { OptionProps } from "react-select";
 
 import { InstallAppButton } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import type { App } from "@calcom/types/App";
-import { Button } from "@calcom/ui";
-import { Icon } from "@calcom/ui/Icon";
-import { Select } from "@calcom/ui/v2";
+import { Button, Select } from "@calcom/ui";
+import { FiPlus } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
 
@@ -34,7 +32,7 @@ const ImageOption = (optionProps: OptionProps<{ [key: string]: string; type: App
     />
   ) : (
     <Button className="w-full" color="minimal" href="/apps/categories/calendar">
-      <Icon.FiPlus className="text-color mr-3 ml-1 h-4 w-4" />
+      <FiPlus className="text-color mr-3 ml-1 h-4 w-4" />
       <p>{t("install_new_calendar_app")}</p>
     </Button>
   );
@@ -64,12 +62,10 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
           <Select
             name="additionalCalendar"
             placeholder={
-              <div className="flex justify-start text-black">
-                <Icon.FiPlus className="-ml-1 h-4 w-4 ltr:mr-2 rtl:ml-2 rtl:-mr-1" />
-                <p>{t("add")}</p>
-              </div>
+              <Button StartIcon={FiPlus} color="secondary">
+                {t("add")}
+              </Button>
             }
-            className="min-w-44"
             options={options}
             isSearchable={false}
             isLoading={isLoading}
@@ -83,11 +79,16 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
                 width: "max-content",
                 right: "0",
               }),
+              indicatorSeparator: (defaultStyles) => ({
+                ...defaultStyles,
+                display: "none",
+              }),
               control: (defaultStyles) => ({
                 ...defaultStyles,
                 padding: "0",
                 border: "0",
-                borderRadius: "inherit",
+                borderRadius: "6px",
+                minHeight: "auto",
               }),
               dropdownIndicator: (defaultStyles) => ({
                 ...defaultStyles,

apps/web/components/apps/App.tsx

@@ -4,18 +4,25 @@ import React, { useState } from "react";
 
 import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
 import { InstallAppButton } from "@calcom/app-store/components";
+import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
 import LicenseRequired from "@calcom/features/ee/common/components/v2/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";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { App as AppType } from "@calcom/types/App";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components";
-import { showToast, SkeletonText } from "@calcom/ui/v2";
-import { SkeletonButton, Shell } from "@calcom/ui/v2";
-import DisconnectIntegration from "@calcom/ui/v2/modules/integrations/DisconnectIntegration";
-
-import HeadSeo from "@components/seo/head-seo";
+import { Button, showToast, SkeletonButton, SkeletonText, HeadSeo, Badge } from "@calcom/ui";
+import {
+  FiBookOpen,
+  FiCheck,
+  FiExternalLink,
+  FiFile,
+  FiFlag,
+  FiMail,
+  FiPlus,
+  FiShield,
+} from "@calcom/ui/components/icon";
 
 const Component = ({
   name,
@@ -37,6 +44,7 @@ const Component = ({
   privacy,
   isProOnly,
   images,
+  isTemplate,
 }: Parameters<typeof App>[0]) => {
   const { t } = useLocale();
   const hasImages = images && images.length > 0;
@@ -44,7 +52,7 @@ const Component = ({
 
   const mutation = useAddAppMutation(null, {
     onSuccess: (data) => {
-      if (data.setupPending) return;
+      if (data?.setupPending) return;
       showToast(t("app_successfully_installed"), "success");
     },
     onError: (error) => {
@@ -68,7 +76,9 @@ const Component = ({
     }
   );
 
-  const allowedMultipleInstalls = categories.indexOf("calendar") > -1;
+  // variant not other allows, an app to be shown in calendar category without requiring an actual calendar connection e.g. vimcal
+  // Such apps, can only be installed once.
+  const allowedMultipleInstalls = categories.indexOf("calendar") > -1 && variant !== "other";
 
   return (
     <div className="relative flex-1 flex-col items-start justify-start px-4 md:flex md:px-8 lg:flex-row lg:px-0">
@@ -100,18 +110,25 @@ const Component = ({
               <h1 className="font-cal ml-4 text-3xl text-gray-900">{name}</h1>
             </div>
             <h2 className="text-sm font-medium text-gray-600">
-              <Link href={`categories/${categories[0]}`}>
-                <a className="rounded-md bg-gray-100 p-1 text-xs capitalize text-gray-800">{categories[0]}</a>
+              <Link
+                href={`categories/${categories[0]}`}
+                className="rounded-md bg-gray-100 p-1 text-xs capitalize text-gray-800">
+                {categories[0]}
               </Link>{" "}
               • {t("published_by", { author })}
             </h2>
+            {isTemplate && (
+              <Badge variant="red" className="mt-4">
+                Template - Available in Dev Environment only for testing
+              </Badge>
+            )}
           </header>
         </div>
         {!appCredentials.isLoading ? (
           isGlobal ||
           (existingCredentials.length > 0 && allowedMultipleInstalls ? (
             <div className="flex space-x-3">
-              <Button StartIcon={Icon.FiCheck} color="secondary" disabled>
+              <Button StartIcon={FiCheck} color="secondary" disabled>
                 {existingCredentials.length > 0
                   ? t("active_install", { count: existingCredentials.length })
                   : t("default")}
@@ -123,6 +140,7 @@ const Component = ({
                   render={({ useDefaultComponent, ...props }) => {
                     if (useDefaultComponent) {
                       props = {
+                        ...props,
                         onClick: () => {
                           mutation.mutate({ type, variant, slug });
                         },
@@ -131,7 +149,7 @@ const Component = ({
                     }
                     return (
                       <Button
-                        StartIcon={Icon.FiPlus}
+                        StartIcon={FiPlus}
                         {...props}
                         // @TODO: Overriding color and size prevent us from
                         // having to duplicate InstallAppButton for now.
@@ -161,6 +179,7 @@ const Component = ({
               render={({ useDefaultComponent, ...props }) => {
                 if (useDefaultComponent) {
                   props = {
+                    ...props,
                     onClick: () => {
                       mutation.mutate({ type, variant, slug });
                     },
@@ -195,7 +214,7 @@ const Component = ({
         <h4 className="mt-8 font-semibold text-gray-900 ">{t("pricing")}</h4>
         <span>
           {price === 0 ? (
-            "Free"
+            t("free_to_use_apps")
           ) : (
             <>
               {Intl.NumberFormat("en-US", {
@@ -217,7 +236,7 @@ const Component = ({
                 rel="noreferrer"
                 className="text-sm font-normal text-black no-underline hover:underline"
                 href={docs}>
-                <Icon.FiBookOpen className="mr-1 -mt-1 inline h-4 w-4 text-gray-500" />
+                <FiBookOpen className="mr-1 -mt-1 inline h-4 w-4 text-gray-500" />
                 {t("documentation")}
               </a>
             </li>
@@ -229,7 +248,7 @@ const Component = ({
                 rel="noreferrer"
                 className="font-normal text-black no-underline hover:underline"
                 href={website}>
-                <Icon.FiExternalLink className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+                <FiExternalLink className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
                 {website.replace("https://", "")}
               </a>
             </li>
@@ -241,7 +260,7 @@ const Component = ({
                 rel="noreferrer"
                 className="font-normal text-black no-underline hover:underline"
                 href={"mailto:" + email}>
-                <Icon.FiMail className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+                <FiMail className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
 
                 {email}
               </a>
@@ -254,7 +273,7 @@ const Component = ({
                 rel="noreferrer"
                 className="font-normal text-black no-underline hover:underline"
                 href={tos}>
-                <Icon.FiFile className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+                <FiFile className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
                 {t("terms_of_service")}
               </a>
             </li>
@@ -266,16 +285,18 @@ const Component = ({
                 rel="noreferrer"
                 className="font-normal text-black no-underline hover:underline"
                 href={privacy}>
-                <Icon.FiShield className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+                <FiShield className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
                 {t("privacy_policy")}
               </a>
             </li>
           )}
         </ul>
         <hr className="my-8" />
-        <span className="leading-1 block text-xs text-gray-500">{t("every_app_published")}</span>
-        <a className="mt-2 block text-xs text-red-500" href="mailto:help@cal.com">
-          <Icon.FiFlag className="inline h-3 w-3" /> {t("report_app")}
+        <span className="leading-1 block text-xs text-gray-500">
+          {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")}
         </a>
       </div>
     </div>
@@ -305,6 +326,7 @@ export default function App(props: {
   licenseRequired: AppType["licenseRequired"];
   isProOnly: AppType["isProOnly"];
   images?: string[];
+  isTemplate?: boolean;
 }) {
   const { t } = useLocale();
 

apps/web/components/apps/CalendarListContainer.tsx

@@ -3,18 +3,21 @@ 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 DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui/Icon";
-import SkeletonLoader from "@calcom/ui/apps/SkeletonLoader";
-import { Button } from "@calcom/ui/components";
-import { Alert, EmptyScreen } from "@calcom/ui/v2";
-import { List } from "@calcom/ui/v2/core/List";
-import { ShellSubHeading } from "@calcom/ui/v2/core/Shell";
-import Switch from "@calcom/ui/v2/core/Switch";
-import showToast from "@calcom/ui/v2/core/notifications";
-import DisconnectIntegration from "@calcom/ui/v2/modules/integrations/DisconnectIntegration";
+import {
+  Alert,
+  Button,
+  EmptyScreen,
+  List,
+  showToast,
+  AppSkeletonLoader as SkeletonLoader,
+  Switch,
+  ShellSubHeading,
+} from "@calcom/ui";
+import { FiArrowLeft, FiCalendar, FiPlus } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
 
@@ -97,7 +100,7 @@ function CalendarSwitch(props: {
       />
       {!!props.destination && (
         <span className="ml-4 inline-flex items-center gap-1 rounded-md bg-gray-100 px-2 py-1 text-sm font-normal text-gray-800">
-          <Icon.FiArrowLeft className="h-4 w-4" />
+          <FiArrowLeft className="h-4 w-4" />
           {t("adding_events_to")}
         </span>
       )}
@@ -156,6 +159,7 @@ function ConnectedCalendarsList(props: Props) {
         if (!data.connectedCalendars.length) {
           return null;
         }
+
         return (
           <List className="flex flex-col gap-6" noBorderTreatment>
             {data.connectedCalendars.map((item) => (
@@ -165,7 +169,7 @@ function ConnectedCalendarsList(props: Props) {
                     slug={item.integration.slug}
                     title={item.integration.title}
                     logo={item.integration.logo}
-                    description={item.primary?.externalId || "No external Id"}
+                    description={item.primary?.email ?? item.integration.description}
                     separate={true}
                     actions={
                       <div className="flex w-32 justify-end">
@@ -180,9 +184,7 @@ function ConnectedCalendarsList(props: Props) {
                     <div className="border-t border-gray-200">
                       {!fromOnboarding && (
                         <>
-                          <p className="px-4 pt-4 text-sm text-neutral-500">
-                            {t("toggle_calendars_conflict")}
-                          </p>
+                          <p className="px-4 pt-4 text-sm text-gray-500">{t("toggle_calendars_conflict")}</p>
                           <ul className="space-y-2 p-4">
                             {item.calendars.map((cal) => (
                               <CalendarSwitch
@@ -280,8 +282,8 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
                     <div className="flex justify-between rounded-md border border-gray-200 bg-gray-50 p-4">
                       <div className="flex w-full flex-col items-start gap-4 md:flex-row md:items-center">
                         <div className="relative rounded-md border border-gray-200 bg-white p-1.5">
-                          <Icon.FiCalendar className="h-8 w-8" strokeWidth="1" />
-                          <Icon.FiPlus
+                          <FiCalendar className="h-8 w-8" strokeWidth="1" />
+                          <FiPlus
                             className="absolute left-4 top-1/2 ml-0.5 mt-[1px] h-2 w-2 text-black"
                             strokeWidth="4"
                           />
@@ -320,13 +322,16 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
               </>
             ) : (
               <EmptyScreen
-                Icon={Icon.FiCalendar}
+                Icon={FiCalendar}
                 headline={t("no_category_apps", {
                   category: t("calendar").toLowerCase(),
                 })}
                 description={t(`no_category_apps_description_calendar`)}
                 buttonRaw={
-                  <Button color="secondary" href="/apps/categories/calendar">
+                  <Button
+                    color="secondary"
+                    data-testid="connect-calendar-apps"
+                    href="/apps/categories/calendar">
                     {t(`connect_calendar_apps`)}
                   </Button>
                 }

apps/web/components/apps/IntegrationListItem.tsx

@@ -3,9 +3,8 @@ import { useRouter } from "next/router";
 import { ReactNode, useEffect, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui";
-import { showToast } from "@calcom/ui/v2";
-import { ListItem, ListItemText, ListItemTitle } from "@calcom/ui/v2/core/List";
+import { Badge, ListItem, ListItemText, ListItemTitle, showToast } from "@calcom/ui";
+import { FiAlertCircle } from "@calcom/ui/components/icon";
 
 import classNames from "@lib/classNames";
 
@@ -21,6 +20,7 @@ function IntegrationListItem(props: {
   destination?: boolean;
   separate?: boolean;
   invalidCredential?: boolean;
+  isTemplate?: boolean;
 }): JSX.Element {
   const { t } = useLocale();
   const router = useRouter();
@@ -46,20 +46,25 @@ function IntegrationListItem(props: {
       expanded={!!props.children}
       className={classNames(
         props.separate ? "rounded-md" : "first:rounded-t-md last:rounded-b-md",
-        "my-0 flex-col border transition-colors duration-500 ",
+        "my-0 flex-col border transition-colors duration-500",
         highlight ? "bg-yellow-100" : ""
       )}>
       <div className={classNames("flex w-full flex-1 items-center space-x-2 p-4 rtl:space-x-reverse")}>
         {props.logo && <img className="h-11 w-11" src={props.logo} alt={title} />}
         <div className="flex-grow truncate pl-2">
-          <ListItemTitle component="h3">
+          <ListItemTitle component="h3" className="flex ">
             <Link href={"/apps/" + props.slug}>{props.name || title}</Link>
+            {props.isTemplate && (
+              <Badge variant="red" className="ml-4">
+                Template
+              </Badge>
+            )}
           </ListItemTitle>
           <ListItemText component="p">{props.description}</ListItemText>
           {/* Alert error that key stopped working. */}
           {props.invalidCredential && (
-            <div className="flex items-center space-x-2">
-              <Icon.FiAlertCircle className="w-8 text-red-500 sm:w-4" />
+            <div className="flex items-center space-x-2 rtl:space-x-reverse">
+              <FiAlertCircle className="w-8 text-red-500 sm:w-4" />
               <ListItemText component="p" className="whitespace-pre-wrap text-red-500">
                 {t("invalid_credential")}
               </ListItemText>

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

@@ -0,0 +1,43 @@
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/router";
+import React, { ComponentProps } 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";
+
+type AppsLayoutProps = {
+  children: React.ReactNode;
+  actions?: (className?: string) => JSX.Element;
+  emptyStore?: boolean;
+} & Omit<ComponentProps<typeof Shell>, "actions">;
+
+export default function AppsLayout({ children, actions, emptyStore, ...rest }: AppsLayoutProps) {
+  const { t } = useLocale();
+  const session = useSession();
+  const router = useRouter();
+
+  if (session.status === "loading") return <></>;
+
+  return (
+    <Shell {...rest} actions={actions?.("block")}>
+      <div className="flex flex-col xl:flex-row">
+        <main className="w-full">
+          {emptyStore ? (
+            <EmptyScreen
+              Icon={FiAlertCircle}
+              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") : ""}
+              buttonOnClick={() => router.push("/settings/admin/apps/calendar")}
+            />
+          ) : (
+            <>{children}</>
+          )}
+        </main>
+      </div>
+    </Shell>
+  );
+}
+export const getLayout = (page: React.ReactElement) => <AppsLayout>{page}</AppsLayout>;

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

@@ -1,45 +1,42 @@
 import React, { ComponentProps } from "react";
 
+import AppCategoryNavigation from "@calcom/app-store/_components/AppCategoryNavigation";
 import { InstalledAppVariants } from "@calcom/app-store/utils";
+import Shell from "@calcom/features/shell/Shell";
 import { trpc } from "@calcom/trpc/react";
-
-import { Icon } from "../../../Icon";
-import Shell from "../Shell";
-import type { HorizontalTabItemProps } from "../navigation/tabs/HorizontalTabItem";
-import HorizontalTabs from "../navigation/tabs/HorizontalTabs";
-import type { VerticalTabItemProps } from "../navigation/tabs/VerticalTabItem";
-import VerticalTabs from "../navigation/tabs/VerticalTabs";
+import type { HorizontalTabItemProps, VerticalTabItemProps } from "@calcom/ui";
+import { FiBarChart, FiCalendar, FiCreditCard, FiGrid, FiShare2, FiVideo } from "@calcom/ui/components/icon";
 
 const tabs: (VerticalTabItemProps | HorizontalTabItemProps)[] = [
   {
     name: "calendar",
     href: "/apps/installed/calendar",
-    icon: Icon.FiCalendar,
+    icon: FiCalendar,
   },
   {
     name: "conferencing",
     href: "/apps/installed/conferencing",
-    icon: Icon.FiVideo,
+    icon: FiVideo,
   },
   {
     name: "payment",
     href: "/apps/installed/payment",
-    icon: Icon.FiCreditCard,
+    icon: FiCreditCard,
   },
   {
     name: "automation",
     href: "/apps/installed/automation",
-    icon: Icon.FiShare2,
+    icon: FiShare2,
   },
   {
     name: "analytics",
     href: "/apps/installed/analytics",
-    icon: Icon.FiBarChart,
+    icon: FiBarChart,
   },
   {
     name: "other",
     href: "/apps/installed/other",
-    icon: Icon.FiGrid,
+    icon: FiGrid,
   },
 ];
 
@@ -47,25 +44,24 @@ export default function InstalledAppsLayout({
   children,
   ...rest
 }: { children: React.ReactNode } & ComponentProps<typeof Shell>) {
+  const variant: typeof InstalledAppVariants[number] = "payment";
+
   const query = trpc.viewer.integrations.useQuery({
-    variant: InstalledAppVariants.payment,
+    variant,
     onlyInstalled: true,
   });
   let actualTabs = tabs;
   if (query.data?.items.length === 0) {
-    actualTabs = tabs.filter((tab) => tab.name !== InstalledAppVariants.payment);
+    actualTabs = tabs.filter((tab) => tab.name !== variant);
   }
+
   return (
     <Shell {...rest}>
-      <div className="flex flex-col p-2 md:p-0 xl:flex-row">
-        <div className="hidden xl:block">
-          <VerticalTabs tabs={actualTabs} sticky linkProps={{ shallow: true }} />
-        </div>
-        <div className="block xl:hidden">
-          <HorizontalTabs tabs={actualTabs} linkProps={{ shallow: true }} />
-        </div>
-        <main className="w-full xl:mx-5 xl:w-4/5 xl:pr-5">{children}</main>
-      </div>
+      <AppCategoryNavigation
+        baseURL="/apps/installed"
+        containerClassname="w-full xl:mx-5 xl:w-4/5 xl:max-w-2xl xl:pr-5">
+        {children}
+      </AppCategoryNavigation>
     </Shell>
   );
 }

apps/web/components/auth/TwoFactor.tsx

@@ -3,7 +3,7 @@ import useDigitInput from "react-digit-input";
 import { useFormContext } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Label, Input } from "@calcom/ui/form/fields";
+import { Label, Input } from "@calcom/ui";
 
 export default function TwoFactor({ center = true }) {
   const [value, onChange] = useState("");

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

@@ -2,9 +2,10 @@ import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import React, { ComponentProps, useEffect } from "react";
 
-import ErrorBoundary from "../../../ErrorBoundary";
-import Shell from "../Shell";
-import SettingsLayout from "./SettingsLayout";
+import SettingsLayout from "@calcom/features/settings/layouts/SettingsLayout";
+import Shell from "@calcom/features/shell/Shell";
+import { ErrorBoundary } from "@calcom/ui";
+
 import { UserPermissionRole } from ".prisma/client";
 
 export default function AdminLayout({
@@ -16,14 +17,14 @@ export default function AdminLayout({
 
   // Force redirect on component level
   useEffect(() => {
-    if (session.data?.user.role !== UserPermissionRole.ADMIN) {
-      router.replace("/settings");
+    if (session.data && session.data.user.role !== UserPermissionRole.ADMIN) {
+      router.replace("/settings/my-account/profile");
     }
   }, [session, router]);
 
   return (
     <SettingsLayout {...rest}>
-      <div className="mx-auto flex max-w-4xl flex-row divide-y divide-gray-200 md:px-12">
+      <div className="mx-auto flex max-w-4xl flex-row divide-y divide-gray-200">
         <div className="flex flex-1 [&>*]:flex-1">
           <ErrorBoundary>{children}</ErrorBoundary>
         </div>

apps/web/components/availability/SkeletonLoader.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 
-import { SkeletonText } from "@calcom/ui/v2";
+import { SkeletonText } from "@calcom/ui";
 
 import classNames from "@lib/classNames";
 
 function SkeletonLoader() {
   return (
-    <ul className="animate-pulse divide-y divide-neutral-200 rounded-md border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
+    <ul className="animate-pulse divide-y divide-gray-200 rounded-md border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
       <SkeletonItem />
       <SkeletonItem />
       <SkeletonItem />

apps/web/components/booking/AvailableEventLocations.tsx

@@ -1,10 +1,14 @@
 import { getEventLocationType, locationKeyToString } from "@calcom/app-store/locations";
 import { classNames } from "@calcom/lib";
-import Tooltip from "@calcom/ui/v2/core/Tooltip";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Tooltip } from "@calcom/ui";
+import { FiLink } from "@calcom/ui/components/icon";
 
 import { Props } from "./pages/AvailabilityPage";
 
 export function AvailableEventLocations({ locations }: { locations: Props["eventType"]["locations"] }) {
+  const { t } = useLocale();
+
   return locations.length ? (
     <div className="dark:text-darkgray-600 mr-6 flex w-full flex-col space-y-2 break-words text-sm text-gray-600">
       {locations.map((location) => {
@@ -15,16 +19,20 @@ export function AvailableEventLocations({ locations }: { locations: Props["event
         }
         return (
           <div key={location.type} className="flex flex-row items-center text-sm font-medium">
-            <img
-              src={eventLocationType.iconUrl}
-              className={classNames(
-                "mr-[10px] ml-[2px] h-4 w-4 opacity-70 dark:opacity-100 ",
-                !eventLocationType.iconUrl?.includes("api") ? "dark:invert" : ""
-              )}
-              alt={`${eventLocationType.label} icon`}
-            />
-            <Tooltip content={locationKeyToString(location)}>
-              <p className="truncate">{locationKeyToString(location)}</p>
+            {eventLocationType.iconUrl === "/link.svg" ? (
+              <FiLink className="dark:text-darkgray-600 ml-[2px] h-4 w-4 opacity-70 ltr:mr-[10px] rtl:ml-[10px] dark:opacity-100 " />
+            ) : (
+              <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" : ""
+                )}
+                alt={`${eventLocationType.label} icon`}
+              />
+            )}
+            <Tooltip content={t(locationKeyToString(location) ?? "")}>
+              <p className="truncate">{t(locationKeyToString(location) ?? "")}</p>
             </Tooltip>
           </div>
         );

apps/web/components/booking/AvailableTimes.tsx

@@ -7,8 +7,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { TimeFormat } from "@calcom/lib/timeFormat";
 import { nameOfDay } from "@calcom/lib/weekday";
 import type { Slot } from "@calcom/trpc/server/routers/viewer/slots";
-import { SkeletonContainer, SkeletonText } from "@calcom/ui/v2";
-import { ToggleGroup } from "@calcom/ui/v2/core/form/ToggleGroup";
+import { SkeletonContainer, SkeletonText, ToggleGroup } from "@calcom/ui";
 
 import classNames from "@lib/classNames";
 import { timeZone } from "@lib/clock";
@@ -58,7 +57,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
             {nameOfDay(i18n.language, Number(date.format("d")), "short")}
           </span>
           <span className="text-bookinglight font-medium">
-            , {date.toDate().toLocaleString(i18n.language, { month: "long" })} {date.format(" D ")}
+            , {date.toDate().toLocaleString(i18n.language, { month: "short" })} {date.format(" D ")}
           </span>
         </div>
         <div className="ml-auto">
@@ -72,7 +71,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
           />
         </div>
       </div>
-      <div className="-mb-5 grid flex-grow grid-cols-1 gap-x-2 overflow-y-auto sm:block md:h-[364px]">
+      <div className="flex-grow overflow-y-auto sm:block md:h-[364px]">
         {slots.length > 0 &&
           slots.map((slot) => {
             type BookingURL = {
@@ -88,7 +87,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                 slug: eventTypeSlug,
                 /** Treat as recurring only when a count exist and it's not a rescheduling workflow */
                 count: recurringCount && !rescheduleUid ? recurringCount : undefined,
-                ethSignature,
+                ...(ethSignature ? { ethSignature } : {}),
               },
             };
 
@@ -102,7 +101,8 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
             }
 
             return (
-              <div key={dayjs(slot.time).format()}>
+              <div data-slot-owner={(slot.userIds || []).join(",")} key={`${dayjs(slot.time).format()}`}>
+                {/* ^ data-slot-owner is helpful in debugging and used to identify the owners of the slot. Owners are the users which have the timeslot in their schedule. It doesn't consider if a user has that timeslot booked */}
                 {/* Current there is no way to disable Next.js Links */}
                 {seatsPerTimeSlot && slot.attendees && slot.attendees >= seatsPerTimeSlot ? (
                   <div
@@ -114,29 +114,29 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                     {!!seatsPerTimeSlot && <p className="text-sm">{t("booking_full")}</p>}
                   </div>
                 ) : (
-                  <Link href={bookingUrl} prefetch={false}>
-                    <a
-                      className={classNames(
-                        "text-primary-500 hover:border-gray-900 hover:bg-gray-50",
-                        "dark:bg-darkgray-200 dark:hover:bg-darkgray-300 dark:hover:border-darkmodebrand mb-2 block rounded-md border bg-white py-2 text-sm font-medium dark:border-transparent dark:text-neutral-200",
-                        brand === "#fff" || brand === "#ffffff" ? "" : ""
-                      )}
-                      data-testid="time">
-                      {dayjs(slot.time).tz(timeZone()).format(timeFormat)}
-                      {!!seatsPerTimeSlot && (
-                        <p
-                          className={`${
-                            slot.attendees && slot.attendees / seatsPerTimeSlot >= 0.8
-                              ? "text-rose-600"
-                              : slot.attendees && slot.attendees / seatsPerTimeSlot >= 0.33
-                              ? "text-yellow-500"
-                              : "text-emerald-400"
-                          } text-sm`}>
-                          {slot.attendees ? seatsPerTimeSlot - slot.attendees : seatsPerTimeSlot} /{" "}
-                          {seatsPerTimeSlot} {t("seats_available")}
-                        </p>
-                      )}
-                    </a>
+                  <Link
+                    href={bookingUrl}
+                    prefetch={false}
+                    className={classNames(
+                      "text-primary-500 hover:border-gray-900 hover:bg-gray-50",
+                      "dark:bg-darkgray-200 dark:hover:bg-darkgray-300 dark:hover:border-darkmodebrand dark:text-darkgray-800 mb-2 block rounded-md border bg-white py-2 text-sm font-medium dark:border-transparent",
+                      brand === "#fff" || brand === "#ffffff" ? "" : ""
+                    )}
+                    data-testid="time">
+                    {dayjs(slot.time).tz(timeZone()).format(timeFormat)}
+                    {!!seatsPerTimeSlot && (
+                      <p
+                        className={`${
+                          slot.attendees && slot.attendees / seatsPerTimeSlot >= 0.8
+                            ? "text-rose-600"
+                            : slot.attendees && slot.attendees / seatsPerTimeSlot >= 0.33
+                            ? "text-yellow-500"
+                            : "text-emerald-400"
+                        } text-sm`}>
+                        {slot.attendees ? seatsPerTimeSlot - slot.attendees : seatsPerTimeSlot} /{" "}
+                        {seatsPerTimeSlot} {t("seats_available")}
+                      </p>
+                    )}
                   </Link>
                 )}
               </div>

apps/web/components/booking/BookingDescription.tsx

@@ -1,9 +1,13 @@
 import { SchedulingType } from "@prisma/client";
-import { FC, ReactNode } from "react";
+import { FC, ReactNode, useEffect } from "react";
 
+import dayjs from "@calcom/dayjs";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/Icon";
+import { Badge } from "@calcom/ui";
+import { FiCheckSquare, FiClock, FiInfo } from "@calcom/ui/components/icon";
+
+import useRouterQuery from "@lib/hooks/useRouterQuery";
 
 import { UserAvatars } from "@components/booking/UserAvatars";
 import EventTypeDescriptionSafeHTML from "@components/eventtype/EventTypeDescriptionSafeHTML";
@@ -39,14 +43,41 @@ interface Props {
 
 const BookingDescription: FC<Props> = (props) => {
   const { profile, eventType, isBookingPage = false, children } = props;
+  const { date: bookingDate } = useRouterQuery("date");
   const { t } = useLocale();
+  const { duration = eventType.length.toString(), setQuery: setDuration } = useRouterQuery("duration");
+
+  useEffect(() => {
+    if (
+      eventType.metadata?.multipleDuration &&
+      !eventType.metadata?.multipleDuration?.includes(Number(duration))
+    ) {
+      setDuration(eventType.length.toString());
+    }
+  }, [duration, setDuration, eventType.length, eventType.metadata?.multipleDuration]);
+
+  let requiresConfirmation = eventType?.requiresConfirmation;
+  let requiresConfirmationText = t("requires_confirmation");
+  const rcThreshold = eventType?.metadata?.requiresConfirmationThreshold;
+  if (rcThreshold) {
+    if (isBookingPage) {
+      if (dayjs(bookingDate).diff(dayjs(), rcThreshold.unit) > rcThreshold.time) {
+        requiresConfirmation = false;
+      }
+    } else {
+      requiresConfirmationText = t("requires_confirmation_threshold", {
+        ...rcThreshold,
+        unit: rcThreshold.unit.slice(0, -1),
+      });
+    }
+  }
   return (
     <>
       <UserAvatars
         profile={profile}
         users={eventType.users}
         showMembers={eventType.schedulingType !== SchedulingType.ROUND_ROBIN}
-        size={10}
+        size="sm"
         truncateAfter={3}
       />
       <h2 className="mt-2 break-words text-sm font-medium text-gray-600 dark:text-gray-300">
@@ -55,7 +86,7 @@ const BookingDescription: FC<Props> = (props) => {
       <h1 className="font-cal dark:text-darkgray-900 mb-6 break-words text-2xl font-semibold text-gray-900">
         {eventType.title}
       </h1>
-      <div className="dark:text-darkgray-600 flex flex-col space-y-3 text-sm font-medium text-gray-600">
+      <div className="dark:text-darkgray-600 flex flex-col space-y-4 text-sm font-medium text-gray-600">
         {eventType?.description && (
           <div
             className={classNames(
@@ -63,9 +94,9 @@ const BookingDescription: FC<Props> = (props) => {
               isBookingPage && "dark:text-darkgray-600 text-sm font-medium text-gray-600"
             )}>
             <div>
-              <Icon.FiInfo
+              <FiInfo
                 className={classNames(
-                  "mr-[10px] ml-[2px] inline-block h-4 w-4",
+                  "ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]",
                   isBookingPage && "dark:text-darkgray-600 -mt-1 text-gray-500"
                 )}
               />
@@ -75,29 +106,62 @@ const BookingDescription: FC<Props> = (props) => {
             </div>
           </div>
         )}
-        {eventType?.requiresConfirmation && (
+        {requiresConfirmation && (
           <div
             className={classNames(
-              "flex items-center",
+              "items-top flex",
               isBookingPage && "dark:text-darkgray-600 text-sm font-medium text-gray-600"
             )}>
             <div>
-              <Icon.FiCheckSquare className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 " />
+              <FiCheckSquare className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
             </div>
-            {t("requires_confirmation")}
+            {requiresConfirmationText}
           </div>
         )}
         <AvailableEventLocations
           locations={eventType.locations as AvailabilityPageProps["eventType"]["locations"]}
         />
-        <p
+        <div
           className={classNames(
-            "text-sm font-medium",
-            isBookingPage && "dark:text-darkgray-600 text-gray-600"
+            "flex flex-nowrap text-sm font-medium",
+            isBookingPage && "dark:text-darkgray-600 text-gray-600",
+            !eventType.metadata?.multipleDuration && "items-center"
           )}>
-          <Icon.FiClock className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4" />
-          {eventType.length} {t("minutes")}
-        </p>
+          <FiClock
+            className={classNames(
+              "min-h-4 min-w-4 ml-[2px] inline-block ltr:mr-[10px] rtl:ml-[10px]",
+              isBookingPage && "mt-[2px]"
+            )}
+          />
+          {eventType.metadata?.multipleDuration !== undefined ? (
+            !isBookingPage ? (
+              <ul className="-mt-1 flex flex-wrap gap-1">
+                {eventType.metadata.multipleDuration.map((dur, idx) => (
+                  <li key={idx}>
+                    <Badge
+                      variant="gray"
+                      size="lg"
+                      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-gray-200 text-gray-900 dark:text-white",
+                        "cursor-pointer"
+                      )}
+                      onClick={() => {
+                        setDuration(dur);
+                      }}>
+                      {dur} {t("minute_timeUnit")}
+                    </Badge>
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              `${duration} ${t("minutes")}`
+            )
+          ) : (
+            `${eventType.length} ${t("minutes")}`
+          )}
+        </div>
         {children}
       </div>
     </>

apps/web/components/booking/BookingListItem.tsx

@@ -1,30 +1,38 @@
 import { BookingStatus } from "@prisma/client";
 import { useRouter } from "next/router";
-import { useState, useMemo } from "react";
+import { useState } from "react";
 
 import { EventLocationType, getEventLocationType } from "@calcom/app-store/locations";
 import dayjs from "@calcom/dayjs";
+import ViewRecordingsDialog from "@calcom/features/ee/video/ViewRecordingsDialog";
 import classNames from "@calcom/lib/classNames";
 import { formatTime } from "@calcom/lib/date-fns";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { RouterInputs, RouterOutputs, trpc } from "@calcom/trpc/react";
-import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
-import { Icon } from "@calcom/ui/Icon";
-import { Badge } from "@calcom/ui/components/badge";
-import { Button } from "@calcom/ui/components/button";
-import { TextArea } from "@calcom/ui/form/fields";
-import MeetingTimeInTimezones from "@calcom/ui/v2/core/MeetingTimeInTimezones";
-import Tooltip from "@calcom/ui/v2/core/Tooltip";
-import showToast from "@calcom/ui/v2/core/notifications";
+import {
+  Badge,
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  MeetingTimeInTimezones,
+  showToast,
+  TextArea,
+  Tooltip,
+  ActionType,
+  TableActions,
+} from "@calcom/ui";
+import { FiCheck, FiClock, FiMapPin, FiRefreshCcw, FiSend, FiSlash, FiX } from "@calcom/ui/components/icon";
 
 import useMeQuery from "@lib/hooks/useMeQuery";
 
 import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
 import { RescheduleDialog } from "@components/dialog/RescheduleDialog";
-import TableActions, { ActionType } from "@components/ui/TableActions";
 
-type BookingListingStatus = RouterInputs["viewer"]["bookings"]["get"]["status"];
+type BookingListingStatus = RouterInputs["viewer"]["bookings"]["get"]["filters"]["status"];
 
 type BookingItem = RouterOutputs["viewer"]["bookings"]["get"]["bookings"][number];
 
@@ -42,6 +50,7 @@ function BookingListItem(booking: BookingItemProps) {
   const router = useRouter();
   const [rejectionReason, setRejectionReason] = useState<string>("");
   const [rejectionDialogIsOpen, setRejectionDialogIsOpen] = useState(false);
+  const [viewRecordingsDialogIsOpen, setViewRecordingsDialogIsOpen] = useState<boolean>(false);
   const mutation = trpc.viewer.bookings.confirm.useMutation({
     onSuccess: (data) => {
       if (data.status === BookingStatus.REJECTED) {
@@ -91,7 +100,7 @@ function BookingListItem(booking: BookingItemProps) {
       onClick: () => {
         setRejectionDialogIsOpen(true);
       },
-      icon: Icon.FiSlash,
+      icon: FiSlash,
       disabled: mutation.isLoading,
     },
     {
@@ -100,22 +109,33 @@ function BookingListItem(booking: BookingItemProps) {
       onClick: () => {
         bookingConfirm(true);
       },
-      icon: Icon.FiCheck,
+      icon: FiCheck,
       disabled: mutation.isLoading,
       color: "primary",
     },
   ];
 
+  const showRecordingActions: ActionType[] = [
+    {
+      id: "view_recordings",
+      label: t("view_recordings"),
+      onClick: () => {
+        setViewRecordingsDialogIsOpen(true);
+      },
+      disabled: mutation.isLoading,
+    },
+  ];
+
   let bookedActions: ActionType[] = [
     {
       id: "cancel",
       label: isTabRecurring && isRecurring ? t("cancel_all_remaining") : t("cancel"),
       /* When cancelling we need to let the UI and the API know if the intention is to
          cancel all remaining bookings or just that booking instance. */
-      href: `/success?uid=${booking.uid}&cancel=true${
+      href: `/booking/${booking.uid}?cancel=true${
         isTabRecurring && isRecurring ? "&allRemainingBookings=true" : ""
       }`,
-      icon: Icon.FiX,
+      icon: FiX,
     },
     {
       id: "edit_booking",
@@ -123,13 +143,13 @@ function BookingListItem(booking: BookingItemProps) {
       actions: [
         {
           id: "reschedule",
-          icon: Icon.FiClock,
+          icon: FiClock,
           label: t("reschedule_booking"),
           href: `/reschedule/${booking.uid}`,
         },
         {
           id: "reschedule_request",
-          icon: Icon.FiSend,
+          icon: FiSend,
           iconClassName: "rotate-45 w-[16px] -translate-x-0.5 ",
           label: t("send_reschedule_request"),
           onClick: () => {
@@ -142,7 +162,7 @@ function BookingListItem(booking: BookingItemProps) {
           onClick: () => {
             setIsOpenLocationDialog(true);
           },
-          icon: Icon.FiMapPin,
+          icon: FiMapPin,
         },
       ],
     },
@@ -152,10 +172,14 @@ function BookingListItem(booking: BookingItemProps) {
     bookedActions = bookedActions.filter((action) => action.id !== "edit_booking");
   }
 
+  if (isPast && isPending && !isConfirmed) {
+    bookedActions = bookedActions.filter((action) => action.id !== "cancel");
+  }
+
   const RequestSentMessage = () => {
     return (
       <div className="ml-1 mr-8 flex text-gray-500" data-testid="request_reschedule_sent">
-        <Icon.FiSend className="-mt-[1px] w-4 rotate-45" />
+        <FiSend className="-mt-[1px] w-4 rotate-45" />
         <p className="ml-2 ">{t("reschedule_request_sent")}</p>
       </div>
     );
@@ -189,16 +213,15 @@ function BookingListItem(booking: BookingItemProps) {
 
   const onClickTableData = () => {
     router.push({
-      pathname: "/success",
+      pathname: `/booking/${booking.uid}`,
       query: {
-        uid: booking.uid,
         allRemainingBookings: isTabRecurring,
-        listingStatus: booking.listingStatus,
         email: booking.attendees[0] ? booking.attendees[0].email : undefined,
       },
     });
   };
-
+  const showRecordingsButtons =
+    (booking.location === "integrations:daily" || booking?.location?.trim() === "") && isPast && isConfirmed;
   return (
     <>
       <RescheduleDialog
@@ -212,7 +235,14 @@ function BookingListItem(booking: BookingItemProps) {
         isOpenDialog={isOpenSetLocationDialog}
         setShowLocationModal={setIsOpenLocationDialog}
       />
-
+      {showRecordingsButtons && (
+        <ViewRecordingsDialog
+          booking={booking}
+          isOpenDialog={viewRecordingsDialogIsOpen}
+          setIsOpenDialog={setViewRecordingsDialogIsOpen}
+          timeFormat={user?.timeFormat ?? null}
+        />
+      )}
       {/* NOTE: Should refactor this dialog component as is being rendered multiple times */}
       <Dialog open={rejectionDialogIsOpen} onOpenChange={setRejectionDialogIsOpen}>
         <DialogContent>
@@ -231,9 +261,7 @@ function BookingListItem(booking: BookingItemProps) {
           />
 
           <DialogFooter>
-            <DialogClose>
-              <Button color="secondary">{t("cancel")}</Button>
-            </DialogClose>
+            <DialogClose />
 
             <Button
               disabled={mutation.isLoading}
@@ -246,7 +274,7 @@ function BookingListItem(booking: BookingItemProps) {
         </DialogContent>
       </Dialog>
 
-      <tr className="flex flex-col hover:bg-neutral-50 sm:flex-row">
+      <tr className="group flex flex-col hover:bg-gray-50 sm:flex-row">
         <td
           className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:min-w-[12rem]"
           onClick={onClickTableData}>
@@ -273,9 +301,9 @@ function BookingListItem(booking: BookingItemProps) {
                 {booking.eventType.team.name}
               </Badge>
             )}
-            {!!booking?.eventType?.price && !booking.paid && (
-              <Badge className="ltr:mr-2 rtl:ml-2" variant="orange">
-                {t("pending_payment")}
+            {booking.paid && (
+              <Badge className="ltr:mr-2 rtl:ml-2" variant="green">
+                {t("paid")}
               </Badge>
             )}
             {recurringDates !== undefined && (
@@ -329,19 +357,21 @@ function BookingListItem(booking: BookingItemProps) {
             <div
               title={booking.title}
               className={classNames(
-                "max-w-10/12 sm:max-w-56 text-sm font-medium leading-6 text-neutral-900 md:max-w-full",
+                "max-w-10/12 sm:max-w-56 text-sm font-medium leading-6 text-gray-900 md:max-w-full",
                 isCancelled ? "line-through" : ""
               )}>
               {booking.title}
               <span> </span>
 
               {!!booking?.eventType?.price && !booking.paid && (
-                <Tag className="hidden ltr:ml-2 rtl:mr-2 sm:inline-flex">Pending payment</Tag>
+                <Badge className="hidden ltr:ml-2 ltr:mr-2 rtl:ml-2 sm:inline-flex" variant="orange">
+                  {t("pending_payment")}
+                </Badge>
               )}
             </div>
             {booking.description && (
               <div
-                className="max-w-10/12 sm:max-w-40 md:max-w-56 xl:max-w-80 lg:max-w-64 truncate text-sm text-gray-600"
+                className="max-w-10/12 sm:max-w-32 md:max-w-52 xl:max-w-80 truncate text-sm text-gray-600"
                 title={booking.description}>
                 &quot;{booking.description}&quot;
               </div>
@@ -369,6 +399,7 @@ function BookingListItem(booking: BookingItemProps) {
             </>
           ) : null}
           {isPast && isPending && !isConfirmed ? <TableActions actions={bookedActions} /> : null}
+          {showRecordingsButtons && <TableActions actions={showRecordingActions} />}
           {isCancelled && booking.rescheduled && (
             <div className="hidden h-full items-center md:flex">
               <RequestSentMessage />
@@ -424,7 +455,7 @@ const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookings
                 );
               })}>
               <div className="text-gray-600 dark:text-white">
-                <Icon.FiRefreshCcw
+                <FiRefreshCcw
                   strokeWidth="3"
                   className="float-left mr-1 mt-1.5 inline-block h-3 w-3 text-gray-400"
                 />
@@ -524,13 +555,4 @@ const DisplayAttendees = ({
   );
 };
 
-const Tag = ({ children, className = "" }: React.PropsWithChildren<{ className?: string }>) => {
-  return (
-    <span
-      className={`inline-flex items-center rounded-sm bg-yellow-100 px-1.5 py-0.5 text-xs font-medium text-yellow-800 ${className}`}>
-      {children}
-    </span>
-  );
-};
-
 export default BookingListItem;

apps/web/components/booking/CancelBooking.tsx

@@ -5,8 +5,8 @@ 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 { Icon } from "@calcom/ui/Icon";
-import { Button, TextArea } from "@calcom/ui/components";
+import { Button, TextArea } from "@calcom/ui";
+import { FiX } from "@calcom/ui/components/icon";
 
 type Props = {
   booking: {
@@ -38,9 +38,9 @@ export default function CancelBooking(props: Props) {
   return (
     <>
       {error && (
-        <div>
+        <div className="mt-8">
           <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
-            <Icon.FiX className="h-6 w-6 text-red-600" />
+            <FiX className="h-6 w-6 text-red-600" />
           </div>
           <div className="mt-3 text-center sm:mt-5">
             <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
@@ -56,7 +56,7 @@ export default function CancelBooking(props: Props) {
             placeholder={t("cancellation_reason_placeholder")}
             value={cancellationReason}
             onChange={(e) => setCancellationReason(e.target.value)}
-            className="mt-2 mb-4 w-full dark:border-gray-900 dark:bg-gray-700 dark:text-white "
+            className="dark:bg-darkgray-100 dark:border-darkgray-400 mt-2 mb-4 w-full dark:text-white "
             rows={3}
           />
           <div className="flex flex-col-reverse rtl:space-x-reverse ">
@@ -90,11 +90,7 @@ export default function CancelBooking(props: Props) {
                   });
 
                   if (res.status >= 200 && res.status < 300) {
-                    await router.push(
-                      `/cancel/success?name=${props.profile.name}&title=${booking?.title}&eventPage=${
-                        profile.slug
-                      }&team=${team ? 1 : 0}&allRemainingBookings=${allRemainingBookings}`
-                    );
+                    await router.replace(router.asPath);
                   } else {
                     setLoading(false);
                     setError(

apps/web/components/booking/SkeletonLoader.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 
-import { SkeletonText } from "@calcom/ui/v2";
+import { SkeletonText } from "@calcom/ui";
 
 function SkeletonLoader() {
   return (
-    <ul className="animate-pulse divide-y divide-neutral-200 rounded-md border border-gray-200 bg-white sm:overflow-hidden">
+    <ul className="animate-pulse divide-y divide-gray-200 rounded-md border border-gray-200 bg-white sm:overflow-hidden">
       <SkeletonItem />
       <SkeletonItem />
       <SkeletonItem />

apps/web/components/booking/TimeOptions.tsx

@@ -1,7 +1,7 @@
 import { FC, useEffect, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import TimezoneSelect, { ITimezoneOption } from "@calcom/ui/v2/core/TimezoneSelect";
+import { ITimezoneOption, TimezoneSelect } from "@calcom/ui";
 
 import { timeZone } from "../../lib/clock";
 

apps/web/components/booking/UserAvatars.tsx

@@ -1,33 +1,42 @@
 import { CAL_URL } from "@calcom/lib/constants";
-
-import AvatarGroup, { AvatarGroupProps } from "@components/ui/AvatarGroup";
+import { AvatarGroup, AvatarGroupProps } from "@calcom/ui";
 
 export const UserAvatars = ({
   profile,
   users,
   ...props
 }: {
-  profile: { image: string | null; name?: string | null };
+  profile: { image: string | null; name?: string | null; username?: string | null };
   showMembers: boolean;
   users: { username: string | null; name?: string | null }[];
 } & Pick<AvatarGroupProps, "size" | "truncateAfter">) => {
   const showMembers = !users.find((user) => user.name === profile.name) && props.showMembers;
   return (
     <AvatarGroup
-      border="border-2 dark:border-darkgray-100 border-white"
       items={
         [
-          { image: profile.image, alt: profile.name, title: profile.name },
+          {
+            image: profile.image,
+            alt: profile.name,
+            title: profile.name,
+            href: profile.username ? `${CAL_URL}/${profile.username}` : undefined,
+          },
           ...(showMembers
             ? users.map((user) => ({
                 title: user.name,
                 image: `${CAL_URL}/${user.username}/avatar.png`,
                 alt: user.name || undefined,
+                href: user.username ? `${CAL_URL}/${user.username}` : undefined,
               }))
             : []),
-        ].filter((item) => !!item.image) as { image: string; alt?: string; title?: string }[]
+        ].filter((item) => !!item.image) as {
+          image: string;
+          alt?: string;
+          title?: string;
+          href?: string;
+        }[]
       }
-      size={props.size}
+      size="sm"
       truncateAfter={props.truncateAfter}
     />
   );

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

@@ -1,7 +1,6 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { EventType } from "@prisma/client";
 import * as Popover from "@radix-ui/react-popover";
-import { TFunction } from "next-i18next";
 import { useRouter } from "next/router";
 import { useReducer, useEffect, useMemo, useState } from "react";
 import { Toaster } from "react-hot-toast";
@@ -14,12 +13,13 @@ import dayjs, { Dayjs } from "@calcom/dayjs";
 import {
   useEmbedNonStylesConfig,
   useEmbedStyles,
+  useEmbedUiConfig,
   useIsBackgroundTransparent,
   useIsEmbed,
 } from "@calcom/embed-core/embed-iframe";
+import DatePicker from "@calcom/features/calendars/DatePicker";
 import CustomBranding from "@calcom/lib/CustomBranding";
 import classNames from "@calcom/lib/classNames";
-import { WEBSITE_URL } from "@calcom/lib/constants";
 import getStripeAppData from "@calcom/lib/getStripeAppData";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
@@ -28,42 +28,22 @@ 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/react";
-import { Icon } from "@calcom/ui/Icon";
-import DatePicker from "@calcom/ui/v2/modules/booker/DatePicker";
+import { HeadSeo } from "@calcom/ui";
+import { FiChevronDown, FiChevronUp, FiCreditCard, FiGlobe, FiRefreshCcw } from "@calcom/ui/components/icon";
 
 import { timeZone as localStorageTimeZone } from "@lib/clock";
-// import { timeZone } from "@lib/clock";
-import { useExposePlanGlobally } from "@lib/hooks/useExposePlanGlobally";
-import { isBrandingHidden } from "@lib/isBrandingHidden";
+import useRouterQuery from "@lib/hooks/useRouterQuery";
 
 import Gates, { Gate, GateState } from "@components/Gates";
 import AvailableTimes from "@components/booking/AvailableTimes";
 import BookingDescription from "@components/booking/BookingDescription";
 import TimeOptions from "@components/booking/TimeOptions";
-import { HeadSeo } from "@components/seo/head-seo";
 import PoweredByCal from "@components/ui/PoweredByCal";
 
 import type { AvailabilityPageProps } from "../../../pages/[user]/[type]";
 import type { DynamicAvailabilityPageProps } from "../../../pages/d/[link]/[slug]";
 import type { AvailabilityTeamPageProps } from "../../../pages/team/[slug]/[type]";
 
-// Get router variables
-const GoBackToPreviousPage = ({ t }: { t: TFunction }) => {
-  const router = useRouter();
-  const path = router.asPath.split("/");
-  path.pop(); // Remove the last item (where we currently are)
-  path.shift(); // Removes first item e.g. if we were visitng "/teams/test/30mins" the array will new look like ["teams","test"]
-  const slug = path.join("/");
-  return (
-    <div className="flex h-full flex-col justify-end">
-      <button title={t("profile")} onClick={() => router.replace(`${WEBSITE_URL}/${slug}`)}>
-        <Icon.FiArrowLeft className="dark:text-darkgray-600 h-4 w-4 text-black transition-opacity hover:cursor-pointer" />
-        <p className="sr-only">Go Back</p>
-      </button>
-    </div>
-  );
-};
-
 const useSlots = ({
   eventTypeId,
   eventTypeSlug,
@@ -71,6 +51,7 @@ const useSlots = ({
   endTime,
   usernameList,
   timeZone,
+  duration,
 }: {
   eventTypeId: number;
   eventTypeSlug: string;
@@ -78,6 +59,7 @@ const useSlots = ({
   endTime?: Dayjs;
   usernameList: string[];
   timeZone?: string;
+  duration?: string;
 }) => {
   const { data, isLoading, isPaused } = trpc.viewer.public.slots.getSchedule.useQuery(
     {
@@ -87,6 +69,7 @@ const useSlots = ({
       startTime: startTime?.toISOString() || "",
       endTime: endTime?.toISOString() || "",
       timeZone,
+      duration,
     },
     {
       enabled: !!startTime && !!endTime,
@@ -127,6 +110,7 @@ const SlotPicker = ({
 }) => {
   const [selectedDate, setSelectedDate] = useState<Dayjs>();
   const [browsingDate, setBrowsingDate] = useState<Dayjs>();
+  const { duration } = useRouterQuery("duration");
   const { date, setQuery: setDate } = useRouterQuery("date");
   const { month, setQuery: setMonth } = useRouterQuery("month");
   const router = useRouter();
@@ -152,7 +136,7 @@ const SlotPicker = ({
         setSelectedDate(dayjs.tz(date, timeZone));
       }
     }
-  }, [router.isReady, month, date, timeZone]);
+  }, [router.isReady, month, date, duration, timeZone]);
 
   const { i18n, isLocaleReady } = useLocale();
   const { slots: _1 } = useSlots({
@@ -162,14 +146,19 @@ const SlotPicker = ({
     startTime: selectedDate?.startOf("day"),
     endTime: selectedDate?.endOf("day"),
     timeZone,
+    duration,
   });
   const { slots: _2, isLoading } = useSlots({
     eventTypeId: eventType.id,
     eventTypeSlug: eventType.slug,
     usernameList: users,
-    startTime: browsingDate?.startOf("month"),
+    startTime:
+      browsingDate === undefined || browsingDate.get("month") === dayjs.tz(undefined, timeZone).get("month")
+        ? dayjs.tz(undefined, timeZone).subtract(2, "days").startOf("day")
+        : browsingDate?.startOf("month"),
     endTime: browsingDate?.endOf("month"),
     timeZone,
+    duration,
   });
 
   const slots = useMemo(() => ({ ..._2, ..._1 }), [_1, _2]);
@@ -230,14 +219,14 @@ function TimezoneDropdown({
 
   return (
     <Popover.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}>
-      <Popover.Trigger className="min-w-32 dark:text-darkgray-600 radix-state-open:bg-gray-200 dark:radix-state-open:bg-darkgray-200 group relative mb-2 -ml-2 inline-block rounded-md px-2 py-2 text-left text-gray-600">
-        <p className="text-sm font-medium">
-          <Icon.FiGlobe className="mr-[10px] ml-[2px] -mt-[2px] inline-block h-4 w-4" />
+      <Popover.Trigger className="min-w-32 dark:text-darkgray-600 radix-state-open:bg-gray-200 dark:radix-state-open:bg-darkgray-200 group relative mb-2 -ml-2 !mt-2 inline-block self-start rounded-md px-2 py-2 text-left text-gray-600">
+        <p className="flex items-center text-sm font-medium">
+          <FiGlobe className="min-h-4 min-w-4 ml-[2px] -mt-[2px] inline-block ltr:mr-[10px] rtl:ml-[10px]" />
           {timeZone}
           {isTimeOptionsOpen ? (
-            <Icon.FiChevronUp className="ml-1 inline-block h-4 w-4" />
+            <FiChevronUp className="min-h-4 min-w-4 ml-1 inline-block" />
           ) : (
-            <Icon.FiChevronDown className="ml-1 inline-block h-4 w-4" />
+            <FiChevronDown className="min-h-4 min-w-4 ml-1 inline-block" />
           )}
         </p>
       </Popover.Trigger>
@@ -259,23 +248,6 @@ const dateQuerySchema = z.object({
   timeZone: z.string().optional().default(""),
 });
 
-const useRouterQuery = <T extends string>(name: T) => {
-  const router = useRouter();
-  const existingQueryParams = router.asPath.split("?")[1];
-
-  const urlParams = new URLSearchParams(existingQueryParams);
-  const query = Object.fromEntries(urlParams);
-
-  const setQuery = (newValue: string | number | null | undefined) => {
-    router.replace({ query: { ...router.query, [name]: newValue } }, undefined, { shallow: true });
-    router.replace({ query: { ...router.query, ...query, [name]: newValue } }, undefined, { shallow: true });
-  };
-
-  return { [name]: query[name], setQuery } as {
-    [K in T]: string | undefined;
-  } & { setQuery: typeof setQuery };
-};
-
 export type Props = AvailabilityTeamPageProps | AvailabilityPageProps | DynamicAvailabilityPageProps;
 
 const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
@@ -286,6 +258,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
   useTheme(profile.theme);
   const { t } = useLocale();
   const availabilityDatePickerEmbedStyles = useEmbedStyles("availabilityDatePicker");
+  //TODO: Plan to remove shouldAlignCentrallyInEmbed config
   const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
   const shouldAlignCentrally = !isEmbed || shouldAlignCentrallyInEmbed;
   const isBackgroundTransparent = useIsBackgroundTransparent();
@@ -310,9 +283,6 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
     setTimeZone(localStorageTimeZone() || dayjs.tz.guess());
   }, []);
 
-  // TODO: Improve this;
-  useExposePlanGlobally(eventType.users.length === 1 ? eventType.users[0].plan : "PRO");
-
   const [recurringEventCount, setRecurringEventCount] = useState(eventType.recurringEvent?.count);
 
   const telemetry = useTelemetry();
@@ -325,7 +295,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
       );
     }
   }, [telemetry]);
-
+  const embedUiConfig = useEmbedUiConfig();
   // get dynamic user list here
   const userList = eventType.users ? eventType.users.map((user) => user.username).filter(notEmpty) : [];
 
@@ -338,6 +308,8 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
   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.
 
+  const showEventTypeDetails = (isEmbed && !embedUiConfig.hideEventTypeDetails) || !isEmbed;
+
   // Define conditional gates here
   const gates = [
     // Rainbow gate is only added if the event has both a `blockchainId` and a `smartContractAddress`
@@ -371,7 +343,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
       <div>
         <main
           className={classNames(
-            "flex-col md:mx-4 lg:flex",
+            "flex flex-col md:mx-4",
             shouldAlignCentrally ? "items-center" : "items-start",
             !isEmbed && classNames("mx-auto my-0 ease-in-out md:my-24")
           )}>
@@ -386,60 +358,55 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                 isEmbed && "mx-auto"
               )}>
               <div className="overflow-hidden md:flex">
-                <div
-                  className={classNames(
-                    "sm:dark:border-darkgray-200 flex flex-col border-gray-200 p-5 sm:border-r",
-                    "min-w-full md:w-[230px] md:min-w-[230px]",
-                    recurringEventCount && "xl:w-[380px] xl:min-w-[380px]"
-                  )}>
-                  <BookingDescription profile={profile} eventType={eventType} rescheduleUid={rescheduleUid}>
-                    {!rescheduleUid && eventType.recurringEvent && (
-                      <div className="flex items-start text-sm font-medium">
-                        <Icon.FiRefreshCcw className="float-left mr-[10px] mt-[7px] ml-[2px] inline-block h-4 w-4 " />
-                        <div>
-                          <p className="mb-1 -ml-2 inline px-2 py-1">
-                            {getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
-                          </p>
-                          <input
-                            type="number"
-                            min="1"
-                            max={eventType.recurringEvent.count}
-                            className="w-15 dark:bg-darkgray-200 h-7 rounded-sm border-gray-300 bg-white text-sm font-medium [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500"
-                            defaultValue={eventType.recurringEvent.count}
-                            onChange={(event) => {
-                              setRecurringEventCount(parseInt(event?.target.value));
-                            }}
-                          />
-                          <p className="inline">
-                            {t("occurrence", {
-                              count: recurringEventCount,
-                            })}
-                          </p>
+                {showEventTypeDetails && (
+                  <div
+                    className={classNames(
+                      "sm:dark:border-darkgray-200 flex flex-col border-gray-200 p-5 sm:border-r",
+                      "min-w-full md:w-[230px] md:min-w-[230px]",
+                      recurringEventCount && "xl:w-[380px] xl:min-w-[380px]"
+                    )}>
+                    <BookingDescription profile={profile} eventType={eventType} rescheduleUid={rescheduleUid}>
+                      {!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] " />
+                          <div>
+                            <p className="mb-1 -ml-2 inline px-2 py-1">
+                              {getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
+                            </p>
+                            <input
+                              type="number"
+                              min="1"
+                              max={eventType.recurringEvent.count}
+                              className="w-15 dark:bg-darkgray-200 h-7 rounded-sm border-gray-300 bg-white text-sm font-medium [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500"
+                              defaultValue={eventType.recurringEvent.count}
+                              onChange={(event) => {
+                                setRecurringEventCount(parseInt(event?.target.value));
+                              }}
+                            />
+                            <p className="inline">
+                              {t("occurrence", {
+                                count: recurringEventCount,
+                              })}
+                            </p>
+                          </div>
                         </div>
-                      </div>
-                    )}
-                    {stripeAppData.price > 0 && (
-                      <p className="-ml-2 px-2 text-sm font-medium">
-                        <Icon.FiCreditCard className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
-                        <IntlProvider locale="en">
-                          <FormattedNumber
-                            value={stripeAppData.price / 100.0}
-                            style="currency"
-                            currency={stripeAppData.currency.toUpperCase()}
-                          />
-                        </IntlProvider>
-                      </p>
-                    )}
-                    {timezoneDropdown}
-                  </BookingDescription>
+                      )}
+                      {stripeAppData.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={stripeAppData.price / 100.0}
+                              style="currency"
+                              currency={stripeAppData.currency.toUpperCase()}
+                            />
+                          </IntlProvider>
+                        </p>
+                      )}
+                      {timezoneDropdown}
+                    </BookingDescription>
 
-                  {!isEmbed && (
-                    <div className="mt-auto hidden md:block">
-                      <GoBackToPreviousPage t={t} />
-                    </div>
-                  )}
-
-                  {/* Temporarily disabled - booking?.startTime && rescheduleUid && (
+                    {/* Temporarily disabled - booking?.startTime && rescheduleUid && (
                     <div>
                       <p
                         className="mt-4 mb-3 text-gray-600 dark:text-darkgray-600"
@@ -447,12 +414,13 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                         {t("former_time")}
                       </p>
                       <p className="text-gray-500 line-through dark:text-darkgray-600">
-                        <CalendarIcon className="mr-[10px] -mt-1 inline-block h-4 w-4 text-gray-500" />
+                        <CalendarIcon className="ltr:mr-[10px] rtl:ml-[10px] -mt-1 inline-block h-4 w-4 text-gray-500" />
                         {typeof booking.startTime === "string" && parseDate(dayjs(booking.startTime), i18n)}
                       </p>
                     </div>
                   )*/}
-                </div>
+                  </div>
+                )}
                 <SlotPicker
                   weekStart={
                     typeof profile.weekStart === "string"
@@ -478,7 +446,8 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                 />
               </div>
             </div>
-            {(!eventType.users[0] || !isBrandingHidden(eventType.users[0])) && !isEmbed && <PoweredByCal />}
+            {/* 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 />}
           </div>
         </main>
       </div>

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

@@ -5,7 +5,7 @@ import { isValidPhoneNumber } from "libphonenumber-js";
 import { useSession } from "next-auth/react";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import { useEffect, useMemo, useState, useReducer } from "react";
+import { useEffect, useMemo, useReducer, useState } from "react";
 import { Controller, useForm, useWatch } from "react-hook-form";
 import { FormattedNumber, IntlProvider } from "react-intl";
 import { ReactMultiEmail } from "react-multi-email";
@@ -14,11 +14,11 @@ import { z } from "zod";
 
 import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
 import {
-  locationKeyToString,
-  getEventLocationValue,
-  getEventLocationType,
   EventLocationType,
+  getEventLocationType,
+  getEventLocationValue,
   getHumanReadableLocationValue,
+  locationKeyToString,
 } from "@calcom/app-store/locations";
 import { createPaymentLink } from "@calcom/app-store/stripepayment/lib/client";
 import { getEventTypeAppData } from "@calcom/app-store/utils";
@@ -26,28 +26,34 @@ import { LocationObject, LocationType } from "@calcom/core/location";
 import dayjs from "@calcom/dayjs";
 import {
   useEmbedNonStylesConfig,
+  useEmbedUiConfig,
   useIsBackgroundTransparent,
   useIsEmbed,
 } from "@calcom/embed-core/embed-iframe";
 import CustomBranding from "@calcom/lib/CustomBranding";
 import classNames from "@calcom/lib/classNames";
+import { APP_NAME } from "@calcom/lib/constants";
 import getStripeAppData from "@calcom/lib/getStripeAppData";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { HttpError } from "@calcom/lib/http-error";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
-import { Icon } from "@calcom/ui/Icon";
-import { Tooltip } from "@calcom/ui/Tooltip";
-import { Button } from "@calcom/ui/components";
-import AddressInput from "@calcom/ui/form/AddressInputLazy";
-import PhoneInput from "@calcom/ui/form/PhoneInputLazy";
-import { EmailInput, Form } from "@calcom/ui/form/fields";
+import { AddressInput, Button, EmailInput, Form, PhoneInput, Tooltip, Group, RadioField } from "@calcom/ui";
+import {
+  FiAlertTriangle,
+  FiCalendar,
+  FiCreditCard,
+  FiInfo,
+  FiRefreshCw,
+  FiUser,
+  FiUserPlus,
+} from "@calcom/ui/components/icon";
 
 import { asStringOrNull } from "@lib/asStringOrNull";
 import { timeZone } from "@lib/clock";
 import { ensureArray } from "@lib/ensureArray";
-import useMeQuery from "@lib/hooks/useMeQuery";
+import useRouterQuery from "@lib/hooks/useRouterQuery";
 import createBooking from "@lib/mutations/bookings/create-booking";
 import createRecurringBooking from "@lib/mutations/bookings/create-recurring-booking";
 import { parseDate, parseRecurringDates } from "@lib/parseDate";
@@ -90,10 +96,9 @@ const BookingPage = ({
   ...restProps
 }: BookingPageProps) => {
   const { t, i18n } = useLocale();
-  // Get user so we can determine 12/24 hour format preferences
-  const query = useMeQuery();
-  const user = query.data;
+  const { duration: queryDuration } = useRouterQuery("duration");
   const isEmbed = useIsEmbed(restProps.isEmbed);
+  const embedUiConfig = useEmbedUiConfig();
   const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
   const shouldAlignCentrally = !isEmbed || shouldAlignCentrallyInEmbed;
   const router = useRouter();
@@ -108,6 +113,11 @@ const BookingPage = ({
     {}
   );
   const stripeAppData = getStripeAppData(eventType);
+  // Define duration now that we support multiple duration eventTypes
+  let duration = eventType.length;
+  if (queryDuration && !isNaN(Number(queryDuration))) {
+    duration = Number(queryDuration);
+  }
 
   useEffect(() => {
     if (top !== window) {
@@ -136,12 +146,12 @@ const BookingPage = ({
       }
 
       return router.push({
-        pathname: "/success",
+        pathname: `/booking/${uid}`,
         query: {
-          uid,
           isSuccessBookingPage: true,
           email: bookingForm.getValues("email"),
           eventTypeSlug: eventType.slug,
+          formerTime: booking?.startTime.toString(),
         },
       });
     },
@@ -152,12 +162,12 @@ const BookingPage = ({
       const { uid } = responseData[0] || {};
 
       return router.push({
-        pathname: "/success",
+        pathname: `/booking/${uid}`,
         query: {
-          uid,
           allRemainingBookings: true,
           email: bookingForm.getValues("email"),
           eventTypeSlug: eventType.slug,
+          formerTime: booking?.startTime.toString(),
         },
       });
     },
@@ -242,7 +252,7 @@ const BookingPage = ({
   const bookingFormSchema = z
     .object({
       name: z.string().min(1),
-      email: z.string().email(),
+      email: z.string().trim().email(),
       phone: z
         .string()
         .refine((val) => isValidPhoneNumber(val))
@@ -299,6 +309,39 @@ const BookingPage = ({
   }
 
   const bookEvent = (booking: BookingFormValues) => {
+    const bookingCustomInputs = Object.keys(booking.customInputs || {}).map((inputId) => ({
+      label: eventType.customInputs.find((input) => input.id === parseInt(inputId))?.label || "",
+      value: booking.customInputs && booking.customInputs[inputId] ? booking.customInputs[inputId] : "",
+    }));
+
+    // Checking if custom inputs of type Phone number are valid to display error message on UI
+    if (eventType.customInputs.length) {
+      let isErrorFound = false;
+      eventType.customInputs.forEach((customInput) => {
+        if (customInput.required && customInput.type === EventTypeCustomInputType.PHONE) {
+          const input = bookingCustomInputs.find((i) => i.label === customInput.label);
+          try {
+            z.string({
+              errorMap: () => ({
+                message: `Missing ${customInput.type} customInput: '${customInput.label}'`,
+              }),
+            })
+              .refine((val) => isValidPhoneNumber(val), {
+                message: "Phone number is invalid",
+              })
+              .parse(input?.value);
+          } catch (err) {
+            isErrorFound = true;
+            bookingForm.setError(`customInputs.${customInput.id}`, {
+              type: "custom",
+              message: "Invalid Phone number",
+            });
+          }
+        }
+      });
+      if (isErrorFound) return;
+    }
+
     telemetry.event(
       top !== window ? telemetryEventTypes.embedBookingConfirmed : telemetryEventTypes.bookingConfirmed,
       { isTeamBooking: document.URL.includes("team/") }
@@ -317,13 +360,29 @@ const BookingPage = ({
         {}
       );
 
+    if (eventType.customInputs.length > 0) {
+      // find all required custom inputs and ensure they are filled out in the booking form
+      const requiredCustomInputs = eventType.customInputs.filter((input) => input.required);
+      const missingRequiredCustomInputs = requiredCustomInputs.filter(
+        (input) => !booking?.customInputs?.[input.id]
+      );
+      if (missingRequiredCustomInputs.length > 0) {
+        missingRequiredCustomInputs.forEach((input) => {
+          bookingForm.setError(`customInputs.${input.id}`, {
+            type: "required",
+          });
+        });
+        return;
+      }
+    }
+
     if (recurringDates.length) {
       // Identify set of bookings to one intance of recurring event to support batch changes
       const recurringEventId = uuidv4();
       const recurringBookings = recurringDates.map((recurringDate) => ({
         ...booking,
         start: dayjs(recurringDate).format(),
-        end: dayjs(recurringDate).add(eventType.length, "minute").format(),
+        end: dayjs(recurringDate).add(duration, "minute").format(),
         eventTypeId: eventType.id,
         eventTypeSlug: eventType.slug,
         recurringEventId,
@@ -339,10 +398,7 @@ const BookingPage = ({
           attendeeAddress: booking.attendeeAddress,
         }),
         metadata,
-        customInputs: Object.keys(booking.customInputs || {}).map((inputId) => ({
-          label: eventType.customInputs.find((input) => input.id === parseInt(inputId))?.label || "",
-          value: booking.customInputs && inputId in booking.customInputs ? booking.customInputs[inputId] : "",
-        })),
+        customInputs: bookingCustomInputs,
         hasHashedBookingLink,
         hashedLink,
         smsReminderNumber:
@@ -356,7 +412,7 @@ const BookingPage = ({
       mutation.mutate({
         ...booking,
         start: dayjs(date).format(),
-        end: dayjs(date).add(eventType.length, "minute").format(),
+        end: dayjs(date).add(duration, "minute").format(),
         eventTypeId: eventType.id,
         eventTypeSlug: eventType.slug,
         timeZone: timeZone(),
@@ -370,10 +426,7 @@ const BookingPage = ({
           attendeeAddress: booking.attendeeAddress,
         }),
         metadata,
-        customInputs: Object.keys(booking.customInputs || {}).map((inputId) => ({
-          label: eventType.customInputs.find((input) => input.id === parseInt(inputId))?.label || "",
-          value: booking.customInputs && inputId in booking.customInputs ? booking.customInputs[inputId] : "",
-        })),
+        customInputs: bookingCustomInputs,
         hasHashedBookingLink,
         hashedLink,
         smsReminderNumber:
@@ -408,6 +461,7 @@ const BookingPage = ({
       }
     });
   }
+  const showEventTypeDetails = (isEmbed && !embedUiConfig.hideEventTypeDetails) || !isEmbed;
   const rainbowAppData = getEventTypeAppData(eventType, "rainbow") || {};
 
   // Define conditional gates here
@@ -431,9 +485,9 @@ const BookingPage = ({
                 eventTypeTitle: eventType.title,
                 profileName: profile.name,
               })}{" "}
-          | Cal.com
+          | {APP_NAME}
         </title>
-        <link rel="icon" href="/favicon.ico" />
+        <link rel="icon" href="/favico.ico" />
       </Head>
       <BookingPageTagManager eventType={eventType} />
       <CustomBranding lightVal={profile.brandColor} darkVal={profile.darkBrandColor} />
@@ -441,104 +495,106 @@ const BookingPage = ({
         className={classNames(
           shouldAlignCentrally ? "mx-auto" : "",
           isEmbed ? "" : "sm:my-24",
-          "my-0 max-w-3xl "
+          "my-0 max-w-3xl"
         )}>
         <div
           className={classNames(
             "main overflow-hidden",
-            isBackgroundTransparent ? "" : "dark:border-1 dark:bg-darkgray-100 bg-white",
+            isBackgroundTransparent ? "" : "dark:bg-darkgray-100 bg-white dark:border",
             "dark:border-darkgray-300 rounded-md sm:border"
           )}>
           <div className="sm:flex">
-            <div className="sm:dark:border-darkgray-300 dark:text-darkgray-600 flex flex-col px-6 pt-6 pb-0 text-gray-600 sm:w-1/2 sm:border-r sm:pb-6">
-              <BookingDescription isBookingPage profile={profile} eventType={eventType}>
-                {stripeAppData.price > 0 && (
-                  <p className="text-bookinglight -ml-2 px-2 text-sm ">
-                    <Icon.FiCreditCard className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
-                    <IntlProvider locale="en">
-                      <FormattedNumber
-                        value={stripeAppData.price / 100.0}
-                        style="currency"
-                        currency={stripeAppData.currency.toUpperCase()}
-                      />
-                    </IntlProvider>
-                  </p>
-                )}
-                {!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
-                  <div className="items-start text-sm font-medium text-gray-600 dark:text-white">
-                    <Icon.FiRefreshCw className="mr-[10px] ml-[2px] inline-block h-4 w-4" />
-                    <p className="-ml-2 inline-block items-center px-2">
-                      {getEveryFreqFor({
-                        t,
-                        recurringEvent: eventType.recurringEvent,
-                        recurringCount: recurringEventCount,
-                      })}
+            {showEventTypeDetails && (
+              <div className="sm:dark:border-darkgray-300 dark:text-darkgray-600 flex flex-col px-6 pt-6 pb-0 text-gray-600 sm:w-1/2 sm:border-r sm:pb-6">
+                <BookingDescription isBookingPage profile={profile} eventType={eventType}>
+                  {stripeAppData.price > 0 && (
+                    <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={stripeAppData.price / 100.0}
+                          style="currency"
+                          currency={stripeAppData.currency.toUpperCase()}
+                        />
+                      </IntlProvider>
                     </p>
-                  </div>
-                )}
-                <div className="text-bookinghighlight flex items-start text-sm">
-                  <Icon.FiCalendar className="mr-[10px] ml-[2px] mt-[2px] inline-block h-4 w-4" />
-                  <div className="text-sm font-medium">
-                    {(rescheduleUid || !eventType.recurringEvent?.freq) && `${parseDate(date, i18n)}`}
-                    {!rescheduleUid &&
-                      eventType.recurringEvent?.freq &&
-                      recurringStrings.slice(0, 5).map((timeFormatted, key) => {
-                        return <p key={key}>{timeFormatted}</p>;
-                      })}
-                    {!rescheduleUid && eventType.recurringEvent?.freq && recurringStrings.length > 5 && (
-                      <div className="flex">
-                        <Tooltip
-                          content={recurringStrings.slice(5).map((timeFormatted, key) => (
-                            <p key={key}>{timeFormatted}</p>
-                          ))}>
-                          <p className="dark:text-darkgray-600 text-sm">
-                            + {t("plus_more", { count: recurringStrings.length - 5 })}
-                          </p>
-                        </Tooltip>
-                      </div>
-                    )}
-                  </div>
-                </div>
-                {booking?.startTime && rescheduleUid && (
-                  <div>
-                    <p className="mt-8 mb-2 text-sm " data-testid="former_time_p">
-                      {t("former_time")}
-                    </p>
-                    <p className="line-through ">
-                      <Icon.FiCalendar className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
-                      {typeof booking.startTime === "string" && parseDate(dayjs(booking.startTime), i18n)}
-                    </p>
-                  </div>
-                )}
-                {!!eventType.seatsPerTimeSlot && (
+                  )}
+                  {!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
+                    <div className="items-start text-sm font-medium text-gray-600 dark:text-white">
+                      <FiRefreshCw 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,
+                          recurringEvent: eventType.recurringEvent,
+                          recurringCount: recurringEventCount,
+                        })}
+                      </p>
+                    </div>
+                  )}
                   <div className="text-bookinghighlight flex items-start text-sm">
-                    <Icon.FiUser
-                      className={`mr-[10px] ml-[2px] mt-[2px] inline-block h-4 w-4 ${
-                        booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
-                          ? "text-rose-600"
-                          : booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.33
-                          ? "text-yellow-500"
-                          : "text-bookinghighlight"
-                      }`}
-                    />
-                    <p
-                      className={`${
-                        booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
-                          ? "text-rose-600"
-                          : booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.33
-                          ? "text-yellow-500"
-                          : "text-bookinghighlight"
-                      } mb-2 font-medium`}>
-                      {booking
-                        ? eventType.seatsPerTimeSlot - booking.attendees.length
-                        : eventType.seatsPerTimeSlot}{" "}
-                      / {eventType.seatsPerTimeSlot} {t("seats_available")}
-                    </p>
+                    <FiCalendar className="ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
+                    <div className="text-sm font-medium">
+                      {(rescheduleUid || !eventType.recurringEvent?.freq) && `${parseDate(date, i18n)}`}
+                      {!rescheduleUid &&
+                        eventType.recurringEvent?.freq &&
+                        recurringStrings.slice(0, 5).map((timeFormatted, key) => {
+                          return <p key={key}>{timeFormatted}</p>;
+                        })}
+                      {!rescheduleUid && eventType.recurringEvent?.freq && recurringStrings.length > 5 && (
+                        <div className="flex">
+                          <Tooltip
+                            content={recurringStrings.slice(5).map((timeFormatted, key) => (
+                              <p key={key}>{timeFormatted}</p>
+                            ))}>
+                            <p className="dark:text-darkgray-600 text-sm">
+                              + {t("plus_more", { count: recurringStrings.length - 5 })}
+                            </p>
+                          </Tooltip>
+                        </div>
+                      )}
+                    </div>
                   </div>
-                )}
-              </BookingDescription>
-            </div>
-            <div className="p-6 sm:w-1/2">
+                  {booking?.startTime && rescheduleUid && (
+                    <div>
+                      <p className="mt-8 mb-2 text-sm " data-testid="former_time_p">
+                        {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]" />
+                        {typeof booking.startTime === "string" && parseDate(dayjs(booking.startTime), i18n)}
+                      </p>
+                    </div>
+                  )}
+                  {!!eventType.seatsPerTimeSlot && (
+                    <div className="text-bookinghighlight flex items-start text-sm">
+                      <FiUser
+                        className={`ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] ${
+                          booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
+                            ? "text-rose-600"
+                            : booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.33
+                            ? "text-yellow-500"
+                            : "text-bookinghighlight"
+                        }`}
+                      />
+                      <p
+                        className={`${
+                          booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
+                            ? "text-rose-600"
+                            : booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.33
+                            ? "text-yellow-500"
+                            : "text-bookinghighlight"
+                        } mb-2 font-medium`}>
+                        {booking
+                          ? eventType.seatsPerTimeSlot - booking.attendees.length
+                          : eventType.seatsPerTimeSlot}{" "}
+                        / {eventType.seatsPerTimeSlot} {t("seats_available")}
+                      </p>
+                    </div>
+                  )}
+                </BookingDescription>
+              </div>
+            )}
+            <div className={classNames("p-6", showEventTypeDetails ? "sm:w-1/2" : "w-full")}>
               <Form form={bookingForm} handleSubmit={bookEvent}>
                 <div className="mb-4">
                   <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-white">
@@ -575,7 +631,7 @@ const BookingPage = ({
                     />
                     {bookingForm.formState.errors.email && (
                       <div className="mt-2 flex items-center text-sm text-red-700 ">
-                        <Icon.FiInfo className="mr-2 h-3 w-3" />
+                        <FiInfo className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
                         <p>{t("email_validation_error")}</p>
                       </div>
                     )}
@@ -616,8 +672,8 @@ const BookingPage = ({
                                 value={location.type}
                                 defaultChecked={i === 0}
                               />
-                              <span className="text-sm ltr:ml-2 rtl:mr-2 dark:text-white">
-                                {locationKeyToString(location)}
+                              <span className="text-sm ltr:ml-2 ltr:mr-2 rtl:ml-2 dark:text-white">
+                                {t(locationKeyToString(location) ?? "")}
                               </span>
                             </label>
                           );
@@ -627,7 +683,7 @@ const BookingPage = ({
                   )}
                 </>
                 {/* TODO: Change name and id ="phone" to something generic */}
-                {AttendeeInput && (
+                {AttendeeInput && !disableInput && (
                   <div className="mb-4">
                     <label
                       htmlFor={
@@ -641,7 +697,7 @@ const BookingPage = ({
                       {selectedLocationType === LocationType.Phone
                         ? t("phone_number")
                         : selectedLocationType === LocationType.AttendeeInPerson
-                        ? t("Address")
+                        ? t("address")
                         : ""}
                     </label>
                     <div className="mt-1">
@@ -664,12 +720,11 @@ const BookingPage = ({
                             : ""
                         }
                         required
-                        disabled={disableInput}
                       />
                     </div>
                     {bookingForm.formState.errors.phone && (
                       <div className="mt-2 flex items-center text-sm text-red-700 ">
-                        <Icon.FiInfo className="mr-2 h-3 w-3" />
+                        <FiInfo className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
                         <p>{t("invalid_number")}</p>
                       </div>
                     )}
@@ -682,8 +737,11 @@ const BookingPage = ({
                       {input.type !== EventTypeCustomInputType.BOOL && (
                         <label
                           htmlFor={"custom_" + input.id}
-                          className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
-                          {input.label}
+                          className={classNames(
+                            "mb-1 block text-sm font-medium text-gray-700 transition-colors dark:text-white",
+                            bookingForm.formState.errors.customInputs?.[input.id] && "!text-red-700"
+                          )}>
+                          {input.label} {input.required && <span className="text-red-700">*</span>}
                         </label>
                       )}
                       {input.type === EventTypeCustomInputType.TEXTLONG && (
@@ -747,6 +805,49 @@ const BookingPage = ({
                           </div>
                         </div>
                       )}
+                      {input.options && input.type === EventTypeCustomInputType.RADIO && (
+                        <div className="flex">
+                          <Group
+                            name={`customInputs.${input.id}`}
+                            required={input.required}
+                            onValueChange={(e) => {
+                              bookingForm.setValue(`customInputs.${input.id}`, e);
+                            }}>
+                            <>
+                              {input.options.map((option, i) => (
+                                <RadioField
+                                  label={option.label}
+                                  key={`option.${input.id}.${i}.radio`}
+                                  value={option.label}
+                                  id={`option.${input.id}.${i}.radio`}
+                                />
+                              ))}
+                            </>
+                            {bookingForm.formState.errors.customInputs?.[input.id] && (
+                              <div className="mt-px flex items-center text-xs text-red-700 ">
+                                <p>{t("required")}</p>
+                              </div>
+                            )}
+                          </Group>
+                        </div>
+                      )}
+                      {input.type === EventTypeCustomInputType.PHONE && (
+                        <div>
+                          <PhoneInput<BookingFormValues>
+                            name={`customInputs.${input.id}`}
+                            control={bookingForm.control}
+                            placeholder={t("enter_phone_number")}
+                            id={`customInputs.${input.id}`}
+                            required={input.required}
+                          />
+                          {bookingForm.formState.errors?.customInputs?.[input.id] && (
+                            <div className="mt-2 flex items-center text-sm text-red-700 ">
+                              <FiInfo className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
+                              <p>{t("invalid_number")}</p>
+                            </div>
+                          )}
+                        </div>
+                      )}
                     </div>
                   ))}
                 {!eventType.disableGuests && guestToggle && (
@@ -821,7 +922,7 @@ const BookingPage = ({
                     </div>
                     {bookingForm.formState.errors.smsReminderNumber && (
                       <div className="mt-2 flex items-center text-sm text-red-700 ">
-                        <Icon.FiInfo className="mr-2 h-3 w-3" />
+                        <FiInfo className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
                         <p>{t("invalid_number")}</p>
                       </div>
                     )}
@@ -845,7 +946,7 @@ const BookingPage = ({
                   ) : (
                     <textarea
                       {...bookingForm.register("notes")}
-                      required={!!eventType.metadata.additionalNotesRequired}
+                      required={!!eventType.metadata?.additionalNotesRequired}
                       id="notes"
                       name="notes"
                       rows={3}
@@ -860,25 +961,19 @@ const BookingPage = ({
                   {!eventType.disableGuests && !guestToggle && (
                     <Button
                       type="button"
-                      color="minimalSecondary"
-                      size="icon"
+                      color="minimal"
+                      variant="icon"
                       tooltip={t("additional_guests")}
-                      StartIcon={Icon.FiUserPlus}
+                      StartIcon={FiUserPlus}
                       onClick={() => setGuestToggle(!guestToggle)}
                       className="mr-auto"
                     />
                   )}
-                  <Button
-                    color="minimal"
-                    type="button"
-                    onClick={() => router.back()}
-                    // We override this for this component only for now - as we don't support darkmode everywhere in the app
-                    className="dark:hover:bg-darkgray-200 dark:border-none dark:text-white">
+                  <Button color="minimal" type="button" onClick={() => router.back()}>
                     {t("cancel")}
                   </Button>
                   <Button
                     type="submit"
-                    className="dark:bg-darkmodebrand dark:text-darkmodebrandcontrast dark:hover:border-darkmodebrandcontrast mr-auto dark:border-transparent"
                     data-testid={rescheduleUid ? "confirm-reschedule-button" : "confirm-book-button"}
                     loading={mutation.isLoading || recurringMutation.isLoading}>
                     {rescheduleUid ? t("reschedule") : t("confirm")}
@@ -906,12 +1001,12 @@ function ErrorMessage({ error }: { error: unknown }) {
     <div data-testid="booking-fail" className="mt-2 border-l-4 border-yellow-400 bg-yellow-50 p-4">
       <div className="flex">
         <div className="flex-shrink-0">
-          <Icon.FiAlertTriangle className="h-5 w-5 text-yellow-400" aria-hidden="true" />
+          <FiAlertTriangle className="h-5 w-5 text-yellow-400" aria-hidden="true" />
         </div>
         <div className="ltr:ml-3 rtl:mr-3">
           <p className="text-sm text-yellow-700">
             {rescheduleUid ? t("reschedule_fail") : t("booking_fail")}{" "}
-            {error instanceof HttpError || error instanceof Error ? error.message : "Unknown error"}
+            {error instanceof HttpError || error instanceof Error ? t(error.message) : "Unknown error"}
           </p>
         </div>
       </div>

apps/web/components/dialog/DeleteStripeDialogContent.tsx

@@ -1,74 +0,0 @@
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import React, { PropsWithChildren } from "react";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button } from "@calcom/ui/Button";
-import { DialogClose, DialogContent } from "@calcom/ui/Dialog";
-import { Icon } from "@calcom/ui/Icon";
-
-export type DeleteStripeDialogContentProps = {
-  cancelAllBookingsBtnText?: string;
-  removeBtnText?: string;
-  cancelBtnText?: string;
-  onConfirm?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-  onRemove?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-  title: string;
-  variety?: "danger" | "warning" | "success";
-};
-
-export default function DeleteStripeDialogContent(props: PropsWithChildren<DeleteStripeDialogContentProps>) {
-  const { t } = useLocale();
-  const {
-    title,
-    variety,
-    cancelAllBookingsBtnText,
-    removeBtnText,
-    cancelBtnText = t("cancel"),
-    onConfirm,
-    onRemove,
-    children,
-  } = props;
-
-  return (
-    <DialogContent>
-      <div className="flex">
-        {variety && (
-          <div className="mt-0.5 ltr:mr-3">
-            {variety === "danger" && (
-              <div className="mx-auto rounded-full bg-red-100 p-2 text-center">
-                <Icon.FiAlertTriangle className="h-5 w-5 text-red-600" />
-              </div>
-            )}
-            {variety === "warning" && (
-              <div className="mx-auto rounded-full bg-orange-100 p-2 text-center">
-                <Icon.FiAlertTriangle className="h-5 w-5 text-orange-600" />
-              </div>
-            )}
-            {variety === "success" && (
-              <div className="mx-auto rounded-full bg-green-100 p-2 text-center">
-                <Icon.FiCheck className="h-5 w-5 text-green-600" />
-              </div>
-            )}
-          </div>
-        )}
-        <div>
-          <DialogPrimitive.Title className="font-cal text-xl text-gray-900">{title}</DialogPrimitive.Title>
-          <DialogPrimitive.Description className="text-sm text-neutral-500">
-            {children}
-          </DialogPrimitive.Description>
-        </div>
-      </div>
-      <div className="mt-5 flex flex-row-reverse gap-x-2 sm:mt-8">
-        <DialogClose onClick={onConfirm} asChild>
-          <Button color="alert">{cancelAllBookingsBtnText}</Button>
-        </DialogClose>
-        <DialogClose onClick={onRemove} asChild>
-          <Button color="alert2">{removeBtnText}</Button>
-        </DialogClose>
-        <DialogClose asChild>
-          <Button color="secondary">{cancelBtnText}</Button>
-        </DialogClose>
-      </div>
-    </DialogContent>
-  );
-}

apps/web/components/dialog/EditLocationDialog.tsx

@@ -6,42 +6,34 @@ import { Controller, useForm, useWatch } from "react-hook-form";
 import { z } from "zod";
 
 import {
-  LocationType,
-  getEventLocationType,
   EventLocationType,
+  getEventLocationType,
+  getHumanReadableLocationValue,
+  getMessageForOrganizer,
   LocationObject,
+  LocationType,
 } from "@calcom/app-store/locations";
-import { getMessageForOrganizer } from "@calcom/app-store/locations";
-import { getHumanReadableLocationValue } from "@calcom/app-store/locations";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import { Button } from "@calcom/ui";
-import { Dialog, DialogContent } from "@calcom/ui/Dialog";
-import { Icon } from "@calcom/ui/Icon";
-import PhoneInput from "@calcom/ui/form/PhoneInputLazy";
-import { Form } from "@calcom/ui/form/fields";
+import { Button, Dialog, DialogContent, DialogFooter, Form, PhoneInput } from "@calcom/ui";
+import { FiMapPin } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
 
 import CheckboxField from "@components/ui/form/CheckboxField";
-import Select from "@components/ui/form/Select";
+import LocationSelect, { LocationOption } from "@components/ui/form/LocationSelect";
 
 type BookingItem = RouterOutputs["viewer"]["bookings"]["get"]["bookings"][number];
 
-type OptionTypeBase = {
-  label: string;
-  value: EventLocationType["type"];
-  disabled?: boolean;
-};
-
 interface ISetLocationDialog {
   saveLocation: (newLocationType: EventLocationType["type"], details: { [key: string]: string }) => void;
-  selection?: OptionTypeBase;
+  selection?: LocationOption;
   booking?: BookingItem;
   defaultValues?: LocationObject[];
   setShowLocationModal: React.Dispatch<React.SetStateAction<boolean>>;
   isOpenDialog: boolean;
-  setSelectedLocation?: (param: OptionTypeBase | undefined) => void;
+  setSelectedLocation?: (param: LocationOption | undefined) => void;
+  setEditingLocationType?: (param: string) => void;
 }
 
 const LocationInput = (props: {
@@ -79,6 +71,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
     isOpenDialog,
     defaultValues,
     setSelectedLocation,
+    setEditingLocationType,
   } = props;
   const { t } = useLocale();
   const locationsQuery = trpc.viewer.locationOptions.useQuery();
@@ -211,14 +204,14 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
   })();
 
   return (
-    <Dialog open={isOpenDialog}>
-      <DialogContent asChild>
-        <div className="inline-block transform rounded-sm bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
-          <div className="mb-4 sm:flex sm:items-start">
-            <div className="bg-secondary-100 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">
-              <Icon.FiMapPin className="text-primary-600 h-6 w-6" />
-            </div>
-            <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+    <Dialog open={isOpenDialog} onOpenChange={(open) => setShowLocationModal(open)}>
+      <DialogContent>
+        <div className="flex flex-row space-x-3">
+          <div className="bg-secondary-100 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-primary-600 h-6 w-6" />
+          </div>
+          <div className="w-full">
+            <div className="mt-3 text-center sm:mt-0 sm:text-left">
               <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
                 {t("edit_location")}
               </h3>
@@ -226,118 +219,126 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                 <p className="text-sm text-gray-400">{t("this_input_will_shown_booking_this_event")}</p>
               )}
             </div>
-            <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left" />
-          </div>
-          {booking && (
-            <>
-              <p className="mt-6 mb-2 ml-1 text-sm font-bold text-black">{t("current_location")}:</p>
-              <p className="mb-2 ml-1 text-sm text-black">
-                {getHumanReadableLocationValue(booking.location, t)}
-              </p>
-            </>
-          )}
-          <Form
-            form={locationFormMethods}
-            handleSubmit={async (values) => {
-              const { locationType: newLocation, displayLocationPublicly } = values;
+            <div className="mt-3 text-center sm:mt-0 sm:text-left" />
 
-              let details = {};
-              if (newLocation === LocationType.InPerson) {
-                details = {
-                  address: values.locationAddress,
-                };
-              }
-              const eventLocationType = getEventLocationType(newLocation);
+            {booking && (
+              <>
+                <p className="mt-6 mb-2 ml-1 text-sm font-bold text-black">{t("current_location")}:</p>
+                <p className="mb-2 ml-1 text-sm text-black">
+                  {getHumanReadableLocationValue(booking.location, t)}
+                </p>
+              </>
+            )}
+            <Form
+              form={locationFormMethods}
+              handleSubmit={async (values) => {
+                const { locationType: newLocation, displayLocationPublicly } = values;
 
-              // TODO: There can be a property that tells if it is to be saved in `link`
-              if (
-                newLocation === LocationType.Link ||
-                (!eventLocationType?.default && eventLocationType?.linkType === "static")
-              ) {
-                details = { link: values.locationLink };
-              }
+                let details = {};
+                if (newLocation === LocationType.InPerson) {
+                  details = {
+                    address: values.locationAddress,
+                  };
+                }
+                const eventLocationType = getEventLocationType(newLocation);
 
-              if (newLocation === LocationType.UserPhone) {
-                details = { hostPhoneNumber: values.locationPhoneNumber };
-              }
+                // TODO: There can be a property that tells if it is to be saved in `link`
+                if (
+                  newLocation === LocationType.Link ||
+                  (!eventLocationType?.default && eventLocationType?.linkType === "static")
+                ) {
+                  details = { link: values.locationLink };
+                }
 
-              if (eventLocationType?.organizerInputType) {
-                details = {
-                  ...details,
-                  displayLocationPublicly,
-                };
-              }
+                if (newLocation === LocationType.UserPhone) {
+                  details = { hostPhoneNumber: values.locationPhoneNumber };
+                }
 
-              saveLocation(newLocation, details);
-              setShowLocationModal(false);
-              setSelectedLocation?.(undefined);
-              locationFormMethods.unregister([
-                "locationType",
-                "locationLink",
-                "locationAddress",
-                "locationPhoneNumber",
-              ]);
-            }}>
-            <QueryCell
-              query={locationsQuery}
-              success={({ data: locationOptions }) => {
-                if (!locationOptions.length) return null;
-                return (
-                  <Controller
-                    name="locationType"
-                    control={locationFormMethods.control}
-                    render={() => (
-                      <Select
-                        maxMenuHeight={150}
-                        name="location"
-                        defaultValue={selection}
-                        options={
-                          booking
-                            ? locationOptions.filter(
-                                (location) =>
-                                  location.value !== "phone" && location.value !== "attendeeInPerson"
-                              )
-                            : locationOptions
-                        }
-                        isSearchable
-                        className="my-4 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 text-sm"
-                        onChange={(val) => {
-                          if (val) {
-                            locationFormMethods.setValue("locationType", val.value);
-                            locationFormMethods.unregister([
-                              "locationLink",
-                              "locationAddress",
-                              "locationPhoneNumber",
-                            ]);
-                            locationFormMethods.clearErrors([
-                              "locationLink",
-                              "locationPhoneNumber",
-                              "locationAddress",
-                            ]);
-                            setSelectedLocation?.(val);
-                          }
-                        }}
-                      />
-                    )}
-                  />
-                );
-              }}
-            />
-            {selectedLocation && LocationOptions}
-            <div className="mt-4 flex justify-end space-x-2">
-              <Button
-                onClick={() => {
-                  setShowLocationModal(false);
-                  setSelectedLocation?.(undefined);
-                  locationFormMethods.unregister("locationType");
+                if (eventLocationType?.organizerInputType) {
+                  details = {
+                    ...details,
+                    displayLocationPublicly,
+                  };
+                }
+
+                saveLocation(newLocation, details);
+                setShowLocationModal(false);
+                setSelectedLocation?.(undefined);
+                locationFormMethods.unregister([
+                  "locationType",
+                  "locationLink",
+                  "locationAddress",
+                  "locationPhoneNumber",
+                ]);
+              }}>
+              <QueryCell
+                query={locationsQuery}
+                success={({ data: locationOptions }) => {
+                  if (!locationOptions.length) return null;
+                  if (booking) {
+                    locationOptions.forEach((location) => {
+                      if (location.label === "phone") {
+                        location.options.filter((l) => l.value !== "phone");
+                      } else if (location.label === "in person") {
+                        location.options.filter((l) => l.value !== "attendeeInPerson");
+                      }
+                    });
+                  }
+                  return (
+                    <Controller
+                      name="locationType"
+                      control={locationFormMethods.control}
+                      render={() => (
+                        <div className="py-4">
+                          <LocationSelect
+                            maxMenuHeight={300}
+                            name="location"
+                            defaultValue={selection}
+                            options={locationOptions}
+                            isSearchable
+                            onChange={(val) => {
+                              if (val) {
+                                locationFormMethods.setValue("locationType", val.value);
+                                locationFormMethods.unregister([
+                                  "locationLink",
+                                  "locationAddress",
+                                  "locationPhoneNumber",
+                                ]);
+                                locationFormMethods.clearErrors([
+                                  "locationLink",
+                                  "locationPhoneNumber",
+                                  "locationAddress",
+                                ]);
+                                setSelectedLocation?.(val);
+                              }
+                            }}
+                          />
+                        </div>
+                      )}
+                    />
+                  );
                 }}
-                type="button"
-                color="secondary">
-                {t("cancel")}
-              </Button>
-              <Button type="submit">{t("update")}</Button>
-            </div>
-          </Form>
+              />
+              {selectedLocation && LocationOptions}
+              <DialogFooter>
+                <div className="mt-4 flex justify-end space-x-2 rtl:space-x-reverse">
+                  <Button
+                    onClick={() => {
+                      setShowLocationModal(false);
+                      setSelectedLocation?.(undefined);
+                      setEditingLocationType?.("");
+                      locationFormMethods.unregister("locationType");
+                    }}
+                    type="button"
+                    color="secondary">
+                    {t("cancel")}
+                  </Button>
+
+                  <Button type="submit">{t("update")}</Button>
+                </div>
+              </DialogFooter>
+            </Form>
+          </div>
         </div>
       </DialogContent>
     </Dialog>

apps/web/components/dialog/RescheduleDialog.tsx

@@ -1,12 +1,18 @@
-import React, { useState, Dispatch, SetStateAction } from "react";
+import { Dispatch, SetStateAction, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components/button";
-import { TextArea } from "@calcom/ui/form/fields";
-import showToast from "@calcom/ui/v2/core/notifications";
+import {
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  showToast,
+  TextArea,
+} from "@calcom/ui";
+import { FiClock } from "@calcom/ui/components/icon";
 
 interface IRescheduleDialog {
   isOpenDialog: boolean;
@@ -37,12 +43,11 @@ 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]">
-            <Icon.FiClock className="m-auto h-6 w-6" />
+            <FiClock className="m-auto h-6 w-6" />
           </div>
           <div className="pt-1">
             <DialogHeader title={t("send_reschedule_request")} />
-
-            <p className="-mt-8 text-sm text-gray-500">{t("reschedule_modal_description")}</p>
+            <p className="text-sm text-gray-500">{t("reschedule_modal_description")}</p>
             <p className="mt-6 mb-2 text-sm font-bold text-black">
               {t("reason_for_reschedule_request")}
               <span className="font-normal text-gray-500"> (Optional)</span>
@@ -56,9 +61,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
             />
 
             <DialogFooter>
-              <DialogClose asChild>
-                <Button color="secondary">{t("cancel")}</Button>
-              </DialogClose>
+              <DialogClose />
               <Button
                 data-testid="send_request"
                 disabled={isLoading}

apps/web/components/eventtype/AvailabilityTab.tsx

@@ -1,6 +1,6 @@
 import { FormValues } from "pages/event-types/[type]";
 import { Controller, useFormContext } from "react-hook-form";
-import { SingleValueProps, OptionProps, components } from "react-select";
+import { components, OptionProps, SingleValueProps } from "react-select";
 
 import dayjs from "@calcom/dayjs";
 import classNames from "@calcom/lib/classNames";
@@ -8,12 +8,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { weekdayNames } from "@calcom/lib/weekday";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
-import { Icon } from "@calcom/ui";
-import { Badge } from "@calcom/ui/components/badge";
-import { Button } from "@calcom/ui/components/button";
-import { SettingsToggle } from "@calcom/ui/v2";
-import Select from "@calcom/ui/v2/core/form/select";
-import { SkeletonText } from "@calcom/ui/v2/core/skeleton";
+import { Badge, Button, Select, SettingsToggle, SkeletonText } from "@calcom/ui";
+import { FiExternalLink, FiGlobe } from "@calcom/ui/components/icon";
 
 import { SelectSkeletonLoader } from "@components/availability/SkeletonLoader";
 
@@ -25,12 +21,13 @@ type AvailabilityOption = {
 
 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">
-          Default
+          {t("default")}
         </Badge>
       )}
     </components.Option>
@@ -39,12 +36,13 @@ const Option = ({ ...props }: OptionProps<AvailabilityOption>) => {
 
 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">
-          Default
+          {t("default")}
         </Badge>
       )}
     </components.SingleValue>
@@ -62,6 +60,8 @@ const AvailabilitySelect = ({
   onChange: (value: AvailabilityOption | null) => void;
 }) => {
   const { data, isLoading } = trpc.viewer.availability.list.useQuery();
+  const { t } = useLocale();
+
   if (isLoading) {
     return <SelectSkeletonLoader />;
   }
@@ -82,6 +82,7 @@ const AvailabilitySelect = ({
 
   return (
     <Select
+      placeholder={t("select")}
       options={options}
       isSearchable={false}
       onChange={props.onChange}
@@ -109,7 +110,7 @@ export const AvailabilityTab = ({ isTeamEvent }: { isTeamEvent: boolean }) => {
       <div className="space-y-4">
         <div>
           <div className="min-w-4 mb-2">
-            <label htmlFor="availability" className="mt-0 flex text-sm font-medium text-neutral-700">
+            <label htmlFor="availability" className="mt-0 flex text-sm font-medium text-gray-700">
               {t("availability")}
             </label>
           </div>
@@ -149,7 +150,7 @@ export const AvailabilityTab = ({ isTeamEvent }: { isTeamEvent: boolean }) => {
                           <span className="w-16 sm:w-28 sm:text-left">
                             {format(dayRange.startTime, timeFormat === 12)}
                           </span>
-                          <span className="ml-4">-</span>
+                          <span className="ltr:ml-4 rtl:mr-4">-</span>
                           <div className="ml-6">{format(dayRange.endTime, timeFormat === 12)}</div>
                         </div>
                       ))}
@@ -164,13 +165,13 @@ export const AvailabilityTab = ({ isTeamEvent }: { isTeamEvent: boolean }) => {
           <hr />
           <div className="flex flex-col justify-center gap-2 sm:flex-row sm:justify-between">
             <span className="flex items-center justify-center text-sm text-gray-600 sm:justify-start">
-              <Icon.FiGlobe className="mr-2" />
+              <FiGlobe className="ltr:mr-2 rtl:ml-2" />
               {schedule?.timeZone || <SkeletonText className="block h-5 w-32" />}
             </span>
             <Button
               href={`/availability/${schedule?.schedule.id}`}
               color="minimal"
-              EndIcon={Icon.FiExternalLink}
+              EndIcon={FiExternalLink}
               target="_blank"
               className="justify-center border sm:border-0"
               rel="noopener noreferrer">

apps/web/components/eventtype/CreateEventType.tsx

@@ -1,346 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { SchedulingType } from "@prisma/client";
-import { useSession } from "next-auth/react";
-import { useRouter } from "next/router";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import type { z } from "zod";
-
-import classNames from "@calcom/lib/classNames";
-import { WEBAPP_URL } from "@calcom/lib/constants";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { createEventTypeInput } from "@calcom/prisma/zod/custom/eventtype";
-import { trpc } from "@calcom/trpc/react";
-import { Alert } from "@calcom/ui/Alert";
-import { Button } from "@calcom/ui/Button";
-import { Dialog, DialogClose, DialogContent } from "@calcom/ui/Dialog";
-import Dropdown, {
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@calcom/ui/Dropdown";
-import { Icon } from "@calcom/ui/Icon";
-import { Form, InputLeading, TextAreaField, TextField } from "@calcom/ui/form/fields";
-import showToast from "@calcom/ui/v2/core/notifications";
-
-import { HttpError } from "@lib/core/http/error";
-import { slugify } from "@lib/slugify";
-
-import Avatar from "@components/ui/Avatar";
-import * as RadioArea from "@components/ui/form/radio-area";
-
-// this describes the uniform data needed to create a new event type on Profile or Team
-export interface EventTypeParent {
-  teamId: number | null | undefined; // if undefined, then it's a profile
-  name?: string | null;
-  slug?: string | null;
-  image?: string | null;
-}
-
-interface CreateEventTypeBtnProps {
-  // set true for use on the team settings page
-  canAddEvents: boolean;
-  // set true when in use on the team settings page
-  isIndividualTeam?: boolean;
-  // EventTypeParent can be a profile (as first option) or a team for the rest.
-  options: EventTypeParent[];
-}
-
-export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
-  const { t, isLocaleReady } = useLocale();
-  const router = useRouter();
-  // URL encoded params
-  const teamId: number | undefined =
-    typeof router.query.teamId === "string" && router.query.teamId
-      ? parseInt(router.query.teamId)
-      : undefined;
-  const pageSlug = router.query.eventPage || props.options[0].slug;
-  const hasTeams = !!props.options.find((option) => option.teamId);
-  const type: string = typeof router.query.type == "string" && router.query.type ? router.query.type : "";
-
-  const form = useForm<z.infer<typeof createEventTypeInput>>({
-    resolver: zodResolver(createEventTypeInput),
-  });
-  const { setValue, watch, register } = form;
-
-  useEffect(() => {
-    if (!router.isReady) return;
-
-    const title: string =
-      typeof router.query.title === "string" && router.query.title ? router.query.title : "";
-    const length: number =
-      typeof router.query.length === "string" && router.query.length ? parseInt(router.query.length) : 15;
-    const description: string =
-      typeof router.query.description === "string" && router.query.description
-        ? router.query.description
-        : "";
-    const slug: string = typeof router.query.slug === "string" && router.query.slug ? router.query.slug : "";
-
-    setValue("title", title);
-    setValue("length", length);
-    setValue("description", description);
-    setValue("slug", slug);
-    // If query params change, update the form
-  }, [router.isReady, router.query, setValue]);
-
-  useEffect(() => {
-    const subscription = watch((value, { name, type }) => {
-      if (name === "title" && type === "change") {
-        if (value.title) setValue("slug", slugify(value.title));
-        else setValue("slug", "");
-      }
-    });
-    return () => subscription.unsubscribe();
-  }, [watch, setValue]);
-
-  const createMutation = trpc.viewer.eventTypes.create.useMutation({
-    onSuccess: async ({ eventType }) => {
-      await router.replace("/event-types/" + eventType.id);
-      showToast(t("event_type_created_successfully", { eventTypeTitle: eventType.title }), "success");
-    },
-    onError: (err) => {
-      if (err instanceof HttpError) {
-        const message = `${err.statusCode}: ${err.message}`;
-        showToast(message, "error");
-      }
-
-      if (err.data?.code === "BAD_REQUEST") {
-        const message = `${err.data.code}: URL already exists.`;
-        showToast(message, "error");
-      }
-
-      if (err.data?.code === "UNAUTHORIZED") {
-        const message = `${err.data.code}: You are not able to create this event`;
-        showToast(message, "error");
-      }
-    },
-  });
-
-  // inject selection data into url for correct router history
-  const openModal = (option: EventTypeParent) => {
-    const query = {
-      ...router.query,
-      dialog: "new-eventtype",
-      eventPage: option.slug,
-      teamId: option.teamId,
-    };
-    if (!option.teamId) {
-      delete query.teamId;
-    }
-    router.push(
-      {
-        pathname: router.pathname,
-        query,
-      },
-      undefined,
-      { shallow: true }
-    );
-  };
-  if (!isLocaleReady) {
-    return null;
-  }
-  return (
-    <Dialog
-      name="new-eventtype"
-      clearQueryParamsOnClose={["eventPage", "teamId", "type", "description", "title", "length", "slug"]}>
-      <CreateEventTypeTrigger
-        hasTeams={hasTeams}
-        canAddEvents={props.canAddEvents}
-        isIndividualTeam={props.isIndividualTeam}
-        openModal={openModal}
-        options={props.options}
-      />
-
-      <DialogContent>
-        <div className="mb-4">
-          <h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">
-            {teamId ? t("add_new_team_event_type") : t("add_new_event_type")}
-          </h3>
-          <div>
-            <p className="text-sm text-gray-500">{t("new_event_type_to_book_description")}</p>
-          </div>
-        </div>
-        <Form
-          form={form}
-          handleSubmit={(values) => {
-            createMutation.mutate(values);
-          }}>
-          <div className="mt-3 space-y-4">
-            {teamId && (
-              <TextField
-                type="hidden"
-                labelProps={{ style: { display: "none" } }}
-                {...register("teamId", { valueAsNumber: true })}
-                value={teamId}
-              />
-            )}
-            <TextField label={t("title")} placeholder={t("quick_chat")} {...register("title")} />
-
-            {process.env.NEXT_PUBLIC_WEBSITE_URL !== undefined &&
-            process.env.NEXT_PUBLIC_WEBSITE_URL?.length >= 21 ? (
-              <TextField
-                label={`${t("url")}: ${process.env.NEXT_PUBLIC_WEBSITE_URL}`}
-                required
-                addOnLeading={<InputLeading>/{pageSlug}/</InputLeading>}
-                {...register("slug")}
-              />
-            ) : (
-              <TextField
-                label={t("url")}
-                required
-                addOnLeading={
-                  <InputLeading>
-                    {process.env.NEXT_PUBLIC_WEBSITE_URL}/{pageSlug}/
-                  </InputLeading>
-                }
-                {...register("slug")}
-              />
-            )}
-
-            <TextAreaField
-              label={t("description")}
-              placeholder={t("quick_video_meeting")}
-              {...register("description")}
-            />
-
-            <div className="relative">
-              <TextField
-                type="number"
-                required
-                min="10"
-                placeholder="15"
-                label={t("length")}
-                className="pr-20"
-                {...register("length", { valueAsNumber: true })}
-              />
-              <div className="absolute inset-y-0 right-0 mt-1.5 flex items-center pt-4 pr-3 text-sm text-gray-400">
-                {t("minutes")}
-              </div>
-            </div>
-
-            {teamId && (
-              <div className="mb-4">
-                <label htmlFor="schedulingType" className="block text-sm font-bold text-gray-700">
-                  {t("scheduling_type")}
-                </label>
-                {form.formState.errors.schedulingType && (
-                  <Alert
-                    className="mt-1"
-                    severity="error"
-                    message={form.formState.errors.schedulingType.message}
-                  />
-                )}
-                <RadioArea.Group
-                  {...register("schedulingType")}
-                  onChange={(val) => form.setValue("schedulingType", val as SchedulingType)}
-                  className="relative mt-1 flex space-x-6 rounded-sm rtl:space-x-reverse">
-                  <RadioArea.Item
-                    value={SchedulingType.COLLECTIVE}
-                    defaultChecked={type === SchedulingType.COLLECTIVE}
-                    className="w-1/2 text-sm">
-                    <strong className="mb-1 block">{t("collective")}</strong>
-                    <p>{t("collective_description")}</p>
-                  </RadioArea.Item>
-                  <RadioArea.Item
-                    value={SchedulingType.ROUND_ROBIN}
-                    defaultChecked={type === SchedulingType.ROUND_ROBIN}
-                    className="w-1/2 text-sm">
-                    <strong className="mb-1 block">{t("round_robin")}</strong>
-                    <p>{t("round_robin_description")}</p>
-                  </RadioArea.Item>
-                </RadioArea.Group>
-              </div>
-            )}
-          </div>
-          <div className="mt-8 flex flex-row-reverse gap-x-2">
-            <Button type="submit" loading={createMutation.isLoading}>
-              {t("continue")}
-            </Button>
-            <DialogClose asChild>
-              <Button color="secondary">{t("cancel")}</Button>
-            </DialogClose>
-          </div>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-type CreateEventTypeTrigger = {
-  isIndividualTeam?: boolean;
-  // EventTypeParent can be a profile (as first option) or a team for the rest.
-  options: EventTypeParent[];
-  hasTeams: boolean;
-  // set true for use on the team settings page
-  canAddEvents: boolean;
-  openModal: (option: EventTypeParent) => void;
-};
-
-export function CreateEventTypeTrigger(props: CreateEventTypeTrigger) {
-  const { t } = useLocale();
-
-  return (
-    <>
-      {!props.hasTeams || props.isIndividualTeam ? (
-        <Button
-          onClick={() => props.openModal(props.options[0])}
-          data-testid="new-event-type"
-          StartIcon={Icon.FiPlus}
-          disabled={!props.canAddEvents}>
-          {t("new_event_type_btn")}
-        </Button>
-      ) : (
-        <Dropdown>
-          <DropdownMenuTrigger asChild>
-            <Button EndIcon={Icon.FiChevronDown}>{t("new_event_type_btn")}</Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuLabel>{t("new_event_subtitle")}</DropdownMenuLabel>
-            <DropdownMenuSeparator className="h-px bg-gray-200" />
-            {props.options.map((option) => (
-              <CreateEventTeamsItem
-                key={option.slug}
-                option={option}
-                openModal={() => props.openModal(option)}
-              />
-            ))}
-          </DropdownMenuContent>
-        </Dropdown>
-      )}
-    </>
-  );
-}
-
-function CreateEventTeamsItem(props: {
-  openModal: (option: EventTypeParent) => void;
-  option: EventTypeParent;
-}) {
-  const session = useSession();
-  const membershipQuery = trpc.viewer.teams.getMembershipbyUser.useQuery({
-    memberId: session.data?.user.id as number,
-    teamId: props.option.teamId as number,
-  });
-
-  const isDisabled = membershipQuery.data?.role === "MEMBER";
-
-  return (
-    <DropdownMenuItem
-      key={props.option.slug}
-      className={classNames(
-        "cursor-pointer px-3 py-2  focus:outline-none",
-        isDisabled ? "cursor-default !text-gray-300" : "hover:bg-neutral-100"
-      )}
-      disabled={isDisabled}
-      onSelect={() => props.openModal(props.option)}>
-      <Avatar
-        alt={props.option.name || ""}
-        imageSrc={props.option.image || WEBAPP_URL + "/" + props.option.slug + "/avatar.png"}
-        size={6}
-        className="inline ltr:mr-2 rtl:ml-2"
-      />
-      {props.option.name ? props.option.name : props.option.slug}
-    </DropdownMenuItem>
-  );
-}

apps/web/components/eventtype/CustomInputTypeForm.tsx

@@ -1,25 +1,34 @@
-import { EventTypeCustomInput, EventTypeCustomInputType } from "@prisma/client";
-import React, { FC } from "react";
-import { Controller, SubmitHandler, useForm, useWatch } from "react-hook-form";
+import { useAutoAnimate } from "@formkit/auto-animate/react";
+import { EventTypeCustomInputType } from "@prisma/client";
+import type { CustomInputParsed } from "pages/event-types/[type]";
+import { FC } from "react";
+import { Control, Controller, useFieldArray, useForm, UseFormRegister, useWatch } from "react-hook-form";
 
-import { Button } from "@calcom/ui/components";
-import { TextField } from "@calcom/ui/components/form";
-import { Select } from "@calcom/ui/v2";
-
-import { useLocale } from "@lib/hooks/useLocale";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button, Label, Select, TextField } from "@calcom/ui";
+import { FiPlus, FiX } from "@calcom/ui/components/icon";
 
 interface OptionTypeBase {
   label: string;
   value: EventTypeCustomInputType;
+  options?: { label: string; type: string }[];
 }
 
 interface Props {
-  onSubmit: SubmitHandler<IFormInput>;
+  onSubmit: (output: CustomInputParsed) => void;
   onCancel: () => void;
-  selectedCustomInput?: EventTypeCustomInput;
+  selectedCustomInput?: CustomInputParsed;
 }
 
-type IFormInput = EventTypeCustomInput;
+type IFormInput = CustomInputParsed;
+
+/**
+ *  Getting a random ID gives us the option to know WHICH field is changed
+ *  when the user edits a custom field.
+ *  This UUID is only used to check for changes in the UI and not the ID we use in the DB
+ *  There is very very very slim chance that this will cause a collision
+ * */
+const randomId = () => Math.floor(Math.random() * 1000000 + new Date().getTime());
 
 const CustomInputTypeForm: FC<Props> = (props) => {
   const { t } = useLocale();
@@ -28,10 +37,23 @@ const CustomInputTypeForm: FC<Props> = (props) => {
     { value: EventTypeCustomInputType.TEXTLONG, label: t("multiline_text") },
     { value: EventTypeCustomInputType.NUMBER, label: t("number") },
     { value: EventTypeCustomInputType.BOOL, label: t("checkbox") },
+    {
+      value: EventTypeCustomInputType.RADIO,
+      label: t("radio"),
+    },
+    { value: EventTypeCustomInputType.PHONE, label: t("phone_number") },
   ];
+
   const { selectedCustomInput } = props;
-  const defaultValues = selectedCustomInput || { type: inputOptions[0].value };
-  const { register, control, handleSubmit } = useForm<IFormInput>({
+
+  const defaultValues = selectedCustomInput
+    ? { ...selectedCustomInput, id: selectedCustomInput?.id || randomId() }
+    : {
+        id: randomId(),
+        type: EventTypeCustomInputType.TEXT,
+      };
+
+  const { register, control, getValues } = useForm<IFormInput>({
     defaultValues,
   });
   const selectedInputType = useWatch({ name: "type", control });
@@ -42,7 +64,7 @@ const CustomInputTypeForm: FC<Props> = (props) => {
   };
 
   return (
-    <form onSubmit={handleSubmit(props.onSubmit)} className="flex flex-col space-y-4">
+    <div className="flex flex-col space-y-4">
       <div>
         <label htmlFor="type" className="block text-sm font-medium text-gray-700">
           {t("input_type")}
@@ -56,7 +78,7 @@ const CustomInputTypeForm: FC<Props> = (props) => {
               defaultValue={selectedInputOption}
               options={inputOptions}
               isSearchable={false}
-              className="mt-1 mb-2 block w-full min-w-0 flex-1  text-sm"
+              className="mt-1 mb-2 block w-full min-w-0 flex-1 text-sm"
               onChange={(option) => option && field.onChange(option.value)}
               value={selectedInputOption}
               onBlur={field.onBlur}
@@ -85,6 +107,10 @@ const CustomInputTypeForm: FC<Props> = (props) => {
           {...register("placeholder")}
         />
       )}
+      {selectedInputType === EventTypeCustomInputType.RADIO && (
+        <RadioInputHandler control={control} register={register} />
+      )}
+
       <div className="flex h-5 items-center">
         <input
           id="required"
@@ -109,14 +135,79 @@ const CustomInputTypeForm: FC<Props> = (props) => {
         value={selectedCustomInput?.id || -1}
         {...register("id", { valueAsNumber: true })}
       />
-      <div className="mt-5 flex justify-end space-x-2 sm:mt-4">
-        <Button onClick={onCancel} type="button" color="secondary" className="ltr:mr-2">
+      <div className="mt-5 flex justify-end space-x-2 rtl:space-x-reverse sm:mt-4">
+        <Button onClick={onCancel} type="button" color="secondary" className="ltr:mr-2 rtl:ml-2">
           {t("cancel")}
         </Button>
-        <Button type="submit">{t("save")}</Button>
+        <Button
+          type="button"
+          onClick={() => {
+            props.onSubmit(getValues());
+          }}>
+          {t("save")}
+        </Button>
       </div>
-    </form>
+    </div>
   );
 };
 
+function RadioInputHandler({
+  register,
+  control,
+}: {
+  register: UseFormRegister<IFormInput>;
+  control: Control<IFormInput>;
+}) {
+  const { t } = useLocale();
+  const { fields, append, remove } = useFieldArray<IFormInput>({
+    control,
+    name: "options",
+    shouldUnregister: true,
+  });
+  const [animateRef] = useAutoAnimate<HTMLUListElement>();
+
+  return (
+    <div className="flex flex-col ">
+      <Label htmlFor="radio_options">{t("options")}</Label>
+      <ul
+        className="flex max-h-80 w-full flex-col space-y-1 overflow-y-scroll rounded-md bg-gray-50 p-4"
+        ref={animateRef}>
+        <>
+          {fields.map((option, index) => (
+            <li key={`${option.id}`}>
+              <TextField
+                id={option.id}
+                placeholder={t("enter_option", { index: index + 1 })}
+                addOnFilled={false}
+                label={t("option", { index: index + 1 })}
+                labelSrOnly
+                {...register(`options.${index}.label` as const, { required: true })}
+                addOnSuffix={
+                  <Button
+                    variant="icon"
+                    color="minimal"
+                    StartIcon={FiX}
+                    onClick={() => {
+                      remove(index);
+                    }}
+                  />
+                }
+              />
+            </li>
+          ))}
+          <Button
+            color="minimal"
+            StartIcon={FiPlus}
+            className="!text-sm !font-medium"
+            onClick={() => {
+              append({ label: "", type: "text" });
+            }}>
+            {t("add_an_option")}
+          </Button>
+        </>
+      </ul>
+    </div>
+  );
+}
+
 export default CustomInputTypeForm;

apps/web/components/eventtype/EditLocationDialog.tsx

@@ -1,347 +0,0 @@
-import { ErrorMessage } from "@hookform/error-message";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { isValidPhoneNumber } from "libphonenumber-js";
-import { Trans } from "next-i18next";
-import { useEffect } from "react";
-import { Controller, useForm, useWatch } from "react-hook-form";
-import { z } from "zod";
-
-import {
-  LocationType,
-  getEventLocationType,
-  EventLocationType,
-  getHumanReadableLocationValue,
-  getMessageForOrganizer,
-  LocationObject,
-} from "@calcom/app-store/locations";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components";
-import { Label, Form } from "@calcom/ui/components/form";
-import PhoneInput from "@calcom/ui/form/PhoneInputLazy";
-import { Dialog, DialogContent } from "@calcom/ui/v2";
-import { Select } from "@calcom/ui/v2/";
-
-import { QueryCell } from "@lib/QueryCell";
-
-import { LinkText } from "@components/ui/LinkText";
-import CheckboxField from "@components/ui/form/CheckboxField";
-
-type BookingItem = RouterOutputs["viewer"]["bookings"]["get"]["bookings"][number];
-
-type OptionTypeBase = {
-  label: string;
-  value: EventLocationType["type"];
-  disabled?: boolean;
-};
-
-interface ISetLocationDialog {
-  saveLocation: (newLocationType: EventLocationType["type"], details: { [key: string]: string }) => void;
-  selection?: OptionTypeBase;
-  booking?: BookingItem;
-  defaultValues?: LocationObject[];
-  setShowLocationModal: React.Dispatch<React.SetStateAction<boolean>>;
-  isOpenDialog: boolean;
-  setSelectedLocation?: (param: OptionTypeBase | undefined) => void;
-}
-
-const LocationInput = (props: {
-  eventLocationType: EventLocationType;
-  locationFormMethods: ReturnType<typeof useForm>;
-  id: string;
-  required: boolean;
-  placeholder: string;
-  className?: string;
-  defaultValue?: string;
-}): JSX.Element | null => {
-  const { eventLocationType, locationFormMethods, ...remainingProps } = props;
-  if (eventLocationType?.organizerInputType === "text") {
-    return (
-      <input {...locationFormMethods.register(eventLocationType.variable)} type="text" {...remainingProps} />
-    );
-  } else if (eventLocationType?.organizerInputType === "phone") {
-    return (
-      <PhoneInput
-        name={eventLocationType.variable}
-        control={locationFormMethods.control}
-        {...remainingProps}
-      />
-    );
-  }
-  return null;
-};
-
-export const EditLocationDialog = (props: ISetLocationDialog) => {
-  const {
-    saveLocation,
-    selection,
-    booking,
-    setShowLocationModal,
-    isOpenDialog,
-    defaultValues,
-    setSelectedLocation,
-  } = props;
-  const { t } = useLocale();
-  const locationsQuery = trpc.viewer.locationOptions.useQuery();
-
-  useEffect(() => {
-    if (selection) {
-      locationFormMethods.setValue("locationType", selection?.value);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selection]);
-
-  const locationFormSchema = z.object({
-    locationType: z.string(),
-    phone: z.string().optional(),
-    locationAddress: z.string().optional(),
-    locationLink: z
-      .string()
-      .optional()
-      .superRefine((val, ctx) => {
-        if (
-          eventLocationType &&
-          !eventLocationType.default &&
-          eventLocationType.linkType === "static" &&
-          eventLocationType.urlRegExp
-        ) {
-          const valid = z
-            .string()
-            .regex(new RegExp(eventLocationType.urlRegExp || ""))
-            .safeParse(val).success;
-          if (!valid) {
-            const sampleUrl = eventLocationType.organizerInputPlaceholder;
-            ctx.addIssue({
-              code: z.ZodIssueCode.custom,
-              message: `Invalid URL for ${eventLocationType.label}. ${
-                sampleUrl ? "Sample URL: " + sampleUrl : ""
-              }`,
-            });
-          }
-          return;
-        }
-
-        const valid = z.string().url().optional().safeParse(val).success;
-        if (!valid) {
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: `Invalid URL`,
-          });
-        }
-        return;
-      }),
-    displayLocationPublicly: z.boolean().optional(),
-    locationPhoneNumber: z
-      .string()
-      .refine((val) => isValidPhoneNumber(val))
-      .optional(),
-  });
-
-  const locationFormMethods = useForm({
-    mode: "onSubmit",
-    resolver: zodResolver(locationFormSchema),
-  });
-
-  const selectedLocation = useWatch({
-    control: locationFormMethods.control,
-    name: "locationType",
-  });
-
-  const eventLocationType = getEventLocationType(selectedLocation);
-
-  const defaultLocation = defaultValues?.find(
-    (location: { type: EventLocationType["type"] }) => location.type === eventLocationType?.type
-  );
-
-  const LocationOptions = (() => {
-    if (eventLocationType && eventLocationType.organizerInputType && LocationInput) {
-      if (!eventLocationType.variable) {
-        console.error("eventLocationType.variable can't be undefined");
-        return null;
-      }
-
-      return (
-        <div>
-          <div>
-            <Label htmlFor="locationInput">{t(eventLocationType.messageForOrganizer || "")}</Label>
-            <LocationInput
-              locationFormMethods={locationFormMethods}
-              eventLocationType={eventLocationType}
-              id="locationInput"
-              placeholder={t(eventLocationType.organizerInputPlaceholder || "")}
-              required
-              className="block w-full rounded-md border-gray-300 text-sm"
-              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              defaultValue={
-                (defaultLocation && defaultLocation[eventLocationType.defaultValueVariable]) || ""
-              }
-            />
-            <ErrorMessage
-              errors={locationFormMethods.formState.errors}
-              name={eventLocationType.variable}
-              className="mt-1 text-sm text-red-500"
-              as="p"
-            />
-          </div>
-          {!booking && (
-            <div className="mt-3">
-              <Controller
-                name="displayLocationPublicly"
-                control={locationFormMethods.control}
-                render={() => (
-                  <CheckboxField
-                    defaultChecked={defaultLocation?.displayLocationPublicly}
-                    description={t("display_location_label")}
-                    onChange={(e) =>
-                      locationFormMethods.setValue("displayLocationPublicly", e.target.checked)
-                    }
-                    informationIconText={t("display_location_info_badge")}
-                  />
-                )}
-              />
-            </div>
-          )}
-        </div>
-      );
-    } else {
-      return <p className="text-sm">{getMessageForOrganizer(selectedLocation, t)}</p>;
-    }
-  })();
-
-  return (
-    <Dialog open={isOpenDialog}>
-      <DialogContent
-        type="creation"
-        Icon={Icon.FiMapPin}
-        useOwnActionButtons
-        title={t("edit_location")}
-        description={!booking ? t("this_input_will_shown_booking_this_event") : undefined}>
-        {booking && (
-          <>
-            <p className="mt-6 mb-2 ml-1 text-sm font-bold text-black">{t("current_location")}:</p>
-            <p className="mb-2 ml-1 text-sm text-black">
-              {getHumanReadableLocationValue(booking.location, t)}
-            </p>
-          </>
-        )}
-        <Form
-          form={locationFormMethods}
-          className="space-y-4"
-          handleSubmit={async (values) => {
-            const { locationType: newLocation, displayLocationPublicly } = values;
-
-            let details = {};
-            if (newLocation === LocationType.AttendeeInPerson) {
-              details = {
-                address: values.locationAddress,
-              };
-            }
-
-            if (newLocation === LocationType.InPerson) {
-              details = {
-                address: values.locationAddress,
-              };
-            }
-            const eventLocationType = getEventLocationType(newLocation);
-
-            // TODO: There can be a property that tells if it is to be saved in `link`
-            if (
-              newLocation === LocationType.Link ||
-              (!eventLocationType?.default && eventLocationType?.linkType === "static")
-            ) {
-              details = { link: values.locationLink };
-            }
-
-            if (newLocation === LocationType.UserPhone) {
-              details = { hostPhoneNumber: values.locationPhoneNumber };
-            }
-
-            if (eventLocationType?.organizerInputType) {
-              details = {
-                ...details,
-                displayLocationPublicly,
-              };
-            }
-
-            saveLocation(newLocation, details);
-            setShowLocationModal(false);
-            setSelectedLocation?.(undefined);
-            locationFormMethods.unregister([
-              "locationType",
-              "locationLink",
-              "locationAddress",
-              "locationPhoneNumber",
-            ]);
-          }}>
-          <QueryCell
-            query={locationsQuery}
-            success={({ data: locationOptions }) => {
-              if (!locationOptions.length) return null;
-              return (
-                <Controller
-                  name="locationType"
-                  control={locationFormMethods.control}
-                  render={() => (
-                    <Select
-                      maxMenuHeight={150}
-                      name="location"
-                      defaultValue={selection}
-                      options={
-                        booking
-                          ? locationOptions.filter((location) => location.value !== "phone")
-                          : locationOptions
-                      }
-                      isSearchable={false}
-                      onChange={(val) => {
-                        if (val) {
-                          locationFormMethods.setValue("locationType", val.value);
-                          locationFormMethods.unregister([
-                            "locationLink",
-                            "locationAddress",
-                            "locationPhoneNumber",
-                          ]);
-                          locationFormMethods.clearErrors([
-                            "locationLink",
-                            "locationPhoneNumber",
-                            "locationAddress",
-                          ]);
-                          setSelectedLocation?.(val);
-                        }
-                      }}
-                    />
-                  )}
-                />
-              );
-            }}
-          />
-          {selectedLocation && LocationOptions}
-          <div className="mt-5">
-            <p className="text-sm text-gray-400">
-              <Trans i18nKey="cant_find_the_right_video_app_visit_our_app_store">
-                Can&apos;t find the right video app? Visit our
-                <LinkText href="/apps/categories/video" classNameChildren="text-blue-400" target="_blank">
-                  App Store
-                </LinkText>
-                .
-              </Trans>
-            </p>
-          </div>
-          <div className="mt-4 flex justify-end space-x-2">
-            <Button
-              onClick={() => {
-                setShowLocationModal(false);
-                setSelectedLocation?.(undefined);
-                locationFormMethods.unregister("locationType");
-              }}
-              type="button"
-              color="secondary">
-              {t("cancel")}
-            </Button>
-            <Button type="submit">{t("update")}</Button>
-          </div>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-};

apps/web/components/eventtype/EventAdvancedTab.tsx

@@ -1,21 +1,35 @@
-import { EventTypeCustomInput } from "@prisma/client/";
 import Link from "next/link";
-import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
+import type { CustomInputParsed, EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
 import { useEffect, useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import short from "short-uuid";
 import { v5 as uuidv5 } from "uuid";
 
 import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
-import { CAL_URL } from "@calcom/lib/constants";
+import CustomInputItem from "@calcom/features/eventtypes/components/CustomInputItem";
+import { APP_NAME, CAL_URL, IS_SELF_HOSTED } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui";
-import { Checkbox, Button, TextField, Label } from "@calcom/ui/components";
-import { CustomInputItem, Dialog, DialogContent, SettingsToggle, showToast, Tooltip } from "@calcom/ui/v2";
+import {
+  Badge,
+  Button,
+  Checkbox,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  Label,
+  SettingsToggle,
+  showToast,
+  TextField,
+  Tooltip,
+} from "@calcom/ui";
+import { FiEdit, FiCopy, FiPlus } from "@calcom/ui/components/icon";
 
 import CustomInputTypeForm from "@components/eventtype/CustomInputTypeForm";
 
+import RequiresConfirmationController from "./RequiresConfirmationController";
+
 const generateHashedLink = (id: number) => {
   const translator = short();
   const seed = `${id}:${new Date().getTime()}`;
@@ -23,7 +37,19 @@ const generateHashedLink = (id: number) => {
   return uid;
 };
 
-export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered, "eventType" | "team">) => {
+const getRandomId = (length = 8) => {
+  return (
+    -1 *
+    parseInt(
+      Math.ceil(Math.random() * Date.now())
+        .toPrecision(length)
+        .toString()
+        .replace(".", "")
+    )
+  );
+};
+
+export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps, "eventType" | "team">) => {
   const connectedCalendarsQuery = trpc.viewer.connectedCalendars.useQuery();
   const formMethods = useFormContext<FormValues>();
   const { t } = useLocale();
@@ -31,13 +57,13 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
   const [hashedLinkVisible, setHashedLinkVisible] = useState(!!eventType.hashedLink);
   const [redirectUrlVisible, setRedirectUrlVisible] = useState(!!eventType.successRedirectUrl);
   const [hashedUrl, setHashedUrl] = useState(eventType.hashedLink?.link);
-  const [customInputs, setCustomInputs] = useState<EventTypeCustomInput[]>(
+  const [customInputs, setCustomInputs] = useState<CustomInputParsed[]>(
     eventType.customInputs.sort((a, b) => a.id - b.id) || []
   );
-  const [selectedCustomInput, setSelectedCustomInput] = useState<EventTypeCustomInput | undefined>(undefined);
+  const [selectedCustomInput, setSelectedCustomInput] = useState<CustomInputParsed | undefined>(undefined);
   const [selectedCustomInputModalOpen, setSelectedCustomInputModalOpen] = useState(false);
+  const [requiresConfirmation, setRequiresConfirmation] = useState(eventType.requiresConfirmation);
   const placeholderHashedLink = `${CAL_URL}/d/${hashedUrl}/${eventType.slug}`;
-
   const seatsEnabled = formMethods.getValues("seatsPerTimeSlotEnabled");
 
   const removeCustom = (index: number) => {
@@ -50,6 +76,12 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
     !hashedUrl && setHashedUrl(generateHashedLink(eventType.users[0]?.id ?? team?.id));
   }, [eventType.users, hashedUrl, team?.id]);
 
+  useEffect(() => {
+    if (eventType.customInputs) {
+      setCustomInputs(eventType.customInputs.sort((a, b) => a.id - b.id));
+    }
+  }, [eventType.customInputs]);
+
   return (
     <div className="flex flex-col space-y-8">
       {/**
@@ -61,10 +93,11 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
         <div className="flex flex-col">
           <div className="flex justify-between">
             <Label>{t("add_to_calendar")}</Label>
-            <Link href="/apps/categories/calendar">
-              <a target="_blank" className="text-sm text-gray-600 hover:text-gray-900">
-                {t("add_another_calendar")}
-              </a>
+            <Link
+              href="/apps/categories/calendar"
+              target="_blank"
+              className="text-sm text-gray-600 hover:text-gray-900">
+              {t("add_another_calendar")}
             </Link>
           </div>
           <div className="-mt-1 w-full">
@@ -89,16 +122,16 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
         <TextField
           label={t("event_name")}
           type="text"
-          placeholder={t("meeting_with_user")}
+          placeholder={t("meeting_with_user", { attendeeName: eventType.users[0]?.name })}
           defaultValue={eventType.eventName || ""}
           {...formMethods.register("eventName")}
           addOnSuffix={
             <Button
               type="button"
-              StartIcon={Icon.FiEdit}
-              size="icon"
+              StartIcon={FiEdit}
+              variant="icon"
               color="minimal"
-              className="hover:stroke-3 hover:bg-transparent hover:text-black"
+              className="hover:stroke-3 min-w-fit px-0 hover:bg-transparent hover:text-black"
               onClick={() => setShowEventNameTip((old) => !old)}
             />
           }
@@ -113,15 +146,13 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
           onCheckedChange={(e) => {
             if (e && customInputs.length === 0) {
               // Push a placeholders
-              setSelectedCustomInput(undefined);
               setSelectedCustomInputModalOpen(true);
             } else if (!e) {
-              setCustomInputs([]);
               formMethods.setValue("customInputs", []);
             }
           }}>
-          <ul className="my-4">
-            {customInputs.map((customInput: EventTypeCustomInput, idx: number) => (
+          <ul className="my-4 rounded-md border">
+            {customInputs.map((customInput, idx) => (
               <CustomInputItem
                 key={idx}
                 question={customInput.label}
@@ -137,31 +168,24 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
           </ul>
           {customInputs.length > 0 && (
             <Button
-              StartIcon={Icon.FiPlus}
+              StartIcon={FiPlus}
               color="minimal"
               type="button"
               onClick={() => {
                 setSelectedCustomInput(undefined);
                 setSelectedCustomInputModalOpen(true);
               }}>
-              Add an input
+              {t("add_input")}
             </Button>
           )}
         </SettingsToggle>
       </div>
       <hr />
-      <Controller
-        name="requiresConfirmation"
-        defaultValue={eventType.requiresConfirmation}
-        render={({ field: { value, onChange } }) => (
-          <SettingsToggle
-            title={t("requires_confirmation")}
-            description={t("requires_confirmation_description")}
-            checked={value}
-            onCheckedChange={(e) => onChange(e)}
-            disabled={seatsEnabled}
-          />
-        )}
+      <RequiresConfirmationController
+        seatsEnabled={seatsEnabled}
+        metadata={eventType.metadata}
+        requiresConfirmation={requiresConfirmation}
+        onRequiresConfirmation={setRequiresConfirmation}
       />
       <hr />
       <Controller
@@ -234,17 +258,32 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
                   defaultValue={eventType.successRedirectUrl || ""}
                   {...formMethods.register("successRedirectUrl")}
                 />
+                <div className="mt-2 flex">
+                  <Checkbox
+                    description={t("disable_success_page")}
+                    // Disable if it's not Self Hosted or if the redirect url is not set
+                    disabled={!IS_SELF_HOSTED || !formMethods.watch("successRedirectUrl")}
+                    {...formMethods.register("metadata.disableSuccessPage")}
+                  />
+                  {/*TODO: Extract it out into a component when used more than once*/}
+                  {!IS_SELF_HOSTED && (
+                    <Link href="https://cal.com/pricing" target="_blank">
+                      <Badge variant="orange" className="ml-2">
+                        Platform Only
+                      </Badge>
+                    </Link>
+                  )}
+                </div>
               </div>
             </SettingsToggle>
           </>
         )}
       />
       <hr />
-
       <SettingsToggle
         data-testid="hashedLinkCheck"
         title={t("private_link")}
-        description={t("private_link_description")}
+        description={t("private_link_description", { appName: APP_NAME })}
         checked={hashedLinkVisible}
         onCheckedChange={(e) => {
           formMethods.setValue("hashedLink", e ? hashedUrl : undefined);
@@ -275,7 +314,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
                   }}
                   className="hover:stroke-3 hover:bg-transparent hover:text-black"
                   type="button">
-                  <Icon.FiCopy />
+                  <FiCopy />
                 </Button>
               </Tooltip>
             }
@@ -297,6 +336,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
               if (e) {
                 formMethods.setValue("disableGuests", true);
                 formMethods.setValue("requiresConfirmation", false);
+                setRequiresConfirmation(false);
                 formMethods.setValue("seatsPerTimeSlot", 2);
               } else {
                 formMethods.setValue("seatsPerTimeSlot", null);
@@ -342,15 +382,11 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
           <DialogContent
             title={t("custom_event_name")}
             description={t("custom_event_name_description")}
-            type="creation"
-            actionText="Create"
-            // Set event name back to what it was on close
-            actionOnClose={() => formMethods.setValue("eventName", eventType.eventName ?? "")}
-            actionOnClick={() => setShowEventNameTip(false)}>
+            type="creation">
             <TextField
               label={t("event_name")}
               type="text"
-              placeholder={t("meeting_with_user")}
+              placeholder={t("meeting_with_user", { attendeeName: eventType.users[0]?.name })}
               defaultValue={eventType.eventName || ""}
               {...formMethods.register("eventName")}
             />
@@ -360,42 +396,61 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
               <p>{`{HOST/ATTENDEE} = ${t("dynamically_display_attendee_or_organizer")}`}</p>
               <p>{`{LOCATION} = ${t("event_location")}`}</p>
             </div>
+            <DialogFooter>
+              <Button color="primary" onClick={() => setShowEventNameTip(false)}>
+                {t("create")}
+              </Button>
+              <DialogClose onClick={() => formMethods.setValue("eventName", eventType.eventName ?? "")} />
+            </DialogFooter>
           </DialogContent>
         </Dialog>
       )}
       <Controller
         name="customInputs"
         control={formMethods.control}
-        defaultValue={eventType.customInputs.sort((a, b) => a.id - b.id) || []}
+        defaultValue={customInputs}
         render={() => (
           <Dialog open={selectedCustomInputModalOpen} onOpenChange={setSelectedCustomInputModalOpen}>
             <DialogContent
               type="creation"
-              Icon={Icon.FiPlus}
+              Icon={FiPlus}
               title={t("add_new_custom_input_field")}
-              useOwnActionButtons
               description={t("this_input_will_shown_booking_this_event")}>
               <CustomInputTypeForm
                 selectedCustomInput={selectedCustomInput}
                 onSubmit={(values) => {
-                  const customInput: EventTypeCustomInput = {
-                    id: -1,
+                  const customInput: CustomInputParsed = {
+                    id: getRandomId(),
                     eventTypeId: -1,
                     label: values.label,
                     placeholder: values.placeholder,
                     required: values.required,
                     type: values.type,
+                    options: values.options,
+                    hasToBeCreated: true,
                   };
-
                   if (selectedCustomInput) {
                     selectedCustomInput.label = customInput.label;
                     selectedCustomInput.placeholder = customInput.placeholder;
                     selectedCustomInput.required = customInput.required;
                     selectedCustomInput.type = customInput.type;
+                    selectedCustomInput.options = customInput.options || undefined;
+                    selectedCustomInput.hasToBeCreated = false;
+                    // Update by id
+                    const inputIndex = customInputs.findIndex((input) => input.id === values.id);
+                    customInputs[inputIndex] = selectedCustomInput;
+                    setCustomInputs(customInputs);
+                    formMethods.setValue("customInputs", customInputs);
                   } else {
-                    setCustomInputs(customInputs.concat(customInput));
-                    formMethods.setValue("customInputs", customInputs.concat(customInput));
+                    const concatted = customInputs.concat({
+                      ...customInput,
+                      options: customInput.options,
+                    });
+                    console.log(concatted);
+                    setCustomInputs(concatted);
+                    formMethods.setValue("customInputs", concatted);
                   }
+
                   setSelectedCustomInputModalOpen(false);
                 }}
                 onCancel={() => {

apps/web/components/eventtype/EventAppsTab.tsx

@@ -1,47 +1,18 @@
-import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
-import React from "react";
+import { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
 import { useFormContext } from "react-hook-form";
 
-import EventTypeAppContext, { GetAppData, SetAppData } from "@calcom/app-store/EventTypeAppContext";
-import { EventTypeAddonMap } from "@calcom/app-store/apps.browser.generated";
+import { GetAppData, SetAppData } from "@calcom/app-store/EventTypeAppContext";
+import { EventTypeAppCard } from "@calcom/app-store/_components/EventTypeAppCardInterface";
 import { EventTypeAppCardComponentProps } from "@calcom/app-store/types";
 import { EventTypeAppsList } from "@calcom/app-store/utils";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui";
-import ErrorBoundary from "@calcom/ui/ErrorBoundary";
-import { Button } from "@calcom/ui/components";
-import { EmptyScreen } from "@calcom/ui/v2";
+import { trpc } from "@calcom/trpc/react";
+import { Button, EmptyScreen } from "@calcom/ui";
+import { FiGrid } from "@calcom/ui/components/icon";
 
-type EventType = Pick<EventTypeSetupInfered, "eventType">["eventType"] &
+export type EventType = Pick<EventTypeSetupProps, "eventType">["eventType"] &
   EventTypeAppCardComponentProps["eventType"];
 
-function AppCardWrapper({
-  app,
-  eventType,
-  getAppData,
-  setAppData,
-}: {
-  app: RouterOutputs["viewer"]["apps"][number];
-  eventType: EventType;
-  getAppData: GetAppData;
-  setAppData: SetAppData;
-}) {
-  const dirName = app.slug === "stripe" ? "stripepayment" : app.slug;
-  const Component = EventTypeAddonMap[dirName as keyof typeof EventTypeAddonMap];
-
-  if (!Component) {
-    throw new Error('No component found for "' + dirName + '"');
-  }
-  return (
-    <ErrorBoundary message={`There is some problem with ${app.name} App`}>
-      <EventTypeAppContext.Provider value={[getAppData, setAppData]}>
-        <Component key={app.slug} app={app} eventType={eventType} />
-      </EventTypeAppContext.Provider>
-    </ErrorBoundary>
-  );
-}
-
 export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
   const { t } = useLocale();
   const { data: eventTypeApps, isLoading } = trpc.viewer.apps.useQuery({
@@ -90,7 +61,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
         <div className="before:border-0">
           {!isLoading && !installedApps?.length ? (
             <EmptyScreen
-              Icon={Icon.FiGrid}
+              Icon={FiGrid}
               headline={t("empty_installed_apps_headline")}
               description={t("empty_installed_apps_description")}
               buttonRaw={
@@ -101,7 +72,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
             />
           ) : null}
           {installedApps?.map((app) => (
-            <AppCardWrapper
+            <EventTypeAppCard
               getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}
               setAppData={getAppDataSetter(app.slug as EventTypeAppsList)}
               key={app.slug}
@@ -117,7 +88,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
         ) : null}
         <div className="before:border-0">
           {notInstalledApps?.map((app) => (
-            <AppCardWrapper
+            <EventTypeAppCard
               getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}
               setAppData={getAppDataSetter(app.slug as EventTypeAppsList)}
               key={app.slug}

apps/web/components/eventtype/EventLimitsTab.tsx

@@ -1,8 +1,8 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import * as RadioGroup from "@radix-ui/react-radio-group";
-import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
-import { useMemo, useRef, useState } from "react";
-import { Controller, useFormContext, useWatch } from "react-hook-form";
+import { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
+import React, { useEffect, useState } from "react";
+import { Controller, useFormContext, UseFormRegisterReturn, useWatch } from "react-hook-form";
 
 import { classNames } from "@calcom/lib";
 import convertToNewDurationType, { DurationType } from "@calcom/lib/convertToNewDurationType";
@@ -10,19 +10,98 @@ import findDurationType from "@calcom/lib/findDurationType";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { PeriodType } from "@calcom/prisma/client";
 import type { BookingLimit } from "@calcom/types/Calendar";
-import { Icon } from "@calcom/ui";
-import { Button } from "@calcom/ui/components";
-import { Input, InputField, Label } from "@calcom/ui/components/form";
-import { Select, SettingsToggle } from "@calcom/ui/v2";
-import DateRangePicker from "@calcom/ui/v2/core/form/date-range-picker/DateRangePicker";
+import { Button, DateRangePicker, Input, InputField, Label, Select, SettingsToggle } from "@calcom/ui";
+import { FiPlus, FiTrash } from "@calcom/ui/components/icon";
 
-export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupInfered, "eventType">) => {
+const MinimumBookingNoticeInput = React.forwardRef<
+  HTMLInputElement,
+  Omit<UseFormRegisterReturn<"minimumBookingNotice">, "ref">
+>(function MinimumBookingNoticeInput({ ...passThroughProps }, ref) {
+  const { t } = useLocale();
+  const { setValue, getValues } = useFormContext<FormValues>();
+  const durationTypeOptions: {
+    value: DurationType;
+    label: string;
+  }[] = [
+    {
+      label: t("minutes"),
+      value: "minutes",
+    },
+    {
+      label: t("hours"),
+      value: "hours",
+    },
+    {
+      label: t("days"),
+      value: "days",
+    },
+  ];
+
+  const [minimumBookingNoticeDisplayValues, setMinimumBookingNoticeDisplayValues] = useState<{
+    type: DurationType;
+    value: number;
+  }>({
+    type: findDurationType(getValues(passThroughProps.name)),
+    value: convertToNewDurationType(
+      "minutes",
+      findDurationType(getValues(passThroughProps.name)),
+      getValues(passThroughProps.name)
+    ),
+  });
+  // keep hidden field in sync with minimumBookingNoticeDisplayValues
+  useEffect(() => {
+    setValue(
+      passThroughProps.name,
+      convertToNewDurationType(
+        minimumBookingNoticeDisplayValues.type,
+        "minutes",
+        minimumBookingNoticeDisplayValues.value
+      )
+    );
+  }, [minimumBookingNoticeDisplayValues, setValue, passThroughProps.name]);
+
+  return (
+    <div className="flex items-end justify-end">
+      <div className="w-1/2 md:w-full">
+        <InputField
+          required
+          defaultValue={minimumBookingNoticeDisplayValues.value}
+          onChange={(e) =>
+            setMinimumBookingNoticeDisplayValues({
+              ...minimumBookingNoticeDisplayValues,
+              value: parseInt(e.target.value || "0", 10),
+            })
+          }
+          label={t("minimum_booking_notice")}
+          type="number"
+          placeholder="0"
+          className="mb-0 h-[38px] rounded-[4px] ltr:mr-2 rtl:ml-2"
+        />
+        <input type="hidden" ref={ref} {...passThroughProps} />
+      </div>
+      <Select
+        isSearchable={false}
+        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
+        )}
+        onChange={(input) => {
+          if (input) {
+            setMinimumBookingNoticeDisplayValues({
+              ...minimumBookingNoticeDisplayValues,
+              type: input.value,
+            });
+          }
+        }}
+        options={durationTypeOptions}
+      />
+    </div>
+  );
+});
+
+export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventType">) => {
   const { t } = useLocale();
   const formMethods = useFormContext<FormValues>();
-  const minimumBookingNoticeType = useRef<DurationType>(findDurationType(eventType.minimumBookingNotice));
-  const prevBookingNoticeType = useRef<DurationType>(minimumBookingNoticeType.current);
-
-  const minimumBookingNoticeInDurationTypeFormValue = formMethods.watch("minimumBookingNoticeInDurationType");
 
   const PERIOD_TYPES = [
     {
@@ -53,212 +132,115 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupInfered, "event
     defaultValue: periodType?.type,
   });
 
-  const onMinimumNoticeDurationTypeChange = useMemo(
-    () => (durationType?: DurationType) => {
-      if (typeof durationType === "undefined") return;
-
-      // Store current selected type in ref to use in previous run for comparrison.
-      minimumBookingNoticeType.current = durationType;
-
-      // Uses the previous selected type and converts the value to the new type.
-      // Eg day was selected before, user selects hours now, so we multiple * 24 and round up.
-      const minimumBookingNoticeInDurationType = convertToNewDurationType(
-        prevBookingNoticeType.current,
-        durationType,
-        Number(minimumBookingNoticeInDurationTypeFormValue)
-      );
-
-      // Uses the round up value in the new type to calculate the value in minutes.
-      // We should NOT use minimumBookingNoticeInDurationTypeFormValue here, since that
-      // would break in the case that the user enters 90 minutes, changes the type to
-      // hours (that will show 2 hours), but the value in minutes would then remain 90,
-      // which is something else than the user things they save.
-      const minimumBookingNoticeInMinutes = convertToNewDurationType(
-        durationType,
-        "minutes",
-        Number(minimumBookingNoticeInDurationType)
-      );
-
-      // Updates both form values as well as stores the current type as previous type in ref.
-      formMethods.setValue("minimumBookingNotice", minimumBookingNoticeInMinutes);
-      formMethods.setValue("minimumBookingNoticeInDurationType", minimumBookingNoticeInDurationType);
-      prevBookingNoticeType.current = durationType;
-    },
-    [formMethods, minimumBookingNoticeInDurationTypeFormValue]
-  );
-
-  /**
-   * When the user inputs a new value for minimumBookingNoticeInDurationType,
-   * we calculate the value in minutes, and update this hidden field as well.
-   */
-  const onMinimumNoticeChange = useMemo(
-    () => (duration: string) => {
-      const minimumBookingNoticeInMinutes = convertToNewDurationType(
-        minimumBookingNoticeType.current,
-        "minutes",
-        Number(duration)
-      );
-
-      formMethods.setValue("minimumBookingNotice", minimumBookingNoticeInMinutes);
-    },
-    [formMethods]
-  );
-
   return (
-    <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="beforeBufferTime">{t("before_event")} </Label>
-          <Controller
-            name="beforeBufferTime"
-            control={formMethods.control}
-            defaultValue={eventType.beforeEventBuffer || 0}
-            render={({ field: { onChange, value } }) => {
-              const beforeBufferOptions = [
-                {
-                  label: t("event_buffer_default"),
-                  value: 0,
-                },
-                ...[5, 10, 15, 20, 30, 45, 60, 90, 120].map((minutes) => ({
-                  label: minutes + " " + t("minutes"),
-                  value: minutes,
-                })),
-              ];
-              return (
-                <Select
-                  isSearchable={false}
-                  onChange={(val) => {
-                    if (val) onChange(val.value);
-                  }}
-                  defaultValue={
-                    beforeBufferOptions.find((option) => option.value === value) || beforeBufferOptions[0]
-                  }
-                  options={beforeBufferOptions}
-                />
-              );
-            }}
-          />
-        </div>
-        <div className="w-full">
-          <Label htmlFor="afterBufferTime">{t("after_event")} </Label>
-          <Controller
-            name="afterBufferTime"
-            control={formMethods.control}
-            defaultValue={eventType.afterEventBuffer || 0}
-            render={({ field: { onChange, value } }) => {
-              const afterBufferOptions = [
-                {
-                  label: t("event_buffer_default"),
-                  value: 0,
-                },
-                ...[5, 10, 15, 20, 30, 45, 60, 90, 120].map((minutes) => ({
-                  label: minutes + " " + t("minutes"),
-                  value: minutes,
-                })),
-              ];
-              return (
-                <Select
-                  isSearchable={false}
-                  onChange={(val) => {
-                    if (val) onChange(val.value);
-                  }}
-                  defaultValue={
-                    afterBufferOptions.find((option) => option.value === value) || afterBufferOptions[0]
-                  }
-                  options={afterBufferOptions}
-                />
-              );
-            }}
-          />
-        </div>
-      </div>
-      <div className="flex flex-col space-y-4 pt-4 lg:flex-row lg:space-y-0 lg:space-x-4">
-        <div className="flex w-full items-end justify-end">
-          <Controller
-            name="minimumBookingNotice"
-            control={formMethods.control}
-            render={() => {
-              const durationTypeOptions = [
-                {
-                  label: t("minutes"),
-                  value: "minutes",
-                },
-                {
-                  label: t("hours"),
-                  value: "hours",
-                },
-                {
-                  label: t("days"),
-                  value: "days",
-                },
-              ];
-
-              return (
-                <>
-                  <div className="w-1/2 md:w-3/4">
-                    <InputField
-                      required
-                      label={t("minimum_booking_notice")}
-                      type="number"
-                      placeholder="120"
-                      className="mr-2 mb-0 h-[38px] rounded-[4px]"
-                      {...formMethods.register("minimumBookingNoticeInDurationType", {
-                        onChange: (event: React.ChangeEvent<HTMLInputElement>) =>
-                          onMinimumNoticeChange(event.target.value),
-                      })}
-                    />
-                    <input type="hidden" {...formMethods.register("minimumBookingNotice")} />
-                  </div>
+    <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>
+            <Controller
+              name="beforeBufferTime"
+              control={formMethods.control}
+              defaultValue={eventType.beforeEventBuffer || 0}
+              render={({ field: { onChange, value } }) => {
+                const beforeBufferOptions = [
+                  {
+                    label: t("event_buffer_default"),
+                    value: 0,
+                  },
+                  ...[5, 10, 15, 20, 30, 45, 60, 90, 120].map((minutes) => ({
+                    label: minutes + " " + t("minutes"),
+                    value: minutes,
+                  })),
+                ];
+                return (
                   <Select
                     isSearchable={false}
-                    className="mb-0 ml-2 h-[38px] w-full capitalize md:min-w-[150px] md:max-w-[200px]"
-                    defaultValue={durationTypeOptions.find(
-                      (option) => option.value === minimumBookingNoticeType.current
-                    )}
-                    onChange={(input) => onMinimumNoticeDurationTypeChange(input?.value as DurationType)}
-                    options={durationTypeOptions}
+                    onChange={(val) => {
+                      if (val) onChange(val.value);
+                    }}
+                    defaultValue={
+                      beforeBufferOptions.find((option) => option.value === value) || beforeBufferOptions[0]
+                    }
+                    options={beforeBufferOptions}
                   />
-                </>
-              );
-            }}
-          />
+                );
+              }}
+            />
+          </div>
+          <div className="w-full">
+            <Label htmlFor="afterBufferTime">{t("after_event")} </Label>
+            <Controller
+              name="afterBufferTime"
+              control={formMethods.control}
+              defaultValue={eventType.afterEventBuffer || 0}
+              render={({ field: { onChange, value } }) => {
+                const afterBufferOptions = [
+                  {
+                    label: t("event_buffer_default"),
+                    value: 0,
+                  },
+                  ...[5, 10, 15, 20, 30, 45, 60, 90, 120].map((minutes) => ({
+                    label: minutes + " " + t("minutes"),
+                    value: minutes,
+                  })),
+                ];
+                return (
+                  <Select
+                    isSearchable={false}
+                    onChange={(val) => {
+                      if (val) onChange(val.value);
+                    }}
+                    defaultValue={
+                      afterBufferOptions.find((option) => option.value === value) || afterBufferOptions[0]
+                    }
+                    options={afterBufferOptions}
+                  />
+                );
+              }}
+            />
+          </div>
         </div>
-        <div className="w-full">
-          <Label htmlFor="slotInterval">{t("slot_interval")} </Label>
-          <Controller
-            name="slotInterval"
-            control={formMethods.control}
-            render={() => {
-              const slotIntervalOptions = [
-                {
-                  label: t("slot_interval_default"),
-                  value: -1,
-                },
-                ...[5, 10, 15, 20, 30, 45, 60, 75, 90, 105, 120].map((minutes) => ({
-                  label: minutes + " " + t("minutes"),
-                  value: minutes,
-                })),
-              ];
-              return (
-                <Select
-                  isSearchable={false}
-                  onChange={(val) => {
-                    formMethods.setValue("slotInterval", val && (val.value || 0) > 0 ? val.value : null);
-                  }}
-                  defaultValue={
-                    slotIntervalOptions.find((option) => option.value === eventType.slotInterval) ||
-                    slotIntervalOptions[0]
-                  }
-                  options={slotIntervalOptions}
-                />
-              );
-            }}
-          />
+        <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")} />
+          </div>
+          <div className="w-full">
+            <Label htmlFor="slotInterval">{t("slot_interval")} </Label>
+            <Controller
+              name="slotInterval"
+              control={formMethods.control}
+              render={() => {
+                const slotIntervalOptions = [
+                  {
+                    label: t("slot_interval_default"),
+                    value: -1,
+                  },
+                  ...[5, 10, 15, 20, 30, 45, 60, 75, 90, 105, 120].map((minutes) => ({
+                    label: minutes + " " + t("minutes"),
+                    value: minutes,
+                  })),
+                ];
+                return (
+                  <Select
+                    isSearchable={false}
+                    onChange={(val) => {
+                      formMethods.setValue("slotInterval", val && (val.value || 0) > 0 ? val.value : null);
+                    }}
+                    defaultValue={
+                      slotIntervalOptions.find((option) => option.value === eventType.slotInterval) ||
+                      slotIntervalOptions[0]
+                    }
+                    options={slotIntervalOptions}
+                  />
+                );
+              }}
+            />
+          </div>
         </div>
       </div>
-
-      <hr className="my-8" />
-
+      <hr />
       <Controller
         name="bookingLimits"
         control={formMethods.control}
@@ -280,8 +262,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupInfered, "event
           </SettingsToggle>
         )}
       />
-
-      <hr className="my-8" />
+      <hr />
       <Controller
         name="periodType"
         control={formMethods.control}
@@ -289,7 +270,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupInfered, "event
           <SettingsToggle
             title={t("limit_future_bookings")}
             description={t("limit_future_bookings_description")}
-            checked={value !== "UNLIMITED"}
+            checked={value && value !== "UNLIMITED"}
             onCheckedChange={(bool) => formMethods.setValue("periodType", bool ? "ROLLING" : "UNLIMITED")}>
             <RadioGroup.Root
               defaultValue={watchPeriodType}
@@ -331,7 +312,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupInfered, "event
                       </div>
                     )}
                     {period.type === "RANGE" && (
-                      <div className="inline-flex space-x-2 ltr:ml-2 rtl:mr-2 rtl:space-x-reverse">
+                      <div className="inline-flex space-x-2 ltr:ml-2 ltr:mr-2 rtl:ml-2 rtl:space-x-reverse">
                         <Controller
                           name="periodDates"
                           control={formMethods.control}
@@ -351,7 +332,9 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupInfered, "event
                         />
                       </div>
                     )}
-                    {period.suffix ? <span className="ltr:ml-2 rtl:mr-2">&nbsp;{period.suffix}</span> : null}
+                    {period.suffix ? (
+                      <span className="ltr:ml-2 ltr:mr-2 rtl:ml-2">&nbsp;{period.suffix}</span>
+                    ) : null}
                   </div>
                 );
               })}
@@ -414,7 +397,9 @@ const BookingLimits = () => {
                 .map(([key, bookingAmount]) => {
                   const bookingLimitKey = key as BookingLimitsKey;
                   return (
-                    <div className="mb-2 flex items-center space-x-2 text-sm" key={bookingLimitKey}>
+                    <div
+                      className="mb-2 flex items-center space-x-2 text-sm rtl:space-x-reverse"
+                      key={bookingLimitKey}>
                       <Input
                         id={`${bookingLimitKey}-limit`}
                         type="number"
@@ -446,8 +431,8 @@ const BookingLimits = () => {
                         }}
                       />
                       <Button
-                        size="icon"
-                        StartIcon={Icon.FiTrash}
+                        variant="icon"
+                        StartIcon={FiTrash}
                         color="destructive"
                         onClick={() => {
                           const current = currentBookingLimits;
@@ -461,7 +446,7 @@ const BookingLimits = () => {
             {currentBookingLimits && Object.keys(currentBookingLimits).length <= 3 && (
               <Button
                 color="minimal"
-                StartIcon={Icon.FiPlus}
+                StartIcon={FiPlus}
                 onClick={() => {
                   if (!currentBookingLimits || !watchBookingLimits) return;
                   const currentKeys = Object.keys(watchBookingLimits);

apps/web/components/eventtype/EventRecurringTab.tsx

@@ -1,11 +1,10 @@
-import { EventTypeSetupInfered } from "pages/event-types/[type]";
-import { useState } from "react";
+import { EventTypeSetupProps } from "pages/event-types/[type]";
 
 import getStripeAppData from "@calcom/lib/getStripeAppData";
 
 import RecurringEventController from "./RecurringEventController";
 
-export const EventRecurringTab = ({ eventType }: Pick<EventTypeSetupInfered, "eventType">) => {
+export const EventRecurringTab = ({ eventType }: Pick<EventTypeSetupProps, "eventType">) => {
   const stripeAppData = getStripeAppData(eventType);
 
   const requirePayment = stripeAppData.price > 0;

apps/web/components/eventtype/EventSetupTab.tsx

@@ -1,40 +1,69 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { isValidPhoneNumber } from "libphonenumber-js";
-import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
+import { Trans } from "next-i18next";
+import Link from "next/link";
+import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
 import { useState } from "react";
 import { Controller, useForm, useFormContext } from "react-hook-form";
+import { MultiValue } from "react-select";
 import { z } from "zod";
 
-import { getEventLocationType, EventLocationType } from "@calcom/app-store/locations";
+import { EventLocationType, getEventLocationType, MeetLocationType } from "@calcom/app-store/locations";
 import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components";
-import { Label, TextField } from "@calcom/ui/components/form";
-import { Select, Skeleton } from "@calcom/ui/v2";
+import { Button, Label, Select, SettingsToggle, Skeleton, TextField } from "@calcom/ui";
+import { FiEdit2, FiCheck, FiX, FiPlus } from "@calcom/ui/components/icon";
 
 import { slugify } from "@lib/slugify";
 
-import { EditLocationDialog } from "@components/eventtype/EditLocationDialog";
+import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
+import LocationSelect, {
+  SingleValueLocationOption,
+  LocationOption,
+} from "@components/ui/form/LocationSelect";
 
-type OptionTypeBase = {
-  label: string;
-  value: EventLocationType["type"];
-  disabled?: boolean;
+const getLocationFromType = (
+  type: EventLocationType["type"],
+  locationOptions: Pick<EventTypeSetupProps, "locationOptions">["locationOptions"]
+) => {
+  for (const locationOption of locationOptions) {
+    const option = locationOption.options.find((option) => option.value === type);
+    if (option) {
+      return option;
+    }
+  }
 };
 
 export const EventSetupTab = (
-  props: Pick<EventTypeSetupInfered, "eventType" | "locationOptions" | "team" | "teamMembers">
+  props: Pick<EventTypeSetupProps, "eventType" | "locationOptions" | "team" | "teamMembers">
 ) => {
   const { t } = useLocale();
   const formMethods = useFormContext<FormValues>();
   const { eventType, locationOptions, team } = props;
   const [showLocationModal, setShowLocationModal] = useState(false);
-  const [selectedLocation, setSelectedLocation] = useState<OptionTypeBase | undefined>(undefined);
+  const [editingLocationType, setEditingLocationType] = useState<string>("");
+  const [selectedLocation, setSelectedLocation] = useState<LocationOption | undefined>(undefined);
+  const [multipleDuration, setMultipleDuration] = useState(eventType.metadata.multipleDuration);
+
+  const multipleDurationOptions = [5, 10, 15, 20, 25, 30, 45, 50, 60, 75, 80, 90, 120, 180].map((mins) => ({
+    value: mins,
+    label: t("multiple_duration_mins", { count: mins }),
+  }));
+
+  const [selectedMultipleDuration, setSelectedMultipleDuration] = useState<
+    MultiValue<{
+      value: number;
+      label: string;
+    }>
+  >(multipleDurationOptions.filter((mdOpt) => multipleDuration?.includes(mdOpt.value)));
+  const [defaultDuration, setDefaultDuration] = useState(
+    selectedMultipleDuration.find((opt) => opt.value === eventType.length) ?? null
+  );
 
   const openLocationModal = (type: EventLocationType["type"]) => {
-    setSelectedLocation(locationOptions.find((option) => option.value === type));
+    const option = getLocationFromType(type, locationOptions);
+    setSelectedLocation(option);
     setShowLocationModal(true);
   };
 
@@ -46,14 +75,23 @@ export const EventSetupTab = (
     );
   };
 
-  const addLocation = (newLocationType: EventLocationType["type"], details = {}) => {
-    const existingIdx = formMethods.getValues("locations").findIndex((loc) => newLocationType === loc.type);
+  const saveLocation = (newLocationType: EventLocationType["type"], details = {}) => {
+    const locationType = editingLocationType !== "" ? editingLocationType : newLocationType;
+    const existingIdx = formMethods.getValues("locations").findIndex((loc) => locationType === loc.type);
     if (existingIdx !== -1) {
       const copy = formMethods.getValues("locations");
-      copy[existingIdx] = {
-        ...formMethods.getValues("locations")[existingIdx],
-        ...details,
-      };
+      if (editingLocationType !== "") {
+        copy[existingIdx] = {
+          ...details,
+          type: newLocationType,
+        };
+      } else {
+        copy[existingIdx] = {
+          ...formMethods.getValues("locations")[existingIdx],
+          ...details,
+        };
+      }
+
       formMethods.setValue("locations", copy);
     } else {
       formMethods.setValue(
@@ -61,6 +99,8 @@ export const EventSetupTab = (
         formMethods.getValues("locations").concat({ type: newLocationType, ...details })
       );
     }
+
+    setEditingLocationType("");
     setShowLocationModal(false);
   };
 
@@ -99,17 +139,20 @@ export const EventSetupTab = (
       return true;
     });
 
+    const defaultValue = locationOptions.find((item) => item.label === "video")?.options;
     return (
       <div className="w-full">
         {validLocations.length === 0 && (
           <div className="flex">
-            <Select
+            <LocationSelect
+              defaultValue={defaultValue}
+              placeholder={t("select")}
               options={locationOptions}
               isSearchable={false}
               className="block w-full min-w-0 flex-1 rounded-sm text-sm"
-              onChange={(e) => {
+              onChange={(e: SingleValueLocationOption) => {
                 if (e?.value) {
-                  const newLocationType: EventLocationType["type"] = e.value;
+                  const newLocationType = e.value;
                   const eventLocationType = getEventLocationType(newLocationType);
                   if (!eventLocationType) {
                     return;
@@ -118,7 +161,7 @@ export const EventSetupTab = (
                   if (eventLocationType.organizerInputType) {
                     openLocationModal(newLocationType);
                   } else {
-                    addLocation(newLocationType);
+                    saveLocation(newLocationType);
                   }
                 }
               }}
@@ -133,16 +176,16 @@ export const EventSetupTab = (
                 return null;
               }
               return (
-                <li key={location.type} className="mb-2 rounded-md border border-neutral-300 py-1.5 px-2">
+                <li key={location.type} className="mb-2 rounded-md border border-gray-300 py-1.5 px-2">
                   <div className="flex max-w-full justify-between">
                     <div key={index} className="flex flex-grow items-center">
                       <img
                         src={eventLocationType.iconUrl}
-                        className="h-6 w-6"
+                        className="h-4 w-4"
                         alt={`${eventLocationType.label} logo`}
                       />
-                      <span className="truncate text-sm ltr:ml-2 rtl:mr-2">
-                        {location[eventLocationType.defaultValueVariable] || eventLocationType.label}
+                      <span className="truncate text-sm ltr:ml-1 rtl:mr-1">
+                        {t(location[eventLocationType.defaultValueVariable] || eventLocationType.label)}
                       </span>
                     </div>
                     <div className="flex">
@@ -153,23 +196,41 @@ export const EventSetupTab = (
                           locationFormMethods.unregister("locationLink");
                           locationFormMethods.unregister("locationAddress");
                           locationFormMethods.unregister("locationPhoneNumber");
+                          setEditingLocationType(location.type);
                           openLocationModal(location.type);
                         }}
                         aria-label={t("edit")}
                         className="mr-1 p-1 text-gray-500 hover:text-gray-900">
-                        <Icon.FiEdit2 className="h-4 w-4" />
+                        <FiEdit2 className="h-4 w-4" />
                       </button>
                       <button type="button" onClick={() => removeLocation(location)} aria-label={t("remove")}>
-                        <Icon.FiX className="border-l-1 h-6 w-6 pl-1 text-gray-500 hover:text-gray-900 " />
+                        <FiX className="border-l-1 h-6 w-6 pl-1 text-gray-500 hover:text-gray-900 " />
                       </button>
                     </div>
                   </div>
                 </li>
               );
             })}
+            {validLocations.some((location) => location.type === MeetLocationType) && (
+              <div className="flex text-sm text-gray-600">
+                <FiCheck 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.
+                    Change it{" "}
+                    <Link
+                      href={`${CAL_URL}/event-types/${eventType.id}?tabName=advanced`}
+                      className="underline">
+                      here.
+                    </Link>{" "}
+                    We will fall back to Cal video if you do not change it.
+                  </p>
+                </Trans>
+              </div>
+            )}
             {validLocations.length > 0 && validLocations.length !== locationOptions.length && (
               <li>
-                <Button StartIcon={Icon.FiPlus} color="minimal" onClick={() => setShowLocationModal(true)}>
+                <Button StartIcon={FiPlus} color="minimal" onClick={() => setShowLocationModal(true)}>
                   {t("add_location")}
                 </Button>
               </li>
@@ -185,7 +246,7 @@ export const EventSetupTab = (
       <div className="space-y-8">
         <TextField
           required
-          label={t("Title")}
+          label={t("title")}
           defaultValue={eventType.title}
           {...formMethods.register("title")}
         />
@@ -209,21 +270,96 @@ export const EventSetupTab = (
             setValueAs: (v) => slugify(v),
           })}
         />
-        <TextField
-          required
-          name="length"
-          type="number"
-          label={t("duration")}
-          addOnSuffix={<>{t("minutes")}</>}
-          defaultValue={eventType.length ?? 15}
-          onChange={(e) => {
-            formMethods.setValue("length", Number(e.target.value));
-          }}
-        />
+        {multipleDuration ? (
+          <div className="space-y-4">
+            <div>
+              <Skeleton as={Label} loadingClassName="w-16">
+                {t("available_durations")}
+              </Skeleton>
+              <Select
+                isMulti
+                defaultValue={selectedMultipleDuration}
+                name="metadata.multipleDuration"
+                isSearchable={false}
+                className="h-auto !min-h-[36px] text-sm"
+                options={multipleDurationOptions}
+                value={selectedMultipleDuration}
+                onChange={(options) => {
+                  let newOptions = [...options];
+                  newOptions = newOptions.sort((a, b) => {
+                    return a?.value - b?.value;
+                  });
+                  const values = newOptions.map((opt) => opt.value);
+                  setMultipleDuration(values);
+                  setSelectedMultipleDuration(newOptions);
+                  if (!newOptions.find((opt) => opt.value === defaultDuration?.value)) {
+                    if (newOptions.length > 0) {
+                      setDefaultDuration(newOptions[0]);
+                      formMethods.setValue("length", newOptions[0].value);
+                    } else {
+                      setDefaultDuration(null);
+                    }
+                  }
+                  if (newOptions.length === 1 && defaultDuration === null) {
+                    setDefaultDuration(newOptions[0]);
+                    formMethods.setValue("length", newOptions[0].value);
+                  }
+                  formMethods.setValue("metadata.multipleDuration", values);
+                }}
+              />
+            </div>
+            <div>
+              <Skeleton as={Label} loadingClassName="w-16">
+                {t("default_duration")}
+              </Skeleton>
+              <Select
+                value={defaultDuration}
+                isSearchable={false}
+                name="length"
+                className="text-sm"
+                noOptionsMessage={() => t("default_duration_no_options")}
+                options={selectedMultipleDuration}
+                onChange={(option) => {
+                  setDefaultDuration(
+                    selectedMultipleDuration.find((opt) => opt.value === option?.value) ?? null
+                  );
+                  if (option) formMethods.setValue("length", option.value);
+                }}
+              />
+            </div>
+          </div>
+        ) : (
+          <TextField
+            required
+            type="number"
+            label={t("duration")}
+            defaultValue={eventType.length ?? 15}
+            {...formMethods.register("length")}
+            addOnSuffix={<>{t("minutes")}</>}
+          />
+        )}
+        <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")}
           </Skeleton>
+
           <Controller
             name="locations"
             control={formMethods.control}
@@ -237,12 +373,15 @@ export const EventSetupTab = (
       <EditLocationDialog
         isOpenDialog={showLocationModal}
         setShowLocationModal={setShowLocationModal}
-        saveLocation={addLocation}
+        saveLocation={saveLocation}
         defaultValues={formMethods.getValues("locations")}
         selection={
-          selectedLocation ? { value: selectedLocation.value, label: selectedLocation.label } : undefined
+          selectedLocation
+            ? { value: selectedLocation.value, label: t(selectedLocation.label), icon: selectedLocation.icon }
+            : undefined
         }
         setSelectedLocation={setSelectedLocation}
+        setEditingLocationType={setEditingLocationType}
       />
     </div>
   );

apps/web/components/eventtype/EventTeamTab.tsx

@@ -1,14 +1,15 @@
-import { SchedulingType } from "@prisma/client/";
-import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
-import { useMemo } from "react";
-import { Controller, useFormContext } from "react-hook-form";
+import { SchedulingType } from "@prisma/client";
+import { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
+import { ComponentProps } from "react";
+import { Controller, useFormContext, useWatch, Control } from "react-hook-form";
+import { Options } from "react-select";
 
+import CheckedTeamSelect, {
+  CheckedSelectOption,
+} from "@calcom/features/eventtypes/components/CheckedTeamSelect";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui";
-import { Button, Avatar } from "@calcom/ui/components";
-import { Label } from "@calcom/ui/components/form";
-import { Select, CheckedTeamSelect } from "@calcom/ui/v2";
+import { Label, Select } from "@calcom/ui";
 
 interface IMemberToValue {
   id: number | null;
@@ -24,15 +25,66 @@ const mapUserToValue = ({ id, name, username, email }: IMemberToValue) => ({
   email,
 });
 
-export const EventTeamTab = ({
-  eventType,
-  team,
-  teamMembers,
-  currentUserMembership,
-}: Pick<EventTypeSetupInfered, "eventType" | "teamMembers" | "team" | "currentUserMembership">) => {
+const FixedHosts = ({
+  control,
+  labelText,
+  placeholder,
+  options = [],
+  ...rest
+}: {
+  control: Control<FormValues>;
+  labelText: string;
+  placeholder: string;
+  options?: Options<CheckedSelectOption>;
+} & Partial<ComponentProps<typeof CheckedTeamSelect>>) => {
+  return (
+    <div className="flex flex-col space-y-5 bg-gray-50 p-4">
+      <div>
+        <Label>{labelText}</Label>
+        <Controller
+          name="hostsFixed"
+          control={control}
+          render={({ field: { onChange, value } }) => {
+            return (
+              <CheckedTeamSelect
+                isDisabled={false}
+                onChange={(options) => {
+                  onChange(
+                    options.map((option) => ({
+                      isFixed: true,
+                      userId: parseInt(option.value, 10),
+                    }))
+                  );
+                }}
+                value={value
+                  .map(
+                    (host) =>
+                      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                      options.find((member) => member.value === host.userId.toString())!
+                  )
+                  .filter(Boolean)}
+                controlShouldRenderValue={false}
+                options={options}
+                placeholder={placeholder}
+                {...rest}
+              />
+            );
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export const EventTeamTab = ({ team, teamMembers }: Pick<EventTypeSetupProps, "teamMembers" | "team">) => {
   const formMethods = useFormContext<FormValues>();
   const { t } = useLocale();
 
+  const schedulingType = useWatch({
+    control: formMethods.control,
+    name: "schedulingType",
+  });
+
   const schedulingTypeOptions: {
     value: SchedulingType;
     label: string;
@@ -50,14 +102,13 @@ export const EventTeamTab = ({
     },
   ];
 
-  const teamMembersToValues = useMemo(() => {
-    return teamMembers.map(mapUserToValue);
-  }, [teamMembers]);
+  const teamMembersOptions = teamMembers.map(mapUserToValue);
+
   return (
     <div>
       {team && (
-        <div className="space-y-3">
-          <div className="flex flex-col pb-8">
+        <div className="space-y-5">
+          <div className="flex flex-col">
             <Label>{t("scheduling_type")}</Label>
             <Controller
               name="schedulingType"
@@ -75,75 +126,75 @@ export const EventTeamTab = ({
             />
           </div>
 
-          <div className="flex flex-col">
-            <Label>{t("team")}</Label>
-            <Controller
-              name="users"
+          {schedulingType === SchedulingType.COLLECTIVE && (
+            <FixedHosts
+              options={teamMembersOptions}
+              placeholder={t("add_attendees")}
+              labelText={t("team")}
               control={formMethods.control}
-              defaultValue={eventType.users.map((user) => user.id.toString())}
-              render={({ field: { onChange, value } }) => (
-                <CheckedTeamSelect
-                  isDisabled={false}
-                  onChange={(options) => onChange(options.map((user) => user.value))}
-                  value={value
-                    .map(
-                      (userId) =>
-                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                        teamMembers.map(mapUserToValue).find((member) => member.value === userId)!
-                    )
-                    .filter(Boolean)}
-                  controlShouldRenderValue={false}
-                  options={teamMembersToValues}
-                  placeholder={t("add_attendees")}
-                />
-              )}
             />
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-const TeamProfileCard = ({
-  id,
-  name,
-  hasPermsToDelete,
-  email,
-  username,
-}: {
-  id: number;
-  name: string | null;
-  email: string;
-  username: string | null;
-  hasPermsToDelete: boolean;
-}) => {
-  const formMethods = useFormContext<FormValues>();
-  const avatar = `${WEBAPP_URL}/${username}/avatar.png`;
-
-  return (
-    <div className="flex items-center border border-gray-300 px-6 py-4 first:rounded-t-md last:rounded-b-md only:rounded-md">
-      <Avatar imageSrc={avatar} gravatarFallbackMd5="ajsdkwakhsd1231" size="md" alt="Team Image" />
-      <div className="flex flex-col pl-3">
-        <div className="">
-          <span className="pr-2 text-sm font-semibold leading-none text-black">{name}</span>
-        </div>
-        <p className="text-sm font-normal leading-normal text-gray-700">{email}</p>
-      </div>
-      {hasPermsToDelete && (
-        <div className="ml-auto">
-          <Button
-            type="button"
-            size="icon"
-            color="destructive"
-            StartIcon={Icon.FiTrash}
-            onClick={() => {
-              formMethods.setValue(
-                "users",
-                formMethods.getValues("users").filter((user) => user !== id.toString())
-              );
-            }}
-          />
+          )}
+
+          {schedulingType === SchedulingType.ROUND_ROBIN && (
+            <>
+              <FixedHosts
+                options={teamMembersOptions}
+                isOptionDisabled={(option) =>
+                  !!formMethods.getValues("hosts").find((host) => host.userId.toString() === option.value)
+                }
+                placeholder={t("add_fixed_hosts")}
+                labelText={t("fixed_hosts")}
+                control={formMethods.control}
+              />
+              <div className="flex flex-col space-y-5 bg-gray-50 p-4">
+                <div>
+                  <Label>{t("round_robin_hosts")}</Label>
+                  <Controller
+                    name="hosts"
+                    control={formMethods.control}
+                    render={({ field: { onChange, value } }) => (
+                      <CheckedTeamSelect
+                        isDisabled={false}
+                        onChange={(options) =>
+                          onChange(
+                            options.map((option) => ({
+                              isFixed: false,
+                              userId: parseInt(option.value, 10),
+                            }))
+                          )
+                        }
+                        value={value
+                          .map(
+                            (host) =>
+                              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                              teamMembers
+                                .map(mapUserToValue)
+                                .find((member) => member.value === host.userId.toString())!
+                          )
+                          .filter(Boolean)}
+                        controlShouldRenderValue={false}
+                        options={teamMembers.map(mapUserToValue)}
+                        isOptionDisabled={(option) =>
+                          !!formMethods
+                            .getValues("hostsFixed")
+                            .find((host) => host.userId.toString() === option.value)
+                        }
+                        placeholder={t("add_attendees")}
+                      />
+                    )}
+                  />
+                </div>
+                {/*<TextField
+                  required
+                  type="number"
+                  label={t("minimum_round_robin_hosts_count")}
+                  defaultValue={1}
+                  {...formMethods.register("minimumHostCount")}
+                  addOnSuffix={<>{t("hosts")}</>}
+                          />*/}
+              </div>
+            </>
+          )}
         </div>
       )}
     </div>

apps/web/components/eventtype/EventTeamWebhooksTab.tsx

@@ -0,0 +1,183 @@
+import { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
+import { useState } from "react";
+import { TbWebhook } from "react-icons/tb";
+
+import { WebhookForm } from "@calcom/features/webhooks/components";
+import { 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 { 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";
+
+export const EventTeamWebhooksTab = ({
+  eventType,
+  team,
+}: Pick<EventTypeSetupProps, "eventType" | "team">) => {
+  const { t } = useLocale();
+
+  const utils = trpc.useContext();
+
+  const { data: webhooks } = trpc.viewer.webhook.list.useQuery({ eventTypeId: eventType.id });
+
+  const { data: installedApps, isLoading } = trpc.viewer.integrations.useQuery({
+    variant: "other",
+    onlyInstalled: true,
+  });
+
+  const [createModalOpen, setCreateModalOpen] = useState(false);
+  const [editModalOpen, setEditModalOpen] = useState(false);
+  const [webhookToEdit, setWebhookToEdit] = useState<Webhook>();
+
+  const subscriberUrlReserved = (subscriberUrl: string, id?: string): boolean => {
+    return !!webhooks?.find(
+      (webhook) => webhook.subscriberUrl === subscriberUrl && (!id || webhook.id !== id)
+    );
+  };
+
+  const editWebhookMutation = trpc.viewer.webhook.edit.useMutation({
+    async onSuccess() {
+      setEditModalOpen(false);
+      await utils.viewer.webhook.list.invalidate();
+      showToast(t("webhook_updated_successfully"), "success");
+    },
+    onError(error) {
+      showToast(`${error.message}`, "error");
+    },
+  });
+
+  const createWebhookMutation = trpc.viewer.webhook.create.useMutation({
+    async onSuccess() {
+      showToast(t("webhook_created_successfully"), "success");
+      await utils.viewer.webhook.list.invalidate();
+      setCreateModalOpen(false);
+    },
+    onError(error) {
+      showToast(`${error.message}`, "error");
+    },
+  });
+
+  const onCreateWebhook = async (values: WebhookFormSubmitData) => {
+    if (subscriberUrlReserved(values.subscriberUrl, values.id)) {
+      showToast(t("webhook_subscriber_url_reserved"), "error");
+      return;
+    }
+
+    if (!values.payloadTemplate) {
+      values.payloadTemplate = null;
+    }
+
+    createWebhookMutation.mutate({
+      subscriberUrl: values.subscriberUrl,
+      eventTriggers: values.eventTriggers,
+      active: values.active,
+      payloadTemplate: values.payloadTemplate,
+      secret: values.secret,
+      eventTypeId: eventType.id,
+    });
+  };
+
+  const NewWebhookButton = () => {
+    const { t } = useLocale();
+    return (
+      <Button
+        color="secondary"
+        data-testid="new_webhook"
+        StartIcon={FiPlus}
+        onClick={() => setCreateModalOpen(true)}>
+        {t("new_webhook")}
+      </Button>
+    );
+  };
+  return (
+    <div>
+      {team && webhooks && !isLoading && (
+        <>
+          <div>
+            <div>
+              <>
+                {webhooks.length ? (
+                  <>
+                    <div className="mt-4 mb-8 rounded-md border">
+                      {webhooks.map((webhook, index) => {
+                        return (
+                          <WebhookListItem
+                            key={webhook.id}
+                            webhook={webhook}
+                            lastItem={webhooks.length === index + 1}
+                            onEditWebhook={() => {
+                              setEditModalOpen(true);
+                              setWebhookToEdit(webhook);
+                            }}
+                          />
+                        );
+                      })}
+                    </div>
+                    <NewWebhookButton />
+                  </>
+                ) : (
+                  <EmptyScreen
+                    Icon={TbWebhook}
+                    headline={t("create_your_first_webhook")}
+                    description={t("create_your_first_team_webhook_description", { appName: APP_NAME })}
+                    buttonRaw={<NewWebhookButton />}
+                  />
+                )}
+              </>
+            </div>
+          </div>
+
+          {/* New webhook dialog */}
+          <Dialog open={createModalOpen} onOpenChange={(isOpen) => !isOpen && setCreateModalOpen(false)}>
+            <DialogContent
+              enableOverflow
+              title={t("create_webhook")}
+              description={t("create_webhook_team_event_type")}>
+              <WebhookForm
+                onSubmit={onCreateWebhook}
+                onCancel={() => setCreateModalOpen(false)}
+                apps={installedApps?.items.map((app) => app.slug)}
+              />
+            </DialogContent>
+          </Dialog>
+          {/* Edit webhook dialog */}
+          <Dialog open={editModalOpen} onOpenChange={(isOpen) => !isOpen && setEditModalOpen(false)}>
+            <DialogContent title={t("edit_webhook")}>
+              <WebhookForm
+                webhook={webhookToEdit}
+                apps={installedApps?.items.map((app) => app.slug)}
+                onCancel={() => setEditModalOpen(false)}
+                onSubmit={(values: WebhookFormSubmitData) => {
+                  if (subscriberUrlReserved(values.subscriberUrl, webhookToEdit?.id || "")) {
+                    showToast(t("webhook_subscriber_url_reserved"), "error");
+                    return;
+                  }
+
+                  if (values.changeSecret) {
+                    values.secret = values.newSecret.length ? values.newSecret : null;
+                  }
+
+                  if (!values.payloadTemplate) {
+                    values.payloadTemplate = null;
+                  }
+
+                  editWebhookMutation.mutate({
+                    id: webhookToEdit?.id || "",
+                    subscriberUrl: values.subscriberUrl,
+                    eventTriggers: values.eventTriggers,
+                    active: values.active,
+                    payloadTemplate: values.payloadTemplate,
+                    secret: values.secret,
+                    eventTypeId: webhookToEdit?.eventTypeId || undefined,
+                  });
+                }}
+              />
+            </DialogContent>
+          </Dialog>
+        </>
+      )}
+    </div>
+  );
+};

apps/web/components/eventtype/EventTypeSingleLayout.tsx

@@ -1,38 +1,59 @@
 import { TFunction } from "next-i18next";
 import { useRouter } from "next/router";
-import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
-import { useMemo, useState } from "react";
-import { Loader } from "react-feather";
+import { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
+import { useMemo, useState, Suspense } from "react";
 import { UseFormReturn } from "react-hook-form";
+import { TbWebhook } from "react-icons/tb";
 
+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 { trpc, TRPCClientError } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui/Icon";
-import { Button, ButtonGroup, Label } from "@calcom/ui/components";
-import { HorizontalTabs, showToast, Switch, Tooltip, VerticalTabs } from "@calcom/ui/v2";
-import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
-import { Dialog } from "@calcom/ui/v2/core/Dialog";
-import Divider from "@calcom/ui/v2/core/Divider";
-import Dropdown, {
+import {
+  Button,
+  ButtonGroup,
+  ConfirmationDialogContent,
+  Dialog,
+  DropdownMenuSeparator,
+  Dropdown,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownItem,
   DropdownMenuTrigger,
-} from "@calcom/ui/v2/core/Dropdown";
-import Shell from "@calcom/ui/v2/core/Shell";
-import VerticalDivider from "@calcom/ui/v2/core/VerticalDivider";
-import { Skeleton } from "@calcom/ui/v2/core/skeleton";
+  HorizontalTabs,
+  Label,
+  showToast,
+  Skeleton,
+  Switch,
+  Tooltip,
+  VerticalDivider,
+  VerticalTabs,
+} from "@calcom/ui";
+import {
+  FiLink,
+  FiCalendar,
+  FiClock,
+  FiSliders,
+  FiRepeat,
+  FiGrid,
+  FiZap,
+  FiUsers,
+  FiExternalLink,
+  FiCode,
+  FiTrash,
+  FiMoreHorizontal,
+  FiLoader,
+} from "@calcom/ui/components/icon";
 
-import { ClientSuspense } from "@components/ClientSuspense";
 import { EmbedButton, EmbedDialog } from "@components/Embed";
 
 type Props = {
   children: React.ReactNode;
-  eventType: EventTypeSetupInfered["eventType"];
-  currentUserMembership: EventTypeSetupInfered["currentUserMembership"];
-  team: EventTypeSetupInfered["team"];
+  eventType: EventTypeSetupProps["eventType"];
+  currentUserMembership: EventTypeSetupProps["currentUserMembership"];
+  team: EventTypeSetupProps["team"];
   disableBorder?: boolean;
   enabledAppsNumber: number;
   installedAppsNumber: number;
@@ -49,48 +70,51 @@ function getNavigation(props: {
   installedAppsNumber: number;
 }) {
   const { eventType, t, enabledAppsNumber, installedAppsNumber, enabledWorkflowsNumber } = props;
+  const duration =
+    eventType.metadata?.multipleDuration?.map((duration) => ` ${duration}`) || eventType.length;
+
   return [
     {
       name: "event_setup_tab_title",
       href: `/event-types/${eventType.id}?tabName=setup`,
-      icon: Icon.FiLink,
-      info: `${eventType.length} Mins`, // TODO: Get this from props
+      icon: FiLink,
+      info: `${duration} ${t("minute_timeUnit")}`, // TODO: Get this from props
     },
     {
       name: "availability",
       href: `/event-types/${eventType.id}?tabName=availability`,
-      icon: Icon.FiCalendar,
-      info: `Working Hours`, // TODO: Get this from props
+      icon: FiCalendar,
+      info: `default_schedule_name`, // TODO: Get this from props
     },
     {
       name: "event_limit_tab_title",
       href: `/event-types/${eventType.id}?tabName=limits`,
-      icon: Icon.FiClock,
+      icon: FiClock,
       info: `event_limit_tab_description`,
     },
     {
       name: "event_advanced_tab_title",
       href: `/event-types/${eventType.id}?tabName=advanced`,
-      icon: Icon.FiSliders,
+      icon: FiSliders,
       info: `event_advanced_tab_description`,
     },
     {
       name: "recurring",
       href: `/event-types/${eventType.id}?tabName=recurring`,
-      icon: Icon.FiRepeat,
+      icon: FiRepeat,
       info: `recurring_event_tab_description`,
     },
     {
       name: "apps",
       href: `/event-types/${eventType.id}?tabName=apps`,
-      icon: Icon.FiGrid,
+      icon: FiGrid,
       //TODO: Handle proper translation with count handling
       info: `${installedAppsNumber} apps, ${enabledAppsNumber} ${t("active")}`,
     },
     {
       name: "workflows",
       href: `/event-types/${eventType.id}?tabName=workflows`,
-      icon: Icon.FiZap,
+      icon: FiZap,
       info: `${enabledWorkflowsNumber} ${t("active")}`,
     },
   ];
@@ -143,13 +167,20 @@ function EventTypeSingleLayout({
       enabledWorkflowsNumber,
     });
     // If there is a team put this navigation item within the tabs
-    if (team)
+    if (team) {
       navigation.splice(2, 0, {
-        name: "scheduling_type",
+        name: "assignment",
         href: `/event-types/${eventType.id}?tabName=team`,
-        icon: Icon.FiUsers,
+        icon: FiUsers,
         info: eventType.schedulingType === "COLLECTIVE" ? "collective" : "round_robin",
       });
+      navigation.push({
+        name: "webhooks",
+        href: `/event-types/${eventType.id}?tabName=webhooks`,
+        icon: TbWebhook,
+        info: `${eventType.webhooks.filter((webhook) => webhook.active).length} ${t("active")}`,
+      });
+    }
     return navigation;
   }, [t, eventType, installedAppsNumber, enabledAppsNumber, enabledWorkflowsNumber, team]);
 
@@ -191,18 +222,17 @@ function EventTypeSingleLayout({
               <Button
                 color="secondary"
                 target="_blank"
-                size="icon"
+                variant="icon"
                 href={permalink}
                 rel="noreferrer"
-                StartIcon={Icon.FiExternalLink}
+                StartIcon={FiExternalLink}
               />
             </Tooltip>
 
             <Button
               color="secondary"
-              size="icon"
-              StartIcon={Icon.FiLink}
-              combined
+              variant="icon"
+              StartIcon={FiLink}
               tooltip={t("copy_link")}
               onClick={() => {
                 navigator.clipboard.writeText(permalink);
@@ -211,15 +241,15 @@ function EventTypeSingleLayout({
             />
             <EmbedButton
               embedUrl={encodeURIComponent(embedLink)}
-              StartIcon={Icon.FiCode}
+              StartIcon={FiCode}
               color="secondary"
-              size="icon"
+              variant="icon"
               tooltip={t("embed")}
             />
             <Button
               color="secondary"
-              size="icon"
-              StartIcon={Icon.FiTrash}
+              variant="icon"
+              StartIcon={FiTrash}
               tooltip={t("delete")}
               disabled={!hasPermsToDelete}
               onClick={() => setDeleteDialogOpen(true)}
@@ -229,37 +259,41 @@ function EventTypeSingleLayout({
           <VerticalDivider className="hidden lg:block" />
 
           <Dropdown>
-            <DropdownMenuTrigger className="block h-9 w-9 justify-center rounded-md border border-gray-200 bg-transparent text-gray-700 lg:hidden">
-              <Icon.FiMoreHorizontal className="group-hover:text-gray-800" />
+            <DropdownMenuTrigger asChild>
+              <Button className="lg:hidden" StartIcon={FiMoreHorizontal} variant="icon" color="secondary" />
             </DropdownMenuTrigger>
             <DropdownMenuContent>
               <DropdownMenuItem className="focus:ring-gray-100">
-                <Button
-                  color="minimal"
-                  StartIcon={Icon.FiExternalLink}
+                <DropdownItem
                   target="_blank"
+                  type="button"
+                  StartIcon={FiExternalLink}
                   href={permalink}
-                  rel="noreferrer"
-                  className="min-w-full">
+                  rel="noreferrer">
                   {t("preview")}
-                </Button>
+                </DropdownItem>
               </DropdownMenuItem>
               <DropdownMenuItem className="focus:ring-gray-100">
-                <Button color="minimal" StartIcon={Icon.FiLink}>
+                <DropdownItem
+                  type="button"
+                  StartIcon={FiLink}
+                  onClick={() => {
+                    navigator.clipboard.writeText(permalink);
+                    showToast("Link copied!", "success");
+                  }}>
                   {t("copy_link")}
-                </Button>
+                </DropdownItem>
               </DropdownMenuItem>
               <DropdownMenuItem className="focus:ring-gray-100">
-                <Button
-                  color="minimal"
-                  StartIcon={Icon.FiTrash}
+                <DropdownItem
+                  type="button"
+                  StartIcon={FiTrash}
                   disabled={!hasPermsToDelete}
-                  onClick={() => setDeleteDialogOpen(true)}
-                  className="min-w-full">
+                  onClick={() => setDeleteDialogOpen(true)}>
                   {t("delete")}
-                </Button>
+                </DropdownItem>
               </DropdownMenuItem>
-              <Divider />
+              <DropdownMenuSeparator className="block sm:hidden" />
               <div className="flex items-center rounded-md py-1.5 px-4 sm:hidden sm:hover:bg-gray-100">
                 <Skeleton
                   as={Label}
@@ -288,7 +322,7 @@ function EventTypeSingleLayout({
           </Button>
         </div>
       }>
-      <ClientSuspense fallback={<Loader />}>
+      <Suspense fallback={<FiLoader />}>
         <div className="-mt-2 flex flex-col xl:flex-row xl:space-x-8">
           <div className="hidden xl:block">
             <VerticalTabs
@@ -304,14 +338,14 @@ function EventTypeSingleLayout({
           <div className="w-full ltr:mr-2 rtl:ml-2">
             <div
               className={classNames(
-                "mt-4 rounded-md  border-neutral-200 bg-white sm:mx-0 xl:mt-0",
+                "mt-4 rounded-md  border-gray-200 bg-white sm:mx-0 xl:mt-0",
                 disableBorder ? "border-0 xl:-mt-4 " : "p-2 md:border md:p-6"
               )}>
               {children}
             </div>
           </div>
         </div>
-      </ClientSuspense>
+      </Suspense>
       <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
         <ConfirmationDialogContent
           isLoading={deleteMutation.isLoading}

apps/web/components/eventtype/EventWorkfowsTab.tsx

@@ -1 +1 @@
-export { default } from "@calcom/features/ee/workflows/components/v2/EventWorkflowsTab";
+export { default } from "@calcom/features/ee/workflows/components/EventWorkflowsTab";

apps/web/components/eventtype/RecurringEventController.tsx

@@ -5,8 +5,7 @@ import { useFormContext } from "react-hook-form";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Frequency } from "@calcom/prisma/zod-utils";
 import type { RecurringEvent } from "@calcom/types/Calendar";
-import { Alert } from "@calcom/ui/Alert";
-import { Select, SettingsToggle } from "@calcom/ui/v2";
+import { Alert, Select, SettingsToggle } from "@calcom/ui";
 
 type RecurringEventControllerProps = {
   recurringEvent: RecurringEvent | null;
@@ -58,7 +57,7 @@ export default function RecurringEventController({
               {recurringEventState && (
                 <div data-testid="recurring-event-collapsible" className="text-sm">
                   <div className="flex items-center">
-                    <p className="mr-2 text-neutral-900">{t("repeats_every")}</p>
+                    <p className="text-gray-900 ltr:mr-2 rtl:ml-2">{t("repeats_every")}</p>
                     <input
                       type="number"
                       min="1"
@@ -90,7 +89,7 @@ export default function RecurringEventController({
                     />
                   </div>
                   <div className="mt-4 flex items-center">
-                    <p className="mr-2 text-neutral-900">{t("for_a_maximum_of")}</p>
+                    <p className="text-gray-900 ltr:mr-2 rtl:ml-2">{t("for_a_maximum_of")}</p>
                     <input
                       type="number"
                       min="1"
@@ -106,7 +105,7 @@ export default function RecurringEventController({
                         setRecurringEventState(newVal);
                       }}
                     />
-                    <p className="mr-2 text-neutral-900">
+                    <p className="text-gray-900 ltr:mr-2 rtl:ml-2">
                       {t("events", {
                         count: recurringEventState.count,
                       })}

apps/web/components/eventtype/RequiresConfirmationController.tsx

@@ -0,0 +1,156 @@
+import * as RadioGroup from "@radix-ui/react-radio-group";
+import { UnitTypeLongPlural } from "dayjs";
+import { Trans } from "next-i18next";
+import type { FormValues } from "pages/event-types/[type]";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import z from "zod";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
+import { Alert, Input, Label, SettingsToggle } from "@calcom/ui";
+
+type RequiresConfirmationControllerProps = {
+  metadata: z.infer<typeof EventTypeMetaDataSchema>;
+  requiresConfirmation: boolean;
+  onRequiresConfirmation: Dispatch<SetStateAction<boolean>>;
+  seatsEnabled: boolean;
+};
+
+export default function RequiresConfirmationController({
+  metadata,
+  requiresConfirmation,
+  onRequiresConfirmation,
+  seatsEnabled,
+}: RequiresConfirmationControllerProps) {
+  const { t } = useLocale();
+  const [requiresConfirmationSetup, setRequiresConfirmationSetup] = useState(
+    metadata?.requiresConfirmationThreshold
+  );
+  const defaultRequiresConfirmationSetup = { time: 30, unit: "minutes" as UnitTypeLongPlural };
+  const formMethods = useFormContext<FormValues>();
+
+  useEffect(() => {
+    if (!requiresConfirmation) {
+      formMethods.setValue("metadata.requiresConfirmationThreshold", undefined);
+    }
+  }, [requiresConfirmation]);
+
+  return (
+    <div className="block items-start sm:flex">
+      <div className={!seatsEnabled ? "w-full" : ""}>
+        {seatsEnabled ? (
+          <Alert severity="warning" title="Seats option doesn't support confirmation requirement" />
+        ) : (
+          <Controller
+            name="requiresConfirmation"
+            control={formMethods.control}
+            render={() => (
+              <SettingsToggle
+                title={t("requires_confirmation")}
+                description={t("requires_confirmation_description")}
+                checked={requiresConfirmation}
+                onCheckedChange={(val) => {
+                  formMethods.setValue("requiresConfirmation", val);
+                  onRequiresConfirmation(val);
+                }}>
+                <RadioGroup.Root
+                  defaultValue={
+                    requiresConfirmation
+                      ? requiresConfirmationSetup === undefined
+                        ? "always"
+                        : "notice"
+                      : undefined
+                  }
+                  onValueChange={(val) => {
+                    if (val === "always") {
+                      formMethods.setValue("requiresConfirmation", true);
+                      onRequiresConfirmation(true);
+                      formMethods.setValue("metadata.requiresConfirmationThreshold", undefined);
+                      setRequiresConfirmationSetup(undefined);
+                    } else if (val === "notice") {
+                      formMethods.setValue("requiresConfirmation", true);
+                      onRequiresConfirmation(true);
+                      formMethods.setValue(
+                        "metadata.requiresConfirmationThreshold",
+                        requiresConfirmationSetup || defaultRequiresConfirmationSetup
+                      );
+                    }
+                  }}>
+                  <div className="-ml-2 flex flex-col flex-wrap justify-start gap-y-2 space-y-2">
+                    <div className="flex items-center">
+                      <RadioGroup.Item
+                        id="always"
+                        value="always"
+                        className="min-w-4 flex h-4 w-4 cursor-pointer items-center rounded-full border border-black bg-white 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="always" className="!m-0 flex items-center">
+                        {t("always_requires_confirmation")}
+                      </Label>
+                    </div>
+                    <div className="flex items-center">
+                      <RadioGroup.Item
+                        id="notice"
+                        value="notice"
+                        className="min-w-4 flex h-4 w-4 cursor-pointer items-center rounded-full border border-black bg-white 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">
+                        <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="!m-0 block w-16 rounded-md border-gray-300 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="ml-2 block h-9 rounded-md border-gray-300 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>
+                            ),
+                          }}
+                        />
+                      </Label>
+                    </div>
+                  </div>
+                </RadioGroup.Root>
+              </SettingsToggle>
+            )}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

apps/web/components/eventtype/SkeletonLoader.tsx

@@ -1,5 +1,5 @@
-import { Icon } from "@calcom/ui/Icon";
-import { SkeletonAvatar, SkeletonContainer, SkeletonText } from "@calcom/ui/v2";
+import { SkeletonAvatar, SkeletonContainer, SkeletonText } from "@calcom/ui";
+import { FiClock, FiUser } from "@calcom/ui/components/icon";
 
 function SkeletonLoader() {
   return (
@@ -11,7 +11,7 @@ function SkeletonLoader() {
           <SkeletonText className="h-4 w-24" />
         </div>
       </div>
-      <ul className="divide-y divide-neutral-200 rounded-md border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
+      <ul className="divide-y divide-gray-200 rounded-md border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
         <SkeletonItem />
         <SkeletonItem />
         <SkeletonItem />
@@ -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">
-              <Icon.FiClock className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
+              <FiClock className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
               <SkeletonText className="h-4 w-12" />
             </li>
             <li className="flex items-center whitespace-nowrap">
-              <Icon.FiUser className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
+              <FiUser className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
               <SkeletonText className="h-4 w-12" />
             </li>
           </ul>

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

@@ -1,7 +1,7 @@
 import { InstallAppButtonWithoutPlanCheck } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { App } from "@calcom/types/App";
-import { Button } from "@calcom/ui/components/button";
+import { Button } from "@calcom/ui";
 
 interface ICalendarItem {
   title: string;

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

@@ -1,8 +1,7 @@
 import { useMutation } from "@tanstack/react-query";
 
 import { trpc } from "@calcom/trpc/react";
-import { Switch } from "@calcom/ui/v2";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { showToast, Switch } from "@calcom/ui";
 
 import classNames from "@lib/classNames";
 

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

@@ -16,7 +16,7 @@ const CreateEventsOnCalendarSelect = (props: ICreateEventsOnCalendarSelectProps)
     <>
       <div className="mt-6 flex flex-row">
         <div className="w-full">
-          <label htmlFor="createEventsOn" className="flex text-sm font-medium text-neutral-700">
+          <label htmlFor="createEventsOn" className="flex text-sm font-medium text-gray-700">
             {t("create_events_on")}
           </label>
           <div className="mt-2">

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

@@ -3,8 +3,7 @@ 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 { List } from "@calcom/ui/List";
-import { SkeletonAvatar, SkeletonText, SkeletonButton } from "@calcom/ui/v2";
+import { SkeletonAvatar, SkeletonText, SkeletonButton, List } from "@calcom/ui";
 
 import { CalendarItem } from "../components/CalendarItem";
 import { ConnectedCalendarItem } from "../components/ConnectedCalendarItem";

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

@@ -7,8 +7,7 @@ import { DEFAULT_SCHEDULE } from "@calcom/lib/availability";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc, TRPCClientErrorLike } from "@calcom/trpc/react";
 import { AppRouter } from "@calcom/trpc/server/routers/_app";
-import { Button } from "@calcom/ui/components/button";
-import { Form } from "@calcom/ui/form/fields";
+import { Button, Form } from "@calcom/ui";
 
 interface ISetupAvailabilityProps {
   nextStep: () => void;

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

@@ -4,24 +4,20 @@ import { FormEvent, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { User } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
-import { Button } from "@calcom/ui/components";
-import { TextArea } from "@calcom/ui/components/form";
-import { showToast } from "@calcom/ui/v2";
-import ImageUploader from "@calcom/ui/v2/core/ImageUploader";
+import { Button, ImageUploader, showToast, TextArea } from "@calcom/ui";
+import { Avatar } from "@calcom/ui";
 
-import { AvatarSSR } from "@components/ui/AvatarSSR";
-
-interface IUserProfile {
-  user?: User;
-}
+import type { IOnboardingPageProps } from "../../../pages/getting-started/[[...step]]";
 
 type FormData = {
   bio: string;
 };
+interface IUserProfileProps {
+  user: IOnboardingPageProps["user"];
+}
 
-const UserProfile = (props: IUserProfile) => {
+const UserProfile = (props: IUserProfileProps) => {
   const { user } = props;
   const { t } = useLocale();
   const avatarRef = useRef<HTMLInputElement>(null!);
@@ -103,14 +99,21 @@ const UserProfile = (props: IUserProfile) => {
   return (
     <form onSubmit={onSubmit}>
       <div className="flex flex-row items-center justify-start rtl:justify-end">
-        {user && <AvatarSSR user={user} alt="Profile picture" className="h-16 w-16" />}
+        {user && (
+          <Avatar
+            alt={user.username || "user avatar"}
+            gravatarFallbackMd5={user.emailMd5}
+            size="lg"
+            imageSrc={imageSrc}
+          />
+        )}
         <input
           ref={avatarRef}
           type="hidden"
           name="avatar"
           id="avatar"
           placeholder="URL"
-          className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm focus:border-neutral-800 focus:outline-none focus:ring-neutral-800"
+          className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm focus:border-gray-800 focus:outline-none focus:ring-gray-800"
           defaultValue={imageSrc}
         />
         <div className="flex items-center px-4">
@@ -143,7 +146,7 @@ const UserProfile = (props: IUserProfile) => {
           ref={bioRef}
           name="bio"
           id="bio"
-          className="mt-1 block h-[60px] w-full rounded-sm border border-gray-300 px-3 py-2 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
+          className="mt-1 block h-[60px] w-full rounded-sm border border-gray-300 px-3 py-2 focus:border-gray-500 focus:outline-none focus:ring-gray-500 sm:text-sm"
           defaultValue={user?.bio || undefined}
           onChange={(event) => {
             setValue("bio", event.target.value);

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

@@ -1,34 +1,33 @@
 import { ArrowRightIcon } from "@heroicons/react/outline";
-import { useRef, useState } from "react";
-import { Controller, useForm } from "react-hook-form";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
 
 import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { User } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
-import { Button } from "@calcom/ui/components/button";
-import TimezoneSelect from "@calcom/ui/form/TimezoneSelect";
+import { Button, TimezoneSelect } from "@calcom/ui";
 
-import { UsernameAvailability } from "@components/ui/UsernameAvailability";
+import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";
+
+import type { IOnboardingPageProps } from "../../../pages/getting-started/[[...step]]";
 
 interface IUserSettingsProps {
-  user: User;
+  user: IOnboardingPageProps["user"];
   nextStep: () => void;
 }
 
 const UserSettings = (props: IUserSettingsProps) => {
   const { user, nextStep } = props;
   const { t } = useLocale();
-  const [selectedTimeZone, setSelectedTimeZone] = useState(user.timeZone ?? dayjs.tz.guess());
+  const [selectedTimeZone, setSelectedTimeZone] = useState(dayjs.tz.guess());
+
   const {
     register,
     handleSubmit,
     formState: { errors },
-    control,
   } = useForm({
     defaultValues: {
       name: user?.name || "",
-      username: user?.username || "",
     },
     reValidateMode: "onChange",
   });
@@ -42,39 +41,19 @@ const UserSettings = (props: IUserSettingsProps) => {
   const mutation = trpc.viewer.updateProfile.useMutation({
     onSuccess: onSuccess,
   });
-  const { data: stripeCustomer } = trpc.viewer.stripeCustomer.useQuery();
-  const paymentRequired = stripeCustomer?.isPremium ? !stripeCustomer?.paidForPremium : false;
+
   const onSubmit = handleSubmit((data) => {
-    if (paymentRequired) {
-      return;
-    }
     mutation.mutate({
       name: data.name,
       timeZone: selectedTimeZone,
     });
   });
 
-  const [currentUsername, setCurrentUsername] = useState(user.username || "");
-
   return (
     <form onSubmit={onSubmit}>
       <div className="space-y-6">
         {/* Username textfield */}
-        <Controller
-          control={control}
-          name="username"
-          render={({ field: { value, ref, onChange } }) => (
-            <UsernameAvailability
-              readonly={true}
-              currentUsername={currentUsername}
-              setCurrentUsername={setCurrentUsername}
-              inputUsernameValue={value}
-              usernameRef={ref}
-              setInputUsernameValue={onChange}
-              user={user}
-            />
-          )}
-        />
+        <UsernameAvailabilityField user={user} />
 
         {/* Full name textfield */}
         <div className="w-full">

apps/web/components/integrations/CalendarListContainer.tsx

@@ -1,293 +0,0 @@
-import { useMutation } from "@tanstack/react-query";
-import { Fragment } from "react";
-
-import { InstallAppButton } from "@calcom/app-store/components";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import { Alert } from "@calcom/ui/Alert";
-import { List } from "@calcom/ui/List";
-import { ShellSubHeading } from "@calcom/ui/Shell";
-import Switch from "@calcom/ui/Switch";
-import SkeletonLoader from "@calcom/ui/apps/SkeletonLoader";
-import { Button } from "@calcom/ui/components/button";
-import showToast from "@calcom/ui/v2/core/notifications";
-
-import { QueryCell } from "@lib/QueryCell";
-
-import AdditionalCalendarSelector from "@components/AdditionalCalendarSelector";
-import DestinationCalendarSelector from "@components/DestinationCalendarSelector";
-
-import DisconnectIntegration from "./DisconnectIntegration";
-import IntegrationListItem from "./IntegrationListItem";
-import SubHeadingTitleWithConnections from "./SubHeadingTitleWithConnections";
-
-type Props = {
-  onChanged: () => unknown | Promise<unknown>;
-  fromOnboarding?: boolean;
-};
-
-function CalendarSwitch(props: {
-  type: string;
-  externalId: string;
-  title: string;
-  defaultSelected: boolean;
-}) {
-  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="py-1">
-      <Switch
-        key={props.externalId}
-        name="enabled"
-        label={props.title}
-        defaultChecked={props.defaultSelected}
-        onCheckedChange={(isOn: boolean) => {
-          mutation.mutate({ isOn });
-        }}
-      />
-    </div>
-  );
-}
-
-function CalendarList(props: Props) {
-  const { t } = useLocale();
-  const query = trpc.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: false });
-
-  return (
-    <QueryCell
-      query={query}
-      success={({ data }) => (
-        <List>
-          {data.items.map((item) => (
-            <IntegrationListItem
-              name={item.name}
-              slug={item.slug}
-              key={item.title}
-              title={item.title}
-              logo={item.logo}
-              description={item.description}
-              actions={
-                <InstallAppButton
-                  type={item.type}
-                  render={(buttonProps) => (
-                    <Button color="secondary" {...buttonProps}>
-                      {t("connect")}
-                    </Button>
-                  )}
-                  onChanged={() => props.onChanged()}
-                />
-              }
-            />
-          ))}
-        </List>
-      )}
-    />
-  );
-}
-
-function ConnectedCalendarsList(props: Props) {
-  const { t } = useLocale();
-  const query = trpc.viewer.connectedCalendars.useQuery(undefined, {
-    suspense: true,
-    trpc: {},
-  });
-  const { fromOnboarding } = props;
-  return (
-    <QueryCell
-      query={query}
-      empty={() => null}
-      success={({ data }) => {
-        if (!data.connectedCalendars.length) {
-          return null;
-        }
-        return (
-          <List>
-            {data.connectedCalendars.map((item) => (
-              <Fragment key={item.credentialId}>
-                {item.calendars ? (
-                  <IntegrationListItem
-                    slug={item.integration.slug}
-                    title={item.integration.title}
-                    logo={item.integration.logo}
-                    description={item.primary?.externalId || "No external Id"}
-                    actions={
-                      <DisconnectIntegration
-                        id={item.credentialId}
-                        externalId={item.primary?.externalId}
-                        render={(btnProps) => (
-                          <Button {...btnProps} color="secondary" data-testid="integration-connection-button">
-                            {t("disconnect")}
-                          </Button>
-                        )}
-                        onOpenChange={props.onChanged}
-                      />
-                    }>
-                    {!fromOnboarding && (
-                      <>
-                        <p className="px-4 pt-4 text-sm text-neutral-500">{t("toggle_calendars_conflict")}</p>
-                        <ul className="space-y-2 p-4">
-                          {item.calendars.map((cal) => (
-                            <CalendarSwitch
-                              key={cal.externalId}
-                              externalId={cal.externalId}
-                              title={cal.name || "Nameless calendar"}
-                              type={item.integration.type}
-                              defaultSelected={cal.isSelected}
-                            />
-                          ))}
-                        </ul>
-                      </>
-                    )}
-                  </IntegrationListItem>
-                ) : (
-                  <Alert
-                    severity="warning"
-                    title={t("something_went_wrong")}
-                    message={t("calendar_error")}
-                    actions={
-                      <DisconnectIntegration
-                        id={item.credentialId}
-                        render={(btnProps) => (
-                          <Button {...btnProps} color="secondary" data-testid="integration-connection-button">
-                            Disconnect
-                          </Button>
-                        )}
-                        onOpenChange={() => props.onChanged()}
-                      />
-                    }
-                  />
-                )}
-              </Fragment>
-            ))}
-          </List>
-        );
-      }}
-    />
-  );
-}
-
-export function CalendarListContainer(props: {
-  heading?: boolean;
-  items?: RouterOutputs["viewer"]["integrations"]["items"];
-  fromOnboarding?: boolean;
-}) {
-  const { t } = useLocale();
-  const { heading = true, fromOnboarding } = props;
-  const utils = trpc.useContext();
-  const onChanged = () =>
-    Promise.allSettled([
-      utils.viewer.integrations.invalidate(
-        { variant: "calendar", onlyInstalled: true },
-        {
-          exact: true,
-        }
-      ),
-      utils.viewer.connectedCalendars.invalidate(),
-    ]);
-  const query = trpc.viewer.connectedCalendars.useQuery();
-  const installedCalendars = trpc.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: true });
-  const mutation = trpc.viewer.setDestinationCalendar.useMutation();
-  return (
-    <QueryCell
-      query={query}
-      customLoader={<SkeletonLoader className="mt-10" />}
-      success={({ data }) => {
-        return (
-          <>
-            {(!!data.connectedCalendars.length || !!installedCalendars.data?.items.length) && (
-              <>
-                {heading && (
-                  <ShellSubHeading
-                    className="mt-10 mb-0"
-                    title={
-                      <SubHeadingTitleWithConnections
-                        title="Calendars"
-                        numConnections={data.connectedCalendars.length}
-                      />
-                    }
-                    subtitle={t("configure_how_your_event_types_interact")}
-                    actions={
-                      <div className="flex flex-col xl:flex-row xl:space-x-5">
-                        <div className="sm:min-w-80 block max-w-full">
-                          <DestinationCalendarSelector
-                            onChange={mutation.mutate}
-                            isLoading={mutation.isLoading}
-                            value={data.destinationCalendar?.externalId}
-                          />
-                        </div>
-
-                        {!!data.connectedCalendars.length && (
-                          <div className="sm:min-w-80 inline max-w-full">
-                            <AdditionalCalendarSelector isLoading={mutation.isLoading} />
-                          </div>
-                        )}
-                      </div>
-                    }
-                  />
-                )}
-                <ConnectedCalendarsList onChanged={onChanged} fromOnboarding={fromOnboarding} />
-              </>
-            )}
-            {fromOnboarding && (
-              <>
-                {!!query.data?.connectedCalendars.length && (
-                  <ShellSubHeading
-                    className="mt-4"
-                    title={<SubHeadingTitleWithConnections title={t("connect_additional_calendar")} />}
-                  />
-                )}
-                <CalendarList onChanged={onChanged} />
-              </>
-            )}
-          </>
-        );
-      }}
-    />
-  );
-}

apps/web/components/integrations/DisconnectIntegration.tsx

@@ -1,57 +0,0 @@
-import { useState } from "react";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc/react";
-import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent";
-import { Dialog } from "@calcom/ui/Dialog";
-import { ButtonBaseProps } from "@calcom/ui/components/button";
-import showToast from "@calcom/ui/v2/core/notifications";
-
-export default function DisconnectIntegration(props: {
-  /** Integration credential id */
-  id: number;
-  externalId?: string;
-  render: (renderProps: ButtonBaseProps) => JSX.Element;
-  onOpenChange: (isOpen: boolean) => unknown | Promise<unknown>;
-}) {
-  const { id, externalId = "" } = props;
-  const { t } = useLocale();
-  const [modalOpen, setModalOpen] = useState(false);
-
-  const mutation = trpc.viewer.deleteCredential.useMutation({
-    onSettled: async () => {
-      await props.onOpenChange(modalOpen);
-    },
-    onSuccess: () => {
-      showToast("Integration deleted successfully", "success");
-      setModalOpen(false);
-    },
-    onError: () => {
-      throw new Error("Something went wrong");
-    },
-  });
-
-  return (
-    <>
-      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
-        <ConfirmationDialogContent
-          variety="danger"
-          title={t("remove_app")}
-          confirmBtnText={t("yes_remove_app")}
-          cancelBtnText="Cancel"
-          onConfirm={() => {
-            mutation.mutate({ id, externalId });
-          }}>
-          {t("are_you_sure_you_want_to_remove_this_app")}
-        </ConfirmationDialogContent>
-      </Dialog>
-      {props.render({
-        onClick() {
-          setModalOpen(true);
-        },
-        disabled: modalOpen,
-        loading: mutation.isLoading,
-      })}
-    </>
-  );
-}

apps/web/components/integrations/IntegrationListItem.tsx

@@ -1,39 +0,0 @@
-import Link from "next/link";
-import { ReactNode } from "react";
-
-import { ListItem, ListItemText, ListItemTitle } from "@calcom/ui/List";
-
-import classNames from "@lib/classNames";
-
-function IntegrationListItem(props: {
-  imageSrc?: string;
-  slug: string;
-  name?: string;
-  title?: string;
-  description: string;
-  actions?: ReactNode;
-  children?: ReactNode;
-  logo: string;
-}): JSX.Element {
-  const title = props.name || props.title;
-  return (
-    <ListItem expanded={!!props.children} className={classNames("flex-col")}>
-      <div className={classNames("flex w-full flex-1 items-center space-x-2 p-3 rtl:space-x-reverse")}>
-        {
-          // eslint-disable-next-line @next/next/no-img-element
-          props.logo && <img className="h-10 w-10" src={props.logo} alt={title} />
-        }
-        <div className="flex-grow truncate pl-2">
-          <ListItemTitle component="h3">
-            <Link href={"/apps/" + props.slug}>{props.name || title}</Link>
-          </ListItemTitle>
-          <ListItemText component="p">{props.description}</ListItemText>
-        </div>
-        <div>{props.actions}</div>
-      </div>
-      {props.children && <div className="w-full border-t border-gray-200">{props.children}</div>}
-    </ListItem>
-  );
-}
-
-export default IntegrationListItem;

apps/web/components/integrations/SubHeadingTitleWithConnections.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 
-import { Badge } from "@calcom/ui/components/badge";
+import { Badge } from "@calcom/ui";
 
 function pluralize(opts: { num: number; plural: string; singular: string }) {
   if (opts.num === 0) {

apps/web/components/layouts/WizardLayout.tsx

@@ -3,8 +3,7 @@ import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import { Toaster } from "react-hot-toast";
 
-import { StepCard } from "@calcom/ui/v2/core/StepCard";
-import { Steps } from "@calcom/ui/v2/core/Steps";
+import { StepCard, Steps } from "@calcom/ui";
 
 export default function WizardLayout({
   children,

apps/web/components/layouts/_README.md

@@ -0,0 +1,4 @@
+We don't have many layouts currently however, if they are relevant to a features - please put them in their relvant component folder
+in `web/components` if you believe they will be reused in other apps please place them in `packages/features/[feature]`
+
+Thanks Sean 🔥

apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx

@@ -1,134 +0,0 @@
-import { EventTypeCustomInput, EventTypeCustomInputType } from "@prisma/client";
-import React, { FC } from "react";
-import { Controller, SubmitHandler, useForm, useWatch } from "react-hook-form";
-
-import Button from "@calcom/ui/Button";
-
-import { useLocale } from "@lib/hooks/useLocale";
-
-import Select from "@components/ui/form/Select";
-
-interface OptionTypeBase {
-  label: string;
-  value: EventTypeCustomInputType;
-}
-
-interface Props {
-  onSubmit: SubmitHandler<IFormInput>;
-  onCancel: () => void;
-  selectedCustomInput?: EventTypeCustomInput;
-}
-
-type IFormInput = EventTypeCustomInput;
-
-const CustomInputTypeForm: FC<Props> = (props) => {
-  const { t } = useLocale();
-  const inputOptions: OptionTypeBase[] = [
-    { value: EventTypeCustomInputType.TEXT, label: t("text") },
-    { value: EventTypeCustomInputType.TEXTLONG, label: t("multiline_text") },
-    { value: EventTypeCustomInputType.NUMBER, label: t("number") },
-    { value: EventTypeCustomInputType.BOOL, label: t("checkbox") },
-  ];
-  const { selectedCustomInput } = props;
-  const defaultValues = selectedCustomInput || { type: inputOptions[0].value };
-  const { register, control, handleSubmit } = useForm<IFormInput>({
-    defaultValues,
-  });
-  const selectedInputType = useWatch({ name: "type", control });
-  const selectedInputOption = inputOptions.find((e) => selectedInputType === e.value);
-
-  const onCancel = () => {
-    props.onCancel();
-  };
-
-  return (
-    <form onSubmit={handleSubmit(props.onSubmit)}>
-      <div className="mb-2">
-        <label htmlFor="type" className="block text-sm font-medium text-gray-700">
-          {t("input_type")}
-        </label>
-        <Controller
-          name="type"
-          control={control}
-          render={({ field }) => (
-            <Select
-              id="type"
-              defaultValue={selectedInputOption}
-              options={inputOptions}
-              isSearchable={false}
-              className="mt-1 mb-2 block w-full min-w-0 flex-1  text-sm"
-              onChange={(option) => option && field.onChange(option.value)}
-              value={selectedInputOption}
-              onBlur={field.onBlur}
-              name={field.name}
-            />
-          )}
-        />
-      </div>
-      <div className="mb-2">
-        <label htmlFor="label" className="block text-sm font-medium text-gray-700">
-          {t("label")}
-        </label>
-        <div className="mt-1">
-          <input
-            type="text"
-            id="label"
-            required
-            className="block w-full rounded-sm border-gray-300 text-sm"
-            defaultValue={selectedCustomInput?.label}
-            {...register("label", { required: true })}
-          />
-        </div>
-      </div>
-      {(selectedInputType === EventTypeCustomInputType.TEXT ||
-        selectedInputType === EventTypeCustomInputType.TEXTLONG) && (
-        <div className="mb-2">
-          <label htmlFor="placeholder" className="block text-sm font-medium text-gray-700">
-            {t("placeholder")}
-          </label>
-          <div className="mt-1">
-            <input
-              type="text"
-              id="placeholder"
-              className="block w-full rounded-sm border-gray-300 text-sm"
-              defaultValue={selectedCustomInput?.placeholder}
-              {...register("placeholder")}
-            />
-          </div>
-        </div>
-      )}
-      <div className="flex h-5 items-center">
-        <input
-          id="required"
-          type="checkbox"
-          className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300 ltr:mr-2 rtl:ml-2"
-          defaultChecked={selectedCustomInput?.required ?? true}
-          {...register("required")}
-        />
-        <label htmlFor="required" className="block text-sm font-medium text-gray-700">
-          {t("is_required")}
-        </label>
-      </div>
-      <input
-        type="hidden"
-        id="eventTypeId"
-        value={selectedCustomInput?.eventTypeId || -1}
-        {...register("eventTypeId", { valueAsNumber: true })}
-      />
-      <input
-        type="hidden"
-        id="id"
-        value={selectedCustomInput?.id || -1}
-        {...register("id", { valueAsNumber: true })}
-      />
-      <div className="mt-5 flex space-x-2 sm:mt-4">
-        <Button onClick={onCancel} type="button" color="secondary" className="ltr:mr-2">
-          {t("cancel")}
-        </Button>
-        <Button type="submit">{t("save")}</Button>
-      </div>
-    </form>
-  );
-};
-
-export default CustomInputTypeForm;

apps/web/components/schemas/EventReservationSchema.tsx

@@ -0,0 +1,73 @@
+import type { Attendee, Booking, User } from "@prisma/client";
+import type { FC } from "react";
+import { useMemo } from "react";
+import { JsonLd } from "react-schemaorg";
+import type { EventReservation, Person, ReservationStatusType } from "schema-dts";
+
+type EventSchemaUser = Pick<User, "name" | "email">;
+type EventSchemaAttendee = Pick<Attendee, "name" | "email">;
+
+interface EventReservationSchemaInterface {
+  reservationId: Booking["uid"];
+  eventName: Booking["title"];
+  startTime: Booking["startTime"];
+  endTime: Booking["endTime"];
+  organizer: EventSchemaUser | null;
+  attendees: EventSchemaAttendee[];
+  location: Booking["location"];
+  description: Booking["description"];
+  status: Booking["status"];
+}
+
+const EventReservationSchema: FC<EventReservationSchemaInterface> = ({
+  reservationId,
+  eventName,
+  startTime,
+  endTime,
+  organizer,
+  attendees,
+  location,
+  description,
+  status,
+}) => {
+  const reservationStatus = useMemo<ReservationStatusType>(() => {
+    switch (status) {
+      case "ACCEPTED":
+        return "ReservationConfirmed";
+      case "REJECTED":
+      case "CANCELLED":
+        return "ReservationCancelled";
+      case "PENDING":
+        return "ReservationPending";
+      default:
+        return "ReservationHold";
+    }
+  }, [status]);
+
+  return (
+    <JsonLd<EventReservation>
+      item={{
+        "@context": "https://schema.org",
+        "@type": "EventReservation",
+        reservationId,
+        reservationStatus,
+        reservationFor: {
+          "@type": "Event",
+          name: eventName,
+          startDate: startTime.toString(),
+          endDate: endTime.toString(),
+          organizer: organizer
+            ? ({ "@type": "Person", name: organizer.name, email: organizer.email } as Person)
+            : undefined,
+          attendee: attendees?.map(
+            (person) => ({ "@type": "Person", name: person.name, email: person.email } as Person)
+          ),
+          location: location || undefined,
+          description: description || undefined,
+        },
+      }}
+    />
+  );
+};
+
+export default EventReservationSchema;

apps/web/components/security/ChangePasswordSection.tsx

@@ -1,9 +1,8 @@
-import React, { SyntheticEvent, useState } from "react";
+import { SyntheticEvent, useState } from "react";
 
 import { ErrorCode } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import Button from "@calcom/ui/Button";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { Button, showToast } from "@calcom/ui";
 
 const ChangePasswordSection = () => {
   const [oldPassword, setOldPassword] = useState("");

apps/web/components/security/DisableTwoFactorModal.tsx

@@ -3,10 +3,7 @@ import { useForm } from "react-hook-form";
 
 import { ErrorCode } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import Button from "@calcom/ui/Button";
-import { Dialog, DialogContent } from "@calcom/ui/Dialog";
-import { PasswordField } from "@calcom/ui/components/form";
-import { Form, Label } from "@calcom/ui/form/fields";
+import { Button, Dialog, DialogContent, Form, Label, PasswordField } from "@calcom/ui";
 
 import TwoFactor from "@components/auth/TwoFactor";
 
@@ -85,7 +82,7 @@ const DisableTwoFactorAuthModal = ({ onDisable, onCancel }: DisableTwoFactorAuth
           </div>
 
           <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-            <Button type="submit" className="ltr:ml-2 rtl:mr-2" disabled={isDisabling}>
+            <Button type="submit" className="ltr:ml-2 ltr:mr-2 rtl:ml-2" disabled={isDisabling}>
               {t("disable")}
             </Button>
             <Button color="secondary" onClick={onCancel}>

apps/web/components/security/DisableUserImpersonation.tsx

@@ -1,8 +1,6 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import Button from "@calcom/ui/Button";
-import { Badge } from "@calcom/ui/components/badge";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { Badge, Button, showToast } from "@calcom/ui";
 
 const DisableUserImpersonation = ({ disableImpersonation }: { disableImpersonation: boolean }) => {
   const utils = trpc.useContext();

apps/web/components/security/EnableTwoFactorModal.tsx

@@ -3,9 +3,7 @@ import { useForm } from "react-hook-form";
 
 import { ErrorCode } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import Button from "@calcom/ui/Button";
-import { Dialog, DialogContent } from "@calcom/ui/Dialog";
-import { Form } from "@calcom/ui/components/form";
+import { Button, Dialog, DialogContent, Form } from "@calcom/ui";
 
 import TwoFactor from "@components/auth/TwoFactor";
 
@@ -179,7 +177,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
             <WithStep step={SetupStep.ConfirmPassword} current={step}>
               <Button
                 type="submit"
-                className="ltr:ml-2 rtl:mr-2"
+                className="ltr:ml-2 ltr:mr-2 rtl:ml-2"
                 onClick={handleSetup}
                 disabled={password.length === 0 || isSubmitting}>
                 {t("continue")}
@@ -188,13 +186,13 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
             <WithStep step={SetupStep.DisplayQrCode} current={step}>
               <Button
                 type="submit"
-                className="ltr:ml-2 rtl:mr-2"
+                className="ltr:ml-2 ltr:mr-2 rtl:ml-2"
                 onClick={() => setStep(SetupStep.EnterTotpCode)}>
                 {t("continue")}
               </Button>
             </WithStep>
             <WithStep step={SetupStep.EnterTotpCode} current={step}>
-              <Button type="submit" className="ltr:ml-2 rtl:mr-2" disabled={isSubmitting}>
+              <Button type="submit" className="ltr:ml-2 ltr:mr-2 rtl:ml-2" disabled={isSubmitting}>
                 {t("enable")}
               </Button>
             </WithStep>