From 0304c01e65fd96e3ec578103ff5dfc0e85f406a2 Mon Sep 17 00:00:00 2001
From: Anna Maria
Date: Sun, 19 Apr 2026 14:40:58 -0300
Subject: [PATCH 1/3] feat(demo): add ecommerce order email templates
---
.../Community/ecommerce/01-order-created.tsx | 186 ++++++++++++++
.../ecommerce/02-order-confirmed.tsx | 195 +++++++++++++++
.../Community/ecommerce/03-order-shipped.tsx | 229 ++++++++++++++++++
.../ecommerce/04-order-delivered.tsx | 223 +++++++++++++++++
4 files changed, 833 insertions(+)
create mode 100644 apps/demo/emails/Community/ecommerce/01-order-created.tsx
create mode 100644 apps/demo/emails/Community/ecommerce/02-order-confirmed.tsx
create mode 100644 apps/demo/emails/Community/ecommerce/03-order-shipped.tsx
create mode 100644 apps/demo/emails/Community/ecommerce/04-order-delivered.tsx
diff --git a/apps/demo/emails/Community/ecommerce/01-order-created.tsx b/apps/demo/emails/Community/ecommerce/01-order-created.tsx
new file mode 100644
index 0000000000..17bcc86891
--- /dev/null
+++ b/apps/demo/emails/Community/ecommerce/01-order-created.tsx
@@ -0,0 +1,186 @@
+import {
+ Body,
+ Column,
+ Container,
+ Head,
+ Html,
+ Img,
+ Link,
+ Preview,
+ Row,
+ Section,
+ Tailwind,
+ Text,
+} from 'react-email';
+import tailwindConfig from '../../tailwind.config';
+
+const demoProductImageUrl = 'https://placehold.co/64x64';
+
+const demoDefaultExternalUrl = 'https://resend.com/emails';
+
+interface OrderItem {
+ name: string;
+ quantity: number;
+ price: number;
+ image: string;
+}
+
+const demoOrderItems: OrderItem[] = [
+ {
+ name: 'Wireless noise-canceling headphones',
+ quantity: 2,
+ price: 150.0,
+ image: demoProductImageUrl,
+ },
+];
+
+interface OrderCreatedEmailProps {
+ companyName?: string;
+ customerName?: string;
+ orderNumber?: string;
+ expectedDelivery?: string;
+ items?: OrderItem[];
+ subtotal?: number;
+ total?: number;
+ helpCenterUrl?: string;
+ unsubscribeUrl?: string;
+}
+
+export const OrderCreatedEmail = ({
+ companyName = 'Resend Ecommerce',
+ customerName = 'Anna Maria',
+ orderNumber = '1234567890',
+ expectedDelivery = 'Monday, April 28, 2026',
+ items = demoOrderItems,
+ subtotal = 300.0,
+ total = 300.0,
+ helpCenterUrl = demoDefaultExternalUrl,
+ unsubscribeUrl = demoDefaultExternalUrl,
+}: OrderCreatedEmailProps) => (
+
+
+
+
+
+ {companyName}: we've received your order #{orderNumber} and will
+ keep you updated.
+
+
+
+
+
+ {companyName}
+
+
+ Order created
+
+
+ Order #{orderNumber}
+
+
+
+
+
+ Hi {customerName},
+
+
+ Thank you for your order. We've received it and will send a
+ shipping notification once your items are on the way.
+
+
+
+
+ Expected delivery
+
+
+ {expectedDelivery}
+
+
+
+
+ Order summary
+
+
+
+ {items.map((item, i) => (
+
+
+ 
+
+
+
+ {item.name}
+
+
+ Qty: {item.quantity}
+
+
+
+ ${item.price.toFixed(2)}
+
+
+ ))}
+
+
+
+
+ Subtotal
+
+ ${subtotal.toFixed(2)}
+
+
+
+
+ Total
+
+
+ ${total.toFixed(2)}
+
+
+
+
+
+
+
+ Questions about your order? Reply to this email or visit our{' '}
+
+ Help Center
+
+ .
+
+
+ {companyName}
+
+
+
+
+
+
+
+ You received this email because you placed an order.{' '}
+
+ Unsubscribe
+
+
+
+
+
+
+
+
+
+);
+
+export default OrderCreatedEmail;
diff --git a/apps/demo/emails/Community/ecommerce/02-order-confirmed.tsx b/apps/demo/emails/Community/ecommerce/02-order-confirmed.tsx
new file mode 100644
index 0000000000..62f9d58e42
--- /dev/null
+++ b/apps/demo/emails/Community/ecommerce/02-order-confirmed.tsx
@@ -0,0 +1,195 @@
+import {
+ Body,
+ Column,
+ Container,
+ Head,
+ Html,
+ Img,
+ Link,
+ Preview,
+ Row,
+ Section,
+ Tailwind,
+ Text,
+} from 'react-email';
+import tailwindConfig from '../../tailwind.config';
+
+const demoProductImageUrl = 'https://placehold.co/64x64';
+
+const demoDefaultExternalUrl = 'https://resend.com/emails';
+
+interface OrderItem {
+ name: string;
+ quantity: number;
+ price: number;
+ image: string;
+}
+
+const demoOrderItems: OrderItem[] = [
+ {
+ name: 'Wireless noise-canceling headphones',
+ quantity: 2,
+ price: 150.0,
+ image: demoProductImageUrl,
+ },
+];
+
+interface OrderConfirmedEmailProps {
+ companyName?: string;
+ customerName?: string;
+ orderNumber?: string;
+ paymentMethod?: string;
+ items?: OrderItem[];
+ subtotal?: number;
+ total?: number;
+ helpCenterUrl?: string;
+ unsubscribeUrl?: string;
+}
+
+export const OrderConfirmedEmail = ({
+ companyName = 'Resend Ecommerce',
+ customerName = 'Anna Maria',
+ orderNumber = '1234567890',
+ paymentMethod = 'Credit card ending in 2032',
+ items = demoOrderItems,
+ subtotal = 300.0,
+ total = 300.0,
+ helpCenterUrl = demoDefaultExternalUrl,
+ unsubscribeUrl = demoDefaultExternalUrl,
+}: OrderConfirmedEmailProps) => (
+
+
+