vynte-infra/calendar
2
0
Fork 0
Code Issues Pull Requests Actions 1.9k Packages Projects Releases Wiki Activity

feat: Booker atom enable hiding event details (#16906)

Browse Source 
* 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
This commit is contained in:
Lauris Skraucis
2024-10-07 09:52:47 +02:00
committed by GitHub
parent 5e3865b645
commit ba5b9e951a
3 changed files with 49 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/features/bookings/Booker/Booker.tsx
+38 -32
View File
@@ -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,
packages/features/bookings/Booker/components/hooks/useBookerLayout.ts
+9 -2
View File
@@ -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,
packages/platform/atoms/booker/BookerPlatformWrapper.tsx
+2 -1
View File
@@ -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,