Fix: Connect Reservations Manager to Frontend

src/components/BookingModal.tsx

@@ -0,0 +1,197 @@
+import React, { useState } from 'react';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Loader2 } from 'lucide-react';
+import { useAuth } from '@/contexts/AuthContext';
+import { useBooking } from '@/hooks/useBooking';
+import { useToast } from '@/hooks/use-toast';
+
+interface BookingModalProps {
+  open: boolean;
+  onClose: () => void;
+  listingId: string;
+  listingTitle: string;
+  listingPrice: number;
+  selectedDate?: Date;
+  selectedTimeSlot?: string;
+  guests: number;
+  onSuccess?: () => void;
+}
+
+export const BookingModal: React.FC<BookingModalProps> = ({
+  open,
+  onClose,
+  listingId,
+  listingTitle,
+  listingPrice,
+  selectedDate,
+  selectedTimeSlot,
+  guests,
+  onSuccess
+}) => {
+  const { user } = useAuth();
+  const { createBooking, loading } = useBooking();
+  const { toast } = useToast();
+  
+  const [formData, setFormData] = useState({
+    guestName: (user as any)?.name || '',
+    guestEmail: (user as any)?.email || '',
+    guestPhone: '',
+    specialRequests: '',
+  });
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!selectedDate) {
+      toast({
+        title: 'Error',
+        description: 'Por favor selecciona una fecha',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    const checkInDate = new Date(selectedDate);
+    if (selectedTimeSlot) {
+      const [hours, minutes] = selectedTimeSlot.split(':');
+      checkInDate.setHours(parseInt(hours), parseInt(minutes), 0, 0);
+    }
+
+    const bookingData = {
+      listingId,
+      guestName: formData.guestName,
+      guestEmail: formData.guestEmail,
+      guestPhone: formData.guestPhone,
+      checkIn: checkInDate.toISOString(),
+      guests,
+      totalAmount: listingPrice * guests,
+      specialRequests: formData.specialRequests,
+    };
+
+    const result = await createBooking(bookingData);
+
+    if (result.success) {
+      toast({
+        title: '¡Reserva creada!',
+        description: 'Tu reserva ha sido creada exitosamente. Te enviaremos un correo de confirmación.',
+      });
+      onClose();
+      if (onSuccess) onSuccess();
+    } else {
+      toast({
+        title: 'Error',
+        description: result.error || 'No se pudo crear la reserva',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleChange = (field: string, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>Confirmar Reserva</DialogTitle>
+          <DialogDescription>
+            Completa tus datos para confirmar la reserva de {listingTitle}
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {/* Booking Summary */}
+          <div className="bg-muted p-4 rounded-lg space-y-2">
+            <div className="flex justify-between text-sm">
+              <span className="text-muted-foreground">Propiedad:</span>
+              <span className="font-medium">{listingTitle}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-muted-foreground">Fecha:</span>
+              <span className="font-medium">
+                {selectedDate?.toLocaleDateString('es-ES', { 
+                  year: 'numeric', 
+                  month: 'long', 
+                  day: 'numeric' 
+                })}
+                {selectedTimeSlot && ` - ${selectedTimeSlot}`}
+              </span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-muted-foreground">Huéspedes:</span>
+              <span className="font-medium">{guests} {guests === 1 ? 'persona' : 'personas'}</span>
+            </div>
+            <div className="flex justify-between text-sm pt-2 border-t">
+              <span className="text-muted-foreground">Total:</span>
+              <span className="font-bold text-lg">${(listingPrice * guests).toLocaleString()}</span>
+            </div>
+          </div>
+
+          {/* Guest Information */}
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="guestName">Nombre completo *</Label>
+              <Input
+                id="guestName"
+                value={formData.guestName}
+                onChange={(e) => handleChange('guestName', e.target.value)}
+                required
+                placeholder="Tu nombre completo"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="guestEmail">Email *</Label>
+              <Input
+                id="guestEmail"
+                type="email"
+                value={formData.guestEmail}
+                onChange={(e) => handleChange('guestEmail', e.target.value)}
+                required
+                placeholder="tu@email.com"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="guestPhone">Teléfono *</Label>
+              <Input
+                id="guestPhone"
+                type="tel"
+                value={formData.guestPhone}
+                onChange={(e) => handleChange('guestPhone', e.target.value)}
+                required
+                placeholder="+1 234 567 890"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="specialRequests">Solicitudes especiales (opcional)</Label>
+              <Textarea
+                id="specialRequests"
+                value={formData.specialRequests}
+                onChange={(e) => handleChange('specialRequests', e.target.value)}
+                rows={3}
+                placeholder="¿Alguna solicitud especial?"
+              />
+            </div>
+          </div>
+
+          <DialogFooter className="gap-2">
+            <Button type="button" variant="outline" onClick={onClose} disabled={loading}>
+              Cancelar
+            </Button>
+            <Button type="submit" disabled={loading}>
+              {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              Confirmar Reserva
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};

src/components/BookingSidebar.tsx

@@ -11,6 +11,10 @@ import { useIsMobile } from '@/hooks/use-mobile';
 import { cn } from '@/lib/utils';
 import { format } from 'date-fns';
 import { es } from 'date-fns/locale';
+import { BookingModal } from '@/components/BookingModal';
+import { useAuth } from '@/contexts/AuthContext';
+import { useNavigate } from 'react-router-dom';
+import { useToast } from '@/hooks/use-toast';
 
 interface Listing {
   id: string;
@@ -40,7 +44,11 @@ const BookingSidebar: React.FC<BookingSidebarProps> = ({ offer, onBookNow, onAdd
   const [selectedTimeSlot, setSelectedTimeSlot] = useState<string>('');
   const [guests, setGuests] = useState(1);
   const [isOpen, setIsOpen] = useState(false);
+  const [showBookingModal, setShowBookingModal] = useState(false);
   const isMobile = useIsMobile();
+  const { isAuthenticated } = useAuth();
+  const navigate = useNavigate();
+  const { toast } = useToast();
 
   // Mock available dates - in real app this would come from API
   const availableDates: AvailableDate[] = [
@@ -73,15 +81,46 @@ const BookingSidebar: React.FC<BookingSidebarProps> = ({ offer, onBookNow, onAdd
   };
 
   const handleBookNow = () => {
-    onBookNow(selectedDate, guests, selectedTimeSlot);
+    if (!isAuthenticated) {
-    if (isMobile) setIsOpen(false);
+      toast({
+        title: 'Inicia sesión',
+        description: 'Debes iniciar sesión para hacer una reserva',
+        variant: 'destructive',
+      });
+      navigate('/sign-in');
+      return;
+    }
+
+    if (!selectedDate) {
+      toast({
+        title: 'Selecciona una fecha',
+        description: 'Por favor selecciona una fecha para continuar',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    setShowBookingModal(true);
   };
 
   const handleAddToCart = () => {
+    if (!selectedDate) {
+      toast({
+        title: 'Selecciona una fecha',
+        description: 'Por favor selecciona una fecha para agregar al carrito',
+        variant: 'destructive',
+      });
+      return;
+    }
     onAddToCart(selectedDate, guests, selectedTimeSlot);
     if (isMobile) setIsOpen(false);
   };
 
+  const handleBookingSuccess = () => {
+    // Navigate to bookings page or show confirmation
+    navigate('/dashboard/bookings');
+  };
+
   const isFormValid = selectedDate && (offer.category === 'tour' ? selectedTimeSlot : true);
 
   const BookingForm = () => (
@@ -298,15 +337,41 @@ const BookingSidebar: React.FC<BookingSidebarProps> = ({ offer, onBookNow, onAdd
             </div>
           </div>
         )}
+
+        <BookingModal
+          open={showBookingModal}
+          onClose={() => setShowBookingModal(false)}
+          listingId={offer.id}
+          listingTitle={offer.title}
+          listingPrice={offer.price}
+          selectedDate={selectedDate}
+          selectedTimeSlot={selectedTimeSlot}
+          guests={guests}
+          onSuccess={handleBookingSuccess}
+        />
       </>
     );
   }
 
   // Desktop Sidebar
   return (
+    <>
       <Card className="p-6 sticky top-24">
         <BookingForm />
       </Card>
+
+      <BookingModal
+        open={showBookingModal}
+        onClose={() => setShowBookingModal(false)}
+        listingId={offer.id}
+        listingTitle={offer.title}
+        listingPrice={offer.price}
+        selectedDate={selectedDate}
+        selectedTimeSlot={selectedTimeSlot}
+        guests={guests}
+        onSuccess={handleBookingSuccess}
+      />
+    </>
   );
 };
 

src/contexts/CartContext.tsx

@@ -10,6 +10,7 @@ interface CartItem {
   quantity: number;
   selectedDate?: string;
   guests?: number;
+  timeSlot?: string;
 }
 
 interface CartContextType {

src/hooks/useBooking.ts

@@ -0,0 +1,74 @@
+import { useState } from 'react';
+import { ChannelManagerService } from '@/services/channelManagerApi';
+
+export interface BookingData {
+  listingId: string;
+  guestName: string;
+  guestEmail: string;
+  guestPhone: string;
+  checkIn: string;
+  checkOut?: string;
+  guests: number;
+  totalAmount: number;
+  specialRequests?: string;
+}
+
+export const useBooking = () => {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const createBooking = async (bookingData: BookingData) => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const reservationData = {
+        ...bookingData,
+        status: 'pending',
+        paymentStatus: 'pending',
+        channel: 'direct',
+        createdAt: new Date().toISOString(),
+      };
+
+      const response = await ChannelManagerService.createReservation(reservationData);
+      return { success: true, data: response };
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Error al crear la reserva';
+      setError(errorMessage);
+      return { success: false, error: errorMessage };
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const checkAvailability = async (listingId: string, startDate: string, endDate?: string) => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      // This would call the API to check availability
+      // For now, returning true as placeholder
+      return { success: true, available: true };
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Error al verificar disponibilidad';
+      setError(errorMessage);
+      return { success: false, available: false, error: errorMessage };
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const clearError = () => {
+    setError(null);
+  };
+
+  return {
+    loading,
+    error,
+    createBooking,
+    checkAvailability,
+    clearError,
+  };
+};
+
+export default useBooking;

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,8 +110,44 @@ const Checkout = () => {
   const processPayment = async () => {
     setIsProcessing(true);
     
+    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);
+        }
+
+        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,
+        };
+
+        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, 3000));
+      await new Promise(resolve => setTimeout(resolve, 2000));
       
       const orderData = {
         id: Date.now().toString(),
@@ -118,7 +156,6 @@ const Checkout = () => {
         customerInfo,
         paymentInfo: {
           method: paymentInfo.method,
-        // Don't save sensitive payment data in real implementation
           cardLast4: paymentInfo.cardNumber.slice(-4)
         },
         specialRequests,
@@ -128,7 +165,8 @@ const Checkout = () => {
           serviceFee,
           total: finalTotal
         },
-      status: 'confirmed'
+        status: 'confirmed',
+        reservations: results.map(r => r.data)
       };
 
       saveOrderToJSON(orderData);
@@ -136,11 +174,20 @@ const Checkout = () => {
       
       toast({
         title: "¡Pago procesado exitosamente!",
-      description: "Tu reserva ha sido confirmada. Recibirás un email de confirmación.",
+        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">
+            <BookingSidebar 
-              <CardContent className="p-6">
+              offer={offerForBooking} 
-                <div className="text-center mb-6">
+              onBookNow={handleBookNow}
-                  <div className="text-3xl font-bold text-primary mb-2">
+              onAddToCart={handleAddToCart}
-                    ${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>
           </div>
         </div>
       </div>