@burdenoff/microfe-billing 2026.625.3 → 2026.625.5

package/dist/billing/modules/addons/pages/AddonEditPage.js

@@ -17,24 +17,25 @@ 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 { PagePurpose as y } from "@burdenoff/fe-libs/ui";
 //#region src/billing/modules/addons/pages/AddonEditPage.tsx
-var y = () => {
-	let { t: y } = v(), b = (e, t) => {
-		let n = y(e);
+var b = () => {
+	let { t: b } = v(), x = (e, t) => {
+		let n = b(e);
 		return n === e ? t : n;
-	}, { addonId: x } = m(), S = c(), C = s(), { addon: w, isLoading: T, error: E, refetch: D } = l(x), { quotas: O, isLoading: k } = d({ onlyActive: !0 }), { updateAddon: A, isUpdating: j } = u(), [M, N] = p(""), [P, F] = p(""), [I, L] = p("USD"), [R, z] = p(i.MONTHLY), [B, V] = p(!0), [H, U] = p([]), [W, G] = p([]), [K, q] = p(null), [J, Y] = p(!1);
+	}, { addonId: S } = m(), C = c(), w = s(), { addon: T, isLoading: E, error: D, refetch: O } = l(S), { quotas: k, isLoading: A } = d({ onlyActive: !0 }), { updateAddon: j, isUpdating: M } = u(), [N, P] = p(""), [F, I] = p(""), [L, R] = p("USD"), [z, B] = p(i.MONTHLY), [V, H] = p(!0), [U, W] = p([]), [G, K] = p([]), [q, J] = p(null), [Y, X] = p(!1);
 	if (f(() => {
-		if (w) {
-			if (N(w.name ?? ""), F(String(w.price ?? "")), L(w.currency ?? "USD"), z(w.duration ?? i.MONTHLY), V(w.isActive ?? !0), w.currencyPrices && typeof w.currencyPrices == "object") {
-				let e = w.currencyPrices;
-				G(Object.entries(e).filter(([, e]) => typeof e == "number").map(([e, t]) => ({
+		if (T) {
+			if (P(T.name ?? ""), I(String(T.price ?? "")), R(T.currency ?? "USD"), B(T.duration ?? i.MONTHLY), H(T.isActive ?? !0), T.currencyPrices && typeof T.currencyPrices == "object") {
+				let e = T.currencyPrices;
+				K(Object.entries(e).filter(([, e]) => typeof e == "number").map(([e, t]) => ({
 					currency: e,
 					amount: t
 				})));
 			}
-			if (w.features && w.features.length > 0) {
+			if (T.features && T.features.length > 0) {
 				let e = [], t = /* @__PURE__ */ new Map();
-				for (let e of w.features) if (e.quota?.id) {
+				for (let e of T.features) if (e.quota?.id) {
 					let n = e.quota.id, r = o(e);
 					t.set(n, (t.get(n) ?? 0) + r);
 				}
@@ -42,11 +43,11 @@ var y = () => {
 					quotaId: n,
 					quantity: r
 				});
-				U(e);
+				W(e);
 			}
 		}
-	}, [w]), !C.canManageAddons) return /* @__PURE__ */ g(e, { message: b("billing.addons.noEditPermission", "You don't have permission to edit addons.") });
-	if (T || k) return /* @__PURE__ */ _("div", {
+	}, [T]), !w.canManageAddons) return /* @__PURE__ */ g(e, { message: x("billing.addons.noEditPermission", "You don't have permission to edit addons.") });
+	if (E || A) return /* @__PURE__ */ _("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", {
 			className: "max-w-2xl space-y-4",
@@ -59,320 +60,324 @@ var y = () => {
 			].map((e) => /* @__PURE__ */ g("div", { className: "h-16 bg-bg-sunken animate-pulse rounded" }, e))
 		})]
 	});
-	if (E && a(E)) return /* @__PURE__ */ g("div", {
+	if (D && a(D)) return /* @__PURE__ */ g("div", {
 		className: "p-6",
 		children: /* @__PURE__ */ g(n, {
-			title: b("billing.addons.serverUnavailable", "Server Unavailable"),
-			message: b("billing.addons.serverUnavailableLoadAddon", "Unable to load addon. The server might be down or experiencing issues."),
-			onRetry: () => D(),
+			title: x("billing.addons.serverUnavailable", "Server Unavailable"),
+			message: x("billing.addons.serverUnavailableLoadAddon", "Unable to load addon. The server might be down or experiencing issues."),
+			onRetry: () => O(),
 			showRetry: !0
 		})
 	});
-	if (!w) return /* @__PURE__ */ g("div", {
+	if (!T) return /* @__PURE__ */ g("div", {
 		className: "flex items-center justify-center h-full min-h-[400px]",
 		children: /* @__PURE__ */ _("div", {
 			className: "text-center space-y-4",
 			children: [/* @__PURE__ */ g("h2", {
 				className: "text-lg font-semibold text-text-primary",
-				children: b("billing.addons.addonNotFound", "Addon not found")
+				children: x("billing.addons.addonNotFound", "Addon not found")
 			}), /* @__PURE__ */ g("button", {
 				type: "button",
-				onClick: () => S("/addons"),
+				onClick: () => C("/addons"),
 				className: "px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover",
 				children: "Back to Addons"
 			})]
 		})
 	});
-	let X = () => {
-		U([{
+	let Z = () => {
+		W([{
 			quotaId: "",
 			quantity: 1
-		}, ...H]);
-	}, Z = (e) => {
-		U(H.filter((t, n) => n !== e));
-	}, Q = (e, t, n) => {
-		let r = [...H];
-		t === "quotaId" ? r[e].quotaId = n : r[e].quantity = Number(n), U(r);
+		}, ...U]);
+	}, Q = (e) => {
+		W(U.filter((t, n) => n !== e));
+	}, $ = (e, t, n) => {
+		let r = [...U];
+		t === "quotaId" ? r[e].quotaId = n : r[e].quantity = Number(n), W(r);
 	};
 	return /* @__PURE__ */ _("div", {
 		className: "space-y-6 p-6",
-		children: [/* @__PURE__ */ g(t, {
-			title: `Edit Addon: ${w.name}`,
-			description: b("billing.addons.editAddonDesc", "Update the addon details and quota allocations")
-		}), /* @__PURE__ */ _("form", {
-			onSubmit: async (e) => {
-				if (e.preventDefault(), q(null), Y(!1), !M.trim()) {
-					q("Addon name is required");
-					return;
-				}
-				if (!P || isNaN(Number(P)) || Number(P) < 0) {
-					q("Valid price is required");
-					return;
-				}
-				if (H.length === 0) {
-					q("At least one quota is required");
-					return;
-				}
-				if (H.filter((e) => e.quotaId === "").length > 0) {
-					q("Please select a quota for all allocations");
-					return;
-				}
-				let t = {
-					id: x,
-					name: M.trim(),
-					price: Number(P),
-					currency: I,
-					duration: R,
-					isActive: B,
-					quotas: H.map((e) => ({
-						quotaId: e.quotaId,
-						quantity: e.quantity
-					})),
-					...W.length > 0 ? { currencyPriceOverrides: W } : {}
-				};
-				try {
-					await A(t), Y(!0), setTimeout(() => S(`/addons/${x}`), 1500);
-				} catch (e) {
-					q(e instanceof Error ? e.message : "Failed to update addon");
-				}
-			},
-			className: "space-y-6",
-			children: [
-				K && /* @__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: K
-					})
-				}),
-				J && /* @__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.addons.updateSuccess", "Addon 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__ */ 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.addons.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.addons.addonNameLabel", "Addon Name"), " *"]
-								}), /* @__PURE__ */ g("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: b("billing.addons.addonNamePlaceholder", "e.g., Extra Storage"),
-									required: !0
-								})] }),
-								/* @__PURE__ */ _("div", {
-									className: "grid grid-cols-2 gap-4",
-									children: [/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("label", {
-										htmlFor: "price",
+		children: [
+			/* @__PURE__ */ g(t, {
+				title: `Edit Addon: ${T.name}`,
+				description: x("billing.addons.editAddonDesc", "Update the addon details and quota allocations")
+			}),
+			/* @__PURE__ */ g(y, { children: x("billing.addons.editPurpose", "Update this add-on's price, currency overrides and the quotas it grants. Changes affect new purchases; existing add-on subscriptions keep what they already bought.") }),
+			/* @__PURE__ */ _("form", {
+				onSubmit: async (e) => {
+					if (e.preventDefault(), J(null), X(!1), !N.trim()) {
+						J("Addon name is required");
+						return;
+					}
+					if (!F || isNaN(Number(F)) || Number(F) < 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: S,
+						name: N.trim(),
+						price: Number(F),
+						currency: L,
+						duration: z,
+						isActive: V,
+						quotas: U.map((e) => ({
+							quotaId: e.quotaId,
+							quantity: e.quantity
+						})),
+						...G.length > 0 ? { currencyPriceOverrides: G } : {}
+					};
+					try {
+						await j(t), X(!0), setTimeout(() => C(`/addons/${S}`), 1500);
+					} catch (e) {
+						J(e instanceof Error ? e.message : "Failed to update addon");
+					}
+				},
+				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: x("billing.addons.updateSuccess", "Addon 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__ */ 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: x("billing.addons.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.addons.priceLabel", "Price"), " *"]
+										children: [x("billing.addons.addonNameLabel", "Addon Name"), " *"]
 									}), /* @__PURE__ */ g("input", {
-										id: "price",
-										type: "number",
-										step: "0.01",
-										min: "0",
-										value: P,
-										onChange: (e) => F(e.target.value),
+										id: "name",
+										type: "text",
+										value: N,
+										onChange: (e) => P(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: "9.99",
+										placeholder: x("billing.addons.addonNamePlaceholder", "e.g., Extra Storage"),
 										required: !0
-									})] }), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("label", {
-										htmlFor: "currency",
+									})] }),
+									/* @__PURE__ */ _("div", {
+										className: "grid grid-cols-2 gap-4",
+										children: [/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("label", {
+											htmlFor: "price",
+											className: "block text-sm font-medium text-text-primary mb-1",
+											children: [x("billing.addons.priceLabel", "Price"), " *"]
+										}), /* @__PURE__ */ g("input", {
+											id: "price",
+											type: "number",
+											step: "0.01",
+											min: "0",
+											value: F,
+											onChange: (e) => I(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: "9.99",
+											required: !0
+										})] }), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("label", {
+											htmlFor: "currency",
+											className: "block text-sm font-medium text-text-primary mb-1",
+											children: [x("billing.addons.currencyLabel", "Currency"), " *"]
+										}), /* @__PURE__ */ _("select", {
+											id: "currency",
+											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: "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.addons.currencyLabel", "Currency"), " *"]
+										children: [x("billing.addons.billingPeriodLabel", "Billing Period"), " *"]
 									}), /* @__PURE__ */ _("select", {
-										id: "currency",
-										value: I,
-										onChange: (e) => L(e.target.value),
+										id: "duration",
+										value: z,
+										onChange: (e) => B(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.addons.billingPeriodLabel", "Billing Period"), " *"]
-								}), /* @__PURE__ */ _("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: 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: B,
-										onChange: (e) => V(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.addons.addonIsActive", "Addon is active")
-									})]
-								})
-							]
-						})]
-					}), /* @__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.addons.quotaAllocations", "Quota Allocations")
-							}), /* @__PURE__ */ g("button", {
-								type: "button",
-								onClick: X,
-								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: H.length === 0 ? /* @__PURE__ */ g("p", {
-								className: "text-sm text-text-muted",
-								children: b("billing.addons.noQuotasAllocated", "No quotas allocated. Click \"Add Quota\" to add one.")
-							}) : H.map((e, t) => {
-								let n = O.find((t) => t.id === e.quotaId), r = n?.limits?.type ?? "unknown";
-								return /* @__PURE__ */ _("div", {
-									className: "p-3 border border-border-subtle rounded-lg bg-bg-sunken/20 space-y-3",
-									children: [/* @__PURE__ */ _("div", {
+										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__ */ _("select", {
-											value: e.quotaId,
-											onChange: (e) => Q(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.addons.selectQuota", "Select a quota...")
-											}), O.map((e) => /* @__PURE__ */ g("option", {
-												value: e.id,
-												children: e.name
-											}, e.id))]
-										}), /* @__PURE__ */ g("button", {
-											type: "button",
-											onClick: () => Z(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"
+										children: [/* @__PURE__ */ g("input", {
+											id: "isActive",
+											type: "checkbox",
+											checked: V,
+											onChange: (e) => H(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: x("billing.addons.addonIsActive", "Addon is active")
+										})]
+									})
+								]
+							})]
+						}), /* @__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: x("billing.addons.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: x("billing.addons.noQuotasAllocated", "No quotas allocated. Click \"Add Quota\" to add one.")
+								}) : U.map((e, t) => {
+									let n = k.find((t) => t.id === e.quotaId), r = n?.limits?.type ?? "unknown";
+									return /* @__PURE__ */ _("div", {
+										className: "p-3 border border-border-subtle rounded-lg bg-bg-sunken/20 space-y-3",
+										children: [/* @__PURE__ */ _("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: x("billing.addons.selectQuota", "Select a quota...")
+												}), k.map((e) => /* @__PURE__ */ g("option", {
+													value: e.id,
+													children: e.name
+												}, e.id))]
+											}), /* @__PURE__ */ g("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"
+													})
 												})
+											})]
+										}), n && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g("div", {
+											className: "flex items-center justify-between text-sm",
+											children: /* @__PURE__ */ _("span", {
+												className: "capitalize text-text-muted",
+												children: ["Type: ", r]
 											})
-										})]
-									}), n && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g("div", {
-										className: "flex items-center justify-between text-sm",
-										children: /* @__PURE__ */ _("span", {
-											className: "capitalize text-text-muted",
-											children: ["Type: ", r]
-										})
-									}), /* @__PURE__ */ _("div", {
-										className: "flex items-center gap-2",
-										children: [/* @__PURE__ */ _("label", {
-											className: "text-sm text-text-muted",
-											children: [b("billing.addons.limit", "Limit"), ":"]
-										}), /* @__PURE__ */ g("input", {
-											type: "number",
-											min: "1",
-											value: e.quantity,
-											onChange: (e) => Q(t, "quantity", e.target.value),
-											className: "w-36 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"
-										})]
-									})] })]
-								}, t);
-							})
+										}), /* @__PURE__ */ _("div", {
+											className: "flex items-center gap-2",
+											children: [/* @__PURE__ */ _("label", {
+												className: "text-sm text-text-muted",
+												children: [x("billing.addons.limit", "Limit"), ":"]
+											}), /* @__PURE__ */ g("input", {
+												type: "number",
+												min: "1",
+												value: e.quantity,
+												onChange: (e) => $(t, "quantity", e.target.value),
+												className: "w-36 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"
+											})]
+										})] })]
+									}, t);
+								})
+							})]
 						})]
-					})]
-				}),
-				/* @__PURE__ */ g(r, {
-					overrides: W,
-					onChange: G
-				}),
-				/* @__PURE__ */ _("div", {
-					className: "flex items-center gap-3 pt-4",
-					children: [/* @__PURE__ */ g("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.addons.saving", "Saving...") : b("billing.addons.saveChanges", "Save Changes")
-					}), /* @__PURE__ */ g("button", {
-						type: "button",
-						onClick: () => S(`/addons/${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__ */ g(r, {
+						overrides: G,
+						onChange: K
+					}),
+					/* @__PURE__ */ _("div", {
+						className: "flex items-center gap-3 pt-4",
+						children: [/* @__PURE__ */ g("button", {
+							type: "submit",
+							disabled: M,
+							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: M ? x("billing.addons.saving", "Saving...") : x("billing.addons.saveChanges", "Save Changes")
+						}), /* @__PURE__ */ g("button", {
+							type: "button",
+							onClick: () => C(`/addons/${S}`),
+							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
-export { y as AddonEditPage };
+export { b as AddonEditPage };
 
 //# sourceMappingURL=AddonEditPage.js.map