@burdenoff/microfe-billing 2026.625.4 → 2026.625.5

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

@@ -12,14 +12,15 @@ import "../../plans/hooks/index.js";
 import { useState as c } from "react";
 import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
 import { useI18n as f } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { PagePurpose as p } from "@burdenoff/fe-libs/ui";
 //#region src/billing/modules/addons/pages/AddonCreatePage.tsx
-var p = () => {
-	let { t: p } = f(), m = (e, t) => {
-		let n = p(e);
+var m = () => {
+	let { t: m } = f(), h = (e, t) => {
+		let n = m(e);
 		return n === e ? t : n;
-	}, h = a(), g = i(), { quotas: _, isLoading: v } = s({ onlyActive: !0 }), { createAddon: y, isCreating: b } = o(), [x, S] = c(""), [C, w] = c(""), [T, E] = c("USD"), [D, O] = c(r.MONTHLY), [k, A] = c(""), [j, M] = c([]), [N, P] = c([]), [F, I] = c(null), [L, R] = c(!1);
-	if (!g.canManageAddons) return /* @__PURE__ */ u(e, { message: m("billing.addons.noCreatePermission", "You don't have permission to create addons.") });
-	if (v) return /* @__PURE__ */ d("div", {
+	}, g = a(), _ = i(), { quotas: v, isLoading: y } = s({ onlyActive: !0 }), { createAddon: b, isCreating: x } = o(), [S, C] = c(""), [w, T] = c(""), [E, D] = c("USD"), [O, k] = c(r.MONTHLY), [A, j] = c(""), [M, N] = c([]), [P, F] = c([]), [I, L] = c(null), [R, z] = c(!1);
+	if (!_.canManageAddons) return /* @__PURE__ */ u(e, { message: h("billing.addons.noCreatePermission", "You don't have permission to create addons.") });
+	if (y) return /* @__PURE__ */ d("div", {
 		className: "space-y-6 p-6",
 		children: [/* @__PURE__ */ u("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ u("div", {
 			className: "max-w-2xl space-y-4",
@@ -32,338 +33,342 @@ var p = () => {
 			].map((e) => /* @__PURE__ */ u("div", { className: "h-16 bg-bg-sunken animate-pulse rounded" }, e))
 		})]
 	});
-	let z = () => {
-		M([{
+	let B = () => {
+		N([{
 			quotaId: "",
 			quantity: 1
-		}, ...j]);
-	}, B = (e) => {
-		M(j.filter((t, n) => n !== e));
-	}, V = (e, t, n) => {
-		let r = [...j];
-		t === "quotaId" ? r[e].quotaId = n : r[e].quantity = Number(n), M(r);
+		}, ...M]);
+	}, V = (e) => {
+		N(M.filter((t, n) => n !== e));
+	}, H = (e, t, n) => {
+		let r = [...M];
+		t === "quotaId" ? r[e].quotaId = n : r[e].quantity = Number(n), N(r);
 	};
 	return /* @__PURE__ */ d("div", {
 		className: "space-y-6 p-6",
-		children: [/* @__PURE__ */ u(t, {
-			title: m("billing.addons.createNewAddon", "Create New Addon"),
-			description: m("billing.addons.createNewAddonDesc", "Set up a new addon with quotas")
-		}), /* @__PURE__ */ d("form", {
-			onSubmit: async (e) => {
-				if (e.preventDefault(), I(null), R(!1), !x.trim()) {
-					I("Addon name is required");
-					return;
-				}
-				if (!C || isNaN(Number(C)) || Number(C) < 0) {
-					I("Valid price is required");
-					return;
-				}
-				if (!k.trim()) {
-					I("Product ID is required");
-					return;
-				}
-				if (j.length === 0) {
-					I("At least one quota is required");
-					return;
-				}
-				if (j.filter((e) => e.quotaId === "").length > 0) {
-					I("Please select a quota for all allocations");
-					return;
-				}
-				let t = {
-					name: x.trim(),
-					price: Number(C),
-					currency: T,
-					duration: D,
-					productId: k.trim(),
-					quotas: j.map((e) => ({
-						quotaId: e.quotaId,
-						quantity: e.quantity
-					})),
-					...N.length > 0 ? { currencyPriceOverrides: N } : {}
-				};
-				try {
-					await y(t), R(!0), setTimeout(() => h("/addons"), 1500);
-				} catch (e) {
-					I(e instanceof Error ? e.message : "Failed to create addon");
-				}
-			},
-			className: "space-y-6",
-			children: [
-				F && /* @__PURE__ */ u("div", {
-					className: "p-4 bg-status-error-bg-subtle border border-border-subtle rounded-lg",
-					children: /* @__PURE__ */ u("p", {
-						className: "text-sm text-status-error-text",
-						children: F
-					})
-				}),
-				L && /* @__PURE__ */ u("div", {
-					className: "p-4 bg-status-success-bg-subtle border border-border-subtle rounded-lg",
-					children: /* @__PURE__ */ u("p", {
-						className: "text-sm text-status-success-text",
-						children: m("billing.addons.createSuccess", "Addon created successfully! Redirecting...")
-					})
-				}),
-				/* @__PURE__ */ d("div", {
-					className: "grid grid-cols-1 lg:grid-cols-2 gap-6",
-					children: [/* @__PURE__ */ d("div", {
-						className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit",
-						children: [/* @__PURE__ */ u("div", {
-							className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
-							children: /* @__PURE__ */ u("h2", {
-								className: "font-semibold text-text-primary",
-								children: m("billing.addons.basicInfo", "Basic Information")
-							})
-						}), /* @__PURE__ */ d("div", {
-							className: "p-4 space-y-4",
-							children: [
-								/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("label", {
-									htmlFor: "name",
-									className: "block text-sm font-medium text-text-primary mb-1",
-									children: [m("billing.addons.addonNameLabel", "Addon Name"), " *"]
-								}), /* @__PURE__ */ u("input", {
-									id: "name",
-									type: "text",
-									value: x,
-									onChange: (e) => S(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: m("billing.addons.addonNamePlaceholder", "e.g., Extra Storage"),
-									required: !0
-								})] }),
-								/* @__PURE__ */ d("div", { children: [
-									/* @__PURE__ */ d("label", {
-										htmlFor: "productId",
+		children: [
+			/* @__PURE__ */ u(t, {
+				title: h("billing.addons.createNewAddon", "Create New Addon"),
+				description: h("billing.addons.createNewAddonDesc", "Set up a new addon with quotas")
+			}),
+			/* @__PURE__ */ u(p, { children: h("billing.addons.createPurpose", "Create an add-on that customers can buy on top of a subscription — extra seats, storage, usage credits and so on. Set its price (with optional per-currency overrides) and the quotas it grants, then make it available to purchase.") }),
+			/* @__PURE__ */ d("form", {
+				onSubmit: async (e) => {
+					if (e.preventDefault(), L(null), z(!1), !S.trim()) {
+						L("Addon name is required");
+						return;
+					}
+					if (!w || isNaN(Number(w)) || Number(w) < 0) {
+						L("Valid price is required");
+						return;
+					}
+					if (!A.trim()) {
+						L("Product ID is required");
+						return;
+					}
+					if (M.length === 0) {
+						L("At least one quota is required");
+						return;
+					}
+					if (M.filter((e) => e.quotaId === "").length > 0) {
+						L("Please select a quota for all allocations");
+						return;
+					}
+					let t = {
+						name: S.trim(),
+						price: Number(w),
+						currency: E,
+						duration: O,
+						productId: A.trim(),
+						quotas: M.map((e) => ({
+							quotaId: e.quotaId,
+							quantity: e.quantity
+						})),
+						...P.length > 0 ? { currencyPriceOverrides: P } : {}
+					};
+					try {
+						await b(t), z(!0), setTimeout(() => g("/addons"), 1500);
+					} catch (e) {
+						L(e instanceof Error ? e.message : "Failed to create addon");
+					}
+				},
+				className: "space-y-6",
+				children: [
+					I && /* @__PURE__ */ u("div", {
+						className: "p-4 bg-status-error-bg-subtle border border-border-subtle rounded-lg",
+						children: /* @__PURE__ */ u("p", {
+							className: "text-sm text-status-error-text",
+							children: I
+						})
+					}),
+					R && /* @__PURE__ */ u("div", {
+						className: "p-4 bg-status-success-bg-subtle border border-border-subtle rounded-lg",
+						children: /* @__PURE__ */ u("p", {
+							className: "text-sm text-status-success-text",
+							children: h("billing.addons.createSuccess", "Addon created successfully! Redirecting...")
+						})
+					}),
+					/* @__PURE__ */ d("div", {
+						className: "grid grid-cols-1 lg:grid-cols-2 gap-6",
+						children: [/* @__PURE__ */ d("div", {
+							className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit",
+							children: [/* @__PURE__ */ u("div", {
+								className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
+								children: /* @__PURE__ */ u("h2", {
+									className: "font-semibold text-text-primary",
+									children: h("billing.addons.basicInfo", "Basic Information")
+								})
+							}), /* @__PURE__ */ d("div", {
+								className: "p-4 space-y-4",
+								children: [
+									/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("label", {
+										htmlFor: "name",
 										className: "block text-sm font-medium text-text-primary mb-1",
-										children: [m("billing.addons.productId", "Product ID"), " *"]
-									}),
-									/* @__PURE__ */ u("input", {
-										id: "productId",
+										children: [h("billing.addons.addonNameLabel", "Addon Name"), " *"]
+									}), /* @__PURE__ */ u("input", {
+										id: "name",
 										type: "text",
-										value: k,
-										onChange: (e) => A(e.target.value),
+										value: S,
+										onChange: (e) => C(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: m("billing.addons.productIdPlaceholder", "e.g., prod_abc123"),
+										placeholder: h("billing.addons.addonNamePlaceholder", "e.g., Extra Storage"),
 										required: !0
+									})] }),
+									/* @__PURE__ */ d("div", { children: [
+										/* @__PURE__ */ d("label", {
+											htmlFor: "productId",
+											className: "block text-sm font-medium text-text-primary mb-1",
+											children: [h("billing.addons.productId", "Product ID"), " *"]
+										}),
+										/* @__PURE__ */ u("input", {
+											id: "productId",
+											type: "text",
+											value: A,
+											onChange: (e) => j(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: h("billing.addons.productIdPlaceholder", "e.g., prod_abc123"),
+											required: !0
+										}),
+										/* @__PURE__ */ u("p", {
+											className: "text-xs text-text-muted mt-1",
+											children: h("billing.addons.productIdDesc", "The product this addon belongs to")
+										})
+									] }),
+									/* @__PURE__ */ d("div", {
+										className: "grid grid-cols-2 gap-4",
+										children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("label", {
+											htmlFor: "price",
+											className: "block text-sm font-medium text-text-primary mb-1",
+											children: [h("billing.addons.priceLabel", "Price"), " *"]
+										}), /* @__PURE__ */ u("input", {
+											id: "price",
+											type: "number",
+											step: "0.01",
+											min: "0",
+											value: w,
+											onChange: (e) => T(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__ */ d("div", { children: [/* @__PURE__ */ d("label", {
+											htmlFor: "currency",
+											className: "block text-sm font-medium text-text-primary mb-1",
+											children: [h("billing.addons.currencyLabel", "Currency"), " *"]
+										}), /* @__PURE__ */ d("select", {
+											id: "currency",
+											value: E,
+											onChange: (e) => D(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__ */ u("option", {
+													value: "USD",
+													children: "USD ($)"
+												}),
+												/* @__PURE__ */ u("option", {
+													value: "EUR",
+													children: "EUR"
+												}),
+												/* @__PURE__ */ u("option", {
+													value: "GBP",
+													children: "GBP"
+												}),
+												/* @__PURE__ */ u("option", {
+													value: "INR",
+													children: "INR"
+												}),
+												/* @__PURE__ */ u("option", {
+													value: "AUD",
+													children: "AUD"
+												}),
+												/* @__PURE__ */ u("option", {
+													value: "CAD",
+													children: "CAD"
+												}),
+												/* @__PURE__ */ u("option", {
+													value: "JPY",
+													children: "JPY"
+												}),
+												/* @__PURE__ */ u("option", {
+													value: "SGD",
+													children: "SGD"
+												})
+											]
+										})] })]
 									}),
-									/* @__PURE__ */ u("p", {
-										className: "text-xs text-text-muted mt-1",
-										children: m("billing.addons.productIdDesc", "The product this addon belongs to")
-									})
-								] }),
-								/* @__PURE__ */ d("div", {
-									className: "grid grid-cols-2 gap-4",
-									children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("label", {
-										htmlFor: "price",
+									/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("label", {
+										htmlFor: "duration",
 										className: "block text-sm font-medium text-text-primary mb-1",
-										children: [m("billing.addons.priceLabel", "Price"), " *"]
-									}), /* @__PURE__ */ u("input", {
-										id: "price",
-										type: "number",
-										step: "0.01",
-										min: "0",
-										value: C,
-										onChange: (e) => w(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__ */ d("div", { children: [/* @__PURE__ */ d("label", {
-										htmlFor: "currency",
-										className: "block text-sm font-medium text-text-primary mb-1",
-										children: [m("billing.addons.currencyLabel", "Currency"), " *"]
+										children: [h("billing.addons.billingPeriodLabel", "Billing Period"), " *"]
 									}), /* @__PURE__ */ d("select", {
-										id: "currency",
-										value: T,
-										onChange: (e) => E(e.target.value),
+										id: "duration",
+										value: O,
+										onChange: (e) => k(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__ */ u("option", {
-												value: "USD",
-												children: "USD ($)"
-											}),
-											/* @__PURE__ */ u("option", {
-												value: "EUR",
-												children: "EUR"
-											}),
-											/* @__PURE__ */ u("option", {
-												value: "GBP",
-												children: "GBP"
-											}),
-											/* @__PURE__ */ u("option", {
-												value: "INR",
-												children: "INR"
-											}),
-											/* @__PURE__ */ u("option", {
-												value: "AUD",
-												children: "AUD"
-											}),
-											/* @__PURE__ */ u("option", {
-												value: "CAD",
-												children: "CAD"
-											}),
-											/* @__PURE__ */ u("option", {
-												value: "JPY",
-												children: "JPY"
-											}),
-											/* @__PURE__ */ u("option", {
-												value: "SGD",
-												children: "SGD"
-											})
-										]
-									})] })]
-								}),
-								/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("label", {
-									htmlFor: "duration",
-									className: "block text-sm font-medium text-text-primary mb-1",
-									children: [m("billing.addons.billingPeriodLabel", "Billing Period"), " *"]
-								}), /* @__PURE__ */ d("select", {
-									id: "duration",
-									value: D,
-									onChange: (e) => O(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__ */ u("option", {
-										value: r.MONTHLY,
-										children: "Monthly"
-									}), /* @__PURE__ */ u("option", {
-										value: r.YEARLY,
-										children: "Yearly"
-									})]
-								})] })
-							]
-						})]
-					}), /* @__PURE__ */ d("div", {
-						className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit",
-						children: [/* @__PURE__ */ d("div", {
-							className: "p-4 border-b border-border-subtle bg-bg-sunken/30 flex items-center justify-between",
-							children: [/* @__PURE__ */ d("h2", {
-								className: "font-semibold text-text-primary",
-								children: [m("billing.addons.quotaAllocations", "Quota Allocations"), " *"]
-							}), /* @__PURE__ */ u("button", {
-								type: "button",
-								onClick: z,
-								disabled: _.length === 0,
-								className: "px-3 py-1 text-sm font-medium text-text-link hover:bg-[var(--color-accent-soft)] rounded-md transition-colors disabled:opacity-50",
-								children: "+ Add Quota"
-							})]
-						}), /* @__PURE__ */ u("div", {
-							className: "p-4 space-y-3",
-							children: _.length === 0 ? /* @__PURE__ */ u("p", {
-								className: "text-sm text-text-muted",
-								children: m("billing.addons.noQuotasAvailable", "No quotas available. Please create quotas first.")
-							}) : j.length === 0 ? /* @__PURE__ */ u("p", {
-								className: "text-sm text-text-muted",
-								children: m("billing.addons.noQuotasAllocated", "No quotas allocated. Click \"Add Quota\" to add one.")
-							}) : j.map((e, t) => {
-								let n = _.find((t) => t.id === e.quotaId), r = n?.limits, i = r?.value ?? 0, a = r?.type ?? "unknown", o = i * e.quantity;
-								return /* @__PURE__ */ d("div", {
-									className: "p-3 border border-border-subtle rounded-lg bg-bg-sunken/20 space-y-3",
-									children: [/* @__PURE__ */ d("div", {
-										className: "flex items-center gap-3",
-										children: [/* @__PURE__ */ d("select", {
-											value: e.quotaId,
-											onChange: (e) => V(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__ */ u("option", {
-												value: "",
-												disabled: !0,
-												children: m("billing.addons.selectQuota", "Select a quota...")
-											}), _.map((e) => /* @__PURE__ */ u("option", {
-												value: e.id,
-												children: e.name
-											}, e.id))]
-										}), /* @__PURE__ */ u("button", {
-											type: "button",
-											onClick: () => B(t),
-											className: "p-2 text-status-error-text hover:bg-status-error-bg-subtle rounded-md transition-colors",
-											title: "Remove quota",
-											children: /* @__PURE__ */ u("svg", {
-												className: "size-5",
-												fill: "none",
-												viewBox: "0 0 24 24",
-												stroke: "currentColor",
-												children: /* @__PURE__ */ u("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__ */ u("option", {
+											value: r.MONTHLY,
+											children: "Monthly"
+										}), /* @__PURE__ */ u("option", {
+											value: r.YEARLY,
+											children: "Yearly"
 										})]
-									}), n && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("div", {
-										className: "flex items-center justify-between text-sm",
-										children: /* @__PURE__ */ d("div", {
-											className: "text-text-muted",
-											children: [
-												/* @__PURE__ */ d("span", {
-													className: "capitalize",
-													children: ["Type: ", a]
-												}),
-												/* @__PURE__ */ u("span", {
-													className: "mx-2",
-													children: "•"
-												}),
-												/* @__PURE__ */ d("span", { children: [
-													"Value per unit:",
-													" ",
-													/* @__PURE__ */ u("span", {
-														className: "font-medium text-text-primary",
-														children: i.toLocaleString()
-													})
-												] })
-											]
-										})
-									}), /* @__PURE__ */ d("div", {
-										className: "flex items-center gap-4",
+									})] })
+								]
+							})]
+						}), /* @__PURE__ */ d("div", {
+							className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit",
+							children: [/* @__PURE__ */ d("div", {
+								className: "p-4 border-b border-border-subtle bg-bg-sunken/30 flex items-center justify-between",
+								children: [/* @__PURE__ */ d("h2", {
+									className: "font-semibold text-text-primary",
+									children: [h("billing.addons.quotaAllocations", "Quota Allocations"), " *"]
+								}), /* @__PURE__ */ u("button", {
+									type: "button",
+									onClick: B,
+									disabled: v.length === 0,
+									className: "px-3 py-1 text-sm font-medium text-text-link hover:bg-[var(--color-accent-soft)] rounded-md transition-colors disabled:opacity-50",
+									children: "+ Add Quota"
+								})]
+							}), /* @__PURE__ */ u("div", {
+								className: "p-4 space-y-3",
+								children: v.length === 0 ? /* @__PURE__ */ u("p", {
+									className: "text-sm text-text-muted",
+									children: h("billing.addons.noQuotasAvailable", "No quotas available. Please create quotas first.")
+								}) : M.length === 0 ? /* @__PURE__ */ u("p", {
+									className: "text-sm text-text-muted",
+									children: h("billing.addons.noQuotasAllocated", "No quotas allocated. Click \"Add Quota\" to add one.")
+								}) : M.map((e, t) => {
+									let n = v.find((t) => t.id === e.quotaId), r = n?.limits, i = r?.value ?? 0, a = r?.type ?? "unknown", o = i * e.quantity;
+									return /* @__PURE__ */ d("div", {
+										className: "p-3 border border-border-subtle rounded-lg bg-bg-sunken/20 space-y-3",
 										children: [/* @__PURE__ */ d("div", {
-											className: "flex items-center gap-2",
-											children: [/* @__PURE__ */ d("label", {
-												className: "text-sm text-text-muted",
-												children: [m("billing.addons.quantity", "Quantity"), ":"]
-											}), /* @__PURE__ */ u("input", {
-												type: "number",
-												min: "1",
-												value: e.quantity,
-												onChange: (e) => V(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"
+											className: "flex items-center gap-3",
+											children: [/* @__PURE__ */ d("select", {
+												value: e.quotaId,
+												onChange: (e) => H(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__ */ u("option", {
+													value: "",
+													disabled: !0,
+													children: h("billing.addons.selectQuota", "Select a quota...")
+												}), v.map((e) => /* @__PURE__ */ u("option", {
+													value: e.id,
+													children: e.name
+												}, e.id))]
+											}), /* @__PURE__ */ u("button", {
+												type: "button",
+												onClick: () => V(t),
+												className: "p-2 text-status-error-text hover:bg-status-error-bg-subtle rounded-md transition-colors",
+												title: "Remove quota",
+												children: /* @__PURE__ */ u("svg", {
+													className: "size-5",
+													fill: "none",
+													viewBox: "0 0 24 24",
+													stroke: "currentColor",
+													children: /* @__PURE__ */ u("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__ */ d("div", {
-											className: "flex items-center gap-2 text-sm",
-											children: [/* @__PURE__ */ u("span", {
+										}), n && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("div", {
+											className: "flex items-center justify-between text-sm",
+											children: /* @__PURE__ */ d("div", {
 												className: "text-text-muted",
-												children: "="
-											}), /* @__PURE__ */ d("span", {
-												className: "font-semibold text-status-success-text",
-												children: [o.toLocaleString(), " total"]
+												children: [
+													/* @__PURE__ */ d("span", {
+														className: "capitalize",
+														children: ["Type: ", a]
+													}),
+													/* @__PURE__ */ u("span", {
+														className: "mx-2",
+														children: "•"
+													}),
+													/* @__PURE__ */ d("span", { children: [
+														"Value per unit:",
+														" ",
+														/* @__PURE__ */ u("span", {
+															className: "font-medium text-text-primary",
+															children: i.toLocaleString()
+														})
+													] })
+												]
+											})
+										}), /* @__PURE__ */ d("div", {
+											className: "flex items-center gap-4",
+											children: [/* @__PURE__ */ d("div", {
+												className: "flex items-center gap-2",
+												children: [/* @__PURE__ */ d("label", {
+													className: "text-sm text-text-muted",
+													children: [h("billing.addons.quantity", "Quantity"), ":"]
+												}), /* @__PURE__ */ u("input", {
+													type: "number",
+													min: "1",
+													value: e.quantity,
+													onChange: (e) => H(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__ */ d("div", {
+												className: "flex items-center gap-2 text-sm",
+												children: [/* @__PURE__ */ u("span", {
+													className: "text-text-muted",
+													children: "="
+												}), /* @__PURE__ */ d("span", {
+													className: "font-semibold text-status-success-text",
+													children: [o.toLocaleString(), " total"]
+												})]
 											})]
-										})]
-									})] })]
-								}, t);
-							})
+										})] })]
+									}, t);
+								})
+							})]
 						})]
-					})]
-				}),
-				/* @__PURE__ */ u(n, {
-					overrides: N,
-					onChange: P
-				}),
-				/* @__PURE__ */ d("div", {
-					className: "flex items-center gap-3 pt-4",
-					children: [/* @__PURE__ */ u("button", {
-						type: "submit",
-						disabled: b || _.length === 0,
-						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: b ? m("billing.addons.creating", "Creating...") : m("billing.addons.createAddonBtn", "Create Addon")
-					}), /* @__PURE__ */ u("button", {
-						type: "button",
-						onClick: () => h("/addons"),
-						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__ */ u(n, {
+						overrides: P,
+						onChange: F
+					}),
+					/* @__PURE__ */ d("div", {
+						className: "flex items-center gap-3 pt-4",
+						children: [/* @__PURE__ */ u("button", {
+							type: "submit",
+							disabled: x || v.length === 0,
+							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: x ? h("billing.addons.creating", "Creating...") : h("billing.addons.createAddonBtn", "Create Addon")
+						}), /* @__PURE__ */ u("button", {
+							type: "button",
+							onClick: () => g("/addons"),
+							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 { p as AddonCreatePage };
+export { m as AddonCreatePage };
 
 //# sourceMappingURL=AddonCreatePage.js.map