dostavka_vodi/wp-content/themes/twentytwentyfour/assets/js/test1-checkout.js

(function () {
  const root = document.documentElement
  const phoneInput = document.getElementById('billing_phone')

  const digitsOnly = value => value.replace(/\D+/g, '')

  const maskPhone = value => {
    let digits = digitsOnly(value)

    if (digits.startsWith('8')) {
      digits = `7${digits.slice(1)}`
    }

    if (!digits.startsWith('7')) {
      digits = `7${digits}`
    }

    digits = digits.slice(0, 11)

    let result = '+7'

    if (digits.length > 1) result += ` (${digits.slice(1, 4)}`
    if (digits.length >= 4) result += ')'
    if (digits.length > 4) result += ` ${digits.slice(4, 7)}`
    if (digits.length > 7) result += `-${digits.slice(7, 9)}`
    if (digits.length > 9) result += `-${digits.slice(9, 11)}`

    return result
  }

  if (phoneInput) {
    phoneInput.addEventListener('input', event => {
      event.target.value = maskPhone(event.target.value)
    })

    phoneInput.form?.addEventListener('submit', () => {
      const digits = digitsOnly(phoneInput.value)
      phoneInput.setCustomValidity(digits.length < 11 ? 'Укажите корректный номер телефона' : '')
    })
  }

  const attachQuantityButtons = scope => {
    scope.querySelectorAll('.quantity').forEach(quantity => {
      if (quantity.dataset.enhanced === 'true') {
        return
      }

      const input = quantity.querySelector('.qty')

      if (!input) {
        return
      }

      quantity.dataset.enhanced = 'true'

      const minus = document.createElement('button')
      minus.type = 'button'
      minus.className = 'quantity-button quantity-button-minus'
      minus.textContent = '-'

      const plus = document.createElement('button')
      plus.type = 'button'
      plus.className = 'quantity-button quantity-button-plus'
      plus.textContent = '+'

      quantity.prepend(minus)
      quantity.append(plus)

      const step = Number(input.step || 1)
      const min = Number(input.min || 1)
      const max = input.max ? Number(input.max) : Number.POSITIVE_INFINITY

      minus.addEventListener('click', () => {
        const next = Math.max(min, Number(input.value || min) - step)
        input.value = String(next)
        input.dispatchEvent(new Event('change', { bubbles: true }))
      })

      plus.addEventListener('click', () => {
        const next = Math.min(max, Number(input.value || min) + step)
        input.value = String(next)
        input.dispatchEvent(new Event('change', { bubbles: true }))
      })
    })
  }

  const parseHTML = html => new window.DOMParser().parseFromString(html, 'text/html')

  const initCartAjax = () => {
    const pageCard = document.querySelector('.test1-cart-page .premium-form-card')
    const cartForm = pageCard?.querySelector('form.woocommerce-cart-form')

    if (!pageCard || !cartForm) {
      return
    }

    let updateTimer = null
    let submitIntent = null

    const setLoading = state => {
      pageCard.classList.toggle('is-loading', state)
    }

    const replaceCartMarkup = html => {
      const nextDocument = parseHTML(html)
      const nextCard = nextDocument.querySelector('.test1-cart-page .premium-form-card')

      if (!nextCard) {
        window.location.reload()
        return
      }

      pageCard.innerHTML = nextCard.innerHTML
      attachQuantityButtons(pageCard)
      initCartAjax()
    }

    const requestAndReplace = (url, options = {}) => {
      setLoading(true)

      return window.fetch(url, {
        credentials: 'same-origin',
        ...options,
      })
        .then(response => response.text())
        .then(html => {
          replaceCartMarkup(html)
        })
        .catch(() => {
          window.location.reload()
        })
        .finally(() => {
          setLoading(false)
        })
    }

    cartForm.querySelectorAll('button[name]').forEach(button => {
      button.addEventListener('click', () => {
        submitIntent = { name: button.name, value: button.value || '1' }
      })
    })

    cartForm.addEventListener('submit', event => {
      event.preventDefault()
      const formData = new window.FormData(cartForm)

      if (submitIntent?.name) {
        formData.append(submitIntent.name, submitIntent.value)
      }

      requestAndReplace(window.location.href, {
        method: 'POST',
        body: formData,
      })
    })

    cartForm.addEventListener('change', event => {
      if (!event.target.classList.contains('qty')) {
        return
      }

      const updateButton = cartForm.querySelector('button[name="update_cart"]')

      if (!updateButton) {
        return
      }

      clearTimeout(updateTimer)
      updateTimer = window.setTimeout(() => {
        submitIntent = { name: 'update_cart', value: updateButton.value || '1' }
        cartForm.requestSubmit()
      }, 250)
    })

    pageCard.querySelectorAll('.woocommerce-cart-form a.remove').forEach(link => {
      link.addEventListener('click', event => {
        event.preventDefault()
        requestAndReplace(link.href)
      })
    })
  }

  attachQuantityButtons(document)
  initCartAjax()
  root.classList.add('test1-checkout-enhanced')
})()