wickes-css2 2.93.0 → 2.94.0-develop.1

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

@@ -0,0 +1,217 @@
+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',
+  },
+  initialFormState: {},
+  errorMessages: {
+    errorFirstName: 'Please enter your first name',
+    errorSurname: 'Please enter your surname',
+    errorEmail: 'Please enter you email',
+  },
+  fieldToLabelMap: {
+    titleCode: 'Title',
+    firstName: 'First name',
+    lastName: 'Surname',
+    email: 'Email',
+    tradeType: 'How would you describe yourself or your main trade',
+  },
+  defaultNotificationConfig: {
+    container: '.globalMessages .col-12',
+    closeBtn: true,
+    noScrolling: true,
+  },
+  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.PersonalDetails.initialFormState = Wick.LeaveEvent.getState(Wick.PersonalDetails.el.userForm);
+        Wick.PersonalDetails.updateUserInformationSection(Wick.PersonalDetails.initialFormState);
+        Wick.PersonalDetails.updateFormFields(Wick.PersonalDetails.initialFormState);
+        Wick.PersonalDetails.hideForm();
+        Wick.LeaveEvent.removeLeaveEvent();
+      })
+      .catch((error) => {
+        Wick.Notification.show({
+          ...Wick.PersonalDetails.defaultNotificationConfig,
+          text: error.globalMessage.message,
+          type: 'error',
+        });
+        Wick.PersonalDetails.handleFieldErrors(error);
+      });
+  },
+  handleFieldErrors(fieldErrors) {
+    if (fieldErrors && fieldErrors.length) {
+      fieldErrors.forEach((fieldError) => {
+        const field = `#${fieldError.field}`;
+        updateStylingError(field, false, fieldError.message);
+      });
+    }
+  },
+  submitForm(event) {
+    event.preventDefault();
+    if (Wick.PersonalDetails.validateForm()) {
+      Wick.PersonalDetails.requestToUpdateForm();
+    } else {
+      Wick.Notification.show({
+        ...Wick.PersonalDetails.defaultNotificationConfig,
+        text: 'Please correct the errors below.',
+        type: 'error',
+      });
+    }
+  },
+  updateUserInformationSection(personalDetails) {
+    const $userInformationList = $(Wick.PersonalDetails.el.userInformationList);
+
+    if (!$userInformationList.length) return;
+
+    $userInformationList.empty();
+
+    personalDetails.forEach(({ name, value }) => {
+      const label = Wick.PersonalDetails.fieldToLabelMap[name] || name;
+
+      $userInformationList.append(
+        userInformationField({
+          label,
+          value,
+        })
+      );
+    });
+  },
+  updateFormFields(personalDetails) {
+    personalDetails.forEach(({ name, value }) => {
+      const field = document.querySelector(`#${name}`);
+      if (field) {
+        field.value = value || '';
+        field.setAttribute('value', value || '');
+
+        if (field.tagName === 'SELECT' || field.tagName === 'INPUT') {
+          field.value = value || '';
+          field.setAttribute('value', value || '');
+        }
+      }
+    });
+  },
+  resetFormToInitialState() {
+    Wick.PersonalDetails.hideForm();
+    $(Wick.PersonalDetails.el.notification).remove();
+    $(Wick.LeaveEvent.el.leavePopup).modal('hide');
+    Wick.PersonalDetails.updateFormFields(Wick.PersonalDetails.initialFormState);
+  },
+  changePasswordHandler(event) {
+    const changePasswordUrl = $(Wick.PersonalDetails.el.btnChangePassword).attr('href');
+    const currentState = Wick.LeaveEvent.getState(Wick.PersonalDetails.el.userForm);
+    const isDifferent = !_.isEqual(currentState, Wick.PersonalDetails.initialFormState);
+
+    if (isDifferent) {
+      event.preventDefault();
+      $(Wick.LeaveEvent.el.leavePopup).modal('show');
+      Wick.LeaveEvent.proceedBrowserLeave = true;
+      $(Wick.LeaveEvent.el.leavePopup).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;
+    }
+  },
+  init: function () {
+    Wick.LeaveEvent.bindEvent(Wick.PersonalDetails.el.userForm, Wick.PersonalDetails.el.btnCancel, Wick.PersonalDetails.el.btnContinue, Wick.PersonalDetails.resetFormToInitialState);
+    Wick.PersonalDetails.initialFormState = Wick.LeaveEvent.getState(Wick.PersonalDetails.el.userForm)
+
+    $(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

@@ -0,0 +1,27 @@
+<!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/layouts/my-account.hbs

@@ -52,4 +52,4 @@
       {{> scripts }}
     {{/block}}
   </body>
-</html>
+</html>

package/src/page_checkout_delivery-details-v2-asm.html

@@ -26,11 +26,11 @@
             </div>
 
             <div class="component component-date-selection">
-                {{> date-selection-v2}}
+                {{> date-selection}}
             </div>
 
             {{#with checkoutOrder.deliveryDeliveryDetails.[0]}}
-                <div class="checkout-order">        
+                <div class="checkout-order">
                     {{> checkout-order-block}}
                 </div>
             {{/with}}
@@ -57,7 +57,7 @@
 
         <div class="click-collect-block__wrapper">
           {{#with checkoutOrder.clickCollectDeliveryAddress.[0]}}
-            <div class="checkout-order">        
+            <div class="checkout-order">
                 {{> checkout-order-block}}
             </div>
           {{/with}}

package/src/page_checkout_delivery-details-v2-calendar-message.html

@@ -26,7 +26,7 @@
             </div>
 
             <div class="component component-date-selection">
-                {{> date-selection-v2 calendar-message=true}}
+                {{> date-selection calendar-message=true}}
             </div>
 
 

package/src/page_checkout_delivery-details-v2-oos.html

@@ -53,7 +53,7 @@
             </div>
 
             <div class="component component-date-selection">
-                {{> date-selection-v2}}
+                {{> date-selection}}
             </div>
 
             {{#with checkoutOrder.deliveryDeliveryDetails.[0]}}

package/src/page_checkout_delivery-details-v2-wisdom-not-available.html

@@ -34,8 +34,8 @@
             </div>
 
             <div class="component component-date-selection">
-                {{> date-selection-v2 wisdom=true latest=true}}
-                {{> date-selection-v2 wisdom=true earlier=true hidden=true}}
+                {{> date-selection wisdom=true latest=true}}
+                {{> date-selection wisdom=true earlier=true hidden=true}}
             </div>
 
             {{#with checkoutOrder.deliveryDeliveryDetails.[0]}}

package/src/page_checkout_delivery-details-v2-wisdom.html

@@ -31,8 +31,8 @@
             </div>
 
             <div class="component component-date-selection">
-                {{> date-selection-v2 wisdom=true latest=true}}
-                {{> date-selection-v2 wisdom=true earlier=true hidden=true}}
+                {{> date-selection wisdom=true latest=true}}
+                {{> date-selection wisdom=true earlier=true hidden=true}}
             </div>
 
             {{#with checkoutOrder.deliveryDeliveryDetails.[0]}}

package/src/page_checkout_delivery-details-with-loader-v2.html

@@ -28,7 +28,7 @@
             </div>
 
             <div class="component component-date-selection">
-                {{> date-selection-v2}}
+                {{> date-selection}}
             </div>
 
             {{#with checkoutOrder.deliveryDeliveryDetails.[0]}}

package/src/page_checkout_delivery-details_guest-new.html

@@ -26,7 +26,7 @@
             </div>
 
             <div class="component component-date-selection">
-                {{> date-selection-v2}}
+                {{> date-selection}}
             </div>
 
             {{#with checkoutOrder.deliveryDeliveryDetails.[0]}}

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

@@ -0,0 +1,161 @@
+{{#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_checkout_delivery-details-v2.html → page_checkout_rapid-delivery-details.html}

@@ -16,17 +16,28 @@
 {{#content "main"}}
     <div class="delivery-block">
         <h3 class="delivery-block__heading">Delivery Information</h3>
+        {{> banner-news
+            description="<b>Your order qualifies for Wickes Rapid delivery.</b></br>Alternative delivery options are available."
+            classImg="fas fa-shipping-fast"
+        }}
         <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
+                    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>
             </div>
 
             <div class="component component-date-selection">
-                {{> date-selection-v2}}
+                {{> date-selection
+                    titleDelivery="Wickes Rapid delivery"
+                    subtitleDelivery="Delivery within 3 hours for £12"
+                    imgDelivery="fas fa-shipping-fast"
+                    wisdom=true
+                }}
             </div>
 
             {{#with checkoutOrder.deliveryDeliveryDetails.[0]}}

package/src/page_discount_installer.html

@@ -6,7 +6,13 @@
 {{> account-heading title="Installer Discount"}}
 {{/content}}
 {{#content "aside"}}
-{{> aside-nav2 my-account-installer-menu-new active-index="5" page-name="Installer Discount" tradePro="true"}}
+  {{> aside-nav2 my-account-installer-menu-new active-index="5" page-name="Installer Discount" tradePro="true" mod="d-none d-lg-block"}}
+  {{> my-account/mobile-nav
+      mod="account-nav--old-pages"
+      menu=my_account.installer.menu
+      active-index=3
+      page-name="Installer Discount"
+      }}
 {{/content}}
 {{#content "main"}}
 <div class="page-header">

package/src/page_marketing-preferences.html

@@ -3,7 +3,13 @@
 {{> account-heading title="Update Marketing Preferences"}}
 {{/content}}
 {{#content "aside"}}
-{{> aside-nav2 my-account-tradePro-menu-new active-index="1" page-name="Update Marketing Preferences" tradePro="true"}}
+    {{> aside-nav2 my-account-tradePro-menu-new active-index="1" page-name="Update Marketing Preferences" tradePro="true" mod="d-none d-lg-block"}}
+    {{> my-account/mobile-nav
+        mod="account-nav--old-pages"
+        menu=my_account.diy.menu
+        active-index=4
+        page-name="Marketing Preferences"
+        }}
 {{/content}}
 {{#content "main"}}
 <form action="#" class="form-bg form-personal-details">

package/src/page_my-account-installer.html

@@ -0,0 +1,93 @@
+{{#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}}