From 9aa4dd7a680f644f83c129596f1051c80de7d5de Mon Sep 17 00:00:00 2001 From: Matt Date: Mon, 3 Nov 2025 15:16:30 +0100 Subject: [PATCH] Add demo page for checkout success comparison MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Create /checkout/success/demo route with mock data - Hardcoded order details for visual testing - Same styling as real success page - Yellow banner indicates demo mode 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- app/checkout/success/demo/page.tsx | 395 +++++++++++++++++++++++++++++ 1 file changed, 395 insertions(+) create mode 100644 app/checkout/success/demo/page.tsx diff --git a/app/checkout/success/demo/page.tsx b/app/checkout/success/demo/page.tsx new file mode 100644 index 0000000..7b468d3 --- /dev/null +++ b/app/checkout/success/demo/page.tsx @@ -0,0 +1,395 @@ +'use client'; + +import { motion } from 'framer-motion'; +import { Leaf } from 'lucide-react'; +import { CarbonImpactComparison } from '../../../../src/components/CarbonImpactComparison'; +import { RechartsPortfolioPieChart } from '../../../../src/components/RechartsPortfolioPieChart'; +import { useRouter } from 'next/navigation'; + +// Mock order data for demo purposes +const mockOrderDetails = { + order: { + id: 'demo_order_123', + tons: 5.2, + portfolioId: 1, + baseAmount: 9360, // $93.60 in cents + processingFee: 281, // $2.81 in cents + totalAmount: 9641, // $96.41 in cents + currency: 'USD', + status: 'paid', + wrenOrderId: 'wren_abc123xyz', + stripeSessionId: 'cs_test_demo123', + createdAt: new Date().toISOString(), + portfolio: { + id: 1, + name: 'Puffin Maritime Carbon Portfolio', + description: 'Curated mix of high-impact verified carbon offset projects', + projects: [ + { + id: 1, + name: 'Rimba Raya Biodiversity Reserve', + type: 'Forestry', + description: 'Protecting 64,000 hectares of tropical peat swamp forest in Borneo', + shortDescription: 'Tropical forest conservation in Borneo', + pricePerTon: 15, + percentage: 0.3, + imageUrl: '/projects/forest.jpg', + location: 'Borneo, Indonesia', + verificationStandard: 'VCS, CCB', + impactMetrics: { + co2Reduced: 3500000 + } + }, + { + id: 2, + name: 'Verified Blue Carbon', + type: 'Blue Carbon', + description: 'Coastal wetland restoration for carbon sequestration', + shortDescription: 'Coastal wetland restoration', + pricePerTon: 25, + percentage: 0.25, + imageUrl: '/projects/ocean.jpg', + location: 'Global', + verificationStandard: 'VCS', + impactMetrics: { + co2Reduced: 1200000 + } + }, + { + id: 3, + name: 'Direct Air Capture Technology', + type: 'Direct Air Capture', + description: 'Advanced technology removing CO2 directly from atmosphere', + shortDescription: 'Direct air capture technology', + pricePerTon: 35, + percentage: 0.2, + imageUrl: '/projects/tech.jpg', + location: 'Iceland', + verificationStandard: 'ISO 14064', + impactMetrics: { + co2Reduced: 500000 + } + }, + { + id: 4, + name: 'Renewable Energy Development', + type: 'Renewable Energy', + description: 'Wind and solar power generation replacing fossil fuels', + shortDescription: 'Clean energy generation', + pricePerTon: 12, + percentage: 0.25, + imageUrl: '/projects/solar.jpg', + location: 'Global', + verificationStandard: 'Gold Standard', + impactMetrics: { + co2Reduced: 2800000 + } + } + ] + } + }, + session: { + paymentStatus: 'paid', + customerEmail: 'demo@puffinoffset.com' + } +}; + +// Map backend status to user-friendly labels +const getStatusDisplay = (status: string): { label: string; className: string } => { + switch (status) { + case 'paid': + case 'fulfilled': + return { label: 'Confirmed', className: 'bg-green-100 text-green-700' }; + case 'pending': + return { label: 'Processing', className: 'bg-yellow-100 text-yellow-700' }; + default: + return { label: status.toUpperCase(), className: 'bg-slate-100 text-slate-700' }; + } +}; + +// Format currency with commas +const formatCurrency = (amount: number): string => { + return amount.toLocaleString('en-US', { + minimumFractionDigits: 2, + maximumFractionDigits: 2 + }); +}; + +export default function CheckoutSuccessDemoPage() { + const router = useRouter(); + const orderDetails = mockOrderDetails; + const { order, session } = orderDetails; + const totalAmount = order.totalAmount / 100; + const baseAmount = order.baseAmount / 100; + const processingFee = order.processingFee / 100; + const effectiveStatus = session.paymentStatus === 'paid' ? 'paid' : order.status; + const statusDisplay = getStatusDisplay(effectiveStatus); + + return ( + <> + {/* Print-specific styles */} + + +
+ + {/* Demo Banner */} +
+

+ 🎭 DEMO MODE - This is a mock order for visual comparison purposes +

+
+ + {/* Receipt Container */} +
+ {/* Header with Logo */} + + Puffin Offset +

+ Order Confirmed +

+

+ Thank you for your carbon offset purchase +

+ + + {/* Success Badge */} + +
+ + + +
+ + + {/* Order Details Section */} + +

+ Order Summary +

+ +
+ {/* Carbon Offset - Highlighted */} +
+
+
+ Carbon Offset +

{order.tons} tons COâ‚‚

+
+
+ +
+
+
+ + {/* Pricing Breakdown */} +
+
+ Offset Cost + + ${formatCurrency(baseAmount)} + +
+
+ Processing Fee (3%) + + ${formatCurrency(processingFee)} + +
+
+
+ Total Paid + + ${formatCurrency(totalAmount)} + +
+
+
+
+ + {/* Order Metadata */} +
+
+
+ Payment ID +

{order.stripeSessionId}

+
+ + {order.wrenOrderId && ( +
+ Offsetting Order ID +

{order.wrenOrderId}

+
+ )} + +
+ Status +

+ + {statusDisplay.label} + +

+
+ + {session.customerEmail && ( +
+ Email +

{session.customerEmail}

+
+ )} + +
+ Date +

+ {new Date().toLocaleDateString('en-US', { + year: 'numeric', + month: 'long', + day: 'numeric' + })} +

+
+
+
+ +
+ + {/* Portfolio Distribution Chart */} + {order.portfolio?.projects && order.portfolio.projects.length > 0 && ( + +
+

+ Your Carbon Offset Distribution +

+

+ Your {order.tons} tons of COâ‚‚ offsets are distributed across these verified projects: +

+ +
+ + )} + + {/* Impact Comparisons */} + +
+ +
+ + + {/* Action Buttons */} + + + + + + + {/* Confirmation Email Notice */} + {session.customerEmail && ( + +
+

+ + + + + Confirmation email sent to {session.customerEmail} +

+
+ + )} + + {/* Footer */} + +

Thank you for making a positive impact on our planet

+

Questions? Contact us at support@puffinoffset.com

+ + +
+ + ); +}