diff --git a/packages/features/bookings/Booker/components/hooks/useInitialFormValues.ts b/packages/features/bookings/Booker/components/hooks/useInitialFormValues.ts index eb4123010c..a4aeca2fed 100644 --- a/packages/features/bookings/Booker/components/hooks/useInitialFormValues.ts +++ b/packages/features/bookings/Booker/components/hooks/useInitialFormValues.ts @@ -34,7 +34,10 @@ export function useInitialFormValues({ extraOptions, prefillFormParams, }: UseInitialFormValuesProps) { - const [initialValues, setDefaultValues] = useState>({}); + const [initialValues, setDefaultValues] = useState<{ + responses?: Partial>>; + bookingId?: number; + }>({}); const bookingData = useBookerStore((state) => state.bookingData); const formValues = useBookerStore((state) => state.formValues); useEffect(() => { @@ -104,6 +107,7 @@ export function useInitialFormValues({ const defaults = { responses: {} as Partial>>, + bookingId: bookingData?.id, }; const responses = eventType.bookingFields.reduce((responses, field) => { @@ -126,6 +130,7 @@ export function useInitialFormValues({ formValues, isRescheduling, bookingData, + bookingData?.id, rescheduleUid, email, name, @@ -134,7 +139,8 @@ export function useInitialFormValues({ ]); // When initialValues is available(after doing async schema parsing) or session is available(so that we can prefill logged-in user email and name), we need to reset the form with the initialValues - const key = `${Object.keys(initialValues).length}_${hasSession ? 1 : 0}`; + // We also need the key to change if the bookingId changes, so that the form is reset and rerendered with the new initialValues + const key = `${Object.keys(initialValues).length}_${hasSession ? 1 : 0}_${initialValues?.bookingId ?? 0}`; return { initialValues, key }; } diff --git a/packages/platform/atoms/booker/BookerPlatformWrapper.tsx b/packages/platform/atoms/booker/BookerPlatformWrapper.tsx index 922935e1a8..71776b8a2f 100644 --- a/packages/platform/atoms/booker/BookerPlatformWrapper.tsx +++ b/packages/platform/atoms/booker/BookerPlatformWrapper.tsx @@ -1,3 +1,4 @@ +import { useQueryClient } from "@tanstack/react-query"; import { useMemo, useEffect } from "react"; import { shallow } from "zustand/shallow"; @@ -28,7 +29,10 @@ import type { UseCreateBookingInput } from "../hooks/useCreateBooking"; import { useCreateBooking } from "../hooks/useCreateBooking"; import { useCreateInstantBooking } from "../hooks/useCreateInstantBooking"; import { useCreateRecurringBooking } from "../hooks/useCreateRecurringBooking"; -import { useGetBookingForReschedule } from "../hooks/useGetBookingForReschedule"; +import { + useGetBookingForReschedule, + QUERY_KEY as BOOKING_RESCHEDULE_KEY, +} from "../hooks/useGetBookingForReschedule"; import { useHandleBookEvent } from "../hooks/useHandleBookEvent"; import { useMe } from "../hooks/useMe"; import { usePublicEvent } from "../hooks/usePublicEvent"; @@ -73,7 +77,7 @@ export const BookerPlatformWrapper = (props: BookerPlatformWrapperAtomProps) => setBookingData(data); }, }); - + const queryClient = useQueryClient(); const username = useMemo(() => { return formatUsername(props.username); }, [props.username]); @@ -88,6 +92,14 @@ export const BookerPlatformWrapper = (props: BookerPlatformWrapperAtomProps) => setOrg(null); setSelectedMonth(null); setSelectedDuration(null); + if (props.rescheduleUid) { + // clean booking data from cache + queryClient.removeQueries({ + queryKey: [BOOKING_RESCHEDULE_KEY, props.rescheduleUid], + exact: true, + }); + setBookingData(null); + } }; }, []); diff --git a/packages/platform/examples/base/src/pages/booking.tsx b/packages/platform/examples/base/src/pages/booking.tsx index 4668bdcd7f..049e8a136b 100644 --- a/packages/platform/examples/base/src/pages/booking.tsx +++ b/packages/platform/examples/base/src/pages/booking.tsx @@ -85,10 +85,6 @@ export default function Bookings(props: { calUsername: string; calEmail: string router.push(`/${data.data.uid}`); }} duration={eventTypeDuration} - entity={{ - orgSlug: "ecorp", - considerUnpublished: false, - }} /> )} {bookingTitle &&

Booking created: {bookingTitle}

}