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

package/build/css/pages/tradePro-rewards.css

@@ -1 +1 @@
-.modal-barcode .modal-box__container{padding:0}.modal-barcode .modal-box__container .barcode{width:100%}.modal-barcode .modal-box__container .barcode-wrap{height:100%;display:flex;justify-content:center;align-items:center;padding:40px;background:#fff}.modal-barcode .modal-box__container .barcode__discount{right:2.5rem}.modal-barcode .modal-box__container .barcode__container{padding:0}.modal-barcode .modal-box__container .barcode__container svg{height:100%;padding:15px 0}.modal-barcode .modal-box__container .barcode__footer{bottom:5px}.modal-barcode .modal-box__container .barcode__footer_text{margin-top:5px}.modal-barcode-targeted .barcode__header-info,.modal-barcode-targeted .barcode__header-title{text-align:center}.modal-barcode-targeted .barcode__header-title{font-weight:500;margin-bottom:5px}.rotation-wrap{position:absolute;bottom:15px}.rotation-wrap .phone{height:50px;width:100px;margin:40px auto 0;border:3px solid #0277bd;border-radius:10px;animation:1.5s ease-in-out infinite alternate rotate}.rotation-wrap .message{text-align:center;color:#cf000f;font-size:1em;margin-top:40px}.barcode-wrap{margin:0 auto;padding:15px;border:1px solid #ccc;position:relative}.barcode-wrap .icon svg{color:#8b8b8b;width:1rem;height:1rem}.barcode__header_name{font-weight:500;text-transform:capitalize}.barcode__container{padding:15px 0}.barcode__container svg{width:100%}.barcode__footer{text-align:center;position:relative}.barcode__footer_expand{display:none;text-align:center;font-weight:400;margin-top:10px}.barcode__footer_expand .icon svg{color:#0277bd}.barcode__discount{position:absolute;top:0;right:0}@keyframes rotate{0%{transform:rotate(0)}50%,to{transform:rotate(-90deg)}}@media (min-width:768px){.rotation-wrap{display:none}.page_tradePro-discount .modal-box_full,.page_tradePro-rewards .modal-box_full{background:#fff}.page_tradePro-discount .modal-box_full .modal-box__columns,.page_tradePro-discount .modal-box_full .modal-box__container,.page_tradePro-discount .modal-box_full .modal-box__content,.page_tradePro-discount .modal-box_full .modal-box__row,.page_tradePro-rewards .modal-box_full .modal-box__columns,.page_tradePro-rewards .modal-box_full .modal-box__container,.page_tradePro-rewards .modal-box_full .modal-box__content,.page_tradePro-rewards .modal-box_full .modal-box__row{height:100%}.page_tradePro-discount .modal-box_full .modal-box__container,.page_tradePro-rewards .modal-box_full .modal-box__container{margin-top:0;margin-bottom:0;max-width:none}.page_tradePro-discount .modal-box_full .modal-box__content,.page_tradePro-rewards .modal-box_full .modal-box__content{width:auto;box-shadow:none}.page_tradePro-discount .modal-box_full .modal-box__inner-row,.page_tradePro-rewards .modal-box_full .modal-box__inner-row{display:flex;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.page_tradePro-discount .modal-box__columns,.page_tradePro-rewards .modal-box__columns{flex:0 0 100%;max-width:100%}}@media (max-width:767.98px){.barcode-wrap{font-size:1rem}.barcode__footer_expand{display:block}.modal-barcode .barcode__footer_expand{display:none}}@media only screen and (orientation:landscape){.rotation-wrap{display:none}.modal-barcode .modal-box__container .barcode__container svg{height:60vh;padding:0}}@media only screen and (orientation:portrait){.modal-barcode .modal-box__container .barcode-wrap{align-items:inherit}}.text-start{text-align:left}.page_tradePro-rewards .voucher__grid{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[1];grid-template-columns:repeat(1,1fr);-ms-grid-rows:auto;grid-template-rows:auto;grid-auto-flow:dense;gap:16px}.page_tradePro-rewards .voucher__cell{border-radius:.25rem}.page_tradePro-rewards .voucher__cell:not(.voucher__description){min-height:240px}.page_tradePro-rewards .voucher__column{grid-area:auto;text-align:center}.page_tradePro-rewards .voucher__column .voucher__cell{border:1px solid #ccc;overflow:hidden}.page_tradePro-rewards .voucher__column .voucher__cell:first-child{margin-bottom:16px}.page_tradePro-rewards .voucher__image-wrap{height:100%}.page_tradePro-rewards .voucher__image-wrap img{width:100%;height:auto}.page_tradePro-rewards .voucher__barcode-img{width:311px;height:78px;margin:auto}.page_tradePro-rewards .voucher__barcode-img>*{width:100%;height:100%}@media (min-width:992px){.page_tradePro-rewards .voucher__grid{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr);-ms-grid-rows:246px;grid-template-rows:246px;gap:24px}.page_tradePro-rewards .voucher__cell:not(.voucher__description){min-height:246px}.page_tradePro-rewards .voucher__column{-ms-grid-row:1;-ms-grid-row-span:2;-ms-grid-column:2;-ms-grid-column-span:1;grid-area:1/2/3/3}.page_tradePro-rewards .voucher__column .voucher__cell:first-child{margin-bottom:24px}.page_tradePro-rewards .voucher__image-wrap img{width:auto;height:100%}.page_tradePro-rewards .voucher__barcode-img{width:261px;height:66px}}@media (min-width:1200px){.page_tradePro-rewards .voucher__grid{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr);-ms-grid-rows:296px;grid-template-rows:296px;gap:24px}.page_tradePro-rewards .voucher__cell:not(.voucher__description){min-height:296px}.page_tradePro-rewards .voucher__barcode-img{width:450px;height:114px}}.page_tradePro-rewards .voucher__barcode-number{margin-top:4px}.page_tradePro-rewards .voucher__label{background:#0a3055;color:#fff;display:block;padding:4px;font-size:.75rem;font-weight:500}.page_tradePro-rewards .voucher__code-field{display:inline-block;padding:8px 16px;background:#f4f9fe;border-radius:.25rem;cursor:pointer}.page_tradePro-rewards .voucher__code-field input{background:0 0;border:0;width:90px;pointer-events:none}.page_tradePro-rewards .voucher__code-field .icon{color:#0277bd}.page_tradePro-rewards .voucher__code-title{margin-right:8px;font-weight:700}.page_tradePro-rewards .voucher__description-title{font-weight:700;font-size:1rem}.page_tradePro-rewards .voucher__description-text{font-weight:400;font-size:.875rem}.page_tradePro-rewards .voucher__description-button{margin-top:16px}.page_tradePro-rewards .voucher__content{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;padding:24px 16px}.page_tradePro-rewards .voucher--terms{padding:24px 0 16px}@media (min-width:768px){.page_tradePro-rewards .voucher__content{padding:24px}}
+.modal-barcode .modal-box__container{padding:0}.modal-barcode .modal-box__container .barcode{width:100%}.modal-barcode .modal-box__container .barcode-wrap{height:100%;display:flex;justify-content:center;align-items:center;padding:40px;background:#fff}.modal-barcode .modal-box__container .barcode__discount{right:2.5rem}.modal-barcode .modal-box__container .barcode__container{padding:0}.modal-barcode .modal-box__container .barcode__container svg{height:100%;padding:15px 0}.modal-barcode .modal-box__container .barcode__footer{bottom:5px}.modal-barcode .modal-box__container .barcode__footer_text{margin-top:5px}.modal-barcode-targeted .barcode__header-info,.modal-barcode-targeted .barcode__header-title{text-align:center}.modal-barcode-targeted .barcode__header-title{font-weight:500;margin-bottom:5px}.rotation-wrap{position:absolute;bottom:15px}.rotation-wrap .phone{height:50px;width:100px;margin:40px auto 0;border:3px solid #0277bd;border-radius:10px;animation:1.5s ease-in-out infinite alternate rotate}.rotation-wrap .message{text-align:center;color:#cf000f;font-size:1em;margin-top:40px}.barcode-wrap{margin:0 auto;padding:15px;border:1px solid #ccc;position:relative}.barcode-wrap .icon svg{color:#8b8b8b;width:1rem;height:1rem}.barcode__header_name{font-weight:500;text-transform:capitalize}.barcode__container{padding:15px 0}.barcode__container svg{width:100%}.barcode__footer{text-align:center;position:relative}.barcode__footer_expand{display:none;text-align:center;font-weight:400;margin-top:10px}.barcode__footer_expand .icon svg{color:#0277bd}.barcode__discount{position:absolute;top:0;right:0}@keyframes rotate{0%{transform:rotate(0)}50%,to{transform:rotate(-90deg)}}@media (min-width:768px){.rotation-wrap{display:none}.page_tradePro-discount .modal-box_full,.page_tradePro-rewards .modal-box_full{background:#fff}.page_tradePro-discount .modal-box_full .modal-box__columns,.page_tradePro-discount .modal-box_full .modal-box__container,.page_tradePro-discount .modal-box_full .modal-box__content,.page_tradePro-discount .modal-box_full .modal-box__row,.page_tradePro-rewards .modal-box_full .modal-box__columns,.page_tradePro-rewards .modal-box_full .modal-box__container,.page_tradePro-rewards .modal-box_full .modal-box__content,.page_tradePro-rewards .modal-box_full .modal-box__row{height:100%}.page_tradePro-discount .modal-box_full .modal-box__container,.page_tradePro-rewards .modal-box_full .modal-box__container{margin-top:0;margin-bottom:0;max-width:none}.page_tradePro-discount .modal-box_full .modal-box__content,.page_tradePro-rewards .modal-box_full .modal-box__content{width:auto;box-shadow:none}.page_tradePro-discount .modal-box_full .modal-box__inner-row,.page_tradePro-rewards .modal-box_full .modal-box__inner-row{display:flex;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.page_tradePro-discount .modal-box__columns,.page_tradePro-rewards .modal-box__columns{flex:0 0 100%;max-width:100%}}@media (max-width:767.98px){.barcode-wrap{font-size:1rem}.barcode__footer_expand{display:block}.modal-barcode .barcode__footer_expand{display:none}}@media only screen and (orientation:landscape){.rotation-wrap{display:none}.modal-barcode .modal-box__container .barcode__container svg{height:60vh;padding:0}}@media only screen and (orientation:portrait){.modal-barcode .modal-box__container .barcode-wrap{align-items:inherit}}.text-start{text-align:left}.page_tradePro-rewards .voucher__grid{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[1];grid-template-columns:repeat(1,1fr);-ms-grid-rows:auto;grid-template-rows:auto;grid-auto-flow:dense;gap:16px}.page_tradePro-rewards .voucher__cell{border-radius:.25rem}.page_tradePro-rewards .voucher__cell:not(.voucher__description){min-height:240px}.page_tradePro-rewards .voucher__column{grid-area:auto;text-align:center}.page_tradePro-rewards .voucher__column .voucher__cell{border:1px solid #ccc;overflow:hidden}.page_tradePro-rewards .voucher__column .voucher__cell:first-child{margin-bottom:16px}.page_tradePro-rewards .voucher__image-wrap{height:100%}.page_tradePro-rewards .voucher__image-wrap img{width:100%;height:auto}.page_tradePro-rewards .voucher__barcode-img{width:311px;height:78px;margin:auto}.page_tradePro-rewards .voucher__barcode-img>*{width:100%;height:100%}@media (min-width:992px){.page_tradePro-rewards .voucher__grid{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr);-ms-grid-rows:246px;grid-template-rows:246px;gap:24px}.page_tradePro-rewards .voucher__cell:not(.voucher__description){min-height:246px}.page_tradePro-rewards .voucher__column{-ms-grid-row:1;-ms-grid-row-span:2;-ms-grid-column:2;-ms-grid-column-span:1;grid-area:1/2/3/3}.page_tradePro-rewards .voucher__column .voucher__cell:first-child{margin-bottom:24px}.page_tradePro-rewards .voucher__image-wrap img{width:auto;height:100%}.page_tradePro-rewards .voucher__barcode-img{width:261px;height:66px}}@media (min-width:1200px){.page_tradePro-rewards .voucher__grid{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr);-ms-grid-rows:296px;grid-template-rows:296px;gap:24px}.page_tradePro-rewards .voucher__cell:not(.voucher__description){min-height:296px}.page_tradePro-rewards .voucher__barcode-img{width:450px;height:114px}}.page_tradePro-rewards .voucher__qr-img{width:183px;height:183px;margin:auto}.page_tradePro-rewards .voucher__qr-img>*{width:100%;height:100%}.page_tradePro-rewards .voucher__barcode-number{margin-top:8px;word-break:break-word}.page_tradePro-rewards .voucher__label{background:#0a3055;color:#fff;display:block;padding:4px;font-size:.75rem;font-weight:500}.page_tradePro-rewards .voucher__code-field{display:inline-block;padding:8px 16px;background:#f4f9fe;border-radius:.25rem;cursor:pointer}.page_tradePro-rewards .voucher__code-field input{background:0 0;border:0;width:90px;pointer-events:none}.page_tradePro-rewards .voucher__code-field .icon{color:#0277bd}.page_tradePro-rewards .voucher__code-title{margin-right:8px;font-weight:700}.page_tradePro-rewards .voucher__description-title{font-weight:700;font-size:1rem}.page_tradePro-rewards .voucher__description-text{font-weight:400;font-size:.875rem}.page_tradePro-rewards .voucher__description-button{margin-top:16px}.page_tradePro-rewards .voucher__content{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;padding:24px 16px}.page_tradePro-rewards .voucher--terms{padding:24px 0 16px}@media (min-width:768px){.page_tradePro-rewards .voucher__qr-img{width:166px;height:166px}.page_tradePro-rewards .voucher__content{padding:24px}}

package/build/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/build/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.103.0-develop.13",
+  "version": "2.103.0-develop.14",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {
@@ -123,7 +123,7 @@
     "branches": [
       "alt-master",
       {
-        "name": "custom-tag/RG-1805-the-select-your-business-type-block-is-displayed-when-credit-card-payment",
+        "name": "develop",
         "prerelease": "${name.replace(/^custom-tag\\//g, '')}"
       }
     ],

package/src/components/address-billie.hbs

@@ -1,44 +1,42 @@
-<div class="d-none" data-billie-business>
-  <div class="form-row radio-group" data-row-required>
-    <label class="form-row__label form-row__label_required">
-      Select your business type
-    </label>
+<div class="form-row radio-group" data-row-required>
+  <label class="form-row__label form-row__label_required">
+    Select your business type
+  </label>
 
-    <div class="form-row">
-      <div class="form-row__field">
-        {{> radiobutton
-            id="businessTypeUnregistered"
-            name="businessType"
-            value="unregistered"
-            label="Unregistered Sole Trader / Business"}}
-      </div>
-    </div>
-    <div class="form-row">
-      <div class="form-row__field">
-        {{> radiobutton
-            id="businessTypeRegistered"
-            name="businessType"
-            value="registered"
-            labelClass="registered-label"
-            label="Registered Sole Trader / Business"
-            tooltip="A Registered Business is one that has undergone the official process of being recognised and registered with Companies House, establishing its legal identity and enabling it to operate within a specific jurisdiction, such as a limited company. A Registered Business will have been issued a Company Registration Number (CRN) from Companies House."}}
-      </div>
+  <div class="form-row">
+    <div class="form-row__field">
+      {{> radiobutton
+          id="businessTypeUnregistered"
+          name="businessType"
+          value="unregistered"
+          label="Unregistered Sole Trader / Business"}}
     </div>
   </div>
-  <div
-      id="unregistered-fields"
-      class="radio-expanded-content d-none"
-  >
-    {{> form-row id="first-name"  label="First name"  required="true" row-mod="first-name"}}
-    {{> form-row id="last-name"   label="Last name"   required="true" row-mod="last-name"}}
-    {{> form-row id="business-name" label="Business name" required="true" row-mod="unregistered-business"}}
+  <div class="form-row">
+    <div class="form-row__field">
+      {{> radiobutton
+          id="businessTypeRegistered"
+          name="businessType"
+          value="registered"
+          labelClass="registered-label"
+          label="Registered Sole Trader / Business"
+          tooltip="A Registered Business is one that has undergone the official process of being recognised and registered with Companies House, establishing its legal identity and enabling it to operate within a specific jurisdiction, such as a limited company. A Registered Business will have been issued a Company Registration Number (CRN) from Companies House."}}
+    </div>
   </div>
+</div>
+<div
+    id="unregistered-fields"
+    class="radio-expanded-content"
+>
+  {{> form-row id="first-name"  label="First name"  required="true" row-mod="first-name"}}
+  {{> form-row id="last-name"   label="Last name"   required="true" row-mod="last-name"}}
+  {{> form-row id="business-name" label="Business name" required="true" row-mod="unregistered-business"}}
+</div>
 
-  <div
-      id="registered-fields"
-      class="radio-expanded-content d-none"
-  >
-    {{> form-row id="business-name-2" label="Business name" required="true" row-mod="registered-business"}}
-    {{> form-row id="company-reg-number" label="Company registration number" row-mod="reg-number"}}
-  </div>
+<div
+    id="registered-fields"
+    class="radio-expanded-content"
+>
+  {{> form-row id="business-name-2" label="Business name" required="true" row-mod="registered-business"}}
+  {{> form-row id="company-reg-number" label="Company registration number" row-mod="reg-number"}}
 </div>

package/src/components/checkout-edit-billing-address.hbs

@@ -23,7 +23,9 @@
 
     <div class="address-postcode">
       {{> address-postcode-look-up}}
-      {{> address-billie}}
+      {{#if billie-form}}
+        {{> address-billie}}
+      {{/if}}
     </div>
 
     {{#unless no-set-card}}

package/src/components/voucher.hbs

@@ -52,8 +52,8 @@
               </div>
               <div class="mt-3">
                 <div class="voucher__code-title mb-2">Code:</div>
-                <div class="voucher__barcode-img">
-                  <svg id="barcode" jsbarcode-value="00010931000118010" jsbarcode-width="3" jsbarcode-height="119" jsbarcode-displayvalue="false" jsbarcode-margin="0" width="435px" height="119px" x="0px" y="0px" viewBox="0 0 435 119" xmlns="http://www.w3.org/2000/svg" version="1.1" style="transform: translate(0px, 0px);"><rect x="0" y="0" width="435" height="119" style="fill:#ffffff;"></rect><g transform="translate(0, 0)" style="fill:#000000;"><rect x="0" y="0" width="6" height="119"></rect><rect x="9" y="0" width="3" height="119"></rect><rect x="18" y="0" width="9" height="119"></rect><rect x="33" y="0" width="6" height="119"></rect><rect x="42" y="0" width="6" height="119"></rect><rect x="54" y="0" width="6" height="119"></rect><rect x="66" y="0" width="6" height="119"></rect><rect x="78" y="0" width="6" height="119"></rect><rect x="87" y="0" width="6" height="119"></rect><rect x="99" y="0" width="6" height="119"></rect><rect x="111" y="0" width="3" height="119"></rect><rect x="120" y="0" width="3" height="119"></rect><rect x="132" y="0" width="6" height="119"></rect><rect x="141" y="0" width="6" height="119"></rect><rect x="156" y="0" width="6" height="119"></rect><rect x="165" y="0" width="6" height="119"></rect><rect x="174" y="0" width="6" height="119"></rect><rect x="186" y="0" width="6" height="119"></rect><rect x="198" y="0" width="6" height="119"></rect><rect x="210" y="0" width="6" height="119"></rect><rect x="219" y="0" width="6" height="119"></rect><rect x="231" y="0" width="6" height="119"></rect><rect x="243" y="0" width="9" height="119"></rect><rect x="258" y="0" width="3" height="119"></rect><rect x="264" y="0" width="6" height="119"></rect><rect x="276" y="0" width="6" height="119"></rect><rect x="285" y="0" width="6" height="119"></rect><rect x="297" y="0" width="9" height="119"></rect><rect x="309" y="0" width="3" height="119"></rect><rect x="315" y="0" width="12" height="119"></rect><rect x="330" y="0" width="3" height="119"></rect><rect x="339" y="0" width="9" height="119"></rect><rect x="351" y="0" width="6" height="119"></rect><rect x="363" y="0" width="9" height="119"></rect><rect x="378" y="0" width="3" height="119"></rect><rect x="384" y="0" width="6" height="119"></rect><rect x="396" y="0" width="6" height="119"></rect><rect x="411" y="0" width="9" height="119"></rect><rect x="423" y="0" width="3" height="119"></rect><rect x="429" y="0" width="6" height="119"></rect></g></svg>
+                <div class="{{#if instore.isQR}}voucher__qr-img{{else}}voucher__barcode-img{{/if}}">
+                  <img src="{{instore.barcodeImgSrc}}" alt="{{instore.barcodeImgAlt}}">
                 </div>
                 <div class="voucher__barcode-number mb-3">{{instore.barcodeNumber}}</div>
                 {{#ifCond instore.buttonLink "&&" instore.buttonText}}

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/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/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>