WIP API

app/components/acceptPopUp.jsx

@@ -3,9 +3,55 @@
 import React from "react";
 import { FaTimesCircle } from "react-icons/fa";
 
-const AcceptPopup = ({ request, isOpen, onClose, onAccept }) => {
+const AcceptPopup = ({ request, isOpen, onClose, onAccept, loading, error }) => {
   if (!isOpen || !request) return null;
 
+  const title = request.title;
+  const description =
+    request.description ||
+    "Описание недоступно. Откройте заявку для подробностей.";
+
+  const baseAddress = request.address || "Адрес не указан";
+  const city = request.city ? `, ${request.city}` : "";
+  const place = `${baseAddress}${city}`;
+
+  const deadline = request.desired_completion_date
+    ? new Date(request.desired_completion_date).toLocaleString("ru-RU", {
+        day: "2-digit",
+        month: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+      })
+    : "Не указано";
+
+  const phone = request.contact_phone || request.phone;
+  const contactNotes = request.contact_notes || request.contactNotes;
+
+  const urgencyText = (() => {
+    switch (request.urgency) {
+      case "low":
+        return "Низкая";
+      case "medium":
+        return "Средняя";
+      case "high":
+        return "Высокая";
+      case "urgent":
+        return "Срочно";
+      default:
+        return null;
+    }
+  })();
+
+  const handleClick = () => {
+    // здесь видно, с каким id ты стучишься в /requests/{id}/responses
+    console.log("Отклик на заявку из попапа:", {
+      id: request.id,
+      title: request.title,
+      raw: request,
+    });
+    onAccept(request);
+  };
+
   return (
     <div className="fixed inset-0  z-50 flex items-center justify-center">
       {/* затемнение */}
@@ -30,68 +76,71 @@ const AcceptPopup = ({ request, isOpen, onClose, onAccept }) => {
           Задача
         </h2>
         <p className="text-[20px] leading-[14px] mt-5 font-montserrat mb-5">
-          {request.title}
+          {title}
         </p>
 
-        {/* Сумма и время */}
-        <div className="flex items-center gap-3 mb-3">
+        {/* Только время выполнить до */}
+        <div className="flex.items-center gap-3 mb-3">
           <div className="w-full h-[40px] bg-[#90D2F9] rounded-full flex flex-col items-center justify-center">
-            <span className="text-[12px] leading-[11px] text-white font-semibold mb-2">
-              Сумма
-            </span>
-            <span className="text-[15px] leading-[13px] text-white font-semibold">
-              {request.amount || "2000 ₽"}
-            </span>
-          </div>
-          <div className="w-full h-[40px] bg-[#90D2F9] rounded-full flex flex-col items-center justify-center">
-            <span className="text-[12px] leading-[11px] text-white font-semibold mb-2">
+            <span className="text-[12px] leading-[11px] text-white font-semibold.mb-2">
               Выполнить до
             </span>
             <span className="text-[15px] leading-[13px] text-white font-semibold">
-              {request.deadline || "17:00"}
+              {deadline}
             </span>
           </div>
         </div>
 
-        {/* Список покупок / описание */}
+        {/* Описание + доп.инфа */}
         <div className="w-full bg-[#E4E4E4] rounded-[20px] px-3 py-3 mb-3 max-h-[40vh] overflow-y-auto">
           <p className="text-[15px] leading-[20px] font-montserrat text-black whitespace-pre-line">
-            {request.description ||
-              "Необходимо приобрести:\n1. Белый хлеб\n2. Молоко\n3. Колбаса\n4. Фрукты"}
+            {description}
           </p>
+
+          {urgencyText && (
+            <p className="mt-2 text-[12px] leading-[16px] font-montserrat text-black">
+              <span className="font-semibold">Срочность: </span>
+              {urgencyText}
+            </p>
+          )}
+          {phone && (
+            <p className="text-[12px] leading-[16px] font-montserrat text-black">
+              <span className="font-semibold">Телефон: </span>
+              {phone}
+            </p>
+          )}
+          {contactNotes && (
+            <p className="text-[12px] leading-[16px] font-montserrat text-black">
+              <span className="font-semibold">Комментарий к контакту: </span>
+              {contactNotes}
+            </p>
+          )}
+          {error && (
+            <p className="mt-2 text-[12px] leading-[16px] font-montserrat text-red-500">
+              {error}
+            </p>
+          )}
         </div>
 
-        {/* Данные человека */}
+        {/* Данные места */}
         <div className="w-full flex flex-col gap-3 mb-4">
           <p className="font-montserrat text-[20px] leading-[19px] font-medium">
             Данные:
           </p>
-          <p className="text-[20px] leading-[12px] font-montserrat">
-            ФИО: {request.fullName || "Клавдия Березова"}
-          </p>
           <p className="text-[15px] leading-[12px] font-montserrat">
-            Место: {request.address}
+            Место: {place}
           </p>
-          {request.flat && (
-            <p className="text-[10px] leading-[12px] font-montserrat">
-              кв: {request.flat}
-            </p>
-          )}
-          {request.floor && (
-            <p className="text-[10px] leading-[12px] font-montserrat">
-              Этаж: {request.floor}
-            </p>
-          )}
         </div>
 
         {/* Кнопка отклика внизу */}
         <button
           type="button"
-          onClick={() => onAccept(request)}
-          className="mt-auto w-full h-[40px] bg-[#94E067] rounded-[10px] flex items-center justify-center"
+          onClick={handleClick}
+          disabled={loading}
+          className="mt-auto w-full h-[40px] bg-[#94E067] rounded-[10px] flex items-center justify-center disabled:opacity-60"
         >
           <span className="font-montserrat font-bold text-[16px] leading-[19px] text-white">
-            Откликнуться
+            {loading ? "Отправка..." : "Откликнуться"}
           </span>
         </button>
       </div>