v2.4.7

* use IS_SELF_HOSTED for CalComVersion instead of an additional check for hosted and self-hosted versions

* use IS_SELF_HOSTED for HOSTED_CAL_FEATURES constant to prevent an additional check

Co-authored-by: René Müller <rene.mueller@clicksports.de>
Co-authored-by: Omar López <zomars@me.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

.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.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=
@@ -86,6 +85,9 @@ SENDGRID_EMAIL=
 TWILIO_SID=
 TWILIO_TOKEN=
 TWILIO_MESSAGING_SID=
+TWILIO_PHONE_NUMBER=
+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 +102,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_

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

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/.storybook/main.js

@@ -4,6 +4,7 @@ module.exports = {
   stories: [
     "../intro.stories.mdx",
     "../../../packages/ui/components/**/*.stories.mdx",
+    "../../../packages/features/**/*.stories.mdx",
     "../../../packages/ui/components/**/*.stories.@(js|jsx|ts|tsx)",
   ],
   addons: [
@@ -50,6 +51,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/package.json

@@ -20,7 +20,7 @@
     "@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"
   },

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

@@ -44,6 +44,7 @@ type PreviewState = {
   palette: {
     brandColor: string;
   };
+  hideEventTypeDetails: boolean;
 };
 const queryParamsForDialog = ["embedType", "embedTabName", "embedUrl"];
 
@@ -125,10 +126,12 @@ const getEmbedUIInstructionString = ({
   apiName,
   theme,
   brandColor,
+  hideEventTypeDetails,
 }: {
   apiName: string;
   theme?: string;
   brandColor: string;
+  hideEventTypeDetails: boolean;
 }) => {
   theme = theme !== "auto" ? theme : undefined;
   return getInstructionString({
@@ -141,6 +144,7 @@ const getEmbedUIInstructionString = ({
           brandColor,
         },
       },
+      hideEventTypeDetails: hideEventTypeDetails,
     },
   });
 };
@@ -253,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]) {
@@ -497,7 +504,7 @@ const tabs = [
       return (
         <>
           <div>
-            <small className="flex py-4 text-neutral-500">
+            <small className="flex py-4 text-gray-500">
               {t("place_where_cal_widget_appear", { appName: APP_NAME })}
             </small>
           </div>
@@ -549,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>}
@@ -632,7 +639,7 @@ const ChooseEmbedTypesDialogContent = () => {
       <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-neutral-100 ltr:mr-2 rtl:ml-2"
             key={index}
             data-testid={embed.type}
             onClick={() => {
@@ -643,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>
         ))}
@@ -689,6 +696,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
     theme: Theme.auto,
     floatingPopup: {},
     elementClick: {},
+    hideEventTypeDetails: false,
     palette: {
       brandColor: "#000000",
     },
@@ -753,6 +761,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
     name: "ui",
     arg: {
       theme: previewState.theme,
+      hideEventTypeDetails: previewState.hideEventTypeDetails,
       styles: {
         branding: {
           ...previewState.palette,
@@ -811,14 +820,14 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
             {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"
@@ -829,7 +838,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                   <Icon.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">
@@ -838,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}
@@ -860,7 +868,6 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                       <span className="p-2">×</span>
                       <TextField
                         labelProps={{ className: "hidden" }}
-                        name="height"
                         value={previewState.inline.height}
                         required
                         onChange={(e) => {
@@ -888,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) => {
@@ -908,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}
@@ -995,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>
+                  <div className="text-base  font-medium text-gray-900">Cal Booking Customization</div>
                   <Icon.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

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/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-neutral-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,6 +1,7 @@
 import React, { ComponentProps } from "react";
 
-import { ErrorBoundary, Icon, Shell } from "@calcom/ui";
+import Shell from "@calcom/features/shell/Shell";
+import { ErrorBoundary, Icon } from "@calcom/ui";
 
 import NavTabs from "./NavTabs";
 

apps/web/components/apps/App.tsx

@@ -6,14 +6,13 @@ 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 { Button, Icon, Shell, showToast, SkeletonButton, SkeletonText } from "@calcom/ui";
-
-import HeadSeo from "@components/seo/head-seo";
+import { Button, Icon, showToast, SkeletonButton, SkeletonText, HeadSeo } from "@calcom/ui";
 
 const Component = ({
   name,
@@ -66,7 +65,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">
@@ -98,8 +99,10 @@ 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>

apps/web/components/apps/CalendarListContainer.tsx

@@ -13,10 +13,10 @@ import {
   EmptyScreen,
   Icon,
   List,
-  ShellSubHeading,
   showToast,
-  SkeletonLoader,
+  AppSkeletonLoader as SkeletonLoader,
   Switch,
+  ShellSubHeading,
 } from "@calcom/ui";
 
 import { QueryCell } from "@lib/QueryCell";
@@ -159,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) => (
@@ -168,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">
@@ -183,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
@@ -329,7 +328,10 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
                 })}
                 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

@@ -44,7 +44,7 @@ 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")}>
@@ -56,7 +56,7 @@ function IntegrationListItem(props: {
           <ListItemText component="p">{props.description}</ListItemText>
           {/* Alert error that key stopped working. */}
           {props.invalidCredential && (
-            <div className="flex items-center space-x-2">
+            <div className="flex items-center space-x-2 rtl:space-x-reverse">
               <Icon.FiAlertCircle className="w-8 text-red-500 sm:w-4" />
               <ListItemText component="p" className="whitespace-pre-wrap text-red-500">
                 {t("invalid_credential")}

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

@@ -2,12 +2,9 @@ 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, Icon } from "@calcom/ui";
-
-import Shell from "../Shell";
-import type { HorizontalTabItemProps } from "../navigation/tabs/HorizontalTabItem";
-import HorizontalTabs from "../navigation/tabs/HorizontalTabs";
+import { EmptyScreen, Icon, HorizontalTabs, HorizontalTabItemProps } from "@calcom/ui";
 
 const tabs: HorizontalTabItemProps[] = [
   {

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

@@ -2,12 +2,10 @@ 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 type { VerticalTabItemProps } from "../navigation/tabs/VerticalTabItem";
+import { Icon } from "@calcom/ui";
+import type { HorizontalTabItemProps, VerticalTabItemProps } from "@calcom/ui";
 
 const tabs: (VerticalTabItemProps | HorizontalTabItemProps)[] = [
   {
@@ -54,9 +52,12 @@ export default function InstalledAppsLayout({
   if (query.data?.items.length === 0) {
     actualTabs = tabs.filter((tab) => tab.name !== InstalledAppVariants.payment);
   }
+
   return (
     <Shell {...rest}>
-      <AppCategoryNavigation baseURL="/apps/installed" containerClassname="w-full xl:mx-5 xl:w-4/5 xl:pr-5">
+      <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/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({

apps/web/components/booking/AvailableEventLocations.tsx

@@ -1,10 +1,13 @@
 import { getEventLocationType, locationKeyToString } from "@calcom/app-store/locations";
 import { classNames } from "@calcom/lib";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Icon, Tooltip } from "@calcom/ui";
 
 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) => {
@@ -16,19 +19,19 @@ export function AvailableEventLocations({ locations }: { locations: Props["event
         return (
           <div key={location.type} className="flex flex-row items-center text-sm font-medium">
             {eventLocationType.iconUrl === "/link.svg" ? (
-              <Icon.FiLink className="dark:text-darkgray-600 mr-[10px] ml-[2px] h-4 w-4 opacity-70 dark:opacity-100 " />
+              <Icon.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(
-                  "mr-[10px] ml-[2px] h-4 w-4 opacity-70 dark:opacity-100 ",
+                  "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={locationKeyToString(location)}>
-              <p className="truncate">{locationKeyToString(location)}</p>
+            <Tooltip content={t(locationKeyToString(location) ?? "")}>
+              <p className="truncate">{t(locationKeyToString(location) ?? "")}</p>
             </Tooltip>
           </div>
         );

apps/web/components/booking/AvailableTimes.tsx

@@ -57,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">
@@ -71,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 = {
@@ -87,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 } : {}),
               },
             };
 
@@ -101,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
@@ -113,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

@@ -44,18 +44,17 @@ const BookingDescription: FC<Props> = (props) => {
   const { profile, eventType, isBookingPage = false, children } = props;
   const { date: bookingDate } = useRouterQuery("date");
   const { t } = useLocale();
-  const { duration, setQuery: setDuration } = useRouterQuery("duration");
+  const { duration = eventType.length.toString(), setQuery: setDuration } = useRouterQuery("duration");
+
   useEffect(() => {
-    if (eventType.metadata?.multipleDuration !== undefined) {
-      if (!duration) {
-        setDuration(eventType.length);
-      } else {
-        if (!eventType.metadata?.multipleDuration.includes(Number(duration))) {
-          setDuration(eventType.length);
-        }
-      }
+    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;
@@ -77,7 +76,7 @@ const BookingDescription: FC<Props> = (props) => {
         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">
@@ -96,7 +95,7 @@ const BookingDescription: FC<Props> = (props) => {
             <div>
               <Icon.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"
                 )}
               />
@@ -113,7 +112,7 @@ const BookingDescription: FC<Props> = (props) => {
               isBookingPage && "dark:text-darkgray-600 text-sm font-medium text-gray-600"
             )}>
             <div>
-              <Icon.FiCheckSquare className="mr-[10px] ml-[2px] inline-block h-4 w-4 " />
+              <Icon.FiCheckSquare className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
             </div>
             {requiresConfirmationText}
           </div>
@@ -128,7 +127,7 @@ const BookingDescription: FC<Props> = (props) => {
           )}>
           <Icon.FiClock
             className={classNames(
-              "min-h-4 min-w-4 mr-[10px] ml-[2px] inline-block",
+              "min-h-4 min-w-4 ml-[2px] inline-block ltr:mr-[10px] rtl:ml-[10px]",
               isBookingPage && "mt-[2px]"
             )}
           />

apps/web/components/booking/BookingListItem.tsx

@@ -4,6 +4,7 @@ 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";
@@ -22,15 +23,16 @@ import {
   showToast,
   TextArea,
   Tooltip,
+  ActionType,
+  TableActions,
 } from "@calcom/ui";
 
 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];
 
@@ -48,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) {
@@ -112,6 +115,17 @@ function BookingListItem(booking: BookingItemProps) {
     },
   ];
 
+  const showRecordingActions: ActionType[] = [
+    {
+      id: "view_recordings",
+      label: t("view_recordings"),
+      onClick: () => {
+        setViewRecordingsDialogIsOpen(true);
+      },
+      disabled: mutation.isLoading,
+    },
+  ];
+
   let bookedActions: ActionType[] = [
     {
       id: "cancel",
@@ -158,6 +172,10 @@ 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">
@@ -202,7 +220,7 @@ function BookingListItem(booking: BookingItemProps) {
       },
     });
   };
-
+  const showRecordingsButtons = booking.location === "integrations:daily" && isPast && isConfirmed;
   return (
     <>
       <RescheduleDialog
@@ -216,7 +234,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>
@@ -248,7 +273,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-neutral-50 sm:flex-row">
         <td
           className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:min-w-[12rem]"
           onClick={onClickTableData}>
@@ -275,11 +300,6 @@ 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")}
-              </Badge>
-            )}
             {booking.paid && (
               <Badge className="ltr:mr-2 rtl:ml-2" variant="green">
                 {t("paid")}
@@ -336,19 +356,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>
@@ -376,6 +398,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 />
@@ -531,13 +554,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/UserAvatars.tsx

@@ -1,6 +1,5 @@
 import { CAL_URL } from "@calcom/lib/constants";
-
-import AvatarGroup, { AvatarGroupProps } from "@components/ui/AvatarGroup";
+import { AvatarGroup, AvatarGroupProps } from "@calcom/ui";
 
 export const UserAvatars = ({
   profile,
@@ -14,7 +13,6 @@ export const UserAvatars = ({
   const showMembers = !users.find((user) => user.name === profile.name) && props.showMembers;
   return (
     <AvatarGroup
-      border="border-2 dark:border-darkgray-100 border-white"
       items={
         [
           {
@@ -38,7 +36,7 @@ export const UserAvatars = ({
           href?: string;
         }[]
       }
-      size={props.size}
+      size="sm"
       truncateAfter={props.truncateAfter}
     />
   );

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

@@ -13,9 +13,11 @@ 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 getStripeAppData from "@calcom/lib/getStripeAppData";
@@ -26,7 +28,7 @@ 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, DatePicker } from "@calcom/ui";
+import { Icon, HeadSeo } from "@calcom/ui";
 
 import { timeZone as localStorageTimeZone } from "@lib/clock";
 import useRouterQuery from "@lib/hooks/useRouterQuery";
@@ -35,7 +37,6 @@ 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]";
@@ -150,7 +151,10 @@ const SlotPicker = ({
     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,
@@ -216,7 +220,7 @@ function TimezoneDropdown({
     <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 !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">
-          <Icon.FiGlobe className="min-h-4 min-w-4 mr-[10px] ml-[2px] -mt-[2px] inline-block" />
+          <Icon.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="min-h-4 min-w-4 ml-1 inline-block" />
@@ -253,6 +257,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();
@@ -289,7 +294,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) : [];
 
@@ -302,6 +307,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`
@@ -335,7 +342,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")
           )}>
@@ -350,54 +357,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">
+                          <Icon.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">
+                          <Icon.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>
 
-                  {/* Temporarily disabled - booking?.startTime && rescheduleUid && (
+                    {/* Temporarily disabled - booking?.startTime && rescheduleUid && (
                     <div>
                       <p
                         className="mt-4 mb-3 text-gray-600 dark:text-darkgray-600"
@@ -405,12 +413,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"
@@ -436,7 +445,8 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                 />
               </div>
             </div>
-            {(!restProps.isBrandingHidden || 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

@@ -26,6 +26,7 @@ import { LocationObject, LocationType } from "@calcom/core/location";
 import dayjs from "@calcom/dayjs";
 import {
   useEmbedNonStylesConfig,
+  useEmbedUiConfig,
   useIsBackgroundTransparent,
   useIsEmbed,
 } from "@calcom/embed-core/embed-iframe";
@@ -89,6 +90,7 @@ const BookingPage = ({
   const { t, i18n } = useLocale();
   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();
@@ -141,6 +143,7 @@ const BookingPage = ({
           isSuccessBookingPage: true,
           email: bookingForm.getValues("email"),
           eventTypeSlug: eventType.slug,
+          formerTime: booking?.startTime.toString(),
         },
       });
     },
@@ -156,6 +159,7 @@ const BookingPage = ({
           allRemainingBookings: true,
           email: bookingForm.getValues("email"),
           eventTypeSlug: eventType.slug,
+          formerTime: booking?.startTime.toString(),
         },
       });
     },
@@ -297,6 +301,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/") }
@@ -315,6 +352,22 @@ 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();
@@ -337,10 +390,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:
@@ -368,10 +418,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:
@@ -406,6 +453,7 @@ const BookingPage = ({
       }
     });
   }
+  const showEventTypeDetails = (isEmbed && !embedUiConfig.hideEventTypeDetails) || !isEmbed;
   const rainbowAppData = getEventTypeAppData(eventType, "rainbow") || {};
 
   // Define conditional gates here
@@ -439,7 +487,7 @@ const BookingPage = ({
         className={classNames(
           shouldAlignCentrally ? "mx-auto" : "",
           isEmbed ? "" : "sm:my-24",
-          "my-0 max-w-3xl "
+          "my-0 max-w-3xl"
         )}>
         <div
           className={classNames(
@@ -448,95 +496,97 @@ const BookingPage = ({
             "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 ">
+                      <Icon.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">
+                      <Icon.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>
+                    <Icon.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 ">
+                        <Icon.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">
+                      <Icon.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">
@@ -573,7 +623,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" />
+                        <Icon.FiInfo className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
                         <p>{t("email_validation_error")}</p>
                       </div>
                     )}
@@ -614,8 +664,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>
                           );
@@ -639,7 +689,7 @@ const BookingPage = ({
                       {selectedLocationType === LocationType.Phone
                         ? t("phone_number")
                         : selectedLocationType === LocationType.AttendeeInPerson
-                        ? t("Address")
+                        ? t("address")
                         : ""}
                     </label>
                     <div className="mt-1">
@@ -666,7 +716,7 @@ const BookingPage = ({
                     </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" />
+                        <Icon.FiInfo className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
                         <p>{t("invalid_number")}</p>
                       </div>
                     )}
@@ -679,8 +729,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 && (
@@ -745,24 +798,46 @@ const BookingPage = ({
                         </div>
                       )}
                       {input.options && input.type === EventTypeCustomInputType.RADIO && (
-                        <div className="">
-                          <div className="flex">
-                            <Group
-                              onValueChange={(e) => {
-                                bookingForm.setValue(`customInputs.${input.id}`, e);
-                              }}>
-                              <>
-                                {input.options.map((option, i) => (
-                                  <RadioField
-                                    label={option.label}
-                                    key={`option.${i}.radio`}
-                                    value={option.label}
-                                    id={`option.${i}.radio`}
-                                  />
-                                ))}
-                              </>
-                            </Group>
-                          </div>
+                        <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 ">
+                              <Icon.FiInfo className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
+                              <p>{t("invalid_number")}</p>
+                            </div>
+                          )}
                         </div>
                       )}
                     </div>
@@ -839,7 +914,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" />
+                        <Icon.FiInfo className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
                         <p>{t("invalid_number")}</p>
                       </div>
                     )}

apps/web/components/dialog/EditLocationDialog.tsx

@@ -354,7 +354,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
               />
               {selectedLocation && LocationOptions}
               <DialogFooter>
-                <div className="mt-4 flex justify-end space-x-2">
+                <div className="mt-4 flex justify-end space-x-2 rtl:space-x-reverse">
                   <Button
                     onClick={() => {
                       setShowLocationModal(false);

apps/web/components/eventtype/AvailabilityTab.tsx

@@ -109,7 +109,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 +149,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,7 +164,7 @@ 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" />
+              <Icon.FiGlobe className="ltr:mr-2 rtl:ml-2" />
               {schedule?.timeZone || <SkeletonText className="block h-5 w-32" />}
             </span>
             <Button

apps/web/components/eventtype/CustomInputTypeForm.tsx

@@ -40,6 +40,7 @@ const CustomInputTypeForm: FC<Props> = (props) => {
       value: EventTypeCustomInputType.RADIO,
       label: t("radio"),
     },
+    { value: EventTypeCustomInputType.PHONE, label: t("phone_number") },
   ];
 
   const { selectedCustomInput } = props;
@@ -133,8 +134,8 @@ 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

apps/web/components/eventtype/EventAdvancedTab.tsx

@@ -1,18 +1,19 @@
 import Link from "next/link";
-import type { CustomInputParsed, 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 { APP_NAME, 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 {
+  Badge,
   Button,
   Checkbox,
-  CustomInputItem,
   Dialog,
   DialogClose,
   DialogContent,
@@ -36,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();
@@ -51,7 +64,6 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
   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) => {
@@ -64,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">
       {/**
@@ -75,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">
@@ -239,13 +258,28 @@ 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")}
@@ -374,7 +408,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
       <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
@@ -386,13 +420,14 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
                 selectedCustomInput={selectedCustomInput}
                 onSubmit={(values) => {
                   const customInput: CustomInputParsed = {
-                    id: -1,
+                    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;
@@ -400,6 +435,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
                     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;

apps/web/components/eventtype/EventAppsTab.tsx

@@ -1,4 +1,4 @@
-import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
+import { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
 import { useFormContext } from "react-hook-form";
 
 import EventTypeAppContext, { GetAppData, SetAppData } from "@calcom/app-store/EventTypeAppContext";
@@ -9,7 +9,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
 import { Button, EmptyScreen, ErrorBoundary, Icon } from "@calcom/ui";
 
-type EventType = Pick<EventTypeSetupInfered, "eventType">["eventType"] &
+type EventType = Pick<EventTypeSetupProps, "eventType">["eventType"] &
   EventTypeAppCardComponentProps["eventType"];
 
 function AppCardWrapper({

apps/web/components/eventtype/EventLimitsTab.tsx

@@ -1,6 +1,6 @@
 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 { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
 import { useMemo, useRef, useState } from "react";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 
@@ -12,7 +12,7 @@ import { PeriodType } from "@calcom/prisma/client";
 import type { BookingLimit } from "@calcom/types/Calendar";
 import { Button, DateRangePicker, Icon, Input, InputField, Label, Select, SettingsToggle } from "@calcom/ui";
 
-export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupInfered, "eventType">) => {
+export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventType">) => {
   const { t } = useLocale();
   const formMethods = useFormContext<FormValues>();
   const minimumBookingNoticeType = useRef<DurationType>(findDurationType(eventType.minimumBookingNotice));
@@ -191,13 +191,13 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupInfered, "event
 
               return (
                 <>
-                  <div className="w-1/2 md:w-3/4">
+                  <div className="w-1/2 md:w-full">
                     <InputField
                       required
                       label={t("minimum_booking_notice")}
                       type="number"
                       placeholder="120"
-                      className="mr-2 mb-0 h-[38px] rounded-[4px]"
+                      className="mb-0 h-[38px] rounded-[4px] ltr:mr-2 rtl:ml-2"
                       {...formMethods.register("minimumBookingNoticeInDurationType", {
                         onChange: (event: React.ChangeEvent<HTMLInputElement>) =>
                           onMinimumNoticeChange(event.target.value),
@@ -327,7 +327,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}
@@ -347,7 +347,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>
                 );
               })}
@@ -410,7 +412,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"

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,16 +1,18 @@
 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 { EventLocationType, getEventLocationType } 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 { Button, Icon, Label, Select, Skeleton, TextField, SettingsToggle } from "@calcom/ui";
+import { Button, Icon, Label, Select, SettingsToggle, Skeleton, TextField } from "@calcom/ui";
 
 import { slugify } from "@lib/slugify";
 
@@ -23,7 +25,7 @@ type OptionTypeBase = {
 };
 
 export const EventSetupTab = (
-  props: Pick<EventTypeSetupInfered, "eventType" | "locationOptions" | "team" | "teamMembers">
+  props: Pick<EventTypeSetupProps, "eventType" | "locationOptions" | "team" | "teamMembers">
 ) => {
   const { t } = useLocale();
   const formMethods = useFormContext<FormValues>();
@@ -169,7 +171,7 @@ export const EventSetupTab = (
                         alt={`${eventLocationType.label} logo`}
                       />
                       <span className="truncate text-sm ltr:ml-1 rtl:mr-1">
-                        {location[eventLocationType.defaultValueVariable] || eventLocationType.label}
+                        {t(location[eventLocationType.defaultValueVariable] || eventLocationType.label)}
                       </span>
                     </div>
                     <div className="flex">
@@ -195,6 +197,23 @@ export const EventSetupTab = (
                 </li>
               );
             })}
+            {validLocations.some((location) => location.type === MeetLocationType) && (
+              <div className="flex text-sm text-gray-600">
+                <Icon.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)}>
@@ -262,12 +281,14 @@ export const EventSetupTab = (
                   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);
                 }}
@@ -288,7 +309,7 @@ export const EventSetupTab = (
                   setDefaultDuration(
                     selectedMultipleDuration.find((opt) => opt.value === option?.value) ?? null
                   );
-                  formMethods.setValue("length", Number(option?.value));
+                  if (option) formMethods.setValue("length", option.value);
                 }}
               />
             </div>
@@ -296,14 +317,11 @@ export const EventSetupTab = (
         ) : (
           <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));
-            }}
+            {...formMethods.register("length")}
+            addOnSuffix={<>{t("minutes")}</>}
           />
         )}
         <div className="!mt-4 [&_label]:my-1 [&_label]:font-normal">
@@ -327,6 +345,7 @@ export const EventSetupTab = (
           <Skeleton as={Label} loadingClassName="w-16">
             {t("location")}
           </Skeleton>
+
           <Controller
             name="locations"
             control={formMethods.control}
@@ -343,7 +362,7 @@ export const EventSetupTab = (
         saveLocation={saveLocation}
         defaultValues={formMethods.getValues("locations")}
         selection={
-          selectedLocation ? { value: selectedLocation.value, label: selectedLocation.label } : undefined
+          selectedLocation ? { value: selectedLocation.value, label: t(selectedLocation.label) } : undefined
         }
         setSelectedLocation={setSelectedLocation}
         setEditingLocationType={setEditingLocationType}

apps/web/components/eventtype/EventTeamTab.tsx

@@ -1,11 +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 { Avatar, Button, CheckedTeamSelect, Icon, Label, Select } from "@calcom/ui";
+import { Label, Select } from "@calcom/ui";
 
 interface IMemberToValue {
   id: number | null;
@@ -21,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;
@@ -47,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"
@@ -72,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,179 @@
+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, Icon, showToast } from "@calcom/ui";
+
+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={Icon.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 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,10 +1,11 @@
 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";
@@ -23,7 +24,6 @@ import {
   HorizontalTabs,
   Icon,
   Label,
-  Shell,
   showToast,
   Skeleton,
   Switch,
@@ -32,14 +32,13 @@ import {
   VerticalTabs,
 } from "@calcom/ui";
 
-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;
@@ -150,13 +149,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,
         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]);
 
@@ -294,7 +300,7 @@ function EventTypeSingleLayout({
           </Button>
         </div>
       }>
-      <ClientSuspense fallback={<Loader />}>
+      <Suspense fallback={<Icon.FiLoader />}>
         <div className="-mt-2 flex flex-col xl:flex-row xl:space-x-8">
           <div className="hidden xl:block">
             <VerticalTabs
@@ -317,7 +323,7 @@ function EventTypeSingleLayout({
             </div>
           </div>
         </div>
-      </ClientSuspense>
+      </Suspense>
       <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
         <ConfirmationDialogContent
           isLoading={deleteMutation.isLoading}

apps/web/components/eventtype/RecurringEventController.tsx

@@ -57,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"
@@ -89,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"
@@ -105,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/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/UserSettings.tsx

@@ -19,7 +19,8 @@ interface IUserSettingsProps {
 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,

apps/web/components/layouts/WizardLayout.tsx

@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import { Toaster } from "react-hot-toast";
 
-import { StepCard, Steps } from "../../..";
+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/security/DisableTwoFactorModal.tsx

@@ -82,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/EnableTwoFactorModal.tsx

@@ -177,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")}
@@ -186,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>

apps/web/components/security/TwoFactorModalHeader.tsx

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

apps/web/components/settings/CalendarSwitch.tsx

@@ -62,7 +62,7 @@ export function CalendarSwitch(props: {
     }
   );
   return (
-    <div className="flex space-x-2 py-1">
+    <div className="flex space-x-2 py-1 rtl:space-x-reverse">
       <Switch
         key={props.externalId}
         name="enabled"

apps/web/components/settings/DisableTwoFactorModal.tsx

@@ -90,7 +90,7 @@ const DisableTwoFactorAuthModal = ({
           </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/settings/EnableTwoFactorModal.tsx

@@ -170,7 +170,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel, open, onOpenChange }: Enable
             <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")}
@@ -179,13 +179,13 @@ const EnableTwoFactorModal = ({ onEnable, onCancel, open, onOpenChange }: Enable
             <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>

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

@@ -22,8 +22,8 @@ const Member = ({ member, teamName }: { member: MemberType; teamName: string | n
           imageSrc={WEBAPP_URL + "/" + member.username + "/avatar.png"}
         />
         <section className="line-clamp-4 mt-2 w-full space-y-1">
-          <p className="font-medium text-neutral-900 dark:text-white">{member.name}</p>
-          <p className="line-clamp-3 overflow-ellipsis text-sm font-normal text-neutral-500 dark:text-white">
+          <p className="font-medium text-gray-900 dark:text-white">{member.name}</p>
+          <p className="line-clamp-3 overflow-ellipsis text-sm font-normal text-gray-500 dark:text-white">
             {member.bio || t("user_from_team", { user: member.name, team: teamName })}
           </p>
         </section>

apps/web/components/ui/AuthContainer.tsx

@@ -1,10 +1,9 @@
 import classNames from "classnames";
-import React from "react";
 
 import { APP_NAME, LOGO } from "@calcom/lib/constants";
+import { Credits, HeadSeo } from "@calcom/ui";
 
 import Loader from "@components/Loader";
-import { HeadSeo } from "@components/seo/head-seo";
 
 interface Props {
   title: string;
@@ -23,8 +22,9 @@ export default function AuthContainer(props: React.PropsWithChildren<Props>) {
         // eslint-disable-next-line @next/next/no-img-element
         <img className="mb-auto h-4" src={LOGO} alt={`${APP_NAME} Logo`} />
       )}
+
       <div className={classNames(props.showLogo ? "text-center" : "", "sm:mx-auto sm:w-full sm:max-w-md")}>
-        {props.heading && <h2 className="font-cal text-center text-3xl text-neutral-900">{props.heading}</h2>}
+        {props.heading && <h2 className="font-cal text-center text-3xl text-gray-900">{props.heading}</h2>}
       </div>
       {props.loading && (
         <div className="absolute z-50 flex h-screen w-full items-center bg-gray-50">
@@ -35,7 +35,10 @@ export default function AuthContainer(props: React.PropsWithChildren<Props>) {
         <div className="border-1 mx-2 rounded-md border-gray-200 bg-white px-4 py-10 sm:px-10">
           {props.children}
         </div>
-        <div className="mt-8 text-center text-sm text-neutral-600">{props.footerText}</div>
+        <div className="mt-8 text-center text-sm text-gray-600">
+          {props.footerText}
+          <Credits />
+        </div>
       </div>
     </div>
   );

apps/web/components/ui/AvatarGroup.tsx

@@ -34,14 +34,8 @@ export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) {
           );
 
           return (
-            <li key={idx} className="-mr-2 inline-block">
-              {item.href ? (
-                <Link href={item.href}>
-                  <a>{avatar}</a>
-                </Link>
-              ) : (
-                avatar
-              )}
+            <li key={idx} className="-ltr:mr-2 inline-block rtl:ml-2">
+              {item.href ? <Link href={item.href}>{avatar}</Link> : avatar}
             </li>
           );
         }

apps/web/components/ui/LinkIconButton.tsx

@@ -13,7 +13,7 @@ export default function LinkIconButton(props: LinkIconButtonProps) {
         type="button"
         {...props}
         className="text-md flex items-center rounded-sm px-2 py-1 text-sm font-medium text-gray-700 hover:bg-gray-200 hover:text-gray-900">
-        <props.Icon className="h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
+        <props.Icon className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2" />
         {props.children}
       </button>
     </div>

apps/web/components/ui/LinkText.tsx

@@ -1,22 +0,0 @@
-import Link from "next/link";
-
-interface ILinkTextProps {
-  href: string;
-  children: React.ReactNode;
-  classNameChildren?: string;
-  target?: string;
-}
-/**
- * This component had to be made in order to make i18n work with next/link
- * @see https://github.com/i18next/react-i18next/issues/1090#issuecomment-615426145
- **/
-export const LinkText = (props: ILinkTextProps) => {
-  const { target, href, children, classNameChildren, ...moreProps } = props;
-  return (
-    <Link href={href || ""} {...moreProps}>
-      <a target={target || ""} className={classNameChildren}>
-        {children}
-      </a>
-    </Link>
-  );
-};

apps/web/components/ui/PoweredByCal.tsx

@@ -9,26 +9,21 @@ const PoweredByCal = () => {
   const isEmbed = useIsEmbed();
   return (
     <div className={"p-2 text-center text-xs sm:text-right" + (isEmbed ? " max-w-3xl" : "")}>
-      <Link href={POWERED_BY_URL}>
-        <a target="_blank" className="text-bookinglight opacity-50 hover:opacity-100 dark:text-white">
-          {t("powered_by")}{" "}
-          {
-            // eslint-disable-next-line @next/next/no-img-element
-            <img
-              className="relative -mt-px inline h-[10px] w-auto dark:hidden"
-              src="/cal-logo-word.svg"
-              alt="Cal.com Logo"
-            />
-          }
-          {
-            // eslint-disable-next-line @next/next/no-img-element
-            <img
-              className="relativ -mt-px hidden h-[10px] w-auto dark:inline"
-              src="/cal-logo-word-dark.svg"
-              alt="Cal.com Logo"
-            />
-          }
-        </a>
+      <Link
+        href={POWERED_BY_URL}
+        target="_blank"
+        className="text-bookinglight opacity-50 hover:opacity-100 dark:text-white">
+        {t("powered_by")}{" "}
+        <img
+          className="relative -mt-px inline h-[10px] w-auto dark:hidden"
+          src="/cal-logo-word.svg"
+          alt="Cal.com Logo"
+        />
+        <img
+          className="relativ -mt-px hidden h-[10px] w-auto dark:inline"
+          src="/cal-logo-word-dark.svg"
+          alt="Cal.com Logo"
+        />
       </Link>
     </div>
   );

apps/web/components/ui/SettingInputContainer.tsx

@@ -13,8 +13,8 @@ export default function SettingInputContainer({
     <div className="space-y-3">
       <div className="block sm:flex">
         <div className="min-w-48 mb-4 sm:mb-0">
-          <label htmlFor={htmlFor} className="mt-1 flex text-sm font-medium text-neutral-700">
-            <Icon className="mt-0.5 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
+          <label htmlFor={htmlFor} className="mt-1 flex text-sm font-medium text-gray-700">
+            <Icon className="mt-0.5 h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2" />
             {label}
           </label>
         </div>

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

@@ -11,17 +11,7 @@ import { User } from "@calcom/prisma/client";
 import { TRPCClientErrorLike } from "@calcom/trpc/client";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
-import {
-  Button,
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogHeader,
-  Icon,
-  Input,
-  Label,
-  StarIconSolid,
-} from "@calcom/ui";
+import { Button, Dialog, DialogClose, DialogContent, DialogHeader, Icon, Input, Label } from "@calcom/ui";
 
 export enum UsernameChangeStatusEnum {
   UPGRADE = "UPGRADE",
@@ -197,7 +187,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
       <div className="flex justify-items-center">
         <Label htmlFor="username">{t("username")}</Label>
       </div>
-      <div className="mt-2 flex rounded-md">
+      <div className="flex rounded-md">
         <span
           className={classNames(
             isInputUsernamePremium ? "border-1 border-orange-400 " : "",
@@ -240,7 +230,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
                 isInputUsernamePremium ? "text-orange-400" : "",
                 usernameIsAvailable ? "" : ""
               )}>
-              {isInputUsernamePremium ? <StarIconSolid className="mt-[2px] w-6" /> : <></>}
+              {isInputUsernamePremium ? <Icon.StarIconSolid className="mt-[2px] w-6" /> : <></>}
               {!isInputUsernamePremium && usernameIsAvailable ? <Icon.FiCheck className="mt-2 w-6" /> : <></>}
             </span>
           </div>

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

@@ -7,7 +7,17 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { TRPCClientErrorLike } from "@calcom/trpc/client";
 import { trpc } from "@calcom/trpc/react";
 import { AppRouter } from "@calcom/trpc/server/routers/_app";
-import { Button, Dialog, DialogClose, DialogContent, DialogHeader, Icon, Input, Label } from "@calcom/ui";
+import {
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  Icon,
+  Input,
+  Label,
+  TextField,
+} from "@calcom/ui";
 
 interface ICustomUsernameProps {
   currentUsername: string | undefined;
@@ -77,10 +87,9 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
 
   const ActionButtons = () => {
     return usernameIsAvailable && currentUsername !== inputUsernameValue ? (
-      <div className="flex flex-row">
+      <div className="rlt:space-x-reverse mt-px flex flex-row space-x-2 ltr:ml-2 ltr:mr-2 rtl:ml-2 rtl:space-x-reverse">
         <Button
           type="button"
-          className="mx-2"
           onClick={() => setOpenDialogSaveUsername(true)}
           data-testid="update-username-btn">
           {t("update")}
@@ -88,7 +97,6 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
         <Button
           type="button"
           color="minimal"
-          className="mx-2"
           onClick={() => {
             if (currentUsername) {
               setInputUsernameValue(currentUsername);
@@ -110,26 +118,20 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
 
   return (
     <div>
-      <div>
-        <Label htmlFor="username">{t("username")}</Label>
-      </div>
-      <div className="mt-2 flex rounded-md">
-        <span
-          className={classNames(
-            "inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500"
-          )}>
-          {process.env.NEXT_PUBLIC_WEBSITE_URL.replace("https://", "").replace("http://", "")}/
-        </span>
+      <div className="flex rounded-md">
         <div className="relative w-full">
-          <Input
+          <TextField
             ref={usernameRef}
             name="username"
             value={inputUsernameValue}
+            addOnLeading={
+              <>{process.env.NEXT_PUBLIC_WEBSITE_URL.replace("https://", "").replace("http://", "")}/</>
+            }
             autoComplete="none"
             autoCapitalize="none"
             autoCorrect="none"
             className={classNames(
-              "mb-0 mt-0 h-6 rounded-md rounded-l-none",
+              "mb-0 mt-0 h-6 rounded-md ltr:rounded-l-none rtl:rounded-r-none",
               markAsError
                 ? "focus:shadow-0 focus:ring-shadow-0 border-red-500 focus:border-red-500 focus:outline-none focus:ring-0"
                 : ""
@@ -141,18 +143,18 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
             data-testid="username-input"
           />
           {currentUsername !== inputUsernameValue && (
-            <div className="absolute right-[2px] top-0 flex flex-row">
+            <div className="absolute right-[2px] top-6 flex flex-row">
               <span className={classNames("mx-2 py-2")}>
-                {usernameIsAvailable ? <Icon.FiCheck className="mt-[2px] w-6" /> : <></>}
+                {usernameIsAvailable ? <Icon.FiCheck className="w-6" /> : <></>}
               </span>
             </div>
           )}
         </div>
-        <div className="hidden  md:inline">
+        <div className="mt-5 hidden md:inline">
           <ActionButtons />
         </div>
       </div>
-      {markAsError && <p className="mt-1 text-xs text-red-500">Username is already taken</p>}
+      {markAsError && <p className="mt-1 text-xs text-red-500">{t("username_already_taken")}</p>}
 
       {usernameIsAvailable && currentUsername !== inputUsernameValue && (
         <div className="mt-2 flex justify-end md:hidden">

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

@@ -21,7 +21,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
             {React.createElement(
               descriptionAsLabel ? "div" : "label",
               {
-                className: "flex text-sm font-medium text-neutral-700",
+                className: "flex text-sm font-medium text-gray-700",
                 ...(!descriptionAsLabel
                   ? {
                       htmlFor: rest.id,
@@ -39,7 +39,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
               {
                 className: classNames(
                   "relative flex items-start",
-                  descriptionAsLabel ? "text-neutral-700" : "text-neutral-900"
+                  descriptionAsLabel ? "text-gray-700" : "text-gray-900"
                 ),
               },
               <>

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

@@ -50,7 +50,7 @@ export const CheckedSelect = ({
           {option.label}
           <Icon.FiX
             onClick={() => props.onChange(value.filter((item) => item.value !== option.value))}
-            className="float-right mt-0.5 h-5 w-5 cursor-pointer text-neutral-500"
+            className="float-right mt-0.5 h-5 w-5 cursor-pointer text-gray-500"
           />
         </div>
       ))}

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

@@ -10,7 +10,7 @@ const MinutesField = forwardRef<HTMLInputElement, Props>(({ label, ...rest }, re
     <div className="block sm:flex">
       {!!label && (
         <div className="min-w-48 mb-4 sm:mb-0">
-          <label htmlFor={rest.id} className="flex h-full items-center text-sm font-medium text-neutral-700">
+          <label htmlFor={rest.id} className="flex h-full items-center text-sm font-medium text-gray-700">
             {label}
           </label>
         </div>

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

@@ -109,7 +109,7 @@ function Select<
         IndicatorSeparator: () => null,
         Input: InputComponent,
       }}
-      className={classNames("text-sm", className)}
+      className={classNames("border-0 text-sm", className)}
       {...props}
     />
   );

apps/web/components/ui/form/radio-area/RadioAreaGroup.tsx

@@ -1,79 +0,0 @@
-import React, { ReactNode, useState } from "react";
-
-import classNames from "@lib/classNames";
-
-type RadioAreaProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> & {
-  onChange?: (value: string) => void;
-  defaultChecked?: boolean;
-};
-
-const RadioArea = (props: RadioAreaProps) => {
-  return (
-    <label
-      className={classNames(
-        "border-1 block border p-4 focus:outline-none focus:ring focus:ring-neutral-500",
-        props.checked && "border-brand",
-        props.className
-      )}>
-      <input
-        onChange={(e) => {
-          if (typeof props.onChange === "function") {
-            props.onChange(e.target.value);
-          }
-        }}
-        checked={props.checked}
-        className="float-right ml-3 text-neutral-900 focus:ring-neutral-500"
-        name={props.name}
-        value={props.value}
-        type="radio"
-      />
-      {props.children}
-    </label>
-  );
-};
-
-type ChildrenProps = {
-  props: RadioAreaProps;
-  children?: ReactNode;
-};
-interface RadioAreaGroupProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onChange" | "children"> {
-  children: ChildrenProps | ChildrenProps[];
-  name?: string;
-  onChange?: (value: string) => void;
-}
-
-const RadioAreaGroup = ({ children, name, onChange, ...passThroughProps }: RadioAreaGroupProps) => {
-  const [checkedIdx, setCheckedIdx] = useState<number | null>(null);
-
-  const changeHandler = (value: string, idx: number) => {
-    if (onChange) {
-      onChange(value);
-    }
-    setCheckedIdx(idx);
-  };
-
-  return (
-    <div {...passThroughProps}>
-      {(Array.isArray(children) ? children : [children]).map((child, idx: number) => {
-        if (checkedIdx === null && child.props.defaultChecked) {
-          setCheckedIdx(idx);
-        }
-        return (
-          <Item
-            {...child.props}
-            key={idx}
-            name={name}
-            checked={idx === checkedIdx}
-            onChange={(value: string) => changeHandler(value, idx)}>
-            {child.props.children}
-          </Item>
-        );
-      })}
-    </div>
-  );
-};
-
-const Item = RadioArea;
-const Group = RadioAreaGroup;
-
-export { RadioArea, RadioAreaGroup, Item, Group };

apps/web/components/ui/form/radio-area/Select.tsx

@@ -1,61 +0,0 @@
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
-import React from "react";
-
-import { Icon } from "@calcom/ui";
-
-import classNames from "@lib/classNames";
-import { useLocale } from "@lib/hooks/useLocale";
-
-import { RadioArea, RadioAreaGroup } from "@components/ui/form/radio-area/RadioAreaGroup";
-
-interface OptionProps
-  extends Pick<React.OptionHTMLAttributes<HTMLOptionElement>, "value" | "label" | "className"> {
-  description?: string;
-}
-
-interface RadioAreaSelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "onChange"> {
-  options: OptionProps[]; // allow options to be passed programmatically, like options={}
-  onChange?: (value: string) => void;
-}
-
-export const Select = function RadioAreaSelect(props: RadioAreaSelectProps) {
-  const { t } = useLocale();
-  const {
-    options,
-    disabled = !options.length, // if not explicitly disabled and the options length is empty, disable anyway
-    placeholder = t("select"),
-  } = props;
-
-  const getLabel = (value: string | ReadonlyArray<string> | number | undefined) =>
-    options.find((option: OptionProps) => option.value === value)?.label;
-
-  return (
-    <Collapsible className={classNames("w-full", props.className)}>
-      <CollapsibleTrigger
-        type="button"
-        disabled={disabled}
-        className={classNames(
-          "border-1 focus:ring-primary-500 mb-1 block w-full cursor-pointer rounded-sm border border-gray-300 bg-white p-2 text-left text-sm",
-          disabled && "cursor-default bg-gray-200 focus:ring-0 "
-        )}>
-        {getLabel(props.value) ?? placeholder}
-        <Icon.FiChevronDown className="float-right h-5 w-5 text-neutral-500" />
-      </CollapsibleTrigger>
-      <CollapsibleContent>
-        <RadioAreaGroup className="space-y-2 text-sm" name={props.name} onChange={props.onChange}>
-          {options.map((option) => (
-            <RadioArea
-              {...option}
-              key={Array.isArray(option.value) ? option.value.join(",") : `${option.value}`}
-              defaultChecked={props.value === option.value}>
-              <strong className="mb-1 block">{option.label}</strong>
-              <p>{option.description}</p>
-            </RadioArea>
-          ))}
-        </RadioAreaGroup>
-      </CollapsibleContent>
-    </Collapsible>
-  );
-};
-
-export default Select;

apps/web/components/ui/form/radio-area/index.ts

@@ -1,2 +0,0 @@
-export * from "./RadioAreaGroup";
-export * from "./Select";

apps/web/lib/core/i18n/i18n.utils.ts

@@ -1,7 +1,6 @@
 import parser from "accept-language-parser";
 import { IncomingMessage } from "http";
 
-import prisma from "@calcom/prisma";
 import { Maybe } from "@calcom/trpc/server";
 
 import { getSession } from "@lib/auth";
@@ -17,6 +16,7 @@ export function getLocaleFromHeaders(req: IncomingMessage): string {
 }
 
 export const getOrSetUserLocaleFromHeaders = async (req: IncomingMessage): Promise<string> => {
+  const prisma = (await import("@calcom/prisma")).default;
   const session = await getSession({ req });
   const preferredLocale = getLocaleFromHeaders(req);
 

apps/web/next.config.js

@@ -89,6 +89,12 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: !!process.env.CI,
   },
+  // TODO: We need to have all components in `@calcom/ui/components` in order to use this
+  // modularizeImports: {
+  //   "@calcom/ui": {
+  //     transform: "@calcom/ui/components/{{member}}",
+  //   },
+  // },
   images: {
     unoptimized: true,
   },
@@ -227,6 +233,11 @@ const nextConfig = {
         destination: "/404",
         permanent: false,
       },
+      {
+        source: "/booking/direct/:action/:email/:bookingUid/:oldToken",
+        destination: "/api/link?action=:action&email=:email&bookingUid=:bookingUid&oldToken=:oldToken",
+        permanent: true,
+      },
     ];
 
     if (process.env.NEXT_PUBLIC_WEBAPP_URL === "https://app.cal.com") {

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calcom/web",
-  "version": "2.3.7",
+  "version": "2.4.7",
   "private": true,
   "scripts": {
     "analyze": "ANALYZE=true next build",
@@ -61,12 +61,13 @@
     "@stripe/stripe-js": "^1.35.0",
     "@tanstack/react-query": "^4.3.9",
     "@vercel/edge-functions-ui": "^0.2.1",
-    "@vercel/og": "^0.0.19",
+    "@vercel/og": "^0.0.21",
     "accept-language-parser": "^1.5.0",
     "async": "^3.2.4",
     "bcryptjs": "^2.4.3",
     "classnames": "^2.3.1",
     "dotenv-cli": "^6.0.0",
+    "eslint-config-next": "^13.1.1",
     "googleapis": "^84.0.0",
     "gray-matter": "^4.0.3",
     "handlebars": "^4.7.7",
@@ -80,16 +81,14 @@
     "memory-cache": "^0.2.0",
     "micro": "^9.4.1",
     "mime-types": "^2.1.35",
-    "next": "^12.3.1",
+    "next": "^13.1.1",
     "next-auth": "^4.10.3",
-    "next-axiom": "^0.10.0",
+    "next-axiom": "^0.16.0",
     "next-collect": "^0.2.1",
     "next-i18next": "^11.3.0",
-    "next-mdx-remote": "^4.1.0",
     "next-seo": "^4.26.0",
     "next-themes": "^0.2.0",
-    "next-transpile-modules": "^9.0.0",
-    "nock": "^13.2.8",
+    "next-transpile-modules": "^10.0.0",
     "nodemailer": "^6.7.8",
     "otplib": "^12.0.1",
     "qrcode": "^1.5.1",
@@ -121,7 +120,7 @@
     "tailwindcss-radix": "^2.6.0",
     "uuid": "^8.3.2",
     "web3": "^1.7.5",
-    "zod": "^3.19.1"
+    "zod": "^3.20.2"
   },
   "devDependencies": {
     "@babel/core": "^7.19.6",

apps/web/pages/404.tsx

@@ -4,12 +4,10 @@ import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
 import { COMPANY_NAME, DEVELOPER_DOCS, DOCS_URL, JOIN_SLACK, WEBSITE_URL } from "@calcom/lib/constants";
-import { Icon } from "@calcom/ui";
+import { Icon, HeadSeo } from "@calcom/ui";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
-import { HeadSeo } from "@components/seo/head-seo";
-
 import { ssgInit } from "@server/lib/ssg";
 
 export default function Custom404() {
@@ -100,26 +98,26 @@ export default function Custom404() {
 
                 <ul role="list" className="divide-y divide-gray-200 border-gray-200">
                   <li className="px-4 py-2">
-                    <Link href={`${DEVELOPER_DOCS}/self-hosting/installation`}>
-                      <a className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
-                        <div className="flex-shrink-0">
-                          <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
-                            <Icon.FiFileText className="h-6 w-6 text-gray-700" aria-hidden="true" />
+                    <Link
+                      href={`${DEVELOPER_DOCS}/self-hosting/installation`}
+                      className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
+                      <div className="flex-shrink-0">
+                        <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
+                          <Icon.FiFileText className="h-6 w-6 text-gray-700" aria-hidden="true" />
+                        </span>
+                      </div>
+                      <div className="min-w-0 flex-1">
+                        <h3 className="text-base font-medium text-gray-900">
+                          <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
+                            <span className="absolute inset-0" aria-hidden="true" />
+                            {t("prisma_studio_tip")}
                           </span>
-                        </div>
-                        <div className="min-w-0 flex-1">
-                          <h3 className="text-base font-medium text-gray-900">
-                            <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
-                              <span className="absolute inset-0" aria-hidden="true" />
-                              {t("prisma_studio_tip")}
-                            </span>
-                          </h3>
-                          <p className="text-base text-gray-500">{t("prisma_studio_tip_description")}</p>
-                        </div>
-                        <div className="flex-shrink-0 self-center">
-                          <Icon.FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
-                        </div>
-                      </a>
+                        </h3>
+                        <p className="text-base text-gray-500">{t("prisma_studio_tip_description")}</p>
+                      </div>
+                      <div className="flex-shrink-0 self-center">
+                        <Icon.FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                      </div>
                     </Link>
                   </li>
                   <li className="px-4 py-2">
@@ -169,11 +167,11 @@ export default function Custom404() {
                   </li>
                 </ul>
                 <div className="mt-8">
-                  <Link href={`${WEBSITE_URL}/enterprise`}>
-                    <a className="text-base font-medium text-black hover:text-gray-500">
-                      {t("contact_sales")}
-                      <span aria-hidden="true"> &rarr;</span>
-                    </a>
+                  <Link
+                    href={`${WEBSITE_URL}/enterprise`}
+                    className="text-base font-medium text-black hover:text-gray-500">
+                    {t("contact_sales")}
+                    <span aria-hidden="true"> &rarr;</span>
                   </Link>
                 </div>
               </div>
@@ -245,26 +243,26 @@ export default function Custom404() {
                 <ul role="list" className="mt-4 divide-y divide-gray-200 border-gray-200">
                   {links.map((link, linkIdx) => (
                     <li key={linkIdx} className="px-4 py-2">
-                      <Link href={link.href}>
-                        <a className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
-                          <div className="flex-shrink-0">
-                            <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
-                              <link.icon className="h-6 w-6 text-gray-700" aria-hidden="true" />
+                      <Link
+                        href={link.href}
+                        className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
+                        <div className="flex-shrink-0">
+                          <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
+                            <link.icon className="h-6 w-6 text-gray-700" aria-hidden="true" />
+                          </span>
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <h3 className="text-base font-medium text-gray-900">
+                            <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
+                              <span className="absolute inset-0" aria-hidden="true" />
+                              {link.title}
                             </span>
-                          </div>
-                          <div className="min-w-0 flex-1">
-                            <h3 className="text-base font-medium text-gray-900">
-                              <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
-                                <span className="absolute inset-0" aria-hidden="true" />
-                                {link.title}
-                              </span>
-                            </h3>
-                            <p className="text-base text-gray-500">{link.description}</p>
-                          </div>
-                          <div className="flex-shrink-0 self-center">
-                            <Icon.FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
-                          </div>
-                        </a>
+                          </h3>
+                          <p className="text-base text-gray-500">{link.description}</p>
+                        </div>
+                        <div className="flex-shrink-0 self-center">
+                          <Icon.FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                        </div>
                       </Link>
                     </li>
                   ))}
@@ -315,11 +313,9 @@ export default function Custom404() {
                   </li>
                 </ul>
                 <div className="mt-8">
-                  <Link href="/">
-                    <a className="text-base font-medium text-black hover:text-gray-500">
-                      {t("or_go_back_home")}
-                      <span aria-hidden="true"> &rarr;</span>
-                    </a>
+                  <Link href="/" className="text-base font-medium text-black hover:text-gray-500">
+                    {t("or_go_back_home")}
+                    <span aria-hidden="true"> &rarr;</span>
                   </Link>
                 </div>
               </div>

apps/web/pages/500.tsx

@@ -1,32 +1,48 @@
 import Head from "next/head";
+import { useRouter } from "next/router";
 
 import { APP_NAME, WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button } from "@calcom/ui";
+import { Button, Icon, showToast } from "@calcom/ui";
 
 export default function Error500() {
   const { t } = useLocale();
+  const router = useRouter();
 
   return (
-    <div className="flex h-screen">
+    <div className="flex h-screen bg-gray-100">
       <Head>
         <title>Something unexpected occurred | {APP_NAME}</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <div className="m-auto text-center">
-        <h1 className="font-cal text-[250px] text-gray-900">
-          5
-          {
-            // eslint-disable-next-line @next/next/no-img-element
-            <img src="/error.svg" className="-mt-10 inline w-60" alt="0" />
-          }
-          0
-        </h1>
-        <h2 className="mb-2 -mt-16 text-3xl text-gray-600">It&apos;s not you, it&apos;s us.</h2>
-        <p className="mb-4 max-w-2xl text-gray-500">
+      <div className="rtl: m-auto rounded-md bg-white p-10 text-right ltr:text-left">
+        <h1 className="font-cal text-6xl text-black">500</h1>
+        <h2 className="mt-6 text-2xl font-medium text-black">It&apos;s not you, it&apos;s us.</h2>
+        <p className="mt-4 mb-6 max-w-2xl text-sm text-gray-600">
           Something went wrong on our end. Get in touch with our support team, and we’ll get it fixed right
           away for you.
         </p>
+        {router.query.error && (
+          <div className="mb-8 flex flex-col">
+            <p className="mb-4 max-w-2xl text-sm text-gray-600">
+              Please provide the following text when contacting support to better help you:
+            </p>
+            <pre className="w-full max-w-2xl whitespace-normal break-words rounded-md bg-gray-200 p-4 text-gray-900">
+              {router.query.error}
+              <br />
+              <Button
+                color="secondary"
+                className="mt-2 border-0 font-sans font-normal hover:bg-gray-300"
+                StartIcon={Icon.FiCopy}
+                onClick={() => {
+                  navigator.clipboard.writeText(router.query.error as string);
+                  showToast("Link copied!", "success");
+                }}>
+                {t("copy")}
+              </Button>
+            </pre>
+          </div>
+        )}
         <Button href={`${WEBSITE_URL}/support`}>{t("contact_support")}</Button>
         <Button color="secondary" href="javascript:history.back()" className="ml-2">
           Go back

apps/web/pages/[user].tsx

@@ -1,6 +1,5 @@
 import classNames from "classnames";
 import { GetServerSidePropsContext } from "next";
-import dynamic from "next/dynamic";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
@@ -12,6 +11,7 @@ import {
   useEmbedStyles,
   useIsEmbed,
 } from "@calcom/embed-core/embed-iframe";
+import { EventTypeDescriptionLazy as EventTypeDescription } from "@calcom/features/eventtypes/components";
 import EmptyPage from "@calcom/features/eventtypes/components/EmptyPage";
 import CustomBranding from "@calcom/lib/CustomBranding";
 import defaultEvents, {
@@ -26,17 +26,15 @@ import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calco
 import prisma from "@calcom/prisma";
 import { baseEventTypeSelect } from "@calcom/prisma/selects";
 import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
-import { BadgeCheckIcon, EventTypeDescriptionLazy as EventTypeDescription, Icon } from "@calcom/ui";
+import { Icon, HeadSeo, AvatarGroup } from "@calcom/ui";
 
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 import { EmbedProps } from "@lib/withEmbedSsr";
 
-import AvatarGroup from "@components/ui/AvatarGroup";
 import { AvatarSSR } from "@components/ui/AvatarSSR";
 
 import { ssrInit } from "@server/lib/ssr";
 
-const HeadSeo = dynamic(() => import("@components/seo/head-seo"));
 export default function User(props: inferSSRProps<typeof getServerSideProps> & EmbedProps) {
   const { users, profile, eventTypes, isDynamicGroup, dynamicNames, dynamicUsernames, isSingleUser } = props;
   const [user] = users; //To be used when we only have a single user, not dynamic group
@@ -58,27 +56,27 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
       {eventTypes.map((type, index) => (
         <li
           key={index}
-          className="dark:bg-darkgray-100 dark:border-darkgray-200 group relative rounded-sm border border-neutral-200 bg-white dark:hover:border-neutral-600">
+          className="dark:bg-darkgray-100 group relative border-b border-neutral-200 bg-white  first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-gray-50 dark:border-neutral-700 dark:hover:border-neutral-600">
           <Icon.FiArrowRight className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
-          <Link href={getUsernameSlugLink({ users: props.users, slug: type.slug })}>
-            <a className="flex justify-between px-6 py-4" data-testid="event-type-link">
-              <div className="flex-shrink">
-                <p className="dark:text-darkgray-700 text-sm font-semibold text-neutral-900">{type.title}</p>
-                <EventTypeDescription className="text-sm" eventType={type} />
-              </div>
-              <div className="mt-1 self-center">
-                <AvatarGroup
-                  border="border-2 border-white"
-                  truncateAfter={4}
-                  className="flex flex-shrink-0"
-                  size={10}
-                  items={props.users.map((user) => ({
-                    alt: user.name || "",
-                    image: user.avatar || "",
-                  }))}
-                />
-              </div>
-            </a>
+          <Link
+            href={getUsernameSlugLink({ users: props.users, slug: type.slug })}
+            className="flex justify-between px-6 py-4"
+            data-testid="event-type-link">
+            <div className="flex-shrink">
+              <p className="dark:text-darkgray-700 text-sm font-semibold text-gray-900">{type.title}</p>
+              <EventTypeDescription className="text-sm" eventType={type} />
+            </div>
+            <div className="mt-1 self-center">
+              <AvatarGroup
+                truncateAfter={4}
+                className="flex flex-shrink-0"
+                size="sm"
+                items={props.users.map((user) => ({
+                  alt: user.name || "",
+                  image: user.avatar || "",
+                }))}
+              />
+            </div>
           </Link>
         </li>
       ))}
@@ -135,13 +133,13 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
           {isSingleUser && ( // When we deal with a single user, not dynamic group
             <div className="mb-8 text-center">
               <AvatarSSR user={user} className="mx-auto mb-4 h-24 w-24" alt={nameOrUsername} />
-              <h1 className="font-cal mb-1 text-3xl text-neutral-900 dark:text-white">
+              <h1 className="font-cal mb-1 text-3xl text-gray-900 dark:text-white">
                 {nameOrUsername}
                 {user.verified && (
-                  <BadgeCheckIcon className="mx-1 -mt-1 inline h-6 w-6 text-blue-500 dark:text-white" />
+                  <Icon.BadgeCheckIcon className="mx-1 -mt-1 inline h-6 w-6 text-blue-500 dark:text-white" />
                 )}
               </h1>
-              <p className="dark:text-darkgray-600 text-s text-neutral-500">{user.bio}</p>
+              <p className="dark:text-darkgray-600 text-s text-gray-500">{user.bio}</p>
             </div>
           )}
           <div
@@ -175,22 +173,20 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
                     href={{
                       pathname: `/${user.username}/${type.slug}`,
                       query,
-                    }}>
-                    <a
-                      onClick={async () => {
-                        sdkActionManager?.fire("eventTypeSelected", {
-                          eventType: type,
-                        });
-                      }}
-                      className="block w-full p-5"
-                      data-testid="event-type-link">
-                      <div className="flex flex-wrap items-center">
-                        <h2 className="dark:text-darkgray-700 pr-2 text-sm font-semibold text-gray-700">
-                          {type.title}
-                        </h2>
-                      </div>
-                      <EventTypeDescription eventType={type} />
-                    </a>
+                    }}
+                    onClick={async () => {
+                      sdkActionManager?.fire("eventTypeSelected", {
+                        eventType: type,
+                      });
+                    }}
+                    className="block w-full p-5"
+                    data-testid="event-type-link">
+                    <div className="flex flex-wrap items-center">
+                      <h2 className="dark:text-darkgray-700 pr-2 text-sm font-semibold text-gray-700">
+                        {type.title}
+                      </h2>
+                    </div>
+                    <EventTypeDescription eventType={type} />
                   </Link>
                 </div>
               ))

apps/web/pages/[user]/[type].tsx

@@ -4,7 +4,7 @@ import { JSONObject } from "superjson/dist/types";
 import { z } from "zod";
 
 import { privacyFilteredLocations, LocationObject } from "@calcom/app-store/locations";
-import { WEBAPP_URL } from "@calcom/lib/constants";
+import { IS_TEAM_BILLING_ENABLED, WEBAPP_URL } from "@calcom/lib/constants";
 import { getDefaultEvent, getGroupName, getUsernameList } from "@calcom/lib/defaultEvents";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { parseRecurringEvent } from "@calcom/lib/isRecurringEvent";
@@ -157,9 +157,10 @@ async function getUserPageProps(context: GetStaticPropsContext) {
   // Check if the user you are logging into has any active teams
   const hasActiveTeam =
     user.teams.filter((m) => {
+      if (!IS_TEAM_BILLING_ENABLED) return true;
       const metadata = teamMetadataSchema.safeParse(m.team.metadata);
-      if (metadata.success && metadata.data?.subscriptionId) return false;
-      return true;
+      if (metadata.success && metadata.data?.subscriptionId) return true;
+      return false;
     }).length > 0;
 
   return {

apps/web/pages/_app.tsx

@@ -19,7 +19,6 @@ import { seoConfig } from "@lib/config/next-seo.config";
 
 import I18nLanguageHandler from "@components/I18nLanguageHandler";
 
-import "../styles/fonts.css";
 import "../styles/globals.css";
 
 function MyApp(props: AppProps) {
@@ -32,7 +31,6 @@ function MyApp(props: AppProps) {
   }
   // Use the layout defined at the page level, if available
   const getLayout = Component.getLayout ?? ((page) => page);
-
   return (
     <AppProviders {...props}>
       <DefaultSeo {...seoConfig.defaultNextSeo} />

apps/web/pages/_document.tsx

@@ -1,6 +1,8 @@
 import Document, { DocumentContext, Head, Html, Main, NextScript, DocumentProps } from "next/document";
 import Script from "next/script";
 
+import { getDirFromLang } from "@calcom/lib/i18n";
+
 type Props = Record<string, unknown> & DocumentProps;
 
 function toRunBeforeReactOnClient() {
@@ -47,11 +49,10 @@ class MyDocument extends Document<Props> {
 
   render() {
     const { locale } = this.props.__NEXT_DATA__;
-    const dir = locale === "ar" || locale === "he" ? "rtl" : "ltr";
+    const dir = getDirFromLang(locale);
     return (
       <Html lang={locale} dir={dir}>
         <Head>
-          <link rel="preload" href="/cal.ttf" as="font" type="font/ttf" crossOrigin="anonymous" />
           <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
           <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
           <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

apps/web/pages/api/auth/[...nextauth].tsx

@@ -14,7 +14,7 @@ import checkLicense from "@calcom/features/ee/common/server/checkLicense";
 import ImpersonationProvider from "@calcom/features/ee/impersonation/lib/ImpersonationProvider";
 import { hostedCal, isSAMLLoginEnabled } from "@calcom/features/ee/sso/lib/saml";
 import { ErrorCode, isPasswordValid, verifyPassword } from "@calcom/lib/auth";
-import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants";
+import { APP_NAME, IS_TEAM_BILLING_ENABLED, WEBAPP_URL } from "@calcom/lib/constants";
 import { symmetricDecrypt } from "@calcom/lib/crypto";
 import { defaultCookies } from "@calcom/lib/default-cookies";
 import rateLimit from "@calcom/lib/rateLimit";
@@ -125,9 +125,10 @@ const providers: Provider[] = [
       // Check if the user you are logging into has any active teams
       const hasActiveTeams =
         user.teams.filter((m) => {
+          if (!IS_TEAM_BILLING_ENABLED) return true;
           const metadata = teamMetadataSchema.safeParse(m.team.metadata);
-          if (metadata.success && metadata.data?.subscriptionId) return false;
-          return true;
+          if (metadata.success && metadata.data?.subscriptionId) return true;
+          return false;
         }).length > 0;
 
       // authentication success- but does it meet the minimum password requirements?
@@ -137,7 +138,7 @@ const providers: Provider[] = [
           username: user.username,
           email: user.email,
           name: user.name,
-          role: "USER",
+          role: "INACTIVE_ADMIN",
           belongsToActiveTeam: hasActiveTeams,
         };
       }

apps/web/pages/api/cron/bookingReminder.ts

@@ -37,6 +37,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         location: true,
         user: {
           select: {
+            id: true,
             email: true,
             name: true,
             username: true,
@@ -100,6 +101,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         startTime: booking.startTime.toISOString(),
         endTime: booking.endTime.toISOString(),
         organizer: {
+          id: user.id,
           email: user.email,
           name,
           timeZone: user.timeZone,

apps/web/pages/api/download-cal-video-recording.ts

@@ -0,0 +1,46 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { z } from "zod";
+
+import { fetcher } from "@calcom/app-store/dailyvideo/lib/VideoApiAdapter";
+import { getSession } from "@calcom/lib/auth";
+import { defaultHandler, defaultResponder } from "@calcom/lib/server";
+
+const getAccessLinkSchema = z.union([
+  z.object({
+    download_link: z.string(),
+    expires: z.number(),
+  }),
+  z.object({}),
+]);
+
+const requestQuery = z.object({
+  recordingId: z.string(),
+});
+
+async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<z.infer<typeof getAccessLinkSchema> | void>
+) {
+  const { recordingId } = requestQuery.parse(req.query);
+  const session = await getSession({ req });
+
+  //   Check if user belong to active team
+  if (!session?.user?.belongsToActiveTeam) {
+    return res.status(403);
+  }
+  try {
+    const response = await fetcher(`/recordings/${recordingId}/access-link`).then(getAccessLinkSchema.parse);
+
+    if ("download_link" in response && response.download_link) {
+      return res.status(200).json(response);
+    }
+
+    return res.status(400);
+  } catch (err) {
+    res.status(500);
+  }
+}
+
+export default defaultHandler({
+  GET: Promise.resolve({ default: defaultResponder(handler) }),
+});

apps/web/pages/api/email.ts

@@ -13,10 +13,6 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     title: "30min between Pro Example and pro@example.com",
     description: null,
     additionalNotes: "asdasdas",
-    customInputs: {
-      "Custom input 01": "sadasdasdsadasd",
-      "Custom input 02": "asdasdasd",
-    },
     startTime: "2022-06-03T09:00:00-06:00",
     endTime: "2022-06-03T09:30:00-06:00",
     organizer: {
@@ -32,27 +28,31 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
         timeZone: "America/Chihuahua",
         language,
       },
-      {
-        email: "pro@example.com",
-        name: "pro@example.com",
-        timeZone: "America/Chihuahua",
-        language,
-      },
-      {
-        email: "pro@example.com",
-        name: "pro@example.com",
-        timeZone: "America/Chihuahua",
-        language,
-      },
     ],
     location: "Zoom video",
     destinationCalendar: null,
     hideCalendarNotes: false,
-    uid: "bwPWLpjYrx4rZf6MCZdKgE",
+    uid: "xxyPr4cg2xx4XoS2KeMEQy",
     metadata: {},
-    cancellationReason: "It got late",
-    paymentInfo: { id: "pi_12312", link: "https://cal.com", reason: "no reason" },
     recurringEvent: null,
+    appsStatus: [
+      {
+        appName: "Outlook Calendar",
+        type: "office365_calendar",
+        success: 1,
+        failures: 0,
+        errors: [],
+        warnings: [],
+      },
+      {
+        appName: "Google Meet",
+        type: "conferencing",
+        success: 0,
+        failures: 1,
+        errors: [],
+        warnings: ["In order to use Google Meet you must set your destination calendar to a Google Calendar"],
+      },
+    ],
   };
 
   req.statusCode = 200;
@@ -60,10 +60,9 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   res.setHeader("Content-Type", "text/html");
   res.setHeader("Cache-Control", "no-cache, no-store, private, must-revalidate");
   res.write(
-    renderEmail("DisabledAppEmail", {
-      appName: "Stripe",
-      appType: ["payment"],
-      t,
+    renderEmail("OrganizerScheduledEmail", {
+      calEvent: evt,
+      attendee: evt.organizer,
     })
   );
   res.end();

apps/web/pages/api/integrations/[...args].ts

@@ -2,11 +2,11 @@ import { NextApiRequest, NextApiResponse } from "next";
 import type { Session } from "next-auth";
 
 import getInstalledAppPath from "@calcom/app-store/_utils/getInstalledAppPath";
+import { getSession } from "@calcom/lib/auth";
 import { deriveAppDictKeyFromType } from "@calcom/lib/deriveAppDictKeyFromType";
 import prisma from "@calcom/prisma";
 import type { AppDeclarativeHandler, AppHandler } from "@calcom/types/AppHandler";
 
-import { getSession } from "@lib/auth";
 import { HttpError } from "@lib/core/http/error";
 
 const defaultIntegrationAddHandler = async ({

apps/web/pages/api/link.ts

@@ -0,0 +1,71 @@
+import { UserPermissionRole } from "@prisma/client";
+import type { NextApiRequest, NextApiResponse } from "next";
+import { z } from "zod";
+
+import { symmetricDecrypt } from "@calcom/lib/crypto";
+import { defaultResponder } from "@calcom/lib/server";
+import prisma from "@calcom/prisma";
+import { TRPCError } from "@calcom/trpc/server";
+import { createContext } from "@calcom/trpc/server/createContext";
+import { viewerRouter } from "@calcom/trpc/server/routers/viewer";
+
+enum DirectAction {
+  ACCEPT = "accept",
+  REJECT = "reject",
+}
+
+const querySchema = z.object({
+  action: z.nativeEnum(DirectAction),
+  token: z.string(),
+  reason: z.string().optional(),
+});
+
+const decryptedSchema = z.object({
+  bookingUid: z.string(),
+  userId: z.number().int(),
+});
+
+async function handler(req: NextApiRequest, res: NextApiResponse<Response>) {
+  const { action, token, reason } = querySchema.parse(req.query);
+  const { bookingUid, userId } = decryptedSchema.parse(
+    JSON.parse(symmetricDecrypt(decodeURIComponent(token), process.env.CALENDSO_ENCRYPTION_KEY || ""))
+  );
+
+  /** We shape the session as required by tRPC router */
+  async function sessionGetter() {
+    return {
+      user: {
+        id: userId,
+        username: "" /* Not used in this context */,
+        role: UserPermissionRole.USER,
+      },
+      hasValidLicense: true,
+      expires: "" /* Not used in this context */,
+    };
+  }
+
+  const booking = await prisma.booking.findUniqueOrThrow({
+    where: { uid: bookingUid },
+  });
+
+  try {
+    /** @see https://trpc.io/docs/server-side-calls */
+    const ctx = await createContext({ req, res }, sessionGetter);
+    const caller = viewerRouter.createCaller(ctx);
+    await caller.bookings.confirm({
+      bookingId: booking.id,
+      recurringEventId: booking.recurringEventId || undefined,
+      confirmed: action === DirectAction.ACCEPT,
+      reason,
+    });
+  } catch (e) {
+    let message = "Error confirming booking";
+    if (e instanceof TRPCError) message = e.message;
+    res.redirect(`/booking/${bookingUid}?error=${encodeURIComponent(message)}`);
+    return;
+  }
+
+  res.redirect(`/booking/${bookingUid}`);
+}
+
+export default defaultResponder(handler);

apps/web/pages/api/social/og/image.tsx

@@ -53,6 +53,8 @@ export default async function handler(req: NextApiRequest) {
     interFontMedium,
   ]);
   const ogConfig = {
+    width: 1200,
+    height: 630,
     fonts: [
       { name: "inter", data: interFontData, weight: 400 },
       { name: "inter", data: interFontMediumData, weight: 500 },
@@ -71,7 +73,7 @@ export default async function handler(req: NextApiRequest) {
         meetingImage: searchParams.get("meetingImage"),
         imageType,
       });
-      return new ImageResponse(
+      const img = new ImageResponse(
         (
           <Meeting
             title={title}
@@ -80,7 +82,9 @@ export default async function handler(req: NextApiRequest) {
           />
         ),
         ogConfig
-      );
+      ) as { body: Buffer };
+
+      return new Response(img.body, { status: 200 });
     }
     case "app": {
       const { name, description, slug } = appSchema.parse({
@@ -89,7 +93,11 @@ export default async function handler(req: NextApiRequest) {
         slug: searchParams.get("slug"),
         imageType,
       });
-      return new ImageResponse(<App name={name} description={description} slug={slug} />, ogConfig);
+      const img = new ImageResponse(<App name={name} description={description} slug={slug} />, ogConfig) as {
+        body: Buffer;
+      };
+
+      return new Response(img.body, { status: 200 });
     }
 
     case "generic": {
@@ -99,7 +107,11 @@ export default async function handler(req: NextApiRequest) {
         imageType,
       });
 
-      return new ImageResponse(<Generic title={title} description={description} />, ogConfig);
+      const img = new ImageResponse(<Generic title={title} description={description} />, ogConfig) as {
+        body: Buffer;
+      };
+
+      return new Response(img.body, { status: 200 });
     }
 
     default:

apps/web/pages/apps/[slug]/index.tsx

@@ -1,34 +1,18 @@
 import fs from "fs";
 import matter from "gray-matter";
+import MarkdownIt from "markdown-it";
 import { GetStaticPaths, GetStaticPropsContext } from "next";
-import { MDXRemote } from "next-mdx-remote";
-import { serialize } from "next-mdx-remote/serialize";
-import Image from "next/image";
-import Link from "next/link";
 import path from "path";
 
 import { getAppWithMetadata } from "@calcom/app-store/_appRegistry";
+import ExisitingGoogleCal from "@calcom/app-store/googlevideo/components/ExistingGoogleCal";
 import prisma from "@calcom/prisma";
 
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
 import App from "@components/apps/App";
 
-const components = {
-  a: ({ href = "", ...otherProps }: JSX.IntrinsicElements["a"]) => (
-    <Link href={href}>
-      <a {...otherProps} />
-    </Link>
-  ),
-  img: ({ src = "", alt = "", placeholder, ...rest }: JSX.IntrinsicElements["img"]) => (
-    <Image src={src} alt={alt} {...rest} />
-  ),
-  // @TODO: In v2 the slider isn't shown anymore. However, to ensure the v1 pages keep
-  // working, this component is still rendered in the MDX content. To skip them in the v2
-  // content we have to render null here. In v2 the gallery is shown by directly
-  // using the `items` property from the MDX's meta data.
-  Slider: () => <></>,
-};
+const md = new MarkdownIt("default", { html: true, breaks: true });
 
 function SingleAppPage({ data, source }: inferSSRProps<typeof getStaticProps>) {
   return (
@@ -50,10 +34,15 @@ function SingleAppPage({ data, source }: inferSSRProps<typeof getStaticProps>) {
       email={data.email}
       licenseRequired={data.licenseRequired}
       isProOnly={data.isProOnly}
-      images={source?.scope?.items as string[] | undefined}
+      images={source.data?.items as string[] | undefined}
       //   tos="https://zoom.us/terms"
       //   privacy="https://zoom.us/privacy"
-      body={<MDXRemote {...source} components={components} />}
+      body={
+        <>
+          {data.slug === "google-meet" && <ExisitingGoogleCal />}
+          <div dangerouslySetInnerHTML={{ __html: md.render(source.content) }} />
+        </>
+      }
     />
   );
 }
@@ -82,7 +71,7 @@ export const getStaticProps = async (ctx: GetStaticPropsContext) => {
   if (!singleApp) return { notFound: true };
 
   const appDirname = app.dirName;
-  const README_PATH = path.join(process.cwd(), "..", "..", `packages/app-store/${appDirname}/README.mdx`);
+  const README_PATH = path.join(process.cwd(), "..", "..", `packages/app-store/${appDirname}/DESCRIPTION.md`);
   const postFilePath = path.join(README_PATH);
   let source = "";
 
@@ -90,16 +79,15 @@ export const getStaticProps = async (ctx: GetStaticPropsContext) => {
     /* If the app doesn't have a README we fallback to the package description */
     source = fs.readFileSync(postFilePath).toString();
   } catch (error) {
-    console.log(`No README.mdx provided for: ${appDirname}`);
+    console.log(`No DESCRIPTION.md provided for: ${appDirname}`);
     source = singleApp.description;
   }
 
   const { content, data } = matter(source);
-  const mdxSource = await serialize(content, { scope: data });
 
   return {
     props: {
-      source: mdxSource,
+      source: { content, data },
       data: singleApp,
     },
   };

apps/web/pages/apps/categories/[category].tsx

@@ -4,9 +4,10 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 
 import { getAppRegistry } from "@calcom/app-store/_appRegistry";
+import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import prisma from "@calcom/prisma";
-import { AppCard, Shell, SkeletonText } from "@calcom/ui";
+import { AppCard, SkeletonText } from "@calcom/ui";
 
 export default function Apps({ apps }: InferGetStaticPropsType<typeof getStaticProps>) {
   const { t, isLocaleReady } = useLocale();
@@ -20,10 +21,10 @@ export default function Apps({ apps }: InferGetStaticPropsType<typeof getStaticP
         backPath="/apps"
         heading={
           <>
-            <Link href="/apps">
-              <a className="inline-flex items-center justify-start gap-1 rounded-sm py-2 text-gray-900">
-                {isLocaleReady ? t("app_store") : <SkeletonText className="h-4 w-24" />}{" "}
-              </a>
+            <Link
+              href="/apps"
+              className="inline-flex items-center justify-start gap-1 rounded-sm py-2 text-gray-900">
+              {isLocaleReady ? t("app_store") : <SkeletonText className="h-4 w-24" />}{" "}
             </Link>
             {category && (
               <span className="gap-1 text-gray-600">
@@ -47,13 +48,7 @@ export default function Apps({ apps }: InferGetStaticPropsType<typeof getStaticP
 }
 
 export const getStaticPaths = async () => {
-  const appStore = await getAppRegistry();
-  const paths = appStore.reduce((categories, app) => {
-    if (!categories.includes(app.category)) {
-      categories.push(app.category);
-    }
-    return categories;
-  }, [] as string[]);
+  const paths = Object.keys(AppCategories);
 
   return {
     paths: paths.map((category) => ({ params: { category } })),

apps/web/pages/apps/categories/index.tsx

@@ -2,8 +2,9 @@ import { InferGetStaticPropsType } from "next";
 import Link from "next/link";
 
 import { getAppRegistry } from "@calcom/app-store/_appRegistry";
+import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon, Shell, SkeletonText } from "@calcom/ui";
+import { Icon, SkeletonText } from "@calcom/ui";
 
 export default function Apps({ categories }: InferGetStaticPropsType<typeof getStaticProps>) {
   const { t, isLocaleReady } = useLocale();
@@ -11,28 +12,28 @@ export default function Apps({ categories }: InferGetStaticPropsType<typeof getS
   return (
     <Shell isPublic large>
       <div className="text-md flex items-center gap-1 px-4 pb-3 pt-3 font-normal md:px-8 lg:px-0 lg:pt-0">
-        <Link href="/apps">
-          <a className="inline-flex items-center justify-start gap-1 rounded-sm py-2 text-gray-900">
-            <Icon.FiArrowLeft className="h-4 w-4" />
-            {isLocaleReady ? t("app_store") : <SkeletonText className="h-6 w-24" />}{" "}
-          </a>
+        <Link
+          href="/apps"
+          className="inline-flex items-center justify-start gap-1 rounded-sm py-2 text-gray-900">
+          <Icon.FiArrowLeft className="h-4 w-4" />
+          {isLocaleReady ? t("app_store") : <SkeletonText className="h-6 w-24" />}{" "}
         </Link>
       </div>
       <div className="mb-16">
         <div className="grid h-auto w-full grid-cols-5 gap-3">
           {categories.map((category) => (
-            <Link key={category.name} href={"/apps/categories/" + category.name}>
-              <a
-                data-testid={`app-store-category-${category.name}`}
-                className="relative flex rounded-sm bg-gray-100 px-6 py-4 sm:block">
-                <div className="self-center">
-                  <h3 className="font-medium capitalize">{category.name}</h3>
-                  <p className="text-sm text-gray-500">
-                    {t("number_apps", { count: category.count })}{" "}
-                    <Icon.FiArrowRight className="inline-block h-4 w-4" />
-                  </p>
-                </div>
-              </a>
+            <Link
+              key={category.name}
+              href={"/apps/categories/" + category.name}
+              data-testid={`app-store-category-${category.name}`}
+              className="relative flex rounded-sm bg-gray-100 px-6 py-4 sm:block">
+              <div className="self-center">
+                <h3 className="font-medium capitalize">{category.name}</h3>
+                <p className="text-sm text-gray-500">
+                  {t("number_apps", { count: category.count })}{" "}
+                  <Icon.FiArrowRight className="inline-block h-4 w-4" />
+                </p>
+              </div>
             </Link>
           ))}
         </div>
@@ -44,7 +45,9 @@ export default function Apps({ categories }: InferGetStaticPropsType<typeof getS
 export const getStaticProps = async () => {
   const appStore = await getAppRegistry();
   const categories = appStore.reduce((c, app) => {
-    c[app.category] = c[app.category] ? c[app.category] + 1 : 1;
+    for (const category of app.categories) {
+      c[category] = c[category] ? c[category] + 1 : 1;
+    }
     return c;
   }, {} as Record<string, number>);
 

apps/web/pages/apps/index.tsx

@@ -1,4 +1,4 @@
-import { GetServerSideProps, InferGetServerSidePropsType } from "next";
+import { GetServerSidePropsContext } from "next";
 import { ChangeEventHandler, useState } from "react";
 
 import { getAppRegistry, getAppRegistryWithCredentials } from "@calcom/app-store/_appRegistry";
@@ -6,7 +6,10 @@ import { classNames } from "@calcom/lib";
 import { getSession } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { AppCategories } from "@calcom/prisma/client";
-import { AllApps, AppsLayout, AppStoreCategories, Icon, TextField, TrendingAppsSlider } from "@calcom/ui";
+import { inferSSRProps } from "@calcom/types/inferSSRProps";
+import { AllApps, AppStoreCategories, Icon, TextField, TrendingAppsSlider } from "@calcom/ui";
+
+import AppsLayout from "@components/apps/layouts/AppsLayout";
 
 import { ssgInit } from "@server/lib/ssg";
 
@@ -30,10 +33,7 @@ function AppsSearch({
   );
 }
 
-export default function Apps({
-  categories,
-  appStore,
-}: InferGetServerSidePropsType<typeof getServerSideProps>) {
+export default function Apps({ categories, appStore }: inferSSRProps<typeof getServerSideProps>) {
   const { t } = useLocale();
   const [searchText, setSearchText] = useState<string | undefined>(undefined);
 
@@ -52,12 +52,16 @@ export default function Apps({
           <TrendingAppsSlider items={appStore} />
         </>
       )}
-      <AllApps apps={appStore} searchText={searchText} />
+      <AllApps
+        apps={appStore}
+        searchText={searchText}
+        categories={categories.map((category) => category.name)}
+      />
     </AppsLayout>
   );
 }
 
-export const getServerSideProps: GetServerSideProps = async (context) => {
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
   const ssg = await ssgInit(context);
 
   const session = await getSession(context);

apps/web/pages/apps/installed/[category].tsx

@@ -14,16 +14,16 @@ import {
   Button,
   EmptyScreen,
   Icon,
-  InstalledAppsLayout,
   List,
+  AppSkeletonLoader as SkeletonLoader,
   ShellSubHeading,
-  SkeletonLoader,
 } from "@calcom/ui";
 
 import { QueryCell } from "@lib/QueryCell";
 
 import { CalendarListContainer } from "@components/apps/CalendarListContainer";
 import IntegrationListItem from "@components/apps/IntegrationListItem";
+import InstalledAppsLayout from "@components/apps/layouts/InstalledAppsLayout";
 
 function ConnectOrDisconnectIntegrationButton(props: {
   credentialIds: number[];
@@ -32,7 +32,7 @@ function ConnectOrDisconnectIntegrationButton(props: {
   installed?: boolean;
   invalidCredentialIds?: number[];
 }) {
-  const { type, credentialIds, isGlobal, installed, invalidCredentialIds } = props;
+  const { type, credentialIds, isGlobal, installed } = props;
   const { t } = useLocale();
   const [credentialId] = credentialIds;
 
@@ -183,6 +183,7 @@ const IntegrationsContainer = ({ variant, exclude }: IntegrationsContainerProps)
                 buttonRaw={
                   <Button
                     color="secondary"
+                    data-testid={`connect-${variant || "other"}-apps`}
                     href={variant ? `/apps/categories/${variant}` : "/apps/categories/other"}>
                     {t(`connect_${variant || "other"}_apps`)}
                   </Button>