Add concert images and implement seat pricing in Informacion component

ventaboletos/src/components/vistas/Informacion.jsx

@@ -15,6 +15,7 @@ import {
 } from "@/components/ui/select";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label"; // Import Label component
 
 function Informacion() {
   const [open, setOpen] = useState(false);
@@ -26,6 +27,7 @@ function Informacion() {
   const [selectedCategoria, setSelectedCategoria] = useState("");
   const [asientoSeleccionado, setAsientoSeleccionado] = useState("");
   const [searchTerm, setSearchTerm] = useState("");
+  const [precioAsiento, setPrecioAsiento] = useState(null); // Add state for seat price
 
   useEffect(() => {
     fetchConciertos();
@@ -52,7 +54,7 @@ function Informacion() {
   const fetchAsientos = async () => {
     let { data, error } = await supabaseClient
       .from("asientos")
-      .select("numero_asiento, categoria");
+      .select("numero_asiento, categoria, precio"); // Include price in the select
     if (error) {
       console.error(error);
     } else {
@@ -72,6 +74,15 @@ function Informacion() {
   const handleCategoriaChange = (categoria) => {
     setSelectedCategoria(categoria);
     setAsientoSeleccionado("");
+    setPrecioAsiento(null); // Reset price when category changes
+  };
+
+  const handleAsientoChange = (asiento) => {
+    setAsientoSeleccionado(asiento);
+    const selectedAsiento = numeroAsiento.find(
+      (item) => item.numero_asiento === asiento
+    );
+    setPrecioAsiento(selectedAsiento?.precio || null); // Set the price of the selected seat
   };
 
   const handleAgregarAlCarrito = () => {
@@ -79,13 +90,13 @@ function Informacion() {
       alert("Selecciona un tipo de asiento antes de continuar.");
       return;
     }
-
+  
     const carritoActual = JSON.parse(localStorage.getItem("carrito")) || [];
     const nuevoCarrito = [
       ...carritoActual,
-      { ...selectedConcierto, asiento: asientoSeleccionado },
+      { ...selectedConcierto, asiento: asientoSeleccionado, precio: precioAsiento },
     ];
-
+  
     localStorage.setItem("carrito", JSON.stringify(nuevoCarrito));
     setOpen(false);
   };
@@ -112,8 +123,12 @@ function Informacion() {
           <div
             key={concierto.id}
             className="flex items-center gap-4 p-4 border rounded-lg"
-          >
-            <div className="w-16 h-16 bg-gray-300" />
+          > 
+            <img
+              src={`/images/${concierto.imagen || "default.jpeg"}`}
+              alt={concierto.nombre}
+              className="w-24 h-24 rounded-lg object-cover"
+            />
             <div>
               <p className="text-lg font-semibold">{concierto.nombre}</p>
               <p className="text-sm text-gray-600">{concierto.fecha}</p>
@@ -146,7 +161,7 @@ function Informacion() {
             </Select>
           </div>
           <div className="space-y-4">
-            <Select onValueChange={setAsientoSeleccionado}>
+            <Select onValueChange={handleAsientoChange}>
               <SelectTrigger>
                 <SelectValue placeholder="Selecciona un asiento" />
               </SelectTrigger>
@@ -162,6 +177,11 @@ function Informacion() {
               </SelectContent>
             </Select>
           </div>
+          <div>
+            <Label>
+              {precioAsiento !== null ? `Precio: $${precioAsiento}` : "Selecciona un asiento para ver el precio"}
+            </Label>
+          </div>
           <div className="flex justify-end gap-2 mt-4">
             <Button variant="outline" onClick={() => setOpen(false)}>
               Cancelar
@@ -174,4 +194,4 @@ function Informacion() {
   );
 }
 
-export default Informacion;
+export default Informacion;

ventaboletos/src/pages/carrito.jsx

@@ -3,12 +3,6 @@ import { useRouter } from "next/router";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 
-const PRECIOS_BOLETO = {
-  VIP: 100,
-  Intermedio: 75,
-  General: 25,
-};
-
 export default function Carrito() {
   const [carrito, setCarrito] = useState([]);
   const [showDialog, setShowDialog] = useState(false);
@@ -17,12 +11,7 @@ export default function Carrito() {
 
   useEffect(() => {
     const carritoGuardado = JSON.parse(localStorage.getItem("carrito")) || [];
-    // Asigna el precio basado en el tipo de boleto si no tiene un precio definido
-    const carritoConPrecios = carritoGuardado.map(item => ({
-      ...item,
-      precio: PRECIOS_BOLETO[item.tipoBoleto] || 0,
-    }));
-    setCarrito(carritoConPrecios);
+    setCarrito(carritoGuardado);
   }, []);
 
   const eliminarConcierto = () => {
@@ -38,6 +27,30 @@ export default function Carrito() {
     return carrito.reduce((total, item) => total + (item.precio || 0), 0);
   };
 
+  const pagar = async () => {
+    try {
+      const response = await fetch("/api/comprar-boletos", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ boletos: carrito }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Error al procesar el pago");
+      }
+
+      alert("Compra realizada con éxito");
+      localStorage.removeItem("carrito");
+      setCarrito([]);
+      router.push("/");
+    } catch (error) {
+      console.error("Error en la compra:", error);
+      alert("Hubo un problema al realizar la compra");
+    }
+  };
+
   return (
     <div className="p-4 max-w-3xl mx-auto bg-gray-900 text-white rounded-lg shadow-lg">
       <h2 className="text-2xl font-bold mb-4">Carrito de Compras</h2>
@@ -73,7 +86,7 @@ export default function Carrito() {
             >
               Cancelar
             </Button>
-            <Button className="bg-green-500 hover:bg-green-600">Pagar</Button>
+            <Button className="bg-green-500 hover:bg-green-600" onClick={pagar}>Pagar</Button>
           </div>
         </>
       )}
@@ -95,4 +108,4 @@ export default function Carrito() {
       </Dialog>
     </div>
   );
-}
+}