93 lines
3.6 KiB
JavaScript
93 lines
3.6 KiB
JavaScript
|
'use client';
|
||
|
|
|
||
|
|
import { useState } from 'react';
|
||
|
|
import { X, Loader2 } from 'lucide-react';
|
||
|
|
import toast from 'react-hot-toast';
|
||
|
|
import StarRating from './StarRating';
|
||
|
|
import { addCustomerRating } from '../../utils/ratings';
|
||
|
|
|
||
|
|
const RatingField = ({ label, value, onChange }) => (
|
||
|
|
<div className="space-y-2">
|
||
|
|
<label className="block text-sm font-medium text-gray-700">{label} <span className="text-red-500">*</span></label>
|
||
|
|
<StarRating rating={value} onRatingChange={onChange} size={28} />
|
||
|
|
{value === 0 && <p className="text-xs text-red-500">مطلوب</p>}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
|
||
|
|
export default function CustomerRatingForm({ reservationId, onSuccess, onCancel }) {
|
||
|
|
const [furnitureIntegrityRating, setFurnitureIntegrityRating] = useState(0);
|
||
|
|
const [termsComplianceRating, setTermsComplianceRating] = useState(0);
|
||
|
|
const [renterBehaviorRating, setRenterBehaviorRating] = useState(0);
|
||
|
|
const [comment, setComment] = useState('');
|
||
|
|
const [loading, setLoading] = useState(false);
|
||
|
|
|
||
|
|
const validate = () => {
|
||
|
|
if (furnitureIntegrityRating === 0) return 'الحفاظ على الأثاث';
|
||
|
|
if (termsComplianceRating === 0) return 'الالتزام بالشروط';
|
||
|
|
if (renterBehaviorRating === 0) return 'سلوك المستأجر';
|
||
|
|
return null;
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleSubmit = async (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
const missing = validate();
|
||
|
|
if (missing) {
|
||
|
|
toast.error(`يرجى تقييم: ${missing}`);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
setLoading(true);
|
||
|
|
try {
|
||
|
|
await addCustomerRating({
|
||
|
|
reservationId,
|
||
|
|
furnitureIntegrityRating,
|
||
|
|
termsComplianceRating,
|
||
|
|
renterBehaviorRating,
|
||
|
|
comment: comment.trim() || null,
|
||
|
|
});
|
||
|
|
toast.success('تم إرسال تقييم المستأجر بنجاح!');
|
||
|
|
onSuccess?.();
|
||
|
|
} catch (err) {
|
||
|
|
toast.error('حدث خطأ، حاول مرة أخرى');
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="bg-white rounded-2xl shadow-lg border border-gray-200 p-6 max-w-lg mx-auto">
|
||
|
|
<div className="flex justify-between items-center mb-4">
|
||
|
|
<h3 className="text-xl font-bold text-gray-900">تقييم المستأجر</h3>
|
||
|
|
{onCancel && (
|
||
|
|
<button onClick={onCancel} className="text-gray-400 hover:text-gray-600">
|
||
|
|
<X size={20} />
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<form onSubmit={handleSubmit} className="space-y-5">
|
||
|
|
<RatingField label="الحفاظ على الأثاث" value={furnitureIntegrityRating} onChange={setFurnitureIntegrityRating} />
|
||
|
|
<RatingField label="الالتزام بالشروط" value={termsComplianceRating} onChange={setTermsComplianceRating} />
|
||
|
|
<RatingField label="سلوك المستأجر" value={renterBehaviorRating} onChange={setRenterBehaviorRating} />
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-gray-700">تعليق (اختياري)</label>
|
||
|
|
<textarea
|
||
|
|
rows={3}
|
||
|
|
value={comment}
|
||
|
|
onChange={(e) => setComment(e.target.value)}
|
||
|
|
className="w-full mt-1 px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500"
|
||
|
|
placeholder="شارك تجربتك مع المستأجر..."
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
disabled={loading}
|
||
|
|
className="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 rounded-xl transition flex items-center justify-center gap-2 disabled:opacity-50"
|
||
|
|
>
|
||
|
|
{loading && <Loader2 className="w-5 h-5 animate-spin" />}
|
||
|
|
{loading ? 'جاري الإرسال...' : 'إرسال التقييم'}
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|