Cart Context

1// Cart state — mirrors the Wix SERVER cart (never a local copy). Wrap the app in <CartProvider>;
2// every component reads useCart(). Data wiring is correct as-is — do not restyle or re-derive it.
3import { createContext, useContext, useState, useEffect, useCallback } from "react";
4import {
5  getCurrentCart,
6  addToCart as apiAdd,
7  removeFromCart as apiRemove,
8  updateCartItemQuantity as apiQty,
9  checkout as apiCheckout,
10} from "@/rest/wix-store-cart";
11
12const CartContext = createContext(null);
13
14export function CartProvider({ children }) {
15  const [cart, setCart] = useState(null);
16  const [isOpen, setIsOpen] = useState(false);
17  const [loading, setLoading] = useState(false);
18
19  const refreshCart = useCallback(async () => setCart(await getCurrentCart()), []);
20  useEffect(() => {
21    refreshCart();
22    const onVisible = () => document.visibilityState === "visible" && refreshCart();
23    document.addEventListener("visibilitychange", onVisible);
24    return () => document.removeEventListener("visibilitychange", onVisible);
25  }, [refreshCart]);
26
27  const itemCount = (cart?.lineItems ?? []).reduce((n, li) => n + (li.quantity || 0), 0);
28  const addToCart = async (id, variantId, qty = 1, extras) => {
29    setLoading(true);
30    try { setCart(await apiAdd(id, variantId, qty, extras)); setIsOpen(true); } finally { setLoading(false); }
31  };
32  const removeItem = async (lineItemId) => { setLoading(true); try { setCart(await apiRemove(lineItemId)); } finally { setLoading(false); } };
33  const updateQuantity = async (lineItemId, qty) => { setLoading(true); try { setCart(await apiQty(lineItemId, qty)); } finally { setLoading(false); } };
34  const checkout = async () => { setLoading(true); try { window.location.href = await apiCheckout(); } finally { setLoading(false); } };
35
36  return (
37    <CartContext.Provider value={{ cart, itemCount, isOpen, setIsOpen, loading, addToCart, removeItem, updateQuantity, checkout, refreshCart }}>
38      {children}
39    </CartContext.Provider>
40  );
41}
42
43export function useCart() {
44  const ctx = useContext(CartContext);
45  if (!ctx) throw new Error("useCart must be used within <CartProvider>");
46  return ctx;
47}