Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
58cc93bb2f | ||
|
|
66a81ad9a3 | ||
|
|
39e1bf61d3 | ||
|
|
b5a1f70d1d | ||
|
|
9d231322b8 | ||
|
|
098ff990a6 | ||
|
|
ff59618a2a | ||
|
|
44e343eca7 | ||
|
|
c77e958f04 | ||
|
|
711bb2c76f | ||
|
|
08fc4174cb | ||
|
|
89382f057c | ||
|
|
1abc69825c | ||
|
|
1e6009daf7 | ||
|
|
a973b2671e | ||
|
|
bdd7c06a32 |
No files matched your search
@@ -12,6 +12,12 @@ import { createEpaycoClient, type EpaycoEnv } from "../../../../lib/epayco";
|
|||||||
// contra el sandbox real en esta sesion -- se prueban los nombres de
|
// contra el sandbox real en esta sesion -- se prueban los nombres de
|
||||||
// campo mas probables (bankCode/bankName y variantes) y se degrada a
|
// campo mas probables (bankCode/bankName y variantes) y se degrada a
|
||||||
// lista vacia si no matchea nada, en vez de romper el checkout entero.
|
// lista vacia si no matchea nada, en vez de romper el checkout entero.
|
||||||
|
//
|
||||||
|
// Verificado en vivo despues (navegador real, Playwright): el sandbox
|
||||||
|
// real de ePayco incluye un primer elemento placeholder
|
||||||
|
// (bankCode "0", "A continuación seleccione su banco...") mezclado con
|
||||||
|
// los bancos reales -- ningun banco PSE real tiene codigo "0", asi que
|
||||||
|
// se filtra explicitamente en vez de mostrarlo como opcion seleccionable.
|
||||||
const CACHE_TTL_MS = 6 * 60 * 60 * 1000;
|
const CACHE_TTL_MS = 6 * 60 * 60 * 1000;
|
||||||
let cache: { banks: Array<{ pseCode: string; description: string }>; fetchedAt: number } | null = null;
|
let cache: { banks: Array<{ pseCode: string; description: string }>; fetchedAt: number } | null = null;
|
||||||
|
|
||||||
@@ -42,7 +48,7 @@ export async function GET(req: MedusaRequest, res: MedusaResponse) {
|
|||||||
? { pseCode: String(pseCode), description: String(description ?? pseCode) }
|
? { pseCode: String(pseCode), description: String(description ?? pseCode) }
|
||||||
: null;
|
: null;
|
||||||
})
|
})
|
||||||
.filter((bank): bank is { pseCode: string; description: string } => bank !== null);
|
.filter((bank): bank is { pseCode: string; description: string } => bank !== null && bank.pseCode !== "0");
|
||||||
|
|
||||||
cache = { banks, fetchedAt: Date.now() };
|
cache = { banks, fetchedAt: Date.now() };
|
||||||
res.json({ banks });
|
res.json({ banks });
|
||||||
|
|||||||
@@ -1,7 +1,10 @@
|
|||||||
# ADR 0009 — Checkout real (pago en línea + envíos) para ARI Shopping
|
# ADR 0009 — Checkout real (pago en línea + envíos) para ARI Shopping
|
||||||
|
|
||||||
**Estado:** aceptada — proveedor de pago decidido (PayU, §3);
|
**Estado:** aceptada — proveedor de pago decidido (PayU, §3); la
|
||||||
implementación real (credenciales, shipping options, código) pendiente
|
implementación real terminó usando ePayco en vez de PayU (PayU LatAm
|
||||||
|
quedó inviable, Rapyd se evaluó y se descartó sin código) y sumó
|
||||||
|
EnvíoClick para envío calculado — ver [ADR 0010](./0010-pago-envio-reales-y-storefront.md)
|
||||||
|
para el pivote completo y el estado final desplegado
|
||||||
**Fecha:** 2026-08-28
|
**Fecha:** 2026-08-28
|
||||||
|
|
||||||
## Contexto
|
## Contexto
|
||||||
|
|||||||
@@ -0,0 +1,406 @@
|
|||||||
|
# ADR 0010 — Pago (ePayco PSE) y envío (EnvíoClick) reales; banner y buscador del storefront
|
||||||
|
|
||||||
|
**Estado:** aceptada — ambas integraciones desplegadas y verificadas en vivo (sandbox de cada proveedor); banner dinámico y buscador rediseñado desplegados
|
||||||
|
**Fecha:** 2026-09-09
|
||||||
|
|
||||||
|
## Contexto
|
||||||
|
|
||||||
|
El ADR 0009 dejó **PayU** decidido como proveedor de pago de negocio y
|
||||||
|
documentó la necesidad de un módulo custom (`AbstractPaymentProvider`)
|
||||||
|
porque ningún plugin comunitario de Medusa sirve para la API real de
|
||||||
|
PayU LatAm. Entre esa decisión y la implementación real pasaron dos
|
||||||
|
correcciones más, ninguna prevista en el ADR original — este documento
|
||||||
|
cierra esa cadena y agrega la segunda mitad de "checkout real" que el
|
||||||
|
0009 dejó pendiente: el envío (EnvíoClick), más dos mejoras de UI del
|
||||||
|
storefront relacionadas (banner dinámico, buscador) pedidas una vez que
|
||||||
|
ambas integraciones ya estaban en producción.
|
||||||
|
|
||||||
|
## 1. Pago — de PayU a Rapyd a ePayco
|
||||||
|
|
||||||
|
### 1.1 PayU LatAm quedó inviable: Rapyd compró ese negocio
|
||||||
|
|
||||||
|
Al intentar registrar la cuenta de comercio en `developers.payulatam.com`
|
||||||
|
(2026-08-29), el registro real redirige a **Rapyd** — confirmado en vivo
|
||||||
|
contra `board.rapyd.net` con capturas de pantalla del propio usuario, no
|
||||||
|
solo documentación. Investigación confirmó la causa: **Rapyd adquirió el
|
||||||
|
negocio de PayU LatAm/África en 2023.** PayU LatAm como entidad separada
|
||||||
|
con la API documentada en el ADR 0009 (`apiLogin`/`apiKey`/`accountId`)
|
||||||
|
ya no es la vía de registro real para un comercio nuevo.
|
||||||
|
|
||||||
|
Se investigó y planificó por completo la alternativa Rapyd (API REST
|
||||||
|
moderna, firma HMAC-SHA256, endpoint `/v1/payments` — arquitectura
|
||||||
|
totalmente distinta a la de PayU LatAm clásico, no una migración menor
|
||||||
|
de credenciales) pero **nunca se escribió código**: antes de implementar,
|
||||||
|
el usuario planteó ePayco como alternativa y, al evaluarla, resultó
|
||||||
|
preferible por costo/encaje — Rapyd quedó descartado en la etapa de plan,
|
||||||
|
no de código.
|
||||||
|
|
||||||
|
### 1.2 Decisión final: ePayco
|
||||||
|
|
||||||
|
**Motivo de negocio:** ePayco es 100% propiedad de Davivienda desde 2024
|
||||||
|
— mejor tarifa PSE dado que Davivienda ya es uno de los bancos
|
||||||
|
disponibles del comercio (mismo dato de negocio del ADR 0009 §3:
|
||||||
|
Davivienda, Lulo Bank, Banco de Bogotá).
|
||||||
|
|
||||||
|
**Hallazgo técnico no obvio, verificado en vivo, no en documentación:**
|
||||||
|
ePayco tiene dos productos de integración distintos bajo la misma marca:
|
||||||
|
|
||||||
|
- Un producto nuevo tipo "Apify"/Web-Checkout (widget alojado).
|
||||||
|
- La integración real de PSE que efectivamente se usó: la API
|
||||||
|
"restpagos" / `secure.payco.co`, **más antigua**, que combina login con
|
||||||
|
bearer token **más cifrado AES-CBC campo por campo** usando la llave
|
||||||
|
privada del comercio como clave AES con IV en cero — un protocolo poco
|
||||||
|
común que no vale la pena reimplementar a mano. Se optó por depender
|
||||||
|
del paquete oficial `epayco-sdk-node` en vez de escribir el cliente
|
||||||
|
HTTP propio (a diferencia de EnvíoClick, ver §2).
|
||||||
|
|
||||||
|
Nombres de método/campo reales del SDK, corregidos contra su código
|
||||||
|
fuente instalado (no contra su propia documentación pública, que estaba
|
||||||
|
desactualizada respecto al paquete):
|
||||||
|
|
||||||
|
- Lista de bancos PSE: `getBanks()` (la doc pública sugiere `pseBank()`,
|
||||||
|
que no existe en el SDK real).
|
||||||
|
- Confirmación de método: campo `method_confirmation` (la doc pública
|
||||||
|
sugiere `metodoconfirmacion`).
|
||||||
|
|
||||||
|
**Implementación** (`commerce-backend/src/modules/epayco-pse/`,
|
||||||
|
`src/lib/epayco.ts`): módulo de pago custom
|
||||||
|
(`AbstractPaymentProvider`), estado `pending_authorization` tras iniciar
|
||||||
|
el pago (mecanismo documentado de Medusa para métodos asíncronos —
|
||||||
|
permite que el carrito complete en una orden "esperando confirmación" sin
|
||||||
|
bloquear sobre la respuesta del banco), webhook nativo de Medusa en
|
||||||
|
`/hooks/payment/epayco_pse` (sin subscriber custom — el
|
||||||
|
`payment-webhook` + `process-payment-workflow` incluidos en el core ya
|
||||||
|
completan la orden automáticamente al recibir la notificación).
|
||||||
|
|
||||||
|
**Verificado en vivo (2026-09):**
|
||||||
|
- Credenciales reales del comercio (`P_CUST_ID_CLIENTE`, `P_KEY`,
|
||||||
|
`PUBLIC_KEY`, `PRIVATE_KEY`) cargadas en el secret real del cluster.
|
||||||
|
- Llamada real a `getBanks()` contra la API de ePayco devolvió el listado
|
||||||
|
real de bancos PSE en modo sandbox.
|
||||||
|
- El webhook `/hooks/payment/epayco_pse` es alcanzable desde afuera:
|
||||||
|
`POST` externo contra `https://commerce.cruzcloud.net/hooks/payment/epayco_pse`
|
||||||
|
responde `200 OK` (la firma inválida se maneja puertas adentro sin
|
||||||
|
romper la respuesta HTTP) — cierra el riesgo de red que el ADR 0009 §2
|
||||||
|
había señalado como pendiente de validar (mismo patrón de incidente ya
|
||||||
|
documentado para otro servicio,
|
||||||
|
`incidente-cloudflared-504-quic-2026-08.md`).
|
||||||
|
|
||||||
|
**Limitaciones conocidas y aceptadas, no bloqueantes:**
|
||||||
|
- `refundPayment` tira un error explícito de "no implementado" — el
|
||||||
|
endpoint real de reembolso nunca se verificó en vivo, se prefirió
|
||||||
|
fallar ruidosamente a fingir éxito.
|
||||||
|
- El nombre exacto del campo de la URL de redirección del banco en la
|
||||||
|
respuesta de `bank.create()` se maneja de forma defensiva, probando
|
||||||
|
varios nombres candidatos con un error explícito y el payload completo
|
||||||
|
si ninguno matchea — **todavía no se probó con un pago PSE real de
|
||||||
|
principio a fin** (solo `getBanks()` está confirmado en vivo). Ver §3
|
||||||
|
para cómo cerrar esto desde el storefront real.
|
||||||
|
- El comercio está en modo **sandbox** de ePayco (`EPAYCO_ENV: sandbox`
|
||||||
|
en el ConfigMap) — no se ha movido dinero real todavía.
|
||||||
|
|
||||||
|
## 2. Envío — EnvíoClick reemplaza la tarifa fija
|
||||||
|
|
||||||
|
El ADR 0009 (nota de implementación) dejó una shipping option con tarifa
|
||||||
|
fija de $15.000 COP como **placeholder de negocio**, anotando
|
||||||
|
explícitamente que un cálculo real por peso/volumen era trabajo futuro
|
||||||
|
— "eso es justamente lo que EnvíoClick resolvería más adelante". Este
|
||||||
|
ADR cierra ese punto.
|
||||||
|
|
||||||
|
### Hallazgo de negocio, no técnico, que condiciona la precisión real
|
||||||
|
|
||||||
|
**Ningún producto del catálogo tiene peso ni dimensiones cargados**
|
||||||
|
(confirmado contra la base real: 18 productos activos, 0 con `weight`,
|
||||||
|
0 con `length`). Sin este dato, cualquier cotización real de EnvíoClick
|
||||||
|
no puede ser precisa. Se aceptó como **tarea de datos pendiente, no de
|
||||||
|
código** — la integración usa un paquete de fallback conservador (1 kg,
|
||||||
|
20×20×20 cm) mientras no haya datos reales por producto, documentado en
|
||||||
|
`src/modules/envioclick-fulfillment/types.ts` (`DEFAULT_PACKAGE`).
|
||||||
|
|
||||||
|
### API real, corregida contra la fuente primaria, no contra un plugin de referencia desactualizado
|
||||||
|
|
||||||
|
Un plugin de WordPress usado como primera referencia resultó ser para la
|
||||||
|
**API v1** de EnvíoClick, ya obsoleta. La doc real
|
||||||
|
(`apidoc.envioclickpro.com.co`, generada con apiDoc — se bajó y leyó
|
||||||
|
directo `api_data.json`/`api_project.json`, ya que la SPA no renderizaba
|
||||||
|
sin sesión) reveló diferencias reales, confirmadas con una llamada real
|
||||||
|
exitosa:
|
||||||
|
|
||||||
|
| | Plugin de referencia (v1, desactualizado) | API real (v2, confirmada en vivo) |
|
||||||
|
|---|---|---|
|
||||||
|
| Base URL | `api.envioclickpro.com` | `https://api.envioclickpro.com.co/api/v2` |
|
||||||
|
| Header de auth | `AuthorizationKey: <key>` | `Authorization: <key>` (sin prefijo) |
|
||||||
|
|
||||||
|
`POST /quotation` devolvió en vivo tarifas reales de PIBOX, COORDINADORA,
|
||||||
|
ENVIA, RAPPI y TCC para una cotización de prueba real — se toma
|
||||||
|
`flete + minimumInsurance` (seguro mínimo obligatorio, hay que sumarlo al
|
||||||
|
flete para el precio real a cobrar) más barato del array `data.rates[]`,
|
||||||
|
mismo criterio de "más económico" que ya usaba el plugin de referencia.
|
||||||
|
|
||||||
|
### Hallazgo crítico de Medusa, evitado antes de romper nada (no un incidente real)
|
||||||
|
|
||||||
|
Leyendo directo `@medusajs/utils/dist/common/define-config.js` (no
|
||||||
|
documentación): `defineConfig()` ya registra por defecto
|
||||||
|
`Modules.FULFILLMENT` con el provider `manual_manual`, aunque
|
||||||
|
`medusa-config.ts` no lo mencione explícitamente. `transformModules()`
|
||||||
|
indexa por `serviceName` y el último bloque que se declara **pisa**, no
|
||||||
|
suma, al anterior. Agregar un bloque de fulfillment propio sin incluir
|
||||||
|
también `@medusajs/medusa/fulfillment-manual` adentro habría roto el
|
||||||
|
fulfillment manual existente en silencio — mismo tipo de riesgo que casi
|
||||||
|
pasó con `payment` en el ADR 0009, evitado leyendo el código fuente real
|
||||||
|
antes de escribir el bloque nuevo (ambos providers conviven hoy en el
|
||||||
|
mismo bloque de `medusa-config.ts`).
|
||||||
|
|
||||||
|
**Implementación** (`commerce-backend/src/modules/envioclick-fulfillment/`,
|
||||||
|
`src/lib/envioclick.ts`): `AbstractFulfillmentProviderService`,
|
||||||
|
`calculatePrice()` invocado en vivo cada vez que el carrito refresca
|
||||||
|
shipping options (Medusa advierte que si este método falla, **bloquea el
|
||||||
|
checkout** — el fallback conservador de arriba existe también por esto,
|
||||||
|
no solo por falta de datos). `createFulfillment()` genera la guía real vía
|
||||||
|
`/shipment` (o `/shipment_sandbox` en modo prueba —
|
||||||
|
**el único endpoint con sandbox real**, la cotización siempre usa
|
||||||
|
tarifas reales). Sin cambios en el storefront: `GET /store/shipping-options`
|
||||||
|
nativo de Medusa ya invocaba `calculatePrice()` automáticamente para
|
||||||
|
cualquier shipping option `price_type: "calculated"`.
|
||||||
|
|
||||||
|
**Verificado en vivo (2026-09):**
|
||||||
|
- Shipping option "Envío nacional estándar" migrada de `manual_manual`/
|
||||||
|
tarifa fija a `envioclick_standard`/`calculated` vía Admin API (con
|
||||||
|
usuario admin temporal, eliminado después de usarlo).
|
||||||
|
- Un `400` inicial (`"Providers (envioclick_standard) are not enabled
|
||||||
|
for the service location"`) se resolvió vinculando el provider a la
|
||||||
|
stock location (`POST /admin/stock-locations/:id/fulfillment-providers`)
|
||||||
|
— Medusa exige esto además del bloque de módulo.
|
||||||
|
- Carrito de prueba real con dirección → `shipping_total: 8941` COP,
|
||||||
|
tarifa real de EnvíoClick, no el fijo de $15.000.
|
||||||
|
- Datos reales de la bodega de origen cargados (dirección `Cra 100
|
||||||
|
#42-65`, contacto `cristiancruz29@outlook.com` / `3014750823`) tanto en
|
||||||
|
el ConfigMap (`ENVIOCLICK_ORIGIN_*`) como en el registro real de la
|
||||||
|
stock location en Medusa (antes: "Sin dirección física registrada").
|
||||||
|
- El comercio está en modo **sandbox** de EnvíoClick
|
||||||
|
(`ENVIOCLICK_SANDBOX: "true"`) — las guías que se generan son de
|
||||||
|
prueba, sin costo; ninguna cotización es de prueba (no existe sandbox
|
||||||
|
de cotización).
|
||||||
|
|
||||||
|
**Limitaciones conocidas y aceptadas, no bloqueantes:**
|
||||||
|
- `createReturnFulfillment` tira "no implementado" — devoluciones fuera
|
||||||
|
de alcance.
|
||||||
|
- Cancelación de guía real (`POST cancellation/batch/order`, hasta 50 por
|
||||||
|
lote, usando los `idOrder` que devuelve `/shipment`) confirmada como
|
||||||
|
existente en la API pero **no implementada en el módulo** — se
|
||||||
|
descubrió durante la investigación, no se integró por no ser parte del
|
||||||
|
flujo de checkout mínimo.
|
||||||
|
- Solo EnvíoClick como provider — no hay selección de múltiples
|
||||||
|
couriers por el comprador (v1 siempre toma el más barato).
|
||||||
|
- Ningún producto tiene peso/dimensiones reales — ver arriba.
|
||||||
|
|
||||||
|
## 3. Storefront — banner dinámico y buscador
|
||||||
|
|
||||||
|
Con ambas integraciones ya en producción, se atendieron dos pedidos de
|
||||||
|
UI del storefront relacionados con la experiencia de compra real:
|
||||||
|
|
||||||
|
### 3.1 Banner dinámico (`components/home/hero-carousel.tsx`)
|
||||||
|
|
||||||
|
Antes: tres slides con copy e imágenes fijas, hardcodeadas en el
|
||||||
|
componente, sin relación con el catálogo real. Ahora: `HomePage`
|
||||||
|
(`app/page.tsx`, que ya hace `getProducts()` del backend real) le pasa al
|
||||||
|
carrusel los productos marcados como `featured` en el admin (o, si no hay
|
||||||
|
ninguno, los mismos "tesoros" —nuevos o destacados— que ya usa la sección
|
||||||
|
de abajo, para no duplicar el criterio de selección); el carrusel arma
|
||||||
|
cada slide con la imagen, nombre, precio (`priceLabel`) y link reales del
|
||||||
|
producto, calculando el badge de descuento (`% OFF`) cuando
|
||||||
|
`compareAtPrice` existe. Si la tienda no tuviera ningún producto activo
|
||||||
|
(caso borde), cae a un slide estático de respaldo para no romper la
|
||||||
|
página. Autoplay, dots de paginación y animación quedan igual — solo
|
||||||
|
cambia el origen de los datos.
|
||||||
|
|
||||||
|
### 3.2 Buscador (`components/layout/navbar.tsx`)
|
||||||
|
|
||||||
|
El header en mobile competía el buscador con el logo y los tres iconos
|
||||||
|
de acción en una sola fila de grid (`grid-cols-[auto_1fr_auto]`),
|
||||||
|
quedando visualmente recortado — reportado por el usuario junto a una
|
||||||
|
captura de referencia del header mobile de Best Buy (fila de iconos
|
||||||
|
arriba, buscador a todo el ancho debajo, con micrófono y escaneo QR
|
||||||
|
inline).
|
||||||
|
|
||||||
|
**Decisión:** adoptar el mismo patrón de dos filas en mobile/tablet
|
||||||
|
(logo + iconos arriba, buscador a todo el ancho debajo) pero **sin** los
|
||||||
|
íconos de micrófono/QR — no hay búsqueda por voz ni por código de barras
|
||||||
|
implementada, y un ícono sin función real confunde más de lo que ayuda.
|
||||||
|
En desktop (`lg:` y arriba) se mantuvo la fila única original del grid
|
||||||
|
`[auto_1fr_auto]`: ahí ya sobraba espacio horizontal y partirla en dos
|
||||||
|
solo alargaría el header sin necesidad. Sin cambios en la lógica de
|
||||||
|
`PredictiveSearch` (autocompletado, debounce, navegación) — solo se
|
||||||
|
reubicó su contenedor según el breakpoint.
|
||||||
|
|
||||||
|
## Opciones consideradas (pago)
|
||||||
|
|
||||||
|
| Opción | A favor | En contra |
|
||||||
|
|---|---|---|
|
||||||
|
| PayU LatAm (ADR 0009) | Ya decidido, credenciales bien documentadas | Registro real redirige a Rapyd — la entidad "PayU LatAm" independiente ya no existe para un comercio nuevo |
|
||||||
|
| Rapyd | Dueño real del negocio ex-PayU LatAm, API moderna y bien documentada | API completamente distinta (HMAC, REST moderno) — no es una migración de credenciales, es una integración nueva desde cero; descartada en fase de plan por costo/encaje frente a ePayco |
|
||||||
|
| **ePayco** — elegido | 100% Davivienda desde 2024, mejor tarifa PSE con el banco ya disponible del comercio; SDK oficial cubre el protocolo inusual (login + cifrado AES por campo) | Dos productos bajo la misma marca (Apify vs. la API real usada) fáciles de confundir; doc pública desactualizada respecto al SDK real; reembolsos no implementados |
|
||||||
|
|
||||||
|
## Consecuencias
|
||||||
|
|
||||||
|
- Checkout real de punta a punta (pago + envío calculado) queda
|
||||||
|
desplegado y verificado con navegador real hasta la redirección al
|
||||||
|
banco de PSE (ver nota de implementación 2026-09-10 abajo), pero
|
||||||
|
**ambos proveedores siguen en modo sandbox** — no se ha completado ni
|
||||||
|
un pago real ni un envío real todavía, y el login bancario de PSE
|
||||||
|
tampoco se completó (falta credencial de prueba). Ver checklist
|
||||||
|
ampliado abajo.
|
||||||
|
- La precisión de la tarifa de envío depende de cargar peso/dimensiones
|
||||||
|
reales por producto — deuda de datos explícita, no de código; candidato
|
||||||
|
natural a extender el importador CSV existente con columnas nuevas.
|
||||||
|
- Reembolsos (ePayco) y devoluciones/cancelación de guía (EnvíoClick)
|
||||||
|
quedan fuera de alcance — fallan explícitamente en vez de fingir éxito.
|
||||||
|
- Revertir el pago implica deshabilitar el provider `epayco_pse` en la
|
||||||
|
región y volver al placeholder anterior; revertir el envío implica
|
||||||
|
volver la shipping option a `manual_manual`/tarifa fija — ninguna de
|
||||||
|
las dos requiere cambios de esquema de datos para revertirse.
|
||||||
|
- El banner y el buscador no introducen dependencias nuevas ni cambian
|
||||||
|
ninguna ruta de API — son cambios de storefront puros, reversibles
|
||||||
|
cambiando los dos componentes de vuelta a su versión anterior.
|
||||||
|
|
||||||
|
## Checklist de pruebas reales desde el storefront (pendiente, no ejecutado en este ADR)
|
||||||
|
|
||||||
|
Todo lo de arriba se verificó primero a nivel API/backend con llamadas
|
||||||
|
directas o carritos de prueba armados por API, sin manejar el
|
||||||
|
storefront real como lo haría un comprador. Esa parte del checklist se
|
||||||
|
cerró el 2026-09-10 (ver nota de implementación abajo) usando un
|
||||||
|
navegador real de verdad, no curl.
|
||||||
|
|
||||||
|
### RESUELTO (2026-09-10) — navegador real vía Docker en la NAS
|
||||||
|
|
||||||
|
El shell donde corren los comandos de esta sesión tiene su propia red
|
||||||
|
restringida para `npm` (un proxy interno que rompe algunas descargas de
|
||||||
|
paquetes — no relacionado con la red real del lab). **Docker en la NAS
|
||||||
|
sí sale a internet real, sin ese filtro** — confirmado en vivo
|
||||||
|
(`docker pull` normal, un contenedor de Node golpeando
|
||||||
|
`registry.npmjs.org` sin problema). Se armó un harness reutilizable con
|
||||||
|
la imagen oficial `mcr.microsoft.com/playwright:v1.51.1-jammy`
|
||||||
|
(Chromium real) corrida puntualmente contra `shop.cruzcloud.net`,
|
||||||
|
guardado en `.browser-scratch/` en la raíz del lab (`checks.mjs` +
|
||||||
|
`README.md` con el comando exacto para reactivarlo — no hace falta
|
||||||
|
ningún contenedor corriendo de forma persistente, la imagen y las
|
||||||
|
dependencias ya quedan cacheadas localmente en la NAS).
|
||||||
|
|
||||||
|
**Hallazgo no obvio:** el daemon de Docker de la NAS ve un filesystem
|
||||||
|
distinto al que ve el shell de esta sesión (que corre en su propio
|
||||||
|
sandbox, aunque monte los mismos repos git) — un volumen `-v` apuntando
|
||||||
|
a un path de `/tmp` del shell no tira error pero monta un directorio
|
||||||
|
vacío del lado del contenedor. Hay que usar un path bajo
|
||||||
|
`/media/HDD-Storage/AppData/k3d-lab-v3/lab-cruzcloud/` (montaje real
|
||||||
|
compartido) para que el contenedor vea los archivos de verdad.
|
||||||
|
|
||||||
|
**Resultados, con capturas reales:**
|
||||||
|
|
||||||
|
1. **Pago PSE completo — FUNCIONA.** Carrito → dirección Bogotá →
|
||||||
|
envío calculado → banco PSE (sandbox) → **la redirección real
|
||||||
|
funcionó**: el nombre de campo manejado a la defensiva en
|
||||||
|
`bank.create()`/`initiatePayment` matcheó al primer intento, y el
|
||||||
|
navegador llegó a la página real de autorización de PSE
|
||||||
|
(`registro.desarrollo.pse.com.co`, ambiente de desarrollo/sandbox
|
||||||
|
de PSE Colombia). No se completó el login bancario (requiere
|
||||||
|
credenciales de prueba específicas de PSE que no se tenían a mano) —
|
||||||
|
sigue pendiente confirmar el webhook con un pago sandbox completado
|
||||||
|
de principio a fin (ver checklist nuevo abajo).
|
||||||
|
2. **Envío calculado real — FUNCIONA.** El paso de pago mostró
|
||||||
|
`Envío $8.941` (mismo valor ya visto en la verificación por API de
|
||||||
|
la sección anterior) en vez del fijo de $15.000, para una dirección
|
||||||
|
real de Bogotá.
|
||||||
|
3. **Banner dinámico — funciona, pero destapó un bug real:** un
|
||||||
|
producto marcado `featured: true` pero **sin stock**
|
||||||
|
(`available: false`, "Toy Story 5 - Rex") salía primero en el
|
||||||
|
carrusel con botón "Comprar ahora" hacia una página donde en
|
||||||
|
realidad no se puede comprar. Corregido en el mismo commit que este
|
||||||
|
hallazgo (filtro adicional `&& product.available` en
|
||||||
|
`app/page.tsx`).
|
||||||
|
4. **Buscador mobile — funciona.** El buscador ya no se ve recortado,
|
||||||
|
y el autocompletado despliega bien debajo de la fila nueva a todo el
|
||||||
|
ancho (probado con el viewport de un iPhone 13 real, no devtools).
|
||||||
|
5. **Bug adicional encontrado, no buscado:** el sandbox real de ePayco
|
||||||
|
(`bank.getBanks()`) devuelve un primer elemento placeholder
|
||||||
|
(`bankCode: "0"`, `"A continuación seleccione su banco..."` con el
|
||||||
|
texto mal decodificado — unicode escapado literal) mezclado con los
|
||||||
|
bancos reales, mostrado como una opción más, seleccionable, en el
|
||||||
|
`<select>` del checkout. Ningún banco PSE real tiene código "0" —
|
||||||
|
se filtra explícitamente en `pse-banks/route.ts`.
|
||||||
|
|
||||||
|
### Pendiente — checklist ampliado para la próxima sesión con navegador
|
||||||
|
|
||||||
|
3. **Resiliencia del fallback de envío:** forzar una dirección o
|
||||||
|
producto que haga fallar la cotización real de EnvíoClick (ej. un
|
||||||
|
DANE code inválido) y confirmar que el checkout sigue avanzando con
|
||||||
|
el precio de respaldo ($15.000) en vez de romperse — comportamiento
|
||||||
|
documentado en `calculatePrice()`, nunca ejercitado con un fallo
|
||||||
|
real.
|
||||||
|
6. **Webhook de ePayco con un pago real de sandbox completado:**
|
||||||
|
conseguir credenciales de prueba reales de PSE (persona/clave de
|
||||||
|
algún banco del ambiente `desarrollo`), completar el login bancario
|
||||||
|
de punta a punta, y confirmar que el webhook mueve la orden a
|
||||||
|
completada sin intervención manual — hoy solo se confirmó que el
|
||||||
|
endpoint responde `200` a un `POST` sintético y que la redirección
|
||||||
|
al banco ocurre, no el ciclo completo con notificación real.
|
||||||
|
Ampliado 2026-09-10 con el resto de la superficie real del storefront
|
||||||
|
(4 páginas + `components/{account,cart,catalog,checkout,home,layout,
|
||||||
|
product,search,wishlist}`), agrupado por riesgo:
|
||||||
|
|
||||||
|
**Checkout / pagos**
|
||||||
|
|
||||||
|
7. **Pago cancelado o rechazado en el banco PSE:** confirmar que la
|
||||||
|
orden no queda en un estado ambiguo ("colgada" en
|
||||||
|
`pending_authorization` para siempre) cuando el comprador cancela o
|
||||||
|
el banco rechaza — hoy solo se probó el camino feliz hasta la
|
||||||
|
redirección.
|
||||||
|
8. **Persona jurídica + NIT** en el formulario de PSE — solo se probó
|
||||||
|
persona natural con cédula.
|
||||||
|
9. **`/checkout` con carrito vacío** (acceso directo por URL, sin pasar
|
||||||
|
por un producto primero).
|
||||||
|
10. **Fallback "Confirmar por WhatsApp"** (visible cuando falla la
|
||||||
|
lista de bancos o como alternativa siempre disponible): que el link
|
||||||
|
arme el mensaje correcto con los datos del pedido.
|
||||||
|
|
||||||
|
**Catálogo y búsqueda**
|
||||||
|
|
||||||
|
11. **Filtros de `/catalog`** (categoría/colección/marca/precio — las
|
||||||
|
facetas de Meilisearch, ver ADR 0006) con navegador real: que
|
||||||
|
aplicar/combinar filtros actualice los resultados y la URL.
|
||||||
|
12. **Búsqueda sin resultados** — confirmar que muestra un mensaje
|
||||||
|
claro en vez de quedar vacío sin explicación.
|
||||||
|
|
||||||
|
**Producto**
|
||||||
|
|
||||||
|
13. **Selección de variantes** (cuando un producto tiene más de una) y
|
||||||
|
que el precio/disponibilidad mostrado cambie según la variante
|
||||||
|
elegida.
|
||||||
|
14. **Slug de producto inválido** → debe caer en `not-found.tsx`
|
||||||
|
(`app/not-found.tsx`), no en un error sin manejar.
|
||||||
|
15. **Zoom interactivo del producto** (hover + modal click-to-zoom,
|
||||||
|
`product-gallery.tsx`) — re-verificar con navegador real, la última
|
||||||
|
vez que se probó fue antes de esta tanda de cambios al storefront.
|
||||||
|
|
||||||
|
**Cuenta y wishlist**
|
||||||
|
|
||||||
|
16. **Login/registro de cliente real** (Google OAuth de punta a punta
|
||||||
|
incluyendo `/auth/google/callback`, y con contraseña) — nunca
|
||||||
|
ejercitado con un navegador real en ninguna sesión.
|
||||||
|
17. **Wishlist/favoritos** (`wishlist-drawer.tsx`): agregar/quitar y
|
||||||
|
confirmar que persiste entre recargas (guardado en `localStorage`,
|
||||||
|
por-viewer — no hay forma de verificarlo por API).
|
||||||
|
|
||||||
|
**Transversal**
|
||||||
|
|
||||||
|
18. **Bug conocido de Firefox Android** (ver memoria de proyecto,
|
||||||
|
`known-bug-firefox-android-layout`): el layout se corta/desplaza
|
||||||
|
solo en Firefox Android — Playwright puede emular Android/Chrome
|
||||||
|
pero no Firefox; si se necesita reproducir esto específicamente hace
|
||||||
|
falta `playwright-firefox` o un dispositivo real.
|
||||||
|
19. **Otros viewports** (tablet, desktop grande) para el banner y el
|
||||||
|
buscador — solo se probaron mobile (iPhone 13) y desktop 1280px.
|
||||||
|
20. **Página 404** (`app/not-found.tsx`) — nunca visitada con navegador
|
||||||
|
real.
|
||||||
|
21. **Accesibilidad básica**: navegación completa por teclado (tab
|
||||||
|
order, foco visible) en el checkout y el buscador — Playwright
|
||||||
|
puede simular esto (`page.keyboard`), no probado todavía.
|
||||||
@@ -25,7 +25,7 @@ spec:
|
|||||||
runAsNonRoot: false
|
runAsNonRoot: false
|
||||||
containers:
|
containers:
|
||||||
- name: app
|
- name: app
|
||||||
image: gitea.cruzcloud.net/devops/docs-portal:v1.0.224
|
image: gitea.cruzcloud.net/devops/docs-portal:v1.0.237
|
||||||
# El base saca TODAS las capabilities. Probado en vivo y
|
# El base saca TODAS las capabilities. Probado en vivo y
|
||||||
# revertido: con drop: ALL (aunque se agregue NET_BIND_SERVICE
|
# revertido: con drop: ALL (aunque se agregue NET_BIND_SERVICE
|
||||||
# de vuelta) el propio entrypoint de nginx:1.27-alpine falla al
|
# de vuelta) el propio entrypoint de nginx:1.27-alpine falla al
|
||||||
|
|||||||
@@ -18,7 +18,17 @@ export const dynamic = "force-dynamic";
|
|||||||
export default async function HomePage() {
|
export default async function HomePage() {
|
||||||
const [products, categories] = await Promise.all([getProducts(), getCategories()]);
|
const [products, categories] = await Promise.all([getProducts(), getCategories()]);
|
||||||
const treasures = products.filter((product) => product.isNew || product.featured).slice(0, 8);
|
const treasures = products.filter((product) => product.isNew || product.featured).slice(0, 8);
|
||||||
return <><HeroCarousel /><TrustBar /><div className="content-auto"><CategoryTiles categories={categories} /></div><section className="content-auto mx-auto max-w-7xl px-4 py-14"><div className="mb-8 flex items-end justify-between gap-5"><div><span className="text-xs font-black uppercase tracking-[.18em] text-ari-coral">Novedades</span><h2 className="mt-2 text-4xl font-black tracking-tight sm:text-5xl">Tesoros recién llegados</h2><p className="mt-3 text-slate-500">Desliza y encuentra nuevos favoritos.</p></div><Button asChild variant="outline" className="hidden sm:inline-flex"><Link href="/catalog">Ver catálogo <ArrowRight className="size-4" /></Link></Button></div><ProductCarousel products={treasures} /></section><section className="content-auto mx-auto max-w-7xl px-4 pb-20"><div className="grid overflow-hidden rounded-[2rem] bg-ari-marino text-white shadow-2xl lg:grid-cols-[1fr_.7fr]"><div className="p-8 sm:p-12"><span className="text-xs font-black uppercase tracking-[.18em] text-ari-coral-claro">Club ARI</span><h2 className="mt-3 text-4xl font-black tracking-tight sm:text-6xl">Promociones, lanzamientos y mucha diversión.</h2><p className="mt-5 max-w-xl text-white/80">Únete a nuestra comunidad y recibe primero las novedades del catálogo.</p><Button variant="yellow" size="lg" className="mt-7">Quiero unirme</Button></div>{/* No hay herramienta de generacion de imagenes disponible para crear un
|
// ADR 0010: el banner toma primero productos destacados (curaduria
|
||||||
|
// explicita del admin via el flag "featured"); si no hay ninguno,
|
||||||
|
// cae a los mismos "tesoros" (nuevos/destacados) de la seccion de
|
||||||
|
// abajo para no repetir la logica de seleccion. Se exige ademas
|
||||||
|
// "available" -- encontrado probando en vivo con un navegador real
|
||||||
|
// (Playwright): un producto featured pero sin stock disponible salio
|
||||||
|
// primero en el carrusel con boton "Comprar ahora" hacia una pagina
|
||||||
|
// donde en realidad no se puede comprar.
|
||||||
|
const featuredProducts = products.filter((product) => product.featured && product.available);
|
||||||
|
const bannerProducts = featuredProducts.length > 0 ? featuredProducts : treasures.filter((product) => product.available);
|
||||||
|
return <><HeroCarousel products={bannerProducts} /><TrustBar /><div className="content-auto"><CategoryTiles categories={categories} /></div><section className="content-auto mx-auto max-w-7xl px-4 py-14"><div className="mb-8 flex items-end justify-between gap-5"><div><span className="text-xs font-black uppercase tracking-[.18em] text-ari-coral">Novedades</span><h2 className="mt-2 text-4xl font-black tracking-tight sm:text-5xl">Tesoros recién llegados</h2><p className="mt-3 text-slate-500">Desliza y encuentra nuevos favoritos.</p></div><Button asChild variant="outline" className="hidden sm:inline-flex"><Link href="/catalog">Ver catálogo <ArrowRight className="size-4" /></Link></Button></div><ProductCarousel products={treasures} /></section><section className="content-auto mx-auto max-w-7xl px-4 pb-20"><div className="grid overflow-hidden rounded-[2rem] bg-ari-marino text-white shadow-2xl lg:grid-cols-[1fr_.7fr]"><div className="p-8 sm:p-12"><span className="text-xs font-black uppercase tracking-[.18em] text-ari-coral-claro">Club ARI</span><h2 className="mt-3 text-4xl font-black tracking-tight sm:text-6xl">Promociones, lanzamientos y mucha diversión.</h2><p className="mt-5 max-w-xl text-white/80">Únete a nuestra comunidad y recibe primero las novedades del catálogo.</p><Button variant="yellow" size="lg" className="mt-7">Quiero unirme</Button></div>{/* No hay herramienta de generacion de imagenes disponible para crear un
|
||||||
asset nuevo -- se reconstruye el mismo efecto (fondo punteado +
|
asset nuevo -- se reconstruye el mismo efecto (fondo punteado +
|
||||||
fotos estilo polaroid) con CSS y fotos reales de producto ya
|
fotos estilo polaroid) con CSS y fotos reales de producto ya
|
||||||
existentes, en azul/amarillo de marca en vez del violeta original
|
existentes, en azul/amarillo de marca en vez del violeta original
|
||||||
|
|||||||
@@ -65,7 +65,7 @@ spec:
|
|||||||
memory: 64Mi
|
memory: 64Mi
|
||||||
|
|
||||||
- name: migrations
|
- name: migrations
|
||||||
image: gitea.cruzcloud.net/devops/ecommerce-medusa:v1.0.233
|
image: gitea.cruzcloud.net/devops/ecommerce-medusa:v1.0.239
|
||||||
imagePullPolicy: IfNotPresent
|
imagePullPolicy: IfNotPresent
|
||||||
command:
|
command:
|
||||||
- node
|
- node
|
||||||
@@ -86,7 +86,7 @@ spec:
|
|||||||
|
|
||||||
containers:
|
containers:
|
||||||
- name: app
|
- name: app
|
||||||
image: gitea.cruzcloud.net/devops/ecommerce-medusa:v1.0.233
|
image: gitea.cruzcloud.net/devops/ecommerce-medusa:v1.0.239
|
||||||
imagePullPolicy: IfNotPresent
|
imagePullPolicy: IfNotPresent
|
||||||
envFrom:
|
envFrom:
|
||||||
- configMapRef:
|
- configMapRef:
|
||||||
|
|||||||
@@ -4,15 +4,33 @@ import Image from "next/image";
|
|||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { ArrowRight, BadgePercent, Sparkles } from "lucide-react";
|
import { ArrowRight, BadgePercent, Sparkles } from "lucide-react";
|
||||||
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
|
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useMemo, useState } from "react";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
|
import type { Product } from "@/lib/headless/types";
|
||||||
|
|
||||||
// ADR 0008 sub-fase 4: hero azul con dots de paginacion (carrusel), en vez
|
// ADR 0008 sub-fase 4: hero azul con dots de paginacion (carrusel), en vez
|
||||||
// del bento estatico de 3 tarjetas en fucsia/rojo/violeta del esquema
|
// del bento estatico de 3 tarjetas en fucsia/rojo/violeta del esquema
|
||||||
// arcoiris original. Un slide a la vez, fondo azul de marca en los tres,
|
// arcoiris original. Un slide a la vez, fondo azul de marca en los tres,
|
||||||
// para leerse como una sola pieza de marca en vez de 3 bloques de colores
|
// para leerse como una sola pieza de marca en vez de 3 bloques de colores
|
||||||
// distintos.
|
// distintos.
|
||||||
const slides = [
|
//
|
||||||
|
// ADR 0010: los slides ya no son un array hardcodeado -- se derivan de
|
||||||
|
// productos activos reales del catalogo (pasados por prop desde
|
||||||
|
// app/page.tsx, que ya trae `products` del backend). Fallback estatico
|
||||||
|
// solo para el caso borde de una tienda sin ningun producto activo.
|
||||||
|
type Slide = {
|
||||||
|
id: string;
|
||||||
|
badge: string;
|
||||||
|
icon: typeof Sparkles;
|
||||||
|
title: string;
|
||||||
|
subtitle: string;
|
||||||
|
description: string;
|
||||||
|
href: string;
|
||||||
|
image: string;
|
||||||
|
imageAlt: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const FALLBACK_SLIDES: Slide[] = [
|
||||||
{
|
{
|
||||||
id: "celebracion",
|
id: "celebracion",
|
||||||
badge: "Celebración ARI",
|
badge: "Celebración ARI",
|
||||||
@@ -48,17 +66,46 @@ const slides = [
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
const MAX_SLIDES = 5;
|
||||||
const AUTOPLAY_MS = 6000;
|
const AUTOPLAY_MS = 6000;
|
||||||
|
|
||||||
export function HeroCarousel() {
|
function slidesFromProducts(products: Product[]): Slide[] {
|
||||||
|
return products.slice(0, MAX_SLIDES).map((product) => {
|
||||||
|
const hasDiscount = product.compareAtPrice !== null && product.compareAtPrice > (product.price ?? 0);
|
||||||
|
const pctOff = hasDiscount && product.price !== null
|
||||||
|
? Math.round(100 - (product.price / (product.compareAtPrice as number)) * 100)
|
||||||
|
: 0;
|
||||||
|
return {
|
||||||
|
id: product.id,
|
||||||
|
badge: hasDiscount ? `${pctOff}% OFF` : product.collection ? `Colección ${product.collection}` : "Destacado",
|
||||||
|
icon: hasDiscount ? BadgePercent : Sparkles,
|
||||||
|
title: product.name,
|
||||||
|
subtitle: product.priceLabel,
|
||||||
|
description: product.shortDescription || "Descúbrelo en la tienda ARI Shopping.",
|
||||||
|
href: `/product/${product.slug}`,
|
||||||
|
image: product.image,
|
||||||
|
imageAlt: product.name,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function HeroCarousel({ products }: { products: Product[] }) {
|
||||||
const reduceMotion = useReducedMotion();
|
const reduceMotion = useReducedMotion();
|
||||||
const [index, setIndex] = useState(0);
|
const [index, setIndex] = useState(0);
|
||||||
|
const slides = useMemo(() => {
|
||||||
|
const fromProducts = slidesFromProducts(products);
|
||||||
|
return fromProducts.length > 0 ? fromProducts : FALLBACK_SLIDES;
|
||||||
|
}, [products]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (reduceMotion) return;
|
if (reduceMotion) return;
|
||||||
const timer = setInterval(() => setIndex((current) => (current + 1) % slides.length), AUTOPLAY_MS);
|
const timer = setInterval(() => setIndex((current) => (current + 1) % slides.length), AUTOPLAY_MS);
|
||||||
return () => clearInterval(timer);
|
return () => clearInterval(timer);
|
||||||
}, [reduceMotion]);
|
}, [reduceMotion, slides.length]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (index >= slides.length) setIndex(0);
|
||||||
|
}, [slides.length, index]);
|
||||||
|
|
||||||
const slide = slides[index];
|
const slide = slides[index];
|
||||||
if (!slide) return null;
|
if (!slide) return null;
|
||||||
|
|||||||
@@ -55,34 +55,47 @@ export function Navbar({ products, categories }: { products: Product[]; categori
|
|||||||
|
|
||||||
<div className="relative overflow-visible bg-white">
|
<div className="relative overflow-visible bg-white">
|
||||||
<div className="pointer-events-none absolute inset-x-0 top-0 h-1 bg-ari-coral-claro" />
|
<div className="pointer-events-none absolute inset-x-0 top-0 h-1 bg-ari-coral-claro" />
|
||||||
<div className="mx-auto grid max-w-7xl grid-cols-[auto_1fr_auto] items-center gap-4 px-4 py-4 lg:gap-8">
|
{/* ADR 0010: en mobile/tablet el buscador se movio a una segunda
|
||||||
{/* Isotipo circular con icono + wordmark integrados (como en la
|
fila a todo el ancho, debajo de logo+iconos (antes competia por
|
||||||
version previa a ADR 0008), pedido explicito del usuario en
|
espacio en una sola fila con el grid_[auto_1fr_auto] y quedaba
|
||||||
vez del lockup rectangular. logo-ari.svg (rectangular) se
|
angosto/recortado). En desktop (lg+) se mantiene la fila unica
|
||||||
mantiene para el footer. */}
|
original -- ahi sobra espacio y partirla en dos solo alargaria
|
||||||
<Link href="/" aria-label="ARI shopping" className="shrink-0">
|
el header sin necesidad. */}
|
||||||
{/* eslint-disable-next-line @next/next/no-img-element -- vector propio, next/image no optimiza SVG sin habilitar dangerouslyAllowSVG */}
|
<div className="mx-auto max-w-7xl px-4 py-3 lg:py-4">
|
||||||
<img src="/images/brand/logo-ari-circular.svg" alt="ARI shopping" className="size-16 lg:size-20" width={200} height={200} />
|
<div className="flex items-center justify-between gap-4 lg:grid lg:grid-cols-[auto_1fr_auto] lg:gap-8">
|
||||||
</Link>
|
{/* Isotipo circular con icono + wordmark integrados (como en la
|
||||||
<PredictiveSearch />
|
version previa a ADR 0008), pedido explicito del usuario en
|
||||||
<div className="flex items-center gap-2">
|
vez del lockup rectangular. logo-ari.svg (rectangular) se
|
||||||
{/* Antes escondido en mobile (solo alcanzable desde el menu
|
mantiene para el footer. */}
|
||||||
hamburguesa) -- pedido explicito del usuario: visible
|
<Link href="/" aria-label="ARI shopping" className="shrink-0">
|
||||||
siempre en el header, con un punto verde cuando hay sesion
|
{/* eslint-disable-next-line @next/next/no-img-element -- vector propio, next/image no optimiza SVG sin habilitar dangerouslyAllowSVG */}
|
||||||
iniciada (mismo patron que el badge de cantidad del
|
<img src="/images/brand/logo-ari-circular.svg" alt="ARI shopping" className="size-16 lg:size-20" width={200} height={200} />
|
||||||
carrito/favoritos, pero de presencia, no de conteo). */}
|
</Link>
|
||||||
<Button variant="outline" size="icon" aria-label={isLoggedIn ? "Mi cuenta (sesión iniciada)" : "Mi cuenta"} className="relative inline-flex border-slate-300 bg-white text-slate-900 hover:border-ari-coral hover:bg-ari-coral/10" onClick={() => setAccountOpen(true)}>
|
<div className="hidden lg:block">
|
||||||
<UserRound />
|
<PredictiveSearch />
|
||||||
{isLoggedIn && <span className="absolute -right-1 -top-1 size-3 rounded-full border-2 border-white bg-emerald-500" />}
|
</div>
|
||||||
</Button>
|
<div className="flex items-center gap-2">
|
||||||
<Button variant="outline" size="icon" aria-label={`Favoritos: ${wishlistCount}`} className="relative hidden border-slate-300 bg-white text-slate-900 hover:border-ari-coral hover:bg-ari-coral/10 sm:inline-flex" onClick={openWishlist}>
|
{/* Antes escondido en mobile (solo alcanzable desde el menu
|
||||||
<Heart />
|
hamburguesa) -- pedido explicito del usuario: visible
|
||||||
{wishlistCount > 0 && <span className="absolute -right-1.5 -top-1.5 grid size-5 place-items-center rounded-full bg-ari-marino text-[10px] font-black text-white">{wishlistCount}</span>}
|
siempre en el header, con un punto verde cuando hay sesion
|
||||||
</Button>
|
iniciada (mismo patron que el badge de cantidad del
|
||||||
<Button variant="primary" size="icon" onClick={openCart} aria-label={`Carrito con ${count} productos`} className="relative">
|
carrito/favoritos, pero de presencia, no de conteo). */}
|
||||||
<ShoppingCart />
|
<Button variant="outline" size="icon" aria-label={isLoggedIn ? "Mi cuenta (sesión iniciada)" : "Mi cuenta"} className="relative inline-flex border-slate-300 bg-white text-slate-900 hover:border-ari-coral hover:bg-ari-coral/10" onClick={() => setAccountOpen(true)}>
|
||||||
<span className="absolute -right-2 -top-2 grid size-6 place-items-center rounded-full bg-ari-marino text-[11px] font-black text-white">{count}</span>
|
<UserRound />
|
||||||
</Button>
|
{isLoggedIn && <span className="absolute -right-1 -top-1 size-3 rounded-full border-2 border-white bg-emerald-500" />}
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" size="icon" aria-label={`Favoritos: ${wishlistCount}`} className="relative hidden border-slate-300 bg-white text-slate-900 hover:border-ari-coral hover:bg-ari-coral/10 sm:inline-flex" onClick={openWishlist}>
|
||||||
|
<Heart />
|
||||||
|
{wishlistCount > 0 && <span className="absolute -right-1.5 -top-1.5 grid size-5 place-items-center rounded-full bg-ari-marino text-[10px] font-black text-white">{wishlistCount}</span>}
|
||||||
|
</Button>
|
||||||
|
<Button variant="primary" size="icon" onClick={openCart} aria-label={`Carrito con ${count} productos`} className="relative">
|
||||||
|
<ShoppingCart />
|
||||||
|
<span className="absolute -right-2 -top-2 grid size-6 place-items-center rounded-full bg-ari-marino text-[11px] font-black text-white">{count}</span>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-3 lg:hidden">
|
||||||
|
<PredictiveSearch />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -25,7 +25,7 @@ spec:
|
|||||||
runAsUser: 1001
|
runAsUser: 1001
|
||||||
containers:
|
containers:
|
||||||
- name: app
|
- name: app
|
||||||
image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.232
|
image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.240
|
||||||
env:
|
env:
|
||||||
- name: HEADLESS_PROVIDER
|
- name: HEADLESS_PROVIDER
|
||||||
value: medusa
|
value: medusa
|
||||||
|
|||||||
Generated
+54
-41
@@ -16,7 +16,7 @@
|
|||||||
"clsx": "2.1.1",
|
"clsx": "2.1.1",
|
||||||
"lucide-react": "0.544.0",
|
"lucide-react": "0.544.0",
|
||||||
"motion": "12.23.24",
|
"motion": "12.23.24",
|
||||||
"next": "15.5.10",
|
"next": "15.5.24",
|
||||||
"react": "19.1.5",
|
"react": "19.1.5",
|
||||||
"react-dom": "19.1.5",
|
"react-dom": "19.1.5",
|
||||||
"tailwind-merge": "3.3.1",
|
"tailwind-merge": "3.3.1",
|
||||||
@@ -728,9 +728,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@next/env": {
|
"node_modules/@next/env": {
|
||||||
"version": "15.5.10",
|
"version": "15.5.24",
|
||||||
"resolved": "https://packages.applied-caas-gateway1.internal.api.openai.org/artifactory/api/npm/npm-public/@next/env/-/env-15.5.10.tgz",
|
"resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.24.tgz",
|
||||||
"integrity": "sha512-plg+9A/KoZcTS26fe15LHg+QxReTazrIOoKKUC3Uz4leGGeNPgLHdevVraAAOX0snnUs3WkRx3eUQpj9mreG6A==",
|
"integrity": "sha512-mBDF7T0XKZjs9SpUAl0buizVO+O02ULjOvWX8o/AZo/5AGw/UAS1Zzcylmd4pqbftzmKQi+L/nB4jgBYKEAl5Q==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/@next/eslint-plugin-next": {
|
"node_modules/@next/eslint-plugin-next": {
|
||||||
@@ -744,9 +744,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@next/swc-darwin-arm64": {
|
"node_modules/@next/swc-darwin-arm64": {
|
||||||
"version": "15.5.7",
|
"version": "15.5.24",
|
||||||
"resolved": "https://packages.applied-caas-gateway1.internal.api.openai.org/artifactory/api/npm/npm-public/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.7.tgz",
|
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.24.tgz",
|
||||||
"integrity": "sha512-IZwtxCEpI91HVU/rAUOOobWSZv4P2DeTtNaCdHqLcTJU4wdNXgAySvKa/qJCgR5m6KI8UsKDXtO2B31jcaw1Yw==",
|
"integrity": "sha512-AGdNLvxZNY6eR2iSnV+6wUa8CiHTMr4F7g3uHH7fT4ICIJBE00R9u4tzN/Vuwsw0cOi8MTD2HJcTCb6siMH88Q==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
@@ -760,9 +760,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@next/swc-darwin-x64": {
|
"node_modules/@next/swc-darwin-x64": {
|
||||||
"version": "15.5.7",
|
"version": "15.5.24",
|
||||||
"resolved": "https://packages.applied-caas-gateway1.internal.api.openai.org/artifactory/api/npm/npm-public/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.7.tgz",
|
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.24.tgz",
|
||||||
"integrity": "sha512-UP6CaDBcqaCBuiq/gfCEJw7sPEoX1aIjZHnBWN9v9qYHQdMKvCKcAVs4OX1vIjeE+tC5EIuwDTVIoXpUes29lg==",
|
"integrity": "sha512-9HrQajBMmGcrrrvDfRimiCrbAPh3E6uHJmwBovYr6Yrmi9p9PZqI876BrXX280wICh3o2XwUlp4blkB0NNBqFg==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
@@ -776,12 +776,15 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@next/swc-linux-arm64-gnu": {
|
"node_modules/@next/swc-linux-arm64-gnu": {
|
||||||
"version": "15.5.7",
|
"version": "15.5.24",
|
||||||
"resolved": "https://packages.applied-caas-gateway1.internal.api.openai.org/artifactory/api/npm/npm-public/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.7.tgz",
|
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.24.tgz",
|
||||||
"integrity": "sha512-NCslw3GrNIw7OgmRBxHtdWFQYhexoUCq+0oS2ccjyYLtcn1SzGzeM54jpTFonIMUjNbHmpKpziXnpxhSWLcmBA==",
|
"integrity": "sha512-rl9LSfE75si0WT3cDgdUC1XYCKS+TgxC+/IjitmeycrAG18X/plIP1/vy8dd/HPycYcIvE688PD7FuvEAiEAew==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
|
"libc": [
|
||||||
|
"glibc"
|
||||||
|
],
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -792,12 +795,15 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@next/swc-linux-arm64-musl": {
|
"node_modules/@next/swc-linux-arm64-musl": {
|
||||||
"version": "15.5.7",
|
"version": "15.5.24",
|
||||||
"resolved": "https://packages.applied-caas-gateway1.internal.api.openai.org/artifactory/api/npm/npm-public/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.7.tgz",
|
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.24.tgz",
|
||||||
"integrity": "sha512-nfymt+SE5cvtTrG9u1wdoxBr9bVB7mtKTcj0ltRn6gkP/2Nu1zM5ei8rwP9qKQP0Y//umK+TtkKgNtfboBxRrw==",
|
"integrity": "sha512-TlNAnpsjxSF3aAUtqnfmtXXf8m9sIDBlmF3c7bTAlnshUYu2U0OxN2uf5d0gcFwqHVEdivJNBcCaqNOwPGNimw==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
|
"libc": [
|
||||||
|
"musl"
|
||||||
|
],
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -808,12 +814,15 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@next/swc-linux-x64-gnu": {
|
"node_modules/@next/swc-linux-x64-gnu": {
|
||||||
"version": "15.5.7",
|
"version": "15.5.24",
|
||||||
"resolved": "https://packages.applied-caas-gateway1.internal.api.openai.org/artifactory/api/npm/npm-public/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.7.tgz",
|
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.24.tgz",
|
||||||
"integrity": "sha512-hvXcZvCaaEbCZcVzcY7E1uXN9xWZfFvkNHwbe/n4OkRhFWrs1J1QV+4U1BN06tXLdaS4DazEGXwgqnu/VMcmqw==",
|
"integrity": "sha512-7dwtlhr0SLndqTG1z9ncRkbJswDZiKWlxzFyXDvJ2RDZRDRHp8zyMJ4D9UH/FgnQeXxxB6gZy2pMcIUoNKQ4pA==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
|
"libc": [
|
||||||
|
"glibc"
|
||||||
|
],
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -824,12 +833,15 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@next/swc-linux-x64-musl": {
|
"node_modules/@next/swc-linux-x64-musl": {
|
||||||
"version": "15.5.7",
|
"version": "15.5.24",
|
||||||
"resolved": "https://packages.applied-caas-gateway1.internal.api.openai.org/artifactory/api/npm/npm-public/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.7.tgz",
|
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.24.tgz",
|
||||||
"integrity": "sha512-4IUO539b8FmF0odY6/SqANJdgwn1xs1GkPO5doZugwZ3ETF6JUdckk7RGmsfSf7ws8Qb2YB5It33mvNL/0acqA==",
|
"integrity": "sha512-kGZxM+WhkYs0276lFrMkj7PRtXT3Btp6cwvfSO/cCVLxJJttB5Ccnl2niaCgUja8HgSbEVnMHpg3FJWoOJ9e/g==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
|
"libc": [
|
||||||
|
"musl"
|
||||||
|
],
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -840,9 +852,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@next/swc-win32-arm64-msvc": {
|
"node_modules/@next/swc-win32-arm64-msvc": {
|
||||||
"version": "15.5.7",
|
"version": "15.5.24",
|
||||||
"resolved": "https://packages.applied-caas-gateway1.internal.api.openai.org/artifactory/api/npm/npm-public/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.7.tgz",
|
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.24.tgz",
|
||||||
"integrity": "sha512-CpJVTkYI3ZajQkC5vajM7/ApKJUOlm6uP4BknM3XKvJ7VXAvCqSjSLmM0LKdYzn6nBJVSjdclx8nYJSa3xlTgQ==",
|
"integrity": "sha512-jBDDkZ/qKAqkWivWDMkJSXUzbzV0QKRBKJjEHUAvSB97Hzw7NLzJ6yV56Lts/wjir7s4P31GYgpbS6ZL+hasAA==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
@@ -856,9 +868,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@next/swc-win32-x64-msvc": {
|
"node_modules/@next/swc-win32-x64-msvc": {
|
||||||
"version": "15.5.7",
|
"version": "15.5.24",
|
||||||
"resolved": "https://packages.applied-caas-gateway1.internal.api.openai.org/artifactory/api/npm/npm-public/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.7.tgz",
|
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.24.tgz",
|
||||||
"integrity": "sha512-gMzgBX164I6DN+9/PGA+9dQiwmTkE4TloBNx8Kv9UiGARsr9Nba7IpcBRA1iTV9vwlYnrE3Uy6I7Aj6qLjQuqw==",
|
"integrity": "sha512-JqtwjvvorjacQ0spgjmUJoxySoYgPwdT1sFdQ0/zmW4iMlP2hjYlCoJIyS7o6Epb4Fug8eco3HXFoBDUCDeH7Q==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
@@ -5394,11 +5406,12 @@
|
|||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/next": {
|
"node_modules/next": {
|
||||||
"version": "15.5.10",
|
"version": "15.5.24",
|
||||||
"resolved": "https://packages.applied-caas-gateway1.internal.api.openai.org/artifactory/api/npm/npm-public/next/-/next-15.5.10.tgz",
|
"resolved": "https://registry.npmjs.org/next/-/next-15.5.24.tgz",
|
||||||
"integrity": "sha512-r0X65PNwyDDyOrWNKpQoZvOatw7BcsTPRKdwEqtc9cj3wv7mbBIk9tKed4klRaFXJdX0rugpuMTHslDrAU1bBg==",
|
"integrity": "sha512-Y+xn8EQCoC3ZbsFPyzE+tE8XOdrWeUdUF7NeXbmg9DsgAxl5UYxlsrvgVESHTyTGigoTa1bCUrxn70F5bqt0Gw==",
|
||||||
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@next/env": "15.5.10",
|
"@next/env": "15.5.24",
|
||||||
"@swc/helpers": "0.5.15",
|
"@swc/helpers": "0.5.15",
|
||||||
"caniuse-lite": "^1.0.30001579",
|
"caniuse-lite": "^1.0.30001579",
|
||||||
"postcss": "8.4.31",
|
"postcss": "8.4.31",
|
||||||
@@ -5411,15 +5424,15 @@
|
|||||||
"node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
|
"node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
|
||||||
},
|
},
|
||||||
"optionalDependencies": {
|
"optionalDependencies": {
|
||||||
"@next/swc-darwin-arm64": "15.5.7",
|
"@next/swc-darwin-arm64": "15.5.24",
|
||||||
"@next/swc-darwin-x64": "15.5.7",
|
"@next/swc-darwin-x64": "15.5.24",
|
||||||
"@next/swc-linux-arm64-gnu": "15.5.7",
|
"@next/swc-linux-arm64-gnu": "15.5.24",
|
||||||
"@next/swc-linux-arm64-musl": "15.5.7",
|
"@next/swc-linux-arm64-musl": "15.5.24",
|
||||||
"@next/swc-linux-x64-gnu": "15.5.7",
|
"@next/swc-linux-x64-gnu": "15.5.24",
|
||||||
"@next/swc-linux-x64-musl": "15.5.7",
|
"@next/swc-linux-x64-musl": "15.5.24",
|
||||||
"@next/swc-win32-arm64-msvc": "15.5.7",
|
"@next/swc-win32-arm64-msvc": "15.5.24",
|
||||||
"@next/swc-win32-x64-msvc": "15.5.7",
|
"@next/swc-win32-x64-msvc": "15.5.24",
|
||||||
"sharp": "^0.34.3"
|
"sharp": "^0.34.3 || ^0.35.3"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@opentelemetry/api": "^1.1.0",
|
"@opentelemetry/api": "^1.1.0",
|
||||||
|
|||||||
@@ -19,7 +19,7 @@
|
|||||||
"clsx": "2.1.1",
|
"clsx": "2.1.1",
|
||||||
"lucide-react": "0.544.0",
|
"lucide-react": "0.544.0",
|
||||||
"motion": "12.23.24",
|
"motion": "12.23.24",
|
||||||
"next": "15.5.10",
|
"next": "15.5.24",
|
||||||
"react": "19.1.5",
|
"react": "19.1.5",
|
||||||
"react-dom": "19.1.5",
|
"react-dom": "19.1.5",
|
||||||
"tailwind-merge": "3.3.1",
|
"tailwind-merge": "3.3.1",
|
||||||
|
|||||||
Reference in new issue
Block a user