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

components/appointment/detail/SubmitData.js

@@ -5,7 +5,7 @@ import ArrowLeftB from "@/components/icons/ArrowLeftB";
 import { request } from "@/services/response";
 import Cookies from "js-cookie";
 
-function SubmitData({ setStep, data, prevData, setErrors, doctor, selectedSlot, selectedDate }) {
+function SubmitData({ setStep, data, prevData, setErrors, doctor, selectedSlot, selectedDate, setAppointmentId }) {
   const [loading, setLoading] = useState(false);
   const newStep = () => setStep((prev) => prev + 1);
 
@@ -113,7 +113,10 @@ function SubmitData({ setStep, data, prevData, setErrors, doctor, selectedSlot,
           info: ""
         };
 
-        await request.postAppointment(appointmentPayload);
+        const appointmentResponse = await request.postAppointment(appointmentPayload);
+        if (appointmentResponse?.id) {
+          setAppointmentId(appointmentResponse.id);
+        }
       }
 
       setLoading(false);

components/appointment/detail/index.js

@@ -18,6 +18,7 @@ function Detail({
   doctor,
   selectedSlot,
   selectedDate,
+  setAppointmentId,
 }) {
   const [insurance, setInsurance] = useState();
   const [supplementaryInsurance, setSupplementaryInsurance] = useState();
@@ -93,14 +94,15 @@ function Detail({
             </p>
           </Button>
         )}
-        <SubmitData 
-          setStep={setStep} 
-          data={data} 
-          prevData={prevData} 
+        <SubmitData
+          setStep={setStep}
+          data={data}
+          prevData={prevData}
           setErrors={setErrors}
           doctor={doctor}
           selectedSlot={selectedSlot}
           selectedDate={selectedDate}
+          setAppointmentId={setAppointmentId}
         />
       </div>
     </div>