baa2849352
All checks were successful
Build and Push Docker Images / docker (push) Successful in 2m21s
- Replace all blue/cyan gradients with clean white/gray backgrounds - Change all slate colors to gray (gray-50, gray-600, gray-700, gray-800) - Change all buttons and accents to green-500/600 - Simplify header to white background with gray border - Remove fancy gradients and shadows for clean, simple design - Match exact color scheme from original Vite project
513 lines
18 KiB
TypeScript
513 lines
18 KiB
TypeScript
'use client';
|
||
|
||
import { useEffect, useState } from 'react';
|
||
import { useRouter } from 'next/navigation';
|
||
import { motion } from 'framer-motion';
|
||
import { Leaf } from 'lucide-react';
|
||
import { getOrderDetails } from '../../../src/api/checkoutClient';
|
||
import { OrderDetailsResponse } from '../../../src/types';
|
||
import { CarbonImpactComparison } from '../../../src/components/CarbonImpactComparison';
|
||
import { RechartsPortfolioPieChart } from '../../../src/components/RechartsPortfolioPieChart';
|
||
import { useCalculatorState } from '../../../src/hooks/useCalculatorState';
|
||
|
||
// 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 CheckoutSuccessPage() {
|
||
const router = useRouter();
|
||
const [orderDetails, setOrderDetails] = useState<OrderDetailsResponse | null>(null);
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const { clearState } = useCalculatorState();
|
||
|
||
// Clear calculator state on successful payment (per user preference)
|
||
useEffect(() => {
|
||
if (orderDetails && (orderDetails.order.status === 'paid' || orderDetails.order.status === 'fulfilled')) {
|
||
clearState();
|
||
}
|
||
}, [orderDetails, clearState]);
|
||
|
||
useEffect(() => {
|
||
const fetchOrderDetails = async () => {
|
||
// Get session ID from URL
|
||
const params = new URLSearchParams(window.location.search);
|
||
const sessionId = params.get('session_id');
|
||
|
||
if (!sessionId) {
|
||
setError('No session ID found in URL');
|
||
setLoading(false);
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const details = await getOrderDetails(sessionId);
|
||
setOrderDetails(details);
|
||
} catch (err) {
|
||
setError('Failed to load order details');
|
||
console.error(err);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
fetchOrderDetails();
|
||
}, []);
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="min-h-screen bg-gray-50 flex items-center justify-center p-6">
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.9 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
className="text-center"
|
||
>
|
||
<div className="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-green-500 mx-auto"></div>
|
||
<p className="mt-4 text-gray-700 font-medium">Loading your order details...</p>
|
||
</motion.div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (error || !orderDetails) {
|
||
return (
|
||
<div className="min-h-screen bg-gray-50 flex items-center justify-center p-6">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className="max-w-md w-full bg-white rounded-2xl shadow-xl p-8 text-center"
|
||
>
|
||
<div className="text-red-500 text-5xl mb-4">⚠️</div>
|
||
<h2 className="text-2xl font-bold text-gray-800 mb-2">Order Not Found</h2>
|
||
<p className="text-gray-600 mb-6">{error || 'Unable to retrieve order details'}</p>
|
||
<button
|
||
onClick={() => router.push('/')}
|
||
className="inline-block px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
|
||
>
|
||
Return to Home
|
||
</button>
|
||
</motion.div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const { order, session } = orderDetails;
|
||
const totalAmount = order.totalAmount / 100; // Convert cents to dollars
|
||
const baseAmount = order.baseAmount / 100;
|
||
const processingFee = order.processingFee / 100;
|
||
|
||
// Use Stripe payment status if available (more accurate for just-completed payments)
|
||
// Otherwise fall back to order status
|
||
const effectiveStatus = session.paymentStatus === 'paid' ? 'paid' : order.status;
|
||
const statusDisplay = getStatusDisplay(effectiveStatus);
|
||
|
||
return (
|
||
<>
|
||
{/* Print-specific styles */}
|
||
<style>{`
|
||
@media print {
|
||
/* Force print backgrounds and colors */
|
||
* {
|
||
-webkit-print-color-adjust: exact !important;
|
||
print-color-adjust: exact !important;
|
||
color-adjust: exact !important;
|
||
}
|
||
|
||
/* Hide non-print elements */
|
||
.no-print {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Page breaks */
|
||
.print-page-break {
|
||
page-break-after: always !important;
|
||
break-after: page !important;
|
||
}
|
||
|
||
/* Page setup */
|
||
@page {
|
||
margin: 0.5in;
|
||
size: letter;
|
||
}
|
||
|
||
/* Main container - optimize for print */
|
||
.print-receipt {
|
||
max-width: 100% !important;
|
||
margin: 0 !important;
|
||
padding: 0.25rem !important;
|
||
}
|
||
|
||
/* Aggressive spacing compression */
|
||
.p-8, .px-8, .py-8 {
|
||
padding: 0.5rem !important;
|
||
}
|
||
|
||
.p-6, .px-6, .py-6 {
|
||
padding: 0.5rem !important;
|
||
}
|
||
|
||
.p-5 {
|
||
padding: 0.5rem !important;
|
||
}
|
||
|
||
.mb-8, .mb-6 {
|
||
margin-bottom: 0.25rem !important;
|
||
}
|
||
|
||
.mt-8, .mt-6 {
|
||
margin-top: 0.25rem !important;
|
||
}
|
||
|
||
.mb-4 {
|
||
margin-bottom: 0.2rem !important;
|
||
}
|
||
|
||
.mt-4 {
|
||
margin-top: 0.2rem !important;
|
||
}
|
||
|
||
.mb-2 {
|
||
margin-bottom: 0.15rem !important;
|
||
}
|
||
|
||
/* Spacing between elements */
|
||
.space-y-1 > * + * {
|
||
margin-top: 0.1rem !important;
|
||
}
|
||
|
||
.space-y-3 > * + * {
|
||
margin-top: 0.2rem !important;
|
||
}
|
||
|
||
.space-y-4 > * + * {
|
||
margin-top: 0.25rem !important;
|
||
}
|
||
|
||
.gap-3 {
|
||
gap: 0.25rem !important;
|
||
}
|
||
|
||
.gap-5 {
|
||
gap: 0.25rem !important;
|
||
}
|
||
|
||
/* Font size optimization */
|
||
.text-4xl {
|
||
font-size: 1.25rem !important;
|
||
}
|
||
|
||
.text-3xl {
|
||
font-size: 1.125rem !important;
|
||
}
|
||
|
||
.text-2xl {
|
||
font-size: 1rem !important;
|
||
}
|
||
|
||
.text-xl {
|
||
font-size: 0.95rem !important;
|
||
}
|
||
|
||
.text-lg {
|
||
font-size: 0.9rem !important;
|
||
}
|
||
|
||
.text-base {
|
||
font-size: 0.875rem !important;
|
||
}
|
||
|
||
.text-sm {
|
||
font-size: 0.8rem !important;
|
||
}
|
||
|
||
.text-xs {
|
||
font-size: 0.7rem !important;
|
||
}
|
||
|
||
/* Line height compression */
|
||
* {
|
||
line-height: 1.3 !important;
|
||
animation: none !important;
|
||
transition: none !important;
|
||
}
|
||
|
||
h1, h2, h3 {
|
||
line-height: 1.2 !important;
|
||
}
|
||
|
||
/* Logo sizing */
|
||
.print-logo {
|
||
max-width: 100px !important;
|
||
margin-bottom: 0.25rem !important;
|
||
}
|
||
|
||
/* Compact grid layouts */
|
||
.grid {
|
||
gap: 0.25rem !important;
|
||
}
|
||
|
||
/* Metadata grid - keep 2 columns but more compact */
|
||
.md\\:grid-cols-2 {
|
||
display: grid !important;
|
||
grid-template-columns: 1fr 1fr !important;
|
||
}
|
||
|
||
/* Make single column items span only 1 column in print */
|
||
.md\\:col-span-2 {
|
||
grid-column: span 1 !important;
|
||
}
|
||
}
|
||
`}</style>
|
||
|
||
<div className="min-h-screen bg-gray-50 flex items-center justify-center p-4 sm:p-6">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5 }}
|
||
className="max-w-full sm:max-w-4xl lg:max-w-5xl w-full print-receipt"
|
||
>
|
||
{/* Receipt Container - Page 1 */}
|
||
<div className="bg-white rounded-lg shadow-xl overflow-hidden print:rounded-none print:shadow-none print-page-break">
|
||
{/* Header with Logo */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: -20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.1 }}
|
||
className="p-8 text-center border-b-2 border-gray-200"
|
||
>
|
||
<img
|
||
src="/puffinOffset.webp"
|
||
alt="Puffin Offset"
|
||
className="h-24 mx-auto mb-4 print-logo"
|
||
/>
|
||
<div className="flex items-center justify-center mb-4">
|
||
<div className="bg-green-500 text-white rounded-full p-4 shadow-lg">
|
||
<svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<h1 className="text-3xl md:text-4xl font-bold text-gray-800 mb-2">
|
||
Order Confirmed
|
||
</h1>
|
||
<p className="text-gray-600 text-lg">
|
||
Thank you for your carbon offset purchase
|
||
</p>
|
||
</motion.div>
|
||
|
||
{/* Order Details Section */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.3 }}
|
||
className="px-8 py-6"
|
||
>
|
||
<h2 className="text-2xl font-bold text-gray-800 mb-6 pb-3 border-b-2 border-gray-200">
|
||
Order Summary
|
||
</h2>
|
||
|
||
<div className="space-y-1 mb-6">
|
||
{/* Carbon Offset - Highlighted */}
|
||
<div className="bg-gray-50 rounded-lg p-6 mb-4">
|
||
<div className="flex justify-between items-center">
|
||
<div>
|
||
<span className="text-sm text-gray-600 font-medium">Carbon Offset</span>
|
||
<p className="text-3xl font-bold text-gray-900 mt-1">{order.tons} tons CO₂</p>
|
||
</div>
|
||
<div className="text-green-500">
|
||
<Leaf className="w-16 h-16" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Pricing Breakdown */}
|
||
<div className="bg-gray-50 rounded-lg p-5 my-4 space-y-3">
|
||
<div className="flex justify-between items-center">
|
||
<span className="text-gray-700">Offset Cost</span>
|
||
<span className="text-gray-900 font-semibold">
|
||
${formatCurrency(baseAmount)}
|
||
</span>
|
||
</div>
|
||
<div className="flex justify-between items-center">
|
||
<span className="text-gray-700">Processing Fee (3%)</span>
|
||
<span className="text-gray-900 font-semibold">
|
||
${formatCurrency(processingFee)}
|
||
</span>
|
||
</div>
|
||
<div className="border-t-2 border-gray-300 pt-3 mt-3">
|
||
<div className="flex justify-between items-center">
|
||
<span className="text-gray-800 font-bold text-lg">Total Paid</span>
|
||
<span className="text-gray-900 font-bold text-3xl">
|
||
${formatCurrency(totalAmount)}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Order Metadata */}
|
||
<div className="bg-gray-50 rounded-lg p-5 space-y-4">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||
{/* Payment ID (Stripe) */}
|
||
<div>
|
||
<span className="text-xs uppercase tracking-wide text-gray-500 font-semibold">Payment ID</span>
|
||
<p className="text-gray-800 font-mono text-xs mt-1 break-all">{order.stripeSessionId}</p>
|
||
</div>
|
||
|
||
{/* Offsetting Order ID (Wren) - Only show if fulfilled */}
|
||
{order.wrenOrderId && (
|
||
<div>
|
||
<span className="text-xs uppercase tracking-wide text-gray-500 font-semibold">Offsetting Order ID</span>
|
||
<p className="text-gray-800 font-mono text-xs mt-1 break-all">{order.wrenOrderId}</p>
|
||
</div>
|
||
)}
|
||
|
||
<div className={order.wrenOrderId ? '' : 'md:col-start-2'}>
|
||
<span className="text-xs uppercase tracking-wide text-gray-500 font-semibold">Status</span>
|
||
<p className="mt-2">
|
||
<span className={`inline-block px-4 py-1.5 rounded-full text-sm font-bold ${statusDisplay.className}`}>
|
||
{statusDisplay.label}
|
||
</span>
|
||
</p>
|
||
</div>
|
||
|
||
{session.customerEmail && (
|
||
<div className="md:col-span-2">
|
||
<span className="text-xs uppercase tracking-wide text-gray-500 font-semibold">Email</span>
|
||
<p className="text-gray-800 font-medium mt-1">{session.customerEmail}</p>
|
||
</div>
|
||
)}
|
||
|
||
<div className="md:col-span-2">
|
||
<span className="text-xs uppercase tracking-wide text-gray-500 font-semibold">Date</span>
|
||
<p className="text-gray-800 font-medium mt-1">
|
||
{new Date().toLocaleDateString('en-US', {
|
||
year: 'numeric',
|
||
month: 'long',
|
||
day: 'numeric'
|
||
})}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
|
||
{/* Portfolio Distribution Chart - Page 2 */}
|
||
{orderDetails.order.portfolio?.projects && orderDetails.order.portfolio.projects.length > 0 && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.35 }}
|
||
className="mt-6"
|
||
>
|
||
<div className="bg-white rounded-lg shadow-xl overflow-hidden p-8 print:rounded-none print:shadow-none print:border-none print-page-break">
|
||
<h2 className="text-2xl font-bold text-gray-800 mb-2 text-center print:text-xl">
|
||
Your Carbon Offset Distribution
|
||
</h2>
|
||
<p className="text-gray-600 text-center mb-8 print:text-sm print:mb-4">
|
||
Your {order.tons} tons of CO₂ offsets are distributed across these verified projects:
|
||
</p>
|
||
<RechartsPortfolioPieChart
|
||
projects={orderDetails.order.portfolio.projects}
|
||
totalTons={order.tons}
|
||
/>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
|
||
{/* Impact Comparisons - Page 3 */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.4 }}
|
||
className="mt-6"
|
||
>
|
||
<div className="bg-white rounded-lg p-8 shadow-xl print:rounded-none print:shadow-none print:bg-white print:border print:border-gray-300 print-page-break">
|
||
<CarbonImpactComparison tons={order.tons} variant="success" count={3} />
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Action Buttons */}
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ delay: 0.5 }}
|
||
className="flex flex-col sm:flex-row gap-4 justify-center mt-8 no-print"
|
||
>
|
||
<button
|
||
onClick={() => router.push('/')}
|
||
className="px-8 py-4 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors font-bold text-center"
|
||
>
|
||
Return to Home
|
||
</button>
|
||
<button
|
||
onClick={() => router.push('/calculator')}
|
||
className="px-8 py-4 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors font-bold text-center"
|
||
>
|
||
Calculate Another Offset
|
||
</button>
|
||
<button
|
||
onClick={() => window.print()}
|
||
className="px-8 py-4 bg-white text-gray-700 rounded-lg hover:bg-gray-100 transition-colors font-bold border-2 border-gray-300 flex items-center justify-center gap-2"
|
||
>
|
||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
|
||
</svg>
|
||
Print Receipt
|
||
</button>
|
||
</motion.div>
|
||
|
||
{/* Confirmation Email Notice */}
|
||
{session.customerEmail && (
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ delay: 0.6 }}
|
||
className="text-center mt-6 no-print"
|
||
>
|
||
<div className="bg-green-50 border-l-4 border-green-500 p-4 rounded-lg inline-block">
|
||
<p className="text-green-800 font-medium">
|
||
<svg className="w-5 h-5 inline mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
|
||
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
|
||
</svg>
|
||
Confirmation email sent to {session.customerEmail}
|
||
</p>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
|
||
{/* Footer */}
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ delay: 0.7 }}
|
||
className="text-center text-gray-500 text-sm mt-8 pb-6 no-print"
|
||
>
|
||
<p>Thank you for making a positive impact on our planet</p>
|
||
<p className="mt-2">Questions? Contact us at support@puffinoffset.com</p>
|
||
</motion.div>
|
||
</motion.div>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|