iolovolio/components/checkout/checkout.js

$(document).ready( () => {
  console.log('Load component - checkout')

  const component = $('.component-checkout')

  if(component.length) {
    const place = component.find('.place-order')
    const extraAddress = component.find('.different-address')
    const extraAddressRadio = component.find('input[name="other_address"]')
    const toggleLogin = component.find('.toggle-login')
    const toggleQuestion = component.find('.question')
    const loginForm = component.find('.login-form')
    const newUserForm = component.find('.new-user-form')
    const loggedUid = component.find('.uid').length ? component.find('.uid').val() : null

    let hasExtraAddress = false
    let isNewUser = newUserForm.hasClass('logged') ? false : true

    place.off('.click').on('click.click', () => {
      checkForm()
    })

    toggleLogin.off('.click').on('click.click', () => {
      isNewUser = !isNewUser

      if(isNewUser) {
        toggleLogin.html('Accedi')
        toggleQuestion.html('Sei già nostro cliente?')
        loginForm.stop().fadeOut( () => {
          newUserForm.stop().slideDown({
            start: () => { newUserForm.css({ display: "flex" }) }
          })
        })

      } else {
        toggleLogin.html('Registrati')
        toggleQuestion.html('Non sei nostro cliente?')
        newUserForm.stop().fadeOut( () => {
          loginForm.stop().slideDown({
            start: () => { loginForm.css({ display: "flex" }) }
          })
        })
      }
    })

    extraAddressRadio.off('.click').on('click.click', (e) => {
      const checked = $(e.currentTarget).val()
      hasExtraAddress = checked == 'yes'
      if(checked == 'yes') {
        extraAddress.stop().slideDown({
          start: () => { extraAddress.css({ display: "flex" }) }
        })
      } else {
        extraAddress.stop().slideUp()
      }
    })

    const checkForm = () => {
      const inputs = component.find('.input')
      const passwords = component.find('.input[type="password"]')
      let errors = 0

      inputs.each( (i,e) => {
        const input = $(e)
        const type = input.prop('type')
        const required = input.prop('required')

        if(required) {
          switch(type) {
            case 'text':
            case 'select-one':
              if(['x_address', 'x_city', 'x_zip_code', 'x_province'].indexOf(input.prop('name')) > -1) {
                if(hasExtraAddress) {
                  if(!input.val().length) {
                    input.addClass('error')
                    errors++
                  } else { input.removeClass('error') }
                }
              } else {
                if(!input.val().length) {
                  input.addClass('error')
                  errors++
                } else { input.removeClass('error') }
              }
              break;
            case 'email':
              if(!/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
                  .test(input.val())) {
                input.addClass('error')
                errors++
              } else { input.removeClass('error') }
              break;
            case 'password':
              if(!/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&^+-])[A-Za-z\d@$!%*#?&^+-]{8,}$/
                  .test(input.val())) {
                input.addClass('error')
                errors++
              } else { input.removeClass('error') }
              break;
            case 'checkbox':
              if(!input.is(':checked')) {
                input.closest('.checkbox').addClass('error')
                errors++
              } else {
                input.closest('.checkbox').removeClass('error')
              }
              break;
          }
        }
      })

      if(passwords[0].value != passwords[1].value) {
        $(passwords[1]).addClass('error')
        errors++
      } else {
        $(passwords[1]).removeClass('error')
      }

      if(!errors) {
        let body = {}
        inputs.each( (i,e) => {
          const input = $(e)
          const type = input.prop('type')
          const name = input.prop('name')

          if(['x_address', 'x_city', 'x_zip_code', 'x_province'].indexOf(name) > -1) {
            if(hasExtraAddress) {
              body[name] = input.val()
            }
          } else {
            body[name] = input.val()
          }
        })

        grecaptcha.ready(() => {
          grecaptcha.execute(ENV.RECAPTCHA_SITE_KEY, {action: 'submit'}).then((token) => {
            placeOrder(body, isNewUser)
          })
        })


      }
    }

    const placeOrder = (profile, isNewUser) => {

      window.Spinner('show')

      const placeOrderCall = (profile, cartItems, token, uid) => {

        let amount = 0
        let shipping = 10

        $.each(cartItems, (i,e) => {
          amount += e.price * e.qty
        })

        const cart = [{
          amount: { currency_code: 'EUR', value: amount + shipping },
          shipping: {
            address: {
              address_line_1: profile.address,
              postal_code: profile.zip_code,
              admin_area_1: profile.province,
              admin_area_2: profile.city,
              country_code: 'IT'
            }
          }
        }]


        Apis.checkout(cart, token, uid).then( (data) => {
          const capture = data.links.find(item => item.rel == 'capture')
          const approve = data.links.find(item => item.rel == 'approve')
          sessionStorage.setItem('order', JSON.stringify({
            profile: profile,
            cartItems: cartItems,
            token: data.id,
            uid: uid,
            amount: amount
          }))
          window.location = approve.href
        }).catch( (error) => {
          console.error(error)
        })
      }

      Apis.getCart().then( (data) => {
        const cartItems = data.cart

        Apis.getToken().then( (data) => {
          const token = data.access_token

          if(isNewUser) {
            Apis.addUser(profile).then( (data) => {
              placeOrderCall(profile, cartItems, token, data.id)
            }).catch( (error) => {
              console.error(error)
            })
          } else {
            placeOrderCall(profile, cartItems, token, loggedUid)
          }

        }).catch( (error) => {
          console.error(error)
        })
      }).catch( (error) => {
        console.error(error)
      })
    }
  }
})