// lib/email/confirmation-template.tsx // React Email confirmation template (Spanish, Peruvian register). // // Copy rules (BUILD_CONTRACT convention 7): NO em-dashes (use periods, commas, // colons, parentheses, line breaks), NO emojis, Peruvian register (tu/eres/ // quieres, never voseo). Currency renders as "S/" via formatPEN. // // Email clients do not support Tailwind utility classes, so brand colors are // inline styles taken from the design tokens in app/globals.css / DESIGN.md // (primary #dc0d15, ink #111111, muted #555555). React Email components render // to email-safe HTML tables. Import path is the stable 1.x barrel // "@react-email/components". import { Html, Head, Preview, Body, Container, Section, Heading, Text, Hr, } from "@react-email/components"; import * as React from "react"; import { formatPEN, type Cents } from "@/lib/money"; export interface ConfirmationEmailProps { /** Buyer's name, shown in the greeting. */ name: string; /** Display name of the raffle event the entry belongs to (FR-1.5.2). */ raffleName: string; /** Number of chances purchased (FR-1.5.2). */ chances: number; /** Authoritative amount paid, integer cents PEN (FR-1.5.2). */ amountCents: Cents; /** Sequential ticket numbers minted for this purchase, if available. */ ticketNos?: number[]; } // ── Brand tokens (inline, from app/globals.css) ── const COLOR_PRIMARY = "#dc0d15"; const COLOR_INK = "#111111"; const COLOR_MUTED = "#555555"; const COLOR_CANVAS = "#ffffff"; const COLOR_HAIRLINE = "#eeeeee"; const fontStack = "'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"; /** * The confirmation email body. Pure presentation: receives already-computed, * server-authoritative values (the amount is never recomputed here). Rendered to * HTML by sendConfirmationEmail before sending. */ export function ConfirmationEmail({ name, raffleName, chances, amountCents, ticketNos, }: ConfirmationEmailProps) { const chancesLabel = chances === 1 ? "oportunidad" : "oportunidades"; const previewText = `Tu pago está confirmado. Tienes ${chances} ${chancesLabel} en ${raffleName}.`; return ( {previewText}

Teletón Perú

Tu participación está confirmada Hola {name}, Recibimos tu pago y ya quedaste dentro de la rifa. Gracias por apoyar a Teletón. Aquí tienes el resumen de tu participación.

Rifa {raffleName}

Oportunidades {chances} {chancesLabel}

Monto pagado {formatPEN(amountCents)}

{ticketNos && ticketNos.length > 0 ? (

{ticketNos.length === 1 ? "Tu número" : "Tus números"} {ticketNos.join(", ")}

) : null}

Guarda este correo. Es la constancia de tu participación. El sorteo se realizará en la fecha publicada en las bases oficiales, de forma transparente y verificable.

Este correo se envía para confirmar tu participación en la rifa de Teletón Perú. Si no realizaste esta compra, escríbenos respondiendo a este mensaje.

); } // Plain default export so a JSX-first sender (Resend `react` prop) can use it // directly if ever preferred. export default ConfirmationEmail; // ── Inline styles (email-safe) ── const bodyStyle: React.CSSProperties = { backgroundColor: "#f4f4f4", margin: 0, padding: "24px 0", fontFamily: fontStack, }; const containerStyle: React.CSSProperties = { maxWidth: "560px", margin: "0 auto", }; const headerStyle: React.CSSProperties = { padding: "8px 0 16px", textAlign: "center" as const, }; const brandStyle: React.CSSProperties = { color: COLOR_PRIMARY, fontSize: "20px", fontWeight: 700, letterSpacing: "0.02em", margin: 0, }; const cardStyle: React.CSSProperties = { backgroundColor: COLOR_CANVAS, borderRadius: "12px", padding: "32px", border: `1px solid ${COLOR_HAIRLINE}`, }; const headingStyle: React.CSSProperties = { color: COLOR_INK, fontSize: "24px", fontWeight: 700, lineHeight: 1.2, margin: "0 0 16px", }; const paragraphStyle: React.CSSProperties = { color: COLOR_INK, fontSize: "16px", lineHeight: 1.5, margin: "0 0 12px", }; const mutedParagraphStyle: React.CSSProperties = { color: COLOR_MUTED, fontSize: "14px", lineHeight: 1.5, margin: "0", }; const hrStyle: React.CSSProperties = { borderColor: COLOR_HAIRLINE, borderStyle: "solid", borderWidth: "1px 0 0", margin: "20px 0", }; const detailRowStyle: React.CSSProperties = { margin: "0 0 12px", }; const detailLabelStyle: React.CSSProperties = { color: COLOR_MUTED, fontSize: "13px", textTransform: "uppercase" as const, letterSpacing: "0.04em", margin: "0 0 2px", }; const detailValueStyle: React.CSSProperties = { color: COLOR_INK, fontSize: "18px", fontWeight: 600, margin: 0, }; const footerStyle: React.CSSProperties = { padding: "20px 8px 0", textAlign: "center" as const, }; const footerTextStyle: React.CSSProperties = { color: COLOR_MUTED, fontSize: "12px", lineHeight: 1.5, margin: 0, };