@mohasinac/appkit 2.3.0 → 2.3.2

package/dist/features/reviews/components/ReviewModal.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, Div, Heading, IconButton, Modal, RichText, Row, Text, } from "../../../ui";
+import { StarRating } from "../../../ui";
+import { maskName } from "../../../security";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { getDefaultLocale } from "../../../core/baseline-resolver";
+import { normalizeRichTextHtml } from "../../../utils/string.formatter";
+/**
+ * ViewReviewModal — full review details in a Modal overlay.
+ * Shows all images, the full comment, and seller response if present.
+ */
+export function ViewReviewModal({ review, isOpen, onClose, }) {
+    const [lightboxIdx, setLightboxIdx] = useState(null);
+    if (!review)
+        return null;
+    const displayName = maskName(review.userName);
+    const date = review.createdAt
+        ? new Date(review.createdAt).toLocaleDateString(getDefaultLocale(), {
+            year: "numeric",
+            month: "long",
+            day: "numeric",
+        })
+        : "";
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: "Review Details", children: _jsxs(Div, { className: "space-y-4", children: [_jsxs(Row, { className: "gap-3", children: [review.userAvatar ? (_jsx(Div, { role: "img", "aria-label": displayName, className: "h-10 w-10 flex-shrink-0 rounded-full bg-center bg-cover", style: { backgroundImage: `url(${review.userAvatar})` } })) : (_jsx(Div, { className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-neutral-200 text-sm font-medium text-neutral-600 dark:bg-zinc-700 dark:text-zinc-300", children: displayName.charAt(0).toUpperCase() })), _jsxs(Div, { children: [_jsxs(Row, { className: "gap-2", children: [_jsx(Text, { className: "font-medium text-neutral-900 dark:text-white", children: displayName }), review.verified && (_jsx(Text, { className: `text-xs ${THEME_CONSTANTS.themed.textSuccess}`, children: "\u2713 Verified purchase" }))] }), _jsxs(Row, { className: "gap-2 mt-0.5", children: [_jsx(StarRating, { value: review.rating, size: "sm", readOnly: true }), date && (_jsx(Text, { className: "text-xs text-neutral-400 dark:text-zinc-500", children: date }))] })] })] }), review.title && (_jsx(Heading, { level: 4, className: "font-semibold text-neutral-900 dark:text-white", children: review.title })), review.comment && (_jsx(RichText, { html: normalizeRichTextHtml(review.comment), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-sm leading-relaxed text-neutral-600 dark:text-zinc-400" })), review.images && review.images.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", children: review.images.map((img, i) => (_jsx(IconButton, { "aria-label": `View image ${i + 1}`, onClick: () => setLightboxIdx(i), variant: "ghost", className: `h-20 w-20 rounded-lg border bg-center bg-cover transition hover:opacity-80 p-0 ${lightboxIdx === i ? "ring-2 ring-primary-500" : "border-neutral-100 dark:border-zinc-700"}`, style: {
+                            backgroundImage: `url(${img.thumbnailUrl ?? img.url})`,
+                        }, icon: _jsx(Div, {}) }, i))) })), (review.helpfulCount ?? 0) > 0 && (_jsxs(Text, { className: "text-xs text-neutral-400 dark:text-zinc-500", children: [review.helpfulCount, " people found this helpful"] })), _jsx(Div, { className: "flex justify-end pt-2", children: _jsx(Button, { variant: "ghost", onClick: onClose, children: "Close" }) })] }) }));
+}

package/dist/features/reviews/components/ReviewSummary.d.ts

@@ -0,0 +1,16 @@
+export interface ReviewSummaryProps {
+    averageRating: number;
+    totalReviews: number;
+    /** Map of star value (1–5) → count. Example: { 5: 40, 4: 20, 3: 10, 2: 5, 1: 2 } */
+    distribution: Record<number, number>;
+    className?: string;
+}
+/**
+ * ReviewSummary — aggregate rating block with breakdown bars.
+ *
+ * Shows:
+ *  - Large average score + star display
+ *  - "N reviews" count
+ *  - Per-star percentage bars (5★ ... 1★)
+ */
+export declare function ReviewSummary({ averageRating, totalReviews, distribution, className, }: ReviewSummaryProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/reviews/components/ReviewSummary.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Div, Span, Text } from "../../../ui";
+import { StarRating } from "../../../ui";
+/**
+ * ReviewSummary — aggregate rating block with breakdown bars.
+ *
+ * Shows:
+ *  - Large average score + star display
+ *  - "N reviews" count
+ *  - Per-star percentage bars (5★ ... 1★)
+ */
+export function ReviewSummary({ averageRating, totalReviews, distribution, className = "", }) {
+    const stars = [5, 4, 3, 2, 1];
+    return (_jsxs(Div, { className: `flex flex-col gap-4 sm:flex-row sm:items-center sm:gap-8 ${className}`, children: [_jsxs(Div, { className: "flex flex-col items-center gap-1 sm:items-start", children: [_jsx(Span, { className: "text-5xl font-bold leading-none text-neutral-900 dark:text-white", children: averageRating.toFixed(1) }), _jsx(StarRating, { value: averageRating, size: "md", readOnly: true }), _jsxs(Text, { className: "text-sm text-neutral-500 dark:text-zinc-400", children: [totalReviews.toLocaleString(), " review", totalReviews !== 1 ? "s" : ""] })] }), _jsx(Div, { className: "flex flex-1 flex-col gap-2", children: stars.map((star) => {
+                    const count = distribution[star] ?? 0;
+                    const pct = totalReviews > 0 ? Math.round((count / totalReviews) * 100) : 0;
+                    return (_jsxs(Div, { className: "flex items-center gap-2", children: [_jsx(Span, { className: "w-4 text-right text-xs font-medium text-neutral-600 dark:text-zinc-400 tabular-nums", children: star }), _jsx(Span, { className: "text-yellow-400 text-xs", children: "\u2605" }), _jsx(Div, { className: "flex-1 h-2 rounded-full bg-neutral-100 dark:bg-zinc-800 overflow-hidden", role: "progressbar", "aria-valuenow": pct, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `${star} star: ${pct}%`, children: _jsx(Div, { className: "h-full rounded-full bg-yellow-400 transition-all duration-300", style: { width: `${pct}%` } }) }), _jsxs(Span, { className: "w-8 text-right text-xs text-neutral-400 dark:text-zinc-500 tabular-nums", children: [pct, "%"] })] }, star));
+                }) })] }));
+}

package/dist/features/reviews/components/ReviewsIndexListing.d.ts

@@ -0,0 +1,6 @@
+import type { ReviewListResponse } from "../types";
+export interface ReviewsIndexListingProps {
+    initialData?: ReviewListResponse;
+    variant?: "admin" | "seller" | "public";
+}
+export declare function ReviewsIndexListing({ initialData, variant, }: ReviewsIndexListingProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/reviews/components/ReviewsIndexListing.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { Search, SlidersHorizontal, X } from "lucide-react";
+import { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { Pagination, SortDropdown } from "../../../ui";
+import { ReviewCard } from "./ReviewsList";
+import { ReviewFilters, REVIEW_PUBLIC_SORT_OPTIONS } from "./ReviewFilters";
+import { useReviews } from "../hooks/useReviews";
+const PAGE_SIZE = 12;
+export function ReviewsIndexListing({ initialData, variant = "public", }) {
+    const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: "-createdAt" } });
+    const [searchInput, setSearchInput] = useState(table.get("q") || "");
+    const [filterOpen, setFilterOpen] = useState(false);
+    const sort = table.get("sort") || "-createdAt";
+    const currentPage = table.getNumber("page", 1);
+    const commitSearch = useCallback(() => {
+        table.set("q", searchInput.trim());
+        table.setPage(1);
+    }, [searchInput, table]);
+    const closeFilters = () => setFilterOpen(false);
+    const ratingRaw = table.get("rating");
+    const { reviews, total, totalPages, isLoading } = useReviews({
+        q: table.get("q") || undefined,
+        rating: ratingRaw || undefined,
+        dateFrom: table.get("dateFrom") || undefined,
+        dateTo: table.get("dateTo") || undefined,
+        minVotes: table.get("minVotes") ? Number(table.get("minVotes")) : undefined,
+        maxVotes: table.get("maxVotes") ? Number(table.get("maxVotes")) : undefined,
+        sort,
+        page: currentPage,
+        perPage: PAGE_SIZE,
+    }, { initialData });
+    const sortOptions = REVIEW_PUBLIC_SORT_OPTIONS.map((opt) => ({
+        value: opt.value,
+        label: opt.key,
+    }));
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx("div", { className: "sticky top-0 z-20 border-b border-zinc-200 dark:border-slate-700 bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm py-2.5 px-4", children: _jsxs("div", { className: "flex items-center gap-2.5 max-w-full", children: [_jsxs("button", { type: "button", onClick: () => setFilterOpen(true), className: "flex shrink-0 items-center gap-2 rounded-lg border border-zinc-300 dark:border-slate-600 px-3.5 py-2 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: "Filters" })] }), _jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-900", children: [_jsx("input", { type: "text", value: searchInput, onChange: (e) => setSearchInput(e.target.value), onKeyDown: (e) => e.key === "Enter" && commitSearch(), placeholder: "Search reviews by product name...", className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 outline-none" }), searchInput && (_jsx("button", { type: "button", onClick: () => { setSearchInput(""); table.set("q", ""); table.setPage(1); }, className: "px-2 text-zinc-400 hover:text-zinc-600 transition-colors", "aria-label": "Clear search", children: _jsx(X, { className: "h-3.5 w-3.5" }) })), _jsx("button", { type: "button", onClick: commitSearch, className: "flex shrink-0 items-center justify-center px-3 py-2 text-zinc-400 hover:text-primary dark:hover:text-primary-400 transition-colors", "aria-label": "Search", children: _jsx(Search, { className: "h-4 w-4" }) })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5 text-sm text-zinc-500 dark:text-zinc-400", children: [_jsx("span", { className: "hidden md:inline whitespace-nowrap", children: "Sort by" }), _jsx(SortDropdown, { value: sort, onChange: (v) => { table.set("sort", v); table.setPage(1); }, options: sortOptions })] })] }) }), _jsxs("div", { className: "py-6", children: [isLoading ? (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: Array.from({ length: 6 }).map((_, i) => (_jsx("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: _jsxs("div", { className: "p-4 space-y-3", children: [_jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-full" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-2/3" })] }) }, i))) })) : reviews.length === 0 ? (_jsx("p", { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "No reviews found." })) : (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: reviews.map((review) => (_jsx(ReviewCard, { review: review }, review.id))) })), totalPages > 1 && (_jsx("div", { className: "mt-8 flex justify-center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }))] }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: closeFilters }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsxs("span", { className: "flex items-center gap-2 text-base font-semibold text-zinc-900 dark:text-zinc-100", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), "Filters"] }), _jsx("button", { type: "button", onClick: closeFilters, "aria-label": "Close filters", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4", children: _jsx(ReviewFilters, { table: table, variant: variant }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsx("button", { type: "button", onClick: closeFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors", children: "Apply filters" }) })] })] }))] }));
+}

package/dist/features/reviews/components/ReviewsIndexPageView.d.ts

@@ -0,0 +1,6 @@
+type SearchParams = Record<string, string | string[]>;
+export interface ReviewsIndexPageViewProps {
+    searchParams?: SearchParams;
+}
+export declare function ReviewsIndexPageView({ searchParams }: ReviewsIndexPageViewProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/features/reviews/components/ReviewsIndexPageView.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { reviewRepository } from "../../../repositories";
+import { Container, Heading, Main, Section } from "../../../ui";
+import { AdSlot } from "../../homepage/components/AdSlot";
+import { ReviewsIndexListing } from "./ReviewsIndexListing";
+function sp(params, key) {
+    const v = params[key];
+    return Array.isArray(v) ? v[0] ?? "" : v ?? "";
+}
+function buildReviewFilters(params) {
+    const parts = ["status==approved"];
+    const rating = sp(params, "rating");
+    if (rating) {
+        const values = rating.split("|").filter(Boolean);
+        if (values.length === 1)
+            parts.push(`rating==${values[0]}`);
+        else if (values.length > 1)
+            parts.push(`rating==${values.join("|")}`);
+    }
+    const minVotes = sp(params, "minVotes");
+    if (minVotes)
+        parts.push(`helpfulCount>=${minVotes}`);
+    const maxVotes = sp(params, "maxVotes");
+    if (maxVotes)
+        parts.push(`helpfulCount<=${maxVotes}`);
+    const dateFrom = sp(params, "dateFrom");
+    const dateTo = sp(params, "dateTo");
+    if (dateFrom)
+        parts.push(`createdAt>=${dateFrom}`);
+    if (dateTo)
+        parts.push(`createdAt<=${dateTo}`);
+    const q = sp(params, "q");
+    if (q)
+        parts.push(`productTitle@=*${q}`);
+    return parts.join(",");
+}
+export async function ReviewsIndexPageView({ searchParams = {} }) {
+    const sort = sp(searchParams, "sort") || "-createdAt";
+    const page = Number(sp(searchParams, "page")) || 1;
+    const filters = buildReviewFilters(searchParams);
+    const result = await reviewRepository
+        .listAll({ filters, sorts: sort, page, pageSize: 12 })
+        .catch(() => null);
+    const initialData = result
+        ? {
+            items: result.items,
+            total: result.total,
+            page: result.page,
+            pageSize: result.pageSize,
+            totalPages: result.totalPages,
+            hasMore: result.hasMore,
+        }
+        : undefined;
+    return (_jsx(Main, { children: _jsx(Section, { className: "py-10", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, className: "mb-8 text-3xl font-semibold text-zinc-900 dark:text-zinc-50", children: "Reviews" }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(ReviewsIndexListing, { initialData: initialData }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));
+}

package/dist/features/reviews/components/ReviewsList.d.ts

@@ -0,0 +1,15 @@
+import type { Review } from "../types";
+export interface ReviewCardProps {
+    review: Review;
+    className?: string;
+}
+export declare function ReviewCard({ review, className }: ReviewCardProps): import("react/jsx-runtime").JSX.Element;
+export interface ReviewsListProps {
+    reviews: Review[];
+    isLoading?: boolean;
+    totalPages?: number;
+    currentPage?: number;
+    onPageChange?: (page: number) => void;
+    emptyLabel?: string;
+}
+export declare function ReviewsList({ reviews, isLoading, totalPages, currentPage, onPageChange, emptyLabel, }: ReviewsListProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/reviews/components/ReviewsList.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { Div, Heading, Pagination, RichText, Row, Skeleton, Span, Stack, Text, } from "../../../ui";
+import { StarRating } from "../../../ui";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { maskName } from "../../../security";
+import { getDefaultLocale } from "../../../core/baseline-resolver";
+import { normalizeRichTextHtml } from "../../../utils/string.formatter";
+import { ROUTES } from "../../../next";
+export function ReviewCard({ review, className = "" }) {
+    const date = review.createdAt
+        ? new Date(review.createdAt).toLocaleDateString(getDefaultLocale(), {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+        })
+        : "";
+    const displayName = maskName(review.userName);
+    const initials = displayName.charAt(0).toUpperCase();
+    const reviewHref = String(ROUTES.PUBLIC.REVIEW_DETAIL(review.id));
+    const productHref = review.productId
+        ? String(ROUTES.PUBLIC.PRODUCT_DETAIL(review.productId))
+        : null;
+    const card = (_jsxs(Div, { className: `group flex flex-col h-full rounded-xl border border-neutral-200 bg-white p-5 dark:border-zinc-700 dark:bg-zinc-900 transition-shadow hover:shadow-md cursor-pointer ${className}`, children: [_jsxs(Div, { className: "flex items-start gap-3", children: [review.userAvatar ? (_jsx(Div, { role: "img", "aria-label": displayName, className: "h-9 w-9 flex-shrink-0 rounded-full bg-center bg-cover", style: { backgroundImage: `url(${review.userAvatar})` } })) : (_jsx(Div, { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-neutral-200 text-sm font-medium text-neutral-600 dark:bg-zinc-700 dark:text-zinc-300", children: initials })), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsxs(Row, { wrap: true, gap: "sm", children: [_jsx(Span, { className: "font-medium text-neutral-900 dark:text-white", children: displayName }), review.verified && (_jsx(Span, { className: "rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400", children: "Verified" })), date && (_jsx(Span, { className: "text-xs text-neutral-400 dark:text-zinc-500", children: date }))] }), _jsx(Div, { className: "mt-1", children: _jsx(StarRating, { value: review.rating, size: "sm", readOnly: true }) })] })] }), review.title && (_jsx(Heading, { level: 4, className: "mt-3 font-semibold text-neutral-900 dark:text-white", children: review.title })), review.comment && (_jsx(RichText, { html: normalizeRichTextHtml(review.comment), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "mt-2 text-sm leading-relaxed text-neutral-600 dark:text-zinc-400" })), review.images && review.images.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", className: "mt-3", children: review.images.map((img, i) => (_jsx(Div, { role: "img", "aria-label": `Review image ${i + 1}`, className: "h-16 w-16 rounded-lg bg-center bg-cover border border-neutral-100 dark:border-zinc-700", style: { backgroundImage: `url(${img.thumbnailUrl ?? img.url})` } }, i))) })), (review.helpfulCount ?? 0) > 0 && (_jsxs(Text, { className: "mt-3 text-xs text-neutral-400 dark:text-zinc-500", children: [review.helpfulCount, " found this helpful"] })), productHref && (_jsxs(Div, { className: "mt-auto pt-3 flex items-center gap-1.5 text-xs font-medium text-neutral-500 dark:text-zinc-400 border-t border-neutral-100 dark:border-zinc-800", children: [_jsx("span", { "aria-hidden": "true", children: "\uD83D\uDCE6" }), _jsx("span", { className: THEME_CONSTANTS.utilities.textClamp1, children: review.productTitle ?? "View Product" }), _jsx("span", { "aria-hidden": "true", className: "ml-auto text-primary group-hover:translate-x-0.5 transition-transform", children: "\u2192" })] }))] }));
+    return (_jsx(Link, { href: reviewHref, className: "block h-full", children: card }));
+}
+export function ReviewsList({ reviews, isLoading, totalPages = 1, currentPage = 1, onPageChange, emptyLabel = "No reviews yet", }) {
+    if (isLoading) {
+        return (_jsx(Stack, { gap: "md", children: Array.from({ length: 4 }).map((_, i) => (_jsxs(Div, { className: "rounded-xl border border-neutral-200 dark:border-zinc-700 p-5", children: [_jsxs(Div, { className: "flex gap-3", children: [_jsx(Skeleton, { className: "h-9 w-9 rounded-full" }), _jsxs(Stack, { gap: "sm", className: "flex-1", children: [_jsx(Skeleton, { className: "h-4 w-24 rounded" }), _jsx(Skeleton, { className: "h-3 w-16 rounded" })] })] }), _jsxs(Stack, { gap: "xs", className: "mt-3", children: [_jsx(Skeleton, { className: "h-3 w-full rounded" }), _jsx(Skeleton, { className: "h-3 w-3/4 rounded" })] })] }, i))) }));
+    }
+    if (reviews.length === 0) {
+        return (_jsx(Text, { className: "py-12 text-center text-sm text-neutral-500 dark:text-zinc-500", children: emptyLabel }));
+    }
+    return (_jsxs(Stack, { gap: "lg", children: [_jsx(Stack, { gap: "md", children: reviews.map((review) => (_jsx(ReviewCard, { review: review }, review.id))) }), totalPages > 1 && onPageChange && (_jsx(Div, { className: "flex justify-center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: onPageChange }) }))] }));
+}

package/dist/features/reviews/components/ReviewsListView.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import type { Review, ReviewListParams, ReviewListResponse } from "../types";
+export interface ReviewsListViewProps {
+    /** Optional initial SSR data */
+    initialData?: ReviewListResponse;
+    /** Query params passed to useReviews */
+    params?: ReviewListParams;
+    /** Rendered inside the page header */
+    renderHeader?: (total: number) => React.ReactNode;
+    /** Render search input */
+    renderSearch?: (value: string, onChange: (v: string) => void) => React.ReactNode;
+    /** Render sort dropdown */
+    renderSort?: (value: string, onChange: (v: string) => void) => React.ReactNode;
+    /** Render filter panel */
+    renderFilters?: () => React.ReactNode;
+    /** Render active filter chips */
+    renderActiveFilters?: () => React.ReactNode;
+    /** Render the data table / grid */
+    renderResults: (items: Review[], isLoading: boolean) => React.ReactNode;
+    /** Render pagination */
+    renderPagination?: (total: number) => React.ReactNode;
+    /** Render empty state */
+    renderEmptyState?: () => React.ReactNode;
+    labels?: {
+        title?: string;
+        subtitle?: string;
+        subtitleWithCount?: (count: number) => string;
+    };
+    className?: string;
+}
+export declare function ReviewsListView({ initialData, params, renderHeader, renderSearch, renderSort, renderFilters, renderActiveFilters, renderResults, renderPagination, renderEmptyState, labels, className, }: ReviewsListViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/reviews/components/ReviewsListView.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Container, Div, Heading, Row, Text } from "../../../ui";
+import { useReviews } from "../hooks/useReviews";
+export function ReviewsListView({ initialData, params = { status: "approved", perPage: 200 }, renderHeader, renderSearch, renderSort, renderFilters, renderActiveFilters, renderResults, renderPagination, renderEmptyState, labels = {}, className = "", }) {
+    const [search, setSearch] = React.useState("");
+    const [sort, setSort] = React.useState("-rating");
+    const { reviews, total, isLoading } = useReviews(params, { initialData });
+    return (_jsx(Div, { className: `min-h-screen ${className}`, children: _jsxs(Container, { size: "full", className: "py-8", children: [renderHeader ? (renderHeader(total)) : (_jsxs(Div, { className: "mb-6", children: [_jsx(Heading, { level: 1, children: labels.title ?? "Reviews" }), _jsx(Text, { variant: "secondary", className: "mt-1", children: total > 0
+                                ? (labels.subtitleWithCount?.(total) ??
+                                    `${total} reviews from our customers`)
+                                : (labels.subtitle ?? "See what our customers say") })] })), _jsxs(Row, { wrap: true, gap: "3", className: "mb-4", children: [renderSearch?.(search, setSearch), renderSort?.(sort, setSort), renderFilters?.()] }), renderActiveFilters?.(), !isLoading && total === 0 && renderEmptyState
+                    ? renderEmptyState()
+                    : renderResults(reviews, isLoading), renderPagination?.(total)] }) }));
+}

package/dist/features/reviews/components/index.d.ts

@@ -0,0 +1,13 @@
+export type { ReviewCardProps, ReviewsListProps } from "./ReviewsList";
+export { ReviewCard, ReviewsList } from "./ReviewsList";
+export { ReviewFilters, REVIEW_SORT_OPTIONS, REVIEW_FILTER_KEYS, REVIEW_ADMIN_SORT_OPTIONS, REVIEW_SELLER_SORT_OPTIONS, REVIEW_PUBLIC_SORT_OPTIONS, getReviewFilterKeys, getReviewSortOptions, } from "./ReviewFilters";
+export type { ReviewFiltersProps, ReviewFilterVariant } from "./ReviewFilters";
+export type { ReviewSummaryProps } from "./ReviewSummary";
+export { ReviewSummary } from "./ReviewSummary";
+export type { ViewReviewModalProps } from "./ReviewModal";
+export { ViewReviewModal } from "./ReviewModal";
+export { ReviewsListView } from "./ReviewsListView";
+export type { ReviewsListViewProps } from "./ReviewsListView";
+export { ReviewsIndexListing } from "./ReviewsIndexListing";
+export type { ReviewsIndexListingProps } from "./ReviewsIndexListing";
+export type { ReviewDetailPageViewProps } from "./ReviewDetailPageView";

package/dist/features/reviews/components/index.js

@@ -0,0 +1,6 @@
+export { ReviewCard, ReviewsList } from "./ReviewsList";
+export { ReviewFilters, REVIEW_SORT_OPTIONS, REVIEW_FILTER_KEYS, REVIEW_ADMIN_SORT_OPTIONS, REVIEW_SELLER_SORT_OPTIONS, REVIEW_PUBLIC_SORT_OPTIONS, getReviewFilterKeys, getReviewSortOptions, } from "./ReviewFilters";
+export { ReviewSummary } from "./ReviewSummary";
+export { ViewReviewModal } from "./ReviewModal";
+export { ReviewsListView } from "./ReviewsListView";
+export { ReviewsIndexListing } from "./ReviewsIndexListing";

package/dist/features/reviews/hooks/useCreateReview.d.ts

@@ -0,0 +1,12 @@
+export interface CreateReviewHookInput {
+    productId: string;
+    rating: number;
+    title: string;
+    comment: string;
+    images?: string[];
+    videoUrl?: string;
+}
+export declare function useCreateReview(onSuccess?: () => void, onError?: (err: {
+    status?: number;
+    message?: string;
+}) => void): import("@tanstack/react-query").UseMutationResult<unknown, Error, CreateReviewHookInput, unknown>;

package/dist/features/reviews/hooks/useCreateReview.js

@@ -0,0 +1,21 @@
+import { useMutation } from "@tanstack/react-query";
+import { apiClient } from "../../../http";
+import { REVIEW_ENDPOINTS } from "../../../constants/api-endpoints";
+import { normalizeRichTextHtml } from "../../../utils/string.formatter";
+export function useCreateReview(onSuccess, onError) {
+    return useMutation({
+        mutationFn: (data) => {
+            if ((data.images?.length ?? 0) > 5) {
+                return Promise.reject(new Error("Reviews support at most 5 images."));
+            }
+            return apiClient.post(REVIEW_ENDPOINTS.LIST, {
+                ...data,
+                comment: normalizeRichTextHtml(data.comment),
+                images: data.images ?? [],
+                videoUrl: data.videoUrl,
+            });
+        },
+        onSuccess,
+        onError,
+    });
+}

package/dist/features/reviews/hooks/useReviews.d.ts

@@ -0,0 +1,34 @@
+import type { ReviewListResponse, ReviewListParams } from "../types";
+interface UseReviewsOptions {
+    initialData?: ReviewListResponse;
+    enabled?: boolean;
+    endpoint?: string;
+}
+export declare function useReviews(params?: ReviewListParams, opts?: UseReviewsOptions): {
+    reviews: import("..").Review[];
+    total: number;
+    totalPages: number;
+    hasMore: boolean;
+    averageRating: number | undefined;
+    ratingDistribution: Record<number, number> | undefined;
+    isLoading: boolean;
+    error: Error | null;
+    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<ReviewListResponse, Error>>;
+};
+interface UseProductReviewsOptions {
+    page?: number;
+    pageSize?: number;
+    enabled?: boolean;
+}
+export declare function useProductReviews(productId: string, opts?: UseProductReviewsOptions): {
+    reviews: import("..").Review[];
+    total: number;
+    totalPages: number;
+    hasMore: boolean;
+    averageRating: number | undefined;
+    ratingDistribution: Record<number, number> | undefined;
+    isLoading: boolean;
+    error: Error | null;
+    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<ReviewListResponse, Error>>;
+};
+export {};

package/dist/features/reviews/hooks/useReviews.js

@@ -0,0 +1,62 @@
+import { useQuery } from "@tanstack/react-query";
+import { apiClient } from "../../../http";
+import { REVIEW_ENDPOINTS } from "../../../constants/api-endpoints";
+export function useReviews(params = {}, opts) {
+    const sp = new URLSearchParams();
+    if (params.productId)
+        sp.set("productId", params.productId);
+    if (params.userId)
+        sp.set("userId", params.userId);
+    if (params.status)
+        sp.set("status", params.status);
+    if (params.rating !== undefined)
+        sp.set("rating", String(params.rating));
+    if (params.featured !== undefined)
+        sp.set("featured", String(params.featured));
+    if (params.page)
+        sp.set("page", String(params.page));
+    if (params.perPage)
+        sp.set("perPage", String(params.perPage));
+    if (params.sort)
+        sp.set("sort", params.sort);
+    if (params.q)
+        sp.set("q", params.q);
+    if (params.dateFrom)
+        sp.set("dateFrom", params.dateFrom);
+    if (params.dateTo)
+        sp.set("dateTo", params.dateTo);
+    if (params.minVotes !== undefined)
+        sp.set("minVotes", String(params.minVotes));
+    if (params.maxVotes !== undefined)
+        sp.set("maxVotes", String(params.maxVotes));
+    // General listing mode (no productId)
+    if (!params.productId && !params.userId && !params.sellerId) {
+        sp.set("latest", "true");
+    }
+    const qs = sp.toString();
+    const query = useQuery({
+        queryKey: ["reviews", qs],
+        queryFn: () => apiClient.get(`${REVIEW_ENDPOINTS.LIST}${qs ? `?${qs}` : ""}`),
+        initialData: opts?.initialData,
+        enabled: opts?.enabled,
+    });
+    return {
+        reviews: query.data?.items ?? [],
+        total: query.data?.total ?? 0,
+        totalPages: query.data?.totalPages ?? 1,
+        hasMore: query.data?.hasMore ?? false,
+        averageRating: query.data?.averageRating,
+        ratingDistribution: query.data?.ratingDistribution,
+        isLoading: query.isLoading,
+        error: query.error,
+        refetch: query.refetch,
+    };
+}
+export function useProductReviews(productId, opts) {
+    return useReviews({
+        productId,
+        status: "approved",
+        page: opts?.page,
+        perPage: opts?.pageSize,
+    }, { enabled: opts?.enabled });
+}

package/dist/features/reviews/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./types";
+export * from "./hooks/useReviews";
+export * from "./hooks/useCreateReview";
+export * from "./components";
+export * from "./schemas";
+export * from "./columns";
+export { manifest } from "./manifest";

package/dist/features/reviews/index.js

@@ -0,0 +1,7 @@
+export * from "./types";
+export * from "./hooks/useReviews";
+export * from "./hooks/useCreateReview";
+export * from "./components";
+export * from "./schemas";
+export * from "./columns";
+export { manifest } from "./manifest";

package/dist/features/reviews/manifest.d.ts

@@ -0,0 +1,2 @@
+import type { FeatureManifest } from "../../contracts";
+export declare const manifest: FeatureManifest;

package/dist/features/reviews/manifest.js

@@ -0,0 +1,10 @@
+export const manifest = {
+    name: "reviews",
+    i18nNamespace: "reviews",
+    envKeys: [],
+    routes: [],
+    apiRoutes: [
+        { segment: "api/reviews", methods: ["GET", "POST"] },
+        { segment: "api/reviews/[id]", methods: ["GET", "PATCH", "DELETE"] },
+    ],
+};

package/dist/features/reviews/messages/en.json

@@ -0,0 +1,10 @@
+{
+  "title": "Reviews",
+  "noReviews": "No reviews yet",
+  "verified": "Verified Purchase",
+  "helpful": "{{count}} found this helpful",
+  "writeReview": "Write a Review",
+  "rating": "Rating",
+  "yourReview": "Your Review",
+  "submit": "Submit Review"
+}

package/dist/features/reviews/repository/reviews.repository.d.ts

@@ -0,0 +1,103 @@
+import type { FirebaseSieveResult, SieveModel } from "../../../providers/db-firebase";
+import { BaseRepository } from "../../../providers/db-firebase";
+import { type ReviewCreateInput, type ReviewDocument } from "../schemas";
+import type { ReviewStatus } from "../types";
+export interface ReviewRatingAggregate {
+    count: number;
+    avgRating: number;
+}
+declare class ReviewRepository extends BaseRepository<ReviewDocument> {
+    constructor();
+    private encryptReviewData;
+    protected mapDoc<D = ReviewDocument>(snap: import("../../../providers/db-firebase").DocumentSnapshot): D;
+    create(input: ReviewCreateInput): Promise<ReviewDocument>;
+    update(reviewId: string, data: Partial<ReviewDocument>): Promise<ReviewDocument>;
+    findByProduct(productId: string): Promise<ReviewDocument[]>;
+    findApprovedByProduct(productId: string): Promise<ReviewDocument[]>;
+    findByUser(userId: string): Promise<ReviewDocument[]>;
+    findPending(): Promise<ReviewDocument[]>;
+    findByStatus(status: ReviewStatus): Promise<ReviewDocument[]>;
+    findFeatured(limit?: number): Promise<ReviewDocument[]>;
+    approve(reviewId: string, moderatorId: string, moderatorNote?: string): Promise<ReviewDocument>;
+    reject(reviewId: string, moderatorId: string, rejectionReason: string, moderatorNote?: string): Promise<ReviewDocument>;
+    incrementHelpful(reviewId: string): Promise<void>;
+    incrementReportCount(reviewId: string): Promise<void>;
+    getAverageRating(productId: string): Promise<number>;
+    getRatingDistribution(productId: string): Promise<Record<number, number>>;
+    /**
+     * Cloud Functions compatibility: approved review count + average by product.
+     */
+    getApprovedRatingAggregate(productId: string): Promise<ReviewRatingAggregate>;
+    /**
+     * Cloud Functions compatibility: approved review count + average by seller.
+     */
+    getApprovedRatingAggregateBySeller(sellerId: string): Promise<ReviewRatingAggregate>;
+    static readonly SIEVE_FIELDS: {
+        id: {
+            canFilter: boolean;
+            canSort: boolean;
+        };
+        productId: {
+            canFilter: boolean;
+            canSort: boolean;
+        };
+        productTitle: {
+            canFilter: boolean;
+            canSort: boolean;
+        };
+        userId: {
+            canFilter: boolean;
+            canSort: boolean;
+        };
+        userNameIndex: {
+            canFilter: boolean;
+            canSort: boolean;
+        };
+        userName: {
+            canFilter: boolean;
+            canSort: boolean;
+        };
+        sellerId: {
+            canFilter: boolean;
+            canSort: boolean;
+        };
+        status: {
+            canFilter: boolean;
+            canSort: boolean;
+        };
+        rating: {
+            canFilter: boolean;
+            canSort: boolean;
+        };
+        verified: {
+            canFilter: boolean;
+            canSort: boolean;
+        };
+        helpfulCount: {
+            canFilter: boolean;
+            canSort: boolean;
+        };
+        featured: {
+            canFilter: boolean;
+            canSort: boolean;
+        };
+        reportCount: {
+            canFilter: boolean;
+            canSort: boolean;
+        };
+        updatedAt: {
+            canFilter: boolean;
+            canSort: boolean;
+        };
+        createdAt: {
+            canFilter: boolean;
+            canSort: boolean;
+        };
+    };
+    listForProduct(productId: string, model: SieveModel): Promise<FirebaseSieveResult<ReviewDocument>>;
+    listForSeller(sellerId: string, model: SieveModel): Promise<FirebaseSieveResult<ReviewDocument>>;
+    listAll(model: SieveModel): Promise<FirebaseSieveResult<ReviewDocument>>;
+}
+declare const reviewRepository: ReviewRepository;
+export { ReviewRepository, reviewRepository };
+export { ReviewRepository as ReviewsRepository };