@mohasinac/appkit 4.61.0 → 4.62.1

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

@@ -37,6 +37,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  */
 import React, { useCallback, useState } from "react";
 import { Badge, ConfirmDeleteModal, RowActionMenu, Span, Text } from "../../../ui/index.js";
+import { apiClient } from "../../../http/index.js";
 import { useEntityDelete } from "../../../react/hooks/useEntityDelete.js";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints.js";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry.js";
@@ -46,6 +47,7 @@ import { PRODUCT_FIELDS } from "../../../constants/field-names.js";
 import { SIEVE_OP, sieveFilter } from "../../../utils/sieve-builder.js";
 import { pluginFor } from "../../../_internal/shared/listing-types/_registry.js";
 import { toCurrency, toRecordArray, toRelativeDate, toStringValue, } from "../../admin/hooks/useAdminListingData.js";
+import { useOptimisticRowFlag } from "../../admin/hooks/useOptimisticRowFlag.js";
 import { DataListingView } from "../../admin/components/DataListingView.js";
 import { ROW_ACTION_META, SELLER_BULK_ACTIONS } from "../../products/constants/action-defs.js";
 import { useAvailabilityScope } from "../../products/hooks/useAvailabilityScope.js";
@@ -204,6 +206,17 @@ export function SellerListingTypeView({ type, onCreateClick, onEditClick, onDele
         await performDelete(id);
         setDeleteTargetId(null);
     }, [performDelete]);
+    /*
+     * Optimistic status, via the shared hook — see its header for why a
+     * rollback must DELETE the override key rather than write back a captured
+     * value, and why the key is cleared on success too.
+     */
+    const statusFlag = useOptimisticRowFlag({
+        mutate: (id, next) => apiClient.patch(SELLER_ENDPOINTS.PRODUCT_BY_ID(id), { status: next }),
+        invalidate: [["seller", plugin.tabSlug]],
+        successMessage: (next) => next === "published" ? "Listing published." : "Listing unpublished.",
+        errorMessage: "Could not change that listing's status.",
+    });
     const handleEdit = useCallback((id) => {
         if (onEditClick)
             onEditClick(id);
@@ -233,7 +246,15 @@ export function SellerListingTypeView({ type, onCreateClick, onEditClick, onDele
         {
             key: "status",
             header: "Status",
-            render: (row) => (_jsx(Badge, { variant: row.status === "active" ? "active" : "inactive", size: "xs", className: "capitalize", children: row.status })),
+            /*
+             * Reads the optimistic override so the badge and the row action agree
+             * the instant one is used — otherwise the menu would say "Unpublish"
+             * while the badge beside it still said published, until the refetch.
+             */
+            render: (row) => {
+                const status = statusFlag.resolve(row.id, row.status);
+                return (_jsx(Badge, { variant: status === "active" || status === "published" ? "active" : "inactive", size: "xs", className: "capitalize", children: status }));
+            },
         },
         textCell("createdAt", spec.createdHeader ?? "Created"),
     ];
@@ -291,15 +312,40 @@ export function SellerListingTypeView({ type, onCreateClick, onEditClick, onDele
                 },
             }))
             : undefined,
-        renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
-                { label: ACTIONS.STORE["edit-listing"].label, onClick: () => handleEdit(row.id) },
-                {
-                    label: ACTIONS.STORE["delete-listing"].label,
-                    destructive: true,
-                    onClick: () => setDeleteTargetId(row.id),
-                    disabled: deletingId === row.id,
-                },
-            ] })),
+        renderRowActions: (row) => {
+            const isPublished = statusFlag.resolve(row.id, row.status) === "published";
+            return (_jsx(RowActionMenu, { actions: [
+                    { label: ACTIONS.STORE["edit-listing"].label, onClick: () => handleEdit(row.id) },
+                    /*
+                     * 🛑 This one entry lights up SIX seller pages — art, classified,
+                     * digital codes, live, spares and stickers are each a ~25-line
+                     * wrapper around this component.
+                     *
+                     * `status` was a read-only Badge on all of them, so changing one
+                     * listing from published to draft meant opening the full editor,
+                     * even though `PATCH /api/store/products/[id]` has always taken
+                     * `status` and SellerProductsView already drives that exact call.
+                     *
+                     * `ACTIONS.STORE["publish-listing"]` / `["unpublish-listing"]`
+                     * were defined with ZERO call sites — this is what finally wires
+                     * them, rather than reinventing the labels inline.
+                     */
+                    {
+                        label: isPublished
+                            ? ACTIONS.STORE["unpublish-listing"].label
+                            : ACTIONS.STORE["publish-listing"].label,
+                        separator: true,
+                        disabled: statusFlag.pendingId === row.id,
+                        onClick: () => { void statusFlag.set(row.id, isPublished ? "draft" : "published"); },
+                    },
+                    {
+                        label: ACTIONS.STORE["delete-listing"].label,
+                        destructive: true,
+                        onClick: () => setDeleteTargetId(row.id),
+                        disabled: deletingId === row.id,
+                    },
+                ] }));
+        },
     };
     return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), deleteTargetId && (_jsx(ConfirmDeleteModal, { isOpen: true, title: `Delete ${spec.deleteLabel}`, message: `Are you sure you want to delete this ${spec.deleteLabel.toLowerCase()}? This cannot be undone.`, onConfirm: () => handleDelete(deleteTargetId), onClose: () => setDeleteTargetId(null), isDeleting: deletingId === deleteTargetId }))] }));
 }

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

@@ -2,7 +2,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { formatPhysicalLocation } from "../../../utils/physical-location.js";
 import { OrderAddonBadges } from "../../orders/components/OrderAddonBadges.js";
+import { OrderProvenanceCard } from "../../orders/components/OrderProvenanceCard.js";
+import { groupOrderItemsByLine } from "../../orders/utils/bundle-grouping.js";
 import { normalizeError } from "../../../errors/normalize.js";
+// The defining module, not a barrel (Root Cause #18). Maps a server error CODE
+// to user-facing copy; it can never return server text, which is the point.
+import { toUserMessage } from "../../../errors/error-display-map.js";
 import { Row, SIEVE_OP, sieveFilter } from "@mohasinac/appkit/client";
 import { sortBy } from "@mohasinac/appkit/client";
 import React, { useState, useCallback } from "react";
@@ -12,6 +17,7 @@ import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints.js";
 import { Badge, Button, Div, FilterChipGroup, SideDrawer, Span, Stack, Text, useToast } from "../../../ui/index.js";
 import { SELLER_ORDER_STATUS_TABS } from "../../admin/constants/filter-tabs.js";
 import { useOrderScope } from "../../orders/components/OrderScopeTabs.js";
+import { ORDER_LANE_TABS } from "../../orders/constants/order-lane-tabs.js";
 import { OrderStatusValues } from "../../orders/schemas/firestore.js";
 import { isManualPaymentMethod } from "../../orders/constants/payment-window.js";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry.js";
@@ -60,6 +66,14 @@ const UPDATE_STATUS_OPTIONS = [
     { value: "delivered", label: "Delivered" },
     { value: "cancelled", label: "Cancelled" },
 ];
+/**
+ * One item row. Extracted verbatim when grouping landed so the single and
+ * grouped paths cannot render differently — two copies of this markup is how
+ * the field-name bug below would come back on one path only.
+ */
+function sellerOrderItemRow(item, key) {
+    return (_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.productTitle ?? item.title ?? item.productId ?? "Item" }), _jsxs(Text, { size: "xs", className: "text-[var(--appkit-color-text-muted)]", children: ["Qty: ", item.quantity ?? 1] })] })] }), _jsx(Text, { size: "sm", className: "shrink-0", weight: "medium", children: toCurrency(item.totalPrice ?? item.unitPrice ?? item.price ?? 0) })] }, key));
+}
 /**
  * Manual-payment state for the seller's read-only badge. Derived from the same
  * two fields the admin queue uses (`paymentProofUrl` + `paymentReviewOutcome`)
@@ -198,8 +212,33 @@ export function SellerOrderDetailPanel({ orderId, apiBase, onClose, }) {
                 body: JSON.stringify(payload),
             });
             if (!res.ok) {
-                const d = await res.json().catch(() => ({}));
-                throw new Error(d?.error ?? "Failed to update order");
+                const d = (await res.json().catch(() => ({})));
+                /*
+                 * 🛑 FIELD ERRORS GO ON THE FIELD. The server already sends them.
+                 *
+                 * `mapToHttpError` answers a rejected body with
+                 * `{ status: 400, code: VALIDATION_FAILED, message: "Validation
+                 * failed", issues }` — the per-field detail is ON THE WIRE. This
+                 * handler used to throw `d.error` and render it in the banner below,
+                 * so the seller saw a bare "Validation failed" with nothing marked and
+                 * no way to tell WHICH field was wrong. Rule #9 §6.
+                 *
+                 * `applyZodIssues` keys by the full dotted path, so a nested field
+                 * lands on itself rather than collapsing onto `issue.path[0]`.
+                 */
+                if (Array.isArray(d.issues) && d.issues.length > 0) {
+                    applyZodIssues(d.issues, form.setFieldError);
+                    return;
+                }
+                /*
+                 * 🛑 NEVER the server's own message, and this is not hypothetical.
+                 * `d.error` is server text; rendering it is how a Node
+                 * `MODULE_NOT_FOUND` with a `/var/task/.next/...` require stack was
+                 * once shown inside a buyer's "Place your bid" modal (Root Cause #86).
+                 * `toUserMessage` resolves through `errors.codes.*`, terminates at
+                 * UNKNOWN, and cannot return server internals.
+                 */
+                throw new Error(toUserMessage(d.code));
             }
             const updated = await res.json();
             const next = (updated?.data ?? updated);
@@ -217,8 +256,19 @@ export function SellerOrderDetailPanel({ orderId, apiBase, onClose, }) {
             });
         }
         catch (err) {
-            void normalizeError(err);
-            setSaveError(err.message);
+            /*
+             * `normalizeError`'s RESULT, not an `as Error` cast. The cast asserted a
+             * shape nothing checked, and the only reason it happened to work is that
+             * every throw above is one we construct — a rejected promise from `fetch`
+             * or a JSON parse failure is not an `Error` by that assertion's logic,
+             * it just happens to be one at runtime.
+             *
+             * What reaches the banner is now bounded: either `toUserMessage(code)`
+             * from the throw above (mapped copy, never server text) or a browser-level
+             * network message. Field-level problems never get here at all — they were
+             * routed to the fields by `applyZodIssues`.
+             */
+            setSaveError(normalizeError(err).message);
         }
         finally {
             setSaving(false);
@@ -249,21 +299,21 @@ 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 && (_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-muted)]", children: toRelativeDate(order.createdAt) })] }), (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: (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.productTitle ?? item.title ?? item.productId ?? "Item" }), _jsxs(Text, { size: "xs", className: "text-[var(--appkit-color-text-muted)]", children: ["Qty: ", item.quantity ?? 1] })] })] }), _jsx(Text, { size: "sm", className: "shrink-0", weight: "medium", children: toCurrency(item.totalPrice ?? item.unitPrice ?? 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-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: "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)}`
-                                                                    : "" })] }), _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 }))] })), _jsxs(Stack, { className: "border-t border-[var(--appkit-color-border)]", 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 }))] })] }), _jsxs(Row, { border: "top", paddingY: "y-sm-tall", padding: "x-md", align: "center", justify: "end", gap: "3", children: [_jsx(Button, { variant: "outline", onClick: onClose, disabled: saving, children: "Close" }), _jsx(Button, { onClick: handleSave, isLoading: saving, disabled: saving, children: "Save" })] })] }))] }));
+    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, { className: "pl-4", 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: "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)}`
+                                                                : "" })] }), _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 }))] })), _jsxs(Stack, { className: "border-t border-[var(--appkit-color-border)]", 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 }))] })] }) }))] }));
 }
 function OrderDetailDrawer({ orderId, apiBase, onClose, }) {
     return (_jsx(SideDrawer, { isOpen: true, title: `Order ${orderId}`, onClose: onClose, children: _jsx(SellerOrderDetailPanel, { orderId: orderId, apiBase: apiBase, onClose: onClose }) }));
@@ -343,9 +393,7 @@ export function SellerOrdersView({ orderDetailApiBase = SELLER_ENDPOINTS.ORDERS,
         {
             key: "primary",
             header: "Order",
-            render: (row) => (_jsxs(Row, { gap: "sm", align: "center", className: "min-w-0", children: [_jsx(Div, { className: "h-10 w-10 shrink-0", rounded: "md", overflow: "hidden", children: _jsx(MediaImage, { src: row.itemImage, alt: row.itemTitle ?? "Order item", size: "thumbnail" }) }), _jsxs(Stack, { gap: "none", className: "min-w-0", children: [_jsx(Text, { className: "truncate", size: "sm", weight: "semibold", children: row.itemTitle
-                                    ? `${row.itemTitle}${row.itemCount > 1 ? ` +${row.itemCount - 1} more` : ""}`
-                                    : row.primary }), _jsxs(Text, { size: "xs", color: "muted", children: [row.buyerName, " \u00B7 ", row.itemCount, " item", row.itemCount !== 1 ? "s" : ""] })] })] })),
+            render: (row) => (_jsxs(Row, { gap: "sm", align: "center", className: "min-w-0", children: [_jsx(Div, { className: "h-10 w-10 shrink-0", rounded: "md", overflow: "hidden", children: _jsx(MediaImage, { src: row.itemImage, alt: row.itemTitle ?? "Order item", size: "thumbnail" }) }), _jsxs(Stack, { gap: "none", className: "min-w-0", children: [_jsx(Text, { className: "truncate", size: "sm", weight: "semibold", children: row.primary }), _jsxs(Text, { size: "xs", color: "muted", children: [row.buyerName, " \u00B7 ", row.itemCount, " item", row.itemCount !== 1 ? "s" : ""] })] })] })),
         },
         {
             key: "totalAmount",
@@ -392,7 +440,7 @@ export function SellerOrdersView({ orderDetailApiBase = SELLER_ENDPOINTS.ORDERS,
             commit: "debounce",
         },
         emptyLabel: "No orders yet",
-        filterKeys: ["status"],
+        filterKeys: ["status", "orderType"],
         defaultSort: DEFAULT_SORT,
         queryKey: ["seller", "orders", "listing"],
         endpoint: SELLER_ENDPOINTS.ORDERS,
@@ -425,10 +473,45 @@ export function SellerOrdersView({ orderDetailApiBase = SELLER_ENDPOINTS.ORDERS,
                  * below as `itemTitle`.
                  */
                 primary: (() => {
-                    const title = typeof firstItem.productTitle === "string" ? firstItem.productTitle : "";
+                    /*
+                     * Counted in LINES, not item rows, and a grouped line is named by
+                     * its own title.
+                     *
+                     * This was `items[0].productTitle` + `itemsArr.length - 1`, so a
+                     * four-member bundle read "Dranzer S +3 more" — an arbitrary
+                     * member, implying four separate purchases. Grouping through the
+                     * same helper the drawer now uses makes it "Starter Bundle", and a
+                     * bundle beside one standalone item "+1 more".
+                     */
+                    const groups = groupOrderItemsByLine(itemsArr
+                        .filter((entry) => Boolean(entry) && typeof entry === "object")
+                        /*
+                         * Narrowed, not cast: `Record<string, unknown>` does NOT
+                         * satisfy `OrderItemForLineGrouping` — its `groupSlug` is
+                         * `unknown`, which is not assignable to `string | undefined`.
+                         * A cast would compile and then group on whatever junk a bad
+                         * document carried.
+                         */
+                        .map((e) => ({
+                        productTitle: typeof e.productTitle === "string" ? e.productTitle : undefined,
+                        groupSlug: typeof e.groupSlug === "string" ? e.groupSlug : undefined,
+                        groupTitle: typeof e.groupTitle === "string" ? e.groupTitle : undefined,
+                        bundleCategorySlug: typeof e.bundleCategorySlug === "string" ? e.bundleCategorySlug : undefined,
+                        bundleProductIds: Array.isArray(e.bundleProductIds)
+                            ? e.bundleProductIds.filter((v) => typeof v === "string")
+                            : undefined,
+                    })));
+                    const head = groups[0];
+                    const extra = Math.max(0, groups.length - 1);
+                    const title = head === undefined
+                        ? typeof firstItem.productTitle === "string"
+                            ? firstItem.productTitle
+                            : ""
+                        : head.kind === "bundle"
+                            ? (head.groupTitle ?? "Grouped purchase")
+                            : (head.item.productTitle ?? "");
                     if (!title)
                         return `Order ${toStringValue(item.id, "-")}`;
-                    const extra = itemsArr.length - 1;
                     return extra > 0 ? `${title} +${extra} more` : title;
                 })(),
                 /*
@@ -456,10 +539,29 @@ export function SellerOrdersView({ orderDetailApiBase = SELLER_ENDPOINTS.ORDERS,
         // 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),
+        /*
+         * 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
+         * wins are still unshipped" should not have to choose between them.
+         *
+         * 🛑 `orderType` is a registered SELLER_SIEVE_FIELD as of this change. It
+         * was not, and the failure would have been invisible: `throwExceptions` is
+         * false, so an unallowlisted field drops its clause and the chip would have
+         * returned the seller's whole order list while looking like it filtered
+         * (Root Cause #62). `standard` is stripped from the query server-side and
+         * refined in memory — see `/api/store/orders`.
+         */
+        buildFilters: (state) => [
+            state.status && state.status !== "All"
+                ? sieveFilter("status", SIEVE_OP.EQ, state.status)
+                : null,
+            state.orderType ? sieveFilter("orderType", SIEVE_OP.EQ, state.orderType) : null,
+        ]
+            .filter(Boolean)
+            .join(",") || 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 })) })),
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsxs(_Fragment, { children: [_jsx(FilterChipGroup, { label: "Status", tabs: STATUS_OPTIONS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) }), _jsx(FilterChipGroup, { label: "Type", tabs: ORDER_LANE_TABS, value: pendingFilters.orderType ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, orderType: id })) })] })),
         buildBulkActions: (selection) => {
             const handlePrintPackingSlips = () => {
                 const ids = selection.selectedIds.join(",");

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

@@ -8,6 +8,8 @@ import { Badge, ConfirmDeleteModal, Div, Row, RowActionMenu, Span, Text, useToas
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints.js";
 import { ROUTES } from "../../../constants/index.js";
 import { toRecordArray, toStringValue } from "../hooks/useSellerListingData.js";
+import { useOptimisticRowFlag } from "../../admin/hooks/useOptimisticRowFlag.js";
+import { apiClient } from "../../../http/index.js";
 import { DataListingView } from "../../admin/components/DataListingView.js";
 const CLS_TYPE_PILL = "inline-flex items-center rounded-full px-[var(--appkit-space-2)] py-[var(--appkit-space-0-5)] text-[length:var(--appkit-text-xs)] font-semibold uppercase tracking-wide bg-violet-100 text-violet-700 dark:bg-violet-900/40 dark:text-violet-300";
 const DEFAULT_SORT = "-createdAt";
@@ -42,6 +44,22 @@ const COLUMNS = [
     },
 ];
 export function SellerPayoutMethodsView({ onCreateClick, onEditClick, onDelete, onSetDefault, }) {
+    /*
+     * 🛑 `isActive` was a READ-ONLY badge here, and the update schema was built
+     * to take it on its own — shipping-config's even says so in a comment: "a
+     * PATCH may legitimately carry only `isActive`". Nothing in the client had
+     * ever sent one, so flipping one boolean meant a full-editor round trip.
+     *
+     * The optimistic/rollback logic lives in the hook because eight listings
+     * grew this control at once; see its header for why rollback must DELETE
+     * the override key rather than write back a captured value.
+     */
+    const activeFlag = useOptimisticRowFlag({
+        mutate: (id, next) => apiClient.patch(SELLER_ENDPOINTS.PAYOUT_METHOD_BY_ID(id), { isActive: next }),
+        invalidate: [["seller", "payout-methods", "listing"]],
+        successMessage: (next) => (next ? "Payout method activated." : "Payout method deactivated."),
+        errorMessage: "Could not change that payout method's status.",
+    });
     const [deleteTargetId, setDeleteTargetId] = useState(null);
     const { deletingId, handleDelete: performDelete } = useEntityDelete({
         endpoint: SELLER_ENDPOINTS.PAYOUT_METHOD_BY_ID,
@@ -114,13 +132,27 @@ export function SellerPayoutMethodsView({ onCreateClick, onEditClick, onDelete,
             label: String(item.label ?? ""),
             type: String(item.type ?? ""),
             isDefault: Boolean(item.isDefault),
-            isActive: Boolean(item.isActive),
+            // Resolved through the pending override so the Status badge and the
+            // row toggle cannot disagree between the click and the refetch.
+            isActive: activeFlag.resolve(toStringValue(item.id, `pm-${index}`), Boolean(item.isActive)),
             maskedIdentifier: getMaskedIdentifier(item),
         })),
         getTotal: (response, mappedRows) => (typeof response.total === "number" ? response.total : mappedRows.length),
         buildFilters: () => undefined,
         primaryAction: { label: "New Method", onClick: handleCreate },
         renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
+                /*
+                 * 🛑 `isActive` was a read-only badge and the update schema was
+                 * built to accept it alone. A menu entry rather than a switch here,
+                 * to match the other actions in this menu — the menu is already
+                 * click-stopped in all three renderers.
+                 */
+                {
+                    label: row.isActive ? "Deactivate" : "Activate",
+                    separator: true,
+                    disabled: activeFlag.pendingId === row.id,
+                    onClick: () => { void activeFlag.set(row.id, !row.isActive); },
+                },
                 ...(!row.isDefault
                     ? [{ label: "Set as Default", disabled: settingDefaultId === row.id, onClick: () => handleSetDefault(row.id) }]
                     : []),

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

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { z } from "zod";
 import { Alert, Badge, Checkbox, Div, FormField, FormGroup, Heading, Label, Row, Span, Stack, Text, Toggle } from "../../../ui/index.js";
@@ -8,6 +8,7 @@ import { FormShellContext, useFormShellState, applyZodIssues, FormErrorSummary }
 import { SectionForm, useSectionFormNav, annotate } from "../../shell/index.js";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints.js";
 import { normalizeError } from "../../../errors/normalize.js";
+import { toUserMessage } from "../../../errors/error-display-map.js";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
 };
@@ -153,6 +154,20 @@ const DEFAULT_DRAFT = {
      */
     advancedListingTypesEnabled: false,
 };
+/**
+ * One radio group for a single-value field, with ONE error message.
+ *
+ * Extracted because the payout-method and account-type groups were the same
+ * eleven lines twice, and because adding the error handling to both tipped
+ * this view past `audit-code-quality`'s component-size threshold. The error
+ * placement is the part worth sharing: `aria-invalid` goes on every radio so
+ * assistive tech marks the whole group, but the message renders ONCE
+ * underneath — the field is one value, so an `error` per radio would print
+ * and announce the same sentence for every option.
+ */
+function RadioFieldGroup({ name, value, options, error, disabled, onSelect, renderOption, layout: Layout, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(Layout, { gap: "sm", children: options.map((option) => (_jsxs(Label, { layout: "flex", gap: "md", className: "cursor-pointer", children: [_jsx(Checkbox, { bare: true, type: "radio", name: name, value: option, checked: value === option, onChange: () => onSelect(option), className: "accent-[var(--appkit-color-primary)]", disabled: disabled, "aria-invalid": error ? "true" : undefined }), renderOption(option)] }, option))) }), error && (_jsx(Text, { size: "sm", variant: "error", role: "alert", children: error }))] }));
+}
 export function SellerPayoutSettingsView({ apiBase = SELLER_ENDPOINTS.PAYOUT_SETTINGS }) {
     const [draft, setDraft] = useState(DEFAULT_DRAFT);
     const [current, setCurrent] = useState(null);
@@ -253,7 +268,22 @@ export function SellerPayoutSettingsView({ apiBase = SELLER_ENDPOINTS.PAYOUT_SET
                 if (Array.isArray(json?.issues) && json.issues.length > 0) {
                     applyZodIssues(json.issues, setFieldError);
                 }
-                setError(json?.error ?? "Failed to save");
+                /*
+                 * `json.error` is the SERVER's sentence — never shown to a user
+                 * (Rule #9.6). Resolve the stable `code` instead; `toUserMessage`
+                 * terminates in this fallback and can never return server text.
+                 *
+                 * Only a banner when the issues above attached nothing: if they did,
+                 * the fields now carry the detail and a banner repeating a vaguer
+                 * version of it is noise.
+                 */
+                const attached = Array.isArray(json?.issues) &&
+                    json.issues.some((i) => i?.path?.length);
+                if (!attached) {
+                    setError(toUserMessage(json?.code, undefined, {
+                        fallback: "We couldn't save your payout settings.",
+                    }));
+                }
                 return;
             }
             clearErrors();
@@ -263,8 +293,17 @@ export function SellerPayoutSettingsView({ apiBase = SELLER_ENDPOINTS.PAYOUT_SET
             setDraft((prev) => ({ ...prev, accountNumber: "" }));
         }
         catch (err) {
-            void normalizeError(err);
-            setError(err.message);
+            /*
+             * `normalizeError` was already being called and its result DISCARDED,
+             * then the raw `.message` shown anyway — a thrown value's message is
+             * written for a developer, and this is the path a network failure or a
+             * bundler fault takes (Root Cause #86 rendered a require stack this
+             * way). Use the normalized code; the sentence is ours.
+             */
+            const normalized = normalizeError(err);
+            setError(toUserMessage(normalized.code, undefined, {
+                fallback: "We couldn't save your payout settings. Please try again.",
+            }));
         }
         finally {
             setSaving(false);
@@ -283,12 +322,12 @@ export function SellerPayoutSettingsView({ apiBase = SELLER_ENDPOINTS.PAYOUT_SET
             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"
+            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"
                             ? `Current UPI: ${current.upiId}`
-                            : `Current bank: ${current.bankAccount?.bankName ?? ""} — ••••${current.bankAccount?.accountNumberMasked?.slice(-4) ?? "••••"} (${current.bankAccount?.accountType})` })), _jsx(Stack, { gap: "sm", children: ([
-                            { value: "upi", label: "UPI", desc: "Instant payouts via UPI VPA (e.g. name@upi)." },
-                            { value: "bank_transfer", label: "Bank Transfer", desc: "NEFT/RTGS to your bank account within 2–3 business days." },
-                        ]).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))) })] })] })] }))] })),
+                            : `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)." },
+                                { value: "bank_transfer", label: "Bank Transfer", desc: "NEFT/RTGS to your bank account within 2–3 business days." },
+                            ]).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, "aria-invalid": errors.method ? "true" : undefined }), _jsxs(Div, { children: [_jsx(Text, { weight: "medium", children: label }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: desc })] })] }, value))), errors.method && (_jsx(Text, { size: "sm", variant: "error", role: "alert", children: errors.method }))] }), 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(RadioFieldGroup, { name: "accountType", value: values.accountType, options: ["savings", "current"], error: errors.accountType, disabled: busy, onSelect: (t) => onChange({ accountType: t }), layout: Row, renderOption: (t) => (_jsx(Text, { size: "sm", transform: "capitalize", children: t })) })] })] })] }))] })),
         },
         {
             id: "tax",

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

@@ -641,7 +641,11 @@ export function SellerProductsView({ onDeleteProduct, onCreateClick, }) {
                 : `/products/${row.id}`,
         renderRowActions: (row) => {
             const isPublished = (statusOverrides.get(row.id) ?? row.status) === "published";
-            return (_jsxs(Row, { gap: "xs", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); handleEdit(row); }, "aria-label": ACTIONS.STORE["edit-listing"].ariaLabel, children: _jsx(Pencil, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); void openAssembly(row, "assemble"); }, "aria-label": ACTIONS.STORE["assemble-from-parts"].ariaLabel, title: ACTIONS.STORE["assemble-from-parts"].label, disabled: assembleLoading, children: _jsx(Wrench, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); void openAssembly(row, "part-out"); }, "aria-label": ACTIONS.STORE["part-out-listing"].ariaLabel, title: ACTIONS.STORE["part-out-listing"].label, disabled: assembleLoading, children: _jsx(Scissors, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); void handleTogglePublish(row); }, "aria-label": isPublished ? "Unpublish" : "Publish", title: isPublished ? "Unpublish" : "Publish", disabled: publishingId === row.id, children: isPublished ? _jsx(EyeOff, { className: "w-4 h-4" }) : _jsx(Eye, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); void handleDuplicate(row); }, "aria-label": "Duplicate listing", title: "Duplicate", children: "\u29C9" }), onDeleteProduct && (_jsx(Button, { variant: "ghost", size: "sm", action: ACTIONS.STORE["delete-listing"], onClick: (e) => { e.stopPropagation(); void handleDelete(row); }, disabled: deletingId === row.id, className: "text-[var(--appkit-color-error)] hover:bg-[var(--appkit-color-border-subtle)]", children: _jsx(Trash2, { className: "w-4 h-4" }) }))] }));
+            return (_jsxs(Row, { gap: "xs", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); handleEdit(row); }, "aria-label": ACTIONS.STORE["edit-listing"].ariaLabel, children: _jsx(Pencil, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); void openAssembly(row, "assemble"); }, "aria-label": ACTIONS.STORE["assemble-from-parts"].ariaLabel, title: ACTIONS.STORE["assemble-from-parts"].label, disabled: assembleLoading, children: _jsx(Wrench, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); void openAssembly(row, "part-out"); }, "aria-label": ACTIONS.STORE["part-out-listing"].ariaLabel, title: ACTIONS.STORE["part-out-listing"].label, disabled: assembleLoading, children: _jsx(Scissors, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); void handleTogglePublish(row); }, "aria-label": isPublished
+                            ? ACTIONS.STORE["unpublish-listing"].label
+                            : ACTIONS.STORE["publish-listing"].label, title: isPublished
+                            ? ACTIONS.STORE["unpublish-listing"].description
+                            : ACTIONS.STORE["publish-listing"].description, disabled: publishingId === row.id, children: isPublished ? _jsx(EyeOff, { className: "w-4 h-4" }) : _jsx(Eye, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); void handleDuplicate(row); }, "aria-label": "Duplicate listing", title: "Duplicate", children: "\u29C9" }), onDeleteProduct && (_jsx(Button, { variant: "ghost", size: "sm", action: ACTIONS.STORE["delete-listing"], onClick: (e) => { e.stopPropagation(); void handleDelete(row); }, disabled: deletingId === row.id, className: "text-[var(--appkit-color-error)] hover:bg-[var(--appkit-color-border-subtle)]", children: _jsx(Trash2, { className: "w-4 h-4" }) }))] }));
         },
     };
     return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), setLocationOpen && (_jsx(PhysicalLocationModal, { count: selectedIdsForLocation.length, onSave: (loc) => handleSetLocation(loc, selectedIdsForLocation), onClose: () => setSetLocationOpen(false) })), setStockOpen && (_jsx(BulkStockModal, { count: selectedIdsForStock.length, busy: stockBusy, onSave: (qty) => handleSetStock(qty, selectedIdsForStock), onClose: () => setSetStockOpen(false) })), assembleFor && assembleData && (_jsx(AssemblyDrawer, { isOpen: true,