@burdenoff/microfe-comradecircle 2026.730.1 → 2026.730.2

package/dist/comradecircle/pages/monetization/MonetizationPage.js

@@ -0,0 +1,596 @@
+import { cn as e } from "../../utils/cn.js";
+import { PageLayout as t } from "../../components/PageLayout.js";
+import { useComArchiveDigitalProduct as n, useComArchiveMembershipTier as r, useComArchivePaidEvent as i, useComCreateDigitalProduct as a, useComCreateMembershipTier as o, useComCreatePaidEvent as s, useComMyDigitalProducts as c, useComMyMembershipTiers as l, useComMyPaidEvents as u, useComMyReceivedTips as d, useComUpdatePaidEvent as f } from "../../hooks/useComradeCircleApi.js";
+import "../../hooks/index.js";
+import { describeError as p, notify as m } from "../../lib/toast.js";
+import { EmptyState as h } from "../../components/EmptyState.js";
+import { ErrorView as g, LoadingView as _ } from "../../components/StateViews.js";
+import { useState as v } from "react";
+import { Coins as y, Gift as b, Package as x, Plus as S, Ticket as C, Trash2 as w, Users as T } from "lucide-react";
+import { jsx as E, jsxs as D } from "react/jsx-runtime";
+import { Badge as O, Button as k, GlassCard as A, Input as j, Label as M, Textarea as N } from "@burdenoff/fe-libs/ui";
+//#region src/comradecircle/pages/monetization/MonetizationPage.tsx
+var P = [
+	{
+		id: "tiers",
+		label: "Membership tiers",
+		icon: T
+	},
+	{
+		id: "events",
+		label: "Paid events",
+		icon: C
+	},
+	{
+		id: "products",
+		label: "Digital products",
+		icon: x
+	},
+	{
+		id: "tips",
+		label: "Tips received",
+		icon: b
+	}
+];
+function F(e, t) {
+	try {
+		return new Intl.NumberFormat(void 0, {
+			style: "currency",
+			currency: t
+		}).format(e);
+	} catch {
+		return `${t} ${e.toFixed(2)}`;
+	}
+}
+function I({ children: e }) {
+	return /* @__PURE__ */ E("p", {
+		className: "text-xs font-semibold uppercase tracking-[0.08em] text-text-tertiary",
+		children: e
+	});
+}
+function L({ title: e, subtitle: t, price: n, statusLabel: r, statusTone: i, onArchive: a, archiving: o, archiveLabel: s = "Archive" }) {
+	return /* @__PURE__ */ D("div", {
+		className: "flex flex-col gap-3 rounded-xl border border-border-seam bg-bg-surface p-4 sm:flex-row sm:items-center sm:justify-between",
+		children: [/* @__PURE__ */ D("div", {
+			className: "min-w-0",
+			children: [/* @__PURE__ */ D("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [/* @__PURE__ */ E("h4", {
+					className: "truncate text-sm font-semibold text-text-primary",
+					children: e
+				}), /* @__PURE__ */ E(O, {
+					variant: i === "positive" ? "default" : i === "negative" ? "destructive" : "secondary",
+					children: r
+				})]
+			}), t && /* @__PURE__ */ E("p", {
+				className: "mt-1 truncate text-xs text-text-secondary",
+				children: t
+			})]
+		}), /* @__PURE__ */ D("div", {
+			className: "flex shrink-0 items-center gap-3",
+			children: [/* @__PURE__ */ E("span", {
+				className: "text-sm font-semibold tabular-nums text-text-primary",
+				children: n
+			}), a && /* @__PURE__ */ D(k, {
+				variant: "ghost",
+				size: "sm",
+				onClick: a,
+				disabled: o,
+				children: [
+					/* @__PURE__ */ E(w, { className: "mr-1.5 h-3.5 w-3.5" }),
+					" ",
+					s
+				]
+			})]
+		})]
+	});
+}
+function R({ onDone: e }) {
+	let t = o(), [n, r] = v(""), [i, a] = v(""), [s, c] = v("");
+	return /* @__PURE__ */ D("form", {
+		onSubmit: async (o) => {
+			o.preventDefault();
+			let l = Number(s);
+			if (!n.trim()) {
+				m.error("Name required", "Give your tier a name.");
+				return;
+			}
+			if (!Number.isFinite(l) || l < 0) {
+				m.error("Invalid price", "Enter a price of 0 or more.");
+				return;
+			}
+			try {
+				await t.mutateAsync({
+					name: n.trim(),
+					description: i.trim() || null,
+					priceAmount: l,
+					billingInterval: "MONTHLY"
+				}), m.success("Membership tier created"), r(""), a(""), c(""), e();
+			} catch (e) {
+				m.error("Could not create tier", p(e));
+			}
+		},
+		className: "grid gap-3 rounded-xl border border-border-seam bg-bg-surface p-4",
+		children: [
+			/* @__PURE__ */ D("div", {
+				className: "grid gap-3 sm:grid-cols-[2fr_1fr]",
+				children: [/* @__PURE__ */ D("div", {
+					className: "grid gap-1.5",
+					children: [/* @__PURE__ */ E(M, {
+						htmlFor: "tier-name",
+						children: "Tier name"
+					}), /* @__PURE__ */ E(j, {
+						id: "tier-name",
+						value: n,
+						onChange: (e) => r(e.target.value),
+						placeholder: "e.g. Supporter",
+						required: !0
+					})]
+				}), /* @__PURE__ */ D("div", {
+					className: "grid gap-1.5",
+					children: [/* @__PURE__ */ E(M, {
+						htmlFor: "tier-price",
+						children: "Price / month (USD)"
+					}), /* @__PURE__ */ E(j, {
+						id: "tier-price",
+						type: "number",
+						min: "0",
+						step: "0.01",
+						value: s,
+						onChange: (e) => c(e.target.value),
+						placeholder: "4.99",
+						required: !0
+					})]
+				})]
+			}),
+			/* @__PURE__ */ D("div", {
+				className: "grid gap-1.5",
+				children: [/* @__PURE__ */ E(M, {
+					htmlFor: "tier-description",
+					children: "Perks description"
+				}), /* @__PURE__ */ E(N, {
+					id: "tier-description",
+					value: i,
+					onChange: (e) => a(e.target.value),
+					rows: 2,
+					placeholder: "What supporters get at this tier"
+				})]
+			}),
+			/* @__PURE__ */ E("div", {
+				className: "flex justify-end",
+				children: /* @__PURE__ */ D(k, {
+					type: "submit",
+					disabled: t.isPending,
+					children: [
+						/* @__PURE__ */ E(S, { className: "mr-1.5 h-4 w-4" }),
+						" ",
+						t.isPending ? "Creating…" : "Create tier"
+					]
+				})
+			})
+		]
+	});
+}
+function z() {
+	let { data: e, isLoading: t, isError: n, refetch: i } = l(), a = r(), [o, s] = v(!1), c = e?.items ?? [], u = async (e) => {
+		try {
+			await a.mutateAsync(e.id), m.success("Tier archived", e.name);
+		} catch (e) {
+			m.error("Could not archive tier", p(e));
+		}
+	};
+	return t ? /* @__PURE__ */ E(_, { label: "Loading your membership tiers…" }) : n ? /* @__PURE__ */ E(g, {
+		message: "We couldn't load your membership tiers.",
+		onRetry: () => i()
+	}) : /* @__PURE__ */ D("div", {
+		className: "flex flex-col gap-4",
+		children: [
+			/* @__PURE__ */ D("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ E(I, { children: "Your membership tiers" }), /* @__PURE__ */ D(k, {
+					variant: "outline",
+					size: "sm",
+					onClick: () => s((e) => !e),
+					children: [/* @__PURE__ */ E(S, { className: "mr-1.5 h-3.5 w-3.5" }), " New tier"]
+				})]
+			}),
+			o && /* @__PURE__ */ E(R, { onDone: () => s(!1) }),
+			c.length === 0 ? /* @__PURE__ */ E(h, {
+				icon: /* @__PURE__ */ E(T, { className: "h-10 w-10" }),
+				title: "No membership tiers yet",
+				description: "Create a tier so fans can support you on a recurring basis."
+			}) : /* @__PURE__ */ E("div", {
+				className: "flex flex-col gap-3",
+				children: c.map((e) => /* @__PURE__ */ E(L, {
+					title: e.name,
+					subtitle: e.description,
+					price: `${F(e.priceAmount, e.currency)}/${e.billingInterval === "YEARLY" ? "yr" : "mo"}`,
+					statusLabel: e.status,
+					statusTone: e.status === "ACTIVE" ? "positive" : "neutral",
+					onArchive: e.status === "ACTIVE" ? () => u(e) : void 0,
+					archiving: a.isPending
+				}, e.id))
+			})
+		]
+	});
+}
+function B({ onDone: e }) {
+	let t = s(), [n, r] = v(""), [i, a] = v(""), [o, c] = v("");
+	return /* @__PURE__ */ D("form", {
+		onSubmit: async (s) => {
+			s.preventDefault();
+			let l = Number(i);
+			if (!n.trim()) {
+				m.error("Title required", "Give your event a title.");
+				return;
+			}
+			if (!Number.isFinite(l) || l < 0) {
+				m.error("Invalid price", "Enter a ticket price of 0 or more.");
+				return;
+			}
+			try {
+				await t.mutateAsync({
+					title: n.trim(),
+					priceAmount: l,
+					capacity: o.trim() ? Number(o) : null
+				}), m.success("Paid event created as a draft", "Publish it once you’re ready."), r(""), a(""), c(""), e();
+			} catch (e) {
+				m.error("Could not create event", p(e));
+			}
+		},
+		className: "grid gap-3 rounded-xl border border-border-seam bg-bg-surface p-4",
+		children: [/* @__PURE__ */ D("div", {
+			className: "grid gap-3 sm:grid-cols-[2fr_1fr_1fr]",
+			children: [
+				/* @__PURE__ */ D("div", {
+					className: "grid gap-1.5",
+					children: [/* @__PURE__ */ E(M, {
+						htmlFor: "event-title",
+						children: "Event title"
+					}), /* @__PURE__ */ E(j, {
+						id: "event-title",
+						value: n,
+						onChange: (e) => r(e.target.value),
+						required: !0
+					})]
+				}),
+				/* @__PURE__ */ D("div", {
+					className: "grid gap-1.5",
+					children: [/* @__PURE__ */ E(M, {
+						htmlFor: "event-price",
+						children: "Ticket price (USD)"
+					}), /* @__PURE__ */ E(j, {
+						id: "event-price",
+						type: "number",
+						min: "0",
+						step: "0.01",
+						value: i,
+						onChange: (e) => a(e.target.value),
+						required: !0
+					})]
+				}),
+				/* @__PURE__ */ D("div", {
+					className: "grid gap-1.5",
+					children: [/* @__PURE__ */ E(M, {
+						htmlFor: "event-capacity",
+						children: "Capacity (optional)"
+					}), /* @__PURE__ */ E(j, {
+						id: "event-capacity",
+						type: "number",
+						min: "1",
+						value: o,
+						onChange: (e) => c(e.target.value)
+					})]
+				})
+			]
+		}), /* @__PURE__ */ E("div", {
+			className: "flex justify-end",
+			children: /* @__PURE__ */ D(k, {
+				type: "submit",
+				disabled: t.isPending,
+				children: [
+					/* @__PURE__ */ E(S, { className: "mr-1.5 h-4 w-4" }),
+					" ",
+					t.isPending ? "Creating…" : "Create event (draft)"
+				]
+			})
+		})]
+	});
+}
+function V() {
+	let { data: e, isLoading: t, isError: n, refetch: r } = u(), a = f(), o = i(), [s, c] = v(!1), l = e?.items ?? [], d = async (e) => {
+		try {
+			await a.mutateAsync({
+				id: e.id,
+				input: { status: "PUBLISHED" }
+			}), m.success("Event published", e.title);
+		} catch (e) {
+			m.error("Could not publish event", p(e));
+		}
+	}, y = async (e) => {
+		try {
+			await o.mutateAsync(e.id), m.success("Event cancelled", e.title);
+		} catch (e) {
+			m.error("Could not cancel event", p(e));
+		}
+	};
+	return t ? /* @__PURE__ */ E(_, { label: "Loading your paid events…" }) : n ? /* @__PURE__ */ E(g, {
+		message: "We couldn't load your paid events.",
+		onRetry: () => r()
+	}) : /* @__PURE__ */ D("div", {
+		className: "flex flex-col gap-4",
+		children: [
+			/* @__PURE__ */ D("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ E(I, { children: "Your paid events" }), /* @__PURE__ */ D(k, {
+					variant: "outline",
+					size: "sm",
+					onClick: () => c((e) => !e),
+					children: [/* @__PURE__ */ E(S, { className: "mr-1.5 h-3.5 w-3.5" }), " New event"]
+				})]
+			}),
+			s && /* @__PURE__ */ E(B, { onDone: () => c(!1) }),
+			l.length === 0 ? /* @__PURE__ */ E(h, {
+				icon: /* @__PURE__ */ E(C, { className: "h-10 w-10" }),
+				title: "No paid events yet",
+				description: "Create a ticketed event — it starts as a draft until you publish it."
+			}) : /* @__PURE__ */ E("div", {
+				className: "flex flex-col gap-3",
+				children: l.map((e) => /* @__PURE__ */ D("div", {
+					className: "flex flex-col gap-3 rounded-xl border border-border-seam bg-bg-surface p-4 sm:flex-row sm:items-center sm:justify-between",
+					children: [/* @__PURE__ */ D("div", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ D("div", {
+							className: "flex flex-wrap items-center gap-2",
+							children: [/* @__PURE__ */ E("h4", {
+								className: "truncate text-sm font-semibold text-text-primary",
+								children: e.title
+							}), /* @__PURE__ */ E(O, {
+								variant: e.status === "PUBLISHED" ? "default" : e.status === "CANCELLED" ? "destructive" : "secondary",
+								children: e.status
+							})]
+						}), e.capacity != null && /* @__PURE__ */ D("p", {
+							className: "mt-1 text-xs text-text-secondary",
+							children: ["Capacity: ", e.capacity]
+						})]
+					}), /* @__PURE__ */ D("div", {
+						className: "flex shrink-0 items-center gap-2",
+						children: [
+							/* @__PURE__ */ E("span", {
+								className: "text-sm font-semibold tabular-nums text-text-primary",
+								children: F(e.priceAmount, e.currency)
+							}),
+							e.status === "DRAFT" && /* @__PURE__ */ E(k, {
+								size: "sm",
+								onClick: () => d(e),
+								disabled: a.isPending,
+								children: "Publish"
+							}),
+							e.status !== "CANCELLED" && /* @__PURE__ */ D(k, {
+								variant: "ghost",
+								size: "sm",
+								onClick: () => y(e),
+								disabled: o.isPending,
+								children: [/* @__PURE__ */ E(w, { className: "mr-1.5 h-3.5 w-3.5" }), " Cancel"]
+							})
+						]
+					})]
+				}, e.id))
+			})
+		]
+	});
+}
+function H({ onDone: e }) {
+	let t = a(), [n, r] = v(""), [i, o] = v(""), [s, c] = v("");
+	return /* @__PURE__ */ D("form", {
+		onSubmit: async (a) => {
+			a.preventDefault();
+			let l = Number(i);
+			if (!n.trim()) {
+				m.error("Title required", "Give your product a title.");
+				return;
+			}
+			if (!Number.isFinite(l) || l < 0) {
+				m.error("Invalid price", "Enter a price of 0 or more.");
+				return;
+			}
+			try {
+				await t.mutateAsync({
+					title: n.trim(),
+					description: s.trim() || null,
+					priceAmount: l,
+					productType: "DOWNLOAD"
+				}), m.success("Digital product created"), r(""), o(""), c(""), e();
+			} catch (e) {
+				m.error("Could not create product", p(e));
+			}
+		},
+		className: "grid gap-3 rounded-xl border border-border-seam bg-bg-surface p-4",
+		children: [
+			/* @__PURE__ */ D("div", {
+				className: "grid gap-3 sm:grid-cols-[2fr_1fr]",
+				children: [/* @__PURE__ */ D("div", {
+					className: "grid gap-1.5",
+					children: [/* @__PURE__ */ E(M, {
+						htmlFor: "product-title",
+						children: "Product title"
+					}), /* @__PURE__ */ E(j, {
+						id: "product-title",
+						value: n,
+						onChange: (e) => r(e.target.value),
+						required: !0
+					})]
+				}), /* @__PURE__ */ D("div", {
+					className: "grid gap-1.5",
+					children: [/* @__PURE__ */ E(M, {
+						htmlFor: "product-price",
+						children: "Price (USD)"
+					}), /* @__PURE__ */ E(j, {
+						id: "product-price",
+						type: "number",
+						min: "0",
+						step: "0.01",
+						value: i,
+						onChange: (e) => o(e.target.value),
+						required: !0
+					})]
+				})]
+			}),
+			/* @__PURE__ */ D("div", {
+				className: "grid gap-1.5",
+				children: [/* @__PURE__ */ E(M, {
+					htmlFor: "product-description",
+					children: "Description"
+				}), /* @__PURE__ */ E(N, {
+					id: "product-description",
+					value: s,
+					onChange: (e) => c(e.target.value),
+					rows: 2,
+					placeholder: "What's included in this download"
+				})]
+			}),
+			/* @__PURE__ */ E("div", {
+				className: "flex justify-end",
+				children: /* @__PURE__ */ D(k, {
+					type: "submit",
+					disabled: t.isPending,
+					children: [
+						/* @__PURE__ */ E(S, { className: "mr-1.5 h-4 w-4" }),
+						" ",
+						t.isPending ? "Creating…" : "Create product"
+					]
+				})
+			})
+		]
+	});
+}
+function U() {
+	let { data: e, isLoading: t, isError: r, refetch: i } = c(), a = n(), [o, s] = v(!1), l = e?.items ?? [], u = async (e) => {
+		try {
+			await a.mutateAsync(e.id), m.success("Product archived", e.title);
+		} catch (e) {
+			m.error("Could not archive product", p(e));
+		}
+	};
+	return t ? /* @__PURE__ */ E(_, { label: "Loading your digital products…" }) : r ? /* @__PURE__ */ E(g, {
+		message: "We couldn't load your digital products.",
+		onRetry: () => i()
+	}) : /* @__PURE__ */ D("div", {
+		className: "flex flex-col gap-4",
+		children: [
+			/* @__PURE__ */ D("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ E(I, { children: "Your digital products" }), /* @__PURE__ */ D(k, {
+					variant: "outline",
+					size: "sm",
+					onClick: () => s((e) => !e),
+					children: [/* @__PURE__ */ E(S, { className: "mr-1.5 h-3.5 w-3.5" }), " New product"]
+				})]
+			}),
+			o && /* @__PURE__ */ E(H, { onDone: () => s(!1) }),
+			l.length === 0 ? /* @__PURE__ */ E(h, {
+				icon: /* @__PURE__ */ E(x, { className: "h-10 w-10" }),
+				title: "No digital products yet",
+				description: "List a downloadable or access-gated product with a price."
+			}) : /* @__PURE__ */ E("div", {
+				className: "flex flex-col gap-3",
+				children: l.map((e) => /* @__PURE__ */ E(L, {
+					title: e.title,
+					subtitle: e.description,
+					price: F(e.priceAmount, e.currency),
+					statusLabel: e.status,
+					statusTone: e.status === "ACTIVE" ? "positive" : "neutral",
+					onArchive: e.status === "ACTIVE" ? () => u(e) : void 0,
+					archiving: a.isPending
+				}, e.id))
+			})
+		]
+	});
+}
+function W() {
+	let { data: e, isLoading: t, isError: n, refetch: r } = d(), i = e?.items ?? [], a = i.filter((e) => e.status === "RECORDED").reduce((e, t) => e + t.amount, 0);
+	return t ? /* @__PURE__ */ E(_, { label: "Loading tips received…" }) : n ? /* @__PURE__ */ E(g, {
+		message: "We couldn't load your tips.",
+		onRetry: () => r()
+	}) : /* @__PURE__ */ D("div", {
+		className: "flex flex-col gap-4",
+		children: [/* @__PURE__ */ D("div", {
+			className: "rounded-xl border border-border-seam bg-bg-surface p-4",
+			children: [
+				/* @__PURE__ */ E(I, { children: "Total recorded (not yet payable)" }),
+				/* @__PURE__ */ E("p", {
+					className: "mt-1 text-2xl font-semibold tabular-nums text-text-primary",
+					children: F(a, i[0]?.currency ?? "USD")
+				}),
+				/* @__PURE__ */ E("p", {
+					className: "mt-1 text-xs text-text-tertiary",
+					children: "These are recorded tip intents only — payment integration is pending, so no funds have actually moved yet."
+				})
+			]
+		}), i.length === 0 ? /* @__PURE__ */ E(h, {
+			icon: /* @__PURE__ */ E(b, { className: "h-10 w-10" }),
+			title: "No tips recorded yet",
+			description: "When fans tip you, the recorded intents will show up here."
+		}) : /* @__PURE__ */ E("div", {
+			className: "flex flex-col gap-3",
+			children: i.map((e) => /* @__PURE__ */ D("div", {
+				className: "flex items-center justify-between gap-3 rounded-xl border border-border-seam bg-bg-surface p-4",
+				children: [/* @__PURE__ */ D("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ D("p", {
+						className: "text-sm font-medium text-text-primary",
+						children: [F(e.amount, e.currency), /* @__PURE__ */ E("span", {
+							className: "ml-2 text-xs font-normal text-text-tertiary",
+							children: new Date(e.createdAt).toLocaleDateString()
+						})]
+					}), e.message && /* @__PURE__ */ D("p", {
+						className: "mt-1 truncate text-xs text-text-secondary",
+						children: [
+							"“",
+							e.message,
+							"”"
+						]
+					})]
+				}), /* @__PURE__ */ E(O, {
+					variant: e.status === "RECORDED" ? "secondary" : "destructive",
+					children: e.status
+				})]
+			}, e.id))
+		})]
+	});
+}
+function G() {
+	let [n, r] = v("tiers");
+	return /* @__PURE__ */ D(t, {
+		title: "Monetization",
+		description: "Manage the membership tiers, paid events, and digital products you offer — and see the tips you've received. This is a pricing/catalog core: payment integration is pending, so no checkout is live yet.",
+		children: [
+			/* @__PURE__ */ E(A, {
+				treatment: "plain",
+				className: "mb-5 flex flex-wrap gap-1 p-1.5",
+				children: P.map(({ id: t, label: i, icon: a }) => /* @__PURE__ */ D("button", {
+					type: "button",
+					onClick: () => r(t),
+					className: e("flex items-center gap-1.5 rounded-lg px-3 py-2 text-xs font-medium transition-colors", n === t ? "bg-[var(--color-accent-soft)] text-accent" : "text-text-secondary hover:bg-bg-sunken hover:text-text-primary"),
+					children: [
+						/* @__PURE__ */ E(a, { className: "h-4 w-4" }),
+						" ",
+						i
+					]
+				}, t))
+			}),
+			/* @__PURE__ */ D("div", {
+				className: "mb-5 flex items-center gap-2 rounded-xl border border-status-warning-border bg-status-warning-bg-subtle px-4 py-3 text-xs text-status-warning-text",
+				children: [/* @__PURE__ */ E(y, { className: "h-4 w-4 shrink-0" }), "Payment integration pending — prices are informational until checkout goes live."]
+			}),
+			n === "tiers" && /* @__PURE__ */ E(z, {}),
+			n === "events" && /* @__PURE__ */ E(V, {}),
+			n === "products" && /* @__PURE__ */ E(U, {}),
+			n === "tips" && /* @__PURE__ */ E(W, {})
+		]
+	});
+}
+//#endregion
+export { G as MonetizationPage };
+
+//# sourceMappingURL=MonetizationPage.js.map