WIP MMCM

package-lock.json

@@ -8,6 +8,9 @@
       "name": "mmcm",
       "version": "0.0.0",
       "dependencies": {
+        "@fortawesome/fontawesome-free": "^6.2.0",
+        "@vuepic/vue-datepicker": "^3.4.8",
+        "date-fns": "^2.29.3",
         "pinia": "^2.0.22",
         "vue": "^3.2.37",
         "vue-router": "^4.1.5"
@@ -66,6 +69,15 @@
         "node": ">=12"
       }
     },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.2.0.tgz",
+      "integrity": "sha512-CNR7qRIfCwWHNN7FnKUniva94edPdyQzil/zCwk3v6k4R6rR2Fr8i4s3PM7n/lyfPA6Zfko9z5WDzFxG9SW1uQ==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -221,6 +233,20 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.39.tgz",
       "integrity": "sha512-D3dl2ZB9qE6mTuWPk9RlhDeP1dgNRUKC3NJxji74A4yL8M2MwlhLKUC/49WHjrNzSPug58fWx/yFbaTzGAQSBw=="
     },
+    "node_modules/@vuepic/vue-datepicker": {
+      "version": "3.4.8",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-3.4.8.tgz",
+      "integrity": "sha512-nbuMA7IgjtT99LqcjSTSUcl7omTZSB+7vYSWQ9gQm31Frm/1wn54fT1Q0HaRD9nHXX982AACbqeND4K80SKONw==",
+      "dependencies": {
+        "date-fns": "^2.29.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      }
+    },
     "node_modules/acorn": {
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
@@ -441,6 +467,18 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
       "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
     },
+    "node_modules/date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/defined": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
@@ -1670,6 +1708,11 @@
       "dev": true,
       "optional": true
     },
+    "@fortawesome/fontawesome-free": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.2.0.tgz",
+      "integrity": "sha512-CNR7qRIfCwWHNN7FnKUniva94edPdyQzil/zCwk3v6k4R6rR2Fr8i4s3PM7n/lyfPA6Zfko9z5WDzFxG9SW1uQ=="
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1807,6 +1850,14 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.39.tgz",
       "integrity": "sha512-D3dl2ZB9qE6mTuWPk9RlhDeP1dgNRUKC3NJxji74A4yL8M2MwlhLKUC/49WHjrNzSPug58fWx/yFbaTzGAQSBw=="
     },
+    "@vuepic/vue-datepicker": {
+      "version": "3.4.8",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-3.4.8.tgz",
+      "integrity": "sha512-nbuMA7IgjtT99LqcjSTSUcl7omTZSB+7vYSWQ9gQm31Frm/1wn54fT1Q0HaRD9nHXX982AACbqeND4K80SKONw==",
+      "requires": {
+        "date-fns": "^2.29.2"
+      }
+    },
     "acorn": {
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
@@ -1943,6 +1994,11 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
       "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
     },
+    "date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
+    },
     "defined": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",

package.json

@@ -9,6 +9,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.2.0",
+    "@vuepic/vue-datepicker": "^3.4.8",
+    "date-fns": "^2.29.3",
     "pinia": "^2.0.22",
     "vue": "^3.2.37",
     "vue-router": "^4.1.5"

src/main.js

@@ -2,13 +2,21 @@ import { createApp } from 'vue'
 import './style.css'
 import './assets/common_css.css'
 import './assets/bootstrap-para.css'
+import fontawesome from '@fortawesome/fontawesome-free/css/fontawesome.css'
+import brands from '@fortawesome/fontawesome-free/css/brands.css'
+import solid from '@fortawesome/fontawesome-free/css/solid.css'
+
 import App from './App.vue'
 import router from "./router/index"
 import { createPinia } from 'pinia'
 
+import Datepicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css'
+
 const pinia = createPinia()
 
 const app = createApp(App)
 app.use(router);
 app.use(pinia)
+app.component('Datepicker', Datepicker);
 app.mount("#app");

src/router/index.js

@@ -12,9 +12,24 @@ const routes = [
         component: () => import('/src/views/address-check.vue'),
     },
     {
-        path: '/delivery-option',
+        path: '/delivery-option-step-1',
-        name: 'delivery-option',
+        name: 'delivery-option-step-1',
-        component: () => import('/src/views/delivery-option.vue'),
+        component: () => import('/src/views/delivery-option-step-1.vue'),
+    },
+    {
+        path: '/delivery-option-step-2',
+        name: 'delivery-option-step-2',
+        component: () => import('/src/views/delivery-option-step-2.vue'),
+    },
+    {
+        path: '/delivery-option-step-3',
+        name: 'delivery-option-step-3',
+        component: () => import('/src/views/delivery-option-step-3.vue'),
+    },
+    {
+        path: '/delivery-option-summary',
+        name: 'delivery-option-summary',
+        component: () => import('/src/views/delivery-option-summary.vue'),
     },
 
 ]

src/stores/mmcm.js

@@ -1,9 +1,9 @@
 import {defineStore} from 'pinia'
 
 export const useMMCMStore = defineStore('counter', {
-    state: () => ({count: 0, name: 'Eduardo', street: '', zipCode: '', city: '', productList : []}),
+    state: () => ({street: '', zipCode: '', city: '', productList: [], withPrescription: null, idProduct: null, dateDelivery:null}),
     getters: {
-        fullAddress: (state) => state.street + ' ' + state.zipCode + '' + state.city
+        fullAddress: (state) => state.street + ' ' + state.zipCode + '' + state.city,
     },
     actions: {
         setStreet(street) {
@@ -15,8 +15,14 @@ export const useMMCMStore = defineStore('counter', {
         setCity(city) {
             this.city = city
         },
-        setProductList(array){
+        setProductList(array) {
             this.productList = array
+        },
+        setPrescription(bool) {
+            this.withPrescription = bool
+        },
+        setIdProduct(id) {
+            this.idProduct = id
         }
     },
 })

src/views/address-check.vue

@@ -71,7 +71,7 @@ export default {
       console.log(productList);
 
       this.store.setProductList(productList);
-      this.$router.push({path: '/delivery-option'});
+      this.$router.push({path: '/delivery-option-step-1'});
     }
   }
 

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

@@ -0,0 +1,592 @@
+<template>
+
+
+
+      <div class="form-register">
+
+  <div class="steps clearfix"><ul role="tablist"><li role="tab" aria-disabled="false" class="first current" aria-selected="true"><a id="form-total-t-0" href="#form-total-h-0" aria-controls="form-total-p-0"><span class="current-info audible"> </span><div class="title">
+    <span class="step-icon"> <i class="fa-solid fa-user"></i> </span>
+    <span class="step-text">Ordonnance</span>
+  </div></a></li><li role="tab" aria-disabled="false"><a id="form-total-t-1" href="#form-total-h-1" aria-controls="form-total-p-1"><div class="title">
+    <span class="step-icon"><i class="zmdi zmdi-lock"></i></span>
+    <span class="step-text">Livraison</span>
+  </div></a></li><li role="tab" aria-disabled="false"><a id="form-total-t-2" href="#form-total-h-2" aria-controls="form-total-p-2"><div class="title">
+    <span class="step-icon"><i class="zmdi zmdi-card"></i></span>
+    <span class="step-text">Date</span>
+  </div></a></li><li role="tab" aria-disabled="false" class="last"><a id="form-total-t-3" href="#form-total-h-3" aria-controls="form-total-p-3"><div class="title">
+    <span class="step-icon"><i class="zmdi zmdi-receipt"></i></span>
+    <span class="step-text">Confirmation</span>
+  </div></a></li></ul></div>
+      </div>
+
+
+
+  <div class="card">
+    <div class="card-header">Avec ou sans ordonnance ?</div>
+    <div class="card-body row">
+      <div class="col-lg-6">
+        Avec ordonnance (mon pharmacien n'a pas mon ordonnance) :<br/>
+        <ul>
+          <li>1 -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>2 - Le livreur apportera l’enveloppe fermée contenant mes documents de santé directement à mon
+            pharmacien.
+          </li>
+          <li>3 - Mon pharmacien remet mes médicaments et mes documents au livreur.</li>
+          <li> 4 - Le livreur me livre à mon adresse mes médicaments et mes documents originaux.</li>
+        </ul>
+
+        <button class="btn btn-primary" @click="goNextStep(true)">Choisir</button>
+      </div>
+      <div class="col-lg-6">
+        Sans ordonnance (mon pharmacien a déjà mon ordonnance) :<br/>
+        <ul>
+          <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>
+        </ul>
+        <button class="btn btn-primary" @click="goNextStep(false)">Choisir</button>
+      </div>
+    </div>
+  </div>
+
+
+</template>
+
+<script>
+import {useMMCMStore} from '../stores/mmcm.js'
+
+
+export default {
+  setup() {
+    const store = useMMCMStore()
+    return {
+      store
+    }
+  },
+  name: "delivery-option-step-1",
+  methods: {
+    goNextStep: function (bool) {
+      this.store.setPrescription(bool);
+      this.$router.push({path: '/delivery-option-step-2'});
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.form-register{
+  width: 100%;
+  display: flex;
+
+}
+
+.form-register .steps {
+  margin-bottom: 33px;
+}
+.form-register .steps ul {
+  display: flex;
+  list-style: none;
+  padding-left: 108px;
+  text-align: left;
+}
+.form-register .steps li,
+.form-register .steps li.current {
+  outline: none;
+  -o-outline: none;
+  -ms-outline: none;
+  -moz-outline: none;
+  -webkit-outline: none;
+  position: relative;
+}
+.form-register .steps li .current-info {
+  display: none;
+}
+.form-register .steps li a {
+  text-decoration: none;
+  outline: none;
+  -o-outline: none;
+  -ms-outline: none;
+  -moz-outline: none;
+  -webkit-outline: none;
+}
+.form-register .steps li a .title span {
+  display: block;
+}
+.form-register .steps li a .title .step-icon {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  -o-border-radius: 50%;
+  -ms-border-radius: 50%;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  background: #ccc;
+  margin: 0 auto;
+  position: relative;
+  outline: none;
+  -o-outline: none;
+  -ms-outline: none;
+  -moz-outline: none;
+  -webkit-outline: none;
+  color: #fff;
+  font-size: 25.6px;
+  margin-right: 108px;
+}
+.form-register .steps li a .step-icon i {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -o-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+}
+.form-register .steps li .step-icon::before,
+.form-register .steps li:last-child .step-icon::after {
+  position: absolute;
+  content: "";
+  background: #e5e5e5;
+  width: 108px;
+  height: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+  -o-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
+  -webkit-transform: translateY(-50%);
+}
+.form-register .steps li .step-icon::before {
+  right: 100%;
+}
+.form-register .steps li:last-child .step-icon::after {
+  left: 100%;
+}
+
+.form-register .steps li.current a .step-icon,
+.form-register .steps li.current a:active .step-icon,
+.form-register .steps li.done a .step-icon,
+.form-register .steps li.done a:active .step-icon {
+  background: #24c1e8;
+}
+.form-register .steps .current .step-icon::before,
+.form-register .steps .current:last-child .step-icon::after,
+.form-register .steps .done .step-icon::before {
+  background: #24c1e8;
+}
+.form-register .steps li a .step-text {
+  color: #999;
+  font-weight: 400;
+  font-size: 18px;
+  padding:  14px 0 8px;
+}
+.form-register .steps .current .step-text,
+.form-register .steps .done .step-text {
+  color: #333;
+}
+
+.form-register .content h2 {
+  display: none;
+}
+.form-register .content .inner h3 {
+  font-size: 22px;
+  color: #333;
+  font-weight: 700;
+  margin: 0;
+  padding-bottom: 18px;
+  padding-top: 5px;
+}
+.form-register .content .form-total-p-1 .inner h3 {
+  padding-bottom: 13px;
+  padding-top: 0;
+}
+.form-register .content #form-total-p-3 .inner h3 {
+  padding-bottom: 5px;
+}
+.form-register .content .inner h4 {
+  font-size: 18px;
+  font-weight: 700;
+  color: #333;
+  margin: 0;
+}
+.inner .form-row {
+  display: flex;
+  margin: 0 -12px;
+  position: relative;
+}
+.form-row.form-row-date.form-row-date-1 {
+  margin-top: 50px;
+  margin-bottom: -18px;
+}
+.inner .form-row .form-holder {
+  width: 50%;
+  padding: 0 12px;
+  margin-bottom: 15px;
+  position: relative;
+}
+.inner .form-row .form-holder.form-holder-1 {
+  width: 84.1%;
+}
+.inner .form-row .form-holder.form-holder-2 {
+  width: 100%;
+  position: relative;
+}
+.inner .form-row .form-row-inner {
+  position: relative;
+}
+.inner .form-row .form-holder .label {
+  position: absolute;
+  top: -3px;
+  left: 10px;
+  font-size: 16px;
+  font-weight: 400;
+  color: #666;
+  transform-origin: 0 0;
+  transition: all .2s ease;
+  -webkit-transition: all .2s ease;
+  -moz-transition: all .2s ease;
+  -o-transition: all .2s ease;
+  -ms-transition: all .2s ease;
+}
+.inner .form-row .form-holder .border {
+  position: absolute;
+  bottom: 31px;
+  left: 0;
+  height: 2px;
+  width: 100%;
+  background: #6bc734;
+  transform: scaleX(0);
+  -webkit-transform: scaleX(0);
+  -moz-transform: scaleX(0);
+  -o-transform: scaleX(0);
+  -ms-transform: scaleX(0);
+  transform-origin: 0 0;
+  transition: all .15s ease;
+  -webkit-transition: all .15s ease;
+  -moz-transition: all .15s ease;
+  -o-transition: all .15s ease;
+  -ms-transition: all .15s ease;
+}
+.inner .form-row #radio {
+  color: #666;
+  font-weight: 400;
+  font-size: 16px;
+  margin: 8px 12px;
+}
+.inner .form-row #checkbox {
+  margin: 10px 0 28px 11px;
+  font-size: 15px;
+  color: #666;
+  font-weight: 400;
+}
+.inner .form-row .form-holder label.special-label {
+  display: inline-block;
+  float: left;
+  margin-top: 25px;
+  padding-right: 20px;
+  color: #666;
+  font-size: 16px;
+  font-weight: 400;
+}
+.inner .form-row .form-holder label.pay-1-label,
+.inner .form-row .form-holder label.pay-2-label {
+  width: 190px;
+  height: 95px;
+  border:  1px solid #e5e5e5;
+  display: block;
+  cursor: pointer;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -o-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  float: left;
+  margin-right: 15px;
+  text-align: center;
+  color: #666;
+  font-size: 16px;
+  font-weight: 400;
+  margin-bottom: 5px;
+}
+.inner .form-row .form-holder label.pay-1-label img,
+.inner .form-row .form-holder label.pay-2-label img {
+  padding-top: 15px;
+  padding-bottom: 8px;
+}
+.inner .form-row.form-row-date .form-holder select {
+  float: left;
+  width: 19%;
+  margin-right: 20px;
+}
+.inner .form-row .form-holder input,
+.inner .form-row .form-holder select {
+  width: 100%;
+  padding: 13px 10px 8px;
+  border: none;
+  border-bottom: 2px solid #e5e5e5;
+  appearance: unset;
+  -moz-appearance: unset;
+  -webkit-appearance: unset;
+  -o-appearance: unset;
+  -ms-appearance: unset;
+  outline: none;
+  -moz-outline: none;
+  -webkit-outline: none;
+  -o-outline: none;
+  -ms-outline: none;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 400;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -o-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+}
+.inner .form-row .form-holder input {
+  font-size: 18px;
+  color: #333;
+  font-weight: 700;
+}
+.inner .form-row .form-holder input#pay-1,
+.inner .form-row .form-holder input#pay-2 {
+  display: none;
+}
+.inner .form-row .form-holder select {
+  font-size: 15px;
+  color: #666;
+  background: #fff url('../images/wizard_v4_icon.png') no-repeat scroll;
+  background-position: right 0 center;
+  z-index: 1;
+  cursor: pointer;
+  position: relative;
+}
+.inner .form-row .form-holder select:focus {
+  border-bottom: 2px solid #24c1e8;
+}
+.inner .form-row .form-holder .form-control:focus,
+.inner .form-row .form-holder .form-control:valid {
+  border-bottom: 2px solid #24c1e8;
+  margin-top: 21px;
+}
+.inner .form-row .form-holder .form-control:focus + .label,
+.inner .form-row .form-holder .form-control:valid + .label {
+  transform: translateY(-23px) scale(1);
+  -o-transform: translateY(-23px) scale(1);
+  -ms-transform: translateY(-23px) scale(1);
+  -moz-transform: translateY(-23px) scale(1);
+  -webkit-transform: translateY(-23px) scale(1);
+  color: #24c1e8;
+}
+.inner .form-row  .form-holder .form-control:focus  + .border,
+.inner .form-row  .form-holder .form-control:valid  + .border {
+  transform: scaleX(1);
+  -o-transform: scaleX(1);
+  -ms-transform: scaleX(1);
+  -moz-transform: scaleX(1);
+  -webkit-transform: scaleX(1);
+}
+.inner .form-row  .form-holder input#pay-1:checked + label,
+.inner .form-row  .form-holder input#pay-2:checked + label {
+  border:  none;
+  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
+  -o-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
+  -ms-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
+  -moz-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
+  -webkit-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
+}
+.inner .form-row.table-responsive {
+  border: none;
+  border-radius: 5px;
+  -o-border-radius: 5px;
+  -ms-border-radius: 5px;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  margin: 27px 0 -25px;
+}
+.inner .table-responsive .table {
+  width: 100%;
+}
+.inner .table-responsive tbody {
+  text-align: left;
+}
+.inner .table-responsive tr.space-row > td,
+.inner .table-responsive tr.space-row > th {
+  padding: 17px 20px 14px;
+  border-top: 1px solid #e5e5e5;
+}
+.inner .table-responsive tr.space-row:last-child > td,
+.inner .table-responsive tr.space-row:last-child > th {
+  border-bottom: none;
+}
+.inner .table-responsive tbody th {
+  color: #666;
+  font-size: 16px;
+  font-weight: 400;
+  width: 30%;
+}
+.inner .table-responsive tbody td {
+  color: #333;
+  font-size: 16px;
+  font-weight: 400;
+}
+.actions ul {
+  list-style: none;
+  padding-left: 0;
+  padding: 0 20px;
+  margin: 30px 0;
+  display: flex;
+  display: -webkit-flex;
+  justify-content: space-between;
+  -o-justify-content: space-between;
+  -ms-justify-content: space-between;
+  -moz-justify-content: space-between;
+  -webkit-justify-content: space-between;
+}
+.actions ul li.disabled {
+  opacity: 0;
+}
+.actions ul li {
+  padding: 0;
+  border: none;
+  border-radius: 3px;
+  -o-border-radius: 3px;
+  -ms-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  display: inline-flex;
+  height: 45px;
+  width: 140px;
+  justify-content: center;
+  -o-justify-content: center;
+  -ms-justify-content: center;
+  -moz-justify-content: center;
+  -webkit-justify-content: center;
+  -o-align-items: center;
+  -ms-align-items: center;
+  -moz-align-items: center;
+  -webkit-align-items: center;
+  align-items: center;
+  background: #24c1e8;
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  cursor: pointer;
+}
+.actions ul li:hover {
+  background: #1d97b5;
+}
+.actions ul li:first-child {
+  background: #999;
+  margin-left: 60.9%;
+}
+.actions ul li:first-child:hover {
+  background: #666;
+}
+.actions ul li a {
+  color: #fff;
+  text-decoration: none;
+  padding: 13px 34px;
+}
+
+/* Responsive */
+@media screen and (max-width: 1199px) {
+  .wizard-v3-content {
+    margin: 180px 20px;
+  }
+}
+@media screen and (max-width: 991px) {
+  .form-register .steps ul {
+    padding-left: 0;
+    justify-content: space-around;
+    -o-justify-content: space-around;
+    -ms-justify-content: space-around;
+    -moz-justify-content: space-around;
+    -webkit-justify-content: space-around;
+  }
+  .form-register .steps li a .title {
+    text-align: center;
+  }
+  .form-register .steps li a .title .step-icon,
+  .form-register .steps li a .title .step-icon {
+    margin: 0 auto;
+  }
+  .form-register .steps li a .title .step-icon::before,
+  .form-register .steps li:last-child a .title .step-icon::after {
+    content: none;
+  }
+  .actions ul li:first-child {
+    margin-left: 0;
+  }
+}
+@media screen and (max-width: 767px) {
+  .inner .form-row.form-row-date .form-holder select {
+    width: 17.5%;
+    margin-right: 20px;
+  }
+  .inner .form-row .form-holder label.pay-1-label,
+  .inner .form-row .form-holder label.pay-2-label {
+    margin-bottom: 15px;
+  }
+}
+@media screen and (max-width: 575px) {
+  .wizard-v3-content {
+    width: 90%;
+  }
+  .wizard-form .wizard-header {
+    padding:  40px 20px 20px 20px;
+  }
+  .inner .form-row {
+    flex-direction: column;
+    -o-flex-direction: column;
+    -ms-flex-direction: column;
+    -moz-flex-direction: column;
+    -webkit-flex-direction: column;
+    margin: 0;
+  }
+  .inner .form-row .form-holder {
+    width: 100%;
+  }
+  .inner .form-row .form-holder.form-holder-1 {
+    width: 100%;
+  }
+  .inner .form-row .form-holder {
+    padding: 0;
+  }
+  .inner .form-row .form-holder label.special-label {
+    float: none;
+  }
+  .inner .form-row.form-row-date .form-holder select {
+    float: none;
+    width: 100%;
+    margin-bottom: 20px;
+    margin-right: 0;
+    display: block;
+  }
+  .form-register .steps li a .title .step-icon {
+    width: 40px;
+    height: 40px;
+    font-size: 20px;
+  }
+  .form-register .steps li a .step-text {
+    font-size: 12px;
+  }
+  .form-register .content {
+    padding: 35px 30px 60px;
+  }
+  .inner .form-row #radio {
+    margin-left: -2px;
+  }
+  .inner .form-row #checkbox {
+    margin-left: 0;
+  }
+  .actions ul li {
+    width: 120px;
+  }
+  .actions ul li a {
+    padding: 15px 24px;
+  }
+}
+
+</style>

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

@@ -0,0 +1,37 @@
+<template>
+  <div class="card">
+    <div class="card-header">Mode de livraison</div>
+    <div class="card-body row">
+      <div v-for="product in store.productList" class="col-lg-6">
+        <h1>{{ product.name }}</h1>
+        <p> {{ product.price }}</p>
+        <button @click="goNexStep(product.id)">Choisir</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {useMMCMStore} from '../stores/mmcm.js'
+
+
+export default {
+  setup() {
+    const store = useMMCMStore()
+    return {
+      store
+    }
+  },
+  name: "delivery-option-step-2",
+  methods: {
+    goNexStep: function (idProduct) {
+      this.store.setIdProduct(idProduct);
+      this.$router.push({path: '/delivery-option-step-3'});
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,54 @@
+<template>
+  <div class="card">
+    <div class="card-header">Date</div>
+    <div class="card-body">
+      <Datepicker v-model="dateDelivery" :minDate="tomorrow" :enableTimePicker="false" :disabledWeekDays="[6, 0]" locale="fr-FR"/>
+      <p class="mt-4"><button class="btn btn-primary" @click="$router.push({path: '/delivery-option-summary'});">Valider</button></p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { storeToRefs } from 'pinia'
+import {useMMCMStore} from '../stores/mmcm.js'
+import {ref} from 'vue';
+import {add, endOfMonth, endOfYear, startOfMonth, startOfYear, subMonths} from 'date-fns';
+
+export default {
+  setup() {
+    const store = useMMCMStore()
+
+    const { dateDelivery } = storeToRefs(store)
+
+    const tomorrow =
+        add(new Date(), {
+          days: 1
+        })
+
+    const afterTomorrow =
+        add(new Date(), {
+          days: 2
+        })
+
+
+    const presetRanges = ref([
+      {label: 'Demain', range: [tomorrow, tomorrow]},
+      {label: 'Après demain', range: [afterTomorrow, afterTomorrow]},
+      {label: 'Semaine prochaine', range: [startOfMonth(new Date()), endOfMonth(new Date())]},
+    ]);
+
+    return {
+      tomorrow,
+      dateDelivery,
+      presetRanges,
+      store
+    }
+  },
+  name: "delivery-option-step-3",
+  methods: {}
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/delivery-option-summary.vue

@@ -1,17 +1,22 @@
 <template>
+    <div class="card">
+      <div class="card-header">Recapitulatif</div>
+      <div class="card-body">
+        <div v-if="store.widthPrescription">La pharmacie a mon ordo</div>
+        <div v-else>La pharmacie n'a pas mon ordo</div>
 
-  <div v-for="product in store.productList" class="card">
+        <div>{{store.idProduct}}</div>
-    <div class="card-header">{{ product.name }}</div>
+        <div>{{store.dateDelivery}}</div>
-    <div class="card-body">{{ product.price }}</div>
+        <button class="btn btn-primary" @click="addToCart">Valider</button>
-    <button @click="addToCart(product.id)">Ajouter au panier</button>
 
       </div>
-
+    </div>
 </template>
 
 <script>
 import {useMMCMStore} from '../stores/mmcm.js'
 
+
 export default {
   setup() {
     const store = useMMCMStore()
@@ -19,10 +24,9 @@ export default {
       store
     }
   },
-  name: "delivery-option",
+  name: "delivery-option-summary",
   methods: {
     addToCart: async function (idProduct) {
-console.log(this.store.productList)
       const urlApi = '/php/api/v3/mmcm.php?EXEC=addToCart&ID_PRODUCT=' + idProduct;
       console.log(urlApi)
 
@@ -32,9 +36,6 @@ console.log(this.store.productList)
               return response.json();
             }
           })
-
-      console.log(result)
-
     }
   }
 }