wickes-css2 2.94.0-develop.2 → 2.94.0-develop.20

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

@@ -24,25 +24,40 @@ Wick.PersonalDetails = {
     formInvalidClass: 'form_invalid',
     notification: '.notification',
     fieldError: '.form-row.form-row_validation-error',
+    changePasswordPopup: '#change-password-popup',
+    globalMessage: '.globalMessages',
   },
-  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',
+    errorEmail: 'Please enter your email address',
   },
   defaultNotificationConfig: {
-    container: '.globalMessages .col-12',
+    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 [
       {
@@ -111,11 +126,11 @@ Wick.PersonalDetails = {
           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.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.LeaveEvent.removeLeaveEvent();
+        Wick.PersonalDetails.scrollToElement(Wick.PersonalDetails.el.globalMessage);
       })
       .catch((error) => {
         Wick.Notification.show({
@@ -124,11 +139,12 @@ Wick.PersonalDetails = {
           type: 'error',
         });
         Wick.PersonalDetails.handleFieldErrors(error);
+        Wick.PersonalDetails.scrollToElement(Wick.PersonalDetails.el.globalMessage);
       });
   },
-  handleFieldErrors(fieldErrors) {
-    if (fieldErrors && fieldErrors.length) {
-      fieldErrors.forEach((fieldError) => {
+  handleFieldErrors(error) {
+    if (error.fieldErrors && error.fieldErrors.length) {
+      error.fieldErrors.forEach((fieldError) => {
         const field = `#${fieldError.field}`;
         updateStylingError(field, false, fieldError.message);
       });
@@ -136,6 +152,15 @@ Wick.PersonalDetails = {
   },
   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 {
@@ -144,6 +169,7 @@ Wick.PersonalDetails = {
         text: 'Please correct the errors below.',
         type: 'error',
       });
+      Wick.PersonalDetails.scrollToElement(Wick.PersonalDetails.el.globalMessage);
     }
   },
   updateUserInformationSection(personalDetails) {
@@ -153,27 +179,36 @@ Wick.PersonalDetails = {
 
     $userInformationList.empty();
 
-    personalDetails.forEach(({ name, value }) => {
-      const label = Wick.PersonalDetails.fieldToLabelMap[name] || name;
-
+    personalDetails.forEach(({ name, value, text }) => {
+      const label = Wick.PersonalDetails.fieldToLabelMap(name);
+      const textField = text || value
       $userInformationList.append(
         userInformationField({
           label,
-          value,
+          textField,
         })
       );
     });
+
+    Wick.PersonalDetails.hideParentListItemIfLabelExists('CSRFToken');
   },
   updateFormFields(personalDetails) {
-    personalDetails.forEach(({ name, value }) => {
+    personalDetails.forEach(({ name, value, text }) => {
       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 || '');
+        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');
+            }
+          });
         }
       }
     });
@@ -182,18 +217,21 @@ Wick.PersonalDetails = {
     Wick.PersonalDetails.hideForm();
     $(Wick.PersonalDetails.el.notification).remove();
     $(Wick.LeaveEvent.el.leavePopup).modal('hide');
-    Wick.PersonalDetails.updateFormFields(Wick.PersonalDetails.initialFormState);
+    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');
-    const currentState = Wick.LeaveEvent.getState(Wick.PersonalDetails.el.userForm);
-    const isDifferent = !_.isEqual(currentState, Wick.PersonalDetails.initialFormState);
 
-    if (isDifferent) {
+    if (Wick.PersonalDetails.hasUnsavedChanges()) {
       event.preventDefault();
-      $(Wick.LeaveEvent.el.leavePopup).modal('show');
+      $(Wick.PersonalDetails.el.changePasswordPopup).modal('show');
       Wick.LeaveEvent.proceedBrowserLeave = true;
-      $(Wick.LeaveEvent.el.leavePopup).find(Wick.PersonalDetails.el.btnContinue).off('click').on('click', function () {
+      $(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;
@@ -202,9 +240,40 @@ Wick.PersonalDetails = {
       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.initialFormState = Wick.LeaveEvent.getState(Wick.PersonalDetails.el.userForm)
+    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);

package/src/layouts/basket-new.hbs

@@ -38,7 +38,7 @@
       {{#block "prefooter"}}{{/block}}
     </main>
     {{#block "footer"}}
-      {{> footer-checkout-v2 }}
+      {{> footer-checkout-v2}}
     {{/block}}
     {{#block "foot"}}
       {{> scripts }}

package/src/layouts/checkout-new.hbs

@@ -42,6 +42,7 @@
     {{/block}}
     {{#block "foot"}}
       {{> scripts }}
+      <script src="./js/checkout.min.js"></script>
     {{/block}}
   </body>
 </html>

package/src/page_checkout_confirmation-new-marketing-consent-error.html

@@ -61,8 +61,6 @@
     </div>
   </div>
 
-  {{> checkout_voucher_large  title="Voucher Code"}}
-
   <div class="continue-btn">
     <button class="btn btn-action">Continue to Payment Details</button>
   </div>

package/src/page_checkout_delivery-address-customer-journey.html

@@ -36,8 +36,6 @@
     </div>
   </div>
 
-{{> checkout_voucher_large  title="Voucher Code" id="0"}}
-
   <div class="continue-btn">
       <button class="btn btn-action">Continue to Delivery Details</button>
   </div>
@@ -47,7 +45,6 @@
 {{#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="modalDeliveryEdit" title="Edit delivery address" fullWidth=true}}
     {{#content "body"}}
@@ -67,5 +64,3 @@
 
 {{/content}}
 {{/extend}}
-
-

package/src/page_checkout_delivery-address-v2.html

@@ -32,9 +32,6 @@
     </div>
   </div>
 
-
-{{> checkout_voucher_large  title="Voucher Code" id="0"}}
-
   <div class="continue-btn">
       <button class="btn btn-action">Continue to Delivery Details</button>
   </div>
@@ -43,6 +40,5 @@
 
 {{#content "foot" mode="append"}}
 <script defer src="./js/page/checkout-confirmation-new.js"></script>
-<script src="./js/checkout.min.js"></script>
 {{/content}}
 {{/extend}}

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

@@ -1,4 +1,4 @@
-{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new" title="Checkout - Delivery details" isAsideSticky="true"}}
+{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new page_checkout" title="Checkout - Delivery details" isAsideSticky="true"}}
 {{#content "steps"}}
 {{> steps active-step-index="2" }}
 {{/content}}
@@ -117,8 +117,6 @@
         </button>
     </div>
 
-{{> checkout_voucher_large  title="Voucher Code"}}
-
   <div class="continue-btn">
       <button class="btn btn-action">Continue to Payment Details</button>
   </div>
@@ -146,5 +144,3 @@
 
 {{/content}}
 {{/extend}}
-
-

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

@@ -120,8 +120,6 @@
         </button>
     </div>
 
-{{> checkout_voucher_large  title="Voucher Code"}}
-
   <div class="continue-btn">
       <button class="btn btn-action">Continue to Payment Details</button>
   </div>
@@ -131,7 +129,6 @@
 {{#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"}}

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

@@ -144,8 +144,6 @@
         </button>
     </div>
 
-{{> checkout_voucher_large  title="Voucher Code"}}
-
   <div class="continue-btn">
       <button class="btn btn-action">Continue to Payment Details</button>
   </div>
@@ -155,7 +153,6 @@
 {{#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}}

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

@@ -126,9 +126,6 @@
         </button>
     </div>
 
-
-{{> checkout_voucher_large  title="Voucher Code"}}
-
   <div class="continue-btn">
       <button class="btn btn-action">Continue to Payment Details</button>
   </div>
@@ -160,5 +157,3 @@
 
 {{/content}}
 {{/extend}}
-
-

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

@@ -123,9 +123,6 @@
         </button>
     </div>
 
-
-{{> checkout_voucher_large  title="Voucher Code"}}
-
   <div class="continue-btn">
       <button class="btn btn-action">Continue to Payment Details</button>
   </div>
@@ -157,5 +154,3 @@
 
 {{/content}}
 {{/extend}}
-
-

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

@@ -119,8 +119,6 @@
         </button>
     </div>
 
-{{> checkout_voucher_large  title="Voucher Code"}}
-
   <div class="continue-btn">
       <button class="btn btn-action">Continue to Payment Details</button>
   </div>
@@ -130,7 +128,6 @@
 {{#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"}}

package/src/page_checkout_delivery-details_guest-new.html

@@ -117,8 +117,6 @@
         </button>
     </div>
 
-{{> checkout_voucher_large  title="Voucher Code"}}
-
   <div class="continue-btn">
       <button class="btn btn-action">Continue to Payment Details</button>
   </div>
@@ -127,7 +125,6 @@
 
 {{#content "foot" mode="append"}}
     <script defer src="./js/page/checkout-confirmation-new.js"></script>
-    <script src="./js/checkout.min.js"></script>
 
   {{#extend "modal" classMod="edit-delivery-address" id="modalDeliveryEdit" title="Edit delivery address" fullWidth=true}}
   {{#content "body"}}
@@ -147,5 +144,3 @@
 
 {{/content}}
 {{/extend}}
-
-

package/src/page_checkout_delivery_address-asm-new.html

@@ -24,8 +24,6 @@
     </div>
   </div>
 
-{{> checkout_voucher_large  title="Voucher Code"}}
-
   <div class="continue-btn">
       <button class="btn btn-action">Continue to Delivery Details</button>
   </div>
@@ -35,7 +33,6 @@
 {{#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="modalDeliveryEdit" title="Edit delivery address" fullWidth=true}}
     {{#content "body"}}
@@ -51,4 +48,3 @@
 
 {{/content}}
 {{/extend}}
-

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

@@ -126,9 +126,6 @@
   </button>
 </div>
 
-
-{{> checkout_voucher_large  title="Voucher Code"}}
-
 <div class="continue-btn">
   <button class="btn btn-action">Continue to Payment Details</button>
 </div>
@@ -138,7 +135,6 @@
 {{#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"}}
@@ -157,5 +153,3 @@
 
 {{/content}}
 {{/extend}}
-
-

package/src/page_checkout_payment-details-v2.html

@@ -1,4 +1,4 @@
-{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new" title="Checkout - Payment details" isAsideSticky="true" clearPayIcon=true}}
+{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new page_checkout" title="Checkout - Payment details" isAsideSticky="true" clearPayIcon=true}}
 {{#content "steps"}}
 {{> steps-three-steps active-step-index="2"}}
 {{/content}}

package/src/page_checkout_payment-details_guest-with-checkout-journey.html

@@ -61,8 +61,6 @@
         </div>
     </div>
 
-    {{> checkout_voucher_large  title="Voucher Code"}}
-
     <div class="continue-btn">
         <button class="btn btn-action">Continue to Payment Details</button>
     </div>

package/src/page_checkout_payment-details_login-with-checkout-journey.html

@@ -61,8 +61,6 @@
         </div>
     </div>
 
-    {{> checkout_voucher_large  title="Voucher Code"}}
-
     <div class="continue-btn">
         <button class="btn btn-action">Continue to Payment Details</button>
     </div>

package/src/page_checkout_payment-details_with-card-loader.html

@@ -0,0 +1,56 @@
+{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new" title="Checkout - Payment details" isAsideSticky="true"}}
+{{#content "steps"}}
+{{> steps-three-steps active-step-index="3" }}
+{{/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">
+<link type="text/css" rel="stylesheet" href="./css/components/payment-details-BPS-form.css">
+<link type="text/css" rel="stylesheet" href="./css/components/checkout-payment-details-v2.css">
+{{/content}}
+
+{{#content "aside"}}
+{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true}}
+{{/content}}
+
+
+{{#content "main"}}
+<div class="delivery-block">
+    <h3 class="delivery-block__heading">Delivery Information</h3>
+    <div class="delivery-block__wrapper">
+        {{#with checkoutOrder.deliveryPayments.[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__wrapper">
+        {{#with checkoutOrder.clickCollectDeliveryAddress.[0]}}
+        <div class="checkout-order">
+            {{> checkout-order-block}}
+        </div>
+        {{/with}}
+    </div>
+</div>
+
+<div class="billing-payment-block">
+    <h3 class="billing-payment-block__heading">Billing & Payment</h3>
+    <div class="billing-payment-block__wrapper">
+        {{> checkout-payment-details-v2 }}
+    </div>
+</div>
+
+{{/content}}
+
+{{#content "foot" mode="append"}}
+<script defer src="./js/page/checkout-confirmation-new.js"></script>
+<script defer src="./js/page/checkout-payment-details.js"></script>
+{{> checkout-terms-and-conditions-modal }}
+{{> payment-loader }}
+{{/content}}
+{{/extend}}

package/src/page_checkout_rapid-delivery-details.html

@@ -128,9 +128,6 @@
         </button>
     </div>
 
-
-{{> checkout_voucher_large  title="Voucher Code"}}
-
   <div class="continue-btn">
       <button class="btn btn-action">Continue to Payment Details</button>
   </div>
@@ -140,7 +137,6 @@
 {{#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"}}
@@ -159,5 +155,3 @@
 
 {{/content}}
 {{/extend}}
-
-

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

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