mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
fix recipient bank account flow for booking
This commit is contained in:
omair saleh
+1
-1
@@ -122,7 +122,7 @@ form legend {
|
||||
&[readonly],
|
||||
fieldset[disabled] &{
|
||||
background: mix($color-master-lighter, #fff, 50%);
|
||||
color: rgba($color-master, .23);
|
||||
//color: rgba($color-master, .23);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<div class="col">
|
||||
<validation-wrapper-component :validator="$v.parameters.reference">
|
||||
<label>Reference</label>
|
||||
<input type="text" class="form-control" v-model="parameters.reference">
|
||||
<input type="text" class="form-control" v-model="parameters.reference" :disabled="disabled">
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
@@ -26,7 +26,7 @@
|
||||
<div class="col">
|
||||
<validation-wrapper-component :validator="$v.parameters.holder_name">
|
||||
<label>Account Holder Name</label>
|
||||
<input type="text" class="form-control" v-model="parameters.holder_name">
|
||||
<input type="text" class="form-control" v-model="parameters.holder_name" :disabled="disabled">
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
@@ -34,7 +34,7 @@
|
||||
<div class="col">
|
||||
<validation-wrapper-component :validator="$v.parameters.account_no">
|
||||
<label>Account No.</label>
|
||||
<input type="text" class="form-control" v-model="parameters.account_no">
|
||||
<input type="text" class="form-control" v-model="parameters.account_no" :disabled="disabled">
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
@@ -44,7 +44,7 @@
|
||||
<div class="col">
|
||||
<validation-wrapper-component :validator="$v.parameters.bank_name">
|
||||
<label>Bank Name</label>
|
||||
<input type="text" class="form-control" v-model="parameters.bank_name">
|
||||
<input type="text" class="form-control" v-model="parameters.bank_name" :disabled="disabled">
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
@@ -52,7 +52,7 @@
|
||||
<div class="col">
|
||||
<validation-wrapper-component :validator="$v.parameters.bank_branch">
|
||||
<label>Bank Branch / 所在地</label>
|
||||
<input type="text" class="form-control" v-model="parameters.bank_branch">
|
||||
<input type="text" class="form-control" v-model="parameters.bank_branch" :disabled="disabled">
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
@@ -60,13 +60,13 @@
|
||||
<div class="col p-r-5">
|
||||
<validation-wrapper-component :validator="$v.parameters.swift">
|
||||
<label>Swift</label>
|
||||
<input type="text" class="form-control" v-model="parameters.swift">
|
||||
<input type="text" class="form-control" v-model="parameters.swift" :disabled="disabled">
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
<div class="col p-l-5">
|
||||
<validation-wrapper-component :validator="$v.parameters.snap">
|
||||
<label>Snap</label>
|
||||
<input type="text" class="form-control" v-model="parameters.snap">
|
||||
<input type="text" class="form-control" v-model="parameters.snap" :disabled="disabled">
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
@@ -82,9 +82,9 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col p-r-5">
|
||||
<div class="btn btn-sm btn-default bg-master-lightest btn-block b-rad-none" :data-dismiss="closable ? 'modal' : ''" @click="$emit('close')">Cancel</div>
|
||||
<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">
|
||||
<div class="col p-l-5" v-if="!disabled">
|
||||
<div class="btn btn-sm btn-success btn-block b-rad-none" @click="submitForm()">Add Account</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -110,6 +110,10 @@
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
country_id: {
|
||||
type: Number,
|
||||
default: 1
|
||||
|
||||
+103
-76
@@ -58,63 +58,52 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row m-b-10" v-if="data.recipientBanks.length > 0 && !createBank">
|
||||
<div class="row m-b-10">
|
||||
<div class="col">
|
||||
<div class="row m-l-0 m-r-0 m-b-5">
|
||||
<div class="col-auto p-l-0">
|
||||
<div class="row align-items-center justify-content-center">
|
||||
<div class="col-auto">
|
||||
<div class="fs-10 all-caps">Recipient Bank Account</div>
|
||||
</div>
|
||||
<div class="col-auto text-right lh-10 p-r-0 p-l-0 hide">
|
||||
<i class="fa fa-info-circle fs-10 lh-15 hint-text"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-8">
|
||||
<div class="row">
|
||||
<div class="col p-r-0">
|
||||
<div class="btn btn-xs btn-default bg-transparent text-master btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="parameters.bankAccount.status = !parameters.bankAccount.status">
|
||||
<div class="row">
|
||||
<div class="col p-t-10 p-b-5 ">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="font-heading bold fs-13 lh-15">{{parameters.bankAccount.reference ? parameters.bankAccount.reference + ' - ':''}}{{parameters.bankAccount.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">{{parameters.bankAccount.account_no}}</b> {{parameters.bankAccount.bank_name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto b-l b-grey ">
|
||||
<div class="row h-100 align-items-center">
|
||||
<div class="col">
|
||||
<i class="fa text-primary" :class="[{'fa-angle-down': !parameters.bankAccount.status}, {'fa-angle-up': parameters.bankAccount.status}]"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!--<div class="row m-l-0 m-r-0 m-b-5">-->
|
||||
<!--<div class="col-auto p-l-0">-->
|
||||
<!--<div class="row align-items-center justify-content-center">-->
|
||||
<!--<div class="col-auto">-->
|
||||
<!--<div class="fs-10 all-caps">Recipient Bank Account</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="col-auto text-right lh-10 p-r-0 p-l-0 hide">-->
|
||||
<!--<i class="fa fa-info-circle fs-10 lh-15 hint-text"></i>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<div class="row parentContainer">
|
||||
<div class="col">
|
||||
<div class="row" v-show="!createBank">
|
||||
<div class="col-7 p-r-0">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="form-group no-margin form-group-default">
|
||||
<label>Account No.</label>
|
||||
<input type="text" class="form-control" v-model="account_no" @keyup="parameters.bankAccount = {}" @focus="dropdownStatus = true">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative w-100">
|
||||
<div class="absolute w-100 b-l b-b b-r b-grey" :class="[{'hide': !parameters.bankAccount.status}]" 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" v-bind:key="bank.id" >
|
||||
<div class="col b-b b-grey p-t-10 p-b-10 pointer p-t-10 p-b-10" :class="[{'bg-master-lightest': parameters.bankAccount.id === bank.id}, {'text-master': parameters.bankAccount.id === bank.id}, {'hover-primary': parameters.bankAccount.id !== bank.id}, {'pointer': parameters.bankAccount.id !== bank.id}]" @click="selectBank(bank)">
|
||||
<div class="row align-items-center justify-content-center">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<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(AccountNumber)" v-bind:key="bank.id" >
|
||||
<div class="col b-b b-grey p-t-10 p-b-10 pointer p-t-10 p-b-10" :class="[{'bg-master-lightest': parameters.bankAccount.id === bank.id}, {'text-master': parameters.bankAccount.id === bank.id}, {'hover-primary': parameters.bankAccount.id !== bank.id}, {'pointer': parameters.bankAccount.id !== bank.id}]" @click="selectBank(bank)">
|
||||
<div class="row align-items-center justify-content-center">
|
||||
<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 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>
|
||||
@@ -126,26 +115,51 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto p-l-0" v-show="!createBank && account_no && !Object.keys(parameters.bankAccount).length">
|
||||
<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">
|
||||
<div class="col">
|
||||
<bank-account-form-component section="customerProfileSection" :disabled="formDisabled" :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)" :closable=false v-on:close="clearAccount()"></bank-account-form-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row parentContainer">
|
||||
<div class="col">
|
||||
<div class="row" v-show="!createBank">
|
||||
<div class="col">
|
||||
<button class="btn btn-xs btn-outline-primary b-rad-none" @click="createBank = !createBank">
|
||||
<i class="fa fa-plus m-r-5"></i>
|
||||
Add New Recipient
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" v-show="createBank">
|
||||
<div class="col">
|
||||
<bank-account-form-component section="customerProfileSection" :company_id="data.company.id" :country_id="2" :type="2" v-on:createdBank="updateBank($event)" :closable=false v-on:close="createBank = !createBank"></bank-account-form-component>
|
||||
<!--<div class="row">-->
|
||||
<!--<div class="col-sm-12 col-md-8">-->
|
||||
<!--<div class="row">-->
|
||||
<!--<div class="col p-r-0">-->
|
||||
<!--<div class="btn btn-xs btn-default bg-transparent text-master btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="parameters.bankAccount.status = !parameters.bankAccount.status">-->
|
||||
<!--<div class="row">-->
|
||||
<!--<div class="col p-t-10 p-b-5 ">-->
|
||||
<!--<div class="row">-->
|
||||
<!--<div class="col">-->
|
||||
<!--<div class="font-heading bold fs-13 lh-15">{{parameters.bankAccount.reference ? parameters.bankAccount.reference + ' - ':''}}{{parameters.bankAccount.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">{{parameters.bankAccount.account_no}}</b> {{parameters.bankAccount.bank_name}}</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="col-auto b-l b-grey ">-->
|
||||
<!--<div class="row h-100 align-items-center">-->
|
||||
<!--<div class="col">-->
|
||||
<!--<i class="fa text-primary" :class="[{'fa-angle-down': !parameters.bankAccount.status}, {'fa-angle-up': parameters.bankAccount.status}]"></i>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -245,26 +259,39 @@
|
||||
data(){
|
||||
return {
|
||||
createBank: false,
|
||||
recipientBanks: []
|
||||
recipientBanks: [],
|
||||
dropdownStatus: false,
|
||||
account_no: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formDisabled(){
|
||||
return !!Object.keys(this.parameters.bankAccount).length;
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.createBank = !this.data.recipientBanks.length;
|
||||
this.recipientBanks = this.data.recipientBanks;
|
||||
if(this.parameters.bankAccount){
|
||||
this.parameters.bankAccount.status = false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
AccountNumber(bank){
|
||||
return bank.account_no.startsWith(this.account_no)
|
||||
},
|
||||
updateBank(bank){
|
||||
this.selectBank(bank);
|
||||
this.recipientBanks.push(bank);
|
||||
this.createBank = false;
|
||||
this.parameters.bankAccount = bank;
|
||||
},
|
||||
selectBank(bank){
|
||||
this.account_no = bank.account_no;
|
||||
this.createBank = true;
|
||||
this.parameters.bankAccount = bank;
|
||||
this.parameters.bankAccount.status = false;
|
||||
this.dropdownStatus = false;
|
||||
},
|
||||
clearAccount(){
|
||||
this.createBank = false;
|
||||
this.account_no = '';
|
||||
this.parameters.bankAccount = {};
|
||||
}
|
||||
},
|
||||
mixins: [FormHandler]
|
||||
}
|
||||
|
||||
@@ -181,7 +181,7 @@
|
||||
status: false
|
||||
};
|
||||
|
||||
this.summary.bankAccount = this.data.recipient_banks.default ? this.data.recipient_banks.default : this.data.recipient_banks.accounts[0];
|
||||
this.summary.bankAccount = {};
|
||||
this.summary.recipientBanks = this.data.recipient_banks.accounts;
|
||||
|
||||
},
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<button class="btn btn-lg btn-default bg-master-lightest b-rad-none all-caps fs-12" data-dismiss="modal">Cancel</button>
|
||||
</div>
|
||||
<div class="col text-right">
|
||||
<button class="btn btn-lg btn-success b-rad-none all-caps fs-12" @click="submitForm()">Confirm & Proceed</button>
|
||||
<button class="btn btn-lg btn-success b-rad-none all-caps fs-12" v-if="Object.keys(data.bankAccount).length" @click="submitForm()">Confirm & Proceed</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user