wickes-css2 2.106.0-develop.7 → 2.106.0-develop.9

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/components/toggle-password-visibility.js

@@ -0,0 +1,22 @@
+import { initializeInputToggle } from "../utils/show-hide-input";
+
+var Wick = window.Wick || {};
+
+Wick.TogglePasswordVisibility = {
+  el: {
+    $containers: $('.form-row[data-show-content] .input-wrap'),
+  },
+
+  init() {
+    if (!this.el.$containers.length) {
+      return;
+    }
+    this.el.$containers.each(function () {
+      initializeInputToggle($(this));
+    });
+  },
+};
+
+$(document).ready(function () {
+  Wick.TogglePasswordVisibility.init();
+});

package/src/js/page/components/voucher.js

@@ -1,11 +1,11 @@
-import {updateOrderSummary} from './order-summary';
-import {callAction} from '../utils/http-action';
-import {retryAction, retryHelpers} from "./retry-action";
-import {showValidationErrors} from '../utils/validation'
-import {updateKlarnaPlacements} from '../basket/klarna';
-import {getCSRFToken, CSRF} from "./csrf";
-import {ROUTES} from '../utils/routes';
-import {updateClearpayPlacements, updateClearpayVisibility} from '../basket/clearpay';
+import { updateOrderSummary } from './order-summary';
+import { callAction } from '../utils/http-action';
+import { retryAction, retryHelpers } from './retry-action';
+import { showValidationErrors } from '../utils/validation';
+import { updateKlarnaPlacements } from '../basket/klarna';
+import { getCSRFToken, CSRF } from './csrf';
+import { ROUTES } from '../utils/routes';
+import { updateClearpayPlacements, updateClearpayVisibility } from '../basket/clearpay';
 
 const voucherEl = {
     $basketVoucher: $('.checkout-voucher'),
@@ -30,8 +30,10 @@ const voucherEl = {
 };
 
 export function checkVoucherCode(e, current) {
-    e && e.preventDefault()
-    const context = current ? $(current).closest(voucherEl.voucher) : $(this).closest(voucherEl.voucher),
+    e && e.preventDefault();
+    const context = current
+            ? $(current).closest(voucherEl.voucher)
+            : $(this).closest(voucherEl.voucher),
         value = context.find('input').val().trim(),
         encodedValue = encodeURIComponent(value),
         errorMsg = {
@@ -39,8 +41,8 @@ export function checkVoucherCode(e, current) {
             responseJSON: {
                 globalMessage: {
                     message: 'Please enter a voucher code',
-                }
-            }
+                },
+            },
         };
 
     if (value && value.length) {
@@ -59,7 +61,7 @@ function executionVoucherApplying(value, context) {
             url: `${ROUTES.VOUCHER_UPDATE}/${value}`,
             type: 'POST',
             headers: {
-                'CSRFToken': CSRF.getToken(),
+                CSRFToken: CSRF.getToken(),
             },
             retryLimit: retryHelpers.retryLimit,
             error: notApplyVoucher,
@@ -79,7 +81,7 @@ export function voucherRemove() {
     let voucher = $(this).parent(),
         voucherCode = voucher.attr('data-coupon-code');
     voucher.addClass('checkout-widget__voucher-removed').text('Voucher removed');
-    voucherRemoveAction(voucherCode, voucher)
+    voucherRemoveAction(voucherCode, voucher);
 }
 
 function voucherRemoveAction(code) {
@@ -90,7 +92,7 @@ function voucherRemoveAction(code) {
             type: 'DELETE',
             headers: {
                 'Content-Type': 'application/json',
-                'CSRFToken': CSRF.getToken(),
+                CSRFToken: CSRF.getToken(),
             },
             error: handleVoucherRemovingError,
         };
@@ -106,12 +108,11 @@ function formattedTotalPriceWithoutSymbol(val) {
 }
 
 function executionVoucherRemoving(data) {
-    updateOrderSummary(
-        data,
-        getEqualMapForVoucherUpdate(data),
-        true
+    updateOrderSummary(data, getEqualMapForVoucherUpdate(data), true);
+    updateKlarnaPlacements(
+        formattedTotalPriceWithoutSymbol(data.total),
+        data.paymentInfos.klarnaPaymentInfo.customPaymentMethodIds
     );
-    updateKlarnaPlacements(formattedTotalPriceWithoutSymbol(data.total));
     updateClearpayPlacements(data.total);
     updateClearpayVisibility(data.total);
 }
@@ -123,19 +124,18 @@ function applyVoucher(data, context) {
 
     clearValidationErrors($voucherForm);
     voucherEl.$basketVoucher.toggle(voucherEl.voucherHide);
-    updateOrderSummary(
-        data,
-        getEqualMapForVoucherUpdate(data),
-        true
+    updateOrderSummary(data, getEqualMapForVoucherUpdate(data), true);
+    updateKlarnaPlacements(
+        formattedTotalPriceWithoutSymbol(data.total),
+        data.paymentInfos.klarnaPaymentInfo.customPaymentMethodIds
     );
-    updateKlarnaPlacements(formattedTotalPriceWithoutSymbol(data.total));
     updateClearpayPlacements(data.total);
     updateClearpayVisibility(data.total);
     setTimeout(function () {
         voucherButton.attr('disabled', false);
         $voucherFormInput.val('');
         voucherEl.$basketVoucher.toggle(voucherEl.voucherHide);
-    }, 5000)
+    }, 5000);
 }
 
 function notApplyVoucher(xhr, context) {
@@ -158,21 +158,25 @@ function notApplyVoucher(xhr, context) {
 function retryVoucherAction(voucherForm) {
     return new Promise((resolve) => {
         getCSRFToken(resolve);
-    }).then(() => {
-        retryAction(checkVoucherCode, retryHelpers.retryLimit, ...Array(1), voucherForm)
-    }).catch(() => {
-        showDefaultError();
     })
+        .then(() => {
+            retryAction(checkVoucherCode, retryHelpers.retryLimit, ...Array(1), voucherForm);
+        })
+        .catch(() => {
+            showDefaultError();
+        });
 }
 
 function retryVoucherRemoving(code) {
     return new Promise((resolve) => {
         getCSRFToken(resolve);
-    }).then(() => {
-        retryAction(voucherRemoveAction, retryHelpers.retryLimit, code);
-    }).catch(() => {
-        console.log('remove failed');
     })
+        .then(() => {
+            retryAction(voucherRemoveAction, retryHelpers.retryLimit, code);
+        })
+        .catch(() => {
+            console.log('remove failed');
+        });
 }
 
 function handleVoucherRemovingError(xhr, code) {
@@ -182,7 +186,7 @@ function handleVoucherRemovingError(xhr, code) {
 }
 
 function showDefaultError(error = retryHelpers.errorMsg) {
-    const voucher = getNotAppliedVoucher()
+    const voucher = getNotAppliedVoucher();
     showValidationErrors(voucher.find('form'), error);
 }
 
@@ -195,9 +199,12 @@ function getNotAppliedVoucher() {
 function clearValidationErrors(form) {
     var $form = $(form);
     if ($form.hasClass(voucherEl.formInvalid)) {
-        $form.removeClass(voucherEl.formInvalid)
-            .find(voucherEl.fieldRow).removeClass(voucherEl.rowValidationError)
-            .find(voucherEl.fieldError).remove();
+        $form
+            .removeClass(voucherEl.formInvalid)
+            .find(voucherEl.fieldRow)
+            .removeClass(voucherEl.rowValidationError)
+            .find(voucherEl.fieldError)
+            .remove();
     }
 }
 
@@ -207,48 +214,46 @@ function getEqualMapForVoucherUpdate(data) {
             item: voucherEl.subtotal,
             itemValue: voucherEl.value,
             dataValue: data.subTotal,
-            title: 'Items subtotal:'
-
+            title: 'Items subtotal:',
         },
         {
             item: voucherEl.vat,
             itemValue: voucherEl.value,
             dataValue: data.vat,
-            title: 'VAT:'
+            title: 'VAT:',
         },
         {
             item: voucherEl.cc,
             itemValue: voucherEl.value,
             dataValue: data.clickAndCollectCost,
-            title: 'Click & Collect:'
+            title: 'Click & Collect:',
         },
         {
             item: voucherEl.delivery,
             itemValue: voucherEl.value,
             dataValue: data.deliveryCost,
-            title: 'Delivery:'
+            title: 'Delivery:',
         },
         {
             item: voucherEl.charity,
             itemValue: voucherEl.value,
             dataValue: data.charityPrice,
-            title: 'Charity donation:'
+            title: 'Charity donation:',
         },
         {
             item: voucherEl.discountItem,
             itemValue: voucherEl.discountValue,
-            dataValue: data.discountTotal
+            dataValue: data.discountTotal,
         },
         {
             item: voucherEl.orderTotal,
             itemValue: voucherEl.orderTotalValue,
-            dataValue: data.total
+            dataValue: data.total,
         },
     ];
 }
 
 $(document).ready(function () {
-
     function init() {
         if (!$('.checkout-voucher').length) {
             return;

package/src/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/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/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();
+}