Improvement/modules into theme

CHANGELOG.md

@@ -23,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Shipping address is saved as default when not logged in user chooses to create account during checkout - @iwonapiotrowska (#2636)
 - Can set transition style for Modal content - @grimasod (#3146)
 - Added stock to cart items - @cheeerd (#3166)
+- Moves theme specific stores and components into themes - @michasik (#3139)
 - Translation file improvements - @vishal-7037 (#3198)
 
 ## [1.10.0-rc.2] - UNRELEASED

core/build/webpack.base.config.ts

@@ -117,7 +117,9 @@ export default {
       'theme/resource': themeResources,
 
       // Backward compatible
-      '@vue-storefront/core/store/lib/multistore': path.resolve(__dirname, '../lib/multistore.ts')
+      '@vue-storefront/core/store/lib/multistore': path.resolve(__dirname, '../lib/multistore.ts'),
+      'src/modules/order-history/components/UserOrders': path.resolve(__dirname, '../../core/modules/order/components/UserOrdersHistory'),
+      '@vue-storefront/core/modules/social-share/components/WebShare': path.resolve(__dirname, '../../src/themes/default/components/theme/WebShare.vue')
     }
   },
   module: {

src/modules/order-history/components/UserOrders.ts → core/modules/order/components/UserOrdersHistory.ts

@@ -1,9 +1,8 @@
 import MyOrders from '@vue-storefront/core/compatibility/components/blocks/MyAccount/MyOrders'
-import { mapGetters } from 'vuex';
 import onBottomScroll from '@vue-storefront/core/mixins/onBottomScroll'
 
 export default {
-  name: 'UserOrders',
+  name: 'UserOrdersHistory',
   mixins: [MyOrders, onBottomScroll],
   data () {
     return {

docs/guide/upgrade-notes/README.md

@@ -1,6 +1,32 @@
 # Upgrade notes
 
 We're trying to keep the upgrade process as easy as possible. Unfortunately, sometimes manual code changes are required. Before pulling out the latest version, please take a look at the upgrade notes below:
+## 1.10 -> 1.11
+- `UserOrder` component has been renamed to `UserOrderHistory` and moved from `src/modules/order-history/components/UserOrders` to `@vue-storefront/core/modules/order/components/UserOrdersHistory`. This component was used in `MyOrders` component found here: `src/themes/default/components/core/blocks/MyAccount/MyOrders.vue`. In this file the `import` path has to be updated.
+- `claims`, `promoted-offers`, `homepage` adn `ui` modules have been moved from `@vue-storefront/src/modules` to `src/themes/default/store/` and reduced to stores only.<br>
+Delete those folders:<br>
+  -- `src/modules/claims`<br>
+  -- `src/modules/promoted-offers`<br>
+  -- `src/modules/homepage`<br>
+  -- `src/modules/ui-store`<br>
+Copy folder `theme/store/` from `theme default`.<br>
+Register the stores copied in previous step in `src/themes/default/index.js`. To do that, import them along with `initCacheStorage` method, used to replace `claims beforeRegistration hook`.
+```js
+import { initCacheStorage } from '@vue-storefront/core/helpers/initCacheStorage';
+import { store as claimsStore } from 'theme/store/claims'
+import { store as homeStore } from 'theme/store/homepage'
+import { store as uiStore } from 'theme/store/ui'
+import { store as promotedStore } from 'theme/store/promoted-offers'
+```
+Next, inside `initTheme` method use `store.registerModule` method to register the stores.
+```js
+Vue.prototype.$db.claimsCollection = initCacheStorage('claims');
+store.registerModule('claims', claimsStore);
+store.registerModule('homepage', homeStore);
+store.registerModule('ui', uiStore);
+store.registerModule('promoted', promotedStore);
+```
+- `WebShare` moved from `@vue-storefront/core/modules/social-share/components/WebShare.vue` to `@vue-storefront/src/themes/default/components/theme/WebShare.vue`. This component was used in `Product` component found here: `src/themes/default/pages/Product.vue`. In this file the `import` path has to be updated.
 
 ## 1.9 -> 1.10
 - Event `application-after-init` is now emitted by event bus instead of root Vue instance (app), so you need to listen to `Vue.prototype.$bus` (`Vue.prototype.$bus.$on()`) now
@@ -10,16 +36,16 @@ We're trying to keep the upgrade process as easy as possible. Unfortunately, som
 - The `cart/addItem` is no longer displaying the error messages - please use the `diffLog.clientNorifications` to update the UI instead (take a look at the `AddToCart.ts` for a reference)
 
 ## 1.8 -> 1.9
-- The Url Dispatcher feature added for friendly URLs. When `config.seo.useUrlDispatcher` set to true the `product.url_path` and `category.url_path` fields are used as absolute URL addresses (no `/c` and `/p` prefixes anymore). Check the latest `mage2vuestorefront` snapshot and **reimport Your products** to properly set `url_path` fields 
+- The Url Dispatcher feature added for friendly URLs. When `config.seo.useUrlDispatcher` set to true the `product.url_path` and `category.url_path` fields are used as absolute URL addresses (no `/c` and `/p` prefixes anymore). Check the latest `mage2vuestorefront` snapshot and **reimport Your products** to properly set `url_path` fields
 - `cart.multisiteCommonCart` config property changed to `storeViews.commonCache`
 - Way of creating VS Modules was changed to use factory method instead of explict object creation. Even though the feature is backward compatible we highly encourage all developers to refactor their modules to use new syntax.
 
 The process of creating a new module with the factory method looks like the following:
 ````js
 import { createModule } from '@vue-storefront/core/lib/module'
 
-const moduleConfig: VueStorefrontModuleConfig = { 
-  // VS module config 
+const moduleConfig: VueStorefrontModuleConfig = {
+  // VS module config
 }
 
 const module = createModule(moduleConfig)
@@ -31,7 +57,7 @@ const module = createModule(moduleConfig)
 - Added validation for UTF8 alpha and alphanumeric characters in most checkout fields
 - Update your local.json config and set default `api.url` path, without it you may have problems with elasticsearch queries.
 
-### Troubleshooting 
+### Troubleshooting
 - In case of CORS problem after upgrade check your elasticsearch url in config file. Best practice for that change can be found [here](https://github.com/DivanteLtd/vue-storefront/commit/77fc9c2765068303879c75ef9ed4a4b98f6763b6)
 
 - In case of app crashing, especially when opening `vue devtools` in browser, try setting `storeViews.commonCache` to `false`.
@@ -250,7 +276,7 @@ We added Reviews support, however, Magento 2 is still lacking Reviews support in
    - **removeCoupon** -> **clearCoupon** - removing coupon by dispatch removeCoupon API method and toggle coupon form
    - **applyCoupon** -> **setCoupon** - submit coupon form by dispatch applyCoupon API method
    - **enterCoupon** - was removed, because @keyup="enterCoupon" we changed to @keyup.enter="setCoupon"
-   
+
 3. We moved $emit with notification about appliedCoupon and removedCoupon from Vuex store to the default theme. Now applyCoupon and removeCoupon returns promise, which you can handle by yourself.
 
 4. We moved VueOfflineMixin and onEscapePress mixins to the theme component. The core component is clean from UI stuff now.
@@ -370,7 +396,7 @@ export default {
 </script>
 ```
 
-4. We've added Multistore support. It shouldn't imply any breaking changes to the existing themes / extensions (by default it's just disabled). 
+4. We've added Multistore support. It shouldn't imply any breaking changes to the existing themes / extensions (by default it's just disabled).
 
 ## 1.0RC-2 -> 1.0RC-3 ([release notes](https://github.com/DivanteLtd/vue-storefront/releases/tag/v1.0.0-rc.3))
 

src/modules/index.ts

@@ -12,10 +12,6 @@ import { Newsletter } from '@vue-storefront/core/modules/newsletter'
 import { Notification } from '@vue-storefront/core/modules/notification'
 import { RecentlyViewed } from '@vue-storefront/core/modules/recently-viewed'
 import { Url } from '@vue-storefront/core/modules/url'
-import { Homepage } from './homepage'
-import { Claims } from './claims'
-import { PromotedOffers } from './promoted-offers'
-import { Ui } from './ui-store'
 // import { GoogleAnalytics } from './google-analytics';
 // import { Hotjar } from './hotjar';
 import { googleTagManager } from './google-tag-manager';
@@ -24,7 +20,6 @@ import { PaymentBackendMethods } from './payment-backend-methods';
 import { PaymentCashOnDelivery } from './payment-cash-on-delivery';
 import { RawOutputExample } from './raw-output-example'
 import { InstantCheckout } from './instant-checkout'
-import { OrderHistory } from './order-history'
 
 // import { Example } from './module-template'
 
@@ -63,11 +58,7 @@ export const registerModules: VueStorefrontModule[] = [
   Wishlist,
   Newsletter,
   Notification,
-  Ui,
   RecentlyViewed,
-  Homepage,
-  Claims,
-  PromotedOffers,
   googleTagManager,
   // GoogleAnalytics,
   // Hotjar,
@@ -77,7 +68,6 @@ export const registerModules: VueStorefrontModule[] = [
   AmpRenderer,
   InstantCheckout,
   Url,
-  CatalogNext,
-  OrderHistory
+  CatalogNext
   // Example
 ]

src/themes/default/components/core/blocks/MyAccount/MyOrders.vue

@@ -80,7 +80,7 @@
 </template>
 
 <script>
-import UserOrder from 'src/modules/order-history/components/UserOrders'
+import UserOrder from '@vue-storefront/core/modules/order/components/UserOrdersHistory'
 
 export default {
   mixins: [UserOrder]

src/themes/default/index.js

@@ -7,6 +7,12 @@ import '@vue-storefront/core/lib/passive-listeners'
 import { RouterManager } from '@vue-storefront/core/lib/router-manager'
 import { once } from '@vue-storefront/core/helpers'
 
+import { initCacheStorage } from '@vue-storefront/core/helpers/initCacheStorage';
+import { store as claimsStore } from 'theme/store/claims'
+import { store as homeStore } from 'theme/store/homepage'
+import { store as uiStore } from 'theme/store/ui'
+import { store as promotedStore } from 'theme/store/promoted-offers'
+
 once('__VUE_EXTEND_DROPPOINT_VPB__', () => {
   Vue.use(VueProgressBar)
 })
@@ -19,6 +25,12 @@ function initTheme (app, router, store, config, ssrContext) {
   // { name: 'de-checkout', path: '/checkout', component: CheckoutCustomized },
   setupMultistoreRoutes(config, router, routes)
   RouterManager.addRoutes(routes, router)
+
+  Vue.prototype.$db.claimsCollection = initCacheStorage('claims');
+  store.registerModule('claims', claimsStore);
+  store.registerModule('homepage', homeStore);
+  store.registerModule('ui', uiStore);
+  store.registerModule('promoted', promotedStore);
 }
 
 export {

src/themes/default/pages/Product.vue

@@ -243,7 +243,7 @@ import ProductBundleOptions from 'theme/components/core/ProductBundleOptions.vue
 import ProductGallery from 'theme/components/core/ProductGallery'
 import PromotedOffers from 'theme/components/theme/blocks/PromotedOffers/PromotedOffers'
 import focusClean from 'theme/components/theme/directives/focusClean'
-import WebShare from '@vue-storefront/core/modules/social-share/components/WebShare'
+import WebShare from 'theme/components/theme/WebShare'
 import BaseInputNumber from 'theme/components/core/blocks/Form/BaseInputNumber'
 import SizeGuide from 'theme/components/core/blocks/Product/SizeGuide'