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

package/build/js/page/bloomreach-widget/bloomreach-widget-core.js

@@ -363,9 +363,7 @@ Wick.BloomreachWidget = {
         }
 
         const value =
-            typeof rawValue === 'number'
-                ? rawValue
-                : Number(`${rawValue}`.replace(/[,£\s]/g, ''));
+            typeof rawValue === 'number' ? rawValue : Number(`${rawValue}`.replace(/[,£\s]/g, ''));
 
         if (!Number.isFinite(value)) {
             return typeof rawValue === 'string' ? rawValue : '';

package/build/js/page/checkout-payment-details.js

@@ -13,7 +13,6 @@ Wick.CheckoutPaymentDetails = (function () {
     };
 
     const toggleBillieRepaymentTermsClass = 'js-billie-repayment-terms--has-selection';
-
     const elements = {
         $billieRepaymentTerms: $('.js-billie-repayment-terms'),
         $billieWidget: $('.checkout-payment-details__billie[data-billie]'),
@@ -28,8 +27,95 @@ Wick.CheckoutPaymentDetails = (function () {
         $unregisteredFields: $('#unregistered-fields'),
         $registeredFields: $('#registered-fields'),
         hiddenClass: 'd-none',
+        $giftcardToggle: $('#giftcard-toggle'),
+        $giftcardPanel: $('#giftcard-inline'),
+        giftcardDisabledClass: 'giftcard-toggle--disabled',
+        giftcardRoot: '.giftcard',
+        giftcardHint: '.giftcard-hint',
+        giftcardNumber: 'input[name="giftcard-number"]',
+        giftcardPin: 'input[name="giftcard-pin"]',
+        orderAddress: '[data-order-address]',
     };
 
+    const isOutsideOrderAddress = (_, el) => !$(el).closest(elements.orderAddress).length;
+    function setGiftcardToggleEnabled(isEnabled) {
+        const $toggle = elements.$giftcardToggle;
+        const $panel = elements.$giftcardPanel;
+        const $giftcard = $toggle.closest('.giftcard');
+
+        if (!$toggle.length) {
+            return;
+        }
+
+        $giftcard.toggleClass('giftcard--disabled', !isEnabled);
+
+        if (isEnabled) {
+            $toggle.attr('aria-disabled', 'false').attr('tabindex', '0').css('pointer-events', '');
+        } else {
+            if ($panel && $panel.length) $panel.prop('hidden', true);
+
+            $toggle
+                .attr('aria-disabled', 'true')
+                .attr('tabindex', '-1')
+                .css('pointer-events', 'none')
+                .attr('aria-expanded', 'false')
+                .show();
+
+            $giftcard.find('.giftcard-hint').show();
+        }
+    }
+
+    //   function resetGiftcardToDefault() {
+    //     const {
+    //       $giftcardToggle: $toggle,
+    //       $giftcardPanel: $panel,
+    //       giftcardRoot,
+    //       giftcardHint,
+    //       giftcardNumber,
+    //       giftcardPin,
+    //     } = elements;
+
+    //     if (!$toggle.length) {
+    //       return;
+    //     }
+
+    //     const $giftcard = $toggle.closest(giftcardRoot);
+
+    //     const $hint = $giftcard.find(giftcardHint);
+    //     const $number = $giftcard.find(giftcardNumber);
+    //     const $pin = $giftcard.find(giftcardPin);
+
+    //     if ($panel.length) $panel.prop('hidden', true);
+
+    //     $toggle.attr('aria-expanded', 'false').show();
+    //     $hint.show();
+
+    //     if (window.Wick?.GiftCard?.resetForm) {
+    //       Wick.GiftCard.resetForm($giftcard);
+    //       return;
+    //     }
+
+    //     $number.val('');
+    //     $pin.val('');
+    //   }
+
+    function syncGiftcardAvailability(checkedMethod) {
+        const enable = checkedMethod === 'card';
+
+        if (!enable) {
+            const $giftcard = elements.$giftcardToggle.closest(elements.giftcardRoot);
+            if (window.Wick?.GiftCard?.collapsePreserveState) {
+                Wick.GiftCard.collapsePreserveState($giftcard);
+            } else {
+                if (elements.$giftcardPanel.length) elements.$giftcardPanel.prop('hidden', true);
+                elements.$giftcardToggle.attr('aria-expanded', 'false').show();
+                $giftcard.find(elements.giftcardHint).show();
+            }
+        }
+
+        setGiftcardToggleEnabled(enable);
+    }
+
     let klarnaInited = false;
     let billieInited = false;
 
@@ -106,17 +192,21 @@ Wick.CheckoutPaymentDetails = (function () {
         paymentMethods.forEach((method) => {
             $(`[data-${method}]`).hide();
         });
-
         const $selected = $(`[data-${checkedMethod}]`);
         if ($selected.length) {
             $selected.show();
         }
     }
+
     function resetAllCheckoutForms(keepPaymentMethod) {
         const $container = elements.$wrapperPaymentInput.closest('.checkout-payment-details');
         if (!$container.length) return;
+        const $giftcardScope = $container.find(elements.giftcardRoot);
+        const $exclude = $giftcardScope.find(':input');
 
         $container.find('form').each(function () {
+            if ($(this).closest(elements.giftcardRoot).length) return;
+
             if (Wick.Forms && typeof Wick.Forms.clearValidationErrors === 'function') {
                 Wick.Forms.clearValidationErrors(this);
             }
@@ -126,13 +216,22 @@ Wick.CheckoutPaymentDetails = (function () {
             .find(
                 'input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], textarea'
             )
+            .filter(isOutsideOrderAddress)
+            .not($exclude)
             .val('');
 
-        $container.find('select').each(function () {
-            this.selectedIndex = 0;
-        });
+        $container
+            .find('select')
+            .not($exclude)
+            .each(function () {
+                this.selectedIndex = 0;
+            });
 
-        $container.find('input[type="checkbox"]').prop('checked', false);
+        $container
+            .find('input[type="checkbox"]')
+            .filter(isOutsideOrderAddress)
+            .not($exclude)
+            .prop('checked', false);
 
         $container.find('input[type="radio"]').each(function () {
             const $radio = $(this);
@@ -308,7 +407,7 @@ Wick.CheckoutPaymentDetails = (function () {
     }
 
     function clearInputFields() {
-        elements.$billingAddress.find('input.tbx').val('');
+        elements.$billingAddress.find('input.tbx').filter(isOutsideOrderAddress).val('');
     }
 
     function showPlaceOrder() {
@@ -341,6 +440,8 @@ Wick.CheckoutPaymentDetails = (function () {
 
     function init() {
         const paymentMethods = getPaymentMethods();
+        const initialMethod = $(elements.paymentInputName + ':checked').val() || 'card';
+        syncGiftcardAvailability(initialMethod);
         initBillieBusinessTypeToggle();
         hideBillieBusiness();
 
@@ -363,6 +464,10 @@ Wick.CheckoutPaymentDetails = (function () {
         elements.$wrapperPaymentInput.on('change', elements.paymentInputName, function () {
             const checkedMethod = $(this).val();
 
+            togglePaymentBlocks(paymentMethods, checkedMethod);
+            changeDetailsBlock(checkedMethod);
+            syncGiftcardAvailability(checkedMethod);
+
             if (prevPaymentMethod && prevPaymentMethod !== checkedMethod) {
                 resetAllCheckoutForms(checkedMethod);
             } else {
@@ -373,13 +478,12 @@ Wick.CheckoutPaymentDetails = (function () {
                     Wick.Forms.clearValidationErrors(form);
             }
 
-            togglePaymentBlocks(paymentMethods, checkedMethod);
-            changeDetailsBlock(checkedMethod);
-
             prevPaymentMethod = checkedMethod;
         });
 
         $('.btn-new-card').on('click', function () {
+            elements.$cardDetails.removeClass(elements.hiddenCardDetailsClass);
+
             $('[data-new-card]').show();
             $('[data-existing-card]').hide();
             return false;