@86d-app/products 0.0.4 → 0.0.13

package/src/service.ts

@@ -0,0 +1,312 @@
+import type { ModuleController } from "@86d-app/core";
+
+export interface Product {
+	id: string;
+	name: string;
+	slug: string;
+	description?: string | undefined;
+	shortDescription?: string | undefined;
+	price: number;
+	compareAtPrice?: number | undefined;
+	costPrice?: number | undefined;
+	sku?: string | undefined;
+	barcode?: string | undefined;
+	inventory: number;
+	trackInventory: boolean;
+	allowBackorder: boolean;
+	status: "draft" | "active" | "archived";
+	categoryId?: string | undefined;
+	images: string[];
+	tags: string[];
+	metadata?: Record<string, unknown> | undefined;
+	weight?: number | undefined;
+	weightUnit?: "kg" | "lb" | "oz" | "g" | undefined;
+	isFeatured: boolean;
+	createdAt: Date;
+	updatedAt: Date;
+}
+
+export interface ProductVariant {
+	id: string;
+	productId: string;
+	name: string;
+	sku?: string | undefined;
+	barcode?: string | undefined;
+	price: number;
+	compareAtPrice?: number | undefined;
+	costPrice?: number | undefined;
+	inventory: number;
+	options: Record<string, string>;
+	images: string[];
+	weight?: number | undefined;
+	weightUnit?: "kg" | "lb" | "oz" | "g" | undefined;
+	position: number;
+	createdAt: Date;
+	updatedAt: Date;
+}
+
+export interface Category {
+	id: string;
+	name: string;
+	slug: string;
+	description?: string | undefined;
+	parentId?: string | undefined;
+	image?: string | undefined;
+	position: number;
+	isVisible: boolean;
+	metadata?: Record<string, unknown> | undefined;
+	createdAt: Date;
+	updatedAt: Date;
+}
+
+export interface CategoryWithChildren extends Category {
+	children: CategoryWithChildren[];
+}
+
+export interface ProductWithVariants extends Product {
+	variants: ProductVariant[];
+	category?: Category | undefined;
+}
+
+export interface Collection {
+	id: string;
+	name: string;
+	slug: string;
+	description?: string | undefined;
+	image?: string | undefined;
+	isFeatured: boolean;
+	isVisible: boolean;
+	position: number;
+	metadata?: Record<string, unknown> | undefined;
+	createdAt: Date;
+	updatedAt: Date;
+}
+
+export interface CollectionProduct {
+	id: string;
+	collectionId: string;
+	productId: string;
+	position: number;
+	createdAt: Date;
+}
+
+export interface CollectionWithProducts extends Collection {
+	products: Product[];
+}
+
+export interface ImportProductRow {
+	name: string;
+	slug?: string | undefined;
+	price: number | string;
+	sku?: string | undefined;
+	barcode?: string | undefined;
+	description?: string | undefined;
+	shortDescription?: string | undefined;
+	compareAtPrice?: number | string | undefined;
+	costPrice?: number | string | undefined;
+	inventory?: number | string | undefined;
+	status?: string | undefined;
+	category?: string | undefined;
+	tags?: string[] | undefined;
+	weight?: number | string | undefined;
+	weightUnit?: string | undefined;
+	featured?: boolean | undefined;
+	trackInventory?: boolean | undefined;
+	allowBackorder?: boolean | undefined;
+}
+
+export interface ImportError {
+	row: number;
+	field: string;
+	message: string;
+}
+
+export interface ImportResult {
+	created: number;
+	updated: number;
+	errors: ImportError[];
+}
+
+export interface CreateProductParams {
+	name: string;
+	slug: string;
+	price: number;
+	description?: string | undefined;
+	shortDescription?: string | undefined;
+	compareAtPrice?: number | undefined;
+	costPrice?: number | undefined;
+	sku?: string | undefined;
+	barcode?: string | undefined;
+	inventory?: number | undefined;
+	trackInventory?: boolean | undefined;
+	allowBackorder?: boolean | undefined;
+	status?: "draft" | "active" | "archived" | undefined;
+	categoryId?: string | undefined;
+	images?: string[] | undefined;
+	tags?: string[] | undefined;
+	metadata?: Record<string, unknown> | undefined;
+	weight?: number | undefined;
+	weightUnit?: "kg" | "lb" | "oz" | "g" | undefined;
+	isFeatured?: boolean | undefined;
+}
+
+export interface CreateVariantParams {
+	productId: string;
+	name: string;
+	price: number;
+	options: Record<string, string>;
+	sku?: string | undefined;
+	barcode?: string | undefined;
+	compareAtPrice?: number | undefined;
+	costPrice?: number | undefined;
+	inventory?: number | undefined;
+	images?: string[] | undefined;
+	weight?: number | undefined;
+	weightUnit?: "kg" | "lb" | "oz" | "g" | undefined;
+	position?: number | undefined;
+}
+
+export interface CreateCategoryParams {
+	name: string;
+	slug: string;
+	description?: string | undefined;
+	parentId?: string | undefined;
+	image?: string | undefined;
+	position?: number | undefined;
+	isVisible?: boolean | undefined;
+	metadata?: Record<string, unknown> | undefined;
+}
+
+export interface CreateCollectionParams {
+	name: string;
+	slug: string;
+	description?: string | undefined;
+	image?: string | undefined;
+	isFeatured?: boolean | undefined;
+	isVisible?: boolean | undefined;
+	position?: number | undefined;
+	metadata?: Record<string, unknown> | undefined;
+}
+
+export interface ListProductsParams {
+	page?: number | undefined;
+	limit?: number | undefined;
+	category?: string | undefined;
+	status?: string | undefined;
+	featured?: boolean | undefined;
+	search?: string | undefined;
+	sort?: string | undefined;
+	order?: string | undefined;
+	minPrice?: number | undefined;
+	maxPrice?: number | undefined;
+	inStock?: boolean | undefined;
+	tag?: string | undefined;
+}
+
+export interface ProductController extends ModuleController {
+	// ── Products ──
+	createProduct(params: CreateProductParams): Promise<Product>;
+	getProduct(id: string): Promise<Product | null>;
+	getProductBySlug(slug: string): Promise<Product | null>;
+	getProductWithVariants(id: string): Promise<ProductWithVariants | null>;
+	listProducts(params?: ListProductsParams): Promise<{
+		products: ProductWithVariants[];
+		total: number;
+		page: number;
+		limit: number;
+	}>;
+	searchProducts(q: string, limit?: number): Promise<Product[]>;
+	getFeaturedProducts(limit?: number): Promise<Product[]>;
+	getProductsByCategory(categoryId: string): Promise<Product[]>;
+	getRelatedProducts(
+		id: string,
+		limit?: number,
+	): Promise<{ products: Product[] }>;
+	updateProduct(id: string, params: Partial<Product>): Promise<Product>;
+	deleteProduct(id: string): Promise<{ success: boolean }>;
+
+	// ── Inventory ──
+	checkAvailability(
+		productId: string,
+		variantId?: string,
+		quantity?: number,
+	): Promise<{
+		available: boolean;
+		inventory: number;
+		allowBackorder: boolean;
+	}>;
+	decrementInventory(
+		productId: string,
+		quantity: number,
+		variantId?: string,
+	): Promise<{ success: boolean }>;
+	incrementInventory(
+		productId: string,
+		quantity: number,
+		variantId?: string,
+	): Promise<{ success: boolean }>;
+
+	// ── Variants ──
+	getVariant(id: string): Promise<ProductVariant | null>;
+	getVariantsByProduct(productId: string): Promise<ProductVariant[]>;
+	createVariant(params: CreateVariantParams): Promise<ProductVariant>;
+	updateVariant(
+		id: string,
+		params: Partial<ProductVariant>,
+	): Promise<ProductVariant>;
+	deleteVariant(id: string): Promise<{ success: boolean }>;
+
+	// ── Categories ──
+	getCategory(id: string): Promise<Category | null>;
+	getCategoryBySlug(slug: string): Promise<Category | null>;
+	listCategories(params?: {
+		page?: number;
+		limit?: number;
+		parentId?: string;
+		visible?: boolean;
+	}): Promise<{ categories: Category[]; page: number; limit: number }>;
+	getCategoryTree(): Promise<CategoryWithChildren[]>;
+	createCategory(params: CreateCategoryParams): Promise<Category>;
+	updateCategory(id: string, params: Partial<Category>): Promise<Category>;
+	deleteCategory(id: string): Promise<{ success: boolean }>;
+
+	// ── Bulk ──
+	bulkUpdateStatus(
+		ids: string[],
+		status: "draft" | "active" | "archived",
+	): Promise<{ updated: number }>;
+	bulkDelete(ids: string[]): Promise<{ deleted: number }>;
+
+	// ── Import ──
+	importProducts(rows: ImportProductRow[]): Promise<ImportResult>;
+
+	// ── Collections ──
+	getCollection(id: string): Promise<Collection | null>;
+	getCollectionBySlug(slug: string): Promise<Collection | null>;
+	listCollections(params?: {
+		page?: number;
+		limit?: number;
+		featured?: boolean;
+		visible?: boolean;
+	}): Promise<{ collections: Collection[]; page: number; limit: number }>;
+	searchCollections(q: string, limit?: number): Promise<Collection[]>;
+	getCollectionWithProducts(id: string): Promise<CollectionWithProducts | null>;
+	createCollection(params: CreateCollectionParams): Promise<Collection>;
+	updateCollection(
+		id: string,
+		params: Partial<Collection>,
+	): Promise<Collection>;
+	deleteCollection(id: string): Promise<{ success: boolean }>;
+	addProductToCollection(
+		collectionId: string,
+		productId: string,
+		position?: number,
+	): Promise<CollectionProduct>;
+	removeProductFromCollection(
+		collectionId: string,
+		productId: string,
+	): Promise<{ success: boolean }>;
+	listCollectionProducts(
+		collectionId: string,
+	): Promise<{ products: Product[] }>;
+}

package/src/store/components/_hooks.ts

@@ -3,6 +3,53 @@
 import { useModuleClient } from "@86d-app/core/client";
 import { useCallback, useRef } from "react";
 
+type RawCartItem = {
+	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;
+};
+
+type AddToCartResponse = {
+	cart: { id: string };
+	items: RawCartItem[];
+	itemCount: number;
+	subtotal: number;
+};
+
+export function normalizeCartQueryData(data: AddToCartResponse) {
+	return {
+		id: data.cart.id,
+		items: data.items.map((item) => ({
+			id: item.id,
+			productId: item.productId,
+			variantId: item.variantId ?? null,
+			quantity: item.quantity,
+			price: item.price,
+			product: {
+				name: item.productName,
+				price: item.price,
+				images: item.productImage ? [item.productImage] : [],
+				slug: item.productSlug,
+			},
+			variant: item.variantName
+				? {
+						name: item.variantName,
+						options: item.variantOptions ?? {},
+					}
+				: null,
+		})),
+		itemCount: data.itemCount,
+		subtotal: data.subtotal,
+	};
+}
+
 export function useProductsApi() {
 	const client = useModuleClient();
 	return {
@@ -20,6 +67,7 @@ export function useCartMutation() {
 	return {
 		addToCart: client.module("cart").store["/cart"],
 		getCart: client.module("cart").store["/cart/get"],
+		queryClient: client.queryClient,
 	};
 }
 
@@ -53,6 +101,39 @@ export function useAnalyticsApi() {
 	};
 }
 
+export function useProductQaApi() {
+	const client = useModuleClient();
+	return {
+		listProductQuestions:
+			client.module("product-qa").store[
+				"/product-qa/products/:productId/questions"
+			],
+		productQaSummary:
+			client.module("product-qa").store[
+				"/product-qa/products/:productId/summary"
+			],
+		submitQuestion: client.module("product-qa").store["/product-qa/questions"],
+		listAnswers:
+			client.module("product-qa").store[
+				"/product-qa/questions/:questionId/answers"
+			],
+		upvoteQuestion:
+			client.module("product-qa").store["/product-qa/questions/:id/upvote"],
+		upvoteAnswer:
+			client.module("product-qa").store["/product-qa/answers/:id/upvote"],
+	};
+}
+
+export function useRecommendationsApi() {
+	const client = useModuleClient();
+	return {
+		getForProduct:
+			client.module("recommendations").store["/recommendations/:productId"],
+		getTrending:
+			client.module("recommendations").store["/recommendations/trending"],
+	};
+}
+
 /** Fire-and-forget analytics event via the analytics module endpoint. */
 export function useTrack() {
 	const client = useModuleClient();

package/src/store/components/_utils.ts

@@ -1,3 +1,11 @@
+/** Extract a URL string from an image entry (handles both string and {url,alt} formats). */
+export function imageUrl(img: unknown): string {
+	if (typeof img === "string") return img;
+	if (img && typeof img === "object" && "url" in img)
+		return String((img as { url: string }).url);
+	return "";
+}
+
 export function formatPrice(cents: number): string {
 	return new Intl.NumberFormat("en-US", {
 		style: "currency",

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

@@ -15,7 +15,7 @@ export function CollectionDetail(props: CollectionDetailProps) {
 	const client = useModuleClient();
 	const getCollection = client.module("products").store["/collections/:id"];
 
-	const { data, isLoading } = getCollection.useQuery(
+	const { data, isLoading, isError } = getCollection.useQuery(
 		{ params: { id: slug ?? "" } },
 		{ enabled: !!slug },
 	) as {
@@ -25,6 +25,7 @@ export function CollectionDetail(props: CollectionDetailProps) {
 			  }
 			| undefined;
 		isLoading: boolean;
+		isError: boolean;
 	};
 
 	const collection = data?.collection ?? null;
@@ -63,6 +64,25 @@ export function CollectionDetail(props: CollectionDetailProps) {
 		);
 	}
 
+	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 collection. Please try again.
+				</p>
+				<a
+					href="/collections"
+					className="mt-3 text-muted-foreground text-sm transition-colors hover:text-foreground"
+				>
+					Back to collections
+				</a>
+			</div>
+		);
+	}
+
 	if (!collection) {
 		return (
 			<div className="flex flex-col items-center justify-center py-24 text-center">

package/src/store/components/collection-grid.tsx

@@ -21,13 +21,17 @@ export function CollectionGrid({
 	const queryInput: Record<string, any> = {};
 	if (featured) queryInput.featured = "true";
 
-	const { data, isLoading } = listCollections.useQuery(queryInput) as {
+	const { data, isLoading, isError } = listCollections.useQuery(queryInput) as {
 		data: { collections: CollectionCardData[] } | undefined;
 		isLoading: boolean;
+		isError: boolean;
 	};
 
 	const collections = data?.collections ?? [];
 
+	// Silently hide on error — homepage sections are non-critical
+	if (isError) return null;
+
 	if (isLoading) {
 		return (
 			<section className="py-12 sm:py-14">

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

@@ -14,15 +14,19 @@ export function FeaturedProducts({
 	title = "Featured Products",
 }: FeaturedProductsProps) {
 	const api = useProductsApi();
-	const { data, isLoading } = api.getFeaturedProducts.useQuery({
+	const { data, isLoading, isError } = api.getFeaturedProducts.useQuery({
 		limit: String(limit),
 	}) as {
 		data: { products: import("./_types").Product[] } | undefined;
 		isLoading: boolean;
+		isError: boolean;
 	};
 
 	const products = data?.products ?? [];
 
+	// Silently hide on error — homepage sections are non-critical
+	if (isError) return null;
+
 	if (isLoading) {
 		return (
 			<section className="py-12 sm:py-14">

package/src/store/components/index.tsx

@@ -12,6 +12,7 @@ import { ProductDetail } from "./product-detail";
 import { ProductListing } from "./product-listing";
 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 { StarPicker } from "./star-picker";
@@ -36,4 +37,5 @@ export default {
 	StockBadge,
 	ProductReviewsSection,
 	RecentlyViewedProducts,
+	RecommendedProducts,
 } satisfies MDXComponents;

package/src/store/components/product-card.mdx

@@ -60,7 +60,7 @@
         {props.priceFormatted}
       </span>
       {props.compareAtPriceFormatted && (
-        <span className="text-muted-foreground/60 text-xs tabular-nums line-through">
+        <span className="text-muted-foreground text-xs tabular-nums line-through">
           {props.compareAtPriceFormatted}
         </span>
       )}

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

@@ -2,9 +2,9 @@
 
 import { useStoreContext } from "@86d-app/core/client";
 import { memo } from "react";
-import { useCartMutation, useTrack } from "./_hooks";
+import { normalizeCartQueryData, useCartMutation, useTrack } from "./_hooks";
 import type { Product } from "./_types";
-import { formatPrice } from "./_utils";
+import { formatPrice, imageUrl } from "./_utils";
 import ProductCardTemplate from "./product-card.mdx";
 
 export interface ProductCardProps {
@@ -22,9 +22,29 @@ export const ProductCard = memo(function ProductCard({
 	const store = useStoreContext<{ cart: any }>();
 
 	const addToCartMutation = cartApi.addToCart.useMutation({
-		onSuccess: () => {
-			void cartApi.getCart.invalidate();
+		onSuccess: (data: {
+			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;
+		}) => {
+			store.cart.setItemCount(data.itemCount);
 			store.cart.openDrawer();
+			cartApi.queryClient.setQueryData(
+				cartApi.getCart.getQueryKey(),
+				normalizeCartQueryData(data),
+			);
 			track({
 				type: "addToCart",
 				productId: product.id,
@@ -34,7 +54,7 @@ export const ProductCard = memo(function ProductCard({
 		},
 	});
 
-	const image = product.images[0];
+	const image = imageUrl(product.images[0]);
 	const hasDiscount =
 		product.compareAtPrice != null && product.compareAtPrice > product.price;
 	const discountPct = hasDiscount

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

@@ -25,6 +25,8 @@
   </div>
 
   {props.reviewsSection}
+  {props.questionsSection}
+  {props.recommendedProducts}
   {props.relatedProducts}
   {props.recentlyViewed}
 </div>