El design system de correos con la marca FESA y el adapter de Resend.
import {
EmailLayout,
SectionBar,
MetaBox,
CtaButton,
CodeBox,
AlertBox,
ResendEmailService,
} from "@fesa/components/email";Las variantes que existían (una por sistema, con la marca quemada) unificadas en el theme que ya usa FesaStore en producción para sus 16 correos.
EmailLayout
El shell completo: cabecera con el logo FESA y el título, contenido, y pie legal con enlace al centro de ayuda y copyright del año. Compatible con clientes de correo (Tailwind de @react-email, estilos inline).
export function WelcomeEmail({ name }: { name: string }) {
return (
<EmailLayout preview="Tu cuenta está lista" title="Bienvenido">
<Text>Hola {name}, tu cuenta ya está activa.</Text>
<CtaButton href="https://app.fesastore.com.pa/login">Entrar</CtaButton>
</EmailLayout>
);
}| Prop | Tipo | Descripción |
|---|---|---|
preview | string | Texto de previsualización del cliente de correo |
title | string | Título que va a la derecha del logo en la cabecera |
children | ReactNode | El cuerpo del correo |
El logo y la URL base salen de emailBaseUrl (process.env.NEXT_PUBLIC_URL).
Bloques
Todo lo que arma un correo de la casa sin reinventar estilos inline:
| Bloque | Para qué |
|---|---|
SectionBar | Barra gris de sección con título |
MetaBox | Rejilla de pares etiqueta/valor (dos por fila) — para datos de orden, cotización, etc. |
CtaButton | Botón de acción azul FESA |
CodeBox | Código grande centrado (verificación 2FA, OTP) con nota opcional |
AlertBox | Aviso con tono info / warning / danger (borde y fondo por tono) |
MetaItem ({ label, value }) y AlertTone se exportan para tipar los datos.
ResendEmailService
Adapter del puerto IEmailService sobre Resend: send({ to, subject, react | html, attachments }). Peer opcional: solo lo instala la app que lo usa.
Las plantillas concretas viven en cada app
Verificación, reset, órdenes, cotizaciones… son copy de producto y quedan en su app. Lo que se
comparte es el sistema visual: cualquier plantilla nueva se arma sobre EmailLayout + los
bloques y sale con la cara FESA correcta.