wickes-css2 2.113.0-develop.3 → 2.113.0-develop.6

package/src/page_checkout_big-bulky-delivery-details.html

@@ -0,0 +1,272 @@
+{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout" title="Checkout - Delivery details - Big & Bulky" isAsideSticky="true"}}
+{{#content "steps"}}
+{{> steps-three-steps active-step-index="1" }}
+{{/content}}
+
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/checkout-new.css">
+<link type="text/css" rel="stylesheet" href="./css/pages/page_checkout_delivery-new.css">
+{{/content}}
+
+{{#content "aside"}}
+{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true paymentsCheckoutV2="true"}}
+{{/content}}
+
+
+{{#content "main"}}
+<div class="delivery-block">
+  <h3 class="delivery-block__heading">Delivery Information</h3>
+  <div class="delivery-block__weight-banner">
+    <div class="delivery-block__weight-banner-content">
+      <p>Due to the weight and size of your order, our Big & Bulky delivery charge, starting at £35, may apply. <br class="d-none d-sm-block">Your delivery charge will be confirmed at checkout.</p>
+    </div>
+    <div class="delivery-block__weight-banner-icon">
+      <i class="fas fa-weight-hanging"></i>
+    </div>
+  </div>
+  <div class="delivery-block__wrapper">
+    <div class="date-selection__wrapper">
+      <h3 class="date-selection__header">Select delivery date</h3>
+      <p class="date-selection__info-block">
+        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 15 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="Big & Bulky delivery"
+      subtitleDelivery="Delivered within 15 days"
+      imgDelivery="fas fa-shipping-fast"
+      wisdom=true
+      noRapid=true
+      }}
+    </div>
+
+    <a href="#" class="delivery-block__show-products">Show Delivery Products</a>
+
+    {{#with checkoutOrder.deliveryDeliveryDetails.[0]}}
+    <div class="checkout-order">
+      <!-- First order block: Choose a delivery date -->
+      <div class="order-block">
+        <div class="order-block__time-head">
+          <span>
+            <i class="iconHead fas fa-calendar-alt"></i>Choose a delivery date
+            <span class="boldDate">Delivery date</span>
+          </span>
+        </div>
+        <div class="order-block__address">
+          <div class="order-block__address-wrap">
+            <div class="order-block__address-info">
+              <i class="fas fa-map-marker-alt"></i> 48 Blackwell End, Potterspury, Towcester, NN12 7QE
+            </div>
+            <button class="btn btn-link underline-link edit-address" data-toggle="modal" data-target="#modalEditAddress">Edit Address</button>
+          </div>
+        </div>
+        <div class="order-block__product-line">
+          <button class="btn btn-link underline-link show-products">Show Delivery Products</button>
+          <button class="btn btn-link underline-link hide-products">Hide Delivery Products</button>
+          <div class="order-block__product-info">
+            <div class="order-block__order-line">
+              <div class="order-line__wrap">
+                <div class="order-line__image">
+                  <a href="#">
+                    <img class="image" src="https://media.wickes.co.uk/is/image/wickes/dulux-147076?fmt=png-alpha&amp;wid=65&amp;hei=65" alt="Heavy Product" title="Heavy Product">
+                  </a>
+                </div>
+                <div class="order-line__info">
+                  <div class="order-line__product">
+                    <div class="order-line__name">
+                      <a href="#">Heavy Product Example - Item 131895</a>
+                    </div>
+                    <div class="order-line__quantity">x<span class="value">1</span></div>
+                  </div>
+                </div>
+              </div>
+              <div class="order-line__price">
+                <div class="order-line__price-item">
+                  <span>Item price:</span>
+                  <div class="price-item__info">
+                    <div>£390</div>
+                  </div>
+                </div>
+                <div class="order-line__price-item">
+                  <span>Total:</span>
+                  <span>£390</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Big & Bulky Delivery Information Banner - between order blocks -->
+      {{> heavy-banners-wrapper}}
+
+      <!-- Second order block: Wickes Supplier -->
+      <div class="order-block">
+        <div class="order-block__time-head">
+          <span>
+            <i class="iconHead fas fa-calendar-alt"></i>Wickes Supplier -
+            <span class="boldDate">Delivery within 5 days</span>
+          </span>
+        </div>
+        <div class="order-block__address">
+          <div class="order-block__address-wrap">
+            <div class="order-block__address-info">
+              <i class="fas fa-map-marker-alt"></i> 48 Blackwell End, Potterspury, Towcester, NN12 7QE
+            </div>
+            <button class="btn btn-link underline-link edit-address" data-toggle="modal" data-target="#modalEditAddress">Edit Address</button>
+          </div>
+        </div>
+        <div class="order-block__product-line">
+          <button class="btn btn-link underline-link show-products">Show Supplier Products</button>
+          <button class="btn btn-link underline-link hide-products">Hide Supplier Products</button>
+          <div class="order-block__product-info">
+            <div class="order-block__order-line">
+              <div class="order-line__wrap">
+                <div class="order-line__image">
+                  <a href="#">
+                    <img class="image" src="https://media.wickes.co.uk/is/image/wickes/dulux-147076?fmt=png-alpha&amp;wid=65&amp;hei=65" alt="Supplier Product" title="Supplier Product">
+                  </a>
+                </div>
+                <div class="order-line__info">
+                  <div class="order-line__product">
+                    <div class="order-line__name">
+                      <a href="#">Wickes Horizon Canopy Garage Door 2134 X 1981mm</a>
+                    </div>
+                    <div class="order-line__quantity">x<span class="value">1</span></div>
+                  </div>
+                </div>
+              </div>
+              <div class="order-line__price">
+                <div class="order-line__price-item">
+                  <span>Item price:</span>
+                  <div class="price-item__info">
+                    <div>£672</div>
+                  </div>
+                </div>
+                <div class="order-line__price-item">
+                  <span>Total:</span>
+                  <span>£672</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    {{/with}}
+
+  </div>
+</div>
+
+<div class="click-collect-block">
+  <h3 class="click-collect-block__heading">Click & Collect</h3>
+
+  <div class="click-collect-block__head-info">
+    <p>Simply enter or correct the contact information required below and continue to the next step of the checkout.</p>
+    <div class="head-info__wrapper">
+      <div class="head-info__wrapper-exclamation">
+        <i class="far fa-exclamation-circle"></i>
+        <span>Your order will be held for up to 24 hours</span>
+      </div>
+      <div class="head-info__wrapper-text">
+        <p>You will receive a text when your order is ready to collect (usually within 1 trading hour of receiving your order confirmation email).</p>
+        <p>Please wait for confirmation before travelling to your chosen store.</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="click-collect-block__wrapper">
+    {{#with checkoutOrder.clickCollectDeliveryAddress.[0]}}
+    <div class="checkout-order">
+      {{> checkout-order-block}}
+    </div>
+    {{/with}}
+
+    <div class="add-contact-details">
+      <h3 class="add-contact-details__heading">Add contact details</h3>
+      <p>Please enter your phone number(s) below so we can contact you regarding your order.</p>
+
+      <div class="add-contact-details__form">
+        {{> form-row type="tel" id="mobile" label="Mobile number" required="true"}}
+        {{> form-row type="tel" id="home-phone" label="Home phone"}}
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="simplify-collection">
+  <h3 class="simplify-collection__heading">Simplify your collection</h3>
+  <p class="simplify-collection__info">All the Click & Collect items in your order are currently available at the following stores. Select
+    one of the store to collect all your items from the same location.</p>
+
+  <div class="simplify-collection__wrapper">
+    <div class="your-contact-details__checkbox">
+      {{#extend "radiobutton" id="oldham" name="store" label="Oldham" checked="true"}}
+      {{#content "html"}}
+      <span class="distance">6.2 Miles</span>
+      <div class="store-address">
+        <div class="store-address__street">Wickes Larch Street,</div>
+        <div class="store-address__town">Oldham</div>
+        <div class="store-address__city">Greater Manchester,</div>
+        <div class="store-address__postcode">OL8 1TA</div>
+        <div class="store-address__country">United Kingdom</div>
+      </div>
+      {{/content}}
+      {{/extend}}
+    </div>
+    <div class="your-contact-details__checkbox">
+      {{#extend "radiobutton" id="clifton" name="store" label="Clifton"}}
+      {{#content "html"}}
+      <span class="distance">4.9 Miles</span>
+      <div class="store-address">
+        <div class="store-address__street">Wickes Wynne Avenue,</div>
+        <div class="store-address__town"> Clifton, Swinton</div>
+        <div class="store-address__city">Greater Manchester,</div>
+        <div class="store-address__postcode">M27 8FU</div>
+        <div class="store-address__country">United Kingdom</div>
+      </div>
+      {{/content}}
+      {{/extend}}
+    </div>
+  </div>
+
+  <p class="simplify-collection__info">I would like to update my order to collect all my items from one store.</p>
+
+  <button class="btn btn-primary simplify-collection__btn">
+    <span class="btn__text">Simplify collection</span>
+  </button>
+</div>
+
+<div class="continue-btn">
+  <button class="btn btn-action">Continue to Payment Details</button>
+</div>
+{{/content}}
+
+{{#content "foot" mode="append"}}
+
+<script defer src="./js/page/checkout-confirmation-new.js"></script>
+<script defer src="./js/page/select-address.js"></script>
+
+{{#extend "modal" classMod="edit-delivery-address" id="modalEditAddress" title="Edit delivery address" fullWidth=true}}
+{{#content "body"}}
+<div class="edit-address-modal-block">
+  {{> notifications notification-page.error-deliver-area}}
+  <div class="delivery-block__wrapper customer-journey-block">
+    {{> user-address-delivery radioName="checkout-address-radio" modal="modalDeliveryEdit" selectedAddress=true simpleAddress=true isDeleted=true}}
+  </div>
+
+  <button class="btn btn-action btn_full">
+    <span class="btn__text">Continue to delivery details</span>
+  </button>
+</div>
+{{/content}}
+{{/extend}}
+
+{{/content}}
+{{/extend}}

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

@@ -69,12 +69,10 @@ switch-vat=true
       <div class="pdp__description">
         {{> product-main-info-v2 isProductSaved=true}}
       </div>
-      <div
-          class="pdp__widget"
-          data-complete-widget
-          data-mock-key="completeYourProject3Recomendations"
-      >
-        {{> bloomreach/complete-your-project title="Complete your project"}}
+      <div class="pdp__widget">
+        {{> bloomreach/complete-your-project
+            context="completeYourProject3Recomendations"
+        }}
       </div>
       {{> fulfilment-accordions }}
     </div>

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

@@ -18,7 +18,7 @@ switch-vat=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/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/_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/bloomreach/_bloomreach.scss

@@ -1,3 +1,4 @@
+@import 'card-shared';
 @import 'complete-your-project';
 @import 'complete-card';
 @import 'complete-card-dropdown';

package/src/scss/components/bloomreach/_card-shared.scss

@@ -0,0 +1,24 @@
+@mixin bloomreach-card-badge {
+  @include font-size(12);
+  @include line-height(16);
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: $label-z-index;
+  padding: 4px 10px;
+  border-top-right-radius: $border-radius-sm;
+  font-weight: 700;
+  text-align: center;
+}
+
+@include media-breakpoint-down(sm) {
+  .why-not-add-card-wrapper .why-not-add-card,
+  .complete-widget {
+    .btn {
+      &:hover {
+        background-color: $green;
+        color: $white;
+      }
+    }
+  }
+}

package/src/scss/components/bloomreach/_complete-card.scss

@@ -167,17 +167,9 @@
   }
 
   &__badge {
-    @include font-size(12);
-    @include line-height(16);
-    font-weight: 700;
+    @include bloomreach-card-badge;
     margin-bottom: 0;
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: $label-z-index;
     color: $white;
-    padding: 4px 10px;
-    text-align: center;
   }
 
   &--skeleton {