wickes-css2 2.109.0-develop.3 → 2.109.0-gift-cards.1

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, appendLoader } from '../utils/loader';
+import {initializeInputToggle} from "../utils/show-hide-input";
+import {updateOrderSummary} from './order-summary';
+import {hideLoader, showLoader} from "../utils/loader";
 import {
     ADD_GIFT_CARD,
     buildHintContext,
@@ -43,85 +43,101 @@ 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],[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',
-    },
+  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(','),
 
     maxChips: 3,
     successTimer: null,
@@ -163,8 +179,93 @@ Wick.GiftCard = {
         const hasValue = ($pinInput.val() || '').length > 0;
         $toggle.toggle(hasValue);
 
-        $pinInput.trigger(passwordToggleEvent);
-    },
+    $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);
+  },
 
     resetForm($root) {
         const { number, pin, note } = this.el;
@@ -193,77 +294,118 @@ Wick.GiftCard = {
         this.resetPinToggle($root);
     },
 
-    open($root) {
-        const { toggle, panel, hint, pin, expandedAttr, passwordToggleEvent } = this.el;
-        this.hideBanner($root);
-        $root.show();
+  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);
-    },
+    $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, loader, expandedAttr } = this.el;
-        const $toggle = $root.find(toggle);
-        const $panel = $root.find(panel);
-        const $loader = $root.find(loader);
+  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($loader);
+    showLoader($pageLoader);
 
-        setTimeout(() => {
-            hideLoader($loader);
+    setTimeout(() => {
+      hideLoader($pageLoader);
 
-            $panel.prop('hidden', true);
-            $toggle.attr(expandedAttr, 'false').show().trigger('focus');
-            this.updateHintVisibility($root);
-        }, 1000);
-    },
+      $panel.prop('hidden', true);
+      $toggle.attr(expandedAttr, 'false').show().trigger('focus');
 
-    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);
-    },
+      const $row = $root.closest(giftcardRow);
+      const count = $row.find(`${chipList} ${chip}`).length;
+      const zeroTotal = this.summaryTotal != null ? isZeroAmount(this.summaryTotal) : false;
 
-    handleToggleClick(e) {
-        e.preventDefault();
-        this.open($(e.currentTarget).closest(this.el.$blocks));
-    },
+      if (count === 0) {
+        $root.find(hint)[zeroTotal ? 'hide' : 'show']();
+        return;
+      }
 
-    handleCloseClick(e) {
-        e.preventDefault();
-        const $root = $(e.currentTarget).closest(this.el.$blocks);
-        this.resetForm($root);
-        this.close($root);
-    },
+      this.updateHintVisibility($root);
+    }, 1000);
+  },
 
-    finalizeSuccess($root, $success) {
-        let { panel, toggle, hint, expandedAttr } = this.el;
+  showSubmitSpinner($root) {
+    const { panel, toggle, hint, expandedAttr } = this.el;
 
-        if ($success && $success.length) {
-            $success.attr('hidden', 'hidden').removeClass('fade show').off('transitionend');
-        }
+    $root.find(panel).prop('hidden', true);
+    $root.find(toggle).attr(expandedAttr, 'false').show().trigger('focus');
+    $root.find(hint).show();
 
-        this.resetForm($root);
-        $root.find(panel).prop('hidden', true);
-        $root.find(toggle).attr(expandedAttr, 'false').show();
-        $root.find(hint).show();
+    this.lockPaymentsForSuccess($root);
 
-        if (this.pendingServerGiftCards) {
-            this.renderGiftCardsFromList($root, this.pendingServerGiftCards);
-            this.pendingServerGiftCards = null;
-        }
+    this.showSuccess($root);
+  },
 
-        this.updateHintVisibility($root);
-        this.successTimer = null;
-    },
+  handleToggleClick(e) {
+    e.preventDefault();
+
+    const $root = $(e.currentTarget).closest(this.el.block);
+    const $container = $root.closest(this.el.checkoutContainer);
+
+    if (
+        $container.length &&
+        this.isCardMethodSelected($container) &&
+        this.isPaypageOpen($container)
+    ) {
+      this.clearPaypageAndCollapse($container);
+    }
+
+    this.open($root);
+    this.updateCtaButton($root);
+  },
+
+  handleCloseClick(e) {
+    e.preventDefault();
+    const $root = $(e.currentTarget).closest(this.el.block);
+    this.resetForm($root);
+    this.close($root);
+  },
+
+  finalizeSuccess($root, $success) {
+    if ($success && $success.length) {
+      $success.attr('hidden', 'hidden').removeClass('fade show').off('transitionend');
+    }
 
-    showSuccess($root) {
-        const { success } = this.el;
+    this.resetForm($root);
+
+    if (Array.isArray(this.pendingServerGiftCards)) {
+      this.renderGiftCardsFromList($root, this.pendingServerGiftCards);
+      this.pendingServerGiftCards = null;
+    } else {
+      this.updateHintVisibility($root);
+    }
+
+    this.successTimer = null;
+  },
+
+  lockPaymentsForSuccess($root) {
+    const $giftcard = $root.closest(this.el.block);
+    const $container = $giftcard.closest(this.el.checkoutContainer);
+
+    this.toggleAltPayments($giftcard, false);
+    this.toggleAltPaymentInfos($giftcard, false);
+
+    $container.find(this.el.billingAddress).show();
+
+    $container
+        .find(this.el.altPaymentRowsAttr)
+        .closest(this.el.formRow)
+        .hide();
+
+    this.altPaymentPanelsLocked = true;
+    this.altPaymentInfosLocked = true;
+  },
+
+
+  showSuccess($root) {
+    const { success } = this.el;
 
         if (this.successTimer) {
             clearTimeout(this.successTimer);
@@ -276,18 +418,19 @@ Wick.GiftCard = {
         $success[0] && $success[0].offsetWidth;
         $success.addClass('show');
 
-        this.successTimer = setTimeout(() => {
-            $success.removeClass('show');
-            const handler = () => this.finalizeSuccess($root, $success);
+    this.successTimer = setTimeout(() => {
+      $success.removeClass('show');
 
-            $success.on('transitionend', handler);
-            setTimeout(handler, 200);
-        }, 3000);
-    },
+      const handler = () => this.finalizeSuccess($root, $success);
+      $success.on('transitionend', handler);
+
+      setTimeout(handler, 200);
+    }, 3000);
+  },
 
-    handleFormSubmit(e) {
-        const { number, block, giftcardRow, loaderChip } = this.el;
-        e.preventDefault();
+  handleFormSubmit(e) {
+    const { number, block } = this.el;
+    e.preventDefault();
 
         const $root = $(e.currentTarget).closest(block);
         this.hideBanner($root);
@@ -298,50 +441,46 @@ Wick.GiftCard = {
         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;
-        }
-
-        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);
-            });
-    },
+    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);
+        });
+  },
 
     handleVerifyResponse($root, res) {
         if (res && res.code === OK_CODE) {
@@ -350,15 +489,18 @@ Wick.GiftCard = {
                 return;
             }
 
-            this.pendingServerGiftCards = res.giftCards.slice();
+      let summaryData;
+      if (res.orderTotal != null || res.giftCardTotal != null) {
+        summaryData = { total: res.orderTotal, giftCardApplied: res.giftCardTotal };
 
-            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);
-            }
+        updateOrderSummary(summaryData, buildSummaryEqualMap(summaryData), true);
+        this.summaryTotal = res.orderTotal;
+
+        this.toggleBillingDescrForZero($root);
+        this.updateCtaButton($root);
+      }
+
+      this.pendingServerGiftCards = res.giftCards.slice();
 
             this.resetForm($root);
             this.showSubmitSpinner($root);
@@ -369,72 +511,70 @@ Wick.GiftCard = {
         this.showBannerError($root, msg);
     },
 
-    updateHintVisibility($root) {
-        const {
-            chipList,
-            giftcardRow,
-            hint,
-            panel,
-            toggle,
-            iconInfo,
-            expandedAttr,
-            summaryHint,
-            chip,
-            block,
-            body,
-        } = this.el;
+  updateHintVisibility($root, opts = {}) {
+    const {
+      chipList,
+      giftcardRow,
+      hint,
+      panel,
+      toggle,
+      iconInfo,
+      expandedAttr,
+      summaryHint,
+      chip,
+      block,
+      body,
+      fieldError,
+    } = 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 { skipResetForm = false } = opts;
 
-        const zeroTotal = this.summaryTotal != null ? isZeroAmount(this.summaryTotal) : false;
+    const $giftcard = $root.closest(block).length ? $root.closest(block) : $root;
+    const $summary = this.ensureSummaryContainer($giftcard);
+    const count = $summary.find(`${chipList} ${chip}`).length;
 
-        this.toggleAltPayments($giftcard, count === 0);
-        this.toggleAltPaymentInfos($giftcard, count === 0);
+    const limit = this.maxChips || 3;
+    const zeroTotal = this.summaryTotal != null ? isZeroAmount(this.summaryTotal) : false;
 
-        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);
-            }
-        }
+    this.toggleAltPayments($giftcard, count === 0);
+    this.toggleAltPaymentInfos($giftcard, count === 0);
 
-        const $summary = this.ensureSummaryContainer($giftcard);
+    if (count === 0) {
+      $summary.hide();
 
-        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;
-        }
+      $giftcard.show();
 
-        this.setBillingLabelToCard($giftcard);
-        $summary.show();
-        $giftcard.hide();
-        $giftcard.find(hint).hide();
+      if (!skipResetForm) {
+        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);
-        const $old = $summary.find(summaryHint).first();
-        const $new = $(html);
+    this.setBillingLabelToCard($giftcard);
 
-        if ($old.length) $old.replaceWith($new);
-        else $summary.append($new);
+    $summary.show();
+    $giftcard.find(hint).hide();
+    const panelOpen = this.isPanelOpen($giftcard);
+    const hasError = $giftcard.find(`.${fieldError}`).length > 0;
+
+    const shouldHideGiftcard = count > 0 && !panelOpen && !hasError;
+
+    $giftcard.toggle(!shouldHideGiftcard);
+
+    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 (zeroTotal) {
             $summary.find(summaryHint).hide();
@@ -451,19 +591,27 @@ Wick.GiftCard = {
         return giftCardChip({ id, maskedNumber, currency, amount });
     },
 
-    toggleAltPaymentInfos($root, show) {
-        const { checkoutContainer, billieInfo, klarnaInfo } = this.el;
-        const $container = $root.closest(checkoutContainer);
+  toggleAltPaymentInfos($root, show) {
+    const {
+      checkoutContainer,
+      billieInfo,
+      klarnaInfo,
+      paymentMethodCheckedSel,
+    } = 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']();
-            }
-        });
+    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']();
 
         if (!show) this.altPaymentInfosLocked = true;
     },
@@ -530,24 +678,104 @@ Wick.GiftCard = {
         }
     },
 
-    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);
-    },
+  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();
+  },
 
     getErrorMessage(payload) {
         const code =
@@ -558,38 +786,42 @@ Wick.GiftCard = {
         return (code != null && MESSAGE_BY_CODE[code]) || DEFAULT_ERROR_MESSAGE;
     },
 
-    handleChipCloseClick(e) {
-        e.preventDefault();
-        const { chip, giftcardRow, block, giftcardChipClose, chipList, loaderChip } = this.el;
+  handleChipCloseClick(e) {
+    e.preventDefault();
+
+    const {
+      chip,
+      giftcardRow,
+      block,
+      giftcardChipClose,
+      chipList,
+    } = 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;
-
-        let $loader = $row.children(loaderChip);
-        if (!$loader.length) {
-            appendLoader({ wrapper: $row });
-            $loader = $row.children(loaderChip).last();
-        }
+    const $chips = $summary.find(`${chipList} ${chip}`);
+    const index = $chips.index($clickedChip);
+    if (index < 0) return;
 
         $row.find(giftcardChipClose).css('pointer-events', 'none').attr('aria-disabled', 'true');
 
-        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');
-            });
-    },
+    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');
+        });
+  },
 
     handleRemoveResponse($giftcard, res) {
         if (res && res.code === OK_CODE) {
@@ -624,16 +856,16 @@ Wick.GiftCard = {
         return $summary;
     },
 
-    getPageLoader() {
-        const $pl = $(this.el.pageLoader);
-        if (!$pl.parent().is('body')) $pl.appendTo('body');
-        return $pl;
-    },
+  getPageLoader() {
+    const $pageLoader = $(this.el.pageLoader);
+    if (!$pageLoader.parent().is('body')) $pageLoader.appendTo('body');
+    return $pageLoader;
+  },
 
-    showPageLoader() {
-        const $pl = this.getPageLoader();
-        showLoader($pl);
-    },
+  showPageLoader() {
+    const $pageLoader = this.getPageLoader();
+    showLoader($pageLoader);
+  },
 
     updateCtaButton($scope) {
         const { ctaSelector, btnDetails, btnText, checkoutContainer } = this.el;
@@ -710,20 +942,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 $pl = self.getPageLoader();
-                    hideLoader($pl);
-                });
+          if (msg) {
+            Wick.Notification.show({
+              text: linkifyClickHere(msg),
+              container: '.globalMessages .container',
+              type: 'error',
+            });
+          }
+        })
+        .finally(() => {
+          const $pageLoader = self.getPageLoader();
+          hideLoader($pageLoader);
         });
-    },
+    });
+  },
 
     showBannerError($root, message, title = '') {
         const { notificationRoot, giftCardInline, inlineHeader } = this.el;
@@ -739,8 +971,34 @@ Wick.GiftCard = {
             text: linkifyClickHere(message),
         });
 
-        $inline.find(inlineHeader).after(html);
-    },
+    $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);
+  },
 
     hideBanner($root) {
         const { notification } = this.el;
@@ -766,9 +1024,9 @@ Wick.GiftCard = {
         const $list = $summary.find(chipList);
         $list.children(`${chip}:not(${loaderChip})`).remove();
 
-        const html = (giftCards || [])
-            .map((g) => this.renderChipHTML(this.mapGiftToChipData($root, g)))
-            .join('');
+    const html = (giftCards || [])
+      .map((giftCard) => this.renderChipHTML(this.mapGiftToChipData($root, giftCard)))
+      .join('');
 
         if (html) {
             $list.append(html);
@@ -803,13 +1061,31 @@ Wick.GiftCard = {
         }
     },
 
-    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);
-    },
+  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);
+  },
 
     useGlobalError($root, message) {
         if (window.Wick && Wick.Notification && typeof Wick.Notification.show === 'function') {
@@ -836,16 +1112,80 @@ Wick.GiftCard = {
                 return;
             }
 
-            const msg = PAY_MESSAGE_BY_CODE[code] || DEFAULT_PAY_ERROR_MESSAGE;
-            this.useGlobalError(this.el.$blocks.first(), msg);
-        });
-    },
+      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);
+    });
+  },
+
 
     bindEvents() {
         const { number, pin, toggle, closeBtn, giftcardBtn, jsGiftcardAdd, giftcardChipClose } =
             this.el;
 
-        $(document).off('.giftcard');
+    $(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));
+
+
 
         const handleNumberInput = createGcNumberInputHandler({
             fieldSelector: this.el.field,
@@ -897,8 +1237,9 @@ Wick.GiftCard = {
             .on('click.giftcard', jsGiftcardAdd, this.handleAddAnotherClick.bind(this))
             .on('click.giftcard', giftcardChipClose, this.handleChipCloseClick.bind(this));
 
-        this.bindGiftcardCtaHandler();
-    },
+    this.bindGiftcardCtaHandler();
+    this.bindCtaCardCollapse();
+  },
 
     init(payload = {}) {
         const { field, pin, $blocks } = this.el;
@@ -917,11 +1258,14 @@ Wick.GiftCard = {
             }
         }
 
-        $blocks.each((index, block) => {
-            const $pinField = $(block).find(pin).closest(field);
-            if ($pinField.length) {
-                initializeInputToggle($pinField);
-            }
-        });
-    },
+  $blocks.each((index, block) => {
+    const $block = $(block);
+    this.clearErrorsIfEmptyOnInit($block);
+
+    const $pinField = $block.find(pin).closest(field);
+    if ($pinField.length) {
+      initializeInputToggle($pinField);
+    }
+  });
+  }
 };