Files
craft2prints/src/components/LogoutOnUnload.tsx
T
AndymickandClaude Haiku 4.5 eff9a72409 Improve debug logging for checkout flow
Add emoji-prefixed logs to make debugging easier:
- 💳 Checkout button clicked
- ✓ Flag set/skipped actions
- 🚪 LogoutOnUnload handler
- 📡 API fetch
- 📦 API response
- 🔗 Stripe redirect
- 🗑️ Cart clearing

This makes it much easier to see the flow in the console.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-07-18 06:59:59 +01:00

45 lines
1.5 KiB
TypeScript

'use client';
import { useEffect } from 'react';
import { useCart } from '@/lib/cartStore';
/**
* Logs out the user when they close/leave the page
* Works for both admin and customer sessions
* Skips logout when navigating to external checkout (Stripe, etc)
*/
export default function LogoutOnUnload() {
const clearCart = useCart((s) => s.clear);
const cartItems = useCart((s) => s.items);
useEffect(() => {
const handleUnload = () => {
// Don't logout if we're in the middle of checkout (navigating to Stripe)
// The checkout component sets this flag before making the API call
const isCheckingOut = typeof window !== 'undefined' && sessionStorage.getItem('isCheckingOut');
console.log('🚪 LogoutOnUnload handleUnload - cart items:', cartItems.length, 'isCheckingOut:', isCheckingOut);
if (isCheckingOut) {
console.log('✓ Skipping logout - checkout in progress');
return;
}
// Clear cart on logout
console.log('🗑️ Clearing cart and logging out');
clearCart();
// Use sendBeacon to reliably send logout even when page is closing
// This doesn't wait for a response, which is fine for logout
navigator.sendBeacon('/api/logout');
};
window.addEventListener('beforeunload', handleUnload);
window.addEventListener('unload', handleUnload);
return () => {
window.removeEventListener('beforeunload', handleUnload);
window.removeEventListener('unload', handleUnload);
};
}, [clearCart]);
return null;
}