Fix: Connect Reservations Manager to Frontend

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>