93 lines
3.1 KiB
TypeScript
93 lines
3.1 KiB
TypeScript
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
|