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

package/package.json

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

package/src/components/address-billie.hbs

@@ -0,0 +1,42 @@
+<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>
+</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"
+>
+  {{> 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/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"}}
+        {{> form-row id="address-line-1" label="Address line 1" required="true" info="Eg house number/name, street name"}}
         {{> 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/basket-charity-donations-new.hbs

@@ -0,0 +1,40 @@
+{{#if title}}
+  {{> checkout-section-title}}
+{{/if}}
+<div class="charity-new charity-donation-new">
+  {{#with checkoutOrder.charity}}
+
+    <div class="charity-donation-new__wrapper">
+      <div class="charity-donation-new__top">
+        <div class="charity-donation-new__header">
+          <div class="charity-donation-new__title">{{title}}</div>
+          <div class="charity-donation-new__right">
+            <img
+                class="charity-donation-new__image"
+                src="{{img}}"
+                alt="{{title}}"
+                title="{{title}}"
+            />
+          </div>
+        </div>
+
+        <div class="charity-donation-new__description">
+          {{descr}}
+          <span class="charity-donation-new__message">
+              {{message}}
+            <a
+                class="charity-donation-new__subtitle-link"
+                href="{{subLink}}"
+            >
+              click here</a>.
+            </span>
+        </div>
+      </div>
+
+      <div class="charity-donation-new__body">
+        {{> donation-cart-new}}
+      </div>
+    </div>
+
+  {{/with}}
+</div>

package/src/components/billie-modal.hbs

@@ -0,0 +1,41 @@
+{{#extend "modal" id="billieLearnMoreModal" classMod="billie-modal modal-scroll-observer" title="" showCloseBtn=true centered=true backdrop=true fullWidth=true}}
+{{#content "header"}}
+  <img src="./img/billie-modal.svg" alt="billie header logo" class="modal-header-logo">
+{{/content}}
+{{#content "body"}}
+  <div class="billie-modal__content">
+    <h4 class="billie-modal__heading">Benefits for Tradespeople and Small Businesses</h4>
+    <ul class="billie-modal__list">
+      <li>Potential for a higher credit limit*</li>
+      <li>Increased flexibility thanks to extended payment terms</li>
+      <li>Settle outstanding payments via Bank Transfer</li>
+      <li>View all your Wickes / Billie Orders in one place with your Trade Pro Account, on the Order History page.</li>
+    </ul>
+
+    <h4 class="billie-modal__heading">Buy now, pay within 30 days</h4>
+    <ol class="billie-modal__list billie-modal__list--ordered">
+      <li>Add items to your basket and proceed to checkout</li>
+      <li>Select Billie as your payment method</li>
+      <li>Enter your Business details on the payments page and Billie portal where necessary</li>
+      <li>Billie review your submitted details in real-time and gives instant feedback if your order was successful</li>
+      <li>From the point of collection / delivery of goods you’ll have 30 days to pay</li>
+      <li>Billie will send you the invoice document via email and remind you when it is time to pay</li>
+    </ol>
+
+    <p class="billie-modal__disclaimer">
+      *Available credit limits can differ between customers and are dependent on results of a credit check
+    </p>
+
+    <a href="https://www.wickes.co.uk/payments" class="billie-modal__read-more">Read more</a> about Billie
+  </div>
+{{/content}}
+
+{{#content "footer"}}
+  <div class="modal-box__inner-row justify-content-center modal-box__footer-row">
+    <div class="modal-box__inner-columns">
+      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+    </div>
+  </div>
+{{/content}}
+
+{{/extend}}

package/src/components/billie-online-messaging.hbs

@@ -0,0 +1,14 @@
+<div class="billie {{#if basketStyles}}billie-basket{{/if}}">
+  <span class="billie__logo">
+    <img class="billie__image" src="./img/billie-pdp.svg" alt="Billie">
+  </span>
+  <div class="billie__content">
+    <span class="billie__title">
+      Buy Now Pay Later for Trade.
+      <a href="#" class="billie__link" data-toggle="modal" data-target="#billieLearnMoreModal">Learn more</a>
+    </span>
+    <span class="billie__subtitle">
+      Interest free
+    </span>
+  </div>
+</div>

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

@@ -1,18 +1,32 @@
 <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>
-    <div class="form-row">
-      <div class="form-row__field">
-        {{> checkbox id="chb-payment-details-card" label="Use my delivery address" }}
+    {{#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>
-    </div>
+    {{/unless}}
     {{#unless edit-bill-mod}}
       {{> form-row id="card-name" label="Name on card" required="true"}}
     {{/unless}}
 
-     {{> address-postcode-look-up}}
-
+    <div class="address-postcode">
+      {{> address-postcode-look-up}}
+      {{#if billie-form}}
+        {{> address-billie}}
+      {{/if}}
+    </div>
 
     {{#unless no-set-card}}
       <div class="form-row">

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_order-summary-new.hbs

@@ -18,26 +18,21 @@
                 </li>
             {{/each}}
         {{/if}}
-        {{#unless hideApplyVoucher}}
-          {{> checkout-voucher-accordion id=id}}
-        {{/unless}}
+        {{> 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"
-                data-target="#acheckout-widget-accordion-{{id}}">
-                  Discount(s):
-                  <span class="icon accordion__header-icon-small">
-                    <i class="fas fa-angle-up"></i>
-                  </span>
-              </span>
-              <ul class="checkout-widget__details-hidden collapse" id="acheckout-widget-accordion-{{id}}">
-                  {{#each discounts}}
-                      {{> cart-voucher}}
-                  {{/each}}
-              </ul>
-              <span class="checkout-widget__detail-value">£0.00</span>
+            <span class="checkout-widget__detail-name checkout-widget__detail-name_accordion collapsed" data-toggle="collapse"
+                    data-target="#acheckout-widget-accordion-{{id}}">Discount(s):
+                <span class="icon accordion__header-icon-small">
+                <i class="fas fa-angle-up"></i>
+                </span>
+            </span>
+                <ul class="checkout-widget__details-hidden collapse" id="acheckout-widget-accordion-{{id}}">
+                    {{#each discounts}}
+                        {{> cart-voucher}}
+                    {{/each}}
+                </ul>
+                <span class="checkout-widget__detail-value">£0.00</span>
             </li>
         {{/if}}
     </ul>

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/header-minicart.hbs

@@ -6,12 +6,12 @@
       </span>
       <span class="header-right__link-title">Basket</span>
     </span>
-    <button type="button" class="header-right__link header-minicart__btn header-minicart__btn_link" style="display: none;">
+    <a href="page_shopping-cart.html" class="header-right__link header-minicart__btn header-minicart__btn_link"  style="display: none;">
       <span class="btn__text">
         <i class="fas fa-shopping-basket fa-2x"></i>
       </span>
       <span class="header-right__link-title">Basket</span>
-    </button>
+    </a>
   </div>
   <span class="header-minicart__counter">0</span>
-</div>
+</div>