Implementación de Carrito de Compras con Cupones en React

Componente Carrito.jsx

import { useState } from 'react';

import './Carrito.css';

Configuración de Estados

// Se declaran los estados de descuento y código. El descuento se inicializa con 0.00 y el código con un string vacío.

export default function Carrito({ historial, onCobrar }) {

• const [descuento, setDescuento] = useState(0.00)
• const [codigo, setCodigo] = useState("")

Cálculo del Subtotal y Total

// Este código utiliza el método reduce() para recorrer todos los productos del carrito y sumar sus precios. El acumulador (acc) guarda la suma parcial y el valor inicial es 0. El resultado se almacena en la variable subtotal.

const subtotal = historial.reduce((acc, producto) => { return acc + producto.precio; }, 0);

// Para sacar el total habría que multiplicar el subtotal * (1 - descuento).

const total = subtotal * (1 - descuento)

const coupons = { "SAVE10": 0.1, "SAVE20": 0.2, "VIP": 0.3 };

Gestión de Descuentos

// En esta función primero se verifica que el cupón existe y luego se calcula el valor del descuento.

function AplicarDescuento() { if (coupons[codigo]) { setDescuento((subtotal * coupons[codigo])) } else { alert("Tu cupón no sirve") } }

Función de Cobro

// Esta función resetea el descuento y llama a la función onCobrar, que hace referencia a la función cobrar del componente padre.

function cobrar() { setDescuento(0.00); onCobrar(); }

return (

🧾 Carrito

Listado de Productos Seleccionados

{/* Recorrer el historial para dibujar el nombre y el precio de los productos seleccionados */}

{historial.map((producto, index) => { return (

• {producto["nombre"]}
• €{producto.precio.toFixed(2)}

Aplicación de Cupones en la Interfaz

{/* Aquí se introduce el código de cupón y, cuando el usuario actualiza el input, se cambia el valor de setCodigo */}

<input placeholder="Código de cupón" value={codigo} onChange={(e) => setCodigo(e.target.value)} />

<button onClick={AplicarDescuento}>Aplicar Cupón</button>

Finalización de la Compra

{/* Al clicar el botón de cobrar, se llama a la función cobrar, se resetea el descuento y se llama a la función onCobrar, que hace referencia a la función cobrar del componente padre */}

<button class="checkout" onClick={() => cobrar()}>💳 Cobrar / Reset</button>