wickes-css2 2.105.0-develop.2 → 2.105.0-develop.4

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

@@ -1,307 +1,309 @@
 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);
-  }
-
-  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);
+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);
     }
 
-    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 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 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 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();
+                }
+            });
         }
-      });
     }
-  }
 
-  init();
+    init();
 })();