@mohasinac/appkit 4.42.0 → 4.42.2

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

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Badge, Button, Checkbox, Div, Grid, Row, Stack, Text, TextLink } from "../../../ui";
 import { MediaImage } from "../../media/MediaImage";
 import { ROW_ACTION_META, ROW_ACTION_ID } from "../../../features/products/constants/action-defs";
+import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { listingBadgeVariant } from "../../products/utils/listing-badge-variant";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
@@ -17,6 +18,27 @@ function buildHref(row) {
         return `/pre-orders/${row.id}`;
     return `/products/${row.id}`;
 }
+/*
+ * 🛑 THE DELETE BUTTONS BELOW CARRY `action`, AND THAT IS WHAT CONFIRMS THEM.
+ *
+ * They took their LABEL from `ROW_ACTION_META[ROW_ACTION_ID.DELETE]` and
+ * passed no `action` prop, so `<Button>`'s confirmation gate — which fires
+ * only when `action.confirmation` is set — never engaged. One click on a
+ * row's Delete permanently removed a PUBLISHED listing with no dialog of any
+ * kind; measured on a real seller account, the row was gone immediately and
+ * still gone after a reload.
+ *
+ * Using the registry for the label while bypassing it for the confirmation is
+ * exactly the split Rule #7 describes, on the one action where that rule says
+ * the cost is data loss. `ACTIONS.STORE["delete-listing"]` already carried the
+ * copy ("Delete listing? / This listing will be permanently removed. This
+ * action cannot be undone.") and the bulk bar already resolved it correctly;
+ * only the row path did not.
+ *
+ * `variant="ghost"` stays explicit so the row keeps its quiet styling: Button
+ * resolves the variant as `variant ?? kindDefault`, so the caller wins and the
+ * danger kind drives the dialog without turning the row button red.
+ */
 export function SellerProductsCards({ view, rows, isLoading, listingKind, selectedIds, toggle, onEdit, onDuplicate, onDelete, }) {
     const Container = view === "grid" ? Grid : Stack;
     const containerProps = view === "grid"
@@ -25,6 +47,6 @@ export function SellerProductsCards({ view, rows, isLoading, listingKind, select
     return (_jsxs(Container, { ...containerProps, children: [rows.length === 0 && !isLoading && (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)] col-span-full", size: "sm", children: listingKind !== "all" ? `No ${listingKind} listings found` : "No products listed yet" })), rows.map((row) => {
                 const isSelected = selectedIds.has(row.id);
                 const href = buildHref(row);
-                return view === "grid" ? (_jsxs(Div, { className: "group relative bg-[var(--appkit-color-surface)] overflow-hidden", shadow: "hover-md", rounded: "xl", border: isSelected ? "strong" : "default", children: [_jsx(Div, { className: "absolute top-2 left-2 z-10", children: _jsx(Checkbox, { bare: true, checked: isSelected, onChange: () => toggle(row.id), className: "h-4 w-4 rounded border-[var(--appkit-color-border)]", onClick: (e) => e.stopPropagation(), "aria-label": "Select" }) }), _jsxs(TextLink, { href: href, className: "block", children: [_jsx(Div, { className: "w-full aspect-square", children: _jsx(MediaImage, { src: row.imageUrl, alt: row.primary, size: "card" }) }), _jsxs(Stack, { className: `${__P.p3}`, gap: "xs", children: [_jsx(Text, { className: "line-clamp-1", size: "sm", weight: "medium", children: row.primary }), _jsxs(Row, { gap: "sm", children: [_jsx(Badge, { variant: listingBadgeVariant(row.listingKind), children: row.listingKind }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] line-clamp-1", size: "xs", children: row.secondary })] })] })] }), _jsxs(Row, { className: "border-t border-[var(--appkit-color-border)]", justify: "end", gap: "xs", padding: "xs", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); onEdit(row); }, "aria-label": "Edit", children: ROW_ACTION_META[ROW_ACTION_ID.EDIT].label }), _jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); onDuplicate(row); }, "aria-label": "Duplicate", children: ROW_ACTION_META[ROW_ACTION_ID.DUPLICATE].label }), onDelete && (_jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); onDelete(row); }, "aria-label": "Delete", children: ROW_ACTION_META[ROW_ACTION_ID.DELETE].label }))] })] }, row.id)) : (_jsxs(Row, { className: "bg-[var(--appkit-color-surface)] hover:bg-[var(--appkit-color-surface-raised)]", align: "center", gap: "3", rounded: "lg", padding: "inlineSm", border: isSelected ? "strong" : "default", children: [_jsx(Checkbox, { bare: true, checked: isSelected, onChange: () => toggle(row.id), className: "h-4 w-4 rounded border-[var(--appkit-color-border)]", "aria-label": "Select" }), _jsx(Div, { className: `w-12 h-12 ${__O.hidden}`, rounded: "default", children: _jsx(MediaImage, { src: row.imageUrl, alt: row.primary, size: "thumbnail" }) }), _jsxs(TextLink, { href: href, className: "flex-1 min-w-0", children: [_jsx(Text, { className: "line-clamp-1", size: "sm", weight: "medium", children: row.primary }), _jsxs(Row, { gap: "sm", children: [_jsx(Badge, { variant: listingBadgeVariant(row.listingKind), children: row.listingKind }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] line-clamp-1", size: "xs", children: row.secondary })] })] }), _jsxs(Row, { className: "flex-shrink-0", gap: "xs", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => onEdit(row), "aria-label": "Edit", children: ROW_ACTION_META[ROW_ACTION_ID.EDIT].label }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => onDuplicate(row), "aria-label": "Duplicate", children: ROW_ACTION_META[ROW_ACTION_ID.DUPLICATE].label }), onDelete && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => onDelete(row), "aria-label": "Delete", children: ROW_ACTION_META[ROW_ACTION_ID.DELETE].label }))] })] }, row.id));
+                return view === "grid" ? (_jsxs(Div, { className: "group relative bg-[var(--appkit-color-surface)] overflow-hidden", shadow: "hover-md", rounded: "xl", border: isSelected ? "strong" : "default", children: [_jsx(Div, { className: "absolute top-2 left-2 z-10", children: _jsx(Checkbox, { bare: true, checked: isSelected, onChange: () => toggle(row.id), className: "h-4 w-4 rounded border-[var(--appkit-color-border)]", onClick: (e) => e.stopPropagation(), "aria-label": "Select" }) }), _jsxs(TextLink, { href: href, className: "block", children: [_jsx(Div, { className: "w-full aspect-square", children: _jsx(MediaImage, { src: row.imageUrl, alt: row.primary, size: "card" }) }), _jsxs(Stack, { className: `${__P.p3}`, gap: "xs", children: [_jsx(Text, { className: "line-clamp-1", size: "sm", weight: "medium", children: row.primary }), _jsxs(Row, { gap: "sm", children: [_jsx(Badge, { variant: listingBadgeVariant(row.listingKind), children: row.listingKind }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] line-clamp-1", size: "xs", children: row.secondary })] })] })] }), _jsxs(Row, { className: "border-t border-[var(--appkit-color-border)]", justify: "end", gap: "xs", padding: "xs", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); onEdit(row); }, "aria-label": "Edit", children: ROW_ACTION_META[ROW_ACTION_ID.EDIT].label }), _jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); onDuplicate(row); }, "aria-label": "Duplicate", children: ROW_ACTION_META[ROW_ACTION_ID.DUPLICATE].label }), onDelete && (_jsx(Button, { variant: "ghost", size: "sm", action: ACTIONS.STORE["delete-listing"], onClick: (e) => { e.stopPropagation(); onDelete(row); }, "aria-label": "Delete", children: ROW_ACTION_META[ROW_ACTION_ID.DELETE].label }))] })] }, row.id)) : (_jsxs(Row, { className: "bg-[var(--appkit-color-surface)] hover:bg-[var(--appkit-color-surface-raised)]", align: "center", gap: "3", rounded: "lg", padding: "inlineSm", border: isSelected ? "strong" : "default", children: [_jsx(Checkbox, { bare: true, checked: isSelected, onChange: () => toggle(row.id), className: "h-4 w-4 rounded border-[var(--appkit-color-border)]", "aria-label": "Select" }), _jsx(Div, { className: `w-12 h-12 ${__O.hidden}`, rounded: "default", children: _jsx(MediaImage, { src: row.imageUrl, alt: row.primary, size: "thumbnail" }) }), _jsxs(TextLink, { href: href, className: "flex-1 min-w-0", children: [_jsx(Text, { className: "line-clamp-1", size: "sm", weight: "medium", children: row.primary }), _jsxs(Row, { gap: "sm", children: [_jsx(Badge, { variant: listingBadgeVariant(row.listingKind), children: row.listingKind }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] line-clamp-1", size: "xs", children: row.secondary })] })] }), _jsxs(Row, { className: "flex-shrink-0", gap: "xs", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => onEdit(row), "aria-label": "Edit", children: ROW_ACTION_META[ROW_ACTION_ID.EDIT].label }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => onDuplicate(row), "aria-label": "Duplicate", children: ROW_ACTION_META[ROW_ACTION_ID.DUPLICATE].label }), onDelete && (_jsx(Button, { variant: "ghost", size: "sm", action: ACTIONS.STORE["delete-listing"], onClick: () => onDelete(row), "aria-label": "Delete", children: ROW_ACTION_META[ROW_ACTION_ID.DELETE].label }))] })] }, row.id));
             })] }));
 }

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

@@ -17,7 +17,9 @@ import { SELLER_PRODUCT_STATUS_TABS } from "../../admin/constants/filter-tabs";
 import { ROUTES } from "../../../constants";
 import { normalizeListingType } from "../../products/utils/listing-type";
 import { useAvailabilityScope } from "../../products/hooks/useAvailabilityScope";
-import { toRecordArray, toRelativeDate, toStringValue } from "../hooks/useSellerListingData";
+import { toRecordArray, toStringValue } from "../hooks/useSellerListingData";
+// Defining module (Root Cause #18) — the seller-side duplicate was deleted for drift.
+import { toRelativeDate } from "../../admin/hooks/useAdminListingData";
 import { useListingTypeFlags } from "../../../react/hooks/useListingTypeFlags";
 import { ALL_LISTING_TYPES } from "../../../_internal/shared/listing-types/feature-flags";
 import { pluginFor } from "../../../_internal/shared/listing-types/_registry";
@@ -267,17 +269,40 @@ export function SellerProductsView({ onDeleteProduct, onCreateClick, }) {
                  * the UI simply never presented it.
                  */
                 const statusLabel = toStringValue(item.status, "draft");
+                /*
+                 * 🛑 PRICE AND STOCK GO IN THE VISIBLE LINE TOO — same reason as the
+                 * status note above, one field over.
+                 *
+                 * `price` was already mapped onto the row and correct, and this view
+                 * renders only `primary`, `secondary`, the type chip and the action
+                 * buttons — so it was never displayed. Measured on a real seller
+                 * account with 127 listings: ZERO rupee amounts and zero stock figures
+                 * anywhere in the list. To learn what one of their own listings costs
+                 * or how many are left, a seller had to open it.
+                 *
+                 * Those are the two numbers a seller scans for, so price leads.
+                 * `stockQuantity` was not mapped at all and is added here.
+                 *
+                 * An auction keeps its own summary (reserve / bids / ends) and is not
+                 * given a list price: for an auction the meaningful money is the
+                 * reserve and the current bid, both already in `auctionSecondary`, and
+                 * a "price" beside them would read as a third, competing figure.
+                 */
+                const stockRaw = typeof item.stockQuantity === "number" ? item.stockQuantity : null;
+                const priceLabel = kind !== "auction" && priceRaw ? `₹${priceRaw.toLocaleString("en-IN")}` : "";
+                const stockLabel = stockRaw === null ? "" : `${stockRaw} in stock`;
                 const secondaryBase = auctionSecondary || toStringValue(item.condition, "");
                 return {
                     id: toStringValue(item.id, `product-${index}`),
                     primary: toStringValue(item.title ?? item.name, "Untitled product"),
-                    secondary: [secondaryBase, statusLabel].filter(Boolean).join(" · "),
+                    secondary: [priceLabel, stockLabel, secondaryBase, statusLabel].filter(Boolean).join(" · "),
                     status: statusLabel,
                     updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
                     imageUrl: toStringValue(item.mainImage ?? item.images?.[0], undefined),
                     image: toStringValue(item.mainImage ?? item.images?.[0], undefined),
                     listingKind: kind,
                     price: priceRaw ? `₹${priceRaw.toLocaleString("en-IN")}` : "—",
+                    stock: stockLabel || "—",
                     physicalLocation: item.physicalLocation &&
                         typeof item.physicalLocation.zone === "string"
                         ? item.physicalLocation

package/dist/features/seller/hooks/useSellerListingData.d.ts

@@ -14,5 +14,4 @@ type UnknownRecord = Record<string, JsonValue>;
 export declare function toRecordArray(value: unknown): UnknownRecord[];
 export declare function toStringValue(value: unknown, fallback?: string): string;
 export declare function toCurrency(value: unknown): string;
-export declare function toRelativeDate(value: unknown): string;
 export {};

package/dist/features/seller/hooks/useSellerListingData.js

@@ -18,25 +18,23 @@ export function toCurrency(value) {
     }
     return formatCurrency(value);
 }
-export function toRelativeDate(value) {
-    const date = parseDate(value);
-    if (!date) {
-        return "-";
-    }
-    const deltaMs = Date.now() - date.getTime();
-    const minute = 60000;
-    const hour = 60 * minute;
-    const day = 24 * hour;
-    if (deltaMs < minute)
-        return "just now";
-    if (deltaMs < hour)
-        return `${Math.floor(deltaMs / minute)}m ago`;
-    if (deltaMs < day)
-        return `${Math.floor(deltaMs / hour)}h ago`;
-    if (deltaMs < 7 * day)
-        return `${Math.floor(deltaMs / day)}d ago`;
-    return date.toLocaleDateString("en-IN", { year: "numeric", month: "short", day: "numeric" });
-}
+/*
+ * 🛑 `toRelativeDate` WAS HERE AND IS GONE. Import it from
+ * `features/admin/hooks/useAdminListingData` — the defining module now, and
+ * the one 44 files already use (Root Cause #18: import from where a symbol is
+ * defined, never from a convenience copy).
+ *
+ * This copy had drifted from that one and the drift was live: for a FUTURE
+ * date, `deltaMs` is negative, so `deltaMs < minute` matched and this version
+ * answered **"just now"** while the admin version answered **"1m ago"** — two
+ * different wrong answers to "when is this deadline", depending on which file
+ * a view happened to import from. The admin one is fixed to say "in 48h"; a
+ * second implementation is how that fix would have been half-applied.
+ *
+ * The three sibling helpers below are also duplicated there. They are left
+ * alone deliberately: none of them is wrong, and collapsing them is an import
+ * rewrite across both feature trees rather than a bug fix.
+ */
 function parseDate(value) {
     if (value instanceof Date)
         return value;

package/dist/features/shell/SectionForm.js

@@ -10,6 +10,9 @@ import { useFormBottomActions } from "../layout/hooks/useFormBottomActions";
 import { useSectionState } from "../account/hooks/useCollapsedSections";
 import { FormSchemaContext } from "./FormShell";
 import { EASE_OUT_MS } from "../../tokens/motion";
+/* Stable identity — a fresh `{}` per render would break any memo a section
+ * render does on its `errors` prop. */
+const EMPTY_ERRORS = {};
 /** Sections in render order: required first, original order preserved within each group. */
 export function orderSections(sections) {
     return [...sections.filter((s) => s.required), ...sections.filter((s) => !s.required)];
@@ -118,6 +121,27 @@ export function SectionForm({ sections, values, onChange, onSubmit, submitLabel
      * a caller renders it outside a provider, which is legitimate.
      */
     const shellCtx = useContext(FormShellContext);
+    /*
+     * 🛑 Has the user ASKED to save yet?
+     *
+     * Root Cause #74 gated `FormErrorSummary` on this and stopped there. The
+     * per-section "N issues" badges below were never gated, and the eleven views
+     * that mount SectionForm all call `validate(draft)` from a MOUNT EFFECT —
+     * which that entry is explicit must STAY, because it is what keeps the errors
+     * current as the user fixes fields after a failed save. So `fieldErrors` is
+     * fully populated on first paint, and "Add New Address" opened reading
+     * "3 issues" and "4 issues" in red against a form nobody had typed into.
+     *
+     * Gate the DISPLAY, never the computation — deleting the mount-effect
+     * validate is the obvious repair and it is the wrong one.
+     *
+     * Local state rather than `shellCtx.submitAttempted` alone: SectionForm owns
+     * the submit button, so it always knows, whereas `shellCtx` is legitimately
+     * null when a caller renders it outside a provider (see above). Both are
+     * consulted, so a provider-level attempt from the pinned mobile bar counts too.
+     */
+    const [attemptedHere, setAttemptedHere] = useState(false);
+    const submitAttempted = attemptedHere || shellCtx?.submitAttempted === true;
     const [fieldErrors, setFieldErrors] = useState({});
     const [uncontrolledOpenIds, setUncontrolledOpenIds] = useState(() => orderSections(sections).filter((s) => s.required).map((s) => s.id));
     /*
@@ -251,6 +275,7 @@ export function SectionForm({ sections, values, onChange, onSubmit, submitLabel
      * identically whichever the user presses.
      */
     const handleSubmit = useCallback(() => {
+        setAttemptedHere(true);
         shellCtx?.markSubmitAttempted();
         /*
          * Reveal the FIRST offending section — only the first. Expanding all five
@@ -328,9 +353,15 @@ export function SectionForm({ sections, values, onChange, onSubmit, submitLabel
                      * <button><div><span><div> — invalid, since a button may only
                      * contain phrasing content. Same variant props, legal element.
                      */
-                    _jsxs(Row, { as: "span", align: "center", gap: "xs", className: "min-w-0", children: [_jsx(Span, { weight: "semibold", size: "sm", children: section.heading ?? section.label }), isRequired && _jsx(Span, { size: "xs", color: "muted", children: "Required" })] }), isCollapsed: isCollapsed, collapsible: !isRequired, onToggle: () => toggle(section.id), keepMounted: section.keepMounted, renderHeaderExtra: errorCount > 0
+                    _jsxs(Row, { as: "span", align: "center", gap: "xs", className: "min-w-0", children: [_jsx(Span, { weight: "semibold", size: "sm", children: section.heading ?? section.label }), isRequired && _jsx(Span, { size: "xs", color: "muted", children: "Required" })] }), isCollapsed: isCollapsed, collapsible: !isRequired, onToggle: () => toggle(section.id), keepMounted: section.keepMounted, renderHeaderExtra: 
+                    /* Only after the user has tried to save — see `submitAttempted` above. */
+                    submitAttempted && errorCount > 0
                         ? () => (_jsxs(Badge, { variant: "danger", children: [errorCount, " ", errorCount === 1 ? "issue" : "issues"] }))
-                        : undefined, children: section.render({ values, onChange: handleFieldChange, errors: fieldErrors }) }, section.id));
+                        : undefined, children: section.render({
+                        values,
+                        onChange: handleFieldChange,
+                        errors: submitAttempted ? fieldErrors : EMPTY_ERRORS,
+                    }) }, section.id));
             }), !hideActions && (
             /*
              * `justify="between"` so a destructive action sits opposite Save

package/dist/features/tester/seed-data/_happy-path.d.ts

@@ -0,0 +1,23 @@
+import type { TesterCaseRole } from "../schemas";
+interface HappyPathCase {
+    key: string;
+    label: string;
+    /** Every role the case affects; per-role detail goes inline in the expectations. */
+    roles: TesterCaseRole[];
+    startPage?: string;
+    steps: string[];
+    inputs?: Record<string, string | number | boolean>;
+    expectedBehaviour: string;
+    expectedUiState: string;
+    expectedData?: Record<string, string | number | boolean>;
+    endResult: string;
+    href?: string;
+}
+interface HappyPathPage {
+    pageKey: string;
+    pageLabel: string;
+    href?: string;
+    cases: HappyPathCase[];
+}
+export declare const happyPathPages: HappyPathPage[];
+export {};