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>
45 lines
1.5 KiB
TypeScript
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;
|
|
}
|