Support for Gift Card payment types in the return of funds (#1103)

* Add different types of cards for return

* minimal changes

* Support for Gift Carts payment types in the return of funds

* translate

* minimal changes

* minimal changes

Co-authored-by: elsiosanchez <elsiossanches@gmail.com>

src/components/ADempiere/Form/VPOS/Collection/overdrawnInvoice/index.vue

@@ -59,33 +59,33 @@
         </el-card>
         <el-card v-if="option === 3" class="box-card">
           <div slot="header" class="clearfix">
-            <span>{{ $t('form.pos.collect.overdrawnInvoice.above') }}</span>
+            <span v-if="isEmptyValue(selectionTypeRefund)">{{ $t('form.pos.collect.overdrawnInvoice.above') }}</span>
-            <span style="float: right;text-align: end">
+            <template v-else>
-              <b>{{ $t('form.pos.collect.overdrawnInvoice.dailyLimit') }}: {{ formatPrice(maximumDailyRefundAllowed, currency.iSOCode) }} | {{ formatPrice(0, isoCode) }} | {{ $t('form.pos.collect.overdrawnInvoice.available') }}: {{ formatPrice(maximumDailyRefundAllowed, currency.iSOCode) }} | {{ formatPrice(0, isoCode) }}</b> <br>
+              <span>
-              <b>{{ $t('form.pos.collect.overdrawnInvoice.customerLimit') }}: {{ formatPrice(maximumRefundAllowed, currency.iSOCode) }} | {{ formatPrice(0, isoCode) }} </b>
+                {{ selectionTypeRefund.name }}
-            </span>
+              </span>
+              <span style="float: right;text-align: end">
+                <b>{{ $t('form.pos.collect.overdrawnInvoice.dailyLimit') }}: {{ formatPrice(selectionTypeRefund.maximum_refund_allowed, currency.iSOCode) }} | {{ formatPrice(0, isoCode) }}<br> {{ $t('form.pos.collect.overdrawnInvoice.available') }}: {{ formatPrice(selectionTypeRefund.maximum_daily_refund_allowed, currency.iSOCode) }} | {{ formatPrice(0, isoCode) }}</b> <br>
+                <b>{{ $t('form.pos.collect.overdrawnInvoice.customerLimit') }}: {{ formatPrice(selectionTypeRefund.maximum_refund_allowed, currency.iSOCode) }} | {{ formatPrice(0, isoCode) }} </b>
+              </span>
+            </template>
           </div>
-          <div v-if="optionTypePay === 0" class="text item">
+          <div v-if="isEmptyValue(selectionTypeRefund)" class="text item">
             <el-row :gutter="12">
               <el-col v-for="(payment, index) in paymentTypeList" :key="index" :span="8">
-                <div @click="optionTypePay = payment.key">
+                <div @click="selectionTypeRefund = payment">
                   <el-card shadow="hover">
                     <div slot="header" class="clearfix" style="text-align: center;">
                       <span>
-                        {{ payment.name }}
+                        <b>{{ payment.name }}</b> <br>
                       </span>
                     </div>
-                    <p style="text-align: center;"> Nombre </p>
-                    <p style="text-align: center;"> Cedula </p>
-                    <p style="text-align: center;"> Telefono </p>
-                    <p style="text-align: center;"> Banco </p>
-                    <p style="text-align: center;"> Descripcion </p>
                   </el-card>
                 </div>
               </el-col>
             </el-row>
           </div>
-          <div v-if="optionTypePay !== 0" class="text item">
+          <div v-if="!isEmptyValue(selectionTypeRefund)" class="text item">
             <component
               :is="componentRender"
               :change="change"
@@ -93,6 +93,13 @@
           </div>
         </el-card>
       </div>
+      <el-card v-if="option === 3" class="box-card">
+        <div class="text item">
+          <type-refund
+            :is-add-type-pay="refundLoaded"
+          />
+        </div>
+      </el-card>
       <div v-if="caseOrder === 2">
         <el-card>
           <div slot="header" class="clearfix">
@@ -113,11 +120,11 @@
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button
-          v-if="optionTypePay !== 0"
+          v-if="!isEmptyValue(selectionTypeRefund)"
           type="info"
           class="custom-button-create-bp"
           icon="el-icon-back"
-          @click="optionTypePay = 0"
+          @click="selectionTypeRefund = {}"
         />
         <el-button
           type="danger"
@@ -128,6 +135,13 @@
         <el-button
           type="primary"
           class="custom-button-create-bp"
+          icon="el-icon-plus"
+          :disabled="!isEmptyValue(refundLoaded)"
+          @click="addRefund"
+        />
+        <el-button
+          type="success"
+          class="custom-button-create-bp"
           icon="el-icon-check"
           @click="success"
         />
@@ -143,9 +157,13 @@ import posMixin from '@/components/ADempiere/Form/VPOS/posMixin.js'
 import fieldsListOverdrawnInvoice from './fieldsListOverdrawnInvoice.js'
 import { overdrawnInvoice } from '@/api/ADempiere/form/point-of-sales.js'
 import { processOrder } from '@/api/ADempiere/form/point-of-sales.js'
+import typeRefund from './typeRefund/index.vue'
 
 export default {
   name: 'OverdrawnInvoice',
+  components: {
+    typeRefund
+  },
   mixins: [
     formMixin,
     posMixin
@@ -185,6 +203,7 @@ export default {
     return {
       option: 1,
       optionTypePay: 0,
+      selectionTypeRefund: {},
       fieldsList: fieldsListOverdrawnInvoice,
       currentFieldCurrency: '',
       currentPaymentType: ''
@@ -193,18 +212,21 @@ export default {
   computed: {
     componentRender() {
       let typePay
-      switch (this.optionTypePay) {
+      switch (this.selectionTypeRefund.key) {
         case 'P':
-          typePay = () => import('./paymentTypeChange/MobilePayment.vue')
+          typePay = () => import('./paymentTypeChange/MobilePayment/index')
           break
         case 'X':
-          typePay = () => import('./paymentTypeChange/cash/index.vue')
+          typePay = () => import('./paymentTypeChange/Cash/index.vue')
           break
         case 'A':
-          typePay = () => import('./paymentTypeChange/ACH/index.vue')
+          typePay = () => import('./paymentTypeChange/ACH/index')
+          break
+        case 'M':
+          typePay = () => import('./paymentTypeChange/GiftCards/index.vue')
           break
         case 'Z':
-          typePay = () => import('./paymentTypeChange/zelle/index.vue')
+          typePay = () => import('./paymentTypeChange/Zelle/index.vue')
           break
         default:
           typePay = () => import('./paymentTypeChange/empty.vue')
@@ -212,6 +234,27 @@ export default {
       }
       return typePay
     },
+    renderComponentContainer() {
+      let container
+      switch (this.selectionTypeRefund.key) {
+        case 'P':
+          container = 'MobilePayment'
+          break
+        case 'A':
+          container = 'ACH'
+          break
+        case 'X':
+          container = 'Cash'
+          break
+        case 'M':
+          container = 'GiftCards'
+          break
+        case 'Z':
+          container = 'Zelle'
+          break
+      }
+      return container
+    },
     showDialogo() {
       return this.$store.state['pointOfSales/payments/index'].dialogoInvoce.show
     },
@@ -263,11 +306,26 @@ export default {
       return this.$store.getters.getFieldsListEmptyMandatory({ containerUuid: 'OverdrawnInvoice', formatReturn: 'name' })
     },
     paymentTypeList() {
-      return this.$store.getters.getPaymentTypeList
+      return this.$store.getters.getPaymentTypeList.filter(type => type.is_allowed_to_refund)
+    },
+    refundLoaded() {
+      return this.$store.getters.getRefundLoaded
     }
   },
+  mounted() {
+    this.selectionTypeRefund = {}
+  },
   methods: {
     formatPrice,
+    addRefund() {
+      const values = this.$store.getters.getValuesView({
+        containerUuid: this.renderComponentContainer,
+        format: 'object'
+      })
+      values.tenderType = this.selectionTypeRefund.name
+      this.$store.dispatch('addRefundLoaded', values)
+      this.selectionTypeRefund = {}
+    },
     success() {
       const customerDetails = []
       this.fieldsList.forEach(element => {
@@ -286,8 +344,10 @@ export default {
         customerDetails,
         payments: this.currentOrder.listPayments.payments
       })
+      this.selectionTypeRefund = {}
     },
     close() {
+      this.selectionTypeRefund = {}
       this.$store.commit('dialogoInvoce', { show: false })
     },
     changeCurrency(value) {

src/components/ADempiere/Form/VPOS/Collection/overdrawnInvoice/paymentTypeChange/ACH/fieldsListACH.js

@@ -96,7 +96,7 @@ export default [
     columnName: 'PayAmt',
     isFromDictionary: true,
     overwriteDefinition: {
-      sequence: 0,
+      sequence: 3,
       handleContentSelection: true,
       handleActionPerformed: true,
       size: 24,

src/components/ADempiere/Form/VPOS/Collection/overdrawnInvoice/paymentTypeChange/GiftCards/fieldsListGiftCards.js

@@ -0,0 +1,45 @@
+// ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+// Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
+// Contributor(s): Yamel Senih ysenih@erpya.com www.erpya.com
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+export default [
+  // Name
+  {
+    elementColumnName: 'Name',
+    columnName: 'Name',
+    tableName: 'C_BPartner',
+    tabindex: '1',
+    isFromDictionary: true,
+    overwriteDefinition: {
+      sequence: 0,
+      isCustomField: true,
+      size: 24,
+      isMandatory: true
+    }
+  },
+  // Code
+  {
+    elementColumnName: 'Value',
+    columnName: 'Value',
+    isFromDictionary: true,
+    tabindex: '0',
+    overwriteDefinition: {
+      sequence: 1,
+      isCustomField: true,
+      size: 24,
+      isMandatory: true
+    }
+  }
+]

src/components/ADempiere/Form/VPOS/Collection/overdrawnInvoice/paymentTypeChange/GiftCards/index.vue

@@ -0,0 +1,268 @@
+<!--
+ ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+ Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
+ Contributor(s): Elsio Sanchez elsiosanches@gmail.com www.erpya.com
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <https:www.gnu.org/licenses/>.
+-->
+<template>
+  <div>
+    <el-form
+      label-position="top"
+      label-width="10px"
+    >
+      <el-row :gutter="12">
+        <el-col
+          v-for="field in fieldsList"
+          :key="field.sequence"
+          :span="6"
+        >
+          <field-definition
+            :key="field.columnName"
+            :metadata-field="{
+              ...field,
+              labelCurrency: dayRate.currencyTo
+            }"
+          />
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { formatPrice } from '@/utils/ADempiere/valueFormat.js'
+import formMixin from '@/components/ADempiere/Form/formMixin'
+import posMixin from '@/components/ADempiere/Form/VPOS/posMixin.js'
+import fieldsListGiftCards from './fieldsListGiftCards.js'
+
+export default {
+  name: 'GiftCards',
+  mixins: [
+    formMixin,
+    posMixin
+  ],
+  props: {
+    change: {
+      type: Number,
+      default: 0
+    },
+    pay: {
+      type: Number,
+      default: 0
+    },
+    pending: {
+      type: Number,
+      default: 0
+    },
+    totalOrder: {
+      type: Number,
+      default: 0
+    },
+    currency: {
+      type: Object,
+      default: undefined
+    },
+    metadata: {
+      type: Object,
+      default: () => {
+        return {
+          uuid: 'GiftCards',
+          containerUuid: 'GiftCards'
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      option: 1,
+      typePay: 0,
+      fieldsList: fieldsListGiftCards,
+      currentFieldCurrency: '',
+      currentPaymentType: ''
+    }
+  },
+  computed: {
+    showDialogo() {
+      return this.$store.state['pointOfSales/payments/index'].dialogoInvoce.show
+    },
+    caseOrder() {
+      return this.$store.state['pointOfSales/payments/index'].dialogoInvoce.type
+    },
+    isoCode() {
+      return this.$store.getters.posAttributes.currentPointOfSales.displayCurrency.iso_code
+    },
+    maximumDailyRefundAllowed() {
+      console.log(this.$store.getters.posAttributes.currentPointOfSales.displayCurrency.iso_code)
+      return this.$store.getters.posAttributes.currentPointOfSales.maximumDailyRefundAllowed
+    },
+    maximumRefundAllowed() {
+      return this.$store.getters.posAttributes.currentPointOfSales.maximumRefundAllowed
+    },
+    displayeCurrency() {
+      const tenderType = this.$store.getters.getValueOfField({
+        containerUuid: 'OverdrawnInvoice',
+        columnName: 'TenderType'
+      })
+      if (tenderType === 'D') {
+        return true
+      }
+      return false
+    },
+    primaryFieldsList() {
+      return this.fieldsList.filter(field => field.sequence <= 2)
+    },
+    hiddenFieldsList() {
+      return this.fieldsList.filter(field => field.sequence >= 3)
+    },
+    listCurrency() {
+      return this.$store.getters.getCurrenciesList
+    },
+    emptyFieldGiftCard() {
+      const empty = this.fieldsList.filter(field => {
+        if (field.sequence < 3 && this.isEmptyValue(
+          this.$store.getters.getValueOfField({
+            containerUuid: 'OverdrawnInvoice',
+            columnName: field.columnName
+          })
+        )) {
+          return field
+        }
+      })
+      return empty.map(empty => empty.name)
+    },
+    emptyMandatoryFields() {
+      return this.$store.getters.getFieldsListEmptyMandatory({ containerUuid: 'OverdrawnInvoice', formatReturn: 'name' })
+    },
+    paymentTypeList() {
+      return this.$store.getters.getPaymentTypeList
+    },
+    convertionsList() {
+      return this.$store.state['pointOfSales/point/index'].conversionsList
+    },
+    currentConvertion() {
+      if (this.isEmptyValue(this.currentPointOfSales.displayCurrency)) {
+        return {}
+      }
+      const convert = this.convertionsList.find(convert => {
+        if (!this.isEmptyValue(convert.currencyTo) && !this.isEmptyValue(this.currentPointOfSales.displayCurrency) && convert.currencyTo.id === this.currentPointOfSales.displayCurrency.id) {
+          return convert
+        }
+      })
+      if (convert) {
+        return convert
+      }
+      return {}
+    },
+    dayRate() {
+      const currency = this.listCurrency.find(currency => currency.key === this.currentFieldCurrency)
+      const convert = this.convertionsList.find(convert => {
+        if (!this.isEmptyValue(currency) && !this.isEmptyValue(convert.currencyTo) && currency.id === convert.currencyTo.id && this.currentPointOfSales.currentPriceList.currency.id !== currency.id) {
+          return convert
+        }
+      })
+      if (!this.isEmptyValue(convert)) {
+        return convert
+      }
+      return {
+        currencyTo: this.currentPointOfSales.currentPriceList.currency,
+        divideRate: 1,
+        iSOCode: this.currentPointOfSales.currentPriceList.currency.iSOCode
+      }
+    }
+  },
+  created() {
+    this.$store.commit('updateValueOfField', {
+      containerUuid: 'Cash',
+      columnName: 'PayAmt',
+      value: this.change
+    })
+  },
+  methods: {
+    formatPrice,
+    close() {
+      this.$store.commit('dialogoInvoce', { show: false })
+    },
+    changeCurrency(value) {
+      this.currentFieldCurrency = value
+    },
+    changePaymentType(value) {
+      this.$store.commit('currentTenderChange', value)
+      this.currentPaymentType = value
+      this.$store.commit('updateValueOfField', {
+        containerUuid: 'OverdrawnInvoice',
+        columnName: 'TenderType',
+        value: value
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-image {
+    display: inline-block;
+    overflow: hidden;
+  }
+  .el-card__header {
+    padding: 18px 20px;
+    border-bottom: 1px solid #e6ebf5;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    background-color: rgb(245, 247, 250);
+  }
+  .el-card__body {
+    padding-top: 0px !important;
+    padding-right: 0px!important;
+    padding-bottom: 20px;
+    padding-left: 10px!important;
+    height: 100%!important;
+  }
+
+  .bottom {
+    margin-top: 0px!important;
+    line-height: 1px;
+  }
+
+  .button {
+    padding: 0;
+    float: right;
+  }
+
+  .image {
+    width: 100%;
+    display: block;
+    height: 9vh;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
+
+  .clearfix:after {
+    clear: both
+  }
+  .el-header {
+    background: 'white';
+    color: #333;
+    line-height: 10px;
+  }
+  .el-aside {
+    color: #333;
+  }
+  .el-row {
+    margin: 0px!important;
+  }
+</style>

src/components/ADempiere/Form/VPOS/Collection/overdrawnInvoice/paymentTypeChange/MobilePayment/fieldsListMobilePayment.js

@@ -0,0 +1,92 @@
+// ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+// Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
+// Contributor(s): Yamel Senih ysenih@erpya.com www.erpya.com
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const tableName = 'C_Payment'
+
+export default [
+  // Name
+  {
+    elementColumnName: 'Name',
+    columnName: 'Name',
+    tableName: 'C_BPartner',
+    tabindex: '1',
+    isFromDictionary: true,
+    overwriteDefinition: {
+      sequence: 0,
+      isCustomField: true,
+      size: 24,
+      isMandatory: true
+    }
+  },
+  // Code
+  {
+    elementColumnName: 'Value',
+    columnName: 'Value',
+    isFromDictionary: true,
+    tabindex: '0',
+    overwriteDefinition: {
+      sequence: 1,
+      isCustomField: true,
+      size: 24,
+      isMandatory: true
+    }
+  },
+  // Phone
+  {
+    elementColumnName: 'Phone',
+    columnName: 'Phone',
+    tableName: 'AD_user',
+    tabindex: '4',
+    isFromDictionary: true,
+    overwriteDefinition: {
+      sequence: 2,
+      isCustomField: true,
+      size: 24,
+      isMandatory: true
+    }
+  },
+  // Bank
+  {
+    tableName,
+    columnName: 'C_Bank_ID',
+    isFromDictionary: true,
+    overwriteDefinition: {
+      sequence: 6,
+      handleActionKeyPerformed: true,
+      handleActionPerformed: true,
+      handleContentSelection: true,
+      displayLogic: `@TenderType@<>'X'|| @TenderType@<>'Z'`,
+      size: 24,
+      isActiveLogics: true,
+      isMandatory: true
+    }
+  },
+  {
+    tableName,
+    elementColumnName: 'PayAmt',
+    columnName: 'PayAmt',
+    isFromDictionary: true,
+    overwriteDefinition: {
+      sequence: 3,
+      handleContentSelection: true,
+      handleActionPerformed: true,
+      size: 24,
+      isNumericField: true,
+      isActiveLogics: true,
+      isMandatory: true
+    }
+  }
+]

src/components/ADempiere/Form/VPOS/Collection/overdrawnInvoice/paymentTypeChange/MobilePayment/index.vue

@@ -23,7 +23,7 @@
     >
       <el-row :gutter="12">
         <el-col
-          v-for="field in primaryFieldsList"
+          v-for="field in fieldsList"
           :key="field.sequence"
           :span="8"
         >
@@ -41,7 +41,7 @@
 import { formatPrice } from '@/utils/ADempiere/valueFormat.js'
 import formMixin from '@/components/ADempiere/Form/formMixin'
 import posMixin from '@/components/ADempiere/Form/VPOS/posMixin.js'
-import fieldsListOverdrawnInvoice from '../fieldsListOverdrawnInvoice.js'
+import fieldsListMobilePayment from './fieldsListMobilePayment.js'
 
 export default {
   name: 'MobilePayment',
@@ -74,8 +74,8 @@ export default {
       type: Object,
       default: () => {
         return {
-          uuid: 'OverdrawnInvoice',
+          uuid: 'MobilePayment',
-          containerUuid: 'OverdrawnInvoice'
+          containerUuid: 'MobilePayment'
         }
       }
     }
@@ -84,7 +84,7 @@ export default {
     return {
       option: 1,
       typePay: 0,
-      fieldsList: fieldsListOverdrawnInvoice,
+      fieldsList: fieldsListMobilePayment,
       currentFieldCurrency: '',
       currentPaymentType: ''
     }

src/components/ADempiere/Form/VPOS/Collection/overdrawnInvoice/paymentTypeChange/Zelle/fieldsList.js

@@ -52,7 +52,7 @@ export default [
     columnName: 'PayAmt',
     isFromDictionary: true,
     overwriteDefinition: {
-      sequence: 0,
+      sequence: 1,
       handleContentSelection: true,
       handleActionPerformed: true,
       size: 24,

src/components/ADempiere/Form/VPOS/Collection/overdrawnInvoice/typeRefund/index.vue

@@ -0,0 +1,298 @@
+<!--
+ ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+ Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
+ Contributor(s): Yamel Senih ysenih@erpya.com www.erpya.com
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <https:www.gnu.org/licenses/>.
+-->
+<template>
+  <el-container style="background: white; height: 100% !important;">
+    <el-main style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+      <el-row :gutter="24">
+        <template v-for="(value, key) in isAddTypePay">
+          <el-col :key="key" :span="8" style="padding-left: 5px; padding-right: 5px;">
+            <el-card :body-style="{ padding: '0px' }">
+              <el-row>
+                <el-col :span="6" style="padding: 10px">
+                  <img src="@/image/ADempiere/pos/no-image.jpg" fit="contain" class="image">
+                </el-col>
+                <el-col :span="18">
+                  <el-button
+                    type="text"
+                    icon="el-icon-close"
+                    style="float: right; margin-right: 10px; color: red; padding-top: 10px;"
+                    @click="deleteCollect(value)"
+                  />
+                  <div style="padding-right: 10px; padding-top: 10%;">
+                    <div class="top clearfix">
+                      <span>
+                        {{
+                          value.tenderType
+                        }}
+                      </span>
+                    </div>
+                    <div class="bottom clearfix" style="margin-top: 0px !important!">
+                      <div
+                        slot="header"
+                        class="clearfix"
+                        style="padding-bottom: 20px;"
+                      >
+                        <p>
+                          <b style="float: right;">
+                            {{ value.Name }}
+                          </b>
+                        </p>
+                        <br>
+                        <p>
+                          <b style="float: right;">
+                            {{ value.Value }}
+                          </b>
+                        </p>
+                        <br>
+                        <p>
+                          <b style="float: right;">
+                            {{ value.Phone }}
+                          </b>
+                        </p>
+                        <br>
+                        <p class="total">
+                          <b style="float: right;">
+                            {{ formatPrice(value.PayAmt) }}
+                          </b>
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
+            </el-card>
+          </el-col>
+        </template>
+      </el-row>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import {
+  formatDate,
+  formatPrice
+} from '@/utils/ADempiere/valueFormat.js'
+import posMixin from '@/components/ADempiere/Form/VPOS/posMixin.js'
+
+export default {
+  name: 'TypeRefund',
+  mixins: [
+    posMixin
+  ],
+  props: {
+    isAddTypePay: {
+      type: Array,
+      default: undefined
+    },
+    openPanel: {
+      type: Boolean,
+      default: false
+    },
+    currency: {
+      type: Object,
+      default: undefined
+    },
+    listTypesPayment: {
+      type: Object,
+      default: undefined
+    },
+    listPaymentType: {
+      type: Object,
+      default: undefined
+    },
+    isLoaded: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      conevertion: 0,
+      loginCovertion: false,
+      labelTypesPayment: []
+    }
+  },
+  computed: {
+    typesPayment() {
+      return this.$store.getters.getListsPaymentTypes
+    },
+    listCurrency() {
+      return this.$store.getters.getListCurrency
+    },
+    conevertionAmount() {
+      return this.$store.getters.getConvertionPayment
+    },
+    currentPointOfSales() {
+      return this.$store.getters.posAttributes.currentPointOfSales
+    },
+    // Validate if there is a payment in a different type of currency to the point
+    paymentCurrency() {
+      return this.currentPointOfSales.currentOrder.listPayments.payments.find(pay => pay.currencyUuid !== this.currency.uuid)
+    },
+    convertionsList() {
+      return this.$store.state['pointOfSales/point/index'].conversionsList
+    }
+  },
+  // watch: {
+  //   listPaymentType(value) {
+  //     if (!this.isEmptyValue(value.reference)) {
+  //       this.tenderTypeDisplaye({
+  //         tableName: value.reference.tableName,
+  //         query: value.reference.query
+  //       })
+  //     }
+  //   }
+  // },
+  // created() {
+  //   if (!this.isEmptyValue(this.isAddTypePay)) {
+  //     this.convertingPaymentMethods()
+  //   }
+  //   if (!this.isEmptyValue(this.listPaymentType.reference)) {
+  //     this.tenderTypeDisplaye({
+  //       tableName: this.listPaymentType.reference.tableName,
+  //       query: this.listPaymentType.reference.query
+  //     })
+  //   }
+  // },
+  methods: {
+    formatDate,
+    formatPrice,
+    getImageFromTenderType(typePay) {
+      // A: Direct Deposit: ACH Automatic Clearing House
+      // C: Credit Card:
+      // D: Direct Debit:
+      // K: Check:
+      // M: Credit Memo:
+      // P: Mobile Payment Interbank:
+      // T: Account:
+      // X: Cash:
+      // Z: Zelle:
+      let image = ''
+      switch (typePay) {
+        case 'A':
+          image = 'DirectDeposit2'
+          break
+        case 'M':
+          image = 'CreditMemo'
+          break
+        case 'K':
+          image = 'check2'
+          break
+        case 'X':
+          image = 'cash'
+          break
+        case 'Z':
+          image = 'zelle'
+          break
+        case 'T':
+          image = 'Account'
+          break
+        case 'P':
+          image = 'paymobile'
+          break
+        case 'C':
+          image = 'CreditCard'
+          break
+        case 'D':
+          image = 'DirectDebit'
+          break
+      }
+      return require('@/image/' + image + '.jpg')
+    },
+    deleteCollect(key) {
+      const itemRemove = this.isAddTypePay.findIndex(item => item.Value === key.Value)
+      this.$store.state['pointOfSales/payments/index'].refundLoaded.splice(itemRemove, 1)
+    },
+    // Payment card label
+    tenderTypeDisplaye({
+      tableName,
+      query
+    }) {
+      if (!this.isEmptyValue(tableName)) {
+        this.$store.dispatch('getLookupListFromServer', {
+          tableName,
+          query
+        })
+          .then(response => {
+            this.labelTypesPayment = response
+          })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-image {
+    display: inline-block;
+    overflow: hidden;
+  }
+  .el-card__header {
+    padding: 18px 20px;
+    border-bottom: 1px solid #e6ebf5;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    background-color: rgb(245, 247, 250);
+  }
+  .el-card__body {
+    padding-top: 0px !important;
+    padding-right: 0px!important;
+    padding-bottom: 20px;
+    padding-left: 10px!important;
+    height: 100%!important;
+  }
+
+  .bottom {
+    margin-top: 0px!important;
+    line-height: 1px;
+  }
+
+  .button {
+    padding: 0;
+    float: right;
+  }
+
+  .image {
+    width: 100%;
+    display: block;
+    height: 9vh;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
+
+  .clearfix:after {
+    clear: both
+  }
+  .el-header {
+    background: 'white';
+    color: #333;
+    line-height: 10px;
+  }
+
+  .el-aside {
+    color: #333;
+  }
+  .el-row {
+    margin: 0px!important;
+  }
+</style>

src/lang/ADempiere/en.js

@@ -502,7 +502,7 @@ export default {
           returnMoney: 'Return money in another form of payment',
           adjustDocument: 'You want to Adjust Document',
           dailyLimit: 'Daily Limit',
-          customerLimit: 'Customer Limit',
+          customerLimit: 'Order Limit',
           available: 'Available',
           emptyPayment: 'Payment method not supported'
         }

src/lang/ADempiere/es.js

@@ -478,7 +478,7 @@ export default {
           returnMoney: 'Devolver dinero en otra forma de pago',
           adjustDocument: 'Desea Ajustar Documento',
           dailyLimit: 'Limite Diario',
-          customerLimit: 'Limite Cliente',
+          customerLimit: 'Limite Order',
           available: 'Disponible',
           emptyPayment: 'Método de pago no soportado'
         }

src/store/modules/ADempiere/pointOfSales/payments/actions.js

@@ -311,5 +311,10 @@ export default {
       }
     })
     commit('setCurrencyDisplaye', displaycurrency)
+  },
+  addRefundLoaded({ commit, state }, refund) {
+    const addRefund = state.refundLoaded
+    addRefund.push(refund)
+    commit('setRefundLoaded', addRefund)
   }
 }

src/store/modules/ADempiere/pointOfSales/payments/getters.js

@@ -48,5 +48,8 @@ export default {
   },
   getConvertionRate: (state) => {
     return state.convertionRate
+  },
+  getRefundLoaded: (state) => {
+    return state.refundLoaded
   }
 }

src/store/modules/ADempiere/pointOfSales/payments/mutations.js

@@ -64,5 +64,8 @@ export default {
       type,
       success
     }
+  },
+  setRefundLoaded(state, refund) {
+    state.refundLoaded = refund
   }
 }

src/store/modules/ADempiere/pointOfSales/payments/state.js

@@ -31,6 +31,7 @@ export default {
   convertion: {},
   fieldCurrency: {},
   convertionRate: [],
+  refundLoaded: [],
   dialogoInvoce: {
     show: false,
     type: 0,