Emails

13 modèles d'emails transactionnels construits avec React Email, envoyés via Resend depuis les Edge Functions.

Vue d'ensemble

ScaleRocket inclut 13 modèles d'emails pré-construits utilisant React Email et les envoie via Resend. Les modèles se trouvent dans packages/emails/ et sont envoyés depuis les Supabase Edge Functions.

Modèles

Modèle	Déclencheur	Description
`welcome`	Après l'inscription de l'utilisateur	Message de bienvenue avec les étapes de démarrage
`onboarding-day3`	3 jours après l'inscription (cron)	Conseils et guide de suivi d'onboarding
`trial-started`	Quand l'essai commence	Confirme l'activation de l'essai avec les détails
`trial-ending`	3 jours avant la fin de l'essai (cron)	Rappel de mise à niveau avant l'expiration de l'essai
`subscription-activated`	Après un paiement réussi	Confirme le nouvel abonnement et les détails du plan
`payment-failed`	Quand un paiement échoue	Alerte avec informations de relance et lien de mise à jour de carte
`payment-recovered`	Quand un paiement échoué est récupéré	Confirme que le problème de paiement est résolu
`invoice`	Facture mensuelle générée	Reçu avec le montant et le lien de facture
`plan-changed`	Quand l'utilisateur passe à un plan supérieur/inférieur	Confirme le changement de plan avec les détails du nouveau plan
`goodbye`	Quand l'abonnement est annulé	Confirmation d'annulation avec la date de fin d'accès
`winback`	7 jours après l'annulation (cron)	Offre de reconquête pour se réabonner
`feedback-request`	14 jours après l'inscription (cron)	Demande de retour d'expérience sur le produit
`inactivity`	30 jours sans connexion (cron)	Incitation au réengagement pour les utilisateurs inactifs

Anatomie d'un modèle

Chaque modèle est un composant React dans packages/emails/src/templates/ :

// packages/emails/src/templates/welcome.tsx
import {
  Body,
  Container,
  Head,
  Heading,
  Html,
  Link,
  Preview,
  Text,
} from "@react-email/components";

interface WelcomeEmailProps {
  name: string;
  loginUrl: string;
}

export function WelcomeEmail({ name, loginUrl }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>Welcome to ScaleRocket</Preview>
      <Body style={main}>
        <Container style={container}>
          <Heading style={h1}>Welcome, {name}!</Heading>
          <Text style={text}>
            Thanks for signing up. Your account is ready.
          </Text>
          <Link href={loginUrl} style={button}>
            Go to Dashboard
          </Link>
        </Container>
      </Body>
    </Html>
  );
}

const main = { backgroundColor: "#f6f9fc", fontFamily: "sans-serif" };
const container = { margin: "0 auto", padding: "40px 20px", maxWidth: "560px" };
const h1 = { color: "#1a1a1a", fontSize: "24px" };
const text = { color: "#4a4a4a", fontSize: "16px", lineHeight: "26px" };
const button = {
  backgroundColor: "#000",
  color: "#fff",
  padding: "12px 24px",
  borderRadius: "6px",
  textDecoration: "none",
  display: "inline-block",
};

Personnalisation des modèles

Changer l'image de marque

Mettez à jour les couleurs, le logo et le nom de l'entreprise dans le layout partagé :

// packages/emails/src/components/layout.tsx
export const brandColors = {
  primary: "#000000",
  background: "#f6f9fc",
  text: "#1a1a1a",
};

export const companyInfo = {
  name: "ScaleRocket",
  logo: "https://yourdomain.com/logo.png",
  address: "Your Company Address",
};

Modifier le contenu

Modifiez directement le fichier du modèle. Tous les modèles exportent un composant React avec des props typées.

Ajouter un nouveau modèle

Créez le modèle dans packages/emails/src/templates/my-email.tsx.
Exportez-le depuis packages/emails/src/index.ts :

export { MyEmail } from "./templates/my-email";

Envoyez-le depuis une Edge Function (voir ci-dessous).

Envoi d'emails depuis les Edge Functions

Le package packages/emails/ exporte un utilitaire sendEmail :

// packages/emails/src/send.ts
import { Resend } from "resend";

const resend = new Resend(Deno.env.get("RESEND_API_KEY"));

export async function sendEmail({
  to,
  subject,
  react,
}: {
  to: string;
  subject: string;
  react: React.ReactElement;
}) {
  const { data, error } = await resend.emails.send({
    from: "ScaleRocket <noreply@yourdomain.com>",
    to,
    subject,
    react,
  });

  if (error) {
    console.error("Email send failed:", error);
    throw error;
  }

  return data;
}

Utilisez-le dans une Edge Function :

// supabase/functions/send-welcome/index.ts
import { sendEmail } from "@saas/emails";
import { WelcomeEmail } from "@saas/emails";

await sendEmail({
  to: user.email,
  subject: "Welcome to ScaleRocket!",
  react: WelcomeEmail({
    name: user.full_name,
    loginUrl: `${SITE_URL}/auth/login`,
  }),
});

Mode aperçu

Prévisualisez les emails en local pendant le développement :

cd packages/emails
pnpm dev

Cela démarre un serveur local sur http://localhost:3000 où vous pouvez parcourir et prévisualiser tous les modèles avec des données d'exemple. Chaque fichier de modèle peut exporter un aperçu default :

// At the bottom of welcome.tsx
export default function Preview() {
  return <WelcomeEmail name="John" loginUrl="https://app.example.com/login" />;
}

Fini ? Marquez cette page comme terminée.

Emails

On this page