wickes-css2 2.93.0 → 2.94.0-develop.1

package/src/data/my-account/data_personal-details.json

@@ -0,0 +1,179 @@
+{
+  "personal_details": {
+    "buttons": [
+      {
+        "class": "btn btn-primary btn_full btn--save",
+        "type": "submit",
+        "dataAction": "save-form",
+        "text": "Save changes"
+      },
+      {
+        "class": "btn btn-outline-primary btn_full btn--cancel",
+        "type": "button",
+        "dataAction": "cancel-form",
+        "text": "Cancel"
+      }
+    ],
+    "leave-popup": {
+      "title": "Your personal details won’t be saved",
+      "headerIcon": "fas fa-exclamation-circle",
+      "description": "Are you sure you want to continue?",
+      "actions": {
+        "mod": "actions",
+        "buttons": [
+          {
+            "title": "Cancel",
+            "isPrimary": true,
+            "close-modal": true
+          },
+          {
+            "mod": "btn-continue",
+            "data-action": "reset-details",
+            "title": "Yes, continue",
+            "isSecondary": true
+          }
+        ]
+      }
+    },
+    "diy": {
+      "breadcrumbs": [
+        {
+          "url": "/",
+          "text": "Home"
+        },
+        {
+          "url": "/page_my-account.html",
+          "text": "My Account"
+        },
+        {
+          "url": "/page_personal-details.html",
+          "text": "Personal Details"
+        }
+      ],
+      "currentData": {
+        "Title": "Mr",
+        "Fist name": "James",
+        "Surname": "Smith",
+        "Email address": "james_smith@gmail.com",
+        "How would you describe yourself or your main trade": "DIY"
+      },
+      "fields": [
+        {
+          "type": "dropdown",
+          "dropdown": true,
+          "id": "titleCode",
+          "label": "Title",
+          "rowMod": "row-title",
+          "required": true,
+          "options": [
+            { "value": "Mr", "label": "Mr" },
+            { "value": "Mrs", "label": "Mrs" },
+            { "value": "Dr", "label": "Dr" }
+          ],
+          "selectedIndex": "0"
+        },
+        {
+          "type": "text",
+          "id": "firstName",
+          "label": "First name",
+          "value": "James",
+          "required": true
+        },
+        {
+          "type": "text",
+          "id": "lastName",
+          "label": "Surname",
+          "value": "Smith",
+          "required": true
+        },
+        {
+          "type": "email",
+          "id": "email",
+          "label": "Email address",
+          "value": "james_smith@gmail.com",
+          "required": true
+        },
+        {
+          "type": "dropdown",
+          "dropdown": true,
+          "id": "tradeType",
+          "label": "How would you describe yourself or your main trade",
+          "placeholder": "DIY",
+          "required": true,
+          "options": [
+            { "value": "DIY", "label": "DIY" },
+            { "value": "TradePro", "label": "Trade Pro" }
+          ],
+          "selectedIndex": "0"
+        }
+      ]
+    },
+    "installer": {
+      "breadcrumbs": [
+        {
+          "url": "/",
+          "text": "Home"
+        },
+        {
+          "url": "/page_my-account.html",
+          "text": "My Installer Account"
+        },
+        {
+          "url": "/page_personal-details.html",
+          "text": "Personal Details"
+        }
+      ],
+      "currentData": {
+        "Title": "Mr",
+        "Fist name": "James",
+        "Surname": "Smith",
+        "Email address": "james_smith@gmail.com",
+        "Trade type": "Installer"
+      },
+      "fields": [
+        {
+          "type": "dropdown",
+          "dropdown": true,
+          "id": "titleCode",
+          "label": "Title",
+          "rowMod": "row-title",
+          "required": true,
+          "options": [
+            { "value": "Mr", "label": "Mr" },
+            { "value": "Mrs", "label": "Mrs" },
+            { "value": "Dr", "label": "Dr" }
+          ],
+          "selectedIndex": "0"
+        },
+        {
+          "type": "text",
+          "id": "firstName",
+          "label": "First name",
+          "value": "James",
+          "required": true
+        },
+        {
+          "type": "text",
+          "id": "lastName",
+          "label": "Surname",
+          "value": "Smith",
+          "required": true
+        },
+        {
+          "type": "email",
+          "id": "email",
+          "label": "Email address",
+          "value": "james_smith@gmail.com",
+          "required": true
+        },
+        {
+          "type": "tradeType",
+          "id": "tradeType",
+          "label": "Trade type",
+          "value": "Installer",
+          "disabled": true
+        }
+      ]
+    }
+  }
+}

package/src/elements/dropdown.hbs

@@ -1,10 +1,21 @@
 <div class="ddn {{mod}} {{#if error}}ddn_error{{/if}}">
   <select id="{{id}}" name="{{id}}" {{#if disabled}}disabled{{/if}}>
-    <option value="" disabled selected hidden>{{placeholder}}</option>
-    <option>Item value</option>
-    <option>Item value 2</option>
-    <option>Item value 3</option>
-    <option>Item value 4</option>
+    {{#if options}}
+      {{#each options as |option|}}
+        <option
+          {{#if (eq @index ../selectedIndex)}}selected{{/if}}
+          value="{{option.value}}"
+        >
+          {{option.label}}
+        </option>
+      {{/each}}
+    {{else}}
+      <option value="" disabled selected hidden>{{placeholder}}</option>
+      <option value="item1">Item value</option>
+      <option value="item2">Item value 2</option>
+      <option value="item3">Item value 3</option>
+      <option value="item4">Item value 4</option>
+    {{/if}}
   </select>
   <span class="icon">
     <i class="fas fa-chevron-down"></i>

package/src/elements/form-row.hbs

@@ -22,7 +22,7 @@
       {{/if}}
     {{/unless}}
     {{#if dropdown}}
-      {{> dropdown mod=ddn-mod }}
+      {{> dropdown mod=ddn-mod options=options selectedIndex=selectedIndex }}
     {{/if}}
     {{#if infoIcon}}
       {{> info-icon modification="icon-info" title=infoIcon data-container=(concat "." infoIcon-uid)  data-placement="top"}}

package/src/js/components/date-selection.js

@@ -8,24 +8,20 @@ Wick.DateSelection = function () {
         calendarCell = $(calendarCellClassName),
         calendarCellSelected = 'calendar__cell_selected',
         calendarRowExtended = '.calendar__row_extended',
-        deliverySelection = $('.delivery-selection'),
-        deliverySelectionMobile = $('.delivery-selection-mobile'),
         inputField = '.delivery-types__slot label',
         confirmButton = '.delivery-types__confirm',
-        changeDateLinks = '.delivery-time__show-calendar-link, .delivery-selection__show-calendar-link',
         validationError = $('.delivery-types__error'),
         validationErrorShow = 'delivery-types__error-show',
-        deliverySelectionShow = 'delivery-selection-show',
         deliveryTypesHide = 'delivery-types-hide',
         deliveryTypesSlotLabel = $(inputField),
         closeIcon = $('.delivery-types__accordion'),
         deliveryTypesInnerStr = '.delivery-types__inner',
         dateSelection = '.date-selection',
         dateSelectionTimeVisible = 'date-selection_time-visible',
-        deliveryTypesWrap = $('.delivery-types-wrap'),
+        deliveryContainer = $('.delivery-container'),
         deliveryTypesBtn = 'button.btn',
         deliveryTypeBtnClassSecondary = 'btn-secondary',
-        deliveryTypeBtnClass = 'delivery-type__action-btn-primary';
+        deliveryBtnClass = 'delivery-btn';
 
     function init() {
         var count = 0;
@@ -50,9 +46,9 @@ Wick.DateSelection = function () {
         }
 
         componentDateSelection.on('click', deliveryTypesBtn, function () {
-            $(this).parent(deliveryTypesWrap).find(deliveryTypesBtn).removeClass(deliveryTypeBtnClass);
-            $(this).parent(deliveryTypesWrap).find(deliveryTypesBtn).addClass(deliveryTypeBtnClassSecondary);
-            $(this).addClass(deliveryTypeBtnClass);
+            $(this).parent(deliveryContainer).find(deliveryTypesBtn).removeClass(deliveryBtnClass);
+            $(this).parent(deliveryContainer).find(deliveryTypesBtn).addClass(deliveryTypeBtnClassSecondary);
+            $(this).addClass(deliveryBtnClass);
             $(this).removeClass(deliveryTypeBtnClassSecondary);
         });
 
@@ -79,9 +75,7 @@ Wick.DateSelection = function () {
                 if ($(window).width() < 767) {
                     var rowExtendedBlock = $(this).closest(calendarRowExtended);
                     rowExtendedBlock.slideUp();
-                    deliverySelectionMobile.show();
                 } else {
-                    deliverySelection.addClass(deliverySelectionShow);
                     $deliveryTypes.addClass(deliveryTypesHide);
                 }
             } else {
@@ -112,7 +106,6 @@ Wick.DateSelection = function () {
 
         calendarCell.on("click", function () {
             $deliveryTypes.removeClass(deliveryTypesHide);
-            deliverySelection.removeClass(deliverySelectionShow);
 
             $(deliveryTypesInnerStr).find('input').each(function () {
                 if ($(this).attr('checked')) {
@@ -148,12 +141,6 @@ Wick.DateSelection = function () {
                 }
             }
         });
-
-        $(changeDateLinks).on("click", function () {
-            $(this).closest(dateSelection).removeClass(dateSelectionTimeVisible);
-            deliverySelection.removeClass(deliverySelectionShow);
-            calendarCell.removeClass(calendarCellSelected);
-        });
     }
 
     if (!componentDateSelection.length) {
@@ -166,8 +153,7 @@ Wick.DateSelection = function () {
         closeIcon.unbind('click');
         componentDateSelection.unbind('click');
         calendarCell.unbind('click');
-        $(changeDateLinks).unbind('click');
-        deliveryTypesWrap.unbind('click');
+        deliveryContainer.unbind('click');
     }
 
     $(window).on('resize', _.debounce(function () {

package/src/js/components/leave-event.js

@@ -8,7 +8,7 @@ Wick.LeaveEvent = {
   },
   proceedBrowserLeave: true,
   initialFormState: {},
-  makeLeaveByAction(e, form) {
+  makeLeaveByAction(e, form, callback) {
     const currentState = Wick.LeaveEvent.getState(form);
     const isDifferent = !_.isEqual(currentState, Wick.LeaveEvent.initialFormState);
 
@@ -17,6 +17,10 @@ Wick.LeaveEvent = {
       Wick.LeaveEvent.showCustomModal();
       Wick.LeaveEvent.proceedBrowserLeave = false;
     }
+
+    if (callback && !isDifferent) {
+      callback();
+    }
   },
   makeLeaveByBrowser(form) {
     const currentState = Wick.LeaveEvent.getState(form);
@@ -40,12 +44,12 @@ Wick.LeaveEvent = {
   removeLeaveEvent() {
     $(window).off('beforeunload', Wick.LeaveEvent.checkLeavePopup);
   },
-  bindEvent(form = 'form', leaveBtn, submitBtn) {
+  bindEvent(form = 'form', leaveBtn, submitBtn, callback) {
     Wick.LeaveEvent.initialFormState = Wick.LeaveEvent.getState(form);
     Wick.LeaveEvent.el.form = form;
 
     $(leaveBtn).on('click', (e) => {
-      Wick.LeaveEvent.makeLeaveByAction(e, form);
+      Wick.LeaveEvent.makeLeaveByAction(e, form, callback);
     });
 
     if ($(Wick.LeaveEvent.el.leavePopup).length) {
@@ -57,6 +61,9 @@ Wick.LeaveEvent = {
     if ($(submitBtn).length) {
       $(submitBtn).on('click', (e) => {
         Wick.LeaveEvent.removeLeaveEvent();
+        if (callback) {
+          callback();
+        }
       });
     }
 

package/src/js/emulation/date-selection.js

@@ -4,7 +4,6 @@ Wick.DateSelection = (function(){
     cell = '.calendar__cell_cnt',
     selectedCell = 'calendar__cell_selected',
     isSelected = 'date-selection_selected',
-    backToCalendar = '.delivery-time__show-calendar-link',
     isDateSelected = false;
 
   var selectTimeSlot = function(e){
@@ -15,32 +14,12 @@ Wick.DateSelection = (function(){
     isDateSelected = true;
   };
 
-  var mobileView = function(){
-    var isTimeSlotsVisible = 'date-selection_time-visible';
-
-    $self
-    .off('.time')
-    .removeClass(isTimeSlotsVisible)
-    .on('click.time', cell, function(){
-      $self.addClass(isTimeSlotsVisible);
-    })
-    .on('click.time', backToCalendar, function(){
-      $self.removeClass(isTimeSlotsVisible);
-    });
-  };
-
   var init = function () {
     if (!$self.length) {
       return;
     }
 
     $self.on('click', cell, selectTimeSlot);
-    new SimpleBar($self.find('.delivery-types__inner')[0]);
-
-    if (Wick.Responsive.getCurrentBreakpoint() === 'down-sm') {
-      mobileView();
-    }
-    Wick.Responsive.onBreakpoint(mobileView, 'down-sm');
   }
 
   init();

package/src/js/emulation/personal-details-local.js

@@ -0,0 +1,73 @@
+var Wick = Wick || {};
+Wick.PersonalDetailsData = (function(){
+  return {
+    success: {
+      globalMessage: {
+        status: 'success',
+        message: 'Your profile has been updated',
+      },
+      fieldErrors: null,
+    },
+    validationError: {
+      globalMessage: {
+        status: 'error',
+        message: 'Please correct the errors below.',
+      },
+      fieldErrors: [
+        { field: 'email', message: 'Please enter your email' },
+      ],
+    },
+    serverError: {
+      globalMessage: {
+        status: 'error',
+        message: 'Sorry, we were unable to update your personal details, please try again',
+      },
+      fieldErrors: null,
+    },
+  }
+})()
+
+function getResponseBasedOnField(personalDetails) {
+  const personalDetailsObject = personalDetails.reduce((acc, { name, value }) => {
+    acc[name] = value;
+    return acc;
+  }, {});
+
+  const { firstName, email } = personalDetailsObject;
+  const isValidationError = email === 'test@gmail.com';
+  const isServerError = firstName === 'server_error';
+
+  if (isValidationError) {
+    return { success: false, response: Wick.PersonalDetailsData.validationError };
+  }
+
+  if (isServerError) {
+    return { success: false, response: Wick.PersonalDetailsData.serverError };
+  }
+
+  return { success: true, response: Wick.PersonalDetailsData.success };
+}
+
+function initPersonalDetails() {
+  if (!Wick?.PersonalDetails?.UPDATE_PERSONAL_DETAILS_EVENT) {
+    return;
+  }
+
+  $(window).on(Wick.PersonalDetails.UPDATE_PERSONAL_DETAILS_EVENT, function ({ detail: { resolve, reject } }) {
+    setTimeout(() => {
+      const personalDetails = Wick.LeaveEvent.getState(Wick.PersonalDetails.el.userForm);
+
+      const { success, response } = getResponseBasedOnField(personalDetails);
+
+      if (success) {
+        return resolve(response);
+      } else {
+        return reject(response);
+      }
+    }, 500);
+  });
+}
+
+$(document).ready(function () {
+  initPersonalDetails();
+});

package/src/js/page/my-account.js

@@ -0,0 +1,51 @@
+import {copyToClipboard} from "./utils/copy-to-clipboard";
+
+var Wick = window.Wick || {};
+
+Wick.MyAccount = {
+  el: {
+    $myAccount: $('.my-account'),
+  },
+  clipboardCodes: {
+    tradeProId: {
+      titleEl: '.clipboard-code.trade-pro-id .title',
+      subtitleEl: '.clipboard-code.trade-pro-id .subtitle',
+      btnCopy: '.btn--trade-pro-id',
+    },
+    discountCode: {
+      titleEl: '.clipboard-code.discount-code .title',
+      subtitleEl: '.clipboard-code.discount-code .subtitle',
+      btnCopy: '.btn--discount-code',
+    },
+  },
+  copyCode(codeType) {
+    const { titleEl, subtitleEl, btnCopy } = Wick.MyAccount.clipboardCodes[codeType];
+    const value = $(subtitleEl).text().trim();
+    const title = $(titleEl).text().trim();
+
+    copyToClipboard(value, btnCopy);
+    Wick.SnackBar.show(
+      {
+        text: `${title} copied to clipboard`,
+        type: Wick.SnackBar.types.SUCCESS,
+        withCloseButton: false,
+        autoClose: true,
+        delayBeforeClose: 1500
+      }
+    );
+  },
+  init() {
+    Object.keys(Wick.MyAccount.clipboardCodes).forEach((codeType) => {
+      const { btnCopy } = Wick.MyAccount.clipboardCodes[codeType];
+      $(btnCopy).on('click', () => Wick.MyAccount.copyCode(codeType));
+    });
+  }
+}
+
+$(document).ready(function () {
+  if (!Wick.MyAccount.el.$myAccount.length) {
+    return;
+  }
+
+  Wick.MyAccount.init();
+});