feat(appointment): implement service-based booking flow with service selection and slot adaptation

components/appointment/date/hour/index.js

@@ -1,6 +1,6 @@
 import DateTime from "@/app/component/date/dateTime";
 
-function Hour({ doctor, setStep, date, locateVisit, isStep, setSelectedSlot, setSelectedDate }) {
+function Hour({ doctor, setStep, date, locateVisit, isStep, setSelectedSlot, setSelectedDate, serviceMode = false, selectedServiceUuids = [] }) {
   return (
     <div className="flex relative mt-[24px] flex-col items-start gap-[12px] justify-start">
       <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
@@ -13,6 +13,8 @@ function Hour({ doctor, setStep, date, locateVisit, isStep, setSelectedSlot, set
         locateVisit={locateVisit}
         setSelectedSlot={setSelectedSlot}
         setSelectedDate={setSelectedDate}
+        serviceMode={serviceMode}
+        selectedServiceUuids={selectedServiceUuids}
       />
       {!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,16 @@ import { useState } from "react";
 import Hour from "./hour";
 import Time from "./Time";
 
-function Date({ doctor, setStep, disabledDates, setSelectedSlot, setSelectedDate }) {
+function Date({
+  doctor,
+  setStep,
+  disabledDates,
+  setSelectedSlot,
+  setSelectedDate,
+  serviceMode = false,
+  selectedServiceUuids = [],
+  onChangeService,
+}) {
   const [locateVisit, setLocateVisit] = useState(true);
   const [date, setDate] = useState();
 
@@ -11,6 +20,15 @@ function Date({ doctor, setStep, disabledDates, setSelectedSlot, setSelectedDate
       <div
         className="p-0 lg:p-[24px] rounded-[8px] border border-solid border-transparent lg:border-[#EFEFEF] bg-transparent lg:bg-[#FFF]"
       >
+        {serviceMode && onChangeService && (
+          <button
+            type="button"
+            onClick={onChangeService}
+            className="mb-3 text-[13px] text-[#5559CE] hover:underline"
+          >
+            ← تغییر سرویس
+          </button>
+        )}
         <Time
           setDate={setDate}
           locateVisit={locateVisit}
@@ -26,6 +44,8 @@ function Date({ doctor, setStep, disabledDates, setSelectedSlot, setSelectedDate
           date={date}
           setSelectedSlot={setSelectedSlot}
           setSelectedDate={setSelectedDate}
+          serviceMode={serviceMode}
+          selectedServiceUuids={selectedServiceUuids}
         />
       </div>
     </div>