WIP MMCM

package-lock.json

@@ -17,6 +17,7 @@
         "vue-router": "^4.1.5"
       },
       "devDependencies": {
+        "@iconify/vue": "^4.0.0",
         "@vitejs/plugin-vue": "^3.1.0",
         "autoprefixer": "^10.4.12",
         "postcss": "^8.4.16",
@@ -80,6 +81,27 @@
         "node": ">=6"
       }
     },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "dev": true
+    },
+    "node_modules/@iconify/vue": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-4.0.0.tgz",
+      "integrity": "sha512-73z81Yf2HISfehu3qvN9GqL1OnUO7wEMKkiFwVGJ2pqAdGCR8FrVylhRhka+6U+gFLlng0ynnT20svk3jJYwow==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "vue": ">=3"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1743,6 +1765,21 @@
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.2.0.tgz",
       "integrity": "sha512-CNR7qRIfCwWHNN7FnKUniva94edPdyQzil/zCwk3v6k4R6rR2Fr8i4s3PM7n/lyfPA6Zfko9z5WDzFxG9SW1uQ=="
     },
+    "@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "dev": true
+    },
+    "@iconify/vue": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-4.0.0.tgz",
+      "integrity": "sha512-73z81Yf2HISfehu3qvN9GqL1OnUO7wEMKkiFwVGJ2pqAdGCR8FrVylhRhka+6U+gFLlng0ynnT20svk3jJYwow==",
+      "dev": true,
+      "requires": {
+        "@iconify/types": "^2.0.0"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",

package.json

@@ -18,6 +18,7 @@
     "vue-router": "^4.1.5"
   },
   "devDependencies": {
+    "@iconify/vue": "^4.0.0",
     "@vitejs/plugin-vue": "^3.1.0",
     "autoprefixer": "^10.4.12",
     "postcss": "^8.4.16",

src/main.js

@@ -7,6 +7,8 @@ import brands from '@fortawesome/fontawesome-free/css/brands.css'
 import solid from '@fortawesome/fontawesome-free/css/solid.css'
 import regular from '@fortawesome/fontawesome-free/css/regular.css'
 
+import { Icon } from '@iconify/vue';
+
 
 import App from './App.vue'
 import router from "./router/index"
@@ -21,4 +23,5 @@ const app = createApp(App)
 app.use(router);
 app.use(pinia)
 app.component('Datepicker', Datepicker);
+app.component('Icon', Icon);
 app.mount("#app");

src/views/address-check.vue

@@ -2,15 +2,14 @@
   <div style="min-height: 350px">
     <div class="step_title">Indiquez votre adresse de livraison :</div>
 
-    <div class="alert alert-danger" role="alert" v-if="noOfferFound">
+    <div class="alert alert-warning" role="alert" v-if="alertBox === 1">
       Nous sommes désolé mais votre adresse est trop eloignée de la pharmacie pour bénéficier de ce service<br/>
       Nous vous invitions à utiliser le service de La Poste pour trouver une pharmacie proche de chez vous :
       <a href="https://www.mesmedicamentschezmoi.com" target="_blank">Accéder à mesmedicamentschezmoi.com</a>
-
     </div>
 
-    <div class="alert alert-danger" role="alert" v-if="!geolocation">
+    <div class="alert alert-danger" role="alert" v-if="alertBox === 2">
-      Nous sommes désolé nous ne parvenons pas à géolocaliser l'adresse saisie<br/>
+      <i class="fa-solid fa-circle-exclamation"></i> Nous sommes désolé nous ne parvenons pas à géolocaliser l'adresse saisie<br/>
     </div>
 
     <div class="input-group mb-3">
@@ -77,14 +76,14 @@ import {add, format} from "date-fns";
 export default {
   setup() {
     const store = useMMCMStore()
-    const noOfferFound = ref(false)
+    const alertBox = ref(0)
 
     const query = ref(store.fullAddress !== null ? store.fullAddress : import.meta.env.DEV ? "9 Impasse des Peupliers 13008 Marseill" : '')
 
     return {
       query,
       store,
-      noOfferFound
+      alertBox
     }
   },
   name: "address-check",
@@ -93,7 +92,6 @@ export default {
       searchResults: [],
       isSearching: false,
       isChecking: false,
-      geolocation: true,
       addressBook: [],
       isConnected: null,
       currentBtSearch: null
@@ -142,7 +140,8 @@ export default {
       if (import.meta.env.DEV) {
         console.log(urlApi)
       }
-      let productList = await fetch(urlApi)
+
+      let apiResult = await fetch(urlApi)
           .then(response => {
             if (response.ok) {
               return response.json();
@@ -152,15 +151,13 @@ export default {
 
       this.isChecking = false
 
-      if (productList.hasOwnProperty('data') && productList.data.result === 'KO') {
+      if (apiResult.hasOwnProperty('address_state') && apiResult.address_state === false) {
-        this.geolocation = false
+        this.alertBox = 2
-        this.noOfferFound = false
+      } else if (apiResult.service_list.length > 0) {
-      } else if (productList.length > 0) {
+        this.store.setProductList(apiResult.service_list);
-        this.store.setProductList(productList);
         this.$router.push({path: '/delivery-option-step-1'});
       } else {
-        this.noOfferFound = true
+        this.alertBox = 1
-        this.geolocation = true
       }
 
     }

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

@@ -8,8 +8,11 @@
   <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"
+      <template v-slot:card-image>
-                                       height="50"/></template>
+
+        <img v-if="product.media_list.filter(m=>m.use==='icon').length === 1" :alt="product.name" :src="product.media_list.filter(m=>m.use==='icon')[0].filename" class="me-2" height="50"/>
+        <Icon v-else icon="fluent-emoji:delivery-truck" width="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] }}

src/views/delivery-option-summary.vue

@@ -78,7 +78,7 @@ export default {
       }
 
       if (import.meta.env.DEV) {
-        urlApi += '&ID_SESSION=U0hENaZr';
+        urlApi += '&ID_SESSION=3LnS0bwF';
         console.log(urlApi)
       }