Auto-redirect to calculator when checkout is cancelled
All checks were successful
Build and Push Docker Images / docker (push) Successful in 49s
All checks were successful
Build and Push Docker Images / docker (push) Successful in 49s
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>
This commit is contained in:
parent
319db3627c
commit
bda4a84bce
@ -1,4 +1,5 @@
|
|||||||
import { motion } from 'framer-motion';
|
import { motion } from 'framer-motion';
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
|
||||||
interface CheckoutCancelProps {
|
interface CheckoutCancelProps {
|
||||||
onNavigateHome: () => void;
|
onNavigateHome: () => void;
|
||||||
@ -9,6 +10,16 @@ export default function CheckoutCancel({
|
|||||||
onNavigateHome,
|
onNavigateHome,
|
||||||
onNavigateCalculator
|
onNavigateCalculator
|
||||||
}: CheckoutCancelProps) {
|
}: CheckoutCancelProps) {
|
||||||
|
// Automatically redirect to calculator on mount
|
||||||
|
useEffect(() => {
|
||||||
|
// Small delay to ensure smooth transition
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
onNavigateCalculator();
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}, [onNavigateCalculator]);
|
||||||
|
|
||||||
return (
|
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">
|
<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
|
<motion.div
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user