refactored front pricing to use graphql, refactored to add 2 products (web & web+showroom) each one with 2 variations (monthly, annual)

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

@@ -1,14 +1,17 @@
-// import { JSONAPI } from 'vuejs/api/json-axios'
 import { REST } from 'vuejs/api/rest-axios'
-// import { MA } from 'vuejs/api/ma-axios'
-// import qs from 'querystring-es3'
+
+import { MGQ } from 'vuejs/api/graphql-axios'
+import { print } from 'graphql/language/printer'
+import gql from 'graphql-tag'
+import productsGQL from 'vuejs/api/gql/products.fragment.gql'
 
 export default {
   namespaced: true,
 
   // initial state
   state: {
-    pricing: {}
+    products_ids: [],
+    products: []
   },
 
   // getters
@@ -16,23 +19,53 @@ export default {
 
   // mutations
   mutations: {
-    setPricing (state, page) {
-      state.pricing = page
+    setProductsIds (state, ids) {
+      state.products_ids = ids
+    },
+    setProducts (state, p) {
+      state.products = p
     }
   },
 
   // actions
   actions: {
-    getPricing ({ dispatch, commit, state }) {
+    getProducts({ dispatch, commit, state }) {
+      dispatch('loadProductsIds')
+    },
+    loadProductsIds({ dispatch, commit, state }) {
       REST.get('/pricing_rest?_format=json', {})
         .then(({ data }) => {
-          console.log('pricing REST: data', data)
-          commit('setPricing', data)
+          console.log('getProducts REST: data', data)
+          let ids = [];
+          for (var i = 0; i < data.length; i++) {
+            ids.push(data[i].product_id)
+          }
+          commit('setProductsIds', ids)
+          dispatch('loadProducts')
         })
         .catch((error) => {
           console.warn('Issue with pricing', error)
           Promise.reject(error)
         })
+    },
+    loadProducts({ dispatch, commit, state }) {
+      let ast = gql`{
+        products(ids: [${state.products_ids}]) {
+          ...ProductsFields
+        }
+      }
+      ${ productsGQL }
+      `
+      MGQ.post('', { query: print(ast) })
+        .then(( resp ) => {
+          console.log('loadProductsGQL resp', resp )
+          commit('setProducts', resp.data.data.products)
+        })
+        .catch(error => {
+          console.warn('Issue with loadProducts', error)
+          Promise.reject(error)
+        })
     }
+
   }
 }