commonscomputer/cal.diy
4
0
Fork 0
Code Issues Pull Requests Actions 2.0k Packages Projects Releases Wiki Activity

fix: Hotfix - Revert hideEventTypeDetails handling in Booker.tsx (#17130)

Browse Source 
* Revert "fix: DatePicker not showing up in mobile mode when hideEventTypeDetails is true (#17037)"

This reverts commit 1f08bc5a4f.

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

This reverts commit ba5b9e951a.

* Keep the playground test scenarios
This commit is contained in:
Hariom Balhara
2024-10-16 10:01:04 +00:00
committed by GitHub
parent 8115c86e37
commit 123074f4ba
5 changed files with 76 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/embeds/embed-core/index.html
+5
View File
@@ -438,6 +438,11 @@
<h3><a href="?only=ns:columnView">Test Column View</a></h3>
<div class="place" style="width: 100%"></div>
</div>
<div class="inline-embed-container" id="cal-booking-place-columnViewHideEventTypeDetails">
<h3><a href="?only=ns:columnViewHideEventTypeDetails">Test Column View Hide Event Type Details</a></h3>
<div class="place" style="width: 100%"></div>
</div>
<div class="inline-embed-container" id="cal-booking-place-pageParamsForwarding">
<h3><a href="?only=ns:pageParamsForwarding">Test Page Params Forwarding</a></h3>
<div class="place" style="width: 100%"></div>
packages/embeds/embed-core/playground.ts
+35
View File
@@ -538,12 +538,47 @@ if (only === "all" || only == "ns:columnView") {
},
}
);
Cal.ns.columnView("on", {
action: "*",
callback,
});
}
if (only === "all" || only == "ns:columnViewHideEventTypeDetails") {
// Create a namespace "second". It can be accessed as Cal.ns.second with the exact same API as Cal
Cal("init", "columnViewHideEventTypeDetails", {
debug: true,
origin: origin,
});
Cal.ns.columnViewHideEventTypeDetails(
"inline",
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
{
elementOrSelector: "#cal-booking-place-columnViewHideEventTypeDetails .place",
calLink: "free/30min",
config: {
iframeAttrs: {
id: "cal-booking-place-columnView-iframe",
},
"flag.coep": "true",
layout: "column_view",
},
}
);
Cal.ns.columnViewHideEventTypeDetails("ui", {
hideEventTypeDetails: true,
});
Cal.ns.columnViewHideEventTypeDetails("on", {
action: "*",
callback,
});
}
if (only === "all" || only == "ns:autoScrollTest") {
if (!calLink) {
throw new Error("cal-link parameter is required for autoScrollTest");
packages/features/bookings/Booker/Booker.tsx
+33 -47
View File
@@ -259,8 +259,6 @@ const BookerComponent = ({
return null;
}
const shouldShowMeta = !hideEventTypeDetails;
return (
<>
{event.data && !isPlatform ? <BookingPageTagManager eventType={event.data} /> : <></>}
@@ -329,46 +327,42 @@ const BookerComponent = ({
)}
</BookerSection>
)}
{shouldShowMeta && (
<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}
/>
)}
<EventMeta
classNames={{
eventMetaContainer: customClassNames?.eventMetaCustomClassNames?.eventMetaContainer,
eventMetaTitle: customClassNames?.eventMetaCustomClassNames?.eventMetaTitle,
eventMetaTimezoneSelect:
customClassNames?.eventMetaCustomClassNames?.eventMetaTimezoneSelect,
}}
event={event.data}
isPending={event.isPending}
isPlatform={isPlatform}
<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}
/>
{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>
)}
)}
<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)] ${
!hideEventTypeDetails ? "md:border-l" : ""
}`}
className="sticky top-0 ml-[-1px] h-full p-6 md:w-[var(--booker-main-width)] md:border-l"
{...fadeInLeft}
visible={bookerState === "booking" && !shouldShowFormInDialog}>
{EventBooker}
@@ -377,18 +371,10 @@ const BookerComponent = ({
<BookerSection
key="datepicker"
area="main"
visible={
bookerState !== "booking" &&
(layout === BookerLayouts.MONTH_VIEW ||
// Meta possibly can show DatePicker but if meta is not shown, then DatePicker must be shown here
// FIXME: We need proper state management for this(depending on layout and bookerState)
!shouldShowMeta)
}
visible={bookerState !== "booking" && layout === BookerLayouts.MONTH_VIEW}
{...fadeInLeft}
initial="visible"
className={`ml-[-1px] h-full flex-shrink px-5 py-3 lg:w-[var(--booker-main-width)] ${
!hideEventTypeDetails ? "md:border-subtle md:border-l" : ""
}`}>
className="md:border-subtle ml-[-1px] h-full flex-shrink px-5 py-3 md:border-l lg:w-[var(--booker-main-width)]">
<DatePicker
classNames={{
datePickerContainer: customClassNames?.datePickerCustomClassNames?.datePickerContainer,
packages/features/bookings/Booker/components/hooks/useBookerLayout.ts
+2 -9
View File
@@ -15,14 +15,7 @@ import { getQueryParam } from "../../utils/query-param";
export type UseBookerLayoutType = ReturnType<typeof useBookerLayout>;
type Options = {
hideEventTypeDetails?: boolean;
};
export const useBookerLayout = (
event: Pick<BookerEvent, "profile"> | undefined | null,
options?: Options
) => {
export const useBookerLayout = (event: Pick<BookerEvent, "profile"> | undefined | null) => {
const [_layout, setLayout] = useBookerStore((state) => [state.layout, state.setLayout], shallow);
const isEmbed = useIsEmbed();
const isMobile = useMediaQuery("(max-width: 768px)");
@@ -81,7 +74,7 @@ export const useBookerLayout = (
const shouldShowFormInDialog = shouldShowFormInDialogMap[layout];
const hideEventTypeDetails = isEmbed ? embedUiConfig.hideEventTypeDetails : !!options?.hideEventTypeDetails;
const hideEventTypeDetails = isEmbed ? embedUiConfig.hideEventTypeDetails : false;
return {
shouldShowFormInDialog,
packages/platform/atoms/booker/BookerPlatformWrapper.tsx
+1 -2
View File
@@ -80,7 +80,6 @@ export type BookerPlatformWrapperAtomProps = Omit<
locationUrl?: string;
view?: VIEW_TYPE;
metadata?: Record<string, string>;
hideEventTypeDetails?: boolean;
};
type VIEW_TYPE = keyof typeof BookerLayouts;
@@ -188,7 +187,7 @@ export const BookerPlatformWrapper = (
event.data.length = props.duration;
}
const bookerLayout = useBookerLayout(event.data, { hideEventTypeDetails: props.hideEventTypeDetails });
const bookerLayout = useBookerLayout(event.data);
useInitializeBookerStore({
...props,
eventId: event.data?.id,