wickes-css2 2.109.0-develop.3 → 2.109.0-gift-cards.1

package/src/js/page/components/order-summary.js

@@ -5,7 +5,6 @@ const osEl = {
     checkoutWidgetDetailsDiscount: '.checkout-widget__details-discount',
     checkoutWidgetDetails: '.checkout-widget__details',
     delivery: '.checkout-widget__item-delivery',
-    deliveryCostMessage: '.checkout-widget__item-delivery-cost-message',
     cc: '.checkout-widget__item-cc',
     itemFree: '.checkout-widget__item-free',
     itemDeficit: '.checkout-widget__item-deficit',
@@ -27,22 +26,6 @@ export function updateOrderSummary(data, equalMap, isVoucher) {
             }
         }
 
-        if (obj.item === osEl.delivery) {
-            $(osEl.delivery).each(function () {
-                if (
-                    !$(this).siblings(osEl.deliveryCostMessage).length &&
-                    !$(this).closest('[data-hide-delivery-cost-message]').length
-                ) {
-                    $(this).after(`
-                      <li class="checkout-widget__item checkout-widget__item-delivery-cost-message">
-                        <span class="checkout-widget__item-value" id="order-delivery-cost-message">
-                          Final delivery cost confirmed at checkout
-                        </span>
-                      </li>`);
-                }
-            });
-        }
-
         $(obj.item).find(obj.itemValue).text(obj.dataValue);
         if (isVoucher ? obj.dataValue : obj.value && obj.dataValue) {
             $(obj.item).find(obj.itemValue).show();
@@ -81,37 +64,20 @@ export function updateOrderSummary(data, equalMap, isVoucher) {
 }
 
 function createCheckoutWidgetItem(obj) {
-    const isDelivery = obj.item === osEl.delivery;
-    const hideMessage = $(osEl.checkoutWidgetDetails).closest(
-        '[data-hide-delivery-cost-message]'
-    ).length;
-    const costMessageExists = $(osEl.deliveryCostMessage).length > 0;
     return `
       <li class="checkout-widget__item ${obj.item.substr(1)}">
         <span>${obj.title}</span>
           <span class="checkout-widget__item-value">${obj.dataValue}</span>
       </li>
-      ${
-          isDelivery && !hideMessage && !costMessageExists
-              ? `
-      <li class="checkout-widget__item checkout-widget__item-delivery-cost-message">
-        <span class="checkout-widget__item-value" id="order-delivery-cost-message">
-          Final delivery cost confirmed at checkout
-        </span>
-      </li>`
-              : ''
-      }
     `;
 }
 
 function hideUnusedDeliveryTypeCost(data, isVoucher) {
     $(osEl.delivery).show();
-    $(osEl.deliveryCostMessage).show();
     $(osEl.cc).show();
     if (isVoucher) {
         if ('deliveryOrder' in data && data.deliveryOrder === false) {
             $(osEl.delivery).hide();
-            $(osEl.deliveryCostMessage).hide();
         }
 
         if ('clickAndCollectOrder' in data && data.clickAndCollectOrder === false) {
@@ -120,7 +86,6 @@ function hideUnusedDeliveryTypeCost(data, isVoucher) {
     } else {
         if (data.clickAndCollectOnly) {
             $(osEl.delivery).hide();
-            $(osEl.deliveryCostMessage).hide();
         } else if (data.deliveryItemsQuantity > 0 && data.pickupItemsQuantity === 0) {
             $(osEl.cc).hide();
         }

package/src/page_checkout_confirmation-gift-card.html

@@ -0,0 +1,339 @@
+{{#extend "checkout-new" pageClass="page_checkout page_checkout-confirmation-new" title="Checkout - Confirmation"
+logout=true}}
+{{#content "steps"}}
+<div class="header-wrap">
+    <h1 class="header__title">Order Confirmation</h1>
+    <p class="header__order-block">Order number: <span class="header__order-number">143402004</span></p>
+</div>
+{{/content}}
+{{#content "main"}}
+
+<div class="confirmation-result-wrap">
+    <div class="confirmation-result__notif">
+        <span class="notif-check"><i class="fas fa-check"></i></span>
+        <span class="notif-info">Your Order Was Successful!</span>
+    </div>
+
+    <p class="confirmation-result__info">
+        We have emailed your order confirmation to <a href="mailto:petra.mendez@gmail.com">petra.mendez@gmail.com</a> with details of when your order will be delivered. This email will also contain our contact details should you wish to get in touch with us.
+    </p>
+
+    <div class="confirmation-result__action">
+        <a href="https://www.wickes.co.uk/track-my-order" class="btn btn-primary"><i class="fas fa-map-marked-alt"></i> Track My Order</a>
+        <a href="https://www.wickes.co.uk/my-account/orders" class="btn btn-primary">View My Order</a>
+        <a href="./" class="btn btn-secondary">Return Shopping</a>
+    </div>
+</div>
+
+{{#with checkoutOrder.delivery.[0]}}
+{{>checkout-order}}
+{{/with}}
+
+
+{{#with checkoutOrder.clickCollect.[0]}}
+{{>checkout-order}}
+{{/with}}
+
+
+{{#with checkoutOrder.charity.[0]}}
+{{>checkout-order charity="true"}}
+{{/with}}
+
+
+{{> checkout_payment-new giftcard=true giftcards=giftcards}}
+{{> checkout_order-summary-new label="Subtotal:" confirmationSummary="true" giftCardDiscount="true"}}
+
+<form class="checkout-tradepro form-bg">
+    <div class="checkout-tradepro__row">
+        <div class="checkout-tradepro__descr">
+            <div class="checkout-tradepro__info-wrap">
+                <div class="checkout-tradepro__info">
+                    It looks like you're in the Trade?
+                    You could be eligible to join TradePro and get
+                    <strong>10% off future purchases whenever you shop in-store or online.</strong>
+                </div>
+                <a href="#" class="checkout-tradepro__learn-more">Learn more about TradePro</a>
+            </div>
+            <h3>TradePro Signup</h3>
+            <div class="warning-required">Required fields</div>
+            <h3 class="checkout-tradepro__title">Proof of Trade ID</h3>
+            <p class="checkout-tradepro__paragraph warning-required">
+                Please supply two forms of approved ID
+            </p>
+
+            <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}}
+            </div>
+            <div class="chosen-form-container">
+                <div class="chosen-form-wrap">
+                    <div class="chosen-form">
+                        <div>
+                            <img class="mr-2" src="img/placeholders/thumbnail-sm.png"/>
+                            Trade business website
+                        </div>
+                        <span class="icon icon__notification">
+              <span class="fas fa-check-circle"></span>
+            </span>
+                    </div>
+                    <div class="form-row__error">Error message here</div>
+                    <div class="chosen-form">
+                        <div>
+                            <img class="mr-2" src="img/placeholders/thumbnail-sm.png"/>
+                            Ltd company: Registration number
+                        </div>
+
+                        <span class="icon icon__notification">
+              <span class="fas fa-check-circle"></span>
+            </span>
+                    </div>
+                    <div class="form-row__error">Error message here</div>
+                </div>
+            </div>
+            {{> signup-form}}
+        </div>
+    </div>
+</form>
+
+{{/content}}
+
+{{#content "aside"}}
+{{> checkout_information info-icon="true"}}
+{{/content}}
+
+{{#content "foot" mode="append"}}
+<script defer src="./js/page/checkout-confirmation-new.js"></script>
+{{/content}}
+
+{{/extend}}

package/src/page_checkout_next-day-delivery-details.html

@@ -23,7 +23,7 @@
         Please choose a date for delivery from the calendar below.
       </p>
       <p class="date-selection__info-block">
-        Our delivery slots are currently available up to 8 days in advance.<br> We release additional delivery slots daily.
+        Our delivery slots are currently available up to 8 days in advance. We release additional delivery slots daily.
       </p>
       <p class="date-selection__annotation">
         *Individual couriers will provide more information on delivery times, closer to your chosen delivery date.
@@ -32,7 +32,7 @@
 
     <div class="component component-date-selection">
       {{> date-selection
-          titleDelivery="Next or Named day delivery"
+          titleDelivery="Next and Named day delivery"
           subtitleDelivery="Delivery between 7am - 7pm for £7*"
           wisdom=true
       }}

package/src/page_checkout_payment-details-v2-asm.html

@@ -11,7 +11,7 @@
   {{/content}}
 
   {{#content "aside"}}
-    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true email=true hideDeliveryCostMessage=true}}
+    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true email=true}}
   {{/content}}
 
 

package/src/page_checkout_payment-details-v2.html

@@ -11,7 +11,7 @@
   {{/content}}
 
   {{#content "aside"}}
-    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon paymentsCheckoutV2="true" hideDeliveryCostMessage=true}}
+    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon paymentsCheckoutV2="true"}}
   {{/content}}
 
 

package/src/page_checkout_payment-details_with-card-loader.html

@@ -11,7 +11,7 @@
 {{/content}}
 
 {{#content "aside"}}
-{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true hideDeliveryCostMessage=true}}
+{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true}}
 {{/content}}
 
 

package/src/page_checkout_payment-details_with-klarna-loader.html

@@ -11,7 +11,7 @@
   {{/content}}
 
   {{#content "aside"}}
-    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true hideDeliveryCostMessage=true}}
+    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true}}
   {{/content}}
 
 

package/src/page_checkout_payment-details_with-loader-v2.html

@@ -11,7 +11,7 @@
   {{/content}}
 
   {{#content "aside"}}
-    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true hideDeliveryCostMessage=true}}
+    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true}}
   {{/content}}
 
 

package/src/page_checkout_rapid-delivery-details.html

@@ -17,7 +17,7 @@
     <div class="delivery-block">
         <h3 class="delivery-block__heading">Delivery Information</h3>
         {{> banner-news
-            description="<b>Your order qualifies for Rapid delivery.</b></br>Alternative delivery options are available."
+            description="<b>Your order qualifies for Wickes Rapid delivery.</b></br>Alternative delivery options are available."
             classImg="fas fa-shipping-fast"
         }}
         <div class="delivery-block__wrapper">
@@ -27,15 +27,14 @@
                     Please choose a date for delivery from the calendar below.
                 </p>
                 <p class="date-selection__info-block">
-                    Our delivery slots are currently available up to 8 days in advance.<br> We release additional delivery slots daily.
+                    Our delivery slots are currently available up to 8 days in advance. We release additional delivery slots daily.
                 </p>
-                <p>*Individual couriers will provide more information on delivery times, closer to your chosen delivery date.</p>
             </div>
 
             <div class="component component-date-selection">
                 {{> date-selection
-                    titleDelivery="Next or Named day delivery"
-                    subtitleDelivery="Delivery between 7am - 7pm for £12.00"
+                    titleDelivery="Wickes Rapid delivery"
+                    subtitleDelivery="Delivery within 3 hours for £12"
                     imgDelivery="fas fa-shipping-fast"
                     wisdom=true
                 }}
@@ -132,11 +131,10 @@
   <div class="continue-btn">
       <button class="btn btn-action">Continue to Payment Details</button>
   </div>
+
 {{/content}}
 
 {{#content "foot" mode="append"}}
-    {{> loader titleLoader="Loading Rapid delivery..." hidden=true modifier="basket-loader rapid-loader"}}
-
     <script defer src="./js/page/checkout-confirmation-new.js"></script>
     <script defer src="./js/page/select-address.js"></script>
 

package/src/page_klarna_payment-details_with-klarna.html

@@ -13,7 +13,7 @@
   {{/content}}
 
   {{#content "aside"}}
-    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true hideDeliveryCostMessage=true}}
+    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true}}
   {{/content}}
 
 

package/src/page_payment-details-with-billie.html

@@ -16,7 +16,7 @@
 {{/content}}
 
 {{#content "aside"}}
-{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon billieIcon=true paymentsCheckoutV2=true hideDeliveryCostMessage=true}}
+{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon billieIcon=true paymentsCheckoutV2=true}}
 {{/content}}
 
 

package/src/page_payment-details-with-clearpay.html

@@ -16,7 +16,7 @@
 {{/content}}
 
 {{#content "aside"}}
-{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon paymentsCheckoutV2=true checkout=true hideDeliveryCostMessage=true}}
+{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon paymentsCheckoutV2=true checkout=true}}
 {{/content}}
 
 

package/src/page_payment-details-with-gift-card.html

@@ -18,7 +18,7 @@
 {{/content}}
 
 {{#content "aside"}}
-{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon billieIcon=true paymentsCheckoutV2=true checkout=true hideDeliveryCostMessage=true}}
+{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon billieIcon=true paymentsCheckoutV2=true checkout=true}}
 {{/content}}
 
 
@@ -46,7 +46,7 @@
 </div>
 
 <div class="billing-payment-block">
-  <h3 class="billing-payment-block__heading">Billing & Payment</h3>
+  <h3 class="billing-payment-block__heading">Payment</h3>
   <div class="billing-payment-block__wrapper">
     {{> checkout-payment-details-v2 apple-pay=true google-pay=true clear-pay=true klarna-method=true}}
   </div>

package/src/page_payment-details_with_apple-pay.html

@@ -13,7 +13,7 @@
   {{/content}}
 
   {{#content "aside"}}
-    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true basket="true" hideDeliveryCostMessage=true}}
+    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true basket="true"}}
   {{/content}}
 
 

package/src/page_payment-details_with_google-pay.html

@@ -13,7 +13,7 @@
 {{/content}}
 
 {{#content "aside"}}
-{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true hideDeliveryCostMessage=true}}
+{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true}}
 {{/content}}
 
 

package/src/page_plp_v2.html

@@ -11,7 +11,6 @@
                         Fire Doors
                     </h1>
                     {{> srp-injected}}
-                    {{> sponsor-top-banner }}
                 </div>
 
                 {{> color-picker-plp }}

package/src/page_product-details-billie.html

@@ -11,6 +11,8 @@ badge-text-color='gray'
 step3=true
 currentlyInStock=true
 pagePdp=true
+billieIcon=true
+klarnaIcon=true
 }}
 {{#content "body"}}
 

package/src/page_product-details-clearpay.html

@@ -11,6 +11,7 @@ badge-text-color='gray'
 step3=true
 currentlyInStock=true
 pagePdp=true
+klarnaIcon=true
 }}
 {{#content "body"}}