@alfadocs/ui-kit-debug 0.71.0 → 0.72.0

package/dist/_chunks/payment-form-DL9xk9BA.js

@@ -0,0 +1,690 @@
+import { jsx as t, jsxs as u, Fragment as ie } from "react/jsx-runtime";
+import { forwardRef as de, useState as _, useEffect as D, useRef as K, useMemo as G, useImperativeHandle as ce, useId as le, useCallback as me } from "react";
+import { c as A } from "./index-D2ZczOXr.js";
+import { useTranslation as W } from "react-i18next";
+import { S as te } from "./spinner-hbwuKwMf.js";
+import { A as ee } from "./alert-KJbsPYkI.js";
+import { loadStripe as ue } from "@stripe/stripe-js";
+import { Elements as pe, useStripe as fe, useElements as be, PaymentElement as ye, AddressElement as ge } from "@stripe/react-stripe-js";
+import { u as ve } from "./registry-DvAUVLHh.js";
+function ne() {
+  return typeof document < "u" && typeof window < "u";
+}
+function H(r) {
+  if (!ne())
+    return { theme: "stripe" };
+  const n = r ?? document.documentElement, a = getComputedStyle(n), e = (s) => a.getPropertyValue(s).trim();
+  return {
+    theme: n.classList.contains("theme-dark") ? "night" : "stripe",
+    variables: {
+      colorPrimary: e("--primary"),
+      colorBackground: e("--background"),
+      colorText: e("--foreground"),
+      colorDanger: e("--destructive"),
+      colorTextSecondary: e("--muted-foreground"),
+      colorTextPlaceholder: e("--muted-foreground"),
+      borderRadius: e("--radius-md"),
+      fontFamily: e("--font-sans"),
+      fontSizeBase: e("--font-size-base"),
+      // Stripe multiplies spacingUnit throughout every Element; --spacing-sm
+      // gives readable density. Keep this in sync with the JSDoc above.
+      spacingUnit: e("--spacing-sm")
+    },
+    rules: {
+      ".Input": {
+        backgroundColor: e("--background"),
+        border: `1px solid ${e("--border")}`,
+        color: e("--foreground"),
+        padding: e("--spacing-sm"),
+        transition: `border-color ${e("--animation-duration")} ease-out`
+      },
+      ".Input:focus": {
+        borderColor: e("--primary"),
+        boxShadow: `0 0 0 ${e("--focus-ring-width")} ${e("--ring")}`,
+        outline: "none"
+      },
+      ".Input--invalid": {
+        borderColor: e("--destructive"),
+        color: e("--foreground")
+      },
+      ".Label": {
+        color: e("--foreground"),
+        fontWeight: e("--font-weight-medium"),
+        fontSize: e("--font-size-sm")
+      },
+      ".Error": {
+        color: e("--destructive"),
+        fontSize: e("--font-size-sm")
+      },
+      ".Tab": {
+        border: `1px solid ${e("--border")}`,
+        backgroundColor: e("--background"),
+        color: e("--foreground")
+      },
+      ".Tab--selected": {
+        borderColor: e("--primary"),
+        backgroundColor: e("--background"),
+        color: e("--primary")
+      },
+      // Accordion method rows (the `accordion` layout): keep Stripe's native
+      // per-method card structure, restyled with our tokens — our border +
+      // radius, our background, `--primary` on the selected row, no extra shadow.
+      ".AccordionItem": {
+        backgroundColor: e("--background"),
+        border: `1px solid ${e("--border")}`,
+        borderRadius: e("--radius-md"),
+        boxShadow: "none"
+      },
+      ".AccordionItem--selected": {
+        borderColor: e("--primary"),
+        backgroundColor: e("--background")
+      },
+      // Stripe's in-method notice blocks (e.g. PayPal's "you'll be redirected")
+      // otherwise render in their own bordered box — a card nested inside the
+      // selected method card. Flatten to inline icon + text, no inner box.
+      ".Block": {
+        border: "none",
+        borderRadius: "0",
+        boxShadow: "none",
+        backgroundColor: "transparent"
+      }
+    }
+  };
+}
+function he(r, n) {
+  if (!ne()) return () => {
+  };
+  const a = document.documentElement, e = () => r(H(n)), o = new MutationObserver(e);
+  o.observe(a, {
+    attributes: !0,
+    attributeFilter: ["class", "dir", "lang"]
+  });
+  const s = window.matchMedia("(prefers-color-scheme: dark)"), c = window.matchMedia("(prefers-reduced-motion: reduce)");
+  return s.addEventListener("change", e), c.addEventListener("change", e), () => {
+    o.disconnect(), s.removeEventListener("change", e), c.removeEventListener("change", e);
+  };
+}
+const we = {
+  id: "payment-form",
+  capabilities: ["submit"],
+  state: {},
+  actions: {
+    submit: {
+      safety: "destructive",
+      // Charges an external payment processor — irreversible, hits a system
+      // outside this UI.
+      openWorld: !0,
+      returns: "Promise<void>",
+      errors: [
+        "Validation failed (incomplete or invalid card details).",
+        "Payment was declined by the processor.",
+        "Network or processor error during the charge."
+      ],
+      descriptionKey: "ui.agent.paymentForm.actions.submit",
+      description: "Submit the payment. Charges the configured payment method — irreversible.",
+      invoke: (r) => r.submit()
+    },
+    reset: {
+      safety: "destructive",
+      idempotent: !0,
+      descriptionKey: "ui.agent.paymentForm.actions.reset",
+      description: "Reset the form to its initial state. Loses any in-progress input.",
+      invoke: (r) => {
+        r.reset();
+      }
+    }
+  },
+  domHooks: {
+    root: { attr: "data-component", value: "payment-form" },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+}, xe = /* @__PURE__ */ new Set([
+  "BIF",
+  "CLP",
+  "DJF",
+  "GNF",
+  "IDR",
+  "JPY",
+  "KMF",
+  "KRW",
+  "MGA",
+  "PYG",
+  "RWF",
+  "UGX",
+  "VND",
+  "VUV",
+  "XAF",
+  "XOF",
+  "XPF"
+]);
+function O(r, n, a) {
+  const e = n.toUpperCase(), o = xe.has(e) ? r : r / 100;
+  try {
+    return new Intl.NumberFormat(a, {
+      style: "currency",
+      currency: e
+    }).format(o);
+  } catch {
+    return new Intl.NumberFormat("en", {
+      style: "currency",
+      currency: e
+    }).format(o);
+  }
+}
+function ke(r) {
+  if (r === void 0) return null;
+  const n = r.trim();
+  if (n === "" || typeof window > "u") return null;
+  try {
+    const a = new URL(n, window.location.href);
+    return !(/* @__PURE__ */ new Set(["http:", "https:"])).has(a.protocol) || a.origin !== window.location.origin ? null : a.toString();
+  } catch {
+    return null;
+  }
+}
+function Ce(r) {
+  return r && r.replace(/\d{4,}/g, "****");
+}
+function Ee(r) {
+  switch (r) {
+    case "incorrect_number":
+    case "invalid_number":
+      return "payment.error.cardNumber";
+    case "invalid_expiry_month":
+    case "invalid_expiry_year":
+    case "expired_card":
+      return "payment.error.expiry";
+    case "invalid_cvc":
+    case "incorrect_cvc":
+      return "payment.error.cvc";
+    case "incorrect_zip":
+    case "invalid_zip":
+      return "payment.error.postalCode";
+    case "card_declined":
+    case "do_not_honor":
+    case "generic_decline":
+      return "payment.error.declined";
+    case "network_error":
+    case "api_connection_error":
+      return "payment.error.network";
+    default:
+      return "payment.error.generic";
+  }
+}
+const Ie = A(
+  [
+    "ds:payment-form-alfadocs ds:flex ds:flex-col",
+    "ds:gap-[var(--spacing-md)]",
+    // Transparent, padding-less container — the consuming surface (a Card, the
+    // check-in step, a checkout column) owns the card chrome + padding, so the
+    // Stripe method boxes never read as cards nested inside another card.
+    "ds:text-[var(--foreground)]",
+    "ds:aria-disabled:opacity-[var(--opacity-50)] ds:aria-disabled:cursor-not-allowed"
+  ].join(" ")
+), V = A(
+  ["ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]"].join(" ")
+), F = A(
+  ["type-label", "ds:text-[var(--foreground)]"].join(" ")
+), ae = A(
+  [
+    "ds:flex ds:items-baseline ds:justify-between",
+    "ds:gap-[var(--spacing-sm)]",
+    "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
+    "ds:pt-[var(--spacing-xs)] ds:pb-[var(--spacing-xs)]",
+    "ds:bg-[var(--muted)]",
+    "ds:rounded-[var(--radius-sm)]",
+    "ds:text-[var(--foreground)]"
+  ].join(" ")
+), se = A(
+  [
+    "ds:inline-flex ds:items-center ds:justify-center ds:gap-[var(--spacing-xs)]",
+    "ds:[min-block-size:var(--min-target-size)]",
+    "ds:[min-inline-size:var(--min-target-size)]",
+    "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]",
+    "ds:rounded-[var(--radius-sm)]",
+    "ds:bg-[var(--primary)] ds:text-[var(--primary-foreground)]",
+    "ds:text-[length:var(--font-size-base)] ds:font-medium",
+    "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+    "ds:hover:bg-[var(--primary-hover)]",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)]",
+    "ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-[var(--ring)]",
+    "ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:forced-colors:focus-visible:outline-[CanvasText]",
+    "ds:aria-disabled:opacity-[var(--opacity-50)] ds:aria-disabled:cursor-not-allowed",
+    "ds:aria-busy:cursor-wait"
+  ].join(" ")
+);
+function Ne(r) {
+  const {
+    amount: n,
+    currency: a,
+    locale: e,
+    billingAddress: o,
+    returnUrl: s,
+    clientSecret: c,
+    onCreatePaymentIntent: I,
+    onSuccess: P,
+    onError: N,
+    layout: B
+  } = r, { t: i } = W(), h = fe(), l = be(), R = le(), g = G(
+    () => `pay-${R.replace(/[^a-zA-Z0-9-_]/g, "")}`,
+    [R]
+  ), M = `${g}-payment`, T = `${g}-address`, v = `${g}-error`, [p, w] = _(!1), [z, U] = _(!1), [x, S] = _(null), [$, m] = _(""), d = K(P), k = K(N);
+  D(() => {
+    d.current = P, k.current = N;
+  }, [P, N]);
+  const j = me(
+    async (f) => {
+      var Z, J, Y;
+      if (f && f.preventDefault(), !h || !l || p) return;
+      w(!0), S(null), m("");
+      const C = (b, L) => {
+        var Q;
+        const y = Ee(b), E = Ce(L ?? "");
+        S(y), m(i(y)), (Q = k.current) == null || Q.call(k, {
+          code: b,
+          translatedMessage: E || i(y)
+        });
+      }, q = ke(s);
+      if (s !== void 0 && q === null) {
+        S("payment.error.invalidReturnUrl"), m(i("payment.error.invalidReturnUrl")), (Z = k.current) == null || Z.call(k, {
+          code: "invalid_return_url",
+          translatedMessage: i("payment.error.invalidReturnUrl")
+        }), w(!1);
+        return;
+      }
+      const X = q ? { return_url: q } : {};
+      try {
+        if (c !== void 0) {
+          const E = await h.confirmPayment({
+            elements: l,
+            confirmParams: X,
+            redirect: "if_required"
+          });
+          if (E.error) {
+            C(E.error.code ?? "generic", E.error.message);
+            return;
+          }
+          E.paymentIntent && ((J = d.current) == null || J.call(d, E.paymentIntent.id));
+          return;
+        }
+        const { error: b } = await l.submit();
+        if (b) {
+          C(b.code ?? "generic", b.message);
+          return;
+        }
+        if (!I)
+          return;
+        const L = await I(), y = await h.confirmPayment({
+          elements: l,
+          clientSecret: L,
+          confirmParams: X,
+          redirect: "if_required"
+        });
+        if (y.error) {
+          C(y.error.code ?? "generic", y.error.message);
+          return;
+        }
+        y.paymentIntent && ((Y = d.current) == null || Y.call(d, y.paymentIntent.id));
+      } catch (b) {
+        const L = b instanceof Error ? b.message : "";
+        C("unexpected", L);
+      } finally {
+        w(!1);
+      }
+    },
+    [
+      h,
+      l,
+      p,
+      s,
+      c,
+      I,
+      i
+    ]
+  );
+  D(() => {
+    const f = document.getElementById(g);
+    if (!f) return;
+    const C = () => {
+      j();
+    };
+    return f.addEventListener("payment-form:submit", C), () => f.removeEventListener("payment-form:submit", C);
+  }, [g, j]);
+  const oe = !h || !l || p || !(c === void 0 && !I) && !z;
+  return /* @__PURE__ */ t(
+    "form",
+    {
+      id: g,
+      onSubmit: j,
+      "aria-label": i("payment.ariaLabel"),
+      "aria-busy": p || void 0,
+      noValidate: !0,
+      children: /* @__PURE__ */ u("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]", children: [
+        /* @__PURE__ */ u("div", { className: ae(), children: [
+          /* @__PURE__ */ t("span", { className: F(), children: i("payment.amountLabel") }),
+          /* @__PURE__ */ t("span", { className: "type-title-card", "data-testid": "payment-amount", children: O(n, a, e) })
+        ] }),
+        /* @__PURE__ */ u(
+          "label",
+          {
+            htmlFor: M,
+            className: V(),
+            "data-testid": "payment-field",
+            children: [
+              /* @__PURE__ */ t("span", { className: F(), children: i("payment.fields.card") }),
+              /* @__PURE__ */ t(
+                ye,
+                {
+                  id: M,
+                  options: {
+                    // `tabs` = method tiles (Card selected by default); `accordion`
+                    // = full-width stacked rows for narrow columns where the tab row
+                    // clips. Stripe owns overflow + tab alignment either way.
+                    layout: B === "accordion" ? { type: "accordion", defaultCollapsed: !0 } : { type: "tabs" }
+                  },
+                  onChange: (f) => {
+                    U(f.complete === !0), f.complete && (S(null), m(""));
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        o ? /* @__PURE__ */ u(
+          "label",
+          {
+            htmlFor: T,
+            className: V(),
+            "data-testid": "payment-address",
+            children: [
+              /* @__PURE__ */ t("span", { className: F(), children: i("payment.billingAddress") }),
+              /* @__PURE__ */ t(ge, { id: T, options: { mode: "billing" } })
+            ]
+          }
+        ) : null,
+        x ? /* @__PURE__ */ t(
+          ee,
+          {
+            id: v,
+            variant: "error",
+            live: "polite",
+            "data-testid": "payment-error",
+            children: /* @__PURE__ */ t(ee.Description, { children: $ })
+          }
+        ) : null,
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "submit",
+            "aria-disabled": oe || void 0,
+            "aria-busy": p || void 0,
+            "aria-describedby": x ? v : void 0,
+            className: se(),
+            "data-testid": "payment-submit",
+            children: p ? /* @__PURE__ */ u(ie, { children: [
+              /* @__PURE__ */ t(
+                te,
+                {
+                  variant: "pulse",
+                  size: "sm",
+                  label: i("payment.processing")
+                }
+              ),
+              /* @__PURE__ */ t("span", { children: i("payment.processing") })
+            ] }) : /* @__PURE__ */ t("span", { children: i("payment.submit", {
+              amount: O(n, a, e)
+            }) })
+          }
+        )
+      ] })
+    }
+  );
+}
+const re = /* @__PURE__ */ new Set([
+  "auto",
+  "ar",
+  "bg",
+  "cs",
+  "da",
+  "de",
+  "el",
+  "en",
+  "en-AU",
+  "en-CA",
+  "en-NZ",
+  "en-GB",
+  "es",
+  "es-ES",
+  "es-419",
+  "et",
+  "fi",
+  "fil",
+  "fr",
+  "fr-CA",
+  "fr-FR",
+  "he",
+  "hu",
+  "hr",
+  "id",
+  "it",
+  "it-IT",
+  "ja",
+  "ko",
+  "lt",
+  "lv",
+  "ms",
+  "mt",
+  "nb",
+  "nl",
+  "no",
+  "pl",
+  "pt",
+  "pt-BR",
+  "ro",
+  "ru",
+  "sk",
+  "sl",
+  "sv",
+  "th",
+  "tr",
+  "vi",
+  "zh",
+  "zh-HK",
+  "zh-TW"
+]);
+function Se(r) {
+  if (!r) return "auto";
+  const n = r === "cn" ? "zh" : r;
+  if (re.has(n))
+    return n;
+  const a = n.split("-")[0];
+  return re.has(a) ? a : "auto";
+}
+const _e = de(
+  ({
+    id: r,
+    clientSecret: n,
+    mode: a = "payment",
+    onCreatePaymentIntent: e,
+    publishableKey: o,
+    currency: s,
+    amount: c,
+    onSuccess: I,
+    onError: P,
+    billingAddress: N = !1,
+    locale: B,
+    ariaLabel: i,
+    returnUrl: h,
+    stripePromise: l,
+    layout: R = "tabs",
+    className: g
+  }, M) => {
+    const { i18n: T } = W(), v = Se(B ?? T.language ?? "en"), [p, w] = _(l ?? null);
+    D(() => {
+      if (l !== void 0) {
+        w(l);
+        return;
+      }
+      if (!o) {
+        w(null);
+        return;
+      }
+      w(ue(o));
+    }, [l, o]);
+    const [z, U] = _(
+      () => H()
+    );
+    D(() => (U(H()), he(U)), []);
+    const x = K(null), S = G(
+      () => ({
+        submit: async () => {
+          var d;
+          const m = (d = x.current) == null ? void 0 : d.querySelector("form");
+          m && m.dispatchEvent(
+            new CustomEvent("payment-form:submit", { bubbles: !0 })
+          );
+        },
+        reset: () => {
+          var d;
+          const m = (d = x.current) == null ? void 0 : d.querySelector("form");
+          m instanceof HTMLFormElement && m.reset();
+        }
+      }),
+      []
+    );
+    ce(M, () => x.current, []), ve(we, S, r);
+    const $ = G(
+      () => n !== void 0 ? (
+        // Immediate mode — the consumer already created the intent.
+        { clientSecret: n, appearance: z, locale: v }
+      ) : (
+        // Deferred-intent mode — no secret yet; Stripe needs the intent
+        // shape (mode + amount + currency) to render the Payment Element.
+        // Stripe expects a lowercase ISO-4217 currency here.
+        {
+          mode: a,
+          amount: c,
+          currency: s.toLowerCase(),
+          appearance: z,
+          locale: v
+        }
+      ),
+      [n, a, c, s, z, v]
+    );
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        ref: x,
+        "aria-label": i,
+        className: [Ie(), g].filter(Boolean).join(" "),
+        "data-component": "payment-form",
+        "data-component-id": r,
+        "data-testid": "payment-form-root",
+        children: p ? (
+          // Render the real Payment Element whenever a Stripe instance is
+          // available — in immediate mode (clientSecret present) AND in
+          // deferred mode (no secret). The skeleton is reserved for the
+          // no-Stripe case (missing publishableKey / injected null).
+          /* @__PURE__ */ t(
+            pe,
+            {
+              stripe: p,
+              options: $,
+              children: /* @__PURE__ */ t(
+                Ne,
+                {
+                  amount: c,
+                  currency: s,
+                  locale: v,
+                  billingAddress: N,
+                  returnUrl: h,
+                  clientSecret: n,
+                  onCreatePaymentIntent: e,
+                  onSuccess: I,
+                  onError: P,
+                  layout: R
+                }
+              )
+            },
+            n ?? "deferred"
+          )
+        ) : /* @__PURE__ */ t(
+          Fe,
+          {
+            amount: c,
+            currency: s,
+            locale: v,
+            billingAddress: N
+          }
+        )
+      }
+    );
+  }
+);
+_e.displayName = "PaymentForm";
+function Fe(r) {
+  const { amount: n, currency: a, locale: e, billingAddress: o } = r, { t: s } = W();
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]",
+      "data-testid": "payment-skeleton",
+      "aria-busy": "true",
+      children: [
+        /* @__PURE__ */ u("div", { className: ae(), children: [
+          /* @__PURE__ */ t("span", { className: F(), children: s("payment.amountLabel") }),
+          /* @__PURE__ */ t("span", { className: "type-title-card", children: O(n, a, e) })
+        ] }),
+        /* @__PURE__ */ u("div", { className: V(), children: [
+          /* @__PURE__ */ t("span", { className: F(), children: s("payment.fields.card") }),
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: "ds:[min-block-size:var(--min-target-size)] ds:rounded-[var(--radius-sm)] ds:border ds:border-[color:var(--border)] ds:bg-[var(--muted)]",
+              "aria-hidden": "true"
+            }
+          )
+        ] }),
+        o ? /* @__PURE__ */ u("div", { className: V(), "data-testid": "payment-address", children: [
+          /* @__PURE__ */ t("span", { className: F(), children: s("payment.billingAddress") }),
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: "ds:[min-block-size:calc(var(--min-target-size)*2)] ds:rounded-[var(--radius-sm)] ds:border ds:border-[color:var(--border)] ds:bg-[var(--muted)]",
+              "aria-hidden": "true"
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ u(
+          "button",
+          {
+            type: "button",
+            "aria-disabled": "true",
+            className: se(),
+            disabled: !0,
+            children: [
+              /* @__PURE__ */ t(te, { variant: "pulse", size: "sm", label: s("payment.processing") }),
+              /* @__PURE__ */ t("span", { children: s("payment.processing") })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  _e as P,
+  Ie as a,
+  Ce as b,
+  Ee as c,
+  O as f,
+  we as p,
+  se as s
+};
+//# sourceMappingURL=payment-form-DL9xk9BA.js.map