add cart functionality for tto services

app/home/(user)/_components/booking/booking-container.tsx

@@ -1,22 +1,46 @@
 'use client';
 
-import { ServiceCategory } from '../service-categories';
+import { StoreProduct } from '@medusajs/types';
+
+import { Trans } from '@kit/ui/trans';
+
+import { EnrichedCartItem } from '../cart/types';
 import BookingCalendar from './booking-calendar';
 import { BookingProvider } from './booking.provider';
 import LocationSelector from './location-selector';
 import ServiceSelector from './service-selector';
 import TimeSlots from './time-slots';
 
-const BookingContainer = ({ category }: { category: ServiceCategory }) => {
+const BookingContainer = ({
+  category,
+  cartItem,
+  onComplete,
+}: {
+  category: { products: StoreProduct[]; countryCode: string };
+  cartItem?: EnrichedCartItem;
+  onComplete?: () => void;
+}) => {
+  const products = cartItem?.product ? [cartItem.product] : category.products;
+
+  if (!cartItem || !products?.length) {
+    <p>
+      <Trans i18nKey="booking:noProducts" />
+    </p>;
+  }
+
   return (
-    <BookingProvider category={category}>
+    <BookingProvider category={{ products }} service={cartItem?.product}>
       <div className="xs:flex-row flex max-h-full flex-col gap-6">
         <div className="flex flex-col">
-          <ServiceSelector products={category.products} />
+          <ServiceSelector products={products} />
           <BookingCalendar />
           <LocationSelector />
         </div>
-        <TimeSlots countryCode={category.countryCode} />
+        <TimeSlots
+          countryCode={category.countryCode}
+          cartItem={cartItem}
+          onComplete={onComplete}
+        />
       </div>
     </BookingProvider>
   );