@cartbase/storefront 0.1.0

package/src/order/order-item.tsx

@@ -0,0 +1,201 @@
+import Image from "next/image"
+import { ImageOff } from "lucide-react"
+import { DualPrice } from "../lib/dual-price"
+import type { StoreOrderItem } from "../api/orders"
+import { defaultOrderLabels, type OrderLabels } from "./labels"
+
+/**
+ * Order line row. Ported from `@1click/ui/src/order/order-item.tsx`
+ * (v2.3.1) with the data seam translated to barter:
+ *
+ * Medusa's `StoreOrderLineItem` carried per-line computed totals
+ * (`total` / `original_total`). Barter's store order surface does NOT —
+ * `StoreOrderDetail.items` are version-pivot rows (`{quantity, line_item}`)
+ * whose embedded `order_line_items` row carries only `unit_price` (see
+ * docs/storefront/orders.md). The component therefore renders a normalized
+ * `OrderDisplayItem`, produced by one of the pure converters below:
+ *
+ *  - `displayItemFromOrderItem(pivot)` — from the order detail. `total` is
+ *    `unit_price × quantity` (the pre-adjustment line amount — the order
+ *    surface exposes no per-line adjustment data; totals rows remain the
+ *    money authority).
+ *  - `displayItemFromCartLine(line)` — from the decorated cart the app
+ *    still holds on the confirmation page (`api/carts` `CartLineItem`);
+ *    this path keeps the SERVER-computed `total`/`original_total` and so
+ *    the strike-through discount display. Prefer it right after
+ *    `completeCart()`.
+ */
+
+/** Normalized, render-ready order line. */
+export interface OrderDisplayItem {
+  id: string
+  title: string | null
+  /** Resolved variant caption (options joined, or variant_title). */
+  variantLabel: string | null
+  thumbnail: string | null
+  quantity: number
+  /** SERVER line total when available (cart path); else unit_price × qty. */
+  total: number
+  /** Pre-discount total — only present when the source had it (cart path). */
+  originalTotal?: number
+  metadata?: Record<string, unknown> | null
+  /** Preserved for the items-list newest-first sort, when the source had it. */
+  createdAt?: string | null
+}
+
+/**
+ * Variant caption resolution — port of the source's `variantLabel` IIFE:
+ * option values joined with " / " when present, else the variant title
+ * unless it is the Medusa placeholder "Default variant".
+ */
+export function variantLabelFrom(input: {
+  variant_option_values?: Record<string, unknown> | null
+  variant_title?: string | null
+}): string | null {
+  const values = input.variant_option_values
+  if (values && typeof values === "object") {
+    const parts = Object.values(values).filter(
+      (v): v is string | number => typeof v === "string" || typeof v === "number"
+    )
+    if (parts.length) return parts.map(String).join(" / ")
+  }
+  const title = input.variant_title
+  if (title && title !== "Default variant") return title
+  return null
+}
+
+/** Pure converter: order-detail pivot row → display line. */
+export function displayItemFromOrderItem(
+  item: StoreOrderItem
+): OrderDisplayItem {
+  const li = item.line_item
+  const quantity = Number(item.quantity ?? 0)
+  const unitPrice = Number(li?.unit_price ?? 0)
+  return {
+    id: item.id,
+    title: li?.product_title ?? li?.title ?? null,
+    variantLabel: li
+      ? variantLabelFrom({
+          variant_option_values:
+            (li["variant_option_values"] as Record<string, unknown> | null) ??
+            null,
+          variant_title: li.variant_title,
+        })
+      : null,
+    thumbnail: li?.thumbnail ?? null,
+    quantity,
+    total: unitPrice * quantity,
+    metadata: li?.metadata ?? null,
+    createdAt: (li?.["created_at"] as string | undefined) ?? null,
+  }
+}
+
+/** Structural cart-line shape (satisfied by `api/carts` `CartLineItem`). */
+export interface CartLineLike {
+  id: string
+  product_title?: string | null
+  title?: string | null
+  variant_title?: string | null
+  thumbnail?: string | null
+  quantity: number
+  total?: number | null
+  original_total?: number | null
+  unit_price?: number | null
+  metadata?: Record<string, unknown> | null
+  created_at?: string | null
+  [key: string]: unknown
+}
+
+/** Pure converter: decorated cart line → display line (keeps server totals). */
+export function displayItemFromCartLine(line: CartLineLike): OrderDisplayItem {
+  const quantity = Number(line.quantity ?? 0)
+  return {
+    id: line.id,
+    title: line.product_title ?? line.title ?? null,
+    variantLabel: variantLabelFrom({
+      variant_option_values:
+        (line["variant_option_values"] as Record<string, unknown> | null) ??
+        null,
+      variant_title: line.variant_title,
+    }),
+    thumbnail: line.thumbnail ?? null,
+    quantity,
+    total: Number(line.total ?? Number(line.unit_price ?? 0) * quantity),
+    originalTotal:
+      line.original_total !== null && line.original_total !== undefined
+        ? Number(line.original_total)
+        : undefined,
+    metadata: line.metadata ?? null,
+    createdAt: line.created_at ?? null,
+  }
+}
+
+type OrderItemProps = {
+  item: OrderDisplayItem
+  currencyCode: string
+  labels?: Pick<OrderLabels, "qty">
+}
+
+export function OrderItem({ item, currencyCode, labels }: OrderItemProps) {
+  const l = { ...defaultOrderLabels, ...labels }
+  const hasDiscount =
+    item.originalTotal !== undefined && item.total < item.originalTotal
+
+  return (
+    <div className="flex gap-4 py-4">
+      <div className="w-[64px] h-[64px] rounded-xl overflow-hidden bg-muted relative flex-shrink-0 shadow-sm">
+        {item.thumbnail ? (
+          <Image
+            src={item.thumbnail}
+            alt={item.title || ""}
+            fill
+            className="object-cover"
+            sizes="64px"
+          />
+        ) : (
+          <div className="w-full h-full flex items-center justify-center">
+            <ImageOff className="w-5 h-5 text-muted-foreground" />
+          </div>
+        )}
+      </div>
+
+      <div className="flex-1 min-w-0 flex flex-col justify-center">
+        <div className="flex items-baseline justify-between gap-3">
+          <div className="min-w-0">
+            <span className="text-sm font-semibold text-foreground line-clamp-1 leading-snug block">
+              {item.title}
+            </span>
+            {item.variantLabel && (
+              <span className="text-xs text-muted-foreground mt-0.5 block">
+                {item.variantLabel}
+              </span>
+            )}
+            <span className="text-xs text-muted-foreground mt-0.5 block">
+              {item.quantity} {l.qty}
+            </span>
+          </div>
+          <div className="text-right flex-shrink-0">
+            {hasDiscount && (
+              <span className="text-xs text-muted-foreground line-through block leading-none mb-0.5">
+                <DualPrice
+                  amount={item.originalTotal ?? 0}
+                  currencyCode={currencyCode}
+                  className="text-xs text-muted-foreground"
+                />
+              </span>
+            )}
+            <DualPrice
+              amount={item.total}
+              currencyCode={currencyCode}
+              className={`text-sm font-bold ${
+                hasDiscount ? "text-success" : "text-foreground"
+              }`}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export { type OrderItemProps }

package/src/order/order-items-list.tsx

@@ -0,0 +1,52 @@
+import { OrderItem, type OrderDisplayItem } from "./order-item"
+import { isProductLine } from "../lib/cart-helpers"
+import { defaultOrderLabels, type OrderLabels } from "./labels"
+
+/**
+ * Order items list. Ported from `@1click/ui/src/order/order-items-list.tsx`
+ * (v2.3.1); data seam: takes normalized `OrderDisplayItem[]` (see
+ * `order-item.tsx` converters) + the currency, since barter's
+ * `StoreOrderDetail` carries no order-level computed fields beyond
+ * `currency_code`.
+ */
+type OrderItemsListProps = {
+  items: OrderDisplayItem[]
+  currencyCode: string
+  labels?: Pick<OrderLabels, "summary" | "qty">
+}
+
+export function OrderItemsList({
+  items,
+  currencyCode,
+  labels,
+}: OrderItemsListProps) {
+  const l = { ...defaultOrderLabels, ...labels }
+  // Render product lines only — backend-injected fee lines (legacy COD-fee
+  // line items tagged `metadata.is_cod_fee`) are hidden here and surfaced
+  // as a dedicated row in OrderTotals instead. barter's NATIVE COD fee is
+  // never a line item (order_summaries.totals.cod_fee_total), so on pure
+  // barter data this filter is a no-op safety net.
+  const visible = (items || []).filter((i) => isProductLine(i))
+
+  return (
+    <div>
+      <h2 className="text-sm font-semibold text-foreground mb-1">
+        {l.summary}
+      </h2>
+      <div className="divide-y divide-border">
+        {visible
+          .sort((a, b) => ((a.createdAt ?? "") > (b.createdAt ?? "") ? -1 : 1))
+          .map((item) => (
+            <OrderItem
+              key={item.id}
+              item={item}
+              currencyCode={currencyCode}
+              labels={labels}
+            />
+          ))}
+      </div>
+    </div>
+  )
+}
+
+export { type OrderItemsListProps }

package/src/order/order-payment-card.tsx

@@ -0,0 +1,95 @@
+import { CreditCard } from "lucide-react"
+import {
+  isManual,
+  isPaypal,
+  isStripeLike,
+  paymentInfoMap,
+} from "../lib/payment-constants"
+import { defaultOrderLabels, type OrderLabels } from "./labels"
+
+/**
+ * Payment-method card. Ported from
+ * `@1click/ui/src/order/order-payment-card.tsx` (v2.3.1); data seam:
+ * Medusa's `order.payment_collections[0].payments[0]` embed does not exist
+ * on barter's `StoreOrderDetail` (payment internals never cross the store
+ * surface) — the provider id arrives via props instead: from
+ * `prepareCheckout().payment_provider`, the decorated cart's
+ * `payment_collection` sessions, or the app's checkout state.
+ */
+
+/**
+ * Resolve a human-readable, locale-correct title for a payment provider id.
+ * Resolution order (verbatim from the source):
+ *
+ *   1. Bucketed lookup against `labels.paymentMethodTitles` (the locale
+ *      pack the storefront passes in). This is the canonical localization
+ *      surface — Bulgarian stores get "Наложен платеж" here, English
+ *      stores get "Cash on delivery", etc.
+ *   2. Hardcoded `paymentInfoMap` fallback for known provider ids (English
+ *      defaults). Keeps the library safe for storefronts that haven't
+ *      adopted the labels pack yet.
+ *   3. The raw provider id as a last resort, so the card never renders
+ *      empty if a brand-new provider lands.
+ *
+ * The bucket is determined by the same `isStripeLike` / `isManual` /
+ * `isPaypal` predicates used everywhere else in the library (translated to
+ * barter ids in `lib/payment-constants`), so a single change to those
+ * propagates here automatically.
+ */
+export function resolvePaymentTitle(
+  providerId: string | undefined,
+  paymentMethodTitles: OrderLabels["paymentMethodTitles"]
+): string {
+  if (!providerId) return ""
+  if (isStripeLike(providerId)) return paymentMethodTitles.card
+  // COD before manual: pp_cod is its own bucket (payments-registry card) —
+  // an offline manual payment must never render as "Cash on delivery".
+  if (providerId === "pp_cod") return paymentMethodTitles.cod
+  if (isManual(providerId)) return paymentMethodTitles.manual
+  if (isPaypal(providerId)) return paymentMethodTitles.paypal
+  return paymentInfoMap[providerId]?.title ?? providerId
+}
+
+type OrderPaymentCardProps = {
+  /** Payment provider id (e.g. `pp_stripe`, `pp_system_default`). */
+  providerId?: string | null
+  /** Last 4 card digits when known (Stripe checkout state). */
+  cardLast4?: string | null
+  labels?: Pick<OrderLabels, "paymentMethod" | "paymentMethodTitles">
+}
+
+export function OrderPaymentCard({
+  providerId,
+  cardLast4,
+  labels,
+}: OrderPaymentCardProps) {
+  const l = { ...defaultOrderLabels, ...labels }
+
+  if (!providerId) return null
+
+  const title = resolvePaymentTitle(providerId, l.paymentMethodTitles)
+  const icon = paymentInfoMap[providerId]?.icon ?? null
+
+  return (
+    <div className="bg-card rounded-xl p-5 shadow-sm">
+      <h3 className="text-sm font-semibold text-foreground mb-3">
+        {l.paymentMethod}
+      </h3>
+      <div className="flex items-center gap-3">
+        <div className="w-9 h-9 rounded-lg bg-muted flex items-center justify-center text-muted-foreground">
+          {icon || <CreditCard className="w-[18px] h-[18px]" />}
+        </div>
+        <div>
+          <p className="text-sm text-foreground">{title}</p>
+          {isStripeLike(providerId) && cardLast4 && (
+            <p className="text-xs text-muted-foreground mt-0.5">
+              **** **** **** {cardLast4}
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export { type OrderPaymentCardProps }

package/src/order/order-timeline.tsx

@@ -0,0 +1,141 @@
+"use client"
+
+import type { StoreOrderFulfillment } from "../api/orders"
+import { defaultOrderLabels, type OrderLabels } from "./labels"
+
+/**
+ * Fulfillment progress timeline. Ported from
+ * `@1click/ui/src/order/order-timeline.tsx` (v2.3.1) — the step state
+ * machine and rendering are unchanged. Barter seam: there is no
+ * `order.fulfillment_status` column on the store surface; derive the
+ * status from the fulfillments' lifecycle timestamps with
+ * `deriveFulfillmentStatus(order.fulfillments)` and pass it in.
+ */
+
+/**
+ * Derive a Medusa-style fulfillment status from barter's fulfillment
+ * lifecycle timestamps (packed_at → fulfilled, shipped_at → shipped,
+ * delivered_at → delivered; canceled fulfillments are ignored). Returns
+ * `undefined` for "not fulfilled yet" (timeline shows "Placed"). Partial
+ * variants are emitted when only SOME active fulfillments reached the
+ * stage — the timeline maps both to the same step. Unit-tested.
+ */
+export function deriveFulfillmentStatus(
+  fulfillments: readonly StoreOrderFulfillment[] | null | undefined
+): string | undefined {
+  const active = (fulfillments ?? [])
+    .map((row) => row?.fulfillment)
+    .filter((f): f is NonNullable<StoreOrderFulfillment["fulfillment"]> =>
+      Boolean(f && !f.canceled_at)
+    )
+  if (!active.length) return undefined
+
+  const all = (key: "packed_at" | "shipped_at" | "delivered_at") =>
+    active.every((f) => Boolean(f[key]))
+  const some = (key: "packed_at" | "shipped_at" | "delivered_at") =>
+    active.some((f) => Boolean(f[key]))
+
+  if (all("delivered_at")) return "delivered"
+  if (some("delivered_at")) return "partially_delivered"
+  if (all("shipped_at")) return "shipped"
+  if (some("shipped_at")) return "partially_shipped"
+  if (all("packed_at")) return "fulfilled"
+  if (some("packed_at")) return "partially_fulfilled"
+  return undefined
+}
+
+type OrderTimelineProps = {
+  fulfillmentStatus?: string
+  labels?: Pick<OrderLabels, "orderPlaced" | "processing" | "shipped" | "delivered">
+}
+
+export function OrderTimeline({
+  fulfillmentStatus,
+  labels,
+}: OrderTimelineProps) {
+  const l = { ...defaultOrderLabels, ...labels }
+
+  const steps = [
+    { label: l.orderPlaced, key: "placed" },
+    { label: l.processing, key: "processing" },
+    { label: l.shipped, key: "shipped" },
+    { label: l.delivered, key: "delivered" },
+  ]
+
+  const getActiveIndex = (): number => {
+    switch (fulfillmentStatus) {
+      case "delivered":
+      case "partially_delivered":
+        return 3
+      case "shipped":
+      case "partially_shipped":
+        return 2
+      case "fulfilled":
+      case "partially_fulfilled":
+        return 1
+      default:
+        return 0
+    }
+  }
+
+  const activeIndex = getActiveIndex()
+  const lastStep = steps.length - 1
+
+  return (
+    <div className="px-6 py-5 bg-card rounded-xl shadow-sm">
+      <div className="relative">
+        <div className="absolute top-[5px] left-[6px] right-[6px] h-[2px] bg-muted rounded-full" />
+        <div
+          className="absolute top-[5px] left-[6px] h-[2px] bg-success rounded-full transition-all duration-700 ease-out"
+          style={{
+            width:
+              activeIndex === 0
+                ? "0"
+                : `calc((100% - 12px) * ${activeIndex / lastStep})`,
+          }}
+        />
+
+        <div className="relative flex justify-between">
+          {steps.map((step, i) => {
+            const isActive = i === activeIndex
+            const isComplete = i < activeIndex
+            const isFuture = i > activeIndex
+
+            return (
+              <div
+                key={step.key}
+                className={`flex flex-col gap-2 ${
+                  i === 0
+                    ? "items-start"
+                    : i === lastStep
+                      ? "items-end"
+                      : "items-center"
+                }`}
+              >
+                <div className="relative w-3 h-3">
+                  {isActive && (
+                    <span className="absolute inset-0 rounded-full bg-success/40 animate-ping [animation-duration:2s]" />
+                  )}
+                  <div
+                    className={`relative w-3 h-3 rounded-full z-10 ${
+                      isComplete || isActive ? "bg-success" : "bg-muted"
+                    }`}
+                  />
+                </div>
+                <span
+                  className={`text-[11px] sm:text-xs font-medium whitespace-nowrap ${
+                    isFuture ? "text-muted-foreground" : "text-success"
+                  }`}
+                >
+                  {step.label}
+                </span>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export { type OrderTimelineProps }