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

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

@@ -1,7 +1,34 @@
-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";
+import {initializeInputToggle} from "../utils/show-hide-input";
+import {updateOrderSummary} from './order-summary';
+import {hideLoader, showLoader, appendLoader} from "../utils/loader";
+import {
+  ADD_GIFT_CARD,
+  buildHintContext,
+  buildSummaryEqualMap,
+  formatGc16,
+  isZeroAmount,
+  linkifyClickHere,
+  MESSAGE_BY_CODE,
+  OK_CODE,
+  PAY_WITH_GIFT_CARD,
+  payWithGiftCard,
+  REMOVE_GIFT_CARD,
+  removeGiftCard,
+  verifyGiftCard,
+  ZERO_BALANCE_MESSAGE,
+  PAY_MESSAGE_BY_CODE
+} from "../utils/gift-cards-utils";
+
+import { clearErrorText, validateExactDigits } from "../utils/validation";
+import {
+  createGcNumberInputHandler,
+  digitsOnlyKeypress,
+  handleGcNumberBlur,
+  handleGcPinInput,
+  handleGcPinKeypress,
+  handleGcPinBlur,
+} from '../utils/input-handling';
+
 const Handlebars = require('hbsfy/runtime');
 
 Handlebars.registerPartial('info-icon', require("../../../components/info-icon.hbs"));
@@ -9,11 +36,15 @@ 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");
+const giftcardSummary = require("../../../components/giftcard-summary.hbs");
+const notificationTpl = require("../../../elements/notifications.hbs");
 
 var Wick = window.Wick || {};
 
 Wick.GiftCard = {
+  ADD_GIFT_CARD,
+  REMOVE_GIFT_CARD,
+  PAY_WITH_GIFT_CARD,
   el: {
     $blocks: $('.giftcard'),
     block: '.giftcard',
@@ -30,15 +61,16 @@ Wick.GiftCard = {
     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',
+    klarnaField: '.form-row__field.form-row__field-klarna',
     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',
+    cardField: '.form-row__field.form-row__card-payment',
     summaryHint: '.giftcard-summary__hint',
     chipList: '.giftcard-chip-list',
     summary: '.giftcard-summary',
@@ -63,14 +95,23 @@ Wick.GiftCard = {
     body: 'body',
     loaderChip: '.loader-wrapper',
     chipListLoader: '.giftcard-chip-list > .loader-wrapper',
-    ctaSelector: '.billing-address .btn-enter-details .btn__text',
-    btnDetails: '.btn-enter-details',
+    notification: '.giftcard-inline .notification',
+    giftCardInline: '.giftcard-inline',
+    notificationRoot: '.notification',
+    inlineHeader: '.giftcard-inline__header',
+    ctaSelector: '.btn-enter-details',
+    btnDetails: 'button',
     btnText: '.btn__text',
-    pageLoader: '.loader-wrapper.page-loader',
-    btnEnterDetails: '.billing-address .btn-enter-details',
+    btnEnterDetails: '.btn-enter-details',
     checkoutPaymentFields: '.billing-address .checkout-payment-details__descr',
-    iframe: '#hopIframe',
-    payBtnSelector: '#btnSubmit,input[type="submit"].submit-PayNow,.submitButton.btn.primary.submit-PayNow',
+    pageLoader: '.loader-wrapper.page-loader',
+    cardRadio: '#checkout-payment-details-card',
+    billieInfo: '.checkout-payment-details__billie',
+    klarnaInfo:  '.checkout-payment-details__klarna',
+    billingAddress: '.billing-address',
+    altPaymentRowsAttr: '[data-apple],[data-google],[data-paypal],[data-klarna],[data-billie],[data-clearpay],[data-existing-card]',
+    hiddenCard: 'checkout-payment-details__card-details_hidden',
+    cardDetails: '.checkout-payment-details__card-details',
   },
 
   messages: {
@@ -81,29 +122,11 @@ Wick.GiftCard = {
   },
 
   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();
-  },
+  pendingServerGiftCards: null,
+  altPaymentInfosLocked: false,
+  altPaymentPanelsLocked: false,
+  summaryTotal: null,
 
   resetPinToggle($root) {
     const {
@@ -148,15 +171,17 @@ Wick.GiftCard = {
 
     $num.val('');
     $pinInput.val('');
-    this.clearError($num);
-    this.clearError($pinInput);
+    clearErrorText($num, this.el.field, this.el.errorText, this.el.fieldError, this.el.ariaInvalidAttr);
+    clearErrorText($pinInput, this.el.field, this.el.errorText, this.el.fieldError, this.el.ariaInvalidAttr);
     $root.find(note).remove();
 
+    this.hideBanner($root);
     this.resetPinToggle($root);
   },
 
   open($root) {
     const { toggle, panel, hint, pin, expandedAttr, passwordToggleEvent } = this.el;
+    this.hideBanner($root);
     $root.show();
 
     $root.find(panel).prop('hidden', false);
@@ -183,66 +208,11 @@ Wick.GiftCard = {
   },
 
   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);
-    }
+    const { panel, toggle, hint, expandedAttr } = this.el;
+    $root.find(panel).prop('hidden', true);
+    $root.find(toggle).attr(expandedAttr, 'false').show().trigger('focus');
+    $root.find(hint).show();
+    this.showSuccess($root);
   },
 
   handleToggleClick(e) {
@@ -258,7 +228,7 @@ Wick.GiftCard = {
   },
 
   finalizeSuccess($root, $success) {
-    let { panel, toggle, hint, expandedAttr, chipList } = this.el;
+    let { panel, toggle, hint, expandedAttr } = this.el;
 
     if ($success && $success.length) {
       $success.attr('hidden', 'hidden').removeClass('fade show').off('transitionend');
@@ -269,28 +239,15 @@ Wick.GiftCard = {
     $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);
+    if (this.pendingServerGiftCards) {
+      this.renderGiftCardsFromList($root, this.pendingServerGiftCards);
+      this.pendingServerGiftCards = null;
     }
 
-    const data = Wick.CheckoutData.successGiftCardData;
-    updateOrderSummary(
-      data,
-      this.getEqualMapForGiftCardUpdate(data),
-      true,
-    );
-
-    this.toggleBillingDescrForZero($root, data);
-    this.updateCtaButton($root, data);
-    this.updateHintVisibility($root, data);
+    this.updateHintVisibility($root);
+    this.successTimer = null;
   },
 
-
   showSuccess($root) {
     const { success} = this.el;
 
@@ -314,62 +271,126 @@ Wick.GiftCard = {
     }, 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;
+  handleFormSubmit(e) {
+    const { number, block, giftcardRow, loaderChip } = this.el;
+    e.preventDefault();
+
+    const $root = $(e.currentTarget).closest(block);
+    this.hideBanner($root);
 
-    if (numField.length !== 16) {
-      this.showError($numInput, this.messages.numberMessage);
-      valid = false;
+    const $num = $root.find(number);
+    $num.val(formatGc16($num.val()));
+
+    const $numInput = $root.find(this.el.number);
+    const $pinInput = $root.find(this.el.pin);
+
+    const numberBlurOpts = {
+      fieldSelector: this.el.field,
+      errorTextSelector: this.el.errorText,
+      errorClass: this.el.fieldError,
+      ariaInvalidAttr: this.el.ariaInvalidAttr,
+      numberMessage: this.messages.numberMessage,
+    };
+
+    const pinBlurOpts = {
+      fieldSelector: this.el.field,
+      errorTextSelector: this.el.errorText,
+      errorClass: this.el.fieldError,
+      ariaInvalidAttr: this.el.ariaInvalidAttr,
+      pinMessage: this.messages.pinMessage,
+    };
+
+    const okNumber = validateExactDigits($numInput, 16, this.messages.numberMessage, this.el);
+    const okPin = validateExactDigits($pinInput,  8, this.messages.pinMessage,    this.el);
+
+    if (!(okNumber && okPin)) {
+      handleGcNumberBlur({ currentTarget: $numInput[0] }, numberBlurOpts);
+      handleGcPinBlur({ currentTarget: $pinInput[0] }, pinBlurOpts);
+      (!okNumber ? $numInput : $pinInput).trigger('focus');
+      return;
     }
 
-    if (pinField.length !== 8) {
-      this.showError($pinInput, this.messages.pinMessage);
-      valid = false;
+    const giftCardNumber = this.getNumberValue($root);
+    const pin = this.getPinValue($root);
+    const $row = $root.closest(giftcardRow);
+
+    let $loader = $row.children(loaderChip);
+
+    if (!$loader.length) {
+      appendLoader({ wrapper: $row });
+      $loader = $row.children(loaderChip).last();
     }
 
-    return valid;
+    verifyGiftCard($loader, giftCardNumber, pin)
+      .then((res) => this.handleVerifyResponse($root, res))
+      .catch((err) => {
+        const code = err && typeof err.code === 'number' ? err.code : undefined;
+        const msg = MESSAGE_BY_CODE[code] || MESSAGE_BY_CODE[-1];
+        this.showBannerError($root, msg);
+      });
   },
 
-  handleFormSubmit(e) {
-    const { number, block } = this.el;
-    e.preventDefault();
-    const $root = $(e.currentTarget).closest(block);
+  handleVerifyResponse($root, res) {
+    if (res && res.code === OK_CODE) {
+      if (!Array.isArray(res.giftCards)) {
+        this.showBannerError($root, MESSAGE_BY_CODE[-1]);
+        return;
+      }
+      if (Number(res.giftCardTotal) === 0) {
+        this.showBannerError($root, ZERO_BALANCE_MESSAGE);
+        return;
+      }
 
-    const $num = $root.find(number);
-    $num.val(formatGc16($num.val()));
+      this.pendingServerGiftCards = res.giftCards.slice();
 
-    if (!this.isValid($root)) return;
+      if (res.orderTotal != null || res.giftCardTotal != null) {
+        const data = { total: res.orderTotal, giftCardApplied: res.giftCardTotal };
+        updateOrderSummary(data, buildSummaryEqualMap(data), true);
+        this.updateCtaButton($root, { total: res.orderTotal });
+        this.toggleBillingDescrForZero($root, { total: res.orderTotal });
+        this.summaryTotal = res.orderTotal;
+      }
 
-    this.lastChipData = buildChipData($root, number);
-    this.resetForm($root);
-    this.showSubmitSpinner($root);
+      this.resetForm($root);
+      this.showSubmitSpinner($root);
+      return;
+    }
+
+    const msg = (res && MESSAGE_BY_CODE[res.code]) || MESSAGE_BY_CODE[-1];
+    this.showBannerError($root, msg);
   },
 
-  updateHintVisibility($root, summaryData) {
+  updateHintVisibility($root) {
     const {
-      chipList,
-      giftcardRow,
-      hint,
-      panel,
-      toggle,
-      iconInfo,
-      expandedAttr,
-      summaryHint,
-      chip,
-      block,
-      body
+      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;
+    const limit = this.maxChips || 3;
+
+    const zeroTotal = this.summaryTotal != null ? isZeroAmount(this.summaryTotal) : false;
 
     this.toggleAltPayments($giftcard, count === 0);
+    this.toggleAltPaymentInfos($giftcard, count === 0);
+
+    if (count > 0) {
+      if (!this.altPaymentPanelsLocked) {
+        this.showOnlyBillingAddress($giftcard);
+        this.altPaymentPanelsLocked = true;
+      } else {
+        this.showOnlyBillingAddress($giftcard);
+      }
+    } else {
+      if (!this.altPaymentPanelsLocked) {
+        this.toggleAltPayments($giftcard, true);
+        this.toggleAltPaymentInfos($giftcard, true);
+      } else {
+        this.showOnlyBillingAddress($giftcard);
+      }
+    }
 
     const $summary = this.ensureSummaryContainer($giftcard);
 
@@ -379,55 +400,79 @@ Wick.GiftCard = {
       this.resetForm($giftcard);
       $giftcard.find(panel).prop('hidden', true);
       $giftcard.find(toggle).attr(expandedAttr, 'false').show();
-      $giftcard.find(hint).show();
-      this.updateCtaButton($giftcard);
+      $giftcard.find(hint)[zeroTotal ? 'hide' : 'show']();
+      this.updateCtaButton($giftcard, { total: this.summaryTotal });
       return;
     }
 
+    this.setBillingLabelToCard($giftcard);
     $summary.show();
     $giftcard.hide();
     $giftcard.find(hint).hide();
 
-    const ctx= buildHintContext(count, limit);
+    const ctx = buildHintContext(count, limit, zeroTotal);
     const html = giftCardsHint(ctx);
     const $old = $summary.find(summaryHint).first();
     const $new = $(html);
 
-    if ($old.length) {
-      $old.replaceWith($new);
-    } else {
-      $summary.append($new);
-    }
+    if ($old.length) $old.replaceWith($new);
+    else $summary.append($new);
 
-    const shouldHideHint = summaryData ? this.isZeroAmount(summaryData.total) : false;
-    $new.toggle(!shouldHideHint);
 
+    if (zeroTotal) {
+      $summary.find(summaryHint).hide();
+    }
+
+    this.toggleCardDetailsForTotal($giftcard);
 
     if ($.fn.tooltip) {
-      $new.find(iconInfo).tooltip({ container: body });
+      $summary.find(summaryHint).find(iconInfo).tooltip({ container: body });
     }
   },
 
-  renderChipHTML({ id, last5, currency, amount }) {
-    return giftCardChip({ id, last5, currency, amount });
+  renderChipHTML({ id, maskedNumber, currency, amount }) {
+    return giftCardChip({ id, maskedNumber, currency, amount });
+  },
+
+  toggleAltPaymentInfos($root, show) {
+    const { checkoutContainer, billieInfo, klarnaInfo } = this.el;
+    const $container = $root.closest(checkoutContainer);
+
+    if (this.altPaymentInfosLocked) {
+      show = false;
+    }
+
+    [$container.find(billieInfo), $container.find(klarnaInfo)].forEach(($panel) => {
+      if ($panel && $panel.length) {
+        $panel[show ? 'show' : 'hide']();
+      }
+    });
+
+    if (!show) this.altPaymentInfosLocked = true;
   },
 
   toggleAltPayments($root, show) {
     const {
       paymentForm,
       billieField,
+      klarnaField,
       clearpayField,
       appleField,
       googleField,
       paypalField,
       checkoutContainer,
       formRow,
+      cardRadio,
+      cardField,
     } = this.el;
 
+    const isTotalZero = this.summaryTotal != null ? isZeroAmount(this.summaryTotal) : false;
+
     const $paymentField = $root.closest(checkoutContainer).find(paymentForm);
 
     const paymentSelectors = [
       billieField,
+      klarnaField,
       clearpayField,
       appleField,
       googleField,
@@ -440,6 +485,19 @@ Wick.GiftCard = {
         $row[show ? 'show' : 'hide']();
       }
     });
+
+    const $cardRow = $paymentField.find(cardField).closest(formRow);
+    if ($cardRow.length) {
+      $cardRow[isTotalZero ? 'hide' : 'show']();
+    }
+
+    if (!show && !isTotalZero) {
+      let $radio = $root.closest(checkoutContainer).find(cardRadio);
+      if (!$radio.length) $radio = $(cardRadio);
+      if ($radio.length) {
+        $radio.prop('checked', true);
+      }
+    }
   },
 
   handleAddAnotherClick(e) {
@@ -464,78 +522,112 @@ Wick.GiftCard = {
   handleChipCloseClick(e) {
     e.preventDefault();
     const {
-      chip, giftcardRow, block,
-      giftcardChipClose, chipListLoader
+      chip,
+      giftcardRow,
+      block,
+      giftcardChipClose,
+      chipList,
+      loaderChip,
     } = this.el;
 
     const $clickedChip = $(e.currentTarget).closest(chip);
-    const $row= $clickedChip.closest(giftcardRow);
-    const $giftcard    = $row.find(block).first();
+    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');
+    const $chips = $summary.find(`${chipList} ${chip}`);
+    const index = $chips.index($clickedChip);
+    if (index < 0) return;
 
-    setTimeout(() => {
-      $clickedChip.remove();
-      hideLoader($listLoader);
-      $row.find(giftcardChipClose)
-        .css('pointer-events', '')
-        .removeAttr('aria-disabled');
+    let $loader = $row.children(loaderChip);
+    if (!$loader.length) {
+      appendLoader({ wrapper: $row });
+      $loader = $row.children(loaderChip).last();
+    }
 
-      this.updateHintVisibility($giftcard);
-    }, 1000);
-  },
+    $row
+        .find(giftcardChipClose)
+        .css('pointer-events', 'none')
+        .attr('aria-disabled', 'true');
+
+    removeGiftCard($loader, index)
+      .then((res) => this.handleRemoveResponse($giftcard, res))
+      .catch((err) => {
+        const code = err && typeof err.code === 'number' ? err.code : undefined;
+        const msg = MESSAGE_BY_CODE[code] || MESSAGE_BY_CODE[-1];
+        this.showBannerError($giftcard, msg);
+      })
+      .finally(() => {
+        hideLoader($loader);
+        $row.find(giftcardChipClose).css('pointer-events', '').removeAttr('aria-disabled');
+      });
+  },
+
+  handleRemoveResponse($giftcard, res) {
+    if (res && res.code === OK_CODE) {
+      const giftCardsList = Array.isArray(res.giftCards) ? res.giftCards : [];
+      const data = { total: res.orderTotal, giftCardApplied: res.giftCardTotal };
+      this.summaryTotal = res.orderTotal;
+
+      this.renderGiftCardsFromList($giftcard, giftCardsList, data);
+
+      if (res.orderTotal != null || res.giftCardTotal != null) {
+        updateOrderSummary(data, buildSummaryEqualMap(data), true);
+      }
+      this.updateCtaButton && this.updateCtaButton($giftcard, { total: res.orderTotal });
+      this.toggleBillingDescrForZero && this.toggleBillingDescrForZero($giftcard, { total: res.orderTotal });
+      return;
+    }
 
-  getEqualMapForGiftCardUpdate(data) {
-    return buildSummaryEqualMap(data);
+    const msg = (res && MESSAGE_BY_CODE[res.code]) || MESSAGE_BY_CODE[-1];
+    this.showBannerError($giftcard, msg);
   },
 
   ensureSummaryContainer($root) {
-    const {
-      chipList, summary, giftcardRow, loaderChip
-    } = this.el;
+    const { summary, giftcardRow } = 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>
-    `);
+      $summary = $(giftcardSummary({}));
       $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);
+  getPageLoader() {
+    const $pl = $(this.el.pageLoader);
+    if (!$pl.parent().is('body')) $pl.appendTo('body');
+    return $pl;
+  },
 
+  showPageLoader() {
+    const $pl = this.getPageLoader();
+    showLoader($pl);
+  },
+
+  updateCtaButton($scope, summaryData) {
+    const { ctaSelector, btnDetails, btnText, checkoutContainer } = this.el;
+    let $cta = $(ctaSelector);
+    if (!$cta.length) {
+      $cta = $scope.closest(checkoutContainer).find(ctaSelector);
+    }
     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');
-  },
+    const $wrap = $cta.closest(btnDetails).length ? $cta.closest(btnDetails) : $cta;
+    const $text = $wrap.find(btnText).first().length ? $wrap.find(btnText).first() : $wrap;
+    const totalLike = summaryData?.total;
+    const useGiftcard = isZeroAmount(totalLike);
 
-  isZeroAmount(val) {
-    const num = Number(String(val ?? '').replace(/[^\d.]/g, ''));
-    return Number.isFinite(num) && num === 0;
+    $text.text(useGiftcard ? this.messages.ctaGiftcardText : this.messages.ctaDefaultText);
+    $wrap.attr('data-mode', useGiftcard ? 'giftcards' : 'card');
+
+    if (useGiftcard) {
+      $wrap.attr('type', 'button').removeAttr('form');
+    } else {
+      $wrap.attr('type', 'submit').attr('form', 'hopPaymentAddressPostForm');
+    }
   },
 
   toggleBillingDescrForZero($scope, summaryData) {
@@ -543,52 +635,161 @@ Wick.GiftCard = {
     const $descr = $container.find(this.el.checkoutPaymentFields);
     if (!$descr.length) return;
 
-    const shouldHide = summaryData ? this.isZeroAmount(summaryData.total) : false;
+    const shouldHide = summaryData ? isZeroAmount(summaryData.total) : false;
     $descr[shouldHide ? 'hide' : 'show']();
   },
 
-  getPageLoader() {
-    const $pageLoader = $(this.el.pageLoader);
-    if (!$pageLoader.parent().is('body')) $pageLoader.appendTo('body');
-    return $pageLoader;
+  getNumberValue($root) {
+    const { number } = this.el;
+    return String($root.find(number).val() || '').replace(/\D/g, '');
   },
 
-  showPageLoader() {
-    const $pageLoader = this.getPageLoader();
-    showLoader($pageLoader);
+  getPinValue($root) {
+    const { pin } = this.el;
+    return String($root.find(pin).val() || '').replace(/\D/g, '');
   },
 
-
-  bindIframePaypageLoader() {
-    const { iframe, payBtnSelector } = this.el;
+  bindGiftcardCtaHandler() {
     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;
+    $(document).off('click.giftcard', this.el.btnEnterDetails);
+    $(document).on('click.giftcard', this.el.btnEnterDetails, function (e) {
+      const $btn = $(this);
+      const mode = $btn.attr('data-mode');
+
+      if (mode !== 'giftcards') return;
+
+      e.preventDefault();
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+
+      const $scope = $btn.closest(self.el.checkoutContainer).find(self.el.block).first();
+      const $root  = $scope.length ? $scope : $(self.el.block).first();
+
+      self.showPageLoader();
+
+      payWithGiftCard()
+        .then(({ url }) => {
+          if (typeof url === 'string' && url) {
+            window.location.href = url;
+          }
+        })
+        .catch((error) => {
+          if (Array.isArray(error?.giftCards)) {
+            self.renderGiftCardsFromList($root, error.giftCards);
+          }
+
+          const numberCode = Number(error?.errorCode);
+
+          if (Number.isFinite(numberCode) && PAY_MESSAGE_BY_CODE[numberCode]) {
+            Wick.Notification.show({
+              text: linkifyClickHere(PAY_MESSAGE_BY_CODE[numberCode]),
+              container: '.globalMessages .container',
+              type: 'error',
+            });
+          }
+        })
+        .finally(() => {
+          const $pl = self.getPageLoader();
+          hideLoader($pl);
+        });
+    });
+  },
 
-      const $doc = $(doc);
-      $doc.off('.giftcard');
+  showBannerError($root, message, title = '') {
+    const { notificationRoot, giftCardInline, inlineHeader } = this.el;
+    const $inline = $root.find(giftCardInline);
 
-      $doc
-        .on('click.giftcard', payBtnSelector, () => self.showPageLoader())
-        .on('submit.giftcard', 'form', () => self.showPageLoader());
+    $inline.find(notificationRoot).remove();
+
+    const html = notificationTpl({
+      classModifier: 'notification_error',
+      error: true,
+      withCloseBtn: true,
+      title: title || undefined,
+      text: linkifyClickHere(message)
     });
+
+    $inline.find(inlineHeader).after(html);
   },
 
-  bindCtaGiftcardLoader() {
-    const self = this;
-    $(document).on('click.giftcard', this.el.btnEnterDetails, function () {
-      if ($(this).attr('data-mode') === 'giftcards') {
-        self.showPageLoader();
-      }
-    });
+
+  hideBanner($root) {
+    const { notification } = this.el;
+    $root.find(notification).remove();
+  },
+
+  mapGiftToChipData($root, gift) {
+    const $giftcard = $root.closest(this.el.block);
+    const currency = $giftcard.data('currency') || '£';
+    return {
+      id: gift.id,
+      maskedNumber: String(gift.maskedNumber || ''),
+      currency,
+      amount: Number(gift.amountToRedeem || 0),
+    };
+  },
+
+  renderGiftCardsFromList($root, giftCards, summaryData) {
+    const { chipList, loaderChip, chip } = this.el;
+    const $summary = this.ensureSummaryContainer($root);
+    const $list = $summary.find(chipList);
+    $list.children(`${chip}:not(${loaderChip})`).remove();
+
+    const html = (giftCards || [])
+      .map((g) => this.renderChipHTML(this.mapGiftToChipData($root, g)))
+      .join('');
+
+    if (html) {
+      $list.append(html);
+      $summary.show();
+    }
+
+    this.updateHintVisibility($root, summaryData);
+
+    if (Array.isArray(giftCards) && giftCards.length > 0) {
+      this.setBillingLabelToCard($root);
+    }
+  },
+
+  toggleCardDetailsForTotal($scope) {
+    const { checkoutContainer, cardDetails, hiddenCard } = this.el;
+    const $container   = $scope.closest(checkoutContainer);
+    const $cardDetails = $container.find(cardDetails);
+    if (!$cardDetails.length) return;
+
+    const zero = this.summaryTotal != null ? isZeroAmount(this.summaryTotal) : false;
+    if (zero) $cardDetails.addClass(hiddenCard);
+  },
+
+  setBillingLabelToCard($scope) {
+    const $container = $scope.closest(this.el.checkoutContainer);
+    const $billing = $container.find(this.el.billingAddress);
+    if (!$billing.length) return;
+
+    const $label = $billing.find('[for="card-name"]');
+    if ($label.length) {
+      $label.text('Name on card');
+    }
+  },
+
+  showOnlyBillingAddress($root) {
+    const { checkoutContainer, billingAddress, altPaymentRowsAttr, hiddenCard } = this.el;
+    const $container = $root.closest(checkoutContainer);
+    $container.find(billingAddress).removeClass(hiddenCard);
+    $container.find(altPaymentRowsAttr).addClass(hiddenCard);
+    this.toggleAltPaymentInfos($root, false);
+  },
+
+  useGlobalError($root, message) {
+    if (window.Wick && Wick.Notification && typeof Wick.Notification.show === 'function') {
+      const text = linkifyClickHere ? linkifyClickHere(message) : String(message || '');
+      Wick.Notification.show({
+        text,
+        container: '.globalMessages .container',
+        type: 'error',
+      });
+    }
   },
 
   bindEvents() {
@@ -596,15 +797,49 @@ Wick.GiftCard = {
 
     $(document).off('.giftcard');
 
+    const handleNumberInput = createGcNumberInputHandler({
+      fieldSelector: this.el.field,
+      fieldErrorClass: this.el.fieldError,
+      errorTextSelector: this.el.errorText,
+      ariaInvalidAttr: this.el.ariaInvalidAttr,
+    });
+
+    const onNumberBlur = (e) =>
+      handleGcNumberBlur(e, {
+        fieldSelector: this.el.field,
+        errorTextSelector: this.el.errorText,
+        errorClass: this.el.fieldError,
+        ariaInvalidAttr: this.el.ariaInvalidAttr,
+        numberMessage: this.messages.numberMessage,
+      });
+
+    const onPinInput = (e) =>
+      handleGcPinInput(e, {
+        fieldSelector: this.el.field,
+        errorTextSelector: this.el.errorText,
+        errorClass: this.el.fieldError,
+        ariaInvalidAttr: this.el.ariaInvalidAttr,
+      });
+
+    const onPinBlur = (e) =>
+      handleGcPinBlur(e, {
+        fieldSelector: this.el.field,
+        errorTextSelector: this.el.errorText,
+        errorClass: this.el.fieldError,
+        ariaInvalidAttr: this.el.ariaInvalidAttr,
+        pinMessage: this.messages.pinMessage,
+      });
+
+
     $(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));
+      .on('input.giftcard', number, handleNumberInput)
+      .on('keypress.giftcard', number, digitsOnlyKeypress)
+      .on('blur.giftcard', number, onNumberBlur);
 
     $(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));
+      .on('input.giftcard', pin, onPinInput)
+      .on('keypress.giftcard', pin, handleGcPinKeypress)
+      .on('blur.giftcard', pin, onPinBlur);
 
     $(document)
       .on('click.giftcard', toggle, this.handleToggleClick.bind(this))
@@ -613,13 +848,25 @@ Wick.GiftCard = {
       .on('click.giftcard', jsGiftcardAdd, this.handleAddAnotherClick.bind(this))
       .on('click.giftcard', giftcardChipClose, this.handleChipCloseClick.bind(this))
 
-    this.bindIframePaypageLoader();
-    this.bindCtaGiftcardLoader();
+    this.bindGiftcardCtaHandler();
   },
 
-init() {
+init(payload = {}) {
     const { field, pin,  $blocks } = this.el;
     this.bindEvents();
+    if ($blocks && $blocks.length) {
+      const $firstBlock = $blocks.first();
+      if (Array.isArray(payload.giftCards) && payload.giftCards.length) {
+        this.renderGiftCardsFromList($firstBlock, payload.giftCards);
+      }
+
+      const code = payload.errorCode;
+
+      if (Number.isFinite(code) && PAY_MESSAGE_BY_CODE[code]) {
+        this.useGlobalError($firstBlock, PAY_MESSAGE_BY_CODE[code]);
+      }
+    }
+
     $blocks.each((index, block) => {
       const $pinField = $(block).find(pin).closest(field);
       if ($pinField.length) {
@@ -628,7 +875,3 @@ init() {
     });
   }
 };
-
-$(function () {
-  Wick.GiftCard.init();
-});