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/components/Pages/Pricing.vue

@@ -1,11 +1,11 @@
 <template>
   <div id="pricing">
-    <div class="loading" v-if="!pricing.length">
+    <div class="loading" v-if="!products.length">
       <span>Loading ...</span>
     </div>
     <Product
       v-else
-      v-for="product in pricing"
+      v-for="product in products"
       v-bind:key="product.uuid"
       :product="product"
     />
@@ -27,16 +27,16 @@ export default {
   // },
   computed: {
     ...mapState({
-      pricing: state => state.Pages.pricing
+      products: state => state.Pages.products
     })
   },
   created(){
-    if(!this.pricing.length)
-      this.getPricing()
+    if(!this.products.length)
+      this.getProducts()
   },
   methods: {
     ...mapActions({
-      getPricing: 'Pages/getPricing'
+      getProducts: 'Pages/getProducts'
     })
   },
   components: {