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

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

@@ -10,22 +10,110 @@ Wick.CheckoutPaymentDetails = (function () {
         buttonName: 'btn-enter-details',
     };
 
-    const elements = {
-        $billieRepaymentTerms: $('.js-billie-repayment-terms'),
-        $billieInfoBlock: $('.checkout-payment-details__billie'),
-        $billieInfo: $('.checkout-payment-details__billie .billie-info'),
-        $wrapperPaymentInput: $('.checkout-payment-details__row'),
-        paymentInputName: '[name=payment-method]',
-        $cardDetails: $('.checkout-payment-details__card-details'),
-        $placeOrder: $('.checkout-payment-details__place-order'),
-        $billingAddress: $('.billing-address'),
-        hiddenCardDetailsClass: 'checkout-payment-details__card-details_hidden',
-        $billieBusiness: $('[data-billie-business]'),
-        businessTypeName: '[name="businessType"]',
-        $unregisteredFields: $('#unregistered-fields'),
-        $registeredFields: $('#registered-fields'),
-        hiddenClass: 'd-none',
-    };
+  const elements = {
+    $billieRepaymentTerms: $('.js-billie-repayment-terms'),
+    $billieWidget: $('.checkout-payment-details__billie[data-billie]'),
+    $wrapperPaymentInput: $('.checkout-payment-details__row'),
+    paymentInputName: '[name=payment-method]',
+    $cardDetails: $('.checkout-payment-details__card-details'),
+    $placeOrder: $('.checkout-payment-details__place-order'),
+    $billingAddress: $('.billing-address'),
+    hiddenCardDetailsClass: 'checkout-payment-details__card-details_hidden',
+    $billieBusiness: $('[data-billie-business]'),
+    businessTypeName: '[name="businessType"]',
+    $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"]',
+  }
+
+  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);
+  }
 
     function preparePage() {
         var modalOpened = $('.modal.show').length;
@@ -57,29 +145,36 @@ Wick.CheckoutPaymentDetails = (function () {
         paymentMethods.forEach((method) => {
             $(`[data-${method}]`).toggle(checkedMethod === method);
         });
+        const $selected = $(`[data-${checkedMethod}]`);
+        if ($selected.length) {
+            $selected.show();
+        }
     }
 
-    function resetAllCheckoutForms(keepPaymentMethod) {
-        const $container = elements.$wrapperPaymentInput.closest('.checkout-payment-details');
-        if (!$container.length) return;
+  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 (Wick.Forms && typeof Wick.Forms.clearValidationErrors === 'function') {
-                Wick.Forms.clearValidationErrors(this);
-            }
-        });
+    $container.find('form').each(function() {
+      if ($(this).closest(elements.giftcardRoot).length) return;
 
-        $container
-            .find(
-                'input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], textarea'
-            )
-            .val('');
+      if (Wick.Forms && typeof Wick.Forms.clearValidationErrors === 'function') {
+        Wick.Forms.clearValidationErrors(this);
+      }
+    });
 
-        $container.find('select').each(function () {
-            this.selectedIndex = 0;
-        });
+    $container
+        .find('input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], textarea')
+        .not($exclude)
+        .val('');
 
-        $container.find('input[type="checkbox"]').prop('checked', false);
+    $container.find('select').not($exclude).each(function() {
+      this.selectedIndex = 0;
+    });
+
+    $container.find('input[type="checkbox"]').not($exclude).prop('checked', false);
 
         $container.find('input[type="radio"]').each(function () {
             const $radio = $(this);
@@ -222,34 +317,36 @@ Wick.CheckoutPaymentDetails = (function () {
         buttonElement && buttonElement.text(buttonText);
     }
 
-    function clearInputFields() {
-        elements.$billingAddress.find('input.tbx').val('');
-    }
-
-    function showPlaceOrder() {
-        elements.$placeOrder.removeClass(elements.hiddenClass);
-    }
-
-    function hidePlaceOrder() {
-        elements.$placeOrder.addClass(elements.hiddenClass);
-    }
-
-    function initBillieBusinessTypeToggle() {
-        $(document).on('change', elements.businessTypeName, function () {
-            toggleBusinessTypeFields($(this).val());
-        });
-    }
-
-    function forceReflow($element) {
-        if (!$element.length) return;
-        void $element[0].offsetHeight;
-        $(window).trigger('resize');
-    }
-
-    function init() {
-        const paymentMethods = getPaymentMethods();
-        initBillieBusinessTypeToggle();
-        hideBillieBusiness();
+  function clearInputFields() {
+    elements.$billingAddress.find('input.tbx').val('');
+  }
+
+  function showPlaceOrder() {
+    elements.$placeOrder.removeClass(elements.hiddenClass);
+  }
+
+  function hidePlaceOrder() {
+    elements.$placeOrder.addClass(elements.hiddenClass);
+  }
+
+  function initBillieBusinessTypeToggle() {
+    $(document).on('change', elements.businessTypeName, function () {
+      toggleBusinessTypeFields($(this).val());
+    });
+  }
+
+	function forceReflow($element) {
+		if (!$element.length) return;
+		void $element[0].offsetHeight;
+		$(window).trigger('resize');
+	}
+
+  function init() {
+    const paymentMethods = getPaymentMethods();
+    const initialMethod = $(elements.paymentInputName + ':checked').val() || 'card';
+    syncGiftcardAvailability(initialMethod);
+    initBillieBusinessTypeToggle();
+    hideBillieBusiness();
 
         $(document).on('change', 'input[name="repaymentTerms"]', function () {
             const currentMethod = $(elements.paymentInputName + ':checked').val();
@@ -269,27 +366,27 @@ Wick.CheckoutPaymentDetails = (function () {
         elements.$wrapperPaymentInput.on('change', elements.paymentInputName, function () {
             const checkedMethod = $(this).val();
 
-            if (prevPaymentMethod && prevPaymentMethod !== checkedMethod) {
-                resetAllCheckoutForms(checkedMethod);
-            } else {
-                const form = $(this).closest('form')[0];
-                form &&
-                    Wick.Forms &&
-                    Wick.Forms.clearValidationErrors &&
-                    Wick.Forms.clearValidationErrors(form);
-            }
+      togglePaymentBlocks(paymentMethods, checkedMethod)
+      changeDetailsBlock(checkedMethod)
+      syncGiftcardAvailability(checkedMethod);
 
-            togglePaymentBlocks(paymentMethods, checkedMethod);
-            changeDetailsBlock(checkedMethod);
+      if (prevPaymentMethod && prevPaymentMethod !== checkedMethod) {
+        resetAllCheckoutForms(checkedMethod);
+      } else {
+        const form = $(this).closest('form')[0];
+        form && Wick.Forms && Wick.Forms.clearValidationErrors && Wick.Forms.clearValidationErrors(form);
+      }
 
-            prevPaymentMethod = checkedMethod;
-        });
+      prevPaymentMethod = checkedMethod;
+    });
 
-        $('.btn-new-card').on('click', function () {
-            $('[data-new-card]').show();
-            $('[data-existing-card]').hide();
-            return false;
-        });
+    $('.btn-new-card').on('click', function() {
+      elements.$cardDetails.removeClass(elements.hiddenCardDetailsClass);
+
+      $('[data-new-card]').show();
+      $('[data-existing-card]').hide();
+      return false;
+    });
 
         $('.btn-back-to-existing-card').on('click', function () {
             $('[data-new-card]').hide();