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

emails/simple-notification-email.tsx

@@ -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