cal.pub0.org/packages/features/bookings/Booker/components/Header.tsx

145 lines
5.1 KiB
TypeScript
Raw Normal View History

import { ChevronLeft, ChevronRight } from "lucide-react";
feat: event settings booker layout toggle (#9082) * WIP for adding booker layout toggle in event settings pages * Prevent form error from getting form stuck in loading state * Fixed types for bookerlayouts settings and preselect correct layout in booker * Added defaultlayout settings to profile too, and use that in booker plus as default for events. * Made layout settings responsive * Added feature toggle for new layout settings * Fixed user builder for tests by adding defaultlyotu * Show toggles on booker for layout switch based on selected layouts. Also added a small fix for the settings toggles to preselect the correct toggle for defaultlayout when user profile settings are used. * Used zod parse to fix type errors. * Fix unit test * Set selected date to today in datepicker when week or column view is default layout. It uses that date to show in the title bar. * Moved booker layout settings to event and user meta data instead of new db column. * Converted booker layout strings into an enum. * Renamed booker layouts feature flag and deleted unused v2 booker feature flag. * Update packages/trpc/server/routers/viewer/eventTypes/update.handler.ts Co-authored-by: Omar López <zomars@me.com> * Fix import * Fix lint warnings in EventTypeSingleLayout * Fixed bug where when selected date was passed via query param page booking form wouldn't automatically show up. It would still serve you the date selection. This should fix e2e tests. * Fixed layout header. * Enabled booking layout toggle feature flag. --------- Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: Alex van Andel <me@alexvanandel.com>
2023-06-06 15:31:43 +00:00
import { useCallback, useMemo } from "react";
import { shallow } from "zustand/shallow";
import dayjs from "@calcom/dayjs";
import { useLocale } from "@calcom/lib/hooks/useLocale";
feat: event settings booker layout toggle (#9082) * WIP for adding booker layout toggle in event settings pages * Prevent form error from getting form stuck in loading state * Fixed types for bookerlayouts settings and preselect correct layout in booker * Added defaultlayout settings to profile too, and use that in booker plus as default for events. * Made layout settings responsive * Added feature toggle for new layout settings * Fixed user builder for tests by adding defaultlyotu * Show toggles on booker for layout switch based on selected layouts. Also added a small fix for the settings toggles to preselect the correct toggle for defaultlayout when user profile settings are used. * Used zod parse to fix type errors. * Fix unit test * Set selected date to today in datepicker when week or column view is default layout. It uses that date to show in the title bar. * Moved booker layout settings to event and user meta data instead of new db column. * Converted booker layout strings into an enum. * Renamed booker layouts feature flag and deleted unused v2 booker feature flag. * Update packages/trpc/server/routers/viewer/eventTypes/update.handler.ts Co-authored-by: Omar López <zomars@me.com> * Fix import * Fix lint warnings in EventTypeSingleLayout * Fixed bug where when selected date was passed via query param page booking form wouldn't automatically show up. It would still serve you the date selection. This should fix e2e tests. * Fixed layout header. * Enabled booking layout toggle feature flag. --------- Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: Alex van Andel <me@alexvanandel.com>
2023-06-06 15:31:43 +00:00
import { BookerLayouts } from "@calcom/prisma/zod-utils";
import { Button, ButtonGroup, ToggleGroup } from "@calcom/ui";
import { Calendar, Columns, Grid } from "@calcom/ui/components/icon";
import { TimeFormatToggle } from "../../components/TimeFormatToggle";
import { useBookerStore } from "../store";
import type { BookerLayout } from "../types";
feat: event settings booker layout toggle (#9082) * WIP for adding booker layout toggle in event settings pages * Prevent form error from getting form stuck in loading state * Fixed types for bookerlayouts settings and preselect correct layout in booker * Added defaultlayout settings to profile too, and use that in booker plus as default for events. * Made layout settings responsive * Added feature toggle for new layout settings * Fixed user builder for tests by adding defaultlyotu * Show toggles on booker for layout switch based on selected layouts. Also added a small fix for the settings toggles to preselect the correct toggle for defaultlayout when user profile settings are used. * Used zod parse to fix type errors. * Fix unit test * Set selected date to today in datepicker when week or column view is default layout. It uses that date to show in the title bar. * Moved booker layout settings to event and user meta data instead of new db column. * Converted booker layout strings into an enum. * Renamed booker layouts feature flag and deleted unused v2 booker feature flag. * Update packages/trpc/server/routers/viewer/eventTypes/update.handler.ts Co-authored-by: Omar López <zomars@me.com> * Fix import * Fix lint warnings in EventTypeSingleLayout * Fixed bug where when selected date was passed via query param page booking form wouldn't automatically show up. It would still serve you the date selection. This should fix e2e tests. * Fixed layout header. * Enabled booking layout toggle feature flag. --------- Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: Alex van Andel <me@alexvanandel.com>
2023-06-06 15:31:43 +00:00
export function Header({
extraDays,
isMobile,
enabledLayouts,
}: {
extraDays: number;
isMobile: boolean;
enabledLayouts: BookerLayouts[];
}) {
const { t } = useLocale();
const [layout, setLayout] = useBookerStore((state) => [state.layout, state.setLayout], shallow);
const selectedDateString = useBookerStore((state) => state.selectedDate);
const setSelectedDate = useBookerStore((state) => state.setSelectedDate);
const addToSelectedDate = useBookerStore((state) => state.addToSelectedDate);
feat: event settings booker layout toggle (#9082) * WIP for adding booker layout toggle in event settings pages * Prevent form error from getting form stuck in loading state * Fixed types for bookerlayouts settings and preselect correct layout in booker * Added defaultlayout settings to profile too, and use that in booker plus as default for events. * Made layout settings responsive * Added feature toggle for new layout settings * Fixed user builder for tests by adding defaultlyotu * Show toggles on booker for layout switch based on selected layouts. Also added a small fix for the settings toggles to preselect the correct toggle for defaultlayout when user profile settings are used. * Used zod parse to fix type errors. * Fix unit test * Set selected date to today in datepicker when week or column view is default layout. It uses that date to show in the title bar. * Moved booker layout settings to event and user meta data instead of new db column. * Converted booker layout strings into an enum. * Renamed booker layouts feature flag and deleted unused v2 booker feature flag. * Update packages/trpc/server/routers/viewer/eventTypes/update.handler.ts Co-authored-by: Omar López <zomars@me.com> * Fix import * Fix lint warnings in EventTypeSingleLayout * Fixed bug where when selected date was passed via query param page booking form wouldn't automatically show up. It would still serve you the date selection. This should fix e2e tests. * Fixed layout header. * Enabled booking layout toggle feature flag. --------- Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: Alex van Andel <me@alexvanandel.com>
2023-06-06 15:31:43 +00:00
const isMonthView = layout === BookerLayouts.MONTH_VIEW;
const selectedDate = dayjs(selectedDateString);
const isEmbed = typeof window !== "undefined" && window?.isEmbed?.();
const today = dayjs();
const selectedDateMin3DaysDifference = useMemo(() => {
const diff = today.diff(selectedDate, "days");
return diff > 3 || diff < -3;
}, [today, selectedDate]);
const onLayoutToggle = useCallback(
(newLayout: string) => {
if (layout === newLayout || !newLayout) return;
setLayout(newLayout as BookerLayout);
},
[setLayout, layout]
);
if (isMobile || isEmbed || !enabledLayouts) return null;
feat: event settings booker layout toggle (#9082) * WIP for adding booker layout toggle in event settings pages * Prevent form error from getting form stuck in loading state * Fixed types for bookerlayouts settings and preselect correct layout in booker * Added defaultlayout settings to profile too, and use that in booker plus as default for events. * Made layout settings responsive * Added feature toggle for new layout settings * Fixed user builder for tests by adding defaultlyotu * Show toggles on booker for layout switch based on selected layouts. Also added a small fix for the settings toggles to preselect the correct toggle for defaultlayout when user profile settings are used. * Used zod parse to fix type errors. * Fix unit test * Set selected date to today in datepicker when week or column view is default layout. It uses that date to show in the title bar. * Moved booker layout settings to event and user meta data instead of new db column. * Converted booker layout strings into an enum. * Renamed booker layouts feature flag and deleted unused v2 booker feature flag. * Update packages/trpc/server/routers/viewer/eventTypes/update.handler.ts Co-authored-by: Omar López <zomars@me.com> * Fix import * Fix lint warnings in EventTypeSingleLayout * Fixed bug where when selected date was passed via query param page booking form wouldn't automatically show up. It would still serve you the date selection. This should fix e2e tests. * Fixed layout header. * Enabled booking layout toggle feature flag. --------- Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: Alex van Andel <me@alexvanandel.com>
2023-06-06 15:31:43 +00:00
// Only reason we create this component, is because it is used 3 times in this component,
// and this way we can't forget to update one of the props in all places :)
const LayoutToggleWithData = () => {
return enabledLayouts.length <= 1 ? null : (
<LayoutToggle onLayoutToggle={onLayoutToggle} layout={layout} enabledLayouts={enabledLayouts} />
);
};
// In month view we only show the layout toggle.
feat: event settings booker layout toggle (#9082) * WIP for adding booker layout toggle in event settings pages * Prevent form error from getting form stuck in loading state * Fixed types for bookerlayouts settings and preselect correct layout in booker * Added defaultlayout settings to profile too, and use that in booker plus as default for events. * Made layout settings responsive * Added feature toggle for new layout settings * Fixed user builder for tests by adding defaultlyotu * Show toggles on booker for layout switch based on selected layouts. Also added a small fix for the settings toggles to preselect the correct toggle for defaultlayout when user profile settings are used. * Used zod parse to fix type errors. * Fix unit test * Set selected date to today in datepicker when week or column view is default layout. It uses that date to show in the title bar. * Moved booker layout settings to event and user meta data instead of new db column. * Converted booker layout strings into an enum. * Renamed booker layouts feature flag and deleted unused v2 booker feature flag. * Update packages/trpc/server/routers/viewer/eventTypes/update.handler.ts Co-authored-by: Omar López <zomars@me.com> * Fix import * Fix lint warnings in EventTypeSingleLayout * Fixed bug where when selected date was passed via query param page booking form wouldn't automatically show up. It would still serve you the date selection. This should fix e2e tests. * Fixed layout header. * Enabled booking layout toggle feature flag. --------- Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: Alex van Andel <me@alexvanandel.com>
2023-06-06 15:31:43 +00:00
if (isMonthView) {
return <LayoutToggleWithData />;
}
return (
2023-06-25 15:04:25 +00:00
<div className="border-default relative z-10 flex border-b border-l px-5 py-4">
<div className="flex items-center gap-3">
<h3 className="min-w-[150px] text-base font-semibold leading-4">
{selectedDate.format("MMM D")}-{selectedDate.add(extraDays, "days").format("D")},{" "}
<span className="text-subtle">{selectedDate.format("YYYY")}</span>
</h3>
<ButtonGroup>
<Button
variant="icon"
color="minimal"
StartIcon={ChevronLeft}
aria-label="Previous Day"
onClick={() => addToSelectedDate(-extraDays - 1)}
/>
<Button
variant="icon"
color="minimal"
StartIcon={ChevronRight}
aria-label="Next Day"
onClick={() => addToSelectedDate(extraDays + 1)}
/>
{selectedDateMin3DaysDifference && (
<Button
className="capitalize"
color="secondary"
onClick={() => setSelectedDate(today.format("YYYY-MM-DD"))}>
{t("today")}
</Button>
)}
</ButtonGroup>
</div>
<div className="ml-auto flex gap-2">
<TimeFormatToggle />
<div className="fixed right-4 top-4">
<LayoutToggleWithData />
</div>
{/*
This second layout toggle is hidden, but needed to reserve the correct spot in the DIV
for the fixed toggle above to fit into. If we wouldn't make it fixed in this view, the transition
would be really weird, because the element is positioned fixed in the month view, and then
when switching layouts wouldn't anymmore, causing it to animate from the center to the top right,
while it actuall already was on place. That's why we have this element twice.
*/}
<div className="pointer-events-none opacity-0" aria-hidden>
<LayoutToggleWithData />
</div>
</div>
</div>
);
}
const LayoutToggle = ({
onLayoutToggle,
layout,
feat: event settings booker layout toggle (#9082) * WIP for adding booker layout toggle in event settings pages * Prevent form error from getting form stuck in loading state * Fixed types for bookerlayouts settings and preselect correct layout in booker * Added defaultlayout settings to profile too, and use that in booker plus as default for events. * Made layout settings responsive * Added feature toggle for new layout settings * Fixed user builder for tests by adding defaultlyotu * Show toggles on booker for layout switch based on selected layouts. Also added a small fix for the settings toggles to preselect the correct toggle for defaultlayout when user profile settings are used. * Used zod parse to fix type errors. * Fix unit test * Set selected date to today in datepicker when week or column view is default layout. It uses that date to show in the title bar. * Moved booker layout settings to event and user meta data instead of new db column. * Converted booker layout strings into an enum. * Renamed booker layouts feature flag and deleted unused v2 booker feature flag. * Update packages/trpc/server/routers/viewer/eventTypes/update.handler.ts Co-authored-by: Omar López <zomars@me.com> * Fix import * Fix lint warnings in EventTypeSingleLayout * Fixed bug where when selected date was passed via query param page booking form wouldn't automatically show up. It would still serve you the date selection. This should fix e2e tests. * Fixed layout header. * Enabled booking layout toggle feature flag. --------- Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: Alex van Andel <me@alexvanandel.com>
2023-06-06 15:31:43 +00:00
enabledLayouts,
}: {
onLayoutToggle: (layout: string) => void;
layout: string;
feat: event settings booker layout toggle (#9082) * WIP for adding booker layout toggle in event settings pages * Prevent form error from getting form stuck in loading state * Fixed types for bookerlayouts settings and preselect correct layout in booker * Added defaultlayout settings to profile too, and use that in booker plus as default for events. * Made layout settings responsive * Added feature toggle for new layout settings * Fixed user builder for tests by adding defaultlyotu * Show toggles on booker for layout switch based on selected layouts. Also added a small fix for the settings toggles to preselect the correct toggle for defaultlayout when user profile settings are used. * Used zod parse to fix type errors. * Fix unit test * Set selected date to today in datepicker when week or column view is default layout. It uses that date to show in the title bar. * Moved booker layout settings to event and user meta data instead of new db column. * Converted booker layout strings into an enum. * Renamed booker layouts feature flag and deleted unused v2 booker feature flag. * Update packages/trpc/server/routers/viewer/eventTypes/update.handler.ts Co-authored-by: Omar López <zomars@me.com> * Fix import * Fix lint warnings in EventTypeSingleLayout * Fixed bug where when selected date was passed via query param page booking form wouldn't automatically show up. It would still serve you the date selection. This should fix e2e tests. * Fixed layout header. * Enabled booking layout toggle feature flag. --------- Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: Alex van Andel <me@alexvanandel.com>
2023-06-06 15:31:43 +00:00
enabledLayouts?: BookerLayouts[];
}) => {
const { t } = useLocale();
feat: event settings booker layout toggle (#9082) * WIP for adding booker layout toggle in event settings pages * Prevent form error from getting form stuck in loading state * Fixed types for bookerlayouts settings and preselect correct layout in booker * Added defaultlayout settings to profile too, and use that in booker plus as default for events. * Made layout settings responsive * Added feature toggle for new layout settings * Fixed user builder for tests by adding defaultlyotu * Show toggles on booker for layout switch based on selected layouts. Also added a small fix for the settings toggles to preselect the correct toggle for defaultlayout when user profile settings are used. * Used zod parse to fix type errors. * Fix unit test * Set selected date to today in datepicker when week or column view is default layout. It uses that date to show in the title bar. * Moved booker layout settings to event and user meta data instead of new db column. * Converted booker layout strings into an enum. * Renamed booker layouts feature flag and deleted unused v2 booker feature flag. * Update packages/trpc/server/routers/viewer/eventTypes/update.handler.ts Co-authored-by: Omar López <zomars@me.com> * Fix import * Fix lint warnings in EventTypeSingleLayout * Fixed bug where when selected date was passed via query param page booking form wouldn't automatically show up. It would still serve you the date selection. This should fix e2e tests. * Fixed layout header. * Enabled booking layout toggle feature flag. --------- Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: Alex van Andel <me@alexvanandel.com>
2023-06-06 15:31:43 +00:00
const layoutOptions = useMemo(() => {
return [
{
value: BookerLayouts.MONTH_VIEW,
label: <Calendar width="16" height="16" />,
tooltip: t("switch_monthly"),
},
{
value: BookerLayouts.WEEK_VIEW,
label: <Grid width="16" height="16" />,
tooltip: t("switch_weekly"),
},
{
value: BookerLayouts.COLUMN_VIEW,
label: <Columns width="16" height="16" />,
tooltip: t("switch_columnview"),
feat: event settings booker layout toggle (#9082) * WIP for adding booker layout toggle in event settings pages * Prevent form error from getting form stuck in loading state * Fixed types for bookerlayouts settings and preselect correct layout in booker * Added defaultlayout settings to profile too, and use that in booker plus as default for events. * Made layout settings responsive * Added feature toggle for new layout settings * Fixed user builder for tests by adding defaultlyotu * Show toggles on booker for layout switch based on selected layouts. Also added a small fix for the settings toggles to preselect the correct toggle for defaultlayout when user profile settings are used. * Used zod parse to fix type errors. * Fix unit test * Set selected date to today in datepicker when week or column view is default layout. It uses that date to show in the title bar. * Moved booker layout settings to event and user meta data instead of new db column. * Converted booker layout strings into an enum. * Renamed booker layouts feature flag and deleted unused v2 booker feature flag. * Update packages/trpc/server/routers/viewer/eventTypes/update.handler.ts Co-authored-by: Omar López <zomars@me.com> * Fix import * Fix lint warnings in EventTypeSingleLayout * Fixed bug where when selected date was passed via query param page booking form wouldn't automatically show up. It would still serve you the date selection. This should fix e2e tests. * Fixed layout header. * Enabled booking layout toggle feature flag. --------- Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: Alex van Andel <me@alexvanandel.com>
2023-06-06 15:31:43 +00:00
},
].filter((layout) => enabledLayouts?.includes(layout.value as BookerLayouts));
}, [t, enabledLayouts]);
feat: event settings booker layout toggle (#9082) * WIP for adding booker layout toggle in event settings pages * Prevent form error from getting form stuck in loading state * Fixed types for bookerlayouts settings and preselect correct layout in booker * Added defaultlayout settings to profile too, and use that in booker plus as default for events. * Made layout settings responsive * Added feature toggle for new layout settings * Fixed user builder for tests by adding defaultlyotu * Show toggles on booker for layout switch based on selected layouts. Also added a small fix for the settings toggles to preselect the correct toggle for defaultlayout when user profile settings are used. * Used zod parse to fix type errors. * Fix unit test * Set selected date to today in datepicker when week or column view is default layout. It uses that date to show in the title bar. * Moved booker layout settings to event and user meta data instead of new db column. * Converted booker layout strings into an enum. * Renamed booker layouts feature flag and deleted unused v2 booker feature flag. * Update packages/trpc/server/routers/viewer/eventTypes/update.handler.ts Co-authored-by: Omar López <zomars@me.com> * Fix import * Fix lint warnings in EventTypeSingleLayout * Fixed bug where when selected date was passed via query param page booking form wouldn't automatically show up. It would still serve you the date selection. This should fix e2e tests. * Fixed layout header. * Enabled booking layout toggle feature flag. --------- Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: Alex van Andel <me@alexvanandel.com>
2023-06-06 15:31:43 +00:00
return <ToggleGroup onValueChange={onLayoutToggle} defaultValue={layout} options={layoutOptions} />;
};