@burdenoff/microfe-billing 2026.510.114

package/dist/billing/modules/checkout/pages/CheckoutPage.js

@@ -0,0 +1,1248 @@
+import { useBilling as e } from "../../../providers/BillingProvider.js";
+import { AccessDenied as t } from "../../../shared/components/AccessDenied.js";
+import { PageHeader as n } from "../../../shared/components/PageHeader.js";
+import "../../../shared/components/index.js";
+import { useBillingEventEmitter as r } from "../../../hooks/useBillingEventEmitter.js";
+import { getStoredBillingAccountId as i } from "../../../hooks/useBillingAccountSelection.js";
+import { useBillingPermissions as a } from "../../../hooks/useBillingPermissions.js";
+import { useGetActiveSubscriptionsCheckoutQuery as o, useGetBillingAccountsCheckoutQuery as ee, useGetCostOfCreditsCheckoutQuery as te, useGetPaymentMethodsCheckoutQuery as ne, useGetPlanCheckoutQuery as re, useGetSelectedAddonCheckoutQuery as ie, useGetStoreOrderCheckoutQuery as ae } from "../../../../generated/global-operations.js";
+import { useAddonCartStore as oe } from "../../addons/store/addonCartStore.js";
+import { useBillingNavigate as se } from "../../../hooks/useBillingNavigate.js";
+import { recordAffiliateEvent as ce } from "../../affiliate/api.js";
+import { useCheckout as le } from "../hooks/useCheckout.js";
+import { isNativeIAPAvailable as ue } from "../../../lib/native-purchases.js";
+import { useNativeCheckout as de } from "../hooks/useNativeCheckout.js";
+import { usePaymentProviders as fe } from "../hooks/usePaymentProviders.js";
+import { usePaymentStatusPolling as pe } from "../hooks/usePaymentStatusPolling.js";
+import "../hooks/index.js";
+import { NativeCheckoutView as me } from "../components/NativeCheckoutView.js";
+import { BillingAccountSelector as he } from "../components/BillingAccountSelector.js";
+import { OrderSummary as ge } from "../components/OrderSummary.js";
+import { PromoCodeInput as _e } from "../components/PromoCodeInput.js";
+import { CreditsAmountInput as ve } from "../components/CreditsAmountInput.js";
+import { StripePaymentForm as ye } from "../components/StripePaymentForm.js";
+import { RazorpayPaymentButton as be } from "../components/RazorpayPaymentButton.js";
+import { SubscriptionSelector as xe } from "../components/SubscriptionSelector.js";
+import { SimpleAutoPayToggle as Se } from "../components/SimpleAutoPayToggle.js";
+import { UnifiedPaymentMethodSelector as Ce } from "../components/UnifiedPaymentMethodSelector.js";
+import "../components/index.js";
+import { buildStoreOrderCheckoutItems as we, normalizeStoreOrderCurrency as Te } from "../utils/storeOrder.js";
+import { useCallback as s, useEffect as c, useMemo as l, useRef as Ee, useState as u } from "react";
+import { ArrowLeft as De, ArrowRight as Oe, Blocks as ke, CheckCircle as Ae, Coins as je, CreditCard as Me, Loader2 as d, Package as Ne, Receipt as Pe, RefreshCw as Fe, ShoppingCart as Ie, Wallet as Le, XCircle as Re } from "lucide-react";
+import { useLocation as ze, useParams as Be } from "react-router-dom";
+import { useAppShell as Ve } from "@burdenoff/fe-libs/shared/providers/shell";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { useI18n as He } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { getProfileScopedKey as Ue } from "@burdenoff/fe-libs/shared/utils";
+//#region src/billing/modules/checkout/pages/CheckoutPage.tsx
+var We = () => {
+	let { t: We } = He(), h = (e, t) => {
+		let n = We(e);
+		return n === e ? t : n;
+	}, { planId: Ge, addonId: g, storeOrderId: _ } = Be(), v = se(), y = ze(), b = y.state, Ke = a(), { emit: x } = r(), { orgId: S, stripePublishableKey: qe, razorpayKey: Je, apiGatewayUrl: Ye, authToken: Xe, currentUser: Ze } = e(), { productSlug: Qe } = Ve(), $e = Ee(null), { items: C, clearCart: et, _hasHydrated: w } = oe(), T = y.pathname.includes("/checkout/addons") && !g, E = y.pathname.includes("/checkout/store") && !!_, D = T ? "ADDON" : E ? "ORDER" : b?.purchaseType ?? (Ge ? "PLAN" : g ? "ADDON" : "CREDITS"), O = b?.itemId ?? Ge ?? g ?? _, [k, A] = u("select"), [j, M] = u(null), [tt, N] = u(null), [P, F] = u(null), [nt, rt] = u("card");
+	c(() => {
+		if (k !== "success" || !P) return;
+		let e = typeof window < "u" ? window.localStorage.getItem(Ue("boff-referral-attribution")) : null;
+		if (!e) return;
+		let t;
+		try {
+			t = JSON.parse(e);
+		} catch {
+			return;
+		}
+		if (!t.journeyId && !t.codeId) return;
+		let n = P.transactionId || j?.paymentId || j?.orderId || _ || O || D, r = `${t.journeyId ?? "journey"}:${n}`;
+		$e.current !== r && ($e.current = r, ce({
+			journeyId: t.journeyId,
+			codeId: t.codeId,
+			eventType: D === "ORDER" ? "STORE_PURCHASE" : "PAID_CONVERSION",
+			productSlug: Qe,
+			actorUserId: Ze?.id,
+			orderId: P.transactionId || j?.paymentId || j?.orderId,
+			billingAccountId: P.billingAccountId,
+			storeOrderId: D === "ORDER" ? _ : void 0,
+			valueAmount: P.total,
+			currency: P.currency,
+			mode: "billing-checkout",
+			metadata: {
+				purchaseType: D,
+				billingAccountName: P.billingAccountName
+			}
+		}, {
+			apiGatewayUrl: Ye,
+			authToken: Xe,
+			orgId: S
+		}).catch(() => {
+			$e.current = null;
+		}));
+	}, [
+		Ye,
+		Xe,
+		Ze?.id,
+		O,
+		k,
+		S,
+		j?.orderId,
+		j?.paymentId,
+		Qe,
+		P,
+		D,
+		_
+	]);
+	let [I, L] = u(1), R = le({
+		defaultCurrency: "USD",
+		upgradeFromSubscriptionId: b?.upgradeFromSubscriptionId,
+		downgradeFromSubscriptionId: b?.downgradeFromSubscriptionId
+	}), { config: it, stripeEnabled: at, razorpayEnabled: z } = fe(), { elapsedTime: B, error: ot } = pe({
+		paymentId: k === "processing" ? j?.paymentId ?? null : null,
+		billingAccountId: R.billingAccount?.id ?? P?.billingAccountId ?? null,
+		paymentType: nt,
+		pollingInterval: 5e3,
+		maxPollingTime: 3e5,
+		onSuccess: (e) => {
+			e.transactionId && F((t) => t && {
+				...t,
+				transactionId: e.transactionId
+			}), A("success"), T && et();
+		},
+		onFailure: (e) => {
+			N(e.failureReason || "Payment failed"), A("error");
+		},
+		onTimeout: () => {
+			N("Payment verification timed out. Please check your billing history for the payment status."), A("error");
+		}
+	}), { data: st, loading: ct } = ee({}), { data: V, loading: lt } = re({
+		variables: { id: O },
+		skip: D !== "PLAN" || !O
+	}), { data: H, loading: ut } = ie({
+		variables: { addonIDs: O ? [O] : [] },
+		skip: D !== "ADDON" || !O || E
+	}), { data: U } = ae({
+		variables: { id: _ },
+		skip: !E || !_
+	}), { data: dt, loading: ft } = ne({
+		variables: { billingAccountId: R.billingAccount?.id },
+		skip: !R.billingAccount?.id
+	}), { data: pt, loading: mt } = o({
+		variables: { billingAccountId: R.billingAccount?.id },
+		skip: !R.billingAccount?.id || D !== "ADDON" || E
+	}), W = l(() => pt?.getActiveSubscriptions ?? [], [pt]), G = l(() => !R.selectedSubscriptionId || W.length === 0 ? null : W.find((e) => e.id === R.selectedSubscriptionId) ?? null, [R.selectedSubscriptionId, W]), K = R.items[0]?.type === "CREDITS" ? R.items[0].quantity : 100, { data: q, loading: ht } = te({
+		variables: {
+			creditAmount: K,
+			currency: R.selectedCurrency || "USD"
+		},
+		skip: D !== "CREDITS"
+	}), J = l(() => q?.getCostOfCredits?.amount && K > 0 ? q.getCostOfCredits.amount / K : .01, [q, K]), Y = l(() => dt?.getPaymentMethods ?? [], [dt]), X = l(() => st?.getBillingAccountsByOrg ?? [], [st]), Z = l(() => {
+		if (!R.billingAccount) return;
+		let e = X.find((e) => e.id === R.billingAccount?.id)?.billingAddresses;
+		if (e && e.length > 0) return e[0]?.country || void 0;
+	}, [R.billingAccount, X]), [gt, _t] = u(null);
+	c(() => {
+		if (Z) if (Z === "IN") R.selectedCurrency !== "INR" && R.setCurrency("INR"), z && gt !== Z && R.selectedProvider !== "CREDITS" && (R.setPaymentProvider("RAZORPAY"), _t(Z));
+		else {
+			if (R.selectedCurrency === "INR") {
+				let e = R.billingAccount?.currency, t = e && e !== "INR" ? e : "USD";
+				R.setCurrency(t);
+			}
+			R.selectedProvider === "RAZORPAY" && (R.setPaymentProvider("STRIPE"), _t(Z));
+		}
+	}, [
+		Z,
+		R.selectedCurrency,
+		R.selectedProvider,
+		R.setCurrency,
+		R.setPaymentProvider,
+		R.billingAccount?.currency,
+		z,
+		gt
+	]), c(() => {
+		if (!R.billingAccount?.currency || Z === "IN") return;
+		let e = R.billingAccount.currency;
+		e !== "INR" && R.selectedCurrency !== e && R.setCurrency(e);
+	}, [
+		R.billingAccount?.id,
+		R.billingAccount?.currency,
+		Z,
+		R.selectedCurrency,
+		R.setCurrency
+	]), c(() => {
+		if (R.selectedProvider !== "AUTO" && R.selectedProvider !== null) return;
+		let e = R.availableCredits >= R.total;
+		if (R.canPayWithCredits && e) {
+			R.setPaymentProvider("CREDITS"), R.setSelectedPaymentMethodId(null);
+			return;
+		}
+		if (Y.length > 0 && !R.selectedPaymentMethodId) {
+			let e = Y.find((e) => e.isDefault && e.isVerified), t = Y.find((e) => e.isVerified), n = e || t;
+			if (n) {
+				R.setSelectedPaymentMethodId(n.id), n.razorpayPaymentMethodId ? R.setPaymentProvider("RAZORPAY") : n.stripePaymentMethodId && R.setPaymentProvider("STRIPE");
+				return;
+			}
+		}
+	}, [
+		Y.length,
+		R.canPayWithCredits,
+		R.availableCredits,
+		R.total
+	]);
+	let [Q, $] = u(!1);
+	c(() => {
+		if (!E || Q || !U?.getStoreOrder) return;
+		let e = Te(U.getStoreOrder.currency);
+		R.selectedCurrency !== e && R.setCurrency(e);
+	}, [
+		E,
+		Q,
+		U,
+		R.selectedCurrency,
+		R.setCurrency
+	]), c(() => {
+		if (D === "PLAN" && V?.getPlan?.pricingModel === "PER_SEAT") {
+			let e = V.getPlan.minSeats ?? 1;
+			L((t) => t < e ? e : t);
+		}
+	}, [V, D]), c(() => {
+		D === "PLAN" && V?.getPlan?.pricingModel === "PER_SEAT" && Q && $(!1);
+	}, [I]), c(() => {
+		if (!Q) {
+			if (T && w && C.length > 0) {
+				R.clearItems();
+				for (let e of C) {
+					let t = e.addon, n = t.features?.map((e) => ({
+						id: e.quota?.id || e.id,
+						name: e.quota?.name || "Feature",
+						limits: e.quota?.limits
+					})) || [], r = R.selectedCurrency || "USD", i = t.currencyPrices?.[r] ?? t.price, a = {
+						id: t.id,
+						type: "ADDON",
+						name: t.name,
+						description: typeof t.context == "object" && t.context !== null ? t.context.description : typeof t.context == "string" ? t.context : void 0,
+						price: i,
+						priceUSD: t.price,
+						currency: r,
+						quantity: e.quantity,
+						features: n,
+						metadata: { addonId: t.id }
+					};
+					R.addItem(a);
+				}
+				$(!0);
+				return;
+			}
+			if (D === "PLAN" && V?.getPlan) {
+				let e = V.getPlan, t = e.features?.map((e) => ({
+					id: e.quota?.id || e.id,
+					name: e.quota?.name || "Feature",
+					limits: e.quota?.limits
+				})) || [], n = R.selectedCurrency || "USD", r = e.currencyPrices, i = e.pricingModel === "PER_SEAT", a;
+				if (i && e.pricePerSeat) {
+					let t = r?.[n];
+					a = (typeof t == "object" && t?.perSeat ? t.perSeat : e.pricePerSeat) * I;
+				} else {
+					let t = r?.[n];
+					a = typeof t == "number" ? t : e.price;
+				}
+				let o = i ? I : 1, ee = {
+					id: e.id,
+					type: "PLAN",
+					name: e.name,
+					description: typeof e.context == "object" && e.context !== null ? e.context.description : typeof e.context == "string" ? e.context : void 0,
+					price: a,
+					priceUSD: i && e.pricePerSeat ? e.pricePerSeat * o : e.price,
+					currency: n,
+					quantity: o,
+					features: t,
+					metadata: {
+						planId: e.id,
+						duration: e.duration,
+						seatCount: i ? o : void 0
+					}
+				};
+				R.addItem(ee), $(!0);
+			} else if (D === "ADDON" && !T && H?.getSelectedAddons?.[0]) {
+				let e = H.getSelectedAddons[0], t = e.features?.map((e) => ({
+					id: e.quota?.id || e.id,
+					name: e.quota?.name || "Feature",
+					limits: e.quota?.limits
+				})) || [], n = R.selectedCurrency || "USD", r = e.currencyPrices?.[n] ?? e.price, i = {
+					id: e.id,
+					type: "ADDON",
+					name: e.name,
+					description: typeof e.context == "object" && e.context !== null ? e.context.description : typeof e.context == "string" ? e.context : void 0,
+					price: r,
+					priceUSD: e.price,
+					currency: n,
+					quantity: b?.quantity ?? 1,
+					features: t,
+					metadata: { addonId: e.id }
+				};
+				R.addItem(i), $(!0);
+			} else if (E && U?.getStoreOrder) {
+				let e = U.getStoreOrder, t = we(e);
+				for (let e of t) R.addItem(e);
+				$(!0);
+			} else if (D === "CREDITS") {
+				let e = {
+					id: "credits-purchase",
+					type: "CREDITS",
+					name: "Credits",
+					description: "Purchase credits for your account",
+					price: J,
+					currency: R.selectedCurrency || "USD",
+					quantity: 100
+				};
+				R.addItem(e), $(!0);
+			}
+		}
+	}, [
+		D,
+		V,
+		H,
+		U,
+		R.addItem,
+		R.clearItems,
+		b?.quantity,
+		Q,
+		T,
+		E,
+		C,
+		w,
+		J,
+		R.selectedCurrency
+	]), c(() => {
+		if (!(!E || !Q || R.conversionRate <= 1)) {
+			for (let e of R.items) if (e.type === "ORDER" && e.currency !== R.selectedCurrency) {
+				let t = e.price * R.conversionRate;
+				R.updateItemPrice(e.id, t, R.selectedCurrency);
+			}
+		}
+	}, [
+		E,
+		Q,
+		R.conversionRate,
+		R.selectedCurrency,
+		R.updateItemPrice
+	]), c(() => {
+		if (D === "CREDITS" && Q && J > 0) {
+			let e = R.items.find((e) => e.id === "credits-purchase");
+			e && e.price !== J && R.updateItemPrice("credits-purchase", J);
+		}
+	}, [
+		D,
+		Q,
+		J,
+		R.items,
+		R.updateItemPrice
+	]), c(() => {
+		if (!Q || R.items.length === 0) return;
+		let e = R.selectedCurrency || "USD";
+		for (let t of R.items) if (t.type === "PLAN" && V?.getPlan) {
+			let n = V.getPlan.currencyPrices?.[e] ?? V.getPlan.price;
+			(t.price !== n || t.currency !== e) && R.updateItemPrice(t.id, n, e);
+		} else if (t.type === "ADDON") {
+			if (!T && H?.getSelectedAddons?.[0]) {
+				let n = H.getSelectedAddons[0], r = n.currencyPrices?.[e] ?? n.price;
+				(t.price !== r || t.currency !== e) && R.updateItemPrice(t.id, r, e);
+			}
+			if (T) {
+				let n = C.find((e) => e.addon.id === t.id);
+				if (n) {
+					let r = n.addon.currencyPrices?.[e] ?? n.addon.price;
+					(t.price !== r || t.currency !== e) && R.updateItemPrice(t.id, r, e);
+				}
+			}
+		}
+	}, [
+		R.selectedCurrency,
+		Q,
+		R.items,
+		R.updateItemPrice,
+		V,
+		H,
+		C,
+		T
+	]), c(() => {
+		if (X.length > 0 && !R.billingAccount) {
+			if (b?.billingAccountId) {
+				let e = X.find((e) => e.id === b.billingAccountId);
+				if (e) {
+					R.setBillingAccount(e);
+					return;
+				}
+			}
+			if (S) {
+				let e = i(S);
+				if (e) {
+					let t = X.find((t) => t.id === e);
+					if (t) {
+						R.setBillingAccount(t);
+						return;
+					}
+				}
+			}
+			R.setBillingAccount(X[0]);
+		}
+	}, [
+		X,
+		R.billingAccount,
+		R.setBillingAccount,
+		b?.billingAccountId,
+		S
+	]);
+	let vt = !!(b?.upgradeFromSubscriptionId || b?.downgradeFromSubscriptionId);
+	if (c(() => {
+		T && w && C.length === 0 && !Q && v("/addons", { replace: !0 });
+	}, [
+		w,
+		C.length,
+		T,
+		Q,
+		v
+	]), !Ke.canProcessPayment) return /* @__PURE__ */ p(t, { message: "You don't have permission to make purchases." });
+	let yt = de({
+		billingAccountId: R.billingAccount?.id,
+		purchaseType: D,
+		productId: O
+	});
+	if (ue()) return /* @__PURE__ */ p(me, {
+		purchaseType: D,
+		productId: O,
+		billingAccountId: R.billingAccount?.id,
+		nativeCheckout: yt,
+		onBack: () => v("dashboard")
+	});
+	let bt = ct || lt && D === "PLAN" || ut && D === "ADDON" && !T || T && !w;
+	if (T && w && C.length === 0 && !Q) return null;
+	let xt = s(async () => {
+		if (!R.billingAccount) return;
+		N(null);
+		let e = R.billingAccount.creditAmount ?? 0, t = [...R.items], n = R.total, r = await R.initiatePayment();
+		if (r.success) {
+			if (x("billing.checkout.initiated", {
+				route: "/billing/checkout",
+				entityId: r.paymentId ?? r.orderId,
+				source: "checkout",
+				amount: r.total || n,
+				currency: r.currency || R.selectedCurrency
+			}), R.selectedProvider === "CREDITS") {
+				x("billing.credits.spent", {
+					route: "/billing/checkout",
+					entityId: r.orderId,
+					source: "checkout",
+					amount: n,
+					currency: "CREDITS"
+				}), F({
+					items: t,
+					total: n,
+					billingAccountName: R.billingAccount.name,
+					billingAccountId: R.billingAccount.id,
+					previousBalance: e,
+					newBalance: e - n,
+					paymentMethod: "credits",
+					currency: "Credits",
+					transactionId: r.orderId
+				}), rt("credits"), M({ paymentId: r.orderId }), A("processing");
+				return;
+			}
+			F({
+				items: t,
+				total: r.total || n,
+				billingAccountName: R.billingAccount.name,
+				billingAccountId: R.billingAccount.id,
+				previousBalance: e,
+				newBalance: e,
+				paymentMethod: "card",
+				currency: r.currency || R.selectedCurrency,
+				transactionId: r.paymentId
+			}), rt("card"), M({
+				clientSecret: r.clientSecret,
+				orderId: r.orderId,
+				razorpayKeyId: r.razorpayKeyId,
+				razorpayCustomerId: r.razorpayCustomerId,
+				paymentId: r.paymentId,
+				paymentComplete: r.paymentComplete,
+				prefillName: r.prefillName,
+				prefillEmail: r.prefillEmail,
+				prefillContact: r.prefillContact,
+				total: r.total,
+				currency: r.currency
+			}), r.paymentComplete ? A("processing") : A("payment");
+		} else x("billing.checkout.failed", {
+			route: "/billing/checkout",
+			source: "checkout",
+			reason: r.error || "Payment initiation failed"
+		}), N(r.error || "Payment initiation failed"), A("error");
+	}, [R, x]), St = s((e) => {
+		x("billing.payment.succeeded", {
+			route: "/billing/checkout",
+			entityId: j?.paymentId ?? j?.orderId,
+			source: "checkout"
+		}), M((e) => e), A("processing");
+	}, [
+		x,
+		j?.orderId,
+		j?.paymentId
+	]), Ct = s((e) => {
+		x("billing.payment.failed", {
+			route: "/billing/checkout",
+			entityId: j?.paymentId ?? j?.orderId,
+			source: "checkout",
+			reason: e
+		}), N(e), A("error");
+	}, [
+		x,
+		j?.orderId,
+		j?.paymentId
+	]), wt = s((e) => {
+		R.updateItemQuantity("credits-purchase", e);
+	}, [R]), Tt = () => {
+		if (T) {
+			let e = R.items.length;
+			return `Purchase ${e} Add-on${e === 1 ? "" : "s"}`;
+		}
+		switch (D) {
+			case "CREDITS": return "Buy Credits";
+			case "PLAN": return "Subscribe to Plan";
+			case "ADDON": return "Purchase Add-on";
+			default: return "Checkout";
+		}
+	}, Et = () => {
+		switch (D) {
+			case "CREDITS": return /* @__PURE__ */ p(je, { className: "h-6 w-6" });
+			case "PLAN": return /* @__PURE__ */ p(Ne, { className: "h-6 w-6" });
+			case "ADDON": return /* @__PURE__ */ p(ke, { className: "h-6 w-6" });
+			default: return /* @__PURE__ */ p(Ie, { className: "h-6 w-6" });
+		}
+	};
+	if (bt) return /* @__PURE__ */ p("div", {
+		className: "flex items-center justify-center min-h-[400px]",
+		children: /* @__PURE__ */ m("div", {
+			className: "text-center space-y-4",
+			children: [/* @__PURE__ */ p(d, { className: "h-8 w-8 animate-spin mx-auto text-primary" }), /* @__PURE__ */ p("p", {
+				className: "text-muted-foreground",
+				children: h("billing.checkout.loadingCheckout", "Loading checkout...")
+			})]
+		})
+	});
+	if (k === "success") {
+		let e = (e) => {
+			if (!P) return `${e.toFixed(2)}`;
+			let t = P.currency;
+			return t === "Credits" ? `${e.toFixed(2)} Credits` : `${{
+				INR: "₹",
+				USD: "$",
+				EUR: "€",
+				GBP: "£"
+			}[t] || t + " "}${e.toFixed(2)}`;
+		}, t = (e) => `${e.toFixed(2)} Credits`;
+		return /* @__PURE__ */ m("div", {
+			className: "max-w-2xl mx-auto p-6 space-y-6",
+			children: [
+				/* @__PURE__ */ m("div", {
+					className: "text-center space-y-4",
+					children: [/* @__PURE__ */ p("div", {
+						className: "inline-flex p-4 rounded-full bg-status-success-bg-subtle text-status-success-text",
+						children: /* @__PURE__ */ p(Ae, { className: "h-12 w-12" })
+					}), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("h1", {
+						className: "text-2xl font-bold text-foreground",
+						children: h("billing.checkout.paymentSuccessful", "Payment Successful!")
+					}), /* @__PURE__ */ p("p", {
+						className: "text-muted-foreground mt-2",
+						children: h("billing.checkout.purchaseCompleted", "Your purchase has been completed successfully.")
+					})] })]
+				}),
+				P && /* @__PURE__ */ m("div", {
+					className: "bg-card border border-border rounded-lg overflow-hidden",
+					children: [
+						/* @__PURE__ */ m("div", {
+							className: "p-4 border-b border-border",
+							children: [/* @__PURE__ */ m("h3", {
+								className: "font-semibold text-foreground mb-3 flex items-center gap-2",
+								children: [/* @__PURE__ */ p(Pe, { className: "h-4 w-4" }), h("billing.checkout.itemsPurchased", "Items Purchased")]
+							}), /* @__PURE__ */ p("div", {
+								className: "space-y-2",
+								children: P.items.map((t) => /* @__PURE__ */ m("div", {
+									className: "flex items-center justify-between",
+									children: [/* @__PURE__ */ m("div", {
+										className: "flex items-center gap-2",
+										children: [
+											t.type === "PLAN" && /* @__PURE__ */ p(Ne, { className: "h-4 w-4 text-accent-blue" }),
+											t.type === "ADDON" && /* @__PURE__ */ p(ke, { className: "h-4 w-4 text-accent-purple" }),
+											t.type === "CREDITS" && /* @__PURE__ */ p(je, { className: "h-4 w-4 text-status-warning-text" }),
+											t.type === "ORDER" && /* @__PURE__ */ p(Ie, { className: "h-4 w-4 text-status-success-text" }),
+											/* @__PURE__ */ p("span", {
+												className: "text-foreground",
+												children: t.name
+											}),
+											t.quantity > 1 && /* @__PURE__ */ m("span", {
+												className: "text-xs text-muted-foreground",
+												children: ["x", t.quantity]
+											})
+										]
+									}), /* @__PURE__ */ p("span", {
+										className: "text-muted-foreground",
+										children: e(t.price * t.quantity)
+									})]
+								}, t.id))
+							})]
+						}),
+						/* @__PURE__ */ p("div", {
+							className: "p-4 border-b border-border bg-muted/30",
+							children: /* @__PURE__ */ m("div", {
+								className: "grid grid-cols-2 gap-4",
+								children: [/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("p", {
+									className: "text-xs text-muted-foreground mb-1",
+									children: h("billing.checkout.paymentMethod", "Payment Method")
+								}), /* @__PURE__ */ p("div", {
+									className: "flex items-center gap-2",
+									children: P.paymentMethod === "credits" ? /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(Le, { className: "h-4 w-4 text-status-warning-text" }), /* @__PURE__ */ p("span", {
+										className: "font-medium text-foreground",
+										children: h("billing.checkout.credits", "Credits")
+									})] }) : /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(Me, { className: "h-4 w-4 text-accent-blue" }), /* @__PURE__ */ p("span", {
+										className: "font-medium text-foreground",
+										children: h("billing.checkout.card", "Card")
+									})] })
+								})] }), /* @__PURE__ */ m("div", {
+									className: "text-right",
+									children: [/* @__PURE__ */ p("p", {
+										className: "text-xs text-muted-foreground mb-1",
+										children: h("billing.checkout.totalPaid", "Total Paid")
+									}), /* @__PURE__ */ p("p", {
+										className: "font-bold text-lg text-foreground",
+										children: e(P.total)
+									})]
+								})]
+							})
+						}),
+						P.paymentMethod === "credits" && /* @__PURE__ */ m("div", {
+							className: "p-4 border-b border-border",
+							children: [/* @__PURE__ */ m("h3", {
+								className: "font-semibold text-foreground mb-3 flex items-center gap-2",
+								children: [/* @__PURE__ */ p(Le, { className: "h-4 w-4" }), h("billing.checkout.creditBalance", "Credit Balance")]
+							}), /* @__PURE__ */ m("div", {
+								className: "flex items-center gap-4",
+								children: [
+									/* @__PURE__ */ m("div", {
+										className: "flex-1 text-center p-3 rounded-lg bg-muted/50",
+										children: [/* @__PURE__ */ p("p", {
+											className: "text-xs text-muted-foreground mb-1",
+											children: h("billing.checkout.previousBalance", "Previous Balance")
+										}), /* @__PURE__ */ p("p", {
+											className: "font-semibold text-foreground",
+											children: t(P.previousBalance)
+										})]
+									}),
+									/* @__PURE__ */ p(Oe, { className: "h-5 w-5 text-muted-foreground shrink-0" }),
+									/* @__PURE__ */ m("div", {
+										className: "flex-1 text-center p-3 rounded-lg bg-status-success-bg-subtle",
+										children: [/* @__PURE__ */ p("p", {
+											className: "text-xs text-muted-foreground mb-1",
+											children: h("billing.checkout.newBalance", "New Balance")
+										}), /* @__PURE__ */ p("p", {
+											className: "font-semibold text-status-success-text",
+											children: t(P.newBalance)
+										})]
+									})
+								]
+							})]
+						}),
+						/* @__PURE__ */ p("div", {
+							className: "p-4 bg-muted/20",
+							children: /* @__PURE__ */ m("div", {
+								className: "flex items-center justify-between",
+								children: [/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("p", {
+									className: "text-xs text-muted-foreground mb-1",
+									children: h("billing.checkout.billingAccount", "Billing Account")
+								}), /* @__PURE__ */ p("p", {
+									className: "font-medium text-foreground",
+									children: P.billingAccountName
+								})] }), P.transactionId && /* @__PURE__ */ m("div", {
+									className: "text-right",
+									children: [/* @__PURE__ */ p("p", {
+										className: "text-xs text-muted-foreground mb-1",
+										children: h("billing.checkout.transactionId", "Transaction ID")
+									}), /* @__PURE__ */ m("p", {
+										className: "font-mono text-xs text-muted-foreground",
+										children: [P.transactionId.slice(0, 8), "..."]
+									})]
+								})]
+							})
+						})
+					]
+				}),
+				/* @__PURE__ */ m("div", {
+					className: "flex flex-col sm:flex-row gap-3 justify-center pt-2",
+					children: [/* @__PURE__ */ p("button", {
+						onClick: () => v("/overview"),
+						className: "px-6 py-3 text-sm font-medium bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors",
+						children: h("billing.checkout.backToOverview", "Back to Overview")
+					}), /* @__PURE__ */ p("button", {
+						onClick: () => v("/subscriptions"),
+						className: "px-6 py-3 text-sm font-medium border border-border text-foreground rounded-lg hover:bg-muted transition-colors",
+						children: h("billing.checkout.viewSubscriptions", "View Subscriptions")
+					})]
+				})
+			]
+		});
+	}
+	if (k === "error") return /* @__PURE__ */ p("div", {
+		className: "max-w-lg mx-auto p-6",
+		children: /* @__PURE__ */ m("div", {
+			className: "text-center space-y-6",
+			children: [
+				/* @__PURE__ */ p("div", {
+					className: "inline-flex p-4 rounded-full bg-destructive/10 text-destructive",
+					children: /* @__PURE__ */ p(Re, { className: "h-12 w-12" })
+				}),
+				/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("h1", {
+					className: "text-2xl font-bold text-foreground",
+					children: h("billing.checkout.paymentFailed", "Payment Failed")
+				}), /* @__PURE__ */ p("p", {
+					className: "text-muted-foreground mt-2",
+					children: tt || ot || R.error || h("billing.checkout.genericError", "Something went wrong. Please try again.")
+				})] }),
+				/* @__PURE__ */ m("div", {
+					className: "flex gap-3 justify-center",
+					children: [/* @__PURE__ */ p("button", {
+						onClick: () => v(-1),
+						className: "px-4 py-2 rounded-lg border border-border hover:bg-muted",
+						children: h("billing.checkout.goBack", "Go Back")
+					}), /* @__PURE__ */ p("button", {
+						onClick: () => {
+							A("select"), N(null), R.reset();
+						},
+						className: "px-4 py-2 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90",
+						children: h("billing.checkout.tryAgain", "Try Again")
+					})]
+				})
+			]
+		})
+	});
+	if (k === "processing") return /* @__PURE__ */ p("div", {
+		className: "max-w-lg mx-auto p-6",
+		children: /* @__PURE__ */ m("div", {
+			className: "text-center space-y-6",
+			children: [
+				/* @__PURE__ */ p("div", {
+					className: "inline-flex p-4 rounded-full bg-primary/10 text-primary",
+					children: /* @__PURE__ */ p(d, { className: "h-12 w-12 animate-spin" })
+				}),
+				/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("h1", {
+					className: "text-2xl font-bold text-foreground",
+					children: h("billing.checkout.verifyingPayment", "Verifying Payment")
+				}), /* @__PURE__ */ p("p", {
+					className: "text-muted-foreground mt-2",
+					children: h("billing.checkout.verifyingPaymentDescription", "Please wait while we confirm your payment...")
+				})] }),
+				/* @__PURE__ */ m("div", {
+					className: "bg-muted/50 rounded-lg p-4",
+					children: [/* @__PURE__ */ m("p", {
+						className: "text-sm text-muted-foreground",
+						children: [
+							h("billing.checkout.timeElapsed", "Time elapsed:"),
+							" ",
+							/* @__PURE__ */ p("span", {
+								className: "font-mono font-medium text-foreground",
+								children: ((e) => {
+									let t = Math.floor(e / 1e3);
+									return `${Math.floor(t / 60)}:${(t % 60).toString().padStart(2, "0")}`;
+								})(B)
+							})
+						]
+					}), /* @__PURE__ */ p("p", {
+						className: "text-xs text-muted-foreground mt-1",
+						children: h("billing.checkout.keepPageOpen", "This may take a few moments. Please don't close this page.")
+					})]
+				}),
+				/* @__PURE__ */ p("div", {
+					className: "w-full bg-muted rounded-full h-2 overflow-hidden",
+					children: /* @__PURE__ */ p("div", {
+						className: "bg-primary h-2 rounded-full transition-all duration-1000",
+						style: { width: `${Math.min(B / 3e5 * 100, 100)}%` }
+					})
+				}),
+				B > 3e4 && /* @__PURE__ */ p("button", {
+					onClick: () => {
+						A("error"), N("Payment verification was cancelled. Please check your billing history.");
+					},
+					className: "text-sm text-muted-foreground hover:text-foreground underline",
+					children: h("billing.checkout.cancelAndCheckHistory", "Cancel and check billing history")
+				})
+			]
+		})
+	});
+	if (k === "payment" && j) {
+		let e = (e, t) => `${{
+			INR: "₹",
+			USD: "$",
+			EUR: "€",
+			GBP: "£"
+		}[t] || t + " "}${e.toFixed(2)}`, t = j.currency || R.selectedCurrency, r = j.total ?? R.total;
+		return /* @__PURE__ */ m("div", {
+			className: "max-w-2xl mx-auto p-4 sm:p-6 space-y-6",
+			children: [
+				/* @__PURE__ */ m("button", {
+					onClick: () => A("select"),
+					className: "flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground",
+					children: [/* @__PURE__ */ p(De, { className: "h-4 w-4" }), h("billing.checkout.backToCheckout", "Back to checkout")]
+				}),
+				/* @__PURE__ */ p(n, {
+					title: h("billing.checkout.completePayment", "Complete Payment"),
+					description: h("billing.checkout.completePaymentDescription", "Enter your payment details to complete the purchase")
+				}),
+				/* @__PURE__ */ m("div", {
+					className: "rounded-lg border border-border bg-card p-4 space-y-4",
+					children: [
+						/* @__PURE__ */ m("h3", {
+							className: "font-semibold text-foreground flex items-center gap-2",
+							children: [/* @__PURE__ */ p(Pe, { className: "h-4 w-4" }), h("billing.checkout.paymentSummary", "Payment Summary")]
+						}),
+						R.billingAccount && /* @__PURE__ */ m("div", {
+							className: "p-3 bg-muted/30 rounded-lg space-y-1",
+							children: [
+								/* @__PURE__ */ p("div", {
+									className: "text-xs text-muted-foreground uppercase tracking-wide",
+									children: h("billing.checkout.billingAccount", "Billing Account")
+								}),
+								/* @__PURE__ */ p("div", {
+									className: "font-medium text-foreground",
+									children: R.billingAccount.name
+								}),
+								/* @__PURE__ */ p("div", {
+									className: "text-sm text-muted-foreground",
+									children: R.billingAccount.email
+								})
+							]
+						}),
+						D === "ADDON" && R.selectedSubscriptionId && G && /* @__PURE__ */ m("div", {
+							className: "p-3 bg-muted/30 rounded-lg space-y-1",
+							children: [
+								/* @__PURE__ */ p("div", {
+									className: "text-xs text-muted-foreground uppercase tracking-wide",
+									children: h("billing.checkout.addingToSubscription", "Adding to Subscription")
+								}),
+								/* @__PURE__ */ p("div", {
+									className: "font-medium text-foreground",
+									children: G.plan?.name || h("billing.checkout.subscription", "Subscription")
+								}),
+								G.plan?.product?.name && /* @__PURE__ */ p("div", {
+									className: "text-sm text-muted-foreground",
+									children: G.plan.product.name
+								})
+							]
+						}),
+						/* @__PURE__ */ m("div", {
+							className: "space-y-2 text-sm",
+							children: [
+								(() => {
+									let n = R.taxRate, i = n > 0 ? r / (1 + n) : r, a = n > 0 ? r - i : 0;
+									return /* @__PURE__ */ m(f, { children: [
+										/* @__PURE__ */ m("div", {
+											className: "flex justify-between",
+											children: [/* @__PURE__ */ p("span", {
+												className: "text-muted-foreground",
+												children: h("billing.checkout.subtotal", "Subtotal")
+											}), /* @__PURE__ */ p("span", {
+												className: "text-foreground",
+												children: e(i, t)
+											})]
+										}),
+										R.discountAmount > 0 && /* @__PURE__ */ m("div", {
+											className: "flex justify-between text-status-success-text",
+											children: [/* @__PURE__ */ p("span", { children: h("billing.checkout.discount", "Discount") }), /* @__PURE__ */ m("span", { children: ["-", e(R.discountAmount, t)] })]
+										}),
+										a > 0 && /* @__PURE__ */ m("div", {
+											className: "flex justify-between",
+											children: [/* @__PURE__ */ m("span", {
+												className: "text-muted-foreground",
+												children: [
+													R.taxType || h("billing.checkout.tax", "Tax"),
+													" (",
+													(n * 100).toFixed(0),
+													"%)"
+												]
+											}), /* @__PURE__ */ p("span", {
+												className: "text-foreground",
+												children: e(a, t)
+											})]
+										})
+									] });
+								})(),
+								/* @__PURE__ */ p("div", { className: "border-t border-border my-2" }),
+								/* @__PURE__ */ m("div", {
+									className: "flex justify-between font-semibold",
+									children: [/* @__PURE__ */ p("span", {
+										className: "text-foreground",
+										children: h("billing.checkout.total", "Total")
+									}), /* @__PURE__ */ p("span", {
+										className: "text-lg text-foreground",
+										children: e(r, t)
+									})]
+								})
+							]
+						})
+					]
+				}),
+				R.selectedProvider === "STRIPE" && j.clientSecret && /* @__PURE__ */ p("div", {
+					className: "rounded-lg border border-border bg-card overflow-hidden",
+					children: /* @__PURE__ */ p("div", {
+						className: "p-4 space-y-4",
+						children: /* @__PURE__ */ p(ye, {
+							clientSecret: j.clientSecret,
+							publishableKey: qe || it?.stripePublishableKey || "",
+							amount: Math.round((j.total ?? R.total) * 100),
+							currency: j.currency || R.selectedCurrency,
+							onSuccess: St,
+							onError: Ct,
+							onCancel: () => A("select"),
+							isCompletingExistingPayment: !!R.selectedPaymentMethodId
+						})
+					})
+				}),
+				R.selectedProvider === "RAZORPAY" && j.orderId && /* @__PURE__ */ p("div", {
+					className: "rounded-lg border border-border bg-card overflow-hidden",
+					children: /* @__PURE__ */ m("div", {
+						className: "p-4 space-y-4",
+						children: [/* @__PURE__ */ m("label", {
+							className: "flex items-center gap-2 cursor-pointer",
+							children: [/* @__PURE__ */ p("input", {
+								type: "checkbox",
+								checked: R.saveCard,
+								onChange: (e) => R.setSaveCard(e.target.checked),
+								className: "h-4 w-4 rounded border-border text-primary focus:ring-primary"
+							}), /* @__PURE__ */ p("span", {
+								className: "text-sm text-muted-foreground",
+								children: "Save card for future purchases"
+							})]
+						}), /* @__PURE__ */ p(be, {
+							orderId: j.orderId,
+							keyId: j.razorpayKeyId || Je || "",
+							amount: Math.round((j.total ?? R.total) * 100),
+							currency: j.currency || "INR",
+							customerId: j.razorpayCustomerId,
+							prefill: {
+								name: j.prefillName,
+								email: j.prefillEmail,
+								contact: j.prefillContact
+							},
+							onSuccess: (e) => St(e.razorpay_payment_id),
+							onError: Ct,
+							onCancel: () => A("select")
+						})]
+					})
+				})
+			]
+		});
+	}
+	return /* @__PURE__ */ m("div", {
+		className: "max-w-6xl mx-auto p-4 sm:p-6",
+		children: [
+			/* @__PURE__ */ m("button", {
+				onClick: () => v(-1),
+				className: "flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground mb-4",
+				children: [/* @__PURE__ */ p(De, { className: "h-4 w-4" }), "Back"]
+			}),
+			/* @__PURE__ */ m("div", {
+				className: "flex items-center gap-3 mb-6",
+				children: [/* @__PURE__ */ p("div", {
+					className: "p-2 rounded-lg bg-primary/10 text-primary",
+					children: Et()
+				}), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("h1", {
+					className: "text-2xl font-bold text-foreground",
+					children: Tt()
+				}), /* @__PURE__ */ p("p", {
+					className: "text-sm text-muted-foreground",
+					children: "Complete your purchase securely"
+				})] })]
+			}),
+			b?.upgradeFromSubscriptionId && b?.currentPlanName && /* @__PURE__ */ p("div", {
+				className: "mb-6 p-4 rounded-lg border border-border-subtle bg-status-info-bg-subtle",
+				children: /* @__PURE__ */ m("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ p("div", {
+						className: "p-2 rounded-full bg-status-info-bg-subtle",
+						children: /* @__PURE__ */ p(Fe, { className: "h-4 w-4 text-accent-blue" })
+					}), /* @__PURE__ */ m("div", {
+						className: "flex-1",
+						children: [/* @__PURE__ */ m("p", {
+							className: "text-sm font-medium text-status-info-text",
+							children: [
+								"Upgrading from:",
+								" ",
+								/* @__PURE__ */ p("span", {
+									className: "font-semibold",
+									children: b.currentPlanName
+								})
+							]
+						}), /* @__PURE__ */ p("p", {
+							className: "text-xs text-status-info-text mt-0.5",
+							children: "Your current subscription will be marked as upgraded and quotas will transfer to the new plan."
+						})]
+					})]
+				})
+			}),
+			b?.downgradeFromSubscriptionId && b?.currentPlanName && /* @__PURE__ */ p("div", {
+				className: "mb-6 p-4 rounded-lg border border-status-warning-border bg-status-warning-bg-subtle",
+				children: /* @__PURE__ */ m("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ p("div", {
+						className: "p-2 rounded-full bg-status-warning-bg-subtle",
+						children: /* @__PURE__ */ p(Fe, { className: "h-4 w-4 text-status-warning-text" })
+					}), /* @__PURE__ */ m("div", {
+						className: "flex-1",
+						children: [/* @__PURE__ */ m("p", {
+							className: "text-sm font-medium text-status-warning-text",
+							children: [
+								"Downgrading from:",
+								" ",
+								/* @__PURE__ */ p("span", {
+									className: "font-semibold",
+									children: b.currentPlanName
+								})
+							]
+						}), /* @__PURE__ */ p("p", {
+							className: "text-xs text-status-warning-text mt-0.5",
+							children: "Your current plan stays active until it expires — you keep all its features until then. After expiry, only the new plan applies."
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ m("div", {
+				className: "grid gap-6 lg:grid-cols-5",
+				children: [/* @__PURE__ */ m("div", {
+					className: "lg:col-span-3 space-y-6",
+					children: [
+						D === "CREDITS" && R.items[0] && /* @__PURE__ */ p("div", {
+							className: "rounded-lg border border-border bg-card p-4 sm:p-6",
+							children: /* @__PURE__ */ p(ve, {
+								value: R.items[0].quantity,
+								onChange: wt,
+								costPerCredit: J,
+								currency: R.selectedCurrency,
+								disabled: ht
+							})
+						}),
+						/* @__PURE__ */ m("div", {
+							className: "rounded-lg border border-border bg-card p-4 sm:p-6 space-y-4",
+							children: [/* @__PURE__ */ p(he, {
+								accounts: X,
+								selectedAccountId: R.billingAccount?.id ?? null,
+								onSelect: R.setBillingAccount,
+								isLoading: ct,
+								disabled: vt,
+								disabledMessage: vt ? "Billing account is locked for plan changes" : void 0
+							}), D === "ADDON" && !E && R.billingAccount && /* @__PURE__ */ p(xe, {
+								subscriptions: W,
+								selectedSubscriptionId: R.selectedSubscriptionId,
+								onSelect: R.setSelectedSubscriptionId,
+								isLoading: mt
+							})]
+						}),
+						/* @__PURE__ */ m("div", {
+							className: "rounded-lg border border-border bg-card p-4 sm:p-6 space-y-4",
+							children: [
+								/* @__PURE__ */ p(Ce, {
+									savedPaymentMethods: Y,
+									selectedPaymentMethodId: R.selectedPaymentMethodId,
+									onSelectSavedCard: R.setSelectedPaymentMethodId,
+									selectedProvider: R.selectedProvider,
+									onSelectProvider: R.setPaymentProvider,
+									stripeEnabled: at,
+									razorpayEnabled: z,
+									canPayWithCredits: R.canPayWithCredits && R.hasEnoughCredits,
+									availableCredits: R.availableCredits,
+									totalAmount: R.subtotalUSD,
+									billingCountry: Z,
+									saveCard: R.saveCard,
+									onSaveCardChange: R.setSaveCard,
+									autoRenewEnabled: D === "PLAN" && R.autoRenew,
+									isLoading: ft
+								}),
+								R.selectedProvider !== "CREDITS" && R.selectedProvider !== "AUTO" && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("div", { className: "border-t border-border" }), /* @__PURE__ */ p("div", {
+									className: "bg-muted/50 p-4 rounded-md",
+									children: /* @__PURE__ */ m("div", {
+										className: "flex items-start gap-3",
+										children: [/* @__PURE__ */ p("svg", {
+											className: "w-5 h-5 text-muted-foreground mt-0.5",
+											fill: "none",
+											stroke: "currentColor",
+											viewBox: "0 0 24 24",
+											children: /* @__PURE__ */ p("path", {
+												strokeLinecap: "round",
+												strokeLinejoin: "round",
+												strokeWidth: 2,
+												d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+											})
+										}), /* @__PURE__ */ m("div", {
+											className: "flex-1 text-sm",
+											children: [/* @__PURE__ */ m("p", {
+												className: "font-medium text-foreground mb-1",
+												children: ["Currency: ", R.selectedCurrency]
+											}), /* @__PURE__ */ m("p", {
+												className: "text-muted-foreground text-xs",
+												children: [
+													"All prices are shown in",
+													" ",
+													/* @__PURE__ */ p("strong", {
+														className: "text-foreground",
+														children: R.selectedCurrency
+													}),
+													" ",
+													"based on your billing account settings.",
+													R.selectedCurrency === "INR" && " GST will be applied at checkout."
+												]
+											})]
+										})]
+									})
+								})] }),
+								D === "PLAN" && V?.getPlan?.pricingModel === "PER_SEAT" && /* @__PURE__ */ p("div", {
+									className: "border-t border-border pt-4",
+									children: /* @__PURE__ */ m("div", {
+										className: "space-y-3",
+										children: [/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
+											className: "text-sm font-medium text-foreground",
+											children: "Number of seats"
+										}), V.getPlan.minSeats && /* @__PURE__ */ m("p", {
+											className: "text-xs text-muted-foreground mt-0.5",
+											children: [
+												"Minimum ",
+												V.getPlan.minSeats,
+												" seat",
+												V.getPlan.minSeats === 1 ? "" : "s",
+												" required"
+											]
+										})] }), /* @__PURE__ */ m("div", {
+											className: "flex items-center gap-3",
+											children: [
+												/* @__PURE__ */ p("button", {
+													type: "button",
+													onClick: () => L((e) => Math.max(V.getPlan?.minSeats ?? 1, e - 1)),
+													disabled: I <= (V.getPlan.minSeats ?? 1),
+													className: "w-9 h-9 rounded-md border border-border flex items-center justify-center hover:bg-accent disabled:opacity-40 disabled:cursor-not-allowed transition-colors text-foreground",
+													children: "−"
+												}),
+												/* @__PURE__ */ p("input", {
+													type: "number",
+													value: I,
+													min: V.getPlan.minSeats ?? 1,
+													max: V.getPlan.maxSeats ?? 999,
+													onChange: (e) => {
+														let t = parseInt(e.target.value, 10);
+														isNaN(t) || L(Math.max(V.getPlan?.minSeats ?? 1, t));
+													},
+													className: "w-20 h-9 text-center border border-border rounded-md bg-background text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+												}),
+												/* @__PURE__ */ p("button", {
+													type: "button",
+													onClick: () => L((e) => Math.min(V.getPlan?.maxSeats ?? 999, e + 1)),
+													disabled: I >= (V.getPlan.maxSeats ?? 999),
+													className: "w-9 h-9 rounded-md border border-border flex items-center justify-center hover:bg-accent disabled:opacity-40 disabled:cursor-not-allowed transition-colors text-foreground",
+													children: "+"
+												}),
+												V.getPlan.pricePerSeat && /* @__PURE__ */ m("span", {
+													className: "text-sm text-muted-foreground",
+													children: [
+														"×",
+														" ",
+														V.getPlan.pricePerSeat.toLocaleString("en", {
+															style: "currency",
+															currency: V.getPlan.currency ?? "USD"
+														}),
+														" ",
+														"=",
+														" ",
+														(V.getPlan.pricePerSeat * I).toLocaleString("en", {
+															style: "currency",
+															currency: V.getPlan.currency ?? "USD"
+														}),
+														"/mo"
+													]
+												})
+											]
+										})]
+									})
+								})
+							]
+						})
+					]
+				}), /* @__PURE__ */ p("div", {
+					className: "lg:col-span-2",
+					children: /* @__PURE__ */ m("div", {
+						className: "lg:sticky lg:top-6 space-y-4",
+						children: [
+							/* @__PURE__ */ m("div", {
+								className: "rounded-lg border border-border bg-card",
+								children: [
+									/* @__PURE__ */ p("div", {
+										className: "p-4",
+										children: /* @__PURE__ */ p(ge, {
+											items: R.items,
+											subtotal: R.subtotal,
+											discountAmount: R.discountAmount,
+											taxAmount: R.taxAmount,
+											taxRate: R.taxRate,
+											taxType: R.taxType,
+											total: R.total,
+											currency: R.selectedCurrency,
+											isCalculatingTax: R.isCalculatingTax,
+											showInCredits: R.selectedProvider === "CREDITS",
+											onUpdateQuantity: D === "PLAN" ? void 0 : R.updateItemQuantity,
+											onRemoveItem: R.removeItem,
+											isEditable: D !== "PLAN"
+										})
+									}),
+									/* @__PURE__ */ p("div", {
+										className: "px-4 pb-4 border-t border-border pt-4",
+										children: /* @__PURE__ */ p(_e, {
+											value: R.promoCode,
+											onChange: R.setPromoCode,
+											onValidate: async () => await R.validatePromoCode(),
+											onClear: R.clearPromoCode,
+											isApplied: R.promoDiscount > 0,
+											discountValue: R.promoDiscount,
+											discountType: R.promoDiscountType,
+											isValidating: R.isProcessing
+										})
+									}),
+									D === "PLAN" && R.selectedProvider !== "CREDITS" && R.selectedProvider !== "AUTO" && (() => {
+										let e = "", t = !1, n = !1;
+										if (R.selectedPaymentMethodId) {
+											let r = Y.find((e) => e.id === R.selectedPaymentMethodId);
+											r && (e = `${r.type === "CREDIT_CARD" || r.type === "DEBIT_CARD" ? "Card" : r.type}${r.last4 ? ` •••• ${r.last4}` : ""}`, t = !0, n = !1);
+										} else (R.selectedProvider === "RAZORPAY" || R.selectedProvider === "STRIPE") && (e = R.selectedProvider === "RAZORPAY" ? "new card (Razorpay)" : "new card (Stripe)", t = !0, n = !0);
+										return /* @__PURE__ */ p("div", {
+											className: "px-4 pb-4",
+											children: /* @__PURE__ */ p(Se, {
+												enabled: R.autoRenew,
+												onToggle: (e) => {
+													R.setAutoRenew(e), e && R.selectedPaymentMethodId && R.setAutoRenewPaymentMethodId(R.selectedPaymentMethodId);
+												},
+												hasPaymentMethodSelected: t,
+												selectedPaymentMethodDisplay: e,
+												isNewCard: n
+											})
+										});
+									})()
+								]
+							}),
+							/* @__PURE__ */ p("button", {
+								onClick: xt,
+								disabled: R.isProcessing || !R.billingAccount || R.items.length === 0 || D === "ADDON" && !E && mt || D === "ADDON" && !E && W.length === 0 || D === "ADDON" && !E && !R.selectedSubscriptionId,
+								className: "w-full px-6 py-4 rounded-lg bg-primary text-primary-foreground font-semibold\n                hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed\n                transition-colors flex items-center justify-center gap-2",
+								children: R.isProcessing ? /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(d, { className: "h-5 w-5 animate-spin" }), "Processing..."] }) : R.selectedProvider === "CREDITS" ? "Pay with Credits" : "Proceed to Payment"
+							}),
+							/* @__PURE__ */ p("p", {
+								className: "text-center text-xs text-muted-foreground",
+								children: "🔒 Secure checkout with 256-bit SSL encryption"
+							})
+						]
+					})
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { We as CheckoutPage };
+
+//# sourceMappingURL=CheckoutPage.js.map