Merge pull request #3 from Interactivated/module-structure

Сompatibility with VSF core.

README.md

@@ -3,13 +3,13 @@ Request for quotation (RFQ) integration to Vue Storefront
 
 # Installation
 
-```
-git clone git@github.com:Interactivated/vsf-rfq-form.git vue-storefront/src/modules/wholesale-request
+```shell
+git clone git@github.com:Interactivated/vsf-wholesale-request.git vue-storefront/src/modules/wholesale-request
 ```
 
 ```
 "wholesale": {
-    "send_request_endpoint": "https://localhost:8080/api/ext/wholesale/send"
+    "endpoint": "https://localhost:8080/api/ext/wholesale"
 },
 ```
 
@@ -28,4 +28,43 @@ git clone git@github.com:Interactivated/vsf-rfq-form.git vue-storefront/src/modu
       }
     }
   },
-```
+```
+
+Register:
+
+```js
+...
+import { WholesaleRequest } from './wholesale-request';
+
+export const registerModules: VueStorefrontModule[] = [
+  ...,
+  WholesaleRequest
+]
+```
+
+in ``
+
+```js
+<template>
+<wholesale-request />
+
+<div class="row m0 add-to-buttons">
+  <button @click="showWholesaleModal" class="bg-cl-mine-shaft button-full fs-medium fs-medium sans-serif py20 px10 brdr-none mt15 cl-white">Request an offer for large quantities</button>
+</div>
+
+</template>
+
+<script>
+...
+import WholesaleRequest from '@vue-storefront/wholesale-request/components/Request.vue'
+
+export default {
+  components: {
+    ...,
+    WholesaleRequest
+  },
+  mixins: [... WholesaleRequest],
+  ...
+}
+</script>
+```

components/WholesaleRequest.vue → components/Request.vue

@@ -8,7 +8,7 @@
         <p>Request a quote</p>
       </div>
       <div class="wholesale">
-        <form @submit.prevent="wholesaleSubmit" class="wholesale-form" novalidate>
+        <form @submit.prevent="send" class="wholesale-form" novalidate>
           <div class="row wholesale-form-head">
             <div class="col-sm-6 title">Product</div>
             <div class="col-sm-4 title">Partnumber</div>
@@ -63,7 +63,6 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import store from '@vue-storefront/store'
 import i18n from '@vue-storefront/i18n'
 import { required, email } from 'vuelidate/lib/validators'
 
@@ -90,20 +89,23 @@ export default {
   },
   methods: {
     showWholesaleModal () {
-      store.dispatch('wholesale/showModal')
+      this.$store.dispatch('wholesale/showModal')
+
       this.isModalVisible = true
       this.email = ''
       this.comment = ''
       this.log = ''
+
       var html = document.getElementsByTagName('html')[0]
       html.setAttribute('class', 'no-scroll')
     },
     closeWholesaleModal () {
-      store.dispatch('wholesale/hideModal')
+      this.$store.dispatch('wholesale/hideModal')
+
       var html = document.getElementsByTagName('html')[0]
       html.removeAttribute('class', 'no-scroll')
     },
-    wholesaleSubmit: function (event) {
+    send: function (event) {
       if (this.$v.$invalid) {
         var errorEmailText = ''
         if (!this.$v.email.required) {
@@ -120,7 +122,7 @@ export default {
         return
       }
 
-      store.dispatch('wholesale/send', {
+      this.$store.dispatch('wholesale/send', {
         email: this.email,
         comment: this.comment,
         amount: this.product.qty,
@@ -205,9 +207,6 @@ $bg-secondary: color(secondary, $colors-background);
       border: 1px solid #aaa;
       border-radius: 4px;
       height: 30px;
-      background: rgb(222,222,222); /* Old browsers */
-      background: -moz-linear-gradient(top, rgba(222,222,222,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6-15 */
-      background: -webkit-linear-gradient(top, rgba(222,222,222,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10-25,Safari5.1-6 */
       background: linear-gradient(to bottom, rgba(222,222,222,1) 0%,rgba(204,204,204,1) 100%);
     }
     .wholesale-modal-title {
@@ -282,7 +281,6 @@ $bg-secondary: color(secondary, $colors-background);
         font-size: 14px;
         padding: 0 15px 0 10px;
         border-radius: 4px;
-        -webkit-box-shadow: none;
         box-shadow: none;
         cursor: pointer;
         background: #2e323f;

index.ts

@@ -2,7 +2,7 @@
 import { module } from './store'
 import { createModule } from '@vue-storefront/core/lib/module'
 
-export const KEY = 'wholesale-request'
+export const KEY = 'wholesale'
 export const WholesaleRequest = createModule({
   key: KEY,
   store: { modules: [{ key: KEY, module }]}

package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@interactivated/wholesale-request",
+  "version": "1.0.0",
+  "description": "Wholesale Request (RFQ) module for Vue Storefront",
+  "license": "MIT",
+  "main": "index.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

store/actions.ts

@@ -7,14 +7,14 @@ import * as types from './mutation-types'
 // it's a good practice for all actions to return Promises with effect of their execution
 export const actions: ActionTree<RfqState, any> = {
   showModal ({ commit }) {
-    commit('updateDisplayed', true)
+    commit(types.SET_DISPLAYED, true)
   },
   hideModal ({ commit }) {
-    commit('updateDisplayed', false)
+    commit(types.SET_DISPLAYED, false)
   },
   send (context, { email, comment, amount, sku, name }) {
     return new Promise((resolve, reject) => {
-      fetch(config.wholesale.send_request_endpoint, {
+      fetch(`${config.wholesale.endpoint}/send`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         mode: 'cors',