@asteby/storefront-react 0.9.0 → 0.10.0

package/dist/payments.cjs

@@ -784,6 +784,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.",
@@ -811,6 +812,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.",
@@ -828,6 +830,178 @@ function paymentMethodMessages(locale, overrides) {
   const { options, ...rest } = overrides;
   return { ...base, ...rest, options: { ...base.options, ...options } };
 }
+
+// src/checkout/brands.ts
+var B = (key, name, kind, bg, fg, mark, shape) => ({
+  key,
+  name,
+  kind,
+  bg,
+  fg,
+  ...mark ? { mark } : {},
+  ...shape ? { shape } : {}
+});
+var LIST = [
+  // Parcel carriers (Mexico and global).
+  B("fedex", "FedEx", "carrier", "#4D148C", "#FFFFFF"),
+  B("dhl", "DHL", "carrier", "#FFCC00", "#B00410"),
+  B("estafeta", "Estafeta", "carrier", "#C8102E", "#FFFFFF"),
+  B("paquetexpress", "Paquetexpress", "carrier", "#0B4EA2", "#FFFFFF", "Paquet\nexpress"),
+  B("ups", "UPS", "carrier", "#351C15", "#FFB500"),
+  B("redpack", "Redpack", "carrier", "#C8102E", "#FFFFFF"),
+  B("99minutos", "99 Minutos", "carrier", "#00704A", "#FFFFFF", "99"),
+  B("jtexpress", "J&T Express", "carrier", "#C8102E", "#FFFFFF", "J&T"),
+  B("sendex", "Sendex", "carrier", "#003A70", "#FFFFFF"),
+  B("ampm", "AMPM", "carrier", "#1D1D1B", "#FFFFFF"),
+  B("tresguerras", "Tresguerras", "carrier", "#005BAC", "#FFFFFF", "3G"),
+  B("quiken", "Quiken", "carrier", "#1D1D1B", "#FFFFFF"),
+  B("imile", "iMile", "carrier", "#0057B8", "#FFFFFF"),
+  B("carssa", "Carssa", "carrier", "#00529B", "#FFFFFF"),
+  B("correosdemexico", "Correos de M\xE9xico", "carrier", "#7A1E3A", "#FFFFFF", "Correos\nM\xE9xico"),
+  B("usps", "USPS", "carrier", "#333366", "#FFFFFF"),
+  B("canadapost", "Canada Post", "carrier", "#DA291C", "#FFFFFF", "CPC"),
+  // Card networks.
+  B("visa", "Visa", "card", "#1A1F71", "#FFFFFF", "VISA"),
+  B("mastercard", "Mastercard", "card", "#FFFFFF", "#1D1D1B", "MC", "mastercard"),
+  B("amex", "American Express", "card", "#1F72CD", "#FFFFFF", "AMEX"),
+  B("carnet", "Carnet", "card", "#003B71", "#FFFFFF"),
+  // Wallets and payment providers.
+  B("mercadopago", "Mercado Pago", "wallet", "#00B1EA", "#0B1F4E", "mercado\npago"),
+  B("paypal", "PayPal", "wallet", "#003087", "#FFFFFF"),
+  B("clip", "Clip", "wallet", "#FC4C02", "#1D1D1B"),
+  B("applepay", "Apple Pay", "wallet", "#000000", "#FFFFFF", "Pay"),
+  B("googlepay", "Google Pay", "wallet", "#FFFFFF", "#3C4043", "G Pay"),
+  // Cash points and transfers (Mexico).
+  B("oxxo", "OXXO", "cash", "#E21E26", "#FFE600"),
+  B("spei", "SPEI", "bank", "#14365F", "#FFFFFF"),
+  B("stp", "STP", "bank", "#14365F", "#FFFFFF", "SPEI"),
+  B("7eleven", "7-Eleven", "cash", "#00704A", "#FFFFFF", "7-11"),
+  B("circlek", "Circle K", "cash", "#DA291C", "#FFFFFF", "K"),
+  B("soriana", "Soriana", "cash", "#C8102E", "#FFFFFF"),
+  B("extra", "Extra", "cash", "#E35205", "#FFFFFF"),
+  B("kiosko", "Kiosko", "cash", "#C8102E", "#FFFFFF"),
+  B("calimax", "Calimax", "cash", "#D52B1E", "#FFFFFF"),
+  B("farmaciasyza", "Farmacias Yza", "cash", "#0A5A9C", "#FFFFFF", "Yza"),
+  B("chedraui", "Chedraui", "cash", "#0047BB", "#FFFFFF"),
+  B("casaley", "Casa Ley", "cash", "#C8102E", "#FFFFFF", "Ley"),
+  B("telecomm", "Telecomm", "cash", "#6F1D46", "#FFFFFF"),
+  B("walmart", "Walmart", "cash", "#0071CE", "#FFFFFF"),
+  B("santander", "Santander", "bank", "#C00000", "#FFFFFF"),
+  B("bbva", "BBVA", "bank", "#004481", "#FFFFFF"),
+  B("citibanamex", "Citibanamex", "bank", "#004B8D", "#FFFFFF", "Citi"),
+  B("banorte", "Banorte", "bank", "#C8102E", "#FFFFFF")
+];
+var ALIASES = {
+  fedexmx: "fedex",
+  fedexexpress: "fedex",
+  dhlexpress: "dhl",
+  dhlmx: "dhl",
+  paquetexpres: "paquetexpress",
+  paqueteexpress: "paquetexpress",
+  jt: "jtexpress",
+  jandtexpress: "jtexpress",
+  noventaynueveminutos: "99minutos",
+  correos: "correosdemexico",
+  sepomex: "correosdemexico",
+  master: "mastercard",
+  americanexpress: "amex",
+  mercadopagomx: "mercadopago",
+  mp: "mercadopago",
+  clabe: "spei",
+  banktransfer: "spei",
+  seveneleven: "7eleven",
+  "711": "7eleven",
+  circulok: "circlek",
+  yza: "farmaciasyza",
+  bancomer: "bbva",
+  banamex: "citibanamex",
+  ley: "casaley"
+};
+var BY_KEY = new Map(LIST.map((b) => [b.key, b]));
+function brandKey(raw) {
+  const flat = (raw ?? "").normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().replace(/&/g, "and").replace(/[^a-z0-9]/g, "");
+  const noCountry = flat.endsWith("mexico") && flat !== "correosdemexico" ? flat.slice(0, -6) : flat;
+  return ALIASES[noCountry] ?? (BY_KEY.has(noCountry) ? noCountry : ALIASES[flat] ?? flat);
+}
+function findBrand(raw) {
+  return BY_KEY.get(brandKey(raw)) ?? null;
+}
+function brandName(raw) {
+  const brand = findBrand(raw);
+  if (brand) return brand.name;
+  const text = (raw ?? "").trim();
+  if (!text) return null;
+  if (text !== text.toLowerCase() && text !== text.toUpperCase()) return text;
+  return text.toLowerCase().split(/[\s_-]+/).filter(Boolean).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+}
+function safeLogo(url) {
+  if (!url) return null;
+  try {
+    return new URL(url).protocol === "https:" ? url : null;
+  } catch {
+    return null;
+  }
+}
+function monogram(raw) {
+  const words = (brandName(raw) ?? raw).split(/\s+/).filter(Boolean);
+  const letters = words.length > 1 ? words.slice(0, 2).map((w) => w[0]) : [(words[0] ?? "?").slice(0, 2)];
+  return letters.join("").toUpperCase();
+}
+function BrandMark({ brand, logoUrl, size = 24, title, className }) {
+  const height = size;
+  const width = Math.round(size * 1.5);
+  const a11y = title ? { role: "img", "aria-label": title } : { "aria-hidden": true };
+  const logo = safeLogo(logoUrl);
+  const found = findBrand(brand);
+  const key = found?.key ?? "generic";
+  const style = { width, height, flex: "none" };
+  if (logo) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: logo,
+        alt: title ?? "",
+        width,
+        height,
+        loading: "lazy",
+        decoding: "async",
+        className,
+        style: { ...style, objectFit: "contain" },
+        "data-sf-brand-mark": key,
+        ...title ? {} : { "aria-hidden": true }
+      }
+    );
+  }
+  const ring = "var(--sf-brand-mark-ring, rgb(127 127 127 / 0.35))";
+  if (found?.shape === "mastercard") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 48 32", width, height, className, style, "data-sf-brand-mark": key, focusable: "false", ...a11y, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0.5", y: "0.5", width: "47", height: "31", rx: "5", fill: found.bg, stroke: ring }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "19", cy: "16", r: "9", fill: "#EB001B" }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "29", cy: "16", r: "9", fill: "#F79E1B" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M24 8.52a9 9 0 0 1 0 14.96a9 9 0 0 1 0-14.96z", fill: "#FF5F00" })
+    ] });
+  }
+  const text = found ? found.mark ?? found.name : monogram(brand ?? "");
+  const bg = found?.bg ?? "var(--sf-brand-mark-bg, #E7E9EE)";
+  const fg = found?.fg ?? "var(--sf-brand-mark-fg, #2B2F38)";
+  const lines = text.split("\n");
+  const longest = Math.max(...lines.map((l) => l.length));
+  const fontSize = lines.length > 1 ? longest <= 5 ? 11 : 9.5 : longest <= 2 ? 15 : longest <= 4 ? 12 : 10;
+  const fit = (l) => l.length > 5 ? { textLength: 40, lengthAdjust: "spacingAndGlyphs" } : {};
+  const italic = found?.key === "visa" || found?.key === "fedex" ? "italic" : void 0;
+  const common = {
+    textAnchor: "middle",
+    fill: fg,
+    fontFamily: "system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif",
+    fontWeight: 800,
+    fontSize,
+    fontStyle: italic
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 48 32", width, height, className, style, "data-sf-brand-mark": key, focusable: "false", ...a11y, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0.5", y: "0.5", width: "47", height: "31", rx: "5", fill: bg, stroke: ring }),
+    lines.length > 1 ? lines.slice(0, 2).map((l, i) => /* @__PURE__ */ jsxRuntime.jsx("text", { x: "24", y: i === 0 ? 15 : 25.5, ...common, ...fit(l), children: l }, i)) : /* @__PURE__ */ jsxRuntime.jsx("text", { x: "24", y: "16", dominantBaseline: "central", letterSpacing: longest <= 4 ? 0.3 : 0, ...common, ...fit(text), children: text })
+  ] });
+}
 var PAYMENT_CHOICE_FIELD = "payment_choice";
 var CASH_POINT_FIELD = "cash_point";
 function formFields(form) {
@@ -861,6 +1035,8 @@ function PaymentMethodSection(props) {
     nonce,
     methodLabel,
     icons,
+    brandMarks = true,
+    cardBrands = [],
     renderAmount,
     rebuildHref,
     renderLink,
@@ -886,7 +1062,7 @@ function PaymentMethodSection(props) {
   const brick = react.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] = react.useState(null);
   const syncRef = react.useRef(syncDelivery);
   syncRef.current = syncDelivery;
@@ -895,7 +1071,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 () => {
@@ -904,7 +1080,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 = react.useMemo(
     () => props.transport ?? createFetchTransport(payUrl, {
@@ -925,15 +1102,19 @@ function PaymentMethodSection(props) {
     }
     onEvent?.(e);
   };
-  const total = renderAmount ? renderAmount(amount) : storefront.formatMoney(amount, locale);
+  const total = wantSync && (!settled || requote) ? null : renderAmount ? renderAmount(amount) : storefront.formatMoney(amount, locale);
   const label = retryAddress ? m.retryAddress : addressFirst ? m.continue : selected?.mode === "plain" || !selected ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     m.pay,
-    " ",
-    total
+    total ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      " ",
+      total
+    ] }) : null
   ] }) : selected.mode === "redirect" || selected.mode === "card" && (fallback || syncFailed) ? m.payRedirect : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     m.placeOrder,
-    " ",
-    total
+    total ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      " ",
+      total
+    ] }) : null
   ] });
   function onPayClick(event) {
     if (!cardActive || syncFailed) return;
@@ -949,7 +1130,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__ */ jsxRuntime.jsxs("div", { className: cx.choice, "data-sf-pay-choice": true, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cx.radioLabel, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -974,9 +1157,10 @@ function PaymentMethodSection(props) {
               " ",
               hint
             ] }) : null
-          ] })
+          ] }),
+          marks.length ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx.brands, "data-sf-pay-brands": choice.option ?? "plain", "aria-hidden": "true", children: marks.map((mk) => /* @__PURE__ */ jsxRuntime.jsx(BrandMark, { brand: mk.key, logoUrl: mk.logoUrl ?? null, size: 20 }, mk.key)) }) : null
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(ChoicePanel, { choice, m, invalid, cx, tid, hidden: hydrated && !checked })
+        /* @__PURE__ */ jsxRuntime.jsx(ChoicePanel, { choice, m, invalid, cx, tid, hidden: hydrated && !checked, marks: brandMarks })
       ] }, choice.value);
     }),
     noPayment ? /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "alert", className: cx.alert, "data-sf-pay-notice": "no-payment", ...tid("noPayment"), children: [
@@ -984,7 +1168,7 @@ function PaymentMethodSection(props) {
       /* @__PURE__ */ jsxRuntime.jsx("p", { children: m.noPayment })
     ] }) : null,
     cardChosen && hydrated && choices.cardClient ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
         PaymentBrick,
         {
@@ -1035,7 +1219,8 @@ function ChoicePanel({
   invalid,
   cx,
   tid,
-  hidden
+  hidden,
+  marks = true
 }) {
   if (choice.mode === "redirect") {
     return /* @__PURE__ */ jsxRuntime.jsx("p", { className: cx.panel, hidden, "data-sf-pay-panel": "redirect", ...tid("redirectNote"), children: m.redirectNote });
@@ -1045,6 +1230,7 @@ function ChoicePanel({
   const more = choice.points.filter((p) => p.group !== "main");
   const row = (p, i, first) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cx.cashPoint, "data-sf-pay-point": true, children: [
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(BrandMark, { brand: p.payment_point || p.id, logoUrl: p.logo_url ?? null, size: 22 }) : null,
     /* @__PURE__ */ jsxRuntime.jsx("span", { children: p.label })
   ] }, p.id);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx.panel, hidden, "data-sf-pay-panel": "cash", ...tid("cash"), children: [
@@ -1059,6 +1245,30 @@ function ChoicePanel({
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: cx.note, children: m.cashNote })
   ] });
 }
+var glyph = (d) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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 [];
+}
 
 // src/payments/choices.ts
 var SEP = "|";