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

package/src/js/page/components/charity.js

@@ -8,34 +8,47 @@ const charityEl = {
   charityInput: '#donation',
   charityTitleWrap: '.title-wrap',
   donationCart: '.donation-cart',
-  donationCartBtn: '.donation-cart__btn',
-  donationCartHolder: '.donation-cart__holder',
   donationCartHide: 'donation-cart__hide',
-  donationCartValue: '.donation-cart__value',
+  donationCartBtn: '.donation-cart__btn, .donation-cart-new__btn',
+  donationCartBtnSelected: '.donation-cart-new__btn.btn-selected',
+  donationCartHolder: '.donation-cart__holder, .donation-cart-new__holder',
+  donationCartValue: '.donation-cart__value, .donation-cart-new__value',
   charityAdded: 'charity-added',
+  donationCartCostBlock: '.donation-cart-new__cost',
+  donationCartCostBlockHide: 'donation-cart-new__cost-hide',
+  donationCartRemove: '.donation-cart-new__cost .order-item__remove',
 }
 
-export function updateCharity() {
-  //checkbox action
+export function updateCharity(button) {
   if ($('#donation').attr('disabled') === 'disabled') {
-    $('#donation').removeAttr('disabled')
+    $('#donation').removeAttr('disabled');
   } else {
     $('#donation').prop('disabled', (_, value) => !value);
   }
 
-  const context = getCurrentCharityItem(this);
+  const context = getCurrentCharityItem(button);
   const productCode = getCurrentProductCode(context);
+  const quantity = getSelectedCharityAmount(button);
 
   showLoader('.basket-loader');
 
   if (context.hasClass(charityEl.charityAdded)) {
-    $(this).removeAttr('checked');
+    $(button).removeAttr('checked');
   } else {
-    $(this).attr('checked', 'checked');
-    charityActionForAdd(productCode);
+    $(button).attr('checked', 'checked');
+    repaintCharityButton(button);
+    context
+      .find(charityEl.donationCartValue)
+      .text(quantity);
+    showDonationCostBlock(context);
+    charityActionForAdd(productCode, quantity);
   }
 }
 
+function getSelectedCharityAmount(context) {
+  return $(context).data('value');
+}
+
 function getCurrentCharityItem(context) {
   return $(context).closest(charityEl.charityItem);
 }
@@ -44,13 +57,13 @@ function getCurrentProductCode(context) {
   return context.find('input[name="productCode"]').val();
 }
 
-export function charityActionForAdd(value) {
+export function charityActionForAdd(value, quantity) {
   if (!Wick.checkLocalEnv) {
     const payload = {
       url: ROUTES.CHARITY_ADD,
       queries: {
         productCodePost: value,
-        qty: getDefaultCharityAmount(),
+        qty: quantity,
       },
       type: 'POST',
     };
@@ -61,19 +74,10 @@ export function charityActionForAdd(value) {
 
     callAction(payload, executeCharityAction, productInfo);
   } else {
-    toggleCharityElements();
     Wick.BasketPage.updateCart(...Array(2), true);
   }
 }
 
-export function toggleCharityElements() {
-  if ($(charityEl.charityItem).hasClass(charityEl.charityAdded)) {
-    $(charityEl.charityInput).prop('checked', false);
-  }
-  $(charityEl.charityItem).toggleClass(charityEl.charityAdded);
-  $(charityEl.charityItem).hasClass(charityEl.charityMultiple) && toggleMultipleCharityChoose($(charityEl.charityItem));
-}
-
 function executeCharityAction(response, productInfo) {
   if (response.addedProducts && response.addedProducts[0]) {
     productInfo.quantity = response.addedProducts[0].qty;
@@ -81,7 +85,6 @@ function executeCharityAction(response, productInfo) {
   }
 
   Wick.BasketPage.updateCart(...Array(2), true);
-  toggleCharityElements();
 }
 
 export function changeCharityPrice() {
@@ -95,6 +98,7 @@ export function changeCharityPrice() {
 
   repaintCharityButton(this);
   $(charityEl.donationCartValue).text(charityValue);
+  showDonationCostBlock(context);
   charityActionForChangePrice(this);
 }
 
@@ -119,35 +123,46 @@ function repaintCharityButton(context) {
   $(context).removeClass(btnSecondary).addClass(btnSelected);
 }
 
-function resetCharityButton(context) {
-  const donationButtons = $(context).find(charityEl.donationCartBtn);
-  const btnSelected = 'btn-selected';
-  const btnSecondary = 'btn-secondary';
-  const defaultAmount = getDefaultCharityAmount();
-
-  donationButtons.each((i, btn) => {
-    $(btn).attr('data-value') === defaultAmount
-      ? $(btn).removeClass(btnSecondary).addClass(btnSelected)
-      : $(btn).removeClass(btnSelected).addClass(btnSecondary);
-  })
-}
-
 function getDefaultCharityAmount() {
   const donationButtons = $(charityEl.charityItem).find(charityEl.donationCartBtn);
   return donationButtons.first().attr('data-value');
 }
 
+export function setDefaultCharityValue() {
+  $(charityEl.donationCartBtnSelected).each(function() {
+    const $btn   = $(this);
+    const $item  = $btn.closest(charityEl.charityItem);
+    const value  = $btn.data('value');
+
+    $item.find(charityEl.donationCartValue).text(value);
+    $item.find(charityEl.donationCartCostBlock)
+      .removeClass(charityEl.donationCartCostBlockHide);
+  });
+}
+
+function showDonationCostBlock($charity) {
+  $charity.find(charityEl.donationCartCostBlock)
+    .removeClass(charityEl.donationCartCostBlockHide);
+}
+
 function resetCharityValue() {
   const defaultValue = getDefaultCharityAmount();
   $(charityEl.donationCartValue).text(defaultValue);
 }
 
-export function toggleMultipleCharityChoose(context) {
-  context.find(charityEl.donationCart).toggleClass(charityEl.donationCartHide);
-  resetCharityButton(context);
-  resetCharityValue();
-}
-
-export function setDefaultCharityValue() {
-  $(charityEl.charityItem).hasClass(charityEl.charityMultiple) && resetCharityValue();
+export function initCharityInteractions() {
+  $(document).on('click', charityEl.donationCartRemove, function(e) {
+    e.preventDefault();
+
+    const $item = $(this).closest(charityEl.charityItem);
+    $item.removeClass(charityEl.charityAdded);
+    $item
+      .find(charityEl.donationCartCostBlock)
+      .addClass(charityEl.donationCartCostBlockHide);
+    $item
+      .find(charityEl.donationCartBtn)
+      .removeClass('btn-selected')
+      .addClass('btn-secondary');
+    resetCharityValue();
+  });
 }

package/src/js/page/components/modal-observer.js

@@ -0,0 +1,51 @@
+var Wick = Wick || {};
+
+Wick.ModalObserver = (function () {
+  const modal = $('.modal-scroll-observer');
+    modalContent = modal.find('.modal-content'),
+    modalBody = modal.find('.modal-body');
+
+  $(document).ready(function () {
+    if (!modal.length) {
+      return;
+    }
+
+    function updateScrollFades() {
+      const tolerance = 5;
+      const scrollTop = modalBody.scrollTop();
+      const scrollHeight = modalBody.prop('scrollHeight');
+      const visibleHeight = modalBody.outerHeight();
+
+      const isAtTop = scrollTop <= tolerance;
+      const isAtBottom = scrollTop + visibleHeight >= scrollHeight - tolerance;
+
+      let state;
+
+      if (isAtTop && isAtBottom) {
+        state = 'full';
+      } else if (isAtTop) {
+        state = 'top';
+      } else if (isAtBottom) {
+        state = 'bottom';
+      } else {
+        state = 'middle';
+      }
+
+      modalContent.attr('data-scroll-state', state);
+    }
+
+    modalBody.on('scroll', updateScrollFades);
+
+    modal.on('shown.bs.modal', function() {
+      updateScrollFades();
+    });
+
+    $(window).on('resize', function() {
+      if (modal.is(':visible')) {
+        updateScrollFades();
+      }
+    });
+
+  });
+
+})();

package/src/js/page/pdp.js

@@ -24,10 +24,7 @@ Wick.PDP = (function () {
     $page
       .find('.btn-add-to-basket, .card-store-collect__btn')
       .on('click', function(){
-        // TODO: This code is currently not in use because the backend (BE) has its own build for PDP.
-        //       Consider removing this fragment if it's confirmed to be obsolete, or document why it might still be needed.
-
-        // Wick.MiniBasket && Wick.MiniBasket.showJustAdded();
+        Wick.MiniBasket && Wick.MiniBasket.showJustAdded();
       });
   }
 

package/src/layouts/base.hbs

@@ -42,12 +42,6 @@
       {{> footer }}
     {{/block}}
 
-    {{#if miniBasketEmpty}}
-      {{> mini-basket/mini-basket-empty }}
-    {{else}}
-      {{> mini-basket/mini-basket }}
-    {{/if}}
-
     {{#block "foot"}}
       {{> scripts }}
     {{/block}}

package/src/layouts/my-account-v2.hbs

@@ -21,13 +21,6 @@
 {{#block "footer"}}
   {{> footer }}
 {{/block}}
-
-{{#if miniBasketEmpty}}
-  {{> mini-basket/mini-basket-empty }}
-{{else}}
-  {{> mini-basket/mini-basket }}
-{{/if}}
-
 {{#block "foot"}}
   {{> scripts}}
 {{/block}}

package/src/page_basket-billie.html

@@ -0,0 +1,54 @@
+{{#extend "basket-new" page_shopping-cart pageClass="page_basket basket" title="Basket-Billie" clearPayIcon=true pageBasket=true billieIcon=true}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/page_shopping-cart-v2.css">
+<link type="text/css" rel="stylesheet" href="./css/pages/checkout-new.css">
+{{/content}}
+{{#content "heading"}}
+<div class="notification-area pr-0 pl-0">
+  {{> notifications notification-page.warning-tiles-changed withCloseBtn="true"}}
+</div>
+<div class="checkout-header__promo">
+  {{#each shopping-cart-v2.potentialOrderPromotions}}
+  {{> potential-promotion}}
+  {{/each}}
+</div>
+{{> checkout-header shopping-cart-v2.header}}
+{{/content}}
+{{#content "aside"}}
+{{> order-summary
+shopping-cart-v2.checkout
+id=1
+title="Order Summary"
+basket=true
+clearPayIcon=clearPayIcon
+billie-placement=true
+clearpay-placement=true
+klarna-placement=false
+billieIcon=true
+paymentsCheckoutV2=true
+}}
+{{> checkout-action  mod="mounted"}}
+{{> summary-payment paymentsCheckoutV2="true" billieIcon=true}}
+{{> checkout-action  mod="large"}}
+{{/content}}
+{{#content "main"}}
+<input type="hidden" id="SUPPLIER_DELIVERED_7_DAYS" value="<b> Wickes Supplier </b> - Delivery within 7 days">
+<input type="hidden" id="STANDARD" value="<b> STANDARD </b> - Delivery within 1 day">
+<input type="hidden" id="canDisplayPayPalOnBasketPage" value="true">
+{{#each shopping-cart-v2.sections }}
+<section class="basket__section" data-type="{{type}}">
+  {{> checkout-section-title title=type items-count=items-count}}
+  {{#each items}}
+  {{> order-item}}
+  {{/each}}
+</section>
+{{/each}}
+{{> charity-donations-multiple shopping-cart-v2.charityDonationMultiple}}
+{{> checkout-action}}
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/basket.min.js"></script>
+<script defer src="./js/page/components/modal-observer.js"></script>
+{{> billie-modal }}
+{{/content}}
+{{/extend}}

package/src/page_checkout_confirmation-billie.html

@@ -0,0 +1,339 @@
+{{#extend "checkout-new" pageClass="page_checkout page_checkout-confirmation-new" title="Checkout - Confirmation"
+logout=true}}
+{{#content "steps"}}
+<div class="header-wrap">
+  <h1 class="header__title">Order Confirmation</h1>
+  <p class="header__order-block">Order number: <span class="header__order-number">143402004</span></p>
+</div>
+{{/content}}
+{{#content "main"}}
+
+<div class="confirmation-result-wrap">
+  <div class="confirmation-result__notif">
+    <span class="notif-check"><i class="fas fa-check"></i></span>
+    <span class="notif-info">Your Order Was Successful!</span>
+  </div>
+
+  <p class="confirmation-result__info">
+    We have emailed your order confirmation to <a href="mailto:petra.mendez@gmail.com">petra.mendez@gmail.com</a> with details of when your order will be delivered. This email will also contain our contact details should you wish to get in touch with us.
+  </p>
+
+  <div class="confirmation-result__action">
+    <a href="https://www.wickes.co.uk/track-my-order" class="btn btn-primary"><i class="fas fa-map-marked-alt"></i> Track My Order</a>
+    <a href="https://www.wickes.co.uk/my-account/orders" class="btn btn-primary">View My Order</a>
+    <a href="./" class="btn btn-secondary">Return Shopping</a>
+  </div>
+</div>
+
+{{#with checkoutOrder.delivery.[0]}}
+{{>checkout-order}}
+{{/with}}
+
+
+{{#with checkoutOrder.clickCollect.[0]}}
+{{>checkout-order}}
+{{/with}}
+
+
+{{#with checkoutOrder.charity.[0]}}
+{{>checkout-order charity="true"}}
+{{/with}}
+
+
+{{> checkout_payment-new billie=true}}
+{{> checkout_order-summary-new label="Subtotal:" confirmationSummary="true"}}
+
+<form class="checkout-tradepro form-bg">
+  <div class="checkout-tradepro__row">
+    <div class="checkout-tradepro__descr">
+      <div class="checkout-tradepro__info-wrap">
+        <div class="checkout-tradepro__info">
+          It looks like you're in the Trade?
+          You could be eligible to join TradePro and get
+          <strong>10% off future purchases whenever you shop in-store or online.</strong>
+        </div>
+        <a href="#" class="checkout-tradepro__learn-more">Learn more about TradePro</a>
+      </div>
+      <h3>TradePro Signup</h3>
+      <div class="warning-required">Required fields</div>
+      <h3 class="checkout-tradepro__title">Proof of Trade ID</h3>
+      <p class="checkout-tradepro__paragraph warning-required">
+        Please supply two forms of approved ID
+      </p>
+
+      <div class="signup-tradepro__attach checkout-tradepro__attach_id">
+        {{> attach-make make-attachment=true}}
+        {{> modal id="attac"}}
+        {{#extend "modal" id="attach" title="Choose Type of ID" fullWidth=true classMod="id-type"}}
+        {{#content "sections"}}
+
+        {{#extend "modal-body-section" customSectionClass="id-type-signup"}}
+        {{#content "body"}}
+        {{> notifications notification-page.warning withCloseBtn="true"
+        text="Unable to attach file. Only JPG, PNG, GIF, BMP, WEBP, TIFF and HEIF image files are supported."}}
+        <div class="signup-tradepro__modal-info">
+          Select two forms of ID.
+          <div class="tradepro-id-counter_wrap">
+            <span>1</span>
+            of
+            <span>2</span>
+          </div>
+          ID's chosen
+        </div>
+        <div class="signup-tradepro__modal-fields">
+          <div class="tradepro-field">
+              <span class="icon icon__link inactive-el">
+                <i class="far fa-link"></i>
+              </span>
+            <a href="#" class="signup-tradepro__modal-trigger inactive-el">Trade business website</a>
+            <div class="signup-tradepro__modal-action">
+              <div class="form-row" data-row-required="">
+                <label class="form-row__label"></label>
+                <div class="form-row__field">
+                  {{> input need-pattern=true}}
+                  <div class="form-row__error">{{error}}</div>
+                </div>
+              </div>
+              <div class="signup-tradepro__modal-buttons">
+                <div class="row">
+                  <div class="button-done">
+                    <button class="btn btn-primary">
+                      Done
+                    </button>
+                  </div>
+                  <div class="button-cancel">
+                    <button class="btn btn-secondary">
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="tradepro-field">
+              <span class="icon icon__link">
+                <i class="far fa-link"></i>
+              </span>
+            <span class="icon icon__pencil">
+                <i class="far fa-pencil"></i>
+              </span>
+            <a href="#" class="signup-tradepro__modal-trigger">Check a trade profile</a>
+            <div class="signup-tradepro__modal-action">
+              <div class="form-row" data-row-required="">
+                <label class="form-row__label"></label>
+                <div class="form-row__field">
+                  {{> input need-pattern=true}}
+                  <div class="form-row__error">{{error}}</div>
+                </div>
+              </div>
+              <div class="signup-tradepro__modal-buttons">
+                <div class="row">
+                  <div class="button-done">
+                    <button class="btn btn-primary">
+                      Done
+                    </button>
+                  </div>
+                  <div class="button-cancel">
+                    <button class="btn btn-secondary">
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="tradepro-field">
+              <span class="icon icon__link">
+                <i class="far fa-link"></i>
+              </span>
+            <a href="#" class="signup-tradepro__modal-trigger">Facebook trade business page</a>
+            <span class="icon icon__notification">
+                <span class="fas fa-check-circle"></span>
+              </span>
+            <div class="signup-tradepro__modal-action">
+              <div class="form-row" data-row-required="">
+                <label class="form-row__label"></label>
+                <div class="form-row__field">
+                  {{> input need-pattern=true}}
+                  <div class="form-row__error">{{error}}</div>
+                </div>
+              </div>
+              <div class="signup-tradepro__modal-buttons">
+                <div class="row">
+                  <div class="button-done">
+                    <button class="btn btn-primary">
+                      Done
+                    </button>
+                  </div>
+                  <div class="button-cancel">
+                    <button class="btn btn-secondary">
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="tradepro-field">
+              <span class="icon icon__link">
+                <i class="far fa-link"></i>
+              </span>
+            <a href="#" class="signup-tradepro__modal-trigger">Mybuilder profile</a>
+            <div class="signup-tradepro__modal-action">
+              <div class="form-row" data-row-required="">
+                <label class="form-row__label"></label>
+                <div class="form-row__field">
+                  {{> input need-pattern=true}}
+                  <div class="form-row__error">{{error}}</div>
+                </div>
+              </div>
+              <div class="signup-tradepro__modal-buttons">
+                <div class="row">
+                  <div class="button-done">
+                    <button class="btn btn-primary">
+                      Done
+                    </button>
+                  </div>
+                  <div class="button-cancel">
+                    <button class="btn btn-secondary">
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="tradepro-field">
+              <span class="icon icon__paperclip">
+                <i class="far fa-paperclip"></i>
+              </span>
+            {{> attach-make make-capture=true}}
+            <input class="tradepro-attachment" type="file" accept="image/*" capture>
+          </div>
+          <div class="tradepro-field">
+            <img src="img/placeholders/thumbnail-sm.png"/>
+            <span class="icon icon__paperclip">
+                  <i class="far fa-paperclip"></i>
+                </span>
+            <span class="icon icon__camera">
+                <i class="far fa-camera"></i>
+              </span>
+            <a href="#" class="signup-tradepro__modal-trigger">Letterhead</a>
+            <input class="tradepro-attachment" type="file" accept="image/*" capture>
+          </div>
+          <div class="tradepro-field">
+              <span class="icon icon__paperclip">
+                <i class="far fa-paperclip"></i>
+              </span>
+            <span class="icon icon__camera">
+                <i class="far fa-camera"></i>
+              </span>
+            <a href="#" class="signup-tradepro__modal-trigger">Compliment slip</a>
+            <input class="tradepro-attachment" type="file" accept="image/*" capture>
+          </div>
+          <div class="tradepro-field">
+              <span class="icon icon__edit">
+                <i class="fas fa-edit"></i>
+              </span>
+            <a href="#" class="signup-tradepro__modal-trigger">Ltd company: Registration number</a>
+            <div class="signup-tradepro__modal-action">
+              <div class="form-row" data-row-required="">
+                <label class="form-row__label"></label>
+                <div class="form-row__field">
+                  {{> input need-pattern=true}}
+                  <div class="form-row__error">{{error}}</div>
+                </div>
+              </div>
+              <div class="signup-tradepro__modal-buttons">
+                <div class="row">
+                  <div class="button-done">
+                    <button class="btn btn-primary">
+                      Done
+                    </button>
+                  </div>
+                  <div class="button-cancel">
+                    <button class="btn btn-secondary">
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="tradepro-field">
+              <span class="icon icon__edit">
+                <i class="fas fa-edit"></i>
+              </span>
+            <a href="#" class="signup-tradepro__modal-trigger">Plc: Registration number</a>
+            <div class="signup-tradepro__modal-action">
+              <div class="form-row" data-row-required="">
+                <label class="form-row__label"></label>
+                <div class="form-row__field">
+                  {{> input need-pattern=true}}
+                  <div class="form-row__error">{{error}}</div>
+                </div>
+              </div>
+              <div class="signup-tradepro__modal-buttons">
+                <div class="row">
+                  <div class="button-done">
+                    <button class="btn btn-primary">
+                      Done
+                    </button>
+                  </div>
+                  <div class="button-cancel">
+                    <button class="btn btn-secondary">
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        {{/content}}
+        {{/extend}}
+
+        {{/content}}
+        {{/extend}}
+      </div>
+      <div class="chosen-form-container">
+        <div class="chosen-form-wrap">
+          <div class="chosen-form">
+            <div>
+              <img class="mr-2" src="img/placeholders/thumbnail-sm.png"/>
+              Trade business website
+            </div>
+            <span class="icon icon__notification">
+              <span class="fas fa-check-circle"></span>
+            </span>
+          </div>
+          <div class="form-row__error">Error message here</div>
+          <div class="chosen-form">
+            <div>
+              <img class="mr-2" src="img/placeholders/thumbnail-sm.png"/>
+              Ltd company: Registration number
+            </div>
+
+            <span class="icon icon__notification">
+              <span class="fas fa-check-circle"></span>
+            </span>
+          </div>
+          <div class="form-row__error">Error message here</div>
+        </div>
+      </div>
+      {{> signup-form}}
+    </div>
+  </div>
+</form>
+
+{{/content}}
+
+{{#content "aside"}}
+{{> checkout_information info-icon="true"}}
+{{/content}}
+
+{{#content "foot" mode="append"}}
+<script defer src="./js/page/checkout-confirmation-new.js"></script>
+{{/content}}
+
+{{/extend}}

package/src/page_checkout_delivery-address-customer-journey.html

@@ -1,4 +1,4 @@
-{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout page_checkout-confirmation-new" title="Checkout - Delivery address Customer Journey" isAsideSticky="true"}}
+{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout page_checkout-confirmation-new" title="Checkout - Delivery address Customer Journey" isAsideSticky="true" billieIcon=true}}
 {{#content "steps"}}
 {{> steps active-step-index="1" }}
 {{/content}}
@@ -9,7 +9,7 @@
   {{/content}}
 
   {{#content "aside"}}
-    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true}}
+    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true billieIcon=true}}
   {{/content}}