From cce37952414537e7f35ae625542f288bf16ea0c7 Mon Sep 17 00:00:00 2001
From: Ania Karon <anna.karon@snow.dog>
Date: Wed, 18 Jul 2018 15:31:53 +0200
Subject: [PATCH 1/3] 1426 add cms data by identifier

---
 config/default.json                       | 13 +++---
 core/scripts/installer.js                 |  1 +
 src/extensions/cms/components/CmsData.vue | 57 +++++++++++++++++++++--
 src/extensions/cms/store.js               | 26 ++++++-----
 4 files changed, 75 insertions(+), 22 deletions(-)

diff --git a/config/default.json b/config/default.json
index 8df258d435..9c461e7731 100644
--- a/config/default.json
+++ b/config/default.json
@@ -26,7 +26,7 @@
           "index": "vue_storefront_catalog_de"
         },
         "tax": {
-          "sourcePriceIncludesTax": false,          
+          "sourcePriceIncludesTax": false,
           "defaultCountry": "DE",
           "defaultRegion": "",
           "calculateServerSide": true
@@ -53,7 +53,7 @@
           "index": "vue_storefront_catalog_it"
         },
         "tax": {
-          "sourcePriceIncludesTax": false,          
+          "sourcePriceIncludesTax": false,
           "defaultCountry": "IT",
           "defaultRegion": "",
           "calculateServerSide": true
@@ -156,9 +156,9 @@
         "attributes": "INDEXEDDB",
         "products": "INDEXEDDB",
         "elasticCache": "INDEXEDDB",
-        "claims": "LOCALSTORAGE",        
-        "compare": "INDEXEDDB",        
-        "syncTasks": "INDEXEDDB",        
+        "claims": "LOCALSTORAGE",
+        "compare": "INDEXEDDB",
+        "syncTasks": "INDEXEDDB",
         "newsletterPreferences": "INDEXEDDB",
         "ordersHistory": "INDEXEDDB",
         "checkoutFieldValues": "LOCALSTORAGE"
@@ -217,6 +217,7 @@
       "api_key": "my_example_api_key"
     },
     "cms": {
-      "endpoint": "http://localhost:8080/api/ext/cms-data/cms{{type}}/{{cmsId}}"
+      "endpoint": "http://localhost:8080/api/ext/cms-data/cms{{type}}/{{cmsId}}",
+      "endpointIdentifier": "http://localhost:8080/api/ext/cms-data/cms{{type}}Identifier/{{cmsIdentifier}}/storeId/{{storeId}}"
     }
 }
diff --git a/core/scripts/installer.js b/core/scripts/installer.js
index 0390473660..9a301b02a0 100644
--- a/core/scripts/installer.js
+++ b/core/scripts/installer.js
@@ -373,6 +373,7 @@ class Storefront extends Abstract {
         config.mailchimp.endpoint = `${backendPath}/api/ext/mailchimp-subscribe/subscribe`
         config.images.baseUrl = this.answers.images_endpoint
         config.cms.endpoint = `${backendPath}/api/ext/cms-data/cms{{type}}/{{cmsId}}`
+        config.cms.endpointIdentifier = `${backendPath}/api/ext/cms-data/cms{{type}}Identifier/{{cmsIdentifier}}/storeId/{{storeId}}`
 
         config.install = {
           is_local_backend: Abstract.wasLocalBackendInstalled,
diff --git a/src/extensions/cms/components/CmsData.vue b/src/extensions/cms/components/CmsData.vue
index 36e7958ecd..960376a698 100644
--- a/src/extensions/cms/components/CmsData.vue
+++ b/src/extensions/cms/components/CmsData.vue
@@ -1,32 +1,81 @@
 <template>
-  <div class="cms-content" v-if="data" v-html="data.content" />
+  <div
+    :class="['cms-content', { 'container': sync }]"
+    v-if="data"
+    v-html="data.content"
+  />
 </template>
 
 <script>
+import config from 'config'
+import { currentStoreView } from '@vue-storefront/store/lib/multistore'
+
 export default {
   name: 'CmsData',
   props: {
     id: {
       type: Number,
-      required: true
+      default: null,
+      required: false
+    },
+    identifier: {
+      type: String,
+      default: null,
+      required: false
     },
     type: {
       type: String,
       required: true
+    },
+    sync: {
+      type: Boolean,
+      default: false,
+      required: false
     }
   },
   created () {
     this.$store.dispatch(
       'cms/loadCms',
       {
-        id: this.id,
+        url: this.getEndpointPath(),
         type: this.type
       }
     )
   },
   computed: {
     data () {
-      return this.$store.getters[`cms/get${this.type}`](this.id)
+      if (this.id) {
+        return this.$store.getters[`cms/get${this.type}`](this.id)
+      } else {
+        return this.$store.getters[`cms/get${this.type}Identifier`](this.identifier)
+      }
+    },
+    currentStore () {
+      return currentStoreView()
+    },
+    storeView () {
+      return (this.isMultistoreEnable && this.currentStore) ? this.currentStore.storeId : 0
+    }
+  },
+  data () {
+    return {
+      isMultistoreEnable: config.storeViews.multistore
+    }
+  },
+  methods: {
+    getEndpointPath () {
+      let url
+      if (this.id) {
+        url = (config.cms.endpoint)
+          .replace('{{type}}', this.type)
+          .replace('{{cmsId}}', this.id)
+      } else if (this.identifier) {
+        url = (config.cms.endpointIdentifier)
+          .replace('{{type}}', this.type)
+          .replace('{{cmsIdentifier}}', this.identifier)
+          .replace('{{storeId}}', this.storeView)
+      }
+      return url
     }
   }
 }
diff --git a/src/extensions/cms/store.js b/src/extensions/cms/store.js
index 188c0e2f87..8df44fd092 100644
--- a/src/extensions/cms/store.js
+++ b/src/extensions/cms/store.js
@@ -1,27 +1,28 @@
-import config from 'config'
 import fetch from 'isomorphic-fetch'
 
 const state = {
   cmsPages: [],
-  cmsBlock: []
+  cmsBlocks: []
 }
 
 const getters = {
   getBlock: (state) => (id) => {
-    return state.cmsBlock.find(item => item.id === id)
+    return state.cmsBlocks.find(item => item.id === id)
+  },
+  getBlockIdentifier: (state) => (identifier) => {
+    return state.cmsBlocks.find(item => item.identifier === identifier)
   },
   getPage: (state) => (id) => {
     return state.cmsPages.find(item => item.id === id)
+  },
+  getPageIdentifier: (state) => (identifier) => {
+    return state.cmsPages.find(item => item.identifier === identifier)
   }
 }
 
 // actions
 const actions = {
-  loadCms (context, {id, type}) {
-    let url = (config.cms.endpoint)
-      .replace('{{type}}', type)
-      .replace('{{cmsId}}', id)
-
+  loadCms (context, {url, type}) {
     fetch(url, {
       method: 'GET',
       headers: { 'Content-Type': 'application/json' },
@@ -33,7 +34,8 @@ const actions = {
           context.commit(`setCms${type}`, data.result)
         }
       })
-      .catch(function () {
+      .catch(function (err) {
+        console.log(err)
         console.error('You need to install a custom Magento module from Snow.dog to make the CMS magick happen. Please go to https://github.com/SnowdogApps/magento2-cms-api and follow the instructions')
       })
   }
@@ -42,12 +44,12 @@ const actions = {
 // mutations
 const mutations = {
   setCmsBlock (state, data) {
-    if (!state.cmsBlock.includes(data)) {
-      state.cmsBlock.push(data)
+    if (!state.cmsBlocks.filter(e => e.id === data.id).length > 0) {
+      state.cmsBlocks.push(data)
     }
   },
   setCmsPage (state, data) {
-    if (!state.cmsPages.includes(data)) {
+    if (!state.cmsPages.filter(e => e.id === data.id).length > 0) {
       state.cmsPages.push(data)
     }
   }

From 6c1d135f789ebd564c1bea04ef919c04d5c0d676 Mon Sep 17 00:00:00 2001
From: Ania Karon <anna.karon@snow.dog>
Date: Wed, 18 Jul 2018 15:49:25 +0200
Subject: [PATCH 2/3] 1426 add example implementation and update README

---
 src/extensions/cms/README.md                  | 32 +++++++++++++-----
 .../components/core/blocks/Footer/Footer.vue  |  6 ++++
 src/themes/default/pages/CustomCmsPage.vue    | 33 ++++++++++++++++---
 src/themes/default/router/index.js            |  4 ++-
 4 files changed, 62 insertions(+), 13 deletions(-)

diff --git a/src/extensions/cms/README.md b/src/extensions/cms/README.md
index 751826ffeb..6136048fef 100644
--- a/src/extensions/cms/README.md
+++ b/src/extensions/cms/README.md
@@ -1,6 +1,6 @@
 # CMS Magento 2 data extension
 
-To display cms data:
+To display Cms data:
  - install `snowdog/module-cms-api` composer module in your Magento 2 instance, [snowdog/module-cms-api on github](https://github.com/SnowdogApps/magento2-cms-api)
  - make sure that in `vue-storefront-api` repo the `cms-data` extension is installed
 
@@ -9,29 +9,45 @@ To display Cms Block import CmsData component and use it in template:
 
 `import CmsData from 'src/extensions/cms/components/CmsData'`
 
+we have to options to get Cms Block data:
+1. by Magento `identifier`:
+`<cms-data :identifier="'contact-us-info'" :type="'Block'" />`
+where `contact-us-info` is a Cms Block `identifier` from Magento 2 instance
+
+this option handles different `Store Views` - if multistore is enabled, it takes Cms Block by current Store View, if it's disabled, it set default Store View (`0`)
+
+2. by Magento id
 `<cms-data :id="5" :type="'Block'" />`
-where `5` is a cms block identifier from Magento 2 instance
+where `5` is a Magento id of Cms Block.
+It doesn't handle differents Store Views so please use it only when multistore it's enabled/
 
 ## Cms Page
 To display Cms Page:
 
 1. Cms page content like a block
-- in custom theme create new page with custom route
-- import CmsData component and use it in template:
+* in custom theme create new page with custom route
+* import CmsData component and use it in template:
 `import CmsData from 'src/extensions/cms/components/CmsData'`
 
+call Cms Page like a Block using either Magento `identifier`:
+`<cms-data :identifier="'about-us'" :type="'Page'" />`
+
+or Magento `id`
 `<cms-data :id="5" :type="'Page'" />`
 where `5` is a cms page identifier from Magento 2 instance
 
+Like Cms Block, the Cms Page by `identifier` handles different Store Views, Cms Page by `id` handles only Default Store View/
+
 2. Cms page content as a page component:
-- in custom theme `themes/<theme-name>/router/index.js` import `CmsData` component, add custom route and define props: `{id: :pageId, type: 'Page'}`, example:
+- in custom theme `themes/<theme-name>/router/index.js` import `CmsData` component, add custom route and define props: `{identifier: :pageIdentifier, type: 'Page', sync: true}`, example:
 ```
 import CmsData from 'src/extensions/cms/components/CmsData'
 
 const routes = [
   // ... theme routes
-  { name: 'custom-cms-page', path: '/custom-cms-page', component: CmsData, props: {id: 4, type: 'Page'} }
+  { name: 'cms-page-sync', path: '/cms-page-sync', component: CmsData, props: {identifier: 'about-us', type: 'Page', sync: true} }
 ]
 ```
-- create custom page and call the `CmsData` component there:
-`<cms-data />`
+Complete examples of usage and implementation you can find in Default theme:
+1. `/cms-page-sync`, `src/themes/default/router/index.js`
+2. `/custom-cms-page`, `src/themes/default/router/index.js`, `src/themes/default/pages/CustomCmsPage.vue`
diff --git a/src/themes/default/components/core/blocks/Footer/Footer.vue b/src/themes/default/components/core/blocks/Footer/Footer.vue
index 43415a7850..106e3c5dc2 100644
--- a/src/themes/default/components/core/blocks/Footer/Footer.vue
+++ b/src/themes/default/components/core/blocks/Footer/Footer.vue
@@ -100,6 +100,12 @@
                   {{ $t('Custom Cms Page') }}
                 </router-link>
               </div>
+              <div class="mt15">
+                <!-- Link to synced Magento Cms Page -->
+                <router-link class="cl-secondary" :to="localizedRoute('/cms-page-sync')" exact>
+                  {{ $t('Cms Page Sync') }}
+                </router-link>
+              </div>
             </div>
           </div>
           <div class="row social mt30">
diff --git a/src/themes/default/pages/CustomCmsPage.vue b/src/themes/default/pages/CustomCmsPage.vue
index 65de1fc4f0..9783dac70f 100644
--- a/src/themes/default/pages/CustomCmsPage.vue
+++ b/src/themes/default/pages/CustomCmsPage.vue
@@ -2,11 +2,36 @@
   <div class="container">
     <h1>Cms content</h1>
 
-    <h2>Cms page content</h2>
-    <cms-data :id="5" :type="'Page'"/>
+    <h2>
+      Cms page content
+    </h2>
+    <p>
+      (by identifier, it handles current store view if multistore is enable)
+    </p>
+    <cms-data :identifier="'about-us'" :type="'Page'"/>
 
-    <h2>Cms block content</h2>
-    <cms-data :id="2" :type="'Block'"/>
+    <h2>Cms block content
+    </h2>
+    <p>
+      (by identifier, it handles current store view if multistore is enable)
+    </p>
+    <cms-data :identifier="'contact-us-info'" :type="'Block'"/>
+
+    <h2>
+      Cms page content
+    </h2>
+    <p>
+      (by id only default store view (0))
+    </p>
+    <cms-data :id="5" :type="'Page'" />
+
+    <h2>
+      Cms block content
+    </h2>
+    <p>
+      (by id only default store view (0))
+    </p>
+    <cms-data :id="2" :type="'Block'" />
   </div>
 </template>
 
diff --git a/src/themes/default/router/index.js b/src/themes/default/router/index.js
index 769809fcfa..801d21deba 100644
--- a/src/themes/default/router/index.js
+++ b/src/themes/default/router/index.js
@@ -9,6 +9,7 @@ import Compare from 'theme/pages/Compare.vue'
 import PageNotFound from 'theme/pages/PageNotFound.vue'
 import MyAccount from 'theme/pages/MyAccount.vue'
 import CustomCmsPage from 'theme/pages/CustomCmsPage.vue'
+import CmsData from 'src/extensions/cms/components/CmsData'
 
 import config from 'config'
 
@@ -36,7 +37,8 @@ let routes = [
   { name: 'contact', path: '/contact', component: Static, props: {page: 'contact', title: 'Contact'} },
   { name: 'compare', path: '/compare', component: Compare, props: {title: 'Compare Products'} },
   { name: 'page-not-found', path: '/page-not-found', component: PageNotFound },
-  { name: 'custom-cms-page', path: '/custom-cms-page', component: CustomCmsPage }
+  { name: 'custom-cms-page', path: '/custom-cms-page', component: CustomCmsPage },
+  { name: 'cms-page-sync', path: '/cms-page-sync', component: CmsData, props: {identifier: 'about-us', type: 'Page', sync: true} }
 ]
 if (!config.products.useShortCatalogUrls) {
   routes = routes.concat([{ name: 'virtual-product', path: '/p/:parentSku/:slug', component: Product }, // :sku param can be marked as optional with ":sku?" (https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js#L16), but it requires a lot of work to adjust the rest of the site

From 355fd55b6bd3f49b9e5d9836a686a1617fc3f1dc Mon Sep 17 00:00:00 2001
From: Ania Karon <anna.karon@snow.dog>
Date: Mon, 23 Jul 2018 14:45:35 +0200
Subject: [PATCH 3/3] 1426 fix eslint errors

---
 core/api/user/signIn.js  | 4 ++--
 core/api/user/signOut.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/core/api/user/signIn.js b/core/api/user/signIn.js
index 1c2c92841e..c78fb17cdc 100644
--- a/core/api/user/signIn.js
+++ b/core/api/user/signIn.js
@@ -1,6 +1,6 @@
 export const signIn = {
   methods: {
-    signIn(username, password, onSuccess, onError) {
+    signIn (username, password, onSuccess, onError) {
       this.$store.dispatch('user/login', { username: this.username, password: this.password })
         .then((result) => {
           result.code !== 200 ? this.onError() : this.onSuccess()
@@ -11,4 +11,4 @@ export const signIn = {
         })
     }
   }
-}
\ No newline at end of file
+}
diff --git a/core/api/user/signOut.js b/core/api/user/signOut.js
index 17af0a7a64..cd7ceca2fc 100644
--- a/core/api/user/signOut.js
+++ b/core/api/user/signOut.js
@@ -1,3 +1,3 @@
 export const signOut = {
   signOut () {}
-}
\ No newline at end of file
+}