From d6896fa5916b89365d0766e60fd15f4c2e0e479e Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Thu, 30 Oct 2025 14:21:41 +0100
Subject: [PATCH] Fix receipt page display issues
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Issues Fixed:

1. **Better Icon**: Replaced bell icon with leaf/plant icon for carbon offset
   - More appropriate visual representation

2. **Currency Formatting**: Added thousand separators to all amounts
   - Added formatCurrency() helper function
   - Total now shows "$13,414.12" instead of "$13414.12"
   - Applied to base amount, processing fee, and total

3. **Print Functionality**: Fixed empty page printing
   - Removed "no-print" class from outer wrapper
   - Only interactive elements (buttons) hidden when printing
   - Receipt content now prints properly

4. **Status Display**: Shows "Confirmed" immediately after payment
   - Uses Stripe session.paymentStatus for just-completed payments
   - Falls back to order.status for older orders
   - Prevents showing "Processing" when payment is already complete

## Technical Changes:
- CheckoutSuccess.tsx (line 27-32): Added formatCurrency helper
- CheckoutSuccess.tsx (line 120-121): Use Stripe payment status
- CheckoutSuccess.tsx (line 145): Removed no-print from wrapper
- CheckoutSuccess.tsx (line 208-210): Changed to leaf SVG icon
- CheckoutSuccess.tsx (lines 228, 234, 241): Use formatCurrency()

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/pages/CheckoutSuccess.tsx | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/pages/CheckoutSuccess.tsx b/src/pages/CheckoutSuccess.tsx
index 7d81068..0dcd329 100644
--- a/src/pages/CheckoutSuccess.tsx
+++ b/src/pages/CheckoutSuccess.tsx
@@ -23,6 +23,14 @@ const getStatusDisplay = (status: string): { label: string; className: string }
   }
 };
 
+// Format currency with commas
+const formatCurrency = (amount: number): string => {
+  return amount.toLocaleString('en-US', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  });
+};
+
 export default function CheckoutSuccess({
   onNavigateHome,
   onNavigateCalculator
@@ -106,7 +114,11 @@ 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);
+
+  // 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 (
     <>
@@ -134,7 +146,7 @@ export default function CheckoutSuccess({
         }
       `}</style>
 
-      <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">
+      <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 }}
@@ -198,7 +210,7 @@ export default function CheckoutSuccess({
                     </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" />
+                        <path d="M10 2C7.243 2 5 4.243 5 7c0 1.654.843 3.116 2.122 3.975-.076.328-.122.668-.122 1.025v4c0 2.209 1.791 4 4 4s4-1.791 4-4v-4c0-.357-.046-.697-.122-1.025C16.157 10.116 17 8.654 17 7c0-2.757-2.243-5-5-5zm-2 5c0-1.103.897-2 2-2s2 .897 2 2-.897 2-2 2-2-.897-2-2z" />
                       </svg>
                     </div>
                   </div>
@@ -217,20 +229,20 @@ export default function CheckoutSuccess({
                   <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)}
+                      ${formatCurrency(baseAmount)}
                     </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)}
+                      ${formatCurrency(processingFee)}
                     </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)}
+                        ${formatCurrency(totalAmount)}
                       </span>
                     </div>
                   </div>