@loczer/storefront-sdk 0.180.0 → 0.182.0

package/dist/pages/CheckoutPaymentPage.js

@@ -1,223 +1,329 @@
-import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import { useState as f, useRef as j, useEffect as L, useMemo as K } from "react";
-import { toast as G } from "@rpcbase/client";
-import { useParams as J, useNavigate as Q, useSearchParams as V, Link as N } from "@rpcbase/router";
-import { loadStripe as W } from "@stripe/stripe-js";
-import { Elements as Z, useStripe as ee } from "@stripe/react-stripe-js";
-import { Spinner as te } from "../chunks/ui/dist/Spinner/index-SbbUxcsT.js";
-import { AlertTriangle as O, ShieldCheck as re, CheckCircle2 as se, XCircle as ne, CircleDashed as ce, ArrowRight as ae } from "lucide-react";
-import { useTranslation as E } from "react-i18next";
-import { apiPost as ie } from "../lib/apiCall.js";
-import { ROUTE as oe, responseSchema as le } from "../lib/checkoutPaymentSession.js";
-import { pickBookingSearchParams as ue } from "../lib/booking.js";
-import { useStorefrontCart as me } from "../lib/cart.js";
-import { MollieCardFieldsForm as de } from "../components/payment/MollieCardFieldsForm.js";
-import { StripeCardFieldsForm as pe } from "../components/payment/StripeCardFieldsForm.js";
-import { Button as S } from "../ui/button.js";
-import { Card as y } from "../ui/card.js";
-const he = {}, _e = () => he?.RB_PUBLIC_STRIPE_PUBLISHABLE_KEY?.trim() ?? "", fe = _e(), ye = 20, xe = 2500, ge = (t, u, c) => {
-  try {
-    return new Intl.NumberFormat(c, {
-      style: "currency",
-      currency: u.toUpperCase()
-    }).format(t / 100);
-  } catch {
-    return `${(t / 100).toFixed(2)} ${u.toUpperCase()}`;
-  }
+import { pickBookingSearchParams as e } from "../lib/booking.js";
+import { useStorefrontCart as t } from "../lib/cart.js";
+import { Button as n } from "../ui/button.js";
+import { Card as r } from "../ui/card.js";
+import { apiPost as i } from "../lib/apiCall.js";
+import { Spinner as a } from "../chunks/ui/dist/Spinner/index-Dyk_LLEz.js";
+import { ROUTE as o, responseSchema as ee } from "../lib/checkoutPaymentSession.js";
+import { MollieCardFieldsForm as s } from "../components/payment/MollieCardFieldsForm.js";
+import { StripeCardFieldsForm as c } from "../components/payment/StripeCardFieldsForm.js";
+import "../components/payment/index.js";
+import { useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { toast as te } from "@rpcbase/client";
+import { Link as h, useNavigate as g, useParams as _, useSearchParams as v } from "@rpcbase/router";
+import { useTranslation as y } from "react-i18next";
+import { AlertTriangle as b, ArrowRight as ne, CheckCircle2 as re, CircleDashed as ie, ShieldCheck as ae, XCircle as oe } from "lucide-react";
+import { loadStripe as se } from "@stripe/stripe-js";
+import { Elements as x, useStripe as S } from "@stripe/react-stripe-js";
+var C = {
+	BASE_URL: "/",
+	DEV: !1,
+	MODE: "production",
+	PROD: !0,
+	SSR: !1
+}.RB_PUBLIC_STRIPE_PUBLISHABLE_KEY?.trim() ?? "", w = 20, T = 2500, ce = (e, t, n) => {
+	try {
+		return new Intl.NumberFormat(n, {
+			style: "currency",
+			currency: t.toUpperCase()
+		}).format(e / 100);
+	} catch {
+		return `${(e / 100).toFixed(2)} ${t.toUpperCase()}`;
+	}
 };
-function ke({
-  clientSecret: t,
-  onSuccess: u
-}) {
-  const { t: c } = E(), _ = ee();
-  return /* @__PURE__ */ e(
-    pe,
-    {
-      requireEmail: !1,
-      submitLabel: c("checkout_payment_authorize_button"),
-      submittingLabel: c("checkout_payment_authorizing_button"),
-      onSubmit: async ({ paymentMethodId: x }) => {
-        if (!_)
-          throw new Error(c("secure_payment_link.errors.stripe_not_ready"));
-        const m = await _.confirmCardPayment(
-          t,
-          {
-            payment_method: x
-          }
-        );
-        if (m.error)
-          throw new Error(m.error.message ?? c("secure_payment_link.errors.payment_failed"));
-        const r = m.paymentIntent?.status;
-        if (r !== "succeeded" && r !== "processing" && r !== "requires_capture")
-          throw new Error(c("secure_payment_link.errors.payment_failed"));
-        u();
-      }
-    }
-  );
+function le({ clientSecret: e, onSuccess: t }) {
+	let { t: n } = y(), r = S();
+	return /* @__PURE__ */ p(c, {
+		requireEmail: !1,
+		submitLabel: n("checkout_payment_authorize_button"),
+		submittingLabel: n("checkout_payment_authorizing_button"),
+		onSubmit: async ({ paymentMethodId: i }) => {
+			if (!r) throw Error(n("secure_payment_link.errors.stripe_not_ready"));
+			let a = await r.confirmCardPayment(e, { payment_method: i });
+			if (a.error) throw Error(a.error.message ?? n("secure_payment_link.errors.payment_failed"));
+			let o = a.paymentIntent?.status;
+			if (o !== "succeeded" && o !== "processing" && o !== "requires_capture") throw Error(n("secure_payment_link.errors.payment_failed"));
+			t();
+		}
+	});
 }
-function be() {
-  const { t } = E();
-  return /* @__PURE__ */ n("div", { className: "flex min-h-48 items-center justify-center gap-2 text-sm text-slate-600", children: [
-    /* @__PURE__ */ e(te, { className: "size-4", "aria-hidden": "true" }),
-    /* @__PURE__ */ e("span", { children: t("secure_payment_link.form.loading_session") })
-  ] });
+function E() {
+	let { t: e } = y();
+	return /* @__PURE__ */ m("div", {
+		className: "flex min-h-48 items-center justify-center gap-2 text-sm text-slate-600",
+		children: [/* @__PURE__ */ p(a, {
+			className: "size-4",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ p("span", { children: e("secure_payment_link.form.loading_session") })]
+	});
 }
-function Fe() {
-  const { t, i18n: u } = E(), { storeSlug: c } = J(), _ = Q(), { clear: x } = me(), [m] = V(), [r, d] = f(null), [q, g] = f(!0), [I, k] = f(null), [D, X] = f(0), [A, U] = f(0), b = j(!1), l = j(null), p = m.get("checkout_session_id")?.trim() ?? "", $ = new URLSearchParams(m.toString());
-  $.delete("checkout_session_id");
-  const h = ue($).toString(), v = `/${c ?? ""}/checkout${h ? `?${h}` : ""}`, P = `/${c ?? ""}/checkout/success${h ? `?${h}` : ""}`, R = async (a) => {
-    if (!c || !p)
-      throw new Error(t("checkout_payment_return_missing_session"));
-    const s = await ie(
-      oe,
-      {
-        storeSlug: c,
-        checkoutSessionId: p,
-        returnSearch: h || void 0,
-        cardToken: a
-      }
-    );
-    return le.parse(s);
-  }, C = async () => {
-    b.current || (b.current = !0, G.success(t("checkout_success_toast")), await _(P, { replace: !0 }), x());
-  };
-  L(() => {
-    b.current = !1, l.current = null, d(null), g(!0), U(0);
-  }, [p]), L(() => {
-    if (!c || !p) {
-      l.current = null, d(null), k(t("checkout_payment_return_missing_session")), g(!1);
-      return;
-    }
-    let a = !1;
-    const s = l.current === null;
-    return g(s), k(null), (async () => {
-      try {
-        const i = await R();
-        if (a) return;
-        if (!i.success) {
-          l.current = null, d(null), k(i.message || t("checkout_payment_return_status_error"));
-          return;
-        }
-        l.current = i, d(i);
-        const F = i.paymentStatus;
-        (F === "authorized" || F === "succeeded") && !b.current && await C();
-      } catch (i) {
-        if (a) return;
-        console.error("Failed to fetch checkout payment session", i), l.current = null, d(null), k(t("checkout_payment_return_status_error"));
-      } finally {
-        !a && s && g(!1);
-      }
-    })(), () => {
-      a = !0;
-    };
-  }, [p, x, _, h, D, c, P, t]);
-  const o = r?.paymentStatus ?? "pending";
-  L(() => {
-    if (o !== "pending" || r?.providerType === "stripe_connect_oauth" || A >= ye || !r?.payment?.id) return;
-    const a = window.setTimeout(() => {
-      U((s) => s + 1), X((s) => s + 1);
-    }, xe);
-    return () => {
-      window.clearTimeout(a);
-    };
-  }, [o, A, r?.payment?.id, r?.providerType]);
-  const z = K(() => {
-    const a = r?.stripePublishableKey?.trim() || fe;
-    return !a || !r?.stripeAccountId ? null : W(a, {
-      stripeAccount: r.stripeAccountId
-    });
-  }, [r?.stripeAccountId, r?.stripePublishableKey]), M = K(() => {
-    if (r?.clientSecret)
-      return {
-        clientSecret: r.clientSecret
-      };
-  }, [r?.clientSecret]);
-  if (!p)
-    return /* @__PURE__ */ e("div", { className: "mx-auto max-w-3xl px-4 py-14 sm:px-6", children: /* @__PURE__ */ e(y, { className: "border-destructive/25 bg-white p-5 sm:p-6 shadow-sm", children: /* @__PURE__ */ n("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ n("div", { className: "flex items-start gap-3", children: [
-        /* @__PURE__ */ e(O, { className: "mt-0.5 h-5 w-5 text-destructive", "aria-hidden": "true" }),
-        /* @__PURE__ */ e("p", { className: "text-sm text-slate-700", children: /* @__PURE__ */ e("span", { children: t("checkout_payment_return_missing_session") }) })
-      ] }),
-      /* @__PURE__ */ e(N, { to: v, children: /* @__PURE__ */ e(S, { variant: "outline", children: /* @__PURE__ */ e("span", { children: t("checkout_payment_return_back_to_checkout") }) }) })
-    ] }) }) });
-  if (q && !r)
-    return /* @__PURE__ */ e("div", { className: "mx-auto max-w-3xl px-4 py-14 sm:px-6", children: /* @__PURE__ */ e(y, { className: "border-slate-200 bg-white p-5 sm:p-6 shadow-sm", children: /* @__PURE__ */ e(be, {}) }) });
-  if (I || !r)
-    return /* @__PURE__ */ e("div", { className: "mx-auto max-w-3xl px-4 py-14 sm:px-6", children: /* @__PURE__ */ e(y, { className: "border-destructive/25 bg-white p-5 sm:p-6 shadow-sm", children: /* @__PURE__ */ n("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ n("div", { className: "flex items-start gap-3", children: [
-        /* @__PURE__ */ e(O, { className: "mt-0.5 h-5 w-5 text-destructive", "aria-hidden": "true" }),
-        /* @__PURE__ */ e("p", { className: "text-sm text-slate-700", children: /* @__PURE__ */ e("span", { children: I ?? t("checkout_payment_return_status_error") }) })
-      ] }),
-      /* @__PURE__ */ e(N, { to: v, children: /* @__PURE__ */ e(S, { variant: "outline", children: /* @__PURE__ */ e("span", { children: t("checkout_payment_return_back_to_checkout") }) }) })
-    ] }) }) });
-  const B = typeof r.amountMinor == "number" && r.currency ? ge(r.amountMinor, r.currency, u.language) : null, w = o === "authorized" || o === "succeeded", T = o === "failed" || o === "cancelled", Y = w ? se : T ? ne : ce, H = w ? "text-success" : T ? "text-destructive" : "text-warning";
-  return /* @__PURE__ */ e("div", { className: "mx-auto max-w-5xl px-4 py-10 sm:px-6", children: /* @__PURE__ */ n("div", { className: "grid gap-6 lg:grid-cols-[1fr_1fr]", children: [
-    /* @__PURE__ */ e(y, { className: "border-slate-200 bg-white p-5 shadow-sm", children: /* @__PURE__ */ n("div", { className: "space-y-5", children: [
-      /* @__PURE__ */ n("div", { className: "inline-flex items-center gap-2 rounded-full border border-success-border bg-success-subtle px-3 py-1 text-xs font-medium text-success", children: [
-        /* @__PURE__ */ e(re, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
-        /* @__PURE__ */ e("span", { children: t("secure_payment_link.secured_badge") })
-      ] }),
-      /* @__PURE__ */ n("div", { children: [
-        /* @__PURE__ */ e("h1", { className: "text-2xl font-semibold tracking-tight text-slate-950", children: /* @__PURE__ */ e("span", { children: t("checkout_payment_title") }) }),
-        /* @__PURE__ */ e("p", { className: "mt-2 text-sm text-slate-600", children: /* @__PURE__ */ e("span", { children: t("checkout_payment_hold_description") }) })
-      ] }),
-      /* @__PURE__ */ n("dl", { className: "grid gap-3 rounded-xl border border-slate-200 bg-slate-50 p-4 text-sm", children: [
-        B ? /* @__PURE__ */ n("div", { className: "flex items-center justify-between gap-3", children: [
-          /* @__PURE__ */ e("dt", { className: "text-slate-600", children: /* @__PURE__ */ e("span", { children: t("checkout_payment_hold_amount") }) }),
-          /* @__PURE__ */ e("dd", { className: "font-semibold text-slate-950", children: /* @__PURE__ */ e("span", { children: B }) })
-        ] }) : null,
-        r.providerType ? /* @__PURE__ */ n("div", { className: "flex items-center justify-between gap-3", children: [
-          /* @__PURE__ */ e("dt", { className: "text-slate-600", children: /* @__PURE__ */ e("span", { children: t("checkout_payment_provider") }) }),
-          /* @__PURE__ */ e("dd", { className: "font-medium text-slate-950", children: /* @__PURE__ */ e("span", { children: t(`secure_payment_link.providers.${r.providerType}`) }) })
-        ] }) : null
-      ] })
-    ] }) }),
-    /* @__PURE__ */ e(y, { className: "border-slate-200 bg-white p-5 shadow-sm", children: w || T ? /* @__PURE__ */ n("div", { className: "space-y-6 text-center", children: [
-      /* @__PURE__ */ e("div", { className: "mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-slate-100", children: /* @__PURE__ */ e(Y, { className: `h-6 w-6 ${H}`, "aria-hidden": "true" }) }),
-      /* @__PURE__ */ n("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ e("h2", { className: "text-xl font-semibold text-slate-950", children: /* @__PURE__ */ e("span", { children: t(`secure_payment_link.success_titles.${o}`) }) }),
-        /* @__PURE__ */ e("p", { className: "text-sm text-slate-600", children: /* @__PURE__ */ e("span", { children: t(`secure_payment_link.statuses.${o}`) }) })
-      ] }),
-      w ? /* @__PURE__ */ e(N, { to: P, children: /* @__PURE__ */ n(S, { className: "gap-2", children: [
-        /* @__PURE__ */ e("span", { children: t("checkout_payment_return_go_to_success") }),
-        /* @__PURE__ */ e(ae, { className: "h-4 w-4", "aria-hidden": "true" })
-      ] }) }) : /* @__PURE__ */ e(N, { to: v, children: /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e("span", { children: t("checkout_payment_return_retry_checkout") }) }) })
-    ] }) : r.providerType === "mollie_connect_oauth" ? /* @__PURE__ */ n("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-slate-950", children: /* @__PURE__ */ e("span", { children: t("secure_payment_link.mollie.form_title") }) }),
-      /* @__PURE__ */ e("p", { className: "text-sm text-slate-600", children: /* @__PURE__ */ e("span", { children: t("checkout_payment_hold_form_description") }) }),
-      r.profileId ? /* @__PURE__ */ e(
-        de,
-        {
-          profileId: r.profileId,
-          testmode: r.testmode === !0,
-          submitLabel: t("checkout_payment_authorize_button"),
-          submittingLabel: t("checkout_payment_authorizing_button"),
-          onSubmit: async (a) => {
-            const s = await R(a);
-            if (!s.success)
-              throw new Error(s.message || t("secure_payment_link.errors.payment_failed"));
-            if (l.current = s, d(s), s.paymentStatus === "authorized" || s.paymentStatus === "succeeded") {
-              await C();
-              return;
-            }
-            if (!s.checkoutUrl)
-              throw new Error(s.message || t("secure_payment_link.errors.mollie_missing_url"));
-            const i = new URL(s.checkoutUrl, window.location.origin).toString();
-            window.location.assign(i);
-          }
-        }
-      ) : /* @__PURE__ */ e("p", { className: "text-sm text-destructive", children: /* @__PURE__ */ e("span", { children: t("secure_payment_link.errors.session_failed") }) })
-    ] }) : r.providerType === "stripe_connect_oauth" ? !r.clientSecret || !z || !M ? /* @__PURE__ */ e("p", { className: "text-sm text-destructive", children: /* @__PURE__ */ e("span", { children: t("secure_payment_link.errors.missing_publishable_key") }) }) : /* @__PURE__ */ e(Z, { stripe: z, options: M, children: /* @__PURE__ */ e(
-      ke,
-      {
-        clientSecret: r.clientSecret,
-        onSuccess: () => {
-          C();
-        }
-      }
-    ) }, r.clientSecret) : /* @__PURE__ */ e("p", { className: "text-sm text-destructive", children: /* @__PURE__ */ e("span", { children: t("secure_payment_link.errors.session_failed") }) }) })
-  ] }) });
+function D() {
+	let { t: a, i18n: c } = y(), { storeSlug: S } = _(), D = g(), { clear: O } = t(), [k] = v(), [A, j] = f(null), [ue, M] = f(!0), [N, P] = f(null), [F, I] = f(0), [L, R] = f(0), z = d(!1), B = d(null), V = k.get("checkout_session_id")?.trim() ?? "", H = new URLSearchParams(k.toString());
+	H.delete("checkout_session_id");
+	let U = e(H).toString(), W = `/${S ?? ""}/checkout${U ? `?${U}` : ""}`, G = `/${S ?? ""}/checkout/success${U ? `?${U}` : ""}`, K = async (e) => {
+		if (!S || !V) throw Error(a("checkout_payment_return_missing_session"));
+		let t = await i(o, {
+			storeSlug: S,
+			checkoutSessionId: V,
+			returnSearch: U || void 0,
+			cardToken: e
+		});
+		return ee.parse(t);
+	}, q = async () => {
+		z.current || (z.current = !0, te.success(a("checkout_success_toast")), await D(G, { replace: !0 }), O());
+	};
+	l(() => {
+		z.current = !1, B.current = null, j(null), M(!0), R(0);
+	}, [V]), l(() => {
+		if (!S || !V) {
+			B.current = null, j(null), P(a("checkout_payment_return_missing_session")), M(!1);
+			return;
+		}
+		let e = !1, t = B.current === null;
+		return M(t), P(null), (async () => {
+			try {
+				let t = await K();
+				if (e) return;
+				if (!t.success) {
+					B.current = null, j(null), P(t.message || a("checkout_payment_return_status_error"));
+					return;
+				}
+				B.current = t, j(t);
+				let n = t.paymentStatus;
+				(n === "authorized" || n === "succeeded") && !z.current && await q();
+			} catch (t) {
+				if (e) return;
+				console.error("Failed to fetch checkout payment session", t), B.current = null, j(null), P(a("checkout_payment_return_status_error"));
+			} finally {
+				!e && t && M(!1);
+			}
+		})(), () => {
+			e = !0;
+		};
+	}, [
+		V,
+		O,
+		D,
+		U,
+		F,
+		S,
+		G,
+		a
+	]);
+	let J = A?.paymentStatus ?? "pending";
+	l(() => {
+		if (J !== "pending" || A?.providerType === "stripe_connect_oauth" || L >= w || !A?.payment?.providerPaymentId) return;
+		let e = window.setTimeout(() => {
+			R((e) => e + 1), I((e) => e + 1);
+		}, T);
+		return () => {
+			window.clearTimeout(e);
+		};
+	}, [
+		J,
+		L,
+		A?.payment?.providerPaymentId,
+		A?.providerType
+	]);
+	let Y = u(() => {
+		let e = A?.stripePublishableKey?.trim() || C;
+		return !e || !A?.providerAccountId ? null : se(e, { stripeAccount: A.providerAccountId });
+	}, [A?.providerAccountId, A?.stripePublishableKey]), X = u(() => {
+		if (A?.clientSecret) return { clientSecret: A.clientSecret };
+	}, [A?.clientSecret]);
+	if (!V) return /* @__PURE__ */ p("div", {
+		className: "mx-auto max-w-3xl px-4 py-14 sm:px-6",
+		children: /* @__PURE__ */ p(r, {
+			className: "border-destructive/25 bg-white p-5 sm:p-6 shadow-sm",
+			children: /* @__PURE__ */ m("div", {
+				className: "space-y-4",
+				children: [/* @__PURE__ */ m("div", {
+					className: "flex items-start gap-3",
+					children: [/* @__PURE__ */ p(b, {
+						className: "mt-0.5 h-5 w-5 text-destructive",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ p("p", {
+						className: "text-sm text-slate-700",
+						children: /* @__PURE__ */ p("span", { children: a("checkout_payment_return_missing_session") })
+					})]
+				}), /* @__PURE__ */ p(h, {
+					to: W,
+					children: /* @__PURE__ */ p(n, {
+						variant: "outline",
+						children: /* @__PURE__ */ p("span", { children: a("checkout_payment_return_back_to_checkout") })
+					})
+				})]
+			})
+		})
+	});
+	if (ue && !A) return /* @__PURE__ */ p("div", {
+		className: "mx-auto max-w-3xl px-4 py-14 sm:px-6",
+		children: /* @__PURE__ */ p(r, {
+			className: "border-slate-200 bg-white p-5 sm:p-6 shadow-sm",
+			children: /* @__PURE__ */ p(E, {})
+		})
+	});
+	if (N || !A) return /* @__PURE__ */ p("div", {
+		className: "mx-auto max-w-3xl px-4 py-14 sm:px-6",
+		children: /* @__PURE__ */ p(r, {
+			className: "border-destructive/25 bg-white p-5 sm:p-6 shadow-sm",
+			children: /* @__PURE__ */ m("div", {
+				className: "space-y-4",
+				children: [/* @__PURE__ */ m("div", {
+					className: "flex items-start gap-3",
+					children: [/* @__PURE__ */ p(b, {
+						className: "mt-0.5 h-5 w-5 text-destructive",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ p("p", {
+						className: "text-sm text-slate-700",
+						children: /* @__PURE__ */ p("span", { children: N ?? a("checkout_payment_return_status_error") })
+					})]
+				}), /* @__PURE__ */ p(h, {
+					to: W,
+					children: /* @__PURE__ */ p(n, {
+						variant: "outline",
+						children: /* @__PURE__ */ p("span", { children: a("checkout_payment_return_back_to_checkout") })
+					})
+				})]
+			})
+		})
+	});
+	let Z = typeof A.amountMinor == "number" && A.currency ? ce(A.amountMinor, A.currency, c.language) : null, Q = J === "authorized" || J === "succeeded", $ = J === "failed" || J === "cancelled", de = Q ? re : $ ? oe : ie, fe = Q ? "text-success" : $ ? "text-destructive" : "text-warning";
+	return /* @__PURE__ */ p("div", {
+		className: "mx-auto max-w-5xl px-4 py-10 sm:px-6",
+		children: /* @__PURE__ */ m("div", {
+			className: "grid gap-6 lg:grid-cols-[1fr_1fr]",
+			children: [/* @__PURE__ */ p(r, {
+				className: "border-slate-200 bg-white p-5 shadow-sm",
+				children: /* @__PURE__ */ m("div", {
+					className: "space-y-5",
+					children: [
+						/* @__PURE__ */ m("div", {
+							className: "inline-flex items-center gap-2 rounded-full border border-success-border bg-success-subtle px-3 py-1 text-xs font-medium text-success",
+							children: [/* @__PURE__ */ p(ae, {
+								className: "h-3.5 w-3.5",
+								"aria-hidden": "true"
+							}), /* @__PURE__ */ p("span", { children: a("secure_payment_link.secured_badge") })]
+						}),
+						/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("h1", {
+							className: "text-2xl font-semibold tracking-tight text-slate-950",
+							children: /* @__PURE__ */ p("span", { children: a("checkout_payment_title") })
+						}), /* @__PURE__ */ p("p", {
+							className: "mt-2 text-sm text-slate-600",
+							children: /* @__PURE__ */ p("span", { children: a("checkout_payment_hold_description") })
+						})] }),
+						/* @__PURE__ */ m("dl", {
+							className: "grid gap-3 rounded-xl border border-slate-200 bg-slate-50 p-4 text-sm",
+							children: [Z ? /* @__PURE__ */ m("div", {
+								className: "flex items-center justify-between gap-3",
+								children: [/* @__PURE__ */ p("dt", {
+									className: "text-slate-600",
+									children: /* @__PURE__ */ p("span", { children: a("checkout_payment_hold_amount") })
+								}), /* @__PURE__ */ p("dd", {
+									className: "font-semibold text-slate-950",
+									children: /* @__PURE__ */ p("span", { children: Z })
+								})]
+							}) : null, A.providerType ? /* @__PURE__ */ m("div", {
+								className: "flex items-center justify-between gap-3",
+								children: [/* @__PURE__ */ p("dt", {
+									className: "text-slate-600",
+									children: /* @__PURE__ */ p("span", { children: a("checkout_payment_provider") })
+								}), /* @__PURE__ */ p("dd", {
+									className: "font-medium text-slate-950",
+									children: /* @__PURE__ */ p("span", { children: a(`secure_payment_link.providers.${A.providerType}`) })
+								})]
+							}) : null]
+						})
+					]
+				})
+			}), /* @__PURE__ */ p(r, {
+				className: "border-slate-200 bg-white p-5 shadow-sm",
+				children: Q || $ ? /* @__PURE__ */ m("div", {
+					className: "space-y-6 text-center",
+					children: [
+						/* @__PURE__ */ p("div", {
+							className: "mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-slate-100",
+							children: /* @__PURE__ */ p(de, {
+								className: `h-6 w-6 ${fe}`,
+								"aria-hidden": "true"
+							})
+						}),
+						/* @__PURE__ */ m("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ p("h2", {
+								className: "text-xl font-semibold text-slate-950",
+								children: /* @__PURE__ */ p("span", { children: a(`secure_payment_link.success_titles.${J}`) })
+							}), /* @__PURE__ */ p("p", {
+								className: "text-sm text-slate-600",
+								children: /* @__PURE__ */ p("span", { children: a(`secure_payment_link.statuses.${J}`) })
+							})]
+						}),
+						Q ? /* @__PURE__ */ p(h, {
+							to: G,
+							children: /* @__PURE__ */ m(n, {
+								className: "gap-2",
+								children: [/* @__PURE__ */ p("span", { children: a("checkout_payment_return_go_to_success") }), /* @__PURE__ */ p(ne, {
+									className: "h-4 w-4",
+									"aria-hidden": "true"
+								})]
+							})
+						}) : /* @__PURE__ */ p(h, {
+							to: W,
+							children: /* @__PURE__ */ p(n, { children: /* @__PURE__ */ p("span", { children: a("checkout_payment_return_retry_checkout") }) })
+						})
+					]
+				}) : A.providerType === "mollie_connect_oauth" ? /* @__PURE__ */ m("div", {
+					className: "space-y-4",
+					children: [
+						/* @__PURE__ */ p("h2", {
+							className: "text-lg font-semibold text-slate-950",
+							children: /* @__PURE__ */ p("span", { children: a("secure_payment_link.mollie.form_title") })
+						}),
+						/* @__PURE__ */ p("p", {
+							className: "text-sm text-slate-600",
+							children: /* @__PURE__ */ p("span", { children: a("checkout_payment_hold_form_description") })
+						}),
+						A.profileId ? /* @__PURE__ */ p(s, {
+							profileId: A.profileId,
+							testmode: A.testmode === !0,
+							submitLabel: a("checkout_payment_authorize_button"),
+							submittingLabel: a("checkout_payment_authorizing_button"),
+							onSubmit: async (e) => {
+								let t = await K(e);
+								if (!t.success) throw Error(t.message || a("secure_payment_link.errors.payment_failed"));
+								if (B.current = t, j(t), t.paymentStatus === "authorized" || t.paymentStatus === "succeeded") {
+									await q();
+									return;
+								}
+								if (!t.checkoutUrl) throw Error(t.message || a("secure_payment_link.errors.mollie_missing_url"));
+								let n = new URL(t.checkoutUrl, window.location.origin).toString();
+								window.location.assign(n);
+							}
+						}) : /* @__PURE__ */ p("p", {
+							className: "text-sm text-destructive",
+							children: /* @__PURE__ */ p("span", { children: a("secure_payment_link.errors.session_failed") })
+						})
+					]
+				}) : A.providerType === "stripe_connect_oauth" ? !A.clientSecret || !Y || !X ? /* @__PURE__ */ p("p", {
+					className: "text-sm text-destructive",
+					children: /* @__PURE__ */ p("span", { children: a("secure_payment_link.errors.missing_publishable_key") })
+				}) : /* @__PURE__ */ p(x, {
+					stripe: Y,
+					options: X,
+					children: /* @__PURE__ */ p(le, {
+						clientSecret: A.clientSecret,
+						onSuccess: () => {
+							q();
+						}
+					})
+				}, A.clientSecret) : /* @__PURE__ */ p("p", {
+					className: "text-sm text-destructive",
+					children: /* @__PURE__ */ p("span", { children: a("secure_payment_link.errors.session_failed") })
+				})
+			})]
+		})
+	});
 }
-export {
-  Fe as default
-};
+//#endregion
+export { D as default };