@mohasinac/appkit 4.31.0 → 4.32.0

package/dist/features/search/action-index/tab-entries.js

@@ -0,0 +1,128 @@
+/*
+ * WHY: W8's C2 folded six sibling pages into tabs on five hosts. Each absorbed
+ *      page kept its path as a redirect shell, but its NAV ENTRY was deleted —
+ *      which is what removed it from the action index, since every nav-derived
+ *      entry exists only because its nav item does.
+ *
+ *      Left there, "payout methods", "print centre" and "permissions catalogue"
+ *      would each stop being findable in the command palette on the day they
+ *      became easier to reach. `deepLink` is a field separate from `href`
+ *      precisely for this case.
+ *
+ * WHAT: One entry per absorbed surface, deep-linked to its tab.
+ *
+ * ## 🛑 Why these are authored rather than derived
+ *
+ * Every other entry in this index is derived, and that is the rule the whole
+ * file set exists to keep. These cannot be: the thing they name no longer has
+ * a nav item, a route of its own, or any other list to fall out of. The tab
+ * arrays are the closest thing, and their labels are written for a strip of
+ * four characters' width ("Methods", "Queue", "Slug") rather than for someone
+ * searching — which is the same reason the settings entries are authored too.
+ *
+ * The `href` still points at a real page and the tab id is still validated
+ * against that page's own union, so neither half can rot silently.
+ *
+ * EXPORTS: deriveConsolidatedTabEntries, CONSOLIDATED_TAB_SURFACES
+ *
+ * @tag domain:search
+ * @tag layer:constants
+ * @tag pattern:registry
+ * @tag access:isomorphic
+ * @tag consumers:src/constants/action-index.ts
+ * @tag sideEffects:none
+ */
+export const CONSOLIDATED_TAB_SURFACES = [
+    {
+        slug: "payout-methods",
+        label: "Payout methods",
+        description: "Where your money goes — bank account or UPI.",
+        keywords: ["bank account", "upi", "payment details", "where do i get paid"],
+        route: "storePayouts",
+        tab: "methods",
+        portal: "store",
+        sectionPath: "Seller › Finance › Payouts",
+    },
+    {
+        slug: "payout-settings",
+        label: "Payout settings",
+        description: "How often you get paid, and the minimum amount.",
+        keywords: ["schedule", "frequency", "threshold", "minimum payout"],
+        route: "storePayouts",
+        tab: "settings",
+        portal: "store",
+        sectionPath: "Seller › Finance › Payouts",
+    },
+    {
+        slug: "shipping-configs",
+        label: "Named shipping configs",
+        description: "Reusable shipping rules you can attach to a listing.",
+        keywords: ["presets", "rules", "delivery", "rates"],
+        route: "storeShipping",
+        tab: "configs",
+        portal: "store",
+        sectionPath: "Seller › Store › Shipping",
+    },
+    {
+        slug: "print-center",
+        label: "Print centre",
+        description: "Print labels, invoices and barcodes in a batch.",
+        keywords: ["labels", "invoice", "barcode", "packing slip", "print"],
+        route: "storeFulfillment",
+        tab: "print",
+        portal: "store",
+        sectionPath: "Seller › Store › Fulfillment",
+    },
+    {
+        slug: "store-slug",
+        label: "Store web address",
+        description: "The URL buyers reach your shop at.",
+        keywords: ["url", "link", "domain", "slug", "change my address"],
+        route: "storeStorefront",
+        tab: "slug",
+        portal: "store",
+        sectionPath: "Seller › Store › Storefront",
+    },
+    {
+        slug: "permissions-catalog",
+        label: "Permissions catalogue",
+        description: "Every permission string and what it unlocks.",
+        keywords: ["rbac", "access", "capabilities", "what does this permission do"],
+        route: "adminRoles",
+        tab: "permissions",
+        portal: "admin",
+        sectionPath: "Admin › System › Custom Roles",
+        requiredPermission: "roles:read",
+    },
+    {
+        slug: "nav-permissions",
+        label: "Navigation permissions",
+        description: "Turn individual nav entries on or off across the portals.",
+        keywords: ["menu access", "hide nav", "sidebar", "rbac"],
+        route: "adminSettings",
+        tab: "navigation",
+        portal: "admin",
+        sectionPath: "Admin › System › Permissions Toggles",
+        requiredPermission: "settings:write",
+    },
+];
+export function deriveConsolidatedTabEntries(hrefs) {
+    return CONSOLIDATED_TAB_SURFACES.map((surface) => ({
+        id: `${surface.portal}:tab:${surface.slug}`,
+        kind: "setting",
+        portal: surface.portal,
+        label: surface.label,
+        description: surface.description,
+        keywords: surface.keywords,
+        href: hrefs[surface.route],
+        deepLink: `?tab=${surface.tab}`,
+        sectionPath: surface.sectionPath,
+        requiredPermission: surface.requiredPermission,
+        /*
+         * Same weight as a settings control, and for the same reason: someone
+         * searching "upi" wants the payout-methods tab, not the Payouts page that
+         * also matches on its own (now broader) keyword list.
+         */
+        weight: 20,
+    }));
+}

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

@@ -1,22 +1,15 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { normalizeError } from "../../../errors/normalize";
-import { useCallback, useEffect, useState } from "react";
-import { z } from "zod";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { RefreshCw } from "lucide-react";
-import { Alert, Button, Div, FormField, Heading, Row, Section, Stack, Text, Toggle, useToast } from "../../../ui";
+import { Alert, Button, Div, Heading, Row, Section, Stack, Text, useToast } from "../../../ui";
 import { useFormShellState, FormShellContext, FormErrorSummary } from "../../../ui/forms";
+import { applyZodIssues } from "../../../ui/forms/apply-zod-issues";
+import { SectionForm, useSectionFormNav, buildSectionsFromSchema, visibleValues } from "../../shell";
+import { sellerGoogleReviewsFormSchema } from "../../store-extensions/schemas/google-config-form";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
-const googleReviewsDraftSchema = z.object({
-    isConnected: z.boolean(),
-    placeId: z.string(),
-    businessName: z.string(),
-}).superRefine((v, ctx) => {
-    if (v.isConnected && !v.placeId.trim()) {
-        ctx.addIssue({ code: z.ZodIssueCode.custom, path: ["placeId"], message: "A Place ID is required to show Google reviews on your store page" });
-    }
-});
 const EMPTY_DRAFT = {
     placeId: "",
     businessName: "",
@@ -29,11 +22,19 @@ export function SellerGoogleReviewsView({ onSave, onSync, }) {
     const [syncing, setSyncing] = useState(false);
     const [saveMessage, setSaveMessage] = useState(null);
     const { showToast } = useToast();
-    const { shellCtx, validate } = useFormShellState(googleReviewsDraftSchema);
-    useEffect(() => {
-        validate(draft);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [draft, validate]);
+    /*
+     * Three fields, all derived. The stats below (average rating, total reviews,
+     * last sync) are SYNC OUTPUT, not configuration — the schema deliberately
+     * omits them, per its own header, so a seller cannot type the review count
+     * their storefront displays.
+     */
+    const sections = useMemo(() => buildSectionsFromSchema(sellerGoogleReviewsFormSchema), []);
+    const nav = useSectionFormNav(sections, draft, { scope: "seller:google-reviews" });
+    const { shellCtx, setFieldError, clearErrors, validate } = useFormShellState(sellerGoogleReviewsFormSchema, {
+        sections: nav.sectionMeta,
+        onGoToSection: nav.goToSection,
+        fieldToSectionIndex: nav.fieldToSectionIndex,
+    });
     useEffect(() => {
         fetch(SELLER_ENDPOINTS.GOOGLE_REVIEWS, { credentials: "include" })
             .then((r) => r.json())
@@ -52,6 +53,17 @@ export function SellerGoogleReviewsView({ onSave, onSync, }) {
             .finally(() => setLoading(false));
     }, []);
     const handleSave = useCallback(async () => {
+        /*
+         * 🛑 The guard is here because `SectionForm.handleSubmit` scrolls to the
+         * first erroring section and then calls `onSubmit()` UNCONDITIONALLY — it
+         * surfaces errors, it does not block on them.
+         */
+        clearErrors();
+        const parsed = sellerGoogleReviewsFormSchema.safeParse(visibleValues(sellerGoogleReviewsFormSchema, draft));
+        if (!parsed.success) {
+            applyZodIssues(parsed.error.issues, setFieldError);
+            return;
+        }
         setSaving(true);
         setSaveMessage(null);
         try {
@@ -81,7 +93,7 @@ export function SellerGoogleReviewsView({ onSave, onSync, }) {
         finally {
             setSaving(false);
         }
-    }, [draft, onSave, showToast]);
+    }, [draft, onSave, showToast, clearErrors, setFieldError]);
     const handleSync = useCallback(async () => {
         setSyncing(true);
         setSaveMessage(null);
@@ -116,5 +128,5 @@ export function SellerGoogleReviewsView({ onSave, onSync, }) {
             timeStyle: "short",
         })
         : "Never";
-    return (_jsx(FormShellContext.Provider, { value: shellCtx, children: _jsx(Div, { paddingX: "x-sm-md", className: "max-w-2xl", padding: "y-md", children: _jsxs(Stack, { gap: "lg", children: [_jsxs(Section, { children: [_jsx(Heading, { level: 3, className: "mb-1", children: "Google Business Settings" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] mb-4", size: "sm", children: "Connect your Google Business profile to sync reviews to your storefront." }), _jsxs(Stack, { gap: "md", children: [_jsx(Toggle, { checked: draft.isConnected, onChange: (v) => setDraft((d) => ({ ...d, isConnected: v })), label: "Show Google reviews on my store page" }), _jsx(FormField, { name: "placeId", label: "Google Place ID", type: "text", value: draft.placeId, onChange: (v) => setDraft((d) => ({ ...d, placeId: v })), placeholder: "ChIJ\u2026", helpText: "Find your Place ID at developers.google.com/maps/documentation/places/web-service/place-id" }), _jsx(FormField, { name: "businessName", label: "Business name", type: "text", value: draft.businessName, onChange: (v) => setDraft((d) => ({ ...d, businessName: v })), placeholder: "Pok\u00E9mon Palace" })] })] }), (draft.averageRating !== undefined || draft.totalReviews !== undefined) && (_jsxs(Section, { children: [_jsx(Heading, { level: 3, className: "mb-3", children: "Review Stats" }), _jsxs(Row, { wrap: true, gap: "lg", children: [draft.averageRating !== undefined && (_jsxs(Div, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)] tracking-wide", size: "xs", transform: "uppercase", children: "Avg rating" }), _jsx(Text, { className: "tabular-nums", size: "2xl", weight: "bold", children: draft.averageRating.toFixed(1) })] })), draft.totalReviews !== undefined && (_jsxs(Div, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)] tracking-wide", size: "xs", transform: "uppercase", children: "Total reviews" }), _jsx(Text, { className: "tabular-nums", size: "2xl", weight: "bold", children: draft.totalReviews })] })), _jsxs(Div, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)] tracking-wide", size: "xs", transform: "uppercase", children: "Last synced" }), _jsx(Text, { size: "sm", children: formattedLastSync })] })] })] })), saveMessage && (_jsx(Alert, { variant: saveMessage.ok ? "success" : "error", children: saveMessage.text })), _jsx(FormErrorSummary, {}), _jsxs(Row, { className: "border-t border-[var(--appkit-color-border)]", padding: "t-md", align: "center", justify: "between", gap: "3", children: [_jsxs(Button, { gap: "sm", variant: "outline", size: "sm", onClick: handleSync, isLoading: syncing, disabled: saving || !draft.placeId.trim(), children: [_jsx(RefreshCw, { className: "h-3.5 w-3.5" }), ACTIONS.STORE["google-reviews-sync"].label] }), _jsx(Button, { variant: "primary", size: "sm", onClick: handleSave, isLoading: saving, disabled: syncing, children: ACTIONS.STORE["save-google-settings"].label })] })] }) }) }));
+    return (_jsx(FormShellContext.Provider, { value: shellCtx, children: _jsx(Div, { paddingX: "x-sm-md", className: "max-w-2xl", padding: "y-md", children: _jsxs(Stack, { gap: "lg", children: [(draft.averageRating !== undefined || draft.totalReviews !== undefined) && (_jsxs(Section, { children: [_jsx(Heading, { level: 3, className: "mb-3", children: "Review Stats" }), _jsxs(Row, { wrap: true, gap: "lg", children: [draft.averageRating !== undefined && (_jsxs(Div, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)] tracking-wide", size: "xs", transform: "uppercase", children: "Avg rating" }), _jsx(Text, { className: "tabular-nums", size: "2xl", weight: "bold", children: draft.averageRating.toFixed(1) })] })), draft.totalReviews !== undefined && (_jsxs(Div, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)] tracking-wide", size: "xs", transform: "uppercase", children: "Total reviews" }), _jsx(Text, { className: "tabular-nums", size: "2xl", weight: "bold", children: draft.totalReviews })] })), _jsxs(Div, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)] tracking-wide", size: "xs", transform: "uppercase", children: "Last synced" }), _jsx(Text, { size: "sm", children: formattedLastSync })] })] })] })), saveMessage && (_jsx(Alert, { variant: saveMessage.ok ? "success" : "error", children: saveMessage.text })), _jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: draft, onChange: (partial) => setDraft((d) => ({ ...d, ...partial })), onSubmit: handleSave, onValidationChange: () => validate(draft), schema: sellerGoogleReviewsFormSchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, submitLabel: ACTIONS.STORE["save-google-settings"].label, isLoading: saving }), _jsx(Row, { padding: "t-md", className: "border-t border-[var(--appkit-color-border)]", align: "center", justify: "start", children: _jsxs(Button, { gap: "sm", variant: "outline", size: "sm", onClick: handleSync, isLoading: syncing, disabled: saving || !(draft.placeId ?? "").trim(), children: [_jsx(RefreshCw, { className: "h-3.5 w-3.5" }), ACTIONS.STORE["google-reviews-sync"].label] }) })] }) }) }));
 }

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

@@ -8,13 +8,18 @@ import React, { useState, useCallback } from "react";
 import { Eye, ExternalLink, Printer, MapPin, Truck } from "lucide-react";
 import { useActionDispatch } from "../../../react/hooks/use-action-dispatch";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
-import { Badge, Button, Div, FilterChipGroup, Heading, Input, Select, SideDrawer, Span, Stack, Text, useToast } from "../../../ui";
+import { Badge, Button, Div, FilterChipGroup, SideDrawer, Span, Stack, Text, useToast } from "../../../ui";
 import { SELLER_ORDER_STATUS_TABS } from "../../admin/constants/filter-tabs";
 import { useOrderScope } from "../../orders/components/OrderScopeTabs";
 import { OrderStatusValues } from "../../orders/schemas/firestore";
 import { isManualPaymentMethod } from "../../orders/constants/payment-window";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { buildBulkAction } from "../../../_internal/shared/actions/bulk-helpers";
+import { sellerOrderUpdateSchema, } from "../schemas/order-forms";
+import { SectionForm, useSectionFormNav, buildSectionsFromSchema, visibleValues, } from "../../shell";
+import { useFormShellState, FormShellContext } from "../../../ui/forms";
+import { applyZodIssues } from "../../../ui/forms/apply-zod-issues";
+import { FormErrorSummary } from "../../../ui/forms/FormErrorSummary";
 import { PhysicalLocationModal } from "./PhysicalLocationModal";
 import { ROUTES } from "../../../constants";
 import { toRecordArray, toRelativeDate, toCurrency, toStringValue } from "../hooks/useSellerListingData";
@@ -88,13 +93,21 @@ export function SellerOrderDetailPanel({ orderId, apiBase, onClose, }) {
     const [fetchError, setFetchError] = useState(null);
     const [saving, setSaving] = useState(false);
     const [saveError, setSaveError] = useState(null);
-    const [newStatus, setNewStatus] = useState("");
-    const [trackingNumber, setTrackingNumber] = useState("");
-    const [carrier, setCarrier] = useState("");
-    const [trackingUrl, setTrackingUrl] = useState("");
+    const [draft, setDraft] = useState({
+        status: "", trackingNumber: "", carrier: "", trackingUrl: "",
+    });
     const [markingPaidIndex, setMarkingPaidIndex] = useState(null);
     const [emiError, setEmiError] = useState(null);
     const { showToast } = useToast();
+    const sections = React.useMemo(() => buildSectionsFromSchema(sellerOrderUpdateSchema, {
+        options: { status: UPDATE_STATUS_OPTIONS },
+    }), []);
+    const nav = useSectionFormNav(sections, draft, { scope: "store:order-update" });
+    const form = useFormShellState(sellerOrderUpdateSchema, {
+        sections: nav.sectionMeta,
+        onGoToSection: nav.goToSection,
+        fieldToSectionIndex: nav.fieldToSectionIndex,
+    });
     React.useEffect(() => {
         setLoading(true);
         setFetchError(null);
@@ -103,9 +116,12 @@ export function SellerOrderDetailPanel({ orderId, apiBase, onClose, }) {
             .then((json) => {
             const o = (json?.data ?? json);
             setOrder(o);
-            setTrackingNumber(o.trackingNumber ?? "");
-            setCarrier(o.carrier ?? "");
-            setTrackingUrl(o.trackingUrl ?? "");
+            setDraft({
+                status: "",
+                trackingNumber: o.trackingNumber ?? "",
+                carrier: o.carrier ?? "",
+                trackingUrl: o.trackingUrl ?? "",
+            });
         })
             .catch(() => setFetchError("Failed to load order details"))
             .finally(() => setLoading(false));
@@ -141,15 +157,19 @@ export function SellerOrderDetailPanel({ orderId, apiBase, onClose, }) {
         setSaving(true);
         setSaveError(null);
         try {
+            const v = visibleValues(sellerOrderUpdateSchema, draft);
             const payload = {};
-            if (newStatus)
-                payload.status = newStatus;
-            if (trackingNumber !== (order.trackingNumber ?? ""))
-                payload.trackingNumber = trackingNumber;
-            if (carrier !== (order.carrier ?? ""))
-                payload.shippingCarrier = carrier;
-            if (trackingUrl !== (order.trackingUrl ?? ""))
-                payload.trackingUrl = trackingUrl;
+            // A DIFF, not a snapshot: the panel writes only what the seller changed,
+            // so re-saving an untouched field cannot clobber a value another path
+            // (the shipping provider, a support agent) has since written.
+            if (v.status)
+                payload.status = v.status;
+            if ((v.trackingNumber ?? "") !== (order.trackingNumber ?? ""))
+                payload.trackingNumber = v.trackingNumber ?? "";
+            if ((v.carrier ?? "") !== (order.carrier ?? ""))
+                payload.shippingCarrier = v.carrier ?? "";
+            if ((v.trackingUrl ?? "") !== (order.trackingUrl ?? ""))
+                payload.trackingUrl = v.trackingUrl ?? "";
             if (Object.keys(payload).length === 0) {
                 onClose();
                 return;
@@ -164,8 +184,16 @@ export function SellerOrderDetailPanel({ orderId, apiBase, onClose, }) {
                 throw new Error(d?.error ?? "Failed to update order");
             }
             const updated = await res.json();
-            setOrder((updated?.data ?? updated));
-            setNewStatus("");
+            const next = (updated?.data ?? updated);
+            setOrder(next);
+            // Reset to "keep current" and re-seed the shipment fields from what the
+            // server actually stored, so the next diff is against the saved state.
+            setDraft({
+                status: "",
+                trackingNumber: next.trackingNumber ?? "",
+                carrier: next.carrier ?? "",
+                trackingUrl: next.trackingUrl ?? "",
+            });
         }
         catch (err) {
             void normalizeError(err);
@@ -181,7 +209,17 @@ export function SellerOrderDetailPanel({ orderId, apiBase, onClose, }) {
                                                                 ? `Paid ${toRelativeDate(inst.paidAt)}`
                                                                 : inst.dueDate
                                                                     ? `Due ${toRelativeDate(inst.dueDate)}`
-                                                                    : "" })] }), _jsxs(Row, { align: "center", gap: "sm", className: "shrink-0", children: [_jsx(Badge, { variant: EMI_INSTALLMENT_BADGE_VARIANT[inst.status] ?? "default", children: inst.status }), inst.status !== "paid" && (_jsx(Button, { action: ACTIONS.STORE["mark-installment-paid"], size: "sm", variant: "outline", isLoading: markingPaidIndex === inst.index, disabled: markingPaidIndex !== null, onClick: () => handleMarkInstallmentPaid(inst.index), children: "Mark paid" }))] })] }, inst.index))) }), emiError && (_jsx(Div, { textSize: "xs", className: "mt-2 border border-error/20", color: "error", surface: "danger-surface", padding: "inlineSm", rounded: "lg", children: emiError }))] })), _jsxs(Stack, { className: "border-t border-[var(--appkit-color-border)]", padding: "t-md", gap: "3", children: [_jsx(Heading, { level: 4, size: "sm", weight: "semibold", children: "Update order" }), _jsx(Select, { label: "New status", value: newStatus, options: UPDATE_STATUS_OPTIONS, onChange: (e) => setNewStatus(e.target.value) }), _jsx(Input, { label: "Tracking number", value: trackingNumber, onChange: (e) => setTrackingNumber(e.target.value), placeholder: "e.g. 12345678901234" }), _jsx(Input, { label: "Carrier", value: carrier, onChange: (e) => setCarrier(e.target.value), placeholder: "e.g. Delhivery, Bluedart" }), _jsx(Input, { label: "Tracking URL (optional)", value: trackingUrl, onChange: (e) => setTrackingUrl(e.target.value), placeholder: "https://...", type: "url" }), saveError && (_jsx(Div, { textSize: "xs", className: "border border-error/20", color: "error", surface: "danger-surface", padding: "inlineSm", rounded: "lg", children: saveError }))] })] }), _jsxs(Row, { border: "top", paddingY: "y-sm-tall", padding: "x-md", align: "center", justify: "end", gap: "3", children: [_jsx(Button, { variant: "outline", onClick: onClose, disabled: saving, children: "Close" }), _jsx(Button, { onClick: handleSave, isLoading: saving, disabled: saving, children: "Save" })] })] }))] }));
+                                                                    : "" })] }), _jsxs(Row, { align: "center", gap: "sm", className: "shrink-0", children: [_jsx(Badge, { variant: EMI_INSTALLMENT_BADGE_VARIANT[inst.status] ?? "default", children: inst.status }), inst.status !== "paid" && (_jsx(Button, { action: ACTIONS.STORE["mark-installment-paid"], size: "sm", variant: "outline", isLoading: markingPaidIndex === inst.index, disabled: markingPaidIndex !== null, onClick: () => handleMarkInstallmentPaid(inst.index), children: "Mark paid" }))] })] }, inst.index))) }), emiError && (_jsx(Div, { textSize: "xs", className: "mt-2 border border-error/20", color: "error", surface: "danger-surface", padding: "inlineSm", rounded: "lg", children: emiError }))] })), _jsxs(Stack, { className: "border-t border-[var(--appkit-color-border)]", padding: "t-md", gap: "3", children: [_jsxs(FormShellContext.Provider, { value: form.shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: draft, onChange: (partial) => setDraft((d) => ({ ...d, ...partial })), onSubmit: () => {
+                                                    // SectionForm scrolls to the first erroring section and then
+                                                    // submits regardless, so the guard lives here.
+                                                    form.clearErrors();
+                                                    const parsed = sellerOrderUpdateSchema.safeParse(visibleValues(sellerOrderUpdateSchema, draft));
+                                                    if (!parsed.success) {
+                                                        applyZodIssues(parsed.error.issues, form.setFieldError);
+                                                        return;
+                                                    }
+                                                    void handleSave();
+                                                }, onValidationChange: () => form.validate(draft), schema: sellerOrderUpdateSchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, submitLabel: "Save", cancelLabel: "Close", onCancel: onClose, isLoading: saving })] }), saveError && (_jsx(Div, { textSize: "xs", className: "border border-error/20", color: "error", surface: "danger-surface", padding: "inlineSm", rounded: "lg", children: saveError }))] })] }), _jsxs(Row, { border: "top", paddingY: "y-sm-tall", padding: "x-md", align: "center", justify: "end", gap: "3", children: [_jsx(Button, { variant: "outline", onClick: onClose, disabled: saving, children: "Close" }), _jsx(Button, { onClick: handleSave, isLoading: saving, disabled: saving, children: "Save" })] })] }))] }));
 }
 function OrderDetailDrawer({ orderId, apiBase, onClose, }) {
     return (_jsx(SideDrawer, { isOpen: true, title: `Order ${orderId}`, onClose: onClose, children: _jsx(SellerOrderDetailPanel, { orderId: orderId, apiBase: apiBase, onClose: onClose }) }));

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

@@ -1,5 +1,6 @@
+import React from "react";
 export interface SellerReviewsViewProps {
     reviewsApiBase?: string;
     replyApiBase?: string;
 }
-export declare function SellerReviewsView({ reviewsApiBase, replyApiBase, }: SellerReviewsViewProps): import("react").JSX.Element;
+export declare function SellerReviewsView({ reviewsApiBase, replyApiBase, }: SellerReviewsViewProps): React.JSX.Element;

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

@@ -1,9 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { normalizeError } from "../../../errors/normalize";
-import { useCallback, useState } from "react";
+import React, { useCallback, useState } from "react";
+import { reviewReplySchema, reviewBulkReplySchema, reviewContestSchema, reviewFeedbackSchema, } from "../schemas/review-forms";
+import { SectionForm, useSectionFormNav, buildSectionsFromSchema, visibleValues, } from "../../shell";
+import { useFormShellState, FormShellContext } from "../../../ui/forms";
+import { applyZodIssues } from "../../../ui/forms/apply-zod-issues";
+import { FormErrorSummary } from "../../../ui/forms/FormErrorSummary";
 import { useQueryClient } from "@tanstack/react-query";
-import { Alert, Badge, Button, Checkbox, Div, Modal, Row, Select, SideDrawer, Span, Stack, Text, Textarea, useToast } from "../../../ui";
+import { Alert, Badge, Button, Checkbox, Div, Modal, Row, Select, SideDrawer, Span, Stack, Text, useToast } from "../../../ui";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { SELLER_BULK_ACTIONS, ROW_ACTION_META } from "../../products/constants/action-defs";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
@@ -32,28 +37,58 @@ function statusBadge(status) {
     };
     return _jsx(Badge, { variant: map[status] ?? "default", children: status });
 }
+/**
+ * The four write surfaces on this page are each ONE textarea, and four
+ * copies of the same twenty lines of SectionForm wiring is exactly the Rule of
+ * Three trigger. It stays local: the shape is "a single-field modal form", not
+ * a generally useful primitive, and `QuickFormDrawer` already owns the
+ * generalised version for drawers.
+ *
+ * `hideActions` is deliberately NOT used — each modal's own footer buttons are
+ * removed in favour of this row, so there is one Save and one Cancel per form.
+ */
+function ReviewTextForm({ schema, values, onChange, onSubmit, submitLabel, onCancel, isLoading, scope, }) {
+    const sections = React.useMemo(() => buildSectionsFromSchema(schema), [schema]);
+    const nav = useSectionFormNav(sections, values, { scope });
+    const form = useFormShellState(schema, {
+        sections: nav.sectionMeta,
+        onGoToSection: nav.goToSection,
+        fieldToSectionIndex: nav.fieldToSectionIndex,
+    });
+    return (_jsxs(FormShellContext.Provider, { value: form.shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: values, onChange: onChange, onSubmit: () => {
+                    // SectionForm scrolls to the first erroring section and then submits
+                    // regardless, so the guard lives here.
+                    form.clearErrors();
+                    const parsed = schema.safeParse(visibleValues(schema, values));
+                    if (!parsed.success) {
+                        applyZodIssues(parsed.error.issues, form.setFieldError);
+                        return;
+                    }
+                    onSubmit();
+                }, onValidationChange: () => form.validate(values), schema: schema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, submitLabel: submitLabel, cancelLabel: "Cancel", onCancel: onCancel, isLoading: isLoading })] }));
+}
 export function SellerReviewsView({ reviewsApiBase = SELLER_ENDPOINTS.REVIEWS, replyApiBase = SELLER_ENDPOINTS.REVIEWS, }) {
     const queryClient = useQueryClient();
     const { showToast } = useToast();
     const refetchReviews = useCallback(() => queryClient.invalidateQueries({ queryKey: ["seller", "reviews", "listing"] }), [queryClient]);
     // Reply drawer
     const [replyTarget, setReplyTarget] = useState(null);
-    const [replyText, setReplyText] = useState("");
+    const [replyDraft, setReplyDraft] = useState({ reply: "" });
     const [replySaving, setReplySaving] = useState(false);
     const [replyError, setReplyError] = useState(null);
     // S-STORE-4-C — bulk reply + contest + feedback selection
     const [bulkReplyOpen, setBulkReplyOpen] = useState(false);
-    const [bulkReplyText, setBulkReplyText] = useState("");
+    const [bulkDraft, setBulkDraft] = useState({ reply: "" });
     const [bulkSaving, setBulkSaving] = useState(false);
     const [bulkTargetIds, setBulkTargetIds] = useState([]);
     const [bulkClearSelection, setBulkClearSelection] = useState(null);
     const [contestTarget, setContestTarget] = useState(null);
-    const [contestReason, setContestReason] = useState("");
+    const [contestDraft, setContestDraft] = useState({ reason: "" });
     const [feedbackTarget, setFeedbackTarget] = useState(null);
-    const [feedbackText, setFeedbackText] = useState("");
+    const [feedbackDraft, setFeedbackDraft] = useState({ feedback: "" });
     const openReply = (review) => {
         setReplyTarget(review);
-        setReplyText(review.sellerReply ?? "");
+        setReplyDraft({ reply: review.sellerReply ?? "" });
         setReplyError(null);
     };
     const handleReplySave = async (onDone) => {
@@ -65,7 +100,7 @@ export function SellerReviewsView({ reviewsApiBase = SELLER_ENDPOINTS.REVIEWS, r
             const res = await fetch(`${replyApiBase}/${replyTarget.id}/reply`, {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ reply: replyText }),
+                body: JSON.stringify({ reply: replyDraft.reply }),
             });
             const json = await res.json();
             if (!res.ok)
@@ -91,7 +126,7 @@ export function SellerReviewsView({ reviewsApiBase = SELLER_ENDPOINTS.REVIEWS, r
             const res = await fetch(SELLER_ENDPOINTS.REVIEW_CONTEST(contestTarget.id), {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ reason: contestReason }),
+                body: JSON.stringify({ reason: contestDraft.reason }),
             });
             if (!res.ok)
                 throw new Error(`Could not submit the contest (${res.status})`);
@@ -101,9 +136,9 @@ export function SellerReviewsView({ reviewsApiBase = SELLER_ENDPOINTS.REVIEWS, r
             return;
         }
         setContestTarget(null);
-        setContestReason("");
+        setContestDraft({ reason: "" });
         onDone();
-    }, [contestTarget, contestReason, showToast]);
+    }, [contestTarget, contestDraft, showToast]);
     const submitFeedback = useCallback(async () => {
         if (!feedbackTarget)
             return;
@@ -111,7 +146,7 @@ export function SellerReviewsView({ reviewsApiBase = SELLER_ENDPOINTS.REVIEWS, r
             const res = await fetch(SELLER_ENDPOINTS.REVIEW_FEEDBACK(feedbackTarget.id), {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ feedback: feedbackText }),
+                body: JSON.stringify({ feedback: feedbackDraft.feedback }),
             });
             if (!res.ok)
                 throw new Error(`Could not send the feedback (${res.status})`);
@@ -121,10 +156,10 @@ export function SellerReviewsView({ reviewsApiBase = SELLER_ENDPOINTS.REVIEWS, r
             return;
         }
         setFeedbackTarget(null);
-        setFeedbackText("");
-    }, [feedbackTarget, feedbackText, showToast]);
+        setFeedbackDraft({ feedback: "" });
+    }, [feedbackTarget, feedbackDraft, showToast]);
     const submitBulkReply = useCallback(async () => {
-        if (!bulkReplyText.trim() || bulkTargetIds.length === 0)
+        if (!bulkDraft.reply.trim() || bulkTargetIds.length === 0)
             return;
         setBulkSaving(true);
         // Partial success is the normal outcome of a bulk write, so report the
@@ -132,7 +167,7 @@ export function SellerReviewsView({ reviewsApiBase = SELLER_ENDPOINTS.REVIEWS, r
         const outcomes = await Promise.all(bulkTargetIds.map((id) => fetch(`${replyApiBase}/${id}/reply`, {
             method: "POST",
             headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ reply: bulkReplyText }),
+            body: JSON.stringify({ reply: bulkDraft.reply }),
         })
             .then((res) => res.ok)
             .catch((err) => {
@@ -145,11 +180,11 @@ export function SellerReviewsView({ reviewsApiBase = SELLER_ENDPOINTS.REVIEWS, r
         }
         setBulkSaving(false);
         setBulkReplyOpen(false);
-        setBulkReplyText("");
+        setBulkDraft({ reply: "" });
         bulkClearSelection?.();
         setBulkTargetIds([]);
         await refetchReviews();
-    }, [bulkReplyText, bulkTargetIds, replyApiBase, bulkClearSelection, refetchReviews, showToast]);
+    }, [bulkDraft, bulkTargetIds, replyApiBase, bulkClearSelection, refetchReviews, showToast]);
     const config = {
         portal: "seller",
         title: "Reviews",
@@ -193,5 +228,5 @@ export function SellerReviewsView({ reviewsApiBase = SELLER_ENDPOINTS.REVIEWS, r
         })),
         renderCards: (rows, _view, selection, isLoading) => (_jsx(Stack, { gap: "md", children: isLoading ? (_jsx(Div, { className: "text-center", padding: "y-xl", children: _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: "Loading reviews\u2026" }) })) : rows.length === 0 ? (_jsx(Div, { className: "text-center", padding: "y-3xl", children: _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: "No reviews found." }) })) : (rows.map((review) => (_jsx(Div, { className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", rounded: "lg", padding: "md", children: _jsxs(Row, { align: "start", justify: "between", gap: "3", wrap: true, children: [_jsxs(Row, { align: "start", className: "flex-1 min-w-0", gap: "3", children: [_jsx(Checkbox, { checked: selection.selectedIds.includes(review.id), onChange: () => selection.toggleSelect(review.id), "aria-label": "Select review" }), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsx(Text, { className: "truncate", weight: "medium", children: review.productTitle }), _jsxs(Row, { className: "mt-1", align: "center", gap: "sm", wrap: true, children: [_jsx(Stars, { rating: review.rating }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: ["by ", review.userName] }), review.verified && _jsx(Badge, { variant: "success", children: "Verified" }), statusBadge(review.status), _jsx(Badge, { variant: review.sellerReply ? "success" : "warning", children: review.sellerReply ? "Store replied" : "Awaiting store reply" })] }), review.title && _jsx(Text, { className: "mt-2", weight: "medium", children: review.title }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-secondary)] line-clamp-3", size: "sm", children: review.comment }), review.sellerReply && (_jsxs(Div, { className: "mt-2 pl-[0.75rem] border-l-2 border-[var(--appkit-color-primary)]", children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: "Store reply:" }), _jsx(Text, { size: "sm", children: review.sellerReply })] }))] })] }), _jsxs(Row, { className: "flex-shrink-0", gap: "sm", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => openReply(review), children: review.sellerReply ? "Edit Reply" : ACTIONS.STORE["reply-review"].label }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setContestTarget(review), children: ACTIONS.STORE["contest-review"].label }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setFeedbackTarget(review), children: ACTIONS.STORE["buyer-feedback"].label })] })] }) }, review.id)))) })),
     };
-    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(SideDrawer, { isOpen: !!replyTarget, onClose: () => setReplyTarget(null), title: replyTarget?.sellerReply ? "Edit Reply" : "Reply to Review", mode: "create", children: _jsxs(Stack, { gap: "md", className: `${__P.p4}`, children: [replyTarget && (_jsxs(Div, { className: `${__P.p3} bg-[var(--appkit-color-surface-muted)]`, rounded: "default", children: [_jsx(Stars, { rating: replyTarget.rating }), _jsx(Text, { className: "mt-1", size: "sm", children: replyTarget.comment })] })), replyError && _jsx(Alert, { variant: "error", children: replyError }), _jsxs(Div, { children: [_jsx(Text, { className: "mb-1.5", size: "sm", weight: "medium", children: "Store reply" }), _jsx(Textarea, { rows: 5, value: replyText, onChange: (e) => setReplyText(e.target.value), maxLength: 1000, placeholder: "Write your response to this review\u2026" }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)] mt-1", size: "xs", align: "end", children: [replyText.length, "/1000"] })] }), _jsxs(Row, { justify: "end", gap: "sm", children: [_jsx(Button, { variant: "outline", onClick: () => setReplyTarget(null), disabled: replySaving, children: "Cancel" }), _jsx(Button, { variant: "primary", onClick: () => handleReplySave(refetchReviews), disabled: replySaving || !replyText.trim(), isLoading: replySaving, children: replyTarget?.sellerReply ? "Update Reply" : "Post Reply" })] })] }) }), _jsx(Modal, { isOpen: bulkReplyOpen, onClose: () => setBulkReplyOpen(false), title: "Bulk reply to selected reviews", actions: _jsxs(Row, { gap: "sm", children: [_jsx(Button, { variant: "ghost", onClick: () => setBulkReplyOpen(false), disabled: bulkSaving, children: "Cancel" }), _jsx(Button, { variant: "primary", onClick: () => void submitBulkReply(), disabled: !bulkReplyText.trim() || bulkSaving, isLoading: bulkSaving, children: "Send reply" })] }), children: _jsxs(Stack, { gap: "md", padding: "2xs", children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "The same reply will be posted on all selected reviews." }), _jsx(Textarea, { value: bulkReplyText, onChange: (e) => setBulkReplyText(e.target.value), rows: 5, placeholder: "Thanks for your review\u2026", label: "Reply" })] }) }), _jsx(Modal, { isOpen: !!contestTarget, onClose: () => setContestTarget(null), title: "Contest this review", actions: _jsxs(Row, { gap: "sm", children: [_jsx(Button, { variant: "ghost", onClick: () => setContestTarget(null), children: "Cancel" }), _jsx(Button, { variant: "primary", onClick: () => void submitContest(refetchReviews), disabled: !contestReason.trim(), children: "Submit" })] }), children: _jsxs(Stack, { gap: "md", padding: "2xs", children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Flag this review for admin investigation. Provide a clear reason \u2014 fake, abusive, off-topic, etc." }), _jsx(Textarea, { value: contestReason, onChange: (e) => setContestReason(e.target.value), rows: 4, label: "Reason" })] }) }), _jsx(Modal, { isOpen: !!feedbackTarget, onClose: () => setFeedbackTarget(null), title: "Send feedback to buyer", actions: _jsxs(Row, { gap: "sm", children: [_jsx(Button, { variant: "ghost", onClick: () => setFeedbackTarget(null), children: "Cancel" }), _jsx(Button, { variant: "primary", onClick: () => void submitFeedback(), disabled: !feedbackText.trim(), children: "Send" })] }), children: _jsxs(Stack, { gap: "md", padding: "2xs", children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Private message sent to the buyer's notification inbox. Does not appear on the public review." }), _jsx(Textarea, { value: feedbackText, onChange: (e) => setFeedbackText(e.target.value), rows: 4, label: "Feedback" })] }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(SideDrawer, { isOpen: !!replyTarget, onClose: () => setReplyTarget(null), title: replyTarget?.sellerReply ? "Edit Reply" : "Reply to Review", mode: "create", children: _jsxs(Stack, { gap: "md", className: `${__P.p4}`, children: [replyTarget && (_jsxs(Div, { className: `${__P.p3} bg-[var(--appkit-color-surface-muted)]`, rounded: "default", children: [_jsx(Stars, { rating: replyTarget.rating }), _jsx(Text, { className: "mt-1", size: "sm", children: replyTarget.comment })] })), replyError && _jsx(Alert, { variant: "error", children: replyError }), _jsx(ReviewTextForm, { schema: reviewReplySchema, values: replyDraft, onChange: (partial) => setReplyDraft((d) => ({ ...d, ...partial })), onSubmit: () => void handleReplySave(refetchReviews), submitLabel: replyTarget?.sellerReply ? "Update Reply" : "Post Reply", onCancel: () => setReplyTarget(null), isLoading: replySaving, scope: "store:review-reply" })] }) }), _jsx(Modal, { isOpen: bulkReplyOpen, onClose: () => setBulkReplyOpen(false), title: "Bulk reply to selected reviews", children: _jsx(Stack, { gap: "md", padding: "2xs", children: _jsx(ReviewTextForm, { schema: reviewBulkReplySchema, values: bulkDraft, onChange: (partial) => setBulkDraft((d) => ({ ...d, ...partial })), onSubmit: () => void submitBulkReply(), submitLabel: "Send reply", onCancel: () => setBulkReplyOpen(false), isLoading: bulkSaving, scope: "store:review-bulk-reply" }) }) }), _jsx(Modal, { isOpen: !!contestTarget, onClose: () => setContestTarget(null), title: "Contest this review", children: _jsxs(Stack, { gap: "md", padding: "2xs", children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Flag this review for admin investigation." }), _jsx(ReviewTextForm, { schema: reviewContestSchema, values: contestDraft, onChange: (partial) => setContestDraft((d) => ({ ...d, ...partial })), onSubmit: () => void submitContest(refetchReviews), submitLabel: "Submit", onCancel: () => setContestTarget(null), scope: "store:review-contest" })] }) }), _jsx(Modal, { isOpen: !!feedbackTarget, onClose: () => setFeedbackTarget(null), title: "Send feedback to buyer", children: _jsx(Stack, { gap: "md", padding: "2xs", children: _jsx(ReviewTextForm, { schema: reviewFeedbackSchema, values: feedbackDraft, onChange: (partial) => setFeedbackDraft((d) => ({ ...d, ...partial })), onSubmit: () => void submitFeedback(), submitLabel: "Send", onCancel: () => setFeedbackTarget(null), scope: "store:review-feedback" }) }) })] }));
 }

package/dist/features/seller/constants/store-tabs.d.ts

@@ -0,0 +1,64 @@
+/**
+ * 🛑 `StoreDashboardTab`, not `StoreTab` — that name is already taken by
+ * `features/stores`, which uses it for a tab on the PUBLIC store detail page.
+ * Two same-named types in one package is the defect Root Cause #36 records, and
+ * the barrel's choice between them would be invisible at every call site.
+ */
+export interface StoreDashboardTab {
+    id: string;
+    label: string;
+    /** What lives in here, for anyone who does not know the tab's name. */
+    description: string;
+}
+/** "Get paid": what I am owed, where it goes, on what schedule. */
+export declare const PAYOUTS_TABS: readonly [{
+    readonly id: "payouts";
+    readonly label: "Payouts";
+    readonly description: "What you have been paid, and what is still due.";
+}, {
+    readonly id: "methods";
+    readonly label: "Methods";
+    readonly description: "Where your money goes — bank or UPI.";
+}, {
+    readonly id: "settings";
+    readonly label: "Settings";
+    readonly description: "How often you get paid, and the minimum.";
+}];
+export type PayoutsTabId = (typeof PAYOUTS_TABS)[number]["id"];
+export declare function isPayoutsTabId(value: string | null | undefined): value is PayoutsTabId;
+/** Shipping defaults, plus the reusable named presets built on top of them. */
+export declare const SHIPPING_TABS: readonly [{
+    readonly id: "rates";
+    readonly label: "Rates & zones";
+    readonly description: "What you charge to ship, and where you ship to.";
+}, {
+    readonly id: "configs";
+    readonly label: "Named configs";
+    readonly description: "Named shipping rules you can reuse per listing.";
+}];
+export type ShippingTabId = (typeof SHIPPING_TABS)[number]["id"];
+export declare function isShippingTabId(value: string | null | undefined): value is ShippingTabId;
+/** The pack-and-dispatch loop: the queue, then the paperwork it needs. */
+export declare const FULFILLMENT_TABS: readonly [{
+    readonly id: "queue";
+    readonly label: "Queue";
+    readonly description: "Orders waiting to be packed or handed over.";
+}, {
+    readonly id: "print";
+    readonly label: "Print centre";
+    readonly description: "Print labels, invoices and barcodes in a batch.";
+}];
+export type FulfillmentTabId = (typeof FULFILLMENT_TABS)[number]["id"];
+export declare function isFulfillmentTabId(value: string | null | undefined): value is FulfillmentTabId;
+/** The shop's identity — its look, and the address buyers reach it at. */
+export declare const STOREFRONT_TABS: readonly [{
+    readonly id: "profile";
+    readonly label: "Profile";
+    readonly description: "Your shop's name, logo, banner and description.";
+}, {
+    readonly id: "slug";
+    readonly label: "Web address";
+    readonly description: "The web address buyers reach your shop at.";
+}];
+export type StorefrontTabId = (typeof STOREFRONT_TABS)[number]["id"];
+export declare function isStorefrontTabId(value: string | null | undefined): value is StorefrontTabId;