[ADD] initial commit

package.json

@@ -20,7 +20,10 @@
 		"pug": "^2.0.0-rc.4",
 		"sass-loader": "^6.0.6",
 		"style-loader": "^0.19.0",
+		"ts-loader": "^3.1.1",
+		"typescript": "^2.6.1",
 		"url-loader": "^0.6.2",
+		"vue-class-component": "^6.1.0",
 		"vue-loader": "^13.3.0",
 		"vue-template-compiler": "^2.5.2",
 		"webpack": "^3.8.1",

src/App.vue

@@ -1,90 +1,19 @@
 <template lang="pug">
     .pos
         form-wizard(title='' subtitle='' finishButtonText='Finalizar' color='#7c7bad' nextButtonText='Continuar' backButtonText='Volver' @on-complete='createSale')
-            tab-content(title="Qué productos necesita?")
-                product-step
-            tab-content(title="Quién es el cliente?")
-                customer-step
-            tab-content(title="Cómo quieres pagar?")
-                payment-method-step
-            tab-content(title="")
-                payment-amount-step
+            tab-content(title="Qué productos necesita?") 1
+            tab-content(title="Quién es el cliente?") 2
+            tab-content(title="Cómo quieres pagar?") 3
+            tab-content(title="") 4
 </template>
 
-<script>
-    import { mapActions } from 'vuex'
-
-    import { FormWizard, TabContent } from 'vue-form-wizard'
-    import 'vue-form-wizard/dist/vue-form-wizard.min.css'
-
-    import ProductStep from '@@/steps/Product'
-    import CustomerStep from '@@/steps/Customer'
-    import PaymentMethodStep from '@@/steps/PaymentMethod'
-    import PaymentAmountStep from '@@/steps/PaymentAmount'
-
+<script lang="ts">
     export default {
-        components: {
-            FormWizard,
-            TabContent,
-            ProductStep,
-            CustomerStep,
-            PaymentMethodStep,
-            PaymentAmountStep
-        },
-        methods: mapActions([
-            'initSale',
-            'createSale'
-        ]),
-        mounted() {
-            this.initSale()
-        }
+    
     }
 </script>
 
+
 <style lang="sass">
     @import './assets/variables'
-    .pos
-        width: 100%
-        height: 100%
-        position: absolute
-        .vue-form-wizard
-            width: 100%
-            height: 100%
-            padding-bottom: 0
-            .wizard-header
-                display: none
-            .wizard-navigation
-                width: 100%
-                height: 100%
-                .wizard-progress-with-circle
-                    top: 35px
-                .wizard-icon-circle
-                    width: 60px
-                    height: 60px
-                .wizard-tab-content
-                    width: 100%
-                    height: calc(100% - 82px)
-                    padding: 0
-                    overflow: hidden
-                    .wizard-tab-container
-                        width: calc(100% - 20px)
-                        height: calc(100% - 20px)
-                        margin: 10px
-                        .pos-step
-                            width: 100%
-                            height: 100%
-                            background: #fff
-            .wizard-card-footer
-                width: 100%
-                height: 50px
-                position: absolute
-                bottom: 0
-                .wizard-btn
-                    width: 160px
-                    height: 40px
-                    border-radius: 0
-                    box-shadow: none
-                    border: none
-                    &:hover, &:focus
-                        background: $app-main-color
 </style>

src/components/App.tsx

@@ -0,0 +1,18 @@
+import Vue from 'vue'
+import Component from 'vue-class-component'
+
+/**
+ * App
+ */
+@Component
+class App extends Vue {
+    render(): any {
+        return (
+            <div>
+                Hello
+            </div>
+        )
+    }
+}
+
+export default App

src/components/common/AddCard.vue

@@ -1,38 +0,0 @@
-<template lang="pug">
-    .add-card(@click='onClick')
-        i.fa.fa-plus(aria-hidden='true')
-</template>
-
-<script>
-    export default {
-        methods: {
-            onClick(e) {
-                this.$emit('onClickAdd')
-            }
-        }
-    }
-</script>
-
-<style lang="sass">
-    @import '../../assets/variables'
-
-    .add-card
-        width: 130px
-        height: 160px
-        margin: 5px
-        border: 1px solid $app-border-color
-        display: inline-block
-        position: relative
-        &:hover
-            cursor: pointer
-        i
-            font-size: 36pt
-            margin: 0
-            border: none
-            position: absolute;
-            top: 50%
-            left: 50%
-            margin-right: -50%
-            transform: translate(-50%, -50%)
-            color: $app-main-color
-</style>

src/components/common/Card.vue

@@ -1,89 +0,0 @@
-<template lang="pug">
-    .card(@click='onClick' :class="{ 'selected-card': isSelected }")
-        h2.card-title {{ title }}
-        img.card-image(:src="'data:image/png;base64,' + (image || 'iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAAAAACPAi4CAAAACXZwQWcAAABAAAAAQADq8/hgAAAEWklEQVRYw9WX6XKjRhCAef8HiySQvGt5vfZuEselOUAcEpe4GdI9MAgQOjb5k3SVyzY1801PX9OtNf9StP80QJR5miRpXtb/AFCnvmMySgmhlJn2Mal+BSBSj1NCGeNSGAMOd0/iQYCI95TAXnm+FCr/I2ZYPwJILEJhPaGm7flBFIW+Z5sUvwEivguovG7pMR0cV2e+BbYArF3cBqQclKfEvryvSB2KaHa6BYhgDSP7ZN7gmUNQCf86wCdgcBaKq04/cTzAuwbA/czKb8VdZYMSI8IAEOJ+XjTiFkF4SDjOARIIHLiBK+4E/xHOIdEloMSAAwZx7hEOBKIquwA4lFPbR/3uEhzCqSUmgBiwrGgeIlQm5b0zO0CN3yKw34QgQC4JKZqrGAFC0MpWvuwJ3V6hWD3BI5wchoDaBAumzYQgmsrd7ewZx5bosHIAAAtQp4+nXUuA+2yXy9Xyi4OsIorjauBLZQWtd0Gqrt3EvCXQlb4BMZYfsPP7cr0gvS4FaNw6Qus0ovtez8DZcYyHt8Wmk9XWdF+Mjf570Ke4q46UgAgUCtX55mKl/wSbsD83hrEE0VGJ1RrEWHz2aaXuIAEe7b3SNG/601oSzL/W20/T2r2uDNACARvjWelZQTTaCiCg2vSR1bzrsFgSQMk8SbPi8FWX+0GFbX2OXMarDoAmOGfo+wpXt7cwj4Hv+1n+rSMYW3HOfS4TAgHZIDIVYG38wNzchyB+kj4ZUwB4npw6ABokmgA2qz9kfbIkoWDLzQSQ0tbw2gA20kA/nmyqCHG8nmqQd2prbSKQZAIwnk5B5PSE/EWfACCUZGFSgHQKeE6DsCcExfc5wKEDRLMaJHBwTwA/zFzhOLBBPGODoCfEyYUb0XVBB1AGHXvho/SVDsSjF15QrtMG1xlpsDbCrCewj7UxAWAJSjsAlJOuHI0AX9Mi8IMgsJnMC2MMOJA2f7RhXI8AG/2LVxZZVlQWmKElnAFiT5nMH62L67Mb3lTmbIzVK3Uc9r6GvJAEyMa6d0KXP1oXliqbRPPzN0NvBcrBAmSpr37wlrB8GeRS6zkJECZVNRKeuLfty1C+wc/zp7TD9jVQN7DUDq2vkUEzfAymIl9uZ5iL1B0U1Rw7surmc4SE/sUBE3KaDB8Wd1QS7hJQga4Kayow2aAsXiV0L458HE/jx9UbPi33CIf+ITwDSnxM/IcIcAGIrHzaH+BX8Ky4awdq41nBZYsjG4/kEQLjg9Q5A9A1jJ7u3CJEa1OzmuvSKgubwPA24IT7WT7fJ5YmEtwbASWO2AkP94871WpPOCc8vmYHaORhv5lf75VrV3bD+9nZIrUJamhXN9v9kMlu3wonYVlGe9msU1/cGTgKpx0YmO2fsrKq66rMk8Bh7dd99sDIk+xxxsE5icqhqfsLflkz1pkbukSCBzI5bqG0EGrPGvfK2FeGDseRi1I5eVFuB8WvDp51FvsH13Fcz4+y6n86Oz8kfwPMD02INEiadQAAAABJRU5ErkJggg==')")
-        .card-description(v-if='!!description')
-            span {{ description }}
-</template>
-
-<script>
-    export default {
-        props: {
-            title: {
-                type: String,
-                default: 'Sin título'
-            },
-            image: {
-                type: String,
-                default: 'iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAAAAACPAi4CAAAACXZwQWcAAABAAAAAQADq8/hgAAAEWklEQVRYw9WX6XKjRhCAef8HiySQvGt5vfZuEselOUAcEpe4GdI9MAgQOjb5k3SVyzY1801PX9OtNf9StP80QJR5miRpXtb/AFCnvmMySgmhlJn2Mal+BSBSj1NCGeNSGAMOd0/iQYCI95TAXnm+FCr/I2ZYPwJILEJhPaGm7flBFIW+Z5sUvwEivguovG7pMR0cV2e+BbYArF3cBqQclKfEvryvSB2KaHa6BYhgDSP7ZN7gmUNQCf86wCdgcBaKq04/cTzAuwbA/czKb8VdZYMSI8IAEOJ+XjTiFkF4SDjOARIIHLiBK+4E/xHOIdEloMSAAwZx7hEOBKIquwA4lFPbR/3uEhzCqSUmgBiwrGgeIlQm5b0zO0CN3yKw34QgQC4JKZqrGAFC0MpWvuwJ3V6hWD3BI5wchoDaBAumzYQgmsrd7ewZx5bosHIAAAtQp4+nXUuA+2yXy9Xyi4OsIorjauBLZQWtd0Gqrt3EvCXQlb4BMZYfsPP7cr0gvS4FaNw6Qus0ovtez8DZcYyHt8Wmk9XWdF+Mjf570Ke4q46UgAgUCtX55mKl/wSbsD83hrEE0VGJ1RrEWHz2aaXuIAEe7b3SNG/601oSzL/W20/T2r2uDNACARvjWelZQTTaCiCg2vSR1bzrsFgSQMk8SbPi8FWX+0GFbX2OXMarDoAmOGfo+wpXt7cwj4Hv+1n+rSMYW3HOfS4TAgHZIDIVYG38wNzchyB+kj4ZUwB4npw6ABokmgA2qz9kfbIkoWDLzQSQ0tbw2gA20kA/nmyqCHG8nmqQd2prbSKQZAIwnk5B5PSE/EWfACCUZGFSgHQKeE6DsCcExfc5wKEDRLMaJHBwTwA/zFzhOLBBPGODoCfEyYUb0XVBB1AGHXvho/SVDsSjF15QrtMG1xlpsDbCrCewj7UxAWAJSjsAlJOuHI0AX9Mi8IMgsJnMC2MMOJA2f7RhXI8AG/2LVxZZVlQWmKElnAFiT5nMH62L67Mb3lTmbIzVK3Uc9r6GvJAEyMa6d0KXP1oXliqbRPPzN0NvBcrBAmSpr37wlrB8GeRS6zkJECZVNRKeuLfty1C+wc/zp7TD9jVQN7DUDq2vkUEzfAymIl9uZ5iL1B0U1Rw7surmc4SE/sUBE3KaDB8Wd1QS7hJQga4Kayow2aAsXiV0L458HE/jx9UbPi33CIf+ITwDSnxM/IcIcAGIrHzaH+BX8Ky4awdq41nBZYsjG4/kEQLjg9Q5A9A1jJ7u3CJEa1OzmuvSKgubwPA24IT7WT7fJ5YmEtwbASWO2AkP94871WpPOCc8vmYHaORhv5lf75VrV3bD+9nZIrUJamhXN9v9kMlu3wonYVlGe9msU1/cGTgKpx0YmO2fsrKq66rMk8Bh7dd99sDIk+xxxsE5icqhqfsLflkz1pkbukSCBzI5bqG0EGrPGvfK2FeGDseRi1I5eVFuB8WvDp51FvsH13Fcz4+y6n86Oz8kfwPMD02INEiadQAAAABJRU5ErkJggg=='
-            },
-            description: {
-                type: String,
-                default: ''
-            },
-            isSelected: {
-                type: Boolean,
-                default: true
-            }
-        },
-        methods: {
-            onClick() {
-                this.$emit('onClick')
-            }
-        } 
-    }
-</script>
-
-<style lang="sass">
-    @import '../../assets/variables'
-
-    .card
-        width: 130px
-        height: 160px
-        margin: 5px
-        border: 1px solid $app-border-color
-        display: inline-block
-        position: relative
-        &.selected-card
-            transition-duration: 300ms
-            border-bottom: 3px solid $app-main-color
-        &:hover
-            cursor: pointer
-        .card-title
-            width: 100%
-            height: 30px
-            font-size: 9pt
-            text-align: center
-            margin-top: 10px
-            position: absolute
-            top: 0
-        .card-image
-            width: 80px
-            height: 80px;
-            margin: 0
-            border: none
-            position: absolute
-            top: 50%
-            left: 50%
-            margin-right: -50%
-            transform: translate(-50%, -50%)
-        .card-description
-            width: 100%
-            height: 30px
-            padding-top: 5px
-            text-align: center
-            font-size: 10pt
-            font-weight: bold
-            background: $app-main-color
-            color: $app-bg-color
-            position: absolute
-            bottom: 0
-
-        @keyframes card-bubble
-            30%
-                transform: scaleX(0.75) scaleY(1.25)
-            40%
-                transform: scaleX(1.25) scaleY(0.75)
-            60%
-                transform: scaleX(0.85) scaleY(1.15)
-</style>

src/components/common/CardGrid.vue

@@ -1,73 +0,0 @@
-<template lang="pug">
-    .card-grid-wrapper
-        .card-grid-loading(v-if='loading')
-            spinner
-        .card-grid(v-else)
-            add-card(v-if='canAdd' @onClickAdd='onClickAdd')
-            card(v-for='item in items' :key='item.id' :title='item.name' :image='item.imageMedium' :isSelected='item.id === selectedId' :description='getDescription(item)' @onClick='onClickCard(item)')
-</template>
-
-<script>
-    import AddCard from '@/components/common/AddCard'
-    import Card from '@/components/common/Card'
-    import Spinner from '@/components/common/Spinner'
-
-    export default {
-        props: {
-            items: {
-                type: Array,
-                default: []
-            },
-            canAdd: {
-                type: Boolean,
-                default: false
-            },
-            description: {
-                type: String,
-                default: ''
-            },
-            loading: {
-                type: Boolean,
-                default: false
-            }
-        },
-        components: {
-            AddCard,
-            Card,
-            Spinner
-        },
-        methods: {
-            getDescription(item) {
-                return (!!this.description && item[this.description]) || ''
-            },
-            onClickAdd() {
-                this.$emit('onAdd')
-            },
-            onClickCard(item) {
-                this.selectedId = item.id
-                this.$emit('onSelect', item)
-            }
-        },
-        data() {
-            return {
-                selectedId: -1
-            }
-        }
-    }
-</script>
-
-<style lang="sass">
-    .card-grid-wrapper
-        width: 100%
-        height: calc(100% - 100px)
-        margin-top: 15px
-        overflow-y: auto
-        .card-grid-loading
-            width: 100%
-            height: 100%
-            display: flex
-            align-items: center
-            justify-content: center
-        .card-grid
-            width: 100%
-</style>

src/components/common/Cart.vue

@@ -1,126 +0,0 @@
-<template lang="pug">
-    .cart(:style='{ width, height }')
-        .cart-total
-            h2.currency-cart-total {{ totalInCurrencyFormat() }}
-        .cart-items-wrapper
-            transition-group(name='list' tag='ul' class='cart-items')
-                cart-item(v-for='(item, index) in items' :key='index' :index='index' :item='item' @onChange='onItemChanged' @onClickIncrement='onIncrementQty' @onClickDecrement='onDecrementQty' @onClickDelete='onDeleteItem')
-</template>
-
-<script>
-    import CartItem from './CartItem'
-
-    export default {
-        components: {
-            CartItem
-        },
-        props: {
-            items: {
-                type: Array,
-                default: [],
-                required: true
-            },
-            width: {
-                type: String,
-                default: '300px'
-            },
-            height: {
-                type: String,
-                default: '100%'
-            },
-            total: {
-                type: Number,
-                default: 0
-            },
-            thousandsSeparator: {
-                type: String,
-                default: '.'
-            },
-            decimalPlaces: {
-                type: Number,
-                default: 0
-            },
-            decimalSeparator: {
-                type: String,
-                default: ','
-            },
-            currencySymbol: {
-                type: String,
-                default: '$'
-            },
-            symbolPosition: {
-                type: String,
-                default: 'before'
-            }
-        },
-        methods: {
-            totalInCurrencyFormat() {
-                return this.total.toFixed(this.decimalPlaces).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1.')
-            },
-            computeTotal() {
-                let sum = 0
-
-                for (let item of this.items) {
-                    sum = sum + ((item.price || 1) * (item.quantity || 1))
-                }
-
-                this.total = sum
-
-                this.$emit('onTotalComputed', this.total)
-            },
-            onItemChanged(item) {
-                this.computeTotal();
-            },
-            onIncrementQty(item) {
-                this.$emit('onIncrementQty', item)
-            },
-            onDecrementQty(item) {
-                this.$emit('onDecrementQty', item)
-            },
-            onDeleteItem(item) {
-                this.$emit('onDeleteItem', item)
-            }
-        },
-        watch: {
-            items(value) {
-                this.computeTotal()
-            }
-        },
-        data() {
-            return {
-                total: 0
-            }
-        }
-    }
-</script>
-
-<style lang="sass">
-    @import '../../assets/variables'
-    .cart
-        border-left: 1px solid $app-border-color
-        padding-left: 10px
-        display: inline-block
-        vertical-align: top
-        .cart-total
-            width: 100%
-            height: 50px
-            .currency-cart-total
-                width: 100%
-                height: 50px
-                margin: 0
-                font-size: 30pt
-        .cart-items-wrapper
-            width: 100%
-            height: calc(100% - 100px)
-            overflow-y: auto
-            overflow-x: hidden
-            .cart-items
-                width: 100%
-                padding: 0
-                margin: 0
-            .list-enter-active, .list-leave-active
-                transition: all 0.3s
-            .list-enter, .list-leave-to
-                opacity: 0
-                transform: translateX(300px)
-</style>

src/components/common/CartItem.vue

@@ -1,141 +0,0 @@
-<template lang="pug">
-    li.cart-item
-        h3.item-name {{ item.name || 'Sin Nombre' }}
-        input.item-quantity(type='number' min='1' :value='item.quantity')
-        span.item-x x
-        span.item-price {{ item.price || 1 }}
-        span.item-equals =
-        span.item-subtotal {{ (item.price || 1) * (item.quantity || 1) }}
-        .cart-item-options-wrapper
-            .cart-item-options
-                .cart-item-option(class='fa fa-plus' @click='onClickIncrement')
-                .cart-item-option(class='fa fa-minus' @click='onClickDecrement')
-                .cart-item-option(class='fa fa-trash' @click='onClickDelete')
-</template>
-
-<script>
-    export default {
-        props: {
-            index: {
-                type: Number,
-                default: -1,
-                required: true
-            },
-            item: {
-                type: Object,
-                default: null
-            }
-        },
-        watch: {
-            item: {
-                handler(value) {
-                    this.onChange(value)
-                },
-                deep: true,
-                immediate: true
-            }
-        },
-        methods: {
-            onChange(item) {
-                this.$emit('onChange', item)
-            },
-            onClickIncrement() {
-                this.$emit('onClickIncrement', this.item)
-            },
-            onClickDecrement() {
-                this.$emit('onClickDecrement', this.item)
-            },
-            onClickDelete() {
-                this.$emit('onClickDelete', this.item)
-            }
-        }
-    }
-</script>
-
-<style lang="sass">
-    @import '../../assets/variables'
-    .cart-item
-        width: 100%
-        height: 90px
-        list-style: none outside none
-        border-bottom: 1px solid $app-border-color
-        box-sizing: border-box
-        position: relative
-        &:nth-child(1)
-            border-top: 1px solid $app-border-color
-        &:hover
-            transition-duration: 1000ms
-            border-bottom: 2px solid $app-main-color
-        .item-name
-            width: 100%
-            height: 20px
-            margin: 10px 0 5px 0
-            float: left
-            font-size: 8pt
-            display: inline-block
-        .item-quantity
-            width: 50px
-            height: 28px
-            margin-top: 6px
-            text-align: right
-            float: left
-            display: inline-block
-        .item-x
-            width: 20px
-            height: 20px
-            margin-top: 12px
-            text-align: right
-            float: left
-            display: inline-block
-        .item-price
-            width: 80px
-            height: 20px
-            margin-top: 12px
-            text-align: right
-            float: left
-            display: inline-block
-        .item-equals
-            width: 20px
-            height: 20px
-            margin-top: 12px
-            text-align: center
-            float: left
-            display: inline-block
-        .item-subtotal
-            width: 100px
-            height: 20px
-            margin-top: 12px
-            text-align: right
-            font-weight: bold
-            display: inline-block
-        .cart-item-options-wrapper
-            width: 100%
-            height: 20px
-            position: absolute
-            bottom: 0
-            display: flex
-            justify-content: center
-            .cart-item-options
-                width: 90px
-                height: 20px
-                border: 1px solid #d3d3d3
-                border-bottom: none
-                display: flex
-                justify-content: center
-                .cart-item-option
-                    width: 18px
-                    height: 18px
-                    margin: 0 5px
-                    color: #666
-                    &:hover
-                        cursor: pointer
-                    &.fa
-                        padding-left: 2px
-                        line-height: 20px
-                        &.fa-plus:hover
-                            color: #2196f3
-                        &.fa-minus:hover
-                            color: #ffc107
-                        &.fa-trash:hover
-                            color: #f44336
-</style>

src/components/common/Searcher.vue

@@ -1,105 +0,0 @@
-<template lang="pug">
-    input.searcher(type='search' :placeholder='placeholder' :style='{ width, height }' v-model='search')
-</template>
-
-<script>
-    import Fuse from 'fuse.js'
-
-    export default {
-        props: {
-            items: {
-                type: Array,
-                default: [],
-                required: true
-            },
-            placeholder: {
-                type: String,
-                default: 'Buscar...'
-            },
-            width: {
-                type: String,
-                default: '100%'
-            },
-            height: {
-                type: String,
-                default: '35px'
-            },
-            shouldSort: {
-                type: Boolean,
-                default: true
-            },
-            threshold: {
-                type: Number,
-                default: 0.4,
-            },
-            location: {
-                type: Number,
-                default: 0
-            },
-            distance: {
-                type: Number,
-                default: 100
-            },
-            maxPatternLength: {
-                type: Number,
-                default: 32
-            },
-            minMatchCharLength: {
-                type: Number,
-                default: 1
-            },
-            keys: {
-                type: Array,
-                default: [],
-                required: true
-            }
-        },
-        watch: {
-            items(values) {
-                this.fuse.setCollection(values)
-            },
-            search(value) {
-                this.performSearch(value.trim())
-            },
-            results(values) {
-                this.$emit('onSearch', values)
-            }
-        },
-        methods: {
-            initFuse() {
-                this.fuse = new Fuse(this.items, {
-                    shouldSort: this.shouldSort,
-                    threshold: this.threshold,
-                    location: this.location,
-                    distance: this.distance,
-                    maxPatternLength: this.maxPatternLength,
-                    minMatchCharLength: this.minMatchCharLength,
-                    keys: this.keys
-                })
-            },
-            performSearch(value) {
-                this.results = this.fuse.search(value)
-            }
-        },
-        data() {
-            return {
-                fuse: null,
-                search: '',
-                results: []
-            }
-        },
-        mounted() {
-            this.initFuse()
-        }
-    }
-</script>
-
-<style lang="sass">
-    .searcher
-        text-align: center
-        border-radius: 0 !important
-        font:
-            size: 11pt
-            style: normal
-            weight: bold
-</style>

src/components/common/Spinner.vue

@@ -1,46 +0,0 @@
-<template lang="pug">
-    .spinner
-        .spinner-rect.spinner-rect-1
-        .spinner-rect.spinner-rect-2
-        .spinner-rect.spinner-rect-3
-        .spinner-rect.spinner-rect-4
-        .spinner-rect.spinner-rect-5
-</template>
-
-<script>
-    export default {
-    
-    }
-</script>
-
-<style lang="sass">
-    @import '../../assets/variables'
-    .spinner 
-        $rect-count: 5
-        $animation-duration: 1000ms
-        $delay-range: 400ms
-
-        width: 50px
-        height: 40px
-        text-align: center
-        font-size: 10px
-        margin: 40px auto
-
-        .spinner-rect
-            width: 5px
-            height: 100%
-            background: $app-main-color
-            margin: 0 3px 0 0
-            display: inline-block
-            animation: spinner-wave $animation-duration infinite ease-in-out
-
-        @for $i from 1 through $rect-count
-            .spinner-rect-#{$i}
-                animation-delay: - $animation-duration + $delay-range / ($rect-count - 1) * ($i - 1)
-
-        @keyframes spinner-wave
-            0%, 40%, 100%
-                transform: scaleY(0.4)
-            20%
-                transform: scaleY(1.0)
-</style>

src/components/common/Ticket.vue

@@ -1,152 +0,0 @@
-<template lang="pug">
-    .ticket
-        .ticket-summary
-            .ticket-summary-header
-                h3 {{ companyName || 'No company' }}
-                table
-                    tbody
-                        tr
-                            td Producto
-                            td Precio
-                            td Cant
-                            td Subtotal
-            .ticket-items-wrapper
-                table
-                    tbody
-                        tr(v-for='item in items' :key='item.id')
-                            td {{ item.name || 'no data' }}
-                            td {{ item.price || 'no data' }}
-                            td {{ item.quantity || 'no data' }}
-                            td {{ ((item.price || 0) * (item.quantity || 0)) || 'no data'  }}
-            .ticket-summary-footer
-                table
-                    tbody
-                        tr
-                            td Total:
-                            td {{ total || 'no data' }}
-                        tr
-                            td Cliente:
-                            td {{ customerName || 'no data' }}
-</template>
-
-<script>
-    export default {
-        props: {
-            companyName: {
-                type: String,
-                default: ''
-            },
-            customerName: {
-                type: String,
-                default: ''
-            },
-            total: {
-                type: Number,
-                default: 0
-            },
-            items: {
-                type: [],
-                default: []
-            }
-        }
-    }
-</script>
-
-<style lang="sass">
-    @import '../../assets/variables'
-    .ticket
-        width: 500px
-        height: 100%
-        .ticket-summary
-            width: 350px
-            height: 450px
-            border: 1px solid $app-border-color
-            margin: auto
-            box-shadow: -2px 2px 5pc $app-border-color, 2px 2px 5px $app-border-color
-            position: relative
-            .ticket-summary-header, .ticket-summary-footer
-                width: 100%
-                position: absolute
-            .ticket-summary-header
-                height: 65px
-                top: 0
-                h3
-                    text-align: center
-                    font-size: 14pt
-                    margin: 0 15px
-                    padding: 30px 0 15px 0
-                    color: $app-dark-color
-                table
-                    width: 308px
-                    height: 30px
-                    margin: 0 20px
-                    font-size: 7.5pt
-                    font-weight: bold
-                    tbody
-                        tr
-                            line-height: 30px
-                            border-top: 1px solid $app-border-color
-                            border-bottom: 1px solid $app-border-color
-                            td
-                                &:nth-child(1)
-                                    width: 180px
-                                    text-align: left
-                    
-                                &:nth-child(2)
-                                    width: 50px
-                                    text-align: right
-                    
-                                &:nth-child(3)
-                                    width: 30px
-                                    text-align: right
-
-                                &:nth-child(4)
-                                    width: 50px
-                                    text-align: right
-            .ticket-items-wrapper
-                width: 310px
-                height: 280px
-                margin: 95px 20px 75px 20px
-                padding-top: 5px
-                overflow-y: auto
-                table
-                    width: 100%
-                    font-size: 7.5pt
-                    tbody
-                        tr
-                            height: 28px
-                            line-height: 30px
-
-                            td
-                                &:nth-child(1)
-                                    width: 180px
-                    
-                                &:nth-child(2)
-                                    width: 50px
-                                    text-align: right
-                    
-                                &:nth-child(3)
-                                    width: 30px
-                                    text-align: right
-
-                                &:nth-child(4)
-                                    width: 50px
-                                    text-align: right
-            .ticket-summary-footer
-                width: 348px
-                height: 75px
-                bottom: 0
-                padding: 15px 25px
-                background: $app-bg-color
-                table
-                    width: 100%
-                    tbody
-                        tr
-                            height: 25px
-                            line-height: 20px
-                            td
-                                &:nth-child(1)
-                                    font-weight: bold
-                                &:nth-child(2)
-                                    text-align: right
-</style>

src/components/common/index.js

@@ -1,9 +0,0 @@
-import CardGrid from './CardGrid'
-import Cart from './Cart'
-import Searcher from './Searcher'
-
-export {
-    CardGrid,
-    Cart,
-    Searcher
-}

src/components/forms/CustomerForm.vue

@@ -1,172 +0,0 @@
-<template lang="pug">
-    .customer-form(:class="'customer-form-' + type")
-        .form-header(v-if='!!title')
-            h2 {{ title }}
-            hr
-        form.form-display(:class="'form-display-' + type")
-            .form-separator
-                h3 Detalles Generales
-                hr
-            .form-item(:class="'form-item-' + type")
-                label.form-label(:class="'form-label-' + type") Nombre
-                input.form-input(:class="'form-input-' + type" :value="customer.name || ''" v-model='customer.name' :readonly="mode === 'details'")
-            .form-item(:class="'form-item-' + type")
-                label.form-label(:class="'form-label-' + type") R.U.C/C.I.Nº
-                input.form-input(:class="'form-input-' + type" :value="customer.ruc || ''" v-model='customer.ruc' :readonly="mode === 'details'")
-            .form-item(:class="'form-item-' + type")
-                label.form-label(:class="'form-label-' + type") Celular
-                input.form-input(:class="'form-input-' + type" :value="customer.phone || ''" v-model='customer.phone' :readonly="mode === 'details'")
-            div(v-if="mode === 'details'")
-                .form-item(:class="'form-item-' + type")
-                    label.form-label(:class="'form-label-' + type") Teléfono
-                    input.form-input(:class="'form-input-' + type" :value="customer.mobile || ''" readonly)
-                .form-item(:class="'form-item-' + type")
-                    label.form-label(:class="'form-label-' + type") Email
-                    input.form-input(:class="'form-input-' + type" :value="customer.email || ''" readonly)
-                .form-separator
-                    h3 Créditos
-                    hr
-                .form-item(:class="'form-item-' + type")
-                    label.form-label(:class="'form-label-' + type") Créditos
-                    input.form-input(:class="'form-input-' + type" :value="customer.credit || 0" readonly)
-            .form-actions(v-if="mode === 'form'")
-                button.form-action(@click='onAccept') Aceptar
-                button.form-action(@click='onCancel') Cancelar
-</template>
-
-<script>
-    export default {
-        props: {
-            title: {
-                type: String,
-                default: ''
-            },
-            type: {
-                type: String,
-                default: 'medium'
-            },
-            customer: {
-                type: Object,
-                default: {
-                    name: '',
-                    ruc: '',
-                    phone: '',
-                    mobile: '',
-                    email: '',
-                    credit: 0
-                }
-            },
-            mode: {
-                type: String,
-                default: 'form'
-            },
-            width: {
-                type: String,
-                default: '320px'
-            },
-            height: {
-                type: String,
-                default: '100%'
-            }
-        },
-        methods: {
-            onAccept() {
-                this.$emit('onAccept', this.customer)
-            },
-            onCancel() {
-                this.$emit('onCancel')
-            }
-        },
-        mounted() {
-               this.customer = {
-                    name: '',
-                    ruc: '',
-                    phone: '',
-                    mobile: '',
-                    email: '',
-                    credit: 0
-                }
-        }
-    }
-</script>
-
-<style lang="sass">
-    @import '../../assets/variables' 
-    .customer-form
-        &.customer-form-small
-            width: 320px
-            height: 100%
-        &.customer-form-medium
-            width: 600px
-            height: 100%
-        &.customer-form-big
-            width: 800px
-            height: 100%
-        .form-header
-            h2
-                font-size: 10pt
-                color: $app-border-color
-                margin-left: 15px
-            hr
-                margin: 0 15px
-        .form-display
-            padding: 15px
-            &.form-display-small
-                width: 320px
-                height: 100%
-            &.form-display-medium
-                width: 600px
-                height: 100%
-            &.form-display-big
-                width: 800%
-                height: 100%
-            .form-separator
-                h3
-                    color: $app-separator-color
-                    font-size: 8pt
-                hr
-                    margin-top: 5px
-            .form-item
-                width: 100%
-                margin-bottom: 10px
-                &.form-item-small
-                    height: 35px
-                &.form-item-medium
-                    height: 45px
-                &.form-item-big
-                    height: 55px
-                .form-label
-                    width: 30%
-                    &.form-label-small
-                        height: 35px
-                        font-size: 10pt
-                    &.form-label-medium
-                        height: 45px
-                        font-size: 18pt
-                    &.form-label-big
-                        height: 35px
-                        font-size: 24pt
-                .form-input
-                    width: 70%
-                    border-radius: 0
-                    &.form-input-small
-                        height: 35px
-                        font-size: 10pt
-                    &.form-input-medium
-                        height: 45px
-                        font-size: 18pt
-                    &.form-input-big
-                        height: 55px
-                        font-size: 24pt
-            .form-actions
-                float: right
-                .form-action
-                    width: 150px
-                    height: 40px
-                    border: none
-                    box-shadow: none
-                    border-radius: 0
-                    margin-right: 5px
-                    background: $app-main-color
-                    color: $app-bg-color
-</style>

src/components/forms/ProductForm.vue

@@ -1,95 +0,0 @@
-<template lang="pug">
-    .product-form
-        .form-header
-            h2 {{ title }}
-            hr
-        form.form-display
-            .form-item
-                label.form-label Nombre
-                input.form-input(v-model='product.name' autofocus)
-            .form-item
-                label.form-label Precio
-                input.form-input(v-model='product.price')
-            .form-item
-                label.form-label Código de barras
-                input.form-input(v-model='product.ean13')
-            .form-actions
-                button.form-action(@click='onAccept') Aceptar
-                button.form-action(@click='onCancel') Cancelar
-</template>
-
-<script>
-    export default {
-        props: {
-            title: String,
-            default: ''
-        },
-        data() {
-            return {
-                product: {
-                    name: '',
-                    price: 0,
-                    ean13: ''
-                }
-            }
-        },
-        methods: {
-            onAccept() {
-                this.$emit('onAccept', this.product)
-            },
-            onCancel() {
-                this.$emit('onCancel')
-            }
-        },
-        mounted() {
-            Object.assign(this.product, {
-                name: '',
-                price: 0,
-                ean13: ''
-            })
-        }
-    }
-</script>
-
-<style lang="sass">
-    @import '../../assets/variables' 
-    .product-form
-        width: 600px
-        height: 100%
-        .form-header
-            margin-top: 30px
-            h2
-                font-size: 10pt
-                color: $app-border-color
-                margin-left: 15px
-            hr
-                margin: 0 15px
-        .form-display
-            width: 100%
-            height: 100%
-            padding: 15px
-            .form-item
-                width: 100%
-                height: 45px
-                margin-bottom: 10px
-                .form-label
-                    width: 30%
-                    height: 45px
-                    font-size: 14pt
-                .form-input
-                    width: 70%
-                    height: 45px
-                    font-size: 18pt
-                    border-radius: 0
-            .form-actions
-                float: right
-                .form-action
-                    width: 150px
-                    height: 40px
-                    border: none
-                    box-shadow: none
-                    border-radius: 0
-                    margin-right: 5px
-                    background: $app-main-color
-                    color: $app-bg-color
-</style>

src/components/modals/CustomerModal.vue

@@ -1,51 +0,0 @@
-<template lang="pug">
-    modal(name='customer-modal' transition='nice-modal-fade' @before-close='beforeClose' :classes="['v--modal', 'customer-modal']")
-        customer-form(:type='medium' @onAccept='onAccept' @onCancel='onCancel')
-</template>
-
-<script>
-    import CustomerForm from '@@/forms/CustomerForm'
-
-    export default {
-        components: {
-            CustomerForm
-        },
-        props: {
-            title: {
-                type: String,
-                default: ''
-            },
-            show: {
-                type: Boolean,
-                default: false
-            }
-        },
-        watch: {
-            show(value) {
-                if (!value) {
-                    this.$modal.hide('customer-modal')
-                    return
-                }
-
-                this.$modal.show('customer-modal')
-            }
-        },
-        methods: {
-            beforeClose(e) {
-                if (this.show) {
-                    e.stop()
-                }
-            },
-            onAccept(e) {
-                this.$emit('onAccept', e)
-            },
-            onCancel() {
-                this.$emit('onCancel')
-            }
-        }
-    }
-</script>
-
-<style lang="sass">
-    .customer-modal
-</style>

src/components/modals/ProductModal.vue

@@ -1,50 +0,0 @@
-<template lang="pug">
-    modal(name='product-modal' transition='nice-modal-fade' @before-close='beforeClose' :classes="['v--modal', 'product-modal']")
-        product-form(title='Nuevo Producto' @onAccept='onAccept' @onCancel='onCancel')
-</template>
-
-<script>
-    import ProductForm from '@@/forms/ProductForm'
-
-    export default {
-        components: {
-            ProductForm
-        },
-        props: {
-            title: {
-                type: String,
-                default: ''
-            },
-            show: {
-                type: Boolean,
-                default: false
-            }
-        },
-        watch: {
-            show(value) {
-                if (!value) {
-                    this.$modal.hide('product-modal')
-                    return
-                }
-
-                this.$modal.show('product-modal')
-            }
-        },
-        methods: {
-            beforeClose(e) {
-                if (this.show) {
-                    e.stop()
-                }
-            },
-            onAccept(value) {
-                this.$emit('onAccept', value)
-            },
-            onCancel() {
-                this.$emit('onCancel')
-            }
-        }
-    }
-</script>
-
-<style lang="sass">
-</style>

src/components/steps/Customer.vue

@@ -1,57 +0,0 @@
-<template lang="pug">
-    .pos-step
-        .customer-selection-step
-            .customer-selector
-                searcher(:items='customers' :keys="['name', 'displayName']")
-                card-grid(:items='customers' :loading='loadingCustomers' canAdd @onAdd='showCustomerForm' @onSelect='selectCustomer')
-                customer-modal(:show='showingCustomerForm' @onAccept='submitCustomer' @onCancel='hideCustomerForm')
-            transition(name='slide-fade')
-                customer-form(v-if='!!selectedCustomer' :customer='selectedCustomer' mode='details' type='small')
-</template>
-
-<script>
-    import { mapGetters, mapActions } from 'vuex'
-    import { Searcher, CardGrid } from '@@/common'
-
-    import CustomerModal from '@@/modals/CustomerModal'
-    import CustomerForm from '@@/forms/CustomerForm'
-
-    import { SHOW_CUSTOMER_FORM, SUBMIT_CUSTOMER, HIDE_CUSTOMER_FORM, SELECT_CUSTOMER } from '@/constants/actionTypes'
-
-    export default {
-        components: {
-            Searcher,
-            CardGrid,
-            CustomerModal,
-            CustomerForm
-        },
-        computed: mapGetters([
-            'customers',
-            'loadingCustomers',
-            'showingCustomerForm',
-            'selectedCustomer'
-        ]),
-        methods: mapActions([
-            SHOW_CUSTOMER_FORM,
-            SUBMIT_CUSTOMER,
-            HIDE_CUSTOMER_FORM,
-            SELECT_CUSTOMER
-        ])
-    }
-</script>
-
-<style lang="sass">
-    .pos-step
-        .customer-selection-step
-            width: 100%
-            height: 100%
-            display: flex
-            .customer-selector
-                width: 100%
-                height: 100%
-            .slide-fade-enter-active
-                transition: all 300ms ease;
-            .slide-fade-enter
-                transform: translateX(300px)
-                opacity: 0
-</style>

src/components/steps/PaymentAmount.vue

@@ -1,125 +0,0 @@
-<template lang="pug">
-    .pos-step
-        ticket(:customerName='selectedCustomer && selectedCustomer.name' :total='cartTotal' :items='cartItems')
-        form.payment-amount
-            .form-separator
-                h3 Detalles del Pago
-                hr
-            .form-item(v-show="paymentType === 'cash'")
-                label.form-label Monto a Pagar
-                input.form-input(:value='cartTotal' readonly)
-            .form-item
-                label.form-label Monto Recibido
-                input.form-input(:value='amountReceived' v-model='amountReceived' autofocus)
-            .form-item(v-show="paymentType === 'cash'")
-                hr
-                label.form-label Monto a Devolver
-                input.form-input(:value='amountResidual' readonly)
-            .form-item-table(v-show="paymentType === 'credit'")
-                table
-                    thead
-                        tr
-                            th Monto a Pagar
-                            th Fecha de Pago
-                    tbody
-                        tr(v-for='line in paymentLines')
-                            td {{ line.total }}
-                            td {{ line.date }}
-</template>
-
-<script>
-    import { mapGetters } from 'vuex'
-
-    import Ticket from '@@/common/Ticket'
-
-    export default {
-        components: {
-            Ticket
-        },
-        computed: mapGetters([
-            'selectedCustomer',
-            'cartItems',
-            'cartTotal',
-            'paymentType',
-            'paymentTerms'
-        ]),
-        watch: {
-            amountReceived(value) {
-                this.computeAmountResidual(value)
-            }
-        },
-        methods: {
-            computeAmountResidual(value) {
-                this.amountResidual = this.cartTotal - parseFloat(value)
-            }
-        },
-        data() {
-            return {
-                amountReceived: 0,
-                amountResidual: 0,
-                paymentLines: []
-            }
-        }
-    }
-</script>
-
-<style lang="sass">
-    @import '../../assets/variables'
-    .pos-step
-        width: 100%
-        height: calc(100% - 50px)
-        padding-bottom: 50px
-        display: flex
-        .payment-amount
-            width: calc(100% - 450px)
-            height: 100%
-            margin-right: 50px
-            padding: 35px
-            background: $app-light-color
-            .form-separator
-                h3
-                    color: $app-separator-color
-                    font-size: 8pt
-                    margin: 0
-                hr
-                    margin-top: 15px
-            .form-item
-                width: 100%px
-                height: 45px
-                margin-bottom: 15px
-                .form-label
-                    width: 250px
-                    height: 45px
-                    font-size: 14pt
-                .form-input
-                    width: 350px
-                    height: 45px
-                    font-size: 14pt
-                    border-radius: 0
-                    &.input-only
-                        margin-left: 250px
-                        margin-bottom: 15px
-            .form-item-table
-                width: 100%
-                height: 250px
-                border: 1px solid $app-border-color
-                table
-                    width: 100%
-                    thead
-                        th
-                            line-height: 35px
-                            padding-left: 10px
-                        th:nth-child(1)
-                            width: 200px
-                        th:nth-child(2)
-                            width: 200px
-                    tbody
-                        td
-                            height: 35px
-                            padding-left: 10px
-
-                        td:nth-child(1)
-                            width: 200px
-                        td:nth-child(2)
-                            width: 200px
-</style>

src/components/steps/PaymentMethod.vue

@@ -1,115 +0,0 @@
-<template lang="pug">
-    .pos-step
-        ticket(:customerName='selectedCustomer && selectedCustomer.name' :total='cartTotal' :items='cartItems')
-        form.payment-method
-            .form-separator
-                h3 Detalles del Cliente
-                hr
-            .form-item
-                label.form-label Cliente
-                input.form-input(:value='selectedCustomer && selectedCustomer.name' readonly)
-            transition(name='fade')
-                .form-item(v-if="payment === 'credit'")
-                    label.form-label Crédito
-                    input.form-input(:value='customerCredit' readonly)
-            .form-separator
-                h3 Detalles del Pago
-                hr
-            .form-item
-                label.form-label Forma de Pago
-                .form-item-option
-                    input.form-input(type='radio' id='cash' value='cash' v-model='payment')
-                    label(for='cash') Contado
-                .form-item-option
-                    input.form-input(type='radio' id='credit' value='credit' v-model='payment')
-                    label(for='credit') Crédito
-            transition(name='fade')
-                .form-item(v-if="payment === 'credit'")
-                    select.form-input.input-only
-                        option(v-for='term in paymentTerms' :value='term' v-if="term.lines.length > 0 && (term.lines[0].days !== 0 || term.lines[0].value !==  'balance')") {{ term.displayName }}
-                .form-item(v-else)
-                    label.form-label Método de Pago
-                    select.form-input
-                        option(v-for='journal in journals') {{ journal.displayName }}
-</template>
-
-<script>
-    import { mapGetters, mapActions } from 'vuex'
-
-    import Ticket from '@@/common/Ticket'
-
-    import { CHANGE_PAYMENT_TYPE } from '@/constants/actionTypes'
-
-    export default {
-        components: {
-            Ticket
-        },
-        watch: {
-            payment(value) {
-                this.changePaymentType(value)
-            }
-        },
-        computed: mapGetters([
-            'selectedCustomer',
-            'cartItems',
-            'cartTotal',
-            'customerCredit',
-            'paymentTerms',
-            'journals'
-        ]),
-        methods: mapActions([
-            CHANGE_PAYMENT_TYPE
-        ]),
-        data() {
-            return {
-                payment: 'cash'
-            }
-        }
-    }
-</script>
-
-<style lang="sass">
-    @import '../../assets/variables'
-    .pos-step
-        width: 100%
-        height: calc(100% - 50px)
-        padding-bottom: 50px
-        display: flex
-        .payment-method
-            width: calc(100% - 450px)
-            height: 100%
-            margin-right: 50px
-            padding: 35px
-            background: $app-light-color
-            .form-separator
-                h3
-                    color: $app-separator-color
-                    font-size: 8pt
-                    margin: 0
-                hr
-                    margin-top: 15px
-            .form-item
-                width: 100%px
-                height: 45px
-                margin-bottom: 15px
-                .form-label
-                    width: 250px
-                    height: 45px
-                    font-size: 14pt
-                .form-input
-                    width: 350px
-                    height: 45px
-                    font-size: 14pt
-                    border-radius: 0
-                    &.input-only
-                        margin-left: 250px
-                        margin-bottom: 15px
-                .form-item-option
-                    display: inline-block
-                    input
-                        width: 20px
-                        height: 20px
-                    label
-                        font-size: 12pt
-                        margin: 0 45px 15px 5px
-</style>

src/components/steps/Product.vue

@@ -1,50 +0,0 @@
-<template lang="pug">
-    .pos-step
-        .products-selector
-            searcher(:items='products' :keys="['name', 'displayName']")
-            card-grid(:items='products' :loading='loadingProducts' canAdd @onAdd='showProductForm' @onSelect='selectProduct')
-            product-modal(:show='showingProductForm' @onAccept='submitProduct' @onCancel='hideProductForm')
-        cart(:items='cartItems' @onTotalComputed='changeCartTotal' @onIncrementQty='addToCart' @onDecrementQty='decreaseFromCart' @onDeleteItem='removeFromCart')
-</template>
-
-<script>
-    import { mapGetters, mapActions } from 'vuex'
-    import { Searcher, CardGrid, Cart } from '@@/common'
-    import ProductModal from '@@/modals/ProductModal'
-
-    import { SELECT_PRODUCT, SHOW_PRODUCT_FORM, HIDE_PRODUCT_FORM, SUBMIT_PRODUCT, CHANGE_CART_TOTAL, ADD_TO_CART, DECREASE_FROM_CART, REMOVE_FROM_CART } from '@/constants/actionTypes'
-
-    export default {
-        components: {
-            Searcher,
-            CardGrid,
-            Cart,
-            ProductModal
-        },
-        computed: mapGetters([
-            'products',
-            'loadingProducts',
-            'showingProductForm',
-            'cartItems'
-        ]),
-        methods: mapActions([
-            SELECT_PRODUCT,
-            SHOW_PRODUCT_FORM,
-            HIDE_PRODUCT_FORM,
-            SUBMIT_PRODUCT,
-            CHANGE_CART_TOTAL,
-            ADD_TO_CART,
-            DECREASE_FROM_CART,
-            REMOVE_FROM_CART
-        ])
-    }
-</script>
-
-<style lang="sass">
-    .pos-step
-        .products-selector
-            width: calc(100% - 300px)
-            height: 100%
-            padding-right: 5px
-            display: inline-block
-</style>

src/constants/actionTypes.js

@@ -1,86 +0,0 @@
-const NOTIFY = 'notify'
-
-const INIT_SALE = 'initSale'
-
-const EXPLODE_DATA = 'explodeData'
-
-const CREATE_SALE = 'createSale'
-
-const INIT_USER = 'initUser'
-
-const INIT_PRODUCTS = 'initProducts'
-
-const SHOW_PRODUCT_FORM = 'showProductForm'
-
-const HIDE_PRODUCT_FORM = 'hideProductForm'
-
-const SUBMIT_PRODUCT = 'submitProduct'
-
-const CREATE_PRODUCT = 'createProduct'
-
-const RECEIVE_PRODUCT = 'receiveProduct'
-
-const SELECT_PRODUCT = 'selectProduct'
-
-const INIT_PAYMENT_TERMS = 'initPaymentTerms'
-
-const CHANGE_PAYMENT_TYPE = 'changePaymentType'
-
-const INIT_JOURNALS = 'initJournals' 
-
-const INIT_DATE = 'initDate'
-
-const INIT_CUSTOMERS = 'initCustomers'
-
-const SHOW_CUSTOMER_FORM = 'showCustomerForm'
-
-const HIDE_CUSTOMER_FORM = 'hideCustomerForm'
-
-const SUBMIT_CUSTOMER = 'submitCustomer'
-
-const CREATE_CUSTOMER = 'createCustomer'
-
-const RECEIVE_CUSTOMER = 'receiveCustomer'
-
-const SELECT_CUSTOMER = 'selectCustomer'
-
-const INIT_CURRENCIES = 'initCurrencies'
-
-const CHANGE_CART_TOTAL = 'changeCartTotal'
-
-const ADD_TO_CART = 'addToCart'
-
-const DECREASE_FROM_CART = 'decreaseFromCart'
-
-const REMOVE_FROM_CART = 'removeFromCart'
-
-export {
-    NOTIFY,
-    INIT_SALE,
-    EXPLODE_DATA,
-    CREATE_SALE,
-    INIT_USER,
-    INIT_PRODUCTS,
-    SHOW_PRODUCT_FORM,
-    HIDE_PRODUCT_FORM,
-    SUBMIT_PRODUCT,
-    CREATE_PRODUCT,
-    RECEIVE_PRODUCT,
-    SELECT_PRODUCT,
-    INIT_PAYMENT_TERMS,
-    CHANGE_PAYMENT_TYPE,
-    INIT_JOURNALS,
-    INIT_DATE,
-    INIT_CUSTOMERS,
-    SHOW_CUSTOMER_FORM,
-    HIDE_CUSTOMER_FORM,
-    SUBMIT_CUSTOMER,
-    CREATE_CUSTOMER,
-    RECEIVE_CUSTOMER,
-    SELECT_CUSTOMER,
-    INIT_CURRENCIES,
-    CHANGE_CART_TOTAL,
-    ADD_TO_CART,
-    DECREASE_FROM_CART,
-    REMOVE_FROM_CART
-}

src/constants/mutationTypes.js

@@ -1,60 +0,0 @@
-const SET_USER = 'setUser'
-
-const SET_LOADING_USER = 'setLoadingUser'
-
-const SET_PRODUCTS = 'setProducts'
-
-const SET_LOADING_PRODUCTS = 'setLoadingProducts'
-
-const ADD_PRODUCT = 'addProduct'
-
-const SET_SHOW_PRODUCT_FORM = 'setShowProductForm'
-
-const SELECT_PRODUCT = 'selectProduct'
-
-const SET_PRODUCT_WITH_VARIANT = 'setProductWithVariant'
-
-const SET_PAYMENT_TERMS = 'setPaymentTerms'
-
-const SET_LOADING_PAYMENT_TERMS = 'setLoadingPaymentTerms'
-
-const SET_PAYMENT_TYPE = 'setPaymentType'
-
-const SET_JOURNALS = 'setJournals'
-
-const SET_LOADING_JOURNALS= 'setLoadingJournals'
-
-const SET_DATE = 'setDate'
-
-const SET_LOADING_DATE = 'setLoadingDate'
-
-const SET_CUSTOMERS = 'setCustomers'
-
-const SET_LOADING_CUSTOMERS = 'setLoadingCustomers'
-
-const SET_SHOW_CUSTOMER_FORM = 'setShowCustomerForm'
-
-const SET_SELECTED_CUSTOMER = 'setSelectedCustomer'
-
-const ADD_CUSTOMER = 'addCustomer'
-
-const SET_CURRENCIES = 'setCurrencies'
-
-const SET_LOADING_CURRENCIES = 'setLoadingCurrencies'
-
-const PUSH_TO_CART = 'pushToCart'
-
-const PULL_FROM_CART = 'pullFromCart'
-
-const SET_CART_TOTAL = 'setCartTotal'
-
-export {
-    SET_USER, SET_LOADING_USER, // User
-    SET_PRODUCTS, SET_LOADING_PRODUCTS, ADD_PRODUCT, SET_SHOW_PRODUCT_FORM, SELECT_PRODUCT, SET_PRODUCT_WITH_VARIANT, // Product
-    SET_PAYMENT_TERMS, SET_LOADING_PAYMENT_TERMS, SET_PAYMENT_TYPE, // Payment Term
-    SET_JOURNALS, SET_LOADING_JOURNALS, // Journal
-    SET_DATE, SET_LOADING_DATE, // Date
-    SET_CUSTOMERS, SET_LOADING_CUSTOMERS, SET_SHOW_CUSTOMER_FORM, SET_SELECTED_CUSTOMER, ADD_CUSTOMER, // Customer
-    SET_CURRENCIES, SET_LOADING_CURRENCIES, // Currency
-    PUSH_TO_CART, PULL_FROM_CART, SET_CART_TOTAL // Cart
-}

src/constants/resourcePaths.js

@@ -1,16 +0,0 @@
-const BASE_URL = '/eiru_sales'
-
-const INIT_SALE_URL = `${BASE_URL}/init`
-
-const CREATE_PRODUCT_URL = `${BASE_URL}/create_product`
-
-const CREATE_CUSTOMER_URL = `${BASE_URL}/create_customer`
-
-const PROCESS_SALE_URL = `${BASE_URL}/process`
-
-export {
-    INIT_SALE_URL,
-    CREATE_PRODUCT_URL,
-    CREATE_CUSTOMER_URL,
-    PROCESS_SALE_URL
-}

src/index.js → src/index.ts

@@ -1,30 +1,18 @@
 import Vue from 'vue'
-import App from '@/App'
-import VueModal from 'vue-js-modal'
-import store from '@/store'
-
-Vue.use(VueModal)
 
 Vue.config.productionTip = false
 Vue.config.silent = true
-Vue.config.devTools = false
 
-openerp.eiru_pos = (instance, local) => {
+declare var openerp: any
+declare var $: any
+
+openerp.eiru_pos = (instance: any, local: any) => {
 
     local.PosWidget = instance.Widget.extend({
-        start() {
+        start(): void {
             this.sidebarFold()
-
-            this.vm = new Vue({
-                store,
-                el: this.el,
-                template: '<App />',
-                components: {
-                    App
-                }
-            });
         },
-        destroy() {
+        destroy(): void {
             this.vm.$destroy()
             $(this.vm.$el).remove()
             this.vm = null
@@ -33,11 +21,11 @@ openerp.eiru_pos = (instance, local) => {
 
             this._super.apply(this, arguments)
         },
-        sidebarFold() {
+        sidebarFold(): void {
             if (!instance.eiru_sidebar_toggler) return
             instance.eiru_sidebar_toggler.sidebar_fold()
         },
-        sidebarUnfold() {
+        sidebarUnfold(): void {
             if (!instance.eiru_sidebar_toggler) return
             instance.eiru_sidebar_toggler.sidebar_unfold()
         }

src/store/actions.js

@@ -1,85 +0,0 @@
-import axios from 'axios'
-import { INIT_SALE_URL, CREATE_PRODUCT_URL, CREATE_CUSTOMER_URL, PROCESS_SALE_URL } from '@/constants/resourcePaths'
-import { INIT_SALE, NOTIFY, EXPLODE_DATA, CREATE_PRODUCT, CREATE_CUSTOMER, RECEIVE_PRODUCT, RECEIVE_CUSTOMER, CREATE_SALE } from '@/constants/actionTypes'
-
-const actions = {
-    /**
-     * 
-     * @param {*} param0 
-     * @param {*} payload 
-     */
-    [NOTIFY] ({ commit }, payload) {
-        openerp.web.notification.do_warn('Atención', payload)
-        return false
-    },
-    /**
-     * 
-     * @param {*} param0 
-     */
-    [INIT_SALE] ({ dispatch }) {
-        return axios.get(INIT_SALE_URL).then(response => {
-            dispatch('explodeData', response.data)
-        }).catch(error => {
-            console.log(error)
-        })
-    },
-    /**
-     * 
-     * @param {*} param0 
-     * @param {*} payload 
-     */
-    [EXPLODE_DATA] ({ dispatch }, payload) {
-        for (let value in payload) {
-            dispatch(`init${value[0].toUpperCase()}${value.slice(1)}`, payload[value])
-        }
-    },
-    /**
-     * 
-     * @param {*} param0 
-     * @param {*} payload 
-     */
-    [CREATE_PRODUCT] ({ dispatch }, payload) {
-        const data = {
-            jsonrpc: '2.0',
-            method: 'call',
-            params: {
-                ...payload
-            }
-        }
-
-        return axios.post(CREATE_PRODUCT_URL, data).then(response => {
-            dispatch(RECEIVE_PRODUCT, response.data.result)
-        }).catch(error => {
-            console.log(error)
-        })
-    },
-    /**
-     * 
-     * @param {*} param0 
-     * @param {*} payload 
-     */
-    [CREATE_CUSTOMER] ({ dispatch }, payload) {
-        const data = {
-            jsonrpc: '2.0',
-            method: 'call',
-            params: {
-                ...payload
-            }
-        }
-
-        return axios.post(CREATE_CUSTOMER_URL, data).then(response => {
-            dispatch(RECEIVE_CUSTOMER, response.data.result)
-        }).catch(error => {
-            console.log(error)
-        })
-    },
-    /**
-     * 
-     * @param {*} param0 
-     */
-    [CREATE_SALE] ({ getters , dispatch }) {
-
-    }
-}
-
-export default actions

src/store/index.js

@@ -1,32 +0,0 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-import actions from '@/store/actions'
-
-import cart from '@/store/modules/cart'
-import currency from '@/store/modules/currency'
-import customer from '@/store/modules/customer'
-import date from '@/store/modules/date'
-import journal from '@/store/modules/journal'
-import payment from '@/store/modules/payment'
-import product from '@/store/modules/product'
-import user from '@/store/modules/user'
-
-Vue.use(Vuex)
-
-const store = new Vuex.Store({
-    actions,
-    modules: {
-        cart,
-        currency,
-        customer,
-        date,
-        journal,
-        payment,
-        product,
-        user
-    },
-    strict: true
-})
-
-export default store

src/store/modules/cart.js

@@ -1,117 +0,0 @@
-import { PUSH_TO_CART, PULL_FROM_CART, SET_CART_TOTAL } from '@/constants/mutationTypes'
-import { ADD_TO_CART, DECREASE_FROM_CART, REMOVE_FROM_CART, CHANGE_CART_TOTAL } from '@/constants/actionTypes'
-
-const initialState = {
-    cartItems: [],
-    cartTotal: 0
-}
-
-const state = {
-    cartItems: initialState.cartItems,
-    cartTotal: initialState.cartTotal
-}
-
-const getters = {
-    /**
-     * 
-     * @param {*} state 
-     */
-    cartItems(state) {
-        return state.cartItems
-    },
-    /**
-     * 
-     * @param {*} state 
-     */
-    cartTotal(state) {
-        return state.cartTotal
-    }
-}
-
-const mutations = {
-    /**
-     * 
-     * @param {*} state 
-     * @param {*} payload 
-     */
-    [PUSH_TO_CART] (state, payload) {
-        let productFound = state.cartItems.find(item => item.id === payload.id)
-
-        if (productFound) {
-            productFound.quantity = productFound.quantity + 1
-            return
-        }
-
-        state.cartItems = [payload, ...state.cartItems]
-    },
-    /**
-     * 
-     * @param {*} state 
-     * @param {*} payload 
-     */
-    [PULL_FROM_CART] (state, payload) {
-        let productFoundIndex = state.cartItems.findIndex(item => item.id === payload.item.id)
-
-        if (payload.mode === 'partial') {
-            state.cartItems[productFoundIndex].quantity = state.cartItems[productFoundIndex].quantity - 1
-        } else {
-            state.cartItems.splice(productFoundIndex, 1)
-        }
-    },
-    /**
-     * 
-     * @param {*} state 
-     * @param {*} payload 
-     */
-    [SET_CART_TOTAL] (state, payload) {
-        state.cartTotal = payload
-    }
-}
-
-const actions = {
-    /**
-     * 
-     * @param {*} param0 
-     * @param {*} payload 
-     */
-    [ADD_TO_CART] ({ commit }, payload) {
-        commit(PUSH_TO_CART, payload)
-    },
-    /**
-     * 
-     * @param {*} param0 
-     * @param {*} payload 
-     */
-    [DECREASE_FROM_CART] ({ commit }, payload) {
-        commit(PULL_FROM_CART, {
-            item: payload,
-            mode: 'partial'
-        })
-    },
-    /**
-     * 
-     * @param {*} param0 
-     * @param {*} payload 
-     */
-    [REMOVE_FROM_CART] ({ commit }, payload) {
-        commit(PULL_FROM_CART, {
-            item: payload,
-            mode: 'full'
-        })
-    },
-    /**
-     * 
-     * @param {*} param0 
-     * @param {*} payload 
-     */
-    [CHANGE_CART_TOTAL] ({ commit }, payload) {
-        commit(SET_CART_TOTAL, payload)
-    }
-}
-
-export default {
-    state,
-    getters,
-    mutations,
-    actions
-}

src/store/modules/currency.js

@@ -1,67 +0,0 @@
-import { SET_CURRENCIES, SET_LOADING_CURRENCIES } from '@/constants/mutationTypes'
-import { INIT_CURRENCIES } from '@/constants/actionTypes'
-
-const initialState = {
-    currencies: [],
-    loadingCurrencies: false
-}
-
-const state = {
-    currencies: initialState.currencies,
-    loadingCurrencies: !initialState.currencies    
-}
-
-const getters = {
-    /**
-     * 
-     * @param {*} state 
-     */
-    currencies(state) {
-        return state.currencies
-    },
-    /**
-     * 
-     * @param {*} state 
-     */
-    loadingCurrencies(state) {
-        return state.loadingCurrencies
-    }
-}
-
-const mutations = {
-    /**
-     * 
-     * @param {*} state 
-     * @param {*} payload 
-     */
-    [SET_CURRENCIES] (state, payload) {
-        state.currencies = payload
-    },
-    /**
-     * 
-     * @param {*} state 
-     * @param {*} payload 
-     */
-    [SET_LOADING_CURRENCIES] (state, payload) {
-        state.loadingCurrencies = !!payload
-    }
-}
-
-const actions = {
-    /**
-     * 
-     * @param {*} param0 
-     * @param {*} payload 
-     */
-    [INIT_CURRENCIES] ({ commit }, payload) {
-        commit(SET_CURRENCIES, payload)
-        commit(SET_LOADING_CURRENCIES)
-    }
-}
-
-export default {
-    state,
-    getters,
-    mutations,
-    actions
-}

src/store/modules/customer.js

@@ -1,156 +0,0 @@
-import { SET_CUSTOMERS, SET_LOADING_CUSTOMERS, SET_SHOW_CUSTOMER_FORM, SET_SELECTED_CUSTOMER, ADD_CUSTOMER } from '@/constants/mutationTypes'
-import { INIT_CUSTOMERS, SHOW_CUSTOMER_FORM, HIDE_CUSTOMER_FORM, SUBMIT_CUSTOMER, CREATE_CUSTOMER, RECEIVE_CUSTOMER, SELECT_CUSTOMER } from '@/constants/actionTypes'
-
-const initialState = {
-    customers: [],
-    loadingCustomers: false,
-    showingCustomerForm: false,
-    selectedCustomer: null
-}
-
-const state = {
-    customers: initialState.customers,
-    loadingCustomers: !initialState.loadingCustomers,
-    showingCustomerForm: initialState.showingCustomerForm,
-    selectedCustomer: initialState.selectedCustomer
-}
-
-const getters = {
-    /**
-     * 
-     * @param {*} state 
-     */
-    customers(state) {
-        return state.customers
-    },
-    /**
-     * 
-     * @param {*} state 
-     */
-    loadingCustomers(state) {
-        return state.loadingCustomers
-    },
-    /**
-     * 
-     * @param {*} state 
-     */
-    showingCustomerForm(state) {
-        return state.showingCustomerForm
-    },
-    /**
-     * 
-     * @param {*} state 
-     */
-    selectedCustomer(state) {
-        return state.selectedCustomer
-    },
-    /**
-     * 
-     * @param {*} state 
-     */
-    customerCredit(state) {
-        return state.selectedCustomer && state.selectedCustomer.creditLimit >= state.selectedCustomer.credit ? state.selectedCustomer.creditLimit - state.credit : 0
-    }
-}
-
-const mutations = {
-    /**
-     * 
-     * @param {*} state 
-     * @param {*} payload 
-     */
-    [SET_CUSTOMERS] (state, payload) {
-        state.customers = payload
-    },
-    /**
-     * 
-     * @param {*} state 
-     * @param {*} payload 
-     */
-    [SET_LOADING_CUSTOMERS] (state, payload) {
-        state.loadingCustomers = !!payload
-    },
-    /**
-     * 
-     * @param {*} state 
-     * @param {*} payload 
-     */
-    [SET_SHOW_CUSTOMER_FORM] (state, payload) {
-        state.showingCustomerForm = !!payload
-    },
-    /**
-     * 
-     * @param {*} state 
-     * @param {*} payload 
-     */
-    [ADD_CUSTOMER] (state, payload) {
-        state.customers = [payload, ...state.customers]
-    },
-    /**
-     * 
-     * @param {*} state 
-     * @param {*} payload 
-     */
-    [SET_SELECTED_CUSTOMER] (state, payload) {
-        state.selectedCustomer = payload
-    }
-}
-
-const actions = {
-    /**
-     * 
-     * @param {*} param0 
-     * @param {*} payload 
-     */
-    [INIT_CUSTOMERS] ({ commit }, payload) {
-        commit(SET_CUSTOMERS, payload)
-        commit(SET_LOADING_CUSTOMERS)
-    },
-    /**
-     * 
-     * @param {*} param0 
-     * @param {*} payload 
-     */
-    [SHOW_CUSTOMER_FORM] ({ commit }) {
-        commit(SET_SHOW_CUSTOMER_FORM, true)
-    },
-    /**
-     * 
-     * @param {*} param0 
-     */
-    [HIDE_CUSTOMER_FORM] ({ commit }) {
-        commit(SET_SHOW_CUSTOMER_FORM, false)
-    },
-    /**
-     * 
-     * @param {*} param0 
-     */
-    [SUBMIT_CUSTOMER] ({ commit, dispatch }, payload) {
-        commit(SET_LOADING_CUSTOMERS, true)
-        dispatch(CREATE_CUSTOMER, payload)
-        dispatch(HIDE_CUSTOMER_FORM)
-    },
-    /**
-     * 
-     * @param {*} param0 
-     * @param {*} payload 
-     */
-    [RECEIVE_CUSTOMER] ({ commit }, payload) {
-        commit(ADD_CUSTOMER, payload)
-        commit(SET_LOADING_CUSTOMERS, false)
-    },
-    /**
-     * 
-     * @param {*} param0 
-     */
-    [SELECT_CUSTOMER] ({ commit }, payload) {
-        commit(SET_SELECTED_CUSTOMER, payload)
-    }
-}
-
-export default {
-    state,
-    getters,
-    mutations,
-    actions
-}

src/store/modules/date.js

@@ -1,67 +0,0 @@
-import { SET_DATE, SET_LOADING_DATE } from '@/constants/mutationTypes'
-import { INIT_DATE } from '@/constants/actionTypes'
-
-const initialState = {
-    date: null,
-    loadingDate: false
-}
-
-const state = {
-    date: initialState.date,
-    loadingDate: !initialState.loadingDate
-}
-
-const getters = {
-    /**
-     * 
-     * @param {*} state 
-     */
-    date(state) {
-        return state.date
-    },
-    /**
-     * 
-     * @param {*} state 
-     */
-    loadingDate(state) {
-        return state.loadingDate
-    }
-}
-
-const mutations = {
-    /**
-     * 
-     * @param {*} state 
-     * @param {*} payload 
-     */
-    [SET_DATE] (state, payload) {
-        state.date = payload
-    },
-    /**
-     * 
-     * @param {*} state 
-     * @param {*} payload 
-     */
-    [SET_LOADING_DATE] (state, payload) {
-        state.loadingDate = !!payload
-    }
-}
-
-const actions = {
-    /**
-     * 
-     * @param {*} param0 
-     * @param {*} payload 
-     */
-    [INIT_DATE] ({ commit }, payload) {
-        commit(SET_DATE, payload)
-        commit(SET_LOADING_DATE)
-    }
-}
-
-export default {
-    state,
-    getters,
-    mutations,
-    actions
-}

src/store/modules/journal.js

@@ -1,67 +0,0 @@
-import { SET_JOURNALS, SET_LOADING_JOURNALS } from '@/constants/mutationTypes'
-import { INIT_JOURNALS } from '@/constants/actionTypes'
-
-const initialState = {
-    journals: [],
-    loadingJournals: false
-}
-
-const state = {
-    journals: initialState.journals,
-    loadingJournals: !initialState.loadingJournals
-}
-
-const getters = {
-    /**
-     * 
-     * @param {*} state 
-     */
-    journals(state) {
-        return state.journals
-    },
-    /**
-     * 
-     * @param {*} state 
-     */
-    loadingJournals(state) {
-        return state.loadingJournals
-    }
-}
-
-const mutations = {
-    /**
-     * 
-     * @param {*} state 
-     * @param {*} payload 
-     */
-    [SET_JOURNALS] (state, payload) {
-        state.journals = payload
-    },
-    /**
-     * 
-     * @param {*} state 
-     * @param {*} payload 
-     */
-    [SET_LOADING_JOURNALS] (state, payload) {
-        state.loadingJournals = !!payload
-    }
-}
-
-const actions = {
-    /**
-     * 
-     * @param {*} param0 
-     * @param {*} payload 
-     */
-    [INIT_JOURNALS] ({ commit }, payload) {
-        commit(SET_JOURNALS, payload)
-        commit(SET_LOADING_JOURNALS)
-    }
-}
-
-export default {
-    state,
-    getters,
-    mutations,
-    actions
-}

src/store/modules/payment.js

@@ -1,91 +0,0 @@
-import { SET_PAYMENT_TERMS, SET_LOADING_PAYMENT_TERMS, SET_PAYMENT_TYPE } from '@/constants/mutationTypes'
-import { INIT_PAYMENT_TERMS, CHANGE_PAYMENT_TYPE } from '@/constants/actionTypes'
-
-const initialState = {
-    paymentTerms: [],
-    loadingPaymentTerms: false,
-    paymentType: 'cash'
-}
-
-const state = {
-    paymentTerms: initialState.paymentTerms,
-    loadingPaymentTerms: !initialState.loadingPaymentTerms,
-    paymentType: initialState.paymentType
-}
-
-const getters = {
-    /**
-     * 
-     * @param {*} state 
-     */
-    paymentTerms(state) {
-        return state.paymentTerms
-    },
-    /**
-     * 
-     * @param {*} state 
-     */
-    loadingPaymentTerms(state) {
-        return state.loadingPaymentTerms
-    },
-    /**
-     * 
-     * @param {*} state 
-     */
-    paymentType(state) {
-        return state.paymentType
-    }
-}
-
-const mutations = {
-    /**
-     * 
-     * @param {*} state 
-     * @param {*} payload 
-     */
-    [SET_PAYMENT_TERMS] (state, payload) {
-        state.paymentTerms = payload
-    },
-    /**
-     * 
-     * @param {*} state 
-     */
-    [SET_LOADING_PAYMENT_TERMS] (state, payload) {
-        state.loadingPaymentTerms = !!payload
-    },
-    /**
-     * 
-     * @param {*} state 
-     * @param {*} payload 
-     */
-    [SET_PAYMENT_TYPE] (state, payload) {
-        state.paymentType = payload
-    }
-}
-
-const actions = {
-    /**
-     * 
-     * @param {*} param0 
-     * @param {*} payload 
-     */
-    [INIT_PAYMENT_TERMS] ({ commit }, payload) {
-        commit(SET_PAYMENT_TERMS, payload)
-        commit(SET_LOADING_PAYMENT_TERMS)
-    },
-    /**
-     * 
-     * @param {*} param0 
-     * @param {*} payload 
-     */
-    [CHANGE_PAYMENT_TYPE] ({ commit }, payload) {
-        commit(SET_PAYMENT_TYPE, payload)
-    }
-}
-
-export default {
-    state,
-    getters,
-    mutations,
-    actions
-}

src/store/modules/product.js

@@ -1,166 +0,0 @@
-import { SET_PRODUCTS, SET_LOADING_PRODUCTS, SET_SHOW_PRODUCT_FORM, SET_PRODUCT_WITH_VARIANT, ADD_PRODUCT } from '@/constants/mutationTypes'
-import { INIT_PRODUCTS, SHOW_PRODUCT_FORM, HIDE_PRODUCT_FORM, SUBMIT_PRODUCT, CREATE_PRODUCT, RECEIVE_PRODUCT, SELECT_PRODUCT, ADD_TO_CART } from '@/constants/actionTypes'
-
-const initialState = {
-    products: [],
-    loadingProducts: false,
-    showingProductForm: false,
-    showVariants: false,
-    productWithVariant: null
-}
-
-const state = {
-    products: initialState.products,
-    loadingProducts: !initialState.loadingProducts,
-    showingProductForm: initialState.showingProductForm,
-    showVariants: initialState.showVariants,
-    productWithVariant: initialState.productWithVariant
-}
-
-const getters = {
-    /**
-     * 
-     * @param {*} state 
-     */
-    products(state) {
-        return state.products
-    },
-    /**
-     * 
-     * @param {*} state 
-     */
-    loadingProducts(state) {
-        return state.loadingProducts
-    },
-    /**
-     * 
-     * @param {*} state 
-     */
-    showingProductForm(state) {
-        return state.showingProductForm
-    },
-    /**
-     * 
-     * @param {*} state 
-     */
-    showVariants(state) {
-        return state.showVariants
-    },
-    /**
-     * 
-     * @param {*} state 
-     */
-    productWithVariant(state) {
-        return state.productWithVariant
-    }
-}
-
-const mutations = {
-    /**
-     * 
-     * @param {*} state 
-     * @param {*} payload 
-     */
-    [SET_PRODUCTS] (state, payload) {
-        state.products = payload
-    },
-    /**
-     * 
-     * @param {*} state 
-     * @param {*} payload 
-     */
-    [SET_LOADING_PRODUCTS] (state, payload) {
-        state.loadingProducts = !!payload
-    },
-    /**
-     * 
-     * @param {*} state 
-     * @param {*} payload 
-     */
-    [SET_SHOW_PRODUCT_FORM] (state, payload) {
-        state.showingProductForm = !!payload
-    },
-    /**
-     * 
-     * @param {*} state 
-     * @param {*} payload 
-     */
-    [ADD_PRODUCT] (state, payload) {
-        state.products = [payload, ...state.products]
-    },
-    /**
-     * 
-     * @param {*} state 
-     * @param {*} payload 
-     */
-    [SET_PRODUCT_WITH_VARIANT] (state, payload) {
-        state.productWithVariant = payload
-    }
-}
-
-const actions = {
-    /**
-     * 
-     * @param {*} param0 
-     * @param {*} payload 
-     */
-    [INIT_PRODUCTS] ({ commit }, payload) {
-        commit(SET_PRODUCTS, payload)
-        commit(SET_LOADING_PRODUCTS)
-    },
-    /**
-     * 
-     * @param {*} param0 
-     * @param {*} payload 
-     */
-    [SHOW_PRODUCT_FORM] ({ commit }) {
-        commit(SET_SHOW_PRODUCT_FORM, true)
-    },
-    /**
-     * 
-     * @param {*} param0 
-     */
-    [HIDE_PRODUCT_FORM] ({ commit }) {
-        commit(SET_SHOW_PRODUCT_FORM, false)
-    },
-    /**
-     * 
-     * @param {*} param0 
-     * @param {*} payload 
-     */
-    [SUBMIT_PRODUCT] ({ commit, dispatch }, payload) {
-        commit(SET_LOADING_PRODUCTS, true)
-        dispatch(CREATE_PRODUCT, payload)
-        dispatch(HIDE_PRODUCT_FORM)
-    },
-    /**
-     * 
-     * @param {*} param0 
-     * @param {*} payload 
-     */
-    [RECEIVE_PRODUCT] ({ commit }, payload) {
-        commit(ADD_PRODUCT, payload)
-        commit(SET_LOADING_PRODUCTS, false)
-    },
-    /**
-     * 
-     * @param {*} param0 
-     * @param {*} payload 
-     */
-    [SELECT_PRODUCT] ({ commit, dispatch }, payload) {
-        if (payload.variantCount > 1) {
-            commit(SET_PRODUCT_WITH_VARIANT, payload)
-            return
-        }
-
-        dispatch(ADD_TO_CART, payload.variants[0])
-    }
-}
-
-export default {
-    state,
-    getters,
-    mutations,
-    actions
-}
-

src/store/modules/user.js

@@ -1,67 +0,0 @@
-import { SET_USER, SET_LOADING_USER } from '@/constants/mutationTypes'
-import { INIT_USER } from '@/constants/actionTypes'
-
-const initialState = {
-    user: null,
-    loadingUser: false
-}
-
-const state = {
-    user: initialState.user,
-    loadingUser: !initialState.loadingUser
-}
-
-const getters = {
-    /**
-     * 
-     * @param {*} state 
-     */
-    user(state) {
-        return state.user
-    },
-    /**
-     * 
-     * @param {*} state 
-     */
-    loadingUser(state) {
-        return state.loadingUser
-    }
-}
-
-const mutations = {
-    /**
-     * 
-     * @param {*} state 
-     * @param {*} payload 
-     */
-    [SET_USER] (state, payload) {
-        state.user = payload
-    },
-    /**
-     * 
-     * @param {*} state 
-     * @param {*} payload 
-     */
-    [SET_LOADING_USER] (state, payload) {
-        state.loadingUser = !!payload
-    }
-}
-
-const actions = {
-    /**
-     * 
-     * @param {*} param0 
-     * @param {*} payload 
-     */
-    [INIT_USER] ({ commit }, payload) {
-        commit(SET_USER, payload)
-        commit(SET_LOADING_USER)
-    }
-}
-
-export default {
-    state,
-    getters,
-    mutations,
-    actions
-}

src/tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "target": "es5",
+        "jsx": "react",
+        "strict": true,
+        "module": "es2015",
+        "moduleResolution": "node",
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true,
+        "experimentalDecorators": true
+    }
+}

webpack.config.js

@@ -5,7 +5,7 @@ var ExtractTextPlugin = require('extract-text-webpack-plugin')
 var prod = process.env.NODE_ENV === 'production'
 
 module.exports = {
-    entry: Path.resolve('src/index.js'),
+    entry: Path.resolve('src/index.ts'),
     output: {
         path: Path.resolve('static/src'),
         filename: 'main.js'
@@ -37,6 +37,12 @@ module.exports = {
                 loader: 'babel-loader',
                 include: Path.resolve('src')
             },
+            {
+                test: /\.ts$/,
+                exclude: /node_modules/,
+                loader: 'ts-loader',
+                include: Path.resolve('src')
+            },
             {
                 test: /\.css$/,
                 loader: ['style-loader', 'css-loader']

yarn.lock

@@ -1054,7 +1054,7 @@ chalk@^2.0.1:
     escape-string-regexp "^1.0.5"
     supports-color "^4.0.0"
 
-chalk@^2.1.0:
+chalk@^2.1.0, chalk@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.0.tgz#b5ea48efc9c1793dccc9b4767c93914d3f2d52ba"
   dependencies:
@@ -1530,7 +1530,7 @@ emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
 
-enhanced-resolve@^3.4.0:
+enhanced-resolve@^3.0.0, enhanced-resolve@^3.4.0:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-3.4.1.tgz#0421e339fd71419b3da13d129b3979040230476e"
   dependencies:
@@ -3694,6 +3694,10 @@ scss-tokenizer@^0.2.3:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
 
+semver@^5.0.1:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
+
 set-blocking@^2.0.0, set-blocking@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
@@ -4012,6 +4016,15 @@ trim-right@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
 
+ts-loader@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-3.1.1.tgz#602d93c12029eaf8fa1ee478a90785d40c5f6658"
+  dependencies:
+    chalk "^2.3.0"
+    enhanced-resolve "^3.0.0"
+    loader-utils "^1.0.2"
+    semver "^5.0.1"
+
 tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
@@ -4033,6 +4046,10 @@ type-is@~1.6.10:
     media-typer "0.3.0"
     mime-types "~2.1.15"
 
+typescript@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.6.1.tgz#ef39cdea27abac0b500242d6726ab90e0c846631"
+
 uglify-js@^2.6.1, uglify-js@^2.8.29:
   version "2.8.29"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
@@ -4132,6 +4149,10 @@ void-elements@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
 
+vue-class-component@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-6.1.0.tgz#41a51a7991f2c0d51ff73f08436de0c2bfd934d6"
+
 vue-form-wizard@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/vue-form-wizard/-/vue-form-wizard-0.7.0.tgz#fcfbb2d7b430cb9e2642ba577cf5c192131aa80e"