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

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>