@mohasinac/appkit 4.30.19 → 4.31.0

package/dist/features/admin/components/AdminFaqEditorView.js

@@ -1,23 +1,55 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Row } from "@mohasinac/appkit/ui";
 import { useApiMutation } from "@mohasinac/appkit/client";
 import React from "react";
 import { useQuery } from "@tanstack/react-query";
 import { z } from "zod";
-import { Button, ConfirmDeleteModal, Div, Form, Input, RichTextEditor, Select, Stack, StackedViewShell, TagInput, Text, Toggle, useToast } from "../../../ui";
-import { FieldInput, FormErrorSummary } from "../../../ui/forms";
+import { ConfirmDeleteModal, Div, Input, RichTextEditor, Select, Stack, StackedViewShell, TagInput, Text, Toggle, useToast } from "../../../ui";
+import { FieldInput, FormErrorSummary, FormShellContext, useFormShellState } from "../../../ui/forms";
+import { SectionForm, useSectionFormNav } from "../../shell";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+/**
+ * Matches the draft this form actually holds, and the payload it actually
+ * sends.
+ *
+ * `answer` was declared as `{ text, format }` while both the state and the
+ * request body are a plain HTML string — the route wraps it (see CLAUDE.md
+ * Root Cause #39). Nothing ever called `validate()`, so the mismatch was
+ * invisible; under `<SectionForm>`, which parses the draft on every change, it
+ * would have produced a permanent error on a field the user cannot fix.
+ * `.passthrough()` similarly hid seven unvalidated fields.
+ */
 const faqFormSchema = z.object({
     question: z.string().min(5, "Question must be at least 5 characters").max(500),
-    answer: z.object({
-        text: z.string().min(1, "Answer is required"),
-        format: z.enum(["html", "markdown", "text"]).optional(),
-    }).passthrough(),
+    slug: z
+        .string()
+        .regex(/^faq-[a-z0-9-]*$/, "Must start with 'faq-' and use lowercase letters, digits and hyphens")
+        .optional()
+        .or(z.literal("")),
+    answer: z.string().min(1, "Answer is required"),
     category: z.string().min(1, "Category is required"),
+    tags: z.array(z.string()).optional(),
+    order: z.number().int().min(0).optional(),
+    priority: z.number().int().min(0).optional(),
     isActive: z.boolean().optional(),
-}).passthrough();
+    isPinned: z.boolean().optional(),
+    showOnHomepage: z.boolean().optional(),
+    showInFooter: z.boolean().optional(),
+});
+const EMPTY_FAQ = {
+    question: "",
+    slug: "",
+    answer: "",
+    category: "general",
+    tags: [],
+    order: 0,
+    priority: 0,
+    isActive: true,
+    isPinned: false,
+    showOnHomepage: false,
+    showInFooter: false,
+};
 const __P = {
     p4: "p-[var(--appkit-space-4)]",
 };
@@ -44,19 +76,17 @@ function toSlug(str) {
 // --- Component ---------------------------------------------------------------
 export function AdminFaqEditorView({ faqId, onSaved, onDeleted, embedded, ...rest }) {
     const isEdit = Boolean(faqId);
-    const [question, setQuestion] = React.useState("");
-    const [slug, setSlug] = React.useState("");
+    const [values, setValues] = React.useState(EMPTY_FAQ);
     const [slugManual, setSlugManual] = React.useState(false);
-    const [answer, setAnswer] = React.useState("");
-    const [category, setCategory] = React.useState("general");
-    const [tags, setTags] = React.useState([]);
-    const [order, setOrder] = React.useState(0);
-    const [priority, setPriority] = React.useState(0);
-    const [isActive, setIsActive] = React.useState(true);
-    const [isPinned, setIsPinned] = React.useState(false);
-    const [showOnHomepage, setShowOnHomepage] = React.useState(false);
-    const [showInFooter, setShowInFooter] = React.useState(false);
     const [deleteConfirmOpen, setDeleteConfirmOpen] = React.useState(false);
+    const handleChange = React.useCallback((partial) => {
+        setValues((prev) => {
+            const next = Object.assign({}, prev, partial);
+            if (partial.question !== undefined && !slugManual)
+                next.slug = toSlug(String(partial.question));
+            return next;
+        });
+    }, [slugManual]);
     const { showToast } = useToast();
     // --- load existing FAQ (edit mode) ---
     const faqQuery = useQuery({
@@ -71,40 +101,37 @@ export function AdminFaqEditorView({ faqId, onSaved, onDeleted, embedded, ...res
         const f = faqQuery.data;
         if (!f)
             return;
-        setQuestion(f.question ?? "");
-        setSlug(f["seo.slug"] ?? f.id ?? "");
         setSlugManual(true);
-        setAnswer(typeof f.answer === "object" ? (f.answer?.text ?? "") : (f.answer ?? ""));
-        setCategory(f.category ?? "general");
-        setTags(Array.isArray(f.tags) ? f.tags : []);
-        setOrder(typeof f.order === "number" ? f.order : 0);
-        setPriority(typeof f.priority === "number" ? f.priority : 0);
-        setIsActive(f.isActive ?? true);
-        setIsPinned(f.isPinned ?? false);
-        setShowOnHomepage(f.showOnHomepage ?? false);
-        setShowInFooter(f.showInFooter ?? false);
+        setValues({
+            question: f.question ?? "",
+            slug: f["seo.slug"] ?? f.id ?? "",
+            answer: typeof f.answer === "object" ? (f.answer?.text ?? "") : (f.answer ?? ""),
+            category: f.category ?? "general",
+            tags: Array.isArray(f.tags) ? f.tags : [],
+            order: typeof f.order === "number" ? f.order : 0,
+            priority: typeof f.priority === "number" ? f.priority : 0,
+            isActive: f.isActive ?? true,
+            isPinned: f.isPinned ?? false,
+            showOnHomepage: f.showOnHomepage ?? false,
+            showInFooter: f.showInFooter ?? false,
+        });
     }, [faqQuery.data]);
-    const handleQuestionChange = (value) => {
-        setQuestion(value);
-        if (!slugManual)
-            setSlug(toSlug(value));
-    };
     // --- save ---
     const saveMutation = useApiMutation({
         errorMessage: "Failed to save FAQ.",
         mutationFn: async () => {
             const payload = {
-                question,
-                slug: slug || toSlug(question),
-                answer,
-                category,
-                tags,
-                order,
-                priority,
-                isActive,
-                isPinned,
-                showOnHomepage,
-                showInFooter,
+                question: values.question,
+                slug: values.slug || toSlug(values.question),
+                answer: values.answer,
+                category: values.category,
+                tags: values.tags,
+                order: values.order,
+                priority: values.priority,
+                isActive: values.isActive,
+                isPinned: values.isPinned,
+                showOnHomepage: values.showOnHomepage,
+                showInFooter: values.showInFooter,
             };
             if (isEdit) {
                 return apiClient.put(ADMIN_ENDPOINTS.FAQ_BY_ID(faqId), payload);
@@ -129,18 +156,45 @@ export function AdminFaqEditorView({ faqId, onSaved, onDeleted, embedded, ...res
         },
     });
     const isSubmitting = saveMutation.isPending || faqQuery.isLoading;
-    const canSave = Boolean(question.trim()) && Boolean(answer.trim());
-    const formSection = (_jsxs(_Fragment, { children: [_jsx(Form, { schema: faqFormSchema, onSubmit: (e) => e.preventDefault(), spacing: "md", children: ({ setFieldError, clearErrors }) => (_jsxs(_Fragment, { children: [_jsx(FieldInput, { name: "question", label: "Question", value: question, onChange: (v) => handleQuestionChange(v), required: true, placeholder: "e.g. How does bidding work on LetItRip?" }), _jsx(Input, { label: "Slug", value: slug, onChange: (e) => {
-                                setSlug(e.target.value);
-                                setSlugManual(true);
-                            }, placeholder: "faq-how-does-bidding-work", helperText: "Auto-generated from question. Must start with 'faq-'." }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", color: "muted", children: "Answer" }), _jsx(RichTextEditor, { value: answer, onChange: setAnswer, placeholder: "Write a clear, helpful answer...", minHeightClassName: "min-h-[200px]" })] }), _jsxs(Div, { layout: "grid", gap: "4", className: "grid-cols-2", children: [_jsx(Select, { label: "Category", options: CATEGORY_OPTIONS, value: category, onValueChange: setCategory }), _jsx(Input, { label: "Display order", value: String(order), onChange: (e) => setOrder(parseInt(e.target.value, 10) || 0), type: "number", min: 0, helperText: "Lower = shown first within category." })] }), _jsx(Input, { label: "Priority", value: String(priority), onChange: (e) => setPriority(parseInt(e.target.value, 10) || 0), type: "number", min: 0, helperText: "Higher priority FAQs appear first in search results." }), _jsx(TagInput, { label: "Tags", value: tags, onChange: setTags, placeholder: "e.g. shipping, pokemon, returns" }), _jsxs(Stack, { className: `${__P.p4}`, gap: "3", rounded: "lg", border: "default", children: [_jsx(Text, { size: "sm", weight: "medium", color: "muted", children: "Visibility" }), _jsx(Toggle, { label: "Active (visible to users)", checked: isActive, onChange: setIsActive }), _jsx(Toggle, { label: "Pinned (always shown at top)", checked: isPinned, onChange: setIsPinned }), _jsx(Toggle, { label: "Show on homepage FAQ section", checked: showOnHomepage, onChange: setShowOnHomepage }), _jsx(Toggle, { label: "Show in footer FAQ links", checked: showInFooter, onChange: setShowInFooter })] }), _jsx(FormErrorSummary, {}), _jsxs(Row, { gap: "3", padding: "t-xs", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !canSave || isSubmitting, onClick: () => {
-                                        clearErrors();
-                                        if (!question.trim()) {
-                                            setFieldError("question", "Question is required");
-                                            return;
-                                        }
-                                        saveMutation.mutate();
-                                    }, children: isEdit ? "Save changes" : "Create FAQ" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => setDeleteConfirmOpen(true), children: "Delete FAQ" }))] })] })) }, "faq-form"), deleteConfirmOpen && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete FAQ", message: "Delete this FAQ? This cannot be undone.", onConfirm: () => { deleteMutation.mutate(); setDeleteConfirmOpen(false); }, onClose: () => setDeleteConfirmOpen(false), isDeleting: deleteMutation.isPending }))] }));
+    const sections = React.useMemo(() => [
+        {
+            id: "basics",
+            label: "Question & answer",
+            required: true,
+            fields: ["question", "slug", "answer"],
+            // The rich-text editor holds an uncommitted buffer.
+            keepMounted: true,
+            render: ({ values: v, onChange, errors }) => (_jsxs(Stack, { gap: "md", children: [_jsx(FieldInput, { name: "question", label: "Question", value: String(v.question ?? ""), onChange: (val) => onChange({ question: val }), required: true, placeholder: "e.g. How does bidding work on LetItRip?", error: errors.question }), _jsx(Input, { label: "Slug", value: String(v.slug ?? ""), onChange: (e) => {
+                            setSlugManual(true);
+                            onChange({ slug: e.target.value });
+                        }, placeholder: "faq-how-does-bidding-work", helperText: "Auto-generated from the question until you edit it. Must start with 'faq-'.", error: errors.slug }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", color: "muted", children: "Answer" }), _jsx(RichTextEditor, { value: String(v.answer ?? ""), onChange: (val) => onChange({ answer: val }), placeholder: "Write a clear, helpful answer...", minHeightClassName: "min-h-[200px]" }), errors.answer && (_jsx(Text, { size: "xs", color: "error", role: "alert", children: errors.answer }))] })] })),
+        },
+        {
+            id: "classification",
+            label: "Filing & ordering",
+            fields: ["category", "tags", "order", "priority"],
+            render: ({ values: v, onChange, errors }) => (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { layout: "grid", gap: "4", className: "grid-cols-2", children: [_jsx(Select, { label: "Category", options: CATEGORY_OPTIONS, value: String(v.category ?? "general"), onValueChange: (val) => onChange({ category: val }), error: errors.category }), _jsx(Input, { label: "Display order", value: String(v.order ?? 0), onChange: (e) => onChange({ order: parseInt(e.target.value, 10) || 0 }), type: "number", min: 0, helperText: "Lower = shown first within category.", error: errors.order })] }), _jsx(Input, { label: "Priority", value: String(v.priority ?? 0), onChange: (e) => onChange({ priority: parseInt(e.target.value, 10) || 0 }), type: "number", min: 0, helperText: "Higher priority FAQs appear first in search results.", error: errors.priority }), _jsx(TagInput, { label: "Tags", value: Array.isArray(v.tags) ? v.tags : [], onChange: (val) => onChange({ tags: val }), placeholder: "e.g. shipping, pokemon, returns" })] })),
+        },
+        {
+            id: "visibility",
+            label: "Visibility",
+            fields: ["isActive", "isPinned", "showOnHomepage", "showInFooter"],
+            render: ({ values: v, onChange }) => (_jsxs(Stack, { gap: "3", children: [_jsx(Toggle, { label: "Active (visible to users)", checked: v.isActive ?? true, onChange: (c) => onChange({ isActive: c }) }), _jsx(Toggle, { label: "Pinned (always shown at top)", checked: v.isPinned ?? false, onChange: (c) => onChange({ isPinned: c }) }), _jsx(Toggle, { label: "Show on homepage FAQ section", checked: v.showOnHomepage ?? false, onChange: (c) => onChange({ showOnHomepage: c }) }), _jsx(Toggle, { label: "Show in footer FAQ links", checked: v.showInFooter ?? false, onChange: (c) => onChange({ showInFooter: c }) })] })),
+        },
+    ], []);
+    const nav = useSectionFormNav(sections, values);
+    const { shellCtx } = useFormShellState(faqFormSchema, {
+        sections: nav.sectionMeta,
+        onGoToSection: nav.goToSection,
+        fieldToSectionIndex: nav.fieldToSectionIndex,
+    });
+    const formSection = (_jsxs(_Fragment, { children: [_jsxs(FormShellContext.Provider, { value: shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: values, onChange: handleChange, onSubmit: () => saveMutation.mutate(), schema: faqFormSchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, isLoading: isSubmitting, submitLabel: isEdit ? "Save changes" : "Create FAQ", destructiveAction: isEdit
+                            ? {
+                                label: "Delete FAQ",
+                                onClick: () => setDeleteConfirmOpen(true),
+                                disabled: deleteMutation.isPending,
+                            }
+                            : undefined })] }), deleteConfirmOpen && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete FAQ", message: "Delete this FAQ? This cannot be undone.", onConfirm: () => { deleteMutation.mutate(); setDeleteConfirmOpen(false); }, onClose: () => setDeleteConfirmOpen(false), isDeleting: deleteMutation.isPending }))] }));
     if (embedded) {
         return _jsx(Div, { className: `${__O.yAuto} ${__P.p4}`, children: formSection });
     }

package/dist/features/admin/components/AdminFeatureEditorView.js

@@ -4,10 +4,13 @@ import { Row } from "@mohasinac/appkit/ui";
 import { useApiMutation } from "@mohasinac/appkit/client";
 import React from "react";
 import { useQuery } from "@tanstack/react-query";
-import { Button, Checkbox, ConfirmDeleteModal, Div, Form, Grid, Input, Label, Select, Stack, StackedViewShell, Text, Toggle, useToast, } from "../../../ui";
+import { Checkbox, ConfirmDeleteModal, Div, Label, StackedViewShell, Text, useToast, } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { 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 { productFeatureFormSchema } from "../../products/schemas/product-features.validators";
 import { PRODUCT_FEATURE_CATEGORY_OPTIONS, PRODUCT_FEATURE_DEFAULT_DISPLAY_ORDER, PRODUCT_FEATURE_ICON_COLOR_OPTIONS, PRODUCT_FEATURE_PRODUCT_TYPE_OPTIONS, PRODUCT_FEATURE_SCOPE_OPTIONS, } from "../../products/constants/product-features.constants";
 const __P = {
@@ -29,17 +32,20 @@ const TOAST = {
 export function AdminFeatureEditorView({ featureId, fixedScope, fixedStoreId, embedded, endpointOverride, onSaved, onDeleted, ...rest }) {
     const isEdit = Boolean(featureId);
     const { showToast } = useToast();
-    const [label, setLabel] = React.useState("");
-    const [description, setDescription] = React.useState("");
-    const [icon, setIcon] = React.useState("");
-    const [iconColor, setIconColor] = React.useState("");
-    const [category, setCategory] = React.useState("platform");
-    const [scope, setScope] = React.useState(fixedScope ?? "platform");
-    const [productTypes, setProductTypes] = React.useState(["all"]);
-    const [storeId, setStoreId] = React.useState(fixedStoreId ?? "");
-    const [isActive, setIsActive] = React.useState(true);
+    const [form, setForm] = React.useState({
+        label: "",
+        description: "",
+        icon: "",
+        iconColor: "",
+        category: "platform",
+        scope: fixedScope ?? "platform",
+        productTypes: ["all"],
+        storeId: fixedStoreId ?? "",
+        isActive: true,
+        displayOrder: String(PRODUCT_FEATURE_DEFAULT_DISPLAY_ORDER),
+    });
     const [deleteConfirmOpen, setDeleteConfirmOpen] = React.useState(false);
-    const [displayOrder, setDisplayOrder] = React.useState(String(PRODUCT_FEATURE_DEFAULT_DISPLAY_ORDER));
+    const patch = (partial) => setForm((prev) => Object.assign({}, prev, partial));
     const createEndpoint = endpointOverride?.create ?? ADMIN_ENDPOINTS.PRODUCT_FEATURES;
     const byIdEndpoint = endpointOverride?.byId ?? ADMIN_ENDPOINTS.PRODUCT_FEATURE_BY_ID;
     const featureQuery = useQuery({
@@ -57,50 +63,58 @@ export function AdminFeatureEditorView({ featureId, fixedScope, fixedStoreId, em
             const body = res?.data ?? res;
             return body?.items ?? [];
         },
-        enabled: scope === "store" && !fixedStoreId,
+        enabled: form.scope === "store" && !fixedStoreId,
     });
     React.useEffect(() => {
         const f = featureQuery.data;
         if (!f)
             return;
-        setLabel(f.label ?? "");
-        setDescription(f.description ?? "");
-        setIcon(f.icon ?? "");
-        setIconColor(f.iconColor ?? "");
-        setCategory(f.category ?? "platform");
-        if (!fixedScope)
-            setScope(f.scope ?? "platform");
-        setProductTypes(f.productTypes ?? ["all"]);
-        if (!fixedStoreId)
-            setStoreId(f.storeId ?? "");
-        setIsActive(f.isActive ?? true);
-        setDisplayOrder(f.displayOrder !== undefined
-            ? String(f.displayOrder)
-            : String(PRODUCT_FEATURE_DEFAULT_DISPLAY_ORDER));
+        patch({
+            label: f.label ?? "",
+            description: f.description ?? "",
+            icon: f.icon ?? "",
+            iconColor: f.iconColor ?? "",
+            category: f.category ?? "platform",
+            // A fixed scope/store comes from the mounting page and outranks the record.
+            ...(fixedScope ? {} : { scope: f.scope ?? "platform" }),
+            productTypes: f.productTypes ?? ["all"],
+            ...(fixedStoreId ? {} : { storeId: f.storeId ?? "" }),
+            isActive: f.isActive ?? true,
+            displayOrder: f.displayOrder !== undefined
+                ? String(f.displayOrder)
+                : String(PRODUCT_FEATURE_DEFAULT_DISPLAY_ORDER),
+        });
     }, [featureQuery.data, fixedScope, fixedStoreId]);
     const toggleProductType = (value) => {
-        setProductTypes((prev) => {
+        setForm((prev) => {
             if (value === "all")
-                return ["all"];
-            const next = prev.filter((v) => v !== "all");
-            return next.includes(value)
-                ? next.filter((v) => v !== value)
-                : [...next, value];
+                return { ...prev, productTypes: ["all"] };
+            const next = prev.productTypes.filter((v) => v !== "all");
+            return {
+                ...prev,
+                productTypes: next.includes(value)
+                    ? next.filter((v) => v !== value)
+                    : [...next, value],
+            };
         });
     };
     const saveMutation = useApiMutation({
+        errorMessage: "Failed to save feature.",
         mutationFn: async () => {
+            // `visibleValues` drops `storeId` when the scope is not "store", so a
+            // store picked and then abandoned cannot ride along on a platform feature.
+            const draft = visibleValues(productFeatureFormSchema, form);
             const payload = {
-                label,
-                description: description || undefined,
-                icon,
-                iconColor: iconColor || undefined,
-                category,
-                scope,
-                productTypes: productTypes.length === 0 ? ["all"] : productTypes,
-                storeId: scope === "store" ? storeId || undefined : undefined,
-                isActive,
-                displayOrder: Number(displayOrder) || PRODUCT_FEATURE_DEFAULT_DISPLAY_ORDER,
+                label: form.label,
+                description: form.description || undefined,
+                icon: form.icon,
+                iconColor: form.iconColor || undefined,
+                category: form.category,
+                scope: form.scope,
+                productTypes: form.productTypes.length === 0 ? ["all"] : form.productTypes,
+                storeId: draft.storeId || undefined,
+                isActive: form.isActive,
+                displayOrder: Number(form.displayOrder) || PRODUCT_FEATURE_DEFAULT_DISPLAY_ORDER,
             };
             if (isEdit) {
                 return apiClient.put(byIdEndpoint(featureId), payload);
@@ -117,6 +131,7 @@ export function AdminFeatureEditorView({ featureId, fixedScope, fixedStoreId, em
         },
     });
     const deleteMutation = useApiMutation({
+        errorMessage: "Failed to delete feature.",
         mutationFn: () => apiClient.delete(byIdEndpoint(featureId)),
         onSuccess: () => {
             showToast(TOAST.DELETED, "success");
@@ -142,32 +157,57 @@ export function AdminFeatureEditorView({ featureId, fixedScope, fixedStoreId, em
      * reports what is actually wrong, on the field itself.
      */
     const isDisabled = isSubmitting;
-    const formSection = (_jsx(Form, { schema: productFeatureFormSchema, onSubmit: (e) => e.preventDefault(), children: ({ setFieldError, clearErrors }) => (_jsxs(Stack, { gap: "md", children: [_jsx(FormErrorSummary, {}), _jsx(Input, { label: "Label", value: label, onChange: (e) => setLabel(e.target.value), required: true, placeholder: "e.g. Free Shipping", helperText: "Shown on product cards and detail pages." }), _jsx(Input, { label: "Description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Optional \u2014 shown as a tooltip on the badge." }), _jsxs(Grid, { cols: "halves", gap: "md", children: [_jsx(Input, { label: "Icon", value: icon, onChange: (e) => setIcon(e.target.value), required: true, placeholder: "truck", helperText: "Icon-set name key (e.g. truck, star, trophy) OR an SVG path starting with M." }), _jsx(Select, { label: "Icon colour", value: iconColor, onChange: (e) => setIconColor(e.target.value), options: PRODUCT_FEATURE_ICON_COLOR_OPTIONS })] }), _jsxs(Grid, { cols: "halves", gap: "md", children: [_jsx(Select, { label: "Category", value: category, onChange: (e) => setCategory(e.target.value), options: PRODUCT_FEATURE_CATEGORY_OPTIONS, required: true }), _jsx(Input, { label: "Display order", value: displayOrder, onChange: (e) => setDisplayOrder(e.target.value), type: "number", min: 0 })] }), _jsxs(Div, { children: [_jsx(Text, { className: FIELD_LABEL_CLASS, children: "Applies to" }), _jsx(Row, { gap: "sm", wrap: true, className: "mt-2", children: PRODUCT_FEATURE_PRODUCT_TYPE_OPTIONS.map((opt) => {
-                                const checked = productTypes.includes(opt.value);
-                                const pillClass = `${PILL_BASE_CLASS} ${checked ? PILL_CHECKED_CLASS : PILL_UNCHECKED_CLASS}`;
-                                return (_jsxs(Label, { className: pillClass, children: [_jsx(Checkbox, { bare: true, className: "sr-only", checked: checked, onChange: () => toggleProductType(opt.value) }), opt.label] }, opt.value));
-                            }) })] }), !fixedScope && (_jsx(Select, { label: "Scope", value: scope, onChange: (e) => setScope(e.target.value), options: PRODUCT_FEATURE_SCOPE_OPTIONS })), scope === "store" && !fixedStoreId && (_jsx(Select, { label: "Store", value: storeId, onChange: (e) => setStoreId(e.target.value), options: storeOptions, required: true, helperText: "Store-scope features are visible only on this store's listings." })), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive }), _jsxs(Row, { gap: "3", padding: "t-xs", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: isDisabled, onClick: () => {
-                                // Parse before saving. This form had NO validation at all: the
-                                // only guard was `required` on the inputs, an HTML attribute
-                                // that any programmatic submit bypasses, and the max lengths /
-                                // displayOrder bounds / productTypes minimum were never checked
-                                // client-side at all.
-                                clearErrors();
-                                const parsed = productFeatureFormSchema.safeParse({
-                                    label, description: description || undefined,
-                                    icon, iconColor: iconColor || undefined,
-                                    category, scope,
-                                    productTypes: productTypes.length === 0 ? ["all"] : productTypes,
-                                    storeId: scope === "store" ? storeId || undefined : undefined,
-                                    isActive,
-                                    displayOrder: Number(displayOrder) || PRODUCT_FEATURE_DEFAULT_DISPLAY_ORDER,
-                                });
-                                if (!parsed.success) {
-                                    applyZodIssues(parsed.error.issues, setFieldError);
-                                    return;
-                                }
-                                saveMutation.mutate();
-                            }, children: isEdit ? "Save changes" : "Create feature" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => setDeleteConfirmOpen(true), children: "Delete" }))] })] })) }, "feature-form"));
+    const sections = React.useMemo(() => buildSectionsFromSchema(productFeatureFormSchema, {
+        options: {
+            iconColor: [...PRODUCT_FEATURE_ICON_COLOR_OPTIONS],
+            category: [...PRODUCT_FEATURE_CATEGORY_OPTIONS],
+            scope: [...PRODUCT_FEATURE_SCOPE_OPTIONS],
+            storeId: storeOptions,
+        },
+        renderers: {
+            /*
+             * A pill group, not a list editor. `kind: "list"` renders the
+             * generator's disabled placeholder, which for a required multi-select
+             * would be an unsubmittable form.
+             */
+            productTypes: ({ values }) => (_jsxs(Div, { children: [_jsx(Text, { className: FIELD_LABEL_CLASS, children: "Applies to" }), _jsx(Row, { gap: "sm", wrap: true, className: "mt-2", children: PRODUCT_FEATURE_PRODUCT_TYPE_OPTIONS.map((opt) => {
+                            const checked = values.productTypes.includes(opt.value);
+                            const pillClass = `${PILL_BASE_CLASS} ${checked ? PILL_CHECKED_CLASS : PILL_UNCHECKED_CLASS}`;
+                            return (_jsxs(Label, { className: pillClass, children: [_jsx(Checkbox, { bare: true, className: "sr-only", checked: checked, onChange: () => toggleProductType(opt.value) }), opt.label] }, opt.value));
+                        }) })] })),
+            /*
+             * `fixedScope` / `fixedStoreId` come from the MOUNTING PAGE, not from
+             * the draft, so they cannot be `when` predicates — those see values
+             * only. Returning null is how a prop-driven hide is expressed.
+             */
+            ...(fixedScope ? { scope: () => null } : {}),
+            ...(fixedStoreId ? { storeId: () => null } : {}),
+        },
+    }), [storeOptions, fixedScope, fixedStoreId]);
+    const nav = useSectionFormNav(sections, form, { scope: "admin:feature-editor" });
+    const { shellCtx, setFieldError, clearErrors } = useFormShellState(productFeatureFormSchema, {
+        sections: nav.sectionMeta,
+        onGoToSection: nav.goToSection,
+        fieldToSectionIndex: nav.fieldToSectionIndex,
+    });
+    const onSubmit = () => {
+        clearErrors();
+        const draft = visibleValues(productFeatureFormSchema, form);
+        const parsed = productFeatureFormSchema.safeParse({
+            ...draft,
+            description: form.description || undefined,
+            iconColor: form.iconColor || undefined,
+            productTypes: form.productTypes.length === 0 ? ["all"] : form.productTypes,
+            storeId: draft.storeId || undefined,
+            displayOrder: Number(form.displayOrder) || PRODUCT_FEATURE_DEFAULT_DISPLAY_ORDER,
+        });
+        if (!parsed.success) {
+            applyZodIssues(parsed.error.issues, setFieldError);
+            return;
+        }
+        saveMutation.mutate();
+    };
+    const formSection = (_jsxs(FormShellContext.Provider, { value: shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: form, onChange: patch, onSubmit: onSubmit, schema: productFeatureFormSchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, isLoading: isSubmitting, submitLabel: isEdit ? "Save changes" : "Create feature", destructiveAction: isEdit ? { label: "Delete", onClick: () => setDeleteConfirmOpen(true) } : undefined })] }));
     const deleteModal = deleteConfirmOpen && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Feature", message: DELETE_CONFIRM_TEXT, onConfirm: () => { deleteMutation.mutate(); setDeleteConfirmOpen(false); }, onClose: () => setDeleteConfirmOpen(false), isDeleting: deleteMutation.isPending }));
     if (embedded) {
         return _jsxs(Div, { className: `${__O.yAuto} ${__P.p4}`, children: [formSection, deleteModal] });

package/dist/features/admin/components/AdminNavEditorView.js

@@ -1,13 +1,22 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useApiMutation } from "@mohasinac/appkit/client";
 import React from "react";
-import { Button, Form, FormActions, Input, Select, SideDrawer, Toggle, useToast, } from "../../../ui";
+import { Div, SideDrawer, useToast } from "../../../ui";
+import { FormShellContext, useFormShellState } from "../../../ui/forms/FormShell";
+import { SectionForm, useSectionFormNav, buildSectionsFromSchema } from "../../shell";
+const EMPTY_NAV_ITEM = {
+    label: "",
+    href: "",
+    icon: "",
+    order: 0,
+    parentId: "",
+    isVisible: true,
+};
 import { FormErrorSummary, applyZodIssues } from "../../../ui/forms";
 import { navItemFormSchema } from "../schemas/nav-item-form";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
-import { ROUTES } from "../../../next/routing/route-map";
 // --- Constants ---------------------------------------------------------------
 const ICON_OPTIONS = [
     { label: "None", value: "" },
@@ -26,28 +35,23 @@ const ICON_OPTIONS = [
 // --- Component ---------------------------------------------------------------
 export function AdminNavEditorView({ open, onClose, onSaved, item, parentOptions = [], }) {
     const isEdit = Boolean(item?.id);
-    const [label, setLabel] = React.useState("");
-    const [href, setHref] = React.useState("");
-    const [icon, setIcon] = React.useState("");
-    const [order, setOrder] = React.useState(0);
-    const [parentId, setParentId] = React.useState("");
-    const [isVisible, setIsVisible] = React.useState(true);
+    const [values, setValues] = React.useState(EMPTY_NAV_ITEM);
+    const handleChange = React.useCallback((partial) => {
+        setValues((prev) => Object.assign({}, prev, partial));
+    }, []);
     React.useEffect(() => {
         if (open && item) {
-            setLabel(item.label ?? "");
-            setHref(item.href ?? "");
-            setIcon(item.icon ?? "");
-            setOrder(item.order ?? 0);
-            setParentId(item.parentId ?? "");
-            setIsVisible(item.isVisible ?? true);
+            setValues({
+                label: item.label ?? "",
+                href: item.href ?? "",
+                icon: item.icon ?? "",
+                order: item.order ?? 0,
+                parentId: item.parentId ?? "",
+                isVisible: item.isVisible ?? true,
+            });
         }
         else if (!open) {
-            setLabel("");
-            setHref("");
-            setIcon("");
-            setOrder(0);
-            setParentId("");
-            setIsVisible(true);
+            setValues(EMPTY_NAV_ITEM);
         }
     }, [open, item]);
     const { showToast } = useToast();
@@ -55,12 +59,12 @@ export function AdminNavEditorView({ open, onClose, onSaved, item, parentOptions
         errorMessage: "Failed to save nav item.",
         mutationFn: async () => {
             const payload = {
-                label,
-                href,
-                icon: icon || undefined,
-                order,
-                parentId: parentId || undefined,
-                isVisible,
+                label: values.label,
+                href: values.href,
+                icon: values.icon || undefined,
+                order: values.order,
+                parentId: values.parentId || undefined,
+                isVisible: values.isVisible,
             };
             if (isEdit) {
                 return apiClient.patch(ADMIN_ENDPOINTS.NAVIGATION_BY_ID(item.id), payload);
@@ -73,21 +77,42 @@ export function AdminNavEditorView({ open, onClose, onSaved, item, parentOptions
             onClose();
         },
     });
-    const canSave = Boolean(label.trim()) && Boolean(href.trim());
-    const parentSelectOptions = [
-        { label: "None (top-level)", value: "" },
-        ...parentOptions,
-    ];
-    return (_jsx(SideDrawer, { isOpen: open, onClose: onClose, title: isEdit ? "Edit Nav Item" : "New Nav Item", children: _jsx(Form, { schema: navItemFormSchema, onSubmit: (e) => e.preventDefault(), spacing: "md", padding: "md", children: ({ setFieldError, clearErrors }) => (_jsxs(_Fragment, { children: [_jsx(FormErrorSummary, {}), _jsx(Input, { label: "Label", value: label, onChange: (e) => setLabel(e.target.value), required: true, placeholder: "e.g. Products" }), _jsx(Input, { label: "URL / href", value: href, onChange: (e) => setHref(e.target.value), required: true, placeholder: String(ROUTES.PUBLIC.PRODUCTS), helperText: "Use relative paths (e.g. /products) or full URLs." }), _jsx(Select, { label: "Icon (optional)", options: ICON_OPTIONS, value: icon, onValueChange: setIcon }), parentOptions.length > 0 && (_jsx(Select, { label: "Parent item (for nested nav)", options: parentSelectOptions, value: parentId, onValueChange: setParentId })), _jsx(Input, { label: "Order", value: String(order), onChange: (e) => setOrder(parseInt(e.target.value, 10) || 0), type: "number", min: 0, helperText: "Lower numbers appear first." }), _jsx(Toggle, { label: "Visible in navigation", checked: isVisible, onChange: setIsVisible }), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", isLoading: saveMutation.isPending, disabled: saveMutation.isPending, onClick: () => {
-                                    clearErrors();
-                                    const parsed = navItemFormSchema.safeParse({
-                                        label, href, icon: icon || undefined, order,
-                                        parentId: parentId || undefined, isVisible,
-                                    });
-                                    if (!parsed.success) {
-                                        applyZodIssues(parsed.error.issues, setFieldError);
-                                        return;
-                                    }
-                                    saveMutation.mutate();
-                                }, children: isEdit ? "Save changes" : "Create item" })] })] })) }) }));
+    const sections = React.useMemo(() => buildSectionsFromSchema(navItemFormSchema, {
+        options: {
+            icon: ICON_OPTIONS,
+            // Injected by the caller, so it cannot come from the schema.
+            parentId: [{ label: "None (top-level)", value: "" }, ...parentOptions],
+        },
+    }), [parentOptions]);
+    const nav = useSectionFormNav(sections, values);
+    const { shellCtx, setFieldError, clearErrors } = useFormShellState(navItemFormSchema, {
+        sections: nav.sectionMeta,
+        onGoToSection: nav.goToSection,
+        fieldToSectionIndex: nav.fieldToSectionIndex,
+    });
+    /*
+     * The routes already validated a nav item; this form did not, so an invalid
+     * href surfaced as a 400 banner after a round-trip instead of an error on the
+     * field. Same schema both sides now — and since it actually runs, the
+     * hand-rolled `canSave` that used to sit here is gone. It restated two of the
+     * schema's rules, disagreed with it on the rest, and was not even wired to
+     * the button's `disabled`.
+     */
+    const onSubmit = () => {
+        clearErrors();
+        const parsed = navItemFormSchema.safeParse({
+            label: values.label,
+            href: values.href,
+            icon: values.icon || undefined,
+            order: values.order,
+            parentId: values.parentId || undefined,
+            isVisible: values.isVisible,
+        });
+        if (!parsed.success) {
+            applyZodIssues(parsed.error.issues, setFieldError);
+            return;
+        }
+        saveMutation.mutate();
+    };
+    return (_jsx(SideDrawer, { isOpen: open, onClose: onClose, title: isEdit ? "Edit Nav Item" : "New Nav Item", children: _jsx(FormShellContext.Provider, { value: shellCtx, children: _jsxs(Div, { padding: "md", children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: values, onChange: handleChange, onSubmit: onSubmit, schema: navItemFormSchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, isLoading: saveMutation.isPending, submitLabel: isEdit ? "Save changes" : "Create item", onCancel: onClose, cancelLabel: "Cancel" })] }) }) }));
 }