From ba5b9e951a61dce6b267375b4dcccbc107caef8d Mon Sep 17 00:00:00 2001
From: Lauris Skraucis <lauris.skraucis@gmail.com>
Date: Mon, 7 Oct 2024 09:52:47 +0200
Subject: [PATCH] feat: Booker atom enable hiding event details (#16906)

* refactor: Booker component hideEventTypeDetails hides sidebar

* feat: Booker atom hideEventTypeDetails prop

* fix: redundant border appearing if event details hidden

* Revert "fix: redundant border appearing if event details hidden"

This reverts commit 63122a906a8e41b54074387e1a6a4f0e4489a8a9.

* fix: border
---
 packages/features/bookings/Booker/Booker.tsx  | 70 ++++++++++---------
 .../components/hooks/useBookerLayout.ts       | 11 ++-
 .../atoms/booker/BookerPlatformWrapper.tsx    |  3 +-
 3 files changed, 49 insertions(+), 35 deletions(-)

diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx
index 6f4090b315..bdd2eb10c9 100644
--- a/packages/features/bookings/Booker/Booker.tsx
+++ b/packages/features/bookings/Booker/Booker.tsx
@@ -327,42 +327,46 @@ const BookerComponent = ({
                 )}
               </BookerSection>
             )}
-            <StickyOnDesktop key="meta" className={classNames("relative z-10 flex [grid-area:meta]")}>
-              <BookerSection
-                area="meta"
-                className="max-w-screen flex w-full flex-col md:w-[var(--booker-meta-width)]">
-                {!hideEventTypeDetails && orgBannerUrl && !isPlatform && (
-                  <img
-                    loading="eager"
-                    className="-mb-9 ltr:rounded-tl-md rtl:rounded-tr-md"
-                    alt="org banner"
-                    src={orgBannerUrl}
-                  />
-                )}
-                <EventMeta
-                  classNames={{
-                    eventMetaContainer: customClassNames?.eventMetaCustomClassNames?.eventMetaContainer,
-                    eventMetaTitle: customClassNames?.eventMetaCustomClassNames?.eventMetaTitle,
-                    eventMetaTimezoneSelect:
-                      customClassNames?.eventMetaCustomClassNames?.eventMetaTimezoneSelect,
-                  }}
-                  event={event.data}
-                  isPending={event.isPending}
-                  isPlatform={isPlatform}
-                />
-                {layout !== BookerLayouts.MONTH_VIEW &&
-                  !(layout === "mobile" && bookerState === "booking") && (
-                    <div className="mt-auto px-5 py-3">
-                      <DatePicker event={event} schedule={schedule} scrollToTimeSlots={scrollToTimeSlots} />
-                    </div>
+            {!hideEventTypeDetails && (
+              <StickyOnDesktop key="meta" className={classNames("relative z-10 flex [grid-area:meta]")}>
+                <BookerSection
+                  area="meta"
+                  className="max-w-screen flex w-full flex-col md:w-[var(--booker-meta-width)]">
+                  {orgBannerUrl && !isPlatform && (
+                    <img
+                      loading="eager"
+                      className="-mb-9 ltr:rounded-tl-md rtl:rounded-tr-md"
+                      alt="org banner"
+                      src={orgBannerUrl}
+                    />
                   )}
-              </BookerSection>
-            </StickyOnDesktop>
+                  <EventMeta
+                    classNames={{
+                      eventMetaContainer: customClassNames?.eventMetaCustomClassNames?.eventMetaContainer,
+                      eventMetaTitle: customClassNames?.eventMetaCustomClassNames?.eventMetaTitle,
+                      eventMetaTimezoneSelect:
+                        customClassNames?.eventMetaCustomClassNames?.eventMetaTimezoneSelect,
+                    }}
+                    event={event.data}
+                    isPending={event.isPending}
+                    isPlatform={isPlatform}
+                  />
+                  {layout !== BookerLayouts.MONTH_VIEW &&
+                    !(layout === "mobile" && bookerState === "booking") && (
+                      <div className="mt-auto px-5 py-3">
+                        <DatePicker event={event} schedule={schedule} scrollToTimeSlots={scrollToTimeSlots} />
+                      </div>
+                    )}
+                </BookerSection>
+              </StickyOnDesktop>
+            )}
 
             <BookerSection
               key="book-event-form"
               area="main"
-              className="sticky top-0 ml-[-1px] h-full p-6 md:w-[var(--booker-main-width)] md:border-l"
+              className={`sticky top-0 ml-[-1px] h-full p-6 md:w-[var(--booker-main-width)] ${
+                !hideEventTypeDetails ? "md:border-l" : ""
+              }`}
               {...fadeInLeft}
               visible={bookerState === "booking" && !shouldShowFormInDialog}>
               {EventBooker}
@@ -374,7 +378,9 @@ const BookerComponent = ({
               visible={bookerState !== "booking" && layout === BookerLayouts.MONTH_VIEW}
               {...fadeInLeft}
               initial="visible"
-              className="md:border-subtle ml-[-1px] h-full flex-shrink px-5 py-3 md:border-l lg:w-[var(--booker-main-width)]">
+              className={`ml-[-1px] h-full flex-shrink px-5 py-3 lg:w-[var(--booker-main-width)] ${
+                !hideEventTypeDetails ? "md:border-subtle md:border-l" : ""
+              }`}>
               <DatePicker
                 classNames={{
                   datePickerContainer: customClassNames?.datePickerCustomClassNames?.datePickerContainer,
diff --git a/packages/features/bookings/Booker/components/hooks/useBookerLayout.ts b/packages/features/bookings/Booker/components/hooks/useBookerLayout.ts
index 56c3df6f4e..c4e0be357b 100644
--- a/packages/features/bookings/Booker/components/hooks/useBookerLayout.ts
+++ b/packages/features/bookings/Booker/components/hooks/useBookerLayout.ts
@@ -15,7 +15,14 @@ import { getQueryParam } from "../../utils/query-param";
 
 export type UseBookerLayoutType = ReturnType<typeof useBookerLayout>;
 
-export const useBookerLayout = (event: Pick<BookerEvent, "profile"> | undefined | null) => {
+type Options = {
+  hideEventTypeDetails?: boolean;
+};
+
+export const useBookerLayout = (
+  event: Pick<BookerEvent, "profile"> | undefined | null,
+  options?: Options
+) => {
   const [_layout, setLayout] = useBookerStore((state) => [state.layout, state.setLayout], shallow);
   const isEmbed = useIsEmbed();
   const isMobile = useMediaQuery("(max-width: 768px)");
@@ -74,7 +81,7 @@ export const useBookerLayout = (event: Pick<BookerEvent, "profile"> | undefined
 
   const shouldShowFormInDialog = shouldShowFormInDialogMap[layout];
 
-  const hideEventTypeDetails = isEmbed ? embedUiConfig.hideEventTypeDetails : false;
+  const hideEventTypeDetails = isEmbed ? embedUiConfig.hideEventTypeDetails : !!options?.hideEventTypeDetails;
 
   return {
     shouldShowFormInDialog,
diff --git a/packages/platform/atoms/booker/BookerPlatformWrapper.tsx b/packages/platform/atoms/booker/BookerPlatformWrapper.tsx
index 56ea8e0854..5a89092e92 100644
--- a/packages/platform/atoms/booker/BookerPlatformWrapper.tsx
+++ b/packages/platform/atoms/booker/BookerPlatformWrapper.tsx
@@ -76,6 +76,7 @@ export type BookerPlatformWrapperAtomProps = Omit<
   locationUrl?: string;
   view?: VIEW_TYPE;
   metadata?: Record<string, string>;
+  hideEventTypeDetails?: boolean;
 };
 
 type VIEW_TYPE = keyof typeof BookerLayouts;
@@ -180,7 +181,7 @@ export const BookerPlatformWrapper = (
     event.data.length = props.duration;
   }
 
-  const bookerLayout = useBookerLayout(event.data);
+  const bookerLayout = useBookerLayout(event.data, { hideEventTypeDetails: props.hideEventTypeDetails });
   useInitializeBookerStore({
     ...props,
     eventId: event.data?.id,