222 lines
8.2 KiB
TypeScript
222 lines
8.2 KiB
TypeScript
import { LazyMotion, domAnimation, m, AnimatePresence } from "framer-motion";
|
|
import dynamic from "next/dynamic";
|
|
import { useEffect, useRef } from "react";
|
|
import StickyBox from "react-sticky-box";
|
|
import { shallow } from "zustand/shallow";
|
|
|
|
import classNames from "@calcom/lib/classNames";
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
|
|
import { BookerLayouts, bookerLayoutOptions } from "@calcom/prisma/zod-utils";
|
|
|
|
import { AvailableTimeSlots } from "./components/AvailableTimeSlots";
|
|
import { BookEventForm } from "./components/BookEventForm";
|
|
import { BookFormAsModal } from "./components/BookEventForm/BookFormAsModal";
|
|
import { EventMeta } from "./components/EventMeta";
|
|
import { Header } from "./components/Header";
|
|
import { LargeCalendar } from "./components/LargeCalendar";
|
|
import { BookerSection } from "./components/Section";
|
|
import { Away, NotFound } from "./components/Unavailable";
|
|
import { fadeInLeft, getBookerSizeClassNames, useBookerResizeAnimation } from "./config";
|
|
import { useBookerStore, useInitializeBookerStore } from "./store";
|
|
import type { BookerProps } from "./types";
|
|
import { useEvent } from "./utils/event";
|
|
import { useBrandColors } from "./utils/use-brand-colors";
|
|
|
|
const PoweredBy = dynamic(() => import("@calcom/ee/components/PoweredBy"));
|
|
const DatePicker = dynamic(() => import("./components/DatePicker").then((mod) => mod.DatePicker), {
|
|
ssr: false,
|
|
});
|
|
|
|
const BookerComponent = ({
|
|
username,
|
|
eventSlug,
|
|
month,
|
|
rescheduleBooking,
|
|
hideBranding = false,
|
|
}: BookerProps) => {
|
|
const { t } = useLocale();
|
|
const isMobile = useMediaQuery("(max-width: 768px)");
|
|
const isTablet = useMediaQuery("(max-width: 1024px)");
|
|
const timeslotsRef = useRef<HTMLDivElement>(null);
|
|
const StickyOnDesktop = isMobile ? "div" : StickyBox;
|
|
const rescheduleUid =
|
|
typeof window !== "undefined" ? new URLSearchParams(window.location.search).get("rescheduleUid") : null;
|
|
const event = useEvent();
|
|
const [layout, setLayout] = useBookerStore((state) => [state.layout, state.setLayout], shallow);
|
|
const [bookerState, setBookerState] = useBookerStore((state) => [state.state, state.setState], shallow);
|
|
const selectedDate = useBookerStore((state) => state.selectedDate);
|
|
const [selectedTimeslot, setSelectedTimeslot] = useBookerStore(
|
|
(state) => [state.selectedTimeslot, state.setSelectedTimeslot],
|
|
shallow
|
|
);
|
|
const extraDays = layout === BookerLayouts.COLUMN_VIEW ? (isTablet ? 2 : 4) : 0;
|
|
const bookerLayouts = event.data?.profile?.bookerLayouts || {
|
|
defaultLayout: BookerLayouts.MONTH_VIEW,
|
|
enabledLayouts: bookerLayoutOptions,
|
|
};
|
|
|
|
const animationScope = useBookerResizeAnimation(layout, bookerState);
|
|
|
|
useBrandColors({
|
|
brandColor: event.data?.profile.brandColor,
|
|
darkBrandColor: event.data?.profile.darkBrandColor,
|
|
theme: event.data?.profile.theme,
|
|
});
|
|
|
|
useInitializeBookerStore({
|
|
username,
|
|
eventSlug,
|
|
month,
|
|
eventId: event?.data?.id,
|
|
rescheduleUid,
|
|
rescheduleBooking,
|
|
layout: bookerLayouts.defaultLayout,
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (isMobile && layout !== "mobile") {
|
|
setLayout("mobile");
|
|
} else if (!isMobile && layout === "mobile") {
|
|
setLayout(BookerLayouts.MONTH_VIEW);
|
|
}
|
|
}, [isMobile, setLayout, layout]);
|
|
|
|
useEffect(() => {
|
|
if (event.isLoading) return setBookerState("loading");
|
|
if (!selectedDate) return setBookerState("selecting_date");
|
|
if (!selectedTimeslot) return setBookerState("selecting_time");
|
|
return setBookerState("booking");
|
|
}, [event, selectedDate, selectedTimeslot, setBookerState]);
|
|
|
|
useEffect(() => {
|
|
if (layout === "mobile") {
|
|
timeslotsRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
}
|
|
}, [layout]);
|
|
|
|
if (event.isSuccess && !event.data) {
|
|
return <NotFound />;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="flex h-full w-full flex-col items-center">
|
|
<div
|
|
ref={animationScope}
|
|
className={classNames(
|
|
// Sets booker size css variables for the size of all the columns.
|
|
...getBookerSizeClassNames(layout, bookerState),
|
|
"bg-default dark:bg-muted grid max-w-full items-start overflow-clip dark:[color-scheme:dark] sm:transition-[width] sm:duration-300 sm:motion-reduce:transition-none md:flex-row",
|
|
layout === BookerLayouts.MONTH_VIEW && "border-subtle rounded-md border"
|
|
)}>
|
|
<AnimatePresence>
|
|
<BookerSection area="header">
|
|
<Header
|
|
enabledLayouts={bookerLayouts.enabledLayouts}
|
|
extraDays={extraDays}
|
|
isMobile={isMobile}
|
|
/>
|
|
</BookerSection>
|
|
<StickyOnDesktop
|
|
key="meta"
|
|
className={classNames(
|
|
"relative z-10 flex",
|
|
layout !== BookerLayouts.MONTH_VIEW && "sm:min-h-screen"
|
|
)}>
|
|
<BookerSection
|
|
area="meta"
|
|
className="max-w-screen flex w-full flex-col md:w-[var(--booker-meta-width)]">
|
|
<EventMeta />
|
|
{layout !== BookerLayouts.MONTH_VIEW &&
|
|
!(layout === "mobile" && bookerState === "booking") && (
|
|
<div className=" mt-auto p-5">
|
|
<DatePicker />
|
|
</div>
|
|
)}
|
|
</BookerSection>
|
|
</StickyOnDesktop>
|
|
|
|
<BookerSection
|
|
key="book-event-form"
|
|
area="main"
|
|
className="border-subtle sticky top-0 ml-[-1px] h-full p-5 md:w-[var(--booker-main-width)] md:border-l"
|
|
{...fadeInLeft}
|
|
visible={bookerState === "booking" && layout !== BookerLayouts.COLUMN_VIEW}>
|
|
<BookEventForm onCancel={() => setSelectedTimeslot(null)} />
|
|
</BookerSection>
|
|
|
|
<BookerSection
|
|
key="datepicker"
|
|
area="main"
|
|
visible={bookerState !== "booking" && layout === BookerLayouts.MONTH_VIEW}
|
|
{...fadeInLeft}
|
|
initial="visible"
|
|
className="md:border-subtle ml-[-1px] h-full flex-shrink p-5 md:border-l lg:w-[var(--booker-main-width)]">
|
|
<DatePicker />
|
|
</BookerSection>
|
|
|
|
<BookerSection
|
|
key="large-calendar"
|
|
area="main"
|
|
visible={
|
|
layout === BookerLayouts.WEEK_VIEW &&
|
|
(bookerState === "selecting_date" || bookerState === "selecting_time")
|
|
}
|
|
className="border-muted sticky top-0 ml-[-1px] h-full md:border-l"
|
|
{...fadeInLeft}>
|
|
<LargeCalendar />
|
|
</BookerSection>
|
|
|
|
<BookerSection
|
|
key="timeslots"
|
|
area={{ default: "main", month_view: "timeslots" }}
|
|
visible={
|
|
(layout !== BookerLayouts.WEEK_VIEW && bookerState === "selecting_time") ||
|
|
layout === BookerLayouts.COLUMN_VIEW
|
|
}
|
|
className={classNames(
|
|
"border-subtle flex h-full w-full flex-col p-5 pb-0 md:border-l",
|
|
layout === BookerLayouts.MONTH_VIEW &&
|
|
"scroll-bar h-full overflow-auto md:w-[var(--booker-timeslots-width)]",
|
|
layout !== BookerLayouts.MONTH_VIEW && "sticky top-0"
|
|
)}
|
|
ref={timeslotsRef}
|
|
{...fadeInLeft}>
|
|
<AvailableTimeSlots
|
|
extraDays={extraDays}
|
|
limitHeight={layout === BookerLayouts.MONTH_VIEW}
|
|
seatsPerTimeslot={event.data?.seatsPerTimeSlot}
|
|
/>
|
|
</BookerSection>
|
|
</AnimatePresence>
|
|
</div>
|
|
|
|
<m.span
|
|
key="logo"
|
|
className={classNames(
|
|
"mt-auto mb-6 pt-6 [&_img]:h-[15px]",
|
|
layout === BookerLayouts.MONTH_VIEW ? "block" : "hidden"
|
|
)}>
|
|
{!hideBranding ? <PoweredBy logoOnly /> : null}
|
|
</m.span>
|
|
</div>
|
|
|
|
<BookFormAsModal
|
|
visible={layout === BookerLayouts.COLUMN_VIEW && bookerState === "booking"}
|
|
onCancel={() => setSelectedTimeslot(null)}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export const Booker = (props: BookerProps) => {
|
|
if (props.isAway) return <Away />;
|
|
|
|
return (
|
|
<LazyMotion features={domAnimation}>
|
|
<BookerComponent {...props} />
|
|
</LazyMotion>
|
|
);
|
|
};
|