v2.8.10

* Wip on booker atom

* Wip on booker atom

* Added correct icon imports

* Fixed build

* Responsive improvements

* Removed package lock

* Responsive tweaks

* Animation improvements and cleanup

* Animation improvements and event meta layout improvements.

* Tweaked margins.

* Added more event meta blocks

* Layout tweaks

* Converted booker layout to css grid and implemented multiple layout options

* cleanup

* Fixed build

* Fixed build

* Added temporary api route to enable/disable new booker

* Added sticky behavior

* Reverted yarn.lock and reinstalled new packages to see if this fixes build on vercel.

* Ensure divider lines always have 100% height.

* Improved animation config + initial load

* Ensure to pass eventid to getschedule, otherwise custom availability schedule wont work and wont return any availability

* Fixed divider line heights in booker

* Fixed timezone select positioning

* Added ability to view multiple days of timeslots

* Added icons to booker toggle

* Always show timeslots in timeslots view, also if no date is selected yet. In that case we show upcoming 5 days.

* Fixed timeslots in small calendar view

* Show selected day in calendar

* Fixed booker timeslots view

* Wip in making booking form work

* Moved most of the booker atom stuff to features, since it belongs there. Atom should be a rather small wrapper.

* Added create event functionality to booker form.

* Added guests toggle to booker form and styled input addons in dark mode.

* Added dynamic weekstart to booker

* Added seats limit feature to timeslots.

* Removed todo

* Added correct event avatars

* Added correct event name and icons

* Added correct translation for minutes text in multi duration

* Add rescheduling functionality to new booker.

* Added selected booking time to booking meta in sidebar.

* Abstracted away timeformat to custom hook

* Added correct key props to all components in booker.

* Fix build

* Create some new custom hooks to have a lot less repitition in code.

* Moved bookerform component inside booker directory since it is tied to it.

* Added error messages to booker form, plus fixed bug in recurring events.

* Added some comments <3

* Fixed todos in booker form.

* Added loading state for timeslot selector, and added prefetching of next month, in case of multi day view showing 2 months at the same time.

* Fixed import paths

* Added away view

* Validate uniqueness of event attendees.

* Tweaked comment

* #5798 added correct date format and style for selected date in booker.

* UI improvements

* Enable possibility to add booking values via query params.

* Added functionality to update query params when user selects date/duration etc in booker

* First steps in adding e2e test.

* Fixes after merge with main, and added new form builder.

* Implemented new form types and validation to booker, confirming new form builder. Validation still throwing wrong error keys though.

* Added search to timezone dropdown

* Added e2e test for booker (copy of current booker tests, only enabling cookie), plus fixed reschedule view.

* Updated yarn.lock

* Added new booker for team pages.

* Fixed input addon (hover) styles.

* Added dynamic booking.

* Hide timeformat  select for multi day view for now.

* Cleanup and ui tweaks

* removed log

* Mobile improvements

* Cleanup

* Small design tweaks after talking to ciaran.

* Text color and weight tweaks in booker

* Added rainbow gates to new booker.

* Added in default values which fixes form vallidation (???).

* Added empty defaults for name and email

* Added metadata

* Reset yarn.lock

* Fixed booker zod validation after change in main.

* Icon tweak

* Fixed timezone select styles after new classnames have been merged.

* Updated seat availability styles.

* Update yarn.lock

* Added explanation for alchemy key to .env.example

* Added tooltip to booker month/week/multiday toggle

* Fixed timezoneselect styles in booker after select updates.

* Updates bookingfields component by taking changes from current booker component

* Removed remaining booker todos

* Fix bookeventform

* Fix for recurring event meta

* Type fixes

* Typefixes

* Team event fixes

* Avoid hydration errors by only rendering date picker client side. Remove web3 gates since we dont offer them anymore. Prevent timeslot select from staying open when switching to a different month.

* Don't show calendar on mobile booker during booking.

* Always align booker buttons to bottom

* Don't show backend messages in error, rather show a helpful text like the current booker does as well.

* Do invisible next rewrite based on cookie from next.config.js (#7949)

* Do invisible next rewrite based on cookie from next.config.js

* Name embed link instead of bookerPath

* Rewrites only dynamic user pages

---------

Co-authored-by: zomars <zomars@me.com>

* Don't allow change of timezone when bookerform is visible

* Don't add duration to query param if the event is not a multi duration event.

* Update next.config.js

* Added correct timezone formatting to event meta when timeslot is selected.

* removed .env variable that isn't needed anymore.

* Update Gates.tsx

* Type fixes

* Allows to run all tests with the new booker

* Fixed timezone select styles after merge.

* Don't throw error when event doesn't have hosts, rather return no users, which will result in no availability in UI.

* Make booker errors of severity info instead of warning.

* Ensure team avatars are shown, as well as filter on uniqueness of avatars.

* Added all booked today message to timeslots.

* Added cal.com logo to booker.

* Fixed fragment classname error, minor mobile animation tweaks plus make all booked today text smaller for multi day layout.

* Improved timezone select styles, and updated arguments of getbooking function after updates in main.

* Prevent infinite loop in rewriting new booker.

* Prevent infinite loop in rewriting new booker.

* Moved new-booker pages to their own directory to prevent regexes confusing next and thus nut running getserversideprops after rewrite. Also adding clearing of old date in booker store, that could stick around when user immediately navigates back to the same page after booking.

* Fixed cal logo color in darkmode for new booker.

* Implemented new color tokens and theme variables. Also small design tweaks after merge with main.

* Minor style tweaks

* Show multiple locations in tooltip on booker #8222

* Radio button style tweaks

* Fixed build

* Updated calendar imports to new lucide names

* Removed resetting of selected times logic, because otherwise url params wouldnt be taken into account which is actually what we want. So old values sticking around when navigating back is actually the desired behavior.

* Updated tests to instead of always run the new booker in tests, have a utility to run both the new and old booker for specified tests.

* Added comment and eslint disable for if statement in booker test.

* Update packages/features/bookings/components/event-meta/Details.tsx

Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>

* Fix badge types

* Lazy loaded timezone select to save 85kb in bundle size.

* Upgraded framer to latest. Als moved framer and react sticky deps to features instead of atoms.

* Added new pagewrapper logic

* Simplified rescheduling ssr fetches, this now also supports multi seat rescheduling.

* Unset selected time when user is rescheduling directly after a new booking, otherwise it would show the form instead of new time selection.

* Updated form builder logic as per form builder in current booker.

* Updated form builder prefill logic as per logic in current booker.

* Updated getbooking function to fetch correct details when a reschedule uid is used

* Fixed booking questions test by NOT waiting for /book page because the new booker doesnt have this.

* Added former meeting time to reschedule view.

* Fixed types

* Undo playwright config update by mistake.

* Fixed event types test by only waiting for /book page in old booker

* Set new booker cookie to one year in the future instead of 2050

* added reset mockdate to test

* Temporary disabled test to see if this solves the out of memory error.

* Deleted test to see if that fixes the memory error

* Large View Header

* BookFormModal

* Modal

* Fix modal

* Select first day when switching months in booker

* SetSelected Date on large layouts

* Fix re-renders

* Fix yarn.lock

* Set selected date when switching layout

* Add empty state

* Lint

* sticky button on modal

* paramater layout & empty state

* fix: 7040 fix - team profile description (#8469)

* New Crowdin translations by Github Action

* Not center

* Fix positionion

* Removed unused dependnecy in effect

* Update apps/web/public/static/locales/en/common.json

Co-authored-by: Alex van Andel <me@alexvanandel.com>

* Fix padding overflow

---------

Co-authored-by: Jeroen Reumkens <hello@jeroenreumkens.nl>
Co-authored-by: zomars <zomars@me.com>
Co-authored-by: Alex van Andel <me@alexvanandel.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: hallidayo <22655069+Hallidayo@users.noreply.github.com>
Co-authored-by: Crowdin Bot <support+bot@crowdin.com>

.env.example

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

.github/CODEOWNERS

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

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

@@ -2,6 +2,7 @@ name: Cron - mark stale for inactive issues
 
 permissions:
   issues: write
+  pull-requests: write
 
 on:
   # "Scheduled workflows run on the latest commit on the default or base branch."
@@ -20,4 +21,4 @@ jobs:
           days-before-pr-stale: 14
           days-before-pr-close: 7
           stale-pr-message: "This PR is being marked as stale due to inactivity."
-          close-pr-message: "This PR is being closed due to inactivity. Please reopen if work is intended to be continued.
+          close-pr-message: "This PR is being closed due to inactivity. Please reopen if work is intended to be continued."

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

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

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

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

apps/storybook/.storybook/main.js

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

apps/web/.gitignore

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

apps/web/calendso.yaml

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

apps/web/components/AddToHomescreen.tsx

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

apps/web/components/AppListCard.tsx

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

apps/web/components/Embed.tsx

@@ -22,7 +22,7 @@ import {
   TextField,
   ColorPicker,
 } from "@calcom/ui";
-import { FiCode, FiTrello, FiSun, FiArrowLeft } from "@calcom/ui/components/icon";
+import { Code, Trello, Sun, ArrowLeft } from "@calcom/ui/components/icon";
 
 import Select from "@components/ui/form/Select";
 
@@ -493,7 +493,7 @@ const tabs = [
   {
     name: "HTML",
     href: "embedTabName=embed-code",
-    icon: FiCode,
+    icon: Code,
     type: "code",
     Component: forwardRef<
       HTMLTextAreaElement | HTMLIFrameElement | null,
@@ -546,7 +546,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ
   {
     name: "React",
     href: "embedTabName=embed-react",
-    icon: FiCode,
+    icon: Code,
     type: "code",
     Component: forwardRef<
       HTMLTextAreaElement | HTMLIFrameElement | null,
@@ -586,7 +586,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, prev
   {
     name: "Preview",
     href: "embedTabName=embed-preview",
-    icon: FiTrello,
+    icon: Trello,
     type: "iframe",
     Component: forwardRef<
       HTMLIFrameElement | HTMLTextAreaElement | null,
@@ -622,7 +622,7 @@ Cal("init", {origin:"${WEBAPP_URL}"});
 const ThemeSelectControl = ({ children, ...props }: ControlProps<{ value: Theme; label: string }, false>) => {
   return (
     <components.Control {...props}>
-      <FiSun className="text-subtle ml-2 h-4 w-4" />
+      <Sun className="text-subtle ml-2 h-4 w-4" />
       {children}
     </components.Control>
   );
@@ -830,7 +830,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
               onClick={() => {
                 removeQueryParams(router, ["embedType", "embedTabName"]);
               }}>
-              <FiArrowLeft className="mr-4 w-4" />
+              <ArrowLeft className="mr-4 w-4" />
             </button>
             {embed.title}
           </h3>

apps/web/components/I18nLanguageHandler.tsx

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

apps/web/components/ImageUploader.tsx

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

apps/web/components/NavTabs.tsx

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

apps/web/components/PageWrapper.tsx

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

apps/web/components/SettingsShell.tsx

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

apps/web/components/Slider.tsx

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

apps/web/components/apps/AdditionalCalendarSelector.tsx

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

apps/web/components/apps/App.tsx

@@ -6,7 +6,7 @@ import React, { useState } from "react";
 import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
 import { InstallAppButton, AppDependencyComponent } from "@calcom/app-store/components";
 import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
-import LicenseRequired from "@calcom/features/ee/common/components/v2/LicenseRequired";
+import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import Shell from "@calcom/features/shell/Shell";
 import classNames from "@calcom/lib/classNames";
 import { APP_NAME, COMPANY_NAME, SUPPORT_MAIL_ADDRESS } from "@calcom/lib/constants";
@@ -14,16 +14,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import type { App as AppType } from "@calcom/types/App";
 import { Button, showToast, SkeletonButton, SkeletonText, HeadSeo, Badge } from "@calcom/ui";
-import {
-  FiBookOpen,
-  FiCheck,
-  FiExternalLink,
-  FiFile,
-  FiFlag,
-  FiMail,
-  FiPlus,
-  FiShield,
-} from "@calcom/ui/components/icon";
+import { BookOpen, Check, ExternalLink, File, Flag, Mail, Plus, Shield } from "@calcom/ui/components/icon";
 
 /* These app slugs all require Google Cal to be installed */
 
@@ -50,7 +41,7 @@ const Component = ({
   isTemplate,
   dependencies,
 }: Parameters<typeof App>[0]) => {
-  const { t } = useLocale();
+  const { t, i18n } = useLocale();
   const hasDescriptionItems = descriptionItems && descriptionItems.length > 0;
   const router = useRouter();
 
@@ -153,7 +144,7 @@ const Component = ({
           isGlobal ||
           (existingCredentials.length > 0 && allowedMultipleInstalls ? (
             <div className="flex space-x-3">
-              <Button StartIcon={FiCheck} color="secondary" disabled>
+              <Button StartIcon={Check} color="secondary" disabled>
                 {existingCredentials.length > 0
                   ? t("active_install", { count: existingCredentials.length })
                   : t("default")}
@@ -175,7 +166,7 @@ const Component = ({
                     }
                     return (
                       <Button
-                        StartIcon={FiPlus}
+                        StartIcon={Plus}
                         {...props}
                         // @TODO: Overriding color and size prevent us from
                         // having to duplicate InstallAppButton for now.
@@ -247,7 +238,7 @@ const Component = ({
           </span>
         )}
 
-        <div className="prose-sm prose prose-headings:text-emphasis prose-code:text-default prose-strong:text-default text-default mt-8">
+        <div className="prose-sm prose prose-a:text-default prose-headings:text-emphasis prose-code:text-default prose-strong:text-default text-default mt-8">
           {body}
         </div>
         <h4 className="text-emphasis mt-8 font-semibold ">{t("pricing")}</h4>
@@ -256,7 +247,7 @@ const Component = ({
             t("free_to_use_apps")
           ) : (
             <>
-              {Intl.NumberFormat("en-US", {
+              {Intl.NumberFormat(i18n.language, {
                 style: "currency",
                 currency: "USD",
                 useGrouping: false,
@@ -275,7 +266,7 @@ const Component = ({
                 rel="noreferrer"
                 className="text-emphasis text-sm font-normal no-underline hover:underline"
                 href={docs}>
-                <FiBookOpen className="text-subtle mr-1 -mt-1 inline h-4 w-4" />
+                <BookOpen className="text-subtle mr-1 -mt-1 inline h-4 w-4" />
                 {t("documentation")}
               </a>
             </li>
@@ -287,7 +278,7 @@ const Component = ({
                 rel="noreferrer"
                 className="text-emphasis font-normal no-underline hover:underline"
                 href={website}>
-                <FiExternalLink className="text-subtle mr-1 -mt-px inline h-4 w-4" />
+                <ExternalLink className="text-subtle mr-1 -mt-px inline h-4 w-4" />
                 {website.replace("https://", "")}
               </a>
             </li>
@@ -299,7 +290,7 @@ const Component = ({
                 rel="noreferrer"
                 className="text-emphasis font-normal no-underline hover:underline"
                 href={"mailto:" + email}>
-                <FiMail className="text-subtle mr-1 -mt-px inline h-4 w-4" />
+                <Mail className="text-subtle mr-1 -mt-px inline h-4 w-4" />
 
                 {email}
               </a>
@@ -312,7 +303,7 @@ const Component = ({
                 rel="noreferrer"
                 className="text-emphasis font-normal no-underline hover:underline"
                 href={tos}>
-                <FiFile className="text-subtle mr-1 -mt-px inline h-4 w-4" />
+                <File className="text-subtle mr-1 -mt-px inline h-4 w-4" />
                 {t("terms_of_service")}
               </a>
             </li>
@@ -324,7 +315,7 @@ const Component = ({
                 rel="noreferrer"
                 className="text-emphasis font-normal no-underline hover:underline"
                 href={privacy}>
-                <FiShield className="text-subtle mr-1 -mt-px inline h-4 w-4" />
+                <Shield className="text-subtle mr-1 -mt-px inline h-4 w-4" />
                 {t("privacy_policy")}
               </a>
             </li>
@@ -335,7 +326,7 @@ const Component = ({
           {t("every_app_published", { appName: APP_NAME, companyName: COMPANY_NAME })}
         </span>
         <a className="mt-2 block text-xs text-red-500" href={`mailto:${SUPPORT_MAIL_ADDRESS}`}>
-          <FiFlag className="inline h-3 w-3" /> {t("report_app")}
+          <Flag className="inline h-3 w-3" /> {t("report_app")}
         </a>
       </div>
     </div>
@@ -375,7 +366,7 @@ export default function App(props: {
   dependencies?: string[];
 }) {
   return (
-    <Shell smallHeading isPublic heading={<ShellHeading />} backPath="/apps" withoutSeo>
+    <Shell smallHeading isPublic hideHeadingOnMobile heading={<ShellHeading />} backPath="/apps" withoutSeo>
       <HeadSeo
         title={props.name}
         description={props.description}

apps/web/components/apps/CalendarListContainer.tsx

@@ -17,7 +17,7 @@ import {
   Switch,
   ShellSubHeading,
 } from "@calcom/ui";
-import { FiArrowLeft, FiCalendar, FiPlus } from "@calcom/ui/components/icon";
+import { ArrowLeft, Calendar, Plus } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
 
@@ -100,7 +100,7 @@ function CalendarSwitch(props: {
       />
       {!!props.destination && (
         <span className="bg-subtle text-default ml-8 inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm font-normal sm:ml-4">
-          <FiArrowLeft className="h-4 w-4" />
+          <ArrowLeft className="h-4 w-4" />
           {t("adding_events_to")}
         </span>
       )}
@@ -264,7 +264,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
             {!!data.connectedCalendars.length || !!installedCalendars.data?.items.length ? (
               <>
                 {heading && (
-                  <div className="flex flex-col gap-6 rounded-md border p-7">
+                  <div className="border-default flex flex-col gap-6 rounded-md border p-7">
                     <ShellSubHeading
                       title={t("calendar")}
                       subtitle={t("installed_app_calendar_description")}
@@ -282,8 +282,8 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
                     <div className="bg-muted border-subtle flex justify-between rounded-md border p-4">
                       <div className="flex w-full flex-col items-start gap-4 md:flex-row md:items-center">
                         <div className="bg-default border-subtle relative rounded-md border p-1.5">
-                          <FiCalendar className="text-default h-8 w-8" strokeWidth="1" />
-                          <FiPlus
+                          <Calendar className="text-default h-8 w-8" strokeWidth="1" />
+                          <Plus
                             className="text-emphasis absolute left-4 top-1/2 ml-0.5 mt-[1px] h-2 w-2"
                             strokeWidth="4"
                           />
@@ -322,7 +322,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
               </>
             ) : (
               <EmptyScreen
-                Icon={FiCalendar}
+                Icon={Calendar}
                 headline={t("no_category_apps", {
                   category: t("calendar").toLowerCase(),
                 })}

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

@@ -6,7 +6,7 @@ import React from "react";
 import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { EmptyScreen } from "@calcom/ui";
-import { FiAlertCircle } from "@calcom/ui/components/icon";
+import { AlertCircle } from "@calcom/ui/components/icon";
 
 type AppsLayoutProps = {
   children: React.ReactNode;
@@ -22,12 +22,12 @@ export default function AppsLayout({ children, actions, emptyStore, ...rest }: A
   if (session.status === "loading") return <></>;
 
   return (
-    <Shell {...rest} actions={actions?.("block")}>
+    <Shell {...rest} actions={actions?.("block")} hideHeadingOnMobile>
       <div className="flex flex-col xl:flex-row">
         <main className="w-full">
           {emptyStore ? (
             <EmptyScreen
-              Icon={FiAlertCircle}
+              Icon={AlertCircle}
               headline={t("no_apps")}
               description={session.data?.user.role === "ADMIN" ? "You can enable apps in the settings" : ""}
               buttonText={session.data?.user.role === "ADMIN" ? t("apps_settings") : ""}

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

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

apps/web/components/availability/SkeletonLoader.tsx

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

apps/web/components/booking/AvailableEventLocations.tsx

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

apps/web/components/booking/AvailableTimes.tsx

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

apps/web/components/booking/BookingDescription.tsx

@@ -6,7 +6,7 @@ import dayjs from "@calcom/dayjs";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Badge } from "@calcom/ui";
-import { FiCheckSquare, FiClock } from "@calcom/ui/components/icon";
+import { CheckSquare, Clock } from "@calcom/ui/components/icon";
 
 import useRouterQuery from "@lib/hooks/useRouterQuery";
 
@@ -103,7 +103,7 @@ const BookingDescription: FC<Props> = (props) => {
         {requiresConfirmation && (
           <div className={classNames("items-top flex", isBookingPage && "text-default text-sm font-medium")}>
             <div>
-              <FiCheckSquare className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
+              <CheckSquare className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
             </div>
             {requiresConfirmationText}
           </div>
@@ -117,9 +117,9 @@ const BookingDescription: FC<Props> = (props) => {
             isBookingPage && "text-default",
             !eventType.metadata?.multipleDuration && "items-center"
           )}>
-          <FiClock
+          <Clock
             className={classNames(
-              "min-h-4 min-w-4 ml-[2px] inline-block ltr:mr-[10px] rtl:ml-[10px]",
+              "ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]",
               isBookingPage && "mt-[2px]"
             )}
           />

apps/web/components/booking/BookingDescriptionPayment.tsx

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

apps/web/components/booking/BookingListItem.tsx

@@ -10,6 +10,7 @@ import "@calcom/dayjs/locales";
 import ViewRecordingsDialog from "@calcom/features/ee/video/ViewRecordingsDialog";
 import classNames from "@calcom/lib/classNames";
 import { formatTime } from "@calcom/lib/date-fns";
+import getPaymentAppData from "@calcom/lib/getPaymentAppData";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import type { RouterInputs, RouterOutputs } from "@calcom/trpc/react";
@@ -28,16 +29,7 @@ import {
   TableActions,
   TextAreaField,
 } from "@calcom/ui";
-import {
-  FiCheck,
-  FiClock,
-  FiMapPin,
-  FiRefreshCcw,
-  FiSend,
-  FiSlash,
-  FiX,
-  FiCreditCard,
-} from "@calcom/ui/components/icon";
+import { Check, Clock, MapPin, RefreshCcw, Send, Slash, X, CreditCard } from "@calcom/ui/components/icon";
 
 import useMeQuery from "@lib/hooks/useMeQuery";
 
@@ -95,6 +87,8 @@ function BookingListItem(booking: BookingItemProps) {
   const isTabRecurring = booking.listingStatus === "recurring";
   const isTabUnconfirmed = booking.listingStatus === "unconfirmed";
 
+  const paymentAppData = getPaymentAppData(booking.eventType);
+
   const bookingConfirm = async (confirm: boolean) => {
     let body = {
       bookingId: booking.id,
@@ -125,7 +119,7 @@ function BookingListItem(booking: BookingItemProps) {
       onClick: () => {
         setRejectionDialogIsOpen(true);
       },
-      icon: FiSlash,
+      icon: Slash,
       disabled: mutation.isLoading,
     },
     // For bookings with payment, only confirm if the booking is paid for
@@ -137,7 +131,7 @@ function BookingListItem(booking: BookingItemProps) {
             onClick: () => {
               bookingConfirm(true);
             },
-            icon: FiCheck,
+            icon: Check,
             disabled: mutation.isLoading,
           },
         ]
@@ -165,7 +159,7 @@ function BookingListItem(booking: BookingItemProps) {
         isTabRecurring && isRecurring ? "&allRemainingBookings=true" : ""
       }${booking.seatsReferences.length ? `&seatReferenceUid=${getSeatReferenceUid()}` : ""}
       `,
-      icon: FiX,
+      icon: X,
     },
     {
       id: "edit_booking",
@@ -173,7 +167,7 @@ function BookingListItem(booking: BookingItemProps) {
       actions: [
         {
           id: "reschedule",
-          icon: FiClock,
+          icon: Clock,
           label: t("reschedule_booking"),
           href: `/reschedule/${booking.uid}${
             booking.seatsReferences.length ? `?seatReferenceUid=${getSeatReferenceUid()}` : ""
@@ -181,7 +175,7 @@ function BookingListItem(booking: BookingItemProps) {
         },
         {
           id: "reschedule_request",
-          icon: FiSend,
+          icon: Send,
           iconClassName: "rotate-45 w-[16px] -translate-x-0.5 ",
           label: t("send_reschedule_request"),
           onClick: () => {
@@ -194,7 +188,7 @@ function BookingListItem(booking: BookingItemProps) {
           onClick: () => {
             setIsOpenLocationDialog(true);
           },
-          icon: FiMapPin,
+          icon: MapPin,
         },
       ],
     },
@@ -208,7 +202,7 @@ function BookingListItem(booking: BookingItemProps) {
       onClick: () => {
         setChargeCardDialogIsOpen(true);
       },
-      icon: FiCreditCard,
+      icon: CreditCard,
     },
   ];
 
@@ -222,7 +216,7 @@ function BookingListItem(booking: BookingItemProps) {
 
   const RequestSentMessage = () => {
     return (
-      <Badge startIcon={FiSend} size="md" variant="gray" data-testid="request_reschedule_sent">
+      <Badge startIcon={Send} size="md" variant="gray" data-testid="request_reschedule_sent">
         {t("reschedule_request_sent")}
       </Badge>
     );
@@ -265,10 +259,14 @@ function BookingListItem(booking: BookingItemProps) {
       },
     });
   };
+
+  const title = booking.title;
+  // To be used after we run query on legacy bookings
+  // const showRecordingsButtons = booking.isRecorded && isPast && isConfirmed;
+
   const showRecordingsButtons =
     (booking.location === "integrations:daily" || booking?.location?.trim() === "") && isPast && isConfirmed;
 
-  const title = booking.title;
   return (
     <>
       <RescheduleDialog
@@ -418,7 +416,7 @@ function BookingListItem(booking: BookingItemProps) {
               {title}
               <span> </span>
 
-              {!!booking?.eventType?.price && !booking.paid && (
+              {paymentAppData.enabled && !booking.paid && booking.payment.length && (
                 <Badge className="ms-2 me-2 hidden sm:inline-flex" variant="orange">
                   {t("pending_payment")}
                 </Badge>
@@ -518,7 +516,7 @@ const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookings
                 );
               })}>
               <div className="text-default">
-                <FiRefreshCcw
+                <RefreshCcw
                   strokeWidth="3"
                   className="text-muted float-left mr-1 mt-1.5 inline-block h-3 w-3"
                 />

apps/web/components/booking/CancelBooking.tsx

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

apps/web/components/booking/SlotPicker.tsx

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

apps/web/components/booking/TimeOptions.tsx

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

apps/web/components/booking/TimezoneDropdown.tsx

@@ -1,4 +1,4 @@
-import { FiGlobe } from "@calcom/ui/components/icon";
+import { Globe } from "@calcom/ui/components/icon";
 
 import { timeZone as localStorageTimeZone } from "@lib/clock";
 
@@ -18,7 +18,7 @@ export function TimezoneDropdown({
   return (
     <>
       <div className="dark:focus-within:bg-darkgray-200 dark:bg-darkgray-100 dark:hover:bg-darkgray-200 !mt-3 flex w-full max-w-[20rem] items-center rounded-[4px] px-1 text-sm font-medium focus-within:bg-gray-200 hover:bg-gray-100 lg:max-w-[12rem] [&_p]:focus-within:text-gray-900 dark:[&_p]:focus-within:text-white [&_svg]:focus-within:text-gray-900 dark:[&_svg]:focus-within:text-white">
-        <FiGlobe className="dark:text-darkgray-600 flex h-4 w-4 text-gray-600 ltr:mr-2 rtl:ml-2" />
+        <Globe className="dark:text-darkgray-600 flex h-4 w-4 text-gray-600 ltr:mr-2 rtl:ml-2" />
         <TimeOptions onSelectTimeZone={handleSelectTimeZone} />
       </div>
     </>

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

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

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

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

apps/web/components/dialog/ChargeCardDialog.tsx

@@ -1,7 +1,5 @@
-import { Trans } from "next-i18next";
 import { useState } from "react";
 import type { Dispatch, SetStateAction } from "react";
-import { IntlProvider, FormattedNumber } from "react-intl";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
@@ -14,7 +12,7 @@ import {
   DialogHeader,
   showToast,
 } from "@calcom/ui";
-import { FiCreditCard, FiAlertTriangle } from "@calcom/ui/components/icon";
+import { CreditCard, AlertTriangle } from "@calcom/ui/components/icon";
 
 interface IRescheduleDialog {
   isOpenDialog: boolean;
@@ -40,32 +38,25 @@ export const ChargeCardDialog = (props: IRescheduleDialog) => {
     },
   });
 
+  const currencyStringParams = {
+    amount: props.paymentAmount / 100.0,
+    formatParams: { amount: { currency: props.paymentCurrency } },
+  };
+
   return (
     <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
       <DialogContent>
         <div className="flex flex-row space-x-3">
           <div className="flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
-            <FiCreditCard className="m-auto h-6 w-6" />
+            <CreditCard className="m-auto h-6 w-6" />
           </div>
           <div className="pt-1">
             <DialogHeader title={t("charge_card")} />
-            <Trans i18nKey="charge_card_dialog_body">
-              <p className="text-sm text-gray-500">
-                You are about to charge the attendee{" "}
-                <IntlProvider locale="en">
-                  <FormattedNumber
-                    value={props.paymentAmount / 100.0}
-                    style="currency"
-                    currency={props.paymentCurrency?.toUpperCase()}
-                  />
-                </IntlProvider>
-                . Are you sure you want to continue?
-              </p>
-            </Trans>
+            <p>{t("charge_card_dialog_body", currencyStringParams)}</p>
 
             {chargeError && (
               <div className="mt-4 flex text-red-500">
-                <FiAlertTriangle className="mr-2 h-5 w-5 " aria-hidden="true" />
+                <AlertTriangle className="mr-2 h-5 w-5 " aria-hidden="true" />
                 <p className="text-sm">{t("error_charging_card")}</p>
               </div>
             )}
@@ -80,16 +71,7 @@ export const ChargeCardDialog = (props: IRescheduleDialog) => {
                     bookingId,
                   })
                 }>
-                <Trans i18nKey="charge_card_confirm">
-                  Charge attendee{" "}
-                  <IntlProvider locale="en">
-                    <FormattedNumber
-                      value={props.paymentAmount / 100.0}
-                      style="currency"
-                      currency={props.paymentCurrency?.toUpperCase()}
-                    />
-                  </IntlProvider>
-                </Trans>
+                {t("charge_attendee", currencyStringParams)}
               </Button>
             </DialogFooter>
           </div>

apps/web/components/dialog/EditLocationDialog.tsx

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

apps/web/components/dialog/RescheduleDialog.tsx

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

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

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

apps/web/components/eventtype/AvailabilityTab.tsx

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

apps/web/components/eventtype/EventAdvancedTab.tsx

@@ -10,6 +10,7 @@ import type { EventNameObjectType } from "@calcom/core/event";
 import { getEventName } from "@calcom/core/event";
 import getLocationsOptionsForSelect from "@calcom/features/bookings/lib/getLocationOptionsForSelect";
 import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
+import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
 import { FormBuilder } from "@calcom/features/form-builder/FormBuilder";
 import { classNames } from "@calcom/lib";
 import { APP_NAME, CAL_URL } from "@calcom/lib/constants";
@@ -17,7 +18,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { Prisma } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
 import { Button, Checkbox, Label, SettingsToggle, showToast, TextField, Tooltip, Alert } from "@calcom/ui";
-import { FiEdit, FiCopy } from "@calcom/ui/components/icon";
+import { Edit, Copy } from "@calcom/ui/components/icon";
 
 import RequiresConfirmationController from "./RequiresConfirmationController";
 
@@ -80,11 +81,19 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
     );
   };
 
+  const { shouldLockDisableProps } = useLockedFieldsManager(
+    eventType,
+    t("locked_fields_admin_description"),
+    t("locked_fields_member_description")
+  );
   const eventNamePlaceholder = getEventName({
     ...eventNameObject,
     eventName: formMethods.watch("eventName"),
   });
 
+  const successRedirectUrlLocked = shouldLockDisableProps("successRedirectUrl");
+  const seatsLocked = shouldLockDisableProps("seatsPerTimeSlotEnabled");
+
   const closeEventNameTip = () => setShowEventNameTip(false);
 
   const setEventName = (value: string) => formMethods.setValue("eventName", value);
@@ -128,19 +137,19 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         <TextField
           label={t("event_name_in_calendar")}
           type="text"
+          {...shouldLockDisableProps("eventName")}
           placeholder={eventNamePlaceholder}
           defaultValue={eventType.eventName || ""}
           {...formMethods.register("eventName")}
           addOnSuffix={
             <Button
-              type="button"
-              StartIcon={FiEdit}
-              variant="icon"
               color="minimal"
-              className="hover:stroke-3 hover:text-emphasis min-w-fit px-0 hover:bg-transparent"
-              onClick={() => setShowEventNameTip((old) => !old)}
+              size="sm"
               aria-label="edit custom name"
-            />
+              className="hover:stroke-3 hover:text-emphasis min-w-fit px-0 !py-0 hover:bg-transparent"
+              onClick={() => setShowEventNameTip((old) => !old)}>
+              <Edit className="h-4 w-4" />
+            </Button>
           }
         />
       </div>
@@ -150,6 +159,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         description={t("booking_questions_description")}
         addFieldLabel={t("add_a_booking_question")}
         formProp="bookingFields"
+        {...shouldLockDisableProps("bookingFields")}
         dataStore={{
           options: {
             locations: getLocationsOptionsForSelect(eventType?.locations ?? [], t),
@@ -158,6 +168,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
       />
       <hr className="border-subtle" />
       <RequiresConfirmationController
+        eventType={eventType}
         seatsEnabled={seatsEnabled}
         metadata={eventType.metadata}
         requiresConfirmation={requiresConfirmation}
@@ -171,6 +182,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         render={({ field: { value, onChange } }) => (
           <SettingsToggle
             title={t("disable_notes")}
+            {...shouldLockDisableProps("hideCalendarNotes")}
             description={t("disable_notes_description")}
             checked={value}
             onCheckedChange={(e) => onChange(e)}
@@ -185,6 +197,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           <>
             <SettingsToggle
               title={t("redirect_success_booking")}
+              {...successRedirectUrlLocked}
               description={t("redirect_url_description")}
               checked={redirectUrlVisible}
               onCheckedChange={(e) => {
@@ -197,6 +210,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                   className="w-full"
                   label={t("redirect_success_booking")}
                   labelSrOnly
+                  disabled={successRedirectUrlLocked.disabled}
                   placeholder={t("external_redirect_url")}
                   required={redirectUrlVisible}
                   type="text"
@@ -219,6 +233,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
       <SettingsToggle
         data-testid="hashedLinkCheck"
         title={t("private_link")}
+        {...shouldLockDisableProps("hashedLinkCheck")}
         description={t("private_link_description", { appName: APP_NAME })}
         checked={hashedLinkVisible}
         onCheckedChange={(e) => {
@@ -240,6 +255,10 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
               <Tooltip content={eventType.hashedLink ? t("copy_to_clipboard") : t("enabled_after_update")}>
                 <Button
                   color="minimal"
+                  size="sm"
+                  type="button"
+                  className="hover:stroke-3 hover:text-emphasis min-w-fit px-0 !py-0 hover:bg-transparent"
+                  aria-label="copy link"
                   onClick={() => {
                     navigator.clipboard.writeText(placeholderHashedLink);
                     if (eventType.hashedLink) {
@@ -247,10 +266,8 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                     } else {
                       showToast(t("enabled_after_update_description"), "warning");
                     }
-                  }}
-                  className="hover:stroke-3 hover:text-emphasis hover:bg-transparent"
-                  type="button">
-                  <FiCopy />
+                  }}>
+                  <Copy className="h-4 w-4" />
                 </Button>
               </Tooltip>
             }
@@ -267,6 +284,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
             <SettingsToggle
               data-testid="offer-seats-toggle"
               title={t("offer_seats")}
+              {...seatsLocked}
               description={t("offer_seats_description")}
               checked={value}
               disabled={noShowFeeEnabled}
@@ -295,8 +313,10 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                       labelSrOnly
                       label={t("number_of_seats")}
                       type="number"
+                      disabled={seatsLocked.disabled}
                       defaultValue={value || 2}
                       min={1}
+                      className="w-24"
                       addOnSuffix={<>{t("seats")}</>}
                       onChange={(e) => {
                         onChange(Math.abs(Number(e.target.value)));
@@ -305,6 +325,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                     <div className="mt-2">
                       <Checkbox
                         description={t("show_attendees")}
+                        disabled={seatsLocked.disabled}
                         onChange={(e) => formMethods.setValue("seatsShowAttendees", e.target.checked)}
                         defaultChecked={!!eventType.seatsShowAttendees}
                       />

apps/web/components/eventtype/EventAppsTab.tsx

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

apps/web/components/eventtype/EventAvailabilityTab.tsx

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

apps/web/components/eventtype/EventLimitsTab.tsx

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

apps/web/components/eventtype/EventRecurringTab.tsx

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

apps/web/components/eventtype/EventSetupTab.tsx

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

apps/web/components/eventtype/EventTeamTab.tsx

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

apps/web/components/eventtype/EventTeamWebhooksTab.tsx

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

apps/web/components/eventtype/EventTypeSingleLayout.tsx

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

apps/web/components/eventtype/RecurringEventController.tsx

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

apps/web/components/eventtype/RequiresConfirmationController.tsx

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

apps/web/components/eventtype/SkeletonLoader.tsx

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

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

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

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

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

apps/web/components/security/TwoFactorModalHeader.tsx

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

apps/web/components/settings/CalendarSwitch.tsx

@@ -3,7 +3,7 @@ import { useMutation } from "@tanstack/react-query";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Badge, showToast, Switch } from "@calcom/ui";
-import { FiArrowLeft } from "@calcom/ui/components/icon";
+import { ArrowLeft } from "@calcom/ui/components/icon";
 
 export function CalendarSwitch(props: {
   type: string;
@@ -75,8 +75,8 @@ export function CalendarSwitch(props: {
       />
       {props.defaultSelected && (
         <Badge variant="gray">
-          <div className="flex">
-            <FiArrowLeft className="text-default mr-1" /> {t("adding_events_to")}
+          <div className="flex items-center">
+            <ArrowLeft className="text-default mr-1 h-4 w-4" /> {t("adding_events_to")}
           </div>
         </Badge>
       )}

apps/web/components/setup/AdminUser.tsx

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

apps/web/components/setup/EnterpriseLicense.tsx

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

apps/web/components/setup/StepDone.tsx

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

apps/web/components/ui/AdminRequired.tsx

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

apps/web/components/ui/AuthContainer.tsx

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

apps/web/components/ui/EditableHeading.tsx

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

apps/web/components/ui/InfoBadge.tsx

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

apps/web/components/ui/PoweredByCal.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

apps/web/lib/app-providers.tsx

@@ -27,8 +27,10 @@ const I18nextAdapter = appWithTranslation<NextJsAppProps<SSRConfig> & { children
 export type AppProps = Omit<NextAppProps<WithNonceProps & Record<string, unknown>>, "Component"> & {
   Component: NextAppProps["Component"] & {
     requiresLicense?: boolean;
-    isThemeSupported?: boolean | ((arg: { router: NextRouter }) => boolean);
+    isThemeSupported?: boolean;
+    isBookingPage?: boolean | ((arg: { router: NextRouter }) => boolean);
     getLayout?: (page: React.ReactElement, router: NextRouter) => ReactNode;
+    PageWrapper?: (props: AppProps) => JSX.Element;
   };
 
   /** Will be defined only is there was an error */
@@ -61,45 +63,66 @@ const CustomI18nextProvider = (props: AppPropsWithChildren) => {
   return <I18nextAdapter {...passedProps} />;
 };
 
+const enum ThemeSupport {
+  // e.g. Login Page
+  None = "none",
+  // Entire App except Booking Pages
+  App = "systemOnly",
+  // Booking Pages(including Routing Forms)
+  Booking = "userConfigured",
+}
+
 const CalcomThemeProvider = (
   props: PropsWithChildren<
-    WithNonceProps & { isThemeSupported?: boolean | ((arg: { router: NextRouter }) => boolean) }
+    WithNonceProps & {
+      isBookingPage?: boolean | ((arg: { router: NextRouter }) => boolean);
+      isThemeSupported?: boolean;
+    }
   >
 ) => {
   // We now support the inverse of how we handled it in the past. Setting this to false will disable theme.
   // undefined or true means we use system theme
   const router = useRouter();
-  const isThemeSupported = (() => {
-    if (typeof props.isThemeSupported === "function") {
-      return props.isThemeSupported({ router: router });
+  const isBookingPage = (() => {
+    if (typeof props.isBookingPage === "function") {
+      return props.isBookingPage({ router: router });
     }
-    if (typeof props.isThemeSupported === "undefined") {
-      return true;
-    }
-    return props.isThemeSupported;
+
+    return props.isBookingPage;
   })();
 
-  const forcedTheme = !isThemeSupported ? "light" : undefined;
+  const themeSupport = isBookingPage
+    ? ThemeSupport.Booking
+    : // if isThemeSupported is explicitly false, we don't use theme there
+    props.isThemeSupported === false
+    ? ThemeSupport.None
+    : ThemeSupport.App;
+
+  const forcedTheme = themeSupport === ThemeSupport.None ? "light" : undefined;
   // Use namespace of embed to ensure same namespaced embed are displayed with same theme. This allows different embeds on the same website to be themed differently
   // One such example is our Embeds Demo and Testing page at http://localhost:3100
   // Having `getEmbedNamespace` defined on window before react initializes the app, ensures that embedNamespace is available on the first mount and can be used as part of storageKey
   const embedNamespace = typeof window !== "undefined" ? window.getEmbedNamespace() : null;
   const isEmbedMode = typeof embedNamespace === "string";
-  // If embedNamespace is not defined, we use the default storageKey -> The default storage key changs based on if we force light mode or not
-  // This is done to ensure that the default theme is light when we force light mode and as soon as you navigate to a page that is dark we dont need a hard refresh to change
+
   const storageKey = isEmbedMode
     ? `embed-theme-${embedNamespace}`
-    : !isThemeSupported
-    ? "cal-light"
-    : "theme";
+    : themeSupport === ThemeSupport.App
+    ? "app-theme"
+    : themeSupport === ThemeSupport.Booking
+    ? "booking-theme"
+    : undefined;
 
   return (
     <ThemeProvider
       nonce={props.nonce}
       enableColorScheme={false}
-      enableSystem={isThemeSupported}
+      enableSystem={themeSupport !== ThemeSupport.None}
       forcedTheme={forcedTheme}
       storageKey={storageKey}
+      // next-themes doesn't listen to changes on storageKey. So we need to force a re-render when storageKey changes
+      // This is how login to dashboard soft navigation changes theme from light to dark
+      key={storageKey}
       attribute="class">
       {/* Embed Mode can be detected reliably only on client side here as there can be static generated pages as well which can't determine if it's embed mode at backend */}
       {/* color-scheme makes background:transparent not work in iframe which is required by embed. */}
@@ -132,9 +155,11 @@ const AppProviders = (props: AppPropsWithChildren) => {
       <SessionProvider session={session || undefined}>
         <CustomI18nextProvider {...props}>
           <TooltipProvider>
+            {/* color-scheme makes background:transparent not work which is required by embed. We need to ensure next-theme adds color-scheme to `body` instead of `html`(https://github.com/pacocoursey/next-themes/blob/main/src/index.tsx#L74). Once that's done we can enable color-scheme support */}
             <CalcomThemeProvider
               nonce={props.pageProps.nonce}
-              isThemeSupported={props.Component.isThemeSupported}>
+              isThemeSupported={props.Component.isThemeSupported}
+              isBookingPage={props.Component.isBookingPage}>
               <FeatureFlagsProvider>
                 <MetaProvider>{props.children}</MetaProvider>
               </FeatureFlagsProvider>

apps/web/lib/csp.ts

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

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

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

apps/web/middleware.ts

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

apps/web/next.config.js

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

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calcom/web",
-  "version": "2.7.15",
+  "version": "2.8.10",
   "private": true,
   "scripts": {
     "analyze": "ANALYZE=true next build",
@@ -57,7 +57,6 @@
     "@radix-ui/react-switch": "^1.0.0",
     "@radix-ui/react-toggle-group": "^1.0.0",
     "@radix-ui/react-tooltip": "^1.0.0",
-    "@sentry/nextjs": "^7.20.0",
     "@stripe/react-stripe-js": "^1.10.0",
     "@stripe/stripe-js": "^1.35.0",
     "@tanstack/react-query": "^4.3.9",
@@ -116,8 +115,6 @@
     "react-select": "^5.7.0",
     "react-timezone-select": "^1.4.0",
     "react-use-intercom": "1.5.1",
-    "react-virtualized-auto-sizer": "^1.0.6",
-    "react-window": "^1.8.7",
     "remark": "^14.0.2",
     "rrule": "^2.7.1",
     "sanitize-html": "^2.10.0",
@@ -156,8 +153,6 @@
     "@types/qrcode": "^1.4.3",
     "@types/react": "18.0.26",
     "@types/react-phone-number-input": "^3.0.14",
-    "@types/react-virtualized-auto-sizer": "^1.0.1",
-    "@types/react-window": "^1.8.5",
     "@types/sanitize-html": "^2.9.0",
     "@types/stripe": "^8.0.417",
     "@types/uuid": "8.3.1",

apps/web/pages/404.tsx

@@ -6,7 +6,9 @@ import { useEffect, useState } from "react";
 import { DOCS_URL, JOIN_SLACK, WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HeadSeo } from "@calcom/ui";
-import { FiBookOpen, FiCheck, FiChevronRight, FiFileText } from "@calcom/ui/components/icon";
+import { BookOpen, Check, ChevronRight, FileText } from "@calcom/ui/components/icon";
+
+import PageWrapper from "@components/PageWrapper";
 
 import { ssgInit } from "@server/lib/ssg";
 
@@ -20,13 +22,13 @@ export default function Custom404() {
     {
       title: t("documentation"),
       description: t("documentation_description"),
-      icon: FiFileText,
+      icon: FileText,
       href: DOCS_URL,
     },
     {
       title: t("blog"),
       description: t("blog_description"),
-      icon: FiBookOpen,
+      icon: BookOpen,
       href: `${WEBSITE_URL}/blog`,
     },
   ];
@@ -112,7 +114,7 @@ export default function Custom404() {
                       className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                       <div className="flex-shrink-0">
                         <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
-                          <FiCheck className="h-6 w-6 text-green-500" aria-hidden="true" />
+                          <Check className="h-6 w-6 text-green-500" aria-hidden="true" />
                         </span>
                       </div>
                       <div className="min-w-0 flex-1">
@@ -127,7 +129,7 @@ export default function Custom404() {
                         <p className="text-subtle text-base">{t("the_infrastructure_plan")}</p>
                       </div>
                       <div className="flex-shrink-0 self-center">
-                        <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
+                        <ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                       </div>
                     </a>
                   </li>
@@ -140,7 +142,7 @@ export default function Custom404() {
                       className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                       <div className="flex-shrink-0">
                         <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
-                          <FiFileText className="text-default h-6 w-6" aria-hidden="true" />
+                          <FileText className="text-default h-6 w-6" aria-hidden="true" />
                         </span>
                       </div>
                       <div className="min-w-0 flex-1">
@@ -153,7 +155,7 @@ export default function Custom404() {
                         <p className="text-subtle text-base">{t("prisma_studio_tip_description")}</p>
                       </div>
                       <div className="flex-shrink-0 self-center">
-                        <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
+                        <ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                       </div>
                     </Link>
                   </li>
@@ -198,7 +200,7 @@ export default function Custom404() {
                         <p className="text-subtle text-base">{t("join_our_community")}</p>
                       </div>
                       <div className="flex-shrink-0 self-center">
-                        <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
+                        <ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                       </div>
                     </a>
                   </li>
@@ -257,7 +259,7 @@ export default function Custom404() {
                         rel="noreferrer">
                         <div className="flex-shrink-0">
                           <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
-                            <FiCheck className="h-6 w-6 text-green-500" aria-hidden="true" />
+                            <Check className="h-6 w-6 text-green-500" aria-hidden="true" />
                           </span>
                         </div>
                         <div className="min-w-0 flex-1">
@@ -272,7 +274,7 @@ export default function Custom404() {
                           <p className="text-subtle text-base">{t("claim_username_and_schedule_events")}</p>
                         </div>
                         <div className="flex-shrink-0 self-center">
-                          <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
+                          <ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                         </div>
                       </a>
                     </li>
@@ -300,7 +302,7 @@ export default function Custom404() {
                           <p className="text-subtle text-base">{link.description}</p>
                         </div>
                         <div className="flex-shrink-0 self-center">
-                          <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
+                          <ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                         </div>
                       </Link>
                     </li>
@@ -346,7 +348,7 @@ export default function Custom404() {
                         <p className="text-subtle text-base">{t("join_our_community")}</p>
                       </div>
                       <div className="flex-shrink-0 self-center">
-                        <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
+                        <ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                       </div>
                     </a>
                   </li>
@@ -366,6 +368,8 @@ export default function Custom404() {
   );
 }
 
+Custom404.PageWrapper = PageWrapper;
+
 export const getStaticProps = async (context: GetStaticPropsContext) => {
   const ssr = await ssgInit(context);
 

apps/web/pages/500.tsx

@@ -4,7 +4,9 @@ import { useRouter } from "next/router";
 import { APP_NAME, WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, showToast } from "@calcom/ui";
-import { FiCopy } from "@calcom/ui/components/icon";
+import { Copy } from "@calcom/ui/components/icon";
+
+import PageWrapper from "@components/PageWrapper";
 
 export default function Error500() {
   const { t } = useLocale();
@@ -34,7 +36,7 @@ export default function Error500() {
               <Button
                 color="secondary"
                 className="mt-2 border-0 font-sans font-normal hover:bg-gray-300"
-                StartIcon={FiCopy}
+                StartIcon={Copy}
                 onClick={() => {
                   navigator.clipboard.writeText(router.query.error as string);
                   showToast("Link copied!", "success");
@@ -52,3 +54,5 @@ export default function Error500() {
     </div>
   );
 }
+
+Error500.PageWrapper = PageWrapper;

apps/web/pages/[user].tsx

@@ -3,7 +3,6 @@ import classNames from "classnames";
 import type { GetServerSidePropsContext } from "next";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useEffect } from "react";
 import { Toaster } from "react-hot-toast";
 
 import {
@@ -24,16 +23,17 @@ import defaultEvents, {
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
-import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import prisma from "@calcom/prisma";
 import { baseEventTypeSelect } from "@calcom/prisma/selects";
 import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 import { Avatar, AvatarGroup, HeadSeo } from "@calcom/ui";
-import { FiArrowRight } from "@calcom/ui/components/icon";
+import { ArrowRight } from "@calcom/ui/components/icon";
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 import type { EmbedProps } from "@lib/withEmbedSsr";
 
+import PageWrapper from "@components/PageWrapper";
+
 import { ssrInit } from "@server/lib/ssr";
 
 export default function User(props: inferSSRProps<typeof getServerSideProps> & EmbedProps) {
@@ -59,8 +59,8 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
       {eventTypes.map((type, index) => (
         <li
           key={index}
-          className=" border-subtle bg-default hover:bg-muted group relative border-b first:rounded-t-md last:rounded-b-md last:border-b-0">
-          <FiArrowRight className="text-emphasis absolute right-3 top-3 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100" />
+          className=" border-subtle bg-default dark:bg-muted dark:hover:bg-emphasis hover:bg-muted group relative border-b first:rounded-t-md last:rounded-b-md last:border-b-0">
+          <ArrowRight className="text-emphasis absolute right-3 top-3 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100" />
           <Link
             href={getUsernameSlugLink({ users: props.users, slug: type.slug })}
             className="flex justify-between px-6 py-4"
@@ -93,14 +93,15 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
   const query = { ...router.query };
   delete query.user; // So it doesn't display in the Link (and make tests fail)
   const nameOrUsername = user.name || user.username || "";
-  const telemetry = useTelemetry();
 
-  useEffect(() => {
+  /* 
+   const telemetry = useTelemetry();
+   useEffect(() => {
     if (top !== window) {
       //page_view will be collected automatically by _middleware.ts
       telemetry.event(telemetryEventTypes.embedView, collectPageParameters("/[user]"));
     }
-  }, [telemetry, router.asPath]);
+  }, [telemetry, router.asPath]); */
   const isEventListEmpty = eventTypes.length === 0;
   return (
     <>
@@ -122,7 +123,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
         <main
           className={classNames(
             shouldAlignCentrally ? "mx-auto" : "",
-            isEmbed ? " border-bookinglightest  bg-default rounded-md border" : "",
+            isEmbed ? "border-booker border-booker-width  bg-default rounded-md border" : "",
             "max-w-3xl py-24 px-4"
           )}>
           {isSingleUser && ( // When we deal with a single user, not dynamic group
@@ -160,8 +161,8 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
                 <div
                   key={type.id}
                   style={{ display: "flex", ...eventTypeListItemEmbedStyles }}
-                  className=" border-subtle bg-default hover:bg-muted group relative border-b first:rounded-t-md last:rounded-b-md last:border-b-0">
-                  <FiArrowRight className="text-emphasis  absolute right-4 top-4 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100" />
+                  className="bg-default border-subtle dark:bg-muted dark:hover:bg-emphasis hover:bg-muted group relative border-b first:rounded-t-md last:rounded-b-md last:border-b-0">
+                  <ArrowRight className="text-emphasis  absolute right-4 top-4 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100" />
                   {/* Don't prefetch till the time we drop the amount of javascript in [user][type] page which is impacting score for [user] page */}
                   <div className="block w-full p-5">
                     <Link
@@ -180,7 +181,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
                       <div className="flex flex-wrap items-center">
                         <h2 className=" text-default pr-2 text-sm font-semibold">{type.title}</h2>
                       </div>
-                      <EventTypeDescription eventType={type} />
+                      <EventTypeDescription eventType={type} isPublic={true} />
                     </Link>
                   </div>
                 </div>
@@ -196,6 +197,9 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
   );
 }
 
+User.isBookingPage = true;
+User.PageWrapper = PageWrapper;
+
 const getEventTypesWithHiddenFromDB = async (userId: number) => {
   return (
     await prisma.eventType.findMany({

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

@@ -12,6 +12,7 @@ import { isBrandingHidden } from "@lib/isBrandingHidden";
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 import type { EmbedProps } from "@lib/withEmbedSsr";
 
+import PageWrapper from "@components/PageWrapper";
 import AvailabilityPage from "@components/booking/pages/AvailabilityPage";
 
 export type AvailabilityPageProps = inferSSRProps<typeof getStaticProps> & EmbedProps;
@@ -54,6 +55,9 @@ export default function Type(props: AvailabilityPageProps) {
   );
 }
 
+Type.isBookingPage = true;
+Type.PageWrapper = PageWrapper;
+
 const paramsSchema = z.object({ type: z.string(), user: z.string() });
 async function getUserPageProps(context: GetStaticPropsContext) {
   // load server side dependencies

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

@@ -5,6 +5,8 @@ import type { LocationObject } from "@calcom/app-store/locations";
 import { privacyFilteredLocations } from "@calcom/app-store/locations";
 import { getAppFromSlug } from "@calcom/app-store/utils";
 import dayjs from "@calcom/dayjs";
+import getBooking from "@calcom/features/bookings/lib/get-booking";
+import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
 import { getBookingFieldsWithSystemFields } from "@calcom/features/bookings/lib/getBookingFields";
 import { parseRecurringEvent } from "@calcom/lib";
 import {
@@ -13,8 +15,6 @@ import {
   getGroupName,
   getUsernameList,
 } from "@calcom/lib/defaultEvents";
-import getBooking from "@calcom/lib/getBooking";
-import type { GetBookingType } from "@calcom/lib/getBooking";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import prisma, { bookEventTypeSelect } from "@calcom/prisma";
@@ -26,6 +26,7 @@ import {
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 
+import PageWrapper from "@components/PageWrapper";
 import BookingPage from "@components/booking/pages/BookingPage";
 
 import { ssrInit } from "@server/lib/ssr";
@@ -69,6 +70,9 @@ export default function Book(props: BookPageProps) {
   );
 }
 
+Book.isBookingPage = true;
+Book.PageWrapper = PageWrapper;
+
 const querySchema = z.object({
   bookingUid: z.string().optional(),
   count: z.coerce.number().optional(),

apps/web/pages/[user]/calendar-cache/[month].tsx

@@ -18,7 +18,7 @@ export const getStaticProps: GetStaticProps<
   { user: string }
 > = async (context) => {
   const { user: username, month } = paramsSchema.parse(context.params);
-  const user = await prisma.user.findUnique({
+  const userWithCredentials = await prisma.user.findUnique({
     where: {
       username,
     },
@@ -34,14 +34,15 @@ export const getStaticProps: GetStaticProps<
   ).startOf("day");
   const endDate = startDate.endOf("month");
   try {
-    const results = user?.credentials
+    const results = userWithCredentials?.credentials
       ? await getCachedResults(
-          user?.credentials,
+          userWithCredentials?.credentials,
           startDate.format(),
           endDate.format(),
-          user?.selectedCalendars
+          userWithCredentials?.selectedCalendars
         )
       : [];
+
     return {
       props: { results, date: new Date().toISOString() },
       revalidate: 1,

apps/web/pages/_app.tsx

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

apps/web/pages/_document.tsx

@@ -1,22 +1,27 @@
+import type { NextPageContext } from "next";
 import type { DocumentContext, DocumentProps } from "next/document";
 import Document, { Head, Html, Main, NextScript } from "next/document";
-import Script from "next/script";
 import { z } from "zod";
 
-import { getDirFromLang } from "@calcom/lib/i18n";
-
 import { csp } from "@lib/csp";
 
 type Props = Record<string, unknown> & DocumentProps;
-
+function setHeader(ctx: NextPageContext, name: string, value: string) {
+  try {
+    ctx.res?.setHeader(name, value);
+  } catch (e) {
+    // Getting "Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client" when revalidate calendar chache
+    console.log(`Error setting header ${name}=${value} for ${ctx.asPath || "unknown asPath"}`, e);
+  }
+}
 class MyDocument extends Document<Props> {
   static async getInitialProps(ctx: DocumentContext) {
     const { nonce } = csp(ctx.req || null, ctx.res || null);
     if (!process.env.CSP_POLICY) {
-      ctx.res?.setHeader("x-csp", "not-opted-in");
+      setHeader(ctx, "x-csp", "not-opted-in");
     } else if (!ctx.res?.getHeader("x-csp")) {
       // If x-csp not set by gSSP, then it's initialPropsOnly
-      ctx.res?.setHeader("x-csp", "initialPropsOnly");
+      setHeader(ctx, "x-csp", "initialPropsOnly");
     }
     const asPath = ctx.asPath || "";
     // Use a dummy URL as default so that URL parsing works for relative URLs as well. We care about searchParams and pathname only
@@ -31,9 +36,8 @@ class MyDocument extends Document<Props> {
     const { isEmbed } = this.props;
     const nonceParsed = z.string().safeParse(this.props.nonce);
     const nonce = nonceParsed.success ? nonceParsed.data : "";
-    const dir = getDirFromLang(locale);
     return (
-      <Html lang={locale} dir={dir}>
+      <Html lang={locale}>
         <Head nonce={nonce}>
           <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
           <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
@@ -42,7 +46,6 @@ class MyDocument extends Document<Props> {
           <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000" />
           <meta name="msapplication-TileColor" content="#ff0000" />
           <meta name="theme-color" content="var(--cal-bg)" />
-          <Script src="/embed-init-iframe.js" strategy="beforeInteractive" />
         </Head>
 
         <body

apps/web/pages/_error.tsx

@@ -2,17 +2,15 @@
  * Typescript class based component for custom-error
  * @link https://nextjs.org/docs/advanced-features/custom-error-page
  */
-import * as Sentry from "@sentry/nextjs";
 import type { NextPage, NextPageContext } from "next";
 import type { ErrorProps } from "next/error";
 import NextError from "next/error";
 import React from "react";
 
 import { getErrorFromUnknown } from "@calcom/lib/errors";
+import { HttpError } from "@calcom/lib/http-error";
 import logger from "@calcom/lib/logger";
 
-import { HttpError } from "@lib/core/http/error";
-
 import { ErrorPage } from "@components/error/error-page";
 
 // Adds HttpException to the list of possible error types.
@@ -50,7 +48,6 @@ const CustomError: NextPage<CustomErrorProps> = (props) => {
  */
 CustomError.getInitialProps = async (ctx: AugmentedNextPageContext) => {
   const { res, err, asPath } = ctx;
-  await Sentry.captureUnderscoreErrorException(ctx);
   const errorInitialProps = (await NextError.getInitialProps({
     res,
     err,

apps/web/pages/api/auth/oidc.ts

@@ -1,8 +1,7 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 
 import jackson from "@calcom/features/ee/sso/lib/jackson";
-
-import { HttpError } from "@lib/core/http/error";
+import { HttpError } from "@calcom/lib/http-error";
 
 // This is the callback endpoint for the OIDC provider
 // A team must set this endpoint in the OIDC provider's configuration

apps/web/pages/api/auth/saml/authorize.ts

@@ -2,8 +2,7 @@ import type { OAuthReq } from "@boxyhq/saml-jackson";
 import type { NextApiRequest, NextApiResponse } from "next";
 
 import jackson from "@calcom/features/ee/sso/lib/jackson";
-
-import type { HttpError } from "@lib/core/http/error";
+import type { HttpError } from "@calcom/lib/http-error";
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   const { oauthController } = await jackson();

apps/web/pages/api/availability/[user].ts

@@ -1,29 +0,0 @@
-import type { NextApiRequest } from "next";
-import { z } from "zod";
-
-import { getUserAvailability } from "@calcom/core/getUserAvailability";
-import { defaultResponder } from "@calcom/lib/server";
-import { stringOrNumber } from "@calcom/prisma/zod-utils";
-
-const availabilitySchema = z.object({
-  user: z.string(),
-  dateFrom: z.string(),
-  dateTo: z.string(),
-  eventTypeId: stringOrNumber.optional(),
-});
-
-/**
- * @deprecated Use TRCP's viewer.availability.user
- */
-
-async function handler(req: NextApiRequest) {
-  const { user: username, eventTypeId, dateTo, dateFrom } = availabilitySchema.parse(req.query);
-  return getUserAvailability({
-    username,
-    dateFrom,
-    dateTo,
-    eventTypeId,
-  });
-}
-
-export default defaultResponder(handler);

apps/web/pages/api/availability/calendar.ts

@@ -14,7 +14,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     return;
   }
 
-  const user = await prisma.user.findUnique({
+  const userWithCredentials = await prisma.user.findUnique({
     where: {
       id: session.user.id,
     },
@@ -25,11 +25,11 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       selectedCalendars: true,
     },
   });
-
-  if (!user) {
+  if (!userWithCredentials) {
     res.status(401).json({ message: "Not authenticated" });
     return;
   }
+  const { credentials, ...user } = userWithCredentials;
 
   if (req.method === "POST") {
     await prisma.selectedCalendar.upsert({
@@ -80,7 +80,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     });
 
     // get user's credentials + their connected integrations
-    const calendarCredentials = getCalendarCredentials(user.credentials);
+    const calendarCredentials = getCalendarCredentials(credentials);
     // get all the connected integrations' calendars (from third party)
     const { connectedCalendars } = await getConnectedCalendars(calendarCredentials, user.selectedCalendars);
     const calendars = connectedCalendars.flatMap((c) => c.calendars).filter(notEmpty);

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

@@ -4,12 +4,11 @@ import type { Session } from "next-auth";
 import getInstalledAppPath from "@calcom/app-store/_utils/getInstalledAppPath";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { deriveAppDictKeyFromType } from "@calcom/lib/deriveAppDictKeyFromType";
+import { HttpError } from "@calcom/lib/http-error";
 import { revalidateCalendarCache } from "@calcom/lib/server/revalidateCalendarCache";
 import prisma from "@calcom/prisma";
 import type { AppDeclarativeHandler, AppHandler } from "@calcom/types/AppHandler";
 
-import { HttpError } from "@lib/core/http/error";
-
 const defaultIntegrationAddHandler = async ({
   slug,
   supportsMultipleInstalls,

apps/web/pages/api/intercom-hash.ts

@@ -0,0 +1,28 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import crypto from "node:crypto";
+
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { defaultHandler } from "@calcom/lib/server";
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const session = await getServerSession({ req, res });
+  const secret = process.env.INTERCOM_SECRET;
+
+  if (!session) {
+    return res.status(401).json({ message: "user not authenticated" });
+  }
+
+  if (!secret) {
+    return res.status(400).json({ message: "Intercom Identity Verification secret not set" });
+  }
+
+  const hmac = crypto.createHmac("sha256", secret);
+  hmac.update(String(session.user.id));
+  const hash = hmac.digest("hex");
+
+  return res.status(200).json({ hash });
+}
+
+export default defaultHandler({
+  GET: Promise.resolve({ default: handler }),
+});

apps/web/pages/api/logo.ts

@@ -0,0 +1,80 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { z } from "zod";
+
+import { IS_SELF_HOSTED, LOGO, LOGO_ICON, WEBAPP_URL } from "@calcom/lib/constants";
+
+function removePort(url: string) {
+  return url.replace(/:\d+$/, "");
+}
+
+function extractSubdomainAndDomain(hostname: string) {
+  const hostParts = removePort(hostname).split(".");
+
+  const subdomainParts = hostParts.slice(0, hostParts.length - 2);
+  const domain = hostParts.slice(hostParts.length - 2).join(".");
+
+  return [subdomainParts[0], domain];
+}
+
+const logoApiSchema = z.object({
+  icon: z.coerce.boolean().optional(),
+});
+
+const SYSTEM_SUBDOMAINS = ["console", "app", "www"];
+
+async function getTeamLogos(subdomain: string) {
+  if (
+    // if not cal.com
+    IS_SELF_HOSTED ||
+    // missing subdomain (empty string)
+    !subdomain ||
+    // in SYSTEM_SUBDOMAINS list
+    SYSTEM_SUBDOMAINS.includes(subdomain)
+  ) {
+    return {
+      appLogo: `${WEBAPP_URL}${LOGO}`,
+      appIconLogo: `${WEBAPP_URL}${LOGO_ICON}`,
+    };
+  }
+  // load from DB
+  const { default: prisma } = await import("@calcom/prisma");
+  const team = await prisma.team.findUniqueOrThrow({
+    where: {
+      slug: subdomain,
+    },
+    select: {
+      appLogo: true,
+      appIconLogo: true,
+    },
+  });
+  // try to use team logos, otherwise default to LOGO/LOGO_ICON regardless
+  return {
+    appLogo: team.appLogo || `${WEBAPP_URL}${LOGO}`,
+    appIconLogo: team.appIconLogo || `${WEBAPP_URL}${LOGO_ICON}`,
+  };
+}
+
+/**
+ * This API endpoint is used to serve the logo associated with a team if no logo is found we serve our default logo
+ */
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { query } = req;
+  const parsedQuery = logoApiSchema.parse(query);
+
+  const hostname = req?.headers["host"];
+  if (!hostname) throw new Error("No hostname");
+  const domains = extractSubdomainAndDomain(hostname);
+  if (!domains) throw new Error("No domains");
+
+  const [subdomain] = domains;
+  const { appLogo, appIconLogo } = await getTeamLogos(subdomain);
+
+  const filteredLogo = parsedQuery?.icon ? appIconLogo : appLogo;
+
+  const response = await fetch(filteredLogo);
+  const arrayBuffer = await response.arrayBuffer();
+  const buffer = Buffer.from(arrayBuffer);
+  res.setHeader("Content-Type", response.headers.get("content-type") as string);
+  res.setHeader("Cache-Control", "s-maxage=86400");
+  res.send(buffer);
+}

apps/web/pages/api/newbooker/[status].tsx

@@ -0,0 +1,26 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { z } from "zod";
+
+import { defaultResponder } from "@calcom/lib/server";
+
+const newBookerSchema = z.object({
+  status: z.enum(["enable", "disable"]),
+});
+
+/**
+ * Very basic temporary api route to enable/disable new booker access.
+ */
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { status } = newBookerSchema.parse(req.query);
+
+  if (status === "enable") {
+    const expires = new Date();
+    expires.setFullYear(expires.getFullYear() + 1);
+    res.setHeader("Set-Cookie", `new-booker-enabled=true; path=/; expires=${expires.toUTCString()}`);
+  } else {
+    res.setHeader("Set-Cookie", "new-booker-enabled=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT");
+  }
+  res.send({ status: 200, body: `Done – ${status}` });
+}
+
+export default defaultResponder(handler);

apps/web/pages/api/recorded-daily-video.ts

@@ -0,0 +1,146 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { z } from "zod";
+
+import { DailyLocationType } from "@calcom/app-store/locations";
+import { getDownloadLinkOfCalVideoByRecordingId } from "@calcom/core/videoClient";
+import { sendDailyVideoRecordingEmails } from "@calcom/emails";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { IS_SELF_HOSTED } from "@calcom/lib/constants";
+import { defaultHandler } from "@calcom/lib/server";
+import { getTranslation } from "@calcom/lib/server/i18n";
+import prisma, { bookingMinimalSelect } from "@calcom/prisma";
+import type { CalendarEvent } from "@calcom/types/Calendar";
+
+const schema = z.object({
+  recordingId: z.string(),
+  bookingUID: z.string(),
+});
+
+const downloadLinkSchema = z.object({
+  download_link: z.string(),
+});
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (!process.env.SENDGRID_API_KEY || !process.env.SENDGRID_EMAIL) {
+    return res.status(405).json({ message: "No SendGrid API key or email" });
+  }
+  const response = schema.safeParse(JSON.parse(req.body));
+
+  if (!response.success) {
+    return res.status(400).send({
+      message: "Invalid Payload",
+    });
+  }
+
+  const { recordingId, bookingUID } = response.data;
+  const session = await getServerSession({ req, res });
+
+  if (!session?.user) {
+    return res.status(401).send({
+      message: "User not logged in",
+    });
+  }
+
+  try {
+    const booking = await prisma.booking.findFirst({
+      where: {
+        uid: bookingUID,
+      },
+      select: {
+        ...bookingMinimalSelect,
+        uid: true,
+        location: true,
+        isRecorded: true,
+        user: {
+          select: {
+            id: true,
+            timeZone: true,
+            email: true,
+            name: true,
+            locale: true,
+            destinationCalendar: true,
+          },
+        },
+      },
+    });
+
+    if (!booking || booking.location !== DailyLocationType) {
+      return res.status(404).send({
+        message: `Booking of uid ${bookingUID} does not exist or does not contain daily video as location`,
+      });
+    }
+
+    const t = await getTranslation(booking?.user?.locale ?? "en", "common");
+    const attendeesListPromises = booking.attendees.map(async (attendee) => {
+      return {
+        id: attendee.id,
+        name: attendee.name,
+        email: attendee.email,
+        timeZone: attendee.timeZone,
+        language: {
+          translate: await getTranslation(attendee.locale ?? "en", "common"),
+          locale: attendee.locale ?? "en",
+        },
+      };
+    });
+
+    const attendeesList = await Promise.all(attendeesListPromises);
+
+    const isUserAttendeeOrOrganiser =
+      booking?.user?.id === session.user.id ||
+      attendeesList.find((attendee) => attendee.id === session.user.id);
+
+    if (!isUserAttendeeOrOrganiser) {
+      return res.status(403).send({
+        message: "Unauthorised",
+      });
+    }
+
+    await prisma.booking.update({
+      where: {
+        uid: booking.uid,
+      },
+      data: {
+        isRecorded: true,
+      },
+    });
+
+    const isSendingEmailsAllowed = IS_SELF_HOSTED || session?.user?.belongsToActiveTeam;
+
+    // send emails to all attendees only when user has team plan
+    if (isSendingEmailsAllowed) {
+      const response = await getDownloadLinkOfCalVideoByRecordingId(recordingId);
+
+      const downloadLinkResponse = downloadLinkSchema.parse(response);
+      const downloadLink = downloadLinkResponse.download_link;
+
+      const evt: CalendarEvent = {
+        type: booking.title,
+        title: booking.title,
+        description: booking.description || undefined,
+        startTime: booking.startTime.toISOString(),
+        endTime: booking.endTime.toISOString(),
+        organizer: {
+          email: booking.user?.email || "Email-less",
+          name: booking.user?.name || "Nameless",
+          timeZone: booking.user?.timeZone || "Europe/London",
+          language: { translate: t, locale: booking?.user?.locale ?? "en" },
+        },
+        attendees: attendeesList,
+        uid: booking.uid,
+      };
+
+      await sendDailyVideoRecordingEmails(evt, downloadLink);
+      return res.status(200).json({ message: "Success" });
+    }
+
+    return res.status(403).json({ message: "User does not have team plan to send out emails" });
+  } catch (err) {
+    console.warn("something_went_wrong", err);
+    return res.status(500).json({ message: "something went wrong" });
+  }
+}
+
+export default defaultHandler({
+  POST: Promise.resolve({ default: handler }),
+});

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

@@ -9,13 +9,16 @@ import type { AppGetServerSideProps } from "@calcom/types/AppGetServerSideProps"
 
 import type { AppProps } from "@lib/app-providers";
 
+import PageWrapper from "@components/PageWrapper";
+
 import { ssrInit } from "@server/lib/ssr";
 
 type AppPageType = {
   getServerSideProps: AppGetServerSideProps;
   // A component than can accept any properties
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  default: ((props: any) => JSX.Element) & Pick<AppProps["Component"], "isThemeSupported" | "getLayout">;
+  default: ((props: any) => JSX.Element) &
+    Pick<AppProps["Component"], "isBookingPage" | "getLayout" | "PageWrapper">;
 };
 
 type Found = {
@@ -70,17 +73,17 @@ const AppPage: AppPageType["default"] = function AppPage(props) {
   return <route.Component {...componentProps} />;
 };
 
-AppPage.isThemeSupported = ({ router }) => {
+AppPage.isBookingPage = ({ router }) => {
   const route = getRoute(router.query.slug as string, router.query.pages as string[]);
   if (route.notFound) {
     return false;
   }
-  const isThemeSupported = route.Component.isThemeSupported;
-  if (typeof isThemeSupported === "function") {
-    return isThemeSupported({ router });
+  const isBookingPage = route.Component.isBookingPage;
+  if (typeof isBookingPage === "function") {
+    return isBookingPage({ router });
   }
 
-  return !!isThemeSupported;
+  return !!isBookingPage;
 };
 
 AppPage.getLayout = (page, router) => {
@@ -94,6 +97,8 @@ AppPage.getLayout = (page, router) => {
   return route.Component.getLayout(page, router);
 };
 
+AppPage.PageWrapper = PageWrapper;
+
 export default AppPage;
 
 export async function getServerSideProps(

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

@@ -10,6 +10,7 @@ import prisma from "@calcom/prisma";
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 
+import PageWrapper from "@components/PageWrapper";
 import App from "@components/apps/App";
 
 const md = new MarkdownIt("default", { html: true, breaks: true });
@@ -122,4 +123,6 @@ export const getStaticProps = async (ctx: GetStaticPropsContext) => {
   };
 };
 
+SingleAppPage.PageWrapper = PageWrapper;
+
 export default SingleAppPage;

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

@@ -5,6 +5,8 @@ import { useRouter } from "next/router";
 import { AppSetupPage } from "@calcom/app-store/_pages/setup";
 import { getStaticProps } from "@calcom/app-store/_pages/setup/_getStaticProps";
 
+import PageWrapper from "@components/PageWrapper";
+
 export default function SetupInformation(props: InferGetStaticPropsType<typeof getStaticProps>) {
   const router = useRouter();
   const slug = router.query.slug as string;
@@ -26,6 +28,8 @@ export default function SetupInformation(props: InferGetStaticPropsType<typeof g
   return <AppSetupPage slug={slug} {...props} />;
 }
 
+SetupInformation.PageWrapper = PageWrapper;
+
 export const getStaticPaths: GetStaticPaths = async () => {
   return {
     paths: [],

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

@@ -9,6 +9,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import prisma from "@calcom/prisma";
 import { AppCard, SkeletonText } from "@calcom/ui";
 
+import PageWrapper from "@components/PageWrapper";
+
 export default function Apps({ apps }: InferGetStaticPropsType<typeof getStaticProps>) {
   const { t, isLocaleReady } = useLocale();
   const router = useRouter();
@@ -47,6 +49,8 @@ export default function Apps({ apps }: InferGetStaticPropsType<typeof getStaticP
   );
 }
 
+Apps.PageWrapper = PageWrapper;
+
 export const getStaticPaths = async () => {
   const paths = Object.keys(AppCategories);
 

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

@@ -5,18 +5,20 @@ import { getAppRegistry } from "@calcom/app-store/_appRegistry";
 import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { SkeletonText } from "@calcom/ui";
-import { FiArrowLeft, FiArrowRight } from "@calcom/ui/components/icon";
+import { ArrowLeft, ArrowRight } from "@calcom/ui/components/icon";
+
+import PageWrapper from "@components/PageWrapper";
 
 export default function Apps({ categories }: InferGetStaticPropsType<typeof getStaticProps>) {
   const { t, isLocaleReady } = useLocale();
 
   return (
-    <Shell isPublic large>
+    <Shell isPublic large hideHeadingOnMobile>
       <div className="text-md flex items-center gap-1 px-4 pb-3 pt-3 font-normal md:px-8 lg:px-0 lg:pt-0">
         <Link
           href="/apps"
           className="text-emphasis inline-flex items-center justify-start gap-1 rounded-sm py-2">
-          <FiArrowLeft className="h-4 w-4" />
+          <ArrowLeft className="h-4 w-4" />
           {isLocaleReady ? t("app_store") : <SkeletonText className="h-6 w-24" />}{" "}
         </Link>
       </div>
@@ -32,7 +34,7 @@ export default function Apps({ categories }: InferGetStaticPropsType<typeof getS
                 <h3 className="font-medium capitalize">{category.name}</h3>
                 <p className="text-subtle text-sm">
                   {t("number_apps", { count: category.count })}{" "}
-                  <FiArrowRight className="inline-block h-4 w-4" />
+                  <ArrowRight className="inline-block h-4 w-4" />
                 </p>
               </div>
             </Link>
@@ -43,6 +45,8 @@ export default function Apps({ categories }: InferGetStaticPropsType<typeof getS
   );
 }
 
+Apps.PageWrapper = PageWrapper;
+
 export const getStaticProps = async () => {
   const appStore = await getAppRegistry();
   const categories = appStore.reduce((c, app) => {

apps/web/pages/apps/index.tsx

@@ -10,8 +10,9 @@ import type { AppCategories } from "@calcom/prisma/client";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
 import type { HorizontalTabItemProps } from "@calcom/ui";
 import { AllApps, AppStoreCategories, HorizontalTabs, TextField, PopularAppsSlider } from "@calcom/ui";
-import { FiSearch } from "@calcom/ui/components/icon";
+import { Search } from "@calcom/ui/components/icon";
 
+import PageWrapper from "@components/PageWrapper";
 import AppsLayout from "@components/apps/layouts/AppsLayout";
 
 import { ssrInit } from "@server/lib/ssr";
@@ -37,7 +38,7 @@ function AppsSearch({
   return (
     <TextField
       className="bg-subtle !border-muted !pl-0 focus:!ring-offset-0"
-      addOnLeading={<FiSearch className="text-subtle h-4 w-4" />}
+      addOnLeading={<Search className="text-subtle h-4 w-4" />}
       addOnClassname="!border-muted"
       containerClassName={classNames("focus:!ring-offset-0", className)}
       type="search"
@@ -85,6 +86,8 @@ export default function Apps({ categories, appStore }: inferSSRProps<typeof getS
   );
 }
 
+Apps.PageWrapper = PageWrapper;
+
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
   const { req, res } = context;
 

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

@@ -30,20 +30,21 @@ import {
   showToast,
 } from "@calcom/ui";
 import {
-  FiBarChart,
-  FiCalendar,
-  FiCreditCard,
-  FiGrid,
-  FiMoreHorizontal,
-  FiPlus,
-  FiShare2,
-  FiTrash,
-  FiVideo,
+  BarChart,
+  Calendar,
+  CreditCard,
+  Grid,
+  MoreHorizontal,
+  Plus,
+  Share2,
+  Trash,
+  Video,
 } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
 
 import AppListCard from "@components/AppListCard";
+import PageWrapper from "@components/PageWrapper";
 import { CalendarListContainer } from "@components/apps/CalendarListContainer";
 import InstalledAppsLayout from "@components/apps/layouts/InstalledAppsLayout";
 
@@ -71,7 +72,7 @@ function ConnectOrDisconnectIntegrationMenuItem(props: {
           color="destructive"
           onClick={() => handleDisconnect(credentialId)}
           disabled={isGlobal}
-          StartIcon={FiTrash}>
+          StartIcon={Trash}>
           {t("remove_app")}
         </DropdownItem>
       </DropdownMenuItem>
@@ -159,7 +160,7 @@ const IntegrationsList = ({ data, handleDisconnect, variant }: IntegrationsListP
                   <div className="flex  justify-end">
                     <Dropdown modal={false}>
                       <DropdownMenuTrigger asChild>
-                        <Button StartIcon={FiMoreHorizontal} variant="icon" color="secondary" />
+                        <Button StartIcon={MoreHorizontal} variant="icon" color="secondary" />
                       </DropdownMenuTrigger>
                       <DropdownMenuContent>
                         {!appIsDefault && variant === "conferencing" && (
@@ -167,7 +168,7 @@ const IntegrationsList = ({ data, handleDisconnect, variant }: IntegrationsListP
                             <DropdownItem
                               type="button"
                               color="secondary"
-                              StartIcon={FiVideo}
+                              StartIcon={Video}
                               onClick={() => {
                                 const locationType = getEventLocationTypeFromApp(
                                   item?.locationOption?.value ?? ""
@@ -225,13 +226,13 @@ const IntegrationsContainer = ({
   const { t } = useLocale();
   const query = trpc.viewer.integrations.useQuery({ variant, exclude, onlyInstalled: true });
   const emptyIcon = {
-    calendar: FiCalendar,
-    conferencing: FiVideo,
-    automation: FiShare2,
-    analytics: FiBarChart,
-    payment: FiCreditCard,
-    web3: FiBarChart,
-    other: FiGrid,
+    calendar: Calendar,
+    conferencing: Video,
+    automation: Share2,
+    analytics: BarChart,
+    payment: CreditCard,
+    web3: BarChart,
+    other: Grid,
   };
 
   return (
@@ -270,7 +271,7 @@ const IntegrationsContainer = ({
                     variant ? `/apps/categories/${variant === "conferencing" ? "video" : variant}` : "/apps"
                   }
                   color="secondary"
-                  StartIcon={FiPlus}>
+                  StartIcon={Plus}>
                   {t("add")}
                 </Button>
               }
@@ -372,3 +373,5 @@ export async function getServerSideProps(ctx: AppGetServerSidePropsContext) {
     },
   };
 }
+
+InstalledApps.PageWrapper = PageWrapper;