wickes-css2 2.113.0 → 2.117.0-develop.1

package/src/page_checkout_confirmation-new-klarna.html

@@ -64,237 +64,7 @@ logout=true}}
         <div class="signup-tradepro__attach checkout-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">
-                        <span class="icon icon__paperclip">
-                          <i class="far fa-paperclip"></i>
-                        </span>
-              {{> attach-make make-capture=true}}
-              <input class="tradepro-attachment" type="file" accept="image/*" capture>
-            </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">
@@ -333,7 +103,11 @@ logout=true}}
 {{/content}}
 
 {{#content "foot" mode="append"}}
+<script src="./js/pdf-preview.min.js"></script>
 <script defer src="./js/page/checkout-confirmation-new.js"></script>
 {{/content}}
 
 {{/extend}}
+{{> modal-capture }}
+{{> modal-pdf-preview }}
+{{> loader hidden=true modifier="basket-loader tradepro-id-loader"}}

package/src/page_checkout_confirmation-new-paypal.html

@@ -64,237 +64,7 @@ logout=true}}
         <div class="signup-tradepro__attach checkout-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">
-                        <span class="icon icon__paperclip">
-                          <i class="far fa-paperclip"></i>
-                        </span>
-              {{> attach-make make-capture=true}}
-              <input class="tradepro-attachment" type="file" accept="image/*" capture>
-            </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">
@@ -333,7 +103,11 @@ logout=true}}
 {{/content}}
 
 {{#content "foot" mode="append"}}
+<script src="./js/pdf-preview.min.js"></script>
 <script defer src="./js/page/checkout-confirmation-new.js"></script>
 {{/content}}
 
 {{/extend}}
+{{> modal-capture }}
+{{> modal-pdf-preview }}
+{{> loader hidden=true modifier="basket-loader tradepro-id-loader"}}

package/src/page_checkout_delivery-details-v2-calendar-not-loaded.html

@@ -0,0 +1,167 @@
+{{#extend "checkout-new" pageClass="page_checkout-delivery-new page_checkout-confirmation-new page_checkout" title="Checkout - Delivery details calendar not loaded" isAsideSticky="true"}}
+{{#content "steps"}}
+{{> steps-three-steps active-step-index="1"}}
+{{/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">
+  {{/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">
+
+            <div class="date-selection__wrapper">
+                <h3 class="date-selection__header">Select delivery date</h3>
+                <p class="date-selection__info-block">
+                    Please choose a date for delivery from the calendar below
+                </p>
+            </div>
+
+            <div class="component component-date-selection">
+                <div class="delivery-details-product-oos">
+                    <div class="product-oos-inner">
+                    <div class="row">
+                        <div class="content">
+                            <h5>
+                                We will pick the next available slot for you
+                            </h5>
+                            <p>The delivery calendar is not available at the moment but don't worry, we will pick the next available delivery slot for you. We will be in touch via email to confirm your delivery date.</p>
+                            <p>Please press the Payment details button to continue.</p>
+                        </div>
+                    </div>
+                    </div>
+                </div>
+            </div>
+
+
+            {{#with checkoutOrder.deliveryDeliveryDetails.[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__head-info">
+            <p>Simply enter or correct the contact information required below and continue to the next step of the checkout.</p>
+            <div class="head-info__wrapper">
+                <div class="head-info__wrapper-exclamation">
+                    <i class="far fa-exclamation-circle"></i>
+                    <span>Your order will be held for up to 24 hours</span>
+                </div>
+                <div class="head-info__wrapper-text">
+                    <p>You will receive a text when your order is ready to collect (usually within 1 trading hour of receiving your order confirmation email).</p>
+                    <p>Please wait for confirmation before travelling to your chosen store.</p>
+                </div>
+            </div>
+        </div>
+
+        <div class="click-collect-block__wrapper">
+
+          {{#with checkoutOrder.clickCollectDeliveryAddress.[0]}}
+            <div class="checkout-order">
+                {{> checkout-order-block}}
+            </div>
+          {{/with}}
+
+          <div class="add-contact-details">
+              <h3 class="add-contact-details__heading">Add contact details</h3>
+              <p>Please enter your phone number(s) below so we can contact you regarding your order.</p>
+
+              <div class="add-contact-details__form">
+                {{> form-row type="tel" id="mobile" label="Mobile number" required="true"}}
+                {{> form-row type="tel" id="home-phone" label="Home phone"}}
+              </div>
+          </div>
+        </div>
+    </div>
+
+    <div class="simplify-collection">
+        <h3 class="simplify-collection__heading">Simplify your collection</h3>
+        <p class="simplify-collection__info">All the Click & Collect items in your order are currently available at the following stores. Select
+            one of the store to collect all your items from the same location.</p>
+
+        <div class="simplify-collection__wrapper">
+            <div class="your-contact-details__checkbox">
+                {{#extend "radiobutton" id="oldham" name="store" label="Oldham" checked="true"}}
+                {{#content "html"}}
+                <span class="distance">6.2 Miles</span>
+                <div class="store-address">
+                    <div class="store-address__street">Wickes Larch Street,</div>
+                    <div class="store-address__town">Oldham</div>
+                    <div class="store-address__city">Greater Manchester,</div>
+                    <div class="store-address__postcode">OL8 1TA</div>
+                    <div class="store-address__country">United Kingdom</div>
+                </div>
+                {{/content}}
+                {{/extend}}
+            </div>
+            <div class="your-contact-details__checkbox">
+                {{#extend "radiobutton" id="clifton" name="store" label="Clifton"}}
+                {{#content "html"}}
+                <span class="distance">4.9 Miles</span>
+                <div class="store-address">
+                    <div class="store-address__street">Wickes Wynne Avenue,</div>
+                    <div class="store-address__town"> Clifton, Swinton</div>
+                    <div class="store-address__city">Greater Manchester,</div>
+                    <div class="store-address__postcode">M27 8FU</div>
+                    <div class="store-address__country">United Kingdom</div>
+                </div>
+                {{/content}}
+                {{/extend}}
+            </div>
+        </div>
+
+        <p class="simplify-collection__info">I would like to update my order to collect all my items from one store.</p>
+
+        <button class="btn btn-primary simplify-collection__btn">
+            <span class="btn__text">Simplify collection</span>
+        </button>
+    </div>
+
+  <div class="continue-btn">
+      <button class="btn btn-action">Continue to Payment Details</button>
+  </div>
+
+{{/content}}
+
+{{#content "foot" mode="append"}}
+{{> checkout-voucher-remove-modal
+    shopping-cart-v2.checkout.voucher-remove-popup
+    id="voucher-remove-popup"
+}}
+    <script defer src="./js/page/checkout-confirmation-new.js"></script>
+    <script defer src="./js/page/select-address.js"></script>
+
+    {{#extend "modal" classMod="edit-delivery-address" id="modalEditAddress" title="Edit delivery address" fullWidth=true}}
+        {{#content "body"}}
+            <div class="edit-address-modal-block">
+                <div class="delivery-block__wrapper customer-journey-block">
+                    {{> notifications notification-page.error-deliver-area}}
+                    <div class="delivery-block__wrapper customer-journey-block">
+                        {{> user-address-delivery radioName="checkout-address-radio" modal="modalDeliveryEdit" selectedAddress=true simpleAddress=true isDeleted=true}}
+                    </div>
+                </div>
+
+                <button class="btn btn-action btn_full">
+                    <span class="btn__text">Continue to delivery details</span>
+                </button>
+            </div>
+        {{/content}}
+    {{/extend}}
+
+{{/content}}
+{{/extend}}