@mohasinac/appkit 4.61.0 → 4.62.0

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

@@ -64,7 +64,7 @@ export function ReferenceRecordEditor({ endpoint, noun, fields, publicHref, }) {
             catch (err) {
                 const e = normalizeError(err);
                 if (!cancelled)
-                    setLoadError(e.message);
+                    setLoadError(toUserMessage(e?.code, undefined, { fallback: "Could not load that record." }));
             }
             finally {
                 if (!cancelled)

package/dist/features/admin/hooks/useOptimisticRowFlag.d.ts

@@ -0,0 +1,33 @@
+import { type QueryKey } from "@tanstack/react-query";
+export interface UseOptimisticRowFlagOptions<T> {
+    /**
+     * Performs the write. Receives the row id and the value being set.
+     *
+     * 🛑 Send ONLY the field being changed. Several of this hook's consumers sit
+     * over repositories that merge a `config`/nested object by READING the
+     * document first; omitting that field short-circuits the read, so a toggle
+     * costs one write and no read.
+     */
+    mutate: (id: string, next: T) => Promise<unknown>;
+    /**
+     * Query keys to invalidate. Pass every key that renders this field —
+     * several of these records are read by a PUBLIC surface under a key of its
+     * own, and forgetting it leaves the storefront stale until its own TTL.
+     */
+    invalidate: readonly QueryKey[];
+    /** Toast copy. Receives the value that was set. */
+    successMessage: (next: T) => string;
+    /** Fallback when the thrown error carries no message. */
+    errorMessage?: string;
+}
+export interface UseOptimisticRowFlagReturn<T> {
+    /** `overrides[id] ?? row.value` — the value to render. */
+    overrides: Record<string, T>;
+    /** Resolve a row's current value against any pending override. */
+    resolve: (id: string, serverValue: T) => T;
+    /** The id currently being written, for a per-row disabled state. */
+    pendingId: string | null;
+    /** Fire the change. Safe to call from an `onChange` without awaiting. */
+    set: (id: string, next: T) => Promise<void>;
+}
+export declare function useOptimisticRowFlag<T>({ mutate, invalidate, successMessage, errorMessage, }: UseOptimisticRowFlagOptions<T>): UseOptimisticRowFlagReturn<T>;

package/dist/features/admin/hooks/useOptimisticRowFlag.js

@@ -0,0 +1,87 @@
+"use client";
+/*
+ * WHY: Eight listing views grew the same per-row "flip one field" control in
+ *      one change — homepage sections (`enabled`), carousel slides (`active`),
+ *      the six seller listing-type pages (`status`), seller bundles, grouped
+ *      listings, store categories, shipping configs and payout methods
+ *      (`isActive`). Every one needs an optimistic override so the switch
+ *      moves under the finger, a PATCH, an invalidate, and a rollback.
+ *
+ *      That is well past the Duplication Framework's Rule of Three, and the
+ *      bug-fix multiplier is the real argument: the rollback is subtly wrong
+ *      in the shape everyone writes first.
+ *
+ * 🛑 THE ROLLBACK BUG THIS EXISTS TO MAKE UNREPEATABLE
+ *
+ * The obvious implementation captures the previous override and writes it
+ * back on failure:
+ *
+ *     const prev = overrides[id];              // `undefined` on a row's
+ *     setOverrides((o) => ({...o, [id]: v}));  // FIRST toggle
+ *     catch { setOverrides((o) => ({...o, [id]: prev})); }
+ *
+ * `prev` is `undefined` the first time any given row is toggled, and writing
+ * `undefined` back is not the same as removing the key — a reader doing
+ * `overrides[id] ?? row.value` gets `undefined`, which for a boolean renders
+ * as `false`. So a FAILED toggle of a row the server holds as `true` leaves
+ * the UI asserting the opposite of the truth, which is worse than not having
+ * rolled back at all. `AdminProductsView.tsx` has this shape.
+ *
+ * The fix is to DELETE the key, which is what `clear` below does.
+ *
+ * 🛑 The key is cleared on SUCCESS too, and only AFTER the invalidation has
+ * settled. `invalidateQueries` resolves once active refetches finish, so by
+ * then `mapRows` is already reading the fresh server value and there is no
+ * visible flip-back-then-forward. An override that is never cleared pins the
+ * row forever and masks every later server-side change to it.
+ *
+ * EXPORTS: useOptimisticRowFlag, UseOptimisticRowFlagOptions
+ *
+ * @tag domain:admin,seller
+ * @tag layer:hook
+ * @tag pattern:none
+ * @tag access:client
+ * @tag consumers:AdminSectionsView,AdminCarouselView,SellerListingTypeView,SellerBundlesView,SellerGroupedListingsView,SellerStoreCategoriesView,SellerShippingConfigsView,SellerPayoutMethodsView
+ * @tag sideEffects:network
+ */
+import React from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useToast } from "../../../ui/index.js";
+import { normalizeError } from "../../../errors/normalize.js";
+import { toUserMessage } from "../../../errors/error-display-map.js";
+export function useOptimisticRowFlag({ mutate, invalidate, successMessage, errorMessage = "Could not save that change.", }) {
+    const queryClient = useQueryClient();
+    const { showToast } = useToast();
+    const [overrides, setOverrides] = React.useState({});
+    const [pendingId, setPendingId] = React.useState(null);
+    const clear = React.useCallback((id) => {
+        setOverrides((prev) => {
+            if (!(id in prev))
+                return prev;
+            const next = { ...prev };
+            // DELETE, never write back a captured value — see the header.
+            delete next[id];
+            return next;
+        });
+    }, []);
+    const set = React.useCallback(async (id, next) => {
+        setOverrides((prev) => ({ ...prev, [id]: next }));
+        setPendingId(id);
+        try {
+            await mutate(id, next);
+            await Promise.all(invalidate.map((queryKey) => queryClient.invalidateQueries({ queryKey })));
+            clear(id);
+            showToast(successMessage(next), "success");
+        }
+        catch (err) {
+            const normalized = normalizeError(err);
+            clear(id);
+            showToast(toUserMessage(normalized.code, undefined, { fallback: errorMessage }), "error");
+        }
+        finally {
+            setPendingId(null);
+        }
+    }, [mutate, invalidate, queryClient, clear, showToast, successMessage, errorMessage]);
+    const resolve = React.useCallback((id, serverValue) => (id in overrides ? overrides[id] : serverValue), [overrides]);
+    return { overrides, resolve, pendingId, set };
+}

package/dist/features/admin/repository/notification.repository.d.ts

@@ -30,6 +30,21 @@ export declare class NotificationRepository extends BaseRepository<NotificationD
      * Get unread notification count for a user.
      */
     getUnreadCount(userId: string): Promise<number>;
+    /**
+     * Mark a single notification UNREAD again.
+     *
+     * 🛑 `readAt` is cleared, not left behind. It is the timestamp of a read
+     * that the caller is now saying did not happen, and a row that is
+     * `isRead: false` with a `readAt` set is a contradiction the next reader has
+     * to resolve — the digest and the unread badge key on `isRead`, so they
+     * would disagree with anything that looked at `readAt`.
+     *
+     * There was no way to do this at all: the buyer's notifications page offered
+     * only Mark-read, and the PATCH route hard-coded `markAsRead(id)` without
+     * reading a body — so a notification clicked by accident was gone from the
+     * unread list for good.
+     */
+    markAsUnread(id: string): Promise<NotificationDocument | null>;
     /**
      * Mark a single notification as read.
      */

package/dist/features/admin/repository/notification.repository.js

@@ -59,6 +59,38 @@ export class NotificationRepository extends BaseRepository {
             return 0;
         }
     }
+    /**
+     * Mark a single notification UNREAD again.
+     *
+     * 🛑 `readAt` is cleared, not left behind. It is the timestamp of a read
+     * that the caller is now saying did not happen, and a row that is
+     * `isRead: false` with a `readAt` set is a contradiction the next reader has
+     * to resolve — the digest and the unread badge key on `isRead`, so they
+     * would disagree with anything that looked at `readAt`.
+     *
+     * There was no way to do this at all: the buyer's notifications page offered
+     * only Mark-read, and the PATCH route hard-coded `markAsRead(id)` without
+     * reading a body — so a notification clicked by accident was gone from the
+     * unread list for good.
+     */
+    async markAsUnread(id) {
+        try {
+            const now = new Date();
+            await this.getCollection()
+                .doc(id)
+                .update(prepareForFirestore({
+                [NOTIFICATION_FIELDS.IS_READ]: false,
+                [NOTIFICATION_FIELDS.READ_AT]: null,
+                [NOTIFICATION_FIELDS.UPDATED_AT]: now,
+            }));
+            return this.findById(id);
+        }
+        catch (error) {
+            void normalizeError(error);
+            serverLogger.error("Failed to mark notification unread", { id, error });
+            throw error;
+        }
+    }
     /**
      * Mark a single notification as read.
      */

package/dist/features/admin/schemas/action-index-form.d.ts

@@ -0,0 +1,34 @@
+import { z } from "zod";
+import type { QuickFieldDef } from "../../shell/QuickFormDrawer";
+/**
+ * 🛑 `keywords` is a COMMA-SEPARATED STRING here, not an array.
+ *
+ * `QuickFormDrawer` has no array control — its field types are text / number
+ * / select / toggle / date / textarea / email / url. Declaring `z.string()`
+ * and splitting at the call site keeps the schema honest about what the form
+ * actually produces, rather than describing a shape no control can emit.
+ * `splitKeywords` below is the one place that conversion happens.
+ */
+export declare const actionIndexOverrideSchema: z.ZodObject<{
+    label: z.ZodString;
+    description: z.ZodOptional<z.ZodString>;
+    keywords: z.ZodOptional<z.ZodString>;
+    weight: z.ZodOptional<z.ZodNumber>;
+}, "strip", z.ZodTypeAny, {
+    label: string;
+    weight?: number | undefined;
+    description?: string | undefined;
+    keywords?: string | undefined;
+}, {
+    label: string;
+    weight?: number | undefined;
+    description?: string | undefined;
+    keywords?: string | undefined;
+}>;
+export type ActionIndexOverrideFormInput = z.infer<typeof actionIndexOverrideSchema>;
+/** The drawer's fields, in the order an admin reads them. */
+export declare const ACTION_INDEX_OVERRIDE_FIELDS: QuickFieldDef[];
+/** The single place the comma-separated field becomes the stored array. */
+export declare function splitKeywords(raw: string | undefined): string[] | undefined;
+/** The reverse, for seeding the form from a stored override. */
+export declare function joinKeywords(keywords: readonly string[] | undefined): string;

package/dist/features/admin/schemas/action-index-form.js

@@ -0,0 +1,115 @@
+/*
+ * WHY: `/admin/action-index` told admins "Labels, descriptions and keywords
+ *      can be edited here" while offering only a Shown toggle. The server has
+ *      always accepted those fields — `ActionIndexOverride` carries `label`,
+ *      `description`, `keywords` and `weight`, and `PATCH
+ *      /api/admin/action-index` writes them through `setOverride`. The UI had
+ *      simply never grown the control, so the sentence was a promise nothing
+ *      kept.
+ *
+ * WHAT: The write contract for ONE entry override, as edited from the admin
+ *       row action.
+ *
+ * ## What is deliberately absent
+ *
+ * `href`, `kind`, `portal` and every permission field. The view's own
+ * docstring draws this line and it is the right one: repointing a built-in
+ * route is routing, and relaxing a permission is access control. Neither
+ * belongs in a quick-edit drawer beside a label.
+ *
+ * `enabled` is also absent — it has its own control in the Shown column, and
+ * a second place to set it is a second source of truth for one boolean.
+ *
+ * EXPORTS:
+ *   actionIndexOverrideSchema, ActionIndexOverrideFormInput,
+ *   ACTION_INDEX_OVERRIDE_FIELDS
+ *
+ * @tag domain:admin,search
+ * @tag layer:schema
+ * @tag pattern:none
+ * @tag access:isomorphic
+ * @tag consumers:AdminActionIndexView
+ * @tag sideEffects:none
+ */
+import { z } from "zod";
+/**
+ * 🛑 `keywords` is a COMMA-SEPARATED STRING here, not an array.
+ *
+ * `QuickFormDrawer` has no array control — its field types are text / number
+ * / select / toggle / date / textarea / email / url. Declaring `z.string()`
+ * and splitting at the call site keeps the schema honest about what the form
+ * actually produces, rather than describing a shape no control can emit.
+ * `splitKeywords` below is the one place that conversion happens.
+ */
+export const actionIndexOverrideSchema = z.object({
+    label: z
+        .string()
+        .trim()
+        .min(1, "A label is required — it is what the sidebar and search show.")
+        .max(80, "Keep labels under 80 characters so they fit the sidebar."),
+    description: z
+        .string()
+        .trim()
+        .max(200, "Keep descriptions under 200 characters.")
+        .optional(),
+    keywords: z
+        .string()
+        .trim()
+        .max(300, "Keep the keyword list under 300 characters.")
+        .optional(),
+    /*
+     * Ranking, not ordering. Higher sorts first in the search and the command
+     * palette. Bounded because an unbounded weight is how one entry ends up
+     * permanently above every other and nobody remembers why.
+     */
+    weight: z.coerce
+        .number()
+        .int("Weight must be a whole number.")
+        .min(0, "Weight cannot be negative.")
+        .max(100, "Weight is capped at 100.")
+        .optional(),
+});
+/** The drawer's fields, in the order an admin reads them. */
+export const ACTION_INDEX_OVERRIDE_FIELDS = [
+    {
+        name: "label",
+        label: "Label",
+        type: "text",
+        required: true,
+        helperText: "What the sidebar, header search and command palette show.",
+    },
+    {
+        name: "description",
+        label: "Description",
+        type: "textarea",
+        placeholder: "One line explaining what this entry is for",
+    },
+    {
+        name: "keywords",
+        label: "Keywords",
+        type: "text",
+        placeholder: "refunds, returns, money back",
+        helperText: "Comma-separated. Extra words that should find this entry in search.",
+    },
+    {
+        name: "weight",
+        label: "Weight",
+        type: "number",
+        helperText: "Higher sorts first in search results. 0–100.",
+    },
+];
+/** The single place the comma-separated field becomes the stored array. */
+export function splitKeywords(raw) {
+    if (raw === undefined)
+        return undefined;
+    const parts = raw
+        .split(",")
+        .map((part) => part.trim())
+        .filter(Boolean);
+    // An empty box means "no keywords", which is `[]` — not "leave them alone".
+    return parts;
+}
+/** The reverse, for seeding the form from a stored override. */
+export function joinKeywords(keywords) {
+    return (keywords ?? []).join(", ");
+}

package/dist/features/auth/components/RegisterForm.js

@@ -11,6 +11,7 @@ import { FormShellContext, useFormShellState } from "../../../ui/forms/FormShell
 import { registerSchema, registerPasswordSchema } from "../schemas/index.js";
 import { FormErrorSummary } from "../../../ui/forms/FormErrorSummary.js";
 import { SectionForm, useSectionFormNav } from "../../shell/SectionForm.js";
+import { toUserMessage } from "../../../errors/error-display-map.js";
 const registerClientSchema = registerSchema.extend({
     displayName: z.string().min(1, "Enter your name"),
     confirmPassword: registerPasswordSchema,
@@ -81,7 +82,7 @@ export function RegisterForm({ onSubmit, isLoading = false, error, success, labe
              * email, a rejected password — which is the one thing they can act on.
              */
             const normalized = normalizeError(err);
-            setFieldError("email", normalized.message || "Registration failed");
+            setFieldError("email", toUserMessage(normalized.code, undefined, { fallback: "We couldn't create your account. Please check your details and try again." }));
         }
     };
     return (_jsx(Row, { className: `min-h-[60vh] ${className}`, align: "center", justify: "center", padding: "x-md", children: _jsxs(Stack, { className: "max-w-md w-full", gap: "lg", children: [_jsxs(Div, { className: "text-center", children: [_jsx(Row, { justify: "center", className: "mb-3", children: _jsx(SiteMark, { size: "lg" }) }), _jsx(Heading, { level: 1, className: "font-extrabold", size: "3xl", children: labels.title ?? "Create Account" }), (labels.subtitle || renderLoginLink) && (_jsxs(Text, { className: "mt-2 text-[var(--appkit-color-text-muted)]", size: "sm", children: [labels.subtitle ?? "Already have an account?", " ", renderLoginLink?.()] }))] }), success && (_jsx(Alert, { variant: "success", compact: true, children: success })), error && (_jsx(Alert, { variant: "error", compact: true, children: error })), _jsxs(FormShellContext.Provider, { value: shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: values, onChange: (partial) => setValues((prev) => Object.assign({}, prev, partial)), onSubmit: handleSubmit, schema: registerClientSchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, isLoading: isLoading, submitLabel: isLoading

package/dist/features/catalogue/components/CatalogueItemEditorView.js

@@ -95,11 +95,11 @@ export function CatalogueItemEditorView({ item, onSaved }) {
                     // than pointing at a photo the user has since removed.
                     onChange({ images: urls, mainImage: urls[0] ?? "" });
                 }, onUpload: handleUpload, accept: IMAGE_ACCEPT_ATTR, maxItems: 8, helperText: "Photos older than 30 days must be refreshed before this item can be listed." })),
-            categorySlugs: ({ values, onChange }) => (
+            categorySlugs: ({ values, onChange, errors }) => (
             // Explicit `<string>`: with `multiple`, `value` is `V[]`, so an
             // inferred V reads the array itself as the option type.
-            _jsx(PaginatedSelect, { multiple: true, value: values.categorySlugs, onChange: (v) => onChange({ categorySlugs: v ?? [] }), loadOptions: loadCategoryOptions, placeholder: "Search categories\u2026", searchPlaceholder: "Type a category name\u2026", noResultsText: "No categories found", ariaLabel: "Categories" })),
-            brandSlug: ({ values, onChange }) => (_jsx(PaginatedSelect, { value: values.brandSlug || null, onChange: (v) => onChange({ brandSlug: v ?? "" }), loadOptions: loadBrandOptions, placeholder: "Search brands\u2026", searchPlaceholder: "Type a brand name\u2026", noResultsText: "No brands found", ariaLabel: "Brand" })),
+            _jsx(PaginatedSelect, { multiple: true, name: "categorySlugs", error: errors.categorySlugs, value: values.categorySlugs, onChange: (v) => onChange({ categorySlugs: v ?? [] }), loadOptions: loadCategoryOptions, placeholder: "Search categories\u2026", searchPlaceholder: "Type a category name\u2026", noResultsText: "No categories found", ariaLabel: "Categories" })),
+            brandSlug: ({ values, onChange, errors }) => (_jsx(PaginatedSelect, { name: "brandSlug", error: errors.brandSlug, value: values.brandSlug || null, onChange: (v) => onChange({ brandSlug: v ?? "" }), loadOptions: loadBrandOptions, placeholder: "Search brands\u2026", searchPlaceholder: "Type a brand name\u2026", noResultsText: "No brands found", ariaLabel: "Brand" })),
         },
     }), [handleUpload]);
     const nav = useSectionFormNav(sections, form, { scope: "user:catalogue-item" });

package/dist/features/events/components/AdminEventEditorView.js

@@ -407,10 +407,10 @@ export function AdminEventEditorView({ eventId, onSaved, embedded, allowedTypes,
             // The per-step `validate` is gone: every rule it stated is already in
             // eventDraftSchema (title/startsAt/endsAt are .min(1)), and it only ever
             // acted as a gate to the next step.
-            render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Event Details" }), !isEdit && (_jsx(Select, { label: "Event type", value: values.type, options: allowedTypes ? EVENT_TYPE_OPTIONS.filter((o) => allowedTypes.includes(o.value)) : EVENT_TYPE_OPTIONS, onChange: (e) => onChange({ type: e.target.value }) })), _jsx(Input, { label: "Title", value: values.title, onChange: (e) => {
+            render: ({ values, onChange, errors }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Event Details" }), !isEdit && (_jsx(Select, { label: "Event type", error: errors.type, value: values.type, options: allowedTypes ? EVENT_TYPE_OPTIONS.filter((o) => allowedTypes.includes(o.value)) : EVENT_TYPE_OPTIONS, onChange: (e) => onChange({ type: e.target.value }) })), _jsx(Input, { label: "Title", error: errors.title, value: values.title, onChange: (e) => {
                             const v = e.target.value;
                             onChange({ title: v, ...(!slugManual && { slug: toEventSlug(v) }) });
-                        }, placeholder: "Charizard Flash Sale 2026", required: true }), _jsx(Input, { label: "Slug", value: values.slug, onChange: (e) => { setSlugManual(true); onChange({ slug: e.target.value }); }, placeholder: "event-charizard-flash-sale-2026", helperText: "Auto-generated from title. Must start with 'event-'." }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { children: "Description" }), _jsx(RichTextEditor, { value: values.description, onChange: (v) => onChange({ description: v }), minHeightClassName: "min-h-[120px]", placeholder: "Describe this event\u2026" })] }), _jsxs(Grid, { cols: 2, gap: "sm", children: [_jsx(Input, { label: "Starts at", type: "datetime-local", value: values.startsAt, onChange: (e) => onChange({ startsAt: e.target.value }), required: true }), _jsx(Input, { label: "Ends at", type: "datetime-local", value: values.endsAt, onChange: (e) => onChange({ endsAt: e.target.value }), required: true })] }), _jsx(TagInput, { label: "Tags", value: values.tags, onChange: (t) => onChange({ tags: t }), placeholder: "e.g. pokemon, sale, 2026" })] })),
+                        }, placeholder: "Charizard Flash Sale 2026", required: true }), _jsx(Input, { label: "Slug", error: errors.slug, value: values.slug, onChange: (e) => { setSlugManual(true); onChange({ slug: e.target.value }); }, placeholder: "event-charizard-flash-sale-2026", helperText: "Auto-generated from title. Must start with 'event-'." }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { children: "Description" }), _jsx(RichTextEditor, { value: values.description, onChange: (v) => onChange({ description: v }), minHeightClassName: "min-h-[120px]", placeholder: "Describe this event\u2026" })] }), _jsxs(Grid, { cols: 2, gap: "sm", children: [_jsx(Input, { label: "Starts at", error: errors.startsAt, type: "datetime-local", value: values.startsAt, onChange: (e) => onChange({ startsAt: e.target.value }), required: true }), _jsx(Input, { label: "Ends at", error: errors.endsAt, type: "datetime-local", value: values.endsAt, onChange: (e) => onChange({ endsAt: e.target.value }), required: true })] }), _jsx(TagInput, { label: "Tags", value: values.tags, onChange: (t) => onChange({ tags: t }), placeholder: "e.g. pokemon, sale, 2026" })] })),
         },
         {
             id: "media",
@@ -419,7 +419,7 @@ export function AdminEventEditorView({ eventId, onSaved, embedded, allowedTypes,
             // section mid-upload discards the transfer.
             keepMounted: true,
             fields: ["coverImageUrl"],
-            render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Media" }), _jsx(Input, { label: "Cover Image URL (optional)", value: values.coverImageUrl, onChange: (e) => onChange({ coverImageUrl: e.target.value }), placeholder: "https://\u2026", helperText: "Direct link to the event cover image." })] })),
+            render: ({ values, onChange, errors }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Media" }), _jsx(Input, { label: "Cover Image URL (optional)", error: errors.coverImageUrl, value: values.coverImageUrl, onChange: (e) => onChange({ coverImageUrl: e.target.value }), placeholder: "https://\u2026", helperText: "Direct link to the event cover image." })] })),
         },
         {
             id: "settings",
@@ -428,17 +428,19 @@ export function AdminEventEditorView({ eventId, onSaved, embedded, allowedTypes,
             // Same: the offer-coupon, offer-display-code and poll-minimum-options
             // rules are all stated in eventDraftSchema's superRefine, which now
             // surfaces them inline on the field instead of as a step-blocking banner.
-            render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Event Settings" }), isEdit && (_jsx(Select, { label: "Status", value: values.status, options: EVENT_STATUS_OPTIONS, onChange: (e) => onChange({ status: e.target.value }) })), values.createdBy && (_jsxs(Stack, { gap: "none", children: [_jsx(Text, { size: "sm", weight: "medium", className: "mb-1", children: "Created by" }), _jsx(Text, { size: "sm", color: "muted", children: values.createdBy })] })), _jsxs(Stack, { gap: "xs", surface: "muted", rounded: "lg", border: "default", padding: "sm", children: [_jsx(Toggle, { checked: values.allowGuestParticipation, onChange: (v) => onChange({ allowGuestParticipation: v }), label: "Allow guest participation (no login required)" }), _jsx(Text, { size: "xs", color: "muted", children: "When enabled, unauthenticated visitors can participate in this event (poll vote, survey/feedback response, raffle entry, or wheel spin), identified by a hashed IP address instead of an account. Applies uniformly to whatever entry mechanism this event type uses." })] }), _jsxs(Stack, { gap: "xs", surface: "muted", rounded: "lg", border: "default", padding: "sm", children: [_jsx(Toggle, { checked: values.isPinned, onChange: (v) => onChange({ isPinned: v }), label: "Pin to the top of Events" }), _jsx(Text, { size: "xs", color: "muted", children: "Pinned events are listed first on the Events page and in the homepage strip, ahead of the usual soonest-first order. A pinned event still has to be Active to appear at all \u2014 pinning does not publish it." })] }), values.type === "sale" && (_jsxs(Stack, { gap: "xs", surface: "muted", rounded: "lg", border: "default", padding: "sm", children: [_jsx(Text, { size: "sm", weight: "semibold", color: "muted", children: "Sale configuration" }), _jsxs(Grid, { cols: 2, gap: "sm", children: [_jsx(Input, { label: "Discount %", type: "number", value: values.discountPercent, onChange: (e) => onChange({ discountPercent: e.target.value }), placeholder: "10" }), _jsx(Input, { label: "Banner text (optional)", value: values.saleBannerText, onChange: (e) => onChange({ saleBannerText: e.target.value }), placeholder: "Limited time \u2014 ends Sunday!" })] })] })), values.type === "offer" && (_jsxs(Stack, { gap: "xs", surface: "muted", rounded: "lg", border: "default", padding: "sm", children: [_jsx(Text, { size: "sm", weight: "semibold", color: "muted", children: "Offer configuration" }), _jsxs(Grid, { cols: 2, gap: "sm", children: [_jsxs(Div, { children: [_jsx(Text, { size: "sm", weight: "medium", className: "mb-1", children: "Coupon" }), _jsx(CouponInlineSelect, { scope: "admin", value: values.couponId, onChange: (id) => onChange({ couponId: id ?? "" }), placeholder: "Search coupons\u2026", allowCreate: false })] }), _jsx(Input, { label: "Display code", value: values.displayCode, onChange: (e) => onChange({ displayCode: e.target.value }), placeholder: "CHARIZARD25", required: true })] }), _jsx(Input, { label: "Banner text (optional)", value: values.offerBannerText, onChange: (e) => onChange({ offerBannerText: e.target.value }), placeholder: "Use CHARIZARD25 at checkout" })] })), values.type === "poll" && (_jsxs(Stack, { gap: "md", rounded: "xl", border: "default", padding: "md", children: [_jsx(Text, { size: "sm", weight: "semibold", color: "muted", children: "Poll configuration" }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Options (minimum 2)" }), values.pollOptions.map((opt, idx) => (_jsxs(Row, { gap: "xs", children: [_jsx(Div, { className: "flex-1", children: _jsx(Input, { value: opt.label, onChange: (e) => onChange({ pollOptions: values.pollOptions.map((o) => o.id === opt.id ? { ...o, label: e.target.value } : o) }), placeholder: `Option ${idx + 1}` }) }), values.pollOptions.length > 2 && (_jsx(Button, { variant: "ghost", type: "button", onClick: () => onChange({ pollOptions: values.pollOptions.filter((o) => o.id !== opt.id) }), className: CLS_REMOVE_BTN_PX2, "aria-label": "Remove option", children: "\u00D7" }))] }, opt.id))), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onChange({ pollOptions: [...values.pollOptions, { id: `opt${Date.now()}`, label: "" }] }), children: "+ Add option" })] }), _jsx(Select, { label: "Results visibility", value: values.resultsVisibility, options: POLL_VISIBILITY_OPTIONS, onChange: (e) => onChange({ resultsVisibility: e.target.value }) }), _jsxs(Stack, { gap: "sm", children: [_jsx(Toggle, { checked: values.allowMultiSelect, onChange: (v) => onChange({ allowMultiSelect: v }), label: "Allow multi-select" }), _jsx(Toggle, { checked: values.allowComment, onChange: (v) => onChange({ allowComment: v }), label: "Allow comment with vote" })] })] })), values.type === "survey" && (_jsxs(Stack, { gap: "md", rounded: "xl", border: "default", padding: "md", children: [_jsx(Text, { size: "sm", weight: "semibold", color: "muted", children: "Survey configuration" }), _jsxs(Grid, { cols: 2, gap: "sm", children: [_jsx(Input, { label: "Max entries per user", type: "number", value: values.maxEntriesPerUser, onChange: (e) => onChange({ maxEntriesPerUser: e.target.value }), placeholder: "1" }), values.hasPointSystem && (_jsx(Input, { label: "Points label", value: values.pointsLabel, onChange: (e) => onChange({ pointsLabel: e.target.value }), placeholder: "Points" }))] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Toggle, { checked: values.requireLogin, onChange: (v) => onChange({ requireLogin: v }), label: "Require login to participate" }), _jsx(Toggle, { checked: values.hasLeaderboard, onChange: (v) => onChange({ hasLeaderboard: v }), label: "Show leaderboard" }), _jsx(Toggle, { checked: values.hasPointSystem, onChange: (v) => onChange({ hasPointSystem: v }), label: "Enable point system" }), _jsx(Toggle, { checked: values.entryReviewRequired, onChange: (v) => onChange({ entryReviewRequired: v }), label: "Require employee review before entry is approved" })] }), _jsx(FormFieldBuilder, { fields: values.surveyFields, setFields: (f) => onChange({ surveyFields: f }) })] })), values.type === "feedback" && (_jsxs(Stack, { gap: "md", rounded: "xl", border: "default", padding: "md", children: [_jsx(Text, { size: "sm", weight: "semibold", color: "muted", children: "Feedback configuration" }), _jsx(Toggle, { checked: values.anonymous, onChange: (v) => onChange({ anonymous: v }), label: "Allow anonymous submissions" }), _jsx(FormFieldBuilder, { fields: values.feedbackFields, setFields: (f) => onChange({ feedbackFields: f }) })] }))] })),
+            render: ({ values, onChange, errors }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Event Settings" }), isEdit && (_jsx(Select, { label: "Status", error: errors.status, value: values.status, options: EVENT_STATUS_OPTIONS, onChange: (e) => onChange({ status: e.target.value }) })), values.createdBy && (_jsxs(Stack, { gap: "none", children: [_jsx(Text, { size: "sm", weight: "medium", className: "mb-1", children: "Created by" }), _jsx(Text, { size: "sm", color: "muted", children: values.createdBy })] })), _jsxs(Stack, { gap: "xs", surface: "muted", rounded: "lg", border: "default", padding: "sm", children: [_jsx(Toggle, { checked: values.allowGuestParticipation, onChange: (v) => onChange({ allowGuestParticipation: v }), label: "Allow guest participation (no login required)" }), _jsx(Text, { size: "xs", color: "muted", children: "When enabled, unauthenticated visitors can participate in this event (poll vote, survey/feedback response, raffle entry, or wheel spin), identified by a hashed IP address instead of an account. Applies uniformly to whatever entry mechanism this event type uses." })] }), _jsxs(Stack, { gap: "xs", surface: "muted", rounded: "lg", border: "default", padding: "sm", children: [_jsx(Toggle, { checked: values.isPinned, onChange: (v) => onChange({ isPinned: v }), label: "Pin to the top of Events" }), _jsx(Text, { size: "xs", color: "muted", children: "Pinned events are listed first on the Events page and in the homepage strip, ahead of the usual soonest-first order. A pinned event still has to be Active to appear at all \u2014 pinning does not publish it." })] }), values.type === "sale" && (_jsxs(Stack, { gap: "xs", surface: "muted", rounded: "lg", border: "default", padding: "sm", children: [_jsx(Text, { size: "sm", weight: "semibold", color: "muted", children: "Sale configuration" }), _jsxs(Grid, { cols: 2, gap: "sm", children: [_jsx(Input, { label: "Discount %", error: errors.discountPercent, type: "number", value: values.discountPercent, onChange: (e) => onChange({ discountPercent: e.target.value }), placeholder: "10" }), _jsx(Input, { label: "Banner text (optional)", value: values.saleBannerText, error: errors.saleBannerText, onChange: (e) => onChange({ saleBannerText: e.target.value }), placeholder: "Limited time \u2014 ends Sunday!" })] })] })), values.type === "offer" && (_jsxs(Stack, { gap: "xs", surface: "muted", rounded: "lg", border: "default", padding: "sm", children: [_jsx(Text, { size: "sm", weight: "semibold", color: "muted", children: "Offer configuration" }), _jsxs(Grid, { cols: 2, gap: "sm", children: [_jsxs(Div, { children: [_jsx(Text, { size: "sm", weight: "medium", className: "mb-1", children: "Coupon" }), _jsx(CouponInlineSelect, { scope: "admin", value: values.couponId, onChange: (id) => onChange({ couponId: id ?? "" }), placeholder: "Search coupons\u2026", allowCreate: false })] }), _jsx(Input, { label: "Display code", error: errors.displayCode, value: values.displayCode, onChange: (e) => onChange({ displayCode: e.target.value }), placeholder: "CHARIZARD25", required: true })] }), _jsx(Input, { label: "Banner text (optional)", value: values.offerBannerText, error: errors.offerBannerText, onChange: (e) => onChange({ offerBannerText: e.target.value }), placeholder: "Use CHARIZARD25 at checkout" })] })), values.type === "poll" && (_jsxs(Stack, { gap: "md", rounded: "xl", border: "default", padding: "md", children: [_jsx(Text, { size: "sm", weight: "semibold", color: "muted", children: "Poll configuration" }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Options (minimum 2)" }), values.pollOptions.map((opt, idx) => (_jsxs(Row, { gap: "xs", children: [_jsx(Div, { className: "flex-1", children: _jsx(Input, { value: opt.label, 
+                                                    /* Indexed: a failure on option 2 arrives as `pollOptions.1.label`. */
+                                                    error: errors[`pollOptions.${idx}.label`], onChange: (e) => onChange({ pollOptions: values.pollOptions.map((o) => o.id === opt.id ? { ...o, label: e.target.value } : o) }), placeholder: `Option ${idx + 1}` }) }), values.pollOptions.length > 2 && (_jsx(Button, { variant: "ghost", type: "button", onClick: () => onChange({ pollOptions: values.pollOptions.filter((o) => o.id !== opt.id) }), className: CLS_REMOVE_BTN_PX2, "aria-label": "Remove option", children: "\u00D7" }))] }, opt.id))), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onChange({ pollOptions: [...values.pollOptions, { id: `opt${Date.now()}`, label: "" }] }), children: "+ Add option" })] }), _jsx(Select, { label: "Results visibility", error: errors.resultsVisibility, value: values.resultsVisibility, options: POLL_VISIBILITY_OPTIONS, onChange: (e) => onChange({ resultsVisibility: e.target.value }) }), _jsxs(Stack, { gap: "sm", children: [_jsx(Toggle, { checked: values.allowMultiSelect, onChange: (v) => onChange({ allowMultiSelect: v }), label: "Allow multi-select" }), _jsx(Toggle, { checked: values.allowComment, onChange: (v) => onChange({ allowComment: v }), label: "Allow comment with vote" })] })] })), values.type === "survey" && (_jsxs(Stack, { gap: "md", rounded: "xl", border: "default", padding: "md", children: [_jsx(Text, { size: "sm", weight: "semibold", color: "muted", children: "Survey configuration" }), _jsxs(Grid, { cols: 2, gap: "sm", children: [_jsx(Input, { label: "Max entries per user", error: errors.maxEntriesPerUser, type: "number", value: values.maxEntriesPerUser, onChange: (e) => onChange({ maxEntriesPerUser: e.target.value }), placeholder: "1" }), values.hasPointSystem && (_jsx(Input, { label: "Points label", error: errors.pointsLabel, value: values.pointsLabel, onChange: (e) => onChange({ pointsLabel: e.target.value }), placeholder: "Points" }))] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Toggle, { checked: values.requireLogin, onChange: (v) => onChange({ requireLogin: v }), label: "Require login to participate" }), _jsx(Toggle, { checked: values.hasLeaderboard, onChange: (v) => onChange({ hasLeaderboard: v }), label: "Show leaderboard" }), _jsx(Toggle, { checked: values.hasPointSystem, onChange: (v) => onChange({ hasPointSystem: v }), label: "Enable point system" }), _jsx(Toggle, { checked: values.entryReviewRequired, onChange: (v) => onChange({ entryReviewRequired: v }), label: "Require employee review before entry is approved" })] }), _jsx(FormFieldBuilder, { fields: values.surveyFields, setFields: (f) => onChange({ surveyFields: f }) })] })), values.type === "feedback" && (_jsxs(Stack, { gap: "md", rounded: "xl", border: "default", padding: "md", children: [_jsx(Text, { size: "sm", weight: "semibold", color: "muted", children: "Feedback configuration" }), _jsx(Toggle, { checked: values.anonymous, onChange: (v) => onChange({ anonymous: v }), label: "Allow anonymous submissions" }), _jsx(FormFieldBuilder, { fields: values.feedbackFields, setFields: (f) => onChange({ feedbackFields: f }) })] }))] })),
         },
         {
             id: "raffle",
             label: "Raffle / Spin",
             fields: ["hasRaffle", "raffleType", "raffleTopN", "rafflePrize", "rafflePrizeCouponId", "rafflePrizeProductIds", "spinPrizes", "spinMaxPerUser", "spinWindowStart", "spinWindowEnd"],
-            render: ({ values, onChange }) => {
+            render: ({ values, onChange, errors }) => {
                 const isRaffleType = values.type === "raffle" || values.type === "spin_wheel";
                 const showRaffleConfig = isRaffleType || values.hasRaffle;
                 const isSpinMode = values.type === "spin_wheel" || values.raffleType === "spin_wheel";
-                return (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Raffle & Spin Wheel" }), !isRaffleType && (_jsx(Toggle, { checked: values.hasRaffle, onChange: (v) => onChange({ hasRaffle: v }), label: "Attach a raffle to this event" })), !isRaffleType && !values.hasRaffle && (_jsx(Text, { size: "sm", color: "muted", children: "Enable the toggle above to attach a raffle draw to this event. Not applicable for this event type by default." })), showRaffleConfig && (_jsxs(Stack, { gap: "md", rounded: "xl", border: "default", padding: "md", children: [_jsxs(Grid, { cols: 2, gap: "sm", children: [_jsx(Select, { label: "Raffle type", value: values.type === "spin_wheel" ? "spin_wheel" : values.raffleType, options: RAFFLE_TYPE_OPTIONS, onChange: (e) => onChange({ raffleType: e.target.value }), disabled: values.type === "spin_wheel" }), _jsx(Input, { label: "Top N (for top-N raffle types)", type: "number", value: values.raffleTopN, onChange: (e) => onChange({ raffleTopN: e.target.value }), placeholder: "10" })] }), _jsx(Input, { label: "Prize description", value: values.rafflePrize, onChange: (e) => onChange({ rafflePrize: e.target.value }), placeholder: "\u20B92,000 store credit + exclusive Pikachu sticker" }), _jsxs(Div, { children: [_jsx(Text, { size: "sm", weight: "medium", className: "mb-1", children: "Coupon for winner (optional)" }), _jsx(CouponInlineSelect, { scope: "admin", value: values.rafflePrizeCouponId, onChange: (id) => onChange({ rafflePrizeCouponId: id ?? "" }), placeholder: "Search coupons\u2026", allowCreate: false })] }), _jsxs(Div, { children: [_jsx(Text, { size: "sm", weight: "medium", className: "mb-1", children: "Prize products (optional)" }), _jsx(ProductInlineSelect, { scope: "admin", multiple: true, value: values.rafflePrizeProductIds, onChange: (ids) => onChange({ rafflePrizeProductIds: ids }), placeholder: "Search products to feature as prizes\u2026" }), _jsx(Text, { size: "xs", color: "muted", className: "mt-1", children: "Products shown to winners or displayed as the prize showcase." })] }), isSpinMode && _jsx(SpinPrizesEditor, { values: values, onChange: onChange }), isEdit && (_jsxs(Stack, { gap: "xs", rounded: "lg", padding: "sm", className: CLS_RAFFLE_PANEL, children: [_jsxs(Row, { justify: "between", gap: "sm", children: [_jsx(Text, { size: "sm", weight: "medium", className: CLS_RAFFLE_HEADING, children: raffleWinnerName ? `Winner: ${raffleWinnerName}` : "Raffle not yet triggered" }), _jsx(Button, { type: "button", action: ACTIONS.EVENT["draw-raffle-winner"], size: "sm", onClick: () => triggerRaffleMutation.mutate(), disabled: triggerRaffleMutation.isPending || Boolean(raffleWinnerName), children: triggerRaffleMutation.isPending ? "Triggering…" : raffleWinnerName ? "Already triggered" : "Trigger Raffle Now" })] }), raffleEntryCount !== null && _jsxs(Text, { size: "xs", className: CLS_RAFFLE_BODY, children: ["Pool size: ", raffleEntryCount] }), raffleGithubUrl && _jsxs(Text, { size: "xs", className: `break-all ${CLS_RAFFLE_BODY}`, children: ["Fairness proof: ", raffleGithubUrl] }), triggerMessage && _jsx(Text, { size: "xs", className: CLS_RAFFLE_HEADING, children: triggerMessage })] }))] }))] }));
+                return (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Raffle & Spin Wheel" }), !isRaffleType && (_jsx(Toggle, { checked: values.hasRaffle, onChange: (v) => onChange({ hasRaffle: v }), label: "Attach a raffle to this event" })), !isRaffleType && !values.hasRaffle && (_jsx(Text, { size: "sm", color: "muted", children: "Enable the toggle above to attach a raffle draw to this event. Not applicable for this event type by default." })), showRaffleConfig && (_jsxs(Stack, { gap: "md", rounded: "xl", border: "default", padding: "md", children: [_jsxs(Grid, { cols: 2, gap: "sm", children: [_jsx(Select, { label: "Raffle type", error: errors.raffleType, value: values.type === "spin_wheel" ? "spin_wheel" : values.raffleType, options: RAFFLE_TYPE_OPTIONS, onChange: (e) => onChange({ raffleType: e.target.value }), disabled: values.type === "spin_wheel" }), _jsx(Input, { label: "Top N (for top-N raffle types)", error: errors.raffleTopN, type: "number", value: values.raffleTopN, onChange: (e) => onChange({ raffleTopN: e.target.value }), placeholder: "10" })] }), _jsx(Input, { label: "Prize description", error: errors.rafflePrize, value: values.rafflePrize, onChange: (e) => onChange({ rafflePrize: e.target.value }), placeholder: "\u20B92,000 store credit + exclusive Pikachu sticker" }), _jsxs(Div, { children: [_jsx(Text, { size: "sm", weight: "medium", className: "mb-1", children: "Coupon for winner (optional)" }), _jsx(CouponInlineSelect, { scope: "admin", value: values.rafflePrizeCouponId, onChange: (id) => onChange({ rafflePrizeCouponId: id ?? "" }), placeholder: "Search coupons\u2026", allowCreate: false })] }), _jsxs(Div, { children: [_jsx(Text, { size: "sm", weight: "medium", className: "mb-1", children: "Prize products (optional)" }), _jsx(ProductInlineSelect, { scope: "admin", multiple: true, value: values.rafflePrizeProductIds, onChange: (ids) => onChange({ rafflePrizeProductIds: ids }), placeholder: "Search products to feature as prizes\u2026" }), _jsx(Text, { size: "xs", color: "muted", className: "mt-1", children: "Products shown to winners or displayed as the prize showcase." })] }), isSpinMode && _jsx(SpinPrizesEditor, { values: values, onChange: onChange }), isEdit && (_jsxs(Stack, { gap: "xs", rounded: "lg", padding: "sm", className: CLS_RAFFLE_PANEL, children: [_jsxs(Row, { justify: "between", gap: "sm", children: [_jsx(Text, { size: "sm", weight: "medium", className: CLS_RAFFLE_HEADING, children: raffleWinnerName ? `Winner: ${raffleWinnerName}` : "Raffle not yet triggered" }), _jsx(Button, { type: "button", action: ACTIONS.EVENT["draw-raffle-winner"], size: "sm", onClick: () => triggerRaffleMutation.mutate(), disabled: triggerRaffleMutation.isPending || Boolean(raffleWinnerName), children: triggerRaffleMutation.isPending ? "Triggering…" : raffleWinnerName ? "Already triggered" : "Trigger Raffle Now" })] }), raffleEntryCount !== null && _jsxs(Text, { size: "xs", className: CLS_RAFFLE_BODY, children: ["Pool size: ", raffleEntryCount] }), raffleGithubUrl && _jsxs(Text, { size: "xs", className: `break-all ${CLS_RAFFLE_BODY}`, children: ["Fairness proof: ", raffleGithubUrl] }), triggerMessage && _jsx(Text, { size: "xs", className: CLS_RAFFLE_HEADING, children: triggerMessage })] }))] }))] }));
             },
         },
     ];

package/dist/features/layout/hooks/useFormBottomActions.js

@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useMemo } from "react";
 import { FormShellContext } from "../../../ui/forms/FormShell.js";
 import { FormErrorList } from "../../../ui/forms/FormErrorList.js";
+import { Div } from "../../../ui/components/Div.js";
 import { useIsInsideOverlay } from "../../../ui/components/overlay-context.js";
 import { useBottomActions } from "./useBottomActions.js";
 /**
@@ -98,7 +99,25 @@ export function useFormBottomActions({ onSubmit, onCancel, submitLabel = "Save",
         infoLabel: showErrors
             ? `Fix ${errorCount} ${errorCount === 1 ? "issue" : "issues"}`
             : undefined,
-        infoPanel: showErrors && ctx ? _jsx(FormErrorList, { ctx: ctx }) : undefined,
+        /*
+         * 🛑 The alert region lives HERE, not in `FormErrorList`.
+         *
+         * Without it a failed submit on a phone announced nothing at all: the
+         * list has no role, `InfoPanel` has no role, and the only signal was the
+         * disclosure button's text changing — which a screen reader does not read
+         * out unprompted. This is the whole error surface on mobile, since
+         * `useBottomActions` defaults to `desktop: "hidden"`.
+         *
+         * It cannot go on `FormErrorList` itself: the list's other consumer is
+         * `<FormErrorSummary>`, whose wrapper is already `role="alert"`, and
+         * nesting one alert region inside another makes the announcement
+         * ambiguous and duplicated.
+         *
+         * `aria-live="polite"` rather than `role="alert"`'s implicit assertive —
+         * the user has just pressed Save and is expecting a response, so there is
+         * nothing to interrupt. Same choice `FormErrorSummary` makes.
+         */
+        infoPanel: showErrors && ctx ? (_jsx(Div, { role: "alert", "aria-live": "polite", children: _jsx(FormErrorList, { ctx: ctx }) })) : undefined,
         // Bumped by every submit attempt, so a second failed Save re-opens a
         // sheet the user collapsed — while an ordinary re-render does not.
         infoOpenSignal: showErrors ? ctx?.submitAttemptCount : undefined,

package/dist/features/orders/components/EmiInstallmentsPanel.js

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { Badge, Button, Div, Form, Row, Stack, Text, useToast } from "../../../ui/index.js";
 import { FieldInput } from "../../../ui/forms/index.js";
 import { formatCurrency } from "../../../utils/number.formatter.js";
+import { toUserMessage } from "../../../errors/error-display-map.js";
 import { normalizeError } from "../../../errors/normalize.js";
 function stateOf(i) {
     if (i.status === "paid")
@@ -28,19 +29,34 @@ export function EmiInstallmentsPanel({ orderId, installments, remainingBalance,
     const money = (value) => formatCurrency(value, currency);
     const ordered = [...installments].sort((a, b) => a.index - b.index);
     const outstanding = ordered.filter((i) => i.status !== "paid").length;
-    const submit = async (index) => {
+    /*
+     * Takes `setFieldError` from the <Form> render prop rather than closing
+     * over state, because the failure belongs ON the reference field.
+     *
+     * This panel used to be toast-only AND gate submission by disabling the
+     * button on an empty reference — so an incomplete form could not be sent
+     * and said nothing about why, and a rejected reference produced a toast
+     * that was gone before the buyer looked back at the input. Both are money
+     * surfaces on somebody's order.
+     */
+    const submit = async (index, fieldName, setFieldError) => {
+        const trimmed = reference.trim();
+        if (trimmed.length === 0) {
+            setFieldError(fieldName, "Enter the UTR or reference number from your transfer.");
+            return;
+        }
         setIsSubmitting(true);
         try {
-            await onSubmit({ installmentIndex: index, transactionId: reference.trim() });
+            await onSubmit({ installmentIndex: index, transactionId: trimmed });
             showToast("Payment reference submitted — the seller will confirm it.", "success");
             setOpenIndex(null);
             setReference("");
         }
         catch (err) {
-            void normalizeError(err);
-            // The action's own message is surfaced by the caller's error mapping;
-            // this only has to stop the panel pretending the submission landed.
-            showToast("Couldn't submit that payment. Please try again.", "error");
+            const normalized = normalizeError(err);
+            setFieldError(fieldName, toUserMessage(normalized.code, undefined, {
+                fallback: "Couldn't submit that payment reference. Please try again.",
+            }));
         }
         finally {
             setIsSubmitting(false);
@@ -49,9 +65,11 @@ export function EmiInstallmentsPanel({ orderId, installments, remainingBalance,
     return (_jsx(Div, { surface: "card", border: "default", rounded: "lg", padding: "md", children: _jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { align: "center", justify: "between", gap: "sm", children: [_jsx(Text, { weight: "semibold", children: "Your EMI plan" }), remainingBalance !== undefined && remainingBalance > 0 && (_jsxs(Text, { size: "sm", color: "muted", children: [money(remainingBalance), " outstanding across ", outstanding, " instalment", outstanding === 1 ? "" : "s"] }))] }), _jsx(Text, { size: "xs", color: "muted", children: "You can pay any instalment whenever you like, including ahead of its due date \u2014 paying early settles the plan sooner and does not cost more." }), _jsx(Stack, { gap: "xs", children: ordered.map((inst) => {
                         const state = stateOf(inst);
                         const due = inst.dueDate ? new Date(inst.dueDate) : null;
+                        // Per-installment, so each open row's error is keyed to its own field.
+                        const fieldName = `emi-reference-${orderId}-${inst.index}`;
                         return (_jsxs(Div, { border: "default", rounded: "md", padding: "sm", children: [_jsxs(Row, { align: "center", justify: "between", gap: "sm", className: "min-w-0", children: [_jsxs(Stack, { gap: "xs", className: "min-w-0", children: [_jsxs(Text, { size: "sm", weight: "medium", children: ["Instalment ", inst.index, " \u00B7 ", money(inst.amount)] }), _jsx(Text, { size: "xs", color: "muted", children: due ? `Due ${due.toLocaleDateString()}` : "No due date recorded" })] }), _jsxs(Row, { align: "center", gap: "xs", className: "flex-shrink-0", children: [_jsx(Badge, { variant: state === "paid" ? "success" : state === "awaiting-review" ? "warning" : "default", children: STATE_LABEL[state] }), state === "payable" && (_jsx(Button, { type: "button", size: "sm", variant: "secondary", onClick: () => {
                                                         setOpenIndex(openIndex === inst.index ? null : inst.index);
                                                         setReference("");
-                                                    }, children: openIndex === inst.index ? "Cancel" : "Pay now" }))] })] }), openIndex === inst.index && (_jsx(Div, { className: "mt-3", children: _jsx(Form, { onSubmit: (e) => e.preventDefault(), children: () => (_jsxs(Stack, { gap: "sm", children: [_jsxs(Text, { size: "xs", color: "muted", children: ["Transfer ", money(inst.amount), " to the seller, then enter the UTR or reference number so they can confirm it."] }), _jsx(FieldInput, { name: `emi-reference-${orderId}-${inst.index}`, label: "UTR / reference number", required: true, value: reference, onChange: setReference }), _jsx(Button, { type: "submit", size: "sm", isLoading: isSubmitting, disabled: reference.trim().length === 0 || isSubmitting, onClick: () => { void submit(inst.index); }, children: "Submit payment reference" })] })) }) }))] }, inst.index));
+                                                    }, children: openIndex === inst.index ? "Cancel" : "Pay now" }))] })] }), openIndex === inst.index && (_jsx(Div, { className: "mt-3", children: _jsx(Form, { onSubmit: (e) => e.preventDefault(), children: ({ setFieldError, clearErrors }) => (_jsxs(Stack, { gap: "sm", children: [_jsxs(Text, { size: "xs", color: "muted", children: ["Transfer ", money(inst.amount), " to the seller, then enter the UTR or reference number so they can confirm it."] }), _jsx(FieldInput, { name: fieldName, label: "UTR / reference number", required: true, value: reference, onChange: (v) => { clearErrors(); setReference(v); } }), _jsx(Button, { type: "submit", size: "sm", isLoading: isSubmitting, disabled: isSubmitting, onClick: () => { void submit(inst.index, fieldName, setFieldError); }, children: "Submit payment reference" })] })) }) }))] }, inst.index));
                     }) })] }) }));
 }

package/dist/features/orders/components/RefundRequestView.js

@@ -71,7 +71,7 @@ export function RefundRequestView({ order, onSubmitRequest, isLoading = false, c
             label: "Why are you returning this?",
             required: true,
             fields: ["reasonCode", "reasonNote"],
-            render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsxs(Text, { size: "sm", color: "muted", children: [REFUND_COPY.request.orderTotalLabel, " ", _jsx(Span, { weight: "bold", children: formatCurrency(order.total, order.currency ?? "INR") })] }), hasFinalSaleLine && (_jsx(Alert, { variant: "warning", title: REFUND_COPY.request.finalSaleNoticeHeading, children: "You can\u2019t return it for a change of mind, but you can still claim if it never arrived, arrived damaged, was the wrong item, wasn\u2019t as described, or is counterfeit. Only those reasons are listed below." })), _jsxs(Stack, { gap: "xs", children: [_jsxs(Text, { size: "sm", weight: "semibold", children: [REFUND_COPY.request.reasonSelectLabel, " ", _jsx(Span, { "aria-hidden": true, children: "*" })] }), _jsx(PaginatedSelect, { value: values.reasonCode === "" ? null : values.reasonCode, onChange: (v) => onChange({ reasonCode: v ?? "" }), options: allowedReasons.map((r) => ({
+            render: ({ values, onChange, errors }) => (_jsxs(Stack, { gap: "md", children: [_jsxs(Text, { size: "sm", color: "muted", children: [REFUND_COPY.request.orderTotalLabel, " ", _jsx(Span, { weight: "bold", children: formatCurrency(order.total, order.currency ?? "INR") })] }), hasFinalSaleLine && (_jsx(Alert, { variant: "warning", title: REFUND_COPY.request.finalSaleNoticeHeading, children: "You can\u2019t return it for a change of mind, but you can still claim if it never arrived, arrived damaged, was the wrong item, wasn\u2019t as described, or is counterfeit. Only those reasons are listed below." })), _jsxs(Stack, { gap: "xs", children: [_jsxs(Text, { size: "sm", weight: "semibold", children: [REFUND_COPY.request.reasonSelectLabel, " ", _jsx(Span, { "aria-hidden": true, children: "*" })] }), _jsx(PaginatedSelect, { name: "reasonCode", error: errors.reasonCode, value: values.reasonCode === "" ? null : values.reasonCode, onChange: (v) => onChange({ reasonCode: v ?? "" }), options: allowedReasons.map((r) => ({
                                     value: r,
                                     label: RETURN_REASON_LABEL[r],
                                 })), placeholder: REFUND_COPY.request.reasonSelectPlaceholder, ariaLabel: REFUND_COPY.request.reasonSelectLabel })] }), _jsx(FieldTextarea, { name: "reasonNote", label: REFUND_COPY.request.reasonNoteLabel, value: values.reasonNote, onChange: (v) => onChange({ reasonNote: v }), rows: 3, maxLength: 500, showCharCount: true })] })),
@@ -81,9 +81,9 @@ export function RefundRequestView({ order, onSubmitRequest, isLoading = false, c
             label: REFUND_COPY.request.acknowledgeHeading,
             required: true,
             fields: ["acknowledged"],
-            render: ({ values, onChange }) => (_jsx(Stack, { gap: "sm", children: REFUND_COPY.request.acknowledgments.map((text, i) => (_jsx(Checkbox, { checked: values.acknowledged[i] ?? false, onChange: () => onChange({
-                        acknowledged: values.acknowledged.map((v, idx) => idx === i ? !v : v),
-                    }), label: _jsx(Text, { size: "sm", className: "leading-snug", children: text }), "aria-label": `Acknowledgment ${i + 1}` }, i))) })),
+            render: ({ values, onChange, errors }) => (_jsxs(Stack, { gap: "sm", children: [REFUND_COPY.request.acknowledgments.map((text, i) => (_jsx(Checkbox, { checked: values.acknowledged[i] ?? false, onChange: () => onChange({
+                            acknowledged: values.acknowledged.map((v, idx) => idx === i ? !v : v),
+                        }), label: _jsx(Text, { size: "sm", className: "leading-snug", children: text }), "aria-label": `Acknowledgment ${i + 1}`, "aria-invalid": errors.acknowledged ? "true" : undefined }, i))), errors.acknowledged && (_jsx(Text, { size: "sm", variant: "error", role: "alert", children: errors.acknowledged }))] })),
         },
     ], [order.total, order.currency, hasFinalSaleLine, allowedReasons]);
     const nav = useSectionFormNav(sections, draft);