public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

perf: Create a seperate component for dependencies of BookEventForm (#10808) 

Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
pull/10816/head^2
Alex van Andel 2023-08-17 15:12:33 +01:00 committed by GitHub
parent f45803fcfa
commit 28b94a865f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 23 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx
View File

@ -9,35 +9,42 @@ import { useBookerStore } from "../../store";
import { useEvent } from "../../utils/event";
import { BookEventForm } from "./BookEventForm";
export function BookFormAsModal({ visible, onCancel }: { visible: boolean; onCancel: () => void }) {
const BookEventFormWrapper = ({ onCancel }: { onCancel: () => void }) => {
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>
<BookEventForm onCancel={onCancel} />
</>
);
};
export const BookFormAsModal = ({ visible, onCancel }: { visible: boolean; onCancel: () => void }) => {
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">
<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>
<BookEventForm onCancel={onCancel} />
<BookEventFormWrapper onCancel={onCancel} />
</DialogContent>
</Dialog>
);
}
};