wickes-css2 2.112.0-develop.1 → 2.112.0-es-3143-upgrade-node-version.2

package/build/img/premium-delivery.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none"><g clip-path="url(#a)"><circle cx="19.828" cy="12.892" r="6.953" stroke="#99b5cf" stroke-width="1.112"/><rect width="1.112" height="2.503" x="19.272" y="5.661" fill="#99b5cf" rx=".556"/><rect width="1.112" height="2.503" x="12.32" y="13.448" fill="#99b5cf" rx=".556" transform="rotate(-90 12.32 13.448)"/><path fill="#99b5cf" d="M1.056 21.513a.556.556 0 1 1 0-1.112H4.95v1.112z"/><rect width="1.112" height="2.503" x="24.834" y="13.448" fill="#99b5cf" rx=".556" transform="rotate(-90 24.834 13.448)"/><rect width="1.112" height="2.503" x="14.127" y="8.116" fill="#99b5cf" rx=".556" transform="rotate(-45 14.127 8.116)"/><rect width="1.112" height="2.503" fill="#99b5cf" rx=".556" transform="rotate(225 10.734 5.935)scale(-1 1)"/><rect width="1.112" height="2.503" fill="#99b5cf" rx=".556" transform="rotate(45 2.994 34.94)scale(-1 1)"/><rect width="1.112" height="3.428" fill="#99b5cf" rx=".556" transform="matrix(1 0 0 -1 19.272 12.844)"/><rect width="1.112" height="2.781" fill="#99b5cf" rx=".556" transform="matrix(0 -1 -1 0 19.78 13.448)"/><rect width="1.112" height="2.503" x="25.583" y="17.721" fill="#99b5cf" rx=".556" transform="rotate(135 25.583 17.72)"/><rect width="1.112" height="2.503" x="19.272" y="17.898" fill="#99b5cf" rx=".556"/><rect width="1.669" height="1.669" x="18.994" y="12.058" fill="#99b5cf" rx=".834"/><path fill="#99b5cf" d="M1.056 24.85a.556.556 0 1 1 0-1.112H4.95v1.113zM1.056 28.188a.556.556 0 1 1 0-1.112H4.95v1.112zM1.056 31.525a.556.556 0 1 1 0-1.112H4.95v1.112z"/><path fill="#99b5cf" fill-rule="evenodd" d="M10.86 35.419a2.98 2.98 0 0 1 2.266 1.044H8.593a2.98 2.98 0 0 1 2.266-1.044m.864-20.024c1.027 3.329 4.047 5.785 7.668 5.968l.436.012a8.49 8.49 0 0 0 8.107-5.98h4.547c1.229 0 2.225.997 2.225 2.226v4.435q.115-.026.246-.051a14 14 0 0 1 2.376-.253c1.902-.038 4.365.319 6.418 1.97 1.286 1.035 2.179 2.954 2.804 4.863.634 1.938 1.03 3.99 1.254 5.41.21 1.33-.837 2.468-2.146 2.468h-2.353a4.52 4.52 0 0 0-3.847-2.568l-.232-.005a4.52 4.52 0 0 0-4.08 2.573H14.94a4.52 4.52 0 0 0-3.847-2.568l-.233-.005a4.52 4.52 0 0 0-4.073 2.557 2.226 2.226 0 0 1-1.975-2.21v-2.71h5.005a.557.557 0 0 0 0-1.114H4.811V28.19h2.92a.557.557 0 0 0 0-1.113H4.81v-2.224h5.005a.556.556 0 1 0 0-1.112H4.811v-2.226h8.065a.556.556 0 0 0 0-1.113H4.811v-2.78c0-1.229.996-2.226 2.225-2.226zm27.503 20.024a2.98 2.98 0 0 1 2.266 1.044H36.96a2.98 2.98 0 0 1 2.268-1.044M37.48 24.715a.945.945 0 0 0-.965.953v4.263c0 .537.436.973.973.973h4.728c.53 0 .997-.44.95-1.017a8 8 0 0 0-.355-1.814c-.23-.703-.617-1.482-1.278-2.043-1.17-.993-2.79-1.24-3.707-1.3z" clip-rule="evenodd"/><circle cx="10.86" cy="38.408" r="3.476" fill="#fff" stroke="#99b5cf" stroke-width="1.53"/><circle cx="10.86" cy="38.408" r="1.738" fill="#fff" stroke="#99b5cf" stroke-width="1.112"/><circle cx="39.226" cy="38.408" r="3.476" fill="#fff" stroke="#99b5cf" stroke-width="1.53"/><circle cx="39.226" cy="38.408" r="1.738" stroke="#99b5cf" stroke-width="1.112"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h48v48H0z"/></clipPath></defs></svg>

package/build/js/emulation.min.js

@@ -5380,12 +5380,14 @@ var DS_EL = {
   title: '.delivery-btn .title',
   subtitle: '.delivery-btn .subtitle',
   infoIcon: '.rapid-info-icon',
-  image: '.delivery-btn__image'
+  image: '.delivery-btn__image',
+  premiumImage: '.delivery-btn__image--premium'
 };
 var DS_CLASSES = {
   selectedCell: 'calendar__cell_selected',
   isSelected: 'date-selection_selected',
-  rapidCell: 'calendar__cell_rapid',
+  rapidCell: 'calendar-rapid-day',
+  premiumCell: 'calendar-premium-day',
   hidden: 'd-none'
 };
 var rapidLoaderShown = false;
@@ -5462,15 +5464,65 @@ function updateRapidInfo() {
   $image.removeClass(DS_CLASSES.hidden);
   updateDeliveryInfo();
 }
+function getPremiumOrdinal(day) {
+  if (day > 3 && day < 21) return 'th';
+  switch (day % 10) {
+    case 1:
+      return 'st';
+    case 2:
+      return 'nd';
+    case 3:
+      return 'rd';
+    default:
+      return 'th';
+  }
+}
+function formatPremiumDate() {
+  var tomorrow = new Date();
+  tomorrow.setDate(tomorrow.getDate() + 1);
+  var day = tomorrow.getDate();
+  var month = tomorrow.toLocaleString('en-GB', {
+    month: 'long'
+  });
+  var year = tomorrow.getFullYear();
+  return "".concat(day).concat(getPremiumOrdinal(day), " ").concat(month, " ").concat(year);
+}
+function updatePremiumDeliveryBlock() {
+  var $timeHead = $('.delivery-block .checkout-order .order-block__time-head');
+  if (!$timeHead.length) return;
+  var $span = $timeHead.find('> span').first();
+  var $icon = $span.find('.iconHead').detach();
+  $span.empty().append($icon).append(" By 12 PM ");
+  $span.append($('<span class="boldDate">').text("- ".concat(formatPremiumDate())));
+  $timeHead.find('.order-block__time-head-info').text('Delivery date');
+}
+function updatePremiumInfo() {
+  var $title = $(DS_EL.title);
+  var $subtitle = $(DS_EL.subtitle);
+  var $infoIcon = $subtitle.find(DS_EL.infoIcon).detach();
+  var $image = $(DS_EL.image);
+  var $premiumImage = $(DS_EL.premiumImage);
+  $title.text('Premium delivery');
+  $subtitle.html('Delivered tomorrow morning for &pound;12.00');
+  $infoIcon.addClass(DS_CLASSES.hidden);
+  $subtitle.append($infoIcon);
+  $image.addClass(DS_CLASSES.hidden);
+  $premiumImage.removeClass(DS_CLASSES.hidden);
+  updatePremiumDeliveryBlock();
+}
 function selectTimeSlot(e) {
   var $self = $(DS_EL.dateSelection);
   var $cell = $(e.target).closest(DS_EL.cell);
   var isRapid = $cell.hasClass(DS_CLASSES.rapidCell);
+  var isPremiumCell = $cell.hasClass(DS_CLASSES.premiumCell);
   $(DS_EL.cell).removeClass(DS_CLASSES.selectedCell);
   $cell.addClass(DS_CLASSES.selectedCell);
   $self.trigger('selected');
   _isDateSelected = true;
-  if (isRapid) {
+  if (isPremiumCell) {
+    $self.addClass(DS_CLASSES.isSelected);
+    updatePremiumInfo();
+  } else if (isRapid) {
     if (!rapidLoaderShown) {
       rapidLoaderShown = true;
       showRapidLoader();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.112.0-develop.1",
+  "version": "2.112.0-es-3143-upgrade-node-version.2",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {
@@ -16,7 +16,6 @@
     ],
     "src/scss/**/*.{scss,css}": [
       "sass-lint-auto-fix",
-      "prettier --write",
       "sass-lint -c .sasslintrc --"
     ]
   },
@@ -52,7 +51,7 @@
     "gulp-json-concat": "^0.2.0",
     "gulp-json-refs": "^0.1.1",
     "gulp-purgecss": "4.0.3",
-    "gulp-sass": "^4.0.0",
+    "gulp-sass": "^5.0.0",
     "gulp-sass-lint": "^1.4.0",
     "gulp-sitemap": "^5.1.0",
     "gulp-sourcemaps": "^2.6.4",
@@ -60,8 +59,7 @@
     "handlebars-layouts": "^3.1.4",
     "husky": "8.0.3",
     "lint-staged": "13.2.3",
-    "mocha": "^6.2.2",
-    "node-sass": "^4.0.0",
+    "mocha": "^10.0.0",
     "postcss": "^8.4.16",
     "postcss-combine-duplicated-selectors": "^10.0.3",
     "postcss-combine-media-query": "^1.0.1",

package/src/components/banner-news.hbs

@@ -3,6 +3,10 @@
     <span class="description">{{{description}}}</span>
   </div>
   <div class="banner-news__image">
-    <i class="{{classImg}}"></i>
+    {{#if imgSrc}}
+      <img src="{{imgSrc}}" class="banner-news__img{{#if imgClass}} {{imgClass}}{{/if}}" alt="">
+    {{else}}
+      <i class="{{classImg}}"></i>
+    {{/if}}
   </div>
 </div>

package/src/components/date-selection.hbs

@@ -28,16 +28,29 @@
                       <div class="calendar__row">
                         <div class="calendar__row_days">
                     {{/if}}
-                    <span class="calendar__cell calendar__cell_cnt{{#if isInactive}} calendar__cell_inactive{{/if}}{{#if (eq day '1')}}{{#unless isInactive}} calendar__cell_rapid{{/unless}}{{/if}}">
-                      {{#if (eq day '1')}}
-                        {{#unless isInactive}}
-                          {{day}}
-                          <span class="label-rapid">Rapid</span>
+                    <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}}">
+                      {{#if ../premium}}
+                        {{#if (eq day '2')}}
+                          {{#unless isInactive}}
+                            {{day}}
+                            <span class="calendar-cell-label">Premium</span>
+                          {{else}}
+                            {{day}}
+                          {{/unless}}
                         {{else}}
                           {{day}}
-                        {{/unless}}
+                        {{/if}}
                       {{else}}
-                        {{day}}
+                        {{#if (eq day '1')}}
+                          {{#unless isInactive}}
+                            {{day}}
+                            <span class="calendar-cell-label">Rapid</span>
+                          {{else}}
+                            {{day}}
+                          {{/unless}}
+                        {{else}}
+                          {{day}}
+                        {{/if}}
                       {{/if}}
                     </span>
                     {{#if (eq (mod_inc @index 7) 0)}}
@@ -64,18 +77,28 @@
             </div>
         </div>
         <div class="delivery-time">
-          <div class="delivery-time__rapid-hint">
+          <div class="{{#if premium}}delivery-time__premium-hint{{else}}delivery-time__rapid-hint{{/if}}">
             <span class="icon-wrap icon-wrap--large">
-              <i class="fas fa-shipping-fast icon"></i>
+              {{#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">
-            Select todays’ day on the calendar to get Rapid delivery.
+            {{#if premium}}
+              Select tomorrow’s day on the calendar to get Premium delivery.
+            {{else}}
+              Select todays’ day on the calendar to get Rapid delivery.
+            {{/if}}
           </p>
         </div>
           {{> delivery-types
               title=titleDelivery
               subtitle=subtitleDelivery
               classImg=imgDelivery
+              imgSrc=premiumImg
+              premium=premium
           }}
         </div>
     </div>

package/src/components/delivery-types.hbs

@@ -19,6 +19,11 @@
             <i class="{{classImg}}"></i>
           </span>
         {{/if}}
+        {{#if imgSrc}}
+          <span class="delivery-btn__image delivery-btn__image--premium d-none">
+            <img src="{{imgSrc}}" class="delivery-btn__img" alt="">
+          </span>
+        {{/if}}
       {{else}}
         <span class="delivery-btn__content">
           <span class="title">7am - 7pm - Free</span>

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

@@ -112,37 +112,17 @@
             "orderDate": "22nd January 2025 10:35 am",
             "totalConsignments": 5,
             "shipmentDetails": [
-              {
-                "shipmentIcon": "fas fa-hand-holding-box",
-                "shipmentTitle": "Click & Collect at Southport Kitchens & Bathrooms Showroom",
-                "shipmentInfo": "Ready for Collection",
-                "itemsCount": 2
-              },
-              {
-                "shipmentIcon": "fas fa-times",
-                "shipmentTitle": "Click & Collect at Wickes Long Eaton",
-                "shipmentInfo": "Cancelled",
-                "itemsCount": 4
-              },
-              {
-                "shipmentIcon": "fas fa-shipping-fast",
-                "shipmentTitle": "Wickes Delivery from Ashford Store",
-                "shipmentInfo": "Dispatched. Delivery - 8th Jan 2025",
-                "itemsCount": 4,
-                "trackingLink": "/"
-              },
               {
                 "shipmentIcon": "fas fa-shipping-fast",
-                "shipmentTitle": "Rapid Delivery from Southampton Store",
-                "shipmentInfo": "Dispatched. Delivery — within 3 hours",
-                "itemsCount": 4,
-                "trackingLink": "/"
+                "shipmentTitle": "Premium Delivery from Southampton store",
+                "shipmentInfo": "Dispatched. Delivery — By 12 PM - 12th Apr 2026",
+                "itemsCount": 1
               },
               {
-                "shipmentIcon": "fas fa-shipping-fast",
+                "shipmentIcon": "fas fa-box-alt",
                 "shipmentTitle": "Supplier Delivery",
-                "shipmentInfo": "Dispatched. The supplier will be in contact with you after receiving order confirmation.",
-                "itemsCount": 4
+                "shipmentInfo": "Order placed. These item(s) will be delivered within 14 days after receiving your order confirmation. Supplier will contact you with additional information.",
+                "itemsCount": 3
               }
             ]
           },

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

@@ -310,6 +310,49 @@
             }
           ],
           "subtotalTooltip": "Order level promotions and delivery charges are not included"
+        },
+        {
+          "title": "Premium Delivery",
+          "subtotal": "£53.65",
+          "track": "#",
+          "deliveryRange": [
+            {
+              "icon": "fas fa-box-alt",
+              "title": "Order placed",
+              "isComplete": true
+            },
+            {
+              "icon": "fas fa-shipping-fast",
+              "title": "Dispatched",
+              "isComplete": true
+            },
+            {
+              "icon": "fas fa-box-check",
+              "title": "To be Delivered",
+              "isComplete": false
+            }
+          ],
+          "customClassTooltip": "order__expectation--rapid",
+          "storeName": "Wickes Ashford Store",
+          "orders": [
+            {
+              "img": "https://media.wickes.co.uk/is/image/wickes/S3308_190167_00?$thumbnail$",
+              "title": "Wickes Instant Grab Adhesive Solvent Free - 300ml",
+              "productCode": "791262",
+              "quantity": "10",
+              "total": "£22.50",
+              "switchVat": true,
+              "perSQM": "£14.18"
+            },
+            {
+              "img": "https://media.wickes.co.uk/is/image/wickes/S3308_190167_00?$thumbnail$",
+              "title": "Hecta LED Wall Light - Chrome",
+              "productCode": "790123",
+              "quantity": "2",
+              "total": "£40"
+            }
+          ],
+          "subtotalTooltip": "Order level promotions and delivery charges are not included"
         }
       ]
     },

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

@@ -97,7 +97,21 @@
         },
         "totalPrice": "920.75",
         "totalItemCount": 7,
-        "orderDate": "21st November 2024 4:32 PM"
+        "orderDate": "21st November 2024 4:32 PM",
+        "shipmentDetails": [
+          {
+            "shipmentIcon": "fas fa-shipping-fast",
+            "shipmentTitle": "Premium Delivery from Southampton store",
+            "shipmentInfo": "Dispatched. Delivery — By 12 PM - 12th Apr 2026",
+            "itemsCount": 1
+          },
+          {
+            "shipmentIcon": "fas fa-box-alt",
+            "shipmentTitle": "Supplier Delivery",
+            "shipmentInfo": "Order placed. These item(s) will be delivered within 14 days after receiving your order confirmation. Supplier will contact you with additional information.",
+            "itemsCount": 3
+          }
+        ]
       },
       {
         "orderId": "940564923",

package/src/img/premium-delivery.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none"><g clip-path="url(#a)"><circle cx="19.828" cy="12.892" r="6.953" stroke="#99b5cf" stroke-width="1.112"/><rect width="1.112" height="2.503" x="19.272" y="5.661" fill="#99b5cf" rx=".556"/><rect width="1.112" height="2.503" x="12.32" y="13.448" fill="#99b5cf" rx=".556" transform="rotate(-90 12.32 13.448)"/><path fill="#99b5cf" d="M1.056 21.513a.556.556 0 1 1 0-1.112H4.95v1.112z"/><rect width="1.112" height="2.503" x="24.834" y="13.448" fill="#99b5cf" rx=".556" transform="rotate(-90 24.834 13.448)"/><rect width="1.112" height="2.503" x="14.127" y="8.116" fill="#99b5cf" rx=".556" transform="rotate(-45 14.127 8.116)"/><rect width="1.112" height="2.503" fill="#99b5cf" rx=".556" transform="rotate(225 10.734 5.935)scale(-1 1)"/><rect width="1.112" height="2.503" fill="#99b5cf" rx=".556" transform="rotate(45 2.994 34.94)scale(-1 1)"/><rect width="1.112" height="3.428" fill="#99b5cf" rx=".556" transform="matrix(1 0 0 -1 19.272 12.844)"/><rect width="1.112" height="2.781" fill="#99b5cf" rx=".556" transform="matrix(0 -1 -1 0 19.78 13.448)"/><rect width="1.112" height="2.503" x="25.583" y="17.721" fill="#99b5cf" rx=".556" transform="rotate(135 25.583 17.72)"/><rect width="1.112" height="2.503" x="19.272" y="17.898" fill="#99b5cf" rx=".556"/><rect width="1.669" height="1.669" x="18.994" y="12.058" fill="#99b5cf" rx=".834"/><path fill="#99b5cf" d="M1.056 24.85a.556.556 0 1 1 0-1.112H4.95v1.113zM1.056 28.188a.556.556 0 1 1 0-1.112H4.95v1.112zM1.056 31.525a.556.556 0 1 1 0-1.112H4.95v1.112z"/><path fill="#99b5cf" fill-rule="evenodd" d="M10.86 35.419a2.98 2.98 0 0 1 2.266 1.044H8.593a2.98 2.98 0 0 1 2.266-1.044m.864-20.024c1.027 3.329 4.047 5.785 7.668 5.968l.436.012a8.49 8.49 0 0 0 8.107-5.98h4.547c1.229 0 2.225.997 2.225 2.226v4.435q.115-.026.246-.051a14 14 0 0 1 2.376-.253c1.902-.038 4.365.319 6.418 1.97 1.286 1.035 2.179 2.954 2.804 4.863.634 1.938 1.03 3.99 1.254 5.41.21 1.33-.837 2.468-2.146 2.468h-2.353a4.52 4.52 0 0 0-3.847-2.568l-.232-.005a4.52 4.52 0 0 0-4.08 2.573H14.94a4.52 4.52 0 0 0-3.847-2.568l-.233-.005a4.52 4.52 0 0 0-4.073 2.557 2.226 2.226 0 0 1-1.975-2.21v-2.71h5.005a.557.557 0 0 0 0-1.114H4.811V28.19h2.92a.557.557 0 0 0 0-1.113H4.81v-2.224h5.005a.556.556 0 1 0 0-1.112H4.811v-2.226h8.065a.556.556 0 0 0 0-1.113H4.811v-2.78c0-1.229.996-2.226 2.225-2.226zm27.503 20.024a2.98 2.98 0 0 1 2.266 1.044H36.96a2.98 2.98 0 0 1 2.268-1.044M37.48 24.715a.945.945 0 0 0-.965.953v4.263c0 .537.436.973.973.973h4.728c.53 0 .997-.44.95-1.017a8 8 0 0 0-.355-1.814c-.23-.703-.617-1.482-1.278-2.043-1.17-.993-2.79-1.24-3.707-1.3z" clip-rule="evenodd"/><circle cx="10.86" cy="38.408" r="3.476" fill="#fff" stroke="#99b5cf" stroke-width="1.53"/><circle cx="10.86" cy="38.408" r="1.738" fill="#fff" stroke="#99b5cf" stroke-width="1.112"/><circle cx="39.226" cy="38.408" r="3.476" fill="#fff" stroke="#99b5cf" stroke-width="1.53"/><circle cx="39.226" cy="38.408" r="1.738" stroke="#99b5cf" stroke-width="1.112"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h48v48H0z"/></clipPath></defs></svg>

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

@@ -6,12 +6,14 @@ const DS_EL = {
     subtitle: '.delivery-btn .subtitle',
     infoIcon: '.rapid-info-icon',
     image: '.delivery-btn__image',
+    premiumImage: '.delivery-btn__image--premium',
 };
 
 const DS_CLASSES = {
     selectedCell: 'calendar__cell_selected',
     isSelected: 'date-selection_selected',
-    rapidCell: 'calendar__cell_rapid',
+    rapidCell: 'calendar-rapid-day',
+    premiumCell: 'calendar-premium-day',
     hidden: 'd-none',
 };
 
@@ -98,17 +100,72 @@ function updateRapidInfo() {
     updateDeliveryInfo();
 }
 
+function getPremiumOrdinal(day) {
+    if (day > 3 && day < 21) return 'th';
+    switch (day % 10) {
+        case 1:
+            return 'st';
+        case 2:
+            return 'nd';
+        case 3:
+            return 'rd';
+        default:
+            return 'th';
+    }
+}
+
+function formatPremiumDate() {
+    const tomorrow = new Date();
+    tomorrow.setDate(tomorrow.getDate() + 1);
+    const day = tomorrow.getDate();
+    const month = tomorrow.toLocaleString('en-GB', { month: 'long' });
+    const year = tomorrow.getFullYear();
+    return `${day}${getPremiumOrdinal(day)} ${month} ${year}`;
+}
+
+function updatePremiumDeliveryBlock() {
+    const $timeHead = $('.delivery-block .checkout-order .order-block__time-head');
+    if (!$timeHead.length) return;
+
+    const $span = $timeHead.find('> span').first();
+    const $icon = $span.find('.iconHead').detach();
+
+    $span.empty().append($icon).append(` By 12 PM `);
+    $span.append($('<span class="boldDate">').text(`- ${formatPremiumDate()}`));
+    $timeHead.find('.order-block__time-head-info').text('Delivery date');
+}
+
+function updatePremiumInfo() {
+    const $title = $(DS_EL.title);
+    const $subtitle = $(DS_EL.subtitle);
+    const $infoIcon = $subtitle.find(DS_EL.infoIcon).detach();
+    const $image = $(DS_EL.image);
+    const $premiumImage = $(DS_EL.premiumImage);
+
+    $title.text('Premium delivery');
+    $subtitle.html('Delivered tomorrow morning for &pound;12.00');
+    $infoIcon.addClass(DS_CLASSES.hidden);
+    $subtitle.append($infoIcon);
+    $image.addClass(DS_CLASSES.hidden);
+    $premiumImage.removeClass(DS_CLASSES.hidden);
+    updatePremiumDeliveryBlock();
+}
+
 function selectTimeSlot(e) {
     const $self = $(DS_EL.dateSelection);
     const $cell = $(e.target).closest(DS_EL.cell);
     const isRapid = $cell.hasClass(DS_CLASSES.rapidCell);
+    const isPremiumCell = $cell.hasClass(DS_CLASSES.premiumCell);
 
     $(DS_EL.cell).removeClass(DS_CLASSES.selectedCell);
     $cell.addClass(DS_CLASSES.selectedCell);
     $self.trigger('selected');
     isDateSelected = true;
 
-    if (isRapid) {
+    if (isPremiumCell) {
+        $self.addClass(DS_CLASSES.isSelected);
+        updatePremiumInfo();
+    } else if (isRapid) {
         if (!rapidLoaderShown) {
             rapidLoaderShown = true;
             showRapidLoader();

package/src/page_checkout_premium-delivery-details.html

@@ -0,0 +1,161 @@
+{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout" title="Checkout - Delivery details" 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>
+  {{> banner-news
+      description="<b>Your order qualifies for Premium delivery.</b></br>Alternative delivery options are available."
+      imgSrc="./img/premium-delivery.png"
+  }}
+  <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 8 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="Premium delivery"
+      subtitleDelivery="Delivered tomorrow morning for £12.00"
+      imgDelivery="fas fa-shipping-fast"
+      premiumImg="./img/premium-delivery.png"
+      wisdom=true
+      premium=true
+      }}
+    </div>
+
+    {{#with checkoutOrder.deliveryDeliveryDetails.[0]}}
+    <div class="checkout-order">
+      {{> checkout-order-block}}
+    </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"}}
+{{> loader titleLoader="Loading Rapid delivery..." hidden=true modifier="basket-loader rapid-loader"}}
+
+<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/scss/category-main.scss

@@ -13,8 +13,8 @@
 @import 'globals/global-components';
 @import 'components/accordion';
 @import 'components/aside-nav2';
-@import 'components/banner';//fully is used on prototype, and some styles are used in prod, needs check
-@import 'components/legal-info';//present on proto, on prod it is just <p> needs check
+@import 'components/banner'; //fully is used on prototype, and some styles are used in prod, needs check
+@import 'components/legal-info'; //present on proto, on prod it is just <p> needs check
 @import 'components/clamp';
 @import 'components/long-banner';
 
@@ -80,7 +80,6 @@
     border-left: 0;
     border-right: 0;
 
-
     @include media-breakpoint-up(sm) {
       flex-direction: column;
       border-left: 1px solid $gray;
@@ -97,7 +96,6 @@
     }
 
     .card__img {
-
       @include media-breakpoint-down(sm) {
         padding-top: 15px;
         padding-bottom: 10px;
@@ -145,7 +143,7 @@
 
     &_ends {
       background-color: $gray-dark-transparent75;
-      font-size: .75rem;
+      font-size: 0.75rem;
       font-weight: 500;
       line-height: 14px;
     }
@@ -401,7 +399,7 @@
     position: absolute;
     right: 8px;
     top: 8px;
-    font-size: .875rem;
+    font-size: 0.875rem;
     color: $warm-grey;
     cursor: pointer;
 
@@ -414,7 +412,7 @@
     position: absolute;
     right: 8px;
     top: 8px;
-    font-size: .875rem;
+    font-size: 0.875rem;
     color: $warm-grey;
     cursor: pointer;
   }