feat(doctor): wire rich rating/review UI to multi-dimensional API

Connect the existing doctor-page review UI to the rebuilt backend contract
(see clinicpro feat/rating-multidimensional).

- page.js fetches the rating aggregate alongside comments and passes
  rateAggregate down to the chart (point / satisfaction / 5 dimensions).
- Submit form sends the five dimensions with doctor_uuid; comment/reply
  send {doctor_uuid, comment, parent}; 401/403 ERR_RATING_NOT_ELIGIBLE
  surface friendly guidance.
- Like/dislike call POST /like/{uuid} with value and update from the
  response; replies render nested.
- ModalAnswer gates the submit button on GET /rate/{uuid}/eligibility.
- services/response.js: getRateEligibility, postCommentsLike(uuid, value),
  drop unused patchDoctorRate. Fix hardcoded modal title; empty-state for
  no comments. Remove orphaned AnswerField.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

components/doctor/detailDoctor/cards/comments/chart/ProgressAll.js

@@ -2,13 +2,13 @@ import CircularLoading from "@/app/component/loading/Circular";
 import { numberToArStyle } from "@/helper";
 import { CircularProgress } from "@mui/material";
 
-function ProgressAll({ doctor }) {
+function ProgressAll({ satisfaction }) {
   return (
     <div className="hidden lg:flex w-full h-fit relative min-w-[145px] max-w-[150px]">
       <CircularLoading width={120} height={120}>
         <CircularProgress
           variant="determinate"
-          value={doctor?.satisfaction}
+          value={satisfaction || 0}
           sx={{
             "& .MuiCircularProgress-circle": {
               stroke: "#05BA58",
@@ -28,7 +28,7 @@ function ProgressAll({ doctor }) {
             رضایت کاربران
           </p>
           <p className="text-[#3B3B3B]">
-            {numberToArStyle(doctor?.satisfaction)}%
+            {numberToArStyle(satisfaction || 0)}%
           </p>
         </div>
       </CircularLoading>

components/doctor/detailDoctor/cards/comments/chart/index.js

@@ -6,22 +6,24 @@ import ProgressDetail from "@/app/component/ProfressDetail";
 import TextLoading from "@/app/component/loading/Text";
 import CustomLoading from "@/app/component/loading/Custom";
 
-function Chart({ comments, doctor }) {
-  const averages = doctor?.average_rate?.averages;
+function Chart({ comments, rateAggregate }) {
+  const point = rateAggregate?.point ?? 0;
+  const satisfaction = rateAggregate?.satisfaction ?? 0;
+  const averages = rateAggregate?.averages ?? [];
   return (
     <div
       className="
-            rounded-lg my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] border border-[#EFEFEF] bg-[#FFF] 
+            rounded-lg my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] border border-[#EFEFEF] bg-[#FFF]
             pt-[12px] md:pt-[14px] lg:pt-[16px] pb-[12px] sm:pb-[16px] md:pb-[20px] lg:pb-[24px] px-[12px] sm:px-[16px] md:px-[20px] lg:px-[24px]
         "
     >
       <TextLoading width={130} height={20}>
         <div className="flex items-center justify-start gap-2.5">
           <p className="text-[#616161] text-[14px] font-medium">
-            امتیاز کلی کاربران: {doctor?.point} از 5
+            امتیاز کلی کاربران: {point} از 5
           </p>
           <p className="text-[#7E7E7E] text-[14px] font-normal">
-            (از مجموع {comments?.length} نظر)
+            (از مجموع {comments?.length || 0} نظر)
           </p>
         </div>
       </TextLoading>
@@ -29,7 +31,8 @@ function Chart({ comments, doctor }) {
         <TextLoading width={160} height={20}>
           <Rating
             readOnly
-            value={3.5}
+            value={point}
+            precision={0.5}
             size="small"
             name="read-only"
             className="!mt-4 !mb-6 !hidden lg:!flex"
@@ -41,26 +44,24 @@ function Chart({ comments, doctor }) {
           <div className="flex p-1 gap-0.5 items-start justify-center">
             <StarDI />
             <p className="text-[#616161] text-[12px] md:text-[14px] font-normal">
-              امتیاز: {doctor?.point}
+              امتیاز: {point}
             </p>
           </div>
           <div className="flex p-1 items-start gap-0.5">
             <LikeDI />
             <p className="text-[#616161] text-[12px] md:text-[14px] font-normal">
-              {doctor?.satisfaction}% رضایت کاربران
+              {satisfaction}% رضایت کاربران
             </p>
           </div>
         </CustomLoading>
       </div>
       <div className="flex flex-wrap items-center justify-center gap-[50px]">
         <ul className="flex w-full flex-col items-start justify-start gap-1.5 lg:w-fit">
-          {Object.values(averages ? averages : Array(5).fill(false)).map(
-            (item, idx) => (
-              <ProgressDetail data={item} idx={idx} key={idx} />
-            )
-          )}
+          {(averages.length ? averages : Array(5).fill(null)).map((item, idx) => (
+            <ProgressDetail data={item} idx={idx} key={idx} />
+          ))}
         </ul>
-        <ProgressAll doctor={doctor} />
+        <ProgressAll satisfaction={satisfaction} />
       </div>
     </div>
   );

components/doctor/detailDoctor/cards/comments/index.js

@@ -4,7 +4,7 @@ import Chart from "./chart";
 import Comment from "@/app/component/comment";
 import ModalAnswer from "./modal/ModalAnswer";
 
-function Comments({ doctor, comments }) {
+function Comments({ doctor, comments, rateAggregate }) {
   return (
     <div className="mt-[24px] sm:mt-[27px] md:mt-[29px] lg:mt-[32px]">
       <a
@@ -20,8 +20,8 @@ function Comments({ doctor, comments }) {
         </p>
         <ModalAnswer doctor={doctor} />
       </div>
-      <Chart comments={comments} doctor={doctor} />
-      <Comment comments={comments} />
+      <Chart comments={comments} rateAggregate={rateAggregate} />
+      <Comment comments={comments} doctor={doctor} />
     </div>
   );
 }

components/doctor/detailDoctor/cards/comments/modal/BtnNewComment.js

@@ -1,20 +1,11 @@
-import { alert, isUserLoggedIn } from "@/helper";
 import { Button } from "@mui/material";
 import React from "react";
 
 function BtnNewComment({ handleOpen }) {
-  const handleClick = () => {
-    if (isUserLoggedIn()) {
-      handleOpen();
-    } else {
-      alert("warning", "برای ارسال کامنت باید ابتدا وارد حساب کاربری شوید.");
-    }
-  };
-
   return (
     <Button
       variant="outlined"
-      onClick={handleClick}
+      onClick={handleOpen}
       className="!py-[6px] md:!py-2 lg:!py-[9px] !px-[16px] sm:!px-[23px] md:!px-[29px] 
                 lg:!px-[36px] !mr-0 md:!mr-4 !rounded !w-full md:!w-fit"
     >

components/doctor/detailDoctor/cards/comments/modal/ModalAnswer.js

@@ -7,46 +7,42 @@ import ProgressDetail from "@/data/progress_detail.json";
 import BtnNewComment from "./BtnNewComment";
 import Content from "./content";
 import { request } from "@/services/response";
-import Cookies from "js-cookie";
+import { alert, isUserLoggedIn } from "@/helper";
 
 function ModalAnswer({ doctor }) {
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
+  const [eligible, setEligible] = useState(false);
   const [comment, setComment] = useState({
-    defaultRate: false,
-    uuid: "",
-    rate: ProgressDetail,
-    detail: {
-      comment: "",
-      doctor_id: doctor?.id,
-    },
+    rate: ProgressDetail.map((item) => ({ ...item, progress: 0 })),
+    detail: { comment: "" },
   });
 
   useEffect(() => {
-    const isLogged = Cookies.get("access_token");
+    if (!doctor?.uuid || !isUserLoggedIn()) return;
 
-    if (doctor && doctor.uuid && isLogged) {
-      let newRate = comment.rate;
-      request
-        .getDoctorRate(doctor.uuid)
-        .then((res) => {
-          if (res.doctor_id) {
-            newRate.map((item) => (item.progress = res[item.name]));
-            setComment({
-              ...comment,
-              defaultRate: true,
-              uuid: res.uuid,
-              rate: newRate,
-            });
-          }
-        })
-        .catch(() => {
-          //
-        });
+    request
+      .getRateEligibility(doctor.uuid)
+      .then((res) => setEligible(!!res.data?.eligible))
+      .catch(() => setEligible(false));
+  }, [doctor?.uuid]);
+
+  const handleOpen = () => {
+    if (!isUserLoggedIn()) {
+      alert("warning", "برای ثبت نظر باید ابتدا وارد حساب کاربری شوید.");
+      return;
     }
-  }, []);
+    if (!eligible) {
+      alert(
+        "warning",
+        "فقط کاربرانی که در یک ماه گذشته نزد این پزشک نوبت تایید‌شده داشته‌اند می‌توانند نظر ثبت کنند."
+      );
+      return;
+    }
+    setOpen(true);
+  };
+
+  const handleClose = () => setOpen(false);
 
   return (
     <>

components/doctor/detailDoctor/cards/comments/modal/content/Form.js

@@ -2,62 +2,51 @@ import React, { useState } from "react";
 import Field from "@/app/component/fields/Field";
 import { Button } from "@mui/material";
 import { request } from "@/services/response";
+import { alert } from "@/helper";
 import ArrowLeftD from "@/components/icons/ArrowLeftD";
 
-function Form({
-  doctor,
-  setOpen,
-  comment,
-  loading,
-  changeData,
-  setComment,
-  setLoading,
-}) {
+function Form({ doctor, setOpen, comment, loading, changeData, setComment, setLoading }) {
   const [isError, setIsError] = useState(false);
 
-  const sendReq = () => {
-    if (comment?.detail?.comment) {
-      setLoading(true);
-
-      request
-        .postDoctorComment(comment.detail)
-        .then(() => {
-          let newComment = comment.rate;
-          newComment = {
-            doctor_id: doctor?.id,
-            accuracy_of_diagnosis: newComment[1].progress,
-            doctor_expertise: newComment[4].progress,
-            doctor_behavior: newComment[2].progress,
-            clinic_cleanliness: newComment[3].progress,
-            waiting_time_at_clinic: newComment[0].progress,
-          };
-          setComment({
-            ...comment,
-            detail: {
-              ...comment.detail,
-              comment: "",
-            },
-          });
-
-          request[comment.defaultRate ? "patchDoctorRate" : "postDoctorRate"](
-            newComment,
-            comment.uuid
-          )
-            .then(() => {
-              setLoading(false);
-              setOpen(false);
-            })
-            .catch(() => {
-              setLoading(false);
-              setOpen(false);
-            });
-        })
-        .catch(() => {
-          setLoading(false);
-          setOpen(false);
-        });
+  const handleRatingError = (err) => {
+    const status = err?.response?.status;
+    const code = err?.response?.data?.errors?.[0]?.code;
+    if (status === 401) {
+      alert("warning", "برای ثبت نظر باید ابتدا وارد حساب کاربری شوید.");
+    } else if (status === 403 && code === "ERR_RATING_NOT_ELIGIBLE") {
+      alert(
+        "warning",
+        "فقط کاربرانی که در یک ماه گذشته نزد این پزشک نوبت تایید‌شده داشته‌اند می‌توانند نظر ثبت کنند."
+      );
     } else {
+      alert("error", "خطایی رخ داد! لطفاً دوباره تلاش کنید.");
+    }
+  };
+
+  const sendReq = async () => {
+    const text = comment?.detail?.comment;
+    if (!text) {
       setIsError(true);
+      return;
+    }
+
+    setLoading(true);
+    try {
+      await request.postDoctorComment({ doctor_uuid: doctor.uuid, comment: text });
+
+      const rate = { doctor_uuid: doctor.uuid };
+      comment.rate.forEach((item) => {
+        rate[item.name] = item.progress;
+      });
+      await request.postDoctorRate(rate);
+
+      setComment({ ...comment, detail: { ...comment.detail, comment: "" } });
+      alert("success", "نظر شما ثبت شد و پس از تأیید نمایش داده می‌شود.");
+      setOpen(false);
+    } catch (err) {
+      handleRatingError(err);
+    } finally {
+      setLoading(false);
     }
   };
 
@@ -71,7 +60,7 @@ function Form({
     <div className="flex flex-col gap-[16px] justify-center items-start mt-[24px]">
       <p className="text-[#495057] text-[16px] font-bold">متن نظر</p>
       <Field
-        type="number"
+        type="text"
         error={isError}
         multiline={true}
         handleChange={handleChange}

components/doctor/detailDoctor/cards/comments/modal/content/index.js

@@ -39,7 +39,7 @@ function Content({
     <>
       <div className="flex items-center justify-between w-full">
         <p className="text-[16px] text-[#525252] font-bold">
-          امتیاز شما به دکتر مهران امینی
+          امتیاز شما به {doctor?.name}
         </p>
         <div className="cursor-pointer" onClick={handleClose}>
           <CloseModalD />

components/doctor/detailDoctor/index.js

@@ -5,7 +5,7 @@ import AboutDcotor from "./cards/AboutDcotor";
 import Comments from "./cards/comments";
 import Locations from "./cards/locations";
 
-function DetailDoctor({ doctor, comments }) {
+function DetailDoctor({ doctor, comments, rateAggregate }) {
   return (
     <div className="w-full lg:w-[59%]">
       <div className="hidden lg:flex">
@@ -15,7 +15,11 @@ function DetailDoctor({ doctor, comments }) {
       <Link />
       <AboutDcotor doctor={doctor} />
       <Locations doctor={doctor} />
-      <Comments doctor={doctor} comments={comments} />
+      <Comments
+        doctor={doctor}
+        comments={comments}
+        rateAggregate={rateAggregate}
+      />
     </div>
   );
 }

components/doctor/index.js

@@ -3,7 +3,7 @@ import DetailDoctor from "./detailDoctor";
 import Share from "./detailDoctor/Share";
 import CustomLoading from "@/app/component/loading/Custom";
 
-function DoctorPage({ doctor, comments, slug }) {
+function DoctorPage({ doctor, comments, rateAggregate, slug }) {
   return (
     <div className="pt-[92px] sm:pt-[120px] mt:pt-[148px] lg:pt-[176px] mt-[px] padding-responsive">
       <div className="flex items-center justify-between">
@@ -23,7 +23,11 @@ function DoctorPage({ doctor, comments, slug }) {
         </div>
       </div>
       <div className="flex items-start justify-center gap-6 mt-[30px]">
-        <DetailDoctor doctor={doctor} comments={comments} />
+        <DetailDoctor
+          doctor={doctor}
+          comments={comments}
+          rateAggregate={rateAggregate}
+        />
         <AppointmentList doctor={doctor} doctorSlug={slug} />
       </div>
     </div>