MED-103: add booking functionality

app/home/(user)/_components/booking/booking.provider.tsx

@@ -1,14 +1,14 @@
-import React, { useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 
 import { StoreProduct } from '@medusajs/types';
 
-import { getAvailableAppointmentsForService } from '~/lib/services/connected-online.service';
+import { getAvailableTimeSlotsForDisplay } from '~/lib/services/connected-online.service';
 
 import { ServiceCategory } from '../service-categories';
-import { BookingContext } from './booking.context';
+import { BookingContext, Location, TimeSlot } from './booking.context';
 
 export function useBooking() {
-  const context = React.useContext(BookingContext);
+  const context = useContext(BookingContext);
 
   if (!context) {
     throw new Error('useBooking must be used within a BookingProvider.');
@@ -24,21 +24,54 @@ export const BookingProvider: React.FC<{
   const [selectedService, setSelectedService] = useState<StoreProduct | null>(
     category.products[0] || null,
   );
-  const [timeSlots, setTimeSlots] = useState<string[]>([]);
+  const [selectedLocationId, setSelectedLocationId] = useState<number | null>(
+    null,
+  );
+  const [selectedDate, setSelectedDate] = useState<Date>();
+  const [timeSlots, setTimeSlots] = useState<TimeSlot[] | null>(null);
+  const [locations, setLocations] = useState<Location[] | null>(null);
+  const [isLoadingTimeSlots, setIsLoadingTimeSlots] = useState<boolean>(false);
 
-  const updateTimeSlots = async (serviceId: number) => {
-    const response = await getAvailableAppointmentsForService(serviceId);
-    console.log('updateTimeSlots response', response);
-    // Fetch time slots based on the selected service ID
+  useEffect(() => {
+    let metadataServiceIds = [];
+    try {
+      metadataServiceIds = JSON.parse(
+        selectedService?.metadata?.serviceIds as string,
+      );
+    } catch (e) {
+      return;
+    }
+    if (metadataServiceIds.length) {
+      updateTimeSlots(metadataServiceIds);
+    }
+  }, [selectedService?.metadata?.serviceIds, selectedLocationId]);
+
+  const updateTimeSlots = async (serviceIds: number[]) => {
+    setIsLoadingTimeSlots(true);
+    try {
+      const response = await getAvailableTimeSlotsForDisplay(serviceIds, selectedLocationId);
+      setTimeSlots(response.timeSlots);
+      setLocations(response.locations)
+    } catch (error) {
+      setTimeSlots(null);
+    } finally {
+      setIsLoadingTimeSlots(false);
+    }
   };
 
   return (
     <BookingContext.Provider
       value={{
         timeSlots,
+        locations,
         selectedService,
+        selectedLocationId,
+        setSelectedLocationId,
+        selectedDate,
+        isLoadingTimeSlots,
         setSelectedService,
         updateTimeSlots,
+        setSelectedDate,
       }}
     >
       {children}