60 lines
2.2 KiB
Markdown
60 lines
2.2 KiB
Markdown
# React Email (padrão de templates de e-mail)
|
|
|
|
Este projeto usa **React Email** como base para criar e manter templates de e-mail em React/TypeScript, com foco em compatibilidade entre clientes (Gmail/Outlook/Apple Mail).
|
|
|
|
## Por que React Email
|
|
- E-mail não é navegador: suporte a CSS é limitado e inconsistente.
|
|
- React Email fornece componentes e um fluxo de preview que ajudam a manter layouts com **tabelas e estilos inline**, de forma mais sustentável.
|
|
|
|
## Estrutura de pastas
|
|
- Templates: `emails/`
|
|
- Componentes compartilhados (não aparecem no preview): `emails/_components`
|
|
- Assets para preview local: `emails/static` (servidos como `/static/...` no preview server)
|
|
|
|
Templates atuais:
|
|
- `emails/automation-email.tsx` (automações)
|
|
- `emails/simple-notification-email.tsx` (notificações simples)
|
|
|
|
## Preview local (CLI)
|
|
Comandos (Bun):
|
|
- `bun run email:dev` → abre o preview server em `http://localhost:3001`
|
|
- `bun run email:export` → gera HTML em `emails/out` (útil para inspeção/debug)
|
|
|
|
Notas:
|
|
- O `email dev` usa heurísticas para listar templates (arquivos `.tsx` com `export default`).
|
|
- Para evitar que pastas apareçam no menu, prefixe com `_` (ex.: `emails/_components`).
|
|
|
|
## Como os templates viram HTML no backend
|
|
O backend renderiza templates React em HTML no momento do envio usando `@react-email/render`.
|
|
|
|
Pontos do código:
|
|
- Renderização: `convex/reactEmail.tsx`
|
|
- `renderAutomationEmailHtml(...)`
|
|
- `renderSimpleNotificationEmailHtml(...)`
|
|
|
|
## Envio via SMTP (Convex)
|
|
O envio real ocorre em Convex Action (Node), evitando I/O de rede dentro de mutations.
|
|
|
|
Arquivos:
|
|
- `convex/ticketNotifications.ts` (actions de envio)
|
|
- `docs/AUTOMATIONS_EMAIL.md` (fluxo de automações + variáveis/CTA)
|
|
|
|
## Teste manual de envio (SMTP)
|
|
Script de teste:
|
|
- `bun run email:test-send -- --to monkeyesdras@gmail.com`
|
|
|
|
Parâmetros:
|
|
- `--to` (opcional): destinatário (default: `monkeyesdras@gmail.com`)
|
|
- `--subject` (opcional): assunto
|
|
|
|
Variáveis necessárias no `.env.local` (ou `.env`):
|
|
- `SMTP_HOST`
|
|
- `SMTP_PORT`
|
|
- `SMTP_USER`
|
|
- `SMTP_PASS`
|
|
- `SMTP_FROM_EMAIL`
|
|
- `SMTP_FROM_NAME` (opcional)
|
|
- `SMTP_SECURE` (opcional)
|
|
|
|
O script usa o template `emails/automation-email.tsx` e envia um e-mail real via SMTP.
|
|
|