fix: booker atom seated events reservation (#21339)

* fix: reserving first seated booking slot

* fix: input type in useReserveSlot

* fix: handleReserveSlot submit bookingUid to api

* null -> undefined

* dont touch web app

apps/api/v2/src/modules/slots/slots-2024-04-15/services/slots.service.ts

@@ -21,7 +21,9 @@ export class SlotsService_2024_04_15 {
 
     let shouldReserveSlot = true;
     if (eventType.seatsPerTimeSlot) {
-      const bookingWithAttendees = await this.slotsRepo.getBookingWithAttendees(input.bookingUid);
+      const bookingWithAttendees = input.bookingUid
+        ? await this.slotsRepo.getBookingWithAttendees(input.bookingUid)
+        : undefined;
       const bookingAttendeesLength = bookingWithAttendees?.attendees?.length;
       if (bookingAttendeesLength) {
         const seatsLeft = eventType.seatsPerTimeSlot - bookingAttendeesLength;

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

@@ -136,7 +136,8 @@ export const AvailableTimeSlots = ({
         schedule?.invalidate();
       }
       setTentativeSelectedTimeslots([]);
-      setSelectedTimeslot(time);
+      // note(Lauris): setting setSeatedEventData before setSelectedTimeslot so that in useSlots we have seated event data available
+      // and only then we invoke handleReserveSlot that is triggered by the changes in setSelectedTimeslot.
       if (seatsPerTimeSlot) {
         setSeatedEventData({
           seatsPerTimeSlot,
@@ -145,6 +146,7 @@ export const AvailableTimeSlots = ({
           showAvailableSeatsCount,
         });
       }
+      setSelectedTimeslot(time);
       const isTimeSlotAvailable = !unavailableTimeSlots.includes(time);
       if (skipConfirmStep && isTimeSlotAvailable) {
         onSubmit(time);

packages/platform/atoms/hooks/useReserveSlot.ts

@@ -5,7 +5,7 @@ import type {
   ApiResponse,
   ApiErrorResponse,
   ApiSuccessResponse,
-  ReserveSlotInput,
+  ReserveSlotInput_2024_04_15,
 } from "@calcom/platform-types";
 
 import http from "../lib/http";
@@ -24,8 +24,8 @@ export const useReserveSlot = (
     },
   }
 ) => {
-  const reserveSlot = useMutation<ApiResponse<string>, unknown, ReserveSlotInput>({
-    mutationFn: (props: ReserveSlotInput) => {
+  const reserveSlot = useMutation<ApiResponse<string>, unknown, ReserveSlotInput_2024_04_15>({
+    mutationFn: (props: ReserveSlotInput_2024_04_15) => {
       return http.post<ApiResponse<string>>("/slots/reserve", props).then((res) => {
         if (res.data.status === SUCCESS_STATUS) {
           return res.data;

packages/platform/atoms/hooks/useSlots.ts

@@ -52,6 +52,8 @@ export const useSlots = (
     onError: onReserveSlotError,
   });
 
+  const seatedEventData = useBookerStore((state) => state.seatedEventData);
+
   const removeSelectedSlot = useDeleteSelectedSlot({
     onSuccess: onDeleteSlotSuccess,
     onError: onDeleteSlotError,
@@ -78,6 +80,7 @@ export const useSlots = (
           .add(selectedDuration || event.data.length, "minutes")
           .format(),
         _isDryRun: isBookingDryRun,
+        bookingUid: seatedEventData.bookingUid || undefined,
       });
     }
   };

packages/platform/examples/base/src/pages/booking.tsx

@@ -132,9 +132,6 @@ export default function Bookings(props: { calUsername: string; calEmail: string
                 : { username: props.calUsername })}
               hostsLimit={3}
               allowUpdatingUrlParams={true}
-              handleSlotReservation={(timeslot) => {
-                console.log("Selected timeslot:", timeslot);
-              }}
             />
           </>
         )}