refactored checkout flow on button click from pricing page, started to redsign the checkout page

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

@@ -17,9 +17,9 @@
         <button
           type="button"
           name="addtocart"
-          @click.stop="checkaddtocart"
+          @click.stop="checkaddtocart($event, variation.id)"
         >
-          Commander
+          {{ $t("default.Add to cart") }}
         </button>
       </div>
 
@@ -32,7 +32,11 @@
     >
       <section id="pricing-modal-login-register">
         <h2>{{ $t("materio.Please login or create a new account before ordering") }}</h2>
-        <LoginRegister @onLogedIn="onLogedIn" @onRegistered="onRegistered" />
+        <LoginRegister
+          :callbackargs="showLoginModal"
+          @onLogedIn="onLogedIn"
+          @onRegistered="onRegistered"
+        />
       </section>
     </Modal>
 
@@ -73,27 +77,27 @@ export default {
     closeModal () {
       this.showLoginModal = false;
     },
-    checkaddtocart() {
+    checkaddtocart(e, variation_id) {
       console.log('checkaddtocart');
 
       if(!this.isloggedin){
         // show popup for login or register
         // login or register event will be catched by onLogedin or onRegistered
-        this.showLoginModal = true
+        this.showLoginModal = variation_id
       }else{
         // if already logedin directly goes to cart operations
-        this.addtocart()
+        this.addtocart(variation_id)
       }
     },
     // event bubbled from modal login form
-    onLogedIn () {
-      console.log('Product: onLogedIn');
-      this.addtocart()
+    onLogedIn (variation_id) {
+      console.log('Product: onLogedIn. variation_id', variation_id);
+      this.addtocart(variation_id)
     },
     // event bubbled from modal register form
-    onRegistered () {
-      console.log('Product: onRegistered');
-      this.addtocart()
+    onRegistered (variation_id) {
+      console.log('Product: onRegistered. variation_id', variation_id);
+      this.addtocart(variation_id)
     },
     getCarts () {
       // this is bugging on stage
@@ -126,7 +130,7 @@ export default {
       // return all the promises as one
       return Promise.all(promises)
     },
-    addtocart () {
+    addtocart (variation_id) {
       console.log("addtocart")
       this.getCarts()
         .then(({data}) => {
@@ -137,7 +141,7 @@ export default {
               // 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,
+                "purchased_entity_id": variation_id,
                 "quantity": this.quantity
               }])
                 .then(({ data }) => {
@@ -146,7 +150,7 @@ export default {
                   // redirect to /cart
                   // window.location.href = "/cart"
                   // TODO: redirect to checkout instead of cart
-                  window.location.href = `/checkout/${data[0].order_id}/order_information`
+                  window.location.href = `/checkout/${data[0].order_id.target_id}/order_information`
                 })
                 .catch(( error ) => {
                     console.warn('Issue with product add to cart', error)

web/themes/custom/materiotheme/vuejs/components/Helper/LoginRegister.vue

@@ -24,16 +24,17 @@ export default {
     password:null,
     registerEmail:null
   }),
+  props:['callbackargs'],
   methods: {
     ...mapActions({
       userLogin: 'User/userLogin',
       userRegister: 'User/userRegister'
     }),
     onLogedIn () {
-      this.$emit('onLogedIn')
+      this.$emit('onLogedIn', this.callbackargs)
     },
     onRegistered () {
-      this.$emit('onRegistered')
+      this.$emit('onRegistered', this.callbackargs)
     }
   },
   components: {