feat: New Booker: Disable dialog form in mobile in embed (#9748)

pull/9746/head^2
Hariom Balhara 2023-06-23 18:22:03 +05:30 committed by GitHub
parent 8718905474
commit 6a976f5b42
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 3 deletions

View File

@ -20,7 +20,7 @@ import { BookerSection } from "./components/Section";
import { Away, NotFound } from "./components/Unavailable";
import { extraDaysConfig, fadeInLeft, getBookerSizeClassNames, useBookerResizeAnimation } from "./config";
import { useBookerStore, useInitializeBookerStore } from "./store";
import type { BookerProps } from "./types";
import type { BookerLayout, BookerProps } from "./types";
import { useEvent } from "./utils/event";
import { validateLayout } from "./utils/layout";
import { getQueryParam } from "./utils/query-param";
@ -114,6 +114,21 @@ const BookerComponent = ({
return <NotFound />;
}
// In Embed, a Dialog doesn't look good, we disable it intentionally for the layouts that support showing Form without Dialog(i.e. no-dialog Form)
const shouldShowFormInDialogMap: Record<BookerLayout, boolean> = {
// mobile supports showing the Form without Dialog
mobile: !isEmbed,
// We don't show Dialog in month_view currently. Can be easily toggled though as it supports no-dialog Form
month_view: false,
// week_view doesn't support no-dialog Form
// When it's supported, disable it for embed
week_view: true,
// column_view doesn't support no-dialog Form
// When it's supported, disable it for embed
column_view: true,
};
const shouldShowFormInDialog = shouldShowFormInDialogMap[layout];
return (
<>
{event.data ? <BookingPageTagManager eventType={event.data} /> : null}
@ -174,7 +189,7 @@ const BookerComponent = ({
area="main"
className="border-subtle sticky top-0 ml-[-1px] h-full p-6 md:w-[var(--booker-main-width)] md:border-l"
{...fadeInLeft}
visible={bookerState === "booking" && layout === BookerLayouts.MONTH_VIEW}>
visible={bookerState === "booking" && !shouldShowFormInDialog}>
<BookEventForm onCancel={() => setSelectedTimeslot(null)} />
</BookerSection>
@ -232,7 +247,7 @@ const BookerComponent = ({
</div>
<BookFormAsModal
visible={layout !== BookerLayouts.MONTH_VIEW && bookerState === "booking"}
visible={bookerState === "booking" && shouldShowFormInDialog}
onCancel={() => setSelectedTimeslot(null)}
/>
</>