@cartbase/storefront 0.1.0

package/src/cart-drawer/notes.tsx

@@ -0,0 +1,131 @@
+"use client"
+
+import { useState } from "react"
+
+import { cn } from "../lib/utils"
+import { useCartDrawer } from "./context"
+
+/**
+ * CartNotes — pill buttons to open gift/order note textareas.
+ *
+ * Ported from `@1click/ui/src/cart-drawer/notes.tsx` (v2.3.1);
+ * originally extracted from mindpages-storefront
+ * src/modules/cart-drawer/cart-notes.tsx. Tokens applied. Icons +
+ * placeholders pulled from `labels` context. Persist notes via `onSave`
+ * — e.g. `updateCart(client, cartId, { metadata: { ...cart.metadata,
+ * gift_note: value } })` (`@cartbase/storefront/api/carts`). NOTE: the update
+ * route REPLACES the metadata object wholesale (no server-side merge) —
+ * always spread the current `cart.metadata` or you clobber other keys
+ * (UTM attribution, gift-wrap flags…). Cart metadata is copied onto the
+ * order at complete.
+ */
+
+type NoteType = "gift" | "order"
+
+type CartNotesProps = {
+  types?: NoteType[]
+  onSave?: (type: NoteType, value: string) => void
+}
+
+const iconGift = (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.3"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <rect x="1.5" y="5" width="11" height="7.5" rx="1" />
+    <rect x="0.5" y="3" width="13" height="2.5" rx="0.5" />
+    <path d="M7 3v9.5" />
+  </svg>
+)
+
+const iconOrder = (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.3"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M8.5 1.5H4a1 1 0 00-1 1v9a1 1 0 001 1h6a1 1 0 001-1V4L8.5 1.5z" />
+    <path d="M8.5 1.5V4H11M5.5 7h3M5.5 9.5h3" />
+  </svg>
+)
+
+export function CartNotes({
+  types = ["gift", "order"],
+  onSave,
+}: CartNotesProps) {
+  const { labels } = useCartDrawer()
+  const [activeNote, setActiveNote] = useState<NoteType | null>(null)
+  const [values, setValues] = useState<Record<NoteType, string>>({
+    gift: "",
+    order: "",
+  })
+
+  const noteConfig: Record<
+    NoteType,
+    { label: string; placeholder: string; icon: React.ReactNode }
+  > = {
+    gift: {
+      label: labels.giftNote,
+      placeholder: labels.giftNotePlaceholder,
+      icon: iconGift,
+    },
+    order: {
+      label: labels.orderNote,
+      placeholder: labels.orderNotePlaceholder,
+      icon: iconOrder,
+    },
+  }
+
+  return (
+    <div className="px-5 sm:px-6 py-3">
+      <div className="flex gap-2">
+        {types.map((type) => {
+          const config = noteConfig[type]
+          const active = activeNote === type
+          return (
+            <button
+              key={type}
+              type="button"
+              onClick={() => setActiveNote(active ? null : type)}
+              className={cn(
+                "flex items-center gap-1.5 text-xs font-medium px-4 py-2.5 min-h-[44px] rounded-xl border transition-colors active:scale-[0.97]",
+                active
+                  ? "border-text-base bg-foreground text-card"
+                  : "border-border text-muted-foreground hover:border-text-muted active:bg-muted"
+              )}
+            >
+              {config.icon}
+              {config.label}
+            </button>
+          )
+        })}
+      </div>
+
+      {activeNote && (
+        <div className="mt-3">
+          <textarea
+            value={values[activeNote]}
+            onChange={(e) =>
+              setValues({ ...values, [activeNote]: e.target.value })
+            }
+            onBlur={() => onSave?.(activeNote, values[activeNote])}
+            placeholder={noteConfig[activeNote].placeholder}
+            rows={3}
+            className="w-full text-[14px] sm:text-sm border border-border rounded-xl px-4 py-3 resize-none focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary placeholder:text-muted-foreground text-foreground bg-card"
+          />
+        </div>
+      )}
+    </div>
+  )
+}

package/src/cart-drawer/payment-badges.tsx

@@ -0,0 +1,96 @@
+"use client"
+
+import type { ReactNode } from "react"
+
+/**
+ * CartPaymentBadges — row of small payment-method logos shown near the
+ * checkout button.
+ *
+ * Ported from `@1click/ui/src/cart-drawer/payment-badges.tsx` (v2.3.1);
+ * originally extracted from mindpages-storefront
+ * src/modules/cart-drawer/cart-payment-badges.tsx.
+ * Inline SVGs are kept so stores don't need to provide asset files for the
+ * default set, but stores can pass their own badges map via the `badges`
+ * prop to override.
+ */
+
+type BadgeKey = "visa" | "mastercard" | "applepay" | "googlepay" | "amex"
+
+const defaultBadges: Record<BadgeKey, ReactNode> = {
+  visa: (
+    <svg viewBox="0 0 48 32" width="42" height="28" fill="none">
+      <rect width="48" height="32" rx="4" fill="#fff" stroke="#e4e4e7" strokeWidth="1" />
+      <path
+        d="M20.3 21h-2.7l1.7-10.5h2.7L20.3 21zm-4.7 0l-2.5-7.2-.3-1.5c-.5-1.3-1.7-1.8-1.7-1.8h-.1l-1 .2L7 21h2.8l.6-1.5h3.4l.3 1.5h2.5zm-3.2-3.6l1.4-3.8.8 3.8h-2.2zM32 10.5L29.3 21h-2.5l1.5-8.2-.1-.2-2 8.4h-2l-2-8.4v.3L20.7 21h-2.4l2.8-10.5h3.4l1.7 7.2 1.7-7.2H32zm8.8 0L38 21h-2.5l2.8-10.5h2.5z"
+        fill="#1a1f71"
+      />
+    </svg>
+  ),
+  mastercard: (
+    <svg viewBox="0 0 48 32" width="42" height="28" fill="none">
+      <rect width="48" height="32" rx="4" fill="#fff" stroke="#e4e4e7" strokeWidth="1" />
+      <circle cx="19" cy="16" r="8" fill="#eb001b" />
+      <circle cx="29" cy="16" r="8" fill="#f79e1b" />
+      <path d="M24 9.8a8 8 0 010 12.4 8 8 0 000-12.4z" fill="#ff5f00" />
+    </svg>
+  ),
+  applepay: (
+    <svg viewBox="0 0 48 32" width="42" height="28" fill="none">
+      <rect width="48" height="32" rx="4" fill="#000" />
+      <g fill="#fff">
+        <path d="M15.2 11.8c-.6.7-1.5 1.2-2.4 1.1-.1-1 .4-2 .9-2.6.6-.7 1.5-1.2 2.3-1.2.1 1-.3 2-.8 2.7zm.8 1.4c-1.3-.1-2.5.8-3.1.8s-1.6-.7-2.7-.7c-1.4 0-2.7.8-3.4 2.1-1.4 2.5-.4 6.2 1 8.2.7 1 1.5 2.1 2.6 2s1.4-.7 2.7-.7 1.6.7 2.7.7 1.8-1 2.5-2c.8-1.1 1.1-2.2 1.1-2.3-1.2-.5-2-1.8-2-3.3 0-1.3.7-2.5 1.8-3.1-.7-1-1.8-1.7-3.2-1.7z" />
+        <path d="M25 12.5v10.8h1.7v-3.7h2.3c2.1 0 3.6-1.5 3.6-3.6s-1.5-3.5-3.5-3.5H25zm1.7 1.4h1.9c1.5 0 2.3.8 2.3 2.1s-.8 2.1-2.3 2.1h-1.9v-4.2zm8.8 9.5c1.1 0 2.1-.5 2.5-1.4h0v1.3H39.6v-5.2c0-1.8-1.4-2.9-3.5-2.9-2 0-3.4 1.1-3.4 2.8h1.6c.1-.8.9-1.4 1.8-1.4 1.2 0 1.8.5 1.8 1.5v.7l-2.4.1c-2.2.1-3.4 1-3.4 2.6 0 1.6 1.2 2.7 2.9 2.7v-.8zm.4-1.3c-1 0-1.7-.5-1.7-1.3 0-.8.6-1.3 1.8-1.4l2.1-.1v.7c0 1.2-1 2.1-2.2 2.1z" />
+      </g>
+    </svg>
+  ),
+  googlepay: (
+    <svg viewBox="0 0 48 32" width="42" height="28" fill="none">
+      <rect width="48" height="32" rx="4" fill="#fff" stroke="#e4e4e7" strokeWidth="1" />
+      <path
+        d="M23.5 16.7v3.1h-1v-7.6h2.7c.7 0 1.2.2 1.7.6.5.4.7.9.7 1.5s-.2 1.1-.7 1.5c-.5.4-1 .6-1.7.6h-1.7zm0-3.5v2.5h1.7c.4 0 .8-.2 1.1-.4.3-.3.4-.6.4-1s-.1-.7-.4-1c-.3-.3-.6-.4-1.1-.4h-1.7z"
+        fill="#3c4043"
+      />
+      <path
+        d="M30.6 14.2c.7 0 1.3.2 1.8.6.4.4.7 1 .7 1.7v3.3h-1v-.7c-.4.6-.9.9-1.6.9-.6 0-1.1-.2-1.5-.5-.4-.3-.6-.8-.6-1.3 0-.5.2-1 .5-1.3.4-.3.9-.5 1.5-.5.6 0 1.1.2 1.4.5v-.3c0-.4-.2-.7-.4-.9-.3-.2-.6-.4-1-.4-.6 0-1 .2-1.3.7l-.8-.5c.5-.7 1.1-1 2-1h.3zm-1 4.6c.3.2.6.3 1 .3s.7-.1 1-.3c.3-.2.4-.5.4-.8s-.1-.6-.4-.8c-.3-.2-.6-.3-1-.3s-.7.1-1 .3c-.3.2-.4.5-.4.8s.2.6.4.8z"
+        fill="#3c4043"
+      />
+      <path d="M37 14.4l-2.4 5.5h-1l.9-1.9-1.6-3.6h1.1l1 2.5 1-2.5H37z" fill="#3c4043" />
+      <path d="M18.3 16c0-.3 0-.6-.1-.9h-4.6v1.7h2.7c-.1.6-.4 1.1-.9 1.4v1.2h1.5c.9-.8 1.4-2 1.4-3.4z" fill="#4285f4" />
+      <path d="M13.6 19.7c1.2 0 2.2-.4 3-1.1l-1.5-1.2c-.4.3-.9.4-1.5.4-1.2 0-2.1-.8-2.5-1.8H9.7v1.2c.7 1.5 2.2 2.5 3.9 2.5z" fill="#34a853" />
+      <path d="M11.1 16c0-.3.1-.7.2-1v-1.2H9.7c-.4.7-.6 1.4-.6 2.2s.2 1.5.6 2.2l1.6-1.2c-.1-.3-.2-.7-.2-1z" fill="#fbbc04" />
+      <path d="M13.6 12.2c.7 0 1.3.2 1.8.7l1.3-1.3c-.8-.8-1.9-1.2-3.1-1.2-1.7 0-3.2 1-3.9 2.5l1.6 1.2c.4-1.1 1.3-1.9 2.3-1.9z" fill="#ea4335" />
+    </svg>
+  ),
+  amex: (
+    <svg viewBox="0 0 48 32" width="42" height="28" fill="none">
+      <rect width="48" height="32" rx="4" fill="#006fcf" />
+      <text x="24" y="20" fill="#fff" fontSize="10" fontWeight="700" textAnchor="middle" fontFamily="Arial, sans-serif">
+        AMEX
+      </text>
+    </svg>
+  ),
+}
+
+type CartPaymentBadgesProps = {
+  methods?: BadgeKey[]
+  badges?: Partial<Record<BadgeKey, ReactNode>>
+}
+
+export function CartPaymentBadges({
+  methods = ["visa", "mastercard", "googlepay", "applepay"],
+  badges,
+}: CartPaymentBadgesProps) {
+  const resolved = { ...defaultBadges, ...badges }
+  return (
+    <div className="flex items-center justify-center gap-2 px-5 py-3">
+      {methods.map((method) => (
+        <div
+          key={method}
+          className="opacity-70 hover:opacity-100 transition-opacity"
+        >
+          {resolved[method]}
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/cart-drawer/promo-banner.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import { cn } from "../lib/utils"
+
+/**
+ * Cart drawer promo banner — tiny top bar with a message and a variant.
+ *
+ * Ported from `@1click/ui/src/cart-drawer/promo-banner.tsx` (v2.3.1);
+ * originally extracted from mindpages-storefront
+ * src/modules/cart-drawer/cart-promo-banner.tsx.
+ */
+
+type CartPromoBannerProps = {
+  message: string
+  variant?: "info" | "success" | "warning"
+  className?: string
+}
+
+const variantStyles = {
+  info: "bg-foreground text-card",
+  success: "bg-success/10 text-success",
+  warning: "bg-warning/10 text-warning",
+}
+
+export function CartPromoBanner({
+  message,
+  variant = "warning",
+  className,
+}: CartPromoBannerProps) {
+  if (!message) return null
+
+  return (
+    <div
+      className={cn(
+        "px-6 py-2.5 text-[13px] font-medium flex-shrink-0 text-center",
+        variantStyles[variant],
+        className
+      )}
+    >
+      {message}
+    </div>
+  )
+}

package/src/cart-drawer/rewards-points.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import { useState } from "react"
+
+import { cn } from "../lib/utils"
+import { useCartDrawer } from "./context"
+
+/**
+ * CartRewardsPoints — expandable row that previews how many reward points
+ * the current cart earns.
+ *
+ * Ported from `@1click/ui/src/cart-drawer/rewards-points.tsx` (v2.3.1);
+ * originally extracted from mindpages-storefront
+ * src/modules/cart-drawer/cart-rewards-points.tsx.
+ */
+
+type CartRewardsPointsProps = {
+  points: number
+  label?: string
+  details?: string
+}
+
+export function CartRewardsPoints({
+  points,
+  label,
+  details,
+}: CartRewardsPointsProps) {
+  const { labels } = useCartDrawer()
+  const [expanded, setExpanded] = useState(false)
+
+  if (points <= 0) return null
+
+  return (
+    <div className="mx-5 sm:mx-6 my-3">
+      <button
+        type="button"
+        onClick={() => setExpanded(!expanded)}
+        className="w-full flex items-center gap-3 px-4 py-3 min-h-[44px] rounded-xl bg-success/10 text-success hover:bg-success/20 active:bg-success/20 transition-colors"
+      >
+        <svg
+          width="18"
+          height="18"
+          viewBox="0 0 18 18"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="flex-shrink-0"
+        >
+          <path d="M9 1l2.47 5.01 5.53.8-4 3.9.94 5.49L9 13.76l-4.94 2.44.94-5.49-4-3.9 5.53-.8L9 1z" />
+        </svg>
+        <span className="text-[13px] sm:text-sm font-medium flex-1 text-left">
+          {label || labels.estimatedRewardPoints}:{" "}
+          <span className="font-bold">{points.toLocaleString()}</span>
+        </span>
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 14 14"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className={cn("transition-transform", expanded && "rotate-180")}
+        >
+          <path d="M3.5 5.5l3.5 3 3.5-3" />
+        </svg>
+      </button>
+      {expanded && details && (
+        <div className="px-4 py-2.5 text-xs text-success leading-relaxed">
+          {details}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/cart-drawer/sticky-footer.tsx

@@ -0,0 +1,73 @@
+"use client"
+
+import Link from "next/link"
+
+import { DualPrice } from "../lib/dual-price"
+import { productTotal } from "../lib/cart-helpers"
+import { useCartDrawer } from "./context"
+
+/**
+ * CartStickyFooter — bottom-of-drawer subtotal + checkout CTA with
+ * iPhone home-indicator safe-area padding.
+ *
+ * Ported from `@1click/ui/src/cart-drawer/sticky-footer.tsx` (v2.3.1);
+ * originally extracted from mindpages-storefront
+ * src/modules/cart-drawer/cart-sticky-footer.tsx. Amounts EUR major units.
+ */
+
+export function CartStickyFooter() {
+  const { cart, close, labels, hrefs } = useCartDrawer()
+  if (!cart || !cart.items?.length) return null
+
+  // Drawer is pre-checkout context — never read `cart.total` here.
+  // `cart.total` includes shipping/tax/COD fee, all of which are
+  // checkout-context state that must not leak into the shopping
+  // drawer. Sum of product line totals only.
+  const total = productTotal(cart.items)
+  const currencyCode = cart.currency_code
+
+  return (
+    <div
+      className="flex-shrink-0 bg-card px-5 sm:px-6 pt-4 sm:pt-5 relative z-10"
+      style={{
+        boxShadow: "0 -4px 12px rgba(0,0,0,0.04)",
+        paddingBottom: "max(1.25rem, env(safe-area-inset-bottom, 1.25rem))",
+      }}
+    >
+      <div className="flex items-baseline justify-between mb-1">
+        <span className="text-[15px] font-bold text-foreground">
+          {labels.subtotal}
+        </span>
+        <DualPrice
+          amount={total}
+          currencyCode={currencyCode}
+          className="text-xl font-bold text-foreground tracking-tight"
+        />
+      </div>
+      <p className="text-[11px] text-muted-foreground mb-3.5 sm:mb-4">
+        {labels.taxAndShipping}
+      </p>
+      <Link href={hrefs.checkout} onClick={close}>
+        <button
+          type="button"
+          className="w-full h-[52px] bg-foreground hover:bg-foreground/90 active:bg-foreground/95 text-card text-[15px] sm:text-sm font-semibold rounded-[2px] flex items-center justify-center gap-2.5 transition-colors active:scale-[0.98]"
+        >
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <rect x="3" y="6" width="10" height="8" rx="1.5" />
+            <path d="M5.5 6V4.5a2.5 2.5 0 015 0V6" />
+          </svg>
+          {labels.secureCheckout}
+        </button>
+      </Link>
+    </div>
+  )
+}

package/src/cart-drawer/summary-breakdown.tsx

@@ -0,0 +1,196 @@
+"use client"
+
+import type { AppliedGiftCard } from "../api/carts"
+import { convertToLocale } from "../lib/money"
+import { useCartDrawer } from "./context"
+
+/**
+ * CartSummaryBreakdown — full totals breakdown for the drawer (or a cart
+ * page): subtotal, discount, shipping, tax, COD fee, total, applied
+ * gift-card tender and the remainder. Alternative to the compact
+ * `CartStickyFooter` (which deliberately shows a product-only subtotal in
+ * pre-checkout context).
+ *
+ * Ported from `@1click/ui/src/cart-drawer/summary-breakdown.tsx` (v2.3.1)
+ * and EXPANDED for barter: the source rendered a client-summed product
+ * subtotal only; barter's decorated cart carries server-computed totals on
+ * every read (`subtotal`, `discount_total`, `shipping_total`, `tax_total`,
+ * `cod_fee_total`/`cod_fee_label`, `gift_cards[]`, `gift_card_total`,
+ * `gift_card_remainder`, `total` — all EUR major units), so this component
+ * renders EXACTLY what the server returns and computes no money. The only
+ * client-side transformation is the display sign on deductions.
+ *
+ * Row rules (see `selectSummaryRows`):
+ * - discount / tax / COD-fee rows appear only when their total is > 0.
+ * - COD fee renders the server's `cod_fee_label` (labels.codFee fallback).
+ * - shipping renders the amount once a shipping method is set (0 → FREE);
+ *   before that it shows "calculated at checkout".
+ * - gift-card tender renders one row per applied card (masked `last4`,
+ *   negative display) plus the `gift_card_remainder` row — the amount the
+ *   remainder provider actually charges. A depleted card stays listed at 0
+ *   (server keeps it in `gift_cards` at amount 0).
+ */
+
+/** The decorated-cart fields the breakdown consumes (structural subset). */
+export type SummaryCartTotals = {
+  subtotal: number
+  discount_total: number
+  shipping_total: number
+  tax_total: number
+  total: number
+  cod_fee_total?: number
+  cod_fee_label?: string | null
+  gift_cards?: AppliedGiftCard[]
+  gift_card_total?: number
+  gift_card_remainder?: number
+  shipping_methods?: ReadonlyArray<unknown>
+}
+
+export type SummaryRow =
+  | { kind: "subtotal"; amount: number }
+  | { kind: "discount"; amount: number }
+  | { kind: "shipping"; amount: number }
+  | { kind: "shipping_pending" }
+  | { kind: "tax"; amount: number }
+  | { kind: "cod_fee"; amount: number; label: string | null }
+  | { kind: "total"; amount: number }
+  | { kind: "gift_card"; last4: string; amount: number }
+  | { kind: "remainder"; amount: number }
+
+/**
+ * Pure row selection over the decorated-cart totals — exported for unit
+ * tests. Amounts pass through verbatim (server truth); deduction rows
+ * (discount, gift cards) carry a negated amount for display only.
+ */
+export function selectSummaryRows(cart: SummaryCartTotals): SummaryRow[] {
+  const rows: SummaryRow[] = []
+  rows.push({ kind: "subtotal", amount: cart.subtotal })
+
+  if ((cart.discount_total ?? 0) > 0) {
+    rows.push({ kind: "discount", amount: -cart.discount_total })
+  }
+
+  if (cart.shipping_methods && cart.shipping_methods.length > 0) {
+    rows.push({ kind: "shipping", amount: cart.shipping_total })
+  } else {
+    rows.push({ kind: "shipping_pending" })
+  }
+
+  if ((cart.tax_total ?? 0) > 0) {
+    rows.push({ kind: "tax", amount: cart.tax_total })
+  }
+
+  if ((cart.cod_fee_total ?? 0) > 0) {
+    rows.push({
+      kind: "cod_fee",
+      amount: cart.cod_fee_total!,
+      label: cart.cod_fee_label ?? null,
+    })
+  }
+
+  rows.push({ kind: "total", amount: cart.total })
+
+  if (cart.gift_cards && cart.gift_cards.length > 0) {
+    for (const card of cart.gift_cards) {
+      // `|| 0` normalizes -0 (a depleted card at amount 0) so Intl never
+      // renders a stray "-€0.00".
+      rows.push({ kind: "gift_card", last4: card.last4, amount: -card.amount || 0 })
+    }
+    rows.push({ kind: "remainder", amount: cart.gift_card_remainder ?? 0 })
+  }
+
+  return rows
+}
+
+export function CartSummaryBreakdown() {
+  const { cart, labels } = useCartDrawer()
+  if (!cart) return null
+
+  const currencyCode = cart.currency_code
+  const money = (amount: number) =>
+    convertToLocale({ amount, currency_code: currencyCode })
+  const rows = selectSummaryRows(cart)
+
+  return (
+    <div className="px-6 py-5 space-y-2">
+      {rows.map((row, i) => {
+        switch (row.kind) {
+          case "subtotal":
+            return (
+              <div key={i} className="flex justify-between items-center text-[13px] text-muted-foreground">
+                <span>{labels.subtotal}</span>
+                <span className="tabular-nums">{money(row.amount)}</span>
+              </div>
+            )
+          case "discount":
+            return (
+              <div key={i} className="flex justify-between items-center text-[13px] text-success">
+                <span>{labels.discount}</span>
+                <span className="tabular-nums">{money(row.amount)}</span>
+              </div>
+            )
+          case "shipping":
+            return (
+              <div key={i} className="flex justify-between items-center text-[13px] text-muted-foreground">
+                <span>{labels.shipping}</span>
+                <span className="tabular-nums">
+                  {row.amount === 0 ? labels.free : money(row.amount)}
+                </span>
+              </div>
+            )
+          case "shipping_pending":
+            return (
+              <div key={i} className="flex justify-between items-center text-[13px] text-muted-foreground">
+                <span>{labels.shipping}</span>
+                <span>{labels.calculatedAtCheckout}</span>
+              </div>
+            )
+          case "tax":
+            return (
+              <div key={i} className="flex justify-between items-center text-[13px] text-muted-foreground">
+                <span>{labels.tax}</span>
+                <span className="tabular-nums">{money(row.amount)}</span>
+              </div>
+            )
+          case "cod_fee":
+            return (
+              <div key={i} className="flex justify-between items-center text-[13px] text-muted-foreground">
+                <span>{row.label ?? labels.codFee}</span>
+                <span className="tabular-nums">{money(row.amount)}</span>
+              </div>
+            )
+          case "total":
+            return (
+              <div
+                key={i}
+                className="flex justify-between items-center pt-2 mt-1 border-t border-border"
+              >
+                <span className="text-[15px] font-bold text-foreground">
+                  {labels.total}
+                </span>
+                <span className="text-[17px] font-bold text-foreground tracking-tight tabular-nums">
+                  {money(row.amount)}
+                </span>
+              </div>
+            )
+          case "gift_card":
+            return (
+              <div key={i} className="flex justify-between items-center text-[13px] text-success">
+                <span>
+                  {labels.giftCard} ••{row.last4}
+                </span>
+                <span className="tabular-nums">{money(row.amount)}</span>
+              </div>
+            )
+          case "remainder":
+            return (
+              <div key={i} className="flex justify-between items-center text-[13px] font-semibold text-foreground">
+                <span>{labels.remainingToPay}</span>
+                <span className="tabular-nums">{money(row.amount)}</span>
+              </div>
+            )
+        }
+      })}
+    </div>
+  )
+}