@cartbase/storefront 0.1.2 → 0.3.0

package/src/cart-drawer/labels.ts

@@ -1,119 +1,119 @@
-/**
- * Cart drawer labels — default English copy.
- *
- * Every user-facing string in the cart drawer comes from a `CartDrawerLabels`
- * object. Stores override strings by passing a partial labels object to
- * `CartDrawerProvider`. English is the baseline; stores wanting Bulgarian,
- * German, etc. pass their own translations.
- *
- * Ported from `@1click/ui/src/cart-drawer/labels.ts` (v2.3.1). Barter
- * additions: the summary-breakdown row labels (`discount`, `tax`, `codFee`,
- * `giftCard`, `remainingToPay`) — the decorated cart carries
- * discount/tax/COD-fee/gift-card tender fields that the breakdown renders,
- * so the copy for those rows lives here too.
- */
-
-export type CartDrawerLabels = {
-  // Header
-  yourCart: string
-  item: string
-  items: string
-  closeCart: string
-
-  // Empty state
-  emptyCartTitle: string
-  emptyCartMessage: string
-  browseProducts: string
-
-  // Tiered progress
-  awayFromFreeShipping: string
-  allRewardsUnlocked: string
-
-  // Gift wrap / notes
-  addGiftWrap: string
-  giftNote: string
-  orderNote: string
-  giftNotePlaceholder: string
-  orderNotePlaceholder: string
-
-  // Rewards
-  estimatedRewardPoints: string
-
-  // Cross-sell
-  pairsWellWith: string
-  youllLoveThis: string
-  youMightAlsoLike: string
-  addToCart: string
-
-  // Summary / footer
-  subtotal: string
-  taxAndShipping: string
-  shipping: string
-  free: string
-  calculatedAtCheckout: string
-  total: string
-  secureCheckout: string
-  shippingAndTaxCalculatedAtCheckout: string
-
-  // Summary breakdown rows (barter decorated-cart fields)
-  discount: string
-  tax: string
-  /** Fallback only — the server's `cod_fee_label` wins when present. */
-  codFee: string
-  /** Prefix for an applied gift-card row; rendered as `<giftCard> ••1234`. */
-  giftCard: string
-  /** Label for `gift_card_remainder` — what the remainder provider charges. */
-  remainingToPay: string
-
-  // Continue shopping
-  continueShopping: string
-
-  // A11y / buttons
-  remove: string
-}
-
-export const defaultCartDrawerLabels: CartDrawerLabels = {
-  yourCart: "Your cart",
-  item: "item",
-  items: "items",
-  closeCart: "Close cart",
-
-  emptyCartTitle: "Your cart is empty",
-  emptyCartMessage: "You haven't added any products yet.",
-  browseProducts: "Browse products",
-
-  awayFromFreeShipping: "away from free shipping",
-  allRewardsUnlocked: "All rewards unlocked",
-
-  addGiftWrap: "Add gift wrapping",
-  giftNote: "Gift note",
-  orderNote: "Order note",
-  giftNotePlaceholder: "Add a personal message...",
-  orderNotePlaceholder: "Special instructions for this order...",
-
-  estimatedRewardPoints: "Estimated reward points",
-
-  pairsWellWith: "Pairs well with",
-  youllLoveThis: "You'll love this",
-  youMightAlsoLike: "You might also like",
-  addToCart: "Add",
-
-  subtotal: "Subtotal",
-  taxAndShipping: "VAT included. Shipping calculated at checkout.",
-  shipping: "Shipping",
-  free: "FREE",
-  calculatedAtCheckout: "Calculated at checkout",
-  total: "Total",
-  secureCheckout: "Checkout",
-  shippingAndTaxCalculatedAtCheckout: "Shipping and tax calculated at checkout",
-
-  discount: "Discount",
-  tax: "VAT",
-  codFee: "Cash on delivery fee",
-  giftCard: "Gift card",
-  remainingToPay: "Remaining to pay",
-
-  continueShopping: "Continue shopping",
-
-  remove: "Remove",
-}
+/**
+ * Cart drawer labels — default English copy.
+ *
+ * Every user-facing string in the cart drawer comes from a `CartDrawerLabels`
+ * object. Stores override strings by passing a partial labels object to
+ * `CartDrawerProvider`. English is the baseline; stores wanting Bulgarian,
+ * German, etc. pass their own translations.
+ *
+ * Ported from `@1click/ui/src/cart-drawer/labels.ts` (v2.3.1). Cartbase
+ * additions: the summary-breakdown row labels (`discount`, `tax`, `paymentMethodFee`,
+ * `giftCard`, `remainingToPay`) — the decorated cart carries
+ * discount/tax/COD-fee/gift-card tender fields that the breakdown renders,
+ * so the copy for those rows lives here too.
+ */
+
+export type CartDrawerLabels = {
+  // Header
+  yourCart: string
+  item: string
+  items: string
+  closeCart: string
+
+  // Empty state
+  emptyCartTitle: string
+  emptyCartMessage: string
+  browseProducts: string
+
+  // Tiered progress
+  awayFromFreeShipping: string
+  allRewardsUnlocked: string
+
+  // Gift wrap / notes
+  addGiftWrap: string
+  giftNote: string
+  orderNote: string
+  giftNotePlaceholder: string
+  orderNotePlaceholder: string
+
+  // Rewards
+  estimatedRewardPoints: string
+
+  // Cross-sell
+  pairsWellWith: string
+  youllLoveThis: string
+  youMightAlsoLike: string
+  addToCart: string
+
+  // Summary / footer
+  subtotal: string
+  taxAndShipping: string
+  shipping: string
+  free: string
+  calculatedAtCheckout: string
+  total: string
+  secureCheckout: string
+  shippingAndTaxCalculatedAtCheckout: string
+
+  // Summary breakdown rows (Cartbase decorated-cart fields)
+  discount: string
+  tax: string
+  /** Fallback only — the server's `payment_method_fee_label` wins when present. */
+  paymentMethodFee: string
+  /** Prefix for an applied gift-card row; rendered as `<giftCard> ••1234`. */
+  giftCard: string
+  /** Label for `gift_card_remainder` — what the remainder provider charges. */
+  remainingToPay: string
+
+  // Continue shopping
+  continueShopping: string
+
+  // A11y / buttons
+  remove: string
+}
+
+export const defaultCartDrawerLabels: CartDrawerLabels = {
+  yourCart: "Your cart",
+  item: "item",
+  items: "items",
+  closeCart: "Close cart",
+
+  emptyCartTitle: "Your cart is empty",
+  emptyCartMessage: "You haven't added any products yet.",
+  browseProducts: "Browse products",
+
+  awayFromFreeShipping: "away from free shipping",
+  allRewardsUnlocked: "All rewards unlocked",
+
+  addGiftWrap: "Add gift wrapping",
+  giftNote: "Gift note",
+  orderNote: "Order note",
+  giftNotePlaceholder: "Add a personal message...",
+  orderNotePlaceholder: "Special instructions for this order...",
+
+  estimatedRewardPoints: "Estimated reward points",
+
+  pairsWellWith: "Pairs well with",
+  youllLoveThis: "You'll love this",
+  youMightAlsoLike: "You might also like",
+  addToCart: "Add",
+
+  subtotal: "Subtotal",
+  taxAndShipping: "VAT included. Shipping calculated at checkout.",
+  shipping: "Shipping",
+  free: "FREE",
+  calculatedAtCheckout: "Calculated at checkout",
+  total: "Total",
+  secureCheckout: "Checkout",
+  shippingAndTaxCalculatedAtCheckout: "Shipping and tax calculated at checkout",
+
+  discount: "Discount",
+  tax: "VAT",
+  paymentMethodFee: "Payment method fee",
+  giftCard: "Gift card",
+  remainingToPay: "Remaining to pay",
+
+  continueShopping: "Continue shopping",
+
+  remove: "Remove",
+}

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

@@ -1,196 +1,197 @@
-"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>
-  )
-}
+"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 Cartbase: the source rendered a client-summed product
+ * subtotal only; Cartbase's decorated cart carries server-computed totals on
+ * every read (`subtotal`, `discount_total`, `shipping_total`, `tax_total`,
+ * `payment_method_fee_total`/`payment_method_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 / method-fee rows appear only when their total is > 0.
+ * - the method fee renders the server's `payment_method_fee_label`
+ *   (labels.paymentMethodFee 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
+  payment_method_fee_total?: number
+  payment_method_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: "payment_method_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.payment_method_fee_total ?? 0) > 0) {
+    rows.push({
+      kind: "payment_method_fee",
+      amount: cart.payment_method_fee_total!,
+      label: cart.payment_method_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 "payment_method_fee":
+            return (
+              <div key={i} className="flex justify-between items-center text-[13px] text-muted-foreground">
+                <span>{row.label ?? labels.paymentMethodFee}</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>
+  )
+}