[ADD] split payment credit in anhoter conditional step

src/App.vue

@@ -1,14 +1,16 @@
 <template lang="pug">
     .pos
-        form-wizard(title="" subtitle="" finishButtonText="Finalizar" color="#7c7bad" :nextButtonText="getNextMessage()" backButtonText="Volver" transition="fade")
+        form-wizard(title="" subtitle="" finishButtonText="Finalizar" color="#7c7bad" nextButtonText="Continuar" backButtonText="Volver" transition="fade")
             tab-content(title="Qué productos necesita?" :before-change="checkCart")
                 cart-step
             tab-content(title="Quién es el cliente?" :before-change="checkCustomer")
                 customer-step
             tab-content(title="Cómo quieres pagar?")
-                payment-step
-            tab-content(title="Qué monto quieres pagar?" v-if="payment === 'cash'")
+                payment-method-step
+            tab-content(v-if="payment === 'cash'" title="Qué monto quieres pagar?")
                 payment-cash-step
+            tab-content(v-else title="Quieres hacer alguna entrega?")
+                payment-credit-step
         loader
 </template>
 
@@ -18,8 +20,9 @@
 
     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 PaymentMethodStep from '@/components/payment/method/PaymentMethodStep'
+    import PaymentCashStep from '@/components/payment/cash/PaymentCashStep'
+    import PaymentCreditStep from '@/components/payment/credit/PaymentCreditStep'
 
     import Loader from '@/components/Loader'
 
@@ -32,8 +35,9 @@
             FormWizard,
             CartStep,
             CustomerStep,
-            PaymentStep,
+            PaymentMethodStep,
             PaymentCashStep,
+            PaymentCreditStep,
             Loader,
         },
         computed: mapGetters([
@@ -56,9 +60,6 @@
 
                 return this.hasSelectedCustomer
             },
-            getNextMessage() {
-                return this.payment === 'cash' ? 'Continuar' : 'Finalizar'
-            },
             ...mapActions([
                 'initSale',
                 'notify',
@@ -81,7 +82,7 @@
             width: 100%
             height: 100%
             padding-bottom: 0
-            
+
             .wizard-header
                 display: none
 

src/components/payment/PaymentAmount.vue → src/components/payment/cash/PaymentAmount.vue

@@ -8,11 +8,11 @@
             input.payment-input(readonly :value="formatTotal()")
         .payment-amount-item
             label.payment-label Monto recibido
-            input.payment-input(:value="paid" v-model="paid")
+            input.payment-input(:value="paid" v-model="paid" autofocus)
         hr.result-separator
         .payment-amount-item
             label.payment-label Monto a devolver
-            input.payment-input(readonly)
+            input.payment-input(readonly :value="formatResidual()")
 </template>
 
 <script>
@@ -28,6 +28,7 @@
                     value = accounting.unformat(value, ',')
                     
                     this.changeAmountPaid(value)
+                    this.calculateResidual()
                 }
             },
             ...mapGetters([
@@ -40,12 +41,20 @@
             formatTotal() {
                 return accounting.formatMoney(this.total, this.currencySymbol, 0, '.', ',')
             },
+            formatResidual() {
+                return accounting.formatMoney(this.residual, this.currencySymbol, 0, '.', ',')
+            },
             calculateResidual() {
-
+                this.residual = this.amountPaid >= this.total ? this.amountPaid - this.total : 0
             },
             ...mapActions([
                 'changeAmountPaid'
             ])
+        },
+        data() {
+            return {
+                residual: 0
+            }
         }
     }
 </script>

src/components/payment/PaymentCashStep.vue → src/components/payment/cash/PaymentCashStep.vue

@@ -8,7 +8,7 @@
     import { mapGetters } from 'vuex'
 
     import Ticket from '@/components/payment/Ticket'
-    import PaymentAmount from '@/components/payment/PaymentAmount'
+    import PaymentAmount from '@/components/payment/cash/PaymentAmount'
 
     export default {
         components: {

src/components/payment/credit/PaymentCreditAmount.vue

@@ -0,0 +1,90 @@
+<template lang="pug">
+    form.payment-credit-form
+        .payment-credit-form-separator
+            h3 Detalles de la Entrega
+            hr
+        .payment-amount-item
+            label.payment-label Monto entregado
+            input.payment-input
+        .payment-credit-form-separator
+            h3 Pagos Pendientes
+            hr
+        .payment-credit-form-table
+            table
+                thead
+                    td
+                        th Fecha de Pago
+                        th Monto a pagar
+</template>
+
+<script>
+    import { mapGetters } from 'vuex'
+
+    export default {
+        computed: mapGetters([
+            'total'
+        ]),
+        methods: {
+            formatTotal() {
+                return accounting.formatMoney(this.total, this.currencySymbol, 0, '.', ',')
+            }
+        }
+    }
+</script>
+
+<style lang="sass">
+    .payment-credit-form
+        width: calc(100% - 450px)
+        height: 100%
+        margin-right: 50px
+        padding: 35px
+        background: #f5f5f5
+
+        .payment-credit-form-separator
+            h3
+                color: #9e9e9e
+                font-size: 8pt
+            hr
+                margin-top: 5px
+
+        .result-separator
+            margin: 30px 165px 30px 250px
+            border-top: 1px solid #bdbdbd
+
+        .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-credit-form-table
+                width: 100%
+                height: 250px
+                border: 1px solid #d3d3d3
+
+                table
+                    width: 100%
+
+                    td
+                        height: 35px
+                    thead
+                        th
+                            line-height: 35px
+                            padding-left: 10px
+
+                        th:nth-child(1)
+                            width: 250px
+                        th:nth-child(2)
+                            width: 200px
+</style>

src/components/payment/credit/PaymentCreditStep.vue

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

src/components/payment/PaymentStep.vue → src/components/payment/method/PaymentMethodStep.vue

@@ -6,9 +6,9 @@
 
 <script>
     import { mapActions, mapGetters } from 'vuex'
-    
+
     import Ticket from '@/components/payment/Ticket'
-    import PaymentDetails from '@/components/payment/PaymentDetails'
+    import PaymentDetails from '@/components/payment/method/PaymentDetails'
 
     export default {
         components: {