383 lines
16 KiB
TypeScript
383 lines
16 KiB
TypeScript
"use client";
|
||
import React, { useState, useEffect, useCallback } from "react";
|
||
import {
|
||
Star,
|
||
MessageSquare,
|
||
CheckCircle2,
|
||
Reply,
|
||
Loader2,
|
||
ChevronLeft,
|
||
ChevronRight,
|
||
Send,
|
||
User,
|
||
ShieldCheck,
|
||
} from "lucide-react";
|
||
import { toast } from "sonner";
|
||
import api from "../lib/services/api";
|
||
import { toPersian } from "../lib/utils";
|
||
|
||
interface ReviewItem {
|
||
id: string;
|
||
userName: string;
|
||
rating: number;
|
||
comment: string;
|
||
adminReply?: string;
|
||
createdAt: string;
|
||
}
|
||
|
||
interface ProductReviewsProps {
|
||
productId: string;
|
||
productName: string;
|
||
}
|
||
|
||
export default function ProductReviews({ productId, productName }: ProductReviewsProps) {
|
||
const [reviews, setReviews] = useState<ReviewItem[]>([]);
|
||
const [isLoading, setIsLoading] = useState(true);
|
||
const [page, setPage] = useState(1);
|
||
const [totalPages, setTotalPages] = useState(1);
|
||
const [stats, setStats] = useState({ averageRating: 5, totalReviews: 0 });
|
||
|
||
// Submission Form State
|
||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||
const [rating, setRating] = useState(5);
|
||
const [hoverRating, setHoverRating] = useState(0);
|
||
const [comment, setComment] = useState("");
|
||
const [userName, setUserName] = useState("");
|
||
const [userPhone, setUserPhone] = useState("");
|
||
const [formOpen, setFormOpen] = useState(false);
|
||
|
||
const fetchReviews = useCallback(async () => {
|
||
if (!productId) return;
|
||
try {
|
||
setIsLoading(true);
|
||
const res = await api.get(`/products/${productId}/reviews?page=${page}&limit=5`);
|
||
if (res.data?.success) {
|
||
setReviews(res.data.data || []);
|
||
setTotalPages(res.data.pagination?.totalPages || 1);
|
||
if (res.data.stats) {
|
||
setStats(res.data.stats);
|
||
}
|
||
}
|
||
} catch (err: any) {
|
||
console.error("Failed to fetch product reviews:", err);
|
||
} finally {
|
||
setIsLoading(false);
|
||
}
|
||
}, [productId, page]);
|
||
|
||
useEffect(() => {
|
||
fetchReviews();
|
||
}, [fetchReviews]);
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
if (!comment.trim()) {
|
||
toast.error("لطفاً متن نظر خود را وارد نمایید.");
|
||
return;
|
||
}
|
||
|
||
try {
|
||
setIsSubmitting(true);
|
||
const res = await api.post(`/products/${productId}/reviews`, {
|
||
rating,
|
||
comment: comment.trim(),
|
||
userName: userName.trim() || undefined,
|
||
userPhone: userPhone.trim() || undefined,
|
||
});
|
||
|
||
if (res.data?.success) {
|
||
toast.success(
|
||
res.data.message || "دیدگاه شما با موفقیت ثبت شد و پس از تایید کارشناسان منتشر خواهد شد."
|
||
);
|
||
setComment("");
|
||
setFormOpen(false);
|
||
}
|
||
} catch (err: any) {
|
||
console.error("Failed to submit review:", err);
|
||
} finally {
|
||
setIsSubmitting(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<section className="bg-white border border-medical-gray-200 rounded-[2.5rem] p-6 sm:p-10 shadow-md space-y-8 font-vazir text-right" dir="rtl">
|
||
{/* Header & Rating Summary */}
|
||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6 pb-6 border-b border-medical-gray-100">
|
||
<div className="space-y-2">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-12 h-12 bg-canina-gold/10 text-canina-gold rounded-2xl flex items-center justify-center shadow-xs">
|
||
<Star className="w-6 h-6 fill-canina-gold" />
|
||
</div>
|
||
<div>
|
||
<h3 className="text-xl sm:text-2xl font-black text-medical-gray-900">
|
||
نظرات و تجربیات خریداران
|
||
</h3>
|
||
<p className="text-xs text-medical-gray-400 font-bold mt-0.5">
|
||
دیدگاههای ثبتشده درباره اثرگذاری مکمل {productName}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Rating Score Badge & Add Review Button */}
|
||
<div className="flex flex-wrap items-center gap-4">
|
||
<div className="flex items-center gap-3 px-5 py-3 bg-medical-gray-50 border border-medical-gray-100 rounded-2xl">
|
||
<div className="flex items-center gap-1">
|
||
{Array.from({ length: 5 }).map((_, i) => (
|
||
<Star
|
||
key={i}
|
||
className={`w-4 h-4 ${
|
||
i < Math.round(stats.averageRating)
|
||
? "fill-amber-400 text-amber-400"
|
||
: "text-medical-gray-200"
|
||
}`}
|
||
/>
|
||
))}
|
||
</div>
|
||
<div className="text-sm font-black text-medical-gray-900">
|
||
{toPersian(stats.averageRating)} از ۵
|
||
</div>
|
||
<span className="text-xs text-medical-gray-400 font-bold border-r border-medical-gray-200 pr-2">
|
||
({toPersian(stats.totalReviews)} دیدگاه)
|
||
</span>
|
||
</div>
|
||
|
||
<button
|
||
onClick={() => setFormOpen(!formOpen)}
|
||
className="px-5 py-3 bg-canina-blue hover:bg-canina-dark text-white rounded-2xl text-xs font-black transition-all shadow-md shadow-canina-blue/20 flex items-center gap-2"
|
||
>
|
||
<MessageSquare className="w-4 h-4" />
|
||
<span>{formOpen ? "بستن فرم" : "ثبت دیدگاه جدید"}</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Submission Form (Accordion / Collapsible) */}
|
||
{formOpen && (
|
||
<form
|
||
onSubmit={handleSubmit}
|
||
className="bg-medical-gray-50/80 border border-medical-gray-200 rounded-3xl p-6 sm:p-8 space-y-5 animate-in fade-in duration-200"
|
||
>
|
||
<div className="flex items-center justify-between border-b border-medical-gray-200 pb-3">
|
||
<h4 className="text-sm font-black text-medical-gray-900 flex items-center gap-2">
|
||
<Send className="w-4 h-4 text-canina-blue" />
|
||
ارسال نظر و امتیاز برای {productName}
|
||
</h4>
|
||
<span className="text-[11px] text-medical-gray-400 font-bold">
|
||
نظر شما پس از تایید مدیریت نمایش داده میشود
|
||
</span>
|
||
</div>
|
||
|
||
{/* Star Rating Selector */}
|
||
<div>
|
||
<label className="block text-xs font-black text-medical-gray-700 mb-2">
|
||
امتیاز شما به کیفیت و اثرگذاری محصول:
|
||
</label>
|
||
<div className="flex items-center gap-2">
|
||
{Array.from({ length: 5 }).map((_, i) => {
|
||
const starVal = i + 1;
|
||
const active = starVal <= (hoverRating || rating);
|
||
return (
|
||
<button
|
||
type="button"
|
||
key={i}
|
||
onMouseEnter={() => setHoverRating(starVal)}
|
||
onMouseLeave={() => setHoverRating(0)}
|
||
onClick={() => setRating(starVal)}
|
||
className="p-1 text-2xl transition-transform hover:scale-110"
|
||
>
|
||
<Star
|
||
className={`w-7 h-7 ${
|
||
active
|
||
? "fill-amber-400 text-amber-400"
|
||
: "text-medical-gray-300"
|
||
}`}
|
||
/>
|
||
</button>
|
||
);
|
||
})}
|
||
<span className="text-xs font-bold text-medical-gray-600 mr-2">
|
||
{toPersian(rating)} ستاره
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Name & Phone Inputs */}
|
||
<div className="grid sm:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-xs font-black text-medical-gray-700 mb-1.5">
|
||
نام و نام خانوادگی (اختیاری):
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={userName}
|
||
onChange={(e) => setUserName(e.target.value)}
|
||
placeholder="مثلاً علی محمدی"
|
||
className="w-full px-4 py-2.5 bg-white border border-medical-gray-200 rounded-xl text-xs font-bold outline-none focus:ring-2 focus:ring-canina-blue/20"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-xs font-black text-medical-gray-700 mb-1.5">
|
||
شماره موبایل (اختیاری - محرمانه):
|
||
</label>
|
||
<input
|
||
type="tel"
|
||
value={userPhone}
|
||
onChange={(e) => setUserPhone(e.target.value)}
|
||
placeholder="0912..."
|
||
className="w-full px-4 py-2.5 bg-white border border-medical-gray-200 rounded-xl text-xs font-bold outline-none focus:ring-2 focus:ring-canina-blue/20 font-mono"
|
||
dir="ltr"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Comment Textarea */}
|
||
<div>
|
||
<label className="block text-xs font-black text-medical-gray-700 mb-1.5">
|
||
متن دیدگاه یا تجربه مصرف: <span className="text-rose-500">*</span>
|
||
</label>
|
||
<textarea
|
||
required
|
||
rows={4}
|
||
value={comment}
|
||
onChange={(e) => setComment(e.target.value)}
|
||
placeholder="تجربه خود را از نحوه مصرف، تغییرات بالینی پت و اثربخشی این مکمل بنویسید..."
|
||
className="w-full p-4 bg-white border border-medical-gray-200 rounded-2xl text-xs sm:text-sm font-medium outline-none focus:ring-2 focus:ring-canina-blue/20 resize-none leading-relaxed"
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex justify-end gap-3 pt-2">
|
||
<button
|
||
type="button"
|
||
onClick={() => setFormOpen(false)}
|
||
className="px-5 py-2.5 bg-medical-gray-200 hover:bg-medical-gray-300 text-medical-gray-700 rounded-xl text-xs font-bold transition-all"
|
||
>
|
||
انصراف
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
disabled={isSubmitting}
|
||
className="px-6 py-2.5 bg-canina-blue hover:bg-canina-dark text-white rounded-xl text-xs font-black transition-all shadow-md flex items-center gap-2"
|
||
>
|
||
{isSubmitting ? (
|
||
<Loader2 className="w-4 h-4 animate-spin" />
|
||
) : (
|
||
<CheckCircle2 className="w-4 h-4" />
|
||
)}
|
||
<span>ثبت و ارسال دیدگاه</span>
|
||
</button>
|
||
</div>
|
||
</form>
|
||
)}
|
||
|
||
{/* Reviews List */}
|
||
<div className="space-y-4">
|
||
{isLoading ? (
|
||
<div className="py-12 text-center text-medical-gray-400 font-bold text-xs flex flex-col items-center gap-2">
|
||
<Loader2 className="w-6 h-6 animate-spin text-canina-blue" />
|
||
<span>در حال دریافت نظرات خریداران...</span>
|
||
</div>
|
||
) : reviews.length === 0 ? (
|
||
<div className="py-12 text-center bg-medical-gray-50/50 border border-dashed border-medical-gray-200 rounded-3xl">
|
||
<p className="text-sm font-bold text-medical-gray-500">
|
||
هنوز دیدگاهی برای این محصول ثبت نشده است.
|
||
</p>
|
||
<p className="text-xs text-medical-gray-400 font-medium mt-1">
|
||
اولین نفری باشید که تجربه خود را درباره این محصول به اشتراک میگذارید.
|
||
</p>
|
||
</div>
|
||
) : (
|
||
reviews.map((rev) => {
|
||
const date = new Date(rev.createdAt);
|
||
return (
|
||
<div
|
||
key={rev.id}
|
||
className="bg-medical-gray-50/60 border border-medical-gray-100 rounded-3xl p-5 sm:p-6 space-y-3 hover:bg-medical-gray-50 transition-colors"
|
||
>
|
||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||
<div className="flex items-center gap-2.5">
|
||
<div className="w-9 h-9 bg-canina-blue/10 text-canina-blue rounded-xl flex items-center justify-center font-black text-xs">
|
||
<User className="w-4 h-4" />
|
||
</div>
|
||
<div>
|
||
<div className="text-xs sm:text-sm font-black text-medical-gray-900 flex items-center gap-2">
|
||
<span>{rev.userName}</span>
|
||
<span className="inline-flex items-center gap-1 text-[10px] font-bold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-md border border-emerald-200">
|
||
<ShieldCheck className="w-3 h-3" />
|
||
خریدار تایید شده
|
||
</span>
|
||
</div>
|
||
<div className="text-[10px] text-medical-gray-400 font-bold mt-0.5">
|
||
{toPersian(date.toLocaleDateString("fa-IR"))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Stars */}
|
||
<div className="flex items-center gap-1">
|
||
{Array.from({ length: 5 }).map((_, i) => (
|
||
<Star
|
||
key={i}
|
||
className={`w-3.5 h-3.5 ${
|
||
i < rev.rating
|
||
? "fill-amber-400 text-amber-400"
|
||
: "text-medical-gray-200"
|
||
}`}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Review Text */}
|
||
<p className="text-xs sm:text-sm text-medical-gray-700 font-medium leading-relaxed whitespace-pre-wrap pt-1">
|
||
{rev.comment}
|
||
</p>
|
||
|
||
{/* Admin Reply */}
|
||
{rev.adminReply && (
|
||
<div className="mt-3 p-3.5 bg-white border-r-3 border-canina-blue rounded-2xl text-xs space-y-1 shadow-xs">
|
||
<span className="font-black text-canina-blue flex items-center gap-1">
|
||
<Reply className="w-3.5 h-3.5 rotate-180" />
|
||
پاسخ کارشناس کنینا ایران:
|
||
</span>
|
||
<p className="text-medical-gray-600 font-medium leading-relaxed">
|
||
{rev.adminReply}
|
||
</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
})
|
||
)}
|
||
|
||
{/* Pagination Controls */}
|
||
{totalPages > 1 && (
|
||
<div className="flex items-center justify-between pt-4 border-t border-medical-gray-100">
|
||
<span className="text-xs font-bold text-medical-gray-400">
|
||
صفحه {toPersian(page)} از {toPersian(totalPages)}
|
||
</span>
|
||
<div className="flex items-center gap-2">
|
||
<button
|
||
disabled={page <= 1 || isLoading}
|
||
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
||
className="px-3 py-1.5 border border-medical-gray-200 rounded-xl text-xs font-bold hover:bg-medical-gray-50 disabled:opacity-40 transition-all flex items-center gap-1"
|
||
>
|
||
<ChevronRight className="w-4 h-4" />
|
||
<span>قبلی</span>
|
||
</button>
|
||
<button
|
||
disabled={page >= totalPages || isLoading}
|
||
onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
|
||
className="px-3 py-1.5 border border-medical-gray-200 rounded-xl text-xs font-bold hover:bg-medical-gray-50 disabled:opacity-40 transition-all flex items-center gap-1"
|
||
>
|
||
<span>بعدی</span>
|
||
<ChevronLeft className="w-4 h-4" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|