Fix: Ensure cart is completely cleared after payment success

ClearCartOnMount now explicitly deletes the IndexedDB storage in addition
to clearing the in-memory state. This prevents the cart from being
restored from IndexedDB on subsequent page loads after payment completes.

Fixes issue where cart items remained in bag after successful checkout.

.claude/settings.local.json

@@ -72,7 +72,8 @@
       "Bash(git commit -m 'Fix: Safely parse designJson in admin order detail page *)",
       "Bash(xargs grep -l \"design-spec\")",
       "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: Handle undefined designElements in design spec SVG rendering *)",
+      "Bash(git commit -m 'Fix: Ensure cart is completely cleared after payment success *)"
     ]
   }
 }

src/components/ClearCartOnMount.tsx

@@ -2,17 +2,30 @@
 
 import { useEffect } from 'react';
 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 isCheckingOut flag if it was set
+      // Also clear the IndexedDB storage to ensure it doesn't get restored
+      try {
+        await idbDel('personalize-studio-cart');
+        console.log('✓ Cart cleared from IndexedDB');
+      } catch (err) {
+        console.error('Error clearing cart from IndexedDB:', err);
+      }
+      // Clear the isCheckingOut flag
       if (typeof window !== 'undefined') {
         sessionStorage.removeItem('isCheckingOut');
       }
+    };
+
+    clearCart();
   }, []); // Empty dependency array - run once on mount
 
   return null;