4374da08e2
* increase scrollable height * Fix react-select version - import esm error * Increase booking form modal height * Update packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx * Match design specs * nit change * Trying to fix type errors --------- Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Peer Richelsen <peer@cal.com> Co-authored-by: Alex van Andel <me@alexvanandel.com>
40 lines
1.8 KiB
TypeScript
40 lines
1.8 KiB
TypeScript
import { Calendar, Clock } from "lucide-react";
|
|
|
|
import dayjs from "@calcom/dayjs";
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import { Badge, Dialog, DialogContent } from "@calcom/ui";
|
|
|
|
import { useBookerStore } from "../../store";
|
|
import { useEvent } from "../../utils/event";
|
|
import { BookEventForm } from "./BookEventForm";
|
|
|
|
export function BookFormAsModal({ visible, onCancel }: { visible: boolean; onCancel: () => void }) {
|
|
const { t } = useLocale();
|
|
const selectedTimeslot = useBookerStore((state) => state.selectedTimeslot);
|
|
const selectedDuration = useBookerStore((state) => state.selectedDuration);
|
|
const { data } = useEvent();
|
|
const parsedSelectedTimeslot = dayjs(selectedTimeslot);
|
|
|
|
return (
|
|
<Dialog open={visible} onOpenChange={onCancel}>
|
|
<DialogContent
|
|
type={undefined}
|
|
enableOverflow
|
|
className="[&_.modalsticky]:border-t-subtle [&_.modalsticky]:bg-default max-h-[80vh] pt-6 pb-0 [&_.modalsticky]:sticky [&_.modalsticky]:bottom-0 [&_.modalsticky]:left-0 [&_.modalsticky]:right-0 [&_.modalsticky]:-mx-8 [&_.modalsticky]:border-t [&_.modalsticky]:px-6 [&_.modalsticky]:py-4">
|
|
<h1 className="font-cal text-emphasis text-xl leading-5">{t("confirm_your_details")} </h1>
|
|
<div className="mt-4 flex space-x-2 rounded-md leading-none">
|
|
<Badge variant="grayWithoutHover" startIcon={Calendar} size="lg">
|
|
<span>{parsedSelectedTimeslot.format("LLL")}</span>
|
|
</Badge>
|
|
{(selectedDuration || data?.length) && (
|
|
<Badge variant="grayWithoutHover" startIcon={Clock} size="lg">
|
|
<span>{selectedDuration || data?.length}</span>
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<BookEventForm onCancel={onCancel} />
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|