File: /home/imensosw/public_html/ezwork/resources/js/components/Payment_method.vue
<template>
<div>
<!-- Payment method block start -->
<div class="d-flex justify-content-between align-items-center">
<h4>Payment method</h4>
<div class="actions">
<a v-if="this.userShow.translator_status_id > 5 && this.userBankAccounts" data-target="#add_bank_account" href="javascript:;" data-toggle="modal" class="" @click="resetForm()" ><i class="fa fa-plus"></i></a>
</div>
</div>
<div v-if="this.userShow.translator_status_id > 5 && this.userBankAccounts" class="mt-4">
<div :key="componentKey" v-if="this.userBankAccounts && this.userBankAccounts.length > 0">
<table class="table table-pm">
<thead>
<th>Type</th>
<th>Bank Name</th>
<th>Beneficiary Name</th>
<th>Account No.</th>
<th>IFSC Code</th>
<th>Status</th>
<th>Primary</th>
<th>Actions</th>
</thead>
<tbody>
<tr v-for="data in userBankAccounts" >
<!-- <td width="10%">
<img :src="`/images/bank.png`"
style="opacity: 0.6;" width="80">
</td> -->
<td>{{data.payment_method_type}}</td>
<td v-if="data.payment_method_type_id == 2">-</td>
<td v-else>{{data.bank_name}}</td>
<td v-if="data.payment_method_type_id == 2">-</td>
<td v-else>{{data.beneficiary_name}}</td>
<td v-if="data.payment_method_type_id == 2">{{data.paypal_id}}</td>
<td v-else>{{data.account_no}}</td>
<td v-if="data.payment_method_type_id == 2">-</td>
<td v-else>{{data.ifsc_code}}</td>
<td>
<small>
<span v-if="data.account_status_id == 0" class="review capsule">
Under Review
</span>
<span v-if="data.account_status_id == 1 && data.delete_status_id == 0" class="done capsule">
Verified
</span>
<span v-if="data.account_status_id == 1 && data.delete_status_id == 1" class="review capsule">
Request
</span>
</small>
</td>
<td>
<small>
<span v-if="data.is_primary == 1" class="done capsule">
Primary
</span>
</small>
</td>
<td>
<small>
<a data-target="#edit_bank_account" href="javascript:;" data-toggle="modal" class="mr-2 text-muted" @click="openEditBankAccountModel(data.id)">
<i class="fa fa-pencil"></i>
</a>
<a v-if="data.delete_status_id == 0" data-target="#delete_bank_account" href="javascript:;" data-toggle="modal" class="text-muted" @click="openEditBankAccountModel(data.id)">
<i class="fa fa-trash"></i>
</a>
<a v-else data-target="#" href="javascript:;" class="text-muted">
<i class="fa fa-trash"></i>
</a>
</small>
</td>
</tr>
</tbody>
</table>
</div>
<div v-else class="text-center">
<img :src="`/images/language.png`"
style="opacity: 0.6;" width="80"><br><br> <a href="javascript:;" data-toggle="modal" data-target="#add_bank_account" class="btn btn-secondary mb-4" @click="resetForm()">Add Payment method</a>
</div>
</div>
<div v-else class="row mt-4">
<div class="col-md-12">
<div class="no-record text-center">
<img :src="`/images/shape.png`" width="100"><br><br>
<p>Disabled until the completion of evaluations</p>
</div>
</div>
</div>
<!-- Payment method block end -->
<!-- Add Payment method model start -->
<div class="modal fade dismiss_modal" id="add_bank_account" tabindex="-1" role="dialog" aria-hidden="true" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="">Add Payment Method</h5>
<button type="button" class="close dismiss_modal" data-dismiss="modal">×</button>
</div>
<form @submit.prevent="insertUserBankAccount">
<div class="modal-body">
<div class="form-group">
<label>Type</label>
<multiselect track-by="payment_method_type" label="payment_method_type"
v-model="payment_method" :options=paymentMethodTypes placeholder="Select payment method" selectLabel='' deselectLabel='X' selectedLabel='' >
<span slot="noResult"> No record found </span>
</multiselect>
<span class="text-danger help-block" v-if="has_error && errors.payment_method_type_id">{{ errors.payment_method_type_id[0] }}</span>
</div>
<div class="form-group" v-if="payment_method.id != 2">
<label>Bank Name</label>
<input type="text" class="form-control" placeholder="Bank Name"
v-model="bank_name" >
<span class="text-danger help-block" v-if="has_error && errors.bank_name">
{{ errors.bank_name[0] }}
</span>
</div>
<div class="form-group" v-if="payment_method.id != 2">
<label>Beneficiary Name</label>
<input type="text" class="form-control" placeholder="Beneficiary Name"
v-model="beneficiary_name" >
<span class="text-danger help-block" v-if="has_error && errors.beneficiary_name">
{{ errors.beneficiary_name[0] }}
</span>
</div>
<div class="form-group" v-if="payment_method.id != 2">
<label>Account No</label>
<input type="text" class="form-control" placeholder="Account No"
v-model="account_no" >
<span class="text-danger help-block" v-if="has_error && errors.account_no">
{{ errors.account_no[0] }}
</span>
</div>
<div class="form-group" v-if="payment_method.id != 2">
<label>IFSC Code</label>
<input type="text" class="form-control" placeholder="IFSC Code"
v-model="ifsc_code" >
<span class="text-danger help-block" v-if="has_error && errors.ifsc_code">
{{ errors.ifsc_code[0] }}
</span>
</div>
<div class="form-group" v-if="payment_method.id != 2">
<label>Branch Address</label>
<input type="text" class="form-control" placeholder="Branch Address"
v-model="branch_address" >
<span class="text-danger help-block" v-if="has_error && errors.branch_address">
{{ errors.branch_address[0] }}
</span>
</div>
<div class="form-group" v-if="payment_method.id == 2">
<label>PayPal Id</label>
<input type="text" class="form-control" placeholder="PayPal Id" v-model="paypal_id">
<span class="text-danger help-block" v-if="has_error && errors.paypal_id">
{{ errors.paypal_id[0] }}
</span>
</div>
<div class="form-group">
<input type="checkbox" v-model="is_primary"/>
<label>Set as a Primary Payment Method</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light dismiss_modal" data-dismiss="modal">Close</button>
<VueLoadingButton type="submit" aria-label="Add Payment Method"
class="btn btn-primary btn-imp" :loading="isLoading" :styled="isStyled" >
Save
</VueLoadingButton>
</div>
</form>
</div>
</div>
</div>
<!-- Add Payment method model end -->
<!-- Edit Payment method model start -->
<div class="modal fade dismiss_modal" id="edit_bank_account" tabindex="-1" role="dialog" aria-hidden="true" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="">Edit Payment Method</h5>
<button type="button" class="close dismiss_modal" data-dismiss="modal">×</button>
</div>
<form @submit.prevent="updateUserBankAccount">
<div class="modal-body">
<div class="form-group">
<label>Type</label>
<multiselect track-by="payment_method_type" label="payment_method_type"
v-model="payment_method" :options=paymentMethodTypes placeholder="Select payment method" selectLabel='' deselectLabel='X' selectedLabel='' >
<span slot="noResult"> No record found </span>
</multiselect>
<span class="text-danger help-block" v-if="has_error && errors.payment_method_type_id">{{ errors.payment_method_type_id[0] }}</span>
</div>
<div class="form-group" v-if="payment_method.id != 2">
<label>Bank Name</label>
<input type="text" class="form-control" placeholder="Bank Name"
v-model="bank_name" >
<span class="text-danger help-block" v-if="has_error && errors.bank_name">
{{ errors.bank_name[0] }}
</span>
</div>
<div class="form-group" v-if="payment_method.id != 2">
<label>Beneficiary Name</label>
<input type="text" class="form-control" placeholder="Beneficiary Name"
v-model="beneficiary_name" >
<span class="text-danger help-block" v-if="has_error && errors.beneficiary_name">
{{ errors.beneficiary_name[0] }}
</span>
</div>
<div class="form-group" v-if="payment_method.id != 2">
<label>Account No</label>
<input type="text" class="form-control" placeholder="Account No"
v-model="account_no" >
<span class="text-danger help-block" v-if="has_error && errors.account_no">
{{ errors.account_no[0] }}
</span>
</div>
<div class="form-group" v-if="payment_method.id != 2">
<label>IFSC Code</label>
<input type="text" class="form-control" placeholder="IFSC Code"
v-model="ifsc_code" >
<span class="text-danger help-block" v-if="has_error && errors.ifsc_code">
{{ errors.ifsc_code[0] }}
</span>
</div>
<div class="form-group" v-if="payment_method.id != 2">
<label>Branch Address</label>
<input type="text" class="form-control" placeholder="Branch Address"
v-model="branch_address" >
<span class="text-danger help-block" v-if="has_error && errors.branch_address">
{{ errors.branch_address[0] }}
</span>
</div>
<div class="form-group" v-if="payment_method.id == 2">
<label>PayPal Id</label>
<input type="text" class="form-control" placeholder="PayPal Id" v-model="paypal_id">
<span class="text-danger help-block" v-if="has_error && errors.paypal_id">
{{ errors.paypal_id[0] }}
</span>
</div>
<div class="form-group">
<input type="checkbox" v-model="is_primary"/>
<label>Set as a Primary Payment Method</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light dismiss_modal" data-dismiss="modal">Close</button>
<VueLoadingButton type="submit" aria-label="Edit Payment Method"
class="btn btn-primary btn-imp" :loading="isLoading" :styled="isStyled" >
Update
</VueLoadingButton>
</div>
</form>
</div>
</div>
</div>
<!-- Edit Payment method model end -->
<!-- Delete Payment method model start -->
<div class="modal fade" id="delete_bank_account">
<div class="modal-dialog modal-confirm">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h5 class="modal-title">Are you sure?</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Do you really want to delete this payment method?</p>
</div>
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-secondary dismiss_modal" data-dismiss="modal">Cancel</button>
<VueLoadingButton @click.native="deleteUserBankAccount()" aria-label="Delete"
class="btn btn-danger btn-imp" :loading="isLoading" :styled="isStyled" >
Delete
</VueLoadingButton>
</div>
</div>
</div>
</div>
<!-- Delete Payment method model end -->
</div>
</template>
<script>
import Multiselect from 'vue-multiselect';
export default {
props: ['userShow','paymentMethodTypesOption','userBankAccounts'],
components: { Multiselect },
data() {
return {
has_error: false,
error: '',
errors: {},
success: false,
isLoading: false,
isStyled: false,
paymentMethodTypes : [],
userBankAccount : {},
bank_name : '',
beneficiary_name : '',
account_no : '',
ifsc_code : '',
branch_address : '',
is_primary : '',
paypal_id : '',
payment_method : [],
componentKey: 0,
}
},
mounted() {
},
methods: {
forceRerender()
{
this.componentKey += 1;
},
/**
* Fetch user bank accounts put in userBankAccounts variable.
*
* @param null
* @return null
*/
getUserBankAccounts()
{
this.$http({
url: `api/getUserBankAccounts`,
method: 'GET'
})
.then((res) => {
this.userBankAccounts = res.data.userBankAccounts
}, () => {
this.has_error = true
})
},
/**
* Add new user payment method.
*
* @param null
* @return null
*/
insertUserBankAccount() {
this.isLoading = true
let form = new FormData();
form.append('payment_method_type_id', (this.payment_method != null && this.payment_method.id > 0) ? this.payment_method.id :'' );
form.append('is_primary', (this.is_primary?1:0));
if (this.payment_method.id == 2)
{
form.append('paypal_id', this.paypal_id);
}
else
{
form.append('bank_name', this.bank_name);
form.append('beneficiary_name', this.beneficiary_name);
form.append('account_no', this.account_no);
form.append('ifsc_code', this.ifsc_code);
form.append('branch_address', this.branch_address);
}
const config = {
headers: { 'content-type': 'multipart/form-data' }
}
this.$http({
config:config ,
url: `api/insertUserBankAccount`,
method: 'POST',
data: form
})
.then((res) => {
this.resetForm()
this.$emit('updateUserBankAccounts', res.data.userBankAccounts )
this.userBankAccounts = res.data.userBankAccounts
app.success = true
this.has_error = false
this.isLoading = false
this.error = ''
this.errors = {}
this.$snotify.success( res.data.message);
$( ".dismiss_modal" ).trigger( "click" );
// $('.modal').modal('hide')
this.forceRerender()
let status = { 'translator_status_name' : res.data.translator_status_name ,'translator_status_id': res.data.translator_status_id }
this.$emit('updateStatus', status)
})
.catch(err => {
this.has_error = true
app.success = false
this.isLoading = false
this.error = err.response.data.error
this.errors = err.response.data.errors || {}
if(err.response.data.showErrorPop)
{
this.$snotify.error(err.response.data.message);
}
});
},
/**
* Open edit bank account model
*
* @param null
* @return null
*/
openEditBankAccountModel(id) {
this.paymentMethodTypes = this.paymentMethodTypesOption.slice() ;
this.userBankAccount = this.userBankAccounts.filter(function(userBankAccount) {
return userBankAccount.id == id ;
});
this.bank_name = this.userBankAccount[0].bank_name
this.beneficiary_name = this.userBankAccount[0].beneficiary_name
this.account_no = this.userBankAccount[0].account_no
this.ifsc_code = this.userBankAccount[0].ifsc_code
this.branch_address = this.userBankAccount[0].branch_address
this.is_primary = this.userBankAccount[0].is_primary
this.paypal_id = this.userBankAccount[0].paypal_id
this.payment_method = { 'id': this.userBankAccount[0].payment_method_type_id , 'payment_method_type': this.userBankAccount[0].payment_method_type }
app.success = true
this.has_error = false
this.isLoading = false
this.error = ''
this.errors = {}
},
/**
* Update user payment method.
*
* @param null
* @return null
*/
updateUserBankAccount() {
this.isLoading = true
let form = new FormData();
form.append('payment_method_type_id', (this.payment_method != null && this.payment_method.id > 0) ? this.payment_method.id :'' );
form.append('is_primary', (this.is_primary?1:0));
form.append('id', this.userBankAccount[0].id);
if (this.payment_method.id == 2)
{
form.append('paypal_id', this.paypal_id);
}
else
{
form.append('bank_name', this.bank_name);
form.append('beneficiary_name', this.beneficiary_name);
form.append('account_no', this.account_no);
form.append('ifsc_code', this.ifsc_code);
form.append('branch_address', this.branch_address);
}
const config = {
headers: { 'content-type': 'multipart/form-data' }
}
this.$http({
config:config ,
url: `api/updateUserBankAccount`,
method: 'POST',
data: form
})
.then((res) => {
this.userBankAccounts = res.data.userBankAccounts
this.resetForm()
app.success = true
this.has_error = false
this.isLoading = false
this.error = ''
this.errors = {}
this.$snotify.success( res.data.message);
$( ".dismiss_modal" ).trigger( "click" );
})
.catch(err => {
this.has_error = true
app.success = false
this.isLoading = false
this.error = err.response.data.error
this.errors = err.response.data.errors || {}
if(err.response.data.showErrorPop)
{
this.$snotify.error(err.response.data.message);
}
});
},
/**
* Delete user payment method.
*
* @param null
* @return null
*/
deleteUserBankAccount() {
this.isLoading = true
let form = new FormData();
form.append('id', this.userBankAccount[0].id);
const config = {
headers: { 'content-type': 'multipart/form-data' }
}
this.$http({
config:config ,
url: `api/deleteUserBankAccount`,
method: 'POST',
data: form
})
.then((res) => {
this.userBankAccounts = res.data.userBankAccounts
app.success = true
this.has_error = false
this.isLoading = false
this.error = ''
this.errors = {}
this.$snotify.success( res.data.message);
$( ".dismiss_modal" ).trigger( "click" );
})
.catch(err => {
this.has_error = true
app.success = false
this.isLoading = false
this.error = err.response.data.error
this.errors = err.response.data.errors || {}
if(err.response.data.showErrorPop)
{
this.$snotify.error(err.response.data.message);
}
});
},
/**
* ResetForm function resets the form inputs user payment method.
*
* @param null
* @return null
*/
resetForm() {
app.success = true
this.has_error = false
this.isLoading = false
this.error = ''
this.errors = {}
this.paymentMethodTypes = this.paymentMethodTypesOption.slice() ;
this.bank_name = ''
this.beneficiary_name = ''
this.account_no = ''
this.ifsc_code = ''
this.branch_address = ''
this.paypal_id = ''
this.is_primary = ''
this.payment_method = []
this.userBankAccount = []
},
},
}
</script>