wickes-css2 2.113.0 → 2.116.0

package/src/page_product-details-tile-steps-logout.html

@@ -5,9 +5,7 @@
           isCashback=false
           isSize=true
           hourly-delivery=true
-          badge-text='15% off'
-          badge-color='yellow'
-          badge-text-color='gray'
+          badges=pdp-price-badges.yellowGrayText
           step3=true
           currentlyInStock=true
           pagePdp=true

package/src/page_product-details-tile-steps-no-new-project-list.html

@@ -5,9 +5,7 @@
           isCashback=false
           isSize=true
           hourly-delivery=true
-          badge-text='15% off'
-          badge-color='yellow'
-          badge-text-color='gray'
+          badges=pdp-price-badges.yellowGrayText
           step3=true
           currentlyInStock=true
           pagePdp=true

package/src/page_product-details-tile-steps-with-klarna.html

@@ -5,9 +5,7 @@
           isCashback=false
           isSize=true
           hourly-delivery=true
-          badge-text='15% off'
-          badge-color='yellow'
-          badge-text-color='gray'
+          badges=pdp-price-badges.yellowGrayText
           step3=true
           currentlyInStock=true
           pagePdp=true

package/src/page_product-details-tile-steps.html

@@ -5,9 +5,7 @@
           isCashback=false
           isSize=true
           hourly-delivery=true
-          badge-text='15% off'
-          badge-color='yellow'
-          badge-text-color='gray'
+          badges=pdp-price-badges.yellowGrayText
           step3=true
           currentlyInStock=true
           pagePdp=true

package/src/page_product-details-v2.html

@@ -6,9 +6,7 @@
           isSize=true
           isGuide=true
           hourly-delivery=true
-          badge-text='15% off'
-          badge-color='yellow'
-          badge-text-color='gray'
+          badges=pdp-price-badges.yellowGrayText
           currentlyInStock=true
           pagePdp=true
 }}

package/src/page_product-details-vat.html

@@ -5,9 +5,7 @@
           isCashback=false
           isSize=true
           hourly-delivery=true
-          badge-text='15% off'
-          badge-color='yellow'
-          badge-text-color='gray'
+          badges=pdp-price-badges.yellowGrayText
           step3=true
           currentlyInStock=true
           pagePdp=true

package/src/page_product-details-wisdom-mcfc-registered.html

@@ -6,9 +6,7 @@ isCashback=false
 isSize=true
 isGuide=true
 hourly-delivery=true
-badge-text='15% off'
-badge-color='yellow'
-badge-text-color='gray'
+badges=pdp-price-badges.yellowGrayText
 currentlyInStock=true
 pagePdp=true
 }}

package/src/page_product-details-wisdom-mcfc.html

@@ -6,9 +6,7 @@ isCashback=false
 isSize=true
 isGuide=true
 hourly-delivery=true
-badge-text='15% off'
-badge-color='yellow'
-badge-text-color='gray'
+badges=pdp-price-badges.yellowGrayText
 currentlyInStock=true
 pagePdp=true
 }}

package/src/page_product-details-wisdom-oos-registered.html

@@ -6,9 +6,7 @@
           isSize=true
           isGuide=true
           hourly-delivery=true
-          badge-text='15% off'
-          badge-color='yellow'
-          badge-text-color='gray'
+          badges=pdp-price-badges.yellowGrayText
           currentlyInStock=true
           pagePdp=true
 }}

package/src/page_product-details-wisdom-oos.html

@@ -6,9 +6,7 @@
           isSize=true
           isGuide=true
           hourly-delivery=true
-          badge-text='15% off'
-          badge-color='yellow'
-          badge-text-color='gray'
+          badges=pdp-price-badges.yellowGrayText
           currentlyInStock=true
           pagePdp=true
 }}

package/src/page_product-details-wisdom-registered.html

@@ -6,9 +6,7 @@
           isSize=true
           isGuide=true
           hourly-delivery=true
-          badge-text='15% off'
-          badge-color='yellow'
-          badge-text-color='gray'
+          badges=pdp-price-badges.yellowGrayText
           currentlyInStock=true
           pagePdp=true
 }}

package/src/page_product-details-wisdom.html

@@ -6,9 +6,7 @@
           isSize=true
           isGuide=true
           hourly-delivery=true
-          badge-text='15% off'
-          badge-color='yellow'
-          badge-text-color='gray'
+          badges=pdp-price-badges.yellowGrayText
           currentlyInStock=true
           pagePdp=true
 }}

package/src/page_product-details-with-favourite.html

@@ -5,9 +5,7 @@
           isCashback=false
           isSize=true
           hourly-delivery=true
-          badge-text='15% off'
-          badge-color='yellow'
-          badge-text-color='gray'
+          badges=pdp-price-badges.yellowGrayText
           step3=true
           currentlyInStock=true
           pagePdp=true

package/src/page_product-details-with-global-search-v2.html

@@ -6,13 +6,12 @@ isCashback=false
 isSize=true
 isGuide=true
 hourly-delivery=true
-badge-text='15% off'
-badge-color='yellow'
-badge-text-color='gray'
+badges=pdp-price-badges.yellowGrayText
 currentlyInStock=true
 pagePdp=true
 globalSearchV2="true"
 switch-vat=true
+isWhyNotAdd=true
 }}
 {{#content "head" mode="append" pagePdp=true}}
 <link type="text/css" rel="stylesheet" href="./css/components/global-search.css">

package/src/page_product-details-with-similar-products-widget.html

@@ -0,0 +1,132 @@
+{{#extend "base" pageClass="page-product-details" title="Product details page new"
+isDiscount=true
+isSQM=true
+isDescription=true
+isCashback=false
+isSize=true
+isGuide=true
+hourly-delivery=true
+badge-text='15% off'
+badge-color='yellow'
+badge-text-color='gray'
+currentlyInStock=true
+pagePdp=true
+globalSearchV2="true"
+switch-vat=true
+}}
+{{#content "head" mode="append" pagePdp=true}}
+<link type="text/css" rel="stylesheet" href="./css/components/global-search.css">
+{{/content}}
+{{#content "body"}}
+{{>tradepro-discount-banner}}
+<main class="pdp__main">
+  <div class="container">
+    <div class="pdp">
+      <div class="pdp__title">
+        <h1 class="pdp__heading">Bosch PSB 1800 LI-2 18V Li-Ion Cordless Combi Drill Example with long
+          title in two raws
+        </h1>
+        <div class="pdp__reviews_small">
+          <span class="product-code product-code-v2">Product code: <strong id="product-code-val">236334</strong></span>
+          <div class="product-card__reviews review-star">
+            <div class="product-rating product-rating-v2">
+              <div class="rating-bg">
+                <i class="fa fa-star" aria-hidden="true"></i>
+                <i class="fa fa-star" aria-hidden="true"></i>
+                <i class="fa fa-star" aria-hidden="true"></i>
+                <i class="fa fa-star" aria-hidden="true"></i>
+                <i class="fa fa-star" aria-hidden="true"></i>
+                <div class="rating-overlay"
+                     data-rating="{{#if review-rating}}{{review-rating}}{{else}}0{{/if}}">
+                  <i class="fa fa-star" aria-hidden="true"></i>
+                  <i class="fa fa-star" aria-hidden="true"></i>
+                  <i class="fa fa-star" aria-hidden="true"></i>
+                  <i class="fa fa-star" aria-hidden="true"></i>
+                  <i class="fa fa-star" aria-hidden="true"></i>
+                </div>
+              </div>
+            </div>
+            <span class="review-star-average review-star-average-v2">(4.6)</span>
+          </div>
+          <span class="pdp__reviews-link-wrap"><a href="#" data-link="#pdp-reviews" id="open-review">82 reviews</a></span>
+        </div>
+      </div>
+
+      <div class="pdp__gallery">
+        {{> gallery-pdp-v2 }}
+      </div>
+      <div class="pdp__aside">
+        {{> price-block-v2
+        isProductSaved=false
+        isUserLogedOut=true
+        install=true
+        sample=true
+        cc=true
+        delivery=true
+        noDelivery=true
+        klarna-placement=true
+        similarProductsMockDataKey="similarProductsRecommendations"
+        }}
+      </div>
+      <div class="pdp__description">
+        {{> product-main-info-v2 isProductSaved=true}}
+      </div>
+      <div class="pdp__widget">
+        {{> bloomreach/complete-your-project
+            context="completeYourProject3Recomendations"
+        }}
+      </div>
+      {{> fulfilment-accordions }}
+    </div>
+  </div>
+  <div class="container container-info">
+    <div class="pdp">
+      <div class="pdp__info">
+        {{> pdp-info-v2 }}
+      </div>
+    </div>
+  </div>
+  {{> recently-viewed }}
+
+  {{> similar-products-v2 }}
+
+  {{> seo-widgets title="More products" }}
+  {{> seo-widgets title="Related category" }}
+</main>
+{{/content}}
+{{#content "foot" mode="append"}}
+<script type="text/html" id="mini-basket-popup">
+  {{> popover-mini-basket mod="popover-mini-basket_just-added" products=mini-basket.just-added just-added=true}}
+</script>
+<script defer src="./js/page/pdp.js"></script>
+<script defer src="./js/global-search.min.js"></script>
+{{#extend "modal" id="modal-pdp-feedback" title="Feedback Form" fullWidth=true}}
+{{#content "body"}}
+<iframe class="cboxIframe" name="cbox1538824723052"
+        src="https://docs.google.com/forms/d/1jHV5b8AazYbPmoTXJBxmyns4AcRhtKnnIC4_K_MFOPU/viewform?entry.1452922942=Wickes+Blue+Slate+Chippings+-+Major+Bag&amp;entry.1885983523=Decorative+Uk+sourced+blue+slate+chippings+are+ideal+for+gardens+and+borders.+This+beautiful+stone+changes+colour+when+wet.&amp;entry.935962220=112777&amp;entry.474385230=1000626184"></iframe>
+{{/content}}
+{{/extend}}
+{{> click-and-collect-modal}}
+{{/content}}
+{{/extend}}
+<!--<script defer src="./js/components/badge-cashback.js"></script>-->
+<script>
+  if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
+    $(document).ready(function () {
+      $('.modal').on('scroll', function () {
+        $(':focus').blur();
+      });
+    });
+  }
+
+  $(document).ready(function () {
+
+    $('#info-details').toggleClass('accordion_collapsed');
+    $('#details-content').css('display', 'block');
+
+    $('#open-review').on('click', function () {
+      $('#info-review').toggleClass('accordion_collapsed');
+      $('#review-content').css('display', 'block');
+    })
+  })
+</script>

package/src/page_product-details-with-why-not-add-single.html

@@ -13,6 +13,7 @@ currentlyInStock=true
 pagePdp=true
 globalSearchV2="true"
 switch-vat=true
+isWhyNotAdd=true
 }}
 {{#content "head" mode="append" pagePdp=true}}
 <link type="text/css" rel="stylesheet" href="./css/components/global-search.css">

package/src/page_product-details_no-previous-default.html

@@ -6,9 +6,7 @@
           isSize=true
           isGuide=true
           hourly-delivery=true
-          badge-text='15% off'
-          badge-color='yellow'
-          badge-text-color='gray'
+          badges=pdp-price-badges.yellowGrayText
           currentlyInStock=true
           pagePdp=true
 }}

package/src/scss/common/_loading-button.scss

@@ -14,7 +14,9 @@
     background-color: $green;
     border: 1px solid $green;
 
-    &:focus {
+    &:hover,
+    &:focus,
+    &:active {
       background-color: $green;
     }
 

package/src/scss/components/_date-selection-add-new-styles.scss

@@ -1,8 +1,20 @@
 .date-selection {
+  &__inner {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  };
+
   &-hidden {
     display: none;
   }
 
+  .delivery-time {
+    &__rapid-hint {
+      border-top: 0;
+    }
+  }
+
   &__info-block {
     &-error {
       display: flex;
@@ -25,8 +37,7 @@
   }
 
   .calendar {
-    background: $white;
-    border: 0;
+    padding: 16px;
 
     &__head {
       margin-bottom: 20px;
@@ -189,8 +200,8 @@
     border: 0;
 
     .delivery-types {
-      padding: 0 0 10px;
       margin: 0;
+      padding: 0;
       background: initial;
 
       &__inner {
@@ -199,6 +210,10 @@
         }
       }
     }
+
+    .calendar {
+      border: 1px solid $gray;
+    }
   }
 }
 
@@ -286,6 +301,35 @@
       }
     }
   }
+
+  .rapid-info-icon {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: bottom;
+    pointer-events: auto;
+    margin-left: 4px;
+    cursor: pointer;
+    color: $white;
+    font-size: 1rem;
+
+    [data-prefix='fas'],
+    [data-prefix='far'] {
+      color: $white;
+    }
+
+    &:hover {
+      opacity: 0.8;
+
+      [data-prefix='far'] {
+        color: $white;
+      }
+    }
+  }
+
+  &__image {
+    position: absolute;
+    right: 12px;
+  }
 }
 
 .delivery-container {
@@ -324,12 +368,18 @@
 
 @include media-breakpoint-up(md) {
   .date-selection {
+    &__inner {
+      flex-direction: row;
+    };
+
     .delivery-date,
     .delivery-time {
       height: auto;
     }
 
     .calendar {
+      padding: 24px;
+
       &__message {
         padding: 50px 40px 70px;
       }

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

@@ -149,7 +149,7 @@
 
 .giftcard-applied {
   width: 100%;
-  border: 1px solid $gray-light;
+  border: 1px solid $gray;
   border-radius: 4px;
   background: $white;
   padding: 15px 16px;

package/src/scss/components/_image-accordion.scss

@@ -0,0 +1,54 @@
+.image-accordion {
+  padding-bottom: 8px;
+  border-bottom: 1px solid $gray;
+
+  &__preview {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 8px;
+
+    & img {
+      flex-basis: calc((100% - 40px) / 6);
+      min-width: 45px;
+    }
+  }
+
+  &__content {
+    margin-bottom: 8px;
+  }
+
+  &__header {
+    position: relative;
+    margin-bottom: 0;
+    padding-left: 32px;
+    color: $blue;
+    cursor: pointer;
+
+    font-size: 0.875rem;
+    line-height: 1.375rem;
+  }
+
+  &__icon {
+    position: absolute;
+    left: 0;
+    top: 0;
+    font-size: 18px;
+  }
+
+  &:not(.image-accordion--collapsed) {
+    .image-accordion__preview {
+      display: none;
+    }
+  }
+
+  &--collapsed {
+    & .image-accordion__header {
+      & > .image-accordion__icon {
+        & > .fa-angle-up {
+          transform: rotate(180deg);
+        }
+      }
+    }
+  }
+}

package/src/scss/components/_kitchen-card.scss

@@ -49,6 +49,7 @@
 
   &__title {
     margin-bottom: 0;
+    user-select: none;
   }
 
   &__parameters {

package/src/scss/components/_map.scss

@@ -160,3 +160,41 @@
 .map-container img {
   max-width: none;
 }
+
+// Google Maps InfoWindow overrides
+.gm {
+  &-style-iw {
+    &-chr {
+      height: 10px;
+      min-height: 0 !important;
+    }
+
+    &-d {
+      max-height: 130px !important;
+      min-height: 0 !important;
+      margin-right: 30px;
+
+      div div:nth-of-type(2) {
+        min-height: 0 !important;
+      }
+    }
+
+    &.gm-style-iw-c {
+      min-height: 0 !important;
+    }
+  }
+
+  &-ui-hover-effect {
+    position: absolute !important;
+    top: 0;
+    right: 0;
+
+    &:focus {
+      outline: none !important;
+    }
+
+    &:focus-visible {
+      outline: 5px auto #005fcc !important;
+    }
+  }
+}

package/src/scss/components/_package-card.scss

@@ -0,0 +1,65 @@
+.package-card {
+  display: grid;
+  grid-template-rows: subgrid;
+  grid-row: span 5;
+  gap: 0;
+
+  border: 1px solid $gray;
+  border-radius: 4px;
+
+  &.has-stickers-row {
+    grid-row: span 6;
+
+    .package-card__content {
+      grid-row: span 5;
+    }
+  }
+
+  &__image {
+    width: 100%;
+    aspect-ratio: 16/9;
+    object-fit: contain;
+  }
+
+  &__content {
+    display: grid;
+    grid-template-rows: subgrid;
+    grid-row: span 4;
+    row-gap: 12px;
+    padding: 16px;
+  }
+
+  &__title {
+    margin-bottom: 0;
+  }
+
+  &__usp {
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+
+    margin-bottom: 0;
+    padding-left: 0;
+    list-style: none;
+
+    &-item {
+      display: flex;
+      align-items: baseline;
+      column-gap: 8px;
+    }
+  }
+
+  &__icon {
+    font-size: 1rem;
+    flex-shrink: 0;
+  }
+
+  &__price,
+  &__button {
+    align-self: end;
+  }
+
+  &__stickers {
+    min-width: 0;
+  }
+}