@instockng/storefront-ui 1.0.11 → 1.0.13

package/src/contexts/CartContext.tsx

@@ -50,6 +50,8 @@ interface CartContextValue {
   removeDiscount: () => Promise<void>;
   /** Clear cart (removes from localStorage) */
   clearCart: () => void;
+  /** Clear cart and create a new one immediately */
+  clearAndCreateNewCart: () => void;
   /** Refresh cart data */
   refetch: () => void;
   /** Whether the cart modal is open */
@@ -84,7 +86,8 @@ export function CartProvider({ children, brandSlug, initialCartId, shoppingCartP
   const [isMounted, setIsMounted] = useState(false);
 
   // Use refs to prevent infinite loops
-  const hasInitializedRef = useRef(false);
+  const hasLoadedFromStorageRef = useRef(false);
+  const hasAutoCreatedRef = useRef(false);
   const isHandlingErrorRef = useRef(false);
 
   // Set mounted flag on client
@@ -95,7 +98,9 @@ export function CartProvider({ children, brandSlug, initialCartId, shoppingCartP
   // Load cartId from URL/localStorage after mount (client-side only)
   // This avoids hydration mismatch between server and client
   useEffect(() => {
-    if (initialCartId || hasInitializedRef.current) return;
+    if (initialCartId || hasLoadedFromStorageRef.current) return;
+
+    hasLoadedFromStorageRef.current = true;
 
     // Check URL query params first
     const urlParams = new URLSearchParams(window.location.search);
@@ -132,41 +137,53 @@ export function CartProvider({ children, brandSlug, initialCartId, shoppingCartP
     onError: (error) => {
       console.error('Failed to create cart:', error);
     },
+    retry: 10,
   });
 
-  // Auto-create cart on mount if no cartId exists - only runs ONCE
-  // Use a layout effect to run before paint
+  // Auto-create cart ONLY on initial mount if no cartId in localStorage
+  // After the first mount, we don't auto-create (user must explicitly add items)
   useEffect(() => {
-    if (!hasInitializedRef.current && !cartId && !initialCartId) {
-      hasInitializedRef.current = true;
-      // Defer cart creation to next tick
-      const timeoutId = setTimeout(() => {
-        if (!hasInitializedRef.current) return; // Double check
+    // Only run on initial mount
+    if (hasAutoCreatedRef.current) return;
+
+    hasAutoCreatedRef.current = true;
+
+    // Defer cart creation to allow localStorage to load first
+    const timeoutId = setTimeout(() => {
+      // Check localStorage directly (don't rely on state due to closure)
+      const storedCartId = typeof window !== 'undefined' ? localStorage.getItem(CART_ID_KEY) : null;
+
+      // Only create if we still don't have a cartId after localStorage loaded
+      if (!storedCartId && !initialCartId) {
         createCartMutation.mutate(brandSlug);
-      }, 0);
+      }
+    }, 150); // Delay to ensure localStorage effect has run
 
-      return () => clearTimeout(timeoutId);
-    }
+    return () => clearTimeout(timeoutId);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, []); // Empty deps - truly only run once on mount
 
   // Handle cart fetch error (invalid/expired cart from URL or localStorage)
-  // Only clear the cart if there's an error, don't try to create a new one
+  // Clear the invalid cart and create a new one
   useEffect(() => {
     if (error && cartId && !isHandlingErrorRef.current) {
       isHandlingErrorRef.current = true;
-      console.warn('Cart fetch failed, clearing invalid cart:', error);
-
-      // Use a microtask to batch the state updates
-      Promise.resolve().then(() => {
-        setCartId(null);
-        if (typeof window !== 'undefined') {
-          localStorage.removeItem(CART_ID_KEY);
-        }
+      console.warn('Cart fetch failed, creating new cart:', error);
+
+      // Clear invalid cart
+      setCartId(null);
+      if (typeof window !== 'undefined') {
+        localStorage.removeItem(CART_ID_KEY);
+      }
+
+      // Create a new cart after clearing the invalid one
+      setTimeout(() => {
+        createCartMutation.mutate(brandSlug);
         isHandlingErrorRef.current = false;
-      });
+      }, 100);
     }
-  }, [error, cartId]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [error, cartId, brandSlug]); // Don't include createCartMutation to avoid infinite loop
 
   // Mutations
   const addItemMutation = useAddCartItem(cartId || '', {
@@ -191,6 +208,7 @@ export function CartProvider({ children, brandSlug, initialCartId, shoppingCartP
 
   const updateCartMutation = useUpdateCart(cartId || '', {
     onSuccess: () => refetch(),
+    retry: 3
   });
 
   const checkoutMutation = useCheckoutCart(cartId || '');
@@ -251,6 +269,14 @@ export function CartProvider({ children, brandSlug, initialCartId, shoppingCartP
     }
   }, []);
 
+  const clearAndCreateNewCart = useCallback(() => {
+    clearCart();
+
+    // Create a new cart immediately
+    createCartMutation.mutate(brandSlug);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [brandSlug]);
+
   const open = useCallback(() => {
     setIsOpen(true);
   }, []);
@@ -272,6 +298,7 @@ export function CartProvider({ children, brandSlug, initialCartId, shoppingCartP
     applyDiscount,
     removeDiscount,
     clearCart,
+    clearAndCreateNewCart,
     refetch,
     isOpen,
     open,

package/src/test-utils/MockCartProvider.tsx

@@ -400,6 +400,14 @@ export function MockCartProvider({
       }));
     },
 
+    clearAndCreateNewCart: () => {
+      console.log('Mock clearAndCreateNewCart');
+      setCart(prev => ({
+        ...prev,
+        items: [],
+      }));
+    },
+
     refetch: () => {
       console.log('Mock refetch');
     },