wickes-css2 2.113.0-develop.2 → 2.113.0-develop.21

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,12 +13,13 @@ 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">
 {{/content}}
 {{#content "body"}}
-<main class="pdp__main">
+<main class="pdp__main" data-cart-mock-key="cartPDPSingle">
   <div class="container">
     <div class="pdp">
       <div class="pdp__title">

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/_cards-slider.scss

@@ -66,7 +66,9 @@
     background-color: $gray;
     height: 6px;
     width: 6px;
-    transition: width 0.3s ease-in, background-color 0.3s ease-in;
+    transition:
+      width 0.3s ease-in,
+      background-color 0.3s ease-in;
 
     &-active {
       background-color: $blue;

package/src/scss/components/_checkout_order.scss

@@ -341,7 +341,8 @@
       }
     }
 
-    &:last-child {
+    &:last-child,
+    &:has(+ .delivery-block__heavy-banners-wrapper.d-none:last-child) {
       .order-block__product-line {
         .show-products {
           padding-bottom: 0;

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/_heavy-banners.scss

@@ -0,0 +1,216 @@
+// Big & Bulky (Heavy) delivery banners component
+// Used on delivery details page for heavy/bulky orders
+// Mobile-first approach
+
+.delivery-block {
+  &__show-products {
+    display: inline-block;
+    margin-bottom: 20px;
+    font-size: 1rem;
+    color: $blue;
+    text-decoration: underline;
+
+    &:hover {
+      color: $blue-darker;
+    }
+  }
+
+  &__weight-banner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: $ma-white;
+    padding: 8px;
+    margin: 0 -15px;
+    gap: 8px;
+    border-bottom: 1px solid $blue-satin;
+
+    .banner-news + & {
+      margin-top: 20px;
+    }
+
+    &-content {
+      p {
+        @include font-size(12);
+        @include line-height(16);
+        color: $blue-ocean;
+        font-weight: 700;
+        margin: 0;
+        text-align: center;
+      }
+    }
+
+    &-icon {
+      flex-shrink: 0;
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      i,
+      svg {
+        @include font-size(21);
+        color: $blue-satin;
+      }
+    }
+  }
+
+  // Outer wrapper for the whole banner section
+  &__heavy-banners-wrapper {
+    background: $white;
+    border: 1px solid $gray;
+    border-radius: 4px;
+    padding: 24px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    overflow: hidden;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &__heavy-banners-header {
+    margin-bottom: 0;
+  }
+
+  &__heavy-banners-title {
+    @include font-size(18);
+    @include line-height(24);
+    color: $gray-dark;
+    font-weight: 500;
+    margin: 0;
+  }
+
+  &__heavy-banners-terms {
+    @include font-size(12);
+    @include line-height(16);
+    color: $blue;
+    font-weight: 400;
+    text-decoration: underline;
+
+    &:hover {
+      color: $blue-darker;
+    }
+
+    // Mobile: T&C at bottom visible, desktop one hidden
+    &--mobile {
+      display: block;
+      margin-top: 16px;
+    }
+
+    &--desktop {
+      display: none;
+    }
+  }
+
+  &__heavy-banners-description {
+    @include font-size(14);
+    @include line-height(22);
+    color: $gray-dark;
+    font-weight: 400;
+    margin-top: 16px;
+    margin-bottom: 16px;
+  }
+
+  // Images container - matches Hybris class: delivery-block__heavy-banners
+  &__heavy-banners {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 8px 16px;
+    margin-bottom: 16px;
+
+    img {
+      flex: 0 1 calc(33.333% - 12px);
+      max-width: calc(33.333% - 12px);
+      height: auto;
+      object-fit: contain;
+    }
+  }
+
+  &__heavy-banners-contact {
+    display: flex;
+    align-items: center;
+    background: $ma-white;
+    padding: 8px;
+    border-radius: 4px;
+
+    &-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      flex-shrink: 0;
+      margin-right: 8px;
+    }
+
+    i,
+    svg {
+      @include font-size(21);
+      color: $blue-satin;
+    }
+
+    span {
+      @include font-size(12);
+      @include line-height(16);
+      color: $blue-ocean;
+      font-weight: 400;
+    }
+
+    a {
+      @include font-size(12);
+      @include line-height(16);
+      color: $blue-ocean;
+      font-weight: 400;
+      text-decoration: underline;
+
+      &:hover {
+        color: $blue-darker;
+      }
+    }
+  }
+}
+
+// Tablet and Desktop: all 5 in one row, T&C in header
+@include media-breakpoint-up(sm) {
+  .delivery-block {
+    &__weight-banner {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .delivery-block {
+    &__heavy-banners-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    &__heavy-banners-terms {
+      &--mobile {
+        display: none;
+      }
+
+      &--desktop {
+        display: inline-block;
+      }
+    }
+
+    &__heavy-banners {
+      flex-wrap: nowrap;
+
+      img {
+        flex: 1;
+        min-width: 0;
+        max-width: 120px;
+        width: 100%;
+      }
+    }
+  }
+}

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;
+  }
+}