@cartbase/storefront 0.1.0

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

@@ -0,0 +1,152 @@
+"use client"
+
+import { useState } from "react"
+
+import type { StorefrontClient } from "../api/http"
+import { updateLineItem, type Cart, type CartLineItem } from "../api/carts"
+import { DualPrice } from "../lib/dual-price"
+import { cn } from "../lib/utils"
+import { useCheckoutLabels } from "./context"
+
+/**
+ * LineItemCard — a single cart line shown inside the checkout order
+ * summary card. Includes thumbnail, title, variant, quantity select,
+ * and dual-currency price.
+ *
+ * Ported from `@1click/ui/src/checkout/line-item-card.tsx` (v2.3.1) with
+ * the barter 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 barter line DTO.
+ *
+ * Checkout is master-level: customers cannot remove items here.
+ * Removal lives in the cart drawer only.
+ */
+
+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. */
+  onCartChange?: (cart: Cart) => void
+}
+
+export function LineItemCard({
+  client,
+  cartId,
+  item,
+  currencyCode,
+  onCartChange,
+}: 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 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
+          <img
+            src={item.thumbnail}
+            alt={item.product_title || ""}
+            className="w-full h-full object-cover"
+          />
+        ) : (
+          <div className="w-full h-full flex items-center justify-center">
+            <svg
+              className="w-6 h-6 text-muted-foreground"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={1}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"
+              />
+            </svg>
+          </div>
+        )}
+        {item.quantity > 1 && (
+          <span className="absolute -bottom-1 -left-1 w-5 h-5 text-[10px] font-bold rounded-full bg-foreground text-card flex items-center justify-center shadow-sm">
+            {item.quantity}
+          </span>
+        )}
+      </div>
+
+      <div className="flex-1 min-w-0">
+        <p className="text-sm font-semibold text-foreground leading-tight truncate">
+          {item.product_title}
+        </p>
+        {item.variant_title && item.variant_title !== "Default" && (
+          <p className="text-xs text-muted-foreground mt-1">{item.variant_title}</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>
+      </div>
+
+      <div className="flex flex-col items-end justify-center flex-shrink-0">
+        <DualPrice
+          amount={total}
+          currencyCode={currencyCode}
+          className="text-sm font-bold text-foreground"
+        />
+      </div>
+    </div>
+  )
+}

package/src/checkout/order-summary.tsx

@@ -0,0 +1,524 @@
+"use client"
+
+import { useEffect, useMemo, useState } from "react"
+
+import type { StorefrontClient } from "../api/http"
+import { updateLineItem, type Cart, type CartLineItem } from "../api/carts"
+import { DualPrice } from "../lib/dual-price"
+import { isProductLine } from "../lib/cart-helpers"
+import { cn } from "../lib/utils"
+import { useCheckoutLabels } from "./context"
+import { DiscountSection } from "./discount-section"
+import { GiftCardSection } from "./gift-card-section"
+
+/**
+ * OrderSummary — the right column of the checkout: scrollable list of
+ * line items, discount code, gift cards, subtotal / shipping / COD fee /
+ * tax / total, optional optimistic overrides used during method selection.
+ *
+ * Ported from `@1click/ui/src/checkout/order-summary.tsx` (v2.3.1) with
+ * the barter data seam:
+ *
+ *  - COD fee is CART-LEVEL decoration on the barter wire —
+ *    `cart.cod_fee_total` / `cart.cod_fee_label`, folded into `cart.total`
+ *    while a live pp_cod session exists (docs/storefront/checkout.md) —
+ *    NOT a metadata-flagged fee line item. The fee row + optimistic math
+ *    read those fields; `isProductLine` is kept as a defensive filter for
+ *    any legacy fee-line carts.
+ *  - Gift-card tender rows (barter feature): `gift_card_total` renders as
+ *    a negative tender row and `gift_card_remainder` as "Remaining to pay"
+ *    UNDER the (unchanged) total — tender never moves totals
+ *    (docs/storefront/gift-cards.md). `GiftCardSection` mounts next to
+ *    `DiscountSection`.
+ *  - Line rows call `carts.updateLineItem` through the caller-supplied
+ *    `client`; every mutation hands the decorated cart to `onCartChange`.
+ *  - The flat `CheckoutLineItem` row (source: checkout-line-item.tsx,
+ *    outside this batch's pre-declared file list) is ported INTO this file
+ *    as the summary's row renderer and re-exported from the family barrel.
+ */
+
+// ---------------------------------------------------------------------------
+// CheckoutLineItem — flat row used INSIDE the OrderSummary card
+// ---------------------------------------------------------------------------
+
+/**
+ * CheckoutLineItem — flat row used INSIDE the OrderSummary card. Unlike
+ * LineItemCard (which is itself a card), this component is borderless:
+ * rows sit on the parent card's surface with parent-provided dividers.
+ *
+ * Checkout is master-level: customers cannot remove items from the
+ * order summary. Removal happens in the cart drawer only — the qty
+ * pill here allows adjustment down to 1, not zero.
+ *
+ * Ported from `@1click/ui/src/checkout/checkout-line-item.tsx` (v2.3.1);
+ * lucide-react's Minus/Plus icons are inlined as SVGs so the checkout
+ * family carries no icon-kit dependency (mirrors lib/payment-constants'
+ * no-icons rule). `variant.title` → the flat `variant_title` column.
+ */
+export function CheckoutLineItem({
+  client,
+  cartId,
+  item,
+  currencyCode,
+  onCartChange,
+}: {
+  client: StorefrontClient
+  cartId: string
+  item: CartLineItem
+  currencyCode: string
+  onCartChange?: (cart: Cart) => void
+}) {
+  const labels = useCheckoutLabels()
+  const [updating, setUpdating] = useState(false)
+
+  const handleQty = async (qty: number) => {
+    if (qty < 1) return
+    setUpdating(true)
+    try {
+      const { cart } = await updateLineItem(client, cartId, item.id, {
+        quantity: qty,
+      })
+      onCartChange?.(cart)
+    } catch {
+      // e.g. insufficient_inventory — the row snaps back to server truth
+      // on the next cart render.
+    } finally {
+      setUpdating(false)
+    }
+  }
+
+  const qtyPill = (
+    <div className="inline-flex items-center rounded-[2px] border border-border bg-card">
+      <button
+        type="button"
+        onClick={() => handleQty(item.quantity - 1)}
+        disabled={item.quantity <= 1 || updating}
+        aria-label={labels.qty}
+        className="w-8 h-8 flex items-center justify-center text-foreground hover:bg-muted disabled:opacity-30 disabled:cursor-not-allowed"
+      >
+        <svg
+          className="w-3.5 h-3.5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2.25}
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" d="M5 12h14" />
+        </svg>
+      </button>
+      <span className="min-w-[1.75rem] px-1 text-center text-xs font-semibold tabular-nums">
+        {item.quantity}
+      </span>
+      <button
+        type="button"
+        onClick={() => handleQty(item.quantity + 1)}
+        disabled={updating}
+        aria-label={labels.qty}
+        className="w-8 h-8 flex items-center justify-center text-foreground hover:bg-muted disabled:opacity-30 disabled:cursor-not-allowed"
+      >
+        <svg
+          className="w-3.5 h-3.5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2.25}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 5v14m-7-7h14"
+          />
+        </svg>
+      </button>
+    </div>
+  )
+
+  const titleBlock = (
+    <div className="min-w-0">
+      <p className="text-[15px] font-semibold text-foreground leading-snug break-words">
+        {item.product_title}
+      </p>
+      {item.variant_title && item.variant_title !== "Default" && (
+        <p className="text-xs text-muted-foreground mt-1 truncate">
+          {item.variant_title}
+        </p>
+      )}
+    </div>
+  )
+
+  return (
+    <div
+      className={cn(
+        "relative flex gap-4 transition-opacity",
+        updating && "opacity-40 pointer-events-none"
+      )}
+    >
+      <div className="relative w-16 h-16 rounded-xl overflow-hidden flex-shrink-0 bg-muted border border-border">
+        {item.thumbnail ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={item.thumbnail}
+            alt={item.product_title || ""}
+            className="w-full h-full object-cover"
+          />
+        ) : null}
+      </div>
+
+      {/* DESKTOP layout —
+          row 1: title (left)  ·  price right-aligned, baseline of title line 1
+          row 2: qty pill (left) */}
+      <div className="hidden sm:flex flex-1 min-w-0 flex-col gap-2.5">
+        <div className="flex items-baseline justify-between gap-3">
+          {titleBlock}
+          <DualPrice
+            amount={item.total ?? 0}
+            currencyCode={currencyCode}
+            className="text-sm font-bold text-foreground text-right flex-shrink-0"
+          />
+        </div>
+        {qtyPill}
+      </div>
+
+      {/* MOBILE layout — title takes full content width, qty+price share
+          the row underneath. */}
+      <div className="sm:hidden flex-1 min-w-0 flex flex-col gap-2">
+        {titleBlock}
+        <div className="flex items-center justify-between gap-3">
+          {qtyPill}
+          <DualPrice
+            amount={item.total ?? 0}
+            currencyCode={currencyCode}
+            className="text-sm font-bold text-foreground text-right"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// OrderSummary
+// ---------------------------------------------------------------------------
+
+type OrderSummaryProps = {
+  /** The SDK transport — line-item / promo / gift-card mutations use it. */
+  client: StorefrontClient
+  cart: Cart
+  /**
+   * Optimistic shipping total during method selection. Pass `null` when
+   * there is no optimistic override so the server value is used.
+   */
+  optimisticShippingCost: number | null
+  onOptimisticShippingClear?: () => void
+  /**
+   * Optimistic COD-fee prediction. Three values:
+   *   - null         → no prediction; render whatever the cart says.
+   *   - 0            → predict no fee (toggling away from COD).
+   *   - positive     → predict the fee at this amount.
+   * Pass `useCheckoutOrchestration`'s `optimisticCodFee`. Needed because
+   * the deferred-checkout architecture defers the pp_cod session (and so
+   * the native fee) until Buy click.
+   */
+  optimisticCodFee?: number | null
+  onOptimisticCodFeeClear?: () => void
+  /**
+   * Override label for the cash-on-delivery fee row. Optional — falls
+   * back to the cart's server-provided `cod_fee_label` (admin-configured
+   * on the COD integration), then to `labels.codFee`.
+   */
+  codFeeLabel?: string
+  /** Show the gift-card widget. Default true; pass false for stores that
+   * haven't enabled gift cards (the widget itself is harmless either way —
+   * an unknown code gets the generic refusal). */
+  showGiftCards?: boolean
+  /**
+   * Receives every decorated cart returned by a summary mutation
+   * (quantity change, promo apply, gift-card apply/remove). Hosts update
+   * their cart state here (or `router.refresh()`), and SHOULD re-run
+   * `syncPaymentAmount` when a pending payment session may exist — a
+   * gift-card change moves the remainder the provider must charge.
+   */
+  onCartChange?: (cart: Cart) => void
+}
+
+export function OrderSummary({
+  client,
+  cart,
+  optimisticShippingCost,
+  onOptimisticShippingClear,
+  optimisticCodFee,
+  onOptimisticCodFeeClear,
+  codFeeLabel,
+  showGiftCards = true,
+  onCartChange,
+}: OrderSummaryProps) {
+  const labels = useCheckoutLabels()
+
+  // Product rows only. Barter's COD fee is cart-level decoration (never a
+  // line item), so this filter is defensive — it also hides any
+  // metadata-flagged fee line a legacy/ported cart might still carry.
+  const allItems = cart.items ?? []
+  const productItems = useMemo(
+    () => allItems.filter(isProductLine),
+    [allItems]
+  )
+  const itemCount = productItems.reduce((s, i) => s + i.quantity, 0)
+
+  const shippingCost =
+    optimisticShippingCost !== null ? optimisticShippingCost : cart.shipping_total
+  const shippingKnown = shippingCost !== null && shippingCost !== undefined
+
+  // Effective COD fee: optimistic prediction wins until the cart catches
+  // up. Three states (null / 0 / positive). Barter server truth is
+  // `cart.cod_fee_total` (folded into cart.total while a pp_cod session
+  // lives — docs/storefront/checkout.md).
+  const realCodFeeAmount = cart.cod_fee_total ?? 0
+  const effectiveCodFee =
+    optimisticCodFee !== null && optimisticCodFee !== undefined
+      ? optimisticCodFee
+      : realCodFeeAmount
+
+  const displayTotal = useMemo(() => {
+    let total = cart.total ?? 0
+    if (optimisticShippingCost !== null) {
+      total = total - (cart.shipping_total ?? 0) + optimisticShippingCost
+    }
+    if (optimisticCodFee !== null && optimisticCodFee !== undefined) {
+      total = total - realCodFeeAmount + effectiveCodFee
+    }
+    return total
+  }, [
+    cart.total,
+    cart.shipping_total,
+    optimisticShippingCost,
+    optimisticCodFee,
+    effectiveCodFee,
+    realCodFeeAmount,
+  ])
+
+  // Subtotal: barter's `item_total` is products-only (the COD fee is not a
+  // line item), so no fee subtraction is needed — direct server truth.
+  const productSubtotal = cart.item_total ?? 0
+
+  const codFeeAmount = effectiveCodFee
+
+  // Gift-card tender decoration — SERVER truth, rendered as-is. Totals
+  // never move; the tender rows sit under the total.
+  const giftCardTotal = cart.gift_card_total ?? 0
+  const giftCardRemainder = cart.gift_card_remainder ?? 0
+
+  // Clear optimistic override once server cart reflects the new shipping cost
+  useEffect(() => {
+    if (
+      optimisticShippingCost !== null &&
+      cart.shipping_total === optimisticShippingCost
+    ) {
+      onOptimisticShippingClear?.()
+    }
+  }, [cart.shipping_total, optimisticShippingCost, onOptimisticShippingClear])
+
+  // Clear optimistic COD fee once the cart's decoration matches the
+  // prediction (barter: cod_fee_total, not a fee line item).
+  useEffect(() => {
+    if (optimisticCodFee === null || optimisticCodFee === undefined) return
+    const synced = realCodFeeAmount === optimisticCodFee
+    if (synced) onOptimisticCodFeeClear?.()
+  }, [optimisticCodFee, realCodFeeAmount, onOptimisticCodFeeClear])
+
+  return (
+    <div>
+      <div className="flex items-baseline justify-between mb-4">
+        <h2 className="text-lg font-semibold text-foreground tracking-tight">
+          {labels.orderSummary}
+        </h2>
+        <span className="text-sm text-muted-foreground">
+          {itemCount} {labels.items}
+        </span>
+      </div>
+
+      <div className="bg-card border border-border rounded-[2px] overflow-hidden shadow-sm">
+        {/* Items section — bg-muted accent so the items zone reads as a
+            distinct surface from the totals section below. */}
+        <div className="bg-muted px-5 sm:px-6 py-2 divide-y divide-border border-b border-border">
+          {productItems
+            .slice()
+            .sort((a, b) => ((a.created_at ?? "") > (b.created_at ?? "") ? -1 : 1))
+            .map((item) => (
+              <div key={item.id} className="py-5 first:pt-3 last:pb-3">
+                <CheckoutLineItem
+                  client={client}
+                  cartId={cart.id}
+                  item={item}
+                  currencyCode={cart.currency_code}
+                  onCartChange={onCartChange}
+                />
+              </div>
+            ))}
+        </div>
+
+        <div className="px-5 sm:px-6 mt-4 space-y-3">
+          <DiscountSection
+            client={client}
+            cart={cart}
+            onCartChange={onCartChange}
+          />
+          {showGiftCards && (
+            <GiftCardSection
+              client={client}
+              cart={cart}
+              onCartChange={onCartChange}
+            />
+          )}
+        </div>
+
+        <div className="mx-5 sm:mx-6 my-5 h-px bg-border" />
+
+        <div className="px-5 sm:px-6 space-y-3">
+          <div className="flex justify-between text-sm">
+            <span className="text-muted-foreground">{labels.subtotal}</span>
+            <DualPrice
+              amount={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>
+            {shippingKnown ? (
+              shippingCost === 0 ? (
+                <span className="font-medium text-success">
+                  {labels.shippingFree}
+                </span>
+              ) : (
+                <DualPrice
+                  amount={shippingCost ?? 0}
+                  currencyCode={cart.currency_code}
+                  className="font-medium text-foreground"
+                />
+              )
+            ) : (
+              <span className="font-medium text-foreground">
+                {labels.shippingCalc}
+              </span>
+            )}
+          </div>
+
+          {codFeeAmount > 0 && (
+            <div className="flex justify-between text-sm">
+              <span className="text-muted-foreground">
+                {codFeeLabel ?? cart.cod_fee_label ?? labels.codFee}
+              </span>
+              <DualPrice
+                amount={codFeeAmount}
+                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">
+                -
+                <DualPrice
+                  amount={cart.discount_total}
+                  currencyCode={cart.currency_code}
+                />
+              </span>
+            </div>
+          )}
+
+          <div className="flex justify-between text-sm">
+            <span className="text-muted-foreground flex items-center gap-1 relative group">
+              {labels.tax}
+              <svg
+                className="w-3.5 h-3.5 text-muted-foreground cursor-help"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2}
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+              <span className="absolute left-0 bottom-full mb-1.5 px-2.5 py-1.5 text-xs text-card bg-foreground rounded-md whitespace-nowrap opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity">
+                {labels.taxTooltip}
+              </span>
+            </span>
+            <DualPrice
+              amount={cart.tax_total ?? 0}
+              currencyCode={cart.currency_code}
+              className="font-medium text-foreground"
+            />
+          </div>
+        </div>
+
+        <div className="mx-5 sm:mx-6 mt-4 pt-4 border-t border-border">
+          <div className="flex justify-between items-center">
+            <span className="text-lg font-bold text-foreground">
+              {labels.total}
+            </span>
+            <div className="text-right">
+              <DualPrice
+                amount={displayTotal ?? 0}
+                currencyCode={cart.currency_code}
+                className="text-2xl font-bold text-foreground tracking-tight"
+                bgnClassName="ml-2 text-sm text-muted-foreground/70 font-normal"
+              />
+            </div>
+          </div>
+
+          {/* Gift-card TENDER rows — under the (unchanged) total, because
+              tender covers the total rather than reducing it. Rendered only
+              while cards actually cover something. */}
+          {giftCardTotal > 0 && (
+            <div className="mt-3 space-y-2">
+              <div className="flex justify-between text-sm text-success">
+                <span>{labels.giftCardApplied}</span>
+                <span className="font-medium">
+                  -
+                  <DualPrice
+                    amount={giftCardTotal}
+                    currencyCode={cart.currency_code}
+                  />
+                </span>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-muted-foreground">
+                  {labels.giftCardRemaining}
+                </span>
+                <DualPrice
+                  amount={giftCardRemainder}
+                  currencyCode={cart.currency_code}
+                  className="font-semibold text-foreground"
+                />
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="px-5 sm:px-6 pb-5 pt-4 flex items-center justify-center gap-2 text-xs text-muted-foreground">
+          <svg
+            className="w-3.5 h-3.5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+            />
+          </svg>
+          <span>{labels.secureCheckout}</span>
+        </div>
+      </div>
+    </div>
+  )
+}