Skip to content

Commit 026d1e3

Browse files
HaroldHLMHaroldHLM
committed
feat: add README with new functionality and suport variants
1 parent dc18624 commit 026d1e3

File tree

1 file changed

+190
-40
lines changed

1 file changed

+190
-40
lines changed

‎README.md‎

Lines changed: 190 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,200 @@
1-
# React + TypeScript + Vite
1+
# 🛍️ Nueva funcionalidad: Soporte para variantes de productos
22

3-
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
3+
Este proyecto incorpora **soporte completo para variantes de productos** (ej: talla, tamaño) y su integración en **UI, carrito, checkout, órdenes, chatbot y pruebas** (unitarias y E2E).
4+
El objetivo fue extender la plataforma sin romper contratos existentes, asegurando compatibilidad hacia atrás ✅.
45

5-
Currently, two official plugins are available:
6+
---
67

7-
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
8+
## ✨ Cambios principales
99

10-
## Expanding the ESLint configuration
10+
### 🔧 Base de datos (Prisma + Migraciones)
11+
- **Nuevo modelo `ProductVariant`** con:
12+
- `id`, `productId`, `type` (ej: `"talla"`, `"tamaño"`), `value` (ej: `"Small"`, `"3x3cm"`), `price (Decimal)`, `timestamps`.
13+
- Relación `Product.variants`.
14+
- Ajustes en `CartItem` y `OrderItem` para referenciar `productVariantId` opcional.
15+
- Migraciones para crear tabla `product_variants` + índices/foreign keys.
16+
📂 Archivos clave:
17+
- [`prisma/schema.prisma`](prisma/schema.prisma)
18+
- [`prisma/migrations`](prisma/migrations)
1119

12-
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
20+
---
1321

14-
- Configure the top-level `parserOptions` property like this:
22+
### 🌱 Seed y Datos Iniciales
23+
- Generación automática de variantes:
24+
- **Polos**: Tallas `S`, `M`, `L` (precio base).
25+
- **Stickers**: Tamaños `3x3`, `5x5`, `10x10` (precio multiplicador).
26+
- **Tazas**: sin variantes.
27+
- Uso de `prisma.productVariant.createMany` para poblar datos.
28+
📂 Archivos clave:
29+
- [`prisma/initial_data.ts`](prisma/initial_data.ts)
30+
- [`prisma/seed.ts`](prisma/seed.ts)
1531

16-
```js
17-
export default tseslint.config({
18-
languageOptions: {
19-
// other options...
20-
parserOptions: {
21-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
22-
tsconfigRootDir: import.meta.dirname,
23-
},
24-
},
25-
})
32+
---
33+
34+
### 🧩 Modelos y Servicios
35+
- `Product` ahora expone `variants: { id, type, value, price }[]`.
36+
- Servicios (`product.service`, `cart.service`, `order.service`) cargan variantes y mantienen firmas originales.
37+
- Lógica de carrito/orden ahora distingue ítems por `(productId, productVariantId)`.
38+
📂 Archivos clave:
39+
- [`src/models/product.model.ts`](src/models/product.model.ts)
40+
- [`src/services/product.service.ts`](src/services/product.service.ts)
41+
- [`src/services/cart.service.ts`](src/services/cart.service.ts)
42+
- [`src/services/order.service.ts`](src/services/order.service.ts)
43+
44+
---
45+
46+
### 🖥️ UI
47+
- **Categorías (PLP)**:
48+
- Precio mostrado usa `displayedPrice` (mínimo o rango si hay variantes).
49+
- **Producto (PDP)**:
50+
- Selección de variantes con `selectedVariant` / `hoveredVariant`.
51+
- Botón "Agregar al Carrito" envía `productVariantId`.
52+
- **Carrito**:
53+
- Renderiza `Producto (Variante)` cuando aplica.
54+
- Controles `+/-` separados por variante.
55+
- **Checkout**:
56+
- Resumen y total con precios de variantes.
57+
- Orden guarda `productVariantId` y precios correctos.
58+
- **Órdenes**:
59+
- Órdenes guardan `productVariantId`.
60+
- Render en UI muestra **Producto (Variante)**.
61+
62+
📂 Archivos clave:
63+
- [`src/routes/category`](src/routes/category)
64+
- [`src/routes/product/index.tsx`](src/routes/product/index.tsx)
65+
- [`src/routes/cart/index.tsx`](src/routes/cart/index.tsx)
66+
- [`src/routes/checkout/index.tsx`](src/routes/checkout/index.tsx)
67+
- [`src/services/order.service.ts`](src/services/order.service.ts)
68+
- [`src/routes/account/orders/index.tsx`](src/routes/account/orders/index.tsx)
69+
70+
---
71+
72+
### 🤖 Chatbot
73+
- `sendMessage` y `generateSystemPrompt` listan variantes con precios y links (`?variant=`).
74+
- Instrucciones para el bot:
75+
- Preguntar por talla/tamaño cuando sea necesario.
76+
- Respetar selección previa.
77+
- Carrito mostrado al usuario incluye variantes y subtotales.
78+
📂 Archivos clave:
79+
- [`src/services/chat.service.ts`](src/services/chat.service.ts)
80+
- [`src/services/chat-system-prompt.ts`](src/services/chat-system-prompt.ts)
81+
82+
---
83+
84+
### ✅ Testing
85+
- **Unitarios e integración**:
86+
- Cobertura de servicios y UI con variantes (`product.service.test`, `product.test.tsx`, `cart.ui.variants.test.tsx`).
87+
- **E2E (Playwright)**:
88+
- Flujo completo: selección de variantes → carrito → checkout → Culqi sandbox.
89+
📂 Archivos clave:
90+
- [`src/routes/product/product.test.tsx`](src/routes/product/product.test.tsx)
91+
- [`src/routes/cart/cart.ui.variants.test.tsx`](src/routes/cart/cart.ui.variants.test.tsx)
92+
- [`src/e2e/cart-variants.spec.ts`](src/e2e/cart-variants.spec.ts)
93+
94+
---
95+
96+
## Visión general (diagramas)
97+
98+
### Diagrama de datos (ER)
99+
100+
```mermaid
101+
erDiagram
102+
CATEGORY ||--o{ PRODUCT : contains
103+
PRODUCT ||--o{ PRODUCT_VARIANT : has
104+
CART ||--o{ CART_ITEM : includes
105+
"ORDER" ||--o{ ORDER_ITEM : contains
106+
107+
PRODUCT_VARIANT ||--o{ CART_ITEM : optional
108+
PRODUCT_VARIANT ||--o{ ORDER_ITEM : optional
109+
110+
CATEGORY {
111+
int id PK
112+
string title
113+
string slug
114+
}
115+
PRODUCT {
116+
int id PK
117+
int categoryId FK
118+
string title
119+
string imgSrc
120+
string alt
121+
decimal price
122+
boolean isOnSale
123+
}
124+
PRODUCT_VARIANT {
125+
int id PK
126+
int productId FK
127+
string type // talla | tamaño
128+
string value // S | M | L | 3x3cm | 10x10cm
129+
decimal price
130+
}
131+
CART {
132+
int id PK
133+
string sessionCartId
134+
int userId
135+
}
136+
CART_ITEM {
137+
int id PK
138+
int cartId FK
139+
int productId FK
140+
int productVariantId FK "nullable"
141+
int quantity
142+
}
143+
ORDER {
144+
int id PK
145+
int userId
146+
string paymentId
147+
timestamp createdAt
148+
}
149+
ORDER_ITEM {
150+
int id PK
151+
int orderId FK
152+
int productId FK
153+
int productVariantId FK "nullable"
154+
string title
155+
decimal price
156+
int quantity
157+
}
26158
```
159+
## Cómo ejecutar
27160

28-
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
29-
- Optionally add `...tseslint.configs.stylisticTypeChecked`
30-
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
31-
32-
```js
33-
// eslint.config.js
34-
import react from 'eslint-plugin-react'
35-
36-
export default tseslint.config({
37-
// Set the react version
38-
settings: { react: { version: '18.3' } },
39-
plugins: {
40-
// Add the react plugin
41-
react,
42-
},
43-
rules: {
44-
// other rules...
45-
// Enable its recommended rules
46-
...react.configs.recommended.rules,
47-
...react.configs['jsx-runtime'].rules,
48-
},
49-
})
161+
162+
163+
### Base de datos y seeds
164+
165+
```bash
166+
# Prisma
167+
npx run prisma:generate
168+
npx run prisma:migrate
169+
npx run prisma:seed
170+
```
171+
### Desarrollo
172+
173+
```bash
174+
npm install
175+
npm run dev
176+
```
177+
### Pruebas unitarias/integración
178+
179+
```bash
180+
npm run test
50181
```
182+
### Pruebas E2E (Playwright)
183+
184+
```bash
185+
# Instalar navegadores y dependencias del sistema (Linux)
186+
npx playwright install chromium
187+
sudo npx playwright install-deps
188+
189+
# Ejecutar E2E
190+
npm run test:e2e
191+
```
192+
193+
> En local, el servidor de pruebas se levanta con `.env.test` para apuntar a la base de datos de testing.
194+
195+
---
196+
197+
## Notas finales
198+
- Todos los cambios mantuvieron compatibilidad hacia atrás cuando fue posible.
199+
- El soporte de variantes está integrado de extremo a extremo: lectura, UI, carrito, checkout, órdenes, chatbot y pruebas.
200+
- Ante cualquier divergencia de UI en E2E, ajustar selectores manteniendo la intención de validación.

0 commit comments

Comments
 (0)