From 4797fbfbf5a9b801c968b2aebf579d3cfa0d2026 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Mon, 3 Nov 2025 22:03:06 +0100
Subject: [PATCH] Fix custom amount CO2 tons display in offset order components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When using custom monetary amount, the header and UI were showing 0.00 tons
instead of the calculated CO2 tons based on the monetary amount.

Changes:
- OffsetOrder.tsx: Use actualOffsetTons (calculated from monetaryAmount) in header instead of raw tons parameter
- MobileOffsetOrder.tsx: Use baseTons in form message and slider display to correctly show total when using custom amount
- Both components now properly calculate and display CO2 tons from monetary amounts

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/MobileOffsetOrder.tsx | 6 +++---
 src/components/OffsetOrder.tsx       | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/MobileOffsetOrder.tsx b/src/components/MobileOffsetOrder.tsx
index 00e922c..b7f4e67 100644
--- a/src/components/MobileOffsetOrder.tsx
+++ b/src/components/MobileOffsetOrder.tsx
@@ -100,9 +100,9 @@ export function MobileOffsetOrder({ tons, monetaryAmount, onBack }: Props) {
   useEffect(() => {
     setFormData(prev => ({
       ...prev,
-      message: `I would like to offset ${formatTons(actualOffsetTons)} tons of CO2 (${offsetPercentage}% of ${formatTons(tons)} tons) from my yacht's emissions.`
+      message: `I would like to offset ${formatTons(actualOffsetTons)} tons of CO2 (${offsetPercentage}% of ${formatTons(baseTons)} tons) from my yacht's emissions.`
     }));
-  }, [offsetPercentage, actualOffsetTons, tons]);
+  }, [offsetPercentage, actualOffsetTons, baseTons]);
 
   // Save offset percentage and portfolio ID to localStorage
   useEffect(() => {
@@ -385,7 +385,7 @@ export function MobileOffsetOrder({ tons, monetaryAmount, onBack }: Props) {
                   </span>
                 </div>
                 <div className="text-sm text-blue-600 mt-1">
-                  {offsetPercentage}% of {formatTons(tons)} tons total emissions
+                  {offsetPercentage}% of {formatTons(baseTons)} tons total emissions
                 </div>
               </div>
             </div>
diff --git a/src/components/OffsetOrder.tsx b/src/components/OffsetOrder.tsx
index b2e9670..f1fa364 100644
--- a/src/components/OffsetOrder.tsx
+++ b/src/components/OffsetOrder.tsx
@@ -226,7 +226,7 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
           Offset Your Impact
         </h2>
         <p className="text-lg text-gray-600">
-          You're about to offset {formatTons(tons)} tons of CO₂
+          You're about to offset {formatTons(actualOffsetTons)} tons of CO₂
         </p>
       </motion.div>