@cartbase/storefront 0.17.0 → 0.18.0

package/src/products/product-actions-wrapper.tsx

@@ -1,62 +1,63 @@
-/**
- * Fresh-price fetch wrapper for ProductActions — ported from
- * `@1click/ui/src/products/product-actions-wrapper.tsx` (v2.3.1). Data
- * seam: the Medusa `listProducts({id})` + region-priced fetch becomes
- * `api/products` `retrieveProduct(idOrHandle, pricingContext)` — the PDP
- * shell renders with the (possibly cached) product while this wrapper
- * re-fetches `calculated_price` with the live pricing context (and the
- * customer's Bearer JWT via the client, for group-aware B2B prices).
- *
- * Async server component — render inside `<Suspense>` with a disabled
- * `<ProductActions>` fallback (see ProductTemplate).
- */
-import type { StorefrontClient } from "../api/http"
-import type { PricingContextQuery } from "../api/types"
-import type { StoreProduct, StoreProductVariant } from "../api/products"
-import { retrieveProduct } from "../api/products"
-import { StoreApiError } from "../api/types"
-import { ProductActions, type AddToCartInput } from "./product-actions"
-
-type ProductActionsWrapperProps = {
-  client: StorefrontClient
-  /** Product id (`prod_…`) or handle. */
-  id: string
-  /** Pricing context so `calculated_price` is present for the price panel. */
-  pricingContext?: PricingContextQuery
-  /** The variant the address names; see the product page contract. */
-  initialVariantId?: string | null
-  addToCart: (input: AddToCartInput) => Promise<void>
-  onAddToCart?: (product: StoreProduct, variant: StoreProductVariant) => void
-  openCart?: () => void
-}
-
-export async function ProductActionsWrapper({
-  client,
-  id,
-  pricingContext,
-  initialVariantId,
-  addToCart,
-  onAddToCart,
-  openCart,
-}: ProductActionsWrapperProps) {
-  let product: StoreProduct
-  try {
-    const res = await retrieveProduct(client, id, pricingContext)
-    product = res.product
-  } catch (e) {
-    if (e instanceof StoreApiError && e.status === 404) return null
-    throw e
-  }
-
-  return (
-    <ProductActions
-      product={product}
-      initialVariantId={initialVariantId}
-      addToCart={addToCart}
-      onAddToCart={onAddToCart}
-      openCart={openCart}
-    />
-  )
-}
-
-export { type ProductActionsWrapperProps }
+/**
+ * Fresh-price fetch wrapper for ProductActions — ported from
+ * `@1click/ui/src/products/product-actions-wrapper.tsx` (v2.3.1). Data
+ * seam: the Medusa `listProducts({id})` + region-priced fetch becomes
+ * `api/products` `retrieveProduct(idOrHandle, pricingContext)` — the PDP
+ * shell renders with the (possibly cached) product while this wrapper
+ * re-fetches `calculated_price` with the live pricing context (and the
+ * customer's Bearer JWT via the client, for group-aware B2B prices).
+ *
+ * Async server component — render inside `<Suspense>` with a disabled
+ * `<ProductActions>` fallback (see ProductTemplate).
+ */
+import type { StorefrontClient } from "../api/http"
+import type { PricingContextQuery } from "../api/types"
+import type { StoreProduct, StoreProductVariant } from "../api/products"
+import { retrieveProduct } from "../api/products"
+import { StoreApiError } from "../api/types"
+import { ProductActions, type AddToCartInput } from "./product-actions"
+
+type ProductActionsWrapperProps = {
+  client: StorefrontClient
+  /** Product id (`prod_…`) or handle. */
+  id: string
+  /** Pricing context so `calculated_price` is present for the price panel. */
+  pricingContext?: PricingContextQuery
+  /** The variant the address names; see the product page contract. */
+  initialVariantId?: string | null
+  /** A server action; leave it out for the instant add through the mounted cart drawer. */
+  addToCart?: (input: AddToCartInput) => Promise<void>
+  onAddToCart?: (product: StoreProduct, variant: StoreProductVariant) => void
+  openCart?: () => void
+}
+
+export async function ProductActionsWrapper({
+  client,
+  id,
+  pricingContext,
+  initialVariantId,
+  addToCart,
+  onAddToCart,
+  openCart,
+}: ProductActionsWrapperProps) {
+  let product: StoreProduct
+  try {
+    const res = await retrieveProduct(client, id, pricingContext)
+    product = res.product
+  } catch (e) {
+    if (e instanceof StoreApiError && e.status === 404) return null
+    throw e
+  }
+
+  return (
+    <ProductActions
+      product={product}
+      initialVariantId={initialVariantId}
+      addToCart={addToCart}
+      onAddToCart={onAddToCart}
+      openCart={openCart}
+    />
+  )
+}
+
+export { type ProductActionsWrapperProps }

package/src/products/product-actions.tsx

@@ -1,150 +1,151 @@
-"use client"
-
-/**
- * The package's default buy panel: options, price, quantity, the button,
- * and the sticky bar on phones. Every rule of the product page contract
- * lives in `useProductActions`; this file is only the markup, and a store
- * that wants its own look draws its own panel on the same hook and
- * inherits the same behaviour (evoo's `features/product/buy-box.tsx` is
- * the reference).
- *
- * Until 2026-09-15 this panel carried the behaviour itself, and carried it
- * wrong: it wrote the variant into the address through the router as
- * `v_id=<whole key>`, so every click was a server render and the address
- * lagged; it chose nothing on a product with several variants until the
- * shopper clicked; and it added one unit, always. The hook fixed all three
- * for every consumer at once.
- */
-import { useRef } from "react"
-import { Minus, Plus } from "lucide-react"
-
-import type { StoreProduct, StoreProductVariant } from "../api/products"
-import { useIntersection } from "../lib/hooks/use-intersection"
-import { Button } from "../primitives/ui/button"
-import { useProductLabels } from "./context"
-import { OptionSelect } from "./option-select"
-import { ProductPrice } from "./product-price"
-import { MobileActions } from "./mobile-actions"
-import { useProductActions, type AddToCartInput } from "./use-product-actions"
-
-export type { AddToCartInput }
-
-type ProductActionsProps = {
-  product: StoreProduct
-  /**
-   * The cart seam: called with the selected variant and quantity. Wire to
-   * the host's cart orchestration (`api/carts` `addLineItem` behind the
-   * host's cart-id storage). May throw `StoreApiError`;
-   * `insufficient_inventory` is handled here (button flips to out of stock).
-   */
-  addToCart: (input: AddToCartInput) => Promise<void>
-  /**
-   * The variant the address names (`searchParams.variant`), passed from the
-   * page so the first paint is the right variant. See the product page
-   * contract in `use-product-actions.ts`.
-   */
-  initialVariantId?: string | null
-  disabled?: boolean
-  /** Fired after a successful add (analytics: trackAddToCart trio). */
-  onAddToCart?: (product: StoreProduct, variant: StoreProductVariant) => void
-  /** Open the host's cart drawer after a successful add. */
-  openCart?: () => void
-  /** The quantity stepper; on by default. */
-  showQuantity?: boolean
-}
-
-export function ProductActions({
-  product,
-  addToCart,
-  initialVariantId,
-  disabled,
-  onAddToCart,
-  openCart,
-  showQuantity = true,
-}: ProductActionsProps) {
-  const labels = useProductLabels()
-  const state = useProductActions({ product, addToCart, initialVariantId, onAddToCart, openCart })
-  const { variant, chosen, choose, quantity, setQuantity, inStock, isAdding, isValidVariant, add } = state
-
-  const actionsRef = useRef<HTMLDivElement>(null)
-  const inView = useIntersection(actionsRef, "0px")
-  const busy = !!disabled || isAdding
-
-  return (
-    <div className="flex flex-col gap-y-2" ref={actionsRef}>
-      {(product.variants?.length ?? 0) > 1 && (
-        <div className="flex flex-col gap-y-4">
-          {(product.options || []).map((option) => (
-            <div key={option.id}>
-              <OptionSelect
-                option={option}
-                current={chosen[option.id]}
-                updateOption={choose}
-                title={option.title ?? ""}
-                data-testid="product-options"
-                disabled={busy}
-              />
-            </div>
-          ))}
-          <div className="h-px bg-border" />
-        </div>
-      )}
-
-      <ProductPrice product={product} variant={variant} />
-
-      {showQuantity && (
-        <div className="flex flex-col gap-y-2">
-          <span className="text-sm text-foreground">{labels.quantity}</span>
-          <div className="inline-flex w-fit items-stretch rounded-lg border border-border bg-card">
-            <button
-              type="button"
-              onClick={() => setQuantity(quantity - 1)}
-              aria-label={labels.decreaseQuantity}
-              disabled={quantity <= 1 || busy}
-              className="px-3 text-foreground transition-colors hover:bg-muted disabled:opacity-40"
-              data-testid="quantity-decrease"
-            >
-              <Minus className="size-4" aria-hidden />
-            </button>
-            <output className="min-w-10 py-2 text-center text-sm text-foreground" aria-live="polite" data-testid="quantity">
-              {quantity}
-            </output>
-            <button
-              type="button"
-              onClick={() => setQuantity(quantity + 1)}
-              aria-label={labels.increaseQuantity}
-              disabled={busy}
-              className="px-3 text-foreground transition-colors hover:bg-muted disabled:opacity-40"
-              data-testid="quantity-increase"
-            >
-              <Plus className="size-4" aria-hidden />
-            </button>
-          </div>
-        </div>
-      )}
-
-      <Button
-        onClick={add}
-        disabled={!inStock || !variant || busy || !isValidVariant}
-        className="w-full h-10"
-        data-testid="add-product-button"
-      >
-        {!variant ? labels.selectVariant : !inStock ? labels.outOfStock : labels.addToCart}
-      </Button>
-
-      <MobileActions
-        product={product}
-        variant={variant}
-        options={chosen}
-        updateOptions={choose}
-        inStock={inStock}
-        handleAddToCart={add}
-        isAdding={isAdding}
-        show={!inView}
-        optionsDisabled={busy}
-      />
-    </div>
-  )
-}
-
-export { type ProductActionsProps }
+"use client"
+
+/**
+ * The package's default buy panel: options, price, quantity, the button,
+ * and the sticky bar on phones. Every rule of the product page contract
+ * lives in `useProductActions`; this file is only the markup, and a store
+ * that wants its own look draws its own panel on the same hook and
+ * inherits the same behaviour (evoo's `features/product/buy-box.tsx` is
+ * the reference).
+ *
+ * Until 2026-09-15 this panel carried the behaviour itself, and carried it
+ * wrong: it wrote the variant into the address through the router as
+ * `v_id=<whole key>`, so every click was a server render and the address
+ * lagged; it chose nothing on a product with several variants until the
+ * shopper clicked; and it added one unit, always. The hook fixed all three
+ * for every consumer at once.
+ */
+import { useRef } from "react"
+import { Minus, Plus } from "lucide-react"
+
+import type { StoreProduct, StoreProductVariant } from "../api/products"
+import { useIntersection } from "../lib/hooks/use-intersection"
+import { Button } from "../primitives/ui/button"
+import { useProductLabels } from "./context"
+import { OptionSelect } from "./option-select"
+import { ProductPrice } from "./product-price"
+import { MobileActions } from "./mobile-actions"
+import { useProductActions, type AddToCartInput } from "./use-product-actions"
+
+export type { AddToCartInput }
+
+type ProductActionsProps = {
+  product: StoreProduct
+  /**
+   * The host's own cart seam (a server action), called with the selected
+   * variant and quantity. Leave it out for the instant add through the
+   * mounted `CartDrawerProvider`: the drawer opens at the click with the
+   * product in it. May throw `StoreApiError`; `insufficient_inventory` is
+   * handled here (button flips to out of stock).
+   */
+  addToCart?: (input: AddToCartInput) => Promise<void>
+  /**
+   * The variant the address names (`searchParams.variant`), passed from the
+   * page so the first paint is the right variant. See the product page
+   * contract in `use-product-actions.ts`.
+   */
+  initialVariantId?: string | null
+  disabled?: boolean
+  /** Fired after a successful add (analytics: trackAddToCart trio). */
+  onAddToCart?: (product: StoreProduct, variant: StoreProductVariant) => void
+  /** Open the host's cart: at the click on the instant path, after the seam on the server-action path. */
+  openCart?: () => void
+  /** The quantity stepper; on by default. */
+  showQuantity?: boolean
+}
+
+export function ProductActions({
+  product,
+  addToCart,
+  initialVariantId,
+  disabled,
+  onAddToCart,
+  openCart,
+  showQuantity = true,
+}: ProductActionsProps) {
+  const labels = useProductLabels()
+  const state = useProductActions({ product, addToCart, initialVariantId, onAddToCart, openCart })
+  const { variant, chosen, choose, quantity, setQuantity, inStock, isAdding, isValidVariant, add } = state
+
+  const actionsRef = useRef<HTMLDivElement>(null)
+  const inView = useIntersection(actionsRef, "0px")
+  const busy = !!disabled || isAdding
+
+  return (
+    <div className="flex flex-col gap-y-2" ref={actionsRef}>
+      {(product.variants?.length ?? 0) > 1 && (
+        <div className="flex flex-col gap-y-4">
+          {(product.options || []).map((option) => (
+            <div key={option.id}>
+              <OptionSelect
+                option={option}
+                current={chosen[option.id]}
+                updateOption={choose}
+                title={option.title ?? ""}
+                data-testid="product-options"
+                disabled={busy}
+              />
+            </div>
+          ))}
+          <div className="h-px bg-border" />
+        </div>
+      )}
+
+      <ProductPrice product={product} variant={variant} />
+
+      {showQuantity && (
+        <div className="flex flex-col gap-y-2">
+          <span className="text-sm text-foreground">{labels.quantity}</span>
+          <div className="inline-flex w-fit items-stretch rounded-lg border border-border bg-card">
+            <button
+              type="button"
+              onClick={() => setQuantity(quantity - 1)}
+              aria-label={labels.decreaseQuantity}
+              disabled={quantity <= 1 || busy}
+              className="px-3 text-foreground transition-colors hover:bg-muted disabled:opacity-40"
+              data-testid="quantity-decrease"
+            >
+              <Minus className="size-4" aria-hidden />
+            </button>
+            <output className="min-w-10 py-2 text-center text-sm text-foreground" aria-live="polite" data-testid="quantity">
+              {quantity}
+            </output>
+            <button
+              type="button"
+              onClick={() => setQuantity(quantity + 1)}
+              aria-label={labels.increaseQuantity}
+              disabled={busy}
+              className="px-3 text-foreground transition-colors hover:bg-muted disabled:opacity-40"
+              data-testid="quantity-increase"
+            >
+              <Plus className="size-4" aria-hidden />
+            </button>
+          </div>
+        </div>
+      )}
+
+      <Button
+        onClick={add}
+        disabled={!inStock || !variant || busy || !isValidVariant}
+        className="w-full h-10"
+        data-testid="add-product-button"
+      >
+        {!variant ? labels.selectVariant : !inStock ? labels.outOfStock : labels.addToCart}
+      </Button>
+
+      <MobileActions
+        product={product}
+        variant={variant}
+        options={chosen}
+        updateOptions={choose}
+        inStock={inStock}
+        handleAddToCart={add}
+        isAdding={isAdding}
+        show={!inView}
+        optionsDisabled={busy}
+      />
+    </div>
+  )
+}
+
+export { type ProductActionsProps }

package/src/products/product-price.tsx

@@ -1,69 +1,69 @@
-"use client"
-
-/**
- * PDP price display — ported from
- * `@1click/ui/src/products/product-price.tsx` (v2.3.1). Data seam:
- * `@medusajs/types` `HttpTypes.StoreProduct/StoreProductVariant` are
- * replaced by the Cartbase SDK DTOs (`@cartbase/storefront/api/products`).
- * Pricing stays SERVER truth — `lib/get-product-price` only selects and
- * formats `variant.calculated_price` (Cartbase's flat `price_list_type`).
- */
-import type { StoreProduct, StoreProductVariant } from "../api/products"
-import { cn } from "../lib/utils"
-import { getProductPrice } from "../lib/get-product-price"
-import { useProductLabels } from "./context"
-
-export function ProductPrice({
-  product,
-  variant,
-}: {
-  product: StoreProduct
-  variant?: StoreProductVariant
-}) {
-  const labels = useProductLabels()
-  const { cheapestPrice, variantPrice } = getProductPrice({
-    product,
-    variantId: variant?.id,
-  })
-
-  const selectedPrice = variant ? variantPrice : cheapestPrice
-
-  if (!selectedPrice) {
-    return <div className="block w-32 h-9 bg-muted animate-pulse rounded" />
-  }
-
-  return (
-    <div className="flex flex-col text-foreground">
-      <span
-        className={cn("text-xl font-semibold", {
-          "text-primary": selectedPrice.price_type === "sale",
-        })}
-      >
-        {!variant && `${labels.from} `}
-        <span
-          data-testid="product-price"
-          data-value={selectedPrice.calculated_price_number}
-        >
-          {selectedPrice.calculated_price}
-        </span>
-      </span>
-      {selectedPrice.price_type === "sale" && (
-        <>
-          <p>
-            <span className="text-muted-foreground">{labels.original} </span>
-            <span
-              className="line-through"
-              data-testid="original-product-price"
-              data-value={selectedPrice.original_price_number}
-            >
-              {selectedPrice.original_price}
-            </span>
-          </p>
-          <span className="text-primary">
-            -{selectedPrice.percentage_diff}%
-          </span>
-        </>
-      )}
-    </div>
-  )
-}
+"use client"
+
+/**
+ * PDP price display — ported from
+ * `@1click/ui/src/products/product-price.tsx` (v2.3.1). Data seam:
+ * `@medusajs/types` `HttpTypes.StoreProduct/StoreProductVariant` are
+ * replaced by the Cartbase SDK DTOs (`@cartbase/storefront/api/products`).
+ * Pricing stays SERVER truth — `lib/get-product-price` only selects and
+ * formats `variant.calculated_price` (Cartbase's flat `price_list_type`).
+ */
+import type { StoreProduct, StoreProductVariant } from "../api/products"
+import { cn } from "../lib/utils"
+import { getProductPrice } from "../lib/get-product-price"
+import { useProductLabels } from "./context"
+
+export function ProductPrice({
+  product,
+  variant,
+}: {
+  product: StoreProduct
+  variant?: StoreProductVariant
+}) {
+  const labels = useProductLabels()
+  const { cheapestPrice, variantPrice } = getProductPrice({
+    product,
+    variantId: variant?.id,
+  })
+
+  const selectedPrice = variant ? variantPrice : cheapestPrice
+
+  if (!selectedPrice) {
+    return <div className="block w-32 h-9 bg-muted animate-pulse rounded" />
+  }
+
+  return (
+    <div className="flex flex-col text-foreground">
+      <span
+        className={cn("text-xl font-semibold", {
+          "text-primary": selectedPrice.price_type === "sale",
+        })}
+      >
+        {!variant && `${labels.from} `}
+        <span
+          data-testid="product-price"
+          data-value={selectedPrice.calculated_price_number}
+        >
+          {selectedPrice.calculated_price}
+        </span>
+      </span>
+      {selectedPrice.price_type === "sale" && (
+        <>
+          <p>
+            <span className="text-muted-foreground">{labels.original} </span>
+            <span
+              className="line-through"
+              data-testid="original-product-price"
+              data-value={selectedPrice.original_price_number}
+            >
+              {selectedPrice.original_price}
+            </span>
+          </p>
+          <span className="text-primary">
+            -{selectedPrice.percentage_diff}%
+          </span>
+        </>
+      )}
+    </div>
+  )
+}