From bda4a84bceff69f060807903cadc6bb7849b3499 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Thu, 30 Oct 2025 15:31:34 +0100
Subject: [PATCH] Auto-redirect to calculator when checkout is cancelled
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Updated CheckoutCancel component to automatically redirect to the calculator
page after 100ms when the component mounts. This ensures:

- Users are immediately taken back to the calculator with their saved state
- No need to manually click "Try Again" button
- Calculator state is preserved from localStorage
- URL properly updates to /calculator via existing handleNavigate logic

User experience:
1. User cancels Stripe checkout
2. Stripe redirects to /checkout/cancel
3. CheckoutCancel component mounts and immediately redirects to calculator
4. Calculator displays with all previously entered values restored

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/pages/CheckoutCancel.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/pages/CheckoutCancel.tsx b/src/pages/CheckoutCancel.tsx
index d3ec06b..d09cc4d 100644
--- a/src/pages/CheckoutCancel.tsx
+++ b/src/pages/CheckoutCancel.tsx
@@ -1,4 +1,5 @@
 import { motion } from 'framer-motion';
+import { useEffect } from 'react';
 
 interface CheckoutCancelProps {
   onNavigateHome: () => void;
@@ -9,6 +10,16 @@ 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]);
+
   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">
       <motion.div