@loczer/storefront-sdk 0.242.0 → 0.244.0

package/dist/pages/CheckoutPaymentPage.js

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

package/dist/pages/CheckoutSuccessPage.d.ts

@@ -1,2 +1,2 @@
-export default function CheckoutSuccessPage(): import("react/jsx-runtime").JSX.Element;
+export default function CheckoutSuccessPage(): import("react").JSX.Element;
 //# sourceMappingURL=CheckoutSuccessPage.d.ts.map

package/dist/pages/CheckoutSuccessPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckoutSuccessPage.d.ts","sourceRoot":"","sources":["../../src/pages/CheckoutSuccessPage.tsx"],"names":[],"mappings":"AAQA,MAAM,CAAC,OAAO,UAAU,mBAAmB,4CAoC1C"}
+{"version":3,"file":"CheckoutSuccessPage.d.ts","sourceRoot":"","sources":["../../src/pages/CheckoutSuccessPage.tsx"],"names":[],"mappings":"AASA,MAAM,CAAC,OAAO,UAAU,mBAAmB,gCAkD1C"}

package/dist/pages/CheckoutSuccessPage.js

@@ -1,44 +1,56 @@
 import { resolveBookingSearchParamsFromSessionStorage as e } from "../lib/booking.js";
-import { Button as t } from "../ui/button.js";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Link as i, useParams as a, useSearchParams as o } from "@rpcbase/router";
-import { useTranslation as s } from "react-i18next";
-import { ArrowRight as c, CheckCircle2 as l } from "lucide-react";
+import { getCheckoutBookingNumberFromSearchParams as t } from "../lib/checkoutSubmit.js";
+import { Button as n } from "../ui/button.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Link as a, useParams as o, useSearchParams as s } from "@rpcbase/router";
+import { useTranslation as c } from "react-i18next";
+import { ArrowRight as l, CheckCircle2 as u } from "lucide-react";
 //#region src/pages/CheckoutSuccessPage.tsx
-function u() {
-	let { t: u } = s(), { storeSlug: d } = a(), [f] = o(), p = e(f, d).toString(), m = `/${d ?? ""}/booking${p ? `?${p}` : ""}`, h = `/${d ?? ""}${p ? `?${p}` : ""}`;
-	return /* @__PURE__ */ r("div", {
+function d() {
+	let { t: d } = c(), { storeSlug: f } = o(), [p] = s(), m = t(p), h = e(p, f).toString(), g = `/${f ?? ""}/booking${h ? `?${h}` : ""}`, _ = `/${f ?? ""}${h ? `?${h}` : ""}`;
+	return /* @__PURE__ */ i("div", {
 		className: "mx-auto max-w-3xl px-4 py-14 sm:px-6",
 		children: [
-			/* @__PURE__ */ n("div", {
+			/* @__PURE__ */ r("div", {
 				className: "mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-success-subtle text-success",
-				children: /* @__PURE__ */ n(l, {
+				children: /* @__PURE__ */ r(u, {
 					className: "h-6 w-6",
 					"aria-hidden": "true"
 				})
 			}),
-			/* @__PURE__ */ n("h1", {
+			/* @__PURE__ */ r("h1", {
 				className: "mt-6 text-center text-2xl font-semibold tracking-tight text-slate-950",
-				children: /* @__PURE__ */ n("span", { children: u("checkout_success_title") })
+				children: /* @__PURE__ */ r("span", { children: d("checkout_success_title") })
 			}),
-			/* @__PURE__ */ n("p", {
-				className: "mt-2 text-center text-sm text-slate-600",
-				children: /* @__PURE__ */ n("span", { children: u("checkout_success_description") })
+			m ? /* @__PURE__ */ i("div", {
+				className: "mx-auto mt-6 max-w-sm rounded-xl border border-success-border bg-success-subtle px-5 py-4 text-center",
+				"data-testid": "checkout-success-booking-number",
+				children: [/* @__PURE__ */ r("p", {
+					className: "text-sm text-slate-600",
+					children: /* @__PURE__ */ r("span", { children: d("checkout_success_booking_number") })
+				}), /* @__PURE__ */ r("p", {
+					className: "mt-1 font-mono text-xl font-semibold tracking-wide text-slate-950",
+					children: /* @__PURE__ */ r("span", { children: m })
+				})]
+			}) : null,
+			/* @__PURE__ */ r("p", {
+				className: "mt-3 text-center text-sm text-slate-600",
+				children: /* @__PURE__ */ r("span", { children: d("checkout_success_description") })
 			}),
-			/* @__PURE__ */ r("div", {
+			/* @__PURE__ */ i("div", {
 				className: "mt-8 flex flex-col gap-3 sm:flex-row sm:justify-center",
-				children: [/* @__PURE__ */ n(i, {
-					to: m,
-					children: /* @__PURE__ */ n(t, {
+				children: [/* @__PURE__ */ r(a, {
+					to: g,
+					children: /* @__PURE__ */ r(n, {
 						variant: "outline",
 						className: "w-full sm:w-auto",
-						children: /* @__PURE__ */ n("span", { children: u("checkout_success_back_to_products") })
+						children: /* @__PURE__ */ r("span", { children: d("checkout_success_back_to_products") })
 					})
-				}), /* @__PURE__ */ n(i, {
-					to: h,
-					children: /* @__PURE__ */ r(t, {
+				}), /* @__PURE__ */ r(a, {
+					to: _,
+					children: /* @__PURE__ */ i(n, {
 						className: "w-full gap-2 sm:w-auto",
-						children: [/* @__PURE__ */ n("span", { children: u("checkout_success_back_home") }), /* @__PURE__ */ n(c, {
+						children: [/* @__PURE__ */ r("span", { children: d("checkout_success_back_home") }), /* @__PURE__ */ r(l, {
 							className: "h-4 w-4",
 							"aria-hidden": "true"
 						})]
@@ -49,4 +61,4 @@ function u() {
 	});
 }
 //#endregion
-export { u as default };
+export { d as default };