wickes-css2 2.106.0-develop.4 → 2.106.0-gift-cards.2

package/build/js/page/plp-img-v2.js

@@ -0,0 +1,25 @@
+$(document).ready(function () {
+    
+    let imgWrap = $('.products-list-v2 .card__img-wrap');
+    let img = $('.products-list-v2 .card__img-v2');
+    
+    square();
+
+    img.height(function () {
+        if (Math.round($(this).height()) > Math.round($(this).width())) {
+            $(this).height('99.9%'); //fix for ie
+        } else if ((Math.round($(this).height()) < Math.round($(this).width()))){
+            $(this).width('99.9%'); // fix for ie
+        } else {
+            $(this).width('99.9%'); // fix for ie
+            $(this).height('99.9%'); // fix for ie
+        }
+    });
+
+    function square() {
+        let width = imgWrap.width();
+        imgWrap.height(width);
+    }
+
+    $(window).on('resize', square);
+});

package/build/js/page/quick-filter.js

@@ -1,111 +1,108 @@
 $(document).ready(function () {
-    const SELECTORS = {
-        quickFilter: '.quick-filter',
-        swiperContainer: '.swiper-container',
-        pagination: '.swiper-pagination',
-        nextButton: '.quick-filter__next-btn',
-        prevButton: '.quick-filter__prev-btn',
+  const SELECTORS = {
+    quickFilter: '.quick-filter',
+    swiperContainer: '.swiper-container',
+    pagination: '.swiper-pagination',
+    nextButton: '.quick-filter__next-btn',
+    prevButton: '.quick-filter__prev-btn',
+  };
+
+  const CSS_CLASSES = {
+    locked: 'quick-filter--locked',
+    colourSwatch: 'quick-filter--colour',
+    textOnly: 'quick-filter--text',
+    bulletClass: 'swiper-pagination-bullet',
+    bulletActiveClass: 'swiper-pagination-bullet-active'
+  };
+
+  const CONFIG = {
+    speed: 400,
+    defaultSpaceBetween: 16,
+    textOnlySpaceBetween: 8,
+    resizeDebounceTime: 250,
+    breakpoints: {
+      mobile: 767,
+      mobileSpaceBetween: 8,
+    },
+  };
+
+  function shouldSkipSlider($slider) {
+    return $slider.hasClass(CSS_CLASSES.colourSwatch);
+  }
+
+  function getSpaceBetween($slider) {
+    const isTextOnly = $slider.hasClass(CSS_CLASSES.textOnly);
+    return isTextOnly ? CONFIG.textOnlySpaceBetween : CONFIG.defaultSpaceBetween;
+  }
+
+  function getSwiperConfig($pagination, $nextBtn, $prevBtn, spaceBetween) {
+    return {
+      speed: CONFIG.speed,
+      spaceBetween: spaceBetween,
+      slidesPerView: 'auto',
+      watchOverflow: true,
+      pagination: {
+        el: $pagination[0],
+        type: 'bullets',
+        clickable: true,
+        bulletClass: CSS_CLASSES.bulletClass,
+        bulletActiveClass: CSS_CLASSES.bulletActiveClass,
+      },
+      navigation: {
+        nextEl: $nextBtn[0],
+        prevEl: $prevBtn[0],
+      },
+      breakpoints: {
+        [CONFIG.breakpoints.mobile]: {
+          spaceBetween: CONFIG.breakpoints.mobileSpaceBetween,
+        },
+      },
+      on: {
+        lock: handleLock,
+        unlock: handleUnlock,
+      },
     };
+  }
 
-    const CSS_CLASSES = {
-        locked: 'quick-filter--locked',
-        colourSwatch: 'quick-filter--colour',
-        textOnly: 'quick-filter--text',
-        bulletClass: 'swiper-pagination-bullet',
-        bulletActiveClass: 'swiper-pagination-bullet-active',
-    };
+  function handleLock() {
+    this.el.parentElement.classList.add(CSS_CLASSES.locked);
+  }
 
-    const CONFIG = {
-        speed: 400,
-        defaultSpaceBetween: 16,
-        textOnlySpaceBetween: 8,
-        resizeDebounceTime: 250,
-        breakpoints: {
-            mobile: 767,
-            mobileSpaceBetween: 8,
-        },
-    };
+  function handleUnlock() {
+    this.el.parentElement.classList.remove(CSS_CLASSES.locked);
+  }
+
+  function initializeSwiper($slider) {
+    const $container = $slider.find(SELECTORS.swiperContainer);
+    const $pagination = $slider.find(SELECTORS.pagination);
+    const $nextBtn = $slider.find(SELECTORS.nextButton);
+    const $prevBtn = $slider.find(SELECTORS.prevButton);
+
+    const spaceBetween = getSpaceBetween($slider);
+    const config = getSwiperConfig($pagination, $nextBtn, $prevBtn, spaceBetween);
+
+    const swiper = new Swiper($container[0], config);
+
+    bindResizeHandler(swiper);
+  }
+
+  function bindResizeHandler(swiper) {
+    $(window).on('resize', _.debounce(function () {
+      swiper.update();
+    }, CONFIG.resizeDebounceTime));
+  }
+
+  function init() {
+    $(SELECTORS.quickFilter).each(function (index, slider) {
+      const $slider = $(slider);
+
+      if (shouldSkipSlider($slider)) {
+        return;
+      }
+
+      initializeSwiper($slider);
+    });
+  }
 
-    function shouldSkipSlider($slider) {
-        return $slider.hasClass(CSS_CLASSES.colourSwatch);
-    }
-
-    function getSpaceBetween($slider) {
-        const isTextOnly = $slider.hasClass(CSS_CLASSES.textOnly);
-        return isTextOnly ? CONFIG.textOnlySpaceBetween : CONFIG.defaultSpaceBetween;
-    }
-
-    function getSwiperConfig($pagination, $nextBtn, $prevBtn, spaceBetween) {
-        return {
-            speed: CONFIG.speed,
-            spaceBetween: spaceBetween,
-            slidesPerView: 'auto',
-            watchOverflow: true,
-            pagination: {
-                el: $pagination[0],
-                type: 'bullets',
-                clickable: true,
-                bulletClass: CSS_CLASSES.bulletClass,
-                bulletActiveClass: CSS_CLASSES.bulletActiveClass,
-            },
-            navigation: {
-                nextEl: $nextBtn[0],
-                prevEl: $prevBtn[0],
-            },
-            breakpoints: {
-                [CONFIG.breakpoints.mobile]: {
-                    spaceBetween: CONFIG.breakpoints.mobileSpaceBetween,
-                },
-            },
-            on: {
-                lock: handleLock,
-                unlock: handleUnlock,
-            },
-        };
-    }
-
-    function handleLock() {
-        this.el.parentElement.classList.add(CSS_CLASSES.locked);
-    }
-
-    function handleUnlock() {
-        this.el.parentElement.classList.remove(CSS_CLASSES.locked);
-    }
-
-    function initializeSwiper($slider) {
-        const $container = $slider.find(SELECTORS.swiperContainer);
-        const $pagination = $slider.find(SELECTORS.pagination);
-        const $nextBtn = $slider.find(SELECTORS.nextButton);
-        const $prevBtn = $slider.find(SELECTORS.prevButton);
-
-        const spaceBetween = getSpaceBetween($slider);
-        const config = getSwiperConfig($pagination, $nextBtn, $prevBtn, spaceBetween);
-
-        const swiper = new Swiper($container[0], config);
-
-        bindResizeHandler(swiper);
-    }
-
-    function bindResizeHandler(swiper) {
-        $(window).on(
-            'resize',
-            _.debounce(function () {
-                swiper.update();
-            }, CONFIG.resizeDebounceTime)
-        );
-    }
-
-    function init() {
-        $(SELECTORS.quickFilter).each(function (index, slider) {
-            const $slider = $(slider);
-
-            if (shouldSkipSlider($slider)) {
-                return;
-            }
-
-            initializeSwiper($slider);
-        });
-    }
-
-    init();
-});
+  init();
+});

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

@@ -0,0 +1,188 @@
+import { showLoader, hideLoader } from "./loader";
+
+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' },
+  giftCardApplied: { item: '.checkout-widget__gift-card', value: '.checkout-widget__item-value', title: 'Gift Card:' },
+  total: { item: '.checkout-widget__total', value: '.checkout-widget__total-value' },
+};
+
+const CURRENCY_KEYS = new Set([
+  'subTotal','vat','clickAndCollectCost','deliveryCost',
+  'charityPrice','discountTotal','total','giftCardApplied'
+]);
+
+const GIFT_CARD_ALREADY_ADDED = 'GIFT_CARD_ALREADY_ADDED';
+const PIS_REQUEST_TIMEOUT = 'PIS-REQUEST-TIMEOUT';
+const PIS_INTEGRATION_ERROR = 'PIS-INTEGRATION-ERROR';
+const PIS_INSUFFICIENT_AMOUNT = 'PIS-INSUFFICIENT-AMOUNT';
+const PIS_PROCESSING_ERROR = 'PIS_PROCESSING_ERROR';
+const HYBRIS_REQUEST_TIMEOUT = 'HYBRIS-REQUEST-TIMEOUT';
+const HYBRIS_PIS_INTEGRATION_ERROR = 'HYBRIS-PIS_INTEGRATION-ERROR';
+const HYBRIS_PIS_CONNECTION_ERROR = 'HYBRIS-PIS_CONNECTION-ERROR';
+const ZERO_BALANCE = 'ZERO_BALANCE';
+const SPLIT_PAYMENT_CARD_ERROR = 'SPLIT_PAYMENT_CARD_ERROR';
+
+export const DEFAULT_ERROR_MESSAGE =
+    'Unable to use Gift Card at this time, please try later or click here for support.';
+
+export const DEFAULT_PAY_ERROR_MESSAGE =
+    'Unfortunately there was a problem placing your order with Gift Card(s). Please click here for support.';
+
+export const OK_CODE = 0;
+
+export const MESSAGE_BY_CODE = {
+  10: 'Gift Card number and / or PIN not recognised. A Gift Card will be locked following three unsuccessful PIN attempts.',
+  16: 'Card locked due to three unsuccessful PIN entries. For support click here.',
+  20: 'Unable to use Gift Card at this time, please try later or click here for support.',
+  21: 'Gift Card number not recognised.',
+  40: 'Unable to use Gift Card at this time, please try later or click here for support.',
+  60: 'The entered Gift Card has expired. For support click here.',
+  75: 'The entered Gift Card is invalid. For support click here.',
+  [GIFT_CARD_ALREADY_ADDED]: 'Gift Card already added, please use a different card.',
+  [PIS_REQUEST_TIMEOUT]: 'Unable to use Gift Card at this time, please try later or click here for support.',
+  [PIS_INTEGRATION_ERROR]: 'Unable to use Gift Card at this time, please try later or click here for support.',
+  [PIS_INSUFFICIENT_AMOUNT]: 'Unfortunately there was a problem placing your order with Gift Card(s). Please click here for support.',
+  [PIS_PROCESSING_ERROR]: 'Unfortunately there was a problem placing your order with Gift Card(s). Please click here for support.',
+  [HYBRIS_REQUEST_TIMEOUT]: 'Unable to use Gift Card at this time, please try later or click here for support.',
+  [HYBRIS_PIS_INTEGRATION_ERROR]: 'Unable to use Gift Card at this time, please try later or click here for support.',
+  [HYBRIS_PIS_CONNECTION_ERROR]: 'Unable to use Gift Card at this time, please try later or click here for support.',
+  [ZERO_BALANCE]: 'Insufficient funds available, please try another Gift Card or alternate payment method.',
+  99: 'The entered Gift Card is invalid. For support click here.',
+  [-1]: 'Gift Card is unavailable at this time, please try later. For support click here.',
+};
+
+export const PAY_MESSAGE_BY_CODE = {
+  101: 'Unable to use Gift Cards at this time, please try later or click here for support.',
+  102: 'Unfortunately there was a problem with requesting your card details from the payment provider. Available funds on your Gift Card are unchanged.',
+  103: 'Unfortunately there was a problem placing your order with Gift Card(s). Please click here for support.',
+  104: 'Unfortunately there was a problem placing your order with Gift Card(s). Please click here for support.',
+  [PIS_REQUEST_TIMEOUT]: 'Unable to use Gift Card at this time, please try later or click here for support.',
+  [PIS_INTEGRATION_ERROR]: 'Unable to use Gift Card at this time, please try later or click here for support.',
+  [PIS_INSUFFICIENT_AMOUNT]: 'Unfortunately there was a problem placing your order with Gift Card(s). Please click here for support.',
+  [PIS_PROCESSING_ERROR]: 'Unfortunately there was a problem placing your order with Gift Card(s). Please click here for support.',
+  [HYBRIS_REQUEST_TIMEOUT]: 'Unable to use Gift Card at this time, please try later or click here for support.',
+  [HYBRIS_PIS_INTEGRATION_ERROR]: 'Unable to use Gift Card at this time, please try later or click here for support.',
+  [HYBRIS_PIS_CONNECTION_ERROR]: 'Unable to use Gift Card at this time, please try later or click here for support.',
+  [SPLIT_PAYMENT_CARD_ERROR]: 'Unfortunately there was a problem with requesting your card details from the payment provider. Available funds on your Gift Card are unchanged.',
+};
+
+export const ADD_GIFT_CARD = 'addGiftCard';
+export const REMOVE_GIFT_CARD = 'removeGiftCard';
+export const PAY_WITH_GIFT_CARD = 'payWithGiftCard';
+
+export const FAQ_URL = 'https://www.wickes.co.uk/gifts';
+
+export const escapeHtml = (s) => $('<div>').text(String(s || '')).html();
+
+export const linkifyClickHere = (msg) =>
+  escapeHtml(msg).replace(
+    /\bclick here\b/gi,
+    `<a href="${FAQ_URL}" target="_blank" rel="noopener" class="notification_link">click here</a>`
+  );
+
+export function formatGc16(raw) {
+  const digits = String(raw || '').replace(/\D/g, '').slice(0, 16);
+  return digits.replace(/(\d{4})(?=\d)/g, '$1-');
+}
+
+function formatGBP(value) {
+  if (value === null || typeof value === 'undefined' || String(value).trim() === '') {
+    return value;
+  }
+
+  const cleanedValue = String(value).replace(/[^\d.-]/g, '');
+  const numberValue = Number(cleanedValue);
+
+  if (Number.isFinite(numberValue)) {
+    return `£${numberValue.toFixed(2)}`;
+  }
+
+  return value;
+}
+
+export function buildHintContext(count, limit) {
+  const max = count >= limit;
+
+  return {
+    canAdd: !max,
+    max,
+    hintClass: `giftcard-summary__hint${max ? ' giftcard-summary__hint--max' : ''}`,
+  };
+}
+
+export function buildSummaryEqualMap(data) {
+  return Object.entries(SUMMARY_SELECTORS).map(([key, d]) => {
+    const raw = data[key];
+    let dataValue = raw;
+
+    if (key === 'giftCardApplied') {
+      if (isZeroAmount(raw)) {
+        dataValue = '';
+      } else if (raw != null && raw !== '') {
+        dataValue = formatGBP(raw);
+        if (typeof dataValue === 'string' && dataValue.startsWith('£')) {
+          dataValue = `-${dataValue}`;
+        }
+      }
+    } else {
+      if (CURRENCY_KEYS.has(key) && raw != null && raw !== '') {
+        dataValue = formatGBP(raw);
+      }
+    }
+
+    return {
+      item: d.item,
+      itemValue: d.value,
+      dataValue,
+      ...(d.title ? { title: d.title } : {}),
+    };
+  });
+}
+
+export function isZeroAmount(val) {
+  const cleaned = String(val ?? '').replace(/[^\d.]/g, '');
+  if (!cleaned) {
+    return false;
+  }
+  const num = Number(cleaned);
+  return Number.isFinite(num) && num === 0;
+}
+
+// --- API/Event-Dispatching Functions ---
+
+export function verifyGiftCard($loader, giftCardNumber, pin) {
+  showLoader($loader);
+  return new Promise((resolve, reject) => {
+    const payload = { giftCardNumber, pin };
+    const detail = { resolve, reject, payload };
+    const evt = createEvent(ADD_GIFT_CARD, payload, detail);
+    window.dispatchEvent(evt);
+  }).finally(() => {
+    hideLoader($loader);
+  });
+}
+
+export function removeGiftCard($loader, index) {
+  showLoader($loader);
+  return new Promise((resolve, reject) => {
+    const payload = { index };
+    const detail = { resolve, reject, payload };
+    const evt = createEvent(REMOVE_GIFT_CARD, payload, detail);
+    window.dispatchEvent(evt);
+  }).finally(() => {
+    hideLoader($loader);
+  });
+}
+
+export function payWithGiftCard() {
+  return new Promise((resolve, reject) => {
+    const detail = { resolve, reject };
+    const evt = createEvent(PAY_WITH_GIFT_CARD, undefined, detail);
+    window.dispatchEvent(evt);
+  });
+}

package/build/js/page/utils/input-handling.js

@@ -0,0 +1,92 @@
+import {formatGc16} from './gift-cards-utils';
+import {clearErrorText, showErrorText} from './validation';
+
+
+export function createGcNumberInputHandler({
+    fieldSelector,
+    fieldErrorClass,
+    errorTextSelector,
+    ariaInvalidAttr
+  }) {
+  return function handleGcNumberInput(e) {
+    const input = e.currentTarget;
+    const $input = $(input);
+
+    const canTrack = typeof input.selectionStart === 'number';
+    const atEnd = canTrack && input.selectionStart === input.value.length;
+
+    const hadErr = $input.closest(fieldSelector).hasClass(fieldErrorClass);
+
+    input.value = formatGc16(input.value);
+
+    if (hadErr) {
+      clearErrorText($input, fieldSelector, errorTextSelector, fieldErrorClass, ariaInvalidAttr);
+    }
+
+    if (atEnd && typeof input.setSelectionRange === 'function') {
+      input.setSelectionRange(input.value.length, input.value.length);
+    }
+  };
+}
+
+export function digitsOnlyKeypress(e) {
+  if (!/\d/.test(String.fromCharCode(e.which || e.keyCode))) {
+    e.preventDefault();
+  }
+}
+
+export function handleGcNumberBlur(e, {
+  fieldSelector,
+  errorTextSelector,
+  errorClass,
+  ariaInvalidAttr,
+  numberMessage,
+}) {
+  const $input = $(e.currentTarget);
+  const len = String($input.val() || '').replace(/\D/g, '').length;
+
+  clearErrorText($input, fieldSelector, errorTextSelector, errorClass, ariaInvalidAttr);
+
+  if (len < 16) {
+    showErrorText($input, numberMessage, fieldSelector, errorTextSelector, errorClass, ariaInvalidAttr);
+  }
+}
+
+export function handleGcPinInput(e, {
+  fieldSelector,
+  errorTextSelector,
+  errorClass,
+  ariaInvalidAttr,
+}) {
+  const input = e.currentTarget;
+  const $input = $(input);
+
+  const hadErr = $input.closest(fieldSelector).hasClass(errorClass);
+  input.value = String(input.value || '').replace(/\D/g, '').slice(0, 8);
+
+  if (hadErr) {
+    clearErrorText($input, fieldSelector, errorTextSelector, errorClass, ariaInvalidAttr);
+  }
+}
+
+
+export function handleGcPinKeypress(e) {
+  if (!/\d/.test(String.fromCharCode(e.which || e.keyCode))) e.preventDefault();
+}
+
+export function handleGcPinBlur(e, {
+  fieldSelector,
+  errorTextSelector,
+  errorClass,
+  ariaInvalidAttr,
+  pinMessage,
+}) {
+  const $input = $(e.currentTarget);
+  const length = String($input.val() || '').replace(/\D/g, '').length;
+
+  clearErrorText($input, fieldSelector, errorTextSelector, errorClass, ariaInvalidAttr);
+
+  if (length < 8) {
+    showErrorText($input, pinMessage, fieldSelector, errorTextSelector, errorClass, ariaInvalidAttr);
+  }
+}

package/build/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/build/js/page/utils/validation.js

@@ -257,7 +257,6 @@ export function wrapWithError(element) {
 
 }
 
-
 export function addErrorMessage(element, errorMessage) {
     if (errorMessage) {
         $(element).append('<div class="form-row__error">' + errorMessage + '</div>');
@@ -316,3 +315,49 @@ export function validateGuidPattern (value) {
 export function validateUserFriendlyIdPattern (value) {
     return patterns.userFriendlyIdPattern.test(value);
 }
+
+export function showErrorText($input, message, fieldSelector, errorTextClass, errorClass, ariaInvalidAttr) {
+  const $field = $input.closest(fieldSelector);
+  $field.addClass(errorClass);
+  $input.attr(ariaInvalidAttr, 'true');
+
+  let $err = $field.find(errorTextClass);
+  if (!$err.length) {
+    $err = $(`<div class="${errorTextClass.slice(1)}" />`).appendTo($field);
+  }
+  $err.text(message);
+}
+
+export function clearErrorText($input, fieldSelector, errorTextClass, errorClass, ariaInvalidAttr) {
+  const $field = $input.closest(fieldSelector);
+  $field.removeClass(errorClass);
+  $input.removeAttr(ariaInvalidAttr);
+  $field.find(errorTextClass).remove();
+}
+
+ function digitsOnly(value) {
+  return String(value || '').replace(/\D/g, '');
+}
+
+function hasExactDigits(value, n) {
+  return digitsOnly(value).length === Number(n);
+}
+
+function validateByPredicate($input, predicate, message, {
+  fieldSelector,
+  errorText: errorTextClass,
+  fieldError: errorClass,
+  ariaInvalidAttr,
+}) {
+  const ok = !!predicate(String($input.val() || ''));
+  if (!ok) {
+    showErrorText($input, message, fieldSelector, errorTextClass, errorClass, ariaInvalidAttr);
+  } else {
+    clearErrorText($input, fieldSelector, errorTextClass, errorClass, ariaInvalidAttr);
+  }
+  return ok;
+}
+
+export function validateExactDigits($input, n, message, cfg) {
+  return validateByPredicate($input, (v) => hasExactDigits(v, n), message, cfg);
+}