materio-d8/web/themes/custom/materiotheme/vuejs/components/productsMixins.js

// https://forum.vuejs.org/t/how-to-use-helper-functions-for-imported-modules-in-vuejs-vue-template/6266/5

import { REST } from 'vuejs/api/rest-axios'
import Modal from 'vuejs/components/Helper/Modal'
import LoginRegister from 'vuejs/components/Helper/LoginRegister'
import { mapState } from 'vuex'

export default {
  components: {
    Modal,
    LoginRegister
  },
  computed: {
    ...mapState({
      isloggedin: state => state.User.isloggedin,
      isAdherent: state => state.User.isAdherent,
      csrftoken: state => state.User.csrftoken
    })
  },
  methods: {
    closeModal () {
      this.showLoginModal = false
    },
    checkaddtocart (e, variation_id) {
      console.log('checkaddtocart', e, variation_id, this.isloggedin)

      if (!this.isloggedin) {
        // show popup for login or register
        // login or register event will be catched by onLogedin or onRegistered
        // this.showLoginModal = variation_id
        this.showLoginModal(variation_id)
      } else {
        // if already logedin directly goes to cart operations
        this.addtocart(variation_id)
      }
    },
    showLoginModal (variation_id) {
      this.$modal.show(
        LoginRegister,
        // props
        {
          // item: this.item,
          header: 'materio.In order to be able to place your order, please log in or create your account',
          callbackargs: { variation_id: variation_id },
          // close: (variation_id) => { this.closeModal(variation_id) },
          onLogedInBack: (cba) => { this.onLogedIn(cba.variation_id) },
          onRegisteredBack: (cba) => { this.onRegistered(cba.variation_id) }
          // // not really an event
          // // more a callback function passed as prop to the component
          // addNoteId: (id) => {
          //   // no needs to refresh the entire item via searchresults
          //   // plus if we are in article, there is not searchresults
          //   // this.refreshItem({id: this.item.id})
          //   // instead create the note id directly
          //   this.item.note = { id: id }
          // }
        },
        // settings
        {
          name: 'modal-loginregister',
          draggable: false,
          classes: 'vm--modale-loginregister',
          width: '550px',
          height: '400px'
        }
      )
    },
    // event bubbled from modal login form
    onLogedIn (variation_id) {
      console.log('Product: onLogedIn. variation_id', variation_id)
      this.addtocart(variation_id)
    },
    // event bubbled from modal register form
    onRegistered (variation_id) {
      console.log('Product: onRegistered. variation_id', variation_id)
      this.addtocart(variation_id)
    },
    getCarts () {
      // this is bugging on stage
      return REST.get('/cart?_format=json', {}, { 'X-CSRF-Token': this.csrftoken })
        // .then(({ data }) => {
        //   console.log('current user carts: data', data)
        // })
        .catch((error) => {
          console.warn('Issue with get cart', error)
          Promise.reject(error)
        })
    },
    deleteCart (order_id) {
      console.log('deleting cart ', order_id)
      return REST.delete(`/cart/${order_id}/items?_format=json`)
        .then(({ data }) => {
          console.log(`product cart ${order_id} deleted: data`, data)
        })
        .catch((error) => {
          console.warn(`Issue with cart ${order_id} deleting`, error)
          Promise.reject(error)
        })
    },
    clearCarts (data) {
      const promises = []
      // clear each cart as a promise
      for (let i = 0; i < data.length; i++) {
        promises.push(this.deleteCart(data[i].order_id))
      }
      // return all the promises as one
      return Promise.all(promises)
    },
    addtocart (variation_id) {
      console.log('addtocart')

      // transition
      this.$modal.hide('modal-loginregister')
      document.getElementById('pricing').classList.add('loading')

      // handle the cart then redirect to checkout flow
      this.getCarts()
        .then(({ data }) => {
          console.log('current user carts: data', data)
          this.clearCarts(data)
            .then(() => {
              console.log('all carts cleared')
              // fill the cart with new product
              REST.post('/cart/add?_format=json', [{
                purchased_entity_type: 'commerce_product_variation',
                purchased_entity_id: variation_id,
                quantity: this.quantity
              }])
                .then(({ data }) => {
                  console.log('product added to cart: data', data)
                  this.closeModal()
                  // redirect to /cart
                  // window.location.href = "/cart"
                  // TODO: redirect to checkout instead of cart
                  window.location.href = `/checkout/${data[0].order_id}/order_information`
                })
                .catch((error) => {
                  console.warn('Issue with product add to cart', error)
                  Promise.reject(error)
                })
            })
        })
    }
  }
}