cief/exchange-2.0
1
0
Fork 0
mirror of https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git synced 2026-08-19 04:23:55 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
865fe11bf7cc319a2a0e40599efc74fa4c154dea
exchange-2.0/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue
T
glovetleong 865fe11bf7 invoice pdf design
2021-04-12 14:44:05 +08:00

336 lines
23 KiB
Vue
Raw Blame History

<template>
<div class="row no-margin">
<div class="col">
<div class="row m-b-10 align-items-center">
<div class="col-auto bg-white p-t-10 p-b-5 p-l-20 p-r-20 text-center">
<div class="row">
<div class="col">
<span class="flag-icon fs-20" :class="'flag-icon-'+data.conversion_currency.country.short_code.toLowerCase()"></span>
</div>
</div>
<div class="row">
<div class="col">
<div class="font-heading fs-10 bold">{{this.data.conversion_currency.short_code}}</div>
</div>
</div>
</div>
<div class="col-auto no-padding" style="margin-left: -8px;margin-right: -8px;z-index: 1;">
<i class="fa fa-exchange text-master-lighter fs-20"></i>
</div>
<div class="col-auto bg-white p-t-10 p-b-5 p-l-20 p-r-20 text-center">
<div class="row">
<div class="col">
<span class="flag-icon fs-20" :class="'flag-icon-'+data.convertible_currency.country.short_code.toLowerCase()"></span>
</div>
</div>
<div class="row">
<div class="col">
<div class="font-heading fs-10 bold">{{this.data.convertible_currency.short_code}}</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col bg-white padding-15">
<div class="row" v-if="!expandPayment">
<div class="col">
<div class="row align-items-end m-b-10 text-complete">
<div class="col">
<div class="font-heading all-caps fs-10">Transfer Total:</div>
</div>
<div class="col-auto text-right">
<div class="font-heading fs-12">{{this.data.fixed_currency.short_code}} {{(Math.round((this.data.amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
</div>
</div>
<div class="row align-items-end m-b-10 text-success">
<div class="col">
<div class="font-heading all-caps fs-10">Paid Total:</div>
</div>
<div class="col-auto text-right">
<div class="font-heading fs-12">{{this.data.fixed_currency.short_code}} {{(Math.round((this.data.paid_amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
</div>
</div>
<div class="row align-items-end m-b-10 ">
<div class="col">
<div class="font-heading all-caps fs-10">Floating Amount:</div>
</div>
<div class="col-auto text-right">
<div class="font-heading fs-12">{{this.data.fixed_currency.short_code}} {{(Math.round((this.data.floating_amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
</div>
</div>
<div class="row align-items-end bold text-danger">
<div class="col">
<div class="font-heading all-caps fs-10">OutStanding Total:</div>
</div>
<div class="col-auto text-right">
<div class="font-heading fs-12">{{this.data.fixed_currency.short_code}} {{(Math.round((this.data.outstanding_amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
</div>
</div>
<div class="row m-t-20" v-if="data.company.employee.status === 2 && data.company.status === 2">
<div class="col">
<button class="btn btn-xs all-caps b-rad-none btn-success btn-block" @click="makePayment()">Make Payment</button>
</div>
</div>
</div>
</div>
<div class="row" v-if="expandPayment && !calculation">
<div class="col">
<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">
<div class="col-8">
<div class="btn btn-xs btn-complete no-border btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="paymentMethod.status = !paymentMethod.status">
<div class="row">
<div class="col p-t-10 p-b-10">
{{paymentMethod.name}}
</div>
<div class="col-auto bg-complete-light">
<div class="row h-100 align-items-center">
<div class="col">
<i class="fa" :class="[{'fa-angle-down': !paymentMethod.status}, {'fa-angle-up': paymentMethod.status}]"></i>
</div>
</div>
</div>
</div>
</div>
<div class="relative w-100">
<div class="absolute w-100 b-l b-b b-r b-complete" :class="[{'hide': !paymentMethod.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" :class="[{'bg-complete-light': paymentMethod.name === 'Bank Transfer'}, {'text-white': paymentMethod.name === 'Bank Transfer'}, {'hover-complete': paymentMethod.name !== 'Bank Transfer'}]" @click="updatePaymentType({name: 'Bank Transfer', id: 'cash'})">
<div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
<div class="row align-items-center justify-content-center">
<div class="col">
<div class="font-heading fs-10">Bank Transfer</div>
</div>
</div>
</div>
</div>
<div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Cash Deposit'}, {'text-white': paymentMethod.name === 'Cash Deposit'}, {'hover-complete': paymentMethod.name !== 'Cash Deposit'}]" @click="updatePaymentType({name: 'Cash Deposit', id: 'cash'})">
<div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
<div class="row align-items-center justify-content-center">
<div class="col">
<div class="font-heading fs-10">Cash Deposit</div>
</div>
</div>
</div>
</div>
<div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Cheque'}, {'text-white': paymentMethod.name === 'Cheque'}, {'hover-complete': paymentMethod.name !== 'Cheque'}]" @click="updatePaymentType({name: 'Cheque', id: 'cheque'})">
<div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
<div class="row align-items-center justify-content-center">
<div class="col">
<div class="font-heading fs-10">Cheque</div>
</div>
</div>
</div>
</div>
<div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Banker\'s Acceptance'}, {'text-white': paymentMethod.name === 'Banker\'s Acceptance'}, {'hover-complete': paymentMethod.name !== 'Banker\'s Acceptance'}]" @click="updatePaymentType({name: 'Banker\'s Acceptance', id: 'ba'})">
<div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
<div class="row align-items-center justify-content-center">
<div class="col">
<div class="font-heading fs-10">Banker's Acceptance</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row m-r-0">
<div class="col p-r-0">
<validation-wrapper-component :validator="$v.amount">
<label class="muted">Amount</label>
<input class="form-control" name="amount" v-model.lazy="amount" v-money="{decimal: '.',thousands: ',', precision: 2}">
</validation-wrapper-component>
</div>
<div class="col-auto b-r b-t b-b b-grey">
<div class="row h-100 align-items-center">
<div class="col">
<div class="font-heading fs-10 muted">{{this.data.fixed_currency.short_code}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-4 p-r-0">
<button class="btn btn-xs all-caps b-rad-none btn-default bg-master-lighter btn-block" @click="expandPayment = false">Cancel</button>
</div>
<div class="col p-l-0">
<button class="btn btn-xs all-caps b-rad-none btn-success btn-block" @click="submitForm()">Create Booking</button>
</div>
</div>
</div>
</div>
<div class="row" v-if="calculation">
<div class="col">
<div class="row">
<div class="col">
<div class="row align-items-end m-b-20 text-danger" v-if="(this.data.amount - parseFloat(amount.replace(',', '')))">
<div class="col">
<div class="font-heading all-caps fs-10">Outstanding</div>
</div>
<div class="col-auto text-right">
<div class="font-heading fs-10">{{this.data.fixed_currency.short_code}} {{(Math.round(((this.data.amount - parseFloat(amount.replace(',', '')))+ Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
</div>
</div>
<div class="row align-items-end m-b-10 text-success bold">
<div class="col">
<div class="font-heading all-caps fs-10">Recipient Gets</div>
</div>
<div class="col-auto text-right">
<div class="font-heading fs-10">{{this.data.convertible_currency.short_code}} {{(Math.round((calculation.foreign_total + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
</div>
</div>
<div class="row align-items-end bold m-b-10 text-primary">
<div class="col">
<div class="font-heading all-caps fs-10">Rate</div>
</div>
<div class="col-auto text-right">
<div class="font-heading fs-10 ">{{(Math.round((calculation.rate + Number.EPSILON) * 100000) / 100000).toFixed(5) }}</div>
</div>
</div>
<div class="row align-items-end m-b-10 hint-text">
<div class="col">
<div class="font-heading all-caps fs-10">You are sending</div>
</div>
<div class="col-auto text-right">
<div class="font-heading fs-10">MYR {{(Math.round((calculation.local_total + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
</div>
</div>
<div class="row align-items-end m-b-10 hint-text">
<div class="col">
<div class="font-heading all-caps fs-10">Transfer Charges</div>
</div>
<div class="col-auto text-right">
<div class="font-heading fs-10">MYR {{(Math.round((calculation.service_charge + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
</div>
</div>
<div class="row align-items-end m-b-20 ">
<div class="col">
<div class="font-heading all-caps fs-10">Sub Total</div>
</div>
<div class="col-auto text-right">
<div class="font-heading fs-10">MYR {{(Math.round((calculation.sub_total + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
</div>
</div>
<div class="row align-items-end m-b-5 hint-text">
<div class="col">
<div class="font-heading all-caps fs-10">Tax {{(Math.round((calculation.tax + Number.EPSILON) * 10) / 10).toFixed(1)}}%</div>
</div>
<div class="col-auto text-right">
<div class="font-heading fs-10">MYR {{(Math.round((calculation.tax_total + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
</div>
</div>
<div class="row align-items-end m-b-10 bold text-success">
<div class="col">
<div class="font-heading all-caps fs-10">You are paying</div>
</div>
<div class="col-auto text-right">
<div class="font-heading fs-12">MYR {{(Math.round((calculation.total + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
</div>
</div>
</div>
</div>
<div class="row parentContainer">
<div class="col-4 p-r-0">
<button class="btn btn-xs all-caps b-rad-none btn-default bg-master-lighter btn-block" @click="cancelQuotation()">Cancel</button>
</div>
<div class="col p-l-0">
<button class="btn btn-xs all-caps b-rad-none btn-success btn-block requestModal" data-type="paymentSummary" >Lock Booking</button>
</div>
<modal-component v-if="calculation.total > 0" class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="paymentSummary">
<confirm-quotation-form-component v-on:cancelQuotation="cancelQuotation()" :calculation="calculation" :section="section" :id="item.id" :payment_method="paymentMethod.id" :amount="amount"></confirm-quotation-form-component>
</modal-component>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import componentHandler from "../../../general/mixins/componentHandler";
import { required, requiredIf, minValue, maxValue} from "vuelidate/lib/validators";
import {VMoney} from 'v-money'
export default {
props : {
section: {
type: String,
required: true
}
},
data(){
return {
error: '',
expandPayment: false,
paymentMethod: {
name: 'Bank Transfer',
id: 'cash',
status: false
},
amount: (Math.round((this.data.outstanding_amount + Number.EPSILON) * 100) / 100).toFixed(2),
calculation: null
}
},
validations () {
return {
amount: {
required,
}
}
},
methods: {
updatePaymentType(payment){
this.paymentMethod = {
name: payment.name,
id: payment.id,
status: false,
}
},
submitForm(){
this.parameters = {
payment_method: this.paymentMethod.id,
amount: this.amount
};
this.submit(route('api.booking.payment.quotation', this.item.id), 'post', this.section, false, false)
this.calculation = null;
},
successHandler(response){
this.calculation = response.payload.data;
},
errorHandler(error) {
this.error = error.message;
},
makePayment(){
this.amount = (Math.round((this.data.outstanding_amount + Number.EPSILON) * 100) / 100).toFixed(2);
this.expandPayment = true;
},
cancelQuotation(){
this.calculation = null;
this.expandPayment = false;
}
},
mixins: [componentHandler],
directives: {money: VMoney}
}
</script>
<style scoped>
</style>
Reference in New Issue View Git Blame Copy Permalink