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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.94.0-develop.1",
+  "version": "2.94.0-develop.10",
   "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/flatpickr-calendar.hbs

@@ -0,0 +1,26 @@
+<div class="flatpickr-datepicker" choose-date="" show-years="15">
+  <label class="flatpickr-datepicker__label">
+    Monthly view
+    {{> info-icon
+      modification="icon-info"
+      title=textTooltip
+      data-placement="top"
+      data-container=".flatpickr-datepicker__label"
+    }}
+  </label>
+  <div class="flatpickr-datepicker__field">
+    <input
+      type="text"
+      class="flatpickr-input"
+      id="calendarInputFlatpickr"
+      placeholder="Select year and month"
+      readonly
+    />
+    <span class="icon-wrap icon-wrap--cross" id="crossIcon">
+      <i class="far fa-times cross-icon"></i>
+    </span>
+    <span class="icon-wrap" id="calendarIcon">
+      <i class="fas fa-calendar-alt icon-calendar"></i>
+    </span>
+  </div>
+</div>

package/src/components/my-account/active-orders/header.hbs

@@ -1,4 +1,8 @@
 <div class="active-orders__header">
-  <h3 class="active-orders__title">{{title}}</h3>
-  <a class="btn btn_full btn-primary btn--all-orders d-none d-sm-block" rel="stylesheet" href="#">{{linkText}}</a>
+  {{#if title}}
+    <h3 class="active-orders__title">{{title}}</h3>
+  {{/if}}
+  {{#if linkText}}
+    <a class="btn btn_full btn-primary btn--all-orders d-none d-sm-block" rel="stylesheet" href="#">{{linkText}}</a>
+  {{/if}}
 </div>

package/src/components/my-account/active-orders/list-orders.hbs

@@ -1,9 +1,21 @@
 <div class="active-orders">
-  {{> my-account/active-orders/header}}
+  {{#if title}}
+    {{> my-account/active-orders/header}}
+  {{/if}}
 
   {{#each orders}}
     {{> my-account/active-orders/order switch-vat=../switch-vat}}
   {{/each}}
 
-  <a class="btn btn_full btn-primary btn--all-orders d-sm-none" rel="stylesheet" href="#">{{linkText}}</a>
+  {{#if linkText}}
+    <a class="btn btn_full btn-primary btn--all-orders d-sm-none" rel="stylesheet" href="#">{{linkText}}</a>
+  {{/if}}
 </div>
+{{#if isLoadMore}}
+  <div class="load-more-wrap">
+    <input id="numberOfPagesOrders" value="3" type="hidden">
+    <button class="btn btn-primary btn-load-more">
+      Load more
+    </button>
+  </div>
+{{/if}}

package/src/components/my-account/active-orders/order-header.hbs

@@ -1,6 +1,6 @@
 <header class="order-header">
   <h3 class="order-header__title">Order {{orderId}}</h3>
-  <div class="order-header__status">
+  <div class="order-status {{orderStatus.statusClass}}">
     <i class="{{orderStatus.statusIcon}} icon"></i>
     <span>{{orderStatus.statusTitle}}</span>
   </div>

package/src/components/my-account/active-orders/order.hbs

@@ -3,13 +3,17 @@
 
   {{> my-account/active-orders/order-details switch-vat=switch-vat}}
 
-  {{> my-account/active-orders/consignment-info}}
+  {{#if totalConsignments}}
+    {{> my-account/active-orders/consignment-info}}
+  {{/if}}
 
-  <section class="shipment-details">
-    {{#each shipmentDetails}}
-      {{> my-account/active-orders/shipment-detail}}
-    {{/each}}
-  </section>
+  {{#if shipmentDetails}}
+    <section class="shipment-details">
+      {{#each shipmentDetails}}
+        {{> my-account/active-orders/shipment-detail}}
+      {{/each}}
+    </section>
+  {{/if}}
 
   <div class="view-more">
     <a class="link" href="/">

package/src/components/my-account/clipboard-code-card.hbs

@@ -1,4 +1,4 @@
-<div class="clipboard-code {{mod}}">
+<div class="clipboard-code {{this.mod}}">
   {{#if customIcon}}
     {{{customIcon}}}
   {{else}}

package/src/components/my-account/empty-orders.hbs

@@ -0,0 +1,9 @@
+<div class="empty-orders">
+  <h2 class="empty-orders__title">{{title}}</h2>
+  <span class="empty-orders__image">
+    {{{image}}}
+  </span>
+  {{#if btnText}}
+    <a href="#" class="btn btn-primary empty-orders__btn">{{btnText}}</a>
+  {{/if}}
+</div>

package/src/components/my-account/mobile-nav.hbs

@@ -1,17 +1,19 @@
-<div class="account-nav {{mod}}" {{#if (eq @index ../active-index)}}data-active-index="{{active-index}}"{{/if}}>
+<div class="account-nav {{this.mod}}" {{#if (eq @index ../active-index)}}data-active-index="{{active-index}}"{{/if}}>
   <div class="account-nav__toggle accordion accordion_collapsed">
     <div class="accordion__header" role="link" aria-expanded="false">
-      <span class="account-nav__icon">
-        {{#each menu}}
-          {{#if (eq @index ../active-index)}}
-            {{#if customIcon}}
-              {{{icon}}}
-            {{else}}
-              <i class="{{icon}} icon"></i>
-            {{/if}}
+      {{#each menu}}
+        {{#if (eq @index ../active-index)}}
+          {{#if icon}}
+            <span class="account-nav__icon">
+              {{#if customIcon}}
+                {{{icon}}}
+              {{else}}
+                <i class="{{icon}} icon"></i>
+              {{/if}}
+            </span>
           {{/if}}
-        {{/each}}
-      </span>
+        {{/if}}
+      {{/each}}
       <span class="accordion__header-text">{{page-name}}</span>
       <span class="icon accordion__header-icon">
         <i class="fas fa-angle-up"></i>
@@ -23,14 +25,16 @@
           <ul class="account-nav__list">
             {{#each menu}}
               <li class="account-nav__item">
-                <a class="account-nav__link" data-index="{{@index}}" href="{{link}}">
-                  <span class="account-nav__icon">
-                    {{#if customIcon}}
-                      {{{icon}}}
-                    {{else}}
-                      <i class="{{icon}} icon"></i>
-                    {{/if}}
-                  </span>
+                <a class="account-nav__link" data-index="{{@index}}" href="{{link}}" id="{{id}}">
+                  {{#if icon}}
+                    <span class="account-nav__icon">
+                      {{#if customIcon}}
+                        {{{icon}}}
+                      {{else}}
+                        <i class="{{icon}} icon"></i>
+                      {{/if}}
+                    </span>
+                  {{/if}}
                   {{title}}
                   {{#if total}}
                     <span class="rewards">{{total}}</span>

package/src/components/my-account/orders-nav.hbs

@@ -0,0 +1,15 @@
+<nav class="nav-orders">
+  {{> my-account/mobile-nav
+    mod="d-sm-none"
+    menu=nav
+    active-index=0
+    page-name=nav.[0].title
+  }}
+  <ul class="nav-orders__wrap d-none d-sm-flex">
+    {{#each nav}}
+      <li class="nav-orders__item {{#if isActive}}active{{/if}}">
+        <a class="link" href="#" id="{{id}}">{{title}}</a>
+      </li>
+    {{/each}}
+  </ul>
+</nav>

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/my-account/sort-by.hbs

@@ -0,0 +1,3 @@
+<div class="sort-orders">
+  {{> form-row dropdown="true" id="sort_orders" label="Sort by" placeholder="Name (descending)"}}
+</div>

package/src/components/my-account/user-account-actions.hbs

@@ -1,4 +1,4 @@
-<ul class="account-actions__list {{mod}}">
+<ul class="account-actions__list {{this.mod}}">
   <li class="account-actions__item">
     <a class="account-actions__link" href="#">
       <span class="icon">

package/src/components/signup-form.hbs

@@ -15,8 +15,7 @@
     </p>
     <div class="form-row">
       <div class="form-row__field">
-        {{> checkbox id="email-chk" label="Email (if opting out of emails you will not receive notification of your
-                    TradePro barcode via email)"}}
+        {{> checkbox id="email-chk" label="Email"}}
       </div>
     </div>
     <div class="form-row">

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"
-          }
         ]
       },
       {