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

package/build/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/build/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/build/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/build/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/build/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) {