wickes-css2 2.96.0-develop.1 → 2.96.0-develop.3

package/src/js/components/cards-slider.js

@@ -0,0 +1,62 @@
+function isElementInHorizontalViewport(el) {
+  if (typeof jQuery === 'function' && el instanceof jQuery) {
+      el = el[0];
+  }
+  var rect = el.getBoundingClientRect();
+  return (
+      rect.left >= 0 &&
+      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  );
+}
+
+$(document).ready(function () {
+  $('.cards-slider').each(function (index, slider) {
+    var $slider = $(slider);
+    var $container = $slider.find('.swiper-container');
+    var $nextBtn = $slider.find('.cards-slider__next-btn');
+    var $prevBtn = $slider.find('.cards-slider__prev-btn');
+    var $pagination = $slider.find('.swiper-pagination');
+
+    // eslint-disable-next-line no-undef
+    var swiper = new Swiper($container[0], {
+      speed: 400,
+      spaceBetween: 24,
+      slidesPerView: 'auto',
+      navigation: {
+        nextEl: $nextBtn[0],
+        prevEl: $prevBtn[0],
+      },
+      pagination: {
+        el: $pagination[0],
+        type: 'bullets',
+        bulletClass: 'swiper-pagination-bullet',
+        bulletActiveClass: 'swiper-pagination-bullet-active',
+      },
+      breakpoints: {
+        767: {
+          spaceBetween: 16,
+        },
+      },
+    });
+
+    function isEverySlideVisible() {
+      var $slides = $slider.find('.cards-swiper-wrapper .swiper-slide');
+      return $slides.filter((index, slide) => isElementInHorizontalViewport($(slide))).length === $slides.length;
+    }
+
+    function updateUI() {
+      if (isEverySlideVisible()) {
+        $slider.addClass('cards-slider--fits');
+      } else {
+        $slider.removeClass('cards-slider--fits');
+      }
+    }
+
+    $(window).on('resize', _.debounce(function () {
+      swiper.update();
+      updateUI();
+    }, 250));
+
+    updateUI();
+  });
+});

package/src/js/components/general/main-nav.js

@@ -34,7 +34,7 @@ Wick.MainNav = (function () {
                       <ul class="main-nav__menu">
                           ${menuSection.children.map(createMainNavItems).join('')}
                       </ul>
-                    </div>
+                  </div>
                 </li>
               `
           } else {
@@ -66,6 +66,9 @@ Wick.MainNav = (function () {
       function createMainNavItems(menuSection) {
         if (menuSection) {
           if (menuSection.children && menuSection.children.length) {
+            if(menuSection.originalChildrenCount) {
+              console.log(menuSection)
+            }
             return `
               <li class="main-nav__menu__item nav-col">
                 <a href="${checkUrl(menuSection)}" class="main-nav__menu__label ${setClass(menuSection, 2)}" tabindex="0" ${setColor(menuSection)}>
@@ -259,25 +262,31 @@ Wick.MainNav = (function () {
         });
       }
 
-      checkIfRealEnvironment();
+      function isSSR() {
+        return $mainNav.attr('data-ssr') === 'true'
+      }
+
+      if (isSSR()) {
+        Wick.Nav();
+        Wick.Responsive.callBr();
+      } else {
+        checkIfRealEnvironment();
+      }
     }
   }
 })();
 
 $(document).ready(function () {
-  function init() {
-    const defaultOptions = {
-      type: 'GET',
-      cache: true,
-      link: window.location.origin,
-      local: false
-    };
+  const defaultOptions = {
+    type: 'GET',
+    cache: true,
+    link: window.location.origin,
+    local: false
+  };
 
-    if (!$('#main-nav').length) {
-      return;
-    }
-    Wick.MainNav.createMainNav(defaultOptions);
+  if (!$('#main-nav').length) {
+    return;
   }
 
-  init();
+  Wick.MainNav.createMainNav(defaultOptions);
 });

package/src/js/emulation/main-nav-local.js

@@ -1,19 +1,21 @@
 var Wick = Wick || {};
-Wick.MainNavLocal = (function(){
+
+Wick.MainNavLocal = function(){
     function init() {
         var localOptions = {
             local: true,
             mockData: Wick.MainNavData.returnData()
         };
 
-        if (!$('#main-nav').length) {
+        if (!$('#main-nav').length || !$('.ssc-nav').length) {
             return;
         }
         
+
         setTimeout(()=> {
             Wick.MainNav.createMainNav(localOptions);
         }, 2000)
     }
 
-    init();
-})();
+    init()
+}();

package/src/js/emulation/vat-toggle.js

@@ -0,0 +1,3 @@
+window.ACC = window.ACC || {};
+window.ACC.app = window.ACC.app || {};
+window.ACC.app.isVatToggleAvailable = !!$('.switch-vat input').length;

package/src/js/page/tradePro-rewards.js

@@ -0,0 +1,46 @@
+import {copyToClipboard} from "./utils/copy-to-clipboard";
+
+var Wick = window.Wick || {};
+
+Wick.TradeProRewards = {
+  el: {
+    $tradeProRewards: $('.page_tradePro-rewards'),
+    buttonSelector: '.copy-tradePro-barcode',
+  },
+  message: 'Code copied to clipboard',
+  copyToClipboardInit() {
+    Wick.SnackBar.init();
+    $(Wick.TradeProRewards.el.buttonSelector).on('click', function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      var discountCode = $(this).parent().find('input');
+      var discountCodeValue = discountCode.val().trim();
+      discountCode.removeAttr('disabled').attr('readonly', 'readonly');
+
+      copyToClipboard(discountCodeValue, e.currentTarget);
+
+      discountCode.attr('disabled', 'disabled').removeAttr('readonly');
+      window.getSelection().removeAllRanges();
+
+      Wick.SnackBar.show(
+        {
+          text: Wick.TradeProRewards.message,
+          type: Wick.SnackBar.types.SUCCESS,
+          withCloseButton: false,
+          autoClose: true,
+          delayBeforeClose: 3000
+        }
+      );
+      return false;
+    });
+  },
+  init() {
+    Wick.TradeProRewards.copyToClipboardInit();
+  }
+}
+
+$(document).ready(function () {
+  if (Wick.TradeProRewards.el.$tradeProRewards.length) {
+    Wick.TradeProRewards.init();
+  }
+});

package/src/page_old-navigation.html

@@ -0,0 +1,10 @@
+{{#extend "base" pageClass="" title="Old navigation" oldNav=true hideBreadcrumbs=true pageBasket=true}}
+{{#content "body"}}
+  <main>
+    <div class="container">
+      <h1 class="page-header__title">That example old navigation</h1>
+      <p class="page-header__intro">Must be skeleton and after loading navigation</p>
+    </div>
+  </main>
+{{/content}}
+{{/extend}}

package/src/page_tradePro_rewards_home.html

@@ -0,0 +1,46 @@
+{{#extend "my-account-v2"
+  pageClass="page_tradePro-rewards"
+  title="TradePro Rewards"
+  logo-tp=true
+  tradepro-nav=true
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  mainClass="pt-0"
+  dataBreadcrumbs=my_account.tradeProRewards.breadcrumbsHomePage
+}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/tradePro-rewards.css">
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+          menu=my_account.tradepro.menu
+          active-index=4
+          page-name=my_account.tradepro.menu.[4].title
+      }}
+    </div>
+  </div>
+</div>
+
+{{#extend "cards-slider"
+  title="TradePro Rewards"
+}}
+  {{#content "cards"}}
+    {{#each page_tradePro_cards.reward_cards}}
+      {{> reward_card
+        modificator="swiper-slide"
+        imgSrc=imgSrc
+        title=title
+        description=description
+        btnText=btnText
+        btnUrl=btnUrl
+      }}
+    {{/each}}
+  {{/content}}
+{{/extend}}
+
+{{/content}}
+{{/extend}}

package/src/page_tradePro_rewards_home_single.html

@@ -0,0 +1,44 @@
+{{#extend "my-account-v2"
+  pageClass="page_tradePro-rewards"
+  title="TradePro Rewards"
+  logo-tp=true tradepro-nav=true
+  pageMyAcc=true myAccV2=true
+  isLoggedIn=true
+  mainClass="pt-0"
+  dataBreadcrumbs=my_account.tradeProRewards.breadcrumbsHomePage
+}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/tradePro-rewards.css">
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+          menu=my_account.tradepro.menu
+          active-index=4
+          page-name=my_account.tradepro.menu.[4].title
+      }}
+    </div>
+  </div>
+</div>
+
+{{#extend "cards-slider"
+  title="TradePro Rewards"
+}}
+  {{#content "cards"}}
+    {{#each page_tradePro_cards.reward_card}}
+      {{> reward_card
+        modificator="swiper-slide"
+        imgSrc=imgSrc
+        title=title
+        description=description
+        btnText=btnText
+        btnUrl=btnUrl
+      }}
+    {{/each}}
+  {{/content}}
+{{/extend}}
+
+{{/content}}
+{{/extend}}

package/src/page_tradePro_rewards_instore.html

@@ -0,0 +1,67 @@
+{{#extend
+  "my-account-v2"
+  pageClass="page_tradePro-rewards"
+  title="TradePro Rewards"
+  logo-tp=true
+  tradepro-nav=true
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  mainClass="pt-0"
+  dataBreadcrumbs=my_account.tradeProRewards.breadcrumbsDetailsPage
+}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/tradePro-rewards.css">
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+          menu=my_account.tradepro.menu
+          active-index=4
+          page-name=my_account.tradepro.menu.[4].title
+      }}
+    </div>
+  </div>
+</div>
+
+<div class="container top-indent">
+  <div class="row">
+    <div class="col-12">
+      {{#with page_tradePro_vouchers.instore}}
+        <h1 class="text-start">{{title}}</h1>
+        {{> voucher
+          mod="mb-1"
+        }}
+      {{/with}}
+      {{#extend "accordion" header=page_tradePro_vouchers.terms.title collapsed="accordion_collapsed voucher--terms" hidden="hidden-state"}}
+        {{#content "content"}}{{page_tradePro_vouchers.terms.text}}{{/content}}
+      {{/extend}}
+    </div>
+  </div>
+</div>
+
+{{#extend "cards-slider"
+  title="Other TradePro Rewards"
+  secondary=true
+}}
+  {{#content "cards"}}
+    {{#each page_tradePro_cards.reward_cards}}
+      {{> reward_card
+        modificator="swiper-slide"
+        imgSrc=imgSrc
+        title=title
+        description=description
+        btnText=btnText
+        btnUrl=btnUrl
+      }}
+    {{/each}}
+  {{/content}}
+{{/extend}}
+
+{{/content}}
+{{#content "foot" mode="append"}}
+  <script defer src="./js/tradePro-rewards.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/page_tradePro_rewards_instoreAndOnline.html

@@ -0,0 +1,65 @@
+{{#extend
+  "my-account-v2"
+  pageClass="page_tradePro-rewards"
+  title="TradePro Rewards"
+  logo-tp=true
+  tradepro-nav=true
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  mainClass="pt-0"
+  dataBreadcrumbs=my_account.tradeProRewards.breadcrumbsDetailsPage
+}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/tradePro-rewards.css">
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+          menu=my_account.tradepro.menu
+          active-index=4
+          page-name=my_account.tradepro.menu.[4].title
+      }}
+    </div>
+  </div>
+</div>
+
+<div class="container top-indent">
+  <div class="row">
+    <div class="col-12">
+      {{#with page_tradePro_vouchers.instoreAndOnline}}
+        <h1 class="text-start">{{title}}</h1>
+        {{> voucher}}
+      {{/with}}
+      {{#extend "accordion" header=page_tradePro_vouchers.terms.title collapsed="accordion_collapsed voucher--terms" hidden="hidden-state"}}
+        {{#content "content"}}{{page_tradePro_vouchers.terms.text}}{{/content}}
+      {{/extend}}
+    </div>
+  </div>
+</div>
+
+{{#extend "cards-slider"
+  title="Other TradePro Rewards"
+  secondary=true
+}}
+  {{#content "cards"}}
+    {{#each page_tradePro_cards.reward_cards}}
+      {{> reward_card
+        modificator="swiper-slide"
+        imgSrc=imgSrc
+        title=title
+        description=description
+        btnText=btnText
+        btnUrl=btnUrl
+      }}
+    {{/each}}
+  {{/content}}
+{{/extend}}
+
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/tradePro-rewards.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/page_tradePro_rewards_noInstoreAndOnline.html

@@ -0,0 +1,65 @@
+{{#extend
+  "my-account-v2"
+  pageClass="page_tradePro-rewards"
+  title="TradePro Rewards"
+  logo-tp=true
+  tradepro-nav=true
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  mainClass="pt-0"
+  dataBreadcrumbs=my_account.tradeProRewards.breadcrumbsDetailsPage
+}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/tradePro-rewards.css">
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+          menu=my_account.tradepro.menu
+          active-index=4
+          page-name=my_account.tradepro.menu.[4].title
+      }}
+    </div>
+  </div>
+</div>
+
+<div class="container top-indent">
+  <div class="row">
+    <div class="col-12">
+      {{#with page_tradePro_vouchers.noInstoreAndOnline}}
+        <h1 class="text-start">{{title}}</h1>
+        {{> voucher}}
+      {{/with}}
+      {{#extend "accordion" header=page_tradePro_vouchers.terms.title collapsed="accordion_collapsed voucher--terms" hidden="hidden-state"}}
+        {{#content "content"}}{{page_tradePro_vouchers.terms.text}}{{/content}}
+      {{/extend}}
+    </div>
+  </div>
+</div>
+
+{{#extend "cards-slider"
+  title="Other TradePro Rewards"
+  secondary=true
+}}
+  {{#content "cards"}}
+    {{#each page_tradePro_cards.reward_cards}}
+      {{> reward_card
+        modificator="swiper-slide"
+        imgSrc=imgSrc
+        title=title
+        description=description
+        btnText=btnText
+        btnUrl=btnUrl
+      }}
+    {{/each}}
+  {{/content}}
+{{/extend}}
+
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/tradePro-rewards.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/page_tradePro_rewards_noOptional.html

@@ -0,0 +1,65 @@
+{{#extend
+  "my-account-v2"
+  pageClass="page_tradePro-rewards"
+  title="TradePro Rewards"
+  logo-tp=true
+  tradepro-nav=true
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  mainClass="pt-0"
+  dataBreadcrumbs=my_account.tradeProRewards.breadcrumbsDetailsPage
+}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/tradePro-rewards.css">
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+          menu=my_account.tradepro.menu
+          active-index=4
+          page-name=my_account.tradepro.menu.[4].title
+      }}
+    </div>
+  </div>
+</div>
+
+<div class="container top-indent">
+  <div class="row">
+    <div class="col-12">
+      {{#with page_tradePro_vouchers.noOptional}}
+        <h1 class="text-start">{{title}}</h1>
+        {{> voucher}}
+      {{/with}}
+      {{#extend "accordion" header=page_tradePro_vouchers.terms.title collapsed="accordion_collapsed voucher--terms" hidden="hidden-state"}}
+        {{#content "content"}}{{page_tradePro_vouchers.terms.text}}{{/content}}
+      {{/extend}}
+    </div>
+  </div>
+</div>
+
+{{#extend "cards-slider"
+  title="Other TradePro Rewards"
+  secondary=true
+}}
+  {{#content "cards"}}
+    {{#each page_tradePro_cards.reward_cards}}
+      {{> reward_card
+        modificator="swiper-slide"
+        imgSrc=imgSrc
+        title=title
+        description=description
+        btnText=btnText
+        btnUrl=btnUrl
+      }}
+    {{/each}}
+  {{/content}}
+{{/extend}}
+
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/tradePro-rewards.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/page_tradePro_rewards_online.html

@@ -0,0 +1,65 @@
+{{#extend
+  "my-account-v2"
+  pageClass="page_tradePro-rewards"
+  title="TradePro Rewards"
+  logo-tp=true
+  tradepro-nav=true
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  mainClass="pt-0"
+  dataBreadcrumbs=my_account.tradeProRewards.breadcrumbsDetailsPage
+}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/tradePro-rewards.css">
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+          menu=my_account.tradepro.menu
+          active-index=4
+          page-name=my_account.tradepro.menu.[4].title
+      }}
+    </div>
+  </div>
+</div>
+
+<div class="container top-indent">
+  <div class="row">
+    <div class="col-12">
+      {{#with page_tradePro_vouchers.online}}
+        <h1 class="text-start">{{title}}</h1>
+        {{> voucher}}
+      {{/with}}
+      {{#extend "accordion" header=page_tradePro_vouchers.terms.title collapsed="accordion_collapsed voucher--terms" hidden="hidden-state"}}
+        {{#content "content"}}{{page_tradePro_vouchers.terms.text}}{{/content}}
+      {{/extend}}
+    </div>
+  </div>
+</div>
+
+{{#extend "cards-slider"
+  title="Other TradePro Rewards"
+  secondary=true
+}}
+  {{#content "cards"}}
+    {{#each page_tradePro_cards.reward_cards}}
+      {{> reward_card
+        modificator="swiper-slide"
+        imgSrc=imgSrc
+        title=title
+        description=description
+        btnText=btnText
+        btnUrl=btnUrl
+      }}
+    {{/each}}
+  {{/content}}
+{{/extend}}
+
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/tradePro-rewards.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/partials/main-nav.hbs

@@ -1,6 +1,10 @@
 <a id="skip-to-navigation"></a>
-<nav class="main-nav" id="main-nav">
-  {{>skeleton-nav}}
+<nav class="main-nav" id="main-nav" data-ssr="{{#unless oldNav}}true{{/unless}}">
+  {{#if oldNav}}
+    {{> skeleton-nav}}
+  {{else}}
+    {{> navigation/nav-wrapper }}
+  {{/if }}
   {{#unless tradepro-nav}}
     <div class="main-nav__button" data-logged-in="false">
       <a href="/login.html" class="nav-button">

package/src/scss/components/_accordion.scss

@@ -142,3 +142,7 @@
     }
   }
 }
+
+.hidden-state {
+  display: none;
+}