mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
omair saleh
298 lines
20 KiB
Vue
298 lines
20 KiB
Vue
<template>
|
|
<div class="row zig-zag-top">
|
|
<div class="col bg-white padding-25">
|
|
<div class="row p-b-20 b-b b-dashed m-b-20 b-grey">
|
|
<div class="col">
|
|
<div class="row m-b-5">
|
|
<div class="col">
|
|
<div class="font-heading all-caps bold fs-12">Transfer Summary</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-end">
|
|
<div class="col-2">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="font-heading fs-12">{{this.data.serviceType.name}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="font-heading fs-8 all-caps">Service Type</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-2">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="font-heading fs-14 bold text-primary">{{this.data.serviceType.selectedCurrency.short_code}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="font-heading fs-8 all-caps">Currency</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="font-heading fs-14 bold text-primary">{{(Math.round((parseFloat(this.data.amount.replace(",", "")) + Number.EPSILON) * 100) / 100).toFixed(2)}} {{this.parameters.type === 0 ? 'MYR': this.data.serviceType.selectedCurrency.short_code}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="font-heading fs-8 all-caps">Transfer Total</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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-12">Recipient Details</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<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-12 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-12 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="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="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 && !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 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-20">
|
|
<div class="col">
|
|
<div class="row m-b-15">
|
|
<div class="col">
|
|
<div class="font-heading all-caps bold fs-12">Transfer Amount and Charges</div>
|
|
<div class="font-heading fs-8 muted all-caps">** These are the rate as of <span class="text-danger">{{this.parameters.calculation.date}}</span>, all charges and rates are subject to change when making payment</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-end no-margin">
|
|
<div class="col">
|
|
<div class="row align-items-end bg-master-lightest p-t-10 p-b-10">
|
|
<div class="col">
|
|
<div class="font-heading fs-12 all-caps">Amount you are Transferring</div>
|
|
</div>
|
|
<div class="col-1 no-padding text-center">
|
|
<div class="font-heading fs-12 bold">{{this.parameters.type === 0 ? 'MYR': parameters.serviceType.selectedCurrency.short_code}}</div>
|
|
</div>
|
|
<div class="col-3 text-right">
|
|
<div class="font-heading fs-12 bold">{{(Math.round((parseFloat(this.parameters.amount.replace(",", ""))+ Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-end p-t-10 p-b-10">
|
|
<div class="col">
|
|
<div class="font-heading fs-12 all-caps text-primary">Exchange Rate</div>
|
|
</div>
|
|
<div class="col-1 no-padding text-center">
|
|
<div class="font-heading fs-12"></div>
|
|
</div>
|
|
<div class="col-3 text-right">
|
|
<div class="font-heading fs-12 text-primary bold">{{(Math.round((this.parameters.calculation.rate + Number.EPSILON) * 100000) / 100000).toFixed(5)}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-end bg-master-lightest p-t-10 p-b-10">
|
|
<div class="col">
|
|
<div class="font-heading fs-12 all-caps">Money Transfer Fee</div>
|
|
</div>
|
|
<div class="col-1 no-padding text-center">
|
|
<div class="font-heading fs-12">MYR</div>
|
|
</div>
|
|
<div class="col-3 text-right">
|
|
<div class="font-heading fs-12">{{(Math.round((this.parameters.calculation.service_charge + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-end p-t-10 p-b-10">
|
|
<div class="col text-right">
|
|
<div class="font-heading fs-12 all-caps">Sub-Total</div>
|
|
</div>
|
|
<div class="col-1 no-padding text-center">
|
|
<div class="font-heading fs-12">MYR</div>
|
|
</div>
|
|
<div class="col-3 text-right">
|
|
<div class="font-heading fs-12">{{(Math.round((this.parameters.calculation.sub_total + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-end bg-master-lightest p-t-10 p-b-10">
|
|
<div class="col text-right">
|
|
<div class="font-heading fs-12 all-caps">Tax</div>
|
|
</div>
|
|
<div class="col-1 no-padding text-center">
|
|
<div class="font-heading fs-12">{{Math.round((this.parameters.calculation.tax + Number.EPSILON) * 100) / 100}}%</div>
|
|
</div>
|
|
<div class="col-3 text-right">
|
|
<div class="font-heading fs-12">{{(Math.round((this.parameters.calculation.tax_total + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-end p-t-10 p-b-10">
|
|
<div class="col text-right">
|
|
<div class="font-heading all-caps bold">Amount you are Paying</div>
|
|
</div>
|
|
<div class="col-1 no-padding text-center">
|
|
<div class="font-heading bold">MYR</div>
|
|
</div>
|
|
<div class="col-3 text-right">
|
|
<div class="font-heading text-success bold">{{(Math.round((this.parameters.calculation.total + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<confirm-booking-component :section="section" :data="data" v-if="parameters.bankAccount"></confirm-booking-component>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import FormHandler from '../../../general/mixins/formHandler';
|
|
import ConfirmBookingComponent from "../forms/confirmBookingComponent";
|
|
export default {
|
|
components: {ConfirmBookingComponent},
|
|
data(){
|
|
return {
|
|
createBank: false,
|
|
recipientBanks: [],
|
|
dropdownStatus: false,
|
|
account_no: '',
|
|
}
|
|
},
|
|
computed: {
|
|
formDisabled(){
|
|
return !!Object.keys(this.parameters.bankAccount).length;
|
|
}
|
|
},
|
|
created(){
|
|
this.recipientBanks = this.data.recipientBanks;
|
|
},
|
|
methods: {
|
|
AccountNumber(bank){
|
|
return bank.account_no.startsWith(this.account_no)
|
|
},
|
|
updateBank(bank){
|
|
this.selectBank(bank);
|
|
this.recipientBanks.push(bank);
|
|
this.parameters.bankAccount = bank;
|
|
},
|
|
selectBank(bank){
|
|
this.account_no = bank.account_no;
|
|
this.createBank = true;
|
|
this.parameters.bankAccount = bank;
|
|
this.dropdownStatus = false;
|
|
},
|
|
clearAccount(){
|
|
this.createBank = false;
|
|
this.account_no = '';
|
|
this.parameters.bankAccount = {};
|
|
}
|
|
},
|
|
mixins: [FormHandler]
|
|
}
|
|
</script> |