wickes-css2 2.107.0-test.1 → 2.107.0

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

@@ -1,6 +1,6 @@
-import {initializeInputToggle} from "../utils/show-hide-input";
-import {updateOrderSummary} from './order-summary';
-import {hideLoader, showLoader} from "../utils/loader";
+import { initializeInputToggle } from '../utils/show-hide-input';
+import { updateOrderSummary } from './order-summary';
+import { hideLoader, showLoader, appendLoader } from '../utils/loader';
 import {
     ADD_GIFT_CARD,
     buildHintContext,
@@ -43,101 +43,85 @@ 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',
-    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',
-    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',
-    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',
-    notification: '.giftcard-inline .notification',
-    giftCardInline: '.giftcard-inline',
-    notificationRoot: '.notification',
-    inlineHeader: '.giftcard-inline__header',
-    ctaSelector: '.btn-enter-details',
-    btnDetails: 'button',
-    btnText: '.btn__text',
-    btnEnterDetails: '.btn-enter-details',
-    checkoutPaymentFields: '.billing-address .checkout-payment-details__descr',
-    pageLoader: '.loader-wrapper.page-loader',
-    cardRadio: '#checkout-payment-details-card, #_checkout-payment-details-card_card',
-    billieInfo: '.checkout-payment-details__billie',
-    klarnaInfo:  '.checkout-payment-details__klarna',
-    billingAddress: '.billing-address',
-    altPaymentRowsAttr: '[data-apple-pay],[data-google-pay],[data-paypal],[data-klarna],[data-billie],[data-clearpay],[data-existing-card]',
-    hiddenCard: 'checkout-payment-details__card-details_hidden',
-    cardDetails: '.checkout-payment-details__card-details',
-    paymentMethodCheckedSel: 'input[name="payment-method"]:checked',
-    paymentMethodCardValue: 'card',
-    paypageNewCardSel: '[data-new-card]',
-    paypageExistingCardSel: '[data-existing-card]',
-    paypageIframeWrapSel: '.hop-iframe__wrapper',
-    cardValidationErrorRowSel: '.form-row_validation-error',
-    cardValidationErrorRowClass: 'form-row_validation-error',
-    cardValidationErrorTextSel: '.form-row__error',
-    paypageFormSel: '#hopPostForm',
-    paypageIframeSel: '#hopIframe',
-    paypageCardDetailsSel: '.checkout-payment-details__card-details',
-    wrapper: '.giftcard__wrapper',
-  },
-
-  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',
-  },
-
-  collapseTargets: [
-    '.billing-address input, .billing-address select, .billing-address textarea',
-    '.billing-address [data-finder], .billing-address [data-manually]',
-  ].join(','),
+    ADD_GIFT_CARD,
+    REMOVE_GIFT_CARD,
+    PAY_WITH_GIFT_CARD,
+    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',
+        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',
+        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',
+        notification: '.giftcard-inline .notification',
+        giftCardInline: '.giftcard-inline',
+        notificationRoot: '.notification',
+        inlineHeader: '.giftcard-inline__header',
+        ctaSelector: '.btn-enter-details',
+        btnDetails: 'button',
+        btnText: '.btn__text',
+        btnEnterDetails: '.btn-enter-details',
+        checkoutPaymentFields: '.billing-address .checkout-payment-details__descr',
+        pageLoader: '.loader-wrapper.page-loader',
+        cardRadio: '#checkout-payment-details-card, #_checkout-payment-details-card_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: {
+        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,
     successTimer: null,
@@ -179,93 +163,8 @@ Wick.GiftCard = {
         const hasValue = ($pinInput.val() || '').length > 0;
         $toggle.toggle(hasValue);
 
-    $pinInput.trigger(passwordToggleEvent);
-  },
-
-  isPanelOpen($root) {
-    const $panel = $root.find(this.el.panel);
-    return $panel.length ? $panel.prop('hidden') === false : false;
-  },
-
-  openPaypage($container) {
-    const {
-      paypageFormSel,
-      paypageIframeSel,
-      paypageIframeWrapSel,
-      paypageCardDetailsSel,
-      hiddenCard,
-    } = this.el;
-
-    const $cardDetails = $container.find(paypageCardDetailsSel);
-    const $wrap = $container.find(paypageIframeWrapSel);
-
-    $cardDetails.removeClass(hiddenCard).show();
-    $wrap.show();
-
-
-    const $form = $container.find(paypageFormSel);
-
-    const form = $form.get(0);
-    if (!form) return;
-
-    const $oldIframe = $container.find(paypageIframeSel);
-    if ($oldIframe.length) {
-      const old = $oldIframe.get(0);
-      const newIframe = old.cloneNode(true);
-
-      newIframe.src = old.getAttribute('src') || newIframe.src || '';
-      old.parentNode.replaceChild(newIframe, old);
-
-      const iframeName = newIframe.getAttribute('name') || newIframe.name;
-      if (iframeName) form.setAttribute('target', iframeName);
-    }
-  },
-
-  getAppliedChipsCount($root) {
-    const { giftcardRow, chipList, chip } = this.el;
-    const $row = $root.closest(giftcardRow);
-    return $row.length ? $row.find(`${chipList} ${chip}`).length : 0;
-  },
-
-  collapseKeepValues($root) {
-    const { toggle, panel, hint, expandedAttr } = this.el;
-
-    $root.find(panel).prop('hidden', true);
-    $root.find(toggle).attr(expandedAttr, 'false').show();
-
-    const zeroTotal = this.summaryTotal != null ? isZeroAmount(this.summaryTotal) : false;
-    $root.find(hint)[zeroTotal ? 'hide' : 'show']();
-  },
-
-  handleCollapseTrigger(e) {
-    const $target = $(e.target);
-
-    const isCheckbox = $target.is('#chb-payment-details-card');
-    const isInBilling = $target.closest('.billing-address').length > 0;
-
-    if (!isCheckbox && !isInBilling) return;
-
-    const $container = $target.closest(this.el.checkoutContainer);
-    if (!$container.length) return;
-
-    const $giftcard = $container.find(this.el.block).first();
-    if (!$giftcard.length) return;
-
-    if (!this.isPanelOpen($giftcard)) return;
-
-    const chipsCount = this.getAppliedChipsCount($giftcard);
-
-    const { panel, toggle, expandedAttr } = this.el;
-
-    if (chipsCount > 0) {
-      this.updateHintVisibility($giftcard);
-      this.collapseGiftcardPanel($container, { hideIfHasChips: true });
-      $giftcard.find(panel).prop('hidden', true).hide();
-      $giftcard.find(toggle).attr(expandedAttr, 'false');
-      return;
-    }
-    this.collapseKeepValues($giftcard);
-  },
+        $pinInput.trigger(passwordToggleEvent);
+    },
 
     resetForm($root) {
         const { number, pin, note } = this.el;
@@ -294,118 +193,77 @@ Wick.GiftCard = {
         this.resetPinToggle($root);
     },
 
-  open($root) {
-    const { toggle, panel, hint, pin, expandedAttr, passwordToggleEvent } = this.el;
-    $root.show();
-
-    $root.find(panel).prop('hidden', false).show();
-    $root.find(toggle).attr(expandedAttr, 'true').hide();
-    $root.find(hint).hide();
-    $root.find(pin).trigger(passwordToggleEvent);
-  },
-
-  close($root) {
-    const { toggle, panel, expandedAttr, giftcardRow, chipList, chip, hint } = this.el;
-    const $toggle = $root.find(toggle);
-    const $panel = $root.find(panel);
-    const $pageLoader = this.getPageLoader();
-
-    showLoader($pageLoader);
-
-    setTimeout(() => {
-      hideLoader($pageLoader);
-
-      $panel.prop('hidden', true);
-      $toggle.attr(expandedAttr, 'false').show().trigger('focus');
-
-      const $row = $root.closest(giftcardRow);
-      const count = $row.find(`${chipList} ${chip}`).length;
-      const zeroTotal = this.summaryTotal != null ? isZeroAmount(this.summaryTotal) : false;
-
-      if (count === 0) {
-        $root.find(hint)[zeroTotal ? 'hide' : 'show']();
-        return;
-      }
-
-      this.updateHintVisibility($root);
-    }, 1000);
-  },
-
-  showSubmitSpinner($root) {
-    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.lockPaymentsForSuccess($root);
-
-    this.showSuccess($root);
-  },
-
-  handleToggleClick(e) {
-    e.preventDefault();
-
-    const $root = $(e.currentTarget).closest(this.el.block);
-    const $container = $root.closest(this.el.checkoutContainer);
+    open($root) {
+        const { toggle, panel, hint, pin, expandedAttr, passwordToggleEvent } = this.el;
+        this.hideBanner($root);
+        $root.show();
 
-    if (
-        $container.length &&
-        this.isCardMethodSelected($container) &&
-        this.isPaypageOpen($container)
-    ) {
-      this.clearPaypageAndCollapse($container);
-    }
+        $root.find(panel).prop('hidden', false);
+        $root.find(toggle).attr(expandedAttr, 'true').hide();
+        $root.find(hint).hide();
+        $root.find(pin).trigger(passwordToggleEvent);
+    },
 
-    this.open($root);
-    this.updateCtaButton($root);
-  },
+    close($root) {
+        const { toggle, panel, loader, expandedAttr } = this.el;
+        const $toggle = $root.find(toggle);
+        const $panel = $root.find(panel);
+        const $loader = $root.find(loader);
 
-  handleCloseClick(e) {
-    e.preventDefault();
-    const $root = $(e.currentTarget).closest(this.el.block);
-    this.resetForm($root);
-    this.close($root);
-  },
+        showLoader($loader);
 
-  finalizeSuccess($root, $success) {
-    if ($success && $success.length) {
-      $success.attr('hidden', 'hidden').removeClass('fade show').off('transitionend');
-    }
+        setTimeout(() => {
+            hideLoader($loader);
 
-    this.resetForm($root);
+            $panel.prop('hidden', true);
+            $toggle.attr(expandedAttr, 'false').show().trigger('focus');
+            this.updateHintVisibility($root);
+        }, 1000);
+    },
 
-    if (Array.isArray(this.pendingServerGiftCards)) {
-      this.renderGiftCardsFromList($root, this.pendingServerGiftCards);
-      this.pendingServerGiftCards = null;
-    } else {
-      this.updateHintVisibility($root);
-    }
+    showSubmitSpinner($root) {
+        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);
+    },
 
-    this.successTimer = null;
-  },
+    handleToggleClick(e) {
+        e.preventDefault();
+        this.open($(e.currentTarget).closest(this.el.$blocks));
+    },
 
-  lockPaymentsForSuccess($root) {
-    const $giftcard = $root.closest(this.el.block);
-    const $container = $giftcard.closest(this.el.checkoutContainer);
+    handleCloseClick(e) {
+        e.preventDefault();
+        const $root = $(e.currentTarget).closest(this.el.$blocks);
+        this.resetForm($root);
+        this.close($root);
+    },
 
-    this.toggleAltPayments($giftcard, false);
-    this.toggleAltPaymentInfos($giftcard, false);
+    finalizeSuccess($root, $success) {
+        let { panel, toggle, hint, expandedAttr } = this.el;
 
-    $container.find(this.el.billingAddress).show();
+        if ($success && $success.length) {
+            $success.attr('hidden', 'hidden').removeClass('fade show').off('transitionend');
+        }
 
-    $container
-        .find(this.el.altPaymentRowsAttr)
-        .closest(this.el.formRow)
-        .hide();
+        this.resetForm($root);
+        $root.find(panel).prop('hidden', true);
+        $root.find(toggle).attr(expandedAttr, 'false').show();
+        $root.find(hint).show();
 
-    this.altPaymentPanelsLocked = true;
-    this.altPaymentInfosLocked = true;
-  },
+        if (this.pendingServerGiftCards) {
+            this.renderGiftCardsFromList($root, this.pendingServerGiftCards);
+            this.pendingServerGiftCards = null;
+        }
 
+        this.updateHintVisibility($root);
+        this.successTimer = null;
+    },
 
-  showSuccess($root) {
-    const { success } = this.el;
+    showSuccess($root) {
+        const { success } = this.el;
 
         if (this.successTimer) {
             clearTimeout(this.successTimer);
@@ -418,19 +276,18 @@ Wick.GiftCard = {
         $success[0] && $success[0].offsetWidth;
         $success.addClass('show');
 
-    this.successTimer = setTimeout(() => {
-      $success.removeClass('show');
+        this.successTimer = setTimeout(() => {
+            $success.removeClass('show');
+            const handler = () => this.finalizeSuccess($root, $success);
 
-      const handler = () => this.finalizeSuccess($root, $success);
-      $success.on('transitionend', handler);
-
-      setTimeout(handler, 200);
-    }, 3000);
-  },
+            $success.on('transitionend', handler);
+            setTimeout(handler, 200);
+        }, 3000);
+    },
 
-  handleFormSubmit(e) {
-    const { number, block } = this.el;
-    e.preventDefault();
+    handleFormSubmit(e) {
+        const { number, block, giftcardRow, loaderChip } = this.el;
+        e.preventDefault();
 
         const $root = $(e.currentTarget).closest(block);
         this.hideBanner($root);
@@ -441,46 +298,50 @@ Wick.GiftCard = {
         const $numInput = $root.find(this.el.number);
         const $pinInput = $root.find(this.el.pin);
 
-    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] }, {
-        fieldSelector: this.el.field,
-        errorTextSelector: this.el.errorText,
-        errorClass: this.el.fieldError,
-        ariaInvalidAttr: this.el.ariaInvalidAttr,
-        numberMessage: this.messages.numberMessage,
-      });
-
-      handleGcPinBlur({ currentTarget: $pinInput[0] }, {
-        fieldSelector: this.el.field,
-        errorTextSelector: this.el.errorText,
-        errorClass: this.el.fieldError,
-        ariaInvalidAttr: this.el.ariaInvalidAttr,
-        pinMessage: this.messages.pinMessage,
-      });
-
-      (!okNumber ? $numInput : $pinInput).trigger('focus');
-      return;
-    }
-
-    const giftCardNumber = this.getNumberValue($root);
-    const pin = this.getPinValue($root);
-
-    const $pageLoader = this.getPageLoader();
-    showLoader($pageLoader);
-
-    verifyGiftCard($pageLoader, giftCardNumber, pin)
-        .then((res) => this.handleVerifyResponse($root, res))
-        .catch((err) => {
-          const msg = this.getErrorMessage(err);
-          this.showBannerError($root, msg);
-        })
-        .finally(() => {
-          hideLoader($pageLoader);
-        });
-  },
+        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;
+        }
+
+        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();
+        }
+
+        verifyGiftCard($loader, giftCardNumber, pin)
+            .then((res) => this.handleVerifyResponse($root, res))
+            .catch((err) => {
+                const msg = this.getErrorMessage(err);
+                this.showBannerError($root, msg);
+            });
+    },
 
     handleVerifyResponse($root, res) {
         if (res && res.code === OK_CODE) {
@@ -489,18 +350,15 @@ Wick.GiftCard = {
                 return;
             }
 
-      let summaryData;
-      if (res.orderTotal != null || res.giftCardTotal != null) {
-        summaryData = { total: res.orderTotal, giftCardApplied: res.giftCardTotal };
+            this.pendingServerGiftCards = res.giftCards.slice();
 
-        updateOrderSummary(summaryData, buildSummaryEqualMap(summaryData), true);
-        this.summaryTotal = res.orderTotal;
-
-        this.toggleBillingDescrForZero($root);
-        this.updateCtaButton($root);
-      }
-
-      this.pendingServerGiftCards = res.giftCards.slice();
+            if (res.orderTotal != null || res.giftCardTotal != null) {
+                const data = { total: res.orderTotal, giftCardApplied: res.giftCardTotal };
+                updateOrderSummary(data, buildSummaryEqualMap(data), true);
+                this.summaryTotal = res.orderTotal;
+                this.toggleBillingDescrForZero($root);
+                this.updateCtaButton($root);
+            }
 
             this.resetForm($root);
             this.showSubmitSpinner($root);
@@ -511,70 +369,72 @@ Wick.GiftCard = {
         this.showBannerError($root, msg);
     },
 
-  updateHintVisibility($root, opts = {}) {
-    const {
-      chipList,
-      giftcardRow,
-      hint,
-      panel,
-      toggle,
-      iconInfo,
-      expandedAttr,
-      summaryHint,
-      chip,
-      block,
-      body,
-      fieldError,
-    } = this.el;
-
-    const { skipResetForm = false } = opts;
-
-    const $giftcard = $root.closest(block).length ? $root.closest(block) : $root;
-    const $summary = this.ensureSummaryContainer($giftcard);
-    const count = $summary.find(`${chipList} ${chip}`).length;
-
-    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) {
-      $summary.hide();
-
-      $giftcard.show();
-
-      if (!skipResetForm) {
-        this.resetForm($giftcard);
-      }
+    updateHintVisibility($root) {
+        const {
+            chipList,
+            giftcardRow,
+            hint,
+            panel,
+            toggle,
+            iconInfo,
+            expandedAttr,
+            summaryHint,
+            chip,
+            block,
+            body,
+        } = this.el;
 
-      $giftcard.find(panel).prop('hidden', true);
-      $giftcard.find(toggle).attr(expandedAttr, 'false').show();
-      $giftcard.find(hint)[zeroTotal ? 'hide' : 'show']();
+        const $row = $root.closest(giftcardRow);
+        const $giftcard = $row.find(block).first();
+        const count = $row.find(`${chipList} ${chip}`).length;
+        const limit = this.maxChips || 3;
 
-      this.updateCtaButton($giftcard);
-      return;
-    }
+        const zeroTotal = this.summaryTotal != null ? isZeroAmount(this.summaryTotal) : false;
 
-    this.setBillingLabelToCard($giftcard);
+        this.toggleAltPayments($giftcard, count === 0);
+        this.toggleAltPaymentInfos($giftcard, count === 0);
 
-    $summary.show();
-    $giftcard.find(hint).hide();
-    const panelOpen = this.isPanelOpen($giftcard);
-    const hasError = $giftcard.find(`.${fieldError}`).length > 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 shouldHideGiftcard = count > 0 && !panelOpen && !hasError;
+        const $summary = this.ensureSummaryContainer($giftcard);
 
-    $giftcard.toggle(!shouldHideGiftcard);
+        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)[zeroTotal ? 'hide' : 'show']();
+            this.updateCtaButton($giftcard);
+            return;
+        }
 
-    const ctx = buildHintContext(count, limit, zeroTotal);
-    const html = giftCardsHint(ctx);
+        this.setBillingLabelToCard($giftcard);
+        $summary.show();
+        $giftcard.hide();
+        $giftcard.find(hint).hide();
 
-    const $old = $summary.find(summaryHint).first();
-    const $new = $(html);
+        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);
 
         if (zeroTotal) {
             $summary.find(summaryHint).hide();
@@ -591,27 +451,19 @@ Wick.GiftCard = {
         return giftCardChip({ id, maskedNumber, currency, amount });
     },
 
-  toggleAltPaymentInfos($root, show) {
-    const {
-      checkoutContainer,
-      billieInfo,
-      klarnaInfo,
-      paymentMethodCheckedSel,
-    } = this.el;
-
-    const $container = $root.closest(checkoutContainer);
+    toggleAltPaymentInfos($root, show) {
+        const { checkoutContainer, billieInfo, klarnaInfo } = this.el;
+        const $container = $root.closest(checkoutContainer);
 
         if (this.altPaymentInfosLocked) {
             show = false;
         }
 
-    const currentMethod = $container.find(paymentMethodCheckedSel).val();
-
-    const showBillie = show && currentMethod === 'billie';
-    const showKlarna = show && currentMethod === 'klarna';
-
-    $container.find(billieInfo)[showBillie ? 'show' : 'hide']();
-    $container.find(klarnaInfo)[showKlarna ? 'show' : 'hide']();
+        [$container.find(billieInfo), $container.find(klarnaInfo)].forEach(($panel) => {
+            if ($panel && $panel.length) {
+                $panel[show ? 'show' : 'hide']();
+            }
+        });
 
         if (!show) this.altPaymentInfosLocked = true;
     },
@@ -678,104 +530,24 @@ Wick.GiftCard = {
         }
     },
 
-  handleAddAnotherClick(e) {
-    e.preventDefault();
-
-    const {
-      giftcardRow,
-      chipList,
-      chip,
-      block,
-      number,
-      pin,
-      summaryHint,
-      checkoutContainer,
-      fieldError,
-      notificationRoot,
-    } = this.el;
-
-    const $row = $(e.currentTarget).closest(giftcardRow);
-
-    const $container = $row.closest(checkoutContainer);
-    if (
-        $container.length &&
-        this.isCardMethodSelected($container) &&
-        this.isPaypageOpen($container)
-    ) {
-      this.clearPaypageAndCollapse($container);
-    }
-
-    const count = $row.find(`${chipList} ${chip}`).length;
-    if (count >= this.maxChips) return;
-
-    const $giftcard = $row.find(block).first();
-
-    const hasDraft =
-        String($giftcard.find(number).val() || '').trim().length > 0 ||
-        String($giftcard.find(pin).val() || '').trim().length > 0;
-
-    const hasFieldError = $giftcard.find(`.${fieldError}`).length > 0;
-    const hasBannerError = $giftcard.find(notificationRoot).length > 0;
-
-    if (!hasDraft && !hasFieldError && !hasBannerError) {
-      this.resetForm($giftcard);
-    }
-
-    this.open($giftcard);
-    $row.find(summaryHint).hide();
-
-    setTimeout(() => {
-      $giftcard.find(number).trigger('focus');
-    }, 0);
-  },
-
-  isCardMethodSelected($container) {
-    const { paymentMethodCheckedSel, paymentMethodCardValue } = this.el;
-
-    const $checked = $container.find(paymentMethodCheckedSel);
-    return $checked.length && $checked.val() === paymentMethodCardValue;
-  },
-
-  isPaypageOpen($container) {
-    const { paypageNewCardSel, paypageIframeWrapSel } = this.el;
-
-    const $newCard = $container.find(paypageNewCardSel);
-    if ($newCard.length) {
-      return $newCard.is(':visible');
-    }
-
-    const $wrap = $container.find(paypageIframeWrapSel);
-    return $wrap.length ? $wrap.is(':visible') : false;
-  },
-
-
-  clearPaypageAndCollapse($container) {
-    const {
-      cardDetails,
-      hiddenCard,
-      paypageNewCardSel,
-      paypageExistingCardSel,
-      paypageIframeWrapSel,
-      cardValidationErrorRowSel,
-      cardValidationErrorRowClass,
-      cardValidationErrorTextSel,
-    } = this.el;
-
-    const $cardDetails = $container.find(cardDetails);
-    if (!$cardDetails.length) return;
-
-    $container.find(paypageNewCardSel).hide();
-    $container.find(paypageExistingCardSel).show();
-
-    $cardDetails.addClass(hiddenCard).hide();
-    $cardDetails.find(paypageIframeWrapSel).hide();
-
-    $cardDetails
-        .find(cardValidationErrorRowSel)
-        .removeClass(cardValidationErrorRowClass)
-        .find(cardValidationErrorTextSel)
-        .remove();
-  },
+    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);
+    },
 
     getErrorMessage(payload) {
         const code =
@@ -786,42 +558,38 @@ Wick.GiftCard = {
         return (code != null && MESSAGE_BY_CODE[code]) || DEFAULT_ERROR_MESSAGE;
     },
 
-  handleChipCloseClick(e) {
-    e.preventDefault();
-
-    const {
-      chip,
-      giftcardRow,
-      block,
-      giftcardChipClose,
-      chipList,
-    } = this.el;
+    handleChipCloseClick(e) {
+        e.preventDefault();
+        const { 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 $summary = this.ensureSummaryContainer($giftcard);
 
-    const $chips = $summary.find(`${chipList} ${chip}`);
-    const index = $chips.index($clickedChip);
-    if (index < 0) return;
+        const $chips = $summary.find(`${chipList} ${chip}`);
+        const index = $chips.index($clickedChip);
+        if (index < 0) return;
+
+        let $loader = $row.children(loaderChip);
+        if (!$loader.length) {
+            appendLoader({ wrapper: $row });
+            $loader = $row.children(loaderChip).last();
+        }
 
         $row.find(giftcardChipClose).css('pointer-events', 'none').attr('aria-disabled', 'true');
 
-    const $pageLoader = this.getPageLoader();
-    showLoader($pageLoader);
-
-    removeGiftCard($pageLoader, index)
-        .then((res) => this.handleRemoveResponse($giftcard, res))
-        .catch((err) => {
-          const msg = this.getErrorMessage(err);
-          this.showBannerError($giftcard, msg);
-        })
-        .finally(() => {
-          hideLoader($pageLoader);
-          $row.find(giftcardChipClose).css('pointer-events', '').removeAttr('aria-disabled');
-        });
-  },
+        removeGiftCard($loader, index)
+            .then((res) => this.handleRemoveResponse($giftcard, res))
+            .catch((err) => {
+                const msg = this.getErrorMessage(err);
+                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) {
@@ -856,16 +624,16 @@ Wick.GiftCard = {
         return $summary;
     },
 
-  getPageLoader() {
-    const $pageLoader = $(this.el.pageLoader);
-    if (!$pageLoader.parent().is('body')) $pageLoader.appendTo('body');
-    return $pageLoader;
-  },
+    getPageLoader() {
+        const $pl = $(this.el.pageLoader);
+        if (!$pl.parent().is('body')) $pl.appendTo('body');
+        return $pl;
+    },
 
-  showPageLoader() {
-    const $pageLoader = this.getPageLoader();
-    showLoader($pageLoader);
-  },
+    showPageLoader() {
+        const $pl = this.getPageLoader();
+        showLoader($pl);
+    },
 
     updateCtaButton($scope) {
         const { ctaSelector, btnDetails, btnText, checkoutContainer } = this.el;
@@ -942,20 +710,20 @@ Wick.GiftCard = {
                         (error.errorCode && PAY_MESSAGE_BY_CODE[error.errorCode]) ||
                         DEFAULT_PAY_ERROR_MESSAGE;
 
-          if (msg) {
-            Wick.Notification.show({
-              text: linkifyClickHere(msg),
-              container: '.globalMessages .container',
-              type: 'error',
-            });
-          }
-        })
-        .finally(() => {
-          const $pageLoader = self.getPageLoader();
-          hideLoader($pageLoader);
+                    if (msg) {
+                        Wick.Notification.show({
+                            text: linkifyClickHere(msg),
+                            container: '.globalMessages .container',
+                            type: 'error',
+                        });
+                    }
+                })
+                .finally(() => {
+                    const $pl = self.getPageLoader();
+                    hideLoader($pl);
+                });
         });
-    });
-  },
+    },
 
     showBannerError($root, message, title = '') {
         const { notificationRoot, giftCardInline, inlineHeader } = this.el;
@@ -971,34 +739,8 @@ Wick.GiftCard = {
             text: linkifyClickHere(message),
         });
 
-    $inline.find(inlineHeader).after(html);
-  },
-
-  clearErrorsOnly($root) {
-    const { number, pin, note, field, errorText, fieldError, ariaInvalidAttr } = this.el;
-
-    const $num = $root.find(number);
-    const $pin = $root.find(pin);
-
-    clearErrorText($num, field, errorText, fieldError, ariaInvalidAttr);
-    clearErrorText($pin, field, errorText, fieldError, ariaInvalidAttr);
-
-    $root.find(note).remove();
-
-    this.hideBanner($root);
-  },
-
-  clearErrorsIfEmptyOnInit($root) {
-    const rawNum = String($root.find(this.el.number).val() || '');
-    const rawPin = String($root.find(this.el.pin).val() || '');
-
-    const digitsNum = rawNum.replace(/\D/g, '');
-    const digitsPin = rawPin.replace(/\D/g, '');
-
-    if (digitsNum || digitsPin) return;
-
-    this.clearErrorsOnly($root);
-  },
+        $inline.find(inlineHeader).after(html);
+    },
 
     hideBanner($root) {
         const { notification } = this.el;
@@ -1024,9 +766,9 @@ Wick.GiftCard = {
         const $list = $summary.find(chipList);
         $list.children(`${chip}:not(${loaderChip})`).remove();
 
-    const html = (giftCards || [])
-      .map((giftCard) => this.renderChipHTML(this.mapGiftToChipData($root, giftCard)))
-      .join('');
+        const html = (giftCards || [])
+            .map((g) => this.renderChipHTML(this.mapGiftToChipData($root, g)))
+            .join('');
 
         if (html) {
             $list.append(html);
@@ -1061,31 +803,13 @@ Wick.GiftCard = {
         }
     },
 
-  showOnlyBillingAddress($root) {
-    const {
-      checkoutContainer,
-      billingAddress,
-      altPaymentRowsAttr,
-      hiddenCard,
-    } = this.el;
-
-    const $container = $root.closest(checkoutContainer);
-    if (!$container.length) {
-      return;
-    }
-
-    $container.find(billingAddress).removeClass(hiddenCard).show();
-
-    $container.find(altPaymentRowsAttr).addClass(hiddenCard);
-
-    if (this.isCardMethodSelected($container)) {
-      this.clearPaypageAndCollapse($container);
-    } else {
-      $container.find(this.el.cardDetails).addClass(hiddenCard);
-    }
-
-    this.toggleAltPaymentInfos($root, false);
-  },
+    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') {
@@ -1112,80 +836,16 @@ Wick.GiftCard = {
                 return;
             }
 
-      const msg = PAY_MESSAGE_BY_CODE[code] || DEFAULT_PAY_ERROR_MESSAGE;
-      this.useGlobalError(this.el.$blocks.first(), msg);
-    });
-  },
-
-  collapseGiftcardPanel($container, opts = {}) {
-    const { hideIfHasChips = false } = opts;
-    const { panel, toggle, expandedAttr, checkoutContainer, block } = this.el;
-
-    const $ctx = $container && $container.length ? $container : $(checkoutContainer).first();
-    const $giftcard = $ctx.find(block).first();
-    if (!$giftcard.length) return;
-
-    $giftcard.find(panel).prop('hidden', true).hide();
-    $giftcard.find(toggle).attr(expandedAttr, 'false');
-
-    this.updateHintVisibility($giftcard, { skipResetForm: true });
-
-    if (hideIfHasChips) {
-      const hasChips = this.getAppliedChipsCount($giftcard) > 0;
-      if (hasChips) {
-        $giftcard.hide();
-        $giftcard.find(toggle).hide();
-      } else {
-        $giftcard.show();
-        $giftcard.find(toggle).show();
-      }
-    } else {
-      $giftcard.find(toggle).show();
-    }
-  },
-
-  bindCtaCardCollapse() {
-    const sel = this.el.btnEnterDetails;
-
-    $(document).off('click.giftcardCardCollapse', sel);
-
-    $(document).on('click.giftcardCardCollapse', sel, (e) => {
-      const $btn = $(e.currentTarget);
-      const mode = $btn.attr('data-mode');
-      if (mode !== 'card') return;
-
-      const $container = $btn.closest(this.el.checkoutContainer);
-
-      console.log('[GC] CTA click', {
-        mode,
-        btnFound: $(e.currentTarget).length,
-        container: $btn.closest(this.el.checkoutContainer).length,
-      });
-
-      if (!$container.length) return;
-
-      e.preventDefault();
-
-      this.collapseGiftcardPanel($container, { hideIfHasChips: true });
-
-      this.openPaypage($container);
-    });
-  },
-
+            const msg = PAY_MESSAGE_BY_CODE[code] || DEFAULT_PAY_ERROR_MESSAGE;
+            this.useGlobalError(this.el.$blocks.first(), msg);
+        });
+    },
 
     bindEvents() {
         const { number, pin, toggle, closeBtn, giftcardBtn, jsGiftcardAdd, giftcardChipClose } =
             this.el;
 
-    $(document).off('.giftcard');
-
-    $(document).off('focusin.giftcard', this.collapseTargets);
-    $(document).on('focusin.giftcard', this.collapseTargets, (e) => this.handleCollapseTrigger(e));
-
-    $(document).off('change.giftcard', '#chb-payment-details-card');
-    $(document).on('change.giftcard', '#chb-payment-details-card', (e) => this.handleCollapseTrigger(e));
-
-
+        $(document).off('.giftcard');
 
         const handleNumberInput = createGcNumberInputHandler({
             fieldSelector: this.el.field,
@@ -1237,9 +897,8 @@ Wick.GiftCard = {
             .on('click.giftcard', jsGiftcardAdd, this.handleAddAnotherClick.bind(this))
             .on('click.giftcard', giftcardChipClose, this.handleChipCloseClick.bind(this));
 
-    this.bindGiftcardCtaHandler();
-    this.bindCtaCardCollapse();
-  },
+        this.bindGiftcardCtaHandler();
+    },
 
     init(payload = {}) {
         const { field, pin, $blocks } = this.el;
@@ -1258,14 +917,11 @@ Wick.GiftCard = {
             }
         }
 
-  $blocks.each((index, block) => {
-    const $block = $(block);
-    this.clearErrorsIfEmptyOnInit($block);
-
-    const $pinField = $block.find(pin).closest(field);
-    if ($pinField.length) {
-      initializeInputToggle($pinField);
-    }
-  });
-  }
+        $blocks.each((index, block) => {
+            const $pinField = $(block).find(pin).closest(field);
+            if ($pinField.length) {
+                initializeInputToggle($pinField);
+            }
+        });
+    },
 };