wickes-css2 2.103.0-RG-1658-apply-dynamic-logic-gift-card.1 → 2.103.0-develop.1

package/src/js/page/components/toggle-password-visibility.js

@@ -1,22 +0,0 @@
-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/utils/gift-cards-utils.js

@@ -1,144 +0,0 @@
-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'
-]);
-
-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,
-    hintClass: `giftcard-summary__hint${max ? ' giftcard-summary__hint--max' : ''}`,
-  };
-}
-
-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 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

@@ -1,92 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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/scss/components/_gift-cards.scss

@@ -1,361 +0,0 @@
-.giftcard-row {
-  position: relative;
-  display: flex;
-  gap: 16px;
-}
-
-.giftcard {
-  border: 1px solid $gray;
-  border-radius: 4px;
-  background: $white;
-  padding: 12px 16px;
-  width: 100%;
-  order: 3;
-  position: relative;
-
-  .giftcard__field {
-    .form-row {
-      margin-bottom: 0;
-    }
-  }
-}
-
-.giftcard-add {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  color: $blue;
-  text-decoration: none;
-  cursor: pointer;
-
-  &__icon {
-    width: 16px;
-    height: 16px;
-  }
-
-  &__text {
-    font-size: .875rem;
-    line-height: 1.375rem;
-    font-weight: 500;
-  }
-}
-
-.giftcard-hint {
-  display: block;
-  color: $squant;
-  font-size: .875rem;
-  line-height: 1.375rem;
-  font-weight: 400;
-  margin-left: 32px;
-}
-
-.giftcard-inline {
-  padding: 12px 8px;
-
-  &__header {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 16px;
-  }
-
-  &__title {
-    font-weight: 500;
-    font-size: 1.125rem;
-    line-height: 1.5rem;
-    white-space: nowrap;
-  }
-
-  &__balance {
-    color: $blue;
-    font-weight: 400;
-    font-size: .875rem;
-    line-height: 1.375rem;
-    text-decoration: underline;
-    white-space: nowrap;
-  }
-
-  &__close {
-    position: absolute;
-    width: 24px;
-    height: 24px;
-    top: 8px;
-    right: 8px;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: $warm-grey;
-  }
-
-  &__fields {
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-  }
-
-  .notification {
-    margin-bottom: 16px;
-  }
-}
-
-.form-row__label {
-  margin-bottom: 8px;
-}
-
-.giftcard__btn {
-  width: 100%;
-}
-
-.giftcard__field {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  padding-bottom: 18px;
-  min-width: 0;
-}
-
-.giftcard-inline .giftcard-inline__fields > .form-row.giftcard__field {
-  margin-bottom: 0;
-}
-
-.giftcard-field--error .giftcard__input {
-  border-color: $red;
-}
-
-.giftcard__error-text  {
-  font-weight: 400;
-  font-size: .75rem;
-  line-height: 1rem;
-  color: $red;
-  margin-top: 8px;
-}
-
-.giftcard .toggle-show svg {
-  pointer-events: none;
-}
-
-.form-row .toggle-show {
-  font-size: 1rem;
-  cursor: pointer;
-  position: absolute;
-  right: 8px;
-  top: 0;
-  height: 100%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-}
-
-.giftcard-applied {
-  width: 100%;
-  border: 1px solid $gray-light;
-  border-radius: 4px;
-  background: $white;
-  padding: 15px 16px;
-  order: 2;
-
-  &__inner {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 12px;
-  }
-
-  &__icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .fa-check-circle {
-    text-align: center;
-    width: 100%;
-    color: $green;
-    font-size: 1rem;
-  }
-
-  &__text {
-    margin: 0;
-    font-size: .875rem;
-    line-height: 1.5rem;
-    font-weight: 500;
-    word-break: break-word;
-  }
-}
-
-.giftcard-summary {
-  position: relative;
-  width: 100%;
-
-  &__hint {
-    margin-top: 16px;
-    margin-bottom: 0;
-    font-size: .875rem;
-    font-weight: 400;
-    line-height: 1.375rem;
-  }
-
-  &__add {
-    text-decoration: underline;
-    cursor: pointer;
-    color: $blue;
-  }
-}
-
-.giftcard-chip-list {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.giftcard-chip {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  gap: 12px;
-  padding: 12px 16px;
-  border: 1px solid $gray;
-  border-radius: 4px;
-  background: $white;
-  min-height: 44px;
-  position: relative;
-
-  &__close {
-    position: absolute;
-    width: 24px;
-    height: 24px;
-    top: 8px;
-    right: 8px;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: $warm-grey;
-  }
-}
-
-.giftcard-chip__icon {
-  width: 48px;
-  height: 30px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.giftcard-chip__content {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.giftcard-chip__line {
-  display: block;
-  line-height: 1.25rem;
-
-  .giftcard-chip__applied {
-    font-size: .875rem;
-    font-weight: 400;
-    line-height: 1.5rem;
-    color: $gray-dark;
-  }
-}
-
-.giftcard-chip__number {
-  font-weight: 500;
-  line-height: 1.5rem;
-  font-size: 1rem;
-  color: $gray-dark;
-}
-
-.giftcard-chip__applied {
-  white-space: nowrap;
-}
-
-@include media-breakpoint-up(sm) {
-  .giftcard-inline__fields {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    gap: 16px;
-  }
-
-  .giftcard-inline__fields > .form-row.giftcard__field--pin.giftcard__field--pin {
-    width: 116px;
-  }
-
-  .giftcard-inline__fields > .form-row.giftcard__field--number.giftcard__field--number {
-    width: 224px;
-  }
-
-  .giftcard__actions {
-    display: flex;
-    align-items: flex-end;
-    height: 72px;
-  }
-
-  .giftcard-summary {
-    &__hint {
-      width: 354px;
-
-      &--max {
-        width: 100%;
-      }
-    }
-  }
-}
-
-@include media-breakpoint-up(md) {
-  .giftcard-inline__fields > .form-row.giftcard__field--pin.giftcard__field--pin {
-    width: 214px;
-  }
-
-  .giftcard-inline__fields > .form-row.giftcard__field--number.giftcard__field--number {
-    width: 240px;
-  }
-
-
-  .giftcard-inline__title {
-    font-weight: 700;
-  }
-
-  .giftcard-summary {
-    &__hint {
-      width: 100%;
-
-      &--max {
-        width: 460px;
-      }
-    }
-  }
-}
-
-@include media-breakpoint-up(lg) {
-  .giftcard-inline__fields {
-    max-width: 470px;
-  }
-
-  .giftcard-summary {
-    &__hint {
-      width: 100%;
-
-      &--max {
-        width: 100%;
-      }
-    }
-  }
-}
-
-@include media-breakpoint-up(xl) {
-  .giftcard-inline__fields {
-    max-width: 100%;
-  }
-
-  .giftcard__btn {
-    width: 140px;
-  }
-
-  .giftcard__field--number,
-  .giftcard__field--pin {
-    width: 100%;
-  }
-}