diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx index c117d7108b6608..d261c29d817253 100644 --- a/packages/features/bookings/Booker/Booker.tsx +++ b/packages/features/bookings/Booker/Booker.tsx @@ -13,7 +13,7 @@ import TurnstileCaptcha from "@calcom/features/auth/Turnstile"; import { useBookerStoreContext } from "@calcom/features/bookings/Booker/BookerStoreProvider"; import useSkipConfirmStep from "@calcom/features/bookings/Booker/components/hooks/useSkipConfirmStep"; import { getQueryParam } from "@calcom/features/bookings/Booker/utils/query-param"; -import { useNonEmptyScheduleDays } from "@calcom/features/schedules/lib/use-schedule/useNonEmptyScheduleDays"; +import { useNonEmptyScheduleDays } from "@calcom/features/schedules/hooks/useNonEmptyScheduleDays"; import { scrollIntoViewSmooth } from "@calcom/lib/browser/browser.utils"; import { PUBLIC_INVALIDATE_AVAILABLE_SLOTS_ON_BOOKING_FORM } from "@calcom/lib/constants"; import { CLOUDFLARE_SITE_ID, CLOUDFLARE_USE_TURNSTILE_IN_BOOKER } from "@calcom/lib/constants"; diff --git a/packages/features/bookings/Booker/components/AvailableTimeSlots.tsx b/packages/features/bookings/Booker/components/AvailableTimeSlots.tsx index 2fccf7e04f7a23..945d34d21c9c0d 100644 --- a/packages/features/bookings/Booker/components/AvailableTimeSlots.tsx +++ b/packages/features/bookings/Booker/components/AvailableTimeSlots.tsx @@ -5,22 +5,22 @@ import { AvailableTimes, AvailableTimesSkeleton } from "@calcom/features/booking import { useBookerStoreContext } from "@calcom/features/bookings/Booker/BookerStoreProvider"; import type { IUseBookingLoadingStates } from "@calcom/features/bookings/Booker/components/hooks/useBookings"; import type { BookerEvent } from "@calcom/features/bookings/types"; +import { useNonEmptyScheduleDays } from "@calcom/features/schedules/hooks/useNonEmptyScheduleDays"; +import { useSlotsForAvailableDates } from "@calcom/features/schedules/hooks/useSlotsForDate"; import type { Slot } from "@calcom/features/schedules/lib/use-schedule/types"; -import { useNonEmptyScheduleDays } from "@calcom/features/schedules/lib/use-schedule/useNonEmptyScheduleDays"; -import { useSlotsForAvailableDates } from "@calcom/features/schedules/lib/use-schedule/useSlotsForDate"; import { PUBLIC_INVALIDATE_AVAILABLE_SLOTS_ON_BOOKING_FORM } from "@calcom/lib/constants"; import { localStorage } from "@calcom/lib/webstorage"; import { BookerLayouts } from "@calcom/prisma/zod-utils"; import classNames from "@calcom/ui/classNames"; import { AvailableTimesHeader } from "../../components/AvailableTimesHeader"; -import type { useScheduleForEventReturnType } from "../utils/event"; +import type { UseScheduleForEventReturnType } from "../hooks/useScheduleForEvent"; import { getQueryParam } from "../utils/query-param"; type AvailableTimeSlotsProps = { extraDays?: number; limitHeight?: boolean; - schedule?: useScheduleForEventReturnType; + schedule?: UseScheduleForEventReturnType; isLoading: boolean; seatsPerTimeSlot?: number | null; showAvailableSeatsCount?: boolean | null; diff --git a/packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx b/packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx index 2e4ae64ee19c64..6a4ba5bb3b05c5 100644 --- a/packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx +++ b/packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx @@ -10,8 +10,8 @@ import { Badge } from "@calcom/ui/components/badge"; import { DialogContent } from "@calcom/ui/components/dialog"; import { getDurationFormatted } from "../../../components/event-meta/Duration"; +import { useEvent } from "../../hooks/useEvent"; import { FromTime } from "../../utils/dates"; -import { useEvent } from "../../utils/event"; import { useBookerTime } from "../hooks/useBookerTime"; const BookEventFormWrapper = ({ children, onCancel }: { onCancel: () => void; children: ReactNode }) => { diff --git a/packages/features/bookings/Booker/components/DatePicker.tsx b/packages/features/bookings/Booker/components/DatePicker.tsx index e4025bc44a06fd..e56bc4d0f157ca 100644 --- a/packages/features/bookings/Booker/components/DatePicker.tsx +++ b/packages/features/bookings/Booker/components/DatePicker.tsx @@ -5,7 +5,7 @@ import dayjs from "@calcom/dayjs"; import { useBookerStoreContext } from "@calcom/features/bookings/Booker/BookerStoreProvider"; import type { DatePickerClassNames } from "@calcom/features/bookings/Booker/types"; import { DatePicker as DatePickerComponent } from "@calcom/features/calendars/DatePicker"; -import { useNonEmptyScheduleDays } from "@calcom/features/schedules/lib/use-schedule/useNonEmptyScheduleDays"; +import { useNonEmptyScheduleDays } from "@calcom/features/schedules/hooks/useNonEmptyScheduleDays"; import { weekdayToWeekIndex } from "@calcom/lib/dayjs"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import type { User } from "@calcom/prisma/client"; @@ -88,7 +88,7 @@ export const DatePicker = ({ const onMonthChange = (date: Dayjs) => { setMonth(date.format("YYYY-MM")); - setSelectedDate({ date: date.format("YYYY-MM-DD") }); + setSelectedDate({ date: date.format("YYYY-MM-DD"), omitUpdatingParams: true }); setDayCount(null); // Whenever the month is changed, we nullify getting X days }; diff --git a/packages/features/bookings/Booker/components/LargeCalendar.tsx b/packages/features/bookings/Booker/components/LargeCalendar.tsx index 0151d399d2fb3d..d441cf9a777345 100644 --- a/packages/features/bookings/Booker/components/LargeCalendar.tsx +++ b/packages/features/bookings/Booker/components/LargeCalendar.tsx @@ -8,7 +8,7 @@ import type { CalendarEvent } from "@calcom/features/calendars/weeklyview/types/ import type { CalendarAvailableTimeslots } from "@calcom/features/calendars/weeklyview/types/state"; import { localStorage } from "@calcom/lib/webstorage"; -import type { useScheduleForEventReturnType } from "../utils/event"; +import type { UseScheduleForEventReturnType } from "../hooks/useScheduleForEvent"; import { getQueryParam } from "../utils/query-param"; import { useOverlayCalendarStore } from "./OverlayCalendar/store"; @@ -19,7 +19,7 @@ export const LargeCalendar = ({ event, }: { extraDays: number; - schedule?: useScheduleForEventReturnType["data"]; + schedule?: UseScheduleForEventReturnType["data"]; isLoading: boolean; event: { data?: Pick | null; diff --git a/packages/features/bookings/Booker/hooks/useEvent.ts b/packages/features/bookings/Booker/hooks/useEvent.ts new file mode 100644 index 00000000000000..6b0580c0d84b4c --- /dev/null +++ b/packages/features/bookings/Booker/hooks/useEvent.ts @@ -0,0 +1,42 @@ +import { shallow } from "zustand/shallow"; + +import { useBookerStoreContext } from "@calcom/features/bookings/Booker/BookerStoreProvider"; +import { trpc } from "@calcom/trpc/react"; + +export type useEventReturnType = ReturnType; + +/** + * Wrapper hook around the trpc query that fetches + * the event currently viewed in the booker. It will get + * the current event slug and username from the booker store. + * + * Using this hook means you only need to use one hook, instead + * of combining multiple conditional hooks. + */ +export const useEvent = (props?: { fromRedirectOfNonOrgLink?: boolean; disabled?: boolean }) => { + const [username, eventSlug, isTeamEvent, org] = useBookerStoreContext( + (state) => [state.username, state.eventSlug, state.isTeamEvent, state.org], + shallow + ); + + const event = trpc.viewer.public.event.useQuery( + { + username: username ?? "", + eventSlug: eventSlug ?? "", + isTeamEvent, + org: org ?? null, + fromRedirectOfNonOrgLink: props?.fromRedirectOfNonOrgLink, + }, + { + refetchOnWindowFocus: false, + enabled: !props?.disabled && Boolean(username) && Boolean(eventSlug), + } + ); + + return { + data: event?.data, + isSuccess: event?.isSuccess, + isError: event?.isError, + isPending: event?.isPending, + }; +}; diff --git a/packages/features/bookings/Booker/utils/event.ts b/packages/features/bookings/Booker/hooks/useScheduleForEvent.ts similarity index 58% rename from packages/features/bookings/Booker/utils/event.ts rename to packages/features/bookings/Booker/hooks/useScheduleForEvent.ts index a289b1c04e7580..be48bfd210da9f 100644 --- a/packages/features/bookings/Booker/utils/event.ts +++ b/packages/features/bookings/Booker/hooks/useScheduleForEvent.ts @@ -1,50 +1,12 @@ import { shallow } from "zustand/shallow"; import { useBookerStoreContext } from "@calcom/features/bookings/Booker/BookerStoreProvider"; -import { useSchedule } from "@calcom/features/schedules/lib/use-schedule/useSchedule"; +import { useSchedule } from "@calcom/features/schedules/hooks/useSchedule"; import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams"; -import { trpc } from "@calcom/trpc/react"; import { useBookerTime } from "../components/hooks/useBookerTime"; -export type useEventReturnType = ReturnType; -export type useScheduleForEventReturnType = ReturnType; - -/** - * Wrapper hook around the trpc query that fetches - * the event currently viewed in the booker. It will get - * the current event slug and username from the booker store. - * - * Using this hook means you only need to use one hook, instead - * of combining multiple conditional hooks. - */ -export const useEvent = (props?: { fromRedirectOfNonOrgLink?: boolean; disabled?: boolean }) => { - const [username, eventSlug, isTeamEvent, org] = useBookerStoreContext( - (state) => [state.username, state.eventSlug, state.isTeamEvent, state.org], - shallow - ); - - const event = trpc.viewer.public.event.useQuery( - { - username: username ?? "", - eventSlug: eventSlug ?? "", - isTeamEvent, - org: org ?? null, - fromRedirectOfNonOrgLink: props?.fromRedirectOfNonOrgLink, - }, - { - refetchOnWindowFocus: false, - enabled: !props?.disabled && Boolean(username) && Boolean(eventSlug), - } - ); - - return { - data: event?.data, - isSuccess: event?.isSuccess, - isError: event?.isError, - isPending: event?.isPending, - }; -}; +export type UseScheduleForEventReturnType = ReturnType; /** * Gets schedule for the current event and current month. @@ -54,12 +16,8 @@ export const useEvent = (props?: { fromRedirectOfNonOrgLink?: boolean; disabled? * Using this hook means you only need to use one hook, instead * of combining multiple conditional hooks. * - * The prefetchNextMonth argument can be used to prefetch two months at once, - * useful when the user is viewing dates near the end of the month, - * this way the multi day view will show data of both months. */ export const useScheduleForEvent = ({ - prefetchNextMonth, username, eventSlug, eventId, @@ -73,7 +31,6 @@ export const useScheduleForEvent = ({ isTeamEvent, useApiV2 = true, }: { - prefetchNextMonth?: boolean; username?: string | null; eventSlug?: string | null; eventId?: number | null; @@ -103,7 +60,6 @@ export const useScheduleForEvent = ({ eventId, timezone, selectedDate, - prefetchNextMonth, monthCount, dayCount, rescheduleUid, diff --git a/packages/features/bookings/Booker/types.ts b/packages/features/bookings/Booker/types.ts index 02fc4343626197..28e5ee69ff2a03 100644 --- a/packages/features/bookings/Booker/types.ts +++ b/packages/features/bookings/Booker/types.ts @@ -7,12 +7,12 @@ import type { UseCalendarsReturnType } from "@calcom/features/bookings/Booker/co import type { UseSlotsReturnType } from "@calcom/features/bookings/Booker/components/hooks/useSlots"; import type { UseVerifyCodeReturnType } from "@calcom/features/bookings/Booker/components/hooks/useVerifyCode"; import type { UseVerifyEmailReturnType } from "@calcom/features/bookings/Booker/components/hooks/useVerifyEmail"; -import type { useScheduleForEventReturnType } from "@calcom/features/bookings/Booker/utils/event"; import type { BookerEventQuery } from "@calcom/features/bookings/types"; import type { IntlSupportedTimeZones } from "@calcom/lib/timeZones"; import type { BookerLayouts } from "@calcom/prisma/zod-utils"; import type { GetBookingType } from "../lib/get-booking"; +import type { UseScheduleForEventReturnType } from "./hooks/useScheduleForEvent"; export type Timezone = (typeof IntlSupportedTimeZones)[number]; @@ -127,7 +127,7 @@ export type WrappedBookerPropsMain = { calendars: UseCalendarsReturnType; bookerForm: UseBookingFormReturnType; event: BookerEventQuery; - schedule: useScheduleForEventReturnType; + schedule: UseScheduleForEventReturnType; bookerLayout: UseBookerLayoutType; verifyEmail: UseVerifyEmailReturnType; customClassNames?: CustomClassNames; diff --git a/packages/features/calendars/DatePicker.tsx b/packages/features/calendars/DatePicker.tsx index 4936c2c2f5a0fe..93c494ef20828a 100644 --- a/packages/features/calendars/DatePicker.tsx +++ b/packages/features/calendars/DatePicker.tsx @@ -70,8 +70,6 @@ const Day = ({ away, emoji, customClassName, - showMonthTooltip, - isFirstDayOfNextMonth, ...props }: JSX.IntrinsicElements["button"] & { active: boolean; @@ -82,12 +80,11 @@ const Day = ({ dayContainer?: string; dayActive?: string; }; - showMonthTooltip?: boolean; - isFirstDayOfNextMonth?: boolean; }) => { const { t } = useLocale(); const enabledDateButtonEmbedStyles = useEmbedStyles("enabledDateButton"); const disabledDateButtonEmbedStyles = useEmbedStyles("disabledDateButton"); + const [month] = useBookerStoreContext((state) => [state.month], shallow); const buttonContent = (