Dettai · NeodatenPay · Storefront comprador
Escaparate de pagos
los 13 componentes del comprador, en todos sus estados
Testing estético del flujo de compra (OTP · carrito · checkout · retorno de pago · perfil) sin backend. Cada instancia corre en modo demo: enciende `Demo` y elige `Estado demo` para previsualizar un estado con datos fijos (fixtures de las boutiques ficticias Lumina y Aurelia) — cero red, cero sesión, cero localStorage. En las páginas reales el modo demo va apagado por default, así que esta vista no cambia nada del sitio publicado.
13 componentes
modo demo · sin red
fixtures Lumina · Aurelia
default demo=off
01
Sesión · login sin contraseña
ModalOtpComprador
El gate OTP del comprador: correo → código de 6 dígitos → nombre (solo en alta) → sesión lista. Se monta como wrapper `ModalOtpCompradorDemo` en variante inline. Aquí en demo cada paso se previsualiza sin enviar nada.
Monta
ModalOtpCompradorDemo (default export) · variante inline · demo=true
Estados
Correo · Código · Verificando · Código incorrecto · Nombre (alta) · Sesión lista
Nota
El export nombrado ModalOtpComprador lo consumen los gates de sesión; este wrapper es solo para el escaparate.
▾ Vista en vivo · 6 estados
▾ Correo
▾ Código
Revisa tu correo
Te enviamos un código de 6 dígitos a fernanda@example.com.
▾ Verificando
Revisa tu correo
Te enviamos un código de 6 dígitos a fernanda@example.com.
Verificando…
▾ Código incorrecto
Revisa tu correo
Te enviamos un código de 6 dígitos a fernanda@example.com.
▾ Nombre (alta)
▾ Sesión lista
Sesión lista
02
Carrito · indicador de nav
BadgeCarrito
La píldora de conteo del carrito que vive en la nav. Sin artículos desaparece; con artículos muestra el número total sumando todas las boutiques.
Estados
Sin artículos (oculto) · Con artículos
Nota
En demo el conteo sale del fixture del carrito; sin red al store real.
▾ Vista en vivo · 2 estados
03
Carrito · línea de producto
ItemCarrito
Una línea del carrito: snapshot del producto, selecciones legibles, stepper de cantidad y "Quitar" con confirmación inline. El thumbnail es un placeholder editorial (el snapshot del backend no trae imagen confiable).
Estados
Normal · Con opciones · Actualizando
Nota
En demo los botones no mutan; "Actualizando" simula una mutación en vuelo.
▾ Vista en vivo · 3 estados
▾ Normal
▾ Con opciones
▾ Actualizando
04
Carrito · grupo por boutique
GrupoBoutiqueCarrito
El carrito de UNA boutique dentro de /carrito: header con nombre, items, subtotal y "Pagar esta compra". El backend cobra por-boutique, así que cada grupo es una unidad de pago completa.
Estados
Un producto · Varios productos
Nota
En demo carrito y boutique salen de fixtures; los steppers no pegan red.
▾ Vista en vivo · 2 estados
▾ Varios productos
▾ Un producto
05
Carrito · página /carrito
CarritoDettai
La página /carrito completa: carritos server-side agrupados por boutique, cada grupo con su subtotal y su pago. Footer global con el total de la bolsa. Incluye gate de sesión, carga, vacío y error.
Estados
Cargando · Vacío · Una boutique · Varias boutiques · Error · Sin sesión
Nota
En demo no refresca el store; los grupos salen de fixtures de Lumina y Aurelia.
▾ Vista en vivo · 6 estados
▾ Una boutique
Mi carrito
▾ Varias boutiques
Mi carrito
▾ Cargando
Mi carrito
▾ Vacío
Mi carrito
Aún no llevas nada
Explora la tienda y agrega lo que te enamore — aquí te lo guardamos.
Ir a la tienda▾ Error
Mi carrito
http · 500 5xx — error del backend. El `body` trae el detalle; revisa los logs del servidor.▾ Sin sesión
Mi carrito
Tu carrito te espera
Entra con tu correo para ver tu carrito — se guarda en tu cuenta y te sigue en cualquier dispositivo.
06
Checkout · dirección de envío
SelectorDireccion
Radio-cards de las direcciones guardadas (la predeterminada viene primera y se preselecciona) más "Nueva dirección" que abre el FormDireccion inline. Es el selector que usa el checkout.
Estados
Con direcciones · Sin direcciones · Cargando · Error
Nota
En demo la selección se maneja localmente y no fetchea direcciones reales.
▾ Vista en vivo · 4 estados
▾ Con direcciones
▾ Sin direcciones
Aún no tienes direcciones guardadas — agrega la primera para recibir tu compra.
▾ Cargando
▾ Error
http · 500 5xx — error del backend. El `body` trae el detalle; revisa los logs del servidor.07
Checkout · alta/edición de dirección
FormDireccion
Alta/edición de dirección estilo ML/Amazon: autocompletar por CP (SEPOMEX), colonia en select, guardar como predeterminada y validación espejo del DTO. Lo comparten el checkout y el perfil.
Estados
En blanco · CP autocompletado · Edición
Nota
En demo el CP no consulta SEPOMEX y guardar no pega red; "CP autocompletado" siembra colonias.
▾ Vista en vivo · 3 estados
▾ En blanco
▾ CP autocompletado
▾ Edición
08
Checkout · página /checkout
CheckoutDettai
La página /checkout?org= : resumen del carrito de esa boutique, dirección y "Pagar" (redirección a la pasarela). Cobra una boutique completa por pago; el botón real es irreversible, en demo nunca se dispara.
Estados
Sin ?org= · Cargando · Resumen · Carrito vacío · Sin sesión · Boutique sin pagos · Redirigiendo
Nota
En demo el pago (POST /payments/checkout) nunca corre; "Redirigiendo" se muestra vía estado, no por el botón.
▾ Vista en vivo · 7 estados
▾ Resumen
Finalizar compra
Dirección de envío
Tu compra en Lumina Joyería
Pago seguro procesado por NeodatenPay. Te llevaremos a la pasarela para pagar con tarjeta.
▾ Sin ?org=
Finalizar compra
▾ Cargando
Finalizar compra
Dirección de envío
Tu compra en Lumina Joyería
Pago seguro procesado por NeodatenPay. Te llevaremos a la pasarela para pagar con tarjeta.
▾ Carrito vacío
Finalizar compra
Dirección de envío
Tu compra en Lumina Joyería
Este carrito está vacío. Volver a mi carrito →
▾ Sin sesión
Finalizar compra
▾ Boutique sin pagos
Finalizar compra
▾ Redirigiendo
Te llevamos a la pasarela segura…
No cierres esta ventana.
09
Pago · retorno de la pasarela
RetornoPagoDettai
La página /pago/retorno: confirma el resultado del pago al volver de la pasarela. El webhook es la fuente de verdad; esta página solo refleja el estatus (reconcile idempotente) con polling para el estado pendiente.
Estados
Verificando · Pago exitoso · En proceso · Proceso agotado · Pago fallido · Link expirado · Pago cancelado · Sin referencia
Nota
En demo no llama reconcile ni polea; el estado se pinta directo desde demoEstado.
▾ Vista en vivo · 8 estados
▾ Pago exitoso
¡Pago exitoso!
Tu pago de $1,430 se confirmó y tu pedido ya está con la boutique.Pedido #DEMO0412
▾ Verificando
Confirmando tu pago
Estamos verificando con la pasarela. Esto toma unos segundos — no cierres esta ventana.
▾ En proceso
Confirmando tu pago
Estamos verificando con la pasarela. Esto toma unos segundos — no cierres esta ventana.
▾ Proceso agotado
Tu pago sigue en proceso
La pasarela aún no confirma. En cuanto lo haga, tu pedido aparecerá en Mis compras — te lo mostraremos ahí.
▾ Pago fallido
El pago no se completó
La pasarela no pudo procesar el cargo. No se realizó ningún cobro — puedes intentarlo de nuevo.
▾ Link expirado
El link de pago expiró
El link venció sin completarse. Tu carrito sigue guardado — genera un pago nuevo cuando quieras.
▾ Pago cancelado
No completaste el pago
No hay problema: no se realizó ningún cobro y tu carrito sigue guardado tal cual.
▾ Sin referencia
No pudimos identificar este pago
No encontramos la referencia del pago en este navegador. Si pagaste, no te preocupes: tu pedido se registra igual y aparecerá en Mis compras.
10
Perfil · tab direcciones
DireccionesPerfil
El tab "Direcciones" de /profile: cards con acciones (editar con el mismo FormDireccion del checkout, quitar con confirmación inline, "hacer predeterminada") más alta. El BE garantiza una sola predeterminada.
Estados
Con direcciones · Sin direcciones · Cargando · Error
Nota
En demo las acciones (default/quitar) no pegan red; las direcciones salen de fixtures.
▾ Vista en vivo · 4 estados
▾ Con direcciones
▾ Sin direcciones
Guarda tu primera dirección para comprar más rápido — en el checkout solo la eliges y listo.
▾ Cargando
▾ Error
http · 500 5xx — error del backend. El `body` trae el detalle; revisa los logs del servidor.11
Perfil · página /profile/orders
MisComprasDettai
La página /profile/orders: el historial de compras del comprador. Card por orden (fecha, boutique, total, chip de estatus) con detalle expandible: items, dirección de envío, id copiable y contacto de la boutique.
Estados
Cargando · Con compras · Sin compras · Detalle expandido · Error
Nota
En demo las órdenes salen de fixtures; "Detalle expandido" abre la primera card.
▾ Vista en vivo · 5 estados
▾ Con compras
Mis compras
▾ Detalle expandido
Mis compras
▾ Cargando
Mis compras
▾ Sin compras
Mis compras
Tu primera compra te está esperando
Ir a la tienda▾ Error
Mis compras
http · 500 5xx — error del backend. El `body` trae el detalle; revisa los logs del servidor.12
Perfil · página /profile
PerfilDettai
La página /profile: configuración del comprador — tabs Mi perfil (nombre/apellido/teléfono, correo de solo lectura) y Direcciones (CRUD) — con gate de sesión OTP. "Mis compras" vive en su propia página.
Estados
Tab perfil · Tab direcciones · Sin sesión
Nota
En demo el perfil sale de fixtures; guardar/cerrar sesión no pegan red.
▾ Vista en vivo · 3 estados
▾ Tab perfil
Mi perfil
▾ Tab direcciones
Mi perfil
▾ Sin sesión
Mi perfil
13
Perfil · contacto en la orden
ContactoBoutiqueOrden
Bloque "¿Dudas con tu pedido?" dentro del detalle de una orden en Mis compras: canales públicos del brand (WhatsApp con mensaje prellenado, Llamar, Correo). Sin canales visibles, el bloque desaparece.
Estados
Todos los canales · Solo WhatsApp · Sin canales (oculto)
Nota
En demo el brand sale de fixtures; "Sin canales" hace que el componente devuelva null (no pinta nada) — es correcto.
▾ Vista en vivo · 3 estados
14
Carrito · overlay global
DrawerCarrito
El carrito como overlay flotante oscuro, accesible desde el icono de carrito de la nav en cualquier pagina. Vista rapida: filas compactas con stepper y quitar, subtotal, copy fiscal y un solo boton "Finalizar compra". El boton de expandir (esquina superior) lleva a la pagina /carrito completa, donde viven las acciones detalladas.
Estados
Una boutique · Varias boutiques · Vacio · Sin sesion · Cargando · Error
Nota
En demo el panel se pinta INLINE (sin portal ni scrim), para poder verlo en el canvas. En el sitio publicado el icono de carrito del nav lo abre como overlay flotante desde la derecha. El CTA unico "Finalizar compra" ya esta hecho para el pago unico multi-boutique (seam PAGO_UNICO_DISPONIBLE).
▾ Vista en vivo · 6 estados
▾ Una boutique
▾ Varias boutiques
▾ Vacio
▾ Sin sesion
▾ Cargando
▾ Error