diff --git a/.changeset/shiny-jokes-matter.md b/.changeset/shiny-jokes-matter.md new file mode 100644 index 0000000000..0b78fd6fa6 --- /dev/null +++ b/.changeset/shiny-jokes-matter.md @@ -0,0 +1,5 @@ +--- +"@calcom/atoms": patch +--- + +This PR fixes `onBookerStateChange` prop not working diff --git a/packages/platform/atoms/booker/BookerPlatformWrapper.tsx b/packages/platform/atoms/booker/BookerPlatformWrapper.tsx index a0cfeb4502..01319f1dcb 100644 --- a/packages/platform/atoms/booker/BookerPlatformWrapper.tsx +++ b/packages/platform/atoms/booker/BookerPlatformWrapper.tsx @@ -1,7 +1,7 @@ import { useQueryClient } from "@tanstack/react-query"; // eslint-disable-next-line no-restricted-imports import debounce from "lodash/debounce"; -import { useMemo, useEffect, useCallback, useState, useRef } from "react"; +import { useMemo, useEffect, useCallback, useState, useRef, useContext } from "react"; import { shallow } from "zustand/shallow"; import dayjs from "@calcom/dayjs"; @@ -10,11 +10,12 @@ import { BookerStoreProvider, useInitializeBookerStoreContext, useBookerStoreContext, + BookerStoreContext, } from "@calcom/features/bookings/Booker/BookerStoreProvider"; import { useBookerLayout } from "@calcom/features/bookings/Booker/components/hooks/useBookerLayout"; import { useBookingForm } from "@calcom/features/bookings/Booker/components/hooks/useBookingForm"; import { useLocalSet } from "@calcom/features/bookings/Booker/components/hooks/useLocalSet"; -import { useBookerStore, useInitializeBookerStore } from "@calcom/features/bookings/Booker/store"; +import { useInitializeBookerStore } from "@calcom/features/bookings/Booker/store"; import { useTimePreferences } from "@calcom/features/bookings/lib"; import { useTimesForSchedule } from "@calcom/features/schedules/lib/use-schedule/useTimesForSchedule"; import { getRoutedTeamMemberIdsFromSearchParams } from "@calcom/lib/bookings/getRoutedTeamMemberIdsFromSearchParams"; @@ -87,14 +88,12 @@ const BookerPlatformWrapperComponent = ( Boolean(localStorage?.getItem?.("overlayCalendarSwitchDefault")) ); const prevStateRef = useRef(null); - const getStateValues = useCallback( - (state: ReturnType): BookerStoreValues => { - return Object.fromEntries( - Object.entries(state).filter(([_, value]) => typeof value !== "function") - ) as BookerStoreValues; - }, - [] - ); + const bookerStoreContext = useContext(BookerStoreContext); + const getStateValues = useCallback((state: any): BookerStoreValues => { + return Object.fromEntries( + Object.entries(state).filter(([_, value]) => typeof value !== "function") + ) as BookerStoreValues; + }, []); const debouncedStateChange = useMemo(() => { return debounce( (currentStateValues: BookerStoreValues, callback: (values: BookerStoreValues) => void) => { @@ -111,15 +110,15 @@ const BookerPlatformWrapperComponent = ( }, []); useEffect(() => { - if (!onBookerStateChange) return; + if (!onBookerStateChange || !bookerStoreContext) return; - const unsubscribe = useBookerStore.subscribe((state) => { + const unsubscribe = bookerStoreContext.subscribe((state) => { const currentStateValues = getStateValues(state); debouncedStateChange(currentStateValues, onBookerStateChange); }); // Initial call with current state - const initialState = getStateValues(useBookerStore.getState()); + const initialState = getStateValues(bookerStoreContext.getState()); onBookerStateChange(initialState); prevStateRef.current = initialState; @@ -127,7 +126,7 @@ const BookerPlatformWrapperComponent = ( unsubscribe(); debouncedStateChange.cancel(); }; - }, [onBookerStateChange, getStateValues, debouncedStateChange]); + }, [onBookerStateChange, getStateValues, debouncedStateChange, bookerStoreContext]); useGetBookingForReschedule({ uid: props.rescheduleUid ?? props.bookingUid ?? "",