wickes-css2 2.105.0-develop.10 → 2.105.0-develop.11

package/package.json

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

package/src/components/checkout-payment-details-v2.hbs

@@ -47,7 +47,7 @@
                       value="google">
                   <ins></ins>
                   <div class="google-logo">
-                    <img src="img/google-pay-mark.png" alt="google pay">
+                    <img src="img/google-pay-mark.svg" alt="google pay">
                   </div>
                 </label>
               </div>

package/src/components/order-summary.hbs

@@ -55,6 +55,7 @@
             data-key="credit-promotion-badge"
             data-locale="en-GB"
             data-purchase-amount="12000"
+            {{#if klarna-method-ids}}data-custom-payment-method-ids="{{klarna-method-ids}}"{{/if}}
         ></klarna-placement>
       </div>
     {{/if}}

package/src/components/price-block-v2.hbs

@@ -130,6 +130,7 @@
                     data-key="credit-promotion-badge"
                     data-locale="en-GB"
                     data-purchase-amount="12000"
+                    {{#if klarna-method-ids}}data-custom-payment-method-ids="{{klarna-method-ids}}"{{/if}}
                 ></klarna-placement>
               </div>
             {{/if}}

package/src/img/google-pay-mark.svg

@@ -0,0 +1,11 @@
+<svg width="48" height="30" viewBox="0 0 48 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="47" height="29" rx="14.5" fill="white"/>
+<rect x="0.5" y="0.5" width="47" height="29" rx="14.5" stroke="#1E1E1E"/>
+<path d="M22.466 15.6868V19.7404H21.1709V9.73047H24.6043C25.4745 9.73047 26.2165 10.0186 26.8236 10.5948C27.4441 11.171 27.7544 11.8745 27.7544 12.7053C27.7544 13.5562 27.4441 14.2597 26.8236 14.8292C26.2232 15.3987 25.4812 15.6801 24.6043 15.6801H22.466V15.6868ZM22.466 10.9633V14.454H24.6313C25.144 14.454 25.5757 14.2798 25.9129 13.9381C26.257 13.5964 26.4323 13.181 26.4323 12.712C26.4323 12.2497 26.257 11.841 25.9129 11.4993C25.5757 11.1442 25.1507 10.97 24.6313 10.97H22.466V10.9633Z" fill="#3C4043"/>
+<path d="M31.1403 12.665C32.0982 12.665 32.8536 12.9196 33.4068 13.4288C33.9599 13.9381 34.2365 14.6349 34.2365 15.5193V19.7403H33.002V18.7889H32.9481C32.4152 19.5728 31.7002 19.9614 30.8098 19.9614C30.0475 19.9614 29.4135 19.7403 28.9008 19.2914C28.3882 18.8425 28.1318 18.2864 28.1318 17.6164C28.1318 16.9062 28.4017 16.3434 28.9413 15.928C29.4809 15.5059 30.2027 15.2982 31.0998 15.2982C31.8688 15.2982 32.5029 15.4389 32.9953 15.7203V15.4255C32.9953 14.9766 32.8199 14.6014 32.4624 14.2865C32.1049 13.9716 31.6867 13.8175 31.2078 13.8175C30.486 13.8175 29.9126 14.119 29.4944 14.7287L28.3544 14.0185C28.9818 13.1139 29.9126 12.665 31.1403 12.665ZM29.4674 17.6365C29.4674 17.9715 29.6091 18.2529 29.8991 18.474C30.1825 18.6951 30.5197 18.809 30.9042 18.809C31.4506 18.809 31.9363 18.608 32.3612 18.206C32.7862 17.804 33.002 17.335 33.002 16.7923C32.5973 16.4774 32.0374 16.3166 31.3157 16.3166C30.7895 16.3166 30.3511 16.4439 30.0003 16.6918C29.6428 16.9531 29.4674 17.268 29.4674 17.6365Z" fill="#3C4043"/>
+<path d="M41.2786 12.8857L36.9615 22.7483H35.6259L37.2313 19.2977L34.3848 12.8857H35.7946L37.8452 17.8036H37.8722L39.8688 12.8857H41.2786Z" fill="#3C4043"/>
+<path d="M17.314 14.8688C17.314 14.4494 17.2762 14.048 17.2061 13.6621H11.7773V15.8731L14.9039 15.8738C14.777 16.6095 14.3689 17.2366 13.7436 17.6547V19.0892H15.6047C16.6914 18.0902 17.314 16.6135 17.314 14.8688Z" fill="#4285F4"/>
+<path d="M13.7442 17.655C13.2261 18.0021 12.559 18.2051 11.7786 18.2051C10.271 18.2051 8.99202 17.1961 8.53401 15.8359H6.61426V17.3153C7.56536 19.19 9.52019 20.4764 11.7786 20.4764C13.3395 20.4764 14.6508 19.9665 15.6052 19.0888L13.7442 17.655Z" fill="#34A853"/>
+<path d="M8.35348 14.7387C8.35348 14.3567 8.41756 13.9876 8.53426 13.6405V12.1611H6.61451C6.22125 12.9363 6 13.8114 6 14.7387C6 15.6659 6.22192 16.541 6.61451 17.3162L8.53426 15.8368C8.41756 15.4897 8.35348 15.1206 8.35348 14.7387Z" fill="#FABB05"/>
+<path d="M11.7786 11.2713C12.6305 11.2713 13.3934 11.5628 13.9958 12.1323L15.645 10.4955C14.6433 9.56884 13.3374 9 11.7786 9C9.52087 9 7.56536 10.2864 6.61426 12.1611L8.53401 13.6405C8.99202 12.2804 10.271 11.2713 11.7786 11.2713Z" fill="#E94235"/>
+</svg>

package/src/js/components/pdp-billie-modal-scroll-reset.js

@@ -0,0 +1,53 @@
+var Wick = window.Wick || {};
+window.Wick = Wick;
+
+Wick.BillieModalScrollReset = (function () {
+  const MODAL_ID = '#billieLearnMoreModal';
+  const OPEN_LINK = '.billie__link[data-target="#billieLearnMoreModal"]';
+  const SCROLL_BODY = '.modal-body.modal-box__body';
+  const CONTENT = '.modal-content.modal-box__content';
+
+  function resetScroll($modal) {
+    if (!$modal || !$modal.length) {
+      return;
+    }
+
+    let bodyEl = $modal.find(SCROLL_BODY)[0];
+    if (bodyEl) {
+      bodyEl.scrollTop = 0;
+    }
+
+    $modal.find(CONTENT).attr('data-scroll-state', 'top');
+  }
+
+  function bindEvents($modal) {
+    $(document).on('click', OPEN_LINK, function () {
+      resetScroll($modal);
+    });
+
+    $(document).on('shown.bs.modal', MODAL_ID, function () {
+      resetScroll($modal);
+      requestAnimationFrame(function () { resetScroll($modal); });
+      setTimeout(function () { resetScroll($modal); }, 30);
+    });
+
+    $(document).on('hidden.bs.modal', MODAL_ID, function () {
+      resetScroll($modal);
+    });
+  }
+
+  function init() {
+    $(function () {
+      let $modal = $(MODAL_ID);
+      if (!$modal.length) return;
+
+      bindEvents($modal);
+    });
+  }
+
+  return {
+    init: init,
+  };
+})();
+
+Wick.BillieModalScrollReset.init();

package/src/js/emulation/billie-modal.js

@@ -31,6 +31,14 @@
         return ORDER[index];
     }
 
+    function resetBillieModalScroll($modal) {
+        const $body = $modal.find(".modal-body");
+        const $content = $modal.find(".modal-content");
+
+        $body.scrollTop(0);
+        $content.attr("data-scroll-state", "top");
+    }
+
     function applyBillieTerms(terms) {
         const copy = COPY[terms] || COPY['30'];
         const $modal = $('#billieLearnMoreModal');
@@ -40,7 +48,16 @@
         $modal.attr('data-billie-terms', terms);
     }
 
-    $(document).on('click', '.billie__link', function (e) {
+    $(document).on("shown.bs.modal", "#billieLearnMoreModal", function () {
+        const $modal = $(this);
+        requestAnimationFrame(() => resetBillieModalScroll($modal));
+    });
+
+    $(document).on("hidden.bs.modal", "#billieLearnMoreModal", function () {
+        resetBillieModalScroll($(this));
+    });
+
+    $(document).on("click", ".billie__link", function (e) {
         e.preventDefault();
 
         const terms = nextTerms();

package/src/js/page/basket-v2.js

@@ -40,10 +40,11 @@ import {
     getMessageInfo,
     isMessageExist,
     updatePromotion,
-    showNotification,
-} from './basket/basket-utils';
-import { updateCartBase } from './basket/basket-update-cart';
-import { updateCartActionBase } from './basket/basket-update-cart-action';
+    showNotification
+} from "./basket/basket-utils";
+import {updateCartBase} from "./basket/basket-update-cart";
+import {updateCartActionBase} from "./basket/basket-update-cart-action";
+import {initBillieModal} from "./components/billie-modal";
 
 var Wick = window.Wick || {};
 Wick.BasketPage = {
@@ -1342,6 +1343,7 @@ $(document).ready(function () {
 
         setDefaultCharityValue();
         initCharityInteractions();
+        initBillieModal();
         if (!$(Wick.BasketPage.el.loader).length) {
             appendLoader(Wick.BasketPage.loaderPayload);
         }

package/src/js/page/components/billie-modal.js

@@ -0,0 +1,31 @@
+const billieEl = {
+  modalId: '#billieLearnMoreModal',
+  openLink: '.billie__link[data-target="#billieLearnMoreModal"]',
+  scrollBody: '.modal-body.modal-box__body',
+  content: '.modal-content.modal-box__content',
+};
+
+function resetBillieModalScroll($modal) {
+  const bodyEl = $modal.find(billieEl.scrollBody)[0];
+  if (bodyEl) bodyEl.scrollTop = 0;
+  $modal.find(billieEl.content).attr('data-scroll-state', 'top');
+}
+
+export function initBillieModal() {
+  const $modal = $(billieEl.modalId);
+  if (!$modal.length) return;
+
+  $(document).on('click', billieEl.openLink, function () {
+    resetBillieModalScroll($modal);
+  });
+
+  $(document).on('shown.bs.modal', billieEl.modalId, function () {
+    resetBillieModalScroll($modal);
+    requestAnimationFrame(() => resetBillieModalScroll($modal));
+    setTimeout(() => resetBillieModalScroll($modal), 30);
+  });
+
+  $(document).on('hidden.bs.modal', billieEl.modalId, function () {
+    resetBillieModalScroll($modal);
+  });
+}

package/src/page_product-details-tile-steps-klarna-widget-with-method-ids.html

@@ -0,0 +1,120 @@
+{{#extend "base" pageClass="page-product-details" title="Product details page new with klarna"
+          isDiscount=true
+          isSQM=true
+          isDescription=true
+          isCashback=false
+          isSize=true
+          hourly-delivery=true
+          badge-text='15% off'
+          badge-color='yellow'
+          badge-text-color='gray'
+          step3=true
+          currentlyInStock=true
+          pagePdp=true
+}}
+    {{#content "body"}}
+        <main class="pdp__main">
+            <div class="container">
+                <div class="pdp">
+                    <div class="pdp__title">
+                        <h1 class="pdp__heading">Bosch PSB 1800 LI-2 18V Li-Ion Cordless Combi Drill Example with long
+                            title in two raws
+                        </h1>
+                        <div class="pdp__reviews_small">
+                            <span class="product-code product-code-v2">Product code: <strong id="product-code-val">236334</strong></span>
+                            <div class="product-card__reviews review-star">
+                                <div class="product-rating product-rating-v2">
+                                    <div class="rating-bg">
+                                        <i class="fa fa-star" aria-hidden="true"></i>
+                                        <i class="fa fa-star" aria-hidden="true"></i>
+                                        <i class="fa fa-star" aria-hidden="true"></i>
+                                        <i class="fa fa-star" aria-hidden="true"></i>
+                                        <i class="fa fa-star" aria-hidden="true"></i>
+                                        <div class="rating-overlay"
+                                             data-rating="{{#if review-rating}}{{review-rating}}{{else}}0{{/if}}">
+                                            <i class="fa fa-star" aria-hidden="true"></i>
+                                            <i class="fa fa-star" aria-hidden="true"></i>
+                                            <i class="fa fa-star" aria-hidden="true"></i>
+                                            <i class="fa fa-star" aria-hidden="true"></i>
+                                            <i class="fa fa-star" aria-hidden="true"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                                <span class="review-star-average review-star-average-v2">(4.6)</span>
+                            </div>
+                            <span class="pdp__reviews-link-wrap"><a href="#" data-link="#pdp-reviews" id="open-review">82 reviews</a></span>
+                        </div>
+                    </div>
+
+                    <div class="pdp__gallery">
+                        {{> gallery-pdp-v2 }}
+                    </div>
+                    <div class="pdp__aside">
+                        {{> price-block-v2
+                        isProductSaved=false
+                        isUserLogedOut=true
+                        install=true
+                        sample=true
+                        big-wins=true
+                        stock-accordion="stock-accordion"
+                        cc=false
+                        nearestAmount=12
+                        isUserNonRegistered=true
+                        delivery=true
+                        nearest-purchase=true
+                        klarna-placement=true
+                        klarna-method-ids="BathroomsFinance"
+                        }}
+                        {{> fulfilment-accordions }}
+                    </div>
+                    <div class="pdp__description">
+                        {{> product-main-info-v2 isAdvice=true}}
+                    </div>
+                    {{> fulfilment-accordions }}
+                </div>
+            </div>
+            <div class="container container-info">
+                <div class="pdp">
+                    <div class="pdp__info">
+                        {{> pdp-info-v2 tile=true }}
+                    </div>
+                </div>
+            </div>
+                {{> recently-viewed }}
+        </main>
+    {{/content}}
+    {{#content "foot" mode="append"}}
+        <script type="text/html" id="mini-basket-popup">
+                {{> popover-mini-basket mod="popover-mini-basket_just-added" products=mini-basket.just-added just-added=true}}
+        </script>
+        <script defer src="./js/page/pdp.js"></script>
+        {{> click-and-collect-modal}}
+        {{> thank-you-modal}}
+    {{/content}}
+{{/extend}}
+<script type="module" defer src="./js/page/installation/ti.js"></script>
+<script type="module" defer src="./js/page/klarna-modal-scroll-disable.js"></script>
+<script>
+    if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
+        $(document).ready(function () {
+            $('.modal').on('scroll', function () {
+                $(':focus').blur();
+            });
+        });
+    }
+
+    $(document).ready(function () {
+
+        $('#info-details').toggleClass('accordion_collapsed');
+        $('#details-content').css('display', 'block');
+
+        $('#open-review').on('click', function () {
+            $('#info-review').toggleClass('accordion_collapsed');
+            $('#review-content').css('display', 'block');
+        });
+
+        $('.ti__next ti__next3 .btn').on('click', function () {
+           alert('Click');
+        });
+    })
+</script>

package/src/page_shopping-cart-v2-klarna-with-method-ids.html

@@ -0,0 +1,50 @@
+{{#extend "basket-new" page_shopping-cart pageClass="page_basket basket" title="Basket" billieIcon=false}}
+  {{#content "head" mode="append"}}
+    <link type="text/css" rel="stylesheet" href="./css/pages/page_shopping-cart-v2.css">
+    <link type="text/css" rel="stylesheet" href="./css/pages/checkout-new.css">
+  {{/content}}
+  {{#content "heading"}}
+    <div class="globalMessages">
+      <div class="container">
+        {{> notifications notification-page.warning-tiles-changed withCloseBtn="true"}}
+        {{> notifications notification-page.warning-tiles-changed withCloseBtn="true"}}
+      </div>
+    </div>
+    <div class="checkout-header__promo">
+      {{#each shopping-cart-v2.potentialOrderPromotions}}
+        {{> potential-promotion}}
+      {{/each}}
+    </div>
+    {{> checkout-header shopping-cart-v2.header}}
+  {{/content}}
+{{#content "aside"}}
+  {{> order-summary
+  shopping-cart-v2.checkout
+  id=1
+  title="Order Summary"
+  basket=true
+  klarna-placement=true
+  klarna-method-ids="BathroomsFinance"
+  }}
+  {{> checkout-action  mod="mounted"}}
+  {{> checkout-action  mod="mounted" view="mobile"}}
+  {{> summary-payment paymentsCheckoutV2=true billieIcon=false}}
+{{/content}}
+{{#content "main"}}
+  <input type="hidden" id="SUPPLIER_DELIVERED_7_DAYS" value="<b> Wickes Supplier </b> - Delivery within 7 days">
+  <input type="hidden" id="STANDARD" value="<b> STANDARD </b> - Delivery within 1 day">
+  <input type="hidden" id="canDisplayPayPalOnBasketPage" value="true">
+  {{#each shopping-cart-v2.sections }}
+    <section class="basket__section" data-type="{{type}}">
+      {{> checkout-section-title title=type items-count=items-count}}
+      {{#each items}}
+        {{> order-item}}
+      {{/each}}
+    </section>
+  {{/each}}
+{{> basket-charity-donations-new   shopping-cart-v2.charityDonationNew }}
+{{/content}}
+{{#content "foot" mode="append"}}
+  <script defer src="./js/basket.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/scss/components/checkout-payment-details-v2.scss

@@ -204,7 +204,7 @@
           list-style-type: none;
 
           &_item {
-            font-size: .875rem;
+            font-size: 0.875rem;
             font-weight: 400;
             line-height: 1.375rem;
 
@@ -224,7 +224,7 @@
           margin: 12px 0;
           color: $warm-grey;
           font-weight: 400;
-          font-size: .75rem;
+          font-size: 0.75rem;
           line-height: 1rem;
         }
       }
@@ -259,7 +259,7 @@
           border-bottom: 1px solid $gray;
 
           &_item {
-            font-size: .875rem;
+            font-size: 0.875rem;
             font-weight: 400;
             line-height: 1.375rem;
             height: 30px;
@@ -287,7 +287,7 @@
           margin-bottom: 10px;
           color: $warm-grey;
           font-weight: 400;
-          font-size: .75rem;
+          font-size: 0.75rem;
           line-height: 1rem;
         }
 
@@ -331,6 +331,12 @@
       }
     }
 
+    .google {
+      &-logo {
+        margin: -3px 0;
+      }
+    }
+
     .clearpay,
     .google {
       &-logo {

package/src/scss/pages/_checkout-confirmation-new.scss

@@ -23,6 +23,7 @@
     }
 
     &__title {
+      margin-bottom: 16px;
       font-size: 1.625rem;
       line-height: 1.875rem;
       font-weight: 400;
@@ -70,7 +71,7 @@
 
     &__info {
       text-align: center;
-      font-size: .875rem;
+      font-size: 0.875rem;
       max-width: 500px;
       margin: 0 auto;
       padding: 44px 0 50px;
@@ -103,7 +104,7 @@
       }
 
       &__subscribe-message {
-        font-size: .875rem;
+        font-size: 0.875rem;
       }
     }
   }
@@ -163,7 +164,7 @@
           @include make-col(12);
 
           .form-row__label {
-            font-size: .875rem;
+            font-size: 0.875rem;
             line-height: 1rem;
           }
 
@@ -208,7 +209,7 @@
           }
 
           &-vat {
-            font-size: .75rem;
+            font-size: 0.75rem;
             margin-top: -15px;
           }
         }
@@ -284,19 +285,49 @@
 
   [data-is-logged-in='true'] {
     body {
-      background: #ff0000 !important;
+      background: #f00 !important;
     }
   }
 
   [data-is-logged-in='false'] {
     body {
-      background: #0000ff !important;
+      background: #00f !important;
+    }
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .page_checkout-confirmation-new {
+    .header {
+      &__title {
+        margin-bottom: 8px;
+      }
+    }
+
+    .confirmation-result {
+      &__action {
+        &-full-width {
+          display: flex;
+          flex-direction: row;
+
+          .btn {
+            width: 231px;
+            margin: 0 10px;
+          }
+        }
+      }
     }
   }
 }
 
 @include media-breakpoint-up(md) {
   .page_checkout-confirmation-new {
+    .header {
+      &__title {
+        margin-bottom: 0;
+      }
+    }
+
     .content .checkout-widget {
       &.checkout-payment {
         .checkout-widget {
@@ -368,6 +399,18 @@
         }
       }
     }
+
+    .confirmation-result {
+      &__action {
+        &-full-width {
+          padding: 48px 0;
+
+          .btn {
+            width: 220px;
+          }
+        }
+      }
+    }
   }
 }
 
@@ -466,21 +509,6 @@
       }
     }
 
-    .confirmation-result {
-      &__action {
-        &-full-width {
-          display: flex;
-          flex-direction: row;
-          padding: 50px 0;
-
-          .btn {
-            width: 218px;
-            margin: 0 10px;
-          }
-        }
-      }
-    }
-
     .content-center {
       @include make-col(12);
     }

package/src/sitemap.html

@@ -798,24 +798,30 @@
                         </li>
                         <li>
                             <span class="page-id">2</span>
+                            <a href="page_product-details-tile-steps-klarna-widget-with-method-ids.html" target="_blank">
+                                Klarna PDP Tile Installation Steps with attribute payment method ids on klarna widget
+                            </a>
+                        </li>
+                        <li>
+                            <span class="page-id">3</span>
                             <a href="page_wismo-details-klarna.html" target="_blank">
                                 Klarna Order details page
                             </a>
                         </li>
                         <li>
-                            <span class="page-id">3</span>
+                            <span class="page-id">4</span>
                             <a href="page_my-account_order-details-klarna.html" target="_blank">
                                 Klarna Order details
                             </a>
                         </li>
                         <li>
-                            <span class="page-id">4</span>
+                            <span class="page-id">5</span>
                             <a href="page_tradePro-checkout-summary-klarna.html" target="_blank">
                                 Klarna TradePro Checkout Summary
                             </a>
                         </li>
                         <li>
-                            <span class="page-id">5</span>
+                            <span class="page-id">6</span>
                             <a href="page_tradePro_payment-details-other-methods.html" target="_blank">
                                 Klarna TradePro Payment Details
                             </a>
@@ -850,6 +856,12 @@
                                 Klarna Basket
                             </a>
                         </li>
+                        <li>
+                            <span class="page-id">12</span>
+                            <a href="page_shopping-cart-v2-klarna-with-method-ids.html" target="_blank">
+                                Klarna Basket with payment method ids on klarna widget
+                            </a>
+                        </li>
                     </ul>
                     <h3>
                         Pages with Apple payment