wickes-css2 2.98.0-billie.4 → 2.98.0-develop.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.98.0-billie.4",
+  "version": "2.98.0-develop.1",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {
@@ -108,7 +108,15 @@
     "branches": [
       "alt-master",
       {
-        "name": "custom-tag/billie",
+        "name": "develop",
+        "prerelease": true
+      },
+      {
+        "name": "preprod",
+        "prerelease": true
+      },
+      {
+        "name": "custom-tag/*",
         "prerelease": "${name.replace(/^custom-tag\\//g, '')}"
       }
     ],

package/src/components/address-postcode-look-up.hbs

@@ -3,9 +3,9 @@
         {{> form-row id="first-line-address" label="Type first line of the address" required="true"}}
     </div>
     <div>
-        {{> form-row id="address-line-1" label="Address line 1" required="true" info="Eg house number/name, street name"}}
+        {{> form-row id="address-line-1" label="Address line 1" required="true"}}
         {{> form-row id="address-line-2" label="Address line 2"}}
-        {{> form-row id="town-city" label="Town/City" required="true"}}
+        {{> form-row id="town-city" label="Town / City" required="true"}}
         {{> form-row id="postcode_additional" label="Postcode" required="true"}}
     </div>
 {{else}}

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

@@ -1,32 +1,18 @@
 <div class="checkout-payment-details__row" {{attr}}>
   <div class="checkout-payment-details__descr{{descrModifier}}">
     <h3 class="checkout-payment-details__title">Billing address</h3>
-    {{#if billie-form}}
-      <div class="checkout-payment-details__populated-address">
-        <span>
-          <span class="checkout-payment-details__populated-text">Populated from your business address in your TradePro account.</span>
-          {{> info-icon title="If the pre-populated address is incorrect, please amend it before proceeding. To update it permanently, review and amend your Business Address in My TradePro (or Installer) Account > Address Book." data-placement="top" }}
-        </span>
-      </div>
-    {{/if}}
     <div class="warning-required">Required fields</div>
-    {{#unless billie-form}}
-      <div class="form-row">
-        <div class="form-row__field">
-          {{> checkbox id="chb-payment-details-card" label="Use my delivery address"}}
-        </div>
+    <div class="form-row">
+      <div class="form-row__field">
+        {{> checkbox id="chb-payment-details-card" label="Use my delivery address" }}
       </div>
-    {{/unless}}
+    </div>
     {{#unless edit-bill-mod}}
       {{> form-row id="card-name" label="Name on card" required="true"}}
     {{/unless}}
 
-    <div class="address-postcode">
-      {{> address-postcode-look-up}}
-      {{#if billie-form}}
-        {{> address-billie}}
-      {{/if}}
-    </div>
+     {{> address-postcode-look-up}}
+
 
     {{#unless no-set-card}}
       <div class="form-row">

package/src/components/checkout-payment-details-v2.hbs

@@ -4,48 +4,23 @@
       <div class="checkout-payment-details__row">
         <div class="checkout-payment-details__descr">
           <h3 class="checkout-payment-details__title">Payment method</h3>
-          {{#if billie}}
-            <div class="form-row">
-              <div class="form-row__field form-row__field-billie">
-                <label
-                    class="rbn rbn_align billie-label__rbn"
-                    for="checkout-payment-details-billie"
-                >
-                  <input
-                      type="radio"
-                      id="checkout-payment-details-billie"
-                      name="payment-method"
-                      value="billie"
-                  >
-                  <ins></ins>
-                  <div class="billie-badge-container">
-                    <img
-                        src="./img/payment/footer/billie.svg"
-                        alt="Billie Pay Later"
-                    >
-                  </div>
-                </label>
-              </div>
-            </div>
-          {{else if klarna-method}}
+          {{#if klarna-method}}
             <div class="form-row">
               <div class="form-row__field form-row__field-klarna">
                 <label
-                    class="rbn rbn_align klarna-label__rbn"
-                    for="checkout-payment-details-klarna"
-                >
+                  class="rbn rbn_align klarna-label__rbn"
+                  for="checkout-payment-details-klarna">
                   <input
-                      type="radio"
-                      id="checkout-payment-details-klarna"
-                      name="payment-method"
-                      value="klarna"
-                  >
+                    type="radio"
+                    id="checkout-payment-details-klarna"
+                    name="payment-method"
+                    value="klarna">
                   <ins></ins>
                   <div class="klarna-logo-img">
-                    <klarna-placement
-                        data-key="sidebar-promotion-auto-size"
-                        data-locale="en-GB"
-                    ></klarna-placement>
+                      <klarna-placement
+                          data-key="sidebar-promotion-auto-size"
+                          data-locale="en-GB"
+                      ></klarna-placement>
                   </div>
                 </label>
               </div>
@@ -158,63 +133,50 @@
         </div>
       </div>
 
-      {{> checkout-payment-info-block
-          dataAttr="data-klarna"
-          blockClass="checkout-payment-details__klarna"
-          infoClass="klarna-info"
-
-          heading="Choose your way to pay"
-          brandLogoHtml="<klarna-placement
-                   data-key='sidebar-promotion-auto-size'
-                   data-locale='en-GB'
-                 ></klarna-placement>"
-
-          listItem1="Pay in 3. Interest-free."
-          listItem2="Pay now or Pay in 30 days."
-          listItem3="Buyer protection included"
-
-          learnMoreHtml="<img class='klarna-info__learn-more_icon' src='img/icon_info.png' width='20' height='20' alt='info'>
-                 <klarna-placement
-                   data-key='top-strip-promotion-auto-size'
-                   data-locale='en-GB'
-                 ></klarna-placement>"
-
-          acceptInfo="By continuing, I accept the terms of the
-              <a href='#' class='klarna-info__link'>Klarna Shopping Service</a>
-              and confirm that I have read the
-              <a href='#' class='klarna-info__link'>Privacy Notice</a> and
-              <a href='#' class='klarna-info__link'>Cookie Notice</a>"
-
-          ctaButtonLabel="Pay with Klarna"
-          ctaButtonClass="klarna__button"
-          ctaFooterHtml="By placing your order, you accept our
-                <a href='#' class='link-secondary' data-toggle='modal' data-target='#modal-terms-and-conditions'>
-                  Terms &amp; Conditions of Sale
-                </a>"
-      }}
-
-      {{> checkout-payment-info-block
-          dataAttr="data-billie"
-          blockClass="checkout-payment-details__billie"
-          infoClass="billie-info"
-
-          heading="Get first. Pay later <br> Pay 30 days after shipment"
-          brandLogoHtml="<img
-            src='https://static.billie.io/badges/Billie_Checkout_Default.svg'
-            alt='Billie Pay Later'
-            width='70'
-            height='35'>"
-
-
-          listItem1="Billie charges no fee"
-          listItem2="No sign up required"
-          listItem3="Europes go-to B2B payment service"
+      <div data-klarna class="checkout-payment-details__klarna" style="display: none;">
+        <div class="klarna-info">
+          <div class="klarna-info__header">
+            <h4 class="klarna-info__header_title">Choose your way to pay</h4>
+            <div class="klarna-logo-img-big">
+                <klarna-placement
+                    data-key="sidebar-promotion-auto-size"
+                    data-locale="en-GB"
+                ></klarna-placement>
+            </div>
+          </div>
+          <ul class="klarna-info__list">
+            <li class="klarna-info__list_item"><i class="fa fa-check"></i>Pay in 3. Interest-free.</li>
+            <li class="klarna-info__list_item"><i class="fa fa-check"></i>Pay now or Pay in 30 days.</li>
+            <li class="klarna-info__list_item"><i class="fa fa-check"></i>Buyer protection included.</li>
+          </ul>
+          <div class="klarna-info__learn-more">
+            <img class="klarna-info__learn-more_icon" src="img/icon_info.png" width="20" height="20" alt="info">
+            <klarna-placement
+              data-key="top-strip-promotion-auto-size"
+              data-locale="en-GB"
+            ></klarna-placement>
+          </div>
+          <div class="klarna-info__accept-info">
+            By continuing, I accept the terms of the <a href="#" class="klarna-info__link">Klarna Shopping Service</a> and confirm that I have read the <a href="#" class="klarna-info__link">Privacy Notice</a> and <a href="#" class="klarna-info__link">Cookie Notice</a>
+          </div>
+        </div>
 
-          acceptInfo="By continuing, I accept the
-              <a href='#' class='billie-info__link'>Merchant T&Cs of Billie x Klarna Services</a>,
-              and confirm that I have read the
-              <a href='#' class='billie-info__link'>Billie and Billie Partner Privacy Policies. Imprint</a>"
-      }}
+        <div class="form-row form-row__action form-row__action_custom">
+          <div class="form-row__col-btn">
+            <button class="btn btn-primary btn_full btn-enter-details">
+              <span class="btn__text">Pay with Klarna</span>
+            </button>
+          </div>
+          <div class="form-row__col-terms">
+            <p>
+              By placing your order, you accept our
+              <a href="#" class="link-secondary" data-toggle="modal" data-target="#modal-terms-and-conditions">
+                Terms & Conditions of Sale
+              </a>
+            </p>
+          </div>
+        </div>
+      </div>
 
       <div data-clearpay class="checkout-payment-details__clearpay" style="display: none;">
         <div class="clearpay-widget">
@@ -222,9 +184,8 @@
         </div>
       </div>
 
-
       <div class="billing-address">
-        {{> checkout-edit-billing-address actionBlock="true" no-set-card="true" billie-form=billie-form}}
+        {{> checkout-edit-billing-address actionBlock="true" no-set-card="true"}}
       </div>
       <div data-existing-card class="form-row form-row__action form-row__action_custom checkout-payment-details__place-order paypal__row">
         <div class="form-row__col-btn" data-paypal style="display: none;">

package/src/components/checkout_payment-new.hbs

@@ -24,15 +24,6 @@
             ></klarna-placement>
         </div>
     </div>
-    {{else if billie}}
-      <div class="checkout-widget__details checkout-payment__billie">
-        <div class="checkout-widget__details__item">
-          <div>Payment method:</div>
-        </div>
-        <div class="billie-logo-img">
-          <img src="./img/billie-logo.svg" alt="billie">
-        </div>
-      </div>
     {{else if apple}}
         <div class="checkout-widget__details checkout-payment__apple">
           <div class="checkout-widget__details__item">
@@ -79,7 +70,7 @@
         </ul>
     {{/if}}
 
-    {{#unless (anyOf klarna clearpay billie)}}
+    {{#unless (or klarna clearpay)}}
     <div class="checkout-widget__details__address">
         <div class="heading">Billing address</div>
         <div class="address">

package/src/components/header-menu/logout-action.hbs

@@ -0,0 +1,8 @@
+<div class="user__logout">
+  {{#each items}}
+    <a href="{{url}}" class="user__action link-logout">
+      {{text}}
+      <span class="icon icon-logout"><i class="{{iconClass}}"></i></span>
+    </a>
+  {{/each}}
+</div>

package/src/components/header-menu/popover-actions-mob.hbs

@@ -0,0 +1,11 @@
+{{#each items}}
+  <div class="main-nav__button">
+    <a href="{{url}}" class="nav-button">
+      <span class="nav-button__icon"></span>
+      <span class="nav-button__text">{{text}}</span>
+      {{#if total}}
+        <span class="rewards-counter">{{total}}</span>
+      {{/if}}
+    </a>
+  </div>
+{{/each}}

package/src/components/header-menu/popover-actions.hbs

@@ -0,0 +1,13 @@
+<div class="user__popover-actions">
+  {{#each items}}
+    <a href="{{url}}" class="user__action">
+        <span class="icon-wrap">
+          <i class="{{iconClass}}"></i>
+        </span>
+      {{text}}
+      {{#if total}}
+        <span class="rewards-counter">{{total}}</span>
+      {{/if}}
+    </a>
+  {{/each}}
+</div>

package/src/components/header-menu/user-actions-mob.hbs

@@ -0,0 +1,18 @@
+{{#each items}}
+  <div class="main-nav__button">
+    <a href="{{url}}" class="nav-button">
+      <span class="nav-button__icon">
+        {{#ifCond customIcon '||' iconClass}}
+          {{#if icon}}
+            {{{icon}}}
+          {{else}}
+            <i class="{{iconClass}} icon"></i>
+          {{/if}}
+        {{else}}
+          <i class="fas fa-user"></i>
+        {{/ifCond}}
+      </span>
+      <span class="nav-button__text">{{text}}</span>
+    </a>
+  </div>
+{{/each}}

package/src/components/header-menu/user-actions.hbs

@@ -0,0 +1,12 @@
+{{#each items}}
+  <a href="{{url}}" class="user__action user__action--account">
+    <span class="icon-wrap">
+      {{#if customIcon}}
+        {{{icon}}}
+      {{else}}
+        <i class="{{iconClass}}"></i>
+      {{/if}}
+    </span>
+    {{text}}
+  </a>
+{{/each}}

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 billieText=../billieText}}
+    {{> my-account/active-orders/order switch-vat=../switch-vat}}
   {{/each}}
 
   {{#if linkText}}

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

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

package/src/components/my-account/clipboard-code-card.hbs

@@ -1,9 +1,11 @@
-<div class="clipboard-code {{this.mod}}">
-  {{#if customIcon}}
-    {{{customIcon}}}
-  {{else}}
-    <i class="{{icon}} icon"></i>
-  {{/if}}
+<div class="clipboard-code {{mod}}">
+  <span class="icon-wrap">
+    {{#if customIcon}}
+      {{{customIcon}}}
+    {{else}}
+      <i class="{{icon}} icon"></i>
+    {{/if}}
+  </span>
   <div class="clipboard-code__content">
     <p class="title">{{title}}</p>
     <div class="clipboard-code__cta">
@@ -13,4 +15,9 @@
       </button>
     </div>
   </div>
+  {{#if description}}
+    <div class="clipboard-code__description">
+      <p>{{description.text}} <a class="link" href="{{{description.link}}}">{{description.link}}</a></p>
+    </div>
+  {{/if}}
 </div>

package/src/components/my-account/discount.hbs

@@ -1,6 +1,8 @@
 <div class="discount">
   <div class="discount__content">
-    <i class="icon fas fa-barcode-alt"></i>
+    <span class="icon-wrap">
+      <i class="icon fas fa-barcode-alt"></i>
+    </span>
 
     <div class="discount__code">
       <p class="title">{{title}}</p>

package/src/components/payment-loader.hbs

@@ -1,61 +1,23 @@
 <div class="payment-loader {{#if hidden}}payment-loader--hidden{{/if}}">
-  <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 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>

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

@@ -1,20 +1,14 @@
 <div class="payments-checkout">
   <p class="payments-checkout__title">Ways to Pay</p>
   <ul class="payments-checkout__list">
-    {{#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">
+    <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>
-    {{/if}}
+      </span>
+    </li>
     {{#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,10 +1,5 @@
 <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
@@ -13,7 +8,6 @@
                 ></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,20 +1,14 @@
 <div class="payways">
   <p class="payways__title">Ways to Pay</p>
   <ul class="payways__list">
-    {{#if billieIcon}}
-      <li class="payways__item">
-        <img class="payways__image" src="./img/payment/footer/billie.svg" alt="Billie">
-      </li>
-    {{else}}
-      <li class="payways__item">
+    <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>
-    {{/if}}
+    </li>
     {{#each payments-list}}
       <li class="payways__item">
         <img class="payways__image" src="{{src}}" alt="{{payment}}">

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

@@ -33,7 +33,6 @@
                             <strong>Saturday: 8am - 6pm</strong><br>
                             <strong>Sunday: 10am - 5pm</strong></div>
                     </div>
-                    <br/>
                 </div>
             </div>
         </div>