mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
Fairuz
293 lines
16 KiB
Vue
293 lines
16 KiB
Vue
<template>
|
|
<div class="row m-b-20">
|
|
<div class="col">
|
|
<div class="row m-b-5 animate__animated animate__fadeInUpBig animate__fast" v-if="error">
|
|
<div class="col">
|
|
<small class="bold fs-10 text-danger">{{error}}</small>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-15" v-show="calculation.date && !error">
|
|
<div class="col padding-15 bg-master-lightest text-center m-l-15 m-r-15">
|
|
<div class="fs-14 muted" >The recipient will receive the transfer amount by <br><span class="bold text-success">{{ this.calculation.receive_date }}</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row m-l-0 m-r-0">
|
|
<div class="col no-padding">
|
|
<div class="form-group form-group-default m-b-0">
|
|
<label>Recipient Gets</label>
|
|
<input id="cc_get" name="cc_get" type="text" placeholder="0.00" value="0" class="form-control" v-model="recipientInput" @keyup="updateAmount($event, 1)" v-money="money">
|
|
</div>
|
|
</div>
|
|
<div class="col-auto bg-primary text-white">
|
|
<div class="row h-100 align-items-center">
|
|
<div class="col-auto p-r-0">
|
|
<span class="flag-icon fs-14" :class="'flag-icon-'+serviceType.selectedCurrency.country.short_code.toLowerCase()"></span>
|
|
</div>
|
|
<div class="col p-l-5 p-r-20">
|
|
{{serviceType.selectedCurrency.short_code}}
|
|
</div>
|
|
<div class="col-auto h-100 pointer" @click="recipientMenu = !recipientMenu">
|
|
<div class="row align-items-center bg-primary-light h-100">
|
|
<div class="col ">
|
|
<i class="fa fa-angle-down fs-14 m-t-5" :class="[{'fa-angle-down': !recipientMenu}, {'fa-angle-up': recipientMenu}]"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative w-100 text-master">
|
|
<div class="absolute w-100 b-l b-b b-r b-success" :class="[{'hide': !recipientMenu}]" 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="currency in serviceType.currencies" v-bind:key="currency.id" >
|
|
<div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10 " :class="[{'bg-primary-light': serviceType.selectedCurrency.id === currency.id}, {'text-white': serviceType.selectedCurrency.id === currency.id}, {'hover-primary': serviceType.selectedCurrency.id !== currency.id}, {'pointer': serviceType.selectedCurrency.id !== currency.id}]" @click="UpdateCurrency(currency)">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col-auto p-r-5 p-l-0">
|
|
<span class="flag-icon fs-14" :class="'flag-icon-'+currency.country.short_code.toLowerCase()"></span>
|
|
</div>
|
|
<div class="col-auto p-l-5">
|
|
<div class="font-heading fs-12">
|
|
{{currency.short_code}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row m-l-0 m-r-0 relative p-b-15 p-t-15">
|
|
<div class="absolute bullet-connector hint-text"></div>
|
|
<div class="col">
|
|
<div class="row align-items-center">
|
|
<div class="col-1 p-r-25">
|
|
<div class="bg-master-light btn-rounded hint-text" style="width: 8px; height: 8px;"></div>
|
|
</div>
|
|
<div class="col-4 p-l-0 fs-12 bold lh-20 hide">MYR {{(Math.round((this.calculation.service_charge + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
|
|
<div class="col-auto all-caps fs-10 hide">Transfer Fee</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-l-0 m-r-0 relative p-b-15">
|
|
<div class="absolute bullet-connector hint-text"></div>
|
|
<div class="col">
|
|
<div class="row align-items-center">
|
|
<div class="col-1 p-r-25">
|
|
<div class="bg-master-light btn-rounded hint-text" style="width: 8px; height: 8px;"></div>
|
|
</div>
|
|
<div class="col-4 p-l-0 fs-12 bold lh-20 hide">MYR {{(Math.round((this.calculation.total + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
|
|
<div class="col-auto all-caps fs-10 hide">Payable Amount</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-l-0 m-r-0 relative p-b-15" v-if="calculation.rate > 0">
|
|
<div class="absolute bullet-connector hint-text"></div>
|
|
<div class="col">
|
|
<div class="row align-items-center">
|
|
<div class="col-1 p-r-25" >
|
|
<i class="fa fa-exchange bg-white text-complete fs-16 p-t-5 p-b-5" style="margin-left: -4px;"></i>
|
|
</div>
|
|
<div class="col p-l-0 fs-14 bold lh-20 text-complete">1 MYR = {{(Math.round((this.calculation.rate + Number.EPSILON) * 100000) / 100000).toFixed(5)}} RMB</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-10 ">
|
|
<div class="col">
|
|
<div class="row m-l-0 m-r-0">
|
|
<div class="col no-padding">
|
|
<div class="form-group form-group-default m-b-0">
|
|
<label>You'r Sending</label>
|
|
<input id="cc_sending" name="cc_sending" type="text" placeholder="0.00" value="0.00" v-model="senderInput" class="form-control" @keyup="updateAmount($event, 0)" v-money="money">
|
|
</div>
|
|
</div>
|
|
<div class="col-auto bg-primary text-white">
|
|
<div class="row h-100 align-items-center">
|
|
<div class="col-auto p-r-0">
|
|
<span class="flag-icon fs-14 flag-icon-my"></span>
|
|
</div>
|
|
<div class="col p-l-5 p-r-20">
|
|
MYR
|
|
</div>
|
|
<div class="col-auto h-100 pointer" @click="senderMenu = !senderMenu">
|
|
<div class="row align-items-center bg-primary-light h-100">
|
|
<div class="col ">
|
|
<i class="fa fa-angle-down fs-14 m-t-5" :class="[{'fa-angle-down': !senderMenu}, {'fa-angle-up': senderMenu}]"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative w-100 text-master">
|
|
<div class="absolute w-100 b-l b-b b-r b-success" :class="[{'hide': !senderMenu}]" 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" >
|
|
<div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10 bg-primary-light text-white" @click="senderMenu = !senderMenu">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col-auto p-r-5 p-l-0">
|
|
<span class="flag-icon fs-14 flag-icon-my"></span>
|
|
</div>
|
|
<div class="col-auto p-l-5">
|
|
<div class="font-heading fs-12">
|
|
MYR
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" v-if="calculation.date">
|
|
<div class="col text-right">
|
|
<div class="fs-9">These are the rates as of {{calculation.date}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { debounce } from 'vue-debounce'
|
|
import formHandler from "../../../general/mixins/formHandler";
|
|
export default {
|
|
props: {
|
|
data: {
|
|
required: true,
|
|
type: Object
|
|
},
|
|
id: {
|
|
required: true,
|
|
type: Number
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
recipientMenu: false,
|
|
senderMenu: false,
|
|
senderInput: 0,
|
|
recipientInput: 0,
|
|
serviceType: {},
|
|
calculation: {
|
|
rate: 0,
|
|
conversion_amount: 0,
|
|
date: '',
|
|
service_charge: 0,
|
|
sub_total: 0,
|
|
tax: 0,
|
|
tax_total: 0,
|
|
total: 0
|
|
},
|
|
parameters: {
|
|
type: 1,
|
|
amount: '',
|
|
service_id: '',
|
|
currency_id: '',
|
|
}
|
|
}
|
|
},
|
|
created(){
|
|
this.serviceType = this.data;
|
|
},
|
|
watch: {
|
|
data: {
|
|
handler: function (val) {
|
|
this.serviceType = this.data;
|
|
if(val.id !== this.parameters.service_id) {
|
|
this.parameters.service_id = this.data.id;
|
|
this.parameters.currency_id = this.data.selectedCurrency.id;
|
|
this.submitForm();
|
|
}
|
|
},
|
|
deep: true
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
UpdateCurrency(currency){
|
|
this.serviceType.selectedCurrency = currency;
|
|
this.recipientMenu = false;
|
|
this.parameters.currency_id = currency.id;
|
|
this.submitForm();
|
|
},
|
|
updateAmount(event, type){
|
|
if(event.target !== null){
|
|
if(parseFloat(event.target.value) > 0 && event.target.value !== this.parameters.amount){
|
|
|
|
this.parameters = {
|
|
type: type,
|
|
amount: event.target.value,
|
|
service_id: this.serviceType.id,
|
|
currency_id: this.serviceType.selectedCurrency.id,
|
|
};
|
|
|
|
this.fetchCalculations(event.target.value, type)
|
|
|
|
this.calculation = {
|
|
rate: 0,
|
|
conversion_amount: 0,
|
|
date: '',
|
|
service_charge: 0,
|
|
sub_total: 0,
|
|
tax: 0,
|
|
tax_total: 0,
|
|
total: 0
|
|
};
|
|
}
|
|
}
|
|
},
|
|
fetchCalculations: debounce(function() {
|
|
this.submitForm();
|
|
}, 700),
|
|
submitForm(){
|
|
if(parseFloat(this.parameters.amount) > 0){
|
|
this.submit(route('api.company.currency.convert', this.id), 'post', 'bookingFormSection', false, false);
|
|
}
|
|
|
|
},
|
|
successHandler(response){
|
|
this.$emit('newCalculation', {
|
|
calculation: response.payload.data,
|
|
amount: this.parameters.amount,
|
|
serviceType: this.serviceType,
|
|
type: this.parameters.type,
|
|
});
|
|
this.error = '';
|
|
this.calculation = response.payload.data;
|
|
(this.parameters.type === 1) ? this.senderInput = (Math.round((this.calculation.conversion_amount + Number.EPSILON) * 100) / 100).toFixed(2): this.recipientInput = (Math.round((this.calculation.conversion_amount + Number.EPSILON) * 100) / 100).toFixed(2)
|
|
this.isloading = false;
|
|
},
|
|
errorHandler(error){
|
|
this.$emit('newCalculation', {
|
|
calculation: -1
|
|
});
|
|
this.error = error.message;
|
|
this.loading = false;
|
|
}
|
|
},
|
|
mixins: [formHandler]
|
|
}
|
|
</script>
|