@mohasinac/appkit 2.3.1 → 2.3.2

package/dist/features/pre-orders/components/PreOrdersIndexListing.js

@@ -1,25 +1,84 @@
 "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 { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useProducts } from "../../products/hooks/useProducts";
-import { Div, Grid, Input, Pagination, SlottedListingView, SortDropdown, } from "../../../ui";
+import { Pagination, SortDropdown } from "../../../ui";
 import { ROUTES } from "../../../next";
 import { MarketplacePreorderCard } from "./MarketplacePreorderCard";
-export function PreOrdersIndexListing({ initialData }) {
+import { PreOrderFilters } from "./PreOrderFilters";
+import { useSession } from "../../../react/contexts/SessionContext";
+import { useWishlistWithGuest } from "../../wishlist/hooks/useWishlistWithGuest";
+import { apiClient } from "../../../http";
+const PREORDER_SORT_OPTIONS = [
+    { value: "-createdAt", label: "Newest First" },
+    { value: "preOrderDeliveryDate", label: "Delivery Soon" },
+    { value: "price", label: "Price: Low to High" },
+    { value: "-price", label: "Price: High to Low" },
+];
+export function PreOrdersIndexListing({ initialData, categorySlug }) {
     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") || "grid");
+    const { user } = useSession();
+    const wl = useWishlistWithGuest(user?.uid ?? null);
     const params = {
         q: table.get("q") || undefined,
         category: table.get("category") || undefined,
-        sort: table.get("sort") || undefined,
+        categorySlug: categorySlug || undefined,
+        minPrice: table.get("minPrice") ? Number(table.get("minPrice")) : undefined,
+        maxPrice: table.get("maxPrice") ? Number(table.get("maxPrice")) : undefined,
+        storeId: table.get("storeId") || undefined,
+        preOrderStatus: table.get("preOrderStatus") || undefined,
+        dateFrom: table.get("dateFrom") || undefined,
+        dateTo: table.get("dateTo") || undefined,
+        sort: table.get("sort") || "-createdAt",
         page: table.getNumber("page", 1),
         perPage: table.getNumber("pageSize", 24),
         isPreOrder: true,
     };
     const { products: preOrders, 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 pre-orders...", className: "max-w-sm" })), renderSort: (value, onChange) => (_jsx(SortDropdown, { value: value, onChange: onChange, options: [
-                    { value: "-createdAt", label: "Newest First" },
-                    { value: "preOrderDeliveryDate", label: "Delivery Soon" },
-                    { value: "-price", label: "Price: High to Low" },
-                    { value: "price", label: "Price: Low to High" },
-                ] })), renderTable: () => (_jsx(Grid, { cols: 4, gap: "md", children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)) }, product.id))) })), 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 wishlistActions = {
+        addToWishlist: async (productId) => {
+            if (wl.isGuest)
+                wl.guestWishlist?.add(productId, "preorder");
+            else
+                await apiClient.post("/api/user/wishlist", { productId });
+        },
+        removeFromWishlist: async (productId) => {
+            if (wl.isGuest)
+                wl.guestWishlist?.remove(productId, "preorder");
+            else
+                await apiClient.delete(`/api/user/wishlist/${productId}`);
+        },
+    };
+    const handleAddToCart = useCallback(async (product) => {
+        try {
+            await apiClient.post("/api/cart", { productId: product.id, quantity: 1, isPreOrder: true });
+        }
+        catch {
+            // silently ignore cart errors on listing page
+        }
+    }, []);
+    const gridClass = "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4";
+    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 pre-orders...", 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: PREORDER_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("grid"), "aria-label": "Grid view", className: `p-2 transition-colors ${view === "grid"
+                                        ? "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: gridClass, 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" }), _jsx("div", { className: "h-8 bg-zinc-200 dark:bg-slate-700 rounded" })] })] }, i))) })) : preOrders.length === 0 ? (_jsx("p", { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "No pre-orders found." })) : view === "list" ? (_jsx("div", { className: "flex flex-col divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800", children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "list", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)), onAddToCart: handleAddToCart, wishlistActions: wishlistActions }, product.id))) })) : (_jsx("div", { className: gridClass, children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "grid", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)), onAddToCart: handleAddToCart, wishlistActions: wishlistActions }, product.id))) })), 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(PreOrderFilters, { table: table, currencyPrefix: "\u20B9" }) }), _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/pre-orders/components/PreOrdersListView.d.ts

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

package/dist/features/pre-orders/components/PreOrdersListView.js

@@ -3,14 +3,33 @@ import { productRepository } from "../../../repositories";
 import { Container, Main, Heading, Section } from "../../../ui";
 import { AdSlot } from "../../homepage/components/AdSlot";
 import { PreOrdersIndexListing } from "./PreOrdersIndexListing";
-export async function PreOrdersListView() {
+function sp(params, key) {
+    const v = params[key];
+    return Array.isArray(v) ? v[0] ?? "" : v ?? "";
+}
+function buildPreOrderFilters(params) {
+    const parts = ["status==published", "isPreOrder==true"];
+    const minPrice = sp(params, "minPrice");
+    const maxPrice = sp(params, "maxPrice");
+    if (minPrice)
+        parts.push(`price>=${minPrice}`);
+    if (maxPrice)
+        parts.push(`price<=${maxPrice}`);
+    const store = sp(params, "storeId");
+    if (store)
+        parts.push(`sellerId==${store}`);
+    const preOrderStatus = sp(params, "preOrderStatus");
+    if (preOrderStatus)
+        parts.push(`preOrderStatus==${preOrderStatus}`);
+    return parts.join(",");
+}
+export async function PreOrdersListView({ searchParams = {} }) {
+    const sort = sp(searchParams, "sort") || "-createdAt";
+    const page = Number(sp(searchParams, "page")) || 1;
+    const pageSize = Number(sp(searchParams, "pageSize")) || 24;
+    const filters = buildPreOrderFilters(searchParams);
     const result = await productRepository
-        .list({
-        filters: "status==published,isPreOrder==true",
-        sorts: "-createdAt",
-        page: 1,
-        pageSize: 24,
-    })
+        .list({ filters, sorts: sort, page, pageSize })
         .catch(() => 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: "Pre-Orders" }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(PreOrdersIndexListing, { initialData: result ?? undefined }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));
 }

package/dist/features/pre-orders/components/index.d.ts

@@ -1,4 +1,6 @@
 export { PreorderBadge, PreorderCard } from "./PreorderCard";
+export { PreOrderFilters } from "./PreOrderFilters";
+export type { PreOrderFiltersProps } from "./PreOrderFilters";
 export { MarketplacePreorderCard, type MarketplacePreorderCardData, type MarketplacePreorderCardLabels, type MarketplacePreorderCardProps, } from "./MarketplacePreorderCard";
 export { PreOrdersListView } from "./PreOrdersListView";
 export { PreOrdersIndexListing } from "./PreOrdersIndexListing";

package/dist/features/pre-orders/components/index.js

@@ -1,4 +1,5 @@
 export { PreorderBadge, PreorderCard } from "./PreorderCard";
+export { PreOrderFilters } from "./PreOrderFilters";
 export { MarketplacePreorderCard, } from "./MarketplacePreorderCard";
 export { PreOrdersListView } from "./PreOrdersListView";
 export { PreOrdersIndexListing } from "./PreOrdersIndexListing";

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

@@ -1,4 +1,5 @@
 export interface AuctionsIndexListingProps {
     initialData?: any;
+    categorySlug?: string;
 }
-export declare function AuctionsIndexListing({ initialData }: AuctionsIndexListingProps): import("react/jsx-runtime").JSX.Element;
+export declare function AuctionsIndexListing({ initialData, categorySlug }: AuctionsIndexListingProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,23 +1,75 @@
 "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 { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useProducts } from "../hooks/useProducts";
-import { Div, Input, Pagination, SortDropdown, SlottedListingView, } from "../../../ui";
+import { Pagination, SortDropdown } from "../../../ui";
 import { MarketplaceAuctionGrid } from "../../auctions/components/MarketplaceAuctionGrid";
-import { ProductFilters } from "./ProductFilters";
-export function AuctionsIndexListing({ initialData }) {
+import { AuctionFilters } from "../../auctions/components/AuctionFilters";
+import { useSession } from "../../../react/contexts/SessionContext";
+import { useWishlistWithGuest } from "../../wishlist/hooks/useWishlistWithGuest";
+import { apiClient } from "../../../http";
+const AUCTION_SORT_OPTIONS = [
+    { value: "auctionEndDate", label: "Ending Soonest" },
+    { value: "-currentBid", label: "Highest Bid" },
+    { value: "-createdAt", label: "Newest" },
+    { value: "price", label: "Price: Low to High" },
+    { value: "-price", label: "Price: High to Low" },
+];
+export function AuctionsIndexListing({ initialData, categorySlug }) {
     const table = useUrlTable({ defaults: { pageSize: "24", sort: "auctionEndDate" } });
+    const [searchInput, setSearchInput] = useState(table.get("q") || "");
+    const [filterOpen, setFilterOpen] = useState(false);
+    const [view, setView] = useState(table.get("view") || "grid");
+    const { user } = useSession();
+    const wl = useWishlistWithGuest(user?.uid ?? null);
     const params = {
         q: table.get("q") || undefined,
         category: table.get("category") || undefined,
-        sort: table.get("sort") || undefined,
+        categorySlug: categorySlug || undefined,
+        minBid: table.get("minBid") ? Number(table.get("minBid")) : undefined,
+        maxBid: table.get("maxBid") ? Number(table.get("maxBid")) : undefined,
+        storeId: table.get("storeId") || undefined,
+        dateFrom: table.get("dateFrom") || undefined,
+        dateTo: table.get("dateTo") || undefined,
+        sort: table.get("sort") || "auctionEndDate",
         page: table.getNumber("page", 1),
         perPage: table.getNumber("pageSize", 24),
         isAuction: true,
     };
     const { products: auctions, 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 auctions...", className: "max-w-sm" })), renderSort: (value, onChange) => (_jsx(SortDropdown, { value: value, onChange: onChange, options: [
-                    { value: "auctionEndDate", label: "Ending Soonest" },
-                    { value: "-createdAt", label: "Newest" },
-                ] })), renderFilters: () => _jsx(ProductFilters, { table: table }), renderTable: () => (_jsx(MarketplaceAuctionGrid, { auctions: auctions })), 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 wishlistActions = {
+        addToWishlist: async (productId) => {
+            if (wl.isGuest)
+                wl.guestWishlist?.add(productId, "auction");
+            else
+                await apiClient.post("/api/user/wishlist", { productId });
+        },
+        removeFromWishlist: async (productId) => {
+            if (wl.isGuest)
+                wl.guestWishlist?.remove(productId, "auction");
+            else
+                await apiClient.delete(`/api/user/wishlist/${productId}`);
+        },
+    };
+    const gridClass = "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-3 gap-4";
+    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 auctions...", 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") || "auctionEndDate", onChange: (v) => { table.set("sort", v); table.setPage(1); }, options: AUCTION_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("grid"), "aria-label": "Grid view", className: `p-2 transition-colors ${view === "grid"
+                                        ? "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: gridClass, children: Array.from({ length: 8 }).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-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-full" }), _jsx("div", { className: "h-8 bg-zinc-200 dark:bg-slate-700 rounded" })] })] }, i))) })) : (_jsx(MarketplaceAuctionGrid, { auctions: auctions, variant: view === "list" ? "list" : "grid", gridClassName: view === "list" ? "flex flex-col gap-4" : gridClass, wishlistActions: wishlistActions })), 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(AuctionFilters, { table: table, currencyPrefix: "\u20B9" }) }), _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/InteractiveProductCard.d.ts

@@ -9,11 +9,9 @@ export interface InteractiveProductCardProps {
     selectable?: boolean;
     isSelected?: boolean;
     onSelect?: (id: string, selected: boolean) => void;
-    /** Whether this product is currently in the user's wishlist */
     isWishlisted?: boolean;
-    /** Called when the wishlist icon is toggled */
     onToggleWishlist?: (productId: string) => void;
-    /** Called when the card body is clicked in non-selectable mode */
     onAddToCart?: (product: ProductItem) => void;
+    onBuyNow?: (product: ProductItem) => void;
 }
-export declare function InteractiveProductCard({ product, href, className, selectable, isSelected, onSelect, isWishlisted, onToggleWishlist, onAddToCart, }: InteractiveProductCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function InteractiveProductCard({ product, href, className, selectable, isSelected, onSelect, isWishlisted, onToggleWishlist, onAddToCart, onBuyNow, }: InteractiveProductCardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Link from "next/link";
 import { ProductCard } from "./ProductGrid";
-export function InteractiveProductCard({ product, href, className, selectable, isSelected, onSelect, isWishlisted = false, onToggleWishlist, onAddToCart, }) {
+export function InteractiveProductCard({ product, href, className, selectable, isSelected, onSelect, isWishlisted = false, onToggleWishlist, onAddToCart, onBuyNow, }) {
     return (_jsx(Link, { href: href, className: [
             "block",
             selectable ? "cursor-pointer" : "",
@@ -13,5 +13,5 @@ export function InteractiveProductCard({ product, href, className, selectable, i
                 e.preventDefault();
                 onSelect(product.id, !isSelected);
             }
-            : undefined, children: _jsx(ProductCard, { product: product, className: className, isWishlisted: isWishlisted, onAddToWishlist: onToggleWishlist, onClick: !selectable && onAddToCart ? () => onAddToCart(product) : undefined }) }));
+            : undefined, children: _jsx(ProductCard, { product: product, className: className, isWishlisted: isWishlisted, onAddToWishlist: onToggleWishlist, onAddToCart: onAddToCart, onBuyNow: onBuyNow }) }));
 }

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

@@ -1,4 +1,4 @@
 export interface ProductDetailPageViewProps {
     slug: string;
 }
-export declare function ProductDetailPageView({ slug }: ProductDetailPageViewProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export declare function ProductDetailPageView({ slug, }: ProductDetailPageViewProps): Promise<import("react/jsx-runtime").JSX.Element>;

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

@@ -5,25 +5,28 @@ import { ROUTES } from "../../../next";
 import { getDefaultCurrency } from "../../../core/baseline-resolver";
 import { Button, Container, Div, Heading, Main, RichText, Row, Section, Span, Stack, Text, } from "../../../ui";
 import { normalizeRichTextHtml } from "../../../utils/string.formatter";
+import { formatCurrency } from "../../../utils/number.formatter";
+import { safeDisplayName } from "../../../security";
 import { ReviewsList } from "../../reviews/components/ReviewsList";
-import { ProductGrid } from "./ProductGrid";
-import { RelatedProducts } from "./RelatedProducts";
-import { BuyBar } from "./BuyBar";
 import { ProductDetailView } from "./ProductDetailView";
 import { ProductGalleryClient } from "./ProductGalleryClient";
 import { ProductTabsShell } from "./ProductTabsShell";
+import { ProductFeatureBadges } from "./ProductFeatureBadges";
+import { RelatedProductsCarousel } from "./RelatedProductsCarousel";
+import { BuyBar } from "./BuyBar";
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
-function mapToProductItem(doc) {
+function toProductItem(doc) {
     return {
         id: String(doc.id ?? ""),
-        title: String(doc.name ?? doc.title ?? "Product"),
+        title: String(doc.title ?? doc.name ?? ""),
         price: typeof doc.price === "number" ? doc.price : 0,
+        originalPrice: typeof doc.originalPrice === "number" ? doc.originalPrice : undefined,
         mainImage: Array.isArray(doc.images)
             ? doc.images[0]
-            : typeof doc.imageUrl === "string"
-                ? doc.imageUrl
+            : typeof doc.mainImage === "string"
+                ? doc.mainImage
                 : undefined,
         status: doc.status ?? "published",
         slug: typeof doc.slug === "string" ? doc.slug : undefined,
@@ -32,7 +35,7 @@ function mapToProductItem(doc) {
         reviewCount: typeof doc.reviewCount === "number" ? doc.reviewCount : undefined,
     };
 }
-function mapToReview(doc) {
+function toReview(doc) {
     const images = Array.isArray(doc.images)
         ? doc.images.map((url) => ({ url }))
         : undefined;
@@ -60,41 +63,129 @@ function mapToReview(doc) {
         createdAt,
     };
 }
+function toDescriptionHtml(raw) {
+    if (!raw)
+        return "";
+    const s = typeof raw === "string" ? raw : JSON.stringify(raw);
+    return normalizeRichTextHtml(s);
+}
+function StarRating({ value }) {
+    const full = Math.floor(value);
+    const half = value - full >= 0.5;
+    return (_jsx(Row, { align: "center", gap: "xs", children: Array.from({ length: 5 }).map((_, i) => (_jsx(Span, { className: i < full
+                ? "text-yellow-400 text-sm"
+                : i === full && half
+                    ? "text-yellow-300 text-sm"
+                    : "text-zinc-300 dark:text-zinc-600 text-sm", children: "\u2605" }, i))) }));
+}
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
-export async function ProductDetailPageView({ slug }) {
-    const product = await productRepository.findByIdOrSlug(slug).catch(() => undefined);
+export async function ProductDetailPageView({ slug, }) {
+    const product = await productRepository
+        .findByIdOrSlug(slug)
+        .catch(() => undefined);
     if (!product) {
         return (_jsx(Main, { children: _jsx(Section, { className: "py-20", children: _jsx(Container, { size: "md", children: _jsxs(Stack, { align: "center", gap: "md", className: "text-center", children: [_jsx(Heading, { level: 1, className: "text-2xl font-semibold text-zinc-900 dark:text-zinc-50", children: "Product Not Found" }), _jsx(Text, { className: "text-zinc-500", children: "The product you are looking for may have been removed or the link is incorrect." }), _jsx(Link, { href: String(ROUTES.PUBLIC.PRODUCTS), className: "text-sm font-medium text-primary-600 hover:underline", children: "Browse Products" })] }) }) }) }));
     }
     const p = product;
     const currency = p.currency || getDefaultCurrency();
-    const price = typeof p.price === "number"
-        ? new Intl.NumberFormat(undefined, { style: "currency", currency }).format(p.price)
+    // -- Derived values ---------------------------------------------------------
+    const title = String(p.title ?? p.name ?? "");
+    const price = typeof p.price === "number" ? p.price : null;
+    const originalPrice = typeof p.originalPrice === "number" ? p.originalPrice : null;
+    const discount = price && originalPrice && originalPrice > price
+        ? Math.round(((originalPrice - price) / originalPrice) * 100)
         : null;
     const images = Array.isArray(p.images)
         ? p.images
-        : typeof p.imageUrl === "string"
-            ? [p.imageUrl]
+        : typeof p.mainImage === "string"
+            ? [p.mainImage]
             : [];
-    const inStock = typeof p.stockQuantity === "number" ? p.stockQuantity > 0 : p.status === "published";
+    const stockQuantity = typeof p.stockQuantity === "number" ? p.stockQuantity : null;
+    const availableQuantity = typeof p.availableQuantity === "number"
+        ? p.availableQuantity
+        : null;
+    const effectiveStock = availableQuantity ?? stockQuantity;
+    const inStock = effectiveStock !== null ? effectiveStock > 0 : p.status === "published";
+    const avgRating = typeof p.avgRating === "number" ? p.avgRating : null;
+    const reviewCount = typeof p.reviewCount === "number" ? p.reviewCount : null;
+    const category = typeof p.category === "string" ? p.category : null;
+    const subcategory = typeof p.subcategory === "string" ? p.subcategory : null;
+    const brand = typeof p.brand === "string" ? p.brand : null;
+    const condition = typeof p.condition === "string" ? p.condition : null;
+    const tags = Array.isArray(p.tags) ? p.tags : [];
+    const features = Array.isArray(p.features)
+        ? p.features
+        : [];
+    const ingredients = Array.isArray(p.ingredients)
+        ? p.ingredients
+        : [];
+    const howToUse = Array.isArray(p.howToUse)
+        ? p.howToUse
+        : [];
     const specs = Array.isArray(p.specifications)
         ? p.specifications
         : [];
-    // Fetch reviews and related products in parallel
+    const shippingInfo = typeof p.shippingInfo === "string" ? p.shippingInfo : null;
+    const returnPolicy = typeof p.returnPolicy === "string" ? p.returnPolicy : null;
+    const shippingPaidBy = p.shippingPaidBy;
+    const freeShipping = shippingPaidBy === "seller";
+    const featured = p.featured === true;
+    const sellerName = typeof p.sellerName === "string" ? p.sellerName : null;
+    const safeSeller = sellerName
+        ? safeDisplayName(sellerName, "")
+        : null;
+    const descriptionHtml = toDescriptionHtml(p.description);
+    // -- Fetch reviews + related in parallel ------------------------------------
     const [reviewDocs, relatedDocs] = await Promise.all([
-        reviewRepository.findApprovedByProduct(product.id).catch(() => []),
-        typeof p.category === "string" && p.category
-            ? productRepository.findByCategory(p.category).catch(() => [])
+        reviewRepository
+            .findApprovedByProduct(product.id)
+            .catch(() => []),
+        category
+            ? productRepository.findByCategory(category).catch(() => [])
             : Promise.resolve([]),
     ]);
-    const reviews = reviewDocs.map((doc) => mapToReview(doc));
+    const reviews = reviewDocs.map(toReview);
     const relatedItems = relatedDocs
         .filter((r) => r.id !== product.id)
-        .slice(0, 4)
-        .map(mapToProductItem);
-    return (_jsxs(_Fragment, { children: [_jsx(ProductDetailView, { renderGallery: () => (_jsx(ProductGalleryClient, { images: images, productName: typeof p.name === "string" ? p.name : undefined })), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 1, className: "text-2xl font-bold text-zinc-900 dark:text-zinc-50", children: typeof p.name === "string" ? p.name : "Product" }), price && (_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Span, { className: "text-2xl font-semibold text-primary-600 dark:text-primary-400", children: price }), !inStock && (_jsx(Span, { className: "rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-700 dark:bg-red-900/30 dark:text-red-400", children: "Out of stock" }))] })), typeof p.description === "string" && p.description && (_jsx(RichText, { html: normalizeRichTextHtml(p.description), className: "text-sm leading-relaxed text-zinc-600 dark:text-zinc-400" })), typeof p.sellerName === "string" && p.sellerName && (_jsxs(Row, { align: "center", gap: "xs", children: [_jsx(Span, { className: "text-xs text-zinc-500", children: "Sold by" }), _jsx(Span, { className: "text-xs font-medium text-zinc-700 dark:text-zinc-300", children: p.sellerName })] }))] })), renderActions: () => (_jsx(Div, { className: "rounded-xl border border-zinc-100 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-900", children: _jsxs(Stack, { gap: "sm", children: [price && (_jsx(Text, { className: "text-xl font-bold text-zinc-900 dark:text-zinc-50", children: price })), _jsx(Button, { variant: "primary", size: "md", className: "w-full", disabled: !inStock, children: inStock ? "Add to Cart" : "Out of Stock" }), _jsx(Button, { variant: "secondary", size: "md", className: "w-full", children: "Add to Wishlist" })] }) })), renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: typeof p.description === "string" && p.description ? (_jsx(RichText, { html: normalizeRichTextHtml(p.description), className: "text-sm leading-relaxed text-zinc-600 dark:text-zinc-400" })) : undefined, specsContent: specs.length > 0 ? (_jsx("dl", { className: "divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800 overflow-hidden text-sm", children: specs.map((s, i) => (_jsxs("div", { className: "flex gap-4 px-4 py-3 bg-white dark:bg-zinc-900 even:bg-zinc-50 dark:even:bg-zinc-800/50", children: [_jsx("dt", { className: "w-40 flex-shrink-0 font-medium text-zinc-700 dark:text-zinc-300", children: s.name }), _jsxs("dd", { className: "flex-1 text-zinc-600 dark:text-zinc-400", children: [s.value, s.unit ? ` ${s.unit}` : ""] })] }, i))) })) : undefined, reviewsContent: _jsx(ReviewsList, { reviews: reviews, emptyLabel: "No reviews yet \u2014 be the first to review this product." }) })), renderRelated: () => relatedItems.length > 0 ? (_jsx(RelatedProducts, { labels: { title: "You might also like" }, renderGrid: () => (_jsx(ProductGrid, { products: relatedItems, getProductHref: (item) => String(ROUTES.PUBLIC.PRODUCT_DETAIL(item.slug
-                            ? String(item.slug)
-                            : item.id)) })) })) : null }), _jsxs(BuyBar, { children: [price && (_jsx(Span, { className: "mr-auto text-sm font-bold text-zinc-900 dark:text-zinc-50", children: price })), _jsx(Button, { variant: "primary", size: "sm", className: "flex-1", disabled: !inStock, children: inStock ? "Add to Cart" : "Out of Stock" })] })] }));
+        .slice(0, 8)
+        .map(toProductItem);
+    const formattedPrice = price !== null ? formatCurrency(price, currency) : null;
+    const formattedOriginal = originalPrice !== null ? formatCurrency(originalPrice, currency) : null;
+    return (_jsx(Main, { children: _jsxs(Container, { size: "xl", className: "px-4 py-6", children: [_jsx(ProductDetailView, { renderBreadcrumb: () => (_jsxs("nav", { "aria-label": "Breadcrumb", className: "mb-4 flex items-center gap-1.5 text-xs text-zinc-500 dark:text-zinc-400 flex-wrap", children: [_jsx(Link, { href: String(ROUTES.HOME), className: "hover:text-primary-600 transition-colors", children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.PRODUCTS), className: "hover:text-primary-600 transition-colors", children: "Products" }), category && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "capitalize", children: category })] })), subcategory && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "capitalize", children: subcategory })] }))] })), renderGallery: () => (_jsx(ProductGalleryClient, { images: images, productName: title || undefined })), renderInfo: () => (_jsxs(Stack, { gap: "sm", children: [_jsxs(Div, { children: [condition && (_jsx(Span, { className: "mb-1.5 inline-block rounded-full bg-zinc-100 dark:bg-zinc-800 px-2.5 py-0.5 text-xs font-medium capitalize text-zinc-600 dark:text-zinc-300", children: condition === "new"
+                                            ? "Brand New"
+                                            : condition === "like_new"
+                                                ? "Like New"
+                                                : condition === "refurbished"
+                                                    ? "Refurbished"
+                                                    : condition === "used"
+                                                        ? "Used"
+                                                        : condition })), _jsx(Heading, { level: 1, className: "text-xl font-bold leading-snug text-zinc-900 dark:text-zinc-50 sm:text-2xl", children: title || "Untitled Product" })] }), avgRating !== null && (_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(StarRating, { value: avgRating }), _jsxs(Span, { className: "text-sm text-zinc-600 dark:text-zinc-400", children: [avgRating.toFixed(1), reviewCount ? ` (${reviewCount} reviews)` : ""] }), _jsxs(Span, { className: `ml-auto rounded-full px-2.5 py-0.5 text-xs font-medium ${inStock
+                                            ? "bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400"
+                                            : "bg-red-50 text-red-700 dark:bg-red-900/30 dark:text-red-400"}`, children: [inStock ? "✓ In Stock" : "✗ Out of Stock", inStock && effectiveStock !== null && effectiveStock <= 10
+                                                ? ` — only ${effectiveStock} left`
+                                                : ""] })] })), formattedPrice && (_jsxs(Row, { align: "baseline", gap: "sm", children: [_jsx(Span, { className: "text-2xl font-bold text-zinc-900 dark:text-zinc-50", children: formattedPrice }), formattedOriginal && discount && (_jsxs(_Fragment, { children: [_jsx(Span, { className: "text-sm text-zinc-400 line-through dark:text-zinc-500", children: formattedOriginal }), _jsxs(Span, { className: "rounded-full bg-red-500 px-2 py-0.5 text-xs font-bold text-white", children: ["-", discount, "%"] })] }))] })), avgRating === null && (_jsxs(Span, { className: `inline-flex w-fit items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium ${inStock
+                                    ? "bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400"
+                                    : "bg-red-50 text-red-700 dark:bg-red-900/30 dark:text-red-400"}`, children: [inStock ? "✓ In Stock" : "✗ Out of Stock", inStock && effectiveStock !== null && effectiveStock <= 10
+                                        ? ` — only ${effectiveStock} left`
+                                        : ""] })), (category || brand) && (_jsxs(Row, { align: "center", gap: "xs", className: "text-xs text-zinc-400 dark:text-zinc-500 flex-wrap", children: [category && _jsx(Span, { className: "capitalize", children: category }), category && brand && _jsx(Span, { children: "\u203A" }), brand && _jsx(Span, { className: "font-medium text-zinc-600 dark:text-zinc-300", children: brand })] })), _jsx(ProductFeatureBadges, { featured: featured, freeShipping: freeShipping, condition: condition ?? undefined, returnable: returnPolicy != null && returnPolicy.length > 0, labels: {
+                                    featured: "Featured",
+                                    fasterDelivery: "Faster Delivery",
+                                    ratedSeller: "Rated Seller",
+                                    condition: "Condition",
+                                    conditionNew: "New",
+                                    conditionUsed: "Used",
+                                    conditionBroken: "For Parts",
+                                    conditionRefurbished: "Refurbished",
+                                    returnable: "Returnable",
+                                    freeShipping: "Free Shipping",
+                                    codAvailable: "Cash on Delivery",
+                                    wishlistCount: (n) => `${n} wishlisted`,
+                                    categoryProductCount: (n, cat) => `${n} in ${cat}`,
+                                } }), features.length > 0 && (_jsxs(Div, { className: "rounded-xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/60 px-4 py-3", children: [_jsx(Text, { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "About this product" }), _jsx("ul", { className: "space-y-1.5", children: features.map((f, i) => (_jsxs("li", { className: "flex items-start gap-2 text-sm text-zinc-700 dark:text-zinc-300", children: [_jsx(Span, { className: "mt-0.5 flex-shrink-0 text-primary-500", children: "\u2022" }), f] }, i))) })] })), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-sm leading-relaxed text-zinc-600 dark:text-zinc-400 line-clamp-4" })), safeSeller && (_jsxs(Row, { align: "center", gap: "xs", className: "border-t border-zinc-100 dark:border-zinc-800 pt-3", children: [_jsx(Span, { className: "text-xs text-zinc-500", children: "Sold by" }), _jsx(Span, { className: "text-xs font-medium text-zinc-700 dark:text-zinc-300", children: safeSeller })] }))] })), renderActions: () => (_jsxs(Div, { className: "rounded-xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/60 p-5 space-y-4", children: [formattedPrice && (_jsxs(Div, { children: [_jsx(Text, { className: "text-2xl font-bold text-zinc-900 dark:text-zinc-50", children: formattedPrice }), inStock && effectiveStock !== null && effectiveStock <= 10 && (_jsxs(Text, { className: "mt-0.5 text-xs text-amber-600 dark:text-amber-400", children: ["Only ", effectiveStock, " left \u2014 order soon!"] }))] })), _jsxs(Stack, { gap: "sm", children: [_jsx(Button, { variant: "primary", size: "md", className: "w-full", disabled: !inStock, children: inStock ? "Add to Cart" : "Out of Stock" }), _jsx(Button, { variant: "secondary", size: "md", className: "w-full", children: "\u2661 Add to Wishlist" })] }), (shippingInfo || returnPolicy || freeShipping) && (_jsxs(Div, { className: "border-t border-zinc-200 dark:border-zinc-700 pt-4 space-y-2.5", children: [freeShipping && (_jsxs(Row, { align: "start", gap: "sm", children: [_jsx(Span, { className: "mt-0.5 flex-shrink-0 text-emerald-500", children: "\uD83D\uDE9A" }), _jsxs(Div, { children: [_jsx(Text, { className: "text-xs font-medium text-zinc-700 dark:text-zinc-300", children: "Free Delivery" }), shippingInfo && (_jsx(Text, { className: "text-xs text-zinc-500", children: shippingInfo }))] })] })), !freeShipping && shippingInfo && (_jsxs(Row, { align: "start", gap: "sm", children: [_jsx(Span, { className: "mt-0.5 flex-shrink-0 text-zinc-400", children: "\uD83D\uDCE6" }), _jsx(Text, { className: "text-xs text-zinc-600 dark:text-zinc-400", children: shippingInfo })] })), returnPolicy && (_jsxs(Row, { align: "start", gap: "sm", children: [_jsx(Span, { className: "mt-0.5 flex-shrink-0 text-zinc-400", children: "\u21BA" }), _jsx(Text, { className: "text-xs text-zinc-600 dark:text-zinc-400", children: returnPolicy })] }))] })), tags.length > 0 && (_jsxs(Div, { className: "border-t border-zinc-200 dark:border-zinc-700 pt-4", children: [_jsx(Text, { className: "mb-2 text-xs font-medium text-zinc-500 dark:text-zinc-400", children: "Tags" }), _jsx(Row, { wrap: true, gap: "xs", children: tags.map((tag) => (_jsx(Span, { className: "rounded-full bg-zinc-100 dark:bg-zinc-800 px-2.5 py-1 text-xs text-zinc-600 dark:text-zinc-300", children: tag }, tag))) })] })), _jsx(Div, { className: "border-t border-zinc-200 dark:border-zinc-700 pt-4", children: _jsx(Row, { wrap: true, gap: "sm", className: "justify-center text-center", children: [
+                                        { icon: "🔒", label: "Secure\nPayment" },
+                                        { icon: "✓", label: "Verified\nSeller" },
+                                        { icon: "⭐", label: "Quality\nGuarantee" },
+                                    ].map(({ icon, label }) => (_jsxs(Div, { className: "flex flex-col items-center gap-1 text-xs text-zinc-500 dark:text-zinc-400 min-w-[60px]", children: [_jsx(Span, { className: "text-base", children: icon }), _jsx(Span, { className: "whitespace-pre-line leading-tight", children: label })] }, label))) }) })] })), renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-zinc-700 dark:text-zinc-300" })) : undefined, specsContent: specs.length > 0 ? (_jsx("dl", { className: "divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800 overflow-hidden text-sm", children: specs.map((s, i) => (_jsxs("div", { className: "flex gap-4 px-4 py-3 bg-white dark:bg-zinc-900 even:bg-zinc-50 dark:even:bg-zinc-800/50", children: [_jsx("dt", { className: "w-36 flex-shrink-0 font-medium text-zinc-700 dark:text-zinc-300", children: s.name }), _jsxs("dd", { className: "flex-1 text-zinc-600 dark:text-zinc-400", children: [s.value, s.unit ? ` ${s.unit}` : ""] })] }, i))) })) : undefined, ingredientsContent: ingredients.length > 0 ? (_jsx("ul", { className: "space-y-2", children: ingredients.map((item, i) => (_jsxs("li", { className: "flex items-start gap-2 text-sm text-zinc-700 dark:text-zinc-300", children: [_jsx(Span, { className: "mt-1 flex-shrink-0 h-1.5 w-1.5 rounded-full bg-primary-400" }), item] }, i))) })) : undefined, howToUseContent: howToUse.length > 0 ? (_jsx("ol", { className: "space-y-3", children: howToUse.map((step, i) => (_jsxs("li", { className: "flex items-start gap-3 text-sm text-zinc-700 dark:text-zinc-300", children: [_jsx(Span, { className: "flex-shrink-0 flex h-6 w-6 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30 text-xs font-bold text-primary-700 dark:text-primary-300", children: i + 1 }), step] }, i))) })) : undefined, reviewsContent: _jsx(ReviewsList, { reviews: reviews, emptyLabel: "No reviews yet \u2014 be the first to review this product." }) })), renderRelated: () => relatedItems.length > 0 ? (_jsx(RelatedProductsCarousel, { items: relatedItems })) : null }), _jsxs(BuyBar, { children: [formattedPrice && (_jsx(Span, { className: "mr-auto text-sm font-bold text-zinc-900 dark:text-zinc-50", children: formattedPrice })), _jsx(Button, { variant: "primary", size: "sm", className: "flex-1", disabled: !inStock, children: inStock ? "Add to Cart" : "Out of Stock" })] })] }) }));
 }

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

@@ -68,23 +68,18 @@ export declare function getProductSortOptions(variant: ProductFilterVariant): Re
 }>;
 export interface ProductFiltersProps {
     table: UrlTable;
-    /** Pass category options loaded from the API */
     categoryOptions?: FacetOption[];
-    /** Pass brand options loaded from the API */
     brandOptions?: FacetOption[];
-    /** Pass seller name options */
+    /** Store options (formerly sellerOptions) */
+    storeOptions?: FacetOption[];
+    /** @deprecated use storeOptions */
     sellerOptions?: FacetOption[];
-    /** Override defaults with dynamic tag options */
     tagOptions?: FacetOption[];
-    /** Show status filter (admin / seller only) */
     showStatus?: boolean;
-    /** Preferred variant contract (overrides showStatus defaults). */
     variant?: ProductFilterVariant;
     statusOptions?: FacetOption[];
-    /**
-     * Currency prefix shown in price range labels (e.g. "₹", "$", "€").
-     * Injected by the consumer app — never hard-coded in appkit.
-     */
     currencyPrefix?: string;
+    /** Show free-shipping toggle */
+    showShipping?: boolean;
 }
-export declare function ProductFilters({ table, categoryOptions, brandOptions, sellerOptions, tagOptions, showStatus, variant, statusOptions, currencyPrefix, }: ProductFiltersProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductFilters({ table, categoryOptions, brandOptions, storeOptions, sellerOptions, tagOptions, showStatus, variant, statusOptions, currencyPrefix, showShipping, }: ProductFiltersProps): import("react/jsx-runtime").JSX.Element;

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

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslations } from "next-intl";
 import { FilterFacetSection } from "../../filters/FilterFacetSection";
 import { RangeFilter } from "../../filters/RangeFilter";
+import { SwitchFilter } from "../../filters/SwitchFilter";
 import { Div } from "../../../ui";
 export const PRODUCT_FILTER_KEYS = {
     admin: [
@@ -71,7 +72,8 @@ export function getProductSortOptions(variant) {
             return PRODUCT_PUBLIC_SORT_OPTIONS;
     }
 }
-export function ProductFilters({ table, categoryOptions = [], brandOptions = [], sellerOptions = [], tagOptions = [], showStatus = false, variant, statusOptions, currencyPrefix = "", }) {
+export function ProductFilters({ table, categoryOptions = [], brandOptions = [], storeOptions = [], sellerOptions, tagOptions = [], showStatus = false, variant, statusOptions, currencyPrefix = "", showShipping = true, }) {
+    const resolvedStoreOptions = storeOptions.length > 0 ? storeOptions : (sellerOptions ?? []);
     const t = useTranslations("filters");
     const conditionOptions = [
         { value: "new", label: t("conditionNew") },
@@ -88,7 +90,7 @@ export function ProductFilters({ table, categoryOptions = [], brandOptions = [],
         ? table.get("category").split("|").filter(Boolean)
         : [];
     const selectedBrands = table.get("brand") ? [table.get("brand")] : [];
-    const selectedSellers = table.get("seller") ? [table.get("seller")] : [];
+    const selectedSellers = table.get("storeId") ? [table.get("storeId")] : [];
     const selectedConditions = table.get("condition")
         ? table.get("condition").split("|").filter(Boolean)
         : [];
@@ -100,5 +102,5 @@ export function ProductFilters({ table, categoryOptions = [], brandOptions = [],
         : [];
     const resolvedVariant = variant ?? (showStatus ? "admin" : "public");
     const shouldShowStatus = resolvedVariant !== "public" || showStatus;
-    return (_jsxs(Div, { children: [categoryOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("category"), options: categoryOptions, selected: selectedCategories, onChange: (vals) => table.set("category", vals.join("|")), searchable: categoryOptions.length > 6, defaultCollapsed: true })), _jsx(FilterFacetSection, { title: t("condition"), options: conditionOptions, selected: selectedConditions, onChange: (vals) => table.set("condition", vals.join("|")), searchable: false, defaultCollapsed: true }), _jsx(RangeFilter, { title: t("priceRange"), minValue: table.get("minPrice"), maxValue: table.get("maxPrice"), onMinChange: (v) => table.set("minPrice", v), onMaxChange: (v) => table.set("maxPrice", v), prefix: currencyPrefix, showSlider: true, minBound: 0, maxBound: 500000, step: 500, minPlaceholder: t("minPrice"), maxPlaceholder: t("maxPrice"), defaultCollapsed: true }), brandOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("brand"), options: brandOptions, selected: selectedBrands, onChange: (vals) => table.set("brand", vals[0] ?? ""), searchable: brandOptions.length > 6, defaultCollapsed: true })), sellerOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("seller"), options: sellerOptions, selected: selectedSellers, onChange: (vals) => table.set("seller", vals[0] ?? ""), searchable: sellerOptions.length > 6, defaultCollapsed: true })), tagOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("tags"), options: tagOptions, selected: selectedTags, onChange: (vals) => table.set("tags", vals.join("|")), searchable: tagOptions.length > 6, defaultCollapsed: true })), shouldShowStatus && (_jsx(FilterFacetSection, { title: t("status"), options: statusOptions ?? defaultStatusOptions, selected: selectedStatuses, onChange: (vals) => table.set("status", vals.join("|")), searchable: false, defaultCollapsed: true }))] }));
+    return (_jsxs(Div, { children: [categoryOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("category"), options: categoryOptions, selected: selectedCategories, onChange: (vals) => table.set("category", vals.join("|")), searchable: categoryOptions.length > 6, defaultCollapsed: true })), _jsx(FilterFacetSection, { title: t("condition"), options: conditionOptions, selected: selectedConditions, onChange: (vals) => table.set("condition", vals.join("|")), searchable: false, defaultCollapsed: true }), _jsx(RangeFilter, { title: t("priceRange"), minValue: table.get("minPrice"), maxValue: table.get("maxPrice"), onMinChange: (v) => table.set("minPrice", v), onMaxChange: (v) => table.set("maxPrice", v), prefix: currencyPrefix, showSlider: true, minBound: 0, maxBound: 500000, step: 500, minPlaceholder: t("minPrice"), maxPlaceholder: t("maxPrice"), defaultCollapsed: true }), brandOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("brand"), options: brandOptions, selected: selectedBrands, onChange: (vals) => table.set("brand", vals[0] ?? ""), searchable: brandOptions.length > 6, defaultCollapsed: true })), resolvedStoreOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("store"), options: resolvedStoreOptions, selected: selectedSellers, onChange: (vals) => table.set("storeId", vals[0] ?? ""), searchable: resolvedStoreOptions.length > 6, defaultCollapsed: true })), showShipping && (_jsx(SwitchFilter, { title: t("shipping"), label: t("freeShippingOnly"), checked: table.get("freeShipping") === "true", onChange: (v) => table.set("freeShipping", v ? "true" : ""), defaultCollapsed: true })), tagOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("tags"), options: tagOptions, selected: selectedTags, onChange: (vals) => table.set("tags", vals.join("|")), searchable: tagOptions.length > 6, defaultCollapsed: true })), shouldShowStatus && (_jsx(FilterFacetSection, { title: t("status"), options: statusOptions ?? defaultStatusOptions, selected: selectedStatuses, onChange: (vals) => table.set("status", vals.join("|")), searchable: false, defaultCollapsed: true }))] }));
 }