@burdenoff/microfe-atheletebridge 2026.1031.3 → 2026.1102.1

package/dist/atheletebridge/pages/registrations/RegistrationFormBuilderPage.js

@@ -0,0 +1,602 @@
+import { useAthleteBridge as e } from "../../context/AthleteBridgeContext.js";
+import { PageLayout as t } from "../../components/PageLayout.js";
+import { ErrorState as n, LoadingState as r } from "../../components/LoadingState.js";
+import { useTeams as i } from "../../hooks/useAthleteBridgeApi.js";
+import { FormField as a, fieldInputClass as o } from "../../components/form.js";
+import { useCreateRegistrationForm as s, useRegistrationForm as c, useUpdateRegistrationForm as l } from "../../hooks/useRegistrationApi.js";
+import { minorToInput as u, parseMoney as d } from "../../utils/money.js";
+import { keyFromLabel as f } from "../../utils/registration.js";
+import { useEffect as p, useRef as m, useState as h } from "react";
+import { ArrowDown as g, ArrowLeft as _, ArrowUp as v, Loader2 as y, Plus as b, Save as x, Trash2 as S } from "lucide-react";
+import { useParams as C } from "react-router";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
+//#region src/atheletebridge/pages/registrations/RegistrationFormBuilderPage.tsx
+var E = {
+	SHORT_TEXT: "Short text",
+	LONG_TEXT: "Paragraph",
+	EMAIL: "Email",
+	PHONE: "Phone",
+	NUMBER: "Number",
+	DATE: "Date",
+	SELECT: "Dropdown",
+	CHECKBOX: "Checkbox (yes / consent)"
+}, D = [
+	"USD",
+	"INR",
+	"GBP",
+	"EUR",
+	"AUD",
+	"CAD",
+	"SGD",
+	"AED"
+], O = () => `draft-${crypto.randomUUID()}`, k = {
+	title: "",
+	description: "",
+	season: "",
+	teamId: "",
+	slug: "",
+	currency: "USD",
+	opensAt: "",
+	closesAt: "",
+	maxSubmissions: "",
+	waiverText: "",
+	questions: [],
+	fees: []
+};
+function A(e) {
+	if (!e) return "";
+	let t = new Date(e), n = t.getTimezoneOffset() * 6e4;
+	return new Date(t.getTime() - n).toISOString().slice(0, 16);
+}
+function j(e) {
+	return e ? new Date(e).toISOString() : void 0;
+}
+function M(e) {
+	return {
+		title: e.title,
+		description: e.description ?? "",
+		season: e.season ?? "",
+		teamId: e.teamId ?? "",
+		slug: e.slug,
+		currency: e.currency,
+		opensAt: A(e.opensAt),
+		closesAt: A(e.closesAt),
+		maxSubmissions: e.maxSubmissions == null ? "" : String(e.maxSubmissions),
+		waiverText: e.waiverText ?? "",
+		questions: e.fields.map((e) => ({
+			uid: O(),
+			key: e.key,
+			label: e.label,
+			fieldType: e.fieldType,
+			required: e.required,
+			optionsText: e.options.join(", "),
+			helpText: e.helpText ?? ""
+		})),
+		fees: e.fees.map((t) => ({
+			uid: O(),
+			name: t.name,
+			amountText: u(t.amount, e.currency),
+			feeType: t.feeType,
+			description: t.description ?? ""
+		}))
+	};
+}
+function N(e, t, n) {
+	let r = t + n;
+	if (r < 0 || r >= e.length) return e;
+	let i = [...e], [a] = i.splice(t, 1);
+	return a !== void 0 && i.splice(r, 0, a), i;
+}
+var P = "inline-flex h-8 w-8 items-center justify-center rounded-md border border-border-seam text-text-secondary transition-colors hover:bg-bg-sunken disabled:opacity-40";
+function F() {
+	let { id: u } = C(), A = !!u, { navigateTo: F } = e(), I = c(u), L = i({ pagination: { limit: 100 } }), R = s(), z = l(), [B, V] = h(k), [H, U] = h(null), W = m(null);
+	p(() => {
+		A && I.data && W.current !== I.data.id && (W.current = I.data.id, V(M(I.data)));
+	}, [A, I.data]);
+	let G = A && (I.data?.submissionCount ?? 0) > 0, K = (e, t) => V((n) => ({
+		...n,
+		[e]: t
+	})), q = (e, t) => K("questions", B.questions.map((n) => n.uid === e ? {
+		...n,
+		...t
+	} : n)), J = (e, t) => K("fees", B.fees.map((n) => n.uid === e ? {
+		...n,
+		...t
+	} : n)), Y = () => {
+		let e = new Set(B.questions.map((e) => e.key).filter(Boolean)), t = [];
+		for (let n of B.questions) {
+			let r = n.label.trim();
+			if (!r) return "Every question needs a label.";
+			let i = n.key || f(r, e);
+			e.add(i);
+			let a = n.optionsText.split(",").map((e) => e.trim()).filter(Boolean);
+			if (n.fieldType === "SELECT" && a.length === 0) return `Add at least one option to the dropdown "${r}".`;
+			t.push({
+				key: i,
+				label: r,
+				fieldType: n.fieldType,
+				required: n.required,
+				options: n.fieldType === "SELECT" ? a : void 0,
+				helpText: n.helpText.trim() || void 0
+			});
+		}
+		let n = [];
+		for (let e of B.fees) {
+			let t = e.name.trim();
+			if (!t) return "Every fee needs a name.";
+			let r = d(e.amountText, B.currency);
+			if (r === null) return `Enter a valid amount for "${t}".`;
+			n.push({
+				name: t,
+				amount: r,
+				feeType: e.feeType,
+				description: e.description.trim() || void 0
+			});
+		}
+		return {
+			fields: t,
+			fees: n
+		};
+	}, X = async (e) => {
+		if (e.preventDefault(), U(null), !B.title.trim()) {
+			U("Give the form a title.");
+			return;
+		}
+		let t = B.maxSubmissions.trim() ? Number.parseInt(B.maxSubmissions, 10) : void 0;
+		if (t !== void 0 && (Number.isNaN(t) || t < 1)) {
+			U("Capacity must be a positive number.");
+			return;
+		}
+		let n = G ? null : Y();
+		if (typeof n == "string") {
+			U(n);
+			return;
+		}
+		try {
+			A && u ? (await z.mutateAsync({
+				id: u,
+				input: {
+					title: B.title.trim(),
+					description: B.description.trim() || null,
+					season: B.season.trim() || null,
+					teamId: B.teamId || null,
+					opensAt: j(B.opensAt) ?? null,
+					closesAt: j(B.closesAt) ?? null,
+					maxSubmissions: t ?? null,
+					waiverText: B.waiverText.trim() || null,
+					...n ? {
+						currency: B.currency,
+						fields: n.fields,
+						fees: n.fees
+					} : {}
+				}
+			}), F(`/registrations/${u}`)) : n && F(`/registrations/${(await R.mutateAsync({
+				title: B.title.trim(),
+				description: B.description.trim() || void 0,
+				season: B.season.trim() || void 0,
+				teamId: B.teamId || void 0,
+				slug: B.slug.trim() || void 0,
+				currency: B.currency,
+				opensAt: j(B.opensAt),
+				closesAt: j(B.closesAt),
+				maxSubmissions: t,
+				waiverText: B.waiverText.trim() || void 0,
+				fields: n.fields,
+				fees: n.fees
+			})).id}`);
+		} catch (e) {
+			U(e instanceof Error ? e.message : "Failed to save the registration form.");
+		}
+	}, Z = R.isPending || z.isPending, Q = A ? "Edit registration form" : "New registration form";
+	return A && I.isLoading ? /* @__PURE__ */ w(t, {
+		title: Q,
+		children: /* @__PURE__ */ w(r, { label: "Loading registration form…" })
+	}) : A && (I.isError || !I.data) ? /* @__PURE__ */ w(t, {
+		title: Q,
+		children: /* @__PURE__ */ w(n, {
+			title: "Registration form not found",
+			message: "This form does not exist or you do not have access to it.",
+			onRetry: () => F("/registrations")
+		})
+	}) : /* @__PURE__ */ w(t, {
+		title: Q,
+		description: "Set the details, the questions families answer and the fees they pay.",
+		actions: /* @__PURE__ */ T("button", {
+			type: "button",
+			onClick: () => F(A && u ? `/registrations/${u}` : "/registrations"),
+			className: "inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-4 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken",
+			children: [/* @__PURE__ */ w(_, { className: "h-4 w-4" }), " Cancel"]
+		}),
+		children: /* @__PURE__ */ T("form", {
+			onSubmit: X,
+			className: "max-w-3xl space-y-8",
+			children: [
+				/* @__PURE__ */ T("section", {
+					className: "space-y-5",
+					children: [
+						/* @__PURE__ */ w(a, {
+							label: "Form title",
+							htmlFor: "title",
+							required: !0,
+							children: /* @__PURE__ */ w("input", {
+								id: "title",
+								className: o,
+								value: B.title,
+								onChange: (e) => K("title", e.target.value),
+								placeholder: "e.g. U12 Boys — 2026/27 season registration"
+							})
+						}),
+						/* @__PURE__ */ w(a, {
+							label: "Description",
+							htmlFor: "description",
+							children: /* @__PURE__ */ w("textarea", {
+								id: "description",
+								rows: 3,
+								className: o,
+								value: B.description,
+								onChange: (e) => K("description", e.target.value),
+								placeholder: "Who this is for, training days, what is included."
+							})
+						}),
+						/* @__PURE__ */ T("div", {
+							className: "grid grid-cols-1 gap-5 sm:grid-cols-3",
+							children: [
+								/* @__PURE__ */ w(a, {
+									label: "Season",
+									htmlFor: "season",
+									children: /* @__PURE__ */ w("input", {
+										id: "season",
+										className: o,
+										value: B.season,
+										onChange: (e) => K("season", e.target.value),
+										placeholder: "2026/27"
+									})
+								}),
+								/* @__PURE__ */ w(a, {
+									label: "Team",
+									htmlFor: "teamId",
+									hint: "Optional squad this registers for.",
+									children: /* @__PURE__ */ T("select", {
+										id: "teamId",
+										className: o,
+										value: B.teamId,
+										onChange: (e) => K("teamId", e.target.value),
+										children: [/* @__PURE__ */ w("option", {
+											value: "",
+											children: "No specific team"
+										}), (L.data?.items ?? []).map((e) => /* @__PURE__ */ w("option", {
+											value: e.id,
+											children: e.name
+										}, e.id))]
+									})
+								}),
+								/* @__PURE__ */ w(a, {
+									label: "Currency",
+									htmlFor: "currency",
+									hint: G ? "Locked after the first registration." : void 0,
+									children: /* @__PURE__ */ w("select", {
+										id: "currency",
+										className: o,
+										value: B.currency,
+										disabled: G,
+										onChange: (e) => K("currency", e.target.value),
+										children: [...new Set([B.currency, ...D])].map((e) => /* @__PURE__ */ w("option", {
+											value: e,
+											children: e
+										}, e))
+									})
+								})
+							]
+						}),
+						/* @__PURE__ */ T("div", {
+							className: "grid grid-cols-1 gap-5 sm:grid-cols-3",
+							children: [
+								/* @__PURE__ */ w(a, {
+									label: "Opens",
+									htmlFor: "opensAt",
+									hint: "Leave empty to open on publish.",
+									children: /* @__PURE__ */ w("input", {
+										id: "opensAt",
+										type: "datetime-local",
+										className: o,
+										value: B.opensAt,
+										onChange: (e) => K("opensAt", e.target.value)
+									})
+								}),
+								/* @__PURE__ */ w(a, {
+									label: "Closes",
+									htmlFor: "closesAt",
+									hint: "Leave empty to close manually.",
+									children: /* @__PURE__ */ w("input", {
+										id: "closesAt",
+										type: "datetime-local",
+										className: o,
+										value: B.closesAt,
+										onChange: (e) => K("closesAt", e.target.value)
+									})
+								}),
+								/* @__PURE__ */ w(a, {
+									label: "Capacity",
+									htmlFor: "maxSubmissions",
+									hint: "Maximum registrations.",
+									children: /* @__PURE__ */ w("input", {
+										id: "maxSubmissions",
+										inputMode: "numeric",
+										className: o,
+										value: B.maxSubmissions,
+										onChange: (e) => K("maxSubmissions", e.target.value),
+										placeholder: "Unlimited"
+									})
+								})
+							]
+						}),
+						!A && /* @__PURE__ */ w(a, {
+							label: "Share-link name",
+							htmlFor: "slug",
+							hint: "Optional. Lowercase letters, digits and dashes. Generated from the title when empty.",
+							children: /* @__PURE__ */ w("input", {
+								id: "slug",
+								className: o,
+								value: B.slug,
+								onChange: (e) => K("slug", e.target.value),
+								placeholder: "u12-boys-2026"
+							})
+						})
+					]
+				}),
+				/* @__PURE__ */ T("section", {
+					className: "space-y-3",
+					"aria-labelledby": "builder-questions",
+					children: [
+						/* @__PURE__ */ T("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ w("h2", {
+								id: "builder-questions",
+								className: "text-base font-semibold text-text-primary",
+								children: "Questions"
+							}), /* @__PURE__ */ T("button", {
+								type: "button",
+								disabled: G,
+								onClick: () => K("questions", [...B.questions, {
+									uid: O(),
+									key: "",
+									label: "",
+									fieldType: "SHORT_TEXT",
+									required: !1,
+									optionsText: "",
+									helpText: ""
+								}]),
+								className: "inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-1.5 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken disabled:opacity-50",
+								children: [/* @__PURE__ */ w(b, { className: "h-4 w-4" }), " Add question"]
+							})]
+						}),
+						/* @__PURE__ */ T("p", {
+							className: "text-xs text-text-secondary",
+							children: ["Participant name and contact details are always collected.", G && " Questions are locked because this form already has registrations."]
+						}),
+						B.questions.map((e, t) => /* @__PURE__ */ T("div", {
+							className: "space-y-3 rounded-lg border border-border-seam bg-bg-surface p-4",
+							"data-testid": "builder-question",
+							children: [
+								/* @__PURE__ */ T("div", {
+									className: "grid grid-cols-1 gap-3 sm:grid-cols-[1fr_12rem]",
+									children: [/* @__PURE__ */ w(a, {
+										label: `Question ${t + 1}`,
+										htmlFor: `q-label-${e.uid}`,
+										children: /* @__PURE__ */ w("input", {
+											id: `q-label-${e.uid}`,
+											className: o,
+											value: e.label,
+											disabled: G,
+											onChange: (t) => q(e.uid, { label: t.target.value }),
+											placeholder: "e.g. Date of birth"
+										})
+									}), /* @__PURE__ */ w(a, {
+										label: "Answer type",
+										htmlFor: `q-type-${e.uid}`,
+										children: /* @__PURE__ */ w("select", {
+											id: `q-type-${e.uid}`,
+											className: o,
+											value: e.fieldType,
+											disabled: G,
+											onChange: (t) => q(e.uid, { fieldType: t.target.value }),
+											children: Object.keys(E).map((e) => /* @__PURE__ */ w("option", {
+												value: e,
+												children: E[e]
+											}, e))
+										})
+									})]
+								}),
+								e.fieldType === "SELECT" && /* @__PURE__ */ w(a, {
+									label: "Options",
+									htmlFor: `q-options-${e.uid}`,
+									hint: "Comma-separated.",
+									children: /* @__PURE__ */ w("input", {
+										id: `q-options-${e.uid}`,
+										className: o,
+										value: e.optionsText,
+										disabled: G,
+										onChange: (t) => q(e.uid, { optionsText: t.target.value }),
+										placeholder: "XS, S, M, L"
+									})
+								}),
+								/* @__PURE__ */ w(a, {
+									label: "Help text",
+									htmlFor: `q-help-${e.uid}`,
+									children: /* @__PURE__ */ w("input", {
+										id: `q-help-${e.uid}`,
+										className: o,
+										value: e.helpText,
+										disabled: G,
+										onChange: (t) => q(e.uid, { helpText: t.target.value })
+									})
+								}),
+								/* @__PURE__ */ T("div", {
+									className: "flex flex-wrap items-center justify-between gap-3",
+									children: [/* @__PURE__ */ T("label", {
+										className: "flex items-center gap-2 text-sm text-text-primary",
+										children: [/* @__PURE__ */ w("input", {
+											type: "checkbox",
+											checked: e.required,
+											disabled: G,
+											onChange: (t) => q(e.uid, { required: t.target.checked }),
+											className: "h-4 w-4 rounded border-border-seam text-action-primary-bg focus:ring-[var(--color-focus-ring)]"
+										}), "Required"]
+									}), /* @__PURE__ */ T("span", {
+										className: "flex gap-2",
+										children: [
+											/* @__PURE__ */ w("button", {
+												type: "button",
+												"aria-label": "Move question up",
+												className: P,
+												disabled: G || t === 0,
+												onClick: () => K("questions", N(B.questions, t, -1)),
+												children: /* @__PURE__ */ w(v, { className: "h-4 w-4" })
+											}),
+											/* @__PURE__ */ w("button", {
+												type: "button",
+												"aria-label": "Move question down",
+												className: P,
+												disabled: G || t === B.questions.length - 1,
+												onClick: () => K("questions", N(B.questions, t, 1)),
+												children: /* @__PURE__ */ w(g, { className: "h-4 w-4" })
+											}),
+											/* @__PURE__ */ w("button", {
+												type: "button",
+												"aria-label": "Remove question",
+												className: P,
+												disabled: G,
+												onClick: () => K("questions", B.questions.filter((t) => t.uid !== e.uid)),
+												children: /* @__PURE__ */ w(S, { className: "h-4 w-4" })
+											})
+										]
+									})]
+								})
+							]
+						}, e.uid))
+					]
+				}),
+				/* @__PURE__ */ T("section", {
+					className: "space-y-3",
+					"aria-labelledby": "builder-fees",
+					children: [
+						/* @__PURE__ */ T("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ w("h2", {
+								id: "builder-fees",
+								className: "text-base font-semibold text-text-primary",
+								children: "Fees"
+							}), /* @__PURE__ */ T("button", {
+								type: "button",
+								disabled: G,
+								onClick: () => K("fees", [...B.fees, {
+									uid: O(),
+									name: "",
+									amountText: "",
+									feeType: "REQUIRED",
+									description: ""
+								}]),
+								className: "inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-1.5 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken disabled:opacity-50",
+								children: [/* @__PURE__ */ w(b, { className: "h-4 w-4" }), " Add fee"]
+							})]
+						}),
+						/* @__PURE__ */ w("p", {
+							className: "text-xs text-text-secondary",
+							children: "Required fees are charged on every registration; optional ones (kit, tournament entry) are opt-in. Payments are recorded by the club office as they arrive."
+						}),
+						B.fees.map((e) => /* @__PURE__ */ T("div", {
+							className: "grid grid-cols-1 gap-3 rounded-lg border border-border-seam bg-bg-surface p-4 sm:grid-cols-[1fr_9rem_9rem_auto]",
+							"data-testid": "builder-fee",
+							children: [
+								/* @__PURE__ */ w(a, {
+									label: "Fee name",
+									htmlFor: `f-name-${e.uid}`,
+									children: /* @__PURE__ */ w("input", {
+										id: `f-name-${e.uid}`,
+										className: o,
+										value: e.name,
+										disabled: G,
+										onChange: (t) => J(e.uid, { name: t.target.value }),
+										placeholder: "Membership"
+									})
+								}),
+								/* @__PURE__ */ w(a, {
+									label: `Amount (${B.currency})`,
+									htmlFor: `f-amount-${e.uid}`,
+									children: /* @__PURE__ */ w("input", {
+										id: `f-amount-${e.uid}`,
+										inputMode: "decimal",
+										className: o,
+										value: e.amountText,
+										disabled: G,
+										onChange: (t) => J(e.uid, { amountText: t.target.value }),
+										placeholder: "150.00"
+									})
+								}),
+								/* @__PURE__ */ w(a, {
+									label: "Type",
+									htmlFor: `f-type-${e.uid}`,
+									children: /* @__PURE__ */ T("select", {
+										id: `f-type-${e.uid}`,
+										className: o,
+										value: e.feeType,
+										disabled: G,
+										onChange: (t) => J(e.uid, { feeType: t.target.value }),
+										children: [/* @__PURE__ */ w("option", {
+											value: "REQUIRED",
+											children: "Required"
+										}), /* @__PURE__ */ w("option", {
+											value: "OPTIONAL",
+											children: "Optional"
+										})]
+									})
+								}),
+								/* @__PURE__ */ w("div", {
+									className: "flex items-end",
+									children: /* @__PURE__ */ w("button", {
+										type: "button",
+										"aria-label": "Remove fee",
+										className: P,
+										disabled: G,
+										onClick: () => K("fees", B.fees.filter((t) => t.uid !== e.uid)),
+										children: /* @__PURE__ */ w(S, { className: "h-4 w-4" })
+									})
+								})
+							]
+						}, e.uid))
+					]
+				}),
+				/* @__PURE__ */ w("section", { children: /* @__PURE__ */ w(a, {
+					label: "Waiver / consent",
+					htmlFor: "waiverText",
+					hint: "Optional. When set, registrants must accept it to submit.",
+					children: /* @__PURE__ */ w("textarea", {
+						id: "waiverText",
+						rows: 4,
+						className: o,
+						value: B.waiverText,
+						onChange: (e) => K("waiverText", e.target.value)
+					})
+				}) }),
+				H && /* @__PURE__ */ w("p", {
+					role: "alert",
+					className: "text-sm text-status-error-text",
+					children: H
+				}),
+				/* @__PURE__ */ w("div", {
+					className: "pt-2",
+					children: /* @__PURE__ */ T("button", {
+						type: "submit",
+						disabled: Z,
+						className: "inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-60",
+						children: [Z ? /* @__PURE__ */ w(y, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ w(x, { className: "h-4 w-4" }), A ? "Save changes" : "Create form"]
+					})
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { F as RegistrationFormBuilderPage };
+
+//# sourceMappingURL=RegistrationFormBuilderPage.js.map