@asteby/storefront-react 0.8.0 → 0.9.0

package/dist/payments.js

@@ -1,7 +1,8 @@
 import { isSafeCssValue } from './chunk-672OTUM2.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 './chunk-DQBL2DFJ.js';
-import { forwardRef, useImperativeHandle, useRef, useEffect, useMemo, useId, useState, useCallback } from 'react';
+import { forwardRef, useImperativeHandle, useRef, useEffect, useMemo, useId, useState, useCallback, useSyncExternalStore } from 'react';
 import { paymentMessages, formatMoney, generateIdempotencyKey, paymentOutcome, paymentErrorView, formatVoucherExpiry } from '@asteby/storefront';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -636,45 +637,299 @@ function createFetchTransport(url, options = {}) {
   };
 }
 
-// src/payments/csp.ts
-var ORIGIN = /^https:\/\/(\*\.)?[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*(:\d{1,5})?$/i;
-function origins(...lists) {
-  const out = /* @__PURE__ */ new Set();
-  for (const list of lists) for (const o of list ?? []) if (ORIGIN.test(o)) out.add(o);
-  return [...out];
+// src/payments/payment-method.messages.ts
+var ES = {
+  legend: "M\xE9todo de pago",
+  pay: "Pagar",
+  placeOrder: "Realizar el pedido",
+  payRedirect: "Continuar al pago",
+  continue: "Continuar",
+  retryAddress: "Guardar direcci\xF3n y continuar",
+  processing: "Procesando\u2026",
+  redirectNote: "Te llevamos a la p\xE1gina del proveedor para terminar el pago y regresas aqu\xED.",
+  cashPoints: "Elige d\xF3nde pagar en efectivo",
+  cashMore: "Ver m\xE1s puntos de pago",
+  cashNote: "Al hacer el pedido te damos una ficha con la referencia y la fecha l\xEDmite. El pedido se confirma cuando pagas.",
+  secureCard: "Tus datos de tarjeta los captura directamente nuestro proveedor de pagos; la tienda nunca los ve.",
+  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.",
+  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.",
+  paymentNote: "El pago se procesa de forma segura con nuestro proveedor de pagos.",
+  options: {
+    card: "Tarjeta de cr\xE9dito o d\xE9bito",
+    cash: "Efectivo",
+    wallet: "Cuenta del proveedor de pagos",
+    credits: "Pagos sin tarjeta"
+  }
+};
+var EN = {
+  legend: "Payment method",
+  pay: "Pay",
+  placeOrder: "Place order",
+  payRedirect: "Continue to payment",
+  continue: "Continue",
+  retryAddress: "Save address and continue",
+  processing: "Processing\u2026",
+  redirectNote: "We'll take you to the provider's page to finish paying, then bring you back here.",
+  cashPoints: "Choose where to pay in cash",
+  cashMore: "Show more payment points",
+  cashNote: "When you place the order you get a slip with the reference and the deadline. The order is confirmed once you pay.",
+  secureCard: "Your card details are captured directly by our payment provider; the shop never sees them.",
+  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.",
+  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.",
+  paymentNote: "Payment is processed securely by our payment provider.",
+  options: {
+    card: "Credit or debit card",
+    cash: "Cash",
+    wallet: "Payment provider account",
+    credits: "Pay without a card"
+  }
+};
+function paymentMethodMessages(locale, overrides) {
+  const base = (locale ?? "es-MX").toLowerCase().startsWith("en") ? EN : ES;
+  if (!overrides) return base;
+  const { options, ...rest } = overrides;
+  return { ...base, ...rest, options: { ...base.options, ...options } };
 }
-function paymentCsp(clients, options = {}) {
-  const list = clients.filter((c) => !!c);
-  const pick = (k) => list.map((c) => c.csp?.[k]);
-  const nonce = options.nonce && /^[A-Za-z0-9+/=_-]+$/.test(options.nonce) ? options.nonce : void 0;
-  const sdkOrigins = list.flatMap((c) => {
-    try {
-      const u = new URL(c.sdk_url);
-      return u.protocol === "https:" ? [u.origin] : [];
-    } catch {
-      return [];
+var PAYMENT_CHOICE_FIELD = "payment_choice";
+var CASH_POINT_FIELD = "cash_point";
+function formFields(form) {
+  const out = {};
+  if (!form) return out;
+  for (const [k, v] of new FormData(form).entries()) if (typeof v === "string") out[k] = v;
+  return out;
+}
+var useHydrated = () => useSyncExternalStore(
+  () => () => {
+  },
+  () => true,
+  () => false
+);
+function PaymentMethodSection(props) {
+  const {
+    choices,
+    amount,
+    scope,
+    formRef,
+    payUrl,
+    statusUrl,
+    delivery = "",
+    deliveryReady = true,
+    syncDelivery,
+    addressFirst = false,
+    retryAddress = false,
+    blocked = false,
+    busy = false,
+    invalid,
+    nonce,
+    methodLabel,
+    icons,
+    renderAmount,
+    rebuildHref,
+    renderLink,
+    onDone,
+    onAmountChanged,
+    onEvent,
+    classNames: cx = {},
+    testIds = {},
+    hideSubmit,
+    brickProps
+  } = props;
+  const locale = useResolvedLocale(props.locale);
+  const m = useMemo(() => paymentMethodMessages(locale, props.messages), [locale, props.messages]);
+  const hydrated = useHydrated();
+  const [choiceValue2, setChoiceValue] = useState(props.defaultChoice ?? choices.defaultValue);
+  const selected = choices.choices.find((c) => c.value === choiceValue2) ?? null;
+  const noPayment = choices.choices.length === 0;
+  const tid = (k) => testIds[k] ? { "data-testid": testIds[k] } : {};
+  const [fallback, setFallback] = useState(false);
+  const [ready, setReady] = useState(false);
+  const [processing, setProcessing] = useState(false);
+  const [expired, setExpired] = useState(false);
+  const brick = useRef(null);
+  const cardChosen = selected?.mode === "card" && !retryAddress && !addressFirst;
+  const cardActive = hydrated && cardChosen && !fallback;
+  const wantSync = cardActive && deliveryReady && Boolean(syncDelivery);
+  const [sync, setSync] = useState(null);
+  const syncRef = useRef(syncDelivery);
+  syncRef.current = syncDelivery;
+  useEffect(() => {
+    if (!wantSync || !syncRef.current) return;
+    if (sync?.key === delivery && sync.ok) return;
+    let cancelled = false;
+    syncRef.current(delivery).then(
+      (ok) => !cancelled && setSync({ key: delivery, ok }),
+      () => !cancelled && setSync({ key: delivery, ok: false })
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [wantSync, delivery]);
+  const settled = sync?.key === delivery;
+  const synced = !syncDelivery || settled && sync.ok;
+  const syncFailed = wantSync && settled && !sync.ok;
+  const brickReady = cardActive && deliveryReady && synced && !syncFailed;
+  const transport = useMemo(
+    () => props.transport ?? createFetchTransport(payUrl, {
+      ...statusUrl ? { refreshUrl: statusUrl } : {},
+      buildBody: (request) => ({ ...request, fields: formFields(formRef.current) })
+    }),
+    [props.transport, payUrl, statusUrl, formRef]
+  );
+  const handleEvent = (e) => {
+    if (e.type === "form_ready") setReady(true);
+    if (e.type === "submit") setProcessing(true);
+    if (e.type === "tokenize_error" || e.type === "retry") setProcessing(e.type === "retry");
+    if (e.type === "result" && e.status === "rejected") setProcessing(false);
+    if (e.type === "error") {
+      setProcessing(false);
+      if (e.kind === "price_mismatch") onAmountChanged?.();
+      if (e.kind === "expired") setExpired(true);
     }
-  });
-  const dir = (name, values) => `${name} ${values.join(" ")}`;
-  const parts = [
-    "default-src 'self'",
-    dir("script-src", ["'self'", ...nonce ? [`'nonce-${nonce}'`] : [], ...origins(sdkOrigins, ...pick("script"), options.extra?.script)]),
-    dir("frame-src", origins(...pick("frame"), options.extra?.frame).length ? origins(...pick("frame"), options.extra?.frame) : ["'none'"]),
-    dir("connect-src", ["'self'", ...origins(...pick("connect"), options.extra?.connect)]),
-    dir("img-src", ["'self'", "data:", ...origins(...pick("img"), options.extra?.img)]),
-    "style-src 'self' 'unsafe-inline'",
-    dir("form-action", ["'self'", ...origins(...pick("form"), options.extra?.form)]),
-    "frame-ancestors 'none'",
-    "base-uri 'self'",
-    "object-src 'none'"
-  ];
-  if (options.reportUri && /^(https:\/\/|\/)[^\s;,]+$/.test(options.reportUri)) parts.push(`report-uri ${options.reportUri}`);
-  return parts.join("; ");
+    onEvent?.(e);
+  };
+  const total = 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
+  ] }) : selected.mode === "redirect" || selected.mode === "card" && (fallback || syncFailed) ? m.payRedirect : /* @__PURE__ */ jsxs(Fragment, { children: [
+    m.placeOrder,
+    " ",
+    total
+  ] });
+  function onPayClick(event) {
+    if (!cardActive || syncFailed) return;
+    event.preventDefault();
+    const form = formRef.current;
+    if (form && !form.reportValidity()) return;
+    if (brickReady) void brick.current?.submit();
+  }
+  const cardNotice = (k, node) => k === "syncFailed" ? /* @__PURE__ */ jsx("p", { role: "alert", className: cx.alert, "data-sf-pay-notice": "sync-failed", ...tid("syncFailed"), children: node }) : /* @__PURE__ */ jsx("p", { role: "status", className: cx.status, "data-sf-pay-notice": k, ...k === "syncing" ? tid("syncing") : {}, children: node });
+  const Link = renderLink ?? (({ href, className, children, testId }) => /* @__PURE__ */ jsx("a", { href, className, ...testId ? { "data-testid": testId } : {}, children }));
+  return /* @__PURE__ */ jsxs("fieldset", { id: "pago", className: cx.root, "data-sf-pay-method": true, children: [
+    /* @__PURE__ */ jsx("legend", { className: cx.legend, children: m.legend }),
+    choices.choices.map((choice) => {
+      const { label: rowLabel, hint } = rowText(choice, m, methodLabel);
+      const checked = choice.value === choiceValue2;
+      const icon = icons?.[choice.option ?? "plain"];
+      return /* @__PURE__ */ jsxs("div", { className: cx.choice, "data-sf-pay-choice": true, children: [
+        /* @__PURE__ */ jsxs("label", { className: cx.radioLabel, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "radio",
+              name: PAYMENT_CHOICE_FIELD,
+              value: choice.value,
+              checked,
+              onChange: () => setChoiceValue(choice.value),
+              "aria-invalid": invalid?.has("payment_method") || void 0,
+              "data-mode": choice.mode,
+              required: true,
+              className: cx.radio,
+              ...tid("method")
+            }
+          ),
+          icon ? /* @__PURE__ */ jsx("span", { className: cx.icon, "aria-hidden": "true", children: icon }) : null,
+          /* @__PURE__ */ jsxs("span", { className: cx.labelText, children: [
+            rowLabel,
+            hint ? /* @__PURE__ */ jsxs("span", { className: cx.hint, children: [
+              " ",
+              hint
+            ] }) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(ChoicePanel, { choice, m, invalid, cx, tid, hidden: hydrated && !checked })
+      ] }, choice.value);
+    }),
+    noPayment ? /* @__PURE__ */ jsxs("div", { role: "alert", className: cx.alert, "data-sf-pay-notice": "no-payment", ...tid("noPayment"), children: [
+      /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("strong", { children: m.noPaymentTitle }) }),
+      /* @__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,
+      brickReady || fallback ? /* @__PURE__ */ jsx(
+        PaymentBrick,
+        {
+          ...brickProps,
+          ref: brick,
+          client: choices.cardClient,
+          amount,
+          transport,
+          ...nonce ? { nonce } : {},
+          locale,
+          ...scope ? { scope } : {},
+          enabled: brickReady,
+          ...cx.brick ? { className: cx.brick } : {},
+          onEvent: handleEvent,
+          onFallback: () => setFallback(true),
+          onResult: (o) => {
+            if (o.kind === "approved" || o.kind === "in_review" || o.kind === "voucher") onDone(o);
+          }
+        }
+      ) : null,
+      /* @__PURE__ */ jsx("p", { className: cx.note, children: m.secureCard }),
+      expired && rebuildHref ? Link({ href: rebuildHref, ...cx.rebuild ? { className: cx.rebuild } : {}, children: m.rebuildCart, ...testIds.rebuild ? { testId: testIds.rebuild } : {} }) : null
+    ] }) : null,
+    noPayment || choices.choices.some((c) => c.option) ? null : /* @__PURE__ */ jsx("p", { className: cx.note, children: m.paymentNote }),
+    hideSubmit ? null : /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "submit",
+        onClick: onPayClick,
+        className: cx.submit,
+        disabled: busy || blocked,
+        "aria-disabled": blocked || brickReady && (!ready || processing) || void 0,
+        "aria-busy": processing || void 0,
+        "data-sf-pay-method-submit": true,
+        ...tid("submit"),
+        children: busy || processing ? m.processing : label
+      }
+    )
+  ] });
 }
-function paymentCspHeaderName(reportOnly) {
-  return reportOnly ? "Content-Security-Policy-Report-Only" : "Content-Security-Policy";
+function rowText(choice, m, methodLabel) {
+  if (choice.mode === "plain") return methodLabel ? methodLabel(choice.methodKey) : { label: choice.methodKey };
+  return { label: choice.label ?? (choice.option ? m.options[choice.option] : void 0) ?? choice.option ?? choice.methodKey };
+}
+function ChoicePanel({
+  choice,
+  m,
+  invalid,
+  cx,
+  tid,
+  hidden
+}) {
+  if (choice.mode === "redirect") {
+    return /* @__PURE__ */ jsx("p", { className: cx.panel, hidden, "data-sf-pay-panel": "redirect", ...tid("redirectNote"), children: m.redirectNote });
+  }
+  if (choice.mode !== "cash") return null;
+  const main = choice.points.filter((p) => p.group === "main");
+  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 }),
+    /* @__PURE__ */ jsx("span", { children: p.label })
+  ] }, p.id);
+  return /* @__PURE__ */ jsxs("div", { className: cx.panel, hidden, "data-sf-pay-panel": "cash", ...tid("cash"), children: [
+    /* @__PURE__ */ jsxs("fieldset", { children: [
+      /* @__PURE__ */ jsx("legend", { children: m.cashPoints }),
+      /* @__PURE__ */ jsx("div", { "data-sf-pay-points": true, children: main.map((p, i) => row(p, i, true)) }),
+      more.length ? /* @__PURE__ */ jsxs("details", { children: [
+        /* @__PURE__ */ jsx("summary", { className: cx.cashMore, style: { minHeight: 44 }, children: m.cashMore }),
+        /* @__PURE__ */ jsx("div", { "data-sf-pay-points": true, children: more.map((p, i) => row(p, i, false)) })
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: cx.note, children: m.cashNote })
+  ] });
 }
 
-export { MERCADOPAGO_BRICKS_KIND, PAYMENT_THEME_TOKENS, PaymentBrick, PaymentChallenge, PaymentHttpError, VoucherCard, createFetchTransport, loadPaymentSdk, mercadoPagoBricksAdapter, paymentCsp, paymentCspHeaderName, readPaymentTheme, resetPaymentSdkCache, sanitizeMercadoPagoFormData, useEmbeddedPayment };
+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
 //# sourceMappingURL=payments.js.map