Improve: Cart clearing on success page with better state management

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.

.claude/settings.local.json

@@ -74,7 +74,8 @@
       "Bash(git commit -m 'Improve: Design specification sheet now shows previews and info *)",
       "Bash(git commit -m 'Fix: Handle undefined designElements in design spec SVG rendering *)",
       "Bash(git commit -m 'Fix: Ensure cart is completely cleared after payment success *)",
-      "Bash(git commit -m 'Fix: Update order status to PAID on checkout success page *)"
+      "Bash(git commit -m 'Fix: Update order status to PAID on checkout success page *)",
+      "Bash(git commit -m 'Improve: Cart clearing on success page with better state management *)"
     ]
   }
 }

src/components/ClearCartOnMount.tsx

@@ -5,23 +5,28 @@ import { useCart } from '@/lib/cartStore';
 import { del as idbDel } from 'idb-keyval';
 
 export default function ClearCartOnMount() {
-  const clear = useCart((s) => s.clear);
-
   useEffect(() => {
     const clearCart = async () => {
-      console.log('🧹 ClearCartOnMount: Clearing cart on success page');
-      // Clear the in-memory state
-      clear();
-      // Also clear the IndexedDB storage to ensure it doesn't get restored
       try {
+        console.log('🧹 ClearCartOnMount: Clearing cart on success page');
+
+        // Delete IndexedDB storage first
         await idbDel('personalize-studio-cart');
-        console.log('✓ Cart cleared from IndexedDB');
+        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 from IndexedDB:', err);
-      }
-      // Clear the isCheckingOut flag
-      if (typeof window !== 'undefined') {
-        sessionStorage.removeItem('isCheckingOut');
+        console.error('Error clearing cart:', err);
       }
     };