Intégration Souke

common/views/alert_message.php

             <?php if(!$title && $icon): ?>
                 <i class="icon fa fa-<?= $icon ?>"></i>
             <?php endif; ?>
-            <?= nl2br(Html::encode($message)); ?>
+            <?php if(is_array($message)): ?>
+                <?php foreach($message as $key => $mess): ?>
+                    <?= nl2br(Html::encode($mess)); ?>
+                    <?php if($key !== array_key_last($message)): ?><br /><?php endif; ?>
+                <?php endforeach; ?>
+            <?php else: ?>
+                <?= nl2br(Html::encode($message)); ?>
+            <?php endif; ?>
         </p>
     </div>
 <?php endif; ?>

common/web/css/screen.css

   border: 0px none;
   padding: 20px;
 }
-/* line 137, ../sass/_common.scss */
+/* line 134, ../sass/_common.scss */
+#main .table .btn-secondary {
+  display: inline-block;
+  margin-bottom: 5px;
+}
+/* line 142, ../sass/_common.scss */
 #main form .control-label {
   font-family: 'worksans_medium';
 }
-/* line 141, ../sass/_common.scss */
+/* line 146, ../sass/_common.scss */
 #main form input[type="text"],
 #main form input[type="email"],
 #main form input[type="password"],
   border-radius: 0px;
   border: solid 1px #b7ab9b;
 }
-/* line 151, ../sass/_common.scss */
+/* line 156, ../sass/_common.scss */
 #main form .form-control:hover {
   border: solid 1px gray;
 }
-/* line 155, ../sass/_common.scss */
+/* line 160, ../sass/_common.scss */
 #main form .form-control:focus {
   -moz-box-shadow: 0px 0px 0px 1px #ee6f42;
   -webkit-box-shadow: 0px 0px 0px 1px #ee6f42;
   box-shadow: 0px 0px 0px 1px #ee6f42;
   border: solid 1px #ee6f42;
 }
-/* line 161, ../sass/_common.scss */
+/* line 166, ../sass/_common.scss */
 #main form .has-error .control-label {
   color: black;
 }
-/* line 165, ../sass/_common.scss */
+/* line 170, ../sass/_common.scss */
 #main form .has-error .form-control:focus, #main form .has-error .form-control {
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;
   border-color: #a94442;
 }
-/* line 170, ../sass/_common.scss */
+/* line 175, ../sass/_common.scss */
 #main form .has-error .help-block-error {
   color: #a94442;
 }
-/* line 175, ../sass/_common.scss */
+/* line 180, ../sass/_common.scss */
 #main form .form-buttons {
   text-align: right;
 }
 
 /* Divers */
-/* line 182, ../sass/_common.scss */
+/* line 187, ../sass/_common.scss */
 .float-left {
   float: left;
 }
 
-/* line 186, ../sass/_common.scss */
+/* line 191, ../sass/_common.scss */
 .float-right {
   float: right;
 }
 
-/* line 190, ../sass/_common.scss */
+/* line 195, ../sass/_common.scss */
 .clr {
   clear: both;
 }
 
 /* Navigation utilisateur en haut du site */
-/* line 195, ../sass/_common.scss */
+/* line 200, ../sass/_common.scss */
 .container-nav-user-top {
   position: relative;
   z-index: 999;
   background-color: white;
 }
-/* line 200, ../sass/_common.scss */
+/* line 205, ../sass/_common.scss */
 .container-nav-user-top .nav-user-top {
   position: absolute;
   top: 0px;
   background-color: white;
   z-index: 100;
 }
-/* line 207, ../sass/_common.scss */
+/* line 212, ../sass/_common.scss */
 .container-nav-user-top .nav-user-top .navbar {
   -moz-border-radius: 0px;
   -webkit-border-radius: 0px;
   margin: 0px;
   min-height: 0px;
 }
-/* line 214, ../sass/_common.scss */
+/* line 219, ../sass/_common.scss */
 .container-nav-user-top .nav-user-top .navbar ul {
   position: relative;
   left: -10px;
 }
-/* line 218, ../sass/_common.scss */
+/* line 223, ../sass/_common.scss */
 .container-nav-user-top .nav-user-top .navbar ul li {
   padding-left: 5px;
 }
-/* line 221, ../sass/_common.scss */
+/* line 226, ../sass/_common.scss */
 .container-nav-user-top .nav-user-top .navbar ul li a.nav-link {
   padding-left: 10px;
   padding-right: 10px;
   color: black;
   font-size: 16px;
 }
-/* line 230, ../sass/_common.scss */
+/* line 235, ../sass/_common.scss */
 .container-nav-user-top .nav-user-top .navbar ul li a.nav-link:hover, .container-nav-user-top .nav-user-top .navbar ul li a.nav-link:focus, .container-nav-user-top .nav-user-top .navbar ul li a.nav-link.active {
   background: none;
   color: #ee6f42;
 }
-/* line 235, ../sass/_common.scss */
+/* line 240, ../sass/_common.scss */
 .container-nav-user-top .nav-user-top .navbar ul li a.nav-link .bi {
   color: #ee6f42;
   font-size: 16px;
   position: relative;
   top: 1px;
 }
-/* line 245, ../sass/_common.scss */
+/* line 250, ../sass/_common.scss */
 .container-nav-user-top .nav-user-top .navbar ul li .dropdown-menu a {
   padding: 2px 20px;
 }
-/* line 248, ../sass/_common.scss */
+/* line 253, ../sass/_common.scss */
 .container-nav-user-top .nav-user-top .navbar ul li .dropdown-menu a:hover, .container-nav-user-top .nav-user-top .navbar ul li .dropdown-menu a:focus {
   background-color: #ece4d8;
 }
-/* line 257, ../sass/_common.scss */
+/* line 262, ../sass/_common.scss */
 .container-nav-user-top .nav-user-top .dropdown-menu {
   z-index: 9999;
 }
-/* line 259, ../sass/_common.scss */
+/* line 264, ../sass/_common.scss */
 .container-nav-user-top .nav-user-top .dropdown-menu .divider.dropdown-header {
   padding: 0px;
 }
 
 @media screen and (max-width: 991px) {
-  /* line 272, ../sass/_common.scss */
+  /* line 277, ../sass/_common.scss */
   .container-nav-user-top .nav-user-top {
     position: relative;
   }
-  /* line 276, ../sass/_common.scss */
+  /* line 281, ../sass/_common.scss */
   .container-nav-user-top .nav-user-top .navbar ul {
     width: 100%;
     display: block;
     margin-right: 0px;
     text-align: center;
   }
-  /* line 282, ../sass/_common.scss */
+  /* line 287, ../sass/_common.scss */
   .container-nav-user-top .nav-user-top .navbar ul li {
     display: inline-block;
   }
-  /* line 286, ../sass/_common.scss */
+  /* line 291, ../sass/_common.scss */
   .container-nav-user-top .nav-user-top .navbar ul li.nav-item-producers .dropdown-menu {
     right: -95px;
   }
-  /* line 293, ../sass/_common.scss */
+  /* line 298, ../sass/_common.scss */
   .container-nav-user-top .nav-user-top .navbar .link-text {
     display: none;
   }
-  /* line 297, ../sass/_common.scss */
+  /* line 302, ../sass/_common.scss */
   .container-nav-user-top .nav-user-top .navbar .dropdown-menu {
     position: absolute;
     right: 5%;
     -webkit-box-shadow: 0px 0px 4px gray;
     box-shadow: 0px 0px 4px gray;
   }
-  /* line 306, ../sass/_common.scss */
+  /* line 311, ../sass/_common.scss */
   .container-nav-user-top .nav-user-top .navbar .dropdown-menu li a {
     padding-left: 15px;
   }
 }
 /* Block de date */
-/* line 319, ../sass/_common.scss */
+/* line 324, ../sass/_common.scss */
 .block-date {
   margin: 0px auto;
   padding-top: 0px;
   text-align: center;
 }
-/* line 324, ../sass/_common.scss */
+/* line 329, ../sass/_common.scss */
 .block-date .day {
   text-transform: capitalize;
   line-height: 15px;
   font-size: 15px;
   text-transform: uppercase;
 }
-/* line 331, ../sass/_common.scss */
+/* line 336, ../sass/_common.scss */
 .block-date .num {
   font-size: 30px;
   line-height: 35px;
   font-weight: bold;
 }
-/* line 337, ../sass/_common.scss */
+/* line 342, ../sass/_common.scss */
 .block-date .month {
   text-transform: uppercase;
   line-height: 15px;
 }
 
 /* Page d'erreur */
-/* line 347, ../sass/_common.scss */
+/* line 352, ../sass/_common.scss */
 #main #content .site-error .col-lg-6 {
   margin: 0px auto;
   float: none;
 }
-/* line 353, ../sass/_common.scss */
+/* line 358, ../sass/_common.scss */
 #main #content .site-error .panel .panel-body {
   padding-bottom: 0px;
 }
-/* line 357, ../sass/_common.scss */
+/* line 362, ../sass/_common.scss */
 #main #content .site-error .panel h2 {
   text-transform: none;
   font-size: 25px;
   margin-top: 0px;
   margin-bottom: 0px;
 }
-/* line 365, ../sass/_common.scss */
+/* line 370, ../sass/_common.scss */
 #main #content .site-error .alert {
   padding-bottom: 5px;
 }
-/* line 368, ../sass/_common.scss */
+/* line 373, ../sass/_common.scss */
 #main #content .site-error .alert h2 {
   margin-top: 5px;
 }
-/* line 372, ../sass/_common.scss */
+/* line 377, ../sass/_common.scss */
 #main #content .site-error .alert p {
   margin-bottom: 15px;
 }
-/* line 376, ../sass/_common.scss */
+/* line 381, ../sass/_common.scss */
 #main #content .site-error .alert .btn {
   text-decoration: none;
 }
 
 /* Paiement */
-/* line 387, ../sass/_common.scss */
+/* line 392, ../sass/_common.scss */
 .payment-detail-remaining-surplus {
   font-size: 13px;
   color: gray;
 }
-/* line 391, ../sass/_common.scss */
+/* line 396, ../sass/_common.scss */
 .payment-detail-remaining-surplus strong {
   font-weight: bold;
 }

common/web/sass/_common.scss

         }
       }
     }
+
+    .btn-secondary {
+      display: inline-block;
+      margin-bottom: 5px;
+    }
   }
 
   /* Formulaires */

frontend/web/css/screen.css

     background-color: #e4ac07;
     color: white;
   }
+  /* line 113, ../sass/_responsive.scss */
+  #header nav .collapse ul li a:hover {
+    border: 0px none;
+  }
 
-  /* line 119, ../sass/_responsive.scss */
+  /* line 123, ../sass/_responsive.scss */
   #content {
     padding-top: 20px;
     padding-bottom: 20px;
   }
-  /* line 124, ../sass/_responsive.scss */
+  /* line 128, ../sass/_responsive.scss */
   #content .panel.panel-padding-large .panel-body {
     padding: 20px;
   }
 
-  /* line 130, ../sass/_responsive.scss */
+  /* line 134, ../sass/_responsive.scss */
   #footer a {
     padding: 0px 5px;
   }
 
-  /* line 135, ../sass/_responsive.scss */
+  /* line 139, ../sass/_responsive.scss */
   .site-producers #wrapper-producers-map {
     display: none;
   }
 }
 @media screen and (max-width: 768px) {
-  /* line 143, ../sass/_responsive.scss */
+  /* line 147, ../sass/_responsive.scss */
   #main {
     padding-bottom: 0px;
     min-height: 550px;
   }
-  /* line 147, ../sass/_responsive.scss */
+  /* line 151, ../sass/_responsive.scss */
   #main .container {
     padding-left: 15px;
     padding-right: 15px;
   }
 
-  /* line 153, ../sass/_responsive.scss */
+  /* line 157, ../sass/_responsive.scss */
   #footer {
     position: relative;
   }
-  /* line 156, ../sass/_responsive.scss */
+  /* line 160, ../sass/_responsive.scss */
   #footer .bull {
     display: none;
   }
-  /* line 160, ../sass/_responsive.scss */
+  /* line 164, ../sass/_responsive.scss */
   #footer a {
     display: block;
     text-align: center;
   }
 
-  /* line 168, ../sass/_responsive.scss */
+  /* line 172, ../sass/_responsive.scss */
   .site-iamproducer .panel .hook {
     margin-bottom: 25px;
   }
-  /* line 171, ../sass/_responsive.scss */
+  /* line 175, ../sass/_responsive.scss */
   .site-iamproducer .panel .hook br {
     display: none;
   }
-  /* line 175, ../sass/_responsive.scss */
+  /* line 179, ../sass/_responsive.scss */
   .site-iamproducer .panel .hook .word-animate {
     font-size: 20px;
   }
-  /* line 181, ../sass/_responsive.scss */
+  /* line 185, ../sass/_responsive.scss */
   .site-iamproducer .panel .links a {
     display: block;
     margin-bottom: 5px;
   }
-  /* line 188, ../sass/_responsive.scss */
+  /* line 192, ../sass/_responsive.scss */
   .site-iamproducer .producer, .site-iamproducer .users {
     padding-right: 0px;
   }
-  /* line 192, ../sass/_responsive.scss */
+  /* line 196, ../sass/_responsive.scss */
   .site-iamproducer .users {
     padding-left: 0px;
   }
-  /* line 195, ../sass/_responsive.scss */
+  /* line 199, ../sass/_responsive.scss */
   .site-iamproducer .users .panel {
     margin-bottom: 0px;
   }
 
-  /* line 202, ../sass/_responsive.scss */
+  /* line 206, ../sass/_responsive.scss */
   .site-producers #wrapper-producers-list {
     padding: 0px;
   }
-  /* line 207, ../sass/_responsive.scss */
+  /* line 211, ../sass/_responsive.scss */
   .site-producers #wrapper-producers-list #producers-list .panel .panel-body {
     text-align: center;
   }
-  /* line 210, ../sass/_responsive.scss */
+  /* line 214, ../sass/_responsive.scss */
   .site-producers #wrapper-producers-list #producers-list .panel .panel-body .logo {
     display: none;
   }
-  /* line 218, ../sass/_responsive.scss */
+  /* line 222, ../sass/_responsive.scss */
   .site-producers #producers-map {
     display: none;
   }
 
-  /* line 224, ../sass/_responsive.scss */
+  /* line 228, ../sass/_responsive.scss */
   .site-about .col-md-8, .site-about .col-md-4 {
     padding: 0px;
   }
+  /* line 232, ../sass/_responsive.scss */
+  .site-about #few-numbers {
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
 
-  /* line 230, ../sass/_responsive.scss */
+  /* line 239, ../sass/_responsive.scss */
   .site-contact .col-lg-5 {
     padding: 0px;
   }
-  /* line 234, ../sass/_responsive.scss */
+  /* line 243, ../sass/_responsive.scss */
   .site-contact .alert-dark {
     margin-top: 20px;
   }
 
-  /* line 240, ../sass/_responsive.scss */
+  /* line 249, ../sass/_responsive.scss */
   #content .site-service #panel-go-further {
     margin-bottom: 0px;
   }
-  /* line 243, ../sass/_responsive.scss */
+  /* line 252, ../sass/_responsive.scss */
   #content .site-service #panel-go-further a {
     display: block;
     margin-bottom: 5px;
   }
 
-  /* line 251, ../sass/_responsive.scss */
+  /* line 260, ../sass/_responsive.scss */
   #page-producer .buttons-login-signup {
     display: block;
     margin-bottom: 20px;
     text-align: center;
   }
-  /* line 256, ../sass/_responsive.scss */
+  /* line 265, ../sass/_responsive.scss */
   #page-producer .buttons-login-signup a {
     float: none;
   }

frontend/web/sass/_responsive.scss

                 background-color: $color-secondary;
                 color: white;
               }
+
+              &:hover {
+                border: 0px none;
+              }
             }
           }
         }
     .col-md-8, .col-md-4 {
       padding: 0px;
     }
+
+    #few-numbers {
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
   }
 
   .site-contact {

producer/views/layouts/main.php

         #main .btn-primary,
         .order-order #main #app-order-order #steps ul li .btn.btn-primary,
         ul.pagination li.active a, ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active,
-        .order-order #main #app-order-order table#products tr.total .price-total span {
+        .order-order #main #app-order-order table#products tr.total .price-total span,
+        .subscription-create .subscription-form .products tr.total .price-total span,
+        .subscription-update .subscription-form .products tr.total .price-total span {
             background-color: <?= $mainColor ?>;
         }
         #main .badge.bg-primary {
         }
         .order-order #main #app-order-order table#products tr.category-open td.category-name,
         .order-order #main #app-order-order table#products tr.category-closed td.category-name:hover{
-            border-color: <?= $mainColor ?>;
+            border-left-color: <?= $mainColor ?>;
         }
     </style>
 </head>
             $credit = '';
             if (isset($userProducer) && $userProducer) {
                 $labelType = $userProducer->credit > 0 ? 'success' : 'danger';
-                $credit = ' <span class="label label-' . $labelType . '">' . number_format($userProducer->credit, 2) . ' €</span>';
+                $credit = ' <span class="label label-' . $labelType . '">' . number_format($userProducer->credit, 2, ',', ' ') . ' €</span>';
             }
 
             $countSubcriptions = 0;

producer/views/order/order.php

                                             mode="single"
                                             color="green"
                                             :columns="calendar.columns"
-                                            :formats="calendar.formats"
+                                            :masks="calendar.masks"
                                             :theme-styles="calendar.themeStyles"
                                             :attributes="calendar.attrs"
                                             :available-dates="calendar.availableDates"
                                 <thead>
                                 <tr>
                                     <th>Point de vente</th>
-                                    <th>Localité</th>
+                                    <th class="column-locality">Localité</th>
                                     <th></th>
                                 </tr>
                                 </thead>
                                         <div class="comment" v-if="pointSale.userPointSale">
                                             {{ pointSale.userPointSale.comment }}
                                         </div>
+                                        <div class="locality">{{ pointSale.locality }}</div>
                                         <div class="comment" v-if="pointSale.infos && pointSale.infos.length > 0"
                                              v-html="pointSale.infos"></div>
                                         <div class="minimum-order-amount" v-if="pointSale.minimum_order_amount">
                                             Montant minimum de commande : {{ formatPrice(pointSale.minimum_order_amount) }}
                                         </div>
                                     </td>
-                                    <td class="locality">{{ pointSale.locality }}</td>
+                                    <td class="column-locality">{{ pointSale.locality }}</td>
                                     <td class="actions">
                                         <template
                                                 v-if="(order == null || order.id_point_sale != pointSale.id) && pointSale.maximum_number_orders && pointSale.count_orders && pointSale.count_orders >= pointSale.maximum_number_orders">
                                                 <span class="badge bg-secondary">{{ countProductsByCategory(category) }}<!-- produit<template
                                                             v-if="countProductsByCategory(category) > 1">s</template>--></span>
                                                 <span v-if="countSelectedProductsByCategory(category) > 0"
-                                                      class="badge bg-primary">{{ countSelectedProductsByCategory(category) }}<!-- produit<template
-                                                            v-if="countSelectedProductsByCategory(category) > 1">s</template>--> sélectionné<template
-                                                            v-if="countSelectedProductsByCategory(category) > 1">s</template></span>
+                                                      class="badge badge-count-selected-products bg-primary">{{ countSelectedProductsByCategory(category) }}<!-- produit<template
+                                                            v-if="countSelectedProductsByCategory(category) > 1">s</template>--><span> sélectionné<template
+                                                                v-if="countSelectedProductsByCategory(category) > 1">s</template></span></span>
                                             </td>
                                         </tr>
                                         <template v-if="(categoryCurrent && categoryCurrent.id == category.id) || category.id == null">
                                             </div>
                                         </template>
                                         <template v-else>
-                                            <div class="card credit">
+                                            <div class="card credit" v-if="user && producer.credit == 1 && pointSaleActive.credit == 1 && (pointSaleActive.credit_functioning != 'user' || (pointSaleActive.credit_functioning == 'user' && user.credit_active))">
                                                 <div class="card-body">
                                                     <h5 class="card-title">
                                                         <label for="order-comment">
                                                         </label>
                                                     </h5>
                                                     <div class="card-text">
-                                                        <div v-if="user && producer.credit == 1 && pointSaleActive.credit == 1 && (pointSaleActive.credit_functioning != 'user' || (pointSaleActive.credit_functioning == 'user' && user.credit_active))">
-                                                            <input type="checkbox" id="use-credit" v-model="useCredit" disabled="disabled"
-                                                                   v-if="pointSaleActive.credit_functioning == 'mandatory' || (pointSaleActive.credit_functioning == 'user' && user.credit_active)"/>
-                                                            <input type="checkbox" id="use-credit" v-model="useCredit" v-else/> <label
-                                                                    for="use-credit">Utiliser ma cagnotte ({{ formatPrice(user.credit)
-                                                                }})</label>
+                                                        <input type="checkbox" id="use-credit" v-model="useCredit" disabled="disabled"
+                                                               v-if="pointSaleActive.credit_functioning == 'mandatory' || (pointSaleActive.credit_functioning == 'user' && user.credit_active)"/>
+                                                        <input type="checkbox" id="use-credit" v-model="useCredit" v-else/> <label
+                                                                for="use-credit">Utiliser ma cagnotte ({{ formatPrice(user.credit)
+                                                            }})</label>
 
-                                                            <div class="info" v-if="useCredit">
-                                                                <template v-if="order == null || order.amount_paid == 0">
-                                                                    <span v-if="checkCreditLimit(order)">{{ priceTotal(true) }} seront débités</span>
-                                                                    <span v-else>
-                                                {{ formatPrice(user.credit) }} seront débités. (Limite de crédit à {{ formatPrice(producer.credit_limit) }})<br/>
-                                                Restera {{ formatPrice(priceTotal() - user.credit) }} à régler.
-                                            </span>
-                                                                </template>
-                                                                <template
-                                                                        v-else-if="order != null && order.amount_paid > 0 && order.amount_paid < priceTotal()">
-                                                                    <span v-if="checkCreditLimit(order)">{{ formatPrice(priceTotal() - order.amount_paid) }} seront débités</span>
-                                                                    <span v-else>
-                                                {{ formatPrice(user.credit) }} seront débités. (Limite de crédit à {{ formatPrice(producer.credit_limit) }})<br/>
-                                                Restera {{ formatPrice(priceTotal() - order.amount_paid - user.credit) }} à régler.
-                                            </span>
-                                                                </template>
-                                                                <template v-else-if="order != null && order.amount_paid > priceTotal()">
-                                                                    <span>{{ formatPrice(order.amount_paid - priceTotal()) }} seront remboursés</span>
-                                                                </template>
-                                                            </div>
+                                                        <div class="info" v-if="useCredit">
+                                                            <template v-if="order == null || order.amount_paid == 0">
+                                                                <span v-if="checkCreditLimit(order)">{{ priceTotal(true) }} seront débités</span>
+                                                                <span v-else>
+                                            {{ formatPrice(user.credit) }} seront débités. (Limite de crédit à {{ formatPrice(producer.credit_limit) }})<br/>
+                                            Restera {{ formatPrice(priceTotal() - user.credit) }} à régler.
+                                        </span>
+                                                            </template>
+                                                            <template
+                                                                    v-else-if="order != null && order.amount_paid > 0 && order.amount_paid < priceTotal()">
+                                                                <span v-if="checkCreditLimit(order)">{{ formatPrice(priceTotal() - order.amount_paid) }} seront débités</span>
+                                                                <span v-else>
+                                            {{ formatPrice(user.credit) }} seront débités. (Limite de crédit à {{ formatPrice(producer.credit_limit) }})<br/>
+                                            Restera {{ formatPrice(priceTotal() - order.amount_paid - user.credit) }} à régler.
+                                        </span>
+                                                            </template>
+                                                            <template v-else-if="order != null && order.amount_paid > priceTotal()">
+                                                                <span>{{ formatPrice(order.amount_paid - priceTotal()) }} seront remboursés</span>
+                                                            </template>
                                                         </div>
                                                     </div>
                                                 </div>
                                         </template>
                                     </div>
                                 </div>
-
                             </div>
                             <div class="alert alert-warning" v-else>
                                 Aucun produit disponible

producer/views/site/points-sale.php

                 }
             ],
             [
-                'label' => 'Informations',
+                'label' => 'Jours',
                 'format' => 'raw',
                 'contentOptions' => ['class' => 'days'],
                 'value' => function ($model) use ($distributionModule) {

producer/views/subscription/_form.php

                 <thead>
                 <tr>
                     <th>Nom</th>
-                    <th>Localité</th>
                     <th></th>
                 </tr>
                 </thead>
                 <tr v-for="pointSale in pointsSale" v-if="pointSale"
                     :class="(pointSaleActive && pointSale.id == pointSaleActive.id) ? 'selected' : ''">
                     <td class="name">
-                        <span class="the-name">{{ pointSale.name }}</span>
+                        <div class="the-name">{{ pointSale.name }}</div>
+                        <div class="locality">{{ pointSale.locality }}</div>
                         <div class="comment" v-if="pointSale.userPointSale">
                             {{ pointSale.userPointSale.comment }}
                         </div>
                     </td>
-                    <td class="locality">{{ pointSale.locality }}</td>
                     <td class="actions">
                         <div :class="'form-group' + (pointSale.invalid_code ? ' has-error' : '')">
                             <div class="input-group" v-if="pointSale.code && pointSale.code.length > 0">
                         <button class="btn btn-primary" @click.prevent="pointSaleClick"
                                 :data-code="pointSale.code && pointSale.code.length > 0"
                                 :data-id-point-sale="pointSale.id">
-                            <span class="glyphicon glyphicon-map-marker"></span>
+                            <span class="bi bi-geo-alt"></span>
                             Choisir
                         </button>
                     </td>
                 <tbody>
                 <tr v-for="product in products" v-if="checkProductAvailable(product)">
                     <td>
-                        <span class="name">{{ product.name }}</span>
-                        <span class="other">
-                            <span v-if="product.description.length">/</span> 
-                            <span class="description">{{ product.description }}</span> 
-                            <span v-if="product.weight">({{ product.weight }}g)</span>
-                        </span>
-                        <div class="recipe" v-if="product.recipe.length">{{ product.recipe }}</div>
+                        <div class="name">{{ product.name }} <span v-if="product.weight">({{ product.weight }}g)</span></div>
+                        <div class="description">{{ product.description }}</div>
+                        <div class="recipe" v-if="product.recipe.length">{{ product.recipe }}</div>
                     </td>
                     <td class="price-unit">
                         {{ formatPrice(product.price_with_tax) }}<br/><span
                         </div>
                     </td>
                     <td class="price-total">
-                        {{ formatPrice(product.price_with_tax * (product.quantity_form / product.coefficient_unit )) }}
+                        <template v-if="product.quantity_form">{{ formatPrice(product.price_with_tax * (product.quantity_form / product.coefficient_unit )) }}</template>
                     </td>
                 </tr>
                 <tr class="total">
                     <td colspan="3"></td>
-                    <td class="price-total">{{ priceTotal(true) }}</td>
+                    <td class="price-total">
+                        <span>{{ priceTotal(true) }}</span>
+                    </td>
                 </tr>
                 </tbody>
             </table>
         <?php endif; ?>
 
         <div class="form-buttons">
-            <button class="btn btn-primary" disabled="disabled" v-if="disableSubmitButton">Enregistrer</button>
+            <button class="btn btn-primary" disabled="disabled" v-if="disableSubmitButton">
+                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+                Enregistrer
+            </button>
             <button class="btn btn-primary" v-else>Enregistrer</button>
         </div>
     </form>

producer/views/subscription/index.php

         'format' => 'raw',
         'filter' => ArrayHelper::map(PointSale::find()->where(['id_producer' => GlobalParam::getCurrentProducerId()])->asArray()->all(), 'id', 'name'),
         'value' => function ($model) {
+            $html = '';
             if ($model->pointSale) {
-                return Html::encode($model->pointSale->name);
+                $html .= Html::encode($model->pointSale->name);
+                $html .= '<br /><span class="locality">'. Html::encode($model->pointSale->locality). '</span>';
             }
-            return '';
+            return $html;
         }
     ],
     [

producer/web/css/screen.css

 }
 /* line 143, ../sass/order/_order.scss */
 .order-order #main #app-order-order #legend #order-date-color {
-  background-color: #ee6f42;
+  background-color: #198754;
+  border: solid 2px #198754;
 }
-/* line 146, ../sass/order/_order.scss */
+/* line 147, ../sass/order/_order.scss */
 .order-order #main #app-order-order #legend #distribution-date-color {
-  background-color: #5cb85c;
+  background-color: white;
+  border: solid 2px #198754;
 }
-/* line 151, ../sass/order/_order.scss */
+/* line 153, ../sass/order/_order.scss */
 .order-order #main #app-order-order #calendar {
   margin-bottom: 15px;
 }
-/* line 153, ../sass/order/_order.scss */
+/* line 155, ../sass/order/_order.scss */
 .order-order #main #app-order-order #calendar .c-header .c-title-layout .c-title-popover .c-title-anchor .c-title[data-v-2083cb72] {
   font-size: 2rem;
 }
-/* line 156, ../sass/order/_order.scss */
+/* line 158, ../sass/order/_order.scss */
 .order-order #main #app-order-order #calendar .c-day-background {
   padding: 20px;
 }
-/* line 161, ../sass/order/_order.scss */
+/* line 163, ../sass/order/_order.scss */
 .order-order #main #app-order-order #calendar .c-day:hover .c-day-background {
   background-color: #ee6f42 !important;
   color: white !important;
 }
-/* line 167, ../sass/order/_order.scss */
+/* line 169, ../sass/order/_order.scss */
 .order-order #main #app-order-order #calendar .c-day-popover-content {
   font-size: 1.3rem;
 }
-/* line 175, ../sass/order/_order.scss */
+/* line 177, ../sass/order/_order.scss */
 .order-order #main #app-order-order #credit-online-payment .panel .panel-heading .btn-default {
   float: right;
   position: relative;
   top: -5px;
 }
-/* line 186, ../sass/order/_order.scss */
+/* line 188, ../sass/order/_order.scss */
 .order-order #main #app-order-order #content-step-date #distributions-list .card {
   margin-bottom: 20px;
 }
-/* line 189, ../sass/order/_order.scss */
+/* line 191, ../sass/order/_order.scss */
 .order-order #main #app-order-order #content-step-date #distributions-list .card .btn-primary {
   float: right;
 }
-/* line 193, ../sass/order/_order.scss */
+/* line 195, ../sass/order/_order.scss */
 .order-order #main #app-order-order #content-step-date #distributions-list .card .date {
   font-size: 1.2rem;
   line-height: 1.4rem;
   text-transform: uppercase;
   font-family: 'worksans_semibold';
 }
-/* line 200, ../sass/order/_order.scss */
+/* line 202, ../sass/order/_order.scss */
 .order-order #main #app-order-order #content-step-date #distributions-list .card .point-sales {
   color: gray;
   font-size: 14px;
   margin-top: 8px;
 }
-/* line 209, ../sass/order/_order.scss */
+/* line 211, ../sass/order/_order.scss */
 .order-order #main #app-order-order .block-actions {
-  text-align: right;
+  text-align: center;
   margin-top: 20px;
 }
-/* line 216, ../sass/order/_order.scss */
+/* line 218, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#points-sale td.name .the-name {
   color: black;
   font-size: 1.2em;
   line-height: 1.4em;
   font-family: 'worksans_semibold';
 }
-/* line 223, ../sass/order/_order.scss */
+/* line 225, ../sass/order/_order.scss */
+.order-order #main #app-order-order table#points-sale td.name .locality {
+  display: none;
+}
+/* line 229, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#points-sale td.name .comment,
 .order-order #main #app-order-order table#points-sale td.name .minimum-order-amount {
   color: gray;
 }
-/* line 227, ../sass/order/_order.scss */
+/* line 233, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#points-sale td.name .comment a,
 .order-order #main #app-order-order table#points-sale td.name .minimum-order-amount a {
   color: #ee6f42;
 }
-/* line 233, ../sass/order/_order.scss */
+/* line 239, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#points-sale td.actions {
   width: 150px;
 }
-/* line 235, ../sass/order/_order.scss */
+/* line 241, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#points-sale td.actions button {
   width: 100%;
 }
-/* line 249, ../sass/order/_order.scss */
+/* line 253, ../sass/order/_order.scss */
+.order-order #main #app-order-order table#products {
+  border-top: solid 1px #b7ab9b;
+  border-left: solid 1px #b7ab9b;
+  border-right: solid 1px #b7ab9b;
+}
+/* line 259, ../sass/order/_order.scss */
+.order-order #main #app-order-order table#products thead {
+  display: none;
+}
+/* line 263, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products td {
-  border-color: #e0e0e0;
+  border-bottom: solid 1px #b7ab9b;
+  border-left: 0px none;
+  border-right: 0px none;
 }
-/* line 255, ../sass/order/_order.scss */
+/* line 271, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products tr.category-closed:hover td.category-name,
 .order-order #main #app-order-order table#products tr.category-open td.category-name {
   padding-left: 30px;
   background-color: #f4efe8;
 }
-/* line 262, ../sass/order/_order.scss */
+/* line 278, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products td.category-name {
   transition: all 0.1s linear;
-  background-color: white;
   background-color: #f4efe8;
-  border-left: solid 5px #ece4d8;
+  border-left: solid 5px #b7ab9b;
   font-family: "worksans_bold";
   font-size: 22px;
   line-height: 30px;
   padding-top: 13px;
   padding-left: 20px;
 }
-/* line 274, ../sass/order/_order.scss */
+/* line 289, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products td.category-name .bi-caret-down-fill,
 .order-order #main #app-order-order table#products td.category-name .bi-caret-right-fill {
   font-size: 15px;
 }
-/* line 279, ../sass/order/_order.scss */
+/* line 294, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products td.category-name span.badge {
   font-family: "worksans_bold";
   text-transform: uppercase;
   position: relative;
   top: -3px;
 }
-/* line 287, ../sass/order/_order.scss */
+/* line 302, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products td.category-name span.badge.bg-primary {
   float: right;
   top: 2px;
 }
-/* line 293, ../sass/order/_order.scss */
+/* line 308, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products td.category-name:hover {
   cursor: pointer;
   background-color: white;
 }
-/* line 300, ../sass/order/_order.scss */
+/* line 315, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products td.photo img {
   width: 100px;
 }
-/* line 310, ../sass/order/_order.scss */
+/* line 325, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products .price-unit .decreasing-prices {
   margin-top: 10px;
   font-size: 10px;
   padding-bottom: 2px;
   margin-bottom: 0px;
 }
-/* line 318, ../sass/order/_order.scss */
+/* line 333, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products .price-unit .decreasing-prices ul li {
   margin-bottom: 5px;
 }
-/* line 320, ../sass/order/_order.scss */
+/* line 335, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products .price-unit .decreasing-prices ul li strong {
   font-weight: bold;
 }
-/* line 328, ../sass/order/_order.scss */
+/* line 343, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products .price-unit, .order-order #main #app-order-order table#products .price-total {
   width: 135px;
   text-align: center;
 }
-/* line 332, ../sass/order/_order.scss */
+/* line 347, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products .price-unit .price-infos, .order-order #main #app-order-order table#products .price-total .price-infos {
   color: gray;
   font-size: 13px;
   line-height: 15px;
 }
-/* line 338, ../sass/order/_order.scss */
+/* line 354, ../sass/order/_order.scss */
+.order-order #main #app-order-order table#products tr.product-open td.price-total {
+  font-size: 1.1rem;
+  font-family: 'worksans_bold';
+  padding-top: 19px;
+}
+/* line 360, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products .td-quantity {
   width: 175px;
 }
-/* line 341, ../sass/order/_order.scss */
+/* line 363, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products .td-quantity input.quantity,
 .order-order #main #app-order-order table#products .td-quantity .input-group-text {
   background-color: white;
 }
-/* line 346, ../sass/order/_order.scss */
+/* line 368, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products .td-quantity input.quantity {
   text-align: center;
   border: 0px none;
 }
-/* line 350, ../sass/order/_order.scss */
+/* line 372, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products .td-quantity .input-group-text {
   border: 0px none;
   padding-right: 10px;
   padding-left: 0px;
   margin: 0px;
 }
-/* line 358, ../sass/order/_order.scss */
+/* line 380, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products .td-quantity .input-group-btn button {
   padding: 4px 5px 0px 5px;
 }
-/* line 360, ../sass/order/_order.scss */
+/* line 382, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products .td-quantity .input-group-btn button .bi {
   font-size: 1.5em;
   font-weight: bold;
   margin: 0px;
 }
-/* line 371, ../sass/order/_order.scss */
+/* line 393, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products tr.total .summary {
   padding: 25px;
 }
-/* line 374, ../sass/order/_order.scss */
+/* line 396, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products tr.total .summary h3 {
   font-family: 'worksans_bold';
   margin-top: 0px;
   text-transform: uppercase;
   margin-bottom: 5px;
 }
-/* line 381, ../sass/order/_order.scss */
+/* line 403, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products tr.total .summary ul {
   margin-bottom: 15px;
   padding-left: 20px;
   line-height: 1.4rem;
   list-style-type: disc;
 }
-/* line 389, ../sass/order/_order.scss */
+/* line 411, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products tr.total .summary ul li .quantity {
   font-weight: bold;
 }
-/* line 396, ../sass/order/_order.scss */
+/* line 418, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products tr.total .price-total {
   padding-top: 25px;
   font-size: 1.5rem;
   font-family: 'worksans_bold';
 }
-/* line 401, ../sass/order/_order.scss */
+/* line 423, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products tr.total .price-total span {
   display: inline-block;
   padding: 7px 15px;
   color: white;
   font-size: 1.2rem;
 }
-/* line 414, ../sass/order/_order.scss */
+/* line 436, ../sass/order/_order.scss */
 .order-order #main #app-order-order #content-step-payment .delivery {
   margin-bottom: 20px;
 }
-/* line 417, ../sass/order/_order.scss */
+/* line 439, ../sass/order/_order.scss */
 .order-order #main #app-order-order #content-step-payment .delivery .delivery-home {
   margin-bottom: 20px;
 }
-/* line 426, ../sass/order/_order.scss */
+/* line 448, ../sass/order/_order.scss */
 .order-order #main #app-order-order #content-step-payment .comment {
   margin-bottom: 20px;
 }
-/* line 431, ../sass/order/_order.scss */
+/* line 453, ../sass/order/_order.scss */
 .order-order #main #app-order-order #content-step-payment .credit .info {
   margin-left: 20px;
   color: gray;
 }
 
-/* line 444, ../sass/order/_order.scss */
+/* line 466, ../sass/order/_order.scss */
 #main #content .panel h3 {
   font-family: "worksans_bold";
   margin: 0px;
   color: gray;
 }
 
+/* line 4, ../sass/subscription/_index.scss */
+.subscription-index table .locality {
+  color: gray;
+}
+
 /* line 4, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form,
 .subscription-update .subscription-form {
 .subscription-update .subscription-form .block h3 {
   margin-bottom: 20px;
 }
-/* line 21, ../sass/subscription/_form.scss */
+/* line 22, ../sass/subscription/_form.scss */
+.subscription-create .subscription-form .points-sale .name .the-name,
+.subscription-update .subscription-form .points-sale .name .the-name {
+  font-family: 'worksans_semibold';
+  font-size: 1.2rem;
+  line-height: 1.4rem;
+  color: black;
+  margin-bottom: 5px;
+}
+/* line 31, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .points-sale .locality,
 .subscription-update .subscription-form .points-sale .locality {
   color: gray;
 }
-/* line 24, ../sass/subscription/_form.scss */
+/* line 34, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .points-sale label,
 .subscription-update .subscription-form .points-sale label {
   cursor: pointer;
 }
-/* line 30, ../sass/subscription/_form.scss */
+/* line 40, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .days .form-group,
 .subscription-update .subscription-form .days .form-group {
   float: left;
   margin-right: 15px;
 }
-/* line 39, ../sass/subscription/_form.scss */
+/* line 49, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .points-sale table tr.selected td,
 .subscription-update .subscription-form .points-sale table tr.selected td {
   background-color: white;
 }
-/* line 44, ../sass/subscription/_form.scss */
+/* line 54, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .points-sale table .the-name,
 .subscription-update .subscription-form .points-sale table .the-name {
   font-size: 20px;
   color: black;
 }
-/* line 49, ../sass/subscription/_form.scss */
+/* line 59, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .points-sale table .block-code,
 .subscription-update .subscription-form .points-sale table .block-code {
   width: 150px;
 }
-/* line 53, ../sass/subscription/_form.scss */
+/* line 63, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .points-sale table .actions,
 .subscription-update .subscription-form .points-sale table .actions {
   width: 150px;
 }
-/* line 56, ../sass/subscription/_form.scss */
+/* line 66, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .points-sale table .actions button,
 .subscription-update .subscription-form .points-sale table .actions button {
   width: 100%;
   display: block;
 }
-/* line 65, ../sass/subscription/_form.scss */
+/* line 75, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .dates label,
 .subscription-update .subscription-form .dates label {
   display: block;
 }
-/* line 70, ../sass/subscription/_form.scss */
+/* line 80, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .comment-textarea,
 .subscription-update .subscription-form .comment-textarea {
   width: 100%;
   height: 100px;
 }
-/* line 76, ../sass/subscription/_form.scss */
+/* line 86, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .products .monday, .subscription-create .subscription-form .products .tuesday, .subscription-create .subscription-form .products .wednesday, .subscription-create .subscription-form .products .thursday,
 .subscription-create .subscription-form .products .friday, .subscription-create .subscription-form .products .saturday, .subscription-create .subscription-form .products .sunday, .subscription-create .subscription-form .products .no-day,
 .subscription-update .subscription-form .products .monday,
 .subscription-update .subscription-form .products .no-day {
   display: none;
 }
-/* line 81, ../sass/subscription/_form.scss */
+/* line 91, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .products .monday-active .monday,
 .subscription-create .subscription-form .products .tuesday-active .tuesday,
 .subscription-create .subscription-form .products .wednesday-active .wednesday,
 .subscription-update .subscription-form .products .sunday-active .sunday {
   display: block;
 }
-/* line 91, ../sass/subscription/_form.scss */
+/* line 101, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .products td.quantity,
 .subscription-update .subscription-form .products td.quantity {
-  width: 180px;
+  width: 200px;
 }
-/* line 94, ../sass/subscription/_form.scss */
+/* line 104, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .products td.quantity input,
 .subscription-update .subscription-form .products td.quantity input {
   text-align: center;
   border: 0px none !important;
 }
-/* line 97, ../sass/subscription/_form.scss */
+/* line 107, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .products td.quantity input.has-quantity,
 .subscription-update .subscription-form .products td.quantity input.has-quantity {
   font-weight: bold;
 }
-/* line 102, ../sass/subscription/_form.scss */
+/* line 112, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .products td.quantity .input-group-text,
 .subscription-update .subscription-form .products td.quantity .input-group-text {
   background-color: white;
   padding-left: 0px;
   border: 0px none;
 }
-/* line 109, ../sass/subscription/_form.scss */
+/* line 119, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .products .name,
 .subscription-update .subscription-form .products .name {
-  font-size: 20px;
+  font-family: 'worksans_semibold';
+  font-size: 1.2rem;
+  line-height: 1.4rem;
+  color: black;
+  margin-bottom: 5px;
   color: black;
 }
-/* line 114, ../sass/subscription/_form.scss */
+/* line 127, ../sass/subscription/_form.scss */
+.subscription-create .subscription-form .products .name span,
+.subscription-update .subscription-form .products .name span {
+  font-family: 'worksans_regular';
+}
+/* line 132, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .products .description,
 .subscription-update .subscription-form .products .description {
-  font-style: italic;
+  margin-bottom: 5px;
 }
-/* line 118, ../sass/subscription/_form.scss */
+/* line 136, ../sass/subscription/_form.scss */
+.subscription-create .subscription-form .products .description,
 .subscription-create .subscription-form .products .recipe,
+.subscription-update .subscription-form .products .description,
 .subscription-update .subscription-form .products .recipe {
-  font-size: 12px;
+  font-size: 1rem;
+  color: gray;
 }
-/* line 122, ../sass/subscription/_form.scss */
+/* line 142, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .products .price-unit, .subscription-create .subscription-form .products .price-total,
 .subscription-update .subscription-form .products .price-unit,
 .subscription-update .subscription-form .products .price-total {
   text-align: center;
   width: 150px;
 }
-/* line 127, ../sass/subscription/_form.scss */
+/* line 147, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .products .unit,
 .subscription-update .subscription-form .products .unit {
   color: gray;
   font-size: 13px;
 }
-/* line 132, ../sass/subscription/_form.scss */
+/* line 152, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .products tr.total .price-total,
 .subscription-update .subscription-form .products tr.total .price-total {
   text-align: center;
   font-size: 20px;
 }
+/* line 156, ../sass/subscription/_form.scss */
+.subscription-create .subscription-form .products tr.total .price-total span,
+.subscription-update .subscription-form .products tr.total .price-total span {
+  font-family: 'worksans_bold';
+  display: inline-block;
+  padding: 7px 15px;
+  -moz-border-radius: 15px;
+  -webkit-border-radius: 15px;
+  border-radius: 15px;
+  color: white;
+  font-size: 1.2rem;
+}
+/* line 167, ../sass/subscription/_form.scss */
+.subscription-create .subscription-form .form-buttons,
+.subscription-update .subscription-form .form-buttons {
+  text-align: center !important;
+}
+/* line 170, ../sass/subscription/_form.scss */
+.subscription-create .subscription-form .form-buttons button,
+.subscription-update .subscription-form .form-buttons button {
+  display: inline-block;
+}
 
 /** 
 Copyright Souke (2018)
   #main #content #block-infos .card {
     margin-bottom: 20px;
   }
-  /* line 110, ../sass/_responsive.scss */
-  #main table#products td.photo, #main table#products th.photo {
-    display: none;
-  }
-  /* line 114, ../sass/_responsive.scss */
-  #main table#products .product {
-    font-size: 12px;
-  }
-  /* line 116, ../sass/_responsive.scss */
-  #main table#products .product .nom {
-    font-size: 15px;
-  }
-  /* line 122, ../sass/_responsive.scss */
-  #main table#products .td-quantity .input-group {
-    position: relative;
-  }
-  /* line 125, ../sass/_responsive.scss */
-  #main table#products .td-quantity .input-group .input-group-btn {
-    display: block;
-    width: 100%;
-  }
-  /* line 129, ../sass/_responsive.scss */
-  #main table#products .td-quantity .input-group .form-control.quantity {
-    text-align: left !important;
-  }
-  /* line 132, ../sass/_responsive.scss */
-  #main table#products .td-quantity .input-group .input-group-text {
-    position: absolute;
-    top: 42px;
-    right: 0px;
-    z-index: 10;
-    border: 0px none;
-  }
-  /* line 143, ../sass/_responsive.scss */
+  /* line 109, ../sass/_responsive.scss */
   #main #bar-fixed {
     position: relative;
   }
-  /* line 145, ../sass/_responsive.scss */
+  /* line 111, ../sass/_responsive.scss */
   #main #bar-fixed .btn-comment {
     float: none;
     display: block;
     margin-top: 15px;
   }
 
-  /* line 155, ../sass/_responsive.scss */
+  /* line 121, ../sass/_responsive.scss */
   .order-create #main #content .order-form #products .table .input-group,
   .order-update #main #content .order-form #products .table .input-group {
     width: 60px;
   }
-  /* line 159, ../sass/_responsive.scss */
+  /* line 125, ../sass/_responsive.scss */
   .order-create #main #content .order-form #products .table .input-group .form-control,
   .order-update #main #content .order-form #products .table .input-group .form-control {
     width: 20px;
     padding: 3px;
   }
 
-  /* line 165, ../sass/_responsive.scss */
+  /* line 131, ../sass/_responsive.scss */
   .order-create #main #content .order-form #bar-fixed #checkbox-credit,
   .order-update #main #content .order-form #bar-fixed #checkbox-credit {
     width: 100%;
     margin: 0px;
     padding: 5px 0px;
   }
-  /* line 171, ../sass/_responsive.scss */
+  /* line 137, ../sass/_responsive.scss */
   .order-create #main #content .order-form #bar-fixed #checkbox-credit .the-credit,
   .order-update #main #content .order-form #bar-fixed #checkbox-credit .the-credit {
     word-break: break-all;
   }
 
-  /* line 176, ../sass/_responsive.scss */
+  /* line 142, ../sass/_responsive.scss */
   .order-create #main #content .order-form #bar-fixed #block-confirm-order button,
   .order-update #main #content .order-form #bar-fixed #block-confirm-order button {
     width: 100%;
   }
 
-  /* line 184, ../sass/_responsive.scss */
+  /* line 150, ../sass/_responsive.scss */
   .order-order #app-order-order h3 {
     line-height: 28px;
   }
-  /* line 190, ../sass/_responsive.scss */
+  /* line 156, ../sass/_responsive.scss */
   .order-order #app-order-order #distributions-list .card .btn-primary {
     display: block;
     float: none !important;
     margin-bottom: 10px;
   }
-  /* line 199, ../sass/_responsive.scss */
+  /* line 165, ../sass/_responsive.scss */
   .order-order #app-order-order #steps ul {
     height: auto !important;
   }
-  /* line 201, ../sass/_responsive.scss */
+  /* line 167, ../sass/_responsive.scss */
   .order-order #app-order-order #steps ul li {
     padding-left: 0px !important;
     padding-right: 0px !important;
   }
-  /* line 205, ../sass/_responsive.scss */
+  /* line 171, ../sass/_responsive.scss */
   .order-order #app-order-order #steps ul li .info-step {
     display: none;
   }
-  /* line 209, ../sass/_responsive.scss */
+  /* line 175, ../sass/_responsive.scss */
   .order-order #app-order-order #steps ul li .btn::after,
   .order-order #app-order-order #steps ul li .btn::before {
     display: none;
   }
-  /* line 220, ../sass/_responsive.scss */
-  .order-order #app-order-order table#products td.name .recipe {
+  /* line 184, ../sass/_responsive.scss */
+  .order-order #app-order-order table#points-sale td.name .locality {
+    display: block !important;
+    color: gray;
+    margin-bottom: 5px;
+  }
+  /* line 190, ../sass/_responsive.scss */
+  .order-order #app-order-order table#points-sale .column-locality {
     display: none;
   }
-  /* line 226, ../sass/_responsive.scss */
-  .order-order #app-order-order table#products td.td-quantity .input-group-btn {
+  /* line 195, ../sass/_responsive.scss */
+  .order-order #app-order-order table#products {
     width: 100%;
-    display: block;
   }
-  /* line 230, ../sass/_responsive.scss */
-  .order-order #app-order-order table#products td.td-quantity .input-group-btn button {
+  /* line 197, ../sass/_responsive.scss */
+  .order-order #app-order-order table#products tr {
     width: 100%;
+    border-color: #b7ab9b !important;
+  }
+  /* line 202, ../sass/_responsive.scss */
+  .order-order #app-order-order table#products .badge-count-selected-products span {
+    display: none;
+  }
+  /* line 206, ../sass/_responsive.scss */
+  .order-order #app-order-order table#products td.photo,
+  .order-order #app-order-order table#products th.photo {
+    display: none;
+  }
+  /* line 211, ../sass/_responsive.scss */
+  .order-order #app-order-order table#products td.name,
+  .order-order #app-order-order table#products td.summary,
+  .order-order #app-order-order table#products td.price-unit,
+  .order-order #app-order-order table#products tr.total td.price-total {
     display: block;
+    width: 100% !important;
+  }
+  /* line 220, ../sass/_responsive.scss */
+  .order-order #app-order-order table#products td.td-quantity,
+  .order-order #app-order-order table#products tr.product-open td.price-total {
+    display: inline-block;
+    width: 49% !important;
+    border: 0px none !important;
+  }
+  /* line 227, ../sass/_responsive.scss */
+  .order-order #app-order-order table#products tr.product-open td.price-total {
+    padding-top: 22px;
+    font-size: 1.2rem;
+    font-family: "worksans_bold";
+  }
+  /* line 234, ../sass/_responsive.scss */
+  .order-order #app-order-order table#products td.name,
+  .order-order #app-order-order table#products td.price-unit,
+  .order-order #app-order-order table#products td.td-quantity {
+    border-color: #e0e0e0 !important;
+  }
+  /* line 241, ../sass/_responsive.scss */
+  .order-order #app-order-order table#products td.name .recipe {
+    display: none;
+  }
+  /* line 246, ../sass/_responsive.scss */
+  .order-order #app-order-order table#products td.price-unit {
+    text-align: left !important;
+  }
+  /* line 250, ../sass/_responsive.scss */
+  .order-order #app-order-order table#products tr.total td.price-total {
+    padding-top: 0.5rem !important;
   }
-  /* line 240, ../sass/_responsive.scss */
+  /* line 257, ../sass/_responsive.scss */
   .order-order #app-order-order #order-success .alert .glyphicon-big {
     font-size: 90px;
     color: white;
     text-align: center;
     margin-bottom: 20px;
   }
-  /* line 249, ../sass/_responsive.scss */
+  /* line 266, ../sass/_responsive.scss */
   .order-order #app-order-order #order-success .alert div.content {
     margin-left: 0px;
     text-align: center;
   }
 
-  /* line 260, ../sass/_responsive.scss */
+  /* line 277, ../sass/_responsive.scss */
   #footer .content {
     text-align: center;
   }
 }
 @media screen and (max-width: 991px) {
-  /* line 272, ../sass/_responsive.scss */
+  /* line 289, ../sass/_responsive.scss */
   #main {
     padding-top: 0px;
   }

producer/web/js/vuejs/order-order.js

                         return style;
                     },
                 },
-                formats: {
-                    dayPopover: 'DD/MM/YYYY'
+                masks: {
+                    //dayPopover: 'DD/MM/YYYY'
+                    dayPopover: ''
                 }
             }
         }, window.appInitValues);
                     if (distributions.length) {
                         app.distributions = distributions;
                         var arrayDate;
+                        var highlightStyle = {
+                            style: {
+                                background: 'white',
+                                border: 'solid 2px #198754'
+                            },
+                            contentStyle: {
+                                color: '#198754'
+                            }
+                        };
                         for (var i = 0; i < distributions.length; i++) {
                             app.calendar.attrs.push({
-                                highlight: true,
+                                highlight: highlightStyle,
                                 dates: distributions[i].date
                             });
 
                             arrayDate = distributions[i].date.split('-');
                             app.calendar.availableDates.push({
+                                highlight: highlightStyle,
                                 start: new Date(arrayDate[0], arrayDate[1] - 1, arrayDate[2]),
                                 end: new Date(arrayDate[0], arrayDate[1] - 1, arrayDate[2])
                             });
                             var dateOrder = new Date(arrayDate[0], arrayDate[1] - 1, arrayDate[2]);
                             if (app.isAvailableDate(dateOrder)) {
                                 app.calendar.attrs.push({
-                                    highlight: true,
+                                    highlight: {
+                                        style: {
+                                            background: '#198754'
+                                        },
+                                        contentStyle: {
+                                            color: 'white'
+                                        }
+                                    },
                                     popover: {
-                                        label: orders[i].pointSale.name + ' / ' + app.formatPrice(orders[i].amount_total),
-                                        hideIndicator: true
+                                        label: orders[i].pointSale.name + ' (' + app.formatPrice(orders[i].amount_total)+')',
+                                        hideIndicator: true,
+                                        isInteractive: true
                                     },
                                     dates: orders[i].date_distribution
                                 });

producer/web/sass/_responsive.scss

                 }
             }
         }
-        
-        table#products {
-            td.photo, th.photo {
-                display: none ;
-            }
-            
-            .product {
-                font-size: 12px ;
-                .nom {
-                    font-size: 15px ;
-                }
-            }
-
-            .td-quantity {
-                .input-group {
-                    position: relative;
 
-                    .input-group-btn {
-                        display: block;
-                        width: 100%;
-                    }
-                    .form-control.quantity {
-                        text-align: left !important;
-                    }
-                    .input-group-text {
-                        position: absolute;
-                        top: 42px;
-                        right: 0px;
-                        z-index: 10;
-                        border: 0px none;
-                    }
-                }
-            }
-        }
-        
         #bar-fixed {
             position: relative;
             .btn-comment {
                     }
                 }
             }
-            
+
+            table#points-sale {
+                td.name .locality {
+                    display: block !important;
+                    color: gray;
+                    margin-bottom: 5px;
+                }
+
+                .column-locality {
+                    display: none;
+                }
+            }
+
             table#products {
-                
+                width: 100%;
+                tr {
+                    width: 100%;
+                    border-color: $color-gray-dark !important;
+                }
+
+                .badge-count-selected-products span {
+                    display: none;
+                }
+
+                td.photo,
+                th.photo {
+                    display: none;
+                }
+
+                td.name,
+                td.summary,
+                td.price-unit,
+                tr.total td.price-total {
+                    display: block;
+                    width: 100% !important;
+                }
+
+
+                td.td-quantity,
+                tr.product-open td.price-total {
+                    display: inline-block;
+                    width: 49% !important;
+                    border: 0px none !important;
+                }
+
+                tr.product-open td.price-total {
+                    padding-top: 22px;
+                    font-size: 1.2rem;
+                    font-family: "worksans_bold";
+                }
+
+
+                td.name,
+                td.price-unit,
+                td.td-quantity {
+                    border-color: #e0e0e0 !important;
+                }
+
                 td.name {
                     .recipe {
                         display: none ;
                     }
                 }
-                
-                td.td-quantity {
-                    .input-group-btn {
-                        width: 100% ;
-                        display: block ;
-                        
-                        button {
-                            width: 100% ;
-                            display: block ;
-                        }
-                    }
+
+                td.price-unit {
+                    text-align: left !important;
+                }
+
+                tr.total td.price-total {
+                    padding-top: 0.5rem !important;
                 }
             }
             

producer/web/sass/order/_history.scss

             color: gray ;
         }
     }
-    
 }

producer/web/sass/order/_order.scss

             }
             
             #order-date-color {
-                background-color: $color-primary ;
+                background-color: #198754 ;
+                border: solid 2px #198754;
             }
             #distribution-date-color {
-                background-color: #5cb85c ;
+                background-color: white;
+                border: solid 2px #198754;
             }
         }
         
         }
         
         .block-actions {
-            text-align: right ;
+            text-align: center ;
             margin-top: 20px ;
         }
      
                     font-family: 'worksans_semibold';
                 }
 
+                .locality {
+                    display: none;
+                }
+
                 .comment,
                 .minimum-order-amount {
                     color: gray;
         
         table#products {
 
+            border-top: solid 1px $color-gray-dark;
+            border-left: solid 1px $color-gray-dark;
+            border-right: solid 1px $color-gray-dark;
+
+            thead {
+                display: none;
+            }
+
             td {
-                border-color: #e0e0e0;
+                border-bottom: solid 1px $color-gray-dark;
+                border-left: 0px none;
+                border-right: 0px none;
             }
 
             tr.category-closed:hover,
 
             td.category-name {
                 transition: all 0.1s linear;
-                background-color: white;
                 background-color: $color-gray-light;
-                border-left: solid 5px $color-gray;
+                border-left: solid 5px $color-gray-dark;
                 font-family: "worksans_bold" ;
                 font-size: 22px ;
                 line-height: 30px;
                     line-height: 15px;
                 }
             }
+
+            tr.product-open td.price-total {
+                font-size: 1.1rem ;
+                font-family: 'worksans_bold';
+                padding-top: 19px;
+            }
+
             .td-quantity {
                 width: 175px ;
 

producer/web/sass/screen.scss

 @import "order/_confirm.scss";
 @import "credit/_add.scss";
 @import "credit/_history.scss";
+@import "subscription/_index.scss";
 @import "subscription/_form.scss";
 @import "_responsive.scss";

producer/web/sass/subscription/_form.scss

         }
 
         .points-sale {
+            .name {
+                .the-name {
+                    font-family: 'worksans_semibold';
+                    font-size: 1.2rem ;
+                    line-height: 1.4rem ;
+                    color: black ;
+                    margin-bottom: 5px;
+                }
+            }
+
             .locality {
                 color: gray ;
             }
             }
             
             td.quantity {
-                width: 180px ;
+                width: 200px ;
                 
                 input {
                     text-align: center ;
             }
             
             .name  {
-                font-size: 20px ;
+                font-family: 'worksans_semibold';
+                font-size: 1.2rem ;
+                line-height: 1.4rem ;
                 color: black ;
+                margin-bottom: 5px;
+                color: black ;
+
+                span {
+                    font-family: 'worksans_regular';
+                }
             }
 
             .description {
-                font-style: italic;
-            }	
+                margin-bottom: 5px;
+            }
 
+            .description,
             .recipe {
-                font-size: 12px ;
+                font-size: 1rem;
+                color: gray;
             }
             
             .price-unit, .price-total {
             tr.total .price-total {
                 text-align: center ;
                 font-size: 20px ;
+
+                span {
+                    font-family: 'worksans_bold';
+                    display: inline-block;
+                    padding: 7px 15px;
+                    @include border-radius(15px);
+                    color: white;
+                    font-size: 1.2rem;
+                }
+            }
+        }
+
+        .form-buttons {
+            text-align: center !important;
+
+            button {
+                display: inline-block;
             }
         }
     }

producer/web/sass/subscription/_index.scss

+
+.subscription-index {
+  table {
+    .locality {
+      color: gray ;
+    }
+  }
+}