@burdenoff/microfe-billing 2026.625.3 → 2026.625.5

package/dist/billing/modules/promotions/pages/CreatePromotionPage.js

@@ -7,287 +7,292 @@ import { useBillingNavigate as i } from "../../../hooks/useBillingNavigate.js";
 import { useState as a } from "react";
 import { ArrowLeft as o, Gift as s, Info as c, Save as l } from "lucide-react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { PagePurpose as f } from "@burdenoff/fe-libs/ui";
 //#region src/billing/modules/promotions/pages/CreatePromotionPage.tsx
-var f = [
+var p = [
 	"vibecontrols",
 	"workspaces",
 	"botlit",
 	"fluidgrids",
 	"healthybowl"
-], p = () => {
-	let p = i(), m = n(), [h] = r({ refetchQueries: ["ListPromotions"] }), [g, _] = a(!1), [v, y] = a({}), b = (/* @__PURE__ */ new Date()).toISOString().split("T")[0], [x, S] = a({
+], m = () => {
+	let m = i(), h = n(), [g] = r({ refetchQueries: ["ListPromotions"] }), [_, v] = a(!1), [y, b] = a({}), x = (/* @__PURE__ */ new Date()).toISOString().split("T")[0], [S, C] = a({
 		name: "",
 		description: "",
-		startsAt: b,
+		startsAt: x,
 		expiresAt: "",
 		bonusMonths: 1,
 		maxRedemptions: "",
 		applicableProductIds: [],
 		applicablePlanIds: ""
 	});
-	if (!m.canManagePlans) return /* @__PURE__ */ u(e, { message: "You don't have permission to create promotions." });
-	let C = (e, t) => S((n) => ({
+	if (!h.canManagePlans) return /* @__PURE__ */ u(e, { message: "You don't have permission to create promotions." });
+	let w = (e, t) => C((n) => ({
 		...n,
 		[e]: t
-	})), w = (e) => {
-		C("applicableProductIds", x.applicableProductIds.includes(e) ? x.applicableProductIds.filter((t) => t !== e) : [...x.applicableProductIds, e]);
-	}, T = () => {
+	})), T = (e) => {
+		w("applicableProductIds", S.applicableProductIds.includes(e) ? S.applicableProductIds.filter((t) => t !== e) : [...S.applicableProductIds, e]);
+	}, E = () => {
 		let e = {};
-		return x.name.trim() || (e.name = "Name is required"), x.startsAt || (e.startsAt = "Start date is required"), x.expiresAt || (e.expiresAt = "End date is required"), x.expiresAt && x.expiresAt <= x.startsAt && (e.expiresAt = "End date must be after start date"), x.bonusMonths < 1 && (e.bonusMonths = "Must be at least 1"), y(e), Object.keys(e).length === 0;
+		return S.name.trim() || (e.name = "Name is required"), S.startsAt || (e.startsAt = "Start date is required"), S.expiresAt || (e.expiresAt = "End date is required"), S.expiresAt && S.expiresAt <= S.startsAt && (e.expiresAt = "End date must be after start date"), S.bonusMonths < 1 && (e.bonusMonths = "Must be at least 1"), b(e), Object.keys(e).length === 0;
 	};
 	return /* @__PURE__ */ d("div", {
 		className: "max-w-2xl mx-auto p-4 sm:p-6 space-y-6",
-		children: [/* @__PURE__ */ d("div", {
-			className: "flex items-center gap-4",
-			children: [/* @__PURE__ */ u("button", {
-				type: "button",
-				onClick: () => p("/promotions"),
-				"aria-label": "Back to promotions",
-				className: "p-2 rounded-button hover:bg-bg-sunken text-text-muted hover:text-text-primary transition-colors",
-				children: /* @__PURE__ */ u(o, { className: "size-5" })
-			}), /* @__PURE__ */ u(t, {
-				title: "Create Promotion",
-				description: "Offer bonus free renewal months to subscribers who sign up within the promotion window",
-				icon: /* @__PURE__ */ u(s, { className: "size-6" })
-			})]
-		}), /* @__PURE__ */ d("form", {
-			onSubmit: async (e) => {
-				if (e.preventDefault(), T()) {
-					_(!0);
-					try {
-						let e = x.applicablePlanIds.split(",").flatMap((e) => {
-							let t = e.trim();
-							return t ? [t] : [];
-						});
-						await h({ variables: { input: {
-							name: x.name.trim(),
-							description: x.description.trim() || void 0,
-							startsAt: new Date(x.startsAt).toISOString(),
-							expiresAt: new Date(x.expiresAt).toISOString(),
-							bonusMonths: x.bonusMonths,
-							maxRedemptions: x.maxRedemptions ? parseInt(x.maxRedemptions) : void 0,
-							applicableProductIds: x.applicableProductIds,
-							applicablePlanIds: e
-						} } }), p("/promotions");
-					} catch (e) {
-						y({ name: e instanceof Error ? e.message : "Failed to create promotion" });
-					} finally {
-						_(!1);
+		children: [
+			/* @__PURE__ */ d("div", {
+				className: "flex items-center gap-4",
+				children: [/* @__PURE__ */ u("button", {
+					type: "button",
+					onClick: () => m("/promotions"),
+					"aria-label": "Back to promotions",
+					className: "p-2 rounded-button hover:bg-bg-sunken text-text-muted hover:text-text-primary transition-colors",
+					children: /* @__PURE__ */ u(o, { className: "size-5" })
+				}), /* @__PURE__ */ u(t, {
+					title: "Create Promotion",
+					description: "Offer bonus free renewal months to subscribers who sign up within the promotion window",
+					icon: /* @__PURE__ */ u(s, { className: "size-6" })
+				})]
+			}),
+			/* @__PURE__ */ u(f, { children: "Set up a time-bounded campaign that rewards new subscribers with bonus free renewal months. Define the bonus, the window during which it applies, an optional redemption cap and which products it covers — then activate it to start offering it." }),
+			/* @__PURE__ */ d("form", {
+				onSubmit: async (e) => {
+					if (e.preventDefault(), E()) {
+						v(!0);
+						try {
+							let e = S.applicablePlanIds.split(",").flatMap((e) => {
+								let t = e.trim();
+								return t ? [t] : [];
+							});
+							await g({ variables: { input: {
+								name: S.name.trim(),
+								description: S.description.trim() || void 0,
+								startsAt: new Date(S.startsAt).toISOString(),
+								expiresAt: new Date(S.expiresAt).toISOString(),
+								bonusMonths: S.bonusMonths,
+								maxRedemptions: S.maxRedemptions ? parseInt(S.maxRedemptions) : void 0,
+								applicableProductIds: S.applicableProductIds,
+								applicablePlanIds: e
+							} } }), m("/promotions");
+						} catch (e) {
+							b({ name: e instanceof Error ? e.message : "Failed to create promotion" });
+						} finally {
+							v(!1);
+						}
 					}
-				}
-			},
-			className: "space-y-5",
-			children: [
-				/* @__PURE__ */ d("div", {
-					className: "bg-bg-surface border border-border-seam rounded-card p-5 space-y-4 shadow-[var(--shadow-elevation-1)]",
-					children: [
-						/* @__PURE__ */ u("h3", {
-							className: "font-semibold text-text-primary",
-							children: "Promotion Details"
-						}),
-						/* @__PURE__ */ d("div", { children: [
-							/* @__PURE__ */ u("label", {
-								className: "block text-sm font-medium text-text-primary mb-1",
-								children: "Name *"
-							}),
-							/* @__PURE__ */ u("input", {
-								type: "text",
-								value: x.name,
-								onChange: (e) => C("name", e.target.value),
-								placeholder: "e.g. June Launch Offer",
-								className: `w-full px-3 py-2 rounded-input border ${v.name ? "border-status-error-border" : "border-border-subtle"} bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]`
-							}),
-							v.name && /* @__PURE__ */ u("p", {
-								className: "text-xs text-status-error-text mt-1",
-								children: v.name
-							})
-						] }),
-						/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("label", {
-							className: "block text-sm font-medium text-text-primary mb-1",
-							children: "Description"
-						}), /* @__PURE__ */ u("textarea", {
-							value: x.description,
-							onChange: (e) => C("description", e.target.value),
-							placeholder: "Subscribe in June and get 2 extra months free!",
-							rows: 2,
-							className: "w-full px-3 py-2 rounded-input border border-border-subtle bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
-						})] })
-					]
-				}),
-				/* @__PURE__ */ d("div", {
-					className: "bg-bg-surface border border-border-seam rounded-card p-5 space-y-4 shadow-[var(--shadow-elevation-1)]",
-					children: [
-						/* @__PURE__ */ u("h3", {
-							className: "font-semibold text-text-primary",
-							children: "Bonus Configuration"
-						}),
-						/* @__PURE__ */ d("div", { children: [
-							/* @__PURE__ */ u("label", {
-								className: "block text-sm font-medium text-text-primary mb-1",
-								children: "Bonus Months *"
-							}),
-							/* @__PURE__ */ u("input", {
-								type: "number",
-								value: x.bonusMonths,
-								min: 1,
-								max: 12,
-								onChange: (e) => C("bonusMonths", parseInt(e.target.value) || 1),
-								className: `w-32 px-3 py-2 rounded-input border ${v.bonusMonths ? "border-status-error-border" : "border-border-subtle"} bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]`
+				},
+				className: "space-y-5",
+				children: [
+					/* @__PURE__ */ d("div", {
+						className: "bg-bg-surface border border-border-seam rounded-card p-5 space-y-4 shadow-[var(--shadow-elevation-1)]",
+						children: [
+							/* @__PURE__ */ u("h3", {
+								className: "font-semibold text-text-primary",
+								children: "Promotion Details"
 							}),
-							v.bonusMonths && /* @__PURE__ */ u("p", {
-								className: "text-xs text-status-error-text mt-1",
-								children: v.bonusMonths
-							}),
-							/* @__PURE__ */ d("div", {
-								className: "mt-2 flex items-start gap-2 p-3 bg-[var(--color-accent-soft)] rounded-lg text-sm text-text-muted",
-								children: [/* @__PURE__ */ u(c, { className: "size-4 shrink-0 mt-0.5 text-text-link" }), /* @__PURE__ */ d("span", { children: [
-									"Users who subscribe during this window get",
-									" ",
-									/* @__PURE__ */ d("strong", {
-										className: "text-text-primary",
-										children: [
-											x.bonusMonths,
-											" free renewal",
-											x.bonusMonths === 1 ? "" : "s"
-										]
-									}),
-									" ",
-									"after their first paid period — their quota resets each month as normal."
-								] })]
-							})
-						] }),
-						/* @__PURE__ */ d("div", { children: [
-							/* @__PURE__ */ u("label", {
+							/* @__PURE__ */ d("div", { children: [
+								/* @__PURE__ */ u("label", {
+									className: "block text-sm font-medium text-text-primary mb-1",
+									children: "Name *"
+								}),
+								/* @__PURE__ */ u("input", {
+									type: "text",
+									value: S.name,
+									onChange: (e) => w("name", e.target.value),
+									placeholder: "e.g. June Launch Offer",
+									className: `w-full px-3 py-2 rounded-input border ${y.name ? "border-status-error-border" : "border-border-subtle"} bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]`
+								}),
+								y.name && /* @__PURE__ */ u("p", {
+									className: "text-xs text-status-error-text mt-1",
+									children: y.name
+								})
+							] }),
+							/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("label", {
 								className: "block text-sm font-medium text-text-primary mb-1",
-								children: "Max Redemptions"
-							}),
-							/* @__PURE__ */ u("input", {
-								type: "number",
-								value: x.maxRedemptions,
-								min: 1,
-								onChange: (e) => C("maxRedemptions", e.target.value),
-								placeholder: "Unlimited",
-								className: "w-48 px-3 py-2 rounded-input border border-border-subtle bg-bg-surface text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
+								children: "Description"
+							}), /* @__PURE__ */ u("textarea", {
+								value: S.description,
+								onChange: (e) => w("description", e.target.value),
+								placeholder: "Subscribe in June and get 2 extra months free!",
+								rows: 2,
+								className: "w-full px-3 py-2 rounded-input border border-border-subtle bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
+							})] })
+						]
+					}),
+					/* @__PURE__ */ d("div", {
+						className: "bg-bg-surface border border-border-seam rounded-card p-5 space-y-4 shadow-[var(--shadow-elevation-1)]",
+						children: [
+							/* @__PURE__ */ u("h3", {
+								className: "font-semibold text-text-primary",
+								children: "Bonus Configuration"
 							}),
-							/* @__PURE__ */ u("p", {
-								className: "text-xs text-text-muted mt-1",
-								children: "Leave empty for no cap"
-							})
-						] })
-					]
-				}),
-				/* @__PURE__ */ d("div", {
-					className: "bg-bg-surface border border-border-seam rounded-card p-5 space-y-4 shadow-[var(--shadow-elevation-1)]",
-					children: [
-						/* @__PURE__ */ u("h3", {
-							className: "font-semibold text-text-primary",
-							children: "Active Window"
-						}),
-						/* @__PURE__ */ d("div", {
-							className: "grid grid-cols-2 gap-4",
-							children: [/* @__PURE__ */ d("div", { children: [
+							/* @__PURE__ */ d("div", { children: [
 								/* @__PURE__ */ u("label", {
 									className: "block text-sm font-medium text-text-primary mb-1",
-									children: "Start Date *"
+									children: "Bonus Months *"
 								}),
 								/* @__PURE__ */ u("input", {
-									type: "date",
-									value: x.startsAt,
-									onChange: (e) => C("startsAt", e.target.value),
-									className: `w-full px-3 py-2 rounded-input border ${v.startsAt ? "border-status-error-border" : "border-border-subtle"} bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]`
+									type: "number",
+									value: S.bonusMonths,
+									min: 1,
+									max: 12,
+									onChange: (e) => w("bonusMonths", parseInt(e.target.value) || 1),
+									className: `w-32 px-3 py-2 rounded-input border ${y.bonusMonths ? "border-status-error-border" : "border-border-subtle"} bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]`
 								}),
-								v.startsAt && /* @__PURE__ */ u("p", {
+								y.bonusMonths && /* @__PURE__ */ u("p", {
 									className: "text-xs text-status-error-text mt-1",
-									children: v.startsAt
+									children: y.bonusMonths
+								}),
+								/* @__PURE__ */ d("div", {
+									className: "mt-2 flex items-start gap-2 p-3 bg-[var(--color-accent-soft)] rounded-lg text-sm text-text-muted",
+									children: [/* @__PURE__ */ u(c, { className: "size-4 shrink-0 mt-0.5 text-text-link" }), /* @__PURE__ */ d("span", { children: [
+										"Users who subscribe during this window get",
+										" ",
+										/* @__PURE__ */ d("strong", {
+											className: "text-text-primary",
+											children: [
+												S.bonusMonths,
+												" free renewal",
+												S.bonusMonths === 1 ? "" : "s"
+											]
+										}),
+										" ",
+										"after their first paid period — their quota resets each month as normal."
+									] })]
 								})
-							] }), /* @__PURE__ */ d("div", { children: [
+							] }),
+							/* @__PURE__ */ d("div", { children: [
 								/* @__PURE__ */ u("label", {
 									className: "block text-sm font-medium text-text-primary mb-1",
-									children: "End Date *"
+									children: "Max Redemptions"
 								}),
 								/* @__PURE__ */ u("input", {
-									type: "date",
-									value: x.expiresAt,
-									onChange: (e) => C("expiresAt", e.target.value),
-									min: x.startsAt,
-									className: `w-full px-3 py-2 rounded-input border ${v.expiresAt ? "border-status-error-border" : "border-border-subtle"} bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]`
+									type: "number",
+									value: S.maxRedemptions,
+									min: 1,
+									onChange: (e) => w("maxRedemptions", e.target.value),
+									placeholder: "Unlimited",
+									className: "w-48 px-3 py-2 rounded-input border border-border-subtle bg-bg-surface text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 								}),
-								v.expiresAt && /* @__PURE__ */ u("p", {
-									className: "text-xs text-status-error-text mt-1",
-									children: v.expiresAt
+								/* @__PURE__ */ u("p", {
+									className: "text-xs text-text-muted mt-1",
+									children: "Leave empty for no cap"
 								})
-							] })]
-						}),
-						/* @__PURE__ */ u("p", {
-							className: "text-xs text-text-muted",
-							children: "Only purchases made between these dates will receive the bonus months"
-						})
-					]
-				}),
-				/* @__PURE__ */ d("div", {
-					className: "bg-bg-surface border border-border-seam rounded-card p-5 space-y-4 shadow-[var(--shadow-elevation-1)]",
-					children: [
-						/* @__PURE__ */ u("h3", {
-							className: "font-semibold text-text-primary",
-							children: "Scope"
-						}),
-						/* @__PURE__ */ d("div", { children: [
-							/* @__PURE__ */ u("label", {
-								className: "block text-sm font-medium text-text-primary mb-2",
-								children: "Applicable Products"
+							] })
+						]
+					}),
+					/* @__PURE__ */ d("div", {
+						className: "bg-bg-surface border border-border-seam rounded-card p-5 space-y-4 shadow-[var(--shadow-elevation-1)]",
+						children: [
+							/* @__PURE__ */ u("h3", {
+								className: "font-semibold text-text-primary",
+								children: "Active Window"
 							}),
-							/* @__PURE__ */ u("div", {
-								className: "flex flex-wrap gap-2",
-								children: f.map((e) => /* @__PURE__ */ u("button", {
-									type: "button",
-									onClick: () => w(e),
-									className: `px-3 py-1.5 rounded-lg border text-sm transition-colors ${x.applicableProductIds.includes(e) ? "border-action-primary-bg bg-[var(--color-accent-soft)] text-text-link font-medium" : "border-border-subtle hover:border-action-primary-bg/50"}`,
-									children: e
-								}, e))
+							/* @__PURE__ */ d("div", {
+								className: "grid grid-cols-2 gap-4",
+								children: [/* @__PURE__ */ d("div", { children: [
+									/* @__PURE__ */ u("label", {
+										className: "block text-sm font-medium text-text-primary mb-1",
+										children: "Start Date *"
+									}),
+									/* @__PURE__ */ u("input", {
+										type: "date",
+										value: S.startsAt,
+										onChange: (e) => w("startsAt", e.target.value),
+										className: `w-full px-3 py-2 rounded-input border ${y.startsAt ? "border-status-error-border" : "border-border-subtle"} bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]`
+									}),
+									y.startsAt && /* @__PURE__ */ u("p", {
+										className: "text-xs text-status-error-text mt-1",
+										children: y.startsAt
+									})
+								] }), /* @__PURE__ */ d("div", { children: [
+									/* @__PURE__ */ u("label", {
+										className: "block text-sm font-medium text-text-primary mb-1",
+										children: "End Date *"
+									}),
+									/* @__PURE__ */ u("input", {
+										type: "date",
+										value: S.expiresAt,
+										onChange: (e) => w("expiresAt", e.target.value),
+										min: S.startsAt,
+										className: `w-full px-3 py-2 rounded-input border ${y.expiresAt ? "border-status-error-border" : "border-border-subtle"} bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]`
+									}),
+									y.expiresAt && /* @__PURE__ */ u("p", {
+										className: "text-xs text-status-error-text mt-1",
+										children: y.expiresAt
+									})
+								] })]
 							}),
 							/* @__PURE__ */ u("p", {
-								className: "text-xs text-text-muted mt-1",
-								children: x.applicableProductIds.length === 0 ? "No selection = applies to all products" : `Applies to: ${x.applicableProductIds.join(", ")}`
+								className: "text-xs text-text-muted",
+								children: "Only purchases made between these dates will receive the bonus months"
 							})
-						] }),
-						/* @__PURE__ */ d("div", { children: [
-							/* @__PURE__ */ u("label", {
-								className: "block text-sm font-medium text-text-primary mb-1",
-								children: "Plan IDs (optional)"
-							}),
-							/* @__PURE__ */ u("input", {
-								type: "text",
-								value: x.applicablePlanIds,
-								onChange: (e) => C("applicablePlanIds", e.target.value),
-								placeholder: "plan-vibecontrols-pro-monthly, plan-vibecontrols-pro-yearly",
-								className: "w-full px-3 py-2 rounded-input border border-border-subtle bg-bg-surface text-text-primary placeholder:text-text-muted text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
+						]
+					}),
+					/* @__PURE__ */ d("div", {
+						className: "bg-bg-surface border border-border-seam rounded-card p-5 space-y-4 shadow-[var(--shadow-elevation-1)]",
+						children: [
+							/* @__PURE__ */ u("h3", {
+								className: "font-semibold text-text-primary",
+								children: "Scope"
 							}),
-							/* @__PURE__ */ u("p", {
-								className: "text-xs text-text-muted mt-1",
-								children: "Comma-separated. Leave empty to apply to all plans"
-							})
-						] })
-					]
-				}),
-				/* @__PURE__ */ d("div", {
-					className: "flex gap-3 justify-end",
-					children: [/* @__PURE__ */ u("button", {
-						type: "button",
-						onClick: () => p("/promotions"),
-						className: "px-5 py-2 rounded-button border border-border-subtle text-text-primary hover:bg-bg-sunken text-sm font-medium transition-colors",
-						children: "Cancel"
-					}), /* @__PURE__ */ d("button", {
-						type: "submit",
-						disabled: g,
-						className: "px-5 py-2 rounded-button bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bgHover flex items-center gap-2 text-sm font-medium transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] disabled:opacity-50",
-						children: [g ? /* @__PURE__ */ u("div", { className: "size-4 border-2 border-action-primary-text border-t-transparent rounded-full animate-spin" }) : /* @__PURE__ */ u(l, { className: "size-4" }), "Create Promotion"]
-					})]
-				})
-			]
-		})]
+							/* @__PURE__ */ d("div", { children: [
+								/* @__PURE__ */ u("label", {
+									className: "block text-sm font-medium text-text-primary mb-2",
+									children: "Applicable Products"
+								}),
+								/* @__PURE__ */ u("div", {
+									className: "flex flex-wrap gap-2",
+									children: p.map((e) => /* @__PURE__ */ u("button", {
+										type: "button",
+										onClick: () => T(e),
+										className: `px-3 py-1.5 rounded-lg border text-sm transition-colors ${S.applicableProductIds.includes(e) ? "border-action-primary-bg bg-[var(--color-accent-soft)] text-text-link font-medium" : "border-border-subtle hover:border-action-primary-bg/50"}`,
+										children: e
+									}, e))
+								}),
+								/* @__PURE__ */ u("p", {
+									className: "text-xs text-text-muted mt-1",
+									children: S.applicableProductIds.length === 0 ? "No selection = applies to all products" : `Applies to: ${S.applicableProductIds.join(", ")}`
+								})
+							] }),
+							/* @__PURE__ */ d("div", { children: [
+								/* @__PURE__ */ u("label", {
+									className: "block text-sm font-medium text-text-primary mb-1",
+									children: "Plan IDs (optional)"
+								}),
+								/* @__PURE__ */ u("input", {
+									type: "text",
+									value: S.applicablePlanIds,
+									onChange: (e) => w("applicablePlanIds", e.target.value),
+									placeholder: "plan-vibecontrols-pro-monthly, plan-vibecontrols-pro-yearly",
+									className: "w-full px-3 py-2 rounded-input border border-border-subtle bg-bg-surface text-text-primary placeholder:text-text-muted text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
+								}),
+								/* @__PURE__ */ u("p", {
+									className: "text-xs text-text-muted mt-1",
+									children: "Comma-separated. Leave empty to apply to all plans"
+								})
+							] })
+						]
+					}),
+					/* @__PURE__ */ d("div", {
+						className: "flex gap-3 justify-end",
+						children: [/* @__PURE__ */ u("button", {
+							type: "button",
+							onClick: () => m("/promotions"),
+							className: "px-5 py-2 rounded-button border border-border-subtle text-text-primary hover:bg-bg-sunken text-sm font-medium transition-colors",
+							children: "Cancel"
+						}), /* @__PURE__ */ d("button", {
+							type: "submit",
+							disabled: _,
+							className: "px-5 py-2 rounded-button bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bgHover flex items-center gap-2 text-sm font-medium transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] disabled:opacity-50",
+							children: [_ ? /* @__PURE__ */ u("div", { className: "size-4 border-2 border-action-primary-text border-t-transparent rounded-full animate-spin" }) : /* @__PURE__ */ u(l, { className: "size-4" }), "Create Promotion"]
+						})]
+					})
+				]
+			})
+		]
 	});
 };
 //#endregion
-export { p as CreatePromotionPage };
+export { m as CreatePromotionPage };
 
 //# sourceMappingURL=CreatePromotionPage.js.map