@86d-app/products 0.0.3

package/src/store/components/product-reviews-section.tsx

@@ -0,0 +1,372 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { useReviewsApi } from "./_hooks";
+import type { Review, ReviewsResponse } from "./_types";
+import { formatDate } from "./_utils";
+import ProductReviewsSectionTemplate from "./product-reviews-section.mdx";
+import { StarDisplay } from "./star-display";
+import { StarPicker } from "./star-picker";
+
+const REVIEWS_PAGE_SIZE = 10;
+
+export interface ProductReviewsSectionProps {
+	productId: string;
+}
+
+export function ProductReviewsSection({
+	productId,
+}: ProductReviewsSectionProps) {
+	const reviewsApi = useReviewsApi();
+
+	const { data: initialData, isLoading: loading } =
+		reviewsApi.listProductReviews.useQuery({
+			params: { productId },
+			take: String(REVIEWS_PAGE_SIZE),
+			skip: "0",
+		}) as { data: ReviewsResponse | undefined; isLoading: boolean };
+
+	const [extraReviews, setExtraReviews] = useState<Review[]>([]);
+	const [loadingMore, setLoadingMore] = useState(false);
+	const [skip, setSkip] = useState(0);
+	const [loadedAll, setLoadedAll] = useState(false);
+	const [showForm, setShowForm] = useState(false);
+
+	const [rating, setRating] = useState(0);
+	const [reviewName, setReviewName] = useState("");
+	const [reviewEmail, setReviewEmail] = useState("");
+	const [reviewTitle, setReviewTitle] = useState("");
+	const [reviewBody, setReviewBody] = useState("");
+	const [ratingError, setRatingError] = useState("");
+
+	const allReviews = [...(initialData?.reviews ?? []), ...extraReviews];
+	const summary = initialData?.summary ?? null;
+	const hasMore =
+		!loadedAll &&
+		initialData !== undefined &&
+		(initialData.reviews.length === REVIEWS_PAGE_SIZE ||
+			extraReviews.length > 0);
+
+	const submitMutation = reviewsApi.submitReview.useMutation({
+		onSuccess: () => {
+			setShowForm(false);
+			setRating(0);
+			setReviewName("");
+			setReviewEmail("");
+			setReviewTitle("");
+			setReviewBody("");
+			void reviewsApi.listProductReviews.invalidate();
+			setExtraReviews([]);
+			setSkip(0);
+			setLoadedAll(false);
+		},
+	});
+
+	const handleLoadMore = useCallback(async () => {
+		const nextSkip = skip === 0 ? REVIEWS_PAGE_SIZE : skip + REVIEWS_PAGE_SIZE;
+		setLoadingMore(true);
+		try {
+			const fresh = (await reviewsApi.listProductReviews.fetch({
+				params: { productId },
+				take: String(REVIEWS_PAGE_SIZE),
+				skip: String(nextSkip),
+			})) as ReviewsResponse;
+			setExtraReviews((prev) => [...prev, ...fresh.reviews]);
+			setSkip(nextSkip);
+			if (fresh.reviews.length < REVIEWS_PAGE_SIZE) setLoadedAll(true);
+		} catch {
+			// silently ignore
+		} finally {
+			setLoadingMore(false);
+		}
+	}, [reviewsApi.listProductReviews, productId, skip]);
+
+	const handleSubmitReview = (e: React.FormEvent) => {
+		e.preventDefault();
+		if (rating === 0) {
+			setRatingError("Please select a rating.");
+			return;
+		}
+		setRatingError("");
+		submitMutation.mutate({
+			productId,
+			authorName: reviewName,
+			authorEmail: reviewEmail,
+			rating,
+			title: reviewTitle.trim() || undefined,
+			body: reviewBody,
+		});
+	};
+
+	if (loading) {
+		return (
+			<section id="reviews" className="border-border/50 border-t py-10">
+				<div className="mb-6 h-7 w-40 animate-pulse rounded-lg bg-muted" />
+				<div className="space-y-4">
+					{[1, 2, 3].map((n) => (
+						<div key={n} className="space-y-2 border-border border-b pb-4">
+							<div className="h-4 w-24 animate-pulse rounded bg-muted" />
+							<div className="h-4 w-full animate-pulse rounded bg-muted" />
+							<div className="h-4 w-3/4 animate-pulse rounded bg-muted" />
+						</div>
+					))}
+				</div>
+			</section>
+		);
+	}
+
+	const noReviews = summary === null || summary.count === 0;
+	const submitError =
+		ratingError || (submitMutation.isError ? "Failed to submit review." : "");
+
+	// --- Pre-computed JSX blocks for template ---
+
+	const summaryDisplay =
+		!noReviews && summary ? (
+			<div className="mt-1 flex items-center gap-2">
+				<StarDisplay rating={summary.average} size="lg" />
+				<span className="font-medium text-foreground">
+					{summary.average.toFixed(1)}
+				</span>
+				<span className="text-muted-foreground text-sm">
+					({summary.count} review{summary.count !== 1 ? "s" : ""})
+				</span>
+			</div>
+		) : null;
+
+	const toggleFormButton = (
+		<button
+			type="button"
+			onClick={() => setShowForm((v) => !v)}
+			className="rounded-md border border-border bg-background px-4 py-2 font-medium text-foreground text-sm transition-colors hover:bg-muted"
+		>
+			{showForm ? "Cancel" : "Write a Review"}
+		</button>
+	);
+
+	let formContent: React.ReactNode = null;
+	if (showForm) {
+		formContent = (
+			<div className="mb-8">
+				{submitMutation.isSuccess ? (
+					<div className="rounded-lg border border-emerald-200 bg-emerald-50 p-5 text-center dark:border-emerald-800 dark:bg-emerald-950/30">
+						<p className="font-semibold text-emerald-800 dark:text-emerald-200">
+							Thank you for your review!
+						</p>
+						<p className="mt-1 text-emerald-700 text-sm dark:text-emerald-300">
+							Your review will appear once approved.
+						</p>
+					</div>
+				) : (
+					<form
+						onSubmit={handleSubmitReview}
+						className="space-y-4 rounded-lg border border-border bg-muted/30 p-5"
+					>
+						<div>
+							<p className="mb-1.5 font-medium text-foreground text-sm">
+								Your rating <span className="text-destructive">*</span>
+							</p>
+							<StarPicker value={rating} onChange={setRating} />
+						</div>
+
+						<div className="grid gap-4 sm:grid-cols-2">
+							<div>
+								<label
+									htmlFor="pdp-review-name"
+									className="mb-1 block font-medium text-foreground text-sm"
+								>
+									Name <span className="text-destructive">*</span>
+								</label>
+								<input
+									id="pdp-review-name"
+									type="text"
+									required
+									maxLength={200}
+									value={reviewName}
+									onChange={(e) => setReviewName(e.target.value)}
+									placeholder="Your name"
+									className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm outline-none focus:border-foreground/20 focus:ring-1 focus:ring-foreground/10"
+								/>
+							</div>
+							<div>
+								<label
+									htmlFor="pdp-review-email"
+									className="mb-1 block font-medium text-foreground text-sm"
+								>
+									Email <span className="text-destructive">*</span>
+								</label>
+								<input
+									id="pdp-review-email"
+									type="email"
+									required
+									value={reviewEmail}
+									onChange={(e) => setReviewEmail(e.target.value)}
+									placeholder="you@example.com"
+									className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm outline-none focus:border-foreground/20 focus:ring-1 focus:ring-foreground/10"
+								/>
+							</div>
+						</div>
+
+						<div>
+							<label
+								htmlFor="pdp-review-title"
+								className="mb-1 block font-medium text-foreground text-sm"
+							>
+								Title
+							</label>
+							<input
+								id="pdp-review-title"
+								type="text"
+								maxLength={500}
+								value={reviewTitle}
+								onChange={(e) => setReviewTitle(e.target.value)}
+								placeholder="Summary of your experience"
+								className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm outline-none focus:border-foreground/20 focus:ring-1 focus:ring-foreground/10"
+							/>
+						</div>
+
+						<div>
+							<label
+								htmlFor="pdp-review-body"
+								className="mb-1 block font-medium text-foreground text-sm"
+							>
+								Review <span className="text-destructive">*</span>
+							</label>
+							<textarea
+								id="pdp-review-body"
+								required
+								maxLength={10000}
+								rows={4}
+								value={reviewBody}
+								onChange={(e) => setReviewBody(e.target.value)}
+								placeholder="Share your experience with this product"
+								className="w-full resize-y rounded-md border border-border bg-background px-3 py-2 text-sm outline-none focus:border-foreground/20 focus:ring-1 focus:ring-foreground/10"
+							/>
+						</div>
+
+						{submitError && (
+							<p className="text-destructive text-sm" role="alert">
+								{submitError}
+							</p>
+						)}
+
+						<button
+							type="submit"
+							disabled={submitMutation.isPending}
+							className="rounded-md bg-foreground px-5 py-2 font-medium text-background text-sm transition-opacity hover:opacity-85 disabled:opacity-50"
+						>
+							{submitMutation.isPending ? "Submitting…" : "Submit Review"}
+						</button>
+					</form>
+				)}
+			</div>
+		);
+	}
+
+	const emptyState =
+		noReviews && !showForm ? (
+			<div className="rounded-lg border border-border bg-muted/30 py-12 text-center">
+				<p className="font-medium text-foreground text-sm">No reviews yet</p>
+				<p className="mt-1 text-muted-foreground text-sm">
+					Be the first to review this product.
+				</p>
+			</div>
+		) : null;
+
+	let reviewsContent: React.ReactNode = null;
+	if (!noReviews && summary) {
+		reviewsContent = (
+			<div className="flex flex-col gap-5 sm:flex-row sm:items-start">
+				<div className="sm:w-48">
+					<div className="space-y-1.5">
+						{[5, 4, 3, 2, 1].map((n) => {
+							const count = summary.distribution[String(n)] ?? 0;
+							const pct = summary.count > 0 ? (count / summary.count) * 100 : 0;
+							return (
+								<div key={n} className="flex items-center gap-2 text-sm">
+									<span className="w-3 text-right text-muted-foreground">
+										{n}
+									</span>
+									<span className="text-amber-400 text-xs">★</span>
+									<div className="h-2 flex-1 overflow-hidden rounded-full bg-muted">
+										<div
+											className="h-full rounded-full bg-amber-400 transition-all"
+											style={{ width: `${pct}%` }}
+										/>
+									</div>
+									<span className="w-5 text-right text-muted-foreground/70 text-xs">
+										{count}
+									</span>
+								</div>
+							);
+						})}
+					</div>
+				</div>
+				<div className="hidden h-auto w-px bg-border sm:block" />
+				<div className="flex-1">
+					{allReviews.length === 0 ? (
+						<p className="text-muted-foreground text-sm">
+							No approved reviews yet.
+						</p>
+					) : (
+						<div>
+							{allReviews.map((review) => (
+								<article
+									key={review.id}
+									className="border-border border-b py-5 last:border-0"
+								>
+									<div className="mb-2 flex items-start justify-between gap-3">
+										<div>
+											<div className="flex items-center gap-2">
+												<StarDisplay rating={review.rating} size="sm" />
+												{review.isVerifiedPurchase && (
+													<span className="rounded-full bg-emerald-50 px-2 py-0.5 text-emerald-700 text-xs dark:bg-emerald-950 dark:text-emerald-300">
+														Verified
+													</span>
+												)}
+											</div>
+											{review.title && (
+												<p className="mt-1 font-medium text-foreground text-sm">
+													{review.title}
+												</p>
+											)}
+										</div>
+										<span className="shrink-0 text-muted-foreground text-xs">
+											{formatDate(review.createdAt)}
+										</span>
+									</div>
+									<p className="text-muted-foreground text-sm leading-relaxed">
+										{review.body}
+									</p>
+									<p className="mt-2 text-muted-foreground/60 text-xs">
+										— {review.authorName}
+									</p>
+								</article>
+							))}
+							{hasMore && (
+								<button
+									type="button"
+									onClick={() => void handleLoadMore()}
+									disabled={loadingMore}
+									className="mt-4 text-foreground text-sm underline-offset-4 hover:underline disabled:opacity-60"
+								>
+									{loadingMore ? "Loading…" : "Load more reviews"}
+								</button>
+							)}
+						</div>
+					)}
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<ProductReviewsSectionTemplate
+			summaryDisplay={summaryDisplay}
+			toggleFormButton={toggleFormButton}
+			formContent={formContent}
+			emptyState={emptyState}
+			reviewsContent={reviewsContent}
+		/>
+	);
+}

package/src/store/components/recently-viewed.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { useAnalyticsApi } from "./_hooks";
+import { formatPrice } from "./_utils";
+
+interface RecentlyViewedItem {
+	productId: string;
+	name: string;
+	slug: string;
+	price: number;
+	image?: string | undefined;
+	viewedAt: string;
+}
+
+export interface RecentlyViewedProductsProps {
+	/** Current product ID to exclude from the list. */
+	excludeProductId?: string;
+	/** Maximum items to show (default: 6). */
+	limit?: number;
+	/** Section title (default: "Recently viewed"). */
+	title?: string;
+	/** Analytics session ID for anonymous visitors. */
+	sessionId?: string;
+}
+
+export function RecentlyViewedProducts({
+	excludeProductId,
+	limit = 6,
+	title = "Recently viewed",
+	sessionId,
+}: RecentlyViewedProductsProps) {
+	const api = useAnalyticsApi();
+
+	const { data, isLoading } = api.recentlyViewed.useQuery({
+		excludeProductId,
+		sessionId,
+		limit: String(limit),
+	}) as {
+		data: { items: RecentlyViewedItem[] } | undefined;
+		isLoading: boolean;
+	};
+
+	const items = data?.items ?? [];
+
+	if (isLoading || items.length === 0) return null;
+
+	return (
+		<section className="border-border/50 border-t py-12 sm:py-14">
+			<h2 className="mb-6 font-display font-semibold text-foreground text-lg tracking-tight sm:text-xl">
+				{title}
+			</h2>
+			<div className="scrollbar-none flex gap-4 overflow-x-auto pb-2">
+				{items.map((item) => (
+					<a
+						key={item.productId}
+						href={`/products/${item.slug}`}
+						className="group flex w-36 flex-none flex-col sm:w-44"
+					>
+						<div className="aspect-[3/4] overflow-hidden rounded-lg bg-muted">
+							{item.image ? (
+								<img
+									src={item.image}
+									alt={item.name}
+									className="h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-[1.03]"
+								/>
+							) : (
+								<div className="flex h-full w-full items-center justify-center text-muted-foreground/30">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										width="24"
+										height="24"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										strokeWidth="1.5"
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										aria-hidden="true"
+									>
+										<rect width="18" height="18" x="3" y="3" rx="2" />
+										<circle cx="9" cy="9" r="2" />
+										<path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
+									</svg>
+								</div>
+							)}
+						</div>
+						<div className="mt-2.5">
+							<p className="truncate text-foreground text-sm transition-colors group-hover:text-foreground/80">
+								{item.name}
+							</p>
+							<p className="mt-0.5 font-medium text-muted-foreground text-xs tabular-nums">
+								{formatPrice(item.price)}
+							</p>
+						</div>
+					</a>
+				))}
+			</div>
+		</section>
+	);
+}

package/src/store/components/related-products.mdx

@@ -0,0 +1,6 @@
+<section className="border-border/50 border-t py-12 sm:py-14">
+  <h2 className="mb-6 font-display font-semibold text-foreground text-lg tracking-tight sm:text-xl">
+    {props.title}
+  </h2>
+  {props.gridContent}
+</section>

package/src/store/components/related-products.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { useProductsApi } from "./_hooks";
+import { ProductCard } from "./product-card";
+import RelatedProductsTemplate from "./related-products.mdx";
+
+export interface RelatedProductsProps {
+	productId: string;
+	limit?: number;
+	title?: string;
+}
+
+export function RelatedProducts({
+	productId,
+	limit = 4,
+	title = "You might also like",
+}: RelatedProductsProps) {
+	const api = useProductsApi();
+
+	const { data, isLoading } = api.getRelatedProducts.useQuery({
+		params: { id: productId },
+		limit: String(limit),
+	}) as {
+		data: { products: import("./_types").Product[] } | undefined;
+		isLoading: boolean;
+	};
+
+	const products = data?.products ?? [];
+
+	if (isLoading) {
+		return (
+			<section className="border-border/50 border-t py-12 sm:py-14">
+				<h2 className="mb-6 font-display font-semibold text-foreground text-lg tracking-tight sm:text-xl">
+					{title}
+				</h2>
+				<div className="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 lg:grid-cols-4">
+					{Array.from({ length: limit }).map((_, i) => (
+						<div key={i}>
+							<div className="aspect-[3/4] animate-pulse rounded-lg bg-muted" />
+							<div className="mt-3 space-y-1.5">
+								<div className="h-3.5 w-3/4 animate-pulse rounded bg-muted-foreground/10" />
+								<div className="h-3.5 w-1/3 animate-pulse rounded bg-muted-foreground/10" />
+							</div>
+						</div>
+					))}
+				</div>
+			</section>
+		);
+	}
+
+	if (products.length === 0) return null;
+
+	const gridContent = (
+		<div className="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 lg:grid-cols-4">
+			{products.map((product) => (
+				<ProductCard key={product.id} product={product} />
+			))}
+		</div>
+	);
+
+	return <RelatedProductsTemplate title={title} gridContent={gridContent} />;
+}

package/src/store/components/star-display.mdx

@@ -0,0 +1,18 @@
+<span
+  role="img"
+  className={props.sizeClass}
+  aria-label={props.ariaLabel}
+>
+  {[1, 2, 3, 4, 5].map((n) => (
+    <span
+      key={n}
+      className={
+        n <= props.filledCount
+          ? "text-amber-400"
+          : "text-gray-200 dark:text-gray-700"
+      }
+    >
+      ★
+    </span>
+  ))}
+</span>

package/src/store/components/star-display.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import StarDisplayTemplate from "./star-display.mdx";
+
+export interface StarDisplayProps {
+	rating: number;
+	size?: "sm" | "md" | "lg";
+}
+
+export function StarDisplay({ rating, size = "md" }: StarDisplayProps) {
+	const sizeClass =
+		size === "sm"
+			? "text-sm select-none leading-none"
+			: size === "lg"
+				? "text-xl select-none leading-none"
+				: "text-base select-none leading-none";
+	const filledCount = Math.round(rating);
+	const ariaLabel = `${rating} out of 5 stars`;
+
+	return (
+		<StarDisplayTemplate
+			sizeClass={sizeClass}
+			ariaLabel={ariaLabel}
+			filledCount={filledCount}
+		/>
+	);
+}

package/src/store/components/star-picker.mdx

@@ -0,0 +1,21 @@
+<fieldset className="flex gap-0.5 border-0 p-0">
+  <legend className="sr-only">Select rating</legend>
+  {[1, 2, 3, 4, 5].map((n) => (
+    <button
+      key={n}
+      type="button"
+      aria-label={`${n} star${n !== 1 ? "s" : ""}`}
+      aria-pressed={props.value === n}
+      className={`text-2xl leading-none transition-colors ${
+        n <= (props.hover || props.value)
+          ? "text-amber-400"
+          : "text-gray-200 hover:text-amber-200 dark:text-gray-700"
+      }`}
+      onClick={() => props.onChange(n)}
+      onMouseEnter={() => props.onHover(n)}
+      onMouseLeave={() => props.onHover(0)}
+    >
+      ★
+    </button>
+  ))}
+</fieldset>

package/src/store/components/star-picker.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { useState } from "react";
+import StarPickerTemplate from "./star-picker.mdx";
+
+export interface StarPickerProps {
+	value: number;
+	onChange: (n: number) => void;
+}
+
+export function StarPicker({ value, onChange }: StarPickerProps) {
+	const [hover, setHover] = useState(0);
+	return (
+		<StarPickerTemplate
+			value={value}
+			hover={hover}
+			onChange={onChange}
+			onHover={setHover}
+		/>
+	);
+}

package/src/store/components/stock-badge.mdx

@@ -0,0 +1,12 @@
+<span className={`inline-flex items-center gap-1 text-xs ${
+  props.status === "out" ? "text-muted-foreground" :
+  props.status === "low" ? "text-amber-600 dark:text-amber-400" :
+  "text-emerald-600 dark:text-emerald-400"
+}`}>
+  <span className={`inline-block h-1.5 w-1.5 rounded-full ${
+    props.status === "out" ? "bg-muted-foreground/40" :
+    props.status === "low" ? "bg-amber-500" :
+    "bg-emerald-500"
+  }`} />
+  {props.label}
+</span>

package/src/store/components/stock-badge.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import StockBadgeTemplate from "./stock-badge.mdx";
+
+export interface StockBadgeProps {
+	inventory: number;
+}
+
+export function StockBadge({ inventory }: StockBadgeProps) {
+	const status = inventory <= 0 ? "out" : inventory <= 5 ? "low" : "in";
+	const label =
+		inventory <= 0
+			? "Out of stock"
+			: inventory <= 5
+				? `Only ${inventory} left`
+				: "In stock";
+
+	return <StockBadgeTemplate status={status} label={label} />;
+}