@mohasinac/appkit 4.30.18 → 4.31.0

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

@@ -1,55 +1,60 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { normalizeError } from "../../../errors/normalize";
 import { useApiMutation } from "@mohasinac/appkit/client";
 import React from "react";
 import { useQuery } from "@tanstack/react-query";
-import { Alert, Button, Checkbox, Div, Form, FormActions, Input, Select, Span, Stack, StackedViewShell, Text, Toggle, useToast } from "../../../ui";
+import { Alert, Checkbox, Div, Span, Stack, StackedViewShell, Text, useToast } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { adminAdFormSchema } from "../schemas/admin-ops-forms";
 import { FormErrorSummary } from "../../../ui/forms/FormErrorSummary";
+import { FormShellContext, useFormShellState } from "../../../ui/forms/FormShell";
+import { applyZodIssues } from "../../../ui/forms/apply-zod-issues";
+import { buildSectionsFromSchema, visibleValues } from "../../shell/build-sections";
+import { SectionForm, useSectionFormNav } from "../../shell/SectionForm";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
 };
-function validateThirdPartyUrl(url, issues) {
-    if (!url.trim()) {
-        issues.push("Third-party ads require a third-party URL");
-        return;
-    }
-    try {
-        const parsed = new URL(url.trim());
-        if (parsed.protocol !== "https:") {
-            issues.push("Third-party ad URL must be https");
-        }
-    }
-    catch (_err) {
-        void normalizeError(_err);
-        issues.push("Third-party ad URL must be a valid URL");
-    }
-}
-function renderAdScheduleSection({ startAt, setStartAt, endAt, setEndAt }) {
-    return (_jsxs(Div, { layout: "grid", gap: "3", className: "grid-cols-1 md:grid-cols-2", children: [_jsx(Input, { label: "Start at (ISO)", value: startAt, onChange: (event) => setStartAt(event.target.value), placeholder: "2026-05-01T00:00:00.000Z" }), _jsx(Input, { label: "End at (ISO)", value: endAt, onChange: (event) => setEndAt(event.target.value), placeholder: "2026-05-30T23:59:59.000Z" })] }));
-}
-function renderAdCreativeSection({ title, setTitle, body, setBody, imageUrl, setImageUrl, ctaLabel, setCtaLabel, ctaHref, setCtaHref, adsenseSlot, setAdsenseSlot, thirdPartyUrl, setThirdPartyUrl, provider, }) {
-    return (_jsxs(Div, { layout: "grid", gap: "3", className: "grid-cols-1 md:grid-cols-2", children: [_jsx(Input, { label: "Creative title", value: title, onChange: (e) => setTitle(e.target.value), placeholder: "Catch the mega sale" }), _jsx(Input, { label: "Creative body", value: body, onChange: (e) => setBody(e.target.value), placeholder: "Up to 40% off this weekend" }), _jsx(Input, { label: "Image URL", value: imageUrl, onChange: (e) => setImageUrl(e.target.value), placeholder: "https://..." }), _jsx(Input, { label: "CTA label", value: ctaLabel, onChange: (e) => setCtaLabel(e.target.value), placeholder: "Shop now" }), _jsx(Input, { label: "CTA URL", value: ctaHref, onChange: (e) => setCtaHref(e.target.value), placeholder: "/promotions/deals" }), provider === "adsense" ? (_jsx(Input, { label: "AdSense slot", value: adsenseSlot, onChange: (e) => setAdsenseSlot(e.target.value), placeholder: "1234567890" })) : null, provider === "thirdParty" ? (_jsx(Input, { label: "Third-party URL", value: thirdPartyUrl, onChange: (e) => setThirdPartyUrl(e.target.value), placeholder: "https://adnetwork.example/slot" })) : null] }));
+const PROVIDER_OPTIONS = [
+    { label: "Manual", value: "manual" },
+    { label: "AdSense", value: "adsense" },
+    { label: "Third Party", value: "thirdParty" },
+];
+const STATUS_OPTIONS = [
+    { label: "Draft", value: "draft" },
+    { label: "Active", value: "active" },
+    { label: "Scheduled", value: "scheduled" },
+    { label: "Paused", value: "paused" },
+];
+const EMPTY_AD = {
+    name: "",
+    provider: "manual",
+    status: "draft",
+    priority: 0,
+    placementIds: [],
+    requiresConsent: false,
+    startAt: "",
+    endAt: "",
+    creativeTitle: "",
+    creativeBody: "",
+    creativeImageUrl: "",
+    ctaLabel: "",
+    ctaHref: "",
+    adsenseSlot: "",
+    thirdPartyUrl: "",
+};
+/**
+ * The placement checkboxes.
+ *
+ * Its options come from a live query, so it cannot be a generated select;
+ * module level rather than inline for the DEEP_NESTING reason.
+ */
+function PlacementChecklist({ placements, selected, onToggle, }) {
+    return (_jsx(Stack, { gap: "sm", children: _jsx(Div, { layout: "grid", gap: "2", className: "grid-cols-1 md:grid-cols-2", children: placements.map((placement) => (_jsxs("label", { className: "flex items-center gap-[var(--appkit-space-2)] rounded-md border border-[var(--appkit-color-border)] px-[var(--appkit-space-3)] py-[var(--appkit-space-2)]", children: [_jsx(Checkbox, { bare: true, checked: selected.includes(placement.id), onChange: () => onToggle(placement.id) }), _jsx(Span, { size: "sm", children: placement.label })] }, placement.id))) }) }));
 }
 export function AdminAdEditorView({ adId, endpointBase = ADMIN_ENDPOINTS.ADS, labels = {}, onSaved, ...rest }) {
-    const [name, setName] = React.useState("");
-    const [provider, setProvider] = React.useState("manual");
-    const [status, setStatus] = React.useState("draft");
-    const [priority, setPriority] = React.useState(0);
-    const [requiresConsent, setRequiresConsent] = React.useState(false);
-    const [selectedPlacements, setSelectedPlacements] = React.useState([]);
-    const [startAt, setStartAt] = React.useState("");
-    const [endAt, setEndAt] = React.useState("");
-    const [title, setTitle] = React.useState("");
-    const [body, setBody] = React.useState("");
-    const [imageUrl, setImageUrl] = React.useState("");
-    const [ctaLabel, setCtaLabel] = React.useState("");
-    const [ctaHref, setCtaHref] = React.useState("");
-    const [adsenseSlot, setAdsenseSlot] = React.useState("");
-    const [thirdPartyUrl, setThirdPartyUrl] = React.useState("");
+    const [form, setForm] = React.useState(EMPTY_AD);
+    const patch = (partial) => setForm((prev) => Object.assign({}, prev, partial));
     const { showToast } = useToast();
     const metaQuery = useQuery({
         queryKey: ["admin-ads-editor-meta", endpointBase],
@@ -63,45 +68,59 @@ export function AdminAdEditorView({ adId, endpointBase = ADMIN_ENDPOINTS.ADS, la
         staleTime: 15000,
     });
     React.useEffect(() => {
-        if (!adQuery.data?.item)
+        const item = adQuery.data?.item;
+        if (!item)
             return;
-        const item = adQuery.data.item;
-        setName(item.name || "");
-        setProvider(item.provider || "manual");
-        setStatus(item.status || "draft");
-        setPriority(item.priority ?? 0);
-        setRequiresConsent(Boolean(item.requiresConsent));
-        setSelectedPlacements(item.placementIds ?? []);
-        setStartAt(item.startAt || "");
-        setEndAt(item.endAt || "");
-        setTitle(item.creative?.title || "");
-        setBody(item.creative?.body || "");
-        setImageUrl(item.creative?.imageUrl || "");
-        setCtaLabel(item.creative?.ctaLabel || "");
-        setCtaHref(item.creative?.ctaHref || "");
-        setAdsenseSlot(item.creative?.adsenseSlot || "");
-        setThirdPartyUrl(item.creative?.thirdPartyUrl || "");
+        patch({
+            name: item.name || "",
+            provider: item.provider || "manual",
+            status: item.status || "draft",
+            priority: item.priority ?? 0,
+            requiresConsent: Boolean(item.requiresConsent),
+            placementIds: item.placementIds ?? [],
+            startAt: item.startAt || "",
+            endAt: item.endAt || "",
+            creativeTitle: item.creative?.title || "",
+            creativeBody: item.creative?.body || "",
+            creativeImageUrl: item.creative?.imageUrl || "",
+            ctaLabel: item.creative?.ctaLabel || "",
+            ctaHref: item.creative?.ctaHref || "",
+            adsenseSlot: item.creative?.adsenseSlot || "",
+            thirdPartyUrl: item.creative?.thirdPartyUrl || "",
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [adQuery.data]);
     const saveMutation = useApiMutation({
         errorMessage: "Save failed",
         mutationFn: async () => {
+            /*
+             * `visibleValues` is what keeps a provider-specific field out of the
+             * payload when its input is not on screen.
+             *
+             * Both `adsenseSlot` and `thirdPartyUrl` used to go out unconditionally
+             * while their inputs unmount on a provider switch — so an ad created as
+             * AdSense and switched to "manual" shipped a stale slot nothing could
+             * show or clear. The rule was then restated as a ternary right here; it
+             * now lives once, on the schema, as the same predicate that hides them.
+             */
+            const draft = visibleValues(adminAdFormSchema, form);
             const payload = {
-                name,
-                provider,
-                status,
-                priority,
-                requiresConsent,
-                placementIds: selectedPlacements,
-                startAt: startAt || undefined,
-                endAt: endAt || undefined,
+                name: draft.name,
+                provider: draft.provider,
+                status: draft.status,
+                priority: draft.priority,
+                requiresConsent: draft.requiresConsent,
+                placementIds: draft.placementIds,
+                startAt: draft.startAt || undefined,
+                endAt: draft.endAt || undefined,
                 creative: {
-                    title: title || undefined,
-                    body: body || undefined,
-                    imageUrl: imageUrl || undefined,
-                    ctaLabel: ctaLabel || undefined,
-                    ctaHref: ctaHref || undefined,
-                    adsenseSlot: adsenseSlot || undefined,
-                    thirdPartyUrl: thirdPartyUrl || undefined,
+                    title: draft.creativeTitle || undefined,
+                    body: draft.creativeBody || undefined,
+                    imageUrl: draft.creativeImageUrl || undefined,
+                    ctaLabel: draft.ctaLabel || undefined,
+                    ctaHref: draft.ctaHref || undefined,
+                    adsenseSlot: draft.adsenseSlot || undefined,
+                    thirdPartyUrl: draft.thirdPartyUrl || undefined,
                 },
             };
             if (adId) {
@@ -120,49 +139,35 @@ export function AdminAdEditorView({ adId, endpointBase = ADMIN_ENDPOINTS.ADS, la
     });
     const placements = adQuery.data?.placements ?? metaQuery.data?.placements ?? [];
     const providerCredentialStatus = metaQuery.data?.providerCredentialStatus;
+    /*
+     * What remains of `publishIssues` after the schema took its share.
+     *
+     * The name, the placement count, the date order, "a scheduled ad needs a
+     * start date" and the three provider rules all moved to the schema, where
+     * they reach the field that is wrong instead of a warning banner that only
+     * appeared once the status was already publish-ready. What is left cannot
+     * live there: it depends on the LIVE placement list and on whether the
+     * provider's credentials are configured in site settings — neither of which
+     * a schema can see.
+     */
     const publishIssues = React.useMemo(() => {
         const issues = [];
         const now = Date.now();
-        if (!name.trim()) {
-            issues.push("Ad name is required");
-        }
-        if (selectedPlacements.length === 0) {
-            issues.push("Select at least one placement");
-        }
         const knownPlacementIds = new Set(placements.map((placement) => placement.id));
         const enabledPlacementIds = new Set(placements.filter((placement) => placement.enabled).map((placement) => placement.id));
-        const unknownPlacements = selectedPlacements.filter((placementId) => !knownPlacementIds.has(placementId));
-        if (unknownPlacements.length > 0) {
-            issues.push(`Unknown placements: ${unknownPlacements.join(", ")}`);
-        }
-        const disabledPlacements = selectedPlacements.filter((placementId) => !enabledPlacementIds.has(placementId));
-        if (disabledPlacements.length > 0) {
-            issues.push(`Selected placements are disabled: ${disabledPlacements.join(", ")}`);
+        const unknown = form.placementIds.filter((id) => !knownPlacementIds.has(id));
+        if (unknown.length > 0)
+            issues.push(`Unknown placements: ${unknown.join(", ")}`);
+        const disabled = form.placementIds.filter((id) => !enabledPlacementIds.has(id));
+        if (disabled.length > 0) {
+            issues.push(`Selected placements are disabled: ${disabled.join(", ")}`);
         }
-        const startMs = startAt ? new Date(startAt).getTime() : null;
-        const endMs = endAt ? new Date(endAt).getTime() : null;
-        if (startAt && Number.isNaN(startMs)) {
-            issues.push("Start date must be a valid ISO timestamp");
+        const startMs = form.startAt ? new Date(form.startAt).getTime() : null;
+        const endMs = form.endAt ? new Date(form.endAt).getTime() : null;
+        if (form.status === "scheduled" && startMs !== null && !Number.isNaN(startMs) && startMs <= now) {
+            issues.push("Scheduled ads must start in the future");
         }
-        if (endAt && Number.isNaN(endMs)) {
-            issues.push("End date must be a valid ISO timestamp");
-        }
-        if (startMs !== null &&
-            endMs !== null &&
-            !Number.isNaN(startMs) &&
-            !Number.isNaN(endMs) &&
-            endMs <= startMs) {
-            issues.push("End date must be after start date");
-        }
-        if (status === "scheduled") {
-            if (!startAt || startMs === null || Number.isNaN(startMs)) {
-                issues.push("Scheduled ads require a valid start date");
-            }
-            else if (startMs <= now) {
-                issues.push("Scheduled ads must start in the future");
-            }
-        }
-        if (status === "active") {
+        if (form.status === "active") {
             if (startMs !== null && !Number.isNaN(startMs) && startMs > now) {
                 issues.push("Active ads cannot have a future start date");
             }
@@ -170,75 +175,66 @@ export function AdminAdEditorView({ adId, endpointBase = ADMIN_ENDPOINTS.ADS, la
                 issues.push("Active ads cannot have an end date in the past");
             }
         }
-        if (provider === "manual") {
-            if (!title.trim() && !body.trim() && !imageUrl.trim() && !ctaHref.trim()) {
-                issues.push("Manual ads need at least one creative field (title, body, image, or CTA URL)");
-            }
+        if (form.provider === "adsense" && !providerCredentialStatus?.hasAdsenseClientId) {
+            issues.push("AdSense provider credentials are missing in ad settings");
         }
-        if (provider === "adsense") {
-            if (!adsenseSlot.trim()) {
-                issues.push("AdSense ads require an AdSense slot id");
-            }
-            if (!providerCredentialStatus?.hasAdsenseClientId) {
-                issues.push("AdSense provider credentials are missing in ad settings");
-            }
-        }
-        if (provider === "thirdParty") {
-            validateThirdPartyUrl(thirdPartyUrl, issues);
-            if (!providerCredentialStatus?.hasThirdPartyScriptUrl) {
-                issues.push("Third-party provider script URL is missing in ad settings");
-            }
+        if (form.provider === "thirdParty" && !providerCredentialStatus?.hasThirdPartyScriptUrl) {
+            issues.push("Third-party provider script URL is missing in ad settings");
         }
         return issues;
     }, [
-        adsenseSlot,
-        body,
-        ctaHref,
-        endAt,
-        imageUrl,
-        name,
+        form.endAt,
+        form.placementIds,
+        form.provider,
+        form.startAt,
+        form.status,
         placements,
-        provider,
         providerCredentialStatus?.hasAdsenseClientId,
         providerCredentialStatus?.hasThirdPartyScriptUrl,
-        selectedPlacements,
-        startAt,
-        status,
-        thirdPartyUrl,
-        title,
     ]);
-    const publishHardeningRequired = status === "active" || status === "scheduled";
+    const publishHardeningRequired = form.status === "active" || form.status === "scheduled";
     const blockedByPublishValidation = publishHardeningRequired && publishIssues.length > 0;
-    const togglePlacement = (placementId) => {
-        setSelectedPlacements((prev) => prev.includes(placementId)
-            ? prev.filter((id) => id !== placementId)
-            : [...prev, placementId]);
-    };
-    const scheduleSection = renderAdScheduleSection({ startAt, setStartAt, endAt, setEndAt });
-    const creativeSection = renderAdCreativeSection({
-        title, setTitle, body, setBody, imageUrl, setImageUrl,
-        ctaLabel, setCtaLabel, ctaHref, setCtaHref,
-        adsenseSlot, setAdsenseSlot, thirdPartyUrl, setThirdPartyUrl, provider,
+    const togglePlacement = (placementId) => setForm((prev) => ({
+        ...prev,
+        placementIds: prev.placementIds.includes(placementId)
+            ? prev.placementIds.filter((id) => id !== placementId)
+            : [...prev.placementIds, placementId],
+    }));
+    const sections = React.useMemo(() => buildSectionsFromSchema(adminAdFormSchema, {
+        options: {
+            provider: PROVIDER_OPTIONS,
+            status: STATUS_OPTIONS,
+        },
+        renderers: {
+            placementIds: ({ values }) => (_jsx(PlacementChecklist, { placements: placements, selected: values.placementIds, onToggle: togglePlacement })),
+        },
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [placements]);
+    const nav = useSectionFormNav(sections, form, { scope: "admin:ad-editor" });
+    const { shellCtx, setFieldError, clearErrors } = useFormShellState(adminAdFormSchema, {
+        sections: nav.sectionMeta,
+        onGoToSection: nav.goToSection,
+        fieldToSectionIndex: nav.fieldToSectionIndex,
     });
+    const handleSubmit = () => {
+        clearErrors();
+        const parsed = adminAdFormSchema.safeParse(visibleValues(adminAdFormSchema, form));
+        if (!parsed.success) {
+            applyZodIssues(parsed.error.issues, setFieldError);
+            return;
+        }
+        if (blockedByPublishValidation) {
+            showToast("Cannot save in publish-ready status until the readiness issues are fixed.", "warning");
+            return;
+        }
+        saveMutation.mutate();
+    };
     return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: labels.title ?? (adId ? "Edit Ad" : "Create Ad"), sections: [
             metaQuery.error ? (_jsx(Alert, { variant: "error", title: "Could not load ad metadata", children: metaQuery.error instanceof Error ? metaQuery.error.message : "Unknown error" })) : null,
             adQuery.error ? (_jsx(Alert, { variant: "error", title: "Could not load ad", children: adQuery.error instanceof Error ? adQuery.error.message : "Unknown error" })) : null,
-            _jsxs(Form, { schema: adminAdFormSchema, onSubmit: (event) => {
-                    event.preventDefault();
-                    if (blockedByPublishValidation) {
-                        showToast("Cannot save in publish-ready status until validation issues are fixed.", "warning");
-                        return;
-                    }
-                    saveMutation.mutate();
-                }, spacing: "md", children: [_jsx(FormErrorSummary, {}), _jsx(Input, { label: "Ad name", value: name, onChange: (event) => setName(event.target.value), placeholder: "Summer Campaign" }), _jsxs(Div, { layout: "grid", gap: "3", className: "grid-cols-1 md:grid-cols-3", children: [_jsx(Select, { label: "Provider", value: provider, options: [
-                                    { label: "Manual", value: "manual" },
-                                    { label: "AdSense", value: "adsense" },
-                                    { label: "Third Party", value: "thirdParty" },
-                                ], onChange: (event) => setProvider(event.target.value) }), _jsx(Select, { label: "Status", value: status, options: [
-                                    { label: "Draft", value: "draft" },
-                                    { label: "Active", value: "active" },
-                                    { label: "Scheduled", value: "scheduled" },
-                                    { label: "Paused", value: "paused" },
-                                ], onChange: (event) => setStatus(event.target.value) }), _jsx(Input, { label: "Priority", type: "number", value: String(priority), onChange: (event) => setPriority(Number(event.target.value || 0)) })] }), _jsx(Toggle, { checked: requiresConsent, onChange: setRequiresConsent, label: "Require user ad-consent for this ad" }), _jsxs(Stack, { gap: "sm", children: [_jsx(Text, { size: "sm", weight: "medium", children: "Placements" }), _jsx(Div, { layout: "grid", gap: "2", className: "grid-cols-1 md:grid-cols-2", children: placements.map((placement) => (_jsxs("label", { className: "flex items-center gap-[var(--appkit-space-2)] rounded-md border border-[var(--appkit-color-border)] px-[var(--appkit-space-3)] py-[var(--appkit-space-2)]", children: [_jsx(Checkbox, { bare: true, checked: selectedPlacements.includes(placement.id), onChange: () => togglePlacement(placement.id) }), _jsx(Span, { size: "sm", children: placement.label })] }, placement.id))) })] }), scheduleSection, creativeSection, _jsxs(Div, { border: "default", className: __P.p3, rounded: "lg", children: [_jsx(Text, { className: "mb-1", size: "sm", weight: "medium", children: "Preview" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: title || name || "Untitled ad" }), body ? _jsx(Text, { className: "mt-1", size: "sm", children: body }) : null, ctaLabel ? _jsxs(Text, { className: "mt-1", size: "xs", children: ["CTA: ", ctaLabel, " (", ctaHref || "#", ")"] }) : null] }), publishHardeningRequired && publishIssues.length > 0 ? (_jsx(Alert, { variant: "warning", title: "Publish readiness issues", children: publishIssues.join("; ") })) : null, _jsx(FormActions, { align: "right", children: _jsx(Button, { type: "submit", disabled: saveMutation.isPending || blockedByPublishValidation || !name.trim() || selectedPlacements.length === 0, children: saveMutation.isPending ? "Saving..." : status === "active" ? "Publish ad" : adId ? "Save changes" : "Create ad" }) })] }),
+            _jsxs(FormShellContext.Provider, { value: shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: form, onChange: patch, onSubmit: handleSubmit, schema: adminAdFormSchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, isLoading: saveMutation.isPending, submitLabel: form.status === "active" ? "Publish ad" : adId ? "Save changes" : "Create ad" })] }, "ad-form"),
+            _jsxs(Div, { border: "default", className: __P.p3, rounded: "lg", children: [_jsx(Text, { className: "mb-1", size: "sm", weight: "medium", children: "Preview" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: form.creativeTitle || form.name || "Untitled ad" }), form.creativeBody ? _jsx(Text, { className: "mt-1", size: "sm", children: form.creativeBody }) : null, form.ctaLabel ? (_jsxs(Text, { className: "mt-1", size: "xs", children: ["CTA: ", form.ctaLabel, " (", form.ctaHref || "#", ")"] })) : null] }, "ad-preview"),
+            publishHardeningRequired && publishIssues.length > 0 ? (_jsx(Alert, { variant: "warning", title: "Publish readiness issues", children: publishIssues.join("; ") }, "ad-publish-issues")) : null,
         ] }));
 }

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

@@ -1,21 +1,47 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Row } from "@mohasinac/appkit/ui";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AdminAddressEditorView — on the shared address shape, 2026-08-30 (W5 / D19).
+ *
+ * ## What it was
+ *
+ * `adminAddressFormSchema`, a twelfth restatement of the same eleven fields,
+ * with `postalCode: /^\d{6}$/` — India-only, on a form whose `country` was a
+ * free-text box. It was the ONLY one of the three address surfaces that used
+ * `INDIAN_STATES`; the other two shipped free text into the same
+ * `AddressDocument.state`, so the field held "Karnataka", "karnataka" and "KA"
+ * depending on which surface created the row.
+ *
+ * ## `canSave` is gone, and its last clause is why
+ *
+ * `form.postalCode.length === 6` — a LENGTH check, so `"abcdef"` satisfied it,
+ * and any non-Indian address could never be saved from this screen at all.
+ * The schema now decides, per country, and reports on the field.
+ */
 import { useApiMutation } from "@mohasinac/appkit/client";
 import React from "react";
 import { useQuery } from "@tanstack/react-query";
-import { Button, Card, CardBody, Checkbox, ConfirmDeleteModal, Div, Form, Input, Select, Span, Stack, StackedViewShell, Text, Toggle, useToast, Show, StickyToolbar } from "../../../ui";
+import { ConfirmDeleteModal, Stack, StackedViewShell, useToast, } from "../../../ui";
+import { FieldInput, FormErrorSummary } from "../../../ui/forms";
+import { FormShellContext, useFormShellState } from "../../../ui/forms/FormShell";
+import { applyZodIssues } from "../../../ui/forms/apply-zod-issues";
+import { buildSectionsFromSchema, visibleValues } from "../../shell/build-sections";
+import { SectionForm, useSectionFormNav } from "../../shell/SectionForm";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
-import { INDIAN_STATES } from "../../account/constants/addresses";
-import { adminAddressFormSchema } from "../schemas/admin-editor-forms";
-import { FormErrorSummary } from "../../../ui/forms/FormErrorSummary";
-const STATE_OPTIONS = INDIAN_STATES.map((s) => ({ value: s, label: s }));
-// ── Section heading helper ─────────────────────────────────────────────────────
-function SectionHeading({ children }) {
-    return (_jsx(Text, { className: "tracking-widest mb-4", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: children }));
-}
+import { adminAddressCreateSchema } from "../../addresses/schemas/address-form";
+import { AddressLocationFields } from "../../addresses/components/AddressLocationFields";
+import { usePostalLookup } from "../../addresses/hooks/usePostalLookup";
+import { COUNTRIES, DEFAULT_COUNTRY } from "../../../constants/geo/countries";
+const COUNTRY_OPTIONS = Object.values(COUNTRIES).map((c) => ({
+    value: c.code,
+    label: c.name,
+}));
+const OWNER_TYPE_OPTIONS = [
+    { value: "user", label: "User" },
+    { value: "store", label: "Store" },
+];
 const EMPTY = {
     ownerType: "user",
     ownerId: "",
@@ -28,7 +54,7 @@ const EMPTY = {
     city: "",
     state: "",
     postalCode: "",
-    country: "India",
+    country: DEFAULT_COUNTRY,
     isDefault: false,
 };
 export function AdminAddressEditorView({ addressId, onSaved, onDeleted, ...rest }) {
@@ -36,40 +62,36 @@ export function AdminAddressEditorView({ addressId, onSaved, onDeleted, ...rest
     const [deleteOpen, setDeleteOpen] = React.useState(false);
     const { showToast } = useToast();
     const [form, setForm] = React.useState(EMPTY);
-    const set = (key, value) => setForm((prev) => ({ ...prev, [key]: value }));
+    const patch = (partial) => setForm((prev) => Object.assign({}, prev, partial));
     const { isLoading } = useQuery({
         queryKey: ["admin", "address", addressId],
         queryFn: async () => {
             const res = await apiClient.get(ADMIN_ENDPOINTS.ADDRESS_BY_ID(addressId));
-            return (res?.data ?? res);
+            return (res?.data ??
+                res);
         },
         enabled: isEdit,
         select: (data) => {
-            setForm({
-                ownerType: data.ownerType ?? "user",
-                ownerId: data.ownerId ?? "",
-                label: data.label ?? "",
-                fullName: data.fullName ?? "",
-                phone: data.phone ?? "",
-                addressLine1: data.addressLine1 ?? "",
-                addressLine2: data.addressLine2 ?? "",
-                landmark: data.landmark ?? "",
-                city: data.city ?? "",
-                state: data.state ?? "",
-                postalCode: data.postalCode ?? "",
-                country: data.country ?? "India",
-                isDefault: data.isDefault ?? false,
-            });
+            patch({ ...EMPTY, ...data, country: data.country || DEFAULT_COUNTRY });
             return data;
         },
     });
+    const { lookup, isLooking } = usePostalLookup({
+        // Empty fields only — never correct what the admin typed.
+        onResolved: ({ city, state }) => setForm((prev) => ({
+            ...prev,
+            city: prev.city.trim() ? prev.city : city,
+            state: prev.state.trim() ? prev.state : state,
+        })),
+    });
     const saveMutation = useApiMutation({
         errorMessage: "Failed to save address.",
         mutationFn: async () => {
+            const draft = visibleValues(adminAddressCreateSchema, form);
             const payload = {
-                ...form,
-                addressLine2: form.addressLine2 || undefined,
-                landmark: form.landmark || undefined,
+                ...draft,
+                addressLine2: draft.addressLine2 || undefined,
+                landmark: draft.landmark || undefined,
             };
             if (isEdit) {
                 return apiClient.patch(ADMIN_ENDPOINTS.ADDRESS_BY_ID(addressId), payload);
@@ -77,7 +99,8 @@ export function AdminAddressEditorView({ addressId, onSaved, onDeleted, ...rest
             return apiClient.post(ADMIN_ENDPOINTS.ADDRESSES, payload);
         },
         onSuccess: (res) => {
-            const id = res?.data?.id ?? res?.id ?? addressId;
+            const created = res?.data?.id;
+            const id = addressId ?? created;
             showToast(isEdit ? "Address updated." : "Address created.", "success");
             if (onSaved && id)
                 onSaved(String(id));
@@ -94,26 +117,45 @@ export function AdminAddressEditorView({ addressId, onSaved, onDeleted, ...rest
         },
     });
     const isSubmitting = saveMutation.isPending || isLoading;
-    const canSave = form.ownerId &&
-        form.label &&
-        form.fullName &&
-        form.phone &&
-        form.addressLine1 &&
-        form.city &&
-        form.state &&
-        form.postalCode.length === 6;
-    // ── Action sidebar (desktop) ───────────────────────────────────────────────
-    const actionSidebar = (_jsxs(Card, { variant: "outlined", padding: "md", spacing: "sm", children: [_jsx(Button, { type: "submit", form: "address-editor-form", className: "w-full", isLoading: isSubmitting, disabled: !canSave || isSubmitting, children: isEdit ? ACTIONS.ADMIN["save-changes"].label : "Create address" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", className: "w-full", isLoading: deleteMutation.isPending, onClick: () => setDeleteOpen(true), children: "Delete address" }))] }));
-    // ── Form sections ──────────────────────────────────────────────────────────
-    const formContent = (_jsxs(Form, { schema: adminAddressFormSchema, id: "address-editor-form", onSubmit: (e) => {
-            e.preventDefault();
-            saveMutation.mutate();
-        }, spacing: "lg", children: [_jsx(FormErrorSummary, {}), _jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(SectionHeading, { children: "Ownership" }), _jsxs(Stack, { gap: "md", children: [_jsx(Row, { gap: "lg", children: ["user", "store"].map((type) => (_jsxs("label", { className: "flex cursor-pointer items-center gap-[var(--appkit-space-2)]", children: [_jsx(Checkbox, { bare: true, type: "radio", name: "ownerType", value: type, checked: form.ownerType === type, onChange: () => {
-                                                set("ownerType", type);
-                                                set("ownerId", "");
-                                            }, className: "accent-[var(--appkit-color-primary)]" }), _jsx(Span, { size: "sm", className: "text-[var(--appkit-color-text)]", transform: "capitalize", children: type })] }, type))) }), _jsx(Input, { label: form.ownerType === "user" ? "User ID" : "Store ID (slug)", value: form.ownerId, onChange: (e) => set("ownerId", e.target.value), required: true, placeholder: form.ownerType === "user" ? "user-mohsin-c" : "store-pokemon-palace", helperText: form.ownerType === "user"
-                                    ? "Firebase Auth UID or user slug"
-                                    : "Store slug (e.g. store-pokemon-palace)" })] })] }), _jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(SectionHeading, { children: "Contact & Location" }), _jsxs(Stack, { gap: "md", children: [_jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: [_jsx(Input, { label: "Label", value: form.label, onChange: (e) => set("label", e.target.value), required: true, placeholder: "Home / Office / Pickup" }), _jsx(Input, { label: "Full Name", value: form.fullName, onChange: (e) => set("fullName", e.target.value), required: true, placeholder: "Recipient name (PII)" })] }), _jsx(Input, { label: "Phone", value: form.phone, onChange: (e) => set("phone", e.target.value), required: true, type: "tel", placeholder: "+91 9876543210 (PII)" }), _jsx(Input, { label: "Address Line 1", value: form.addressLine1, onChange: (e) => set("addressLine1", e.target.value), required: true, placeholder: "House/flat no., street (PII)" }), _jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: [_jsx(Input, { label: "Address Line 2", value: form.addressLine2 ?? "", onChange: (e) => set("addressLine2", e.target.value), placeholder: "Area, locality (optional)" }), _jsx(Input, { label: "Landmark", value: form.landmark ?? "", onChange: (e) => set("landmark", e.target.value), placeholder: "Near hospital, etc. (optional)" })] }), _jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-3", children: [_jsx(Input, { label: "City", value: form.city, onChange: (e) => set("city", e.target.value), required: true, placeholder: "Mumbai" }), _jsx(Select, { label: "State", value: form.state, onValueChange: (val) => set("state", val), options: STATE_OPTIONS, placeholder: "Select state", required: true }), _jsx(Input, { label: "Postal Code", value: form.postalCode, onChange: (e) => set("postalCode", e.target.value), required: true, placeholder: "400001", maxLength: 6 })] }), _jsx(Input, { label: "Country", value: form.country, onChange: (e) => set("country", e.target.value), placeholder: "India" })] })] }), _jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(SectionHeading, { children: "Flags" }), _jsx(Toggle, { label: "Set as default address", checked: form.isDefault, onChange: (v) => set("isDefault", v) })] }), _jsxs(Row, { gap: "3", className: "lg:hidden", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !canSave || isSubmitting, children: isEdit ? ACTIONS.ADMIN["save-changes"].label : "Create address" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => setDeleteOpen(true), children: "Delete address" }))] })] }, "address-form"));
-    const twoPanel = (_jsxs(Div, { layout: "grid", gap: "6", lgAlign: "start", className: "lg:grid-cols-[1fr_280px]", children: [_jsx(CardBody, { className: "min-w-0 space-y-6 p-[var(--appkit-space-0)]", children: formContent }), _jsx(Show, { above: "lg", children: _jsx(StickyToolbar, { offset: "header", tone: "default", border: false, padding: "none", children: actionSidebar }) })] }));
-    return (_jsxs(_Fragment, { children: [_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit Address" : "New Address", sections: [twoPanel] }), _jsx(ConfirmDeleteModal, { isOpen: deleteOpen, onClose: () => setDeleteOpen(false), onConfirm: () => deleteMutation.mutate(), isDeleting: deleteMutation.isPending, title: "Delete this address?", message: "This address will be permanently removed. This action cannot be undone.", confirmText: "Delete address", variant: "danger" })] }));
+    const sections = React.useMemo(() => buildSectionsFromSchema(adminAddressCreateSchema, {
+        options: { ownerType: OWNER_TYPE_OPTIONS, country: COUNTRY_OPTIONS },
+        renderers: {
+            /*
+             * The id's LABEL depends on the owner type, which a generated field
+             * cannot know — and switching type clears it, because a user slug is
+             * not a store slug and carrying it over produces an address attached
+             * to nothing.
+             */
+            ownerId: ({ values, onChange, errors }) => (_jsx(FieldInput, { name: "ownerId", required: true, label: values.ownerType === "user" ? "User ID" : "Store ID (slug)", hint: values.ownerType === "user"
+                    ? "Firebase Auth UID or user slug"
+                    : "Store slug, e.g. store-beyblade-arena", placeholder: values.ownerType === "user" ? "user-mohsin-c" : "store-beyblade-arena", value: values.ownerId, error: errors.ownerId, onChange: (v) => onChange({ ownerId: v }) })),
+            state: ({ values, onChange, errors }) => (_jsx(AddressLocationFields, { country: values.country, state: values.state, postalCode: values.postalCode, errors: errors, isLooking: isLooking, onChange: onChange, onPostalSettled: lookup })),
+            postalCode: () => null,
+            country: () => null,
+        },
+    }), [isLooking, lookup]);
+    const nav = useSectionFormNav(sections, form, { scope: "admin:address-editor" });
+    const { shellCtx, setFieldError, clearErrors } = useFormShellState(adminAddressCreateSchema, {
+        sections: nav.sectionMeta,
+        onGoToSection: nav.goToSection,
+        fieldToSectionIndex: nav.fieldToSectionIndex,
+    });
+    const handleSubmit = () => {
+        clearErrors();
+        const parsed = adminAddressCreateSchema.safeParse(visibleValues(adminAddressCreateSchema, form));
+        if (!parsed.success) {
+            applyZodIssues(parsed.error.issues, setFieldError);
+            return;
+        }
+        saveMutation.mutate();
+    };
+    return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit address" : "New address", sections: [
+            _jsxs(Stack, { gap: "md", children: [_jsxs(FormShellContext.Provider, { value: shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: form, onChange: patch, onSubmit: handleSubmit, schema: adminAddressCreateSchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, isLoading: isSubmitting, submitLabel: isEdit ? ACTIONS.ADMIN["save-changes"].label : "Create address", destructiveAction: isEdit
+                                    ? {
+                                        label: "Delete address",
+                                        onClick: () => setDeleteOpen(true),
+                                        disabled: deleteMutation.isPending,
+                                    }
+                                    : undefined })] }), deleteOpen && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete this address?", message: "This removes the address permanently. Orders already shipped to it keep their own copy.", onConfirm: () => deleteMutation.mutate(), onClose: () => setDeleteOpen(false), isDeleting: deleteMutation.isPending }))] }, "address-form"),
+        ] }));
 }

package/dist/features/admin/components/AdminBrandEditorView.d.ts

@@ -1,3 +1,18 @@
+/**
+ * Create or edit a brand.
+ *
+ * Fields come from `brandFormSchema`, which used to be declared locally in this
+ * file, unannotated, and — the part that mattered — never executed: the submit
+ * handler checked `name.trim()` and called the mutation. So `website`'s URL rule
+ * had never rejected anything, and the raw `<Input>`s it would have reported on
+ * carry no `name`, which means `applyZodIssues` had nowhere to put an error even
+ * if the parse had run. Both halves are fixed by deriving the form from the
+ * schema: every field is a `Field*` with a name, and the parse gates the save.
+ *
+ * The submit button is no longer `disabled={!name}`. A disabled control with no
+ * explanation cannot tell the admin which field it is waiting on; the schema now
+ * says so, on the field.
+ */
 import React from "react";
 import type { StackedViewShellProps } from "../../../ui";
 export interface AdminBrandEditorViewProps extends Omit<StackedViewShellProps, "sections"> {