wickes-css2 2.107.0-ripple.2 → 2.107.0-ripple.21

package/src/page_product-details-with-global-search-v2.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
 globalSearchV2="true"
@@ -63,11 +61,17 @@ switch-vat=true
         cc=true
         delivery=true
         }}
-        {{> fulfilment-accordions }}
       </div>
       <div class="pdp__description">
         {{> product-main-info-v2 isProductSaved=true}}
       </div>
+      <div
+          class="pdp__widget"
+          data-complete-widget
+          data-context-key="completeYourProject3Recomendations"
+      >
+        {{> bloomreach/complete-your-project title="Complete your project"}}
+      </div>
       {{> fulfilment-accordions }}
     </div>
   </div>

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
 }}
@@ -69,7 +67,6 @@
                         distance="1.4"
                         nearestName="Watford"
                         }}
-                        {{> fulfilment-accordions }}
                     </div>
                     <div class="pdp__description">
                         {{> product-main-info-v2 }}

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/page_store-locator-list.html

@@ -1,11 +1,14 @@
 {{#extend "base" pageClass="store-locator" title="Store locator list" pageStoreLocator=true}}
 {{#content "head" mode="append" pageStoreLocator=true}}{{/content}}
+
 {{#content "body"}}
 <main class="container">
   <h1>Store Locator</h1>
+
   <button class="btn btn-primary btn_store-near-me">
     <span class="btn__text">Find a store near me</span>
   </button>
+
   <div class="row-holder">
     <div class="map-container">
       <div class="map store-locator-popup__map">
@@ -13,43 +16,29 @@
       </div>
     </div>
   </div>
-  {{> find-a-store data-action = "scroll-to-list"}}
+
+  {{> find-a-store data-action="scroll-to-list"}}
+
   <div class="cards-store-holder">
     <div class="cards-store-wrapper">
-      <div class="row">
-        
-        <div class="cards-store-list">
-          {{> card-store-locator view-map="true" distance="true" opening-times="true" schedule-title="true" locator-list="true"}}
-        </div>
-        
+      <div class="row" id="store-cards">
         {{#each locators}}
         <div class="cards-store-list">
-          {{> card-store-locator view-map="true" distance="true" opening-times="true" schedule-title="true"}}
+          {{> card-store-locator
+          opening-times=true
+          schedule-title=true
+          locator-list=true
+          }}
         </div>
         {{/each}}
-
-        <div class="cards-store-list__actions">
-          <button class="btn btn-primary btn_full store-locator__load-button store-locator__load-button_more">
-            <span class="icon icon__eye">
-              <i class="fas fa-eye"></i>
-            </span>
-            <span class="btn__text">
-                View more...
-            </span>
-          </button>
-          <button class="btn btn-secondary btn_full store-locator__load-button" style="display: none;">
-            <span class="icon icon__eye">
-              <i class="fas fa-eye"></i>
-            </span>
-            <span class="btn__text">View less</span>
-          </button>
-        </div>
+      </div>
+      <div class="cards-store-list__actions">
+        <button class="btn btn-primary btn_full store-locator__load-button store-locator__load-button_more">
+          <span class="btn__text">Load more</span>
+        </button>
       </div>
     </div>
   </div>
-  <div class="pagination-holder">
-    {{> pagination pagination1="true"}}
-  </div>
 </main>
 {{/content}}
 {{/extend}}

package/src/page_track-my-order-result.html

@@ -36,6 +36,7 @@ mainClass="track-order"
           <h2 class="my-order__title">Order {{track_order.order.number}}</h2>
           <p class="my-order__placed">Order placed on <span class="date">{{track_order.order.orderDate}}</span></p>
           {{> button
+              primary="true"
               full=true
               modification="btn--print"
               text="Print"

package/src/partials/scripts.hbs

@@ -23,6 +23,7 @@
 <script defer src="https://kit.fontawesome.com/b73abc6840.js" crossorigin="anonymous"></script>
 {{#if pagePdp}}
   <script defer src="./js/saving-shopping-list.min.js"></script>
+  <script defer src="./js/bloomreach-widget.min.js"></script>
   <script async src="https://static.addtoany.com/menu/page.js"></script>
 {{/if}}
 

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/common/_common.scss

@@ -7,6 +7,7 @@
 @import 'app';
 @import 'rewards-counter';
 @import 'vat-toggle';
+@import 'loading-button';
 
 // common
 body {

package/src/scss/common/_elements.scss

@@ -258,7 +258,7 @@
       color: $gray-border;
 
       .inactive-message {
-        font-size: .75rem;
+        font-size: 0.75rem;
       }
     }
   }
@@ -266,6 +266,18 @@
   &-round {
     @include checkbox-round;
   }
+
+  &--action {
+    input {
+      &:checked,
+      &.fake-checked {
+        &:not(:disabled) + ins {
+          background: $green;
+          border-color: $green;
+        }
+      }
+    }
+  }
 }
 
 .file-loader {

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

@@ -0,0 +1,49 @@
+.loading-button {
+  position: relative;
+
+  &__loader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &--loading {
+    cursor: wait !important;
+    pointer-events: none;
+    min-height: 40px;
+    background-color: $green;
+    border: 1px solid $green;
+
+    &:focus {
+      background-color: $green;
+    }
+
+    .loading-button__text {
+      visibility: hidden;
+    }
+
+    .loading-button__loader {
+      display: flex;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .loader-wrapper {
+    .loader-spinner {
+      width: 24px;
+      height: 24px;
+
+      .circular-loader {
+        stroke-width: 8px;
+
+        .loader-path {
+          stroke: $white;
+        }
+      }
+    }
+  }
+}

package/src/scss/components/_card-store-locator.scss

@@ -2,6 +2,16 @@
   border: 1px solid $gray;
   display: flex;
   flex-direction: column;
+  height: 100%;
+
+  &__schedule {
+    .schedule-title {
+      &.card-store__title {
+        font-weight: $btn-font-weight;
+        padding: 15px 15px 13px;
+      }
+    }
+  }
 
   .store-locator-details & {
     border: 0;
@@ -17,8 +27,14 @@
     }
   }
 
+  &__body {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+  }
+
   &__info {
-    padding: 20px 15px 0;
+    padding: 15px 14px 0;
 
     .store-locator-details & {
       padding-top: 0;
@@ -27,16 +43,10 @@
 
   &__title {
     padding-top: 10px;
-    font-size: 1rem;
-    font-weight: 500;
+    font-weight: $headings-font-weight;
     line-height: 1.125rem;
 
-    &.schedule-title.schedule-title {
-      margin: 0 15px;
-    }
-
     .card-store__schedule & {
-      padding: 20px 0;
       font-weight: bold;
     }
 
@@ -51,11 +61,12 @@
   }
 
   &__distance {
-    font-weight: 500;
+    font-weight: $headings-font-weight;
+    margin-top: 4px;
   }
 
   &__address {
-    padding: 10px 0;
+    padding: 8px 0 0;
 
     .store-locator-details & {
       padding-bottom: 20px;
@@ -67,9 +78,21 @@
     }
   }
 
+  &__navigation {
+    padding: 16px 15px 4px;
+    margin-top: auto;
+
+    .btn {
+      margin-top: 0;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+  }
+
   &__schedule {
+    padding: 0 15px;
     line-height: 30px;
-    padding: 0 0 10px;
 
     .store-locator-details & {
       padding: 0 15px;
@@ -79,14 +102,10 @@
   &__contacts {
     @include primary-text;
     padding: 0 15px;
-
-    .store-locator-details & {
-      padding: 20px 15px;
-    }
   }
 
   &__tel {
-    padding-top: 10px;
+    padding-top: 8px;
     border-top: 1px solid $gray;
     display: block;
     white-space: nowrap;
@@ -103,23 +122,97 @@
   }
 
   &__actions {
-    text-align: center;
-    padding: 10px 0 20px;
+    padding: 8px 15px 15px;
 
     a {
-      font-weight: 500;
+      font-weight: $font-weight-bold;
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+      text-decoration: underline;
     }
   }
 
   &__features {
     padding: 0 15px;
   }
+}
 
-  &__navigation {
-    padding: 0 15px 15px;
+.card-store__schedule {
+  .opening-times-accordion {
+    padding: 0;
+    border-top: 0;
+    border-bottom: 0;
+
+    &__icon {
+      left: auto;
+      right: -2px;
+      top: 9px;
+      font-size: 1.25rem;
+    }
 
-    .btn {
+    &__header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      cursor: pointer;
+      padding: 10px 0 12px;
+      margin: 0;
+    }
+
+    &__title {
+      font-size: 0.875rem;
+      font-weight: $headings-font-weight;
+      line-height: 22px;
+      color: $gray-dark;
+    }
+
+    &__icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      transition: transform 0.2s ease;
+    }
+
+    &__content {
+      padding: 0 0 12px;
+      margin-left: -15px;
+      margin-right: -15px;
+    }
+
+    &__close {
       width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 12px 0 4px;
+      border: 0;
+      background: transparent;
+      cursor: pointer;
+
+      &:focus:not(:focus-visible) {
+        outline: none;
+      }
+    }
+
+    &__close-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: $headings-font-weight;
+      color: $blue;
+      cursor: pointer;
+      box-sizing: border-box;
+      height: 24px;
+      line-height: 24px;
+      width: 24px;
+      text-align: center;
+      font-size: 1.25rem;
+    }
+
+    &.accordion_collapsed {
+      .opening-times-accordion__icon {
+        transform: rotate(360deg);
+      }
     }
   }
 }
@@ -129,7 +222,11 @@
 
   &__day,
   &__time {
-    width: 50%;
+    display: flex;
+    justify-content: flex-end;
+    width: 56%;
+    min-width: 145px;
+    padding-right: 15px;
 
     .store-locator-details & {
       text-align: right;
@@ -137,8 +234,18 @@
     }
   }
 
+  &__time {
+    gap: 3px;
+  }
+
   &__day {
+    align-items: center;
+    justify-content: flex-start;
+    min-width: auto;
+    width: 44%;
     padding-left: 15px;
+    padding-right: 0;
+    line-height: 20px;
 
     .store-locator-details & {
       text-align: left;
@@ -165,12 +272,16 @@
 @include media-breakpoint-down(sm) {
   .card-store {
     &__schedule {
-      display: flex;
-      flex-direction: column;
+      display: block;
+      padding: 0 15px;
+    }
 
-      .card-store__special-time {
-        order: -1;
-      }
+    &__navigation {
+      padding-top: 12px;
+    }
+
+    &__actions {
+      padding-bottom: 12px;
     }
   }
 
@@ -188,10 +299,6 @@
     .store-locator-details & {
       width: 55%;
     }
-
-    &__info {
-      min-height: 240px;
-    }
   }
 }
 

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/_image-accordion.scss

@@ -9,8 +9,8 @@
     margin-bottom: 8px;
 
     & img {
-      width: 51px;
-      height: 51px;
+      flex-basis: calc((100% - 40px) / 6);
+      min-width: 45px;
     }
   }
 
@@ -24,6 +24,9 @@
     padding-left: 32px;
     color: $blue;
     cursor: pointer;
+
+    font-size: 0.875rem;
+    line-height: 1.375rem;
   }
 
   &__icon {

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

@@ -49,6 +49,7 @@
 
   &__title {
     margin-bottom: 0;
+    user-select: none;
   }
 
   &__parameters {
@@ -79,7 +80,7 @@
     top: 50%;
     transform: translateY(-50%);
     z-index: 1;
-    background: rgba($black, .3);
+    background: rgba($black, 0.3);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -89,7 +90,7 @@
 
     &.swiper-button-disabled {
       display: flex !important;
-      opacity: .5;
+      opacity: 0.5;
     }
   }
 
@@ -122,11 +123,11 @@
   .kitchen-cards {
     grid-template-columns: repeat(2, 1fr);
     gap: 24px;
-  }  
+  }
 }
 
 @include media-breakpoint-up(lg) {
   .kitchen-cards {
     grid-template-columns: repeat(3, 1fr);
-  }  
+  }
 }