WIP MMCM

src/stores/mmcm.js

@@ -19,7 +19,6 @@ let date = {collectExpress: null, deliveryExpress: null, collectFacteur: null, d
 const currentDay = format(today, 'e')
 //const isWeekEnd = (currentDay === '7' || currentDay === '8')
 
-
 if (format(today, 'HH') > 16) {
     date.collectExpress = date.deliveryExpress = tomorrow
 } else {
@@ -43,7 +42,7 @@ if (currentDay === '5') // jeudi
         days: 4
     })
 
-    if (format(today, 'HH') > 17) {
+    if (format(today, 'HH') > 16) {
         date.collectExpress = date.deliveryExpress = add(today, {
             days: 3
         })
@@ -66,7 +65,6 @@ if (currentDay === '5') // jeudi
     date.collectExpress = date.deliveryExpress = tomorrow
 }
 
-
 const timestampConverter = (digit13) => digit13 / 1000
 
 export const useMMCMStore = defineStore('counter', {
@@ -82,7 +80,7 @@ export const useMMCMStore = defineStore('counter', {
         dateCollect: null,
         methodDelivery: 'Main propre',
         methodCollect: 'Main propre',
-        timeSlot : '09h30-11h00',
+        timeSlot : null,
     }),
     getters: {
         fullAddress: (state) => (state.street !== null) ? state.street + ' ' + state.zipCode + ' ' + state.city : null,
@@ -90,7 +88,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',
+        displayTimeSlot: (state) => (state.productList.filter(p => p.id === state.idProduct)[0].ref === 'MMCM_EXPRESS') ? state.timeSlot : '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),
@@ -157,6 +155,9 @@ export const useMMCMStore = defineStore('counter', {
         },
         setTimeSlot(timeSlot) {
             this.timeSlot = timeSlot
+        },
+        setDateCollect(dateCollect){
+            this.dateCollect = dateCollect
         }
     },
 })

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

@@ -18,15 +18,17 @@
 
       <div v-if="store.deliveryMethodCode === 'MMCM_FACTEUR'">
         <div class="form-check mt-4">
-          <input v-model="picker.method" class="form-check-input" type="radio" value="Main propre" :name="'method'+picker.id" :id="'method'+picker.id">
+          <input v-model="picker.method" class="form-check-input" type="radio" value="Main propre"
+                 :name="'method'+picker.id" :id="'method'+picker.id">
           <label class="form-check-label" :for="'method'+picker.id">
-            {{picker.methodLabel}} en main propre
+            {{ picker.methodLabel }} en main propre
           </label>
         </div>
         <div class="form-check">
-          <input v-model="picker.method" class="form-check-input" type="radio" value="Boites aux lettres" :name="'method'+picker.id" :id="'method'+picker.id">
+          <input v-model="picker.method" class="form-check-input" type="radio" value="Boites aux lettres"
+                 :name="'method'+picker.id" :id="'method'+picker.id">
           <label class="form-check-label" :for="'method'+picker.id">
-           {{picker.methodLabel}} en boîte aux lettres <span class="text-danger">*</span>
+            {{ picker.methodLabel }} en boîte aux lettres <span class="text-danger">*</span>
           </label>
         </div>
       </div>
@@ -38,12 +40,19 @@
     <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">
+      <div class="form-check mt-4" v-for="(slot, i) in timeSlotList" v-if="timeSlotList.length >0">
-        <input v-model="timeSlot" class="form-check-input" type="radio" :value="slot" name="time-slot" :id="'time-slot'+i" required>
+        <input v-model="timeSlot" @click="timeSlotError = false" class="form-check-input" type="radio" :value="slot.label"
+               name="time-slot" :id="'time-slot'+i" required>
         <label class="form-check-label" :for="'time-slot'+i">
-          {{slot}}
+          {{ slot.label }}
         </label>
       </div>
+      <div v-else class="alert alert-warning">Nous sommes désolé il n'y a plus de créneau disponible pour cette date</div>
+
+      <div v-if="timeSlotError" class="invalid-feedback d-block text-start">
+        Merci de renseigner la creneau horaire
+      </div>
+
 
 
     </div>
@@ -58,7 +67,8 @@
   </div>
   <div v-if="store.deliveryMethodCode === 'MMCM_FACTEUR'">
     <small>
-      <br/><br/><span class="text-danger">*</span> L'utilisation d'une boîte aux lettres normalisée est idéale pour ce service.<br/>
+      <br/><br/><span class="text-danger">*</span> L'utilisation d'une boîte aux lettres normalisée est idéale pour ce
+      service.<br/>
       Dimensions d'une boîte aux lettres normalisée : hauteur : 26 cm, largeur : 26 cm, profondeur : 34 cm.<br/>
       Si vous avez déjà reçu un colis dans votre boîte aux lettres, c'est sûr, le facteur pourra l'utiliser.
     </small>
@@ -84,8 +94,8 @@ export default {
         id: 1,
         title: 'Date de collecte de l\'ordonnance :',
         vModel: dateCollect,
-        method : methodCollect,
+        method: methodCollect,
-        methodLabel : 'Collecte des documents de santé',
+        methodLabel: 'Collecte des documents de santé',
         error: false,
         minDate: store.minDateForCollect,
       }))
@@ -96,16 +106,17 @@ export default {
       title: 'Date de livraison des médicaments :',
       vModel: dateDelivery,
       error: false,
-      method : methodDelivery,
+      method: methodDelivery,
-      methodLabel : 'Livraison',
+      methodLabel: 'Livraison',
       minDate: (store.needPrescriptionDateCollect) ? store.minDateForDelivery : store.minDateForCollect,
     }))
 
-    const timeSlotList = ['09h30-11h00', '11h00-12h30', ' 15h30-17h00', '17h00-18h30']
+
+    const timeSlotError = ref(false)
 
     return {
-      timeSlotList,
       timeSlot,
+      timeSlotError,
       dateDelivery,
       dateCollect,
       fr,
@@ -114,6 +125,42 @@ export default {
     }
   },
   name: "delivery-option-step-3",
+  computed: {
+    timeSlotList: function () {
+
+      const today = new Date();
+
+      let checkDate
+
+      if (this.dateDelivery === null) {
+        checkDate = new Date(this.store.minDateForDelivery)
+      }
+      else{
+        checkDate = new Date(this.dateDelivery)
+      }
+
+      const timeLimit = [{
+        label: '09h30-11h00',
+        start: new Date(checkDate.getFullYear(), checkDate.getMonth(), checkDate.getDate(), 9, 30, 0),
+      },
+        {
+          label: '11h00-12h30',
+          start:  new Date(checkDate.getFullYear(), checkDate.getMonth(), checkDate.getDate(), 11, 0, 0),
+        },
+        {
+          label: '15h30-17h00',
+          start:  new Date(checkDate.getFullYear(), checkDate.getMonth(), checkDate.getDate(), 15, 30, 0),
+        },
+        {
+          label: '17h00-18h30',
+          start:  new Date(checkDate.getFullYear(), checkDate.getMonth(), checkDate.getDate(), 17, 0, 0),
+        },
+      ]
+
+      return timeLimit.filter(d=>d.start.getTime() > today.getTime())
+
+    }
+  },
   methods: {
     gotToNextStep: function () {
 
@@ -121,12 +168,21 @@ export default {
         p.error = p.vModel === null;
       })
 
-      if (this.pickerList.filter(p => p.error).length === 0) {
+      if (this.store.deliveryMethodCode === 'MMCM_EXPRESS') {
+        this.timeSlotError = this.timeSlot === null;
+        this.store.setDateCollect(null)
+      } else {
+        this.timeSlotError = false;
+        this.store.setTimeSlot(null)
+      }
+
+      if (this.pickerList.filter(p => p.error).length === 0 && this.timeSlotError === false) {
         this.$router.push({path: '/delivery-option-summary'});
       }
     },
     pickerUpdate(picker) {
       picker.error = false
+      this.timeSlot = null
 
       if (this.pickerList.length > 1 && picker.id === 1) {
 

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 }} {{store.displayTimeSlot}}
+      : </strong>{{ (store.dateCollect) ? store.dateCollectString : store.dateDeliveryString }} entre {{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 }}  {{store.displayTimeSlot}}
+      medicaments : </strong>{{ store.dateDeliveryString }} entre {{store.displayTimeSlot}}
     </div>
 
   </div>
@@ -66,6 +66,7 @@ export default {
           + '&with_prescription=' + this.store.withPrescription
           + '&date_delivery=' + this.store.dateDeliveryTimestampInSecond
           + '&method_delivery=' + this.store.methodDelivery
+          + '&time_slot=' + this.store.displayTimeSlot
           + '&street=' + encodeURI(this.store.street)
           + '&zip_code=' + this.store.zipCode
           + '&city=' + this.store.city
@@ -78,7 +79,7 @@ export default {
       }
 
       if (import.meta.env.DEV) {
-        urlApi += '&ID_SESSION=5GGl6BtF';
+        urlApi += '&ID_SESSION=YN2nLi3m';
         console.log(urlApi)
       }