@cartbase/storefront 0.1.0

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

@@ -0,0 +1,47 @@
+import { defaultOrderLabels, type OrderLabels } from "./labels"
+
+/**
+ * Contact-info card (name, phone, email). Ported from
+ * `@1click/ui/src/order/order-address-card.tsx` (v2.3.1); data seam:
+ * structural pick — barter's `StoreOrderDetail` (with its embedded
+ * `order_addresses` row) satisfies it directly.
+ */
+export interface OrderContactData {
+  email: string | null
+  shipping_address?: {
+    first_name?: string | null
+    last_name?: string | null
+    phone?: string | null
+    [key: string]: unknown
+  } | null
+  [key: string]: unknown
+}
+
+type OrderAddressCardProps = {
+  order: OrderContactData
+  labels?: Pick<OrderLabels, "contactInfo">
+}
+
+export function OrderAddressCard({ order, labels }: OrderAddressCardProps) {
+  const l = { ...defaultOrderLabels, ...labels }
+  const addr = order.shipping_address
+
+  return (
+    <div className="bg-card rounded-xl p-5 shadow-sm">
+      <h3 className="text-sm font-semibold text-foreground mb-3">
+        {l.contactInfo}
+      </h3>
+      <div className="space-y-1 text-sm text-muted-foreground">
+        {addr && (
+          <p className="font-medium text-foreground">
+            {addr.first_name} {addr.last_name}
+          </p>
+        )}
+        {addr?.phone && <p>{addr.phone}</p>}
+        <p>{order.email}</p>
+      </div>
+    </div>
+  )
+}
+
+export { type OrderAddressCardProps }

package/src/order/order-completed-template.tsx

@@ -0,0 +1,165 @@
+import Link from "next/link"
+import { ChevronLeft } from "lucide-react"
+import type { StoreOrderDetail, StoreOrderItem } from "../api/orders"
+import { defaultOrderLabels, type OrderLabels } from "./labels"
+import {
+  OrderConfirmationHeader,
+  type OrderHeaderData,
+} from "./order-confirmation-header"
+import { deriveFulfillmentStatus, OrderTimeline } from "./order-timeline"
+import { OrderItemsList } from "./order-items-list"
+import {
+  displayItemFromOrderItem,
+  type OrderDisplayItem,
+} from "./order-item"
+import { OrderTotals, type OrderTotalsSource } from "./order-totals"
+import { OrderAddressCard, type OrderContactData } from "./order-address-card"
+import {
+  OrderDeliveryCard,
+  type OrderDeliveryData,
+  type ShippingMethodDisplay,
+} from "./order-delivery-card"
+import { OrderPaymentCard } from "./order-payment-card"
+import { OrderHelpSection } from "./order-help-section"
+
+/**
+ * Full order-confirmation page. Ported from
+ * `@1click/ui/src/order/order-completed-template.tsx` (v2.3.1) with the
+ * barter data seam: Medusa's `StoreOrder` was one object carrying items
+ * with totals, order totals, shipping methods and payments — barter splits
+ * those across surfaces, so the template takes them as separate props:
+ *
+ *  - `order` — barter `StoreOrderDetail` (or any structural equivalent:
+ *    id/display_id/email/created_at/currency_code/metadata/addresses/
+ *    fulfillments). The fulfillment timeline is derived from
+ *    `order.fulfillments` internally.
+ *  - `totals` — an `OrderTotalsSource`: pass the decorated cart from the
+ *    just-completed checkout (`api/carts` `Cart` satisfies it), or
+ *    `orderTotalsFromSummary(completeCart().order.summary)`.
+ *  - `items` — normalized display lines; when omitted they are built from
+ *    `order.items` via `displayItemFromOrderItem` (prefer passing
+ *    cart-derived lines via `displayItemFromCartLine` right after checkout
+ *    to keep server-computed per-line discounts).
+ *  - `shippingMethod` / `paymentProviderId` / `cardLast4` — from the
+ *    checkout state (decorated cart / prepare-checkout response); the
+ *    delivery and payment cards render only what they are given.
+ *
+ * The Purchase tracking trio (fbq/gtag/rybbit, deduped by
+ * `order.display_id`) stays APP-OWNED: fire it from the confirmation
+ * route, not from this template — see docs/storefront/components.md
+ * (tracking family) for the dedupe contract.
+ */
+type OrderCompletedTemplateProps = {
+  order: OrderHeaderData &
+    OrderContactData &
+    OrderDeliveryData & {
+      currency_code: string
+      items?: StoreOrderItem[] | null
+    }
+  totals: OrderTotalsSource
+  /** Normalized lines; defaults to `order.items` via the pure converter. */
+  items?: OrderDisplayItem[]
+  shippingMethod?: ShippingMethodDisplay | null
+  paymentProviderId?: string | null
+  cardLast4?: string | null
+  labels?: OrderLabels
+  locale?: string
+  contactHref?: string
+  returnsHref?: string
+  /** Href for the bottom "continue shopping" CTA (source hardcoded /store). */
+  storeHref?: string
+  /**
+   * Per-store override for the cash-on-delivery fee row in the totals
+   * breakdown. Optional — falls back to the server's `cod_fee_label`,
+   * then the fee line's title, then the translated `labels.codFee`.
+   */
+  codFeeLabel?: string
+}
+
+export function OrderCompletedTemplate({
+  order,
+  totals,
+  items,
+  shippingMethod,
+  paymentProviderId,
+  cardLast4,
+  labels,
+  locale,
+  contactHref,
+  returnsHref,
+  storeHref = "/store",
+  codFeeLabel,
+}: OrderCompletedTemplateProps) {
+  const l = { ...defaultOrderLabels, ...labels }
+  const displayItems =
+    items ?? (order.items ?? []).map(displayItemFromOrderItem)
+
+  return (
+    <div className="min-h-[calc(100vh-64px)] bg-muted/50 py-8 sm:py-12">
+      <div className="max-w-5xl mx-auto px-4">
+        <OrderConfirmationHeader order={order} labels={l} locale={locale} />
+
+        <div className="mb-6 mt-6">
+          <OrderTimeline
+            fulfillmentStatus={deriveFulfillmentStatus(order.fulfillments)}
+            labels={l}
+          />
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
+          <div className="lg:col-span-3">
+            <div className="bg-card rounded-xl p-5 sm:p-6 shadow-sm">
+              <OrderItemsList
+                items={displayItems}
+                currencyCode={order.currency_code}
+                labels={l}
+              />
+              <OrderTotals
+                totals={totals}
+                currencyCode={order.currency_code}
+                items={displayItems}
+                labels={l}
+                codFeeLabel={codFeeLabel}
+              />
+            </div>
+          </div>
+
+          <div className="lg:col-span-2 flex flex-col gap-4">
+            <OrderAddressCard order={order} labels={l} />
+            <OrderDeliveryCard
+              order={order}
+              shippingMethod={shippingMethod}
+              currencyCode={order.currency_code}
+              labels={l}
+            />
+            <OrderPaymentCard
+              providerId={paymentProviderId}
+              cardLast4={cardLast4}
+              labels={l}
+            />
+            <OrderHelpSection
+              labels={l}
+              contactHref={contactHref}
+              returnsHref={returnsHref}
+            />
+          </div>
+        </div>
+
+        <div className="text-center mt-8">
+          <Link
+            href={storeHref}
+            className="inline-flex items-center gap-2 px-6 py-3 bg-foreground text-card text-sm font-semibold rounded-xl hover:opacity-90 active:opacity-100 transition-opacity"
+          >
+            <ChevronLeft className="w-4 h-4" />
+            {l.continueShopping}
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/** Re-exported so template callers can type their page data without extra imports. */
+export type { StoreOrderDetail }
+
+export { type OrderCompletedTemplateProps }

package/src/order/order-confirmation-header.tsx

@@ -0,0 +1,65 @@
+import { Check } from "lucide-react"
+import { defaultOrderLabels, type OrderLabels } from "./labels"
+
+/**
+ * Confirmation hero (check mark + order number + date). Ported from
+ * `@1click/ui/src/order/order-confirmation-header.tsx` (v2.3.1); data
+ * seam: structural pick instead of Medusa's `StoreOrder` — both barter's
+ * `StoreOrderDetail` and `completeCart()`'s `CompletedOrder` satisfy it.
+ */
+export interface OrderHeaderData {
+  display_id?: number | null
+  email: string | null
+  created_at: string
+  [key: string]: unknown
+}
+
+type OrderConfirmationHeaderProps = {
+  order: OrderHeaderData
+  labels?: OrderLabels
+  locale?: string
+}
+
+export function OrderConfirmationHeader({
+  order,
+  labels,
+  locale = "en-US",
+}: OrderConfirmationHeaderProps) {
+  const l = { ...defaultOrderLabels, ...labels }
+  const orderDate = new Date(order.created_at).toLocaleDateString(locale, {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  })
+
+  return (
+    <div className="text-center pt-8 pb-4 sm:pt-10 sm:pb-5">
+      <div className="mx-auto mb-5 w-[72px] h-[72px] rounded-full bg-success flex items-center justify-center">
+        <Check className="w-9 h-9 text-white" strokeWidth={2.5} />
+      </div>
+
+      <h1 className="text-2xl sm:text-3xl font-bold text-foreground tracking-tight mb-2">
+        {l.orderConfirmed}
+      </h1>
+      <p className="text-sm text-muted-foreground mb-6">
+        {l.confirmationSent}{" "}
+        <span className="font-medium text-foreground">{order.email}</span>
+      </p>
+
+      <div className="flex items-center justify-center gap-3 sm:gap-4">
+        <div className="flex items-center gap-2 px-4 py-2 bg-muted rounded-lg">
+          <span className="text-xs text-muted-foreground">{l.orderNumber}</span>
+          <span className="text-sm font-semibold text-foreground tabular-nums">
+            #{order.display_id}
+          </span>
+        </div>
+        <div className="flex items-center gap-2 px-4 py-2 bg-muted rounded-lg">
+          <span className="text-xs text-muted-foreground">{l.orderDate}</span>
+          <span className="text-sm font-medium text-foreground">{orderDate}</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export { type OrderConfirmationHeaderProps }

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

@@ -0,0 +1,258 @@
+import { ExternalLink, MapPin, PackageSearch, Truck } from "lucide-react"
+import { DualPrice } from "../lib/dual-price"
+import type { StoreOrderFulfillment } from "../api/orders"
+import { defaultOrderLabels, type OrderLabels } from "./labels"
+
+/**
+ * Delivery card: pickup point / address, shipping method row, and — new in
+ * the barter port — the fulfillment tracking labels. Ported from
+ * `@1click/ui/src/order/order-delivery-card.tsx` (v2.3.1) with these seam
+ * translations:
+ *
+ *  - Medusa's `order.shipping_methods[0]` embed does not exist on barter's
+ *    `StoreOrderDetail`; the method comes via the `shippingMethod` prop
+ *    (structural — `api/carts` `CartShippingMethod` from the decorated
+ *    cart on the confirmation page satisfies it; `data` still carries the
+ *    fulfillment-option id used for the pickup detection below).
+ *  - `order.fulfillments[].fulfillment.labels` (tracking_number /
+ *    tracking_url) ARE on the barter surface (docs/storefront/orders.md);
+ *    `pickTrackingLabels()` selects the renderable ones and the card shows
+ *    them under a `labels.tracking` heading.
+ *  - Pickup detection preserved verbatim: `metadata.econt_office_code` (the
+ *    Econt-office selector writes cart metadata, copied to the order) or a
+ *    stable fulfillment-option id. Prefer the id over name parsing:
+ *    "До точен адрес с ЕКОНТ" contains "еконт" but is address delivery,
+ *    not pickup — the id disambiguates cleanly (production fix).
+ */
+
+/** Structural shipping-method display shape (CartShippingMethod fits). */
+export interface ShippingMethodDisplay {
+  name?: string | null
+  /** SERVER-computed method total (falls back to `amount`). */
+  total?: number | null
+  amount?: number | null
+  data?: Record<string, unknown> | null
+  [key: string]: unknown
+}
+
+export interface TrackingLabel {
+  tracking_number: string
+  tracking_url: string | null
+}
+
+/**
+ * Pure selection of renderable tracking labels from the order's
+ * fulfillments: skips canceled fulfillments, drops labels without a
+ * tracking number, and dedupes by tracking number (a re-printed label
+ * must not render twice). Unit-tested.
+ */
+export function pickTrackingLabels(
+  fulfillments: readonly StoreOrderFulfillment[] | null | undefined
+): TrackingLabel[] {
+  if (!fulfillments?.length) return []
+  const seen = new Set<string>()
+  const out: TrackingLabel[] = []
+  for (const row of fulfillments) {
+    const f = row?.fulfillment
+    if (!f || f.canceled_at) continue
+    for (const label of f.labels ?? []) {
+      const num = label?.tracking_number
+      if (!num || seen.has(num)) continue
+      seen.add(num)
+      out.push({ tracking_number: num, tracking_url: label.tracking_url ?? null })
+    }
+  }
+  return out
+}
+
+export interface OrderDeliveryData {
+  metadata?: Record<string, unknown> | null
+  shipping_address?: {
+    address_1?: string | null
+    address_2?: string | null
+    city?: string | null
+    postal_code?: string | null
+    country_code?: string | null
+    [key: string]: unknown
+  } | null
+  fulfillments?: StoreOrderFulfillment[] | null
+  [key: string]: unknown
+}
+
+type OrderDeliveryCardProps = {
+  order: OrderDeliveryData
+  /** The chosen shipping method (from the decorated cart / checkout state). */
+  shippingMethod?: ShippingMethodDisplay | null
+  currencyCode: string
+  labels?: Pick<OrderLabels, "delivery" | "free" | "tracking">
+}
+
+export function OrderDeliveryCard({
+  order,
+  shippingMethod,
+  currencyCode,
+  labels,
+}: OrderDeliveryCardProps) {
+  const l = { ...defaultOrderLabels, ...labels }
+  const method = shippingMethod ?? null
+  const metadata = order.metadata || {}
+  const addr = order.shipping_address
+  const tracking = pickTrackingLabels(order.fulfillments)
+
+  const hasEcontMetadata = !!metadata.econt_office_code
+  // Prefer the stable fulfillment-option id (shipping_option data.id)
+  // over name parsing — see the header comment.
+  const fulfillmentOptionId =
+    ((method?.data as { id?: string } | undefined | null)?.id as
+      | string
+      | undefined) ?? null
+  const isPickupById =
+    fulfillmentOptionId === "econt-office" ||
+    fulfillmentOptionId === "boxnow-locker"
+  const isPickup = hasEcontMetadata || isPickupById
+
+  return (
+    <div className="bg-card rounded-xl p-5 shadow-sm">
+      <h3 className="text-sm font-semibold text-foreground mb-3">
+        {l.delivery}
+      </h3>
+
+      {isPickup ? (
+        <div className="space-y-3">
+          {hasEcontMetadata ? (
+            <div className="flex items-start gap-2.5">
+              <div className="w-9 h-9 rounded-lg bg-success/10 flex items-center justify-center flex-shrink-0">
+                <MapPin className="w-[18px] h-[18px] text-success" />
+              </div>
+              <div>
+                <p className="text-sm font-medium text-foreground">
+                  {String(metadata.econt_office_name ?? "")}
+                </p>
+                <p className="text-xs text-muted-foreground mt-0.5">
+                  {String(metadata.econt_office_address ?? "")}
+                  {metadata.econt_office_city
+                    ? `, ${String(metadata.econt_office_city)}`
+                    : ""}
+                </p>
+                {Boolean(metadata.econt_office_phone) && (
+                  <p className="text-xs text-muted-foreground mt-0.5">
+                    {String(metadata.econt_office_phone)}
+                  </p>
+                )}
+              </div>
+            </div>
+          ) : (
+            <div className="flex items-start gap-2.5">
+              <div className="w-9 h-9 rounded-lg bg-success/10 flex items-center justify-center flex-shrink-0">
+                <MapPin className="w-[18px] h-[18px] text-success" />
+              </div>
+              <p className="text-sm font-medium text-foreground">
+                {method?.name}
+              </p>
+            </div>
+          )}
+
+          {method && (
+            <>
+              <div className="h-px bg-border" />
+              <ShippingMethodRow
+                method={method}
+                currencyCode={currencyCode}
+                labels={l}
+              />
+            </>
+          )}
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {addr && (
+            <div className="space-y-1 text-sm text-muted-foreground">
+              <p>
+                {addr.address_1}
+                {addr.address_2 ? `, ${addr.address_2}` : ""}
+              </p>
+              <p>
+                {addr.postal_code} {addr.city}
+              </p>
+              <p>{addr.country_code?.toUpperCase()}</p>
+            </div>
+          )}
+          {method && (
+            <>
+              <div className="h-px bg-border" />
+              <ShippingMethodRow
+                method={method}
+                currencyCode={currencyCode}
+                labels={l}
+              />
+            </>
+          )}
+        </div>
+      )}
+
+      {tracking.length > 0 && (
+        <div className="mt-3 space-y-2">
+          <div className="h-px bg-border" />
+          <p className="text-xs font-medium text-muted-foreground">
+            {l.tracking}
+          </p>
+          {tracking.map((t) => (
+            <div key={t.tracking_number} className="flex items-center gap-2.5">
+              <div className="w-9 h-9 rounded-lg bg-muted flex items-center justify-center flex-shrink-0">
+                <PackageSearch className="w-[18px] h-[18px] text-muted-foreground" />
+              </div>
+              {t.tracking_url ? (
+                <a
+                  href={t.tracking_url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-1.5 text-sm text-foreground underline underline-offset-2 hover:text-foreground/80 tabular-nums"
+                >
+                  {t.tracking_number}
+                  <ExternalLink className="w-3.5 h-3.5" />
+                </a>
+              ) : (
+                <span className="text-sm text-foreground tabular-nums">
+                  {t.tracking_number}
+                </span>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function ShippingMethodRow({
+  method,
+  currencyCode,
+  labels,
+}: {
+  method: ShippingMethodDisplay
+  currencyCode: string
+  labels: Pick<OrderLabels, "free">
+}) {
+  const amount = Number(method.total ?? method.amount ?? 0)
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-2.5">
+        <div className="w-9 h-9 rounded-lg bg-muted flex items-center justify-center">
+          <Truck className="w-[18px] h-[18px] text-muted-foreground" />
+        </div>
+        <span className="text-sm text-foreground">{method.name}</span>
+      </div>
+      {amount === 0 ? (
+        <span className="text-sm font-medium text-success">{labels.free}</span>
+      ) : (
+        <DualPrice
+          amount={amount}
+          currencyCode={currencyCode}
+          className="text-sm font-medium text-foreground"
+        />
+      )}
+    </div>
+  )
+}
+
+export { type OrderDeliveryCardProps }

package/src/order/order-help-section.tsx

@@ -0,0 +1,47 @@
+import Link from "next/link"
+import { MessageSquare, Undo2 } from "lucide-react"
+import { defaultOrderLabels, type OrderLabels } from "./labels"
+
+/**
+ * "Need help?" links card. Verbatim port of
+ * `@1click/ui/src/order/order-help-section.tsx` (v2.3.1) — no data seam.
+ */
+type OrderHelpSectionProps = {
+  labels?: Pick<OrderLabels, "needHelp" | "contactUs" | "returnsExchanges">
+  contactHref?: string
+  returnsHref?: string
+}
+
+export function OrderHelpSection({
+  labels,
+  contactHref = "/contact",
+  returnsHref = "/returns",
+}: OrderHelpSectionProps) {
+  const l = { ...defaultOrderLabels, ...labels }
+
+  return (
+    <div className="bg-card rounded-xl p-5 shadow-sm">
+      <h3 className="text-sm font-semibold text-foreground mb-3">
+        {l.needHelp}
+      </h3>
+      <div className="flex flex-col gap-2">
+        <Link
+          href={contactHref}
+          className="flex items-center gap-2.5 text-sm text-muted-foreground hover:text-foreground transition-colors py-1"
+        >
+          <MessageSquare className="w-4 h-4" />
+          {l.contactUs}
+        </Link>
+        <Link
+          href={returnsHref}
+          className="flex items-center gap-2.5 text-sm text-muted-foreground hover:text-foreground transition-colors py-1"
+        >
+          <Undo2 className="w-4 h-4" />
+          {l.returnsExchanges}
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+export { type OrderHelpSectionProps }