refactor: enhance appointment flow by adding selected slot and date management across components

components/appointment/information/Detail.js

@@ -1,13 +1,44 @@
+"use client";
+
 import ArrowLeftOrangeA from "@/components/icons/ArrowLeftOrangeA";
 import CalendarA from "@/components/icons/CalendarA";
 import ClockA from "@/components/icons/ClockA";
 import LocationA from "@/components/icons/LocationA";
 import TickCircleOrange from "@/components/icons/TickCircleOrange";
 import { Button } from "@mui/material";
+import moment from "moment-jalaali";
+import { useEffect, useState } from "react";
+import { request } from "@/services/response";
 
-function Detail({ doctor, step, setStep }) {
-  // دریافت اولین آدرس از لیست
-  const firstAddress = doctor?.address?.[0]?.address || doctor?.location || "آدرس موجود نیست";
+function Detail({ doctor, step, setStep, selectedSlot, selectedDate }) {
+  const [address, setAddress] = useState("آدرس موجود نیست");
+
+  // دریافت آدرس بر اساس location_id از اسلات انتخاب شده
+  useEffect(() => {
+    if (selectedSlot?.location_id) {
+      request
+        .getDoctorAddress(selectedSlot.location_id)
+        .then((res) => {
+          if (res?.address) {
+            setAddress(res.address);
+          }
+        })
+        .catch((err) => {
+          console.error("Error fetching address:", err);
+        });
+    } else if (doctor?.address?.[0]?.address) {
+      // اگر اسلات location_id نداشت، از آدرس دکتر استفاده کن
+      setAddress(doctor.address[0].address);
+    }
+  }, [selectedSlot, doctor]);
+
+  // فرمت کردن تاریخ به شمسی
+  const formattedDate = selectedDate
+    ? moment.unix(selectedDate).locale('fa').format('jDD jMMMM jYYYY')
+    : "تاریخ انتخاب نشده";
+
+  // فرمت کردن زمان
+  const formattedTime = selectedSlot?.time || "زمان انتخاب نشده";
 
   return (
     <div className="">
@@ -17,7 +48,7 @@ function Detail({ doctor, step, setStep }) {
             <LocationA />
           </div>
           <p className="text-[#616161] text-[14px] md:text-[16px] font-normal">
-            آدرس: {firstAddress}
+            آدرس: {address}
           </p>
         </li>
         <li className="flex items-center justify-between w-full">
@@ -30,7 +61,7 @@ function Detail({ doctor, step, setStep }) {
                 تاریخ نوبت:{" "}
               </p>
               <p className="text-[#2F2F2F] text-[14px] md:text-[16px] font-medium mr-1">
-                13 خرداد 1403
+                {formattedDate}
               </p>
             </div>
           </div>
@@ -59,7 +90,7 @@ function Detail({ doctor, step, setStep }) {
                 زمان نوبت:{" "}
               </p>
               <p className="text-[#2F2F2F] text-[14px] md:text-[16px] font-medium mr-1">
-                ساعت 17:20
+                ساعت {formattedTime}
               </p>
             </div>
           </div>
@@ -85,7 +116,7 @@ function Detail({ doctor, step, setStep }) {
                 w-full h-px bg-[#D7D7D7] block"
       ></span>
       <ul className="flex flex-col items-start justify-start gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px]">
-        <li className="flex items-center justify-start gap-[4px] md:gap-[6px] lg:gap-[8px]">
+        {/* <li className="flex items-center justify-start gap-[4px] md:gap-[6px] lg:gap-[8px]">
           <div
             className="min-w-[16px] sm:min-w-[19px] md:min-w-[21px] lg:min-w-[24px] min-h-[16px] sm:min-h-[19px] md:min-h-[21px] lg:min-h-[24px]
                         w-[16px] sm:w-[19px] md:w-[21px] lg:w-[24px] h-[16px] sm:h-[19px] md:h-[21px] lg:h-[24px]"
@@ -93,10 +124,10 @@ function Detail({ doctor, step, setStep }) {
             <TickCircleOrange />
           </div>
           <p className="text-[#616161] text-[12px] md:text-[14px] lg:text-[16px] font-normal">
-            فقط در صورت لغو نوبت تا 5 ساعت قبل از زمان ویزیت، امکان استرداد وجه
+            فقط در صورت لغو نوبت تا 5 ساعت قبل از زمان ویزیت، امکان استرداد وجه
             ممکن می باشد.
           </p>
-        </li>
+        </li> */}
         <li className="flex items-center justify-start gap-[4px] md:gap-[6px] lg:gap-[8px]">
           <div
             className="min-w-[16px] sm:min-w-[19px] md:min-w-[21px] lg:min-w-[24px] min-h-[16px] sm:min-h-[19px] md:min-h-[21px] lg:min-h-[24px]