Actualización

ventaboletos/src/components/vistas/Informacion.jsx

@@ -1,5 +1,4 @@
 import { useState, useEffect } from "react";
-import { useRouter } from "next/router";
 import { supabaseClient } from "@/utils/supabase";
 import {
   Dialog,
@@ -23,47 +22,30 @@ function Informacion() {
   const [tipoAsiento, setTipoAsiento] = useState([]);
   const [numeroAsiento, setNumeroAsiento] = useState([]);
   const [selectedCategoria, setSelectedCategoria] = useState("");
+  const [asientoSeleccionado, setAsientoSeleccionado] = useState("");
 
   useEffect(() => {
     fetchConciertos();
-    fetchTipoAsiento();
+    fetchAsientos();
-    fetchNumeroAsiento();
   }, []);
 
   const fetchConciertos = async () => {
-    let { data: conciertos, error } = await supabaseClient
+    let { data, error } = await supabaseClient.from("conciertos").select("*");
-      .from("conciertos")
-      .select("*");
     if (error) {
       console.error(error);
     } else {
-      setConciertos(conciertos);
+      setConciertos(data);
     }
   };
 
-  const fetchNumeroAsiento = async () => {
+  const fetchAsientos = async () => {
-    let { data: asientos, error } = await supabaseClient
+    let { data, error } = await supabaseClient.from("asientos").select("numero_asiento, categoria");
-      .from("asientos")
-      .select("numero_asiento, categoria");
     if (error) {
       console.error(error);
     } else {
-      setNumeroAsiento(asientos);
+      const uniqueCategories = [...new Set(data.map((asiento) => asiento.categoria))];
-    }
-  };
-
-  const fetchTipoAsiento = async () => {
-    let { data: asientos, error } = await supabaseClient
-      .from("asientos")
-      .select("categoria");
-    if (error) {
-      console.error(error);
-    } else {
-      setTipoAsiento(asientos);
-      const uniqueCategories = asientos
-        .map((asiento) => asiento.categoria)
-        .filter((value, index, self) => self.indexOf(value) === index);
       setTipoAsiento(uniqueCategories);
+      setNumeroAsiento(data);
     }
   };
 
@@ -74,6 +56,23 @@ function Informacion() {
 
   const handleCategoriaChange = (categoria) => {
     setSelectedCategoria(categoria);
+    setAsientoSeleccionado("");
+  };
+
+  const handleAgregarAlCarrito = () => {
+    if (!selectedConcierto || !asientoSeleccionado) {
+      alert("Selecciona un tipo de asiento antes de continuar.");
+      return;
+    }
+
+    const carritoActual = JSON.parse(localStorage.getItem("carrito")) || [];
+    const nuevoCarrito = [
+      ...carritoActual,
+      { ...selectedConcierto, asiento: asientoSeleccionado },
+    ];
+
+    localStorage.setItem("carrito", JSON.stringify(nuevoCarrito));
+    setOpen(false);
   };
 
   const filteredAsientos = numeroAsiento
@@ -84,13 +83,10 @@ function Informacion() {
     <>
       <div className="space-y-4">
         {conciertos.map((concierto) => (
-          <div
+          <div key={concierto.id} className="flex items-center gap-4 p-4 border rounded-lg">
-            key={concierto.id}
-            className="flex items-center gap-4 p-4 border rounded-lg"
-          >
             <div className="w-16 h-16 bg-gray-300" />
             <div>
-              <p className="text-lg font-semibold text-black">{concierto.nombre}</p>
+              <p className="text-lg font-semibold">{concierto.nombre}</p>
               <p className="text-sm text-gray-600">{concierto.fecha}</p>
             </div>
             <Button className="ml-auto" onClick={() => handleSelect(concierto)}>
@@ -99,6 +95,7 @@ function Informacion() {
           </div>
         ))}
       </div>
+
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogContent>
           <DialogHeader>
@@ -106,13 +103,12 @@ function Informacion() {
             <p className="text-sm text-gray-600">{selectedConcierto?.fecha}</p>
           </DialogHeader>
           <div className="space-y-4">
-            <Select onValueChange={setAsientoSeleccionado}>
             <Select onValueChange={handleCategoriaChange}>
               <SelectTrigger>
                 <SelectValue placeholder="Selecciona un tipo de asiento" />
               </SelectTrigger>
               <SelectContent>
-                {tipoAsiento?.map((tipo) => (
+                {tipoAsiento.map((tipo) => (
                   <SelectItem key={tipo} value={tipo}>
                     {tipo}
                   </SelectItem>
@@ -121,16 +117,13 @@ function Informacion() {
             </Select>
           </div>
           <div className="space-y-4">
-            <Select onValueChange={(value) => console.log(value)}>
+            <Select onValueChange={setAsientoSeleccionado}>
               <SelectTrigger>
                 <SelectValue placeholder="Selecciona un asiento" />
               </SelectTrigger>
               <SelectContent>
-                {filteredAsientos?.map((asiento) => (
+                {filteredAsientos.map((asiento) => (
-                  <SelectItem
+                  <SelectItem key={asiento.numero_asiento} value={asiento.numero_asiento}>
-                    key={asiento.numero_asiento}
-                    value={asiento.numero_asiento}
-                  >
                     {asiento.numero_asiento}
                   </SelectItem>
                 ))}
@@ -141,7 +134,7 @@ function Informacion() {
             <Button variant="outline" onClick={() => setOpen(false)}>
               Cancelar
             </Button>
-            <Button>Aceptar</Button>
+            <Button onClick={handleAgregarAlCarrito}>Aceptar</Button>
           </div>
         </DialogContent>
       </Dialog>
@@ -149,4 +142,4 @@ function Informacion() {
   );
 }
 
-export default Informacion;
+export default Informacion;

ventaboletos/src/pages/carrito.jsx

@@ -3,6 +3,12 @@ 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);
@@ -11,7 +17,12 @@ export default function Carrito() {
 
   useEffect(() => {
     const carritoGuardado = JSON.parse(localStorage.getItem("carrito")) || [];
-    setCarrito(carritoGuardado);
+    // 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);
   }, []);
 
   const eliminarConcierto = () => {
@@ -58,7 +69,7 @@ export default function Carrito() {
           <div className="flex justify-between mt-4">
             <Button
               className="bg-gray-500 hover:bg-gray-600"
-              onClick={() => router.push("/")} 
+              onClick={() => router.push("/")}
             >
               Cancelar
             </Button>