WIP MMCM

src/stores/mmcm.js

@@ -82,6 +82,7 @@ export const useMMCMStore = defineStore('counter', {
         dateCollect: null,
         methodDelivery: 'Main propre',
         methodCollect: 'Main propre',
+        timeSlot : '09h30-11h00',
     }),
     getters: {
         fullAddress: (state) => (state.street !== null) ? state.street + ' ' + state.zipCode + ' ' + state.city : null,
@@ -89,6 +90,7 @@ export const useMMCMStore = defineStore('counter', {
         deliveryMethodCode: (state) => state.productList.filter(p => p.id === state.idProduct)[0].ref,
         dateDeliveryString: (state) => new Date(state.dateDelivery).toLocaleDateString("fr-FR"),
         dateCollectString: (state) => new Date(state.dateCollect).toLocaleDateString("fr-FR"),
+        displayTimeSlot: (state) => (state.productList.filter(p => p.id === state.idProduct)[0].ref === 'MMCM_EXPRESS') ? 'entre ' +state.timeSlot : 'entre 09h00-17h00',
         minDateForDelivery: (state) => (state.productList.filter(p => p.id === state.idProduct)[0].ref === 'MMCM_EXPRESS') ? date.deliveryExpress : date.deliveryFacteur,
         minDateForCollect: (state) => (state.productList.filter(p => p.id === state.idProduct)[0].ref === 'MMCM_EXPRESS') ? date.collectExpress : date.collectFacteur,
         needPrescriptionDateCollect: (state) => !!(state.productList.filter(p => p.id === state.idProduct)[0].ref === 'MMCM_FACTEUR' && state.withPrescription),
@@ -152,6 +154,9 @@ export const useMMCMStore = defineStore('counter', {
         },
         setIdProduct(id) {
             this.idProduct = id
+        },
+        setTimeSlot(timeSlot) {
+            this.timeSlot = timeSlot
         }
     },
 })

src/views/delivery-option-step-3.vue

@@ -31,7 +31,23 @@
         </div>
       </div>
 
+
     </div>
+
+
+    <div class="col-lg-6"  v-if="store.deliveryMethodCode === 'MMCM_EXPRESS'">
+      <div class="step_title">Créneau horaire :</div>
+
+      <div class="form-check mt-4" v-for="(slot, i) in timeSlotList">
+        <input v-model="timeSlot" class="form-check-input" type="radio" :value="slot" name="time-slot" :id="'time-slot'+i" required>
+        <label class="form-check-label" :for="'time-slot'+i">
+          {{slot}}
+        </label>
+      </div>
+
+
+      </div>
+
   </div>
 
   <div class="row">
@@ -60,7 +76,7 @@ export default {
   setup() {
     const store = useMMCMStore()
 
-    const {dateDelivery, dateCollect, methodDelivery, methodCollect} = storeToRefs(store)
+    const {dateDelivery, dateCollect, methodDelivery, methodCollect, timeSlot} = storeToRefs(store)
 
     let pickerList = []
     if (store.needPrescriptionDateCollect) {
@@ -85,8 +101,11 @@ export default {
       minDate: (store.needPrescriptionDateCollect) ? store.minDateForDelivery : store.minDateForCollect,
     }))
 
+    const timeSlotList = ['09h30-11h00', '11h00-12h30', ' 15h30-17h00', '17h00-18h30']
 
     return {
+      timeSlotList,
+      timeSlot,
       dateDelivery,
       dateCollect,
       fr,

src/views/delivery-option-summary.vue

@@ -30,10 +30,10 @@
     <div class="mb-4" v-if="store.withPrescription">
       <i class="fa-solid fa-calendar-days fa-fw text-primary me-2"></i><strong>Date de collecte
       de l'ordonnance
-      : </strong>{{ (store.dateCollect) ? store.dateCollectString : store.dateDeliveryString }}
+      : </strong>{{ (store.dateCollect) ? store.dateCollectString : store.dateDeliveryString }} {{store.displayTimeSlot}}
     </div>
     <div class="mb-4"><i class="fa-solid fa-calendar-days fa-fw text-primary me-2"></i><strong>Date de livraison des
-      medicaments : </strong>{{ store.dateDeliveryString }}
+      medicaments : </strong>{{ store.dateDeliveryString }}  {{store.displayTimeSlot}}
     </div>
 
   </div>