@mohasinac/appkit 4.43.0 → 4.45.0

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

@@ -2,12 +2,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { z } from "zod";
-import { Alert, Badge, Checkbox, Div, FormField, FormGroup, Heading, Label, Row, Stack, Text, Toggle } from "../../../ui";
-import { StackedViewShell } from "../../../ui";
-import { FormShellContext, useFormShellState, applyZodIssues, FormErrorSummary } from "../../../ui/forms";
-import { SectionForm, useSectionFormNav, annotate } from "../../shell";
-import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
-import { normalizeError } from "../../../errors/normalize";
+import { Alert, Badge, Checkbox, Div, FormField, FormGroup, Heading, Label, Row, Span, Stack, Text, Toggle } from "../../../ui/index.js";
+import { StackedViewShell } from "../../../ui/index.js";
+import { FormShellContext, useFormShellState, applyZodIssues, FormErrorSummary } from "../../../ui/forms/index.js";
+import { SectionForm, useSectionFormNav, annotate } from "../../shell/index.js";
+import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints.js";
+import { normalizeError } from "../../../errors/normalize.js";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
 };
@@ -54,6 +54,32 @@ const payoutSettingsDraftSchema = z.object({
     }),
     minimumThreshold: annotate(z.string(), { section: "preferences", order: 2, row: "pair" }),
     emiEnabled: annotate(z.boolean(), { section: "preferences", order: 3, row: "quarter" }),
+    /*
+     * How the seller types prices. Lives in PAYOUT settings, not the store
+     * profile, because payout is what it actually changes: at 5% a ₹999
+     * inclusive listing pays out ₹951.43, while the same number typed ex-tax is
+     * stored as ₹1,048.95 and pays out ₹999.00.
+     *
+     * 🛑 It does NOT re-price existing listings — the gross-up happens at write
+     * time — so the label has to say so, or a seller flips it and assumes their
+     * catalogue moved.
+     */
+    pricesIncludeGst: annotate(z.boolean(), { section: "preferences", order: 4, row: "quarter" }),
+    /*
+     * ── C5e, tier 2 of three ─────────────────────────────────────────────────
+     *
+     * Whether this seller agrees to be held to each buyer protection. Alongside
+     * payout settings on purpose: supporting a cover means genuine claims are
+     * charged back to this seller, so it is a payout consequence, not a profile
+     * decoration.
+     *
+     * 🛑 Both default OFF and that is deliberate — see StoreDocument. The
+     * copy below has to say what declining COSTS, because a buyer sees a risk
+     * notice on every listing either way; a seller who does not know that will
+     * read the default as neutral.
+     */
+    supportsShippingProtection: annotate(z.boolean(), { section: "preferences", order: 5, row: "quarter" }),
+    supportsSaleProtection: annotate(z.boolean(), { section: "preferences", order: 6, row: "quarter" }),
 }).superRefine((v, ctx) => {
     if (v.method === "upi") {
         if (!v.upiId.trim()) {
@@ -89,6 +115,11 @@ const DEFAULT_DRAFT = {
     autoPayout: true,
     minimumThreshold: "",
     emiEnabled: false,
+    // Inclusive is the documented default — see StoreDocument.pricesIncludeGst.
+    pricesIncludeGst: true,
+    // OFF by default — matches StoreDocument, and absence must read as declined.
+    supportsShippingProtection: false,
+    supportsSaleProtection: false,
 };
 export function SellerPayoutSettingsView({ apiBase = SELLER_ENDPOINTS.PAYOUT_SETTINGS }) {
     const [draft, setDraft] = useState(DEFAULT_DRAFT);
@@ -119,6 +150,10 @@ export function SellerPayoutSettingsView({ apiBase = SELLER_ENDPOINTS.PAYOUT_SET
                     ? String(res.data.preferences.minimumThreshold)
                     : "",
                 emiEnabled: res?.data?.emiEnabled ?? false,
+                // Absent means inclusive, matching the schema default exactly.
+                pricesIncludeGst: res?.data?.pricesIncludeGst ?? true,
+                supportsShippingProtection: res?.data?.supportsShippingProtection ?? false,
+                supportsSaleProtection: res?.data?.supportsSaleProtection ?? false,
             });
         })
             .catch(console.error)
@@ -146,6 +181,9 @@ export function SellerPayoutSettingsView({ apiBase = SELLER_ENDPOINTS.PAYOUT_SET
             const body = {
                 ...methodFields,
                 emiEnabled: draft.emiEnabled,
+                pricesIncludeGst: draft.pricesIncludeGst,
+                supportsShippingProtection: draft.supportsShippingProtection,
+                supportsSaleProtection: draft.supportsSaleProtection,
                 taxInfo: {
                     gstin: draft.gstin.trim(),
                     pan: draft.pan.trim(),
@@ -212,8 +250,8 @@ export function SellerPayoutSettingsView({ apiBase = SELLER_ENDPOINTS.PAYOUT_SET
         {
             id: "preferences",
             label: "Preferences",
-            fields: ["autoPayout", "minimumThreshold", "emiEnabled"],
-            render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Payout Preferences" }), _jsx(Toggle, { checked: values.autoPayout, onChange: (checked) => onChange({ autoPayout: checked }), label: "Enable auto-payout \u2014 automatically transfer earnings on schedule", disabled: busy }), _jsx(FormField, { name: "minimumThreshold", label: "Minimum Payout Threshold (\u20B9)", type: "number", value: values.minimumThreshold, onChange: (v) => onChange({ minimumThreshold: v }), placeholder: "e.g. 500", helpText: "Payouts are held until your balance exceeds this amount. Leave blank for no minimum.", disabled: busy }), _jsxs(Div, { className: `${__P.p3} bg-[var(--appkit-color-surface-alt)] border border-[var(--appkit-color-border)]`, rounded: "lg", children: [_jsx(Text, { className: "mb-1", size: "sm", weight: "medium", children: "Payout Schedule" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Auto-payouts run every Monday for the previous week's settled orders. Manual payouts can be requested from the Payouts page at any time." })] }), _jsx(Toggle, { checked: values.emiEnabled, onChange: (checked) => onChange({ emiEnabled: checked }), label: "Offer EMI financing on eligible orders", disabled: busy }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Only shown to buyers when platform-wide EMI is also enabled and their cart subtotal from your store exceeds the site's minimum order value. Orders on an EMI plan hold your payout until every installment is paid, unless you mark the item \"ship before EMI completes\"." })] })),
+            fields: ["autoPayout", "minimumThreshold", "emiEnabled", "pricesIncludeGst", "supportsShippingProtection", "supportsSaleProtection"],
+            render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Payout Preferences" }), _jsx(Toggle, { checked: values.autoPayout, onChange: (checked) => onChange({ autoPayout: checked }), label: "Enable auto-payout \u2014 automatically transfer earnings on schedule", disabled: busy }), _jsx(FormField, { name: "minimumThreshold", label: "Minimum Payout Threshold (\u20B9)", type: "number", value: values.minimumThreshold, onChange: (v) => onChange({ minimumThreshold: v }), placeholder: "e.g. 500", helpText: "Payouts are held until your balance exceeds this amount. Leave blank for no minimum.", disabled: busy }), _jsxs(Div, { className: `${__P.p3} bg-[var(--appkit-color-surface-alt)] border border-[var(--appkit-color-border)]`, rounded: "lg", children: [_jsx(Text, { className: "mb-1", size: "sm", weight: "medium", children: "Payout Schedule" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Auto-payouts run every Monday for the previous week's settled orders. Manual payouts can be requested from the Payouts page at any time." })] }), _jsx(Toggle, { checked: values.emiEnabled, onChange: (checked) => onChange({ emiEnabled: checked }), label: "Offer EMI financing on eligible orders", disabled: busy }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Only shown to buyers when platform-wide EMI is also enabled and their cart subtotal from your store exceeds the site's minimum order value. Orders on an EMI plan hold your payout until every installment is paid, unless you mark the item \"ship before EMI completes\"." }), _jsx(Toggle, { checked: values.pricesIncludeGst, onChange: (checked) => onChange({ pricesIncludeGst: checked }), label: "The prices I enter already include GST", disabled: busy }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: ["Buyers always see a tax-inclusive price, so this only changes how your own entry is read. Leave it", " ", _jsx(Span, { weight: "semibold", children: "on" }), " and a \u20B9999 listing at 5% GST means the buyer pays \u20B9999 and you earn \u20B9951.43 \u2014 the \u20B947.57 is GST we collect and remit for you. Turn it", " ", _jsx(Span, { weight: "semibold", children: "off" }), " and \u20B9999 is treated as your ex-GST price: the listing is shown at \u20B91,048.95 and you earn \u20B9999."] }), _jsx(Heading, { level: 3, className: "mb-2 mt-4", children: "Buyer Protections" }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: ["Two separate covers a buyer can pay for at checkout. Supporting one earns a safety badge on your listings;", " ", _jsx(Span, { weight: "semibold", children: "declining shows buyers a risk notice instead" }), " \u2014 there is no neutral option, because a buyer who is told nothing cannot tell a seller who declined from one who was never asked."] }), _jsx(Toggle, { checked: values.supportsShippingProtection, onChange: (checked) => onChange({ supportsShippingProtection: checked }), label: "Offer shipment protection \u2014 loss or damage in transit", disabled: busy }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "The parcel never arrived or arrived damaged. We pursue the courier, not you, and the buyer is refunded from the funds we hold \u2014 so a genuine transit loss costs you the item, not an argument." }), _jsx(Toggle, { checked: values.supportsSaleProtection, onChange: (checked) => onChange({ supportsSaleProtection: checked }), label: "Offer sale protection \u2014 item not as described", disabled: busy }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: ["A no-questions-asked refund on the item itself. Be clear about what this means:", " ", _jsx(Span, { weight: "semibold", children: "a claim we inspect and find genuine is charged back to you" }), " ", "\u2014 that is the cover. A claim we find to be a change of mind is absorbed by us, which is what the buyer's fee pays for. Not offered on your final-sale listings, since \"no returns\" and \"no questions asked\" cannot both be true."] }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Changing this does not re-price listings you have already published. It applies to products you save from now on." })] })),
         },
     ], [busy, current]);
     const { openIds, setOpenIds, goToSection, fieldToSectionIndex, sectionMeta } = useSectionFormNav(sections, draft);

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Div } from "../../../ui";
+import { Div } from "../../../ui/index.js";
 export function SellerPayoutStats({ isLoading = false, renderLoading, renderStats, className = "", }) {
     if (isLoading) {
         return _jsx(Div, { className: className, children: renderLoading?.() ?? null });

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

@@ -1,19 +1,19 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { normalizeError } from "../../../errors/normalize";
+import { normalizeError } from "../../../errors/normalize.js";
 import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit/client";
 import { sortBy } from "@mohasinac/appkit/client";
 import React, { useState } from "react";
-import { useRouter } from "next/navigation";
-import { Badge, Div, FilterChipGroup, ListingLayout, Row, RowActionMenu, SideDrawer, Span, Stack, Text, Toggle, useToast } from "../../../ui";
-import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
-import { ROUTES } from "../../../next/routing/route-map";
-import { ADMIN_PAYOUT_STATUS_TABS } from "../../admin/constants/filter-tabs";
-import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
-import { SELLER_BULK_ACTIONS, ROW_ACTION_META } from "../../products/constants/action-defs";
-import { apiClient } from "../../../http";
-import { toRecordArray, toRelativeDate, toCurrency, toStringValue, } from "../../admin/hooks/useAdminListingData";
-import { DataListingView } from "../../admin/components/DataListingView";
+import { useRouter } from "next/navigation.js";
+import { Badge, Div, FilterChipGroup, ListingLayout, Row, RowActionMenu, SideDrawer, Span, Stack, Text, Toggle, useToast } from "../../../ui/index.js";
+import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints.js";
+import { ROUTES } from "../../../next/routing/route-map.js";
+import { ADMIN_PAYOUT_STATUS_TABS } from "../../admin/constants/filter-tabs.js";
+import { ACTIONS } from "../../../_internal/shared/actions/action-registry.js";
+import { SELLER_BULK_ACTIONS, ROW_ACTION_META } from "../../products/constants/action-defs.js";
+import { apiClient } from "../../../http/index.js";
+import { toRecordArray, toRelativeDate, toCurrency, toStringValue, } from "../../admin/hooks/useAdminListingData.js";
+import { DataListingView } from "../../admin/components/DataListingView.js";
 const PAYOUT_STAGES = ["pending", "processing", "paid"];
 const PAYOUT_CYCLE_DAYS = 7;
 function formatDate(value) {

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

@@ -9,6 +9,35 @@ export interface SellerProductDraft {
     brand?: string;
     condition?: string;
     tags?: string[];
+    authenticity?: "original" | "reproduction" | "unverified";
+    specifications?: {
+        name: string;
+        value: string;
+        unit?: string;
+    }[];
+    /** Feature IDS, never prose — `array-contains` is what faceting runs on. */
+    features?: string[];
+    /**
+     * 🛑 OPTIONAL, on purpose, and the reason is C5a.
+     *
+     * The figure a carrier bills on is the PACKED PARCEL, not the item: a bey is
+     * ~30 g and ~300 g boxed. A required product weight would therefore be an
+     * item weight that systematically under-estimates every booking — and since
+     * the booking is capped at the amount collected from the buyer, systematic
+     * under-estimation means silently absorbing the difference.
+     *
+     * So the category's PACKED default drives the checkout estimate, this field
+     * refines it when a seller bothers, and the real parcel figure is entered at
+     * shipment time, when the seller has the box in front of them.
+     */
+    weightG?: number;
+    dimensionsCm?: {
+        l: number;
+        w: number;
+        h: number;
+    };
+    appliedTemplateId?: string;
+    appliedTemplateBody?: string;
     mainImage?: string;
     images?: string[];
     video?: MediaField;
@@ -121,10 +150,29 @@ export interface SellerProductShellProps {
         onChange: (v: string) => void;
     }) => React.ReactNode;
     /**
-     * Render a template selector at the top of the Basic step.
-     * Receives a callback to apply the selected template to the draft.
+     * Render the category description-template picker, between the
+     * Category/Condition row and the Description field.
+     *
+     * 🛑 The slot existed with ZERO consumers and a single `onApply` prop, which
+     * was not enough to build a picker with: it could apply a body but could not
+     * know WHICH body to fetch, or whether applying one would destroy something
+     * the seller had written. C2b widens it rather than adding a second slot.
+     *
+     * `isDescriptionDirty` is the one that matters. It is the clobber rule in a
+     * boolean: true when the description is non-empty after trim AND not
+     * byte-identical to a body applied this session. The picker must not
+     * overwrite when it is true — it offers a "Replace description" action
+     * instead, which is destructive and therefore carries a confirmation.
      */
     renderTemplateSelector?: (props: {
+        /** The leaf the seller has chosen. Empty until they pick one. */
+        categoryId: string;
+        /** Drives which `variant` is fetched — new_in_box vs pre_owned. */
+        condition: string;
+        /** Resolved `{{slot}}` values the picker fills the body with. */
+        context: Record<string, string>;
+        /** See above. The picker must not silently overwrite when true. */
+        isDescriptionDirty: boolean;
         onApply: (partial: Partial<SellerProductDraft>) => void;
     }) => React.ReactNode;
     /** Called with current draft when user clicks "Save as Template". */

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

@@ -1,20 +1,21 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useRouter } from "next/navigation";
+import { useRouter } from "next/navigation.js";
 import { z } from "zod";
-import { FormShell, SectionForm, useSectionFormNav, useFormShell } from "../../shell";
-import { FormShellContext, useFormShellState, applyZodIssues, FormErrorSummary } from "../../../ui/forms";
-import { Alert, Button, Div, FormField, FormGroup, Heading, Section, Stack, TagInput, Text, Toggle, useToast, Row } from "../../../ui";
-import { ImageUpload, MediaUploadField, MediaUploadList, useMediaUpload } from "../../media";
-import { StoreAddressSelectorCreate } from "../../stores/components/StoreAddressSelectorCreate";
-import { QuickProductForm } from "./QuickProductForm";
-import { BarcodeField } from "./BarcodeField";
-import { pluginFor } from "../../../_internal/shared/listing-types/_registry";
-import { DEFAULT_MIN_OFFER_PERCENT } from "../../../_internal/shared/features/offers/config";
-import { PRODUCT_MAX_IMAGES, PRODUCT_MAX_VIDEOS, PRODUCT_IMAGE_INDEX_MAX, } from "../../../_internal/shared/media/limits";
-import { isFinalSale } from "../../products/constants/final-sale";
-import { normalizeError } from "../../../errors/normalize";
+import { FormShell, SectionForm, useSectionFormNav, useFormShell } from "../../shell/index.js";
+import { FormShellContext, useFormShellState, applyZodIssues, FormErrorSummary } from "../../../ui/forms/index.js";
+import { Alert, Button, Div, FormField, FormGroup, Heading, Section, Stack, TagInput, Text, Toggle, useToast, Row } from "../../../ui/index.js";
+import { ImageUpload, MediaUploadField, MediaUploadList, useMediaUpload } from "../../media/index.js";
+import { StoreAddressSelectorCreate } from "../../stores/components/StoreAddressSelectorCreate.js";
+import { QuickProductForm } from "./QuickProductForm.js";
+import { BarcodeField } from "./BarcodeField.js";
+import { pluginFor } from "../../../_internal/shared/listing-types/_registry.js";
+import { DEFAULT_MIN_OFFER_PERCENT } from "../../../_internal/shared/features/offers/config.js";
+import { PRODUCT_MAX_IMAGES, PRODUCT_MAX_VIDEOS, PRODUCT_IMAGE_INDEX_MAX, } from "../../../_internal/shared/media/limits.js";
+import { isFinalSale } from "../../products/constants/final-sale.js";
+import { ProductFeaturesSelector } from "../../products/components/ProductFeaturesSelector.js";
+import { normalizeError } from "../../../errors/normalize.js";
 /**
  * "bundle" is a categoryType, not a ListingType, so it can't live in
  * LISTING_TYPE_REGISTRY — this is the single, explicit escape hatch that
@@ -76,7 +77,74 @@ function fromRupeesString(rupeeStr) {
 }
 // ── Step 1: Basic ─────────────────────────────────────────────────────────────
 function StepBasic({ values, onChange, renderCategorySelector, renderBrandSelector, renderTemplateSelector, }) {
-    return (_jsxs(Stack, { gap: "md", children: [renderTemplateSelector?.({ onApply: onChange }), _jsx(FormField, { name: "title", label: "Title", type: "text", value: values.title ?? "", onChange: (v) => onChange({ title: v }), placeholder: "e.g. Charizard Base Set PSA 9" }), _jsx(FormField, { name: "description", label: "Description", type: "textarea", value: values.description ?? "", onChange: (v) => onChange({ description: v }), placeholder: "Describe your listing in detail\u2026" }), _jsxs(FormGroup, { columns: 2, children: [renderCategorySelector ? (_jsxs(_Fragment, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text)] mb-1", size: "sm", weight: "medium", children: "Category" }), renderCategorySelector({ value: values.category ?? "", onChange: (v) => onChange({ category: v }) })] })) : (_jsx(FormField, { name: "category", label: "Category", type: "text", value: values.category ?? "", onChange: (v) => onChange({ category: v }), placeholder: "e.g. Trading Cards" })), _jsx(FormField, { name: "condition", label: "Condition", type: "select", value: values.condition ?? "new", onChange: (v) => onChange({ condition: v }), options: CONDITION_OPTIONS })] }), renderBrandSelector ? (_jsxs(_Fragment, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text)] mb-1", size: "sm", weight: "medium", children: "Brand" }), renderBrandSelector({ value: values.brand ?? "", onChange: (v) => onChange({ brand: v }) })] })) : (_jsx(FormField, { name: "brand", label: "Brand", type: "text", value: values.brand ?? "", onChange: (v) => onChange({ brand: v }), placeholder: "e.g. Pok\u00E9mon Company" })), _jsx(TagInput, { label: "Tags", value: values.tags ?? [], onChange: (tags) => onChange({ tags }), placeholder: "pokemon, psa9, charizard, holo" }), _jsx(BarcodeField, { value: values.barcodeId ?? "", onChange: (v) => onChange({ barcodeId: v || undefined }), onScan: (v) => onChange({ barcodeId: v }), helperText: "Leave blank to auto-generate. Scan a pre-printed sticker to link it." })] }));
+    /*
+     * 🛑 The clobber rule, in one expression.
+     *
+     * Dirty means: non-empty after trim, AND not byte-identical to a body this
+     * session applied. A seller who has typed anything owns the field; a seller
+     * looking at a body we filled in does not, so a category change may refresh
+     * it silently.
+     *
+     * Byte-identical rather than "did they focus the box": a seller can click
+     * into the description, change nothing, and click away, and that must not
+     * count as authorship.
+     */
+    const description = values.description ?? "";
+    const isDescriptionDirty = description.trim() !== "" && description !== (values.appliedTemplateBody ?? "");
+    /*
+     * The `{{slot}}` values the picker interpolates. Only what the draft
+     * genuinely knows — an unresolvable slot becomes the empty string and the
+     * picker reports it, which is `interpolate`'s contract. Never a literal
+     * `{{series}}` in a published description.
+     *
+     * `condition` resolves to the LABEL, not the raw enum: a body reading
+     * "Condition: like_new" is a template leaking its storage format.
+     */
+    const templateContext = {
+        title: values.title ?? "",
+        brand: values.brand ?? "",
+        condition: CONDITION_OPTIONS.find((o) => o.value === (values.condition ?? "new"))?.label ?? "",
+        siteName: "LetItRip",
+    };
+    return (_jsxs(Stack, { gap: "md", children: [_jsx(FormField, { name: "title", label: "Title", type: "text", value: values.title ?? "", onChange: (v) => onChange({ title: v }), placeholder: "e.g. Charizard Base Set PSA 9" }), _jsxs(FormGroup, { columns: 2, children: [renderCategorySelector ? (_jsxs(_Fragment, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text)] mb-1", size: "sm", weight: "medium", children: "Category" }), renderCategorySelector({ value: values.category ?? "", onChange: (v) => onChange({ category: v }) })] })) : (_jsx(FormField, { name: "category", label: "Category", type: "text", value: values.category ?? "", onChange: (v) => onChange({ category: v }), placeholder: "e.g. Trading Cards" })), _jsx(FormField, { name: "condition", label: "Condition", type: "select", value: values.condition ?? "new", onChange: (v) => onChange({ condition: v }), options: CONDITION_OPTIONS })] }), renderTemplateSelector?.({
+                categoryId: values.category ?? "",
+                condition: values.condition ?? "new",
+                context: templateContext,
+                isDescriptionDirty,
+                onApply: onChange,
+            }), _jsx(FormField, { name: "description", label: "Description", type: "textarea", value: description, onChange: (v) => onChange({ description: v }), placeholder: "Describe your listing in detail\u2026" }), renderBrandSelector ? (_jsxs(_Fragment, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text)] mb-1", size: "sm", weight: "medium", children: "Brand" }), renderBrandSelector({ value: values.brand ?? "", onChange: (v) => onChange({ brand: v }) })] })) : (_jsx(FormField, { name: "brand", label: "Brand", type: "text", value: values.brand ?? "", onChange: (v) => onChange({ brand: v }), placeholder: "e.g. Pok\u00E9mon Company" })), _jsx(TagInput, { label: "Tags", value: values.tags ?? [], onChange: (tags) => onChange({ tags }), placeholder: "pokemon, psa9, charizard, holo" }), _jsx(BarcodeField, { value: values.barcodeId ?? "", onChange: (v) => onChange({ barcodeId: v || undefined }), onScan: (v) => onChange({ barcodeId: v }), helperText: "Leave blank to auto-generate. Scan a pre-printed sticker to link it." })] }));
+}
+// ── Step 1b: Details — the inherited-but-editable fields (C2c) ───────────────
+const AUTHENTICITY_OPTIONS = [
+    { value: "original", label: "Original — licensed manufacture (Takara, Takara Tomy, Hasbro…)" },
+    { value: "reproduction", label: "Reproduction / midfake — a copy with no manufacturer's marque" },
+    { value: "unverified", label: "Unverified — I cannot confirm which it is" },
+];
+/**
+ * 🛑 Three options, and there is deliberately no fourth.
+ *
+ * A poor-quality counterfeit — brittle plastic, cadmium or lead in the metal
+ * parts — is not a listing state this marketplace offers. It is a scam report.
+ * Offering "fake" as a dropdown value would make selling one a supported
+ * workflow.
+ *
+ * `unverified` exists so a seller who genuinely does not know has an honest
+ * answer available. Without it the only way to list is to claim something they
+ * cannot stand behind, and the field stops meaning anything.
+ */
+function StepDetails({ values, onChange, storeId, listingType, }) {
+    const specs = values.specifications ?? [];
+    const setSpecs = (next) => onChange({ specifications: next });
+    const dims = values.dimensionsCm;
+    const setDim = (key, raw) => {
+        const n = Number(raw);
+        const base = dims ?? { l: 0, w: 0, h: 0 };
+        const next = { ...base, [key]: Number.isFinite(n) ? n : 0 };
+        // All three or none: a box with a length and no width is not a dimension,
+        // and the shipping estimate reads all three or ignores the field.
+        onChange({ dimensionsCm: next.l > 0 && next.w > 0 && next.h > 0 ? next : undefined });
+    };
+    return (_jsxs(Stack, { gap: "md", children: [_jsx(FormField, { name: "authenticity", label: "Authenticity", type: "select", required: true, value: values.authenticity ?? "", onChange: (v) => onChange({ authenticity: v }), options: [{ value: "", label: "Choose one…" }, ...AUTHENTICITY_OPTIONS] }), _jsx(Text, { size: "xs", color: "muted", children: "Shown on the listing whenever it is not Original. A reproduction is a legitimate thing to sell here as long as it is labelled \u2014 what is not allowed is selling one as the real thing. If you believe an item is a cheap counterfeit, report it rather than listing it." }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", children: "Features" }), _jsx(Text, { size: "xs", color: "muted", children: "Condition, authenticity, release type, battle type and spin direction. Some are filled in from the category when you save \u2014 remove any that do not apply and your choice sticks." }), _jsx(ProductFeaturesSelector, { value: values.features ?? [], onChange: (next) => onChange({ features: next }), productType: listingType === "bundle" ? "all" : listingType, ...(storeId ? { storeId } : {}) })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", children: "Specifications" }), _jsx(Text, { size: "xs", color: "muted", children: "Left blank, the category fills these in. Anything you enter here is kept." }), specs.map((row, i) => (_jsxs(FormGroup, { columns: 3, children: [_jsx(FormField, { name: `spec-name-${i}`, label: "Name", type: "text", value: row.name, onChange: (v) => setSpecs(specs.map((r, j) => (j === i ? { ...r, name: v } : r))) }), _jsx(FormField, { name: `spec-value-${i}`, label: "Value", type: "text", value: row.value, onChange: (v) => setSpecs(specs.map((r, j) => (j === i ? { ...r, value: v } : r))) }), _jsxs(Row, { gap: "sm", align: "end", children: [_jsx(FormField, { name: `spec-unit-${i}`, label: "Unit", type: "text", value: row.unit ?? "", onChange: (v) => setSpecs(specs.map((r, j) => (j === i ? { ...r, unit: v } : r))) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSpecs(specs.filter((_, j) => j !== i)), children: "Remove" })] })] }, i))), _jsx(Button, { variant: "secondary", size: "sm", onClick: () => setSpecs([...specs, { name: "", value: "" }]), children: "Add a specification" })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", children: "Weight and size (optional)" }), _jsx(Text, { size: "xs", color: "muted", children: "\uD83D\uDED1 Leave these blank unless you know them \u2014 the category's own packed-parcel figures are used for the shipping estimate, and you enter the real weight of the box when you book the shipment. A figure here should be the PACKED weight, not the bare item." }), _jsxs(FormGroup, { columns: 4, children: [_jsx(FormField, { name: "weightG", label: "Packed weight (g)", type: "number", value: values.weightG != null ? String(values.weightG) : "", onChange: (v) => onChange({ weightG: v.trim() === "" ? undefined : Math.max(0, Number(v) || 0) }) }), _jsx(FormField, { name: "dimL", label: "Length (cm)", type: "number", value: dims?.l ? String(dims.l) : "", onChange: (v) => setDim("l", v) }), _jsx(FormField, { name: "dimW", label: "Width (cm)", type: "number", value: dims?.w ? String(dims.w) : "", onChange: (v) => setDim("w", v) }), _jsx(FormField, { name: "dimH", label: "Height (cm)", type: "number", value: dims?.h ? String(dims.h) : "", onChange: (v) => setDim("h", v) })] })] })] }));
 }
 // ── Step 2: Media ─────────────────────────────────────────────────────────────
 function StepMedia({ values, onChange, storeSlug = "store", }) {
@@ -306,13 +374,7 @@ function StepShipping({ values, onChange, renderAddressSelector, }) {
                 ] }), renderAddressSelector ? (_jsxs(_Fragment, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text)] mb-1", size: "sm", weight: "medium", children: "Pickup Address (optional)" }), renderAddressSelector({
                         value: values.pickupAddressId ?? "",
                         onChange: (v) => onChange({ pickupAddressId: v }),
-                    })] })) : (_jsx(StoreAddressSelectorCreate, { label: "Pickup Address (optional)", value: values.pickupAddressId ?? "", onChange: (id) => onChange({ pickupAddressId: id }) })), _jsx(Toggle, { checked: !!values.insurance, onChange: (checked) => onChange({ insurance: checked, insuranceCost: checked ? values.insuranceCost ?? 0 : undefined }), label: "Offer shipping insurance" }), values.insurance && (_jsx(FormField, { name: "insuranceCost", label: "Insurance Cost (\u20B9)", type: "number", value: toRupeesString(values.insuranceCost), onChange: (v) => onChange({ insuranceCost: fromRupeesString(v) }), placeholder: "0" })), _jsx(FormField, { name: "gstRate", label: "GST Rate", type: "select", value: String(values.gstRate ?? 0), onChange: (v) => onChange({ gstRate: Number(v) }), options: [
-                    { value: "0", label: "Exempt (0%)" },
-                    { value: "5", label: "5%" },
-                    { value: "12", label: "12%" },
-                    { value: "18", label: "18%" },
-                    { value: "28", label: "28%" },
-                ] }), _jsx(FormField, { name: "hsnCode", label: "HSN Code", value: values.hsnCode ?? "", onChange: (v) => onChange({ hsnCode: v }), placeholder: "e.g. 9503" })] }));
+                    })] })) : (_jsx(StoreAddressSelectorCreate, { label: "Pickup Address (optional)", value: values.pickupAddressId ?? "", onChange: (id) => onChange({ pickupAddressId: id }) })), _jsx(Toggle, { checked: !!values.insurance, onChange: (checked) => onChange({ insurance: checked, insuranceCost: checked ? values.insuranceCost ?? 0 : undefined }), label: "Offer shipping insurance" }), values.insurance && (_jsx(FormField, { name: "insuranceCost", label: "Insurance Cost (\u20B9)", type: "number", value: toRupeesString(values.insuranceCost), onChange: (v) => onChange({ insuranceCost: fromRupeesString(v) }), placeholder: "0" }))] }));
 }
 // ── Step: Returns ─────────────────────────────────────────────────────────
 /**
@@ -516,13 +578,43 @@ productId, onSave, onPublish, onDiscard, isLoading = false, storeSlug, renderCat
             render: ({ values, onChange }) => (_jsx(StepMedia, { values: values, onChange: onChange, storeSlug: storeSlug })),
             schema: sectionSchemas.media,
         },
+        /*
+         * 🛑 Details sits between Basic and the type-specific step, not at the end.
+         *
+         * `authenticity` is required, and a required field buried after the
+         * optional ones is a field sellers reach by being bounced back to it from
+         * a failed submit. It also reads in the right order: what it IS, then what
+         * it is LIKE, then what it costs.
+         */
+        {
+            id: "details",
+            label: "Details",
+            required: true,
+            fields: ["authenticity", "features", "specifications", "weightG", "dimensionsCm"],
+            render: ({ values, onChange }) => (_jsx(StepDetails, { values: values, onChange: onChange, listingType: listingType, ...(storeSlug ? { storeId: storeSlug } : {}) })),
+            /*
+             * The one required field in the section, and the message says what to do
+             * rather than naming the field — "Authenticity is required" tells a
+             * seller nothing they cannot see.
+             */
+            schema: z
+                .object({
+                authenticity: z.enum(["original", "reproduction", "unverified"], {
+                    errorMap: () => ({
+                        message: "Say whether this is an original, a reproduction, or that you cannot confirm",
+                    }),
+                }),
+            })
+                .passthrough(),
+        },
         ...(typeSpecificSection ? [typeSpecificSection] : []),
         {
             id: "pricing",
             label: "Pricing",
             required: true,
             quick: true,
-            fields: ["price", "compareAtPrice", "stockQuantity", "allowOffers", "minOfferPercent", "gstRate", "hsnCode"],
+            // `gstRate` / `hsnCode` deliberately absent — admin-only, see StepPricing.
+            fields: ["price", "compareAtPrice", "stockQuantity", "allowOffers", "minOfferPercent"],
             render: ({ values, onChange }) => (_jsx(StepPricing, { values: values, onChange: onChange, listingType: listingType })),
             // Built per render because whether stock is required depends on the
             // listing type's own plugin — a digital code has no stock to speak of.

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

@@ -1,10 +1,10 @@
 "use client";
 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";
+import { Badge, Button, Checkbox, Div, Grid, Row, Stack, Text, TextLink } from "../../../ui/index.js";
+import { MediaImage } from "../../media/MediaImage.js";
+import { ROW_ACTION_META, ROW_ACTION_ID } from "../../../features/products/constants/action-defs.js";
+import { ACTIONS } from "../../../_internal/shared/actions/action-registry.js";
+import { listingBadgeVariant } from "../../products/utils/listing-badge-variant.js";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
 };

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

@@ -5,6 +5,18 @@ export interface SellerProductsFilterFieldsProps {
         id: string;
         label: string;
     }>;
+    /**
+     * The stock-level options, PASSED IN rather than declared here.
+     *
+     * They are derived from `LOW_STOCK_THRESHOLD`, and the predicate that reads
+     * the chosen value lives in `SellerProductsView` beside them — so declaring
+     * a second copy of the labels here is how the picker and the filter end up
+     * disagreeing about what "low" means.
+     */
+    stockStateOptions: {
+        value: string;
+        label: string;
+    }[];
     onChange: (next: Record<string, string>) => void;
 }
-export declare function SellerProductsFilterFields({ pendingFilters, statusOptions, onChange, }: SellerProductsFilterFieldsProps): React.JSX.Element;
+export declare function SellerProductsFilterFields({ pendingFilters, statusOptions, stockStateOptions, onChange, }: SellerProductsFilterFieldsProps): React.JSX.Element;

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

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Div, FilterChipGroup, Row, Stack, Text } from "../../../ui";
-import { FieldInput, FieldSelect } from "../../../ui/forms";
-import { CategoryInlineSelect } from "./CategoryInlineSelect";
-import { BrandInlineSelect } from "./BrandInlineSelect";
+import { Div, FilterChipGroup, Row, Stack, Text } from "../../../ui/index.js";
+import { FieldInput, FieldSelect } from "../../../ui/forms/index.js";
+import { CategoryInlineSelect } from "./CategoryInlineSelect.js";
+import { BrandInlineSelect } from "./BrandInlineSelect.js";
 const CONDITION_OPTIONS = [
     { value: "", label: "Any" },
     { value: "mint", label: "Mint" },
@@ -12,7 +12,7 @@ const CONDITION_OPTIONS = [
     { value: "refurbished", label: "Refurbished" },
     { value: "for-parts", label: "For parts" },
 ];
-export function SellerProductsFilterFields({ pendingFilters, statusOptions, onChange, }) {
+export function SellerProductsFilterFields({ pendingFilters, statusOptions, stockStateOptions, onChange, }) {
     const patch = (k, v) => onChange({ ...pendingFilters, [k]: v });
-    return (_jsxs(_Fragment, { children: [_jsx(FilterChipGroup, { label: "Status", tabs: statusOptions, value: pendingFilters.status ?? "", onChange: (id) => patch("status", id) }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "semibold", color: "muted", transform: "uppercase", children: "Category" }), _jsx(CategoryInlineSelect, { value: pendingFilters.category ?? "", onChange: (v) => patch("category", v), placeholder: "Search categories\u2026" })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "semibold", color: "muted", transform: "uppercase", children: "Brand" }), _jsx(BrandInlineSelect, { value: pendingFilters.brand ?? "", onChange: (v) => patch("brand", v), placeholder: "Search brands\u2026", allowCreate: false })] }), _jsx(FieldSelect, { name: "condition", label: "Condition", value: pendingFilters.condition ?? "", onChange: (v) => patch("condition", v), options: CONDITION_OPTIONS }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "semibold", color: "muted", transform: "uppercase", children: "Price (\u20B9 Rupees)" }), _jsxs(Row, { gap: "sm", children: [_jsx(Div, { className: "flex-1", children: _jsx(FieldInput, { name: "minPrice", type: "number", min: 0, value: pendingFilters.minPrice ?? "", onChange: (v) => patch("minPrice", v), placeholder: "min" }) }), _jsx(Div, { className: "flex-1", children: _jsx(FieldInput, { name: "maxPrice", type: "number", min: 0, value: pendingFilters.maxPrice ?? "", onChange: (v) => patch("maxPrice", v), placeholder: "max" }) })] })] }), _jsx(FieldInput, { name: "tags", label: "Tags (comma-separated)", type: "text", value: pendingFilters.tags ?? "", onChange: (v) => patch("tags", v), placeholder: "pokemon, vintage, holo" }), _jsx(FieldInput, { name: "badges", label: "Badges (feature slugs)", type: "text", value: pendingFilters.badges ?? "", onChange: (v) => patch("badges", v), placeholder: "feature-free-shipping, feature-verified" })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(FilterChipGroup, { label: "Status", tabs: statusOptions, value: pendingFilters.status ?? "", onChange: (id) => patch("status", id) }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "semibold", color: "muted", transform: "uppercase", children: "Category" }), _jsx(CategoryInlineSelect, { value: pendingFilters.category ?? "", onChange: (v) => patch("category", v), placeholder: "Search categories\u2026" })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "semibold", color: "muted", transform: "uppercase", children: "Brand" }), _jsx(BrandInlineSelect, { value: pendingFilters.brand ?? "", onChange: (v) => patch("brand", v), placeholder: "Search brands\u2026", allowCreate: false })] }), _jsx(FieldSelect, { name: "condition", label: "Condition", value: pendingFilters.condition ?? "", onChange: (v) => patch("condition", v), options: CONDITION_OPTIONS }), _jsxs(Stack, { gap: "xs", children: [_jsx(FieldSelect, { name: "stockState", label: "Stock level", value: pendingFilters.stockState ?? "", onChange: (v) => patch("stockState", v), options: stockStateOptions }), _jsx(Text, { size: "xs", color: "muted", children: "Applied to the listings on this page." })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "semibold", color: "muted", transform: "uppercase", children: "Price (\u20B9 Rupees)" }), _jsxs(Row, { gap: "sm", children: [_jsx(Div, { className: "flex-1", children: _jsx(FieldInput, { name: "minPrice", type: "number", min: 0, value: pendingFilters.minPrice ?? "", onChange: (v) => patch("minPrice", v), placeholder: "min" }) }), _jsx(Div, { className: "flex-1", children: _jsx(FieldInput, { name: "maxPrice", type: "number", min: 0, value: pendingFilters.maxPrice ?? "", onChange: (v) => patch("maxPrice", v), placeholder: "max" }) })] })] }), _jsx(FieldInput, { name: "tags", label: "Tags (comma-separated)", type: "text", value: pendingFilters.tags ?? "", onChange: (v) => patch("tags", v), placeholder: "pokemon, vintage, holo" }), _jsx(FieldInput, { name: "badges", label: "Badges (feature slugs)", type: "text", value: pendingFilters.badges ?? "", onChange: (v) => patch("badges", v), placeholder: "feature-free-shipping, feature-verified" })] }));
 }