v2.1.2

Added generic image variant for og images and make meta description longer. (#5285 )
* Added generic image variant for og images. * Made og and meta descriptions longer, removed difference between longer and shorter descriptions now we only have one variant. Co-authored-by: Hariom Balhara <hariombalhara@gmail.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com>
2022-11-01 11:31:02 +00:00 · 2022-11-01 08:16:08 +00:00 · 2022-11-01 06:30:08 +00:00 · 2022-10-31 23:07:51 +00:00 · 2022-10-31 22:06:03 +00:00 · 2022-10-31 18:53:59 +00:00
624 changed files with 15779 additions and 16795 deletions
@@ -97,7 +97,7 @@ LARK_OPEN_VERIFICATION_TOKEN=""

 #   - WEB3
 # Used for the Web3 plugin
-# @see https://github.com/calcom/cal.com/blob/main/packages/app-store/web3/README.md
+# @see https://github.com/calcom/cal.com/blob/main/packages/app-store/rainbow/README.md
 ALCHEMY_API_KEY=""
 INFURA_API_KEY=""
 # *********************************************************************************************************
@@ -1,16 +0,0 @@
-name: Add PRs to project
-
-on:
-  pull_request:
-    types:
-      - opened
-
-jobs:
-  add-PR-to-project:
-    name: Add PR to project
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/add-to-project@v0.1.0
-        with:
-          project-url: https://github.com/orgs/calcom/projects/1
-          github-token: ${{ secrets.GH_ACCESS_TOKEN }}
@@ -17,6 +17,6 @@ jobs:
    steps:
      - uses: actions/add-to-project@v0.1.0
        with:
-          project-url: https://github.com/orgs/calcom/projects/1
+          project-url: https://github.com/orgs/calcom/projects/9
          github-token: ${{ secrets.GH_ACCESS_TOKEN }}
-          labeled: 🐛 bug, 🎨 needs design, 🙋🏻‍♂️help wanted, 🚨 urgent
+          labeled:  🙋🏻‍♂️help wanted
@@ -5,7 +5,7 @@ name: 'Chromatic'

 # Event for the workflow
 on:
-  pull_request_target: # So we can test on forks
+  pull_request: # So we can test on forks
    branches:
      - main
    paths:
@@ -1,6 +1,6 @@
 name: Check types
 on:
-  pull_request_target:
+  pull_request:
    branches:
      - main
    paths:
@@ -2,7 +2,7 @@ name: E2E App-Store Apps
 on:
  push:
    branches: [fixes/e2e-consolidation] # TODO: Remove this after merged in main
-  pull_request_target: # So we can test on forks
+  pull_request: # So we can test on forks
    branches:
      - main
    paths-ignore:
@@ -1,6 +1,6 @@
 name: E2E Embed tests and booking flow(for non-embed as well)
 on:
-  pull_request_target: # So we can test on forks
+  pull_request: # So we can test on forks
    branches:
      - main
    # Embed e2e - tests verify booking flow which is applicable to non-embed case also. So, don't ignore apps/web changes.
@@ -2,7 +2,7 @@ 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
+  pull_request: # So we can test on forks
    branches:
      - main
    paths:
@@ -25,6 +25,7 @@ jobs:
      GOOGLE_LOGIN_ENABLED: true
      # CRON_API_KEY: xxx
      CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
+      DAILY_API_KEY: ${{ secrets.CI_DAILY_API_KEY }}
      NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
      NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE }}
      NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE }}
@@ -1,6 +1,6 @@
 name: "Pull Request Labeler"
 on:
-  - pull_request_target
+  - pull_request
 concurrency:
  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
  cancel-in-progress: true
@@ -1,6 +1,6 @@
 name: Lint
 on:
-  pull_request_target:
+  pull_request:
    branches:
      - main
    paths:
@@ -2,7 +2,7 @@ name: Unit tests
 on:
  push:
    branches: [fixes/e2e-consolidation] # TODO: Remove this after merged in main
-  pull_request_target: # So we can test on forks
+  pull_request: # So we can test on forks
    branches:
      - main
    paths:
@@ -6,5 +6,5 @@
  },
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "spellright.language": ["en"],
-  "spellright.documentTypes": ["markdown"]
+  "spellright.documentTypes": ["markdown", "typescript"]
 }
@@ -4,23 +4,6 @@ Contributions are what make the open source community such an amazing place to l

 - Before jumping into a PR be sure to search [existing PRs](https://github.com/calcom/cal.com/pulls) or [issues](https://github.com/calcom/cal.com/issues) for an open or closed item that relates to your submission.

-## Areas of expertise
-
-### Legend
-
-✅ = has knowledge
-
-🥇 = is their main priority
-
-⚠️ = is the only one with knowledge
-
-👀 = has no knowledge but wants to be onboarded
-
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="https://dynamic-svgs.vercel.app/image.svg?dark">
-  <img alt="Areas of expertise table" src="https://dynamic-svgs.vercel.app/image.svg">
-</picture>
-
 ## Developing

 The development branch is `main`. This is the branch that all pull
@@ -37,7 +37,7 @@
   <a href="https://hub.docker.com/r/calendso/calendso"><img src="https://img.shields.io/docker/pulls/calendso/calendso"></a>
   <a href="https://twitter.com/calcom"><img src="https://img.shields.io/twitter/follow/calcom?style=flat"></a>
   <a href="https://twitch.tv/calcomtv"><img src="https://img.shields.io/twitch/status/calcomtv?style=flat"></a>
-   <a href="https://github.com/orgs/calcom/projects/1/views/25"><img src="https://img.shields.io/badge/Help%20Wanted-Contribute-blue"></a>
+   <a href="https://github.com/orgs/calcom/projects/9"><img src="https://img.shields.io/badge/Help%20Wanted-Contribute-blue"></a>
   <a href="https://cal.com/figma"><img src="https://img.shields.io/badge/Figma-Design%20System-blueviolet"></a>
   <a href="https://calendso.slack.com/archives/C02BY67GMMW"><img src="https://img.shields.io/badge/translations-contribute-brightgreen" /></a>
   <a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct/ "><img src="https://img.shields.io/badge/Contributor%20Covenant-1.4-purple" /></a>
@@ -324,7 +324,7 @@ We have a list of [help wanted](https://github.com/orgs/calcom/projects/1/views/
 6. In the third page (Test Users), add the Google account(s) you'll using. Make sure the details are correct on the last page of the wizard and your consent screen will be configured.
 7. Now select [Credentials](https://console.cloud.google.com/apis/credentials) from the side pane and then select Create Credentials. Select the OAuth Client ID option.
 8. Select Web Application as the Application Type.
-9. Under Authorized redirect URI's, select Add URI and then add the URI `<Cal.com URL>/api/integrations/googlecalendar/callback` replacing Cal.com URL with the URI at which your application runs.
+9. Under Authorized redirect URI's, select Add URI and then add the URI `<Cal.com URL>/api/integrations/googlecalendar/callback` and `<Cal.com URL>/api/auth/callback/google` replacing Cal.com URL with the URI at which your application runs.
 10. The key will be created and you will be redirected back to the Credentials page. Select the newly generated client ID under OAuth 2.0 Client IDs.
 11. Select Download JSON. Copy the contents of this file and paste the entire JSON string in the .env file as the value for GOOGLE_API_CREDENTIALS key.

@@ -0,0 +1,20 @@
+import { ComponentMeta } from "@storybook/react";
+
+import { ToggleGroup } from "@calcom/ui/v2/core/form/ToggleGroup";
+
+export default {
+  title: "Toggle Group",
+  component: ToggleGroup,
+} as ComponentMeta<typeof ToggleGroup>;
+
+export const Default = () => {
+  return (
+    <ToggleGroup
+      defaultValue="12"
+      options={[
+        { value: "12", label: "12h" },
+        { value: "24", label: "24h" },
+      ]}
+    />
+  );
+};
@@ -6,13 +6,13 @@ import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
 import { InstallAppButton } from "@calcom/app-store/components";
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import showToast from "@calcom/lib/notification";
 import { trpc } from "@calcom/trpc/react";
 import { App as AppType } from "@calcom/types/App";
 import { Button, SkeletonButton } from "@calcom/ui";
 import { Icon } from "@calcom/ui/Icon";
 import Shell from "@calcom/ui/Shell";
 import Badge from "@calcom/ui/v2/core/Badge";
+import showToast from "@calcom/ui/v2/core/notifications";

 import DisconnectIntegration from "@components/integrations/DisconnectIntegration";

@@ -11,14 +11,14 @@ export type GateState = {
 type GateProps = {
  children: React.ReactNode;
  gates: Gate[];
-  metadata: JSONObject;
+  appData: JSONObject;
  dispatch: Dispatch<Partial<GateState>>;
 };

 const RainbowGate = dynamic(() => import("@calcom/app-store/rainbow/components/RainbowKit"));

 // To add a new Gate just add the gate logic to the switch statement
-const Gates: React.FC<GateProps> = ({ children, gates, metadata, dispatch }) => {
+const Gates: React.FC<GateProps> = ({ children, gates, appData, dispatch }) => {
  const [rainbowToken, setRainbowToken] = useState<string>();

  useEffect(() => {
@@ -31,12 +31,12 @@ const Gates: React.FC<GateProps> = ({ children, gates, metadata, dispatch }) =>
  for (const gate of gates) {
    switch (gate) {
      case "rainbow":
-        if (metadata.blockchainId && metadata.smartContractAddress && !rainbowToken) {
+        if (appData.blockchainId && appData.smartContractAddress && !rainbowToken) {
          gateWrappers = (
            <RainbowGate
              setToken={setRainbowToken}
-              chainId={metadata.blockchainId as number}
-              tokenAddress={metadata.smartContractAddress as string}>
+              chainId={appData.blockchainId as number}
+              tokenAddress={appData.smartContractAddress as string}>
              {gateWrappers}
            </RainbowGate>
          );
@@ -1,5 +1,4 @@
 import React from "react";
-import Select from "react-select";
 import { OptionProps } from "react-select";

 import { InstallAppButton } from "@calcom/app-store/components";
@@ -8,6 +7,7 @@ import { trpc } from "@calcom/trpc/react";
 import type { App } from "@calcom/types/App";
 import { Button } from "@calcom/ui";
 import { Icon } from "@calcom/ui/Icon";
+import { Select } from "@calcom/ui/v2";

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

@@ -23,11 +23,11 @@ const ImageOption = (optionProps: OptionProps<{ [key: string]: string; type: App
      type={data.type}
      render={(installProps) => {
        return (
-          <Button {...installProps} className="w-full" color="minimal">
+          <Button {...installProps} className="flex w-full align-top" color="minimal">
            {data.image && (
              <img className="float-left mr-3 inline h-5 w-5" src={data.image} alt={data.label} />
            )}
-            <p>{data.label}</p>
+            <p className="text-left">{`${t("add")} ${data.label}`}</p>
          </Button>
        );
      }}
@@ -35,7 +35,7 @@ const ImageOption = (optionProps: OptionProps<{ [key: string]: string; type: App
  ) : (
    <Button className="w-full" color="minimal" href="/apps/categories/calendar">
      <Icon.FiPlus className="text-color mr-3 ml-1 h-4 w-4" />
-      <p>{t("add_new_calendar")}...</p>
+      <p>{t("install_new_calendar_app")}</p>
    </Button>
  );
 };
@@ -63,27 +63,45 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
        return (
          <Select
            name="additionalCalendar"
-            placeholder={t("install_another")}
+            placeholder={
+              <div className="flex justify-start text-black">
+                <Icon.FiPlus className="-ml-1 h-4 w-4 ltr:mr-2 rtl:ml-2 rtl:-mr-1" />
+                <p>{t("add")}</p>
+              </div>
+            }
+            className="min-w-44"
            options={options}
-            styles={{
-              placeholder: (defaultStyles) => {
-                return {
-                  ...defaultStyles,
-                  color: "#3E3E3E",
-                  marginLeft: "3px",
-                };
-              },
-              control: (defaultStyles) => {
-                return {
-                  ...defaultStyles,
-                  borderRadius: "6px",
-                };
-              },
-            }}
            isSearchable={false}
-            className="min-w-52 block w-full flex-1 rounded-none rounded-r-sm border-gray-300 text-sm font-medium text-gray-700"
            isLoading={isLoading}
            components={{ Option: ImageOption }}
+            styles={{
+              menu: (defaultStyles) => ({
+                ...defaultStyles,
+                "@media only screen and (max-width: 640px)": {
+                  left: "0",
+                },
+                width: "max-content",
+                right: "0",
+              }),
+              control: (defaultStyles) => ({
+                ...defaultStyles,
+                padding: "0",
+                border: "0",
+                borderRadius: "inherit",
+              }),
+              dropdownIndicator: (defaultStyles) => ({
+                ...defaultStyles,
+                display: "none",
+              }),
+              valueContainer: (defaultStyles) => ({
+                ...defaultStyles,
+                padding: "0",
+              }),
+              placeholder: (defaultStyles) => ({
+                ...defaultStyles,
+                margin: "0",
+              }),
+            }}
          />
        );
      }}
@@ -1,19 +0,0 @@
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import type { App } from "@calcom/types/App";
-
-import AppCard from "./AppCard";
-
-export default function AllApps({ apps }: { apps: App[] }) {
-  const { t } = useLocale();
-
-  return (
-    <div className="mb-16">
-      <h2 className="mb-2 text-lg font-semibold text-gray-900">{t("all_apps")}</h2>
-      <div className="grid-col-1 grid grid-cols-1 gap-3 md:grid-cols-3">
-        {apps.map((app) => (
-          <AppCard key={app.name} app={app} />
-        ))}
-      </div>
-    </div>
-  );
-}
@@ -14,6 +14,8 @@ import { showToast, SkeletonText } from "@calcom/ui/v2";
 import { Button, SkeletonButton, Shell } from "@calcom/ui/v2";
 import DisconnectIntegration from "@calcom/ui/v2/modules/integrations/DisconnectIntegration";

+import HeadSeo from "@components/seo/head-seo";
+
 const Component = ({
  name,
  type,
@@ -66,7 +68,7 @@ const Component = ({
  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">
      {hasImages && (
-        <div className="flex-2 mb-4 -ml-4 -mr-4 flex min-h-[450px] w-auto snap-x snap-mandatory flex-row overflow-auto whitespace-nowrap bg-gray-100  p-4 md:mb-8 md:-ml-8 md:-mr-8 md:p-8 lg:mx-0 lg:mb-0 lg:max-w-2xl lg:flex-col lg:rounded-md">
+        <div className="align-center mb-4 -ml-4 -mr-4 flex min-h-[450px] w-auto basis-3/5 snap-x snap-mandatory flex-row overflow-auto whitespace-nowrap bg-gray-100 p-4  md:mb-8 md:-ml-8 md:-mr-8 md:p-8 lg:mx-0 lg:mb-0 lg:max-w-2xl lg:flex-col lg:justify-center lg:rounded-md">
          {images ? (
            images.map((img) => (
              <img
@@ -83,7 +85,7 @@ const Component = ({
      )}
      <div
        className={classNames(
-          "sticky top-0 -mt-4 max-w-xl flex-1 pb-12 text-sm lg:pb-0",
+          "sticky top-0 -mt-4 max-w-xl basis-2/5 pb-12 text-sm lg:pb-0",
          hasImages && "lg:ml-8"
        )}>
        <div className="mb-8 flex pt-4">
@@ -276,6 +278,7 @@ const Component = ({

 export default function App(props: {
  name: string;
+  description: AppType["description"];
  type: AppType["type"];
  isGlobal?: AppType["isGlobal"];
  logo: string;
@@ -300,7 +303,16 @@ export default function App(props: {
  const { t } = useLocale();

  return (
-    <Shell large isPublic heading={t("app_store")} backPath="/apps">
+    <Shell large isPublic heading={t("app_store")} backPath="/apps" withoutSeo>
+      <HeadSeo
+        title={props.name}
+        description={props.description}
+        app={{ slug: props.logo, name: props.name, description: props.description }}
+        nextSeoProps={{
+          nofollow: true,
+          noindex: true,
+        }}
+      />
      {props.licenseRequired ? (
        <LicenseRequired>
          <Component {...props} />
@@ -1,44 +0,0 @@
-import Link from "next/link";
-
-import { trpc } from "@calcom/trpc/react";
-import { App } from "@calcom/types/App";
-import Badge from "@calcom/ui/Badge";
-import Button from "@calcom/ui/Button";
-
-interface AppCardProps {
-  app: App;
-}
-
-export default function AppCard(props: AppCardProps) {
-  const { data: user } = trpc.useQuery(["viewer.me"]);
-  return (
-    <Link href={"/apps/" + props.app.slug}>
-      <a
-        className="block h-full rounded-sm border border-gray-300 p-5 hover:bg-neutral-50"
-        data-testid={`app-store-app-card-${props.app.slug}`}>
-        <div className="flex">
-          {
-            // eslint-disable-next-line @next/next/no-img-element
-            <img src={props.app.logo} alt={props.app.name + " Logo"} className="mb-4 h-12 w-12 rounded-sm" />
-          }
-          <Button
-            color="secondary"
-            className="ml-auto flex self-start"
-            onClick={() => {
-              console.log("The magic is supposed to happen here");
-            }}>
-            Add
-          </Button>
-        </div>
-        <div className="flex items-center">
-          <h3 className="font-medium">{props.app.name}</h3>
-        </div>
-        {/* TODO: add reviews <div className="flex text-sm text-gray-800">
-          <span>{props.rating} stars</span> <StarIcon className="ml-1 mt-0.5 h-4 w-4 text-yellow-600" />
-          <span className="pl-1 text-gray-500">{props.reviews} reviews</span>
-        </div> */}
-        <p className="mt-2 truncate text-sm text-gray-500">{props.app.description}</p>
-      </a>
-    </Link>
-  );
-}
@@ -3,24 +3,23 @@ import Link from "next/link";
 import { Fragment } from "react";

 import { InstallAppButton } from "@calcom/app-store/components";
+import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import showToast from "@calcom/lib/notification";
 import { trpc } from "@calcom/trpc/react";
-import Button from "@calcom/ui/Button";
 import { Icon } from "@calcom/ui/Icon";
 import SkeletonLoader from "@calcom/ui/apps/SkeletonLoader";
-import { Alert, EmptyScreen } from "@calcom/ui/v2";
+import { Alert, Button, EmptyScreen } from "@calcom/ui/v2";
 import { List } from "@calcom/ui/v2/core/List";
 import { ShellSubHeading } from "@calcom/ui/v2/core/Shell";
 import Switch from "@calcom/ui/v2/core/Switch";
+import showToast from "@calcom/ui/v2/core/notifications";
 import DisconnectIntegration from "@calcom/ui/v2/modules/integrations/DisconnectIntegration";

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

+import AdditionalCalendarSelector from "@components/apps/AdditionalCalendarSelector";
+import IntegrationListItem from "@components/apps/IntegrationListItem";
 import SubHeadingTitleWithConnections from "@components/integrations/SubHeadingTitleWithConnections";
-import AdditionalCalendarSelector from "@components/v2/apps/AdditionalCalendarSelector";
-import DestinationCalendarSelector from "@components/v2/apps/DestinationCalendarSelector";
-import IntegrationListItem from "@components/v2/apps/IntegrationListItem";

 type Props = {
  onChanged: () => unknown | Promise<unknown>;
@@ -141,6 +140,7 @@ function CalendarList(props: Props) {
  );
 }

+// todo: @hariom extract this into packages/apps-store as "GeneralAppSettings"
 function ConnectedCalendarsList(props: Props) {
  const { t } = useLocale();
  const query = trpc.useQuery(["viewer.connectedCalendars"], { suspense: true });
@@ -163,6 +163,7 @@ function ConnectedCalendarsList(props: Props) {
                    title={item.integration.title}
                    logo={item.integration.logo}
                    description={item.primary?.externalId || "No external Id"}
+                    separate={true}
                    actions={
                      <div className="flex w-32 justify-end">
                        <DisconnectIntegration
@@ -173,23 +174,27 @@ function ConnectedCalendarsList(props: Props) {
                        />
                      </div>
                    }>
-                    {!fromOnboarding && (
-                      <>
-                        <p className="px-4 pt-4 text-sm text-neutral-500">{t("toggle_calendars_conflict")}</p>
-                        <ul className="space-y-2 p-4">
-                          {item.calendars.map((cal) => (
-                            <CalendarSwitch
-                              key={cal.externalId}
-                              externalId={cal.externalId}
-                              title={cal.name || "Nameless calendar"}
-                              type={item.integration.type}
-                              defaultSelected={cal.isSelected}
-                              destination={cal.externalId === props.destinationCalendarId}
-                            />
-                          ))}
-                        </ul>
-                      </>
-                    )}
+                    <div className="border-t border-gray-200">
+                      {!fromOnboarding && (
+                        <>
+                          <p className="px-4 pt-4 text-sm text-neutral-500">
+                            {t("toggle_calendars_conflict")}
+                          </p>
+                          <ul className="space-y-2 p-4">
+                            {item.calendars.map((cal) => (
+                              <CalendarSwitch
+                                key={cal.externalId}
+                                externalId={cal.externalId}
+                                title={cal.name || "Nameless calendar"}
+                                type={item.integration.type}
+                                defaultSelected={cal.isSelected}
+                                destination={cal.externalId === props.destinationCalendarId}
+                              />
+                            ))}
+                          </ul>
+                        </>
+                      )}
+                    </div>
                  </IntegrationListItem>
                ) : (
                  <Alert
@@ -258,11 +263,11 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
                    <ShellSubHeading
                      title={t("calendar")}
                      subtitle={t("installed_app_calendar_description")}
-                      className="mb-0 flex flex-wrap items-center gap-4 md:mb-3 md:gap-0"
+                      className="mb-0 flex flex-wrap items-center gap-4 sm:flex-nowrap md:mb-3 md:gap-0"
                      actions={
                        <div className="flex flex-col xl:flex-row xl:space-x-5">
                          {!!data.connectedCalendars.length && (
-                            <div className=" flex items-center">
+                            <div className="flex items-center">
                              <AdditionalCalendarSelector isLoading={mutation.isLoading} />
                            </div>
                          )}
@@ -282,7 +287,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
                          <h1 className="text-sm font-semibold">{t("create_events_on")}</h1>
                          <p className="text-sm font-normal">{t("set_calendar")}</p>
                        </div>
-                        <div className="flex justify-end md:w-6/12">
+                        <div className="justify-end md:w-6/12">
                          <DestinationCalendarSelector
                            onChange={mutation.mutate}
                            hidePlaceholder
@@ -1,43 +0,0 @@
-import Image from "next/image";
-import Link from "next/link";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-
-export default function AppStoreCategories({
-  categories,
-}: {
-  categories: {
-    name: string;
-    count: number;
-  }[];
-}) {
-  const { t } = useLocale();
-  return (
-    <div className="mb-16">
-      <h2 className="mb-2 text-lg font-semibold text-gray-900">{t("popular_categories")}</h2>
-      <div className="grid-col-1 grid w-full gap-3 overflow-scroll sm:grid-flow-col">
-        {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="min-w-24 -ml-5 text-center sm:ml-0">
-                <Image
-                  alt={category.name}
-                  width="352"
-                  height="252"
-                  layout="responsive"
-                  src={"/app-store/" + category.name + ".svg"}
-                />
-              </div>
-              <div className="self-center">
-                <h3 className="font-medium capitalize">{category.name}</h3>
-                <p className="text-sm text-gray-500">{category.count} apps</p>
-              </div>
-            </a>
-          </Link>
-        ))}
-      </div>
-    </div>
-  );
-}
@@ -2,6 +2,8 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { ReactNode, useEffect, useState } from "react";

+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Icon } from "@calcom/ui";
 import { ListItem, ListItemText, ListItemTitle } from "@calcom/ui/v2/core/List";

 import classNames from "@lib/classNames";
@@ -16,7 +18,10 @@ function IntegrationListItem(props: {
  children?: ReactNode;
  logo: string;
  destination?: boolean;
+  separate?: boolean;
+  invalidCredential?: boolean;
 }): JSX.Element {
+  const { t } = useLocale();
  const router = useRouter();
  const { hl } = router.query;
  const [highlight, setHighlight] = useState(hl === props.slug);
@@ -32,7 +37,8 @@ function IntegrationListItem(props: {
    <ListItem
      expanded={!!props.children}
      className={classNames(
-        "my-0 flex-col border transition-colors duration-500 first:rounded-t-md last:rounded-b-md",
+        props.separate ? "rounded-md" : "first:rounded-t-md last:rounded-b-md",
+        "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")}>
@@ -42,10 +48,19 @@ function IntegrationListItem(props: {
            <Link href={"/apps/" + props.slug}>{props.name || title}</Link>
          </ListItemTitle>
          <ListItemText component="p">{props.description}</ListItemText>
+          {/* Alert error that key stopped working. */}
+          {props.invalidCredential && (
+            <div className="flex items-center space-x-2">
+              <Icon.FiAlertCircle className="w-8 text-red-500 sm:w-4" />
+              <ListItemText component="p" className="whitespace-pre-wrap text-red-500">
+                {t("invalid_credential")}
+              </ListItemText>
+            </div>
+          )}
        </div>
        <div>{props.actions}</div>
      </div>
-      {props.children && <div className="w-full border-t border-gray-200">{props.children}</div>}
+      {props.children && <div className="w-full">{props.children}</div>}
    </ListItem>
  );
 }
@@ -0,0 +1,63 @@
+import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
+import { InstallAppButton } from "@calcom/app-store/components";
+import { classNames } from "@calcom/lib";
+import useApp from "@calcom/lib/hooks/useApp";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import { Icon } from "@calcom/ui/Icon";
+import { showToast } from "@calcom/ui/v2";
+import Button from "@calcom/ui/v2/core/Button";
+
+/**
+ * Use this component to allow installing an app from anywhere on the app.
+ * Use of this component requires you to remove custom InstallAppButtonComponent so that it can manage the redirection itself
+ */
+export default function OmniInstallAppButton({ appId, className }: { appId: string; className: string }) {
+  const { t } = useLocale();
+  const { data: app } = useApp(appId);
+  const utils = trpc.useContext();
+
+  const mutation = useAddAppMutation(null, {
+    onSuccess: () => {
+      //TODO: viewer.appById might be replaced with viewer.apps so that a single query needs to be invalidated.
+      utils.invalidateQueries(["viewer.appById", { appId }]);
+      utils.invalidateQueries(["viewer.apps", { extendsFeature: "EventType" }]);
+      showToast(t("app_successfully_installed"), "success");
+    },
+    onError: (error) => {
+      if (error instanceof Error) showToast(error.message || t("app_could_not_be_installed"), "error");
+    },
+  });
+
+  if (!app) {
+    return null;
+  }
+
+  return (
+    <InstallAppButton
+      type={app.type}
+      isProOnly={app.isProOnly}
+      wrapperClassName={classNames("[@media(max-width:260px)]:w-full", className)}
+      render={({ useDefaultComponent, ...props }) => {
+        if (useDefaultComponent) {
+          props = {
+            onClick: () => {
+              mutation.mutate({ type: app.type, variant: app.variant, slug: app.slug, isOmniInstall: true });
+            },
+          };
+        }
+
+        return (
+          <Button
+            loading={mutation.isLoading}
+            color="secondary"
+            className="[@media(max-width:260px)]:w-full [@media(max-width:260px)]:justify-center"
+            StartIcon={Icon.FiPlus}
+            {...props}>
+            {t("install")}
+          </Button>
+        );
+      }}
+    />
+  );
+}
@@ -1,79 +0,0 @@
-import Glide, { Options } from "@glidejs/glide";
-import "@glidejs/glide/dist/css/glide.core.min.css";
-import "@glidejs/glide/dist/css/glide.theme.min.css";
-import { useEffect, useRef } from "react";
-
-import { Icon } from "@calcom/ui/Icon";
-
-const Slider = <T extends string | unknown>({
-  title = "",
-  className = "",
-  items,
-  itemKey = (item) => `${item}`,
-  renderItem,
-  options = {},
-}: {
-  title?: string;
-  className?: string;
-  items: T[];
-  itemKey?: (item: T) => string;
-  renderItem?: (item: T) => JSX.Element;
-  options?: Options;
-}) => {
-  const glide = useRef(null);
-  const slider = useRef<Glide.Properties | null>(null);
-
-  useEffect(() => {
-    if (glide.current) {
-      slider.current = new Glide(glide.current, {
-        type: "carousel",
-        ...options,
-      }).mount();
-    }
-
-    return () => slider.current?.destroy();
-  }, [options]);
-
-  return (
-    <div className={`mb-2 ${className}`}>
-      <style jsx global>
-        {`
-          .glide__slide {
-            height: auto !important;
-          }
-        `}
-      </style>
-      <div className="glide" ref={glide}>
-        <div className="flex cursor-default">
-          {title && (
-            <div>
-              <h2 className="mt-0 mb-2 text-lg font-semibold text-gray-900">{title}</h2>
-            </div>
-          )}
-          <div className="glide__arrows ml-auto" data-glide-el="controls">
-            <button data-glide-dir="<" className="mr-4">
-              <Icon.FiArrowLeft className="h-5 w-5 text-gray-600 hover:text-black" />
-            </button>
-            <button data-glide-dir=">">
-              <Icon.FiArrowRight className="h-5 w-5 text-gray-600 hover:text-black" />
-            </button>
-          </div>
-        </div>
-        <div className="glide__track" data-glide-el="track">
-          <ul className="glide__slides">
-            {items.map((item) => {
-              if (typeof renderItem !== "function") return null;
-              return (
-                <li key={itemKey(item)} className="glide__slide h-auto pl-0">
-                  {renderItem(item)}
-                </li>
-              );
-            })}
-          </ul>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Slider;
@@ -1,30 +0,0 @@
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import type { App } from "@calcom/types/App";
-
-import AppCard from "./AppCard";
-import Slider from "./Slider";
-
-const TrendingAppsSlider = <T extends App>({ items }: { items: T[] }) => {
-  const { t } = useLocale();
-
-  return (
-    <Slider<T>
-      className="mb-16"
-      title={t("trending_apps")}
-      items={items.filter((app) => !!app.trending)}
-      itemKey={(app) => app.name}
-      options={{
-        perView: 3,
-        breakpoints: {
-          768 /* and below */: {
-            perView: 1,
-          },
-        },
-      }}
-      renderItem={(app) => <AppCard app={app} />}
-    />
-  );
-};
-
-/** @deprecated use v2 instead, located at packages/ui/v2/core/apps  */
-export default TrendingAppsSlider;
@@ -1,62 +0,0 @@
-import { signIn } from "next-auth/react";
-import { Dispatch, SetStateAction } from "react";
-import { useFormContext } from "react-hook-form";
-
-import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
-import { trpc } from "@calcom/trpc/react";
-import Button from "@calcom/ui/Button";
-
-import { useLocale } from "@lib/hooks/useLocale";
-
-interface Props {
-  email: string;
-  samlTenantID: string;
-  samlProductID: string;
-  hostedCal: boolean;
-  setErrorMessage: Dispatch<SetStateAction<string | null>>;
-}
-
-export default function SAMLLogin(props: Props) {
-  const { t } = useLocale();
-  const methods = useFormContext();
-  const telemetry = useTelemetry();
-
-  const mutation = trpc.useMutation("viewer.public.samlTenantProduct", {
-    onSuccess: async (data) => {
-      await signIn("saml", {}, { tenant: data.tenant, product: data.product });
-    },
-    onError: (err) => {
-      props.setErrorMessage(err.message);
-    },
-  });
-
-  return (
-    <div className="mt-5">
-      <Button
-        color="secondary"
-        data-testid="saml"
-        className="flex w-full justify-center"
-        onClick={async (event) => {
-          event.preventDefault();
-
-          // track Google logins. Without personal data/payload
-          telemetry.event(telemetryEventTypes.googleLogin, collectPageParameters());
-
-          if (!props.hostedCal) {
-            await signIn("saml", {}, { tenant: props.samlTenantID, product: props.samlProductID });
-          } else {
-            if (props.email.length === 0) {
-              props.setErrorMessage(t("saml_email_required"));
-              return;
-            }
-            // hosted solution, fetch tenant and product from the backend
-            mutation.mutate({
-              email: methods.getValues("email"),
-            });
-          }
-        }}>
-        {t("signin_with_saml")}
-      </Button>
-    </div>
-  );
-}
@@ -2,12 +2,12 @@ import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import showToast from "@calcom/lib/notification";
 import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui";
 import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
 import { Icon } from "@calcom/ui/Icon";
 import { Form } from "@calcom/ui/form/fields";
+import showToast from "@calcom/ui/v2/core/notifications";

 import { HttpError } from "@lib/core/http/error";

@@ -1,33 +1,41 @@
 import { getEventLocationType, locationKeyToString } from "@calcom/app-store/locations";
 import { classNames } from "@calcom/lib";
+import Tooltip from "@calcom/ui/v2/core/Tooltip";

 import { Props } from "./pages/AvailabilityPage";

 export function AvailableEventLocations({ locations }: { locations: Props["eventType"]["locations"] }) {
  return locations.length ? (
-    <div>
-      <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) => {
-          const eventLocationType = getEventLocationType(location.type);
-          if (!eventLocationType) {
-            // It's possible that the location app got uninstalled
-            return null;
-          }
-          return (
-            <div key={location.type} className="flex flex-row items-center text-sm font-medium">
-              <img
-                src={eventLocationType.iconUrl}
-                className={classNames(
-                  "mr-[10px] ml-[2px] h-4 w-4 opacity-70 dark:opacity-100 ",
-                  !eventLocationType.iconUrl?.includes("api") ? "dark:invert" : ""
-                )}
-                alt={`${eventLocationType.label} icon`}
-              />
-              <span key={location.type}>{locationKeyToString(location)} </span>
-            </div>
-          );
-        })}
-      </div>
+    <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) => {
+        const eventLocationType = getEventLocationType(location.type);
+        if (!eventLocationType) {
+          // It's possible that the location app got uninstalled
+          return null;
+        }
+        return (
+          <div key={location.type} className="flex flex-row items-center text-sm font-medium">
+            <img
+              src={eventLocationType.iconUrl}
+              className={classNames(
+                "mr-[10px] ml-[2px] h-4 w-4 opacity-70 dark:opacity-100 ",
+                !eventLocationType.iconUrl?.includes("api") ? "dark:invert" : ""
+              )}
+              alt={`${eventLocationType.label} icon`}
+            />
+            <Tooltip content={locationKeyToString(location)}>
+              <a
+                target="_blank"
+                href={locationKeyToString(location) ?? "/"}
+                className="truncate"
+                key={location.type}
+                rel="noreferrer">
+                {locationKeyToString(location)}
+              </a>
+            </Tooltip>
+          </div>
+        );
+      })}
    </div>
  ) : (
    <></>
@@ -4,19 +4,22 @@ import { FC, useEffect, useState } from "react";

 import dayjs, { Dayjs } from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { TimeFormat } from "@calcom/lib/timeFormat";
 import { nameOfDay } from "@calcom/lib/weekday";
 import type { Slot } from "@calcom/trpc/server/routers/viewer/slots";
 import { SkeletonContainer, SkeletonText } from "@calcom/ui";
+import { ToggleGroup } from "@calcom/ui/v2/core/form/ToggleGroup";

 import classNames from "@lib/classNames";
 import { timeZone } from "@lib/clock";

 type AvailableTimesProps = {
-  timeFormat: string;
+  timeFormat: TimeFormat;
+  onTimeFormatChange: (is24Hour: boolean) => void;
  eventTypeId: number;
  recurringCount: number | undefined;
  eventTypeSlug: string;
-  date: Dayjs;
+  date?: Dayjs;
  seatsPerTimeSlot?: number | null;
  slots?: Slot[];
  isLoading: boolean;
@@ -31,6 +34,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
  eventTypeSlug,
  recurringCount,
  timeFormat,
+  onTimeFormatChange,
  seatsPerTimeSlot,
  ethSignature,
 }) => {
@@ -44,18 +48,31 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
    setBrand(getComputedStyle(document.documentElement).getPropertyValue("--brand-color").trim());
  }, []);

+  if (!date) return null;
+
  return (
-    <div className="dark:bg-darkgray-100 mt-8 flex flex-col px-4 text-center sm:mt-0 sm:w-1/3 sm:p-5 md:-mb-5">
-      <div className="mb-4 text-left text-base">
-        <span className="text-bookingdarker dark:text-darkgray-800 mb-8 w-1/2 break-words font-semibold text-gray-900">
-          {nameOfDay(i18n.language, Number(date.format("d")))}
-        </span>
-        <span className="text-bookinglight font-medium">
-          {date.format(", D ")}
-          {date.toDate().toLocaleString(i18n.language, { month: "long" })}
-        </span>
+    <div className="dark:bg-darkgray-100 mt-8 flex h-full w-full flex-col px-4 text-center sm:mt-0 sm:p-5 md:-mb-5 md:min-w-[200px] lg:min-w-[300px]">
+      <div className="mb-6 flex items-center text-left text-base">
+        <div className="mr-4">
+          <span className="text-bookingdarker dark:text-darkgray-800 font-semibold text-gray-900">
+            {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 ")}
+          </span>
+        </div>
+        <div className="ml-auto">
+          <ToggleGroup
+            onValueChange={(timeFormat) => onTimeFormatChange(timeFormat === "24")}
+            defaultValue={timeFormat === TimeFormat.TWELVE_HOUR ? "12" : "24"}
+            options={[
+              { value: "12", label: t("12_hour_short") },
+              { value: "24", label: t("24_hour_short") },
+            ]}
+          />
+        </div>
      </div>
-      <div className="grid flex-grow grid-cols-1 gap-x-2 overflow-y-auto sm:block md:h-[364px]">
+      <div className="-mb-5 grid flex-grow grid-cols-1 gap-x-2 overflow-y-auto sm:block md:h-[364px]">
        {slots.length > 0 &&
          slots.map((slot) => {
            type BookingURL = {
@@ -63,7 +80,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
              query: Record<string, string | number | string[] | undefined>;
            };
            const bookingUrl: BookingURL = {
-              pathname: "book",
+              pathname: router.pathname.endsWith("/embed") ? "../book" : "book",
              query: {
                ...router.query,
                date: dayjs(slot.time).format(),
@@ -150,4 +167,6 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
  );
 };

+AvailableTimes.displayName = "AvailableTimes";
+
 export default AvailableTimes;
@@ -0,0 +1,107 @@
+import { SchedulingType } from "@prisma/client";
+import { FC, ReactNode } from "react";
+
+import { classNames } from "@calcom/lib";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Icon } from "@calcom/ui/Icon";
+
+import { UserAvatars } from "@components/booking/UserAvatars";
+import EventTypeDescriptionSafeHTML from "@components/eventtype/EventTypeDescriptionSafeHTML";
+
+import type { AvailabilityPageProps } from "../../pages/[user]/[type]";
+import type { BookPageProps } from "../../pages/[user]/book";
+import type { DynamicAvailabilityPageProps } from "../../pages/d/[link]/[slug]";
+import type { HashLinkPageProps } from "../../pages/d/[link]/book";
+import type { AvailabilityTeamPageProps } from "../../pages/team/[slug]/[type]";
+import type { TeamBookingPageProps } from "../../pages/team/[slug]/book";
+import { AvailableEventLocations } from "./AvailableEventLocations";
+
+interface Props {
+  profile:
+    | AvailabilityPageProps["profile"]
+    | HashLinkPageProps["profile"]
+    | TeamBookingPageProps["profile"]
+    | BookPageProps["profile"]
+    | AvailabilityTeamPageProps["profile"]
+    | DynamicAvailabilityPageProps["profile"];
+  eventType:
+    | AvailabilityPageProps["eventType"]
+    | HashLinkPageProps["eventType"]
+    | TeamBookingPageProps["eventType"]
+    | BookPageProps["eventType"]
+    | AvailabilityTeamPageProps["eventType"]
+    | DynamicAvailabilityPageProps["eventType"];
+  isBookingPage?: boolean;
+  children: ReactNode;
+  isMobile?: boolean;
+  rescheduleUid?: string;
+}
+
+const BookingDescription: FC<Props> = (props) => {
+  const { profile, eventType, isBookingPage = false, children } = props;
+  const { t } = useLocale();
+  return (
+    <>
+      <UserAvatars
+        profile={profile}
+        users={eventType.users}
+        showMembers={eventType.schedulingType !== SchedulingType.ROUND_ROBIN}
+        size={10}
+        truncateAfter={3}
+      />
+      <h2 className="mt-2 break-words text-sm font-medium text-gray-600 dark:text-gray-300">
+        {profile.name}
+      </h2>
+      <h1 className="font-cal dark:text-darkgray-900 mb-6 break-words text-2xl font-semibold text-gray-900">
+        {eventType.title}
+      </h1>
+      <div className="dark:text-darkgray-600 flex flex-col space-y-3 text-sm font-medium text-gray-600">
+        {eventType?.description && (
+          <div
+            className={classNames(
+              "flex",
+              isBookingPage && "dark:text-darkgray-600 text-sm font-medium text-gray-600"
+            )}>
+            <div>
+              <Icon.FiInfo
+                className={classNames(
+                  "mr-[10px] ml-[2px] inline-block h-4 w-4",
+                  isBookingPage && "dark:text-darkgray-600 -mt-1 text-gray-500"
+                )}
+              />
+            </div>
+            <div className="max-w-[calc(100%_-_2rem)] flex-shrink break-words">
+              <EventTypeDescriptionSafeHTML eventType={eventType} />
+            </div>
+          </div>
+        )}
+        {eventType?.requiresConfirmation && (
+          <div
+            className={classNames(
+              "flex items-center",
+              isBookingPage && "dark:text-darkgray-600 text-sm font-medium text-gray-600"
+            )}>
+            <div>
+              <Icon.FiCheckSquare className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 " />
+            </div>
+            {t("requires_confirmation")}
+          </div>
+        )}
+        <AvailableEventLocations
+          locations={eventType.locations as AvailabilityPageProps["eventType"]["locations"]}
+        />
+        <p
+          className={classNames(
+            "text-sm font-medium",
+            isBookingPage && "dark:text-darkgray-600 text-gray-600"
+          )}>
+          <Icon.FiClock className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4" />
+          {eventType.length} {t("minutes")}
+        </p>
+        {children}
+      </div>
+    </>
+  );
+};
+
+export default BookingDescription;
@@ -1,20 +1,22 @@
 import { BookingStatus } from "@prisma/client";
 import { useRouter } from "next/router";
-import { useState } from "react";
+import { useState, useMemo } from "react";

 import { EventLocationType, getEventLocationType } from "@calcom/app-store/locations";
 import dayjs from "@calcom/dayjs";
 import classNames from "@calcom/lib/classNames";
+import { formatTime } from "@calcom/lib/date-fns";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import showToast from "@calcom/lib/notification";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { inferQueryInput, inferQueryOutput, trpc } from "@calcom/trpc/react";
 import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
 import { Icon } from "@calcom/ui/Icon";
-import { Tooltip } from "@calcom/ui/Tooltip";
 import { TextArea } from "@calcom/ui/form/fields";
 import Badge from "@calcom/ui/v2/core/Badge";
 import Button from "@calcom/ui/v2/core/Button";
+import MeetingTimeInTimezones from "@calcom/ui/v2/core/MeetingTimeInTimezones";
+import Tooltip from "@calcom/ui/v2/core/Tooltip";
+import showToast from "@calcom/ui/v2/core/notifications";

 import useMeQuery from "@lib/hooks/useMeQuery";
 import { extractRecurringDates } from "@lib/parseDate";
@@ -29,7 +31,7 @@ type BookingItem = inferQueryOutput<"viewer.bookings">["bookings"][number];

 type BookingItemProps = BookingItem & {
  listingStatus: BookingListingStatus;
-  recurringBookings?: BookingItem[];
+  recurringBookings: inferQueryOutput<"viewer.bookings">["recurringInfo"];
 };

 function BookingListItem(booking: BookingItemProps) {
@@ -53,6 +55,16 @@ function BookingListItem(booking: BookingItemProps) {
    },
  });

+  const isUpcoming = new Date(booking.endTime) >= new Date();
+  const isPast = new Date(booking.endTime) < new Date();
+  const isCancelled = booking.status === BookingStatus.CANCELLED;
+  const isConfirmed = booking.status === BookingStatus.ACCEPTED;
+  const isRejected = booking.status === BookingStatus.REJECTED;
+  const isPending = booking.status === BookingStatus.PENDING;
+  const isRecurring = booking.recurringEventId !== null;
+  const isTabRecurring = booking.listingStatus === "recurring";
+  const isTabUnconfirmed = booking.listingStatus === "unconfirmed";
+
  const bookingConfirm = async (confirm: boolean) => {
    let body = {
      bookingId: booking.id,
@@ -61,28 +73,18 @@ function BookingListItem(booking: BookingItemProps) {
    };
    /**
     * Only pass down the recurring event id when we need to confirm the entire series, which happens in
-     * the "Recurring" tab, to support confirming discretionally in the "Recurring" tab.
+     * the "Recurring" tab and "Unconfirmed" tab, to support confirming discretionally in the "Recurring" tab.
     */
-    if (booking.listingStatus === "recurring" && booking.recurringEventId !== null) {
+    if ((isTabRecurring || isTabUnconfirmed) && isRecurring) {
      body = Object.assign({}, body, { recurringEventId: booking.recurringEventId });
    }
    mutation.mutate(body);
  };

-  const isUpcoming = new Date(booking.endTime) >= new Date();
-  const isPast = new Date(booking.endTime) < new Date();
-  const isCancelled = booking.status === BookingStatus.CANCELLED;
-  const isConfirmed = booking.status === BookingStatus.ACCEPTED;
-  const isRejected = booking.status === BookingStatus.REJECTED;
-  const isPending = booking.status === BookingStatus.PENDING;
-
  const pendingActions: ActionType[] = [
    {
      id: "reject",
-      label:
-        booking.listingStatus === "recurring" && booking.recurringEventId !== null
-          ? t("reject_all")
-          : t("reject"),
+      label: (isTabRecurring || isTabUnconfirmed) && isRecurring ? t("reject_all") : t("reject"),
      onClick: () => {
        setRejectionDialogIsOpen(true);
      },
@@ -91,10 +93,7 @@ function BookingListItem(booking: BookingItemProps) {
    },
    {
      id: "confirm",
-      label:
-        booking.listingStatus === "recurring" && booking.recurringEventId !== null
-          ? t("confirm_all")
-          : t("confirm"),
+      label: (isTabRecurring || isTabUnconfirmed) && isRecurring ? t("confirm_all") : t("confirm"),
      onClick: () => {
        bookingConfirm(true);
      },
@@ -107,17 +106,10 @@ function BookingListItem(booking: BookingItemProps) {
  let bookedActions: ActionType[] = [
    {
      id: "cancel",
-      label:
-        booking.listingStatus === "recurring" && booking.recurringEventId !== null
-          ? t("cancel_all_remaining")
-          : t("cancel"),
+      label: isTabRecurring && isRecurring ? t("cancel_all_remaining") : t("cancel"),
      /* When cancelling we need to let the UI and the API know if the intention is to
         cancel all remaining bookings or just that booking instance. */
-      href: `/cancel/${booking.uid}${
-        booking.listingStatus === "recurring" && booking.recurringEventId !== null
-          ? "?allRemainingBookings=true"
-          : ""
-      }`,
+      href: `/cancel/${booking.uid}${isTabRecurring && isRecurring ? "?allRemainingBookings=true" : ""}`,
      icon: Icon.FiX,
    },
    {
@@ -151,7 +143,7 @@ function BookingListItem(booking: BookingItemProps) {
    },
  ];

-  if (booking.listingStatus === "recurring" && booking.recurringEventId !== null) {
+  if (isTabRecurring && isRecurring) {
    bookedActions = bookedActions.filter((action) => action.id !== "edit_booking");
  }

@@ -184,21 +176,20 @@ function BookingListItem(booking: BookingItemProps) {
    setLocationMutation.mutate({ bookingId: booking.id, newLocation });
  };

+  // Extract recurring dates is intensive to run, so use useMemo.
  // Calculate the booking date(s) and setup recurring event data to show
-  let recurringStrings: string[] = [];
-  let recurringDates: Date[] = [];
-
-  if (booking.recurringBookings && booking.eventType.recurringEvent?.freq !== undefined) {
-    [recurringStrings, recurringDates] = extractRecurringDates(
-      booking.recurringBookings,
-      user?.timeZone,
-      i18n
-    );
-  }
+  // @FIXME: This is importing the RRULE library which is already heavy. Find out a more optimal way do this.
+  const [recurringStrings, recurringDates] = useMemo(() => {
+    if (booking.recurringBookings !== undefined && booking.eventType.recurringEvent?.freq !== undefined) {
+      return extractRecurringDates(booking, user?.timeZone, i18n);
+    }
+    return [[], []];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [user?.timeZone, i18n.language, booking.recurringBookings]);

  const location = booking.location || "";

-  const onClick = () => {
+  const onClickTableData = () => {
    router.push({
      pathname: "/success",
      query: {
@@ -206,7 +197,7 @@ function BookingListItem(booking: BookingItemProps) {
        // TODO: Booking when fetched should have id 0 already(for Dynamic Events).
        type: booking.eventType.id || 0,
        eventSlug: booking.eventType.slug,
-        user: user?.username || "",
+        username: user?.username || "",
        name: booking.attendees[0] ? booking.attendees[0].name : undefined,
        email: booking.attendees[0] ? booking.attendees[0].email : undefined,
        location: location,
@@ -219,6 +210,7 @@ function BookingListItem(booking: BookingItemProps) {
      },
    });
  };
+
  return (
    <>
      <RescheduleDialog
@@ -267,12 +259,21 @@ function BookingListItem(booking: BookingItemProps) {
      </Dialog>

      <tr className="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-[10rem]" onClick={onClick}>
+        <td
+          className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:min-w-[12rem]"
+          onClick={onClickTableData}>
          <div className="cursor-pointer py-4">
            <div className="text-sm leading-6 text-gray-900">{startTime}</div>
            <div className="text-sm text-gray-500">
-              {dayjs(booking.startTime).format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")} -{" "}
-              {dayjs(booking.endTime).format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")}
+              {formatTime(booking.startTime, user?.timeFormat, user?.timeZone)} -{" "}
+              {formatTime(booking.endTime, user?.timeFormat, user?.timeZone)}
+              <MeetingTimeInTimezones
+                timeFormat={user?.timeFormat}
+                userTimezone={user?.timeZone}
+                startTime={booking.startTime}
+                endTime={booking.endTime}
+                attendees={booking.attendees}
+              />
            </div>

            {isPending && (
@@ -293,22 +294,25 @@ function BookingListItem(booking: BookingItemProps) {
            )}

            <div className="mt-2 text-sm text-gray-400">
-              <RecurringBookingsTooltip
-                booking={booking}
-                recurringStrings={recurringStrings}
-                recurringDates={recurringDates}
-              />
+              <RecurringBookingsTooltip booking={booking} recurringDates={recurringDates} />
            </div>
          </div>
        </td>
-        <td className={"w-full px-4" + (isRejected ? " line-through" : "")} onClick={onClick}>
+        <td className={"w-full px-4" + (isRejected ? " line-through" : "")} onClick={onClickTableData}>
          {/* Time and Badges for mobile */}
          <div className="w-full pt-4 pb-2 sm:hidden">
            <div className="flex w-full items-center justify-between sm:hidden">
              <div className="text-sm leading-6 text-gray-900">{startTime}</div>
              <div className="pr-2 text-sm text-gray-500">
-                {dayjs(booking.startTime).format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")} -{" "}
-                {dayjs(booking.endTime).format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")}
+                {formatTime(booking.startTime, user?.timeFormat, user?.timeZone)} -{" "}
+                {formatTime(booking.endTime, user?.timeFormat, user?.timeZone)}
+                <MeetingTimeInTimezones
+                  timeFormat={user?.timeFormat}
+                  userTimezone={user?.timeZone}
+                  startTime={booking.startTime}
+                  endTime={booking.endTime}
+                  attendees={booking.attendees}
+                />
              </div>
            </div>

@@ -328,11 +332,7 @@ function BookingListItem(booking: BookingItemProps) {
              </Badge>
            )}
            <div className="text-sm text-gray-400 sm:hidden">
-              <RecurringBookingsTooltip
-                booking={booking}
-                recurringStrings={recurringStrings}
-                recurringDates={recurringDates}
-              />
+              <RecurringBookingsTooltip booking={booking} recurringDates={recurringDates} />
            </div>
          </div>

@@ -352,7 +352,7 @@ function BookingListItem(booking: BookingItemProps) {
            </div>
            {booking.description && (
              <div
-                className="max-w-52 md:max-w-96 truncate text-sm text-gray-600"
+                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"
                title={booking.description}>
                &quot;{booking.description}&quot;
              </div>
@@ -393,26 +393,34 @@ function BookingListItem(booking: BookingItemProps) {

 interface RecurringBookingsTooltipProps {
  booking: BookingItemProps;
-  recurringStrings: string[];
  recurringDates: Date[];
 }

-const RecurringBookingsTooltip = ({
-  booking,
-  recurringStrings,
-  recurringDates,
-}: RecurringBookingsTooltipProps) => {
+const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookingsTooltipProps) => {
+  // Get user so we can determine 12/24 hour format preferences
+  const query = useMeQuery();
+  const user = query.data;
  const { t } = useLocale();
+  const now = new Date();
+  const recurringCount = recurringDates.filter((date) => {
+    return date >= now;
+  }).length;

  return (
    (booking.recurringBookings &&
      booking.eventType?.recurringEvent?.freq &&
-      (booking.listingStatus === "recurring" || booking.listingStatus === "cancelled") && (
+      (booking.listingStatus === "recurring" ||
+        booking.listingStatus === "unconfirmed" ||
+        booking.listingStatus === "cancelled") && (
        <div className="underline decoration-gray-400 decoration-dashed underline-offset-2">
          <div className="flex">
            <Tooltip
-              content={recurringStrings.map((aDate, key) => (
-                <p key={key}>{aDate}</p>
+              content={recurringDates.map((aDate, key) => (
+                <p key={key} className={classNames(recurringDates[key] < now && "line-through")}>
+                  {formatTime(booking.startTime, user?.timeFormat, user?.timeZone)}
+                  {" - "}
+                  {dayjs(aDate).format("D MMMM YYYY")}
+                </p>
              ))}>
              <div className="text-gray-600 dark:text-white">
                <Icon.FiRefreshCcw
@@ -422,12 +430,12 @@ const RecurringBookingsTooltip = ({
                <p className="mt-1 pl-5 text-xs">
                  {booking.status === BookingStatus.ACCEPTED
                    ? `${t("event_remaining", {
-                        count: recurringDates.length,
+                        count: recurringCount,
                      })}`
                    : getEveryFreqFor({
                        t,
                        recurringEvent: booking.eventType.recurringEvent,
-                        recurringCount: booking.recurringBookings.length,
+                        recurringCount,
                      })}
                </p>
              </div>
@@ -12,6 +12,7 @@ type Props = {
  booking: {
    title?: string;
    uid?: string;
+    id?: number;
  };
  profile: {
    name: string | null;
@@ -57,13 +58,13 @@ export default function CancelBooking(props: Props) {
            className="mt-2 mb-3 w-full dark:border-gray-900 dark:bg-gray-700 dark:text-white sm:mb-3 "
            rows={3}
          />
-          <div className=" flex flex-col-reverse rtl:space-x-reverse sm:flex-row">
+          <div className="flex flex-col-reverse rtl:space-x-reverse sm:flex-row">
            {!props.recurringEvent && (
-              <div className=" border-bookinglightest mt-5 flex w-full justify-center border-t pt-3 sm:mt-0  sm:justify-start sm:border-0 sm:pt-0">
+              <div className="border-bookinglightest mt-5 flex w-full justify-center border-t pt-3 sm:mt-0 sm:justify-start sm:border-0 sm:pt-0">
                <Button
                  color="secondary"
                  className="border-0 sm:border"
-                  onClick={() => router.push("/reschedule/" + booking?.uid)}>
+                  onClick={() => router.push(`/reschedule/${booking?.uid}`)}>
                  {t("reschedule_this")}
                </Button>
              </div>
@@ -79,8 +80,8 @@ export default function CancelBooking(props: Props) {
                  setLoading(true);

                  const payload = {
-                    uid: booking?.uid,
-                    reason: cancellationReason,
+                    id: booking?.id,
+                    cancellationReason: cancellationReason,
                  };

                  telemetry.event(telemetryEventTypes.bookingCancelled, collectPageParameters());
@@ -1,24 +1,19 @@
 import { FC, useEffect, useState } from "react";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import TimezoneSelect, { ITimezoneOption } from "@calcom/ui/form/TimezoneSelect";
-import { Switch } from "@calcom/ui/v2";
+import TimezoneSelect, { ITimezoneOption } from "@calcom/ui/v2/core/TimezoneSelect";

-import { is24h, timeZone } from "../../lib/clock";
+import { timeZone } from "../../lib/clock";

 type Props = {
  onSelectTimeZone: (selectedTimeZone: string) => void;
-  onToggle24hClock: (is24hClock: boolean) => void;
-  timeFormat: string;
 };

-const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone, timeFormat }) => {
+const TimeOptions: FC<Props> = ({ onSelectTimeZone }) => {
  const [selectedTimeZone, setSelectedTimeZone] = useState("");
-  const [is24hClock, setIs24hClock] = useState(timeFormat === "HH:mm" && true);
  const { t } = useLocale();

  useEffect(() => {
-    setIs24hClock(is24h());
    setSelectedTimeZone(timeZone());
  }, []);

@@ -27,26 +22,11 @@ const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone, timeFormat
      onSelectTimeZone(timeZone(selectedTimeZone));
    }
  }, [selectedTimeZone, onSelectTimeZone]);
-  const handle24hClockToggle = (is24hClock: boolean) => {
-    setIs24hClock(is24hClock);
-    onToggle24hClock(is24h(is24hClock));
-  };

  return selectedTimeZone !== "" ? (
-    <div className="max-w-80 dark:border-darkgray-300 dark:bg-darkgray-200 absolute z-10 w-full rounded-sm border border-gray-200 bg-white px-4 pt-4 pb-3 shadow-sm">
+    <div className="dark:border-darkgray-300 dark:bg-darkgray-200 rounded-sm border border-gray-200 bg-white px-4 pt-4 pb-3 shadow-sm">
      <div className="mb-4 flex">
        <div className="text-sm font-medium text-gray-600 dark:text-white">{t("time_options")}</div>
-        <div className="ml-auto flex items-center">
-          <label className="ltl:mr-3 mr-2 align-text-top text-sm font-medium text-neutral-700 ltr:ml-3 rtl:mr-3 dark:text-white">
-            {t("am_pm")}
-          </label>
-          <Switch
-            name="24hClock"
-            label={t("24_h")}
-            defaultChecked={is24hClock}
-            onCheckedChange={handle24hClockToggle}
-          />
-        </div>
      </div>
      <TimezoneSelect
        id="timeZone"
@@ -1,7 +1,6 @@
-// Get router variables
+import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { EventType } from "@prisma/client";
-import { SchedulingType } from "@prisma/client";
-import * as Collapsible from "@radix-ui/react-collapsible";
+import * as Popover from "@radix-ui/react-popover";
 import { TFunction } from "next-i18next";
 import { useRouter } from "next/router";
 import { useReducer, useEffect, useMemo, useState } from "react";
@@ -9,6 +8,8 @@ import { Toaster } from "react-hot-toast";
 import { FormattedNumber, IntlProvider } from "react-intl";
 import { z } from "zod";

+import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
+import { getEventTypeAppData } from "@calcom/app-store/utils";
 import dayjs, { Dayjs } from "@calcom/dayjs";
 import {
  useEmbedNonStylesConfig,
@@ -19,12 +20,13 @@ import {
 import CustomBranding from "@calcom/lib/CustomBranding";
 import classNames from "@calcom/lib/classNames";
 import { WEBSITE_URL } from "@calcom/lib/constants";
+import getStripeAppData from "@calcom/lib/getStripeAppData";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import notEmpty from "@calcom/lib/notEmpty";
 import { getRecurringFreq } from "@calcom/lib/recurringStrings";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
-import { detectBrowserTimeFormat, getIs24hClockFromLocalStorage } from "@calcom/lib/timeFormat";
+import { detectBrowserTimeFormat, setIs24hClockInLocalStorage, TimeFormat } from "@calcom/lib/timeFormat";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui/Icon";
 import DatePicker from "@calcom/ui/v2/modules/booker/DatePicker";
@@ -36,17 +38,16 @@ import { isBrandingHidden } from "@lib/isBrandingHidden";

 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 { UserAvatars } from "@components/booking/UserAvatars";
-import EventTypeDescriptionSafeHTML from "@components/eventtype/EventTypeDescriptionSafeHTML";
 import { HeadSeo } from "@components/seo/head-seo";
 import PoweredByCal from "@components/ui/PoweredByCal";

 import type { AvailabilityPageProps } from "../../../pages/[user]/[type]";
 import type { DynamicAvailabilityPageProps } from "../../../pages/d/[link]/[slug]";
 import type { AvailabilityTeamPageProps } from "../../../pages/team/[slug]/[type]";
-import { AvailableEventLocations } from "../AvailableEventLocations";

+// Get router variables
 const GoBackToPreviousPage = ({ t }: { t: TFunction }) => {
  const router = useRouter();
  const path = router.asPath.split("/");
@@ -107,6 +108,7 @@ const useSlots = ({
 const SlotPicker = ({
  eventType,
  timeFormat,
+  onTimeFormatChange,
  timeZone,
  recurringEventCount,
  users,
@@ -115,7 +117,8 @@ const SlotPicker = ({
  ethSignature,
 }: {
  eventType: Pick<EventType, "id" | "schedulingType" | "slug">;
-  timeFormat: string;
+  timeFormat: TimeFormat;
+  onTimeFormatChange: (is24Hour: boolean) => void;
  timeZone?: string;
  seatsPerTimeSlot?: number;
  recurringEventCount?: number;
@@ -129,6 +132,8 @@ const SlotPicker = ({
  const { month, setQuery: setMonth } = useRouterQuery("month");
  const router = useRouter();

+  const [slotPickerRef] = useAutoAnimate<HTMLDivElement>();
+
  useEffect(() => {
    if (!router.isReady) return;

@@ -175,10 +180,8 @@ const SlotPicker = ({
      <DatePicker
        isLoading={isLoading}
        className={classNames(
-          "mt-8 w-full px-4 pb-4 sm:mt-0 sm:min-w-[455px] md:px-5",
-          selectedDate
-            ? "sm:dark:border-darkgray-200 border-gray-200 sm:w-1/2 sm:border-r sm:p-4 sm:pr-6 md:w-1/3"
-            : "sm:p-4"
+          "mt-8 px-4 pb-4 sm:mt-0 md:min-w-[300px] md:px-5 lg:min-w-[455px]",
+          selectedDate ? "sm:dark:border-darkgray-200 border-gray-200 sm:border-r sm:p-4 sm:pr-6" : "sm:p-4"
        )}
        includedDates={Object.keys(slots).filter((k) => slots[k].length > 0)}
        locale={isLocaleReady ? i18n.language : "en"}
@@ -193,55 +196,42 @@ const SlotPicker = ({
        weekStart={weekStart}
      />

-      {selectedDate && (
+      <div ref={slotPickerRef}>
        <AvailableTimes
          isLoading={isLoading}
-          slots={slots[selectedDate.format("YYYY-MM-DD")]}
+          slots={selectedDate && slots[selectedDate.format("YYYY-MM-DD")]}
          date={selectedDate}
          timeFormat={timeFormat}
+          onTimeFormatChange={onTimeFormatChange}
          eventTypeId={eventType.id}
          eventTypeSlug={eventType.slug}
          seatsPerTimeSlot={seatsPerTimeSlot}
          recurringCount={recurringEventCount}
          ethSignature={ethSignature}
        />
-      )}
+      </div>
    </>
  );
 };

 function TimezoneDropdown({
-  onChangeTimeFormat,
  onChangeTimeZone,
  timeZone,
-  timeFormat,
 }: {
-  onChangeTimeFormat: (newTimeFormat: string) => void;
  onChangeTimeZone: (newTimeZone: string) => void;
  timeZone?: string;
-  timeFormat: string;
 }) {
  const [isTimeOptionsOpen, setIsTimeOptionsOpen] = useState(false);

-  useEffect(() => {
-    handleToggle24hClock(!!getIs24hClockFromLocalStorage());
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
  const handleSelectTimeZone = (newTimeZone: string) => {
    onChangeTimeZone(newTimeZone);
    localStorageTimeZone(newTimeZone);
    setIsTimeOptionsOpen(false);
  };

-  const handleToggle24hClock = (is24hClock: boolean) => {
-    onChangeTimeFormat(is24hClock ? "HH:mm" : "h:mma");
-  };
-
  return (
-    <Collapsible.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen} className="flex">
-      <Collapsible.Trigger className="min-w-32 dark:text-darkgray-600 mb-2 -ml-2 px-2 text-left text-gray-600">
+    <Popover.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}>
+      <Popover.Trigger className="min-w-32 dark:text-darkgray-600 radix-state-open:bg-gray-200 dark:radix-state-open:bg-darkgray-200 group relative mb-2 -ml-2 inline-block rounded-md px-2 py-2 text-left text-gray-600">
        <p className="text-sm font-medium">
          <Icon.FiGlobe className="mr-[10px] ml-[2px] -mt-[2px] inline-block h-4 w-4" />
          {timeZone}
@@ -251,15 +241,16 @@ function TimezoneDropdown({
            <Icon.FiChevronDown className="ml-1 inline-block h-4 w-4" />
          )}
        </p>
-      </Collapsible.Trigger>
-      <Collapsible.Content>
-        <TimeOptions
-          onSelectTimeZone={handleSelectTimeZone}
-          onToggle24hClock={handleToggle24hClock}
-          timeFormat={timeFormat}
-        />
-      </Collapsible.Content>
-    </Collapsible.Root>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content
+          hideWhenDetached
+          align="start"
+          className="animate-fade-in-up absolute left-0 top-2 w-80 max-w-[calc(100vw_-_1.5rem)]">
+          <TimeOptions onSelectTimeZone={handleSelectTimeZone} />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
  );
 }

@@ -288,9 +279,9 @@ const useRouterQuery = <T extends string>(name: T) => {

 export type Props = AvailabilityTeamPageProps | AvailabilityPageProps | DynamicAvailabilityPageProps;

-const AvailabilityPage = ({ profile, eventType }: Props) => {
+const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
  const router = useRouter();
-  const isEmbed = useIsEmbed();
+  const isEmbed = useIsEmbed(restProps.isEmbed);
  const query = dateQuerySchema.parse(router.query);
  const { rescheduleUid } = query;
  useTheme(profile.theme);
@@ -301,8 +292,13 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
  const isBackgroundTransparent = useIsBackgroundTransparent();

  const [timeZone, setTimeZone] = useState<string>();
-  const [timeFormat, setTimeFormat] = useState(detectBrowserTimeFormat);
-  const [isAvailableTimesVisible, setIsAvailableTimesVisible] = useState<boolean>();
+  const [timeFormat, setTimeFormat] = useState<TimeFormat>(detectBrowserTimeFormat);
+
+  const onTimeFormatChange = (is24Hours: boolean) => {
+    setTimeFormat(is24Hours ? TimeFormat.TWENTY_FOUR_HOUR : TimeFormat.TWELVE_HOUR);
+    setIs24hClockInLocalStorage(is24Hours);
+  };
+
  const [gateState, gateDispatcher] = useReducer(
    (state: GateState, newState: Partial<GateState>) => ({
      ...state,
@@ -315,10 +311,6 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
    setTimeZone(localStorageTimeZone() || dayjs.tz.guess());
  }, []);

-  useEffect(() => {
-    setIsAvailableTimesVisible(!!query.date);
-  }, [query.date]);
-
  // TODO: Improve this;
  useExposePlanGlobally(eventType.users.length === 1 ? eventType.users[0].plan : "PRO");

@@ -337,250 +329,118 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {

  // get dynamic user list here
  const userList = eventType.users ? eventType.users.map((user) => user.username).filter(notEmpty) : [];
-  // Recurring event sidebar requires more space
-  const maxWidth = isAvailableTimesVisible
-    ? recurringEventCount
-      ? "max-w-6xl"
-      : "max-w-5xl"
-    : recurringEventCount
-    ? "max-w-4xl"
-    : "max-w-3xl";
+
  const timezoneDropdown = useMemo(
-    () => (
-      <TimezoneDropdown
-        timeFormat={timeFormat}
-        onChangeTimeFormat={setTimeFormat}
-        timeZone={timeZone}
-        onChangeTimeZone={setTimeZone}
-      />
-    ),
-    [timeZone, timeFormat]
+    () => <TimezoneDropdown timeZone={timeZone} onChangeTimeZone={setTimeZone} />,
+    [timeZone]
  );
+  const stripeAppData = getStripeAppData(eventType);
+  const rainbowAppData = getEventTypeAppData(eventType, "rainbow") || {};
  const rawSlug = profile.slug ? profile.slug.split("/") : [];
  if (rawSlug.length > 1) rawSlug.pop(); //team events have team name as slug, but user events have [user]/[type] as slug.
-  const slug = rawSlug.join("/");

  // Define conditional gates here
  const gates = [
    // Rainbow gate is only added if the event has both a `blockchainId` and a `smartContractAddress`
-    eventType.metadata && eventType.metadata.blockchainId && eventType.metadata.smartContractAddress
+    rainbowAppData && rainbowAppData.blockchainId && rainbowAppData.smartContractAddress
      ? ("rainbow" as Gate)
      : undefined,
  ];

  return (
-    <Gates gates={gates} metadata={eventType.metadata} dispatch={gateDispatcher}>
+    <Gates gates={gates} appData={rainbowAppData} dispatch={gateDispatcher}>
      <HeadSeo
        title={`${rescheduleUid ? t("reschedule") : ""} ${eventType.title} | ${profile.name}`}
        description={`${rescheduleUid ? t("reschedule") : ""} ${eventType.title}`}
-        name={profile.name || undefined}
-        username={slug || undefined}
+        meeting={{
+          title: eventType.title,
+          profile: { name: `${profile.name}`, image: profile.image },
+          users: [
+            ...(eventType.users || []).map((user) => ({
+              name: `${user.name}`,
+              username: `${user.username}`,
+            })),
+          ],
+        }}
        nextSeoProps={{
          nofollow: eventType.hidden,
          noindex: eventType.hidden,
        }}
      />
+      <BookingPageTagManager eventType={eventType} />
      <CustomBranding lightVal={profile.brandColor} darkVal={profile.darkBrandColor} />
      <div>
        <main
          className={classNames(
-            shouldAlignCentrally ? "mx-auto" : "",
-            isEmbed
-              ? classNames(maxWidth)
-              : classNames("transition-max-width mx-auto my-0 duration-500 ease-in-out md:my-24", maxWidth)
+            "flex-col md:mx-4 lg:flex",
+            shouldAlignCentrally ? "items-center" : "items-start",
+            !isEmbed && classNames("mx-auto my-0 ease-in-out md:my-24")
          )}>
-          <div
-            style={availabilityDatePickerEmbedStyles}
-            className={classNames(
-              isBackgroundTransparent
-                ? ""
-                : "dark:bg-darkgray-100 sm:dark:border-darkgray-300 bg-white pb-4 md:pb-0",
-              "border-bookinglightest overflow-hidden rounded-md md:border",
-              isEmbed ? "mx-auto" : maxWidth
-            )}>
-            {/* mobile: details */}
-            <div className="block px-4 pt-4 sm:p-8 md:hidden">
-              <div>
-                <UserAvatars
-                  profile={profile}
-                  users={eventType.users}
-                  showMembers={eventType.schedulingType !== SchedulingType.ROUND_ROBIN}
-                  size={9}
-                  truncateAfter={5}
-                />
-                <div className="mt-4">
-                  <div className="dark:text-darkgray-900 mt-2 gap-2">
-                    <p className="break-words text-sm font-medium text-gray-600 dark:text-gray-300">
-                      {profile.name}
-                    </p>
-                    <h1 className="text-bookingdark dark:text-darkgray-900 mb-4 break-words text-xl font-semibold">
-                      {eventType.title}
-                    </h1>
-                    <div className="flex flex-col space-y-3">
-                      {eventType?.description && (
-                        <div className="dark:text-darkgray-600 flex py-1 text-sm font-medium text-gray-600">
-                          <div>
-                            <Icon.FiInfo className="mr-[10px] ml-[2px] inline-block h-4 w-4" />
-                          </div>
-                          <EventTypeDescriptionSafeHTML eventType={eventType} />
+          <div>
+            <div
+              style={availabilityDatePickerEmbedStyles}
+              className={classNames(
+                isBackgroundTransparent
+                  ? ""
+                  : "dark:bg-darkgray-100 sm:dark:border-darkgray-300 bg-white pb-4 md:pb-0",
+                "border-bookinglightest overflow-hidden md:rounded-md md:border",
+                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>
                        </div>
-                      )}
-                      {eventType?.requiresConfirmation && (
-                        <p className="dark:text-darkgray-600 text-gray-600">
-                          <Icon.FiCheckSquare className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
-                          {t("requires_confirmation")}
-                        </p>
-                      )}
-                      <AvailableEventLocations locations={eventType.locations} />
-                      <p className="dark:text-darkgray-600 text-gray-600">
-                        <Icon.FiClock className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4" />
-                        {eventType.length} {t("minutes")}
+                      </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>
-                      {eventType.price > 0 && (
-                        <div className="dark:text-darkgray-600 text-gray-600">
-                          <Icon.FiCreditCard className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
-                          <IntlProvider locale="en">
-                            <FormattedNumber
-                              value={eventType.price / 100.0}
-                              style="currency"
-                              currency={eventType.currency.toUpperCase()}
-                            />
-                          </IntlProvider>
-                        </div>
-                      )}
-                      {!rescheduleUid && eventType.recurringEvent && (
-                        <div className="dark:text-darkgray-600 flex items-center text-gray-600">
-                          <Icon.FiRefreshCcw className="float-left mr-[10px] mt-1 ml-[2px] inline-block h-4 w-4 shrink-0 text-gray-500" />
-                          <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:text-darkgray-600 h-7 rounded-sm border-gray-300 bg-white text-sm text-gray-600 [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600"
-                              defaultValue={eventType.recurringEvent.count}
-                              onChange={(event) => {
-                                setRecurringEventCount(parseInt(event?.target.value));
-                              }}
-                            />
-                            <p className="dark:text-darkgray-600 inline text-gray-600">
-                              {t("occurrence", {
-                                count: recurringEventCount,
-                              })}
-                            </p>
-                          </div>
-                        </div>
-                      )}
-                      {timezoneDropdown}
+                    )}
+                    {timezoneDropdown}
+                  </BookingDescription>

-                      <div className="md:hidden">
-                        {/* Temp disabled booking?.startTime && rescheduleUid && (
-                            <div>
-                              <p
-                                className="mt-8 text-gray-600 dark:text-darkgray-600"
-                                data-testid="former_time_p_mobile">
-                                {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" />
-                                {typeof booking.startTime === "string" &&
-                                  parseDate(dayjs(booking.startTime), i18n)}
-                              </p>
-                            </div>
-                          )*/}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div className="overflow-hidden sm:flex">
-              <div
-                className={
-                  "sm:dark:border-darkgray-200 hidden overflow-hidden border-gray-200 p-5 sm:border-r md:flex md:flex-col " +
-                  (isAvailableTimesVisible ? "sm:w-1/3" : recurringEventCount ? "sm:w-2/3" : "sm:w-1/2")
-                }>
-                <UserAvatars
-                  profile={profile}
-                  users={eventType.users}
-                  showMembers={eventType.schedulingType !== SchedulingType.ROUND_ROBIN}
-                  size={10}
-                  truncateAfter={3}
-                />
-                <h2 className="break-words text-sm font-medium text-gray-600 dark:text-gray-300 lg:mt-2">
-                  {profile.name}
-                </h2>
-                <h1 className="font-cal dark:text-darkgray-900 mb-6 break-words text-2xl text-gray-900">
-                  {eventType.title}
-                </h1>
-                <div className="dark:text-darkgray-600 flex flex-col space-y-3 text-sm font-medium text-gray-600">
-                  {eventType?.description && (
-                    <div className="flex">
-                      <div>
-                        <Icon.FiInfo className="mr-[10px] ml-[2px] inline-block h-4 w-4" />
-                      </div>
-                      <EventTypeDescriptionSafeHTML eventType={eventType} />
+                  {!isEmbed && (
+                    <div className="mt-auto hidden md:block">
+                      <GoBackToPreviousPage t={t} />
                    </div>
                  )}
-                  {eventType?.requiresConfirmation && (
-                    <div className="flex items-center">
-                      <div>
-                        <Icon.FiCheckSquare className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 " />
-                      </div>
-                      {t("requires_confirmation")}
-                    </div>
-                  )}
-                  <AvailableEventLocations locations={eventType.locations} />
-                  <p className="text-sm font-medium">
-                    <Icon.FiClock className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4" />
-                    {eventType.length} {t("minutes")}
-                  </p>
-                  {!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>
-                      </div>
-                    </div>
-                  )}
-                  {eventType.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={eventType.price / 100.0}
-                          style="currency"
-                          currency={eventType.currency.toUpperCase()}
-                        />
-                      </IntlProvider>
-                    </p>
-                  )}
-                  {timezoneDropdown}
-                </div>

-                {!isEmbed && <GoBackToPreviousPage t={t} />}
-
-                {/* Temporarily disabled - booking?.startTime && rescheduleUid && (
+                  {/* Temporarily disabled - booking?.startTime && rescheduleUid && (
                    <div>
                      <p
                        className="mt-4 mb-3 text-gray-600 dark:text-darkgray-600"
@@ -593,26 +453,34 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                      </p>
                    </div>
                  )*/}
+                </div>
+                <SlotPicker
+                  weekStart={
+                    typeof profile.weekStart === "string"
+                      ? ([
+                          "Sunday",
+                          "Monday",
+                          "Tuesday",
+                          "Wednesday",
+                          "Thursday",
+                          "Friday",
+                          "Saturday",
+                        ].indexOf(profile.weekStart) as 0 | 1 | 2 | 3 | 4 | 5 | 6)
+                      : profile.weekStart /* Allows providing weekStart as number */
+                  }
+                  eventType={eventType}
+                  timeFormat={timeFormat}
+                  onTimeFormatChange={onTimeFormatChange}
+                  timeZone={timeZone}
+                  users={userList}
+                  seatsPerTimeSlot={eventType.seatsPerTimeSlot || undefined}
+                  recurringEventCount={recurringEventCount}
+                  ethSignature={gateState.rainbowToken}
+                />
              </div>
-              <SlotPicker
-                weekStart={
-                  typeof profile.weekStart === "string"
-                    ? (["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"].indexOf(
-                        profile.weekStart
-                      ) as 0 | 1 | 2 | 3 | 4 | 5 | 6)
-                    : profile.weekStart /* Allows providing weekStart as number */
-                }
-                eventType={eventType}
-                timeFormat={timeFormat}
-                timeZone={timeZone}
-                users={userList}
-                seatsPerTimeSlot={eventType.seatsPerTimeSlot || undefined}
-                recurringEventCount={recurringEventCount}
-                ethSignature={gateState.rainbowToken}
-              />
            </div>
+            {(!eventType.users[0] || !isBrandingHidden(eventType.users[0])) && !isEmbed && <PoweredByCal />}
          </div>
-          {(!eventType.users[0] || !isBrandingHidden(eventType.users[0])) && !isEmbed && <PoweredByCal />}
        </main>
      </div>
      <Toaster position="bottom-right" />
@@ -1,6 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { EventTypeCustomInputType, WorkflowActions } from "@prisma/client";
-import { SchedulingType } from "@prisma/client";
 import { useMutation } from "@tanstack/react-query";
 import { isValidPhoneNumber } from "libphonenumber-js";
 import { useSession } from "next-auth/react";
@@ -13,13 +12,16 @@ import { ReactMultiEmail } from "react-multi-email";
 import { v4 as uuidv4 } from "uuid";
 import { z } from "zod";

+import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
 import {
  locationKeyToString,
  getEventLocationValue,
  getEventLocationType,
  EventLocationType,
+  getHumanReadableLocationValue,
 } from "@calcom/app-store/locations";
 import { createPaymentLink } from "@calcom/app-store/stripepayment/lib/client";
+import { getEventTypeAppData } from "@calcom/app-store/utils";
 import { LocationObject, LocationType } from "@calcom/core/location";
 import dayjs from "@calcom/dayjs";
 import {
@@ -29,6 +31,8 @@ import {
 } from "@calcom/embed-core/embed-iframe";
 import CustomBranding from "@calcom/lib/CustomBranding";
 import classNames from "@calcom/lib/classNames";
+import { formatTime } from "@calcom/lib/date-fns";
+import getStripeAppData from "@calcom/lib/getStripeAppData";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { HttpError } from "@calcom/lib/http-error";
@@ -43,14 +47,14 @@ import { Button } from "@calcom/ui/v2";
 import { asStringOrNull } from "@lib/asStringOrNull";
 import { timeZone } from "@lib/clock";
 import { ensureArray } from "@lib/ensureArray";
+import useMeQuery from "@lib/hooks/useMeQuery";
 import createBooking from "@lib/mutations/bookings/create-booking";
 import createRecurringBooking from "@lib/mutations/bookings/create-recurring-booking";
 import { parseDate, parseRecurringDates } from "@lib/parseDate";
 import slugify from "@lib/slugify";

 import Gates, { Gate, GateState } from "@components/Gates";
-import { UserAvatars } from "@components/booking/UserAvatars";
-import EventTypeDescriptionSafeHTML from "@components/eventtype/EventTypeDescriptionSafeHTML";
+import BookingDescription from "@components/booking/BookingDescription";

 import { BookPageProps } from "../../../pages/[user]/book";
 import { HashLinkPageProps } from "../../../pages/d/[link]/book";
@@ -81,9 +85,13 @@ const BookingPage = ({
  recurringEventCount,
  hasHashedBookingLink,
  hashedLink,
+  ...restProps
 }: BookingPageProps) => {
  const { t, i18n } = useLocale();
-  const isEmbed = useIsEmbed();
+  // Get user so we can determine 12/24 hour format preferences
+  const query = useMeQuery();
+  const user = query.data;
+  const isEmbed = useIsEmbed(restProps.isEmbed);
  const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
  const shouldAlignCentrally = !isEmbed || shouldAlignCentrallyInEmbed;
  const router = useRouter();
@@ -97,6 +105,7 @@ const BookingPage = ({
    }),
    {}
  );
+  const stripeAppData = getStripeAppData(eventType);

  useEffect(() => {
    if (top !== window) {
@@ -111,14 +120,14 @@ const BookingPage = ({

  const mutation = useMutation(createBooking, {
    onSuccess: async (responseData) => {
-      const { id, attendees, paymentUid } = responseData;
+      const { id, paymentUid } = responseData;
      if (paymentUid) {
        return await router.push(
          createPaymentLink({
            paymentUid,
            date,
-            name: attendees[0].name,
-            email: attendees[0].email,
+            name: bookingForm.getValues("name"),
+            email: bookingForm.getValues("email"),
            absolute: false,
          })
        );
@@ -130,10 +139,10 @@ const BookingPage = ({
          date,
          type: eventType.id,
          eventSlug: eventType.slug,
-          user: profile.slug,
+          username: profile.slug,
          reschedule: !!rescheduleUid,
-          name: attendees[0].name,
-          email: attendees[0].email,
+          name: bookingForm.getValues("name"),
+          email: bookingForm.getValues("email"),
          location: responseData.location,
          eventName: profile.eventName || "",
          bookingId: id,
@@ -163,7 +172,7 @@ const BookingPage = ({
          type: eventType.id,
          eventSlug: eventType.slug,
          recur: recurringEventId,
-          user: profile.slug,
+          username: profile.slug,
          reschedule: !!rescheduleUid,
          name: attendees[0].name,
          email: attendees[0].email,
@@ -258,11 +267,13 @@ const BookingPage = ({
      phone: z
        .string()
        .refine((val) => isValidPhoneNumber(val))
-        .optional(),
+        .optional()
+        .nullable(),
      smsReminderNumber: z
        .string()
        .refine((val) => isValidPhoneNumber(val))
-        .optional(),
+        .optional()
+        .nullable(),
    })
    .passthrough();

@@ -354,7 +365,9 @@ const BookingPage = ({
        hasHashedBookingLink,
        hashedLink,
        smsReminderNumber:
-          selectedLocationType === LocationType.Phone ? booking.phone : booking.smsReminderNumber,
+          selectedLocationType === LocationType.Phone
+            ? booking.phone
+            : booking.smsReminderNumber || undefined,
        ethSignature: gateState.rainbowToken,
      }));
      recurringMutation.mutate(recurringBookings);
@@ -382,7 +395,9 @@ const BookingPage = ({
        hasHashedBookingLink,
        hashedLink,
        smsReminderNumber:
-          selectedLocationType === LocationType.Phone ? booking.phone : booking.smsReminderNumber,
+          selectedLocationType === LocationType.Phone
+            ? booking.phone
+            : booking.smsReminderNumber || undefined,
        ethSignature: gateState.rainbowToken,
      });
    }
@@ -396,6 +411,7 @@ const BookingPage = ({
    "dark:placeholder:text-darkgray-600 focus:border-brand dark:border-darkgray-300 dark:text-darkgray-900 block w-full rounded-md border-gray-300 text-sm focus:ring-black disabled:bg-gray-200 disabled:hover:cursor-not-allowed dark:bg-transparent dark:selection:bg-green-500 disabled:dark:text-gray-500";

  let isSmsReminderNumberNeeded = false;
+  let isSmsReminderNumberRequired = false;

  if (eventType.workflows.length > 0) {
    eventType.workflows.forEach((workflowReference) => {
@@ -403,23 +419,25 @@ const BookingPage = ({
        workflowReference.workflow.steps.forEach((step) => {
          if (step.action === WorkflowActions.SMS_ATTENDEE) {
            isSmsReminderNumberNeeded = true;
+            isSmsReminderNumberRequired = step.numberRequired || false;
            return;
          }
        });
      }
    });
  }
+  const rainbowAppData = getEventTypeAppData(eventType, "rainbow") || {};

  // Define conditional gates here
  const gates = [
    // Rainbow gate is only added if the event has both a `blockchainId` and a `smartContractAddress`
-    eventType.metadata && eventType.metadata.blockchainId && eventType.metadata.smartContractAddress
+    rainbowAppData && rainbowAppData.blockchainId && rainbowAppData.smartContractAddress
      ? ("rainbow" as Gate)
      : undefined,
  ];

  return (
-    <Gates gates={gates} metadata={eventType.metadata} dispatch={gateDispatcher}>
+    <Gates gates={gates} appData={rainbowAppData} dispatch={gateDispatcher}>
      <Head>
        <title>
          {rescheduleUid
@@ -435,6 +453,7 @@ const BookingPage = ({
        </title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
+      <BookingPageTagManager eventType={eventType} />
      <CustomBranding lightVal={profile.brandColor} darkVal={profile.darkBrandColor} />
      <main
        className={classNames(
@@ -450,48 +469,15 @@ const BookingPage = ({
          )}>
          <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">
-              <UserAvatars
-                profile={profile}
-                users={eventType.users}
-                showMembers={eventType.schedulingType !== SchedulingType.ROUND_ROBIN}
-                size={10}
-                truncateAfter={3}
-              />
-              <h2 className="mt-2 break-words text-sm font-medium text-gray-500 dark:text-gray-300">
-                {profile.name}
-              </h2>
-              <h1 className="font-cal dark:text-darkgray-900 break-words text-2xl text-gray-900 ">
-                {eventType.title}
-              </h1>
-              <div className="mt-4 flex flex-col space-y-3 lg:mt-9">
-                {eventType?.description && (
-                  <div className="dark:text-darkgray-600 flex text-sm font-medium text-gray-600">
-                    <div>
-                      <Icon.FiInfo className="dark:text-darkgray-600 mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-500" />
-                    </div>
-                    <EventTypeDescriptionSafeHTML eventType={eventType} />
-                  </div>
-                )}
-                {eventType?.requiresConfirmation && (
-                  <div className="dark:text-darkgray-600 flex items-center text-sm font-medium text-gray-600">
-                    <div>
-                      <Icon.FiCheckSquare className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 " />
-                    </div>
-                    {t("requires_confirmation")}
-                  </div>
-                )}
-                <p className="dark:text-darkgray-600 text-sm font-medium text-gray-600">
-                  <Icon.FiClock className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4" />
-                  {eventType.length} {t("minutes")}
-                </p>
-                {eventType.price > 0 && (
+              <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={eventType.price / 100.0}
+                        value={stripeAppData.price / 100.0}
                        style="currency"
-                        currency={eventType.currency.toUpperCase()}
+                        currency={stripeAppData.currency.toUpperCase()}
                      />
                    </IntlProvider>
                  </p>
@@ -512,15 +498,25 @@ const BookingPage = ({
                  <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(dayjs(date).tz(timeZone()), i18n)}
+                      `${formatTime(dayjs(date).toDate(), user?.timeFormat, user?.timeZone)}, ${dayjs(
+                        date
+                      ).format("dddd, D MMMM YYYY")}`}
                    {!rescheduleUid &&
                      eventType.recurringEvent?.freq &&
-                      recurringStrings.slice(0, 5).map((aDate, key) => <p key={key}>{aDate}</p>)}
+                      recurringDates.slice(0, 5).map((aDate, key) => {
+                        return (
+                          <p key={key}>{`${formatTime(aDate, user?.timeFormat, user?.timeZone)}, ${dayjs(
+                            aDate
+                          ).format("dddd, D MMMM YYYY")}`}</p>
+                        );
+                      })}
                    {!rescheduleUid && eventType.recurringEvent?.freq && recurringStrings.length > 5 && (
                      <div className="flex">
                        <Tooltip
-                          content={recurringStrings.slice(5).map((aDate, key) => (
-                            <p key={key}>{aDate}</p>
+                          content={recurringDates.slice(5).map((aDate, key) => (
+                            <p key={key}>{`${formatTime(aDate, user?.timeFormat, user?.timeZone)}, ${dayjs(
+                              aDate
+                            ).format("dddd, D MMMM YYYY")}`}</p>
                          ))}>
                          <p className="dark:text-darkgray-600 text-sm">
                            {t("plus_more", { count: recurringStrings.length - 5 })}
@@ -543,7 +539,15 @@ const BookingPage = ({
                )}
                {!!eventType.seatsPerTimeSlot && (
                  <div className="text-bookinghighlight flex items-start text-sm">
-                    <Icon.FiUser className="mr-[10px] ml-[2px] mt-[2px] inline-block h-4 w-4" />
+                    <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
@@ -559,7 +563,7 @@ const BookingPage = ({
                    </p>
                  </div>
                )}
-              </div>
+              </BookingDescription>
            </div>
            <div className="p-6 sm:w-1/2">
              <Form form={bookingForm} handleSubmit={bookEvent}>
@@ -604,37 +608,51 @@ const BookingPage = ({
                    )}
                  </div>
                </div>
-                {locations.length > 1 && (
-                  <div className="mb-4">
-                    <span className="block text-sm font-medium text-gray-700 dark:text-white">
-                      {t("location")}
-                    </span>
-                    {locations.map((location, i) => {
-                      const locationString = locationKeyToString(location);
-                      // TODO: Right now selectedLocationType isn't send by getSSP. Once that's available defaultChecked should work and show the location in the original booking
-                      const defaultChecked = rescheduleUid ? selectedLocationType === location.type : i === 0;
-                      if (typeof locationString !== "string") {
-                        // It's possible that location app got uninstalled
-                        return null;
-                      }
-                      return (
-                        <label key={i} className="block">
-                          <input
-                            type="radio"
-                            disabled={!!disableLocations}
-                            className="location dark:bg-darkgray-300 dark:border-darkgray-300 h-4 w-4 border-gray-300 text-black focus:ring-black ltr:mr-2 rtl:ml-2"
-                            {...bookingForm.register("locationType", { required: true })}
-                            value={location.type}
-                            defaultChecked={defaultChecked}
-                          />
-                          <span className="text-sm ltr:ml-2 rtl:mr-2 dark:text-white">
-                            {locationKeyToString(location)}
-                          </span>
-                        </label>
-                      );
-                    })}
-                  </div>
-                )}
+                <>
+                  {rescheduleUid ? (
+                    <div className="mb-4">
+                      <span className="block text-sm font-medium text-gray-700 dark:text-white">
+                        {t("location")}
+                      </span>
+                      <p className="mt-1 text-sm text-gray-500">
+                        {getHumanReadableLocationValue(booking?.location, t)}
+                      </p>
+                    </div>
+                  ) : (
+                    locations.length > 1 && (
+                      <div className="mb-4">
+                        <span className="block text-sm font-medium text-gray-700 dark:text-white">
+                          {t("location")}
+                        </span>
+                        {locations.map((location, i) => {
+                          const locationString = locationKeyToString(location);
+                          if (!selectedLocationType) {
+                            bookingForm.setValue("locationType", locations[0].type);
+                          }
+                          if (typeof locationString !== "string") {
+                            // It's possible that location app got uninstalled
+                            return null;
+                          }
+                          return (
+                            <label key={i} className="block">
+                              <input
+                                type="radio"
+                                disabled={!!disableLocations}
+                                className="location dark:bg-darkgray-300 dark:border-darkgray-300 h-4 w-4 border-gray-300 text-black focus:ring-black ltr:mr-2 rtl:ml-2"
+                                {...bookingForm.register("locationType", { required: true })}
+                                value={location.type}
+                                defaultChecked={i === 0}
+                              />
+                              <span className="text-sm ltr:ml-2 rtl:mr-2 dark:text-white">
+                                {locationKeyToString(location)}
+                              </span>
+                            </label>
+                          );
+                        })}
+                      </div>
+                    )
+                  )}
+                </>
                {/* TODO: Change name and id ="phone" to something generic */}
                {AttendeeInput && (
                  <div className="mb-4">
@@ -712,23 +730,25 @@ const BookingPage = ({
                        />
                      )}
                      {input.type === EventTypeCustomInputType.BOOL && (
-                        <div className="flex h-5 items-center">
-                          <input
-                            type="checkbox"
-                            {...bookingForm.register(`customInputs.${input.id}`, {
-                              required: input.required,
-                            })}
-                            required={input.required}
-                            id={"custom_" + input.id}
-                            className="h-4 w-4 rounded border-gray-300 text-black focus:ring-black disabled:bg-gray-200 ltr:mr-2 rtl:ml-2 disabled:dark:text-gray-500"
-                            placeholder=""
-                            disabled={disabledExceptForOwner}
-                          />
-                          <label
-                            htmlFor={"custom_" + input.id}
-                            className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
-                            {input.label}
-                          </label>
+                        <div className="my-6">
+                          <div className="flex">
+                            <input
+                              type="checkbox"
+                              {...bookingForm.register(`customInputs.${input.id}`, {
+                                required: input.required,
+                              })}
+                              required={input.required}
+                              id={"custom_" + input.id}
+                              className="h-4 w-4 rounded border-gray-300 text-black focus:ring-black disabled:bg-gray-200 ltr:mr-2 rtl:ml-2 disabled:dark:text-gray-500"
+                              placeholder=""
+                              disabled={disabledExceptForOwner}
+                            />
+                            <label
+                              htmlFor={"custom_" + input.id}
+                              className="-mt-px block text-sm font-medium text-gray-700 dark:text-white">
+                              {input.label}
+                            </label>
+                          </div>
                        </div>
                      )}
                    </div>
@@ -792,7 +812,7 @@ const BookingPage = ({
                    <label
                      htmlFor="smsReminderNumber"
                      className="block text-sm font-medium text-gray-700 dark:text-white">
-                      {t("number_for_sms_reminders")}
+                      {t("number_sms_notifications")}
                    </label>
                    <div className="mt-1">
                      <PhoneInput<BookingFormValues>
@@ -800,7 +820,7 @@ const BookingPage = ({
                        name="smsReminderNumber"
                        placeholder={t("enter_phone_number")}
                        id="smsReminderNumber"
-                        required
+                        required={isSmsReminderNumberRequired}
                      />
                    </div>
                    {bookingForm.formState.errors.smsReminderNumber && (
@@ -829,6 +849,7 @@ const BookingPage = ({
                  ) : (
                    <textarea
                      {...bookingForm.register("notes")}
+                      required={!!eventType.metadata.additionalNotesRequired}
                      id="notes"
                      name="notes"
                      rows={3}
@@ -1,16 +1,12 @@
-import { useMutation } from "@tanstack/react-query";
-import { RescheduleResponse } from "pages/api/book/request-reschedule";
 import React, { useState, Dispatch, SetStateAction } from "react";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import showToast from "@calcom/lib/notification";
 import { trpc } from "@calcom/trpc/react";
 import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
 import { Icon } from "@calcom/ui/Icon";
 import { TextArea } from "@calcom/ui/form/fields";
 import Button from "@calcom/ui/v2/core/Button";
-
-import * as fetchWrapper from "@lib/core/http/fetch-wrapper";
+import showToast from "@calcom/ui/v2/core/notifications";

 interface IRescheduleDialog {
  isOpenDialog: boolean;
@@ -23,35 +19,18 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
  const utils = trpc.useContext();
  const { isOpenDialog, setIsOpenDialog, bookingUId: bookingId } = props;
  const [rescheduleReason, setRescheduleReason] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const rescheduleApi = useMutation(
-    async () => {
-      setIsLoading(true);
-      try {
-        const result = await fetchWrapper.post<
-          { bookingId: string; rescheduleReason: string },
-          RescheduleResponse
-        >("/api/book/request-reschedule", {
-          bookingId,
-          rescheduleReason,
-        });

-        if (result) {
-          showToast(t("reschedule_request_sent"), "success");
-          setIsOpenDialog(false);
-        }
-      } catch (error) {
-        showToast(t("unexpected_error_try_again"), "error");
-        // @TODO: notify sentry
-      }
-      setIsLoading(false);
+  const { mutate: rescheduleApi, isLoading } = trpc.useMutation("viewer.bookings.requestReschedule", {
+    async onSuccess() {
+      showToast(t("reschedule_request_sent"), "success");
+      setIsOpenDialog(false);
+      await utils.invalidateQueries(["viewer.bookings"]);
    },
-    {
-      async onSettled() {
-        await utils.invalidateQueries(["viewer.bookings"]);
-      },
-    }
-  );
+    onError() {
+      showToast(t("unexpected_error_try_again"), "error");
+      // @TODO: notify sentry
+    },
+  });

  return (
    <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
@@ -84,7 +63,10 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
                data-testid="send_request"
                disabled={isLoading}
                onClick={() => {
-                  rescheduleApi.mutate();
+                  rescheduleApi({
+                    bookingId,
+                    rescheduleReason,
+                  });
                }}>
                {t("send_reschedule_request")}
              </Button>
@@ -9,7 +9,6 @@ import type { z } from "zod";
 import classNames from "@calcom/lib/classNames";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import showToast from "@calcom/lib/notification";
 import { createEventTypeInput } from "@calcom/prisma/zod/custom/eventtype";
 import { trpc } from "@calcom/trpc/react";
 import { Alert } from "@calcom/ui/Alert";
@@ -24,6 +23,7 @@ import Dropdown, {
 } from "@calcom/ui/Dropdown";
 import { Icon } from "@calcom/ui/Icon";
 import { Form, InputLeading, TextAreaField, TextField } from "@calcom/ui/form/fields";
+import showToast from "@calcom/ui/v2/core/notifications";

 import { HttpError } from "@lib/core/http/error";
 import { slugify } from "@lib/slugify";
@@ -1,89 +0,0 @@
-import { Prisma, SchedulingType } from "@prisma/client";
-import { useMemo } from "react";
-import { FormattedNumber, IntlProvider } from "react-intl";
-
-import { parseRecurringEvent } from "@calcom/lib";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { baseEventTypeSelect } from "@calcom/prisma/selects";
-import { Icon } from "@calcom/ui/Icon";
-
-import classNames from "@lib/classNames";
-
-const eventTypeData = Prisma.validator<Prisma.EventTypeArgs>()({
-  select: baseEventTypeSelect,
-});
-
-type EventType = Prisma.EventTypeGetPayload<typeof eventTypeData>;
-
-export type EventTypeDescriptionProps = {
-  eventType: EventType;
-  className?: string;
-};
-
-export const EventTypeDescription = ({ eventType, className }: EventTypeDescriptionProps) => {
-  const { t } = useLocale();
-
-  const recurringEvent = useMemo(
-    () => parseRecurringEvent(eventType.recurringEvent),
-    [eventType.recurringEvent]
-  );
-
-  return (
-    <>
-      <div className={classNames("text-gray-600 dark:text-white", className)}>
-        {eventType.description && (
-          <h2 className="max-w-[280px] overflow-hidden text-ellipsis sm:max-w-[500px]">
-            {eventType.description.substring(0, 100)}
-            {eventType.description.length > 100 && "..."}
-          </h2>
-        )}
-        <ul className="mt-2 flex flex-wrap space-x-1 sm:flex-nowrap ">
-          <li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800 dark:bg-gray-900 dark:text-white">
-            <Icon.FiClock className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
-            {eventType.length} {t("minutes")}
-          </li>
-          {eventType.schedulingType ? (
-            <li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800 dark:bg-gray-900 dark:text-white">
-              <Icon.FiUsers className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
-              {eventType.schedulingType === SchedulingType.ROUND_ROBIN && t("round_robin")}
-              {eventType.schedulingType === SchedulingType.COLLECTIVE && t("collective")}
-            </li>
-          ) : (
-            <li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800 dark:bg-gray-900 dark:text-white">
-              <Icon.FiUser className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
-              {t("1_on_1")}
-            </li>
-          )}
-          {recurringEvent?.count && recurringEvent.count > 0 && (
-            <li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800 dark:bg-gray-900 dark:text-white">
-              <Icon.FiRefreshCw className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
-              {t("repeats_up_to", {
-                count: recurringEvent.count,
-              })}
-            </li>
-          )}
-          {eventType.price > 0 && (
-            <li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800 dark:bg-gray-900 dark:text-white">
-              <Icon.FiCreditCard className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
-              <IntlProvider locale="en">
-                <FormattedNumber
-                  value={eventType.price / 100.0}
-                  style="currency"
-                  currency={eventType.currency.toUpperCase()}
-                />
-              </IntlProvider>
-            </li>
-          )}
-          {eventType.requiresConfirmation && (
-            <li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800 dark:bg-gray-900 dark:text-white">
-              <Icon.FiCheckSquare className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
-              {t("requires_confirmation")}
-            </li>
-          )}
-        </ul>
-      </div>
-    </>
-  );
-};
-
-export default EventTypeDescription;
@@ -1,145 +0,0 @@
-import type { FormValues } from "pages/event-types/[type]";
-import { useState } from "react";
-import { UseFormReturn } from "react-hook-form";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Frequency } from "@calcom/prisma/zod-utils";
-import type { RecurringEvent } from "@calcom/types/Calendar";
-import { Alert } from "@calcom/ui/Alert";
-
-import Select from "@components/ui/form/Select";
-
-type RecurringEventControllerProps = {
-  recurringEvent: RecurringEvent | null;
-  formMethods: UseFormReturn<FormValues>;
-  paymentEnabled: boolean;
-  onRecurringEventDefined: (value: boolean) => void;
-};
-
-/**
- * @deprecated
- * use component from `/apps/web/components/v2/eventtype/RecurringEventController` instead
- **/
-export default function RecurringEventController({
-  recurringEvent,
-  formMethods,
-  paymentEnabled,
-  onRecurringEventDefined,
-}: RecurringEventControllerProps) {
-  const { t } = useLocale();
-  const [recurringEventState, setRecurringEventState] = useState<RecurringEvent | null>(recurringEvent);
-
-  /* Just yearly-0, monthly-1 and weekly-2 */
-  const recurringEventFreqOptions = Object.entries(Frequency)
-    .filter(([key, value]) => isNaN(Number(key)) && Number(value) < 3)
-    .map(([key, value]) => ({
-      label: t(`${key.toString().toLowerCase()}`, { count: recurringEventState?.interval }),
-      value: value.toString(),
-    }));
-
-  return (
-    <div className="block items-start sm:flex">
-      <div className="min-w-48 mb-4 sm:mb-0">
-        <span className="flex text-sm font-medium text-neutral-700">{t("recurring_event")}</span>
-      </div>
-      <div className={!paymentEnabled ? "w-full" : ""}>
-        {paymentEnabled ? (
-          <Alert severity="warning" title={t("warning_payment_recurring_event")} />
-        ) : (
-          <>
-            <div className="flex items-start">
-              <div className="flex h-5 items-start">
-                <input
-                  onChange={(event) => {
-                    onRecurringEventDefined(event?.target.checked);
-                    if (!event?.target.checked) {
-                      formMethods.setValue("recurringEvent", null);
-                      setRecurringEventState(null);
-                    } else {
-                      const newVal = recurringEvent || {
-                        interval: 1,
-                        count: 12,
-                        freq: Frequency.WEEKLY,
-                      };
-                      formMethods.setValue("recurringEvent", newVal);
-                      setRecurringEventState(newVal);
-                    }
-                  }}
-                  type="checkbox"
-                  className="text-primary-600  h-4 w-4 rounded border-gray-300"
-                  defaultChecked={recurringEventState !== null}
-                  data-testid="recurring-event-check"
-                  id="recurringEvent"
-                />
-              </div>
-              <div className="text-sm ltr:ml-3 rtl:mr-3">
-                <label htmlFor="recurringEvent" className="text-neutral-900">
-                  {t("recurring_event_description")}
-                </label>
-              </div>
-            </div>
-            {recurringEventState && (
-              <div data-testid="recurring-event-collapsible" className="mt-4 text-sm">
-                <div className="flex items-center">
-                  <p className="mr-2 text-neutral-900">{t("repeats_every")}</p>
-                  <input
-                    type="number"
-                    min="1"
-                    max="20"
-                    className="block w-16 rounded-sm border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
-                    defaultValue={recurringEventState.interval}
-                    onChange={(event) => {
-                      const newVal = {
-                        ...recurringEventState,
-                        interval: parseInt(event?.target.value),
-                      };
-                      formMethods.setValue("recurringEvent", newVal);
-                      setRecurringEventState(newVal);
-                    }}
-                  />
-                  <Select
-                    options={recurringEventFreqOptions}
-                    value={recurringEventFreqOptions[recurringEventState.freq]}
-                    isSearchable={false}
-                    className="w-18 block min-w-0 rounded-sm text-sm"
-                    onChange={(event) => {
-                      const newVal = {
-                        ...recurringEventState,
-                        freq: parseInt(event?.value || `${Frequency.WEEKLY}`),
-                      };
-                      formMethods.setValue("recurringEvent", newVal);
-                      setRecurringEventState(newVal);
-                    }}
-                  />
-                </div>
-                <div className="mt-4 flex items-center">
-                  <p className="mr-2 text-neutral-900">{t("max")}</p>
-                  <input
-                    type="number"
-                    min="1"
-                    max="20"
-                    className="block w-16 rounded-sm border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
-                    defaultValue={recurringEventState.count}
-                    onChange={(event) => {
-                      const newVal = {
-                        ...recurringEventState,
-                        count: parseInt(event?.target.value),
-                      };
-                      formMethods.setValue("recurringEvent", newVal);
-                      setRecurringEventState(newVal);
-                    }}
-                  />
-                  <p className="mr-2 text-neutral-900">
-                    {t("occurrence", {
-                      count: recurringEventState.count,
-                    })}
-                  </p>
-                </div>
-              </div>
-            )}
-          </>
-        )}
-      </div>
-    </div>
-  );
-}
@@ -1,8 +1,8 @@
 import { useMutation } from "@tanstack/react-query";

-import showToast from "@calcom/lib/notification";
 import { trpc } from "@calcom/trpc/react";
 import { Switch } from "@calcom/ui/v2";
+import showToast from "@calcom/ui/v2/core/notifications";

 import classNames from "@lib/classNames";

@@ -22,12 +22,12 @@ const Steps = (props: ISteps) => {
              key={`step-${index}`}
              onClick={() => navigateToStep(index)}
              className={classNames(
-                "h-1 w-1/4 rounded-[1px] bg-black dark:bg-white",
+                "h-1 w-full rounded-[1px] bg-black dark:bg-white",
                index < currentStep ? "cursor-pointer" : ""
              )}
            />
          ) : (
-            <div key={`step-${index}`} className="h-1 w-1/4 rounded-[1px] bg-black bg-opacity-25" />
+            <div key={`step-${index}`} className="h-1 w-full rounded-[1px] bg-black bg-opacity-25" />
          );
        })}
      </div>
@@ -3,7 +3,6 @@ import { Fragment } from "react";

 import { InstallAppButton } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import showToast from "@calcom/lib/notification";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import { Alert } from "@calcom/ui/Alert";
 import Button from "@calcom/ui/Button";
@@ -11,6 +10,7 @@ import { List } from "@calcom/ui/List";
 import { ShellSubHeading } from "@calcom/ui/Shell";
 import Switch from "@calcom/ui/Switch";
 import SkeletonLoader from "@calcom/ui/apps/SkeletonLoader";
+import showToast from "@calcom/ui/v2/core/notifications";

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

@@ -1,11 +1,11 @@
 import { useState } from "react";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import showToast from "@calcom/lib/notification";
 import { trpc } from "@calcom/trpc/react";
 import { ButtonBaseProps } from "@calcom/ui/Button";
 import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent";
 import { Dialog } from "@calcom/ui/Dialog";
+import showToast from "@calcom/ui/v2/core/notifications";

 export default function DisconnectIntegration(props: {
  /** Integration credential id */
@@ -1,9 +1,9 @@
 import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";

-import showToast from "@calcom/lib/notification";
 import { ButtonBaseProps } from "@calcom/ui/Button";
 import { Dialog } from "@calcom/ui/Dialog";
+import showToast from "@calcom/ui/v2/core/notifications";

 import DeleteStripeDialogContent from "@components/dialog/DeleteStripeDialogContent";

@@ -2,8 +2,8 @@ import React, { SyntheticEvent, useState } from "react";

 import { ErrorCode } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import showToast from "@calcom/lib/notification";
 import Button from "@calcom/ui/Button";
+import showToast from "@calcom/ui/v2/core/notifications";

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

 const DisableUserImpersonation = ({ disableImpersonation }: { disableImpersonation: boolean }) => {
  const utils = trpc.useContext();
@@ -1,6 +1,14 @@
 import merge from "lodash/merge";
 import { NextSeo, NextSeoProps } from "next-seo";
-import React from "react";
+
+import {
+  AppImageProps,
+  constructAppImage,
+  constructGenericImage,
+  constructMeetingImage,
+  MeetingImageProps,
+} from "@calcom/lib/OgImages";
+import { truncate, truncateOnWord } from "@calcom/lib/text";

 import { getSeoImage, seoConfig } from "@lib/config/next-seo.config";
 import { getBrowserInfo } from "@lib/core/browser/browser.utils";
@@ -9,11 +17,11 @@ export type HeadSeoProps = {
  title: string;
  description: string;
  siteName?: string;
-  name?: string;
  url?: string;
-  username?: string;
  canonical?: string;
  nextSeoProps?: NextSeoProps;
+  app?: AppImageProps;
+  meeting?: MeetingImageProps;
 };

 /**
@@ -63,32 +71,14 @@ const buildSeoMeta = (pageProps: {
  };
 };

-const constructImage = (name: string, description: string, username: string): string => {
-  return (
-    encodeURIComponent("Meet **" + name + "** <br>" + description).replace(/'/g, "%27") +
-    ".png?md=1&images=https%3A%2F%2Fcal.com%2Flogo-white.svg&images=" +
-    (process.env.NEXT_PUBLIC_WEBSITE_URL || process.env.NEXT_PUBLIC_WEBAPP_URL) +
-    "/" +
-    username +
-    "/avatar.png"
-  );
-};
-
 export const HeadSeo = (props: HeadSeoProps): JSX.Element => {
  const defaultUrl = getBrowserInfo()?.url;
-  const image = getSeoImage("default");

-  const {
-    title,
-    description,
-    name = null,
-    username = null,
-    siteName,
-    canonical = defaultUrl,
-    nextSeoProps = {},
-  } = props;
+  const { title, description, siteName, canonical = defaultUrl, nextSeoProps = {}, app, meeting } = props;
+
+  const image = getSeoImage("ogImage") + constructGenericImage({ title, description });
+  const truncatedDescription = truncateOnWord(description, 158);

-  const truncatedDescription = description.length > 24 ? description.substring(0, 23) + "..." : description;
  const pageTitle = title + " | Cal.com";
  let seoObject = buildSeoMeta({
    title: pageTitle,
@@ -98,8 +88,20 @@ export const HeadSeo = (props: HeadSeoProps): JSX.Element => {
    siteName,
  });

-  if (name && username) {
-    const pageImage = getSeoImage("ogImage") + constructImage(name, truncatedDescription, username);
+  if (meeting) {
+    const pageImage = getSeoImage("ogImage") + constructMeetingImage(meeting);
+    seoObject = buildSeoMeta({
+      title: pageTitle,
+      description: truncatedDescription,
+      image: pageImage,
+      canonical,
+      siteName,
+    });
+  }
+
+  if (app) {
+    const pageImage =
+      getSeoImage("ogImage") + constructAppImage({ ...app, description: truncatedDescription });
    seoObject = buildSeoMeta({
      title: pageTitle,
      description: truncatedDescription,
@@ -1,8 +1,8 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import showToast from "@calcom/lib/notification";
 import { trpc } from "@calcom/trpc/react";
 import Badge from "@calcom/ui/Badge";
 import Button from "@calcom/ui/Button";
+import showToast from "@calcom/ui/v2/core/notifications";

 /** @deprecated Use `packages/features/ee/teams/components/DisableTeamImpersonation.tsx` */
 const DisableTeamImpersonation = ({ teamId, memberId }: { teamId: number; memberId: number }) => {
@@ -6,7 +6,6 @@ import { useState } from "react";
 import TeamAvailabilityModal from "@calcom/features/ee/teams/components/TeamAvailabilityModal";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import showToast from "@calcom/lib/notification";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent";
@@ -19,6 +18,7 @@ import Dropdown, {
 } from "@calcom/ui/Dropdown";
 import { Icon } from "@calcom/ui/Icon";
 import { Tooltip } from "@calcom/ui/Tooltip";
+import showToast from "@calcom/ui/v2/core/notifications";

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

@@ -153,7 +153,7 @@ export default function TeamListItem(props: Props) {
                  />
                </Tooltip>
                <Dropdown>
-                  <DropdownMenuTrigger asChild>
+                  <DropdownMenuTrigger asChild className="radix-state-open:rounded-r-md">
                    <Button type="button" color="secondary" size="icon" StartIcon={Icon.FiMoreHorizontal} />
                  </DropdownMenuTrigger>
                  <DropdownMenuContent hidden={hideDropdown}>
@@ -1,7 +1,6 @@
 import React, { useRef, useState } from "react";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import showToast from "@calcom/lib/notification";
 import { objectKeys } from "@calcom/lib/objectKeys";
 import { TeamWithMembers } from "@calcom/lib/server/queries/teams";
 import { trpc } from "@calcom/trpc/react";
@@ -9,6 +8,7 @@ import { Alert } from "@calcom/ui/Alert";
 import Button from "@calcom/ui/Button";
 import { Icon } from "@calcom/ui/Icon";
 import { TextField } from "@calcom/ui/form/fields";
+import showToast from "@calcom/ui/v2/core/notifications";

 import ImageUploader from "@components/ImageUploader";
 import SettingInputContainer from "@components/ui/SettingInputContainer";
@@ -3,12 +3,12 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import React from "react";

-import showToast from "@calcom/lib/notification";
 import { TeamWithMembers } from "@calcom/lib/server/queries/teams";
 import { trpc } from "@calcom/trpc/react";
 import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent";
 import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
 import { Icon } from "@calcom/ui/Icon";
+import showToast from "@calcom/ui/v2/core/notifications";

 import { useLocale } from "@lib/hooks/useLocale";

@@ -1,6 +1,5 @@
 import { useState } from "react";

-import showToast from "@calcom/lib/notification";
 import { trpc } from "@calcom/trpc/react";
 import { Alert } from "@calcom/ui/Alert";
 import Button from "@calcom/ui/Button";
@@ -12,6 +11,7 @@ import {
  DialogFooter,
  DialogHeader,
 } from "@calcom/ui/Dialog";
+import showToast from "@calcom/ui/v2/core/notifications";

 import { useLocale } from "@lib/hooks/useLocale";

@@ -4,16 +4,19 @@ 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 { href, children, classNameChildren, ...moreProps } = props;
+  const { target, href, children, classNameChildren, ...moreProps } = props;
  return (
    <Link href={href || ""} {...moreProps}>
-      <a className={classNameChildren}>{children}</a>
+      <a target={target || ""} className={classNameChildren}>
+        {children}
+      </a>
    </Link>
  );
 };
@@ -77,6 +77,7 @@ const TableActions: FC<Props> = ({ actions }) => {
        {actions.map((action) => {
          const button = (
            <Button
+              className="whitespace-nowrap"
              key={action.id}
              data-testid={action.id}
              href={action.href}
@@ -1,5 +1,6 @@
-import { FormValues } from "pages/v2/event-types/[type]";
+import { FormValues } from "pages/event-types/[type]";
 import { Controller, useFormContext } from "react-hook-form";
+import { SingleValueProps, OptionProps, components } from "react-select";

 import dayjs from "@calcom/dayjs";
 import classNames from "@calcom/lib/classNames";
@@ -7,8 +8,9 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { weekdayNames } from "@calcom/lib/weekday";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
+import { Badge } from "@calcom/ui/v2";
 import Button from "@calcom/ui/v2/core/Button";
-import Select from "@calcom/ui/v2/core/form/Select";
+import Select from "@calcom/ui/v2/core/form/select";
 import { SkeletonText } from "@calcom/ui/v2/core/skeleton";

 import { SelectSkeletonLoader } from "@components/v2/availability/SkeletonLoader";
@@ -16,6 +18,35 @@ import { SelectSkeletonLoader } from "@components/v2/availability/SkeletonLoader
 type AvailabilityOption = {
  label: string;
  value: number;
+  isDefault: boolean;
+};
+
+const Option = ({ ...props }: OptionProps<AvailabilityOption>) => {
+  const { label, isDefault } = props.data;
+  return (
+    <components.Option {...props}>
+      <span>{label}</span>
+      {isDefault && (
+        <Badge variant="blue" className="ml-2">
+          Default
+        </Badge>
+      )}
+    </components.Option>
+  );
+};
+
+const SingleValue = ({ ...props }: SingleValueProps<AvailabilityOption>) => {
+  const { label, isDefault } = props.data;
+  return (
+    <components.SingleValue {...props}>
+      <span>{label}</span>
+      {isDefault && (
+        <Badge variant="blue" className="ml-2">
+          Default
+        </Badge>
+      )}
+    </components.SingleValue>
+  );
 };

 const AvailabilitySelect = ({
@@ -38,6 +69,7 @@ const AvailabilitySelect = ({
  const options = schedules.map((schedule) => ({
    value: schedule.id,
    label: schedule.name,
+    isDefault: schedule.isDefault,
  }));

  const value = options.find((option) =>
@@ -53,6 +85,8 @@ const AvailabilitySelect = ({
      onChange={props.onChange}
      className={classNames("block w-full min-w-0 flex-1 rounded-sm text-sm", className)}
      value={value}
+      components={{ Option, SingleValue }}
+      isMulti={false}
    />
  );
 };
@@ -95,45 +129,50 @@ export const AvailabilityTab = () => {
        />
      </div>

-      <div className="space-y-4 rounded border p-8 py-6 pt-2">
+      <div className="space-y-4 rounded border p-4 py-6 pt-2 md:p-8">
        <ol className="table border-collapse text-sm">
          {weekdayNames(i18n.language, 1, "long").map((day, index) => {
            const isAvailable = !!filterDays(index).length;
            return (
              <li key={day} className="my-6 flex border-transparent last:mb-2">
-                <span className={classNames("w-32 font-medium", !isAvailable && "text-gray-500 opacity-50")}>
+                <span
+                  className={classNames(
+                    "w-20 font-medium sm:w-32",
+                    !isAvailable && "text-gray-500 opacity-50"
+                  )}>
                  {day}
                </span>
                {isLoading ? (
                  <SkeletonText className="block h-5 w-60" />
                ) : isAvailable ? (
-                  <div className="space-y-3">
+                  <div className="space-y-3 text-right">
                    {filterDays(index).map((dayRange, i) => (
                      <div key={i} className="flex items-center leading-4">
-                        <span className="w-28">{format(dayRange.startTime)}</span>
-                        <span className="">-</span>
+                        <span className="w-16 sm:w-28 sm:text-left">{format(dayRange.startTime)}</span>
+                        <span className="ml-4">-</span>
                        <div className="ml-6">{format(dayRange.endTime)}</div>
                      </div>
                    ))}
                  </div>
                ) : (
-                  <span className="text-gray-500 opacity-50 ">{t("unavailable")}</span>
+                  <span className="ml-6 text-gray-500 opacity-50 sm:ml-0">{t("unavailable")}</span>
                )}
              </li>
            );
          })}
        </ol>
        <hr />
-        <div className="flex justify-between">
-          <span className="flex items-center text-sm text-gray-600">
+        <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" />
            {schedule?.timeZone || <SkeletonText className="block h-5 w-32" />}
          </span>
          <Button
-            href={`/availability/${scheduleId}`}
+            href={`/availability/${schedule?.schedule.id}`}
            color="minimal"
            EndIcon={Icon.FiExternalLink}
            target="_blank"
+            className="justify-center border sm:border-0"
            rel="noopener noreferrer">
            {t("edit_availability")}
          </Button>
@@ -1,6 +1,7 @@
 import { ErrorMessage } from "@hookform/error-message";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { isValidPhoneNumber } from "libphonenumber-js";
+import { Trans } from "next-i18next";
 import { useEffect } from "react";
 import { Controller, useForm, useWatch } from "react-hook-form";
 import { z } from "zod";
@@ -24,6 +25,7 @@ import { Select } from "@calcom/ui/v2/";

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

+import { LinkText } from "@components/ui/LinkText";
 import CheckboxField from "@components/ui/form/CheckboxField";

 type BookingItem = inferQueryOutput<"viewer.bookings">["bookings"][number];
@@ -308,6 +310,17 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
            }}
          />
          {selectedLocation && LocationOptions}
+          <div className="mt-5">
+            <p className="text-sm text-gray-400">
+              <Trans i18nKey="cant_find_the_right_video_app_visit_our_app_store">
+                Can&apos;t find the right video app? Visit our
+                <LinkText href="/apps/categories/video" classNameChildren="text-blue-400" target="_blank">
+                  App Store
+                </LinkText>
+                .
+              </Trans>
+            </p>
+          </div>
          <div className="mt-4 flex justify-end space-x-2">
            <Button
              onClick={() => {
@@ -1,12 +1,13 @@
-import autoAnimate from "@formkit/auto-animate";
+import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { EventTypeCustomInput } from "@prisma/client/";
 import Link from "next/link";
-import { EventTypeSetupInfered, FormValues } from "pages/v2/event-types/[type]";
-import { useEffect, useRef, useState } from "react";
+import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
+import { useEffect, useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import short from "short-uuid";
 import { v5 as uuidv5 } from "uuid";

+import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
 import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
@@ -14,16 +15,17 @@ import { Icon } from "@calcom/ui";
 import {
  Button,
  CustomInputItem,
-  DestinationCalendarSelector,
  Dialog,
  DialogContent,
  Label,
+  SettingsToggle,
  showToast,
  Skeleton,
  Switch,
  TextField,
  Tooltip,
 } from "@calcom/ui/v2";
+import CheckboxField from "@calcom/ui/v2/core/form/Checkbox";

 import CustomInputTypeForm from "@components/v2/eventtype/CustomInputTypeForm";

@@ -40,8 +42,8 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
  const { t } = useLocale();
  const [showEventNameTip, setShowEventNameTip] = useState(false);
  const [hashedLinkVisible, setHashedLinkVisible] = useState(!!eventType.hashedLink);
+  const [redirectUrlVisible, setRedirectUrlVisible] = useState(!!eventType.successRedirectUrl);
  const [hashedUrl, setHashedUrl] = useState(eventType.hashedLink?.link);
-  const [seatsInputVisible, setSeatsInputVisible] = useState(!!eventType.seatsPerTimeSlot);
  const [customInputs, setCustomInputs] = useState<EventTypeCustomInput[]>(
    eventType.customInputs.sort((a, b) => a.id - b.id) || []
  );
@@ -49,13 +51,8 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
  const [selectedCustomInputModalOpen, setSelectedCustomInputModalOpen] = useState(false);
  const placeholderHashedLink = `${CAL_URL}/d/${hashedUrl}/${eventType.slug}`;

-  const animationRef = useRef(null);
  const seatsEnabled = formMethods.getValues("seatsPerTimeSlotEnabled");

-  useEffect(() => {
-    animationRef.current && autoAnimate(animationRef.current);
-  }, [animationRef]);
-
  const removeCustom = (index: number) => {
    formMethods.getValues("customInputs").splice(index, 1);
    customInputs.splice(index, 1);
@@ -121,80 +118,61 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
      </div>
      <hr />
      <div className="">
-        <div className="flex space-x-3 ">
-          <Switch
-            checked={customInputs.length > 0}
-            fitToHeight={true}
-            onCheckedChange={(e) => {
-              if (e && customInputs.length === 0) {
-                // Push a placeholders
-                setSelectedCustomInput(undefined);
-                setSelectedCustomInputModalOpen(true);
-              } else if (!e) {
-                setCustomInputs([]);
-                formMethods.setValue("customInputs", []);
-              }
-            }}
-          />
-          <div className="flex flex-col">
-            <Skeleton as={Label} className="text-sm font-semibold leading-none text-black">
-              {t("additional_inputs")}
-            </Skeleton>
-            <Skeleton as="p" className="-mt-2 text-sm leading-normal text-gray-600">
-              {t("additional_input_description")}
-            </Skeleton>
-          </div>
-        </div>
-        <ul className="my-4" ref={animationRef}>
-          {customInputs.map((customInput: EventTypeCustomInput, idx: number) => (
-            <CustomInputItem
-              key={idx}
-              question={customInput.label}
-              type={customInput.type}
-              required={customInput.required}
-              editOnClick={() => {
-                setSelectedCustomInput(customInput);
-                setSelectedCustomInputModalOpen(true);
-              }}
-              deleteOnClick={() => removeCustom(idx)}
-            />
-          ))}
-        </ul>
-        {customInputs.length > 0 && (
-          <Button
-            StartIcon={Icon.FiPlus}
-            color="minimal"
-            type="button"
-            onClick={() => {
+        <SettingsToggle
+          title={t("additional_inputs")}
+          description={t("additional_input_description")}
+          checked={customInputs.length > 0}
+          onCheckedChange={(e) => {
+            if (e && customInputs.length === 0) {
+              // Push a placeholders
              setSelectedCustomInput(undefined);
              setSelectedCustomInputModalOpen(true);
-            }}>
-            Add an input
-          </Button>
-        )}
+            } else if (!e) {
+              setCustomInputs([]);
+              formMethods.setValue("customInputs", []);
+            }
+          }}>
+          <ul className="my-4">
+            {customInputs.map((customInput: EventTypeCustomInput, idx: number) => (
+              <CustomInputItem
+                key={idx}
+                question={customInput.label}
+                type={customInput.type}
+                required={customInput.required}
+                editOnClick={() => {
+                  setSelectedCustomInput(customInput);
+                  setSelectedCustomInputModalOpen(true);
+                }}
+                deleteOnClick={() => removeCustom(idx)}
+              />
+            ))}
+          </ul>
+          {customInputs.length > 0 && (
+            <Button
+              StartIcon={Icon.FiPlus}
+              color="minimal"
+              type="button"
+              onClick={() => {
+                setSelectedCustomInput(undefined);
+                setSelectedCustomInputModalOpen(true);
+              }}>
+              Add an input
+            </Button>
+          )}
+        </SettingsToggle>
      </div>
      <hr />
      <Controller
        name="requiresConfirmation"
        defaultValue={eventType.requiresConfirmation}
        render={({ field: { value, onChange } }) => (
-          <div className="flex space-x-3">
-            <Switch
-              name="requireConfirmation"
-              checked={value}
-              onCheckedChange={(e) => onChange(e)}
-              disabled={seatsEnabled}
-              fitToHeight={true}
-            />
-            <div className="flex flex-col">
-              <Skeleton as={Label} className="text-sm font-semibold leading-none text-black">
-                {t("requires_confirmation")}
-              </Skeleton>
-              <Skeleton as="p" className="-mt-2 text-sm leading-normal text-gray-600">
-                {t("requires_confirmation_description")}
-              </Skeleton>
-            </div>
-          </div>
+          <SettingsToggle
+            title={t("requires_confirmation")}
+            description={t("requires_confirmation_description")}
+            checked={value}
+            onCheckedChange={(e) => onChange(e)}
+            disabled={seatsEnabled}
+          />
        )}
      />
      <hr />
@@ -203,23 +181,13 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
        control={formMethods.control}
        defaultValue={eventType.disableGuests}
        render={({ field: { value, onChange } }) => (
-          <div className="flex space-x-3 ">
-            <Switch
-              name="disableGuests"
-              fitToHeight={true}
-              checked={value}
-              onCheckedChange={(e) => onChange(e)}
-              disabled={seatsEnabled}
-            />
-            <div className="flex flex-col">
-              <Skeleton as={Label} className="text-sm font-semibold leading-none text-black">
-                {t("disable_guests")}
-              </Skeleton>
-              <Skeleton as="p" className="-mt-2 text-sm leading-normal text-gray-600">
-                {t("disable_guests_description")}
-              </Skeleton>
-            </div>
-          </div>
+          <SettingsToggle
+            title={t("disable_guests")}
+            description={t("disable_guests_description")}
+            checked={value}
+            onCheckedChange={(e) => onChange(e)}
+            disabled={seatsEnabled}
+          />
        )}
      />

@@ -228,141 +196,158 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
        name="hideCalendarNotes"
        control={formMethods.control}
        defaultValue={eventType.hideCalendarNotes}
+        render={({ field: { value, onChange } }) => (
+          <SettingsToggle
+            title={t("disable_notes")}
+            description={t("disable_notes_description")}
+            checked={value}
+            onCheckedChange={(e) => onChange(e)}
+          />
+        )}
+      />
+      <hr />
+      <Controller
+        name="metadata.additionalNotesRequired"
+        control={formMethods.control}
+        defaultValue={!!eventType.metadata.additionalNotesRequired}
        render={({ field: { value, onChange } }) => (
          <div className="flex space-x-3 ">
-            <Switch
-              name="hideCalendarNotes"
-              fitToHeight={true}
-              checked={value}
+            <SettingsToggle
+              title={t("require_additional_notes")}
+              description={t("require_additional_notes_description")}
+              checked={!!value}
              onCheckedChange={(e) => onChange(e)}
            />
-            <div className="flex flex-col">
-              <Skeleton as={Label} className="text-sm font-semibold leading-none text-black">
-                {t("disable_notes")}
-              </Skeleton>
-              <Skeleton as="p" className="-mt-2 text-sm leading-normal text-gray-600">
-                {t("disable_notes_description")}
-              </Skeleton>
-            </div>
          </div>
        )}
      />
      <hr />
      <Controller
-        name="hashedLink"
+        name="successRedirectUrl"
        control={formMethods.control}
-        defaultValue={hashedUrl}
        render={({ field: { value, onChange } }) => (
          <>
-            <div className="flex space-x-3 ">
-              <Switch
-                data-testid="hashedLinkCheck"
-                name="hashedLinkCheck"
-                fitToHeight={true}
-                defaultChecked={!!value}
-                onCheckedChange={(e) => {
-                  setHashedLinkVisible(e);
-                  onChange(e ? hashedUrl : undefined);
-                }}
-              />
-              <div className="flex flex-col">
-                <Skeleton as={Label} className="text-sm font-semibold leading-none text-black">
-                  {t("private_link")}
-                </Skeleton>
-                <Skeleton as="p" className="-mt-2 text-sm leading-normal text-gray-600">
-                  {t("private_link_description")}
-                </Skeleton>
-              </div>
-            </div>
-
-            {hashedLinkVisible && (
-              <div className="">
+            <SettingsToggle
+              title={t("redirect_success_booking")}
+              description={t("redirect_url_description")}
+              checked={redirectUrlVisible}
+              onCheckedChange={(e) => {
+                setRedirectUrlVisible(e);
+                onChange(e ? value : "");
+              }}>
+              {/* Textfield has some margin by default we remove that so we can keep consitant aligment */}
+              <div className="lg:-ml-2">
                <TextField
-                  disabled
-                  name="hashedLink"
-                  label={t("private_link_label")}
-                  data-testid="generated-hash-url"
+                  label={t("redirect_success_booking")}
+                  labelSrOnly
+                  placeholder={t("external_redirect_url")}
+                  required={redirectUrlVisible}
                  type="text"
-                  hint={t("private_link_hint")}
-                  defaultValue={placeholderHashedLink}
-                  addOnSuffix={
-                    <Tooltip
-                      content={eventType.hashedLink ? t("copy_to_clipboard") : t("enabled_after_update")}>
-                      <Button
-                        color="minimal"
-                        onClick={() => {
-                          navigator.clipboard.writeText(placeholderHashedLink);
-                          if (eventType.hashedLink) {
-                            showToast(t("private_link_copied"), "success");
-                          } else {
-                            showToast(t("enabled_after_update_description"), "warning");
-                          }
-                        }}
-                        className="hover:stroke-3 hover:bg-transparent hover:text-black"
-                        type="button">
-                        <Icon.FiCopy />
-                      </Button>
-                    </Tooltip>
-                  }
+                  defaultValue={eventType.successRedirectUrl || ""}
+                  {...formMethods.register("successRedirectUrl")}
                />
              </div>
-            )}
+            </SettingsToggle>
          </>
        )}
      />
      <hr />
+
+      <SettingsToggle
+        data-testid="hashedLinkCheck"
+        title={t("private_link")}
+        description={t("private_link_description")}
+        checked={hashedLinkVisible}
+        onCheckedChange={(e) => {
+          formMethods.setValue("hashedLink", e ? hashedUrl : undefined);
+          setHashedLinkVisible(e);
+        }}>
+        {/* Textfield has some margin by default we remove that so we can keep consitant aligment */}
+        <div className="lg:-ml-2">
+          <TextField
+            disabled
+            name="hashedLink"
+            label={t("private_link_label")}
+            data-testid="generated-hash-url"
+            labelSrOnly
+            type="text"
+            hint={t("private_link_hint")}
+            defaultValue={placeholderHashedLink}
+            addOnSuffix={
+              <Tooltip content={eventType.hashedLink ? t("copy_to_clipboard") : t("enabled_after_update")}>
+                <Button
+                  color="minimal"
+                  onClick={() => {
+                    navigator.clipboard.writeText(placeholderHashedLink);
+                    if (eventType.hashedLink) {
+                      showToast(t("private_link_copied"), "success");
+                    } else {
+                      showToast(t("enabled_after_update_description"), "warning");
+                    }
+                  }}
+                  className="hover:stroke-3 hover:bg-transparent hover:text-black"
+                  type="button">
+                  <Icon.FiCopy />
+                </Button>
+              </Tooltip>
+            }
+          />
+        </div>
+      </SettingsToggle>
+      <hr />
      <Controller
        name="seatsPerTimeSlotEnabled"
        control={formMethods.control}
        defaultValue={!!eventType.seatsPerTimeSlot}
        render={({ field: { value, onChange } }) => (
-          <div className="flex space-x-3">
-            <Switch
-              name="seatsPerTimeSlotEnabled"
-              checked={value}
-              onCheckedChange={(e) => {
-                setSeatsInputVisible(e);
-                // Enabling seats will disable guests and requiring confimation until fully supported
-                if (e) {
-                  formMethods.setValue("disableGuests", true);
-                  formMethods.setValue("requiresConfirmation", false);
-                  formMethods.setValue("seatsPerTimeSlot", 2);
-                } else {
-                  formMethods.setValue("seatsPerTimeSlot", null);
-                }
-                onChange(e);
-              }}
-              fitToHeight={true}
+          <SettingsToggle
+            title={t("offer_seats")}
+            description={t("offer_seats_description")}
+            checked={value}
+            onCheckedChange={(e) => {
+              // Enabling seats will disable guests and requiring confimation until fully supported
+              if (e) {
+                formMethods.setValue("disableGuests", true);
+                formMethods.setValue("requiresConfirmation", false);
+                formMethods.setValue("seatsPerTimeSlot", 2);
+              } else {
+                formMethods.setValue("seatsPerTimeSlot", null);
+                formMethods.setValue("disableGuests", false);
+              }
+              onChange(e);
+            }}>
+            <Controller
+              name="seatsPerTimeSlot"
+              control={formMethods.control}
+              defaultValue={eventType.seatsPerTimeSlot}
+              render={({ field: { value, onChange } }) => (
+                <div className="lg:-ml-2">
+                  <TextField
+                    required
+                    name="seatsPerTimeSlot"
+                    labelSrOnly
+                    label={t("number_of_seats")}
+                    type="number"
+                    defaultValue={value || 2}
+                    addOnSuffix={<>{t("seats")}</>}
+                    onChange={(e) => {
+                      onChange(Number(e.target.value));
+                    }}
+                  />
+                  <div className="mt-2">
+                    <CheckboxField
+                      description={t("show_attendees")}
+                      onChange={(e) => formMethods.setValue("seatsShowAttendees", e.target.checked)}
+                      defaultChecked={!!eventType.seatsShowAttendees}
+                    />
+                  </div>
+                </div>
+              )}
            />
-            <div className="flex flex-col">
-              <Label className="text-sm font-semibold leading-none text-black">{t("offer_seats")}</Label>
-              <p className="-mt-2 text-sm leading-normal text-gray-600">{t("offer_seats_description")}</p>
-            </div>
-          </div>
+          </SettingsToggle>
        )}
      />
-      {seatsInputVisible && (
-        <Controller
-          name="seatsPerTimeSlot"
-          control={formMethods.control}
-          defaultValue={eventType.seatsPerTimeSlot}
-          render={({ field: { value, onChange } }) => (
-            <div className="">
-              <TextField
-                required
-                name="seatsPerTimeSlot"
-                label={t("number_of_seats")}
-                type="number"
-                defaultValue={value || 2}
-                addOnSuffix={<>{t("seats")}</>}
-                onChange={(e) => {
-                  onChange(Number(e.target.value));
-                }}
-              />
-            </div>
-          )}
-        />
-      )}
+
      {showEventNameTip && (
        <Dialog open={showEventNameTip} onOpenChange={setShowEventNameTip}>
          <DialogContent
@@ -1,208 +1,134 @@
-import { EventTypeSetupInfered, FormValues } from "pages/v2/event-types/[type]";
-import React, { useState } from "react";
+import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
+import React from "react";
 import { useFormContext } from "react-hook-form";
-import { Controller } from "react-hook-form";
-import { FormattedNumber, IntlProvider } from "react-intl";

-import { SelectGifInput } from "@calcom/app-store/giphy/components";
-import RainbowInstallForm from "@calcom/app-store/rainbow/components/RainbowInstallForm";
+import EventTypeAppContext, { GetAppData, SetAppData } from "@calcom/app-store/EventTypeAppContext";
+import { EventTypeAddonMap } from "@calcom/app-store/apps.browser.generated";
+import { EventTypeAppCardComponentProps } from "@calcom/app-store/types";
+import { EventTypeAppsList } from "@calcom/app-store/utils";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
-import { Alert, Button, EmptyScreen, Select, Switch, TextField } from "@calcom/ui/v2";
+import ErrorBoundary from "@calcom/ui/ErrorBoundary";
+import { Button, EmptyScreen } from "@calcom/ui/v2";

-const AppCard = ({
-  logo,
-  name,
-  description,
-  switchOnClick,
-  switchChecked,
-  children,
-}: {
-  logo: string;
-  name: string;
-  description: React.ReactNode;
-  switchChecked?: boolean;
-  switchOnClick?: (e: boolean) => void;
-  children?: React.ReactNode;
-}) => {
-  return (
-    <div className="mb-4 rounded-md border border-gray-200 p-8">
-      <div className="flex w-full">
-        <img src={logo} alt={name} className="mr-3 h-auto w-[42px] rounded-sm" />
-        <div className="flex flex-col">
-          <span className="font-semibold leading-none text-black">{name}</span>
-          <p className="pt-2 text-sm font-normal text-gray-600">{description}</p>
-        </div>
-        <div className="ml-auto flex items-center">
-          <Switch onCheckedChange={switchOnClick} checked={switchChecked} />
-        </div>
-      </div>
-      {children}
-    </div>
-  );
-};
+type EventType = Pick<EventTypeSetupInfered, "eventType">["eventType"] &
+  EventTypeAppCardComponentProps["eventType"];

-export const EventAppsTab = ({
-  hasPaymentIntegration,
-  currency,
+function AppCardWrapper({
+  app,
  eventType,
-  hasGiphyIntegration,
-  hasRainbowIntegration,
-}: Pick<
-  EventTypeSetupInfered,
-  "eventType" | "hasPaymentIntegration" | "hasGiphyIntegration" | "hasRainbowIntegration" | "currency"
->) => {
-  const formMethods = useFormContext<FormValues>();
-  const [showGifSelection, setShowGifSelection] = useState(
-    hasGiphyIntegration && !!eventType.metadata["giphyThankYouPage"]
-  );
-  const [showRainbowSection, setShowRainbowSection] = useState(
-    hasRainbowIntegration &&
-      !!eventType.metadata["blockchainId"] &&
-      !!eventType.metadata["smartContractAddress"]
-  );
-  const [requirePayment, setRequirePayment] = useState(eventType.price > 0);
-  const recurringEventDefined = eventType.recurringEvent?.count !== undefined;
+  getAppData,
+  setAppData,
+}: {
+  app: inferQueryOutput<"viewer.apps">[number];
+  eventType: EventType;
+  getAppData: GetAppData;
+  setAppData: SetAppData;
+}) {
+  const dirName = app.slug === "stripe" ? "stripepayment" : app.slug;
+  const Component = EventTypeAddonMap[dirName as keyof typeof EventTypeAddonMap];

-  const getCurrencySymbol = (locale: string, currency: string) =>
-    (0)
-      .toLocaleString(locale, {
-        style: "currency",
-        currency,
-        minimumFractionDigits: 0,
-        maximumFractionDigits: 0,
-      })
-      .replace(/\d/g, "")
-      .trim();
-
-  const { t } = useLocale();
-
-  const installedApps = [hasPaymentIntegration, hasGiphyIntegration].filter(Boolean).length;
-
-  if (installedApps === 0) {
-    return (
-      <div className="pt-4 before:border-0">
-        <EmptyScreen
-          Icon={Icon.FiGrid}
-          headline={t("empty_installed_apps_headline")}
-          description={t("empty_installed_apps_description")}
-          buttonRaw={
-            <Button target="_blank" color="secondary" href="/apps">
-              {t("empty_installed_apps_button")}{" "}
-            </Button>
-          }
-        />
-      </div>
-    );
+  if (!Component) {
+    throw new Error('No component found for "' + dirName + '"');
  }
  return (
-    <div className="pt-4 before:border-0">
-      {/* TODO:Strip isnt fully setup yet  */}
-      {hasPaymentIntegration && (
-        <AppCard
-          name="Stripe"
-          switchChecked={requirePayment}
-          switchOnClick={(e) => {
-            if (!e) {
-              formMethods.setValue("price", 0);
-              setRequirePayment(false);
-            } else {
-              setRequirePayment(true);
-            }
-          }}
-          description={
-            <>
-              <div className="">
-                {t("require_payment")} (0.5% +{" "}
-                <IntlProvider locale="en">
-                  <FormattedNumber value={0.1} style="currency" currency={currency} />
-                </IntlProvider>{" "}
-                {t("commission_per_transaction")})
-              </div>
-            </>
-          }
-          logo="/api/app-store/stripepayment/icon.svg">
-          <>
-            {recurringEventDefined ? (
-              <Alert severity="warning" title={t("warning_recurring_event_payment")} />
-            ) : (
-              requirePayment && (
-                <div className="block items-center sm:flex">
-                  <Controller
-                    defaultValue={eventType.price}
-                    control={formMethods.control}
-                    name="price"
-                    render={({ field }) => (
-                      <TextField
-                        label=""
-                        addOnLeading={<>{getCurrencySymbol("en", currency)}</>}
-                        {...field}
-                        step="0.01"
-                        min="0.5"
-                        type="number"
-                        required
-                        className="block w-full rounded-sm border-gray-300 pl-2 pr-12 text-sm"
-                        placeholder="Price"
-                        onChange={(e) => {
-                          field.onChange(e.target.valueAsNumber * 100);
-                        }}
-                        value={field.value > 0 ? field.value / 100 : undefined}
-                      />
-                    )}
-                  />
-                </div>
-              )
-            )}
-          </>
-        </AppCard>
-      )}
-      {hasGiphyIntegration && (
-        <AppCard
-          name="Giphy"
-          description={t("confirmation_page_gif")}
-          logo="/api/app-store/giphy/icon.svg"
-          switchOnClick={(e) => {
-            if (!e) {
-              setShowGifSelection(false);
-              formMethods.setValue("giphyThankYouPage", "");
-            } else {
-              setShowGifSelection(true);
-            }
-          }}
-          switchChecked={showGifSelection}>
-          {showGifSelection && (
-            <SelectGifInput
-              defaultValue={eventType.metadata["giphyThankYouPage"] as string}
-              onChange={(url: string) => {
-                formMethods.setValue("giphyThankYouPage", url);
-              }}
-            />
-          )}
-        </AppCard>
-      )}
-      {hasRainbowIntegration && (
-        <AppCard
-          name="Rainbow"
-          description={t("confirmation_page_rainbow")}
-          logo="/api/app-store/rainbow/icon.svg"
-          switchOnClick={(e) => {
-            if (!e) {
-              formMethods.setValue("blockchainId", 1);
-              formMethods.setValue("smartContractAddress", "");
-            }
+    <ErrorBoundary message={`There is some problem with ${app.name} App`}>
+      <EventTypeAppContext.Provider value={[getAppData, setAppData]}>
+        <Component key={app.slug} app={app} eventType={eventType} />
+      </EventTypeAppContext.Provider>
+    </ErrorBoundary>
+  );
+}

-            setShowRainbowSection(e);
-          }}
-          switchChecked={showRainbowSection}>
-          {showRainbowSection && (
-            <RainbowInstallForm
-              formMethods={formMethods}
-              blockchainId={(eventType.metadata.blockchainId as number) || 1}
-              smartContractAddress={(eventType.metadata.smartContractAddress as string) || ""}
+export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
+  const { t } = useLocale();
+  const { data: eventTypeApps, isLoading } = trpc.useQuery([
+    "viewer.apps",
+    {
+      extendsFeature: "EventType",
+    },
+  ]);
+  const methods = useFormContext<FormValues>();
+  const installedApps = eventTypeApps?.filter((app) => app.credentials.length);
+  const notInstalledApps = eventTypeApps?.filter((app) => !app.credentials.length);
+  const allAppsData = methods.watch("metadata")?.apps || {};
+
+  const setAllAppsData = (_allAppsData: typeof allAppsData) => {
+    methods.setValue("metadata", {
+      ...methods.getValues("metadata"),
+      apps: _allAppsData,
+    });
+  };
+
+  const getAppDataGetter = (appId: EventTypeAppsList): GetAppData => {
+    return function (key) {
+      const appData = allAppsData[appId as keyof typeof allAppsData] || {};
+      if (key) {
+        return appData[key as keyof typeof appData];
+      }
+      return appData;
+    };
+  };
+
+  const getAppDataSetter = (appId: EventTypeAppsList): SetAppData => {
+    return function (key, value) {
+      // Always get latest data available in Form because consequent calls to setData would update the Form but not allAppsData(it would update during next render)
+      const allAppsDataFromForm = methods.getValues("metadata")?.apps || {};
+      const appData = allAppsDataFromForm[appId];
+      setAllAppsData({
+        ...allAppsDataFromForm,
+        [appId]: {
+          ...appData,
+          [key]: value,
+        },
+      });
+    };
+  };
+
+  return (
+    <>
+      <div>
+        <div className="before:border-0">
+          {!isLoading && !installedApps?.length ? (
+            <EmptyScreen
+              Icon={Icon.FiGrid}
+              headline={t("empty_installed_apps_headline")}
+              description={t("empty_installed_apps_description")}
+              buttonRaw={
+                <Button target="_blank" color="secondary" href="/apps">
+                  {t("empty_installed_apps_button")}{" "}
+                </Button>
+              }
            />
-          )}
-        </AppCard>
-      )}
-    </div>
+          ) : null}
+          {installedApps?.map((app) => (
+            <AppCardWrapper
+              getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}
+              setAppData={getAppDataSetter(app.slug as EventTypeAppsList)}
+              key={app.slug}
+              app={app}
+              eventType={eventType}
+            />
+          ))}
+        </div>
+      </div>
+      <div>
+        {!isLoading && notInstalledApps?.length ? (
+          <h2 className="mt-0 mb-2 text-lg font-semibold text-gray-900">Available Apps</h2>
+        ) : null}
+        <div className="before:border-0">
+          {notInstalledApps?.map((app) => (
+            <AppCardWrapper
+              getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}
+              setAppData={getAppDataSetter(app.slug as EventTypeAppsList)}
+              key={app.slug}
+              app={app}
+              eventType={eventType}
+            />
+          ))}
+        </div>
+      </div>
+    </>
  );
 };
@@ -1,19 +1,21 @@
+import { useAutoAnimate } from "@formkit/auto-animate/react";
 import * as RadioGroup from "@radix-ui/react-radio-group";
-import { EventTypeSetupInfered, FormValues } from "pages/v2/event-types/[type]";
+import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
 import { useState } from "react";
 import { useFormContext, Controller, useWatch } from "react-hook-form";

 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { PeriodType } from "@calcom/prisma/client";
-import { Select, Switch, Label, Input, MinutesField } from "@calcom/ui/v2";
+import type { BookingLimit } from "@calcom/types/Calendar";
+import { Icon } from "@calcom/ui";
+import { Select, Switch, Label, Input, MinutesField, Button, SettingsToggle } from "@calcom/ui/v2";
 import DateRangePicker from "@calcom/ui/v2/core/form/date-range-picker/DateRangePicker";

 export const EventLimitsTab = (props: Pick<EventTypeSetupInfered, "eventType">) => {
  const { t } = useLocale();
  const formMethods = useFormContext<FormValues>();
  const { eventType } = props;
-
  const PERIOD_TYPES = [
    {
      type: "ROLLING" as const,
@@ -154,110 +156,233 @@ export const EventLimitsTab = (props: Pick<EventTypeSetupInfered, "eventType">)
          />
        </div>
      </div>
-      <hr className="my-8" />
-      <div className="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4">
-        <fieldset className="block flex-col sm:flex">
-          <div className="flex space-x-3">
-            <Controller
-              name="periodType"
-              control={formMethods.control}
-              defaultValue={periodType?.type !== "UNLIMITED" ? "ROLLING" : "UNLIMITED"}
-              render={({ field: { value } }) => (
-                <Switch
-                  fitToHeight={true}
-                  checked={value !== "UNLIMITED"}
-                  onCheckedChange={(bool) =>
-                    formMethods.setValue("periodType", bool ? "ROLLING" : "UNLIMITED")
-                  }
-                />
-              )}
-            />

-            <div className="">
-              <Label className="text-sm font-semibold leading-none text-black">Limit Future Bookings</Label>
-              <p className="-mt-2 text-sm leading-normal text-gray-600">
-                Limit how far in the future people can book a time
-              </p>
-            </div>
-          </div>
-          <div className="mt-4 lg:ml-14">
-            <Controller
-              name="periodType"
-              control={formMethods.control}
-              defaultValue={periodType?.type}
-              render={() => (
-                <RadioGroup.Root
-                  defaultValue={watchPeriodType}
-                  value={watchPeriodType}
-                  onValueChange={(val) => formMethods.setValue("periodType", val as PeriodType)}>
-                  {PERIOD_TYPES.map((period) => {
-                    if (period.type === "UNLIMITED") return null;
-                    return (
-                      <div
-                        className={classNames(
-                          "mb-2 flex flex-wrap items-center text-sm",
-                          watchPeriodType === "UNLIMITED" && "pointer-events-none opacity-30"
-                        )}
-                        key={period.type}>
-                        <RadioGroup.Item
-                          id={period.type}
-                          value={period.type}
-                          className="min-w-4 flex h-4 w-4 cursor-pointer items-center rounded-full border border-black bg-white focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
-                          <RadioGroup.Indicator className="relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-black" />
-                        </RadioGroup.Item>
-                        {period.prefix ? <span>{period.prefix}&nbsp;</span> : null}
-                        {period.type === "ROLLING" && (
-                          <div className="flex h-9">
-                            <Input
-                              type="number"
-                              className="block w-16 rounded-md border-gray-300 py-3 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
-                              placeholder="30"
-                              {...formMethods.register("periodDays", { valueAsNumber: true })}
-                              defaultValue={eventType.periodDays || 30}
-                            />
-                            <select
-                              id=""
-                              className="block h-9 w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-sm focus:outline-none"
-                              {...formMethods.register("periodCountCalendarDays")}
-                              defaultValue={eventType.periodCountCalendarDays ? "1" : "0"}>
-                              <option value="1">{t("calendar_days")}</option>
-                              <option value="0">{t("business_days")}</option>
-                            </select>
-                          </div>
-                        )}
-                        {period.type === "RANGE" && (
-                          <div className="inline-flex space-x-2 ltr:ml-2 rtl:mr-2 rtl:space-x-reverse">
-                            <Controller
-                              name="periodDates"
-                              control={formMethods.control}
-                              defaultValue={periodDates}
-                              render={() => (
-                                <DateRangePicker
-                                  startDate={formMethods.getValues("periodDates").startDate}
-                                  endDate={formMethods.getValues("periodDates").endDate}
-                                  onDatesChange={({ startDate, endDate }) => {
-                                    formMethods.setValue("periodDates", {
-                                      startDate,
-                                      endDate,
-                                    });
-                                  }}
-                                />
-                              )}
-                            />
-                          </div>
-                        )}
-                        {period.suffix ? (
-                          <span className="ltr:ml-2 rtl:mr-2">&nbsp;{period.suffix}</span>
-                        ) : null}
+      <hr className="my-8" />
+
+      <Controller
+        name="bookingLimits"
+        control={formMethods.control}
+        render={({ field: { value } }) => (
+          <SettingsToggle
+            title={t("limit_booking_frequency")}
+            description={t("limit_booking_frequency_description")}
+            checked={Object.keys(value ?? {}).length > 0}
+            onCheckedChange={(active) => {
+              if (active) {
+                formMethods.setValue("bookingLimits", {
+                  PER_DAY: 1,
+                });
+              } else {
+                formMethods.setValue("bookingLimits", {});
+              }
+            }}>
+            <BookingLimits />
+          </SettingsToggle>
+        )}
+      />
+
+      <hr className="my-8" />
+      <Controller
+        name="periodType"
+        control={formMethods.control}
+        render={({ field: { value } }) => (
+          <SettingsToggle
+            title={t("limit_future_bookings")}
+            description={t("limit_future_bookings_description")}
+            checked={value !== "UNLIMITED"}
+            onCheckedChange={(bool) => formMethods.setValue("periodType", bool ? "ROLLING" : "UNLIMITED")}>
+            <RadioGroup.Root
+              defaultValue={watchPeriodType}
+              value={watchPeriodType}
+              onValueChange={(val) => formMethods.setValue("periodType", val as PeriodType)}>
+              {PERIOD_TYPES.map((period) => {
+                if (period.type === "UNLIMITED") return null;
+                return (
+                  <div
+                    className={classNames(
+                      "mb-2 flex flex-wrap items-center text-sm",
+                      watchPeriodType === "UNLIMITED" && "pointer-events-none opacity-30"
+                    )}
+                    key={period.type}>
+                    <RadioGroup.Item
+                      id={period.type}
+                      value={period.type}
+                      className="min-w-4 flex h-4 w-4 cursor-pointer items-center rounded-full border border-black bg-white focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
+                      <RadioGroup.Indicator className="relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-black" />
+                    </RadioGroup.Item>
+                    {period.prefix ? <span>{period.prefix}&nbsp;</span> : null}
+                    {period.type === "ROLLING" && (
+                      <div className="flex h-9">
+                        <Input
+                          type="number"
+                          className="block w-16 rounded-md border-gray-300 py-3 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
+                          placeholder="30"
+                          {...formMethods.register("periodDays", { valueAsNumber: true })}
+                          defaultValue={eventType.periodDays || 30}
+                        />
+                        <select
+                          id=""
+                          className="block h-9 w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-sm focus:outline-none"
+                          {...formMethods.register("periodCountCalendarDays")}
+                          defaultValue={eventType.periodCountCalendarDays ? "1" : "0"}>
+                          <option value="1">{t("calendar_days")}</option>
+                          <option value="0">{t("business_days")}</option>
+                        </select>
                      </div>
-                    );
-                  })}
-                </RadioGroup.Root>
-              )}
-            />
-          </div>
-        </fieldset>
-      </div>
+                    )}
+                    {period.type === "RANGE" && (
+                      <div className="inline-flex space-x-2 ltr:ml-2 rtl:mr-2 rtl:space-x-reverse">
+                        <Controller
+                          name="periodDates"
+                          control={formMethods.control}
+                          defaultValue={periodDates}
+                          render={() => (
+                            <DateRangePicker
+                              startDate={formMethods.getValues("periodDates").startDate}
+                              endDate={formMethods.getValues("periodDates").endDate}
+                              onDatesChange={({ startDate, endDate }) => {
+                                formMethods.setValue("periodDates", {
+                                  startDate,
+                                  endDate,
+                                });
+                              }}
+                            />
+                          )}
+                        />
+                      </div>
+                    )}
+                    {period.suffix ? <span className="ltr:ml-2 rtl:mr-2">&nbsp;{period.suffix}</span> : null}
+                  </div>
+                );
+              })}
+            </RadioGroup.Root>
+          </SettingsToggle>
+        )}
+      />
    </div>
  );
 };
+
+const validationOrderKeys = ["PER_DAY", "PER_WEEK", "PER_MONTH", "PER_YEAR"];
+type BookingLimitsKey = keyof BookingLimit;
+const BookingLimits = () => {
+  const { watch, setValue, control } = useFormContext<FormValues>();
+  const watchBookingLimits = watch("bookingLimits");
+  const { t } = useLocale();
+
+  const [animateRef] = useAutoAnimate<HTMLUListElement>();
+
+  const BOOKING_LIMIT_OPTIONS: {
+    value: keyof BookingLimit;
+    label: string;
+  }[] = [
+    {
+      value: "PER_DAY",
+      label: "Per Day",
+    },
+    {
+      value: "PER_WEEK",
+      label: "Per Week",
+    },
+    {
+      value: "PER_MONTH",
+      label: "Per Month",
+    },
+    {
+      value: "PER_YEAR",
+      label: "Per Year",
+    },
+  ];
+
+  return (
+    <Controller
+      name="bookingLimits"
+      control={control}
+      render={({ field: { value, onChange } }) => {
+        const currentBookingLimits = value;
+        return (
+          <ul ref={animateRef}>
+            {currentBookingLimits &&
+              watchBookingLimits &&
+              Object.entries(currentBookingLimits)
+                .sort(([limitkeyA], [limitKeyB]) => {
+                  return (
+                    validationOrderKeys.indexOf(limitkeyA as BookingLimitsKey) -
+                    validationOrderKeys.indexOf(limitKeyB as BookingLimitsKey)
+                  );
+                })
+                .map(([key, bookingAmount]) => {
+                  const bookingLimitKey = key as BookingLimitsKey;
+                  return (
+                    <div className="mb-2 flex items-center space-x-2 text-sm" key={bookingLimitKey}>
+                      <Input
+                        id={`${bookingLimitKey}-limit`}
+                        type="number"
+                        className="mb-0 block w-16 rounded-md border-gray-300 text-sm  [appearance:textfield]"
+                        placeholder="1"
+                        min={1}
+                        defaultValue={bookingAmount}
+                        onChange={(e) => {
+                          const val = e.target.value;
+                          setValue(`bookingLimits.${bookingLimitKey}`, parseInt(val));
+                        }}
+                      />
+                      <Select
+                        options={BOOKING_LIMIT_OPTIONS.filter(
+                          (option) => !Object.keys(currentBookingLimits).includes(option.value)
+                        )}
+                        isSearchable={false}
+                        defaultValue={BOOKING_LIMIT_OPTIONS.find((option) => option.value === key)}
+                        onChange={(val) => {
+                          const current = currentBookingLimits;
+                          // Removes limit from previous selected value (eg when changed from per_week to per_month, we unset per_week here)
+                          delete current[bookingLimitKey];
+                          const newData = {
+                            ...current,
+                            // Set limit to new selected value (in the example above this means we set the limit to per_week here).
+                            [val?.value as BookingLimitsKey]: watchBookingLimits[bookingLimitKey],
+                          };
+                          onChange(newData);
+                        }}
+                      />
+                      <Button
+                        size="icon"
+                        StartIcon={Icon.FiTrash}
+                        color="destructive"
+                        onClick={() => {
+                          const current = currentBookingLimits;
+                          delete current[key as BookingLimitsKey];
+                          onChange(current);
+                        }}
+                      />
+                    </div>
+                  );
+                })}
+            {currentBookingLimits && Object.keys(currentBookingLimits).length <= 3 && (
+              <Button
+                color="minimal"
+                StartIcon={Icon.FiPlus}
+                onClick={() => {
+                  if (!currentBookingLimits || !watchBookingLimits) return;
+                  const currentKeys = Object.keys(watchBookingLimits);
+
+                  const rest = Object.values(BOOKING_LIMIT_OPTIONS).filter(
+                    (option) => !currentKeys.includes(option.value)
+                  );
+                  if (!rest || !currentKeys) return;
+                  //currentBookingLimits is always defined so can be casted
+
+                  setValue("bookingLimits", {
+                    ...watchBookingLimits,
+                    [rest[0].value]: undefined,
+                  });
+                }}>
+                {t("add_limit")}
+              </Button>
+            )}
+          </ul>
+        );
+      }}
+    />
+  );
+};
@@ -1,25 +1,18 @@
-import { EventTypeSetupInfered, FormValues } from "pages/v2/event-types/[type]";
+import { EventTypeSetupInfered } from "pages/event-types/[type]";
 import { useState } from "react";
-import { useFormContext } from "react-hook-form";
+
+import getStripeAppData from "@calcom/lib/getStripeAppData";

 import RecurringEventController from "./RecurringEventController";

-export const EventRecurringTab = ({
-  eventType,
-  hasPaymentIntegration,
-}: Pick<EventTypeSetupInfered, "eventType" | "hasPaymentIntegration">) => {
-  const requirePayment = eventType.price > 0;
-  const [recurringEventDefined, setRecurringEventDefined] = useState(
-    eventType.recurringEvent?.count !== undefined
-  );
+export const EventRecurringTab = ({ eventType }: Pick<EventTypeSetupInfered, "eventType">) => {
+  const stripeAppData = getStripeAppData(eventType);
+
+  const requirePayment = stripeAppData.price > 0;

  return (
    <div className="">
-      <RecurringEventController
-        paymentEnabled={hasPaymentIntegration && requirePayment}
-        onRecurringEventDefined={setRecurringEventDefined}
-        recurringEvent={eventType.recurringEvent}
-      />
+      <RecurringEventController paymentEnabled={requirePayment} recurringEvent={eventType.recurringEvent} />
    </div>
  );
 };
@@ -1,8 +1,8 @@
-import autoAnimate from "@formkit/auto-animate";
+import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { isValidPhoneNumber } from "libphonenumber-js";
-import { EventTypeSetupInfered, FormValues } from "pages/v2/event-types/[type]";
-import { useEffect, useRef, useState } from "react";
+import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
+import { useState } from "react";
 import { Controller, useForm, useFormContext } from "react-hook-form";
 import { z } from "zod";

@@ -85,11 +85,8 @@ export const EventSetupTab = (

  const Locations = () => {
    const { t } = useLocale();
-    const animationRef = useRef(null);

-    useEffect(() => {
-      animationRef.current && autoAnimate(animationRef.current);
-    }, [animationRef]);
+    const [animationRef] = useAutoAnimate<HTMLUListElement>();

    const validLocations = formMethods.getValues("locations").filter((location) => {
      const eventLocation = getEventLocationType(location.type);
@@ -135,14 +132,14 @@ export const EventSetupTab = (
              }
              return (
                <li key={location.type} className="mb-2 rounded-md border border-neutral-300 py-1.5 px-2">
-                  <div className="flex justify-between">
+                  <div className="flex max-w-full justify-between">
                    <div key={index} className="flex flex-grow items-center">
                      <img
                        src={eventLocationType.iconUrl}
                        className="h-6 w-6"
                        alt={`${eventLocationType.label} logo`}
                      />
-                      <span className="text-sm ltr:ml-2 rtl:mr-2">
+                      <span className="truncate text-sm ltr:ml-2 rtl:mr-2">
                        {location[eventLocationType.defaultValueVariable] || eventLocationType.label}
                      </span>
                    </div>
@@ -1,5 +1,5 @@
 import { SchedulingType } from "@prisma/client/";
-import { EventTypeSetupInfered, FormValues } from "pages/v2/event-types/[type]";
+import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
 import { useMemo } from "react";
 import { Controller, useFormContext } from "react-hook-form";

@@ -1,6 +1,6 @@
 import { TFunction } from "next-i18next";
 import { useRouter } from "next/router";
-import { EventTypeSetupInfered, FormValues } from "pages/v2/event-types/[type]";
+import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
 import { useMemo, useState } from "react";
 import { Loader } from "react-feather";
 import { UseFormReturn } from "react-hook-form";
@@ -23,6 +23,7 @@ import {
 } from "@calcom/ui/v2";
 import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
 import { Dialog } from "@calcom/ui/v2/core/Dialog";
+import Divider from "@calcom/ui/v2/core/Divider";
 import Dropdown, {
  DropdownMenuContent,
  DropdownMenuItem,
@@ -42,6 +43,7 @@ type Props = {
  team: EventTypeSetupInfered["team"];
  disableBorder?: boolean;
  enabledAppsNumber: number;
+  installedAppsNumber: number;
  enabledWorkflowsNumber: number;
  formMethods: UseFormReturn<FormValues>;
 };
@@ -51,8 +53,9 @@ function getNavigation(props: {
  eventType: Props["eventType"];
  enabledAppsNumber: number;
  enabledWorkflowsNumber: number;
+  installedAppsNumber: number;
 }) {
-  const { eventType, t, enabledAppsNumber, enabledWorkflowsNumber } = props;
+  const { eventType, t, enabledAppsNumber, installedAppsNumber, enabledWorkflowsNumber } = props;
  return [
    {
      name: "event_setup_tab_title",
@@ -88,7 +91,8 @@ function getNavigation(props: {
      name: "apps",
      href: `/event-types/${eventType.id}?tabName=apps`,
      icon: Icon.FiGrid,
-      info: `${enabledAppsNumber} ${t("active")}`,
+      //TODO: Handle proper translation with count handling
+      info: `${installedAppsNumber} apps, ${enabledAppsNumber} ${t("active")}`,
    },
    {
      name: "workflows",
@@ -106,6 +110,7 @@ function EventTypeSingleLayout({
  team,
  disableBorder,
  enabledAppsNumber,
+  installedAppsNumber,
  enabledWorkflowsNumber,
  formMethods,
 }: Props) {
@@ -136,7 +141,13 @@ function EventTypeSingleLayout({

  // Define tab navigation here
  const EventTypeTabs = useMemo(() => {
-    const navigation = getNavigation({ t, eventType, enabledAppsNumber, enabledWorkflowsNumber });
+    const navigation = getNavigation({
+      t,
+      eventType,
+      enabledAppsNumber,
+      installedAppsNumber,
+      enabledWorkflowsNumber,
+    });
    // If there is a team put this navigation item within the tabs
    if (team)
      navigation.splice(2, 0, {
@@ -146,7 +157,7 @@ function EventTypeSingleLayout({
        info: eventType.schedulingType === "COLLECTIVE" ? "collective" : "round_robin",
      });
    return navigation;
-  }, [t, eventType, enabledAppsNumber, enabledWorkflowsNumber, team]);
+  }, [t, eventType, installedAppsNumber, enabledAppsNumber, enabledWorkflowsNumber, team]);

  const permalink = `${CAL_URL}/${team ? `team/${team.slug}` : eventType.users[0].username}/${
    eventType.slug
@@ -162,11 +173,11 @@ function EventTypeSingleLayout({
      subtitle={eventType.description || ""}
      CTA={
        <div className="flex items-center justify-end">
-          <div className="flex items-center rounded-md px-2 sm:hover:bg-gray-100">
+          <div className="hidden items-center rounded-md px-2 sm:flex sm:hover:bg-gray-100">
            <Skeleton
              as={Label}
              htmlFor="hiddenSwitch"
-              className="mt-2 hidden cursor-pointer self-center pr-2 sm:inline">
+              className="mt-2 hidden cursor-pointer self-center whitespace-nowrap pr-2 sm:inline">
              {t("hide_from_profile")}
            </Skeleton>
            <Switch
@@ -221,37 +232,55 @@ function EventTypeSingleLayout({
            />
          </ButtonGroup>

-          <VerticalDivider />
+          <VerticalDivider className="hidden lg:block" />

          <Dropdown>
-            <DropdownMenuTrigger className="focus:ring-brand-900 block h-9 w-9 justify-center rounded-md border border-gray-200 bg-transparent text-gray-700 focus:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-1 lg:hidden">
+            <DropdownMenuTrigger className="block h-9 w-9 justify-center rounded-md border border-gray-200 bg-transparent text-gray-700 lg:hidden">
              <Icon.FiMoreHorizontal className="group-hover:text-gray-800" />
            </DropdownMenuTrigger>
            <DropdownMenuContent>
-              <DropdownMenuItem>
+              <DropdownMenuItem className="focus:ring-gray-100">
                <Button
                  color="minimal"
                  StartIcon={Icon.FiExternalLink}
                  target="_blank"
                  href={permalink}
-                  rel="noreferrer">
+                  rel="noreferrer"
+                  className="min-w-full">
                  {t("preview")}
                </Button>
              </DropdownMenuItem>
-              <DropdownMenuItem>
+              <DropdownMenuItem className="focus:ring-gray-100">
                <Button color="minimal" StartIcon={Icon.FiLink}>
                  {t("copy_link")}
                </Button>
              </DropdownMenuItem>
-              <DropdownMenuItem>
+              <DropdownMenuItem className="focus:ring-gray-100">
                <Button
                  color="minimal"
                  StartIcon={Icon.FiTrash}
                  disabled={!hasPermsToDelete}
-                  onClick={() => setDeleteDialogOpen(true)}>
+                  onClick={() => setDeleteDialogOpen(true)}
+                  className="min-w-full">
                  {t("delete")}
                </Button>
              </DropdownMenuItem>
+              <Divider />
+              <div className="flex items-center rounded-md py-1.5 px-4 sm:hidden sm:hover:bg-gray-100">
+                <Skeleton
+                  as={Label}
+                  htmlFor="hiddenSwitch"
+                  className="mt-2 inline cursor-pointer self-center pr-2 sm:hidden">
+                  {t("hide_from_profile")}
+                </Skeleton>
+                <Switch
+                  id="hiddenSwitch"
+                  defaultChecked={formMethods.getValues("hidden")}
+                  onCheckedChange={(e) => {
+                    formMethods.setValue("hidden", e);
+                  }}
+                />
+              </div>
            </DropdownMenuContent>
          </Dropdown>
          <div className="border-l-2 border-gray-300" />
@@ -6,18 +6,16 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Frequency } from "@calcom/prisma/zod-utils";
 import type { RecurringEvent } from "@calcom/types/Calendar";
 import { Alert } from "@calcom/ui/Alert";
-import { Label, Select, Switch } from "@calcom/ui/v2";
+import { Label, Select, Switch, SettingsToggle } from "@calcom/ui/v2";

 type RecurringEventControllerProps = {
  recurringEvent: RecurringEvent | null;
  paymentEnabled: boolean;
-  onRecurringEventDefined: (value: boolean) => void;
 };

 export default function RecurringEventController({
  recurringEvent,
  paymentEnabled,
-  onRecurringEventDefined,
 }: RecurringEventControllerProps) {
  const { t } = useLocale();
  const [recurringEventState, setRecurringEventState] = useState<RecurringEvent | null>(recurringEvent);
@@ -38,95 +36,85 @@ export default function RecurringEventController({
          <Alert severity="warning" title={t("warning_payment_recurring_event")} />
        ) : (
          <>
-            <div className="flex space-x-3 ">
-              <Switch
-                name="requireConfirmation"
-                data-testid="recurring-event-check"
-                fitToHeight={true}
-                checked={recurringEventState !== null}
-                onCheckedChange={(e) => {
-                  if (!e) {
-                    formMethods.setValue("recurringEvent", null);
-                    setRecurringEventState(null);
-                  } else {
-                    const newVal = recurringEvent || {
-                      interval: 1,
-                      count: 12,
-                      freq: Frequency.WEEKLY,
-                    };
-                    formMethods.setValue("recurringEvent", newVal);
-                    setRecurringEventState(newVal);
-                  }
-                }}
-              />
-              <div className="flex flex-col">
-                <Label className="text-sm font-semibold leading-none text-black">
-                  {t("recurring_event")}
-                </Label>
-                <p className="-mt-2 text-sm leading-normal text-gray-600">
-                  {t("recurring_event_description")}
-                </p>
-                {recurringEventState && (
-                  <div data-testid="recurring-event-collapsible" className="mt-4 text-sm">
-                    <div className="flex items-center">
-                      <p className="mr-2 text-neutral-900">{t("repeats_every")}</p>
-                      <input
-                        type="number"
-                        min="1"
-                        max="20"
-                        className="block h-[36px] w-16 rounded-md border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
-                        defaultValue={recurringEventState.interval}
-                        onChange={(event) => {
-                          const newVal = {
-                            ...recurringEventState,
-                            interval: parseInt(event?.target.value),
-                          };
-                          formMethods.setValue("recurringEvent", newVal);
-                          setRecurringEventState(newVal);
-                        }}
-                      />
-                      <Select
-                        options={recurringEventFreqOptions}
-                        value={recurringEventFreqOptions[recurringEventState.freq]}
-                        isSearchable={false}
-                        className="w-18 block h-[36px] min-w-0 rounded-md text-sm"
-                        onChange={(event) => {
-                          const newVal = {
-                            ...recurringEventState,
-                            freq: parseInt(event?.value || `${Frequency.WEEKLY}`),
-                          };
-                          formMethods.setValue("recurringEvent", newVal);
-                          setRecurringEventState(newVal);
-                        }}
-                      />
-                    </div>
-                    <div className="mt-4 flex items-center">
-                      <p className="mr-2 text-neutral-900">{t("for_a_maximum_of")}</p>
-                      <input
-                        type="number"
-                        min="1"
-                        max="20"
-                        className="block h-[36px] w-16 rounded-md border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
-                        defaultValue={recurringEventState.count}
-                        onChange={(event) => {
-                          const newVal = {
-                            ...recurringEventState,
-                            count: parseInt(event?.target.value),
-                          };
-                          formMethods.setValue("recurringEvent", newVal);
-                          setRecurringEventState(newVal);
-                        }}
-                      />
-                      <p className="mr-2 text-neutral-900">
-                        {t("events", {
-                          count: recurringEventState.count,
-                        })}
-                      </p>
-                    </div>
+            <SettingsToggle
+              title={t("recurring_event")}
+              description={t("recurring_event_description")}
+              checked={recurringEventState !== null}
+              data-testid="recurring-event-check"
+              onCheckedChange={(e) => {
+                if (!e) {
+                  formMethods.setValue("recurringEvent", null);
+                  setRecurringEventState(null);
+                } else {
+                  const newVal = recurringEvent || {
+                    interval: 1,
+                    count: 12,
+                    freq: Frequency.WEEKLY,
+                  };
+                  formMethods.setValue("recurringEvent", newVal);
+                  setRecurringEventState(newVal);
+                }
+              }}>
+              {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>
+                    <input
+                      type="number"
+                      min="1"
+                      max="20"
+                      className="block h-[36px] w-16 rounded-md border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
+                      defaultValue={recurringEventState.interval}
+                      onChange={(event) => {
+                        const newVal = {
+                          ...recurringEventState,
+                          interval: parseInt(event?.target.value),
+                        };
+                        formMethods.setValue("recurringEvent", newVal);
+                        setRecurringEventState(newVal);
+                      }}
+                    />
+                    <Select
+                      options={recurringEventFreqOptions}
+                      value={recurringEventFreqOptions[recurringEventState.freq]}
+                      isSearchable={false}
+                      className="w-18 block h-[36px] min-w-0 rounded-md text-sm"
+                      onChange={(event) => {
+                        const newVal = {
+                          ...recurringEventState,
+                          freq: parseInt(event?.value || `${Frequency.WEEKLY}`),
+                        };
+                        formMethods.setValue("recurringEvent", newVal);
+                        setRecurringEventState(newVal);
+                      }}
+                    />
                  </div>
-                )}
-              </div>
-            </div>
+                  <div className="mt-4 flex items-center">
+                    <p className="mr-2 text-neutral-900">{t("for_a_maximum_of")}</p>
+                    <input
+                      type="number"
+                      min="1"
+                      max="20"
+                      className="block h-[36px] w-16 rounded-md border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
+                      defaultValue={recurringEventState.count}
+                      onChange={(event) => {
+                        const newVal = {
+                          ...recurringEventState,
+                          count: parseInt(event?.target.value),
+                        };
+                        formMethods.setValue("recurringEvent", newVal);
+                        setRecurringEventState(newVal);
+                      }}
+                    />
+                    <p className="mr-2 text-neutral-900">
+                      {t("events", {
+                        count: recurringEventState.count,
+                      })}
+                    </p>
+                  </div>
+                </div>
+              )}
+            </SettingsToggle>
          </>
        )}
      </div>
@@ -1,245 +0,0 @@
-import { Webhook } from "@prisma/client";
-import { useEffect, useState } from "react";
-import { Controller, useForm } from "react-hook-form";
-
-import customTemplate, { hasTemplateIntegration } from "@calcom/features/webhooks/utils/integrationTemplate";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import showToast from "@calcom/lib/notification";
-import { trpc } from "@calcom/trpc/react";
-import Button from "@calcom/ui/Button";
-import { DialogFooter } from "@calcom/ui/Dialog";
-import Switch from "@calcom/ui/Switch";
-import { FieldsetLegend, Form, InputGroupBox, TextArea, TextField } from "@calcom/ui/form/fields";
-
-import { WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP } from "@lib/webhooks/constants";
-
-import { TWebhook } from "@components/webhook/WebhookListItem";
-import WebhookTestDisclosure from "@components/webhook/WebhookTestDisclosure";
-
-/** @deprecated Moved to `packages/features/webhooks` */
-export default function WebhookDialogForm(props: {
-  eventTypeId?: number;
-  defaultValues?: TWebhook;
-  app?: string;
-  handleClose: () => void;
-  webhooks: Webhook[];
-}) {
-  const { t } = useLocale();
-  const utils = trpc.useContext();
-  const appId = props.app;
-  const webhooks = props.webhooks;
-
-  const triggers = !appId
-    ? WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP["core"]
-    : WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP[appId as keyof typeof WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP];
-  const {
-    defaultValues = {
-      id: "",
-      eventTriggers: triggers,
-      subscriberUrl: "",
-      active: true,
-      payloadTemplate: null,
-      secret: null,
-    } as Omit<TWebhook, "userId" | "createdAt" | "eventTypeId" | "appId">,
-  } = props;
-
-  const [useCustomPayloadTemplate, setUseCustomPayloadTemplate] = useState(!!defaultValues.payloadTemplate);
-  const [changeSecret, setChangeSecret] = useState(false);
-  const [newSecret, setNewSecret] = useState("");
-  const hasSecretKey = !!defaultValues.secret;
-  const currentSecret = defaultValues.secret;
-
-  const subscriberUrlReserved = (subscriberUrl: string, id: string): boolean => {
-    return !!webhooks.find((webhook) => webhook.subscriberUrl === subscriberUrl && webhook.id !== id);
-  };
-
-  const form = useForm({
-    defaultValues,
-  });
-
-  const handleInput = (event: React.FormEvent<HTMLInputElement>) => {
-    setNewSecret(event.currentTarget.value);
-  };
-
-  useEffect(() => {
-    if (changeSecret) {
-      form.unregister("secret", { keepDefaultValue: false });
-    }
-  }, [changeSecret]);
-
-  return (
-    <Form
-      data-testid="WebhookDialogForm"
-      form={form}
-      handleSubmit={async (event) => {
-        if (subscriberUrlReserved(event.subscriberUrl, event.id)) {
-          showToast(t("webhook_subscriber_url_reserved"), "error");
-          return;
-        }
-        const e = changeSecret
-          ? { ...event, eventTypeId: props.eventTypeId, appId }
-          : { ...event, secret: currentSecret, eventTypeId: props.eventTypeId, appId };
-        if (!useCustomPayloadTemplate && event.payloadTemplate) {
-          event.payloadTemplate = null;
-        }
-        if (event.id) {
-          await utils.client.mutation("viewer.webhook.edit", e);
-          await utils.invalidateQueries(["viewer.webhook.list"]);
-          showToast(t("webhook_updated_successfully"), "success");
-        } else {
-          await utils.client.mutation("viewer.webhook.create", e);
-          await utils.invalidateQueries(["viewer.webhook.list"]);
-          showToast(t("webhook_created_successfully"), "success");
-        }
-        props.handleClose();
-      }}
-      className="space-y-4">
-      <div>
-        <input type="hidden" {...form.register("id")} />
-      </div>
-      <fieldset className="space-y-2">
-        <InputGroupBox className="border-0 bg-gray-50">
-          <Controller
-            control={form.control}
-            name="active"
-            render={({ field }) => (
-              <Switch
-                label={field.value ? t("webhook_enabled") : t("webhook_disabled")}
-                defaultChecked={field.value}
-                onCheckedChange={(isChecked) => {
-                  form.setValue("active", isChecked);
-                }}
-              />
-            )}
-          />
-        </InputGroupBox>
-      </fieldset>
-      <div>
-        <TextField
-          label={t("subscriber_url")}
-          {...form.register("subscriberUrl")}
-          required
-          type="url"
-          onChange={(e) => {
-            form.setValue("subscriberUrl", e.target.value);
-            if (hasTemplateIntegration({ url: e.target.value })) {
-              setUseCustomPayloadTemplate(true);
-              form.setValue("payloadTemplate", customTemplate({ url: e.target.value }));
-            }
-          }}
-        />
-      </div>
-      <fieldset className="space-y-2">
-        <FieldsetLegend>{t("event_triggers")}</FieldsetLegend>
-        <InputGroupBox className="border-0 bg-gray-50">
-          {triggers.map((key) => (
-            <Controller
-              key={key}
-              control={form.control}
-              name="eventTriggers"
-              render={({ field }) => (
-                <Switch
-                  label={t(key.toLowerCase())}
-                  defaultChecked={field.value.includes(key)}
-                  onCheckedChange={(isChecked) => {
-                    const value = field.value;
-                    const newValue = isChecked ? [...value, key] : value.filter((v) => v !== key);
-
-                    form.setValue("eventTriggers", newValue, {
-                      shouldDirty: true,
-                    });
-                  }}
-                />
-              )}
-            />
-          ))}
-        </InputGroupBox>
-      </fieldset>
-      <fieldset className="space-y-2">
-        {!!hasSecretKey && !changeSecret && (
-          <>
-            <FieldsetLegend>{t("secret")}</FieldsetLegend>
-            <div className="rounded-sm bg-gray-50 p-2 text-xs text-neutral-900">
-              {t("forgotten_secret_description")}
-            </div>
-            <Button
-              color="secondary"
-              type="button"
-              className="py-1 text-xs"
-              onClick={() => {
-                setChangeSecret(true);
-              }}>
-              {t("change_secret")}
-            </Button>
-          </>
-        )}
-        {!!hasSecretKey && changeSecret && (
-          <>
-            <TextField
-              autoComplete="off"
-              label={t("secret")}
-              {...form.register("secret")}
-              value={newSecret}
-              onChange={handleInput}
-              type="text"
-              placeholder={t("leave_blank_to_remove_secret")}
-            />
-            <Button
-              color="secondary"
-              type="button"
-              className="py-1 text-xs"
-              onClick={() => {
-                setChangeSecret(false);
-              }}>
-              {t("cancel")}
-            </Button>
-          </>
-        )}
-        {!hasSecretKey && (
-          <TextField autoComplete="off" label={t("secret")} {...form.register("secret")} type="text" />
-        )}
-      </fieldset>
-      <fieldset className="space-y-2">
-        <FieldsetLegend>{t("payload_template")}</FieldsetLegend>
-        <div className="space-x-3 text-sm rtl:space-x-reverse">
-          <label>
-            <input
-              className="text-neutral-900 focus:ring-neutral-500"
-              type="radio"
-              name="useCustomPayloadTemplate"
-              onChange={(value) => setUseCustomPayloadTemplate(!value.target.checked)}
-              defaultChecked={!useCustomPayloadTemplate}
-            />{" "}
-            Default
-          </label>
-          <label>
-            <input
-              className="text-neutral-900 focus:ring-neutral-500"
-              onChange={(value) => setUseCustomPayloadTemplate(value.target.checked)}
-              name="useCustomPayloadTemplate"
-              type="radio"
-              defaultChecked={useCustomPayloadTemplate}
-            />{" "}
-            Custom
-          </label>
-        </div>
-        {useCustomPayloadTemplate && (
-          <TextArea
-            {...form.register("payloadTemplate")}
-            defaultValue={useCustomPayloadTemplate && (defaultValues.payloadTemplate || "")}
-            rows={3}
-          />
-        )}
-      </fieldset>
-      <WebhookTestDisclosure />
-      <DialogFooter>
-        <Button type="button" color="secondary" onClick={props.handleClose} tabIndex={-1}>
-          {t("cancel")}
-        </Button>
-        <Button type="submit" loading={form.formState.isSubmitting}>
-          {t("save")}
-        </Button>
-      </DialogFooter>
-    </Form>
-  );
-}
@@ -1,103 +0,0 @@
-import { useRouter } from "next/router";
-import { useState } from "react";
-
-import { trpc } from "@calcom/trpc/react";
-import Button from "@calcom/ui/Button";
-import { Dialog, DialogContent } from "@calcom/ui/Dialog";
-import { Icon } from "@calcom/ui/Icon";
-import { List } from "@calcom/ui/List";
-import { ShellSubHeading } from "@calcom/ui/Shell";
-import SkeletonLoader from "@calcom/ui/apps/SkeletonLoader";
-
-import { QueryCell } from "@lib/QueryCell";
-
-import WebhookDialogForm from "@components/webhook/WebhookDialogForm";
-import WebhookListItem, { TWebhook } from "@components/webhook/WebhookListItem";
-
-export type WebhookListContainerType = {
-  title: string;
-  subtitle: string;
-  eventTypeId?: number;
-  appId?: string;
-};
-
-/** @deprecated Moved to `packages/features/webhooks` */
-export default function WebhookListContainer(props: WebhookListContainerType) {
-  const router = useRouter();
-  const query = trpc.useQuery(
-    ["viewer.webhook.list", { eventTypeId: props.eventTypeId, appId: props.appId }],
-    {
-      suspense: true,
-      enabled: router.isReady,
-    }
-  );
-  const [newWebhookModal, setNewWebhookModal] = useState(false);
-  const [editModalOpen, setEditModalOpen] = useState(false);
-  const [editing, setEditing] = useState<TWebhook | null>(null);
-  return (
-    <QueryCell
-      query={query}
-      customLoader={<SkeletonLoader />}
-      success={({ data }) => (
-        <div className="border-b border-gray-200 py-8 pl-2 pr-1">
-          <ShellSubHeading
-            className="mt-2"
-            title={props.title}
-            subtitle={props.subtitle}
-            actions={
-              <Button
-                color="minimal"
-                size="icon"
-                StartIcon={Icon.FiPlus}
-                onClick={() => setNewWebhookModal(true)}
-                data-testid="new_webhook"
-              />
-            }
-          />
-
-          {data.length ? (
-            <List className="mt-6">
-              {data.map((item) => (
-                <WebhookListItem
-                  key={item.id}
-                  webhook={item}
-                  onEditWebhook={() => {
-                    setEditing(item);
-                    setEditModalOpen(true);
-                  }}
-                />
-              ))}
-            </List>
-          ) : null}
-
-          {/* New webhook dialog */}
-          <Dialog open={newWebhookModal} onOpenChange={(isOpen) => !isOpen && setNewWebhookModal(false)}>
-            <DialogContent>
-              <WebhookDialogForm
-                app={props.appId}
-                webhooks={data}
-                eventTypeId={props.eventTypeId}
-                handleClose={() => setNewWebhookModal(false)}
-              />
-            </DialogContent>
-          </Dialog>
-          {/* Edit webhook dialog */}
-          <Dialog open={editModalOpen} onOpenChange={(isOpen) => !isOpen && setEditModalOpen(false)}>
-            <DialogContent>
-              {editing && (
-                <WebhookDialogForm
-                  app={props.appId}
-                  key={editing.id}
-                  webhooks={data}
-                  eventTypeId={props.eventTypeId || undefined}
-                  handleClose={() => setEditModalOpen(false)}
-                  defaultValues={editing}
-                />
-              )}
-            </DialogContent>
-          </Dialog>
-        </div>
-      )}
-    />
-  );
-}
@@ -1,94 +0,0 @@
-import classNames from "@calcom/lib/classNames";
-import { inferQueryOutput, trpc } from "@calcom/trpc/react";
-import Button from "@calcom/ui/Button";
-import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent";
-import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
-import { Icon } from "@calcom/ui/Icon";
-import { ListItem } from "@calcom/ui/List";
-import { Tooltip } from "@calcom/ui/Tooltip";
-
-import { useLocale } from "@lib/hooks/useLocale";
-
-export type TWebhook = inferQueryOutput<"viewer.webhook.list">[number];
-
-/** @deprecated Moved to `packages/features/webhooks` */
-export default function WebhookListItem(props: { webhook: TWebhook; onEditWebhook: () => void }) {
-  const { t } = useLocale();
-  const utils = trpc.useContext();
-  const deleteWebhook = trpc.useMutation("viewer.webhook.delete", {
-    async onSuccess() {
-      await utils.invalidateQueries(["viewer.webhook.list"]);
-    },
-  });
-
-  return (
-    <ListItem className={classNames("flex w-full p-4", props.webhook.active ? "bg-white" : "bg-gray-100")}>
-      <div className="flex w-full justify-between">
-        <div className="flex max-w-full flex-col truncate">
-          <div className="flex space-y-1">
-            <span
-              className={classNames(
-                "truncate text-sm",
-                props.webhook.active ? "text-neutral-700" : "text-neutral-400"
-              )}>
-              {props.webhook.subscriberUrl}
-            </span>
-          </div>
-          <div className="mt-2 flex">
-            <span className="flex flex-col space-x-2 space-y-1 text-xs sm:flex-row sm:space-y-0 sm:rtl:space-x-reverse">
-              {props.webhook.eventTriggers.map((eventTrigger, ind) => (
-                <span
-                  key={ind}
-                  className={classNames(
-                    "w-max rounded-sm px-1 text-xs",
-                    props.webhook.active ? "text-grey-200 bg-gray-200" : "bg-grey-50 text-neutral-400"
-                  )}>
-                  {t(`${eventTrigger.toLowerCase()}`)}
-                </span>
-              ))}
-            </span>
-          </div>
-        </div>
-        <div className="flex">
-          <Tooltip side="top" content={t("edit_webhook")}>
-            <Button
-              onClick={() => props.onEditWebhook()}
-              color="minimal"
-              size="icon"
-              StartIcon={Icon.FiEdit2}
-              className="ml-4 w-full self-center p-2"
-            />
-          </Tooltip>
-          <Dialog>
-            <Tooltip side="top" content={t("delete_webhook")}>
-              <DialogTrigger asChild>
-                <Button
-                  onClick={(e) => {
-                    e.stopPropagation();
-                  }}
-                  size="icon"
-                  color="warn"
-                  StartIcon={Icon.FiTrash}
-                  className="ml-2 w-full self-center p-2"
-                />
-              </DialogTrigger>
-            </Tooltip>
-            <ConfirmationDialogContent
-              variety="danger"
-              title={t("delete_webhook")}
-              confirmBtnText={t("confirm_delete_webhook")}
-              cancelBtnText={t("cancel")}
-              onConfirm={() =>
-                deleteWebhook.mutate({
-                  id: props.webhook.id,
-                  eventTypeId: props.webhook.eventTypeId || undefined,
-                })
-              }>
-              {t("delete_webhook_confirmation_message")}
-            </ConfirmationDialogContent>
-          </Dialog>
-        </div>
-      </div>
-    </ListItem>
-  );
-}
@@ -1,63 +0,0 @@
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
-import { useState } from "react";
-import { useWatch } from "react-hook-form";
-
-import classNames from "@calcom/lib/classNames";
-import showToast from "@calcom/lib/notification";
-import { trpc } from "@calcom/trpc/react";
-import Button from "@calcom/ui/Button";
-import { Icon } from "@calcom/ui/Icon";
-import { InputGroupBox } from "@calcom/ui/form/fields";
-
-import { useLocale } from "@lib/hooks/useLocale";
-
-/** @deprecated Moved to `packages/features/webhooks` */
-export default function WebhookTestDisclosure() {
-  const subscriberUrl: string = useWatch({ name: "subscriberUrl" });
-  const payloadTemplate = useWatch({ name: "payloadTemplate" }) || null;
-  const { t } = useLocale();
-  const [open, setOpen] = useState(false);
-  const mutation = trpc.useMutation("viewer.webhook.testTrigger", {
-    onError(err) {
-      showToast(err.message, "error");
-    },
-  });
-
-  return (
-    <Collapsible open={open} onOpenChange={() => setOpen(!open)}>
-      <CollapsibleTrigger type="button" className="flex w-full cursor-pointer">
-        <Icon.FiChevronRight className={`${open ? "rotate-90 transform" : ""} h-5 w-5 text-neutral-500`} />
-        <span className="text-sm font-medium text-gray-700">{t("webhook_test")}</span>
-      </CollapsibleTrigger>
-      <CollapsibleContent>
-        <InputGroupBox className="space-y-0 border-0 px-0">
-          <div className="flex justify-between bg-gray-50 p-2">
-            <h3 className="self-center text-gray-700">{t("webhook_response")}</h3>
-            <Button
-              type="button"
-              color="minimal"
-              disabled={mutation.isLoading}
-              onClick={() => mutation.mutate({ url: subscriberUrl, type: "PING", payloadTemplate })}>
-              {t("ping_test")}
-            </Button>
-          </div>
-          <div className="border-8 border-gray-50 p-2 text-gray-500">
-            {!mutation.data && <em>{t("no_data_yet")}</em>}
-            {mutation.status === "success" && (
-              <>
-                <div
-                  className={classNames(
-                    "ml-auto w-max px-2 py-1 text-xs",
-                    mutation.data.ok ? "bg-green-50 text-green-500" : "bg-red-50 text-red-500"
-                  )}>
-                  {mutation.data.ok ? t("success") : t("failed")}
-                </div>
-                <pre className="overflow-x-auto">{JSON.stringify(mutation.data, null, 4)}</pre>
-              </>
-            )}
-          </div>
-        </InputGroupBox>
-      </CollapsibleContent>
-    </Collapsible>
-  );
-}
@@ -10,6 +10,7 @@ async function getBooking(prisma: PrismaClient, uid: string) {
      description: true,
      customInputs: true,
      smsReminderNumber: true,
+      location: true,
      attendees: {
        select: {
          email: true,
@@ -1,40 +0,0 @@
-import jackson, { IAPIController, IOAuthController, JacksonOption } from "@boxyhq/saml-jackson";
-
-import { BASE_URL } from "@lib/config/constants";
-import { samlDatabaseUrl } from "@lib/saml";
-
-// Set the required options. Refer to https://github.com/boxyhq/jackson#configuration for the full list
-const opts: JacksonOption = {
-  externalUrl: BASE_URL,
-  samlPath: "/api/auth/saml/callback",
-  db: {
-    engine: "sql",
-    type: "postgres",
-    url: samlDatabaseUrl,
-    encryptionKey: process.env.CALENDSO_ENCRYPTION_KEY,
-  },
-  samlAudience: "https://saml.cal.com",
-};
-
-let apiController: IAPIController;
-let oauthController: IOAuthController;
-
-const g = global as any;
-
-export default async function init() {
-  if (!g.apiController || !g.oauthController) {
-    const ret = await jackson(opts);
-    apiController = ret.apiController;
-    oauthController = ret.oauthController;
-    g.apiController = apiController;
-    g.oauthController = oauthController;
-  } else {
-    apiController = g.apiController;
-    oauthController = g.oauthController;
-  }
-
-  return {
-    apiController,
-    oauthController,
-  };
-}
@@ -1,22 +1,46 @@
+import { AppsStatus } from "@calcom/types/Calendar";
+
 import * as fetch from "@lib/core/http/fetch-wrapper";
 import { BookingCreateBody, BookingResponse } from "@lib/types/booking";

 type ExtendedBookingCreateBody = BookingCreateBody & { noEmail?: boolean; recurringCount?: number };

 const createRecurringBooking = async (data: ExtendedBookingCreateBody[]) => {
-  return Promise.all(
-    data.map((booking, key) => {
-      // We only want to send the first occurrence of the meeting at the moment, not all at once
-      if (key === 0) {
-        return fetch.post<ExtendedBookingCreateBody, BookingResponse>("/api/book/event", booking);
-      } else {
-        return fetch.post<ExtendedBookingCreateBody, BookingResponse>("/api/book/event", {
-          ...booking,
-          noEmail: true,
-        });
-      }
-    })
-  );
+  const createdBookings: BookingResponse[] = [];
+  // Reversing to accumulate results for noEmail instances first, to then lastly, create the
+  // emailed booking taking into account accumulated results to send app status accurately
+  for (let key = 0; key < data.length; key++) {
+    const booking = data[key];
+    if (key === data.length - 1) {
+      const calcAppsStatus: { [key: string]: AppsStatus } = createdBookings
+        .flatMap((book) => (book.appsStatus !== undefined ? book.appsStatus : []))
+        .reduce((prev, curr) => {
+          if (prev[curr.type]) {
+            prev[curr.type].failures += curr.failures;
+            prev[curr.type].success += curr.success;
+          } else {
+            prev[curr.type] = curr;
+          }
+          return prev;
+        }, {} as { [key: string]: AppsStatus });
+      const appsStatus = Object.values(calcAppsStatus);
+      const response = await fetch.post<
+        ExtendedBookingCreateBody & { appsStatus: AppsStatus[] },
+        BookingResponse
+      >("/api/book/event", {
+        ...booking,
+        appsStatus,
+      });
+      createdBookings.push(response);
+    } else {
+      const response = await fetch.post<ExtendedBookingCreateBody, BookingResponse>("/api/book/event", {
+        ...booking,
+        noEmail: true,
+      });
+      createdBookings.push(response);
+    }
+  }
+  return createdBookings;
 };

 export default createRecurringBooking;
@@ -20,6 +20,15 @@ export const parseDate = (date: string | null | Dayjs, i18n: I18n) => {
  return processDate(date, i18n);
 };

+// tzid is currently broken in rrule library.
+// @see https://github.com/jakubroztocil/rrule/issues/523
+const dateWithZone = (d: Date, timeZone?: string) => {
+  const dateInLocalTZ = new Date(d.toLocaleString("en-US", { timeZone: "UTC" }));
+  const dateInTargetTZ = new Date(d.toLocaleString("en-US", { timeZone: timeZone || "UTC" }));
+  const tzOffset = dateInTargetTZ.getTime() - dateInLocalTZ.getTime();
+  return new Date(d.getTime() - tzOffset);
+};
+
 export const parseRecurringDates = (
  {
    startDate,
@@ -39,22 +48,41 @@ export const parseRecurringDates = (
  const rule = new RRule({
    ...restRecurringEvent,
    count: recurringCount,
-    dtstart: dayjs(startDate).toDate(),
+    dtstart: dayjs(startDate).utc(true).toDate(),
  });
-  const dateStrings = rule.all().map((r) => {
-    return processDate(dayjs(r).tz(timeZone), i18n);
+  // UTC times with tzOffset applied to account for DST
+  const times = rule.all().map((t) => dateWithZone(t, timeZone));
+  const dateStrings = times.map((t) => {
+    // undo DST diffs for localized display.
+    return processDate(dayjs.utc(t).tz(timeZone), i18n);
  });
-  return [dateStrings, rule.all()];
+
+  return [dateStrings, times];
 };

-type BookingItem = inferQueryOutput<"viewer.bookings">["bookings"][number];
-
 export const extractRecurringDates = (
-  bookings: BookingItem[],
+  booking: inferQueryOutput<"viewer.bookings">["bookings"][number] & {
+    eventType: { recurringEvent: RecurringEvent | null };
+    recurringEventId: string | null;
+    recurringBookings: inferQueryOutput<"viewer.bookings">["recurringInfo"];
+  },
  timeZone: string | undefined,
  i18n: I18n
 ): [string[], Date[]] => {
-  const dateStrings = bookings.map((booking) => processDate(dayjs(booking.startTime).tz(timeZone), i18n));
-  const allDates = dateStrings.map((dateString) => dayjs(dateString).tz(timeZone).toDate());
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { count = 0, ...rest } =
+    booking.eventType.recurringEvent !== null ? booking.eventType.recurringEvent : {};
+  const recurringInfo = booking.recurringBookings.find(
+    (val) => val.recurringEventId === booking.recurringEventId
+  );
+  const allDates = new RRule({
+    ...rest,
+    count: recurringInfo?._count.recurringEventId,
+    dtstart: recurringInfo?._min.startTime,
+  }).all();
+  const utcOffset = dayjs(recurringInfo?._min.startTime).tz(timeZone).utcOffset();
+  const dateStrings = allDates.map((r) => {
+    return processDate(dayjs.utc(r).utcOffset(utcOffset), i18n);
+  });
  return [dateStrings, allDates];
 };
@@ -1,59 +0,0 @@
-import { PrismaClient } from "@prisma/client";
-
-import { TRPCError } from "@calcom/trpc/server";
-
-import { BASE_URL } from "@lib/config/constants";
-
-export const samlDatabaseUrl = process.env.SAML_DATABASE_URL || "";
-export const samlLoginUrl = BASE_URL;
-
-export const isSAMLLoginEnabled = samlDatabaseUrl.length > 0;
-
-export const samlTenantID = "Cal.com";
-export const samlProductID = "Cal.com";
-
-const samlAdmins = (process.env.SAML_ADMINS || "").split(",");
-export const hostedCal = BASE_URL === "https://app.cal.com";
-export const tenantPrefix = "team-";
-
-export const isSAMLAdmin = (email: string) => {
-  for (const admin of samlAdmins) {
-    if (admin.toLowerCase() === email.toLowerCase() && admin.toUpperCase() === email.toUpperCase()) {
-      return true;
-    }
-  }
-
-  return false;
-};
-
-export const samlTenantProduct = async (prisma: PrismaClient, email: string) => {
-  const user = await prisma.user.findUnique({
-    where: {
-      email,
-    },
-    select: {
-      id: true,
-      invitedTo: true,
-    },
-  });
-
-  if (!user) {
-    throw new TRPCError({
-      code: "UNAUTHORIZED",
-      message: "Unauthorized Request",
-    });
-  }
-
-  if (!user.invitedTo) {
-    throw new TRPCError({
-      code: "BAD_REQUEST",
-      message:
-        "Could not find a SAML Identity Provider for your email. Please contact your admin to ensure you have been given access to Cal",
-    });
-  }
-
-  return {
-    tenant: tenantPrefix + user.invitedTo,
-    product: samlProductID,
-  };
-};
@@ -1,5 +1,7 @@
 import { Attendee, Booking } from "@prisma/client";

+import { AppsStatus } from "@calcom/types/Calendar";
+
 export type BookingCreateBody = {
  email: string;
  end: string;
@@ -33,4 +35,5 @@ export type BookingCreateBody = {
 export type BookingResponse = Booking & {
  paymentUid?: string;
  attendees: Attendee[];
+  appsStatus?: AppsStatus[];
 };
@@ -1,18 +0,0 @@
-import { WebhookTriggerEvents } from "@prisma/client";
-
-// this is exported as we can't use `WebhookTriggerEvents` in the frontend straight-off
-
-export const WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP = {
-  core: [
-    WebhookTriggerEvents.BOOKING_CANCELLED,
-    WebhookTriggerEvents.BOOKING_CREATED,
-    WebhookTriggerEvents.BOOKING_RESCHEDULED,
-    WebhookTriggerEvents.MEETING_ENDED,
-  ] as const,
-  "routing-forms": [WebhookTriggerEvents.FORM_SUBMITTED] as ["FORM_SUBMITTED"],
-};
-
-export const WEBHOOK_TRIGGER_EVENTS = [
-  ...WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP.core,
-  ...WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP["routing-forms"],
-] as const;
@@ -1,45 +0,0 @@
-import { WebhookTriggerEvents } from "@prisma/client";
-
-import prisma from "@calcom/prisma";
-
-export type GetSubscriberOptions = {
-  userId: number;
-  eventTypeId: number;
-  triggerEvent: WebhookTriggerEvents;
-};
-
-/** @deprecated use `packages/lib/webhooks/subscriptions.tsx` */
-const getWebhooks = async (options: GetSubscriberOptions) => {
-  const { userId, eventTypeId } = options;
-  const allWebhooks = await prisma.webhook.findMany({
-    where: {
-      OR: [
-        {
-          userId,
-        },
-        {
-          eventTypeId,
-        },
-      ],
-      AND: {
-        eventTriggers: {
-          has: options.triggerEvent,
-        },
-        active: {
-          equals: true,
-        },
-      },
-    },
-    select: {
-      id: true,
-      subscriberUrl: true,
-      payloadTemplate: true,
-      appId: true,
-      secret: true,
-    },
-  });
-
-  return allWebhooks;
-};
-
-export default getWebhooks;
@@ -0,0 +1,21 @@
+import { GetServerSideProps, GetServerSidePropsContext, GetServerSidePropsResult } from "next";
+
+export type EmbedProps = {
+  isEmbed?: boolean;
+};
+
+export default function withEmbedSsr(getServerSideProps: GetServerSideProps) {
+  return async (context: GetServerSidePropsContext): Promise<GetServerSidePropsResult<EmbedProps>> => {
+    const ssrResponse = await getServerSideProps(context);
+    if (!("props" in ssrResponse)) {
+      return ssrResponse;
+    }
+    return {
+      ...ssrResponse,
+      props: {
+        ...ssrResponse.props,
+        isEmbed: true,
+      },
+    };
+  };
+}
@@ -5,28 +5,6 @@ import { CONSOLE_URL, WEBAPP_URL, WEBSITE_URL } from "@calcom/lib/constants";
 import { isIpInBanlist } from "@calcom/lib/getIP";
 import { extendEventData, nextCollectBasicSettings } from "@calcom/lib/telemetry";

-const V2_WHITELIST = [
-  "/settings/admin",
-  "/settings/developer/webhooks",
-  "/settings/developer/api-keys",
-  "/settings/my-account",
-  "/settings/security",
-  "/settings/teams",
-  "/availability",
-  "/bookings",
-  "/event-types",
-  "/workflows",
-  "/apps",
-  "/teams",
-  "/success",
-  "/auth/login",
-];
-
-// For pages
-// - which has V1 versions being modified as V2
-// - Add routing_forms to keep old links working
-const V2_BLACKLIST = ["/apps/routing_forms/", "/apps/routing-forms/", "/apps/typeform/"];
-
 const middleware: NextMiddleware = async (req) => {
  const url = req.nextUrl;

@@ -45,22 +23,19 @@ const middleware: NextMiddleware = async (req) => {
    }
  }

+  // Ensure that embed query param is there in when /embed is added.
+  // query param is the way in which client side code knows that it is in embed mode.
+  if (url.pathname.endsWith("/embed") && typeof url.searchParams.get("embed") !== "string") {
+    url.searchParams.set("embed", "");
+    return NextResponse.redirect(url);
+  }
+
  // Don't 404 old routing_forms links
  if (url.pathname.startsWith("/apps/routing_forms")) {
    url.pathname = url.pathname.replace("/apps/routing_forms", "/apps/routing-forms");
    return NextResponse.rewrite(url);
  }

-  /** Display available V2 pages */
-  if (
-    !V2_BLACKLIST.some((p) => url.pathname.startsWith(p)) &&
-    V2_WHITELIST.some((p) => url.pathname.startsWith(p))
-  ) {
-    // rewrite to the current subdomain under the pages/sites folder
-    url.pathname = `/v2${url.pathname}`;
-    return NextResponse.rewrite(url);
-  }
-
  return NextResponse.next();
 };

@@ -134,8 +134,8 @@ const nextConfig = {
        destination: "/api/user/avatar?teamname=:teamname",
      },
      {
-        source: "/forms/:formId",
-        destination: "/apps/routing-forms/routing-link/:formId",
+        source: "/forms/:formQuery*",
+        destination: "/apps/routing-forms/routing-link/:formQuery*",
      },
      {
        source: "/router",
@@ -154,6 +154,11 @@ const nextConfig = {
        destination: "/app-store/:path*",
        permanent: true,
      },
+      {
+        source: "/auth/signup",
+        destination: "/signup",
+        permanent: true,
+      },
      {
        source: "/settings",
        destination: "/settings/my-account/profile",
@@ -1,6 +1,6 @@
 {
  "name": "@calcom/web",
-  "version": "2.0.3",
+  "version": "2.1.2",
  "private": true,
  "scripts": {
    "analyze": "ANALYZE=true next build",
@@ -23,7 +23,7 @@
    "yarn": ">=1.19.0 < 2.0.0"
  },
  "dependencies": {
-    "@boxyhq/saml-jackson": "0.3.6",
+    "@boxyhq/saml-jackson": "1.3.1",
    "@calcom/app-store": "*",
    "@calcom/app-store-cli": "*",
    "@calcom/core": "*",
@@ -44,7 +44,7 @@
    "@hookform/error-message": "^2.0.0",
    "@hookform/resolvers": "^2.9.7",
    "@next-auth/prisma-adapter": "^1.0.4",
-    "@next/bundle-analyzer": "12.1.6",
+    "@next/bundle-analyzer": "^12.2.5",
    "@radix-ui/react-avatar": "^1.0.0",
    "@radix-ui/react-collapsible": "^1.0.0",
    "@radix-ui/react-dialog": "^1.0.0",
@@ -60,6 +60,7 @@
    "@stripe/stripe-js": "^1.35.0",
    "@tanstack/react-query": "^4.3.9",
    "@vercel/edge-functions-ui": "^0.2.1",
+    "@vercel/og": "^0.0.19",
    "@wojtekmaj/react-daterange-picker": "^3.3.1",
    "accept-language-parser": "^1.5.0",
    "async": "^3.2.4",
@@ -119,7 +120,7 @@
    "tailwindcss-radix": "^2.6.0",
    "uuid": "^8.3.2",
    "web3": "^1.7.5",
-    "zod": "^3.18.0"
+    "zod": "^3.19.1"
  },
  "devDependencies": {
    "@babel/core": "^7.18.10",
@@ -6,7 +6,6 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 import { Toaster } from "react-hot-toast";
-import { JSONObject } from "superjson/dist/types";

 import {
  sdkActionManager,
@@ -14,6 +13,7 @@ import {
  useEmbedStyles,
  useIsEmbed,
 } from "@calcom/embed-core/embed-iframe";
+import EmptyPage from "@calcom/features/eventtypes/components/EmptyPage";
 import CustomBranding from "@calcom/lib/CustomBranding";
 import defaultEvents, {
  getDynamicEventDescription,
@@ -26,10 +26,12 @@ import useTheme from "@calcom/lib/hooks/useTheme";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import prisma from "@calcom/prisma";
 import { baseEventTypeSelect } from "@calcom/prisma/selects";
+import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 import { BadgeCheckIcon, Icon } from "@calcom/ui/Icon";

 import { useExposePlanGlobally } from "@lib/hooks/useExposePlanGlobally";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
+import { EmbedProps } from "@lib/withEmbedSsr";

 import AvatarGroup from "@components/ui/AvatarGroup";
 import { AvatarSSR } from "@components/ui/AvatarSSR";
@@ -38,7 +40,7 @@ import { ssrInit } from "@server/lib/ssr";

 const EventTypeDescription = dynamic(() => import("@calcom/ui/v2/modules/event-types/EventTypeDescription"));
 const HeadSeo = dynamic(() => import("@components/seo/head-seo"));
-export default function User(props: inferSSRProps<typeof getServerSideProps>) {
+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
  useTheme(user.theme);
@@ -86,7 +88,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
    </ul>
  );

-  const isEmbed = useIsEmbed();
+  const isEmbed = useIsEmbed(props.isEmbed);
  const eventTypeListItemEmbedStyles = useEmbedStyles("eventTypeListItem");
  const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
  const shouldAlignCentrally = !isEmbed || shouldAlignCentrallyInEmbed;
@@ -102,7 +104,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
      telemetry.event(telemetryEventTypes.embedView, collectPageParameters("/[user]"));
    }
  }, [telemetry, router.asPath]);
-
+  const isEventListEmpty = eventTypes.length === 0;
  return (
    <>
      <HeadSeo
@@ -110,9 +112,13 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
        description={
          isDynamicGroup ? `Book events with ${dynamicUsernames.join(", ")}` : (user.bio as string) || ""
        }
-        name={isDynamicGroup ? dynamicNames.join(", ") : nameOrUsername}
-        username={isDynamicGroup ? dynamicUsernames.join(", ") : (user.username as string) || ""}
-        // avatar={user.avatar || undefined}
+        meeting={{
+          title: isDynamicGroup ? "" : `${user.bio}`,
+          profile: { name: `${profile.name}`, image: null },
+          users: isDynamicGroup
+            ? dynamicUsernames.map((username, index) => ({ username, name: dynamicNames[index] }))
+            : [{ username: `${user.username}`, name: `${user.name}` }],
+        }}
      />
      <CustomBranding lightVal={profile.brandColor} darkVal={profile.darkBrandColor} />

@@ -143,7 +149,11 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
            </div>
          )}
          <div
-            className="rounded-md border border-neutral-200 dark:border-neutral-700 dark:hover:border-neutral-600"
+            className={classNames(
+              "rounded-md ",
+              !isEventListEmpty &&
+                "border border-neutral-200 dark:border-neutral-700 dark:hover:border-neutral-600"
+            )}
            data-testid="event-types">
            {user.away ? (
              <div className="overflow-hidden rounded-sm border dark:border-gray-900">
@@ -182,7 +192,6 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
                        <h2 className="dark:text-darkgray-700 pr-2 text-sm font-semibold text-gray-700">
                          {type.title}
                        </h2>
-                        <p className="dark:text-darkgray-600 hidden text-sm font-normal leading-none text-gray-600 md:block">{`/${user.username}/${type.slug}`}</p>
                      </div>
                      <EventTypeDescription eventType={type} />
                    </a>
@@ -191,16 +200,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
              ))
            )}
          </div>
-          {eventTypes.length === 0 && (
-            <div className="overflow-hidden rounded-sm border dark:border-gray-900">
-              <div className="p-8 text-center text-gray-400 dark:text-white">
-                <h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">
-                  {t("uh_oh") as string}
-                </h2>
-                <p className="mx-auto max-w-md">{t("no_event_types_have_been_setup") as string}</p>
-              </div>
-            </div>
-          )}
+          {isEventListEmpty && <EmptyPage name={user.name ?? "User"} />}
        </main>
        <Toaster position="bottom-right" />
      </div>
@@ -209,42 +209,47 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
 }
 User.isThemeSupported = true;

-const getEventTypesWithHiddenFromDB = async (userId: number, plan: UserPlan) => {
-  return await prisma.eventType.findMany({
-    where: {
-      AND: [
-        {
-          teamId: null,
-        },
-        {
-          OR: [
-            {
-              userId,
-            },
-            {
-              users: {
-                some: {
-                  id: userId,
+const getEventTypesWithHiddenFromDB = async (userId: number) => {
+  return (
+    await prisma.eventType.findMany({
+      where: {
+        AND: [
+          {
+            teamId: null,
+          },
+          {
+            OR: [
+              {
+                userId,
+              },
+              {
+                users: {
+                  some: {
+                    id: userId,
+                  },
                },
              },
-            },
-          ],
+            ],
+          },
+        ],
+      },
+      orderBy: [
+        {
+          position: "desc",
+        },
+        {
+          id: "asc",
        },
      ],
-    },
-    orderBy: [
-      {
-        position: "desc",
+      select: {
+        ...baseEventTypeSelect,
+        metadata: true,
      },
-      {
-        id: "asc",
-      },
-    ],
-    select: {
-      metadata: true,
-      ...baseEventTypeSelect,
-    },
-  });
+    })
+  ).map((eventType) => ({
+    ...eventType,
+    metadata: EventTypeMetaDataSchema.parse(eventType.metadata),
+  }));
 };

 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
@@ -279,6 +284,8 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
  if (!users.length) {
    return {
      notFound: true,
+    } as {
+      notFound: true;
    };
  }
  const isDynamicGroup = users.length > 1;
@@ -310,7 +317,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
        darkBrandColor: user.darkBrandColor,
      };

-  const eventTypesWithHidden = isDynamicGroup ? [] : await getEventTypesWithHiddenFromDB(user.id, user.plan);
+  const eventTypesWithHidden = isDynamicGroup ? [] : await getEventTypesWithHiddenFromDB(user.id);
  const dataFetchEnd = Date.now();
  if (context.query.log === "1") {
    context.res.setHeader("X-Data-Fetch-Time", `${dataFetchEnd - dataFetchStart}ms`);
@@ -319,7 +326,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>

  const eventTypes = eventTypesRaw.map((eventType) => ({
    ...eventType,
-    metadata: (eventType.metadata || {}) as JSONObject,
+    metadata: EventTypeMetaDataSchema.parse(eventType.metadata || {}),
  }));

  const isSingleUser = users.length === 1;
@@ -1,4 +1,3 @@
-import { UserPlan } from "@prisma/client";
 import { GetStaticPaths, GetStaticPropsContext } from "next";
 import { JSONObject } from "superjson/dist/types";
 import { z } from "zod";
@@ -9,12 +8,15 @@ import { getDefaultEvent, getGroupName, getUsernameList } from "@calcom/lib/defa
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { parseRecurringEvent } from "@calcom/lib/isRecurringEvent";
 import prisma from "@calcom/prisma";
+import { User } from "@calcom/prisma/client";
+import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";

 import { inferSSRProps } from "@lib/types/inferSSRProps";
+import { EmbedProps } from "@lib/withEmbedSsr";

 import AvailabilityPage from "@components/booking/pages/AvailabilityPage";

-export type AvailabilityPageProps = inferSSRProps<typeof getStaticProps>;
+export type AvailabilityPageProps = inferSSRProps<typeof getStaticProps> & EmbedProps;

 export default function Type(props: AvailabilityPageProps) {
  const { t } = useLocale();
@@ -77,8 +79,27 @@ async function getUserPageProps(context: GetStaticPropsContext) {
      brandColor: true,
      darkBrandColor: true,
      eventTypes: {
-        select: { id: true },
-        // Order by position is important to ensure that the event-type that's enabled is the first in the list because for Free user only first is allowed.
+        where: {
+          // Many-to-many relationship causes inclusion of the team events - cool -
+          // but to prevent these from being selected, make sure the teamId is NULL.
+          AND: [{ slug }, { teamId: null }],
+        },
+        select: {
+          title: true,
+          slug: true,
+          hidden: true,
+          recurringEvent: true,
+          length: true,
+          locations: true,
+          id: true,
+          description: true,
+          price: true,
+          currency: true,
+          requiresConfirmation: true,
+          schedulingType: true,
+          metadata: true,
+          seatsPerTimeSlot: true,
+        },
        orderBy: [
          {
            position: "desc",
@@ -91,93 +112,47 @@ async function getUserPageProps(context: GetStaticPropsContext) {
    },
  });

-  if (!user) return { notFound: true };
+  if (!user || !user.eventTypes) return { notFound: true };

-  const eventTypes = await prisma.eventType.findMany({
-    where: {
-      slug,
-      OR: [{ userId: user.id }, { users: { some: { id: user.id } } }],
-    },
-    // Order is important to ensure that given a slug if there are duplicates, we choose the same event type consistently when showing in event-types list UI(in terms of ordering and disabled event types)
-    // TODO: If we can ensure that there are no duplicates for a [slug, userId] combination in existing data, this requirement might be avoided.
-    orderBy: [
-      {
-        position: "desc",
-      },
-      {
-        id: "asc",
-      },
-    ],
-    select: {
-      title: true,
-      slug: true,
-      hidden: true,
-      recurringEvent: true,
-      length: true,
-      locations: true,
-      id: true,
-      description: true,
-      price: true,
-      currency: true,
-      requiresConfirmation: true,
-      schedulingType: true,
-      metadata: true,
-      seatsPerTimeSlot: true,
-      users: {
-        select: {
-          name: true,
-          username: true,
-          hideBranding: true,
-          brandColor: true,
-          darkBrandColor: true,
-          theme: true,
-          plan: true,
-          allowDynamicBooking: true,
-          timeZone: true,
+  const [eventType]: (typeof user.eventTypes[number] & {
+    users: Pick<User, "name" | "username" | "hideBranding" | "plan" | "timeZone">[];
+  })[] = [
+    {
+      ...user.eventTypes[0],
+      users: [
+        {
+          name: user.name,
+          username: user.username,
+          hideBranding: user.hideBranding,
+          plan: user.plan,
+          timeZone: user.timeZone,
        },
-      },
+      ],
    },
-  });
-
-  if (!eventTypes) return { notFound: true };
-
-  const [eventType] = eventTypes;
+  ];

  if (!eventType) return { notFound: true };

  //TODO: Use zodSchema to verify it instead of using Type Assertion
  const locations = eventType.locations ? (eventType.locations as LocationObject[]) : [];
  const eventTypeObject = Object.assign({}, eventType, {
-    metadata: (eventType.metadata || {}) as JSONObject,
+    metadata: EventTypeMetaDataSchema.parse(eventType.metadata || {}),
    recurringEvent: parseRecurringEvent(eventType.recurringEvent),
    locations: privacyFilteredLocations(locations),
-    users: eventType.users.map((user) => ({
-      name: user.name,
-      username: user.username,
-      hideBranding: user.hideBranding,
-      plan: user.plan,
-      timeZone: user.timeZone,
-    })),
  });

-  const profile = eventType.users[0] || user;
-
  return {
    props: {
      eventType: eventTypeObject,
      profile: {
+        ...eventType.users[0],
        theme: user.theme,
-        name: user.name,
-        username: user.username,
-        hideBranding: user.hideBranding,
-        plan: user.plan,
-        timeZone: user.timeZone,
        allowDynamicBooking: false,
        weekStart: user.weekStart,
        brandColor: user.brandColor,
        darkBrandColor: user.darkBrandColor,
-        slug: `${profile.username}/${eventType.slug}`,
-        image: `${WEBAPP_URL}/${profile.username}/avatar.png`,
+        slug: `${user.username}/${eventType.slug}`,
+        image: `${WEBAPP_URL}/${user.username}/avatar.png`,
      },
      away: user?.away,
      isDynamic: false,
@@ -0,0 +1,21 @@
+import { GetStaticPropsContext } from "next";
+
+import { getStaticProps as _getStaticProps } from "../[type]";
+
+export { getStaticPaths } from "../[type]";
+
+export { default } from "../[type]";
+
+export const getStaticProps = async (context: GetStaticPropsContext) => {
+  const staticResponse = await _getStaticProps(context);
+  if (staticResponse.notFound) {
+    return staticResponse;
+  }
+  return {
+    ...staticResponse,
+    props: {
+      ...staticResponse.props,
+      isEmbed: true,
+    },
+  };
+};
@@ -197,6 +197,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
      isDynamicGroupBooking,
      hasHashedBookingLink: false,
      hashedLink: null,
+      isEmbed: typeof context.query.embed === "string",
    },
  };
 }
@@ -0,0 +1,7 @@
+import withEmbedSsr from "@lib/withEmbedSsr";
+
+import { getServerSideProps as _getServerSideProps } from "../[user]";
+
+export { default } from "../[user]";
+
+export const getServerSideProps = withEmbedSsr(_getServerSideProps);
@@ -3,18 +3,13 @@ import Document, { DocumentContext, Head, Html, Main, NextScript, DocumentProps
 type Props = Record<string, unknown> & DocumentProps;

 function toRunBeforeReactOnClient() {
-  const calEmbedMode = location.search.includes("embed=");
-  try {
-    // eslint-disable-next-line @calcom/eslint/avoid-web-storage
-    window.sessionStorage.setItem("calEmbedMode", String(calEmbedMode));
-  } catch (e) {}
+  const calEmbedMode =
+    location.search.includes("embed=") ||
+    /* Iframe Name */
+    window.name.includes("cal-embed");

  window.isEmbed = () => {
-    try {
-      // eslint-disable-next-line @calcom/eslint/avoid-web-storage
-      return window.sessionStorage.getItem("calEmbedMode") === "true";
-    } catch (e) {}
-    // If we can't use sessionStorage to retrieve embed mode, just use the variable. It would fail to detect embed if page in iframe reloads without embed query param in it.
+    // Once an embed mode always an embed mode
    return calEmbedMode;
  };

@@ -35,18 +30,24 @@ function toRunBeforeReactOnClient() {
    const namespace = url.searchParams.get("embed");
    return namespace;
  };
+
+  window.isPageOptimizedForEmbed = () => {
+    // Those pages are considered optimized, which know at backend that they are rendering for embed.
+    // Such pages can be shown straightaway without a loader for a better embed experience
+    return location.pathname.includes("forms/");
+  };
 }

 class MyDocument extends Document<Props> {
  static async getInitialProps(ctx: DocumentContext) {
+    const isEmbed = ctx.asPath?.includes("/embed") || ctx.asPath?.includes("embedType=");
    const initialProps = await Document.getInitialProps(ctx);
-    return { ...initialProps };
+    return { isEmbed, ...initialProps };
  }

  render() {
    const { locale } = this.props.__NEXT_DATA__;
    const dir = locale === "ar" || locale === "he" ? "rtl" : "ltr";
-
    return (
      <Html lang={locale} dir={dir}>
        <Head>
@@ -76,21 +77,22 @@ class MyDocument extends Document<Props> {
          />
        </Head>

-        {/* Keep the embed hidden till parent initializes and gives it the appropriate styles */}
-        <body className="dark:bg-darkgray-50 desktop-transparent bg-gray-100">
+        <body
+          className="dark:bg-darkgray-50 desktop-transparent bg-gray-100"
+          style={
+            this.props.isEmbed
+              ? {
+                  background: "transparent",
+                  // Keep the embed hidden till parent initializes and
+                  // - gives it the appropriate styles if UI instruction is there.
+                  // - gives iframe the appropriate height(equal to document height) which can only be known after loading the page once in browser.
+                  // - Tells iframe which mode it should be in (dark/light) - if there is a a UI instruction for that
+                  visibility: "hidden",
+                }
+              : {}
+          }>
          <Main />
          <NextScript />
-          {/* In case of Embed we want background to be transparent so that it merges into the website seamlessly. Also, we keep the body hidden here and embed logic would take care of showing the body when it's ready */}
-          {/* We are doing it on browser and not on server because there are some pages which are not SSRd */}
-          <script
-            dangerouslySetInnerHTML={{
-              __html: `
-                if (isEmbed()) {
-                  document.body.style.display="none";
-                  document.body.style.background="transparent";
-                }`,
-            }}
-          />
        </body>
      </Html>
    );
@@ -12,6 +12,7 @@ import path from "path";

 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 { WEBAPP_URL } from "@calcom/lib/constants";
 import { symmetricDecrypt } from "@calcom/lib/crypto";
 import { defaultCookies } from "@calcom/lib/default-cookies";
@@ -22,7 +23,6 @@ import prisma from "@calcom/prisma";
 import { ErrorCode, verifyPassword } from "@lib/auth";
 import CalComAdapter from "@lib/auth/next-auth-custom-adapter";
 import { randomString } from "@lib/random";
-import { hostedCal, isSAMLLoginEnabled, samlLoginUrl } from "@lib/saml";
 import slugify from "@lib/slugify";

 import { GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, IS_GOOGLE_LOGIN_ENABLED } from "@server/lib/constants";
@@ -135,7 +135,7 @@ if (isSAMLLoginEnabled) {
    version: "2.0",
    checks: ["pkce", "state"],
    authorization: {
-      url: `${samlLoginUrl}/api/auth/saml/authorize`,
+      url: `${WEBAPP_URL}/api/auth/saml/authorize`,
      params: {
        scope: "",
        response_type: "code",
@@ -143,10 +143,10 @@ if (isSAMLLoginEnabled) {
      },
    },
    token: {
-      url: `${samlLoginUrl}/api/auth/saml/token`,
+      url: `${WEBAPP_URL}/api/auth/saml/token`,
      params: { grant_type: "authorization_code" },
    },
-    userinfo: `${samlLoginUrl}/api/auth/saml/userinfo`,
+    userinfo: `${WEBAPP_URL}/api/auth/saml/userinfo`,
    profile: (profile) => {
      return {
        id: profile.id || "",
@@ -1,25 +1,24 @@
-import { OAuthReqBody } from "@boxyhq/saml-jackson";
+import { OAuthReq } from "@boxyhq/saml-jackson";
 import { NextApiRequest, NextApiResponse } from "next";

-import { HttpError } from "@calcom/lib/http-error";
+import jackson from "@calcom/features/ee/sso/lib/jackson";

-import jackson from "@lib/jackson";
+import { HttpError } from "@lib/core/http/error";

 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  try {
-    if (req.method !== "GET") {
-      throw new Error("Method not allowed");
-    }
+  const { oauthController } = await jackson();

-    const { oauthController } = await jackson();
-    const { redirect_url } = await oauthController.authorize(req.query as unknown as OAuthReqBody);
-    res.redirect(302, redirect_url);
-  } catch (err: unknown) {
-    if (err instanceof HttpError) {
-      console.error("authorize error:", err);
-      const { message, statusCode = 500 } = err;
-      return res.status(statusCode).send(message);
-    }
-    return res.status(500).send("Unknown error");
+  if (req.method !== "GET") {
+    return res.status(400).send("Method not allowed");
+  }
+
+  try {
+    const { redirect_url } = await oauthController.authorize(req.query as unknown as OAuthReq);
+
+    return res.redirect(302, redirect_url as string);
+  } catch (err) {
+    const { message, statusCode = 500 } = err as HttpError;
+
+    return res.status(statusCode).send(message);
  }
 }
@@ -1,25 +1,14 @@
 import { NextApiRequest, NextApiResponse } from "next";

-import { HttpError } from "@calcom/lib/http-error";
+import jackson from "@calcom/features/ee/sso/lib/jackson";
+import { defaultHandler, defaultResponder } from "@calcom/lib/server";

-import jackson from "@lib/jackson";
-
-export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  try {
-    if (req.method !== "POST") {
-      throw new Error("Method not allowed");
-    }
-
-    const { oauthController } = await jackson();
-    const { redirect_url } = await oauthController.samlResponse(req.body);
-
-    res.redirect(302, redirect_url);
-  } catch (err: unknown) {
-    if (err instanceof HttpError) {
-      console.error("callback error:", err);
-      const { message, statusCode = 500 } = err;
-      return res.status(statusCode).send(message);
-    }
-    return res.status(500).send("Unknown error");
-  }
+async function postHandler(req: NextApiRequest, res: NextApiResponse) {
+  const { oauthController } = await jackson();
+  const { redirect_url } = await oauthController.samlResponse(req.body);
+  if (redirect_url) return res.redirect(302, redirect_url);
 }
+
+export default defaultHandler({
+  POST: Promise.resolve({ default: defaultResponder(postHandler) }),
+});
@@ -1,21 +1,13 @@
-import { NextApiRequest, NextApiResponse } from "next";
+import { NextApiRequest } from "next";

-import jackson from "@lib/jackson";
+import jackson from "@calcom/features/ee/sso/lib/jackson";
+import { defaultHandler, defaultResponder } from "@calcom/lib/server";

-export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  try {
-    if (req.method !== "POST") {
-      throw new Error("Method not allowed");
-    }
-
-    const { oauthController } = await jackson();
-    const result = await oauthController.token(req.body);
-
-    res.json(result);
-  } catch (err: any) {
-    console.error("token error:", err);
-    const { message, statusCode = 500 } = err;
-
-    res.status(statusCode).send(message);
-  }
+async function postHandler(req: NextApiRequest) {
+  const { oauthController } = await jackson();
+  return await oauthController.token(req.body);
 }
+
+export default defaultHandler({
+  POST: Promise.resolve({ default: defaultResponder(postHandler) }),
+});
@@ -1,53 +1,34 @@
-import { NextApiRequest, NextApiResponse } from "next";
+import { NextApiRequest } from "next";
 import z from "zod";

-import jackson from "@lib/jackson";
+import jackson from "@calcom/features/ee/sso/lib/jackson";
+import { HttpError } from "@calcom/lib/http-error";
+import { defaultHandler, defaultResponder } from "@calcom/lib/server";

 const extractAuthToken = (req: NextApiRequest) => {
  const authHeader = req.headers["authorization"];
  const parts = (authHeader || "").split(" ");
-  if (parts.length > 1) {
-    return parts[1];
-  }
+  if (parts.length > 1) return parts[1];

-  return null;
+  // check for query param
+  let arr: string[] = [];
+  const { access_token } = requestQuery.parse(req.query);
+  arr = arr.concat(access_token);
+  if (arr[0].length > 0) return arr[0];
+
+  throw new HttpError({ statusCode: 401, message: "Unauthorized" });
 };

 const requestQuery = z.object({
  access_token: z.string(),
 });

-export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  try {
-    if (req.method !== "GET") {
-      throw new Error("Method not allowed");
-    }
-
-    const { oauthController } = await jackson();
-    let token: string | null = extractAuthToken(req);
-
-    // check for query param
-    if (!token) {
-      let arr: string[] = [];
-      const { access_token } = requestQuery.parse(req.query);
-      arr = arr.concat(access_token);
-      if (arr[0].length > 0) {
-        token = arr[0];
-      }
-    }
-
-    if (!token) {
-      res.status(401).json({ message: "Unauthorized" });
-      return;
-    }
-
-    const profile = await oauthController.userInfo(token);
-
-    res.json(profile);
-  } catch (err: any) {
-    console.error("userinfo error:", err);
-    const { message, statusCode = 500 } = err;
-
-    res.status(statusCode).json({ message });
-  }
+async function getHandler(req: NextApiRequest) {
+  const { oauthController } = await jackson();
+  const token = extractAuthToken(req);
+  return await oauthController.userInfo(token);
 }
+
+export default defaultHandler({
+  GET: Promise.resolve({ default: defaultResponder(getHandler) }),
+});
@@ -1,915 +1,14 @@
-import { BookingStatus, Credential, Prisma, SchedulingType, WebhookTriggerEvents } from "@prisma/client";
-import async from "async";
 import type { NextApiRequest } from "next";
-import { RRule } from "rrule";
-import short from "short-uuid";
-import { v5 as uuidv5 } from "uuid";

-import { getLocationValueForDB, LocationObject } from "@calcom/app-store/locations";
-import { handleEthSignature } from "@calcom/app-store/rainbow/utils/ethereum";
-import { handlePayment } from "@calcom/app-store/stripepayment/lib/server";
-import { cancelScheduledJobs, scheduleTrigger } from "@calcom/app-store/zapier/lib/nodeScheduler";
-import EventManager from "@calcom/core/EventManager";
-import { getEventName } from "@calcom/core/event";
-import { getUserAvailability } from "@calcom/core/getUserAvailability";
-import dayjs from "@calcom/dayjs";
-import {
-  sendAttendeeRequestEmail,
-  sendOrganizerRequestEmail,
-  sendRescheduledEmails,
-  sendScheduledEmails,
-  sendScheduledSeatsEmails,
-} from "@calcom/emails";
-import { scheduleWorkflowReminders } from "@calcom/features/ee/workflows/lib/reminders/reminderScheduler";
-import getWebhooks from "@calcom/features/webhooks/utils/getWebhooks";
-import { isPrismaObjOrUndefined, parseRecurringEvent } from "@calcom/lib";
-import { getDefaultEvent, getGroupName, getUsernameList } from "@calcom/lib/defaultEvents";
-import { getErrorFromUnknown } from "@calcom/lib/errors";
-import isOutOfBounds, { BookingDateInPastError } from "@calcom/lib/isOutOfBounds";
-import logger from "@calcom/lib/logger";
-import { defaultResponder, getLuckyUser } from "@calcom/lib/server";
-import { updateWebUser as syncServicesUpdateWebUser } from "@calcom/lib/sync/SyncServiceManager";
-import prisma, { userSelect } from "@calcom/prisma";
-import { extendedBookingCreateBody, requiredCustomInputSchema } from "@calcom/prisma/zod-utils";
-import type { BufferedBusyTime } from "@calcom/types/BufferedBusyTime";
-import type { AdditionalInformation, CalendarEvent } from "@calcom/types/Calendar";
-import type { EventResult, PartialReference } from "@calcom/types/EventManager";
+import handleNewBooking from "@calcom/features/bookings/lib/handleNewBooking";
+import { getSession } from "@calcom/lib/auth";
+import { defaultResponder } from "@calcom/lib/server";

-import { getSession } from "@lib/auth";
-import { HttpError } from "@lib/core/http/error";
-import sendPayload, { EventTypeInfo } from "@lib/webhooks/sendPayload";
-
-import { getTranslation } from "@server/lib/i18n";
-
-const translator = short();
-const log = logger.getChildLogger({ prefix: ["[api] book:user"] });
-
-type User = Prisma.UserGetPayload<typeof userSelect>;
-type BufferedBusyTimes = BufferedBusyTime[];
-
-/**
- * Refreshes a Credential with fresh data from the database.
- *
- * @param credential
- */
-async function refreshCredential(credential: Credential): Promise<Credential> {
-  const newCredential = await prisma.credential.findUnique({
-    where: {
-      id: credential.id,
-    },
-  });
-
-  if (!newCredential) {
-    return credential;
-  } else {
-    return newCredential;
-  }
-}
-
-/**
- * Refreshes the given set of credentials.
- *
- * @param credentials
- */
-async function refreshCredentials(credentials: Array<Credential>): Promise<Array<Credential>> {
-  return await async.mapLimit(credentials, 5, refreshCredential);
-}
-
-function isAvailable(busyTimes: BufferedBusyTimes, time: dayjs.ConfigType, length: number): boolean {
-  // Check for conflicts
-  let t = true;
-
-  // Early return
-  if (!Array.isArray(busyTimes) || busyTimes.length < 1) return t;
-
-  let i = 0;
-  while (t === true && i < busyTimes.length) {
-    const busyTime = busyTimes[i];
-    i++;
-    const startTime = dayjs(busyTime.start);
-    const endTime = dayjs(busyTime.end);
-
-    // Check if time is between start and end times
-    if (dayjs(time).isBetween(startTime, endTime, null, "[)")) {
-      t = false;
-      break;
-    }
-
-    // Check if slot end time is between start and end time
-    if (dayjs(time).add(length, "minutes").isBetween(startTime, endTime)) {
-      t = false;
-      break;
-    }
-
-    // Check if startTime is between slot
-    if (startTime.isBetween(dayjs(time), dayjs(time).add(length, "minutes"))) {
-      t = false;
-      break;
-    }
-  }
-
-  return t;
-}
-
-const getEventTypesFromDB = async (eventTypeId: number) => {
-  const eventType = await prisma.eventType.findUniqueOrThrow({
-    where: {
-      id: eventTypeId,
-    },
-    select: {
-      id: true,
-      customInputs: true,
-      users: userSelect,
-      team: {
-        select: {
-          id: true,
-          name: true,
-        },
-      },
-      title: true,
-      length: true,
-      eventName: true,
-      schedulingType: true,
-      description: true,
-      periodType: true,
-      periodStartDate: true,
-      periodEndDate: true,
-      periodDays: true,
-      periodCountCalendarDays: true,
-      requiresConfirmation: true,
-      userId: true,
-      price: true,
-      currency: true,
-      metadata: true,
-      destinationCalendar: true,
-      hideCalendarNotes: true,
-      seatsPerTimeSlot: true,
-      recurringEvent: true,
-      workflows: {
-        include: {
-          workflow: {
-            include: {
-              steps: true,
-            },
-          },
-        },
-      },
-      locations: true,
-      timeZone: true,
-      schedule: {
-        select: {
-          availability: true,
-          timeZone: true,
-        },
-      },
-      availability: {
-        select: {
-          startTime: true,
-          endTime: true,
-          days: true,
-        },
-      },
-    },
-  });
-
-  return {
-    ...eventType,
-    recurringEvent: parseRecurringEvent(eventType.recurringEvent),
-    locations: (eventType.locations ?? []) as LocationObject[],
-  };
-};
-
-async function ensureAvailableUsers(
-  eventType: Awaited<ReturnType<typeof getEventTypesFromDB>> & {
-    users: User[];
-  },
-  input: { dateFrom: string; dateTo: string }
-) {
-  const availableUsers: typeof eventType.users = [];
-  /** Let's start checking for availability */
-  for (const user of eventType.users) {
-    const { busy: bufferedBusyTimes } = await getUserAvailability(
-      {
-        userId: user.id,
-        eventTypeId: eventType.id,
-        ...input,
-      },
-      { user, eventType }
-    );
-
-    console.log("calendarBusyTimes==>>>", bufferedBusyTimes);
-
-    let isAvailableToBeBooked = true;
-    try {
-      if (eventType.recurringEvent) {
-        const recurringEvent = parseRecurringEvent(eventType.recurringEvent);
-        const allBookingDates = new RRule({ dtstart: new Date(input.dateFrom), ...recurringEvent }).all();
-        // Go through each date for the recurring event and check if each one's availability
-        // DONE: Decreased computational complexity from O(2^n) to O(n) by refactoring this loop to stop
-        // running at the first unavailable time.
-        let i = 0;
-        while (isAvailableToBeBooked === true && i < allBookingDates.length) {
-          const aDate = allBookingDates[i];
-          i++;
-          isAvailableToBeBooked = isAvailable(bufferedBusyTimes, aDate, eventType.length);
-          // We bail at the first false, we don't need to keep checking
-          if (!isAvailableToBeBooked) break;
-        }
-      } else {
-        isAvailableToBeBooked = isAvailable(bufferedBusyTimes, input.dateFrom, eventType.length);
-      }
-    } catch {
-      log.debug({
-        message: "Unable set isAvailableToBeBooked. Using true. ",
-      });
-    }
-
-    if (isAvailableToBeBooked) {
-      availableUsers.push(user);
-    }
-  }
-  if (!availableUsers.length) {
-    throw new Error("No available users found.");
-  }
-  return availableUsers;
-}
-
-async function handler(req: NextApiRequest) {
+async function handler(req: NextApiRequest & { userId?: number }) {
  const session = await getSession({ req });
-  const currentUser = session?.user;
-
-  const { recurringCount, noEmail, eventTypeSlug, eventTypeId, hasHashedBookingLink, language, ...reqBody } =
-    extendedBookingCreateBody.parse(req.body);
-
-  // handle dynamic user
-  const dynamicUserList = Array.isArray(reqBody.user)
-    ? getGroupName(reqBody.user)
-    : getUsernameList(reqBody.user);
-  const tAttendees = await getTranslation(language ?? "en", "common");
-  const tGuests = await getTranslation("en", "common");
-  log.debug(`Booking eventType ${eventTypeId} started`);
-
-  const eventType =
-    !eventTypeId && !!eventTypeSlug ? getDefaultEvent(eventTypeSlug) : await getEventTypesFromDB(eventTypeId);
-
-  if (!eventType) throw new HttpError({ statusCode: 404, message: "eventType.notFound" });
-
-  // Check if required custom inputs exist
-  if (eventType.customInputs) {
-    eventType.customInputs.forEach((customInput) => {
-      if (customInput.required) {
-        requiredCustomInputSchema.parse(
-          reqBody.customInputs.find((userInput) => userInput.label === customInput.label)?.value
-        );
-      }
-    });
-  }
-
-  let timeOutOfBounds = false;
-  try {
-    timeOutOfBounds = isOutOfBounds(reqBody.start, {
-      periodType: eventType.periodType,
-      periodDays: eventType.periodDays,
-      periodEndDate: eventType.periodEndDate,
-      periodStartDate: eventType.periodStartDate,
-      periodCountCalendarDays: eventType.periodCountCalendarDays,
-    });
-  } catch (error) {
-    if (error instanceof BookingDateInPastError) {
-      // TODO: HttpError should not bleed through to the console.
-      log.info(`Booking eventType ${eventTypeId} failed`, error);
-      throw new HttpError({ statusCode: 400, message: error.message });
-    }
-    log.debug({
-      message: "Unable set timeOutOfBounds. Using false. ",
-    });
-  }
-
-  if (timeOutOfBounds) {
-    const error = {
-      errorCode: "BookingTimeOutOfBounds",
-      message: `EventType '${eventType.eventName}' cannot be booked at this time.`,
-    };
-
-    throw new HttpError({ statusCode: 400, message: error.message });
-  }
-
-  let users = !eventTypeId
-    ? await prisma.user.findMany({
-        where: {
-          username: {
-            in: dynamicUserList,
-          },
-        },
-        ...userSelect,
-      })
-    : eventType.users;
-  const isDynamicAllowed = !users.some((user) => !user.allowDynamicBooking);
-  if (!isDynamicAllowed && !eventTypeId) {
-    throw new HttpError({
-      message: "Some of the users in this group do not allow dynamic booking",
-      statusCode: 400,
-    });
-  }
-
-  // If this event was pre-relationship migration
-  // TODO: Establish whether this is dead code.
-  if (!users.length && eventType.userId) {
-    const eventTypeUser = await prisma.user.findUnique({
-      where: {
-        id: eventType.userId,
-      },
-      ...userSelect,
-    });
-    if (!eventTypeUser) throw new HttpError({ statusCode: 404, message: "eventTypeUser.notFound" });
-    users.push(eventTypeUser);
-  }
-
-  if (!users) throw new HttpError({ statusCode: 404, message: "eventTypeUser.notFound" });
-
-  if (!eventType.seatsPerTimeSlot) {
-    const availableUsers = await ensureAvailableUsers(
-      {
-        ...eventType,
-        users,
-      },
-      {
-        dateFrom: reqBody.start,
-        dateTo: reqBody.end,
-      }
-    );
-
-    // Add an if conditional if there are no seats on the event type
-    // Assign to only one user when ROUND_ROBIN
-    if (eventType.schedulingType === SchedulingType.ROUND_ROBIN) {
-      users = [await getLuckyUser("MAXIMIZE_AVAILABILITY", { availableUsers, eventTypeId: eventType.id })];
-    } else {
-      // excluding ROUND_ROBIN, all users have availability required.
-      if (availableUsers.length !== users.length) {
-        throw new Error("Some users are unavailable for booking.");
-      }
-      users = availableUsers;
-    }
-  }
-
-  console.log("available users", users);
-
-  // @TODO: use the returned address somewhere in booking creation?
-  // const address: string | undefined = await ...
-  await handleEthSignature(eventType.metadata, reqBody.ethSignature);
-
-  const [organizerUser] = users;
-  const tOrganizer = await getTranslation(organizerUser.locale ?? "en", "common");
-
-  const invitee = [
-    {
-      email: reqBody.email,
-      name: reqBody.name,
-      timeZone: reqBody.timeZone,
-      language: { translate: tAttendees, locale: language ?? "en" },
-    },
-  ];
-  const guests = (reqBody.guests || []).map((guest) => ({
-    email: guest,
-    name: "",
-    timeZone: reqBody.timeZone,
-    language: { translate: tGuests, locale: "en" },
-  }));
-
-  const seed = `${organizerUser.username}:${dayjs(reqBody.start).utc().format()}:${new Date().getTime()}`;
-  const uid = translator.fromUUID(uuidv5(seed, uuidv5.URL));
-
-  const bookingLocation = getLocationValueForDB(reqBody.location, eventType.locations);
-  console.log(bookingLocation, reqBody.location, eventType.locations);
-  const customInputs = {} as NonNullable<CalendarEvent["customInputs"]>;
-
-  const teamMemberPromises =
-    eventType.schedulingType === SchedulingType.COLLECTIVE
-      ? users.slice(1).map(async function (user) {
-          return {
-            email: user.email || "",
-            name: user.name || "",
-            timeZone: user.timeZone,
-            language: {
-              translate: await getTranslation(user.locale ?? "en", "common"),
-              locale: user.locale ?? "en",
-            },
-          };
-        })
-      : [];
-
-  const teamMembers = await Promise.all(teamMemberPromises);
-
-  const attendeesList = [...invitee, ...guests, ...teamMembers];
-
-  const eventNameObject = {
-    attendeeName: reqBody.name || "Nameless",
-    eventType: eventType.title,
-    eventName: eventType.eventName,
-    host: organizerUser.name || "Nameless",
-    location: bookingLocation,
-    t: tOrganizer,
-  };
-
-  const additionalNotes = reqBody.notes;
-
-  let evt: CalendarEvent = {
-    type: eventType.title,
-    title: getEventName(eventNameObject), //this needs to be either forced in english, or fetched for each attendee and organizer separately
-    description: eventType.description,
-    additionalNotes,
-    customInputs,
-    startTime: dayjs(reqBody.start).utc().format(),
-    endTime: dayjs(reqBody.end).utc().format(),
-    organizer: {
-      name: organizerUser.name || "Nameless",
-      email: organizerUser.email || "Email-less",
-      timeZone: organizerUser.timeZone,
-      language: { translate: tOrganizer, locale: organizerUser.locale ?? "en" },
-    },
-    attendees: attendeesList,
-    location: bookingLocation, // Will be processed by the EventManager later.
-    /** For team events & dynamic collective events, we will need to handle each member destinationCalendar eventually */
-    destinationCalendar: eventType.destinationCalendar || organizerUser.destinationCalendar,
-    hideCalendarNotes: eventType.hideCalendarNotes,
-    requiresConfirmation: eventType.requiresConfirmation ?? false,
-    eventTypeId: eventType.id,
-  };
-
-  // For seats, if the booking already exists then we want to add the new attendee to the existing booking
-  if (reqBody.bookingUid) {
-    if (!eventType.seatsPerTimeSlot)
-      throw new HttpError({ statusCode: 404, message: "Event type does not have seats" });
-
-    const booking = await prisma.booking.findUnique({
-      where: {
-        uid: reqBody.bookingUid,
-      },
-      select: {
-        id: true,
-        attendees: true,
-        userId: true,
-        references: {
-          select: {
-            type: true,
-            uid: true,
-            meetingId: true,
-            meetingPassword: true,
-            meetingUrl: true,
-            externalCalendarId: true,
-          },
-        },
-      },
-    });
-    if (!booking) throw new HttpError({ statusCode: 404, message: "Booking not found" });
-
-    // Need to add translation for attendees to pass type checks. Since these values are never written to the db we can just use the new attendee language
-    const bookingAttendees = booking.attendees.map((attendee) => {
-      return { ...attendee, language: { translate: tAttendees, locale: language ?? "en" } };
-    });
-
-    evt = { ...evt, attendees: [...bookingAttendees, invitee[0]] };
-
-    if (eventType.seatsPerTimeSlot <= booking.attendees.length)
-      throw new HttpError({ statusCode: 409, message: "Booking seats are full" });
-
-    if (booking.attendees.some((attendee) => attendee.email === invitee[0].email))
-      throw new HttpError({ statusCode: 409, message: "Already signed up for time slot" });
-
-    await prisma.booking.update({
-      where: {
-        uid: reqBody.bookingUid,
-      },
-      data: {
-        attendees: {
-          create: {
-            email: invitee[0].email,
-            name: invitee[0].name,
-            timeZone: invitee[0].timeZone,
-            locale: invitee[0].language.locale,
-          },
-        },
-      },
-    });
-
-    const newSeat = booking.attendees.length !== 0;
-
-    await sendScheduledSeatsEmails(evt, invitee[0], newSeat);
-
-    const credentials = await refreshCredentials(organizerUser.credentials);
-    const eventManager = new EventManager({ ...organizerUser, credentials });
-    await eventManager.updateCalendarAttendees(evt, booking);
-
-    req.statusCode = 201;
-    return booking;
-  }
-
-  if (reqBody.customInputs.length > 0) {
-    reqBody.customInputs.forEach(({ label, value }) => {
-      customInputs[label] = value;
-    });
-  }
-
-  if (eventType.schedulingType === SchedulingType.COLLECTIVE) {
-    evt.team = {
-      members: users.map((user) => user.name || user.username || "Nameless"),
-      name: eventType.team?.name || "Nameless",
-    }; // used for invitee emails
-  }
-
-  if (reqBody.recurringEventId && eventType.recurringEvent) {
-    // Overriding the recurring event configuration count to be the actual number of events booked for
-    // the recurring event (equal or less than recurring event configuration count)
-    eventType.recurringEvent = Object.assign({}, eventType.recurringEvent, { count: recurringCount });
-    evt.recurringEvent = eventType.recurringEvent;
-  }
-
-  // Initialize EventManager with credentials
-  const rescheduleUid = reqBody.rescheduleUid;
-  async function getOriginalRescheduledBooking(uid: string) {
-    return prisma.booking.findFirst({
-      where: {
-        uid,
-        status: {
-          in: [BookingStatus.ACCEPTED, BookingStatus.CANCELLED, BookingStatus.PENDING],
-        },
-      },
-      include: {
-        attendees: {
-          select: {
-            name: true,
-            email: true,
-            locale: true,
-            timeZone: true,
-          },
-        },
-        user: {
-          select: {
-            id: true,
-            name: true,
-            email: true,
-            locale: true,
-            timeZone: true,
-          },
-        },
-        payment: true,
-      },
-    });
-  }
-  type BookingType = Prisma.PromiseReturnType<typeof getOriginalRescheduledBooking>;
-  let originalRescheduledBooking: BookingType = null;
-  if (rescheduleUid) {
-    originalRescheduledBooking = await getOriginalRescheduledBooking(rescheduleUid);
-  }
-
-  async function createBooking() {
-    if (originalRescheduledBooking) {
-      evt.title = originalRescheduledBooking?.title || evt.title;
-      evt.description = originalRescheduledBooking?.description || evt.additionalNotes;
-      evt.location = originalRescheduledBooking?.location;
-    }
-
-    const eventTypeRel = !eventTypeId
-      ? {}
-      : {
-          connect: {
-            id: eventTypeId,
-          },
-        };
-
-    const dynamicEventSlugRef = !eventTypeId ? eventTypeSlug : null;
-    const dynamicGroupSlugRef = !eventTypeId ? (reqBody.user as string).toLowerCase() : null;
-
-    // If the user is not the owner of the event, new booking should be always pending.
-    // Otherwise, an owner rescheduling should be always accepted.
-    const userReschedulingIsOwner = currentUser
-      ? originalRescheduledBooking?.user?.id === currentUser.id
-      : false;
-    const isConfirmedByDefault =
-      (!eventType.requiresConfirmation && !eventType.price) || userReschedulingIsOwner;
-    const newBookingData: Prisma.BookingCreateInput = {
-      uid,
-      title: evt.title,
-      startTime: dayjs.utc(evt.startTime).toDate(),
-      endTime: dayjs.utc(evt.endTime).toDate(),
-      description: evt.additionalNotes,
-      customInputs: isPrismaObjOrUndefined(evt.customInputs),
-      status: isConfirmedByDefault ? BookingStatus.ACCEPTED : BookingStatus.PENDING,
-      location: evt.location,
-      eventType: eventTypeRel,
-      smsReminderNumber: reqBody.smsReminderNumber,
-      attendees: {
-        createMany: {
-          data: evt.attendees.map((attendee) => {
-            //if attendee is team member, it should fetch their locale not booker's locale
-            //perhaps make email fetch request to see if his locale is stored, else
-            const retObj = {
-              name: attendee.name,
-              email: attendee.email,
-              timeZone: attendee.timeZone,
-              locale: attendee.language.locale,
-            };
-            return retObj;
-          }),
-        },
-      },
-      dynamicEventSlugRef,
-      dynamicGroupSlugRef,
-      user: {
-        connect: {
-          id: organizerUser.id,
-        },
-      },
-      destinationCalendar: evt.destinationCalendar
-        ? {
-            connect: { id: evt.destinationCalendar.id },
-          }
-        : undefined,
-    };
-    if (reqBody.recurringEventId) {
-      newBookingData.recurringEventId = reqBody.recurringEventId;
-    }
-    if (originalRescheduledBooking) {
-      newBookingData["paid"] = originalRescheduledBooking.paid;
-      newBookingData["fromReschedule"] = originalRescheduledBooking.uid;
-      if (newBookingData.attendees?.createMany?.data) {
-        newBookingData.attendees.createMany.data = originalRescheduledBooking.attendees;
-      }
-      if (originalRescheduledBooking.recurringEventId) {
-        newBookingData.recurringEventId = originalRescheduledBooking.recurringEventId;
-      }
-    }
-    const createBookingObj = {
-      include: {
-        user: {
-          select: { email: true, name: true, timeZone: true },
-        },
-        attendees: true,
-        payment: true,
-      },
-      data: newBookingData,
-    };
-
-    if (originalRescheduledBooking?.paid && originalRescheduledBooking?.payment) {
-      const bookingPayment = originalRescheduledBooking?.payment?.find((payment) => payment.success);
-
-      if (bookingPayment) {
-        createBookingObj.data.payment = {
-          connect: { id: bookingPayment.id },
-        };
-      }
-    }
-
-    if (typeof eventType.price === "number" && eventType.price > 0) {
-      /* Validate if there is any stripe_payment credential for this user */
-      /*  note: removes custom error message about stripe */
-      await prisma.credential.findFirstOrThrow({
-        where: {
-          type: "stripe_payment",
-          userId: organizerUser.id,
-        },
-        select: {
-          id: true,
-        },
-      });
-    }
-
-    return prisma.booking.create(createBookingObj);
-  }
-
-  let results: EventResult<AdditionalInformation>[] = [];
-  let referencesToCreate: PartialReference[] = [];
-
-  type Booking = Prisma.PromiseReturnType<typeof createBooking>;
-  let booking: Booking | null = null;
-  try {
-    booking = await createBooking();
-    // Sync Services
-    await syncServicesUpdateWebUser(
-      currentUser &&
-        (await prisma.user.findFirst({
-          where: { id: currentUser.id },
-          select: { id: true, email: true, name: true, plan: true, username: true, createdDate: true },
-        }))
-    );
-    evt.uid = booking?.uid ?? null;
-  } catch (_err) {
-    const err = getErrorFromUnknown(_err);
-    log.error(`Booking ${eventTypeId} failed`, "Error when saving booking to db", err.message);
-    if (err.code === "P2002") {
-      throw new HttpError({ statusCode: 409, message: "booking.conflict" });
-    }
-    throw err;
-  }
-
-  // After polling videoBusyTimes, credentials might have been changed due to refreshment, so query them again.
-  const credentials = await refreshCredentials(organizerUser.credentials);
-  const eventManager = new EventManager({ ...organizerUser, credentials });
-
-  if (originalRescheduledBooking?.uid) {
-    // Use EventManager to conditionally use all needed integrations.
-    const updateManager = await eventManager.reschedule(
-      evt,
-      originalRescheduledBooking.uid,
-      booking?.id,
-      reqBody.rescheduleReason
-    );
-    // This gets overridden when updating the event - to check if notes have been hidden or not. We just reset this back
-    // to the default description when we are sending the emails.
-    evt.description = eventType.description;
-
-    results = updateManager.results;
-    referencesToCreate = updateManager.referencesToCreate;
-    if (results.length > 0 && results.some((res) => !res.success)) {
-      const error = {
-        errorCode: "BookingReschedulingMeetingFailed",
-        message: "Booking Rescheduling failed",
-      };
-
-      log.error(`Booking ${organizerUser.name} failed`, error, results);
-    } else {
-      const metadata: AdditionalInformation = {};
-
-      if (results.length) {
-        // TODO: Handle created event metadata more elegantly
-        const [updatedEvent] = Array.isArray(results[0].updatedEvent)
-          ? results[0].updatedEvent
-          : [results[0].updatedEvent];
-        if (updatedEvent) {
-          metadata.hangoutLink = updatedEvent.hangoutLink;
-          metadata.conferenceData = updatedEvent.conferenceData;
-          metadata.entryPoints = updatedEvent.entryPoints;
-        }
-      }
-
-      if (noEmail !== true) {
-        await sendRescheduledEmails({
-          ...evt,
-          additionalInformation: metadata,
-          additionalNotes, // Resets back to the additionalNote input and not the override value
-          cancellationReason: reqBody.rescheduleReason,
-        });
-      }
-    }
-    // If it's not a reschedule, doesn't require confirmation and there's no price,
-    // Create a booking
-  } else if (!eventType.requiresConfirmation && !eventType.price) {
-    // Use EventManager to conditionally use all needed integrations.
-    const createManager = await eventManager.create(evt);
-
-    // This gets overridden when creating the event - to check if notes have been hidden or not. We just reset this back
-    // to the default description when we are sending the emails.
-    evt.description = eventType.description;
-
-    results = createManager.results;
-    referencesToCreate = createManager.referencesToCreate;
-    if (results.length > 0 && results.every((res) => !res.success)) {
-      const error = {
-        errorCode: "BookingCreatingMeetingFailed",
-        message: "Booking failed",
-      };
-
-      log.error(`Booking ${organizerUser.username} failed`, error, results);
-    } else {
-      const metadata: AdditionalInformation = {};
-
-      if (results.length) {
-        // TODO: Handle created event metadata more elegantly
-        metadata.hangoutLink = results[0].createdEvent?.hangoutLink;
-        metadata.conferenceData = results[0].createdEvent?.conferenceData;
-        metadata.entryPoints = results[0].createdEvent?.entryPoints;
-      }
-      if (noEmail !== true) {
-        await sendScheduledEmails({
-          ...evt,
-          additionalInformation: metadata,
-          additionalNotes,
-          customInputs,
-        });
-      }
-    }
-  }
-
-  if (eventType.requiresConfirmation && !rescheduleUid && noEmail !== true) {
-    await sendOrganizerRequestEmail({ ...evt, additionalNotes });
-    await sendAttendeeRequestEmail({ ...evt, additionalNotes }, attendeesList[0]);
-  }
-
-  if (
-    !Number.isNaN(eventType.price) &&
-    eventType.price > 0 &&
-    !originalRescheduledBooking?.paid &&
-    !!booking
-  ) {
-    const [firstStripeCredential] = organizerUser.credentials.filter((cred) => cred.type == "stripe_payment");
-
-    if (!firstStripeCredential)
-      throw new HttpError({ statusCode: 400, message: "Missing payment credentials" });
-
-    if (!booking.user) booking.user = organizerUser;
-    const payment = await handlePayment(evt, eventType, firstStripeCredential, booking);
-
-    req.statusCode = 201;
-    return { ...booking, message: "Payment required", paymentUid: payment.uid };
-  }
-
-  log.debug(`Booking ${organizerUser.username} completed`);
-
-  const eventTrigger: WebhookTriggerEvents = rescheduleUid
-    ? WebhookTriggerEvents.BOOKING_RESCHEDULED
-    : WebhookTriggerEvents.BOOKING_CREATED;
-  const subscriberOptions = {
-    userId: organizerUser.id,
-    eventTypeId,
-    triggerEvent: eventTrigger,
-  };
-
-  const subscriberOptionsMeetingEnded = {
-    userId: organizerUser.id,
-    eventTypeId,
-    triggerEvent: WebhookTriggerEvents.MEETING_ENDED,
-  };
-
-  const subscribersMeetingEnded = await getWebhooks(subscriberOptionsMeetingEnded);
-
-  subscribersMeetingEnded.forEach((subscriber) => {
-    if (rescheduleUid && originalRescheduledBooking) {
-      cancelScheduledJobs(originalRescheduledBooking);
-    }
-    if (booking && booking.status === BookingStatus.ACCEPTED) {
-      scheduleTrigger(booking, subscriber.subscriberUrl, subscriber);
-    }
-  });
-
-  // Send Webhook call if hooked to BOOKING_CREATED & BOOKING_RESCHEDULED
-  const subscribers = await getWebhooks(subscriberOptions);
-  console.log("evt:", {
-    ...evt,
-    metadata: reqBody.metadata,
-  });
-  const bookingId = booking?.id;
-
-  const eventTypeInfo: EventTypeInfo = {
-    eventTitle: eventType.title,
-    eventDescription: eventType.description,
-    requiresConfirmation: eventType.requiresConfirmation || null,
-    price: eventType.price,
-    currency: eventType.currency,
-    length: eventType.length,
-  };
-
-  const promises = subscribers.map((sub) =>
-    sendPayload(sub.secret, eventTrigger, new Date().toISOString(), sub, {
-      ...evt,
-      ...eventTypeInfo,
-      bookingId,
-      rescheduleUid,
-      metadata: reqBody.metadata,
-      eventTypeId,
-      status: eventType.requiresConfirmation ? "PENDING" : "ACCEPTED",
-    }).catch((e) => {
-      console.error(`Error executing webhook for event: ${eventTrigger}, URL: ${sub.subscriberUrl}`, e);
-    })
-  );
-  await Promise.all(promises);
-  // Avoid passing referencesToCreate with id unique constrain values
-  // refresh hashed link if used
-  const urlSeed = `${organizerUser.username}:${dayjs(reqBody.start).utc().format()}`;
-  const hashedUid = translator.fromUUID(uuidv5(urlSeed, uuidv5.URL));
-
-  if (hasHashedBookingLink) {
-    await prisma.hashedLink.update({
-      where: {
-        link: reqBody.hashedLink as string,
-      },
-      data: {
-        link: hashedUid,
-      },
-    });
-  }
-  if (!booking) throw new HttpError({ statusCode: 400, message: "Booking failed" });
-  await prisma.booking.update({
-    where: {
-      uid: booking.uid,
-    },
-    data: {
-      references: {
-        createMany: {
-          data: referencesToCreate,
-        },
-      },
-    },
-  });
-
-  await scheduleWorkflowReminders(
-    eventType.workflows,
-    reqBody.smsReminderNumber as string | null,
-    evt,
-    evt.requiresConfirmation || false,
-    rescheduleUid ? true : false
-  );
-  // booking successful
-  req.statusCode = 201;
+  /* To mimic API behavior */
+  req.userId = session?.user?.id;
+  const booking = await handleNewBooking(req);
  return booking;
 }

@@ -1,295 +0,0 @@
-import {
-  Attendee,
-  Booking,
-  BookingReference,
-  BookingStatus,
-  EventType,
-  User,
-  WebhookTriggerEvents,
-} from "@prisma/client";
-import type { NextApiRequest, NextApiResponse } from "next";
-import { getSession } from "next-auth/react";
-import type { TFunction } from "next-i18next";
-import { z, ZodError } from "zod";
-
-import { getCalendar } from "@calcom/app-store/_utils/getCalendar";
-import { CalendarEventBuilder } from "@calcom/core/builders/CalendarEvent/builder";
-import { CalendarEventDirector } from "@calcom/core/builders/CalendarEvent/director";
-import { deleteMeeting } from "@calcom/core/videoClient";
-import dayjs from "@calcom/dayjs";
-import { sendRequestRescheduleEmail } from "@calcom/emails";
-import { isPrismaObjOrUndefined } from "@calcom/lib";
-import { getTranslation } from "@calcom/lib/server/i18n";
-import prisma from "@calcom/prisma";
-import type { CalendarEvent, Person } from "@calcom/types/Calendar";
-
-import sendPayload from "@lib/webhooks/sendPayload";
-import getWebhooks from "@lib/webhooks/subscriptions";
-
-export type RescheduleResponse = Booking & {
-  attendees: Attendee[];
-};
-export type PersonAttendeeCommonFields = Pick<
-  User,
-  "id" | "email" | "name" | "locale" | "timeZone" | "username"
->;
-
-const rescheduleSchema = z.object({
-  bookingId: z.string(),
-  rescheduleReason: z.string().optional(),
-});
-
-const findUserDataByUserId = async (userId: number) => {
-  return await prisma.user.findUniqueOrThrow({
-    where: {
-      id: userId,
-    },
-    select: {
-      id: true,
-      name: true,
-      username: true,
-      email: true,
-      timeZone: true,
-      locale: true,
-      credentials: true,
-      destinationCalendar: true,
-      teams: true,
-    },
-  });
-};
-
-const handler = async (
-  req: NextApiRequest,
-  res: NextApiResponse
-): Promise<RescheduleResponse | NextApiResponse | void> => {
-  const session = await getSession({ req });
-  const {
-    bookingId,
-    rescheduleReason: cancellationReason,
-  }: { bookingId: string; rescheduleReason: string; cancellationReason: string } = req.body;
-  let user: Awaited<ReturnType<typeof findUserDataByUserId>>;
-  try {
-    if (session?.user?.id) {
-      user = await findUserDataByUserId(session?.user.id);
-    } else {
-      return res.status(501).end();
-    }
-
-    const bookingToReschedule = await prisma.booking.findFirstOrThrow({
-      select: {
-        id: true,
-        uid: true,
-        userId: true,
-        title: true,
-        description: true,
-        startTime: true,
-        endTime: true,
-        eventTypeId: true,
-        eventType: true,
-        location: true,
-        attendees: true,
-        references: true,
-        customInputs: true,
-        dynamicEventSlugRef: true,
-        dynamicGroupSlugRef: true,
-        destinationCalendar: true,
-      },
-      where: {
-        uid: bookingId,
-        NOT: {
-          status: {
-            in: [BookingStatus.CANCELLED, BookingStatus.REJECTED],
-          },
-        },
-      },
-    });
-
-    if (!bookingToReschedule.userId) {
-      throw new Error("Booking to reschedule doesn't have an owner.");
-    }
-    if (!bookingToReschedule.eventType) {
-      throw new Error("EventType not found for current booking.");
-    }
-
-    const bookingBelongsToTeam = !!bookingToReschedule.eventType?.teamId;
-    if (bookingBelongsToTeam && bookingToReschedule.eventType?.teamId) {
-      const userTeamIds = user.teams.map((item) => item.teamId);
-      if (userTeamIds.indexOf(bookingToReschedule?.eventType?.teamId) === -1) {
-        throw new Error("User isn't a member on the team");
-      }
-    }
-    if (!bookingBelongsToTeam && bookingToReschedule.userId !== user.id) {
-      throw new Error("User isn't owner of the current booking");
-    }
-
-    if (bookingToReschedule && user) {
-      let event: Partial<EventType> = {};
-      if (bookingToReschedule.eventTypeId) {
-        event = await prisma.eventType.findFirstOrThrow({
-          select: {
-            title: true,
-            users: true,
-            schedulingType: true,
-            recurringEvent: true,
-          },
-          where: {
-            id: bookingToReschedule.eventTypeId,
-          },
-        });
-      }
-      await prisma.booking.update({
-        where: {
-          id: bookingToReschedule.id,
-        },
-        data: {
-          rescheduled: true,
-          cancellationReason,
-          status: BookingStatus.CANCELLED,
-          updatedAt: dayjs().toISOString(),
-        },
-      });
-
-      const [mainAttendee] = bookingToReschedule.attendees;
-      // @NOTE: Should we assume attendees language?
-      const tAttendees = await getTranslation(mainAttendee.locale ?? "en", "common");
-      const usersToPeopleType = (
-        users: PersonAttendeeCommonFields[],
-        selectedLanguage: TFunction
-      ): Person[] => {
-        return users?.map((user) => {
-          return {
-            email: user.email || "",
-            name: user.name || "",
-            username: user?.username || "",
-            language: { translate: selectedLanguage, locale: user.locale || "en" },
-            timeZone: user?.timeZone,
-          };
-        });
-      };
-
-      const userTranslation = await getTranslation(user.locale ?? "en", "common");
-      const [userAsPeopleType] = usersToPeopleType([user], userTranslation);
-
-      const builder = new CalendarEventBuilder();
-      builder.init({
-        title: bookingToReschedule.title,
-        type: event && event.title ? event.title : bookingToReschedule.title,
-        startTime: bookingToReschedule.startTime.toISOString(),
-        endTime: bookingToReschedule.endTime.toISOString(),
-        attendees: usersToPeopleType(
-          // username field doesn't exists on attendee but could be in the future
-          bookingToReschedule.attendees as unknown as PersonAttendeeCommonFields[],
-          tAttendees
-        ),
-        organizer: userAsPeopleType,
-      });
-
-      const director = new CalendarEventDirector();
-      director.setBuilder(builder);
-      director.setExistingBooking(bookingToReschedule);
-      director.setCancellationReason(cancellationReason);
-      if (event) {
-        await director.buildForRescheduleEmail();
-      } else {
-        await director.buildWithoutEventTypeForRescheduleEmail();
-      }
-
-      // Handling calendar and videos cancellation
-      // This can set previous time as available, until virtual calendar is done
-      const credentialsMap = new Map();
-      user.credentials.forEach((credential) => {
-        credentialsMap.set(credential.type, credential);
-      });
-      const bookingRefsFiltered: BookingReference[] = bookingToReschedule.references.filter(
-        (ref) => !!credentialsMap.get(ref.type)
-      );
-      bookingRefsFiltered.forEach((bookingRef) => {
-        if (bookingRef.uid) {
-          if (bookingRef.type.endsWith("_calendar")) {
-            const calendar = getCalendar(credentialsMap.get(bookingRef.type));
-
-            return calendar?.deleteEvent(
-              bookingRef.uid,
-              builder.calendarEvent,
-              bookingRef.externalCalendarId
-            );
-          } else if (bookingRef.type.endsWith("_video")) {
-            return deleteMeeting(credentialsMap.get(bookingRef.type), bookingRef.uid);
-          }
-        }
-      });
-
-      // Send emails
-      await sendRequestRescheduleEmail(builder.calendarEvent, {
-        rescheduleLink: builder.rescheduleLink,
-      });
-
-      const evt: CalendarEvent = {
-        title: bookingToReschedule?.title,
-        type: event && event.title ? event.title : bookingToReschedule.title,
-        description: bookingToReschedule?.description || "",
-        customInputs: isPrismaObjOrUndefined(bookingToReschedule.customInputs),
-        startTime: bookingToReschedule?.startTime ? dayjs(bookingToReschedule.startTime).format() : "",
-        endTime: bookingToReschedule?.endTime ? dayjs(bookingToReschedule.endTime).format() : "",
-        organizer: userAsPeopleType,
-        attendees: usersToPeopleType(
-          // username field doesn't exists on attendee but could be in the future
-          bookingToReschedule.attendees as unknown as PersonAttendeeCommonFields[],
-          tAttendees
-        ),
-        uid: bookingToReschedule?.uid,
-        location: bookingToReschedule?.location,
-        destinationCalendar:
-          bookingToReschedule?.destinationCalendar || bookingToReschedule?.destinationCalendar,
-        cancellationReason: `Please reschedule. ${cancellationReason}`, // TODO::Add i18-next for this
-      };
-
-      // Send webhook
-      const eventTrigger: WebhookTriggerEvents = "BOOKING_CANCELLED";
-      // Send Webhook call if hooked to BOOKING.CANCELLED
-      const subscriberOptions = {
-        userId: bookingToReschedule.userId,
-        eventTypeId: (bookingToReschedule.eventTypeId as number) || 0,
-        triggerEvent: eventTrigger,
-      };
-      const webhooks = await getWebhooks(subscriberOptions);
-      const promises = webhooks.map((webhook) =>
-        sendPayload(webhook.secret, eventTrigger, new Date().toISOString(), webhook, evt).catch((e) => {
-          console.error(
-            `Error executing webhook for event: ${eventTrigger}, URL: ${webhook.subscriberUrl}`,
-            e
-          );
-        })
-      );
-      await Promise.all(promises);
-    }
-
-    return res.status(200).json(bookingToReschedule);
-  } catch (error) {
-    if (error instanceof Error) {
-      throw new Error("Error.request.reschedule " + error?.message);
-    }
-  }
-};
-
-function validate(
-  handler: (req: NextApiRequest, res: NextApiResponse) => Promise<RescheduleResponse | NextApiResponse | void>
-) {
-  return async (req: NextApiRequest, res: NextApiResponse) => {
-    if (req.method === "POST") {
-      try {
-        rescheduleSchema.parse(req.body);
-      } catch (error) {
-        if (error instanceof ZodError && error?.name === "ZodError") {
-          return res.status(400).json(error?.issues);
-        }
-        return res.status(402).end();
-      }
-    } else {
-      return res.status(405).end();
-    }
-    await handler(req, res);
-  };
-}
-
-export default validate(handler);
@@ -1,397 +1,14 @@
-import {
-  BookingStatus,
-  Prisma,
-  PrismaPromise,
-  WebhookTriggerEvents,
-  WorkflowMethods,
-  WorkflowReminder,
-} from "@prisma/client";
-import { NextApiRequest, NextApiResponse } from "next";
-import z from "zod";
+import type { NextApiRequest } from "next";

-import { getCalendar } from "@calcom/app-store/_utils/getCalendar";
-import { FAKE_DAILY_CREDENTIAL } from "@calcom/app-store/dailyvideo/lib/VideoApiAdapter";
-import { DailyLocationType } from "@calcom/app-store/locations";
-import { refund } from "@calcom/app-store/stripepayment/lib/server";
-import { cancelScheduledJobs } from "@calcom/app-store/zapier/lib/nodeScheduler";
-import { deleteMeeting } from "@calcom/core/videoClient";
-import dayjs from "@calcom/dayjs";
-import { sendCancelledEmails } from "@calcom/emails";
-import { deleteScheduledEmailReminder } from "@calcom/features/ee/workflows/lib/reminders/emailReminderManager";
-import { sendCancelledReminders } from "@calcom/features/ee/workflows/lib/reminders/reminderScheduler";
-import { deleteScheduledSMSReminder } from "@calcom/features/ee/workflows/lib/reminders/smsReminderManager";
-import { isPrismaObjOrUndefined, parseRecurringEvent } from "@calcom/lib";
-import { HttpError } from "@calcom/lib/http-error";
-import { defaultHandler, defaultResponder } from "@calcom/lib/server";
-import prisma, { bookingMinimalSelect } from "@calcom/prisma";
-import type { CalendarEvent } from "@calcom/types/Calendar";
+import handleCancelBooking from "@calcom/features/bookings/lib/handleCancelBooking";
+import { getSession } from "@calcom/lib/auth";
+import { defaultResponder, defaultHandler } from "@calcom/lib/server";

-import { getSession } from "@lib/auth";
-import sendPayload, { EventTypeInfo } from "@lib/webhooks/sendPayload";
-import getWebhooks from "@lib/webhooks/subscriptions";
-
-import { getTranslation } from "@server/lib/i18n";
-
-const bodySchema = z.object({
-  uid: z.string(),
-  allRemainingBookings: z.boolean().optional(),
-  cancellationReason: z.string().optional(),
-});
-
-async function handler(req: NextApiRequest, res: NextApiResponse) {
-  const { uid, allRemainingBookings, cancellationReason } = bodySchema.parse(req.body);
+async function handler(req: NextApiRequest & { userId?: number }) {
  const session = await getSession({ req });
-
-  const bookingToDelete = await prisma.booking.findUnique({
-    where: {
-      uid,
-    },
-    select: {
-      ...bookingMinimalSelect,
-      recurringEventId: true,
-      userId: true,
-      user: {
-        select: {
-          id: true,
-          credentials: true,
-          email: true,
-          timeZone: true,
-          name: true,
-          destinationCalendar: true,
-        },
-      },
-      location: true,
-      references: {
-        select: {
-          uid: true,
-          type: true,
-          externalCalendarId: true,
-          credentialId: true,
-        },
-      },
-      payment: true,
-      paid: true,
-      eventType: {
-        select: {
-          recurringEvent: true,
-          title: true,
-          description: true,
-          requiresConfirmation: true,
-          price: true,
-          currency: true,
-          length: true,
-          workflows: {
-            include: {
-              workflow: {
-                include: {
-                  steps: true,
-                },
-              },
-            },
-          },
-        },
-      },
-      uid: true,
-      eventTypeId: true,
-      destinationCalendar: true,
-      smsReminderNumber: true,
-      workflowReminders: true,
-      scheduledJobs: true,
-    },
-  });
-
-  if (!bookingToDelete || !bookingToDelete.user) {
-    throw new HttpError({ statusCode: 404, message: "Booking not found" });
-  }
-
-  if ((!session || session.user?.id !== bookingToDelete.user?.id) && bookingToDelete.startTime < new Date()) {
-    throw new HttpError({ statusCode: 403, message: "Cannot cancel past events" });
-  }
-
-  if (!bookingToDelete.userId) {
-    throw new HttpError({ statusCode: 404, message: "User not found" });
-  }
-
-  const organizer = await prisma.user.findFirstOrThrow({
-    where: {
-      id: bookingToDelete.userId,
-    },
-    select: {
-      name: true,
-      email: true,
-      timeZone: true,
-      locale: true,
-    },
-  });
-
-  const attendeesListPromises = bookingToDelete.attendees.map(async (attendee) => {
-    return {
-      name: attendee.name,
-      email: attendee.email,
-      timeZone: attendee.timeZone,
-      language: {
-        translate: await getTranslation(attendee.locale ?? "en", "common"),
-        locale: attendee.locale ?? "en",
-      },
-    };
-  });
-
-  const attendeesList = await Promise.all(attendeesListPromises);
-  const tOrganizer = await getTranslation(organizer.locale ?? "en", "common");
-
-  const evt: CalendarEvent = {
-    title: bookingToDelete?.title,
-    type: (bookingToDelete?.eventType?.title as string) || bookingToDelete?.title,
-    description: bookingToDelete?.description || "",
-    customInputs: isPrismaObjOrUndefined(bookingToDelete.customInputs),
-    startTime: bookingToDelete?.startTime ? dayjs(bookingToDelete.startTime).format() : "",
-    endTime: bookingToDelete?.endTime ? dayjs(bookingToDelete.endTime).format() : "",
-    organizer: {
-      email: organizer.email,
-      name: organizer.name ?? "Nameless",
-      timeZone: organizer.timeZone,
-      language: { translate: tOrganizer, locale: organizer.locale ?? "en" },
-    },
-    attendees: attendeesList,
-    uid: bookingToDelete?.uid,
-    /* Include recurringEvent information only when cancelling all bookings */
-    recurringEvent: allRemainingBookings
-      ? parseRecurringEvent(bookingToDelete.eventType?.recurringEvent)
-      : undefined,
-    location: bookingToDelete?.location,
-    destinationCalendar: bookingToDelete?.destinationCalendar || bookingToDelete?.user.destinationCalendar,
-    cancellationReason: cancellationReason,
-  };
-  // Hook up the webhook logic here
-  const eventTrigger: WebhookTriggerEvents = "BOOKING_CANCELLED";
-  // Send Webhook call if hooked to BOOKING.CANCELLED
-  const subscriberOptions = {
-    userId: bookingToDelete.userId,
-    eventTypeId: (bookingToDelete.eventTypeId as number) || 0,
-    triggerEvent: eventTrigger,
-  };
-
-  const eventTypeInfo: EventTypeInfo = {
-    eventTitle: bookingToDelete?.eventType?.title || null,
-    eventDescription: bookingToDelete?.eventType?.description || null,
-    requiresConfirmation: bookingToDelete?.eventType?.requiresConfirmation || null,
-    price: bookingToDelete?.eventType?.price || null,
-    currency: bookingToDelete?.eventType?.currency || null,
-    length: bookingToDelete?.eventType?.length || null,
-  };
-
-  const webhooks = await getWebhooks(subscriberOptions);
-  const promises = webhooks.map((webhook) =>
-    sendPayload(webhook.secret, eventTrigger, new Date().toISOString(), webhook, {
-      ...evt,
-      ...eventTypeInfo,
-      status: "CANCELLED",
-    }).catch((e) => {
-      console.error(`Error executing webhook for event: ${eventTrigger}, URL: ${webhook.subscriberUrl}`, e);
-    })
-  );
-  await Promise.all(promises);
-
-  //Workflows - schedule reminders
-  if (bookingToDelete.eventType?.workflows) {
-    await sendCancelledReminders(
-      bookingToDelete.eventType?.workflows,
-      bookingToDelete.smsReminderNumber,
-      evt
-    );
-  }
-
-  let updatedBookings: {
-    uid: string;
-    workflowReminders: WorkflowReminder[];
-    scheduledJobs: string[];
-  }[] = [];
-
-  // by cancelling first, and blocking whilst doing so; we can ensure a cancel
-  // action always succeeds even if subsequent integrations fail cancellation.
-  if (bookingToDelete.eventType?.recurringEvent && bookingToDelete.recurringEventId && allRemainingBookings) {
-    const recurringEventId = bookingToDelete.recurringEventId;
-    // Proceed to mark as cancelled all remaining recurring events instances (greater than or equal to right now)
-    await prisma.booking.updateMany({
-      where: {
-        recurringEventId,
-        startTime: {
-          gte: new Date(),
-        },
-      },
-      data: {
-        status: BookingStatus.CANCELLED,
-        cancellationReason: cancellationReason,
-      },
-    });
-    const allUpdatedBookings = await prisma.booking.findMany({
-      where: {
-        recurringEventId: bookingToDelete.recurringEventId,
-        startTime: {
-          gte: new Date(),
-        },
-      },
-      select: {
-        workflowReminders: true,
-        uid: true,
-        scheduledJobs: true,
-      },
-    });
-    updatedBookings = updatedBookings.concat(allUpdatedBookings);
-  } else {
-    const updatedBooking = await prisma.booking.update({
-      where: {
-        uid,
-      },
-      data: {
-        status: BookingStatus.CANCELLED,
-        cancellationReason: cancellationReason,
-      },
-      select: {
-        workflowReminders: true,
-        uid: true,
-        scheduledJobs: true,
-      },
-    });
-    updatedBookings.push(updatedBooking);
-  }
-
-  /** TODO: Remove this without breaking functionality */
-  if (bookingToDelete.location === DailyLocationType) {
-    bookingToDelete.user.credentials.push(FAKE_DAILY_CREDENTIAL);
-  }
-
-  const apiDeletes = [];
-
-  const bookingCalendarReference = bookingToDelete.references.find((reference) =>
-    reference.type.includes("_calendar")
-  );
-
-  if (bookingCalendarReference) {
-    const { credentialId, uid, externalCalendarId } = bookingCalendarReference;
-    // If the booking calendar reference contains a credentialId
-    if (credentialId) {
-      // Find the correct calendar credential under user credentials
-      const calendarCredential = bookingToDelete.user.credentials.find(
-        (credential) => credential.id === credentialId
-      );
-      if (calendarCredential) {
-        const calendar = getCalendar(calendarCredential);
-        apiDeletes.push(calendar?.deleteEvent(uid, evt, externalCalendarId));
-      }
-      // For bookings made before the refactor we go through the old behaviour of running through each calendar credential
-    } else {
-      bookingToDelete.user.credentials
-        .filter((credential) => credential.type.endsWith("_calendar"))
-        .forEach((credential) => {
-          const calendar = getCalendar(credential);
-          apiDeletes.push(calendar?.deleteEvent(uid, evt, externalCalendarId));
-        });
-    }
-  }
-
-  const bookingVideoReference = bookingToDelete.references.find((reference) =>
-    reference.type.includes("_video")
-  );
-
-  // If the video reference has a credentialId find the specific credential
-  if (bookingVideoReference && bookingVideoReference.credentialId) {
-    const { credentialId, uid } = bookingVideoReference;
-    if (credentialId) {
-      const videoCredential = bookingToDelete.user.credentials.find(
-        (credential) => credential.id === credentialId
-      );
-
-      if (videoCredential) {
-        apiDeletes.push(deleteMeeting(videoCredential, uid));
-      }
-    }
-    // For bookings made before this refactor we go through the old behaviour of running through each video credential
-  } else {
-    bookingToDelete.user.credentials
-      .filter((credential) => credential.type.endsWith("_video"))
-      .forEach((credential) => {
-        apiDeletes.push(deleteMeeting(credential, uid));
-      });
-  }
-
-  // Avoiding taking care of recurrence for now as Payments are not supported with Recurring Events at the moment
-  if (bookingToDelete && bookingToDelete.paid) {
-    const evt: CalendarEvent = {
-      type: bookingToDelete?.eventType?.title as string,
-      title: bookingToDelete.title,
-      description: bookingToDelete.description ?? "",
-      customInputs: isPrismaObjOrUndefined(bookingToDelete.customInputs),
-      startTime: bookingToDelete.startTime.toISOString(),
-      endTime: bookingToDelete.endTime.toISOString(),
-      organizer: {
-        email: bookingToDelete.user?.email ?? "dev@calendso.com",
-        name: bookingToDelete.user?.name ?? "no user",
-        timeZone: bookingToDelete.user?.timeZone ?? "",
-        language: { translate: tOrganizer, locale: organizer.locale ?? "en" },
-      },
-      attendees: attendeesList,
-      location: bookingToDelete.location ?? "",
-      uid: bookingToDelete.uid ?? "",
-      destinationCalendar: bookingToDelete?.destinationCalendar || bookingToDelete?.user.destinationCalendar,
-    };
-    await refund(bookingToDelete, evt);
-    await prisma.booking.update({
-      where: {
-        id: bookingToDelete.id,
-      },
-      data: {
-        status: BookingStatus.REJECTED,
-      },
-    });
-
-    // We skip the deletion of the event, because that would also delete the payment reference, which we should keep
-    await apiDeletes;
-    return res.status(200).json({ message: "Booking successfully deleted." });
-  }
-
-  const attendeeDeletes = prisma.attendee.deleteMany({
-    where: {
-      bookingId: bookingToDelete.id,
-    },
-  });
-
-  const bookingReferenceDeletes = prisma.bookingReference.deleteMany({
-    where: {
-      bookingId: bookingToDelete.id,
-    },
-  });
-
-  // delete scheduled jobs of cancelled bookings
-  updatedBookings.forEach((booking) => {
-    cancelScheduledJobs(booking);
-  });
-
-  //Workflows - delete all reminders for bookings
-  const remindersToDelete: PrismaPromise<Prisma.BatchPayload>[] = [];
-  updatedBookings.forEach((booking) => {
-    booking.workflowReminders.forEach((reminder) => {
-      if (reminder.scheduled && reminder.referenceId) {
-        if (reminder.method === WorkflowMethods.EMAIL) {
-          deleteScheduledEmailReminder(reminder.referenceId);
-        } else if (reminder.method === WorkflowMethods.SMS) {
-          deleteScheduledSMSReminder(reminder.referenceId);
-        }
-      }
-      const reminderToDelete = prisma.workflowReminder.deleteMany({
-        where: {
-          id: reminder.id,
-        },
-      });
-      remindersToDelete.push(reminderToDelete);
-    });
-  });
-
-  await Promise.all([apiDeletes, attendeeDeletes, bookingReferenceDeletes].concat(remindersToDelete));
-
-  await sendCancelledEmails(evt);
-
-  res.status(204).end();
+  /* To mimic API behavior */
+  req.userId = session?.user?.id;
+  return await handleCancelBooking(req);
 }

 export default defaultHandler({
--- a/Show More
+++ b/Show More