@asteby/storefront-react 0.11.1 → 0.12.0

package/dist/payments.cjs

@@ -171,7 +171,8 @@ function mercadoPagoBricksAdapter(options = {}) {
             // 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 } : {} }
+            // Dark page: the Brick's `dark` base theme, so it does not draw a white card; the shop tokens refine it.
+            style: { theme: opts.colorScheme === "dark" ? "dark" : "default", ...opts.theme && Object.keys(opts.theme).length ? { customVariables: opts.theme } : {} }
           }
         },
         callbacks: {
@@ -221,7 +222,13 @@ var PAYMENT_THEME_TOKENS = {
   "--sf-pay-error": "errorColor",
   "--sf-pay-success": "successColor",
   "--sf-pay-outline": "outlinePrimaryColor",
-  "--sf-pay-radius": "borderRadiusMedium"
+  "--sf-pay-radius": "borderRadiusMedium",
+  "--sf-pay-radius-small": "borderRadiusSmall",
+  "--sf-pay-radius-large": "borderRadiusLarge",
+  "--sf-pay-outline-secondary": "outlineSecondaryColor",
+  "--sf-pay-primary-variant": "baseColorFirstVariant",
+  "--sf-pay-input-border-width": "inputBorderWidth",
+  "--sf-pay-form-padding": "formPadding"
 };
 function readPaymentTheme(el, tokens = PAYMENT_THEME_TOKENS) {
   const out = {};
@@ -233,6 +240,19 @@ function readPaymentTheme(el, tokens = PAYMENT_THEME_TOKENS) {
   }
   return out;
 }
+function readPaymentScheme(el) {
+  if (!el || typeof getComputedStyle !== "function") return null;
+  const style = getComputedStyle(el);
+  const token = style.getPropertyValue("--sf-pay-scheme").trim();
+  if (token === "dark" || token === "light") return token;
+  const cs = (style.getPropertyValue("color-scheme") || style.colorScheme || "").toLowerCase();
+  const dark = /\bdark\b/.test(cs);
+  const light = /\blight\b/.test(cs);
+  if (dark && !light) return "dark";
+  if (light && !dark) return "light";
+  if (dark && light && typeof matchMedia === "function") return matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  return null;
+}
 
 // src/payments/use-embedded-payment.ts
 var DEFAULT_ADAPTERS = {};
@@ -358,6 +378,7 @@ function useEmbeddedPayment(options) {
         await adapter.load(client, { ...live.current.nonce ? { nonce: live.current.nonce } : {}, timeoutMs: sdkTimeoutMs });
         if (stale()) return;
         const theme = live.current.theme ?? readPaymentTheme(container);
+        const colorScheme = live.current.colorScheme ?? readPaymentScheme(container);
         const m = await adapter.mount({
           container,
           client,
@@ -365,6 +386,7 @@ function useEmbeddedPayment(options) {
           ...live.current.email ? { email: live.current.email } : {},
           ...live.current.locale ? { locale: live.current.locale } : {},
           theme,
+          ...colorScheme ? { colorScheme } : {},
           onReady: () => {
             if (stale()) return;
             clearTimeout(timer);
@@ -777,6 +799,8 @@ var ES = {
   legend: "M\xE9todo de pago",
   pay: "Pagar",
   placeOrder: "Realizar el pedido",
+  placeOrderCash: "Generar ficha de pago",
+  chooseDelivery: "Elige la entrega para continuar",
   payRedirect: "Continuar al pago",
   continue: "Continuar",
   retryAddress: "Guardar direcci\xF3n y continuar",
@@ -805,6 +829,8 @@ var EN = {
   legend: "Payment method",
   pay: "Pay",
   placeOrder: "Place order",
+  placeOrderCash: "Get payment slip",
+  chooseDelivery: "Choose delivery to continue",
   payRedirect: "Continue to payment",
   continue: "Continue",
   retryAddress: "Save address and continue",
@@ -1101,6 +1127,26 @@ function formFields(form) {
   for (const [k, v] of new FormData(form).entries()) if (typeof v === "string") out[k] = v;
   return out;
 }
+var CHOICE_STORAGE_PREFIX = "sf:pay-choice:";
+function readStoredChoice(scope) {
+  if (!scope || typeof window === "undefined") return null;
+  try {
+    const raw = window.sessionStorage.getItem(CHOICE_STORAGE_PREFIX + scope);
+    if (!raw) return null;
+    const v = JSON.parse(raw);
+    return typeof v?.choice === "string" ? v : null;
+  } catch {
+    return null;
+  }
+}
+function writeStoredChoice(scope, value) {
+  if (!scope || typeof window === "undefined") return;
+  try {
+    window.sessionStorage.setItem(CHOICE_STORAGE_PREFIX + scope, JSON.stringify(value));
+  } catch {
+  }
+}
+var EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 var useHydrated = () => react.useSyncExternalStore(
   () => () => {
   },
@@ -1137,12 +1183,37 @@ function PaymentMethodSection(props) {
     classNames: cx = {},
     testIds = {},
     hideSubmit,
-    brickProps
+    brickProps,
+    rememberChoice = true,
+    cashPointsVisible,
+    payerEmailField = "email"
   } = props;
   const locale = useResolvedLocale(props.locale);
   const m = react.useMemo(() => paymentMethodMessages(locale, props.messages), [locale, props.messages]);
   const hydrated = useHydrated();
-  const [choiceValue2, setChoiceValue] = react.useState(props.defaultChoice ?? choices.defaultValue);
+  const [choiceValue2, setChoiceValueState] = react.useState(props.defaultChoice ?? choices.defaultValue);
+  const remember = rememberChoice && Boolean(scope);
+  const rootRef = react.useRef(null);
+  const [storedPoint, setStoredPoint] = react.useState(null);
+  const setChoiceValue = (v) => {
+    setChoiceValueState(v);
+    if (remember) writeStoredChoice(scope, { choice: v, point: readCheckedPoint(rootRef.current) });
+  };
+  react.useEffect(() => {
+    if (!remember) return;
+    const stored = readStoredChoice(scope);
+    if (!stored) return;
+    if (choices.choices.some((c) => c.value === stored.choice)) setChoiceValueState(stored.choice);
+    if (stored.point) setStoredPoint(stored.point);
+  }, [remember, scope]);
+  react.useEffect(() => {
+    if (!storedPoint || !rootRef.current) return;
+    const input = Array.from(rootRef.current.querySelectorAll(`input[name="${CASH_POINT_FIELD}"]`)).find((i) => i.value === storedPoint);
+    if (input) input.checked = true;
+  }, [storedPoint, choiceValue2]);
+  const onPointChange = (point) => {
+    if (remember && choiceValue2) writeStoredChoice(scope, { choice: choiceValue2, point });
+  };
   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] } : {};
@@ -1193,8 +1264,33 @@ function PaymentMethodSection(props) {
     }
     onEvent?.(e);
   };
+  const [payerEmail, setPayerEmail] = react.useState(void 0);
+  react.useEffect(() => {
+    const form = formRef.current;
+    if (!payerEmailField || !form) return;
+    const selector = `[name="${typeof CSS !== "undefined" && CSS.escape ? CSS.escape(payerEmailField) : payerEmailField}"]`;
+    const read = () => {
+      const v = String(form.querySelector(selector)?.value ?? "").trim();
+      setPayerEmail(EMAIL_RE.test(v) ? v : void 0);
+    };
+    read();
+    const onChange = (e) => {
+      if (e.target?.name === payerEmailField) read();
+    };
+    form.addEventListener("change", onChange);
+    return () => form.removeEventListener("change", onChange);
+  }, [formRef, payerEmailField]);
   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: [
+  const label = retryAddress ? m.retryAddress : addressFirst ? m.continue : !deliveryReady && selected ? (
+    // Says what is missing instead of a button that silently does nothing.
+    m.chooseDelivery
+  ) : selected?.mode === "cash" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    m.placeOrderCash,
+    total ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      " ",
+      total
+    ] }) : null
+  ] }) : selected?.mode === "plain" || !selected ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     m.pay,
     total ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       " ",
@@ -1208,6 +1304,11 @@ function PaymentMethodSection(props) {
     ] }) : null
   ] });
   function onPayClick(event) {
+    if (!addressFirst && !retryAddress && !deliveryReady && selected) {
+      event.preventDefault();
+      formRef.current?.reportValidity();
+      return;
+    }
     if (!cardActive || syncFailed) return;
     event.preventDefault();
     const form = formRef.current;
@@ -1216,7 +1317,7 @@ function PaymentMethodSection(props) {
   }
   const cardNotice = (k, node) => k === "syncFailed" ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: cx.alert, "data-sf-pay-notice": "sync-failed", ...tid("syncFailed"), children: node }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("a", { href, className, ...testId ? { "data-testid": testId } : {}, children }));
-  return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { id: "pago", className: cx.root, "data-sf-pay-method": true, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { id: "pago", ref: rootRef, className: cx.root, "data-sf-pay-method": true, children: [
     /* @__PURE__ */ jsxRuntime.jsx("legend", { className: cx.legend, children: m.legend }),
     choices.choices.map((choice) => {
       const { label: rowLabel, hint } = rowText(choice, m, methodLabel);
@@ -1256,38 +1357,40 @@ function PaymentMethodSection(props) {
           ] }),
           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, marks: brandMarks })
+        /* @__PURE__ */ jsxRuntime.jsx(ChoicePanel, { choice, m, invalid, cx, tid, hidden: hydrated && !checked, marks: brandMarks, visible: cashPointsVisible, openMore: storedPoint, onPointChange }),
+        choice.mode === "card" && checked && 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) : requote ? cardNotice("requote", m.quoteChanged) : !synced ? cardNotice("syncing", m.updatingTotal) : null,
+          brickReady || fallback ? /* @__PURE__ */ jsxRuntime.jsx(
+            PaymentBrick,
+            {
+              ...brickProps,
+              ref: brick,
+              client: choices.cardClient,
+              amount,
+              transport,
+              ...nonce ? { nonce } : {},
+              locale,
+              ...scope ? { scope } : {},
+              ...payerEmail && !brickProps?.email ? { email: payerEmail } : {},
+              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);
+              }
+            },
+            payerEmail || brickProps?.email ? "with-email" : "without-email"
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.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
       ] }, choice.value);
     }),
     noPayment ? /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "alert", className: cx.alert, "data-sf-pay-notice": "no-payment", ...tid("noPayment"), children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: m.noPaymentTitle }) }),
       /* @__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) : requote ? cardNotice("requote", m.quoteChanged) : !synced ? cardNotice("syncing", m.updatingTotal) : null,
-      brickReady || fallback ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: cx.note, children: m.paymentNote }),
     hideSubmit ? null : /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -1316,16 +1419,33 @@ function ChoicePanel({
   cx,
   tid,
   hidden,
-  marks = true
+  marks = true,
+  visible,
+  openMore,
+  onPointChange
 }) {
   if (choice.mode === "redirect") {
     return /* @__PURE__ */ jsxRuntime.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 allMain = choice.points.filter((p) => p.group === "main");
+  const cut = typeof visible === "number" && visible > 0 ? visible : allMain.length;
+  const main = allMain.slice(0, cut);
+  const more = [...allMain.slice(cut), ...choice.points.filter((p) => p.group !== "main")];
+  const moreOpen = Boolean(openMore && more.some((p) => p.id === openMore));
   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 }),
+    /* @__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,
+        ...onPointChange ? { onChange: () => onPointChange(p.id) } : {}
+      }
+    ),
     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);
@@ -1333,7 +1453,7 @@ function ChoicePanel({
     /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { children: [
       /* @__PURE__ */ jsxRuntime.jsx("legend", { children: m.cashPoints }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { "data-sf-pay-points": true, children: main.map((p, i) => row(p, i, true)) }),
-      more.length ? /* @__PURE__ */ jsxRuntime.jsxs("details", { children: [
+      more.length ? /* @__PURE__ */ jsxRuntime.jsxs("details", { ...moreOpen ? { open: true } : {}, children: [
         /* @__PURE__ */ jsxRuntime.jsx("summary", { className: cx.cashMore, style: { minHeight: 44 }, children: m.cashMore }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { "data-sf-pay-points": true, children: more.map((p, i) => row(p, i, false)) })
       ] }) : null
@@ -1349,6 +1469,10 @@ function defaultIcon(choice) {
   if (choice.option === "cash") return glyph(CASH_GLYPH);
   return findBrand(choice.methodKey) ? /* @__PURE__ */ jsxRuntime.jsx(BrandMark, { brand: choice.methodKey, size: 24 }) : null;
 }
+function readCheckedPoint(root) {
+  const el = root?.querySelector(`input[name="${CASH_POINT_FIELD}"]:checked`);
+  return el?.value ?? null;
+}
 function rowMarks(choice, cardBrands) {
   if (choice.option === "card") return cardBrands.map((key) => ({ key }));
   if (choice.option === "cash") {
@@ -1490,6 +1614,7 @@ exports.paymentCspMode = paymentCspMode;
 exports.paymentMethodMessages = paymentMethodMessages;
 exports.paymentNonce = paymentNonce;
 exports.paymentNonceFromHeaders = paymentNonceFromHeaders;
+exports.readPaymentScheme = readPaymentScheme;
 exports.readPaymentTheme = readPaymentTheme;
 exports.resetPaymentSdkCache = resetPaymentSdkCache;
 exports.sanitizeMercadoPagoFormData = sanitizeMercadoPagoFormData;