From: soufiane <soufiane@cubedesigners.com>
Date: Thu, 18 Apr 2024 16:43:11 +0000 (+0200)
Subject: wip #6867 @7:00
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=82cd35986f26c17d66fd6347f0b799a933b82b84;p=fluidbook-html5.git

wip #6867 @7:00
---

diff --git a/images/valid.svg b/images/valid.svg
new file mode 100644
index 00000000..b0898cb1
--- /dev/null
+++ b/images/valid.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_2" data-name="Calque 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.25 8.61">
+  <g id="créer_un_compte" data-name="créer un compte">
+    <polygon points="3.6 6.7 .96 4.06 0 5.02 3.6 8.61 11.25 .96 10.3 0 3.6 6.7"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/js/libs/fluidbook/cart/fluidbook.cart.bastide-resah-guest.js b/js/libs/fluidbook/cart/fluidbook.cart.bastide-resah-guest.js
index b70f8596..56abf37a 100644
--- a/js/libs/fluidbook/cart/fluidbook.cart.bastide-resah-guest.js
+++ b/js/libs/fluidbook/cart/fluidbook.cart.bastide-resah-guest.js
@@ -12,6 +12,11 @@ FluidbookCartBastideResahGuest.prototype = {
             $this.addToCart($(this).data('cart-ref'));
             return false;
         });
+
+        $(document).on(this.fluidbook.input.clickEvent, '#create-account', function () {
+            $this.updateCart('register')
+            $this.updateRegisterClass()
+        })
     },
 
     addToCart: function (reference) {
@@ -19,9 +24,9 @@ FluidbookCartBastideResahGuest.prototype = {
         return false;
     },
 
-    updateCart: function () {
+    updateCart: function (content = null) {
         if ($('#Bastide_cart').length > 0) {
-            $('#Bastide_cart .content').html(this.getCartContent());
+            $('#Bastide_cart .content').html(this.getCartContent(content));
             this.fluidbook.resize.resize();
         }
     },
@@ -30,6 +35,10 @@ FluidbookCartBastideResahGuest.prototype = {
         $(this.fluidbook).trigger('fluidbook.cart.updateIcon', {number: this.getItemCount()});
     },
 
+    updateRegisterClass: function () {
+      $("#Bastide_cart").toggleClass('register')
+    },
+
     openModal: function (title, content, callback) {
         let view = `<div id="Bastide_cart">
                         ${this.fluidbook.menu.getCaption(title)}
@@ -47,13 +56,100 @@ FluidbookCartBastideResahGuest.prototype = {
     },
 
     openCart: function (p2, callback) {
+        this.updateRegisterClass()
         this.openModal('Connexion', this.getCartContent(), function () {
             callback();
         });
     },
 
-    getCartContent: function () {
-        return '<div><form action=""><p>Pour afficher les tarifs, ajouter des produits à votre sélection, et nous envoyer une demande de devis, veuillez vous identifier :</p></form></div>';
+    getCartContent: function (action = null) {
+        let form = `<div id="Bastide_auth_form" class="container-form">`;
+        switch (action) {
+            case 'register':
+                form += `<form id="Bastide_register_form" class="" action="">
+                    <div class="form-group">
+                        <div class="form-header">
+                            établissement hospitalier
+                        </div>
+                        <div class="form-controls">
+                            <label for="">Nom de l'établissement</label>
+                            <input type="text" />
+                        </div>
+                        <div class="form-controls">
+                            <label for="">Numéro de finess de l’établissement</label>
+                            <input type="text" />
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <div class="form-header">
+                            Contact
+                        </div>
+                        <div class="form-controls">
+                            <label for="">Votre nom</label>
+                            <input type="text" />
+                        </div>
+                        <div class="form-controls">
+                            <label for="">Votre prénom</label>
+                            <input type="text" />
+                        </div>
+                        <div class="form-controls">
+                            <label for="">Votre fonction</label>
+                            <input type="text" />
+                        </div>
+                        <div class="form-controls">
+                            <label for="">votre Numéro de téléphone</label>
+                            <input type="text" />
+                        </div>
+                        <div class="form-controls">
+                            <label for="">votre adresse email pro</label>
+                            <input type="email" />
+                        </div>
+                        <div class="form-controls">
+                            <label for="">confirmer votre adresse email PRO</label>
+                            <input type="text" />
+                        </div>
+                        <div class="form-controls">
+                            <label for="">définir votre mot de passe</label>
+                            <input type="text" />
+                        </div>
+                        <div class="form-controls">
+                            <label for="">confirmer votre mot de passe</label>
+                            <input type="text" />
+                        </div>
+                        <div class="form-controls condition">
+                            <input type="checkbox" />
+                            <label class="">Je reconnais avoir été informé que les informations recueillies sur ce 
+                            formulaire sont enregistrées dans un fichier informatisé traité par Bastide le Confort 
+                            Médical. Pour plus d’informations je peux consulter la <a href="">charte de protection des 
+                            données personnelles</a>.
+                            </label>
+                        </div>
+                    </div>
+                    <button id="register" class="cta" type="submit">Valider</button>
+               </form>`
+                break;
+            default:
+                form += `<form id="Bastide_login_form" class="" action="">
+                    <p class="title">Pour afficher les tarifs, ajouter des produits à votre sélection, et nous envoyer une demande de devis, veuillez vous identifier :</p>
+                    <div class="form-controls">
+                        <label for="">Adresse email</label>
+                        <input type="email" />
+                    </div>
+                    <div class="form-controls">
+                        <label for="">Mot de passe</label>
+                        <input type="password" />
+                    </div>
+                    <button id="login" class="login cta" type="submit">S'identifier</button>
+                    <a id="forgot-password" href="#">Mot de passe oublié ?</a>
+               </form>
+               <p class="underbar"><span>ou</span></p>
+               <div class="">
+                    <p>Pas encore inscrit ?</p>
+                    <button id="create-account" class="create-account cta">Créer un compte</button>
+               </div>`;
+        }
+        form += `</div>`;
+        return form;
     },
 
     getMenuWidth: function () {
diff --git a/style/cart/bastide-resah.less b/style/cart/bastide-resah.less
index 2aba15bb..80cb2c8b 100644
--- a/style/cart/bastide-resah.less
+++ b/style/cart/bastide-resah.less
@@ -2,6 +2,10 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap');
 
+.mview {
+  background-color: transparent;
+}
+
 // Nav override
 .icon-cart {
   // Display the tooltip label before the cart icon
@@ -30,23 +34,20 @@
   background-color: #fff;
   color: #000;
   height: 100%;
+  width: 100%;
   min-height: 35vh;
   min-width: 320px;
-  font-size: 18px;
+  max-width: 336px;
+  margin: 0 auto;
 
-  @media (max-width: 1060px) {
-    font-size: 15px;
-  }
-  @media @breakpoint_table {
-    font-size: 1rem; // Once we're in the stacked view, the font can be a normal size again
-  }
-  @media (max-width: 450px) {
-    font-size: 14px;
+  &.register {
+    max-width: 600px;
   }
 
   .caption {
-    padding: 30px 20px;
+    padding: 25px 30px 35px;
     height: auto;
+    position: relative;
   }
 
   #mview-dialog-title {
@@ -398,4 +399,169 @@
     margin: 2em auto 0;
   }
 
+  #Bastide_auth_form {
+    padding: 0 58px 50px;
+
+    * {
+      font-size: 12px;
+    }
+
+    *:not(#forgot-password):not(.underbar):not(.cta) {
+      text-align: left;
+    }
+
+    .title {
+      margin-bottom: 1em;
+    }
+
+    form {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .form-controls {
+      margin-bottom: 1.25em;
+      display: flex;
+      flex-direction: column;
+
+      label {
+        margin-bottom: .625em;
+        text-transform: uppercase;
+      }
+
+      input {
+        border: 1px solid #000000;
+        height: 30px;
+      }
+    }
+
+    input[type=submit] {
+      background-color: @menu-background;
+      border: 1px solid @menu-background;
+      color: #fff;
+      white-space: nowrap;
+      margin: 0;
+    }
+
+    input[type=checkbox] {
+      width: 16px;
+      height: 16px;
+      -webkit-appearance: none;
+      appearance: none;
+      background-color: #fff;
+      margin: 0;
+      border: 1px solid @menu-background;
+      position: relative;
+
+      &:checked::before {
+        content: url('images/valid.svg');
+        width: 10px;
+        height: 10px;
+        position: absolute;
+      }
+    }
+
+    #login, #register {
+      background-color: @menu-background;
+      border-color: @menu-background;
+      color: #fff;
+    }
+
+    #create-account {
+      background-color: transparent;
+      border: 1px solid @menu-background;
+      margin-top: .625em;
+    }
+
+    #forgot-password {
+      text-decoration: underline;
+      margin-top: .625em;
+    }
+
+    .underbar {
+      padding: 2em 0;
+      position: relative;
+
+      span {
+        position: relative;
+        z-index: 2;
+      }
+
+      &:before {
+        content: "";
+        width: 24px;
+        height: 20px;
+        background-color: #fff;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 1;
+      }
+
+      &:after {
+        content: "";
+        background-color: @menu-background;
+        width: 100%;
+        height: 1px;
+        position: absolute;
+        left: 0;
+        top: 50%;
+      }
+    }
+
+    .cta {
+      width: 100%;
+      height: 40px;
+      max-width: 220px;
+      text-transform: uppercase;
+      text-align: center;
+      font-size: 1em;
+      border: 1px solid;
+      margin: 0 auto;
+      cursor: pointer;
+    }
+
+    #login, #create-account, #forgot-password {
+      text-align: center;
+      font-size: .875em;
+    }
+
+    /* register form */
+    .form-header {
+      width: 100%;
+      background-color: @menu-background;
+      padding: 4px 10px;
+      margin-bottom: 20px;
+      text-transform: uppercase;
+      color: #fff;
+    }
+
+    .form-group {
+      margin-bottom: 30px;
+    }
+
+    #Bastide_register_form {
+      .form-group {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0 40px
+      }
+
+      .form-controls {
+        width: calc(50% - 40px);
+        flex: auto;
+
+        &.condition {
+          display: flex;
+          flex-direction: row;
+
+          label {
+            text-transform: initial;
+          }
+        }
+      }
+    }
+  }
+
+
 }