d990450698
- Corrige todas as acentuacoes em portugues nos templates de e-mail - Adiciona @radix-ui/react-radio-group como dependencia 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
944 lines
34 KiB
TypeScript
944 lines
34 KiB
TypeScript
/**
|
|
* Sistema de Templates de E-mail
|
|
* Sistema de Chamados Raven
|
|
* Design inspirado em boas práticas de e-mail marketing
|
|
*/
|
|
|
|
// ============================================
|
|
// Tipos
|
|
// ============================================
|
|
|
|
export type TemplateName =
|
|
| "test"
|
|
| "ticket_created"
|
|
| "ticket_resolved"
|
|
| "ticket_assigned"
|
|
| "ticket_status"
|
|
| "ticket_comment"
|
|
| "password_reset"
|
|
| "email_verify"
|
|
| "invite"
|
|
| "new_login"
|
|
| "sla_warning"
|
|
| "sla_breached"
|
|
|
|
export type TemplateData = Record<string, unknown>
|
|
|
|
// ============================================
|
|
// Design Tokens - Sincronizado com globals.css
|
|
// ============================================
|
|
|
|
const COLORS = {
|
|
// Primárias - cyan do sistema
|
|
primary: "#00e8ff",
|
|
primaryDark: "#00d6eb",
|
|
primaryForeground: "#020617",
|
|
|
|
// Backgrounds
|
|
background: "#f7f8fb",
|
|
card: "#ffffff",
|
|
cardAlt: "#f8fafc",
|
|
|
|
// Borders
|
|
border: "#e2e8f0",
|
|
borderLight: "#f1f5f9",
|
|
|
|
// Texto
|
|
textPrimary: "#0f172a",
|
|
textSecondary: "#475569",
|
|
textMuted: "#94a3b8",
|
|
|
|
// Status - alinhado com status-badge.tsx
|
|
statusPending: "#64748b",
|
|
statusPendingBg: "#f1f5f9",
|
|
statusProgress: "#0a4760",
|
|
statusProgressBg: "#dff1fb",
|
|
statusPaused: "#7a5901",
|
|
statusPausedBg: "#fff3c4",
|
|
statusResolved: "#1f6a45",
|
|
statusResolvedBg: "#dcf4eb",
|
|
|
|
// Prioridade
|
|
priorityLow: "#64748b",
|
|
priorityLowBg: "#f1f5f9",
|
|
priorityMedium: "#0a4760",
|
|
priorityMediumBg: "#dff1fb",
|
|
priorityHigh: "#92400e",
|
|
priorityHighBg: "#fef3c7",
|
|
priorityUrgent: "#991b1b",
|
|
priorityUrgentBg: "#fee2e2",
|
|
|
|
// Alertas
|
|
warning: "#d97706",
|
|
warningBg: "#fffbeb",
|
|
error: "#dc2626",
|
|
errorBg: "#fef2f2",
|
|
success: "#059669",
|
|
successBg: "#ecfdf5",
|
|
|
|
// Estrelas
|
|
starActive: "#f59e0b",
|
|
starInactive: "#e2e8f0",
|
|
|
|
// Botao secundario
|
|
buttonSecondary: "#0f172a",
|
|
buttonSecondaryForeground: "#f8fafc",
|
|
}
|
|
|
|
// ============================================
|
|
// Helpers
|
|
// ============================================
|
|
|
|
function escapeHtml(str: unknown): string {
|
|
if (str === null || str === undefined) return ""
|
|
const s = String(str)
|
|
return s
|
|
.replace(/&/g, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">")
|
|
.replace(/"/g, """)
|
|
.replace(/'/g, "'")
|
|
}
|
|
|
|
function formatDate(date: Date | string | number, options?: Intl.DateTimeFormatOptions): string {
|
|
const d = date instanceof Date ? date : new Date(date)
|
|
return d.toLocaleDateString("pt-BR", {
|
|
timeZone: "America/Sao_Paulo",
|
|
day: "2-digit",
|
|
month: "2-digit",
|
|
year: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
...options,
|
|
})
|
|
}
|
|
|
|
function formatDateShort(date: Date | string | number): string {
|
|
const d = date instanceof Date ? date : new Date(date)
|
|
return d.toLocaleDateString("pt-BR", {
|
|
timeZone: "America/Sao_Paulo",
|
|
day: "2-digit",
|
|
month: "short",
|
|
year: "numeric",
|
|
})
|
|
}
|
|
|
|
// ============================================
|
|
// Componentes de E-mail
|
|
// ============================================
|
|
|
|
function getStatusStyle(status: string): { bg: string; color: string; label: string } {
|
|
const statusMap: Record<string, { bg: string; color: string; label: string }> = {
|
|
PENDING: { bg: COLORS.statusPendingBg, color: COLORS.statusPending, label: "Pendente" },
|
|
AWAITING_ATTENDANCE: { bg: COLORS.statusProgressBg, color: COLORS.statusProgress, label: "Em andamento" },
|
|
PAUSED: { bg: COLORS.statusPausedBg, color: COLORS.statusPaused, label: "Pausado" },
|
|
RESOLVED: { bg: COLORS.statusResolvedBg, color: COLORS.statusResolved, label: "Resolvido" },
|
|
}
|
|
return statusMap[status] ?? { bg: COLORS.statusPendingBg, color: COLORS.statusPending, label: status }
|
|
}
|
|
|
|
function getPriorityStyle(priority: string): { bg: string; color: string; label: string } {
|
|
const priorityMap: Record<string, { bg: string; color: string; label: string }> = {
|
|
LOW: { bg: COLORS.priorityLowBg, color: COLORS.priorityLow, label: "Baixa" },
|
|
MEDIUM: { bg: COLORS.priorityMediumBg, color: COLORS.priorityMedium, label: "Média" },
|
|
HIGH: { bg: COLORS.priorityHighBg, color: COLORS.priorityHigh, label: "Alta" },
|
|
URGENT: { bg: COLORS.priorityUrgentBg, color: COLORS.priorityUrgent, label: "Urgente" },
|
|
}
|
|
return priorityMap[priority] ?? { bg: COLORS.priorityMediumBg, color: COLORS.priorityMedium, label: priority }
|
|
}
|
|
|
|
// Badge pill - estilo arredondado como no sistema
|
|
function badge(label: string, bg: string, color: string): string {
|
|
return `<span style="display:inline-block;padding:6px 14px;border-radius:9999px;font-size:13px;font-weight:600;background:${bg};color:${color};border:1px solid ${bg};">${escapeHtml(label)}</span>`
|
|
}
|
|
|
|
function statusBadge(status: string): string {
|
|
const style = getStatusStyle(status)
|
|
return badge(style.label, style.bg, style.color)
|
|
}
|
|
|
|
function priorityBadge(priority: string): string {
|
|
const style = getPriorityStyle(priority)
|
|
return badge(style.label, style.bg, style.color)
|
|
}
|
|
|
|
// Botao principal - estilo cyan do sistema
|
|
function buttonPrimary(label: string, url: string): string {
|
|
return `
|
|
<table cellpadding="0" cellspacing="0" border="0" style="margin:0 auto;">
|
|
<tr>
|
|
<td align="center" style="border-radius:12px;background:${COLORS.primary};">
|
|
<a href="${escapeHtml(url)}" target="_blank" style="display:inline-block;padding:14px 32px;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:15px;font-weight:600;color:${COLORS.primaryForeground};text-decoration:none;border-radius:12px;">${escapeHtml(label)}</a>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
`
|
|
}
|
|
|
|
// Botao secundario - estilo escuro
|
|
function buttonSecondary(label: string, url: string): string {
|
|
return `
|
|
<table cellpadding="0" cellspacing="0" border="0" style="margin:0 auto;">
|
|
<tr>
|
|
<td align="center" style="border-radius:12px;background:${COLORS.buttonSecondary};">
|
|
<a href="${escapeHtml(url)}" target="_blank" style="display:inline-block;padding:14px 32px;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:15px;font-weight:600;color:${COLORS.buttonSecondaryForeground};text-decoration:none;border-radius:12px;">${escapeHtml(label)}</a>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
`
|
|
}
|
|
|
|
// Link de texto
|
|
function textLink(label: string, url: string): string {
|
|
return `<a href="${escapeHtml(url)}" style="color:${COLORS.primaryDark};text-decoration:none;font-weight:500;">${escapeHtml(label)}</a>`
|
|
}
|
|
|
|
// Card de informações do ticket
|
|
function ticketInfoCard(data: {
|
|
reference: number | string
|
|
subject: string
|
|
status?: string
|
|
priority?: string
|
|
requesterName?: string
|
|
assigneeName?: string
|
|
createdAt?: Date | string
|
|
}): string {
|
|
const rows: string[] = []
|
|
|
|
// Número do chamado com destaque
|
|
rows.push(`
|
|
<tr>
|
|
<td style="padding:12px 16px;border-bottom:1px solid ${COLORS.borderLight};">
|
|
<table width="100%" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td style="color:${COLORS.textMuted};font-size:13px;font-weight:500;width:120px;">Chamado</td>
|
|
<td style="color:${COLORS.textPrimary};font-size:15px;font-weight:700;">#${escapeHtml(data.reference)}</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
`)
|
|
|
|
// Assunto
|
|
rows.push(`
|
|
<tr>
|
|
<td style="padding:12px 16px;border-bottom:1px solid ${COLORS.borderLight};">
|
|
<table width="100%" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td style="color:${COLORS.textMuted};font-size:13px;font-weight:500;width:120px;vertical-align:top;">Assunto</td>
|
|
<td style="color:${COLORS.textPrimary};font-size:14px;line-height:1.5;">${escapeHtml(data.subject)}</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
`)
|
|
|
|
// Status e Prioridade na mesma linha
|
|
if (data.status || data.priority) {
|
|
rows.push(`
|
|
<tr>
|
|
<td style="padding:12px 16px;border-bottom:1px solid ${COLORS.borderLight};">
|
|
<table width="100%" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
${data.status ? `
|
|
<td style="width:50%;">
|
|
<span style="color:${COLORS.textMuted};font-size:13px;font-weight:500;display:block;margin-bottom:6px;">Status</span>
|
|
${statusBadge(data.status)}
|
|
</td>
|
|
` : ""}
|
|
${data.priority ? `
|
|
<td style="width:50%;">
|
|
<span style="color:${COLORS.textMuted};font-size:13px;font-weight:500;display:block;margin-bottom:6px;">Prioridade</span>
|
|
${priorityBadge(data.priority)}
|
|
</td>
|
|
` : ""}
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
`)
|
|
}
|
|
|
|
// Solicitante e Responsável
|
|
if (data.requesterName || data.assigneeName) {
|
|
rows.push(`
|
|
<tr>
|
|
<td style="padding:12px 16px;${data.createdAt ? `border-bottom:1px solid ${COLORS.borderLight};` : ""}">
|
|
<table width="100%" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
${data.requesterName ? `
|
|
<td style="width:50%;">
|
|
<span style="color:${COLORS.textMuted};font-size:13px;font-weight:500;display:block;margin-bottom:4px;">Solicitante</span>
|
|
<span style="color:${COLORS.textPrimary};font-size:14px;">${escapeHtml(data.requesterName)}</span>
|
|
</td>
|
|
` : ""}
|
|
${data.assigneeName ? `
|
|
<td style="width:50%;">
|
|
<span style="color:${COLORS.textMuted};font-size:13px;font-weight:500;display:block;margin-bottom:4px;">Responsável</span>
|
|
<span style="color:${COLORS.textPrimary};font-size:14px;">${escapeHtml(data.assigneeName)}</span>
|
|
</td>
|
|
` : ""}
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
`)
|
|
}
|
|
|
|
// Data de criação
|
|
if (data.createdAt) {
|
|
rows.push(`
|
|
<tr>
|
|
<td style="padding:12px 16px;">
|
|
<table width="100%" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td style="color:${COLORS.textMuted};font-size:13px;font-weight:500;width:120px;">Criado em</td>
|
|
<td style="color:${COLORS.textSecondary};font-size:14px;">${formatDate(data.createdAt)}</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
`)
|
|
}
|
|
|
|
return `
|
|
<table width="100%" cellpadding="0" cellspacing="0" style="background:${COLORS.cardAlt};border-radius:12px;border:1px solid ${COLORS.border};margin:24px 0;">
|
|
${rows.join("")}
|
|
</table>
|
|
`
|
|
}
|
|
|
|
// Sistema de estrelas de avaliação
|
|
function ratingStars(rateUrl: string): string {
|
|
const stars: string[] = []
|
|
for (let i = 1; i <= 5; i++) {
|
|
stars.push(`
|
|
<td style="padding:0 6px;">
|
|
<a href="${escapeHtml(rateUrl)}?rating=${i}" style="text-decoration:none;">
|
|
<span style="font-size:32px;color:${COLORS.starActive};line-height:1;">★</span>
|
|
</a>
|
|
</td>
|
|
`)
|
|
}
|
|
|
|
return `
|
|
<div style="text-align:center;padding:24px 0;">
|
|
<table cellpadding="0" cellspacing="0" style="margin:0 auto;" align="center">
|
|
<tr>
|
|
${stars.join("")}
|
|
</tr>
|
|
</table>
|
|
<p style="color:${COLORS.textMuted};font-size:13px;margin:12px 0 0 0;text-align:center;">Clique em uma estrela para avaliar</p>
|
|
</div>
|
|
`
|
|
}
|
|
|
|
// Divisor
|
|
function divider(): string {
|
|
return `<hr style="border:none;border-top:1px solid ${COLORS.border};margin:32px 0;">`
|
|
}
|
|
|
|
// ============================================
|
|
// Template Base
|
|
// ============================================
|
|
|
|
function baseTemplate(content: string, data: TemplateData): string {
|
|
const appUrl = process.env.NEXT_PUBLIC_APP_URL ?? "https://tickets.esdrasrenan.com.br"
|
|
const preferencesUrl = `${appUrl}/settings/notifications`
|
|
const helpUrl = `${appUrl}/help`
|
|
|
|
return `<!DOCTYPE html>
|
|
<html lang="pt-BR">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<title>${escapeHtml(data.subject ?? "Notificação")}</title>
|
|
<!--[if mso]>
|
|
<noscript>
|
|
<xml>
|
|
<o:OfficeDocumentSettings>
|
|
<o:PixelsPerInch>96</o:PixelsPerInch>
|
|
</o:OfficeDocumentSettings>
|
|
</xml>
|
|
</noscript>
|
|
<![endif]-->
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
|
</style>
|
|
</head>
|
|
<body style="margin:0;padding:0;background:${COLORS.background};font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;">
|
|
|
|
<table width="100%" cellpadding="0" cellspacing="0" style="background:${COLORS.background};padding:40px 20px;">
|
|
<tr>
|
|
<td align="center">
|
|
<table width="560" cellpadding="0" cellspacing="0" style="max-width:560px;width:100%;">
|
|
|
|
<!-- Header com logo -->
|
|
<tr>
|
|
<td style="padding:0 0 32px 0;text-align:center;">
|
|
<table cellpadding="0" cellspacing="0" style="margin:0 auto;">
|
|
<tr>
|
|
<td style="background:${COLORS.primary};width:44px;height:44px;border-radius:10px;text-align:center;vertical-align:middle;">
|
|
<span style="color:${COLORS.primaryForeground};font-size:22px;font-weight:700;font-family:'Inter',sans-serif;">R</span>
|
|
</td>
|
|
<td style="padding-left:14px;">
|
|
<span style="color:${COLORS.textPrimary};font-size:22px;font-weight:700;font-family:'Inter',sans-serif;">Raven</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Card principal -->
|
|
<tr>
|
|
<td style="background:${COLORS.card};border-radius:16px;padding:40px;box-shadow:0 1px 3px rgba(0,0,0,0.05);border:1px solid ${COLORS.border};">
|
|
${content}
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Footer -->
|
|
<tr>
|
|
<td style="padding:32px 0;text-align:center;">
|
|
<p style="color:${COLORS.textMuted};font-size:13px;margin:0 0 12px 0;line-height:1.6;">
|
|
Este e-mail foi enviado pelo Sistema de Chamados Raven.
|
|
</p>
|
|
<p style="margin:0;">
|
|
${textLink("Gerenciar notificações", preferencesUrl)}
|
|
<span style="color:${COLORS.textMuted};margin:0 12px;">|</span>
|
|
${textLink("Central de ajuda", helpUrl)}
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
</body>
|
|
</html>`
|
|
}
|
|
|
|
// ============================================
|
|
// Templates
|
|
// ============================================
|
|
|
|
const templates: Record<TemplateName, (data: TemplateData) => string> = {
|
|
// Template de teste
|
|
test: (data) => {
|
|
return baseTemplate(
|
|
`
|
|
<h1 style="color:${COLORS.textPrimary};font-size:26px;font-weight:700;margin:0 0 12px 0;text-align:center;">
|
|
${escapeHtml(data.title)}
|
|
</h1>
|
|
<p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0 0 32px 0;text-align:center;">
|
|
${escapeHtml(data.message)}
|
|
</p>
|
|
<p style="color:${COLORS.textMuted};font-size:13px;margin:0;text-align:center;">
|
|
Enviado em ${escapeHtml(data.timestamp)}
|
|
</p>
|
|
`,
|
|
data
|
|
)
|
|
},
|
|
|
|
// Abertura de chamado
|
|
ticket_created: (data) => {
|
|
const viewUrl = data.viewUrl as string
|
|
return baseTemplate(
|
|
`
|
|
<h1 style="color:${COLORS.textPrimary};font-size:26px;font-weight:700;margin:0 0 12px 0;">
|
|
Chamado aberto
|
|
</h1>
|
|
<p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0 0 8px 0;">
|
|
Seu chamado foi registrado com sucesso.
|
|
</p>
|
|
<p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0;">
|
|
Nossa equipe irá analisá-lo e entrar em contato em breve.
|
|
</p>
|
|
|
|
${ticketInfoCard({
|
|
reference: data.reference as number,
|
|
subject: data.subject as string,
|
|
status: data.status as string,
|
|
priority: data.priority as string,
|
|
createdAt: data.createdAt as string,
|
|
})}
|
|
|
|
<div style="text-align:center;margin-top:32px;">
|
|
${buttonPrimary("Ver chamado", viewUrl)}
|
|
</div>
|
|
`,
|
|
data
|
|
)
|
|
},
|
|
|
|
// Resolução de chamado
|
|
ticket_resolved: (data) => {
|
|
const viewUrl = data.viewUrl as string
|
|
const rateUrl = data.rateUrl as string
|
|
|
|
return baseTemplate(
|
|
`
|
|
<div style="text-align:center;margin-bottom:24px;">
|
|
<div style="display:inline-block;width:64px;height:64px;background:${COLORS.statusResolvedBg};border-radius:50%;line-height:64px;">
|
|
<span style="font-size:28px;">✓</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h1 style="color:${COLORS.textPrimary};font-size:26px;font-weight:700;margin:0 0 12px 0;text-align:center;">
|
|
Chamado resolvido
|
|
</h1>
|
|
<p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0;text-align:center;">
|
|
Seu chamado foi marcado como resolvido. Esperamos que o atendimento tenha sido satisfatório!
|
|
</p>
|
|
|
|
${ticketInfoCard({
|
|
reference: data.reference as number,
|
|
subject: data.subject as string,
|
|
status: "RESOLVED",
|
|
assigneeName: data.assigneeName as string,
|
|
})}
|
|
|
|
${
|
|
data.resolutionSummary
|
|
? `
|
|
<div style="background:${COLORS.successBg};border-radius:12px;padding:20px;margin:24px 0;border-left:4px solid ${COLORS.success};">
|
|
<p style="color:${COLORS.success};font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;margin:0 0 8px 0;">Resumo da resolução</p>
|
|
<p style="color:${COLORS.textPrimary};font-size:14px;line-height:1.6;margin:0;">${escapeHtml(data.resolutionSummary)}</p>
|
|
</div>
|
|
`
|
|
: ""
|
|
}
|
|
|
|
${divider()}
|
|
|
|
<div style="text-align:center;">
|
|
<p style="color:${COLORS.textPrimary};font-size:18px;font-weight:600;margin:0 0 8px 0;">Como foi o atendimento?</p>
|
|
<p style="color:${COLORS.textSecondary};font-size:14px;margin:0;">Sua avaliação nos ajuda a melhorar!</p>
|
|
${ratingStars(rateUrl)}
|
|
</div>
|
|
|
|
<div style="text-align:center;margin-top:24px;">
|
|
${buttonSecondary("Ver detalhes", viewUrl)}
|
|
</div>
|
|
`,
|
|
data
|
|
)
|
|
},
|
|
|
|
// Atribuição de chamado
|
|
ticket_assigned: (data) => {
|
|
const viewUrl = data.viewUrl as string
|
|
const isForRequester = data.isForRequester as boolean
|
|
|
|
const title = isForRequester ? "Agente atribuído" : "Novo chamado atribuído"
|
|
const message = isForRequester
|
|
? `O agente <strong>${escapeHtml(data.assigneeName)}</strong> foi atribuído ao seu chamado e em breve entrará em contato.`
|
|
: `Um novo chamado foi atribuído a você. Por favor, verifique os detalhes abaixo.`
|
|
|
|
return baseTemplate(
|
|
`
|
|
<h1 style="color:${COLORS.textPrimary};font-size:26px;font-weight:700;margin:0 0 12px 0;">
|
|
${title}
|
|
</h1>
|
|
<p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0;">
|
|
${message}
|
|
</p>
|
|
|
|
${ticketInfoCard({
|
|
reference: data.reference as number,
|
|
subject: data.subject as string,
|
|
status: data.status as string,
|
|
priority: data.priority as string,
|
|
requesterName: data.requesterName as string,
|
|
assigneeName: data.assigneeName as string,
|
|
})}
|
|
|
|
<div style="text-align:center;margin-top:32px;">
|
|
${buttonPrimary("Ver chamado", viewUrl)}
|
|
</div>
|
|
`,
|
|
data
|
|
)
|
|
},
|
|
|
|
// Mudança de status
|
|
ticket_status: (data) => {
|
|
const viewUrl = data.viewUrl as string
|
|
const oldStatus = getStatusStyle(data.oldStatus as string)
|
|
const newStatus = getStatusStyle(data.newStatus as string)
|
|
|
|
return baseTemplate(
|
|
`
|
|
<h1 style="color:${COLORS.textPrimary};font-size:26px;font-weight:700;margin:0 0 12px 0;">
|
|
Status atualizado
|
|
</h1>
|
|
<p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0;">
|
|
O status do seu chamado foi alterado.
|
|
</p>
|
|
|
|
${ticketInfoCard({
|
|
reference: data.reference as number,
|
|
subject: data.subject as string,
|
|
})}
|
|
|
|
<div style="text-align:center;margin:32px 0;">
|
|
<table cellpadding="0" cellspacing="0" style="margin:0 auto;">
|
|
<tr>
|
|
<td style="text-align:center;padding-right:16px;">
|
|
<span style="color:${COLORS.textMuted};font-size:12px;display:block;margin-bottom:8px;">Anterior</span>
|
|
${badge(oldStatus.label, oldStatus.bg, oldStatus.color)}
|
|
</td>
|
|
<td style="padding:0 8px;color:${COLORS.textMuted};font-size:24px;vertical-align:bottom;padding-bottom:4px;">→</td>
|
|
<td style="text-align:center;padding-left:16px;">
|
|
<span style="color:${COLORS.textMuted};font-size:12px;display:block;margin-bottom:8px;">Atual</span>
|
|
${badge(newStatus.label, newStatus.bg, newStatus.color)}
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div style="text-align:center;">
|
|
${buttonPrimary("Ver chamado", viewUrl)}
|
|
</div>
|
|
`,
|
|
data
|
|
)
|
|
},
|
|
|
|
// Novo comentário
|
|
ticket_comment: (data) => {
|
|
const viewUrl = data.viewUrl as string
|
|
|
|
return baseTemplate(
|
|
`
|
|
<h1 style="color:${COLORS.textPrimary};font-size:26px;font-weight:700;margin:0 0 12px 0;">
|
|
Nova atualização
|
|
</h1>
|
|
<p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0;">
|
|
<strong>${escapeHtml(data.authorName)}</strong> adicionou um comentário ao seu chamado.
|
|
</p>
|
|
|
|
${ticketInfoCard({
|
|
reference: data.reference as number,
|
|
subject: data.subject as string,
|
|
})}
|
|
|
|
<div style="background:${COLORS.cardAlt};border-radius:12px;padding:20px;margin:24px 0;border-left:4px solid ${COLORS.primary};">
|
|
<div style="margin-bottom:12px;">
|
|
<span style="color:${COLORS.textPrimary};font-size:14px;font-weight:600;">${escapeHtml(data.authorName)}</span>
|
|
<span style="color:${COLORS.textMuted};font-size:13px;margin-left:8px;">${formatDate(data.commentedAt as string)}</span>
|
|
</div>
|
|
<p style="color:${COLORS.textSecondary};font-size:14px;line-height:1.7;margin:0;">
|
|
${escapeHtml(data.commentBody)}
|
|
</p>
|
|
</div>
|
|
|
|
<div style="text-align:center;">
|
|
${buttonPrimary("Responder", viewUrl)}
|
|
</div>
|
|
`,
|
|
data
|
|
)
|
|
},
|
|
|
|
// Reset de senha
|
|
password_reset: (data) => {
|
|
const resetUrl = data.resetUrl as string
|
|
|
|
return baseTemplate(
|
|
`
|
|
<div style="text-align:center;margin-bottom:24px;">
|
|
<div style="display:inline-block;width:64px;height:64px;background:${COLORS.cardAlt};border-radius:50%;line-height:64px;border:1px solid ${COLORS.border};">
|
|
<span style="font-size:28px;">🔒</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h1 style="color:${COLORS.textPrimary};font-size:26px;font-weight:700;margin:0 0 12px 0;text-align:center;">
|
|
Redefinição de senha
|
|
</h1>
|
|
<p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0 0 32px 0;text-align:center;">
|
|
Recebemos uma solicitação para redefinir a senha da sua conta. Se você não fez essa solicitação, pode ignorar este e-mail.
|
|
</p>
|
|
|
|
<div style="text-align:center;margin:32px 0;">
|
|
${buttonPrimary("Redefinir senha", resetUrl)}
|
|
</div>
|
|
|
|
<p style="color:${COLORS.textMuted};font-size:13px;margin:32px 0 0 0;text-align:center;line-height:1.6;">
|
|
Este link expira em 24 horas. Se você não solicitou a redefinição de senha, pode ignorar este e-mail com segurança.
|
|
</p>
|
|
`,
|
|
data
|
|
)
|
|
},
|
|
|
|
// Verificação de e-mail
|
|
email_verify: (data) => {
|
|
const verifyUrl = data.verifyUrl as string
|
|
|
|
return baseTemplate(
|
|
`
|
|
<div style="text-align:center;margin-bottom:24px;">
|
|
<div style="display:inline-block;width:64px;height:64px;background:${COLORS.cardAlt};border-radius:50%;line-height:64px;border:1px solid ${COLORS.border};">
|
|
<span style="font-size:28px;">✉</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h1 style="color:${COLORS.textPrimary};font-size:26px;font-weight:700;margin:0 0 12px 0;text-align:center;">
|
|
Confirme seu e-mail
|
|
</h1>
|
|
<p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0 0 32px 0;text-align:center;">
|
|
Clique no botão abaixo para confirmar seu endereço de e-mail e ativar sua conta.
|
|
</p>
|
|
|
|
<div style="text-align:center;margin:32px 0;">
|
|
${buttonPrimary("Confirmar e-mail", verifyUrl)}
|
|
</div>
|
|
|
|
<p style="color:${COLORS.textMuted};font-size:13px;margin:32px 0 0 0;text-align:center;line-height:1.6;">
|
|
Se você não criou uma conta, pode ignorar este e-mail com segurança.
|
|
</p>
|
|
`,
|
|
data
|
|
)
|
|
},
|
|
|
|
// Convite de usuário
|
|
invite: (data) => {
|
|
const inviteUrl = data.inviteUrl as string
|
|
|
|
return baseTemplate(
|
|
`
|
|
<div style="text-align:center;margin-bottom:24px;">
|
|
<div style="display:inline-block;width:64px;height:64px;background:${COLORS.primary};border-radius:50%;line-height:64px;">
|
|
<span style="font-size:28px;">🎉</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h1 style="color:${COLORS.textPrimary};font-size:26px;font-weight:700;margin:0 0 12px 0;text-align:center;">
|
|
Você foi convidado!
|
|
</h1>
|
|
<p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0 0 24px 0;text-align:center;">
|
|
<strong>${escapeHtml(data.inviterName)}</strong> convidou você para acessar o Sistema de Chamados Raven.
|
|
</p>
|
|
|
|
<table width="100%" cellpadding="0" cellspacing="0" style="background:${COLORS.cardAlt};border-radius:12px;border:1px solid ${COLORS.border};margin:24px 0;">
|
|
<tr>
|
|
<td style="padding:16px 20px;border-bottom:1px solid ${COLORS.borderLight};">
|
|
<table width="100%" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td style="color:${COLORS.textMuted};font-size:13px;font-weight:500;width:100px;">Função</td>
|
|
<td style="color:${COLORS.textPrimary};font-size:14px;font-weight:600;">${escapeHtml(data.roleName)}</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
${
|
|
data.companyName
|
|
? `
|
|
<tr>
|
|
<td style="padding:16px 20px;">
|
|
<table width="100%" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td style="color:${COLORS.textMuted};font-size:13px;font-weight:500;width:100px;">Empresa</td>
|
|
<td style="color:${COLORS.textPrimary};font-size:14px;">${escapeHtml(data.companyName)}</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
`
|
|
: ""
|
|
}
|
|
</table>
|
|
|
|
<div style="text-align:center;margin:32px 0;">
|
|
${buttonPrimary("Aceitar convite", inviteUrl)}
|
|
</div>
|
|
|
|
<p style="color:${COLORS.textMuted};font-size:13px;margin:24px 0 0 0;text-align:center;line-height:1.6;">
|
|
Este convite expira em 7 dias. Se você não esperava este convite, pode ignorá-lo com segurança.
|
|
</p>
|
|
`,
|
|
data
|
|
)
|
|
},
|
|
|
|
// Novo login detectado
|
|
new_login: (data) => {
|
|
return baseTemplate(
|
|
`
|
|
<div style="text-align:center;margin-bottom:24px;">
|
|
<div style="display:inline-block;width:64px;height:64px;background:${COLORS.warningBg};border-radius:50%;line-height:64px;border:1px solid ${COLORS.warning};">
|
|
<span style="font-size:28px;">🔒</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h1 style="color:${COLORS.textPrimary};font-size:26px;font-weight:700;margin:0 0 12px 0;text-align:center;">
|
|
Novo acesso detectado
|
|
</h1>
|
|
<p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0 0 24px 0;text-align:center;">
|
|
Detectamos um novo acesso à sua conta. Se foi você, pode ignorar este e-mail.
|
|
</p>
|
|
|
|
<table width="100%" cellpadding="0" cellspacing="0" style="background:${COLORS.cardAlt};border-radius:12px;border:1px solid ${COLORS.border};margin:24px 0;">
|
|
<tr>
|
|
<td style="padding:16px 20px;border-bottom:1px solid ${COLORS.borderLight};">
|
|
<table width="100%" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td style="color:${COLORS.textMuted};font-size:13px;font-weight:500;width:120px;">Data/Hora</td>
|
|
<td style="color:${COLORS.textPrimary};font-size:14px;">${formatDate(data.loginAt as string)}</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:16px 20px;border-bottom:1px solid ${COLORS.borderLight};">
|
|
<table width="100%" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td style="color:${COLORS.textMuted};font-size:13px;font-weight:500;width:120px;">Dispositivo</td>
|
|
<td style="color:${COLORS.textPrimary};font-size:14px;">${escapeHtml(data.userAgent)}</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:16px 20px;">
|
|
<table width="100%" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td style="color:${COLORS.textMuted};font-size:13px;font-weight:500;width:120px;">Endereço IP</td>
|
|
<td style="color:${COLORS.textPrimary};font-size:14px;font-family:monospace;">${escapeHtml(data.ipAddress)}</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<p style="color:${COLORS.textMuted};font-size:13px;margin:24px 0 0 0;text-align:center;line-height:1.6;">
|
|
Se você não reconhece este acesso, recomendamos alterar sua senha imediatamente.
|
|
</p>
|
|
`,
|
|
data
|
|
)
|
|
},
|
|
|
|
// Alerta de SLA em risco
|
|
sla_warning: (data) => {
|
|
const viewUrl = data.viewUrl as string
|
|
|
|
return baseTemplate(
|
|
`
|
|
<div style="text-align:center;margin-bottom:24px;">
|
|
<div style="display:inline-block;width:64px;height:64px;background:${COLORS.warningBg};border-radius:50%;line-height:64px;border:2px solid ${COLORS.warning};">
|
|
<span style="font-size:28px;">⚠</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h1 style="color:${COLORS.warning};font-size:26px;font-weight:700;margin:0 0 12px 0;text-align:center;">
|
|
SLA em risco
|
|
</h1>
|
|
<p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0 0 8px 0;text-align:center;">
|
|
O chamado abaixo está próximo de violar o SLA.
|
|
</p>
|
|
<p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0;text-align:center;">
|
|
<strong>Ação necessária!</strong>
|
|
</p>
|
|
|
|
${ticketInfoCard({
|
|
reference: data.reference as number,
|
|
subject: data.subject as string,
|
|
status: data.status as string,
|
|
priority: data.priority as string,
|
|
requesterName: data.requesterName as string,
|
|
assigneeName: data.assigneeName as string,
|
|
})}
|
|
|
|
<div style="background:${COLORS.warningBg};border-radius:12px;padding:20px;margin:24px 0;border:1px solid ${COLORS.warning};text-align:center;">
|
|
<p style="color:${COLORS.warning};font-size:24px;font-weight:700;margin:0 0 4px 0;">
|
|
${escapeHtml(data.timeRemaining)}
|
|
</p>
|
|
<p style="color:${COLORS.textSecondary};font-size:13px;margin:0;">
|
|
Prazo: ${formatDate(data.dueAt as string)}
|
|
</p>
|
|
</div>
|
|
|
|
<div style="text-align:center;">
|
|
${buttonPrimary("Ver chamado", viewUrl)}
|
|
</div>
|
|
`,
|
|
data
|
|
)
|
|
},
|
|
|
|
// Alerta de SLA violado
|
|
sla_breached: (data) => {
|
|
const viewUrl = data.viewUrl as string
|
|
|
|
return baseTemplate(
|
|
`
|
|
<div style="text-align:center;margin-bottom:24px;">
|
|
<div style="display:inline-block;width:64px;height:64px;background:${COLORS.errorBg};border-radius:50%;line-height:64px;border:2px solid ${COLORS.error};">
|
|
<span style="font-size:28px;">❌</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h1 style="color:${COLORS.error};font-size:26px;font-weight:700;margin:0 0 12px 0;text-align:center;">
|
|
SLA violado
|
|
</h1>
|
|
<p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0 0 8px 0;text-align:center;">
|
|
O chamado abaixo violou o SLA estabelecido.
|
|
</p>
|
|
<p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0;text-align:center;">
|
|
<strong>Atenção urgente necessária!</strong>
|
|
</p>
|
|
|
|
${ticketInfoCard({
|
|
reference: data.reference as number,
|
|
subject: data.subject as string,
|
|
status: data.status as string,
|
|
priority: data.priority as string,
|
|
requesterName: data.requesterName as string,
|
|
assigneeName: data.assigneeName as string,
|
|
})}
|
|
|
|
<div style="background:${COLORS.errorBg};border-radius:12px;padding:20px;margin:24px 0;border:1px solid ${COLORS.error};text-align:center;">
|
|
<p style="color:${COLORS.error};font-size:24px;font-weight:700;margin:0 0 4px 0;">
|
|
${escapeHtml(data.timeExceeded)}
|
|
</p>
|
|
<p style="color:${COLORS.textSecondary};font-size:13px;margin:0;">
|
|
Prazo era: ${formatDate(data.dueAt as string)}
|
|
</p>
|
|
</div>
|
|
|
|
<div style="text-align:center;">
|
|
${buttonPrimary("Ver chamado", viewUrl)}
|
|
</div>
|
|
`,
|
|
data
|
|
)
|
|
},
|
|
}
|
|
|
|
// ============================================
|
|
// Exportação
|
|
// ============================================
|
|
|
|
/**
|
|
* Renderiza um template de e-mail com os dados fornecidos
|
|
*/
|
|
export function renderTemplate(name: TemplateName, data: TemplateData): string {
|
|
const template = templates[name]
|
|
if (!template) {
|
|
throw new Error(`Template "${name}" não encontrado`)
|
|
}
|
|
return template(data)
|
|
}
|
|
|
|
/**
|
|
* Retorna a lista de templates disponíveis
|
|
*/
|
|
export function getAvailableTemplates(): TemplateName[] {
|
|
return Object.keys(templates) as TemplateName[]
|
|
}
|