wickes-css2 2.98.0-develop.2 → 2.98.0-develop.3

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

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

package/src/js/page/default-store.js

@@ -18,7 +18,7 @@ Wick.DefaultStore = {
     const dropdowns = $("#openingTimes, #specialTimes, #facilities");
     const btn = $('[data-toggle="collapse"]');
 
-    if ($(window).width() >= 768) {
+    if (Wick.Responsive.getCurrentBreakpoint() !== 'down-sm') {
       dropdowns.addClass("show");
       if (btn.length) {
         btn.attr("aria-expanded", "true");
@@ -32,9 +32,6 @@ Wick.DefaultStore = {
   },
   init () {
     Wick.DefaultStore.updateCollapseState();
-    $(window).resize( _.debounce(function () {
-      Wick.DefaultStore.updateCollapseState();
-    }, 200));
     Wick.DefaultStore.el.$searchInput.on('input', Wick.DefaultStore.checkVisibilityOfClearButton);
   }
 }

package/src/js/page/my-account.js

@@ -1,10 +1,13 @@
 import {copyToClipboard} from "./utils/copy-to-clipboard";
+import {isApp} from "./utils/helpers";
 
 var Wick = window.Wick || {};
 
 Wick.MyAccount = {
   el: {
-    $myAccount: $('.my-account'),
+    $clipboardCode: $('.clipboard-code'),
+    appInfo: '.app-info',
+    hideAppInfo: 'app-info--hide'
   },
   clipboardCodes: {
     tradeProId: {
@@ -39,11 +42,15 @@ Wick.MyAccount = {
       const { btnCopy } = Wick.MyAccount.clipboardCodes[codeType];
       $(btnCopy).on('click', () => Wick.MyAccount.copyCode(codeType));
     });
+
+    if($(Wick.MyAccount.el.appInfo).length && isApp()) {
+      $(Wick.MyAccount.el.appInfo).addClass(Wick.MyAccount.el.hideAppInfo);
+    }
   }
 }
 
 $(document).ready(function () {
-  if (!Wick.MyAccount.el.$myAccount.length) {
+  if (!Wick.MyAccount.el.$clipboardCode.length) {
     return;
   }
 

package/src/js/page/personal-details.js

@@ -25,7 +25,9 @@ Wick.PersonalDetails = {
     notification: '.notification',
     fieldError: '.form-row.form-row_validation-error',
     changePasswordPopup: '#change-password-popup',
+    confirmationEmailPopup: '#confirmation-email-popup',
     globalMessage: '.globalMessages',
+    newEmailElement: '.new-email',
   },
   errorMessages: {
     errorFirstName: 'Please enter your first name',
@@ -150,10 +152,25 @@ Wick.PersonalDetails = {
       });
     }
   },
+  showConfirmationEmailPopup(currentEmail) {
+    const $popup = $(Wick.PersonalDetails.el.confirmationEmailPopup);
+    $popup.find(Wick.PersonalDetails.el.newEmailElement).text(currentEmail);
+    $popup.modal('show');
+
+    $popup.find(Wick.PersonalDetails.el.btnContinue).off('click').on('click', function () {
+      Wick.LeaveEvent.removeLeaveEvent();
+      $popup.modal('hide');
+      Wick.PersonalDetails.requestToUpdateForm();
+    });
+  },
   submitForm(event) {
     event.preventDefault();
     Wick.PersonalDetails.trimAndRewriteInputs(Wick.PersonalDetails.el.userForm);
 
+    const currentState = Wick.LeaveEvent.getState(Wick.PersonalDetails.el.userForm);
+    const initialEmail = Wick.LeaveEvent.initialFormState.find(field => field.name === 'email')?.value;
+    const currentEmail = currentState.find(field => field.name === 'email')?.value;
+
     if (!Wick.PersonalDetails.hasUnsavedChanges()) {
       Wick.PersonalDetails.hideForm();
       $(Wick.PersonalDetails.el.notification).remove();
@@ -162,7 +179,11 @@ Wick.PersonalDetails = {
     }
 
     if (Wick.PersonalDetails.validateForm()) {
-      Wick.PersonalDetails.requestToUpdateForm();
+      if (initialEmail !== currentEmail) {
+        Wick.PersonalDetails.showConfirmationEmailPopup(currentEmail);
+      } else {
+        Wick.PersonalDetails.requestToUpdateForm();
+      }
     } else {
       Wick.Notification.show({
         ...Wick.PersonalDetails.defaultNotificationConfig,

package/src/page_my-account-installer.html

@@ -1,11 +1,12 @@
 {{#extend "my-account-v2"
-  customIconUserClass=my_account.installer.icons.installer
+  customIconUserClass=header_menu.installer.[0].items.[0].icon
   dataBreadcrumbs=my_account.installer.breadcrumbs
   pageClass="page_my-account_new"
   title=my_account.installer.title
   pageMyAcc=true
   myAccV2=true
   isLoggedIn=true
+  installer-nav=true
   mainClass="my-account"
   switch-vat=true
 }}

package/src/page_my-account-trade-pro.html

@@ -7,6 +7,7 @@
   pageMyAcc=true
   myAccV2=true
   isLoggedIn=true
+  tradepro-nav=true
   mainClass="my-account"
   switch-vat=true
 }}

package/src/page_my-account.html

@@ -1,4 +1,13 @@
-{{#extend "my-account-v2" dataBreadcrumbs=my_account.diy.breadcrumbs pageClass="page_my-account_new" title="My Account DIY" pageMyAcc=true myAccV2=true isLoggedIn=true mainClass="my-account"}}
+{{#extend
+  "my-account-v2"
+  dataBreadcrumbs=my_account.diy.breadcrumbs
+  pageClass="page_my-account_new"
+  title="My Account DIY"
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  mainClass="my-account"
+}}
 {{#content "main"}}
 <div class="container">
   <div class="row">

package/src/page_personal-details.html

@@ -56,6 +56,11 @@
     mod="details-modal"
     id="change-password-popup"
 }}
+{{> my-account/leave-modal
+    personal_details.confirmation-popup
+    mod="details-modal"
+    id="confirmation-email-popup"
+}}
 <script defer src="./js/my-account.min.js"></script>
 <script defer src="./js/personal-details.min.js"></script>
 {{/content}}

package/src/page_plp_v2-vat.html

@@ -9,6 +9,12 @@
                     <h1 class="page-header__title">
                         Fire Doors
                     </h1>
+
+                    <div class="srp-injected">
+                        <div class="srp-injected__content">
+                            <p>Outdoor wall lights are a stylish, yet effective solution to keeping your garden glowing as the day draws to a close. Whether it’s an extra bit of security from one of our outdoor wall lights with sensors, or a more vibrant, decorative addition, our full range of outdoor lighting is designed to bring a touch of life to your surroundings.</p>
+                        </div>
+                    </div>
                 </div>
 
                 <div class="row">
@@ -59,9 +65,9 @@
                 </div>
             </div>
             {{> legal-info}}
-    
+
             {{> similar-products-v2 }}
-    
+
             {{> seo-widgets title="More products" }}
             {{> seo-widgets title="Related category" }}
 

package/src/page_shopping-cart-charity.html

@@ -0,0 +1,56 @@
+{{#extend "right-aside" page_shopping-cart pageClass="page_basket" title="Basket" pageBasket=true}}
+  {{#content "head" mode="append"}}
+    <link type="text/css" rel="stylesheet" href="./css/pages/page_shopping-cart.css">
+    <link type="text/css" rel="stylesheet" href="./css/pages/checkout.css">
+  {{/content}}
+  {{#content "heading"}}
+    <div class="notification-area desktop">
+      {{> notifications notification-page.warning-tiles-changed withCloseBtn="true"}}
+    </div>
+
+    <div class="page-header">
+      <a href="./" class="page-header__back-link">Continue shopping</a>
+
+      <div class="notification-area mobile">
+        {{> notifications notification-page.warning-tiles-changed withCloseBtn="true"}}
+      </div>
+
+      <h1 class="page-header__title">Your Basket</h1>
+    </div>
+  {{/content}}
+  {{#content "main"}}
+    {{> checkout_actions
+        top-actions=true
+        modifier="checkout-widget__basket-block_small"}}
+    {{> checkout_order-summary_basket label="Total: " id=1 }}
+    {{#extend "lines-group" name="For delivery" count=4 id=136589003}}
+      {{#content "content"}}
+        {{#each linesDelivery}}
+          {{>order-line mod="order-line_shrink" dynamic=true deliveryChecked=true pageShopCart=true}}
+        {{/each}}
+      {{/content}}
+    {{/extend}}
+    {{#if charityDonations}}
+        {{> charity-donations charityDonations}}
+        {{#each linesCharity}}
+          {{>order-line mod="order-line_shrink" dynamic=true}}
+        {{/each}}
+    {{/if}}
+  {{/content}}
+  {{#content "aside"}}
+      {{> checkout_order-summary_basket label="Total: " id=2}}
+  {{/content}}
+  {{#content "prefooter"}}
+<div class="container component pb-0">
+    <hr>
+</div>
+
+  {{/content}}
+  {{#content "footer"}}
+    {{> footer_basket }}
+  {{/content}}
+  {{#content "foot" mode="append"}}
+    <script defer src="./js/page/basket.js"></script>
+    {{> click-and-collect-modal }}
+  {{/content}}
+{{/extend}}

package/src/page_shopping-cart-v2.html

@@ -40,7 +40,7 @@
       {{/each}}
     </section>
   {{/each}}
-{{> basket-charity-donations-new   shopping-cart-v2.charityDonationNew }}
+{{> charity-donations-multiple shopping-cart-v2.charityDonationMultiple}}
 {{/content}}
 {{#content "foot" mode="append"}}
   <script defer src="./js/basket.min.js"></script>

package/src/page_tradepro-discount-app.html

@@ -0,0 +1,82 @@
+{{#extend
+"my-account-v2"
+dataBreadcrumbs=discount.tradePro.breadcrumbs
+pageClass="page_my-account_new"
+title="My Account DIY"
+pageMyAcc=true
+myAccV2=true
+isLoggedIn=true
+mainClass="discount-offer"
+}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/page_discount.css">
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+      menu=discount.menu
+      active-index=7
+      page-name=discount.menu.[7].title
+      }}
+    </div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="row">
+    <div class="col-12 discount-offer__wrap">
+      <div class="discount-offer__header">
+        <h1 class="title">TradePro Discount</h1>
+      </div>
+      <div class="discount-offer__body">
+        {{> my-account/discount
+        discountSrc=my_account.tradepro.discount
+        title="In-store discount"
+        code=my_account.discount
+        }}
+        {{> my-account/clipboard-code-card
+        mod="trade-pro-id"
+        icon=my_account.tradepro.icons.tradeproID
+        title="TradePro ID"
+        code=my_account.tradeProId
+        description=discount.tradePro.discountIdText
+        }}
+        {{> my-account/clipboard-code-card
+        mod="discount-code"
+        icon="fas fa-badge-percent"
+        title="Online discount code"
+        code=my_account.tradepro.discountCode
+        description=discount.tradePro.onlineDiscountText
+        }}
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="app-info app-info--hide">
+  <div class="container">
+    <div class="row">
+      <div class="col-12 app-info__wrap">
+        <div class="app-info__header">
+          <h2 class="title">Download the APP</h2>
+          <p class="description">Download the Wickes TradePro App now and sign in to access your trade benefits.</p>
+          <div class="app-info__stores">
+            {{#each discount.downloadAppImages}}
+            <a href="#">
+              {{{this}}}
+            </a>
+            {{/each}}
+          </div>
+        </div>
+        <div class="download-app-img"></div>
+      </div>
+    </div>
+  </div>
+</div>
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/my-account.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/page_tradepro-discount.html

@@ -0,0 +1,82 @@
+{{#extend
+  "my-account-v2"
+  dataBreadcrumbs=discount.tradePro.breadcrumbs
+  pageClass="page_my-account_new"
+  title="My Account DIY"
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  mainClass="discount-offer"
+}}
+{{#content "head" mode="append"}}
+  <link type="text/css" rel="stylesheet" href="./css/pages/page_discount.css">
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+          menu=discount.menu
+          active-index=7
+          page-name=discount.menu.[7].title
+      }}
+    </div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="row">
+    <div class="col-12 discount-offer__wrap">
+      <div class="discount-offer__header">
+        <h1 class="title">TradePro Discount</h1>
+      </div>
+      <div class="discount-offer__body">
+        {{> my-account/discount
+            discountSrc=my_account.tradepro.discount
+            title="In-store discount"
+            code=my_account.discount
+        }}
+        {{> my-account/clipboard-code-card
+            mod="trade-pro-id"
+            icon=my_account.tradepro.icons.tradeproID
+            title="TradePro ID"
+            code=my_account.tradeProId
+            description=discount.tradePro.discountIdText
+        }}
+        {{> my-account/clipboard-code-card
+            mod="discount-code"
+            icon="fas fa-badge-percent"
+            title="Online discount code"
+            code=my_account.tradepro.discountCode
+            description=discount.tradePro.onlineDiscountText
+        }}
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="app-info">
+  <div class="container">
+    <div class="row">
+      <div class="col-12 app-info__wrap">
+        <div class="app-info__header">
+          <h2 class="title">Download the APP</h2>
+          <p class="description">Download the Wickes TradePro App now and sign in to access your trade benefits.</p>
+          <div class="app-info__stores">
+            {{#each discount.downloadAppImages}}
+            <a href="#">
+              {{{this}}}
+            </a>
+            {{/each}}
+          </div>
+        </div>
+        <div class="download-app-img"></div>
+      </div>
+    </div>
+  </div>
+</div>
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/my-account.min.js"></script>
+{{/content}}
+{{/extend}}