[IMP] fourth step reduced

src/App.vue

@@ -2,13 +2,11 @@
     .pos
         form-wizard(title='' subtitle='' finishButtonText='Finalizar' :hideButtons='processing' color='#7c7bad' nextButtonText='Continuar' backButtonText='Volver' @on-complete='createSale' ref='wizard')
             tab-content(title="Qué productos necesita?" :beforeChange="checkCart")
-                payment-step
+                product-step
             tab-content(title="Quién es el cliente?" :beforeChange="checkCustomer")
                 customer-step
             tab-content(v-if='isSale' title="Cómo quieres pagar?" :beforeChange="checkPaymentMethod")
-                payment-method-step
-            tab-content(v-if='isSale' title="Qué monto vas a entregar?" :beforeChange="checkAmountReceived")
-                payment-amount-step
+                payment-step
 </template>
 
 <script>

src/components/common/InputDropdown.vue

@@ -1,14 +1,15 @@
 <template lang="pug">
-    .input-group
-        .input-group-button(v-if='withPrefix')
-            button(type='button') {{ prefix }}
-        input.form-input(type='text' v-model='formattedValue' :style="{'width': withPrefix || withSuffix ? '88%' : '100%'}")
-        .input-group-button(v-if='withSuffix')
-            button(type='button' @click='onShowSuffixOptions' ref='suffixButton') {{ suffix }}
-                span.caret(:style="{'display': withSuffixOptions() ? 'none' : 'inline-block'}")
-            ul.dropdown(:style="{'display': isShowSuffixOptions ? 'block' : 'none'}" ref='suffixDropdown')
-                li(v-for='option in suffixOptions' :key='option.id')
-                    a(@click='onClickSuffixOption(option)') {{ option.name }}
+    div
+        .input-group
+            .input-group-button(v-if='hasPrefix()')
+                button(type='button') {{ prefix }}
+            input.input-formatted(type='text' v-model='formattedValue' :disabled='!editable' :autofocus='focus')
+            .input-group-button(v-if='hasSuffix()')
+                button(type='button' @click='onShowOptions()' ref='suffixButton') {{ suffix }}
+                    span.caret(:style="{'display': hasOptions() ? 'inline-block' : 'none'}")
+                ul.dropdown(:style="{'display': isShowOptions ? 'block' : 'none'}" ref='suffixDropdown')
+                    li(v-for='(option, index) in options' :key='index')
+                        a(@click='onClickOption(option)') {{ option }}
 </template>
 
 <script>
@@ -22,7 +23,11 @@
                 type: String,
                 default: 'text'
             },
-            withPrefix: {
+            editable: {
+                type: Boolean,
+                default: true
+            },
+            focus: {
                 type: Boolean,
                 default: false
             },
@@ -30,19 +35,11 @@
                 type: String,
                 default: ''
             },
-            prefixOptions: {
-                type: Array,
-                default: []
-            },
-            withSuffix: {
-                type: Boolean,
-                default: false
-            },
             suffix: {
                 type: String,
                 default: ''
             },
-            suffixOptions: {
+            options: {
                 type: Array,
                 default: []
             }
@@ -50,10 +47,10 @@
         computed: {
             formattedValue: {
                 get() {
-                    let value = ''
+                    let value = this.value
 
                     if (this.format === 'number') {
-                        value = this.formatValue(this.value)
+                        value = this.formatValue(value)
                         value = !!this.value ? value : value.replace(/\d/, '')
                     }
 
@@ -66,7 +63,7 @@
 
                     this.value = value
 
-                    this.onChange(value)
+                    this.onChangeValue(value)
                 }
             }
         },
@@ -111,24 +108,27 @@
 
                 return value
             },
-            onChange(data) {
-                this.$emit('onChange', data)
+            hideOptions() {
+                this.isShowOptions = false
             },
-            hideSuffixOptions() {
-                this.isShowSuffixOptions = false
+            onChangeValue(value) {
+                this.$emit('onChangeValue', value)
             },
-            withPrefixOptions() {
-                return this.prefixOptions.length == 0
+            hasPrefix() {
+                return this.prefix.length !== 0
             },
-            withSuffixOptions() {
-                return this.suffixOptions.length == 0
+            hasSuffix() {
+                return this.suffix.length !== 0
             },
-            onShowSuffixOptions() {
-                if (this.withSuffixOptions()) {
+            hasOptions() {
+                return this.options.length !== 0
+            },
+            onShowOptions() {
+                if (!this.hasOptions()) {
                     return
                 }
-
-                this.isShowSuffixOptions = !this.isShowSuffixOptions
+                
+                this.isShowOptions = !this.isShowOptions
             },
             onClickOutside(e) {
                 let suffixButton = this.$refs.suffixButton
@@ -146,12 +146,12 @@
                 let el = this.$refs.suffixDropdown
                 
                 if (el !== target && !el.contains(target)) {
-                    this.hideSuffixOptions()
+                    this.hideOptions()
                 }
             },
-            onClickSuffixOption(suffixOption) {
-                this.hideSuffixOptions()
-                this.$emit('onSuffix', suffixOption)
+            onClickOption(selectedOption) {
+                this.hideOptions()
+                this.$emit('onClickOption', selectedOption)
             }
         },
         created() {
@@ -163,7 +163,7 @@
         data() {
             return {
                 value: '',
-                isShowSuffixOptions: false
+                isShowOptions: false
             }
         }
     }
@@ -172,9 +172,10 @@
 <style lang="sass">
     .input-group
         position: relative
+        width: 100%
         display: table
         border-collapse: separate
-        .form-input
+        .input-formatted
             position: relative
             width: 100%
             height: 35px
@@ -184,7 +185,6 @@
             margin-bottom: 0
             border-radius: 0
             font-size: 12pt
-            line-height: 1.42857143
             padding: 6px 12px
             &:focus
                 z-index: 3
@@ -223,7 +223,7 @@
                     display: inline-block
                     width: 0
                     height: 0
-                    margin-left: 2px
+                    margin-left: 0
                     vertical-align: middle
                     border-top: 4px dashed
                     border-right: 4px solid transparent
@@ -243,6 +243,7 @@
                 padding: 5px 0
                 margin: 2px 0 0
                 z-index: 1000
+                font-size: 10pt
                 & > li > a
                     height: 35px
                     display: block

src/components/steps/Payment.vue

@@ -2,28 +2,46 @@
     .pos-step
         ticket
         form
+            //- input para forma de pago
             .form-item
                 label.form-label Forma de Pago
                 .form-item-option
-                    input.form-input(type='radio')
+                    input.form-input(type='radio' id='cash' value='cash' v-model='selectedPaymentType')
                     label(for='cash') Contado
                 .form-item-option
-                    input.form-input(type='radio')
+                    input.form-input(type='radio' id='credit' value='credit' v-model='selectedPaymentType')
                     label(for='credit') Crédito
+            //- input para condiciones de pago en caso de pago a crédito
+            transition(name='fade')
+                .form-item(v-show="selectedPaymentType === 'credit'")
+                    select.form-input.input-only(v-model='selectedPaymentTermId')
+                        option(v-for='term in paymentTerms' :value='term.id' v-if="term.lines.length > 0 && (term.lines[0].days !== 0 || term.lines[0].value !==  'balance')") {{ term.displayName }}
+            //- input para monto de pago
             .form-item
                 label.form-label Monto a Pagar
-                input-dropdown.form-input(withSuffix='true' suffix='$' :suffixOptions="[{id: 1, name:'G$'}, {id: 2, name:'R$'}]")
+                input-dropdown.form-input(value='0' format='number' :editable='false' :suffix='selectedCurrency && selectedCurrency.symbol' :options=['G$', 'R$'] @onChangeValue='onChangeValue' @onClickOption='onClick')
+            //- input para el monto recibido
             .form-item
                 label.form-label Monto Recibido
-                input-dropdown.form-input
-            hr
-            .form-item
-                label.form-label Vuelto
-                input-dropdown.form-input
+                input-dropdown.form-input(value='0' suffix='Efectivo PYG' :options=['G$', 'R$'] :focus='true')
+            //- input para el vuelto del pago en caso de pago en efectivo
+            div(v-show="selectedPaymentType === 'cash'")
+                hr
+                .form-item
+                    label.form-label Vuelto
+                    input-dropdown.form-input(value='0')
+            //- input para el monto de cuotas calculadas en caso de pago a crédito
+            transition(name='fade')
+                .form-item-table(v-show="paymentType === 'credit'")
+                    table
+                        thead
+                            tr
+                                th Monto a Pagar
+                                th Fecha de Pago
 </template>
 
 <script>
-    import { mapGetters, mapAction } from 'vuex'
+    import { mapGetters, mapActions } from 'vuex'
 
     import Ticket from '@@/common/Ticket'
     import InputDropdown from '@@/common/InputDropdown'
@@ -32,7 +50,35 @@
         components: {
             Ticket,
             InputDropdown
-        }
+        },
+        computed: {
+            selectedPaymentType: {
+                get() {
+                    return this.paymentType
+                },
+                set(value) {
+                    this.changePaymentType(value)
+                }
+            },
+            selectedPaymentTermId: {
+                get() {
+                    return (this.selectedPaymentTerm && this.selectedPaymentTerm.id) || -1
+                },
+                set(value) {
+                    this.selectPaymentTerm(value)
+                }
+            },
+            ...mapGetters([
+                'paymentType',
+                'paymentTerms',
+                'selectedPaymentTerm',
+                'selectedCurrency'
+            ])
+        },
+        methods: mapActions([
+            'changePaymentType',
+            'selectPaymentTerm'
+        ])
     }
 </script>
 
@@ -77,4 +123,28 @@
                     label
                         font-size: 12pt
                         margin: 0 35px 15px 5px
+            .form-item-table
+                width: 100%
+                height: 250px
+                border: 1px solid $app-border-color
+                overflow-y: auto
+                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/PaymentAmount.vue

@@ -9,7 +9,7 @@
             .form-separator
                 h3 Detalles del Pago
                 hr
-            .form-item(v-show="paymentType === 'cash'")
+            .form-item
                 label.form-label Monto a Pagar
                 input.form-input(:value='cartTotal | currency(...selectedCurrency)' readonly)
             .form-item
@@ -155,7 +155,7 @@
                         margin-bottom: 15px
             .form-item-table
                 width: 100%
-                height: 250px
+                height: 200px
                 border: 1px solid $app-border-color
                 overflow-y: auto
                 table