From cb9c9f8291ec17b33f74fe64c72b84f0ac477724 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Thu, 30 Oct 2025 16:48:53 +0100
Subject: [PATCH] Fix calculator state persistence after browser back from
 Stripe
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Root causes fixed:
1. State only initialized on mount, not on navigation - Added useEffect to restore offset state when navigating to calculator page
2. CheckoutCancel auto-redirected too quickly (100ms) - Removed auto-redirect, user manually clicks Try Again
3. No restoration logic existed - New useEffect watches currentPage and savedState, restores when showOffsetOrder=true

Changes:
- App.tsx: Added restoration useEffect that triggers when currentPage='calculator' and savedState has offset state
- App.tsx: Added console logs for debugging state restoration
- CheckoutCancel.tsx: Removed auto-redirect useEffect and useEffect import
- CheckoutSuccess.tsx: Already correctly clears state on successful payment (verified)

User flow now:
1. Fill calculator → proceeds to offset order (state saved)
2. Click Proceed to Payment → Stripe checkout
3. Click browser back → lands on cancel page
4. Click Try Again → navigates to calculator
5. App detects savedState.showOffsetOrder=true → restores offset order screen with preserved data
---
 src/App.tsx                  | 16 ++++++++++++++++
 src/pages/CheckoutCancel.tsx | 12 ++----------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index a2c257b..a523905 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -90,6 +90,22 @@ function App() {
     return () => window.removeEventListener('scroll', handleScroll);
   }, [lastScrollY]);
 
+  // Restore offset order state when navigating to calculator page
+  // This handles browser back from Stripe checkout
+  useEffect(() => {
+    if (currentPage === 'calculator' && savedState && savedState.showOffsetOrder) {
+      console.log('[State Restoration] Restoring offset order state from localStorage');
+      console.log('[State Restoration] Offset tons:', savedState.offsetTons);
+      console.log('[State Restoration] Monetary amount:', savedState.monetaryAmount);
+      console.log('[State Restoration] Calculator type:', savedState.calculatorTypeUsed);
+
+      setShowOffsetOrder(true);
+      setOffsetTons(savedState.offsetTons || 0);
+      setMonetaryAmount(savedState.monetaryAmount);
+      setCalculatorType(savedState.calculatorTypeUsed || 'trip');
+    }
+  }, [currentPage, savedState]);
+
   const handleSearch = async (imo: string) => {
     setLoading(true);
     setError(null);
diff --git a/src/pages/CheckoutCancel.tsx b/src/pages/CheckoutCancel.tsx
index d09cc4d..7731a2c 100644
--- a/src/pages/CheckoutCancel.tsx
+++ b/src/pages/CheckoutCancel.tsx
@@ -1,5 +1,4 @@
 import { motion } from 'framer-motion';
-import { useEffect } from 'react';
 
 interface CheckoutCancelProps {
   onNavigateHome: () => void;
@@ -10,15 +9,8 @@ export default function CheckoutCancel({
   onNavigateHome,
   onNavigateCalculator
 }: CheckoutCancelProps) {
-  // Automatically redirect to calculator on mount
-  useEffect(() => {
-    // Small delay to ensure smooth transition
-    const timer = setTimeout(() => {
-      onNavigateCalculator();
-    }, 100);
-
-    return () => clearTimeout(timer);
-  }, [onNavigateCalculator]);
+  // Note: Removed auto-redirect to allow offset order state restoration to work
+  // User can manually click "Try Again" to return to calculator
 
   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">