[ADD] payment cash step

src/App.vue

@@ -1,12 +1,14 @@
 <template lang="pug">
     .pos
-        form-wizard(title="" subtitle="" finishButtonText="Finalizar" color="#7c7bad" nextButtonText="Continuar" backButtonText="Volver" transition="fade" @on-complete="completeSale()")
-            tab-content(title="Agregue productos al carrito" :before-change="checkCart")
+        form-wizard(title="" subtitle="" finishButtonText="Finalizar" color="#7c7bad" :nextButtonText="getNextMessage()" backButtonText="Volver" transition="fade")
+            tab-content(title="Qué productos necesita?" :before-change="checkCart")
                 cart-step
-            tab-content(title="Seleccione un cliente" :before-change="checkCustomer")
+            tab-content(title="Quién es el cliente?" :before-change="checkCustomer")
                 customer-step
-            tab-content(title="Vea un resumen de su operación")
+            tab-content(title="Cómo quieres pagar?")
                 payment-step
+            tab-content(title="Qué monto quieres pagar?" v-if="payment === 'cash'")
+                payment-cash-step
         loader
 </template>
 
@@ -17,6 +19,8 @@
     import CartStep from '@/components/cart/CartStep'
     import CustomerStep from '@/components/customer/CustomerStep'
     import PaymentStep from '@/components/payment/PaymentStep'
+    import PaymentCashStep from '@/components/payment/PaymentCashStep'
+
     import Loader from '@/components/Loader'
 
     import { mapActions, mapGetters } from 'vuex'
@@ -29,11 +33,13 @@
             CartStep,
             CustomerStep,
             PaymentStep,
+            PaymentCashStep,
             Loader,
         },
         computed: mapGetters([
             'cartIsEmpty',
-            'hasSelectedCustomer'
+            'hasSelectedCustomer',
+            'payment'
         ]),
         methods: {
             checkCart() {
@@ -50,6 +56,9 @@
 
                 return this.hasSelectedCustomer
             },
+            getNextMessage() {
+                return this.payment === 'cash' ? 'Continuar' : 'Finalizar'
+            },
             ...mapActions([
                 'initSale',
                 'notify',

src/components/payment/PaymentAmount.vue

@@ -0,0 +1,68 @@
+<template lang="pug">
+    form.payment-amount-form
+        .payment-form-separator
+            h3 Detalles del Pago
+            hr
+        .payment-amount-item
+            label.payment-label Monto a pagar
+            input.payment-input(readonly :value="formatTotal()")
+        .payment-amount-item
+            label.payment-label Monto recibido
+            input.payment-input
+        hr.result-separator
+        .payment-amount-item
+            label.payment-label Monto a devolver
+            input.payment-input(readonly)
+</template>
+
+<script>
+    import { mapGetters } from 'vuex'
+
+    export default {
+        computed: mapGetters([
+            'total'
+        ]),
+        methods: {
+            formatTotal() {
+                return accounting.formatMoney(this.total, '₲', 0, '.', ',')
+            }
+        }
+    }
+</script>
+
+<style lang="sass">
+    .payment-amount-form
+        width: calc(100% - 450px)
+        height: 100%
+        margin-right: 50px
+        padding: 35px
+        background: #f5f5f5
+
+        .payment-amount-item
+            width: 100%
+            height: 45px
+            margin-bottom: 15px
+
+            .payment-label
+                width: 250px
+                height: 45px
+                font-size: 14pt
+
+            .payment-input
+                width: 350px
+                height: 45px
+                font-size: 24pt
+                border-radius: 0
+                text-align: right
+
+        .payment-form-separator
+            h3
+                color: #9e9e9e
+                font-size: 8pt
+            hr
+                margin-top: 5px
+
+        .result-separator
+            margin: 30px 165px 30px 250px
+            border-top: 1px solid #bdbdbd
+</style>

src/components/payment/PaymentCashStep.vue

@@ -0,0 +1,27 @@
+<template lang="pug">
+    .pos-step
+        ticket
+        payment-amount
+</template>
+
+<script>
+    import { mapGetters } from 'vuex'
+
+    import Ticket from '@/components/payment/Ticket'
+    import PaymentAmount from '@/components/payment/PaymentAmount'
+
+    export default {
+        components: {
+            Ticket,
+            PaymentAmount
+        }
+    }
+</script>
+
+<style lang="sass" scoped>
+    .pos-step
+        width: 100%
+        height: calc(100% - 50px)
+        padding-bottom: 50px
+        display: flex
+</style>

src/components/payment/PaymentDetails.vue

@@ -16,10 +16,10 @@
         .form-item
             label.form-label Forma de pago
             .form-item-option
-                input.form-input(type="radio" id="cash" value="cash" v-model="payment") 
+                input.form-input(type="radio" id="cash" value="cash" v-model="payIn") 
                 label(for="cash") Contado
             .form-item-option
-                input.form-input(type="radio" id="credit" value="credit" v-model="payment")
+                input.form-input(type="radio" id="credit" value="credit" v-model="payIn")
                 label(for="credit") Crédito
         transition(name="fade")
             .form-item(v-if="payment === 'credit'")
@@ -32,29 +32,38 @@
 </template>
 
 <script>
-    import { mapGetters } from 'vuex'
+    import { mapGetters, mapActions } from 'vuex'
 
     export default {
-        computed: mapGetters([
-            'hasSelectedCustomer',
-            'selectedCustomer',
-            'paymentTerms',
-            'journals',
-            'selectedJournal',
-            'selectedPaymentTerm'
-        ]),
+        computed: {
+            payIn: {
+                get() {
+                    return this.payment
+                },
+                set(value) {
+                    this.togglePayment(value)
+                }
+            },
+            ...mapGetters([
+                'hasSelectedCustomer',
+                'selectedCustomer',
+                'payment',
+                'paymentTerms',
+                'journals',
+                'selectedJournal',
+                'selectedPaymentTerm'
+            ])
+        },
         methods: {
             getCustomerName() {
                 return this.hasSelectedCustomer ? this.selectedCustomer.display_name : ''
             },
             getCustomerCredit() {
                 return this.hasSelectedCustomer && this.selectedCustomer.credit_limit >= this.selectedCustomer.credit ? this.selectedCustomer.credit_limit - this.selectedCustomer.credit : 0
-            }
-        },
-        data() {
-            return {
-                payment: 'cash'
-            }
+            },
+            ...mapActions([
+                'togglePayment'
+            ]) 
         }
     }
 </script>
@@ -75,16 +84,23 @@
                 margin-top: 5px
 
         .form-item
+            width: 100%
+            height: 45px
+            margin-bottom: 15px
+
             .form-label
-                width: 200px
-                height: 30px
+                width: 250px
+                height: 45px
+                font-size: 14pt
 
             .form-input
-                width: 300px
-                height: 30px
+                width: 350px
+                height: 45px
+                font-size: 14pt
+                border-radius: 0
 
                 &.input-only
-                    margin-left: 200px
+                    margin-left: 250px
                     margin-bottom: 15px
 
             .form-item-option

src/components/payment/PaymentStep.vue

@@ -14,12 +14,6 @@
         components: {
             Ticket,
             PaymentDetails
-        },
-        methods: {
-
-        },
-        mounted() {
-            console.log(this)
         }
     }
 </script>
@@ -30,5 +24,4 @@
         height: calc(100% - 50px)
         padding-bottom: 50px
         display: flex
-
 </style>

src/store/modules/account.js

@@ -1,6 +1,7 @@
 const state = {
     journals: [],
     periods: [],
+    payment: 'cash',
     paymentTerms: [],
     selectedJournal: null,
     selectedPaymentTerm: null
@@ -13,6 +14,9 @@ const getters = {
     periods(state) {
         return state.periods
     },
+    payment(state) {
+        return state.payment
+    },
     paymentTerms(state) {
         return state.paymentTerms
     },
@@ -39,6 +43,9 @@ const mutations = {
     },
     setSelectedPaymentTerm(state, payload) {
         state.selectedPaymentTerm = payload
+    },
+    togglePayment(state, payload) {
+        state.payment = payload
     }
 }
 
@@ -93,6 +100,9 @@ const actions = {
                 reject(error)
             })
         })
+    },
+    togglePayment({ commit }, payload) {
+        commit('togglePayment', payload)
     }
 }