Merge master to develop

README.md

@@ -8,7 +8,7 @@
 ![Branch Develop](https://img.shields.io/badge/dev%20branch-develop-blue.svg)
 <a href="https://join.slack.com/t/vuestorefront/shared_invite/enQtMzA4MTM2NTE5NjM2LTI1M2RmOWIyOTk0MzFlMDU3YzJlYzcyYzNiNjUyZWJiMTZjZjc3MjRlYmE5ZWQ1YWRhNTQyM2ZjN2ZkMzZlNTg">![Branch Develop](https://img.shields.io/badge/community%20chat-slack-FF1493.svg)</a>
 
-Vue Storefront is a standalone PWA storefront for your eCommerce, possible to connect with any eCommerce backend (eg. Magento, <a href="https://github.com/DivanteLtd/coreshop-vsbridge">Pimcore/CoreShop</a>,  Prestashop or Shopware) through the API.
+Vue Storefront is a standalone PWA storefront for your eCommerce, possible to connect with any eCommerce backend (eg. Magento, <a href="https://github.com/DivanteLtd/coreshop-vsbridge">Pimcore/CoreShop</a>, [BigCommerce](https://github.com/DivanteLtd/bigcommerce2vuestorefront), Prestashop or Shopware) through the API.
 
 Vue Storefront is and always will be in the open source. Anyone can use and support the project, we want it to be a tool for the improvement of the shopping experience.
 The project is in the **production ready** phase.
@@ -67,8 +67,23 @@ If you have any questions or ideas feel free to join our slack: https://vuestore
 
 ## Roadmap
 
+[Here](https://github.com/DivanteLtd/vue-storefront/milestones) you can find the accepted roadmap for current milestone and what you can expect with next release.
+
+#### Roadmap planning
+[Here](https://github.com/DivanteLtd/vue-storefront/projects/3) you can vote for feature requests and see which ones were accepted. The most upvoted ones will be added to next milestones. You can also joj slack channel `#roadmap-planning` where we discuss next milestones.
+
+The process of adding new features to the roadmap looks like this:
+1. You create an issue and label it as `feature request`.
+2. One of VS Core team verifies the feature request and if the explaination is clear adds it to the `Roadmap` project so it's visible in the board.
+3. Now people can vote for this feature to be added into next milestone with `thumb up` emoji.
+4. Feature requests with biggest popularity will be added into next milestones.
+
 We are planning 1-2 milestones ahead. Our milestones are based on requirements from community, partners and production implementations.
-[See the roadmap](https://github.com/DivanteLtd/vue-storefront/milestones).
+
+Please note that bugfixes are treated separately and in most cases added to the milestones immediately.
+
+
+
 [Check the feature list of 1.0](https://divanteltd.github.io/vue-storefront/guide/basics/feature-list.html).
 
 If youd like to take part in roadmap planning feel free to join #roadmap-planning channel on our slack
@@ -131,7 +146,8 @@ Tutorial series on creating themes for Vue Storefront:
 - [Vue Storefront + Magento](https://github.com/DivanteLtd/mage2vuestorefront)
 - [Vue Storefront + Magento 1.9](https://github.com/DivanteLtd/magento1-vsbridge)
 - [Vue Storefront + with Magento checkout](https://github.com/DivanteLtd/magento2-external-checkout)
-- [Vue Storefront + Pimcore](https://github.com/DivanteLtd/pimcore2vuestorefront)
+- [Vue Storefront + BigCommerce](https://github.com/DivanteLtd/bigcommerce2vuestorefront)
+- [Vue Storefront + Pimcore](https://github.com/DivanteLtd/coreshop-vsbridge)
 - [Magento2 Product Reviews](https://divanteltd.github.io/vue-storefront/guide/integrations/reviews.html)
 - [PayPal Payments integration](https://divanteltd.github.io/vue-storefront/guide/integrations/paypal-payments.html)
 - [Direct prices sync with Magento](https://divanteltd.github.io/vue-storefront/guide/integrations/direct-prices-sync.html)
@@ -258,7 +274,7 @@ Vue Storefront is a Community effort brought to You by our great Core Team and s
       <td align="center" valign="middle">
         <a href="http://www.summasolutions.net">
           <img
-            src="http://www.summasolutions.net/sites/all/themes/summa2015/images/logo-tablet.jpg"
+            src="https://divante.co/partners/Vue-Storefront/summa_logo_horizontal_rgb.jpg"
             alt="Summa Solutions"
             width="150"
           >
@@ -500,14 +516,29 @@ 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="">
+        <a href="https://www.absolutewebservices.com">
+          <img
+            src="https://divante.co/partners/Vue-Storefront/absolute-logo.png"
+            alt="Absolute Web Services"
+            height="50"
+          >
+        </a>
+      </td>
+    </tr>
+     <tr>
+       <td align="center" valign="middle">
+        <a href="https://www.devmetokyo.com/">
           <img
-            src=""
-            alt=""
+            src="https://divante.co/partners/Vue-Storefront/devMeTokyo-logo.png"
+            alt="DevMe Tokyo"
             height="50"
           >
         </a>
       </td>
+     <td align="center" valign="middle"></td>
+   <td align="center" valign="middle"></td>
+  <td align="center" valign="middle"></td>
+<td align="center" valign="middle"></td>
     </tr>
   </tbody>
 </table>

core/modules/catalog/helpers/index.ts

@@ -356,7 +356,7 @@ export function populateProductConfigurationAsync (context, { product, selectedV
     for (let option of product.configurable_options) {
       let attribute_code
       let attribute_label
-      if (option.attribute_id) { 
+      if (option.attribute_id) {
         let attr = context.rootState.attribute.list_by_id[option.attribute_id]
         if (!attr) {
           console.error('Wrong attribute given in configurable_options - can not find by attribute_id', option)
@@ -368,7 +368,7 @@ export function populateProductConfigurationAsync (context, { product, selectedV
       } else {
         if (!option.attribute_code) {
           console.error('Wrong attribute given in configurable_options - no attribute_code', option)
-          continue        
+          continue
         } else { // we do have attribute_code!
           attribute_code = option.attribute_code
           attribute_label = option.frontend_label ? option.frontend_label : option.default_frontend_label
@@ -419,7 +419,7 @@ export function findConfigurableChildAsync({ product, configuration = null, sele
 
     if (availabilityCheck) {
       if (configurableChild.stock && !rootStore.state.config.products.listOutOfStockProducts) {
-        if (!configurableChild.is_in_stock) {
+        if (!configurableChild.stock.is_in_stock) {
           return false
         }
       }
@@ -513,7 +513,7 @@ export function configureProductAsync (context, { product, configuration, select
       if (selectDefaultVariant) {
         context.dispatch('setCurrent', product) // without the configuration
       }
-    }    
+    }
     return selectedVariant
   } else {
     if (fallbackToDefaultWhenNoAvailable) {

core/modules/user/store/actions.ts

@@ -278,6 +278,10 @@ const actions: ActionTree<UserState, RootState> = {
       context.commit(types.USER_GROUP_TOKEN_CHANGED, '')
       context.commit(types.USER_GROUP_CHANGED, null)
       context.commit(types.USER_INFO_LOADED, null)
+      context.dispatch('wishlist/clear', null, {root: true})
+      context.dispatch('checkout/savePersonalDetails', {}, {root: true})
+      context.dispatch('checkout/saveShippingDetails', {}, {root: true})
+      context.dispatch('checkout/savePaymentDetails', {}, {root: true})
   },
   /**
    * Logout user

docs/.vuepress/config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  base: '/vue-storefront/',
+  base: '/',
   head: [['link', { rel: 'icon', href: '/favicon.png' }]],
   themeConfig: {
     repo: 'DivanteLtd/vue-storefront',
@@ -88,6 +88,7 @@ module.exports = {
           title: 'Extensions',
           collapsable: false,
           children: [
+            'extensions/introduction',
             'extensions/extending-api',
             'extensions/extending-server-side-routes',
           ],

docs/CNAME

@@ -0,0 +1 @@
+docs.vuestorefront.io

docs/deploy.sh

@@ -4,6 +4,7 @@
 set -e
 
 # build
+npm i
 npm run docs:build
 
 # navigate into the build output directory

docs/guide/extensions/introduction.md

@@ -0,0 +1,20 @@
+# Introduction
+
+## How Vue Storefront extensions look like?
+Depending on needs Vue Storefront extensions can have two parts:
+- **Client-side part** which is just a [Vue Storefront module](https://github.com/DivanteLtd/vue-storefront/blob/master/docs/guide/modules/introduction.md). It covers most of the use cases.
+- **Server-side part** which is a [Vue Storefront API extension](https://github.com/DivanteLtd/vue-storefront/blob/master/docs/guide/extensions/extending-api.md) and should be used if you want to add some endpoints to `vue-storefront-api` or interact with Elastic Search.
+
+## Where extensions are located
+- On the client side extension modules should be placed in `src/modules` folder of `vue-storefront` or installed via NPM cli and registered in `src/modules/index.ts`
+- On the server side extensions should be placed in `src/api/extensions` folder of `vue-storefront-api` and registered in config file
+
+## Writing extensions
+If you are writing VS extension as an NPM module start package name with `vsf-` prefix so it can be transpiled with other VS code and ship it as a raw es6/typescript module. If you don't use the prefix you need to handle transpilation by yourself. We are currently building extension boilerplate to make it easier to develop one.
+
+Here you can find two articles explaining how to create custom Vue Storefront extensions:
+- [How to create an Instagram Feed module for Vue Storefront](https://itnext.io/how-to-create-an-instagram-feed-module-for-vue-storefront-eaa03019b288) by Javier Villanueva
+- [Developing a Vue Storefront payment module](https://www.develodesign.co.uk/news/development-of-the-paypal-module-for-vue-storefront/#.XCoa2h2Mmmo.twitter) by Dmitry Schegolikhin from [Develo Design](https://www.develodesign.co.uk/)
+
+## Extensions list
+You can find a curated list of VS extensions in [Awesome Vue Storefront](https://github.com/frqnck/awesome-vue-storefront) list.

docs/guide/installation/etc/nginx/sites-enabled/prod.vuestorefront.io

@@ -0,0 +1,62 @@
+server {
+	listen 80;
+	server_name prod.vuestorefront.io; 
+	return 301 https://prod.vuestorefront.io$request_uri;
+}
+
+server {
+	listen 443 ssl;
+	server_name prod.vuestorefront.io http2;
+
+	ssl on;
+
+	ssl_certificate /etc/nginx/ssl/prod.vuestorefront.io.chained.crt;
+	ssl_certificate_key /etc/nginx/ssl/prod.vuestorefront.io.key;
+
+	ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
+	ssl_prefer_server_ciphers on;	
+	ssl_ciphers ECDHE-RSA-AES256-GCM-SHA512:DHE-RSA-AES256-GCM-SHA512:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:DHE-RSA-AES256-SHA;
+	ssl_ecdh_curve secp384r1;
+	ssl_session_timeout 10m;
+	ssl_session_cache shared:SSL:10m;
+	ssl_session_tickets off;
+	ssl_stapling on;
+	ssl_stapling_verify on;
+	resolver 8.8.8.8 8.8.4.4 valid=300s;
+	resolver_timeout 5s; 
+
+	ssl_dhparam /etc/nginx/ssl/dhparam.pem;
+
+	add_header Strict-Transport-Security "max-age=31536000" always;
+	add_header X-Frame-Options DENY;
+	add_header X-Content-Type-Options nosniff;
+	add_header X-XSS-Protection "1; mode=block";
+	add_header X-Robots-Tag none; 
+
+	gzip on;
+	gzip_proxied any;
+	gzip_types
+		text/css
+		text/javascript
+		text/xml
+		application/javascript
+		application/json
+		text/json
+		text/html;
+
+	location / {
+		proxy_pass http://localhost:3000/;
+	}
+
+	location /assets/ {
+		proxy_pass http://localhost:3000/assets/;
+	}
+
+    location /api/ {
+		proxy_pass http://localhost:8080/api/;
+	}
+
+    location /img/ {
+		proxy_pass http://localhost:8080/img/;
+	}
+}

docs/guide/installation/production-setup.md

@@ -70,7 +70,7 @@ Some additional materials:
 
 #### Nginx configuration
 
-[Here is the complete `/etc/nginx/sites-enabled/prod.vuestorefront.io` file](https://raw.githubusercontent.com/DivanteLtd/vue-storefront/develop/docs/guide/installation/prod.vuestorefront.io).
+[Here is the complete `/etc/nginx/sites-enabled/prod.vuestorefront.io` file](https://github.com/DivanteLtd/vue-storefront/tree/master/docs/guide/installation/etc/nginx/sites-enabled/prod.vuestorefront.io).
 
 Create nginx config file from the template (please run as a root user):
 
@@ -250,7 +250,7 @@ It may take a few minutes. Once the modules are installed we can set configurati
 
 #### Vue Storefront configuration
 
-The full configuration files are available here to download: [vue-storefront](https://github.com/DivanteLtd/vue-storefront/tree/develop/docs/guide/installation/vue-storefront/config) and [vue-storefront-api](https://github.com/DivanteLtd/vue-storefront/tree/develop/docs/guide/installation/vue-storefront-api/config).
+The full configuration files are available here to download: [vue-storefront](https://github.com/DivanteLtd/vue-storefront/blob/develop/docs/guide/installation/vue-storefront/config) and [vue-storefront-api](https://github.com/DivanteLtd/vue-storefront/blob/develop/docs/guide/installation/vue-storefront-api/config).
 
 Please create the `vue-storefront-api/config/local.json` and `vue-storefront/config/local.json` files accordingly.
 
@@ -321,7 +321,7 @@ There are 27 more instances of `prod.vuestorefront.io` to be replaced with your
 
 #### Vue Storefront API configuration
 
-The [provided vue-storefront-api configuration](https://github.com/DivanteLtd/vue-storefront/tree/develop/docs/guide/installation/vue-storefront/config) requires almost no changes.
+The [provided vue-storefront-api configuration](https://github.com/DivanteLtd/vue-storefront/blob/develop/docs/guide/installation/vue-storefront-api/config) requires almost no changes.
 
 The only lines you need to alter are:
 
@@ -362,6 +362,13 @@ The only lines you need to alter are:
 
 You should put here the `allowedHosts` and `trustedHosts` for the Imageable - to download the product images. The domain name points to the **Magento2** instance where images are sourced. In this example Magento2 is running under **http://demo-magento2.vuestorefront.io**.
 
+ #### Using your own magento2 instance
+ In this case you'll have to update `magento2` config node with correct hostname in vue-storefront-api config file. To get all necessary Magento2 API data for `api` node, navigate to SYSTEM -> Extensions -> Integrations in Magento2 Admin.
+ - click Add new integration
+ - check the necessary permissions (check Catalog, Sales, My Account and Carts on API permissions tab )
+ - click Activate
+ - copy necessary keys, secrets and tokens into `api` section of vue-storefront-api config
+
 #### Build VS
 
 Before we can run Vue Storefront and Vue Storefront API we should build it in the production mode. To do so please just execute the following commands:

docs/guide/modules/introduction.md

@@ -1,10 +1,27 @@
 # Introduction
+# Table of contents
 
-## What are VS modules?
+**Introduction and motivation**
+- [What are VS Modules](#what-are-vs-modules)
+- [Motivation](#motivation)
+- [What is the purpose of VS modules?](#what-is-the-purpose-of-vs-modules)
 
-You can think about each module as a one, independent feature available in Vue Storefront with all it's logic and dependencys inside. This 'one feature' however is a common denominator that links all the features inside. For example common denominator for adding product to the cart, receiving list of items that are in a cart or applying a cart coupon is obviously a `cart` and `cart` is not a feature of anything bigger than itself (it's common denominator is a shop) so it should be a module. Wishlist, Reviews or Newsletter are also a good examples of modules as we intuitively think about them as a standalone features.
+**Technical part**
+- [Module config and it's capabilities](#module-config-and-capabilities)
+- [Module file structure](#module-file-structure)
+- [Module registration](#module-registration)
 
-## Motivation
+**Patterns and good practices for common use cases**
+- [General rules and good practices](#general-rules-and-good-practices)
+- [Adding new features as VS modules](#adding-new-features-as-vs-modules)
+- [Extending and overriding Vue Storefront modules](#extending-and-overriding-vue-storefront-modules)
+
+
+# What are VS modules?
+
+You can think about each module as a one, independent feature available in Vue Storefront with all it's logic and dependencys inside. This 'one feature' however is a common denominator that links all the features inside. For example common denominator for adding product to the cart, receiving list of items that are in a cart or applying a cart coupon is obviously a `cart` and `cart` is not a feature of anything bigger than itself (it's common denominator is a shop) so it should be a module. Wishlist, Reviews or Newsletter are also a good examples of modules as we intuitively think about them as a standalone features. 
+
+# Motivation
 
 I believe that some neat metaphore can clearly describe the problem as well as a solution.
 

src/modules/payment-backend-methods/hooks/afterRegistration.ts

@@ -1,9 +1,14 @@
 import * as types from './../store/mutation-types'
 
 export function afterRegistration(Vue, config, store, isServer) {
+
+  let correctPaymentMethod = false
+
   // Place the order. Payload is empty as we don't have any specific info to add for this payment method '{}'
   const placeOrder = function () {
-    Vue.prototype.$bus.$emit('checkout-do-placeOrder', {})
+    if (correctPaymentMethod) {
+      Vue.prototype.$bus.$emit('checkout-do-placeOrder', {})
+    }
   }
 
   if (!Vue.prototype.$isServer) {
@@ -12,15 +17,15 @@ export function afterRegistration(Vue, config, store, isServer) {
       store.commit('payment-backend-methods/' + types.SET_BACKEND_PAYMENT_METHODS, methods)
     })
 
+    Vue.prototype.$bus.$on('checkout-before-placeOrder', placeOrder)
+
     // Mount the info component when required.
     Vue.prototype.$bus.$on('checkout-payment-method-changed', (paymentMethodCode) => {
       let methods = store.state['payment-backend-methods'].methods
       if (methods !== null && methods.find(item => item.code === paymentMethodCode)) {
-        // Register the handler for what happens when they click the place order button.
-        Vue.prototype.$bus.$on('checkout-before-placeOrder', placeOrder)
+        correctPaymentMethod = true
       } else {
-        // unregister the extensions placeorder handler
-        Vue.prototype.$bus.$off('checkout-before-placeOrder', placeOrder)
+        correctPaymentMethod = false
       }
     })
   }

src/themes/default/components/core/Notification.vue

@@ -4,7 +4,7 @@
       <div
         class="notification mt30 border-box cl-white"
         v-for="(notification, index) in notifications"
-        :key="notification.message"
+        :key="`${notification.type}_${index}`"
         :class="notification.type"
       >
         <div