fix: re-render on booker (#12058)
parent
687669ce17
commit
a8c03262c2
|
@ -1,6 +1,5 @@
|
||||||
import { m } from "framer-motion";
|
import { m } from "framer-motion";
|
||||||
import dynamic from "next/dynamic";
|
import dynamic from "next/dynamic";
|
||||||
import { useEffect } from "react";
|
|
||||||
import { shallow } from "zustand/shallow";
|
import { shallow } from "zustand/shallow";
|
||||||
|
|
||||||
import { useEmbedUiConfig, useIsEmbed } from "@calcom/embed-core/embed-iframe";
|
import { useEmbedUiConfig, useIsEmbed } from "@calcom/embed-core/embed-iframe";
|
||||||
|
@ -38,13 +37,6 @@ export const EventMeta = () => {
|
||||||
const isEmbed = useIsEmbed();
|
const isEmbed = useIsEmbed();
|
||||||
const hideEventTypeDetails = isEmbed ? embedUiConfig.hideEventTypeDetails : false;
|
const hideEventTypeDetails = isEmbed ? embedUiConfig.hideEventTypeDetails : false;
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!selectedDuration && event?.length) {
|
|
||||||
setSelectedDuration(event.length);
|
|
||||||
}
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [event?.length, selectedDuration]);
|
|
||||||
|
|
||||||
if (hideEventTypeDetails) {
|
if (hideEventTypeDetails) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,6 +11,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||||
import { Button, SkeletonText } from "@calcom/ui";
|
import { Button, SkeletonText } from "@calcom/ui";
|
||||||
|
|
||||||
import { useBookerStore } from "../Booker/store";
|
import { useBookerStore } from "../Booker/store";
|
||||||
|
import { useEvent } from "../Booker/utils/event";
|
||||||
import { getQueryParam } from "../Booker/utils/query-param";
|
import { getQueryParam } from "../Booker/utils/query-param";
|
||||||
import { useTimePreferences } from "../lib";
|
import { useTimePreferences } from "../lib";
|
||||||
import { useCheckOverlapWithOverlay } from "../lib/useCheckOverlapWithOverlay";
|
import { useCheckOverlapWithOverlay } from "../lib/useCheckOverlapWithOverlay";
|
||||||
|
@ -51,9 +52,9 @@ const SlotItem = ({
|
||||||
const overlayCalendarToggled =
|
const overlayCalendarToggled =
|
||||||
getQueryParam("overlayCalendar") === "true" || localStorage.getItem("overlayCalendarSwitchDefault");
|
getQueryParam("overlayCalendar") === "true" || localStorage.getItem("overlayCalendarSwitchDefault");
|
||||||
const [timeFormat, timezone] = useTimePreferences((state) => [state.timeFormat, state.timezone]);
|
const [timeFormat, timezone] = useTimePreferences((state) => [state.timeFormat, state.timezone]);
|
||||||
const selectedDuration = useBookerStore((state) => state.selectedDuration);
|
|
||||||
const bookingData = useBookerStore((state) => state.bookingData);
|
const bookingData = useBookerStore((state) => state.bookingData);
|
||||||
const layout = useBookerStore((state) => state.layout);
|
const layout = useBookerStore((state) => state.layout);
|
||||||
|
const { data: event } = useEvent();
|
||||||
const hasTimeSlots = !!seatsPerTimeSlot;
|
const hasTimeSlots = !!seatsPerTimeSlot;
|
||||||
const computedDateWithUsersTimezone = dayjs.utc(slot.time).tz(timezone);
|
const computedDateWithUsersTimezone = dayjs.utc(slot.time).tz(timezone);
|
||||||
|
|
||||||
|
@ -67,11 +68,12 @@ const SlotItem = ({
|
||||||
|
|
||||||
const offset = (usersTimezoneDate.utcOffset() - nowDate.utcOffset()) / 60;
|
const offset = (usersTimezoneDate.utcOffset() - nowDate.utcOffset()) / 60;
|
||||||
|
|
||||||
const { isOverlapping, overlappingTimeEnd, overlappingTimeStart } = useCheckOverlapWithOverlay(
|
const { isOverlapping, overlappingTimeEnd, overlappingTimeStart } = useCheckOverlapWithOverlay({
|
||||||
computedDateWithUsersTimezone,
|
start: computedDateWithUsersTimezone,
|
||||||
selectedDuration,
|
selectedDuration: event?.length ?? 0,
|
||||||
offset
|
offset,
|
||||||
);
|
});
|
||||||
|
|
||||||
const [overlapConfirm, setOverlapConfirm] = useState(false);
|
const [overlapConfirm, setOverlapConfirm] = useState(false);
|
||||||
|
|
||||||
const onButtonClick = useCallback(() => {
|
const onButtonClick = useCallback(() => {
|
||||||
|
|
|
@ -9,7 +9,15 @@ function getCurrentTime(date: Date) {
|
||||||
return `${hours}:${minutes}`;
|
return `${hours}:${minutes}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function useCheckOverlapWithOverlay(start: Dayjs, selectedDuration: number | null, offset: number) {
|
export function useCheckOverlapWithOverlay({
|
||||||
|
start,
|
||||||
|
selectedDuration,
|
||||||
|
offset,
|
||||||
|
}: {
|
||||||
|
start: Dayjs;
|
||||||
|
selectedDuration: number | null;
|
||||||
|
offset: number;
|
||||||
|
}) {
|
||||||
const overlayBusyDates = useOverlayCalendarStore((state) => state.overlayBusyDates);
|
const overlayBusyDates = useOverlayCalendarStore((state) => state.overlayBusyDates);
|
||||||
|
|
||||||
let overlappingTimeStart: string | null = null;
|
let overlappingTimeStart: string | null = null;
|
||||||
|
|
Loading…
Reference in New Issue