@dineway-ai/plugin-payment 0.2.5 → 0.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dineway-ai/plugin-payment",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "Provider-neutral payment infrastructure and Stripe integration for Dineway plugins",
   "type": "module",
   "publishConfig": {
@@ -11,6 +11,7 @@
     ".": "./src/index.ts",
     "./admin": "./src/admin.tsx",
     "./configuration": "./src/configuration/index.ts",
+    "./database": "./src/database/index.ts",
     "./routes": "./src/routes/index.ts",
     "./stripe": "./src/stripe/index.ts",
     "./types": "./src/types.ts",
@@ -29,7 +30,7 @@
   "license": "MIT",
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
-    "dineway": "^0.2.29"
+    "dineway": "^0.2.30"
   },
   "dependencies": {
     "@stripe/stripe-js": "9.9.0",

package/src/admin/subscription-price-picker.tsx

@@ -0,0 +1,264 @@
+import * as React from "react";
+
+import { formatSubscriptionPrice } from "../subscriptions/format.js";
+import type {
+	SubscriptionCatalogPage,
+	SubscriptionPrice,
+	SubscriptionProduct,
+	StripeSubscriptionPrice,
+} from "../subscriptions/types.js";
+import { postPaymentRoute } from "./api.js";
+
+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";
+type Selection = { monthlyPriceId: string | null; yearlyPriceId: string | null };
+
+function useCatalog<T extends { id: string }>(
+	route: string,
+	productId: string | undefined,
+	revision: number,
+) {
+	const [state, setState] = React.useState<
+		SubscriptionCatalogPage<T> & { loading: boolean; error: string | null }
+	>({ items: [], loading: true, error: null });
+	const generation = React.useRef(0);
+	const request = React.useCallback(
+		(cursor?: string) =>
+			postPaymentRoute<SubscriptionCatalogPage<T>>(route, {
+				...(productId ? { productId } : {}),
+				cursor,
+			}),
+		[route, productId],
+	);
+	React.useEffect(() => {
+		const current = ++generation.current;
+		setState({ items: [], loading: true, error: null });
+		void request().then(
+			(page) => {
+				if (generation.current === current) setState({ ...page, loading: false, error: null });
+				return undefined;
+			},
+			(cause) => {
+				if (generation.current === current)
+					setState({ items: [], loading: false, error: errorMessage(cause) });
+			},
+		);
+		return () => {
+			generation.current++;
+		};
+	}, [request, revision]);
+	async function loadMore() {
+		if (state.loading || !state.nextCursor) return;
+		const current = generation.current;
+		setState((previous) => ({ ...previous, loading: true, error: null }));
+		try {
+			const page = await request(state.nextCursor);
+			if (generation.current === current)
+				setState((previous) => ({
+					items: [
+						...new Map([...previous.items, ...page.items].map((item) => [item.id, item])).values(),
+					],
+					nextCursor: page.nextCursor,
+					loading: false,
+					error: null,
+				}));
+		} catch (cause) {
+			if (generation.current === current)
+				setState((previous) => ({ ...previous, loading: false, error: errorMessage(cause) }));
+		}
+	}
+	return { ...state, loadMore };
+}
+function errorMessage(cause: unknown) {
+	return cause instanceof Error
+		? cause.message
+		: "Could not load the Stripe catalog. Try refreshing.";
+}
+function priceLabel(price: SubscriptionPrice & { nickname?: string | null }) {
+	return `${formatSubscriptionPrice(price.amount, price.currency)} ${price.currency.toUpperCase()} / ${price.interval}${price.nickname ? ` · ${price.nickname}` : ""} · ${price.id}`;
+}
+
+export function SubscriptionPricePicker({
+	value,
+	boundPrices,
+	onChange,
+}: {
+	value: Selection;
+	boundPrices: SubscriptionPrice[];
+	onChange: (value: Selection) => void;
+}) {
+	const boundProduct = boundPrices.find(
+		(price) => price.id === value.monthlyPriceId || price.id === value.yearlyPriceId,
+	)?.productId;
+	const [productId, setProductId] = React.useState(boundProduct ?? "");
+	const [revision, setRevision] = React.useState(0);
+	const products = useCatalog<SubscriptionProduct>(
+		"subscriptions/products/list",
+		undefined,
+		revision,
+	);
+	return (
+		<div className="space-y-3">
+			<div className="flex flex-wrap items-end gap-3">
+				<label className="w-full text-sm">
+					Stripe product
+					<select
+						className={inputClass}
+						value={productId}
+						disabled={products.loading}
+						onChange={(event) => {
+							setProductId(event.target.value);
+							onChange({ monthlyPriceId: null, yearlyPriceId: null });
+						}}
+					>
+						<option value="">
+							{products.loading ? "Loading Stripe products…" : "Choose a product"}
+						</option>
+						{productId && !products.items.some((product) => product.id === productId) && (
+							<option value={productId}>{productId} · saved selection</option>
+						)}
+						{products.items.map((product) => (
+							<option key={product.id} value={product.id}>
+								{product.name} · {product.id}
+							</option>
+						))}
+					</select>
+				</label>
+				<button
+					type="button"
+					className={buttonClass}
+					disabled={products.loading}
+					onClick={() => setRevision((current) => current + 1)}
+				>
+					Refresh Stripe catalog
+				</button>
+				{products.nextCursor && (
+					<button
+						type="button"
+						className={buttonClass}
+						disabled={products.loading}
+						onClick={() => void products.loadMore()}
+					>
+						Load more products
+					</button>
+				)}
+			</div>
+			<p className="text-sm text-kumo-subtle">
+				Select prices from the connected Stripe account and environment. Amounts are read from
+				Stripe and verified again when you save.
+			</p>
+			{products.error && (
+				<p role="alert" className="text-sm text-kumo-danger">
+					{products.error} Refresh the Stripe catalog to retry.
+				</p>
+			)}
+			{!products.loading && !products.error && products.items.length === 0 && (
+				<p className="text-sm text-kumo-subtle">
+					No active products found on this page. Create a product in this Stripe environment, then
+					refresh.
+				</p>
+			)}
+			{productId && (
+				<ProductPrices
+					key={productId}
+					productId={productId}
+					revision={revision}
+					value={value}
+					boundPrices={boundPrices}
+					onChange={onChange}
+				/>
+			)}
+		</div>
+	);
+}
+
+function ProductPrices({
+	productId,
+	revision,
+	value,
+	boundPrices,
+	onChange,
+}: {
+	productId: string;
+	revision: number;
+	value: Selection;
+	boundPrices: SubscriptionPrice[];
+	onChange: (value: Selection) => void;
+}) {
+	const prices = useCatalog<StripeSubscriptionPrice>(
+		"subscriptions/prices/list",
+		productId,
+		revision,
+	);
+	const knownPrices = [...prices.items, ...boundPrices];
+	return (
+		<div className="space-y-3">
+			<div className="grid gap-4 md:grid-cols-2">
+				{(["month", "year"] as const).map((interval) => {
+					const field = interval === "month" ? "monthlyPriceId" : "yearlyPriceId";
+					const otherField = interval === "month" ? "yearlyPriceId" : "monthlyPriceId";
+					const selected = value[field];
+					const other = knownPrices.find((price) => price.id === value[otherField]);
+					const saved = boundPrices.find((price) => price.id === selected);
+					return (
+						<label key={interval} className="text-sm">
+							{interval === "month" ? "Monthly Stripe price" : "Yearly Stripe price"}
+							<select
+								className={inputClass}
+								value={selected ?? ""}
+								disabled={prices.loading}
+								onChange={(event) => onChange({ ...value, [field]: event.target.value || null })}
+							>
+								<option value="">
+									{prices.loading ? "Loading Stripe prices…" : "Not offered"}
+								</option>
+								{selected && !prices.items.some((price) => price.id === selected) && (
+									<option value={selected} disabled>
+										{saved ? priceLabel(saved) : selected} · saved binding (not in loaded results)
+									</option>
+								)}
+								{prices.items
+									.filter((price) => price.interval === interval)
+									.map((price) => (
+										<option
+											key={price.id}
+											value={price.id}
+											disabled={Boolean(other && price.currency !== other.currency)}
+										>
+											{priceLabel(price)}
+											{other && price.currency !== other.currency ? " · different currency" : ""}
+										</option>
+									))}
+							</select>
+						</label>
+					);
+				})}
+			</div>
+			<p className="text-sm text-kumo-subtle">
+				Only active fixed monthly or yearly prices are available. Both prices must use the same
+				currency. Keep an interval as “Not offered” if you do not sell it.
+			</p>
+			{prices.error && (
+				<p role="alert" className="text-sm text-kumo-danger">
+					{prices.error} Refresh the Stripe catalog to retry.
+				</p>
+			)}
+			{!prices.loading && !prices.error && prices.items.length === 0 && (
+				<p className="text-sm text-kumo-subtle">
+					No supported recurring prices found on this page. Load more prices, or create a fixed
+					monthly or yearly price in Stripe and refresh.
+				</p>
+			)}
+			{prices.nextCursor && (
+				<button
+					type="button"
+					className={buttonClass}
+					disabled={prices.loading}
+					onClick={() => void prices.loadMore()}
+				>
+					Load more prices
+				</button>
+			)}
+		</div>
+	);
+}

package/src/admin/subscriptions.tsx

@@ -5,12 +5,18 @@ import type { getSubscriptionConfiguration } from "../subscriptions/runtime.js";
 import type {
 	MemberBilling,
 	MemberSubscription,
+	BillingSubject,
+	SubscriptionPurchase,
+	SubscriptionSnapshot,
 	SaveSubscriptionPlan,
 	SubscriptionPlan,
 } from "../subscriptions/types.js";
 import { postPaymentRoute } from "./api.js";
+import { SubscriptionPricePicker } from "./subscription-price-picker.js";
 
 type Configuration = Awaited<ReturnType<typeof getSubscriptionConfiguration>>;
+type AdminSubscription = MemberSubscription & { subject: BillingSubject | null };
+type AdminPurchase = SubscriptionPurchase & { subject: BillingSubject | null };
 type Feature = { key: string; kind: "boolean" | "number"; value: string };
 const emptyPlan: SaveSubscriptionPlan = {
 	code: "",
@@ -27,15 +33,18 @@ const buttonClass = "rounded-lg border border-kumo-line px-3 py-2 text-sm disabl
 export function PaymentSubscriptionsPage() {
 	const [configuration, setConfiguration] = React.useState<Configuration | null>(null);
 	const [plans, setPlans] = React.useState<SubscriptionPlan[]>([]);
-	const [members, setMembers] = React.useState<MemberSubscription[]>([]);
+	const [members, setMembers] = React.useState<AdminSubscription[]>([]);
+	const [purchases, setPurchases] = React.useState<AdminPurchase[]>([]);
+	const [purchaseCursor, setPurchaseCursor] = React.useState<string>();
 	const [cursor, setCursor] = React.useState<string>();
 	const [form, setForm] = React.useState<SaveSubscriptionPlan>({ ...emptyPlan });
+	const [editorRevision, setEditorRevision] = React.useState(0);
+	const [boundPrices, setBoundPrices] = React.useState<SubscriptionPlan["prices"]>([]);
 	const [features, setFeatures] = React.useState<Feature[]>([]);
 	const [webhookSecret, setWebhookSecret] = React.useState("");
-	const [detail, setDetail] = React.useState<{
-		subscription: MemberSubscription;
-		member: MemberBilling;
-	} | null>(null);
+	const [detail, setDetail] = React.useState<
+		(SubscriptionSnapshot & { 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);
@@ -43,15 +52,18 @@ export function PaymentSubscriptionsPage() {
 		const config = await postPaymentRoute<Configuration>("subscriptions/configuration/get");
 		setConfiguration(config);
 		if (config.ready) {
-			const [catalog, subscriptions] = await Promise.all([
+			const [catalog, subscriptions, purchasePage] = await Promise.all([
 				postPaymentRoute<{ items: SubscriptionPlan[] }>("subscriptions/plans/list"),
-				postPaymentRoute<{ items: MemberSubscription[]; nextCursor?: string }>(
-					"subscriptions/list",
+				postPaymentRoute<{ items: AdminSubscription[]; nextCursor?: string }>("subscriptions/list"),
+				postPaymentRoute<{ items: AdminPurchase[]; nextCursor?: string }>(
+					"subscriptions/purchases/list",
 				),
 			]);
 			setPlans(catalog.items);
 			setMembers(subscriptions.items);
 			setCursor(subscriptions.nextCursor);
+			setPurchases(purchasePage.items);
+			setPurchaseCursor(purchasePage.nextCursor);
 		}
 	}, []);
 	React.useEffect(() => {
@@ -70,6 +82,8 @@ export function PaymentSubscriptionsPage() {
 		}
 	}
 	function edit(plan?: SubscriptionPlan) {
+		setEditorRevision((current) => current + 1);
+		setBoundPrices(plan?.prices ?? []);
 		setForm(
 			plan
 				? {
@@ -265,49 +279,35 @@ export function PaymentSubscriptionsPage() {
 									<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>
+									<fieldset disabled={busy} className="space-y-4">
+										<div 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>
+										</div>
+										<SubscriptionPricePicker
+											key={editorRevision}
+											value={form}
+											boundPrices={boundPrices}
+											onChange={(prices) => setForm((current) => ({ ...current, ...prices }))}
+										/>
 										<label className="flex items-center gap-2 text-sm">
 											<input
 												type="checkbox"
@@ -400,7 +400,100 @@ export function PaymentSubscriptionsPage() {
 								</form>
 							</section>
 							<section className="space-y-4">
-								<h2 className="text-lg font-semibold">Member subscriptions</h2>
+								<h2 className="text-lg font-semibold">Purchases</h2>
+								<button
+									className={buttonClass}
+									disabled={busy}
+									onClick={() =>
+										void run(async () => {
+											const result = await postPaymentRoute<{ processed: number; failed: number }>(
+												"subscriptions/reconcile",
+											);
+											await refresh();
+											setNotice(
+												`Processed ${result.processed}; ${result.failed} require retry or review.`,
+											);
+										})
+									}
+								>
+									Retry pending synchronization
+								</button>
+								<div className="overflow-x-auto">
+									<table className="w-full text-left text-sm">
+										<thead>
+											<tr>
+												<th className="p-2">Billing subject</th>
+												<th className="p-2">Purchase</th>
+												<th className="p-2">Terms</th>
+												<th className="p-2">Status</th>
+											</tr>
+										</thead>
+										<tbody>
+											{purchases.map((purchase) => (
+												<tr key={purchase.reference} className="border-t border-kumo-line">
+													<td className="p-2">
+														{purchase.subject
+															? `${purchase.subject.realm}: ${purchase.subject.id}`
+															: purchase.userId}
+													</td>
+													<td className="p-2">
+														{purchase.reference}
+														<br />
+														{purchase.contract.pricing.kind}
+													</td>
+													<td className="p-2">
+														{formatSubscriptionPrice(
+															purchase.contract.amount,
+															purchase.contract.currency,
+														)}{" "}
+														every {purchase.contract.intervalCount} {purchase.contract.interval}
+														<br />
+														First invoice credit:{" "}
+														{formatSubscriptionPrice(
+															purchase.contract.firstPeriodCredit ?? 0,
+															purchase.contract.currency,
+														)}
+													</td>
+													<td className="p-2">
+														{purchase.closed
+															? "Closed"
+															: purchase.subscriptionId
+																? "Subscription recorded"
+																: "Awaiting confirmation"}
+														<br />
+														{purchase.cancelMode && `Cancellation: ${purchase.cancelMode}`}
+														<br />
+														{purchase.lastError}
+													</td>
+												</tr>
+											))}
+										</tbody>
+									</table>
+								</div>
+								{!purchases.length && (
+									<p className="text-sm text-kumo-subtle">No purchases recorded.</p>
+								)}
+								{purchaseCursor && (
+									<button
+										className={buttonClass}
+										disabled={busy}
+										onClick={() =>
+											void run(async () => {
+												const page = await postPaymentRoute<{
+													items: AdminPurchase[];
+													nextCursor?: string;
+												}>("subscriptions/purchases/list", { cursor: purchaseCursor });
+												setPurchases([...purchases, ...page.items]);
+												setPurchaseCursor(page.nextCursor);
+											})
+										}
+									>
+										Load more purchases
+									</button>
+								)}
+							</section>
+							<section className="space-y-4">
+								<h2 className="text-lg font-semibold">Subscriptions and funding</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.
@@ -419,8 +512,18 @@ export function PaymentSubscriptionsPage() {
 										<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.subject
+															? `${member.subject.realm}: ${member.subject.id}`
+															: member.userId}
+													</td>
+													<td className="p-2">
+														{member.planCode || "Dynamic purchase"}
+														<br />
+														<span className="text-xs text-kumo-subtle">
+															{member.purchaseReference}
+														</span>
+													</td>
 													<td className="p-2">{member.status}</td>
 													<td className="p-2">
 														{new Date(member.verifiedAt).toLocaleString()}
@@ -450,7 +553,7 @@ export function PaymentSubscriptionsPage() {
 										onClick={() =>
 											void run(async () => {
 												const page = await postPaymentRoute<{
-													items: MemberSubscription[];
+													items: AdminSubscription[];
 													nextCursor?: string;
 												}>("subscriptions/list", { cursor });
 												setMembers([...members, ...page.items]);
@@ -466,11 +569,31 @@ export function PaymentSubscriptionsPage() {
 										<h3 className="font-semibold">{detail.subscription.id}</h3>
 										<dl className="grid gap-2 text-sm">
 											<dt>Member</dt>
-											<dd>{detail.subscription.userId}</dd>
+											<dd>
+												{detail.subject
+													? `${detail.subject.realm}: ${detail.subject.id} · ${detail.subject.email}`
+													: detail.subscription.userId}
+											</dd>
+											<dt>Purchase reference</dt>
+											<dd>{detail.purchase?.reference ?? "Catalogue subscription"}</dd>
 											<dt>Paid access until</dt>
 											<dd>
-												{detail.member.paidThrough
-													? new Date(detail.member.paidThrough * 1000).toLocaleString()
+												{detail.periods.some(
+													(period) =>
+														period.eligible &&
+														period.startsAt * 1000 <= Date.now() &&
+														period.endsAt * 1000 > Date.now(),
+												)
+													? new Date(
+															Math.max(
+																...detail.periods
+																	.filter(
+																		(period) =>
+																			period.eligible && period.startsAt * 1000 <= Date.now(),
+																	)
+																	.map((period) => period.endsAt),
+															) * 1000,
+														).toLocaleString()
 													: "No current paid period"}
 											</dd>
 											<dt>Cancellation</dt>
@@ -478,7 +601,9 @@ export function PaymentSubscriptionsPage() {
 												{detail.subscription.cancelAtPeriodEnd
 													? "At period end: " +
 														new Date(detail.subscription.periodEnd * 1000).toLocaleString()
-													: "Not scheduled"}
+													: detail.subscription.status === "canceled"
+														? "Canceled"
+														: "Not scheduled"}
 											</dd>
 											<dt>Last synchronization</dt>
 											<dd>

package/src/configuration/repository.ts

@@ -1,13 +1,17 @@
 import type { Database } from "dineway";
 import type { Kysely, Selectable, Transaction, Updateable } from "kysely";
 
+import type { PaymentDatabase, PaymentTables } from "../database/types.js";
 import type { PaymentStripeSettings, UpdatePaymentStripeSettings } from "./types.js";
 
 type PaymentDb = Kysely<Database> | Transaction<Database>;
-type SettingsRow = Selectable<Database["payment_stripe_settings"]>;
+type SettingsRow = Selectable<PaymentDatabase["payment_stripe_settings"]>;
 
 export class PaymentStripeConfigurationRepository {
-	constructor(private readonly db: PaymentDb) {}
+	private readonly db: Kysely<PaymentDatabase> | Transaction<PaymentDatabase>;
+	constructor(db: PaymentDb) {
+		this.db = db.withTables<PaymentTables>();
+	}
 
 	async ensureDefaults(): Promise<PaymentStripeSettings> {
 		await this.db
@@ -32,7 +36,7 @@ export class PaymentStripeConfigurationRepository {
 		expectedVersion: number,
 		input: UpdatePaymentStripeSettings,
 	): Promise<PaymentStripeSettings> {
-		const update: Updateable<Database["payment_stripe_settings"]> = {
+		const update: Updateable<PaymentDatabase["payment_stripe_settings"]> = {
 			...(input.mode === undefined ? {} : { mode: input.mode }),
 			...(input.publishableKey === undefined ? {} : { publishable_key: input.publishableKey }),
 			...(input.configurationStatus === undefined

package/src/database/index.ts

@@ -0,0 +1,12 @@
+import type { PluginMigration } from "dineway";
+
+import * as configuration from "./migrations/001_stripe_configuration.js";
+import * as subscriptions from "./migrations/002_subscriptions.js";
+import * as purchases from "./migrations/003_purchases.js";
+
+export const paymentMigrations = {
+	"001_stripe_configuration": configuration,
+	"002_subscriptions": subscriptions,
+	"003_purchases": purchases,
+} satisfies Record<string, PluginMigration>;
+export type { PaymentDatabase, PaymentTables } from "./types.js";