// 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, Heading, Html, Img, Link, Preview, Row, Section, Tailwind, Text, } from 'react-email'; import { barebonesBoxedTailwindConfig } from './theme'; import { BarebonesFonts } from './theme-fonts'; 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} {planName} subscription was updated

{companyName}

Your plan was updated

Hi {userName},

Your {companyName} subscription has been updated. Here's a summary of your current plan and billing. You're on {companyName} {planName} at {planPrice} per{' '} {cycleLabel}. Your next charge is on {nextBillingDate}. You can review invoices, update payment details, or change your plan from your account settings.

Something look off?
Reply to this email and we'll help sort it out.

{/* Footer */}

Barebones is the catchy slogan that perfectly encapsulates the vision of our company.

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

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