wickes-css2 2.109.0-develop.2 → 2.109.0-develop.4

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

@@ -1,32 +1,144 @@
-var Wick = Wick || {};
-Wick.DateSelection = (function(){
-  var $self = $('.date-selection'),
-    cell = '.calendar__cell_cnt',
-    selectedCell = 'calendar__cell_selected',
-    isSelected = 'date-selection_selected',
-    isDateSelected = false;
-
-  var selectTimeSlot = function(e){
-    $(cell).removeClass(selectedCell);
-    $(e.target).addClass(selectedCell);
-    $self.addClass(isSelected);
+const DS_EL = {
+    cell: '.calendar__cell_cnt',
+    dateSelection: '.date-selection',
+    loader: '.rapid-loader',
+    title: '.delivery-btn .title',
+    subtitle: '.delivery-btn .subtitle',
+    infoIcon: '.rapid-info-icon',
+    image: '.delivery-btn__image',
+};
+
+const DS_CLASSES = {
+    selectedCell: 'calendar__cell_selected',
+    isSelected: 'date-selection_selected',
+    rapidCell: 'calendar__cell_rapid',
+    hidden: 'd-none',
+};
+
+let rapidLoaderShown = false;
+let isDateSelected = false;
+
+function generateRapidEstimate() {
+    const scenario = Math.floor(Math.random() * 4);
+
+    switch (scenario) {
+        case 0: {
+            const mins = Math.floor(Math.random() * 59) + 1;
+            const padded = String(mins).padStart(2, '0');
+            const word = mins === 1 ? 'minute' : 'minutes';
+            return `Delivered in as little as <br>${padded} ${word} for &pound;10.00`;
+        }
+        case 1: {
+            const mins = Math.floor(Math.random() * 60);
+            const padded = String(mins).padStart(2, '0');
+            const word = mins === 1 ? 'minute' : 'minutes';
+            const minutePart = mins === 0 ? '00 minutes' : `${padded} ${word}`;
+            return `Delivered in as little as <br>1 hour ${minutePart} for &pound;10.00`;
+        }
+        case 2: {
+            const mins = Math.floor(Math.random() * 60);
+            const padded = String(mins).padStart(2, '0');
+            const word = mins === 1 ? 'minute' : 'minutes';
+            const minutePart = mins === 0 ? '00 minutes' : `${padded} ${word}`;
+            return `Delivered in as little as <br>2 hours ${minutePart} for &pound;10.00`;
+        }
+        default:
+            return null;
+    }
+}
+
+function updateDeliveryInfo() {
+    const $subtitle = $(DS_EL.subtitle);
+    const $infoIcon = $subtitle.find(DS_EL.infoIcon).detach();
+    const estimate = generateRapidEstimate();
+
+    if (estimate) {
+        $subtitle.html(estimate);
+        $infoIcon.removeClass(DS_CLASSES.hidden);
+    } else {
+        $subtitle.html('Delivery within 3 hours for <b>&pound;10.00');
+        $infoIcon.addClass(DS_CLASSES.hidden);
+    }
+
+    $subtitle.append($infoIcon);
+    $infoIcon.filter('[data-toggle="tooltip"]').tooltip();
+}
+
+function showRapidLoader() {
+    const $self = $(DS_EL.dateSelection);
+    const $loader = $(DS_EL.loader);
+    $loader.removeClass(DS_CLASSES.hidden);
+
+    setTimeout(() => {
+        $loader.addClass(DS_CLASSES.hidden);
+        $self.addClass(DS_CLASSES.isSelected);
+        updateRapidInfo();
+    }, 3000);
+}
+
+function updateNonRapidInfo() {
+    const $title = $(DS_EL.title);
+    const $subtitle = $(DS_EL.subtitle);
+    const $infoIcon = $subtitle.find(DS_EL.infoIcon).detach();
+    const $image = $(DS_EL.image);
+
+    $title.text('Next or Named day delivery');
+    $subtitle.html('Delivery between 7am - 7pm for &pound;12.00');
+    $infoIcon.addClass(DS_CLASSES.hidden);
+    $subtitle.append($infoIcon);
+    $image.addClass(DS_CLASSES.hidden);
+}
+
+function updateRapidInfo() {
+    const $title = $(DS_EL.title);
+    const $image = $(DS_EL.image);
+
+    $title.text('Rapid delivery');
+    $image.removeClass(DS_CLASSES.hidden);
+    updateDeliveryInfo();
+}
+
+function selectTimeSlot(e) {
+    const $self = $(DS_EL.dateSelection);
+    const $cell = $(e.target).closest(DS_EL.cell);
+    const isRapid = $cell.hasClass(DS_CLASSES.rapidCell);
+
+    $(DS_EL.cell).removeClass(DS_CLASSES.selectedCell);
+    $cell.addClass(DS_CLASSES.selectedCell);
     $self.trigger('selected');
     isDateSelected = true;
-  };
 
-  var init = function () {
+    if (isRapid) {
+        if (!rapidLoaderShown) {
+            rapidLoaderShown = true;
+            showRapidLoader();
+            return;
+        } else {
+            $self.addClass(DS_CLASSES.isSelected);
+            updateRapidInfo();
+        }
+    } else {
+        $self.addClass(DS_CLASSES.isSelected);
+        updateNonRapidInfo();
+    }
+}
+
+function initDateSelection() {
+    const $self = $(DS_EL.dateSelection);
+
     if (!$self.length) {
-      return;
+        return;
     }
 
-    $self.on('click', cell, selectTimeSlot);
-  }
+    $self.on('click', DS_EL.cell, selectTimeSlot);
+}
 
-  init();
+var Wick = window.Wick || {};
 
-  return {
-    isDateSelected: function(){
-      return isDateSelected;
-    }
-  }
-})();
+Wick.DateSelection = {
+    isDateSelected: () => isDateSelected,
+};
+
+$(document).ready(function () {
+    initDateSelection();
+});

package/src/js/emulation/forms.js

@@ -323,6 +323,18 @@ Wick.Forms = (function () {
             }
         }
 
+        if ($(form).is('.notify-me-form')) {
+            if ($(form).find('#notify-me-email').val().length) {
+                return false;
+            }
+        }
+
+        if ($(form).is('.add-list-id__form')) {
+            if ($(form).find('#project-id').val().length) {
+                return false;
+            }
+        }
+
         if ($(form).is('.header-search')) {
             window.location.href = './page_search-results.html';
         }

package/src/js/emulation/mini-basket-data.js

@@ -1,4 +1,4 @@
-var Wick = Wick || {};
+window.Wick = window.Wick || {};
 Wick.MiniBasketData = (function () {
     return {
         updateQuantity: {
@@ -874,14 +874,14 @@ Wick.MiniBasketData = (function () {
             clickAndCollectOnly: false,
             deliveryItemsQuantity: 1,
             pickupItemsQuantity: 2,
-            freeDelivery: true,
+            freeDelivery: false,
             subtotalWithoutCharity: {
                 value: 19.0,
                 formattedValue: '£19.00',
                 currencyIso: 'GBP',
                 formattedPriceWithoutCurrencySymbol: '19.00',
             },
-            messageForFreeDelivery: 'Free delivery<i class="icon fas fa-check"></i>',
+            messageForFreeDelivery: null,
             pickupOrderGroups: [
                 {
                     entries: [

package/src/js/emulation/notify-me.js

@@ -0,0 +1,9 @@
+function initNotifyMeEmulation() {
+    $(document).on('submit', Wick.NotifyMeSubscription.el.form, () =>
+        Wick.NotifyMeSubscription.showSuccessState()
+    );
+}
+
+$(document).ready(function () {
+    initNotifyMeEmulation();
+});

package/src/js/emulation/switchCalendar.js

@@ -16,20 +16,21 @@ Wick.Calendar = {
         if ($(this).hasClass(Wick.Calendar.el.switchBtnEarlier)) {
             $currentCalendar = $currentCalendar.prev();
             $currentCalendar.removeClass(Wick.Calendar.el.dateSectionHidden);
-
         } else if ($(this).hasClass(Wick.Calendar.el.switchBtnLatest)) {
             $currentCalendar = $currentCalendar.next(Wick.Calendar.el.dateSection);
             $currentCalendar.removeClass(Wick.Calendar.el.dateSectionHidden);
         }
     },
-
 };
 
 $(document).ready(function () {
     function init() {
-
         if (Wick.checkLocalEnv) {
-            $(Wick.Calendar.el.componentDateSection).on('click', Wick.Calendar.el.switchBtn, Wick.Calendar.SwitchCalendar);
+            $(Wick.Calendar.el.componentDateSection).on(
+                'click',
+                Wick.Calendar.el.switchBtn,
+                Wick.Calendar.SwitchCalendar
+            );
         }
     }
 
@@ -39,8 +40,11 @@ $(document).ready(function () {
 
     init();
 
-    $(window).on('resize', _.debounce(function () {
-        unbind();
-        init();
-    }, 250));
+    $(window).on(
+        'resize',
+        _.debounce(function () {
+            unbind();
+            init();
+        }, 250)
+    );
 });

package/src/js/page/basket/mini-basket-total.js

@@ -1,10 +1,11 @@
 import { updateDiscount } from '../components/discounts';
 
 const osEl = {
-    $totalSection: $('.mini-basket__total'),
+    totalSection: '.mini-basket__total',
     checkoutWidgetDetailsDiscount: '.checkout-widget__details-discount',
     checkoutWidgetDetails: '.checkout-widget__details',
     delivery: '.checkout-widget__item-delivery',
+    deliveryCostMessage: '.checkout-widget__item-delivery-cost-message',
     cc: '.checkout-widget__item-cc',
     itemFree: '.checkout-widget__item-free',
     itemDeficit: '.checkout-widget__item-deficit',
@@ -37,26 +38,40 @@ export function updateTotal(data, equalMap, isVoucher) {
 }
 
 function createCheckoutWidgetItem(obj) {
+    const isDelivery = obj.item === osEl.delivery;
     return `
       <li class="checkout-widget__item ${obj.item.substr(1)}">
         <span>${obj.title}</span>
           <span class="checkout-widget__item-value">${obj.dataValue}</span>
       </li>
+      ${
+          isDelivery
+              ? `
+      <li class="checkout-widget__item checkout-widget__item-delivery-cost-message">
+        <span class="checkout-widget__item-value" id="order-delivery-cost-message">
+          Final delivery cost confirmed at checkout
+        </span>
+      </li>`
+              : ''
+      }
     `;
 }
 
 function hideUnusedDeliveryTypeCost(data, isVoucher) {
     $(osEl.delivery).show();
+    $(osEl.deliveryCostMessage).show();
     $(osEl.cc).show();
     if (isVoucher) {
         if (!data.deliveryOrder) {
             $(osEl.delivery).hide();
+            $(osEl.deliveryCostMessage).hide();
         } else if (!data.clickAndCollectOrder) {
             $(osEl.cc).hide();
         }
     } else {
         if (data.clickAndCollectOnly) {
             $(osEl.delivery).hide();
+            $(osEl.deliveryCostMessage).hide();
         } else if (data.deliveryItemsQuantity > 0 && data.pickupItemsQuantity === 0) {
             $(osEl.cc).hide();
         }
@@ -64,7 +79,7 @@ function hideUnusedDeliveryTypeCost(data, isVoucher) {
 }
 
 function calculateFreeDelivery(data) {
-    osEl.$totalSection.each(function () {
+    $(osEl.totalSection).each(function () {
         let $free = $(this).find(osEl.itemFree);
         let $deficit = $(this).find(osEl.itemDeficit);
 

package/src/js/page/basket-v2.js

@@ -277,13 +277,13 @@ Wick.BasketPage = {
             if (isSwitchVat) {
                 const itemTotalIncVat = context.find(Wick.BasketPage.el.itemTotalIncVat);
                 const itemTotalExcVat = context.find(Wick.BasketPage.el.itemTotalExcVat);
-                const totalPrice = data.entry.itemTotalWithoutDiscount.formattedValue;
-                const totalPriceExcVat = data.entry.itemTotalWithoutDiscountExcVat.formattedValue;
+                const totalPrice = data.entry.displayItemTotalWithoutDiscount.formattedValue;
+                const totalPriceExcVat = data.entry.displayItemTotalWithoutDiscountExclusiveVat.formattedValue;
                 itemTotalIncVat.text(totalPrice);
                 itemTotalExcVat.text(totalPriceExcVat);
             } else {
                 const totalValue = context.find(Wick.BasketPage.el.itemTotal);
-                const totalPrice = data.entry.itemTotalWithoutDiscount.formattedValue;
+                const totalPrice = data.entry.displayItemTotalWithoutDiscount.formattedValue;
                 totalValue.text(totalPrice);
             }
         }
@@ -798,20 +798,20 @@ Wick.BasketPage = {
                             <div class="order-item__price-title">Item price:</div>
                             <div class="order-item__price-value">
                             ${
-                                currentItem.basePrice.value === 0
+                                currentItem.displayBasePrice.value === 0
                                     ? '<span class="order-item__value">FREE</span>'
                                     : Wick.VatToggle.isToggleVatAvailable()
                                       ? `
                                             <div class="including-vat"><!--
-                                                --><span class="order-item__value">${currentItem.basePrice.formattedValue}</span><!--
+                                                --><span class="order-item__value">${currentItem.displayBasePrice.formattedValue}</span><!--
                                                 --><div class="price-vat">Inc.VAT</div>
                                             </div>
                                             <div class="excluding-vat"><!--
-                                                --><span class="order-item__value">${currentItem.basePriceExcVat.formattedValue}</span><!--
+                                                --><span class="order-item__value">${currentItem.displayBasePriceExclusiveVat.formattedValue}</span><!--
                                                 --><div class="price-vat">Exc.VAT</div>
                                             </div>
                                           `
-                                      : `<span class="order-item__value">${currentItem.basePrice.formattedValue}</span>`
+                                      : `<span class="order-item__value">${currentItem.displayBasePrice.formattedValue}</span>`
                             }
                             </div>
                         </div>
@@ -820,20 +820,20 @@ Wick.BasketPage = {
                             <div class="order-item__total-title">Item total:</div>
                             <div class="order-item__total-value">
                                 ${
-                                    currentItem.itemTotalWithoutDiscount.value === 0
+                                    currentItem.displayItemTotalWithoutDiscount.value === 0
                                         ? '<span class="order-item__value">FREE</span>'
                                         : Wick.VatToggle.isToggleVatAvailable()
                                           ? `
                                                 <div class="including-vat"><!--
-                                                    --><span class="order-item__value">${currentItem.itemTotalWithoutDiscount.formattedValue}</span><!--
+                                                    --><span class="order-item__value">${currentItem.displayItemTotalWithoutDiscount.formattedValue}</span><!--
                                                     --><div class="price-vat">Inc.VAT</div><!--
                                                 --></div>
                                                 <div class="excluding-vat"><!--
-                                                    --><span class="order-item__value">${currentItem.itemTotalWithoutDiscountExcVat.formattedValue}</span><!--
+                                                    --><span class="order-item__value">${currentItem.displayItemTotalWithoutDiscountExclusiveVat.formattedValue}</span><!--
                                                     --><div class="price-vat">Exc.VAT</div>
                                                 </div>
                                             `
-                                          : `<span class="order-item__value">${currentItem.itemTotalWithoutDiscount.formattedValue}</span>`
+                                          : `<span class="order-item__value">${currentItem.displayItemTotalWithoutDiscount.formattedValue}</span>`
                                 }
                             </div>
                         </div>
@@ -912,16 +912,16 @@ Wick.BasketPage = {
                             let duplicate = arr.every((el) => {
                                 return (
                                     el !==
-                                    `<div class="order-item__promo">${entry.description}</div>`
+                                    `<div class="order-item__promo">${entry.displayDescription}</div>`
                                 );
                             });
 
                             !duplicate ||
                                 arr.push(
-                                    `<div class="order-item__promo">${entry.description}</div>`
+                                    `<div class="order-item__promo">${entry.displayDescription}</div>`
                                 );
                         } else {
-                            arr.push(`<div class="order-item__promo">${entry.description}</div>`);
+                            arr.push(`<div class="order-item__promo">${entry.displayDescription}</div>`);
                         }
                     }
                 });
@@ -930,21 +930,21 @@ Wick.BasketPage = {
         data.appliedProductPromotions &&
             data.appliedProductPromotions.forEach((entry) => {
                 entry.consumedEntries.forEach((promo) => {
-                    if (promo.orderEntryNumber === item.entryNumber && entry.description) {
+                    if (promo.orderEntryNumber === item.entryNumber && entry.displayDescription) {
                         if (arr.length) {
                             let duplicate = arr.every((el) => {
                                 return (
                                     el !==
-                                    `<div class="order-item__promo">${entry.description}</div>`
+                                    `<div class="order-item__promo">${entry.displayDescription}</div>`
                                 );
                             });
 
                             !duplicate ||
                                 arr.push(
-                                    `<div class="order-item__promo">${entry.description}</div>`
+                                    `<div class="order-item__promo">${entry.displayDescription}</div>`
                                 );
                         } else {
-                            arr.push(`<div class="order-item__promo">${entry.description}</div>`);
+                            arr.push(`<div class="order-item__promo">${entry.displayDescription}</div>`);
                         }
                     }
                 });
@@ -1122,15 +1122,17 @@ Wick.BasketPage = {
         const arr = [];
         if (data.potentialOrderPromotions && data.potentialOrderPromotions.length) {
             data.potentialOrderPromotions.forEach((promo) => {
-                !promo.description ||
+                !promo.displayDescription ||
                     arr.push(`
                     <div class="p-promotion">
                         <div class="p-promotion__icon">
                             <i class="icon fas fa-gift"></i>
                         </div>
-                        <div class="p-promotion__description">
-                            ${promo.description}
-                        </div>
+                        ${Wick.VatToggle.isToggleVatAvailable() && promo.displayDescriptionExclusiveVat
+                            ? `<div class="p-promotion__description including-vat">${promo.displayDescription}</div>
+                               <div class="p-promotion__description excluding-vat d-none">${promo.displayDescriptionExclusiveVat}</div>`
+                            : `<div class="p-promotion__description">${promo.displayDescription}</div>`
+                        }
                         <div class="p-promotion__close">
                             <i class="icon fas fa-times"></i>
                         </div>
@@ -1141,15 +1143,17 @@ Wick.BasketPage = {
 
         if (data.appliedOrderPromotions && data.appliedOrderPromotions.length) {
             data.appliedOrderPromotions.forEach((promo) => {
-                !promo.description ||
+                !promo.displayDescription ||
                     arr.push(`
                     <div class="p-promotion">
                         <div class="p-promotion__icon">
                             <i class="icon fas fa-gift"></i>
                         </div>
-                        <div class="p-promotion__description">
-                            ${promo.description}
-                        </div>
+                        ${Wick.VatToggle.isToggleVatAvailable() && promo.displayDescriptionExclusiveVat
+                            ? `<div class="p-promotion__description including-vat">${promo.displayDescription}</div>
+                               <div class="p-promotion__description excluding-vat d-none">${promo.displayDescriptionExclusiveVat}</div>`
+                            : `<div class="p-promotion__description">${promo.displayDescription}</div>`
+                        }
                         <div class="p-promotion__close">
                             <i class="icon fas fa-times"></i>
                         </div>

package/src/js/page/components/notify-me.js

@@ -0,0 +1,99 @@
+import { showValidationErrors, clearValidationErrors, isValidEmail } from '../utils/validation';
+
+var Wick = window.Wick || {};
+
+Wick.NotifyMeSubscription = {
+    NOTIFY_ME_EVENT: 'NOTIFY_ME',
+    HIDDEN_CLASS_NAME: 'd-none',
+    el: {
+        notifyMePopup: '#modal-notify-me',
+        notifyMeBtn: '.btn--notify-open',
+
+        form: '#modal-notify-me .notify-me-form',
+        emailInput: '#modal-notify-me #notify-me-email',
+        stateForm: '#modal-notify-me [data-notify-state="form"]',
+        stateSuccess: '#modal-notify-me [data-notify-state="success"]',
+        headerForm: '#modal-notify-me [data-notify-header="form"]',
+        headerSuccess: '#modal-notify-me [data-notify-header="success"]',
+        productId: '#product-code-val',
+    },
+    defaultErrorMessage: 'Something went wrong',
+    invalidEmailMessage: 'Please enter a valid email address',
+    showCustomModal() {
+        $(Wick.NotifyMeSubscription.el.notifyMePopup).modal('show');
+    },
+    getEmail() {
+        return ($(Wick.NotifyMeSubscription.el.emailInput).val() || '').toString().trim();
+    },
+    isEmailValid() {
+        const email = Wick.NotifyMeSubscription.getEmail();
+
+        return isValidEmail(email);
+    },
+    showFormState() {
+        $(Wick.NotifyMeSubscription.el.stateSuccess).addClass(
+            Wick.NotifyMeSubscription.HIDDEN_CLASS_NAME
+        );
+        $(Wick.NotifyMeSubscription.el.stateForm).removeClass(
+            Wick.NotifyMeSubscription.HIDDEN_CLASS_NAME
+        );
+
+        $(Wick.NotifyMeSubscription.el.headerSuccess).addClass(
+            Wick.NotifyMeSubscription.HIDDEN_CLASS_NAME
+        );
+        $(Wick.NotifyMeSubscription.el.headerForm).removeClass(
+            Wick.NotifyMeSubscription.HIDDEN_CLASS_NAME
+        );
+    },
+    showSuccessState() {
+        $(Wick.NotifyMeSubscription.el.stateForm).addClass(
+            Wick.NotifyMeSubscription.HIDDEN_CLASS_NAME
+        );
+        $(Wick.NotifyMeSubscription.el.stateSuccess).removeClass(
+            Wick.NotifyMeSubscription.HIDDEN_CLASS_NAME
+        );
+
+        $(Wick.NotifyMeSubscription.el.headerForm).addClass(
+            Wick.NotifyMeSubscription.HIDDEN_CLASS_NAME
+        );
+        $(Wick.NotifyMeSubscription.el.headerSuccess).removeClass(
+            Wick.NotifyMeSubscription.HIDDEN_CLASS_NAME
+        );
+    },
+    resetValidation() {
+        clearValidationErrors(Wick.NotifyMeSubscription.el.form);
+    },
+    validateForm() {
+        Wick.NotifyMeSubscription.resetValidation();
+
+        if (!Wick.NotifyMeSubscription.isEmailValid()) {
+            showValidationErrors(
+                Wick.NotifyMeSubscription.el.form,
+                Wick.NotifyMeSubscription.invalidEmailMessage
+            );
+            return false;
+        }
+
+        return true;
+    },
+    showError(err = {}) {
+        const msg = err.errMsg || err.errorMessage || Wick.NotifyMeSubscription.defaultErrorMessage;
+
+        showValidationErrors(Wick.NotifyMeSubscription.el.form, msg);
+    },
+    init() {
+        $(document).on('click', Wick.NotifyMeSubscription.el.notifyMeBtn, function (e) {
+            e.preventDefault();
+            Wick.NotifyMeSubscription.showCustomModal();
+        });
+
+        $(Wick.NotifyMeSubscription.el.notifyMePopup).on('hidden.bs.modal', function () {
+            Wick.NotifyMeSubscription.showFormState();
+            clearValidationErrors(Wick.NotifyMeSubscription.el.form);
+        });
+    },
+};
+
+$(document).ready(function () {
+    Wick.NotifyMeSubscription.init();
+});

package/src/js/page/components/order-summary.js

@@ -5,6 +5,7 @@ const osEl = {
     checkoutWidgetDetailsDiscount: '.checkout-widget__details-discount',
     checkoutWidgetDetails: '.checkout-widget__details',
     delivery: '.checkout-widget__item-delivery',
+    deliveryCostMessage: '.checkout-widget__item-delivery-cost-message',
     cc: '.checkout-widget__item-cc',
     itemFree: '.checkout-widget__item-free',
     itemDeficit: '.checkout-widget__item-deficit',
@@ -26,6 +27,22 @@ export function updateOrderSummary(data, equalMap, isVoucher) {
             }
         }
 
+        if (obj.item === osEl.delivery) {
+            $(osEl.delivery).each(function () {
+                if (
+                    !$(this).siblings(osEl.deliveryCostMessage).length &&
+                    !$(this).closest('[data-hide-delivery-cost-message]').length
+                ) {
+                    $(this).after(`
+                      <li class="checkout-widget__item checkout-widget__item-delivery-cost-message">
+                        <span class="checkout-widget__item-value" id="order-delivery-cost-message">
+                          Final delivery cost confirmed at checkout
+                        </span>
+                      </li>`);
+                }
+            });
+        }
+
         $(obj.item).find(obj.itemValue).text(obj.dataValue);
         if (isVoucher ? obj.dataValue : obj.value && obj.dataValue) {
             $(obj.item).find(obj.itemValue).show();
@@ -64,20 +81,37 @@ export function updateOrderSummary(data, equalMap, isVoucher) {
 }
 
 function createCheckoutWidgetItem(obj) {
+    const isDelivery = obj.item === osEl.delivery;
+    const hideMessage = $(osEl.checkoutWidgetDetails).closest(
+        '[data-hide-delivery-cost-message]'
+    ).length;
+    const costMessageExists = $(osEl.deliveryCostMessage).length > 0;
     return `
       <li class="checkout-widget__item ${obj.item.substr(1)}">
         <span>${obj.title}</span>
           <span class="checkout-widget__item-value">${obj.dataValue}</span>
       </li>
+      ${
+          isDelivery && !hideMessage && !costMessageExists
+              ? `
+      <li class="checkout-widget__item checkout-widget__item-delivery-cost-message">
+        <span class="checkout-widget__item-value" id="order-delivery-cost-message">
+          Final delivery cost confirmed at checkout
+        </span>
+      </li>`
+              : ''
+      }
     `;
 }
 
 function hideUnusedDeliveryTypeCost(data, isVoucher) {
     $(osEl.delivery).show();
+    $(osEl.deliveryCostMessage).show();
     $(osEl.cc).show();
     if (isVoucher) {
         if ('deliveryOrder' in data && data.deliveryOrder === false) {
             $(osEl.delivery).hide();
+            $(osEl.deliveryCostMessage).hide();
         }
 
         if ('clickAndCollectOrder' in data && data.clickAndCollectOrder === false) {
@@ -86,6 +120,7 @@ function hideUnusedDeliveryTypeCost(data, isVoucher) {
     } else {
         if (data.clickAndCollectOnly) {
             $(osEl.delivery).hide();
+            $(osEl.deliveryCostMessage).hide();
         } else if (data.deliveryItemsQuantity > 0 && data.pickupItemsQuantity === 0) {
             $(osEl.cc).hide();
         }