// Get the full source code, including the theme and Tailwind config: // https://github.com/resend/react-email/tree/canary/apps/demo/emails import { Body, Column, Container, Head, Html, Img, Link, Preview, Row, Section, Tailwind, Text, } from 'react-email'; import type { OrderLine } from './order-confirmation'; import { SkinFonts } from './skin-fonts'; import { skinTailwindConfig } from './theme'; const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : ''; type ShippingFaqItem = { title: string; linkLabel: string; linkHref: string; }; interface OrderShippingEmailProps { companyName: string; url: string; } const orderShippingLines: OrderLine[] = [ { name: 'Daily C Serum', quantity: 'x1', imageSrc: `${baseUrl}/static/skin/skin-image-2.png`, }, { name: 'Overnight Repair Cream', quantity: 'x1', imageSrc: `${baseUrl}/static/skin/skin-image-3.png`, }, ]; const getOrderShippingFaqItems = (url: string): ShippingFaqItem[] => [ { title: 'Need to change ship date?', linkLabel: 'See how \u2192', linkHref: url, }, { title: 'Sending to a new address?', linkLabel: 'See how \u2192', linkHref: url, }, ]; export const OrderShippingEmail = ({ companyName, url, }: OrderShippingEmailProps) => { return ( Your {companyName} order #1234567890 has shipped

Your order has shipped Order #1234567890 is on the way. Track your shipment below, we'll email if the carrier reroutes or weather slows delivery.

{'Track your order \u2192'}

{orderShippingLines.map((line, idx) => (

{idx > 0 ? (

) : null}

{line.name} {line.quantity}

))}

{'View order \u2192'}

Common questions

{getOrderShippingFaqItems(url).map((item, idx) => (

{item.title}

{item.linkLabel}

))}

{/* Footer */}

{companyName} crafts thoughtful skincare—barrier-first formulas, honest labels, and routines you'll actually keep.

124 Mercantile Row, Studio 3
Los Angeles, CA, 90013 Unsubscribe {' '} from {companyName} marketing emails.

); }; OrderShippingEmail.PreviewProps = { companyName: 'Skin', url: 'https://example.com/', } satisfies OrderShippingEmailProps; export default OrderShippingEmail;