diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx index b91522b64b..4c57f73c0f 100644 --- a/packages/features/bookings/Booker/Booker.tsx +++ b/packages/features/bookings/Booker/Booker.tsx @@ -78,6 +78,7 @@ const BookerComponent = ({ hashedLink, confirmButtonDisabled, timeZones, + eventMetaChildren, }: BookerProps & WrappedBookerProps) => { const searchParams = useCompatSearchParams(); const isPlatformBookerEmbed = useIsPlatformBookerEmbed(); @@ -402,8 +403,9 @@ const BookerComponent = ({ isPlatform={isPlatform} isPrivateLink={!!hashedLink} locale={userLocale} - timeZones={timeZones} - /> + timeZones={timeZones}> + {eventMetaChildren} + {layout !== BookerLayouts.MONTH_VIEW && !(layout === "mobile" && bookerState === "booking") && (
diff --git a/packages/features/bookings/Booker/components/EventMeta.tsx b/packages/features/bookings/Booker/components/EventMeta.tsx index c4e2c4d9dd..f76a9a8f8c 100644 --- a/packages/features/bookings/Booker/components/EventMeta.tsx +++ b/packages/features/bookings/Booker/components/EventMeta.tsx @@ -53,6 +53,7 @@ export const EventMeta = ({ classNames, locale, timeZones, + children, }: { event?: Pick< BookerEvent, @@ -83,9 +84,11 @@ export const EventMeta = ({ eventMetaContainer?: string; eventMetaTitle?: string; eventMetaTimezoneSelect?: string; + eventMetaChildren?: string; }; locale?: string | null; timeZones?: Timezone[]; + children?: React.ReactNode; }) => { const { timeFormat, timezone } = useBookerTime(); const [setTimezone] = useTimePreferences((state) => [state.setTimezone]); @@ -250,6 +253,7 @@ export const EventMeta = ({ ) : null}
+ {children &&
{children}
} )} diff --git a/packages/features/bookings/Booker/types.ts b/packages/features/bookings/Booker/types.ts index 49b335df1c..7ac18b2b52 100644 --- a/packages/features/bookings/Booker/types.ts +++ b/packages/features/bookings/Booker/types.ts @@ -1,3 +1,5 @@ +import type React from "react"; + import type { UseBookerLayoutType } from "@calcom/features/bookings/Booker/components/hooks/useBookerLayout"; import type { UseBookingFormReturnType } from "@calcom/features/bookings/Booker/components/hooks/useBookingForm"; import type { UseBookingsReturnType } from "@calcom/features/bookings/Booker/components/hooks/useBookings"; @@ -24,6 +26,11 @@ export interface BookerProps { */ customClassNames?: CustomClassNames; + /** + * Custom React components to render at the bottom of the EventMeta component + */ + eventMetaChildren?: React.ReactNode; + /** * Whether is a team or org, we gather basic info from both */ @@ -152,6 +159,7 @@ export type CustomClassNames = { eventMetaContainer?: string; eventMetaTitle?: string; eventMetaTimezoneSelect?: string; + eventMetaChildren?: string; }; datePickerCustomClassNames?: { datePickerContainer?: string; diff --git a/packages/platform/atoms/booker/BookerPlatformWrapper.tsx b/packages/platform/atoms/booker/BookerPlatformWrapper.tsx index 3275162cac..f0610fe1b3 100644 --- a/packages/platform/atoms/booker/BookerPlatformWrapper.tsx +++ b/packages/platform/atoms/booker/BookerPlatformWrapper.tsx @@ -583,6 +583,7 @@ export const BookerPlatformWrapper = ( isPlatform hasValidLicense={true} isBookingDryRun={isBookingDryRun ?? routingParams?.isBookingDryRun} + eventMetaChildren={props.eventMetaChildren} /> ); diff --git a/packages/platform/atoms/booker/types.ts b/packages/platform/atoms/booker/types.ts index 48d094cbdf..a34d592697 100644 --- a/packages/platform/atoms/booker/types.ts +++ b/packages/platform/atoms/booker/types.ts @@ -1,3 +1,5 @@ +import type React from "react"; + import type { BookerProps } from "@calcom/features/bookings/Booker"; import type { BookerStore } from "@calcom/features/bookings/Booker/store"; import type { Timezone } from "@calcom/features/bookings/Booker/types"; @@ -78,6 +80,7 @@ export type BookerPlatformWrapperAtomProps = Omit< confirmButtonDisabled?: boolean; timeZones?: Timezone[]; isBookingDryRun?: boolean; + eventMetaChildren?: React.ReactNode; }; type VIEW_TYPE = keyof typeof BookerLayouts;