From cf3c0be0f3edecd0b367cb2510d3b6ae1f19407b Mon Sep 17 00:00:00 2001
From: Franco May <franco.may@etraveligroup.com>
Date: Tue, 1 Jul 2025 10:50:53 +0200
Subject: [PATCH] Fix: Move useOptimistic to provider level for consistent cart
 state

- Move useOptimistic from useCart hook to CartProvider
- Create single shared optimistic cart instance
- Eliminate lag between cart operations and UI updates
- Ensure all components see consistent cart state
---
 components/cart/cart-context.tsx | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/components/cart/cart-context.tsx b/components/cart/cart-context.tsx
index 150514599..576968d64 100644
--- a/components/cart/cart-context.tsx
+++ b/components/cart/cart-context.tsx
@@ -28,6 +28,8 @@ type CartAction =
 
 type CartContextType = {
   cartPromise: Promise<Cart | undefined>;
+  optimisticCart: Cart | undefined;
+  updateOptimisticCart: (action: CartAction) => void;
 };
 
 const CartContext = createContext<CartContextType | undefined>(undefined);
@@ -197,8 +199,14 @@ export function CartProvider({
   children: React.ReactNode;
   cartPromise: Promise<Cart | undefined>;
 }) {
+  const initialCart = use(cartPromise);
+  const [optimisticCart, updateOptimisticCart] = useOptimistic(
+    initialCart,
+    cartReducer
+  );
+
   return (
-    <CartContext.Provider value={{ cartPromise }}>
+    <CartContext.Provider value={{ cartPromise, optimisticCart, updateOptimisticCart }}>
       {children}
     </CartContext.Provider>
   );
@@ -210,29 +218,23 @@ export function useCart() {
     throw new Error('useCart must be used within a CartProvider');
   }
 
-  const initialCart = use(context.cartPromise);
-  const [optimisticCart, updateOptimisticCart] = useOptimistic(
-    initialCart,
-    cartReducer
-  );
-
   const updateCartItem = (merchandiseId: string, updateType: UpdateType) => {
-    updateOptimisticCart({
+    context.updateOptimisticCart({
       type: 'UPDATE_ITEM',
       payload: { merchandiseId, updateType }
     });
   };
 
   const addCartItem = (variant: ProductVariant, product: Product) => {
-    updateOptimisticCart({ type: 'ADD_ITEM', payload: { variant, product } });
+    context.updateOptimisticCart({ type: 'ADD_ITEM', payload: { variant, product } });
   };
 
   return useMemo(
     () => ({
-      cart: optimisticCart,
+      cart: context.optimisticCart,
       updateCartItem,
       addCartItem
     }),
-    [optimisticCart]
+    [context.optimisticCart, context.updateOptimisticCart]
   );
 }