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

package/src/page_bathroom-plp-without-load-more.html

@@ -0,0 +1,83 @@
+{{#extend "base" hybrisClass="hybris-class" pageClass="products-list-page" title="Bathroom PLP" globalSearchV2="true" pagePlp=true bundle="plp"}}
+{{#content "head" mode="append"}}
+    <link type="text/css" rel="stylesheet" href="./css/components/global-search.css">
+    <link type="text/css" rel="stylesheet" href="https://static-content-develop.dev.wickes.co.uk/whisk/kitchen-static/css/kitchen-content.css">
+{{/content}}
+    {{#content "body"}}
+        <main>
+            <div class="package-plp container">
+                <div class="page-header page-header_border-all">
+                    <h1 class="page-header__title">
+                        Bathroom Suite Packages
+                    </h1>
+                    {{> srp-injected}}
+                    {{> sponsor-top-banner }}
+                </div>
+
+                {{> quick-filter filterData=quickFilter.iconAndText_5}}
+
+                <div class="hybris-slot">
+                    <div style="min-height: 120px; background-color: gray;"></div>
+                     <div style="min-height: 120px; background-color: gray;"></div>
+                </div>
+
+                <div class="package-plp__container">
+                    <aside class="package-plp__search-filter">
+                        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
+                    </aside>
+
+                    <div class="package-plp__content">
+                        <div class="plp-filters" data-component="plp-filters" aria-label="Product filters">
+                            <div class="plp-filters__bar plp-filters__bar-mobile" role="tablist" aria-label="Filters">
+                                {{> kitchen/mobile-nav-item
+                                icon="fas fa-filter"
+                                title="Filter by"
+                                info="24 results"
+                                modalId="filterModal"
+                                mod="filter-modal-cta"
+                                }}
+                                {{> kitchen/mobile-nav-item
+                                icon="fas fa-sort-alt"
+                                title="Sort by"
+                                info="Relevance"
+                                dropdown=true
+                                }}
+                            </div>
+                        </div>
+
+                        <input id="numberOfPagesPLP" value="1" type="hidden">
+                        <div class="sort-products-list">
+                            {{> kitchen/sort-by }}
+                        </div>
+
+                        <div class="package-plp__cards">
+                            {{> package-card cards=(limitArray ripple-plp.cards 7)}}
+                        </div>
+
+                        <div class="load-more-wrap">
+                            <button class="btn btn-primary btn_full btn-load-more">
+                                Load more
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="container">
+                <div class="hybris-slot">
+                    <div class="banner-emulation" style="height: 398px; min-height: 120px; background-color: gray;"></div>
+                    <div style="min-height: 120px; background-color: gray;"></div>
+                    <div style="min-height: 120px; background-color: gray;"></div>
+                </div>
+            </div>
+
+            {{> legal-info}}
+        </main>
+    {{/content}}
+    {{#content "foot" mode="append"}}
+        {{> kitchen/filter-modal isKitchenMode=false modalTitle="Filter by" }}
+        <script defer src="./js/search-filter.min.js"></script>
+        <script defer src="./js/plp-filters.min.js"></script>
+        <script defer src="./js/page/quick-filter.js"></script>
+    {{/content}}
+{{/extend}}

package/src/page_bathroom-plp.html

@@ -0,0 +1,98 @@
+{{#extend "base" hybrisClass="hybris-class" pageClass="products-list-page" title="Bathroom PLP" globalSearchV2="true" pagePlp=true bundle="plp"}}
+{{#content "head" mode="append"}}
+    <link type="text/css" rel="stylesheet" href="./css/components/global-search.css">
+    <link type="text/css" rel="stylesheet" href="https://static-content-develop.dev.wickes.co.uk/whisk/kitchen-static/css/kitchen-content.css">
+{{/content}}
+    {{#content "body"}}
+        <main>
+            <div class="package-plp container">
+                <div class="page-header page-header_border-all">
+                    <h1 class="page-header__title">
+                        Bathroom Suite Packages
+                    </h1>
+                    {{> srp-injected}}
+                    {{> sponsor-top-banner }}
+                </div>
+
+                {{> quick-filter filterData=quickFilter.iconAndText_5}}
+
+                <div class="hybris-slot">
+                    <div style="min-height: 120px; background-color: gray;"></div>
+                     <div style="min-height: 120px; background-color: gray;"></div>
+                </div>
+
+                <div class="package-plp__container">
+                    <aside class="package-plp__search-filter">
+                        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
+                    </aside>
+
+                    <div class="package-plp__content">
+                        <div class="plp-filters" data-component="plp-filters" aria-label="Product filters">
+                            <div class="plp-filters__bar plp-filters__bar-mobile" role="tablist" aria-label="Filters">
+                                {{> kitchen/mobile-nav-item
+                                icon="fas fa-filter"
+                                title="Filter by"
+                                info="24 results"
+                                modalId="filterModal"
+                                mod="filter-modal-cta"
+                                }}
+                                {{> kitchen/mobile-nav-item
+                                icon="fas fa-sort-alt"
+                                title="Sort by"
+                                info="Relevance"
+                                dropdown=true
+                                }}
+                            </div>
+                        </div>
+
+                        <input id="numberOfPagesPLP" value="2" type="hidden">
+                        <div class="sort-products-list">
+                            {{> kitchen/sort-by }}
+                        </div>
+
+                        <div class="package-plp__cards">
+                            {{> package-card cards=ripple-plp.cards}}
+                            {{#if search-result_v2.product-banner}}
+                                {{#each search-result_v2.product-banner}}
+                                    {{>card_product_banner_v2}}
+                                {{/each}}
+                            {{/if}}
+                            {{#if search-result_v2.bloomreach-media-banner}}
+                                {{#each search-result_v2.bloomreach-media-banner}}
+                                    {{>card_bloomreach_media_banner}}
+                                {{/each}}
+                            {{/if}}
+                            {{#if search-result_v2.sponsor-banner}}
+                                {{#each search-result_v2.sponsor-banner}}
+                                    {{>card_sponsor_banner}}
+                                {{/each}}
+                            {{/if}}
+                        </div>
+
+                        <div class="load-more-wrap">
+                            <button class="btn btn-primary btn_full btn-load-more">
+                                Load more
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="container">
+                <div class="hybris-slot">
+                    <div class="banner-emulation" style="height: 398px; min-height: 120px; background-color: gray;"></div>
+                    <div style="min-height: 120px; background-color: gray;"></div>
+                    <div style="min-height: 120px; background-color: gray;"></div>
+                </div>
+            </div>
+
+            {{> legal-info}}
+        </main>
+    {{/content}}
+    {{#content "foot" mode="append"}}
+        {{> kitchen/filter-modal isKitchenMode=false modalTitle="Filter by" }}
+        <script defer src="./js/search-filter.min.js"></script>
+        <script defer src="./js/plp-filters.min.js"></script>
+        <script defer src="./js/page/quick-filter.js"></script>
+    {{/content}}
+{{/extend}}

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_checkout_premium-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 Premium delivery.</b></br>Alternative delivery options are available."
+      description="<b>Your order qualifies for Next Day AM delivery.</b></br>Alternative delivery options are available."
       imgSrc="./img/premium-delivery.png"
   }}
   <div class="delivery-block__wrapper">
@@ -34,7 +34,7 @@
 
     <div class="component component-date-selection">
       {{> date-selection
-      titleDelivery="Premium delivery"
+      titleDelivery="AM"
       subtitleDelivery="Delivered tomorrow morning for £12.00"
       imgDelivery="fas fa-shipping-fast"
       premiumImg="./img/premium-delivery.png"

package/src/page_product-details-banner.html

@@ -5,9 +5,7 @@
           isCashback=false
           isSize=true
           hourly-delivery=true
-          badge-text='15% off'
-          badge-color='yellow'
-          badge-text-color='gray'
+          badges=pdp-price-badges.yellowGrayText
           step3=true
           currentlyInStock=true
           pagePdp=true

package/src/page_product-details-big-wins-disabled-delivery.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/page_product-details-big-wins-non-registered.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/page_product-details-big-wins-out-nearest.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/page_product-details-big-wins-unhappy.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
           unhappy=true
           pagePdp=true

package/src/page_product-details-big-wins.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/page_product-details-billie.html

@@ -5,9 +5,7 @@ isDescription=true
 isCashback=false
 isSize=true
 hourly-delivery=true
-badge-text='15% off'
-badge-color='yellow'
-badge-text-color='gray'
+badges=pdp-price-badges.yellowGrayText
 step3=true
 currentlyInStock=true
 pagePdp=true

package/src/page_product-details-calculator.html

@@ -5,9 +5,7 @@
           isCashback=false
           isSize=false
           hourly-delivery=true
-          badge-text='15% off'
-          badge-color='yellow'
-          badge-text-color='gray'
+          badges=pdp-price-badges.yellowGrayText
           step3=true
           isQuantity=true
           notifyMe=true

package/src/page_product-details-cashback-v2.html

@@ -6,9 +6,7 @@
           isCashback=true
           isSize=false
           hourly-delivery=false
-          badge-text='cashback'
-          badge-color='red'
-          badge-text-color='white'
+          badges=pdp-price-badges.redCashback
           currentlyInStock=true
           pagePdp=true
 }}

package/src/page_product-details-clearpay.html

@@ -5,9 +5,7 @@ isDescription=true
 isCashback=false
 isSize=true
 hourly-delivery=true
-badge-text='15% off'
-badge-color='yellow'
-badge-text-color='gray'
+badges=pdp-price-badges.yellowGrayText
 step3=true
 currentlyInStock=true
 pagePdp=true

package/src/page_product-details-cnc-error-notification.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/page_product-details-cnc-success-notification-vat.html

@@ -6,10 +6,7 @@
           isSize=true
           isGuide=true
           hourly-delivery=true
-          badge-text='2 for £47'
-          badge-text-exc='2 for £46'
-          badge-color='yellow'
-          badge-text-color='gray'
+          badges=pdp-price-badges.yellowVatText
           currentlyInStock=true
           pagePdp=true
           switch-vat=true

package/src/page_product-details-cnc-success-notification.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/page_product-details-default-store.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/page_product-details-energy-efficiency.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
 }}