fix: sync book event form values with bookingData (#14945)

* fix: sync book event form values with bookingData

* fixup! fix: sync book event form values with bookingData

packages/features/bookings/Booker/components/hooks/useInitialFormValues.ts

@@ -34,7 +34,10 @@ export function useInitialFormValues({
   extraOptions,
   prefillFormParams,
 }: UseInitialFormValuesProps) {
-  const [initialValues, setDefaultValues] = useState<Record<string, unknown>>({});
+  const [initialValues, setDefaultValues] = useState<{
+    responses?: Partial<z.infer<ReturnType<typeof getBookingResponsesSchema>>>;
+    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<z.infer<ReturnType<typeof getBookingResponsesSchema>>>,
+        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 };
 }

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);
+      }
     };
   }, []);
 

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 && <p>Booking created: {bookingTitle}</p>}