cal.diy/packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx

import { Calendar, Clock } from "lucide-react";
import type { ReactNode } from "react";

import dayjs from "@calcom/dayjs";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Badge, Dialog, DialogContent } from "@calcom/ui";

import { useTimePreferences } from "../../../lib";
import { useBookerStore } from "../../store";
import { useEvent } from "../../utils/event";

const BookEventFormWrapper = ({ children }: { onCancel: () => void; children: ReactNode }) => {
  const { t } = useLocale();
  const selectedTimeslot = useBookerStore((state) => state.selectedTimeslot);
  const selectedDuration = useBookerStore((state) => state.selectedDuration);
  const { data } = useEvent();
  const parsedSelectedTimeslot = dayjs(selectedTimeslot);
  const { timeFormat, timezone } = useTimePreferences();
  return (
    <>
      <h1 className="font-cal text-emphasis text-xl leading-5">{t("confirm_your_details")} </h1>
      <div className="my-4 flex space-x-2 rounded-md leading-none">
        <Badge variant="grayWithoutHover" startIcon={Calendar} size="lg">
          <span>
            {parsedSelectedTimeslot.format("LL")} {parsedSelectedTimeslot.tz(timezone).format(timeFormat)}
          </span>
        </Badge>
        {(selectedDuration || data?.length) && (
          <Badge variant="grayWithoutHover" startIcon={Clock} size="lg">
            <span>{selectedDuration || data?.length}</span>
          </Badge>
        )}
      </div>
      {children}
    </>
  );
};

export const BookFormAsModal = ({
  visible,
  onCancel,
  children,
}: {
  visible: boolean;
  onCancel: () => void;
  children: ReactNode;
}) => {
  return (
    <Dialog open={visible} onOpenChange={onCancel}>
      <DialogContent
        type={undefined}
        enableOverflow
        className="[&_.modalsticky]:border-t-subtle [&_.modalsticky]:bg-default max-h-[80vh] pb-0 [&_.modalsticky]:sticky [&_.modalsticky]:bottom-0 [&_.modalsticky]:left-0 [&_.modalsticky]:right-0 [&_.modalsticky]:-mx-8 [&_.modalsticky]:border-t [&_.modalsticky]:px-8 [&_.modalsticky]:py-4">
        <BookEventFormWrapper onCancel={onCancel}>{children}</BookEventFormWrapper>
      </DialogContent>
    </Dialog>
  );
};