API docs, vuex stores refactor part 1 + minor fixes

README.md

@@ -95,8 +95,7 @@ Try out our open demo and if you like it **first give us some star on Github ★
         <a href="https://demo-magento-checkout.vuestorefront.io">
           demo-magento-checkout.vuestorefront.io
         </a>
-      </td>      
-
+      </td>
 </tr>
   </tbody>
 </table>
@@ -347,6 +346,15 @@ Vue Storefront is a Community effort brought to You by our great Core Team and s
           >
         </a>
       </td>
+      <td align="center" valign="middle">
+        <a href="https://magedirect.co/">
+          <img
+            src="https://user-images.githubusercontent.com/18116406/38415925-4a31e358-3993-11e8-9bee-b2b9af95d305.png"
+            alt="MageDirect"
+            height="50"
+          >
+        </a>
+      </td>
     </tr>
   </tbody>
 </table>

core/app.js

@@ -5,6 +5,7 @@ import router from 'core/router'
 import config from 'config'
 import appExtend from 'theme/app-extend'
 import { sync } from 'vuex-router-sync'
+import themeModules from 'theme/store'
 
 import { registerTheme, plugins, mixins, filters } from 'core/lib/themes'
 import registerExtensions from 'core/lib/extensions'
@@ -16,6 +17,13 @@ import Meta from 'vue-meta'
 import i18n from 'core/lib/i18n'
 import VueOffline from 'vue-offline'
 
+if (themeModules) {
+  for (const moduleName of Object.keys(themeModules)) {
+    console.log('Registering custom, theme Vuex store as module', moduleName)
+    store.registerModule(moduleName, themeModules[moduleName])
+  }
+}
+
 Vue.use(Vuelidate)
 Vue.use(VueLazyload, {attempt: 2})
 Vue.use(Meta)

core/helpers/index.js

@@ -27,9 +27,8 @@ export function breadCrumbRoutes (categoryPath) {
 }
 export function productThumbnailPath (product, ignoreConfig = false) {
   let thumbnail = product.image
-  if (product.hasOwnProperty('configurable_children') &&
-    product.configurable_children.length && (ignoreConfig || !product.is_configured) &&
-    ('image' in product.configurable_children[0])
+  if ((product.type_id && product.type_id === 'configurable') && product.hasOwnProperty('configurable_children') &&
+    product.configurable_children.length && (ignoreConfig || !product.is_configured)
   ) {
     thumbnail = product.configurable_children[0].image
   }

core/lib/i18n.js

@@ -13,4 +13,5 @@ const i18n = new VueI18n({
   messages // set locale messages
 })
 
+global.i18n = i18n
 export default i18n

core/plugins/event-bus/index.js

@@ -73,4 +73,5 @@ const EventBusPlugin = {
   }
 }
 
+global.eventBus = EventBus
 export { EventBus as default, EventBusPlugin }

core/store/helpers/index.js

@@ -0,0 +1,11 @@
+/**
+ * Create slugify -> "create-slugify" permalink  of text
+ * @param {String} text
+ */
+export function slugify (text) {
+  return text.toString().toLowerCase()
+    .replace(/\s+/g, '-') // Replace spaces with -
+    .replace(/&/g, '-and-') // Replace & with 'and'
+    .replace(/[^\w-]+/g, '') // Remove all non-word chars
+    .replace(/--+/g, '-') // Replace multiple - with single -
+}

core/store/index.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import * as types from './mutation-types'
 import localForage from 'localforage'
-import UniversalStorage from 'core/lib/storage'
+import UniversalStorage from './lib/storage'
 import order from './modules/order'
 import product from './modules/product'
 import category from './modules/category'
@@ -22,7 +22,6 @@ import social from './modules/social-tiles'
 import claims from './modules/claims'
 import sync from './modules/sync'
 import promoted from './modules/promoted-offers'
-import themeModules from 'theme/store'
 
 Vue.prototype.$db = {
   ordersCollection: new UniversalStorage(localForage.createInstance({
@@ -121,63 +120,63 @@ const plugins = [
   store => {
     store.subscribe((mutation, state) => {
       let nameArray = mutation.type.split('/')
-      let nameBegin, nameEnd
+      let storeName, actionName
       if (nameArray.length) {
-        nameBegin = nameArray[0]
-        nameEnd = nameArray[nameArray.length - 1]
+        storeName = nameArray[0]
+        actionName = nameArray.slice(1).join('/')
       } else {
         console.error('Store mutation name is incorrectly formed')
       }
 
-      if (nameBegin === types.SN_CART) { // check if this mutation is cart related
+      if (storeName === types.SN_CART) { // check if this mutation is cart related
         global.db.cartsCollection.setItem('current-cart', state.cart.cartItems).catch((reason) => {
           console.error(reason) // it doesn't work on SSR
         }) // populate cache
         global.db.cartsCollection.setItem('current-cart-token', state.cart.cartServerToken).catch((reason) => {
           console.error(reason)
         })
       }
-      if (nameBegin === types.SN_WISHLIST) { // check if this mutation is wishlist related
+      if (storeName === types.SN_WISHLIST) { // check if this mutation is wishlist related
         global.db.wishlistCollection.setItem('current-wishlist', state.wishlist.itemsWishlist).catch((reason) => {
           console.error(reason) // it doesn't work on SSR
         })
       }
-      if (nameBegin === types.SN_COMPARE) { // check if this mutation is compare related
+      if (storeName === types.SN_COMPARE) { // check if this mutation is compare related
         global.db.compareCollection.setItem('current-compare', state.compare.itemsCompare).catch((reason) => {
           console.error(reason) // it doesn't work on SSR
         })
       }
-      if (nameEnd === types.USER_INFO_LOADED) { // check if this mutation is user related
+      if (actionName === types.USER_INFO_LOADED) { // check if this mutation is user related
         global.db.usersCollection.setItem('current-user', state.user.current).catch((reason) => {
           console.error(reason) // it doesn't work on SSR
         }) // populate cache
       }
-      if (nameEnd === types.USER_ORDERS_HISTORY_LOADED) { // check if this mutation is user related
+      if (actionName === types.USER_ORDERS_HISTORY_LOADED) { // check if this mutation is user related
         global.db.ordersHistoryCollection.setItem('orders-history', state.user.orders_history).catch((reason) => {
           console.error(reason) // it doesn't work on SSR
         }) // populate cache
       }
-      if (nameEnd === types.USER_TOKEN_CHANGED) { // check if this mutation is user related
+      if (actionName === types.USER_TOKEN_CHANGED) { // check if this mutation is user related
         global.db.usersCollection.setItem('current-token', state.user.token).catch((reason) => {
           console.error(reason) // it doesn't work on SSR
         }) // populate cache
       }
-      if (nameBegin === types.SN_CHECKOUT) {
-        if (nameEnd === types.CHECKOUT_SAVE_PERSONAL_DETAILS) {
+      if (storeName === types.SN_CHECKOUT) {
+        if (actionName === types.CHECKOUT_SAVE_PERSONAL_DETAILS) {
           global.db.checkoutFieldsCollection.setItem('personal-details', state.checkout.personalDetails).catch((reason) => {
             console.error(reason) // it doesn't work on SSR
           }) // populate cache
-        } else if (nameEnd === types.CHECKOUT_SAVE_SHIPPING_DETAILS) {
+        } else if (actionName === types.CHECKOUT_SAVE_SHIPPING_DETAILS) {
           global.db.checkoutFieldsCollection.setItem('shipping-details', state.checkout.shippingDetails).catch((reason) => {
             console.error(reason) // it doesn't work on SSR
           }) // populate cache
-        } else if (nameEnd === types.CHECKOUT_SAVE_PAYMENT_DETAILS) {
+        } else if (actionName === types.CHECKOUT_SAVE_PAYMENT_DETAILS) {
           global.db.checkoutFieldsCollection.setItem('payment-details', state.checkout.paymentDetails).catch((reason) => {
             console.error(reason) // it doesn't work on SSR
           }) // populate cache
         }
       }
-      if (nameEnd === types.USER_UPDATE_PREFERENCES) {
+      if (actionName === types.USER_UPDATE_PREFERENCES) {
         global.db.newsletterPreferencesCollection.setItem('newsletter-preferences', state.user.newsletter).catch((reason) => {
           console.error(reason)
         })
@@ -186,7 +185,7 @@ const plugins = [
   }
 ]
 
-export default new Vuex.Store({
+export default new Vuex.Store({ // TODO: refactor it to return just the constructor to avoid event-bus and i18n shenigans; challenge: the singleton management OR add i18n and eventBus here to rootStore instance?
   modules: {
     order,
     product,
@@ -206,8 +205,7 @@ export default new Vuex.Store({
     tax,
     claims,
     sync,
-    promoted,
-    ...themeModules
+    promoted
   },
   state,
   mutations,

core/store/lib/event-bus.js

@@ -0,0 +1,6 @@
+import Vue from 'vue'
+
+if (!global.eventBus) {
+  global.eventBus = new Vue()
+}
+export default global.eventBus

core/store/lib/i18n.js

@@ -0,0 +1,9 @@
+let i18n = global.i18n // TODO: we should have translation support separated from the VS core
+if (!global.i18n) {
+  i18n = {
+    t: function (key) {
+      return key
+    }
+  }
+}
+export default i18n

core/lib/search.js → core/store/lib/search.js

@@ -1,6 +1,6 @@
 import config from 'config'
 import _ from 'lodash'
-import { slugify } from 'core/helpers'
+import { slugify } from '../helpers'
 import hash from 'object-hash'
 
 let es = require('elasticsearch')

core/store/modules/attribute/actions.js

@@ -1,6 +1,6 @@
 import * as types from '../../mutation-types'
 import bodybuilder from 'bodybuilder'
-import { quickSearchByQuery } from 'core/lib/search'
+import { quickSearchByQuery } from '../../lib/search'
 
 export default {
   /**

core/store/modules/attribute/mutations.js

@@ -1,5 +1,5 @@
 import * as types from '../../mutation-types'
-import { entityKeyName } from 'core/lib/entities'
+import { entityKeyName } from '../../lib/entities'
 
 export default {
   /**

core/store/modules/cart/actions.js

@@ -1,8 +1,8 @@
 import config from 'config'
 import * as types from '../../mutation-types'
 import rootStore from '../../'
-import EventBus from 'core/plugins/event-bus'
-import i18n from 'core/lib/i18n'
+import EventBus from '../../lib/event-bus'
+import i18n from '../../lib/i18n'
 import hash from 'object-hash'
 
 const CART_PULL_INTERVAL_MS = 2000
@@ -266,15 +266,18 @@ export default {
         silent: true
       }, { root: true }).then(task => {
         let backendMethods = task.result
-        let paymentMethods = context.rootGetters['payment/paymentMethods'].slice(0) // copy
+        let paymentMethods = context.rootGetters['payment/paymentMethods'].slice(0).filter((itm) => {
+          return !(itm.is_server_method)
+        }) // copy
         let uniqueBackendMethods = []
         for (let i = 0; i < backendMethods.length; i++) {
           if (!paymentMethods.find(item => item.code === backendMethods[i].code)) {
+            backendMethods[i].is_server_method = true
             paymentMethods.push(backendMethods[i])
             uniqueBackendMethods.push(backendMethods[i])
           }
         }
-        context.commit(types.CART_UPD_PAYMENT, paymentMethods)
+        rootStore.dispatch('payment/replaceMethods', paymentMethods, { _root: true })
         rootStore.commit('setBackendPaymentMethods', uniqueBackendMethods)
       }).catch(e => {
         console.error(e)

core/store/modules/cart/getters.js

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import i18n from 'core/lib/i18n'
+import i18n from '../../lib/i18n'
 
 export default {
   totals (state) {

core/store/modules/cart/index.js

@@ -2,10 +2,10 @@
 import actions from './actions'
 import getters from './getters'
 import mutations from './mutations'
-import EventBus from 'core/plugins/event-bus'
+import EventBus from '../../lib/event-bus'
 import rootStore from '../../'
 import * as types from '../../mutation-types'
-import i18n from 'core/lib/i18n'
+import i18n from '../../lib/i18n'
 
 const MAX_BYPASS_COUNT = 10
 

core/store/modules/cart/mutations.js

@@ -1,5 +1,5 @@
 import * as types from '../../mutation-types'
-import EventBus from 'core/plugins/event-bus'
+import EventBus from '../../lib/event-bus'
 import config from 'config'
 
 export default {

core/store/modules/category/actions.js

@@ -1,7 +1,7 @@
 import * as types from '../../mutation-types'
-import { quickSearchByQuery } from 'core/lib/search'
-import { entityKeyName } from 'core/lib/entities'
-import EventBus from 'core/plugins/event-bus'
+import { quickSearchByQuery } from '../../lib/search'
+import { entityKeyName } from '../../lib/entities'
+import EventBus from '../../lib/event-bus'
 const bodybuilder = require('bodybuilder')
 
 export default {

core/store/modules/category/mutations.js

@@ -1,7 +1,7 @@
 import * as types from '../../mutation-types'
-import { slugify } from 'core/helpers'
-import { entityKeyName } from 'core/lib/entities'
-import EventBus from 'core/plugins/event-bus'
+import { slugify } from '../../helpers'
+import { entityKeyName } from '../../lib/entities'
+import EventBus from '../../lib/event-bus'
 
 export default {
   [types.CATEGORY_UPD_CURRENT_CATEGORY] (state, category) {

core/store/modules/checkout/actions.js

@@ -1,6 +1,6 @@
 import * as types from '../../mutation-types'
-import EventBus from 'core/plugins/event-bus'
-import i18n from 'core/lib/i18n'
+import EventBus from '../../lib/event-bus'
+import i18n from '../../lib/i18n'
 
 export default {
   /**

core/store/modules/compare/actions.js

@@ -1,7 +1,7 @@
 import * as types from '../../mutation-types'
-import EventBus from 'core/plugins/event-bus'
+import EventBus from '../../lib/event-bus'
 import { htmlDecode } from 'core/filters'
-import i18n from 'core/lib/i18n'
+import i18n from '../../lib/i18n'
 
 export default {
   load (context) {

core/store/modules/order/actions.js

@@ -1,5 +1,5 @@
 import * as types from '../../mutation-types'
-import EventBus from 'core/plugins/event-bus'
+import EventBus from '../../lib/event-bus'
 import { ValidationError } from 'core/lib/exceptions'
 const Ajv = require('ajv') // json validator
 

core/store/modules/order/mutations.js

@@ -1,6 +1,6 @@
 import * as types from '../../mutation-types'
-import * as entities from 'core/lib/entities'
-import EventBus from 'core/plugins/event-bus'
+import * as entities from '../../lib/entities'
+import EventBus from '../../lib/event-bus'
 import config from 'config'
 
 export default {

core/store/modules/payment/index.js

@@ -6,11 +6,17 @@ export default {
   mutations: {
     addMethod (state, paymentMethod) {
       state.methods.push(paymentMethod)
+    },
+    replaceMethods (state, paymentMethods) {
+      state.methods = paymentMethods
     }
   },
   actions: {
     addMethod ({commit}, paymentMethod) {
       commit('addMethod', paymentMethod)
+    },
+    replaceMethods ({commit}, paymentMethods) {
+      commit('replaceMethods', paymentMethods)
     }
   },
   getters: {