Plan de implementación de Carrito de Compras (React + TypeScript + Tailwind)

Plan de implementación de Carrito de Compras (React + TypeScript + Tailwind)

Este documento describe el plan para implementar un carrito de compras en la aplicación, siguiendo el diseño de la imagen adjunta.

Estructura de archivos

A crear:

• src/components/Cart/CartPanel.tsx — Panel principal del carrito.
• src/components/Cart/CartItem.tsx — Componente para cada producto en el carrito.
• src/context/CartContext.tsx — Estado global del carrito con Context + useReducer.
• src/utils/cartCalculations.ts — Lógica pura para cálculos (subtotal, descuento, envío, total).

A modificar:

• src/components/entity/product/Products.tsx — Agregar botón “Agregar al carrito”.
• src/components/Navigation.tsx — Añadir enlace/ruta al carrito.
• src/App.tsx — Añadir rutas para la vista del carrito.

---

Funcionalidades

• Vista de productos con botón “Agregar al carrito”.
• Panel del carrito con listado de productos (imagen, nombre, precio, cantidad, total, eliminar).
• Resumen de orden: subtotal, descuento, envío, total.
• Acciones: aumentar/disminuir cantidad, eliminar ítem, vaciar carrito, aplicar cupón.
• Accesibilidad y diseño responsivo con Tailwind.

---

Estado global

• Usar React Context + useReducer para manejar el estado del carrito.
• Separar la lógica de cálculos en un módulo puro (cartCalculations.ts).

---

Navegación

• Añadir enlace al carrito en la barra de navegación.
• Permitir navegar entre productos y carrito.

---

Consideraciones

• Componentes accesibles y responsivos.
• Código modular y fácil de mantener.
• Lógica de descuentos y envío parametrizable.

---

Referencia visual

Imagen adjunta al documento o issue.

---

Este archivo puede usarse como base para crear un issue automáticamente usando la API de GitHub.

Start by reading src/components/entity/product/Products.tsx, src/components/Navigation.tsx, and src/App.tsx to understand the existing product and navigation flows. Then review the planned CartPanel.tsx, CartItem.tsx, CartContext.tsx, and cartCalculations.ts structure. Done means products can be added, managed, totaled, navigated through, and displayed accessibly and responsively with the specified cart actions.