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

package/src/data/data_voucher_tradePro.json

@@ -12,8 +12,40 @@
         "expiration": "Offer ends: 1st October 2025",
         "barcodeNumber": "00016221000711490",
         "buttonText": "Redeem now",
+        "buttonLink": "#",
+        "barcodeImgSrc": "./img/Barcode-simple.png",
+        "barcodeImgAlt": "Barcode image"
+      },
+      "online": {
+        "label": "Type: Online",
+        "title": "Exclusive £4.99 all you can eat breakfast",
+        "note": "Offer ends: 1st October 2025",
+        "code": "WKBREAKFAST1023",
+        "buttonText": "Redeem now",
         "buttonLink": "#"
       },
+      "description": {
+        "short": "Exclusive £4.99 all you can eat breakfast.",
+        "long": "As a TradePro member, enjoy an exclusive discount Monday to Friday on all you can eat breakfast at Toby Carvery. <b>Redeem now! Hurry, ends 1st October.</b>"
+      }
+    },
+    "qr": {
+      "title":"£4.99 unlimited breakfast. Ends October 1st",
+      "isOnline": false,
+      "isInstore": true,
+      "img": "./img/placeholders/img-placeholder-rewards.png",
+      "imgAlt": "Voucher image",
+      "instore": {
+        "label": "Type: Online & In-store ",
+        "title": "Exclusive £4.99 all you can eat breakfast.",
+        "expiration": "Offer ends: 1st October 2025",
+        "barcodeNumber": "00016221000711490",
+        "buttonText": "Redeem now",
+        "buttonLink": "#",
+        "isQR": true,
+        "barcodeImgSrc": "./img/QR.png",
+        "barcodeImgAlt": "QR image"
+      },
       "online": {
         "label": "Type: Online",
         "title": "Exclusive £4.99 all you can eat breakfast",
@@ -39,7 +71,9 @@
         "expiration": "Offer ends: 1st October 2025",
         "barcodeNumber": "00016221000711490",
         "buttonText": "Redeem now",
-        "buttonLink": "#"
+        "buttonLink": "#",
+        "barcodeImgSrc": "./img/Barcode-simple.png",
+        "barcodeImgAlt": "Barcode image"
       },
       "online": {
         "label": "Type: Online",
@@ -66,7 +100,9 @@
         "expiration": "Offer ends: 1st October 2025",
         "barcodeNumber": "00016221000711490",
         "buttonText": "Redeem now",
-        "buttonLink": "#"
+        "buttonLink": "#",
+        "barcodeImgSrc": "./img/Barcode-simple.png",
+        "barcodeImgAlt": "Barcode image"
       },
       "online": {
         "label": "Type: Online",
@@ -93,7 +129,9 @@
         "expiration": "Offer ends: 1st October 2025",
         "barcodeNumber": "00016221000711490",
         "buttonText": "Redeem now",
-        "buttonLink": "#"
+        "buttonLink": "#",
+        "barcodeImgSrc": "./img/Barcode-simple.png",
+        "barcodeImgAlt": "Barcode image"
       },
       "online": {
         "label": "Type: Online",
@@ -120,7 +158,9 @@
         "expiration": "Offer ends: 1st October 2025",
         "barcodeNumber": "00016221000711490",
         "buttonText": "Redeem now",
-        "buttonLink": "#"
+        "buttonLink": "#",
+        "barcodeImgSrc": "./img/Barcode-simple.png",
+        "barcodeImgAlt": "Barcode image"
       },
       "online": {
         "label": "Type: Online",

package/src/js/page/billie-business-type.js

@@ -3,32 +3,27 @@ var Wick = window.Wick || {};
 Wick.BusinessType = {
   el: {
     radios: 'input[name="businessType"]',
-    panels: '.radio-expanded-content',
-    hiddenClass: 'd-none',
+    panels: '.radio-expanded-content'
   },
 
   refreshPanels() {
     const $radios = $(this.el.radios);
     const $panels = $(this.el.panels);
-    const $checked = $radios.filter(':checked');
+    const selectedValue = $radios.filter(':checked').val();
 
-    $panels.addClass(this.el.hiddenClass);
-    if (!$checked.length) {
-      return;
-    }
-
-    const selectedValue = $checked.val();
-    $(`#${selectedValue}-fields`).removeClass(this.el.hiddenClass);
+    $panels.hide();
+    $(`#${selectedValue}-fields`).show();
   },
 
   bindEvents() {
-    $(document).on('change', this.el.radios, this.refreshPanels.bind(this));
+    $(this.el.radios).on('change', this.refreshPanels.bind(this));
   },
 
   init() {
     if (!$(this.el.radios).length) {
       return;
     }
+
     this.refreshPanels();
     this.bindEvents();
   }

package/src/js/page/checkout-payment-details.js

@@ -14,10 +14,6 @@ Wick.CheckoutPaymentDetails = (function() {
     $placeOrder: $('.checkout-payment-details__place-order'),
     $billingAddress: $('.billing-address'),
     hiddenCardDetailsClass: 'checkout-payment-details__card-details_hidden',
-    $billieBusiness: $('[data-billie-business]'),
-    businessTypeName: '[name="businessType"]',
-    $unregisteredFields: $('#unregistered-fields'),
-    $registeredFields: $('#registered-fields'),
     hiddenClass: 'd-none',
   }
 
@@ -56,36 +52,7 @@ Wick.CheckoutPaymentDetails = (function() {
     })
   }
 
-  function showBillieBusiness() {
-    elements.$billieBusiness.removeClass(elements.hiddenClass);
-  }
-
-  function hideBillieBusiness() {
-    elements.$billieBusiness.addClass(elements.hiddenClass);
-
-    elements.$unregisteredFields
-        .addClass(elements.hiddenClass)
-        .removeAttr('style');
-
-    elements.$registeredFields
-        .addClass(elements.hiddenClass)
-        .removeAttr('style');
-
-    elements.$billieBusiness.find('input[type="radio"]').prop('checked', false);
-    elements.$billieBusiness.find('input.tbx').val('');
-  }
-
-  function toggleBusinessTypeFields(type) {
-    const isUnregistered = type === 'unregistered';
-    const isRegistered = type === 'registered';
-
-    elements.$unregisteredFields.toggleClass(elements.hiddenClass, !isUnregistered);
-    elements.$registeredFields.toggleClass(elements.hiddenClass, !isRegistered);
-  }
-
-
   function changeDetailsBlock(checkedMethod) {
-    if (checkedMethod !== 'billie') hideBillieBusiness();
     switch(checkedMethod) {
       case 'paypal':
         hideCardDetails();
@@ -102,7 +69,6 @@ Wick.CheckoutPaymentDetails = (function() {
           buttonText: 'Pay with Billie'
         }
         changeLabelText(detailsLabel);
-        showBillieBusiness();
         break;
       case 'clearpay':
         detailsLabel = {
@@ -169,16 +135,8 @@ Wick.CheckoutPaymentDetails = (function() {
     elements.$placeOrder.addClass(elements.hiddenClass);
   }
 
-  function initBillieBusinessTypeToggle() {
-    $(document).on('change', elements.businessTypeName, function () {
-      toggleBusinessTypeFields($(this).val());
-    });
-  }
-
   function init() {
     const paymentMethods = getPaymentMethods();
-    initBillieBusinessTypeToggle();
-    hideBillieBusiness();
 
     elements.$wrapperPaymentInput.on('change', elements.paymentInputName, function() {
       const checkedMethod = $(this).val();

package/src/js/page/components/mini-basket-slider.js

@@ -340,6 +340,17 @@ Wick.MiniBasketSliderFE = {
   },
   showNotification: function(data) {
     showNotification(data, Wick.MiniBasketSliderFE.el.notifications);
+
+    Wick.MiniBasketSliderFE.scrollToNotifications();
+  },
+  scrollToNotifications: function() {
+    const $notifications = $(Wick.MiniBasketSliderFE.el.notifications);
+    if (!$notifications.children().length) return;
+
+    const $scrollContainer = $(Wick.MiniBasketSliderFE.el.customSliderWrap);
+    if (!$scrollContainer.length) return;
+
+    $scrollContainer.stop(true, true).animate({ scrollTop: 0 }, 200);
   },
   isMessageExist: isMessageExist,
   getMessageInfo: getMessageInfo,

package/src/page_tradePro_rewards_QR.html

@@ -0,0 +1,65 @@
+{{#extend
+  "my-account-v2"
+  pageClass="page_tradePro-rewards"
+  title="TradePro Rewards"
+  logo-tp=true
+  tradepro-nav=true
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  mainClass="pt-0"
+  dataBreadcrumbs=my_account.tradeProRewards.breadcrumbsDetailsPage
+}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/tradePro-rewards.css">
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+          menu=my_account.tradepro.menu
+          active-index=4
+          page-name=my_account.tradepro.menu.[4].title
+      }}
+    </div>
+  </div>
+</div>
+
+<div class="container top-indent">
+  <div class="row">
+    <div class="col-12">
+      {{#with page_tradePro_vouchers.qr}}
+        <h1 class="text-start">{{title}}</h1>
+        {{> voucher}}
+      {{/with}}
+      {{#extend "accordion" header=page_tradePro_vouchers.terms.title collapsed="accordion_collapsed voucher--terms" hidden="hidden-state"}}
+        {{#content "content"}}{{page_tradePro_vouchers.terms.text}}{{/content}}
+      {{/extend}}
+    </div>
+  </div>
+</div>
+
+{{#extend "cards-slider"
+  title="Other TradePro Rewards"
+  secondary=true
+}}
+  {{#content "cards"}}
+    {{#each page_tradePro_cards.reward_cards}}
+      {{> reward_card
+        modificator="swiper-slide"
+        imgSrc=imgSrc
+        title=title
+        description=description
+        btnText=btnText
+        btnUrl=btnUrl
+      }}
+    {{/each}}
+  {{/content}}
+{{/extend}}
+
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/tradePro-rewards.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/scss/components/_custom-slider.scss

@@ -162,10 +162,12 @@
       width: 100%;
       height: auto;
       max-width: 64px;
+      max-height: 64px;
 
       .product-img {
         width: 100%;
         height: auto;
+        object-fit: contain;
       }
     }
 
@@ -607,6 +609,7 @@
 
       &__image {
         max-width: 94px;
+        max-height: 94px;
       }
     }
 

package/src/scss/pages/tradePro-rewards.scss

@@ -105,8 +105,25 @@ $voucher-cell-height-xl: 296px;
       }
     }
 
+    &__qr-img {
+      width: 183px;
+      height: 183px;
+      margin: auto;
+
+      & > * {
+        width: 100%;
+        height: 100%;
+      }
+
+      @include media-breakpoint-up(md) {
+        width: 166px;
+        height: 166px;
+      }
+    }
+
     &__barcode-number {
-      margin-top: 4px;
+      margin-top: 8px;
+      word-break: break-word;
     }
 
     &__label {

package/src/sitemap.html

@@ -717,6 +717,10 @@
                             <span class="page-id">10.16</span>
                             <a href="page_tradePro_rewards_instoreAndOnline.html" target="_blank">TradePro Rewards In-store & Online</a>
                         </li>
+                        <li>
+                            <span class="page-id"></span>
+                            <a href="page_tradePro_rewards_QR.html" target="_blank">TradePro Rewards QR</a>
+                        </li>
                         <li>
                             <span class="page-id">10.17</span>
                             <a href="page_tradePro_rewards_noInstoreAndOnline.html" target="_blank">TradePro Rewards No barcode & No Online Code Reward</a>