@btst/stack 5.1.0 → 5.2.0

package/src/plugins/ecommerce/client/components/pages/order-confirmation-page.internal.tsx

@@ -0,0 +1,137 @@
+"use client";
+import { useEffect, useState } from "react";
+import { usePluginSiteNavigation } from "@btst/stack/context";
+import { Button } from "@workspace/ui/components/button";
+import { useEcommerceEndpoint } from "../../hooks/use-products";
+import { useOrderConfirmation } from "../../hooks/use-orders";
+import { useCart } from "../../hooks/use-cart";
+import { ECOMMERCE_PLUGIN_ID } from "../../constants";
+import { ErrorMessage, Storefront, formatMoney } from "../storefront";
+import { OrderSummary } from "../order-summary";
+import { isTerminalOrder } from "../../checkout-attempt";
+import { orderTokenKey } from "../../order-access";
+
+export function OrderConfirmationPage({ id }: { id: string }) {
+	const [token, setToken] = useState("");
+	const [loaded, setLoaded] = useState(false);
+	const cart = useCart();
+	const endpoint = useEcommerceEndpoint();
+	useEffect(() => {
+		try {
+			setToken(sessionStorage.getItem(orderTokenKey(id, endpoint)) ?? "");
+		} catch {
+			setToken("");
+		}
+		setLoaded(true);
+	}, [id, endpoint]);
+	const order = useOrderConfirmation(id, token);
+	const { Link, resolve } = usePluginSiteNavigation(ECOMMERCE_PLUGIN_ID);
+	useEffect(() => {
+		if (
+			!order.data ||
+			order.data.paymentStatus !== "pending" ||
+			order.data.status === "cancelled"
+		)
+			return;
+		const timer = window.setInterval(() => {
+			if (document.visibilityState === "visible") void order.refetch();
+		}, 2500);
+		return () => window.clearInterval(timer);
+	}, [order.data?.paymentStatus, order.data?.status, order.refetch]);
+	useEffect(() => {
+		if (!order.data || !isTerminalOrder(order.data)) return;
+		try {
+			const checkoutKey = `${cart.storeKey}:checkout`;
+			const attempt = JSON.parse(sessionStorage.getItem(checkoutKey) ?? "null");
+			if (attempt?.orderId === id) sessionStorage.removeItem(checkoutKey);
+		} catch {
+			/* Storage cleanup must not hide a verified order. */
+		}
+	}, [id, cart.storeKey, order.data?.paymentStatus, order.data?.status]);
+	useEffect(() => {
+		if (!order.data || order.data.paymentStatus !== "paid") return;
+		try {
+			const snapshot = sessionStorage.getItem(
+				`${orderTokenKey(id, endpoint)}:cart`,
+			);
+			if (
+				snapshot ===
+				JSON.stringify(
+					cart.items.map(({ productId, variantId, quantity }) => ({
+						productId,
+						variantId,
+						quantity,
+					})),
+				)
+			) {
+				cart.clear();
+				sessionStorage.removeItem(`${orderTokenKey(id, endpoint)}:cart`);
+			}
+		} catch {
+			/* Cart cleanup is optional when browser storage is unavailable. */
+		}
+	}, [id, endpoint, order.data?.paymentStatus, cart]);
+	const paid = order.data?.paymentStatus === "paid";
+	return (
+		<Storefront>
+			{loaded && !token ? (
+				<section className="py-12">
+					<h1 className="text-2xl font-semibold">Order access required</h1>
+					<p className="mt-3 text-muted-foreground">
+						Open this page in the browser where you checked out, or contact the
+						shop with your order number.
+					</p>
+				</section>
+			) : (
+				<>
+					<header className="mb-8">
+						<p className="mb-3 text-sm text-muted-foreground">Order {id}</p>
+						<h1 className="text-3xl font-semibold tracking-tight">
+							{paid
+								? "Payment confirmed"
+								: order.data?.status === "cancelled"
+									? "Order cancelled"
+									: order.data?.paymentStatus === "failed"
+										? "Payment was not completed"
+										: order.data?.paymentStatus === "refunded"
+											? "Payment refunded"
+											: "Waiting for payment confirmation"}
+						</h1>
+						<p className="mt-3 max-w-xl text-muted-foreground">
+							{paid
+								? `Your payment of ${formatMoney(order.data?.total ?? 0, order.data?.currency ?? "USD")} is confirmed.`
+								: order.data?.status === "cancelled"
+									? "This order was cancelled. Your cart is available if you would like to start again."
+									: order.data?.paymentStatus === "failed"
+										? "Your payment did not complete. Return to checkout to try again."
+										: order.data?.paymentStatus === "refunded"
+											? "Your payment provider has reported a refund for this order."
+											: "Your order is confirmed only after the payment provider sends a verified payment notification."}
+						</p>
+					</header>
+					<ErrorMessage error={order.error} />
+					{order.isFetching && !order.data ? (
+						<p role="status">Loading order…</p>
+					) : null}
+					{order.data ? <OrderSummary order={order.data} /> : null}
+					{!paid ? (
+						<Button
+							variant="outline"
+							className="mt-6"
+							disabled={order.isFetching}
+							onClick={() => void order.refetch()}
+						>
+							Refresh payment status
+						</Button>
+					) : null}
+				</>
+			)}
+			<Link
+				className="mt-8 inline-block text-sm underline underline-offset-4"
+				href={resolve("/shop").href}
+			>
+				Continue shopping
+			</Link>
+		</Storefront>
+	);
+}

package/src/plugins/ecommerce/client/components/pages/order-detail-page.internal.tsx

@@ -0,0 +1,85 @@
+"use client";
+import { useState } from "react";
+import { PermissionAccess, usePluginSiteNavigation } from "@btst/stack/context";
+import { Button } from "@workspace/ui/components/button";
+import { ecommercePermissions } from "../../../permissions";
+import type { OrderStatus } from "../../../types";
+import { ECOMMERCE_PLUGIN_ID } from "../../constants";
+import { useOrder, useUpdateOrderStatus } from "../../hooks/use-orders";
+import { ErrorMessage, Storefront } from "../storefront";
+import { OrderSummary } from "../order-summary";
+
+const nextStatuses: Record<OrderStatus, OrderStatus[]> = {
+	pending: ["cancelled"],
+	paid: ["fulfilling", "cancelled"],
+	fulfilling: ["fulfilled", "cancelled"],
+	fulfilled: [],
+	cancelled: [],
+};
+export function OrderDetailPage({ id }: { id: string }) {
+	const order = useOrder(id);
+	const update = useUpdateOrderStatus();
+	const [status, setStatus] = useState<OrderStatus | "">("");
+	const { Link, resolve } = usePluginSiteNavigation(ECOMMERCE_PLUGIN_ID);
+	return (
+		<Storefront>
+			<Link
+				href={resolve("/shop/admin/orders").href}
+				className="mb-6 inline-block text-sm underline underline-offset-4"
+			>
+				All orders
+			</Link>
+			<h1 className="mb-8 break-all text-2xl font-semibold tracking-tight">
+				Order {id}
+			</h1>
+			<ErrorMessage error={order.error ?? update.error} />
+			{order.isPending ? <p role="status">Loading order…</p> : null}
+			{order.data ? (
+				<>
+					<OrderSummary order={order.data} />
+					{nextStatuses[order.data.status].length ? (
+						<PermissionAccess
+							permission={ecommercePermissions.order.update({ id })}
+						>
+							<form
+								className="mt-8 flex flex-wrap items-end gap-3 border-t pt-6"
+								onSubmit={async (event) => {
+									event.preventDefault();
+									if (!status) return;
+									try {
+										await update.mutateAsync({ id, status });
+										setStatus("");
+										await order.refetch();
+									} catch {
+										/* The mutation error is shown above. */
+									}
+								}}
+							>
+								<label className="text-sm">
+									Update order status
+									<select
+										className="mt-2 block h-10 rounded-md border bg-background px-3"
+										value={status}
+										onChange={(event) =>
+											setStatus(event.target.value as OrderStatus | "")
+										}
+									>
+										<option value="">Choose status</option>
+										{nextStatuses[order.data.status].map((value) => (
+											<option key={value} value={value}>
+												{value}
+											</option>
+										))}
+									</select>
+								</label>
+								<Button type="submit" disabled={!status || update.isPending}>
+									{update.isPending ? "Saving…" : "Save status"}
+								</Button>
+							</form>
+						</PermissionAccess>
+					) : null}
+				</>
+			) : null}
+		</Storefront>
+	);
+}

package/src/plugins/ecommerce/client/components/pages/orders-admin-page.internal.tsx

@@ -0,0 +1,190 @@
+"use client";
+import { useState } from "react";
+import { useIdentity, usePluginSiteNavigation } from "@btst/stack/context";
+import { Button } from "@workspace/ui/components/button";
+import type { OrderStatus, OrdersPage } from "../../../types";
+import { useMyOrders, useOrders } from "../../hooks/use-orders";
+import { ECOMMERCE_PLUGIN_ID } from "../../constants";
+import { ErrorMessage, Storefront, formatMoney } from "../storefront";
+
+function OrdersTable({
+	data,
+	admin = false,
+}: {
+	data?: OrdersPage;
+	admin?: boolean;
+}) {
+	const { Link, resolve } = usePluginSiteNavigation(ECOMMERCE_PLUGIN_ID);
+	if (!data?.items.length)
+		return <p className="py-12 text-muted-foreground">No orders yet.</p>;
+	return (
+		<div className="overflow-x-auto">
+			<table className="w-full text-left text-sm">
+				<caption className="sr-only">
+					{admin ? "All customer orders" : "Your orders"}
+				</caption>
+				<thead className="border-b text-muted-foreground">
+					<tr>
+						<th scope="col" className="py-3 pr-4 font-medium">
+							Order
+						</th>
+						<th scope="col" className="py-3 pr-4 font-medium">
+							Date
+						</th>
+						{admin ? (
+							<th scope="col" className="py-3 pr-4 font-medium">
+								Customer
+							</th>
+						) : null}
+						<th scope="col" className="py-3 pr-4 font-medium">
+							Status
+						</th>
+						<th scope="col" className="py-3 pr-4 font-medium">
+							Payment
+						</th>
+						<th scope="col" className="py-3 text-right font-medium">
+							Total
+						</th>
+					</tr>
+				</thead>
+				<tbody className="divide-y">
+					{data.items.map((order) => (
+						<tr key={order.id}>
+							<td className="py-4 pr-4">
+								{admin ? (
+									<Link
+										className="font-medium underline underline-offset-4"
+										href={
+											resolve(
+												`/shop/admin/orders/${encodeURIComponent(order.id)}`,
+											).href
+										}
+									>
+										{order.id.slice(0, 12)}
+									</Link>
+								) : (
+									<span>{order.id.slice(0, 12)}</span>
+								)}
+							</td>
+							<td className="whitespace-nowrap py-4 pr-4">
+								{new Date(order.createdAt).toLocaleDateString()}
+							</td>
+							{admin ? <td className="py-4 pr-4">{order.email}</td> : null}
+							<td className="py-4 pr-4 capitalize">{order.status}</td>
+							<td className="py-4 pr-4 capitalize">{order.paymentStatus}</td>
+							<td className="py-4 text-right tabular-nums">
+								{formatMoney(order.total, order.currency)}
+							</td>
+						</tr>
+					))}
+				</tbody>
+			</table>
+		</div>
+	);
+}
+export function OrdersAdminPage() {
+	const [status, setStatus] = useState<OrderStatus | "">("");
+	const [offset, setOffset] = useState(0);
+	const orders = useOrders({ status: status || undefined, limit: 25, offset });
+	return (
+		<Storefront>
+			<header className="mb-8 flex flex-wrap items-end justify-between gap-4">
+				<div>
+					<h1 className="text-3xl font-semibold tracking-tight">Orders</h1>
+					<p className="mt-2 text-muted-foreground">
+						Track payments and fulfilment.
+					</p>
+				</div>
+				<label className="text-sm">
+					Order status
+					<select
+						className="ml-3 h-9 rounded-md border bg-background px-3"
+						value={status}
+						onChange={(event) => {
+							setStatus(event.target.value as OrderStatus | "");
+							setOffset(0);
+						}}
+					>
+						<option value="">All statuses</option>
+						{["pending", "paid", "fulfilling", "fulfilled", "cancelled"].map(
+							(value) => (
+								<option key={value} value={value}>
+									{value}
+								</option>
+							),
+						)}
+					</select>
+				</label>
+			</header>
+			<ErrorMessage error={orders.error} />
+			{orders.isPending ? (
+				<p role="status">Loading orders…</p>
+			) : (
+				<OrdersTable data={orders.data} admin />
+			)}
+			{orders.data && orders.data.total > 25 ? (
+				<nav aria-label="Order pages" className="mt-6 flex justify-between">
+					<Button
+						variant="outline"
+						disabled={offset === 0}
+						onClick={() => setOffset(Math.max(0, offset - 25))}
+					>
+						Previous
+					</Button>
+					<Button
+						variant="outline"
+						disabled={offset + 25 >= orders.data.total}
+						onClick={() => setOffset(offset + 25)}
+					>
+						Next
+					</Button>
+				</nav>
+			) : null}
+		</Storefront>
+	);
+}
+export function MyOrdersPage() {
+	const { identity, isPending } = useIdentity();
+	const [offset, setOffset] = useState(0);
+	const orders = useMyOrders({ limit: 25, offset });
+	return (
+		<Storefront>
+			<h1 className="mb-8 text-3xl font-semibold tracking-tight">My orders</h1>
+			{isPending ? (
+				<p role="status">Loading your account…</p>
+			) : !identity ? (
+				<p className="text-muted-foreground">Sign in to see your orders.</p>
+			) : (
+				<>
+					<ErrorMessage error={orders.error} />
+					{orders.isPending ? (
+						<p role="status">Loading orders…</p>
+					) : (
+						<OrdersTable data={orders.data} />
+					)}
+					{orders.data && orders.data.total > 25 ? (
+						<nav
+							aria-label="Your order pages"
+							className="mt-6 flex justify-between"
+						>
+							<Button
+								variant="outline"
+								disabled={offset === 0}
+								onClick={() => setOffset(Math.max(0, offset - 25))}
+							>
+								Previous
+							</Button>
+							<Button
+								variant="outline"
+								disabled={offset + 25 >= orders.data.total}
+								onClick={() => setOffset(offset + 25)}
+							>
+								Next
+							</Button>
+						</nav>
+					) : null}
+				</>
+			)}
+		</Storefront>
+	);
+}

package/src/plugins/ecommerce/client/components/pages/product-detail-page.internal.tsx

@@ -0,0 +1,172 @@
+"use client";
+import { useState } from "react";
+import { usePluginSiteNavigation } from "@btst/stack/context";
+import { Button } from "@workspace/ui/components/button";
+import { Input } from "@workspace/ui/components/input";
+import { useSuspenseProduct } from "../../hooks/use-products";
+import { useCart } from "../../hooks/use-cart";
+import { ECOMMERCE_PLUGIN_ID } from "../../constants";
+import { ProductImage } from "../product-image";
+import { ErrorMessage, Storefront, formatMoney } from "../storefront";
+
+export function ProductDetailPage({ slug }: { slug: string }) {
+	const { data: product } = useSuspenseProduct(slug);
+	const [selectedImage, setSelectedImage] = useState(0);
+	const [variantId, setVariantId] = useState(product.variants[0]?.id ?? "");
+	const [quantity, setQuantity] = useState(1);
+	const [added, setAdded] = useState(false);
+	const [error, setError] = useState<Error>();
+	const cart = useCart();
+	const variant = product.variants.find((entry) => entry.id === variantId);
+	const stock = variant?.stock ?? product.stock;
+	const price = variant?.price ?? product.price;
+	const { Link, resolve } = usePluginSiteNavigation(ECOMMERCE_PLUGIN_ID);
+	return (
+		<Storefront>
+			<Link
+				className="mb-6 inline-block text-sm text-muted-foreground underline underline-offset-4"
+				href={resolve("/shop").href}
+			>
+				All products
+			</Link>
+			<div className="grid items-start gap-8 md:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)] lg:gap-14">
+				<div>
+					<div className="aspect-square overflow-hidden rounded-xl bg-muted">
+						<ProductImage
+							image={product.images[selectedImage]}
+							alt={product.name}
+							priority
+						/>
+					</div>
+					{product.images.length > 1 ? (
+						<div className="mt-3 flex gap-3 overflow-auto">
+							{product.images.map((image, index) => (
+								<button
+									key={`${image}:${index}`}
+									type="button"
+									aria-label={`View image ${index + 1}`}
+									aria-pressed={selectedImage === index}
+									className={`h-20 w-20 shrink-0 overflow-hidden rounded-md border-2 ${selectedImage === index ? "border-primary" : "border-transparent"}`}
+									onClick={() => setSelectedImage(index)}
+								>
+									<ProductImage
+										image={image}
+										alt={`${product.name}, image ${index + 1}`}
+									/>
+								</button>
+							))}
+						</div>
+					) : null}
+				</div>
+				<section className="md:sticky md:top-6">
+					{product.category ? (
+						<p className="mb-3 text-sm text-muted-foreground">
+							{product.category}
+						</p>
+					) : null}
+					<h1 className="text-3xl font-semibold tracking-tight">
+						{product.name}
+					</h1>
+					<p className="mt-5 text-2xl font-medium tabular-nums">
+						{formatMoney(price, product.currency)}
+					</p>
+					<p className="mt-2 text-sm text-muted-foreground">
+						{stock > 0 ? `${stock} in stock` : "Out of stock"}
+					</p>
+					<form
+						className="mt-8 space-y-5"
+						onSubmit={(event) => {
+							event.preventDefault();
+							try {
+								cart.addItem({
+									productId: product.id,
+									variantId: variant?.id,
+									name: product.name,
+									variantName: variant?.name,
+									price,
+									currency: product.currency,
+									image: product.images[0],
+									quantity,
+								});
+								setError(undefined);
+								setAdded(true);
+							} catch (cause) {
+								setError(
+									cause instanceof Error ? cause : new Error(String(cause)),
+								);
+							}
+						}}
+					>
+						{product.variants.length ? (
+							<label className="block text-sm font-medium">
+								Variant
+								<select
+									className="mt-2 h-11 w-full rounded-md border bg-background px-3 font-normal"
+									value={variantId}
+									onChange={(event) => {
+										setVariantId(event.target.value);
+										setAdded(false);
+										setQuantity(1);
+									}}
+								>
+									{product.variants.map((entry) => (
+										<option key={entry.id} value={entry.id}>
+											{entry.name}
+											{entry.stock === 0 ? " — out of stock" : ""}
+										</option>
+									))}
+								</select>
+							</label>
+						) : null}
+						<label className="block text-sm font-medium">
+							Quantity
+							<Input
+								className="mt-2 w-24"
+								type="number"
+								min={1}
+								max={Math.min(stock, 99)}
+								value={quantity}
+								onChange={(event) => {
+									setQuantity(Number(event.target.value));
+									setAdded(false);
+								}}
+							/>
+						</label>
+						<ErrorMessage error={error} />
+						<Button
+							className="h-11 w-full"
+							type="submit"
+							disabled={
+								!cart.isHydrated ||
+								stock === 0 ||
+								quantity < 1 ||
+								quantity > Math.min(stock, 99)
+							}
+						>
+							Add to cart
+						</Button>
+						{added ? (
+							<p role="status" className="text-sm">
+								Added to your cart.{" "}
+								<Link
+									className="underline underline-offset-4"
+									href={resolve("/shop/cart").href}
+								>
+									Review cart
+								</Link>
+							</p>
+						) : null}
+					</form>
+					{product.description ? (
+						<div className="mt-10 border-t pt-6">
+							<h2 className="mb-3 text-lg font-medium">Details</h2>
+							<p className="whitespace-pre-wrap text-sm leading-7 text-muted-foreground">
+								{product.description}
+							</p>
+						</div>
+					) : null}
+				</section>
+			</div>
+		</Storefront>
+	);
+}