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

config/sync/core.extension.yml

@@ -117,6 +117,7 @@ module:
   path: 0
   path_alias_xt: 0
   pathologic: 0
+  permissions_filter: 0
   persistent_login: 0
   profile: 0
   recurring_period: 0

config/sync/language/fr/profile.type.customer.yml

@@ -1 +1,2 @@
 label: Client
+display_label: 'Informations sur le client'

web/themes/custom/materiotheme/assets/dist/main.css

@@ -1250,6 +1250,10 @@ header[role="banner"] {
         margin: 0; }
         header[role="banner"] #block-userlogin .item-list ul li a {
           font-size: 0.756em; }
+  header[role="banner"] #block-userblock h2 {
+    display: none; }
+  header[role="banner"] #block-userblock a {
+    margin-right: 1em; }
   header[role="banner"] #block-header {
     margin-right: 1em;
     padding-left: 1em;

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -61,11 +61,11 @@ import 'theme/assets/styles/main.scss'
         initVRouter();
         initVSiteBrandingBlock()
         initVPagetitleBlock()
-        initVUserBlock()
         initVHeaderMenu()
         initVMainContent()
         initVSearchBlock()
       }
+      initVUserBlock()
     }
 
     function initVRouter(){

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -125,6 +125,18 @@ header[role="banner"]{
     }
   }
 
+  // non-vue userblock
+  #block-userblock{
+    h2{display:none;}
+    a{
+      margin-right: 1em;
+    }
+  }
+  // vue userblock
+  #user-tools{
+
+  }
+
   // menu
   #block-header{
     margin-right: 1em;

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 () {
+    // event bubbled from modal login form
-      console.log('Product: logedIn');
+    onLogedIn () {
+      console.log('Product: onLogedIn');
       this.addtocart()
     },
-    registered () {
+    // event bubbled from modal register form
-      console.log('Product: registered');
+    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")
-
+      this.getCarts()
-      REST.post(`/cart/add?_format=json`, [{
+        .then(({data}) => {
-        "purchased_entity_type": "commerce_product_variation",
+          console.log('current user carts: data', data)
-        "purchased_entity_id": this.product.variation_id,
+          this.clearCarts(data)
-        "quantity": this.quantity
+            .then(() => {
-      }])
+              console.log('all carts cleared');
-        .then(({ data }) => {
+              // fill the cart with new product
-          console.log('product add to cart REST: data', data)
+              REST.post(`/cart/add?_format=json`, [{
-          this.closeModal()
+                "purchased_entity_type": "commerce_product_variation",
-          // TODO: redirect to /cart
+                "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: {

web/themes/custom/materiotheme/vuejs/store/modules/user.js

@@ -66,7 +66,7 @@ export default {
       state.isloggedin = false
       state.logout_token = null
       if (state.isAdmin){
-
+        // TODO: what if on a page where login is needed (as commerce checkout and cart)
         window.location.reload(true);
       }
       state.asAdmin = false