Init front
This commit is contained in:
fullofempt
161
app/components/RequestDetailsModal.jsx
Normal file
161
app/components/RequestDetailsModal.jsx
Normal file
@@ -0,0 +1,161 @@
|
||||
import React, { useState } from "react";
|
||||
import { FaStar } from "react-icons/fa";
|
||||
|
||||
const RequestDetailsModal = ({ request, onClose }) => {
|
||||
const isDone = request.status === "Выполнена";
|
||||
const isRejected = request.status === "Отклонена";
|
||||
|
||||
const [rating, setRating] = useState(0);
|
||||
const [review, setReview] = useState("");
|
||||
const [rejectFeedback, setRejectFeedback] = useState("");
|
||||
|
||||
const handleStarClick = (value) => {
|
||||
setRating(value);
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
console.log("Оставить отзыв:", {
|
||||
id: request.id,
|
||||
status: request.status,
|
||||
rating,
|
||||
review,
|
||||
rejectFeedback,
|
||||
});
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-40 flex flex-col bg-[#90D2F9] px-4 pt-4 pb-20">
|
||||
{/* Заголовок */}
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="text-white w-7 h-7 rounded-full flex items-center justify-center text-lg"
|
||||
>
|
||||
←
|
||||
</button>
|
||||
<p className="flex-1 text-center font-montserrat font-extrabold text-[20px] leading-[24px] text-white">
|
||||
Заявка от {request.createdAt}
|
||||
</p>
|
||||
<span className="w-7" />
|
||||
</div>
|
||||
|
||||
{/* Белая карточка как на макете */}
|
||||
<div className="flex-1 flex items-start justify-center">
|
||||
<div className="w-full max-w-[360px] bg-white rounded-3xl p-4 flex flex-col gap-4 shadow-lg">
|
||||
{/* Статус + срок (берём цвет и текст из заявки) */}
|
||||
<div className="flex items-start justify-between">
|
||||
<span
|
||||
className="inline-flex items-center justify-center px-3 py-1 rounded-full font-montserrat text-[10px] font-semibold text-white"
|
||||
style={{ backgroundColor: request.statusColor }}
|
||||
>
|
||||
{request.status}
|
||||
</span>
|
||||
<div className="text-right leading-tight">
|
||||
<p className="font-montserrat text-[10px] text-black">
|
||||
{request.date}
|
||||
</p>
|
||||
<p className="font-montserrat text-[10px] text-black">
|
||||
{request.time}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Название задачи */}
|
||||
<p className="font-montserrat font-semibold text-[16px] leading-[20px] text.black">
|
||||
{request.title}
|
||||
</p>
|
||||
|
||||
{/* ВЫПОЛНЕНА: голубой блок с отзывом как было */}
|
||||
{isDone && (
|
||||
<div className="bg-[#72B8E2] rounded-3xl p-3 flex flex-col gap-2">
|
||||
<p className="font-montserrat font-bold text-[12px] text-white">
|
||||
Отзыв
|
||||
</p>
|
||||
<textarea
|
||||
value={review}
|
||||
onChange={(e) => setReview(e.target.value)}
|
||||
rows={4}
|
||||
className="w-full bg-[#72B8E2] rounded-2xl px-3 py-2 text-sm font-montserrat text-white placeholder:text-white/70 outline-none resize-none border border-white/20"
|
||||
placeholder="Напишите, как прошла помощь"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ОТКЛОНЕНА: причина отказа + комментарий, без изменения размеров */}
|
||||
{isRejected && (
|
||||
<>
|
||||
{request.rejectReason && (
|
||||
<div className="bg-[#FF8282] rounded-3xl p-3">
|
||||
<p className="font-montserrat font-bold text-[12px] text-white mb-1">
|
||||
Причина отказа
|
||||
</p>
|
||||
<p className="font-montserrat text-[12px] text-white">
|
||||
{request.rejectReason}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="font-montserrat font-bold text-[12px] text-black">
|
||||
Ваш комментарий
|
||||
</p>
|
||||
<textarea
|
||||
value={rejectFeedback}
|
||||
onChange={(e) => setRejectFeedback(e.target.value)}
|
||||
rows={4}
|
||||
className="w-full rounded-2xl px-3 py-2 text-sm font-montserrat text-black placeholder:text-black/40 outline-none resize-none border border-[#FF8282]"
|
||||
placeholder="Расскажите, что можно улучшить"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Оценка волонтёра — только для выполненной */}
|
||||
{/* Оценка волонтера */}
|
||||
{isDone && (
|
||||
<div className="mt-1 flex flex-col items-center gap-2">
|
||||
<p className="font-montserrat font-semibold text-[14px] text-black">
|
||||
Оценить волонтера
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
{[1, 2, 3, 4, 5].map((star) => (
|
||||
<button
|
||||
key={star}
|
||||
type="button"
|
||||
onClick={() => handleStarClick(star)}
|
||||
className="text-[#F6E168]"
|
||||
>
|
||||
<FaStar
|
||||
size={26}
|
||||
className={
|
||||
star <= rating ? "fill-[#F6E168]" : "fill-[#F6E168]/40"
|
||||
}
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Кнопка внизу */}
|
||||
{(isDone || isRejected) && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSubmit}
|
||||
className="mt-4 w-full max-w-[360px] mx-auto bg-[#94E067] rounded-full py-3 flex items-center justify-center"
|
||||
>
|
||||
<span className="font-montserrat font-extrabold text-[16px] text-white">
|
||||
{isRejected ? "Отправить комментарий" : "Оставить отзыв"}
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RequestDetailsModal;
|
||||
Reference in New Issue
Block a user