wickes-css2 2.103.0-gift-cards.1 → 2.103.0-gift-cards.4

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

@@ -13,31 +13,46 @@ const osEl = {
 }
 
 export function updateOrderSummary(data, equalMap, isVoucher) {
-    equalMap.forEach((obj) => {
-        if ($(obj.item).length) {
-            $(obj.item).show();
-        } else {
-            if ($(osEl.checkoutWidgetDetailsDiscount).length) {
-                $(osEl.checkoutWidgetDetailsDiscount).before(createCheckoutWidgetItem(obj))
-            } else {
-                $(osEl.checkoutWidgetDetails).append(createCheckoutWidgetItem(obj))
-            }
-        }
+  equalMap.forEach((obj) => {
+    if (typeof obj.dataValue === 'undefined') return;
 
-        $(obj.item).find(obj.itemValue).text(obj.dataValue);
-        if (isVoucher ? obj.dataValue : obj.value && obj.dataValue) {
-            $(obj.item).find(obj.itemValue).show();
-        } else {
-            $(obj.item).hide();
-        }
-    })
+    if ($(obj.item).length) {
+      $(obj.item).show();
+    } else {
+      if ($(osEl.checkoutWidgetDetailsDiscount).length) {
+        $(osEl.checkoutWidgetDetailsDiscount).before(createCheckoutWidgetItem(obj));
+      } else {
+        $(osEl.checkoutWidgetDetails).append(createCheckoutWidgetItem(obj));
+      }
+    }
 
-    const value = data.totalPrice?.formattedValue || data.total;
+    $(obj.item).find(obj.itemValue).text(obj.dataValue);
+    if (isVoucher ? obj.dataValue : obj.value && obj.dataValue) {
+      $(obj.item).find(obj.itemValue).show();
+    } else {
+      $(obj.item).hide();
+    }
+  });
 
+  const keys = new Set(Object.keys(data || {}));
+  const hasAny = (...arr) => arr.some(k => keys.has(k));
+
+  const value = data.totalPrice?.formattedValue || data.total;
+  if (typeof value !== 'undefined' && hasAny('total', 'totalPrice')) {
+    updateSummaryMobileBarTotal(value);
+  }
+
+  if (hasAny('promotionsInfo')) {
     updateDiscount(data, isVoucher);
+  }
+
+  if (hasAny('deliveryOrder', 'clickAndCollectOrder', 'clickAndCollectOnly', 'deliveryItemsQuantity', 'pickupItemsQuantity')) {
     hideUnusedDeliveryTypeCost(data, isVoucher);
+  }
+
+  if (hasAny('freeDelivery', 'messageForFreeDelivery', 'clickAndCollectOnly')) {
     calculateFreeDelivery(data);
-    updateSummaryMobileBarTotal(value);
+  }
 }
 
 function createCheckoutWidgetItem(obj) {
@@ -53,12 +68,14 @@ function hideUnusedDeliveryTypeCost(data, isVoucher) {
     $(osEl.delivery).show()
     $(osEl.cc).show()
     if (isVoucher) {
-        if (!data.deliveryOrder) {
-            $(osEl.delivery).hide()
-        } else if (!data.clickAndCollectOrder) {
-            $(osEl.cc).hide()
-        }
-    } else {
+      if ('deliveryOrder' in data && data.deliveryOrder === false) {
+        $(osEl.delivery).hide();
+      }
+
+      if ('clickAndCollectOrder' in data && data.clickAndCollectOrder === false) {
+        $(osEl.cc).hide();
+      }
+  } else {
         if (data.clickAndCollectOnly) {
             $(osEl.delivery).hide()
         } else if (data.deliveryItemsQuantity > 0 && data.pickupItemsQuantity === 0) {

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

@@ -1,3 +1,5 @@
+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:' },
@@ -5,17 +7,75 @@ const SUMMARY_SELECTORS = {
   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' },
-  giftCardApplied: { item: '.checkout-widget__gift-card', value: '.checkout-widget__total-value', title: 'Gift Card:' },
 };
 
+const CURRENCY_KEYS = new Set([
+  'subTotal','vat','clickAndCollectCost','deliveryCost',
+  'charityPrice','discountTotal','total','giftCardApplied'
+]);
+
+export const OK_CODE = 0;
+
+export const ZERO_BALANCE_MESSAGE =
+  'Insufficient funds available, please try another Gift Card or alternate payment method.';
+
+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.',
+  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.',
+  89: 'Gift Card already added, please use a different card.',
+  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.',
+};
+
+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,
@@ -23,21 +83,62 @@ export function buildHintContext(count, limit) {
   };
 }
 
-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]) => {
+    let dataValue = data[key];
+
+    if (CURRENCY_KEYS.has(key)) {
+      dataValue = formatGBP(dataValue);
+    }
+
+    return {
+      item: d.item,
+      itemValue: d.value,
+      dataValue: dataValue,
+      ...(d.title ? { title: d.title } : {}),
+    };
+  });
 }
 
-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 } : {}),
-  }));
+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/src/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/src/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);
+}

package/src/layouts/checkout.hbs

@@ -22,14 +22,10 @@
     {{/block}}
     <a id="skip-to-content"></a>
     <main {{#if fullWidth}}class="full-width-content"{{/if}}>
-      <div class="globalMessages">
-        <div class="container">
-          {{#block "notification"}}{{/block}}
-        </div>
-      </div>
       <div class="container">
         <div class="row">
           {{#block "steps"}}{{/block}}
+          {{#block "notification"}}{{/block}}
           <div class="content">
             {{#block "main"}}{{/block}}
           </div>

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

@@ -8,13 +8,15 @@
 
 <script src="https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js"></script>
 {{/content}}
-{{#content "notification"}}
-{{> notifications notification-page.error text="Sorry, there are errors on this page. Please review the information you've entered and update sections marked in red."}}
-{{/content}}
 {{#content "steps"}}
 {{> steps-three-steps active-step-index="2"}}
 {{/content}}
 
+{{#content "notification"}}
+<div class="globalMessages container">
+</div>
+{{/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}}
 {{/content}}

package/src/scss/components/_gift-cards.scss

@@ -55,7 +55,7 @@
   &__header {
     display: flex;
     justify-content: space-between;
-    margin-bottom: 24px;
+    margin-bottom: 16px;
   }
 
   &__title {
@@ -92,6 +92,10 @@
     flex-direction: column;
     gap: 24px;
   }
+
+  .notification {
+    margin-bottom: 16px;
+  }
 }
 
 .form-row__label {

package/src/scss/pages/page_checkout_delivery-new.scss

@@ -418,6 +418,13 @@
       margin-bottom: 13px;
     }
   }
+
+  .notification {
+    &:only-child,
+    &:last-child {
+      margin-bottom: 30px;
+    }
+  }
 }
 
 #modalDeliveryEdit,