wickes-css2 2.113.0-develop.5 → 2.113.0-develop.7

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "wickes-css2",
-  "version": "2.113.0-develop.5",
+  "version": "2.113.0-develop.7",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {
     "lint:fix": "sass-lint-auto-fix",
-    "build": "gulp build",
+    "build": "gulp build --verbose",
+    "dev": "gulp --dev",
+    "dev:info": "gulp --dev --verbose",
     "prepare": "husky install",
     "setup:husky": "yarn prepare && npx husky add .husky/pre-commit \"yarn lint-staged\" && git add .husky/pre-commit"
   },

package/src/components/date-selection.hbs

@@ -28,12 +28,12 @@
                       <div class="calendar__row">
                         <div class="calendar__row_days">
                     {{/if}}
-                    <span class="calendar__cell calendar__cell_cnt{{#if isInactive}} calendar__cell_inactive{{/if}}{{#if ../premium}}{{#if (eq day '1')}} calendar__cell_inactive{{/if}}{{#unless isInactive}}{{#if (eq day '2')}} calendar__cell_highlight calendar-premium-day{{/if}}{{/unless}}{{else}}{{#if (eq day '1')}}{{#unless isInactive}} calendar__cell_highlight calendar-rapid-day{{/unless}}{{/if}}{{/if}}">
+                    <span class="calendar__cell calendar__cell_cnt{{#if isInactive}} calendar__cell_inactive{{/if}}{{#if ../premium}}{{#if (eq day '1')}} calendar__cell_inactive{{/if}}{{#unless isInactive}}{{#if (eq day '2')}} calendar__cell_highlight calendar-premium-day{{/if}}{{/unless}}{{else}}{{#unless ../noRapid}}{{#if (eq day '1')}}{{#unless isInactive}} calendar__cell_highlight calendar-rapid-day{{/unless}}{{/if}}{{/unless}}{{/if}}">
                       {{#if ../premium}}
                         {{#if (eq day '2')}}
                           {{#unless isInactive}}
                             {{day}}
-                            <span class="calendar-cell-label">Premium</span>
+                            <span class="calendar-cell-label">AM</span>
                           {{else}}
                             {{day}}
                           {{/unless}}
@@ -41,7 +41,7 @@
                           {{day}}
                         {{/if}}
                       {{else}}
-                        {{#if (eq day '1')}}
+                        {{#if (and (eq day '1') (not ../noRapid))}}
                           {{#unless isInactive}}
                             {{day}}
                             <span class="calendar-cell-label">Rapid</span>
@@ -77,22 +77,31 @@
             </div>
         </div>
         <div class="delivery-time">
-          <div class="{{#if premium}}delivery-time__premium-hint{{else}}delivery-time__rapid-hint{{/if}}">
+          {{#if premium}}
+          <div class="delivery-time__premium-hint">
             <span class="icon-wrap icon-wrap--large">
-              {{#if premium}}
                 <img src="./img/premium-delivery.svg" class="icon" alt="Premium delivery">
-              {{else}}
-                <i class="fas fa-shipping-fast icon"></i>
-              {{/if}}
             </span>
           <p class="description">
             {{#if premium}}
-              Select tomorrow’s day on the calendar to get Premium delivery.
+              Select tomorrow’s day on the calendar to get Next Day AM delivery
             {{else}}
               Select todays’ day on the calendar to get Rapid delivery.
             {{/if}}
           </p>
-        </div>
+          </div>
+          {{else}}
+            {{#unless noRapid}}
+            <div class="delivery-time__rapid-hint">
+              <span class="icon-wrap icon-wrap--large">
+                  <i class="fas fa-shipping-fast icon"></i>
+              </span>
+            <p class="description">
+                Select todays’ day on the calendar to get Rapid delivery.
+            </p>
+            </div>
+            {{/unless}}
+          {{/if}}
           {{> delivery-types
               title=titleDelivery
               subtitle=subtitleDelivery

package/src/components/heavy-banners-wrapper.hbs

@@ -0,0 +1,21 @@
+<div class="delivery-block__heavy-banners-wrapper">
+  <div class="delivery-block__heavy-banners-header">
+    <h4 class="delivery-block__heavy-banners-title">Big &amp; Bulky delivery information</h4>
+    <a href="https://www.wickes.co.uk/termsAndConditions" class="delivery-block__heavy-banners-terms delivery-block__heavy-banners-terms--desktop">Terms &amp; Conditions</a>
+  </div>
+  <p class="delivery-block__heavy-banners-description">
+    We will not be able to deliver your order if any of the below apply to your delivery address:
+  </p>
+  <div class="delivery-block__heavy-banners">
+    {{#each @root.heavyBannerImages}}
+    <img loading="lazy" title="{{this.title}}" src="{{this.src}}" alt="{{this.alt}}">
+    {{/each}}
+  </div>
+  <div class="delivery-block__heavy-banners-contact">
+    <span class="delivery-block__heavy-banners-contact-icon">
+      <i class="far fa-info-circle"></i>
+    </span>
+    <span>If you have any questions, please contact us on <a href="tel:03301234123">0330 123 4123</a></span>
+  </div>
+  <a href="https://www.wickes.co.uk/termsAndConditions" class="delivery-block__heavy-banners-terms delivery-block__heavy-banners-terms--mobile">Terms &amp; Conditions</a>
+</div>

package/src/data/data_heavy-banner.json

@@ -0,0 +1,29 @@
+{
+  "heavyBannerImages": [
+    {
+      "title": "Traffic access issues",
+      "src": "./img/emulation/traffic-access-issues.png",
+      "alt": "Traffic access issues"
+    },
+    {
+      "title": "Low trees",
+      "src": "./img/emulation/low-trees.png",
+      "alt": "Low trees"
+    },
+    {
+      "title": "Overhead power cables",
+      "src": "./img/emulation/overhead-power-cables.png",
+      "alt": "Overhead power cables"
+    },
+    {
+      "title": "Parked vehicles in the delivery path",
+      "src": "./img/emulation/parked-vehicles.png",
+      "alt": "Parked vehicles in the delivery path"
+    },
+    {
+      "title": "Walls or fences in the delivery path",
+      "src": "./img/emulation/walls-or-fences.png",
+      "alt": "Walls or fences in the delivery path"
+    }
+  ]
+}

package/src/data/my-account/data_my-account.json

@@ -114,7 +114,7 @@
             "shipmentDetails": [
               {
                 "shipmentIcon": "fas fa-shipping-fast",
-                "shipmentTitle": "Premium Delivery from Southampton store",
+                "shipmentTitle": "Next Day AM Delivery",
                 "shipmentInfo": "Dispatched. Delivery — By 12 PM - 12th Apr 2026",
                 "itemsCount": 1
               },

package/src/data/my-account/data_my-order.json

@@ -320,7 +320,7 @@
           "subtotalTooltip": "Order level promotions and delivery charges are not included"
         },
         {
-          "title": "Premium Delivery",
+          "title": "Next Day AM Delivery",
           "subtotal": "£53.65",
           "track": "#",
           "deliveryRange": [

package/src/data/my-account/data_my-orders.json

@@ -101,7 +101,7 @@
         "shipmentDetails": [
           {
             "shipmentIcon": "fas fa-shipping-fast",
-            "shipmentTitle": "Premium Delivery from Southampton store",
+            "shipmentTitle": "Next Day AM Delivery",
             "shipmentInfo": "Dispatched. Delivery — By 12 PM - 12th Apr 2026",
             "itemsCount": 1
           },

package/src/js/components/general/switchVat.js

@@ -33,11 +33,12 @@ Wick.VatToggle = {
 
     setSwitcherState: function (isToggled) {
         $(Wick.VatToggle.el.switchVatInput).attr('checked', isToggled);
+        $(Wick.VatToggle.el.switchVatInput).prop('checked', isToggled);
     },
 
     getSwitcherState: function () {
         if ($(Wick.VatToggle.el.switchVatInput).length) {
-            return !!$(Wick.VatToggle.el.switchVatInput).attr('checked');
+            return !!$(Wick.VatToggle.el.switchVatInput).prop('checked');
         } else {
             return null;
         }
@@ -125,6 +126,12 @@ Wick.VatToggle = {
     },
 
     init: function () {
+        const switchVatInput = $(Wick.VatToggle.el.switchVatInput);
+
+        if (switchVatInput.length) {
+            switchVatInput.attr('autocomplete', 'off');
+        }
+
         const isVatShouldBeToggled = Wick.VatToggle.isOn();
         const isVatToggled = !!Wick.VatToggle.getSwitcherState();
 

package/src/js/emulation/date-selection.js

@@ -142,8 +142,8 @@ function updatePremiumInfo() {
     const $image = $(DS_EL.image);
     const $premiumImage = $(DS_EL.premiumImage);
 
-    $title.text('Premium delivery');
-    $subtitle.html('Delivered tomorrow morning for £12.00');
+    $title.text('Next Day AM delivery');
+    $subtitle.html('Delivered tomorrow Pre-12pm for £12.00');
     $infoIcon.addClass(DS_CLASSES.hidden);
     $subtitle.append($infoIcon);
     $image.addClass(DS_CLASSES.hidden);

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/scss/components/_cards-slider.scss

@@ -66,7 +66,9 @@
     background-color: $gray;
     height: 6px;
     width: 6px;
-    transition: width 0.3s ease-in, background-color 0.3s ease-in;
+    transition:
+      width 0.3s ease-in,
+      background-color 0.3s ease-in;
 
     &-active {
       background-color: $blue;

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;