@dineway-ai/plugin-payment 0.2.4 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dineway-ai/plugin-payment",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Provider-neutral payment infrastructure and Stripe integration for Dineway plugins",
   "type": "module",
   "publishConfig": {

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

@@ -9,6 +9,7 @@ import type {
 	SubscriptionPlan,
 } from "../subscriptions/types.js";
 import { postPaymentRoute } from "./api.js";
+import { SubscriptionPricePicker } from "./subscription-price-picker.js";
 
 type Configuration = Awaited<ReturnType<typeof getSubscriptionConfiguration>>;
 type Feature = { key: string; kind: "boolean" | "number"; value: string };
@@ -30,6 +31,8 @@ export function PaymentSubscriptionsPage() {
 	const [members, setMembers] = React.useState<MemberSubscription[]>([]);
 	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<{
@@ -70,6 +73,8 @@ export function PaymentSubscriptionsPage() {
 		}
 	}
 	function edit(plan?: SubscriptionPlan) {
+		setEditorRevision((current) => current + 1);
+		setBoundPrices(plan?.prices ?? []);
 		setForm(
 			plan
 				? {
@@ -265,49 +270,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"

package/src/subscriptions/projection.ts

@@ -16,10 +16,14 @@ export function recurringPrice(
 	requireActive = true,
 ): SubscriptionPrice {
 	const interval = price.recurring?.interval;
+	const product = typeof price.product === "string" ? null : price.product;
 	const productId = typeof price.product === "string" ? price.product : price.product.id;
 	if (
 		price.livemode !== (scope.mode === "live") ||
-		(requireActive && !price.active) ||
+		(requireActive &&
+			(!price.active ||
+				(product &&
+					(product.deleted || !product.active || product.livemode !== (scope.mode === "live"))))) ||
 		price.type !== "recurring" ||
 		!price.recurring ||
 		!["month", "year"].includes(interval ?? "") ||

package/src/subscriptions/routes.ts

@@ -12,6 +12,8 @@ import {
 	memberListSchema,
 	saveSubscriptionPlanSchema,
 	subscriptionIdSchema,
+	stripeProductListSchema,
+	stripePriceListSchema,
 } from "./schemas.js";
 import type { PaymentSubscriptionService } from "./service.js";
 import { SubscriptionError, type SubscriptionOptions } from "./types.js";
@@ -63,7 +65,7 @@ export function createSubscriptionRoutes(
 		"subscriptions/plans": {
 			methods: ["GET"],
 			public: true,
-			input: empty,
+			input: empty.default({}),
 			handler: async () => run(async () => ({ items: await (await service()).listPlans() })),
 		},
 		"subscriptions/checkout": privateRoute(checkoutSchema, "payments:manage_own", async (context) =>
@@ -95,6 +97,16 @@ export function createSubscriptionRoutes(
 		"subscriptions/plans/list": privateRoute(empty, "payments:manage", async () => ({
 			items: await (await service()).listPlans(true),
 		})),
+		"subscriptions/products/list": privateRoute(
+			stripeProductListSchema,
+			"payments:manage",
+			async (context) => (await service()).listStripeProducts(context.input),
+		),
+		"subscriptions/prices/list": privateRoute(
+			stripePriceListSchema,
+			"payments:manage",
+			async (context) => (await service()).listStripePrices(context.input),
+		),
 		"subscriptions/plans/save": privateRoute(
 			saveSubscriptionPlanSchema,
 			"payments:manage",

package/src/subscriptions/schemas.ts

@@ -99,3 +99,28 @@ export const memberListSchema = z
 export const subscriptionIdSchema = z
 	.object({ subscriptionId: z.string().regex(/^sub_[A-Za-z0-9]+$/) })
 	.strict();
+
+export const stripeProductListSchema = z
+	.object({
+		cursor: z
+			.string()
+			.regex(/^prod_[A-Za-z0-9]+$/)
+			.max(255)
+			.optional(),
+		limit: z.number().int().min(1).max(100).default(50),
+	})
+	.strict();
+export const stripePriceListSchema = z
+	.object({
+		productId: z
+			.string()
+			.regex(/^prod_[A-Za-z0-9]+$/)
+			.max(255),
+		cursor: z
+			.string()
+			.regex(/^price_[A-Za-z0-9]+$/)
+			.max(255)
+			.optional(),
+		limit: z.number().int().min(1).max(100).default(50),
+	})
+	.strict();

package/src/subscriptions/service.ts

@@ -12,7 +12,13 @@ import {
 	subscriptionProjection,
 } from "./projection.js";
 import { SubscriptionRepository, subscriptionScopeKey } from "./repository.js";
-import { checkoutSchema, portalSchema, saveSubscriptionPlanSchema } from "./schemas.js";
+import {
+	checkoutSchema,
+	portalSchema,
+	saveSubscriptionPlanSchema,
+	stripeProductListSchema,
+	stripePriceListSchema,
+} from "./schemas.js";
 import {
 	SubscriptionError,
 	type MemberBilling,
@@ -20,6 +26,10 @@ import {
 	type SubscriptionCheckoutInput,
 	type SubscriptionOptions,
 	type SubscriptionScope,
+	type SubscriptionCatalogInput,
+	type SubscriptionCatalogPage,
+	type SubscriptionProduct,
+	type StripeSubscriptionPrice,
 } from "./types.js";
 
 export interface SubscriptionServiceOptions {
@@ -90,6 +100,55 @@ export class PaymentSubscriptionService {
 					.filter((plan) => plan.enabled)
 					.map((plan) => ({ ...plan, prices: plan.prices.filter((price) => price.enabled) }));
 	}
+	async listStripeProducts(
+		input: SubscriptionCatalogInput = {},
+	): Promise<SubscriptionCatalogPage<SubscriptionProduct>> {
+		const { cursor, limit } = stripeProductListSchema.parse(input);
+		const page = await this.stripe.products.list({ active: true, limit, starting_after: cursor });
+		return {
+			items: page.data
+				.filter(
+					(product) => product.active && product.livemode === (this.options.scope.mode === "live"),
+				)
+				.map((product) => ({ id: product.id, name: product.name })),
+			nextCursor: page.has_more ? page.data.at(-1)?.id : undefined,
+		};
+	}
+	async listStripePrices(
+		input: SubscriptionCatalogInput & { productId: string },
+	): Promise<SubscriptionCatalogPage<StripeSubscriptionPrice>> {
+		const { productId, cursor, limit } = stripePriceListSchema.parse(input);
+		const product = await this.stripe.products.retrieve(productId);
+		if (
+			product.deleted ||
+			!product.active ||
+			product.livemode !== (this.options.scope.mode === "live")
+		) {
+			throw new SubscriptionError(
+				"INVALID_PRODUCT",
+				"Choose an active product from this Stripe environment",
+			);
+		}
+		const page = await this.stripe.prices.list({
+			product: productId,
+			active: true,
+			type: "recurring",
+			limit,
+			starting_after: cursor,
+		});
+		const items: StripeSubscriptionPrice[] = [];
+		for (const price of page.data) {
+			try {
+				const verified = recurringPrice(price, this.options.scope);
+				if (verified.productId === productId)
+					items.push({ ...verified, nickname: price.nickname ?? null });
+			} catch (error) {
+				if (!(error instanceof SubscriptionError) || error.code !== "INVALID_PRICE") throw error;
+			}
+		}
+		return { items, nextCursor: page.has_more ? page.data.at(-1)?.id : undefined };
+	}
+
 	async savePlan(input: SaveSubscriptionPlan) {
 		const parsed = saveSubscriptionPlanSchema.parse(input);
 		const allPlans = await this.repository.plans();
@@ -113,7 +172,7 @@ export class PaymentSubscriptionService {
 		] as const) {
 			if (!id) continue;
 			const price = recurringPrice(
-				await this.stripe.prices.retrieve(id),
+				await this.stripe.prices.retrieve(id, { expand: ["product"] }),
 				this.options.scope,
 				parsed.enabled,
 			);

package/src/subscriptions/types.ts

@@ -19,6 +19,21 @@ export interface SubscriptionPrice {
 	interval: SubscriptionInterval;
 	enabled: boolean;
 }
+export interface SubscriptionProduct {
+	id: string;
+	name: string;
+}
+export interface StripeSubscriptionPrice extends SubscriptionPrice {
+	nickname: string | null;
+}
+export interface SubscriptionCatalogPage<T> {
+	items: T[];
+	nextCursor?: string;
+}
+export interface SubscriptionCatalogInput {
+	cursor?: string;
+	limit?: number;
+}
 export interface SubscriptionPlan {
 	code: string;
 	name: string;