feat(email): adota React Email em notificações e automações

This commit is contained in:
esdrasrenan 2025-12-13 13:11:41 -03:00
parent 58a1ed6b36
commit 4306b0504d
18 changed files with 940 additions and 337 deletions

View file

@ -24,7 +24,7 @@ Pontos principais:
- **Execução** em `applyActions(...)`:
- Resolve destinatários (solicitante, responsável, usuário interno e e-mails livres).
- Faz interpolação de variáveis `{{...}}` em assunto/mensagem.
- Gera o HTML com `renderAutomationEmail(...)` (`convex/emailTemplates.ts`).
- Gera o HTML via **React Email** em `convex/reactEmail.tsx` (usando `@react-email/render`).
- Agenda o envio via `ctx.scheduler.runAfter(1, api.ticketNotifications.sendAutomationEmail, ...)`.
## Onde o e-mail é enviado de fato (SMTP)
@ -38,11 +38,14 @@ Arquivo: `convex/ticketNotifications.ts`
Observação: para não “vazar” destinatários entre si, o envio é feito **um-a-um** (um e-mail por destinatário).
## Templates de e-mail
Arquivo: `convex/emailTemplates.ts`
Templates (React Email) ficam em `emails/` e podem ser pré-visualizados localmente.
Templates adicionados:
- `renderAutomationEmail(...)`: usado pela ação `SEND_EMAIL` (inclui cartão com dados do ticket + CTA).
- `renderSimpleNotificationEmail(...)`: utilitário reaproveitado por notificações simples (comentário público / encerramento).
- `emails/automation-email.tsx`: usado pela ação `SEND_EMAIL` (inclui cartão com dados do ticket + CTA).
- `emails/simple-notification-email.tsx`: usado por notificações simples (comentário público / encerramento).
Renderização para HTML (backend):
- `convex/reactEmail.tsx`: `renderAutomationEmailHtml(...)` e `renderSimpleNotificationEmailHtml(...)`.
## Variáveis suportadas (interpolação)
Você pode usar estas variáveis em **Assunto** e **Mensagem**:
@ -76,4 +79,3 @@ O envio no Convex tenta usar:
## Testes de regressão
Arquivo: `tests/automations-engine.test.ts`
- Teste adiciona um cenário onde a ação `SEND_EMAIL` está presente e valida que o envio é agendado via `scheduler.runAfter`.

60
docs/REACT_EMAIL.md Normal file
View file

@ -0,0 +1,60 @@
# 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.