sistema-de-chamados/docs/REACT_EMAIL.md

2.2 KiB

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.