wickes-css2 2.94.0-billie.3 → 2.94.0-develop.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.94.0-billie.3",
+  "version": "2.94.0-develop.10",
   "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/checkout-action.hbs

@@ -1,15 +1,14 @@
-<div class="checkout-action__wrapper {{lookup . "mod"}} {{view}}">
+<div class="checkout-action__wrapper {{mod}}">
     {{#if head}}
         {{> checkout-section-title title=head}}
     {{/if}}
-    <div class="checkout-action {{#if container}}container{{/if}}">
+    <div class="checkout-action">
         <div class="checkout-action__section">
             <a href="#" class="btn btn_full btn-action btn-checkout">
-              <span class="btn-wickes-checkout__label checkout-text--mixed">Checkout</span>
-              <span class="btn-wickes-checkout__label checkout-text--collect">Wickes Checkout</span>
-              <span class="icon">
-                <i class="fas fa-arrow-right"></i>
-              </span>
+                Checkout
+                <span class="icon">
+                  <i class="fas fa-arrow-right"></i>
+                </span>
             </a>
         </div>
         <div class="checkout-action__section checkout-widget__basket-block">
@@ -24,15 +23,13 @@
                         </div>
                     </div>
                 </a>
-              {{#unless hidePaypalEmail}}
                 <div class="pay-pal_container-email">
-                  <div class="pay-pal_email-heading">Your PayPal email: </div>
-                  <div class="pay-pal_email-value">John.doe@gmail.com</div>
-                  <div class="pay-pal_email-link">
-                    <a href="#" title="" target="_blank">Don't use this email</a>
-                  </div>
+                    <div class="pay-pal_email-heading">Your PayPal email: </div>
+                    <div class="pay-pal_email-value">John.doe@gmail.com</div>
+                    <div class="pay-pal_email-link">
+                        <a href="#" title="" target="_blank">Don't use this email</a>
+                    </div>
                 </div>
-              {{/unless}}
             </div>
         </div>
     </div>

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,70 +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"
-
-          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-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>
 
-          ctaButtonLabel="Pay with Billie"
-          ctaButtonClass="billie__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>"
-      }}
+        <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">
@@ -229,7 +184,6 @@
         </div>
       </div>
 
-
       <div class="billing-address">
         {{> checkout-edit-billing-address actionBlock="true" no-set-card="true"}}
       </div>

package/src/components/checkout_order-summary-new.hbs

@@ -12,13 +12,12 @@
             {{/each}}
         {{else}}
             {{#each info}}
-                <li class="checkout-widget__item {{#if (lookup this "mod")}}checkout-widget__item-{{lookup this "mod"}}{{/if}}">
+                <li class="checkout-widget__item {{#if mod}}checkout-widget__item-{{mod}}{{/if}}">
                     <span>{{title}}</span>
                     <span class="checkout-widget__item-value">{{value}}</span>
                 </li>
             {{/each}}
         {{/if}}
-        {{> checkout-voucher-accordion id=id}}
         {{#if discounts}}
             <li class="checkout-widget__accordion-wrap checkout-widget__details-discount">
             <span class="checkout-widget__detail-name checkout-widget__detail-name_accordion collapsed" data-toggle="collapse"
@@ -36,8 +35,7 @@
             </li>
         {{/if}}
     </ul>
-  {{#unless mobile}}
-    <div class="checkout-widget__total" data-sticky-observe>
+    <div class="checkout-widget__total">
         {{#if confirmationSummary}}
             <div> {{ confirmation-summary.total.title }}</div>
             <div class="checkout-widget__total-value">{{ confirmation-summary.total.value }}</div>
@@ -46,5 +44,5 @@
             <div class="checkout-widget__total-value">{{ total.value }}</div>
         {{/if}}
     </div>
-  {{/unless}}
+
 </div>

package/src/components/checkout_voucher_large.hbs

@@ -1,23 +1,19 @@
 <div class="voucher">
-  {{#if title}}
-    {{> checkout-section-title}}
-  {{/if}}
-  <div class="checkout-widget checkout-voucher checkout-voucher_fixed">
-    <form id="form-checkout-voucher{{id}}">
-      {{> form-row id=(concat 'voucher-code' id) label="Voucher" label-hidden="true" required="true" placeholder="Enter code" info=""}}
-      <button class="voucher__btn btn btn-primary">
-        <span class="btn__text">Apply</span>
-      </button>
-    </form>
-  </div>
-  {{#unless voucherApplied}}
-    <div class="checkout-widget checkout-voucher voucher-applied checkout-voucher-hide">
-      <div class="voucher-applied__inner">
-      <span class="icon icon__check">
-        <i class="fas fa-check-circle"></i>
-      </span>
-        <h5 class="heading-5 text-center">Voucher has been applied</h5>
-      </div>
+    {{#if title}}
+        {{> checkout-section-title}}
+    {{/if}}
+    <div class="checkout-widget checkout-voucher checkout-voucher_fixed">
+        <form id="form-checkout-voucher{{id}}">
+            {{> form-row id=(concat 'voucher-code' id) label="Voucher" label-hidden="true" required="true" placeholder="Enter code"}}
+            <button class="voucher__btn btn btn-secondary btn_full">
+                <span class="btn__text">Apply</span>
+            </button>
+        </form>
     </div>
-  {{/unless}}
+    {{#unless voucherApplied}}
+        <div class="checkout-widget checkout-voucher voucher-applied checkout-voucher-hide">
+            <i class="fas fa-check-circle"></i>
+            <h3 class="heading-3 text-center">Voucher has been applied</h3>
+        </div>
+    {{/unless}}
 </div>

package/src/components/flatpickr-calendar.hbs

@@ -0,0 +1,26 @@
+<div class="flatpickr-datepicker" choose-date="" show-years="15">
+  <label class="flatpickr-datepicker__label">
+    Monthly view
+    {{> info-icon
+      modification="icon-info"
+      title=textTooltip
+      data-placement="top"
+      data-container=".flatpickr-datepicker__label"
+    }}
+  </label>
+  <div class="flatpickr-datepicker__field">
+    <input
+      type="text"
+      class="flatpickr-input"
+      id="calendarInputFlatpickr"
+      placeholder="Select year and month"
+      readonly
+    />
+    <span class="icon-wrap icon-wrap--cross" id="crossIcon">
+      <i class="far fa-times cross-icon"></i>
+    </span>
+    <span class="icon-wrap" id="calendarIcon">
+      <i class="fas fa-calendar-alt icon-calendar"></i>
+    </span>
+  </div>
+</div>

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

@@ -1,4 +1,8 @@
 <div class="active-orders__header">
-  <h3 class="active-orders__title">{{title}}</h3>
-  <a class="btn btn_full btn-primary btn--all-orders d-none d-sm-block" rel="stylesheet" href="#">{{linkText}}</a>
+  {{#if title}}
+    <h3 class="active-orders__title">{{title}}</h3>
+  {{/if}}
+  {{#if linkText}}
+    <a class="btn btn_full btn-primary btn--all-orders d-none d-sm-block" rel="stylesheet" href="#">{{linkText}}</a>
+  {{/if}}
 </div>

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

@@ -1,9 +1,21 @@
 <div class="active-orders">
-  {{> my-account/active-orders/header}}
+  {{#if title}}
+    {{> my-account/active-orders/header}}
+  {{/if}}
 
   {{#each orders}}
     {{> my-account/active-orders/order switch-vat=../switch-vat}}
   {{/each}}
 
-  <a class="btn btn_full btn-primary btn--all-orders d-sm-none" rel="stylesheet" href="#">{{linkText}}</a>
+  {{#if linkText}}
+    <a class="btn btn_full btn-primary btn--all-orders d-sm-none" rel="stylesheet" href="#">{{linkText}}</a>
+  {{/if}}
 </div>
+{{#if isLoadMore}}
+  <div class="load-more-wrap">
+    <input id="numberOfPagesOrders" value="3" type="hidden">
+    <button class="btn btn-primary btn-load-more">
+      Load more
+    </button>
+  </div>
+{{/if}}

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

@@ -1,6 +1,6 @@
 <header class="order-header">
   <h3 class="order-header__title">Order {{orderId}}</h3>
-  <div class="order-header__status">
+  <div class="order-status {{orderStatus.statusClass}}">
     <i class="{{orderStatus.statusIcon}} icon"></i>
     <span>{{orderStatus.statusTitle}}</span>
   </div>

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

@@ -3,13 +3,17 @@
 
   {{> my-account/active-orders/order-details switch-vat=switch-vat}}
 
-  {{> my-account/active-orders/consignment-info}}
+  {{#if totalConsignments}}
+    {{> my-account/active-orders/consignment-info}}
+  {{/if}}
 
-  <section class="shipment-details">
-    {{#each shipmentDetails}}
-      {{> my-account/active-orders/shipment-detail}}
-    {{/each}}
-  </section>
+  {{#if shipmentDetails}}
+    <section class="shipment-details">
+      {{#each shipmentDetails}}
+        {{> my-account/active-orders/shipment-detail}}
+      {{/each}}
+    </section>
+  {{/if}}
 
   <div class="view-more">
     <a class="link" href="/">

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

@@ -1,4 +1,4 @@
-<div class="clipboard-code {{mod}}">
+<div class="clipboard-code {{this.mod}}">
   {{#if customIcon}}
     {{{customIcon}}}
   {{else}}

package/src/components/my-account/empty-orders.hbs

@@ -0,0 +1,9 @@
+<div class="empty-orders">
+  <h2 class="empty-orders__title">{{title}}</h2>
+  <span class="empty-orders__image">
+    {{{image}}}
+  </span>
+  {{#if btnText}}
+    <a href="#" class="btn btn-primary empty-orders__btn">{{btnText}}</a>
+  {{/if}}
+</div>

package/src/components/my-account/mobile-nav.hbs

@@ -1,17 +1,19 @@
-<div class="account-nav {{mod}}" {{#if (eq @index ../active-index)}}data-active-index="{{active-index}}"{{/if}}>
+<div class="account-nav {{this.mod}}" {{#if (eq @index ../active-index)}}data-active-index="{{active-index}}"{{/if}}>
   <div class="account-nav__toggle accordion accordion_collapsed">
     <div class="accordion__header" role="link" aria-expanded="false">
-      <span class="account-nav__icon">
-        {{#each menu}}
-          {{#if (eq @index ../active-index)}}
-            {{#if customIcon}}
-              {{{icon}}}
-            {{else}}
-              <i class="{{icon}} icon"></i>
-            {{/if}}
+      {{#each menu}}
+        {{#if (eq @index ../active-index)}}
+          {{#if icon}}
+            <span class="account-nav__icon">
+              {{#if customIcon}}
+                {{{icon}}}
+              {{else}}
+                <i class="{{icon}} icon"></i>
+              {{/if}}
+            </span>
           {{/if}}
-        {{/each}}
-      </span>
+        {{/if}}
+      {{/each}}
       <span class="accordion__header-text">{{page-name}}</span>
       <span class="icon accordion__header-icon">
         <i class="fas fa-angle-up"></i>
@@ -23,14 +25,16 @@
           <ul class="account-nav__list">
             {{#each menu}}
               <li class="account-nav__item">
-                <a class="account-nav__link" data-index="{{@index}}" href="{{link}}">
-                  <span class="account-nav__icon">
-                    {{#if customIcon}}
-                      {{{icon}}}
-                    {{else}}
-                      <i class="{{icon}} icon"></i>
-                    {{/if}}
-                  </span>
+                <a class="account-nav__link" data-index="{{@index}}" href="{{link}}" id="{{id}}">
+                  {{#if icon}}
+                    <span class="account-nav__icon">
+                      {{#if customIcon}}
+                        {{{icon}}}
+                      {{else}}
+                        <i class="{{icon}} icon"></i>
+                      {{/if}}
+                    </span>
+                  {{/if}}
                   {{title}}
                   {{#if total}}
                     <span class="rewards">{{total}}</span>

package/src/components/my-account/orders-nav.hbs

@@ -0,0 +1,15 @@
+<nav class="nav-orders">
+  {{> my-account/mobile-nav
+    mod="d-sm-none"
+    menu=nav
+    active-index=0
+    page-name=nav.[0].title
+  }}
+  <ul class="nav-orders__wrap d-none d-sm-flex">
+    {{#each nav}}
+      <li class="nav-orders__item {{#if isActive}}active{{/if}}">
+        <a class="link" href="#" id="{{id}}">{{title}}</a>
+      </li>
+    {{/each}}
+  </ul>
+</nav>

package/src/components/my-account/sort-by.hbs

@@ -0,0 +1,3 @@
+<div class="sort-orders">
+  {{> form-row dropdown="true" id="sort_orders" label="Sort by" placeholder="Name (descending)"}}
+</div>

package/src/components/my-account/user-account-actions.hbs

@@ -1,4 +1,4 @@
-<ul class="account-actions__list {{mod}}">
+<ul class="account-actions__list {{this.mod}}">
   <li class="account-actions__item">
     <a class="account-actions__link" href="#">
       <span class="icon">