diff --git a/src/app/checkout/client.tsx b/src/app/checkout/client.tsx index 7a72d7b..22d3366 100644 --- a/src/app/checkout/client.tsx +++ b/src/app/checkout/client.tsx @@ -117,6 +117,9 @@ export default function CheckoutPageClient({ isLoggedIn, customer }: CheckoutPag setCheckingOut(true); setCheckoutError(null); try { + // Mark that we're checking out so LogoutOnUnload doesn't clear cart + sessionStorage.setItem('isCheckingOut', 'true'); + const res = await fetch('/api/checkout', { method: 'POST', headers: { 'Content-Type': 'application/json' }, @@ -125,6 +128,7 @@ export default function CheckoutPageClient({ isLoggedIn, customer }: CheckoutPag const data = await res.json(); console.log('Checkout response:', { status: res.status, ok: res.ok, data }); if (!res.ok || !data.url) { + sessionStorage.removeItem('isCheckingOut'); throw new Error(data.error ?? 'Something went wrong starting checkout.'); } window.location.href = data.url; diff --git a/src/components/LogoutOnUnload.tsx b/src/components/LogoutOnUnload.tsx index 84dc3ea..1abe0c1 100644 --- a/src/components/LogoutOnUnload.tsx +++ b/src/components/LogoutOnUnload.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useEffect, useRef } from 'react'; +import { useEffect } from 'react'; import { useCart } from '@/lib/cartStore'; /** @@ -10,28 +10,13 @@ import { useCart } from '@/lib/cartStore'; */ export default function LogoutOnUnload() { const clearCart = useCart((s) => s.clear); - const isCheckingOut = useRef(false); - - useEffect(() => { - // Mark when checkout is being initiated - const origFetch = window.fetch; - window.fetch = function(...args) { - const url = typeof args[0] === 'string' ? args[0] : (args[0] as Request).url; - if (url?.includes('/api/checkout')) { - isCheckingOut.current = true; - } - return origFetch.apply(this, args); - }; - - return () => { - window.fetch = origFetch; - }; - }, []); useEffect(() => { const handleUnload = () => { // Don't logout if we're in the middle of checkout (navigating to Stripe) - if (isCheckingOut.current) { + // The checkout component sets this flag before making the API call + const isCheckingOut = typeof window !== 'undefined' && sessionStorage.getItem('isCheckingOut'); + if (isCheckingOut) { return; }