wip #7898 @7:00

diff --git a/js/libs/fluidbook/cart/fluidbook.cart.kimplay.js b/js/libs/fluidbook/cart/fluidbook.cart.kimplay.js
index 648d499872a42fec93094eb1a6e82e0d353767f3..ffc4a12cb857062ef982e3532795f24c395febbc 100644 (file)
--- a/js/libs/fluidbook/cart/fluidbook.cart.kimplay.js
+++ b/js/libs/fluidbook/cart/fluidbook.cart.kimplay.js
@@ -11,11 +11,24 @@ FluidbookCartKimplay.prototype = {
     init: function () {
         var $this = this;
         this.items = this.fluidbook.cache.get('cart', {});
-        $(document).on(this.fluidbook.input.clickEvent, '.sendRequest', function () {
-            $this.sendRequet();
+        $(document).on(this.fluidbook.input.clickEvent, '#open-request', function () {
+            let input = $(this).closest('#kimplaycart').find('[name=qty]');
+            $.each(input, function (i, item) {
+                let ref = $(item).data('ref')
+                $this.items['' + ref] = {
+                    quantity: $(item).val(),
+                }
+            })
+            $this.fluidbook.menu.quickCloseView();
+            $this.getContactForm();
+            $this.save();
             return false;
         });
 
+        $(document).on(this.fluidbook.input.clickEvent, '#send-request', function() {
+            $this.sendRequest();
+        })
+
         $(document).on(this.fluidbook.input.clickEvent, '#kimplay-additem button', function () {
             let form = $(this).closest('#kimplay-additem');
             $this.items['' + $(this).data('ref')] = {
@@ -59,7 +72,11 @@ FluidbookCartKimplay.prototype = {
     },
 
     removeFromCart: function (key) {
-        this.items.splice(key, 1);
+        if(typeof this.items === "object") {
+            delete this.items[key]
+        }else {
+            this.items.splice(key, 1);
+        }
         this.save();
     },
 
@@ -134,8 +151,8 @@ FluidbookCartKimplay.prototype = {
         content += '<tr>';
         content += '<th></th>';
         content += '<th>' + this.fluidbook.l10n.__('ref') + '</th>';
-        content += '<th>' + this.fluidbook.l10n.__('designation') + '</th>';
-        content += '<th class="quantite">' + this.fluidbook.l10n.__('quantité') + '</th>';
+        content += '<th class="col-designation">' + this.fluidbook.l10n.__('designation') + '</th>';
+        content += '<th class="col-quantite">' + this.fluidbook.l10n.__('quantité') + '</th>';
         content += '<th>' + this.fluidbook.l10n.__('commentaire') + '</th>';
         content += '<th></th>';
         content += '</tr></thead>';
@@ -156,9 +173,9 @@ FluidbookCartKimplay.prototype = {
             }
             content += '<td class="reference"><span>' + i + '</span></td>';
             content += '<td class="designation"><span>' + dataByRef.name + '</span></td>';
-            content += '<td class="quantite"><span>' + item.quantity + '</span></td>';
+            content += '<td class="quantite"><input type="text" name="qty" value="' + item.quantity + '" data-ref="' + i + '"></td>';
             content += '<td class="commentaire"><span>' + item.comment + '</span></td>';
-            content += '<td><a href="#" data-cart-delete="' + i + '">' + getSpriteIcon('interface-close') + '</a></td>';
+            content += '<td class="delete"><a href="#" data-cart-delete="' + i + '">' + getSpriteIcon('interface-close') + '</a></td>';
             content += '</tr>';
         });
         content += '</tbody>';
@@ -166,7 +183,7 @@ FluidbookCartKimplay.prototype = {
         content += '<div class="cart-footer">';
         content += '<div class="fonctions">';
         content += '<a href="#/closeview" class="completeSelection" role="button" aria-label="' + this.fluidbook.l10n.__('close') + '">' + this.fluidbook.l10n.__('compléter ma sélection') + '</a>';
-        content += '<button class="sendRequest">' + this.fluidbook.l10n.__('envoyer ma demande') + '</button>';
+        content += '<button class="sendRequest" id="open-request">' + this.fluidbook.l10n.__('envoyer ma demande') + '</button>';
         content += '</div>';
         content += '</div>';
 
@@ -176,7 +193,7 @@ FluidbookCartKimplay.prototype = {
 
     _endMenu: function (title, content, callback) {
         var view = '<div id="kimplaycart">';
-        view += this.fluidbook.menu.getCaption(title);
+        view += this.fluidbook.menu.getCaption(title, 'small');
         view += '<div class="content">';
         view += "" + content;
         view += '</div>';
@@ -211,27 +228,70 @@ FluidbookCartKimplay.prototype = {
         return parseInt(s);
     },
 
-    sendCart: function() {
+    getContactForm: function() {
         let view = `<div id="kimplay-sendcart">
-    ${this.fluidbook.menu.getCaption("", 'small')}
+        ${this.fluidbook.menu.getCaption("Mes coordonnées", 'small')}
                         <div class="content">
-                        <div class="image"><img src="${this.data[ref].image}" /></div>
                             <div class="form">
-                                <h3>${this.data[ref].name}</h3>
-                                <div>(réf. ${ref})</div>
-                                <br>
-                                Quantité souhaitée :<br>
-                                <input type="text" name="qty" value="${quantity}"><br>
-                                Commentaire (facultatif)
-                                <textarea name="comment">${comment}</textarea><br>
-                                <button data-ref="${ref}">Ajouter à ma sélection</button>
+                                <label for="company">Nom de l'entreprise*</label>
+                                <input type="text" name="company"><br>
+                                <label for="name">Nom*</label>
+                                <input type="text" name="name"><br>
+                                <label for="firstname">Prénom</label>
+                                <input type="text" name="firstname"><br>
+                                <label for="mail">Email*</label>
+                                <input type="email" name="mail"><br>
+                                <label for="phone">Téléphone*</label>
+                                <input type="text" name="phone"><br>
+                                <label for="address">Adresse</label>
+                                <input type="text" name="address"><br>
+                                <label for="message">Message</label>
+                                <textarea name="message"></textarea><br>
+                                <span>*Champs obligatoires</span>
+                            </div>
+                            <div class="cart-footer">
+                                <div class="fonctions">
+                                  <a href="#/closeview" class="completeSelection" role="button" aria-label="${this.fluidbook.l10n.__('close')}">${this.fluidbook.l10n.__('compléter ma sélection')}</a>
+                                  <button class="sendRequest" id="send-request">${this.fluidbook.l10n.__('envoyer ma demande')}</button>
+                                </div>
                             </div>
                         </div>
                     </div>`;
         this.fluidbook.menu.openCustomView(view, 'cart-kimplay-sendcart');
     },
 
+    getConfirm: function () {
+        return `<p class="confirm-content">Votre demande a bien été transmise.
+            Une copie de votre sélection va vous être
+            adressée par email. Notre équipe commerciale
+            reviendra vers vous dans les 72h.<br><br>
+            D’ici là nous restons joignables pour toute
+            question à l’adresse : <a href="mailto:contact@kimplay.com">contact@kimplay.com</a>
+        </p>`
+    },
+
+    updateCartContent: function (html) {
+       $(".mview .content").html(html)
+    },
+
+    updateTitle: function (title = "Connexion") {
+        $("#mview-dialog-title").text(title)
+    },
+
     sendRequest: function() {
-        //
+        const $this = this;
+        $.ajax({
+            url: $this.fluidbook.service.getBaseURL(true) + 'kimplay',
+            cache: false,
+            data: {products: $this.getItems()},
+            method: 'post',
+            xhrFields: {withCredentials: true},
+            dataType: 'json',
+            success: function () {
+                $this.updateTitle('Merci !')
+                $this.updateCartContent($this.getConfirm())
+                $this.fluidbook.resize.resize();
+            }
+        });
     }
 };
\ No newline at end of file

diff --git a/style/cart/kimplay.less b/style/cart/kimplay.less
index 09c81412a8f04aeff39e84e7dc8e816ff173bbeb..7068072fc9e20f03acb7ab2f423000eba262b0bb 100644 (file)
--- a/style/cart/kimplay.less
+++ b/style/cart/kimplay.less
@@ -2,18 +2,51 @@
   background-color: rgba(0, 255, 0, 0.5);
 }
 
-.mview[data-menu="cart-kimplay-qty"],
-#kimplaycart {
-  background-color: #fff;
+.mview {
+  font-size: 12px;
+  background: #fff;
   color: #000;
+  text-transform: uppercase;
+  padding: 0 30px;
 
   .caption {
-    height: 30px;
-    padding: 0;
+    height: auto;
+    padding-left: 0;
+    padding-right: 0;
+
+    h2 {
+      text-transform: uppercase;
+    }
+
+    a.back {
+      background-color: #fff;
+      top: 13px;
+      right: 20px;
+    }
   }
 
-  .caption a.back {
-    background-color: #fff;
+  table {
+    font-size: 14px;
+  }
+
+  .fonctions {
+    padding-top: 30px;
+    padding-right: 0;
+    font-size: 14px;
+  }
+
+  input, textarea {
+    border: 2px solid #000;
+    margin-bottom: 20px;
+    padding: 2px;
+    font-size: 16px;
+    font-family: @font;
+  }
+
+  input {
+    width: 70px;
+    background-color: #fff !important;
+    text-align: center;
   }
 
   button {
@@ -28,12 +61,39 @@
     font-weight: bold;
     cursor: pointer;
   }
+
+  .fonctions a.completeSelection {
+    border: 2px solid #ad1057;
+    background-color: #fff;
+  }
+
+  .sendRequest {
+    display: inline-block;
+    width: auto;
+    padding: 16px 25px;
+    height: 45px;
+    margin-left: 10px;
+    vertical-align: top;
+  }
+
+  .confirm-content {
+    padding-bottom: 30px;
+  }
 }
 
 .mview[data-menu="cart-kimplay-qty"] {
   width: 605px;
   height: 364px;
 
+  .caption {
+    height: 30px;
+    padding: 0;
+  }
+
+  .content {
+    display: flex;
+  }
+
   .image {
     display: inline-block;
     vertical-align: middle;
@@ -57,14 +117,6 @@
       font-size: 16px;
     }
 
-    input, textarea {
-      border: 2px solid #000;
-      margin-bottom: 20px;
-      padding: 2px;
-      font-size: 16px;
-      font-family: @font;
-    }
-
     textarea {
       min-width: 100%;
       width: 100%;
@@ -74,17 +126,14 @@
       min-height: 58px;
       padding: 5px;
     }
-
-    input {
-      width: 70px;
-      background-color: #fff;
-      text-align: center;
-    }
   }
 }
 
 #kimplaycart {
-  padding: 0 30px;
+
+  &table {
+    margin-left: 0;
+  }
 
   th {
     text-transform: uppercase;
@@ -94,37 +143,88 @@
     text-align: left;
     font-weight: 600;
 
-    &.quantite {
+    &.col-quantite {
+      width: 24%;
+    }
+
+    &.col-quantite {
       text-align: center;
+      width: 21%;
     }
   }
 
   table td {
     padding-left: 0;
     padding-right: 0;
+    height: 80px;
+
+    &.image {
+      display: flex;
+      justify-content: center;
+    }
+
+    &.designation,
+    &.commentaire {
+      white-space: normal;
+      word-break: break-word;
+    }
 
     &.quantite {
       text-align: center;
     }
+
+    &.delete {
+      width: 20px;
+
+      a {
+        width: 20px;
+        background: red;
+        text-align: center;
+        height: 20px;
+        color: white;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      svg {
+        width: 8px;
+      }
+    }
   }
 
-  img {
-    width: 100%;
-    max-width: 60px;
+  input {
+    margin-bottom: 0;
   }
 
-  .completeSelection {
-    border: 2px solid #ad1057;
-    background-color: #fff
+  img {
+    height: 100%;
   }
+}
 
-  .sendRequest {
-    display: inline-block;
-    width: auto;
-    padding: 16px 25px;
-    height: 45px;
-    margin-left: 10px;
-    vertical-align: top;
+#kimplay-sendcart {
+
+  .form {
+    text-align: right;
+    padding: 30px;
+
+    label {
+      margin-right: 5px;
+      position: relative;
+      top: 3px;
+    }
+
+    input, textarea {
+      width: 320px;
+      text-align: left;
+      padding: 3px 10px;
+      vertical-align: top;
+    }
+
+    textarea {
+      height: 80px;
+      resize: none;
+    }
   }
 }