@mohasinac/appkit 4.18.0 → 4.20.0

package/dist/features/admin/schemas/site-settings-form.js

@@ -0,0 +1,159 @@
+/*
+ * WHY: `AdminSiteSettingsView` is 1826 lines with **21 `<Form>` tags and no
+ *      schema on any of them**. All 21 are tabs over one document and save
+ *      through a single `buildFullPayload()` → one PUT, so this is one form
+ *      wearing twenty-one hats, entirely unvalidated.
+ *
+ *      Live consequences already documented for this exact payload:
+ *        · `announcementBar` was saved under the key `text` until 2026-08-24 —
+ *          a key no renderer has ever read — so admin-authored announcements
+ *          saved successfully and never appeared.
+ *        · `adSettings`, `integrations`, `platformLimits`, `tagline` and
+ *          `favicon` were written here while undeclared on
+ *          `SiteSettingsDocument`, which is how an unmasked ad-credentials
+ *          blob reached anonymous callers (Recurrent Root Cause #70).
+ *
+ * WHAT: A schema that validates the fields with real rules and **passes the
+ *       rest through untouched**.
+ *
+ * ## 🛑 This one is `.passthrough()`, deliberately, and that is the whole point
+ *
+ * Everywhere else in this rework an update schema is `.strict()`. Here that
+ * would be actively dangerous. `buildFullPayload()` demonstrably writes keys
+ * the TypeScript interface does not declare, and a closed schema would SILENTLY
+ * STRIP every one of them on the next save — turning a validation improvement
+ * into the largest single act of data loss in the codebase. That is the
+ * `productBaseSchema` failure, aimed at the site's entire configuration.
+ *
+ * So: constrain what can be reasoned about (percentages that must be 0–100,
+ * money that must be non-negative, a contact email that must be an email), and
+ * let the rest pass. Tightening any group is a separate, evidence-led change —
+ * per the data-integrity protocol, only after a full-collection round-trip
+ * diff proves the schema is a superset of what is stored.
+ *
+ * EXPORTS: siteSettingsFormSchema, type SiteSettingsFormValues
+ *
+ * @tag domain:admin
+ * @tag layer:schema
+ * @tag pattern:none
+ * @tag access:isomorphic
+ * @tag consumers:AdminSiteSettingsView
+ * @tag sideEffects:none
+ */
+import { z } from "zod";
+/** A percentage a human types into a settings box. */
+const percent = (label) => z.coerce
+    .number({ invalid_type_error: `${label} must be a number.` })
+    .min(0, `${label} cannot be negative.`)
+    .max(100, `${label} cannot exceed 100%.`)
+    .optional();
+/** A non-negative rupee amount. */
+const money = (label) => z.coerce
+    .number({ invalid_type_error: `${label} must be a number.` })
+    .min(0, `${label} cannot be negative.`)
+    .optional();
+/** An optional email box — blank is allowed, malformed is not. */
+const optionalEmail = z
+    .string()
+    .trim()
+    .toLowerCase()
+    .email("That doesn't look like an email address.")
+    .optional()
+    .or(z.literal(""));
+/** An optional URL box — blank is allowed, malformed is not. */
+const optionalUrl = z
+    .string()
+    .trim()
+    .url("Enter a full URL, including https://.")
+    .optional()
+    .or(z.literal(""));
+export const siteSettingsFormSchema = z
+    .object({
+    /*
+     * 🛑 `message` is the canonical key. Naming it here is what stops the
+     * `text` mistake recurring: a payload carrying `text` still passes (the
+     * schema is open), but the one key a renderer reads is now declared, and
+     * the form is typed against it.
+     */
+    announcementBar: z
+        .object({
+        message: z.string().trim().max(300, "Keep the announcement under 300 characters.").optional(),
+        enabled: z.boolean().optional(),
+        link: optionalUrl,
+    })
+        .passthrough()
+        .optional(),
+    contact: z
+        .object({
+        email: optionalEmail,
+        supportEmail: optionalEmail,
+        phone: z.string().trim().max(40).optional(),
+    })
+        .passthrough()
+        .optional(),
+    /*
+     * The commission block. Every one of these is a percentage or an amount
+     * that multiplies against real orders, and all were free text — a stray
+     * keystroke in `platformFeePercent` changes what every seller is charged.
+     */
+    commissions: z
+        .object({
+        platformFeePercent: percent("Platform fee"),
+        gatewayFeePercent: percent("Gateway fee"),
+        platformFeeMax: money("Platform fee cap"),
+        minPayoutAmount: money("Minimum payout"),
+        payoutHoldDays: z.coerce.number().int().min(0).max(365).optional(),
+        codHandlingFee: money("COD handling fee"),
+        codDepositPercent: percent("COD deposit"),
+    })
+        .passthrough()
+        .optional(),
+    laborRate: z
+        .object({ hourlyRate: money("Hourly rate") })
+        .passthrough()
+        .optional(),
+    emi: z
+        .object({
+        surchargePercent: percent("EMI surcharge"),
+        surchargeSellerSharePercent: percent("Seller share"),
+        minOrderAmount: money("Minimum EMI order"),
+    })
+        .passthrough()
+        .optional(),
+    gst: z
+        .object({
+        // 15 characters, the statutory format. A wrong GSTIN appears on every
+        // invoice the platform issues.
+        gstin: z
+            .string()
+            .trim()
+            .toUpperCase()
+            .regex(/^\d{2}[A-Z]{5}\d{4}[A-Z]\d[A-Z\d][A-Z\d]$/, "That is not a valid 15-character GSTIN.")
+            .optional()
+            .or(z.literal("")),
+        ratePercent: percent("GST rate"),
+    })
+        .passthrough()
+        .optional(),
+    auctionConfig: z
+        .object({
+        minBidIncrement: money("Minimum bid increment"),
+        extensionMinutes: z.coerce.number().int().min(0).max(1440).optional(),
+    })
+        .passthrough()
+        .optional(),
+    seo: z
+        .object({
+        title: z.string().trim().max(70, "Search engines truncate titles past ~70 characters.").optional(),
+        description: z
+            .string()
+            .trim()
+            .max(160, "Search engines truncate descriptions past ~160 characters.")
+            .optional(),
+    })
+        .passthrough()
+        .optional(),
+})
+    // See the header: OPEN on purpose. `buildFullPayload()` writes keys the
+    // document interface does not declare, and closing this would delete them.
+    .passthrough();

package/dist/features/auctions/components/PlaceBidFormClient.js

@@ -13,6 +13,7 @@ import { useLiveAuctionBid } from "../hooks/useLiveAuctionBid";
 import { AUCTION_BUYOUT_WINDOW_MINUTES } from "../../../_internal/shared/checkout/lanes";
 import { BID_PRESET_MULTIPLIERS, isBuyNowAvailable, resolveMinBid, resolveMinBidIncrement, } from "../../../_internal/shared/features/auctions/config";
 import { normalizeError } from "../../../errors/normalize";
+import { FormErrorSummary } from "../../../ui/forms/FormErrorSummary";
 const __P = {
     p5: "p-[var(--appkit-space-5)]",
 };
@@ -179,10 +180,10 @@ export function PlaceBidFormClient({ productId, currentBid: ssrCurrentBid, start
             }
         });
     }
-    return (_jsxs(Stack, { className: `${__P.p5}`, border: "subtle", gap: "md", rounded: "xl", surface: "muted", children: [_jsxs(Stack, { gap: "xs", children: [_jsxs(Row, { justify: "between", align: "center", children: [_jsx(Text, { size: "xs", color: "muted", children: hasBids ? "Current bid" : "Starting bid" }), _jsx(Text, { size: "xs", color: "muted", children: hasBids ? "Starting bid" : "Minimum bid" })] }), _jsxs(Row, { justify: "between", align: "baseline", children: [_jsx(Span, { size: "xl", weight: "bold", className: "text-primary-600 dark:text-primary-400", children: formatCurrency(currentBid, currency) }), _jsx(Span, { size: "sm", color: "muted", children: formatCurrency(hasBids ? startingBid : minBid, currency) })] }), _jsxs(Text, { size: "xs", color: "faint", children: [bidCount, " ", bidCount === 1 ? "bid" : "bids", " \u00B7 min increment", " ", formatCurrency(minBidIncrement, currency)] })] }), _jsx(LoginRequiredModal, { isOpen: showLoginModal, onClose: () => setShowLoginModal(false), message: "You need to be signed in to place a bid. Please log in or create an account to continue." }), _jsx(Form, { onSubmit: (e) => {
+    return (_jsxs(Stack, { className: `${__P.p5}`, border: "subtle", gap: "md", rounded: "xl", surface: "muted", children: [_jsxs(Stack, { gap: "xs", children: [_jsxs(Row, { justify: "between", align: "center", children: [_jsx(Text, { size: "xs", color: "muted", children: hasBids ? "Current bid" : "Starting bid" }), _jsx(Text, { size: "xs", color: "muted", children: hasBids ? "Starting bid" : "Minimum bid" })] }), _jsxs(Row, { justify: "between", align: "baseline", children: [_jsx(Span, { size: "xl", weight: "bold", className: "text-primary-600 dark:text-primary-400", children: formatCurrency(currentBid, currency) }), _jsx(Span, { size: "sm", color: "muted", children: formatCurrency(hasBids ? startingBid : minBid, currency) })] }), _jsxs(Text, { size: "xs", color: "faint", children: [bidCount, " ", bidCount === 1 ? "bid" : "bids", " \u00B7 min increment", " ", formatCurrency(minBidIncrement, currency)] })] }), _jsx(LoginRequiredModal, { isOpen: showLoginModal, onClose: () => setShowLoginModal(false), message: "You need to be signed in to place a bid. Please log in or create an account to continue." }), _jsx(Form, { schema: schema, onSubmit: (e) => {
                     // handler wired through render-prop below — keeps setFieldError in scope
                     e.preventDefault();
-                }, children: ({ setFieldError, clearErrors }) => (_jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { gap: "xs", wrap: true, role: "radiogroup", "aria-label": "Bid amount preset", children: [BID_PRESET_MULTIPLIERS.map((n) => {
+                }, children: ({ setFieldError, clearErrors }) => (_jsxs(Stack, { gap: "sm", children: [_jsx(FormErrorSummary, {}), _jsxs(Row, { gap: "xs", wrap: true, role: "radiogroup", "aria-label": "Bid amount preset", children: [BID_PRESET_MULTIPLIERS.map((n) => {
                                     const amount = presetAmount(n);
                                     const delta = amount - currentBid;
                                     // `delta` is 0 only for the opening preset on a bid-free

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

@@ -3,9 +3,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import { z } from "zod";
-import { FormShell, StepForm, StepFormActions, useFormShell } from "../../shell";
+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 } from "../../../ui";
+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";
@@ -153,25 +153,65 @@ function StepLiveItemSettings({ values, onChange, }) {
 function StepPrintMetaSettings({ values, onChange, intro, }) {
     return (_jsxs(Stack, { gap: "md", children: [_jsx(Alert, { variant: "info", children: intro }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "printSize", label: "Size", type: "text", value: values.printSize ?? "", onChange: (v) => onChange({ printSize: v }), placeholder: "e.g. A4, 12x18 in" }), _jsx(FormField, { name: "printMaterial", label: "Material", type: "text", value: values.printMaterial ?? "", onChange: (v) => onChange({ printMaterial: v }), placeholder: "e.g. Matte photo paper, Vinyl" })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "printFinish", label: "Finish (optional)", type: "text", value: values.printFinish ?? "", onChange: (v) => onChange({ printFinish: v }), placeholder: "e.g. Glossy, Matte, Holographic" }), _jsx(FormField, { name: "printEditionSize", label: "Edition Size (optional)", type: "number", value: String(values.printEditionSize ?? ""), onChange: (v) => onChange({ printEditionSize: v ? Number(v) : undefined }), placeholder: "Leave blank for an open edition" })] })] }));
 }
-const TYPE_SPECIFIC_STEPS = {
+// ── Type-specific step registry ──────────────────────────────────────────────
+// Replaces the ad-hoc per-type ternary chain that used to pick the wizard step
+// (create mode) / section (edit mode) — one Record lookup instead of a
+// duplicated 5(+)-way chain in each mode.
+/*
+ * Per-section schemas for the product form.
+ *
+ * These replace the `validate: (v) => "message" | null` callbacks each step
+ * used to carry. The rules are unchanged; what changes is where the failure
+ * surfaces. A step-level string could only ever render as one banner above the
+ * whole step — a Zod issue carries a PATH, so the message lands on the field
+ * that caused it and `<FormErrorSummary>` can offer a jump link to it.
+ *
+ * Kept beside the sections rather than folded into `sellerProductSchema`
+ * because they are per-LISTING-TYPE: a starting bid is required for an auction
+ * and meaningless for a sticker sheet, and a single whole-form schema would
+ * have to branch on type for every one of them.
+ */
+const sectionSchemas = {
+    basic: z.object({
+        title: z.string().trim().min(3, "Title must be at least 3 characters"),
+        description: z.string().trim().min(20, "Description must be at least 20 characters"),
+    }).passthrough(),
+    media: z.object({
+        mainImage: z.string().min(1, "A main image is required"),
+    }).passthrough(),
+    auction: z.object({
+        startingBid: z.coerce.number({ invalid_type_error: "Starting bid is required" }).positive("Starting bid must be greater than zero"),
+        auctionEndDate: z.string().min(1, "Auction end date is required"),
+    }).passthrough(),
+    preorder: z.object({
+        preOrderDeliveryDate: z.string().min(1, "Estimated delivery date is required"),
+    }).passthrough(),
+    classified: z.object({
+        classifiedCity: z.string().trim().min(1, "City is required for classified listings"),
+    }).passthrough(),
+    live: z.object({
+        liveSpecies: z.string().trim().min(1, "Species name is required"),
+    }).passthrough(),
+};
+const TYPE_SPECIFIC_SECTIONS = {
     auction: {
         id: "auction",
         label: "Auction Settings",
         render: ({ values, onChange }) => (_jsx(StepAuctionSettings, { values: values, onChange: onChange })),
-        validate: (v) => (!v.startingBid ? "Starting bid is required" : !v.auctionEndDate ? "Auction end date is required" : null),
+        schema: sectionSchemas.auction,
     },
     "pre-order": {
         id: "preorder",
         label: "Pre-Order",
         sectionHeading: "Pre-Order Settings",
         render: ({ values, onChange }) => (_jsx(StepPreOrderSettings, { values: values, onChange: onChange })),
-        validate: (v) => (!v.preOrderDeliveryDate ? "Estimated delivery date is required" : null),
+        schema: sectionSchemas.preorder,
     },
     classified: {
         id: "classified",
         label: "Meetup Details",
         render: ({ values, onChange }) => (_jsx(StepClassifiedSettings, { values: values, onChange: onChange })),
-        validate: (v) => (!v.classifiedCity?.trim() ? "City is required for classified listings" : null),
+        schema: sectionSchemas.classified,
     },
     "digital-code": {
         id: "digitalcode",
@@ -182,7 +222,7 @@ const TYPE_SPECIFIC_STEPS = {
         id: "live",
         label: "Live Item Details",
         render: ({ values, onChange }) => (_jsx(StepLiveItemSettings, { values: values, onChange: onChange })),
-        validate: (v) => (!v.liveSpecies?.trim() ? "Species name is required" : null),
+        schema: sectionSchemas.live,
     },
     art: {
         id: "printmeta",
@@ -241,13 +281,18 @@ const EDIT_SECTIONS = [
 export function SellerProductShell({ mode, listingType = "standard", initialValues, onSave, onPublish, onDiscard, isLoading = false, storeSlug, renderCategorySelector, renderBrandSelector, renderAddressSelector, renderTemplateSelector, onSaveAsTemplate, previewSlot, }) {
     const [draft, setDraft] = useState(initialValues ?? { status: "draft", condition: "new" });
     const [formMode, setFormMode] = useState(mode === "create" && listingType === "standard" ? "quick" : "full");
-    const [currentStep, setCurrentStep] = useState(0);
+    /*
+     * Declared here, ABOVE the sections array, because section render callbacks
+     * close over `setFieldError`/`clearErrors`. The nav seam cannot be supplied
+     * yet — it needs the sections — so it is composed in below. That ordering is
+     * why the original `wizardShellCtx` existed; only its contents change.
+     */
+    const { shellCtx: baseShellCtx, setFieldError, clearErrors, validate } = useFormShellState(sellerProductSchema);
     const [stepError, setStepError] = useState(null);
     const { isDirty, markDirty, markClean } = useFormShell();
     const router = useRouter();
     const { showToast } = useToast();
     const { upload: shellUpload } = useMediaUpload();
-    const { shellCtx, setFieldError, clearErrors, validate } = useFormShellState(sellerProductSchema);
     const update = useCallback((partial) => {
         setDraft((prev) => {
             const next = { ...prev, ...partial };
@@ -346,63 +391,73 @@ export function SellerProductShell({ mode, listingType = "standard", initialValu
         }
     }, [draft, onPublish, markClean, clearErrors, setFieldError, showToast]);
     const listingTypeLabel = pluginForMode(listingType).typeLabel;
-    const typeSpecificStep = TYPE_SPECIFIC_STEPS[listingType] ?? null;
-    const steps = [
+    const typeSpecificSection = TYPE_SPECIFIC_SECTIONS[listingType] ?? null;
+    const sections = [
         {
+            id: "basic",
             label: "Basic",
+            required: true,
+            quick: true,
             fields: ["title", "description", "category", "brand", "condition", "tags", "barcodeId"],
             render: ({ values, onChange }) => (_jsx(StepBasic, { values: values, onChange: onChange, renderCategorySelector: renderCategorySelector, renderBrandSelector: renderBrandSelector, renderTemplateSelector: renderTemplateSelector })),
-            validate: (v) => {
-                if (!v.title?.trim() || v.title.trim().length < 3)
-                    return "Title must be at least 3 characters";
-                if (!v.description?.trim() || v.description.trim().length < 20)
-                    return "Description must be at least 20 characters";
-                return null;
-            },
+            schema: sectionSchemas.basic,
         },
         {
+            id: "media",
             label: "Media",
+            keepMounted: true,
             fields: ["mainImage", "images", "video", "video.url", "video.duration", "video.thumbnailUrl", "youtubeId", "externalVideoUrl"],
             render: ({ values, onChange }) => (_jsx(StepMedia, { values: values, onChange: onChange, storeSlug: storeSlug })),
-            validate: (v) => (!v.mainImage ? "A main image is required" : null),
+            schema: sectionSchemas.media,
         },
-        ...(typeSpecificStep ? [typeSpecificStep] : []),
+        ...(typeSpecificSection ? [typeSpecificSection] : []),
         {
+            id: "pricing",
             label: "Pricing",
+            required: true,
+            quick: true,
             fields: ["price", "compareAtPrice", "stockQuantity", "allowOffers", "minOfferPercent", "gstRate", "hsnCode"],
             render: ({ values, onChange }) => (_jsx(StepPricing, { values: values, onChange: onChange, listingType: listingType })),
-            validate: (v) => {
-                if (!v.price)
-                    return "Price is required";
-                if (pluginForMode(listingType).showsStockQuantity &&
-                    (v.stockQuantity === undefined || v.stockQuantity === null)) {
-                    return "Stock quantity is required";
-                }
-                return null;
-            },
+            // 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.
+            schema: z
+                .object({
+                price: z.coerce
+                    .number({ invalid_type_error: "Price is required" })
+                    .positive("Price is required"),
+                stockQuantity: pluginForMode(listingType).showsStockQuantity
+                    ? z.coerce.number({ invalid_type_error: "Stock quantity is required" }).int().min(0)
+                    : z.coerce.number().int().min(0).optional(),
+            })
+                .passthrough(),
         },
         {
+            id: "shipping",
             label: "Shipping",
             fields: ["shippingPaidBy", "pickupAddressId", "insurance", "insuranceCost"],
             render: ({ values, onChange }) => (_jsx(StepShipping, { values: values, onChange: onChange, renderAddressSelector: renderAddressSelector })),
         },
         {
+            id: "publish",
             label: "Publish",
             fields: ["seoTitle", "seoDescription", "isOnSale", "status"],
             render: ({ values, onChange }) => (_jsx(StepPublish, { values: values, onChange: onChange })),
         },
     ];
-    // Field-name → owning-step-index map for FormErrorSummary's step
-    // attribution/jump-to-step links (full-wizard create mode only — quick
-    // and edit modes don't have step navigation).
-    const fieldToStepIndex = useMemo(() => {
-        const map = {};
-        steps.forEach((step, i) => {
-            step.fields?.forEach((field) => { map[field] = i; });
-        });
-        return map;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [steps.length, typeSpecificStep]);
+    /*
+     * One nav for BOTH modes. Create used to be a wizard with its own
+     * fieldToStepIndex map and a separately-composed wizardShellCtx, while edit
+     * rendered the same sections as a single page — two layouts over one set of
+     * content, kept in step by hand.
+     */
+    const { openIds, setOpenIds, goToSection, fieldToSectionIndex, sectionMeta } = useSectionFormNav(sections, draft);
+    /** The one context both modes render through. */
+    const shellCtx = useMemo(() => ({
+        ...baseShellCtx,
+        sections: sectionMeta,
+        onGoToSection: goToSection,
+        fieldToSectionIndex,
+    }), [baseShellCtx, sectionMeta, goToSection, fieldToSectionIndex]);
     // Live validation — re-run on every draft change, not just on submit, so
     // FormErrorSummary and inline field errors both stay current as the
     // seller types (per the "even on-change errors must be shown" requirement).
@@ -410,34 +465,15 @@ export function SellerProductShell({ mode, listingType = "standard", initialValu
         validate(draft);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [draft, validate]);
-    const wizardShellCtx = useMemo(() => ({ ...shellCtx, fieldToStepIndex, goToStep: (n) => setCurrentStep(n) }), [shellCtx, fieldToStepIndex, setCurrentStep]);
-    const handleNext = useCallback(async () => {
-        const step = steps[currentStep];
-        if (step?.validate) {
-            const err = step.validate(draft);
-            if (err) {
-                setStepError(err);
-                return;
-            }
-        }
-        setStepError(null);
-        if (currentStep < steps.length - 1) {
-            setCurrentStep((c) => c + 1);
-        }
-        else {
-            try {
-                await handlePublish();
-            }
-            catch (err) {
-                void normalizeError(err);
-                showToast(err instanceof Error ? err.message : "Something went wrong.", "error");
-            }
-        }
-    }, [currentStep, steps, draft, handlePublish, showToast]);
-    // Step error badges — run each step's validate against current draft
-    const stepValidationErrors = useMemo(() => steps.map((s) => (s.validate ? Boolean(s.validate(draft)) : false)), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [draft]);
+    /*
+     * `handleNext` and `stepValidationErrors` are gone with the wizard.
+     *
+     * The next-gate was the thing SectionForm exists to remove: it ran the
+     * current step's `validate` and REFUSED to advance, so a seller who could
+     * not satisfy step 2 could not reach step 5 to see what else was needed.
+     * Every section is now reachable at any time and the shared submit is what
+     * checks the whole draft.
+     */
     const breadcrumb = mode === "create" ? `Store / ${listingTypeLabel}s / New` : `Store / ${listingTypeLabel}s / Edit`;
     const title = mode === "create"
         ? `New ${listingTypeLabel}`
@@ -452,12 +488,12 @@ export function SellerProductShell({ mode, listingType = "standard", initialValu
                     }) }) }) }));
     }
     if (mode === "create") {
-        return (_jsx(FormShell, { isOpen: true, onClose: handleDiscard, title: title, breadcrumb: breadcrumb, isDirty: isDirty, isLoading: isLoading, previewSlot: previewSlot, splitPreview: !!previewSlot, renderBottomBar: () => (_jsxs(Div, { className: "flex-shrink-0 border-t border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", children: [_jsx(StepFormActions, { currentStep: currentStep, totalSteps: steps.length, onNext: () => void handleNext(), onPrev: currentStep > 0 ? () => setCurrentStep((c) => c - 1) : undefined, completeLabel: `Publish ${listingTypeLabel}`, isLoading: isLoading && currentStep === steps.length - 1, disabled: isLoading }), currentStep === 0 && (_jsx(Div, { paddingX: "x-5", padding: "b-sm", children: _jsx(Button, { variant: "ghost", size: "sm", onClick: () => void handleSave(), disabled: isLoading || !draft.title?.trim(), children: "Save as draft & finish later" }) })), stepError && (_jsx(Text, { className: "text-[var(--appkit-color-error)] px-[1.25rem] pb-[0.75rem]", size: "sm", children: stepError })), _jsx(FormShellContext.Provider, { value: wizardShellCtx, children: _jsx(Div, { paddingX: "x-5", padding: "b-sm", children: _jsx(FormErrorSummary, {}) }) })] })), children: _jsx(FormShellContext.Provider, { value: wizardShellCtx, children: _jsx(StepForm, { steps: steps, values: draft, onChange: update, onComplete: handlePublish, completeLabel: `Publish ${listingTypeLabel}`, currentStep: currentStep, onStepChange: setCurrentStep, isLoading: isLoading, hideActions: true, stepErrors: stepValidationErrors }) }) }));
+        return (_jsx(FormShell, { isOpen: true, onClose: handleDiscard, title: title, breadcrumb: breadcrumb, isDirty: isDirty, isLoading: isLoading, previewSlot: previewSlot, splitPreview: !!previewSlot, renderBottomBar: () => (_jsxs(Div, { className: "flex-shrink-0 border-t border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", children: [_jsx(FormShellContext.Provider, { value: shellCtx, children: _jsx(Div, { paddingX: "x-5", padding: "y-sm", children: _jsx(FormErrorSummary, {}) }) }), _jsx(Div, { paddingX: "x-5", padding: "b-sm", children: _jsxs(Row, { gap: "sm", justify: "between", wrap: true, children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => void handleSave(), disabled: isLoading || !draft.title?.trim(), children: "Save as draft & finish later" }), _jsx(Button, { variant: "primary", onClick: () => void handlePublish(), isLoading: isLoading, disabled: isLoading, children: `Publish ${listingTypeLabel}` })] }) }), stepError && (_jsx(Text, { className: "text-[var(--appkit-color-error)] px-[1.25rem] pb-[0.75rem]", size: "sm", children: stepError }))] })), children: _jsx(FormShellContext.Provider, { value: shellCtx, children: _jsx(SectionForm, { sections: sections, values: draft, onChange: update, onSubmit: handlePublish, schema: sellerProductSchema, openIds: openIds, onOpenChange: setOpenIds, isLoading: isLoading, hideActions: true }) }) }));
     }
     // Edit mode — FormShell with section nav + full form
     const editSections = [
         ...EDIT_SECTIONS,
-        ...(typeSpecificStep ? [{ id: typeSpecificStep.id, label: typeSpecificStep.label }] : []),
+        ...(typeSpecificSection ? [{ id: typeSpecificSection.id, label: typeSpecificSection.label }] : []),
     ];
-    return (_jsx(FormShell, { isOpen: true, onClose: handleDiscard, title: title, breadcrumb: breadcrumb, isDirty: isDirty, isLoading: isLoading, sections: editSections, onSaveDraft: handleSave, onPublish: handlePublish, saveLabel: "Save Changes", publishLabel: "Update", previewSlot: previewSlot, footerTopSlot: _jsx(FormShellContext.Provider, { value: shellCtx, children: _jsx(FormErrorSummary, {}) }), children: _jsx(FormShellContext.Provider, { value: shellCtx, children: _jsxs(Stack, { gap: "lg", children: [_jsxs(Section, { id: "basic", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Basic Info" }), _jsx(StepBasic, { values: draft, onChange: update, renderCategorySelector: renderCategorySelector, renderBrandSelector: renderBrandSelector, renderTemplateSelector: renderTemplateSelector })] }), _jsxs(Section, { id: "media", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Media" }), _jsx(StepMedia, { values: draft, onChange: update, storeSlug: storeSlug })] }), typeSpecificStep && (_jsxs(Section, { id: typeSpecificStep.id, children: [_jsx(Heading, { level: 3, className: "mb-4", children: typeSpecificStep.sectionHeading ?? typeSpecificStep.label }), typeSpecificStep.render({ values: draft, onChange: update, errors: {} })] })), _jsxs(Section, { id: "pricing", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Pricing" }), _jsx(StepPricing, { values: draft, onChange: update, listingType: listingType })] }), _jsxs(Section, { id: "shipping", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Shipping" }), _jsx(StepShipping, { values: draft, onChange: update, renderAddressSelector: renderAddressSelector })] }), _jsxs(Section, { id: "publish", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Publish" }), _jsx(StepPublish, { values: draft, onChange: update }), onSaveAsTemplate && (_jsxs(Div, { className: "mt-4 border-t border-[var(--appkit-color-border)]", padding: "t-md", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onSaveAsTemplate(draft), children: "Save as Template" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-secondary-text)]", size: "xs", children: "Save these settings as a reusable template for future listings." })] }))] })] }) }) }));
+    return (_jsx(FormShell, { isOpen: true, onClose: handleDiscard, title: title, breadcrumb: breadcrumb, isDirty: isDirty, isLoading: isLoading, sections: editSections, onSaveDraft: handleSave, onPublish: handlePublish, saveLabel: "Save Changes", publishLabel: "Update", previewSlot: previewSlot, footerTopSlot: _jsx(FormShellContext.Provider, { value: shellCtx, children: _jsx(FormErrorSummary, {}) }), children: _jsx(FormShellContext.Provider, { value: shellCtx, children: _jsxs(Stack, { gap: "lg", children: [_jsxs(Section, { id: "basic", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Basic Info" }), _jsx(StepBasic, { values: draft, onChange: update, renderCategorySelector: renderCategorySelector, renderBrandSelector: renderBrandSelector, renderTemplateSelector: renderTemplateSelector })] }), _jsxs(Section, { id: "media", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Media" }), _jsx(StepMedia, { values: draft, onChange: update, storeSlug: storeSlug })] }), typeSpecificSection && (_jsxs(Section, { id: typeSpecificSection.id, children: [_jsx(Heading, { level: 3, className: "mb-4", children: typeSpecificSection.sectionHeading ?? typeSpecificSection.label }), typeSpecificSection.render({ values: draft, onChange: update, errors: {} })] })), _jsxs(Section, { id: "pricing", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Pricing" }), _jsx(StepPricing, { values: draft, onChange: update, listingType: listingType })] }), _jsxs(Section, { id: "shipping", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Shipping" }), _jsx(StepShipping, { values: draft, onChange: update, renderAddressSelector: renderAddressSelector })] }), _jsxs(Section, { id: "publish", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Publish" }), _jsx(StepPublish, { values: draft, onChange: update }), onSaveAsTemplate && (_jsxs(Div, { className: "mt-4 border-t border-[var(--appkit-color-border)]", padding: "t-md", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onSaveAsTemplate(draft), children: "Save as Template" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-secondary-text)]", size: "xs", children: "Save these settings as a reusable template for future listings." })] }))] })] }) }) }));
 }

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

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { z } from "zod";
 import { Alert, Badge, Div, FormField, Heading, Row, Stack, Text } from "../../../ui";
 import { StackedViewShell } from "../../../ui";
 import { FormShellContext, useFormShellState, applyZodIssues, FormErrorSummary } from "../../../ui/forms";
 import { StoreAddressSelectorCreate } from "../../stores/components/StoreAddressSelectorCreate";
-import { StepForm } from "../../shell";
+import { SectionForm, useSectionFormNav } from "../../shell";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { normalizeError } from "../../../errors/normalize";
 const shippingDraftSchema = z.object({
@@ -35,12 +35,6 @@ export function SellerShippingView({ apiBase = SELLER_ENDPOINTS.SHIPPING }) {
     const [saving, setSaving] = useState(false);
     const [error, setError] = useState(null);
     const [success, setSuccess] = useState(false);
-    const [currentStep, setCurrentStep] = useState(0);
-    const { shellCtx, setFieldError, clearErrors, validate } = useFormShellState(shippingDraftSchema);
-    useEffect(() => {
-        validate(draft);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [draft, validate]);
     useEffect(() => {
         fetch(apiBase)
             .then((r) => r.json())
@@ -105,33 +99,42 @@ export function SellerShippingView({ apiBase = SELLER_ENDPOINTS.SHIPPING }) {
         }
     };
     const busy = loading || saving;
-    const steps = [
+    const sections = [
         {
+            id: "carrier",
             label: "Carrier",
+            required: true,
+            quick: true,
             fields: ["customCarrierName", "customShippingPrice"],
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Shipping Carrier" }), current && (_jsx(Row, { className: "mb-2", align: "center", gap: "sm", children: _jsx(Badge, { variant: current.isConfigured ? "success" : "warning", children: current.isConfigured ? "Configured" : "Not configured" }) })), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Set a fixed shipping fee and carrier name for all orders. You enter the carrier and tracking number yourself when you ship each order." }), _jsxs(Stack, { gap: "md", className: "mt-2", children: [_jsx(FormField, { name: "customCarrierName", label: "Carrier Name", type: "text", value: values.customCarrierName, onChange: (v) => onChange({ customCarrierName: v }), placeholder: "e.g. India Post, DTDC, Delhivery", disabled: busy }), _jsx(FormField, { name: "customShippingPrice", label: "Shipping Price (\u20B9)", type: "number", value: values.customShippingPrice, onChange: (v) => onChange({ customShippingPrice: v }), placeholder: "0 for free shipping", helpText: "Charged to buyer at checkout. Enter 0 for free shipping.", disabled: busy })] })] })),
         },
         {
+            id: "pickup-address",
             label: "Pickup Address",
             fields: ["pickupAddressId"],
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Pickup Address" }), current?.pickupAddress && (_jsxs(Alert, { variant: "info", children: ["Current pickup: ", current.pickupAddress.locationName ?? "", current.pickupAddress.city ? `, ${current.pickupAddress.city}` : ""] })), _jsx(StoreAddressSelectorCreate, { value: values.pickupAddressId, onChange: (id) => onChange({ pickupAddressId: id }), label: "Pickup Address", disabled: busy })] })),
         },
         {
+            id: "rules",
             label: "Rules",
             fields: ["freeShippingThreshold", "fragileSurcharge"],
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Shipping Rules" }), _jsx(FormField, { name: "freeShippingThreshold", label: "Free Shipping Threshold (\u20B9)", type: "number", value: values.freeShippingThreshold, onChange: (v) => onChange({ freeShippingThreshold: v }), placeholder: "e.g. 500 \u2014 orders above this get free shipping", helpText: "Leave blank or 0 to disable free shipping offers.", disabled: busy }), _jsx(FormField, { name: "fragileSurcharge", label: "Fragile Item Surcharge (\u20B9)", type: "number", value: values.fragileSurcharge, onChange: (v) => onChange({ fragileSurcharge: v }), placeholder: "e.g. 50 \u2014 added for items marked fragile", helpText: "Leave blank or 0 to disable the fragile surcharge.", disabled: busy })] })),
         },
     ];
-    const fieldToStepIndex = useMemo(() => {
-        const map = {};
-        steps.forEach((step, i) => {
-            step.fields?.forEach((field) => { map[field] = i; });
-        });
-        return map;
+    /*
+     * `useSectionFormNav` replaces the hand-rolled fieldToStepIndex map and the
+     * manually-composed wizardShellCtx. The old shape had to be kept in sync by
+     * hand — and `useMemo(..., [steps.length])` meant a step whose FIELDS
+     * changed without changing the COUNT never recomputed its map, so
+     * FormErrorSummary could jump to the wrong step.
+     */
+    const { openIds, setOpenIds, goToSection, fieldToSectionIndex, sectionMeta } = useSectionFormNav(sections, draft);
+    const { shellCtx, setFieldError, clearErrors, validate } = useFormShellState(shippingDraftSchema, { sections: sectionMeta, onGoToSection: goToSection, fieldToSectionIndex });
+    useEffect(() => {
+        validate(draft);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [steps.length]);
-    const wizardShellCtx = useMemo(() => ({ ...shellCtx, fieldToStepIndex, goToStep: (n) => setCurrentStep(n) }), [shellCtx, fieldToStepIndex, setCurrentStep]);
+    }, [draft, validate]);
     return (_jsx(StackedViewShell, { portal: "seller", title: "Shipping Configuration", sections: [
-            _jsxs(Div, { children: [error && _jsx(Alert, { variant: "error", className: "mb-4", children: error }), success && _jsx(Alert, { variant: "success", className: "mb-4", children: "Shipping configuration saved." }), _jsxs(FormShellContext.Provider, { value: wizardShellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(StepForm, { steps: steps, values: draft, onChange: update, onComplete: handleSave, formId: "seller-shipping", currentStep: currentStep, onStepChange: setCurrentStep, completeLabel: "Save Configuration", isLoading: busy })] })] }, "shipping"),
+            _jsxs(Div, { children: [error && _jsx(Alert, { variant: "error", className: "mb-4", children: error }), success && _jsx(Alert, { variant: "success", className: "mb-4", children: "Shipping configuration saved." }), _jsxs(FormShellContext.Provider, { value: shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: draft, onChange: update, onSubmit: handleSave, schema: shippingDraftSchema, openIds: openIds, onOpenChange: setOpenIds, submitLabel: "Save Configuration", isLoading: busy })] })] }, "shipping"),
         ] }));
 }