Use useCart.getState() to ensure we're clearing the current store state and delete IndexedDB before clearing store. Add detailed logging to help debug cart clearing issues. Ensures cart is completely emptied on checkout success.
38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect } from 'react';
|
|
import { useCart } from '@/lib/cartStore';
|
|
import { del as idbDel } from 'idb-keyval';
|
|
|
|
export default function ClearCartOnMount() {
|
|
useEffect(() => {
|
|
const clearCart = async () => {
|
|
try {
|
|
console.log('🧹 ClearCartOnMount: Clearing cart on success page');
|
|
|
|
// Delete IndexedDB storage first
|
|
await idbDel('personalize-studio-cart');
|
|
console.log('✓ Deleted cart from IndexedDB');
|
|
|
|
// Then clear the in-memory state by getting a fresh reference
|
|
// This ensures we're using the current store state
|
|
const { clear: clearStore } = useCart.getState();
|
|
clearStore();
|
|
console.log('✓ Cleared cart store state');
|
|
|
|
// Clear the isCheckingOut flag
|
|
if (typeof window !== 'undefined') {
|
|
sessionStorage.removeItem('isCheckingOut');
|
|
console.log('✓ Cleared checkout flag');
|
|
}
|
|
} catch (err) {
|
|
console.error('Error clearing cart:', err);
|
|
}
|
|
};
|
|
|
|
clearCart();
|
|
}, []); // Empty dependency array - run once on mount
|
|
|
|
return null;
|
|
}
|