From 043cdf07b39cf34889c46153b147989ddba889a5 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Thu, 30 Oct 2025 14:02:28 +0100
Subject: [PATCH] Fix state persistence: save state before navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Issue: Calculator inputs were not being saved before navigating to checkout
because navigation happened synchronously before useEffect could run.

Solution: Call saveState() directly in handleCalculate before navigation
in both TripCalculator and MobileCalculator components.

This ensures calculator inputs (fuel amount, distance, etc.) are properly
preserved when users click "Calculate Impact" and then cancel checkout.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/MobileCalculator.tsx | 15 ++++++++++++++-
 src/components/TripCalculator.tsx   | 15 ++++++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/components/MobileCalculator.tsx b/src/components/MobileCalculator.tsx
index c80714d..812a57d 100644
--- a/src/components/MobileCalculator.tsx
+++ b/src/components/MobileCalculator.tsx
@@ -82,6 +82,19 @@ export function MobileCalculator({ vesselData, onOffsetClick, onBack }: Props) {
 
   const handleCalculate = useCallback((e: React.FormEvent) => {
     e.preventDefault();
+
+    // Save state before setting results
+    saveState({
+      calculationType,
+      distance,
+      speed,
+      fuelRate,
+      fuelAmount,
+      fuelUnit,
+      customAmount,
+      offsetPercentage: 100,
+    });
+
     if (calculationType === 'distance') {
       const estimate = calculateTripCarbon(
         vesselData,
@@ -99,7 +112,7 @@ export function MobileCalculator({ vesselData, onOffsetClick, onBack }: Props) {
         co2Emissions
       });
     }
-  }, [calculationType, distance, speed, fuelRate, fuelAmount, fuelUnit, vesselData]);
+  }, [calculationType, distance, speed, fuelRate, fuelAmount, fuelUnit, customAmount, vesselData, saveState]);
 
 
   const handleCustomAmountChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/src/components/TripCalculator.tsx b/src/components/TripCalculator.tsx
index aae17c9..d922aa2 100644
--- a/src/components/TripCalculator.tsx
+++ b/src/components/TripCalculator.tsx
@@ -66,6 +66,19 @@ export function TripCalculator({ vesselData, onOffsetClick }: Props) {
 
   const handleCalculate = useCallback((e: React.FormEvent) => {
     e.preventDefault();
+
+    // Save state before navigating
+    saveState({
+      calculationType,
+      distance,
+      speed,
+      fuelRate,
+      fuelAmount,
+      fuelUnit,
+      customAmount,
+      offsetPercentage: 100,
+    });
+
     if (calculationType === 'distance') {
       const estimate = calculateTripCarbon(
         vesselData,
@@ -80,7 +93,7 @@ export function TripCalculator({ vesselData, onOffsetClick }: Props) {
       // Immediately navigate to projects page without showing results
       onOffsetClick?.(co2Emissions);
     }
-  }, [calculationType, distance, speed, fuelRate, fuelAmount, fuelUnit, vesselData, onOffsetClick]);
+  }, [calculationType, distance, speed, fuelRate, fuelAmount, fuelUnit, customAmount, vesselData, onOffsetClick, saveState]);
 
 
   const handleCustomAmountChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {