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

emails/_components/ticket-card.tsx

@@ -0,0 +1,103 @@
+import * as React from "react"
+import { Section } from "@react-email/section"
+import { Text } from "@react-email/text"
+
+import { EMAIL_COLORS } from "./tokens"
+import { formatPriority, formatStatus } from "./utils"
+
+export type TicketCardData = {
+  reference: number
+  subject: string
+  companyName?: string | null
+  status?: string | null
+  priority?: string | null
+  requesterName?: string | null
+  assigneeName?: string | null
+}
+
+function badge(label: string, bg: string, color: string) {
+  return (
+    <span
+      style={{
+        display: "inline-block",
+        padding: "4px 12px",
+        borderRadius: "999px",
+        fontSize: "12px",
+        fontWeight: 700,
+        backgroundColor: bg,
+        color,
+        whiteSpace: "nowrap",
+      }}
+    >
+      {label}
+    </span>
+  )
+}
+
+function statusBadge(status: string) {
+  const normalized = status.trim().toUpperCase()
+  const map: Record<string, { bg: string; color: string; label: string }> = {
+    PENDING: { bg: EMAIL_COLORS.statusPendingBg, color: EMAIL_COLORS.statusPending, label: "Pendente" },
+    AWAITING_ATTENDANCE: { bg: EMAIL_COLORS.statusProgressBg, color: EMAIL_COLORS.statusProgress, label: "Em andamento" },
+    PAUSED: { bg: EMAIL_COLORS.statusPausedBg, color: EMAIL_COLORS.statusPaused, label: "Pausado" },
+    RESOLVED: { bg: EMAIL_COLORS.statusResolvedBg, color: EMAIL_COLORS.statusResolved, label: "Resolvido" },
+  }
+  const entry = map[normalized] ?? {
+    bg: EMAIL_COLORS.statusPendingBg,
+    color: EMAIL_COLORS.statusPending,
+    label: formatStatus(status),
+  }
+  return badge(entry.label, entry.bg, entry.color)
+}
+
+function priorityBadge(priority: string) {
+  const normalized = priority.trim().toUpperCase()
+  const map: Record<string, { bg: string; color: string; label: string }> = {
+    LOW: { bg: EMAIL_COLORS.priorityLowBg, color: EMAIL_COLORS.priorityLow, label: "Baixa" },
+    MEDIUM: { bg: EMAIL_COLORS.priorityMediumBg, color: EMAIL_COLORS.priorityMedium, label: "Média" },
+    HIGH: { bg: EMAIL_COLORS.priorityHighBg, color: EMAIL_COLORS.priorityHigh, label: "Alta" },
+    URGENT: { bg: EMAIL_COLORS.priorityUrgentBg, color: EMAIL_COLORS.priorityUrgent, label: "Urgente" },
+  }
+  const entry = map[normalized] ?? {
+    bg: EMAIL_COLORS.priorityMediumBg,
+    color: EMAIL_COLORS.priorityMedium,
+    label: formatPriority(priority),
+  }
+  return badge(entry.label, entry.bg, entry.color)
+}
+
+function Row({ label, value }: { label: string; value: React.ReactNode }) {
+  return (
+    <tr>
+      <td style={{ padding: "6px 10px 6px 0", color: EMAIL_COLORS.textMuted, fontSize: "12px", verticalAlign: "top" }}>
+        {label}
+      </td>
+      <td style={{ padding: "6px 0", color: EMAIL_COLORS.textPrimary, fontSize: "14px" }}>{value}</td>
+    </tr>
+  )
+}
+
+export function TicketCard({ ticket }: { ticket: TicketCardData }) {
+  return (
+    <Section
+      style={{
+        backgroundColor: EMAIL_COLORS.background,
+        borderRadius: "12px",
+        padding: "16px",
+        marginTop: "18px",
+      }}
+    >
+      <table cellPadding="0" cellSpacing="0" role="presentation" style={{ width: "100%" }}>
+        <tbody>
+          <Row label="Chamado" value={<Text style={{ margin: 0, fontWeight: 800 }}>#{ticket.reference}</Text>} />
+          <Row label="Assunto" value={ticket.subject} />
+          {ticket.companyName ? <Row label="Empresa" value={ticket.companyName} /> : null}
+          {ticket.status ? <Row label="Status" value={statusBadge(ticket.status)} /> : null}
+          {ticket.priority ? <Row label="Prioridade" value={priorityBadge(ticket.priority)} /> : null}
+          {ticket.requesterName ? <Row label="Solicitante" value={ticket.requesterName} /> : null}
+          {ticket.assigneeName ? <Row label="Responsável" value={ticket.assigneeName} /> : null}
+        </tbody>
+      </table>
+    </Section>
+  )
+}