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

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

@@ -4,23 +4,48 @@
       <div class="checkout-payment-details__row">
         <div class="checkout-payment-details__descr">
           <h3 class="checkout-payment-details__title">Payment method</h3>
-          {{#if klarna-method}}
+          {{#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}}
             <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>
@@ -133,50 +158,63 @@
         </div>
       </div>
 
-      <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>
+      {{> checkout-payment-info-block
+          dataAttr="data-klarna"
+          blockClass="checkout-payment-details__klarna"
+          infoClass="klarna-info"
 
-        <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>
+          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"
+
+          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 data-clearpay class="checkout-payment-details__clearpay" style="display: none;">
         <div class="clearpay-widget">
@@ -184,8 +222,9 @@
         </div>
       </div>
 
+
       <div class="billing-address">
-        {{> checkout-edit-billing-address actionBlock="true" no-set-card="true"}}
+        {{> checkout-edit-billing-address actionBlock="true" no-set-card="true" billie-form=billie-form}}
       </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-info-block.hbs

@@ -0,0 +1,49 @@
+<div {{#if dataAttr}}{{dataAttr}}{{/if}} class="{{blockClass}}" style="display: none;">
+  <div class="{{infoClass}}">
+    <div class="{{infoClass}}__header">
+      <h4 class="{{infoClass}}__header_title">{{{heading}}}</h4>
+      <div class="{{infoClass}}__logo-img-big">
+        {{{brandLogoHtml}}}
+      </div>
+    </div>
+
+    <ul class="{{infoClass}}__list">
+        <li class="{{infoClass}}__list_item">
+          <i class="fa fa-check"></i>{{listItem1}}
+        </li>
+
+        <li class="{{infoClass}}__list_item">
+          <i class="fa fa-check"></i>{{listItem2}}
+        </li>
+
+        <li class="{{infoClass}}__list_item">
+          <i class="fa fa-check"></i>{{listItem3}}
+        </li>
+    </ul>
+
+    {{#if learnMoreHtml}}
+      <div class="{{infoClass}}__learn-more">
+        {{{learnMoreHtml}}}
+      </div>
+    {{/if}}
+
+    <div class="{{infoClass}}__accept-info">
+      {{{acceptInfo}}}
+    </div>
+  </div>
+
+  {{#if ctaButtonClass}}
+    <div class="form-row form-row__action form-row__action_custom">
+      <div class="form-row__col-btn">
+        <button class="btn btn-primary btn_full {{ctaButtonClass}}">
+          <span class="btn__text">{{ctaButtonLabel}}</span>
+        </button>
+      </div>
+      <div class="form-row__col-terms">
+        <p>
+          {{{ctaFooterHtml}}}
+        </p>
+      </div>
+    </div>
+  {{/if}}
+</div>

package/src/components/checkout-payment-option.hbs

@@ -0,0 +1,40 @@
+<div {{#if dataAttr}}{{dataAttr}}{{/if}} class="{{blockClass}}" style="display: none;">
+  <div class="payment-info">
+    <div class="payment-info__header">
+      <h4 class="payment-info__header_title">{{{heading}}}</h4>
+      <div class="payment-info__logo-img-big">
+        <img
+            src="{{logoImgSrc}}"
+            alt="{{logoImgAlt}}"
+            width="70"
+            height="35"
+        >
+      </div>
+    </div>
+
+    <ul class="payment-info__list">
+      {{#each infoList}}
+        <li class="payment-info__list_item">
+          <i class="fa fa-check"></i>{{this}}
+        </li>
+      {{/each}}
+    </ul>
+
+    <div class="payment-info__accept-info">
+      {{{acceptInfo}}}
+    </div>
+  </div>
+
+  <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">{{payButtonText}}</span>
+      </button>
+    </div>
+    <div class="form-row__col-terms">
+      <p>
+        {{{termsText}}}
+      </p>
+    </div>
+  </div>
+</div>

package/src/components/checkout_payment-new.hbs

@@ -24,6 +24,15 @@
             ></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">
@@ -70,7 +79,7 @@
         </ul>
     {{/if}}
 
-    {{#unless (or klarna clearpay)}}
+    {{#unless (anyOf klarna clearpay billie)}}
     <div class="checkout-widget__details__address">
         <div class="heading">Billing address</div>
         <div class="address">

package/src/components/donation-cart-new.hbs

@@ -0,0 +1,38 @@
+<div class="donation-cart-new">
+  <div class="donation-cart-new__details">
+    <div class="donation-cart-new__options">
+      <p class="donation-cart-new__description">
+        Select the amount you would like to donate:
+      </p>
+      <div class="donation-cart-new__holder">
+        {{#each options}}
+          <button
+              class="btn
+                   {{#if active}}btn-selected {{else}} btn-secondary{{/if}}
+                   donation-cart-new__btn"
+              data-value="{{value}}"
+          >
+            <span class="btn__text">{{title}}</span>
+          </button>
+        {{/each}}
+      </div>
+      <div class="donation-cart-new__cost donation-cart-new__cost-hide">
+        <div class="donation-cart-new__price">
+          <span class="donation-cart-new__currency">£</span>
+          <span class="donation-cart-new__value"></span>
+          donation has been added to your basket.
+        </div>
+        <button class="btn order-item__remove" data-action="remove">
+          <span class="btn__text">
+            <i class="fas fa-trash"></i>
+          </span>
+        </button>
+      </div>
+
+      <hr class="donation-cart-new__divider" />
+      <p class="donation-cart-new__charity-info">
+        Charity Reg No: 1110621 & Scot SC044347
+      </p>
+    </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/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/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}}

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