feat: Booker atom slots callbacks (#18203)

packages/platform/atoms/booker/BookerPlatformWrapper.tsx

@@ -322,7 +322,12 @@ export const BookerPlatformWrapper = (
     onError: props.onCreateInstantBookingError,
   });
 
-  const slots = useSlots(event);
+  const slots = useSlots(event, {
+    onReserveSlotSuccess: props.onReserveSlotSuccess,
+    onReserveSlotError: props.onReserveSlotError,
+    onDeleteSlotSuccess: props.onDeleteSlotSuccess,
+    onDeleteSlotError: props.onDeleteSlotError,
+  });
 
   const { data: connectedCalendars, isPending: fetchingConnectedCalendars } = useConnectedCalendars({
     enabled: hasSession,

packages/platform/atoms/hooks/useSlots.ts

@@ -6,31 +6,55 @@ import { useBookerStore } from "@calcom/features/bookings/Booker/store";
 import { useSlotReservationId } from "@calcom/features/bookings/Booker/useSlotReservationId";
 import type { BookerEvent } from "@calcom/features/bookings/types";
 import { MINUTES_TO_BOOK } from "@calcom/lib/constants";
+import type {
+  ApiErrorResponse,
+  ApiSuccessResponse,
+  ApiSuccessResponseWithoutData,
+} from "@calcom/platform-types";
 
 import { useDeleteSelectedSlot } from "./useDeleteSelectedSlot";
 import { useReserveSlot } from "./useReserveSlot";
 
+type UseSlotsCallbacks = {
+  onReserveSlotSuccess?: (data: ApiSuccessResponse<string>) => void;
+  onReserveSlotError?: (err: ApiErrorResponse) => void;
+  onDeleteSlotSuccess?: (data: ApiSuccessResponseWithoutData) => void;
+  onDeleteSlotError?: (err: ApiErrorResponse) => void;
+};
+
 export type UseSlotsReturnType = ReturnType<typeof useSlots>;
 
-export const useSlots = (event: { data?: Pick<BookerEvent, "id" | "length"> | null }) => {
+export const useSlots = (
+  event: { data?: Pick<BookerEvent, "id" | "length"> | null },
+  { onReserveSlotSuccess, onReserveSlotError, onDeleteSlotSuccess, onDeleteSlotError }: UseSlotsCallbacks = {}
+) => {
   const selectedDuration = useBookerStore((state) => state.selectedDuration);
   const [selectedTimeslot, setSelectedTimeslot] = useBookerStore(
     (state) => [state.selectedTimeslot, state.setSelectedTimeslot],
     shallow
   );
+
   const [slotReservationId, setSlotReservationId] = useSlotReservationId();
+
   const reserveSlotMutation = useReserveSlot({
     onSuccess: (res) => {
       setSlotReservationId(res.data);
+      onReserveSlotSuccess?.(res);
     },
+    onError: onReserveSlotError,
+  });
+
+  const removeSelectedSlot = useDeleteSelectedSlot({
+    onSuccess: onDeleteSlotSuccess,
+    onError: onDeleteSlotError,
   });
 
-  const removeSelectedSlot = useDeleteSelectedSlot();
   const handleRemoveSlot = () => {
     if (event?.data) {
       removeSelectedSlot.mutate({ uid: slotReservationId ?? undefined });
     }
   };
+
   const handleReserveSlot = () => {
     if (event?.data?.id && selectedTimeslot && (selectedDuration || event?.data?.length)) {
       reserveSlotMutation.mutate({