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 (isMobile) setIsOpen(false);
+    if (!isAuthenticated) {
+      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>
+    <>
+      <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}
+      />
+    </>
   );
 };