wickes-css2 2.97.0-IM-1593-code-width.1 → 2.97.0-develop.2

package/src/js/components/toggle-password-visibility.js

@@ -0,0 +1,58 @@
+var Wick = window.Wick || {};
+
+Wick.TogglePasswordVisibility = {
+  el: {
+    $toggleShow: $('[data-show-content] .toggle-show'),
+    inputWrap: $('.form-row[data-show-content] .input-wrap'),
+    toggleIcon: '.toggle-show',
+  },
+
+  updateIconVisibility(inputField, toggleIcon) {
+    const valueLength = inputField.val().length;
+    if (valueLength > 0) {
+      toggleIcon.show();
+    } else {
+      toggleIcon.hide();
+    }
+  },
+
+  attachInputListener(inputField, toggleIcon) {
+    inputField.on('input', function () {
+      Wick.TogglePasswordVisibility.updateIconVisibility($(this), toggleIcon);
+    });
+  },
+
+  attachToggleClickListener(inputField, toggleIcon) {
+    toggleIcon.on('click', function () {
+      const isPasswordType = inputField.attr('type') === 'password';
+      const iconSvg = $(this).find('svg');
+
+      if (isPasswordType) {
+        inputField.attr('type', 'text');
+        iconSvg.removeClass('fa-eye-slash').addClass('fa-eye');
+      } else {
+        inputField.attr('type', 'password');
+        iconSvg.removeClass('fa-eye').addClass('fa-eye-slash');
+      }
+    });
+  },
+
+  init() {
+    Wick.TogglePasswordVisibility.el.inputWrap.each(function () {
+      const inputField = $(this).find('input');
+      const toggleIcon = $(this).find(Wick.TogglePasswordVisibility.el.toggleIcon);
+
+      Wick.TogglePasswordVisibility.attachInputListener(inputField, toggleIcon);
+      Wick.TogglePasswordVisibility.updateIconVisibility(inputField, toggleIcon);
+      Wick.TogglePasswordVisibility.attachToggleClickListener(inputField, toggleIcon);
+    });
+  },
+};
+
+$(document).ready(function () {
+  if (!Wick.TogglePasswordVisibility.el.$toggleShow.length) {
+    return;
+  }
+
+  Wick.TogglePasswordVisibility.init();
+});

package/src/js/emulation/checkout_your-details.js

@@ -2,12 +2,12 @@ var Wick = Wick || {};
 Wick.YourDetails = (function(){
     var $self = $('.checkout-your-details');
     let closeBlock = $('.close-block'),
-        $firstLineAddrRow = closeBlock.find("#first-line-address").parents(".form-row"),
-        $firstLineAddrLable = closeBlock.find("#first-line-address").closest(".form-row__label"),
-        $firstLineAddrField = closeBlock.find("#first-line-address").parents(".form-row__field"),
+        $firstLineAddrRow = closeBlock.find("#address-lookup-query").parents(".form-row"),
+        $firstLineAddrLable = closeBlock.find("#address-lookup-query").closest(".form-row__label"),
+        $firstLineAddrField = closeBlock.find("#address-lookup-query").parents(".form-row__field"),
         formError = ".form-row__error",
         listElement = $('.close-block').find('li'),
-        firstLineAddress = $('.close-block #first-line-address');
+        firstLineAddress = $('.close-block #address-lookup-query');
 
     var bindEvents = function () {
         $(document).on('click', '.btn-edit-manually', function(){
@@ -66,7 +66,7 @@ Wick.YourDetails = (function(){
     })
     //end -> fix for ONLINE-2616
 
-  $(document).on('blur', '.close-block #first-line-address', function() {
+  $(document).on('blur', '.close-block #address-lookup-query', function() {
     if( $(this).val() ) {
       $('.close-block [data-manually]').removeClass('d-none');
       $('.close-block [data-manually]').addClass('d-block');

package/src/js/emulation/forms.js

@@ -5,7 +5,7 @@ Wick.Forms = (function(){
     fieldError = '.form-row__error',
     formInvalid = 'form_invalid',
     rowValidationError = 'form-row_validation-error',
-    excludedClassesForForm = ['header', 'quiz-modal__form', 'search-store', 'track-order-form'],
+    excludedClassesForForm = ['header', 'quiz-modal__form', 'search-store', 'track-order-form', 'change-password__form', 'address-book__form'],
     // validationError = '<div class="form-row__error">Error message here</div>',
     $forgotPassword = $('.link-forgot-password'),
     scenarios = [{

package/src/js/emulation/project-list-print.js

@@ -1,5 +1,3 @@
-var Wick = window.Wick || {};
-
 function initProjectShadowList() {
   $('.download-pdf').on('click', emulateDownloadAction);
 }
@@ -9,8 +7,7 @@ function emulateDownloadAction(e) {
 
   let currentUrl = window.location.href;
   let baseUrl = currentUrl.substring(0, currentUrl.lastIndexOf('/') + 1);
-  let pageName = Wick.VatToggle.isToggleVatAvailable() ? 'page_my-shopping-list-pdf-vat.html' : 'page_my-shopping-list-pdf.html';
-  let pageShoppingListPDF = baseUrl + pageName;
+  let pageShoppingListPDF = baseUrl + 'page_my-shopping-list-pdf.html';
 
   $.ajax({
       type: 'get',

package/src/js/libs/jquery.pstrength.custom-1.2.0.js

@@ -0,0 +1,161 @@
+/* jQuery Password Strength Plugin (pstrength) - A jQuery plugin to provide accessibility functions
+ * Author: Tane Piper (digitalspaghetti@gmail.com)
+ * Website: http://digitalspaghetti.me.uk
+ * Licensed under the MIT License: http://www.opensource.org/licenses/mit-license.php
+ * This code uses a modified version of Steve Moitozo's algorithm (http://www.geekwisdom.com/dyn/passwdmeter)
+ *
+ * === Changelog ===
+ * Version 1.2 (03/09/2007)
+ * Added more options for colors and common words
+ * Added common words checked to see if words like 'password' or 'qwerty' are being entered
+ * Added minimum characters required for password
+ * Re-worked scoring system to give better results
+ *
+ * Version 1.1 (20/08/2007)
+ * Changed code to be more jQuery-like
+ *
+ * Version 1.0 (20/07/2007)
+ * Initial version.
+ */
+(function($){
+  $.extend($.fn, {
+    pstrength : function(options) {
+      var options = $.extend({
+        verdicts:	["Very Weak","Weak","Medium","Strong","Very strong"],
+        colors: 	["red", "red", "orange", "green", "green"],
+        scores: 	[10,15,30,40],
+        minchar:	6,
+        tooShort:   "Too Short!",
+        minCharText: "Minimum length is %d characters"
+      },options);
+      return this.each(function(){
+        var infoarea = $(this).attr('id');
+        let parentElement = $(this).closest('.form-row__field');
+
+        var strengthDivs = `<div class="pstrength-bars" id="${infoarea}_bars" style="display: none">
+          <div class="pstrength-bar gray"></div>
+          <div class="pstrength-bar gray"></div>
+          <div class="pstrength-bar gray"></div>
+          <div class="pstrength-bar gray"></div>
+        </div>`;
+        parentElement.append(strengthDivs);
+        parentElement.append('<div class="pstrength-info" id="' + infoarea + '_text" style="display: none"></div>');
+
+        // Bind keyup event
+        $(this).on("keyup", function() {
+          $.fn.runPassword($(this).val(), infoarea, options);
+        });
+      });
+    },
+    runPassword : function (password, infoarea, options){
+      var nPerc = $.fn.checkPassword(password, options);
+
+      var numBars = 0;
+      var strColor = "";
+      var strText = "";
+
+      if (nPerc < 0) {
+        strColor = "#ccc";
+        strText = options.tooShort;
+        numBars = 0;
+      } else if (nPerc <= options.scores[0]) {
+        strColor = options.colors[0];
+        strText = options.verdicts[0];
+        numBars = 1;
+      } else if (nPerc > options.scores[0] && nPerc <= options.scores[1]) {
+        strColor = options.colors[1];
+        strText = options.verdicts[1];
+        numBars = 1;
+      } else if (nPerc > options.scores[1] && nPerc <= options.scores[2]) {
+        strColor = options.colors[2];
+        strText = options.verdicts[2];
+        numBars = 2;
+      } else if (nPerc > options.scores[2] && nPerc <= options.scores[3]) {
+        strColor = options.colors[3];
+        strText = options.verdicts[3];
+        numBars = 3;
+      } else {
+        strColor = options.colors[4];
+        strText = options.verdicts[4];
+        numBars = 4;
+      }
+
+      var $ctlBarsText = $("#" + infoarea + "_text");
+      var $ctlBars = $("#" + infoarea + "_bars");
+      var $ctlBarsChild = $("#" + infoarea + "_bars .pstrength-bar");
+      $ctlBarsText.show();
+      $ctlBars.show();
+      $ctlBarsChild.removeClass("red orange green").addClass("gray");
+      for (let i = 0; i < numBars; i++) {
+        $ctlBarsChild.eq(i).removeClass("gray").addClass(strColor);
+      }
+
+      var $ctlText = $("#" + infoarea + "_text");
+      $ctlText.html("<span>" + strText + "</span>");
+    },
+    checkPassword : function(password, options)
+    {
+      var intScore = 0;
+      var strVerdict = options.verdicts[0];
+      // PASSWORD LENGTH
+      if (password.length < options.minchar)                         // Password too short
+      {
+        intScore = (intScore - 100);
+      }
+      else if (password.length >= options.minchar && password.length <= (options.minchar + 2)) // Password Short
+      {
+        intScore = (intScore + 6);
+      }
+      else if (password.length >= (options.minchar + 3) && password.length <= (options.minchar + 4))// Password Medium
+      {
+        intScore = (intScore + 12);
+      }
+      else if (password.length >= (options.minchar + 5))                    // Password Large
+      {
+        intScore = (intScore + 18);
+      }
+      if (password.match(/[a-z]/))                              // [verified] at least one lower case letter
+      {
+        intScore = (intScore + 1);
+      }
+      if (password.match(/[A-Z]/))                              // [verified] at least one upper case letter
+      {
+        intScore = (intScore + 5);
+      }
+      // NUMBERS
+      if (password.match(/\d+/))                                 // [verified] at least one number
+      {
+        intScore = (intScore + 5);
+      }
+      if (password.match(/(.*[0-9].*[0-9].*[0-9])/))             // [verified] at least three numbers
+      {
+        intScore = (intScore + 7);
+      }
+      // SPECIAL CHAR
+      if (password.match(/.[!,@,#,$,%,^,&,*,?,_,~]/))            // [verified] at least one special character
+      {
+        intScore = (intScore + 5);
+      }
+      // [verified] at least two special characters
+      if (password.match(/(.*[!,@,#,$,%,^,&,*,?,_,~].*[!,@,#,$,%,^,&,*,?,_,~])/))
+      {
+        intScore = (intScore + 7);
+      }
+      // COMBOS
+      if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))        // [verified] both upper and lower case
+      {
+        intScore = (intScore + 2);
+      }
+      if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) // [verified] both letters and numbers
+      {
+        intScore = (intScore + 3);
+      }
+      // [verified] letters, numbers, and special characters
+      if (password.match(/([a-zA-Z0-9].*[!,@,#,$,%,^,&,*,?,_,~])|([!,@,#,$,%,^,&,*,?,_,~].*[a-zA-Z0-9])/))
+      {
+        intScore = (intScore + 3);
+      }
+      return intScore;
+    }
+  });
+})(jQuery);

package/src/js/page/address-book.js

@@ -0,0 +1,193 @@
+import {
+  isValidFieldSize,
+  isValidInputTextField,
+  isValidPhoneNumber,
+  isValidPostcodeField,
+  updateStylingError
+} from "./utils/validation";
+import errorMessages from "./utils/errorMesages";
+import {scrollToElement, trimFields} from "./utils/helpers";
+
+var Wick = window.Wick || {};
+
+Wick.AddressBook = {
+  el: {
+    $addressBook: $('.address-book'),
+    addressCard: '.address-card',
+    addressCardInformation: '.address-card__information',
+    deleteAddressModal: '.delete-modal',
+    deleteAddressLink: '.link--delete',
+    deleteModalContent: '.delete-modal .address-info__data',
+    deleteModalContinue: '.delete-modal .btn-continue',
+    addressForm: '.address-book__form',
+    btnCancel: '.address-book__form [data-action="cancel-form"]',
+    btnSaveForm: '.address-book__form [data-action="save-form"]',
+    $firstName: $('#firstName'),
+    $surName: $('#lastName'),
+    $addressLookupQuery: $('#address-lookup-query'),
+    $addressLine1: $('#address-line-1'),
+    $addressLine2: $('#address-line-2'),
+    $townCity: $('#town-city'),
+    $postCode: $('#postcode_additional'),
+    $mobilePhone: $('#mobile-telephone'),
+    $homePhone: $('#home-telephone'),
+    formRow: '.form-row',
+    formRowError: '.form-row__error'
+  },
+  getFieldsConfigurations: function () {
+    return [
+      {
+        input: Wick.AddressBook.el.$firstName,
+        validator: [isValidFieldSize, isValidInputTextField],
+        error: errorMessages.errorName,
+      },
+      {
+        input: Wick.AddressBook.el.$surName,
+        validator: [isValidFieldSize, isValidInputTextField],
+        error: errorMessages.errorSurname,
+      },
+      {
+        input: Wick.AddressBook.el.$addressLookupQuery,
+        validator: isValidFieldSize,
+        error: errorMessages.errorAddress,
+      },
+      {
+        input: Wick.AddressBook.el.$addressLine1,
+        validator: [isValidFieldSize, isValidInputTextField],
+        error: errorMessages.errorAddressLine1,
+      },
+      {
+        input: Wick.AddressBook.el.$addressLine2,
+        validator: isValidInputTextField,
+        error: errorMessages.errorAddressLine2,
+        required: false
+      },
+      {
+        input: Wick.AddressBook.el.$townCity,
+        validator: [isValidFieldSize, isValidInputTextField],
+        error: errorMessages.errorTown,
+      },
+      {
+        input: Wick.AddressBook.el.$postCode,
+        validator: [isValidFieldSize, isValidPostcodeField],
+        error: errorMessages.errorPostcode,
+      },
+      {
+        input: Wick.AddressBook.el.$mobilePhone,
+        validator: [isValidFieldSize, isValidPhoneNumber],
+        error: [errorMessages.errorMobilePhoneEmpty, errorMessages.errorMobilePhone],
+      },
+      {
+        input: Wick.AddressBook.el.$homePhone,
+        validator: isValidPhoneNumber,
+        error: errorMessages.errorHomePhone,
+        required: false
+      }
+    ];
+  },
+  validateInput: function (input, validatorFunction, errorMsg) {
+    const value = $(input).val();
+    let isValid = true;
+
+    const validators = Array.isArray(validatorFunction) ? validatorFunction : [validatorFunction];
+    const errors = Array.isArray(errorMsg) ? errorMsg : [errorMsg];
+
+    for (let index = 0; index < validators.length; index++) {
+      const validator = validators[index];
+      const isFieldValid = validator(value);
+
+      if (!isFieldValid) {
+        const currentErrorMessage = index < errors.length ? errors[index] : errors[0];
+        updateStylingError(input, isFieldValid, currentErrorMessage);
+
+        isValid = false;
+        break;
+      }
+    }
+
+    if (isValid) {
+      updateStylingError(input, true, '');
+    }
+
+    return isValid;
+  },
+  validateForm: function () {
+    trimFields();
+    let isValid = true;
+    const fields = Wick.AddressBook.getFieldsConfigurations();
+
+    fields.forEach((field) => {
+      const value = field.input.val();
+      const required = field.required !== false;
+
+      if (!required && !value) {
+        updateStylingError(field.input, true, '');
+        return;
+      }
+
+      isValid =
+        Wick.AddressBook.validateInput(field.input, field.validator, field.error) && isValid;
+    });
+
+    return isValid;
+  },
+  handleFormSubmit: function () {
+    $(Wick.AddressBook.el.addressForm).on('submit', function (event) {
+      event.preventDefault();
+
+      if (Wick.AddressBook.validateForm()) {
+        Wick.LeaveEvent.proceedBrowserLeave = false;
+        $(Wick.AddressBook.el.btnSaveForm).attr('disabled', true);
+        event.target.submit();
+      } else {
+        const targetElement = $(Wick.AddressBook.el.formRowError).closest(Wick.AddressBook.el.formRow)[0];
+
+        scrollToElement(targetElement);
+      }
+    });
+  },
+  deleteAddress() {
+    $(Wick.AddressBook.el.deleteAddressLink).on('click', function (e) {
+      e.preventDefault();
+
+      const $clickedLink = $(this);
+      const href = $clickedLink.attr('data-link');
+
+      const $addressCard = $(this).closest(Wick.AddressBook.el.addressCard);
+      const cardInfo = $addressCard.find(Wick.AddressBook.el.addressCardInformation).html();
+
+      $(Wick.AddressBook.el.deleteModalContent).html(cardInfo);
+
+      $(Wick.AddressBook.el.deleteModalContinue).on('click', function () {
+        window.location.href = href;
+      });
+
+      Wick.AddressBook.showModal();
+    });
+  },
+  showModal() {
+    $(Wick.AddressBook.el.deleteAddressModal).modal('show');
+  },
+  clearModal() {
+    $(Wick.AddressBook.el.deleteAddressModal).on('hidden.bs.modal', function () {
+      $(this).find(Wick.AddressBook.el.addressCardInformation).html('');
+    });
+  },
+  init () {
+    Wick.LeaveEvent.bindEvent(
+      Wick.AddressBook.el.addressForm,
+      Wick.AddressBook.el.btnCancel,
+    );
+    Wick.AddressBook.deleteAddress();
+    Wick.AddressBook.clearModal();
+    Wick.AddressBook.handleFormSubmit();
+  }
+}
+
+$(document).ready(function () {
+  if (!Wick.AddressBook.el.$addressBook.length) {
+    return;
+  }
+
+  Wick.AddressBook.init();
+});

package/src/js/page/change-password.js

@@ -0,0 +1,118 @@
+import {isValidFieldSize, isValidPasswordSize, updateStylingError} from "./utils/validation";
+
+var Wick = window.Wick || {};
+
+Wick.ChangePassword = {
+  el: {
+    changePasswordForm: '.change-password__form',
+    fieldRow: '.form-row',
+    $currentPassword: $('#currentPassword'),
+    $newPassword: $('#newPassword'),
+    $confirmPassword: $('#confirmPassword'),
+    formInvalidClass: 'form_invalid',
+    fieldError: '.form-row.form-row_validation-error',
+    btnCancel: '[data-action="cancel-form"]',
+    btnReset: '[data-action="reset-details"]',
+    saveForm: '[data-action="save-form"]'
+  },
+  errorMessages: {
+    errorCurrentPassword: 'Please enter your current password',
+    errorNewPassword: 'Please enter a strong password (at least 6 characters)',
+    errorPasswordMismatch: 'Password and password confirmation do not match'
+  },
+  defaultNotificationConfig: {
+    container: '.change-password .globalMessages .container',
+    closeBtn: true,
+    noScrolling: true,
+  },
+  getFieldsConfigurations: function () {
+    return [
+      {
+        input: Wick.ChangePassword.el.$currentPassword,
+        validator: isValidFieldSize,
+        error: Wick.ChangePassword.errorMessages.errorCurrentPassword,
+      },
+      {
+        input: Wick.ChangePassword.el.$newPassword,
+        validator: isValidPasswordSize,
+        error: Wick.ChangePassword.errorMessages.errorNewPassword,
+      },
+      {
+        input: Wick.ChangePassword.el.$confirmPassword,
+        validator: isValidPasswordSize,
+        error: Wick.ChangePassword.errorMessages.errorNewPassword,
+      },
+    ];
+  },
+  validateInput: function (input, validatorFunction, errorMsg) {
+    const value = $(input).val();
+
+    const isValid = validatorFunction(value);
+    updateStylingError(input, isValid, errorMsg);
+
+    return isValid;
+  },
+  validateForm: function () {
+    let isValid = true;
+
+    const fields = Wick.ChangePassword.getFieldsConfigurations();
+
+    fields.forEach((field) => {
+      isValid =
+        Wick.ChangePassword.validateInput(field.input, field.validator, field.error) && isValid;
+    });
+
+    if (isValid) {
+      const newPassword = Wick.ChangePassword.el.$newPassword.val();
+      const confirmPassword = Wick.ChangePassword.el.$confirmPassword.val();
+
+      if (newPassword !== confirmPassword) {
+        isValid = false;
+        updateStylingError(
+          Wick.ChangePassword.el.$confirmPassword,
+          false,
+          Wick.ChangePassword.errorMessages.errorPasswordMismatch
+        );
+      }
+    }
+
+    return isValid;
+  },
+  handleChangePasswordFormSubmit: function () {
+    $(Wick.ChangePassword.el.changePasswordForm).on('submit', function (event) {
+      event.preventDefault();
+
+      if (Wick.ChangePassword.validateForm()) {
+        Wick.LeaveEvent.removeLeaveEvent();
+        event.target.submit();
+      }
+    });
+  },
+  hasUnsavedChanges() {
+    const currentState = Wick.LeaveEvent.getState(Wick.ChangePassword.el.changePasswordForm);
+
+    return !_.isEqual(currentState, Wick.LeaveEvent.initialFormState);
+  },
+  reloadPage() {
+    location.reload();
+  },
+  init() {
+    Wick.LeaveEvent.bindEvent(
+      Wick.ChangePassword.el.changePasswordForm,
+      Wick.ChangePassword.el.btnCancel,
+      Wick.ChangePassword.el.btnReset,
+      Wick.ChangePassword.reloadPage
+    );
+
+    Wick.Pwdstrength.bindPStrength();
+    Wick.ChangePassword.handleChangePasswordFormSubmit();
+  },
+};
+
+$(document).ready(function () {
+  if (!$(Wick.ChangePassword.el.changePasswordForm).length) {
+    return;
+  }
+
+  Wick.ChangePassword.init();
+});

package/src/js/page/utils/errorMesages.js

@@ -0,0 +1,14 @@
+const errorMessages = {
+  errorName: 'Please enter a first name',
+  errorSurname: 'Please enter a surname',
+  errorAddress: 'Please complete your address details',
+  errorAddressLine1: 'Please enter address line 1',
+  errorAddressLine2: 'Please enter address line 2',
+  errorTown: 'Please enter a town/city',
+  errorPostcode: 'Please enter a valid postcode',
+  errorMobilePhoneEmpty: 'Please enter mobile number',
+  errorMobilePhone: 'Please enter a valid mobile number with no spaces e.g. 07700900000',
+  errorHomePhone: 'Please enter a valid phone number. It should be 10 or 11 digits e.g. 01234 123456, 0123 412 3456'
+}
+
+export default errorMessages;

package/src/js/page/utils/helpers.js

@@ -42,3 +42,21 @@ export function isTouchDevice () {
 export function isApp () {
     return navigator.userAgent.match(/TradeProMobile_iOS|TradeProMobile_Android|DIYMobile_iOS|DIYMobile_Android|DIYApp_Guest_Mobile_iOS|DIYApp_Guest_Mobile_Android|AGENT_PLACEHOLDER/i);
 }
+
+export function trimFields () {
+    const fields = Wick.AddressBook.getFieldsConfigurations();
+    fields.forEach((field) => {
+        const trimmedValue = field.input.val().trim();
+        field.input.val(trimmedValue);
+    });
+}
+
+export function scrollToElement(element, offset = 20) {
+    const targetElement = $(element);
+
+    if (targetElement.length > 0) {
+        $('html, body').animate({
+            scrollTop: targetElement.offset().top - offset
+        }, 300);
+    }
+}

package/src/js/page/utils/validation.js

@@ -95,7 +95,11 @@ export function validateCity(element) {
 }
 
 export function isValidFieldSize(value) {
-    return value.length > 0 && value.length < 255;
+    return value.length > 0 && value.length < 256;
+}
+
+export function isValidPasswordSize(value) {
+    return value.length > 5 && value.length < 256;
 }
 
 export function isValidInputTextField(value) {

package/src/layouts/base.hbs

@@ -16,7 +16,7 @@
         {{> google-banner}}
     {{/if}}
     {{#block "header"}}
-      {{> header chatBot=chatBot switch-vat=switch-vat }}
+      {{> header chatBot=chatBot }}
     {{/block}}
     <a id="skip-to-content"></a>
     {{#if hybrisClass}}