wickes-css2 2.105.0-develop.1 → 2.105.0-develop.11

package/src/page_search-results.html

@@ -16,8 +16,7 @@
 
     <div class="row">
       <aside class="left-aside">
-        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
-        {{> search-filter-mobile }}
+        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
       </aside>
 
       <div class="content">
@@ -25,11 +24,6 @@
 
         <div class="sort-products-list">
           <div class="sort-products-list__section sort-products-list__items-per-page">
-            <button class="btn btn-primary open-filters-btn" id="open-overlay">
-              <span class="btn__text">
-                <span class="icon"><span class="fas fa-filter"></span></span>Show filters
-              </span>
-            </button>
             {{> form-row dropdown="true" ddn-mod="ddn_small" id="d1-top" label="Products per page" label-hidden="true" placeholder="All products per page"}}
           </div>
           <div class="sort-products-list__section sort-products-list__pagination">
@@ -80,5 +74,6 @@
 <script defer src="./js/energy-efficiency.min.js"></script>
 <script defer src="./js/page/plp-img-v2.js"></script>
 <script defer src="./js/page/plp-cards-v2.js"></script>
+<script defer src="./js/search-filter.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_shared-project-list-bicester-hub.html

@@ -9,7 +9,9 @@
 </main>
 {{/content}}
 {{#content "foot" mode="append"}}
-<script src="./js/project-list-note.min.js"></script>
+<script defer src="./js/project-list.min.js"></script>
+<script defer src="./js/share-project-list.min.js"></script>
 <script defer src="./js/global-search.min.js"></script>
+<script defer src="./js/saving-shopping-list.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_shopping-cart-v2-klarna-with-method-ids.html

@@ -0,0 +1,50 @@
+{{#extend "basket-new" page_shopping-cart pageClass="page_basket basket" title="Basket" billieIcon=false}}
+  {{#content "head" mode="append"}}
+    <link type="text/css" rel="stylesheet" href="./css/pages/page_shopping-cart-v2.css">
+    <link type="text/css" rel="stylesheet" href="./css/pages/checkout-new.css">
+  {{/content}}
+  {{#content "heading"}}
+    <div class="globalMessages">
+      <div class="container">
+        {{> notifications notification-page.warning-tiles-changed withCloseBtn="true"}}
+        {{> notifications notification-page.warning-tiles-changed withCloseBtn="true"}}
+      </div>
+    </div>
+    <div class="checkout-header__promo">
+      {{#each shopping-cart-v2.potentialOrderPromotions}}
+        {{> potential-promotion}}
+      {{/each}}
+    </div>
+    {{> checkout-header shopping-cart-v2.header}}
+  {{/content}}
+{{#content "aside"}}
+  {{> order-summary
+  shopping-cart-v2.checkout
+  id=1
+  title="Order Summary"
+  basket=true
+  klarna-placement=true
+  klarna-method-ids="BathroomsFinance"
+  }}
+  {{> checkout-action  mod="mounted"}}
+  {{> checkout-action  mod="mounted" view="mobile"}}
+  {{> summary-payment paymentsCheckoutV2=true billieIcon=false}}
+{{/content}}
+{{#content "main"}}
+  <input type="hidden" id="SUPPLIER_DELIVERED_7_DAYS" value="<b> Wickes Supplier </b> - Delivery within 7 days">
+  <input type="hidden" id="STANDARD" value="<b> STANDARD </b> - Delivery within 1 day">
+  <input type="hidden" id="canDisplayPayPalOnBasketPage" value="true">
+  {{#each shopping-cart-v2.sections }}
+    <section class="basket__section" data-type="{{type}}">
+      {{> checkout-section-title title=type items-count=items-count}}
+      {{#each items}}
+        {{> order-item}}
+      {{/each}}
+    </section>
+  {{/each}}
+{{> basket-charity-donations-new   shopping-cart-v2.charityDonationNew }}
+{{/content}}
+{{#content "foot" mode="append"}}
+  <script defer src="./js/basket.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/page_tradepro-discount-app.html

@@ -32,7 +32,7 @@ mainClass="discount-offer"
       </div>
       <div class="discount-offer__body">
         {{> my-account/discount
-        discountSrc=my_account.tradepro.discount
+        discountText=my_account.tradepro.discountText
         title="In-store discount"
         code=my_account.discount
         }}

package/src/page_tradepro-discount-double.html

@@ -0,0 +1,109 @@
+{{#extend
+  "my-account-v2"
+  dataBreadcrumbs=discount.tradePro.breadcrumbs
+  pageClass="page_my-account_new"
+  title="My Account discount double"
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  mainClass="discount-offer"
+}}
+{{#content "head" mode="append"}}
+  <link type="text/css" rel="stylesheet" href="./css/pages/page_discount.css">
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+          menu=discount.menu
+          active-index=7
+          page-name=discount.menu.[7].title
+      }}
+    </div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="row">
+    <div class="col-12 discount-offer__wrap pb-0">
+      <div class="discount-offer__header">
+        <h1 class="title">TradePro Event: 15% off</h1>
+      </div>
+      <div class="discount-offer__body discount-offer__body--secondary  discount-offer__body--double">
+        {{> my-account/discount
+            secondary=true
+            mod="discount-offer--background-secondary"
+            discountText=my_account.tradepro2.discountText
+            title="In-store discount"
+            code=my_account.discount
+        }}
+        {{> my-account/clipboard-code-card
+            secondary=true
+            mod="trade-pro-id discount-offer--background-secondary"
+            icon=my_account.tradepro.icons.tradeproID
+            title="TradePro ID"
+            code=my_account.tradeProId
+            description=discount.tradePro.discountIdText
+        }}
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="row">
+    <div class="col-12 discount-offer__wrap">
+      <div class="discount-offer__header">
+        <h1 class="title">TradePro Discount</h1>
+      </div>
+      <div class="discount-offer__body">
+        {{> my-account/discount
+            discountText=my_account.tradepro.discountText
+            title="In-store discount"
+            code=my_account.discount
+        }}
+        {{> my-account/clipboard-code-card
+            mod="trade-pro-id"
+            icon=my_account.tradepro.icons.tradeproID
+            title="TradePro ID"
+            code=my_account.tradeProId
+            description=discount.tradePro.discountIdText
+        }}
+        {{> my-account/clipboard-code-card
+            mod="discount-code"
+            icon="fas fa-badge-percent"
+            title="Online discount code"
+            code=my_account.tradepro.discountCode
+            description=discount.tradePro.onlineDiscountText
+        }}
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="app-info">
+  <div class="container">
+    <div class="row">
+      <div class="col-12 app-info__wrap">
+        <div class="app-info__header">
+          <h2 class="title">Download the APP</h2>
+          <p class="description">Download the Wickes TradePro App now and sign in to access your trade benefits.</p>
+          <div class="app-info__stores">
+            {{#each discount.downloadAppImages}}
+            <a href="#">
+              {{{this}}}
+            </a>
+            {{/each}}
+          </div>
+        </div>
+        <div class="download-app-img"></div>
+      </div>
+    </div>
+  </div>
+</div>
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/my-account.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/page_tradepro-discount.html

@@ -2,7 +2,7 @@
   "my-account-v2"
   dataBreadcrumbs=discount.tradePro.breadcrumbs
   pageClass="page_my-account_new"
-  title="My Account DIY"
+  title="My Account discount"
   pageMyAcc=true
   myAccV2=true
   isLoggedIn=true
@@ -24,6 +24,40 @@
   </div>
 </div>
 
+<div class="container">
+  <div class="row">
+    <div class="col-12 discount-offer__wrap pb-0">
+      <div class="discount-offer__header">
+        <h1 class="title">TradePro Event: 15% off</h1>
+      </div>
+      <div class="discount-offer__body discount-offer__body--secondary">
+        {{> my-account/discount
+            secondary=true
+            discountText=my_account.tradepro2.discountText
+            title="In-store discount"
+            code=my_account.discount
+        }}
+        {{> my-account/clipboard-code-card
+            secondary=true
+            mod="trade-pro-id"
+            icon=my_account.tradepro.icons.tradeproID
+            title="TradePro ID"
+            code=my_account.tradeProId
+            description=discount.tradePro.discountIdText
+        }}
+        {{> my-account/clipboard-code-card
+            secondary=true
+            mod="discount-code"
+            icon="fas fa-badge-percent"
+            title="Online discount code"
+            code=my_account.tradepro.discountCode
+            description=my_account.tradepro2.onlineDiscountText
+        }}
+      </div>
+    </div>
+  </div>
+</div>
+
 <div class="container">
   <div class="row">
     <div class="col-12 discount-offer__wrap">
@@ -32,7 +66,7 @@
       </div>
       <div class="discount-offer__body">
         {{> my-account/discount
-            discountSrc=my_account.tradepro.discount
+            discountText=my_account.tradepro.discountText
             title="In-store discount"
             code=my_account.discount
         }}

package/src/partials/head.hbs

@@ -11,6 +11,7 @@
 {{else if pagePlp}}
     <link type="text/css" rel="stylesheet" href="./css/plp-main.css">
 {{else if pageKitchenPLP}}
+    <link type="text/css" rel="stylesheet" href="./css/main.css">
     <link type="text/css" rel="stylesheet" href="./css/kitchen-plp-main.css">
 {{else if pageCat}}
     <link type="text/css" rel="stylesheet" href="./css/category-main.css">

package/src/scss/common/_common.scss

@@ -180,7 +180,7 @@ main {
   &__text {
     display: inline-block;
     vertical-align: top;
-    font-size: .875rem;
+    font-size: 0.875rem;
   }
 }
 
@@ -207,7 +207,7 @@ main {
   display: inline-block;
   padding: 2px 10px;
   background-color: $gray-bg;
-  font-size: .875rem;
+  font-size: 0.875rem;
   line-height: 1.375rem;
   border-left: 2px solid $gray;
 
@@ -318,7 +318,7 @@ main {
   border-top: 3px solid $blue-dark;
   width: 60px;
   height: 60px;
-  animation: spin .75s linear infinite;
+  animation: spin 0.75s linear infinite;
   position: absolute;
   left: calc(50% - 30px);
   top: calc(50% - 30px);
@@ -410,7 +410,8 @@ main {
 }
 
 @include media-breakpoint-down(xs) {
-  a, p {
+  a,
+  p {
     word-wrap: break-word;
   }
 
@@ -595,4 +596,9 @@ div .design-appointment {
   display: flex;
   align-items: center;
   justify-content: center;
+
+  &--large {
+    width: 48px;
+    height: 48px;
+  }
 }

package/src/scss/components/_accordion.scss

@@ -46,7 +46,6 @@
         border-radius: 3px;
         word-wrap: break-word;
 
-
         &-icon {
           position: static;
           color: $warm-grey;
@@ -72,7 +71,6 @@
             content: '+';
             font-size: 1.77rem;
           }
-
         }
 
         &:hover {
@@ -89,7 +87,7 @@
         border-radius: 3px;
 
         &-inner {
-          font-size: .875rem;
+          font-size: 0.875rem;
           font-weight: 500;
           line-height: 18px;
         }

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

@@ -6,8 +6,9 @@
   border-radius: 0;
   position: fixed;
   background-color: $white;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
-  transition: transform .4s ease, opacity .4s ease;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  /* prettier-ignore */
+  transition: transform 0.4s ease, opacity 0.4s ease;
   opacity: 0;
   display: flex;
   flex-direction: column;
@@ -118,7 +119,7 @@
     .messages {
       display: flex;
       flex-direction: column;
-      border: none;
+      border: 0;
       background: none;
 
       &__text {
@@ -130,7 +131,7 @@
 
       &__notice {
         margin-top: 4px;
-        font-size: .75rem;
+        font-size: 0.75rem;
         font-weight: 400;
         line-height: 1rem;
         color: $squant;
@@ -151,7 +152,7 @@
       justify-content: space-between;
       grid-gap: 8px;
       padding: 8px 0;
-      border: none;
+      border: 0;
 
       & + .products__item {
         border-top: 1px solid $gray-light;
@@ -184,7 +185,7 @@
           min-width: 24px;
           padding: 4px;
           background: 0 0;
-          border: none;
+          border: 0;
           display: flex;
           align-items: center;
           justify-content: center;
@@ -206,7 +207,7 @@
       }
 
       .title {
-        font-size: .875rem;
+        font-size: 0.875rem;
         font-weight: 500;
         line-height: 1.375rem;
         text-decoration: none;
@@ -214,7 +215,7 @@
       }
 
       .item {
-        font-size: .75rem;
+        font-size: 0.75rem;
         font-weight: 400;
         line-height: 1rem;
         color: $squant;
@@ -332,10 +333,10 @@
     grid-gap: 16px;
     padding: 16px;
     background: $white;
-    transition: all .3s ease;
+    transition: all 0.3s ease;
 
     &.footer-fixed {
-      box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, .08);
+      box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.08);
       position: fixed;
       width: 100%;
       left: 0;
@@ -406,7 +407,7 @@
     }
 
     .custom-slider__footer {
-      box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, .08);
+      box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.08);
       flex-direction: column;
     }
   }
@@ -436,7 +437,7 @@
           font-weight: 700;
         }
 
-        &[aria-expanded="true"] {
+        &[aria-expanded='true'] {
           .icon-wrap .arrow-icon {
             transform: rotate(180deg);
           }
@@ -519,7 +520,7 @@
 
           .checkout-widget__details-hidden {
             padding-left: 15px;
-            font-size: .75rem;
+            font-size: 0.75rem;
             line-height: 1rem;
             list-style-type: disc;
             font-weight: 400;
@@ -530,11 +531,11 @@
             .icon {
               color: $blue;
               font-size: 1rem;
-              transition: all .3s ease;
+              transition: all 0.3s ease;
               transform: rotate(180deg);
             }
 
-            &[aria-expanded="true"] {
+            &[aria-expanded='true'] {
               .icon {
                 transform: rotate(0);
               }
@@ -599,7 +600,7 @@
       margin-top: 12px;
 
       &__details .title {
-        @include multiline-ellipsis();
+        @include multiline-ellipsis(1);
       }
 
       &__item {

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

@@ -17,7 +17,7 @@
   }
 
   &__annotation {
-    font-size: .75rem;
+    font-size: 0.75rem;
   }
 
   .delivery-date::after {
@@ -70,14 +70,14 @@
       &_names {
         background: $white;
         color: $blue-ocean-dark;
-        font-size: .875rem;
+        font-size: 0.875rem;
         font-weight: 500;
         margin: 0;
       }
 
       &_days {
-        font-size: .8125rem;
-        line-height: .8125rem;
+        font-size: 0.8125rem;
+        line-height: 0.8125rem;
         font-weight: 500;
       }
 
@@ -88,7 +88,7 @@
 
     &__cell {
       &_cnt {
-        font-size: .875rem;
+        font-size: 0.875rem;
         border-radius: 50%;
         height: 34px;
         line-height: 34px;
@@ -111,7 +111,6 @@
         }
       }
 
-
       &_selected,
       &:active {
         position: relative;
@@ -142,6 +141,48 @@
       font-weight: 500;
       font-size: 1rem;
     }
+
+    &_rapid {
+      display: inline;
+      align-items: center;
+      position: relative;
+
+      &::after {
+        content: '';
+        position: relative;
+        display: block;
+        background: $ma-white;
+        border-radius: 50%;
+        width: 34px;
+        height: 34px;
+        top: -34px;
+        left: calc(50% - 34px / 2);
+        z-index: $circle-z-index;
+      }
+
+      .label-rapid {
+        @include font-size(10);
+        @include line-height(10);
+        border-radius: 30px;
+        border: 1px solid $white;
+        background: $pacific-depths;
+        position: absolute;
+        bottom: -8px;
+        left: 50%;
+        font-weight: 700;
+        transform: translate(-50%, 0);
+        padding: 2px 4px;
+        color: $white;
+        z-index: $label-z-index;
+        pointer-events: none;
+      }
+
+      &.calendar__cell_selected {
+        &::after {
+          background: $blue;
+        }
+      }
+    }
   }
 
   &.date-selection_selected {
@@ -183,7 +224,7 @@
 
     .subtitle {
       margin-top: 2px;
-      font-size: .875rem;
+      font-size: 0.875rem;
       font-weight: 400;
       line-height: 22px;
       text-wrap: auto;

package/src/scss/components/_date-selection.scss

@@ -29,6 +29,36 @@
       display: none;
     }
   }
+
+  &__rapid-hint {
+    border-top: 1px dashed $blue-dark;
+    display: flex;
+    padding: 24px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+
+    .description {
+      @include font-size(14);
+      @include line-height(22);
+      text-align: center;
+      font-weight: 400;
+      max-width: 226px;
+      margin-bottom: 0;
+    }
+
+    .icon {
+      font-size: 2rem;
+      height: auto;
+      color: $blue-satin;
+    }
+
+    .date-selection_selected & {
+      display: none;
+    }
+  }
 }
 
 .calendar {
@@ -81,6 +111,49 @@
       background: $blue;
       color: $white;
     }
+
+    &_rapid {
+      display: inline;
+      align-items: center;
+      position: relative;
+
+      &::after {
+        content: '';
+        position: relative;
+        display: block;
+        background: $ma-white;
+        border-radius: 50%;
+        width: 34px;
+        height: 34px;
+        top: -34px;
+        left: calc(50% - 34px / 2);
+        z-index: $circle-z-index;
+      }
+
+      .label-rapid {
+        @include font-size(10);
+        @include line-height(10);
+        border-radius: 30px;
+        border: 1px solid $white;
+        background: $pacific-depths;
+        position: absolute;
+        bottom: -8px;
+        left: 50%;
+        font-style: normal;
+        font-weight: 700;
+        transform: translate(-50%, 0);
+        padding: 2px 4px;
+        color: $white;
+        z-index: $label-z-index;
+        pointer-events: none;
+      }
+
+      &.calendar__cell_selected {
+        &:after {
+          background: $blue;
+        }
+      }
+    }
   }
 }
 
@@ -249,6 +322,12 @@
 
   .delivery-time {
     width: 100%;
+
+    &__rapid-hint {
+      border-top: 0;
+      background: $white;
+      height: 100%;
+    }
   }
 
   .date-selection {
@@ -325,7 +404,7 @@
       right: 20px;
       font-size: 1.125rem;
       color: $blue;
-      transition: all .5s ease;
+      transition: all 0.5s ease;
       transform: rotate(180deg);
     }
   }