@mohasinac/appkit 4.71.0 → 4.72.0

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

@@ -1,6 +1,9 @@
 import React from "react";
+import type { DashboardCard } from "../../../_internal/shared/features/dashboard/recent-entry";
 export interface SellerOrdersViewProps {
     orderDetailApiBase?: string;
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
 }
 /**
  * Fetches + renders one order's full detail content (items, address,
@@ -15,4 +18,4 @@ export declare function SellerOrderDetailPanel({ orderId, apiBase, onClose, }: {
     apiBase: string;
     onClose: () => void;
 }): React.JSX.Element;
-export declare function SellerOrdersView({ orderDetailApiBase, }: SellerOrdersViewProps): React.JSX.Element;
+export declare function SellerOrdersView({ orderDetailApiBase, pageRegionCards, }: SellerOrdersViewProps): React.JSX.Element;

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

@@ -17,10 +17,11 @@ import { useActionDispatch } from "../../../react/hooks/use-action-dispatch.js";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints.js";
 import { Badge } from "../../../ui/components/Badge.js";
 import { Button } from "../../../ui/components/Button.js";
+import { Card } from "../../../ui/components/Card.js";
 import { Div } from "../../../ui/components/Div.js";
 import { FilterChipGroup } from "../../../ui/components/FilterChipGroup.js";
 import { SideDrawer } from "../../../ui/components/SideDrawer.js";
-import { Span, Text } from "../../../ui/components/Typography.js";
+import { Heading, Span, Text } from "../../../ui/components/Typography.js";
 import { Stack } from "../../../ui/components/Layout.js";
 import { useToast } from "../../../ui/components/toast-context.js";
 import { SELLER_ORDER_STATUS_TABS } from "../../admin/constants/filter-tabs.js";
@@ -42,17 +43,11 @@ import { toRecordArray, toCurrency, toStringValue } from "../hooks/useSellerList
 // Defining module (Root Cause #18) — the seller-side duplicate was deleted for drift.
 import { toRelativeDate } from "../../admin/hooks/useAdminListingData.js";
 import { DataListingView } from "../../admin/components/DataListingView.js";
-import { MediaImage } from "../../media/MediaImage.js";
+import { MediaImage } from "../../../ui/components/MediaImage.js";
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
 const __O = {
     yAuto: "overflow-y-auto",
 };
-/*
- * The hairline that separates each panel section inside the order drawer.
- * Named because the drawer gained its fourth section with D55's balance
- * collector, and four copies of one border declaration is four places a
- * future token rename has to find.
- */
-const SECTION_DIVIDER = "border-t border-[var(--appkit-color-border)]";
 const DEFAULT_SORT = "-createdAt";
 const SORT_OPTIONS = [
     { value: sortBy("createdAt", "DESC"), label: "Newest" },
@@ -378,46 +373,48 @@ export function SellerOrderDetailPanel({ orderId, apiBase, onClose, }) {
     const addrLine = typeof rawAddr === "string" && rawAddr.trim()
         ? rawAddr.trim()
         : [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 && (_jsx(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-muted)]", children: toRelativeDate(order.createdAt) })] }), _jsx(OrderProvenanceCard, { sourceContext: order.sourceContext, currency: order.currency }), (order.items ?? []).length > 0 && (_jsxs(Div, { children: [_jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text)] 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: groupOrderItemsByLine(order.items ?? []).map((group, gi) => group.kind === "single" ? (sellerOrderItemRow(group.item, `s-${group.index}`)) : (_jsxs(Div, { children: [_jsxs(Row, { paddingY: "y-xs", padding: "x-sm", align: "center", gap: "sm", surface: "muted", children: [_jsx(Text, { size: "xs", weight: "semibold", children: group.groupTitle ?? "Grouped purchase" }), _jsx(Text, { size: "xs", className: "text-[var(--appkit-color-text-muted)]", children: `${group.memberCount} ${group.memberCount === 1 ? "item" : "items"} · one line` })] }), _jsx(Div, { paddingX: "l-md", children: group.items.map(({ item, index }) => sellerOrderItemRow(item, `m-${index}`)) })] }, `g-${gi}`))) })] })), _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-muted)]", 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 ?? order.totalPrice ?? 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-muted)]", 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-muted)]", 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: SECTION_DIVIDER, 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)}`
-                                                                : "" })] }), _jsxs(Row, { align: "center", gap: "sm", className: "shrink-0", children: [_jsx(Badge, { variant: EMI_INSTALLMENT_BADGE_VARIANT[inst.status] ?? "default", children: inst.status }), inst.status !== "paid" && (_jsx(Button, { action: ACTIONS.STORE["mark-installment-paid"], size: "sm", variant: "outline", isLoading: markingPaidIndex === inst.index, disabled: markingPaidIndex !== null, onClick: () => handleMarkInstallmentPaid(inst.index), children: "Mark paid" }))] })] }, inst.index))) }), emiError && (_jsx(Div, { textSize: "xs", className: "mt-2 border border-error/20", color: "error", surface: "danger-surface", padding: "inlineSm", rounded: "lg", children: emiError }))] })), order.sourceContext?.path === "pre-order" &&
-                            order.sourceContext.balanceDue > 0 && (_jsx(Stack, { className: SECTION_DIVIDER, padding: "t-md", gap: "3", children: _jsx(SellerBalanceBlock, { orderId: orderId, apiBase: apiBase, balance: order.balance, balanceDue: order.sourceContext.balanceDue, currency: order.currency, onOpened: () => {
-                                    showToast("Balance opened — the buyer has been notified", "success");
-                                    void fetch(`${apiBase}/${orderId}`)
-                                        .then((r) => r.json())
-                                        .then((json) => setOrder((json?.data ?? json)))
-                                        .catch((err) => void normalizeError(err));
-                                } }) })), _jsx(Stack, { className: SECTION_DIVIDER, padding: "t-md", gap: "3", children: _jsx(DispatchForm, { orderId: orderId, trackingNumber: order.trackingNumber, platformBooked: order.platformBookedShipment, onDispatched: () => {
-                                    showToast("Dispatch recorded", "success");
-                                    /*
-                                     * Re-read rather than patching local state: the platform
-                                     * branch's tracking id is produced by the CARRIER, so there
-                                     * is no value here to optimistically write. On that branch
-                                     * the job is still running, so this first re-read correctly
-                                     * shows no tracking number yet.
-                                     */
-                                    void fetch(`${apiBase}/${orderId}`)
-                                        .then((r) => r.json())
-                                        .then((json) => setOrder((json?.data ?? json)))
-                                        .catch((err) => void normalizeError(err));
-                                } }) }), _jsxs(Stack, { className: SECTION_DIVIDER, padding: "t-md", gap: "3", children: [_jsxs(FormShellContext.Provider, { value: form.shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: draft, onChange: (partial) => setDraft((d) => ({ ...d, ...partial })), onSubmit: () => {
-                                                // SectionForm scrolls to the first erroring section and then
-                                                // submits regardless, so the guard lives here.
-                                                form.clearErrors();
-                                                const parsed = sellerOrderUpdateSchema.safeParse(visibleValues(sellerOrderUpdateSchema, draft));
-                                                if (!parsed.success) {
-                                                    applyZodIssues(parsed.error.issues, form.setFieldError);
-                                                    return;
-                                                }
-                                                void handleSave();
-                                            }, onValidationChange: () => form.validate(draft), schema: sellerOrderUpdateSchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, submitLabel: "Save", cancelLabel: "Close", onCancel: onClose, isLoading: saving })] }), saveError && (_jsx(Div, { textSize: "xs", className: "border border-error/20", color: "error", surface: "danger-surface", padding: "inlineSm", rounded: "lg", children: saveError }))] })] }) }))] }));
+    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 && (_jsx(Stack, { gap: "none", children: _jsxs(Stack, { className: `flex-1 ${__O.yAuto}`, gap: "lg", 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-muted)]", children: toRelativeDate(order.createdAt) })] }), _jsx(OrderProvenanceCard, { sourceContext: order.sourceContext, currency: order.currency }), _jsx(Card, { variant: "outlined", padding: "md", children: _jsxs(Stack, { gap: "sm", children: [_jsx(Heading, { level: 3, size: "sm", children: "Items & total" }), (order.items ?? []).length > 0 && (_jsx(Div, { className: "divide-y divide-[var(--appkit-color-border)] border border-[var(--appkit-color-border)]", rounded: "lg", children: groupOrderItemsByLine(order.items ?? []).map((group, gi) => group.kind === "single" ? (sellerOrderItemRow(group.item, `s-${group.index}`)) : (_jsxs(Div, { children: [_jsxs(Row, { paddingY: "y-xs", padding: "x-sm", align: "center", gap: "sm", surface: "muted", children: [_jsx(Text, { size: "xs", weight: "semibold", children: group.groupTitle ?? "Grouped purchase" }), _jsx(Text, { size: "xs", className: "text-[var(--appkit-color-text-muted)]", children: `${group.memberCount} ${group.memberCount === 1 ? "item" : "items"} · one line` })] }), _jsx(Div, { paddingX: "l-md", children: group.items.map(({ item, index }) => sellerOrderItemRow(item, `m-${index}`)) })] }, `g-${gi}`))) })), _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-muted)]", 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 ?? order.totalPrice ?? 0) })] })] }) }), addrLine && (_jsx(Card, { variant: "outlined", padding: "md", children: _jsxs(Stack, { gap: "sm", children: [_jsx(Heading, { level: 3, size: "sm", children: "Shipping & delivery" }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-muted)]", children: [String(addr.fullName ?? ""), addrLine].filter(Boolean).join(" · ") })] }) })), (order.paymentMethod ||
+                            order.emiEnabled ||
+                            (order.sourceContext?.path === "pre-order" && order.sourceContext.balanceDue > 0)) && (_jsx(Card, { variant: "outlined", padding: "md", children: _jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, size: "sm", children: "Payment" }), order.paymentMethod && (_jsxs(Div, { children: [_jsxs(Row, { align: "center", justify: "between", className: "mb-1", gap: "3", children: [_jsx(Text, { size: "sm", weight: "semibold", children: "Method" }), isManualPaymentMethod(order.paymentMethod) && (_jsx(Badge, { variant: sellerPaymentBadge(order).variant, children: sellerPaymentBadge(order).label }))] }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-muted)]", 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, { 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)}`
+                                                                            : "" })] }), _jsxs(Row, { align: "center", gap: "sm", className: "shrink-0", children: [_jsx(Badge, { variant: EMI_INSTALLMENT_BADGE_VARIANT[inst.status] ?? "default", children: inst.status }), inst.status !== "paid" && (_jsx(Button, { action: ACTIONS.STORE["mark-installment-paid"], size: "sm", variant: "outline", isLoading: markingPaidIndex === inst.index, disabled: markingPaidIndex !== null, onClick: () => handleMarkInstallmentPaid(inst.index), children: "Mark paid" }))] })] }, inst.index))) }), emiError && (_jsx(Div, { textSize: "xs", className: "mt-2 border border-error/20", color: "error", surface: "danger-surface", padding: "inlineSm", rounded: "lg", children: emiError }))] })), order.sourceContext?.path === "pre-order" &&
+                                        order.sourceContext.balanceDue > 0 && (_jsx(SellerBalanceBlock, { orderId: orderId, apiBase: apiBase, balance: order.balance, balanceDue: order.sourceContext.balanceDue, currency: order.currency, onOpened: () => {
+                                            showToast("Balance opened — the buyer has been notified", "success");
+                                            void fetch(`${apiBase}/${orderId}`)
+                                                .then((r) => r.json())
+                                                .then((json) => setOrder((json?.data ?? json)))
+                                                .catch((err) => void normalizeError(err));
+                                        } }))] }) })), _jsx(Card, { variant: "outlined", padding: "md", children: _jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, size: "sm", children: "Fulfilment actions" }), _jsx(DispatchForm, { orderId: orderId, trackingNumber: order.trackingNumber, platformBooked: order.platformBookedShipment, onDispatched: () => {
+                                            showToast("Dispatch recorded", "success");
+                                            /*
+                                             * Re-read rather than patching local state: the platform
+                                             * branch's tracking id is produced by the CARRIER, so there
+                                             * is no value here to optimistically write. On that branch
+                                             * the job is still running, so this first re-read correctly
+                                             * shows no tracking number yet.
+                                             */
+                                            void fetch(`${apiBase}/${orderId}`)
+                                                .then((r) => r.json())
+                                                .then((json) => setOrder((json?.data ?? json)))
+                                                .catch((err) => void normalizeError(err));
+                                        } }), _jsxs(Stack, { gap: "3", children: [_jsxs(FormShellContext.Provider, { value: form.shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: draft, onChange: (partial) => setDraft((d) => ({ ...d, ...partial })), onSubmit: () => {
+                                                            // SectionForm scrolls to the first erroring section and then
+                                                            // submits regardless, so the guard lives here.
+                                                            form.clearErrors();
+                                                            const parsed = sellerOrderUpdateSchema.safeParse(visibleValues(sellerOrderUpdateSchema, draft));
+                                                            if (!parsed.success) {
+                                                                applyZodIssues(parsed.error.issues, form.setFieldError);
+                                                                return;
+                                                            }
+                                                            void handleSave();
+                                                        }, onValidationChange: () => form.validate(draft), schema: sellerOrderUpdateSchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, submitLabel: "Save", cancelLabel: "Close", onCancel: onClose, isLoading: saving })] }), saveError && (_jsx(Div, { textSize: "xs", className: "border border-error/20", color: "error", surface: "danger-surface", padding: "inlineSm", rounded: "lg", children: saveError }))] })] }) })] }) }))] }));
 }
 function OrderDetailDrawer({ orderId, apiBase, onClose, }) {
     return (_jsx(SideDrawer, { isOpen: true, title: `Order ${orderId}`, onClose: onClose, children: _jsx(SellerOrderDetailPanel, { orderId: orderId, apiBase: apiBase, onClose: onClose }) }));
 }
-export function SellerOrdersView({ orderDetailApiBase = SELLER_ENDPOINTS.ORDERS, }) {
+export function SellerOrdersView({ orderDetailApiBase = SELLER_ENDPOINTS.ORDERS, pageRegionCards = [], }) {
     const [selectedOrderId, setSelectedOrderId] = useState(null);
     const [setLocationOpen, setSetLocationOpen] = useState(false);
     const [shippingRowId, setShippingRowId] = useState(null);
@@ -640,7 +637,7 @@ export function SellerOrdersView({ orderDetailApiBase = SELLER_ENDPOINTS.ORDERS,
         // while sitting on Active should show delivered orders, not nothing.
         /*
          * Two independent axes, joined. The lane answers "how was this won", the
-         * status answers "where is it now" — a seller asking "which of my auction
+         * status answers "where is it now" — a seller asking "which of my collector drop
          * wins are still unshipped" should not have to choose between them.
          *
          * 🛑 `orderType` is a registered SELLER_SIEVE_FIELD as of this change. It
@@ -690,5 +687,5 @@ export function SellerOrdersView({ orderDetailApiBase = SELLER_ENDPOINTS.ORDERS,
                         }, title: "Open full page", "aria-label": "Open full page", children: _jsx(ExternalLink, { className: "h-4 w-4" }) })] }));
         },
     };
-    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), selectedOrderId && (_jsx(OrderDetailDrawer, { orderId: selectedOrderId, apiBase: orderDetailApiBase, onClose: () => setSelectedOrderId(null) })), setLocationOpen && (_jsx(PhysicalLocationModal, { count: selectedIdsForLocation.length, onSave: (loc) => handleSetLocation(loc, selectedIdsForLocation), onClose: () => setSetLocationOpen(false) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(AdminComposableRegion, { pageId: "store-orders", initialCards: pageRegionCards }), _jsx(DataListingView, { config: config }), selectedOrderId && (_jsx(OrderDetailDrawer, { orderId: selectedOrderId, apiBase: orderDetailApiBase, onClose: () => setSelectedOrderId(null) })), setLocationOpen && (_jsx(PhysicalLocationModal, { count: selectedIdsForLocation.length, onSave: (loc) => handleSetLocation(loc, selectedIdsForLocation), onClose: () => setSetLocationOpen(false) }))] }));
 }

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

@@ -1,7 +1,10 @@
+import type { DashboardCard } from "../../../_internal/shared/features/dashboard/recent-entry";
 export interface SellerPayoutRequestViewProps {
     payoutsApiBase?: string;
     payoutSettingsApiBase?: string;
     requestApiBase?: string;
     onRequested?: () => void;
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
 }
-export declare function SellerPayoutRequestView({ payoutsApiBase, payoutSettingsApiBase, requestApiBase, onRequested, }: SellerPayoutRequestViewProps): import("react").JSX.Element | null;
+export declare function SellerPayoutRequestView({ payoutsApiBase, payoutSettingsApiBase, requestApiBase, onRequested, pageRegionCards, }: SellerPayoutRequestViewProps): import("react").JSX.Element | null;

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

@@ -12,6 +12,7 @@ import { Text } from "../../../ui/components/Typography.js";
 import { Textarea } from "../../../ui/components/Textarea.js";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints.js";
 import { formatCurrency } from "../../../utils/number.formatter.js";
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
     p4: "p-[var(--appkit-space-4)]",
@@ -29,7 +30,7 @@ const __P = {
  * for INR) in both directions, and takes the symbol from the locale rather
  * than hardcoding one.
  */
-export function SellerPayoutRequestView({ payoutsApiBase = SELLER_ENDPOINTS.PAYOUTS, payoutSettingsApiBase = SELLER_ENDPOINTS.PAYOUT_SETTINGS, requestApiBase = SELLER_ENDPOINTS.PAYOUT_REQUEST, onRequested, }) {
+export function SellerPayoutRequestView({ payoutsApiBase = SELLER_ENDPOINTS.PAYOUTS, payoutSettingsApiBase = SELLER_ENDPOINTS.PAYOUT_SETTINGS, requestApiBase = SELLER_ENDPOINTS.PAYOUT_REQUEST, onRequested, pageRegionCards = [], }) {
     const [summary, setSummary] = useState(null);
     const [payoutDetails, setPayoutDetails] = useState(null);
     const [loading, setLoading] = useState(true);
@@ -82,7 +83,7 @@ export function SellerPayoutRequestView({ payoutsApiBase = SELLER_ENDPOINTS.PAYO
     if (!summary)
         return null;
     const canRequest = !summary.hasPendingPayout && summary.availableEarnings > 0 && payoutDetails?.isConfigured;
-    return (_jsxs(_Fragment, { children: [_jsx(Div, { className: `${__P.p4} border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]`, rounded: "lg", children: _jsxs(Row, { align: "center", justify: "between", gap: "3", wrap: true, children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Available for Payout" }), _jsx(Text, { className: "text-[var(--appkit-color-primary)]", size: "2xl", weight: "bold", children: formatCurrency(summary.availableEarnings) }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)] mt-0.5", size: "xs", children: [summary.eligibleOrderCount, " eligible order", summary.eligibleOrderCount !== 1 ? "s" : ""] })] }), _jsxs(Row, { align: "center", gap: "sm", wrap: true, children: [summary.hasPendingPayout && _jsx(Badge, { variant: "warning", children: "Payout in progress" }), submitted && _jsx(Badge, { variant: "success", children: "Payout requested!" }), !payoutDetails?.isConfigured && (_jsx(Text, { className: "text-[var(--appkit-color-warning)]", size: "sm", children: "Set up payout details first" })), _jsx(Button, { variant: "primary", onClick: () => setModalOpen(true), disabled: !canRequest, children: "Request Payout" })] })] }) }), _jsx(Modal, { isOpen: modalOpen, onClose: () => { setModalOpen(false); setSubmitError(null); }, title: "Request Payout", children: _jsxs(Stack, { gap: "md", className: `${__P.p4}`, children: [_jsxs(Div, { className: `${__P.p3} bg-[var(--appkit-color-bg)]`, rounded: "default", children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Amount to be paid" }), _jsx(Text, { size: "xl", weight: "bold", children: formatCurrency(summary?.availableEarnings ?? 0) }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: ["Via ", payoutDetails?.method === "upi"
+    return (_jsxs(_Fragment, { children: [_jsx(AdminComposableRegion, { pageId: "store-payouts", initialCards: pageRegionCards }), _jsx(Div, { className: `${__P.p4} border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]`, rounded: "lg", children: _jsxs(Row, { align: "center", justify: "between", gap: "3", wrap: true, children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Available for Payout" }), _jsx(Text, { className: "text-[var(--appkit-color-primary)]", size: "2xl", weight: "bold", children: formatCurrency(summary.availableEarnings) }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)] mt-0.5", size: "xs", children: [summary.eligibleOrderCount, " eligible order", summary.eligibleOrderCount !== 1 ? "s" : ""] })] }), _jsxs(Row, { align: "center", gap: "sm", wrap: true, children: [summary.hasPendingPayout && _jsx(Badge, { variant: "warning", children: "Payout in progress" }), submitted && _jsx(Badge, { variant: "success", children: "Payout requested!" }), !payoutDetails?.isConfigured && (_jsx(Text, { className: "text-[var(--appkit-color-warning)]", size: "sm", children: "Set up payout details first" })), _jsx(Button, { variant: "primary", onClick: () => setModalOpen(true), disabled: !canRequest, children: "Request Payout" })] })] }) }), _jsx(Modal, { isOpen: modalOpen, onClose: () => { setModalOpen(false); setSubmitError(null); }, title: "Request Payout", children: _jsxs(Stack, { gap: "md", className: `${__P.p4}`, children: [_jsxs(Div, { className: `${__P.p3} bg-[var(--appkit-color-bg)]`, rounded: "default", children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Amount to be paid" }), _jsx(Text, { size: "xl", weight: "bold", children: formatCurrency(summary?.availableEarnings ?? 0) }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: ["Via ", payoutDetails?.method === "upi"
                                             ? `UPI — ${payoutDetails.upiId}`
                                             : `Bank — ${payoutDetails?.bankAccount?.bankName ?? ""} ••••${payoutDetails?.bankAccount?.accountNumberMasked?.slice(-4) ?? "••••"}`] })] }), submitError && _jsx(Alert, { variant: "error", children: submitError }), _jsx(Div, { children: _jsx(Textarea, { label: "Notes (optional)", rows: 3, value: notes, onChange: (e) => setNotes(e.target.value), maxLength: 500, placeholder: "Any notes for the payout request\u2026" }) }), _jsxs(Row, { justify: "end", gap: "sm", children: [_jsx(Button, { variant: "outline", onClick: () => setModalOpen(false), disabled: submitting, children: "Cancel" }), _jsx(Button, { variant: "primary", onClick: handleRequest, disabled: submitting, isLoading: submitting, children: "Confirm Request" })] })] }) })] }));
 }

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

@@ -11,6 +11,12 @@ import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints.js";
 import { normalizeError } from "../../../errors/normalize.js";
 import { toUserMessage } from "../../../errors/error-display-map.js";
 import { getBrandName } from "../../../core/brand-resolver.js";
+/*
+ * The ONE PAN shape check, shared with the route that persists it — two regexes
+ * for one format is how they come to disagree (Root Cause #75). Pure, no node
+ * imports, so it is safe in a `"use client"` module.
+ */
+import { isValidPan } from "../../../_internal/shared/features/payouts/destination.js";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
 };
@@ -53,13 +59,20 @@ const payoutSettingsDraftSchema = z.object({
     // invoices. A seller with a GSTIN invoices under it; one without
     // invoices under {getBrandName()}'s (resolveSupplierIdentity).
     //
-    // `pan` and `businessType` were removed 2026-10-19: neither exists on
-    // StoreDocument or UserDocument and the route stripped them, so a
-    // seller who entered a PAN was told it saved and it went nowhere.
-    // An input that provably cannot persist is worse than no input.
+    // `businessType` is still absent: it has no field on StoreDocument and the
+    // route would strip it, so an input for it would tell the seller we hold
+    // something we do not. An input that provably cannot persist is worse than
+    // no input.
+    //
+    // 🛑 `pan` is BACK (Phase 3) because that bar is now met: `StoreDocument.pan`
+    // exists, is encrypted at rest by `STORE_PII_FIELDS`, the route declares it
+    // in BOTH arms of its discriminated union, and the split-settlement vendor
+    // registration reads it. Writer and reader, which is exactly what the
+    // 2026-10-19 removal asked for before it came back.
     gstin: annotate(z.string(), { section: "tax", sectionLabel: "Tax Info", order: 1, row: "pair" }),
-    legalName: annotate(z.string(), { section: "tax", order: 2, row: "pair" }),
-    registeredAddress: annotate(z.string(), { section: "tax", order: 3, row: "full" }),
+    pan: annotate(z.string(), { section: "tax", order: 2, row: "pair" }),
+    legalName: annotate(z.string(), { section: "tax", order: 3, row: "pair" }),
+    registeredAddress: annotate(z.string(), { section: "tax", order: 4, row: "full" }),
     autoPayout: annotate(z.boolean(), {
         section: "preferences", sectionLabel: "Preferences", order: 1, row: "quarter",
     }),
@@ -94,7 +107,7 @@ const payoutSettingsDraftSchema = z.object({
     /*
      * Advanced listing types — pre-orders, prize draws, classifieds, digital
      * codes, live items, art and stickers. Everyone can already list
-     * `standard`, `spares` and `auction`.
+     * `standard`, `spares` and `collector drop`.
      *
      * 🛑 Alongside payout settings for the same reason the protections are:
      * each of these carries an obligation, not just a form. A pre-order takes
@@ -128,7 +141,42 @@ const payoutSettingsDraftSchema = z.object({
             ctx.addIssue({ code: z.ZodIssueCode.custom, path: ["bankName"], message: "Bank name is required" });
         }
     }
+    /*
+     * 🛑 The PAN is OPTIONAL and only its SHAPE is checked. Which seller entity
+     * types actually require one is the payment aggregator's rule, not ours, so
+     * refusing a blank here would decide on its behalf that a seller cannot sell
+     * (blocker #5). A malformed one is refused, because the gateway would refuse
+     * it too, for a reason the seller could not read.
+     *
+     * Shape only, deliberately: unlike a GSTIN, a PAN carries no check character
+     * that can be recomputed, so `isValidPan` cannot mean more than this and must
+     * never be read as if it did.
+     */
+    if (v.pan.trim() && !isValidPan(v.pan)) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            path: ["pan"],
+            message: "Invalid PAN — expected five letters, four digits, then one letter.",
+        });
+    }
 });
+/**
+ * 🛑 A complete `Record`, not a partial map with a fallback.
+ *
+ * A missing key would render `undefined` for a status the seller is in, which
+ * is the one outcome worse than either answer: it tells them nothing and reads
+ * as a broken page. `tsc` refuses a fifth status without an entry here.
+ *
+ * 🛑 `unverified` is deliberately NEUTRAL, not a warning. It is the normal
+ * state for a seller who has just filled the form in — a provider has not been
+ * asked yet — and shouting about it would make the common case look broken.
+ */
+const VERIFICATION_BADGE = {
+    unverified: { label: "Not yet checked", variant: "default" },
+    pending: { label: "Provider is checking", variant: "warning" },
+    verified: { label: "Verified by provider", variant: "success" },
+    failed: { label: "Provider rejected these details", variant: "danger" },
+};
 const DEFAULT_DRAFT = {
     method: "upi",
     upiId: "",
@@ -138,6 +186,10 @@ const DEFAULT_DRAFT = {
     bankName: "",
     accountType: "savings",
     gstin: "",
+    // Blank on load even when one is stored: the route returns `panOnFile`, a
+    // boolean, never the PAN itself. Same treatment as `accountNumber` above —
+    // leave it blank to keep what is saved, type one to replace it.
+    pan: "",
     legalName: "",
     registeredAddress: "",
     autoPayout: true,
@@ -173,6 +225,18 @@ function RadioFieldGroup({ name, value, options, error, disabled, onSelect, rend
 export function SellerPayoutSettingsView({ apiBase = SELLER_ENDPOINTS.PAYOUT_SETTINGS }) {
     const [draft, setDraft] = useState(DEFAULT_DRAFT);
     const [current, setCurrent] = useState(null);
+    /*
+     * 🛑 TWO separate pieces of state, because they answer two questions the old
+     * single badge conflated: `panOnFile` is "do we hold one" (the value itself
+     * is never sent to the browser), and `verification` is "has a payment
+     * provider accepted the destination". Neither can be derived from
+     * `isConfigured`, which only means "well-formed".
+     */
+    const [panOnFile, setPanOnFile] = useState(false);
+    const [verification, setVerification] = useState({
+        status: "unverified",
+        message: "",
+    });
     const [loading, setLoading] = useState(true);
     const [saving, setSaving] = useState(false);
     const [error, setError] = useState(null);
@@ -183,6 +247,14 @@ export function SellerPayoutSettingsView({ apiBase = SELLER_ENDPOINTS.PAYOUT_SET
             .then((res) => {
             const details = res?.data?.payoutDetails ?? { method: "upi", isConfigured: false };
             setCurrent(details);
+            setPanOnFile(res?.data?.panOnFile === true);
+            setVerification({
+                // Absent means `unverified` — a destination nobody has checked IS
+                // unverified, and reading absence as anything better is the defect
+                // `isConfigured: true` used to be.
+                status: res?.data?.payoutVerification?.status ?? "unverified",
+                message: res?.data?.payoutVerification?.message ?? "",
+            });
             setDraft({
                 method: details.method,
                 upiId: details.upiId ?? "",
@@ -205,6 +277,9 @@ export function SellerPayoutSettingsView({ apiBase = SELLER_ENDPOINTS.PAYOUT_SET
                  * is the supplier of record on that store's invoices.
                  */
                 gstin: res?.data?.gstin ?? "",
+                // Never loaded from the response — the route sends `panOnFile`, a
+                // boolean, and never the value. See DEFAULT_DRAFT.
+                pan: "",
                 legalName: res?.data?.legalName ?? "",
                 registeredAddress: res?.data?.registeredAddress ?? "",
                 autoPayout: res?.data?.preferences?.autoPayout ?? true,
@@ -253,6 +328,21 @@ export function SellerPayoutSettingsView({ apiBase = SELLER_ENDPOINTS.PAYOUT_SET
                 // Flat, matching the route's schema. A nested `taxInfo` object was
                 // stripped by `z.object()` and never reached Firestore.
                 gstin: draft.gstin.trim(),
+                /*
+                 * 🛑 Sent ONLY when the seller typed something, and that is not an
+                 * optimisation. The field loads blank by design (the route returns a
+                 * boolean, never the PAN), so sending `""` on every save would CLEAR a
+                 * stored PAN every time a seller changed an unrelated toggle.
+                 *
+                 * 🛑 KNOWN CONSEQUENCE, stated rather than hidden: a seller therefore
+                 * cannot CLEAR a PAN from this form — only replace it. That is the
+                 * identical trade-off the `accountNumber` field above already makes
+                 * ("leave blank to keep the existing saved number"), and the route does
+                 * accept an empty string as a deliberate clear, so the capability
+                 * exists and simply has no control yet. A "remove" control is the fix;
+                 * sending `""` on every save is not.
+                 */
+                ...(draft.pan.trim() ? { pan: draft.pan.trim().toUpperCase() } : {}),
                 legalName: draft.legalName.trim(),
                 registeredAddress: draft.registeredAddress.trim(),
                 preferences: {
@@ -292,7 +382,20 @@ export function SellerPayoutSettingsView({ apiBase = SELLER_ENDPOINTS.PAYOUT_SET
             setSuccess(true);
             const updated = json?.data?.payoutDetails ?? { method: draft.method, isConfigured: false };
             setCurrent(updated);
-            setDraft((prev) => ({ ...prev, accountNumber: "" }));
+            /*
+             * 🛑 Read back from the RESPONSE, not inferred from the draft. The write
+             * RESETS the verification (the destination just changed), and a form that
+             * kept showing the old "Verified by provider" badge would be asserting
+             * that a provider has accepted an account it has never seen.
+             */
+            setPanOnFile(json?.data?.panOnFile === true);
+            setVerification({
+                status: json?.data?.payoutVerification?.status ?? "unverified",
+                message: json?.data?.payoutVerification?.message ?? "",
+            });
+            // Both secrets cleared from the draft after a successful save — neither is
+            // ever sent back to the browser, so keeping them would be the only copy.
+            setDraft((prev) => ({ ...prev, accountNumber: "", pan: "" }));
         }
         catch (err) {
             /*
@@ -324,7 +427,7 @@ export function SellerPayoutSettingsView({ apiBase = SELLER_ENDPOINTS.PAYOUT_SET
             required: true,
             quick: true,
             fields: ["method", "upiId", "accountHolderName", "accountNumber", "ifscCode", "bankName", "accountType"],
-            render: ({ values, onChange, errors }) => (_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"
+            render: ({ values, onChange, errors }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Payout Method" }), current && (_jsxs(Row, { className: "mb-2", align: "center", gap: "sm", children: [_jsx(Badge, { variant: current.isConfigured ? "success" : "warning", children: current.isConfigured ? "Details complete" : "Details incomplete" }), _jsx(Badge, { variant: VERIFICATION_BADGE[verification.status].variant, children: VERIFICATION_BADGE[verification.status].label })] })), verification.status === "failed" && verification.message && (_jsx(Alert, { variant: "error", children: verification.message })), verification.status === "pending" && (_jsx(Alert, { variant: "info", children: "Your payment provider is still checking these details. Payouts to you are held until it finishes." })), current?.isConfigured && (_jsx(Alert, { variant: "info", children: current.method === "upi"
                             ? `Current UPI: ${current.upiId}`
                             : `Current bank: ${current.bankAccount?.bankName ?? ""} — ••••${current.bankAccount?.accountNumberMasked?.slice(-4) ?? "••••"} (${current.bankAccount?.accountType})` })), _jsxs(Stack, { gap: "sm", children: [([
                                 { value: "upi", label: "UPI", desc: "Instant payouts via UPI VPA (e.g. name@upi)." },
@@ -334,16 +437,25 @@ export function SellerPayoutSettingsView({ apiBase = SELLER_ENDPOINTS.PAYOUT_SET
         {
             id: "tax",
             label: "Tax Info",
-            fields: ["gstin", "legalName", "registeredAddress"],
-            render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Tax Information" }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: ["Optional. Enter a GSTIN and your orders are invoiced under your own registration; leave it blank and they are invoiced under ", getBrandName(), "'s."] }), _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: "legalName", label: "Registered legal name (optional)", type: "text", value: values.legalName, onChange: (v) => onChange({ legalName: v }), placeholder: "e.g. Arena Collectibles Pvt Ltd", helpText: "The entity name that appears on the invoice. Leave blank to use your store name.", disabled: busy }), _jsx(FormField, { name: "registeredAddress", label: "Registered address (optional)", type: "text", value: values.registeredAddress, onChange: (v) => onChange({ registeredAddress: v }), placeholder: "Address as registered against your GSTIN", helpText: "Printed on invoices issued under your GSTIN.", disabled: busy })] })),
+            fields: ["gstin", "pan", "legalName", "registeredAddress"],
+            render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Tax Information" }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: ["Optional. Enter a GSTIN and your orders are invoiced under your own registration; leave it blank and they are invoiced under ", getBrandName(), "'s."] }), _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: "legalName", label: "Registered legal name (optional)", type: "text", value: values.legalName, onChange: (v) => onChange({ legalName: v }), placeholder: "e.g. Arena Collectibles Pvt Ltd", helpText: "The entity name that appears on the invoice. Leave blank to use your store name.", disabled: busy }), _jsx(FormField, { name: "registeredAddress", label: "Registered address (optional)", type: "text", value: values.registeredAddress, onChange: (v) => onChange({ registeredAddress: v }), placeholder: "Address as registered against your GSTIN", helpText: "Printed on invoices issued under your GSTIN.", 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: panOnFile
+                            ? "A PAN is on file. Leave this blank to keep it, or type a new one to replace it."
+                            : "Needed before a payment provider can pay you directly. Stored encrypted and never displayed again.", disabled: busy }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Most payment providers require a PAN before they will settle money to a seller directly. We store it encrypted, send it only to the provider that pays you, and never show it again \u2014 including to you." })] })),
         },
         {
             id: "preferences",
             label: "Preferences",
             fields: ["autoPayout", "minimumThreshold", "emiEnabled", "pricesIncludeGst", "supportsShippingProtection", "supportsSaleProtection", "advancedListingTypesEnabled"],
-            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-bg)] 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\"." }), _jsx(Toggle, { checked: values.pricesIncludeGst, onChange: (checked) => onChange({ pricesIncludeGst: checked }), label: "The prices I enter already include GST", disabled: busy }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: ["Buyers always see a tax-inclusive price, so this only changes how your own entry is read. Leave it", " ", _jsx(Span, { weight: "semibold", children: "on" }), " and a \u20B9999 listing at 5% GST means the buyer pays \u20B9999 and you earn \u20B9951.43 \u2014 the \u20B947.57 is GST we collect and remit for you. Turn it", " ", _jsx(Span, { weight: "semibold", children: "off" }), " and \u20B9999 is treated as your ex-GST price: the listing is shown at \u20B91,048.95 and you earn \u20B9999."] }), _jsx(Heading, { level: 3, className: "mb-2 mt-4", children: "Buyer Protections" }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: ["Two separate covers a buyer can pay for at checkout. Supporting one earns a safety badge on your listings;", " ", _jsx(Span, { weight: "semibold", children: "declining shows buyers a risk notice instead" }), " \u2014 there is no neutral option, because a buyer who is told nothing cannot tell a seller who declined from one who was never asked."] }), _jsx(Toggle, { checked: values.supportsShippingProtection, onChange: (checked) => onChange({ supportsShippingProtection: checked }), label: "Offer shipment protection \u2014 loss or damage in transit", disabled: busy }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "The parcel never arrived or arrived damaged. We pursue the courier, not you, and the buyer is refunded from the funds we hold \u2014 so a genuine transit loss costs you the item, not an argument." }), _jsx(Toggle, { checked: values.supportsSaleProtection, onChange: (checked) => onChange({ supportsSaleProtection: checked }), label: "Offer sale protection \u2014 item not as described", disabled: busy }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: ["A no-questions-asked refund on the item itself. Be clear about what this means:", " ", _jsx(Span, { weight: "semibold", children: "a claim we inspect and find genuine is charged back to you" }), " ", "\u2014 that is the cover. A claim we find to be a change of mind is absorbed by us, which is what the buyer's fee pays for. Not offered on your final-sale listings, since \"no returns\" and \"no questions asked\" cannot both be true."] }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Changing this does not re-price listings you have already published. It applies to products you save from now on." }), _jsx(Toggle, { checked: values.advancedListingTypesEnabled, onChange: (checked) => onChange({ advancedListingTypesEnabled: checked }), label: "Enable advanced listing types", disabled: busy }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: ["Adds pre-orders, prize draws, classifieds, digital codes, live items, art and stickers alongside the products, spares and auctions you can already list. Each carries its own obligation:", " ", _jsx(Span, { weight: "semibold", children: "a pre-order takes payment for stock you do not have yet, a prize draw is a regulated promotion, a classified happens off-platform with no escrow protection, a digital code must be delivered from a pool you keep stocked, and a live listing is an animal." }), " ", "Turning this off later does not unpublish listings you have already created \u2014 it only stops you making new ones."] })] })),
+            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-bg)] 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\"." }), _jsx(Toggle, { checked: values.pricesIncludeGst, onChange: (checked) => onChange({ pricesIncludeGst: checked }), label: "The prices I enter already include GST", disabled: busy }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: ["Buyers always see a tax-inclusive price, so this only changes how your own entry is read. Leave it", " ", _jsx(Span, { weight: "semibold", children: "on" }), " and a \u20B9999 listing at 5% GST means the buyer pays \u20B9999 and you earn \u20B9951.43 \u2014 the \u20B947.57 is GST we collect and remit for you. Turn it", " ", _jsx(Span, { weight: "semibold", children: "off" }), " and \u20B9999 is treated as your ex-GST price: the listing is shown at \u20B91,048.95 and you earn \u20B9999."] }), _jsx(Heading, { level: 3, className: "mb-2 mt-4", children: "Buyer Protections" }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: ["Two separate covers a buyer can pay for at checkout. Supporting one earns a safety badge on your listings;", " ", _jsx(Span, { weight: "semibold", children: "declining shows buyers a risk notice instead" }), " \u2014 there is no neutral option, because a buyer who is told nothing cannot tell a seller who declined from one who was never asked."] }), _jsx(Toggle, { checked: values.supportsShippingProtection, onChange: (checked) => onChange({ supportsShippingProtection: checked }), label: "Offer shipment protection \u2014 loss or damage in transit", disabled: busy }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "The parcel never arrived or arrived damaged. We pursue the courier, not you, and the buyer is refunded from the funds we hold \u2014 so a genuine transit loss costs you the item, not an argument." }), _jsx(Toggle, { checked: values.supportsSaleProtection, onChange: (checked) => onChange({ supportsSaleProtection: checked }), label: "Offer sale protection \u2014 item not as described", disabled: busy }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: ["A no-questions-asked refund on the item itself. Be clear about what this means:", " ", _jsx(Span, { weight: "semibold", children: "a claim we inspect and find genuine is charged back to you" }), " ", "\u2014 that is the cover. A claim we find to be a change of mind is absorbed by us, which is what the buyer's fee pays for. Not offered on your final-sale listings, since \"no returns\" and \"no questions asked\" cannot both be true."] }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Changing this does not re-price listings you have already published. It applies to products you save from now on." }), _jsx(Toggle, { checked: values.advancedListingTypesEnabled, onChange: (checked) => onChange({ advancedListingTypesEnabled: checked }), label: "Enable advanced listing types", disabled: busy }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: ["Adds pre-orders, prize draws, classifieds, digital codes, live items, art and stickers alongside the products, spares and collector drops you can already list. Each carries its own obligation:", " ", _jsx(Span, { weight: "semibold", children: "a pre-order takes payment for stock you do not have yet, a prize draw is a regulated promotion, a classified happens off-platform with no escrow protection, a digital code must be delivered from a pool you keep stocked, and a live listing is an animal." }), " ", "Turning this off later does not unpublish listings you have already created \u2014 it only stops you making new ones."] })] })),
         },
-    ], [busy, current]);
+        /*
+         * `panOnFile` and `verification` are read inside the renders above, so they
+         * are dependencies. Omitting them would freeze the PAN help text and both
+         * badges at their first-render values — i.e. the form would keep saying
+         * "Not yet checked" after a save that reset the verification, which is the
+         * stale-render half of Root Cause #38.
+         */
+    ], [busy, current, panOnFile, verification]);
     const { openIds, setOpenIds, goToSection, fieldToSectionIndex, sectionMeta } = useSectionFormNav(sections, draft);
     const { shellCtx, setFieldError, clearErrors, validate } = useFormShellState(payoutSettingsDraftSchema, { sections: sectionMeta, onGoToSection: goToSection, fieldToSectionIndex });
     useEffect(() => {

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

@@ -121,10 +121,10 @@ export interface SellerProductDraft {
     reservePrice?: number;
     buyNowPrice?: number;
     minBidIncrement?: number;
-    auctionEndDate?: string;
-    auctionShippingPaidBy?: "winner" | "seller";
+    collectorDropEndDate?: string;
+    collectorDropShippingPaidBy?: "winner" | "seller";
     autoExtendable?: boolean;
-    auctionExtensionMinutes?: number;
+    collectorDropExtensionMinutes?: number;
     preOrderDeliveryDate?: string;
     preOrderDepositPercent?: number;
     preOrderMaxQuantity?: number;