@mohasinac/appkit 4.14.0 → 4.16.0

package/dist/features/scams/constants/scammer-status-display.js

@@ -0,0 +1,79 @@
+/*
+ * WHY: "How does a scammer status look and read" had FOUR hand-written answers
+ *      and they had already diverged in a way that shipped a real defect:
+ *
+ *        · `AdminScammersView.STATUS_BADGE`   — Record<string, string>
+ *        · `AdminScammerEditorView.STATUS_COLOR` — Record<string, string>
+ *        · `AdminScammerEditorView.STATUS_OPTIONS` — a literal label list
+ *        · `ADMIN_SCAMMER_STATUS_TABS`        — the filter chips
+ *
+ *      Both colour maps carried the SAME broken `removed` entry:
+ *
+ *          "bg-[…surface] text-[…muted] bg-[…surface-elevated] text-[…muted]"
+ *
+ *      — two backgrounds and two inks on one element. Tailwind emits all four
+ *      and the winner is decided by stylesheet order, not by position in the
+ *      class string, so which background actually painted was not what either
+ *      map said. One bug, two copies: the Duplication Framework's bug-fix
+ *      multiplier, which is what makes this a consolidate rather than a
+ *      third copy.
+ *
+ * WHAT: One display module beside the union it describes.
+ *
+ * ## Everything here is keyed `Record<ScammerStatus, …>`
+ *
+ * Not `Record<string, …>`. A status added to the union without a label or a
+ * badge is then a COMPILE error rather than a row that silently renders with
+ * the fallback styling of a status it is not — which is precisely how the
+ * loose maps hid the broken `removed` entry.
+ *
+ * EXPORTS:
+ *   SCAMMER_STATUS_LABEL, SCAMMER_STATUS_BADGE, SCAMMER_STATUS_OPTIONS,
+ *   toScammerStatus
+ *
+ * @tag domain:scams
+ * @tag layer:constants
+ * @tag pattern:none
+ * @tag access:isomorphic
+ * @tag consumers:AdminScammersView,AdminScammerEditorView
+ * @tag sideEffects:none
+ */
+import { ScammerStatusValues } from "../schemas/firestore";
+/** Human-readable label. Replaces two `.replace(/_/g, " ")` call sites, which
+ *  rendered "pending review" — mechanically correct, and not a written label. */
+export const SCAMMER_STATUS_LABEL = {
+    pending_review: "Pending review",
+    verified: "Verified",
+    rejected: "Rejected",
+    removed: "Removed",
+};
+/**
+ * Inline-chip styling. Every entry is a `bg-{status}-surface` + `text-{status}`
+ * pair per Recurrent Root Cause #67 — the two tokens invert together with the
+ * theme, which a literal `text-white` would not.
+ *
+ * `removed` is the neutral case: it has no status colour because it is not a
+ * status outcome, it is a withdrawal. ONE background, ONE ink.
+ */
+export const SCAMMER_STATUS_BADGE = {
+    pending_review: "bg-warning-surface text-warning",
+    verified: "bg-success-surface text-success",
+    rejected: "bg-error-surface text-error",
+    removed: "bg-[var(--appkit-color-surface-elevated)] text-[var(--appkit-color-text-muted)]",
+};
+/** Dropdown options, derived from the union so one cannot go missing. */
+export const SCAMMER_STATUS_OPTIONS = Object.values(ScammerStatusValues).map((value) => ({ value, label: SCAMMER_STATUS_LABEL[value] }));
+/**
+ * Narrow an unknown API value to a real status.
+ *
+ * The list view used `toStringValue(item.status, "pending_review")`, which
+ * produces a `string` — so an unrecognised value flowed on as if it were a
+ * status and every consumer fell back to the pending styling. This maps
+ * anything unrecognised to `pending_review` explicitly, and the return type
+ * says so.
+ */
+export function toScammerStatus(value) {
+    return Object.values(ScammerStatusValues).includes(value)
+        ? value
+        : ScammerStatusValues.PENDING_REVIEW;
+}

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

@@ -87,9 +87,9 @@ export declare const scammerFirestoreSchema: z.ZodObject<{
     updatedAt: string | Date | z.objectOutputType<{
         toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
     }, z.ZodTypeAny, "passthrough">;
+    views: number;
     description: string;
     tags: string[];
-    views: number;
     scamType: string;
     reportedBy: string;
     reportedByAnon: boolean;
@@ -127,9 +127,9 @@ export declare const scammerFirestoreSchema: z.ZodObject<{
     updatedAt: string | Date | z.objectInputType<{
         toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
     }, z.ZodTypeAny, "passthrough">;
+    views: number;
     description: string;
     tags: string[];
-    views: number;
     scamType: string;
     reportedBy: string;
     reportedByAnon: boolean;

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

@@ -27,9 +27,9 @@ export declare const searchProductItemSchema: z.ZodObject<{
     currency?: string | undefined;
     status?: string | undefined;
     price?: number | undefined;
+    listingType?: "standard" | "auction" | "pre-order" | "prize-draw" | "bundle" | undefined;
     mainImage?: string | undefined;
     featured?: boolean | undefined;
-    listingType?: "standard" | "auction" | "pre-order" | "prize-draw" | "bundle" | undefined;
     isPromoted?: boolean | undefined;
 }, {
     id: string;
@@ -38,9 +38,9 @@ export declare const searchProductItemSchema: z.ZodObject<{
     currency?: string | undefined;
     status?: string | undefined;
     price?: number | undefined;
+    listingType?: "standard" | "auction" | "pre-order" | "prize-draw" | "bundle" | undefined;
     mainImage?: string | undefined;
     featured?: boolean | undefined;
-    listingType?: "standard" | "auction" | "pre-order" | "prize-draw" | "bundle" | undefined;
     isPromoted?: boolean | undefined;
 }>;
 /**

package/dist/features/seller/actions/offer-actions.js

@@ -210,7 +210,24 @@ export async function counterOfferByBuyer(userId, userEmail, input) {
     const offerCount = await offerRepository.countByBuyerAndProduct(userId, offer.productId, product.updatedAt);
     if (offerCount >= 3)
         throw new ValidationError(ERROR_MESSAGES.OFFER.LIMIT_REACHED);
-    await offerRepository.withdraw(offerId);
+    // ── Create BEFORE superseding. Order matters. ───────────────────────────
+    //
+    // This used to `withdraw()` first and `create()` second. If `create` threw —
+    // a validation slip, a Firestore blip — the buyer's live counter was ALREADY
+    // withdrawn, no replacement existed, the negotiation was dead, and one of
+    // their three offer slots had been burnt for nothing.
+    //
+    // Reversed, the worst failure is a transient extra pending offer, which
+    // `hasActiveOffer` and the expiry sweep both already handle.
+    //
+    // The chain fields are what make a multi-round negotiation readable at all:
+    // `previousOfferId` used to exist ONLY inside the serverLogger call below
+    // and never reached Firestore, so three rounds were three unrelated
+    // documents. `chainRootOfferId` is denormalised onto every round so a list
+    // row can render "Round 2" with zero extra reads, and `findChain` stays a
+    // single-field equality served by the automatic index.
+    const chainRoot = offer.chainRootOfferId ?? offer.id;
+    const nextRound = (offer.counterRound ?? 1) + 1;
     const newOffer = await offerRepository.create({
         productId: offer.productId,
         productTitle: offer.productTitle,
@@ -225,7 +242,18 @@ export async function counterOfferByBuyer(userId, userEmail, input) {
         listedPrice: offer.listedPrice,
         currency: offer.currency,
         buyerNote,
+        // NOT carrying `sellerNote` forward: it would render as "Seller note" on
+        // the new round, making the seller look like they had already answered a
+        // counter they have never seen. Round N-1 keeps its own note and is now
+        // reachable via `previousOfferId`.
+        previousOfferId: offer.id,
+        chainRootOfferId: chainRoot,
+        counterRound: nextRound,
     });
+    // Now supersede the old round — one write, one history entry. A `withdrawn`
+    // document carrying `supersededByOfferId` renders as *Superseded* (neutral),
+    // not *Withdrawn* (negative): the buyer did not walk away, they countered.
+    await offerRepository.withdraw(offerId, newOffer.id, { actor: { uid: userId, role: "buyer" } }, offer);
     const buyerCounterStore = offer.storeId ? await storeRepository.findById(offer.storeId) : null;
     if (buyerCounterStore?.ownerId)
         await sendNotification({
@@ -237,12 +265,14 @@ export async function counterOfferByBuyer(userId, userEmail, input) {
             relatedId: newOffer.id,
             relatedType: "offer",
         });
+    // `previousOfferId` is no longer logged as its only record — it is a
+    // persisted field on `newOffer` now. A log line is not a data model.
     serverLogger.info("counterOfferByBuyer", {
-        previousOfferId: offerId,
         newOfferId: newOffer.id,
         buyerUid: userId,
         productId: offer.productId,
         counterAmount,
+        counterRound: nextRound,
     });
     return newOffer;
 }

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

@@ -0,0 +1,59 @@
+/**
+ * OfferPhaseTimeline — the offer-shaped wrapper around `<StatusTimeline>`.
+ *
+ * An offer is an order with more phases in front of it, so it shares the rail
+ * and supplies only its own vocabulary:
+ *
+ *   made → countered → accepted → paid
+ *   with declined / withdrawn / expired as the terminal-negative branch
+ *
+ * ## `superseded` is a RENDER KEY, never an OfferStatus
+ *
+ * A document that is `withdrawn` **and** carries `supersededByOfferId` is not
+ * a walk-away — the buyer countered, and the negotiation continued into the
+ * next round. It renders neutral ("Superseded"), not negative ("Withdrawn").
+ *
+ * Deliberately NOT an eighth `OfferStatus` value: `ADMIN_OFFER_STATUS_TABS`
+ * would then gain a chip that matches zero stored rows, which is exactly the
+ * defect `audit-filter-tab-enums` exists to catch.
+ *
+ * ## Back-compat
+ *
+ * Offers written before `statusHistory` existed have none. Branch B derives
+ * what it can from the scalars — and `expired` gets **no date at all**,
+ * because `expireMany` never wrote one. `updatedAt` is "last write of any
+ * kind" and `expiresAt` is a deadline, not an event; using either would be a
+ * fabricated timestamp.
+ */
+import { type TimelineEntry } from "../../status-history/components/StatusTimeline";
+/** One round of a negotiation, as returned by the API. */
+export interface OfferChainRound {
+    id: string;
+    counterRound: number;
+    status: string;
+    offerAmount: number;
+    counterAmount?: number;
+    superseded: boolean;
+    createdAt: string;
+    respondedAt?: string;
+    sellerNote?: string;
+    buyerNote?: string;
+}
+export interface OfferPhaseTimelineProps {
+    status: string;
+    timeline?: TimelineEntry[];
+    timelineTruncated?: number;
+    superseded?: boolean;
+    createdAt?: string;
+    respondedAt?: string;
+    acceptedAt?: string;
+    paidAt?: string;
+    /**
+     * Earlier rounds, oldest first. Concatenated ahead of this offer's own
+     * steps into ONE rail, each introduced by a "Round N" divider — a
+     * negotiation reads as one story, not N disconnected cards.
+     */
+    chain?: OfferChainRound[];
+    className?: string;
+}
+export declare function OfferPhaseTimeline({ status, timeline, timelineTruncated, superseded, createdAt, respondedAt, acceptedAt, paidAt, chain, className, }: OfferPhaseTimelineProps): import("react").JSX.Element;

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

@@ -0,0 +1,107 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * OfferPhaseTimeline — the offer-shaped wrapper around `<StatusTimeline>`.
+ *
+ * An offer is an order with more phases in front of it, so it shares the rail
+ * and supplies only its own vocabulary:
+ *
+ *   made → countered → accepted → paid
+ *   with declined / withdrawn / expired as the terminal-negative branch
+ *
+ * ## `superseded` is a RENDER KEY, never an OfferStatus
+ *
+ * A document that is `withdrawn` **and** carries `supersededByOfferId` is not
+ * a walk-away — the buyer countered, and the negotiation continued into the
+ * next round. It renders neutral ("Superseded"), not negative ("Withdrawn").
+ *
+ * Deliberately NOT an eighth `OfferStatus` value: `ADMIN_OFFER_STATUS_TABS`
+ * would then gain a chip that matches zero stored rows, which is exactly the
+ * defect `audit-filter-tab-enums` exists to catch.
+ *
+ * ## Back-compat
+ *
+ * Offers written before `statusHistory` existed have none. Branch B derives
+ * what it can from the scalars — and `expired` gets **no date at all**,
+ * because `expireMany` never wrote one. `updatedAt` is "last write of any
+ * kind" and `expiresAt` is a deadline, not an event; using either would be a
+ * fabricated timestamp.
+ */
+import { StatusTimeline, stepsFromEntries, } from "../../status-history/components/StatusTimeline";
+const PHASE_LABELS = {
+    pending: "Offer made",
+    countered: "Countered",
+    accepted: "Accepted",
+    paid: "Paid",
+    declined: "Declined",
+    withdrawn: "Withdrawn",
+    expired: "Expired",
+    superseded: "Superseded",
+};
+const NEGATIVE = new Set(["declined", "withdrawn", "expired"]);
+const labelFor = (status) => PHASE_LABELS[status] ?? status;
+const isNegative = (status) => NEGATIVE.has(status);
+/** Branch B — scalars only, for offers with no recorded history. */
+function buildLegacySteps(o) {
+    const steps = [
+        { key: "pending", label: PHASE_LABELS.pending, date: o.createdAt },
+    ];
+    const s = (o.status ?? "").toLowerCase();
+    if (s === "countered") {
+        steps.push({ key: "countered", label: PHASE_LABELS.countered, date: o.respondedAt });
+    }
+    if (s === "accepted" || s === "paid") {
+        steps.push({
+            key: "accepted",
+            label: PHASE_LABELS.accepted,
+            date: o.acceptedAt ?? o.respondedAt,
+        });
+    }
+    if (s === "paid") {
+        steps.push({ key: "paid", label: PHASE_LABELS.paid, date: o.paidAt });
+    }
+    if (s === "declined") {
+        steps.push({ key: "declined", label: PHASE_LABELS.declined, date: o.respondedAt, negative: true });
+    }
+    if (s === "withdrawn") {
+        steps.push(o.superseded
+            ? { key: "superseded", label: PHASE_LABELS.superseded, date: o.respondedAt, muted: true }
+            : { key: "withdrawn", label: PHASE_LABELS.withdrawn, date: o.respondedAt, negative: true });
+    }
+    if (s === "expired") {
+        // No date, on purpose. `expireMany` never wrote one before W2.
+        steps.push({ key: "expired", label: PHASE_LABELS.expired, negative: true });
+    }
+    return steps;
+}
+/** Re-key a withdrawn+superseded step so it reads neutral, not negative. */
+function applySupersede(steps, superseded) {
+    if (!superseded)
+        return steps;
+    return steps.map((s) => s.key === "withdrawn"
+        ? { ...s, key: "superseded", label: PHASE_LABELS.superseded, negative: false, muted: true }
+        : s);
+}
+export function OfferPhaseTimeline({ status, timeline, timelineTruncated, superseded = false, createdAt, respondedAt, acceptedAt, paidAt, chain, className = "", }) {
+    const own = applySupersede(stepsFromEntries(timeline, labelFor, isNegative).length
+        ? stepsFromEntries(timeline, labelFor, isNegative)
+        : buildLegacySteps({ status, createdAt, respondedAt, acceptedAt, paidAt, superseded }), superseded);
+    const priorRounds = (chain ?? []).filter((r) => r.id !== undefined);
+    const hasChain = priorRounds.length > 1;
+    const steps = hasChain
+        ? priorRounds.flatMap((round, idx) => {
+            const roundSteps = applySupersede(buildLegacySteps({
+                status: round.status,
+                createdAt: round.createdAt,
+                respondedAt: round.respondedAt,
+                superseded: round.superseded,
+            }), round.superseded);
+            return roundSteps.map((s, i) => ({
+                ...s,
+                roundLabel: i === 0 ? `Round ${round.counterRound || idx + 1}` : undefined,
+                note: i === roundSteps.length - 1 ? (round.sellerNote ?? round.buyerNote) : undefined,
+            }));
+        })
+        : own;
+    return (_jsx(StatusTimeline, { title: hasChain ? "Negotiation" : "Offer history", steps: steps, truncatedCount: timelineTruncated, emptyLabel: "No offer history yet", className: className }));
+}

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

@@ -1,10 +1,11 @@
 "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 { normalizeError } from "../../../errors/normalize";
 import { SIEVE_OP, Stack, sieveFilter } from "@mohasinac/appkit/client";
 import { sortBy } from "@mohasinac/appkit/client";
 import { useState, useCallback } from "react";
-import { Badge, Button, Div, FilterChipGroup, Span, Text, useToast } from "../../../ui";
+import { Badge, Button, Div, FilterChipGroup, RecordDetailModal, Span, Text, useToast } from "../../../ui";
+import { buildBidDetailFields, bidStatusBadge } from "../../auctions/components/bid-detail-fields";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { buildBulkAction } from "../../../_internal/shared/actions/bulk-helpers";
@@ -29,6 +30,7 @@ const STATUS_BADGE = {
     cancelled: "danger",
 };
 export function SellerBidsView({ endpoint = SELLER_ENDPOINTS.BIDS }) {
+    const [detail, setDetail] = useState(null);
     const { showToast } = useToast();
     const [collapsedGroups, setCollapsedGroups] = useState(new Set());
     const toggleGroup = (id) => setCollapsedGroups((s) => {
@@ -130,9 +132,14 @@ export function SellerBidsView({ endpoint = SELLER_ENDPOINTS.BIDS }) {
             }
             return (_jsx(Stack, { gap: "3", children: groupedRows.map((group) => {
                     const collapsed = collapsedGroups.has(group.id);
-                    return (_jsxs(Div, { className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", rounded: "lg", children: [_jsxs(Button, { variant: "ghost", type: "button", onClick: () => toggleGroup(group.id), justify: "between", paddingX: "md", paddingY: "y-xs-tall", textSize: "sm", weight: "semibold", textColor: "default", className: "w-full hover:bg-[var(--appkit-color-surface-raised)]", children: [_jsxs(Span, { className: "truncate", children: [group.title, " ", _jsxs(Span, { size: "xs", weight: "normal", className: "text-[var(--appkit-color-text-muted)]", children: ["\u00B7 ", group.bids.length, " bid", group.bids.length === 1 ? "" : "s"] })] }), _jsx(Span, { "aria-hidden": true, className: "text-[var(--appkit-color-text-muted)]", children: collapsed ? "▸" : "▾" })] }), !collapsed && (_jsx(Div, { className: "border-t border-[var(--appkit-color-border)]", children: _jsx(DataTable, { rows: group.bids, columns: columns, isLoading: false, emptyLabel: "", selectedIds: new Set(selection.selectedIds), onToggleSelect: selection.toggleSelect }) }))] }, group.id));
+                    return (_jsxs(Div, { className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", rounded: "lg", children: [_jsxs(Button, { variant: "ghost", type: "button", onClick: () => toggleGroup(group.id), justify: "between", paddingX: "md", paddingY: "y-xs-tall", textSize: "sm", weight: "semibold", textColor: "default", className: "w-full hover:bg-[var(--appkit-color-surface-raised)]", children: [_jsxs(Span, { className: "truncate", children: [group.title, " ", _jsxs(Span, { size: "xs", weight: "normal", className: "text-[var(--appkit-color-text-muted)]", children: ["\u00B7 ", group.bids.length, " bid", group.bids.length === 1 ? "" : "s"] })] }), _jsx(Span, { "aria-hidden": true, className: "text-[var(--appkit-color-text-muted)]", children: collapsed ? "▸" : "▾" })] }), !collapsed && (_jsx(Div, { className: "border-t border-[var(--appkit-color-border)]", children: _jsx(DataTable, { rows: group.bids, columns: columns, isLoading: false, emptyLabel: "", selectedIds: new Set(selection.selectedIds), onToggleSelect: selection.toggleSelect, 
+                                    // Without this the row could be selected and bulk-acted
+                                    // on but never opened — a seller could cancel a bid they
+                                    // had no way to read (Root Cause #56).
+                                    onRowClick: (row) => setDetail(row) }) }))] }, group.id));
                 }) }));
         },
     };
-    return _jsx(DataListingView, { config: config });
+    const detailBadge = detail ? bidStatusBadge(detail.status) : null;
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(RecordDetailModal, { isOpen: detail !== null, onClose: () => setDetail(null), title: detail?.productTitle || "Bid", badges: detailBadge ? [{ label: detailBadge.label }] : undefined, fields: detail ? buildBidDetailFields(detail, "seller") : undefined })] }));
 }

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

@@ -5,6 +5,8 @@ import { Badge, Button, Checkbox, Div, Form, Heading, IconButton, Input, Label,
 import { ProductInlineSelect } from "./ProductInlineSelect";
 import { CategoryInlineSelect } from "./CategoryInlineSelect";
 import { normalizeError } from "../../../errors/normalize";
+import { FormErrorSummary, applyZodIssues } from "../../../ui/forms";
+import { sellerCouponFormSchema } from "../schemas/coupon-form";
 const __O = {
     hidden: "overflow-hidden",
 };
@@ -39,22 +41,20 @@ export function SellerCouponEditorView({ couponId, initial, onSave, onCancel, })
     const [saving, setSaving] = useState(false);
     const [error, setError] = useState(null);
     const set = (key, value) => setDraft((d) => ({ ...d, [key]: value }));
-    const handleSubmit = async (e) => {
+    const handleSubmit = async (e, setFieldError) => {
         e.preventDefault();
-        if (!draft.code.trim()) {
-            setError("Coupon code is required");
-            return;
-        }
-        if (draft.type !== "free_shipping" && !draft.value) {
-            setError("Discount value is required");
-            return;
-        }
-        if (!draft.startDate || !draft.endDate) {
-            setError("Start and end dates are required");
-            return;
-        }
-        if (draft.startDate > draft.endDate) {
-            setError("Start date must be before end date");
+        // Replaces four hand-rolled `if` checks that covered presence and date
+        // order and nothing else — a 500% percentage discount, a non-numeric
+        // value, a negative minimum spend and a per-customer limit above the
+        // total all passed. Errors now land on the field, not in one banner.
+        const parsed = sellerCouponFormSchema.safeParse(draft);
+        if (!parsed.success) {
+            if (setFieldError) {
+                applyZodIssues(parsed.error.issues, setFieldError);
+            }
+            else {
+                setError(parsed.error.issues[0]?.message ?? "Please check the form.");
+            }
             return;
         }
         setError(null);
@@ -71,11 +71,11 @@ export function SellerCouponEditorView({ couponId, initial, onSave, onCancel, })
         }
     };
     const isEdit = Boolean(couponId);
-    return (_jsx(Form, { onSubmit: handleSubmit, noValidate: true, children: _jsxs(Stack, { gap: "none", className: `max-w-lg mx-auto border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] ${__O.hidden}`, rounded: "xl", shadow: "sm", children: [_jsx(Div, { className: "h-[3px] w-full [background:linear-gradient(to_right,var(--appkit-color-primary-700)_0%,var(--appkit-color-cobalt)_55%,var(--appkit-color-secondary-400)_100%)]", "aria-hidden": "true" }), _jsx(Div, { border: "bottom", paddingY: "y-md-lg", padding: "x-lg", children: _jsxs(Row, { justify: "between", gap: "3", children: [_jsx(Heading, { level: 2, className: "text-[var(--appkit-color-text)]", size: "lg", weight: "semibold", children: isEdit ? "Edit Coupon" : "Create Coupon" }), isEdit && (_jsx(Badge, { variant: draft.isActive ? "success" : "default", children: draft.isActive ? "Active" : "Inactive" }))] }) }), _jsxs(Stack, { gap: "5", padding: "lg", children: [error && (_jsx(Div, { textSize: "sm", className: "border border-error/20", color: "error", surface: "danger-surface", padding: "inline", rounded: "lg", children: error })), _jsx(Input, { label: "Coupon Code", value: draft.code, onChange: (e) => set("code", e.target.value.toUpperCase().replace(/\s+/g, "")), placeholder: "e.g. WELCOME10", required: true, disabled: isEdit, helperText: isEdit ? "Code cannot be changed after creation" : "Customers enter this at checkout" }), _jsx(Select, { label: "Discount Type", value: draft.type, options: TYPE_OPTIONS, onChange: (e) => set("type", e.target.value) }), draft.type !== "free_shipping" && (_jsx(Input, { label: draft.type === "percentage" ? "Discount Percentage (%)" : "Discount Amount (₹)", type: "number", min: 1, max: draft.type === "percentage" ? 100 : undefined, value: draft.value, onChange: (e) => set("value", e.target.value), placeholder: draft.type === "percentage" ? "e.g. 10" : "e.g. 50", required: true, helperText: draft.type === "percentage"
+    return (_jsx(Form, { schema: sellerCouponFormSchema, onSubmit: (e) => e.preventDefault(), children: ({ setFieldError }) => (_jsxs(Stack, { gap: "none", className: `max-w-lg mx-auto border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] ${__O.hidden}`, rounded: "xl", shadow: "sm", children: [_jsx(Div, { className: "h-[3px] w-full [background:linear-gradient(to_right,var(--appkit-color-primary-700)_0%,var(--appkit-color-cobalt)_55%,var(--appkit-color-secondary-400)_100%)]", "aria-hidden": "true" }), _jsx(Div, { border: "bottom", paddingY: "y-md-lg", padding: "x-lg", children: _jsxs(Row, { justify: "between", gap: "3", children: [_jsx(Heading, { level: 2, className: "text-[var(--appkit-color-text)]", size: "lg", weight: "semibold", children: isEdit ? "Edit Coupon" : "Create Coupon" }), isEdit && (_jsx(Badge, { variant: draft.isActive ? "success" : "default", children: draft.isActive ? "Active" : "Inactive" }))] }) }), _jsxs(Stack, { gap: "5", padding: "lg", children: [_jsx(FormErrorSummary, {}), error && (_jsx(Div, { textSize: "sm", className: "border border-error/20", color: "error", surface: "danger-surface", padding: "inline", rounded: "lg", children: error })), _jsx(Input, { label: "Coupon Code", value: draft.code, onChange: (e) => set("code", e.target.value.toUpperCase().replace(/\s+/g, "")), placeholder: "e.g. WELCOME10", required: true, disabled: isEdit, helperText: isEdit ? "Code cannot be changed after creation" : "Customers enter this at checkout" }), _jsx(Select, { label: "Discount Type", value: draft.type, options: TYPE_OPTIONS, onChange: (e) => set("type", e.target.value) }), draft.type !== "free_shipping" && (_jsx(Input, { label: draft.type === "percentage" ? "Discount Percentage (%)" : "Discount Amount (₹)", type: "number", min: 1, max: draft.type === "percentage" ? 100 : undefined, value: draft.value, onChange: (e) => set("value", e.target.value), placeholder: draft.type === "percentage" ? "e.g. 10" : "e.g. 50", required: true, helperText: draft.type === "percentage"
                                 ? "Enter a value between 1 and 100"
                                 : "Fixed rupee discount applied to the order" })), draft.type === "percentage" && (_jsx(Input, { label: "Max Discount Cap (\u20B9, optional)", type: "number", min: 0, value: draft.maxDiscount, onChange: (e) => set("maxDiscount", e.target.value), placeholder: "Leave blank for no cap", helperText: "Maximum rupee discount regardless of percentage" })), _jsx(Input, { label: "Minimum Order Amount (\u20B9, optional)", type: "number", min: 0, value: draft.minPurchase, onChange: (e) => set("minPurchase", e.target.value), placeholder: "Leave blank for no minimum" }), _jsxs(Div, { children: [_jsx(Text, { size: "sm", className: CLS_SECTION_LABEL, children: "Usage Limits" }), _jsxs(Div, { layout: "grid", gap: "3", className: "grid-cols-2", children: [_jsx(Input, { label: "Total Uses", type: "number", min: 0, value: draft.totalLimit, onChange: (e) => set("totalLimit", e.target.value), placeholder: "0 = unlimited" }), _jsx(Input, { label: "Per Customer", type: "number", min: 0, value: draft.perUserLimit, onChange: (e) => set("perUserLimit", e.target.value), placeholder: "0 = unlimited" })] })] }), _jsxs(Div, { children: [_jsx(Text, { size: "sm", className: CLS_SECTION_LABEL, children: "Validity Period" }), _jsxs(Div, { layout: "grid", gap: "3", className: "grid-cols-2", children: [_jsx(Input, { label: "Start Date", type: "date", value: draft.startDate, onChange: (e) => set("startDate", e.target.value), required: true }), _jsx(Input, { label: "End Date", type: "date", value: draft.endDate, onChange: (e) => set("endDate", e.target.value), required: true })] })] }), _jsxs(Div, { children: [_jsx(Text, { size: "sm", className: CLS_SECTION_LABEL, children: "Applicability (optional)" }), _jsxs(Stack, { gap: "sm", children: [_jsxs(Div, { children: [_jsx(Text, { size: "xs", className: "mb-1 text-[var(--appkit-color-text-secondary)]", children: "Applicable products" }), _jsx(ProductInlineSelect, { scope: "store", multiple: true, value: draft.applicableProducts, onChange: (v) => set("applicableProducts", v), placeholder: "Restrict to specific products\u2026" })] }), _jsxs(Div, { children: [_jsx(Text, { size: "xs", className: "mb-1 text-[var(--appkit-color-text-secondary)]", children: "Applicable categories" }), _jsx(CategoryInlineSelect, { value: "", onChange: (id) => {
                                                         if (!id || draft.applicableCategories.includes(id))
                                                             return;
                                                         set("applicableCategories", [...draft.applicableCategories, id]);
-                                                    }, placeholder: "Add a category\u2026" }), draft.applicableCategories.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", padding: "t-xs", children: draft.applicableCategories.map((cid) => (_jsxs(Span, { layout: "inline-flex", gap: "xs", border: "strong", padding: "pill-sm", rounded: "full", surface: "muted", color: "primary", size: "xs", children: [cid, _jsx(IconButton, { type: "button", "aria-label": `Remove ${cid}`, variant: "ghost", className: "text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text)]", onClick: () => set("applicableCategories", draft.applicableCategories.filter((c) => c !== cid)), children: "\u00D7" })] }, cid))) }))] }), _jsx(Text, { size: "xs", className: "text-[var(--appkit-color-text-secondary)]", children: "Leave both empty to apply the coupon to every product in your store." })] })] }), _jsx(Row, { className: "border border-[var(--appkit-color-border)] dark:border-[var(--appkit-color-border-dark)]", padding: "inline", align: "center", gap: "3", rounded: "lg", children: _jsxs(Label, { layout: "flex", gap: "lg", className: "cursor-pointer w-full", children: [_jsx(Checkbox, { bare: true, checked: draft.isActive, onChange: (e) => set("isActive", e.target.checked), className: "h-4 w-4 rounded border-[var(--appkit-color-border)] text-[var(--appkit-color-primary)] focus:ring-[var(--appkit-color-primary)]" }), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-primary)]", weight: "medium", children: "Active" }), _jsx(Text, { size: "xs", className: "text-[var(--appkit-color-text-secondary)]", children: "Customers can apply this coupon at checkout" })] })] }) })] }), _jsx(Div, { className: "border-t border-[var(--appkit-color-border)]", padding: "inlineLg", children: _jsxs(Row, { justify: "end", gap: "3", children: [onCancel && (_jsx(Button, { type: "button", variant: "outline", onClick: onCancel, disabled: saving, children: "Cancel" })), _jsx(Button, { type: "submit", isLoading: saving, disabled: saving, children: isEdit ? "Save Changes" : "Create Coupon" })] }) })] }) }));
+                                                    }, placeholder: "Add a category\u2026" }), draft.applicableCategories.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", padding: "t-xs", children: draft.applicableCategories.map((cid) => (_jsxs(Span, { layout: "inline-flex", gap: "xs", border: "strong", padding: "pill-sm", rounded: "full", surface: "muted", color: "primary", size: "xs", children: [cid, _jsx(IconButton, { type: "button", "aria-label": `Remove ${cid}`, variant: "ghost", className: "text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text)]", onClick: () => set("applicableCategories", draft.applicableCategories.filter((c) => c !== cid)), children: "\u00D7" })] }, cid))) }))] }), _jsx(Text, { size: "xs", className: "text-[var(--appkit-color-text-secondary)]", children: "Leave both empty to apply the coupon to every product in your store." })] })] }), _jsx(Row, { className: "border border-[var(--appkit-color-border)] dark:border-[var(--appkit-color-border-dark)]", padding: "inline", align: "center", gap: "3", rounded: "lg", children: _jsxs(Label, { layout: "flex", gap: "lg", className: "cursor-pointer w-full", children: [_jsx(Checkbox, { bare: true, checked: draft.isActive, onChange: (e) => set("isActive", e.target.checked), className: "h-4 w-4 rounded border-[var(--appkit-color-border)] text-[var(--appkit-color-primary)] focus:ring-[var(--appkit-color-primary)]" }), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-primary)]", weight: "medium", children: "Active" }), _jsx(Text, { size: "xs", className: "text-[var(--appkit-color-text-secondary)]", children: "Customers can apply this coupon at checkout" })] })] }) })] }), _jsx(Div, { className: "border-t border-[var(--appkit-color-border)]", padding: "inlineLg", children: _jsxs(Row, { justify: "end", gap: "3", children: [onCancel && (_jsx(Button, { type: "button", variant: "outline", onClick: onCancel, disabled: saving, children: "Cancel" })), _jsx(Button, { type: "submit", isLoading: saving, disabled: saving, onClick: (e) => void handleSubmit(e, setFieldError), children: isEdit ? "Save Changes" : "Create Coupon" })] }) })] })) }));
 }

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

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

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

@@ -5,7 +5,7 @@ import { z } from "zod";
 import { Alert, Badge, Checkbox, Div, FormField, FormGroup, Heading, Label, Row, Stack, Text, Toggle } from "../../../ui";
 import { StackedViewShell } from "../../../ui";
 import { FormShellContext, useFormShellState, applyZodIssues, FormErrorSummary } from "../../../ui/forms";
-import { SectionForm, useSectionFormNav } from "../../shell";
+import { SectionForm, useSectionFormNav, annotate } from "../../shell";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { normalizeError } from "../../../errors/normalize";
 const __P = {
@@ -16,20 +16,44 @@ const __P = {
 // accountNumber field's helpText below), and the exact keep-existing
 // semantics live server-side; a client-side format requirement risks
 // blocking that legitimate blank-resave case.
+/**
+ * Section membership and row span live on the FIELD (W3).
+ *
+ * The `sections` array below still hand-writes this form's JSX, because its
+ * Payout Method panel is genuinely bespoke — a configured/not-configured
+ * badge, a "current UPI/bank" alert, and a UPI-vs-bank branch. What is NOT
+ * hand-written any more is which field belongs where and how wide it is:
+ * that is read off the schema, and `audit-form-field-roundtrip` (W4) can
+ * cross-check the two so they cannot drift apart.
+ *
+ * 🛑 `annotate()` must be the OUTERMOST call on each field. It keys a WeakMap
+ * by schema instance, and every zod wrapper returns a NEW instance — so
+ * `annotate(z.string(), …).optional()` silently loses the metadata and the
+ * field falls into the "advanced" fallback section. `audit-field-ui-meta`
+ * blocks that ordering.
+ */
 const payoutSettingsDraftSchema = z.object({
-    method: z.enum(["upi", "bank_transfer"]),
-    upiId: z.string(),
-    accountHolderName: z.string(),
-    accountNumber: z.string(),
-    ifscCode: z.string(),
-    bankName: z.string(),
-    accountType: z.enum(["savings", "current"]),
-    gstin: z.string(),
-    pan: z.string(),
-    businessType: z.string(),
-    autoPayout: z.boolean(),
-    minimumThreshold: z.string(),
-    emiEnabled: z.boolean(),
+    method: annotate(z.enum(["upi", "bank_transfer"]), {
+        section: "method", sectionLabel: "Payout Method", sectionRequired: true,
+        quick: true, order: 1, row: "pair",
+    }),
+    upiId: annotate(z.string(), { section: "method", quick: true, order: 2, row: "pair" }),
+    accountHolderName: annotate(z.string(), { section: "method", quick: true, order: 3, row: "full" }),
+    // Account number and IFSC read as one unit and each needs about half the
+    // width — the pairing this whole mechanism exists to make declarative
+    // instead of a bare `grid-cols-2` that is two columns wide at 320px.
+    accountNumber: annotate(z.string(), { section: "method", quick: true, order: 4, row: "pair" }),
+    ifscCode: annotate(z.string(), { section: "method", quick: true, order: 5, row: "pair" }),
+    bankName: annotate(z.string(), { section: "method", quick: true, order: 6, row: "pair" }),
+    accountType: annotate(z.enum(["savings", "current"]), { section: "method", quick: true, order: 7, row: "pair" }),
+    gstin: annotate(z.string(), { section: "tax", sectionLabel: "Tax Info", order: 1, row: "pair" }),
+    pan: annotate(z.string(), { section: "tax", order: 2, row: "pair" }),
+    businessType: annotate(z.string(), { section: "tax", order: 3, row: "pair" }),
+    autoPayout: annotate(z.boolean(), {
+        section: "preferences", sectionLabel: "Preferences", order: 1, row: "quarter",
+    }),
+    minimumThreshold: annotate(z.string(), { section: "preferences", order: 2, row: "pair" }),
+    emiEnabled: annotate(z.boolean(), { section: "preferences", order: 3, row: "quarter" }),
 }).superRefine((v, ctx) => {
     if (v.method === "upi") {
         if (!v.upiId.trim()) {