@cartbase/storefront 0.20.1 → 0.22.0

package/src/checkout/line-item-card.tsx

@@ -1,76 +1,44 @@
 "use client"
 
-import { useState } from "react"
-
 import type { StorefrontClient } from "../api/http"
-import { updateLineItem, type Cart, type CartLineItem } from "../api/carts"
+import type { Cart, CartLineItem } from "../api/carts"
 import { Price } from "../lib/price"
-import { cn } from "../lib/utils"
 import { variantCaption } from "../lib/variant-caption"
 import { useCheckoutLabels } from "./context"
 
 /**
  * LineItemCard — a single cart line shown inside the checkout order
- * summary card. Includes thumbnail, title, variant, quantity select,
- * and price.
+ * summary card: thumbnail, title, variant, how many, price.
  *
- * Ported from `@1click/ui/src/checkout/line-item-card.tsx` (v2.3.1) with
- * the Cartbase data seam: the cookie-bound `updateLineItem` server action →
- * `carts.updateLineItem(client, cartId, lineId, {quantity})`
- * (POST /api/store/carts/:id/line-items/:lineId — docs/storefront/
- * carts.md). The route returns the freshly decorated cart; pass
- * `onCartChange` so the host can update its cart state (or
- * `router.refresh()` in an RSC app). `variant.title` → the flat
- * `variant_title` column of the Cartbase line DTO.
+ * **A CHECKOUT IS A CHECKOUT** (Alexander, 2026-09-18). This card carried a
+ * quantity select, ported from the platform this kit came from, and it is
+ * gone with the summary row's stepper: the cart is changed in the cart, and
+ * the checkout states the order. Nothing in the checkout family writes a
+ * line any more.
  *
- * Checkout is master-level: customers cannot remove items here.
- * Removal lives in the cart drawer only.
+ * Ported from `@1click/ui/src/checkout/line-item-card.tsx` (v2.3.1);
+ * `variant.title` → the flat `variant_title` column of the Cartbase line
+ * DTO.
  */
 
 type LineItemCardProps = {
-  /** The SDK transport — quantity changes go through it. */
-  client: StorefrontClient
-  cartId: string
   item: CartLineItem
   currencyCode: string
-  /** Receives the decorated cart returned by the quantity update. */
+  /** @deprecated Unused: the checkout summary no longer writes. Accepted so
+   * a store passing the old props keeps compiling; remove them at leisure. */
+  client?: StorefrontClient
+  /** @deprecated Unused — see `client`. */
+  cartId?: string
+  /** @deprecated Unused — see `client`. */
   onCartChange?: (cart: Cart) => void
 }
 
-export function LineItemCard({
-  client,
-  cartId,
-  item,
-  currencyCode,
-  onCartChange,
-}: LineItemCardProps) {
+export function LineItemCard({ item, currencyCode }: LineItemCardProps) {
   const labels = useCheckoutLabels()
-  const [updating, setUpdating] = useState(false)
-
-  const handleQty = async (qty: number) => {
-    setUpdating(true)
-    try {
-      const { cart } = await updateLineItem(client, cartId, item.id, {
-        quantity: qty,
-      })
-      onCartChange?.(cart)
-    } catch {
-      // Quantity update failed (e.g. insufficient_inventory) — the select
-      // snaps back to the server value on the next cart render.
-    } finally {
-      setUpdating(false)
-    }
-  }
-
   const total = item.total ?? 0
 
   return (
-    <div
-      className={cn(
-        "relative flex gap-4 p-4 rounded-xl border border-border bg-muted/50 transition-opacity",
-        updating && "opacity-40 pointer-events-none"
-      )}
-    >
+    <div className="relative flex gap-4 p-4 rounded-xl border border-border bg-muted/50">
       <div className="relative w-20 h-20 rounded-lg overflow-hidden flex-shrink-0 bg-card border border-border">
         {item.thumbnail ? (
           // eslint-disable-next-line @next/next/no-img-element
@@ -113,42 +81,26 @@ export function LineItemCard({
           </p>
         )}
 
-        <div className="flex items-center gap-2 mt-2.5">
-          <div className="relative">
-            <select
-              value={item.quantity}
-              onChange={(e) => handleQty(parseInt(e.target.value, 10))}
-              className="h-8 pl-2.5 pr-7 text-xs font-medium border border-border rounded-lg bg-card text-foreground appearance-none cursor-pointer hover:border-muted-foreground transition-colors focus:outline-none focus:ring-1 focus:ring-primary/20"
-            >
-              {Array.from({ length: 10 }, (_, i) => (
-                <option key={i + 1} value={i + 1}>
-                  {labels.qty} {i + 1}
-                </option>
-              ))}
-            </select>
-            <svg
-              className="absolute right-2 top-1/2 -translate-y-1/2 w-3 h-3 text-muted-foreground pointer-events-none"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              strokeWidth={2}
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M19.5 8.25l-7.5 7.5-7.5-7.5"
-              />
-            </svg>
-          </div>
-        </div>
+        {/* How many, said and not offered: the quantity select that stood
+            here could change the order from inside the checkout. */}
+        <p className="text-xs font-medium text-muted-foreground mt-2.5 tabular-nums">
+          {labels.qty} {item.quantity}
+        </p>
       </div>
 
       <div className="flex flex-col items-end justify-center flex-shrink-0">
-        <Price
-          amount={total}
-          currencyCode={currencyCode}
-          className="text-sm font-bold text-foreground"
-        />
+        {/* A line that costs nothing says so; €0.00 reads as a fault. */}
+        {total <= 0 ? (
+          <span className="text-xs font-bold text-success uppercase">
+            {labels.lineFree}
+          </span>
+        ) : (
+          <Price
+            amount={total}
+            currencyCode={currencyCode}
+            className="text-sm font-bold text-foreground"
+          />
+        )}
       </div>
     </div>
   )

package/src/checkout/mobile-checkout-bottom-bar.tsx

@@ -0,0 +1,132 @@
+"use client"
+
+import { useState } from "react"
+
+import type { StorefrontClient } from "../api/http"
+import type { Cart } from "../api/carts"
+import { Price } from "../lib/price"
+import { cn } from "../lib/utils"
+import { useCheckoutLabels } from "./context"
+import { MobileOrderSummaryBody } from "./mobile-order-summary-body"
+import { checkoutTotals } from "./summary-math"
+
+/**
+ * MobileCheckoutBottomBar — the card that sits directly above Place order
+ * on a phone: the first item's picture with the number of units on it, the
+ * word Total over the count, the figure, and a chevron onto the same body
+ * the top bar opens. It is the last thing a shopper reads before paying,
+ * so what they are paying for is one tap away at the moment it matters.
+ *
+ * It opens upwards, the body above its own row, so the row and the Buy
+ * button under it stay where the thumb already is. Hidden from the small
+ * breakpoint up, where the summary column is always open.
+ */
+
+type MobileCheckoutBottomBarProps = {
+  /** The SDK transport, for the doors inside the opened body. */
+  client: StorefrontClient
+  cart: Cart
+  optimisticShippingCost: number | null
+  optimisticMethodFee?: number | null
+  methodFeeLabel?: string
+  showGiftCards?: boolean
+  /** Hide the promo door inside the body; see MobileOrderSummaryBody. */
+  hideDiscount?: boolean
+  onCartChange?: (cart: Cart) => void
+}
+
+export function MobileCheckoutBottomBar({
+  client,
+  cart,
+  optimisticShippingCost,
+  optimisticMethodFee,
+  methodFeeLabel,
+  showGiftCards,
+  hideDiscount,
+  onCartChange,
+}: MobileCheckoutBottomBarProps) {
+  const labels = useCheckoutLabels()
+  const [open, setOpen] = useState(false)
+  const { displayTotal, itemCount, productItems } = checkoutTotals({
+    cart,
+    optimisticShippingCost,
+    optimisticMethodFee,
+  })
+
+  const firstItem = productItems[0]
+  if (!firstItem) return null
+
+  return (
+    <div className="sm:hidden rounded-[2px] border border-border bg-card overflow-hidden">
+      {open && (
+        <div className="px-5 pt-5 pb-2">
+          <MobileOrderSummaryBody
+            client={client}
+            cart={cart}
+            optimisticShippingCost={optimisticShippingCost}
+            optimisticMethodFee={optimisticMethodFee}
+            methodFeeLabel={methodFeeLabel}
+            showGiftCards={showGiftCards}
+            hideDiscount={hideDiscount}
+            onCartChange={onCartChange}
+          />
+        </div>
+      )}
+
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className={cn(
+          "w-full flex items-center gap-3 px-4 py-3 text-left",
+          open && "border-t border-border"
+        )}
+        aria-expanded={open}
+      >
+        <div className="relative flex-shrink-0">
+          <div className="w-12 h-12 rounded-lg overflow-hidden bg-muted border border-border">
+            {firstItem.thumbnail ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                src={firstItem.thumbnail}
+                alt={firstItem.product_title ?? ""}
+                className="w-full h-full object-cover"
+              />
+            ) : null}
+          </div>
+          {itemCount > 1 && (
+            <span className="absolute -top-1.5 -right-1.5 min-w-[20px] h-[20px] px-1 text-[10px] font-bold rounded-full bg-foreground text-card flex items-center justify-center shadow-sm ring-2 ring-card">
+              {itemCount}
+            </span>
+          )}
+        </div>
+
+        <div className="flex-1 min-w-0">
+          <p className="text-base font-bold text-foreground leading-tight">{labels.total}</p>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            {itemCount} {labels.items}
+          </p>
+        </div>
+
+        <div className="flex items-center gap-1.5">
+          <Price
+            amount={displayTotal}
+            currencyCode={cart.currency_code}
+            className="text-base font-bold text-foreground tracking-tight"
+          />
+          <svg
+            className={cn(
+              "w-4 h-4 text-muted-foreground transition-transform duration-200",
+              open && "rotate-180"
+            )}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2.25}
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+          </svg>
+        </div>
+      </button>
+    </div>
+  )
+}

package/src/checkout/mobile-checkout-top-bar.tsx

@@ -0,0 +1,94 @@
+"use client"
+
+import { useState } from "react"
+
+import type { StorefrontClient } from "../api/http"
+import type { Cart } from "../api/carts"
+import { Price } from "../lib/price"
+import { cn } from "../lib/utils"
+import { useCheckoutLabels } from "./context"
+import { MobileOrderSummaryBody } from "./mobile-order-summary-body"
+import { checkoutTotals } from "./summary-math"
+
+/**
+ * MobileCheckoutTopBar — the strip a phone shopper meets first, above the
+ * contact form: the words "Order summary", a chevron, and the total. It
+ * opens onto the items and the breakdown.
+ *
+ * Closed by default, because the first thing a shopper checks is the
+ * figure, and only then, if they want, what makes it up. The desktop
+ * column is always open, so this bar is hidden from the small breakpoint
+ * up: the two never show at once.
+ */
+
+type MobileCheckoutTopBarProps = {
+  /** The SDK transport, for the doors inside the opened body. */
+  client: StorefrontClient
+  cart: Cart
+  optimisticShippingCost: number | null
+  optimisticMethodFee?: number | null
+  methodFeeLabel?: string
+  showGiftCards?: boolean
+  onCartChange?: (cart: Cart) => void
+}
+
+export function MobileCheckoutTopBar({
+  client,
+  cart,
+  optimisticShippingCost,
+  optimisticMethodFee,
+  methodFeeLabel,
+  showGiftCards,
+  onCartChange,
+}: MobileCheckoutTopBarProps) {
+  const labels = useCheckoutLabels()
+  const [open, setOpen] = useState(false)
+  const { displayTotal } = checkoutTotals({
+    cart,
+    optimisticShippingCost,
+    optimisticMethodFee,
+  })
+
+  return (
+    <div className="sm:hidden bg-muted border-y border-border">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="w-full flex items-center justify-between px-5 py-3.5 text-left"
+        aria-expanded={open}
+      >
+        <span className="inline-flex items-center gap-1.5 text-sm font-medium text-primary">
+          {labels.orderSummary}
+          <svg
+            className={cn("w-4 h-4 transition-transform duration-200", open && "rotate-180")}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2.25}
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+          </svg>
+        </span>
+        <Price
+          amount={displayTotal}
+          currencyCode={cart.currency_code}
+          className="text-base font-bold text-foreground tracking-tight"
+        />
+      </button>
+
+      {open && (
+        <div className="px-5 pb-5">
+          <MobileOrderSummaryBody
+            client={client}
+            cart={cart}
+            optimisticShippingCost={optimisticShippingCost}
+            optimisticMethodFee={optimisticMethodFee}
+            methodFeeLabel={methodFeeLabel}
+            showGiftCards={showGiftCards}
+            onCartChange={onCartChange}
+          />
+        </div>
+      )}
+    </div>
+  )
+}

package/src/checkout/mobile-order-summary-body.tsx

@@ -0,0 +1,172 @@
+"use client"
+
+import type { StorefrontClient } from "../api/http"
+import type { Cart } from "../api/carts"
+import { Price } from "../lib/price"
+import { useCheckoutLabels } from "./context"
+import { DiscountSection } from "./discount-section"
+import { GiftCardSection } from "./gift-card-section"
+import { CheckoutLineItem } from "./order-summary"
+import { checkoutTotals, isCompanyOrder } from "./summary-math"
+
+/**
+ * MobileOrderSummaryBody — what the two mobile summary bars reveal when a
+ * shopper opens them: the items with their counts, the discount and
+ * gift-card doors, and the same breakdown the desktop column prints.
+ *
+ * It carries no card of its own: the top bar is a utility strip and the
+ * bottom bar is a product card, so each parent decides its own ground. The
+ * grand total is not repeated here either, because the bar's own row shows
+ * it whether the body is open or closed.
+ *
+ * The numbers come from `checkoutTotals`, the same function the desktop
+ * summary calls, so the three surfaces cannot drift apart.
+ */
+
+type MobileOrderSummaryBodyProps = {
+  /** The SDK transport — the promo and gift-card doors run through it. */
+  client: StorefrontClient
+  cart: Cart
+  optimisticShippingCost: number | null
+  optimisticMethodFee?: number | null
+  /** Override for the fee row's name; the cart's own label otherwise. */
+  methodFeeLabel?: string
+  /** Show the gift-card door. Default true, as on the desktop summary. */
+  showGiftCards?: boolean
+  /**
+   * Hide the promo door inside this body. A layout that surfaces an
+   * always-open discount field of its own (the checkout does this on the
+   * phone, right above the bottom bar) passes true so the shopper is not
+   * offered the same thing twice.
+   */
+  hideDiscount?: boolean
+  onCartChange?: (cart: Cart) => void
+}
+
+export function MobileOrderSummaryBody({
+  client,
+  cart,
+  optimisticShippingCost,
+  optimisticMethodFee,
+  methodFeeLabel,
+  showGiftCards = true,
+  hideDiscount = false,
+  onCartChange,
+}: MobileOrderSummaryBodyProps) {
+  const labels = useCheckoutLabels()
+  const t = checkoutTotals({ cart, optimisticShippingCost, optimisticMethodFee })
+
+  return (
+    <div className="space-y-4 pt-4">
+      <div className="divide-y divide-border">
+        {t.productItems.map((item) => (
+          <div key={item.id} className="py-5 first:pt-0">
+            <CheckoutLineItem
+              item={item}
+              currencyCode={cart.currency_code}
+            />
+          </div>
+        ))}
+      </div>
+
+      {(!hideDiscount || showGiftCards) && (
+        <div className="space-y-3">
+          {!hideDiscount && (
+            <DiscountSection client={client} cart={cart} onCartChange={onCartChange} />
+          )}
+          {showGiftCards && (
+            <GiftCardSection client={client} cart={cart} onCartChange={onCartChange} />
+          )}
+        </div>
+      )}
+
+      <div className="space-y-2 pt-2">
+        <div className="flex justify-between text-sm">
+          <span className="text-muted-foreground">
+            {labels.subtotal} · {t.itemCount} {labels.items}
+          </span>
+          <Price
+            amount={t.productSubtotal}
+            currencyCode={cart.currency_code}
+            className="font-medium text-foreground"
+          />
+        </div>
+
+        <div className="flex justify-between text-sm">
+          <span className="text-muted-foreground">{labels.shipping}</span>
+          {t.shippingKnown ? (
+            t.shippingCost === 0 ? (
+              <span className="font-medium text-success">{labels.shippingFree}</span>
+            ) : (
+              <Price
+                amount={t.shippingCost ?? 0}
+                currencyCode={cart.currency_code}
+                className="font-medium text-foreground"
+              />
+            )
+          ) : (
+            <span className="font-medium text-foreground">{labels.shippingCalc}</span>
+          )}
+        </div>
+
+        {t.methodFeeAmount > 0 && (
+          <div className="flex justify-between text-sm">
+            <span className="text-muted-foreground">
+              {methodFeeLabel ?? cart.payment_method_fee_label ?? labels.paymentMethodFee}
+            </span>
+            <Price
+              amount={t.methodFeeAmount}
+              currencyCode={cart.currency_code}
+              className="font-medium text-foreground"
+            />
+          </div>
+        )}
+
+        {!!cart.discount_total && (
+          <div className="flex justify-between text-sm text-success">
+            <span>{labels.discount}</span>
+            <span className="font-medium">
+              -
+              <Price amount={cart.discount_total} currencyCode={cart.currency_code} />
+            </span>
+          </div>
+        )}
+
+        {/* For a company, and only when the figure is known: a consumer
+            sees the price they pay, VAT included (see OrderSummary). */}
+        {isCompanyOrder(cart) && (cart.tax_total ?? 0) > 0 && (
+          <div className="flex justify-between text-sm">
+            <span className="text-muted-foreground">{labels.tax}</span>
+            <Price
+              amount={cart.tax_total ?? 0}
+              currencyCode={cart.currency_code}
+              className="font-medium text-foreground"
+            />
+          </div>
+        )}
+
+        {/* Tender, not a reduction: the gift card covers part of the total
+            the bar shows, it does not lower it (docs/storefront/gift-cards.md). */}
+        {t.giftCardTotal > 0 && (
+          <>
+            <div className="flex justify-between text-sm text-success">
+              <span>{labels.giftCardApplied}</span>
+              <span className="font-medium">
+                -
+                <Price amount={t.giftCardTotal} currencyCode={cart.currency_code} />
+              </span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-muted-foreground">{labels.giftCardRemaining}</span>
+              <Price
+                amount={t.giftCardRemainder}
+                currencyCode={cart.currency_code}
+                className="font-semibold text-foreground"
+              />
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}