feat: Enable Adding Custom children components at the bottom of EventMeta within Booker using children component props (#21618)

* feat: Enable Adding Custom children components at the bottom of EventMeta

* removed default style

* added prop in BookerPlatformWrapper

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}
+                </EventMeta>
                 {layout !== BookerLayouts.MONTH_VIEW &&
                   !(layout === "mobile" && bookerState === "booking") && (
                     <div className="mt-auto px-5 py-3">

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 = ({
               </EventMetaBlock>
             ) : null}
           </div>
+          {children && <div className={classNames?.eventMetaChildren}>{children}</div>}
         </m.div>
       )}
     </div>

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;

packages/platform/atoms/booker/BookerPlatformWrapper.tsx

@@ -583,6 +583,7 @@ export const BookerPlatformWrapper = (
         isPlatform
         hasValidLicense={true}
         isBookingDryRun={isBookingDryRun ?? routingParams?.isBookingDryRun}
+        eventMetaChildren={props.eventMetaChildren}
       />
     </AtomsWrapper>
   );

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;