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)
75 lines
2.6 KiB
TypeScript
75 lines
2.6 KiB
TypeScript
import * as React from "react"
|
|
import { Button, Heading, Hr, Section, Text } from "@react-email/components"
|
|
|
|
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
|