wickes-css2 2.94.0-develop.5 → 2.94.0-ic-298-mega-nav.1

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

@@ -1,286 +0,0 @@
-import {isValidEmail, isValidInputTextField, updateStylingError, removeErrorStyling} from "./utils/validation";
-import {createEvent} from "./utils/create-event";
-
-const Handlebars = require("hbsfy/runtime");
-import userInformationField from '../../components/user-information-field.hbs';
-
-var Wick = window.Wick || {};
-
-Wick.PersonalDetails = {
-  UPDATE_PERSONAL_DETAILS_EVENT: 'updatePersonalDetails',
-  el: {
-    userInformationSection: '.user-information',
-    userInformationList: '.user-information__list',
-    userForm: '.user-form',
-    formRow: '.user-form .form-row',
-    emailInput: '#email',
-    firstNameInput: '#firstName',
-    surnameInput: '#lastName',
-    btnEdit: '.user-information .btn__edit',
-    btnCancel: '[data-action="cancel-form"]',
-    btnSave: '[data-action="save-form"]',
-    btnContinue: '[data-action="reset-details"]',
-    btnChangePassword: '.btn__change-password',
-    formInvalidClass: 'form_invalid',
-    notification: '.notification',
-    fieldError: '.form-row.form-row_validation-error',
-    changePasswordPopup: '#change-password-popup',
-    globalMessage: '.globalMessages',
-  },
-  errorMessages: {
-    errorFirstName: 'Please enter your first name',
-    errorSurname: 'Please enter your surname',
-    errorEmail: 'Please enter your email address',
-  },
-  defaultNotificationConfig: {
-    container: '.personal-details .globalMessages',
-    closeBtn: true,
-    noScrolling: true,
-  },
-  isTradeTypeLabel() {
-    return $(Wick.PersonalDetails.el.userForm).find('label:contains("Trade type")').length;
-  },
-  fieldToLabelMap(name) {
-    let currentTradeType = ''
-    if (name === 'tradeType') {
-      currentTradeType = Wick.PersonalDetails.isTradeTypeLabel()
-        ? 'Trade type'
-        : 'How would you describe yourself or your main trade';
-    }
-
-    const fieldMap = {
-      titleCode: 'Title',
-      firstName: 'First name',
-      lastName: 'Surname',
-      email: 'Email address',
-      tradeType: currentTradeType,
-    };
-
-    return fieldMap[name] || name;
-  },
-  getFieldsConfigurations: function () {
-    return [
-      {
-        input: Wick.PersonalDetails.el.firstNameInput,
-        validator: isValidInputTextField,
-        error: Wick.PersonalDetails.errorMessages.errorFirstName
-      },
-      {
-        input: Wick.PersonalDetails.el.surnameInput,
-        validator: isValidInputTextField,
-        error: Wick.PersonalDetails.errorMessages.errorSurname
-      },
-      {
-        input: Wick.PersonalDetails.el.emailInput,
-        validator: isValidEmail,
-        error: Wick.PersonalDetails.errorMessages.errorEmail
-      }
-    ]
-  },
-  showForm() {
-    Wick.PersonalDetails.validateForm();
-    $(Wick.PersonalDetails.el.notification).remove();
-    $(Wick.PersonalDetails.el.userInformationSection).addClass('d-none');
-    $(Wick.PersonalDetails.el.userForm).removeClass('d-none');
-  },
-  hideForm() {
-    $(Wick.PersonalDetails.el.userForm).addClass('d-none');
-    $(Wick.PersonalDetails.el.userInformationSection).removeClass('d-none');
-  },
-  validateInput: function (input, validatorFunction, errorMsg) {
-    const value = $(input).val();
-    const isValid = validatorFunction(value);
-    updateStylingError(input, isValid, errorMsg);
-
-    return isValid;
-  },
-  validateForm: function() {
-    const fields = Wick.PersonalDetails.getFieldsConfigurations();
-    let isValid = true;
-
-    fields.forEach(field => {
-      let parentElem = $(field.input).closest(Wick.PersonalDetails.el.fieldError);
-      if (parentElem.length) {
-        removeErrorStyling(parentElem);
-      }
-      const result = Wick.PersonalDetails.validateInput(field.input, field.validator, field.error);
-      isValid = isValid && result;
-    });
-
-    return isValid;
-  },
-  requestToUpdateForm() {
-    return new Promise((resolve, reject) => {
-      const payloadArray = Wick.LeaveEvent.getState(Wick.PersonalDetails.el.userForm);
-      const payloadObject = payloadArray.reduce((acc, { name, value }) => {
-        acc[name] = value;
-        return acc;
-      }, {});
-      const eventDetail = {resolve, reject};
-      const event = createEvent(Wick.PersonalDetails.UPDATE_PERSONAL_DETAILS_EVENT, payloadObject, eventDetail);
-      window.dispatchEvent(event);
-    })
-      .then((response) => {
-        Wick.Notification.show({
-          ...Wick.PersonalDetails.defaultNotificationConfig,
-          text: response.globalMessage.message,
-          type: 'success',
-        });
-        Wick.LeaveEvent.initialFormState = Wick.LeaveEvent.getState(Wick.PersonalDetails.el.userForm);
-        Wick.PersonalDetails.updateUserInformationSection(Wick.LeaveEvent.initialFormState);
-        Wick.PersonalDetails.updateFormFields(Wick.LeaveEvent.initialFormState);
-        Wick.PersonalDetails.hideForm();
-        Wick.PersonalDetails.scrollToElement(Wick.PersonalDetails.el.globalMessage);
-      })
-      .catch((error) => {
-        Wick.Notification.show({
-          ...Wick.PersonalDetails.defaultNotificationConfig,
-          text: error.globalMessage.message,
-          type: 'error',
-        });
-        Wick.PersonalDetails.handleFieldErrors(error);
-        Wick.PersonalDetails.scrollToElement(Wick.PersonalDetails.el.globalMessage);
-      });
-  },
-  handleFieldErrors(error) {
-    if (error.fieldErrors && error.fieldErrors.length) {
-      error.fieldErrors.forEach((fieldError) => {
-        const field = `#${fieldError.field}`;
-        updateStylingError(field, false, fieldError.message);
-      });
-    }
-  },
-  submitForm(event) {
-    event.preventDefault();
-    Wick.PersonalDetails.trimAndRewriteInputs(Wick.PersonalDetails.el.userForm);
-
-    if (!Wick.PersonalDetails.hasUnsavedChanges()) {
-      Wick.PersonalDetails.hideForm();
-      $(Wick.PersonalDetails.el.notification).remove();
-      Wick.PersonalDetails.scrollToElement(Wick.PersonalDetails.el.globalMessage);
-      return;
-    }
-
-    if (Wick.PersonalDetails.validateForm()) {
-      Wick.PersonalDetails.requestToUpdateForm();
-    } else {
-      Wick.Notification.show({
-        ...Wick.PersonalDetails.defaultNotificationConfig,
-        text: 'Please correct the errors below.',
-        type: 'error',
-      });
-      Wick.PersonalDetails.scrollToElement(Wick.PersonalDetails.el.globalMessage);
-    }
-  },
-  updateUserInformationSection(personalDetails) {
-    const $userInformationList = $(Wick.PersonalDetails.el.userInformationList);
-
-    if (!$userInformationList.length) return;
-
-    $userInformationList.empty();
-
-    personalDetails.forEach(({ name, value, text }) => {
-      const label = Wick.PersonalDetails.fieldToLabelMap(name);
-      const textField = text || value
-      $userInformationList.append(
-        userInformationField({
-          label,
-          textField,
-        })
-      );
-    });
-
-    Wick.PersonalDetails.hideParentListItemIfLabelExists('CSRFToken');
-  },
-  updateFormFields(personalDetails) {
-    personalDetails.forEach(({ name, value, text }) => {
-      const field = document.querySelector(`#${name}`);
-      if (field) {
-        if (field.tagName === 'INPUT') {
-          field.value = text || value || '';
-          field.setAttribute('value', text || value || '');
-        } else {
-          const options = field.querySelectorAll('option');
-          options.forEach(option => {
-            if (option.textContent.trim() === value || option.value === value) {
-              option.setAttribute('selected', 'selected');
-              field.value = option.value;
-            } else {
-              option.removeAttribute('selected');
-            }
-          });
-        }
-      }
-    });
-  },
-  resetFormToInitialState() {
-    Wick.PersonalDetails.hideForm();
-    $(Wick.PersonalDetails.el.notification).remove();
-    $(Wick.LeaveEvent.el.leavePopup).modal('hide');
-    Wick.PersonalDetails.updateFormFields(Wick.LeaveEvent.initialFormState);
-  },
-  hasUnsavedChanges() {
-    const currentState = Wick.LeaveEvent.getState(Wick.PersonalDetails.el.userForm);
-
-    return !_.isEqual(currentState, Wick.LeaveEvent.initialFormState);
-  },
-  changePasswordHandler(event) {
-    const changePasswordUrl = $(Wick.PersonalDetails.el.btnChangePassword).attr('href');
-
-    if (Wick.PersonalDetails.hasUnsavedChanges()) {
-      event.preventDefault();
-      $(Wick.PersonalDetails.el.changePasswordPopup).modal('show');
-      Wick.LeaveEvent.proceedBrowserLeave = true;
-      $(Wick.PersonalDetails.el.changePasswordPopup).find(Wick.PersonalDetails.el.btnContinue).off('click').on('click', function () {
-        Wick.LeaveEvent.removeLeaveEvent();
-        $(Wick.LeaveEvent.el.leavePopup).modal('hide');
-        window.location.href = changePasswordUrl;
-      });
-    } else {
-      window.location.href = changePasswordUrl;
-    }
-  },
-  hideParentListItemIfLabelExists(labelText) {
-    const label = $(Wick.PersonalDetails.el.userInformationList).find(`label:contains("${labelText}")`);
-
-    if (label.length > 0) {
-      label.closest('li').hide();
-    }
-  },
-  scrollToElement(element) {
-    const globalMessage = $(element);
-
-    if (globalMessage.length > 0) {
-      $('html, body').animate({
-        scrollTop: globalMessage.offset().top - 20
-      }, 300);
-    }
-  },
-  trimAndRewriteInputs(formSelector) {
-    const $form = $(formSelector);
-
-    if (!$form.length) {
-      return;
-    }
-
-    $form.find('input[type="text"], input[type="email"]').each(function () {
-      $(this).val($.trim($(this).val()));
-    });
-  },
-  init: function () {
-    Wick.LeaveEvent.bindEvent(
-      Wick.PersonalDetails.el.userForm,
-      Wick.PersonalDetails.el.btnCancel,
-      Wick.PersonalDetails.el.btnContinue,
-      Wick.PersonalDetails.resetFormToInitialState
-    );
-
-    $(Wick.PersonalDetails.el.btnEdit).on('click', Wick.PersonalDetails.showForm);
-    $(Wick.PersonalDetails.el.btnSave).on('click', Wick.PersonalDetails.submitForm);
-    $(Wick.PersonalDetails.el.btnChangePassword).on('click', Wick.PersonalDetails.changePasswordHandler);
-  }
-}
-
-$(document).ready(function () {
-  Wick.PersonalDetails.init();
-});

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

@@ -1,27 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  {{#block "head" }}
-    {{> head }}
-  {{/block}}
-</head>
-<body class="{{pageClass}}">
-{{#block "header"}}
-  {{> header}}
-{{/block}}
-<a id="skip-to-content"></a>
-<main class="{{mainClass}}">
-  {{#block "notification"}}{{/block}}
-  {{#block "heading"}}{{/block}}
-  {{#block "main"}}
-    <p>Ooops, page is empty</p>
-  {{/block}}
-</main>
-{{#block "footer"}}
-  {{> footer }}
-{{/block}}
-{{#block "foot"}}
-  {{> scripts}}
-{{/block}}
-</body>
-</html>

package/src/page_checkout_next-day-delivery-details.html

@@ -1,161 +0,0 @@
-{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout" title="Checkout - Delivery details" isAsideSticky="true"}}
-{{#content "steps"}}
-{{> steps-three-steps active-step-index="1" }}
-{{/content}}
-
-{{#content "head" mode="append"}}
-<link type="text/css" rel="stylesheet" href="./css/pages/checkout-new.css">
-<link type="text/css" rel="stylesheet" href="./css/pages/page_checkout_delivery-new.css">
-{{/content}}
-
-{{#content "aside"}}
-{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true paymentsCheckoutV2="true"}}
-{{/content}}
-
-
-{{#content "main"}}
-<div class="delivery-block">
-  <h3 class="delivery-block__heading">Delivery Information</h3>
-  <div class="delivery-block__wrapper">
-    <div class="date-selection__wrapper">
-      <h3 class="date-selection__header">Select delivery date</h3>
-      <p class="date-selection__info-block">
-        Please choose a date for delivery from the calendar below.
-      </p>
-      <p class="date-selection__info-block">
-        Our delivery slots are currently available up to 8 days in advance. We release additional delivery slots daily.
-      </p>
-      <p class="date-selection__annotation">
-        *Individual couriers will provide more information on delivery times, closer to your chosen delivery date.
-      </p>
-    </div>
-
-    <div class="component component-date-selection">
-      {{> date-selection
-          titleDelivery="Next and Named day delivery"
-          subtitleDelivery="Delivery between 7am - 7pm for £7*"
-          wisdom=true
-      }}
-    </div>
-
-    {{#with checkoutOrder.deliveryDeliveryDetails.[0]}}
-    <div class="checkout-order">
-      {{> checkout-order-block}}
-    </div>
-    {{/with}}
-
-  </div>
-</div>
-
-<div class="click-collect-block">
-  <h3 class="click-collect-block__heading">Click & Collect</h3>
-
-  <div class="click-collect-block__head-info">
-    <p>Simply enter or correct the contact information required below and continue to the next step of the checkout.</p>
-    <div class="head-info__wrapper">
-      <div class="head-info__wrapper-exclamation">
-        <i class="far fa-exclamation-circle"></i>
-        <span>Your order will be held for up to 24 hours</span>
-      </div>
-      <div class="head-info__wrapper-text">
-        <p>You will receive a text when your order is ready to collect (usually within 1 trading hour of receiving your order confirmation email).</p>
-        <p>Please wait for confirmation before travelling to your chosen store.</p>
-      </div>
-    </div>
-  </div>
-
-  <div class="click-collect-block__wrapper">
-    {{#with checkoutOrder.clickCollectDeliveryAddress.[0]}}
-    <div class="checkout-order">
-      {{> checkout-order-block}}
-    </div>
-    {{/with}}
-
-    <div class="add-contact-details">
-      <h3 class="add-contact-details__heading">Add contact details</h3>
-      <p>Please enter your phone number(s) below so we can contact you regarding your order.</p>
-
-      <div class="add-contact-details__form">
-        {{> form-row type="tel" id="mobile" label="Mobile number" required="true"}}
-        {{> form-row type="tel" id="home-phone" label="Home phone"}}
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="simplify-collection">
-  <h3 class="simplify-collection__heading">Simplify your collection</h3>
-  <p class="simplify-collection__info">All the Click & Collect items in your order are currently available at the following stores. Select
-    one of the store to collect all your items from the same location.</p>
-
-  <div class="simplify-collection__wrapper">
-    <div class="your-contact-details__checkbox">
-      {{#extend "radiobutton" id="oldham" name="store" label="Oldham" checked="true"}}
-      {{#content "html"}}
-      <span class="distance">6.2 Miles</span>
-      <div class="store-address">
-        <div class="store-address__street">Wickes Larch Street,</div>
-        <div class="store-address__town">Oldham</div>
-        <div class="store-address__city">Greater Manchester,</div>
-        <div class="store-address__postcode">OL8 1TA</div>
-        <div class="store-address__country">United Kingdom</div>
-      </div>
-      {{/content}}
-      {{/extend}}
-    </div>
-    <div class="your-contact-details__checkbox">
-      {{#extend "radiobutton" id="clifton" name="store" label="Clifton"}}
-      {{#content "html"}}
-      <span class="distance">4.9 Miles</span>
-      <div class="store-address">
-        <div class="store-address__street">Wickes Wynne Avenue,</div>
-        <div class="store-address__town"> Clifton, Swinton</div>
-        <div class="store-address__city">Greater Manchester,</div>
-        <div class="store-address__postcode">M27 8FU</div>
-        <div class="store-address__country">United Kingdom</div>
-      </div>
-      {{/content}}
-      {{/extend}}
-    </div>
-  </div>
-
-  <p class="simplify-collection__info">I would like to update my order to collect all my items from one store.</p>
-
-  <button class="btn btn-primary simplify-collection__btn">
-    <span class="btn__text">Simplify collection</span>
-  </button>
-</div>
-
-
-{{> checkout_voucher_large  title="Voucher Code"}}
-
-<div class="continue-btn">
-  <button class="btn btn-action">Continue to Payment Details</button>
-</div>
-
-{{/content}}
-
-{{#content "foot" mode="append"}}
-<script defer src="./js/page/checkout-confirmation-new.js"></script>
-<script defer src="./js/page/select-address.js"></script>
-<script src="./js/checkout.min.js"></script>
-
-{{#extend "modal" classMod="edit-delivery-address" id="modalEditAddress" title="Edit delivery address" fullWidth=true}}
-{{#content "body"}}
-<div class="edit-address-modal-block">
-  {{> notifications notification-page.error-deliver-area}}
-  <div class="delivery-block__wrapper customer-journey-block">
-    {{> user-address-delivery radioName="checkout-address-radio" modal="modalDeliveryEdit" selectedAddress=true simpleAddress=true isDeleted=true}}
-  </div>
-
-  <button class="btn btn-action btn_full">
-    <span class="btn__text">Continue to delivery details</span>
-  </button>
-</div>
-{{/content}}
-{{/extend}}
-
-{{/content}}
-{{/extend}}
-
-

package/src/page_default-store-page-empty.html

@@ -1,48 +0,0 @@
-{{#extend "my-account-v2" dataBreadcrumbs=default-store.breadcrumbs pageClass="page_my-account_new" title="Default Store Page" pageMyAcc=true myAccV2=true isLoggedIn=true mainClass="default-store"}}
-{{#content "head" mode="append"}}
-<link type="text/css" rel="stylesheet" href="./css/pages/page_default-store.css">
-{{/content}}
-{{#content "main"}}
-<div class="container">
-  <div class="row">
-    <div class="col-12">
-      {{> my-account/mobile-nav
-          menu=default-store.menu
-          active-index=6
-          page-name=default-store.menu.[6].title
-          }}
-    </div>
-  </div>
-</div>
-
-<div class="container default-store__wrap">
-  <div class="row">
-    <div class="col-12 d-md-none">
-      <h1 class="default-store__title">{{default-store.title}}</h1>
-    </div>
-    <div class="col-12 col-md-6 default-store__search">
-      <div class="default-store__header">
-        <h1 class="default-store__title d-none d-md-block">{{default-store.title}}</h1>
-        <p class="default-store__subtitle">{{default-store.subtitle}}</p>
-      </div>
-      {{> default-store/store-form
-          default-store.searchField
-      }}
-      {{> default-store/store-unavailable
-          default-store.unavailable
-      }}
-      {{> default-store/list-of-store
-          style="display: none;"
-      }}
-    </div>
-    <div class="col-12 col-md-6">
-    </div>
-  </div>
-</div>
-
-{{/content}}
-{{#content "foot" mode="append"}}
-<script defer src="./js/my-account.min.js"></script>
-<script defer src="./js/default-store.min.js"></script>
-{{/content}}
-{{/extend}}

package/src/page_default-store-page.html

@@ -1,55 +0,0 @@
-{{#extend "my-account-v2" dataBreadcrumbs=default-store.breadcrumbs pageClass="page_my-account_new" title="Default Store Page" pageMyAcc=true myAccV2=true isLoggedIn=true mainClass="default-store"}}
-{{#content "head" mode="append"}}
-<link type="text/css" rel="stylesheet" href="./css/pages/page_default-store.css">
-{{/content}}
-{{#content "notification"}}
-  <div class="globalMessages">
-    <div class="container">
-      {{> notifications notification-page.success withCloseBtn="true"}}
-    </div>
-  </div>
-{{/content}}
-{{#content "main"}}
-<div class="container">
-  <div class="row">
-    <div class="col-12">
-      {{> my-account/mobile-nav
-      menu=default-store.menu
-      active-index=6
-      page-name=default-store.menu.[6].title
-      }}
-    </div>
-  </div>
-</div>
-
-<div class="container default-store__wrap">
-  <div class="row">
-    <div class="col-12 d-md-none">
-      <h1 class="default-store__title">{{default-store.title}}</h1>
-    </div>
-    <div class="col-12 col-md-6 default-store__search">
-      <div class="default-store__header">
-        <h1 class="default-store__title d-none d-md-block">{{default-store.title}}</h1>
-        <p class="default-store__subtitle default-store__subtitle--change">{{default-store.subtitleChange}}</p>
-      </div>
-      {{> default-store/store-form
-          default-store.searchField
-      }}
-      {{> default-store/list-of-store
-          style="display: none;"
-      }}
-    </div>
-    <div class="col-12 col-md-6">
-      {{> default-store/current-store
-          default-store.currentStore
-      }}
-    </div>
-  </div>
-</div>
-
-{{/content}}
-{{#content "foot" mode="append"}}
-<script defer src="./js/my-account.min.js"></script>
-<script defer src="./js/default-store.min.js"></script>
-{{/content}}
-{{/extend}}

package/src/page_my-account-installer.html

@@ -1,93 +0,0 @@
-{{#extend "my-account-v2"
-  customIconUserClass=my_account.installer.icons.installer
-  dataBreadcrumbs=my_account.installer.breadcrumbs
-  pageClass="page_my-account_new"
-  title=my_account.installer.title
-  pageMyAcc=true
-  myAccV2=true
-  isLoggedIn=true
-  mainClass="my-account"
-  switch-vat=true
-}}
-{{#content "heading"}}
-{{> notifications
-    notification-page.info-message
-    text=my_account.installer.bannerText
-    }}
-{{/content}}
-{{#content "main"}}
-<div class="container">
-  <div class="row">
-    <div class="col-12">
-      {{> my-account/mobile-nav my-account-menu-new
-          customIcon=true
-          menu=my_account.installer.menu
-          active-index=0
-          page-name=my_account.installer.menu.[0].title
-          }}
-    </div>
-  </div>
-</div>
-<div class="account-summary">
-  <div class="container">
-    <div class="row">
-      <div class="col-12">
-        <div class="account-summary__wrapper">
-          {{> my-account/greetings
-              name=my_account.user.name
-              subtitle=my_account.user.email
-          }}
-          {{> my-account/discount
-              discountSrc=my_account.installer.discount
-              installer=true
-              title="In-store discount"
-              code=my_account.discount
-              customIcon=my_account.installer.icons.installer
-          }}
-          {{> my-account/clipboard-code-card
-              mod="trade-pro-id"
-              customIcon=my_account.installer.icons.installer
-              title="TradePro ID"
-              code=my_account.tradeProId
-          }}
-          {{> my-account/clipboard-code-card
-              mod="discount-code"
-              icon="fas fa-badge-percent"
-              title="Online discount code"
-              code=my_account.installer.discountCode
-          }}
-        </div>
-        {{> my-account/active-orders/list-orders
-            switch-vat=true
-            title=my_account.installer.activeOrders.sectionTitle
-            linkText='View all orders'
-            orders=my_account.installer.activeOrders.orderList
-        }}
-      </div>
-    </div>
-  </div>
-</div>
-<div class="container">
-  <div class="row">
-    <div class="col-12">
-      {{> my-account/menu-items
-          items=my_account.installer.menu
-          }}
-    </div>
-  </div>
-</div>
-<div class="account-actions">
-  <div class="container">
-    <div class="row">
-      <div class="col-12">
-        {{> my-account/user-account-actions mod="d-sm-none"}}
-        {{> my-account/contact-us contacts=my_account.contacts}}
-      </div>
-    </div>
-  </div>
-</div>
-{{/content}}
-{{#content "foot" mode="append"}}
-<script defer src="./js/my-account.min.js"></script>
-{{/content}}
-{{/extend}}