wickes-css2 2.111.0-develop.1 → 2.111.0-develop.2

package/package.json

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

package/src/components/cart-voucher.hbs

@@ -1,13 +1,13 @@
 <li>
-  {{#ifCond switch-vat '&&' textExcVat}}
+  {{#ifCond switch-vat '&&' displayDescriptionExclusiveVat}}
     <span class="including-vat">
-      {{{text}}}
+      {{{displayDescription}}}
     </span>
     <span class="excluding-vat d-none">
-      {{{textExcVat}}}
+      {{{displayDescriptionExclusiveVat}}}
     </span>
   {{else}}
-    {{{text}}}
+    {{{displayDescription}}}
   {{/ifCond}}
   {{#if isDeletable}}
     <span class="icon checkout-widget__voucher-remove">

package/src/components/checkout-voucher-remove-modal.hbs

@@ -0,0 +1,16 @@
+{{#extend "modal" classMod="voucher-remove-modal" title=title showCloseBtn=true backdrop=true}}
+  {{#content "header"}}
+    <i class="{{headerIcon}} info-icon"></i>
+  {{/content}}
+  {{#content "sections"}}
+    {{#extend "modal-body-section"}}
+      {{#content "body"}}
+        <p class="description">{{{description}}}</p>
+        <div class="voucher-remove-modal__actions">
+          <button class="btn btn_full btn-primary" data-dismiss="modal">Cancel</button>
+          <button class="btn btn_full btn-secondary btn-continue" data-action="confirm-voucher-remove">Yes, continue</button>
+        </div>
+      {{/content}}
+    {{/extend}}
+  {{/content}}
+{{/extend}}

package/src/components/mini-basket/mini-basket-order-item.hbs

@@ -47,24 +47,24 @@
             <i class="fal fa-plus quantity-cta-icon"></i>
           </button>
         </div>
-        {{#if (eq item.basePrice.value 0)}}
+        {{#if (eq item.displayBasePrice.value 0)}}
           <span class="order-item__value product-card__price-value">FREE</span>
         {{else}}
           {{#if (isToggleVatAvailable)}}
             <div class="price including-vat-inherit">
               <span class="product-card__price-value">
-                <span class="order-item__value">{{item.basePrice.formattedValue}}</span>
+                <span class="order-item__value">{{item.displayBasePrice.formattedValue}}</span>
                 <span class="inc">Inc.VAT</span>
               </span>
             </div>
             <div class="price excluding-vat-inherit">
               <span class="product-card__price-value">
-                <span class="order-item__value">{{item.basePriceExcVat.formattedValue}}</span>
+                <span class="order-item__value">{{item.displayBasePriceExclusiveVat.formattedValue}}</span>
                 <span class="inc">Exc.VAT</span>
               </span>
             </div>
           {{else}}
-            <span class="price product-card__price-value">{{item.basePrice.formattedValue}}</span>
+            <span class="price product-card__price-value">{{item.displayBasePrice.formattedValue}}</span>
           {{/if}}
         {{/if}}
       </div>

package/src/components/tradepro-discount-banner.hbs

@@ -0,0 +1,8 @@
+<div class="tradepro-discount-banner">
+  <span class="tradepro-discount-banner__content">
+    Your TradePro discount is already applied to all prices
+  </span>
+  <span class="icon notification__close notification__close_white notification__close_stripbanner">
+    <span class="fas fa-times"></span>
+  </span>
+</div>

package/src/components/wismo-payment.hbs

@@ -4,7 +4,14 @@
         {{#each wismo-order-payment-klarna.items}}
             <div class="wrap-item">
                 <div class="wrap-item__name">{{{name}}}</div>
-                <div class="wrap-item__value">{{{value}}}</div>
+                <div class="wrap-item__value">
+                    {{#ifCond ../switch-vat '&&' valueExcVat}}
+                        <span class="including-vat">{{{value}}}</span>
+                        <span class="excluding-vat d-none">{{{valueExcVat}}}</span>
+                    {{else}}
+                        {{{value}}}
+                    {{/ifCond}}
+                </div>
             </div>
         {{/each}}
     {{else if payment-apple}}
@@ -12,7 +19,12 @@
         <div class="wrap-item">
             <div class="wrap-item__name">{{{name}}}</div>
             <div class="wrap-item__value">
-              {{{value}}}
+              {{#ifCond ../switch-vat '&&' valueExcVat}}
+                <span class="including-vat">{{{value}}}</span>
+                <span class="excluding-vat d-none">{{{valueExcVat}}}</span>
+              {{else}}
+                {{{value}}}
+              {{/ifCond}}
               <p class="pt-3">{{additional-value}}</p>
             </div>
         </div>
@@ -22,7 +34,12 @@
         <div class="wrap-item">
             <div class="wrap-item__name">{{{name}}}</div>
             <div class="wrap-item__value">
-              {{{value}}}
+              {{#ifCond ../switch-vat '&&' valueExcVat}}
+                <span class="including-vat">{{{value}}}</span>
+                <span class="excluding-vat d-none">{{{valueExcVat}}}</span>
+              {{else}}
+                {{{value}}}
+              {{/ifCond}}
               <p class="pt-3">{{additional-value}}</p>
             </div>
         </div>
@@ -32,7 +49,12 @@
           <div class="wrap-item">
             <div class="wrap-item__name">{{{name}}}</div>
             <div class="wrap-item__value">
-              {{{value}}}
+              {{#ifCond ../switch-vat '&&' valueExcVat}}
+                <span class="including-vat">{{{value}}}</span>
+                <span class="excluding-vat d-none">{{{valueExcVat}}}</span>
+              {{else}}
+                {{{value}}}
+              {{/ifCond}}
               <p class="pt-3">{{additional-value}}</p>
             </div>
           </div>
@@ -49,7 +71,14 @@
         {{else}}
           <div class="wrap-item">
             <div class="wrap-item__name">{{{this.name}}}</div>
-            <div class="wrap-item__value">{{{this.value}}}</div>
+            <div class="wrap-item__value">
+                {{#ifCond ../switch-vat '&&' this.valueExcVat}}
+                    <span class="including-vat">{{{this.value}}}</span>
+                    <span class="excluding-vat d-none">{{{this.valueExcVat}}}</span>
+                {{else}}
+                    {{{this.value}}}
+                {{/ifCond}}
+            </div>
           </div>
         {{/if}}
       {{/each}}
@@ -57,14 +86,28 @@
       {{#each wismo-order-payment-clearpay.items}}
         <div class="wrap-item">
           <div class="wrap-item__name">{{{name}}}</div>
-          <div class="wrap-item__value">{{{value}}}</div>
+          <div class="wrap-item__value">
+            {{#ifCond ../switch-vat '&&' valueExcVat}}
+              <span class="including-vat">{{{value}}}</span>
+              <span class="excluding-vat d-none">{{{valueExcVat}}}</span>
+            {{else}}
+              {{{value}}}
+            {{/ifCond}}
+          </div>
         </div>
       {{/each}}
     {{else}}
         {{#each wismo-order-payment.items}}
             <div class="wrap-item">
                 <div class="wrap-item__name">{{{name}}}</div>
-                <div class="wrap-item__value">{{{value}}}</div>
+                <div class="wrap-item__value">
+                    {{#ifCond ../switch-vat '&&' valueExcVat}}
+                        <span class="including-vat">{{{value}}}</span>
+                        <span class="excluding-vat d-none">{{{valueExcVat}}}</span>
+                    {{else}}
+                        {{{value}}}
+                    {{/ifCond}}
+                </div>
             </div>
         {{/each}}
     {{/if}}

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

@@ -29,24 +29,24 @@
       ],
       "discounts": [
         {
-          "text": "Voucher abcd applies and giving 20% off",
+          "displayDescription": "Voucher abcd applies and giving 20% off",
           "isDeletable": true
         },
         {
-          "text": "Voucher 20% off",
+          "displayDescription": "Voucher 20% off",
           "isDeletable": true
         },
         {
-          "text": "Buy 4 for 3"
+          "displayDescription": "Buy 4 for 3"
         },
         {
-          "text": "Online only offer"
+          "displayDescription": "Online only offer"
         },
         {
-          "text": "2 for £35"
+          "displayDescription": "2 for £35"
         },
         {
-          "text": "Offer price equivalent to £17.50 per item"
+          "displayDescription": "Offer price equivalent to £17.50 per item"
         }
       ],
       "total": {

package/src/data/data_discounts.json

@@ -1,24 +1,24 @@
 {
   "discounts": [
     {
-      "text": "Voucher abcd applies and giving 20% off",
+      "displayDescription": "Voucher abcd applies and giving 20% off",
       "isDeletable": true
     },
     {
-      "text": "Voucher 20% off",
+      "displayDescription": "Voucher 20% off",
       "isDeletable": true
     },
 	{
-      "text": "Buy 4 for 3"
+      "displayDescription": "Buy 4 for 3"
     },
 	{
-      "text": "Online only offer"
+      "displayDescription": "Online only offer"
     },
 	{
-      "text": "2 for £35"
+      "displayDescription": "2 for £35"
     },
 	{
-      "text": "Offer price equivalent to £17.50 per item"
+      "displayDescription": "Offer price equivalent to £17.50 per item"
     }
   ]
 }

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

@@ -44,31 +44,52 @@
       ],
       "discounts": [
         {
-          "text": "Voucher abcd applies and giving 20% off",
-          "textExcVat": "Voucher abcd applies and giving 18% off",
+          "displayDescription": "Voucher abcd applies and giving 20% off",
+          "displayDescriptionExclusiveVat": "Voucher abcd applies and giving 18% off",
           "isDeletable": true
         },
         {
-          "text": "Voucher 20% off",
-          "textExcVat": "Voucher 18% off",
+          "displayDescription": "Voucher 20% off",
+          "displayDescriptionExclusiveVat": "Voucher 18% off",
           "isDeletable": true
         },
         {
-          "text": "Buy 4 for 3",
-          "textExcVat": "Buy 5 for 3"
+          "displayDescription": "Buy 4 for 3",
+          "displayDescriptionExclusiveVat": "Buy 5 for 3"
         },
         {
-          "text": "Online only offer"
+          "displayDescription": "Online only offer"
         },
         {
-          "text": "2 for £35",
-          "textExcVat": "2 for £30"
+          "displayDescription": "2 for £35",
+          "displayDescriptionExclusiveVat": "2 for £30"
         },
         {
-          "text": "Offer price equivalent to £17.50 per item",
-          "textExcVat": "Offer price equivalent to £15.50 per item"
+          "displayDescription": "Offer price equivalent to £17.50 per item",
+          "displayDescriptionExclusiveVat": "Offer price equivalent to £15.50 per item"
         }
       ],
+      "voucher-remove-popup": {
+        "title": "Remove {coupon name} discount?",
+        "headerIcon": "fas fa-exclamation-circle",
+        "description": "Are you sure you want to remove your {coupon name} discount from this order? The total cost of your order will increase.",
+        "actions": {
+          "mod": "actions",
+          "buttons": [
+            {
+              "title": "Cancel",
+              "isPrimary": true,
+              "close-modal": true
+            },
+            {
+              "mod": "btn-continue",
+              "data-action": "confirm-voucher-remove",
+              "title": "Yes, continue",
+              "isSecondary": true
+            }
+          ]
+        }
+      },
       "total": {
         "title": "Total:",
         "value": "£430.95"

package/src/data/data_shopping-cart-with-energy.json

@@ -42,24 +42,24 @@
       ],
       "discounts": [
         {
-          "text": "Voucher abcd applies and giving 20% off",
+          "displayDescription": "Voucher abcd applies and giving 20% off",
           "isDeletable": true
         },
         {
-          "text": "Voucher 20% off",
+          "displayDescription": "Voucher 20% off",
           "isDeletable": true
         },
         {
-          "text": "Buy 4 for 3"
+          "displayDescription": "Buy 4 for 3"
         },
         {
-          "text": "Online only offer"
+          "displayDescription": "Online only offer"
         },
         {
-          "text": "2 for £35"
+          "displayDescription": "2 for £35"
         },
         {
-          "text": "Offer price equivalent to £17.50 per item"
+          "displayDescription": "Offer price equivalent to £17.50 per item"
         }
       ],
       "total": {
@@ -749,24 +749,24 @@
       ],
       "discounts": [
         {
-          "text": "Voucher abcd applies and giving 20% off",
+          "displayDescription": "Voucher abcd applies and giving 20% off",
           "isDeletable": true
         },
         {
-          "text": "Voucher 20% off",
+          "displayDescription": "Voucher 20% off",
           "isDeletable": true
         },
         {
-          "text": "Buy 4 for 3"
+          "displayDescription": "Buy 4 for 3"
         },
         {
-          "text": "Online only offer"
+          "displayDescription": "Online only offer"
         },
         {
-          "text": "2 for £35"
+          "displayDescription": "2 for £35"
         },
         {
-          "text": "Offer price equivalent to £17.50 per item"
+          "displayDescription": "Offer price equivalent to £17.50 per item"
         }
       ],
       "total": {

package/src/data/data_wismo.json

@@ -68,7 +68,8 @@
       },
       {
         "name": "Voucher:",
-        "value": "-"
+        "value": "<div>Wickes TradePro 10% Saving</div><div>20% off <br> Discount applied at checkout</div><div>Buy 3 get 1 free</div><div>Buy 2 for £30 <br>Not Available for Mix &amp; Match</div><div>Buy 2 get 1 free <br>Not Available for Mix &amp; Match</div><div>Buy any Product_103178 or 542003  with any Product_543265 or 148268 &amp; save up to £6.5</div>",
+        "valueExcVat": "<div>Wickes TradePro 10% Saving</div><div>20% off <br> Discount applied at checkout</div><div>Buy 3 get 1 free</div><div>Buy 2 for £25 <br>Not Available for Mix &amp; Match</div><div>Buy 2 get 1 free <br>Not Available for Mix &amp; Match</div><div>Buy any Product_103178 or 542003  with any Product_543265 or 148268 &amp; save up to £5.42</div>"
       }
     ]
   },

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

@@ -61,6 +61,14 @@ Wick.VatToggle = {
         return !!Wick.VatToggle.getCookie(Wick.VatToggle.VAT_COOKIE);
     },
 
+    isActive: function () {
+        if (Wick.VatToggle.getSwitcherState() !== null) {
+            return Wick.VatToggle.getSwitcherState();
+        } else {
+            return Wick.VatToggle.isOn();
+        }
+    },
+
     toggleDisplayClass: function () {
         const includingVatEl = Wick.VatToggle.el.includingVat;
         const excludingVat = Wick.VatToggle.el.excludingVat;
@@ -74,14 +82,8 @@ Wick.VatToggle = {
         const excludingVatEl = Wick.VatToggle.el.excludingVat;
         const hiddenClassName = Wick.VatToggle.HIDDEN_CLASS_NAME;
 
-        let vatState = null;
-
         // check switcher state for web or cookie for app
-        if (Wick.VatToggle.getSwitcherState() !== null) {
-            vatState = Wick.VatToggle.getSwitcherState();
-        } else {
-            vatState = Wick.VatToggle.isOn();
-        }
+        const vatState = Wick.VatToggle.isActive();
 
         if (vatState) {
             $(includingVatEl).addClass(hiddenClassName);

package/src/js/components/general/tradepro-discount-banner.js

@@ -0,0 +1,69 @@
+var Wick = Wick || {};
+
+Wick.TradeProDiscountBanner = {
+    COOKIE_NAME: 'showTradeProPricingBanner',
+    BANNER_HTML: `
+    <div class="tradepro-discount-banner">
+      <span class="tradepro-discount-banner__content">
+        Your TradePro discount is already applied to all prices
+      </span>
+      <span class="icon notification__close notification__close_white notification__close_stripbanner">
+        <span class="fas fa-times"></span>
+      </span>
+    </div>`,
+    getCookie: function (cookieName) {
+        var cookie = decodeURIComponent(document.cookie)
+            .split(';')
+            .map(function (c) {
+                return c.trim();
+            })
+            .find(function (c) {
+                return c.startsWith(cookieName + '=');
+            });
+
+        return cookie ? cookie.replace(cookieName + '=', '') : '';
+    },
+    isOn: function () {
+        return (
+            Wick.TradeProDiscountBanner.getCookie(Wick.TradeProDiscountBanner.COOKIE_NAME) ===
+            'true'
+        );
+    },
+    turnOff: function () {
+        Wick.TradeProDiscountBanner.setCookie(Wick.TradeProDiscountBanner.COOKIE_NAME, 'false');
+    },
+    setCookie: function (cookieName, value) {
+        document.cookie =
+            cookieName + '=' + encodeURIComponent(value) + ';domain=.wickes.co.uk;path=/';
+    },
+    onClose: function (e) {
+        e.stopPropagation();
+        $('.tradepro-discount-banner').remove();
+        $('.global-search--has-tradepro-banner').removeClass('global-search--has-tradepro-banner');
+        Wick.TradeProDiscountBanner.turnOff();
+    },
+    bindEvents: function () {
+        $(document).on(
+            'click',
+            '.tradepro-discount-banner .notification__close',
+            Wick.TradeProDiscountBanner.onClose
+        );
+    },
+    init: function () {
+        Wick.TradeProDiscountBanner.bindEvents();
+        var $globalSearch = $('.header-global-search__content.global-search');
+
+        if ($globalSearch.length && !$globalSearch.find('.tradepro-discount-banner').length) {
+            $globalSearch.prepend(Wick.TradeProDiscountBanner.BANNER_HTML);
+            $globalSearch.addClass('global-search--has-tradepro-banner');
+        }
+    },
+};
+
+$(function () {
+    if (!Wick.TradeProDiscountBanner.isOn()) {
+        return;
+    }
+
+    Wick.TradeProDiscountBanner.init();
+});

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

@@ -20,6 +20,9 @@ Wick.BasketData = (function () {
             promotionsInfo: [
                 {
                     description: 'Spend over £10 and get £2 fixed discount',
+                    displayDescription: 'Spend over £10 and get £2 fixed discount',
+                    displayDescriptionExclusiveVat:
+                        'Spend over £10 and get £1.67 fixed discount (ex. VAT)',
                     usedCouponCode: 'RT_02',
                 },
             ],
@@ -949,7 +952,14 @@ Wick.BasketData = (function () {
             potentialProductPromotions: [],
             appliedProductPromotions: [],
             appliedOrderPromotions: [],
-            promotionsInfo: null,
+            promotionsInfo: [
+                {
+                    description: 'Spend over £10 and get £2 fixed discount',
+                    displayDescription: 'Spend over £10 and get £2 fixed discount',
+                    displayDescriptionExclusiveVat:
+                        'Spend over £10 and get £1.67 fixed discount (ex. VAT)',
+                },
+            ],
             clickAndCollectOnly: false,
             deliveryItemsQuantity: 1,
             pickupItemsQuantity: 2,

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

@@ -19,6 +19,9 @@ Wick.CheckoutData = (function () {
             promotionsInfo: [
                 {
                     description: 'Spend over £10 and get £2 fixed discount',
+                    displayDescription: 'Spend over £10 and get £2 fixed discount',
+                    displayDescriptionExclusiveVat:
+                        'Spend over £10 and get £1.67 fixed discount (ex. VAT)',
                     usedCouponCode: 'RT_02',
                 },
             ],

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

@@ -460,6 +460,18 @@ Wick.MiniBasketData = (function () {
                                 currencyIso: 'GBP',
                                 formattedPriceWithoutCurrencySymbol: '10',
                             },
+                            displayBasePrice: {
+                                value: 90.0,
+                                formattedValue: '£90.00',
+                                currencyIso: 'GBP',
+                                formattedPriceWithoutCurrencySymbol: '90.00',
+                            },
+                            displayBasePriceExclusiveVat: {
+                                value: 75.0,
+                                formattedValue: '£75.00',
+                                currencyIso: 'GBP',
+                                formattedPriceWithoutCurrencySymbol: '75.00',
+                            },
                             product: {
                                 code: '221100',
                                 name: 'Blue Circle Ready To Use Postcrete - 20kg',
@@ -547,6 +559,18 @@ Wick.MiniBasketData = (function () {
                                 currencyIso: 'GBP',
                                 formattedPriceWithoutCurrencySymbol: '9',
                             },
+                            displayBasePrice: {
+                                value: 8.1,
+                                formattedValue: '£8.10',
+                                currencyIso: 'GBP',
+                                formattedPriceWithoutCurrencySymbol: '8.10',
+                            },
+                            displayBasePriceExclusiveVat: {
+                                value: 6.75,
+                                formattedValue: '£6.75',
+                                currencyIso: 'GBP',
+                                formattedPriceWithoutCurrencySymbol: '6.75',
+                            },
                             product: {
                                 code: '109450',
                                 name: 'Knauf Insulation Space Standard Top Up 170mm Loft Roll - 6.47m²',
@@ -633,6 +657,18 @@ Wick.MiniBasketData = (function () {
                                 currencyIso: 'GBP',
                                 formattedPriceWithoutCurrencySymbol: '8',
                             },
+                            displayBasePrice: {
+                                value: 22.5,
+                                formattedValue: '£22.50',
+                                currencyIso: 'GBP',
+                                formattedPriceWithoutCurrencySymbol: '22.50',
+                            },
+                            displayBasePriceExclusiveVat: {
+                                value: 18.75,
+                                formattedValue: '£18.75',
+                                currencyIso: 'GBP',
+                                formattedPriceWithoutCurrencySymbol: '18.75',
+                            },
                             product: {
                                 code: '123143',
                                 name: '6 Wickes General Purpose Claw test',
@@ -816,6 +852,9 @@ Wick.MiniBasketData = (function () {
             potentialProductPromotions: [
                 {
                     description: 'Buy more to qualify for our buy 3 get 1 free offer',
+                    displayDescription: 'Buy more to qualify for our buy 3 get 1 free offer',
+                    displayDescriptionExclusiveVat:
+                        'Buy more to qualify for our buy 3 get 1 free offer',
                     promotionData: {
                         code: 'TD_ProductBOGOFPromotionPotential',
                         title: null,
@@ -840,6 +879,10 @@ Wick.MiniBasketData = (function () {
                 {
                     description:
                         'These item qualify for our buy 3 get 1 free offer - You have saved £36.00',
+                    displayDescription:
+                        'These item qualify for our buy 3 get 1 free offer - You have saved £36.00',
+                    displayDescriptionExclusiveVat:
+                        'These item qualify for our buy 3 get 1 free offer - You have saved £30.00 Exc.VAT',
                     promotionData: {
                         code: 'TD_ProductBOGOFPromotion',
                         title: null,
@@ -868,6 +911,7 @@ Wick.MiniBasketData = (function () {
             promotionsInfo: [
                 {
                     description: 'Buy 3 get 1 free',
+                    displayDescription: 'Buy 3 get 1 free',
                     usedCouponCode: '',
                 },
             ],
@@ -900,6 +944,18 @@ Wick.MiniBasketData = (function () {
                                 currencyIso: 'GBP',
                                 formattedPriceWithoutCurrencySymbol: '18',
                             },
+                            displayBasePrice: {
+                                value: 14.4,
+                                formattedValue: '£14.40',
+                                currencyIso: 'GBP',
+                                formattedPriceWithoutCurrencySymbol: '14.40',
+                            },
+                            displayBasePriceExclusiveVat: {
+                                value: 12.0,
+                                formattedValue: '£12.00',
+                                currencyIso: 'GBP',
+                                formattedPriceWithoutCurrencySymbol: '12.00',
+                            },
                             product: {
                                 code: '109450',
                                 name: 'Knauf Insulation Space Standard Top Up 170mm Loft Roll - 6.47m²',
@@ -986,6 +1042,18 @@ Wick.MiniBasketData = (function () {
                                 currencyIso: 'GBP',
                                 formattedPriceWithoutCurrencySymbol: '24',
                             },
+                            displayBasePrice: {
+                                value: 22.5,
+                                formattedValue: '£22.50',
+                                currencyIso: 'GBP',
+                                formattedPriceWithoutCurrencySymbol: '22.50',
+                            },
+                            displayBasePriceExclusiveVat: {
+                                value: 18.75,
+                                formattedValue: '£18.75',
+                                currencyIso: 'GBP',
+                                formattedPriceWithoutCurrencySymbol: '18.75',
+                            },
                             product: {
                                 code: '109451',
                                 name: 'Knauf Insulation Super Top Up 200mm Loft Roll - 5.61m²',