diff --git a/AGENTS.md b/AGENTS.md index 7e9f804..552c6da 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -193,3 +193,51 @@ await getAvailability('my-club', { date: '2026-04-20' }); 1. Create `lib/api/resources/[resource].ts` 2. Export functions using `http` from `../http` 3. Add exports in `lib/api/index.ts` + +## Email Templates + +Todos los emails deben usar la misma estética. El layout compartido está en `apps/backend/src/emails/booking-confirmation.ts`. + +### Layout (`wrapLayout`) + +Exportado como `wrapLayout(content)`. Proporciona: +- Fondo: `#edf7f4` +- Card blanca: `max-width: 520px`, `border-radius: 28px`, `box-shadow: 0 24px 70px rgba(15,23,42,0.12)`, `border: 1px solid rgba(5,9,20,0.1)` +- Playzer favicon: `{APP_BASE_URL}/playzer-favicon-512-transparent.png` (está en `apps/frontend/public/`) + +```typescript +import { wrapLayout } from '@/emails/booking-confirmation'; + +const html = wrapLayout(`...contenido...`); +``` + +### Estructura de cada email + +| Sección | Descripción | +|---------|-------------| +| **Header** | Dos columnas: badge pill a la izquierda + Playzer (favicon + texto) a la derecha. El badge usa `border-radius: 999px`, `padding: 4px 12px`, `font-size: 11px`, `font-weight: 700`, `letter-spacing: 0.14em`, `text-transform: uppercase`. | +| **Card fecha/hora** | Fondo `#f0fdf4`, borde `1px solid rgba(5,150,105,0.3)`, `border-radius: 24px`. Siempre verde aunque el email sea de cancelación. | +| **Grilla detalles** | `border: 1px solid #e5e7eb`, `border-radius: 22px`, dos celdas de 50% con `border-right` en la primera. | +| **Botón CTA** | Tabla con fondo `#059669`, `border-radius: 12px`, link blanco con `padding: 14px 32px`. | +| **Pie** | Sin pie de marca. Solo texto secundario opcional centrado si es necesario. | +| **Sin botones de acción** | Los emails de booking **no** incluyen los botones "Compartir por WhatsApp" ni "Hacer otra reserva". | + +### Colores de badges según estado + +| Estado | Fondo badge | Texto badge | +|--------|-------------|-------------| +| Confirmado | `#f0fdf4` | `#15803d` | +| Cancelado | `#fef2f2` | `#dc2626` | +| No concretado | `#fffbeb` | `#d97706` | +| Neutro (verificación, etc.) | `#f4f4f5` | `#71717a` | + +### Archivos de templates + +| Archivo | Templates | +|---------|-----------| +| `apps/backend/src/emails/booking-confirmation.ts` | `bookingConfirmationHtml`, `bookingCancelledHtml`, `bookingNoShowHtml` + exporta `wrapLayout` | +| `apps/backend/src/lib/auth.ts` | Email de verificación de Better Auth (usa `wrapLayout` inline) | + +### Regla general + +Para emails nuevos: importar `wrapLayout`, construir el HTML interno con ``s, usar la misma estructura de cabecera (badge + Playzer), y nunca incluir el pie "Playzer — Reserva de canchas online". Usar `APP_BASE_URL` para construir URLs absolutas al logo.