548c2e44d4
- Usa @react-email/components nos templates para evitar módulos ausentes no Bun 1.3.1\n- Ajusta preload do bun test para expor global Element (evita crash do PrismJS)
102 lines
3.7 KiB
TypeScript
102 lines
3.7 KiB
TypeScript
import * as React from "react"
|
|
import { Section, Text } from "@react-email/components"
|
|
|
|
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>
|
|
)
|
|
}
|