refactor: enhance appointment handling by adding appointmentId state and updating payment process

components/appointment/index.js

@@ -32,6 +32,7 @@ function AppointmentPage({ doctor, disabledDates, matchedCity }) {
   // Appointment slot states
   const [selectedSlot, setSelectedSlot] = useState(null);
   const [selectedDate, setSelectedDate] = useState(null);
+  const [appointmentId, setAppointmentId] = useState(null);
 
   useEffect(() => {
     const fetchUserData = async () => {
@@ -201,6 +202,8 @@ function AppointmentPage({ doctor, disabledDates, matchedCity }) {
       setSelectedSlot={setSelectedSlot}
       selectedDate={selectedDate}
       setSelectedDate={setSelectedDate}
+      appointmentId={appointmentId}
+      setAppointmentId={setAppointmentId}
     />
   );
 }