Compare commits
2 Commits
93fea8ecad
...
457accfbfa
| Author | SHA1 | Date | |
|---|---|---|---|
|
457accfbfa | ||
|
|
43287a4baa |
48
AGENTS.md
48
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(`<tr>...contenido...</tr>`);
|
||||
```
|
||||
|
||||
### 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 `<tr>`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.
|
||||
|
||||
@@ -49,7 +49,7 @@ const BASE_STYLES = `
|
||||
}
|
||||
`;
|
||||
|
||||
function wrapLayout(content: string) {
|
||||
export function wrapLayout(content: string) {
|
||||
return `<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { wrapLayout } from '@/emails/booking-confirmation';
|
||||
import { dash } from '@better-auth/infra';
|
||||
import { betterAuth } from 'better-auth';
|
||||
import { prismaAdapter } from 'better-auth/adapters/prisma';
|
||||
@@ -34,10 +35,73 @@ export const auth = betterAuth({
|
||||
const verificationUrl = new URL(url);
|
||||
const appUrl = process.env.APP_BASE_URL ?? 'http://localhost:5173';
|
||||
verificationUrl.searchParams.set('callbackURL', appUrl);
|
||||
|
||||
const content = `
|
||||
<tr>
|
||||
<td style="padding:32px 32px 24px;">
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td valign="top">
|
||||
<table role="presentation" cellpadding="0" cellspacing="0" style="display:inline-block;background-color:#f4f4f5;border-radius:999px;padding:4px 12px;">
|
||||
<tr>
|
||||
<td style="font-size:11px;font-weight:700;letter-spacing:0.14em;color:#71717a;text-transform:uppercase;line-height:1.25rem;">
|
||||
Verificación de email
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<h1 style="margin:16px 0 0;font-size:24px;font-weight:700;color:#111827;letter-spacing:-0.025em;">
|
||||
Verificá tu dirección de correo electrónico
|
||||
</h1>
|
||||
</td>
|
||||
<td valign="top" align="right" style="white-space:nowrap;">
|
||||
<table role="presentation" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td valign="middle" style="padding-right:8px;">
|
||||
<img src="${appUrl}/playzer-favicon-512-transparent.png" alt="Playzer" width="32" height="32" style="display:block;" />
|
||||
</td>
|
||||
<td valign="middle">
|
||||
<span style="font-size:18px;font-weight:700;color:#475569;letter-spacing:-0.025em;">Playzer</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td style="padding:0 32px 24px;">
|
||||
<p style="margin:0;font-size:15px;color:#374151;line-height:1.6;">
|
||||
Hacé click en el botón de abajo para verificar tu dirección de correo electrónico y empezar a usar Playzer.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td style="padding:0 32px 32px;">
|
||||
<table role="presentation" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td style="background-color:#059669;border-radius:12px;text-align:center;">
|
||||
<a href="${verificationUrl.toString()}" style="display:block;padding:14px 32px;font-size:15px;font-weight:600;color:#ffffff;text-decoration:none;line-height:1.25rem;">Verificar email</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td style="padding:0 32px 32px;">
|
||||
<p style="margin:0;font-size:13px;color:#9ca3af;text-align:center;line-height:1.5;">
|
||||
Si no creaste una cuenta en Playzer, ignorá este mensaje.
|
||||
</p>
|
||||
</td>
|
||||
</tr>`;
|
||||
|
||||
await sendMail({
|
||||
to: user.email,
|
||||
subject: 'Verificá tu email en Playzer',
|
||||
html: `Hacé click para verificar tu email: <a href="${verificationUrl.toString()}">${verificationUrl.toString()}</a>`,
|
||||
html: wrapLayout(content),
|
||||
text: `Hacé click para verificar tu email: ${verificationUrl.toString()}`,
|
||||
});
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user