wickes-css2 2.107.0-tech-debt-issues.1 → 2.107.0

package/src/js/page/kitchen/card-carousel.js

@@ -3,30 +3,30 @@ var Wick = Wick || {};
 Wick.PLPCardSwiper = {};
 
 $(document).ready(function () {
-  const SELECTORS = {
-    kitchenCard: '.kitchen-card',
-    swiperContainer: '.swiper-container-main',
-    nextButton: '.kitchen-card__next-btn',
-    prevButton: '.kitchen-card__prev-btn',
-  };
+    const SELECTORS = {
+        kitchenCard: '.kitchen-card',
+        swiperContainer: '.swiper-container-main',
+        nextButton: '.kitchen-card__next-btn',
+        prevButton: '.kitchen-card__prev-btn',
+    };
 
-  $(SELECTORS.kitchenCard).each(function (index, container) {
-    const $container = $(container);
-    const id = $container.data('id');
+    $(SELECTORS.kitchenCard).each(function (index, container) {
+        const $container = $(container);
+        const id = $container.data('id');
 
-    const sliderElement = $container.find(SELECTORS.swiperContainer)[0];
-    const nextButtonElement = $container.find(SELECTORS.nextButton)[0];
-    const prevButtonElement = $container.find(SELECTORS.prevButton)[0];
+        const sliderElement = $container.find(SELECTORS.swiperContainer)[0];
+        const nextButtonElement = $container.find(SELECTORS.nextButton)[0];
+        const prevButtonElement = $container.find(SELECTORS.prevButton)[0];
 
-    const swiper = new Swiper(sliderElement, {
-      speed: 400,
-      navigation: {
-          nextEl: nextButtonElement,
-          prevEl: prevButtonElement,
-      },
-      simulateTouch: false,
-    });
+        const swiper = new Swiper(sliderElement, {
+            speed: 400,
+            navigation: {
+                nextEl: nextButtonElement,
+                prevEl: prevButtonElement,
+            },
+            simulateTouch: false,
+        });
 
-    Wick.PLPCardSwiper[id] = swiper;
-  });
+        Wick.PLPCardSwiper[id] = swiper;
+    });
 });

package/src/page_my-account-installer-carousel.html

@@ -0,0 +1,131 @@
+{{#extend "my-account-v2"
+  customIconUserClass=header_menu.installer.[0].items.[0].icon
+  dataBreadcrumbs=my_account.installer.breadcrumbs
+  pageClass="page_my-account_new"
+  title="My Account Installer Carousel"
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  installer-nav=true
+  mainClass="my-account"
+  switch-vat=true
+}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav my-account-menu-new
+          customIcon=true
+          menu=my_account.installer.menu
+          active-index=0
+          page-name=my_account.installer.menu.[0].title
+          }}
+    </div>
+  </div>
+</div>
+<div class="account-summary">
+  <div class="container">
+    <div class="row">
+      <div class="col-12">
+        <div class="account-summary__wrapper d-none d-sm-grid mb-3">
+          {{> my-account/greetings
+              name=my_account.user.name
+              subtitle=my_account.user.email
+          }}
+        </div>
+        {{#extend "my-account/cards-swap"}}
+          {{#content "card1"}}
+            <div class="account-summary__wrapper account-summary__wrapper--secondary">
+              {{> my-account/greetings
+                  mod="d-sm-none"
+                  secondary=true
+                  name=my_account.user.name
+                  subtitle=my_account.user.email
+              }}
+              {{> my-account/discount
+                  secondary=true
+                  discountText=my_account.installer.discountText
+                  installer=true
+                  title="In-store discount"
+                  code=my_account.discount
+                  customIcon=my_account.installer.icons.installer
+              }}
+              {{> my-account/clipboard-code-card
+                  secondary=true
+                  mod="trade-pro-id"
+                  customIcon=my_account.installer.icons.installer
+                  title="TradePro ID"
+                  code=my_account.tradeProId
+              }}
+              {{> my-account/clipboard-code-card
+                  secondary=true
+                  mod="discount-code"
+                  icon="fas fa-badge-percent"
+                  title="Online discount code"
+                  code=my_account.installer.discountCode
+              }}
+            </div>
+          {{/content}}
+          {{#content "card2"}}
+            <div class="account-summary__wrapper">
+              {{> my-account/greetings
+                  mod="d-sm-none"
+                  name=my_account.user.name
+                  subtitle=my_account.user.email
+              }}
+              {{> my-account/discount
+                  discountText=my_account.installer.discountText
+                  installer=true
+                  title="In-store discount"
+                  code=my_account.discount
+                  customIcon=my_account.installer.icons.installer
+              }}
+              {{> my-account/clipboard-code-card
+                  mod="trade-pro-id"
+                  customIcon=my_account.installer.icons.installer
+                  title="TradePro ID"
+                  code=my_account.tradeProId
+              }}
+              {{> my-account/clipboard-code-card
+                  mod="discount-code"
+                  icon="fas fa-badge-percent"
+                  title="Online discount code"
+                  code=my_account.installer.discountCode
+              }}
+            </div>
+          {{/content}}
+        {{/extend}}
+        {{> my-account/active-orders/list-orders
+          switch-vat=true
+          title=my_account.installer.activeOrders.sectionTitle
+          linkText='View all orders'
+          orders=my_account.installer.activeOrders.orderList
+        }}
+      </div>
+    </div>
+  </div>
+</div>
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/menu-items
+          items=my_account.installer.menu
+          }}
+    </div>
+  </div>
+</div>
+<div class="account-actions">
+  <div class="container">
+    <div class="row">
+      <div class="col-12">
+        {{> my-account/user-account-actions mod="d-sm-none"}}
+        {{> my-account/contact-us contacts=my_account.contacts}}
+      </div>
+    </div>
+  </div>
+</div>
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/my-account.min.js"></script>
+{{/content}}
+{{/extend}}

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

@@ -46,7 +46,7 @@
 </div>
 
 <div class="billing-payment-block">
-  <h3 class="billing-payment-block__heading">Payment</h3>
+  <h3 class="billing-payment-block__heading">Billing & Payment</h3>
   <div class="billing-payment-block__wrapper">
     {{> checkout-payment-details-v2 apple-pay=true google-pay=true clear-pay=true klarna-method=true}}
   </div>

package/src/page_product-details-billie.html

@@ -11,8 +11,6 @@ badge-text-color='gray'
 step3=true
 currentlyInStock=true
 pagePdp=true
-billieIcon=true
-klarnaIcon=true
 }}
 {{#content "body"}}
 

package/src/page_product-details-clearpay.html

@@ -11,7 +11,6 @@ badge-text-color='gray'
 step3=true
 currentlyInStock=true
 pagePdp=true
-klarnaIcon=true
 }}
 {{#content "body"}}
 

package/src/page_shopping-cart-v2-vat.html

@@ -12,7 +12,7 @@
     </div>
     <div class="checkout-header__promo">
       {{#each shopping-cart-v2.potentialOrderPromotions}}
-        {{> potential-promotion}}
+        {{> potential-promotion switch-vat=true}}
       {{/each}}
     </div>
     {{> checkout-header shopping-cart-v2.header}}
@@ -20,6 +20,7 @@
 {{#content "aside"}}
   {{> order-summary
     shopping-cart-v2.checkout
+    switch-vat=true
     id=1
     title="Order Summary"
     basket=true

package/src/scss/components/_gift-cards.scss

@@ -5,7 +5,7 @@
 }
 
 .giftcard {
-  border: 1px solid $gray-light;
+  border: 1px solid $gray;
   border-radius: 4px;
   background: $white;
   padding: 12px 16px;
@@ -18,17 +18,6 @@
       margin-bottom: 0;
     }
   }
-
-  &--disabled {
-    .giftcard-inline__title {
-      color: $blue-disabled;
-    }
-
-    .giftcard-add,
-    .giftcard-add__text {
-      color: $blue-disabled;
-    }
-  }
 }
 
 .giftcard-add {
@@ -39,27 +28,9 @@
   text-decoration: none;
   cursor: pointer;
 
-  &__icon-wrap {
-    width: 24px;
-    height: 24px;
-    flex: 0 0 24px;
-
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-
   &__icon {
-    display: block;
-    line-height: 1;
-    font-size: 14px;
-    width: 14px;
-    height: 14px;
-  }
-
-  &__icon.svg-inline--fa {
-    width: 14px;
-    height: 14px;
+    width: 16px;
+    height: 16px;
   }
 
   &__text {

package/src/scss/components/_payments-checkout.scss

@@ -54,7 +54,7 @@
 
       &--small {
         flex-wrap: wrap;
-        padding: 0 40px;
+        padding: 0 25px;
       }
     }
 
@@ -79,7 +79,7 @@
 .basket {
   .summary__payment.footer-checkout {
     .payments-checkout__list--small {
-      padding: 0 60px;
+      padding: 0 45px;
     }
   }
 }

package/src/scss/components/_payments-v2.scss

@@ -5,7 +5,7 @@
   margin: 0 auto;
   width: 100%;
   padding-bottom: 24px;
-  max-width: 301px;
+  max-width: 256px;
 
   &__title {
     font-weight: 500;

package/src/scss/components/_plp-filters.scss

@@ -261,6 +261,15 @@
   }
 }
 
+@include media-breakpoint-only(sm) {
+  .products-list-page {
+    .plp-filters {
+      width: 100vw;
+      margin-left: calc(50% - 50vw);
+    }
+  }
+}
+
 @include media-breakpoint-up(md) {
   .plp-filters {
     background: $gray-bg;

package/src/scss/components/_price-block-critical.scss

@@ -120,6 +120,14 @@
     text-align: center;
   }
 
+  .pdp-price__control-holder {
+    flex-flow: wrap;
+
+    p {
+      width: 100%;
+    }
+  }
+
   .pdp-price__control-holder,
   .pdp-price__control-installation {
     padding-top: 20px;
@@ -178,7 +186,6 @@
           border-bottom-color: $red;
         }
       }
-
     }
   }
 

package/src/scss/components/_quick-filter.scss

@@ -43,16 +43,24 @@ $quick-filter-shadow: rgba(0, 0, 0, 0.12);
       border-radius: 8px;
     }
 
-    &--selected {
-      color: $blue;
-      border-color: $blue;
-    }
-
     &:hover,
     &:focus,
     &:active {
       text-decoration: none;
       border-color: $blue;
+      color: $gray-dark;
+    }
+
+    &--selected {
+      color: $blue;
+      border-color: $blue;
+
+      &:hover,
+      &:focus,
+      &:active {
+        color: $blue-darker;
+        border-color: $blue-darker;
+      }
     }
   }
 
@@ -151,11 +159,23 @@ $quick-filter-shadow: rgba(0, 0, 0, 0.12);
       img {
         width: 58px;
         height: 58px;
+        border-radius: 0;
       }
 
-      &--selected img {
-        // prettier-ignore
-        filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(1821%) hue-rotate(188deg) brightness(95%) contrast(101%);
+      &--selected {
+        img {
+          // prettier-ignore
+          filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(1821%) hue-rotate(188deg) brightness(95%) contrast(101%);
+        }
+
+        &:hover,
+        &:focus,
+        &:active {
+          img {
+            // prettier-ignore
+            filter: brightness(0) saturate(100%) invert(17%) sepia(94%) saturate(1900%) hue-rotate(190deg) brightness(85%) contrast(105%);
+          }
+        }
       }
     }
   }
@@ -167,11 +187,23 @@ $quick-filter-shadow: rgba(0, 0, 0, 0.12);
       img {
         width: 58px;
         height: 58px;
+        border-radius: 0;
       }
 
-      &--selected img {
-        // prettier-ignore
-        filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(1821%) hue-rotate(188deg) brightness(95%) contrast(101%);
+      &--selected {
+        img {
+          // prettier-ignore
+          filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(1821%) hue-rotate(188deg) brightness(95%) contrast(101%);
+        }
+
+        &:hover,
+        &:focus,
+        &:active {
+          img {
+            // prettier-ignore
+            filter: brightness(0) saturate(100%) invert(17%) sepia(94%) saturate(1900%) hue-rotate(190deg) brightness(85%) contrast(105%);
+          }
+        }
       }
     }
   }

package/src/scss/components/_search-filter.scss

@@ -3,6 +3,12 @@
     padding: 20px 0 0;
   }
 
+  &.accordion {
+    &:first-child {
+      border-top: 1px solid $gray;
+    }
+  }
+
   &__facet-cta {
     background: transparent;
     border: 0;

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

@@ -13,15 +13,6 @@
     padding: 0 5px;
     margin-bottom: 20px;
 
-    &::before {
-      content: '';
-      position: absolute;
-      top: -20px;
-      left: 5px;
-      width: calc(100% - 10px);
-      border-bottom: 1px solid #ccc;
-    }
-
     &::after {
       content: '';
       position: absolute;
@@ -107,7 +98,7 @@
   }
 
   .products-list-v2 {
-    .card-sponsor-product:nth-of-type(n+3) {
+    .card-sponsor-product:nth-of-type(n + 3) {
       .card {
         &:before {
           content: none;

package/src/scss/components/checkout-chip.scss

@@ -40,6 +40,7 @@
     user-select: none;
     transition: border-color 0.2s;
     width: 78px;
+    margin-bottom: 0;
   }
 
   &__label-top {

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

@@ -405,6 +405,18 @@
         }
       }
     }
+
+    .js-billie-repayment-terms {
+      margin-bottom: 20px;
+
+      &--has-selection {
+        margin-bottom: 0;
+      }
+
+      .form-row__error {
+        margin-top: 16px;
+      }
+    }
   }
 }
 

package/src/scss/components/my-account/_clipboard-code.scss

@@ -81,5 +81,9 @@
     .icon {
       color: $gray;
     }
+
+    .custom-icon path {
+      fill: $gray;
+    }
   }
 }

package/src/scss/helpers/_variables.scss

@@ -33,8 +33,6 @@ $error-bg: #fcf2f3; // Error notification background colour
 $positive: #8dc63f; // Positive colour
 $negative: #ed1c24; // Negative colour
 $blue-badge: #019ee3;
-$blue-disabled: mix(#fff, $blue, 60%);  // Disabled overlay (white 60% over $blue)
-$pacific-depths: #004587;
 $usp-icon-color: #1a77bc; // Usp icon color
 $pacific-depths: #004587;
 $line-through: #242424;

package/src/scss/pages/page_product_search.scss

@@ -300,7 +300,7 @@
     margin-right: -5px;
     margin-left: -5px;
     margin-top: 0;
-    padding-top: 40px;
+    padding-top: 20px;
     overflow-x: hidden;
 
     &__badges {
@@ -312,16 +312,6 @@
       padding-left: 5px;
       padding-right: 5px;
       position: relative;
-
-      &:nth-of-type(1)::before,
-      &:nth-of-type(2)::before {
-        content: '';
-        position: absolute;
-        top: -20px;
-        left: 5px;
-        width: calc(100% - 10px);
-        border-bottom: 1px solid $gray;
-      }
     }
   }
 }
@@ -344,8 +334,8 @@
   .sort-products-list {
     &__section {
       @include make-col(6);
-      color: black;
-      border: none;
+      color: #000000;
+      border: 0;
 
       > .form-row {
         margin-bottom: 0;

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

@@ -256,7 +256,7 @@ $color-bar-radius: 3px;
     margin-right: -5px;
     margin-left: -5px;
     margin-top: 0;
-    padding-top: 40px;
+    padding-top: 20px;
     overflow-x: hidden;
   }
 
@@ -279,20 +279,6 @@ $color-bar-radius: 3px;
     padding: 3px 5px;
   }
 
-  .card {
-    &:nth-of-type(1)::before,
-    &:nth-of-type(2)::before {
-      @include media-breakpoint-down(sm) {
-        content: '';
-        position: absolute;
-        top: -20px;
-        left: 5px;
-        width: calc(100% - 10px);
-        border-bottom: 1px solid $gray;
-      }
-    }
-  }
-
   .card {
     @include media-breakpoint-down(sm) {
       margin-bottom: 20px;
@@ -300,24 +286,11 @@ $color-bar-radius: 3px;
       display: inline-block;
       vertical-align: top;
       max-width: 50%;
-      margin-right: -4px;
       padding-left: 5px;
       padding-right: 5px;
       width: 50%;
     }
 
-    &:nth-of-type(1)::before,
-    &:nth-of-type(2)::before {
-      @include media-breakpoint-down(sm) {
-        content: '';
-        position: absolute;
-        top: -20px;
-        left: 5px;
-        width: calc(100% - 10px);
-        border-bottom: 1px solid $gray;
-      }
-    }
-
     &__inner-v2.card__inner-v2.card__inner-v2 {
       padding-bottom: 0;
 

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

@@ -1,13 +1,11 @@
 @import '../helpers/helpers';
 
-
 .products-list-v2 {
-
   @include media-breakpoint-down(sm) {
     margin-right: -5px;
     margin-left: -5px;
     margin-top: 0;
-    padding-top: 40px;
+    padding-top: 20px;
     overflow-x: hidden;
   }
 
@@ -17,7 +15,7 @@
     font-size: 1rem;
 
     @include media-breakpoint-down(sm) {
-      font-size: .875rem;
+      font-size: 0.875rem;
     }
   }
 
@@ -31,28 +29,13 @@
   }
 
   .card {
-
     @include media-breakpoint-down(sm) {
       position: relative;
       display: inline-block;
       vertical-align: top;
       max-width: 50%;
-      margin-right: -4px;
       padding-left: 5px;
       padding-right: 5px;
-
-    }
-
-    &:nth-of-type(1)::before,
-    &:nth-of-type(2)::before {
-      @include media-breakpoint-down(sm) {
-        content: '';
-        position: absolute;
-        top: -20px;
-        left: 5px;
-        width: calc(100% - 10px);
-        border-bottom: 1px solid $gray;
-      }
     }
   }
 }

package/src/sitemap.html

@@ -527,6 +527,7 @@
                         <li><h5 class="mb-0">Account Pages Redesign</h5></li>
                         <li><span class="page-id">5.15</span><a href="page_my-account.html" target="_blank">My Account DIY</a></li>
                         <li><a href="page_my-account-installer.html" target="_blank">My Account Installer</a></li>
+                        <li><a href="page_my-account-installer-carousel.html" target="_blank">My Account Installer Carousel</a></li>
                         <li><a href="page_my-account-trade-pro.html" target="_blank">My Account TradePro</a></li>
                         <li><a href="page_my-account-trade-pro-carousel.html" target="_blank">My Account TradePro Carousel</a></li>
                         <li><a href="page_my-account-trade-pro-carousel-double.html" target="_blank">My Account TradePro Carousel Double</a></li>