feat(email): adota React Email em notificações e automações
This commit is contained in:
esdrasrenan
parent
58a1ed6b36
commit
4306b0504d
18 changed files with 940 additions and 337 deletions
80
emails/_components/layout.tsx
Normal file
80
emails/_components/layout.tsx
Normal file
|
|
@ -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 (
|
||||
<Html lang="pt-BR">
|
||||
<Head />
|
||||
{preview ? <Preview>{preview}</Preview> : null}
|
||||
<Body
|
||||
style={{
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
backgroundColor: EMAIL_COLORS.background,
|
||||
fontFamily: "Arial, Helvetica, sans-serif",
|
||||
color: EMAIL_COLORS.textPrimary,
|
||||
}}
|
||||
>
|
||||
<Container style={{ padding: "28px 0" }}>
|
||||
<Section
|
||||
style={{
|
||||
backgroundColor: EMAIL_COLORS.card,
|
||||
border: `1px solid ${EMAIL_COLORS.border}`,
|
||||
borderRadius: "16px",
|
||||
padding: "24px",
|
||||
}}
|
||||
>
|
||||
<table cellPadding="0" cellSpacing="0" role="presentation" style={{ width: "100%" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ verticalAlign: "middle" }}>
|
||||
<Img
|
||||
src={getEmailAssetUrl("/logo-raven.png")}
|
||||
alt="Raven"
|
||||
width="36"
|
||||
height="36"
|
||||
style={{ borderRadius: "10px", display: "block" }}
|
||||
/>
|
||||
</td>
|
||||
<td style={{ verticalAlign: "middle", paddingLeft: "12px" }}>
|
||||
<Text style={{ margin: 0, fontSize: "18px", fontWeight: 800, color: EMAIL_COLORS.textPrimary }}>
|
||||
Raven
|
||||
</Text>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<Text style={{ margin: "16px 0 0 0", fontSize: "12px", color: EMAIL_COLORS.textMuted }}>
|
||||
{title}
|
||||
</Text>
|
||||
|
||||
{children}
|
||||
</Section>
|
||||
|
||||
<Text style={{ margin: "14px 0 0 0", fontSize: "12px", color: EMAIL_COLORS.textMuted, textAlign: "center" }}>
|
||||
© {new Date().getFullYear()} Raven — Rever Tecnologia
|
||||
</Text>
|
||||
</Container>
|
||||
</Body>
|
||||
</Html>
|
||||
)
|
||||
}
|
||||
103
emails/_components/ticket-card.tsx
Normal file
103
emails/_components/ticket-card.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
28
emails/_components/tokens.ts
Normal file
28
emails/_components/tokens.ts
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
export const EMAIL_COLORS = {
|
||||
primary: "#00e8ff",
|
||||
primaryDark: "#00c4d6",
|
||||
primaryForeground: "#020617",
|
||||
background: "#f8fafc",
|
||||
card: "#ffffff",
|
||||
border: "#e2e8f0",
|
||||
textPrimary: "#0f172a",
|
||||
textSecondary: "#334155",
|
||||
textMuted: "#64748b",
|
||||
statusPending: "#64748b",
|
||||
statusPendingBg: "#f1f5f9",
|
||||
statusProgress: "#0ea5e9",
|
||||
statusProgressBg: "#e0f2fe",
|
||||
statusPaused: "#f59e0b",
|
||||
statusPausedBg: "#fef3c7",
|
||||
statusResolved: "#10b981",
|
||||
statusResolvedBg: "#d1fae5",
|
||||
priorityLow: "#64748b",
|
||||
priorityLowBg: "#f1f5f9",
|
||||
priorityMedium: "#0a4760",
|
||||
priorityMediumBg: "#dff1fb",
|
||||
priorityHigh: "#7d3b05",
|
||||
priorityHighBg: "#fde8d1",
|
||||
priorityUrgent: "#8b0f1c",
|
||||
priorityUrgentBg: "#fbd9dd",
|
||||
} as const
|
||||
|
||||
35
emails/_components/utils.ts
Normal file
35
emails/_components/utils.ts
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
export function getEmailAssetUrl(path: string) {
|
||||
const normalizedPath = path.startsWith("/") ? path : `/${path}`
|
||||
const baseUrl = process.env.NEXT_PUBLIC_APP_URL || process.env.APP_BASE_URL || ""
|
||||
if (baseUrl) return `${baseUrl}${normalizedPath}`
|
||||
return `/static${normalizedPath}`
|
||||
}
|
||||
|
||||
export function formatStatus(statusRaw: string) {
|
||||
const status = statusRaw.trim().toUpperCase()
|
||||
const labels: Record<string, string> = {
|
||||
PENDING: "Pendente",
|
||||
AWAITING_ATTENDANCE: "Em andamento",
|
||||
PAUSED: "Pausado",
|
||||
RESOLVED: "Resolvido",
|
||||
}
|
||||
return labels[status] ?? statusRaw
|
||||
}
|
||||
|
||||
export function formatPriority(priorityRaw: string) {
|
||||
const priority = priorityRaw.trim().toUpperCase()
|
||||
const labels: Record<string, string> = {
|
||||
LOW: "Baixa",
|
||||
MEDIUM: "Média",
|
||||
HIGH: "Alta",
|
||||
URGENT: "Urgente",
|
||||
}
|
||||
return labels[priority] ?? priorityRaw
|
||||
}
|
||||
|
||||
export function normalizeTextToParagraphs(text: string): string[] {
|
||||
const trimmed = text.replace(/\r\n/g, "\n").trim()
|
||||
if (!trimmed) return []
|
||||
return trimmed.split(/\n{2,}/g).map((p) => p.trim()).filter(Boolean)
|
||||
}
|
||||
|
||||
93
emails/automation-email.tsx
Normal file
93
emails/automation-email.tsx
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
import * as React from "react"
|
||||
import { Button } from "@react-email/button"
|
||||
import { Heading } from "@react-email/heading"
|
||||
import { Hr } from "@react-email/hr"
|
||||
import { Section } from "@react-email/section"
|
||||
import { Text } from "@react-email/text"
|
||||
|
||||
import { RavenEmailLayout } from "./_components/layout"
|
||||
import { EMAIL_COLORS } from "./_components/tokens"
|
||||
import { TicketCard, type TicketCardData } from "./_components/ticket-card"
|
||||
import { normalizeTextToParagraphs } from "./_components/utils"
|
||||
|
||||
export type AutomationEmailProps = {
|
||||
title: string
|
||||
message: string
|
||||
ticket: TicketCardData
|
||||
ctaLabel: string
|
||||
ctaUrl: string
|
||||
preview?: string
|
||||
}
|
||||
|
||||
export default function AutomationEmail(props: AutomationEmailProps) {
|
||||
const paragraphs = normalizeTextToParagraphs(props.message)
|
||||
const preview = props.preview ?? `Atualização do chamado #${props.ticket.reference}`
|
||||
|
||||
return (
|
||||
<RavenEmailLayout title={props.title} preview={preview}>
|
||||
<Heading style={{ margin: "10px 0 6px 0", fontSize: "20px", lineHeight: "1.3", color: EMAIL_COLORS.textPrimary }}>
|
||||
{props.title}
|
||||
</Heading>
|
||||
|
||||
{paragraphs.length > 0 ? (
|
||||
paragraphs.map((p, idx) => (
|
||||
<Text key={idx} style={{ margin: "0 0 12px 0", fontSize: "14px", lineHeight: "1.65", color: EMAIL_COLORS.textSecondary }}>
|
||||
{p}
|
||||
</Text>
|
||||
))
|
||||
) : (
|
||||
<Text style={{ margin: "0 0 12px 0", fontSize: "14px", lineHeight: "1.65", color: EMAIL_COLORS.textSecondary }}>
|
||||
{props.message}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
<TicketCard ticket={props.ticket} />
|
||||
|
||||
<Section style={{ marginTop: "18px" }}>
|
||||
<Button
|
||||
href={props.ctaUrl}
|
||||
style={{
|
||||
display: "inline-block",
|
||||
backgroundColor: EMAIL_COLORS.primary,
|
||||
color: EMAIL_COLORS.primaryForeground,
|
||||
textDecoration: "none",
|
||||
borderRadius: "12px",
|
||||
padding: "12px 18px",
|
||||
fontWeight: 800,
|
||||
fontSize: "14px",
|
||||
border: `1px solid ${EMAIL_COLORS.primaryDark}`,
|
||||
}}
|
||||
>
|
||||
{props.ctaLabel}
|
||||
</Button>
|
||||
</Section>
|
||||
|
||||
<Hr style={{ borderColor: EMAIL_COLORS.border, margin: "18px 0" }} />
|
||||
|
||||
<Text style={{ margin: 0, fontSize: "12px", color: EMAIL_COLORS.textMuted }}>
|
||||
Se o botão não funcionar, copie e cole esta URL no navegador:
|
||||
<br />
|
||||
<a href={props.ctaUrl} style={{ color: EMAIL_COLORS.primaryDark, textDecoration: "none" }}>
|
||||
{props.ctaUrl}
|
||||
</a>
|
||||
</Text>
|
||||
</RavenEmailLayout>
|
||||
)
|
||||
}
|
||||
|
||||
AutomationEmail.PreviewProps = {
|
||||
title: "Atualização do chamado #41025",
|
||||
message:
|
||||
"Olá Renan!\n\nSeu chamado teve uma atualização automática (automações do Raven). Clique abaixo para abrir o chamado e ver os detalhes.",
|
||||
ticket: {
|
||||
reference: 41025,
|
||||
subject: "Computador reiniciando sozinho",
|
||||
companyName: "Paulicon Contábil",
|
||||
status: "AWAITING_ATTENDANCE",
|
||||
priority: "URGENT",
|
||||
requesterName: "Renan",
|
||||
assigneeName: "Administrador",
|
||||
},
|
||||
ctaLabel: "Abrir chamado",
|
||||
ctaUrl: "https://tickets.esdrasrenan.com.br/portal/tickets/abc",
|
||||
} satisfies AutomationEmailProps
|
||||
79
emails/simple-notification-email.tsx
Normal file
79
emails/simple-notification-email.tsx
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
import * as React from "react"
|
||||
import { Button } from "@react-email/button"
|
||||
import { Heading } from "@react-email/heading"
|
||||
import { Hr } from "@react-email/hr"
|
||||
import { Section } from "@react-email/section"
|
||||
import { Text } from "@react-email/text"
|
||||
|
||||
import { RavenEmailLayout } from "./_components/layout"
|
||||
import { EMAIL_COLORS } from "./_components/tokens"
|
||||
import { normalizeTextToParagraphs } from "./_components/utils"
|
||||
|
||||
export type SimpleNotificationEmailProps = {
|
||||
title: string
|
||||
message: string
|
||||
ctaLabel: string
|
||||
ctaUrl: string
|
||||
preview?: string
|
||||
}
|
||||
|
||||
export default function SimpleNotificationEmail(props: SimpleNotificationEmailProps) {
|
||||
const paragraphs = normalizeTextToParagraphs(props.message)
|
||||
const preview = props.preview ?? props.message.slice(0, 90)
|
||||
|
||||
return (
|
||||
<RavenEmailLayout title={props.title} preview={preview}>
|
||||
<Heading style={{ margin: "10px 0 6px 0", fontSize: "20px", lineHeight: "1.3", color: EMAIL_COLORS.textPrimary }}>
|
||||
{props.title}
|
||||
</Heading>
|
||||
|
||||
{paragraphs.length > 0 ? (
|
||||
paragraphs.map((p, idx) => (
|
||||
<Text key={idx} style={{ margin: "0 0 12px 0", fontSize: "14px", lineHeight: "1.65", color: EMAIL_COLORS.textSecondary }}>
|
||||
{p}
|
||||
</Text>
|
||||
))
|
||||
) : (
|
||||
<Text style={{ margin: "0 0 12px 0", fontSize: "14px", lineHeight: "1.65", color: EMAIL_COLORS.textSecondary }}>
|
||||
{props.message}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
<Section style={{ marginTop: "18px" }}>
|
||||
<Button
|
||||
href={props.ctaUrl}
|
||||
style={{
|
||||
display: "inline-block",
|
||||
backgroundColor: EMAIL_COLORS.primary,
|
||||
color: EMAIL_COLORS.primaryForeground,
|
||||
textDecoration: "none",
|
||||
borderRadius: "12px",
|
||||
padding: "12px 18px",
|
||||
fontWeight: 800,
|
||||
fontSize: "14px",
|
||||
border: `1px solid ${EMAIL_COLORS.primaryDark}`,
|
||||
}}
|
||||
>
|
||||
{props.ctaLabel}
|
||||
</Button>
|
||||
</Section>
|
||||
|
||||
<Hr style={{ borderColor: EMAIL_COLORS.border, margin: "18px 0" }} />
|
||||
|
||||
<Text style={{ margin: 0, fontSize: "12px", color: EMAIL_COLORS.textMuted }}>
|
||||
Se o botão não funcionar, copie e cole esta URL no navegador:
|
||||
<br />
|
||||
<a href={props.ctaUrl} style={{ color: EMAIL_COLORS.primaryDark, textDecoration: "none" }}>
|
||||
{props.ctaUrl}
|
||||
</a>
|
||||
</Text>
|
||||
</RavenEmailLayout>
|
||||
)
|
||||
}
|
||||
|
||||
SimpleNotificationEmail.PreviewProps = {
|
||||
title: "Nova atualização no seu chamado #41025",
|
||||
message: "Um novo comentário foi adicionado ao chamado. Clique abaixo para visualizar e responder pelo portal.",
|
||||
ctaLabel: "Abrir e responder",
|
||||
ctaUrl: "https://tickets.esdrasrenan.com.br/portal/tickets/abc",
|
||||
} satisfies SimpleNotificationEmailProps
|
||||
BIN
emails/static/logo-raven.png
Normal file
BIN
emails/static/logo-raven.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Loading…
Add table
Add a link
Reference in a new issue