diff --git a/src/app/dev/emails/[template]/page.tsx b/src/app/dev/emails/[template]/page.tsx
new file mode 100644
index 00000000..702fefa3
--- /dev/null
+++ b/src/app/dev/emails/[template]/page.tsx
@@ -0,0 +1,91 @@
+import { render } from "@react-email/render";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { emailFixtures, getEmailFixture } from "../fixtures";
+
+interface PreviewPageProps {
+ params: Promise<{ template: string }>;
+ searchParams: Promise<{ format?: string }>;
+}
+
+export async function generateStaticParams() {
+ return emailFixtures.map((f) => ({ template: f.slug }));
+}
+
+export default async function EmailPreviewPage({
+ params,
+ searchParams,
+}: PreviewPageProps) {
+ if (process.env.NODE_ENV === "production") {
+ notFound();
+ }
+
+ const { template } = await params;
+ const { format } = await searchParams;
+ const fixture = getEmailFixture(template);
+
+ if (!fixture) {
+ notFound();
+ }
+
+ const element = fixture.render();
+
+ if (format === "text") {
+ const text = await render(element, { plainText: true });
+ return (
+
+ {text}
+
+ );
+ }
+
+ const html = await render(element);
+
+ return (
+
+
+
+ ← All templates
+
+ {fixture.label}
+
+ View plain text
+
+
+
+
+ );
+}
diff --git a/src/app/dev/emails/fixtures.tsx b/src/app/dev/emails/fixtures.tsx
new file mode 100644
index 00000000..a95cd26e
--- /dev/null
+++ b/src/app/dev/emails/fixtures.tsx
@@ -0,0 +1,152 @@
+import { createElement, type ReactElement } from "react";
+import { OrderCanceledEmail } from "@/lib/emails/order-canceled";
+import { OrderConfirmationEmail } from "@/lib/emails/order-confirmation";
+import { PasswordResetEmail } from "@/lib/emails/password-reset";
+import { ShipmentShippedEmail } from "@/lib/emails/shipment-shipped";
+
+interface EmailFixture {
+ slug: string;
+ label: string;
+ render: () => ReactElement;
+}
+
+export const emailFixtures: EmailFixture[] = [
+ {
+ slug: "order-confirmation",
+ label: "Order Confirmation",
+ render: () =>
+ createElement(OrderConfirmationEmail, {
+ orderNumber: "R987654321",
+ customerName: "Jane Smith",
+ items: [
+ {
+ name: "Classic Tote Bag",
+ slug: "classic-tote-bag",
+ quantity: 2,
+ options_text: "Color: Black",
+ display_price: "$29.99",
+ display_total: "$59.98",
+ thumbnail_url: null,
+ },
+ {
+ name: "Organic Cotton T-Shirt",
+ slug: "organic-cotton-t-shirt",
+ quantity: 1,
+ options_text: "Size: M, Color: White",
+ display_price: "$24.99",
+ display_total: "$24.99",
+ thumbnail_url: null,
+ },
+ {
+ name: "Leather Wallet",
+ slug: "leather-wallet",
+ quantity: 1,
+ options_text: "",
+ display_price: "$49.99",
+ display_total: "$49.99",
+ thumbnail_url: null,
+ },
+ ],
+ displayItemTotal: "$134.96",
+ displayDeliveryTotal: "$5.99",
+ displayDiscountTotal: "-$10.00",
+ displayTaxTotal: "$11.25",
+ displayTotal: "$142.20",
+ shippingAddress: {
+ full_name: "Jane Smith",
+ address1: "123 Main Street",
+ address2: "Apt 4B",
+ city: "New York",
+ state_text: "NY",
+ postal_code: "10001",
+ country_name: "United States",
+ phone: "+1 (555) 123-4567",
+ },
+ billingAddress: {
+ full_name: "Jane Smith",
+ address1: "123 Main Street",
+ address2: "Apt 4B",
+ city: "New York",
+ state_text: "NY",
+ postal_code: "10001",
+ country_name: "United States",
+ },
+ deliveryMethodName: "USPS Priority Mail (2-3 days)",
+ }),
+ },
+ {
+ slug: "order-canceled",
+ label: "Order Canceled",
+ render: () =>
+ createElement(OrderCanceledEmail, {
+ orderNumber: "R987654321",
+ customerName: "Jane Smith",
+ items: [
+ {
+ name: "Classic Tote Bag",
+ slug: "classic-tote-bag",
+ quantity: 2,
+ options_text: "Color: Black",
+ display_total: "$59.98",
+ thumbnail_url: null,
+ },
+ {
+ name: "Organic Cotton T-Shirt",
+ slug: "organic-cotton-t-shirt",
+ quantity: 1,
+ options_text: "Size: M, Color: White",
+ display_total: "$24.99",
+ thumbnail_url: null,
+ },
+ ],
+ displayTotal: "$84.97",
+ }),
+ },
+ {
+ slug: "shipment-shipped",
+ label: "Shipment Shipped",
+ render: () =>
+ createElement(ShipmentShippedEmail, {
+ orderNumber: "R987654321",
+ customerName: "Jane Smith",
+ shipments: [
+ {
+ number: "H123456789",
+ tracking: "1Z999AA10123456784",
+ tracking_url:
+ "https://tools.usps.com/go/TrackConfirmAction?tLabels=1Z999AA10123456784",
+ delivery_method_name: "USPS Priority Mail",
+ display_cost: "$5.99",
+ items: [
+ {
+ name: "Classic Tote Bag",
+ slug: "classic-tote-bag",
+ quantity: 2,
+ options_text: "Color: Black",
+ thumbnail_url: null,
+ },
+ {
+ name: "Organic Cotton T-Shirt",
+ slug: "organic-cotton-t-shirt",
+ quantity: 1,
+ options_text: "Size: M, Color: White",
+ thumbnail_url: null,
+ },
+ ],
+ },
+ ],
+ }),
+ },
+ {
+ slug: "password-reset",
+ label: "Password Reset",
+ render: () =>
+ createElement(PasswordResetEmail, {
+ resetUrl: "https://example.com/account/reset-password?token=preview",
+ }),
+ },
+];
+
+export function getEmailFixture(slug: string): EmailFixture | undefined {
+ return emailFixtures.find((f) => f.slug === slug);
+}
diff --git a/src/app/dev/emails/page.tsx b/src/app/dev/emails/page.tsx
new file mode 100644
index 00000000..df9c5292
--- /dev/null
+++ b/src/app/dev/emails/page.tsx
@@ -0,0 +1,46 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { emailFixtures } from "./fixtures";
+
+export default function EmailPreviewIndex() {
+ if (process.env.NODE_ENV === "production") {
+ notFound();
+ }
+
+ return (
+
+
Email Previews
+
+ Dev-only previews of transactional email templates. Renders the same
+ templates used by webhook handlers, with sample data.
+
+
+ {emailFixtures.map((fixture) => (
+ -
+
+ {fixture.label}
+
+
+ ))}
+
+
+ );
+}
diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
index 6423f305..276b3e32 100644
--- a/src/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@@ -73,4 +73,4 @@ function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
);
}
-export { Alert, AlertTitle, AlertDescription, AlertAction };
+export { Alert, AlertAction, AlertDescription, AlertTitle };
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index d77f21aa..21b0286c 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -67,9 +67,9 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
export {
Card,
- CardHeader,
- CardTitle,
- CardDescription,
CardContent,
+ CardDescription,
CardFooter,
+ CardHeader,
+ CardTitle,
};
diff --git a/src/components/ui/field.tsx b/src/components/ui/field.tsx
index 960d4c5f..f32b5663 100644
--- a/src/components/ui/field.tsx
+++ b/src/components/ui/field.tsx
@@ -226,13 +226,13 @@ function FieldError({
export {
Field,
- FieldLabel,
+ FieldContent,
FieldDescription,
FieldError,
FieldGroup,
+ FieldLabel,
FieldLegend,
FieldSeparator,
FieldSet,
- FieldContent,
FieldTitle,
};
diff --git a/src/components/ui/input-group.tsx b/src/components/ui/input-group.tsx
index dbd7217c..71e5e0a0 100644
--- a/src/components/ui/input-group.tsx
+++ b/src/components/ui/input-group.tsx
@@ -155,7 +155,7 @@ export {
InputGroup,
InputGroupAddon,
InputGroupButton,
- InputGroupText,
InputGroupInput,
+ InputGroupText,
InputGroupTextarea,
};
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index 16a28ff3..41f1a839 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -135,11 +135,11 @@ function SheetDescription({
export {
Sheet,
- SheetTrigger,
SheetClose,
SheetContent,
- SheetHeader,
+ SheetDescription,
SheetFooter,
+ SheetHeader,
SheetTitle,
- SheetDescription,
+ SheetTrigger,
};
diff --git a/src/lib/spree/middleware.ts b/src/lib/spree/middleware.ts
index 4111ca75..e6f69cdb 100644
--- a/src/lib/spree/middleware.ts
+++ b/src/lib/spree/middleware.ts
@@ -50,6 +50,7 @@ export function createSpreeMiddleware(
const staticRoutes = config.staticRoutes ?? [
"/_next",
"/api",
+ "/dev",
"/favicon.ico",
];