v2.1.2

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

.env.appStore.example

@@ -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=""
 # *********************************************************************************************************

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

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

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

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

.github/workflows/check-if-ui-has-changed.yml

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

.github/workflows/check-types.yml

@@ -1,6 +1,6 @@
 name: Check types
 on:
-  pull_request_target:
+  pull_request:
     branches:
       - main
     paths:

.github/workflows/e2e-app-store.yml

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

.github/workflows/e2e-embed.yml

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

.github/workflows/e2e.yml

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

.github/workflows/labeler.yml

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

.github/workflows/lint.yml

@@ -1,6 +1,6 @@
 name: Lint
 on:
-  pull_request_target:
+  pull_request:
     branches:
       - main
     paths:

.github/workflows/test.yml

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

.vscode/settings.json

@@ -6,5 +6,5 @@
   },
   "typescript.preferences.importModuleSpecifier": "non-relative",
   "spellright.language": ["en"],
-  "spellright.documentTypes": ["markdown"]
+  "spellright.documentTypes": ["markdown", "typescript"]
 }

CONTRIBUTING.md

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

README.md

@@ -31,13 +31,13 @@
    <a href="https://news.ycombinator.com/item?id=26817795"><img src="https://img.shields.io/badge/Hacker%20News-311-%23FF6600" alt="Hacker News"></a>
    <a href="https://github.com/calcom/cal.com/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-AGPLv3-purple" alt="License"></a>
    <a href="https://github.com/calcom/cal.com/pulse"><img src="https://img.shields.io/github/commit-activity/m/calcom/cal.com" alt="Commits-per-month"></a>
-   <a href="https://cal.com/pricing"><img src="https://img.shields.io/badge/Pricing-%2412%2Fmonth-brightgreen" alt="Pricing"></a>
+   <a href="https://cal.com/pricing"><img src="https://img.shields.io/badge/Pricing-Free-brightgreen" alt="Pricing"></a>
    <a href="https://jitsu.com?utm_source=github/calcom/cal.com"><img src="https://img.shields.io/badge/Metrics_tracked_by-JITSU-AA00FF?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACKSURBVHgBrZDRCYAwDEQv6gCOoKO4hOCXI9QVnEZwiY5iF5GaVClaBNtioCSUvCR3tMJaxIfZgW4AGUoEPVwgPZoS0Dmgg3NBVDFNbMIsmYCak3J1jDk9iCQvsKJvkzr71N81Gj6vDT/LU2P6RhY63jcafk3YJEbgeZpiFyc/5HJKv8Ef273NSfABGbQfUZhnOSAAAAAASUVORK5CYII=" alt="Jitsu Tracked"></a>
    <img src="https://api.checklyhq.com/v1/badges/checks/5e048048-1b51-47ba-9209-60607507622e?responseTime=true" alt="Checkly Availability" />
    <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.
 

apps/storybook/package.json

@@ -15,14 +15,15 @@
   "dependencies": {
     "@calcom/dayjs": "*",
     "@calcom/ui": "*",
-    "@radix-ui/react-avatar": "^0.1.4",
+    "@radix-ui/react-avatar": "^1.0.0",
-    "@radix-ui/react-collapsible": "^0.1.0",
+    "@radix-ui/react-collapsible": "^1.0.0",
-    "@radix-ui/react-dialog": "^0.1.0",
+    "@radix-ui/react-dialog": "^1.0.0",
-    "@radix-ui/react-dropdown-menu": "^0.1.1",
+    "@radix-ui/react-dropdown-menu": "^1.0.0",
-    "@radix-ui/react-id": "^0.1.0",
+    "@radix-ui/react-id": "^1.0.0",
-    "@radix-ui/react-radio-group": "^0.1.1",
+    "@radix-ui/react-popover": "^1.0.0",
-    "@radix-ui/react-slider": "^0.1.1",
+    "@radix-ui/react-radio-group": "^1.0.0",
-    "@radix-ui/react-switch": "^0.1.1",
+    "@radix-ui/react-slider": "^1.0.0",
+    "@radix-ui/react-switch": "^1.0.0",
     "@radix-ui/react-tooltip": "^1.0.0",
     "next": "^12.2.5",
     "next-transpile-modules": "^9.0.0",

apps/storybook/stories/ToggleGroup.stories.tsx

@@ -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" },
+      ]}
+    />
+  );
+};

apps/web/components/App.tsx

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

apps/web/components/Gates.tsx

@@ -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}
+              chainId={appData.blockchainId as number}
-              tokenAddress={metadata.smartContractAddress as string}>
+              tokenAddress={appData.smartContractAddress as string}>
               {gateWrappers}
             </RainbowGate>
           );

apps/web/components/I18nLanguageHandler.tsx

@@ -10,7 +10,9 @@ export function useViewerI18n() {
      * i18n should never be clubbed with other queries, so that it's caching can be managed independently.
      * We intend to not cache i18n query
      **/
+    trpc: {
       context: { skipBatch: true },
+    },
   });
 }
 

apps/web/components/apps/AdditionalCalendarSelector.tsx

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

apps/web/components/apps/AllApps.tsx

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

apps/web/components/apps/App.tsx

@@ -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 min-w-[672px] 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} />

apps/web/components/apps/AppCard.tsx

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

apps/web/components/apps/CalendarListContainer.tsx

@@ -1,26 +1,25 @@
+import { useMutation } from "@tanstack/react-query";
 import Link from "next/link";
 import { Fragment } from "react";
-import { useMutation } from "react-query";
 
 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,9 +174,12 @@ function ConnectedCalendarsList(props: Props) {
                         />
                       </div>
                     }>
+                    <div className="border-t border-gray-200">
                       {!fromOnboarding && (
                         <>
-                        <p className="px-4 pt-4 text-sm text-neutral-500">{t("toggle_calendars_conflict")}</p>
+                          <p className="px-4 pt-4 text-sm text-neutral-500">
+                            {t("toggle_calendars_conflict")}
+                          </p>
                           <ul className="space-y-2 p-4">
                             {item.calendars.map((cal) => (
                               <CalendarSwitch
@@ -190,6 +194,7 @@ function ConnectedCalendarsList(props: Props) {
                           </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

apps/web/components/apps/Categories.tsx

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

apps/web/components/apps/IntegrationListItem.tsx

@@ -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 rounded-md border transition-colors duration-500",
+        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>
   );
 }

apps/web/components/apps/OmniInstallAppButton.tsx

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

apps/web/components/apps/Slider.tsx

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

apps/web/components/apps/TrendingAppsSlider.tsx

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

apps/web/components/auth/SAMLLogin.tsx

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

apps/web/components/availability/NewScheduleButton.tsx

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

apps/web/components/booking/AvailableEventLocations.tsx

@@ -1,11 +1,11 @@
 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);
@@ -23,12 +23,20 @@ export function AvailableEventLocations({ locations }: { locations: Props["event
               )}
               alt={`${eventLocationType.label} icon`}
             />
-              <span key={location.type}>{locationKeyToString(location)} </span>
+            <Tooltip content={locationKeyToString(location)}>
+              <a
+                target="_blank"
+                href={locationKeyToString(location) ?? "/"}
+                className="truncate"
+                key={location.type}
+                rel="noreferrer">
+                {locationKeyToString(location)}
+              </a>
+            </Tooltip>
           </div>
         );
       })}
     </div>
-    </div>
   ) : (
     <></>
   );

apps/web/components/booking/AvailableTimes.tsx

@@ -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="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-4 text-left text-base">
+      <div className="mb-6 flex items-center text-left text-base">
-        <span className="text-bookingdarker dark:text-darkgray-800 mb-8 w-1/2 break-words font-semibold text-gray-900">
+        <div className="mr-4">
-          {nameOfDay(i18n.language, Number(date.format("d")))}
+          <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.format(", D ")}
+            , {date.toDate().toLocaleString(i18n.language, { month: "long" })} {date.format(" D ")}
-          {date.toDate().toLocaleString(i18n.language, { month: "long" })}
           </span>
         </div>
-      <div className="grid flex-grow grid-cols-1 gap-x-2 overflow-y-auto sm:block md:h-[364px]">
+        <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="-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;

apps/web/components/booking/BookingDescription.tsx

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

apps/web/components/booking/BookingListItem.tsx

@@ -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) {
@@ -44,10 +46,25 @@ function BookingListItem(booking: BookingItemProps) {
   const mutation = trpc.useMutation(["viewer.bookings.confirm"], {
     onSuccess: () => {
       setRejectionDialogIsOpen(false);
+      showToast(t("booking_confirmation_success"), "success");
+      utils.invalidateQueries("viewer.bookings");
+    },
+    onError: () => {
+      showToast(t("booking_confirmation_failed"), "error");
       utils.invalidateQueries("viewer.bookings");
     },
   });
 
+  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,
@@ -56,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:
+      label: (isTabRecurring || isTabUnconfirmed) && isRecurring ? t("reject_all") : t("reject"),
-        booking.listingStatus === "recurring" && booking.recurringEventId !== null
-          ? t("reject_all")
-          : t("reject"),
       onClick: () => {
         setRejectionDialogIsOpen(true);
       },
@@ -86,10 +93,7 @@ function BookingListItem(booking: BookingItemProps) {
     },
     {
       id: "confirm",
-      label:
+      label: (isTabRecurring || isTabUnconfirmed) && isRecurring ? t("confirm_all") : t("confirm"),
-        booking.listingStatus === "recurring" && booking.recurringEventId !== null
-          ? t("confirm_all")
-          : t("confirm"),
       onClick: () => {
         bookingConfirm(true);
       },
@@ -102,17 +106,10 @@ function BookingListItem(booking: BookingItemProps) {
   let bookedActions: ActionType[] = [
     {
       id: "cancel",
-      label:
+      label: isTabRecurring && isRecurring ? t("cancel_all_remaining") : t("cancel"),
-        booking.listingStatus === "recurring" && booking.recurringEventId !== null
-          ? 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}${
+      href: `/cancel/${booking.uid}${isTabRecurring && isRecurring ? "?allRemainingBookings=true" : ""}`,
-        booking.listingStatus === "recurring" && booking.recurringEventId !== null
-          ? "?allRemainingBookings=true"
-          : ""
-      }`,
       icon: Icon.FiX,
     },
     {
@@ -146,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");
   }
 
@@ -179,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[] = [];
+  // @FIXME: This is importing the RRULE library which is already heavy. Find out a more optimal way do this.
-  let recurringDates: Date[] = [];
+  const [recurringStrings, recurringDates] = useMemo(() => {
-
+    if (booking.recurringBookings !== undefined && booking.eventType.recurringEvent?.freq !== undefined) {
-  if (booking.recurringBookings && booking.eventType.recurringEvent?.freq !== undefined) {
+      return extractRecurringDates(booking, user?.timeZone, i18n);
-    [recurringStrings, recurringDates] = extractRecurringDates(
-      booking.recurringBookings,
-      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: {
@@ -201,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,
@@ -214,6 +210,7 @@ function BookingListItem(booking: BookingItemProps) {
       },
     });
   };
+
   return (
     <>
       <RescheduleDialog
@@ -262,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:w-48" 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")} -{" "}
+              {formatTime(booking.startTime, user?.timeFormat, user?.timeZone)} -{" "}
-              {dayjs(booking.endTime).format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")}
+              {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 && (
@@ -288,22 +294,25 @@ function BookingListItem(booking: BookingItemProps) {
             )}
 
             <div className="mt-2 text-sm text-gray-400">
-              <RecurringBookingsTooltip
+              <RecurringBookingsTooltip booking={booking} recurringDates={recurringDates} />
-                booking={booking}
-                recurringStrings={recurringStrings}
-                recurringDates={recurringDates}
-              />
             </div>
           </div>
         </td>
-        <td className={"flex-1 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")} -{" "}
+                {formatTime(booking.startTime, user?.timeFormat, user?.timeZone)} -{" "}
-                {dayjs(booking.endTime).format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")}
+                {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>
 
@@ -323,11 +332,7 @@ function BookingListItem(booking: BookingItemProps) {
               </Badge>
             )}
             <div className="text-sm text-gray-400 sm:hidden">
-              <RecurringBookingsTooltip
+              <RecurringBookingsTooltip booking={booking} recurringDates={recurringDates} />
-                booking={booking}
-                recurringStrings={recurringStrings}
-                recurringDates={recurringDates}
-              />
             </div>
           </div>
 
@@ -335,7 +340,7 @@ function BookingListItem(booking: BookingItemProps) {
             <div
               title={booking.title}
               className={classNames(
-                "max-w-10/12 sm:max-w-56 truncate text-sm font-medium leading-6 text-neutral-900 md:max-w-max",
+                "max-w-10/12 sm:max-w-56 text-sm font-medium leading-6 text-neutral-900 md:max-w-full",
                 isCancelled ? "line-through" : ""
               )}>
               {booking.title}
@@ -347,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>
@@ -365,20 +370,8 @@ function BookingListItem(booking: BookingItemProps) {
               </div>
             )}
           </div>
-          <div className="flex justify-end sm:hidden">
-            <div className="whitespace-nowrap pt-2 pb-4 text-right text-sm font-medium ltr:pr-4 rtl:pl-4">
-              {isUpcoming && !isCancelled ? (
-                <>
-                  {isPending && user?.id === booking.user?.id && <TableActions actions={pendingActions} />}
-                  {isConfirmed && <TableActions actions={bookedActions} />}
-                  {isRejected && <div className="text-sm text-gray-500">{t("rejected")}</div>}
-                </>
-              ) : null}
-              {isPast && isPending && !isConfirmed ? <TableActions actions={bookedActions} /> : null}
-            </div>
-          </div>
         </td>
-        <td className="hidden whitespace-nowrap py-4 text-right text-sm font-medium ltr:pr-4 rtl:pl-4 sm:block">
+        <td className="py-4 pl-4 text-right text-sm font-medium ltr:pr-4 rtl:pl-4 sm:pl-0">
           {isUpcoming && !isCancelled ? (
             <>
               {isPending && user?.id === booking.user?.id && <TableActions actions={pendingActions} />}
@@ -400,26 +393,34 @@ function BookingListItem(booking: BookingItemProps) {
 
 interface RecurringBookingsTooltipProps {
   booking: BookingItemProps;
-  recurringStrings: string[];
   recurringDates: Date[];
 }
 
-const RecurringBookingsTooltip = ({
+const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookingsTooltipProps) => {
-  booking,
+  // Get user so we can determine 12/24 hour format preferences
-  recurringStrings,
+  const query = useMeQuery();
-  recurringDates,
+  const user = query.data;
-}: RecurringBookingsTooltipProps) => {
   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) => (
+              content={recurringDates.map((aDate, key) => (
-                <p key={key}>{aDate}</p>
+                <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
@@ -429,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>

apps/web/components/booking/CancelBooking.tsx

@@ -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,
+                    id: booking?.id,
-                    reason: cancellationReason,
+                    cancellationReason: cancellationReason,
                   };
 
                   telemetry.event(telemetryEventTypes.bookingCancelled, collectPageParameters());

apps/web/components/booking/TimeOptions.tsx

@@ -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 TimezoneSelect, { ITimezoneOption } from "@calcom/ui/v2/core/TimezoneSelect";
-import { Switch } from "@calcom/ui/v2";
 
-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"

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

@@ -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 Popover from "@radix-ui/react-popover";
-import * as Collapsible from "@radix-ui/react-collapsible";
 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,13 +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 } from "@calcom/lib/timeFormat";
+import { detectBrowserTimeFormat, setIs24hClockInLocalStorage, TimeFormat } from "@calcom/lib/timeFormat";
-import { localStorage } from "@calcom/lib/webstorage";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui/Icon";
 import DatePicker from "@calcom/ui/v2/modules/booker/DatePicker";
@@ -37,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("/");
@@ -79,7 +79,7 @@ const useSlots = ({
   usernameList: string[];
   timeZone?: string;
 }) => {
-  const { data, isLoading, isIdle } = trpc.useQuery(
+  const { data, isLoading, isPaused } = trpc.useQuery(
     [
       "viewer.public.slots.getSchedule",
       {
@@ -101,13 +101,14 @@ const useSlots = ({
     }
   }, [data]);
 
-  // The very first time isIdle is set if auto-fetch is disabled, so isIdle should also be considered a loading state.
+  // The very first time isPaused is set if auto-fetch is disabled, so isPaused should also be considered a loading state.
-  return { slots: cachedSlots, isLoading: isLoading || isIdle };
+  return { slots: cachedSlots, isLoading: isLoading || isPaused };
 };
 
 const SlotPicker = ({
   eventType,
   timeFormat,
+  onTimeFormatChange,
   timeZone,
   recurringEventCount,
   users,
@@ -116,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;
@@ -130,6 +132,8 @@ const SlotPicker = ({
   const { month, setQuery: setMonth } = useRouterQuery("month");
   const router = useRouter();
 
+  const [slotPickerRef] = useAutoAnimate<HTMLDivElement>();
+
   useEffect(() => {
     if (!router.isReady) return;
 
@@ -176,10 +180,8 @@ const SlotPicker = ({
       <DatePicker
         isLoading={isLoading}
         className={classNames(
-          "mt-8 w-full px-4 sm:mt-0 sm:min-w-[455px] md:px-5",
+          "mt-8 px-4 pb-4 sm:mt-0 md:min-w-[300px] md:px-5 lg:min-w-[455px]",
-          selectedDate
+          selectedDate ? "sm:dark:border-darkgray-200 border-gray-200 sm:border-r sm:p-4 sm:pr-6" : "sm:p-4"
-            ? "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"
         )}
         includedDates={Object.keys(slots).filter((k) => slots[k].length > 0)}
         locale={isLocaleReady ? i18n.language : "en"}
@@ -194,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(localStorage.getItem("timeOption.is24hClock") === "true");
-
-    // 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">
+    <Popover.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}>
-      <Collapsible.Trigger className="min-w-32 dark:text-darkgray-600 mb-2 -ml-2 px-2 text-left text-gray-600">
+      <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}
@@ -252,15 +241,16 @@ function TimezoneDropdown({
             <Icon.FiChevronDown className="ml-1 inline-block h-4 w-4" />
           )}
         </p>
-      </Collapsible.Trigger>
+      </Popover.Trigger>
-      <Collapsible.Content>
+      <Popover.Portal>
-        <TimeOptions
+        <Popover.Content
-          onSelectTimeZone={handleSelectTimeZone}
+          hideWhenDetached
-          onToggle24hClock={handleToggle24hClock}
+          align="start"
-          timeFormat={timeFormat}
+          className="animate-fade-in-up absolute left-0 top-2 w-80 max-w-[calc(100vw_-_1.5rem)]">
-        />
+          <TimeOptions onSelectTimeZone={handleSelectTimeZone} />
-      </Collapsible.Content>
+        </Popover.Content>
-    </Collapsible.Root>
+      </Popover.Portal>
+    </Popover.Root>
   );
 }
 
@@ -289,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);
@@ -302,8 +292,13 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
   const isBackgroundTransparent = useIsBackgroundTransparent();
 
   const [timeZone, setTimeZone] = useState<string>();
-  const [timeFormat, setTimeFormat] = useState(detectBrowserTimeFormat);
+  const [timeFormat, setTimeFormat] = useState<TimeFormat>(detectBrowserTimeFormat);
-  const [isAvailableTimesVisible, setIsAvailableTimesVisible] = useState<boolean>();
+
+  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,
@@ -316,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");
 
@@ -338,205 +329,71 @@ 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 timeZone={timeZone} onChangeTimeZone={setTimeZone} />,
-      <TimezoneDropdown
+    [timeZone]
-        timeFormat={timeFormat}
-        onChangeTimeFormat={setTimeFormat}
-        timeZone={timeZone}
-        onChangeTimeZone={setTimeZone}
-      />
-    ),
-    [timeZone, timeFormat]
   );
+  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}
+        meeting={{
-        username={slug || undefined}
+          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" : "",
+            "flex-col md:mx-4 lg:flex",
-            isEmbed
+            shouldAlignCentrally ? "items-center" : "items-start",
-              ? classNames(maxWidth)
+            !isEmbed && classNames("mx-auto my-0 ease-in-out md:my-24")
-              : classNames("transition-max-width mx-auto my-0 duration-500 ease-in-out md:my-24", maxWidth)
           )}>
+          <div>
             <div
               style={availabilityDatePickerEmbedStyles}
               className={classNames(
-              isBackgroundTransparent ? "" : "dark:bg-darkgray-100 sm:dark:border-darkgray-300 bg-white",
+                isBackgroundTransparent
-              "border-bookinglightest overflow-hidden rounded-md md:border",
+                  ? ""
-              isEmbed ? "mx-auto" : maxWidth
+                  : "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"
               )}>
-            {/* mobile: details */}
+              <div className="overflow-hidden md:flex">
-            <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>
-                      )}
-                      {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")}
-                      </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}
-
-                      <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={
+                  className={classNames(
-                  "sm:dark:border-darkgray-200 hidden overflow-hidden border-gray-200 p-5 sm:border-r md:flex md:flex-col " +
+                    "sm:dark:border-darkgray-200 flex flex-col border-gray-200 p-5 sm:border-r",
-                  (isAvailableTimesVisible ? "sm:w-1/3" : recurringEventCount ? "sm:w-2/3" : "sm:w-1/2")
+                    "min-w-full md:w-[230px] md:min-w-[230px]",
-                }>
+                    recurringEventCount && "xl:w-[380px] xl:min-w-[380px]"
-                <UserAvatars
+                  )}>
-                  profile={profile}
+                  <BookingDescription profile={profile} eventType={eventType} rescheduleUid={rescheduleUid}>
-                  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} />
-                    </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 " />
@@ -562,22 +419,26 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                         </div>
                       </div>
                     )}
-                  {eventType.price > 0 && (
+                    {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={eventType.price / 100.0}
+                            value={stripeAppData.price / 100.0}
                             style="currency"
-                          currency={eventType.currency.toUpperCase()}
+                            currency={stripeAppData.currency.toUpperCase()}
                           />
                         </IntlProvider>
                       </p>
                     )}
                     {timezoneDropdown}
-                </div>
+                  </BookingDescription>
 
-                {!isEmbed && <GoBackToPreviousPage t={t} />}
+                  {!isEmbed && (
+                    <div className="mt-auto hidden md:block">
+                      <GoBackToPreviousPage t={t} />
+                    </div>
+                  )}
 
                   {/* Temporarily disabled - booking?.startTime && rescheduleUid && (
                     <div>
@@ -596,13 +457,20 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                 <SlotPicker
                   weekStart={
                     typeof profile.weekStart === "string"
-                    ? (["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"].indexOf(
+                      ? ([
-                        profile.weekStart
+                          "Sunday",
-                      ) as 0 | 1 | 2 | 3 | 4 | 5 | 6)
+                          "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}
@@ -612,6 +480,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
               </div>
             </div>
             {(!eventType.users[0] || !isBrandingHidden(eventType.users[0])) && !isEmbed && <PoweredByCal />}
+          </div>
         </main>
       </div>
       <Toaster position="bottom-right" />

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

@@ -1,6 +1,6 @@
 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";
 import Head from "next/head";
@@ -9,17 +9,19 @@ import { useEffect, useMemo, useState, useReducer } from "react";
 import { Controller, useForm, useWatch } from "react-hook-form";
 import { FormattedNumber, IntlProvider } from "react-intl";
 import { ReactMultiEmail } from "react-multi-email";
-import { useMutation } from "react-query";
 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 BookingDescription from "@components/booking/BookingDescription";
-import EventTypeDescriptionSafeHTML from "@components/eventtype/EventTypeDescriptionSafeHTML";
 
 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,
+            name: bookingForm.getValues("name"),
-            email: attendees[0].email,
+            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,
+          name: bookingForm.getValues("name"),
-          email: attendees[0].email,
+          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(
@@ -445,54 +464,20 @@ const BookingPage = ({
         <div
           className={classNames(
             "main overflow-hidden",
-            isEmbed ? "" : "border border-gray-200",
             isBackgroundTransparent ? "" : "dark:border-1 dark:bg-darkgray-100 bg-white",
             "dark:border-darkgray-300 rounded-md sm:border"
           )}>
           <div className="sm:flex">
             <div className="sm:dark:border-darkgray-300 dark:text-darkgray-600 flex flex-col px-6 pt-6 pb-0 text-gray-600 sm:w-1/2 sm:border-r sm:pb-6">
-              <UserAvatars
+              <BookingDescription isBookingPage profile={profile} eventType={eventType}>
-                profile={profile}
+                {stripeAppData.price > 0 && (
-                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 && (
                   <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>
@@ -513,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) => (
+                          content={recurringDates.slice(5).map((aDate, key) => (
-                            <p key={key}>{aDate}</p>
+                            <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 })}
@@ -544,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
@@ -560,7 +563,7 @@ const BookingPage = ({
                     </p>
                   </div>
                 )}
-              </div>
+              </BookingDescription>
             </div>
             <div className="p-6 sm:w-1/2">
               <Form form={bookingForm} handleSubmit={bookEvent}>
@@ -605,15 +608,27 @@ const BookingPage = ({
                     )}
                   </div>
                 </div>
-                {locations.length > 1 && (
+                <>
+                  {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);
-                      // TODO: Right now selectedLocationType isn't send by getSSP. Once that's available defaultChecked should work and show the location in the original booking
+                          if (!selectedLocationType) {
-                      const defaultChecked = rescheduleUid ? selectedLocationType === location.type : i === 0;
+                            bookingForm.setValue("locationType", locations[0].type);
+                          }
                           if (typeof locationString !== "string") {
                             // It's possible that location app got uninstalled
                             return null;
@@ -626,7 +641,7 @@ const BookingPage = ({
                                 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}
+                                defaultChecked={i === 0}
                               />
                               <span className="text-sm ltr:ml-2 rtl:mr-2 dark:text-white">
                                 {locationKeyToString(location)}
@@ -635,7 +650,9 @@ const BookingPage = ({
                           );
                         })}
                       </div>
+                    )
                   )}
+                </>
                 {/* TODO: Change name and id ="phone" to something generic */}
                 {AttendeeInput && (
                   <div className="mb-4">
@@ -713,7 +730,8 @@ const BookingPage = ({
                         />
                       )}
                       {input.type === EventTypeCustomInputType.BOOL && (
-                        <div className="flex h-5 items-center">
+                        <div className="my-6">
+                          <div className="flex">
                             <input
                               type="checkbox"
                               {...bookingForm.register(`customInputs.${input.id}`, {
@@ -727,10 +745,11 @@ const BookingPage = ({
                             />
                             <label
                               htmlFor={"custom_" + input.id}
-                            className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
+                              className="-mt-px block text-sm font-medium text-gray-700 dark:text-white">
                               {input.label}
                             </label>
                           </div>
+                        </div>
                       )}
                     </div>
                   ))}
@@ -793,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>
@@ -801,7 +820,7 @@ const BookingPage = ({
                         name="smsReminderNumber"
                         placeholder={t("enter_phone_number")}
                         id="smsReminderNumber"
-                        required
+                        required={isSmsReminderNumberRequired}
                       />
                     </div>
                     {bookingForm.formState.errors.smsReminderNumber && (
@@ -830,6 +849,7 @@ const BookingPage = ({
                   ) : (
                     <textarea
                       {...bookingForm.register("notes")}
+                      required={!!eventType.metadata.additionalNotesRequired}
                       id="notes"
                       name="notes"
                       rows={3}

apps/web/components/dialog/RescheduleDialog.tsx

@@ -1,16 +1,12 @@
-import { RescheduleResponse } from "pages/api/book/request-reschedule";
 import React, { useState, Dispatch, SetStateAction } from "react";
-import { useMutation } from "react-query";
 
 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 showToast from "@calcom/ui/v2/core/notifications";
-import * as fetchWrapper from "@lib/core/http/fetch-wrapper";
 
 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) {
+  const { mutate: rescheduleApi, isLoading } = trpc.useMutation("viewer.bookings.requestReschedule", {
+    async onSuccess() {
       showToast(t("reschedule_request_sent"), "success");
       setIsOpenDialog(false);
-        }
-      } catch (error) {
-        showToast(t("unexpected_error_try_again"), "error");
-        // @TODO: notify sentry
-      }
-      setIsLoading(false);
-    },
-    {
-      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>

apps/web/components/eventtype/CreateEventType.tsx

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

apps/web/components/eventtype/EventTypeDescription.tsx

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

apps/web/components/eventtype/RecurringEventController.tsx

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

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

@@ -14,10 +14,11 @@ const CalendarItem = (props: ICalendarItem) => {
   const { title, imageSrc, type } = props;
   const { t } = useLocale();
   return (
-    <div className="flex flex-row items-center p-5">
+    <div className="flex flex-row items-center justify-between p-5">
+      <div className="flex items-center space-x-3">
         <img src={imageSrc} alt={title} className="h-8 w-8" />
-      <p className="mx-3 text-sm font-bold">{title}</p>
+        <p className="text-sm font-bold">{title}</p>
-
+      </div>
       <InstallAppButtonWithoutPlanCheck
         type={type}
         render={(buttonProps) => (
@@ -29,8 +30,7 @@ const CalendarItem = (props: ICalendarItem) => {
               // Save cookie key to return url step
               document.cookie = `return-to=${window.location.href};path=/;max-age=3600;SameSite=Lax`;
               buttonProps && buttonProps.onClick && buttonProps?.onClick(event);
-            }}
+            }}>
-            className="ml-auto rounded-md border border-gray-200 py-[10px] px-4 text-sm font-bold">
             {t("connect")}
           </Button>
         )}

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

@@ -1,8 +1,8 @@
-import { useMutation } from "react-query";
+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";
 

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

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

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

@@ -76,7 +76,7 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
         </List>
       )}
 
-      {queryConnectedCalendars.isLoading && (
+      {queryIntegrations.isLoading && (
         <ul className="divide-y divide-gray-200 rounded-md border border-gray-200 bg-white p-0 dark:bg-black">
           {[0, 0, 0, 0].map((_item, index) => {
             return (

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

@@ -149,7 +149,7 @@ const UserProfile = (props: IUserProfile) => {
           }}
         />
         {errors.bio && (
-          <p data-testid="required" className="text-xs italic text-red-500">
+          <p data-testid="required" className="py-2 text-xs text-red-500">
             {t("required")}
           </p>
         )}

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

@@ -85,7 +85,7 @@ const UserSettings = (props: IUserSettingsProps) => {
             className="w-full rounded-md border border-gray-300 text-sm"
           />
           {errors.name && (
-            <p data-testid="required" className="text-xs italic text-red-500">
+            <p data-testid="required" className="py-2 text-xs text-red-500">
               {t("required")}
             </p>
           )}

apps/web/components/integrations/CalendarListContainer.tsx

@@ -1,9 +1,8 @@
+import { useMutation } from "@tanstack/react-query";
 import { Fragment } from "react";
-import { useMutation } from "react-query";
 
 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";
 

apps/web/components/integrations/DisconnectIntegration.tsx

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

apps/web/components/integrations/DisconnectStripeIntegration.tsx

@@ -1,9 +1,9 @@
+import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
-import { useMutation } from "react-query";
 
-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";
 

apps/web/components/security/ChangePasswordSection.tsx

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

apps/web/components/security/DisableUserImpersonation.tsx

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

apps/web/components/seo/head-seo.tsx

@@ -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 {
+  const { title, description, siteName, canonical = defaultUrl, nextSeoProps = {}, app, meeting } = props;
-    title,
+
-    description,
+  const image = getSeoImage("ogImage") + constructGenericImage({ title, description });
-    name = null,
+  const truncatedDescription = truncateOnWord(description, 158);
-    username = null,
-    siteName,
-    canonical = defaultUrl,
-    nextSeoProps = {},
-  } = props;
 
-  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) {
+  if (meeting) {
-    const pageImage = getSeoImage("ogImage") + constructImage(name, truncatedDescription, username);
+    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,

apps/web/components/team/DisableTeamImpersonation.tsx

@@ -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 }) => {

apps/web/components/team/MemberListItem.tsx

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

apps/web/components/team/TeamListItem.tsx

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

apps/web/components/team/TeamSettings.tsx

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

apps/web/components/team/TeamSettingsRightSidebar.tsx

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

apps/web/components/team/UpgradeToFlexibleProModal.tsx

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

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

@@ -1,10 +1,7 @@
 import Link from "next/link";
 import { TeamPageProps } from "pages/team/[slug]";
-import React from "react";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
-import Button from "@calcom/ui/Button";
-import { Icon } from "@calcom/ui/Icon";
 import { Avatar } from "@calcom/ui/v2";
 
 import { useLocale } from "@lib/hooks/useLocale";
@@ -13,13 +10,12 @@ type TeamType = TeamPageProps["team"];
 type MembersType = TeamType["members"];
 type MemberType = MembersType[number];
 
-const Team = ({ team }: TeamPageProps) => {
+const Member = ({ member, teamName }: { member: MemberType; teamName: string | null }) => {
   const { t } = useLocale();
 
-  const Member = ({ member }: { member: MemberType }) => {
   return (
     <Link key={member.id} href={`/${member.username}`}>
-        <div className="sm:min-w-80 sm:max-w-80 dark:bg-darkgray-200 dark:hover:bg-darkgray-300 group flex h-full flex-col space-y-2 rounded-md bg-white p-4  hover:cursor-pointer hover:bg-gray-50 ">
+      <div className="sm:min-w-80 sm:max-w-80 dark:bg-darkgray-200 dark:hover:bg-darkgray-300 group flex min-h-full w-[90%] flex-col space-y-2 rounded-md bg-white p-4  hover:cursor-pointer hover:bg-gray-50 ">
         <Avatar
           size="md"
           alt={member.name || ""}
@@ -28,15 +24,15 @@ const Team = ({ team }: TeamPageProps) => {
         <section className="line-clamp-4 mt-2 w-full space-y-1">
           <p className="font-medium text-neutral-900 dark:text-white">{member.name}</p>
           <p className="line-clamp-3 overflow-ellipsis text-sm font-normal text-neutral-500 dark:text-white">
-              {member.bio || t("user_from_team", { user: member.name, team: team.name })}
+            {member.bio || t("user_from_team", { user: member.name, team: teamName })}
           </p>
         </section>
       </div>
     </Link>
   );
-  };
+};
 
-  const Members = ({ members }: { members: MembersType }) => {
+const Members = ({ members, teamName }: { members: MembersType; teamName: string | null }) => {
   if (!members || members.length === 0) {
     return null;
   }
@@ -44,15 +40,16 @@ const Team = ({ team }: TeamPageProps) => {
   return (
     <section className="lg:min-w-lg mx-auto flex min-w-full max-w-5xl flex-wrap justify-center gap-x-6 gap-y-6">
       {members.map((member) => {
-          return member.username !== null && <Member key={member.id} member={member} />;
+        return member.username !== null && <Member key={member.id} member={member} teamName={teamName} />;
       })}
     </section>
   );
-  };
+};
 
+const Team = ({ team }: TeamPageProps) => {
   return (
     <div>
-      <Members members={team.members} />
+      <Members members={team.members} teamName={team.name} />
     </div>
   );
 };

apps/web/components/ui/EditableHeading.tsx

@@ -1,50 +1,48 @@
-import { useState } from "react";
+import classNames from "classnames";
+import React, { useState } from "react";
+import { ControllerRenderProps } from "react-hook-form";
 
 import { Icon } from "@calcom/ui/Icon";
 
-const EditableHeading = ({
+const EditableHeading = function EditableHeading({
-  title,
+  value,
   onChange,
-  placeholder = "",
+  isReady,
-  readOnly = false,
+  ...passThroughProps
 }: {
-  title: string;
+  isReady?: boolean;
-  onChange?: (value: string) => void;
+} & Omit<JSX.IntrinsicElements["input"], "name" | "onChange"> &
-  placeholder?: string;
+  ControllerRenderProps) {
-  readOnly?: boolean;
-}) => {
   const [isEditing, setIsEditing] = useState(false);
-  const enableEditing = () => !readOnly && setIsEditing(true);
+  const enableEditing = () => setIsEditing(true);
   return (
     <div className="group relative cursor-pointer" onClick={enableEditing}>
-      {!isEditing ? (
+      <div className="flex items-center">
-        <>
+        <label className="min-w-8 relative inline-block">
-          <h1
+          <span className="whitespace-pre text-xl tracking-normal text-transparent">{value}&nbsp;</span>
-            style={{ fontSize: 22, letterSpacing: "-0.0009em" }}
+          {!isEditing && isReady && (
-            className="inline pl-0 normal-case text-gray-900 focus:text-black group-hover:text-gray-500">
+            <Icon.FiEdit2 className="ml-1 inline h-4 w-4 align-top text-gray-700 group-hover:text-gray-500" />
-            {title}
+          )}
-          </h1>
-          {!readOnly ? (
-            <Icon.FiEdit2 className="ml-1 -mt-1 inline h-4 w-4 text-gray-700 group-hover:text-gray-500" />
-          ) : null}
-        </>
-      ) : (
-        <div style={{ marginBottom: -11 }}>
           <input
+            {...passThroughProps}
             type="text"
-            autoFocus
+            value={value}
-            style={{ top: -6, fontSize: 22 }}
             required
-            className="relative h-10 w-full cursor-pointer border-none bg-transparent pl-0 text-gray-900 hover:text-gray-700 focus:text-black focus:outline-none focus:ring-0"
+            className={classNames(
-            placeholder={placeholder}
+              "absolute top-0 left-0 w-full cursor-pointer border-none bg-transparent p-0 align-top text-xl text-gray-900 hover:text-gray-700 focus:text-black focus:outline-none focus:ring-0"
-            defaultValue={title}
+            )}
+            onFocus={(e) => {
+              setIsEditing(true);
+              passThroughProps.onFocus && passThroughProps.onFocus(e);
+            }}
             onBlur={(e) => {
               setIsEditing(false);
-              onChange && onChange(e.target.value);
+              passThroughProps.onBlur && passThroughProps.onBlur(e);
             }}
+            onChange={(e) => onChange && onChange(e.target.value)}
           />
+        </label>
       </div>
-      )}
     </div>
   );
 };

apps/web/components/ui/LinkText.tsx

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

apps/web/components/ui/TableActions.tsx

@@ -1,6 +1,11 @@
 import React, { FC } from "react";
 
-import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
+import Dropdown, {
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuPortal,
+} from "@calcom/ui/Dropdown";
 import { Icon } from "@calcom/ui/Icon";
 import Button from "@calcom/ui/v2/core/Button";
 
@@ -43,7 +48,8 @@ const DropdownActions = ({
       ) : (
         <DropdownMenuTrigger asChild>{actionTrigger}</DropdownMenuTrigger>
       )}
-      <DropdownMenuContent portalled>
+      <DropdownMenuPortal>
+        <DropdownMenuContent>
           {actions.map((action) => (
             <DropdownMenuItem key={action.id} className="focus-visible:outline-none">
               <Button
@@ -59,6 +65,7 @@ const DropdownActions = ({
             </DropdownMenuItem>
           ))}
         </DropdownMenuContent>
+      </DropdownMenuPortal>
     </Dropdown>
   );
 };
@@ -70,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}

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

@@ -91,11 +91,10 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
   const isCurrentUsernamePremium =
     user && user.metadata && hasKeyInMetadata(user, "isPremium") ? !!user.metadata.isPremium : false;
   const [isInputUsernamePremium, setIsInputUsernamePremium] = useState(false);
-
   const debouncedApiCall = useCallback(
-    debounce(async (username) => {
+    debounce(async (username: string) => {
       const { data } = await fetchUsername(username);
-      setMarkAsError(!data.available && username && username !== currentUsername);
+      setMarkAsError(!data.available && !!currentUsername && username !== currentUsername);
       setIsInputUsernamePremium(data.premium);
       setUsernameIsAvailable(data.available);
     }, 150),

apps/web/components/v2/availability/SkeletonLoader.tsx

@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import React from "react";
 
 import { SkeletonText } from "@calcom/ui/v2";
@@ -32,9 +33,13 @@ function SkeletonItem() {
   );
 }
 
-export const AvailabilitySelectSkeletonLoader = () => {
+export const SelectSkeletonLoader = ({ className }: { className?: string }) => {
   return (
-    <li className="group flex w-full items-center justify-between rounded-sm border border-gray-200 px-[10px] py-3">
+    <li
+      className={classNames(
+        "group flex w-full items-center justify-between rounded-sm border border-gray-200 px-[10px] py-3",
+        className
+      )}>
       <div className="flex-grow truncate text-sm">
         <div className="flex justify-between">
           <SkeletonText className="h-4 w-32" />

apps/web/components/v2/eventtype/AvailabilityTab.tsx

@@ -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,15 +8,45 @@ 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 { AvailabilitySelectSkeletonLoader } from "@components/v2/availability/SkeletonLoader";
+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 = ({
@@ -30,7 +61,7 @@ const AvailabilitySelect = ({
 }) => {
   const { data, isLoading } = trpc.useQuery(["viewer.availability.list"]);
   if (isLoading) {
-    return <AvailabilitySelectSkeletonLoader />;
+    return <SelectSkeletonLoader />;
   }
 
   const schedules = data?.schedules || [];
@@ -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="w-16 sm:w-28 sm:text-left">{format(dayRange.startTime)}</span>
-                        <span className="">-</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">
+        <div className="flex flex-col justify-center gap-2 sm:flex-row sm:justify-between">
-          <span className="flex items-center text-sm text-gray-600">
+          <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>

apps/web/components/v2/eventtype/EditLocationDialog.tsx

@@ -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={() => {

apps/web/components/v2/eventtype/EventAdvancedTab.tsx

@@ -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 { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
-import { useEffect, useRef, useState } from "react";
+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,9 +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 [seatsPerTimeSlot, setSeatsPerTimeSlot] = useState(eventType.seatsPerTimeSlot || 2);
   const [customInputs, setCustomInputs] = useState<EventTypeCustomInput[]>(
     eventType.customInputs.sort((a, b) => a.id - b.id) || []
   );
@@ -50,12 +51,7 @@ 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");
-  const seatsEnabled = !!eventType.seatsPerTimeSlot;
-
-  useEffect(() => {
-    animationRef.current && autoAnimate(animationRef.current);
-  }, [animationRef]);
 
   const removeCustom = (index: number) => {
     formMethods.getValues("customInputs").splice(index, 1);
@@ -122,10 +118,10 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
       </div>
       <hr />
       <div className="">
-        <div className="flex space-x-3 ">
+        <SettingsToggle
-          <Switch
+          title={t("additional_inputs")}
+          description={t("additional_input_description")}
           checked={customInputs.length > 0}
-            fitToHeight={true}
           onCheckedChange={(e) => {
             if (e && customInputs.length === 0) {
               // Push a placeholders
@@ -135,18 +131,8 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
               setCustomInputs([]);
               formMethods.setValue("customInputs", []);
             }
-            }}
+          }}>
-          />
+          <ul className="my-4">
-          <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}
@@ -173,29 +159,20 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
               Add an input
             </Button>
           )}
+        </SettingsToggle>
       </div>
       <hr />
       <Controller
         name="requiresConfirmation"
         defaultValue={eventType.requiresConfirmation}
         render={({ field: { value, onChange } }) => (
-          <div className="flex space-x-3">
+          <SettingsToggle
-            <Switch
+            title={t("requires_confirmation")}
-              name="requireConfirmation"
+            description={t("requires_confirmation_description")}
             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>
         )}
       />
       <hr />
@@ -204,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 ">
+          <SettingsToggle
-            <Switch
+            title={t("disable_guests")}
-              name="disableGuests"
+            description={t("disable_guests_description")}
-              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>
         )}
       />
 
@@ -230,65 +197,84 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
         control={formMethods.control}
         defaultValue={eventType.hideCalendarNotes}
         render={({ field: { value, onChange } }) => (
-          <div className="flex space-x-3 ">
+          <SettingsToggle
-            <Switch
+            title={t("disable_notes")}
-              name="hideCalendarNotes"
+            description={t("disable_notes_description")}
-              fitToHeight={true}
             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")}
+      <hr />
-              </Skeleton>
+      <Controller
-              <Skeleton as="p" className="-mt-2 text-sm leading-normal text-gray-600">
+        name="metadata.additionalNotesRequired"
-                {t("disable_notes_description")}
+        control={formMethods.control}
-              </Skeleton>
+        defaultValue={!!eventType.metadata.additionalNotesRequired}
-            </div>
+        render={({ field: { value, onChange } }) => (
+          <div className="flex space-x-3 ">
+            <SettingsToggle
+              title={t("require_additional_notes")}
+              description={t("require_additional_notes_description")}
+              checked={!!value}
+              onCheckedChange={(e) => onChange(e)}
+            />
           </div>
         )}
       />
       <hr />
       <Controller
-        name="hashedLink"
+        name="successRedirectUrl"
         control={formMethods.control}
-        defaultValue={hashedUrl}
         render={({ field: { value, onChange } }) => (
           <>
-            <div className="flex space-x-3 ">
+            <SettingsToggle
-              <Switch
+              title={t("redirect_success_booking")}
-                data-testid="hashedLinkCheck"
+              description={t("redirect_url_description")}
-                name="hashedLinkCheck"
+              checked={redirectUrlVisible}
-                fitToHeight={true}
-                defaultChecked={!!value}
               onCheckedChange={(e) => {
-                  setHashedLinkVisible(e);
+                setRedirectUrlVisible(e);
-                  onChange(e ? hashedUrl : undefined);
+                onChange(e ? value : "");
-                }}
+              }}>
+              {/* Textfield has some margin by default we remove that so we can keep consitant aligment */}
+              <div className="lg:-ml-2">
+                <TextField
+                  label={t("redirect_success_booking")}
+                  labelSrOnly
+                  placeholder={t("external_redirect_url")}
+                  required={redirectUrlVisible}
+                  type="text"
+                  defaultValue={eventType.successRedirectUrl || ""}
+                  {...formMethods.register("successRedirectUrl")}
                 />
-              <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>
+            </SettingsToggle>
+          </>
+        )}
+      />
+      <hr />
 
-            {hashedLinkVisible && (
+      <SettingsToggle
-              <div className="">
+        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
+              <Tooltip content={eventType.hashedLink ? t("copy_to_clipboard") : t("enabled_after_update")}>
-                      content={eventType.hashedLink ? t("copy_to_clipboard") : t("enabled_after_update")}>
                 <Button
                   color="minimal"
                   onClick={() => {
@@ -307,51 +293,61 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
             }
           />
         </div>
-            )}
+      </SettingsToggle>
-          </>
-        )}
-      />
       <hr />
+      <Controller
+        name="seatsPerTimeSlotEnabled"
+        control={formMethods.control}
+        defaultValue={!!eventType.seatsPerTimeSlot}
+        render={({ field: { value, onChange } }) => (
+          <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={seatsPerTimeSlot}
+              defaultValue={eventType.seatsPerTimeSlot}
               render={({ field: { value, onChange } }) => (
-          <>
+                <div className="lg:-ml-2">
-            <div className="flex space-x-3">
-              <Switch
-                name="seatsPerTimeSlot"
-                checked={seatsInputVisible}
-                onCheckedChange={(e) => {
-                  setSeatsInputVisible(e);
-                  formMethods.setValue("seatsPerTimeSlot", seatsPerTimeSlot);
-                  onChange(e ? seatsPerTimeSlot : null);
-                }}
-                fitToHeight={true}
-              />
-              <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>
-            {seatsInputVisible && (
-              <div className="">
                   <TextField
                     required
                     name="seatsPerTimeSlot"
+                    labelSrOnly
                     label={t("number_of_seats")}
                     type="number"
-                  defaultValue={seatsPerTimeSlot || 2}
+                    defaultValue={value || 2}
                     addOnSuffix={<>{t("seats")}</>}
                     onChange={(e) => {
-                    formMethods.setValue("seatsPerTimeSlot", Number(e.target.value));
+                      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>
               )}
-          </>
+            />
+          </SettingsToggle>
         )}
       />
+
       {showEventNameTip && (
         <Dialog open={showEventNameTip} onOpenChange={setShowEventNameTip}>
           <DialogContent

apps/web/components/v2/eventtype/EventAppsTab.tsx

@@ -1,87 +1,96 @@
-import { EventTypeSetupInfered, FormValues } from "pages/v2/event-types/[type]";
+import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
-import React, { useState } from "react";
+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 EventTypeAppContext, { GetAppData, SetAppData } from "@calcom/app-store/EventTypeAppContext";
-import RainbowInstallForm from "@calcom/app-store/rainbow/components/RainbowInstallForm";
+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 = ({
+type EventType = Pick<EventTypeSetupInfered, "eventType">["eventType"] &
-  logo,
+  EventTypeAppCardComponentProps["eventType"];
-  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>
-  );
-};
 
-export const EventAppsTab = ({
+function AppCardWrapper({
-  hasPaymentIntegration,
+  app,
-  currency,
   eventType,
-  hasGiphyIntegration,
+  getAppData,
-  hasRainbowIntegration,
+  setAppData,
-}: Pick<
+}: {
-  EventTypeSetupInfered,
+  app: inferQueryOutput<"viewer.apps">[number];
-  "eventType" | "hasPaymentIntegration" | "hasGiphyIntegration" | "hasRainbowIntegration" | "currency"
+  eventType: EventType;
->) => {
+  getAppData: GetAppData;
-  const formMethods = useFormContext<FormValues>();
+  setAppData: SetAppData;
-  const [showGifSelection, setShowGifSelection] = useState(
+}) {
-    hasGiphyIntegration && !!eventType.metadata["giphyThankYouPage"]
+  const dirName = app.slug === "stripe" ? "stripepayment" : app.slug;
-  );
+  const Component = EventTypeAddonMap[dirName as keyof typeof EventTypeAddonMap];
-  const [showRainbowSection, setShowRainbowSection] = useState(
-    hasRainbowIntegration &&
-      !!eventType.metadata["blockchainId"] &&
-      !!eventType.metadata["smartContractAddress"]
-  );
-  const [requirePayment, setRequirePayment] = useState(eventType.price > 0);
-  const recurringEventDefined = eventType.recurringEvent?.count !== undefined;
 
-  const getCurrencySymbol = (locale: string, currency: string) =>
+  if (!Component) {
-    (0)
+    throw new Error('No component found for "' + dirName + '"');
-      .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">
+    <ErrorBoundary message={`There is some problem with ${app.name} App`}>
+      <EventTypeAppContext.Provider value={[getAppData, setAppData]}>
+        <Component key={app.slug} app={app} eventType={eventType} />
+      </EventTypeAppContext.Provider>
+    </ErrorBoundary>
+  );
+}
+
+export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
+  const { t } = useLocale();
+  const { data: eventTypeApps, isLoading } = trpc.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")}
@@ -92,117 +101,34 @@ export const EventAppsTab = ({
                 </Button>
               }
             />
+          ) : 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>
-    );
-  }
-  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", "");
-            }
-
-            setShowRainbowSection(e);
-          }}
-          switchChecked={showRainbowSection}>
-          {showRainbowSection && (
-            <RainbowInstallForm
-              formMethods={formMethods}
-              blockchainId={(eventType.metadata.blockchainId as number) || 1}
-              smartContractAddress={(eventType.metadata.smartContractAddress as string) || ""}
-            />
-          )}
-        </AppCard>
-      )}
-    </div>
   );
 };

apps/web/components/v2/eventtype/EventLimitsTab.tsx

@@ -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,38 +156,41 @@ 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"
+        name="bookingLimits"
         control={formMethods.control}
-              defaultValue={periodType?.type !== "UNLIMITED" ? "ROLLING" : "UNLIMITED"}
         render={({ field: { value } }) => (
-                <Switch
+          <SettingsToggle
-                  fitToHeight={true}
+            title={t("limit_booking_frequency")}
-                  checked={value !== "UNLIMITED"}
+            description={t("limit_booking_frequency_description")}
-                  onCheckedChange={(bool) =>
+            checked={Object.keys(value ?? {}).length > 0}
-                    formMethods.setValue("periodType", bool ? "ROLLING" : "UNLIMITED")
+            onCheckedChange={(active) => {
+              if (active) {
+                formMethods.setValue("bookingLimits", {
+                  PER_DAY: 1,
+                });
+              } else {
+                formMethods.setValue("bookingLimits", {});
               }
-                />
+            }}>
+            <BookingLimits />
+          </SettingsToggle>
         )}
       />
 
-            <div className="">
+      <hr className="my-8" />
-              <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={({ field: { value } }) => (
-              render={() => (
+          <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}
@@ -246,18 +251,138 @@ export const EventLimitsTab = (props: Pick<EventTypeSetupInfered, "eventType">)
                         />
                       </div>
                     )}
-                        {period.suffix ? (
+                    {period.suffix ? <span className="ltr:ml-2 rtl:mr-2">&nbsp;{period.suffix}</span> : null}
-                          <span className="ltr:ml-2 rtl:mr-2">&nbsp;{period.suffix}</span>
-                        ) : null}
                   </div>
                 );
               })}
             </RadioGroup.Root>
+          </SettingsToggle>
         )}
       />
     </div>
-        </fieldset>
+  );
+};
+
+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>
-    </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>
+        );
+      }}
+    />
   );
 };

apps/web/components/v2/eventtype/EventRecurringTab.tsx

@@ -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 = ({
+export const EventRecurringTab = ({ eventType }: Pick<EventTypeSetupInfered, "eventType">) => {
-  eventType,
+  const stripeAppData = getStripeAppData(eventType);
-  hasPaymentIntegration,
+
-}: Pick<EventTypeSetupInfered, "eventType" | "hasPaymentIntegration">) => {
+  const requirePayment = stripeAppData.price > 0;
-  const requirePayment = eventType.price > 0;
-  const [recurringEventDefined, setRecurringEventDefined] = useState(
-    eventType.recurringEvent?.count !== undefined
-  );
 
   return (
     <div className="">
-      <RecurringEventController
+      <RecurringEventController paymentEnabled={requirePayment} recurringEvent={eventType.recurringEvent} />
-        paymentEnabled={hasPaymentIntegration && requirePayment}
-        onRecurringEventDefined={setRecurringEventDefined}
-        recurringEvent={eventType.recurringEvent}
-      />
     </div>
   );
 };

apps/web/components/v2/eventtype/EventSetupTab.tsx

@@ -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 { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
-import { useEffect, useRef, useState } from "react";
+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(() => {
+    const [animationRef] = useAutoAnimate<HTMLUListElement>();
-      animationRef.current && autoAnimate(animationRef.current);
-    }, [animationRef]);
 
     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>

apps/web/components/v2/eventtype/EventTeamTab.tsx

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

apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx

@@ -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
@@ -157,16 +168,16 @@ function EventTypeSingleLayout({
   return (
     <Shell
       backPath="/event-types"
-      title={t("event_type_title", { eventTypeTitle: eventType.title })}
+      title={eventType.title + " | " + t("event_type")}
       heading={eventType.title}
       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" />

apps/web/components/v2/eventtype/RecurringEventController.tsx

@@ -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,12 +36,11 @@ export default function RecurringEventController({
           <Alert severity="warning" title={t("warning_payment_recurring_event")} />
         ) : (
           <>
-            <div className="flex space-x-3 ">
+            <SettingsToggle
-              <Switch
+              title={t("recurring_event")}
-                name="requireConfirmation"
+              description={t("recurring_event_description")}
-                data-testid="recurring-event-check"
-                fitToHeight={true}
               checked={recurringEventState !== null}
+              data-testid="recurring-event-check"
               onCheckedChange={(e) => {
                 if (!e) {
                   formMethods.setValue("recurringEvent", null);
@@ -57,17 +54,9 @@ export default function RecurringEventController({
                   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 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
@@ -125,8 +114,7 @@ export default function RecurringEventController({
                   </div>
                 </div>
               )}
-              </div>
+            </SettingsToggle>
-            </div>
           </>
         )}
       </div>

apps/web/components/v2/settings/CalendarSwitch.tsx

@@ -1,4 +1,4 @@
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";

apps/web/components/webhook/WebhookDialogForm.tsx

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

apps/web/components/webhook/WebhookListContainer.tsx

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

apps/web/components/webhook/WebhookListItem.tsx

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

apps/web/components/webhook/WebhookTestDisclosure.tsx

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

apps/web/lib/QueryCell.tsx

@@ -1,16 +1,14 @@
-import { ReactNode } from "react";
 import {
-  QueryObserverIdleResult,
   QueryObserverLoadingErrorResult,
   QueryObserverLoadingResult,
   QueryObserverRefetchErrorResult,
   QueryObserverSuccessResult,
   UseQueryResult,
-} from "react-query";
+} from "@tanstack/react-query";
+import { ReactNode } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { TRPCClientErrorLike } from "@calcom/trpc/client";
-import type { UseTRPCQueryOptions } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import type {
   inferHandlerInput,
@@ -22,6 +20,8 @@ import type { AppRouter } from "@calcom/trpc/server/routers/_app";
 import { Alert } from "@calcom/ui/Alert";
 import Loader from "@calcom/ui/Loader";
 
+import type { UseTRPCQueryOptions } from "@trpc/react/shared";
+
 type ErrorLike = {
   message: string;
 };
@@ -34,7 +34,6 @@ interface QueryCellOptionsBase<TData, TError extends ErrorLike> {
     query: QueryObserverLoadingErrorResult<TData, TError> | QueryObserverRefetchErrorResult<TData, TError>
   ) => JSXElementOrNull;
   loading?: (query: QueryObserverLoadingResult<TData, TError> | null) => JSXElementOrNull;
-  idle?: (query: QueryObserverIdleResult<TData, TError>) => JSXElementOrNull;
 }
 
 interface QueryCellOptionsNoEmpty<TData, TError extends ErrorLike>
@@ -84,14 +83,11 @@ export function QueryCell<TData, TError extends ErrorLike>(
     );
   }
 
-  if (query.status === "idle") {
-    return opts.idle?.(query) ?? StatusLoader;
-  }
   // impossible state
   return null;
 }
 
-type inferProcedures<TObj extends ProcedureRecord<any, any, any, any, any, any>> = {
+type inferProcedures<TObj extends ProcedureRecord> = {
   [TPath in keyof TObj]: {
     input: inferProcedureInput<TObj[TPath]>;
     output: inferProcedureOutput<TObj[TPath]>;

apps/web/lib/app-providers.tsx

@@ -9,7 +9,7 @@ import { ComponentProps, ReactNode } from "react";
 
 import DynamicHelpscoutProvider from "@calcom/features/ee/support/lib/helpscout/providerDynamic";
 import DynamicIntercomProvider from "@calcom/features/ee/support/lib/intercom/providerDynamic";
-import { trpc } from "@calcom/trpc/react";
+import { trpc, proxy } from "@calcom/trpc/react";
 import { MetaProvider } from "@calcom/ui/v2/core/Meta";
 
 import usePublicPage from "@lib/hooks/usePublicPage";
@@ -38,7 +38,8 @@ const CustomI18nextProvider = (props: AppPropsWithChildren) => {
    * i18n should never be clubbed with other queries, so that it's caching can be managed independently.
    * We intend to not cache i18n query
    **/
-  const { i18n, locale } = trpc.useQuery(["viewer.public.i18n"], { context: { skipBatch: true } }).data ?? {
+  const { i18n, locale } = trpc.useQuery(["viewer.public.i18n"], { trpc: { context: { skipBatch: true } } })
+    .data ?? {
     locale: "en",
   };
 
@@ -54,7 +55,7 @@ const CustomI18nextProvider = (props: AppPropsWithChildren) => {
 };
 
 const AppProviders = (props: AppPropsWithChildren) => {
-  const session = trpc.useQuery(["viewer.public.session"]).data;
+  const session = proxy.public.session.useQuery().data;
   // No need to have intercom on public pages - Good for Page Performance
   const isPublicPage = usePublicPage();
   const isThemeSupported =

apps/web/lib/clock.ts

@@ -1,6 +1,10 @@
 // handles logic related to user clock display using 24h display / timeZone options.
 import dayjs from "@calcom/dayjs";
-import { isBrowserLocale24h } from "@calcom/lib/timeFormat";
+import {
+  getIs24hClockFromLocalStorage,
+  isBrowserLocale24h,
+  setIs24hClockInLocalStorage,
+} from "@calcom/lib/timeFormat";
 import { localStorage } from "@calcom/lib/webstorage";
 
 interface TimeOptions {
@@ -20,8 +24,8 @@ const initClock = () => {
     return;
   }
   // This only sets browser locale if there's no preference on localStorage.
-  if (!localStorage.getItem("timeOption.is24hClock")) set24hClock(isBrowserLocale24h());
+  if (getIs24hClockFromLocalStorage() === null) set24hClock(isBrowserLocale24h());
-  timeOptions.is24hClock = localStorage.getItem("timeOption.is24hClock") === "true";
+  timeOptions.is24hClock = !!getIs24hClockFromLocalStorage();
   timeOptions.inviteeTimeZone = localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess();
 };
 
@@ -32,7 +36,7 @@ const is24h = (is24hClock?: boolean) => {
 };
 
 const set24hClock = (is24hClock: boolean) => {
-  localStorage.setItem("timeOption.is24hClock", is24hClock.toString());
+  setIs24hClockInLocalStorage(is24hClock);
   timeOptions.is24hClock = is24hClock;
 };
 

apps/web/lib/getBooking.tsx

@@ -10,6 +10,7 @@ async function getBooking(prisma: PrismaClient, uid: string) {
       description: true,
       customInputs: true,
       smsReminderNumber: true,
+      location: true,
       attendees: {
         select: {
           email: true,

apps/web/lib/jackson.ts

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

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

@@ -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(
+  const createdBookings: BookingResponse[] = [];
-    data.map((booking, key) => {
+  // Reversing to accumulate results for noEmail instances first, to then lastly, create the
-      // We only want to send the first occurrence of the meeting at the moment, not all at once
+  // emailed booking taking into account accumulated results to send app status accurately
-      if (key === 0) {
+  for (let key = 0; key < data.length; key++) {
-        return fetch.post<ExtendedBookingCreateBody, BookingResponse>("/api/book/event", booking);
+    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 {
-        return fetch.post<ExtendedBookingCreateBody, BookingResponse>("/api/book/event", {
+            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;

apps/web/lib/parseDate.ts

@@ -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) => {
+  // UTC times with tzOffset applied to account for DST
-    return processDate(dayjs(r).tz(timeZone), i18n);
+  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));
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const allDates = dateStrings.map((dateString) => dayjs(dateString).tz(timeZone).toDate());
+  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];
 };

apps/web/lib/saml.ts

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

apps/web/lib/types/booking.ts

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

apps/web/lib/webhooks/constants.ts

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

apps/web/lib/webhooks/subscriptions.tsx

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

apps/web/lib/withEmbedSsr.tsx

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

apps/web/middleware.ts

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

apps/web/next.config.js

@@ -134,8 +134,8 @@ const nextConfig = {
         destination: "/api/user/avatar?teamname=:teamname",
       },
       {
-        source: "/forms/:formId",
+        source: "/forms/:formQuery*",
-        destination: "/apps/routing-forms/routing-link/:formId",
+        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",

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calcom/web",
-  "version": "2.0.2",
+  "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,20 +44,23 @@
     "@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": "^0.1.4",
+    "@radix-ui/react-avatar": "^1.0.0",
-    "@radix-ui/react-collapsible": "^0.1.0",
+    "@radix-ui/react-collapsible": "^1.0.0",
-    "@radix-ui/react-dialog": "^0.1.0",
+    "@radix-ui/react-dialog": "^1.0.0",
-    "@radix-ui/react-dropdown-menu": "^0.1.1",
+    "@radix-ui/react-dropdown-menu": "^1.0.0",
-    "@radix-ui/react-id": "^0.1.0",
+    "@radix-ui/react-id": "^1.0.0",
-    "@radix-ui/react-radio-group": "^0.1.1",
+    "@radix-ui/react-popover": "^1.0.0",
-    "@radix-ui/react-slider": "^0.1.1",
+    "@radix-ui/react-radio-group": "^1.0.0",
-    "@radix-ui/react-switch": "^0.1.1",
+    "@radix-ui/react-slider": "^1.0.0",
-    "@radix-ui/react-toggle-group": "^0.1.5",
+    "@radix-ui/react-switch": "^1.0.0",
+    "@radix-ui/react-toggle-group": "^1.0.0",
     "@radix-ui/react-tooltip": "^1.0.0",
     "@stripe/react-stripe-js": "^1.10.0",
     "@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",
@@ -105,7 +108,6 @@
     "react-live-chat-loader": "^2.7.3",
     "react-multi-email": "^0.5.3",
     "react-phone-number-input": "^3.2.7",
-    "react-query": "^3.39.2",
     "react-select": "^5.4.0",
     "react-timezone-select": "^1.3.2",
     "react-use-intercom": "1.5.1",
@@ -118,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",