@burdenoff/microfe-billing 2026.625.4 → 2026.626.1

package/dist/billing/modules/plans/pages/PlanEditPage.js

@@ -9,24 +9,25 @@ import { getPlanFeatureQuantity as o } from "../../../shared/utils/planFeatureQu
 import "../../../shared/utils/index.js";
 import { useBillingPermissions as s } from "../../../hooks/useBillingPermissions.js";
 import { useBillingNavigate as c } from "../../../hooks/useBillingNavigate.js";
-import { usePlan as l, usePlanMutations as u } from "../hooks/usePlans.js";
-import { useQuotas as d } from "../hooks/useQuotas.js";
+import { usePlan as l, usePlanMutations as ee } from "../hooks/usePlans.js";
+import { useQuotas as u } from "../hooks/useQuotas.js";
 import "../hooks/index.js";
-import { useEffect as f, useState as p } from "react";
-import { useParams as m } from "react-router-dom";
-import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { useI18n as v } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { useEffect as d, useState as f } from "react";
+import { useParams as p } from "react-router-dom";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { useI18n as _ } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { PagePurpose as v } from "@burdenoff/fe-libs/ui";
 //#region src/billing/modules/plans/pages/PlanEditPage.tsx
 var y = () => {
-	let { t: y } = v(), b = (e, t) => {
+	let { t: y } = _(), b = (e, t) => {
 		let n = y(e);
 		return n === e ? t : n;
-	}, { planId: x } = m(), S = c(), C = s(), { plan: w, isLoading: T, error: E, refetch: D } = l(x), { quotas: O, isLoading: k } = d({ onlyActive: !0 }), { updatePlan: ee, isUpdating: A } = u(), [j, M] = p(""), [N, P] = p(""), [F, I] = p("USD"), [L, R] = p(i.MONTHLY), [z, B] = p(!0), [V, H] = p(!0), [U, W] = p([]), [G, K] = p([]), [q, J] = p(null), [Y, X] = p(!1);
-	if (f(() => {
+	}, { planId: x } = p(), S = c(), C = s(), { plan: w, isLoading: T, error: E, refetch: D } = l(x), { quotas: O, isLoading: k } = u({ onlyActive: !0 }), { updatePlan: A, isUpdating: j } = ee(), [M, N] = f(""), [P, F] = f(""), [I, L] = f("USD"), [R, z] = f(i.MONTHLY), [B, V] = f(!0), [H, U] = f(!0), [W, G] = f([]), [K, q] = f([]), [J, Y] = f(null), [X, Z] = f(!1);
+	if (d(() => {
 		if (w) {
-			if (M(w.name ?? ""), P(String(w.price ?? "")), I(w.currency ?? "USD"), R(w.duration ?? i.MONTHLY), B(w.isActive ?? !0), H(w.isPurchasable ?? !0), w.currencyPrices && typeof w.currencyPrices == "object") {
+			if (N(w.name ?? ""), F(String(w.price ?? "")), L(w.currency ?? "USD"), z(w.duration ?? i.MONTHLY), V(w.isActive ?? !0), U(w.isPurchasable ?? !0), w.currencyPrices && typeof w.currencyPrices == "object") {
 				let e = w.currencyPrices;
-				K(Object.entries(e).filter(([, e]) => typeof e == "number").map(([e, t]) => ({
+				q(Object.entries(e).filter(([, e]) => typeof e == "number").map(([e, t]) => ({
 					currency: e,
 					amount: t
 				})));
@@ -41,13 +42,13 @@ var y = () => {
 					quotaId: n,
 					quantity: r
 				});
-				W(e);
+				G(e);
 			}
 		}
-	}, [w]), !C.canManagePlans) return /* @__PURE__ */ g(e, { message: b("billing.plans.noEditPermission", "You don't have permission to edit plans.") });
-	if (T || k) return /* @__PURE__ */ _("div", {
+	}, [w]), !C.canManagePlans) return /* @__PURE__ */ h(e, { message: b("billing.plans.noEditPermission", "You don't have permission to edit plans.") });
+	if (T || k) return /* @__PURE__ */ g("div", {
 		className: "space-y-6 p-6",
-		children: [/* @__PURE__ */ g("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ g("div", {
+		children: [/* @__PURE__ */ h("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ h("div", {
 			className: "max-w-2xl space-y-4",
 			children: [
 				1,
@@ -55,26 +56,26 @@ var y = () => {
 				3,
 				4,
 				5
-			].map((e) => /* @__PURE__ */ g("div", { className: "h-16 bg-bg-sunken animate-pulse rounded" }, e))
+			].map((e) => /* @__PURE__ */ h("div", { className: "h-16 bg-bg-sunken animate-pulse rounded" }, e))
 		})]
 	});
-	if (E && a(E)) return /* @__PURE__ */ g("div", {
+	if (E && a(E)) return /* @__PURE__ */ h("div", {
 		className: "p-6",
-		children: /* @__PURE__ */ g(n, {
+		children: /* @__PURE__ */ h(n, {
 			title: b("billing.plans.serverUnavailable", "Server Unavailable"),
 			message: b("billing.plans.serverUnavailableLoadPlan", "Unable to load plan. The server might be down or experiencing issues."),
 			onRetry: () => D(),
 			showRetry: !0
 		})
 	});
-	if (!w) return /* @__PURE__ */ g("div", {
+	if (!w) return /* @__PURE__ */ h("div", {
 		className: "flex items-center justify-center h-full min-h-[400px]",
-		children: /* @__PURE__ */ _("div", {
+		children: /* @__PURE__ */ g("div", {
 			className: "text-center space-y-4",
-			children: [/* @__PURE__ */ g("h2", {
+			children: [/* @__PURE__ */ h("h2", {
 				className: "text-lg font-semibold text-text-primary",
 				children: b("billing.plans.planNotFound", "Plan not found")
-			}), /* @__PURE__ */ g("button", {
+			}), /* @__PURE__ */ h("button", {
 				type: "button",
 				onClick: () => S("/plans"),
 				className: "px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover",
@@ -82,340 +83,344 @@ var y = () => {
 			})]
 		})
 	});
-	let Z = () => {
-		W([{
+	let Q = () => {
+		G([{
 			quotaId: "",
 			quantity: 1
-		}, ...U]);
-	}, Q = (e) => {
-		W(U.filter((t, n) => n !== e));
+		}, ...W]);
+	}, te = (e) => {
+		G(W.filter((t, n) => n !== e));
 	}, $ = (e, t, n) => {
-		let r = [...U];
-		t === "quotaId" ? r[e].quotaId = n : r[e].quantity = Number(n), W(r);
+		let r = [...W];
+		t === "quotaId" ? r[e].quotaId = n : r[e].quantity = Number(n), G(r);
 	};
-	return /* @__PURE__ */ _("div", {
+	return /* @__PURE__ */ g("div", {
 		className: "space-y-6 p-6",
-		children: [/* @__PURE__ */ g(t, {
-			title: `Edit Plan: ${w.name}`,
-			description: b("billing.plans.editPlanDesc", "Update the plan details and quota allocations")
-		}), /* @__PURE__ */ _("form", {
-			onSubmit: async (e) => {
-				if (e.preventDefault(), J(null), X(!1), !j.trim()) {
-					J("Plan name is required");
-					return;
-				}
-				if (!N || isNaN(Number(N)) || Number(N) < 0) {
-					J("Valid price is required");
-					return;
-				}
-				if (U.length === 0) {
-					J("At least one quota is required");
-					return;
-				}
-				if (U.filter((e) => e.quotaId === "").length > 0) {
-					J("Please select a quota for all allocations");
-					return;
-				}
-				let t = {
-					id: x,
-					name: j.trim(),
-					price: Number(N),
-					currency: F,
-					duration: L,
-					isActive: z,
-					isPurchasable: V,
-					quotas: U.map((e) => ({
-						quotaId: e.quotaId,
-						quantity: e.quantity
-					})),
-					...G.length > 0 ? { currencyPriceOverrides: G } : {}
-				};
-				try {
-					await ee(t), X(!0), setTimeout(() => S(`/plans/${x}`), 1500);
-				} catch (e) {
-					J(e instanceof Error ? e.message : "Failed to update plan");
-				}
-			},
-			className: "space-y-6",
-			children: [
-				q && /* @__PURE__ */ g("div", {
-					className: "p-4 bg-status-error-bg-subtle border border-border-subtle rounded-lg",
-					children: /* @__PURE__ */ g("p", {
-						className: "text-sm text-status-error-text",
-						children: q
-					})
-				}),
-				Y && /* @__PURE__ */ g("div", {
-					className: "p-4 bg-status-success-bg-subtle border border-border-subtle rounded-lg",
-					children: /* @__PURE__ */ g("p", {
-						className: "text-sm text-status-success-text",
-						children: b("billing.plans.updateSuccess", "Plan updated successfully! Redirecting...")
-					})
-				}),
-				/* @__PURE__ */ _("div", {
-					className: "grid grid-cols-1 lg:grid-cols-2 gap-6",
-					children: [/* @__PURE__ */ _("div", {
-						className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit",
+		children: [
+			/* @__PURE__ */ h(t, {
+				title: `Edit Plan: ${w.name}`,
+				description: b("billing.plans.editPlanDesc", "Update the plan details and quota allocations")
+			}),
+			/* @__PURE__ */ h(v, { children: b("billing.plans.editPurpose", "Update this plan's price, currency/seat pricing and the quotas it grants. Changes apply to new subscriptions; existing subscribers keep the terms they signed up with until they renew or change plans.") }),
+			/* @__PURE__ */ g("form", {
+				onSubmit: async (e) => {
+					if (e.preventDefault(), Y(null), Z(!1), !M.trim()) {
+						Y("Plan name is required");
+						return;
+					}
+					if (!P || isNaN(Number(P)) || Number(P) < 0) {
+						Y("Valid price is required");
+						return;
+					}
+					if (W.length === 0) {
+						Y("At least one quota is required");
+						return;
+					}
+					if (W.filter((e) => e.quotaId === "").length > 0) {
+						Y("Please select a quota for all allocations");
+						return;
+					}
+					let t = {
+						id: x,
+						name: M.trim(),
+						price: Number(P),
+						currency: I,
+						duration: R,
+						isActive: B,
+						isPurchasable: H,
+						quotas: W.map((e) => ({
+							quotaId: e.quotaId,
+							quantity: e.quantity
+						})),
+						...K.length > 0 ? { currencyPriceOverrides: K } : {}
+					};
+					try {
+						await A(t), Z(!0), setTimeout(() => S(`/plans/${x}`), 1500);
+					} catch (e) {
+						Y(e instanceof Error ? e.message : "Failed to update plan");
+					}
+				},
+				className: "space-y-6",
+				children: [
+					J && /* @__PURE__ */ h("div", {
+						className: "p-4 bg-status-error-bg-subtle border border-border-subtle rounded-lg",
+						children: /* @__PURE__ */ h("p", {
+							className: "text-sm text-status-error-text",
+							children: J
+						})
+					}),
+					X && /* @__PURE__ */ h("div", {
+						className: "p-4 bg-status-success-bg-subtle border border-border-subtle rounded-lg",
+						children: /* @__PURE__ */ h("p", {
+							className: "text-sm text-status-success-text",
+							children: b("billing.plans.updateSuccess", "Plan updated successfully! Redirecting...")
+						})
+					}),
+					/* @__PURE__ */ g("div", {
+						className: "grid grid-cols-1 lg:grid-cols-2 gap-6",
 						children: [/* @__PURE__ */ g("div", {
-							className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
-							children: /* @__PURE__ */ g("h2", {
-								className: "font-semibold text-text-primary",
-								children: b("billing.plans.basicInfo", "Basic Information")
-							})
-						}), /* @__PURE__ */ _("div", {
-							className: "p-4 space-y-4",
-							children: [
-								/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("label", {
-									htmlFor: "name",
-									className: "block text-sm font-medium text-text-primary mb-1",
-									children: [b("billing.plans.planNameLabel", "Plan Name"), " *"]
-								}), /* @__PURE__ */ g("input", {
-									id: "name",
-									type: "text",
-									value: j,
-									onChange: (e) => M(e.target.value),
-									className: "w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
-									placeholder: b("billing.plans.planNamePlaceholder", "e.g., Pro Plan"),
-									required: !0
-								})] }),
-								/* @__PURE__ */ _("div", {
-									className: "grid grid-cols-2 gap-4",
-									children: [/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("label", {
-										htmlFor: "price",
+							className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit",
+							children: [/* @__PURE__ */ h("div", {
+								className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
+								children: /* @__PURE__ */ h("h2", {
+									className: "font-semibold text-text-primary",
+									children: b("billing.plans.basicInfo", "Basic Information")
+								})
+							}), /* @__PURE__ */ g("div", {
+								className: "p-4 space-y-4",
+								children: [
+									/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ g("label", {
+										htmlFor: "name",
 										className: "block text-sm font-medium text-text-primary mb-1",
-										children: [b("billing.plans.priceLabel", "Price"), " *"]
-									}), /* @__PURE__ */ g("input", {
-										id: "price",
-										type: "number",
-										step: "0.01",
-										min: "0",
-										value: N,
-										onChange: (e) => P(e.target.value),
+										children: [b("billing.plans.planNameLabel", "Plan Name"), " *"]
+									}), /* @__PURE__ */ h("input", {
+										id: "name",
+										type: "text",
+										value: M,
+										onChange: (e) => N(e.target.value),
 										className: "w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
-										placeholder: "49.99",
+										placeholder: b("billing.plans.planNamePlaceholder", "e.g., Pro Plan"),
 										required: !0
-									})] }), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("label", {
-										htmlFor: "currency",
+									})] }),
+									/* @__PURE__ */ g("div", {
+										className: "grid grid-cols-2 gap-4",
+										children: [/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ g("label", {
+											htmlFor: "price",
+											className: "block text-sm font-medium text-text-primary mb-1",
+											children: [b("billing.plans.priceLabel", "Price"), " *"]
+										}), /* @__PURE__ */ h("input", {
+											id: "price",
+											type: "number",
+											step: "0.01",
+											min: "0",
+											value: P,
+											onChange: (e) => F(e.target.value),
+											className: "w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
+											placeholder: "49.99",
+											required: !0
+										})] }), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ g("label", {
+											htmlFor: "currency",
+											className: "block text-sm font-medium text-text-primary mb-1",
+											children: [b("billing.plans.currencyLabel", "Currency"), " *"]
+										}), /* @__PURE__ */ g("select", {
+											id: "currency",
+											value: I,
+											onChange: (e) => L(e.target.value),
+											className: "w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
+											children: [
+												/* @__PURE__ */ h("option", {
+													value: "USD",
+													children: "USD ($)"
+												}),
+												/* @__PURE__ */ h("option", {
+													value: "EUR",
+													children: "EUR"
+												}),
+												/* @__PURE__ */ h("option", {
+													value: "GBP",
+													children: "GBP"
+												}),
+												/* @__PURE__ */ h("option", {
+													value: "INR",
+													children: "INR"
+												}),
+												/* @__PURE__ */ h("option", {
+													value: "AUD",
+													children: "AUD"
+												}),
+												/* @__PURE__ */ h("option", {
+													value: "CAD",
+													children: "CAD"
+												}),
+												/* @__PURE__ */ h("option", {
+													value: "JPY",
+													children: "JPY"
+												}),
+												/* @__PURE__ */ h("option", {
+													value: "SGD",
+													children: "SGD"
+												})
+											]
+										})] })]
+									}),
+									/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ g("label", {
+										htmlFor: "duration",
 										className: "block text-sm font-medium text-text-primary mb-1",
-										children: [b("billing.plans.currencyLabel", "Currency"), " *"]
-									}), /* @__PURE__ */ _("select", {
-										id: "currency",
-										value: F,
-										onChange: (e) => I(e.target.value),
+										children: [b("billing.plans.billingPeriodLabel", "Billing Period"), " *"]
+									}), /* @__PURE__ */ g("select", {
+										id: "duration",
+										value: R,
+										onChange: (e) => z(e.target.value),
 										className: "w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
-										children: [
-											/* @__PURE__ */ g("option", {
-												value: "USD",
-												children: "USD ($)"
-											}),
-											/* @__PURE__ */ g("option", {
-												value: "EUR",
-												children: "EUR"
-											}),
-											/* @__PURE__ */ g("option", {
-												value: "GBP",
-												children: "GBP"
-											}),
-											/* @__PURE__ */ g("option", {
-												value: "INR",
-												children: "INR"
-											}),
-											/* @__PURE__ */ g("option", {
-												value: "AUD",
-												children: "AUD"
-											}),
-											/* @__PURE__ */ g("option", {
-												value: "CAD",
-												children: "CAD"
-											}),
-											/* @__PURE__ */ g("option", {
-												value: "JPY",
-												children: "JPY"
-											}),
-											/* @__PURE__ */ g("option", {
-												value: "SGD",
-												children: "SGD"
-											})
-										]
-									})] })]
-								}),
-								/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("label", {
-									htmlFor: "duration",
-									className: "block text-sm font-medium text-text-primary mb-1",
-									children: [b("billing.plans.billingPeriodLabel", "Billing Period"), " *"]
-								}), /* @__PURE__ */ _("select", {
-									id: "duration",
-									value: L,
-									onChange: (e) => R(e.target.value),
-									className: "w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
-									children: [/* @__PURE__ */ g("option", {
-										value: i.MONTHLY,
-										children: "Monthly"
-									}), /* @__PURE__ */ g("option", {
-										value: i.YEARLY,
-										children: "Yearly"
-									})]
-								})] }),
-								/* @__PURE__ */ _("div", {
-									className: "flex items-center gap-3",
-									children: [/* @__PURE__ */ g("input", {
-										id: "isActive",
-										type: "checkbox",
-										checked: z,
-										onChange: (e) => B(e.target.checked),
-										className: "size-4 rounded border-border-subtle text-text-link focus:ring-[var(--color-focus-ring)]"
-									}), /* @__PURE__ */ g("label", {
-										htmlFor: "isActive",
-										className: "text-sm font-medium text-text-primary",
-										children: b("billing.plans.planIsActive", "Plan is active")
-									})]
-								}),
-								/* @__PURE__ */ _("div", {
-									className: "flex items-start justify-between gap-4 pt-1",
-									children: [/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
-										className: "text-sm font-medium text-text-primary",
-										children: b("billing.plans.isPurchasableLabel", "Publicly purchasable")
-									}), /* @__PURE__ */ g("p", {
-										className: "text-xs text-text-muted mt-0.5",
-										children: V ? b("billing.plans.isPurchasableOn", "Visible on pricing page — users can subscribe directly.") : b("billing.plans.isPurchasableOff", "Internal / custom plan — hidden from pricing page, assign via API only.")
-									})] }), /* @__PURE__ */ g("button", {
-										type: "button",
-										role: "switch",
-										"aria-checked": V,
-										onClick: () => H((e) => !e),
-										className: `relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:ring-offset-2 ${V ? "bg-action-primary-bg" : "bg-text-muted/30"}`,
-										children: /* @__PURE__ */ g("span", { className: `inline-block h-5 w-5 transform rounded-full bg-bg-surface shadow transition-transform ${V ? "translate-x-5" : "translate-x-0"}` })
-									})]
-								})
-							]
-						})]
-					}), /* @__PURE__ */ _("div", {
-						className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit",
-						children: [/* @__PURE__ */ _("div", {
-							className: "p-4 border-b border-border-subtle bg-bg-sunken/30 flex items-center justify-between",
-							children: [/* @__PURE__ */ g("h2", {
-								className: "font-semibold text-text-primary",
-								children: b("billing.plans.quotaAllocations", "Quota Allocations")
-							}), /* @__PURE__ */ g("button", {
-								type: "button",
-								onClick: Z,
-								className: "px-3 py-1 text-sm font-medium text-text-link hover:bg-[var(--color-accent-soft)] rounded-md transition-colors",
-								children: "+ Add Quota"
-							})]
-						}), /* @__PURE__ */ g("div", {
-							className: "p-4 space-y-3",
-							children: U.length === 0 ? /* @__PURE__ */ g("p", {
-								className: "text-sm text-text-muted",
-								children: b("billing.plans.noQuotasAllocated", "No quotas allocated. Click \"Add Quota\" to add one.")
-							}) : U.map((e, t) => {
-								let n = O.find((t) => t.id === e.quotaId), r = n?.limits, i = r?.value ?? 0, a = r?.type ?? "unknown", o = i * e.quantity;
-								return /* @__PURE__ */ _("div", {
-									className: "p-3 border border-border-subtle rounded-lg bg-bg-sunken/20 space-y-3",
-									children: [/* @__PURE__ */ _("div", {
+										children: [/* @__PURE__ */ h("option", {
+											value: i.MONTHLY,
+											children: "Monthly"
+										}), /* @__PURE__ */ h("option", {
+											value: i.YEARLY,
+											children: "Yearly"
+										})]
+									})] }),
+									/* @__PURE__ */ g("div", {
 										className: "flex items-center gap-3",
-										children: [/* @__PURE__ */ _("select", {
-											value: e.quotaId,
-											onChange: (e) => $(t, "quotaId", e.target.value),
-											className: `flex-1 px-3 py-2 border border-border-subtle rounded-input bg-bg-surface focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] ${e.quotaId === "" ? "text-text-muted" : "text-text-primary"}`,
-											children: [/* @__PURE__ */ g("option", {
-												value: "",
-												disabled: !0,
-												children: b("billing.plans.selectQuota", "Select a quota...")
-											}), O.map((e) => /* @__PURE__ */ g("option", {
-												value: e.id,
-												children: e.name
-											}, e.id))]
-										}), /* @__PURE__ */ g("button", {
+										children: [/* @__PURE__ */ h("input", {
+											id: "isActive",
+											type: "checkbox",
+											checked: B,
+											onChange: (e) => V(e.target.checked),
+											className: "size-4 rounded border-border-subtle text-text-link focus:ring-[var(--color-focus-ring)]"
+										}), /* @__PURE__ */ h("label", {
+											htmlFor: "isActive",
+											className: "text-sm font-medium text-text-primary",
+											children: b("billing.plans.planIsActive", "Plan is active")
+										})]
+									}),
+									/* @__PURE__ */ g("div", {
+										className: "flex items-start justify-between gap-4 pt-1",
+										children: [/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("p", {
+											className: "text-sm font-medium text-text-primary",
+											children: b("billing.plans.isPurchasableLabel", "Publicly purchasable")
+										}), /* @__PURE__ */ h("p", {
+											className: "text-xs text-text-muted mt-0.5",
+											children: H ? b("billing.plans.isPurchasableOn", "Visible on pricing page — users can subscribe directly.") : b("billing.plans.isPurchasableOff", "Internal / custom plan — hidden from pricing page, assign via API only.")
+										})] }), /* @__PURE__ */ h("button", {
 											type: "button",
-											onClick: () => Q(t),
-											className: "p-2 text-status-error-text hover:bg-status-error-bg-subtle rounded-md transition-colors",
-											title: "Remove quota",
-											children: /* @__PURE__ */ g("svg", {
-												className: "size-5",
-												fill: "none",
-												viewBox: "0 0 24 24",
-												stroke: "currentColor",
-												children: /* @__PURE__ */ g("path", {
-													strokeLinecap: "round",
-													strokeLinejoin: "round",
-													strokeWidth: 2,
-													d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-												})
-											})
+											role: "switch",
+											"aria-checked": H,
+											onClick: () => U((e) => !e),
+											className: `relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:ring-offset-2 ${H ? "bg-action-primary-bg" : "bg-text-muted/30"}`,
+											children: /* @__PURE__ */ h("span", { className: `inline-block h-5 w-5 transform rounded-full bg-bg-surface shadow transition-transform ${H ? "translate-x-5" : "translate-x-0"}` })
 										})]
-									}), n && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g("div", {
-										className: "flex items-center justify-between text-sm",
-										children: /* @__PURE__ */ _("div", {
-											className: "text-text-muted",
-											children: [
-												/* @__PURE__ */ _("span", {
-													className: "capitalize",
-													children: ["Type: ", a]
-												}),
-												/* @__PURE__ */ g("span", {
-													className: "mx-2",
-													children: "•"
-												}),
-												/* @__PURE__ */ _("span", { children: [
-													"Value per unit:",
-													" ",
-													/* @__PURE__ */ g("span", {
-														className: "font-medium text-text-primary",
-														children: i.toLocaleString()
+									})
+								]
+							})]
+						}), /* @__PURE__ */ g("div", {
+							className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit",
+							children: [/* @__PURE__ */ g("div", {
+								className: "p-4 border-b border-border-subtle bg-bg-sunken/30 flex items-center justify-between",
+								children: [/* @__PURE__ */ h("h2", {
+									className: "font-semibold text-text-primary",
+									children: b("billing.plans.quotaAllocations", "Quota Allocations")
+								}), /* @__PURE__ */ h("button", {
+									type: "button",
+									onClick: Q,
+									className: "px-3 py-1 text-sm font-medium text-text-link hover:bg-[var(--color-accent-soft)] rounded-md transition-colors",
+									children: "+ Add Quota"
+								})]
+							}), /* @__PURE__ */ h("div", {
+								className: "p-4 space-y-3",
+								children: W.length === 0 ? /* @__PURE__ */ h("p", {
+									className: "text-sm text-text-muted",
+									children: b("billing.plans.noQuotasAllocated", "No quotas allocated. Click \"Add Quota\" to add one.")
+								}) : W.map((e, t) => {
+									let n = O.find((t) => t.id === e.quotaId), r = n?.limits, i = r?.value ?? 0, a = r?.type ?? "unknown", o = i * e.quantity;
+									return /* @__PURE__ */ g("div", {
+										className: "p-3 border border-border-subtle rounded-lg bg-bg-sunken/20 space-y-3",
+										children: [/* @__PURE__ */ g("div", {
+											className: "flex items-center gap-3",
+											children: [/* @__PURE__ */ g("select", {
+												value: e.quotaId,
+												onChange: (e) => $(t, "quotaId", e.target.value),
+												className: `flex-1 px-3 py-2 border border-border-subtle rounded-input bg-bg-surface focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] ${e.quotaId === "" ? "text-text-muted" : "text-text-primary"}`,
+												children: [/* @__PURE__ */ h("option", {
+													value: "",
+													disabled: !0,
+													children: b("billing.plans.selectQuota", "Select a quota...")
+												}), O.map((e) => /* @__PURE__ */ h("option", {
+													value: e.id,
+													children: e.name
+												}, e.id))]
+											}), /* @__PURE__ */ h("button", {
+												type: "button",
+												onClick: () => te(t),
+												className: "p-2 text-status-error-text hover:bg-status-error-bg-subtle rounded-md transition-colors",
+												title: "Remove quota",
+												children: /* @__PURE__ */ h("svg", {
+													className: "size-5",
+													fill: "none",
+													viewBox: "0 0 24 24",
+													stroke: "currentColor",
+													children: /* @__PURE__ */ h("path", {
+														strokeLinecap: "round",
+														strokeLinejoin: "round",
+														strokeWidth: 2,
+														d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
 													})
-												] })
-											]
-										})
-									}), /* @__PURE__ */ _("div", {
-										className: "flex items-center gap-4",
-										children: [/* @__PURE__ */ _("div", {
-											className: "flex items-center gap-2",
-											children: [/* @__PURE__ */ _("label", {
-												className: "text-sm text-text-muted",
-												children: [b("billing.plans.quantity", "Quantity"), ":"]
-											}), /* @__PURE__ */ g("input", {
-												type: "number",
-												min: "1",
-												value: e.quantity,
-												onChange: (e) => $(t, "quantity", e.target.value),
-												className: "w-24 px-3 py-1.5 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] text-center"
+												})
 											})]
-										}), /* @__PURE__ */ _("div", {
-											className: "flex items-center gap-2 text-sm",
-											children: [/* @__PURE__ */ g("span", {
+										}), n && /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("div", {
+											className: "flex items-center justify-between text-sm",
+											children: /* @__PURE__ */ g("div", {
 												className: "text-text-muted",
-												children: "="
-											}), /* @__PURE__ */ _("span", {
-												className: "font-semibold text-status-success-text",
-												children: [o.toLocaleString(), " total"]
+												children: [
+													/* @__PURE__ */ g("span", {
+														className: "capitalize",
+														children: ["Type: ", a]
+													}),
+													/* @__PURE__ */ h("span", {
+														className: "mx-2",
+														children: "•"
+													}),
+													/* @__PURE__ */ g("span", { children: [
+														"Value per unit:",
+														" ",
+														/* @__PURE__ */ h("span", {
+															className: "font-medium text-text-primary",
+															children: i.toLocaleString()
+														})
+													] })
+												]
+											})
+										}), /* @__PURE__ */ g("div", {
+											className: "flex items-center gap-4",
+											children: [/* @__PURE__ */ g("div", {
+												className: "flex items-center gap-2",
+												children: [/* @__PURE__ */ g("label", {
+													className: "text-sm text-text-muted",
+													children: [b("billing.plans.quantity", "Quantity"), ":"]
+												}), /* @__PURE__ */ h("input", {
+													type: "number",
+													min: "1",
+													value: e.quantity,
+													onChange: (e) => $(t, "quantity", e.target.value),
+													className: "w-24 px-3 py-1.5 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] text-center"
+												})]
+											}), /* @__PURE__ */ g("div", {
+												className: "flex items-center gap-2 text-sm",
+												children: [/* @__PURE__ */ h("span", {
+													className: "text-text-muted",
+													children: "="
+												}), /* @__PURE__ */ g("span", {
+													className: "font-semibold text-status-success-text",
+													children: [o.toLocaleString(), " total"]
+												})]
 											})]
-										})]
-									})] })]
-								}, t);
-							})
+										})] })]
+									}, t);
+								})
+							})]
 						})]
-					})]
-				}),
-				/* @__PURE__ */ g(r, {
-					overrides: G,
-					onChange: K
-				}),
-				/* @__PURE__ */ _("div", {
-					className: "flex items-center gap-3 pt-4",
-					children: [/* @__PURE__ */ g("button", {
-						type: "submit",
-						disabled: A,
-						className: "px-6 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors disabled:opacity-50",
-						children: A ? b("billing.plans.saving", "Saving...") : b("billing.plans.saveChanges", "Save Changes")
-					}), /* @__PURE__ */ g("button", {
-						type: "button",
-						onClick: () => S(`/plans/${x}`),
-						className: "px-6 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors",
-						children: "Cancel"
-					})]
-				})
-			]
-		})]
+					}),
+					/* @__PURE__ */ h(r, {
+						overrides: K,
+						onChange: q
+					}),
+					/* @__PURE__ */ g("div", {
+						className: "flex items-center gap-3 pt-4",
+						children: [/* @__PURE__ */ h("button", {
+							type: "submit",
+							disabled: j,
+							className: "px-6 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors disabled:opacity-50",
+							children: j ? b("billing.plans.saving", "Saving...") : b("billing.plans.saveChanges", "Save Changes")
+						}), /* @__PURE__ */ h("button", {
+							type: "button",
+							onClick: () => S(`/plans/${x}`),
+							className: "px-6 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors",
+							children: "Cancel"
+						})]
+					})
+				]
+			})
+		]
 	});
 };
 //#endregion