@86d-app/products 0.0.4 → 0.0.13

package/src/store/components/product-detail.tsx

@@ -3,6 +3,7 @@
 import { useStoreContext } from "@86d-app/core/client";
 import { useEffect, useRef, useState } from "react";
 import {
+	normalizeCartQueryData,
 	useCartMutation,
 	useProductsApi,
 	useReviewsApi,
@@ -13,11 +14,13 @@ import type {
 	ProductWithVariants,
 	ReviewsResponse,
 } from "./_types";
-import { formatPrice } from "./_utils";
+import { formatPrice, imageUrl } from "./_utils";
 import { BackInStockNotify } from "./back-in-stock-notify";
 import ProductDetailTemplate from "./product-detail.mdx";
+import { ProductQASection } from "./product-qa-section";
 import { ProductReviewsSection } from "./product-reviews-section";
 import { RecentlyViewedProducts } from "./recently-viewed";
+import { RecommendedProducts } from "./recommended-products";
 import { RelatedProducts } from "./related-products";
 import { StarDisplay } from "./star-display";
 import { StockBadge } from "./stock-badge";
@@ -36,12 +39,13 @@ export function ProductDetail(props: ProductDetailProps) {
 	// biome-ignore lint/suspicious/noExplicitAny: store context shape varies per app
 	const store = useStoreContext<{ cart: any }>();
 
-	const { data, isLoading } = api.getProduct.useQuery(
+	const { data, isLoading, isError } = api.getProduct.useQuery(
 		{ params: { id: slug ?? "" } },
 		{ enabled: !!slug },
 	) as {
 		data: { product: ProductWithVariants } | undefined;
 		isLoading: boolean;
+		isError: boolean;
 	};
 
 	const product = data?.product ?? null;
@@ -63,6 +67,24 @@ export function ProductDetail(props: ProductDetailProps) {
 	const [qty, setQty] = useState(1);
 	const [added, setAdded] = useState(false);
 
+	type AddToCartResponse = {
+		cart: { id: string };
+		items: {
+			id: string;
+			productId: string;
+			variantId?: string | null;
+			quantity: number;
+			price: number;
+			productName: string;
+			productSlug: string;
+			productImage?: string | null;
+			variantName?: string | null;
+			variantOptions?: Record<string, string> | null;
+		}[];
+		itemCount: number;
+		subtotal: number;
+	};
+
 	const trackedRef = useRef<string | null>(null);
 	useEffect(() => {
 		if (product && trackedRef.current !== product.id) {
@@ -74,7 +96,7 @@ export function ProductDetail(props: ProductDetailProps) {
 					name: product.name,
 					slug: product.slug,
 					price: product.price,
-					image: product.images[0],
+					image: imageUrl(product.images[0]),
 				},
 			});
 		}
@@ -88,9 +110,13 @@ export function ProductDetail(props: ProductDetailProps) {
 	}, [product?.id]);
 
 	const addToCartMutation = cartApi.addToCart.useMutation({
-		onSuccess: () => {
-			void cartApi.getCart.invalidate();
+		onSuccess: (data: AddToCartResponse) => {
+			store.cart.setItemCount(data.itemCount);
 			store.cart.openDrawer();
+			cartApi.queryClient.setQueryData(
+				cartApi.getCart.getQueryKey(),
+				normalizeCartQueryData(data),
+			);
 			setAdded(true);
 			setTimeout(() => setAdded(false), 2000);
 			if (product) {
@@ -136,6 +162,25 @@ export function ProductDetail(props: ProductDetailProps) {
 		);
 	}
 
+	if (isError) {
+		return (
+			<div className="flex flex-col items-center justify-center py-24 text-center">
+				<p className="font-medium text-foreground text-sm">
+					Something went wrong
+				</p>
+				<p className="mt-1 text-muted-foreground text-sm">
+					We couldn&apos;t load this product. Please try again.
+				</p>
+				<a
+					href="/products"
+					className="mt-3 text-muted-foreground text-sm transition-colors hover:text-foreground"
+				>
+					Back to products
+				</a>
+			</div>
+		);
+	}
+
 	if (!product) {
 		return (
 			<div className="flex flex-col items-center justify-center py-24 text-center">
@@ -195,7 +240,7 @@ export function ProductDetail(props: ProductDetailProps) {
 			price: displayPrice,
 			productName: product.name,
 			productSlug: product.slug,
-			productImage: product.images[0],
+			productImage: imageUrl(product.images[0]),
 			variantName: selectedVariant?.name,
 			variantOptions: selectedVariant?.options,
 		});
@@ -222,7 +267,7 @@ export function ProductDetail(props: ProductDetailProps) {
 			<div className="aspect-square overflow-hidden rounded-lg bg-muted">
 				{product.images[selectedImage] ? (
 					<img
-						src={product.images[selectedImage]}
+						src={imageUrl(product.images[selectedImage])}
 						alt={product.name}
 						className="h-full w-full object-cover object-center"
 					/>
@@ -261,7 +306,7 @@ export function ProductDetail(props: ProductDetailProps) {
 							}`}
 						>
 							<img
-								src={img}
+								src={imageUrl(img)}
 								alt={`${product.name} view ${i + 1}`}
 								className="h-full w-full object-cover"
 							/>
@@ -481,6 +526,8 @@ export function ProductDetail(props: ProductDetailProps) {
 			descriptionBlock={descriptionBlock}
 			tagsBlock={tagsBlock}
 			reviewsSection={<ProductReviewsSection productId={product.id} />}
+			questionsSection={<ProductQASection productId={product.id} />}
+			recommendedProducts={<RecommendedProducts productId={product.id} />}
 			relatedProducts={<RelatedProducts productId={product.id} />}
 			recentlyViewed={<RecentlyViewedProducts excludeProductId={product.id} />}
 		/>

package/src/store/components/product-listing.tsx

@@ -44,11 +44,14 @@ export function ProductListing({
 	if (inStock) queryInput.inStock = "true";
 	if (tag) queryInput.tag = tag;
 
-	const { data: productsData, isLoading } = api.listProducts.useQuery(
-		queryInput,
-	) as {
+	const {
+		data: productsData,
+		isLoading,
+		isError,
+	} = api.listProducts.useQuery(queryInput) as {
 		data: { products: Product[]; total: number } | undefined;
 		isLoading: boolean;
+		isError: boolean;
 	};
 
 	const { data: categoriesData } = api.listCategories.useQuery() as {
@@ -116,6 +119,7 @@ export function ProductListing({
 
 			{categories.length > 0 && (
 				<select
+					aria-label="Filter by category"
 					value={category}
 					onChange={(e) => {
 						setCategory(e.target.value);
@@ -133,6 +137,7 @@ export function ProductListing({
 			)}
 
 			<select
+				aria-label="Sort products"
 				value={`${sort}:${order}`}
 				onChange={(e) => {
 					const [s, o] = e.target.value.split(":");
@@ -350,7 +355,23 @@ export function ProductListing({
 			</div>
 		) : null;
 
-	const gridContent = isLoading ? (
+	const gridContent = isError ? (
+		<div className="flex flex-col items-center justify-center py-20 text-center">
+			<p className="font-medium text-foreground text-sm">
+				Something went wrong
+			</p>
+			<p className="mt-1 text-muted-foreground text-sm">
+				We couldn&apos;t load products right now. Please try again.
+			</p>
+			<button
+				type="button"
+				onClick={() => window.location.reload()}
+				className="mt-4 rounded-full border border-border px-4 py-1.5 text-foreground text-xs transition-colors hover:bg-muted"
+			>
+				Refresh page
+			</button>
+		</div>
+	) : isLoading ? (
 		<div className="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 lg:grid-cols-4">
 			{Array.from({ length: pageSize }).map((_, i) => (
 				<div key={i}>

package/src/store/components/product-qa-section.mdx

@@ -0,0 +1,21 @@
+<section id="questions" className="border-border/50 border-t py-10">
+  {/* Header */}
+  <div className="mb-6 flex flex-wrap items-center justify-between gap-4">
+    <div>
+      <h2 className="font-display font-semibold text-foreground text-lg tracking-tight sm:text-xl">
+        Questions & Answers
+      </h2>
+      {props.summaryDisplay}
+    </div>
+    {props.toggleFormButton}
+  </div>
+
+  {/* Question form */}
+  {props.formContent}
+
+  {/* Empty state */}
+  {props.emptyState}
+
+  {/* Questions list */}
+  {props.questionsContent}
+</section>