WIP MMCM

src/components/FlexCard.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="card col-lg-6 col-sm-12 mx-2 my-2">
+    <div class="card-header fw-bold">
+      <slot name="card-image"></slot>
+      {{ card.name }}
+    </div>
+    <div class="card-body text-start d-flex flex-column align-items-start">
+      <div class="mb-auto">
+        <slot name="card-body"></slot>
+      </div>
+      <div class="align-self-center">
+        <slot name="btn-card"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+export default {
+  name: "FlexCard",
+  props: {
+    card: {}
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/stores/mmcm.js

@@ -70,6 +70,7 @@ const timestampConverter = (digit13) => digit13 / 1000
 
 export const useMMCMStore = defineStore('counter', {
     state: () => ({
+        idSession : '',
         street: '',
         zipCode: '',
         city: '',
@@ -115,6 +116,9 @@ export const useMMCMStore = defineStore('counter', {
 
     },
     actions: {
+        setIdSession(idSession) {
+            this.idSession = idSession
+        },
         setStreet(street) {
             this.street = street
         },

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

@@ -1,57 +1,56 @@
 <template>
   <div class="step_title"> Avec ou sans ordonnance ?</div>
-  <div class="row">
-    <div class="col-lg-6">
-      <div class="card">
-        <div class="card-header fw-bold">Avec ordonnance (mon pharmacien n'a pas mon ordonnance) :</div>
-        <div class="card-body text-start">
-          <ol>
-            <li>Le livreur vient chercher l’original de mon ordonnance, carte vitale et carte mutuelle (si j’en ai
-              une) dans une enveloppe fermée.
-            </li>
-            <li>Le livreur apportera l’enveloppe fermée contenant mes documents de santé directement à mon
-              pharmacien.
-            </li>
-            <li>Mon pharmacien remet mes médicaments et mes documents au livreur.</li>
-            <li>Le livreur me livre à mon adresse mes médicaments et mes documents originaux.</li>
-          </ol>
-          <div class="text-center">
-            <button class="btn btn-primary" @click="goNextStep(true)"><i class="fa-regular fa-circle-check fa-fw"></i>
-              Choisir
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="col-lg-6">
-      <div class="card">
-        <div class="card-header fw-bold">Sans ordonnance (mon pharmacien a déjà mon ordonnance)</div>
-        <div class="card-body text-start">
-          <ol>
-            <li>Le livreur se rend chez mon pharmacien pour la collecte de mes médicaments.</li>
-            <li>Le livreur me livre à l’adresse renseignée.</li>
-          </ol>
-          <div class="text-center">
-            <button class="btn btn-primary" @click="goNextStep(false)"><i class="fa-regular fa-circle-check fa-fw"></i> Choisir
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
 
+  <div class="d-flex flex-lg-row flex-column align-items-stretch">
+    <FlexCard v-for="(card, i) in cards" :card="card">
+
+      <template v-slot:card-body>
+        <ol>
+          <li v-for="step in card.steps">{{ step }}</li>
+        </ol>
+      </template>
+
+      <template v-slot:btn-card>
+        <button class="btn btn-primary" @click="goNextStep(card.validity)"><i
+            class="fa-regular fa-circle-check fa-fw"></i>
+          Choisir
+        </button>
+      </template>
+
+    </FlexCard>
+  </div>
 
 </template>
 
 <script>
 import {useMMCMStore} from '../stores/mmcm.js'
+import FlexCard from "../components/FlexCard.vue";
 
 
 export default {
+  components: {FlexCard},
   setup() {
     const store = useMMCMStore()
+    const cards = [{
+      name: 'Avec ordonnance (mon pharmacien n\'a pas mon ordonnance) :',
+      validity: true,
+      steps: ['Le livreur vient chercher l’original de mon ordonnance, carte vitale et carte mutuelle (si j’en ai une) dans une enveloppe fermée',
+        'Le livreur apportera l’enveloppe fermée contenant mes documents de santé directement à mon pharmacien.',
+        'Mon pharmacien remet mes médicaments et mes documents au livreur.',
+        'Le livreur me livre à mon adresse mes médicaments et mes documents originaux.'
+      ]
+    },
+      {
+        name: 'Sans ordonnance (mon pharmacien a déjà mon ordonnance) :',
+        validity: false,
+        steps: ['Le livreur se rend chez mon pharmacien pour la collecte de mes médicaments.',
+          'Le livreur me livre à l’adresse renseignée.',
+        ]
+      }
+    ]
     return {
-      store
+      store,
+      cards
     }
   },
   name: "delivery-option-step-1",

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

@@ -1,21 +1,34 @@
 <template>
   <div class="step_title">Mode de livraison</div>
-  <div class="row">
-    <div class="col-lg-6" v-for="(product, i) in store.productList">
-      <div class="card">
-        <div class="card-header fw-bold"><img :alt="product.name" :src="product.media_list[0].filename" class="me-2" height="50"/> {{ product.name }}</div>
-        <div class="card-body">
-          <div class="fw-bold mb-2 text-primary"><i class="fa-solid fa-calendar-days"></i> {{store.msgDelivery[i]}}</div>
-          <div v-html="(store.withPrescription ? product.description1 : product.description2)"></div>
-          <button class="btn btn-primary" @click="goNexStep(product.id)">{{ formatPrice(store.withPrescription ? product.price :  product.price2) }} TTC</button>
+
+  <div v-if="store.productList.length === 0">Nada</div>
+
+  <div v-else class="d-flex flex-lg-row flex-column align-items-stretch">
+    <FlexCard v-for="(product, i) in store.productList" :card="product">
+
+      <template v-slot:card-image><img :alt="product.name" :src="product.media_list[0].filename" class="me-2"
+                                       height="50"/></template>
+
+      <template v-slot:card-body>
+        <div class="fw-bold mb-2 text-primary"><i class="fa-solid fa-calendar-days"></i> {{ store.msgDelivery[i] }}
         </div>
-      </div>
-    </div>
+        <div v-html="(store.withPrescription ? product.description1 : product.description2)"></div>
+      </template>
+
+      <template v-slot:btn-card>
+        <button class="btn btn-primary" @click="goNexStep(product.id)">
+          {{ formatPrice(store.withPrescription ? product.price : product.price2) }} TTC
+        </button>
+      </template>
+
+    </FlexCard>
   </div>
 </template>
 
 <script>
 import {useMMCMStore} from '../stores/mmcm.js'
+import FlexCard from "../components/FlexCard.vue";
+
 
 export default {
   setup() {
@@ -24,6 +37,7 @@ export default {
       store
     }
   },
+  components: {FlexCard},
   name: "delivery-option-step-2",
   methods: {
     goNexStep: function (idProduct) {

src/views/delivery-option-summary.vue

@@ -7,7 +7,9 @@
       <span v-if="store.withPrescription">Oui</span>
       <span v-else>Non</span>
     </div>
-    <div class="mb-2"  v-if="store.withPrescription"><strong>Date de collect de l'orodnnance : </strong>{{ store.dateCollectString }}</div>
+    <div class="mb-2" v-if="store.withPrescription"><strong>Date de collect de l'orodnnance
+      : </strong>{{ store.dateCollectString }}
+    </div>
     <div class="mb-2"><strong>Date de livraison des medicaments : </strong>{{ store.dateDeliveryString }}</div>
     <button class="btn btn-primary" @click="addToCart">
 
@@ -38,28 +40,26 @@ export default {
     addToCart: async function (idProduct) {
 
       this.suspens = true
-      let urlApi = '/php/api/v3/mmcm.php?EXEC=addToCart&ID_PRODUCT=' + this.store.idProduct
+      const urlApi = '/php/api/v3/mmcm.php?EXEC=addToCart&ID_PRODUCT=' + this.store.idProduct
           + '&with_prescription=' + this.store.withPrescription
           + '&date_delivery=' + this.store.dateDeliveryTimestampInSecond
           + '&date_collect=' + this.store.dateCollectTimestampInSecond
           + '&street=' + encodeURI(this.store.street)
           + '&zip_code=' + this.store.zipCode
-          + '&city=' +this.store.city
+          + '&city=' + this.store.city
       ;
 
       if(import.meta.env.DEV){
-        urlApi += '&ID_SESSION=hvat7Etm'
         console.log(urlApi)
       }
 
-      const result = await fetch(urlApi)
-          .then(response => {
-            if (response.ok) {
-              this.suspens = false
-              this.$router.push({path: '/final-step'})
-              return response.json();
-            }
-          })
+      const result = await fetch(urlApi).then(rep => rep.json())
+      if (result.id_session) {
+        this.suspens = false
+        this.store.setIdSession(result.id_session)
+        this.$router.push({path: '/final-step'})
+      }
+
     }
   }
 }

src/views/final-step.vue

@@ -2,16 +2,26 @@
   <div class="text-center">
     <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>
-    <a class="btn btn-primary" href="https://para-php7-dev.parapharmacie-et-medicament.com/cart/p/AFF_COMM/0/0/" target="_blank">Finaliser ma commande</a>
+    <a class="btn btn-primary" @click="exitVueApp('/cart/p/AFF_COMM/0/0/')">Finaliser ma commande</a>
   </div>
 </template>
 
 <script>
+import {useMMCMStore} from '../stores/mmcm.js'
+
 export default {
+  setup() {
+    const store = useMMCMStore()
+
+    return {
+      store
+    }
+  },
   name: "final-step",
   methods: {
     exitVueApp(url) {
-      window.location = 'https://para-php7-dev.parapharmacie-et-medicament.com' + url
+      const domain = 'para-php7-dev'
+      window.location = 'https://' + domain + '.parapharmacie-et-medicament.com' + url + '?ids=' + this.store.idSession
     }
   }
 }