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

components/appointment/Container.js

@@ -1,4 +1,5 @@
 import Date from "./date";
+import ServiceSelect from "./service";
 
 // Components
 import Content from "./Content";
@@ -38,15 +39,34 @@ function Container({
   setAppointmentId,
   appointmentExpiresAt,
   setAppointmentExpiresAt,
+  // Service-based booking
+  bookingMode,
+  bookingServices,
+  selectedServiceUuids,
+  setSelectedServiceUuids,
 }) {
+  const serviceMode = bookingMode === "service";
+  const dateStep =
+    serviceMode && selectedServiceUuids.length === 0 ? (
+      <ServiceSelect
+        services={bookingServices}
+        onContinue={(uuids) => setSelectedServiceUuids(uuids)}
+      />
+    ) : (
+      <Date
+        doctor={doctor}
+        setStep={setStep}
+        disabledDates={disabledDates}
+        setSelectedSlot={setSelectedSlot}
+        setSelectedDate={setSelectedDate}
+        serviceMode={serviceMode}
+        selectedServiceUuids={selectedServiceUuids}
+        onChangeService={() => setSelectedServiceUuids([])}
+      />
+    );
+
   const elements = [
-    <Date
-      doctor={doctor}
-      setStep={setStep}
-      disabledDates={disabledDates}
-      setSelectedSlot={setSelectedSlot}
-      setSelectedDate={setSelectedDate}
-    />,
+    dateStep,
     <LogInPage
       num={num}
       setNum={setNum}
@@ -76,6 +96,7 @@ function Container({
       selectedDate={selectedDate}
       setAppointmentId={setAppointmentId}
       setAppointmentExpiresAt={setAppointmentExpiresAt}
+      selectedServiceUuids={selectedServiceUuids}
     />,
     <Paying
       setStep={setStep}