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

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 6ea4998..e0c7add 100644
--- a/.claude/settings.local.json
+++ b/.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 *)"
     ]
   }
 }
diff --git a/src/components/ClearCartOnMount.tsx b/src/components/ClearCartOnMount.tsx
index 6c9cd10..30b880d 100644
--- a/src/components/ClearCartOnMount.tsx
+++ b/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(() => {
-    console.log('🧹 ClearCartOnMount: Clearing cart on success page');
-    clear();
-    // Also clear the isCheckingOut flag if it was set
-    if (typeof window !== 'undefined') {
-      sessionStorage.removeItem('isCheckingOut');
-    }
+    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 {
+        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;