@cartbase/storefront 0.17.0 → 0.18.0

package/src/cart-drawer/item/index.tsx

@@ -1,162 +1,162 @@
-"use client"
-
-import { StoreImage as Image } from "../../lib/media-image"
-import Link from "next/link"
-import { type ReactNode } from "react"
-
-import type { CartLineItem } from "../../api/carts"
-import { Price } from "../../lib/price"
-import { cn } from "../../lib/utils"
-import { useCartDrawer } from "../context"
-import { CartItemQuantity } from "./quantity"
-import { CartItemVariant } from "./variant"
-
-/**
- * CartItem — a single cart line row: thumbnail, title, variant, quantity
- * stepper, price (with optional strikethrough), remove button.
- *
- * Ported from `@1click/ui/src/cart-drawer/item/index.tsx` (v2.3.1). Cartbase
- * data seam: `item` is the SDK's decorated `CartLineItem`
- * (`@cartbase/storefront/api/carts`) — per-line `total`/`original_total` are
- * server-computed EUR major units. Remove goes through the provider's
- * SDK-wired `removeItem` (DELETE line-items/:id, returns the full decorated
- * cart) instead of the Medusa server action. The variant row renders the
- * line's flat `variant_title` — Cartbase cart lines carry the variant title
- * string, not an embedded variant object.
- *
- * `children` is rendered below the main row — intended for per-item upsell
- * slots (see `CartItemUpsell` in `./upsell.tsx`).
- */
-
-type CartItemProps = {
-  item: CartLineItem
-  currencyCode: string
-  children?: ReactNode
-}
-
-export function CartItem({ item, currencyCode, children }: CartItemProps) {
-  const { labels, hrefs, removeItem } = useCartDrawer()
-
-  // Optimistic remove: the item is filtered out of the optimistic cart
-  // immediately on click, so the row vanishes at React update speed.
-  // The deleteLineItem SDK call runs in the background. On failure
-  // useOptimistic auto-reverts (confirmed snapshot unchanged) and the
-  // row reappears.
-  const handleRemove = () => {
-    void removeItem(item.id)
-  }
-  const removing = false // optimistic remove unmounts the row immediately
-
-  const total = item.total ?? 0
-  const originalTotal = item.original_total ?? 0
-  const hasDiscount = total < originalTotal
-  const productHref = `${hrefs.productPrefix}/${item.product_handle}`
-
-  return (
-    <div
-      className={cn(
-        "px-6 py-5 transition-opacity",
-        removing && "opacity-30 pointer-events-none"
-      )}
-    >
-      <div className="flex gap-4">
-        <Link href={productHref} className="flex-shrink-0">
-          <div
-            className="w-[64px] h-[84px] sm:w-[72px] sm:h-[72px] rounded-xl overflow-hidden bg-muted relative"
-            style={{ boxShadow: "0 1px 3px rgba(0,0,0,0.06)" }}
-          >
-            {item.thumbnail ? (
-              <Image
-                src={item.thumbnail}
-                alt={item.product_title || ""}
-                fill
-                className="object-cover"
-                sizes="72px"
-              />
-            ) : (
-              <div className="w-full h-full flex items-center justify-center">
-                <svg
-                  width="20"
-                  height="20"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  className="text-muted-foreground"
-                  strokeWidth="1.2"
-                >
-                  <rect x="3" y="3" width="18" height="18" rx="3" />
-                  <circle cx="8.5" cy="8.5" r="1.5" />
-                  <path
-                    d="M21 15l-5-5L5 21"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
-              </div>
-            )}
-          </div>
-        </Link>
-
-        <div className="flex-1 min-w-0 flex flex-col">
-          <div className="flex items-baseline justify-between gap-3">
-            <div className="min-w-0">
-              <Link
-                href={productHref}
-                className="text-sm font-semibold text-foreground hover:text-muted-foreground transition-colors line-clamp-2 leading-snug block"
-              >
-                {item.product_title}
-              </Link>
-              <CartItemVariant variantTitle={item.variant_title} />
-            </div>
-            <div className="text-right flex-shrink-0">
-              {hasDiscount && (
-                <span className="text-xs text-muted-foreground line-through block leading-none mb-0.5">
-                  <Price
-                    amount={originalTotal}
-                    currencyCode={currencyCode}
-                    className="text-xs text-muted-foreground"
-                  />
-                </span>
-              )}
-              <Price
-                amount={total}
-                currencyCode={currencyCode}
-                className={cn(
-                  "text-sm font-bold",
-                  hasDiscount ? "text-success" : "text-foreground"
-                )}
-              />
-            </div>
-          </div>
-
-          <div className="flex items-center justify-between mt-3">
-            <CartItemQuantity lineId={item.id} quantity={item.quantity} />
-            <button
-              type="button"
-              onClick={handleRemove}
-              className="w-8 h-8 flex items-center justify-center rounded-lg text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-all"
-              aria-label={labels.remove}
-            >
-              <svg
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="1.3"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <path d="M2.5 4.5h11M5.5 4.5V3a1 1 0 011-1h3a1 1 0 011 1v1.5M12.5 4.5v9a1 1 0 01-1 1h-7a1 1 0 01-1-1v-9" />
-                <path d="M6.5 7v4M9.5 7v4" />
-              </svg>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {children}
-      <div className="mt-5 border-b border-border" />
-    </div>
-  )
-}
+"use client"
+
+import { StoreImage as Image } from "../../lib/media-image"
+import Link from "next/link"
+import { type ReactNode } from "react"
+
+import type { CartLineItem } from "../../api/carts"
+import { Price } from "../../lib/price"
+import { cn } from "../../lib/utils"
+import { useCartDrawer } from "../context"
+import { CartItemQuantity } from "./quantity"
+import { CartItemVariant } from "./variant"
+
+/**
+ * CartItem — a single cart line row: thumbnail, title, variant, quantity
+ * stepper, price (with optional strikethrough), remove button.
+ *
+ * Ported from `@1click/ui/src/cart-drawer/item/index.tsx` (v2.3.1). Cartbase
+ * data seam: `item` is the SDK's decorated `CartLineItem`
+ * (`@cartbase/storefront/api/carts`) — per-line `total`/`original_total` are
+ * server-computed EUR major units. Remove goes through the provider's
+ * SDK-wired `removeItem` (DELETE line-items/:id, returns the full decorated
+ * cart) instead of the Medusa server action. The variant row renders the
+ * line's flat `variant_title` — Cartbase cart lines carry the variant title
+ * string, not an embedded variant object.
+ *
+ * `children` is rendered below the main row — intended for per-item upsell
+ * slots (see `CartItemUpsell` in `./upsell.tsx`).
+ */
+
+type CartItemProps = {
+  item: CartLineItem
+  currencyCode: string
+  children?: ReactNode
+}
+
+export function CartItem({ item, currencyCode, children }: CartItemProps) {
+  const { labels, hrefs, removeItem } = useCartDrawer()
+
+  // Optimistic remove: the item is filtered out of the optimistic cart
+  // immediately on click, so the row vanishes at React update speed.
+  // The deleteLineItem SDK call runs in the background. On failure
+  // useOptimistic auto-reverts (confirmed snapshot unchanged) and the
+  // row reappears.
+  const handleRemove = () => {
+    void removeItem(item.id)
+  }
+  const removing = false // optimistic remove unmounts the row immediately
+
+  const total = item.total ?? 0
+  const originalTotal = item.original_total ?? 0
+  const hasDiscount = total < originalTotal
+  const productHref = `${hrefs.productPrefix}/${item.product_handle}`
+
+  return (
+    <div
+      className={cn(
+        "px-6 py-5 transition-opacity",
+        removing && "opacity-30 pointer-events-none"
+      )}
+    >
+      <div className="flex gap-4">
+        <Link href={productHref} className="flex-shrink-0">
+          <div
+            className="w-[64px] h-[84px] sm:w-[72px] sm:h-[72px] rounded-xl overflow-hidden bg-muted relative"
+            style={{ boxShadow: "0 1px 3px rgba(0,0,0,0.06)" }}
+          >
+            {item.thumbnail ? (
+              <Image
+                src={item.thumbnail}
+                alt={item.product_title || ""}
+                fill
+                className="object-cover"
+                sizes="72px"
+              />
+            ) : (
+              <div className="w-full h-full flex items-center justify-center">
+                <svg
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  className="text-muted-foreground"
+                  strokeWidth="1.2"
+                >
+                  <rect x="3" y="3" width="18" height="18" rx="3" />
+                  <circle cx="8.5" cy="8.5" r="1.5" />
+                  <path
+                    d="M21 15l-5-5L5 21"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </div>
+            )}
+          </div>
+        </Link>
+
+        <div className="flex-1 min-w-0 flex flex-col">
+          <div className="flex items-baseline justify-between gap-3">
+            <div className="min-w-0">
+              <Link
+                href={productHref}
+                className="text-sm font-semibold text-foreground hover:text-muted-foreground transition-colors line-clamp-2 leading-snug block"
+              >
+                {item.product_title}
+              </Link>
+              <CartItemVariant variantTitle={item.variant_title} />
+            </div>
+            <div className="text-right flex-shrink-0">
+              {hasDiscount && (
+                <span className="text-xs text-muted-foreground line-through block leading-none mb-0.5">
+                  <Price
+                    amount={originalTotal}
+                    currencyCode={currencyCode}
+                    className="text-xs text-muted-foreground"
+                  />
+                </span>
+              )}
+              <Price
+                amount={total}
+                currencyCode={currencyCode}
+                className={cn(
+                  "text-sm font-bold",
+                  hasDiscount ? "text-success" : "text-foreground"
+                )}
+              />
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between mt-3">
+            <CartItemQuantity lineId={item.id} quantity={item.quantity} />
+            <button
+              type="button"
+              onClick={handleRemove}
+              className="w-8 h-8 flex items-center justify-center rounded-lg text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-all"
+              aria-label={labels.remove}
+            >
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.3"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M2.5 4.5h11M5.5 4.5V3a1 1 0 011-1h3a1 1 0 011 1v1.5M12.5 4.5v9a1 1 0 01-1 1h-7a1 1 0 01-1-1v-9" />
+                <path d="M6.5 7v4M9.5 7v4" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {children}
+      <div className="mt-5 border-b border-border" />
+    </div>
+  )
+}

package/src/cart-drawer/item/quantity.tsx

@@ -1,18 +1,16 @@
 "use client"
 
-import { useState } from "react"
-
 import { cn } from "../../lib/utils"
 import { useCartDrawer } from "../context"
 
 /**
  * CartItemQuantity — +/- quantity stepper for a single cart line item.
  *
- * Optimistic: the provider's `updateQuantity` dispatches an
- * "update_quantity" action against the useOptimistic state BEFORE awaiting
- * the SDK call. The stepper number changes instantly; the server work
- * happens in the background. On failure the optimistic state reverts
- * automatically (confirmed snapshot unchanged).
+ * Instant: every click shows at once and the stepper never locks; the
+ * provider combines fast clicks on one line and sends the number the
+ * shopper stopped at (`mutation-queue.ts`). On failure the optimistic state
+ * reverts automatically (confirmed snapshot unchanged). Until 2026-09-16
+ * the stepper locked for the whole round trip, so fast clicks were lost.
  *
  * Ported from `@1click/ui/src/cart-drawer/item/quantity.tsx` (v2.3.1).
  * Cartbase data seam: `updateQuantity` wraps
@@ -36,21 +34,17 @@ export function CartItemQuantity({
   className,
 }: CartItemQuantityProps) {
   const { updateQuantity } = useCartDrawer()
-  const [updating, setUpdating] = useState(false)
 
   const change = (newQty: number) => {
-    if (newQty < 1 || newQty > maxQuantity || updating) return
-    setUpdating(true)
-    // Resolves true/false when the server settles; failures are funneled
-    // through the provider's onOptimisticError.
-    void updateQuantity(lineId, newQty).finally(() => setUpdating(false))
+    if (newQty < 1 || newQty > maxQuantity) return
+    // Failures are funneled through the provider's onOptimisticError.
+    void updateQuantity(lineId, newQty)
   }
 
   return (
     <div
       className={cn(
         "inline-flex items-center border border-border rounded-lg h-9",
-        updating && "opacity-50 pointer-events-none",
         className
       )}
     >

package/src/cart-drawer/item/upsell.tsx

@@ -1,110 +1,110 @@
-"use client"
-
-import { StoreImage as Image } from "../../lib/media-image"
-import Link from "next/link"
-
-import { convertToLocale } from "../../lib/money"
-import { useCartDrawer } from "../context"
-
-/**
- * CartItemUpsell — slot rendered INSIDE a cart item for per-product
- * complementary recommendations. Accepts a list of products and an
- * onAdd handler.
- *
- * Ported from `@1click/ui/src/cart-drawer/item/upsell.tsx` (v2.3.1).
- * Cartbase data seam: source stores fed this from Medusa product fetches —
- * feed it from `@cartbase/storefront/api/search` `listRelatedProducts`
- * (per-anchor complements: manual admin picks + deterministic fallback)
- * mapped via `toCrossSellProduct` (`../cross-sell-sidebar`). `variantId`
- * was added to `UpsellProduct` and to the `onAdd` signature so the handler
- * can call the provider's `addItem(variantId)` directly — Cartbase carts add
- * by variant id, not product id. Prices are EUR major units.
- */
-
-export type UpsellProduct = {
-  id: string
-  title: string
-  handle: string
-  thumbnail: string | null
-  price: number
-  currencyCode: string
-  /** Variant to add (Cartbase add-to-cart is by variant id). */
-  variantId?: string
-}
-
-type CartItemUpsellProps = {
-  label?: string
-  products: UpsellProduct[]
-  onAdd?: (productId: string, variantId?: string) => void
-}
-
-export function CartItemUpsell({
-  label,
-  products,
-  onAdd,
-}: CartItemUpsellProps) {
-  const { labels, hrefs } = useCartDrawer()
-  if (!products.length) return null
-
-  return (
-    <div className="mt-3 pt-3 border-t border-border">
-      <p className="text-xs font-medium text-muted-foreground mb-2">
-        {label ?? labels.pairsWellWith}
-      </p>
-      <div className="space-y-2">
-        {products.map((product) => (
-          <div
-            key={product.id}
-            className="flex items-center gap-3 p-2 rounded-lg bg-muted hover:bg-muted/70 transition-colors"
-          >
-            <div className="w-10 h-10 rounded-lg overflow-hidden bg-card flex-shrink-0 relative">
-              {product.thumbnail ? (
-                <Image
-                  src={product.thumbnail}
-                  alt={product.title}
-                  fill
-                  className="object-cover"
-                  sizes="40px"
-                />
-              ) : (
-                <div className="w-full h-full bg-muted" />
-              )}
-            </div>
-            <div className="flex-1 min-w-0">
-              <Link
-                href={`${hrefs.productPrefix}/${product.handle}`}
-                className="text-xs font-medium text-foreground truncate block"
-              >
-                {product.title}
-              </Link>
-              <span className="text-xs text-muted-foreground">
-                {convertToLocale({
-                  amount: product.price,
-                  currency_code: product.currencyCode,
-                })}
-              </span>
-            </div>
-            <button
-              type="button"
-              onClick={() => onAdd?.(product.id, product.variantId)}
-              className="w-7 h-7 flex items-center justify-center rounded-full border border-border text-muted-foreground hover:border-text-base hover:text-foreground transition-colors flex-shrink-0"
-              aria-label={`${labels.addToCart} ${product.title}`}
-            >
-              <svg
-                width="12"
-                height="12"
-                viewBox="0 0 12 12"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-              >
-                <path d="M6 2.5v7M2.5 6h7" />
-              </svg>
-            </button>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
+"use client"
+
+import { StoreImage as Image } from "../../lib/media-image"
+import Link from "next/link"
+
+import { convertToLocale } from "../../lib/money"
+import { useCartDrawer } from "../context"
+
+/**
+ * CartItemUpsell — slot rendered INSIDE a cart item for per-product
+ * complementary recommendations. Accepts a list of products and an
+ * onAdd handler.
+ *
+ * Ported from `@1click/ui/src/cart-drawer/item/upsell.tsx` (v2.3.1).
+ * Cartbase data seam: source stores fed this from Medusa product fetches —
+ * feed it from `@cartbase/storefront/api/search` `listRelatedProducts`
+ * (per-anchor complements: manual admin picks + deterministic fallback)
+ * mapped via `toCrossSellProduct` (`../cross-sell-sidebar`). `variantId`
+ * was added to `UpsellProduct` and to the `onAdd` signature so the handler
+ * can call the provider's `addItem(variantId)` directly — Cartbase carts add
+ * by variant id, not product id. Prices are EUR major units.
+ */
+
+export type UpsellProduct = {
+  id: string
+  title: string
+  handle: string
+  thumbnail: string | null
+  price: number
+  currencyCode: string
+  /** Variant to add (Cartbase add-to-cart is by variant id). */
+  variantId?: string
+}
+
+type CartItemUpsellProps = {
+  label?: string
+  products: UpsellProduct[]
+  onAdd?: (productId: string, variantId?: string) => void
+}
+
+export function CartItemUpsell({
+  label,
+  products,
+  onAdd,
+}: CartItemUpsellProps) {
+  const { labels, hrefs } = useCartDrawer()
+  if (!products.length) return null
+
+  return (
+    <div className="mt-3 pt-3 border-t border-border">
+      <p className="text-xs font-medium text-muted-foreground mb-2">
+        {label ?? labels.pairsWellWith}
+      </p>
+      <div className="space-y-2">
+        {products.map((product) => (
+          <div
+            key={product.id}
+            className="flex items-center gap-3 p-2 rounded-lg bg-muted hover:bg-muted/70 transition-colors"
+          >
+            <div className="w-10 h-10 rounded-lg overflow-hidden bg-card flex-shrink-0 relative">
+              {product.thumbnail ? (
+                <Image
+                  src={product.thumbnail}
+                  alt={product.title}
+                  fill
+                  className="object-cover"
+                  sizes="40px"
+                />
+              ) : (
+                <div className="w-full h-full bg-muted" />
+              )}
+            </div>
+            <div className="flex-1 min-w-0">
+              <Link
+                href={`${hrefs.productPrefix}/${product.handle}`}
+                className="text-xs font-medium text-foreground truncate block"
+              >
+                {product.title}
+              </Link>
+              <span className="text-xs text-muted-foreground">
+                {convertToLocale({
+                  amount: product.price,
+                  currency_code: product.currencyCode,
+                })}
+              </span>
+            </div>
+            <button
+              type="button"
+              onClick={() => onAdd?.(product.id, product.variantId)}
+              className="w-7 h-7 flex items-center justify-center rounded-full border border-border text-muted-foreground hover:border-text-base hover:text-foreground transition-colors flex-shrink-0"
+              aria-label={`${labels.addToCart} ${product.title}`}
+            >
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 12 12"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+              >
+                <path d="M6 2.5v7M2.5 6h7" />
+              </svg>
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}