Merge pull request #28 from deco-sites/jonasjesus/deco-5291-mutation-scopes

feat(cart): mutation scopes + global busy indicator (DECO-5291)

Author: JonasJesus42

src/components/header/Bag.tsx

@@ -1,10 +1,17 @@
+import { useMutationState } from "@tanstack/react-query";
 import { MINICART_DRAWER_ID } from "../../constants";
 import Icon from "../ui/Icon";
 import { useCart } from "../../platform/cart";
 
 export default function Bag() {
   const { cart } = useCart();
   const count = cart.items.length;
+  // Global "cart busy" indicator: any in-flight cart mutation (add/update/
+  // remove) from anywhere in the tree, read via useMutationState by the
+  // ["cart", …] mutationKey — no prop drilling.
+  const busy = useMutationState({
+    filters: { mutationKey: ["cart"], status: "pending" },
+  }).length > 0;
   return (
     <label
       className="indicator"
@@ -17,7 +24,9 @@ export default function Bag() {
         </span>
       )}
       <span className="btn btn-square btn-sm btn-ghost no-animation">
-        <Icon id="shopping_bag" />
+        {busy
+          ? <span className="loading loading-spinner loading-xs" />
+          : <Icon id="shopping_bag" />}
       </span>
     </label>
   );

src/components/minicart/Minicart.tsx

@@ -13,16 +13,19 @@ import {
 
 function QuantityStepper({ item }: { item: CartItem }) {
   const update = useUpdateCartItem();
-  const pending = update.isPending && update.variables?.lineId === item.lineId;
   const set = (quantity: number) =>
     update.mutate({ lineId: item.lineId, quantity: Math.max(1, quantity) });
+  // No `pending` freeze: the quantity updates optimistically on click and the
+  // "cart" mutation scope serializes the requests, so rapid clicks stay
+  // consistent and the buttons remain interactive. Only the lower bound is
+  // disabled.
   return (
     <div className="join border border-base-200 rounded">
       <button
         type="button"
         className="join-item btn btn-ghost btn-sm no-animation"
         aria-label="Decrease quantity"
-        disabled={pending || item.quantity <= 1}
+        disabled={item.quantity <= 1}
         onClick={() => set(item.quantity - 1)}
       >
         -
@@ -34,7 +37,6 @@ function QuantityStepper({ item }: { item: CartItem }) {
         type="button"
         className="join-item btn btn-ghost btn-sm no-animation"
         aria-label="Increase quantity"
-        disabled={pending}
         onClick={() => set(item.quantity + 1)}
       >
         +

src/platform/cart/cart.hooks.ts

@@ -67,6 +67,12 @@ export function useCart() {
 export function useAddToCart() {
   const qc = useQueryClient();
   return useMutation({
+    // Serialize all cart mutations (same scope id) so rapid actions run in
+    // order — the server sets absolute quantities, so out-of-order responses
+    // would otherwise clobber the cache. mutationKey lets useMutationState
+    // surface a global "cart busy" indicator.
+    scope: { id: "cart" },
+    mutationKey: ["cart", "add"],
     mutationFn: (input: { merchandiseId: string; quantity?: number }) =>
       addItemServerFn({ data: input }),
     // NOTE(DECO-5278): optimistic add is deferred — building an optimistic
@@ -82,6 +88,8 @@ export function useAddToCart() {
 export function useUpdateCartItem() {
   const qc = useQueryClient();
   return useMutation({
+    scope: { id: "cart" },
+    mutationKey: ["cart", "update"],
     mutationFn: (input: { lineId: string; quantity: number }) =>
       updateItemQuantityServerFn({ data: input }),
     onMutate: ({ lineId, quantity }) =>
@@ -98,6 +106,8 @@ export function useUpdateCartItem() {
 export function useRemoveCartItem() {
   const qc = useQueryClient();
   return useMutation({
+    scope: { id: "cart" },
+    mutationKey: ["cart", "remove"],
     mutationFn: (input: { lineId: string }) => removeItemServerFn({ data: input }),
     onMutate: ({ lineId }) =>
       optimisticCartUpdate(qc, (items) => items.filter((i) => i.lineId !== lineId)),