@mohasinac/appkit 4.10.0 → 4.11.0

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

@@ -1,13 +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, useEffect, useMemo, useState } from "react";
-import { Alert, Badge, BulkActionBar, Button, Checkbox, Div, Input, Modal, Row, Select, SideDrawer, Span, Stack, Text, Textarea } from "../../../ui";
-import { StackedViewShell } from "../../../ui";
-import { useBottomActions } from "../../layout";
+import { useCallback, useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { Alert, Badge, Button, Checkbox, Div, Modal, Row, Select, SideDrawer, Span, Stack, Text, Textarea } 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";
-import { sortBy } from "../../../constants/sort";
+import { sortBy, sieveFilter, SIEVE_OP } from "../../../utils/sieve-builder";
+import { DataListingView } from "../../admin/components/DataListingView";
 const SORT_OPTIONS = [
     { value: sortBy("createdAt", "DESC"), label: "Newest" },
     { value: sortBy("createdAt", "ASC"), label: "Oldest" },
@@ -32,124 +33,29 @@ function statusBadge(status) {
     return _jsx(Badge, { variant: map[status] ?? "default", children: status });
 }
 export function SellerReviewsView({ reviewsApiBase = SELLER_ENDPOINTS.REVIEWS, replyApiBase = SELLER_ENDPOINTS.REVIEWS, }) {
-    const [reviews, setReviews] = useState([]);
-    const [meta, setMeta] = useState(null);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState(null);
-    // Filters
-    const [rating, setRating] = useState("");
-    const [replied, setReplied] = useState("");
-    const [sort, setSort] = useState(SORT_OPTIONS[0].value);
-    const [search, setSearch] = useState("");
-    const [page, setPage] = useState(1);
+    const queryClient = useQueryClient();
+    const refetchReviews = useCallback(() => queryClient.invalidateQueries({ queryKey: ["seller", "reviews", "listing"] }), [queryClient]);
     // Reply drawer
     const [replyTarget, setReplyTarget] = useState(null);
     const [replyText, setReplyText] = useState("");
     const [replySaving, setReplySaving] = useState(false);
     const [replyError, setReplyError] = useState(null);
     // S-STORE-4-C — bulk reply + contest + feedback selection
-    const [selectedIds, setSelectedIds] = useState(new Set());
     const [bulkReplyOpen, setBulkReplyOpen] = useState(false);
     const [bulkReplyText, setBulkReplyText] = useState("");
     const [bulkSaving, setBulkSaving] = useState(false);
+    const [bulkTargetIds, setBulkTargetIds] = useState([]);
+    const [bulkClearSelection, setBulkClearSelection] = useState(null);
     const [contestTarget, setContestTarget] = useState(null);
     const [contestReason, setContestReason] = useState("");
     const [feedbackTarget, setFeedbackTarget] = useState(null);
     const [feedbackText, setFeedbackText] = useState("");
-    const toggleSelected = useCallback((id) => {
-        setSelectedIds((prev) => {
-            const next = new Set(prev);
-            if (next.has(id))
-                next.delete(id);
-            else
-                next.add(id);
-            return next;
-        });
-    }, []);
-    const clearSelection = useCallback(() => setSelectedIds(new Set()), []);
-    const submitBulkReply = useCallback(async () => {
-        if (!bulkReplyText.trim() || selectedIds.size === 0)
-            return;
-        setBulkSaving(true);
-        await Promise.all(Array.from(selectedIds).map((id) => fetch(`${replyApiBase}/${id}/reply`, {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ reply: bulkReplyText }),
-        }).catch(() => null)));
-        setBulkSaving(false);
-        setBulkReplyOpen(false);
-        setBulkReplyText("");
-        clearSelection();
-        fetchReviewsRef.current?.();
-    }, [bulkReplyText, selectedIds, replyApiBase, clearSelection]);
-    const submitContest = useCallback(async () => {
-        if (!contestTarget)
-            return;
-        await fetch(SELLER_ENDPOINTS.REVIEW_CONTEST(contestTarget.id), {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ reason: contestReason }),
-        }).catch(() => null);
-        setContestTarget(null);
-        setContestReason("");
-        fetchReviewsRef.current?.();
-    }, [contestTarget, contestReason]);
-    const submitFeedback = useCallback(async () => {
-        if (!feedbackTarget)
-            return;
-        await fetch(SELLER_ENDPOINTS.REVIEW_FEEDBACK(feedbackTarget.id), {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ feedback: feedbackText }),
-        }).catch(() => null);
-        setFeedbackTarget(null);
-        setFeedbackText("");
-    }, [feedbackTarget, feedbackText]);
-    const fetchReviewsRef = useMemo(() => ({ current: null }), []);
-    const fetchReviews = useCallback(async () => {
-        setLoading(true);
-        setError(null);
-        try {
-            const params = new URLSearchParams({ page: String(page), pageSize: "20", sorts: sort });
-            if (rating)
-                params.set("rating", rating);
-            if (replied)
-                params.set("replied", replied);
-            const res = await fetch(`${reviewsApiBase}?${params}`);
-            const json = await res.json();
-            if (!res.ok)
-                throw new Error(json?.error ?? "Failed to load reviews");
-            setReviews(json?.data?.reviews ?? []);
-            setMeta(json?.data?.meta ?? null);
-        }
-        catch (err) {
-            void normalizeError(err);
-            setError(err.message);
-        }
-        finally {
-            setLoading(false);
-        }
-    }, [reviewsApiBase, rating, replied, sort, page]);
-    // The API route has no ?q= support (only rating/replied/sorts) — filter
-    // the fetched page client-side, same category of post-fetch narrowing the
-    // route itself already does for `replied`.
-    const visibleReviews = useMemo(() => {
-        const q = search.trim().toLowerCase();
-        if (!q)
-            return reviews;
-        return reviews.filter((r) => r.productTitle?.toLowerCase().includes(q) ||
-            r.userName?.toLowerCase().includes(q) ||
-            r.comment?.toLowerCase().includes(q) ||
-            r.title?.toLowerCase().includes(q));
-    }, [reviews, search]);
-    useEffect(() => { fetchReviews(); }, [fetchReviews]);
-    useEffect(() => { fetchReviewsRef.current = fetchReviews; }, [fetchReviews, fetchReviewsRef]);
     const openReply = (review) => {
         setReplyTarget(review);
         setReplyText(review.sellerReply ?? "");
         setReplyError(null);
     };
-    const handleReplySave = async () => {
+    const handleReplySave = async (onDone) => {
         if (!replyTarget)
             return;
         setReplySaving(true);
@@ -164,7 +70,7 @@ export function SellerReviewsView({ reviewsApiBase = SELLER_ENDPOINTS.REVIEWS, r
             if (!res.ok)
                 throw new Error(json?.error ?? "Failed to save reply");
             setReplyTarget(null);
-            fetchReviews();
+            onDone();
         }
         catch (err) {
             void normalizeError(err);
@@ -174,31 +80,87 @@ export function SellerReviewsView({ reviewsApiBase = SELLER_ENDPOINTS.REVIEWS, r
             setReplySaving(false);
         }
     };
-    useBottomActions(selectedIds.size > 0 ? { bulk: { selectedCount: selectedIds.size, onClearSelection: clearSelection, actions: [
-                {
-                    id: "bulk-reply",
-                    label: "Reply to selected",
-                    onClick: () => setBulkReplyOpen(true),
-                },
-            ] } } : {});
-    return (_jsxs(_Fragment, { children: [_jsx(StackedViewShell, { portal: "seller", title: "Reviews", sections: [
-                    _jsxs(Stack, { gap: "lg", children: [_jsxs(Row, { align: "center", gap: "3", wrap: true, children: [_jsx(Input, { value: search, onChange: (e) => setSearch(e.target.value), placeholder: "Search product, reviewer, or comment\u2026", "aria-label": "Search reviews", className: "min-w-[220px]" }), _jsx(Select, { value: rating, onChange: (e) => { setRating(e.target.value); setPage(1); }, "aria-label": "Filter by rating", options: [
-                                            { value: "", label: "All ratings" },
-                                            { value: "5", label: "5 stars" },
-                                            { value: "4", label: "4 stars" },
-                                            { value: "3", label: "3 stars" },
-                                            { value: "2", label: "2 stars" },
-                                            { value: "1", label: "1 star" },
-                                        ] }), _jsx(Select, { value: replied, onChange: (e) => { setReplied(e.target.value); setPage(1); }, "aria-label": "Filter by reply status", options: [
-                                            { value: "", label: "All reply statuses" },
-                                            { value: "true", label: "Store replied" },
-                                            { value: "false", label: "Awaiting reply" },
-                                        ] }), _jsx(Select, { value: sort, onChange: (e) => { setSort(e.target.value); setPage(1); }, "aria-label": "Sort reviews", options: SORT_OPTIONS }), meta && (_jsxs(Text, { className: "text-[var(--appkit-color-text-muted)] ml-auto", size: "sm", children: [meta.total, " review", meta.total !== 1 ? "s" : ""] }))] }), error && _jsx(Alert, { variant: "error", children: error }), selectedIds.size > 0 && (_jsx(BulkActionBar, { selectedCount: selectedIds.size, onClearSelection: clearSelection, actions: [
-                                    {
-                                        id: "bulk-reply",
-                                        label: "Reply to selected",
-                                        onClick: () => setBulkReplyOpen(true),
-                                    },
-                                ] })), loading ? (_jsx(Div, { className: "text-center", padding: "y-xl", children: _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: "Loading reviews\u2026" }) })) : visibleReviews.length === 0 ? (_jsx(Div, { className: "text-center", padding: "y-3xl", children: _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: "No reviews found." }) })) : (_jsx(Stack, { gap: "md", children: visibleReviews.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: selectedIds.has(review.id), onChange: () => toggleSelected(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))) })), meta && meta.totalPages > 1 && (_jsxs(Row, { align: "center", justify: "center", gap: "sm", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => setPage((p) => Math.max(1, p - 1)), disabled: page <= 1 || loading, children: "Previous" }), _jsxs(Text, { size: "sm", children: ["Page ", meta.page, " of ", meta.totalPages] }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => setPage((p) => p + 1), disabled: !meta.hasMore || loading, children: "Next" })] }))] }, "reviews"),
-                ] }), _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, disabled: replySaving || !replyText.trim(), isLoading: replySaving, children: replyTarget?.sellerReply ? "Update Reply" : "Post Reply" })] })] }) }), _jsx(Modal, { isOpen: bulkReplyOpen, onClose: () => setBulkReplyOpen(false), title: `Bulk reply to ${selectedIds.size} review${selectedIds.size === 1 ? "" : "s"}`, 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(), 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" })] }) })] }));
+    const submitContest = useCallback(async (onDone) => {
+        if (!contestTarget)
+            return;
+        await fetch(SELLER_ENDPOINTS.REVIEW_CONTEST(contestTarget.id), {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ reason: contestReason }),
+        }).catch(() => null);
+        setContestTarget(null);
+        setContestReason("");
+        onDone();
+    }, [contestTarget, contestReason]);
+    const submitFeedback = useCallback(async () => {
+        if (!feedbackTarget)
+            return;
+        await fetch(SELLER_ENDPOINTS.REVIEW_FEEDBACK(feedbackTarget.id), {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ feedback: feedbackText }),
+        }).catch(() => null);
+        setFeedbackTarget(null);
+        setFeedbackText("");
+    }, [feedbackTarget, feedbackText]);
+    const submitBulkReply = useCallback(async () => {
+        if (!bulkReplyText.trim() || bulkTargetIds.length === 0)
+            return;
+        setBulkSaving(true);
+        await Promise.all(bulkTargetIds.map((id) => fetch(`${replyApiBase}/${id}/reply`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ reply: bulkReplyText }),
+        }).catch(() => null)));
+        setBulkSaving(false);
+        setBulkReplyOpen(false);
+        setBulkReplyText("");
+        bulkClearSelection?.();
+        setBulkTargetIds([]);
+        await refetchReviews();
+    }, [bulkReplyText, bulkTargetIds, replyApiBase, bulkClearSelection, refetchReviews]);
+    const config = {
+        portal: "seller",
+        title: "Reviews",
+        searchPlaceholder: "Search product, reviewer, or comment…",
+        emptyLabel: "No reviews found.",
+        filterKeys: ["rating", "replied"],
+        defaultSort: SORT_OPTIONS[0].value,
+        queryKey: ["seller", "reviews", "listing"],
+        endpoint: reviewsApiBase,
+        sortOptions: SORT_OPTIONS,
+        hideTableView: true,
+        mapRows: (response) => response.reviews ?? [],
+        getTotal: (response, rows) => response.meta?.total ?? rows.length,
+        buildFilters: (state) => {
+            const clauses = [];
+            if (state.rating)
+                clauses.push(sieveFilter("rating", SIEVE_OP.EQ, state.rating));
+            if (state.replied)
+                clauses.push(sieveFilter("replied", SIEVE_OP.EQ, state.replied));
+            return clauses.length ? clauses.join(",") : undefined;
+        },
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Select, { label: "Rating", value: pendingFilters.rating || "", onChange: (e) => setPendingFilters((p) => ({ ...p, rating: e.target.value })), options: [
+                        { value: "", label: "All ratings" },
+                        { value: "5", label: "5 stars" },
+                        { value: "4", label: "4 stars" },
+                        { value: "3", label: "3 stars" },
+                        { value: "2", label: "2 stars" },
+                        { value: "1", label: "1 star" },
+                    ] }), _jsx(Select, { label: "Reply status", value: pendingFilters.replied || "", onChange: (e) => setPendingFilters((p) => ({ ...p, replied: e.target.value })), options: [
+                        { value: "", label: "All reply statuses" },
+                        { value: "true", label: "Store replied" },
+                        { value: "false", label: "Awaiting reply" },
+                    ] })] })),
+        buildBulkActions: (selection) => SELLER_BULK_ACTIONS.reviews.map((id) => ({
+            ...ROW_ACTION_META[id],
+            onClick: () => {
+                setBulkTargetIds(selection.selectedIds);
+                setBulkClearSelection(() => selection.clearSelection);
+                setBulkReplyOpen(true);
+            },
+        })),
+        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" })] }) })] }));
 }

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

@@ -1,18 +1,15 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { normalizeError } from "../../../errors/normalize";
-import { Stack, sortBy } from "@mohasinac/appkit/client";
+import { sortBy } from "@mohasinac/appkit/client";
 import { useState, useCallback } from "react";
 import { useEntityDelete } from "../../../react/hooks/useEntityDelete";
-import { Plus } from "lucide-react";
-import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { Button, ConfirmDeleteModal, DataTable, Badge, Div, ListingToolbar, RowActionMenu, Span, Text, useToast, } from "../../../ui";
+import { Badge, ConfirmDeleteModal, Div, RowActionMenu, Span, Text, useToast, } from "../../../ui";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { ROUTES } from "../../../constants/index";
-import { toRecordArray, toStringValue, useSellerListingData, } from "../hooks/useSellerListingData";
-import { TABLE_KEYS } from "../../../constants/table-keys";
-const PAGE_SIZE = 50;
+import { toRecordArray, toStringValue } from "../hooks/useSellerListingData";
+import { DataListingView } from "../../admin/components/DataListingView";
 const DEFAULT_SORT = "-createdAt";
 const SORT_OPTIONS = [
     { value: sortBy("createdAt", "DESC"), label: "Newest" },
@@ -42,43 +39,15 @@ const COLUMNS = [
     },
 ];
 export function SellerShippingConfigsView({ onCreateClick, onEditClick, onDelete, onSetDefault, }) {
-    const table = useUrlTable({ defaults: { sort: DEFAULT_SORT } });
-    const [searchInput, setSearchInput] = useState(table.get(TABLE_KEYS.QUERY) || "");
     const [deleteTargetId, setDeleteTargetId] = useState(null);
     const { deletingId, handleDelete: performDelete } = useEntityDelete({
         endpoint: SELLER_ENDPOINTS.SHIPPING_CONFIG_BY_ID,
         deleteFn: onDelete,
         successMessage: "Shipping config deleted.",
-        onSuccess: () => { refetch?.(); },
         fetchOptions: { credentials: "include" },
     });
     const [settingDefaultId, setSettingDefaultId] = useState(null);
     const { showToast } = useToast();
-    const commitSearch = useCallback(() => {
-        table.set(TABLE_KEYS.QUERY, searchInput.trim());
-    }, [searchInput, table]);
-    const resetAll = useCallback(() => {
-        table.setMany({ [TABLE_KEYS.QUERY]: "", [TABLE_KEYS.SORT]: "" });
-        setSearchInput("");
-    }, [table]);
-    const hasActiveState = !!table.get(TABLE_KEYS.QUERY) || table.get(TABLE_KEYS.SORT) !== DEFAULT_SORT;
-    const { rows, isLoading, errorMessage, refetch } = useSellerListingData({
-        queryKey: ["seller", "shipping-configs"],
-        endpoint: SELLER_ENDPOINTS.SHIPPING_CONFIGS,
-        page: 1,
-        pageSize: PAGE_SIZE,
-        sorts: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT,
-        q: table.get(TABLE_KEYS.QUERY) || undefined,
-        mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
-            id: toStringValue(item.id, `sc-${index}`),
-            raw: item,
-            label: String(item.label ?? ""),
-            method: String(item.method ?? ""),
-            estimatedDays: typeof item.estimatedDays === "number" ? item.estimatedDays : null,
-            isDefault: Boolean(item.isDefault),
-            isActive: Boolean(item.isActive),
-        })),
-    });
     const handleDelete = useCallback(async (id) => {
         try {
             await performDelete(id);
@@ -103,7 +72,6 @@ export function SellerShippingConfigsView({ onCreateClick, onEditClick, onDelete
                     body: JSON.stringify({ isDefault: true }),
                 });
             }
-            refetch?.();
             showToast("Default shipping config updated.", "success");
         }
         catch (err) {
@@ -113,42 +81,54 @@ export function SellerShippingConfigsView({ onCreateClick, onEditClick, onDelete
         finally {
             setSettingDefaultId(null);
         }
-    }, [onSetDefault, refetch, showToast]);
+    }, [onSetDefault, showToast]);
     const handleCreate = useCallback(() => {
-        if (onCreateClick) {
+        if (onCreateClick)
             onCreateClick();
-        }
-        else {
+        else
             window.location.href = String(ROUTES.STORE.SHIPPING_CONFIGS_NEW);
-        }
     }, [onCreateClick]);
     const handleEdit = useCallback((id) => {
-        if (onEditClick) {
+        if (onEditClick)
             onEditClick(id);
-        }
-        else {
+        else
             window.location.href = String(ROUTES.STORE.SHIPPING_CONFIGS_EDIT(id));
-        }
     }, [onEditClick]);
-    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: 0, searchValue: searchInput, searchPlaceholder: "Search shipping configs...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsxs(Button, { gap: "sm", size: "sm", onClick: handleCreate, children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx(Span, { children: "New Config" })] }) }), _jsxs(Div, { paddingX: "x-sm-md", padding: "y-md", children: [errorMessage && (_jsx(Div, { textSize: "sm", className: "mb-4 border border-error/20", color: "error", surface: "danger-surface", padding: "inline", rounded: "xl", children: errorMessage })), isLoading ? (_jsx(Stack, { gap: "sm", children: Array.from({ length: 3 }).map((_, i) => (_jsx(Div, { className: "h-14 animate-pulse", border: "subtle", surface: "muted", rounded: "xl" }, i))) })) : rows.length === 0 ? (_jsxs(Div, { className: "text-center", padding: "y-4xl", children: [_jsx(Text, { color: "faint", children: "No shipping configs yet \u2014 define your first shipping rule" }), _jsx(Div, { className: "mt-4", children: _jsx(Button, { size: "sm", onClick: handleCreate, children: "Add shipping config" }) })] })) : (_jsx(DataTable, { columns: COLUMNS, data: rows, keyExtractor: (r) => r.id, actions: (row) => (_jsx(RowActionMenu, { actions: [
-                                {
-                                    label: ACTIONS.STORE["edit-listing"].label,
-                                    onClick: () => handleEdit(row.id),
-                                },
-                                ...(!row.isDefault
-                                    ? [
-                                        {
-                                            label: "Set as Default",
-                                            disabled: settingDefaultId === row.id,
-                                            onClick: () => handleSetDefault(row.id),
-                                        },
-                                    ]
-                                    : []),
-                                {
-                                    label: ACTIONS.STORE["delete-listing"].label,
-                                    destructive: true,
-                                    onClick: () => setDeleteTargetId(row.id),
-                                    disabled: deletingId === row.id,
-                                },
-                            ] })) }))] }), deleteTargetId && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Shipping Config", message: "Are you sure you want to delete this shipping configuration? This cannot be undone.", onConfirm: () => handleDelete(deleteTargetId), onClose: () => setDeleteTargetId(null), isDeleting: deletingId === deleteTargetId }))] }));
+    const config = {
+        portal: "seller",
+        title: "Shipping Configs",
+        searchPlaceholder: "Search shipping configs...",
+        emptyLabel: "No shipping configs yet — define your first shipping rule",
+        filterKeys: [],
+        defaultSort: DEFAULT_SORT,
+        queryKey: ["seller", "shipping-configs", "listing"],
+        endpoint: SELLER_ENDPOINTS.SHIPPING_CONFIGS,
+        sortOptions: SORT_OPTIONS,
+        columns: COLUMNS,
+        mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
+            id: toStringValue(item.id, `sc-${index}`),
+            raw: item,
+            label: String(item.label ?? ""),
+            method: String(item.method ?? ""),
+            estimatedDays: typeof item.estimatedDays === "number" ? item.estimatedDays : null,
+            isDefault: Boolean(item.isDefault),
+            isActive: Boolean(item.isActive),
+        })),
+        getTotal: (response, mappedRows) => (typeof response.total === "number" ? response.total : mappedRows.length),
+        buildFilters: () => undefined,
+        primaryAction: { label: "New Config", onClick: handleCreate },
+        renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
+                { label: ACTIONS.STORE["edit-listing"].label, onClick: () => handleEdit(row.id) },
+                ...(!row.isDefault
+                    ? [{ label: "Set as Default", disabled: settingDefaultId === row.id, onClick: () => handleSetDefault(row.id) }]
+                    : []),
+                {
+                    label: ACTIONS.STORE["delete-listing"].label,
+                    destructive: true,
+                    onClick: () => setDeleteTargetId(row.id),
+                    disabled: deletingId === row.id,
+                },
+            ] })),
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), deleteTargetId && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Shipping Config", message: "Are you sure you want to delete this shipping configuration? This cannot be undone.", onConfirm: () => handleDelete(deleteTargetId), onClose: () => setDeleteTargetId(null), isDeleting: deletingId === deleteTargetId }))] }));
 }

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

@@ -1,12 +1,26 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { z } from "zod";
 import { Alert, Badge, Div, FormField, Heading, Row, Stack, Text } from "../../../ui";
 import { StackedViewShell } from "../../../ui";
+import { FormShellContext, useFormShellState, applyZodIssues, FormErrorSummary } from "../../../ui/forms";
 import { StoreAddressSelectorCreate } from "../../stores/components/StoreAddressSelectorCreate";
 import { StepForm } from "../../shell";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { normalizeError } from "../../../errors/normalize";
+const shippingDraftSchema = z.object({
+    customCarrierName: z.string().min(1, "Carrier name is required"),
+    customShippingPrice: z.string(),
+    pickupAddressId: z.string().optional(),
+    freeShippingThreshold: z.string().optional(),
+    fragileSurcharge: z.string().optional(),
+}).superRefine((v, ctx) => {
+    const price = parseFloat(v.customShippingPrice);
+    if (v.customShippingPrice.trim() === "" || Number.isNaN(price) || price < 0) {
+        ctx.addIssue({ code: z.ZodIssueCode.custom, path: ["customShippingPrice"], message: "Enter a valid shipping price (0 for free)" });
+    }
+});
 const DEFAULT_DRAFT = {
     customCarrierName: "",
     customShippingPrice: "",
@@ -22,6 +36,11 @@ export function SellerShippingView({ apiBase = SELLER_ENDPOINTS.SHIPPING }) {
     const [error, setError] = useState(null);
     const [success, setSuccess] = useState(false);
     const [currentStep, setCurrentStep] = useState(0);
+    const { shellCtx, setFieldError, clearErrors, validate } = useFormShellState(shippingDraftSchema);
+    useEffect(() => {
+        validate(draft);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [draft, validate]);
     useEffect(() => {
         fetch(apiBase)
             .then((r) => r.json())
@@ -65,8 +84,14 @@ export function SellerShippingView({ apiBase = SELLER_ENDPOINTS.SHIPPING }) {
                 body: JSON.stringify(body),
             });
             const json = await res.json();
-            if (!res.ok)
-                throw new Error(json?.error ?? "Failed to save");
+            if (!res.ok) {
+                if (Array.isArray(json?.issues) && json.issues.length > 0) {
+                    applyZodIssues(json.issues, setFieldError);
+                }
+                setError(json?.error ?? "Failed to save");
+                return;
+            }
+            clearErrors();
             setSuccess(true);
             const cfg = json?.data?.shippingConfig ?? { method: "custom", isConfigured: false };
             setCurrent(cfg);
@@ -83,18 +108,30 @@ export function SellerShippingView({ apiBase = SELLER_ENDPOINTS.SHIPPING }) {
     const steps = [
         {
             label: "Carrier",
+            fields: ["customCarrierName", "customShippingPrice"],
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Shipping Carrier" }), current && (_jsx(Row, { className: "mb-2", align: "center", gap: "sm", children: _jsx(Badge, { variant: current.isConfigured ? "success" : "warning", children: current.isConfigured ? "Configured" : "Not configured" }) })), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Set a fixed shipping fee and carrier name for all orders. You enter the carrier and tracking number yourself when you ship each order." }), _jsxs(Stack, { gap: "md", className: "mt-2", children: [_jsx(FormField, { name: "customCarrierName", label: "Carrier Name", type: "text", value: values.customCarrierName, onChange: (v) => onChange({ customCarrierName: v }), placeholder: "e.g. India Post, DTDC, Delhivery", disabled: busy }), _jsx(FormField, { name: "customShippingPrice", label: "Shipping Price (\u20B9)", type: "number", value: values.customShippingPrice, onChange: (v) => onChange({ customShippingPrice: v }), placeholder: "0 for free shipping", helpText: "Charged to buyer at checkout. Enter 0 for free shipping.", disabled: busy })] })] })),
         },
         {
             label: "Pickup Address",
+            fields: ["pickupAddressId"],
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Pickup Address" }), current?.pickupAddress && (_jsxs(Alert, { variant: "info", children: ["Current pickup: ", current.pickupAddress.locationName ?? "", current.pickupAddress.city ? `, ${current.pickupAddress.city}` : ""] })), _jsx(StoreAddressSelectorCreate, { value: values.pickupAddressId, onChange: (id) => onChange({ pickupAddressId: id }), label: "Pickup Address", disabled: busy })] })),
         },
         {
             label: "Rules",
+            fields: ["freeShippingThreshold", "fragileSurcharge"],
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Shipping Rules" }), _jsx(FormField, { name: "freeShippingThreshold", label: "Free Shipping Threshold (\u20B9)", type: "number", value: values.freeShippingThreshold, onChange: (v) => onChange({ freeShippingThreshold: v }), placeholder: "e.g. 500 \u2014 orders above this get free shipping", helpText: "Leave blank or 0 to disable free shipping offers.", disabled: busy }), _jsx(FormField, { name: "fragileSurcharge", label: "Fragile Item Surcharge (\u20B9)", type: "number", value: values.fragileSurcharge, onChange: (v) => onChange({ fragileSurcharge: v }), placeholder: "e.g. 50 \u2014 added for items marked fragile", helpText: "Leave blank or 0 to disable the fragile surcharge.", disabled: busy })] })),
         },
     ];
+    const fieldToStepIndex = useMemo(() => {
+        const map = {};
+        steps.forEach((step, i) => {
+            step.fields?.forEach((field) => { map[field] = i; });
+        });
+        return map;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [steps.length]);
+    const wizardShellCtx = useMemo(() => ({ ...shellCtx, fieldToStepIndex, goToStep: (n) => setCurrentStep(n) }), [shellCtx, fieldToStepIndex, setCurrentStep]);
     return (_jsx(StackedViewShell, { portal: "seller", title: "Shipping Configuration", sections: [
-            _jsxs(Div, { children: [error && _jsx(Alert, { variant: "error", className: "mb-4", children: error }), success && _jsx(Alert, { variant: "success", className: "mb-4", children: "Shipping configuration saved." }), _jsx(StepForm, { steps: steps, values: draft, onChange: update, onComplete: handleSave, formId: "seller-shipping", currentStep: currentStep, onStepChange: setCurrentStep, completeLabel: "Save Configuration", isLoading: busy })] }, "shipping"),
+            _jsxs(Div, { children: [error && _jsx(Alert, { variant: "error", className: "mb-4", children: error }), success && _jsx(Alert, { variant: "success", className: "mb-4", children: "Shipping configuration saved." }), _jsxs(FormShellContext.Provider, { value: wizardShellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(StepForm, { steps: steps, values: draft, onChange: update, onComplete: handleSave, formId: "seller-shipping", currentStep: currentStep, onStepChange: setCurrentStep, completeLabel: "Save Configuration", isLoading: busy })] })] }, "shipping"),
         ] }));
 }