109 lines
3.9 KiB
JavaScript
109 lines
3.9 KiB
JavaScript
'use client';
|
|
import { useState, useEffect } from "react";
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { addReportReviewApi } from "@/utils/api";
|
|
import { toast } from "sonner";
|
|
import { t } from "@/utils";
|
|
|
|
const ReportReviewModal = ({ isOpen, setIsOpen, reviewId, setMyReviews }) => {
|
|
const [reason, setReason] = useState("");
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [validationError, setValidationError] = useState("");
|
|
|
|
// Clear reason and validation error when modal closes
|
|
useEffect(() => {
|
|
if (!isOpen) {
|
|
setReason("");
|
|
setValidationError("");
|
|
}
|
|
}, [isOpen]);
|
|
|
|
const handleSubmit = async () => {
|
|
if (!reason.trim()) {
|
|
setValidationError("Please provide a reason for the report");
|
|
return;
|
|
}
|
|
setValidationError("");
|
|
setIsSubmitting(true);
|
|
try {
|
|
const res = await addReportReviewApi.addReportReview({
|
|
seller_review_id: reviewId,
|
|
report_reason: reason,
|
|
});
|
|
|
|
if (res?.data?.error === false) {
|
|
toast.success(res?.data?.message)
|
|
setMyReviews(prevReviews =>
|
|
prevReviews.map(review =>
|
|
review.id === reviewId ? { ...review, report_reason: res?.data?.data.report_reason, report_status: res?.data?.data.report_status } : review
|
|
)
|
|
);
|
|
setReason("");
|
|
setIsOpen(false);
|
|
} else {
|
|
toast.error(res?.data?.message)
|
|
}
|
|
} catch (error) {
|
|
console.error("Error reporting review:", error);
|
|
toast.error(t("somethingWentWrong"))
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
// Clear validation error when user types
|
|
const handleReasonChange = (e) => {
|
|
setReason(e.target.value);
|
|
if (validationError) {
|
|
setValidationError("");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
|
<DialogContent onInteractOutside={(e) => e.preventDefault()} className="px-6 py-6 sm:max-w-[500px]">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-xl font-medium">
|
|
{t('reportReview')}
|
|
</DialogTitle>
|
|
<DialogDescription className="text-sm text-gray-600 mt-2">
|
|
{t('reportReviewDescription')}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="mt-4">
|
|
<Textarea
|
|
placeholder="Write your reason here"
|
|
className={`h-32 resize-none ${validationError ? 'border-red-500 focus-visible:ring-red-500' : ''}`}
|
|
value={reason}
|
|
onChange={handleReasonChange}
|
|
/>
|
|
{validationError && (
|
|
<p className="text-red-500 text-sm mt-1">{validationError}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mt-6 flex justify-end gap-3">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={() => setIsOpen(false)}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
onClick={handleSubmit}
|
|
disabled={isSubmitting}
|
|
>
|
|
{isSubmitting ? t("submitting") : t("report")}
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default ReportReviewModal;
|