@asteby/storefront-react 0.9.0 → 0.11.0

package/dist/payments.css

@@ -28,3 +28,30 @@
 [data-sf-pay-method] [data-sf-pay-method-submit] {
   min-height: 44px;
 }
+/* Brand marks (`brandMarks`): trailing marks of a row (card networks, first cash points) and the mark of each point. */
+[data-sf-pay-method] [data-sf-pay-brands] {
+  display: inline-flex;
+  flex: none;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.25rem;
+  margin-inline-start: auto;
+}
+[data-sf-pay-method] [data-sf-pay-glyph] {
+  display: block;
+  opacity: 0.8;
+}
+[data-sf-pay-method] [data-sf-brand-mark] {
+  display: inline-block;
+  vertical-align: middle;
+}
+/* The open cash row already lists every point with its mark: the preview would repeat them. */
+[data-sf-pay-method] [data-sf-pay-choice]:has(input[name='payment_choice']:checked) [data-sf-pay-brands='cash'] {
+  display: none;
+}
+@media (max-width: 24rem) {
+  /* Narrow phones: the row text wins over the preview marks. */
+  [data-sf-pay-method] [data-sf-pay-choice] [data-sf-pay-brands] [data-sf-brand-mark]:nth-child(n + 3) {
+    display: none;
+  }
+}

package/dist/payments.d.cts

@@ -341,6 +341,8 @@ type PaymentMethodMessages = {
     pickDeliveryFirst: string;
     updatingTotal: string;
     syncFailed: string;
+    /** The shipping quote expired or changed: fresh rates are loading. */
+    quoteChanged: string;
     rebuildCart: string;
     noPaymentTitle: string;
     noPayment: string;
@@ -359,7 +361,7 @@ declare const PAYMENT_CHOICE_FIELD = "payment_choice";
 declare const CASH_POINT_FIELD = "cash_point";
 /** Fields of the page form (contact, delivery, address, method) for the JSON POST of the embedded payment. */
 declare function formFields(form: HTMLFormElement | null | undefined): Record<string, string>;
-type PaymentMethodClassNames = Partial<Record<'root' | 'legend' | 'choice' | 'radioLabel' | 'radio' | 'labelText' | 'hint' | 'icon' | 'panel' | 'cashPoint' | 'cashPointInput' | 'cashMore' | 'note' | 'alert' | 'status' | 'brickWrap' | 'brick' | 'submit' | 'rebuild', string>>;
+type PaymentMethodClassNames = Partial<Record<'root' | 'legend' | 'choice' | 'radioLabel' | 'radio' | 'labelText' | 'hint' | 'icon' | 'brands' | 'panel' | 'cashPoint' | 'cashPointInput' | 'cashMore' | 'note' | 'alert' | 'status' | 'brickWrap' | 'brick' | 'submit' | 'rebuild', string>>;
 type PaymentMethodTestIds = Partial<Record<'method' | 'submit' | 'cash' | 'redirectNote' | 'card' | 'syncing' | 'syncFailed' | 'rebuild' | 'noPayment', string>>;
 type PaymentMethodSectionProps = {
     /** From `buildPayChoices(payment.methods)`. */
@@ -382,9 +384,14 @@ type PaymentMethodSectionProps = {
     deliveryReady?: boolean;
     /**
      * Saves the chosen delivery on the server cart so the server total includes it. Resolve `true` once the new total
-     * has been read back (the `amount` prop is then up to date). Called once per delivery. Without it nothing waits.
+     * has been read back (the `amount` prop is then up to date). Called once per delivery, whatever the payment row (so
+     * the total on the button and in the shop's summary always holds the chosen delivery). Without it nothing waits.
+     *
+     * Resolve `'requote'` when the server refused the rate because the quote expired or changed and the shop is loading
+     * fresh rates: the section then says so (`quoteChanged`, a status, not an error), keeps the card in the page and
+     * tries again with the next delivery value. `false` is a real failure (the card degrades to the redirect).
      */
-    syncDelivery?: (delivery: string) => Promise<boolean>;
+    syncDelivery?: (delivery: string) => Promise<boolean | 'requote'>;
     /** A two-step checkout still collecting the address: the button reads "continue" and no card form shows. */
     addressFirst?: boolean;
     /** The address must be saved again before paying. */
@@ -403,8 +410,16 @@ type PaymentMethodSectionProps = {
         label: string;
         hint?: string;
     };
-    /** Per-row icon by option (`card`, `cash`, `wallet`, `credits`) or `plain`. */
+    /** Per-row icon by option (`card`, `cash`, `wallet`, `credits`) or `plain`. Replaces the default marks of that row. */
     icons?: Partial<Record<PaymentOptionKey | 'plain', ReactNode>>;
+    /**
+     * Brand marks (`BrandMark`): the provider's mark on its account / no-card rows and on a plain method, the cash point
+     * marks on the cash row and next to each point, and `cardBrands` on the card row. Default true; `false` keeps the
+     * rows text-only.
+     */
+    brandMarks?: boolean;
+    /** Card networks drawn on the card row (`visa`, `mastercard`, `amex`, `carnet`…), as the shop's provider accepts them. */
+    cardBrands?: readonly string[];
     /** How to print the total on the button. Default `formatMoney`. */
     renderAmount?: (amount: Money) => ReactNode;
     /** Anchor to the cart for the "rebuild" action when the cart expired. Default: plain `<a href>`. */

package/dist/payments.d.ts

@@ -341,6 +341,8 @@ type PaymentMethodMessages = {
     pickDeliveryFirst: string;
     updatingTotal: string;
     syncFailed: string;
+    /** The shipping quote expired or changed: fresh rates are loading. */
+    quoteChanged: string;
     rebuildCart: string;
     noPaymentTitle: string;
     noPayment: string;
@@ -359,7 +361,7 @@ declare const PAYMENT_CHOICE_FIELD = "payment_choice";
 declare const CASH_POINT_FIELD = "cash_point";
 /** Fields of the page form (contact, delivery, address, method) for the JSON POST of the embedded payment. */
 declare function formFields(form: HTMLFormElement | null | undefined): Record<string, string>;
-type PaymentMethodClassNames = Partial<Record<'root' | 'legend' | 'choice' | 'radioLabel' | 'radio' | 'labelText' | 'hint' | 'icon' | 'panel' | 'cashPoint' | 'cashPointInput' | 'cashMore' | 'note' | 'alert' | 'status' | 'brickWrap' | 'brick' | 'submit' | 'rebuild', string>>;
+type PaymentMethodClassNames = Partial<Record<'root' | 'legend' | 'choice' | 'radioLabel' | 'radio' | 'labelText' | 'hint' | 'icon' | 'brands' | 'panel' | 'cashPoint' | 'cashPointInput' | 'cashMore' | 'note' | 'alert' | 'status' | 'brickWrap' | 'brick' | 'submit' | 'rebuild', string>>;
 type PaymentMethodTestIds = Partial<Record<'method' | 'submit' | 'cash' | 'redirectNote' | 'card' | 'syncing' | 'syncFailed' | 'rebuild' | 'noPayment', string>>;
 type PaymentMethodSectionProps = {
     /** From `buildPayChoices(payment.methods)`. */
@@ -382,9 +384,14 @@ type PaymentMethodSectionProps = {
     deliveryReady?: boolean;
     /**
      * Saves the chosen delivery on the server cart so the server total includes it. Resolve `true` once the new total
-     * has been read back (the `amount` prop is then up to date). Called once per delivery. Without it nothing waits.
+     * has been read back (the `amount` prop is then up to date). Called once per delivery, whatever the payment row (so
+     * the total on the button and in the shop's summary always holds the chosen delivery). Without it nothing waits.
+     *
+     * Resolve `'requote'` when the server refused the rate because the quote expired or changed and the shop is loading
+     * fresh rates: the section then says so (`quoteChanged`, a status, not an error), keeps the card in the page and
+     * tries again with the next delivery value. `false` is a real failure (the card degrades to the redirect).
      */
-    syncDelivery?: (delivery: string) => Promise<boolean>;
+    syncDelivery?: (delivery: string) => Promise<boolean | 'requote'>;
     /** A two-step checkout still collecting the address: the button reads "continue" and no card form shows. */
     addressFirst?: boolean;
     /** The address must be saved again before paying. */
@@ -403,8 +410,16 @@ type PaymentMethodSectionProps = {
         label: string;
         hint?: string;
     };
-    /** Per-row icon by option (`card`, `cash`, `wallet`, `credits`) or `plain`. */
+    /** Per-row icon by option (`card`, `cash`, `wallet`, `credits`) or `plain`. Replaces the default marks of that row. */
     icons?: Partial<Record<PaymentOptionKey | 'plain', ReactNode>>;
+    /**
+     * Brand marks (`BrandMark`): the provider's mark on its account / no-card rows and on a plain method, the cash point
+     * marks on the cash row and next to each point, and `cardBrands` on the card row. Default true; `false` keeps the
+     * rows text-only.
+     */
+    brandMarks?: boolean;
+    /** Card networks drawn on the card row (`visa`, `mastercard`, `amex`, `carnet`…), as the shop's provider accepts them. */
+    cardBrands?: readonly string[];
     /** How to print the total on the button. Default `formatMoney`. */
     renderAmount?: (amount: Money) => ReactNode;
     /** Anchor to the cart for the "rebuild" action when the cart expired. Default: plain `<a href>`. */

package/dist/payments.js

@@ -1,6 +1,8 @@
 import { isSafeCssValue } from './chunk-672OTUM2.js';
+import { BrandMark, findBrand } from './chunk-3ZJTDFHE.js';
 export { buildPayChoices, cashProviderData, checkoutToAttempt, choiceValue, parseChoice, payErrorResponse, paymentCsp, paymentCspHeaderName, paymentCspHeaders, paymentCspMode, paymentNonce, paymentNonceFromHeaders, voucherRows } from './chunk-ISEOCKIR.js';
-import { useResolvedLocale, useModalDialog } from './chunk-2WZIWIBW.js';
+import { useModalDialog } from './chunk-ZBH7JYU4.js';
+import { useResolvedLocale } from './chunk-T52H5HL3.js';
 import './chunk-DQBL2DFJ.js';
 import { forwardRef, useImperativeHandle, useRef, useEffect, useMemo, useId, useState, useCallback, useSyncExternalStore } from 'react';
 import { paymentMessages, formatMoney, generateIdempotencyKey, paymentOutcome, paymentErrorView, formatVoucherExpiry } from '@asteby/storefront';
@@ -101,6 +103,11 @@ function mercadoPagoBricksAdapter(options = {}) {
           paymentMethods: { minInstallments: 1, ...card?.max_installments ? { maxInstallments: card.max_installments } : {} },
           visual: {
             hidePaymentButton: true,
+            // El encabezado del Brick ("Tarjeta de crédito o débito" + banderas de tarjetas
+            // aceptadas) lo dibuja Mercado Pago, repite lo que la tienda ya muestra en su propia
+            // fila de método de pago y se veía cortado (p. ej. AMEX partido). hideFormTitle oculta
+            // la línea del título y las banderas.
+            hideFormTitle: true,
             style: { theme: "default", ...opts.theme && Object.keys(opts.theme).length ? { customVariables: opts.theme } : {} }
           }
         },
@@ -654,6 +661,7 @@ var ES = {
   pickDeliveryFirst: "Elige primero la entrega para ver el total y pagar con tarjeta.",
   updatingTotal: "Actualizando el total\u2026",
   syncFailed: "No pudimos actualizar el total con tu entrega. Puedes continuar al sitio del proveedor para pagar con tarjeta.",
+  quoteChanged: "Las tarifas de env\xEDo se actualizaron. Revisa tu env\xEDo para ver el total.",
   rebuildCart: "Volver a armar mi carrito",
   noPaymentTitle: "Por ahora no hay formas de pago disponibles",
   noPayment: "Intenta de nuevo en unos minutos o escr\xEDbenos para completar tu pedido.",
@@ -681,6 +689,7 @@ var EN = {
   pickDeliveryFirst: "Choose delivery first to see the total and pay by card.",
   updatingTotal: "Updating the total\u2026",
   syncFailed: "We couldn't update the total with your delivery. You can continue to the provider's site to pay by card.",
+  quoteChanged: "Shipping rates were updated. Check your delivery to see the total.",
   rebuildCart: "Rebuild my cart",
   noPaymentTitle: "No payment methods are available right now",
   noPayment: "Try again in a few minutes or contact us to complete your order.",
@@ -731,6 +740,8 @@ function PaymentMethodSection(props) {
     nonce,
     methodLabel,
     icons,
+    brandMarks = true,
+    cardBrands = [],
     renderAmount,
     rebuildHref,
     renderLink,
@@ -756,7 +767,7 @@ function PaymentMethodSection(props) {
   const brick = useRef(null);
   const cardChosen = selected?.mode === "card" && !retryAddress && !addressFirst;
   const cardActive = hydrated && cardChosen && !fallback;
-  const wantSync = cardActive && deliveryReady && Boolean(syncDelivery);
+  const wantSync = hydrated && selected !== null && !addressFirst && !retryAddress && deliveryReady && Boolean(syncDelivery);
   const [sync, setSync] = useState(null);
   const syncRef = useRef(syncDelivery);
   syncRef.current = syncDelivery;
@@ -765,7 +776,7 @@ function PaymentMethodSection(props) {
     if (sync?.key === delivery && sync.ok) return;
     let cancelled = false;
     syncRef.current(delivery).then(
-      (ok) => !cancelled && setSync({ key: delivery, ok }),
+      (ok) => !cancelled && setSync(ok === "requote" ? { key: delivery, ok: false, requote: true } : { key: delivery, ok }),
       () => !cancelled && setSync({ key: delivery, ok: false })
     );
     return () => {
@@ -774,7 +785,8 @@ function PaymentMethodSection(props) {
   }, [wantSync, delivery]);
   const settled = sync?.key === delivery;
   const synced = !syncDelivery || settled && sync.ok;
-  const syncFailed = wantSync && settled && !sync.ok;
+  const requote = wantSync && settled && sync.requote === true;
+  const syncFailed = wantSync && settled && !sync.ok && !requote;
   const brickReady = cardActive && deliveryReady && synced && !syncFailed;
   const transport = useMemo(
     () => props.transport ?? createFetchTransport(payUrl, {
@@ -795,15 +807,19 @@ function PaymentMethodSection(props) {
     }
     onEvent?.(e);
   };
-  const total = renderAmount ? renderAmount(amount) : formatMoney(amount, locale);
+  const total = wantSync && (!settled || requote) ? null : renderAmount ? renderAmount(amount) : formatMoney(amount, locale);
   const label = retryAddress ? m.retryAddress : addressFirst ? m.continue : selected?.mode === "plain" || !selected ? /* @__PURE__ */ jsxs(Fragment, { children: [
     m.pay,
-    " ",
-    total
+    total ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      " ",
+      total
+    ] }) : null
   ] }) : selected.mode === "redirect" || selected.mode === "card" && (fallback || syncFailed) ? m.payRedirect : /* @__PURE__ */ jsxs(Fragment, { children: [
     m.placeOrder,
-    " ",
-    total
+    total ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      " ",
+      total
+    ] }) : null
   ] });
   function onPayClick(event) {
     if (!cardActive || syncFailed) return;
@@ -819,7 +835,9 @@ function PaymentMethodSection(props) {
     choices.choices.map((choice) => {
       const { label: rowLabel, hint } = rowText(choice, m, methodLabel);
       const checked = choice.value === choiceValue2;
-      const icon = icons?.[choice.option ?? "plain"];
+      const slot = choice.option ?? "plain";
+      const icon = icons?.[slot] ?? (brandMarks ? defaultIcon(choice) : null);
+      const marks = brandMarks ? rowMarks(choice, cardBrands) : [];
       return /* @__PURE__ */ jsxs("div", { className: cx.choice, "data-sf-pay-choice": true, children: [
         /* @__PURE__ */ jsxs("label", { className: cx.radioLabel, children: [
           /* @__PURE__ */ jsx(
@@ -844,9 +862,10 @@ function PaymentMethodSection(props) {
               " ",
               hint
             ] }) : null
-          ] })
+          ] }),
+          marks.length ? /* @__PURE__ */ jsx("span", { className: cx.brands, "data-sf-pay-brands": choice.option ?? "plain", "aria-hidden": "true", children: marks.map((mk) => /* @__PURE__ */ jsx(BrandMark, { brand: mk.key, logoUrl: mk.logoUrl ?? null, size: 20 }, mk.key)) }) : null
         ] }),
-        /* @__PURE__ */ jsx(ChoicePanel, { choice, m, invalid, cx, tid, hidden: hydrated && !checked })
+        /* @__PURE__ */ jsx(ChoicePanel, { choice, m, invalid, cx, tid, hidden: hydrated && !checked, marks: brandMarks })
       ] }, choice.value);
     }),
     noPayment ? /* @__PURE__ */ jsxs("div", { role: "alert", className: cx.alert, "data-sf-pay-notice": "no-payment", ...tid("noPayment"), children: [
@@ -854,7 +873,7 @@ function PaymentMethodSection(props) {
       /* @__PURE__ */ jsx("p", { children: m.noPayment })
     ] }) : null,
     cardChosen && hydrated && choices.cardClient ? /* @__PURE__ */ jsxs("div", { className: cx.brickWrap, "data-sf-pay-card": true, ...tid("card"), children: [
-      fallback ? null : !deliveryReady ? cardNotice("pickDelivery", m.pickDeliveryFirst) : syncFailed ? cardNotice("syncFailed", m.syncFailed) : !synced ? cardNotice("syncing", m.updatingTotal) : null,
+      fallback ? null : !deliveryReady ? cardNotice("pickDelivery", m.pickDeliveryFirst) : syncFailed ? cardNotice("syncFailed", m.syncFailed) : requote ? cardNotice("requote", m.quoteChanged) : !synced ? cardNotice("syncing", m.updatingTotal) : null,
       brickReady || fallback ? /* @__PURE__ */ jsx(
         PaymentBrick,
         {
@@ -905,7 +924,8 @@ function ChoicePanel({
   invalid,
   cx,
   tid,
-  hidden
+  hidden,
+  marks = true
 }) {
   if (choice.mode === "redirect") {
     return /* @__PURE__ */ jsx("p", { className: cx.panel, hidden, "data-sf-pay-panel": "redirect", ...tid("redirectNote"), children: m.redirectNote });
@@ -915,6 +935,7 @@ function ChoicePanel({
   const more = choice.points.filter((p) => p.group !== "main");
   const row = (p, i, first) => /* @__PURE__ */ jsxs("label", { className: cx.cashPoint, "data-sf-pay-point": true, children: [
     /* @__PURE__ */ jsx("input", { type: "radio", name: CASH_POINT_FIELD, value: p.id, defaultChecked: first && i === 0, className: cx.cashPointInput, "aria-invalid": invalid?.has("cash_point") || void 0 }),
+    marks ? /* @__PURE__ */ jsx(BrandMark, { brand: p.payment_point || p.id, logoUrl: p.logo_url ?? null, size: 22 }) : null,
     /* @__PURE__ */ jsx("span", { children: p.label })
   ] }, p.id);
   return /* @__PURE__ */ jsxs("div", { className: cx.panel, hidden, "data-sf-pay-panel": "cash", ...tid("cash"), children: [
@@ -929,6 +950,30 @@ function ChoicePanel({
     /* @__PURE__ */ jsx("p", { className: cx.note, children: m.cashNote })
   ] });
 }
+var glyph = (d) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "24", height: "24", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round", focusable: "false", "data-sf-pay-glyph": true, children: /* @__PURE__ */ jsx("path", { d }) });
+var CARD_GLYPH = "M3 6.5h18v11H3zM3 10h18M6.5 14.5h4";
+var CASH_GLYPH = "M3 7h18v10H3zM12 14.5a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5zM6 10v4M18 10v4";
+function defaultIcon(choice) {
+  if (choice.option === "card") return glyph(CARD_GLYPH);
+  if (choice.option === "cash") return glyph(CASH_GLYPH);
+  return findBrand(choice.methodKey) ? /* @__PURE__ */ jsx(BrandMark, { brand: choice.methodKey, size: 24 }) : null;
+}
+function rowMarks(choice, cardBrands) {
+  if (choice.option === "card") return cardBrands.map((key) => ({ key }));
+  if (choice.option === "cash") {
+    const seen = /* @__PURE__ */ new Set();
+    const out = [];
+    for (const p of choice.points) {
+      const key = p.payment_point || p.id;
+      if (p.group !== "main" || seen.has(key)) continue;
+      seen.add(key);
+      out.push({ key, logoUrl: p.logo_url ?? null });
+      if (out.length === 4) break;
+    }
+    return out;
+  }
+  return [];
+}
 
 export { CASH_POINT_FIELD, MERCADOPAGO_BRICKS_KIND, PAYMENT_CHOICE_FIELD, PAYMENT_THEME_TOKENS, PaymentBrick, PaymentChallenge, PaymentHttpError, PaymentMethodSection, VoucherCard, createFetchTransport, formFields, loadPaymentSdk, mercadoPagoBricksAdapter, paymentMethodMessages, readPaymentTheme, resetPaymentSdkCache, sanitizeMercadoPagoFormData, useEmbeddedPayment };
 //# sourceMappingURL=payments.js.map