@86d-app/payments 0.0.3

package/src/admin/components/payments-admin.tsx

@@ -0,0 +1,521 @@
+"use client";
+
+import { useModuleClient } from "@86d-app/core/client";
+import { useState } from "react";
+import PaymentsAdminTemplate from "./payments-admin.mdx";
+
+interface PaymentIntent {
+	id: string;
+	providerIntentId?: string | null;
+	customerId?: string | null;
+	email?: string | null;
+	amount: number;
+	currency: string;
+	status: string;
+	orderId?: string | null;
+	createdAt: string;
+}
+
+function formatPrice(cents: number, currency = "USD"): string {
+	return new Intl.NumberFormat("en-US", {
+		style: "currency",
+		currency,
+	}).format(cents / 100);
+}
+
+function timeAgo(dateStr: string): string {
+	const diff = Date.now() - new Date(dateStr).getTime();
+	const mins = Math.floor(diff / 60000);
+	if (mins < 1) return "just now";
+	if (mins < 60) return `${mins}m ago`;
+	const hrs = Math.floor(mins / 60);
+	if (hrs < 24) return `${hrs}h ago`;
+	const days = Math.floor(hrs / 24);
+	return `${days}d ago`;
+}
+
+const INTENT_STATUS_COLORS: Record<string, string> = {
+	pending:
+		"bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400",
+	processing:
+		"bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
+	succeeded:
+		"bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400",
+	failed: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
+	cancelled: "bg-gray-100 text-gray-600 dark:bg-gray-900/30 dark:text-gray-400",
+	refunded:
+		"bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400",
+};
+
+const REFUND_STATUS_COLORS: Record<string, string> = {
+	pending:
+		"bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400",
+	succeeded:
+		"bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400",
+	failed: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
+};
+
+function usePaymentsAdminApi() {
+	const client = useModuleClient();
+	return {
+		listIntents: client.module("payments").admin["/admin/payments"],
+		getIntent: client.module("payments").admin["/admin/payments/:id"],
+		refundIntent: client.module("payments").admin["/admin/payments/:id/refund"],
+		listRefunds: client.module("payments").admin["/admin/payments/:id/refunds"],
+	};
+}
+
+function RefundModal({
+	intent,
+	onClose,
+	onSuccess,
+}: {
+	intent: PaymentIntent;
+	onClose: () => void;
+	onSuccess: () => void;
+}) {
+	const api = usePaymentsAdminApi();
+	const [amount, setAmount] = useState("");
+	const [reason, setReason] = useState("");
+	const [error, setError] = useState("");
+
+	const refundMutation = api.refundIntent.useMutation({
+		onSuccess: () => {
+			void api.listIntents.invalidate();
+			onSuccess();
+		},
+		onError: () => {
+			setError("Refund failed. Please try again.");
+		},
+	});
+
+	const handleSubmit = (e: React.FormEvent) => {
+		e.preventDefault();
+		setError("");
+
+		// biome-ignore lint/suspicious/noExplicitAny: building dynamic body for refund endpoint
+		const body: Record<string, any> = { params: { id: intent.id } };
+		if (reason) body.reason = reason;
+		if (amount) {
+			const parsed = Math.round(Number.parseFloat(amount) * 100);
+			if (Number.isNaN(parsed) || parsed <= 0) {
+				setError("Invalid amount");
+				return;
+			}
+			body.amount = parsed;
+		}
+		refundMutation.mutate(body);
+	};
+
+	const maxAmount = intent.amount / 100;
+
+	return (
+		<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+			<div className="w-full max-w-md rounded-xl border border-border bg-card shadow-xl">
+				<div className="flex items-center justify-between border-border border-b px-6 py-4">
+					<h2 className="font-semibold text-foreground text-lg">
+						Issue Refund
+					</h2>
+					<button
+						type="button"
+						onClick={onClose}
+						className="rounded-md p-1 text-muted-foreground hover:bg-muted"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="16"
+							height="16"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							strokeWidth="2"
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							aria-hidden="true"
+						>
+							<line x1="18" y1="6" x2="6" y2="18" />
+							<line x1="6" y1="6" x2="18" y2="18" />
+						</svg>
+					</button>
+				</div>
+
+				<div className="px-6 py-4">
+					<div className="mb-4 rounded-lg bg-muted/50 p-3 text-sm">
+						<div className="flex justify-between">
+							<span className="text-muted-foreground">Intent ID</span>
+							<span className="font-mono text-foreground text-xs">
+								{intent.id.slice(0, 8)}&hellip;
+							</span>
+						</div>
+						<div className="mt-1 flex justify-between">
+							<span className="text-muted-foreground">Original amount</span>
+							<span className="font-medium text-foreground">
+								{formatPrice(intent.amount, intent.currency)}
+							</span>
+						</div>
+					</div>
+
+					<form onSubmit={handleSubmit} className="space-y-4">
+						<div>
+							<label
+								htmlFor="refund-amount"
+								className="mb-1 block font-medium text-foreground text-sm"
+							>
+								Refund amount{" "}
+								<span className="font-normal text-muted-foreground">
+									(leave blank for full refund)
+								</span>
+							</label>
+							<div className="relative">
+								<span className="absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground text-sm">
+									$
+								</span>
+								<input
+									id="refund-amount"
+									type="number"
+									step="0.01"
+									min="0.01"
+									max={maxAmount}
+									value={amount}
+									onChange={(e) => setAmount(e.target.value)}
+									placeholder={String(maxAmount.toFixed(2))}
+									className="h-9 w-full rounded-md border border-border bg-background pr-3 pl-7 text-foreground text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+								/>
+							</div>
+						</div>
+
+						<div>
+							<label
+								htmlFor="refund-reason"
+								className="mb-1 block font-medium text-foreground text-sm"
+							>
+								Reason{" "}
+								<span className="font-normal text-muted-foreground">
+									(optional)
+								</span>
+							</label>
+							<input
+								id="refund-reason"
+								type="text"
+								value={reason}
+								onChange={(e) => setReason(e.target.value)}
+								placeholder="e.g. customer request, duplicate charge"
+								className="h-9 w-full rounded-md border border-border bg-background px-3 text-foreground text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+							/>
+						</div>
+
+						{error && (
+							<p className="rounded-md bg-red-50 px-3 py-2 text-red-600 text-sm dark:bg-red-900/20 dark:text-red-400">
+								{error}
+							</p>
+						)}
+
+						<div className="flex justify-end gap-2 pt-2">
+							<button
+								type="button"
+								onClick={onClose}
+								className="rounded-md border border-border px-4 py-2 text-foreground text-sm hover:bg-muted"
+							>
+								Cancel
+							</button>
+							<button
+								type="submit"
+								disabled={refundMutation.isPending}
+								className="rounded-md bg-destructive px-4 py-2 font-medium text-destructive-foreground text-sm hover:bg-destructive/90 disabled:opacity-50"
+							>
+								{refundMutation.isPending ? "Processing…" : "Issue refund"}
+							</button>
+						</div>
+					</form>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+function IntentsTab() {
+	const api = usePaymentsAdminApi();
+	const [page, setPage] = useState(1);
+	const [statusFilter, setStatusFilter] = useState("");
+	const [refundTarget, setRefundTarget] = useState<PaymentIntent | null>(null);
+	const pageSize = 20;
+
+	const queryInput: Record<string, string> = {
+		page: String(page),
+		limit: String(pageSize),
+	};
+	if (statusFilter) queryInput.status = statusFilter;
+
+	const { data, isLoading: loading } = api.listIntents.useQuery(queryInput) as {
+		data: { intents: PaymentIntent[] } | undefined;
+		isLoading: boolean;
+	};
+
+	const intents = data?.intents ?? [];
+	const total = intents.length;
+	const totalPages = Math.max(1, Math.ceil(total / pageSize));
+
+	const handleRefundSuccess = () => {
+		setRefundTarget(null);
+	};
+
+	return (
+		<>
+			<div className="mb-4 flex flex-wrap gap-3">
+				<select
+					value={statusFilter}
+					onChange={(e) => {
+						setStatusFilter(e.target.value);
+						setPage(1);
+					}}
+					className="h-9 rounded-md border border-border bg-background px-3 text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+				>
+					<option value="">All statuses</option>
+					<option value="pending">Pending</option>
+					<option value="processing">Processing</option>
+					<option value="succeeded">Succeeded</option>
+					<option value="failed">Failed</option>
+					<option value="cancelled">Cancelled</option>
+					<option value="refunded">Refunded</option>
+				</select>
+			</div>
+
+			<div className="overflow-hidden rounded-lg border border-border bg-card">
+				<table className="w-full">
+					<thead>
+						<tr className="border-border border-b bg-muted/50">
+							<th className="px-4 py-3 text-left font-semibold text-muted-foreground text-xs uppercase tracking-wide">
+								ID
+							</th>
+							<th className="hidden px-4 py-3 text-left font-semibold text-muted-foreground text-xs uppercase tracking-wide sm:table-cell">
+								Customer
+							</th>
+							<th className="px-4 py-3 text-left font-semibold text-muted-foreground text-xs uppercase tracking-wide">
+								Status
+							</th>
+							<th className="px-4 py-3 text-right font-semibold text-muted-foreground text-xs uppercase tracking-wide">
+								Amount
+							</th>
+							<th className="hidden px-4 py-3 text-right font-semibold text-muted-foreground text-xs uppercase tracking-wide lg:table-cell">
+								Date
+							</th>
+							<th className="px-4 py-3 text-right font-semibold text-muted-foreground text-xs uppercase tracking-wide">
+								Actions
+							</th>
+						</tr>
+					</thead>
+					<tbody className="divide-y divide-border">
+						{loading ? (
+							Array.from({ length: 5 }).map((_, i) => (
+								<tr key={`skeleton-${i}`}>
+									{Array.from({ length: 6 }).map((_, j) => (
+										<td key={`skeleton-cell-${j}`} className="px-4 py-3">
+											<div className="h-4 w-24 animate-pulse rounded bg-muted" />
+										</td>
+									))}
+								</tr>
+							))
+						) : intents.length === 0 ? (
+							<tr>
+								<td colSpan={6} className="px-4 py-12 text-center">
+									<p className="font-medium text-foreground text-sm">
+										No payment intents found
+									</p>
+									<p className="mt-1 text-muted-foreground text-xs">
+										Payment intents will appear here once customers initiate
+										checkout
+									</p>
+								</td>
+							</tr>
+						) : (
+							intents.map((intent) => (
+								<tr
+									key={intent.id}
+									className="transition-colors hover:bg-muted/30"
+								>
+									<td className="px-4 py-3">
+										<span className="font-mono text-foreground text-xs">
+											{intent.providerIntentId
+												? `${intent.providerIntentId.slice(0, 16)}…`
+												: `${intent.id.slice(0, 8)}…`}
+										</span>
+									</td>
+									<td className="hidden px-4 py-3 text-foreground text-sm sm:table-cell">
+										{intent.email ?? (
+											<span className="text-muted-foreground">&mdash;</span>
+										)}
+									</td>
+									<td className="px-4 py-3">
+										<span
+											className={`inline-flex items-center rounded-full px-2 py-0.5 font-medium text-xs ${INTENT_STATUS_COLORS[intent.status] ?? "bg-muted text-muted-foreground"}`}
+										>
+											{intent.status}
+										</span>
+									</td>
+									<td className="px-4 py-3 text-right font-medium text-foreground text-sm">
+										{formatPrice(intent.amount, intent.currency)}
+									</td>
+									<td className="hidden px-4 py-3 text-right text-muted-foreground text-xs lg:table-cell">
+										{timeAgo(intent.createdAt)}
+									</td>
+									<td className="px-4 py-3 text-right">
+										{intent.status === "succeeded" && (
+											<button
+												type="button"
+												onClick={() => setRefundTarget(intent)}
+												className="rounded-md px-2 py-1 font-medium text-destructive text-xs hover:bg-destructive/10"
+											>
+												Refund
+											</button>
+										)}
+									</td>
+								</tr>
+							))
+						)}
+					</tbody>
+				</table>
+			</div>
+
+			{totalPages > 1 && (
+				<div className="mt-4 flex items-center justify-center gap-2">
+					<button
+						type="button"
+						onClick={() => setPage((p) => Math.max(1, p - 1))}
+						disabled={page === 1}
+						className="rounded-md border border-border px-3 py-1.5 text-foreground text-sm hover:bg-muted disabled:opacity-50"
+					>
+						Previous
+					</button>
+					<span className="text-muted-foreground text-sm">
+						Page {page} of {totalPages}
+					</span>
+					<button
+						type="button"
+						onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+						disabled={page === totalPages}
+						className="rounded-md border border-border px-3 py-1.5 text-foreground text-sm hover:bg-muted disabled:opacity-50"
+					>
+						Next
+					</button>
+				</div>
+			)}
+
+			{refundTarget && (
+				<RefundModal
+					intent={refundTarget}
+					onClose={() => setRefundTarget(null)}
+					onSuccess={handleRefundSuccess}
+				/>
+			)}
+		</>
+	);
+}
+
+function RefundsTab() {
+	const api = usePaymentsAdminApi();
+
+	const { data: intentsData, isLoading: loadingIntents } =
+		api.listIntents.useQuery({ limit: "100" }) as {
+			data: { intents: PaymentIntent[] } | undefined;
+			isLoading: boolean;
+		};
+
+	const refundedIntents = (intentsData?.intents ?? []).filter(
+		(i) => i.status === "refunded",
+	);
+
+	return (
+		<div className="overflow-hidden rounded-lg border border-border bg-card">
+			<table className="w-full">
+				<thead>
+					<tr className="border-border border-b bg-muted/50">
+						<th className="px-4 py-3 text-left font-semibold text-muted-foreground text-xs uppercase tracking-wide">
+							Intent ID
+						</th>
+						<th className="hidden px-4 py-3 text-left font-semibold text-muted-foreground text-xs uppercase tracking-wide sm:table-cell">
+							Customer
+						</th>
+						<th className="px-4 py-3 text-left font-semibold text-muted-foreground text-xs uppercase tracking-wide">
+							Status
+						</th>
+						<th className="px-4 py-3 text-right font-semibold text-muted-foreground text-xs uppercase tracking-wide">
+							Amount
+						</th>
+						<th className="hidden px-4 py-3 text-right font-semibold text-muted-foreground text-xs uppercase tracking-wide lg:table-cell">
+							Date
+						</th>
+					</tr>
+				</thead>
+				<tbody className="divide-y divide-border">
+					{loadingIntents ? (
+						Array.from({ length: 4 }).map((_, i) => (
+							<tr key={`skeleton-${i}`}>
+								{Array.from({ length: 5 }).map((_, j) => (
+									<td key={`skeleton-cell-${j}`} className="px-4 py-3">
+										<div className="h-4 w-24 animate-pulse rounded bg-muted" />
+									</td>
+								))}
+							</tr>
+						))
+					) : refundedIntents.length === 0 ? (
+						<tr>
+							<td colSpan={5} className="px-4 py-12 text-center">
+								<p className="font-medium text-foreground text-sm">
+									No refunds issued
+								</p>
+								<p className="mt-1 text-muted-foreground text-xs">
+									Refunds will appear here after being processed
+								</p>
+							</td>
+						</tr>
+					) : (
+						refundedIntents.map((intent) => (
+							<tr
+								key={intent.id}
+								className="transition-colors hover:bg-muted/30"
+							>
+								<td className="px-4 py-3">
+									<span className="font-mono text-foreground text-xs">
+										{intent.providerIntentId
+											? `${intent.providerIntentId.slice(0, 16)}…`
+											: `${intent.id.slice(0, 8)}…`}
+									</span>
+								</td>
+								<td className="hidden px-4 py-3 text-foreground text-sm sm:table-cell">
+									{intent.email ?? (
+										<span className="text-muted-foreground">&mdash;</span>
+									)}
+								</td>
+								<td className="px-4 py-3">
+									<span
+										className={`inline-flex items-center rounded-full px-2 py-0.5 font-medium text-xs ${REFUND_STATUS_COLORS.succeeded}`}
+									>
+										refunded
+									</span>
+								</td>
+								<td className="px-4 py-3 text-right font-medium text-foreground text-sm">
+									{formatPrice(intent.amount, intent.currency)}
+								</td>
+								<td className="hidden px-4 py-3 text-right text-muted-foreground text-xs lg:table-cell">
+									{timeAgo(intent.createdAt)}
+								</td>
+							</tr>
+						))
+					)}
+				</tbody>
+			</table>
+		</div>
+	);
+}
+
+export function PaymentsAdmin() {
+	const [tab, setTab] = useState<"intents" | "refunds">("intents");
+
+	return (
+		<PaymentsAdminTemplate
+			tab={tab}
+			onTabChange={setTab}
+			tabContent={tab === "intents" ? <IntentsTab /> : <RefundsTab />}
+		/>
+	);
+}

package/src/admin/endpoints/create-refund.ts

@@ -0,0 +1,25 @@
+import { createAdminEndpoint, sanitizeText, z } from "@86d-app/core";
+import type { PaymentController } from "../../service";
+
+export const createRefund = createAdminEndpoint(
+	"/admin/payments/:id/refund",
+	{
+		method: "POST",
+		params: z.object({ id: z.string() }),
+		body: z.object({
+			amount: z.number().int().positive().optional(),
+			reason: z.string().max(500).transform(sanitizeText).optional(),
+		}),
+	},
+	async (ctx) => {
+		const controller = ctx.context.controllers.payments as PaymentController;
+		const intent = await controller.getIntent(ctx.params.id);
+		if (!intent) return { error: "Payment intent not found", status: 404 };
+		const refund = await controller.createRefund({
+			intentId: ctx.params.id,
+			amount: ctx.body.amount,
+			reason: ctx.body.reason,
+		});
+		return { refund };
+	},
+);

package/src/admin/endpoints/get-intent.ts

@@ -0,0 +1,16 @@
+import { createAdminEndpoint, z } from "@86d-app/core";
+import type { PaymentController } from "../../service";
+
+export const getIntentAdmin = createAdminEndpoint(
+	"/admin/payments/:id",
+	{
+		method: "GET",
+		params: z.object({ id: z.string() }),
+	},
+	async (ctx) => {
+		const controller = ctx.context.controllers.payments as PaymentController;
+		const intent = await controller.getIntent(ctx.params.id);
+		if (!intent) return { error: "Payment intent not found", status: 404 };
+		return { intent };
+	},
+);

package/src/admin/endpoints/index.ts

@@ -0,0 +1,11 @@
+import { createRefund } from "./create-refund";
+import { getIntentAdmin } from "./get-intent";
+import { listIntents } from "./list-intents";
+import { listRefunds } from "./list-refunds";
+
+export const adminEndpoints = {
+	"/admin/payments": listIntents,
+	"/admin/payments/:id": getIntentAdmin,
+	"/admin/payments/:id/refund": createRefund,
+	"/admin/payments/:id/refunds": listRefunds,
+};

package/src/admin/endpoints/list-intents.ts

@@ -0,0 +1,36 @@
+import { createAdminEndpoint, z } from "@86d-app/core";
+import type { PaymentController, PaymentIntentStatus } from "../../service";
+
+export const listIntents = createAdminEndpoint(
+	"/admin/payments",
+	{
+		method: "GET",
+		query: z.object({
+			customerId: z.string().optional(),
+			status: z
+				.enum([
+					"pending",
+					"processing",
+					"succeeded",
+					"failed",
+					"cancelled",
+					"refunded",
+				])
+				.optional(),
+			orderId: z.string().optional(),
+			take: z.coerce.number().int().min(1).max(100).optional(),
+			skip: z.coerce.number().int().min(0).optional(),
+		}),
+	},
+	async (ctx) => {
+		const controller = ctx.context.controllers.payments as PaymentController;
+		const intents = await controller.listIntents({
+			customerId: ctx.query.customerId,
+			status: ctx.query.status as PaymentIntentStatus | undefined,
+			orderId: ctx.query.orderId,
+			take: ctx.query.take ?? 20,
+			skip: ctx.query.skip ?? 0,
+		});
+		return { intents, total: intents.length };
+	},
+);

package/src/admin/endpoints/list-refunds.ts

@@ -0,0 +1,15 @@
+import { createAdminEndpoint, z } from "@86d-app/core";
+import type { PaymentController } from "../../service";
+
+export const listRefunds = createAdminEndpoint(
+	"/admin/payments/:id/refunds",
+	{
+		method: "GET",
+		params: z.object({ id: z.string() }),
+	},
+	async (ctx) => {
+		const controller = ctx.context.controllers.payments as PaymentController;
+		const refunds = await controller.listRefunds(ctx.params.id);
+		return { refunds };
+	},
+);

package/src/index.ts

@@ -0,0 +1,58 @@
+import type { Module, ModuleContext } from "@86d-app/core";
+import { adminEndpoints } from "./admin/endpoints";
+import { paymentsSchema } from "./schema";
+import type { PaymentProvider } from "./service";
+import { createPaymentController } from "./service-impl";
+import { storeEndpoints } from "./store/endpoints";
+
+export type {
+	PaymentController,
+	PaymentIntent,
+	PaymentIntentStatus,
+	PaymentMethod,
+	PaymentProvider,
+	ProviderIntentResult,
+	ProviderRefundResult,
+	Refund,
+	RefundStatus,
+} from "./service";
+
+export interface PaymentsOptions {
+	/** Default currency for payment intents */
+	currency?: string;
+	/** Payment provider implementation (e.g. StripePaymentProvider) */
+	provider?: PaymentProvider;
+}
+
+export default function payments(options?: PaymentsOptions): Module {
+	return {
+		id: "payments",
+		version: "0.0.1",
+		schema: paymentsSchema,
+		exports: {
+			read: ["paymentStatus", "paymentAmount", "paymentMethod"],
+		},
+		events: {
+			emits: ["payment.completed", "payment.failed", "payment.refunded"],
+		},
+		init: async (ctx: ModuleContext) => {
+			const controller = createPaymentController(ctx.data, options?.provider);
+			return { controllers: { payments: controller } };
+		},
+		endpoints: {
+			store: storeEndpoints,
+			admin: adminEndpoints,
+		},
+		admin: {
+			pages: [
+				{
+					path: "/admin/payments",
+					component: "PaymentsAdmin",
+					label: "Payments",
+					icon: "CreditCard",
+					group: "Sales",
+				},
+			],
+		},
+	};
+}

package/src/mdx.d.ts

@@ -0,0 +1,5 @@
+declare module "*.mdx" {
+	import type { ComponentType } from "react";
+	const Component: ComponentType<Record<string, unknown>>;
+	export default Component;
+}