wickes-css2 2.102.0-lg-788-improve-mini-basket.6 → 2.103.0-gift-cards.1

package/src/js/page/utils/gift-cards-utils.js

@@ -0,0 +1,43 @@
+const SUMMARY_SELECTORS = {
+  subTotal: { item: '.checkout-widget__item-bold', value: '.checkout-widget__item-value', title: 'Items subtotal:' },
+  vat: { item: '.checkout-widget__item-vat', value: '.checkout-widget__item-value', title: 'VAT:' },
+  clickAndCollectCost: { item: '.checkout-widget__item-cc', value: '.checkout-widget__item-value', title: 'Click & Collect:' },
+  deliveryCost: { item: '.checkout-widget__item-delivery', value: '.checkout-widget__item-value', title: 'Delivery:' },
+  charityPrice: { item: '.checkout-widget__item-charity', value: '.checkout-widget__item-value', title: 'Charity donation:' },
+  discountTotal: { item: '.checkout-widget__details-discount', value: '.checkout-widget__detail-value' },
+  total: { item: '.checkout-widget__total', value: '.checkout-widget__total-value' },
+  giftCardApplied: { item: '.checkout-widget__gift-card', value: '.checkout-widget__total-value', title: 'Gift Card:' },
+};
+
+export function formatGc16(raw) {
+  const digits = String(raw || '').replace(/\D/g, '').slice(0, 16);
+  return digits.replace(/(\d{4})(?=\d)/g, '$1-');
+}
+
+export function buildHintContext(count, limit) {
+  const max = count >= limit;
+  return {
+    canAdd: !max,
+    max,
+    hintClass: `giftcard-summary__hint${max ? ' giftcard-summary__hint--max' : ''}`,
+  };
+}
+
+export function buildChipData($root, numberSelector) {
+  const digits = String($root.find(numberSelector).val() || '').replace(/\D/g, '');
+  const last5 = digits.slice(-5);
+  const id= `giftcard_${Date.now()}`;
+  const $giftcard = $root.closest('.giftcard');
+  const currency = $giftcard.data('currency') || '£';
+  const amount= ($giftcard.data('amount') != null ? $giftcard.data('amount') : '100.00');
+  return { id, last5, currency, amount };
+}
+
+export function buildSummaryEqualMap(data) {
+  return Object.entries(SUMMARY_SELECTORS).map(([key, d]) => ({
+    item: d.item,
+    itemValue: d.value,
+    dataValue: data[key],
+    ...(d.title ? { title: d.title } : {}),
+  }));
+}

package/src/js/page/utils/show-hide-input.js

@@ -0,0 +1,28 @@
+export function initializeInputToggle($container) {
+  const $input  = $container.find('input');
+  const $toggle = $container.find('.toggle-show');
+
+  if (!$input.length || !$toggle.length) return;
+
+  const handleToggleClick = (e) => {
+    e.preventDefault();
+
+    const isPassword = String($input.attr('type')) === 'password';
+    $input.attr('type', isPassword ? 'text' : 'password');
+    const $icon = $toggle.find('svg, i').first();
+
+    if ($icon.length) {
+      $icon.removeClass('fa-eye fa-eye-slash').addClass(isPassword ? 'fa-eye' : 'fa-eye-slash');
+    }
+  };
+
+  const updateToggleVisibility = () => {
+    $toggle.toggle(($input.val() || '').length > 0);
+  };
+
+  $toggle.off('click.passwordToggle mousedown.passwordToggle')
+    .on('mousedown.passwordToggle', handleToggleClick);
+
+  $input.off('input.passwordToggle').on('input.passwordToggle', updateToggleVisibility);
+  updateToggleVisibility();
+}

package/src/layouts/base.hbs

@@ -39,6 +39,12 @@
       {{> footer }}
     {{/block}}
 
+    {{#if miniBasketEmpty}}
+      {{> mini-basket/mini-basket-empty }}
+    {{else}}
+      {{> mini-basket/mini-basket }}
+    {{/if}}
+
     {{#block "foot"}}
       {{> scripts }}
     {{/block}}

package/src/page_my-account_change-password.html

@@ -62,5 +62,6 @@
     }}
     <script src="./js/pstrength.min.js"></script>
     <script src="./js/change-password.min.js"></script>
+    <script src="./js/toggle-password-visibility.min.js"></script>
 {{/content}}
 {{/extend}}

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

@@ -61,7 +61,8 @@
 <script defer src="./js/page/checkout-payment-details.js"></script>
 <script defer src="./js/page/klarna-modal-scroll-disable.js"></script>
 <script defer src="./js/page/billie-business-type.js"></script>
+<script defer src="./js/gift-cards.min.js"></script>
 {{> checkout-terms-and-conditions-modal }}
-{{> payment-loader hidden=true spinnerTypes=(array "billie-logo" "clearpay-logo" "paypal-logo")}}
+{{> loader hidden=true modifier="page-loader"}}
 {{/content}}
 {{/extend}}

package/src/page_plp_v2.html

@@ -1,4 +1,4 @@
-{{#extend "base" hybrisClass="hybris-class" pageClass="products-list-page retail-media" title="Products list" globalSearchV2="true" pagePlp=true}}
+{{#extend "base" hybrisClass="hybris-class" pageClass="products-list-page" title="Products list" globalSearchV2="true" pagePlp=true}}
 {{#content "head" mode="append" pagePlp=true}}
 <link type="text/css" rel="stylesheet" href="./css/components/global-search.css">
 {{/content}}
@@ -32,23 +32,13 @@
                         </div>
 
                         <div class="products-list products-list-v2">
-                            {{#each search-result_v2.products}}
-                                {{>card_product_v2}}
+                            {{#each plp_load-more.results}}
+                            {{>card_product_v2}}
                             {{/each}}
                             {{#if search-result_v2.product-banner}}
-                                {{#each search-result_v2.product-banner}}
-                                    {{>card_product_banner_v2}}
-                                {{/each}}
-                            {{/if}}
-                            {{#if search-result_v2.sponsor-banner}}
-                                {{#each search-result_v2.sponsor-banner}}
-                                    {{>card_sponsor_banner}}
-                                {{/each}}
-                            {{/if}}
-                            {{#if search-result_v2.sponsor-product}}
-                                {{#each search-result_v2.sponsor-product}}
-                                    {{>card_sponsor_product}}
-                                {{/each}}
+                            {{#each search-result_v2.product-banner}}
+                            {{>card_product_banner_v2}}
+                            {{/each}}
                             {{/if}}
                         </div>
                         <div class="load-more-wrap">

package/src/page_search-results.html

@@ -42,19 +42,9 @@
         </div>
 
         <div class="products-list products-list-v2">
-          {{#each search-result_v2.products}}
-            {{>card_product_v2}}
+          {{#each plp_energy-efficiency.products}}
+            {{> card_product_v2}}
           {{/each}}
-          {{#if search-result_v2.sponsor-banner}}
-            {{#each search-result_v2.sponsor-banner}}
-              {{>card_sponsor_banner}}
-            {{/each}}
-          {{/if}}
-          {{#if search-result_v2.sponsor-product}}
-            {{#each search-result_v2.sponsor-product}}
-              {{>card_sponsor_product}}
-            {{/each}}
-          {{/if}}
         </div>
 
         <div class="sort-products-list">

package/src/page_tradePro_rewards_home_installer_message.html

@@ -0,0 +1,56 @@
+{{#extend "my-account-v2"
+  pageClass="page_tradePro-rewards my-account"
+  title="TradePro Rewards (Installer message)"
+  logo-tp=true
+  tradepro-nav=true
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  mainClass="pt-0"
+  dataBreadcrumbs=my_account.tradeProRewards.breadcrumbsHomePage
+}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/tradePro-rewards.css">
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+          menu=my_account.tradepro.menu
+          active-index=4
+          page-name=my_account.tradepro.menu.[4].title
+      }}
+    </div>
+  </div>
+</div>
+
+<div class="my-account__banner-wrapper my-account__banner-wrapper--background">
+  <div class="container">
+    <div class="row">
+      <div class="col-12">
+        {{> notifications my_account.tradepro.banner withCloseBtn="true"}}
+      </div>
+    </div>
+  </div>
+</div>
+
+{{#extend "cards-slider"
+  title="TradePro Rewards"
+}}
+  {{#content "cards"}}
+    {{#each page_tradePro_cards.reward_cards}}
+      {{> reward_card
+        modificator="swiper-slide"
+        imgSrc=imgSrc
+        title=title
+        description=description
+        btnText=btnText
+        btnUrl=btnUrl
+      }}
+    {{/each}}
+  {{/content}}
+{{/extend}}
+
+{{/content}}
+{{/extend}}

package/src/page_tradePro_rewards_instore_installer_message.html

@@ -0,0 +1,77 @@
+{{#extend
+  "my-account-v2"
+  pageClass="page_tradePro-rewards my-account"
+  title="TradePro Rewards (Installer message)"
+  logo-tp=true
+  tradepro-nav=true
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  mainClass="pt-0"
+  dataBreadcrumbs=my_account.tradeProRewards.breadcrumbsDetailsPage
+}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/tradePro-rewards.css">
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+          menu=my_account.tradepro.menu
+          active-index=4
+          page-name=my_account.tradepro.menu.[4].title
+      }}
+    </div>
+  </div>
+</div>
+
+<div class="my-account__banner-wrapper">
+  <div class="container">
+    <div class="row">
+      <div class="col-12">
+        {{> notifications my_account.tradepro.banner withCloseBtn="true"}}
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="container top-indent">
+  <div class="row">
+    <div class="col-12">
+      {{#with page_tradePro_vouchers.instore}}
+        <h1 class="text-start">{{title}}</h1>
+        {{> voucher
+          mod="mb-1"
+        }}
+      {{/with}}
+      {{#extend "accordion" header=page_tradePro_vouchers.terms.title collapsed="accordion_collapsed voucher--terms" hidden="hidden-state"}}
+        {{#content "content"}}{{page_tradePro_vouchers.terms.text}}{{/content}}
+      {{/extend}}
+    </div>
+  </div>
+</div>
+
+{{#extend "cards-slider"
+  title="Other TradePro Rewards"
+  secondary=true
+}}
+  {{#content "cards"}}
+    {{#each page_tradePro_cards.reward_cards}}
+      {{> reward_card
+        modificator="swiper-slide"
+        imgSrc=imgSrc
+        title=title
+        description=description
+        btnText=btnText
+        btnUrl=btnUrl
+      }}
+    {{/each}}
+  {{/content}}
+{{/extend}}
+
+{{/content}}
+{{#content "foot" mode="append"}}
+  <script defer src="./js/tradePro-rewards.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/partials/scripts.hbs

@@ -14,7 +14,6 @@
   <script src="./js/basket.min.js"></script>
 {{/ifCond}}
 {{!-- BUNDLES END --}}
-<script src="./js/mini-basket-slider.min.js"></script>
 <script src="./js/emulation.min.js"></script>
 <script defer src="https://kit.fontawesome.com/b73abc6840.js" crossorigin="anonymous"></script>
 {{#if pagePdp}}

package/src/scss/components/_custom-slider.scss

@@ -80,19 +80,6 @@
     }
   }
 
-  &__notifications {
-    &:has(.notification) {
-      margin-top: 16px;
-    }
-
-    .notification:only-child {
-      @include font-size(14);
-      @include line-height(24);
-      margin-bottom: 0;
-      border-bottom: none;
-    }
-  }
-
   &__message {
     margin-top: 8px;
     display: flex;
@@ -172,32 +159,6 @@
     &__details {
       flex: 1;
 
-      &-header {
-        display: flex;
-        align-items: flex-start;
-        justify-content: space-between;
-        grid-gap: 8px;
-
-        .btn--remove {
-          min-width: 24px;
-          padding: 4px;
-          background: 0 0;
-          border: none;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-
-          .remove-icon {
-            color: $blue;
-            font-size: 1rem;
-          }
-        }
-      }
-
-      &-body {
-        margin-top: 4px;
-      }
-
       .item,
       .price {
         margin-bottom: 0;
@@ -229,8 +190,8 @@
       }
 
       .price {
-        @include font-size(16);
-        @include line-height(20);
+        @include font-size(18);
+        @include line-height(24);
         margin-top: 8px;
         font-weight: 700;
         color: $blue-dark;
@@ -245,54 +206,6 @@
       &.product-card__content {
         margin-top: 0;
         padding: 0;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-      }
-    }
-
-    &__quantity-control {
-      display: flex;
-      align-items: center;
-      margin-top: 8px;
-
-      .quantity {
-        margin-bottom: 0;
-        min-width: 40px;
-        text-align: center;
-        padding: 0 5px;
-
-        .product-card__quantity-value {
-          margin: 0;
-          font-weight: 400;
-        }
-      }
-
-      .btn--quantity {
-        background: none;
-        padding: 0;
-        width: 24px;
-        min-height: 24px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-
-        .quantity-cta-icon {
-          font-size: 1.35rem;
-          color: $blue;
-        }
-
-        &[disabled] {
-          border: none;
-          opacity: 0.6;
-        }
-      }
-    }
-
-    .btn--remove,
-    .btn--quantity {
-      &:hover {
-        opacity: 0.7;
       }
     }
 
@@ -305,17 +218,6 @@
         }
       }
     }
-
-    &__offers {
-      margin-top: 4px;
-
-      .products__promo {
-        @include font-size(12);
-        @include line-height(16);
-        color: $red;
-        font-weight: 400;
-      }
-    }
   }
 
   &__footer {
@@ -422,7 +324,7 @@
           font-weight: 500;
         }
 
-        &-value {
+        .value {
           @include font-size(18);
           @include line-height(24);
           font-weight: 700;
@@ -552,30 +454,6 @@
   }
 }
 
-@include media-breakpoint-up(sm) {
-  .custom-slider {
-    .products__details {
-      .price {
-        @include font-size(18);
-        @include line-height(24);
-
-        .inc {
-          @include font-size(12);
-          @include line-height(16);
-          font-weight: 500;
-        }
-      }
-
-      &-footer {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-top: auto;
-      }
-    }
-  }
-}
-
 @include media-breakpoint-up(sm) {
   .custom-slider {
     &__wrap {