@alfadocs/ui-kit 0.44.0 → 0.45.0

package/dist/_chunks/{payment-form-BzVsG6Ks.js → payment-form-DqEiEJRO.js}

@@ -1,17 +1,17 @@
-import { jsx as t, jsxs as m, Fragment as ne } from "react/jsx-runtime";
-import { forwardRef as se, useState as C, useEffect as R, useRef as V, useMemo as j, useImperativeHandle as ae, useId as oe, useCallback as ie } from "react";
-import { c as z } from "./index-D2ZczOXr.js";
-import { useTranslation as q } from "react-i18next";
-import { S as J } from "./spinner-CCByyvcb.js";
-import { A as W } from "./alert-ywPR59NE.js";
-import { loadStripe as de } from "@stripe/stripe-js";
-import { Elements as ce, useStripe as le, useElements as me, PaymentElement as ue, AddressElement as pe } from "@stripe/react-stripe-js";
-import { u as fe } from "./registry-nPAVE19X.js";
-function Y() {
+import { jsx as t, jsxs as m, Fragment as oe } from "react/jsx-runtime";
+import { forwardRef as ie, useState as z, useEffect as D, useRef as q, useMemo as G, useImperativeHandle as de, useId as ce, useCallback as le } from "react";
+import { c as R } from "./index-D2ZczOXr.js";
+import { useTranslation as K } from "react-i18next";
+import { S as re } from "./spinner-OjQNn8oN.js";
+import { A as Q } from "./alert-ywPR59NE.js";
+import { loadStripe as me } from "@stripe/stripe-js";
+import { Elements as ue, useStripe as pe, useElements as fe, PaymentElement as be, AddressElement as ve } from "@stripe/react-stripe-js";
+import { u as ye } from "./registry-nPAVE19X.js";
+function te() {
   return typeof document < "u" && typeof window < "u";
 }
-function B(r) {
-  if (!Y())
+function H(r) {
+  if (!te())
     return { theme: "stripe" };
   const n = r ?? document.documentElement, s = getComputedStyle(n), e = (a) => s.getPropertyValue(a).trim();
   return {
@@ -69,20 +69,20 @@ function B(r) {
     }
   };
 }
-function be(r, n) {
-  if (!Y()) return () => {
+function ge(r, n) {
+  if (!te()) return () => {
   };
-  const s = document.documentElement, e = () => r(B(n)), i = new MutationObserver(e);
-  i.observe(s, {
+  const s = document.documentElement, e = () => r(H(n)), o = new MutationObserver(e);
+  o.observe(s, {
     attributes: !0,
     attributeFilter: ["class", "dir", "lang"]
   });
-  const a = window.matchMedia("(prefers-color-scheme: dark)"), f = window.matchMedia("(prefers-reduced-motion: reduce)");
-  return a.addEventListener("change", e), f.addEventListener("change", e), () => {
-    i.disconnect(), a.removeEventListener("change", e), f.removeEventListener("change", e);
+  const a = window.matchMedia("(prefers-color-scheme: dark)"), c = window.matchMedia("(prefers-reduced-motion: reduce)");
+  return a.addEventListener("change", e), c.addEventListener("change", e), () => {
+    o.disconnect(), a.removeEventListener("change", e), c.removeEventListener("change", e);
   };
 }
-const ye = {
+const he = {
   id: "payment-form",
   capabilities: ["submit"],
   state: {},
@@ -108,7 +108,7 @@ const ye = {
       description: "Sourced from the id prop."
     }
   }
-}, ge = /* @__PURE__ */ new Set([
+}, we = /* @__PURE__ */ new Set([
   "BIF",
   "CLP",
   "DJF",
@@ -127,21 +127,21 @@ const ye = {
   "XOF",
   "XPF"
 ]);
-function $(r, n, s) {
-  const e = n.toUpperCase(), i = ge.has(e) ? r : r / 100;
+function O(r, n, s) {
+  const e = n.toUpperCase(), o = we.has(e) ? r : r / 100;
   try {
     return new Intl.NumberFormat(s, {
       style: "currency",
       currency: e
-    }).format(i);
+    }).format(o);
   } catch {
     return new Intl.NumberFormat("en", {
       style: "currency",
       currency: e
-    }).format(i);
+    }).format(o);
   }
 }
-function ve(r) {
+function xe(r) {
   if (r === void 0) return null;
   const n = r.trim();
   if (n === "" || typeof window > "u") return null;
@@ -152,10 +152,10 @@ function ve(r) {
     return null;
   }
 }
-function X(r) {
+function Ee(r) {
   return r && r.replace(/\d{4,}/g, "****");
 }
-function he(r) {
+function Ne(r) {
   switch (r) {
     case "incorrect_number":
     case "invalid_number":
@@ -181,7 +181,7 @@ function he(r) {
       return "payment.error.generic";
   }
 }
-const we = z(
+const ke = R(
   [
     "ds:payment-form-alfadocs ds:flex ds:flex-col",
     "ds:gap-[var(--spacing-md)]",
@@ -190,11 +190,11 @@ const we = z(
     "ds:p-[var(--spacing-md)]",
     "ds:aria-disabled:opacity-[var(--opacity-50)] ds:aria-disabled:cursor-not-allowed"
   ].join(" ")
-), T = z(
+), V = R(
   ["ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]"].join(" ")
-), E = z(
+), F = R(
   ["type-label", "ds:text-[var(--foreground)]"].join(" ")
-), Q = z(
+), ne = R(
   [
     "ds:flex ds:items-baseline ds:justify-between",
     "ds:gap-[var(--spacing-sm)]",
@@ -204,7 +204,7 @@ const we = z(
     "ds:rounded-[var(--radius-sm)]",
     "ds:text-[var(--foreground)]"
   ].join(" ")
-), ee = z(
+), se = R(
   [
     "ds:inline-flex ds:items-center ds:justify-center ds:gap-[var(--spacing-xs)]",
     "ds:[min-block-size:var(--min-target-size)]",
@@ -224,143 +224,175 @@ const we = z(
     "ds:aria-busy:cursor-wait"
   ].join(" ")
 );
-function xe(r) {
+function Ce(r) {
   const {
     amount: n,
     currency: s,
     locale: e,
-    billingAddress: i,
+    billingAddress: o,
     returnUrl: a,
-    onSuccess: f,
-    onError: N
-  } = r, { t: o } = q(), k = le(), S = me(), g = oe(), b = j(
-    () => `pay-${g.replace(/[^a-zA-Z0-9-_]/g, "")}`,
-    [g]
-  ), F = `${b}-payment`, L = `${b}-address`, v = `${b}-error`, [u, h] = C(!1), [A, P] = C(!1), [w, x] = C(null), [U, d] = C(""), c = V(f), l = V(N);
-  R(() => {
-    c.current = f, l.current = N;
-  }, [f, N]);
-  const D = ie(
+    clientSecret: c,
+    onCreatePaymentIntent: I,
+    onSuccess: P,
+    onError: _
+  } = r, { t: i } = K(), h = pe(), v = fe(), w = ce(), y = G(
+    () => `pay-${w.replace(/[^a-zA-Z0-9-_]/g, "")}`,
+    [w]
+  ), M = `${y}-payment`, T = `${y}-address`, g = `${y}-error`, [u, x] = z(!1), [L, U] = z(!1), [E, S] = z(null), [j, l] = z(""), d = q(P), N = q(_);
+  D(() => {
+    d.current = P, N.current = _;
+  }, [P, _]);
+  const B = le(
     async (p) => {
-      var G, H, O, K;
-      if (p && p.preventDefault(), !k || !S || u) return;
-      h(!0), x(null), d("");
-      const _ = ve(a);
-      if (a !== void 0 && _ === null) {
-        x("payment.error.invalidReturnUrl"), d(o("payment.error.invalidReturnUrl")), (G = l.current) == null || G.call(l, {
+      var X, Z, J;
+      if (p && p.preventDefault(), !h || !v || u) return;
+      x(!0), S(null), l("");
+      const k = (f, A) => {
+        var Y;
+        const b = Ne(f), C = Ee(A ?? "");
+        S(b), l(i(b)), (Y = N.current) == null || Y.call(N, {
+          code: f,
+          translatedMessage: C || i(b)
+        });
+      }, $ = xe(a);
+      if (a !== void 0 && $ === null) {
+        S("payment.error.invalidReturnUrl"), l(i("payment.error.invalidReturnUrl")), (X = N.current) == null || X.call(N, {
           code: "invalid_return_url",
-          translatedMessage: o("payment.error.invalidReturnUrl")
-        }), h(!1);
+          translatedMessage: i("payment.error.invalidReturnUrl")
+        }), x(!1);
         return;
       }
+      const W = $ ? { return_url: $ } : {};
       try {
-        const y = await k.confirmPayment({
-          elements: S,
-          confirmParams: _ ? { return_url: _ } : {},
-          redirect: "if_required"
-        });
-        if (y.error) {
-          const M = y.error.code ?? "generic", I = he(M), te = X(y.error.message ?? "");
-          x(I), d(o(I)), (H = l.current) == null || H.call(l, {
-            code: M,
-            translatedMessage: te || o(I)
+        if (c !== void 0) {
+          const C = await h.confirmPayment({
+            elements: v,
+            confirmParams: W,
+            redirect: "if_required"
           });
+          if (C.error) {
+            k(C.error.code ?? "generic", C.error.message);
+            return;
+          }
+          C.paymentIntent && ((Z = d.current) == null || Z.call(d, C.paymentIntent.id));
+          return;
+        }
+        const { error: f } = await v.submit();
+        if (f) {
+          k(f.code ?? "generic", f.message);
           return;
         }
-        y.paymentIntent && ((O = c.current) == null || O.call(c, y.paymentIntent.id));
-      } catch (y) {
-        const M = y instanceof Error ? y.message : "", I = X(M);
-        x("payment.error.generic"), d(o("payment.error.generic")), (K = l.current) == null || K.call(l, {
-          code: "unexpected",
-          translatedMessage: I || o("payment.error.generic")
+        if (!I)
+          return;
+        const A = await I(), b = await h.confirmPayment({
+          elements: v,
+          clientSecret: A,
+          confirmParams: W,
+          redirect: "if_required"
         });
+        if (b.error) {
+          k(b.error.code ?? "generic", b.error.message);
+          return;
+        }
+        b.paymentIntent && ((J = d.current) == null || J.call(d, b.paymentIntent.id));
+      } catch (f) {
+        const A = f instanceof Error ? f.message : "";
+        k("unexpected", A);
       } finally {
-        h(!1);
+        x(!1);
       }
     },
-    [k, S, u, a, o]
+    [
+      h,
+      v,
+      u,
+      a,
+      c,
+      I,
+      i
+    ]
   );
-  R(() => {
-    const p = document.getElementById(b);
+  D(() => {
+    const p = document.getElementById(y);
     if (!p) return;
-    const _ = () => {
-      D();
+    const k = () => {
+      B();
     };
-    return p.addEventListener("payment-form:submit", _), () => p.removeEventListener("payment-form:submit", _);
-  }, [b, D]);
-  const re = !k || !S || !A || u;
+    return p.addEventListener("payment-form:submit", k), () => p.removeEventListener("payment-form:submit", k);
+  }, [y, B]);
+  const ae = !h || !v || u || !(c === void 0 && !I) && !L;
   return /* @__PURE__ */ t(
     "form",
     {
-      id: b,
-      onSubmit: D,
-      "aria-label": o("payment.ariaLabel"),
+      id: y,
+      onSubmit: B,
+      "aria-label": i("payment.ariaLabel"),
       "aria-busy": u || void 0,
       noValidate: !0,
       children: /* @__PURE__ */ m("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]", children: [
-        /* @__PURE__ */ m("div", { className: Q(), children: [
-          /* @__PURE__ */ t("span", { className: E(), children: o("payment.amountLabel") }),
-          /* @__PURE__ */ t("span", { className: "type-title-card", "data-testid": "payment-amount", children: $(n, s, e) })
+        /* @__PURE__ */ m("div", { className: ne(), children: [
+          /* @__PURE__ */ t("span", { className: F(), children: i("payment.amountLabel") }),
+          /* @__PURE__ */ t("span", { className: "type-title-card", "data-testid": "payment-amount", children: O(n, s, e) })
         ] }),
         /* @__PURE__ */ m(
           "label",
           {
-            htmlFor: F,
-            className: T(),
+            htmlFor: M,
+            className: V(),
             "data-testid": "payment-field",
             children: [
-              /* @__PURE__ */ t("span", { className: E(), children: o("payment.fields.card") }),
+              /* @__PURE__ */ t("span", { className: F(), children: i("payment.fields.card") }),
               /* @__PURE__ */ t(
-                ue,
+                be,
                 {
-                  id: F,
+                  id: M,
                   options: {
                     layout: { type: "accordion", defaultCollapsed: !1 }
                   },
                   onChange: (p) => {
-                    P(p.complete === !0), p.complete && (x(null), d(""));
+                    U(p.complete === !0), p.complete && (S(null), l(""));
                   }
                 }
               )
             ]
           }
         ),
-        i ? /* @__PURE__ */ m(
+        o ? /* @__PURE__ */ m(
           "label",
           {
-            htmlFor: L,
-            className: T(),
+            htmlFor: T,
+            className: V(),
             "data-testid": "payment-address",
             children: [
-              /* @__PURE__ */ t("span", { className: E(), children: o("payment.billingAddress") }),
-              /* @__PURE__ */ t(pe, { id: L, options: { mode: "billing" } })
+              /* @__PURE__ */ t("span", { className: F(), children: i("payment.billingAddress") }),
+              /* @__PURE__ */ t(ve, { id: T, options: { mode: "billing" } })
             ]
           }
         ) : null,
-        w ? /* @__PURE__ */ t(
-          W,
+        E ? /* @__PURE__ */ t(
+          Q,
           {
-            id: v,
+            id: g,
             variant: "error",
             live: "polite",
             "data-testid": "payment-error",
-            children: /* @__PURE__ */ t(W.Description, { children: U })
+            children: /* @__PURE__ */ t(Q.Description, { children: j })
           }
         ) : null,
         /* @__PURE__ */ t(
           "button",
           {
             type: "submit",
-            "aria-disabled": re || void 0,
+            "aria-disabled": ae || void 0,
             "aria-busy": u || void 0,
-            "aria-describedby": w ? v : void 0,
-            className: ee(),
+            "aria-describedby": E ? g : void 0,
+            className: se(),
             "data-testid": "payment-submit",
-            children: u ? /* @__PURE__ */ m(ne, { children: [
-              /* @__PURE__ */ t(J, { size: "sm", label: o("payment.processing") }),
-              /* @__PURE__ */ t("span", { children: o("payment.processing") })
-            ] }) : /* @__PURE__ */ t("span", { children: o("payment.submit", {
-              amount: $(n, s, e)
+            children: u ? /* @__PURE__ */ m(oe, { children: [
+              /* @__PURE__ */ t(re, { size: "sm", label: i("payment.processing") }),
+              /* @__PURE__ */ t("span", { children: i("payment.processing") })
+            ] }) : /* @__PURE__ */ t("span", { children: i("payment.submit", {
+              amount: O(n, s, e)
             }) })
           }
         )
@@ -368,7 +400,7 @@ function xe(r) {
     }
   );
 }
-const Z = /* @__PURE__ */ new Set([
+const ee = /* @__PURE__ */ new Set([
   "auto",
   "ar",
   "bg",
@@ -420,116 +452,136 @@ const Z = /* @__PURE__ */ new Set([
   "zh-HK",
   "zh-TW"
 ]);
-function Ne(r) {
+function Ie(r) {
   if (!r) return "auto";
   const n = r === "cn" ? "zh" : r;
-  if (Z.has(n))
+  if (ee.has(n))
     return n;
   const s = n.split("-")[0];
-  return Z.has(s) ? s : "auto";
+  return ee.has(s) ? s : "auto";
 }
-const ke = se(
+const _e = ie(
   ({
     id: r,
     clientSecret: n,
-    publishableKey: s,
-    currency: e,
-    amount: i,
-    onSuccess: a,
-    onError: f,
-    billingAddress: N = !1,
-    locale: o,
-    ariaLabel: k,
-    returnUrl: S,
-    stripePromise: g,
-    className: b
-  }, F) => {
-    const { i18n: L } = q(), v = Ne(o ?? L.language ?? "en"), [u, h] = C(g ?? null);
-    R(() => {
-      if (g !== void 0) {
-        h(g);
+    mode: s = "payment",
+    onCreatePaymentIntent: e,
+    publishableKey: o,
+    currency: a,
+    amount: c,
+    onSuccess: I,
+    onError: P,
+    billingAddress: _ = !1,
+    locale: i,
+    ariaLabel: h,
+    returnUrl: v,
+    stripePromise: w,
+    className: y
+  }, M) => {
+    const { i18n: T } = K(), g = Ie(i ?? T.language ?? "en"), [u, x] = z(w ?? null);
+    D(() => {
+      if (w !== void 0) {
+        x(w);
         return;
       }
-      if (!s) {
-        h(null);
+      if (!o) {
+        x(null);
         return;
       }
-      h(de(s));
-    }, [g, s]);
-    const [A, P] = C(
-      () => B()
+      x(me(o));
+    }, [w, o]);
+    const [L, U] = z(
+      () => H()
     );
-    R(() => (P(B()), be(P)), []);
-    const w = V(null), x = j(
+    D(() => (U(H()), ge(U)), []);
+    const E = q(null), S = G(
       () => ({
         submit: async () => {
-          var c;
-          const d = (c = w.current) == null ? void 0 : c.querySelector("form");
-          d && d.dispatchEvent(
+          var d;
+          const l = (d = E.current) == null ? void 0 : d.querySelector("form");
+          l && l.dispatchEvent(
             new CustomEvent("payment-form:submit", { bubbles: !0 })
           );
         },
         reset: () => {
-          var c;
-          const d = (c = w.current) == null ? void 0 : c.querySelector("form");
-          d instanceof HTMLFormElement && d.reset();
+          var d;
+          const l = (d = E.current) == null ? void 0 : d.querySelector("form");
+          l instanceof HTMLFormElement && l.reset();
         }
       }),
       []
     );
-    ae(F, () => w.current, []), fe(ye, x, r);
-    const U = j(
-      () => ({
-        clientSecret: n,
-        appearance: A,
-        locale: v
-      }),
-      [n, A, v]
+    de(M, () => E.current, []), ye(he, S, r);
+    const j = G(
+      () => n !== void 0 ? (
+        // Immediate mode — the consumer already created the intent.
+        { clientSecret: n, appearance: L, locale: g }
+      ) : (
+        // 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: s,
+          amount: c,
+          currency: a.toLowerCase(),
+          appearance: L,
+          locale: g
+        }
+      ),
+      [n, s, c, a, L, g]
     );
     return /* @__PURE__ */ t(
       "div",
       {
-        ref: w,
-        "aria-label": k,
-        className: [we(), b].filter(Boolean).join(" "),
+        ref: E,
+        "aria-label": h,
+        className: [ke(), y].filter(Boolean).join(" "),
         "data-component": "payment-form",
         "data-component-id": r,
         "data-testid": "payment-form-root",
-        children: u && n ? /* @__PURE__ */ t(
-          ce,
-          {
-            stripe: u,
-            options: U,
-            children: /* @__PURE__ */ t(
-              xe,
-              {
-                amount: i,
-                currency: e,
-                locale: v,
-                billingAddress: N,
-                returnUrl: S,
-                onSuccess: a,
-                onError: f
-              }
-            )
-          },
-          n
+        children: u ? (
+          // 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(
+            ue,
+            {
+              stripe: u,
+              options: j,
+              children: /* @__PURE__ */ t(
+                Ce,
+                {
+                  amount: c,
+                  currency: a,
+                  locale: g,
+                  billingAddress: _,
+                  returnUrl: v,
+                  clientSecret: n,
+                  onCreatePaymentIntent: e,
+                  onSuccess: I,
+                  onError: P
+                }
+              )
+            },
+            n ?? "deferred"
+          )
         ) : /* @__PURE__ */ t(
           Se,
           {
-            amount: i,
-            currency: e,
-            locale: v,
-            billingAddress: N
+            amount: c,
+            currency: a,
+            locale: g,
+            billingAddress: _
           }
         )
       }
     );
   }
 );
-ke.displayName = "PaymentForm";
+_e.displayName = "PaymentForm";
 function Se(r) {
-  const { amount: n, currency: s, locale: e, billingAddress: i } = r, { t: a } = q();
+  const { amount: n, currency: s, locale: e, billingAddress: o } = r, { t: a } = K();
   return /* @__PURE__ */ m(
     "div",
     {
@@ -537,12 +589,12 @@ function Se(r) {
       "data-testid": "payment-skeleton",
       "aria-busy": "true",
       children: [
-        /* @__PURE__ */ m("div", { className: Q(), children: [
-          /* @__PURE__ */ t("span", { className: E(), children: a("payment.amountLabel") }),
-          /* @__PURE__ */ t("span", { className: "type-title-card", children: $(n, s, e) })
+        /* @__PURE__ */ m("div", { className: ne(), children: [
+          /* @__PURE__ */ t("span", { className: F(), children: a("payment.amountLabel") }),
+          /* @__PURE__ */ t("span", { className: "type-title-card", children: O(n, s, e) })
         ] }),
-        /* @__PURE__ */ m("div", { className: T(), children: [
-          /* @__PURE__ */ t("span", { className: E(), children: a("payment.fields.card") }),
+        /* @__PURE__ */ m("div", { className: V(), children: [
+          /* @__PURE__ */ t("span", { className: F(), children: a("payment.fields.card") }),
           /* @__PURE__ */ t(
             "div",
             {
@@ -551,8 +603,8 @@ function Se(r) {
             }
           )
         ] }),
-        i ? /* @__PURE__ */ m("div", { className: T(), "data-testid": "payment-address", children: [
-          /* @__PURE__ */ t("span", { className: E(), children: a("payment.billingAddress") }),
+        o ? /* @__PURE__ */ m("div", { className: V(), "data-testid": "payment-address", children: [
+          /* @__PURE__ */ t("span", { className: F(), children: a("payment.billingAddress") }),
           /* @__PURE__ */ t(
             "div",
             {
@@ -566,10 +618,10 @@ function Se(r) {
           {
             type: "button",
             "aria-disabled": "true",
-            className: ee(),
+            className: se(),
             disabled: !0,
             children: [
-              /* @__PURE__ */ t(J, { size: "sm", label: a("payment.processing") }),
+              /* @__PURE__ */ t(re, { size: "sm", label: a("payment.processing") }),
               /* @__PURE__ */ t("span", { children: a("payment.processing") })
             ]
           }
@@ -579,12 +631,12 @@ function Se(r) {
   );
 }
 export {
-  ke as P,
-  we as a,
-  X as b,
-  he as c,
-  $ as f,
-  ye as p,
-  ee as s
+  _e as P,
+  ke as a,
+  Ee as b,
+  Ne as c,
+  O as f,
+  he as p,
+  se as s
 };
-//# sourceMappingURL=payment-form-BzVsG6Ks.js.map
+//# sourceMappingURL=payment-form-DqEiEJRO.js.map