WIP MMCM

src/components/Wizard.vue

@@ -2,8 +2,9 @@
   <ol class="step-indicator">
     <li v-for="step in stepList" :class="(step.stepNumber<currentStep) ?  'complete' : ''">
       <router-link :to="step.path">
-      <div class="step"><i :class="step.class"></i></div>
-      <div class="caption d-none d-sm-block">Etape <span>{{step.stepNumber}}</span>: <span>{{ step.name }}</span></div>
+        <div class="step"><i :class="step.class"></i></div>
+        <div class="caption d-none d-sm-block">Etape <span>{{ step.stepNumber }}</span>: <span>{{ step.name }}</span>
+        </div>
       </router-link>
     </li>
   </ol>
@@ -12,7 +13,7 @@
 <script>
 import {useMMCMStore} from "../stores/mmcm";
 import {ref, computed} from 'vue'
-import { useRouter, useRoute } from 'vue-router'
+import {useRouter, useRoute} from 'vue-router'
 
 export default {
   setup() {
@@ -21,31 +22,31 @@ export default {
         class: 'fa-regular fa-location-dot fa-fw',
         name: 'Mon adresse',
         path: '/address-check',
-        stepNumber : 1
+        stepNumber: 1
       },
       {
         class: 'fa-solid fa-file-medical fa-fw',
         name: 'Mon ordonnance',
         path: '/delivery-option-step-1',
-        stepNumber : 2
+        stepNumber: 2
       },
       {
         class: 'fa-solid fa-truck fa-fw',
         name: 'Ma livraison',
         path: '/delivery-option-step-2',
-        stepNumber : 3
+        stepNumber: 3
       },
       {
         class: 'fa-solid fa-calendar-days fa-fw',
         name: 'Date',
         path: '/delivery-option-step-3',
-        stepNumber : 4
+        stepNumber: 4
       },
       {
         class: 'fa-solid fa-cart-shopping fa-fw',
         name: 'Ajout au panier',
         path: '/delivery-option-summary',
-        stepNumber : 5
+        stepNumber: 5
       },
 
     ]
@@ -53,7 +54,7 @@ export default {
     const router = useRouter()
     const route = useRoute()
 
-    const currentStep = computed(() => stepList.filter(step=>step.path === route.path)[0].stepNumber)
+    const currentStep = computed(() => stepList.filter(step => step.path === route.path).length > 0 ? stepList.filter(step => step.path === route.path)[0].stepNumber : 6)
 
     return {
       stepList,
@@ -119,8 +120,8 @@ $wizard-step-font-size: 18px !default;
       }
     }
 
-    a{
-      text-decoration:none
+    a {
+      text-decoration: none
     }
 
     .router-link-active {

src/router/index.js

@@ -33,6 +33,11 @@ const routes = [
         name: 'delivery-option-summary',
         component: () => import('/src/views/delivery-option-summary.vue'),
     },
+    {
+        path: '/final-step',
+        name: 'final-step',
+        component: () => import('/src/views/final-step.vue'),
+    },
 
 ]
 const router = createRouter({

src/views/delivery-option-summary.vue

@@ -8,33 +8,43 @@
       <span v-else>Non</span>
     </div>
     <div class="mb-2"><strong>Date de livraison des medicaments : </strong>{{ store.dateDeliveryString }}</div>
-    <button class="btn btn-primary" @click="addToCart"><i class="fa-regular fa-circle-check fa-fw"></i> Ajouter au panier</button>
+    <button class="btn btn-primary" @click="addToCart">
+
+      <i v-if="suspens" class="fa-solid fa-circle-notch fa-spin fa-fw"></i>
+      <i v-else class="fa-regular fa-circle-check fa-fw"></i>
+      Ajouter au panier
+    </button>
   </div>
 </template>
 
 <script>
 import {useMMCMStore} from '../stores/mmcm.js'
+import {ref} from "vue";
 
 
 export default {
   setup() {
+    const suspens = ref(false)
     const store = useMMCMStore()
     return {
+      suspens,
       store
     }
   },
   name: "delivery-option-summary",
   methods: {
     addToCart: async function (idProduct) {
+      this.suspens = true
       const urlApi = '/php/api/v3/mmcm.php?EXEC=addToCart&ID_PRODUCT=' + this.store.idProduct
           + '&with_prescription=' + this.store.widthPrescription
           + '&date_delivery=' + this.store.dateDelivery
       ;
 
-
       const result = await fetch(urlApi)
           .then(response => {
             if (response.ok) {
+              this.suspens = false
+              this.$router.push({path : '/final-step'})
               return response.json();
             }
           })

src/views/final-step.vue

@@ -0,0 +1,22 @@
+<template>
+  <h2 class="mb-4">Votre ordonnance livré à domicile a été ajoutée au panier</h2>
+
+  <button class="btn btn-secondary me-4" @click="exitVueApp('/')">Continuer mes achats</button>
+  <button class="btn btn-primary" @click="exitVueApp('/cart/p/AFF_COMM/0/0/')">Finaliser ma commande</button>
+
+</template>
+
+<script>
+export default {
+  name: "final-step",
+  methods: {
+    exitVueApp(url) {
+      window.location = 'https://para-php7-dev.parapharmacie-et-medicament.com' + url
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>