Tienda

Ruta: /student?tab=shop · Auth: Magic link (alumno)

Pagina de compra de servicios del profesor. Muestra los paquetes disponibles con precios y redirige a Stripe Checkout para el pago. El profesor controla que servicios se muestran.

Que hay

Grid de servicios

Grid responsive (3 columnas lg, 2 sm, 1 movil) con tarjetas de servicio:

Nombre del servicio + headline
Descripcion completa del servicio
Numero de creditos
Dias de validez (si aplica)
Precio grande + desglose por clase (ej: “$19.80 por clase”)
Boton CTA

Flujo de compra

Servicios de pago: Click en CTA → POST /student/enrollments → redirect a Stripe Checkout → retorno al portal
Servicios gratuitos: Click en CTA → enrollment creado inmediatamente → toast de exito

Codigos de descuento

Input para codigo de descuento en el flujo de compra:

Validacion via API (POST /public/:slug/validate-discount, rate-limited 10/min)
Precio original tachado con precio final visible
Descuento server-side antes de Stripe (no usa Stripe Coupons)
Soporte para porcentaje y monto fijo, limites de uso, fecha de vigencia

Gestion de suscripciones

Boton de acceso al Stripe Customer Portal para gestionar suscripciones activas (cancelar, ver historial de pagos, cambiar metodo de pago).

Formatos de precio

Usa Intl.NumberFormat con la moneda del servicio
Desglose por clase: precio / creditos

Estados especiales

Loading: 3 tarjetas skeleton
Vacio: Icono de paquete + “No hay paquetes disponibles”
Impersonacion: Aviso ambar + boton deshabilitado
Error TRIAL_REQUIRED: Enlace directo a la pagina de booking para hacer el trial
Stripe redirect timeout: 10s via STRIPE_REDIRECT_TIMEOUT_MS, resetea estado

Referencia tecnica

Archivos clave

Archivo	Proposito
`apps/app/src/components/student/tab-shop.tsx`	Tab de tienda

API

Endpoint	Metodo	Proposito
`/student/teacher`	GET	Info del profesor + servicios disponibles
`/student/enrollments`	POST	Crear enrollment (retorna `checkoutUrl` si pago)
`/public/:slug/validate-discount`	POST	Validar codigo de descuento