@mohasinac/appkit 4.9.5 → 4.11.0

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

@@ -1,6 +1,5 @@
 export interface ProductDetailActionsProps {
     productId: string;
-    productSlug: string;
     productTitle: string;
     productImage?: string;
     price?: number;
@@ -22,4 +21,4 @@ export interface ProductDetailActionsProps {
  * to the server APIs with guest-fallback. Replaces the previously-unwired
  * placeholder buttons inside ProductDetailPageView.
  */
-export declare function ProductDetailActions({ productId, productSlug: _productSlug, productTitle, productImage, price, currency, storeId, storeName, inStock, variant, }: ProductDetailActionsProps): import("react").JSX.Element;
+export declare function ProductDetailActions({ productId, productTitle, productImage, price, currency, storeId, storeName, inStock, variant, }: ProductDetailActionsProps): import("react").JSX.Element;

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

@@ -19,7 +19,7 @@ import { normalizeError } from "../../../errors/normalize";
  * to the server APIs with guest-fallback. Replaces the previously-unwired
  * placeholder buttons inside ProductDetailPageView.
  */
-export function ProductDetailActions({ productId, productSlug: _productSlug, productTitle, productImage, price, currency, storeId, storeName, inStock, variant = "desktop", }) {
+export function ProductDetailActions({ productId, productTitle, productImage, price, currency, storeId, storeName, inStock, variant = "desktop", }) {
     const router = useRouter();
     const { showToast } = useToast();
     const { requireAuth, modalOpen, modalMessage, closeModal } = useAuthGate();

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

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Link from "next/link";
-import { SIEVE_OP, sieveAnd, sieveFilter, sortBy } from "@mohasinac/appkit";
 import { productRepository, reviewRepository } from "../../../repositories";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
@@ -32,59 +31,18 @@ import { ProductGalleryClient } from "./ProductGalleryClient";
 import { ProductTabsShell } from "./ProductTabsShell";
 import { ProductFeatureBadges } from "./ProductFeatureBadges";
 import { FeatureBadgeList } from "./FeatureBadge";
-import { RelatedProductsCarousel } from "./RelatedProductsCarousel";
 import { ShareButton } from "./ShareButton";
 import { CustomSectionTabContent } from "./CustomSectionTabContent";
 import { SublistingCarouselSection } from "./SublistingCarouselSection";
 import { ShowGroupSection } from "./ShowGroupSection";
 import { HistoryTracker } from "../../history/components/HistoryTracker";
+import { RelatedItemsSection } from "./RelatedItemsSection";
+import { computeRelatedItems, toReview } from "../../../_internal/server/features/products/data";
+import { GroupedListingsCarousel } from "../../grouped/components/GroupedListingsCarousel";
+import { getGroupsWithItemsForProduct } from "../../../_internal/server/features/grouped/data";
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
-function toProductItem(doc) {
-    return {
-        id: String(doc.id ?? ""),
-        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.mainImage === "string"
-                ? doc.mainImage
-                : undefined,
-        status: doc.status ?? "published",
-        slug: typeof doc.slug === "string" ? doc.slug : 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 toReview(doc) {
-    const images = Array.isArray(doc.images) ? doc.images : undefined;
-    const createdAt = doc.createdAt instanceof Date
-        ? doc.createdAt.toISOString()
-        : typeof doc.createdAt === "string"
-            ? doc.createdAt
-            : undefined;
-    const rawRating = typeof doc.rating === "number" ? doc.rating : 3;
-    const rating = Math.min(5, Math.max(1, Math.round(rawRating)));
-    return {
-        id: String(doc.id ?? ""),
-        productId: String(doc.productId ?? ""),
-        userId: String(doc.userId ?? ""),
-        userName: String(doc.userName ?? "Anonymous"),
-        userAvatar: typeof doc.userAvatar === "string" ? doc.userAvatar : undefined,
-        rating,
-        title: typeof doc.title === "string" ? doc.title : undefined,
-        comment: typeof doc.comment === "string" ? doc.comment : undefined,
-        images,
-        status: doc.status ?? "approved",
-        helpfulCount: typeof doc.helpfulCount === "number" ? doc.helpfulCount : undefined,
-        verified: doc.verified === true,
-        featured: doc.featured === true,
-        createdAt,
-    };
-}
 function toDescriptionHtml(raw) {
     if (!raw)
         return "";
@@ -206,74 +164,14 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
     const isGroupParent = p.isGroupParent === true;
     const groupTitle = typeof p.groupTitle === "string" ? p.groupTitle : undefined;
     const storeId = typeof p.storeId === "string" ? p.storeId : null;
-    // -- Fetch reviews + 4 related-listing signals in parallel ------------------
-    const [reviewDocs, sameCategoryDocs, sameBrandDocs, tagOverlapDocs, sameStoreDocs] = await Promise.all([
-        reviewRepository
-            .findApprovedByProduct(product.id)
-            .catch(() => []),
-        primaryCategorySlug
-            ? productRepository.findByCategory(primaryCategorySlug).catch(() => [])
-            : Promise.resolve([]),
-        brand
-            ? productRepository
-                .list({
-                filters: sieveAnd(sieveFilter("status", SIEVE_OP.EQ, "published"), sieveFilter("brand", SIEVE_OP.EQ, brand)),
-                sorts: sortBy("createdAt", "DESC"),
-                page: 1,
-                pageSize: 9,
-            })
-                .then((r) => r.items)
-                .catch(() => [])
-            : Promise.resolve([]),
-        tags.length > 0
-            ? productRepository.findByTagsOverlap(tags, 9).catch(() => [])
-            : Promise.resolve([]),
-        storeId
-            ? productRepository
-                .list({
-                filters: sieveAnd(sieveFilter("status", SIEVE_OP.EQ, "published"), sieveFilter("storeId", SIEVE_OP.EQ, storeId)),
-                sorts: sortBy("createdAt", "DESC"),
-                page: 1,
-                pageSize: 9,
-            })
-                .then((r) => r.items)
-                .catch(() => [])
-            : Promise.resolve([]),
+    // -- Fetch reviews + the shared 4-signal related-items computation + grouped listings in parallel --
+    const [reviewDocs, related, groups] = await Promise.all([
+        reviewRepository.findApprovedByProduct(product.id).catch(() => []),
+        computeRelatedItems(product),
+        getGroupsWithItemsForProduct(product.id),
     ]);
     const reviews = reviewDocs.map(toReview);
-    const _now = new Date();
-    const currentProductId = product.id;
-    function toRelatedItems(docs) {
-        return docs
-            .filter((r) => {
-            if (r.id === currentProductId)
-                return false;
-            const s = r.status;
-            if (s && ["sold", "out_of_stock", "archived", "discontinued", "draft"].includes(s))
-                return false;
-            if (r.isSold === true)
-                return false;
-            if (r.availableQuantity === 0)
-                return false;
-            if (r.listingType === "auction" && r.auctionEndDate) {
-                const end = r.auctionEndDate;
-                const endDate = typeof end.toDate === "function"
-                    ? end.toDate()
-                    : end instanceof Date ? end : new Date(String(end));
-                if (endDate <= _now)
-                    return false;
-            }
-            if (r.listingType === "prize-draw" && r.prizeRevealStatus === "closed")
-                return false;
-            return true;
-        })
-            .slice(0, 8)
-            .map(toProductItem);
-    }
-    const relatedItems = toRelatedItems(sameCategoryDocs);
-    const relatedByBrand = toRelatedItems(sameBrandDocs);
-    const relatedByTags = toRelatedItems(tagOverlapDocs);
-    const relatedByStore = toRelatedItems(sameStoreDocs);
+    const { relatedItems, relatedByBrand, relatedByTags, relatedByStore } = related;
     return (_jsxs(Main, { children: [_jsx(HistoryTracker, { productId: product.id, productType: "product", snapshot: {
                     title: product.title,
                     thumb: product.mainImage ?? product.images?.[0],
@@ -339,10 +237,7 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
                                 content: _jsx(CustomSectionTabContent, { section: s }),
                             })) })), renderBundleSection: bundleMemberships.length > 0
                             ? () => (_jsxs(Div, { className: CLS_BUNDLE_BOX, children: [_jsxs(Row, { className: "mb-3", align: "center", gap: "sm", children: [_jsx(Span, { size: "base", className: CLS_BUNDLE_ICON, "aria-hidden": "true", children: "\uD83D\uDCE6" }), _jsxs(Text, { className: CLS_BUNDLE_TITLE, children: ["Part of ", bundleMemberships.length === 1 ? "a bundle" : `${bundleMemberships.length} bundles`] })] }), _jsx(Stack, { gap: "3", children: bundleMemberships.map((b) => (_jsxs(Div, { className: CLS_BUNDLE_ROW, children: [_jsxs(Div, { className: "min-w-0", children: [_jsx(Text, { className: CLS_BUNDLE_LABEL, children: "Included in bundle" }), _jsx(Text, { className: "truncate", color: "primary", size: "sm", weight: "semibold", children: b.title })] }), _jsx(Link, { href: String(ROUTES.PUBLIC.BUNDLE_DETAIL(b.id)), className: CLS_BUNDLE_CTA, children: "View Bundle \u2192" })] }, b.id))) })] }))
-                            : undefined, renderRelated: () => relatedItems.length > 0 ||
-                            relatedByBrand.length > 0 ||
-                            relatedByTags.length > 0 ||
-                            relatedByStore.length > 0 ? (_jsxs(Stack, { gap: "xl", children: [relatedItems.length > 0 && (_jsx(RelatedProductsCarousel, { items: relatedItems, title: categoryName || category ? `More in ${categoryName || category}` : "More in this category" })), relatedByBrand.length > 0 && (_jsx(RelatedProductsCarousel, { items: relatedByBrand, title: brand ? `More by ${brand}` : "More by this brand" })), relatedByTags.length > 0 && (_jsx(RelatedProductsCarousel, { items: relatedByTags, title: "You might also like" })), relatedByStore.length > 0 && (_jsx(RelatedProductsCarousel, { items: relatedByStore, title: storeName ? `More from ${storeName}` : "More from this seller" }))] })) : null }), renderPrimaryActions
+                            : undefined, renderRelated: () => (_jsxs(Stack, { gap: "xl", children: [_jsx(GroupedListingsCarousel, { groups: groups }), _jsx(RelatedItemsSection, { relatedItems: relatedItems, relatedByBrand: relatedByBrand, relatedByTags: relatedByTags, relatedByStore: relatedByStore, categoryLabel: categoryName || category || undefined, brandLabel: brand || undefined, storeLabel: storeName || undefined })] })) }), renderPrimaryActions
                         ? renderPrimaryActions({
                             productId: product.id,
                             productSlug: product.slug ?? slug,

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

@@ -2,6 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { ROUTES } from "../../../next";
 import { BaseListingCard, Button, Div, Grid, PriceDisplay, Row, Span, Stack, Text } from "../../../ui";
 import { MediaImage } from "../../media/MediaImage";
 import { formatCurrency } from "../../../utils/number.formatter";
@@ -37,6 +39,7 @@ export function ProductCard({ product, href, onClick, onAddToWishlist, isWishlis
         ? Math.round(((product.originalPrice - product.price) / product.originalPrice) *
             100)
         : null;
+    const router = useRouter();
     const listingPlugin = pluginFor(normalizeListingType(product));
     const typeBadge = listingPlugin.badge
         ? { label: listingPlugin.badge.label, cls: listingPlugin.badge.className }
@@ -86,7 +89,18 @@ export function ProductCard({ product, href, onClick, onAddToWishlist, isWishlis
                         const MAX_CHIPS = 3;
                         const visible = categories.slice(0, MAX_CHIPS);
                         const overflow = Math.max(0, categories.length - MAX_CHIPS);
-                        return (_jsxs(Row, { className: "mt-1", gap: "xs", wrap: true, children: [visible.map((name) => (_jsxs(Span, { padding: "pill-2xs", layout: "inline-flex", className: "gap-[0.125rem] text-[10px]", rounded: "full", surface: "subtle", color: "muted", children: [_jsx("svg", { className: "h-2.5 w-2.5 flex-shrink-0", fill: "none", stroke: "currentColor", strokeWidth: 2, viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 7a2 2 0 012-2h14a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" }) }), name] }, name))), overflow > 0 && (_jsxs(Span, { padding: "pill-2xs", layout: "inline-flex", weight: "medium", className: "text-[10px]", rounded: "full", surface: "subtle", color: "muted", title: categories.slice(MAX_CHIPS).join(", "), children: ["+", overflow] })), product.brand && (_jsxs(Span, { padding: "pill-2xs", layout: "inline-flex", gap: "2xs", className: "text-[10px]", rounded: "full", surface: "subtle", color: "muted", children: [_jsx("svg", { className: "h-2.5 w-2.5 flex-shrink-0", fill: "none", stroke: "currentColor", strokeWidth: 2, viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" }) }), product.brand] }))] }));
+                        return (_jsxs(Row, { className: "mt-1", gap: "xs", wrap: true, children: [visible.map((name) => (_jsxs(Span, { padding: "pill-2xs", layout: "inline-flex", className: "gap-[0.125rem] text-[10px]", rounded: "full", surface: "subtle", color: "muted", children: [_jsx("svg", { className: "h-2.5 w-2.5 flex-shrink-0", fill: "none", stroke: "currentColor", strokeWidth: 2, viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 7a2 2 0 012-2h14a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" }) }), name] }, name))), overflow > 0 && (_jsxs(Span, { padding: "pill-2xs", layout: "inline-flex", weight: "medium", className: "text-[10px]", rounded: "full", surface: "subtle", color: "muted", title: categories.slice(MAX_CHIPS).join(", "), children: ["+", overflow] })), product.brand && (_jsxs(Span, { padding: "pill-2xs", layout: "inline-flex", gap: "2xs", className: `text-[10px] ${product.brandSlug ? "cursor-pointer hover:underline" : ""}`, rounded: "full", surface: "subtle", color: "muted", ...(product.brandSlug
+                                        ? {
+                                            onClick: (e) => {
+                                                // The whole card is already wrapped in a <Link> — a nested
+                                                // <a> here would be invalid HTML, so this navigates via
+                                                // stopPropagation + router.push instead of a real Link.
+                                                e.preventDefault();
+                                                e.stopPropagation();
+                                                router.push(String(ROUTES.PUBLIC.BRAND_DETAIL(product.brandSlug)));
+                                            },
+                                        }
+                                        : {}), children: [_jsx("svg", { className: "h-2.5 w-2.5 flex-shrink-0", fill: "none", stroke: "currentColor", strokeWidth: 2, viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" }) }), product.brand] }))] }));
                     })(), (() => {
                         const seller = safeDisplayName(product.storeName, "");
                         return seller ? (_jsxs(Text, { className: "mt-0.5 text-[11px]", color: "faint", children: ["by ", seller] })) : null;

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

@@ -0,0 +1,16 @@
+import type { ProductItem } from "../types";
+export interface RelatedItemsSectionProps {
+    relatedItems: ProductItem[];
+    relatedByBrand: ProductItem[];
+    relatedByTags: ProductItem[];
+    relatedByStore: ProductItem[];
+    categoryLabel?: string;
+    brandLabel?: string;
+    storeLabel?: string;
+}
+/**
+ * The same-shape "More in category / More by brand / You might also like /
+ * More from store" carousel stack, shared by every listing-type detail page
+ * that surfaces computeRelatedItems() results.
+ */
+export declare function RelatedItemsSection({ relatedItems, relatedByBrand, relatedByTags, relatedByStore, categoryLabel, brandLabel, storeLabel, }: RelatedItemsSectionProps): import("react").JSX.Element | null;

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack } from "../../../ui";
+import { RelatedProductsCarousel } from "./RelatedProductsCarousel";
+/**
+ * The same-shape "More in category / More by brand / You might also like /
+ * More from store" carousel stack, shared by every listing-type detail page
+ * that surfaces computeRelatedItems() results.
+ */
+export function RelatedItemsSection({ relatedItems, relatedByBrand, relatedByTags, relatedByStore, categoryLabel, brandLabel, storeLabel, }) {
+    if (relatedItems.length === 0 &&
+        relatedByBrand.length === 0 &&
+        relatedByTags.length === 0 &&
+        relatedByStore.length === 0) {
+        return null;
+    }
+    return (_jsxs(Stack, { gap: "xl", children: [relatedItems.length > 0 && (_jsx(RelatedProductsCarousel, { items: relatedItems, title: categoryLabel ? `More in ${categoryLabel}` : "More in this category" })), relatedByBrand.length > 0 && (_jsx(RelatedProductsCarousel, { items: relatedByBrand, title: brandLabel ? `More by ${brandLabel}` : "More by this brand" })), relatedByTags.length > 0 && _jsx(RelatedProductsCarousel, { items: relatedByTags, title: "You might also like" }), relatedByStore.length > 0 && (_jsx(RelatedProductsCarousel, { items: relatedByStore, title: storeLabel ? `More from ${storeLabel}` : "More from this seller" }))] }));
+}

package/dist/features/products/constants/action-defs.d.ts

@@ -400,4 +400,5 @@ export declare const SELLER_BULK_ACTIONS: {
     readonly storeCategories: readonly ["row-activate", "row-deactivate", "row-delete"];
     readonly groupedListings: readonly ["row-delete"];
     readonly offers: readonly ["row-approve", "row-reject"];
+    readonly reviews: readonly ["row-reply"];
 };

package/dist/features/products/constants/action-defs.js

@@ -566,4 +566,5 @@ export const SELLER_BULK_ACTIONS = {
     storeCategories: [ROW_ACTION_ID.ACTIVATE, ROW_ACTION_ID.DEACTIVATE, ROW_ACTION_ID.DELETE],
     groupedListings: [ROW_ACTION_ID.DELETE],
     offers: [ROW_ACTION_ID.APPROVE, ROW_ACTION_ID.REJECT],
+    reviews: [ROW_ACTION_ID.REPLY],
 };

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

@@ -76,6 +76,7 @@ export declare const productItemSchema: z.ZodObject<{
         thumbnailUrl: z.ZodOptional<z.ZodString>;
         source: z.ZodOptional<z.ZodEnum<["upload", "youtube", "external"]>>;
         youtubeId: z.ZodOptional<z.ZodString>;
+        duration: z.ZodOptional<z.ZodNumber>;
     }, "strip", z.ZodTypeAny, {
         type: "video" | "image" | "file";
         url: string;
@@ -83,6 +84,7 @@ export declare const productItemSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }, {
         type: "video" | "image" | "file";
         url: string;
@@ -90,6 +92,7 @@ export declare const productItemSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }>, "many">>;
     video: z.ZodOptional<z.ZodObject<{
         url: z.ZodString;
@@ -445,6 +448,7 @@ export declare const productItemSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }[] | undefined;
     inStock?: boolean | undefined;
     rating?: number | undefined;
@@ -583,6 +587,7 @@ export declare const productItemSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }[] | undefined;
     inStock?: boolean | undefined;
     rating?: number | undefined;

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

@@ -2,9 +2,7 @@ import React from "react";
 export interface CouponsIndexListingProps {
     /** Pre-fetched coupons to show on first render */
     initialCoupons?: any[];
-    /** If set, only show coupons from this store (slug, for display) */
-    storeSlug?: string;
     /** If set, only show coupons from this store (id, for filtering) */
     storeId?: string;
 }
-export declare function CouponsIndexListing({ initialCoupons, storeSlug: _storeSlug, storeId, }: CouponsIndexListingProps): React.JSX.Element;
+export declare function CouponsIndexListing({ initialCoupons, storeId, }: CouponsIndexListingProps): React.JSX.Element;

package/dist/features/promotions/components/CouponsIndexListing.js

@@ -28,7 +28,7 @@ const COUPON_TYPES = [
     { value: COUPON_FIELDS.TYPE_VALUES.BUY_X_GET_Y, label: "Buy X Get Y" },
 ];
 const FILTER_KEYS = [TABLE_KEYS.TYPE, TABLE_KEYS.DATE_FROM, TABLE_KEYS.DATE_TO];
-export function CouponsIndexListing({ initialCoupons, storeSlug: _storeSlug, storeId, }) {
+export function CouponsIndexListing({ initialCoupons, storeId, }) {
     const table = useUrlTable({ defaults: { pageSize: "12", sort: DEFAULT_SORT } });
     const [searchInput, setSearchInput] = useState(table.get(TABLE_KEYS.QUERY) || "");
     const [filterOpen, setFilterOpen] = useState(false);

package/dist/features/search/components/SearchView.d.ts

@@ -4,8 +4,6 @@ export interface SearchViewProps {
     query?: string;
     /** Total result count */
     total: number;
-    /** Whether data is loading */
-    isLoading: boolean;
     labels?: {
         searchTitle?: string;
         resultsCount?: (count: number, query: string) => string;
@@ -26,4 +24,4 @@ export interface SearchViewProps {
     renderPagination?: () => React.ReactNode;
     className?: string;
 }
-export declare function SearchView({ query, total, isLoading: _isLoading, labels, renderSearchInput, renderFilters, renderActiveFilters, renderToolbar, renderResults, renderPagination, className, }: SearchViewProps): React.JSX.Element;
+export declare function SearchView({ query, total, labels, renderSearchInput, renderFilters, renderActiveFilters, renderToolbar, renderResults, renderPagination, className, }: SearchViewProps): React.JSX.Element;

package/dist/features/search/components/SearchView.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Div, Heading, Main, Row, Span, Stack, Text } from "../../../ui";
-export function SearchView({ query, total, isLoading: _isLoading, labels = {}, renderSearchInput, renderFilters, renderActiveFilters, renderToolbar, renderResults, renderPagination, className = "", }) {
+export function SearchView({ query, total, labels = {}, renderSearchInput, renderFilters, renderActiveFilters, renderToolbar, renderResults, renderPagination, className = "", }) {
     const hasQuery = !!query?.trim();
     return (_jsx(Main, { className: `min-h-screen ${className}`, children: _jsxs(Stack, { padding: "y-lg", gap: "md", children: [_jsx(Div, { children: renderSearchInput() }), hasQuery && (_jsx(Div, { children: _jsx(Heading, { level: 1, size: "xl", weight: "semibold", children: labels.resultsCount
                             ? labels.resultsCount(total, query)

package/dist/features/seller/components/QuickProductForm.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Row } from "@mohasinac/appkit/ui";
 import { useState } from "react";
 import { Alert, Button, Div, FormField, Stack, Text } from "../../../ui";
+import { FormErrorSummary } from "../../../ui/forms";
 const __P = {
     p5: "p-[var(--appkit-space-5)]",
 };
@@ -50,5 +51,5 @@ export function QuickProductForm({ values, onChange, onPublish, onSave, onSwitch
     return (_jsxs(Stack, { gap: "lg", className: `${__P.p5}`, children: [_jsx(Div, { children: _jsx(Text, { size: "sm", color: "muted", children: "Quick add \u2014 fill the essentials and publish. You can add more details later." }) }), touched && Object.keys(errors).length > 0 && (_jsx(Alert, { variant: "error", children: "Please fix the highlighted fields before publishing." })), _jsx(FormField, { name: "title", label: "Product Name", type: "text", value: values.title ?? "", onChange: (v) => onChange({ title: v }), placeholder: "e.g. Charizard Base Set PSA 9", required: true, error: touched ? errors.title : undefined }), renderCategorySelector ? (_jsxs(Div, { children: [_jsx(Text, { className: "mb-1", color: "muted", size: "sm", weight: "medium", children: "Category" }), renderCategorySelector({
                         value: values.category ?? "",
                         onChange: (v) => onChange({ category: v }),
-                    }), touched && errors.category && (_jsx(Text, { className: "text-[var(--appkit-color-error)] mt-1", size: "xs", children: errors.category }))] })) : (_jsx(FormField, { name: "category", label: "Category", type: "text", value: values.category ?? "", onChange: (v) => onChange({ category: v }), placeholder: "e.g. Trading Cards", error: touched ? errors.category : undefined })), _jsx(FormField, { name: "price", label: "Price (\u20B9)", type: "number", value: toRupeesString(values.price), onChange: (v) => onChange({ price: fromRupeesString(v) }), placeholder: "e.g. 499", required: true, error: touched ? errors.price : undefined }), _jsx(FormField, { name: "mainImage", label: "Product Image", type: "image", value: values.mainImage ?? "", onChange: (v) => onChange({ mainImage: v }), onUpload: onUploadImage, required: true, error: touched ? errors.mainImage : undefined }), _jsx(FormField, { name: "description", label: "Description", type: "textarea", value: values.description ?? "", onChange: (v) => onChange({ description: v }), placeholder: "Brief description (optional)", rows: 3 }), _jsx(FormField, { name: "stockQuantity", label: "Stock Quantity", type: "number", value: String(values.stockQuantity ?? 1), onChange: (v) => onChange({ stockQuantity: Math.max(0, parseInt(v, 10) || 0) }), placeholder: "1", hint: "How many units are available" }), _jsxs(Stack, { gap: "3", padding: "t-xs", children: [_jsxs(Row, { gap: "3", children: [_jsx(Button, { variant: "primary", onClick: handlePublish, disabled: isLoading, className: "flex-1", children: isLoading ? "Publishing..." : "Publish" }), _jsx(Button, { variant: "secondary", onClick: handleSave, disabled: isLoading, children: "Save Draft" })] }), _jsx(Button, { variant: "ghost", size: "sm", textSize: "xs", onClick: onSwitchToFull, className: "self-center", children: "Show all fields (advanced)" })] })] }));
+                    }), touched && errors.category && (_jsx(Text, { className: "text-[var(--appkit-color-error)] mt-1", size: "xs", children: errors.category }))] })) : (_jsx(FormField, { name: "category", label: "Category", type: "text", value: values.category ?? "", onChange: (v) => onChange({ category: v }), placeholder: "e.g. Trading Cards", error: touched ? errors.category : undefined })), _jsx(FormField, { name: "price", label: "Price (\u20B9)", type: "number", value: toRupeesString(values.price), onChange: (v) => onChange({ price: fromRupeesString(v) }), placeholder: "e.g. 499", required: true, error: touched ? errors.price : undefined }), _jsx(FormField, { name: "mainImage", label: "Product Image", type: "image", value: values.mainImage ?? "", onChange: (v) => onChange({ mainImage: v }), onUpload: onUploadImage, required: true, error: touched ? errors.mainImage : undefined }), _jsx(FormField, { name: "description", label: "Description", type: "textarea", value: values.description ?? "", onChange: (v) => onChange({ description: v }), placeholder: "Brief description (optional)", rows: 3 }), _jsx(FormField, { name: "stockQuantity", label: "Stock Quantity", type: "number", value: String(values.stockQuantity ?? 1), onChange: (v) => onChange({ stockQuantity: Math.max(0, parseInt(v, 10) || 0) }), placeholder: "1", hint: "How many units are available" }), _jsxs(Stack, { gap: "3", padding: "t-xs", children: [_jsx(FormErrorSummary, {}), _jsxs(Row, { gap: "3", children: [_jsx(Button, { variant: "primary", onClick: handlePublish, disabled: isLoading, className: "flex-1", children: isLoading ? "Publishing..." : "Publish" }), _jsx(Button, { variant: "secondary", onClick: handleSave, disabled: isLoading, children: "Save Draft" })] }), _jsx(Button, { variant: "ghost", size: "sm", textSize: "xs", onClick: onSwitchToFull, className: "self-center", children: "Show all fields (advanced)" })] })] }));
 }

package/dist/features/seller/components/SellerBidsView.js

@@ -1,24 +1,17 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { normalizeError } from "../../../errors/normalize";
-import { Row, SIEVE_OP, Stack, sieveFilter } from "@mohasinac/appkit/client";
+import { SIEVE_OP, Stack, sieveFilter } from "@mohasinac/appkit/client";
 import { sortBy } from "@mohasinac/appkit/client";
-import React, { useState, useCallback } from "react";
-import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
-import { Badge, Button, BulkActionBar, Div, FilterChipGroup, ListingFilterDrawer, ListingToolbar, Pagination, Span, Text, useToast, StickyToolbar } from "../../../ui";
+import { useState, useCallback } from "react";
+import { Badge, Button, Div, FilterChipGroup, Span, Text, useToast } from "../../../ui";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { buildBulkAction } from "../../../_internal/shared/actions/bulk-helpers";
 import { SELLER_BID_STATUS_TABS } from "../../admin/constants/filter-tabs";
-import { toRecordArray, toRelativeDate, toCurrency, toStringValue, useSellerListingData, } from "../hooks/useSellerListingData";
+import { toRecordArray, toRelativeDate, toCurrency, toStringValue } from "../hooks/useSellerListingData";
 import { DataTable } from "../../admin/components/DataTable";
-import { useBottomActions } from "../../layout";
-// ---------------------------------------------------------------------------
-// Config
-// ---------------------------------------------------------------------------
-const PAGE_SIZE = 25;
-const FILTER_KEYS = ["status"];
+import { DataListingView } from "../../admin/components/DataListingView";
 const DEFAULT_SORT = "-bidDate";
 const SORT_OPTIONS = [
     { value: sortBy("bidDate", "DESC"), label: "Newest" },
@@ -35,72 +28,22 @@ const STATUS_BADGE = {
     lost: "default",
     cancelled: "danger",
 };
-// ---------------------------------------------------------------------------
-// Component
-// ---------------------------------------------------------------------------
 export function SellerBidsView({ endpoint = SELLER_ENDPOINTS.BIDS }) {
-    const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
     const { showToast } = useToast();
-    const [view, setView] = useState("table");
-    const [searchInput, setSearchInput] = useState(table.get("q") || "");
-    const [filterOpen, setFilterOpen] = useState(false);
-    const [pendingFilters, setPendingFilters] = useState(() => Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
-    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: "" };
-        for (const k of FILTER_KEYS)
-            updates[k] = "";
-        table.setMany(updates);
-        setSearchInput("");
-    }, [table]);
-    const commitSearch = useCallback(() => { table.set("q", searchInput.trim()); }, [searchInput, table]);
-    const activeFilterCount = FILTER_KEYS.filter((k) => !!table.get(k)).length;
-    const hasActiveState = !!table.get("q") || table.get("sort") !== DEFAULT_SORT || activeFilterCount > 0;
-    const statusRaw = table.get("status");
-    const filters = statusRaw ? sieveFilter("status", SIEVE_OP.EQ, statusRaw) : undefined;
-    const productIdFilter = table.get("productId") || undefined;
-    const endpointWithProduct = productIdFilter
-        ? `${endpoint}?productId=${encodeURIComponent(productIdFilter)}`
-        : endpoint;
-    const { rows, total, isLoading, errorMessage } = useSellerListingData({
-        queryKey: ["seller", "bids", "listing"],
-        endpoint: endpointWithProduct,
-        page: table.getNumber("page", 1),
-        pageSize: PAGE_SIZE,
-        sorts: table.get("sort") || DEFAULT_SORT,
-        filters,
-        q: table.get("q") || undefined,
-        mapRows: (response) => toRecordArray(response.bids).map((item, idx) => ({
-            id: toStringValue(item.id, `bid-${idx}`),
-            productTitle: toStringValue(item.productTitle, "Unknown auction"),
-            productId: toStringValue(item.productId, ""),
-            userName: toStringValue(item.userName, "—"),
-            bidAmount: Number(item.bidAmount ?? 0),
-            status: toStringValue(item.status, "active"),
-            bidDate: toRelativeDate(item.bidDate ?? item.createdAt),
-        })),
-        getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
+    const [collapsedGroups, setCollapsedGroups] = useState(new Set());
+    const toggleGroup = (id) => setCollapsedGroups((s) => {
+        const next = new Set(s);
+        if (next.has(id))
+            next.delete(id);
+        else
+            next.add(id);
+        return next;
     });
-    const currentPage = table.getNumber("page", 1);
-    const totalPages = Math.ceil(total / PAGE_SIZE);
     const columns = [
         {
             key: "productTitle",
             header: "Auction",
-            render: (row) => (_jsxs(Stack, { gap: "none", className: "", children: [_jsx(Text, { className: "line-clamp-1", color: "primary", size: "sm", weight: "medium", children: row.productTitle }), _jsx(Text, { className: "font-mono", color: "faint", size: "xs", children: row.productId })] })),
+            render: (row) => (_jsxs(Stack, { gap: "none", children: [_jsx(Text, { className: "line-clamp-1", color: "primary", size: "sm", weight: "medium", children: row.productTitle }), _jsx(Text, { className: "font-mono", color: "faint", size: "xs", children: row.productId })] })),
         },
         {
             key: "userName",
@@ -127,53 +70,69 @@ export function SellerBidsView({ endpoint = SELLER_ENDPOINTS.BIDS }) {
             render: (row) => _jsx(Span, { size: "xs", color: "muted", children: row.bidDate }),
         },
     ];
-    const selection = useBulkSelection({ items: rows ?? [], keyExtractor: (r) => r.id });
-    // S-STORE-4-B — group bids by productId (auction) with collapsible sections.
-    const [collapsedGroups, setCollapsedGroups] = useState(new Set());
-    const groupedRows = React.useMemo(() => {
-        const groups = new Map();
-        for (const row of rows ?? []) {
-            const key = row.productId || row.productTitle;
-            const g = groups.get(key) ?? { title: row.productTitle, bids: [] };
-            g.bids.push(row);
-            groups.set(key, g);
-        }
-        return Array.from(groups.entries()).map(([id, g]) => ({ id, ...g }));
-    }, [rows]);
-    const toggleGroup = (id) => setCollapsedGroups((s) => {
-        const next = new Set(s);
-        if (next.has(id))
-            next.delete(id);
-        else
-            next.add(id);
-        return next;
-    });
-    // S-STORE-4-B — bulk actions: cancel / retract.
-    const bulkCancel = useCallback(async () => {
+    const bulkCancel = useCallback(async (selection) => {
         if (!selection.selectedIds.length)
             return;
         try {
             const results = await Promise.all(selection.selectedIds.map((id) => fetch(SELLER_ENDPOINTS.BID_BY_ID(id), { method: "DELETE" }).then((r) => r.ok)));
             const failed = results.filter((ok) => !ok).length;
-            if (failed > 0) {
+            if (failed > 0)
                 showToast(`${failed} bid(s) failed to cancel.`, "error");
-            }
-            else {
+            else
                 showToast(`${results.length} bid(s) cancelled.`, "success");
-            }
             selection.clearSelection();
         }
         catch (err) {
             void normalizeError(err);
             showToast(err instanceof Error ? err.message : "Failed to cancel bids.", "error");
         }
-    }, [selection, showToast]);
-    const bulkActions = [
-        buildBulkAction(ACTIONS.SELLER["cancel-bid"], () => void bulkCancel()),
-    ];
-    useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: bulkActions } } : {});
-    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search by bidder name", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); }, showTableView: true, view: view, onViewChange: (v) => setView(v), onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }) })), selection.selectedIds.length > 0 && (_jsx(StickyToolbar, { offset: "header+bulk-actions", tone: "default", border: true, padding: "sm", z: "above-toolbar", children: _jsx(BulkActionBar, { selectedCount: selection.selectedIds.length, onClearSelection: selection.clearSelection, actions: bulkActions }) })), _jsxs(Div, { paddingX: "x-sm-md", padding: "y-md", children: [errorMessage && (_jsx(Div, { textSize: "sm", className: "mb-4 border border-error/20", color: "error", surface: "danger-surface", padding: "inline", rounded: "xl", children: errorMessage })), table.get("grouped") === "0" ? (_jsx(DataTable, { rows: rows, columns: columns, isLoading: isLoading, emptyLabel: "No bids found for your auctions", selectedIds: selection.selectedIdSet, onToggleSelect: selection.toggle, onToggleSelectAll: () => selection.toggleAll() })) : (_jsxs(Stack, { gap: "3", children: [groupedRows.length === 0 && !isLoading && (_jsx(Text, { size: "sm", color: "muted", children: "No bids found for your auctions." })), groupedRows.map((group) => {
-                                const collapsed = collapsedGroups.has(group.id);
-                                return (_jsxs(Div, { className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", rounded: "lg", children: [_jsxs(Button, { variant: "ghost", type: "button", onClick: () => toggleGroup(group.id), justify: "between", paddingX: "md", paddingY: "y-xs-tall", textSize: "sm", weight: "semibold", textColor: "default", className: "w-full hover:bg-[var(--appkit-color-surface-raised)]", children: [_jsxs(Span, { className: "truncate", children: [group.title, " ", _jsxs(Span, { size: "xs", weight: "normal", className: "text-[var(--appkit-color-text-muted)]", children: ["\u00B7 ", group.bids.length, " bid", group.bids.length === 1 ? "" : "s"] })] }), _jsx(Span, { "aria-hidden": true, className: "text-[var(--appkit-color-text-muted)]", children: collapsed ? "▸" : "▾" })] }), !collapsed && (_jsx(Div, { className: "border-t border-[var(--appkit-color-border)]", children: _jsx(DataTable, { rows: group.bids, columns: columns, isLoading: false, emptyLabel: "", selectedIds: selection.selectedIdSet, onToggleSelect: selection.toggle }) }))] }, group.id));
-                            })] }))] }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsx(FilterChipGroup, { label: "Bid Status", tabs: STATUS_OPTIONS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })), allId: "" }) })] }));
+    }, [showToast]);
+    const config = {
+        portal: "seller",
+        title: "Bids",
+        searchPlaceholder: "Search by bidder name",
+        emptyLabel: "No bids found for your auctions",
+        filterKeys: ["status"],
+        defaultSort: DEFAULT_SORT,
+        queryKey: ["seller", "bids", "listing"],
+        endpoint,
+        sortOptions: SORT_OPTIONS,
+        initialView: "list",
+        columns,
+        mapRows: (response) => toRecordArray(response.bids).map((item, idx) => ({
+            id: toStringValue(item.id, `bid-${idx}`),
+            productTitle: toStringValue(item.productTitle, "Unknown auction"),
+            productId: toStringValue(item.productId, ""),
+            userName: toStringValue(item.userName, "—"),
+            bidAmount: Number(item.bidAmount ?? 0),
+            status: toStringValue(item.status, "active"),
+            bidDate: toRelativeDate(item.bidDate ?? item.createdAt),
+        })),
+        getTotal: (response, mappedRows) => (typeof response.total === "number" ? response.total : mappedRows.length),
+        buildFilters: (state) => (state.status ? sieveFilter("status", SIEVE_OP.EQ, state.status) : undefined),
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsx(FilterChipGroup, { label: "Bid Status", tabs: STATUS_OPTIONS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })), allId: "" })),
+        buildBulkActions: (selection) => [
+            buildBulkAction(ACTIONS.SELLER["cancel-bid"], () => void bulkCancel(selection)),
+        ],
+        // Grid/list view groups bids by auction with collapsible sections
+        // (S-STORE-4-B); table view shows the flat per-bid list via `columns`.
+        renderCards: (rows, _view, selection, isLoading) => {
+            const groups = new Map();
+            for (const row of rows) {
+                const key = row.productId || row.productTitle;
+                const g = groups.get(key) ?? { title: row.productTitle, bids: [] };
+                g.bids.push(row);
+                groups.set(key, g);
+            }
+            const groupedRows = Array.from(groups.entries()).map(([id, g]) => ({ id, ...g }));
+            if (groupedRows.length === 0 && !isLoading) {
+                return _jsx(Text, { size: "sm", color: "muted", children: "No bids found for your auctions." });
+            }
+            return (_jsx(Stack, { gap: "3", children: groupedRows.map((group) => {
+                    const collapsed = collapsedGroups.has(group.id);
+                    return (_jsxs(Div, { className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", rounded: "lg", children: [_jsxs(Button, { variant: "ghost", type: "button", onClick: () => toggleGroup(group.id), justify: "between", paddingX: "md", paddingY: "y-xs-tall", textSize: "sm", weight: "semibold", textColor: "default", className: "w-full hover:bg-[var(--appkit-color-surface-raised)]", children: [_jsxs(Span, { className: "truncate", children: [group.title, " ", _jsxs(Span, { size: "xs", weight: "normal", className: "text-[var(--appkit-color-text-muted)]", children: ["\u00B7 ", group.bids.length, " bid", group.bids.length === 1 ? "" : "s"] })] }), _jsx(Span, { "aria-hidden": true, className: "text-[var(--appkit-color-text-muted)]", children: collapsed ? "▸" : "▾" })] }), !collapsed && (_jsx(Div, { className: "border-t border-[var(--appkit-color-border)]", children: _jsx(DataTable, { rows: group.bids, columns: columns, isLoading: false, emptyLabel: "", selectedIds: new Set(selection.selectedIds), onToggleSelect: selection.toggleSelect }) }))] }, group.id));
+                }) }));
+        },
+    };
+    return _jsx(DataListingView, { config: config });
 }