From 09bbb804e569c3c20ff6a2992a8c94f1b67ecc48 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Thu, 30 Oct 2025 16:31:30 +0100
Subject: [PATCH] Persist offset order state for browser back navigation from
 Stripe

- Extended CalculatorState interface to include offset order fields (showOffsetOrder, offsetTons, monetaryAmount, calculatorTypeUsed)
- App.tsx now saves offset state to localStorage when user proceeds to offset order
- App.tsx restores offset state from localStorage on mount
- App.tsx clears offset state when user navigates back from offset order
- Fixes issue where browser back button from Stripe returns to calculator input instead of offset order screen
---
 src/App.tsx                     | 26 ++++++++++++++++++++++----
 src/hooks/useCalculatorState.ts |  6 ++++++
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 58ac35e..a2c257b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -14,6 +14,7 @@ import CheckoutCancel from './pages/CheckoutCancel';
 import { getVesselData } from './api/aisClient';
 import { calculateTripCarbon } from './utils/carbonCalculator';
 import { analytics } from './utils/analytics';
+import { useCalculatorState } from './hooks/useCalculatorState';
 import type { VesselData, CarbonCalculation, CalculatorType } from './types';
 
 const sampleVessel: VesselData = {
@@ -26,14 +27,16 @@ const sampleVessel: VesselData = {
 };
 
 function App() {
+  const { state: savedState, saveState } = useCalculatorState();
+
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [vesselData, setVesselData] = useState<VesselData | null>(null);
   const [currentPage, setCurrentPage] = useState<'home' | 'calculator' | 'how-it-works' | 'about' | 'contact'>('home');
-  const [showOffsetOrder, setShowOffsetOrder] = useState(false);
-  const [offsetTons, setOffsetTons] = useState(0);
-  const [monetaryAmount, setMonetaryAmount] = useState<number | undefined>();
-  const [calculatorType, setCalculatorType] = useState<CalculatorType>('trip');
+  const [showOffsetOrder, setShowOffsetOrder] = useState(savedState?.showOffsetOrder || false);
+  const [offsetTons, setOffsetTons] = useState(savedState?.offsetTons || 0);
+  const [monetaryAmount, setMonetaryAmount] = useState<number | undefined>(savedState?.monetaryAmount);
+  const [calculatorType, setCalculatorType] = useState<CalculatorType>(savedState?.calculatorTypeUsed || 'trip');
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [isMobileApp, setIsMobileApp] = useState(false);
   const [isCheckoutSuccess, setIsCheckoutSuccess] = useState(false);
@@ -106,6 +109,15 @@ function App() {
     setOffsetTons(tons);
     setMonetaryAmount(monetaryAmount);
     setShowOffsetOrder(true);
+
+    // Save offset state to localStorage for browser back navigation
+    saveState({
+      showOffsetOrder: true,
+      offsetTons: tons,
+      monetaryAmount,
+      calculatorTypeUsed: calculatorType,
+    });
+
     window.scrollTo({ top: 0, behavior: 'smooth' });
   };
 
@@ -134,6 +146,12 @@ function App() {
             monetaryAmount={monetaryAmount}
             onBack={() => {
               setShowOffsetOrder(false);
+              // Clear offset state from localStorage when going back
+              saveState({
+                showOffsetOrder: false,
+                offsetTons: 0,
+                monetaryAmount: undefined,
+              });
               window.scrollTo({ top: 0, behavior: 'smooth' });
             }}
             calculatorType={calculatorType}
diff --git a/src/hooks/useCalculatorState.ts b/src/hooks/useCalculatorState.ts
index e05e801..51730a1 100644
--- a/src/hooks/useCalculatorState.ts
+++ b/src/hooks/useCalculatorState.ts
@@ -29,6 +29,12 @@ export interface CalculatorState {
   offsetPercentage: number;
   portfolioId?: number;
 
+  // Offset order state (for browser back navigation from Stripe)
+  showOffsetOrder?: boolean;
+  offsetTons?: number;
+  monetaryAmount?: number;
+  calculatorTypeUsed?: 'trip' | 'mobile';
+
   // Metadata
   timestamp: number; // Used for auto-expiry
 }