mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
Recipient Bank Details to follow payment overriding the default attached to Booking
This commit is contained in:
Dillon Ngo
@@ -133,7 +133,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col" :class="[{'p-r-15': disabled}, {'p-r-5': !disabled}]">
|
||||
<div class="col" :class="[{'p-r-15': disabled}, {'p-r-5': !disabled}]" v-if="!isCancelButtonHidden">
|
||||
<div class="btn btn-sm btn-default bg-master-lightest btn-block b-rad-none" :data-dismiss="closable ? 'modal' : ''" @click="$emit('close')">{{disabled ? 'Change Recipient Account' : 'Cancel'}}</div>
|
||||
</div>
|
||||
<div class="col p-l-5" v-if="!disabled && !isEditing">
|
||||
@@ -186,6 +186,18 @@
|
||||
isEditing: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isCancelButtonHidden: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
billNo: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
transactionId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data(){
|
||||
@@ -201,6 +213,8 @@
|
||||
swift: '',
|
||||
snap: '',
|
||||
country_id: this.country_id,
|
||||
bill_no: this.billNo,
|
||||
transaction_id: this.transactionId,
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -234,6 +248,8 @@
|
||||
if(this.isEditing){
|
||||
this.parameters.company_id = this.company_id;
|
||||
this.parameters.account_type = this.type;
|
||||
this.parameters.bill_no = this.billNo;
|
||||
this.parameters.transaction_id = this.transactionId;
|
||||
this.submit(route('api.bank.update', this.parameters.id), 'put', this.section, true, false);
|
||||
}
|
||||
else{
|
||||
@@ -242,7 +258,7 @@
|
||||
},
|
||||
successHandler(response){
|
||||
if(this.isEditing){
|
||||
this.type !== 2 ? this.closeModal() : this.$emit('updatedBankDetails', response.payload.data);
|
||||
this.type !== 2 ? this.closeModal() : this.$emit('updatedBankDetails', response.payload.data, this.transactionId);
|
||||
}
|
||||
else{
|
||||
this.type !== 2 ? this.closeModal() : this.$emit('createdBank', response.payload.data);
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col" :class="[{'p-r-15': disabled}, {'p-r-5': !disabled}]">
|
||||
<div class="col" :class="[{'p-r-15': disabled}, {'p-r-5': !disabled}]" v-if="!isCancelButtonHidden">
|
||||
<div class="btn btn-sm btn-default bg-master-lightest btn-block b-rad-none" :data-dismiss="closable ? 'modal' : ''" @click="$emit('close')">{{disabled ? 'Change Recipient Account' : 'Cancel'}}</div>
|
||||
</div>
|
||||
<div class="col p-l-5" v-if="!disabled && !isEditing">
|
||||
@@ -87,6 +87,18 @@
|
||||
isEditing: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isCancelButtonHidden: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
billNo: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
transactionId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data(){
|
||||
@@ -100,6 +112,8 @@
|
||||
account_no: '',
|
||||
bank_branch: '',
|
||||
country_id: this.country_id,
|
||||
bill_no: this.billNo,
|
||||
transaction_id: this.transactionId,
|
||||
},
|
||||
englishTextWarning: false,
|
||||
confirmProceedEnglishText: false,
|
||||
@@ -125,6 +139,8 @@
|
||||
if(this.isEditing){
|
||||
this.parameters.company_id = this.company_id;
|
||||
this.parameters.account_type = this.type;
|
||||
this.parameters.bill_no = this.billNo;
|
||||
this.parameters.transaction_id = this.transactionId;
|
||||
this.submit(route('api.bank.update', this.parameters.id), 'put', this.section, true, false);
|
||||
}
|
||||
else{
|
||||
@@ -133,7 +149,7 @@
|
||||
},
|
||||
successHandler(response){
|
||||
if(this.isEditing){
|
||||
this.type !== 2 ? this.closeModal() : this.$emit('updatedBankDetails', response.payload.data);
|
||||
this.type !== 2 ? this.closeModal() : this.$emit('updatedBankDetails', response.payload.data, this.transactionId);
|
||||
}
|
||||
else{
|
||||
this.type !== 2 ? this.closeModal() : this.$emit('createdBank', response.payload.data);
|
||||
|
||||
+177
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<div class="row zig-zag-top">
|
||||
<div class="col bg-white padding-25">
|
||||
<div class="row p-b-20 b-b b-dashed b-grey m-b-20">
|
||||
<div class="col">
|
||||
<div class="row m-b-10" v-if="data">
|
||||
<div class="col" v-if="data.billNo && data.billNo !== ''">
|
||||
<div class="font-heading all-caps bold fs-10">Edit Recipient Bank Details ({{ data.billNo }})</div>
|
||||
</div>
|
||||
<div class="col" v-else>
|
||||
<div class="font-heading all-caps bold fs-10">Edit Recipient Bank Details (Default)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row m-b-10">
|
||||
<div class="col">
|
||||
<div class="row parentContainer">
|
||||
<div class="col">
|
||||
<div class="row" v-show="!createBank && !isEditing">
|
||||
<div class="col-7 p-r-0">
|
||||
<div class="row" id="select-list" name="select-list">
|
||||
<div class="col">
|
||||
<div class="form-group no-margin form-group-default">
|
||||
<label>{{ data.serviceType.id === 4 ? '1688 Login Id/Email/Phone' : 'Account No.' }}</label>
|
||||
<input type="text" class="form-control" v-model="account_no" @keyup="parameters.bankAccount = {}" @focus="dropdownStatus = true">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="relative w-100">
|
||||
<div class="absolute w-100 b-l b-b b-r b-grey" :class="[{'hide': !dropdownStatus}]" style="top: 100%; right: 0; z-index: 1;">
|
||||
<div class="row text-left no-margin bg-white">
|
||||
<div class="col no-padding">
|
||||
<div class="row no-margin" v-for="bank in data.recipientBanks.filter(getAccountNumber)" v-bind:key="bank.id" >
|
||||
<div id="select-option" name="select-option" class="col b-b b-grey p-t-10 p-b-10 pointer p-t-10 p-b-10" :class="['bg-master-lightest','text-master', 'hover-primary', 'pointer']" @click="selectBank(bank)">
|
||||
<div class="row align-items-center justify-content-center">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="font-heading bold lh-15 fs-13">{{bank.reference ? bank.reference + ' - ':''}}{{bank.holder_name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="font-heading all-caps fs-13 muted"><b class="m-r-5 text-primary">{{bank.account_no}}</b> {{bank.bank_name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto p-l-0" v-show="!createBank && account_no">
|
||||
<button class="btn btn-sm h-100 btn-primary b-rad-none all-caps" @click="createBank = !createBank; dropdownStatus = false">
|
||||
<i class="fa fa-plus m-r-5"></i>
|
||||
Create New
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" v-show="createBank || isEditing">
|
||||
<div class="col">
|
||||
<bank-account-form-component v-if="data.serviceType.id !== 4"
|
||||
section="bookingEditRecipientDetailSection"
|
||||
:data="Object.keys(parameters.bankAccount).length ? parameters.bankAccount : {account_no: account_no, company_id: data.company.id, country_id: 2, account_type: 2}"
|
||||
:company_id="data.company.id"
|
||||
:country_id="2"
|
||||
:type="2"
|
||||
:currency="data.serviceType.selectedCurrency.short_code"
|
||||
:billNo="data.billNo"
|
||||
:transactionId="data.transactionId"
|
||||
:serviceType="data.serviceType"
|
||||
:closable=false
|
||||
:isEditing="isEditing"
|
||||
:isCancelButtonHidden=true
|
||||
v-on:createdBank="updateBank($event)"
|
||||
v-on:updatedBankDetails="updatedBankDetails"
|
||||
v-on:close="clearAccount()">
|
||||
</bank-account-form-component>
|
||||
<phone-account-form-component v-if="data.serviceType.id === 4"
|
||||
section="bookingEditRecipientDetailSection"
|
||||
:data="Object.keys(parameters.bankAccount).length ? parameters.bankAccount : {account_no: account_no, company_id: data.company.id, country_id: 2, account_type: 2}"
|
||||
:company_id="data.company.id"
|
||||
:country_id="2" :type="2"
|
||||
:billNo="data.billNo"
|
||||
:transactionId="data.transactionId"
|
||||
:serviceType="data.serviceType"
|
||||
:closable=false
|
||||
:isEditing="isEditing"
|
||||
:isCancelButtonHidden=true
|
||||
v-on:createdBank="updateBank($event)"
|
||||
v-on:updatedBankDetails="updatedBankDetails"
|
||||
v-on:close="clearAccount()" ></phone-account-form-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-auto" v-show="!isLoading">
|
||||
<button id="cancel-new-booking" name="cancel-new-booking" class="btn btn-lg btn-default bg-master-lightest b-rad-none all-caps fs-12" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormHandler from '../../../general/mixins/formHandler';
|
||||
// import componentHandler from '../../../general/mixins/componentHandler';
|
||||
// import UpdateBookingComponent from "../forms/UpdateBookingComponent";
|
||||
export default {
|
||||
// components: {UpdateBookingComponent},
|
||||
data(){
|
||||
return {
|
||||
createBank: false,
|
||||
isEditing: true,
|
||||
recipientBanks: [],
|
||||
dropdownStatus: false,
|
||||
account_no: '',
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.recipientBanks = this.data.recipientBanks;
|
||||
},
|
||||
methods: {
|
||||
getAccountNumber(bank){
|
||||
return bank.account_no.startsWith(this.account_no)
|
||||
},
|
||||
updateBank(bank){
|
||||
this.selectBank(bank);
|
||||
this.recipientBanks.push(bank);
|
||||
this.parameters.bankAccount = bank;
|
||||
this.parameters.bankAccountDefault = bank;
|
||||
},
|
||||
updatedBankDetails(bank, transactionId){
|
||||
this.parameters.bankAccount = bank;
|
||||
this.parameters.bankAccountDefault = bank;
|
||||
|
||||
var foundIndex = this.recipientBanks.findIndex(x => x.id == bank.id);
|
||||
this.recipientBanks[foundIndex] = bank;
|
||||
|
||||
this.$emit('updatedBankDetails', bank, transactionId);
|
||||
this.closeModal();
|
||||
},
|
||||
selectBank(bank){
|
||||
this.account_no = bank.account_no;
|
||||
this.isEditing = true;
|
||||
this.createBank = false;
|
||||
this.parameters.bankAccount = bank;
|
||||
this.dropdownStatus = false;
|
||||
},
|
||||
clearAccount(){
|
||||
this.createBank = false;
|
||||
this.isEditing = false;
|
||||
this.account_no = '';
|
||||
this.parameters.bankAccount = {};
|
||||
},
|
||||
},
|
||||
mixins: [FormHandler]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
+35
-9
@@ -3,9 +3,12 @@
|
||||
<div class="col bg-white padding-25">
|
||||
<div class="row p-b-20 b-b b-dashed b-grey m-b-20">
|
||||
<div class="col">
|
||||
<div class="row m-b-10">
|
||||
<div class="col">
|
||||
<div class="font-heading all-caps bold fs-10">Recipient Details</div>
|
||||
<div class="row m-b-10" v-if="data">
|
||||
<div class="col" v-if="data.billNo && data.billNo !== ''">
|
||||
<div class="font-heading all-caps bold fs-10">Edit Recipient Bank Details ({{ data.billNo }})</div>
|
||||
</div>
|
||||
<div class="col" v-else>
|
||||
<div class="font-heading all-caps bold fs-10">Edit Recipient Bank Details (Default)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
@@ -64,8 +67,31 @@
|
||||
</div>
|
||||
<div class="row" v-show="createBank || isEditing">
|
||||
<div class="col">
|
||||
<bank-account-form-component v-if="data.serviceType.id !== 4" section="bookingEditRecipientDetailSection" :data="Object.keys(parameters.bankAccount).length ? parameters.bankAccount : {account_no: account_no, company_id: data.company.id, country_id: 2, account_type: 2}" :company_id="data.company.id" :country_id="2" :type="2" :currency="data.serviceType.selectedCurrency.short_code" v-on:createdBank="updateBank($event)" v-on:updatedBankDetails="updatedBankDetails($event)" :serviceType="data.serviceType" :closable=false v-on:close="clearAccount()" :isEditing="isEditing"></bank-account-form-component>
|
||||
<phone-account-form-component v-if="data.serviceType.id === 4" section="bookingEditRecipientDetailSection" :data="Object.keys(parameters.bankAccount).length ? parameters.bankAccount : {account_no: account_no, company_id: data.company.id, country_id: 2, account_type: 2}" :company_id="data.company.id" :country_id="2" :type="2" v-on:createdBank="updateBank($event)" v-on:updatedBankDetails="updatedBankDetails($event)" :serviceType="data.serviceType" :closable=false v-on:close="clearAccount()" :isEditing="isEditing"></phone-account-form-component>
|
||||
<bank-account-form-component v-if="data.serviceType.id !== 4"
|
||||
section="bookingEditRecipientDetailSection"
|
||||
:data="Object.keys(parameters.bankAccount).length ? parameters.bankAccount : {account_no: account_no, company_id: data.company.id, country_id: 2, account_type: 2}"
|
||||
:company_id="data.company.id"
|
||||
:country_id="2" :type="2"
|
||||
:currency="data.serviceType.selectedCurrency.short_code"
|
||||
:serviceType="data.serviceType"
|
||||
:closable=false
|
||||
:isEditing="isEditing"
|
||||
v-on:createdBank="updateBank($event)"
|
||||
v-on:updatedBankDetails="updatedBankDetails"
|
||||
v-on:close="clearAccount()">
|
||||
</bank-account-form-component>
|
||||
<phone-account-form-component v-if="data.serviceType.id === 4"
|
||||
section="bookingEditRecipientDetailSection"
|
||||
:data="Object.keys(parameters.bankAccount).length ? parameters.bankAccount : {account_no: account_no, company_id: data.company.id, country_id: 2, account_type: 2}"
|
||||
:company_id="data.company.id"
|
||||
:country_id="2" :type="2"
|
||||
:serviceType="data.serviceType"
|
||||
:closable=false
|
||||
:isEditing="isEditing"
|
||||
v-on:createdBank="updateBank($event)"
|
||||
v-on:updatedBankDetails="updatedBankDetails"
|
||||
v-on:close="clearAccount()">
|
||||
</phone-account-form-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -84,9 +110,9 @@
|
||||
|
||||
<script>
|
||||
import FormHandler from '../../../general/mixins/formHandler';
|
||||
import UpdateBookingComponent from "../forms/UpdateBookingComponent";
|
||||
// import UpdateBookingComponent from "../forms/UpdateBookingComponent";
|
||||
export default {
|
||||
components: {UpdateBookingComponent},
|
||||
// components: {UpdateBookingComponent},
|
||||
data(){
|
||||
return {
|
||||
createBank: false,
|
||||
@@ -109,14 +135,14 @@
|
||||
this.parameters.bankAccount = bank;
|
||||
this.parameters.bankAccountDefault = bank;
|
||||
},
|
||||
updatedBankDetails(bank){
|
||||
updatedBankDetails(bank, transactionId){
|
||||
this.parameters.bankAccount = bank;
|
||||
this.parameters.bankAccountDefault = bank;
|
||||
|
||||
var foundIndex = this.recipientBanks.findIndex(x => x.id == bank.id);
|
||||
this.recipientBanks[foundIndex] = bank;
|
||||
|
||||
this.$emit('updatedBankDetails', bank);
|
||||
this.$emit('updatedBankDetails', bank, transactionId);
|
||||
},
|
||||
selectBank(bank){
|
||||
this.account_no = bank.account_no;
|
||||
|
||||
+31
-36
@@ -51,47 +51,32 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row align-items-center m-b-15 parentContainer bg-master-lighter p-t-10 p-b-10">
|
||||
<div class="col">
|
||||
<div class="row m-b-5">
|
||||
<div class="col">
|
||||
<div class="font-heading all-caps fs-10 muted">Recipient Bank Details</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto p-r-0">
|
||||
<img v-if="item.service.id === 4" src="/images/1688_logo.png" alt="" width="40">
|
||||
<img v-else-if="item.service.id === 11" src="/images/alipay_logo.png" alt="" width="40">
|
||||
<div v-else class="padding-5 bg-master-light">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||
width="30" height="30"
|
||||
viewBox="0 0 172 172"
|
||||
style=" fill:#000000;"><defs><linearGradient x1="86" y1="38.97413" x2="86" y2="57.78663" gradientUnits="userSpaceOnUse" id="color-1_77055_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="129" y1="77.49138" x2="129" y2="121.38631" gradientUnits="userSpaceOnUse" id="color-2_77055_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="43" y1="77.49138" x2="43" y2="121.38631" gradientUnits="userSpaceOnUse" id="color-3_77055_gr3"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="64.94881" x2="86" y2="133.92888" gradientUnits="userSpaceOnUse" id="color-4_77055_gr4"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="16.11963" x2="86" y2="155.875" gradientUnits="userSpaceOnUse" id="color-5_77055_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><path d="M86,40.31787c-4.4528,0 -8.0625,3.6097 -8.0625,8.0625c0,4.4528 3.6097,8.0625 8.0625,8.0625c4.4528,0 8.0625,-3.6097 8.0625,-8.0625c0,-4.4528 -3.6097,-8.0625 -8.0625,-8.0625z" fill="url(#color-1_77055_gr1)"></path><path d="M126.3125,80.625h5.375v37.625h-5.375z" fill="url(#color-2_77055_gr2)"></path><path d="M40.3125,80.625h5.375v37.625h-5.375z" fill="url(#color-3_77055_gr3)"></path><path d="M56.4375,69.875v59.125h59.125v-59.125zM99.4375,88.6875h-21.5v8.0625h16.125c2.96431,0 5.375,2.41069 5.375,5.375v8.0625c0,2.96431 -2.41069,5.375 -5.375,5.375h-5.375v5.375h-5.375v-5.375h-10.75v-5.375h21.5v-8.0625h-16.125c-2.96431,0 -5.375,-2.41069 -5.375,-5.375v-8.0625c0,-2.96431 2.41069,-5.375 5.375,-5.375h5.375v-5.375h5.375v5.375h10.75z" fill="url(#color-4_77055_gr4)"></path><path d="M86,59.125c-5.92862,0 -10.75,-4.82138 -10.75,-10.75c0,-5.92862 4.82138,-10.75 10.75,-10.75c5.92863,0 10.75,4.82138 10.75,10.75c0,5.92862 -4.82137,10.75 -10.75,10.75zM86,43c-2.96431,0 -5.375,2.41069 -5.375,5.375c0,2.96431 2.41069,5.375 5.375,5.375c2.96431,0 5.375,-2.41069 5.375,-5.375c0,-2.96431 -2.41069,-5.375 -5.375,-5.375zM108.84375,53.75c-2.22256,0 -4.03125,-1.80869 -4.03125,-4.03125c0,-2.22256 1.80869,-4.03125 4.03125,-4.03125c2.22256,0 4.03125,1.80869 4.03125,4.03125c0,2.22256 -1.80869,4.03125 -4.03125,4.03125zM108.84375,49.71606v0.00269zM63.15625,53.75c-2.22256,0 -4.03125,-1.80869 -4.03125,-4.03125c0,-2.22256 1.80869,-4.03125 4.03125,-4.03125c2.22256,0 4.03125,1.80869 4.03125,4.03125c0,2.22256 -1.80869,4.03125 -4.03125,4.03125zM63.15625,49.71606v0.00269zM150.5,69.875c2.96431,0 5.375,-2.39456 5.375,-5.34544v-1.29806c0,-1.72269 -0.84119,-3.34862 -2.30319,-4.39138l-60.03069,-40.40925c-4.58219,-3.08256 -10.49737,-3.08256 -15.07956,0l-60.08981,40.44956c-1.40825,1.00244 -2.24675,2.62838 -2.24675,4.35106v1.29806c0,2.95088 2.41069,5.34544 5.375,5.34544h8.0625v59.13037c-4.44513,0 -8.0625,3.61738 -8.0625,8.0625v3.182c-3.12019,1.11531 -5.375,4.06888 -5.375,7.568v8.05713h139.75v-8.05712c0,-3.49913 -2.25481,-6.45269 -5.375,-7.568v-3.182c0,-4.44513 -3.61738,-8.0625 -8.0625,-8.0625v-59.13038zM150.5,147.81788v2.68212h-129v-2.68212c0,-1.4835 1.204,-2.69288 2.6875,-2.69288h123.625c1.4835,0 2.6875,1.20937 2.6875,2.69288zM145.125,137.06788v2.68212h-118.25v-2.68212c0,-1.4835 1.204,-2.69288 2.6875,-2.69288h26.875h16.125h26.875h16.125h26.875c1.4835,0 2.6875,1.20937 2.6875,2.69288zM51.0625,80.625v37.625h-16.125v-37.625zM34.9375,75.25v-5.375h16.125v5.375zM51.0625,123.625v5.375h-16.125v-5.375zM56.4375,129v-59.125h5.375h10.75h5.375h16.125h5.375h5.375h10.75v59.125h-10.75h-5.375h-5.375h-16.125h-5.375h-10.75zM137.0625,80.625v37.625h-16.125v-37.625zM120.9375,75.25v-5.375h16.125v5.375zM137.0625,123.625v5.375h-16.125v-5.375zM115.5625,64.5h-16.125h-26.875v0.0215l-16.125,0.00269v-0.02419h-26.875h-8.0625l-0.06719,-1.21475l60.03069,-40.40387c1.376,-0.92987 2.95625,-1.38944 4.5365,-1.38944c1.58025,0 3.1605,0.46494 4.5365,1.39481l59.9635,40.33938l0.00806,1.27388c0,0 -0.00269,0 -0.00806,0h-8.0625z" fill="url(#color-5_77055_gr5)"></path></g></g></svg>
|
||||
</div>
|
||||
</div>
|
||||
<recipient-bank-details-component :data="item" :section="section"></recipient-bank-details-component>
|
||||
<div class="row" style="margin-top: -20px" v-if="$store.getters.isAdmin">
|
||||
<div class="col-auto">
|
||||
<div class="row">
|
||||
<div class="col-auto p-r-10">
|
||||
<div class="font-heading fs-12">{{item.bank.holder_name}} <span class="text-complete m-l-5 bold">{{[3, 4].includes(item.bank.type) ? item.bank.account_no : item.bank.account_no.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim()}}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" v-if="![3, 4].includes(item.bank.type)">
|
||||
<div class="col-auto p-r-10">
|
||||
<div class="font-heading fs-10 small">{{item.bank.bank_name}} <span class="m-l-5">({{item.bank.bank_branch}})</span> <span class="m-l-5">({{item.bank.swift}})</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-complete text-underline m-b-0 fs-12 pointer" @click="toggleEditRecipientBankDetailsCollapsed">{{ isEditRecipientBankDetailsCollapsed ? '< Back' : 'Change recipient bank details' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-t-20">
|
||||
<div class="col">
|
||||
<div class="btn btn-sm btn-block b-rad-none shadow-sm pointer requestModal" data-type="transferSummary" id="transfer-now" name="transfer-now">EDIT</div>
|
||||
<div class="row" style="margin-top: -20px" v-if="!$store.getters.isAdmin && isAnyPaymentRecipientBankEdited">
|
||||
<div class="col-auto">
|
||||
<p class="text-complete text-underline m-b-0 fs-12 pointer" @click="toggleEditRecipientBankDetailsCollapsed">{{ isEditRecipientBankDetailsCollapsed ? '< Back' : 'Show edited recipient bank details on payment' }}</p>
|
||||
</div>
|
||||
<modal-component id="select-account-modal" class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="transferSummary" size="large">
|
||||
<booking-recipient-edit-component :data="recipientBanks" :section="section" v-on:updatedBankDetails="updatedBankDetails($event)"></booking-recipient-edit-component>
|
||||
</modal-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="collapse" :class="{ show: isEditRecipientBankDetailsCollapsed }" ref="collapseContent" v-if="$store.getters.isAdmin">
|
||||
<recipient-bank-details-component :data="item" :section="section" :isEditButtonHidden="false"></recipient-bank-details-component>
|
||||
<edit-payment-recipient-bank-details-component :data="item" :section="section" :isEditButtonHidden="false"></edit-payment-recipient-bank-details-component>
|
||||
</div>
|
||||
|
||||
<div class="collapse" :class="{ show: isEditRecipientBankDetailsCollapsed }" ref="collapseContent" v-if="!$store.getters.isAdmin && isAnyPaymentRecipientBankEdited">
|
||||
<edit-payment-recipient-bank-details-component :data="item" :section="section" :isEditButtonHidden="true"></edit-payment-recipient-bank-details-component>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col bg-white padding-15">
|
||||
<div class="row" v-if="!expandPayment">
|
||||
@@ -627,7 +612,9 @@
|
||||
bankAccountDefault: this.data.bank,
|
||||
recipientBanks: this.data.company.recipient_banks.accounts,
|
||||
bookingId: this.data.id
|
||||
}
|
||||
},
|
||||
isEditRecipientBankDetailsCollapsed: false,
|
||||
isAnyPaymentRecipientBankEdited: this.data.payment_history.some(payment => payment.bank !== null),
|
||||
}
|
||||
},
|
||||
validations () {
|
||||
@@ -697,9 +684,9 @@
|
||||
this.calculation = null;
|
||||
this.expandPayment = false;
|
||||
},
|
||||
updatedBankDetails(bank){
|
||||
this.item.bank = bank;
|
||||
},
|
||||
// updatedBankDetails(bank){ //cief todo: 66 - this need to move to vuex, too many levels of passings between parent and child
|
||||
// this.item.bank = bank;
|
||||
// },
|
||||
removeVoucher(){
|
||||
this.voucherCodeFailedReason = '';
|
||||
this.voucherCode = '';
|
||||
@@ -729,6 +716,14 @@
|
||||
},
|
||||
handleSelectedVoucher(value){
|
||||
this.voucherCode = value;
|
||||
},
|
||||
toggleEditRecipientBankDetailsCollapsed() {
|
||||
this.isEditRecipientBankDetailsCollapsed = !this.isEditRecipientBankDetailsCollapsed;
|
||||
if (this.isEditRecipientBankDetailsCollapsed) {
|
||||
$(this.$refs.collapseContent).collapse('show');
|
||||
} else {
|
||||
$(this.$refs.collapseContent).collapse('hide');
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [componentHandler],
|
||||
|
||||
+205
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<div class="row align-items-center m-b-15 parentContainer p-t-10 p-b-10">
|
||||
<div class="col">
|
||||
<div class="row" v-if="item.payment_history.length">
|
||||
<div class="col">
|
||||
<div class="row m-b-15 p-b-10 bg-master-lighter" v-for="singlePayment in item.payment_history" v-bind:key="singlePayment.id" >
|
||||
<div class="col">
|
||||
<div class="row m-b-5">
|
||||
<div class="col">
|
||||
<div class="font-heading">
|
||||
<span class="all-caps fs-10 muted">
|
||||
Recipient Bank Details
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PRIORITY If bank exist for payment -->
|
||||
<div class="row align-items-center" v-if="singlePayment.bank">
|
||||
<div class="col-auto p-r-0">
|
||||
<img v-if="item.service.id === 4" src="/images/1688_logo.png" alt="" width="40">
|
||||
<img v-else-if="item.service.id === 11" src="/images/alipay_logo.png" alt="" width="40">
|
||||
<div v-else class="padding-5 bg-master-light">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||
width="30" height="30"
|
||||
viewBox="0 0 172 172"
|
||||
style=" fill:#000000;"><defs><linearGradient x1="86" y1="38.97413" x2="86" y2="57.78663" gradientUnits="userSpaceOnUse" id="color-1_77055_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="129" y1="77.49138" x2="129" y2="121.38631" gradientUnits="userSpaceOnUse" id="color-2_77055_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="43" y1="77.49138" x2="43" y2="121.38631" gradientUnits="userSpaceOnUse" id="color-3_77055_gr3"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="64.94881" x2="86" y2="133.92888" gradientUnits="userSpaceOnUse" id="color-4_77055_gr4"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="16.11963" x2="86" y2="155.875" gradientUnits="userSpaceOnUse" id="color-5_77055_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><path d="M86,40.31787c-4.4528,0 -8.0625,3.6097 -8.0625,8.0625c0,4.4528 3.6097,8.0625 8.0625,8.0625c4.4528,0 8.0625,-3.6097 8.0625,-8.0625c0,-4.4528 -3.6097,-8.0625 -8.0625,-8.0625z" fill="url(#color-1_77055_gr1)"></path><path d="M126.3125,80.625h5.375v37.625h-5.375z" fill="url(#color-2_77055_gr2)"></path><path d="M40.3125,80.625h5.375v37.625h-5.375z" fill="url(#color-3_77055_gr3)"></path><path d="M56.4375,69.875v59.125h59.125v-59.125zM99.4375,88.6875h-21.5v8.0625h16.125c2.96431,0 5.375,2.41069 5.375,5.375v8.0625c0,2.96431 -2.41069,5.375 -5.375,5.375h-5.375v5.375h-5.375v-5.375h-10.75v-5.375h21.5v-8.0625h-16.125c-2.96431,0 -5.375,-2.41069 -5.375,-5.375v-8.0625c0,-2.96431 2.41069,-5.375 5.375,-5.375h5.375v-5.375h5.375v5.375h10.75z" fill="url(#color-4_77055_gr4)"></path><path d="M86,59.125c-5.92862,0 -10.75,-4.82138 -10.75,-10.75c0,-5.92862 4.82138,-10.75 10.75,-10.75c5.92863,0 10.75,4.82138 10.75,10.75c0,5.92862 -4.82137,10.75 -10.75,10.75zM86,43c-2.96431,0 -5.375,2.41069 -5.375,5.375c0,2.96431 2.41069,5.375 5.375,5.375c2.96431,0 5.375,-2.41069 5.375,-5.375c0,-2.96431 -2.41069,-5.375 -5.375,-5.375zM108.84375,53.75c-2.22256,0 -4.03125,-1.80869 -4.03125,-4.03125c0,-2.22256 1.80869,-4.03125 4.03125,-4.03125c2.22256,0 4.03125,1.80869 4.03125,4.03125c0,2.22256 -1.80869,4.03125 -4.03125,4.03125zM108.84375,49.71606v0.00269zM63.15625,53.75c-2.22256,0 -4.03125,-1.80869 -4.03125,-4.03125c0,-2.22256 1.80869,-4.03125 4.03125,-4.03125c2.22256,0 4.03125,1.80869 4.03125,4.03125c0,2.22256 -1.80869,4.03125 -4.03125,4.03125zM63.15625,49.71606v0.00269zM150.5,69.875c2.96431,0 5.375,-2.39456 5.375,-5.34544v-1.29806c0,-1.72269 -0.84119,-3.34862 -2.30319,-4.39138l-60.03069,-40.40925c-4.58219,-3.08256 -10.49737,-3.08256 -15.07956,0l-60.08981,40.44956c-1.40825,1.00244 -2.24675,2.62838 -2.24675,4.35106v1.29806c0,2.95088 2.41069,5.34544 5.375,5.34544h8.0625v59.13037c-4.44513,0 -8.0625,3.61738 -8.0625,8.0625v3.182c-3.12019,1.11531 -5.375,4.06888 -5.375,7.568v8.05713h139.75v-8.05712c0,-3.49913 -2.25481,-6.45269 -5.375,-7.568v-3.182c0,-4.44513 -3.61738,-8.0625 -8.0625,-8.0625v-59.13038zM150.5,147.81788v2.68212h-129v-2.68212c0,-1.4835 1.204,-2.69288 2.6875,-2.69288h123.625c1.4835,0 2.6875,1.20937 2.6875,2.69288zM145.125,137.06788v2.68212h-118.25v-2.68212c0,-1.4835 1.204,-2.69288 2.6875,-2.69288h26.875h16.125h26.875h16.125h26.875c1.4835,0 2.6875,1.20937 2.6875,2.69288zM51.0625,80.625v37.625h-16.125v-37.625zM34.9375,75.25v-5.375h16.125v5.375zM51.0625,123.625v5.375h-16.125v-5.375zM56.4375,129v-59.125h5.375h10.75h5.375h16.125h5.375h5.375h10.75v59.125h-10.75h-5.375h-5.375h-16.125h-5.375h-10.75zM137.0625,80.625v37.625h-16.125v-37.625zM120.9375,75.25v-5.375h16.125v5.375zM137.0625,123.625v5.375h-16.125v-5.375zM115.5625,64.5h-16.125h-26.875v0.0215l-16.125,0.00269v-0.02419h-26.875h-8.0625l-0.06719,-1.21475l60.03069,-40.40387c1.376,-0.92987 2.95625,-1.38944 4.5365,-1.38944c1.58025,0 3.1605,0.46494 4.5365,1.39481l59.9635,40.33938l0.00806,1.27388c0,0 -0.00269,0 -0.00806,0h-8.0625z" fill="url(#color-5_77055_gr5)"></path></g></g></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="row">
|
||||
<div class="col-auto p-r-10">
|
||||
<div class="font-heading fs-12">{{singlePayment.bank.holder_name}}
|
||||
<span class="text-complete m-l-5 bold">{{[3, 4].includes(singlePayment.bank.type) ? singlePayment.bank.account_no : singlePayment.bank.account_no.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim()}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" v-if="![3, 4].includes(singlePayment.bank.type)">
|
||||
<div class="col-auto p-r-10">
|
||||
<div class="font-heading fs-10 small">{{singlePayment.bank.bank_name}} <span class="m-l-5">({{singlePayment.bank.bank_branch}})</span> <span class="m-l-5">({{singlePayment.bank.swift}})</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-auto p-r-10">
|
||||
<span class="fs-10">
|
||||
{{singlePayment.bill_no }} -
|
||||
</span>
|
||||
<span class="fs-10 bold">{{singlePayment.original_currency.short_code}} {{(Math.round((singlePayment.original_amount - singlePayment.refunded_amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" v-if="!isEditButtonHidden">
|
||||
<div class="col-auto p-r-10">
|
||||
<span class="fs-10">
|
||||
<button class="btn btn-xs btn-outline-danger b-rad-none m-r-5 requestModal" :data-type="'updateBankMetadata-' + singlePayment.bill_no">
|
||||
<span>Reset to Default</span>
|
||||
</button>
|
||||
<modal-component class="animate__animated animate__fast animate__fadeIn" :type="'updateBankMetadata-'+ singlePayment.bill_no">
|
||||
<general-confirmation-form-component
|
||||
contentText="Are you sure you want to reset to default"
|
||||
modalType="delete"
|
||||
class="text-center"
|
||||
:params="getPayloadToResetDefault(singlePayment, item)"
|
||||
:apiRoute="route('api.bank.update.metadata', singlePayment.bank.id)"
|
||||
apiMethod="post"
|
||||
:section="section"
|
||||
>
|
||||
</general-confirmation-form-component>
|
||||
</modal-component>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Default Recipient Bank from Booking -->
|
||||
<div class="row align-items-center" v-else>
|
||||
<div class="col-auto p-r-0">
|
||||
<img v-if="item.service.id === 4" src="/images/1688_logo.png" alt="" width="40">
|
||||
<img v-else-if="item.service.id === 11" src="/images/alipay_logo.png" alt="" width="40">
|
||||
<div v-else class="padding-5 bg-master-light">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||
width="30" height="30"
|
||||
viewBox="0 0 172 172"
|
||||
style=" fill:#000000;"><defs><linearGradient x1="86" y1="38.97413" x2="86" y2="57.78663" gradientUnits="userSpaceOnUse" id="color-1_77055_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="129" y1="77.49138" x2="129" y2="121.38631" gradientUnits="userSpaceOnUse" id="color-2_77055_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="43" y1="77.49138" x2="43" y2="121.38631" gradientUnits="userSpaceOnUse" id="color-3_77055_gr3"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="64.94881" x2="86" y2="133.92888" gradientUnits="userSpaceOnUse" id="color-4_77055_gr4"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="16.11963" x2="86" y2="155.875" gradientUnits="userSpaceOnUse" id="color-5_77055_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><path d="M86,40.31787c-4.4528,0 -8.0625,3.6097 -8.0625,8.0625c0,4.4528 3.6097,8.0625 8.0625,8.0625c4.4528,0 8.0625,-3.6097 8.0625,-8.0625c0,-4.4528 -3.6097,-8.0625 -8.0625,-8.0625z" fill="url(#color-1_77055_gr1)"></path><path d="M126.3125,80.625h5.375v37.625h-5.375z" fill="url(#color-2_77055_gr2)"></path><path d="M40.3125,80.625h5.375v37.625h-5.375z" fill="url(#color-3_77055_gr3)"></path><path d="M56.4375,69.875v59.125h59.125v-59.125zM99.4375,88.6875h-21.5v8.0625h16.125c2.96431,0 5.375,2.41069 5.375,5.375v8.0625c0,2.96431 -2.41069,5.375 -5.375,5.375h-5.375v5.375h-5.375v-5.375h-10.75v-5.375h21.5v-8.0625h-16.125c-2.96431,0 -5.375,-2.41069 -5.375,-5.375v-8.0625c0,-2.96431 2.41069,-5.375 5.375,-5.375h5.375v-5.375h5.375v5.375h10.75z" fill="url(#color-4_77055_gr4)"></path><path d="M86,59.125c-5.92862,0 -10.75,-4.82138 -10.75,-10.75c0,-5.92862 4.82138,-10.75 10.75,-10.75c5.92863,0 10.75,4.82138 10.75,10.75c0,5.92862 -4.82137,10.75 -10.75,10.75zM86,43c-2.96431,0 -5.375,2.41069 -5.375,5.375c0,2.96431 2.41069,5.375 5.375,5.375c2.96431,0 5.375,-2.41069 5.375,-5.375c0,-2.96431 -2.41069,-5.375 -5.375,-5.375zM108.84375,53.75c-2.22256,0 -4.03125,-1.80869 -4.03125,-4.03125c0,-2.22256 1.80869,-4.03125 4.03125,-4.03125c2.22256,0 4.03125,1.80869 4.03125,4.03125c0,2.22256 -1.80869,4.03125 -4.03125,4.03125zM108.84375,49.71606v0.00269zM63.15625,53.75c-2.22256,0 -4.03125,-1.80869 -4.03125,-4.03125c0,-2.22256 1.80869,-4.03125 4.03125,-4.03125c2.22256,0 4.03125,1.80869 4.03125,4.03125c0,2.22256 -1.80869,4.03125 -4.03125,4.03125zM63.15625,49.71606v0.00269zM150.5,69.875c2.96431,0 5.375,-2.39456 5.375,-5.34544v-1.29806c0,-1.72269 -0.84119,-3.34862 -2.30319,-4.39138l-60.03069,-40.40925c-4.58219,-3.08256 -10.49737,-3.08256 -15.07956,0l-60.08981,40.44956c-1.40825,1.00244 -2.24675,2.62838 -2.24675,4.35106v1.29806c0,2.95088 2.41069,5.34544 5.375,5.34544h8.0625v59.13037c-4.44513,0 -8.0625,3.61738 -8.0625,8.0625v3.182c-3.12019,1.11531 -5.375,4.06888 -5.375,7.568v8.05713h139.75v-8.05712c0,-3.49913 -2.25481,-6.45269 -5.375,-7.568v-3.182c0,-4.44513 -3.61738,-8.0625 -8.0625,-8.0625v-59.13038zM150.5,147.81788v2.68212h-129v-2.68212c0,-1.4835 1.204,-2.69288 2.6875,-2.69288h123.625c1.4835,0 2.6875,1.20937 2.6875,2.69288zM145.125,137.06788v2.68212h-118.25v-2.68212c0,-1.4835 1.204,-2.69288 2.6875,-2.69288h26.875h16.125h26.875h16.125h26.875c1.4835,0 2.6875,1.20937 2.6875,2.69288zM51.0625,80.625v37.625h-16.125v-37.625zM34.9375,75.25v-5.375h16.125v5.375zM51.0625,123.625v5.375h-16.125v-5.375zM56.4375,129v-59.125h5.375h10.75h5.375h16.125h5.375h5.375h10.75v59.125h-10.75h-5.375h-5.375h-16.125h-5.375h-10.75zM137.0625,80.625v37.625h-16.125v-37.625zM120.9375,75.25v-5.375h16.125v5.375zM137.0625,123.625v5.375h-16.125v-5.375zM115.5625,64.5h-16.125h-26.875v0.0215l-16.125,0.00269v-0.02419h-26.875h-8.0625l-0.06719,-1.21475l60.03069,-40.40387c1.376,-0.92987 2.95625,-1.38944 4.5365,-1.38944c1.58025,0 3.1605,0.46494 4.5365,1.39481l59.9635,40.33938l0.00806,1.27388c0,0 -0.00269,0 -0.00806,0h-8.0625z" fill="url(#color-5_77055_gr5)"></path></g></g></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="row">
|
||||
<div class="col-auto p-r-10">
|
||||
<div class="font-heading fs-12">{{item.bank.holder_name}}
|
||||
<span class="text-complete m-l-5 bold">{{[3, 4].includes(item.bank.type) ? item.bank.account_no : item.bank.account_no.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim()}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" v-if="![3, 4].includes(item.bank.type)">
|
||||
<div class="col-auto p-r-10">
|
||||
<div class="font-heading fs-10 small">{{item.bank.bank_name}} <span class="m-l-5">({{item.bank.bank_branch}})</span> <span class="m-l-5">({{item.bank.swift}})</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-auto p-r-10">
|
||||
<span class="fs-10">
|
||||
{{singlePayment.bill_no }} -
|
||||
</span>
|
||||
<span class="fs-10 bold">{{singlePayment.original_currency.short_code}} {{(Math.round((singlePayment.original_amount - singlePayment.refunded_amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-auto p-r-10">
|
||||
<span class="fs-10">
|
||||
<span class="badge badge-secondary">DEFAULT</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row m-t-20" v-if="!isEditButtonHidden">
|
||||
<div class="col">
|
||||
<div class="btn btn-sm btn-block b-rad-none shadow-sm pointer requestModal" :data-type="'editRecipientDetailsFor-' + singlePayment.bill_no" :id="'edit-recipient-details-' + singlePayment.bill_no" :name="'edit-recipient-details-' + singlePayment.bill_no">EDIT FOR PAYMENT</div>
|
||||
</div>
|
||||
<modal-component id="select-account-modal" class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" :type="'editRecipientDetailsFor-' + singlePayment.bill_no" size="large">
|
||||
<booking-payment-recipient-edit-component :data="getRecipientBanks(singlePayment)" :section="section" v-on:updatedBankDetails="updatedBankDetails"></booking-payment-recipient-edit-component>
|
||||
</modal-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import componentHandler from '../../../general/mixins/componentHandler';
|
||||
export default {
|
||||
props : {
|
||||
section: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
isEditButtonHidden: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
recipientBanks: {
|
||||
company: this.data.company,
|
||||
serviceType: {
|
||||
status: false,
|
||||
id: this.data.service.id,
|
||||
name: this.data.service.name,
|
||||
currencies: this.data.service.configurations.currencies,
|
||||
selectedCurrency: this.data.service.configurations.currencies[0]
|
||||
},
|
||||
bankAccount: this.data.bank,
|
||||
bankAccountDefault: this.data.bank,
|
||||
recipientBanks: this.data.company.recipient_banks.accounts,
|
||||
bookingId: this.data.id,
|
||||
billNo: '',
|
||||
transactionId: 0,
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getRecipientBanks(payment = null) {
|
||||
const recipientBanksAmended = { ...this.recipientBanks };
|
||||
|
||||
if (payment) {
|
||||
if(payment.bank){
|
||||
const currentBank = { ... payment.bank };
|
||||
recipientBanksAmended.bankAccount = currentBank;
|
||||
}
|
||||
else {
|
||||
const currentBank = { ... this.data.bank };
|
||||
recipientBanksAmended.bankAccount = currentBank;
|
||||
}
|
||||
recipientBanksAmended.billNo = payment.bill_no;
|
||||
recipientBanksAmended.transactionId = payment.id;
|
||||
}
|
||||
|
||||
return recipientBanksAmended;
|
||||
},
|
||||
updatedBankDetails(bank, transactionId){ //cief todo: 66 - this need to move to vuex, too many levels of passings between parent and child
|
||||
const index = this.item.payment_history.findIndex(payment => payment.id === transactionId);
|
||||
if (index !== -1) {
|
||||
this.item.payment_history[index].bank = { ... bank };
|
||||
}
|
||||
},
|
||||
getPayloadToResetDefault(payment, booking){
|
||||
// const filter = {transactionId: payment.id, bookingBankId: booking.bank.id};
|
||||
const filter = {};
|
||||
filter['transactionId'] = payment.id;
|
||||
filter['bookingBankId'] = booking.bank.id;
|
||||
return filter;
|
||||
},
|
||||
},
|
||||
mixins: [componentHandler]
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div class="row align-items-center m-b-15 parentContainer bg-master-lighter p-t-10 p-b-10">
|
||||
<div class="col">
|
||||
<div class="row m-b-5">
|
||||
<div class="col">
|
||||
<div class="font-heading all-caps fs-10 muted">Recipient Bank Details</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto p-r-0">
|
||||
<img v-if="item.service.id === 4" src="/images/1688_logo.png" alt="" width="40">
|
||||
<img v-else-if="item.service.id === 11" src="/images/alipay_logo.png" alt="" width="40">
|
||||
<div v-else class="padding-5 bg-master-light">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||
width="30" height="30"
|
||||
viewBox="0 0 172 172"
|
||||
style=" fill:#000000;"><defs><linearGradient x1="86" y1="38.97413" x2="86" y2="57.78663" gradientUnits="userSpaceOnUse" id="color-1_77055_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="129" y1="77.49138" x2="129" y2="121.38631" gradientUnits="userSpaceOnUse" id="color-2_77055_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="43" y1="77.49138" x2="43" y2="121.38631" gradientUnits="userSpaceOnUse" id="color-3_77055_gr3"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="64.94881" x2="86" y2="133.92888" gradientUnits="userSpaceOnUse" id="color-4_77055_gr4"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="16.11963" x2="86" y2="155.875" gradientUnits="userSpaceOnUse" id="color-5_77055_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><path d="M86,40.31787c-4.4528,0 -8.0625,3.6097 -8.0625,8.0625c0,4.4528 3.6097,8.0625 8.0625,8.0625c4.4528,0 8.0625,-3.6097 8.0625,-8.0625c0,-4.4528 -3.6097,-8.0625 -8.0625,-8.0625z" fill="url(#color-1_77055_gr1)"></path><path d="M126.3125,80.625h5.375v37.625h-5.375z" fill="url(#color-2_77055_gr2)"></path><path d="M40.3125,80.625h5.375v37.625h-5.375z" fill="url(#color-3_77055_gr3)"></path><path d="M56.4375,69.875v59.125h59.125v-59.125zM99.4375,88.6875h-21.5v8.0625h16.125c2.96431,0 5.375,2.41069 5.375,5.375v8.0625c0,2.96431 -2.41069,5.375 -5.375,5.375h-5.375v5.375h-5.375v-5.375h-10.75v-5.375h21.5v-8.0625h-16.125c-2.96431,0 -5.375,-2.41069 -5.375,-5.375v-8.0625c0,-2.96431 2.41069,-5.375 5.375,-5.375h5.375v-5.375h5.375v5.375h10.75z" fill="url(#color-4_77055_gr4)"></path><path d="M86,59.125c-5.92862,0 -10.75,-4.82138 -10.75,-10.75c0,-5.92862 4.82138,-10.75 10.75,-10.75c5.92863,0 10.75,4.82138 10.75,10.75c0,5.92862 -4.82137,10.75 -10.75,10.75zM86,43c-2.96431,0 -5.375,2.41069 -5.375,5.375c0,2.96431 2.41069,5.375 5.375,5.375c2.96431,0 5.375,-2.41069 5.375,-5.375c0,-2.96431 -2.41069,-5.375 -5.375,-5.375zM108.84375,53.75c-2.22256,0 -4.03125,-1.80869 -4.03125,-4.03125c0,-2.22256 1.80869,-4.03125 4.03125,-4.03125c2.22256,0 4.03125,1.80869 4.03125,4.03125c0,2.22256 -1.80869,4.03125 -4.03125,4.03125zM108.84375,49.71606v0.00269zM63.15625,53.75c-2.22256,0 -4.03125,-1.80869 -4.03125,-4.03125c0,-2.22256 1.80869,-4.03125 4.03125,-4.03125c2.22256,0 4.03125,1.80869 4.03125,4.03125c0,2.22256 -1.80869,4.03125 -4.03125,4.03125zM63.15625,49.71606v0.00269zM150.5,69.875c2.96431,0 5.375,-2.39456 5.375,-5.34544v-1.29806c0,-1.72269 -0.84119,-3.34862 -2.30319,-4.39138l-60.03069,-40.40925c-4.58219,-3.08256 -10.49737,-3.08256 -15.07956,0l-60.08981,40.44956c-1.40825,1.00244 -2.24675,2.62838 -2.24675,4.35106v1.29806c0,2.95088 2.41069,5.34544 5.375,5.34544h8.0625v59.13037c-4.44513,0 -8.0625,3.61738 -8.0625,8.0625v3.182c-3.12019,1.11531 -5.375,4.06888 -5.375,7.568v8.05713h139.75v-8.05712c0,-3.49913 -2.25481,-6.45269 -5.375,-7.568v-3.182c0,-4.44513 -3.61738,-8.0625 -8.0625,-8.0625v-59.13038zM150.5,147.81788v2.68212h-129v-2.68212c0,-1.4835 1.204,-2.69288 2.6875,-2.69288h123.625c1.4835,0 2.6875,1.20937 2.6875,2.69288zM145.125,137.06788v2.68212h-118.25v-2.68212c0,-1.4835 1.204,-2.69288 2.6875,-2.69288h26.875h16.125h26.875h16.125h26.875c1.4835,0 2.6875,1.20937 2.6875,2.69288zM51.0625,80.625v37.625h-16.125v-37.625zM34.9375,75.25v-5.375h16.125v5.375zM51.0625,123.625v5.375h-16.125v-5.375zM56.4375,129v-59.125h5.375h10.75h5.375h16.125h5.375h5.375h10.75v59.125h-10.75h-5.375h-5.375h-16.125h-5.375h-10.75zM137.0625,80.625v37.625h-16.125v-37.625zM120.9375,75.25v-5.375h16.125v5.375zM137.0625,123.625v5.375h-16.125v-5.375zM115.5625,64.5h-16.125h-26.875v0.0215l-16.125,0.00269v-0.02419h-26.875h-8.0625l-0.06719,-1.21475l60.03069,-40.40387c1.376,-0.92987 2.95625,-1.38944 4.5365,-1.38944c1.58025,0 3.1605,0.46494 4.5365,1.39481l59.9635,40.33938l0.00806,1.27388c0,0 -0.00269,0 -0.00806,0h-8.0625z" fill="url(#color-5_77055_gr5)"></path></g></g></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="row">
|
||||
<div class="col-auto p-r-10">
|
||||
<div class="font-heading fs-12">{{item.bank.holder_name}} <span class="text-complete m-l-5 bold">{{[3, 4].includes(item.bank.type) ? item.bank.account_no : item.bank.account_no.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim()}}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" v-if="![3, 4].includes(item.bank.type)">
|
||||
<div class="col-auto p-r-10">
|
||||
<div class="font-heading fs-10 small">{{item.bank.bank_name}} <span class="m-l-5">({{item.bank.bank_branch}})</span> <span class="m-l-5">({{item.bank.swift}})</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-t-20" v-if="!isEditButtonHidden">
|
||||
<div class="col">
|
||||
<div class="btn btn-sm btn-block b-rad-none shadow-sm pointer requestModal" data-type="transferSummary" id="transfer-now" name="transfer-now">EDIT DEFAULT</div>
|
||||
</div>
|
||||
<modal-component id="select-account-modal" class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="transferSummary" size="large">
|
||||
<booking-recipient-edit-component :data="recipientBanks" :section="section" v-on:updatedBankDetails="updatedBankDetails($event)"></booking-recipient-edit-component>
|
||||
</modal-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import componentHandler from '../../../general/mixins/componentHandler';
|
||||
export default {
|
||||
props : {
|
||||
section: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
isEditButtonHidden: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
recipientBanks: {
|
||||
company: this.data.company,
|
||||
serviceType: {
|
||||
status: false,
|
||||
id: this.data.service.id,
|
||||
name: this.data.service.name,
|
||||
currencies: this.data.service.configurations.currencies,
|
||||
selectedCurrency: this.data.service.configurations.currencies[0]
|
||||
},
|
||||
bankAccount: this.data.bank,
|
||||
bankAccountDefault: this.data.bank,
|
||||
recipientBanks: this.data.company.recipient_banks.accounts,
|
||||
bookingId: this.data.id
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
updatedBankDetails(bank){ //cief todo: 66 - this need to move to vuex, too many levels of passings between parent and child
|
||||
this.data.bank = { ... bank };
|
||||
},
|
||||
},
|
||||
mixins: [componentHandler]
|
||||
|
||||
}
|
||||
</script>
|
||||
@@ -4,7 +4,7 @@
|
||||
<button id="cancel-new-booking" name="cancel-new-booking" class="btn btn-lg btn-default bg-master-lightest b-rad-none all-caps fs-12" data-dismiss="modal" @click="cancelUpdateBooking()">Cancel</button>
|
||||
</div>
|
||||
<div class="col text-right" v-show="!isLoading && this.data.bankAccount">
|
||||
<button id="confirm-new-booking" name="confirm-new-booking" class="btn btn-lg btn-success b-rad-none all-caps fs-12" v-if="Object.keys(data.bankAccount).length" @click="submitForm()">SET SELECTED AS RECIPIENT AND CLOSE</button>
|
||||
<button id="confirm-new-booking" name="confirm-new-booking" class="btn btn-lg btn-success b-rad-none all-caps fs-12" v-if="Object.keys(data.bankAccount).length" @click="submitForm()">Update Recipient</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
required: true
|
||||
},
|
||||
params: {
|
||||
type: Array,
|
||||
type: Object,
|
||||
required: false
|
||||
},
|
||||
modalType: {
|
||||
|
||||
@@ -46,12 +46,18 @@
|
||||
<td>{{$transaction->currency_rate}}</td>
|
||||
<td>{{$transaction->currency->short_code}} {{number_format((float)$transaction->amount, 2, '.', '')}}</td>
|
||||
<td>
|
||||
Account Holder Name: {{$transaction->owner->owner->bank->holder_name}}
|
||||
<br>{{$transaction->owner->owner->bank->bank_name}}: {{$transaction->owner->owner->bank->account_no}}
|
||||
<br>Branch: {{$transaction->owner->owner->bank->bank_branch}}
|
||||
@php
|
||||
$bank = $transaction->owner->owner->bank;
|
||||
if($transaction->owner->bank){
|
||||
$bank = $transaction->owner->bank;
|
||||
}
|
||||
@endphp
|
||||
Account Holder Name: {{$bank->holder_name}}
|
||||
<br>{{$bank->bank_name}}: {{$bank->account_no}}
|
||||
<br>Branch: {{$bank->bank_branch}}
|
||||
@if($transaction->original_currency->short_code === 'USD')
|
||||
<br>Account Holder Address: {{$transaction->owner->owner->bank->reference}}
|
||||
<br>Swift Code: {{$transaction->owner->owner->bank->swift}}
|
||||
<br>Account Holder Address: {{$bank->reference}}
|
||||
<br>Swift Code: {{$bank->swift}}
|
||||
@endif
|
||||
<br>Bank in Amount: {{$transaction->original_currency->short_code}} {{$transaction->original_amount}}
|
||||
@if ($order_reference_no)
|
||||
|
||||
@@ -19,12 +19,18 @@
|
||||
</tr>
|
||||
@foreach($transactions as $transaction)
|
||||
<tr style="margin-bottom: 10px;">
|
||||
@php
|
||||
$bank = $transaction->owner->owner->bank;
|
||||
if($transaction->owner->bank){
|
||||
$bank = $transaction->owner->bank;
|
||||
}
|
||||
@endphp
|
||||
<td>{{$transaction->owner->owner->marking}}</td>
|
||||
<td>{{$transaction->owner->owner->company->reference}}</td>
|
||||
<td>{{$transaction->currency_rate}}</td>
|
||||
<td>{{$transaction->currency->short_code}} {{number_format((float)$transaction->amount, 2, '.', '')}}</td>
|
||||
<td>Account Holder Name: {{$transaction->owner->owner->bank->holder_name}}<br>{{$transaction->owner->owner->bank->bank_name}}: {{$transaction->owner->owner->bank->account_no}}
|
||||
<br>Branch: {{$transaction->owner->owner->bank->bank_branch}}@if($transaction->original_currency->short_code === 'USD')<br>Swift Code: {{$transaction->owner->owner->bank->swift}}@endif<br>Bank in Amount: {{$transaction->original_currency->short_code}} {{$transaction->original_amount}}</td>
|
||||
<td>Account Holder Name: {{$bank->holder_name}}<br>{{$bank->bank_name}}: {{$bank->account_no}}
|
||||
<br>Branch: {{$bank->bank_branch}}@if($transaction->original_currency->short_code === 'USD')<br>Swift Code: {{$bank->swift}}@endif<br>Bank in Amount: {{$transaction->original_currency->short_code}} {{$transaction->original_amount}}</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
|
||||
Reference in New Issue
Block a user