wickes-css2 2.94.0-develop.13 → 2.94.0-develop.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.94.0-develop.13",
+  "version": "2.94.0-develop.15",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {

package/src/components/checkout-action.hbs

@@ -1,14 +1,15 @@
-<div class="checkout-action__wrapper {{mod}}">
+<div class="checkout-action__wrapper {{lookup . "mod"}} {{view}}">
     {{#if head}}
         {{> checkout-section-title title=head}}
     {{/if}}
-    <div class="checkout-action">
+    <div class="checkout-action {{#if container}}container{{/if}}">
         <div class="checkout-action__section">
             <a href="#" class="btn btn_full btn-action btn-checkout">
-                Checkout
-                <span class="icon">
-                  <i class="fas fa-arrow-right"></i>
-                </span>
+              <span class="btn-wickes-checkout__label checkout-text--mixed">Checkout</span>
+              <span class="btn-wickes-checkout__label checkout-text--collect">Wickes Checkout</span>
+              <span class="icon">
+                <i class="fas fa-arrow-right"></i>
+              </span>
             </a>
         </div>
         <div class="checkout-action__section checkout-widget__basket-block">
@@ -23,13 +24,15 @@
                         </div>
                     </div>
                 </a>
+              {{#unless hidePaypalEmail}}
                 <div class="pay-pal_container-email">
-                    <div class="pay-pal_email-heading">Your PayPal email: </div>
-                    <div class="pay-pal_email-value">John.doe@gmail.com</div>
-                    <div class="pay-pal_email-link">
-                        <a href="#" title="" target="_blank">Don't use this email</a>
-                    </div>
+                  <div class="pay-pal_email-heading">Your PayPal email: </div>
+                  <div class="pay-pal_email-value">John.doe@gmail.com</div>
+                  <div class="pay-pal_email-link">
+                    <a href="#" title="" target="_blank">Don't use this email</a>
+                  </div>
                 </div>
+              {{/unless}}
             </div>
         </div>
     </div>

package/src/components/checkout-voucher-accordion.hbs

@@ -0,0 +1,15 @@
+<li class="checkout-widget__voucher-accordion">
+  <div
+      class="checkout-widget__voucher-toggle collapsed"
+      data-toggle="collapse"
+      data-target="#checkout-voucher-accordion-{{id}}"
+  >
+    Got a voucher?
+    <span class="checkout-widget__icon">
+            <i class="fal fa-angle-up fa-2x"></i>
+          </span>
+  </div>
+  <div class="collapse" id="checkout-voucher-accordion-{{id}}">
+    {{> checkout_voucher_large  id=id title=""}}
+  </div>
+</li>

package/src/components/checkout_order-summary-new.hbs

@@ -12,12 +12,13 @@
             {{/each}}
         {{else}}
             {{#each info}}
-                <li class="checkout-widget__item {{#if mod}}checkout-widget__item-{{mod}}{{/if}}">
+                <li class="checkout-widget__item {{#if (lookup this "mod")}}checkout-widget__item-{{lookup this "mod"}}{{/if}}">
                     <span>{{title}}</span>
                     <span class="checkout-widget__item-value">{{value}}</span>
                 </li>
             {{/each}}
         {{/if}}
+        {{> checkout-voucher-accordion id=id}}
         {{#if discounts}}
             <li class="checkout-widget__accordion-wrap checkout-widget__details-discount">
             <span class="checkout-widget__detail-name checkout-widget__detail-name_accordion collapsed" data-toggle="collapse"
@@ -35,7 +36,8 @@
             </li>
         {{/if}}
     </ul>
-    <div class="checkout-widget__total">
+  {{#unless mobile}}
+    <div class="checkout-widget__total" data-sticky-observe>
         {{#if confirmationSummary}}
             <div> {{ confirmation-summary.total.title }}</div>
             <div class="checkout-widget__total-value">{{ confirmation-summary.total.value }}</div>
@@ -44,5 +46,5 @@
             <div class="checkout-widget__total-value">{{ total.value }}</div>
         {{/if}}
     </div>
-
+  {{/unless}}
 </div>

package/src/components/checkout_voucher_large.hbs

@@ -1,19 +1,23 @@
 <div class="voucher">
-    {{#if title}}
-        {{> checkout-section-title}}
-    {{/if}}
-    <div class="checkout-widget checkout-voucher checkout-voucher_fixed">
-        <form id="form-checkout-voucher{{id}}">
-            {{> form-row id=(concat 'voucher-code' id) label="Voucher" label-hidden="true" required="true" placeholder="Enter code"}}
-            <button class="voucher__btn btn btn-secondary btn_full">
-                <span class="btn__text">Apply</span>
-            </button>
-        </form>
+  {{#if title}}
+    {{> checkout-section-title}}
+  {{/if}}
+  <div class="checkout-widget checkout-voucher checkout-voucher_fixed">
+    <form id="form-checkout-voucher{{id}}">
+      {{> form-row id=(concat 'voucher-code' id) label="Voucher" label-hidden="true" required="true" placeholder="Enter code" info=""}}
+      <button class="voucher__btn btn btn-primary">
+        <span class="btn__text">Apply</span>
+      </button>
+    </form>
+  </div>
+  {{#unless voucherApplied}}
+    <div class="checkout-widget checkout-voucher voucher-applied checkout-voucher-hide">
+      <div class="voucher-applied__inner">
+      <span class="icon icon__check">
+        <i class="fas fa-check-circle"></i>
+      </span>
+        <h5 class="heading-5 text-center">Voucher has been applied</h5>
+      </div>
     </div>
-    {{#unless voucherApplied}}
-        <div class="checkout-widget checkout-voucher voucher-applied checkout-voucher-hide">
-            <i class="fas fa-check-circle"></i>
-            <h3 class="heading-3 text-center">Voucher has been applied</h3>
-        </div>
-    {{/unless}}
+  {{/unless}}
 </div>

package/src/components/date-selection.hbs

@@ -24,7 +24,7 @@
                     {{/each}}
                   </div>
                   {{#each calendar}}
-                    {{#if (eq (mod @index 7) 0)}}
+                    {{#if (eq (mod_dec @index 7) 0)}}
                       <div class="calendar__row">
                         <div class="calendar__row_days">
                     {{/if}}

package/src/components/order-item.hbs

@@ -87,7 +87,7 @@
                                 <div class="price-vat">Inc.VAT</div>
                             </div>
                             <div class="excluding-vat d-none">
-                                <span class="order-item__value">£{{price}}</span>
+                                <span class="order-item__value">£{{priceExcVat}}</span>
                                 <div class="price-vat">Exc.VAT</div>
                             </div>
                         {{else}}
@@ -106,7 +106,7 @@
                                 <div class="price-vat">Inc.VAT</div>
                             </div>
                             <div class="excluding-vat d-none">
-                                <span class="order-item__value">£{{pricePerSQM.value}}</span>
+                                <span class="order-item__value">£{{pricePerSQMExcVat.value}}</span>
                                 <div class="price-vat">Exc.VAT</div>
                             </div>
                         {{else}}
@@ -127,7 +127,7 @@
                                 <div class="price-vat">Inc.VAT</div>
                             </div>
                             <div class="excluding-vat d-none">
-                                <span class="order-item__value">£{{total}}</span>
+                                <span class="order-item__value">£{{totalExcVat}}</span>
                                 <div class="price-vat">Exc.VAT</div>
                             </div>
                         {{else}}

package/src/components/order-summary.hbs

@@ -1,66 +1,101 @@
+{{#if basket}}
+<div class="summary summary--mobile d-lg-none" id="summary-mobile-{{id}}">
+  {{> summary-mobile-bar}}
+  <div class="collapse summary__aside container" id="checkout-summary-mobile-accordion-{{id}}" data-sticky-element>
+
+    {{> checkout_order-summary-new head=title mod=mod id=(concat id "-mobile") mobile="true"}}
+    {{#unless basket}}
+      <div class="summary__payment footer-checkout">
+        {{#unless merged}}
+          {{#if paymentsCheckoutV2}}
+            <div class="footer-checkout-holder footer-checkout-holder--payways">
+              {{> payments-checkout-v2}}
+            </div>
+          {{else}}
+            <div class="footer-checkout-holder">
+              {{> payments-checkout clearPayIcon="true"}}
+              <span class="footer-checkout__copyright">
+                        Copyright ©
+                        <span class="current-year"></span> Wickes.co.uk
+                      </span>
+            </div>
+          {{/if}}
+        {{else}}
+          <div class="summary__payment-message">
+            <p class="summary__payment-main">{{vat-message.main}}</p>
+            <p class="summary__payment-additional">{{vat-message.additional}}</p>
+          </div>
+        {{/unless}}
+      </div>
+    {{/unless}}
+  </div>
+</div>
+{{/if}}
+
+
 <div class="summary {{#if mod}}summary-large{{/if}} {{#if paymentsCheckoutV2 }}summary--payways{{/if}}">
-    {{> checkout-section-title}}
-    {{#if mod}}
-        <div class="summary__accordion collapsed"
-              data-toggle="collapse"
-              data-target="#checkout-details-accordion-{{id}}"
-        >
-            <span class="summary__accordion-text">Show full summary</span>
-            <span class="icon summary-icon-small">
+  {{> checkout-section-title}}
+  {{#if mod}}
+    <div class="summary__accordion collapsed"
+         data-toggle="collapse"
+         data-target="#checkout-details-accordion-{{id}}"
+    >
+      <span class="summary__accordion-text">Show full summary</span>
+      <span class="icon summary-icon-small">
                 <i class="fas fa-angle-up"></i>
             </span>
-        </div>
-    {{/if}}
-    <div class="summary__aside">
-        {{> checkout_order-summary-new head=title mod=mod id=id}}
+    </div>
+  {{/if}}
+  <div class="summary__aside">
+    {{> checkout_order-summary-new head=title mod=mod id=id}}
 
-        {{#if klarna-placement}}
-            <div class="summary__klarna">
-                <klarna-placement
-                    data-key="credit-promotion-badge"
-                    data-locale="en-GB"
-                    data-purchase-amount="12000"
-                ></klarna-placement>
+    {{#if klarna-placement}}
+      <div class="summary__klarna">
+        <klarna-placement
+            data-key="credit-promotion-badge"
+            data-locale="en-GB"
+            data-purchase-amount="12000"
+        ></klarna-placement>
+      </div>
+    {{/if}}
+    {{#if clearpay-placement}}
+      {{> clearpay applyMargin=true hasKlarna=true}}
+    {{/if}}
+    {{#unless basket}}
+      <div class="summary__payment footer-checkout">
+        {{#unless merged}}
+          {{#if paymentsCheckoutV2 }}
+            <div class="footer-checkout-holder footer-checkout-holder--payways">
+              {{> payments-checkout-v2 }}
             </div>
-        {{/if}}
-        {{#if clearpay-placement}}
-            {{> clearpay applyMargin=true hasKlarna=true}}
-        {{/if}}
-        {{#unless basket}}
-            <div class="summary__payment footer-checkout">
-                {{#unless merged}}
-                  {{#if paymentsCheckoutV2 }}
-                    <div class="footer-checkout-holder footer-checkout-holder--payways">
-                      {{> payments-checkout-v2 }}
-                    </div>
-                  {{else}}
-                    <div class="footer-checkout-holder">
-                      {{> payments-checkout clearPayIcon="true" }}
-                      <span class="footer-checkout__copyright">Copyright © <span class="current-year"></span> Wickes.co.uk</span>
-                    </div>
-                  {{/if}}
-                {{else}}
-                    <div class="summary__payment-message">
-                        <p class="summary__payment-main">{{vat-message.main}}</p>
-                        <p class="summary__payment-additional">{{vat-message.additional}}</p>
-                    </div>
-                {{/unless}}
+          {{else}}
+            <div class="footer-checkout-holder">
+              {{> payments-checkout clearPayIcon="true" }}
+              <span class="footer-checkout__copyright">Copyright © <span class="current-year"></span> Wickes.co.uk</span>
             </div>
+          {{/if}}
+        {{else}}
+          <div class="summary__payment-message">
+            <p class="summary__payment-main">{{vat-message.main}}</p>
+            <p class="summary__payment-additional">{{vat-message.additional}}</p>
+          </div>
         {{/unless}}
-    </div>
+      </div>
+    {{/unless}}
+  </div>
 
-    {{#if basket-id}}
-        <div class="summary__basked-id">
-            Basket ID: <span class="id-number">136589003</span>
-        </div>
-    {{/if}}
+  {{#if basket-id}}
+    <div class="summary__basked-id">
+      Basket ID: <span class="id-number">136589003</span>
+    </div>
+  {{/if}}
 
-    {{#if email}}
-        <div class="summary__email">
-            <h3 class="heading-3">Email</h3>
-            <div class="summary__email-info">
-                Examplemail@wickes.co.uk
-            </div>
-        </div>
-    {{/if}}
+  {{#if email}}
+    <div class="summary__email">
+      <h3 class="heading-3">Email</h3>
+      <div class="summary__email-info">
+        Examplemail@wickes.co.uk
+      </div>
+    </div>
+  {{/if}}
 </div>

package/src/components/partner-signup-form.hbs

@@ -3,6 +3,10 @@
     <div class="col-md-12 pl-0">
       <div class="row">
         <div class="col-md-7 signup-tradepro-wrap">
+          {{#if fill-remaining}}
+            {{> notifications notification-page.warning classModifier="notification_warning fill-remaining fill-remaining--local"
+              text="Please fill in the remaining fields below, in order to create your account."}}
+          {{/if}}
           <form class="signup-tradepro form-bg">
             <div class="signup-tradepro__row">
               <div class="signup-tradepro__descr">

package/src/components/summary-mobile-bar.hbs

@@ -0,0 +1,17 @@
+<div class="summary__mobile-bar" data-sticky-element>
+  <div class="summary__mobile-order collapsed"
+       data-toggle="collapse"
+       aria-expanded="false"
+       data-target="#checkout-summary-mobile-accordion-{{id}}">
+    <div class="summary__mobile-container container">
+      <span class="summary__mobile-bar-label">Order Summary</span>
+      <div class="summary__icon-container">
+        <span class="summary__mobile-bar-total">{{ total.value }}</span>
+        <span class="summary__icon summary__icon-up">
+          <i class="fal fa-angle-up fa-2x"></i>
+        </span>
+      </div>
+    </div>
+  </div>
+    {{> checkout-action container="true" hidePaypalEmail="true"}}
+</div>

package/src/data/data_delivery-address-v2.json

@@ -9,7 +9,7 @@
           "mod": "bold"
         },
         {
-          "title": "Includes VAT:",
+          "title": "VAT:",
           "value": "£71.66",
           "mod": "vat"
         },

package/src/data/data_shopping-cart-v2.json

@@ -78,8 +78,10 @@
             "title": "Wickes General Purpose Claw \nHammer - 16oz",
             "code": "123123",
             "price": "16",
+            "priceExcVat": "15",
             "quantity": 2,
             "total": "32",
+            "totalExcVat": "30",
             "offers": [
               "Buy 2 for 3 — Add 1 to qualify",
               "Buy 2 for 3 — Add 1 to qualify"
@@ -87,6 +89,9 @@
             "pricePerSQM": {
               "value": "12"
             },
+            "pricePerSQMExcVat": {
+              "value": "10"
+            },
             "message": "Purchased 12 times since your last visit 1 day ago",
             "click-and-collect": {
               "store": "Watford",
@@ -328,8 +333,10 @@
             "title": "Wickes General Purpose Claw \nHammer - 16oz asd asd asd as das d asd as as d",
             "code": "123124",
             "price": "16",
+            "priceExcVat": "15",
             "quantity": 123,
             "total": "19776",
+            "totalExcVat": "19000",
             "message": "Purchased 12 times since your last visit 1 day ago",
             "click-and-collect": {
               "otherStores": [
@@ -561,8 +568,10 @@
             "title": "Wickes General Purpose Claw \nHammer - 16oz asdasd as das da sd as daasd as das as  sd asa",
             "code": "123125",
             "price": "16",
+            "priceExcVat": "15",
             "quantity": 2,
             "total": "32",
+            "totalExcVat": "30",
             "click-and-collect": {
               "otherStores": [
                 {
@@ -792,6 +801,9 @@
             "title": "Wickes General Purpose Claw test",
             "code": "123126",
             "price": "16",
+            "priceExcVat": "15",
+            "total": "32",
+            "totalExcVat": "30",
             "quantity": 1,
             "totalMobile": "16",
             "click-and-collect": {
@@ -1029,8 +1041,10 @@
             "title": "Wickes General Purpose Claw \nHammer - 16oz",
             "code": "123127",
             "price": "16",
+            "priceExcVat": "15",
             "quantity": 2,
             "total": "32",
+            "totalExcVat": "30",
             "offers": [
               "Buy 2 for 3 — Add 1 to qualify",
               "Buy 2 for 3 — Add 1 to qualify"
@@ -1046,8 +1060,10 @@
             "title": "Wickes General Purpose Claw \nHammer - 16oz asd asd asd as das d asd as as d",
             "code": "123128",
             "price": "16",
+            "priceExcVat": "15",
             "quantity": 123,
             "total": "19776",
+            "totalExcVat": "19000",
             "message": "Purchased 12 times since your last visit 1 day ago",
             "address": "Watford",
             "updateable": true
@@ -1059,8 +1075,10 @@
             "title": "Wickes General Purpose Claw \nHammer - 16oz asdasd as das da sd as daasd as das as  sd asa",
             "code": "123129",
             "price": "16",
+            "priceExcVat": "15",
             "quantity": 2,
             "total": "32",
+            "totalExcVat": "30",
             "updateable": true
 
           },
@@ -1069,7 +1087,9 @@
             "image": "./img/tile-buying-guide.jpg",
             "title": "Wickes General Purpose Claw test",
             "price": "16",
+            "priceExcVat": "15",
             "total": "32",
+            "totalExcVat": "30",
             "code": "1231210",
             "quantity": 1,
             "totalMobile": "16",
@@ -1080,7 +1100,9 @@
             "image": "./img/tile-buying-guide.jpg",
             "title": "Wickes General Purpose Claw test",
             "price": "0",
+            "priceExcVat": "0",
             "total": "0",
+            "totalExcVat": "0",
             "updateable": false,
             "code": "1231211",
             "quantity": 1,
@@ -1094,9 +1116,11 @@
             "image": "./img/tile-buying-guide.jpg",
             "title": "Euramax Carolina 2 Sidelight Right Hand Hung uPVC White Door Set - 2085 x 1520mm",
             "price":  "968",
+            "priceExcVat": "960",
             "code": "121570",
             "quantity": 1,
             "total": "968",
+            "totalExcVat": "960",
             "deliveryStock": true,
             "onlyDeliveryType": true
           }

package/src/js/components/general/is-trade-pro.js

@@ -21,4 +21,18 @@ $(document).ready(function () {
     if (navigator.userAgent.match(/TradeProMobile_iOS|TradeProMobile_Android|DIYMobile_iOS|DIYMobile_Android/i)) {
         $('body').addClass('tp-app');
     }
-});
+});
+
+$(function() {
+    if (Wick.isTradeProAndroid) {
+        $('body').addClass('tp-android');
+    }
+    if (Wick.isTradeProiOS) {
+        $('body').addClass('tp-ios');
+        if (
+          window.matchMedia('(min-width: 768px)').matches
+        ) {
+            $('body').addClass('tp-ios-notch');
+        }
+    }
+});

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

@@ -43,7 +43,7 @@ Wick.BasketData = (function () {
       "status": 400,
       "responseJSON": {
         "globalMessage": {
-          "message": "Delivery is already free. Coupon can’t be applied",
+          "message": "Delivery is already free.\nCoupon can’t be applied."
         }
       }
     },
@@ -444,7 +444,7 @@ Wick.BasketData = (function () {
       "appliedOrderPromotions": [],
       "promotionsInfo": null,
       "clickAndCollectOnly": true,
-      "deliveryItemsQuantity": 0,
+      "deliveryItemsQuantity": 1,
       "pickupItemsQuantity": 2,
       "freeDelivery": false,
       "subtotalWithoutCharity": {"value": 19.0, "formattedValue": "£19.00", "currencyIso": "GBP", "formattedPriceWithoutCurrencySymbol": "19.00"},

package/src/js/page/basket/summary-mobile.js

@@ -0,0 +1,22 @@
+const summaryMobileEl = {
+  summaryAside: '.summary__aside',
+  backToTop : '#back-to-top',
+  canDisplayPayPal: '#canDisplayPayPalOnBasketPage',
+};
+
+export function addClassToSummaryAside(data) {
+  const payPalEnabled = data?.paymentInfos?.payPalEnabled;
+  const clickAndCollectOnly = data.clickAndCollectOnly;
+  const canDisplayPayPal = $(summaryMobileEl.canDisplayPayPal).val() === 'true';
+  const isPayPalAllowed = payPalEnabled && clickAndCollectOnly && canDisplayPayPal;
+  const $aside = $(summaryMobileEl.summaryAside);
+  const $backToTop = $(summaryMobileEl.backToTop);
+
+  if (isPayPalAllowed === false) {
+    $aside.addClass('single-button');
+    $backToTop.addClass('single-button');
+  } else {
+    $aside.removeClass('single-button');
+    $backToTop.removeClass('single-button');
+  }
+}

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

@@ -29,6 +29,8 @@ import {
 } from './basket/session-sync'
 import {displayEnergyEfficiency} from "./basket/display-energy-efficiency";
 import {appendLoader, hideLoader, showLoader} from "./utils/loader";
+import {addClassToSummaryAside} from "./basket/summary-mobile";
+import { initStickyObserver } from './components/sticky-order-observer';
 
 var Wick = window.Wick || {};
 Wick.BasketPage = {
@@ -384,6 +386,7 @@ Wick.BasketPage = {
         } else {
             if (initial) {
                 Wick.BasketPage.getCartEntries(Wick.BasketData.updateCart);
+                addClassToSummaryAside(Wick.BasketData.updateCart);
                 const initialTotalPrice = Wick.BasketData.updateCart.totalPrice.value;
                 updateClearpayVisibility(initialTotalPrice);
             } else {
@@ -405,6 +408,7 @@ Wick.BasketPage = {
                 updateClearpayPlacements(Wick.BasketData.updateCart.totalPrice.value);
                 updateClearpayVisibility(Wick.BasketData.updateCart.totalPrice.value);
                 Wick.BasketPage.addPotentialPromo(Wick.BasketData.updateCart);
+                addClassToSummaryAside(Wick.BasketData.updateCart);
                 Wick.BasketPage.getCartEntries(Wick.BasketData.updateCart);
                 Wick.BasketPage.checkProductArrays(Wick.BasketData.updateCart) || Wick.BasketPage.removeOrderItem(repaintData);
                 updateBasketSession();
@@ -415,6 +419,7 @@ Wick.BasketPage = {
     },
     updateCartAction: function (response, info) {
         updateClearpayVisibility(response.totalPrice.value)
+        addClassToSummaryAside(response)
         if (info.initial) {
             Wick.BasketPage.getCartEntries(response);
         } else {
@@ -1257,6 +1262,9 @@ Wick.BasketPage = {
         $(Wick.BasketPage.el.content).find(quantityButton).prop('disabled', false);
     }
 };
+
+$(document).on('cartUpdate', initStickyObserver);
+
 $(document).ready(function () {
     function init() {
 
@@ -1291,6 +1299,11 @@ $(document).ready(function () {
 
         $(Wick.BasketPage.el.voucherRemove).unbind('click');
         Wick.BasketPage.paintActionButton();
+        initStickyObserver(
+            $('[data-sticky-observe]'),
+            $('[data-sticky-element]'),
+            '.summary__aside.collapse.show'
+        );
         Wick.BasketPage.updateCart(...Array(3), true);
         setDefaultCharityValue();
         if (!$(Wick.BasketPage.el.loader).length) {

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

@@ -1,4 +1,5 @@
 import {updateDiscount} from "./discounts";
+import {addClassToSummaryAside} from "../basket/summary-mobile";
 
 const osEl = {
     $summarySection: $('.summary'),
@@ -9,9 +10,9 @@ const osEl = {
     itemFree: '.checkout-widget__item-free',
     itemDeficit: '.checkout-widget__item-deficit',
     summaryDelivery: '.checkout-widget__item-delivery',
+    summaryMobileTotal: '.summary__mobile-bar-total',
 }
 
-
 export function updateOrderSummary(data, equalMap, isVoucher) {
     equalMap.forEach((obj) => {
         if ($(obj.item).length) {
@@ -32,9 +33,12 @@ export function updateOrderSummary(data, equalMap, isVoucher) {
         }
     })
 
+    const value = data.totalPrice?.formattedValue || data.total;
+
     updateDiscount(data, isVoucher);
     hideUnusedDeliveryTypeCost(data, isVoucher);
     calculateFreeDelivery(data);
+    updateSummaryMobileBarTotal(value);
 }
 
 function createCheckoutWidgetItem(obj) {
@@ -97,3 +101,6 @@ function calculateFreeDelivery(data) {
     })
 }
 
+function updateSummaryMobileBarTotal(formattedValue) {
+    $(osEl.summaryMobileTotal).text(formattedValue);
+}