wickes-css2 2.113.0 → 2.117.0-develop.1

package/src/components/modal-id-type.hbs

@@ -0,0 +1,271 @@
+{{#extend "modal" id="attach" title="Choose Type of ID" fullWidth=true classMod="id-type" backdrop="true"}}
+  {{#content "sections"}}
+
+    {{#extend "modal-body-section" customSectionClass="id-type-signup"}}
+      {{#content "body"}}
+        {{> notifications notification-page.warning withCloseBtn="true"
+          text="Unable to attach file. Only JPG, PNG, GIF, BMP, WEBP, TIFF and HEIF image files are supported."}}
+        <div class="signup-tradepro__modal-info">
+          Select two forms of ID.
+          <div class="tradepro-id-counter_wrap">
+            <span>1</span>
+            of
+            <span>2</span>
+          </div>
+          ID's chosen
+        </div>
+        <div class="signup-tradepro__modal-fields">
+          <div class="tradepro-field">
+    <span class="icon icon__link inactive-el">
+      <i class="far fa-link"></i>
+    </span>
+            <a href="#" class="signup-tradepro__modal-trigger inactive-el">Trade business website</a>
+            <div class="signup-tradepro__modal-action">
+              <div class="form-row" data-row-required="">
+                <label class="form-row__label"></label>
+                <div class="form-row__field">
+                  {{> input need-pattern=true}}
+                  <div class="form-row__error">{{error}}</div>
+                </div>
+              </div>
+              <div class="signup-tradepro__modal-buttons">
+                <div class="row">
+                  <div class="button-done">
+                    <button class="btn btn-primary">
+                      Done
+                    </button>
+                  </div>
+                  <div class="button-cancel">
+                    <button class="btn btn-secondary">
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="tradepro-field">
+    <span class="icon icon__link">
+      <i class="far fa-link"></i>
+    </span>
+            <span class="icon icon__pencil">
+      <i class="far fa-pencil"></i>
+    </span>
+            <a href="#" class="signup-tradepro__modal-trigger">Check a trade profile</a>
+            <div class="signup-tradepro__modal-action">
+              <div class="form-row" data-row-required="">
+                <label class="form-row__label"></label>
+                <div class="form-row__field">
+                  {{> input need-pattern=true}}
+                  <div class="form-row__error">{{error}}</div>
+                </div>
+              </div>
+              <div class="signup-tradepro__modal-buttons">
+                <div class="row">
+                  <div class="button-done">
+                    <button class="btn btn-primary">
+                      Done
+                    </button>
+                  </div>
+                  <div class="button-cancel">
+                    <button class="btn btn-secondary">
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="tradepro-field">
+    <span class="icon icon__link">
+      <i class="far fa-link"></i>
+    </span>
+            <a href="#" class="signup-tradepro__modal-trigger">Facebook trade business page</a>
+            <span class="icon icon__notification">
+      <span class="fas fa-check-circle"></span>
+    </span>
+            <div class="signup-tradepro__modal-action">
+              <div class="form-row" data-row-required="">
+                <label class="form-row__label"></label>
+                <div class="form-row__field">
+                  {{> input need-pattern=true}}
+                  <div class="form-row__error">{{error}}</div>
+                </div>
+              </div>
+              <div class="signup-tradepro__modal-buttons">
+                <div class="row">
+                  <div class="button-done">
+                    <button class="btn btn-primary">
+                      Done
+                    </button>
+                  </div>
+                  <div class="button-cancel">
+                    <button class="btn btn-secondary">
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="tradepro-field">
+    <span class="icon icon__link">
+      <i class="far fa-link"></i>
+    </span>
+            <a href="#" class="signup-tradepro__modal-trigger">Mybuilder profile</a>
+            <div class="signup-tradepro__modal-action">
+              <div class="form-row" data-row-required="">
+                <label class="form-row__label"></label>
+                <div class="form-row__field">
+                  {{> input need-pattern=true}}
+                  <div class="form-row__error">{{error}}</div>
+                </div>
+              </div>
+              <div class="signup-tradepro__modal-buttons">
+                <div class="row">
+                  <div class="button-done">
+                    <button class="btn btn-primary">
+                      Done
+                    </button>
+                  </div>
+                  <div class="button-cancel">
+                    <button class="btn btn-secondary">
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="tradepro-field choose-id" data-toggle="modal" data-target="#capture">
+    <span class="icon icon__paperclip">
+      <i class="far fa-paperclip"></i>
+    </span>
+            <input class="tradepro-attachment" type="file" accept="image/*" capture>
+            {{> attach-make make-capture=true}}
+          </div>
+          <div class="tradepro-field">
+            <img src="img/placeholders/thumbnail-sm.png"/>
+            <span class="icon icon__paperclip d-none">
+      <i class="far fa-paperclip"></i>
+    </span>
+            <span class="icon icon__camera">
+      <i class="far fa-camera"></i>
+    </span>
+            <a href="#" class="signup-tradepro__modal-trigger">Letterhead</a>
+            <input class="tradepro-attachment" type="file" accept="image/*" capture>
+          </div>
+          <div class="tradepro-field">
+    <span class="icon icon__paperclip">
+      <i class="far fa-paperclip"></i>
+    </span>
+            <span class="icon icon__camera">
+      <i class="far fa-camera"></i>
+    </span>
+            <a href="#" class="signup-tradepro__modal-trigger">Compliment slip</a>
+            <input class="tradepro-attachment" type="file" accept="image/*" capture>
+          </div>
+          <div class="tradepro-field tradepro-field--has-pdf" data-pdf-preview-field title="lorem_ipsum.pdf">
+            <img class="tradepro-field__pdf-icon mr-0" src="img/file-pdf-solid-full.svg"/>
+            <span class="icon icon__paperclip d-none">
+      <i class="far fa-paperclip"></i>
+    </span>
+            <span class="icon icon__camera d-none">
+      <i class="far fa-camera"></i>
+    </span>
+            <a href="#" class="signup-tradepro__modal-trigger">Landlord Insurance Policy</a>
+            <input class="tradepro-attachment" type="file" accept="image/*,application/pdf">
+            <div class="tradepro-field__hint">
+              <span class="icon icon__info">
+                <i class="fas fa-info-circle"></i>
+              </span>
+              You can upload an image or a pdf up to 2 MB
+            </div>
+          </div>
+          <div class="tradepro-field" data-pdf-preview-field>
+            <img class="tradepro-field__pdf-icon mr-0 d-none" src="img/file-pdf-solid-full.svg"/>
+    <span class="icon icon__paperclip">
+      <i class="far fa-paperclip"></i>
+    </span>
+            <span class="icon icon__camera">
+      <i class="far fa-camera"></i>
+    </span>
+            <a href="#" class="signup-tradepro__modal-trigger">Blank Tenancy Agreement</a>
+            <input class="tradepro-attachment" type="file" accept="image/*,application/pdf">
+            <div class="tradepro-field__hint">
+              <span class="icon icon__info">
+                <i class="fas fa-info-circle"></i>
+              </span>
+              You can upload an image or a pdf up to 2 MB
+            </div>
+            <div class="tradepro-field__hint">
+              <span class="icon icon__lock">
+                <i class="fas fa-lock"></i>
+              </span>
+              We know how important document privacy is. When you upload your blank tenancy agreement, it is immediately shielded by end-to-end encryption.
+            </div>
+          </div>
+          <div class="tradepro-field">
+    <span class="icon icon__edit">
+      <i class="fas fa-edit"></i>
+    </span>
+            <a href="#" class="signup-tradepro__modal-trigger">Ltd company: Registration number</a>
+            <div class="signup-tradepro__modal-action">
+              <div class="form-row" data-row-required="">
+                <label class="form-row__label"></label>
+                <div class="form-row__field">
+                  {{> input need-pattern=true}}
+                  <div class="form-row__error">{{error}}</div>
+                </div>
+              </div>
+              <div class="signup-tradepro__modal-buttons">
+                <div class="row">
+                  <div class="button-done">
+                    <button class="btn btn-primary">
+                      Done
+                    </button>
+                  </div>
+                  <div class="button-cancel">
+                    <button class="btn btn-secondary">
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="tradepro-field">
+    <span class="icon icon__edit">
+      <i class="fas fa-edit"></i>
+    </span>
+            <a href="#" class="signup-tradepro__modal-trigger">Plc: Registration number</a>
+            <div class="signup-tradepro__modal-action">
+              <div class="form-row" data-row-required="">
+                <label class="form-row__label"></label>
+                <div class="form-row__field">
+                  {{> input need-pattern=true}}
+                  <div class="form-row__error">{{error}}</div>
+                </div>
+              </div>
+              <div class="signup-tradepro__modal-buttons">
+                <div class="row">
+                  <div class="button-done">
+                    <button class="btn btn-primary">
+                      Done
+                    </button>
+                  </div>
+                  <div class="button-cancel">
+                    <button class="btn btn-secondary">
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      {{/content}}
+    {{/extend}}
+
+  {{/content}}
+{{/extend}}

package/src/components/modal-pdf-preview.hbs

@@ -0,0 +1,70 @@
+{{> modal }}
+{{#extend "modal" id="pdf-preview" title="Choose Type of ID" fullWidth=true classMod="pdf-preview" backdrop="true"}}
+  {{#content "sections"}}
+
+    {{!-- The PdfPreview root has to wrap both the controls and the pages container,
+          so the sections sit inside it. The heading and controls keep the default
+          modal column width, the pages container below spans the full popup. --}}
+    <div id="pdf-preview-viewer" data-pdf-preview data-pdf-preview-page-class="pdf-preview__page">
+
+      {{#extend "modal-body-section" customSectionClass="id-pdf-preview"}}
+        {{#content "body"}}
+          <div class="tradepro-field">
+            <div class="pdf-preview__heading">
+              <span class="icon icon__paperclip pdf-preview__icon">
+                <i class="far fa-paperclip"></i>
+              </span>
+              <span class="signup-tradepro__modal-trigger pdf-preview__name"></span>
+            </div>
+            <div class="pdf-preview__controls">
+              <button class="btn btn-secondary btn-sm" type="button" title="First page" data-pdf-preview-first>
+                <span class="fas fa-angle-double-left"></span>
+              </button>
+              <button class="btn btn-secondary btn-sm" type="button" title="Previous page" data-pdf-preview-prev>
+                <span class="fas fa-angle-left"></span>
+              </button>
+              <span class="pdf-preview__pages">
+                <input class="pdf-preview__page-input" type="number" min="1" value="1" aria-label="Page number" data-pdf-preview-page>
+                <span>/ <span data-pdf-preview-total></span></span>
+              </span>
+              <button class="btn btn-secondary btn-sm" type="button" title="Next page" data-pdf-preview-next>
+                <span class="fas fa-angle-right"></span>
+              </button>
+              <button class="btn btn-secondary btn-sm" type="button" title="Last page" data-pdf-preview-last>
+                <span class="fas fa-angle-double-right"></span>
+              </button>
+            </div>
+          </div>
+        {{/content}}
+      {{/extend}}
+
+      {{#extend "modal-body-section" customSectionClass="id-pdf-preview-pages"}}
+        {{#content "body"}}
+          <div class="pdf-preview__viewer" data-pdf-preview-pages></div>
+        {{/content}}
+      {{/extend}}
+
+    </div>
+
+    {{#extend "modal-body-section" customSectionClass="id-pdf-preview-actions"}}
+      {{#content "body"}}
+        <p class="pdf-preview__info">
+          Do you want to use this PDF?
+        </p>
+        <div class="pdf-preview__actions">
+          <a href="#" class="btn btn-primary pdf-preview_yes">
+            <span class="btn__text">
+              Yes <i>(keep)</i>
+            </span>
+          </a>
+          <a href="#" class="btn btn-secondary pdf-preview_no">
+            <span class="btn__text">
+              No <i>(delete)</i>
+            </span>
+          </a>
+        </div>
+      {{/content}}
+    {{/extend}}
+
+  {{/content}}
+{{/extend}}

package/src/components/package-card.hbs

@@ -0,0 +1,30 @@
+{{#each cards}}
+    <div class="package-card">
+        <a href="#">
+            <img class="package-card__image" src="{{image.url}}" alt="{{image.altText}}">
+        </a>
+
+        <div class="package-card__content">
+            <h4 class="package-card__title">{{title}}</h4>
+            <ul class="package-card__usp">
+                {{#each usp}}
+                    <li class="package-card__usp-item">
+                        <span class="package-card__icon icon">
+                            <span class="fas fa-check"></span>
+                        </span>
+                        <span>{{this}}</span>
+                    </li>
+                {{/each}}
+            </ul>
+            <div class="package-card__price">
+                {{> kitchen/price price=priceData small=true switch-vat=../switch-vat}}
+            </div>
+            <div class="package-card__stickers">
+                {{#if strip_stickers}}
+                    {{> kitchen/strip-stickers strip-stickers=strip_stickers}}
+                {{/if}}
+            </div>
+            <a href="#" class="package-card__button btn btn-primary btn_full">View Suite</a>
+        </div>
+    </div>
+{{/each}}

package/src/components/partner-signup-form.hbs

@@ -19,237 +19,7 @@
                 <div class="signup-tradepro__attach signup-tradepro__attach_id">
                   {{> attach-make make-attachment=true}}
                   {{> modal id="attac"}}
-                  {{#extend "modal" id="attach" title="Choose Type of ID" fullWidth=true classMod="id-type"}}
-                    {{#content "sections"}}
-
-                      {{#extend "modal-body-section" customSectionClass="id-type-signup"}}
-                        {{#content "body"}}
-                          {{> notifications notification-page.warning withCloseBtn="true"
-                            text="Unable to attach file. Only JPG, PNG, GIF, BMP, WEBP, TIFF and HEIF image files are supported."}}
-                          <div class="signup-tradepro__modal-info">
-                            Select two forms of ID.
-                            <div class="tradepro-id-counter_wrap">
-                              <span>1</span>
-                              of
-                              <span>2</span>
-                            </div>
-                            ID's chosen
-                          </div>
-                          <div class="signup-tradepro__modal-fields">
-                            <div class="tradepro-field">
-                      <span class="icon icon__link inactive-el">
-                        <i class="far fa-link"></i>
-                      </span>
-                              <a href="#" class="signup-tradepro__modal-trigger inactive-el">Trade business website</a>
-                              <div class="signup-tradepro__modal-action">
-                                <div class="form-row" data-row-required="">
-                                  <label class="form-row__label"></label>
-                                  <div class="form-row__field">
-                                    {{> input need-pattern=true}}
-                                    <div class="form-row__error">{{error}}</div>
-                                  </div>
-                                </div>
-                                <div class="signup-tradepro__modal-buttons">
-                                  <div class="row">
-                                    <div class="button-done">
-                                      <button class="btn btn-primary">
-                                        Done
-                                      </button>
-                                    </div>
-                                    <div class="button-cancel">
-                                      <button class="btn btn-secondary">
-                                        Cancel
-                                      </button>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                            <div class="tradepro-field">
-                      <span class="icon icon__link">
-                        <i class="far fa-link"></i>
-                      </span>
-                              <span class="icon icon__pencil">
-                        <i class="far fa-pencil"></i>
-                      </span>
-                              <a href="#" class="signup-tradepro__modal-trigger">Check a trade profile</a>
-                              <div class="signup-tradepro__modal-action">
-                                <div class="form-row" data-row-required="">
-                                  <label class="form-row__label"></label>
-                                  <div class="form-row__field">
-                                    {{> input need-pattern=true}}
-                                    <div class="form-row__error">{{error}}</div>
-                                  </div>
-                                </div>
-                                <div class="signup-tradepro__modal-buttons">
-                                  <div class="row">
-                                    <div class="button-done">
-                                      <button class="btn btn-primary">
-                                        Done
-                                      </button>
-                                    </div>
-                                    <div class="button-cancel">
-                                      <button class="btn btn-secondary">
-                                        Cancel
-                                      </button>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                            <div class="tradepro-field">
-                      <span class="icon icon__link">
-                        <i class="far fa-link"></i>
-                      </span>
-                              <a href="#" class="signup-tradepro__modal-trigger">Facebook trade business page</a>
-                              <span class="icon icon__notification">
-                        <span class="fas fa-check-circle"></span>
-                      </span>
-                              <div class="signup-tradepro__modal-action">
-                                <div class="form-row" data-row-required="">
-                                  <label class="form-row__label"></label>
-                                  <div class="form-row__field">
-                                    {{> input need-pattern=true}}
-                                    <div class="form-row__error">{{error}}</div>
-                                  </div>
-                                </div>
-                                <div class="signup-tradepro__modal-buttons">
-                                  <div class="row">
-                                    <div class="button-done">
-                                      <button class="btn btn-primary">
-                                        Done
-                                      </button>
-                                    </div>
-                                    <div class="button-cancel">
-                                      <button class="btn btn-secondary">
-                                        Cancel
-                                      </button>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                            <div class="tradepro-field">
-                      <span class="icon icon__link">
-                        <i class="far fa-link"></i>
-                      </span>
-                              <a href="#" class="signup-tradepro__modal-trigger">Mybuilder profile</a>
-                              <div class="signup-tradepro__modal-action">
-                                <div class="form-row" data-row-required="">
-                                  <label class="form-row__label"></label>
-                                  <div class="form-row__field">
-                                    {{> input need-pattern=true}}
-                                    <div class="form-row__error">{{error}}</div>
-                                  </div>
-                                </div>
-                                <div class="signup-tradepro__modal-buttons">
-                                  <div class="row">
-                                    <div class="button-done">
-                                      <button class="btn btn-primary">
-                                        Done
-                                      </button>
-                                    </div>
-                                    <div class="button-cancel">
-                                      <button class="btn btn-secondary">
-                                        Cancel
-                                      </button>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                            <div class="tradepro-field choose-id" data-toggle="modal" data-target="#capture">
-                      <span class="icon icon__paperclip">
-                        <i class="far fa-paperclip"></i>
-                      </span>
-                              <input class="tradepro-attachment" type="file" accept="image/*" capture>
-                              {{> attach-make make-capture=true}}
-                            </div>
-                            <div class="tradepro-field">
-                              <img src="img/placeholders/thumbnail-sm.png"/>
-                              <span class="icon icon__paperclip">
-                        <i class="far fa-paperclip"></i>
-                      </span>
-                              <span class="icon icon__camera">
-                        <i class="far fa-camera"></i>
-                      </span>
-                              <a href="#" class="signup-tradepro__modal-trigger">Letterhead</a>
-                              <input class="tradepro-attachment" type="file" accept="image/*" capture>
-                            </div>
-                            <div class="tradepro-field">
-                      <span class="icon icon__paperclip">
-                        <i class="far fa-paperclip"></i>
-                      </span>
-                              <span class="icon icon__camera">
-                        <i class="far fa-camera"></i>
-                      </span>
-                              <a href="#" class="signup-tradepro__modal-trigger">Compliment slip</a>
-                              <input class="tradepro-attachment" type="file" accept="image/*" capture>
-                            </div>
-                            <div class="tradepro-field">
-                      <span class="icon icon__edit">
-                        <i class="fas fa-edit"></i>
-                      </span>
-                              <a href="#" class="signup-tradepro__modal-trigger">Ltd company: Registration number</a>
-                              <div class="signup-tradepro__modal-action">
-                                <div class="form-row" data-row-required="">
-                                  <label class="form-row__label"></label>
-                                  <div class="form-row__field">
-                                    {{> input need-pattern=true}}
-                                    <div class="form-row__error">{{error}}</div>
-                                  </div>
-                                </div>
-                                <div class="signup-tradepro__modal-buttons">
-                                  <div class="row">
-                                    <div class="button-done">
-                                      <button class="btn btn-primary">
-                                        Done
-                                      </button>
-                                    </div>
-                                    <div class="button-cancel">
-                                      <button class="btn btn-secondary">
-                                        Cancel
-                                      </button>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                            <div class="tradepro-field">
-                      <span class="icon icon__edit">
-                        <i class="fas fa-edit"></i>
-                      </span>
-                              <a href="#" class="signup-tradepro__modal-trigger">Plc: Registration number</a>
-                              <div class="signup-tradepro__modal-action">
-                                <div class="form-row" data-row-required="">
-                                  <label class="form-row__label"></label>
-                                  <div class="form-row__field">
-                                    {{> input need-pattern=true}}
-                                    <div class="form-row__error">{{error}}</div>
-                                  </div>
-                                </div>
-                                <div class="signup-tradepro__modal-buttons">
-                                  <div class="row">
-                                    <div class="button-done">
-                                      <button class="btn btn-primary">
-                                        Done
-                                      </button>
-                                    </div>
-                                    <div class="button-cancel">
-                                      <button class="btn btn-secondary">
-                                        Cancel
-                                      </button>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        {{/content}}
-                      {{/extend}}
-
-                    {{/content}}
-                  {{/extend}}
+                  {{> modal-id-type }}
                 </div>
                 <div class="chosen-form-container">
                   <div class="chosen-form-wrap">

package/src/components/pdp-price-actions.hbs

@@ -84,3 +84,20 @@
   </button>
 </div>
 {{/if}}
+{{#if package}}
+  {{#if postcodeChecker}}
+    {{> postcode-checker modifyClass="postcode-checker--desktop-only"}}
+  {{else}}
+  <div class="pdp-price__bulk-add">
+    {{> button
+      text="Add to basket"
+      full=true
+      action=true
+      type="button"
+      showLoader=true
+      modification="package-bulk-add d-none d-md-block"
+      loaderModifier="postcode-checker__button-loader"
+    }}
+  </div>
+  {{/if}}
+{{/if}}

package/src/components/postcode-checker.hbs

@@ -0,0 +1,24 @@
+<div class="postcode-checker {{modifyClass}}">
+  <p class="postcode-checker__title">Enter your postcode to check delivery stock in your area & add to basket</p>
+  <div class="postcode-checker__field">
+    <input
+      class="tbx postcode-checker__input"
+      type="text"
+      placeholder=""
+      id="postcode-checker" 
+      name="postcode-checker"
+    />
+  </div>
+  <p class="postcode-checker__error">Please enter a valid postcode</p>
+  <div class="postcode-checker__action">
+      {{> button
+          text="Add to basket"
+          full=true
+          action=true
+          type="button"
+          showLoader=true
+          modification="postcode-checker__button"
+          loaderModifier="postcode-checker__button-loader"
+      }}
+  </div>
+</div>