@mohasinac/appkit 4.13.1 → 4.15.0

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

@@ -10,6 +10,8 @@ import { ROUTES } from "../../../constants/index";
 import { toRecordArray, toRelativeDate, toCurrency, toStringValue, } from "../../admin/hooks/useAdminListingData";
 import { DataListingView } from "../../admin/components/DataListingView";
 import { SELLER_BULK_ACTIONS, ROW_ACTION_META } from "../../products/constants/action-defs";
+import { useAvailabilityScope } from "../../products/hooks/useAvailabilityScope";
+const LISTING_TYPES = ["digital-code"];
 const COLUMNS = [
     { key: "title", header: "Product", render: (row) => _jsx(Text, { size: "sm", weight: "medium", children: row.title }) },
     { key: "price", header: "Price", render: (row) => _jsx(Text, { className: "tabular-nums", size: "sm", children: row.price }) },
@@ -63,6 +65,7 @@ export function SellerDigitalCodesView({ onCreateClick, onEditClick, onDelete, o
         else
             window.location.href = String(ROUTES.STORE.DIGITAL_CODES_NEW);
     }, [onCreateClick]);
+    const scope = useAvailabilityScope(LISTING_TYPES);
     const config = {
         portal: "seller",
         title: "Digital Codes",
@@ -94,6 +97,8 @@ export function SellerDigitalCodesView({ onCreateClick, onEditClick, onDelete, o
         }),
         getTotal: (response, mappedRows) => typeof response.meta?.total === "number" ? response.meta.total : mappedRows.length,
         buildFilters: () => "listingType==digital-code",
+        buildExtraParams: () => scope.extraParams,
+        renderAboveContent: scope.renderAboveContent,
         primaryAction: { label: "New Digital Code", onClick: () => handleCreate() },
         // Mirrors the "Edit" row action below so table rows and cards both navigate on click.
         onRowClick: (row) => handleEdit(row.id),

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

@@ -10,6 +10,8 @@ import { ROUTES } from "../../../constants/index";
 import { toRecordArray, toRelativeDate, toCurrency, toStringValue, } from "../../admin/hooks/useAdminListingData";
 import { DataListingView } from "../../admin/components/DataListingView";
 import { SELLER_BULK_ACTIONS, ROW_ACTION_META } from "../../products/constants/action-defs";
+import { useAvailabilityScope } from "../../products/hooks/useAvailabilityScope";
+const LISTING_TYPES = ["live"];
 const COLUMNS = [
     {
         key: "title",
@@ -62,6 +64,7 @@ export function SellerLiveView({ onCreateClick, onEditClick, onDelete, onBulkDel
         else
             window.location.href = String(ROUTES.STORE.LIVE_ITEMS_NEW);
     }, [onCreateClick]);
+    const scope = useAvailabilityScope(LISTING_TYPES);
     const config = {
         portal: "seller",
         title: "Live Items",
@@ -94,6 +97,8 @@ export function SellerLiveView({ onCreateClick, onEditClick, onDelete, onBulkDel
         }),
         getTotal: (response, mappedRows) => typeof response.meta?.total === "number" ? response.meta.total : mappedRows.length,
         buildFilters: () => "listingType==live",
+        buildExtraParams: () => scope.extraParams,
+        renderAboveContent: scope.renderAboveContent,
         primaryAction: { label: "New Live Item", onClick: () => handleCreate() },
         // Mirrors the "Edit" row action below so table rows and cards both navigate on click.
         onRowClick: (row) => handleEdit(row.id),

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

@@ -5,6 +5,7 @@ import { sortBy } from "@mohasinac/appkit/client";
 import React from "react";
 import { FilterChipGroup, ListingLayout, RowActionMenu, RecordDetailModal } from "../../../ui";
 import { QuickFormDrawer } from "../../shell/QuickFormDrawer";
+import { OfferPhaseTimeline } from "./OfferPhaseTimeline";
 import { counterOfferFormSchema } from "../schemas/offer-forms";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { SELLER_OFFER_STATUS_TABS } from "../../admin/constants/filter-tabs";
@@ -79,7 +80,7 @@ export function SellerOffersView({ children, onAcceptOffer, onRejectOffer, onCou
                         ? [{ label: "Buyer must pay by", value: toRelativeDate(d.checkoutDeadline) }]
                         : []),
                     ...(d.sellerNote ? [{ label: "Your note", value: toStringValue(d.sellerNote, "") }] : []),
-                ] }), _jsx(QuickFormDrawer, { isOpen: counterRow !== null, onClose: () => setCounterRow(null), title: `Counter offer — ${counterRow?.primary ?? ""}`, submitLabel: "Send counter", isLoading: isCountering, schema: counterOfferFormSchema, fields: [
+                ], extra: _jsx(OfferPhaseTimeline, { status: toStringValue(d.status, "pending"), timeline: d.timeline, timelineTruncated: d.timelineTruncated, superseded: Boolean(d.superseded), createdAt: toStringValue(d.createdAt, ""), respondedAt: toStringValue(d.respondedAt, ""), acceptedAt: toStringValue(d.acceptedAt, ""), paidAt: toStringValue(d.paidAt, ""), chain: d.chain }) }), _jsx(QuickFormDrawer, { isOpen: counterRow !== null, onClose: () => setCounterRow(null), title: `Counter offer — ${counterRow?.primary ?? ""}`, submitLabel: "Send counter", isLoading: isCountering, schema: counterOfferFormSchema, fields: [
                     {
                         name: "counterAmount",
                         label: "Your counter price (₹)",

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

@@ -10,6 +10,8 @@ import { useActionDispatch } from "../../../react/hooks/use-action-dispatch";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { Badge, Button, Div, FilterChipGroup, Heading, Input, Select, SideDrawer, Span, Stack, Text, useToast } from "../../../ui";
 import { SELLER_ORDER_STATUS_TABS } from "../../admin/constants/filter-tabs";
+import { useOrderScope } from "../../orders/components/OrderScopeTabs";
+import { OrderStatusValues } from "../../orders/schemas/firestore";
 import { isManualPaymentMethod } from "../../orders/constants/payment-window";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { buildBulkAction } from "../../../_internal/shared/actions/bulk-helpers";
@@ -27,13 +29,20 @@ const SORT_OPTIONS = [
     { value: sortBy("createdAt", "ASC"), label: "Oldest" },
 ];
 const STATUS_OPTIONS = SELLER_ORDER_STATUS_TABS;
+// Keyed on the STORED lowercase values, and covering all nine. It was keyed
+// UPPERCASE and read via `status.toUpperCase()` — the only consumer in the
+// codebase doing that — and covered six, so `confirmed`, `return_requested`
+// and `returned` all fell through to the neutral default badge.
 const STATUS_BADGE_VARIANT = {
-    DELIVERED: "success",
-    SHIPPED: "info",
-    PROCESSING: "warning",
-    PENDING: "default",
-    CANCELLED: "danger",
-    REFUNDED: "danger",
+    pending: "default",
+    confirmed: "info",
+    processing: "warning",
+    shipped: "info",
+    delivered: "success",
+    cancelled: "danger",
+    refunded: "danger",
+    return_requested: "warning",
+    returned: "danger",
 };
 const UPDATE_STATUS_OPTIONS = [
     { value: "", label: "— keep current —" },
@@ -168,7 +177,7 @@ export function SellerOrderDetailPanel({ orderId, apiBase, onClose, }) {
     };
     const addr = order?.shippingAddress ?? {};
     const addrLine = [addr.addressLine1, addr.city, addr.state, addr.pincode].filter(Boolean).join(", ");
-    return (_jsxs(_Fragment, { children: [loading && (_jsx(Row, { align: "center", justify: "center", padding: "y-4xl", children: _jsx(Div, { className: "h-6 w-6 animate-spin border-2 border-[var(--appkit-color-primary)] border-t-transparent", rounded: "full" }) })), fetchError && (_jsx(Div, { textSize: "sm", className: "mx-4 mt-4 border border-error/20", color: "error", surface: "danger-surface", padding: "inline", rounded: "lg", children: fetchError })), order && !loading && (_jsxs(Stack, { gap: "none", children: [_jsxs(Stack, { className: `flex-1 ${__O.yAuto}`, gap: "5", padding: "md", children: [_jsxs(Row, { align: "center", justify: "between", children: [_jsx(Badge, { variant: STATUS_BADGE_VARIANT[order.status?.toUpperCase()] ?? "default", children: order.status ?? "Unknown" }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-secondary)]", children: toRelativeDate(order.createdAt) })] }), (order.items ?? []).length > 0 && (_jsxs(Div, { children: [_jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-primary)] mb-2", weight: "semibold", children: "Items" }), _jsx(Div, { className: "divide-y divide-[var(--appkit-color-border)] divide-[var(--appkit-color-border)] border border-[var(--appkit-color-border)]", rounded: "lg", children: (order.items ?? []).map((item, i) => (_jsxs(Row, { paddingY: "y-xs-tall", padding: "x-sm", align: "center", justify: "between", gap: "3", children: [_jsxs(Row, { align: "center", gap: "sm", className: "min-w-0", children: [_jsx(Div, { className: "h-10 w-10 shrink-0", rounded: "md", overflow: "hidden", children: _jsx(MediaImage, { src: item.image, alt: item.title ?? "Order item", size: "thumbnail" }) }), _jsxs(Div, { className: "min-w-0", children: [_jsx(Text, { size: "sm", className: "truncate", weight: "medium", children: item.title ?? item.productId ?? "Item" }), _jsxs(Text, { size: "xs", className: "text-[var(--appkit-color-text-secondary)]", children: ["Qty: ", item.quantity ?? 1] })] })] }), _jsx(Text, { size: "sm", className: "shrink-0", weight: "medium", children: toCurrency(item.price ?? 0) })] }, i))) })] })), _jsx(OrderAddonBadges, { order: order, variant: "detail" }), order.giftWrapAddon && (_jsxs(Div, { className: "border border-[var(--appkit-color-primary-200)] dark:border-[var(--appkit-color-primary-800)]", surface: "subtle", padding: "inline", rounded: "lg", children: [_jsx(Text, { size: "sm", weight: "semibold", children: "\uD83C\uDF81 Gift wrap requested" }), order.giftWrapMessage && (_jsxs(Text, { size: "sm", className: "mt-1 text-[var(--appkit-color-text-secondary)]", children: ["\u201C", order.giftWrapMessage, "\u201D"] }))] })), _jsxs(Row, { surface: "muted", padding: "inline", align: "center", justify: "between", rounded: "lg", children: [_jsx(Text, { size: "sm", weight: "semibold", children: "Total" }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-primary)]", weight: "bold", children: toCurrency(order.totalAmount ?? 0) })] }), addrLine && (_jsxs(Div, { children: [_jsx(Text, { size: "sm", className: "mb-1", weight: "semibold", children: "Shipping address" }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-secondary)]", children: [String(addr.fullName ?? ""), addrLine].filter(Boolean).join(" · ") })] })), order.paymentMethod && (_jsxs(Div, { children: [_jsxs(Row, { align: "center", justify: "between", className: "mb-1", gap: "3", children: [_jsx(Text, { size: "sm", weight: "semibold", children: "Payment" }), isManualPaymentMethod(order.paymentMethod) && (_jsx(Badge, { variant: sellerPaymentBadge(order).variant, children: sellerPaymentBadge(order).label }))] }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-secondary)]", transform: "capitalize", children: order.paymentMethod }), isManualPaymentMethod(order.paymentMethod) && order.paymentTransactionId && (_jsxs(Text, { size: "xs", color: "muted", className: "mt-1", children: ["UTR: ", order.paymentTransactionId] }))] })), order.emiEnabled && (_jsxs(Div, { className: "border-t border-[var(--appkit-color-border)]", padding: "t-md", children: [_jsxs(Row, { align: "center", justify: "between", className: "mb-2", children: [_jsxs(Text, { size: "sm", weight: "semibold", children: ["EMI plan ", order.emiTenureMonths ? `· ${order.emiTenureMonths} months` : ""] }), _jsx(Badge, { variant: order.emiComplete ? "success" : "warning", children: order.emiComplete ? "Fully paid" : "In progress" })] }), _jsxs(Row, { align: "center", justify: "between", className: "mb-2", children: [_jsx(Text, { size: "xs", color: "muted", children: "Token collected" }), _jsx(Text, { size: "xs", weight: "medium", children: toCurrency(order.emiTokenAmount ?? 0) })] }), _jsxs(Row, { align: "center", justify: "between", className: "mb-3", children: [_jsx(Text, { size: "xs", color: "muted", children: "Remaining balance" }), _jsx(Text, { size: "xs", weight: "medium", children: toCurrency(order.emiRemainingBalance ?? 0) })] }), _jsx(Div, { className: "divide-y divide-[var(--appkit-color-border)] border border-[var(--appkit-color-border)]", rounded: "lg", children: (order.emiInstallments ?? []).map((inst) => (_jsxs(Row, { paddingY: "y-xs-tall", padding: "x-sm", align: "center", justify: "between", gap: "3", children: [_jsxs(Div, { className: "min-w-0", children: [_jsxs(Text, { size: "sm", weight: "medium", children: ["Installment ", inst.index, " \u00B7 ", toCurrency(inst.amount)] }), _jsx(Text, { size: "xs", color: "muted", children: inst.status === "paid" && inst.paidAt
+    return (_jsxs(_Fragment, { children: [loading && (_jsx(Row, { align: "center", justify: "center", padding: "y-4xl", children: _jsx(Div, { className: "h-6 w-6 animate-spin border-2 border-[var(--appkit-color-primary)] border-t-transparent", rounded: "full" }) })), fetchError && (_jsx(Div, { textSize: "sm", className: "mx-4 mt-4 border border-error/20", color: "error", surface: "danger-surface", padding: "inline", rounded: "lg", children: fetchError })), order && !loading && (_jsxs(Stack, { gap: "none", children: [_jsxs(Stack, { className: `flex-1 ${__O.yAuto}`, gap: "5", padding: "md", children: [_jsxs(Row, { align: "center", justify: "between", children: [_jsx(Badge, { variant: STATUS_BADGE_VARIANT[order.status ?? ""] ?? "default", children: order.status ?? "Unknown" }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-secondary)]", children: toRelativeDate(order.createdAt) })] }), (order.items ?? []).length > 0 && (_jsxs(Div, { children: [_jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-primary)] mb-2", weight: "semibold", children: "Items" }), _jsx(Div, { className: "divide-y divide-[var(--appkit-color-border)] divide-[var(--appkit-color-border)] border border-[var(--appkit-color-border)]", rounded: "lg", children: (order.items ?? []).map((item, i) => (_jsxs(Row, { paddingY: "y-xs-tall", padding: "x-sm", align: "center", justify: "between", gap: "3", children: [_jsxs(Row, { align: "center", gap: "sm", className: "min-w-0", children: [_jsx(Div, { className: "h-10 w-10 shrink-0", rounded: "md", overflow: "hidden", children: _jsx(MediaImage, { src: item.image, alt: item.title ?? "Order item", size: "thumbnail" }) }), _jsxs(Div, { className: "min-w-0", children: [_jsx(Text, { size: "sm", className: "truncate", weight: "medium", children: item.title ?? item.productId ?? "Item" }), _jsxs(Text, { size: "xs", className: "text-[var(--appkit-color-text-secondary)]", children: ["Qty: ", item.quantity ?? 1] })] })] }), _jsx(Text, { size: "sm", className: "shrink-0", weight: "medium", children: toCurrency(item.price ?? 0) })] }, i))) })] })), _jsx(OrderAddonBadges, { order: order, variant: "detail" }), order.giftWrapAddon && (_jsxs(Div, { className: "border border-[var(--appkit-color-primary-200)] dark:border-[var(--appkit-color-primary-800)]", surface: "subtle", padding: "inline", rounded: "lg", children: [_jsx(Text, { size: "sm", weight: "semibold", children: "\uD83C\uDF81 Gift wrap requested" }), order.giftWrapMessage && (_jsxs(Text, { size: "sm", className: "mt-1 text-[var(--appkit-color-text-secondary)]", children: ["\u201C", order.giftWrapMessage, "\u201D"] }))] })), _jsxs(Row, { surface: "muted", padding: "inline", align: "center", justify: "between", rounded: "lg", children: [_jsx(Text, { size: "sm", weight: "semibold", children: "Total" }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-primary)]", weight: "bold", children: toCurrency(order.totalAmount ?? 0) })] }), addrLine && (_jsxs(Div, { children: [_jsx(Text, { size: "sm", className: "mb-1", weight: "semibold", children: "Shipping address" }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-secondary)]", children: [String(addr.fullName ?? ""), addrLine].filter(Boolean).join(" · ") })] })), order.paymentMethod && (_jsxs(Div, { children: [_jsxs(Row, { align: "center", justify: "between", className: "mb-1", gap: "3", children: [_jsx(Text, { size: "sm", weight: "semibold", children: "Payment" }), isManualPaymentMethod(order.paymentMethod) && (_jsx(Badge, { variant: sellerPaymentBadge(order).variant, children: sellerPaymentBadge(order).label }))] }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-secondary)]", transform: "capitalize", children: order.paymentMethod }), isManualPaymentMethod(order.paymentMethod) && order.paymentTransactionId && (_jsxs(Text, { size: "xs", color: "muted", className: "mt-1", children: ["UTR: ", order.paymentTransactionId] }))] })), order.emiEnabled && (_jsxs(Div, { className: "border-t border-[var(--appkit-color-border)]", padding: "t-md", children: [_jsxs(Row, { align: "center", justify: "between", className: "mb-2", children: [_jsxs(Text, { size: "sm", weight: "semibold", children: ["EMI plan ", order.emiTenureMonths ? `· ${order.emiTenureMonths} months` : ""] }), _jsx(Badge, { variant: order.emiComplete ? "success" : "warning", children: order.emiComplete ? "Fully paid" : "In progress" })] }), _jsxs(Row, { align: "center", justify: "between", className: "mb-2", children: [_jsx(Text, { size: "xs", color: "muted", children: "Token collected" }), _jsx(Text, { size: "xs", weight: "medium", children: toCurrency(order.emiTokenAmount ?? 0) })] }), _jsxs(Row, { align: "center", justify: "between", className: "mb-3", children: [_jsx(Text, { size: "xs", color: "muted", children: "Remaining balance" }), _jsx(Text, { size: "xs", weight: "medium", children: toCurrency(order.emiRemainingBalance ?? 0) })] }), _jsx(Div, { className: "divide-y divide-[var(--appkit-color-border)] border border-[var(--appkit-color-border)]", rounded: "lg", children: (order.emiInstallments ?? []).map((inst) => (_jsxs(Row, { paddingY: "y-xs-tall", padding: "x-sm", align: "center", justify: "between", gap: "3", children: [_jsxs(Div, { className: "min-w-0", children: [_jsxs(Text, { size: "sm", weight: "medium", children: ["Installment ", inst.index, " \u00B7 ", toCurrency(inst.amount)] }), _jsx(Text, { size: "xs", color: "muted", children: inst.status === "paid" && inst.paidAt
                                                                 ? `Paid ${toRelativeDate(inst.paidAt)}`
                                                                 : inst.dueDate
                                                                     ? `Due ${toRelativeDate(inst.dueDate)}`
@@ -266,7 +275,7 @@ export function SellerOrdersView({ orderDetailApiBase = SELLER_ENDPOINTS.ORDERS,
             key: "status",
             header: "Status",
             className: "w-32",
-            render: (row) => (_jsx(Badge, { variant: STATUS_BADGE_VARIANT[row.status?.toUpperCase()] ?? "default", children: row.status })),
+            render: (row) => (_jsx(Badge, { variant: STATUS_BADGE_VARIANT[row.status ?? ""] ?? "default", children: row.status })),
         },
         {
             key: "physicalLocation",
@@ -281,6 +290,7 @@ export function SellerOrdersView({ orderDetailApiBase = SELLER_ENDPOINTS.ORDERS,
             render: (row) => _jsx(Span, { size: "xs", color: "muted", children: row.updatedAt }),
         },
     ];
+    const orderScope = useOrderScope();
     const config = {
         portal: "seller",
         title: "Orders",
@@ -313,7 +323,12 @@ export function SellerOrdersView({ orderDetailApiBase = SELLER_ENDPOINTS.ORDERS,
             };
         }),
         getTotal: (response, mappedRows) => typeof response.meta?.total === "number" ? response.meta.total : mappedRows.length,
+        // The scope narrows; the status chip drills down inside it. Both are
+        // emitted — an explicit status always wins, since picking "Delivered"
+        // while sitting on Active should show delivered orders, not nothing.
         buildFilters: (state) => (state.status && state.status !== "All" ? sieveFilter("status", SIEVE_OP.EQ, state.status) : undefined),
+        buildExtraParams: () => orderScope.extraParams,
+        renderAboveContent: orderScope.renderAboveContent,
         renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsx(FilterChipGroup, { label: "Status", tabs: STATUS_OPTIONS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) })),
         buildBulkActions: (selection) => {
             const handlePrintPackingSlips = () => {
@@ -330,7 +345,14 @@ export function SellerOrdersView({ orderDetailApiBase = SELLER_ENDPOINTS.ORDERS,
             ];
         },
         renderRowActions: (row) => {
-            const isShippable = ["PENDING", "PROCESSING", "CONFIRMED"].includes(row.status?.toUpperCase() ?? "");
+            // Compared against the stored lowercase values, like every other
+            // consumer — the uppercase form here was a local convention that only
+            // worked because of the `.toUpperCase()` alongside it.
+            const isShippable = [
+                OrderStatusValues.PENDING,
+                OrderStatusValues.PROCESSING,
+                OrderStatusValues.CONFIRMED,
+            ].includes(row.status ?? "");
             return (_jsxs(Row, { align: "center", gap: "xs", children: [isShippable && (_jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => void handleQuickShip(row, e), "aria-label": "Mark as shipped", title: "Mark shipped", isLoading: shippingRowId === row.id, disabled: shippingRowId !== null, children: _jsx(Truck, { className: "h-4 w-4" }) })), _jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); setSelectedOrderId(row.id); }, title: "View order details", "aria-label": "View order details", children: _jsx(Eye, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => {
                             e.stopPropagation();
                             void dispatch({ type: "NAVIGATE", href: String(ROUTES.STORE.ORDER_DETAIL(row.id)) });

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

@@ -5,7 +5,7 @@ import { z } from "zod";
 import { Alert, Badge, Checkbox, Div, FormField, FormGroup, Heading, Label, Row, Stack, Text, Toggle } from "../../../ui";
 import { StackedViewShell } from "../../../ui";
 import { FormShellContext, useFormShellState, applyZodIssues, FormErrorSummary } from "../../../ui/forms";
-import { StepForm } from "../../shell";
+import { SectionForm, useSectionFormNav, annotate } from "../../shell";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { normalizeError } from "../../../errors/normalize";
 const __P = {
@@ -16,20 +16,44 @@ const __P = {
 // accountNumber field's helpText below), and the exact keep-existing
 // semantics live server-side; a client-side format requirement risks
 // blocking that legitimate blank-resave case.
+/**
+ * Section membership and row span live on the FIELD (W3).
+ *
+ * The `sections` array below still hand-writes this form's JSX, because its
+ * Payout Method panel is genuinely bespoke — a configured/not-configured
+ * badge, a "current UPI/bank" alert, and a UPI-vs-bank branch. What is NOT
+ * hand-written any more is which field belongs where and how wide it is:
+ * that is read off the schema, and `audit-form-field-roundtrip` (W4) can
+ * cross-check the two so they cannot drift apart.
+ *
+ * 🛑 `annotate()` must be the OUTERMOST call on each field. It keys a WeakMap
+ * by schema instance, and every zod wrapper returns a NEW instance — so
+ * `annotate(z.string(), …).optional()` silently loses the metadata and the
+ * field falls into the "advanced" fallback section. `audit-field-ui-meta`
+ * blocks that ordering.
+ */
 const payoutSettingsDraftSchema = z.object({
-    method: z.enum(["upi", "bank_transfer"]),
-    upiId: z.string(),
-    accountHolderName: z.string(),
-    accountNumber: z.string(),
-    ifscCode: z.string(),
-    bankName: z.string(),
-    accountType: z.enum(["savings", "current"]),
-    gstin: z.string(),
-    pan: z.string(),
-    businessType: z.string(),
-    autoPayout: z.boolean(),
-    minimumThreshold: z.string(),
-    emiEnabled: z.boolean(),
+    method: annotate(z.enum(["upi", "bank_transfer"]), {
+        section: "method", sectionLabel: "Payout Method", sectionRequired: true,
+        quick: true, order: 1, row: "pair",
+    }),
+    upiId: annotate(z.string(), { section: "method", quick: true, order: 2, row: "pair" }),
+    accountHolderName: annotate(z.string(), { section: "method", quick: true, order: 3, row: "full" }),
+    // Account number and IFSC read as one unit and each needs about half the
+    // width — the pairing this whole mechanism exists to make declarative
+    // instead of a bare `grid-cols-2` that is two columns wide at 320px.
+    accountNumber: annotate(z.string(), { section: "method", quick: true, order: 4, row: "pair" }),
+    ifscCode: annotate(z.string(), { section: "method", quick: true, order: 5, row: "pair" }),
+    bankName: annotate(z.string(), { section: "method", quick: true, order: 6, row: "pair" }),
+    accountType: annotate(z.enum(["savings", "current"]), { section: "method", quick: true, order: 7, row: "pair" }),
+    gstin: annotate(z.string(), { section: "tax", sectionLabel: "Tax Info", order: 1, row: "pair" }),
+    pan: annotate(z.string(), { section: "tax", order: 2, row: "pair" }),
+    businessType: annotate(z.string(), { section: "tax", order: 3, row: "pair" }),
+    autoPayout: annotate(z.boolean(), {
+        section: "preferences", sectionLabel: "Preferences", order: 1, row: "quarter",
+    }),
+    minimumThreshold: annotate(z.string(), { section: "preferences", order: 2, row: "pair" }),
+    emiEnabled: annotate(z.boolean(), { section: "preferences", order: 3, row: "quarter" }),
 }).superRefine((v, ctx) => {
     if (v.method === "upi") {
         if (!v.upiId.trim()) {
@@ -73,12 +97,6 @@ export function SellerPayoutSettingsView({ apiBase = SELLER_ENDPOINTS.PAYOUT_SET
     const [saving, setSaving] = useState(false);
     const [error, setError] = useState(null);
     const [success, setSuccess] = useState(false);
-    const [currentStep, setCurrentStep] = useState(0);
-    const { shellCtx, setFieldError, clearErrors, validate } = useFormShellState(payoutSettingsDraftSchema);
-    useEffect(() => {
-        validate(draft);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [draft, validate]);
     useEffect(() => {
         fetch(apiBase)
             .then((r) => r.json())
@@ -166,9 +184,17 @@ export function SellerPayoutSettingsView({ apiBase = SELLER_ENDPOINTS.PAYOUT_SET
         }
     };
     const busy = loading || saving;
-    const steps = [
+    // Payout Method is the only section that must be filled for the record to be
+    // valid — the schema's superRefine rejects an empty UPI ID or bank name and
+    // nothing else. Tax Info is explicitly optional, and Preferences all have
+    // working defaults. So it is the required-first section, and the other two
+    // start collapsed.
+    const sections = useMemo(() => [
         {
+            id: "method",
             label: "Payout Method",
+            required: true,
+            quick: true,
             fields: ["method", "upiId", "accountHolderName", "accountNumber", "ifscCode", "bankName", "accountType"],
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Payout Method" }), current && (_jsx(Row, { className: "mb-2", align: "center", gap: "sm", children: _jsx(Badge, { variant: current.isConfigured ? "success" : "warning", children: current.isConfigured ? "Payout configured" : "Not configured" }) })), current?.isConfigured && (_jsx(Alert, { variant: "info", children: current.method === "upi"
                             ? `Current UPI: ${current.upiId}`
@@ -178,26 +204,25 @@ export function SellerPayoutSettingsView({ apiBase = SELLER_ENDPOINTS.PAYOUT_SET
                         ]).map(({ value, label, desc }) => (_jsxs("label", { className: "flex items-center gap-[var(--appkit-space-3)] p-[var(--appkit-space-3)] rounded-lg border border-[var(--appkit-color-border)] cursor-pointer has-[:checked]:border-[var(--appkit-color-primary)] has-[:checked]:bg-[var(--appkit-color-primary)]/5", children: [_jsx(Checkbox, { bare: true, type: "radio", name: "payoutMethod", value: value, checked: values.method === value, onChange: () => onChange({ method: value }), className: "accent-[var(--appkit-color-primary)]", disabled: busy }), _jsxs(Div, { children: [_jsx(Text, { weight: "medium", children: label }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: desc })] })] }, value))) }), values.method === "upi" && (_jsx(FormField, { name: "upiId", label: "UPI ID (VPA)", type: "text", value: values.upiId, onChange: (v) => onChange({ upiId: v }), placeholder: "yourname@upi", helpText: "Ensure this VPA is registered and active.", disabled: busy })), values.method === "bank_transfer" && (_jsxs(Stack, { gap: "md", className: "mt-2", children: [_jsx(FormField, { name: "accountHolderName", label: "Account Holder Name", type: "text", value: values.accountHolderName, onChange: (v) => onChange({ accountHolderName: v }), placeholder: "Name as on bank account", disabled: busy }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "accountNumber", label: "Account Number", type: "text", value: values.accountNumber, onChange: (v) => onChange({ accountNumber: v }), placeholder: "Enter full account number", helpText: current?.bankAccount ? `Saved: ••••${current.bankAccount.accountNumberMasked?.slice(-4) ?? "••••"}` : "Stored securely, never displayed in full.", disabled: busy }), _jsx(FormField, { name: "ifscCode", label: "IFSC Code", type: "text", value: values.ifscCode, onChange: (v) => onChange({ ifscCode: v.toUpperCase() }), placeholder: "e.g. SBIN0001234", disabled: busy })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "bankName", label: "Bank Name", type: "text", value: values.bankName, onChange: (v) => onChange({ bankName: v }), placeholder: "e.g. State Bank of India", disabled: busy }), _jsxs(Div, { children: [_jsx(Text, { className: "mb-1.5", size: "sm", weight: "medium", children: "Account Type" }), _jsx(Row, { gap: "xs", children: ["savings", "current"].map((t) => (_jsxs(Label, { layout: "flex", gap: "md", className: "cursor-pointer", children: [_jsx(Checkbox, { bare: true, type: "radio", name: "accountType", value: t, checked: values.accountType === t, onChange: () => onChange({ accountType: t }), className: "accent-[var(--appkit-color-primary)]", disabled: busy }), _jsx(Text, { size: "sm", transform: "capitalize", children: t })] }, t))) })] })] })] }))] })),
         },
         {
+            id: "tax",
             label: "Tax Info",
             fields: ["gstin", "pan", "businessType"],
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Tax Information" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Optional \u2014 required only for GST invoice generation and TDS compliance." }), _jsx(FormField, { name: "gstin", label: "GSTIN (optional)", type: "text", value: values.gstin, onChange: (v) => onChange({ gstin: v.toUpperCase() }), placeholder: "e.g. 22AAAAA0000A1Z5", helpText: "15-character Goods and Services Tax Identification Number.", disabled: busy }), _jsx(FormField, { name: "pan", label: "PAN (optional)", type: "text", value: values.pan, onChange: (v) => onChange({ pan: v.toUpperCase() }), placeholder: "e.g. ABCDE1234F", helpText: "Required for payouts above \u20B950,000 per year (TDS threshold).", disabled: busy }), _jsx(FormField, { name: "businessType", label: "Business Type (optional)", type: "text", value: values.businessType, onChange: (v) => onChange({ businessType: v }), placeholder: "e.g. Individual, Sole Proprietor, Private Limited", disabled: busy })] })),
         },
         {
+            id: "preferences",
             label: "Preferences",
             fields: ["autoPayout", "minimumThreshold", "emiEnabled"],
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Payout Preferences" }), _jsx(Toggle, { checked: values.autoPayout, onChange: (checked) => onChange({ autoPayout: checked }), label: "Enable auto-payout \u2014 automatically transfer earnings on schedule", disabled: busy }), _jsx(FormField, { name: "minimumThreshold", label: "Minimum Payout Threshold (\u20B9)", type: "number", value: values.minimumThreshold, onChange: (v) => onChange({ minimumThreshold: v }), placeholder: "e.g. 500", helpText: "Payouts are held until your balance exceeds this amount. Leave blank for no minimum.", disabled: busy }), _jsxs(Div, { className: `${__P.p3} bg-[var(--appkit-color-surface-alt)] border border-[var(--appkit-color-border)]`, rounded: "lg", children: [_jsx(Text, { className: "mb-1", size: "sm", weight: "medium", children: "Payout Schedule" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Auto-payouts run every Monday for the previous week's settled orders. Manual payouts can be requested from the Payouts page at any time." })] }), _jsx(Toggle, { checked: values.emiEnabled, onChange: (checked) => onChange({ emiEnabled: checked }), label: "Offer EMI financing on eligible orders", disabled: busy }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Only shown to buyers when platform-wide EMI is also enabled and their cart subtotal from your store exceeds the site's minimum order value. Orders on an EMI plan hold your payout until every installment is paid, unless you mark the item \"ship before EMI completes\"." })] })),
         },
-    ];
-    const fieldToStepIndex = useMemo(() => {
-        const map = {};
-        steps.forEach((step, i) => {
-            step.fields?.forEach((field) => { map[field] = i; });
-        });
-        return map;
+    ], [busy, current]);
+    const { openIds, setOpenIds, goToSection, fieldToSectionIndex, sectionMeta } = useSectionFormNav(sections, draft);
+    const { shellCtx, setFieldError, clearErrors, validate } = useFormShellState(payoutSettingsDraftSchema, { sections: sectionMeta, onGoToSection: goToSection, fieldToSectionIndex });
+    useEffect(() => {
+        validate(draft);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [steps.length]);
-    const wizardShellCtx = useMemo(() => ({ ...shellCtx, fieldToStepIndex, goToStep: (n) => setCurrentStep(n) }), [shellCtx, fieldToStepIndex, setCurrentStep]);
+    }, [draft, validate]);
     return (_jsx(StackedViewShell, { portal: "seller", title: "Payout Settings", sections: [
-            _jsxs(Div, { children: [error && _jsx(Alert, { variant: "error", className: "mb-4", children: error }), success && _jsx(Alert, { variant: "success", className: "mb-4", children: "Payout details saved." }), _jsxs(FormShellContext.Provider, { value: wizardShellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(StepForm, { steps: steps, values: draft, onChange: update, onComplete: handleSave, formId: "seller-payout-settings", currentStep: currentStep, onStepChange: setCurrentStep, completeLabel: "Save Payout Details", isLoading: busy })] })] }, "payout"),
+            _jsxs(Div, { children: [error && _jsx(Alert, { variant: "error", className: "mb-4", children: error }), success && _jsx(Alert, { variant: "success", className: "mb-4", children: "Payout details saved." }), _jsxs(FormShellContext.Provider, { value: shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: draft, onChange: update, onSubmit: handleSave, schema: payoutSettingsDraftSchema, openIds: openIds, onOpenChange: setOpenIds, submitLabel: "Save Payout Details", isLoading: busy })] })] }, "payout"),
         ] }));
 }

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

@@ -13,6 +13,8 @@ import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { toRecordArray, toRelativeDate, toCurrency, toStringValue, } from "../../admin/hooks/useAdminListingData";
 import { DataListingView } from "../../admin/components/DataListingView";
 import { useActionDispatch } from "../../../react/hooks/use-action-dispatch";
+import { useAvailabilityScope } from "../../products/hooks/useAvailabilityScope";
+const PRE_ORDER_TYPES = ["pre-order"];
 const PRE_ORDER_COLUMNS = [
     {
         key: "thumbnail",
@@ -75,6 +77,7 @@ export function SellerPreOrdersView({ children, onDelete, ...props }) {
     if (React.Children.count(children) > 0) {
         return (_jsx(ListingLayout, { portal: "seller", ...props, children: children }));
     }
+    const scope = useAvailabilityScope(PRE_ORDER_TYPES);
     const config = {
         portal: "seller",
         title: "Pre-Orders",
@@ -120,6 +123,8 @@ export function SellerPreOrdersView({ children, onDelete, ...props }) {
             const status = state.status && state.status !== "All" ? sieveFilter("status", SIEVE_OP.EQ, state.status) : null;
             return ["listingType==pre-order", status].filter(Boolean).join(",");
         },
+        buildExtraParams: () => scope.extraParams,
+        renderAboveContent: scope.renderAboveContent,
         rowHrefTemplate: String(ROUTES.STORE.PRE_ORDERS_EDIT("{id}")),
         renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
                 {

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

@@ -4,16 +4,16 @@ import { Row, SIEVE_OP, Stack, sieveFilter } from "@mohasinac/appkit/client";
 import { sortBy } from "@mohasinac/appkit/client";
 import React, { useState, useCallback } from "react";
 import { useEntityDelete } from "../../../react/hooks/useEntityDelete";
-import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { Badge, ConfirmDeleteModal, Div, FilterChipGroup, ListingLayout, RowActionMenu, Span, Text } from "../../../ui";
 import { MediaImage } from "../../media/MediaImage";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
-import { TABLE_KEYS } from "../../../constants/table-keys";
 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, toCurrency, toStringValue, } from "../../admin/hooks/useAdminListingData";
 import { DataListingView } from "../../admin/components/DataListingView";
+import { useAvailabilityScope } from "../../products/hooks/useAvailabilityScope";
+const PRIZE_DRAW_TYPES = ["prize-draw"];
 import { useActionDispatch } from "../../../react/hooks/use-action-dispatch";
 // Real ProductStatus is draft|published|in_review|archived — "active"
 // fixed to "published"; "ended"/"cancelled" removed since status never
@@ -64,8 +64,7 @@ export function SellerPrizeDrawsView({ children, onDelete, ...props }) {
     const dispatch = useActionDispatch();
     // Independent of DataListingView's own internal useUrlTable() — see the
     // same pattern in SellerAuctionsView.tsx.
-    const toggleTable = useUrlTable({});
-    const showClosed = toggleTable.get(TABLE_KEYS.SHOW_CLOSED) === "true";
+    const scope = useAvailabilityScope(PRIZE_DRAW_TYPES);
     const [deleteTargetId, setDeleteTargetId] = useState(null);
     const { deletingId, handleDelete: performDelete } = useEntityDelete({
         endpoint: SELLER_ENDPOINTS.PRODUCT_BY_ID,
@@ -85,7 +84,7 @@ export function SellerPrizeDrawsView({ children, onDelete, ...props }) {
         title: "Prize Draws",
         searchPlaceholder: "Search prize draws by name…",
         emptyLabel: "No prize draws listed yet",
-        filterKeys: ["status", TABLE_KEYS.SHOW_CLOSED],
+        filterKeys: ["status"],
         defaultSort: sortBy("createdAt", "DESC"),
         queryKey: ["seller", "prize-draws", "listing"],
         endpoint: SELLER_ENDPOINTS.PRODUCTS,
@@ -115,18 +114,17 @@ export function SellerPrizeDrawsView({ children, onDelete, ...props }) {
         getTotal: (response, mappedRows) => typeof response.meta?.total === "number" ? response.meta.total : mappedRows.length,
         buildFilters: (state) => {
             const status = state.status && state.status !== "All" ? sieveFilter("status", SIEVE_OP.EQ, state.status) : null;
-            const closed = state[TABLE_KEYS.SHOW_CLOSED] !== "true"
-                ? sieveFilter("prizeRevealWindowEnd", SIEVE_OP.GTE, new Date().toISOString())
-                : null;
-            return ["listingType==prize-draw", status, closed].filter(Boolean).join(",");
+            // The hide-closed clause that used to live here tested the reveal
+            // WINDOW END date, a different field from the reveal STATUS every other
+            // surface reads — so a draw the seller had closed early still showed as
+            // open here. It also pushed an inequality alongside an arbitrary sort
+            // (Root Cause #59), which `audit-listing-indices` had been reporting as
+            // QUERY_UNSATISFIABLE. The scope param now carries it, resolved from the
+            // listing-type registry.
+            return ["listingType==prize-draw", status].filter(Boolean).join(",");
         },
-        toggles: [
-            {
-                label: "Show closed",
-                active: showClosed,
-                onChange: (next) => toggleTable.set(TABLE_KEYS.SHOW_CLOSED, next ? "true" : ""),
-            },
-        ],
+        buildExtraParams: () => scope.extraParams,
+        renderAboveContent: scope.renderAboveContent,
         rowHrefTemplate: String(ROUTES.STORE.PRIZE_DRAWS_EDIT("{id}")),
         renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
                 {

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

@@ -11,6 +11,7 @@ import { StoreAddressSelectorCreate } from "../../stores/components/StoreAddress
 import { QuickProductForm } from "./QuickProductForm";
 import { BarcodeField } from "./BarcodeField";
 import { pluginFor } from "../../../_internal/shared/listing-types/_registry";
+import { DEFAULT_MIN_OFFER_PERCENT } from "../../../_internal/shared/features/offers/config";
 import { normalizeError } from "../../../errors/normalize";
 /**
  * "bundle" is a categoryType, not a ListingType, so it can't live in
@@ -198,7 +199,12 @@ const TYPE_SPECIFIC_STEPS = {
 function StepPricing({ values, onChange, listingType, }) {
     const listingPlugin = pluginForMode(listingType);
     const priceLabel = listingPlugin.priceLabel;
-    return (_jsxs(Stack, { gap: "md", children: [_jsx(Alert, { variant: "info", children: "All prices in Indian Rupees (\u20B9)." }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "price", label: priceLabel, type: "number", value: toRupeesString(values.price), onChange: (v) => onChange({ price: fromRupeesString(v) }), placeholder: "999" }), _jsx(FormField, { name: "compareAtPrice", label: "Compare-at Price (\u20B9, optional)", type: "number", value: toRupeesString(values.compareAtPrice), onChange: (v) => onChange({ compareAtPrice: v ? fromRupeesString(v) : undefined }), placeholder: "1299", helpText: "Original price shown as strikethrough" })] }), listingPlugin.showsStockQuantity && (_jsx(FormField, { name: "stockQuantity", label: "Stock Quantity", type: "number", value: String(values.stockQuantity ?? ""), onChange: (v) => onChange({ stockQuantity: Number(v) }), placeholder: "1" })), _jsxs(FormGroup, { columns: 2, children: [_jsx(Toggle, { checked: !!values.featured, onChange: (checked) => onChange({ featured: checked }), label: "Mark as Featured" }), _jsx(Toggle, { checked: !!values.isNew, onChange: (checked) => onChange({ isNew: checked }), label: "Mark as New Arrival" })] }), _jsx(Toggle, { checked: !!values.allowOffers, onChange: (checked) => onChange({ allowOffers: checked, minOfferPercent: checked ? values.minOfferPercent ?? 50 : undefined }), label: "Allow buyer offers" }), values.allowOffers && (_jsx(FormField, { name: "minOfferPercent", label: "Minimum offer (% of price)", type: "number", value: String(values.minOfferPercent ?? ""), onChange: (v) => onChange({ minOfferPercent: Number(v) }), placeholder: "50" }))] }));
+    return (_jsxs(Stack, { gap: "md", children: [_jsx(Alert, { variant: "info", children: "All prices in Indian Rupees (\u20B9)." }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "price", label: priceLabel, type: "number", value: toRupeesString(values.price), onChange: (v) => onChange({ price: fromRupeesString(v) }), placeholder: "999" }), _jsx(FormField, { name: "compareAtPrice", label: "Compare-at Price (\u20B9, optional)", type: "number", value: toRupeesString(values.compareAtPrice), onChange: (v) => onChange({ compareAtPrice: v ? fromRupeesString(v) : undefined }), placeholder: "1299", helpText: "Original price shown as strikethrough" })] }), listingPlugin.showsStockQuantity && (_jsx(FormField, { name: "stockQuantity", label: "Stock Quantity", type: "number", value: String(values.stockQuantity ?? ""), onChange: (v) => onChange({ stockQuantity: Number(v) }), placeholder: "1" })), _jsxs(FormGroup, { columns: 2, children: [_jsx(Toggle, { checked: !!values.featured, onChange: (checked) => onChange({ featured: checked }), label: "Mark as Featured" }), _jsx(Toggle, { checked: !!values.isNew, onChange: (checked) => onChange({ isNew: checked }), label: "Mark as New Arrival" })] }), _jsx(Toggle, { checked: !!values.allowOffers, onChange: (checked) => onChange({
+                    allowOffers: checked,
+                    minOfferPercent: checked
+                        ? values.minOfferPercent ?? DEFAULT_MIN_OFFER_PERCENT
+                        : undefined,
+                }), label: "Allow buyer offers" }), values.allowOffers && (_jsx(FormField, { name: "minOfferPercent", label: "Minimum offer (% of price)", type: "number", value: String(values.minOfferPercent ?? ""), onChange: (v) => onChange({ minOfferPercent: Number(v) }), placeholder: String(DEFAULT_MIN_OFFER_PERCENT) }))] }));
 }
 // ── Step: Shipping ────────────────────────────────────────────────────────
 function StepShipping({ values, onChange, renderAddressSelector, }) {

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

@@ -15,6 +15,7 @@ import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { SELLER_PRODUCT_STATUS_TABS } from "../../admin/constants/filter-tabs";
 import { ROUTES } from "../../../constants";
 import { normalizeListingType } from "../../products/utils/listing-type";
+import { useAvailabilityScope } from "../../products/hooks/useAvailabilityScope";
 import { toRecordArray, toRelativeDate, toStringValue } from "../hooks/useSellerListingData";
 import { useListingTypeFlags } from "../../../react/hooks/useListingTypeFlags";
 import { ALL_LISTING_TYPES } from "../../../_internal/shared/listing-types/feature-flags";
@@ -35,7 +36,6 @@ const FILTER_KEYS = [
     "tags",
     "badges",
     "listingType",
-    "showSold",
 ];
 const DEFAULT_SORT = "-createdAt";
 const SORT_OPTIONS = [
@@ -117,7 +117,9 @@ export function SellerProductsView({ onDeleteProduct, onCreateClick, }) {
     // own internal table also reads via `filterKeys`, so both stay in sync.
     const sideTable = useUrlTable({ defaults: { sort: DEFAULT_SORT } });
     const listingKind = (sideTable.get("listingType") || "all");
-    const showSold = sideTable.get("showSold") === "true";
+    // The scope bar spans whichever types the type-dropdown has narrowed to, so
+    // its middle tab reads "Ended" on Auctions and "Sold" on Products.
+    const scope = useAvailabilityScope(listingKind === "all" ? ALL_LISTING_TYPES : [listingKind]);
     const { deletingId, handleDelete: performDelete } = useEntityDelete({
         deleteFn: onDeleteProduct,
         onSuccess: (id) => { setDeletedIds((prev) => new Set([...prev, id])); },
@@ -204,9 +206,6 @@ export function SellerProductsView({ onDeleteProduct, onCreateClick, }) {
         endpoint: SELLER_ENDPOINTS.PRODUCTS,
         sortOptions: SORT_OPTIONS,
         columns: PRODUCT_COLUMNS,
-        toggles: [
-            { label: "Show sold", active: showSold, onChange: (next) => sideTable.set("showSold", next ? "true" : "") },
-        ],
         primaryAction: onCreateClick ? { label: "New Listing", onClick: onCreateClick } : undefined,
         mapRows: (response) => {
             const rows = toRecordArray(response.products).map((item, index) => {
@@ -252,11 +251,15 @@ export function SellerProductsView({ onDeleteProduct, onCreateClick, }) {
         buildFilters: (state) => {
             const statusFilter = state.status && state.status !== "All" ? sieveFilter("status", SIEVE_OP.EQ, state.status) : undefined;
             const kindFilter = !state.listingType || state.listingType === "all" ? undefined : sieveFilter("listingType", SIEVE_OP.EQ, state.listingType);
-            const soldFilter = state.showSold === "true" ? undefined : "isSold==false";
-            return [statusFilter, kindFilter, soldFilter].filter(Boolean).join(",") || undefined;
+            // The hardcoded `isSold==false` that used to live here is gone: it asked
+            // a narrower question than the rest of the app (an ended auction is not
+            // `isSold`), so the seller dashboard and /auctions disagreed about the
+            // same rows. The scope param carries the per-type meaning instead.
+            return [statusFilter, kindFilter].filter(Boolean).join(",") || undefined;
         },
         renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsx(SellerProductsFilterFields, { pendingFilters: pendingFilters, statusOptions: STATUS_OPTIONS, onChange: setPendingFilters })),
-        renderAboveContent: () => _jsx(TypeDropdown, { active: listingKind, onChange: handleKindChange }),
+        buildExtraParams: () => scope.extraParams,
+        renderAboveContent: () => (_jsxs(Stack, { gap: "sm", children: [_jsx(TypeDropdown, { active: listingKind, onChange: handleKindChange }), scope.renderAboveContent()] })),
         buildBulkActions: (selection) => {
             const handleBulkPrintLabels = () => {
                 const ids = selection.selectedIds.join(",");

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

@@ -14,6 +14,8 @@ import { ROUTES } from "../../../constants/index";
 import { toRecordArray, toRelativeDate, toCurrency, toStringValue, } from "../../admin/hooks/useAdminListingData";
 import { DataListingView } from "../../admin/components/DataListingView";
 import { SELLER_BULK_ACTIONS, ROW_ACTION_META } from "../../products/constants/action-defs";
+import { useAvailabilityScope } from "../../products/hooks/useAvailabilityScope";
+const LISTING_TYPES = ["stickers"];
 const COLUMNS = [
     { key: "title", header: "Listing", render: (row) => _jsx(Text, { size: "sm", weight: "medium", children: row.title }) },
     { key: "price", header: "Price", render: (row) => _jsx(Text, { className: "tabular-nums", size: "sm", children: row.price }) },
@@ -57,6 +59,7 @@ export function SellerStickersView({ onCreateClick, onEditClick, onDelete, onBul
         else
             window.location.href = String(ROUTES.STORE.STICKERS_NEW);
     }, [onCreateClick]);
+    const scope = useAvailabilityScope(LISTING_TYPES);
     const config = {
         portal: "seller",
         title: "Stickers",
@@ -87,6 +90,8 @@ export function SellerStickersView({ onCreateClick, onEditClick, onDelete, onBul
         }),
         getTotal: (response, mappedRows) => typeof response.meta?.total === "number" ? response.meta.total : mappedRows.length,
         buildFilters: () => "listingType==stickers",
+        buildExtraParams: () => scope.extraParams,
+        renderAboveContent: scope.renderAboveContent,
         primaryAction: { label: "New Sticker Listing", onClick: () => handleCreate() },
         // Mirrors the "Edit" row action below so table rows and cards both navigate on click.
         onRowClick: (row) => handleEdit(row.id),

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

@@ -13,8 +13,6 @@ export { SellerOrdersView, SellerOrderDetailPanel } from "./SellerOrdersView";
 export type { SellerOrdersViewProps } from "./SellerOrdersView";
 export { SellerOffersView } from "./SellerOffersView";
 export type { SellerOffersViewProps } from "./SellerOffersView";
-export { SellerOffersPanel } from "./SellerOffersPanel";
-export type { SellerOffersPanelProps, SellerOfferAction } from "./SellerOffersPanel";
 export { SellerCouponsView } from "./SellerCouponsView";
 export type { SellerCouponsViewProps } from "./SellerCouponsView";
 export { SellerCouponEditorView } from "./SellerCouponEditorView";

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

@@ -6,7 +6,6 @@ export { SellerPrizeDrawsView } from "./SellerPrizeDrawsView";
 export { PrintCenterView } from "./PrintCenterView";
 export { SellerOrdersView, SellerOrderDetailPanel } from "./SellerOrdersView";
 export { SellerOffersView } from "./SellerOffersView";
-export { SellerOffersPanel } from "./SellerOffersPanel";
 export { SellerCouponsView } from "./SellerCouponsView";
 export { SellerCouponEditorView } from "./SellerCouponEditorView";
 export { SellerBidsView } from "./SellerBidsView";