From f4a80d2a50995c456b440ac8c5879b77d5abadaa Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Sat, 18 Jul 2026 20:29:51 +0100
Subject: [PATCH] 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         |  3 ++-
 src/components/ClearCartOnMount.tsx | 29 +++++++++++++++++------------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 88de9f0..7ee78c5 100644
--- a/.claude/settings.local.json
+++ b/.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 *)"
     ]
   }
 }
diff --git a/src/components/ClearCartOnMount.tsx b/src/components/ClearCartOnMount.tsx
index 30b880d..5cb823c 100644
--- a/src/components/ClearCartOnMount.tsx
+++ b/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);
       }
     };