@mohasinac/appkit 2.3.1 → 2.3.2

package/dist/features/products/components/ProductGrid.d.ts

@@ -9,12 +9,16 @@ interface ProductCardProps<T extends ProductItem = ProductItem> {
     onClick?: (product: T) => void;
     onAddToWishlist?: (productId: string) => void;
     isWishlisted?: boolean;
+    onAddToCart?: (product: T) => void;
+    onBuyNow?: (product: T) => void;
     className?: string;
 }
-export declare function ProductCard<T extends ProductItem = ProductItem>({ product, href, onClick, onAddToWishlist, isWishlisted, className, }: ProductCardProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ProductCard<T extends ProductItem = ProductItem>({ product, href, onClick, onAddToWishlist, isWishlisted, onAddToCart, onBuyNow, className, }: ProductCardProps<T>): import("react/jsx-runtime").JSX.Element;
 export interface ProductCardContext<T extends ProductItem = ProductItem> {
     onClick?: (product: T) => void;
     onWishlistToggle?: (productId: string) => void;
+    onAddToCart?: (product: T) => void;
+    onBuyNow?: (product: T) => void;
     isWishlisted: boolean;
 }
 interface ProductGridProps<T extends ProductItem = ProductItem> {
@@ -36,6 +40,8 @@ interface ProductGridProps<T extends ProductItem = ProductItem> {
     /** When provided, each card is wrapped in a Link using this href generator. */
     getProductHref?: (product: T) => string;
     onWishlistToggle?: (productId: string) => void;
+    onAddToCart?: (product: T) => void;
+    onBuyNow?: (product: T) => void;
     wishlistedIds?: Set<string>;
     /** Text shown when the list is empty and no `emptySlot` is provided. */
     emptyLabel?: string;
@@ -69,5 +75,5 @@ interface ProductGridProps<T extends ProductItem = ProductItem> {
      */
     view?: ViewMode;
 }
-export declare function ProductGrid<T extends ProductItem = ProductItem>({ products, renderCard, onProductClick, getProductHref, onWishlistToggle, wishlistedIds, emptyLabel, emptySlot, headerSlot, footerSlot, className, slots, total, currentPage, totalPages, view, }: ProductGridProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ProductGrid<T extends ProductItem = ProductItem>({ products, renderCard, onProductClick, getProductHref, onWishlistToggle, onAddToCart, onBuyNow, wishlistedIds, emptyLabel, emptySlot, headerSlot, footerSlot, className, slots, total, currentPage, totalPages, view, }: ProductGridProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/features/products/components/ProductGrid.js

@@ -7,7 +7,7 @@ import { formatCurrency } from "../../../utils/number.formatter";
 import { getDefaultCurrency, getDefaultCurrencySymbol } from "../../../core/baseline-resolver";
 import { normalizeRichTextHtml } from "../../../utils/string.formatter";
 import { safeDisplayName } from "../../../security";
-export function ProductCard({ product, href, onClick, onAddToWishlist, isWishlisted, className = "", }) {
+export function ProductCard({ product, href, onClick, onAddToWishlist, isWishlisted, onAddToCart, onBuyNow, className = "", }) {
     const discount = product.originalPrice && product.originalPrice > product.price
         ? Math.round(((product.originalPrice - product.price) / product.originalPrice) *
             100)
@@ -17,7 +17,18 @@ export function ProductCard({ product, href, onClick, onAddToWishlist, isWishlis
             : undefined, onClick: onClick && !href ? () => onClick(product) : undefined, className: `group relative flex h-full flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm transition hover:shadow-md dark:border-slate-700 dark:bg-slate-900 ${onClick || href ? "cursor-pointer" : ""} ${className}`, children: [_jsxs(Div, { className: "relative aspect-square overflow-hidden bg-neutral-100 dark:bg-slate-800", children: [product.mainImage ? (_jsx(Div, { role: "img", "aria-label": product.title, className: "h-full w-full bg-center bg-cover transition-transform duration-300 group-hover:scale-105", style: { backgroundImage: `url(${product.mainImage})` } })) : (_jsx(Div, { className: "h-full w-full bg-neutral-200 dark:bg-slate-700" })), discount && (_jsxs(Span, { className: "absolute left-2 top-2 rounded-full bg-red-500 px-2 py-0.5 text-xs font-bold text-white", children: ["-", discount, "%"] })), product.isAuction && (_jsx(Span, { className: "absolute right-2 top-2 rounded-full bg-amber-500 px-2 py-0.5 text-xs font-bold text-white", children: "Auction" })), onAddToWishlist && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: (e) => {
                             e.stopPropagation();
                             onAddToWishlist(product.id);
-                        }, "aria-label": isWishlisted ? "Remove from wishlist" : "Add to wishlist", className: "absolute bottom-2 right-2 flex h-8 w-8 items-center justify-center rounded-full bg-white/90 dark:bg-slate-800/90 text-neutral-600 dark:text-zinc-300 shadow transition hover:bg-white dark:hover:bg-slate-700 hover:text-red-500", children: isWishlisted ? "♥" : "♡" }))] }), _jsxs(Div, { className: "flex flex-1 flex-col border-t border-zinc-200/80 bg-zinc-50 p-3 dark:border-slate-700/80 dark:bg-slate-900", children: [_jsx(Text, { className: `${THEME_CONSTANTS.utilities.textClamp2} text-sm font-medium text-zinc-950 dark:text-white`, children: product.title }), product.description && (_jsx(RichText, { html: normalizeRichTextHtml(product.description), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: `mt-1 ${THEME_CONSTANTS.utilities.textClamp2} text-xs text-zinc-600 dark:text-zinc-400` })), product.sellerName && (_jsx(Text, { className: "mt-0.5 text-xs text-zinc-600 dark:text-zinc-400", children: safeDisplayName(product.sellerName, "Seller") })), _jsxs(Div, { className: "mt-2 flex items-baseline gap-2", children: [_jsx(Span, { className: "font-semibold text-zinc-950 dark:text-white", children: formatCurrency(product.price, getDefaultCurrency()) }), product.originalPrice && (_jsx(Span, { className: "text-xs text-zinc-500 line-through dark:text-zinc-400", children: formatCurrency(product.originalPrice, getDefaultCurrency()) }))] }), product.rating !== undefined && (_jsxs(Row, { className: "mt-1 gap-1", children: [_jsx(Span, { className: "text-xs text-yellow-500", children: "\u2605" }), _jsxs(Span, { className: "text-xs text-neutral-500 dark:text-zinc-400", children: [product.rating.toFixed(1), product.reviewCount ? ` (${product.reviewCount})` : ""] })] }))] })] }));
+                        }, "aria-label": isWishlisted ? "Remove from wishlist" : "Add to wishlist", className: "absolute bottom-2 right-2 flex h-8 w-8 items-center justify-center rounded-full bg-white/90 dark:bg-slate-800/90 text-neutral-600 dark:text-zinc-300 shadow transition hover:bg-white dark:hover:bg-slate-700 hover:text-red-500", children: isWishlisted ? "♥" : "♡" }))] }), _jsxs(Div, { className: "flex flex-1 flex-col border-t border-zinc-200/80 bg-zinc-50 p-3 dark:border-slate-700/80 dark:bg-slate-900", children: [_jsx(Text, { className: `${THEME_CONSTANTS.utilities.textClamp2} text-sm font-medium text-zinc-950 dark:text-white`, children: product.title }), product.description && (_jsx(RichText, { html: normalizeRichTextHtml(product.description), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: `mt-1 ${THEME_CONSTANTS.utilities.textClamp2} text-xs text-zinc-600 dark:text-zinc-400` })), (() => {
+                        const seller = safeDisplayName(product.sellerName, "");
+                        return seller ? (_jsxs(Text, { className: "mt-0.5 text-xs text-zinc-500 dark:text-zinc-400", children: ["by ", seller] })) : null;
+                    })(), _jsxs(Div, { className: "mt-2 flex items-baseline gap-2", children: [_jsx(Span, { className: "font-semibold text-zinc-950 dark:text-white", children: formatCurrency(product.price, getDefaultCurrency()) }), product.originalPrice && (_jsx(Span, { className: "text-xs text-zinc-500 line-through dark:text-zinc-400", children: formatCurrency(product.originalPrice, getDefaultCurrency()) }))] }), product.rating !== undefined && (_jsxs(Row, { className: "mt-1 gap-1", children: [_jsx(Span, { className: "text-xs text-yellow-500", children: "\u2605" }), _jsxs(Span, { className: "text-xs text-neutral-500 dark:text-zinc-400", children: [product.rating.toFixed(1), product.reviewCount ? ` (${product.reviewCount})` : ""] })] })), (onAddToCart || onBuyNow) && (_jsxs(Row, { className: "mt-3 gap-1.5", children: [onBuyNow && (_jsx(Button, { type: "button", onClick: (e) => {
+                                    e.stopPropagation();
+                                    e.preventDefault();
+                                    onBuyNow(product);
+                                }, className: "flex-1 rounded-lg bg-primary py-1.5 text-xs font-semibold text-white hover:bg-primary-600 transition-colors", children: "\u26A1 Buy Now" })), onAddToCart && (_jsx(Button, { type: "button", onClick: (e) => {
+                                    e.stopPropagation();
+                                    e.preventDefault();
+                                    onAddToCart(product);
+                                }, className: "flex-1 rounded-lg border border-primary py-1.5 text-xs font-semibold text-primary hover:bg-primary/5 transition-colors", children: "\uD83D\uDED2 Add to Cart" }))] }))] })] }));
     if (href) {
         return (_jsx(Link, { href: href, className: "block h-full", children: cardBody }));
     }
@@ -46,7 +57,7 @@ function ProductListRow({ product, onClick, onAddToWishlist, isWishlisted, }) {
                     onAddToWishlist(product.id);
                 }, "aria-label": isWishlisted ? "Remove from wishlist" : "Add to wishlist", className: "flex-shrink-0 w-[36px] h-[36px] flex items-center justify-center rounded-lg text-neutral-400 hover:text-red-500 transition-colors", children: isWishlisted ? "♥" : "♡" }))] }));
 }
-export function ProductGrid({ products, renderCard, onProductClick, getProductHref, onWishlistToggle, wishlistedIds, emptyLabel = "No products found", emptySlot, headerSlot, footerSlot, className = "", slots, total = 0, currentPage = 1, totalPages = 1, view = "card", }) {
+export function ProductGrid({ products, renderCard, onProductClick, getProductHref, onWishlistToggle, onAddToCart, onBuyNow, wishlistedIds, emptyLabel = "No products found", emptySlot, headerSlot, footerSlot, className = "", slots, total = 0, currentPage = 1, totalPages = 1, view = "card", }) {
     const isEmpty = products.length === 0;
     // Slot resolution: explicit props win over `slots` object
     const resolvedHeader = headerSlot ??
@@ -73,12 +84,14 @@ export function ProductGrid({ products, renderCard, onProductClick, getProductHr
                     const ctx = {
                         onClick: onProductClick,
                         onWishlistToggle,
+                        onAddToCart,
+                        onBuyNow,
                         isWishlisted: wishlistedIds?.has(p.id) ?? false,
                     };
                     const cardRenderer = renderCard ?? slots?.renderCard;
                     return cardRenderer ? (_jsx(React.Fragment, { children: cardRenderer === renderCard
                             ? renderCard(p, ctx)
-                            : slots.renderCard(p, i) }, p.id)) : (_jsx(ProductCard, { product: p, href: getProductHref ? getProductHref(p) : undefined, onClick: onProductClick, onAddToWishlist: onWishlistToggle, isWishlisted: ctx.isWishlisted }, p.id));
+                            : slots.renderCard(p, i) }, p.id)) : (_jsx(ProductCard, { product: p, href: getProductHref ? getProductHref(p) : undefined, onClick: onProductClick, onAddToWishlist: onWishlistToggle, onAddToCart: onAddToCart, onBuyNow: onBuyNow, isWishlisted: ctx.isWishlisted }, p.id));
                 }) }));
         }
         const gridClass = GRID_CLASSES.card;
@@ -86,12 +99,14 @@ export function ProductGrid({ products, renderCard, onProductClick, getProductHr
                 const ctx = {
                     onClick: onProductClick,
                     onWishlistToggle,
+                    onAddToCart,
+                    onBuyNow,
                     isWishlisted: wishlistedIds?.has(p.id) ?? false,
                 };
                 const cardRenderer = renderCard ?? slots?.renderCard;
                 return cardRenderer ? (_jsx(React.Fragment, { children: cardRenderer === renderCard
                         ? renderCard(p, ctx)
-                        : slots.renderCard(p, i) }, p.id)) : (_jsx(ProductCard, { product: p, href: getProductHref ? getProductHref(p) : undefined, onClick: onProductClick, onAddToWishlist: onWishlistToggle, isWishlisted: ctx.isWishlisted }, p.id));
+                        : slots.renderCard(p, i) }, p.id)) : (_jsx(ProductCard, { product: p, href: getProductHref ? getProductHref(p) : undefined, onClick: onProductClick, onAddToWishlist: onWishlistToggle, onAddToCart: onAddToCart, onBuyNow: onBuyNow, isWishlisted: ctx.isWishlisted }, p.id));
             }) }));
     };
     return (_jsxs(Div, { children: [resolvedHeader, isEmpty

package/dist/features/products/components/ProductTabsShell.d.ts

@@ -1,18 +1,10 @@
 import React from "react";
 export interface ProductTabsShellProps {
-    /** Pre-rendered description content (server RSC node) */
     descriptionContent?: React.ReactNode;
-    /** Pre-rendered specifications content (server RSC node) */
     specsContent?: React.ReactNode;
-    /** Pre-rendered reviews content (server RSC node) */
+    ingredientsContent?: React.ReactNode;
+    howToUseContent?: React.ReactNode;
     reviewsContent?: React.ReactNode;
     className?: string;
 }
-/**
- * RSC-safe tab shell for product detail pages.
- *
- * Accepts pre-rendered ReactNode children instead of render functions so the
- * component can be used inside a server component tree. (Functions cannot cross
- * the RSC serialisation boundary to a "use client" component.)
- */
-export declare function ProductTabsShell({ descriptionContent, specsContent, reviewsContent, className, }: ProductTabsShellProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ProductTabsShell({ descriptionContent, specsContent, ingredientsContent, howToUseContent, reviewsContent, className, }: ProductTabsShellProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/features/products/components/ProductTabsShell.js

@@ -1,26 +1,26 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-const TABS = [
+const ALL_TABS = [
     { id: "description", label: "Description" },
     { id: "specs", label: "Specifications" },
+    { id: "ingredients", label: "Ingredients" },
+    { id: "howToUse", label: "How to Use" },
     { id: "reviews", label: "Reviews" },
 ];
-/**
- * RSC-safe tab shell for product detail pages.
- *
- * Accepts pre-rendered ReactNode children instead of render functions so the
- * component can be used inside a server component tree. (Functions cannot cross
- * the RSC serialisation boundary to a "use client" component.)
- */
-export function ProductTabsShell({ descriptionContent, specsContent, reviewsContent, className = "", }) {
-    const visibleTabs = TABS.filter((t) => (t.id === "description" && descriptionContent != null) ||
-        (t.id === "specs" && specsContent != null) ||
-        (t.id === "reviews" && reviewsContent != null));
+export function ProductTabsShell({ descriptionContent, specsContent, ingredientsContent, howToUseContent, reviewsContent, className = "", }) {
+    const contentMap = {
+        description: descriptionContent,
+        specs: specsContent,
+        ingredients: ingredientsContent,
+        howToUse: howToUseContent,
+        reviews: reviewsContent,
+    };
+    const visibleTabs = ALL_TABS.filter((t) => contentMap[t.id] != null);
     const [activeTab, setActiveTab] = useState(visibleTabs[0]?.id ?? "description");
     if (visibleTabs.length === 0)
         return null;
-    return (_jsxs("div", { className: className, children: [_jsx("div", { className: "mb-6 flex gap-4 border-b border-zinc-200 dark:border-zinc-700", children: visibleTabs.map((t) => (_jsx("button", { type: "button", onClick: () => setActiveTab(t.id), className: `-mb-px pb-2.5 text-sm font-medium border-b-2 transition-colors ${activeTab === t.id
+    return (_jsxs("div", { className: `mt-8 ${className}`, children: [_jsx("div", { className: "mb-6 flex gap-1 overflow-x-auto border-b border-zinc-200 dark:border-zinc-700 pb-px", children: visibleTabs.map((t) => (_jsx("button", { type: "button", onClick: () => setActiveTab(t.id), className: `flex-shrink-0 -mb-px pb-3 px-4 text-sm font-medium border-b-2 transition-colors ${activeTab === t.id
                         ? "border-primary-500 text-primary-600 dark:text-primary-400"
-                        : "border-transparent text-neutral-500 hover:text-neutral-700 dark:hover:text-zinc-300"}`, children: t.label }, t.id))) }), _jsxs("div", { children: [activeTab === "description" && descriptionContent, activeTab === "specs" && specsContent, activeTab === "reviews" && reviewsContent] })] }));
+                        : "border-transparent text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300"}`, children: t.label }, t.id))) }), _jsx("div", { children: visibleTabs.map((t) => (_jsx("div", { hidden: activeTab !== t.id, children: contentMap[t.id] }, t.id))) })] }));
 }

package/dist/features/products/components/ProductsIndexListing.js

@@ -1,27 +1,91 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { Search, SlidersHorizontal, LayoutGrid, List, X } from "lucide-react";
+import { useRouter } from "next/navigation";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useProducts } from "../hooks/useProducts";
-import { Div, Input, Pagination, SortDropdown, SlottedListingView, } from "../../../ui";
+import { Pagination, SortDropdown } from "../../../ui";
 import { ROUTES } from "../../../next";
-import { ProductGrid, ProductFilters } from ".";
+import { ProductGrid, ProductFilters, PRODUCT_PUBLIC_SORT_OPTIONS } from ".";
+import { useSession } from "../../../react/contexts/SessionContext";
+import { useWishlistWithGuest } from "../../wishlist/hooks/useWishlistWithGuest";
+import { apiClient } from "../../../http";
+import { useCategoryTree, categoriesToFacetOptions } from "../../categories/hooks/useCategoryTree";
 export function ProductsIndexListing({ initialData }) {
+    const router = useRouter();
     const table = useUrlTable({ defaults: { pageSize: "24", sort: "-createdAt" } });
+    const [searchInput, setSearchInput] = useState(table.get("q") || "");
+    const [filterOpen, setFilterOpen] = useState(false);
+    const [view, setView] = useState(table.get("view") || "card");
+    const { user } = useSession();
+    const wl = useWishlistWithGuest(user?.uid ?? null);
+    const { categories } = useCategoryTree();
+    const categoryOptions = categoriesToFacetOptions(categories);
     const params = {
         q: table.get("q") || undefined,
         category: table.get("category") || undefined,
         minPrice: table.get("minPrice") ? Number(table.get("minPrice")) : undefined,
         maxPrice: table.get("maxPrice") ? Number(table.get("maxPrice")) : undefined,
         condition: table.get("condition") || undefined,
-        sort: table.get("sort") || undefined,
+        brand: table.get("brand") || undefined,
+        storeId: table.get("storeId") || undefined,
+        freeShipping: table.get("freeShipping") === "true" ? true : undefined,
+        sort: table.get("sort") || "-createdAt",
         page: table.getNumber("page", 1),
         perPage: table.getNumber("pageSize", 24),
         isAuction: false,
     };
     const { products, total, totalPages, page, isLoading } = useProducts(params, { initialData });
-    return (_jsx(Div, { className: "min-h-screen", children: _jsx(SlottedListingView, { portal: "public", manageSearch: true, manageSort: true, inlineToolbar: true, renderSearch: (search, setSearch) => (_jsx(Input, { value: search, onChange: (e) => setSearch(e.target.value), placeholder: "Search products...", className: "max-w-sm" })), renderSort: (value, onChange) => (_jsx(SortDropdown, { value: value, onChange: onChange, options: [
-                    { value: "-createdAt", label: "Newest First" },
-                    { value: "-price", label: "Price: High to Low" },
-                    { value: "price", label: "Price: Low to High" },
-                ] })), renderFilters: () => _jsx(ProductFilters, { table: table }), renderTable: () => (_jsx(ProductGrid, { products: products, getProductHref: (p) => String(ROUTES.PUBLIC.PRODUCT_DETAIL(p.slug || p.id)), view: table.get("view") || "card" })), renderPagination: () => (_jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) })), total: total, isLoading: isLoading }) }));
+    const commitSearch = useCallback(() => {
+        table.set("q", searchInput.trim());
+        table.setPage(1);
+    }, [searchInput, table]);
+    const handleSearchKeyDown = (e) => {
+        if (e.key === "Enter")
+            commitSearch();
+    };
+    const handleViewToggle = (next) => {
+        setView(next);
+        table.set("view", next);
+    };
+    const closeFilters = () => setFilterOpen(false);
+    const handleWishlistToggle = useCallback(async (productId) => {
+        const isWishlisted = wl.wishlistedIds?.has(productId) ?? false;
+        if (wl.isGuest) {
+            const guestWl = wl.guestWishlist;
+            if (isWishlisted)
+                guestWl?.remove(productId, "product");
+            else
+                guestWl?.add(productId, "product");
+        }
+        else {
+            if (isWishlisted)
+                await apiClient.delete(`/api/user/wishlist/${productId}`);
+            else
+                await apiClient.post("/api/user/wishlist", { productId });
+        }
+    }, [wl]);
+    const handleAddToCart = useCallback(async (product) => {
+        try {
+            await apiClient.post("/api/cart", { productId: product.id, quantity: 1 });
+        }
+        catch {
+            // silently ignore cart errors on listing page
+        }
+    }, []);
+    const handleBuyNow = useCallback(async (product) => {
+        try {
+            await apiClient.post("/api/cart", { productId: product.id, quantity: 1 });
+        }
+        catch {
+            // silently ignore cart errors; still navigate
+        }
+        router.push("/cart");
+    }, [router]);
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx("div", { className: `sticky top-0 z-20 border-b border-zinc-200 dark:border-slate-700 bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm py-2.5 px-4`, children: _jsxs("div", { className: "flex items-center gap-2.5 max-w-full", children: [_jsxs("button", { type: "button", onClick: () => setFilterOpen(true), className: "flex shrink-0 items-center gap-2 rounded-lg border border-zinc-300 dark:border-slate-600 px-3.5 py-2 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: "Filters" })] }), _jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-900", children: [_jsx("input", { type: "text", value: searchInput, onChange: (e) => setSearchInput(e.target.value), onKeyDown: handleSearchKeyDown, placeholder: "Search products...", className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 outline-none" }), _jsx("button", { type: "button", onClick: commitSearch, className: "flex shrink-0 items-center justify-center px-3 py-2 text-zinc-400 hover:text-primary dark:hover:text-primary-400 transition-colors", "aria-label": "Search", children: _jsx(Search, { className: "h-4 w-4" }) })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5 text-sm text-zinc-500 dark:text-zinc-400", children: [_jsx("span", { className: "hidden md:inline whitespace-nowrap", children: "Sort by" }), _jsx(SortDropdown, { value: table.get("sort") || "-createdAt", onChange: (v) => { table.set("sort", v); table.setPage(1); }, options: PRODUCT_PUBLIC_SORT_OPTIONS })] }), _jsxs("div", { className: "flex shrink-0 items-center rounded-lg border border-zinc-300 dark:border-slate-600 overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => handleViewToggle("card"), "aria-label": "Grid view", className: `p-2 transition-colors ${view === "card"
+                                        ? "bg-primary text-white"
+                                        : "text-zinc-500 hover:bg-zinc-50 dark:hover:bg-slate-800 dark:text-zinc-400"}`, children: _jsx(LayoutGrid, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => handleViewToggle("list"), "aria-label": "List view", className: `p-2 transition-colors ${view === "list"
+                                        ? "bg-primary text-white"
+                                        : "text-zinc-500 hover:bg-zinc-50 dark:hover:bg-slate-800 dark:text-zinc-400"}`, children: _jsx(List, { className: "h-4 w-4" }) })] })] }) }), _jsxs("div", { className: "py-6", children: [isLoading ? (_jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4", children: Array.from({ length: 10 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-square bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-3 space-y-2", children: [_jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" }), _jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" })] })] }, i))) })) : (_jsx(ProductGrid, { products: products, getProductHref: (p) => String(ROUTES.PUBLIC.PRODUCT_DETAIL(p.slug || p.id)), view: view, onWishlistToggle: handleWishlistToggle, wishlistedIds: wl.wishlistedIds, onAddToCart: handleAddToCart, onBuyNow: handleBuyNow })), totalPages > 1 && (_jsx("div", { className: "mt-8 flex justify-center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }))] }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: closeFilters }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsxs("span", { className: "flex items-center gap-2 text-base font-semibold text-zinc-900 dark:text-zinc-100", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), "Filters"] }), _jsx("button", { type: "button", onClick: closeFilters, "aria-label": "Close filters", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4", children: _jsx(ProductFilters, { table: table, currencyPrefix: "\u20B9", categoryOptions: categoryOptions }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsx("button", { type: "button", onClick: closeFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors", children: "Apply filters" }) })] })] }))] }));
 }

package/dist/features/products/components/ProductsIndexPageView.d.ts

@@ -1 +1,6 @@
-export declare function ProductsIndexPageView(): Promise<import("react/jsx-runtime").JSX.Element>;
+type SearchParams = Record<string, string | string[]>;
+export interface ProductsIndexPageViewProps {
+    searchParams?: SearchParams;
+}
+export declare function ProductsIndexPageView({ searchParams }: ProductsIndexPageViewProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/features/products/components/ProductsIndexPageView.js

@@ -1,17 +1,50 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { productRepository } from "../../../repositories";
+import { ROUTES } from "../../../constants";
 import { Container, Heading, Main, Section } from "../../../ui";
 import { AdSlot } from "../../homepage/components/AdSlot";
 import { ProductsIndexListing } from "./ProductsIndexListing";
-export async function ProductsIndexPageView() {
+function sp(params, key) {
+    const v = params[key];
+    return Array.isArray(v) ? v[0] ?? "" : v ?? "";
+}
+function buildProductFilters(params) {
+    const parts = ["status==published", "isAuction==false"];
+    const condition = sp(params, "condition");
+    if (condition) {
+        const values = condition.split("|").filter(Boolean);
+        if (values.length === 1)
+            parts.push(`condition==${values[0]}`);
+        else if (values.length > 1)
+            parts.push(`condition==${values.join("|")}`);
+    }
+    const minPrice = sp(params, "minPrice");
+    const maxPrice = sp(params, "maxPrice");
+    if (minPrice)
+        parts.push(`price>=${minPrice}`);
+    if (maxPrice)
+        parts.push(`price<=${maxPrice}`);
+    const sellerId = sp(params, "seller");
+    if (sellerId)
+        parts.push(`sellerId==${sellerId}`);
+    const freeShipping = sp(params, "freeShipping");
+    if (freeShipping === "true")
+        parts.push("freeShipping==true");
+    return parts.join(",");
+}
+export async function ProductsIndexPageView({ searchParams = {} }) {
+    const sort = sp(searchParams, "sort") || "-createdAt";
+    const page = Number(sp(searchParams, "page")) || 1;
+    const pageSize = Number(sp(searchParams, "pageSize")) || 24;
+    const filters = buildProductFilters(searchParams);
     const result = await productRepository
         .list({
-        filters: "status==published,isAuction==false",
-        sorts: "-createdAt",
-        page: 1,
-        pageSize: 24,
+        filters,
+        sorts: sort,
+        page,
+        pageSize,
     })
         .catch(() => null);
     const products = result ?? null;
-    return (_jsx(Main, { children: _jsx(Section, { className: "py-10", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, className: "mb-8 text-3xl font-semibold text-zinc-900", children: "Products" }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(ProductsIndexListing, { initialData: products }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));
+    return (_jsxs(Main, { children: [_jsx(Section, { className: "pt-8 pb-4 border-b border-zinc-100 dark:border-slate-800", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, className: "text-3xl font-bold text-zinc-900 dark:text-zinc-100", children: "Products" }), _jsx("p", { className: "mt-1 text-sm text-zinc-500 dark:text-zinc-400", children: "Discover amazing products and deals" }), _jsx("div", { className: "mt-3", children: _jsx("a", { href: ROUTES.PUBLIC.AUCTIONS, className: "inline-flex items-center gap-1.5 rounded-full border border-primary/30 bg-primary/10 px-4 py-1.5 text-xs font-medium text-primary-700 dark:text-primary-400 hover:bg-primary/15 transition-colors", children: "\uD83C\uDFF7\uFE0F Looking for unique deals? Browse Auctions \u2192" }) })] }) }), _jsxs(Container, { size: "xl", className: "px-4", children: [_jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-4 mt-4" }), _jsx(ProductsIndexListing, { initialData: products }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] })] }));
 }

package/dist/features/products/components/RelatedProductsCarousel.d.ts

@@ -0,0 +1,7 @@
+import type { ProductItem } from "../types";
+interface RelatedProductsCarouselProps {
+    items: ProductItem[];
+    title?: string;
+}
+export declare function RelatedProductsCarousel({ items, title, }: RelatedProductsCarouselProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/features/products/components/RelatedProductsCarousel.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ROUTES } from "../../../next";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { SectionCarousel } from "../../homepage/components/SectionCarousel";
+import { ProductCard } from "./ProductGrid";
+export function RelatedProductsCarousel({ items, title = "You might also like", }) {
+    if (items.length === 0)
+        return null;
+    return (_jsx(SectionCarousel, { title: title, pillLabel: "Related Products", headingVariant: "editorial", items: items, isLoading: false, perView: THEME_CONSTANTS.carousel.perView.standard, keyExtractor: (item) => item.id, renderItem: (item) => (_jsx(ProductCard, { product: item, href: String(ROUTES.PUBLIC.PRODUCT_DETAIL(item.slug || item.id)) })) }));
+}

package/dist/features/products/components/index.d.ts

@@ -36,3 +36,4 @@ export { ProductGalleryClient } from "./ProductGalleryClient";
 export type { ProductGalleryClientProps } from "./ProductGalleryClient";
 export { ProductTabsShell } from "./ProductTabsShell";
 export type { ProductTabsShellProps } from "./ProductTabsShell";
+export { RelatedProductsCarousel } from "./RelatedProductsCarousel";

package/dist/features/products/components/index.js

@@ -18,3 +18,4 @@ export { MakeOfferForm } from "./MakeOfferForm";
 export { RelatedProducts } from "./RelatedProducts";
 export { ProductGalleryClient } from "./ProductGalleryClient";
 export { ProductTabsShell } from "./ProductTabsShell";
+export { RelatedProductsCarousel } from "./RelatedProductsCarousel";

package/dist/features/products/hooks/useProducts.js

@@ -21,8 +21,12 @@ export function useProducts(params = {}, opts) {
         sp.set("inStock", String(params.inStock));
     if (params.isAuction !== undefined)
         sp.set("isAuction", String(params.isAuction));
+    if (params.isPreOrder !== undefined)
+        sp.set("isPreOrder", String(params.isPreOrder));
     if (params.sellerId)
         sp.set("sellerId", params.sellerId);
+    if (params.storeId)
+        sp.set("storeId", params.storeId);
     if (params.sort)
         sp.set("sorts", params.sort);
     if (params.page)
@@ -31,6 +35,18 @@ export function useProducts(params = {}, opts) {
         sp.set("pageSize", String(params.perPage));
     if (params.featured !== undefined)
         sp.set("featured", String(params.featured));
+    if (params.minBid !== undefined)
+        sp.set("minBid", String(params.minBid));
+    if (params.maxBid !== undefined)
+        sp.set("maxBid", String(params.maxBid));
+    if (params.dateFrom)
+        sp.set("dateFrom", params.dateFrom);
+    if (params.dateTo)
+        sp.set("dateTo", params.dateTo);
+    if (params.preOrderStatus)
+        sp.set("preOrderStatus", params.preOrderStatus);
+    if (params.freeShipping !== undefined)
+        sp.set("freeShipping", String(params.freeShipping));
     const qs = sp.toString();
     const query = useQuery({
         queryKey: ["products", qs],

package/dist/features/products/repository/products.repository.d.ts

@@ -68,6 +68,10 @@ export declare class ProductRepository extends BaseRepository<ProductDocument> {
             canFilter: boolean;
             canSort: boolean;
         };
+        storeId: {
+            canFilter: boolean;
+            canSort: boolean;
+        };
         sellerName: {
             canFilter: boolean;
             canSort: boolean;
@@ -184,6 +188,10 @@ export declare class ProductRepository extends BaseRepository<ProductDocument> {
             canFilter: boolean;
             canSort: boolean;
         };
+        freeShipping: {
+            canFilter: boolean;
+            canSort: boolean;
+        };
     };
     list(model: SieveModel, opts?: {
         sellerId?: string;

package/dist/features/products/repository/products.repository.js

@@ -314,6 +314,7 @@ ProductRepository.SIEVE_FIELDS = {
     condition: { canFilter: true, canSort: false },
     status: { canFilter: true, canSort: true },
     sellerId: { canFilter: true, canSort: false },
+    storeId: { canFilter: true, canSort: false },
     sellerName: { canFilter: true, canSort: true },
     featured: { canFilter: true, canSort: false },
     isAuction: { canFilter: true, canSort: false },
@@ -343,6 +344,7 @@ ProductRepository.SIEVE_FIELDS = {
     features: { canFilter: true, canSort: false },
     insurance: { canFilter: true, canSort: false },
     currency: { canFilter: true, canSort: false },
+    freeShipping: { canFilter: true, canSort: false },
 };
 export class ProductsRepository extends ProductRepository {
 }

package/dist/features/products/schemas/index.d.ts

@@ -213,10 +213,13 @@ export declare const productItemSchema: z.ZodObject<{
     condition?: "new" | "used" | "refurbished" | "broken" | "like_new" | "good" | "fair" | "poor" | undefined;
     inStock?: boolean | undefined;
     brand?: string | undefined;
+    currentBid?: number | undefined;
+    startingBid?: number | undefined;
+    auctionEndDate?: string | Date | undefined;
+    preOrderDeliveryDate?: string | Date | undefined;
     originalPrice?: number | undefined;
     mainImage?: string | undefined;
     isPromoted?: boolean | undefined;
-    currentBid?: number | undefined;
     availableQuantity?: number | undefined;
     sellerAvatar?: string | undefined;
     listingType?: "fixed" | "standard" | "auction" | "pre-order" | undefined;
@@ -240,16 +243,13 @@ export declare const productItemSchema: z.ZodObject<{
         discountPercent: number;
         quantity: number;
     }[] | undefined;
-    startingBid?: number | undefined;
     bidCount?: number | undefined;
-    auctionEndDate?: string | Date | undefined;
     reservePrice?: number | undefined;
     buyNowPrice?: number | undefined;
     minBidIncrement?: number | undefined;
     autoExtendable?: boolean | undefined;
     auctionExtensionMinutes?: number | undefined;
     auctionShippingPaidBy?: "seller" | "winner" | undefined;
-    preOrderDeliveryDate?: string | Date | undefined;
     preOrderDepositPercent?: number | undefined;
     preOrderDepositAmount?: number | undefined;
     preOrderMaxQuantity?: number | undefined;
@@ -304,10 +304,13 @@ export declare const productItemSchema: z.ZodObject<{
     condition?: "new" | "used" | "refurbished" | "broken" | "like_new" | "good" | "fair" | "poor" | undefined;
     inStock?: boolean | undefined;
     brand?: string | undefined;
+    currentBid?: number | undefined;
+    startingBid?: number | undefined;
+    auctionEndDate?: string | Date | undefined;
+    preOrderDeliveryDate?: string | Date | undefined;
     originalPrice?: number | undefined;
     mainImage?: string | undefined;
     isPromoted?: boolean | undefined;
-    currentBid?: number | undefined;
     availableQuantity?: number | undefined;
     sellerAvatar?: string | undefined;
     listingType?: "fixed" | "standard" | "auction" | "pre-order" | undefined;
@@ -331,16 +334,13 @@ export declare const productItemSchema: z.ZodObject<{
         discountPercent: number;
         quantity: number;
     }[] | undefined;
-    startingBid?: number | undefined;
     bidCount?: number | undefined;
-    auctionEndDate?: string | Date | undefined;
     reservePrice?: number | undefined;
     buyNowPrice?: number | undefined;
     minBidIncrement?: number | undefined;
     autoExtendable?: boolean | undefined;
     auctionExtensionMinutes?: number | undefined;
     auctionShippingPaidBy?: "seller" | "winner" | undefined;
-    preOrderDeliveryDate?: string | Date | undefined;
     preOrderDepositPercent?: number | undefined;
     preOrderDepositAmount?: number | undefined;
     preOrderMaxQuantity?: number | undefined;

package/dist/features/products/types/index.d.ts

@@ -115,9 +115,21 @@ export interface ProductListParams {
     maxPrice?: number;
     inStock?: boolean;
     isAuction?: boolean;
+    isPreOrder?: boolean;
     sellerId?: string;
+    storeId?: string;
     sort?: string;
     page?: number;
     perPage?: number;
     featured?: boolean;
+    /** Auction-specific: current bid range */
+    minBid?: number;
+    maxBid?: number;
+    /** Auction: end date range / Pre-order: delivery date range */
+    dateFrom?: string;
+    dateTo?: string;
+    /** Pre-order production status */
+    preOrderStatus?: string;
+    /** Shipping / free shipping */
+    freeShipping?: boolean;
 }

package/dist/features/promotions/components/CouponsIndexListing.d.ts

@@ -0,0 +1,9 @@
+export interface CouponsIndexListingProps {
+    /** Pre-fetched coupons to show on first render */
+    initialCoupons?: any[];
+    /** If set, only show coupons from this store */
+    storeSlug?: string;
+    /** If set, only show coupons from this seller */
+    sellerId?: string;
+}
+export declare function CouponsIndexListing({ initialCoupons, storeSlug, sellerId, }: CouponsIndexListingProps): import("react/jsx-runtime").JSX.Element;