Fix: Connect Reservations Manager to Frontend

src/pages/Checkout.tsx

@@ -13,6 +13,7 @@ import { ArrowLeft, CreditCard, Smartphone, Building, Truck, Shield, Check, X }
 import Header from '@/components/Header';
 import Footer from '@/components/Footer';
 import { useToast } from '@/hooks/use-toast';
+import { useBooking } from '@/hooks/useBooking';
 
 interface CustomerInfo {
   firstName: string;
@@ -37,6 +38,7 @@ const Checkout = () => {
   const navigate = useNavigate();
   const { items, getTotalPrice, clearCart } = useCart();
   const { toast } = useToast();
+  const { createBooking } = useBooking();
   const [step, setStep] = useState(1);
   const [isProcessing, setIsProcessing] = useState(false);
   
@@ -108,39 +110,84 @@ const Checkout = () => {
   const processPayment = async () => {
     setIsProcessing(true);
     
-    // Simulate payment processing
-    await new Promise(resolve => setTimeout(resolve, 3000));
-    
-    const orderData = {
-      id: Date.now().toString(),
-      date: new Date().toISOString(),
-      items: items,
-      customerInfo,
-      paymentInfo: {
-        method: paymentInfo.method,
-        // Don't save sensitive payment data in real implementation
-        cardLast4: paymentInfo.cardNumber.slice(-4)
-      },
-      specialRequests,
-      pricing: {
-        subtotal: totalPrice,
-        taxes,
-        serviceFee,
-        total: finalTotal
-      },
-      status: 'confirmed'
-    };
+    try {
+      // Create reservations for each cart item
+      const reservationPromises = items.map(async (item) => {
+        const checkInDate = item.selectedDate 
+          ? new Date(item.selectedDate) 
+          : new Date();
+        
+        // Add time slot if available
+        if (item.timeSlot) {
+          const [hours, minutes] = item.timeSlot.split(':');
+          checkInDate.setHours(parseInt(hours), parseInt(minutes), 0, 0);
+        }
 
-    saveOrderToJSON(orderData);
-    clearCart();
-    
-    toast({
-      title: "¡Pago procesado exitosamente!",
-      description: "Tu reserva ha sido confirmada. Recibirás un email de confirmación.",
-    });
+        const bookingData = {
+          listingId: item.id,
+          guestName: `${customerInfo.firstName} ${customerInfo.lastName}`,
+          guestEmail: customerInfo.email,
+          guestPhone: customerInfo.phone,
+          checkIn: checkInDate.toISOString(),
+          guests: item.guests || 1,
+          totalAmount: item.price * (item.guests || 1),
+          specialRequests: specialRequests,
+        };
 
-    navigate('/order-confirmation', { state: { orderData } });
-    setIsProcessing(false);
+        return await createBooking(bookingData);
+      });
+
+      const results = await Promise.all(reservationPromises);
+      
+      // Check if all reservations were created successfully
+      const allSuccess = results.every(result => result.success);
+      
+      if (!allSuccess) {
+        throw new Error('Some reservations failed to create');
+      }
+
+      // Simulate payment processing
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      
+      const orderData = {
+        id: Date.now().toString(),
+        date: new Date().toISOString(),
+        items: items,
+        customerInfo,
+        paymentInfo: {
+          method: paymentInfo.method,
+          cardLast4: paymentInfo.cardNumber.slice(-4)
+        },
+        specialRequests,
+        pricing: {
+          subtotal: totalPrice,
+          taxes,
+          serviceFee,
+          total: finalTotal
+        },
+        status: 'confirmed',
+        reservations: results.map(r => r.data)
+      };
+
+      saveOrderToJSON(orderData);
+      clearCart();
+      
+      toast({
+        title: "¡Pago procesado exitosamente!",
+        description: "Tus reservas han sido confirmadas. Recibirás un email de confirmación.",
+      });
+
+      navigate('/order-confirmation', { state: { orderData } });
+    } catch (error) {
+      console.error('Payment error:', error);
+      toast({
+        title: "Error al procesar el pago",
+        description: "Hubo un problema al procesar tu reserva. Por favor intenta nuevamente.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsProcessing(false);
+    }
   };
 
   const validateStep1 = () => {