wickes-css2 2.109.0-develop.2 → 2.109.0-develop.4

package/src/page_checkout_next-day-delivery-details.html

@@ -23,7 +23,7 @@
         Please choose a date for delivery from the calendar below.
       </p>
       <p class="date-selection__info-block">
-        Our delivery slots are currently available up to 8 days in advance. We release additional delivery slots daily.
+        Our delivery slots are currently available up to 8 days in advance.<br> We release additional delivery slots daily.
       </p>
       <p class="date-selection__annotation">
         *Individual couriers will provide more information on delivery times, closer to your chosen delivery date.
@@ -32,7 +32,7 @@
 
     <div class="component component-date-selection">
       {{> date-selection
-          titleDelivery="Next and Named day delivery"
+          titleDelivery="Next or Named day delivery"
           subtitleDelivery="Delivery between 7am - 7pm for £7*"
           wisdom=true
       }}

package/src/page_checkout_payment-details-v2-asm.html

@@ -11,7 +11,7 @@
   {{/content}}
 
   {{#content "aside"}}
-    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true email=true}}
+    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true email=true hideDeliveryCostMessage=true}}
   {{/content}}
 
 

package/src/page_checkout_payment-details-v2.html

@@ -11,7 +11,7 @@
   {{/content}}
 
   {{#content "aside"}}
-    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon paymentsCheckoutV2="true"}}
+    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon paymentsCheckoutV2="true" hideDeliveryCostMessage=true}}
   {{/content}}
 
 

package/src/page_checkout_payment-details_with-card-loader.html

@@ -11,7 +11,7 @@
 {{/content}}
 
 {{#content "aside"}}
-{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true}}
+{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true hideDeliveryCostMessage=true}}
 {{/content}}
 
 

package/src/page_checkout_payment-details_with-klarna-loader.html

@@ -11,7 +11,7 @@
   {{/content}}
 
   {{#content "aside"}}
-    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true}}
+    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true hideDeliveryCostMessage=true}}
   {{/content}}
 
 

package/src/page_checkout_payment-details_with-loader-v2.html

@@ -11,7 +11,7 @@
   {{/content}}
 
   {{#content "aside"}}
-    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true}}
+    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true hideDeliveryCostMessage=true}}
   {{/content}}
 
 

package/src/page_checkout_rapid-delivery-details.html

@@ -17,7 +17,7 @@
     <div class="delivery-block">
         <h3 class="delivery-block__heading">Delivery Information</h3>
         {{> banner-news
-            description="<b>Your order qualifies for Wickes Rapid delivery.</b></br>Alternative delivery options are available."
+            description="<b>Your order qualifies for Rapid delivery.</b></br>Alternative delivery options are available."
             classImg="fas fa-shipping-fast"
         }}
         <div class="delivery-block__wrapper">
@@ -27,14 +27,15 @@
                     Please choose a date for delivery from the calendar below.
                 </p>
                 <p class="date-selection__info-block">
-                    Our delivery slots are currently available up to 8 days in advance. We release additional delivery slots daily.
+                    Our delivery slots are currently available up to 8 days in advance.<br> We release additional delivery slots daily.
                 </p>
+                <p>*Individual couriers will provide more information on delivery times, closer to your chosen delivery date.</p>
             </div>
 
             <div class="component component-date-selection">
                 {{> date-selection
-                    titleDelivery="Wickes Rapid delivery"
-                    subtitleDelivery="Delivery within 3 hours for £12"
+                    titleDelivery="Next or Named day delivery"
+                    subtitleDelivery="Delivery between 7am - 7pm for £12.00"
                     imgDelivery="fas fa-shipping-fast"
                     wisdom=true
                 }}
@@ -131,10 +132,11 @@
   <div class="continue-btn">
       <button class="btn btn-action">Continue to Payment Details</button>
   </div>
-
 {{/content}}
 
 {{#content "foot" mode="append"}}
+    {{> loader titleLoader="Loading Rapid delivery..." hidden=true modifier="basket-loader rapid-loader"}}
+
     <script defer src="./js/page/checkout-confirmation-new.js"></script>
     <script defer src="./js/page/select-address.js"></script>
 

package/src/page_klarna_payment-details_with-klarna.html

@@ -13,7 +13,7 @@
   {{/content}}
 
   {{#content "aside"}}
-    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true}}
+    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true hideDeliveryCostMessage=true}}
   {{/content}}
 
 

package/src/page_payment-details-with-billie.html

@@ -16,7 +16,7 @@
 {{/content}}
 
 {{#content "aside"}}
-{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon billieIcon=true paymentsCheckoutV2=true}}
+{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon billieIcon=true paymentsCheckoutV2=true hideDeliveryCostMessage=true}}
 {{/content}}
 
 

package/src/page_payment-details-with-clearpay.html

@@ -16,7 +16,7 @@
 {{/content}}
 
 {{#content "aside"}}
-{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon paymentsCheckoutV2=true checkout=true}}
+{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon paymentsCheckoutV2=true checkout=true hideDeliveryCostMessage=true}}
 {{/content}}
 
 

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

@@ -18,7 +18,7 @@
 {{/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}}
+{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon billieIcon=true paymentsCheckoutV2=true checkout=true hideDeliveryCostMessage=true}}
 {{/content}}
 
 

package/src/page_payment-details_with_apple-pay.html

@@ -13,7 +13,7 @@
   {{/content}}
 
   {{#content "aside"}}
-    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true basket="true"}}
+    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true basket="true" hideDeliveryCostMessage=true}}
   {{/content}}
 
 

package/src/page_payment-details_with_google-pay.html

@@ -13,7 +13,7 @@
 {{/content}}
 
 {{#content "aside"}}
-{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true}}
+{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true hideDeliveryCostMessage=true}}
 {{/content}}
 
 

package/src/page_plp_v2.html

@@ -11,6 +11,7 @@
                         Fire Doors
                     </h1>
                     {{> srp-injected}}
+                    {{> sponsor-top-banner }}
                 </div>
 
                 {{> color-picker-plp }}

package/src/page_product-details-mfe-calculator.html

@@ -3,13 +3,14 @@ isDiscount=true
 isSQM=true
 isDescription=false
 isCashback=false
-isSize=true
+isSize=false
 isGuide=true
+isQuantity=true
 hourly-delivery=true
 badge-text='15% off'
 badge-color='yellow'
 badge-text-color='gray'
-currentlyInStock=true
+currentlyInStock=false
 pagePdp=true
 }}
 {{#content "head" mode="append" pagePdp=true}}
@@ -81,6 +82,10 @@ pagePdp=true
                 more-stores-present=true
                 mfeProductCalculator=true
                 default-store=true
+                isExcludingDelivery=true
+                notifyMe=true
+                klarna-placement=true
+                clearpay-placement=true
                 }}
                 {{> fulfilment-accordions }}
             </div>
@@ -121,7 +126,8 @@ pagePdp=true
 <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>
+{{> modals/notify-me-modal mod="modal-notify-me"}}
+<script defer src="./js/pdp.bundle.min.js"></script>
 <script defer src="./js/energy-efficiency.min.js"></script>
 {{> click-and-collect-modal pdp=pdp}}
 {{> wisdom-modal-mcfc }}

package/src/scss/common/_CTAs.scss

@@ -11,7 +11,7 @@
 .btn {
   position: relative;
   text-decoration: none;
-  transition: all .2s ease;
+  transition: all 0.2s ease;
 
   &_full {
     @include button-full;
@@ -34,7 +34,7 @@
     :focus > &,
     :active > & {
       color: $white;
-      opacity: .6;
+      opacity: 0.6;
       bottom: auto; //IE fix
     }
   }
@@ -55,6 +55,10 @@
   @include button-primary;
 }
 
+.btn-outline-primary {
+  @include button-outline-primary;
+}
+
 .btn-secondary {
   @include button-secondary;
 }
@@ -85,7 +89,7 @@
 }
 
 .btn-pending {
-  @include button-pending
+  @include button-pending;
 }
 
 .btn--icon {

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

@@ -501,6 +501,24 @@
               }
             }
           }
+
+          &-delivery:has(+ .checkout-widget__item-delivery-cost-message) {
+            padding-bottom: 0;
+          }
+
+          &-delivery-cost-message {
+            margin-top: 4px !important;
+            padding-top: 0;
+            justify-content: flex-end;
+
+            #order-delivery-cost-message {
+              @include font-size(10);
+              @include line-height(12);
+
+              font-weight: 700;
+              color: $squant;
+            }
+          }
         }
 
         &__details-discount {

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

@@ -248,16 +248,50 @@
       height: auto;
     }
   }
+
+  .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 {
   .btn.btn_full {
     display: flex;
-    padding: 16px 20px;
+    padding: 16px 12px;
     align-items: center;
     justify-content: center;
     border: 0;
     border-radius: 0;
+    position: relative;
+
+    &:has(.delivery-btn__image:not(.d-none)) {
+      padding: 16px 64px 16px 12px;
+    }
   }
 }
 
@@ -271,6 +305,14 @@
   }
 }
 
+@include media-breakpoint-only(sm) {
+  .delivery-types .delivery-container {
+    .subtitle br {
+      display: none;
+    }
+  }
+}
+
 @include media-breakpoint-up(md) {
   .date-selection {
     .delivery-date,

package/src/scss/components/_notify-me-modal.scss

@@ -0,0 +1,139 @@
+.modal-notify-me {
+  .modal-dialog {
+    height: 100%;
+    margin: 0 auto;
+    max-width: 100%;
+  }
+
+  &.modal-box_wide {
+    .modal-box__columns {
+      max-width: 520px;
+      padding: 0;
+    }
+  }
+
+  .modal-box__inner-row {
+    margin: 0;
+
+    .modal-box__inner-columns {
+      padding: 0;
+      max-width: 100%;
+      flex: 0 0 100%;
+    }
+  }
+
+  .modal-header {
+    padding: 16px 35px 16px 24px;
+
+    .modal-title {
+      @include font-size(18);
+      @include line-height(24);
+      color: $gray-dark;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      gap: 14px;
+
+      .icon-wrap {
+        width: 40px;
+        height: 40px;
+      }
+
+      .icon {
+        @include font-size(30);
+        color: $blue;
+        height: auto;
+      }
+    }
+
+    .close {
+      opacity: 1;
+      outline: 0;
+      right: 10px;
+    }
+
+    &:after {
+      left: 0;
+      right: 0;
+    }
+  }
+
+  .modal-body {
+    padding: 24px;
+
+    .form-row__label {
+      margin-bottom: 8px;
+    }
+
+    .notify-me-form {
+      &__note {
+        @include font-size(12);
+        @include line-height(16);
+        color: $squant;
+        font-weight: 400;
+        margin-bottom: 0;
+      }
+
+      &__ctas {
+        margin-top: 40px;
+        display: flex;
+        gap: 16px;
+
+        & > div {
+          display: contents;
+        }
+      }
+    }
+
+    .notify-me-result {
+      display: flex;
+      align-items: center;
+      gap: 15px;
+
+      &__img {
+        width: 64px;
+        height: 64px;
+        object-fit: cover;
+      }
+
+      &__title {
+        @include font-size(14);
+        @include line-height(22);
+        font-weight: 700;
+      }
+
+      & + .btn--notify-close {
+        margin-top: 40px;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-down(xl) {
+  .modal-notify-me {
+    height: auto;
+    margin: 40px 16px 0;
+
+    &.modal-box_full .modal-box__inner-row {
+      margin: 0;
+    }
+
+    .modal-body {
+      .form-row {
+        padding: 0;
+        margin: 0 0 16px;
+      }
+
+      .form-row__label,
+      .form-row__field,
+      .form-row__error {
+        padding: 0;
+      }
+    }
+
+    .modal-body .notify-me-form__ctas,
+    .notify-me-result .btn--notify-close {
+      margin-top: 32px;
+    }
+  }
+}

package/src/scss/components/_order-summary.scss

@@ -1,6 +1,6 @@
 @import '../helpers/helpers';
 
-$android-offset:   60px !default;
+$android-offset: 60px !default;
 $ios-notch-offset: 80px !default;
 
 .summary {
@@ -9,7 +9,7 @@ $ios-notch-offset: 80px !default;
     background: $gray-bg;
     margin: 0 auto;
     z-index: $summary-aside;
-    box-shadow: 4px 4px 16px rgba(0, 0, 0, .25);
+    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.25);
 
     & .form-row__col-btn {
       padding-right: 0;
@@ -55,7 +55,7 @@ $ios-notch-offset: 80px !default;
 
     &-message {
       padding-bottom: 20px;
-      font-size: .75rem;
+      font-size: 0.75rem;
     }
 
     &-main {
@@ -93,7 +93,7 @@ $ios-notch-offset: 80px !default;
     align-items: center;
     width: 24px;
     height: 24px;
-    transition: transform .3s ease;
+    transition: transform 0.3s ease;
     transform: rotate(180deg);
 
     &-up,
@@ -149,7 +149,7 @@ $ios-notch-offset: 80px !default;
   }
 
   .checkout-widget__item-vat {
-    font-size: .875rem;
+    font-size: 0.875rem;
     margin: 0;
     padding: 0;
   }
@@ -158,11 +158,25 @@ $ios-notch-offset: 80px !default;
     text-align: right;
   }
 
-  .checkout-widget__item-cc, .checkout-widget__item-delivery {
+  .checkout-widget__item-cc,
+  .checkout-widget__item-delivery {
     font-size: 1rem;
     margin-top: 5px;
   }
 
+  .checkout-widget__item-delivery-cost-message {
+    margin-top: 4px;
+    justify-content: flex-end;
+
+    #order-delivery-cost-message {
+      @include font-size(10);
+      @include line-height(12);
+
+      font-weight: 700;
+      color: $squant;
+    }
+  }
+
   .checkout-widget__total {
     display: flex;
     justify-content: space-between;
@@ -183,7 +197,7 @@ $ios-notch-offset: 80px !default;
     right: 0;
     overflow: hidden;
     display: block !important;
-    transition: height .3s ease-in-out;
+    transition: height 0.3s ease-in-out;
     max-height: calc(100vh - 177px);
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
@@ -218,12 +232,12 @@ $ios-notch-offset: 80px !default;
   .collapsing {
     height: 0;
     overflow: hidden;
-    transition: height .3s ease-in-out;
+    transition: height 0.3s ease-in-out;
   }
 
   .collapse.show {
     height: auto;
-    transition: height .3s ease-in-out;
+    transition: height 0.3s ease-in-out;
   }
 }
 
@@ -233,7 +247,7 @@ $ios-notch-offset: 80px !default;
   left: 0;
   right: 0;
   z-index: $summary-mobile-bar;
-  transition: transform .3s ease;
+  transition: transform 0.3s ease;
 }
 
 .summary__mobile-order {
@@ -245,7 +259,7 @@ $ios-notch-offset: 80px !default;
   height: 44px;
   cursor: pointer;
   color: $white;
-  transition: transform .3s ease;
+  transition: transform 0.3s ease;
 }
 
 .summary:not(.summary--mobile) {
@@ -316,7 +330,6 @@ $ios-notch-offset: 80px !default;
           display: none;
         }
       }
-
     }
 
     .checkout-widget.checkout-widget_order-summary {

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

@@ -21,13 +21,13 @@
 
   .pdp-price__oos {
     border-top: 1px solid $gray;
-    margin-bottom: 8px;
+    margin-bottom: 12px;
   }
 
   .pdp-price__value_extended,
   .pdp-price__oos,
   .pdp-price__in-store-only {
-    padding: 10px 0;
+    padding: 12px 0;
 
     p {
       margin-bottom: 0;

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

@@ -15,7 +15,7 @@
   }
 
   .pdp-price__from {
-    font-size: .6em;
+    font-size: 0.6em;
     margin-right: 4px;
   }
 
@@ -32,18 +32,29 @@
 
   .pdp-price__oos {
     border-top: 1px solid $gray;
-    margin-bottom: 8px;
+    margin-bottom: 12px;
 
     & + .pdp-price__controls,
     &:last-child {
       margin-bottom: 0;
     }
+
+    .btn--notify-open {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+
+      .fa-bell {
+        @include font-size(18);
+      }
+    }
   }
 
   .pdp-price__value_extended,
   .pdp-price__oos,
   .pdp-price__in-store-only {
-    padding: 10px 0;
+    padding: 12px 0;
 
     p {
       margin-bottom: 0;
@@ -250,7 +261,6 @@
           border-bottom-color: $red;
         }
       }
-
     }
   }
 

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

@@ -36,6 +36,10 @@
     }
   }
 
+  &__picture {
+    display: flex;
+  }
+
   &__image {
     display: inline-block;
     width: 100%;
@@ -57,6 +61,10 @@
       padding: 0 15px;
     }
 
+    &__picture {
+      display: flex;
+    }
+
     &__image {
       display: inline-block;
       width: 100%;