= {
- LOW: { label: "Baixa", bg: COLORS.priorityLowBg, color: COLORS.priorityLow },
- MEDIUM: { label: "Média", bg: COLORS.priorityMediumBg, color: COLORS.priorityMedium },
- HIGH: { label: "Alta", bg: COLORS.priorityHighBg, color: COLORS.priorityHigh },
- URGENT: { label: "Urgente", bg: COLORS.priorityUrgentBg, color: COLORS.priorityUrgent },
- }
- const entry = map[priority] ?? { label: priorityRaw, bg: COLORS.priorityMediumBg, color: COLORS.priorityMedium }
- return badge(entry.label, entry.bg, entry.color)
-}
-
-export function buildBaseUrl() {
- return process.env.NEXT_PUBLIC_APP_URL || process.env.APP_BASE_URL || "http://localhost:3000"
-}
-
-function ticketInfoCard(ticket: EmailTicketSummary) {
- const rows: string[] = []
-
- rows.push(`
-
- | Chamado |
- #${escapeHtml(ticket.reference)} |
-
- `)
-
- rows.push(`
-
- | Assunto |
- ${escapeHtml(ticket.subject)} |
-
- `)
-
- if (ticket.companyName) {
- rows.push(`
-
- | Empresa |
- ${escapeHtml(ticket.companyName)} |
-
- `)
- }
-
- if (ticket.status) {
- rows.push(`
-
- | Status |
- ${statusBadge(ticket.status)} |
-
- `)
- }
-
- if (ticket.priority) {
- rows.push(`
-
- | Prioridade |
- ${priorityBadge(ticket.priority)} |
-
- `)
- }
-
- if (ticket.requesterName) {
- rows.push(`
-
- | Solicitante |
- ${escapeHtml(ticket.requesterName)} |
-
- `)
- }
-
- if (ticket.assigneeName) {
- rows.push(`
-
- | Responsável |
- ${escapeHtml(ticket.assigneeName)} |
-
- `)
- }
-
- return `
-
- `
-}
-
-function button(label: string, url: string) {
- return `${escapeHtml(label)}`
-}
-
-export function renderAutomationEmail(params: {
- title: string
- message: string
- ticket: EmailTicketSummary
- ctaLabel: string
- ctaUrl: string
-}) {
- const baseUrl = buildBaseUrl()
-
- const content = `
-
-
-
- 
- |
-
- Raven
- |
-
-
-
- ${escapeHtml(params.title)}
- ${textToHtmlParagraphs(params.message)}
- ${ticketInfoCard(params.ticket)}
-
- ${button(params.ctaLabel, params.ctaUrl)}
-
-
- Se o botão não funcionar, copie e cole esta URL no navegador:
- ${escapeHtml(params.ctaUrl)}
-
- `
-
- return `
-
-
- |
-
- © ${new Date().getFullYear()} Raven — Rever Tecnologia
- |
-
-
- `
-}
-
-export function renderSimpleNotificationEmail(params: {
- title: string
- message: string
- ctaLabel: string
- ctaUrl: string
-}) {
- const baseUrl = buildBaseUrl()
-
- const content = `
-
-
- |
-
- |
-
- Raven
- |
-
-
-
- ${escapeHtml(params.title)}
- ${textToHtmlParagraphs(params.message)}
-
- ${button(params.ctaLabel, params.ctaUrl)}
-
-
- Se o botão não funcionar, copie e cole esta URL no navegador:
- ${escapeHtml(params.ctaUrl)}
-
- `
-
- return `
-
-
- |
-
- © ${new Date().getFullYear()} Raven — Rever Tecnologia
- |
-
-
- `
-}
diff --git a/convex/reactEmail.tsx b/convex/reactEmail.tsx
new file mode 100644
index 0000000..b81fade
--- /dev/null
+++ b/convex/reactEmail.tsx
@@ -0,0 +1,15 @@
+import * as React from "react"
+import { render } from "@react-email/render"
+
+import AutomationEmail, { type AutomationEmailProps } from "../emails/automation-email"
+import SimpleNotificationEmail, { type SimpleNotificationEmailProps } from "../emails/simple-notification-email"
+
+export type { AutomationEmailProps, SimpleNotificationEmailProps }
+
+export async function renderAutomationEmailHtml(props: AutomationEmailProps) {
+ return render(, { pretty: false })
+}
+
+export async function renderSimpleNotificationEmailHtml(props: SimpleNotificationEmailProps) {
+ return render(, { pretty: false })
+}
diff --git a/convex/ticketNotifications.ts b/convex/ticketNotifications.ts
index 4e0a9b5..a9234bf 100644
--- a/convex/ticketNotifications.ts
+++ b/convex/ticketNotifications.ts
@@ -4,7 +4,8 @@ import tls from "tls"
import { action } from "./_generated/server"
import { v } from "convex/values"
-import { buildBaseUrl, renderSimpleNotificationEmail } from "./emailTemplates"
+import { renderSimpleNotificationEmailHtml } from "./reactEmail"
+import { buildBaseUrl } from "./url"
function b64(input: string) {
return Buffer.from(input, "utf8").toString("base64")
@@ -99,7 +100,7 @@ export const sendPublicCommentEmail = action({
const baseUrl = buildBaseUrl()
const url = `${baseUrl}/portal/tickets/${ticketId}`
const mailSubject = `Atualização no chamado #${reference}: ${subject}`
- const html = renderSimpleNotificationEmail({
+ const html = await renderSimpleNotificationEmailHtml({
title: `Nova atualização no seu chamado #${reference}`,
message: `Um novo comentário foi adicionado ao chamado “${subject}”. Clique abaixo para visualizar e responder pelo portal.`,
ctaLabel: "Abrir e responder",
@@ -126,7 +127,7 @@ export const sendResolvedEmail = action({
const baseUrl = buildBaseUrl()
const url = `${baseUrl}/portal/tickets/${ticketId}`
const mailSubject = `Seu chamado #${reference} foi encerrado`
- const html = renderSimpleNotificationEmail({
+ const html = await renderSimpleNotificationEmailHtml({
title: `Chamado #${reference} encerrado`,
message: `O chamado “${subject}” foi marcado como concluído. Caso necessário, você pode responder pelo portal para reabrir dentro do prazo.`,
ctaLabel: "Ver detalhes",
diff --git a/convex/url.ts b/convex/url.ts
new file mode 100644
index 0000000..8d84936
--- /dev/null
+++ b/convex/url.ts
@@ -0,0 +1,4 @@
+export function buildBaseUrl() {
+ return process.env.NEXT_PUBLIC_APP_URL || process.env.APP_BASE_URL || "http://localhost:3000"
+}
+
diff --git a/docs/AUTOMATIONS_EMAIL.md b/docs/AUTOMATIONS_EMAIL.md
index 46779ee..988065c 100644
--- a/docs/AUTOMATIONS_EMAIL.md
+++ b/docs/AUTOMATIONS_EMAIL.md
@@ -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`.
-
diff --git a/docs/REACT_EMAIL.md b/docs/REACT_EMAIL.md
new file mode 100644
index 0000000..040736d
--- /dev/null
+++ b/docs/REACT_EMAIL.md
@@ -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.
+
diff --git a/emails/_components/layout.tsx b/emails/_components/layout.tsx
new file mode 100644
index 0000000..fcfaebc
--- /dev/null
+++ b/emails/_components/layout.tsx
@@ -0,0 +1,80 @@
+import * as React from "react"
+import { Body } from "@react-email/body"
+import { Container } from "@react-email/container"
+import { Head } from "@react-email/head"
+import { Html } from "@react-email/html"
+import { Img } from "@react-email/img"
+import { Preview } from "@react-email/preview"
+import { Section } from "@react-email/section"
+import { Text } from "@react-email/text"
+
+import { EMAIL_COLORS } from "./tokens"
+import { getEmailAssetUrl } from "./utils"
+
+export function RavenEmailLayout({
+ preview,
+ title,
+ children,
+}: {
+ preview?: string
+ title: string
+ children: React.ReactNode
+}) {
+ return (
+
+
+ {preview ? ![Raven]({getEmailAssetUrl("/logo-raven.png")}){kind=logo}
+