pricing->addtocart->login|register->checkout page OK

web/themes/custom/materiotheme/vuejs/components/Content/Product.vue

@@ -31,7 +31,7 @@
       :styles="{width:'500px', height:'100%'}"
     >
       <h2>Please login or register before continue.</h2>
-      <LoginRegister @onLogedIn="logedIn" @onRegistered="registered" />
+      <LoginRegister @onLogedIn="onLogedIn" @onRegistered="onRegistered" />
     </Modal>
 
   </article>
@@ -74,41 +74,82 @@ export default {
       console.log('checkaddtocart');
 
       if(!this.isloggedin){
-        // TODO: show popup login or register
+        // show popup for login or register
+        // login or register event will be catched by onLogedin or onRegistered
         this.showLoginModal = true
-        // TODO: rest login or register
-        // TODO: rest login
-        // TODO: this.addtocart()
       }else{
+        // if already logedin directly goes to cart operations
         this.addtocart()
       }
     },
-    logedIn () {
-      console.log('Product: logedIn');
+    // event bubbled from modal login form
+    onLogedIn () {
+      console.log('Product: onLogedIn');
       this.addtocart()
     },
-    registered () {
-      console.log('Product: registered');
+    // event bubbled from modal register form
+    onRegistered () {
+      console.log('Product: onRegistered');
       this.addtocart()
     },
+    getCarts () {
+      return REST.get(`/cart?_format=json`)
+        // .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) {
+      let promises = [];
+      // clear each cart as a promise
+      for (var 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 () {
       console.log("addtocart")
-
-      REST.post(`/cart/add?_format=json`, [{
-        "purchased_entity_type": "commerce_product_variation",
-        "purchased_entity_id": this.product.variation_id,
-        "quantity": this.quantity
-      }])
-        .then(({ data }) => {
-          console.log('product add to cart REST: data', data)
-          this.closeModal()
-          // TODO: redirect to /cart
+      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": this.product.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)
+                })
+            })
         })
-        .catch(( error ) => {
-            console.warn('Issue with product add to cart', error)
-            Promise.reject(error)
-        })
-
     }
   },
   components: {