[ADD] payment method in last step

models/res_partner.py

@@ -26,6 +26,8 @@ class ResPartner(models.Model):
                 'phone': customer.phone,
                 'mobile': customer.mobile,
                 'email': customer.email,
+                'credit': customer.credit,
+                'credit_limit': customer.credit_limit,
                 'categories': categories
             })
         

src/App.vue

@@ -29,7 +29,6 @@
     import CartItem from '@/components/CartItem'
     import CustomerSearcher from '@/components/CustomerSearcher'
     import CustomersGrid from '@/components/CustomersGrid'
-    import SummaryDisplay from '@/components/SummaryDisplay'
     import Payment from '@/components/Payment'
 
     import { mapActions, mapGetters } from 'vuex'
@@ -47,7 +46,6 @@
             'cart-item': CartItem,
             'customer-searcher': CustomerSearcher,
             'customers-grid': CustomersGrid,
-            'summary-display': SummaryDisplay,
             'payment': Payment
         },
         computed: mapGetters({
@@ -140,7 +138,7 @@
                                 vertical-align: top
             .wizard-card-footer
                 width: 100%
-                height: 60px
+                height: 50px
                 position: absolute
                 bottom: 0
 

src/components/Payment.vue

@@ -1,24 +1,32 @@
 <template lang="pug">
     .payment
-        h2 This is a payment
+        ticket
+        payment-details
 </template>
 
 <script>
     import { mapActions, mapGetters } from 'vuex'
+    import Ticket from '@/components/Ticket'
+    import PaymentDetails from '@/components/PaymentDetails'
 
     export default {
         components: {
-
+            Ticket,
+            PaymentDetails
         },
         methods: {
 
         },
-        data() {
-            
+        mounted() {
+            console.log(this)
         }
     }
 </script>
 
 <style lang="sass">
+    .payment
+        width: 100%;
+        height: calc(100% - 50px);
+        display: flex
 
 </style>

src/components/PaymentDetails.vue

@@ -0,0 +1,98 @@
+<template lang="pug">
+    form.payment-details
+        .form-separator
+            h3 Detalles del Cliente
+            hr
+        .form-item
+                label.form-label Cliente
+                input.form-input(readonly :value="getCustomerName()")
+        transition(name="fade")
+            .form-item(v-if="payment === 'credit'")
+                    label.form-label Crédito
+                    input.form-input(readonly :value="getCustomerCredit()")
+        .form-separator
+            h3 Detalles del Pago
+            hr
+        .form-item
+            label.form-label Forma de pago
+            .form-item-option
+                input.form-input(type="radio" value="cash" v-model="payment") 
+                span Contado
+            .form-item-option
+                input.form-input(type="radio" value="credit" v-model="payment")
+                span Crédito
+        transition(name="fade")
+            .form-item(v-if="payment === 'credit'")
+                select.form-input.input-only
+                    option(v-for="term in paymentTerms" v-if="term.lines.length > 0 && term.lines[0].days !== 0") {{ term.display_name }}
+        .form-item
+            label.form-label Método de Pago
+            select.form-input
+                option(v-for="journal in journals") {{ journal.display_name }}
+</template>
+
+<script>
+    import { mapGetters } from 'vuex'
+
+    export default {
+        computed: mapGetters([
+            'hasSelectedCustomer',
+            'getSelectedCustomer',
+            'paymentTerms',
+            'journals'
+        ]),
+        methods: {
+            getCustomerName() {
+                return this.hasSelectedCustomer ? this.getSelectedCustomer.display_name : ''
+            },
+            getCustomerCredit() {
+                return this.hasSelectedCustomer && this.getSelectedCustomer.credit_limit >= this.getSelectedCustomer.credit ? this.getSelectedCustomer.credit_limit - this.getSelectedCustomer.credit : 0
+            }
+        },
+        data() {
+            return {
+                payment: 'cash'
+            }
+        }
+    }
+</script>
+
+<style lang="sass">
+    .payment-details
+        width: calc(100% - 450px)
+        height: 100%
+        margin-right: 50px
+        padding: 35px
+        background: #f5f5f5
+
+        .form-separator
+            h3
+                color: #9e9e9e
+                font-size: 8pt
+            hr
+                margin-top: 5px
+
+        .form-item
+            .form-label
+                width: 200px
+                height: 30px
+
+            .form-input
+                width: 300px
+                height: 30px
+
+                &.input-only
+                    margin-left: 200px
+                    margin-bottom: 15px
+
+            .form-item-option
+                display: inline-block
+
+                input
+                    width: 20px
+                    height: 20px
+
+                span
+                    font-size: 12pt
+                    margin: 0 45px 15px 5px
+</style>

src/components/SummaryDisplay.vue → src/components/Ticket.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-    .summary
+    .ticket
         .ticket-summary
             .ticket-summary-header
                 h3 {{ getCompanyName() }}
@@ -58,8 +58,8 @@
 </script>
 
 <style lang="sass">
-    .summary
-        width: 100%
+    .ticket
+        width: 500px
         height: 100%
         font-size: 8pt
         display: flex

src/store/modules/account.js

@@ -5,13 +5,13 @@ const state = {
 }
 
 const getters = {
-    getJournals(state) {
+    journals(state) {
         return state.journals
     },
-    getPeriods(state) {
+    periods(state) {
         return state.periods
     },
-    getPaymentTerms(state) {
+    paymentTerms(state) {
         return state.paymentTerms
     }
 }