wickes-css2 2.98.0-develop.7 → 2.98.0-develop.9

package/src/components/legal-info.hbs

@@ -1,24 +1,27 @@
-<div class="container">
-  <div class="row">
-    <div class="col-12">
-      <div class="legal-info">
-        <h3 class="legal-info__toggle" data-toggle="collapse" data-target="#collapseInfo" aria-expanded="false" aria-controls="collapseInfo">
-          {{#if customTitle}}
-            {{customTitle}}
-          {{else}}
-            Frequently Asked Questions
-          {{/if}}
-          <span class="icon-wrap"></span>
-        </h3>
-
-        <div class="collapse" id="collapseInfo">
-          <div class="collapse-wrap">
-            <div class="container">
-              {{{page_category-landing.legal-info}}}
-            </div>
-          </div>
+<div class="legal-info container">
+    <div class="row">
+        <div class="col-lg-3"></div>
+        <div class="col-lg-9">
+            <p>
+                Terms and conditions Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+                incididunt ut labore et dolore
+                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+                commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+                pariatur.
+                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                laborum.
+            </p>
+            <p>
+                Terms and conditions Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+                incididunt ut labore et dolore
+                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+                commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+                pariatur.
+                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                laborum.
+            </p>
         </div>
-      </div>
     </div>
-  </div>
-</div>
+</div>

package/src/components/modal.hbs

@@ -1,6 +1,6 @@
 <!-- Bootstrap 4 modal dialog markup https://getbootstrap.com/docs/4.1/components/modal/ -->
 
-<div class="modal modal-box {{#if fullWidth}}modal-box_full{{/if}} {{#if wide}}modal-box_wide{{/if}}{{classMod}}"
+<div class="modal  modal-box {{#if fullWidth}}modal-box_full{{/if}} {{#if wide}}modal-box_wide{{/if}}{{classMod}}"
      id="{{id}}" role="dialog" tabindex="-1" data-backdrop="{{backdrop}}" data-keyboard={{#if keyboard}}{{keyboard}}{{else}}false{{/if}}
 >
   <div class="modal-dialog modal-box__container {{#if centered}}modal-dialog-centered{{/if}}" role="document">
@@ -38,6 +38,9 @@
             {{/block}}
 
           </div>
+          <div class="modal-footer modal-box__footer">
+            {{#block "footer"}}{{/block}}
+          </div>
         </div>
       </div>
     </div>

package/src/components/my-account/active-orders/list-orders.hbs

@@ -4,7 +4,7 @@
   {{/if}}
 
   {{#each orders}}
-    {{> my-account/active-orders/order switch-vat=../switch-vat}}
+    {{> my-account/active-orders/order switch-vat=../switch-vat billieText=../billieText}}
   {{/each}}
 
   {{#if linkText}}

package/src/components/my-account/active-orders/order.hbs

@@ -3,6 +3,8 @@
 
   {{> my-account/active-orders/order-details switch-vat=switch-vat}}
 
+  {{> my-account/active-orders/payment-status}}
+
   {{#if totalConsignments}}
     {{> my-account/active-orders/consignment-info}}
   {{/if}}

package/src/components/my-account/active-orders/payment-status.hbs

@@ -0,0 +1,17 @@
+<div class="payment-status payment-status--{{paymentStatus.status}}">
+  <span class="payment-status__logo">
+    <img class="payments-status__image" src="./img/billie.svg" alt="Billie">
+  </span>
+  <div class="payment-status__content">
+    {{#if paymentStatus.paymentTitle}}
+      <div class="payment-status__title">
+        <span>{{paymentStatus.paymentTitle}}</span>
+      </div>
+    {{/if}}
+    {{#if paymentStatus.paymentText}}
+      <div class="payment-status__text">
+        <span>{{paymentStatus.paymentText}}</span>
+      </div>
+    {{/if}}
+  </div>
+</div>

package/src/components/my-account/payment-status.hbs

@@ -0,0 +1,19 @@
+{{#if paymentStatus}}
+  <div class="payment-status payment-status--{{paymentStatus.status}}">
+    <span class="payment-status__logo">
+      <img class="payments-status__image" src="./img/billie.svg" alt="Billie">
+    </span>
+    <div class="payment-status__content">
+      {{#if paymentStatus.paymentTitle}}
+        <span class="payment-status__title">
+          {{paymentStatus.paymentTitle}}
+        </span>
+      {{/if}}
+      {{#if paymentStatus.paymentText}}
+        <span class="payment-status__text">
+          {{paymentStatus.paymentText}}
+        </span>
+      {{/if}}
+    </div>
+  </div>
+{{/if}}

package/src/components/my-account/saving-totaliser.hbs

@@ -0,0 +1,52 @@
+<div class="saving-totaliser {{#if this-last-year}}saving-totaliser--this-last-year{{/if}} {{#if this-year-only}}saving-totaliser--this-year-only{{/if}} {{#if no-savings}}saving-totaliser--no-savings{{/if}}">
+  <div class="saving-totaliser__title heading-3">Your TradePro savings</div >
+  <div class="saving-totaliser__wrapper">
+    <div class="saving-totaliser__cell">
+      <div class="saving-totaliser__saved">
+        <div class="saving-totaliser__cell-title saving-totaliser__saving-title">Since joining TradePro you've saved</div>
+        <div class="heading-1">{{#if no-savings}}£0.00{{else}}£3,920.37{{/if}}</div>
+      </div>
+      <div class="saving-totaliser__encourage">
+        {{#unless no-savings}}
+          <div>
+            <div class="saving-totaliser__attencion heading-2">Impressive!</div>
+            <div>Continue shopping with us to save even more.</div>
+          </div>
+        {{else}}
+          <div>
+            <div class="saving-totaliser__attencion heading-2">Looks like you've not used your discount yet. </div>
+            <div>Start shopping with us to start your building your TradePro savings.</div>
+            <a href="#" class="btn btn-primary">
+              <span class="btn__text">Explore offers</span>
+            </a>
+          </div>
+        {{/unless}}
+      </div>
+      <div class="saving-totaliser__saving-icon icon">
+        <i class="fas fa-piggy-bank"></i>
+      </div>
+    </div>
+     {{#unless no-savings}}
+      <div class="saving-totaliser__wrapper2">
+        <div class="saving-totaliser__cell">
+          <div class="saving-totaliser__cell-title heading-5">This month</div>
+          <div class="mb-0 heading-3">£18.43</div>
+        </div>
+        <div class="saving-totaliser__cell saving-totaliser__split-cell">
+          <div class="saving-totaliser__semi-cell">
+            <div class="saving-totaliser__cell-title heading-5">This year</div>
+            <div class="mb-0 heading-3">£471.34</div>
+          </div>
+          {{#unless this-year-only}}
+            <div class="saving-totaliser__divider"></div>
+            <div class="saving-totaliser__semi-cell">
+              <div class="saving-totaliser__cell-title heading-5">Last year</div>
+              <div class="mb-0 heading-3">£2,381.10</div>
+            </div>
+          {{/unless}}
+        </div>
+      </div>
+    {{/unless}}
+  </div>
+  <div class="saving-totaliser__note">Savings are calculated from the verification date of your TradePro account and are based on your TradePro Discount for online orders only.</div>
+</div>

package/src/components/order-summary.hbs

@@ -58,6 +58,9 @@
         ></klarna-placement>
       </div>
     {{/if}}
+    {{#if billie-placement}}
+      {{> billie-online-messaging basketStyles=true}}
+    {{/if}}
     {{#if clearpay-placement}}
       {{> clearpay applyMargin=true hasKlarna=true}}
     {{/if}}

package/src/components/payment-loader.hbs

@@ -1,23 +1,61 @@
 <div class="payment-loader {{#if hidden}}payment-loader--hidden{{/if}}">
-    <div class="payment-loader__modal">
-        {{#if paypal-logo}}
-            <div class="paypal-checkout-logo">
-                <img class="paypal-checkout-logo-pp" alt="pp" src="./img/paypal_logo_loader_pp.svg">
-                <img class="paypal-checkout-logo-paypal" alt="paypal" src="./img/paypal_logo_loader_paypal.svg">
-            </div>
-        {{else if klarna-logo}}
-            <div class="klarna-checkout-logo">
-                <div class="klarna-spinner-logo"></div>
-            </div>
-        {{else if google-logo}}
-            <div class="google-checkout-logo">
-              <div class="google-spinner-logo"></div>
-            </div>
-        {{else if clearpay-logo}}
-          <div class="clearpay-checkout-logo">
-            <div class="clearpay-spinner-logo"></div>
-          </div>
-        {{/if}}
-        <div class="spinner {{#if klarna-logo}}klarna-spinner{{/if}}"></div>
-    </div>
+  <div class="payment-loader__modal">
+  {{#if spinnerTypes}}
+    {{#each spinnerTypes}}
+      {{#if (eq this "paypal-logo")}}
+        <div class="paypal-checkout-logo">
+          <img class="paypal-checkout-logo-pp" alt="pp" src="./img/paypal_logo_loader_pp.svg">
+          <img class="paypal-checkout-logo-paypal" alt="paypal" src="./img/paypal_logo_loader_paypal.svg">
+        </div>
+      {{else if (eq this "klarna-logo")}}
+        <div class="klarna-checkout-logo">
+          <div class="klarna-spinner-logo"></div>
+        </div>
+
+      {{else if (eq this "google-logo")}}
+        <div class="google-checkout-logo">
+          <div class="google-spinner-logo"></div>
+        </div>
+
+      {{else if (eq this "clearpay-logo")}}
+        <div class="clearpay-checkout-logo">
+          <div class="clearpay-spinner-logo"></div>
+        </div>
+
+      {{else if (eq this "billie-logo")}}
+        <div class="billie-checkout-logo">
+          <div class="billie-spinner-logo"></div>
+        </div>
+      {{/if}}
+    {{/each}}
+  {{else}}
+    {{#if paypal-logo}}
+      <div class="paypal-checkout-logo">
+        <img class="paypal-checkout-logo-pp" alt="pp" src="./img/paypal_logo_loader_pp.svg">
+        <img class="paypal-checkout-logo-paypal" alt="paypal" src="./img/paypal_logo_loader_paypal.svg">
+      </div>
+    {{/if}}
+    {{#if klarna-logo}}
+      <div class="klarna-checkout-logo">
+        <div class="klarna-spinner-logo"></div>
+      </div>
+    {{/if}}
+    {{#if google-logo}}
+      <div class="google-checkout-logo">
+        <div class="google-spinner-logo"></div>
+      </div>
+    {{/if}}
+    {{#if clearpay-logo}}
+      <div class="clearpay-checkout-logo">
+        <div class="clearpay-spinner-logo"></div>
+      </div>
+    {{/if}}
+    {{#if billie-logo}}
+      <div class="billie-checkout-logo">
+        <div class="billie-spinner-logo"></div>
+      </div>
+    {{/if}}
+  {{/if}}
+    <div class="spinner {{#if klarna-logo}}klarna-spinner{{/if}}"></div>
+  </div>
 </div>

package/src/components/payments-checkout-v2.hbs

@@ -1,14 +1,20 @@
 <div class="payments-checkout">
   <p class="payments-checkout__title">Ways to Pay</p>
   <ul class="payments-checkout__list">
-    <li class="payments-checkout__item">
-      <span class="payments-checkout-klarna">
+    {{#if billieIcon}}
+      <li class="payments-checkout__item">
+        <img class="payments-checkout__image" src="./img/payment/footer/billie.svg" alt="Billie">
+      </li>
+    {{else}}
+      <li class="payments-checkout__item">
+        <span class="payments-checkout-klarna">
           <klarna-placement
-            data-key="sidebar-promotion-auto-size"
-            data-locale="en-GB"
+              data-key="sidebar-promotion-auto-size"
+              data-locale="en-GB"
           ></klarna-placement>
-      </span>
-    </li>
+        </span>
+      </li>
+    {{/if}}
     {{#each payments-checkout-list}}
       <li class="payments-checkout__item">
         <img class="payments-checkout__image" src="{{src}}" alt="{{payment}}">

package/src/components/payments-checkout.hbs

@@ -1,5 +1,10 @@
 <div class="payments-checkout">
     <ul class="payments-checkout__list">
+      {{#if billieIcon}}
+        <li class="payments-checkout__item">
+          <img class="payments-checkout__image" src="./img/payment/checkout/billie.svg" alt="billie">
+        </li>
+      {{else}}
         <li class="payments-checkout__item">
             <span class="payments-checkout-klarna">
                 <klarna-placement
@@ -8,6 +13,7 @@
                 ></klarna-placement>
             </span>
         </li>
+      {{/if}}
         {{#if clearPayIcon}}
           <li class="payments-checkout__item">
             <img class="payments-checkout__image" src="./img/payment/checkout/clearpay.svg" alt="clearpay">

package/src/components/payments.hbs

@@ -1,14 +1,20 @@
 <div class="payways">
   <p class="payways__title">Ways to Pay</p>
   <ul class="payways__list">
-    <li class="payways__item">
+    {{#if billieIcon}}
+      <li class="payways__item">
+        <img class="payways__image" src="./img/payment/footer/billie.svg" alt="Billie">
+      </li>
+    {{else}}
+      <li class="payways__item">
       <span class="payways-klarna">
           <klarna-placement
-            data-key="sidebar-promotion-auto-size"
-            data-locale="en-GB"
+              data-key="sidebar-promotion-auto-size"
+              data-locale="en-GB"
           ></klarna-placement>
       </span>
-    </li>
+      </li>
+    {{/if}}
     {{#each payments-list}}
       <li class="payways__item">
         <img class="payways__image" src="{{src}}" alt="{{payment}}">

package/src/components/pdp-price-actions.hbs

@@ -83,4 +83,4 @@
     <span class="btn__text">Order Paint Mix</span>
   </button>
 </div>
-{{/if}}
+{{/if}}

package/src/components/price-block-v2.hbs

@@ -116,16 +116,21 @@
                 </div>
             {{/if}}
             {{#if klarna-placement}}
-                <div class="pdp-price__klarna-payment">
-                    <klarna-placement
-                        data-key="credit-promotion-badge"
-                        data-locale="en-GB"
-                        data-purchase-amount="12000"
-                    ></klarna-placement>
-                </div>
+              <div class="pdp-price__klarna-payment">
+                <klarna-placement
+                    data-key="credit-promotion-badge"
+                    data-locale="en-GB"
+                    data-purchase-amount="12000"
+                ></klarna-placement>
+              </div>
+            {{/if}}
+            {{#if billie-placement}}
+            <div class="pdp-price__billie-payment">
+              {{> billie-online-messaging}}
+            </div>
             {{/if}}
             {{#if clearpay-placement}}
-                {{> clearpay}}
+              {{> clearpay}}
             {{/if}}
         </div>
         {{#if currentlyInStock}}
@@ -194,6 +199,7 @@
                         big-wins=big-wins
                         wisdom=wisdom
                         mcfc=mcfc
+                        paint-mix=true
                         available=available
                         stock-accordion="stock-accordion"
                         isUserNonRegistered=isUserNonRegistered

package/src/components/track-my-order-info.hbs

@@ -1,7 +1,9 @@
 <div class="order-info">
   <h3 class="order-info__toggle" data-toggle="collapse" data-target="#collapseInfo" aria-expanded="false" aria-controls="collapseInfo">
     {{title}}
-    <span class="icon-wrap"></span>
+    <span class="icon-wrap">
+      <i class="fas fa-plus icon"></i>
+    </span>
   </h3>
 
   <div class="collapse" id="collapseInfo">

package/src/components/wismo-payment.hbs

@@ -37,6 +37,22 @@
             </div>
           </div>
       {{/each}}
+    {{else if payment-billie}}
+      {{#each wismo-order-payment-billie.items}}
+        {{#if this.isPaymentStatus}}
+          <div class="wrap-item">
+            <div class="wrap-item__name">{{{this.name}}}</div>
+            <div class="wrap-item__value">
+              {{> my-account/payment-status paymentStatus=this.paymentStatus}}
+            </div>
+          </div>
+        {{else}}
+          <div class="wrap-item">
+            <div class="wrap-item__name">{{{this.name}}}</div>
+            <div class="wrap-item__value">{{{this.value}}}</div>
+          </div>
+        {{/if}}
+      {{/each}}
     {{else if payment-clearpay}}
       {{#each wismo-order-payment-clearpay.items}}
         <div class="wrap-item">

package/src/data/data_confirmation-summary.json

@@ -2,12 +2,12 @@
   "confirmation-summary": {
     "info": [
       {
-        "title": "Items subtotal:",
+        "title": "Items Subtotal:",
         "value": "£44.44",
         "mod": "bold"
       },
       {
-        "title": "VAT:",
+        "title": "Includes VAT:",
         "value": "£71.66",
         "mod": "vat"
       },
@@ -21,7 +21,7 @@
         "mod": "delivery"
       },
       {
-        "title": "Charity donation:",
+        "title": "Young Minds donation:",
         "value": "£1.00"
       }
     ],

package/src/data/data_latest-offers.json

@@ -2409,4 +2409,4 @@
       ]
     }
   }
-}
+}

package/src/data/data_mini-basket.json

@@ -11,8 +11,7 @@
         "price": "£2,009.00",
         "incVatPrice": "£30.00",
         "excVatPrice": "£10.00",
-        "lower-quantity": true,
-        "CC": "East Grinstead"
+        "lower-quantity": true
       },
       {
         "quantity": {
@@ -32,77 +31,9 @@
         "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim",
         "src": "img/placeholders/[e-img-4to3].jpg",
         "price": "£2,009.00",
-        "incVatPrice": "£309.00",
-        "excVatPrice": "£109.00",
-        "bad-amount": true
-      },
-      {
-        "quantity": {
-          "value": "1"
-        },
-        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim",
-        "src": "img/placeholders/tap.jpg",
-        "price": "£2,009.00",
-        "incVatPrice": "£30.00",
-        "excVatPrice": "£10.00",
-        "lower-quantity": true,
-        "CC": "East Grinstead"
-      },
-      {
-        "quantity": {
-          "value": "1"
-        },
-        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim",
-        "src": "img/placeholders/[e-img-4to3].jpg",
-        "price": "£2,009.00",
-        "incVatPrice": "£309.00",
-        "excVatPrice": "£109.00",
-        "bad-amount": true
-      },
-      {
-        "quantity": {
-          "value": "1"
-        },
-        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim",
-        "src": "img/placeholders/[e-img-4to3].jpg",
-        "price": "£2,009.00",
-        "incVatPrice": "£309.00",
-        "excVatPrice": "£109.00",
-        "bad-amount": true
-      },
-      {
-        "quantity": {
-          "value": "1"
-        },
-        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim",
-        "src": "img/placeholders/tap.jpg",
-        "price": "£2,009.00",
-        "incVatPrice": "£30.00",
-        "excVatPrice": "£10.00",
-        "lower-quantity": true,
-        "CC": "East Grinstead"
-      },
-      {
-        "quantity": {
-          "value": "1"
-        },
-        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim",
-        "src": "img/placeholders/[e-img-4to3].jpg",
-        "price": "£2,009.00",
-        "incVatPrice": "£309.00",
-        "excVatPrice": "£109.00",
-        "bad-amount": true
-      },
-      {
-        "quantity": {
-          "value": "1"
-        },
-        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim",
-        "src": "img/placeholders/[e-img-4to3].jpg",
-        "price": "£2,009.00",
-        "incVatPrice": "£309.00",
-        "excVatPrice": "£109.00",
-        "bad-amount": true
+        "incVatPrice": "£3,009.00",
+        "excVatPrice": "£1,009.00",
+        "basket-product": true
       }
     ],
     "just-added": [
@@ -117,11 +48,6 @@
         "excVatPrice": "£1,009.00",
         "basket-product": true
       }
-    ],
-    "total": {
-      "totalPrice": {
-        "formattedValue": "£17.50"
-      }
-    }
+    ]
   }
-}
+}

package/src/data/data_page-category.json

@@ -217,7 +217,6 @@
           }
         ]
       }
-    ],
-    "legal-info": "<p>Our selection of toilets is crafted to suit a wide range of <a href=\"https://www.wickes.co.uk/bathroom/suites\">bathroom suites</a>, from compact cloakrooms to spacious bathrooms. With our large selection, you’ll easily find a solution for both modern and traditional spaces. Each toilet is built for efficiency and easy maintenance, helping you achieve a stylish, functional bathroom with a range of finishes and shapes.</p>\n<h3>FAQs</h3>\n<h4>What are the different types of toilets?</h4>\n<p>Different toilet types include close-coupled, back-to-wall, rimless, wall-hung, and <a href=\"https://www.wickes.co.uk/Products/Bathrooms/Toilets+Accessories/Low+High-Level-Toilets/c/1000359\">high and low-level toilets</a>. Each has unique installation and style benefits, suitable for various bathroom sizes and styles.</p>\n<h4>What toilets suit a modern bathroom?</h4>\n<p>Rimless, wall-hung and <a href=\"https://www.wickes.co.uk/Products/Bathrooms/Toilets+Accessories/Back-to-Wall-Toilets/c/1000282\">back-to-wall toilets</a> fit well in modern bathrooms. Their sleek designs and efficient features offer a clean, contemporary look.</p>\n<h4>What toilets look best in a traditional bathroom?</h4>\n<p>High-level and low-level toilets are popular in traditional designs, adding elegance and classic style with vintage-inspired cisterns and details.</p>"
+    ]
   }
 }

package/src/data/data_page-merge-basket.json

@@ -110,7 +110,7 @@
         "energyEfficiency": {
           "type": "Old",
           "rating": "C",
-          "linkProduct": "https://media.wickes.co.uk/image/upload/v1676542815/documents/wickes/Product-Info-Example_qj5mln.pdf"
+          "linkProduct": "https://media.wickes.co.uk/image/upload/v1676542815/documents/wickes/Product-Info-Example_qj5mln.pdf",
         }
       },
       {

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

@@ -1145,6 +1145,57 @@
         }
       }
     },
+    "charityDonationNew": {
+      "title": "Charity Donation",
+      "checkoutOrder": {
+        "charity": {
+          "title": "Would you like to make a donation to our chosen charity, Campaign Against Living Miserably (CALM)?",
+          "descr": "All charity donations are non-refundable.",
+          "message": "For more information about our charity partner",
+          "subLink": "https://www.wickes.co.uk/the-brain-tumour-charity",
+          "total": "Total",
+          "img": "img/calm-primary-logo.png",
+          "price": "£1",
+          "options": [
+            {
+              "title": "£1",
+              "value": "1",
+              "active": false
+            },
+            {
+              "title": "£3",
+              "value": "3",
+              "active": false
+            },
+            {
+              "title": "£5",
+              "value": "5",
+              "active": true
+            },
+            {
+              "title": "£10",
+              "value": "10",
+              "active": false
+            },
+            {
+              "title": "£15",
+              "value": "15",
+              "active": false
+            },
+            {
+              "title": "£50",
+              "value": "50",
+              "active": false
+            },
+            {
+              "title": "£100",
+              "value": "100",
+              "active": false
+            }
+          ]
+        }
+      }
+    },
     "charityDonationMultiple": {
       "title": "Charity Donation",
       "img": "img/young-minds-long.png",