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

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

@@ -1,6 +1,7 @@
 import { initializeInputToggle } from '../utils/show-hide-input';
 import { updateOrderSummary } from './order-summary';
-import { hideLoader, showLoader, appendLoader } from '../utils/loader';
+import { createPostcodeLookup } from './postcode-lookup';
+import { hideLoader, showLoader } from '../utils/loader';
 import {
     ADD_GIFT_CARD,
     buildHintContext,
@@ -20,7 +21,18 @@ import {
     DEFAULT_PAY_ERROR_MESSAGE,
 } from '../utils/gift-cards-utils';
 
-import { clearErrorText, validateExactDigits } from '../utils/validation';
+import {
+    bindBlurValidation,
+    clearErrorText,
+    isAntiXssValid,
+    isElementInViewport,
+    removeErrorStyling,
+    resetBlurValidation,
+    validateExactDigits,
+    validateFieldByRule,
+} from '../utils/validation';
+import errorMessages from '../utils/errorMesages';
+import { scrollToElement } from '../utils/helpers';
 import {
     createGcNumberInputHandler,
     digitsOnlyKeypress,
@@ -42,6 +54,13 @@ const notificationTpl = require('../../../elements/notifications.hbs');
 
 var Wick = window.Wick || {};
 
+const ORDER_NAME_RULES = {
+    orderFirstName: { required: true, validate: isAntiXssValid, message: errorMessages.errorName },
+    orderSurname: { required: true, validate: isAntiXssValid, message: errorMessages.errorSurname },
+};
+const ORDER_ADDRESS_SCROLL_OFFSET = 100;
+const ORDER_ADDRESS_LOOKUP_CONTEXT = 'order-address';
+
 Wick.GiftCard = {
     ADD_GIFT_CARD,
     REMOVE_GIFT_CARD,
@@ -114,6 +133,19 @@ Wick.GiftCard = {
             '[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',
+        orderAddress: '[data-order-address]',
+        orderFirstName: '#order-first-name',
+        orderSurname: '#order-surname',
+        paymentMethodCheckedSel: 'input[name="payment-method"]:checked',
+        paymentMethodCardValue: '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: {
@@ -123,12 +155,17 @@ Wick.GiftCard = {
         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,
-    pendingServerGiftCards: null,
     altPaymentInfosLocked: false,
     altPaymentPanelsLocked: false,
     summaryTotal: null,
+    orderAddressLookup: null,
 
     resetPinToggle($root) {
         const {
@@ -166,6 +203,90 @@ Wick.GiftCard = {
         $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;
         const $num = $root.find(number);
@@ -195,73 +316,104 @@ Wick.GiftCard = {
 
     open($root) {
         const { toggle, panel, hint, pin, expandedAttr, passwordToggleEvent } = this.el;
-        this.hideBanner($root);
         $root.show();
 
-        $root.find(panel).prop('hidden', false);
+        $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, panel, expandedAttr, giftcardRow, chipList, chip, hint } = this.el;
         const $toggle = $root.find(toggle);
         const $panel = $root.find(panel);
-        const $loader = $root.find(loader);
+        const $pageLoader = this.getPageLoader();
 
-        showLoader($loader);
+        showLoader($pageLoader);
 
         setTimeout(() => {
-            hideLoader($loader);
+            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();
-        this.open($(e.currentTarget).closest(this.el.$blocks));
+
+        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.$blocks);
+        const $root = $(e.currentTarget).closest(this.el.block);
         this.resetForm($root);
         this.close($root);
     },
 
     finalizeSuccess($root, $success) {
-        let { panel, toggle, hint, expandedAttr } = this.el;
-
         if ($success && $success.length) {
             $success.attr('hidden', 'hidden').removeClass('fade show').off('transitionend');
         }
 
         this.resetForm($root);
-        $root.find(panel).prop('hidden', true);
-        $root.find(toggle).attr(expandedAttr, 'false').show();
-        $root.find(hint).show();
-
-        if (this.pendingServerGiftCards) {
-            this.renderGiftCardsFromList($root, this.pendingServerGiftCards);
-            this.pendingServerGiftCards = null;
-        }
-
         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;
 
@@ -278,15 +430,16 @@ Wick.GiftCard = {
 
         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);
+        }, 1500);
     },
 
     handleFormSubmit(e) {
-        const { number, block, giftcardRow, loaderChip } = this.el;
+        const { number, block } = this.el;
         e.preventDefault();
 
         const $root = $(e.currentTarget).closest(block);
@@ -298,48 +451,50 @@ 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);
+            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 $row = $root.closest(giftcardRow);
 
-        let $loader = $row.children(loaderChip);
-
-        if (!$loader.length) {
-            appendLoader({ wrapper: $row });
-            $loader = $row.children(loaderChip).last();
-        }
+        const $pageLoader = this.getPageLoader();
+        showLoader($pageLoader);
 
-        verifyGiftCard($loader, giftCardNumber, pin)
+        verifyGiftCard($pageLoader, giftCardNumber, pin)
             .then((res) => this.handleVerifyResponse($root, res))
             .catch((err) => {
                 const msg = this.getErrorMessage(err);
                 this.showBannerError($root, msg);
+            })
+            .finally(() => {
+                hideLoader($pageLoader);
             });
     },
 
@@ -350,18 +505,20 @@ Wick.GiftCard = {
                 return;
             }
 
-            this.pendingServerGiftCards = res.giftCards.slice();
-
+            let summaryData;
             if (res.orderTotal != null || res.giftCardTotal != null) {
-                const data = { total: res.orderTotal, giftCardApplied: res.giftCardTotal };
-                updateOrderSummary(data, buildSummaryEqualMap(data), true);
+                summaryData = { total: res.orderTotal, giftCardApplied: res.giftCardTotal };
+
+                updateOrderSummary(summaryData, buildSummaryEqualMap(summaryData), true);
                 this.summaryTotal = res.orderTotal;
+
                 this.toggleBillingDescrForZero($root);
                 this.updateCtaButton($root);
             }
 
             this.resetForm($root);
             this.showSubmitSpinner($root);
+            this.renderGiftCardsFromList($root, res.giftCards);
             return;
         }
 
@@ -369,10 +526,9 @@ Wick.GiftCard = {
         this.showBannerError($root, msg);
     },
 
-    updateHintVisibility($root) {
+    updateHintVisibility($root, opts = {}) {
         const {
             chipList,
-            giftcardRow,
             hint,
             panel,
             toggle,
@@ -382,61 +538,63 @@ Wick.GiftCard = {
             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 $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);
+        const panelOpen = this.isPanelOpen($giftcard);
 
-        if (count > 0) {
-            if (!this.altPaymentPanelsLocked) {
-                this.showOnlyBillingAddress($giftcard);
-                this.altPaymentPanelsLocked = true;
-            } else {
-                this.showOnlyBillingAddress($giftcard);
+        if (count === 0) {
+            $summary.hide();
+
+            $giftcard.show();
+
+            if (!skipResetForm) {
+                this.resetForm($giftcard);
             }
-        } else {
-            if (!this.altPaymentPanelsLocked) {
-                this.toggleAltPayments($giftcard, true);
-                this.toggleAltPaymentInfos($giftcard, true);
+
+            if (panelOpen) {
+                this.open($giftcard);
             } else {
-                this.showOnlyBillingAddress($giftcard);
+                $giftcard.find(panel).prop('hidden', true);
+                $giftcard.find(toggle).attr(expandedAttr, 'false').show();
+                $giftcard.find(hint)[zeroTotal ? 'hide' : 'show']();
             }
-        }
-
-        const $summary = this.ensureSummaryContainer($giftcard);
 
-        if (count === 0) {
-            $summary.hide();
-            $giftcard.show();
-            this.resetForm($giftcard);
-            $giftcard.find(panel).prop('hidden', true);
-            $giftcard.find(toggle).attr(expandedAttr, 'false').show();
-            $giftcard.find(hint)[zeroTotal ? 'hide' : 'show']();
             this.updateCtaButton($giftcard);
             return;
         }
 
         this.setBillingLabelToCard($giftcard);
+
         $summary.show();
-        $giftcard.hide();
         $giftcard.find(hint).hide();
+        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) {
+        if (zeroTotal || panelOpen) {
             $summary.find(summaryHint).hide();
         }
 
@@ -452,18 +610,21 @@ Wick.GiftCard = {
     },
 
     toggleAltPaymentInfos($root, show) {
-        const { checkoutContainer, billieInfo, klarnaInfo } = this.el;
+        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;
     },
@@ -532,16 +693,48 @@ Wick.GiftCard = {
 
     handleAddAnotherClick(e) {
         e.preventDefault();
-        const { giftcardRow, chipList, chip, block, number, summaryHint } = this.el;
+
+        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();
-        this.resetForm($giftcard);
-        this.open($giftcard);
 
+        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(() => {
@@ -549,6 +742,43 @@ Wick.GiftCard = {
         }, 0);
     },
 
+    isCardMethodSelected($container) {
+        const { paymentMethodCheckedSel, paymentMethodCardValue } = this.el;
+
+        const $checked = $container.find(paymentMethodCheckedSel);
+        return $checked.length && $checked.val() === paymentMethodCardValue;
+    },
+
+    isPaypageOpen($container) {
+        const { paypageIframeWrapSel } = this.el;
+
+        const $wrap = $container.find(paypageIframeWrapSel);
+        return $wrap.length ? $wrap.is(':visible') : false;
+    },
+
+    clearPaypageAndCollapse($container) {
+        const {
+            cardDetails,
+            hiddenCard,
+            paypageIframeWrapSel,
+            cardValidationErrorRowSel,
+            cardValidationErrorRowClass,
+            cardValidationErrorTextSel,
+        } = this.el;
+
+        const $cardDetails = $container.find(cardDetails);
+        if (!$cardDetails.length) return;
+
+        $cardDetails.addClass(hiddenCard).hide();
+        $cardDetails.find(paypageIframeWrapSel).hide();
+
+        $cardDetails
+            .find(cardValidationErrorRowSel)
+            .removeClass(cardValidationErrorRowClass)
+            .find(cardValidationErrorTextSel)
+            .remove();
+    },
+
     getErrorMessage(payload) {
         const code =
             payload && (typeof payload.code === 'number' || typeof payload.code === 'string')
@@ -560,7 +790,8 @@ Wick.GiftCard = {
 
     handleChipCloseClick(e) {
         e.preventDefault();
-        const { chip, giftcardRow, block, giftcardChipClose, chipList, loaderChip } = this.el;
+
+        const { chip, giftcardRow, block, giftcardChipClose, chipList } = this.el;
 
         const $clickedChip = $(e.currentTarget).closest(chip);
         const $row = $clickedChip.closest(giftcardRow);
@@ -571,22 +802,19 @@ Wick.GiftCard = {
         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');
 
-        removeGiftCard($loader, index)
+        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($loader);
+                hideLoader($pageLoader);
                 $row.find(giftcardChipClose).css('pointer-events', '').removeAttr('aria-disabled');
             });
     },
@@ -597,7 +825,10 @@ Wick.GiftCard = {
             const data = { total: res.orderTotal, giftCardApplied: res.giftCardTotal };
             this.summaryTotal = res.orderTotal;
 
-            this.renderGiftCardsFromList($giftcard, giftCardsList, data);
+            this.renderGiftCardsFromList($giftcard, giftCardsList, {
+                ...data,
+                skipResetForm: true,
+            });
 
             if (res.orderTotal != null || res.giftCardTotal != null) {
                 updateOrderSummary(data, buildSummaryEqualMap(data), true);
@@ -625,14 +856,14 @@ Wick.GiftCard = {
     },
 
     getPageLoader() {
-        const $pl = $(this.el.pageLoader);
-        if (!$pl.parent().is('body')) $pl.appendTo('body');
-        return $pl;
+        const $pageLoader = $(this.el.pageLoader);
+        if (!$pageLoader.parent().is('body')) $pageLoader.appendTo('body');
+        return $pageLoader;
     },
 
     showPageLoader() {
-        const $pl = this.getPageLoader();
-        showLoader($pl);
+        const $pageLoader = this.getPageLoader();
+        showLoader($pageLoader);
     },
 
     updateCtaButton($scope) {
@@ -657,13 +888,67 @@ Wick.GiftCard = {
         }
     },
 
+    toggleOrderAddress($scope, show) {
+        const $container = $scope.closest(this.el.checkoutContainer);
+        const $orderAddress = $container.find(this.el.orderAddress);
+        if (!$orderAddress.length) return;
+
+        const wasShown = !$orderAddress.hasClass('d-none');
+        if (wasShown === show) return;
+
+        $orderAddress.toggleClass('d-none', !show);
+
+        if (this.orderAddressLookup) this.orderAddressLookup.setShown(show);
+    },
+
+    validateOrderNames() {
+        let $firstInvalid = null;
+
+        Object.keys(ORDER_NAME_RULES).forEach((key) => {
+            const $field = $(this.el[key]);
+            const isValid = validateFieldByRule($field, ORDER_NAME_RULES[key]);
+
+            if (!isValid && !$firstInvalid) $firstInvalid = $field;
+        });
+
+        return $firstInvalid;
+    },
+
+    isOrderAddressValid() {
+        const $invalidName = this.validateOrderNames();
+        const isLookupValid =
+            !this.orderAddressLookup ||
+            this.orderAddressLookup.validate({ shouldScroll: !$invalidName });
+
+        if ($invalidName) {
+            const $row = $invalidName.closest(this.el.formRow);
+            if (!isElementInViewport($row)) scrollToElement($row, ORDER_ADDRESS_SCROLL_OFFSET);
+        }
+
+        return !$invalidName && isLookupValid;
+    },
+
+    resetOrderAddress() {
+        Object.keys(ORDER_NAME_RULES).forEach((key) => {
+            const $field = $(this.el[key]);
+            $field.val('');
+            removeErrorStyling($field.closest(this.el.formRow));
+            resetBlurValidation($field);
+        });
+
+        if (this.orderAddressLookup) this.orderAddressLookup.reset();
+    },
+
     toggleBillingDescrForZero($scope) {
         const $container = $scope.closest(this.el.checkoutContainer);
         const $descr = $container.find(this.el.checkoutPaymentFields);
+        const isFullyCovered = isZeroAmount(this.summaryTotal);
+
+        this.toggleOrderAddress($scope, isFullyCovered);
+
         if (!$descr.length) return;
 
-        const shouldHide = isZeroAmount(this.summaryTotal);
-        $descr[shouldHide ? 'hide' : 'show']();
+        $descr[isFullyCovered ? 'hide' : 'show']();
     },
 
     getNumberValue($root) {
@@ -690,6 +975,8 @@ Wick.GiftCard = {
             e.stopPropagation();
             e.stopImmediatePropagation();
 
+            if (!self.isOrderAddressValid()) return;
+
             const $scope = $btn.closest(self.el.checkoutContainer).find(self.el.block).first();
             const $root = $scope.length ? $scope : $(self.el.block).first();
 
@@ -719,8 +1006,8 @@ Wick.GiftCard = {
                     }
                 })
                 .finally(() => {
-                    const $pl = self.getPageLoader();
-                    hideLoader($pl);
+                    const $pageLoader = self.getPageLoader();
+                    hideLoader($pageLoader);
                 });
         });
     },
@@ -742,6 +1029,32 @@ Wick.GiftCard = {
         $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;
         $root.find(notification).remove();
@@ -767,7 +1080,7 @@ Wick.GiftCard = {
         $list.children(`${chip}:not(${loaderChip})`).remove();
 
         const html = (giftCards || [])
-            .map((g) => this.renderChipHTML(this.mapGiftToChipData($root, g)))
+            .map((giftCard) => this.renderChipHTML(this.mapGiftToChipData($root, giftCard)))
             .join('');
 
         if (html) {
@@ -805,9 +1118,22 @@ Wick.GiftCard = {
 
     showOnlyBillingAddress($root) {
         const { checkoutContainer, billingAddress, altPaymentRowsAttr, hiddenCard } = this.el;
+
         const $container = $root.closest(checkoutContainer);
-        $container.find(billingAddress).removeClass(hiddenCard);
+        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);
     },
 
@@ -841,12 +1167,77 @@ Wick.GiftCard = {
         });
     },
 
+    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('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,
             fieldErrorClass: this.el.fieldError,
@@ -898,10 +1289,25 @@ Wick.GiftCard = {
             .on('click.giftcard', giftcardChipClose, this.handleChipCloseClick.bind(this));
 
         this.bindGiftcardCtaHandler();
+        this.bindCtaCardCollapse();
+        this.bindOrderNameValidation();
+    },
+
+    bindOrderNameValidation() {
+        Object.keys(ORDER_NAME_RULES).forEach((key) => {
+            bindBlurValidation(
+                this.el[key],
+                (field) => validateFieldByRule($(field), ORDER_NAME_RULES[key]),
+                { namespace: '.giftcard' }
+            );
+        });
     },
 
     init(payload = {}) {
         const { field, pin, $blocks } = this.el;
+        if (!this.orderAddressLookup) {
+            this.orderAddressLookup = createPostcodeLookup(ORDER_ADDRESS_LOOKUP_CONTEXT);
+        }
         this.bindEvents();
         this.bindSplitPaymentFailedListener();
         if ($blocks && $blocks.length) {
@@ -918,7 +1324,10 @@ Wick.GiftCard = {
         }
 
         $blocks.each((index, block) => {
-            const $pinField = $(block).find(pin).closest(field);
+            const $block = $(block);
+            this.clearErrorsIfEmptyOnInit($block);
+
+            const $pinField = $block.find(pin).closest(field);
             if ($pinField.length) {
                 initializeInputToggle($pinField);
             }