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

config/sync/commerce_checkout.commerce_checkout_flow.materio_checkout_flow.yml

@@ -17,36 +17,42 @@ configuration:
       allow_registration: true
       step: login
       weight: 0
+    email_registration_login:
+      allow_guest_checkout: true
+      allow_registration: true
+      step: login
+      weight: 1
+    contact_information:
+      double_entry: false
+      step: order_information
+      weight: 2
+    payment_information:
+      step: order_information
+      weight: 3
     review:
       step: review
       weight: 4
+    payment_process:
+      capture: true
+      step: payment
+      weight: 5
     completion_message:
+      message:
+        value: "Your order number is [commerce_order:order_number].\r\nYou can view your order on your account page when logged in."
+        format: plain_text
       step: complete
       weight: 6
     completion_register:
       step: complete
       weight: 7
     order_summary:
-      view: ''
+      view: commerce_checkout_order_summary
       step: _sidebar
       weight: 8
-    contact_information:
-      double_entry: false
-      step: order_information
-      weight: 2
-    payment_process:
-      capture: true
-      step: payment
-      weight: 5
-    payment_information:
-      step: order_information
-      weight: 3
     coupon_redemption:
       allow_multiple: false
       step: _sidebar
       weight: 9
-    email_registration_login:
+    email_registration_completion_registration:
-      allow_guest_checkout: true
+      step: _disabled
-      allow_registration: true
+      weight: 10
-      step: login
-      weight: 1

config/sync/core.entity_view_display.commerce_product_variation.materio_product_variation_type.order_summary.yml

@@ -0,0 +1,59 @@
+uuid: 1fb21500-e88c-4213-a350-d79575ab3b29
+langcode: en
+status: true
+dependencies:
+  config:
+    - commerce_product.commerce_product_variation_type.materio_product_variation_type
+    - core.entity_view_mode.commerce_product_variation.order_summary
+    - field.field.commerce_product_variation.materio_product_variation_type.billing_schedule
+    - field.field.commerce_product_variation.materio_product_variation_type.field_description
+    - field.field.commerce_product_variation.materio_product_variation_type.field_multiple
+    - field.field.commerce_product_variation.materio_product_variation_type.license_expiration
+    - field.field.commerce_product_variation.materio_product_variation_type.license_type
+    - field.field.commerce_product_variation.materio_product_variation_type.subscription_type
+  module:
+    - commerce_variation_cart_form
+    - text
+third_party_settings:
+  commerce_variation_cart_form:
+    combine: '1'
+id: commerce_product_variation.materio_product_variation_type.order_summary
+targetEntityType: commerce_product_variation
+bundle: materio_product_variation_type
+mode: order_summary
+content:
+  field_description:
+    weight: 2
+    label: hidden
+    settings: {  }
+    third_party_settings: {  }
+    type: text_default
+    region: content
+  product_id:
+    type: entity_reference_label
+    weight: 0
+    region: content
+    label: hidden
+    settings:
+      link: false
+    third_party_settings: {  }
+  title:
+    type: string
+    weight: 1
+    region: content
+    label: hidden
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
+hidden:
+  billing_schedule: true
+  commerce_variation_cart_form: true
+  field_multiple: true
+  langcode: true
+  license_expiration: true
+  license_type: true
+  list_price: true
+  price: true
+  search_api_excerpt: true
+  sku: true
+  subscription_type: true

config/sync/core.entity_view_mode.commerce_product_variation.order_summary.yml

@@ -0,0 +1,10 @@
+uuid: 9fdff172-c2b2-46a8-b998-b7a869e0de52
+langcode: en
+status: true
+dependencies:
+  module:
+    - commerce_product
+id: commerce_product_variation.order_summary
+label: 'Order Summary'
+targetEntityType: commerce_product_variation
+cache: true

config/sync/language/fr/views.view.commerce_checkout_order_summary.yml

@@ -10,8 +10,6 @@ display:
           sort_asc_label: Asc
           sort_desc_label: Desc
       fields:
-        quantity:
-          separator: ', '
         purchased_entity:
           separator: ', '
         total_price__number:

config/sync/views.view.commerce_checkout_order_summary.yml

@@ -84,74 +84,6 @@ display:
           hide_empty: false
           default_field_elements: true
       fields:
-        quantity:
-          id: quantity
-          table: commerce_order_item
-          field: quantity
-          relationship: order_items
-          group_type: group
-          admin_label: ''
-          label: ''
-          exclude: false
-          alter:
-            alter_text: true
-            text: '{{ quantity }} x'
-            make_link: false
-            path: ''
-            absolute: false
-            external: false
-            replace_spaces: false
-            path_case: none
-            trim_whitespace: false
-            alt: ''
-            rel: ''
-            link_class: ''
-            prefix: ''
-            suffix: ''
-            target: ''
-            nl2br: false
-            max_length: 0
-            word_boundary: true
-            ellipsis: true
-            more_link: false
-            more_link_text: ''
-            more_link_path: ''
-            strip_tags: false
-            trim: false
-            preserve_tags: ''
-            html: false
-          element_type: ''
-          element_class: ''
-          element_label_type: ''
-          element_label_class: ''
-          element_label_colon: false
-          element_wrapper_type: ''
-          element_wrapper_class: ''
-          element_default_classes: true
-          empty: ''
-          hide_empty: false
-          empty_zero: false
-          hide_alter_empty: true
-          click_sort_column: value
-          type: number_decimal
-          settings:
-            thousand_separator: ''
-            prefix_suffix: false
-            decimal_separator: .
-            scale: 0
-          group_column: value
-          group_columns: {  }
-          group_rows: true
-          delta_limit: 0
-          delta_offset: 0
-          delta_reversed: false
-          delta_first_last: false
-          multi_type: separator
-          separator: ', '
-          field_api_classes: false
-          entity_type: commerce_order_item
-          entity_field: quantity
-          plugin_id: field
         purchased_entity:
           id: purchased_entity
           table: commerce_order_item
@@ -192,7 +124,7 @@ display:
           element_class: ''
           element_label_type: ''
           element_label_class: ''
-          element_label_colon: true
+          element_label_colon: false
           element_wrapper_type: ''
           element_wrapper_class: ''
           element_default_classes: true
@@ -203,7 +135,7 @@ display:
           click_sort_column: target_id
           type: entity_reference_entity_view
           settings:
-            view_mode: summary
+            view_mode: order_summary
           group_column: target_id
           group_columns: {  }
           group_rows: true
@@ -224,7 +156,7 @@ display:
           relationship: order_items
           group_type: group
           admin_label: ''
-          label: ''
+          label: TTC
           exclude: false
           alter:
             alter_text: false

config/sync/views.view.pricing_products.yml

@@ -5,6 +5,7 @@ dependencies:
   config:
     - commerce_product.commerce_product_type.materio_product_type
     - field.storage.commerce_product.body
+    - system.menu.header
   module:
     - commerce
     - commerce_product
@@ -452,6 +453,15 @@ display:
       group_by: false
       defaults:
         group_by: false
+      menu:
+        type: normal
+        title: Pricing
+        description: ''
+        expanded: false
+        parent: ''
+        weight: 3
+        context: '0'
+        menu_name: header
     cache_metadata:
       max-age: -1
       contexts:

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

@@ -2222,6 +2222,34 @@ article.card {
       #pricing-modal-login-register #login-register > section form input[type="password"] {
         max-width: 11em; }
 
+#main-content form.commerce-checkout-flow {
+  max-width: 641px; }
+  #main-content form.commerce-checkout-flow .layout-checkout-form {
+    display: flex;
+    flex-flow: column; }
+    #main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-main {
+      width: 100%;
+      float: none;
+      order: 2;
+      background-color: #ff9f50;
+      padding: 1em; }
+    #main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary {
+      width: 100%;
+      float: none;
+      order: 1; }
+      #main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary > h3 {
+        display: none; }
+      #main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-order-summary {
+        background-color: #69cdcf;
+        padding: 1em; }
+      #main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-coupon-redemption {
+        background-color: #50aa3c;
+        padding: 1em; }
+        #main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-coupon-redemption input[type="text"] {
+          width: 5em; }
+    #main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-footer {
+      order: 3; }
+
 body:not(.path-home) footer[role="contentinfo"] {
   display: none; }
 

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

@@ -1482,6 +1482,52 @@ article.card{
     }
   }
 }
+
+#main-content form.commerce-checkout-flow{
+  $w:3;
+  max-width: $column_width * $w + $column_goutiere * ($w - 1);
+  .layout-checkout-form{
+    display: flex;
+    flex-flow: column;
+    .layout-region-checkout-main{
+      // disable default style
+      width:100%;
+      float: none;
+      // apply custom style
+      order:2;
+      background-color: $color-webshowroom;
+      padding: 1em;
+    }
+    .layout-region-checkout-secondary{
+      // disable default style
+      width:100%;
+      float: none;
+      // apply custom style
+      order: 1;
+      // display: flex;
+      // flex-flow: row nowrap;
+      // >.checkout-pane{
+      //   flex: 0 0 50%;
+      // }
+      >h3{display:none;}
+      #edit-order-summary{
+        background-color: $color-base;
+        padding:1em;
+      }
+      #edit-coupon-redemption{
+        background-color: $color-showrooms;
+        padding:1em;
+        input[type="text"]{
+          width: 5em;
+        }
+      }
+    }
+    .layout-region-checkout-footer{
+      order: 3;
+    }
+  }
+}
+
 //  ___         _
 // | __|__  ___| |_ ___ _ _
 // | _/ _ \/ _ \  _/ -_) '_|

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 () {
+    onLogedIn (variation_id) {
-      console.log('Product: onLogedIn');
+      console.log('Product: onLogedIn. variation_id', variation_id);
-      this.addtocart()
+      this.addtocart(variation_id)
     },
     // event bubbled from modal register form
-    onRegistered () {
+    onRegistered (variation_id) {
-      console.log('Product: onRegistered');
+      console.log('Product: onRegistered. variation_id', variation_id);
-      this.addtocart()
+      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: {