From deb4351e215fbffa86f316eec1e62368a25af524 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Thu, 30 Oct 2025 14:09:00 +0100
Subject: [PATCH] Enhance UX: Remove calculator comparisons and redesign
 receipt page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Changes Made:

### 1. Remove Carbon Impact Comparisons from Calculator Pages
- Removed from OffsetOrder.tsx (lines 532-542)
- Removed from MobileOffsetOrder.tsx (lines 429-432)
- Keep comparisons ONLY on CheckoutSuccess receipt page per user request

### 2. Comprehensive CheckoutSuccess Page Redesign
- Add Puffin logo prominently at top of receipt
- Implement status mapping: paid/fulfilled → "Confirmed", pending → "Processing"
- Add comprehensive print CSS (@media print rules)
- Hide interactive elements (buttons) when printing
- Optimize layout and spacing for printed receipt
- Professional receipt aesthetics with enhanced design:
  * Beautiful gradient header with logo
  * Highlighted carbon offset display with icon
  * Enhanced pricing breakdown section
  * Better typography and spacing throughout
  * Professional metadata section with date
  * Improved button styling with gradients and hover effects
  * Email confirmation notice with icon
  * Footer with contact information

### Benefits:
- Cleaner calculator UX (comparisons only on success)
- Professional printable receipt
- Clear "Confirmed" status (not "PENDING")
- Beautiful modern design that matches brand

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/MobileOffsetOrder.tsx |   5 -
 src/components/OffsetOrder.tsx       |  12 -
 src/pages/CheckoutSuccess.tsx        | 384 +++++++++++++++++----------
 3 files changed, 240 insertions(+), 161 deletions(-)

diff --git a/src/components/MobileOffsetOrder.tsx b/src/components/MobileOffsetOrder.tsx
index b4b0e70..8a84124 100644
--- a/src/components/MobileOffsetOrder.tsx
+++ b/src/components/MobileOffsetOrder.tsx
@@ -426,11 +426,6 @@ export function MobileOffsetOrder({ tons, monetaryAmount, onBack }: Props) {
             <p className="text-xs text-gray-500 mt-1">{portfolio.description}</p>
           </div>
 
-          {/* Carbon Impact Comparisons */}
-          <div className="bg-gradient-to-br from-emerald-600 via-teal-600 to-cyan-600 rounded-2xl p-6 shadow-lg">
-            <CarbonImpactComparison tons={actualOffsetTons} variant="preview" count={3} />
-          </div>
-
           <button
             onClick={handleProceedToProjects}
             className="w-full bg-gradient-to-r from-blue-500 to-blue-600 text-white py-4 px-6 rounded-xl font-semibold text-lg shadow-md hover:shadow-lg transition-all"
diff --git a/src/components/OffsetOrder.tsx b/src/components/OffsetOrder.tsx
index b1fb337..becbcee 100644
--- a/src/components/OffsetOrder.tsx
+++ b/src/components/OffsetOrder.tsx
@@ -529,18 +529,6 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
             </motion.div>
           )}
 
-          {/* Carbon Impact Comparisons */}
-          <motion.div
-            className="mb-8"
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.5, delay: 0.58 }}
-          >
-            <div className="bg-gradient-to-br from-emerald-600 via-teal-600 to-cyan-600 rounded-xl p-8 shadow-2xl">
-              <CarbonImpactComparison tons={actualOffsetTons} variant="preview" count={3} />
-            </div>
-          </motion.div>
-
           <motion.div
             className="bg-gray-50 rounded-lg p-6 mb-6"
             initial={{ opacity: 0, y: 20 }}
diff --git a/src/pages/CheckoutSuccess.tsx b/src/pages/CheckoutSuccess.tsx
index ab3522e..7d81068 100644
--- a/src/pages/CheckoutSuccess.tsx
+++ b/src/pages/CheckoutSuccess.tsx
@@ -10,6 +10,19 @@ interface CheckoutSuccessProps {
   onNavigateCalculator: () => void;
 }
 
+// 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' };
+  }
+};
+
 export default function CheckoutSuccess({
   onNavigateHome,
   onNavigateCalculator
@@ -93,164 +106,247 @@ export default function CheckoutSuccess({
   const totalAmount = order.totalAmount / 100; // Convert cents to dollars
   const baseAmount = order.baseAmount / 100;
   const processingFee = order.processingFee / 100;
+  const statusDisplay = getStatusDisplay(order.status);
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-cyan-50 flex items-center justify-center p-6">
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.5 }}
-        className="max-w-2xl w-full"
-      >
-        {/* Success Header */}
-        <motion.div
-          initial={{ scale: 0 }}
-          animate={{ scale: 1 }}
-          transition={{ delay: 0.2, type: 'spring', stiffness: 200 }}
-          className="text-center mb-8"
-        >
-          <div className="text-green-500 text-7xl mb-4">✓</div>
-          <h1 className="text-4xl md:text-5xl font-bold text-slate-800 mb-2">
-            Payment Successful!
-          </h1>
-          <p className="text-xl text-slate-600">
-            Thank you for offsetting your carbon footprint
-          </p>
-        </motion.div>
+    <>
+      {/* Print-specific styles */}
+      <style>{`
+        @media print {
+          body {
+            background: white !important;
+          }
+          .no-print {
+            display: none !important;
+          }
+          .print-receipt {
+            max-width: 100% !important;
+            margin: 0 !important;
+            padding: 20px !important;
+            box-shadow: none !important;
+          }
+          .print-logo {
+            max-width: 200px !important;
+          }
+          @page {
+            margin: 0.5in;
+          }
+        }
+      `}</style>
 
-        {/* Order Details Card */}
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-cyan-50 flex items-center justify-center p-6 no-print">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.3 }}
-          className="bg-white rounded-2xl shadow-luxury p-8 mb-6"
+          transition={{ duration: 0.5 }}
+          className="max-w-3xl w-full print-receipt"
         >
-          <h2 className="text-2xl font-bold text-slate-800 mb-6">Order Summary</h2>
+          {/* Receipt Container */}
+          <div className="bg-white rounded-3xl shadow-2xl overflow-hidden">
+            {/* Header with Logo */}
+            <motion.div
+              initial={{ opacity: 0, y: -20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.1 }}
+              className="bg-gradient-to-br from-cyan-500 via-blue-500 to-indigo-600 p-8 text-center"
+            >
+              <img
+                src="/puffin-logo.svg"
+                alt="Puffin Offset"
+                className="h-24 mx-auto mb-4 print-logo"
+              />
+              <h1 className="text-3xl md:text-4xl font-bold text-white mb-2">
+                Order Confirmed
+              </h1>
+              <p className="text-cyan-50 text-lg">
+                Thank you for your carbon offset purchase
+              </p>
+            </motion.div>
 
-          <div className="space-y-4">
-            {/* Offset Amount */}
-            <div className="flex justify-between items-center py-3 border-b border-slate-100">
-              <span className="text-slate-600 font-medium">Carbon Offset</span>
-              <span className="text-slate-800 font-bold text-lg">
-                {order.tons} tons CO₂
-              </span>
-            </div>
-
-            {/* Portfolio */}
-            <div className="flex justify-between items-center py-3 border-b border-slate-100">
-              <span className="text-slate-600 font-medium">Portfolio</span>
-              <span className="text-slate-800 font-semibold">
-                Portfolio #{order.portfolioId}
-              </span>
-            </div>
-
-            {/* Base Amount */}
-            <div className="flex justify-between items-center py-3">
-              <span className="text-slate-600">Offset Cost</span>
-              <span className="text-slate-800 font-semibold">
-                ${baseAmount.toFixed(2)}
-              </span>
-            </div>
-
-            {/* Processing Fee */}
-            <div className="flex justify-between items-center py-3 border-b border-slate-200">
-              <span className="text-slate-600">Processing Fee (5%)</span>
-              <span className="text-slate-800 font-semibold">
-                ${processingFee.toFixed(2)}
-              </span>
-            </div>
-
-            {/* Total */}
-            <div className="flex justify-between items-center py-4 bg-gradient-to-r from-blue-50 to-cyan-50 rounded-lg px-4">
-              <span className="text-slate-800 font-bold text-lg">Total Paid</span>
-              <span className="text-blue-600 font-bold text-2xl">
-                ${totalAmount.toFixed(2)}
-              </span>
-            </div>
-          </div>
-
-          {/* Order Info */}
-          <div className="mt-6 pt-6 border-t border-slate-200">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
-              <div>
-                <span className="text-slate-500">Order ID</span>
-                <p className="text-slate-800 font-mono text-xs mt-1">{order.id}</p>
+            {/* Success Badge */}
+            <motion.div
+              initial={{ scale: 0 }}
+              animate={{ scale: 1 }}
+              transition={{ delay: 0.2, type: 'spring', stiffness: 200 }}
+              className="flex justify-center -mt-8 mb-6 no-print"
+            >
+              <div className="bg-green-500 text-white rounded-full p-6 shadow-xl border-4 border-white">
+                <svg className="w-12 h-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+                </svg>
               </div>
-              <div>
-                <span className="text-slate-500">Status</span>
-                <p className="mt-1">
-                  <span className={`inline-block px-3 py-1 rounded-full text-xs font-semibold ${
-                    order.status === 'fulfilled'
-                      ? 'bg-green-100 text-green-700'
-                      : order.status === 'paid'
-                      ? 'bg-blue-100 text-blue-700'
-                      : 'bg-yellow-100 text-yellow-700'
-                  }`}>
-                    {order.status.toUpperCase()}
-                  </span>
-                </p>
-              </div>
-              {session.customerEmail && (
-                <div className="md:col-span-2">
-                  <span className="text-slate-500">Email</span>
-                  <p className="text-slate-800 mt-1">{session.customerEmail}</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-slate-800 mb-6 pb-3 border-b-2 border-slate-200">
+                Order Summary
+              </h2>
+
+              <div className="space-y-1 mb-6">
+                {/* Carbon Offset - Highlighted */}
+                <div className="bg-gradient-to-r from-emerald-50 to-teal-50 rounded-xl p-6 mb-4 border-l-4 border-emerald-500">
+                  <div className="flex justify-between items-center">
+                    <div>
+                      <span className="text-sm text-emerald-700 font-medium uppercase tracking-wide">Carbon Offset</span>
+                      <p className="text-3xl font-bold text-emerald-900 mt-1">{order.tons} tons CO₂</p>
+                    </div>
+                    <div className="text-emerald-600">
+                      <svg className="w-16 h-16" fill="currentColor" viewBox="0 0 20 20">
+                        <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
+                      </svg>
+                    </div>
+                  </div>
                 </div>
-              )}
+
+                {/* Portfolio */}
+                <div className="flex justify-between items-center py-4 border-b border-slate-100">
+                  <span className="text-slate-600 font-medium">Portfolio</span>
+                  <span className="text-slate-800 font-semibold">
+                    #{order.portfolioId}
+                  </span>
+                </div>
+
+                {/* Pricing Breakdown */}
+                <div className="bg-slate-50 rounded-lg p-5 my-4 space-y-3">
+                  <div className="flex justify-between items-center">
+                    <span className="text-slate-700">Offset Cost</span>
+                    <span className="text-slate-900 font-semibold">
+                      ${baseAmount.toFixed(2)}
+                    </span>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-slate-700">Processing Fee (5%)</span>
+                    <span className="text-slate-900 font-semibold">
+                      ${processingFee.toFixed(2)}
+                    </span>
+                  </div>
+                  <div className="border-t-2 border-slate-300 pt-3 mt-3">
+                    <div className="flex justify-between items-center">
+                      <span className="text-slate-800 font-bold text-lg">Total Paid</span>
+                      <span className="text-blue-600 font-bold text-3xl">
+                        ${totalAmount.toFixed(2)}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Order Metadata */}
+              <div className="bg-gradient-to-r from-slate-50 to-blue-50 rounded-lg p-5 space-y-4">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+                  <div>
+                    <span className="text-xs uppercase tracking-wide text-slate-500 font-semibold">Order ID</span>
+                    <p className="text-slate-800 font-mono text-sm mt-1 break-all">{order.id}</p>
+                  </div>
+                  <div>
+                    <span className="text-xs uppercase tracking-wide text-slate-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-slate-500 font-semibold">Email</span>
+                      <p className="text-slate-800 font-medium mt-1">{session.customerEmail}</p>
+                    </div>
+                  )}
+                  <div className="md:col-span-2">
+                    <span className="text-xs uppercase tracking-wide text-slate-500 font-semibold">Date</span>
+                    <p className="text-slate-800 font-medium mt-1">
+                      {new Date().toLocaleDateString('en-US', {
+                        year: 'numeric',
+                        month: 'long',
+                        day: 'numeric'
+                      })}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+          </div>
+
+          {/* Impact Comparisons */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.4 }}
+            className="mt-6"
+          >
+            <div className="bg-gradient-to-br from-emerald-600 via-teal-600 to-cyan-600 rounded-3xl p-8 shadow-2xl">
+              <CarbonImpactComparison tons={order.tons} variant="success" count={3} />
             </div>
-          </div>
-        </motion.div>
+          </motion.div>
 
-        {/* Impact Comparisons */}
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.4 }}
-          className="mb-6"
-        >
-          <div className="bg-gradient-to-br from-emerald-600 via-teal-600 to-cyan-600 rounded-2xl p-8 shadow-luxury">
-            <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"
-        >
-          <button
-            onClick={onNavigateHome}
-            className="px-8 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-all hover:shadow-lg font-semibold text-center"
-          >
-            Return to Home
-          </button>
-          <button
-            onClick={onNavigateCalculator}
-            className="px-8 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-all hover:shadow-lg font-semibold text-center"
-          >
-            Calculate Another Offset
-          </button>
-          <button
-            onClick={() => window.print()}
-            className="px-8 py-3 bg-white text-slate-700 rounded-lg hover:bg-slate-50 transition-all hover:shadow-lg font-semibold border border-slate-200"
-          >
-            Print Receipt
-          </button>
-        </motion.div>
-
-        {/* Confirmation Email Notice */}
-        {session.customerEmail && (
-          <motion.p
+          {/* Action Buttons */}
+          <motion.div
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
-            transition={{ delay: 0.6 }}
-            className="text-center text-slate-500 text-sm mt-6"
+            transition={{ delay: 0.5 }}
+            className="flex flex-col sm:flex-row gap-4 justify-center mt-8 no-print"
           >
-            A confirmation email has been sent to {session.customerEmail}
-          </motion.p>
-        )}
-      </motion.div>
-    </div>
+            <button
+              onClick={onNavigateHome}
+              className="px-8 py-4 bg-gradient-to-r from-blue-500 to-cyan-500 text-white rounded-xl hover:from-blue-600 hover:to-cyan-600 transition-all hover:shadow-xl font-bold text-center transform hover:scale-105"
+            >
+              Return to Home
+            </button>
+            <button
+              onClick={onNavigateCalculator}
+              className="px-8 py-4 bg-gradient-to-r from-green-500 to-emerald-500 text-white rounded-xl hover:from-green-600 hover:to-emerald-600 transition-all hover:shadow-xl font-bold text-center transform hover:scale-105"
+            >
+              Calculate Another Offset
+            </button>
+            <button
+              onClick={() => window.print()}
+              className="px-8 py-4 bg-white text-slate-700 rounded-xl hover:bg-slate-50 transition-all hover:shadow-xl font-bold border-2 border-slate-300 flex items-center justify-center gap-2 transform hover:scale-105"
+            >
+              <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-blue-50 border-l-4 border-blue-500 p-4 rounded-lg inline-block">
+                <p className="text-blue-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-slate-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>
+    </>
   );
 }