@mohasinac/appkit 2.7.59 → 2.8.1

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

@@ -1,66 +1,29 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useCallback } from "react";
-import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
-import { AdminViewCards } from "../../admin/components/AdminViewCards";
-import { FilterChipGroup, ListingFilterDrawer, ListingToolbar, Pagination, ListingViewShell, RowActionMenu } from "../../../ui";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { FilterChipGroup, ListingLayout, RowActionMenu } from "../../../ui";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ADMIN_PAYOUT_STATUS_TABS } from "../../admin/constants/filter-tabs";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
-import { toRecordArray, toRelativeDate, toRupees, toStringValue, useSellerListingData, } from "../hooks/useSellerListingData";
-import { DataTable } from "../../admin/components/DataTable";
-const PAGE_SIZE = 25;
-const FILTER_KEYS = ["status"];
-const DEFAULT_SORT = "-createdAt";
-const SORT_OPTIONS = [
-    { value: "-createdAt", label: "Newest" },
-    { value: "createdAt", label: "Oldest" },
-];
-const STATUS_OPTIONS = ADMIN_PAYOUT_STATUS_TABS;
+import { toRecordArray, toRelativeDate, toRupees, toStringValue, } from "../../admin/hooks/useAdminListingData";
+import { DataListingView } from "../../admin/components/DataListingView";
 export function SellerPayoutsView({ children, onViewClick, onExportClick, ...props }) {
-    const hasChildren = React.Children.count(children) > 0;
-    const [view, setView] = useState("table");
-    const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
-    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 && statusRaw !== "All" ? `status==${statusRaw}` : undefined;
-    const { rows, total, isLoading, errorMessage } = useSellerListingData({
+    if (React.Children.count(children) > 0) {
+        return (_jsx(ListingLayout, { portal: "seller", ...props, children: children }));
+    }
+    const config = {
+        portal: "seller",
+        title: "Payouts",
+        searchPlaceholder: "Search payouts by payout # or amount",
+        emptyLabel: "No payouts found",
+        filterKeys: ["status"],
+        defaultSort: "-createdAt",
         queryKey: ["seller", "payouts", "listing"],
         endpoint: SELLER_ENDPOINTS.PAYOUTS,
-        page: table.getNumber("page", 1),
-        pageSize: PAGE_SIZE,
-        sorts: table.get("sort") || DEFAULT_SORT,
-        filters,
-        q: table.get("q") || undefined,
+        sortOptions: [
+            { value: "-createdAt", label: "Newest" },
+            { value: "createdAt", label: "Oldest" },
+        ],
         mapRows: (response) => toRecordArray(response.payouts).map((item, index) => ({
             id: toStringValue(item.id, `payout-${index}`),
             primary: `Payout #${toStringValue(item.payoutNumber ?? item.id, "Unknown")}`,
@@ -71,16 +34,19 @@ export function SellerPayoutsView({ children, onViewClick, onExportClick, ...pro
             status: toStringValue(item.status, "Pending"),
             updatedAt: toRelativeDate(item.processedAt ?? item.updatedAt ?? item.createdAt),
         })),
-        getTotal: (response, mappedRows) => typeof response.meta?.total === "number" ? response.meta.total : mappedRows.length,
-    });
-    const currentPage = table.getNumber("page", 1);
-    const totalPages = Math.ceil(total / PAGE_SIZE);
-    const selection = useBulkSelection({ items: rows, keyExtractor: (r) => r.id });
-    if (hasChildren) {
-        return _jsx(ListingViewShell, { portal: "seller", ...props, children: children });
-    }
-    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search payouts by payout # or amount", 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("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: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsxs("div", { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx("div", { className: "mb-4 rounded-xl border border-red-200 bg-error-surface px-4 py-3 text-sm text-error dark:border-red-900/60", children: errorMessage })), view === "table" ? (_jsx(DataTable, { rows: rows, isLoading: isLoading, emptyLabel: "No payouts found", renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
-                                ...(onViewClick ? [{ label: ACTIONS.STORE["view-payout"].label, onClick: () => onViewClick(row.id) }] : []),
-                                ...(onExportClick ? [{ label: ACTIONS.STORE["export-payout"].label, onClick: () => onExportClick(row.id) }] : []),
-                            ] })) })) : (_jsx(AdminViewCards, { rows: rows, view: view, isLoading: isLoading, emptyLabel: "No payouts found", onRowClick: undefined, selectedIdSet: selection.selectedIdSet, onToggleSelect: selection.toggle }))] }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsx(FilterChipGroup, { label: "Status", tabs: STATUS_OPTIONS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) }) })] }));
+        getTotal: (response, mappedRows) => typeof response.meta?.total === "number"
+            ? response.meta.total
+            : mappedRows.length,
+        buildFilters: (state) => state.status && state.status !== "All" ? `status==${state.status}` : undefined,
+        renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
+                ...(onViewClick
+                    ? [{ label: ACTIONS.STORE["view-payout"].label, onClick: () => onViewClick(row.id) }]
+                    : []),
+                ...(onExportClick
+                    ? [{ label: ACTIONS.STORE["export-payout"].label, onClick: () => onExportClick(row.id) }]
+                    : []),
+            ] })),
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsx(FilterChipGroup, { label: "Status", tabs: ADMIN_PAYOUT_STATUS_TABS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) })),
+    };
+    return _jsx(DataListingView, { config: config });
 }

package/dist/features/seller/components/SellerPreOrdersView.d.ts

@@ -1,5 +1,5 @@
-import type { ListingViewShellProps } from "../../../ui";
-export interface SellerPreOrdersViewProps extends ListingViewShellProps {
+import type { ListingLayoutProps } from "../../../ui";
+export interface SellerPreOrdersViewProps extends ListingLayoutProps {
     onDelete?: (id: string) => Promise<void>;
 }
 export declare function SellerPreOrdersView({ children, onDelete, ...props }: SellerPreOrdersViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,29 +1,15 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState, useCallback } from "react";
 import { useEntityDelete } from "../../../react/hooks/useEntityDelete";
-import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
-import { Alert, Badge, ConfirmDeleteModal, Div, FilterChipGroup, ListingFilterDrawer, ListingToolbar, ListingViewShell, Pagination, RowActionMenu, Text } from "../../../ui";
+import { Badge, ConfirmDeleteModal, FilterChipGroup, ListingLayout, RowActionMenu, Text } from "../../../ui";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { SELLER_PRE_ORDER_STATUS_TABS } from "../../admin/constants/filter-tabs";
 import { ROUTES } from "../../../constants";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
-import { toRecordArray, toRelativeDate, toRupees, toStringValue, useSellerListingData, } from "../hooks/useSellerListingData";
-import { DataTable } from "../../admin/components/DataTable";
+import { toRecordArray, toRelativeDate, toRupees, toStringValue, } from "../../admin/hooks/useAdminListingData";
+import { DataListingView } from "../../admin/components/DataListingView";
 import { useActionDispatch } from "../../../react/hooks/use-action-dispatch";
-const PAGE_SIZE = 25;
-const FILTER_KEYS = ["status"];
-const DEFAULT_SORT = "-createdAt";
-// Hardcoded sieve clause — this view only ever shows pre-orders.
-const LISTING_TYPE_FILTER = "listingType==pre-order";
-const SORT_OPTIONS = [
-    { value: "-createdAt", label: "Newest" },
-    { value: "createdAt", label: "Oldest" },
-    { value: "title", label: "Title A–Z" },
-    { value: "preorderAvailableDate", label: "Delivery Soon" },
-];
-const STATUS_OPTIONS = SELLER_PRE_ORDER_STATUS_TABS;
 const PRE_ORDER_COLUMNS = [
     {
         key: "thumbnail",
@@ -71,8 +57,6 @@ const PRE_ORDER_COLUMNS = [
     },
 ];
 export function SellerPreOrdersView({ children, onDelete, ...props }) {
-    const hasChildren = React.Children.count(children) > 0;
-    const [view, setView] = useState("table");
     const dispatch = useActionDispatch();
     const [deleteTargetId, setDeleteTargetId] = useState(null);
     const { deletingId, handleDelete: performDelete } = useEntityDelete({
@@ -81,47 +65,29 @@ export function SellerPreOrdersView({ children, onDelete, ...props }) {
         successMessage: "Pre-order deleted.",
         fetchOptions: { credentials: "include" },
     });
-    const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
-    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 statusFilter = statusRaw && statusRaw !== "All" ? `status==${statusRaw}` : undefined;
-    const filters = [LISTING_TYPE_FILTER, statusFilter].filter(Boolean).join(",");
-    const { rows, total, isLoading, errorMessage } = useSellerListingData({
+    const handleDelete = useCallback(async (id) => {
+        await performDelete(id);
+        setDeleteTargetId(null);
+    }, [performDelete]);
+    if (React.Children.count(children) > 0) {
+        return (_jsx(ListingLayout, { portal: "seller", ...props, children: children }));
+    }
+    const config = {
+        portal: "seller",
+        title: "Pre-Orders",
+        searchPlaceholder: "Search pre-orders by name…",
+        emptyLabel: "No pre-orders listed yet",
+        filterKeys: ["status"],
+        defaultSort: "-createdAt",
         queryKey: ["seller", "pre-orders", "listing"],
         endpoint: SELLER_ENDPOINTS.PRODUCTS,
-        page: table.getNumber("page", 1),
-        pageSize: PAGE_SIZE,
-        sorts: table.get("sort") || DEFAULT_SORT,
-        filters,
-        q: table.get("q") || undefined,
+        sortOptions: [
+            { value: "-createdAt", label: "Newest" },
+            { value: "createdAt", label: "Oldest" },
+            { value: "title", label: "Title A–Z" },
+            { value: "preorderAvailableDate", label: "Delivery Soon" },
+        ],
+        columns: PRE_ORDER_COLUMNS,
         mapRows: (response) => toRecordArray(response.products).map((item, index) => {
             const priceRaw = typeof item.price === "number" ? item.price : 0;
             return {
@@ -138,27 +104,28 @@ export function SellerPreOrdersView({ children, onDelete, ...props }) {
             };
         }),
         getTotal: (response, mappedRows) => typeof response.meta?.total === "number" ? response.meta.total : mappedRows.length,
-    });
-    const currentPage = table.getNumber("page", 1);
-    const totalPages = Math.ceil(total / PAGE_SIZE);
-    const selection = useBulkSelection({ items: rows, keyExtractor: (r) => r.id });
-    const handleDelete = useCallback(async (id) => {
-        await performDelete(id);
-        setDeleteTargetId(null);
-    }, [performDelete]);
-    if (hasChildren) {
-        return (_jsx(ListingViewShell, { portal: "seller", ...props, children: children }));
-    }
-    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search pre-orders by name\u2026", 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("div", { className: "sticky z-10 flex justify-center bg-[var(--appkit-color-surface)]/95 backdrop-blur-sm border-b border-[var(--appkit-color-border)] px-3 py-1.5", style: { top: "calc(var(--header-height, 0px) + 44px)" }, children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsxs("div", { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx(Alert, { variant: "error", className: "mb-4", children: errorMessage })), _jsx(DataTable, { columns: PRE_ORDER_COLUMNS, rows: rows, isLoading: isLoading, emptyLabel: "No pre-orders listed yet", getRowHref: (row) => String(ROUTES.STORE.PRE_ORDERS_EDIT(row.id)), renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
-                                {
-                                    label: ACTIONS.STORE["edit-listing"].label,
-                                    onClick: () => void dispatch({ type: "NAVIGATE", href: String(ROUTES.STORE.PRE_ORDERS_EDIT(row.id)) }),
-                                },
-                                ...(onDelete ? [{
-                                        label: ACTIONS.STORE["delete-listing"].label,
-                                        destructive: true,
-                                        onClick: () => setDeleteTargetId(row.id),
-                                        disabled: deletingId === row.id,
-                                    }] : []),
-                            ] })) })] }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsx(FilterChipGroup, { label: "Status", tabs: STATUS_OPTIONS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) }) }), deleteTargetId && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Pre-Order", message: "Are you sure you want to delete this pre-order listing? This cannot be undone.", onConfirm: () => handleDelete(deleteTargetId), onClose: () => setDeleteTargetId(null), isDeleting: deletingId === deleteTargetId }))] }));
+        buildFilters: (state) => {
+            const status = state.status && state.status !== "All" ? `status==${state.status}` : null;
+            return ["listingType==pre-order", status].filter(Boolean).join(",");
+        },
+        getRowHref: (row) => String(ROUTES.STORE.PRE_ORDERS_EDIT(row.id)),
+        renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
+                {
+                    label: ACTIONS.STORE["edit-listing"].label,
+                    onClick: () => void dispatch({ type: "NAVIGATE", href: String(ROUTES.STORE.PRE_ORDERS_EDIT(row.id)) }),
+                },
+                ...(onDelete
+                    ? [
+                        {
+                            label: ACTIONS.STORE["delete-listing"].label,
+                            destructive: true,
+                            onClick: () => setDeleteTargetId(row.id),
+                            disabled: deletingId === row.id,
+                        },
+                    ]
+                    : []),
+            ] })),
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsx(FilterChipGroup, { label: "Status", tabs: SELLER_PRE_ORDER_STATUS_TABS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) })),
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), deleteTargetId && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Pre-Order", message: "Are you sure you want to delete this pre-order listing? This cannot be undone.", onConfirm: () => handleDelete(deleteTargetId), onClose: () => setDeleteTargetId(null), isDeleting: deletingId === deleteTargetId }))] }));
 }

package/dist/features/seller/components/SellerPrizeDrawsView.d.ts

@@ -1,5 +1,5 @@
-import type { ListingViewShellProps } from "../../../ui";
-export interface SellerPrizeDrawsViewProps extends ListingViewShellProps {
+import type { ListingLayoutProps } from "../../../ui";
+export interface SellerPrizeDrawsViewProps extends ListingLayoutProps {
     onDelete?: (id: string) => Promise<void>;
 }
 export declare function SellerPrizeDrawsView({ children, onDelete, ...props }: SellerPrizeDrawsViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,29 +1,15 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState, useCallback } from "react";
 import { useEntityDelete } from "../../../react/hooks/useEntityDelete";
-import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
-import { Alert, Badge, ConfirmDeleteModal, Div, FilterChipGroup, ListingFilterDrawer, ListingToolbar, ListingViewShell, Pagination, RowActionMenu, Text } from "../../../ui";
+import { Badge, ConfirmDeleteModal, FilterChipGroup, ListingLayout, RowActionMenu, Text } from "../../../ui";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { SELLER_PRIZE_DRAW_STATUS_TABS } from "../../admin/constants/filter-tabs";
 import { ROUTES } from "../../../constants";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
-import { toRecordArray, toRelativeDate, toRupees, toStringValue, useSellerListingData, } from "../hooks/useSellerListingData";
-import { DataTable } from "../../admin/components/DataTable";
+import { toRecordArray, toRelativeDate, toRupees, toStringValue, } from "../../admin/hooks/useAdminListingData";
+import { DataListingView } from "../../admin/components/DataListingView";
 import { useActionDispatch } from "../../../react/hooks/use-action-dispatch";
-const PAGE_SIZE = 25;
-const FILTER_KEYS = ["status"];
-const DEFAULT_SORT = "-createdAt";
-// Hardcoded sieve clause — this view only ever shows prize draws.
-const LISTING_TYPE_FILTER = "listingType==prize-draw";
-const SORT_OPTIONS = [
-    { value: "-createdAt", label: "Newest" },
-    { value: "createdAt", label: "Oldest" },
-    { value: "title", label: "Title A–Z" },
-    { value: "prizeDrawEndDate", label: "Draw Date Soon" },
-];
-const STATUS_OPTIONS = SELLER_PRIZE_DRAW_STATUS_TABS;
 const STATUS_VARIANT = {
     active: "success",
     draft: "default",
@@ -68,8 +54,6 @@ const PRIZE_DRAW_COLUMNS = [
     },
 ];
 export function SellerPrizeDrawsView({ children, onDelete, ...props }) {
-    const hasChildren = React.Children.count(children) > 0;
-    const [view, setView] = useState("table");
     const dispatch = useActionDispatch();
     const [deleteTargetId, setDeleteTargetId] = useState(null);
     const { deletingId, handleDelete: performDelete } = useEntityDelete({
@@ -78,47 +62,29 @@ export function SellerPrizeDrawsView({ children, onDelete, ...props }) {
         successMessage: "Prize draw deleted.",
         fetchOptions: { credentials: "include" },
     });
-    const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
-    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 statusFilter = statusRaw && statusRaw !== "All" ? `status==${statusRaw}` : undefined;
-    const filters = [LISTING_TYPE_FILTER, statusFilter].filter(Boolean).join(",");
-    const { rows, total, isLoading, errorMessage } = useSellerListingData({
+    const handleDelete = useCallback(async (id) => {
+        await performDelete(id);
+        setDeleteTargetId(null);
+    }, [performDelete]);
+    if (React.Children.count(children) > 0) {
+        return (_jsx(ListingLayout, { portal: "seller", ...props, children: children }));
+    }
+    const config = {
+        portal: "seller",
+        title: "Prize Draws",
+        searchPlaceholder: "Search prize draws by name…",
+        emptyLabel: "No prize draws listed yet",
+        filterKeys: ["status"],
+        defaultSort: "-createdAt",
         queryKey: ["seller", "prize-draws", "listing"],
         endpoint: SELLER_ENDPOINTS.PRODUCTS,
-        page: table.getNumber("page", 1),
-        pageSize: PAGE_SIZE,
-        sorts: table.get("sort") || DEFAULT_SORT,
-        filters,
-        q: table.get("q") || undefined,
+        sortOptions: [
+            { value: "-createdAt", label: "Newest" },
+            { value: "createdAt", label: "Oldest" },
+            { value: "title", label: "Title A–Z" },
+            { value: "prizeDrawEndDate", label: "Draw Date Soon" },
+        ],
+        columns: PRIZE_DRAW_COLUMNS,
         mapRows: (response) => toRecordArray(response.products).map((item, index) => {
             const priceRaw = typeof item.price === "number" ? item.price : 0;
             return {
@@ -135,27 +101,28 @@ export function SellerPrizeDrawsView({ children, onDelete, ...props }) {
             };
         }),
         getTotal: (response, mappedRows) => typeof response.meta?.total === "number" ? response.meta.total : mappedRows.length,
-    });
-    const currentPage = table.getNumber("page", 1);
-    const totalPages = Math.ceil(total / PAGE_SIZE);
-    const selection = useBulkSelection({ items: rows, keyExtractor: (r) => r.id });
-    const handleDelete = useCallback(async (id) => {
-        await performDelete(id);
-        setDeleteTargetId(null);
-    }, [performDelete]);
-    if (hasChildren) {
-        return (_jsx(ListingViewShell, { portal: "seller", ...props, children: children }));
-    }
-    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search prize draws by name\u2026", 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("div", { className: "sticky z-10 flex justify-center bg-[var(--appkit-color-surface)]/95 backdrop-blur-sm border-b border-[var(--appkit-color-border)] px-3 py-1.5", style: { top: "calc(var(--header-height, 0px) + 44px)" }, children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsxs("div", { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx(Alert, { variant: "error", className: "mb-4", children: errorMessage })), _jsx(DataTable, { columns: PRIZE_DRAW_COLUMNS, rows: rows, isLoading: isLoading, emptyLabel: "No prize draws listed yet", getRowHref: (row) => String(ROUTES.STORE.PRIZE_DRAWS_EDIT(row.id)), renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
-                                {
-                                    label: ACTIONS.STORE["edit-listing"].label,
-                                    onClick: () => void dispatch({ type: "NAVIGATE", href: String(ROUTES.STORE.PRIZE_DRAWS_EDIT(row.id)) }),
-                                },
-                                ...(onDelete ? [{
-                                        label: ACTIONS.STORE["delete-listing"].label,
-                                        destructive: true,
-                                        onClick: () => setDeleteTargetId(row.id),
-                                        disabled: deletingId === row.id,
-                                    }] : []),
-                            ] })) })] }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsx(FilterChipGroup, { label: "Status", tabs: STATUS_OPTIONS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) }) }), deleteTargetId && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Prize Draw", message: "Are you sure you want to delete this prize draw listing? This cannot be undone.", onConfirm: () => handleDelete(deleteTargetId), onClose: () => setDeleteTargetId(null), isDeleting: deletingId === deleteTargetId }))] }));
+        buildFilters: (state) => {
+            const status = state.status && state.status !== "All" ? `status==${state.status}` : null;
+            return ["listingType==prize-draw", status].filter(Boolean).join(",");
+        },
+        getRowHref: (row) => String(ROUTES.STORE.PRIZE_DRAWS_EDIT(row.id)),
+        renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
+                {
+                    label: ACTIONS.STORE["edit-listing"].label,
+                    onClick: () => void dispatch({ type: "NAVIGATE", href: String(ROUTES.STORE.PRIZE_DRAWS_EDIT(row.id)) }),
+                },
+                ...(onDelete
+                    ? [
+                        {
+                            label: ACTIONS.STORE["delete-listing"].label,
+                            destructive: true,
+                            onClick: () => setDeleteTargetId(row.id),
+                            disabled: deletingId === row.id,
+                        },
+                    ]
+                    : []),
+            ] })),
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsx(FilterChipGroup, { label: "Status", tabs: SELLER_PRIZE_DRAW_STATUS_TABS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) })),
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), deleteTargetId && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Prize Draw", message: "Are you sure you want to delete this prize draw listing? This cannot be undone.", onConfirm: () => handleDelete(deleteTargetId), onClose: () => setDeleteTargetId(null), isDeleting: deletingId === deleteTargetId }))] }));
 }

package/dist/features/seller/components/SellerProductShell.d.ts

@@ -70,7 +70,7 @@ export interface SellerProductShellProps {
     onDiscard?: () => void;
     isLoading?: boolean;
     storeSlug?: string;
-    /** Render a custom category selector (e.g. InlineCreateSelect). */
+    /** Render a custom category selector (e.g. PaginatedSelect with createLabel). */
     renderCategorySelector?: (props: {
         value: string;
         onChange: (v: string) => void;

package/dist/features/seller/components/SellerProductsView.d.ts

@@ -1,5 +1,5 @@
-import type { ListingViewShellProps } from "../../../ui";
-export interface SellerProductsViewProps extends ListingViewShellProps {
+import type { ListingLayoutProps } from "../../../ui";
+export interface SellerProductsViewProps extends ListingLayoutProps {
     onDeleteProduct?: (id: string) => Promise<void>;
     /** S-STORE-2-E — "New Listing" toolbar button. */
     onCreateClick?: () => void;

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

@@ -7,7 +7,7 @@ import { Eye, EyeOff, Pencil, Trash2, Printer, MapPin } from "lucide-react";
 import { PhysicalLocationModal } from "./PhysicalLocationModal";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
-import { Alert, Badge, BulkActionBar, Button, Div, ListingToolbar, ListingViewShell, Pagination, Row, Span, Text, useToast } from "../../../ui";
+import { Alert, Badge, BulkActionBar, Button, Div, ListingToolbar, ListingLayout, Pagination, Row, Span, Text, useToast } from "../../../ui";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { SELLER_PRODUCT_STATUS_TABS } from "../../admin/constants/filter-tabs";
 import { ROUTES } from "../../../constants";
@@ -16,6 +16,7 @@ import { toRecordArray, toRelativeDate, toStringValue, useSellerListingData, } f
 import { DataTable } from "../../admin/components/DataTable";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { buildBulkAction } from "../../../_internal/shared/actions/bulk-helpers";
+import { useListingTypeFlags } from "../../../react/hooks/useListingTypeFlags";
 import { SellerProductsCards } from "./SellerProductsCards";
 import { SellerProductsFilterDrawer } from "./SellerProductsFilterDrawer";
 import { KIND_BADGE_VARIANT } from "./seller-products-styles";
@@ -44,17 +45,21 @@ const STATUS_OPTIONS = SELLER_PRODUCT_STATUS_TABS;
 // S-STORE-2-A — `<TypeDropdown>` replaces the legacy chip strip. Same width on
 // mobile, narrower on desktop. Drives the `?listingType=` query param.
 function TypeDropdown({ active, onChange, }) {
+    const flags = useListingTypeFlags();
+    // W1-43 — hide disabled types so the seller can't filter for an
+    // inactive listing surface. Bundle is a categoryType (not a listingType)
+    // and stays unconditionally available.
     const options = [
         { value: "all", label: "All listings" },
-        { value: "standard", label: "Standard" },
-        { value: "auction", label: "Auction" },
-        { value: "pre-order", label: "Pre-order" },
-        { value: "prize-draw", label: "Prize Draw" },
+        flags.standard && { value: "standard", label: "Standard" },
+        flags.auction && { value: "auction", label: "Auction" },
+        flags["pre-order"] && { value: "pre-order", label: "Pre-order" },
+        flags["prize-draw"] && { value: "prize-draw", label: "Prize Draw" },
         { value: "bundle", label: "Bundle" },
-        { value: "classified", label: "Classified" },
-        { value: "digital-code", label: "Digital Code" },
-        { value: "live", label: "Live" },
-    ];
+        flags.classified && { value: "classified", label: "Classified" },
+        flags["digital-code"] && { value: "digital-code", label: "Digital Code" },
+        flags.live && { value: "live", label: "Live" },
+    ].filter(Boolean);
     return (_jsxs(Row, { className: "gap-2 px-3 lg:px-4 py-2 border-b border-[var(--appkit-color-border)]", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wide text-[var(--appkit-color-text-muted)]", children: "Listing type" }), _jsx("select", { value: active, onChange: (e) => onChange(e.target.value), className: "rounded border border-[var(--appkit-color-border)] bg-transparent px-2 py-1 text-sm sm:max-w-xs", "aria-label": "Filter by listing type", children: options.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value))) })] }));
 }
 const PRODUCT_COLUMNS = [
@@ -207,7 +212,7 @@ export function SellerProductsView({ onDeleteProduct, onCreateClick, children, .
         .map((r) => statusOverrides.has(r.id) ? { ...r, status: statusOverrides.get(r.id) } : r);
     const selection = useBulkSelection({ items: visibleRows, keyExtractor: (r) => r.id });
     if (hasChildren) {
-        return (_jsx(ListingViewShell, { portal: "seller", ...props, children: children }));
+        return (_jsx(ListingLayout, { portal: "seller", ...props, children: children }));
     }
     const handleEdit = (row) => {
         const href = row.listingKind === "auction"

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

@@ -123,7 +123,7 @@ export function SellerShippingConfigsView({ onCreateClick, onEditClick, onDelete
             window.location.href = String(ROUTES.STORE.SHIPPING_CONFIGS_EDIT(id));
         }
     }, [onEditClick]);
-    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: 0, searchValue: searchInput, searchPlaceholder: "Search shipping configs...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsxs(Button, { size: "sm", onClick: handleCreate, className: "flex items-center gap-1.5", children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { children: "New Config" })] }) }), _jsxs("div", { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx(Div, { className: "mb-4 rounded-xl border border-red-200 bg-error-surface dark:border-red-900/60 px-4 py-3 text-sm text-error", children: errorMessage })), isLoading ? (_jsx(Div, { className: "space-y-2", children: Array.from({ length: 3 }).map((_, i) => (_jsx(Div, { className: "h-14 animate-pulse rounded-xl border border-zinc-100 dark:border-slate-700 bg-zinc-50 dark:bg-slate-800" }, i))) })) : rows.length === 0 ? (_jsxs(Div, { className: "py-16 text-center", children: [_jsx(Text, { className: "text-zinc-400 dark:text-zinc-400", children: "No shipping configs yet \u2014 define your first shipping rule" }), _jsx("div", { className: "mt-4", children: _jsx(Button, { size: "sm", onClick: handleCreate, children: "Add shipping config" }) })] })) : (_jsx(DataTable, { columns: COLUMNS, data: rows, keyExtractor: (r) => r.id, actions: (row) => (_jsx(RowActionMenu, { actions: [
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: 0, searchValue: searchInput, searchPlaceholder: "Search shipping configs...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsxs(Button, { size: "sm", onClick: handleCreate, className: "flex items-center gap-1.5", children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { children: "New Config" })] }) }), _jsxs("div", { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx(Div, { className: "mb-4 rounded-xl border border-error/20 bg-error-surface px-4 py-3 text-sm text-error", children: errorMessage })), isLoading ? (_jsx(Div, { className: "space-y-2", children: Array.from({ length: 3 }).map((_, i) => (_jsx(Div, { className: "h-14 animate-pulse rounded-xl border border-zinc-100 dark:border-slate-700 bg-zinc-50 dark:bg-slate-800" }, i))) })) : rows.length === 0 ? (_jsxs(Div, { className: "py-16 text-center", children: [_jsx(Text, { className: "text-zinc-400 dark:text-zinc-400", children: "No shipping configs yet \u2014 define your first shipping rule" }), _jsx("div", { className: "mt-4", children: _jsx(Button, { size: "sm", onClick: handleCreate, children: "Add shipping config" }) })] })) : (_jsx(DataTable, { columns: COLUMNS, data: rows, keyExtractor: (r) => r.id, actions: (row) => (_jsx(RowActionMenu, { actions: [
                                 {
                                     label: ACTIONS.STORE["edit-listing"].label,
                                     onClick: () => handleEdit(row.id),

package/dist/features/seller/components/SellerSidebar.d.ts

@@ -25,8 +25,4 @@ interface StoreSidebarProps {
     className?: string;
 }
 export declare function StoreSidebar({ items, groups, activeHref, storeName, storeLogoURL, mobileOpen, desktopOpen, variant, onCloseMobile, onToggle, }: StoreSidebarProps): import("react/jsx-runtime").JSX.Element;
-/** @deprecated Use StoreSidebar */
-export declare const SellerSidebar: typeof StoreSidebar;
-/** @deprecated Use StoreNavItem */
-export type SellerNavItem = StoreNavItem;
 export {};

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

@@ -62,5 +62,3 @@ export function StoreSidebar({ items, groups, activeHref, storeName, storeLogoUR
     return (_jsxs(_Fragment, { children: [mounted && mobileOpen &&
                 createPortal(_jsx(DrawerPanel, { title: panelTitle, onClose: close, children: navContent }), document.body), _jsx("div", { className: "md:hidden", children: _jsx(BottomSheet, { open: mobileOpen, onClose: close, title: panelTitle, children: groups ? (_jsx(GroupsContent, { groups: groups, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close })) : (_jsx(FlatContent, { items: items, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close })) }) })] }));
 }
-/** @deprecated Use StoreSidebar */
-export const SellerSidebar = StoreSidebar;

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

@@ -94,7 +94,7 @@ export function SellerStoreCategoriesView({ onCreateClick, onEditClick, onDelete
         window.location.href = String(ROUTES.STORE.STORE_CATEGORIES_NEW);
     };
     useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: bulkActions } } : {});
-    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: 0, searchValue: searchInput, searchPlaceholder: "Search categories by label...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, showTableView: true, view: "table", onViewChange: () => { }, onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsxs(Button, { size: "sm", onClick: handleNavigateNew, className: "flex items-center gap-1.5", children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { children: "New Category" })] }) }), 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: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), selection.selectedCount > 0 && (_jsx(BulkActionBar, { selectedCount: selection.selectedCount, actions: bulkActions, onClearSelection: selection.clearSelection })), _jsxs("div", { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx(Div, { className: "mb-4 rounded-xl border border-red-200 bg-error-surface dark:border-red-900/60 px-4 py-3 text-sm text-error", children: errorMessage })), isLoading ? (_jsx(Div, { className: "space-y-2", children: Array.from({ length: 5 }).map((_, i) => (_jsx(Div, { className: "h-14 animate-pulse rounded-xl border border-zinc-100 dark:border-slate-700 bg-zinc-50 dark:bg-slate-800" }, i))) })) : rows.length === 0 ? (_jsx(Div, { className: "py-16 text-center", children: _jsx(Text, { className: "text-zinc-400 dark:text-zinc-400", children: "No categories yet \u2014 add your first storefront category" }) })) : (_jsx(DataTable, { columns: COLUMNS, data: rows, keyExtractor: (r) => r.id, selectable: bulkActions.length > 0, selectedIds: selection.selectedIds, onSelectionChange: (ids) => selection.setSelectedIds(ids), actions: (row) => (_jsx(RowActionMenu, { actions: [
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: 0, searchValue: searchInput, searchPlaceholder: "Search categories by label...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, showTableView: true, view: "table", onViewChange: () => { }, onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsxs(Button, { size: "sm", onClick: handleNavigateNew, className: "flex items-center gap-1.5", children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { children: "New Category" })] }) }), 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: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), selection.selectedCount > 0 && (_jsx(BulkActionBar, { selectedCount: selection.selectedCount, actions: bulkActions, onClearSelection: selection.clearSelection })), _jsxs("div", { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx(Div, { className: "mb-4 rounded-xl border border-error/20 bg-error-surface px-4 py-3 text-sm text-error", children: errorMessage })), isLoading ? (_jsx(Div, { className: "space-y-2", children: Array.from({ length: 5 }).map((_, i) => (_jsx(Div, { className: "h-14 animate-pulse rounded-xl border border-zinc-100 dark:border-slate-700 bg-zinc-50 dark:bg-slate-800" }, i))) })) : rows.length === 0 ? (_jsx(Div, { className: "py-16 text-center", children: _jsx(Text, { className: "text-zinc-400 dark:text-zinc-400", children: "No categories yet \u2014 add your first storefront category" }) })) : (_jsx(DataTable, { columns: COLUMNS, data: rows, keyExtractor: (r) => r.id, selectable: bulkActions.length > 0, selectedIds: selection.selectedIds, onSelectionChange: (ids) => selection.setSelectedIds(ids), actions: (row) => (_jsx(RowActionMenu, { actions: [
                                 {
                                     label: ACTIONS.STORE["edit-listing"].label,
                                     onClick: () => onEditClick