@asteby/storefront-react 0.23.0 → 0.25.0

package/dist/account.css

@@ -259,6 +259,14 @@
   border-top: 1px solid var(--sf-account-line, color-mix(in srgb, currentColor 14%, transparent));
 }
 
+/* Paquetería sobre el nombre del envío (el texto lo escribe `shipment.carrier`). */
+[data-sf-shipment-eyebrow] {
+  display: block;
+  font-size: 0.75em;
+  font-weight: 500;
+  color: var(--sf-account-muted, color-mix(in srgb, currentColor 72%, transparent));
+}
+
 /*
  * <ProductThumb>, <ProductPreview>, <ProductThumbStack>: la foto del producto y la línea de producto de la tienda.
  * CSS plano sobre los tokens de la tienda (--foreground, --background, --border, --muted-foreground, --radius); en tema

package/dist/account.d.cts

@@ -292,6 +292,18 @@ declare const ES: {
     readonly 'payment.status.partially_refunded': "Reembolsado parcialmente";
     readonly 'payment.status.unknown': "En proceso";
     readonly 'payment.paidOn': "Pagado el {date}";
+    readonly 'payment.method.card': "Tarjeta";
+    readonly 'payment.method.credit_card': "Tarjeta de crédito";
+    readonly 'payment.method.debit_card': "Tarjeta de débito";
+    readonly 'payment.method.cash_voucher': "Efectivo con ficha (OXXO, tienda de conveniencia)";
+    readonly 'payment.method.oxxo': "Efectivo en OXXO";
+    readonly 'payment.method.spei': "Transferencia SPEI";
+    readonly 'payment.method.transfer': "Transferencia bancaria";
+    readonly 'payment.method.bank_deposit': "Depósito bancario";
+    readonly 'payment.method.wallet': "Billetera digital";
+    readonly 'payment.method.cash': "Efectivo";
+    readonly 'payment.method.other': "Otro medio de pago";
+    readonly 'payment.method.unknown': "Medio de pago";
     readonly 'section.error': "No pudimos cargar esta sección.";
     readonly 'section.retry': "Reintentar";
     readonly 'section.loading': "Cargando";
@@ -502,6 +514,26 @@ type PendingPaymentListProps = AccountTextProps & Pick<PendingPaymentCardProps,
 /** "Pendientes de pago": the valid vouchers first, then the expired ones. Renders nothing when there are none. */
 declare function PendingPaymentList({ payments, voucherHref, shopName, classNames, listClassNames: lc, headingLevel, ...text }: PendingPaymentListProps): react.JSX.Element | null;
 
+/**
+ * The friendly name of how an order was paid. The server sends `family` (a short enum) and `method_label` (its own
+ * text, which an older or English-locale server may fill with the provider's raw word: `Card`, `credit_card`, `oxxo`).
+ * The buyer never reads a raw provider key: the label is built from the SDK's texts (es/en), extended by the store.
+ */
+
+type PaymentMethodKey = 'card' | 'credit_card' | 'debit_card' | 'cash_voucher' | 'oxxo' | 'spei' | 'transfer' | 'bank_deposit' | 'wallet' | 'cash' | 'other';
+/** The method family of a payment (`card`, `oxxo`, `spei`...), for the store's own icon or styling; `null` when unknown. */
+declare function paymentMethodKey(p: PaymentInfo): PaymentMethodKey | null;
+type PaymentLabelOptions = {
+    /** The store's own words for a payment (by organization, provider...). Return a string to use it; `null`/`undefined` falls through to the SDK's. */
+    override?: (payment: PaymentInfo) => string | null | undefined;
+};
+/**
+ * `Tarjeta Visa •••• 1234`, `Efectivo con ficha (OXXO…)`, `Transferencia SPEI`… in the buyer's language. A label the
+ * server already wrote as a sentence (it carries its own detail) is kept; a raw key becomes a readable text and never
+ * shows as it came; with nothing to go on, a neutral "Medio de pago".
+ */
+declare function paymentLabel(p: PaymentInfo, m: AccountMessages, options?: PaymentLabelOptions): string;
+
 type RefundListClassNames = Partial<Record<'root' | 'title' | 'list' | 'item' | 'amount' | 'status' | 'meta' | 'empty' | 'error' | 'retry', string>>;
 type RefundListProps = AccountTextProps & {
     refunds?: readonly Refund[] | null;
@@ -517,10 +549,12 @@ declare function RefundList({ refunds, showEmpty, degraded, onRetry, headingLeve
 type PaymentSummaryProps = AccountTextProps & {
     payments?: readonly PaymentInfo[] | null;
     headingLevel?: 2 | 3 | 4;
+    /** The store's own name for a payment (by organization, provider...); `null` falls through to the SDK's es/en text. */
+    methodLabel?: PaymentLabelOptions['override'];
     classNames?: Partial<Record<'root' | 'title' | 'list' | 'item' | 'status' | 'meta', string>>;
 };
 /** What the buyer paid with (card, voucher...) and its status. Renders nothing when the order has no payments. */
-declare function PaymentSummary({ payments, headingLevel, classNames: cx, ...text }: PaymentSummaryProps): react.JSX.Element | null;
+declare function PaymentSummary({ payments, headingLevel, methodLabel, classNames: cx, ...text }: PaymentSummaryProps): react.JSX.Element | null;
 
 /**
  * Data hooks of the account screens. They talk to the client of the `StorefrontProvider` (or `client`), which must carry
@@ -623,4 +657,4 @@ declare function barcodeGeometry(value: string, opts?: {
     height?: number;
 }): BarcodeGeometry | null;
 
-export { AccountAuth, type AccountAuthClassNames, type AccountAuthMessages, type AccountAuthProps, type AccountAuthView, type AccountFormProps, type AccountMessageKey, type AccountMessages, type AccountStatus, type AccountTextProps, AuthActionData, AuthErrorCode, AuthStep, Barcode, type BarcodeGeometry, type BarcodeProps, InvoiceList, type InvoiceListClassNames, type InvoiceListProps, NextActionBar, type NextActionBarClassNames, type NextActionBarProps, OrderCard, type OrderCardClassNames, type OrderCardProps, OrderLines, type OrderLinesClassNames, type OrderLinesProps, OrderList, type OrderListClassNames, type OrderListProps, OrderProductsStack, OrderProgress, type OrderProgressClassNames, type OrderProgressProps, OrderStatusBadge, type OrderStatusBadgeProps, type OrderTone, PaymentSummary, type PaymentSummaryProps, PendingPaymentCard, type PendingPaymentCardClassNames, type PendingPaymentCardProps, PendingPaymentList, type PendingPaymentListProps, PostPurchaseAccountPrompt, type PostPurchaseAccountPromptClassNames, type PostPurchaseAccountPromptMessages, type PostPurchaseAccountPromptProps, RefundList, type RefundListClassNames, type RefundListProps, ShipmentCard, type ShipmentCardClassNames, type ShipmentCardProps, type ShipmentMapSlotProps, type UseConnectionResult, type UseCustomerOrderOptions, type UseCustomerOrderResult, type UseCustomerOrdersOptions, type UsePendingPaymentsOptions, type VoucherView, accountAuthMessages, accountMessages, barcodeGeometry, barcodeValue, code128Modules, enumText, lineImage, postPurchaseAccountPromptMessages, stageTone, useCustomerOrder, useCustomerOrders, usePendingPayments, voucherOf };
+export { AccountAuth, type AccountAuthClassNames, type AccountAuthMessages, type AccountAuthProps, type AccountAuthView, type AccountFormProps, type AccountMessageKey, type AccountMessages, type AccountStatus, type AccountTextProps, AuthActionData, AuthErrorCode, AuthStep, Barcode, type BarcodeGeometry, type BarcodeProps, InvoiceList, type InvoiceListClassNames, type InvoiceListProps, NextActionBar, type NextActionBarClassNames, type NextActionBarProps, OrderCard, type OrderCardClassNames, type OrderCardProps, OrderLines, type OrderLinesClassNames, type OrderLinesProps, OrderList, type OrderListClassNames, type OrderListProps, OrderProductsStack, OrderProgress, type OrderProgressClassNames, type OrderProgressProps, OrderStatusBadge, type OrderStatusBadgeProps, type OrderTone, type PaymentLabelOptions, type PaymentMethodKey, PaymentSummary, type PaymentSummaryProps, PendingPaymentCard, type PendingPaymentCardClassNames, type PendingPaymentCardProps, PendingPaymentList, type PendingPaymentListProps, PostPurchaseAccountPrompt, type PostPurchaseAccountPromptClassNames, type PostPurchaseAccountPromptMessages, type PostPurchaseAccountPromptProps, RefundList, type RefundListClassNames, type RefundListProps, ShipmentCard, type ShipmentCardClassNames, type ShipmentCardProps, type ShipmentMapSlotProps, type UseConnectionResult, type UseCustomerOrderOptions, type UseCustomerOrderResult, type UseCustomerOrdersOptions, type UsePendingPaymentsOptions, type VoucherView, accountAuthMessages, accountMessages, barcodeGeometry, barcodeValue, code128Modules, enumText, lineImage, paymentLabel, paymentMethodKey, postPurchaseAccountPromptMessages, stageTone, useCustomerOrder, useCustomerOrders, usePendingPayments, voucherOf };

package/dist/account.d.ts

@@ -292,6 +292,18 @@ declare const ES: {
     readonly 'payment.status.partially_refunded': "Reembolsado parcialmente";
     readonly 'payment.status.unknown': "En proceso";
     readonly 'payment.paidOn': "Pagado el {date}";
+    readonly 'payment.method.card': "Tarjeta";
+    readonly 'payment.method.credit_card': "Tarjeta de crédito";
+    readonly 'payment.method.debit_card': "Tarjeta de débito";
+    readonly 'payment.method.cash_voucher': "Efectivo con ficha (OXXO, tienda de conveniencia)";
+    readonly 'payment.method.oxxo': "Efectivo en OXXO";
+    readonly 'payment.method.spei': "Transferencia SPEI";
+    readonly 'payment.method.transfer': "Transferencia bancaria";
+    readonly 'payment.method.bank_deposit': "Depósito bancario";
+    readonly 'payment.method.wallet': "Billetera digital";
+    readonly 'payment.method.cash': "Efectivo";
+    readonly 'payment.method.other': "Otro medio de pago";
+    readonly 'payment.method.unknown': "Medio de pago";
     readonly 'section.error': "No pudimos cargar esta sección.";
     readonly 'section.retry': "Reintentar";
     readonly 'section.loading': "Cargando";
@@ -502,6 +514,26 @@ type PendingPaymentListProps = AccountTextProps & Pick<PendingPaymentCardProps,
 /** "Pendientes de pago": the valid vouchers first, then the expired ones. Renders nothing when there are none. */
 declare function PendingPaymentList({ payments, voucherHref, shopName, classNames, listClassNames: lc, headingLevel, ...text }: PendingPaymentListProps): react.JSX.Element | null;
 
+/**
+ * The friendly name of how an order was paid. The server sends `family` (a short enum) and `method_label` (its own
+ * text, which an older or English-locale server may fill with the provider's raw word: `Card`, `credit_card`, `oxxo`).
+ * The buyer never reads a raw provider key: the label is built from the SDK's texts (es/en), extended by the store.
+ */
+
+type PaymentMethodKey = 'card' | 'credit_card' | 'debit_card' | 'cash_voucher' | 'oxxo' | 'spei' | 'transfer' | 'bank_deposit' | 'wallet' | 'cash' | 'other';
+/** The method family of a payment (`card`, `oxxo`, `spei`...), for the store's own icon or styling; `null` when unknown. */
+declare function paymentMethodKey(p: PaymentInfo): PaymentMethodKey | null;
+type PaymentLabelOptions = {
+    /** The store's own words for a payment (by organization, provider...). Return a string to use it; `null`/`undefined` falls through to the SDK's. */
+    override?: (payment: PaymentInfo) => string | null | undefined;
+};
+/**
+ * `Tarjeta Visa •••• 1234`, `Efectivo con ficha (OXXO…)`, `Transferencia SPEI`… in the buyer's language. A label the
+ * server already wrote as a sentence (it carries its own detail) is kept; a raw key becomes a readable text and never
+ * shows as it came; with nothing to go on, a neutral "Medio de pago".
+ */
+declare function paymentLabel(p: PaymentInfo, m: AccountMessages, options?: PaymentLabelOptions): string;
+
 type RefundListClassNames = Partial<Record<'root' | 'title' | 'list' | 'item' | 'amount' | 'status' | 'meta' | 'empty' | 'error' | 'retry', string>>;
 type RefundListProps = AccountTextProps & {
     refunds?: readonly Refund[] | null;
@@ -517,10 +549,12 @@ declare function RefundList({ refunds, showEmpty, degraded, onRetry, headingLeve
 type PaymentSummaryProps = AccountTextProps & {
     payments?: readonly PaymentInfo[] | null;
     headingLevel?: 2 | 3 | 4;
+    /** The store's own name for a payment (by organization, provider...); `null` falls through to the SDK's es/en text. */
+    methodLabel?: PaymentLabelOptions['override'];
     classNames?: Partial<Record<'root' | 'title' | 'list' | 'item' | 'status' | 'meta', string>>;
 };
 /** What the buyer paid with (card, voucher...) and its status. Renders nothing when the order has no payments. */
-declare function PaymentSummary({ payments, headingLevel, classNames: cx, ...text }: PaymentSummaryProps): react.JSX.Element | null;
+declare function PaymentSummary({ payments, headingLevel, methodLabel, classNames: cx, ...text }: PaymentSummaryProps): react.JSX.Element | null;
 
 /**
  * Data hooks of the account screens. They talk to the client of the `StorefrontProvider` (or `client`), which must carry
@@ -623,4 +657,4 @@ declare function barcodeGeometry(value: string, opts?: {
     height?: number;
 }): BarcodeGeometry | null;
 
-export { AccountAuth, type AccountAuthClassNames, type AccountAuthMessages, type AccountAuthProps, type AccountAuthView, type AccountFormProps, type AccountMessageKey, type AccountMessages, type AccountStatus, type AccountTextProps, AuthActionData, AuthErrorCode, AuthStep, Barcode, type BarcodeGeometry, type BarcodeProps, InvoiceList, type InvoiceListClassNames, type InvoiceListProps, NextActionBar, type NextActionBarClassNames, type NextActionBarProps, OrderCard, type OrderCardClassNames, type OrderCardProps, OrderLines, type OrderLinesClassNames, type OrderLinesProps, OrderList, type OrderListClassNames, type OrderListProps, OrderProductsStack, OrderProgress, type OrderProgressClassNames, type OrderProgressProps, OrderStatusBadge, type OrderStatusBadgeProps, type OrderTone, PaymentSummary, type PaymentSummaryProps, PendingPaymentCard, type PendingPaymentCardClassNames, type PendingPaymentCardProps, PendingPaymentList, type PendingPaymentListProps, PostPurchaseAccountPrompt, type PostPurchaseAccountPromptClassNames, type PostPurchaseAccountPromptMessages, type PostPurchaseAccountPromptProps, RefundList, type RefundListClassNames, type RefundListProps, ShipmentCard, type ShipmentCardClassNames, type ShipmentCardProps, type ShipmentMapSlotProps, type UseConnectionResult, type UseCustomerOrderOptions, type UseCustomerOrderResult, type UseCustomerOrdersOptions, type UsePendingPaymentsOptions, type VoucherView, accountAuthMessages, accountMessages, barcodeGeometry, barcodeValue, code128Modules, enumText, lineImage, postPurchaseAccountPromptMessages, stageTone, useCustomerOrder, useCustomerOrders, usePendingPayments, voucherOf };
+export { AccountAuth, type AccountAuthClassNames, type AccountAuthMessages, type AccountAuthProps, type AccountAuthView, type AccountFormProps, type AccountMessageKey, type AccountMessages, type AccountStatus, type AccountTextProps, AuthActionData, AuthErrorCode, AuthStep, Barcode, type BarcodeGeometry, type BarcodeProps, InvoiceList, type InvoiceListClassNames, type InvoiceListProps, NextActionBar, type NextActionBarClassNames, type NextActionBarProps, OrderCard, type OrderCardClassNames, type OrderCardProps, OrderLines, type OrderLinesClassNames, type OrderLinesProps, OrderList, type OrderListClassNames, type OrderListProps, OrderProductsStack, OrderProgress, type OrderProgressClassNames, type OrderProgressProps, OrderStatusBadge, type OrderStatusBadgeProps, type OrderTone, type PaymentLabelOptions, type PaymentMethodKey, PaymentSummary, type PaymentSummaryProps, PendingPaymentCard, type PendingPaymentCardClassNames, type PendingPaymentCardProps, PendingPaymentList, type PendingPaymentListProps, PostPurchaseAccountPrompt, type PostPurchaseAccountPromptClassNames, type PostPurchaseAccountPromptMessages, type PostPurchaseAccountPromptProps, RefundList, type RefundListClassNames, type RefundListProps, ShipmentCard, type ShipmentCardClassNames, type ShipmentCardProps, type ShipmentMapSlotProps, type UseConnectionResult, type UseCustomerOrderOptions, type UseCustomerOrderResult, type UseCustomerOrdersOptions, type UsePendingPaymentsOptions, type VoucherView, accountAuthMessages, accountMessages, barcodeGeometry, barcodeValue, code128Modules, enumText, lineImage, paymentLabel, paymentMethodKey, postPurchaseAccountPromptMessages, stageTone, useCustomerOrder, useCustomerOrders, usePendingPayments, voucherOf };

package/dist/account.js

@@ -1,4 +1,4 @@
-import { fill } from './chunk-VE7WQPMY.js';
+import { fill } from './chunk-5XYQLOE3.js';
 import { barcodeGeometry, voucherOf, barcodeValue } from './chunk-TXEYBDFG.js';
 export { barcodeGeometry, barcodeValue, code128Modules, voucherOf } from './chunk-TXEYBDFG.js';
 import { useFieldErrors, CheckoutField, ErrorSummary } from './chunk-DFGLCIEG.js';
@@ -493,6 +493,18 @@ var ES3 = {
   "payment.status.partially_refunded": "Reembolsado parcialmente",
   "payment.status.unknown": "En proceso",
   "payment.paidOn": "Pagado el {date}",
+  "payment.method.card": "Tarjeta",
+  "payment.method.credit_card": "Tarjeta de cr\xE9dito",
+  "payment.method.debit_card": "Tarjeta de d\xE9bito",
+  "payment.method.cash_voucher": "Efectivo con ficha (OXXO, tienda de conveniencia)",
+  "payment.method.oxxo": "Efectivo en OXXO",
+  "payment.method.spei": "Transferencia SPEI",
+  "payment.method.transfer": "Transferencia bancaria",
+  "payment.method.bank_deposit": "Dep\xF3sito bancario",
+  "payment.method.wallet": "Billetera digital",
+  "payment.method.cash": "Efectivo",
+  "payment.method.other": "Otro medio de pago",
+  "payment.method.unknown": "Medio de pago",
   // sections
   "section.error": "No pudimos cargar esta secci\xF3n.",
   "section.retry": "Reintentar",
@@ -653,6 +665,18 @@ var EN3 = {
   "payment.status.partially_refunded": "Partially refunded",
   "payment.status.unknown": "In progress",
   "payment.paidOn": "Paid on {date}",
+  "payment.method.card": "Card",
+  "payment.method.credit_card": "Credit card",
+  "payment.method.debit_card": "Debit card",
+  "payment.method.cash_voucher": "Cash with a voucher (OXXO, convenience store)",
+  "payment.method.oxxo": "Cash at OXXO",
+  "payment.method.spei": "SPEI transfer",
+  "payment.method.transfer": "Bank transfer",
+  "payment.method.bank_deposit": "Bank deposit",
+  "payment.method.wallet": "Digital wallet",
+  "payment.method.cash": "Cash",
+  "payment.method.other": "Other payment method",
+  "payment.method.unknown": "Payment method",
   "section.error": "We could not load this section.",
   "section.retry": "Try again",
   "section.loading": "Loading"
@@ -982,6 +1006,10 @@ function ShipmentCard({ shipment, testMode = "hide", eventsPreview = 3, renderCa
     /* @__PURE__ */ jsxs("header", { className: cx.header, "data-sf-shipment-header": true, children: [
       renderCarrierMark && !test ? /* @__PURE__ */ jsx("span", { "data-sf-shipment-mark": true, children: renderCarrierMark(shipment) }) : null,
       /* @__PURE__ */ jsxs(Heading, { id: titleId, className: cx.carrier, "data-sf-shipment-title": true, children: [
+        carrier && !test ? /* @__PURE__ */ jsxs("span", { "data-sf-shipment-eyebrow": true, children: [
+          m["shipment.carrier"],
+          /* @__PURE__ */ jsx(Hidden, { children: ": " })
+        ] }) : null,
         isReturn ? m["shipment.return"] : carrier ?? m["shipment.title"],
         isReturn && carrier ? /* @__PURE__ */ jsxs(Fragment, { children: [
           " \xB7 ",
@@ -1225,6 +1253,69 @@ function PendingPaymentList({ payments, voucherHref, shopName, classNames, listC
     /* @__PURE__ */ jsx("ul", { className: lc.list, children: sorted.map((p) => /* @__PURE__ */ jsx("li", { className: lc.item, children: /* @__PURE__ */ jsx(PendingPaymentCard, { payment: p, ...voucherHref ? { voucherHref } : {}, ...shopName ? { shopName } : {}, ...classNames ? { classNames } : {}, headingLevel: cardHeading, ...text }) }, p.id)) })
   ] });
 }
+
+// src/account/payment-method.ts
+var FAMILY = {
+  card: "card",
+  credit_card: "credit_card",
+  debit_card: "debit_card",
+  cash_voucher: "cash_voucher",
+  oxxo: "oxxo",
+  spei: "spei",
+  transfer: "transfer",
+  bank_transfer: "transfer",
+  bank_deposit: "bank_deposit",
+  wallet: "wallet",
+  cash: "cash",
+  other: "other"
+};
+var KEYWORDS = [
+  [/oxxo/, "oxxo"],
+  [/spei/, "spei"],
+  [/d[eé]bit/, "debit_card"],
+  [/cr[eé]dit/, "credit_card"],
+  [/card|tarjeta/, "card"],
+  [/deposit|dep[oó]sito/, "bank_deposit"],
+  [/transfer/, "transfer"],
+  [/wallet|billetera|paypal|mercado ?pago|apple ?pay|google ?pay/, "wallet"],
+  [/voucher|ficha|convenience|conveniencia|store|tienda/, "cash_voucher"],
+  [/cash|efectivo/, "cash"]
+];
+var BRANDS = { visa: "Visa", mastercard: "Mastercard", master: "Mastercard", amex: "American Express", american_express: "American Express", carnet: "Carnet", discover: "Discover" };
+var RAW = /^[A-Za-z0-9_.:-]+(?: [A-Za-z0-9_.:-]+)?$/;
+function paymentMethodKey(p) {
+  return keyOf(p);
+}
+function keyOf(p) {
+  const fam = typeof p.family === "string" ? p.family.toLowerCase() : "";
+  const byLabel = () => {
+    const label = typeof p.method_label === "string" ? p.method_label.toLowerCase().replace(/[_-]+/g, " ") : "";
+    for (const [re, key] of KEYWORDS) if (re.test(label)) return key;
+    return null;
+  };
+  if (fam && fam !== "other" && FAMILY[fam]) {
+    const l = byLabel();
+    return fam === "card" && (l === "credit_card" || l === "debit_card") ? l : FAMILY[fam];
+  }
+  return byLabel() ?? (fam === "other" ? "other" : null);
+}
+function paymentLabel(p, m, options = {}) {
+  const custom = options.override?.(p);
+  if (typeof custom === "string" && custom.trim()) return custom.trim();
+  const raw = typeof p.method_label === "string" ? p.method_label.trim() : "";
+  const key = keyOf(p);
+  const human = raw && !RAW.test(raw);
+  if (human && /\d{4}/.test(raw)) return raw;
+  if (key) {
+    const base = m[`payment.method.${key}`];
+    if (key !== "card" && key !== "credit_card" && key !== "debit_card") return human && key === "other" ? raw : base;
+    const brandRaw = typeof p.brand === "string" ? p.brand.trim() : "";
+    const brand = brandRaw ? BRANDS[brandRaw.toLowerCase().replace(/[ -]/g, "_")] ?? brandRaw : "";
+    const last4 = typeof p.last4 === "string" && /^\d{2,4}$/.test(p.last4.trim()) ? p.last4.trim() : "";
+    return `${base}${brand ? ` ${brand}` : ""}${last4 ? ` \u2022\u2022\u2022\u2022 ${last4}` : ""}`;
+  }
+  return human ? raw : m["payment.method.unknown"];
+}
 var tone = (s) => s === "completed" ? "done" : s === "failed" ? "problem" : "current";
 function RefundList({ refunds, showEmpty = false, degraded, onRetry, headingLevel = 3, classNames: cx = {}, ...text }) {
   const { m, locale, date } = useAccountText(text);
@@ -1250,7 +1341,7 @@ function RefundList({ refunds, showEmpty = false, degraded, onRetry, headingLeve
       /* @__PURE__ */ jsxs("span", { className: cx.meta, children: [
         str(r.method_label) ? /* @__PURE__ */ jsxs(Fragment, { children: [
           " \xB7 ",
-          str(r.method_label)
+          paymentLabel({ method_label: r.method_label ?? "", status: "paid", amount: r.amount }, m)
         ] }) : null,
         r.completed_at ? /* @__PURE__ */ jsxs(Fragment, { children: [
           " \xB7 ",
@@ -1263,7 +1354,7 @@ function RefundList({ refunds, showEmpty = false, degraded, onRetry, headingLeve
     ] }, r.id)) })
   ] });
 }
-function PaymentSummary({ payments, headingLevel = 3, classNames: cx = {}, ...text }) {
+function PaymentSummary({ payments, headingLevel = 3, methodLabel, classNames: cx = {}, ...text }) {
   const { m, locale, date } = useAccountText(text);
   const titleId = `sf-payments-${useId().replace(/:/g, "")}`;
   const items = (Array.isArray(payments) ? payments : []).filter((p) => !!p && typeof p === "object" && typeof p.method_label === "string");
@@ -1271,8 +1362,8 @@ function PaymentSummary({ payments, headingLevel = 3, classNames: cx = {}, ...te
   const Heading = `h${headingLevel}`;
   return /* @__PURE__ */ jsxs("section", { className: cx.root, "aria-labelledby": titleId, "data-sf-payments": true, children: [
     /* @__PURE__ */ jsx(Heading, { id: titleId, className: cx.title, children: m["payment.title"] }),
-    /* @__PURE__ */ jsx("ul", { className: cx.list, children: items.map((p, i) => /* @__PURE__ */ jsxs("li", { className: cx.item, "data-sf-payment": true, "data-sf-payment-status": typeof p.status === "string" ? p.status : "unknown", children: [
-      /* @__PURE__ */ jsx("span", { children: p.method_label }),
+    /* @__PURE__ */ jsx("ul", { className: cx.list, children: items.map((p, i) => /* @__PURE__ */ jsxs("li", { className: cx.item, "data-sf-payment": true, "data-sf-payment-method-key": paymentMethodKey(p) ?? "unknown", "data-sf-payment-status": typeof p.status === "string" ? p.status : "unknown", children: [
+      /* @__PURE__ */ jsx("span", { "data-sf-payment-method": true, children: paymentLabel(p, m, methodLabel ? { override: methodLabel } : {}) }),
       moneyText(p.amount, locale) ? /* @__PURE__ */ jsxs(Fragment, { children: [
         " \xB7 ",
         /* @__PURE__ */ jsx("span", { children: moneyText(p.amount, locale) })
@@ -1420,6 +1511,6 @@ function useCustomerOrder(id, { client, initial, poll } = {}) {
   return { status: mine ? state.status : "loading", order, error: mine ? state.error : null, refreshing: mine && refreshing, reload };
 }
 
-export { AccountAuth, Barcode, InvoiceList, NextActionBar, OrderCard, OrderLines, OrderList, OrderProductsStack, OrderProgress, OrderStatusBadge, PaymentSummary, PendingPaymentCard, PendingPaymentList, PostPurchaseAccountPrompt, RefundList, ShipmentCard, accountAuthMessages, accountMessages, enumText, lineImage, postPurchaseAccountPromptMessages, stageTone, useCustomerOrder, useCustomerOrders, usePendingPayments };
+export { AccountAuth, Barcode, InvoiceList, NextActionBar, OrderCard, OrderLines, OrderList, OrderProductsStack, OrderProgress, OrderStatusBadge, PaymentSummary, PendingPaymentCard, PendingPaymentList, PostPurchaseAccountPrompt, RefundList, ShipmentCard, accountAuthMessages, accountMessages, enumText, lineImage, paymentLabel, paymentMethodKey, postPurchaseAccountPromptMessages, stageTone, useCustomerOrder, useCustomerOrders, usePendingPayments };
 //# sourceMappingURL=account.js.map
 //# sourceMappingURL=account.js.map