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

components/appointment/date/hour/index.js

@@ -1,6 +1,6 @@
 import DateTime from "@/app/component/date/dateTime";
 
-function Hour({ doctor, setStep, date, locateVisit, isStep }) {
+function Hour({ doctor, setStep, date, locateVisit, isStep, setSelectedSlot, setSelectedDate }) {
   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">
@@ -11,6 +11,8 @@ function Hour({ doctor, setStep, date, locateVisit, isStep }) {
         doctor={doctor}
         setStep={setStep}
         locateVisit={locateVisit}
+        setSelectedSlot={setSelectedSlot}
+        setSelectedDate={setSelectedDate}
       />
       {!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, disabledDates }) {
+function Date({ doctor, setStep, disabledDates, setSelectedSlot, setSelectedDate }) {
   const [locateVisit, setLocateVisit] = useState(true);
   const [date, setDate] = useState();
 
@@ -25,6 +25,8 @@ function Date({ doctor, setStep, disabledDates }) {
           setStep={setStep}
           doctor={doctor}
           date={date}
+          setSelectedSlot={setSelectedSlot}
+          setSelectedDate={setSelectedDate}
         />
       </div>
     </div>