@mohasinac/appkit 4.30.19 → 4.31.0

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

@@ -1,126 +1,6 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Badge, sortBy } from "@mohasinac/appkit/client";
-import { useState, useCallback } from "react";
-import { useEntityDelete } from "../../../react/hooks/useEntityDelete";
-import { ConfirmDeleteModal, RowActionMenu, Text } from "../../../ui";
-import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
-import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
-import { ROUTES } from "../../../constants/index";
-import { toRecordArray, toRelativeDate, toCurrency, toStringValue, } from "../../admin/hooks/useAdminListingData";
-import { DataListingView } from "../../admin/components/DataListingView";
-import { SELLER_BULK_ACTIONS, ROW_ACTION_META } from "../../products/constants/action-defs";
-import { useAvailabilityScope } from "../../products/hooks/useAvailabilityScope";
-const LISTING_TYPES = ["classified"];
-const COLUMNS = [
-    { key: "title", header: "Listing", render: (row) => _jsx(Text, { size: "sm", weight: "medium", children: row.title }) },
-    { key: "price", header: "Price", render: (row) => _jsx(Text, { className: "tabular-nums", size: "sm", children: row.price }) },
-    {
-        key: "city",
-        header: "Location",
-        render: (row) => (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: row.city || "—" })),
-    },
-    {
-        key: "acceptsShipping",
-        header: "Shipping",
-        render: (row) => (_jsx(Badge, { variant: row.acceptsShipping ? "active" : "inactive", size: "xs", children: row.acceptsShipping ? "Ships" : "Meetup only" })),
-    },
-    {
-        key: "status",
-        header: "Status",
-        render: (row) => (_jsx(Badge, { variant: row.status === "active" ? "active" : "inactive", size: "xs", className: "capitalize", children: row.status })),
-    },
-    {
-        key: "createdAt",
-        header: "Created",
-        render: (row) => (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: row.createdAt })),
-    },
-];
-export function SellerClassifiedView({ onCreateClick, onEditClick, onDelete, onBulkDelete, }) {
-    const [deleteTargetId, setDeleteTargetId] = useState(null);
-    const { deletingId, handleDelete: performDelete } = useEntityDelete({
-        endpoint: SELLER_ENDPOINTS.PRODUCT_BY_ID,
-        deleteFn: onDelete,
-        successMessage: "Listing deleted.",
-        fetchOptions: { credentials: "include" },
-    });
-    const handleDelete = useCallback(async (id) => {
-        await performDelete(id);
-        setDeleteTargetId(null);
-    }, [performDelete]);
-    const handleEdit = useCallback((id) => {
-        if (onEditClick)
-            onEditClick(id);
-        else
-            window.location.href = String(ROUTES.STORE.CLASSIFIED_EDIT(id));
-    }, [onEditClick]);
-    const handleCreate = useCallback(() => {
-        if (onCreateClick)
-            onCreateClick();
-        else
-            window.location.href = String(ROUTES.STORE.CLASSIFIED_NEW);
-    }, [onCreateClick]);
-    const scope = useAvailabilityScope(LISTING_TYPES);
-    const config = {
-        portal: "seller",
-        title: "Classified",
-        searchPlaceholder: "Search classified listings...",
-        emptyLabel: "No classified listings yet — post your first buy/sell/trade ad",
-        filterKeys: [],
-        defaultSort: sortBy("createdAt", "DESC"),
-        queryKey: ["seller", "classified"],
-        endpoint: SELLER_ENDPOINTS.PRODUCTS,
-        sortOptions: [
-            { value: sortBy("createdAt", "DESC"), label: "Newest" },
-            { value: sortBy("createdAt", "ASC"), label: "Oldest" },
-            { value: "title", label: "Name A–Z" },
-            { value: sortBy("price", "ASC"), label: "Price: Low–High" },
-            { value: sortBy("price", "DESC"), label: "Price: High–Low" },
-        ],
-        columns: COLUMNS,
-        mapRows: (response) => toRecordArray(response.products).map((item, index) => {
-            const classified = (item.classified ?? {});
-            const meetupArea = (classified.meetupArea ?? {});
-            return {
-                id: toStringValue(item.id, `classified-${index}`),
-                title: toStringValue(item.productTitle ?? item.title, "Untitled"),
-                price: toCurrency(item.price),
-                city: toStringValue(meetupArea.city ?? classified.city, ""),
-                acceptsShipping: Boolean(classified.acceptsShipping),
-                status: toStringValue(item.status, "draft"),
-                createdAt: toRelativeDate(item.createdAt),
-            };
-        }),
-        getTotal: (response, mappedRows) => typeof response.meta?.total === "number"
-            ? response.meta.total
-            : mappedRows.length,
-        buildFilters: () => "listingType==classified",
-        buildExtraParams: () => scope.extraParams,
-        renderAboveContent: scope.renderAboveContent,
-        primaryAction: { label: "New Classified", onClick: () => handleCreate() },
-        // Mirrors the "Edit" row action below so table rows and cards both navigate on click.
-        onRowClick: (row) => handleEdit(row.id),
-        // Rule #7: bulk-action array sourced from the SELLER_BULK_ACTIONS preset.
-        buildBulkActions: onBulkDelete
-            ? (selection) => SELLER_BULK_ACTIONS.classified.map((id) => ({
-                id,
-                label: ROW_ACTION_META[id].label,
-                destructive: ROW_ACTION_META[id].destructive,
-                onClick: async () => {
-                    await onBulkDelete(selection.selectedIds);
-                    selection.clearSelection();
-                },
-            }))
-            : 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,
-                },
-            ] })),
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), deleteTargetId && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Classified Listing", message: "Are you sure you want to delete this classified listing? This cannot be undone.", onConfirm: () => handleDelete(deleteTargetId), onClose: () => setDeleteTargetId(null), isDeleting: deletingId === deleteTargetId }))] }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SellerListingTypeView, } from "./SellerListingTypeView";
+export function SellerClassifiedView(props) {
+    return _jsx(SellerListingTypeView, { type: "classified", ...props });
 }

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

@@ -1,4 +1,25 @@
+/**
+ * SellerCouponEditorView — sectionised 2026-08-30.
+ *
+ * ## The schema ran and could not be seen
+ *
+ * Unusually for this sweep, `sellerCouponFormSchema` was genuinely parsed on
+ * submit. What it could not do was report: every control was a raw `<Input>`
+ * with **no `name`**, so `applyZodIssues` wrote errors keyed on schema paths
+ * that no control on the page displayed. A percentage over 100 produced a line
+ * in `FormErrorSummary` and nothing at all on the field that caused it.
+ *
+ * Generating the controls from the schema is what fixes that: the field name
+ * IS the schema key, by construction.
+ *
+ * The local error banner is gone too. It carried two different kinds of
+ * failure — schema issues (already listed by `FormErrorSummary`, so a second
+ * copy) and the caller's save error (which has no field to land on, and so is
+ * a toast). One surface each.
+ */
+import React from "react";
 export interface CouponEditorDraft {
+    [key: string]: unknown;
     code: string;
     type: "percentage" | "fixed" | "free_shipping";
     value: string;
@@ -18,4 +39,4 @@ export interface SellerCouponEditorViewProps {
     onSave: (draft: CouponEditorDraft, couponId?: string) => Promise<void>;
     onCancel?: () => void;
 }
-export declare function SellerCouponEditorView({ couponId, initial, onSave, onCancel, }: SellerCouponEditorViewProps): import("react").JSX.Element;
+export declare function SellerCouponEditorView({ couponId, initial, onSave, onCancel, }: SellerCouponEditorViewProps): React.JSX.Element;

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

@@ -1,24 +1,38 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { Badge, Button, Checkbox, Div, Form, Heading, IconButton, Input, Label, Row, Select, Span, Stack, Text } from "../../../ui";
-import { ProductInlineSelect } from "./ProductInlineSelect";
-import { CategoryInlineSelect } from "./CategoryInlineSelect";
+/**
+ * SellerCouponEditorView — sectionised 2026-08-30.
+ *
+ * ## The schema ran and could not be seen
+ *
+ * Unusually for this sweep, `sellerCouponFormSchema` was genuinely parsed on
+ * submit. What it could not do was report: every control was a raw `<Input>`
+ * with **no `name`**, so `applyZodIssues` wrote errors keyed on schema paths
+ * that no control on the page displayed. A percentage over 100 produced a line
+ * in `FormErrorSummary` and nothing at all on the field that caused it.
+ *
+ * Generating the controls from the schema is what fixes that: the field name
+ * IS the schema key, by construction.
+ *
+ * The local error banner is gone too. It carried two different kinds of
+ * failure — schema issues (already listed by `FormErrorSummary`, so a second
+ * copy) and the caller's save error (which has no field to land on, and so is
+ * a toast). One surface each.
+ */
+import React from "react";
+import { Badge, Div, Heading, Row, Stack, useToast } from "../../../ui";
 import { normalizeError } from "../../../errors/normalize";
-import { FormErrorSummary, applyZodIssues } from "../../../ui/forms";
+import { toUserMessage } from "../../../errors/error-display-map";
+import { FieldInput, FormErrorSummary, applyZodIssues } from "../../../ui/forms";
+import { FormShellContext, useFormShellState } from "../../../ui/forms/FormShell";
+import { buildSectionsFromSchema, visibleValues } from "../../shell/build-sections";
+import { SectionForm, useSectionFormNav } from "../../shell/SectionForm";
 import { sellerCouponFormSchema } from "../schemas/coupon-form";
+import { ProductInlineSelect } from "./ProductInlineSelect";
+import { CategoryChipPicker } from "./CategoryChipPicker";
 const __O = {
     hidden: "overflow-hidden",
 };
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-const CLS_SECTION_LABEL = "font-medium text-[var(--appkit-color-text-secondary)] mb-3";
-const TYPE_OPTIONS = [
-    { value: "percentage", label: "Percentage off (e.g. 10%)" },
-    { value: "fixed", label: "Fixed amount off (e.g. ₹50)" },
-    { value: "free_shipping", label: "Free shipping" },
-];
 const EMPTY_DRAFT = {
     code: "",
     type: "percentage",
@@ -33,49 +47,81 @@ const EMPTY_DRAFT = {
     applicableProducts: [],
     applicableCategories: [],
 };
-// ---------------------------------------------------------------------------
-// Component
-// ---------------------------------------------------------------------------
+const TYPE_OPTIONS = [
+    { value: "percentage", label: "Percentage off (e.g. 10%)" },
+    { value: "fixed", label: "Fixed amount off (e.g. ₹50)" },
+    { value: "free_shipping", label: "Free shipping" },
+];
 export function SellerCouponEditorView({ couponId, initial, onSave, onCancel, }) {
-    const [draft, setDraft] = useState({ ...EMPTY_DRAFT, ...initial });
-    const [saving, setSaving] = useState(false);
-    const [error, setError] = useState(null);
-    const set = (key, value) => setDraft((d) => ({ ...d, [key]: value }));
-    const handleSubmit = async (e, setFieldError) => {
-        e.preventDefault();
-        // 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);
+    const isEdit = Boolean(couponId);
+    const { showToast } = useToast();
+    const [draft, setDraft] = React.useState({
+        ...EMPTY_DRAFT,
+        ...initial,
+    });
+    const [saving, setSaving] = React.useState(false);
+    const patch = (partial) => setDraft((prev) => Object.assign({}, prev, partial));
+    const sections = React.useMemo(() => buildSectionsFromSchema(sellerCouponFormSchema, {
+        options: { type: TYPE_OPTIONS },
+        renderers: {
+            /*
+             * A code identifies the coupon to customers who already have it, so
+             * it is fixed after creation — a prop-driven hide, which is a
+             * `renderer` rather than a `when`: predicates see the draft only.
+             */
+            code: ({ values, onChange, errors }) => (_jsx(FieldCode, { value: values.code, error: errors.code, disabled: isEdit, onChange: (v) => onChange({ code: v }) })),
+            applicableProducts: ({ values, onChange }) => (_jsx(ProductInlineSelect, { scope: "store", multiple: true, value: values.applicableProducts, onChange: (ids) => onChange({ applicableProducts: ids }), placeholder: "Restrict to specific products\u2026" })),
+            applicableCategories: ({ values, onChange }) => (_jsx(CategoryChipPicker, { selected: values.applicableCategories, onSelectedChange: (next) => onChange({ applicableCategories: next }), emptyHint: "Leave both empty to apply the coupon to every product in your store." })),
+        },
+    }), [isEdit]);
+    const nav = useSectionFormNav(sections, draft, { scope: "store:coupon-editor" });
+    const { shellCtx, setFieldError, clearErrors } = useFormShellState(sellerCouponFormSchema, {
+        sections: nav.sectionMeta,
+        onGoToSection: nav.goToSection,
+        fieldToSectionIndex: nav.fieldToSectionIndex,
+    });
+    const handleSubmit = async () => {
+        clearErrors();
+        /*
+         * 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.
+         */
+        const parsed = sellerCouponFormSchema.safeParse(visibleValues(sellerCouponFormSchema, draft));
         if (!parsed.success) {
-            if (setFieldError) {
-                applyZodIssues(parsed.error.issues, setFieldError);
-            }
-            else {
-                setError(parsed.error.issues[0]?.message ?? "Please check the form.");
-            }
+            applyZodIssues(parsed.error.issues, setFieldError);
             return;
         }
-        setError(null);
         setSaving(true);
         try {
             await onSave(draft, couponId);
         }
         catch (err) {
-            void normalizeError(err);
-            setError(err.message ?? "Failed to save coupon");
+            const normalized = normalizeError(err);
+            // The CODE, never the thrown message. `err.message` is written for a
+            // developer, and rendering it is how a Node require stack ended up inside
+            // the bid modal (Root Cause #86). `toUserMessage` terminates in a
+            // constant, so the authored sentence below is all a user can ever see.
+            showToast(toUserMessage(normalized.code, undefined, {
+                fallback: "Could not save the coupon. Try again.",
+            }), "error");
         }
         finally {
             setSaving(false);
         }
     };
-    const isEdit = Boolean(couponId);
-    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, onClick: (e) => void handleSubmit(e, setFieldError), children: isEdit ? "Save Changes" : "Create Coupon" })] }) })] })) }));
+    return (_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" }))] }) }), _jsx(Stack, { gap: "5", padding: "lg", children: _jsxs(FormShellContext.Provider, { value: shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: draft, onChange: patch, onSubmit: () => void handleSubmit(), schema: sellerCouponFormSchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, isLoading: saving, submitLabel: isEdit ? "Save changes" : "Create coupon", onCancel: onCancel, cancelLabel: "Cancel" })] }) })] }));
+}
+/**
+ * The coupon code input.
+ *
+ * Its own component rather than an inline renderer for the DEEP_NESTING reason
+ * — and because the uppercase-and-strip-spaces normalisation is a rule about
+ * the field, not about this form.
+ */
+function FieldCode({ value, error, disabled, onChange, }) {
+    return (_jsx(FieldInput, { name: "code", label: "Coupon code", required: true, disabled: disabled, value: value, error: error, placeholder: "e.g. WELCOME10", hint: disabled
+            ? "A code cannot change once customers have it."
+            : "Customers enter this at checkout.", onChange: (v) => onChange(v.toUpperCase().replace(/\s+/g, "")) }));
 }

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

@@ -1,8 +1,15 @@
+/**
+ * SellerDigitalCodesView — seller browse/manage of digital code listings.
+ *
+ * A named wrapper, kept so the page, the barrel and every existing import path
+ * stay unchanged. All behaviour is `SellerListingTypeView`; everything this
+ * type does differently is one entry in `SELLER_LISTING_TYPE_SPECS`.
+ *
+ * This file was 213 lines of a component that four siblings also contained
+ * verbatim — see that file's header for why the duplication mattered rather
+ * than merely being untidy.
+ */
 import React from "react";
-export interface SellerDigitalCodesViewProps {
-    onCreateClick?: () => void;
-    onEditClick?: (id: string) => void;
-    onDelete?: (id: string) => Promise<void>;
-    onBulkDelete?: (ids: string[]) => Promise<void>;
-}
-export declare function SellerDigitalCodesView({ onCreateClick, onEditClick, onDelete, onBulkDelete, }: SellerDigitalCodesViewProps): React.JSX.Element;
+import { type SellerListingTypeViewProps } from "./SellerListingTypeView";
+export type SellerDigitalCodesViewProps = SellerListingTypeViewProps;
+export declare function SellerDigitalCodesView(props: SellerDigitalCodesViewProps): React.JSX.Element;

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

@@ -1,128 +1,6 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { sortBy } from "@mohasinac/appkit/client";
-import { useState, useCallback } from "react";
-import { useEntityDelete } from "../../../react/hooks/useEntityDelete";
-import { Badge, ConfirmDeleteModal, RowActionMenu, Span, Text } from "../../../ui";
-import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
-import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
-import { ROUTES } from "../../../constants/index";
-import { toRecordArray, toRelativeDate, toCurrency, toStringValue, } from "../../admin/hooks/useAdminListingData";
-import { DataListingView } from "../../admin/components/DataListingView";
-import { SELLER_BULK_ACTIONS, ROW_ACTION_META } from "../../products/constants/action-defs";
-import { useAvailabilityScope } from "../../products/hooks/useAvailabilityScope";
-const LISTING_TYPES = ["digital-code"];
-const COLUMNS = [
-    { key: "title", header: "Product", render: (row) => _jsx(Text, { size: "sm", weight: "medium", children: row.title }) },
-    { key: "price", header: "Price", render: (row) => _jsx(Text, { className: "tabular-nums", size: "sm", children: row.price }) },
-    {
-        key: "codePoolSize",
-        header: "Total Codes",
-        render: (row) => (_jsx(Text, { className: "tabular-nums", size: "sm", children: row.codePoolSize !== null ? row.codePoolSize : "—" })),
-    },
-    {
-        key: "codesAvailable",
-        header: "Available",
-        render: (row) => (_jsx(Text, { className: "tabular-nums", size: "sm", children: row.codesAvailable !== null ? row.codesAvailable : "—" })),
-    },
-    {
-        key: "deliveryMethod",
-        header: "Delivery",
-        render: (row) => (_jsx(Span, { layout: "inline-flex", size: "xs", weight: "medium", rounded: "full", padding: "pill-xs", surface: "subtle", color: "muted", transform: "capitalize", children: row.deliveryMethod.replace(/-/g, " ") })),
-    },
-    {
-        key: "status",
-        header: "Status",
-        render: (row) => (_jsx(Badge, { variant: row.status === "active" ? "active" : "inactive", size: "xs", className: "capitalize", children: row.status })),
-    },
-    {
-        key: "createdAt",
-        header: "Created",
-        render: (row) => (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: row.createdAt })),
-    },
-];
-export function SellerDigitalCodesView({ onCreateClick, onEditClick, onDelete, onBulkDelete, }) {
-    const [deleteTargetId, setDeleteTargetId] = useState(null);
-    const { deletingId, handleDelete: performDelete } = useEntityDelete({
-        endpoint: SELLER_ENDPOINTS.PRODUCT_BY_ID,
-        deleteFn: onDelete,
-        successMessage: "Code deleted.",
-        fetchOptions: { credentials: "include" },
-    });
-    const handleDelete = useCallback(async (id) => {
-        await performDelete(id);
-        setDeleteTargetId(null);
-    }, [performDelete]);
-    const handleEdit = useCallback((id) => {
-        if (onEditClick)
-            onEditClick(id);
-        else
-            window.location.href = String(ROUTES.STORE.DIGITAL_CODES_EDIT(id));
-    }, [onEditClick]);
-    const handleCreate = useCallback(() => {
-        if (onCreateClick)
-            onCreateClick();
-        else
-            window.location.href = String(ROUTES.STORE.DIGITAL_CODES_NEW);
-    }, [onCreateClick]);
-    const scope = useAvailabilityScope(LISTING_TYPES);
-    const config = {
-        portal: "seller",
-        title: "Digital Codes",
-        searchPlaceholder: "Search digital code listings...",
-        emptyLabel: "No digital code listings yet",
-        filterKeys: [],
-        defaultSort: sortBy("createdAt", "DESC"),
-        queryKey: ["seller", "digital-codes"],
-        endpoint: SELLER_ENDPOINTS.PRODUCTS,
-        sortOptions: [
-            { value: sortBy("createdAt", "DESC"), label: "Newest" },
-            { value: sortBy("createdAt", "ASC"), label: "Oldest" },
-            { value: "title", label: "Name A–Z" },
-            { value: sortBy("price", "ASC"), label: "Price: Low–High" },
-        ],
-        columns: COLUMNS,
-        mapRows: (response) => toRecordArray(response.products).map((item, index) => {
-            const dc = (item.digitalCode ?? {});
-            return {
-                id: toStringValue(item.id, `dc-${index}`),
-                title: toStringValue(item.productTitle ?? item.title, "Untitled"),
-                price: toCurrency(item.price),
-                codePoolSize: typeof dc.codePoolSize === "number" ? dc.codePoolSize : null,
-                codesAvailable: typeof dc.codesAvailable === "number" ? dc.codesAvailable : null,
-                deliveryMethod: toStringValue(dc.codeDeliveryMethod, "auto-claim"),
-                status: toStringValue(item.status, "draft"),
-                createdAt: toRelativeDate(item.createdAt),
-            };
-        }),
-        getTotal: (response, mappedRows) => typeof response.meta?.total === "number" ? response.meta.total : mappedRows.length,
-        buildFilters: () => "listingType==digital-code",
-        buildExtraParams: () => scope.extraParams,
-        renderAboveContent: scope.renderAboveContent,
-        primaryAction: { label: "New Digital Code", onClick: () => handleCreate() },
-        // Mirrors the "Edit" row action below so table rows and cards both navigate on click.
-        onRowClick: (row) => handleEdit(row.id),
-        // Rule #7: bulk-action array sourced from the SELLER_BULK_ACTIONS preset.
-        buildBulkActions: onBulkDelete
-            ? (selection) => SELLER_BULK_ACTIONS.digitalCodes.map((id) => ({
-                id,
-                label: ROW_ACTION_META[id].label,
-                destructive: ROW_ACTION_META[id].destructive,
-                onClick: async () => {
-                    await onBulkDelete(selection.selectedIds);
-                    selection.clearSelection();
-                },
-            }))
-            : 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,
-                },
-            ] })),
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), deleteTargetId && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Digital Code Listing", message: "Are you sure you want to delete this digital code listing? This cannot be undone.", onConfirm: () => handleDelete(deleteTargetId), onClose: () => setDeleteTargetId(null), isDeleting: deletingId === deleteTargetId }))] }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SellerListingTypeView, } from "./SellerListingTypeView";
+export function SellerDigitalCodesView(props) {
+    return _jsx(SellerListingTypeView, { type: "digital-code", ...props });
 }

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

@@ -0,0 +1,66 @@
+import React from "react";
+import type { JsonValue } from "../../../schemas/types";
+import type { AdminTableColumn } from "../../admin/types";
+import { SELLER_BULK_ACTIONS } from "../../products/constants/action-defs";
+/**
+ * The shared row, plus whatever a spec's `extraFields` adds.
+ *
+ * Extra values are display STRINGS, deliberately — every per-type column in the
+ * five originals rendered text, a pill or a badge derived from one value, and a
+ * string keeps the row type non-generic so the columns array needs no type
+ * parameter threaded through five call sites.
+ */
+export interface SellerListingRow {
+    [key: string]: string;
+    id: string;
+    title: string;
+    price: string;
+    status: string;
+    createdAt: string;
+}
+export interface SellerListingTypeSpec {
+    /** Seller-side edit route. The plugin registry carries only PUBLIC routes. */
+    editRoute: (id: string) => string;
+    /** Seller-side "create new" route. */
+    newRoute: string;
+    /** Primary CTA label — not derivable ("New Art Print" vs "New Live Item"). */
+    createLabel: string;
+    /** Which `SELLER_BULK_ACTIONS` preset backs the bulk bar. */
+    bulkKey: keyof typeof SELLER_BULK_ACTIONS;
+    /** What this type calls one of its listings in the delete dialog. */
+    deleteLabel: string;
+    searchPlaceholder: string;
+    emptyLabel: string;
+    /** Heading override; defaults to the plugin's `pluralLabel`. */
+    title?: string;
+    /** Header for the first column. Defaults to "Listing". */
+    titleHeader?: string;
+    /** Header for the last column. Defaults to "Created". */
+    createdHeader?: string;
+    /** Toast on a successful delete. Defaults to "Listing deleted." */
+    deleteSuccess?: string;
+    /** Per-type row values, read off the raw document. */
+    extraFields?: (item: Record<string, JsonValue>) => Record<string, string>;
+    /** Columns inserted between Price and Status. */
+    extraColumns?: AdminTableColumn<SellerListingRow>[];
+}
+/**
+ * Everything that genuinely differs between the five, in one place.
+ *
+ * A `Record<…, SellerListingTypeSpec>` rather than a `Partial`: a key here is a
+ * deliberate claim that this type has a dedicated seller browse page, and the
+ * type union is deliberately the narrow set of five rather than `ListingType`,
+ * because standard / auction / pre-order / prize-draw do NOT have one — their
+ * store routes redirect into the multi-type `SellerProductsView`.
+ */
+export type SellerListingTypeKey = "art" | "stickers" | "classified" | "digital-code" | "live";
+export declare const SELLER_LISTING_TYPE_SPECS: Record<SellerListingTypeKey, SellerListingTypeSpec>;
+export interface SellerListingTypeViewProps {
+    onCreateClick?: () => void;
+    onEditClick?: (id: string) => void;
+    onDelete?: (id: string) => Promise<void>;
+    onBulkDelete?: (ids: string[]) => Promise<void>;
+}
+export declare function SellerListingTypeView({ type, onCreateClick, onEditClick, onDelete, onBulkDelete, }: SellerListingTypeViewProps & {
+    type: SellerListingTypeKey;
+}): React.JSX.Element;