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 = () => {

src/pages/ListingDetails.tsx

@@ -23,11 +23,16 @@ import {
   Shield,
   Coffee
 } from 'lucide-react';
+import BookingSidebar from '@/components/BookingSidebar';
+import { useCart } from '@/contexts/CartContext';
+import { useToast } from '@/hooks/use-toast';
 
 export function ListingDetails() {
   const location = useLocation();
   const navigate = useNavigate();
   const { listing } = location.state || {};
+  const { addToCart } = useCart();
+  const { toast } = useToast();
   const [isBookmarked, setIsBookmarked] = useState(false);
 
   if (!listing) {
@@ -64,6 +69,42 @@ export function ListingDetails() {
     "https://themes.easital.com/html/liston/v2.3/assets/images/listing-details/gallery/10.jpg"
   ];
 
+  // Convert listing to offer format for BookingSidebar
+  const offerForBooking = {
+    id: listing?.id || 'default-id',
+    title: listing?.title || 'Listing',
+    price: listing?.priceRange?.min || 12,
+    category: 'hotel',
+    images: listing?.image ? [listing.image] : [],
+    location: {
+      address: listing?.location || 'Unknown location',
+    },
+  };
+
+  const handleAddToCart = (date: Date | undefined, guests: number, timeSlot?: string) => {
+    const cartItem = {
+      id: offerForBooking.id,
+      title: offerForBooking.title,
+      price: offerForBooking.price,
+      image: offerForBooking.images[0],
+      category: offerForBooking.category,
+      location: offerForBooking.location.address,
+      selectedDate: date?.toISOString().split('T')[0] || '',
+      guests: guests || undefined,
+      timeSlot
+    };
+
+    addToCart(cartItem);
+    toast({
+      title: '¡Agregado al carrito!',
+      description: `${offerForBooking.title} se ha agregado a tu carrito.`,
+    });
+  };
+
+  const handleBookNow = (date: Date | undefined, guests: number, timeSlot?: string) => {
+    // This will be handled by BookingModal in BookingSidebar
+  };
+
   return (
     <div className="min-h-screen bg-background">
       <Header />
@@ -235,46 +276,11 @@ export function ListingDetails() {
 
           {/* Sidebar */}
           <div className="lg:col-span-1">
-            <Card className="sticky top-4">
-              <CardContent className="p-6">
-                <div className="text-center mb-6">
-                  <div className="text-3xl font-bold text-primary mb-2">
-                    ${listing.priceRange?.min || 12} - ${listing.priceRange?.max || 40}
-                  </div>
-                  <p className="text-muted-foreground">per night</p>
-                </div>
-                
-                <div className="space-y-4 mb-6">
-                  <Button className="w-full" size="lg">
-                    <Calendar className="h-4 w-4 mr-2" />
-                    Book Now
-                  </Button>
-                  <Button variant="outline" className="w-full" size="lg">
-                    <Phone className="h-4 w-4 mr-2" />
-                    Call Now
-                  </Button>
-                  <Button variant="outline" className="w-full" size="lg">
-                    <User className="h-4 w-4 mr-2" />
-                    Contact Owner
-                  </Button>
-                </div>
-
-                <div className="border-t pt-4 space-y-3">
-                  <div className="flex items-center justify-between text-sm">
-                    <span className="text-muted-foreground">Response rate:</span>
-                    <span className="font-medium">100%</span>
-                  </div>
-                  <div className="flex items-center justify-between text-sm">
-                    <span className="text-muted-foreground">Response time:</span>
-                    <span className="font-medium">Within an hour</span>
-                  </div>
-                  <div className="flex items-center justify-between text-sm">
-                    <span className="text-muted-foreground">Last seen:</span>
-                    <span className="font-medium">Online now</span>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
+            <BookingSidebar 
+              offer={offerForBooking} 
+              onBookNow={handleBookNow}
+              onAddToCart={handleAddToCart}
+            />
           </div>
         </div>
       </div>