@mohasinac/appkit 2.3.1 → 2.4.0

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

@@ -1,23 +1,137 @@
 "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, useMemo } from "react";
+import { SlidersHorizontal, 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, useToast, ListingToolbar } from "../../../ui";
 import { MarketplaceAuctionGrid } from "../../auctions/components/MarketplaceAuctionGrid";
-import { ProductFilters } from "./ProductFilters";
-export function AuctionsIndexListing({ initialData }) {
+import { AuctionFilters } from "../../auctions/components/AuctionFilters";
+import { useGuestWishlist } from "../../wishlist/hooks/useGuestWishlist";
+import { pushWishlistOp } from "../../cart/utils/pending-ops";
+import { useCategoryTree, categoriesToFacetOptions } from "../../categories/hooks/useCategoryTree";
+import { useBrands } from "../hooks/useBrands";
+const AUCTION_SORT_OPTIONS = [
+    { value: "auctionEndDate", label: "Ending Soonest" },
+    { value: "-auctionEndDate", label: "Ending Latest" },
+    { value: "currentBid", label: "Bid: Low to High" },
+    { value: "-currentBid", label: "Bid: High to Low" },
+    { value: "-createdAt", label: "Newly Listed" },
+    { value: "createdAt", label: "Oldest Listed" },
+];
+const FILTER_KEYS = ["category", "brand", "minBid", "maxBid", "storeId", "dateFrom", "dateTo", "condition"];
+export function AuctionsIndexListing({ initialData, categorySlug, brandName }) {
     const table = useUrlTable({ defaults: { pageSize: "24", sort: "auctionEndDate" } });
+    const { showToast } = useToast();
+    const [searchInput, setSearchInput] = useState(table.get("q") || "");
+    const [filterOpen, setFilterOpen] = useState(false);
+    const showEnded = table.get("showEnded") === "true";
+    const [view, setView] = useState(table.get("view") || "grid");
+    const localWishlist = useGuestWishlist();
+    const wishlistedIds = new Set(localWishlist.items.filter((i) => i.type === "auction").map((i) => i.itemId));
+    const { categories } = useCategoryTree();
+    const categoryOptions = categoriesToFacetOptions(categories);
+    const { brandOptions } = useBrands();
+    // Pending filter state — buffered until "Apply Filters" clicked
+    const [pendingFilters, setPendingFilters] = useState(() => Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
+    const pendingTable = useMemo(() => ({
+        get: (key) => pendingFilters[key] ?? "",
+        getNumber: (key, fallback = 0) => {
+            const v = pendingFilters[key];
+            if (!v)
+                return fallback;
+            const n = Number(v);
+            return isNaN(n) ? fallback : n;
+        },
+        set: (key, value) => setPendingFilters((p) => ({ ...p, [key]: value })),
+        setMany: (updates) => setPendingFilters((p) => ({ ...p, ...updates })),
+        clear: (keys) => {
+            const ks = keys ?? FILTER_KEYS;
+            setPendingFilters((p) => ({
+                ...p,
+                ...Object.fromEntries(ks.map((k) => [k, ""])),
+            }));
+        },
+        setPage: (_) => { },
+        setPageSize: (_) => { },
+        setSort: (_) => { },
+        buildSieveParams: () => "",
+        buildSearchParams: () => "",
+        params: new URLSearchParams(),
+    }), [pendingFilters]);
+    const openFilters = useCallback(() => {
+        setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
+        setFilterOpen(true);
+    }, [table]);
+    const applyFilters = useCallback(() => {
+        const updates = { page: "1" };
+        for (const k of FILTER_KEYS)
+            updates[k] = pendingFilters[k] ?? "";
+        table.setMany(updates);
+        setFilterOpen(false);
+    }, [pendingFilters, table]);
+    const clearFilters = useCallback(() => {
+        setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, ""])));
+    }, []);
+    const resetAll = useCallback(() => {
+        const updates = { q: "", sort: "", showEnded: "" };
+        for (const k of FILTER_KEYS)
+            updates[k] = "";
+        table.setMany(updates);
+        setSearchInput("");
+    }, [table]);
+    const activeFilterCount = FILTER_KEYS.filter((k) => !!table.get(k)).length;
+    const hasActiveState = !!table.get("q") ||
+        table.get("showEnded") === "true" ||
+        table.get("sort") !== "auctionEndDate" ||
+        activeFilterCount > 0;
     const params = {
         q: table.get("q") || undefined,
         category: table.get("category") || undefined,
-        sort: table.get("sort") || undefined,
+        categorySlug: categorySlug || undefined,
+        brand: brandName || table.get("brand") || undefined,
+        minBid: table.get("minBid") ? Number(table.get("minBid")) : undefined,
+        maxBid: table.get("maxBid") ? Number(table.get("maxBid")) : undefined,
+        storeId: table.get("storeId") || undefined,
+        // When showEnded is false (default), force dateFrom=now so only live auctions appear.
+        // When showEnded is true, respect the filter-drawer value (or show all if none set).
+        dateFrom: showEnded
+            ? (table.get("dateFrom") || undefined)
+            : new Date().toISOString(),
+        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 { products: auctions, totalPages, page, isLoading } = useProducts(params, { initialData });
+    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 wishlistActions = {
+        addToWishlist: (productId) => {
+            localWishlist.add(productId, "auction");
+            pushWishlistOp({ op: "add", itemId: productId, type: "auction" });
+            showToast("Added to wishlist", "success");
+            return Promise.resolve();
+        },
+        removeFromWishlist: (productId) => {
+            localWishlist.remove(productId, "auction");
+            pushWishlistOp({ op: "remove", itemId: productId, type: "auction" });
+            showToast("Removed from wishlist", "info");
+            return Promise.resolve();
+        },
+        isWishlisted: (productId) => wishlistedIds.has(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(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search auctions...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, onSearchKeyDown: handleSearchKeyDown, sortValue: table.get("sort") || "auctionEndDate", sortOptions: AUCTION_SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); table.setPage(1); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsxs("label", { className: "flex items-center gap-1.5 cursor-pointer select-none shrink-0", children: [_jsx("span", { className: "hidden sm:inline text-xs text-zinc-600 dark:text-zinc-300 whitespace-nowrap", children: "Show ended" }), _jsx("button", { type: "button", role: "switch", "aria-checked": showEnded, onClick: () => table.set("showEnded", showEnded ? "" : "true"), className: `relative inline-flex h-5 w-9 flex-shrink-0 items-center rounded-full transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 ${showEnded ? "bg-primary" : "bg-zinc-300 dark:bg-slate-600"}`, children: _jsx("span", { className: `inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow-sm transition-transform duration-200 ${showEnded ? "translate-x-[19px]" : "translate-x-[3px]"}` }) })] }) }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx("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 })) }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: () => setFilterOpen(false) }), _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"] }), _jsxs("div", { className: "flex items-center gap-2", children: [activeFilterCount > 0 && (_jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-zinc-500 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), "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: pendingTable, currencyPrefix: "\u20B9", categoryOptions: categoryOptions, brandOptions: brandOptions }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs("button", { type: "button", onClick: applyFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors active:scale-[0.98]", children: ["Apply Filters", activeFilterCount > 0 ? ` (${activeFilterCount})` : ""] }) })] })] }))] }));
 }

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

@@ -16,6 +16,7 @@ export interface BidHistoryProps {
     bids?: BidHistoryEntry[];
     renderEmpty?: () => React.ReactNode;
     renderSkeleton?: () => React.ReactNode;
+    currency?: string;
     labels?: {
         title?: string;
         noHistory?: string;
@@ -25,4 +26,4 @@ export interface BidHistoryProps {
     };
     className?: string;
 }
-export declare function BidHistory({ isLoading, isEmpty, renderList, renderBid, bids, renderEmpty, renderSkeleton, labels, className, }: BidHistoryProps): import("react/jsx-runtime").JSX.Element;
+export declare function BidHistory({ isLoading, isEmpty, renderList, renderBid, bids, renderEmpty, renderSkeleton, currency, labels, className, }: BidHistoryProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,23 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Span, Text } from "../../../ui";
-export function BidHistory({ isLoading = false, isEmpty = false, renderList, renderBid, bids = [], renderEmpty, renderSkeleton, labels = {}, className = "", }) {
+import { formatCurrency } from "../../../utils/number.formatter";
+function formatBidDate(raw) {
+    if (!raw)
+        return "";
+    try {
+        return new Date(raw).toLocaleString(undefined, {
+            month: "short",
+            day: "numeric",
+            hour: "2-digit",
+            minute: "2-digit",
+        });
+    }
+    catch {
+        return raw;
+    }
+}
+export function BidHistory({ isLoading = false, isEmpty = false, renderList, renderBid, bids = [], renderEmpty, renderSkeleton, currency, labels = {}, className = "", }) {
     if (isLoading) {
         if (renderSkeleton)
             return _jsx(_Fragment, { children: renderSkeleton() });
@@ -14,5 +30,5 @@ export function BidHistory({ isLoading = false, isEmpty = false, renderList, ren
     }
     if (renderList)
         return _jsx("div", { className: className, "data-section": "bidhistory-div-420", children: renderList() });
-    return (_jsx("div", { className: `space-y-2 ${className}`, "data-section": "bidhistory-div-421", children: bids.map((bid, i) => renderBid ? (_jsx(React.Fragment, { children: renderBid(bid, i) }, bid.id)) : (_jsxs("div", { className: "flex items-center justify-between p-3 rounded-lg border text-sm", "data-section": "bidhistory-div-422", children: [_jsx(Span, { children: bid.bidderName ?? bid.bidderId }), _jsx(Span, { className: "font-medium", children: bid.amount }), _jsx(Span, { className: "text-neutral-500", children: bid.placedAt })] }, bid.id))) }));
+    return (_jsxs("div", { className: className, "data-section": "bidhistory-div-421", children: [labels.title && (_jsx("h3", { className: "mb-3 text-sm font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: labels.title })), _jsx("div", { className: "space-y-2", children: bids.map((bid, i) => renderBid ? (_jsx(React.Fragment, { children: renderBid(bid, i) }, bid.id)) : (_jsxs("div", { className: "flex items-center justify-between rounded-lg border border-zinc-100 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-3 text-sm", "data-section": "bidhistory-div-422", children: [_jsx(Span, { className: "font-medium text-zinc-700 dark:text-zinc-300 truncate max-w-[40%]", children: bid.bidderName ?? bid.bidderId }), _jsx(Span, { className: "font-bold text-primary-600 dark:text-primary-400", children: currency ? formatCurrency(bid.amount, currency) : bid.amount.toLocaleString() }), _jsx(Span, { className: "text-xs text-zinc-400 dark:text-zinc-500", children: formatBidDate(bid.placedAt) })] }, bid.id))) })] }));
 }

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/MakeOfferButton.d.ts

@@ -0,0 +1,10 @@
+export interface MakeOfferButtonProps {
+    productId: string;
+    listedPrice: number;
+    currency?: string;
+    minOfferPercent?: number;
+    /** Called with (productId, offerAmount, note?). Must return void or throw on error. */
+    onMakeOffer: (productId: string, amount: number, note?: string) => Promise<void>;
+    className?: string;
+}
+export declare function MakeOfferButton({ productId, listedPrice, currency, minOfferPercent, onMakeOffer, className, }: MakeOfferButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useTransition } from "react";
+import { Button, Div, Input, Span, Text } from "../../../ui";
+import { formatCurrency } from "../../../utils/number.formatter";
+export function MakeOfferButton({ productId, listedPrice, currency, minOfferPercent = 70, onMakeOffer, className = "", }) {
+    const [state, setState] = useState("idle");
+    const [errorMsg, setErrorMsg] = useState("");
+    const [isPending, startTransition] = useTransition();
+    const minOffer = Math.round(listedPrice * (minOfferPercent / 100));
+    const defaultOffer = Math.round(listedPrice * 0.9);
+    const [offerAmount, setOfferAmount] = useState(Math.max(defaultOffer, minOffer));
+    const [buyerNote, setBuyerNote] = useState("");
+    const fmt = (n) => currency ? formatCurrency(n, currency) : `₹${n.toLocaleString()}`;
+    function handleOpenConfirm() {
+        setState("confirm");
+    }
+    function handleCancel() {
+        setState("idle");
+    }
+    function handleAmountChange(raw) {
+        const parsed = parseInt(raw.replace(/[^0-9]/g, ""), 10);
+        if (!isNaN(parsed))
+            setOfferAmount(parsed);
+    }
+    function handleSubmit() {
+        if (offerAmount < minOffer) {
+            setErrorMsg(`Minimum offer is ${fmt(minOffer)}`);
+            setState("error");
+            return;
+        }
+        if (offerAmount >= listedPrice) {
+            setErrorMsg(`Offer must be below the listed price of ${fmt(listedPrice)}`);
+            setState("error");
+            return;
+        }
+        setState("loading");
+        startTransition(async () => {
+            try {
+                await onMakeOffer(productId, offerAmount, buyerNote || undefined);
+                setState("success");
+            }
+            catch (err) {
+                const msg = err instanceof Error ? err.message : String(err);
+                if (msg.includes("active offer") || msg.includes("ACTIVE_OFFER")) {
+                    setState("pending");
+                }
+                else {
+                    setErrorMsg(msg || "Could not send offer. Please try again.");
+                    setState("error");
+                }
+            }
+        });
+    }
+    if (state === "success") {
+        return (_jsxs(Div, { className: `rounded-xl border border-emerald-200 dark:border-emerald-800 bg-emerald-50 dark:bg-emerald-900/20 p-4 text-center space-y-1 ${className}`, children: [_jsx(Span, { className: "text-lg", children: "\uD83C\uDF89" }), _jsx(Text, { className: "text-sm font-medium text-emerald-800 dark:text-emerald-300", children: "Offer sent!" }), _jsx(Text, { className: "text-xs text-emerald-700 dark:text-emerald-400", children: "The seller will review your offer and respond shortly." })] }));
+    }
+    if (state === "pending") {
+        return (_jsxs(Div, { className: `rounded-xl border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/20 p-4 text-center space-y-1 ${className}`, children: [_jsx(Span, { className: "text-lg", children: "\u23F3" }), _jsx(Text, { className: "text-sm font-medium text-amber-800 dark:text-amber-300", children: "Offer Pending" }), _jsx(Text, { className: "text-xs text-amber-700 dark:text-amber-400", children: "You already have an offer on this item. Check My Offers for updates." })] }));
+    }
+    if (state === "confirm") {
+        return (_jsxs(Div, { className: `rounded-xl border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-900/60 p-4 space-y-3 ${className}`, children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-sm font-medium text-zinc-800 dark:text-zinc-200", children: "Make an Offer" }), _jsxs(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 mt-0.5", children: ["Listed at ", fmt(listedPrice), " \u00B7 Minimum offer: ", fmt(minOffer)] })] }), _jsxs(Div, { className: "space-y-1", children: [_jsx(Text, { className: "text-xs font-medium text-zinc-600 dark:text-zinc-400", children: "Your offer amount" }), _jsx(Input, { type: "number", value: String(offerAmount), onChange: (e) => handleAmountChange(e.target.value), min: minOffer, max: listedPrice - 1, step: 1, "aria-label": "Offer amount" }), _jsxs(Text, { className: "text-xs text-zinc-400 dark:text-zinc-500", children: ["Must be between ", fmt(minOffer), " and ", fmt(listedPrice - 1)] })] }), _jsxs(Div, { className: "space-y-1", children: [_jsx(Text, { className: "text-xs font-medium text-zinc-600 dark:text-zinc-400", children: "Note to seller (optional)" }), _jsx(Input, { type: "text", value: buyerNote, onChange: (e) => setBuyerNote(e.target.value), placeholder: "E.g. Bundle deal, long-time fan...", maxLength: 300, "aria-label": "Note to seller" })] }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "The seller will accept, decline, or suggest a counter price." }), _jsxs(Div, { className: "flex gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", className: "flex-1", onClick: handleCancel, disabled: isPending, children: "Cancel" }), _jsx(Button, { variant: "secondary", size: "sm", className: "flex-1", onClick: handleSubmit, disabled: isPending || offerAmount < minOffer, children: isPending ? "Sending…" : `Send ${fmt(offerAmount)}` })] })] }));
+    }
+    if (state === "error") {
+        return (_jsxs(Div, { className: `rounded-xl border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20 p-4 space-y-2 ${className}`, children: [_jsx(Text, { className: "text-xs text-red-600 dark:text-red-400 text-center", children: errorMsg }), _jsxs(Div, { className: "flex gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", className: "flex-1", onClick: handleCancel, children: "Cancel" }), _jsx(Button, { variant: "secondary", size: "sm", className: "flex-1", onClick: () => setState("confirm"), children: "Try Again" })] })] }));
+    }
+    return (_jsx(Button, { variant: "ghost", size: "md", className: `w-full border border-zinc-300 dark:border-zinc-600 ${className}`, onClick: handleOpenConfirm, children: "Make Offer" }));
+}

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

@@ -1,4 +1,14 @@
 export interface ProductDetailPageViewProps {
     slug: string;
+    /**
+     * Render prop for offer UI. Receives the resolved product fields.
+     * Only called when product.allowOffers is true and product.type is "simple".
+     */
+    renderOfferAction?: (opts: {
+        productId: string;
+        price: number;
+        currency: string;
+        minOfferPercent: number;
+    }) => React.ReactNode;
 }
-export declare function ProductDetailPageView({ slug }: ProductDetailPageViewProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export declare function ProductDetailPageView({ slug, renderOfferAction, }: ProductDetailPageViewProps): Promise<import("react/jsx-runtime").JSX.Element>;

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

@@ -5,34 +5,38 @@ 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";
+import { ShareButton } from "./ShareButton";
 // ---------------------------------------------------------------------------
 // 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,
-        sellerName: typeof doc.sellerName === "string" ? doc.sellerName : undefined,
+        storeName: typeof doc.storeName === "string" ? doc.storeName : undefined,
         rating: typeof doc.rating === "number" ? doc.rating : undefined,
         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 +64,147 @@ 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, renderOfferAction, }) {
+    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 categoryName = typeof p.categoryName === "string" ? p.categoryName : null;
+    const subcategory = typeof p.subcategory === "string" ? p.subcategory : null;
+    const brand = typeof p.brand === "string" ? p.brand : null;
+    const brandSlug = typeof p.brandSlug === "string" ? p.brandSlug : 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 allowOffers = p.allowOffers === true;
+    const productType = typeof p.type === "string" ? p.type : "simple";
+    const minOfferPercent = typeof p.minOfferPercent === "number" ? p.minOfferPercent : 70;
+    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 storeName = typeof p.storeName === "string" ? p.storeName : null;
+    const sellerName = typeof p.sellerName === "string" ? p.sellerName : null;
+    const safeSeller = (storeName || sellerName)
+        ? safeDisplayName((storeName || sellerName) ?? "", "")
+        : null;
+    const storeSlug = (typeof p.storeSlug === "string" ? p.storeSlug : null) || (typeof p.storeId === "string" ? p.storeId : null);
+    const sellerId = typeof p.sellerId === "string" ? p.sellerId : null;
+    const storeHref = storeSlug
+        ? String(ROUTES.PUBLIC.STORE_DETAIL(storeSlug))
+        : sellerId
+            ? String(ROUTES.PUBLIC.SELLER_DETAIL(sellerId))
+            : 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("div", { className: "mb-4 flex items-center justify-between flex-wrap gap-2", children: [_jsxs("nav", { "aria-label": "Breadcrumb", className: "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(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: "hover:text-primary-600 transition-colors", children: categoryName || category })] })), subcategory && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "capitalize", children: subcategory })] }))] }), _jsx(ShareButton, { title: title || undefined })] })), 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`
+                                        : ""] })), (categoryName || category || brand) && (_jsxs(Row, { align: "center", gap: "xs", className: "text-xs text-zinc-400 dark:text-zinc-500 flex-wrap", children: [category && (_jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: "hover:text-primary-600 dark:hover:text-primary-400 transition-colors", children: categoryName || category })), category && brand && _jsx(Span, { children: "\u203A" }), brand && (brandSlug ? (_jsx(Link, { href: String(ROUTES.PUBLIC.BRAND_DETAIL(brandSlug)), className: "font-medium text-zinc-600 dark:text-zinc-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors", children: 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 && (_jsx(Div, { className: "rounded-xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/60 p-3", children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] uppercase tracking-wide text-zinc-400 dark:text-zinc-500 mb-0.5", children: "Sold by" }), _jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: safeSeller })] }), storeHref && (_jsx(Link, { href: storeHref, className: "shrink-0 rounded-lg bg-primary/10 dark:bg-primary/20 px-3 py-1.5 text-xs font-semibold text-primary-700 dark:text-primary-300 hover:bg-primary/20 dark:hover:bg-primary/30 transition-colors", children: "Visit Store \u2192" }))] }) }))] })), 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 ? "Buy Now" : "Out of Stock" }), _jsx(Button, { variant: "secondary", size: "md", className: "w-full", disabled: !inStock, children: inStock ? "Add to Cart" : "Out of Stock" }), _jsx(Button, { variant: "ghost", size: "md", className: "w-full", children: "\u2661 Add to Wishlist" }), allowOffers && productType === "simple" && price !== null && renderOfferAction?.({
+                                        productId: product.id,
+                                        price,
+                                        currency,
+                                        minOfferPercent,
+                                    })] }), (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: "secondary", size: "sm", className: "shrink-0", disabled: !inStock, children: "Add to Cart" }), _jsx(Button, { variant: "primary", size: "sm", className: "flex-1", disabled: !inStock, children: inStock ? "Buy Now" : "Out of Stock" })] })] }) }));
 }