CAL-1630: Added reserving of timeslot in new booker (#8923)

Co-authored-by: alannnc <alannnc@gmail.com>

Author: JeroenReumkens

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

@@ -4,9 +4,10 @@ import dayjs from "@calcom/dayjs";
 import { AvailableTimes, AvailableTimesSkeleton } from "@calcom/features/bookings";
 import { useSlotsForMultipleDates } from "@calcom/features/schedules/lib/use-schedule/useSlotsForDate";
 import { classNames } from "@calcom/lib";
+import { trpc } from "@calcom/trpc";
 
 import { useBookerStore } from "../store";
-import { useScheduleForEvent } from "../utils/event";
+import { useEvent, useScheduleForEvent } from "../utils/event";
 
 type AvailableTimeSlotsProps = {
   extraDays?: number;
@@ -22,10 +23,27 @@ type AvailableTimeSlotsProps = {
  * in columns next to each other.
  */
 export const AvailableTimeSlots = ({ extraDays, limitHeight, seatsPerTimeslot }: AvailableTimeSlotsProps) => {
+  const reserveSlotMutation = trpc.viewer.public.slots.reserveSlot.useMutation();
   const selectedDate = useBookerStore((state) => state.selectedDate);
+  const duration = useBookerStore((state) => state.selectedDuration);
   const setSelectedTimeslot = useBookerStore((state) => state.setSelectedTimeslot);
+  const event = useEvent();
   const date = selectedDate || dayjs().format("YYYY-MM-DD");
 
+  const onTimeSelect = (time: string) => {
+    setSelectedTimeslot(time);
+
+    if (!event.data) return;
+    reserveSlotMutation.mutate({
+      slotUtcStartDate: time,
+      eventTypeId: event.data.id,
+      slotUtcEndDate: dayjs(time)
+        .utc()
+        .add(duration || event.data.length, "minutes")
+        .format(),
+    });
+  };
+
   const schedule = useScheduleForEvent({
     prefetchNextMonth: !!extraDays && dayjs(date).month() !== dayjs(date).add(extraDays, "day").month(),
   });
@@ -66,7 +84,7 @@ export const AvailableTimeSlots = ({ extraDays, limitHeight, seatsPerTimeslot }:
               className="w-full"
               key={slots.date}
               showTimeformatToggle={!isMultipleDates}
-              onTimeSelect={setSelectedTimeslot}
+              onTimeSelect={onTimeSelect}
               date={dayjs(slots.date)}
               slots={slots.slots}
               seatsPerTimeslot={seatsPerTimeslot}