refactor: update appointment components to fetch and handle doctor data and disabled dates

components/appointment/Container.js

@@ -18,9 +18,10 @@ function Container({
   matchedCity,
   isForAnother,
   setIsForAnother,
+  disabledDates,
 }) {
   const elements = [
-    <Date doctor={doctor} setStep={setStep} />,
+    <Date doctor={doctor} setStep={setStep} disabledDates={disabledDates} />,
     // <LogInPage setIsSendMsg={false} setStep={setStep} />,
     // <VerificationPage setIsSendMsg={false} link={false} setStep={setStep} />,
     <Detail

components/appointment/date/Time/SelectDatePicker.js

@@ -1,7 +1,7 @@
 import DatePicker from "@/app/component/date/datePicker";
 
-function SelectDatePicker({ setDate }) {
-  return <DatePicker setDate={setDate} />;
+function SelectDatePicker({ setDate, disabledDates }) {
+  return <DatePicker setDate={setDate} disabledDates={disabledDates} />;
 }
 
 export default SelectDatePicker;

components/appointment/date/Time/index.js

@@ -1,12 +1,12 @@
 import SelectDatePicker from "./SelectDatePicker";
 
-function Time({ isStep, setDate }) {
+function Time({ isStep, setDate, disabledDates }) {
   return (
     <div className="flex relative mt-[24px] flex-col items-start gap-[19px] justify-start">
       <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
         1. انتخاب روز
       </p>
-      <SelectDatePicker setDate={setDate} />
+      <SelectDatePicker setDate={setDate} disabledDates={disabledDates} />
       {!isStep && (
         <div className="absolute left-0 top-0 w-full h-full bg-[rgba(255,255,255,0.84)]"></div>
       )}

components/appointment/date/index.js

@@ -2,7 +2,7 @@ import { useState } from "react";
 import Hour from "./hour";
 import Time from "./Time";
 
-function Date({ doctor, setStep }) {
+function Date({ doctor, setStep, disabledDates }) {
   const [locateVisit, setLocateVisit] = useState(true);
   const [date, setDate] = useState();
 
@@ -16,6 +16,7 @@ function Date({ doctor, setStep }) {
           setDate={setDate}
           locateVisit={locateVisit}
           isStep={doctor?.multiwork ? locateVisit : true}
+          disabledDates={disabledDates}
         />
         <Hour
           isStep={doctor?.multiwork ? locateVisit : true}

components/appointment/index.js

@@ -1,7 +1,6 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import doctors from "@/data/doctors.json";
 import { request } from "@/services/response";
 import Cookies from "js-cookie";
 import Container from "./Container";
@@ -13,9 +12,7 @@ const defaultData = {
   basic_insurance: { value: "", isEdit: false },
 };
 
-function AppointmentPage({ slug, matchedCity }) {
-  const doctor = doctors.find((item) => item.id === +slug);
-
+function AppointmentPage({ doctor, disabledDates, matchedCity }) {
   const [step, setStep] = useState(0);
   const [isForAnother, setIsForAnother] = useState(false);
 
@@ -78,6 +75,7 @@ function AppointmentPage({ slug, matchedCity }) {
       matchedCity={matchedCity}
       isForAnother={isForAnother}
       setIsForAnother={setIsForAnother}
+      disabledDates={disabledDates}
     />
   );
 }

components/appointment/information/Detail.js

@@ -6,6 +6,9 @@ import TickCircleOrange from "@/components/icons/TickCircleOrange";
 import { Button } from "@mui/material";
 
 function Detail({ doctor, step, setStep }) {
+  // دریافت اولین آدرس از لیست
+  const firstAddress = doctor?.address?.[0]?.address || doctor?.location || "آدرس موجود نیست";
+
   return (
     <div className="">
       <ul className="flex flex-col items-start justify-start gap-[24px]">
@@ -14,7 +17,7 @@ function Detail({ doctor, step, setStep }) {
             <LocationA />
           </div>
           <p className="text-[#616161] text-[14px] md:text-[16px] font-normal">
-            آدرس: {doctor?.location}
+            آدرس: {firstAddress}
           </p>
         </li>
         <li className="flex items-center justify-between w-full">

components/appointment/information/Head.js

@@ -1,6 +1,14 @@
 import Image from "next/image";
 
 function Head({ doctor }) {
+  // تبدیل img array به string
+  const doctorImage = doctor?.img?.[0]?.url || "/default-doctor.jpg";
+
+  // تبدیل expertise array به string
+  const expertiseText = doctor?.expertise
+    ?.map((exp) => exp.name)
+    .join("، ") || "";
+
   return (
     <div
       className="
@@ -16,7 +24,7 @@ function Head({ doctor }) {
                     h-[40px] sm:h-[58px] md:h-[77px] lg:h-[95px]
                 "
         alt="profile doctor"
-        src={doctor?.img}
+        src={doctorImage}
         height={95}
         width={95}
       />
@@ -25,7 +33,7 @@ function Head({ doctor }) {
           {doctor?.name}
         </p>
         <p className="text-[#616161] text-[14px] md:text-[16px] font-medium">
-          تخصص: {doctor?.expertise}
+          تخصص: {expertiseText}
         </p>
       </div>
     </div>

components/appointment/location/Address.js

@@ -5,7 +5,7 @@ function Address({ doctor }) {
         <li key={idx}>
           <div className="flex py-[12px] text-[#616161] text-[14px] items-start justify-start">
             <p className="font-bold min-w-[115px]">{`${item.name}: `}</p>
-            <p className="font-normal">{item.location}</p>
+            <p className="font-normal">{item.address || item.location}</p>
           </div>
           {doctor.address.length > idx + 1 && (
             <span className="bg-[#EFEFEF] block h-px w-full"></span>

components/appointment/location/Head.js

@@ -1,6 +1,14 @@
 import Image from "next/image";
 
 function Head({ doctor }) {
+  // تبدیل img array به string
+  const doctorImage = doctor?.img?.[0]?.url || "/default-doctor.jpg";
+
+  // تبدیل expertise array به string
+  const expertiseText = doctor?.expertise
+    ?.map((exp) => exp.name)
+    .join("، ") || "";
+
   return (
     <div className="flex items-center justify-start gap-[12px]">
       <Image
@@ -8,7 +16,7 @@ function Head({ doctor }) {
                     w-[48px] sm:w-[51px] md:w-[54px] lg:w-[56px]
                     h-[48px] sm:h-[51px] md:h-[54px] lg:h-[56px]
                 "
-        src={doctor?.img}
+        src={doctorImage}
         alt="profile"
         height={56}
         width={56}
@@ -18,7 +26,7 @@ function Head({ doctor }) {
           {doctor?.name}
         </h2>
         <h3 className="text-[#525252] text-[12px] md:text-[14px] font-medium">
-          تخصص: {doctor?.expertise}
+          تخصص: {expertiseText}
         </h3>
       </div>
     </div>