wickes-css2 2.103.0-RG-599-place-order-with-gift-card-spinner.2 → 2.103.0-develop.3

package/src/js/page/plp-load-more.js

@@ -43,7 +43,7 @@ Wick.PLPLoadMore = {
       .finally(() => {
         hideLoader(Wick.PLPLoadMore.el.loader);
         Wick.PLPLoadMore.el.$loadMoreBtn.blur();
-        Wick.ProductBanner.checkProductsInColumn();
+        Wick.BannerPlacementManager.checkProductsInColumn();
         $(window).trigger('productBannerPositionChanged');
         Wick.EnergyEfficiency.drawEnergyLabels();
         Wick.PLP?.bindEvents();

package/src/js/page/utils/validation.js

@@ -257,6 +257,7 @@ export function wrapWithError(element) {
 
 }
 
+
 export function addErrorMessage(element, errorMessage) {
     if (errorMessage) {
         $(element).append('<div class="form-row__error">' + errorMessage + '</div>');
@@ -315,49 +316,3 @@ export function validateGuidPattern (value) {
 export function validateUserFriendlyIdPattern (value) {
     return patterns.userFriendlyIdPattern.test(value);
 }
-
-export function showErrorText($input, message, fieldSelector, errorTextClass, errorClass, ariaInvalidAttr) {
-  const $field = $input.closest(fieldSelector);
-  $field.addClass(errorClass);
-  $input.attr(ariaInvalidAttr, 'true');
-
-  let $err = $field.find(errorTextClass);
-  if (!$err.length) {
-    $err = $(`<div class="${errorTextClass.slice(1)}" />`).appendTo($field);
-  }
-  $err.text(message);
-}
-
-export function clearErrorText($input, fieldSelector, errorTextClass, errorClass, ariaInvalidAttr) {
-  const $field = $input.closest(fieldSelector);
-  $field.removeClass(errorClass);
-  $input.removeAttr(ariaInvalidAttr);
-  $field.find(errorTextClass).remove();
-}
-
- function digitsOnly(value) {
-  return String(value || '').replace(/\D/g, '');
-}
-
-function hasExactDigits(value, n) {
-  return digitsOnly(value).length === Number(n);
-}
-
-function validateByPredicate($input, predicate, message, {
-  fieldSelector,
-  errorText: errorTextClass,
-  fieldError: errorClass,
-  ariaInvalidAttr,
-}) {
-  const ok = !!predicate(String($input.val() || ''));
-  if (!ok) {
-    showErrorText($input, message, fieldSelector, errorTextClass, errorClass, ariaInvalidAttr);
-  } else {
-    clearErrorText($input, fieldSelector, errorTextClass, errorClass, ariaInvalidAttr);
-  }
-  return ok;
-}
-
-export function validateExactDigits($input, n, message, cfg) {
-  return validateByPredicate($input, (v) => hasExactDigits(v, n), message, cfg);
-}

package/src/layouts/base.hbs

@@ -39,12 +39,6 @@
       {{> footer }}
     {{/block}}
 
-    {{#if miniBasketEmpty}}
-      {{> mini-basket/mini-basket-empty }}
-    {{else}}
-      {{> mini-basket/mini-basket }}
-    {{/if}}
-
     {{#block "foot"}}
       {{> scripts }}
     {{/block}}

package/src/layouts/checkout.hbs

@@ -22,10 +22,14 @@
     {{/block}}
     <a id="skip-to-content"></a>
     <main {{#if fullWidth}}class="full-width-content"{{/if}}>
+      <div class="globalMessages">
+        <div class="container">
+          {{#block "notification"}}{{/block}}
+        </div>
+      </div>
       <div class="container">
         <div class="row">
           {{#block "steps"}}{{/block}}
-          {{#block "notification"}}{{/block}}
           <div class="content">
             {{#block "main"}}{{/block}}
           </div>

package/src/page_my-account_change-password.html

@@ -62,6 +62,5 @@
     }}
     <script src="./js/pstrength.min.js"></script>
     <script src="./js/change-password.min.js"></script>
-    <script src="./js/toggle-password-visibility.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_payment-details-with-gift-card.html

@@ -8,15 +8,13 @@
 
 <script src="https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js"></script>
 {{/content}}
+{{#content "notification"}}
+{{> notifications notification-page.error text="Sorry, there are errors on this page. Please review the information you've entered and update sections marked in red."}}
+{{/content}}
 {{#content "steps"}}
 {{> steps-three-steps active-step-index="2"}}
 {{/content}}
 
-{{#content "notification"}}
-<div class="globalMessages container">
-</div>
-{{/content}}
-
 {{#content "aside"}}
 {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon billieIcon=true paymentsCheckoutV2=true checkout=true}}
 {{/content}}
@@ -63,8 +61,7 @@
 <script defer src="./js/page/checkout-payment-details.js"></script>
 <script defer src="./js/page/klarna-modal-scroll-disable.js"></script>
 <script defer src="./js/page/billie-business-type.js"></script>
-<script defer src="./js/gift-cards.min.js"></script>
 {{> checkout-terms-and-conditions-modal }}
-{{> loader hidden=true modifier="page-loader"}}
+{{> payment-loader hidden=true spinnerTypes=(array "billie-logo" "clearpay-logo" "paypal-logo")}}
 {{/content}}
 {{/extend}}

package/src/page_plp_v2.html

@@ -1,4 +1,4 @@
-{{#extend "base" hybrisClass="hybris-class" pageClass="products-list-page" title="Products list" globalSearchV2="true" pagePlp=true}}
+{{#extend "base" hybrisClass="hybris-class" pageClass="products-list-page retail-media" title="Products list" globalSearchV2="true" pagePlp=true}}
 {{#content "head" mode="append" pagePlp=true}}
 <link type="text/css" rel="stylesheet" href="./css/components/global-search.css">
 {{/content}}
@@ -32,13 +32,23 @@
                         </div>
 
                         <div class="products-list products-list-v2">
-                            {{#each plp_load-more.results}}
-                            {{>card_product_v2}}
+                            {{#each search-result_v2.products}}
+                                {{>card_product_v2}}
                             {{/each}}
                             {{#if search-result_v2.product-banner}}
-                            {{#each search-result_v2.product-banner}}
-                            {{>card_product_banner_v2}}
-                            {{/each}}
+                                {{#each search-result_v2.product-banner}}
+                                    {{>card_product_banner_v2}}
+                                {{/each}}
+                            {{/if}}
+                            {{#if search-result_v2.sponsor-banner}}
+                                {{#each search-result_v2.sponsor-banner}}
+                                    {{>card_sponsor_banner}}
+                                {{/each}}
+                            {{/if}}
+                            {{#if search-result_v2.sponsor-product}}
+                                {{#each search-result_v2.sponsor-product}}
+                                    {{>card_sponsor_product}}
+                                {{/each}}
                             {{/if}}
                         </div>
                         <div class="load-more-wrap">

package/src/page_search-results.html

@@ -42,9 +42,19 @@
         </div>
 
         <div class="products-list products-list-v2">
-          {{#each plp_energy-efficiency.products}}
-            {{> card_product_v2}}
+          {{#each search-result_v2.products}}
+            {{>card_product_v2}}
           {{/each}}
+          {{#if search-result_v2.sponsor-banner}}
+            {{#each search-result_v2.sponsor-banner}}
+              {{>card_sponsor_banner}}
+            {{/each}}
+          {{/if}}
+          {{#if search-result_v2.sponsor-product}}
+            {{#each search-result_v2.sponsor-product}}
+              {{>card_sponsor_product}}
+            {{/each}}
+          {{/if}}
         </div>
 
         <div class="sort-products-list">

package/src/partials/scripts.hbs

@@ -14,6 +14,7 @@
   <script src="./js/basket.min.js"></script>
 {{/ifCond}}
 {{!-- BUNDLES END --}}
+<script src="./js/mini-basket-slider.min.js"></script>
 <script src="./js/emulation.min.js"></script>
 <script defer src="https://kit.fontawesome.com/b73abc6840.js" crossorigin="anonymous"></script>
 {{#if pagePdp}}

package/src/scss/components/_custom-slider.scss

@@ -80,6 +80,19 @@
     }
   }
 
+  &__notifications {
+    &:has(.notification) {
+      margin-top: 16px;
+    }
+
+    .notification:only-child {
+      @include font-size(14);
+      @include line-height(24);
+      margin-bottom: 0;
+      border-bottom: none;
+    }
+  }
+
   &__message {
     margin-top: 8px;
     display: flex;
@@ -159,6 +172,32 @@
     &__details {
       flex: 1;
 
+      &-header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        grid-gap: 8px;
+
+        .btn--remove {
+          min-width: 24px;
+          padding: 4px;
+          background: 0 0;
+          border: none;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .remove-icon {
+            color: $blue;
+            font-size: 1rem;
+          }
+        }
+      }
+
+      &-body {
+        margin-top: 4px;
+      }
+
       .item,
       .price {
         margin-bottom: 0;
@@ -190,8 +229,8 @@
       }
 
       .price {
-        @include font-size(18);
-        @include line-height(24);
+        @include font-size(16);
+        @include line-height(20);
         margin-top: 8px;
         font-weight: 700;
         color: $blue-dark;
@@ -206,6 +245,54 @@
       &.product-card__content {
         margin-top: 0;
         padding: 0;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+
+    &__quantity-control {
+      display: flex;
+      align-items: center;
+      margin-top: 8px;
+
+      .quantity {
+        margin-bottom: 0;
+        min-width: 40px;
+        text-align: center;
+        padding: 0 5px;
+
+        .product-card__quantity-value {
+          margin: 0;
+          font-weight: 400;
+        }
+      }
+
+      .btn--quantity {
+        background: none;
+        padding: 0;
+        width: 24px;
+        min-height: 24px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+
+        .quantity-cta-icon {
+          font-size: 1.35rem;
+          color: $blue;
+        }
+
+        &[disabled] {
+          border: none;
+          opacity: 0.6;
+        }
+      }
+    }
+
+    .btn--remove,
+    .btn--quantity {
+      &:hover {
+        opacity: 0.7;
       }
     }
 
@@ -218,6 +305,17 @@
         }
       }
     }
+
+    &__offers {
+      margin-top: 4px;
+
+      .products__promo {
+        @include font-size(12);
+        @include line-height(16);
+        color: $red;
+        font-weight: 400;
+      }
+    }
   }
 
   &__footer {
@@ -324,7 +422,7 @@
           font-weight: 500;
         }
 
-        .value {
+        &-value {
           @include font-size(18);
           @include line-height(24);
           font-weight: 700;
@@ -454,6 +552,30 @@
   }
 }
 
+@include media-breakpoint-up(sm) {
+  .custom-slider {
+    .products__details {
+      .price {
+        @include font-size(18);
+        @include line-height(24);
+
+        .inc {
+          @include font-size(12);
+          @include line-height(16);
+          font-weight: 500;
+        }
+      }
+
+      &-footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: auto;
+      }
+    }
+  }
+}
+
 @include media-breakpoint-up(sm) {
   .custom-slider {
     &__wrap {

package/src/scss/components/_popover-mini-basket.scss

@@ -173,10 +173,6 @@
         .card__img {
           border: 0;
         }
-
-        .product-card__content {
-          height: auto;
-        }
       }
     }
   }

package/src/scss/components/card-product-banner.scss

@@ -4,7 +4,7 @@
   @include make-col(4);
   margin-bottom: 30px;
 
-  @include media-breakpoint-down(md) { 
+  @include media-breakpoint-down(md) {
     @include make-col(6);
   }
 
@@ -39,7 +39,7 @@
     padding: 0 15px;
 
     @include media-breakpoint-down(sm) {
-      display: inline-block; 
+      display: inline-block;
       padding: 0;
       width: 100%;
     }
@@ -49,4 +49,92 @@
     display: inline-block;
     width: 100%;
   }
-} 
+}
+
+.products-list {
+  .card-sponsor-product,
+  .card-sponsor-banner {
+    @include make-col(4);
+    margin-bottom: 0;
+  }
+
+  .card-sponsor-banner {
+    &__link {
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+      padding: 0 15px;
+    }
+
+    &__image {
+      display: inline-block;
+      width: 100%;
+    }
+  }
+
+  .card-sponsor-product {
+    .product-card {
+      max-width: 100%;
+    }
+  }
+
+  .product-card__sponsored {
+    @include font-size(12);
+    @include line-height(16);
+    color: $squant;
+    font-weight: 400;
+    margin-top: -3px;
+    margin-bottom: 15px;
+    padding: 2px 4px;
+
+    &:not(.product-card__sponsored--empty) {
+      width: max-content;
+      background: $gray-light;
+    }
+  }
+}
+
+@include media-breakpoint-down(md) {
+  .products-list {
+    .card-sponsor-product,
+    .card-sponsor-banner {
+      @include make-col(6);
+
+      .card {
+        max-width: 100%;
+      }
+    }
+  }
+
+  .products-list-v2 {
+    .card-sponsor-product:nth-of-type(n+3) {
+      .card {
+        &:before {
+          content: none;
+        }
+      }
+    }
+  }
+}
+
+@include media-breakpoint-down(sm) {
+  .products-list {
+    .product-card__sponsored {
+      margin-right: auto;
+      margin-left: auto;
+    }
+
+    .card-sponsor-banner {
+      position: relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 20px;
+        left: 5px;
+        width: calc(100% - 10px);
+        border-bottom: 1px solid $gray;
+      }
+    }
+  }
+}

package/src/scss/components/checkout-payment-details-v2.scss

@@ -1,6 +1,5 @@
 @import '../helpers/helpers';
 @import '../components/tooltip';
-@import '../components/gift-cards';
 
 .checkout-payment-details-v2 {
   .checkout-payment-details {
@@ -74,7 +73,6 @@
       font-size: 14px;
       font-weight: 400;
       line-height: 24px;
-      vertical-align: top;
     }
 
     .form-row {

package/src/scss/pages/page_checkout_delivery-new.scss

@@ -27,8 +27,6 @@
         .checkout-widget {
           &__details {
             font-size: 1rem;
-            display: flex;
-            flex-direction: column;
 
             .checkout-widget {
               &__item {
@@ -55,19 +53,6 @@
               &__details-discount {
                 order: 1;
               }
-
-              &__gift-card {
-                order: 2;
-                margin-bottom: 0;
-                margin-top: 20px;
-                font-weight: 700;
-
-                .checkout-widget__item-value {
-                  ::first-letter {
-                    font-size: 1rem;
-                  }
-                }
-              }
             }
           }
 
@@ -209,10 +194,6 @@
     margin: 40px 0;
   }
 
-  .loader-wrapper.page-loader {
-    position: fixed;
-  }
-
   .oos-block {
     @include make-col(12);
 
@@ -418,13 +399,6 @@
       margin-bottom: 13px;
     }
   }
-
-  .notification {
-    &:only-child,
-    &:last-child {
-      margin-bottom: 30px;
-    }
-  }
 }
 
 #modalDeliveryEdit,

package/src/scss/pages/page_products-list-combined.scss

@@ -47,6 +47,17 @@ $color-bar-radius: 3px;
     }
   }
 
+  .sponsor-top-banner {
+    margin-bottom: 20px;
+    margin-top: 10px;
+
+    &__image {
+      display: block;
+      max-width: 100%;
+      margin-bottom: 20px;
+    }
+  }
+
   .color-pick {
     &__wrap {
       display: none;

package/src/scss/pages/page_products-list.scss

@@ -37,6 +37,14 @@
       }
     }
   }
+
+  .sponsor-top-banner {
+    &__image {
+      margin-bottom: 20px;
+      display: block;
+      max-width: 100%;
+    }
+  }
 }
 
 .products-list {

package/build/img/giftcard.svg

@@ -1,28 +0,0 @@
-<svg width="48" height="31" viewBox="0 0 48 31" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_9507_79257)">
-<rect y="0.207031" width="48" height="30" rx="3" fill="white"/>
-<path d="M42.5 26.207C39.5 25.707 36.5 21.207 36.5 21.207C36.5 21.207 34 25.207 31 26.207" stroke="#004587" stroke-width="1.8"/>
-<path d="M29.7862 18.5774C30.7643 19.8755 32.9202 20.2323 35.2567 20.6584C35.2241 18.7373 34.7506 16.8572 33.7724 15.5591C32.7942 14.261 31.3287 13.7129 30.0307 14.691C28.7326 15.6692 28.808 17.2793 29.7862 18.5774Z" fill="white" stroke="#004587" stroke-width="1.8"/>
-<path d="M43.164 18.5774C42.1859 19.8755 40.03 20.2323 37.6935 20.6584C37.7261 18.7373 38.1996 16.8572 39.1778 15.5591C40.1559 14.261 41.6215 13.7129 42.9195 14.691C44.2176 15.6692 44.1422 17.2793 43.164 18.5774Z" fill="white" stroke="#004587" stroke-width="1.8"/>
-<g clip-path="url(#clip1_9507_79257)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0.207031V12.4151L16.5154 15.1785L30.0427 12.3838V0.207031H3Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.90234 1.08984V11.6893L16.5155 14.2625L29.1463 11.6881V1.08984H3.90234Z" fill="#004587"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7783 7.92572C15.7696 7.62779 15.5026 7.41921 15.207 7.41921C14.5493 7.41921 14.4462 7.96811 14.4462 8.45635C14.4462 8.91044 14.6458 9.37843 15.1424 9.37843C15.5498 9.37843 15.7562 9.14851 15.8118 8.77483H16.9531C16.8474 9.71885 16.1003 10.2603 15.1504 10.2603C14.0724 10.2603 13.2715 9.53599 13.2715 8.45635C13.2715 7.33602 13.9969 6.53516 15.1504 6.53516C16.0389 6.53516 16.8342 6.99838 16.9153 7.92572H15.7783Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1543 5.31641H18.3288V7.81242L19.4004 6.63986H20.7594L19.4483 7.96917L20.9249 10.16H19.5089L18.6344 8.74224L18.3288 9.03322V10.16H17.1543V5.31641Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M21.7333 8.67923C21.7536 9.16013 22.0363 9.47999 22.535 9.47999C22.8166 9.47999 23.0924 9.35193 23.2046 9.09401H24.3016C24.0876 9.90917 23.32 10.2602 22.5192 10.2602C21.3542 10.2602 20.5586 9.56984 20.5586 8.38984C20.5586 7.30951 21.4374 6.53516 22.4916 6.53516C23.7754 6.53516 24.4182 7.48632 24.3632 8.67923H21.7333ZM23.189 8.03592C23.169 7.64149 22.8853 7.31607 22.4916 7.31607C22.0778 7.31607 21.8021 7.60794 21.7333 8.03592H23.189Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M25.5842 8.99642C25.5842 9.17551 25.6574 9.30418 25.7769 9.39104C25.8863 9.47275 26.0451 9.51434 26.2117 9.51434C26.4397 9.51434 26.7649 9.42043 26.7649 9.13997C26.7649 8.86835 26.3976 8.81603 26.1918 8.76798C25.4513 8.58432 24.5267 8.56159 24.5267 7.61548C24.5267 6.76836 25.4589 6.53516 26.1636 6.53516C26.9515 6.53516 27.7712 6.76041 27.8136 7.67723H26.7287C26.7287 7.52613 26.6751 7.43222 26.5773 7.36908C26.4792 7.30941 26.3507 7.28013 26.2052 7.28013C26.0108 7.28013 25.7017 7.30207 25.7017 7.54688C25.7017 7.87886 26.4881 7.93992 27.0274 8.05399C27.75 8.19744 27.9381 8.71249 27.9381 9.00545C27.9381 9.94987 27.0274 10.2602 26.2187 10.2602C25.3684 10.2602 24.4986 9.98342 24.4639 8.99642H25.5842Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.3756 10.16H9.08877L8.41406 6.82332H8.3981L7.72329 10.16H6.41975L5.08691 5.31641H6.36913L7.0693 8.85571H7.08112L7.80504 5.31641H9.01268L9.73841 8.85571H9.75195L10.4494 5.31641H11.7329L10.3756 10.16Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.8215 6.19887H12.9972V5.31641H11.8215V6.19887ZM11.8213 10.1601H12.997V6.63986H11.8213V10.1601Z" fill="white"/>
-</g>
-<path d="M36.5 0.207031V21.707M36.5 30.207V21.707M36.5 21.707H47.5M36.5 21.707H1" stroke="#004587" stroke-width="1.8"/>
-</g>
-<rect x="0.5" y="0.707031" width="47" height="29" rx="2.5" stroke="#CCCCCC"/>
-<defs>
-<clipPath id="clip0_9507_79257">
-<rect y="0.207031" width="48" height="30" rx="3" fill="white"/>
-</clipPath>
-<clipPath id="clip1_9507_79257">
-<rect width="27" height="14.9703" fill="white" transform="translate(3 0.207031)"/>
-</clipPath>
-</defs>
-</svg>