wickes-css2 2.105.0-develop.7 → 2.105.0-develop.8

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

@@ -1,309 +1,307 @@
 var Wick = Wick || {};
-Wick.CheckoutPaymentDetails = (function () {
-    const $modal = $('#modal-terms-and-conditions');
-
-    let prevPaymentMethod = null;
-    let prevClearableMethod;
-
-    let detailsLabel = {
-        inputName: 'card-name',
-        buttonName: 'btn-enter-details',
-    };
-
-    const elements = {
-        $billieRepaymentTerms: $('.js-billie-repayment-terms'),
-        $billieInfoBlock: $('.checkout-payment-details__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',
-    };
-
-    function preparePage() {
-        var modalOpened = $('.modal.show').length;
-        if (!modalOpened) return;
-
-        var modalContent = $modal.find('.modal-content').clone();
-        $modal.modal('hide');
-        modalContent.addClass('print-area');
-
-        $('body').addClass('print-mode').append(modalContent);
+Wick.CheckoutPaymentDetails = (function() {
+  const $modal = $('#modal-terms-and-conditions');
+
+  let prevPaymentMethod = null;
+  let prevClearableMethod;
+
+  let detailsLabel = {
+    inputName: 'card-name', buttonName: 'btn-enter-details',
+  };
+
+  const elements = {
+    $billieRepaymentTerms: $('.js-billie-repayment-terms'),
+    $billieInfoBlock: $('.checkout-payment-details__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',
+  };
+
+  function preparePage() {
+    var modalOpened = $('.modal.show').length;
+    if (!modalOpened) return;
+
+    var modalContent = $modal.find('.modal-content').clone();
+    $modal.modal('hide');
+    modalContent.addClass('print-area');
+
+    $('body')
+      .addClass('print-mode')
+      .append(modalContent);
+  }
+
+  function resetPage() {
+    var modalPrintModeActive = $('body.print-mode').length;
+    if (!modalPrintModeActive) return;
+
+    $('body').removeClass('print-mode');
+    $('.print-area').remove();
+    $modal.modal('show');
+  }
+
+  function getPaymentMethods() {
+    return $(elements.paymentInputName)
+      .map((_, item) => $(item).val())
+      .get();
+  }
+
+  function togglePaymentBlocks(paymentMethods, checkedMethod) {
+    paymentMethods.forEach(method => {
+      $(`[data-${method}]`).toggle(checkedMethod === method);
+    });
+  }
+
+  function resetAllCheckoutForms(keepPaymentMethod) {
+    const $container = elements.$wrapperPaymentInput.closest('.checkout-payment-details');
+    if (!$container.length) return;
+
+    $container.find('form').each(function() {
+      if (Wick.Forms && typeof Wick.Forms.clearValidationErrors === 'function') {
+        Wick.Forms.clearValidationErrors(this);
+      }
+    });
+
+    $container
+      .find('input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], textarea')
+      .val('');
+
+    $container.find('select').each(function() {
+      this.selectedIndex = 0;
+    });
+
+    $container.find('input[type="checkbox"]').prop('checked', false);
+
+    $container.find('input[type="radio"]').each(function() {
+      const $radio = $(this);
+      const name = $radio.attr('name');
+      const val = $radio.val();
+
+      if (name === 'payment-method') {
+        $radio.prop('checked', val === keepPaymentMethod);
+      } else {
+        $radio.prop('checked', false);
+      }
+    });
+
+    $container.find('.radio-expanded-content').hide();
+  }
+
+  function setBillingDetailsRowVisibility(isVisible) {
+    const $row = elements.$billingAddress.find('.checkout-payment-details__row');
+    $row.toggle(isVisible);
+    $row.find(':input').prop('disabled', !isVisible);
+  }
+
+  function setBillieStepVisibility(isReady) {
+    setBillingDetailsRowVisibility(isReady);
+    elements.$billieInfoBlock.toggle(isReady);
+  }
+
+  function resetBillieRepaymentSelection() {
+    elements.$billieRepaymentTerms
+      .find('input[name="repaymentTerms"]')
+      .prop('checked', false);
+  }
+
+  function showBillieBusiness() {
+    elements.$billieBusiness.removeClass(elements.hiddenClass);
+  }
+
+  function hideBillieBusiness() {
+    elements.$billieBusiness.addClass(elements.hiddenClass);
+
+    elements.$unregisteredFields
+        .addClass(elements.hiddenClass)
+        .removeAttr('style');
+
+    elements.$registeredFields
+        .addClass(elements.hiddenClass)
+        .removeAttr('style');
+
+    elements.$billieBusiness.find('input[type="radio"]').prop('checked', false);
+    elements.$billieBusiness.find('input.tbx').val('');
+  }
+
+  function toggleBusinessTypeFields(type) {
+    const isUnregistered = type === 'unregistered';
+    const isRegistered = type === 'registered';
+
+    elements.$unregisteredFields.toggleClass(elements.hiddenClass, !isUnregistered);
+    elements.$registeredFields.toggleClass(elements.hiddenClass, !isRegistered);
+  }
+
+
+  function changeDetailsBlock(checkedMethod) {
+    if (checkedMethod !== 'billie') {
+      setBillingDetailsRowVisibility(true);
     }
 
-    function resetPage() {
-        var modalPrintModeActive = $('body.print-mode').length;
-        if (!modalPrintModeActive) return;
-
-        $('body').removeClass('print-mode');
-        $('.print-area').remove();
-        $modal.modal('show');
-    }
-
-    function getPaymentMethods() {
-        return $(elements.paymentInputName)
-            .map((_, item) => $(item).val())
-            .get();
-    }
-
-    function togglePaymentBlocks(paymentMethods, checkedMethod) {
-        paymentMethods.forEach((method) => {
-            $(`[data-${method}]`).toggle(checkedMethod === method);
-        });
-    }
-
-    function resetAllCheckoutForms(keepPaymentMethod) {
-        const $container = elements.$wrapperPaymentInput.closest('.checkout-payment-details');
-        if (!$container.length) return;
-
-        $container.find('form').each(function () {
-            if (Wick.Forms && typeof Wick.Forms.clearValidationErrors === 'function') {
-                Wick.Forms.clearValidationErrors(this);
-            }
-        });
-
-        $container
-            .find(
-                'input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], textarea'
-            )
-            .val('');
-
-        $container.find('select').each(function () {
-            this.selectedIndex = 0;
-        });
-
-        $container.find('input[type="checkbox"]').prop('checked', false);
-
-        $container.find('input[type="radio"]').each(function () {
-            const $radio = $(this);
-            const name = $radio.attr('name');
-            const val = $radio.val();
-
-            if (name === 'payment-method') {
-                $radio.prop('checked', val === keepPaymentMethod);
-            } else {
-                $radio.prop('checked', false);
-            }
-        });
-
-        $container.find('.radio-expanded-content').hide();
-    }
-
-    function setBillingDetailsRowVisibility(isVisible) {
-        const $row = elements.$billingAddress.find('.checkout-payment-details__row');
-        $row.toggle(isVisible);
-        $row.find(':input').prop('disabled', !isVisible);
-    }
-
-    function setBillieStepVisibility(isReady) {
-        setBillingDetailsRowVisibility(isReady);
-        elements.$billieInfoBlock.toggle(isReady);
-    }
-
-    function resetBillieRepaymentSelection() {
-        elements.$billieRepaymentTerms.find('input[name="repaymentTerms"]').prop('checked', false);
-    }
-
-    function showBillieBusiness() {
-        elements.$billieBusiness.removeClass(elements.hiddenClass);
-    }
-
-    function hideBillieBusiness() {
-        elements.$billieBusiness.addClass(elements.hiddenClass);
-
-        elements.$unregisteredFields.addClass(elements.hiddenClass).removeAttr('style');
-
-        elements.$registeredFields.addClass(elements.hiddenClass).removeAttr('style');
-
-        elements.$billieBusiness.find('input[type="radio"]').prop('checked', false);
-        elements.$billieBusiness.find('input.tbx').val('');
-    }
-
-    function toggleBusinessTypeFields(type) {
-        const isUnregistered = type === 'unregistered';
-        const isRegistered = type === 'registered';
-
-        elements.$unregisteredFields.toggleClass(elements.hiddenClass, !isUnregistered);
-        elements.$registeredFields.toggleClass(elements.hiddenClass, !isRegistered);
+    switch (checkedMethod) {
+      case 'paypal':
+        hideCardDetails();
+        showPlaceOrder();
+        hideBillingAddres();
+        break;
+
+      case 'klarna':
+        hideBillingAddres();
+        break;
+
+      case 'billie':
+        detailsLabel = {
+          ...detailsLabel, labelText: 'Name on Billie account', buttonText: 'Pay with Billie',
+        };
+        changeLabelText(detailsLabel);
+
+        setBillieStepVisibility(false);
+        resetBillieRepaymentSelection();
+        showBillieBusiness();
+        break;
+
+      case 'clearpay':
+        detailsLabel = {
+          ...detailsLabel, labelText: 'Name on Clearpay account', buttonText: 'Pay with Clearpay',
+        };
+        prevClearableMethod === 'card' && clearInputFields();
+        changeLabelText(detailsLabel);
+        prevClearableMethod = checkedMethod;
+        break;
+
+      case 'apple':
+        hideCardDetails();
+        hidePlaceOrder();
+        hideBillingAddres();
+        break;
+
+      case 'google':
+        hideCardDetails();
+        hidePlaceOrder();
+        hideBillingAddres();
+        break;
+
+      case 'card':
+        detailsLabel = {
+          ...detailsLabel, labelText: 'Name on card', buttonText: 'Enter card details',
+        };
+        prevClearableMethod === 'clearpay' && clearInputFields();
+        changeLabelText(detailsLabel);
+        prevClearableMethod = checkedMethod;
+        break;
+
+      default:
+        showPlaceOrder();
     }
-
-    function changeDetailsBlock(checkedMethod) {
-        if (checkedMethod !== 'billie') {
-            setBillingDetailsRowVisibility(true);
-        }
-
-        switch (checkedMethod) {
-            case 'paypal':
-                hideCardDetails();
-                showPlaceOrder();
-                hideBillingAddres();
-                break;
-
-            case 'klarna':
-                hideBillingAddres();
-                break;
-
-            case 'billie':
-                detailsLabel = {
-                    ...detailsLabel,
-                    labelText: 'Name on Billie account',
-                    buttonText: 'Pay with Billie',
-                };
-                changeLabelText(detailsLabel);
-
-                setBillieStepVisibility(false);
-                resetBillieRepaymentSelection();
-                showBillieBusiness();
-                break;
-
-            case 'clearpay':
-                detailsLabel = {
-                    ...detailsLabel,
-                    labelText: 'Name on Clearpay account',
-                    buttonText: 'Pay with Clearpay',
-                };
-                prevClearableMethod === 'card' && clearInputFields();
-                changeLabelText(detailsLabel);
-                prevClearableMethod = checkedMethod;
-                break;
-
-            case 'apple':
-                hideCardDetails();
-                hidePlaceOrder();
-                hideBillingAddres();
-                break;
-
-            case 'google':
-                hideCardDetails();
-                hidePlaceOrder();
-                hideBillingAddres();
-                break;
-
-            case 'card':
-                detailsLabel = {
-                    ...detailsLabel,
-                    labelText: 'Name on card',
-                    buttonText: 'Enter card details',
-                };
-                prevClearableMethod === 'clearpay' && clearInputFields();
-                changeLabelText(detailsLabel);
-                prevClearableMethod = checkedMethod;
-                break;
-
-            default:
-                showPlaceOrder();
-        }
-    }
-
-    function hideCardDetails() {
-        elements.$cardDetails.addClass(elements.hiddenCardDetailsClass);
-    }
-
-    function hideBillingAddres() {
-        elements.$billingAddress.addClass(elements.hiddenClass);
-    }
-
-    function changeLabelText(params) {
-        const { inputName, labelText, buttonName, buttonText } = params;
-
-        elements.$billingAddress.removeClass(elements.hiddenClass);
-
-        let labelElement = elements.$billingAddress.find('[for="' + inputName + '"]');
-        let buttonElement = elements.$billingAddress.find('.' + buttonName + ' .btn__text');
-
-        labelElement && labelElement.text(labelText);
-        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 init() {
-        const paymentMethods = getPaymentMethods();
-        initBillieBusinessTypeToggle();
-        hideBillieBusiness();
-
-        $(document).on('change', 'input[name="repaymentTerms"]', function () {
-            const currentMethod = $(elements.paymentInputName + ':checked').val();
-            if (currentMethod !== 'billie') return;
-
-            const hasSelection = $('input[name="repaymentTerms"]:checked').length > 0;
-            setBillieStepVisibility(hasSelection);
-
-            const $row = $(this).closest('.form-row[data-row-required]');
-            $row.removeClass('form-row_validation-error').find('.form-row__error').remove();
-        });
-
-        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);
-
-            prevPaymentMethod = checkedMethod;
-        });
-
-        $('.btn-new-card').on('click', function () {
-            $('[data-new-card]').show();
-            $('[data-existing-card]').hide();
-            return false;
-        });
-
-        $('.btn-back-to-existing-card').on('click', function () {
-            $('[data-new-card]').hide();
-            $('[data-existing-card]').show();
-            return false;
-        });
-
-        prevPaymentMethod = $(elements.paymentInputName + ':checked').val() || null;
-
-        if (!$modal.length) return;
-
-        if (typeof window.onbeforeprint !== 'undefined') {
-            window.onbeforeprint = preparePage;
-            window.onafterprint = resetPage;
-        } else if (window.matchMedia) {
-            var mediaQueryList = window.matchMedia('print');
-            mediaQueryList.addListener(function (mql) {
-                if (mql.matches) {
-                    preparePage();
-                } else {
-                    resetPage();
-                }
-            });
+  }
+
+  function hideCardDetails() {
+    elements.$cardDetails.addClass(elements.hiddenCardDetailsClass);
+  }
+
+  function hideBillingAddres() {
+    elements.$billingAddress.addClass(elements.hiddenClass);
+  }
+
+  function changeLabelText(params) {
+    const { inputName, labelText, buttonName, buttonText } = params;
+
+    elements.$billingAddress.removeClass(elements.hiddenClass);
+
+    let labelElement = elements.$billingAddress.find('[for="' + inputName + '"]');
+    let buttonElement = elements.$billingAddress.find('.' + buttonName + ' .btn__text');
+
+    labelElement && labelElement.text(labelText);
+    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 init() {
+    const paymentMethods = getPaymentMethods();
+    initBillieBusinessTypeToggle();
+    hideBillieBusiness();
+
+    $(document).on('change', 'input[name="repaymentTerms"]', function() {
+      const currentMethod = $(elements.paymentInputName + ':checked').val();
+      if (currentMethod !== 'billie') return;
+
+      const hasSelection = $('input[name="repaymentTerms"]:checked').length > 0;
+      setBillieStepVisibility(hasSelection);
+
+      const $row = $(this).closest('.form-row[data-row-required]');
+      $row.removeClass('form-row_validation-error')
+        .find('.form-row__error').remove();
+    });
+
+    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);
+
+      prevPaymentMethod = checkedMethod;
+    });
+
+    $('.btn-new-card').on('click', function() {
+      $('[data-new-card]').show();
+      $('[data-existing-card]').hide();
+      return false;
+    });
+
+    $('.btn-back-to-existing-card').on('click', function() {
+      $('[data-new-card]').hide();
+      $('[data-existing-card]').show();
+      return false;
+    });
+
+    prevPaymentMethod = $(elements.paymentInputName + ':checked').val() || null;
+
+    if (!$modal.length) return;
+
+    if (typeof (window.onbeforeprint) !== 'undefined') {
+      window.onbeforeprint = preparePage;
+      window.onafterprint = resetPage;
+    } else if (window.matchMedia) {
+      var mediaQueryList = window.matchMedia('print');
+      mediaQueryList.addListener(function(mql) {
+        if (mql.matches) {
+          preparePage();
+        } else {
+          resetPage();
         }
+      });
     }
+  }
 
-    init();
+  init();
 })();