diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx index 9e8a474cb57621..92e76378d5dafd 100644 --- a/packages/features/bookings/Booker/Booker.tsx +++ b/packages/features/bookings/Booker/Booker.tsx @@ -4,6 +4,7 @@ import { useEffect, useRef, useMemo } from "react"; import StickyBox from "react-sticky-box"; import { shallow } from "zustand/shallow"; +import { useEmbedUiConfig } from "@calcom/embed-core/embed-iframe"; import classNames from "@calcom/lib/classNames"; import useMediaQuery from "@calcom/lib/hooks/useMediaQuery"; import { BookerLayouts, defaultBookerLayoutSettings } from "@calcom/prisma/zod-utils"; @@ -103,6 +104,9 @@ const BookerComponent = ({ } }, [layout]); + const embedUiConfig = useEmbedUiConfig(); + const hideEventTypeDetails = isEmbed ? embedUiConfig.hideEventTypeDetails : false; + if (event.isSuccess && !event.data) { return ; } @@ -114,7 +118,7 @@ const BookerComponent = ({ ref={animationScope} className={classNames( // Sets booker size css variables for the size of all the columns. - ...getBookerSizeClassNames(layout, bookerState), + ...getBookerSizeClassNames(layout, bookerState, hideEventTypeDetails), "bg-default dark:bg-muted grid max-w-full items-start dark:[color-scheme:dark] sm:transition-[width] sm:duration-300 sm:motion-reduce:transition-none md:flex-row", layout === BookerLayouts.MONTH_VIEW && "border-subtle rounded-md border", !isEmbed && "sm:transition-[width] sm:duration-300", diff --git a/packages/features/bookings/Booker/components/EventMeta.tsx b/packages/features/bookings/Booker/components/EventMeta.tsx index 3da5e1cc12d003..bb41d541d442c1 100644 --- a/packages/features/bookings/Booker/components/EventMeta.tsx +++ b/packages/features/bookings/Booker/components/EventMeta.tsx @@ -1,6 +1,7 @@ import { m } from "framer-motion"; import dynamic from "next/dynamic"; +import { useEmbedUiConfig, useIsEmbed } from "@calcom/embed-core/embed-iframe"; import { EventDetails, EventMembers, EventMetaSkeleton, EventTitle } from "@calcom/features/bookings"; import { EventMetaBlock } from "@calcom/features/bookings/components/event-meta/Details"; import { useTimePreferences } from "@calcom/features/bookings/lib"; @@ -25,6 +26,13 @@ export const EventMeta = () => { const rescheduleBooking = useBookerStore((state) => state.rescheduleBooking); const { i18n, t } = useLocale(); const { data: event, isLoading } = useEvent(); + const embedUiConfig = useEmbedUiConfig(); + const isEmbed = useIsEmbed(); + const hideEventTypeDetails = isEmbed ? embedUiConfig.hideEventTypeDetails : false; + + if (hideEventTypeDetails) { + return null; + } return (
diff --git a/packages/features/bookings/Booker/config.ts b/packages/features/bookings/Booker/config.ts index 4c78e0ab20b4ee..fa2312e2459b6f 100644 --- a/packages/features/bookings/Booker/config.ts +++ b/packages/features/bookings/Booker/config.ts @@ -112,25 +112,38 @@ export const resizeAnimationConfig: ResizeAnimationConfig = { }, }; -export const getBookerSizeClassNames = (layout: BookerLayout, bookerState: BookerState) => { +export const getBookerSizeClassNames = ( + layout: BookerLayout, + bookerState: BookerState, + hideEventTypeDetails = false +) => { + const getBookerMetaClass = (className: string) => { + if (hideEventTypeDetails) { + return ""; + } + return className; + }; + return [ - // Size settings are abstracted on their own lines purely for readbility. + // Size settings are abstracted on their own lines purely for readability. // General sizes, used always "[--booker-timeslots-width:240px] lg:[--booker-timeslots-width:280px]", // Small calendar defaults - layout === BookerLayouts.MONTH_VIEW && "[--booker-meta-width:240px]", + layout === BookerLayouts.MONTH_VIEW && getBookerMetaClass("[--booker-meta-width:240px]"), // Meta column get's wider in booking view to fit the full date on a single row in case // of a multi occurance event. Also makes form less wide, which also looks better. layout === BookerLayouts.MONTH_VIEW && bookerState === "booking" && - "[--booker-main-width:420px] lg:[--booker-meta-width:340px]", + `[--booker-main-width:420px] ${getBookerMetaClass("lg:[--booker-meta-width:340px]")}`, // Smaller meta when not in booking view. layout === BookerLayouts.MONTH_VIEW && bookerState !== "booking" && - "[--booker-main-width:480px] lg:[--booker-meta-width:280px]", + `[--booker-main-width:480px] ${getBookerMetaClass("lg:[--booker-meta-width:280px]")}`, // Fullscreen view settings. layout !== BookerLayouts.MONTH_VIEW && - "[--booker-main-width:480px] [--booker-meta-width:340px] lg:[--booker-meta-width:424px]", + `[--booker-main-width:480px] [--booker-meta-width:340px] ${getBookerMetaClass( + "lg:[--booker-meta-width:424px]" + )}`, ]; };