wickes-css2 2.102.0 → 2.103.0-RG-599-place-order-with-gift-card-spinner.1

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

@@ -0,0 +1,634 @@
+import { initializeInputToggle } from "../utils/show-hide-input";
+import { updateOrderSummary } from './order-summary';
+import { showLoader, hideLoader } from "../utils/loader";
+import { formatGc16, buildSummaryEqualMap, buildChipData, buildHintContext } from "../utils/gift-cards-utils";
+const Handlebars = require('hbsfy/runtime');
+
+Handlebars.registerPartial('info-icon', require("../../../components/info-icon.hbs"));
+Handlebars.registerPartial('loader', require("../../../elements/loader.hbs"));
+
+const giftCardsHint = require("../../../components/gift-cards-hint.hbs");
+const giftCardChip = require("../../../components/giftcard-chip.hbs");
+const renderLoader = require("../../../elements/loader.hbs");
+
+var Wick = window.Wick || {};
+
+Wick.GiftCard = {
+  el: {
+    $blocks: $('.giftcard'),
+    block: '.giftcard',
+    toggle: '#giftcard-toggle',
+    panel: '#giftcard-inline',
+    hint: '.giftcard-hint',
+    closeBtn: '.giftcard-inline__close',
+    form: '.giftcard-inline__form',
+    number: 'input[name="giftcard-number"]',
+    pin: 'input[name="giftcard-pin"]',
+    note: '.giftcard-note',
+    field: '.giftcard__field',
+    errorText: '.giftcard__error-text',
+    fieldError: 'giftcard-field--error',
+    showToggle: '.toggle-show',
+    loader: '.giftcard__container .loader-wrapper',
+    wrapper: '.giftcard__wrapper',
+    success: '#giftcard-applied',
+    container: '.giftcard__container',
+    paymentForm: '.checkout-payment-details__payment-method',
+    billieField: '.form-row__field.form-row__field-billie',
+    clearpayField: '.form-row__field.form-row__field-clearpay',
+    appleField: '.form-row__field.form-row__field-apple',
+    googleField: '.form-row__field.form-row__field-google',
+    paypalField: '.form-row__field.form-row__field-paypal',
+    summaryHint: '.giftcard-summary__hint',
+    chipList: '.giftcard-chip-list',
+    summary: '.giftcard-summary',
+    chip: '.giftcard-chip',
+    giftcardRow: '.giftcard-row',
+    checkoutContainer: '.checkout-payment-details',
+    formRow: '.form-row',
+    iconInfo: '.icon-info-component',
+    toggleIcon: 'svg, i',
+    iconEye: 'fa-eye',
+    iconEyeSlash: 'fa-eye-slash',
+    iconSvgEyeSlash: 'eye-slash',
+    passwordToggleEvent: 'input.passwordToggle',
+    ariaInvalidAttr: 'aria-invalid',
+    typeAttr: 'type',
+    dataIconAttr: 'data-icon',
+    svg: 'svg',
+    expandedAttr: 'aria-expanded',
+    giftcardBtn: '.giftcard__btn',
+    jsGiftcardAdd: '.js-giftcard-add',
+    giftcardChipClose: '.giftcard-chip__close',
+    body: 'body',
+    loaderChip: '.loader-wrapper',
+    chipListLoader: '.giftcard-chip-list > .loader-wrapper',
+    ctaSelector: '.billing-address .btn-enter-details .btn__text',
+    btnDetails: '.btn-enter-details',
+    btnText: '.btn__text',
+    pageLoader: '.loader-wrapper.page-loader',
+    btnEnterDetails: '.billing-address .btn-enter-details',
+    checkoutPaymentFields: '.billing-address .checkout-payment-details__descr',
+    iframe: '#hopIframe',
+    payBtnSelector: '#btnSubmit,input[type="submit"].submit-PayNow,.submitButton.btn.primary.submit-PayNow',
+  },
+
+  messages: {
+    numberMessage: 'Gift Card should consist of 16 digits',
+    pinMessage: 'Gift Card PIN should consist of 8 digits',
+    ctaDefaultText: 'Enter card details',
+    ctaGiftcardText: 'Pay with Gift Card',
+  },
+
+  maxChips: 3,
+  lastChipData: null,
+  successTimer: null,
+
+  showError($input, message) {
+    const { field, errorText, fieldError, ariaInvalidAttr } = this.el;
+    const $field = $input.closest(field);
+    $field.addClass(fieldError);
+    $input.attr(ariaInvalidAttr, 'true');
+
+    let $err = $field.find(errorText);
+    if (!$err.length) {
+      $err = $('<div class="giftcard__error-text" />').appendTo($field);
+    }
+    $err.text(message);
+  },
+
+  clearError($input) {
+    const { field, errorText, fieldError, ariaInvalidAttr } = this.el;
+    const $field = $input.closest(field);
+    $field.removeClass(fieldError);
+    $input.removeAttr(ariaInvalidAttr);
+    $field.find(errorText).remove();
+  },
+
+  resetPinToggle($root) {
+    const {
+      pin,
+      field,
+      showToggle,
+      toggleIcon,
+      iconEye,
+      iconEyeSlash,
+      iconSvgEyeSlash,
+      passwordToggleEvent,
+      typeAttr,
+      dataIconAttr,
+      svg
+    } = this.el;
+
+    const $pinField = $root.find(pin).closest(field);
+    const $pinInput = $pinField.find(pin).first();
+
+    $pinInput.attr(typeAttr, 'password');
+
+    const $toggle = $pinField.find(showToggle).first();
+    const $icon = $toggle.find(toggleIcon).first();
+
+    if ($icon.length) {
+      $icon.removeClass(`${iconEye} ${iconEyeSlash}`).addClass(iconEyeSlash);
+      if ($icon.is(svg) && $icon.attr(dataIconAttr)) {
+        $icon.attr(dataIconAttr, iconSvgEyeSlash);
+      }
+    }
+
+    const hasValue = ($pinInput.val() || '').length > 0;
+    $toggle.toggle(hasValue);
+
+    $pinInput.trigger(passwordToggleEvent);
+  },
+
+  resetForm($root) {
+    const { number, pin, note } = this.el;
+    const $num = $root.find(number);
+    const $pinInput = $root.find(pin);
+
+    $num.val('');
+    $pinInput.val('');
+    this.clearError($num);
+    this.clearError($pinInput);
+    $root.find(note).remove();
+
+    this.resetPinToggle($root);
+  },
+
+  open($root) {
+    const { toggle, panel, hint, pin, expandedAttr, passwordToggleEvent } = this.el;
+    $root.show();
+
+    $root.find(panel).prop('hidden', false);
+    $root.find(toggle).attr(expandedAttr, 'true').hide();
+    $root.find(hint).hide();
+    $root.find(pin).trigger(passwordToggleEvent);
+  },
+
+  close($root) {
+    const { toggle, panel, loader, expandedAttr } = this.el;
+    const $toggle = $root.find(toggle);
+    const $panel = $root.find(panel);
+    const $loader = $root.find(loader);
+
+    showLoader($loader);
+
+    setTimeout(() => {
+      hideLoader($loader);
+
+      $panel.prop('hidden', true);
+      $toggle.attr(expandedAttr, 'false').show().trigger('focus');
+      this.updateHintVisibility($root);
+    }, 1000);
+  },
+
+  showSubmitSpinner($root) {
+    const { loader, panel, toggle, hint, expandedAttr } = this.el;
+    const $loader = $root.find(loader);
+
+    showLoader($loader);
+
+    setTimeout(() => {
+      hideLoader($loader);
+
+      $root.find(panel).prop('hidden', true);
+      $root.find(toggle).attr(expandedAttr, 'false').show().trigger('focus');
+      $root.find(hint).show();
+      this.showSuccess($root);
+    }, 1000);
+  },
+
+  handleNumberInput(e) {
+    const { field, fieldError } = this.el;
+    const input = e.currentTarget;
+    const $input = $(input);
+
+    const atEnd = input.selectionStart === input.value.length;
+    const hadErr = $input.closest(field).hasClass(fieldError);
+
+    input.value = formatGc16(input.value);
+    if (hadErr) this.clearError($input);
+    if (atEnd) input.setSelectionRange(input.value.length, input.value.length);
+  },
+
+  handleNumberKeypress(e) {
+    if (!/\d/.test(String.fromCharCode(e.which || e.keyCode))) e.preventDefault();
+  },
+
+  handleNumberBlur(e) {
+    const $input = $(e.currentTarget);
+    const len = String($input.val() || '').replace(/\D/g, '').length;
+    this.clearError($input);
+    if (len < 16) this.showError($input, this.messages.numberMessage);
+  },
+
+  handlePinInput(e) {
+    const { field, fieldError } = this.el;
+    const input = e.currentTarget;
+    const $input = $(input);
+
+    const hadErr = $input.closest(field).hasClass(fieldError);
+    input.value = String(input.value || '').replace(/\D/g, '').slice(0, 8);
+    if (hadErr) this.clearError($input);
+  },
+
+  handlePinKeypress(e) {
+    if (!/\d/.test(String.fromCharCode(e.which || e.keyCode))) e.preventDefault();
+  },
+
+  handlePinBlur(e) {
+    const $input = $(e.currentTarget);
+    const length = String($input.val() || '').replace(/\D/g, '').length;
+    this.clearError($input);
+    if (length < 8) {
+      this.showError($input, this.messages.pinMessage);
+    }
+  },
+
+  handleToggleClick(e) {
+    e.preventDefault();
+    this.open($(e.currentTarget).closest(this.el.$blocks));
+  },
+
+  handleCloseClick(e) {
+    e.preventDefault();
+    const $root = $(e.currentTarget).closest(this.el.$blocks);
+    this.resetForm($root);
+    this.close($root);
+  },
+
+  finalizeSuccess($root, $success) {
+    let { panel, toggle, hint, expandedAttr, chipList } = this.el;
+
+    if ($success && $success.length) {
+      $success.attr('hidden', 'hidden').removeClass('fade show').off('transitionend');
+    }
+
+    this.resetForm($root);
+    $root.find(panel).prop('hidden', true);
+    $root.find(toggle).attr(expandedAttr, 'false').show();
+    $root.find(hint).show();
+
+    if (this.lastChipData) {
+      const $summary = this.ensureSummaryContainer($root);
+      const html = this.renderChipHTML(this.lastChipData);
+      $summary.find(chipList).append(html);
+      $summary.show();
+      this.lastChipData = null;
+      this.updateCtaButton($root);
+    }
+
+    const data = Wick.CheckoutData.successGiftCardData;
+    updateOrderSummary(
+      data,
+      this.getEqualMapForGiftCardUpdate(data),
+      true,
+    );
+
+    this.toggleBillingDescrForZero($root, data);
+    this.updateCtaButton($root, data);
+    this.updateHintVisibility($root, data);
+  },
+
+
+  showSuccess($root) {
+    const { success} = this.el;
+
+    if (this.successTimer) {
+      clearTimeout(this.successTimer);
+      this.successTimer = null;
+    }
+
+    $root.hide();
+    const $success = $(success);
+    $success.removeAttr('hidden').addClass('fade');
+    $success[0] && $success[0].offsetWidth;
+    $success.addClass('show');
+
+    this.successTimer = setTimeout(() => {
+      $success.removeClass('show');
+      const handler = () => this.finalizeSuccess($root, $success);
+
+      $success.on('transitionend', handler);
+      setTimeout(handler, 200)
+    }, 3000);
+  },
+
+  isValid($root) {
+    const {number, pin} = this.el;
+    const $numInput = $root.find(number);
+    const $pinInput = $root.find(pin);
+    const numField = String($numInput.val() || '').replace(/\D/g, '');
+    const pinField = String($pinInput.val() || '').replace(/\D/g, '');
+    let valid = true;
+
+    if (numField.length !== 16) {
+      this.showError($numInput, this.messages.numberMessage);
+      valid = false;
+    }
+
+    if (pinField.length !== 8) {
+      this.showError($pinInput, this.messages.pinMessage);
+      valid = false;
+    }
+
+    return valid;
+  },
+
+  handleFormSubmit(e) {
+    const { number, block } = this.el;
+    e.preventDefault();
+    const $root = $(e.currentTarget).closest(block);
+
+    const $num = $root.find(number);
+    $num.val(formatGc16($num.val()));
+
+    if (!this.isValid($root)) return;
+
+    this.lastChipData = buildChipData($root, number);
+    this.resetForm($root);
+    this.showSubmitSpinner($root);
+  },
+
+  updateHintVisibility($root, summaryData) {
+    const {
+      chipList,
+      giftcardRow,
+      hint,
+      panel,
+      toggle,
+      iconInfo,
+      expandedAttr,
+      summaryHint,
+      chip,
+      block,
+      body
+    } = this.el;
+    const $row = $root.closest(giftcardRow);
+    const $giftcard = $row.find(block).first();
+    const count = $row.find(`${chipList} ${chip}`).length;
+    const limit= this.maxChips || 3;
+
+    this.toggleAltPayments($giftcard, count === 0);
+
+    const $summary = this.ensureSummaryContainer($giftcard);
+
+    if (count === 0) {
+      $summary.hide();
+      $giftcard.show();
+      this.resetForm($giftcard);
+      $giftcard.find(panel).prop('hidden', true);
+      $giftcard.find(toggle).attr(expandedAttr, 'false').show();
+      $giftcard.find(hint).show();
+      this.updateCtaButton($giftcard);
+      return;
+    }
+
+    $summary.show();
+    $giftcard.hide();
+    $giftcard.find(hint).hide();
+
+    const ctx= buildHintContext(count, limit);
+    const html = giftCardsHint(ctx);
+    const $old = $summary.find(summaryHint).first();
+    const $new = $(html);
+
+    if ($old.length) {
+      $old.replaceWith($new);
+    } else {
+      $summary.append($new);
+    }
+
+    const shouldHideHint = summaryData ? this.isZeroAmount(summaryData.total) : false;
+    $new.toggle(!shouldHideHint);
+
+
+    if ($.fn.tooltip) {
+      $new.find(iconInfo).tooltip({ container: body });
+    }
+  },
+
+  renderChipHTML({ id, last5, currency, amount }) {
+    return giftCardChip({ id, last5, currency, amount });
+  },
+
+  toggleAltPayments($root, show) {
+    const {
+      paymentForm,
+      billieField,
+      clearpayField,
+      appleField,
+      googleField,
+      paypalField,
+      checkoutContainer,
+      formRow,
+    } = this.el;
+
+    const $paymentField = $root.closest(checkoutContainer).find(paymentForm);
+
+    const paymentSelectors = [
+      billieField,
+      clearpayField,
+      appleField,
+      googleField,
+      paypalField,
+    ];
+
+    paymentSelectors.forEach((sel) => {
+      const $row = $paymentField.find(sel).closest(formRow);
+      if ($row.length) {
+        $row[show ? 'show' : 'hide']();
+      }
+    });
+  },
+
+  handleAddAnotherClick(e) {
+    e.preventDefault();
+    const { giftcardRow, chipList, chip, block, number, summaryHint } = this.el;
+
+    const $row = $(e.currentTarget).closest(giftcardRow);
+    const count = $row.find(`${chipList} ${chip}`).length;
+    if (count >= this.maxChips) return;
+
+    const $giftcard = $row.find(block).first();
+    this.resetForm($giftcard);
+    this.open($giftcard);
+
+    $row.find(summaryHint).hide();
+
+    setTimeout(() => {
+      $giftcard.find(number).trigger('focus');
+    }, 0);
+  },
+
+  handleChipCloseClick(e) {
+    e.preventDefault();
+    const {
+      chip, giftcardRow, block,
+      giftcardChipClose, chipListLoader
+    } = this.el;
+
+    const $clickedChip = $(e.currentTarget).closest(chip);
+    const $row= $clickedChip.closest(giftcardRow);
+    const $giftcard    = $row.find(block).first();
+    const $summary = this.ensureSummaryContainer($giftcard);
+    const $listLoader = $summary.find(chipListLoader);
+
+    showLoader($listLoader);
+    $row.find(giftcardChipClose)
+      .css('pointer-events', 'none')
+      .attr('aria-disabled', 'true');
+
+    setTimeout(() => {
+      $clickedChip.remove();
+      hideLoader($listLoader);
+      $row.find(giftcardChipClose)
+        .css('pointer-events', '')
+        .removeAttr('aria-disabled');
+
+      this.updateHintVisibility($giftcard);
+    }, 1000);
+  },
+
+  getEqualMapForGiftCardUpdate(data) {
+    return buildSummaryEqualMap(data);
+  },
+
+  ensureSummaryContainer($root) {
+    const {
+      chipList, summary, giftcardRow, loaderChip
+    } = this.el;
+    const $row = $root.closest(giftcardRow);
+    let $summary = $row.find(summary).first();
+
+    if (!$summary.length) {
+      $summary = $(`
+      <div class="giftcard-summary" style="display:none">
+        <div class="giftcard-chip-list"></div>
+        <p class="giftcard-summary__hint"></p>
+      </div>
+    `);
+      $row.append($summary);
+    }
+
+    const $list = $summary.find(chipList);
+    if (!$list.children(loaderChip).length) {
+      const html = renderLoader({ hidden: true });
+      $list.append(html);
+    }
+
+    return $summary;
+  },
+
+  updateCtaButton($scope, summaryData) {
+    const { chip, ctaSelector, btnDetails, btnText, giftcardRow } = this.el;
+    const hasChips = $scope.closest(giftcardRow).find(chip).length > 0;
+    const $cta = $(ctaSelector).closest(btnDetails);
+
+    if (!$cta.length) return;
+
+    const forceGiftcard = summaryData ? this.isZeroAmount(summaryData.total) : false;
+    const useGiftcard = forceGiftcard || hasChips;
+    $cta.find(btnText).text(useGiftcard ? this.messages.ctaGiftcardText : this.messages.ctaDefaultText);
+    $cta.attr('data-mode', useGiftcard ? 'giftcards' : 'card');
+  },
+
+  isZeroAmount(val) {
+    const num = Number(String(val ?? '').replace(/[^\d.]/g, ''));
+    return Number.isFinite(num) && num === 0;
+  },
+
+  toggleBillingDescrForZero($scope, summaryData) {
+    const $container = $scope.closest(this.el.checkoutContainer);
+    const $descr = $container.find(this.el.checkoutPaymentFields);
+    if (!$descr.length) return;
+
+    const shouldHide = summaryData ? this.isZeroAmount(summaryData.total) : false;
+    $descr[shouldHide ? 'hide' : 'show']();
+  },
+
+  getPageLoader() {
+    const $pageLoader = $(this.el.pageLoader);
+    if (!$pageLoader.parent().is('body')) $pageLoader.appendTo('body');
+    return $pageLoader;
+  },
+
+  showPageLoader() {
+    const $pageLoader = this.getPageLoader();
+    showLoader($pageLoader);
+  },
+
+
+  bindIframePaypageLoader() {
+    const { iframe, payBtnSelector } = this.el;
+    const self = this;
+    $(iframe).off('load.giftcard').on('load.giftcard', (ev) => {
+      const iframeEl = ev.currentTarget;
+
+      let doc;
+      try {
+        doc = iframeEl.contentDocument || iframeEl.contentWindow?.document;
+      } catch (e) {
+        return;
+      }
+      if (!doc) return;
+
+      const $doc = $(doc);
+      $doc.off('.giftcard');
+
+      $doc
+        .on('click.giftcard', payBtnSelector, () => self.showPageLoader())
+        .on('submit.giftcard', 'form', () => self.showPageLoader());
+    });
+  },
+
+  bindCtaGiftcardLoader() {
+    const self = this;
+    $(document).on('click.giftcard', this.el.btnEnterDetails, function () {
+      if ($(this).attr('data-mode') === 'giftcards') {
+        self.showPageLoader();
+      }
+    });
+  },
+
+  bindEvents() {
+    const { number, pin, toggle, closeBtn, giftcardBtn, jsGiftcardAdd, giftcardChipClose } = this.el;
+
+    $(document).off('.giftcard');
+
+    $(document)
+      .on('input.giftcard', number, this.handleNumberInput.bind(this))
+      .on('keypress.giftcard', number, this.handleNumberKeypress.bind(this))
+      .on('blur.giftcard', number, this.handleNumberBlur.bind(this));
+
+    $(document)
+      .on('input.giftcard', pin, this.handlePinInput.bind(this))
+      .on('keypress.giftcard', pin, this.handlePinKeypress.bind(this))
+      .on('blur.giftcard', pin, this.handlePinBlur.bind(this));
+
+    $(document)
+      .on('click.giftcard', toggle, this.handleToggleClick.bind(this))
+      .on('click.giftcard', closeBtn, this.handleCloseClick.bind(this))
+      .on('click.giftcard', giftcardBtn, this.handleFormSubmit.bind(this))
+      .on('click.giftcard', jsGiftcardAdd, this.handleAddAnotherClick.bind(this))
+      .on('click.giftcard', giftcardChipClose, this.handleChipCloseClick.bind(this))
+
+    this.bindIframePaypageLoader();
+    this.bindCtaGiftcardLoader();
+  },
+
+init() {
+    const { field, pin,  $blocks } = this.el;
+    this.bindEvents();
+    $blocks.each((index, block) => {
+      const $pinField = $(block).find(pin).closest(field);
+      if ($pinField.length) {
+        initializeInputToggle($pinField);
+      }
+    });
+  }
+};
+
+$(function () {
+  Wick.GiftCard.init();
+});

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/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 } : {}),
+  }));
+}