@dineway-ai/plugin-payment 0.2.2 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dineway-ai/plugin-payment",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "Provider-neutral payment infrastructure and Stripe integration for Dineway plugins",
   "type": "module",
   "publishConfig": {
@@ -13,7 +13,8 @@
     "./configuration": "./src/configuration/index.ts",
     "./routes": "./src/routes/index.ts",
     "./stripe": "./src/stripe/index.ts",
-    "./types": "./src/types.ts"
+    "./types": "./src/types.ts",
+    "./subscriptions": "./src/subscriptions/index.ts"
   },
   "files": [
     "src"
@@ -28,7 +29,7 @@
   "license": "MIT",
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
-    "dineway": "^0.2.2"
+    "dineway": "^0.2.29"
   },
   "dependencies": {
     "@stripe/stripe-js": "9.9.0",

package/src/admin/form.ts

@@ -39,11 +39,7 @@ export function buildPaymentSettingsUpdate(
 	if (webhookSecret && !webhookSecret.startsWith("whsec_")) {
 		throw new Error("Webhook signing secret must start with whsec_");
 	}
-	if (
-		configuration.secretKey &&
-		configuration.settings.mode !== form.mode &&
-		!secretKey
-	) {
+	if (configuration.secretKey && configuration.settings.mode !== form.mode && !secretKey) {
 		throw new Error("Enter the matching secret key when changing Stripe mode");
 	}
 	return {

package/src/admin/subscriptions.tsx

@@ -0,0 +1,514 @@
+import * as React from "react";
+
+import { formatSubscriptionPrice } from "../subscriptions/format.js";
+import type { getSubscriptionConfiguration } from "../subscriptions/runtime.js";
+import type {
+	MemberBilling,
+	MemberSubscription,
+	SaveSubscriptionPlan,
+	SubscriptionPlan,
+} from "../subscriptions/types.js";
+import { postPaymentRoute } from "./api.js";
+
+type Configuration = Awaited<ReturnType<typeof getSubscriptionConfiguration>>;
+type Feature = { key: string; kind: "boolean" | "number"; value: string };
+const emptyPlan: SaveSubscriptionPlan = {
+	code: "",
+	name: "",
+	enabled: true,
+	expectedVersion: 0,
+	entitlements: {},
+	monthlyPriceId: null,
+	yearlyPriceId: null,
+};
+const inputClass = "w-full rounded-lg border border-kumo-line bg-kumo-base px-3 py-2 text-sm";
+const buttonClass = "rounded-lg border border-kumo-line px-3 py-2 text-sm disabled:opacity-50";
+
+export function PaymentSubscriptionsPage() {
+	const [configuration, setConfiguration] = React.useState<Configuration | null>(null);
+	const [plans, setPlans] = React.useState<SubscriptionPlan[]>([]);
+	const [members, setMembers] = React.useState<MemberSubscription[]>([]);
+	const [cursor, setCursor] = React.useState<string>();
+	const [form, setForm] = React.useState<SaveSubscriptionPlan>({ ...emptyPlan });
+	const [features, setFeatures] = React.useState<Feature[]>([]);
+	const [webhookSecret, setWebhookSecret] = React.useState("");
+	const [detail, setDetail] = React.useState<{
+		subscription: MemberSubscription;
+		member: MemberBilling;
+	} | null>(null);
+	const [busy, setBusy] = React.useState(false);
+	const [error, setError] = React.useState<string | null>(null);
+	const [notice, setNotice] = React.useState<string | null>(null);
+	const refresh = React.useCallback(async () => {
+		const config = await postPaymentRoute<Configuration>("subscriptions/configuration/get");
+		setConfiguration(config);
+		if (config.ready) {
+			const [catalog, subscriptions] = await Promise.all([
+				postPaymentRoute<{ items: SubscriptionPlan[] }>("subscriptions/plans/list"),
+				postPaymentRoute<{ items: MemberSubscription[]; nextCursor?: string }>(
+					"subscriptions/list",
+				),
+			]);
+			setPlans(catalog.items);
+			setMembers(subscriptions.items);
+			setCursor(subscriptions.nextCursor);
+		}
+	}, []);
+	React.useEffect(() => {
+		void refresh().catch((cause) => setError(message(cause)));
+	}, [refresh]);
+	async function run(action: () => Promise<void>) {
+		setBusy(true);
+		setError(null);
+		setNotice(null);
+		try {
+			await action();
+		} catch (cause) {
+			setError(message(cause));
+		} finally {
+			setBusy(false);
+		}
+	}
+	function edit(plan?: SubscriptionPlan) {
+		setForm(
+			plan
+				? {
+						code: plan.code,
+						name: plan.name,
+						enabled: plan.enabled,
+						expectedVersion: plan.version,
+						entitlements: plan.entitlements,
+						monthlyPriceId:
+							plan.prices.find((price) => price.enabled && price.interval === "month")?.id ?? null,
+						yearlyPriceId:
+							plan.prices.find((price) => price.enabled && price.interval === "year")?.id ?? null,
+					}
+				: { ...emptyPlan },
+		);
+		setFeatures(
+			Object.entries(plan?.entitlements ?? {}).map(([key, value]) => ({
+				key,
+				kind: typeof value === "boolean" ? "boolean" : "number",
+				value: String(value),
+			})),
+		);
+	}
+	const savePlan = async () => {
+		const entitlements: Record<string, boolean | number> = {};
+		for (const feature of features) {
+			if (Object.hasOwn(entitlements, feature.key))
+				throw new Error("Entitlement keys must be unique.");
+			if (
+				feature.kind === "number" &&
+				(!feature.value.trim() ||
+					!Number.isFinite(Number(feature.value)) ||
+					Number(feature.value) < 0)
+			) {
+				throw new Error("Enter a non-negative number for each limit.");
+			}
+			entitlements[feature.key] =
+				feature.kind === "boolean" ? feature.value === "true" : Number(feature.value);
+		}
+		const result = await postPaymentRoute<{ plan: SubscriptionPlan }>("subscriptions/plans/save", {
+			...form,
+			entitlements,
+		});
+		await refresh();
+		edit(result.plan);
+		setNotice("Plan saved. Existing subscriptions retain their price bindings.");
+	};
+	const updateFeature = (index: number, values: Partial<Feature>) =>
+		setFeatures((current) =>
+			current.map((feature, position) =>
+				position === index ? { ...feature, ...values } : feature,
+			),
+		);
+	const openDetail = async (subscriptionId: string, sync = false) => {
+		setDetail(
+			await postPaymentRoute(sync ? "subscriptions/sync" : "subscriptions/get", { subscriptionId }),
+		);
+		if (sync) {
+			await refresh();
+			setNotice("Subscription synchronized with Stripe.");
+		}
+	};
+	return (
+		<div className="space-y-8">
+			<header>
+				<h1 className="text-2xl font-semibold">Subscriptions</h1>
+				<p className="mt-2 text-sm text-kumo-subtle">
+					Bind Stripe prices, configure plan entitlements, and inspect paid membership periods.
+				</p>
+				<a href="/_dineway/admin/payments" className="mt-2 inline-block text-sm underline">
+					Stripe account settings
+				</a>
+			</header>
+			{error && (
+				<p role="alert" className="rounded-lg bg-kumo-danger/10 p-3 text-sm text-kumo-danger">
+					{error}
+				</p>
+			)}
+			{notice && (
+				<p role="status" className="rounded-lg bg-kumo-success/10 p-3 text-sm">
+					{notice}
+				</p>
+			)}
+			{!configuration ? (
+				error ? (
+					<button className={buttonClass} disabled={busy} onClick={() => void run(refresh)}>
+						Retry configuration
+					</button>
+				) : (
+					<p>Loading subscription configuration…</p>
+				)
+			) : (
+				<>
+					<section className="space-y-4 rounded-xl border border-kumo-line p-5">
+						<h2 className="text-lg font-semibold">Subscription webhook</h2>
+						<p className="text-sm">
+							Application: {configuration.namespace} · {configuration.mode} ·{" "}
+							{configuration.ready ? "Ready" : "Configuration required"}
+						</p>
+						<label className="block text-sm">
+							Endpoint
+							<input className={inputClass} readOnly value={configuration.webhookUrl} />
+						</label>
+						<p className="text-sm text-kumo-subtle">
+							Create a Stripe webhook for this endpoint using the subscription events in the Payment
+							documentation. Its signing secret is separate from other payment webhooks.
+						</p>
+						<form
+							className="flex flex-wrap items-end gap-3"
+							onSubmit={(event) => {
+								event.preventDefault();
+								void run(async () => {
+									setConfiguration(
+										await postPaymentRoute<Configuration>("subscriptions/configuration/update", {
+											webhookSecret,
+										}),
+									);
+									setWebhookSecret("");
+									await refresh();
+									setNotice("Subscription webhook secret saved.");
+								});
+							}}
+						>
+							<label className="min-w-64 flex-1 text-sm">
+								Signing secret
+								<input
+									type="password"
+									autoComplete="new-password"
+									required
+									className={inputClass}
+									value={webhookSecret}
+									placeholder={
+										configuration.webhookSecret
+											? "Leave unchanged unless rotating the secret"
+											: "whsec_…"
+									}
+									onChange={(event) => setWebhookSecret(event.target.value)}
+								/>
+							</label>
+							<button className={buttonClass} disabled={busy || !webhookSecret}>
+								Save secret
+							</button>
+						</form>
+						{!configuration.ready && (
+							<p className="text-sm text-kumo-subtle">
+								Verify the Stripe account and save this webhook secret to manage subscription plans.
+							</p>
+						)}
+					</section>
+					{configuration.ready && (
+						<>
+							<section className="space-y-4">
+								<div className="flex items-center justify-between">
+									<h2 className="text-lg font-semibold">Plans</h2>
+									<button className={buttonClass} onClick={() => edit()} disabled={busy}>
+										New plan
+									</button>
+								</div>
+								{plans.length === 0 && (
+									<p className="text-sm text-kumo-subtle">
+										No plans yet. Bind an existing Stripe price below.
+									</p>
+								)}
+								<div className="grid gap-3 md:grid-cols-2">
+									{plans.map((plan) => (
+										<button
+											key={plan.code}
+											className="rounded-lg border border-kumo-line p-4 text-left"
+											onClick={() => edit(plan)}
+											disabled={busy}
+										>
+											<strong>{plan.name}</strong>
+											<span className="ml-2 text-xs">{plan.enabled ? "Enabled" : "Archived"}</span>
+											<p className="text-sm text-kumo-subtle">{plan.code}</p>
+											{plan.prices
+												.filter((price) => price.enabled)
+												.map((price) => (
+													<p key={price.id} className="text-sm">
+														{formatSubscriptionPrice(price.amount, price.currency)} /{" "}
+														{price.interval}
+													</p>
+												))}
+										</button>
+									))}
+								</div>
+								<form
+									className="space-y-4 rounded-xl border border-kumo-line p-5"
+									onSubmit={(event) => {
+										event.preventDefault();
+										void run(savePlan);
+									}}
+								>
+									<h3 className="font-semibold">
+										{form.expectedVersion ? "Edit plan" : "Create plan"}
+									</h3>
+									<fieldset disabled={busy} className="grid gap-4 md:grid-cols-2">
+										<label className="text-sm">
+											Plan code
+											<input
+												required
+												readOnly={form.expectedVersion > 0}
+												className={inputClass}
+												value={form.code}
+												onChange={(event) => setForm({ ...form, code: event.target.value })}
+												placeholder="pro"
+											/>
+										</label>
+										<label className="text-sm">
+											Name
+											<input
+												required
+												className={inputClass}
+												value={form.name}
+												onChange={(event) => setForm({ ...form, name: event.target.value })}
+											/>
+										</label>
+										<label className="text-sm">
+											Monthly Stripe price
+											<input
+												className={inputClass}
+												value={form.monthlyPriceId ?? ""}
+												placeholder="price_…"
+												onChange={(event) =>
+													setForm({ ...form, monthlyPriceId: event.target.value || null })
+												}
+											/>
+										</label>
+										<label className="text-sm">
+											Yearly Stripe price
+											<input
+												className={inputClass}
+												value={form.yearlyPriceId ?? ""}
+												placeholder="price_…"
+												onChange={(event) =>
+													setForm({ ...form, yearlyPriceId: event.target.value || null })
+												}
+											/>
+										</label>
+										<label className="flex items-center gap-2 text-sm">
+											<input
+												type="checkbox"
+												checked={form.enabled}
+												onChange={(event) => setForm({ ...form, enabled: event.target.checked })}
+											/>{" "}
+											Available for new subscriptions
+										</label>
+									</fieldset>
+									<div className="space-y-3">
+										<h4 className="text-sm font-semibold">Entitlements</h4>
+										{features.map((feature, index) => (
+											<div key={index} className="flex flex-wrap gap-2">
+												<input
+													aria-label="Entitlement key"
+													className={inputClass + " min-w-40 flex-1"}
+													value={feature.key}
+													disabled={busy}
+													placeholder="reports.full"
+													onChange={(event) => updateFeature(index, { key: event.target.value })}
+												/>
+												<select
+													aria-label="Entitlement type"
+													className={buttonClass}
+													value={feature.kind}
+													disabled={busy}
+													onChange={(event) =>
+														updateFeature(index, {
+															kind: event.target.value === "boolean" ? "boolean" : "number",
+															value: event.target.value === "boolean" ? "true" : "0",
+														})
+													}
+												>
+													<option value="boolean">Feature</option>
+													<option value="number">Limit</option>
+												</select>
+												{feature.kind === "boolean" ? (
+													<select
+														aria-label="Feature access"
+														className={buttonClass}
+														value={feature.value}
+														disabled={busy}
+														onChange={(event) =>
+															updateFeature(index, { value: event.target.value })
+														}
+													>
+														<option value="true">Enabled</option>
+														<option value="false">Disabled</option>
+													</select>
+												) : (
+													<input
+														aria-label="Entitlement limit"
+														type="number"
+														min="0"
+														step="any"
+														className={buttonClass + " w-28"}
+														value={feature.value}
+														disabled={busy}
+														onChange={(event) =>
+															updateFeature(index, { value: event.target.value })
+														}
+													/>
+												)}
+												<button
+													type="button"
+													className={buttonClass}
+													disabled={busy}
+													onClick={() =>
+														setFeatures(features.filter((_, position) => position !== index))
+													}
+												>
+													Remove
+												</button>
+											</div>
+										))}
+										<button
+											type="button"
+											className={buttonClass}
+											disabled={busy}
+											onClick={() =>
+												setFeatures([...features, { key: "", kind: "boolean", value: "true" }])
+											}
+										>
+											Add entitlement
+										</button>
+									</div>
+									<button className={buttonClass} disabled={busy}>
+										{busy ? "Saving…" : "Verify prices and save plan"}
+									</button>
+								</form>
+							</section>
+							<section className="space-y-4">
+								<h2 className="text-lg font-semibold">Member subscriptions</h2>
+								<p className="text-sm text-kumo-subtle">
+									Failed renewals keep access until the end of the paid period. Cancellation takes
+									effect at period end.
+								</p>
+								<div className="overflow-x-auto">
+									<table className="w-full text-left text-sm">
+										<thead>
+											<tr>
+												<th className="p-2">Member</th>
+												<th className="p-2">Plan</th>
+												<th className="p-2">Payment status</th>
+												<th className="p-2">Last synchronized</th>
+												<th />
+											</tr>
+										</thead>
+										<tbody>
+											{members.map((member) => (
+												<tr key={member.id} className="border-t border-kumo-line">
+													<td className="p-2">{member.userId}</td>
+													<td className="p-2">{member.planCode}</td>
+													<td className="p-2">{member.status}</td>
+													<td className="p-2">
+														{new Date(member.verifiedAt).toLocaleString()}
+														{member.lastError && " · Retry required"}
+													</td>
+													<td className="p-2">
+														<button
+															className={buttonClass}
+															disabled={busy}
+															onClick={() => void run(() => openDetail(member.id))}
+														>
+															View
+														</button>
+													</td>
+												</tr>
+											))}
+										</tbody>
+									</table>
+								</div>
+								{members.length === 0 && (
+									<p className="text-sm text-kumo-subtle">No subscriptions have been recorded.</p>
+								)}
+								{cursor && (
+									<button
+										className={buttonClass}
+										disabled={busy}
+										onClick={() =>
+											void run(async () => {
+												const page = await postPaymentRoute<{
+													items: MemberSubscription[];
+													nextCursor?: string;
+												}>("subscriptions/list", { cursor });
+												setMembers([...members, ...page.items]);
+												setCursor(page.nextCursor);
+											})
+										}
+									>
+										Load more
+									</button>
+								)}
+								{detail && (
+									<div className="space-y-3 rounded-xl border border-kumo-line p-5">
+										<h3 className="font-semibold">{detail.subscription.id}</h3>
+										<dl className="grid gap-2 text-sm">
+											<dt>Member</dt>
+											<dd>{detail.subscription.userId}</dd>
+											<dt>Paid access until</dt>
+											<dd>
+												{detail.member.paidThrough
+													? new Date(detail.member.paidThrough * 1000).toLocaleString()
+													: "No current paid period"}
+											</dd>
+											<dt>Cancellation</dt>
+											<dd>
+												{detail.subscription.cancelAtPeriodEnd
+													? "At period end: " +
+														new Date(detail.subscription.periodEnd * 1000).toLocaleString()
+													: "Not scheduled"}
+											</dd>
+											<dt>Last synchronization</dt>
+											<dd>
+												{new Date(detail.subscription.verifiedAt).toLocaleString()}{" "}
+												{detail.subscription.lastError}
+											</dd>
+											<dt>Effective entitlements</dt>
+											<dd>
+												<pre className="overflow-auto">
+													{JSON.stringify(detail.member.entitlements, null, 2)}
+												</pre>
+											</dd>
+										</dl>
+										<button
+											className={buttonClass}
+											disabled={busy}
+											onClick={() => void run(() => openDetail(detail.subscription.id, true))}
+										>
+											Synchronize with Stripe
+										</button>
+									</div>
+								)}
+							</section>
+						</>
+					)}
+				</>
+			)}
+		</div>
+	);
+}
+function message(value: unknown): string {
+	return value instanceof Error ? value.message : "Subscription request failed";
+}