@cartbase/storefront 0.2.0 → 0.4.0

package/src/order/labels.ts

@@ -1,79 +1,79 @@
-/**
- * Order family label pack. Ported from `@1click/ui/src/order/labels.ts`
- * (v2.3.1) unchanged, plus `tracking` — new in the Cartbase port because the
- * Cartbase order surface exposes fulfillment tracking labels
- * (`StoreOrderDetail.fulfillments[].fulfillment.labels`) that
- * `OrderDeliveryCard` now renders.
- */
-export type OrderLabels = {
-  orderConfirmed: string
-  confirmationSent: string
-  orderNumber: string
-  orderDate: string
-  summary: string
-  subtotal: string
-  shipping: string
-  discount: string
-  tax: string
-  total: string
-  /** Default label for the cash-on-delivery fee row. Used as the third-
-   *  level fallback when neither a per-store override nor the server's
-   *  `cod_fee_label` / fee line title is available. */
-  codFee: string
-  contactInfo: string
-  delivery: string
-  paymentMethod: string
-  paymentMethodTitles: {
-    card: string
-    cod: string
-    /** Offline manual payments (pp_manual) — NOT cash on delivery. */
-    manual: string
-    paypal: string
-  }
-  needHelp: string
-  contactUs: string
-  returnsExchanges: string
-  orderPlaced: string
-  processing: string
-  shipped: string
-  delivered: string
-  free: string
-  continueShopping: string
-  qty: string
-  /** Heading for the fulfillment tracking-numbers block (Cartbase addition). */
-  tracking: string
-}
-
-export const defaultOrderLabels: OrderLabels = {
-  orderConfirmed: "Order confirmed",
-  confirmationSent: "We sent a confirmation to",
-  orderNumber: "Order",
-  orderDate: "Date",
-  summary: "Order summary",
-  subtotal: "Subtotal",
-  shipping: "Shipping",
-  discount: "Discount",
-  tax: "Tax",
-  total: "Total",
-  codFee: "Cash on delivery fee",
-  contactInfo: "Contact info",
-  delivery: "Delivery",
-  paymentMethod: "Payment method",
-  paymentMethodTitles: {
-    card: "Credit / debit card",
-    cod: "Cash on delivery",
-    manual: "Manual payment",
-    paypal: "PayPal",
-  },
-  needHelp: "Need help?",
-  contactUs: "Contact us",
-  returnsExchanges: "Returns & exchanges",
-  orderPlaced: "Placed",
-  processing: "Processing",
-  shipped: "Shipped",
-  delivered: "Delivered",
-  free: "FREE",
-  continueShopping: "Continue shopping",
-  qty: "qty.",
-  tracking: "Tracking",
-}
+/**
+ * Order family label pack. Ported from `@1click/ui/src/order/labels.ts`
+ * (v2.3.1) unchanged, plus `tracking` — new in the Cartbase port because the
+ * Cartbase order surface exposes fulfillment tracking labels
+ * (`StoreOrderDetail.fulfillments[].fulfillment.labels`) that
+ * `OrderDeliveryCard` now renders.
+ */
+export type OrderLabels = {
+  orderConfirmed: string
+  confirmationSent: string
+  orderNumber: string
+  orderDate: string
+  summary: string
+  subtotal: string
+  shipping: string
+  discount: string
+  tax: string
+  total: string
+  /** Default label for the cash-on-delivery fee row. Used as the third-
+   *  level fallback when neither a per-store override nor the server's
+   *  `payment_method_fee_label` / fee line title is available. */
+  paymentMethodFee: string
+  contactInfo: string
+  delivery: string
+  paymentMethod: string
+  paymentMethodTitles: {
+    card: string
+    cod: string
+    /** Offline manual payments (pp_manual) — NOT cash on delivery. */
+    manual: string
+    paypal: string
+  }
+  needHelp: string
+  contactUs: string
+  returnsExchanges: string
+  orderPlaced: string
+  processing: string
+  shipped: string
+  delivered: string
+  free: string
+  continueShopping: string
+  qty: string
+  /** Heading for the fulfillment tracking-numbers block (Cartbase addition). */
+  tracking: string
+}
+
+export const defaultOrderLabels: OrderLabels = {
+  orderConfirmed: "Order confirmed",
+  confirmationSent: "We sent a confirmation to",
+  orderNumber: "Order",
+  orderDate: "Date",
+  summary: "Order summary",
+  subtotal: "Subtotal",
+  shipping: "Shipping",
+  discount: "Discount",
+  tax: "Tax",
+  total: "Total",
+  paymentMethodFee: "Payment method fee",
+  contactInfo: "Contact info",
+  delivery: "Delivery",
+  paymentMethod: "Payment method",
+  paymentMethodTitles: {
+    card: "Credit / debit card",
+    cod: "Cash on delivery",
+    manual: "Manual payment",
+    paypal: "PayPal",
+  },
+  needHelp: "Need help?",
+  contactUs: "Contact us",
+  returnsExchanges: "Returns & exchanges",
+  orderPlaced: "Placed",
+  processing: "Processing",
+  shipped: "Shipped",
+  delivered: "Delivered",
+  free: "FREE",
+  continueShopping: "Continue shopping",
+  qty: "qty.",
+  tracking: "Tracking",
+}

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

@@ -40,9 +40,12 @@ import { OrderHelpSection } from "./order-help-section"
  *    `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.
+ *  - `shippingMethod` / `paymentProviderId` / `paymentMethodName` /
+ *    `cardLast4` — from the checkout state (decorated cart /
+ *    prepare-checkout response); the delivery and payment cards render
+ *    only what they are given. A merchant-method order passes
+ *    `paymentMethodName` (its merchant name — the display everywhere
+ *    since the pp_* kill) and no provider id.
  *
  * The Purchase tracking trio (fbq/gtag/rybbit, deduped by
  * `order.display_id`) stays APP-OWNED: fire it from the confirmation
@@ -61,6 +64,8 @@ type OrderCompletedTemplateProps = {
   items?: OrderDisplayItem[]
   shippingMethod?: ShippingMethodDisplay | null
   paymentProviderId?: string | null
+  /** The merchant method's name — wins over any provider bucket. */
+  paymentMethodName?: string | null
   cardLast4?: string | null
   labels?: OrderLabels
   locale?: string
@@ -69,11 +74,12 @@ type OrderCompletedTemplateProps = {
   /** 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`.
+   * Per-store override for the method-fee row in the totals breakdown.
+   * Optional — falls back to the server's `payment_method_fee_label`,
+   * then the fee line's title, then the translated
+   * `labels.paymentMethodFee`.
    */
-  codFeeLabel?: string
+  methodFeeLabel?: string
 }
 
 export function OrderCompletedTemplate({
@@ -82,13 +88,14 @@ export function OrderCompletedTemplate({
   items,
   shippingMethod,
   paymentProviderId,
+  paymentMethodName,
   cardLast4,
   labels,
   locale,
   contactHref,
   returnsHref,
   storeHref = "/store",
-  codFeeLabel,
+  methodFeeLabel,
 }: OrderCompletedTemplateProps) {
   const l = { ...defaultOrderLabels, ...labels }
   const displayItems =
@@ -119,7 +126,7 @@ export function OrderCompletedTemplate({
                 currencyCode={order.currency_code}
                 items={displayItems}
                 labels={l}
-                codFeeLabel={codFeeLabel}
+                methodFeeLabel={methodFeeLabel}
               />
             </div>
           </div>
@@ -134,6 +141,7 @@ export function OrderCompletedTemplate({
             />
             <OrderPaymentCard
               providerId={paymentProviderId}
+              methodName={paymentMethodName}
               cardLast4={cardLast4}
               labels={l}
             />

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

@@ -1,10 +1,5 @@
 import { CreditCard } from "lucide-react"
-import {
-  isManual,
-  isPaypal,
-  isStripeLike,
-  paymentInfoMap,
-} from "../lib/payment-constants"
+import { isPaypal, isStripeLike, paymentInfoMap } from "../lib/payment-constants"
 import { defaultOrderLabels, type OrderLabels } from "./labels"
 
 /**
@@ -12,47 +7,42 @@ import { defaultOrderLabels, type OrderLabels } from "./labels"
  * `@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 Cartbase'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.
+ * surface) — the tender arrives via props instead: from
+ * `prepareCheckout()`, 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):
+ * Resolve a human-readable, locale-correct title for a payment tender.
+ * Since the pp_* kill (20260811250000) a merchant METHOD carries its own
+ * merchant-written name — that name IS the display (Bank transfer, the
+ * merchant's COD name); locale buckets apply to processor ids only:
  *
- *   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
- * Cartbase ids in `lib/payment-constants`), so a single change to those
- * propagates here automatically.
+ *   1. `methodName` (the method's merchant name), verbatim.
+ *   2. Bucketed lookup against `labels.paymentMethodTitles` for processor
+ *      ids (Stripe → the locale's "card" title, PayPal likewise).
+ *   3. Hardcoded `paymentInfoMap` fallback for known processor ids.
+ *   4. The raw provider id as a last resort, so the card never renders
+ *      empty if a brand-new processor lands.
  */
 export function resolvePaymentTitle(
-  providerId: string | undefined,
-  paymentMethodTitles: OrderLabels["paymentMethodTitles"]
+  providerId: string | null | undefined,
+  paymentMethodTitles: OrderLabels["paymentMethodTitles"],
+  methodName?: string | null
 ): string {
+  if (methodName) return methodName
   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`). */
+  /** Processor id (e.g. `pp_stripe`), or null for a merchant method. */
   providerId?: string | null
+  /** The merchant method's name (Bank transfer, the merchant's COD name) —
+   * wins over any provider bucket when present. */
+  methodName?: string | null
   /** Last 4 card digits when known (Stripe checkout state). */
   cardLast4?: string | null
   labels?: Pick<OrderLabels, "paymentMethod" | "paymentMethodTitles">
@@ -60,15 +50,16 @@ type OrderPaymentCardProps = {
 
 export function OrderPaymentCard({
   providerId,
+  methodName,
   cardLast4,
   labels,
 }: OrderPaymentCardProps) {
   const l = { ...defaultOrderLabels, ...labels }
 
-  if (!providerId) return null
+  if (!providerId && !methodName) return null
 
-  const title = resolvePaymentTitle(providerId, l.paymentMethodTitles)
-  const icon = paymentInfoMap[providerId]?.icon ?? null
+  const title = resolvePaymentTitle(providerId, l.paymentMethodTitles, methodName)
+  const icon = (providerId && paymentInfoMap[providerId]?.icon) || null
 
   return (
     <div className="bg-card rounded-xl p-5 shadow-sm">