@cartbase/storefront 0.2.0 → 0.4.0

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 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`,
- * `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>
+  )
+}

package/src/checkout/checkout-client.tsx

@@ -13,7 +13,6 @@ import { CheckoutShippingMethodList } from "./shipping-method-list"
 import { PaymentWrapper } from "./payment-wrapper"
 import {
   useCheckoutOrchestration,
-  type CheckoutCodConfig,
   type CheckoutLogError,
   type PaymentProviderLike,
 } from "./use-checkout-orchestration"
@@ -35,9 +34,9 @@ import {
  *  - The listings arrive as SDK DTOs: `listShippingOptions` /
  *    `listPaymentProviders` (both rule-filtered server-side) — fetch them
  *    in the host and pass down (docs/storefront/checkout.md).
- *  - `codConfig` = the integrations config `cod` block
- *    (`getIntegrationsConfig(client).cod`) — the COD fee prediction is
- *    NEVER hardcoded (docs/storefront/integrations.md).
+ *  - Fee prediction is NEVER hardcoded: the payment listing entries carry
+ *    each method's own `fee_amount`/`fee_label` (the integrations `cod`
+ *    block died 2026-08-11 — any method may carry a fee).
  *  - `onCartChange` closes the loop for summary mutations: the decorated
  *    cart returned by promo/gift-card/quantity calls is handed up so the
  *    host updates its cart state (`router.refresh()` in an RSC app) AND
@@ -61,8 +60,6 @@ type CheckoutClientProps = {
     methods: PaymentProviderLike[] | null,
     selectedShippingOption: StoreShippingOption | null
   ) => PaymentProviderLike[] | null
-  /** The integrations config `cod` block — drives the optimistic COD fee. */
-  codConfig?: CheckoutCodConfig
   /** Show the gift-card widget in the summary (default true). */
   showGiftCards?: boolean
   logoByFulfillmentOptionId?: Record<string, { src: string; alt: string }>
@@ -81,6 +78,12 @@ type CheckoutClientProps = {
   logError?: CheckoutLogError
   /** Receives every decorated cart returned by a summary mutation. */
   onCartChange?: (cart: Cart) => void
+  /**
+   * Extra payment tabs forwarded to CheckoutPaymentMethodList — the seam
+   * for embedded third-party providers rendered in the same radio-card
+   * style as card/cod. See the prop's JSDoc there.
+   */
+  extraPaymentTabs?: Array<{ id: string; label: string; content: React.ReactNode }>
 }
 
 export function CheckoutClient({
@@ -92,7 +95,6 @@ export function CheckoutClient({
   countryCode,
   countries,
   paymentMethodFilter,
-  codConfig,
   showGiftCards = true,
   logoByFulfillmentOptionId,
   appearance,
@@ -102,6 +104,7 @@ export function CheckoutClient({
   resolveTrackingMetadata,
   logError,
   onCartChange,
+  extraPaymentTabs,
 }: CheckoutClientProps) {
   const o = useCheckoutOrchestration({
     client,
@@ -112,7 +115,6 @@ export function CheckoutClient({
     countryCode,
     countries,
     paymentMethodFilter,
-    codConfig,
     orderConfirmedPath,
     onOrderPlaced,
     resolveTrackingMetadata,
@@ -195,6 +197,7 @@ export function CheckoutClient({
               }
               total={o.optimisticTotal}
               logError={logError}
+              extraTabs={extraPaymentTabs}
             />
           </div>
 
@@ -208,8 +211,8 @@ export function CheckoutClient({
                 onOptimisticShippingClear={() =>
                   o.setOptimisticShippingCost(null)
                 }
-                optimisticCodFee={o.optimisticCodFee}
-                onOptimisticCodFeeClear={() => o.setOptimisticCodFee(null)}
+                optimisticMethodFee={o.optimisticMethodFee}
+                onOptimisticMethodFeeClear={() => o.setOptimisticMethodFee(null)}
                 showGiftCards={showGiftCards}
                 onCartChange={handleCartChange}
               />

package/src/checkout/index.ts

@@ -45,7 +45,6 @@ export {
   useCheckoutOrchestration,
   resolveOrderConfirmedPath,
   type UseCheckoutOrchestrationOptions,
-  type CheckoutCodConfig,
   type CheckoutLogError,
   type PaymentProviderLike,
 } from "./use-checkout-orchestration"

package/src/checkout/labels-bg.ts

@@ -73,7 +73,7 @@ export const bulgarianCheckoutLabels: CheckoutLabels = {
   discount: "Отстъпка",
   discountCode: "Код за отстъпка",
   discountSub: "Спестете с промо код",
-  codFee: "Такса наложен платеж",
+  paymentMethodFee: "Такса за плащане",
   recommended: "Препоръчано за вас",
   recommendedSoon: "Скоро тук",
   recommendedSoonSub: "Персонализирани предложения за вас",