FO: Manage errors messages for voucher code

themes/_core/js/cart.js

@@ -64,7 +64,10 @@ $(document).ready(() => {
       // First perform the action using AJAX
       var actionURL = $(this).attr('action');
 
-      $.post(actionURL, $(this).serialize(), null, 'json').then(function() {
+      $.post(actionURL, $(this).serialize(), null, 'json').then(function(res) {
+        if(res.hasError){
+          return $('.js-error').show().find('.js-error-text').text(res.errors[0]);
+        }
         // If succesful, refresh cart preview
         prestashop.emit('cart updated', {
           reason: event.target.dataset
@@ -73,5 +76,3 @@ $(document).ready(() => {
     }
   );
 });
-
-

themes/classic/_dev/css/components/cart.scss

@@ -47,6 +47,26 @@
   .promo-code {
     padding: 1.60rem;
     background: $gray-light;
+    .alert-danger {
+      position: relative;
+      margin-top: rem(20px);
+      background: $brand-danger;
+      color: white;
+      display: none;
+      &::after {
+        bottom: 100%;
+        left: 10%;
+        border: solid transparent;
+        content: " ";
+        height: 0;
+        width: 0;
+        position: absolute;
+        pointer-events: none;
+        border-bottom-color:  $brand-danger;
+        border-width: 10px;
+        margin-left: -10px;
+      }
+    }
   }
   .promo-input {
     color: $gray-darker;
@@ -104,8 +124,8 @@
     max-width: rem(75px);
     @include pull-left;
     @include box-shadow;
-     > .input-group,
-    > .form-control {
+     > .form-control,
+    > .input-group {
       color: $gray-darker;
       background-color: white;
       border: $input-btn-border-width solid $input-border-color;

themes/classic/_dev/css/components/products.scss

@@ -359,6 +359,7 @@
       padding: $small-space;
       margin-right: $small-space;
       min-height: rem(40px);
+      word-break: break-all;
       &:nth-of-type(even) {
         background: $gray-lighter;
       }

themes/classic/_dev/js/checkout.js

@@ -18,6 +18,10 @@ function setupMyCheckoutScripts() {
 
     $('#modal').modal('show');
   });
+
+  $('.js-gift-checkbox').on('click', (event) => {
+    $('#gift').collapse('toggle');
+  });
 }
 
 $(document).ready(() => {

themes/classic/assets/js/theme.js

@@ -16412,6 +16412,10 @@
 
 	    (0, _jquery2['default'])('#modal').modal('show');
 	  });
+
+	  (0, _jquery2['default'])('.js-gift-checkbox').on('click', function (event) {
+	    (0, _jquery2['default'])('#gift').collapse('toggle');
+	  });
 	}
 
 	(0, _jquery2['default'])(document).ready(function () {

themes/classic/templates/checkout/_partials/cart-voucher.tpl

@@ -18,14 +18,17 @@
         <a class="collapse-button promo-code-button" data-toggle="collapse" href="#promo-code" aria-expanded="false" aria-controls="promo-code">
           {l s='Have a promo code?' d='Shop.Theme.Checkout'}
         </a>
-      </p>    
+      </p>
       <div class="promo-code collapse" id="promo-code">
         <form action="{$urls.pages.cart}" data-link-action="add-voucher" method="post">
           <input type="hidden" name="token" value="{$static_token}">
           <input type="hidden" name="addDiscount" value="1">
           <input class="promo-input" type="text" name="discount_name" placeholder="{l s='Promo code' d='Shop.Theme.Checkout'}">
           <button type="submit" class="btn btn-primary"><span>{l s='Add' d='Shop.Theme.Actions'}</span></button>
         </form>
+        <div class="alert alert-danger js-error" role="alert">
+          <i class="material-icons">&#xE001;</i><span class="m-l-1 js-error-text"></span>
+        </div>
       </div>
     </div>
   </div>

themes/classic/templates/checkout/_partials/steps/shipping.tpl

@@ -56,9 +56,17 @@
               </label>
             {/if}
             {if $gift.allowed}
-
-              <input data-toggle="collapse" data-target="#gift" type="checkbox" name="gift" value="1" {if $gift.isGift} checked {/if}>
-              <span>{$gift.label}</span>
+              <span class="custom-checkbox">
+                <input
+                  class="js-gift-checkbox"
+                  name="gift"
+                  type="checkbox"
+                  value="1"
+                  {if $gift.isGift}checked="checked"{/if}
+                >
+                <span><i class="material-icons checkbox-checked">&#xE5CA;</i></span>
+                <label>{$gift.label}</label >
+              </span>
 
               <div id="gift" class="collapse">
                 <label for="gift_message">{l s='If you\'d like, you can add a note to the gift:' d='Shop.Theme.Checkout'}</label>