[ADD] add more fields in payment methods

src/App.vue

@@ -6,7 +6,7 @@
             tab-content(title="Quién es el cliente?")
                 customer-step
             tab-content(title="Cómo quieres pagar?")
-                .step 3
+                payment-method-step
 </template>
 
 <script>
@@ -17,13 +17,15 @@
 
     import ProductStep from '@@/steps/Product'
     import CustomerStep from '@@/steps/Customer'
+    import PaymentMethodStep from '@@/steps/PaymentMethod'
 
     export default {
         components: {
             FormWizard,
             TabContent,
             ProductStep,
-            CustomerStep
+            CustomerStep,
+            PaymentMethodStep
         },
         methods: mapActions([
             'initSale',

src/assets/_variables.sass

@@ -1,5 +1,6 @@
 $app-main-color: #7c7bad
 $app-dark-color: #666
+$app-light-color: #f5f5f5
 $app-bg-color: #fff
 $app-border-color: #d3d3d3
 $app-title-color: #d3d3d3

src/components/steps/Payment.vue

@@ -1,11 +0,0 @@
-<template lang="pug">
-    .pos-step
-</template>
-
-<script>
-    export default {
-    }
-</script>
-
-<style lang="sass">
-</style>

src/components/steps/PaymentMethod.vue

@@ -0,0 +1,93 @@
+<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(readonly)
+            transition(name='fade')
+                .form-item
+                    label.form-label Crédito
+                    input.form-input(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')
+                    label(for='cash') Contado
+                .form-item-option
+                    input.form-input(type='radio' id='credit')
+                    label(for='cash') Crédito
+            .form-item
+                select.form-input.input-only
+            .form-item
+                label.form-label Método de Pago
+                select.form-input
+</template>
+
+<script>
+    import { mapGetters, mapActions } from 'vuex'
+
+    import Ticket from '@@/common/Ticket'
+
+    export default {
+        components: {
+            Ticket
+        },
+        computed: mapGetters([
+            'selectedCustomer',
+            'cartItems',
+            'cartTotal',
+        ])
+    }
+</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
+                hr
+                    margin-top: 50px
+            .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>