wickes-css2 2.94.0-develop.1 → 2.94.0-develop.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.94.0-develop.1",
+  "version": "2.94.0-develop.3",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {

package/src/components/account-families/actions-bar.hbs

@@ -1,15 +1,15 @@
-<div class="actions-bar {{mod}}">
+<div class="actions-bar {{this.mod}}">
   {{#each buttons}}
     {{#if url}}
       <a
-        class="btn btn_full {{#if isPrimary}}btn-primary{{/if}} {{#if isSecondary}}btn-secondary{{/if}} {{mod}}"
+        class="btn btn_full {{#if isPrimary}}btn-primary{{/if}} {{#if isSecondary}}btn-secondary{{/if}} {{this.mod}}"
         href="{{url}}"
       >
         {{title}}
       </a>
     {{else}}
       <button
-        class="btn btn_full {{#if isPrimary}}btn-primary{{/if}} {{#if isSecondary}}btn-secondary{{/if}} {{mod}}"
+        class="btn btn_full {{#if isPrimary}}btn-primary{{/if}} {{#if isSecondary}}btn-secondary{{/if}} {{this.mod}}"
         {{#if toggle-modal}}
           data-toggle="modal"
           data-target="{{target}}"

package/src/components/default-store/current-store.hbs

@@ -0,0 +1,60 @@
+<div class="current-store">
+  <p class="current-store__default">Your default store</p>
+  <h3 class="current-store__name">{{name}}</h3>
+  <p class="current-store__address">{{address}}</p>
+  <p class="current-store__phone">Phone: {{phone}}</p>
+  <a class="current-store__link" href="#">View store details</a>
+  <div class="current-store__hours">
+    <div class="current-store__hours-section">
+      <p class="title-section">Opening times</p>
+      <ul class="opening-times collapse" id="openingTimes">
+        {{#each openingTimes}}
+          <li class="opening-times__item">
+            <span class="opening-times__day">
+              {{day}}
+            </span>
+            <span class="opening-times__time">
+              {{time}}
+            </span>
+          </li>
+        {{/each}}
+      </ul>
+    </div>
+    <div class="current-store__hours-section current-store__hours-section--special">
+      <p class="title-section">Special opening times</p>
+      <ul class="special-times collapse" id="specialTimes">
+        {{#each specialOpeningTimes}}
+          <li class="special-times__item">
+            <div class="special-times__days">
+              <span class="special-times__name">
+              {{name}}
+            </span>
+              <span class="special-times__day">
+                {{day}}
+              </span>
+            </div>
+            <span class="special-times__time">
+              {{time}}
+            </span>
+          </li>
+        {{/each}}
+      </ul>
+    </div>
+    <div class="current-store__hours-section current-store__hours-section--facilities">
+      <p class="title-section">Facilities</p>
+      <ul class="facilities collapse" id="facilities">
+        {{#each facilities}}
+          <li class="facilities__item">
+            <span class="facilities__icon-container">
+              <i class="{{icon}} facilities__icon"></i>
+            </span>
+            <span class="facilities__title">{{title}}</span>
+          </li>
+        {{/each}}
+      </ul>
+    </div>
+    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#openingTimes, #specialTimes, #facilities" aria-expanded="false" aria-controls="openingTimes specialTimes facilities">
+      <i class="far fa-angle-down icon"></i>
+    </button>
+  </div>
+</div>

package/src/components/default-store/list-of-store.hbs

@@ -0,0 +1,39 @@
+<form action="#" class="list-of-store" style="{{style}}">
+  <div class="bw">
+    <div class="bw__stock stock">
+      <ul class="stock__list">
+        {{#each bigWins.stores}}
+          <li class="stock__item">
+            <div class="stock__radio">
+              {{> radiobutton  name="store" id="stock-store" checked=checked}}
+            </div>
+            {{> store-preview
+              class="stock__store"
+              id=id
+              myAcc=true
+              name=name
+              distance=distance
+            }}
+          </li>
+        {{/each}}
+        {{#each bigWins.stores}}
+          {{> store-details
+              distance = distance
+              distanceUom = distanceUom
+              name = name
+              phone = phone
+              postcode = postcode
+          }}
+        {{/each}}
+      </ul>
+    </div>
+  </div>
+  <div class="bw_act">
+    <a href="#" class="btn btn-primary btn_full my-account_add-store">
+      Add default store
+    </a>
+    <a href="#" class="btn btn-outline-primary btn_full my-account_cancel-store">
+      Cancel
+    </a>
+  </div>
+</form>

package/src/components/default-store/store-form.hbs

@@ -0,0 +1,29 @@
+<form action="#" class="search-store" data-clearable>
+  <div class="form-row form-row--clear-input" data-row-required>
+    <label class="search-store__label" for="{{id}}">{{label}}</label>
+    <div class="search-store__wrap">
+      <div class="form-row__field search-store__input">
+        <input
+          class="input"
+          id="{{id}}"
+          aria-label="{{id}}"
+          type="text"
+          name="text"
+          placeholder="{{placeholder}}"
+          autocomplete="off"
+        >
+        <button class="btn btn-secondary btn--clear" type="button">
+          <i class="{{iconCross}} icon"></i>
+        </button>
+        <button class="btn btn-search" type="submit">
+          <i class="{{iconSearch}} icon"></i>
+        </button>
+      </div>
+      <button type="button" class="btn btn-primary btn--location" id="geoLocationIcon">
+        <i class="{{iconLocation}} icon"></i>
+        <i class="{{iconError}} icon-error" style="display: none;"></i>
+      </button>
+    </div>
+    <div class="form-row__error" style="display: none">{{error}}</div>
+  </div>
+</form>

package/src/components/default-store/store-unavailable.hbs

@@ -0,0 +1,4 @@
+<div class="store-unavailable {{mod}}">
+  <h3 class="store-unavailable__title">{{title}}</h3>
+  <i class="{{icon}} icon"></i>
+</div>

package/src/components/my-account/personal-details-form.hbs

@@ -8,12 +8,17 @@
       label=this.label
       value=this.value
       placeholder=this.placeholder
+      input-mod=this.modificator
       required=this.required
       row-mod=this.rowMod
       options=this.options
       selectedIndex=this.selectedIndex
+      data-tag=this.dataTag
     }}
   {{/each}}
+  {{#if isInstaller}}
+    <input id="tradeTypeHidden" type="hidden" name="tradeTypeValue" value="installer" data-tag="trade-type-value">
+  {{/if}}
   <div class="user-form__ctas">
     {{#each buttons}}
       <button class="{{this.class}}" type="{{this.type}}" data-action="{{this.dataAction}}">

package/src/components/store-details.hbs

@@ -66,28 +66,30 @@
                     </table>
                 </div>
                 {{#unless defStore}}
+                  {{#if specialOpeningTimes}}
                     <div class="s-details__open">
-                        <p class="s-details__open_title">
-                            Special opening times
-                        </p>
-                        <table class="s-details__table  s-details__table_special">
-                            {{#each specialOpeningTimes}}
-                                <tr class="s-details__table_row" >
-                                    <td class="s-details__table_cell">
-                                        {{name}}
-                                    </td>
-                                    <td class="s-details__table_cell s-details__table_time" rowspan="2">
-                                        {{time}}
-                                    </td>
-                                </tr>
-                                <tr class="s-details__table_row s-details__table_day">
-                                    <td class="s-details__table_cell">
-                                        {{day}}
-                                    </td>
-                                </tr>
-                            {{/each}}
-                        </table>
+                      <p class="s-details__open_title">
+                        Special opening times
+                      </p>
+                      <table class="s-details__table  s-details__table_special">
+                        {{#each specialOpeningTimes}}
+                          <tr class="s-details__table_row" >
+                            <td class="s-details__table_cell">
+                              {{name}}
+                            </td>
+                            <td class="s-details__table_cell s-details__table_time" rowspan="2">
+                              {{time}}
+                            </td>
+                          </tr>
+                          <tr class="s-details__table_row s-details__table_day">
+                            <td class="s-details__table_cell">
+                              {{day}}
+                            </td>
+                          </tr>
+                        {{/each}}
+                      </table>
                     </div>
+                  {{/if}}
                 {{/unless}}
             </div>
         </div>

package/src/components/store-preview.hbs

@@ -26,17 +26,6 @@
                 {{ address }}
             </div>
         {{/if}}
-            <div class="store__act">
-                    <span class="icon store__marker">
-                        <i class="far fa-map-marker-alt"></i>
-                    </span>
-                    <span class="icon store__tick">
-                        <i class="far fa-check"></i>
-                    </span>
-                    <a href="#" class="store-state">
-                        Make this your default store
-                    </a>
-            </div>
     </div>
     <div class="store__details">
         <div class="store__dist">

package/src/components/user-information-field.hbs

@@ -1,4 +1,4 @@
 <li class="user-information__item">
   <label class="user-information__label">{{label}}</label>
-  <p class="user-information__value">{{value}}</p>
+  <p class="user-information__value">{{textField}}</p>
 </li>

package/src/data/data_big-wins-stores.json

@@ -40,28 +40,6 @@
             "day": "Friday",
             "time": "07:00 - 18:00"
           }
-        ],
-        "specialOpeningTimes": [
-          {
-            "name": "Good Friday",
-            "day": "Fri 10 Apr",
-            "time": "6.30 - 21.00"
-          },
-          {
-            "name": "Saturday",
-            "day": "Sat 11 Apr",
-            "time": "6.30 - 21.00"
-          },
-          {
-            "name": "Easter Sunday",
-            "day": "Sun 12 Apr",
-            "time": "CLOSED"
-          },
-          {
-            "name": "Easter Monday",
-            "day": "Mon 13 Apr",
-            "time": "06.30 - 21.00"
-          }
         ]
       },
       {

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

@@ -23,6 +23,30 @@
         "buttons": [
           {
             "title": "Cancel",
+            "data-action": "cancel-reset",
+            "isPrimary": true,
+            "close-modal": true
+          },
+          {
+            "mod": "btn-continue",
+            "data-action": "reset-details",
+            "title": "Yes, continue",
+            "isSecondary": true,
+            "link": "./page_my-account_change-password.html"
+          }
+        ]
+      }
+    },
+    "reset-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",
+            "data-action": "cancel-reset",
             "isPrimary": true,
             "close-modal": true
           },
@@ -52,7 +76,7 @@
       ],
       "currentData": {
         "Title": "Mr",
-        "Fist name": "James",
+        "First name": "James",
         "Surname": "Smith",
         "Email address": "james_smith@gmail.com",
         "How would you describe yourself or your main trade": "DIY"
@@ -66,9 +90,9 @@
           "rowMod": "row-title",
           "required": true,
           "options": [
-            { "value": "Mr", "label": "Mr" },
-            { "value": "Mrs", "label": "Mrs" },
-            { "value": "Dr", "label": "Dr" }
+            { "value": "mr", "label": "Mr" },
+            { "value": "mrs", "label": "Mrs" },
+            { "value": "dr", "label": "Dr" }
           ],
           "selectedIndex": "0"
         },
@@ -101,8 +125,8 @@
           "placeholder": "DIY",
           "required": true,
           "options": [
-            { "value": "DIY", "label": "DIY" },
-            { "value": "TradePro", "label": "Trade Pro" }
+            { "value": "diy", "label": "DIY" },
+            { "value": "tradepro", "label": "Trade Pro" }
           ],
           "selectedIndex": "0"
         }
@@ -125,7 +149,7 @@
       ],
       "currentData": {
         "Title": "Mr",
-        "Fist name": "James",
+        "First name": "James",
         "Surname": "Smith",
         "Email address": "james_smith@gmail.com",
         "Trade type": "Installer"
@@ -139,9 +163,9 @@
           "rowMod": "row-title",
           "required": true,
           "options": [
-            { "value": "Mr", "label": "Mr" },
-            { "value": "Mrs", "label": "Mrs" },
-            { "value": "Dr", "label": "Dr" }
+            { "value": "mr", "label": "Mr" },
+            { "value": "mrs", "label": "Mrs" },
+            { "value": "dr", "label": "Dr" }
           ],
           "selectedIndex": "0"
         },
@@ -171,7 +195,8 @@
           "id": "tradeType",
           "label": "Trade type",
           "value": "Installer",
-          "disabled": true
+          "dataTag": "trade-type-value",
+          "modificator": "disabled"
         }
       ]
     }

package/src/data/my-account/page_default-store.json

@@ -0,0 +1,158 @@
+{
+  "default-store": {
+    "title": "Default Store",
+    "subtitle": "Add default store",
+    "subtitleChange": "Change default store",
+    "searchField": {
+      "id": "postcode",
+      "label": "Search by postcode/town name",
+      "placeholder": "Postcode / city",
+      "iconSearch": "fas fa-search",
+      "iconLocation": "fas fa-crosshairs",
+      "iconError": "fas fa-exclamation-triangle",
+      "iconCross": "far fa-times fa-lg",
+      "error": "Check that you’ve entered a valid postcode or place name"
+    },
+    "unavailable": {
+      "title": "You have no default store",
+      "icon": "fas fa-warehouse"
+    },
+    "breadcrumbs": [
+      {
+        "url": "/",
+        "text": "Home"
+      },
+      {
+        "url": "/page_my-account.html",
+        "text": "My Account"
+      },
+      {
+        "url": "/page_default-store-page.html",
+        "text": "Default Store"
+      }
+    ],
+    "menu": [
+      {
+        "icon": "fas fa-user",
+        "title": "My Account",
+        "link": "./page_my-account.html"
+      },
+      {
+        "icon": "fas fa-box-open",
+        "link": "./page_my-account_order-history.html",
+        "title": "My Orders",
+        "description": "View and manage your orders."
+      },
+      {
+        "icon": "fas fa-address-card",
+        "link": "./page_my-account_personal-details.html",
+        "title": "Personal Details",
+        "description": "View and update your Personal Details."
+      },
+      {
+        "icon": "fas fa-book",
+        "link": "./page_my-account_address-book.html",
+        "title": "Address Book",
+        "description": "Manage your delivery addresses."
+      },
+      {
+        "icon": "fas fa-sliders-h",
+        "link": "./page_marketing-preferences.html",
+        "title": "Marketing Preferences",
+        "description": "Manage  how you would like to receive the latest offers and deals."
+      },
+      {
+        "icon": "fas fa-list",
+        "link": "./page_my-shopping-list.html",
+        "title": "Project Lists",
+        "description": "Save products to your project lists."
+      },
+      {
+        "icon": "fas fa-warehouse",
+        "link": "./page_default-store-page.html",
+        "title": "Default Store",
+        "description": "Set your default store."
+      }
+    ],
+    "currentStore": {
+      "id": 1,
+      "name": "Blackheath",
+      "phone": "01869 356200",
+      "address": "271 Winchester Road, Southampton, Hampshire, SO16 6TP",
+      "facilities": [
+        {
+          "title": "Burger van",
+          "icon": "fas fa-burger-soda"
+        },
+        {
+          "title": "Kitchen & bathroom displays",
+          "icon": "fas fa-drafting-compass"
+        },
+        {
+          "title": "Installation service",
+          "icon": "fas fa-user-hard-hat"
+        },
+        {
+          "title": "Design appointments",
+          "icon": "fas fa-user-friends"
+        },
+        {
+          "title": "Paint mixing",
+          "icon": "fas fa-paint-roller"
+        }
+      ],
+      "openingTimes": [
+        {
+          "day": "Monday",
+          "time": "07:00 AM - 08:00 PM"
+        },
+        {
+          "day": "Tuesday",
+          "time": "07:00 AM - 08:00 PM"
+        },
+        {
+          "day": "Wednesday",
+          "time": "07:00 AM - 08:00 PM"
+        },
+        {
+          "day": "Thursday",
+          "time": "07:00 AM - 08:00 PM"
+        },
+        {
+          "day": "Friday",
+          "time": "07:00 AM - 08:00 PM"
+        },
+        {
+          "day": "Saturday",
+          "time": "07:00 AM - 08:00 PM"
+        },
+        {
+          "day": "Sunday",
+          "time": "10:00 AM - 04:00 PM"
+        }
+      ],
+      "specialOpeningTimes": [
+        {
+          "name": "Good Friday",
+          "day": "Fri 10 Apr",
+          "time": "10:00 AM - 4:00 PM"
+        },
+        {
+          "name": "Saturday",
+          "day": "Sat 11 Apr",
+          "time": "Closed"
+        },
+        {
+          "name": "Easter Sunday",
+          "day": "Sun 12 Apr",
+          "time": "Closed"
+        },
+        {
+          "name": "Easter Monday",
+          "day": "Mon 13 Apr",
+          "time": "10:00 AM - 4:00 PM"
+        }
+      ]
+    }
+  }
+}

package/src/elements/input.hbs

@@ -1,7 +1,7 @@
 {{#if textarea}}
   <textarea class="tbx {{#if textarea}}tbx_textarea{{/if}} {{#if error}}tbx_error{{/if}}" rows="{{textareaRows}}" cols="{{textareaCols}}" value="{{value}}" maxlength="{{maxlength}}" id="{{id}}" name="{{#if name}}{{name}}{{else}}{{id}}{{/if}}" {{#if disabled}}disabled{{/if}}></textarea>
 {{else if type}}
-  <input type="{{type}}" class="tbx {{#if error}}tbx_error{{/if}}" value="{{value}}" id="{{id}}" name="{{#if name}}{{name}}{{else}}{{id}}{{/if}}" {{#if (or locked disabled)}}disabled{{/if}} {{#if need-pattern}}pattern=""{{/if}} {{#if readonly}}readonly{{/if}}>
+  <input type="{{type}}" class="tbx {{#if error}}tbx_error{{/if}} {{input-mod}}" value="{{value}}" id="{{id}}" name="{{#if name}}{{name}}{{else}}{{id}}{{/if}}" {{#if (or locked disabled)}}disabled{{/if}} {{#if need-pattern}}pattern=""{{/if}} {{#if readonly}}readonly{{/if}} {{#if data-tag}}data-tag="{{data-tag}}"{{/if}}>
 {{else}}
-  <input type="text" class="tbx {{#if error}}tbx_error{{/if}}" value="{{value}}" id="{{id}}" name="{{#if name}}{{name}}{{else}}{{id}}{{/if}}" placeholder="{{placeholder}}" {{#if (or locked disabled)}}disabled{{/if}} {{#if need-pattern}}pattern=""{{/if}} {{#if readonly}}readonly{{/if}}>
+  <input type="text" class="tbx {{#if error}}tbx_error{{/if}} {{input-mod}}" value="{{value}}" id="{{id}}" name="{{#if name}}{{name}}{{else}}{{id}}{{/if}}" placeholder="{{placeholder}}" {{#if (or locked disabled)}}disabled{{/if}} {{#if need-pattern}}pattern=""{{/if}} {{#if readonly}}readonly{{/if}} {{#if data-tag}}data-tag="{{data-tag}}"{{/if}}>
 {{/if}}

package/src/js/components/general/switchVat.js

@@ -36,7 +36,11 @@ Wick.VatToggle = {
   },
 
   getSwitcherState: function() {
-    return !!$(Wick.VatToggle.el.switchVatInput).attr('checked');
+    if ($(Wick.VatToggle.el.switchVatInput).length) {
+      return !!$(Wick.VatToggle.el.switchVatInput).attr('checked');
+    } else {
+      return null;
+    }
   },
 
   createToggleEvent: function(isToggled) {
@@ -65,6 +69,28 @@ Wick.VatToggle = {
     $(includingVatEl).toggleClass(hiddenClassName);
     $(excludingVat).toggleClass(hiddenClassName);
   },
+  reapplyDisplayClass: function () {
+    const includingVatEl = Wick.VatToggle.el.includingVat;
+    const excludingVatEl = Wick.VatToggle.el.excludingVat;
+    const hiddenClassName = Wick.VatToggle.HIDDEN_CLASS_NAME;
+
+    let vatState = null;
+
+    // check switcher state for web or cookie for app
+    if (Wick.VatToggle.getSwitcherState() !== null) {
+      vatState = Wick.VatToggle.getSwitcherState();
+    } else {
+      vatState = Wick.VatToggle.isOn();
+    }
+
+    if (vatState) {
+      $(includingVatEl).addClass(hiddenClassName);
+      $(excludingVatEl).removeClass(hiddenClassName);
+    } else {
+      $(includingVatEl).removeClass(hiddenClassName);
+      $(excludingVatEl).addClass(hiddenClassName);
+    }
+  },
 
   updateGlobalClass: function () {
     const includingVatGlobal = Wick.VatToggle.el.includingVatGlobalClass;

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

@@ -26,15 +26,54 @@ Wick.LeaveEvent = {
     const currentState = Wick.LeaveEvent.getState(form);
     const isDifferent = !_.isEqual(currentState, Wick.LeaveEvent.initialFormState);
 
-    if (isDifferent) {
+    const csrfTokenCheck = Wick.LeaveEvent.isCsrfTokenEqual(currentState, Wick.LeaveEvent.initialFormState);
+
+    if (isDifferent && (csrfTokenCheck || csrfTokenCheck === undefined)) {
       return Wick.LeaveEvent.LEAVE_MESSAGE;
     }
   },
+  isCsrfTokenEqual(currentState, initialFormState) {
+    const csrfTokenCurrentState = currentState.find(item => item.name === 'CSRFToken')?.value;
+    const csrfTokenNewState = initialFormState.find(item => item.name === 'CSRFToken')?.value;
+
+    return csrfTokenCurrentState === csrfTokenNewState;
+  },
   showCustomModal() {
     $(Wick.LeaveEvent.el.leavePopup).modal('show')
   },
   getState(form) {
-    return $(form).serializeArray();
+    let arrForm = $(form).serializeArray();
+    arrForm = Wick.LeaveEvent.processSerializedArr(arrForm, form);
+    return arrForm;
+  },
+  processSerializedArr(arrForm, form) {
+    arrForm = arrForm.map((item) => {
+      let element = $(form).find(`[name="${item.name}"]`);
+
+      if (element.attr("data-tag")) {
+        let dataTagValue = element.attr("data-tag");
+        let similarElements = $(form).find(`[data-tag="${dataTagValue}"]`);
+        let hiddenElement = similarElements.filter(`[type="hidden"]`);
+
+        if (hiddenElement.length) {
+          let previousElement = similarElements.not(`[type="hidden"]`);
+          let previousValue = previousElement.val();
+          item.value = hiddenElement.val();
+          item.text = previousValue;
+        }
+      } else if (element.prop("tagName").toLowerCase() === "select") {
+        item.value = element.find("option:selected").val();
+        item.text = element.find("option:selected").text();
+      }
+
+      if (item.name === "email" && item.value) {
+        item.value = item.value.toLowerCase();
+      }
+
+      return item;
+    });
+
+    return arrForm;
   },
   checkLeavePopup() {
     if (Wick.LeaveEvent.proceedBrowserLeave) {