CAL-1591: Remember form values in new booker form when user navigates back and forth between timeslots and form (#8920)

packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx

@@ -70,11 +70,15 @@ export const BookEventForm = ({ onCancel }: BookEventFormProps) => {
   const timeslot = useBookerStore((state) => state.selectedTimeslot);
   const recurringEventCount = useBookerStore((state) => state.recurringEventCount);
   const username = useBookerStore((state) => state.username);
+  const formValues = useBookerStore((state) => state.formValues);
+  const setFormValues = useBookerStore((state) => state.setFormValues);
   const isRescheduling = !!rescheduleUid && !!rescheduleBooking;
   const event = useEvent();
   const eventType = event.data;
 
   const defaultValues = useMemo(() => {
+    if (Object.keys(formValues).length) return formValues;
+
     if (!eventType?.bookingFields) {
       return {};
     }
@@ -128,7 +132,7 @@ export const BookEventForm = ({ onCancel }: BookEventFormProps) => {
       email: defaultUserValues.email,
     };
     return defaults;
-  }, [eventType?.bookingFields, isRescheduling, rescheduleBooking, rescheduleUid]);
+  }, [eventType?.bookingFields, formValues, isRescheduling, rescheduleBooking, rescheduleUid]);
 
   const bookingFormSchema = z
     .object({
@@ -226,6 +230,8 @@ export const BookEventForm = ({ onCancel }: BookEventFormProps) => {
     );
 
   const bookEvent = (values: BookingFormValues) => {
+    // Clears form values stored in store, so old values won't stick around.
+    setFormValues({});
     bookingForm.clearErrors();
 
     // It shouldn't be possible that this method is fired without having event data,
@@ -280,7 +286,18 @@ export const BookEventForm = ({ onCancel }: BookEventFormProps) => {
 
   return (
     <div className="flex h-full flex-col">
-      <Form className="flex h-full flex-col" form={bookingForm} handleSubmit={bookEvent} noValidate>
+      <Form
+        className="flex h-full flex-col"
+        onChange={() => {
+          // Form data is saved in store. This way when user navigates back to
+          // still change the timeslot, and comes back to the form, all their values
+          // still exist. This gets cleared when the form is submitted.
+          const values = bookingForm.getValues();
+          setFormValues(values);
+        }}
+        form={bookingForm}
+        handleSubmit={bookEvent}
+        noValidate>
         <BookingFields
           isDynamicGroupBooking={!!(username && username.indexOf("+") > -1)}
           fields={eventType.bookingFields}

packages/features/bookings/Booker/store.ts

@@ -79,6 +79,13 @@ type BookerStore = {
    * Method called by booker component to set initial data.
    */
   initialize: (data: StoreInitializeType) => void;
+  /**
+   * Stored form state, used when user navigates back and
+   * forth between timeslots and form. Get's cleared on submit
+   * to prevent sticky data.
+   */
+  formValues: Record<string, any>;
+  setFormValues: (values: Record<string, any>) => void;
 };
 
 const validLayouts: BookerLayout[] = ["large_calendar", "large_timeslots", "small_calendar"];
@@ -179,6 +186,10 @@ export const useBookerStore = create<BookerStore>((set, get) => ({
     set({ selectedTimeslot });
     updateQueryParam("slot", selectedTimeslot ?? "");
   },
+  formValues: {},
+  setFormValues: (formValues: Record<string, any>) => {
+    set({ formValues });
+  },
 }));
 
 export const useInitializeBookerStore = ({