// 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 SubscriptionConfirmationProps { companyName: string; url: string; userName: string; planName: string; planPrice: string; cycleLabel: string; nextBillingDate: string; subtotal: string; tax: string; total: string; } export const SubscriptionConfirmation = ({ companyName, url, userName, planName, planPrice, cycleLabel, nextBillingDate, subtotal, tax, total, }: SubscriptionConfirmationProps) => { return ( You're subscribed to {companyName} {planName}

Subscription confirmed Hi {userName}, thanks for subscribing to the {planName}{' '} plan with {companyName}. Your subscription is active and you have access to everything included in your plan. You're billed {planPrice} per {cycleLabel}. Your next charge is on {nextBillingDate}. You can update payment details or cancel anytime from your account. Questions about billing or your plan? Reply to this email and we're happy to help.

Subtotal {subtotal}

Tax {tax}

Total {total}

Get started

Set up your workspace Complete the basics to get the most out of your account. Complete Setup

Invite your team Collaboration works best when everyone's in. Invite Teammates

Need help? Find guides, tips, and best practices anytime, visit our{' '} Help Center .

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.

); }; SubscriptionConfirmation.PreviewProps = { companyName: 'Collage', url: 'https://example.com/', userName: 'Alex', planName: 'Pro', planPrice: '$29', cycleLabel: 'month', nextBillingDate: 'April 22, 2026', subtotal: '$29.00', tax: '$0.00', total: '$29.00', } satisfies SubscriptionConfirmationProps; export default SubscriptionConfirmation;