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