// Get the full source code, including the theme and Tailwind config: // https://github.com/resend/react-email/tree/canary/apps/demo/emails import { Body, Button, Column, Container, Head, Html, Img, Link, Preview, Row, Section, Tailwind, Text, } from 'react-email'; import { CollageFonts } from './collage-fonts'; import { collageTailwindConfig } from './theme'; const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : ''; interface SubscriptionUpdateProps { companyName: string; url: string; userName: string; planName: string; planPrice: string; cycleLabel: string; nextBillingDate: string; } export const SubscriptionUpdate = ({ companyName, url, userName, planName, planPrice, cycleLabel, nextBillingDate, }: SubscriptionUpdateProps) => { return ( Your {companyName} plan renewed ({planName})

Plan renewed Hi {userName}. Your {companyName} subscription renewed for another {cycleLabel}. Here's a quick summary of your plan and billing. You're on the {planName} plan at {planPrice} per{' '} {cycleLabel}. Your next charge is on {nextBillingDate}. Review invoices, update payment details, or change plans anytime in your account. Something look off? Reply to this email and we'll help sort it out.

Collage is the workspace where your team keeps projects, context, and updates together—from first idea to launch.

123 Market Street, Floor 1
Tech City, CA, 94102 Unsubscribe {' '} from {companyName} marketing emails.

); }; SubscriptionUpdate.PreviewProps = { companyName: 'Collage', url: 'https://example.com/', userName: 'Alex', planName: 'Pro', planPrice: '$29', cycleLabel: 'month', nextBillingDate: 'April 22, 2026', } satisfies SubscriptionUpdateProps; export default SubscriptionUpdate;