From eda518d1beffdc37b7d61e1aa085b89aecaa8aac Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Sat, 18 Jul 2026 06:25:30 +0100
Subject: [PATCH] Fix cart clearing during Stripe checkout redirect

Use sessionStorage flag to prevent LogoutOnUnload from clearing cart and logging
out when navigating to Stripe checkout.

Changes:
- Checkout button sets 'isCheckingOut' flag in sessionStorage before API call
- LogoutOnUnload checks this flag and skips logout if checkout in progress
- Flag is removed if API returns an error
- Flag persists during navigation to Stripe URL

This ensures cart and login persist through Stripe payment flow.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 src/app/checkout/client.tsx       |  4 ++++
 src/components/LogoutOnUnload.tsx | 23 ++++-------------------
 2 files changed, 8 insertions(+), 19 deletions(-)

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;
       }