mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
edmondlang
117 lines
6.3 KiB
Vue
117 lines
6.3 KiB
Vue
<template>
|
|
<div class="row zig-zag-top">
|
|
<div class="col bg-white padding-25">
|
|
<div class="row p-b-10">
|
|
<div class="col">
|
|
<div class="row m-b-5">
|
|
<div class="col">
|
|
<div class="font-heading all-caps bold fs-10">Request Refund</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<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" >
|
|
<div class="col-7 p-r-0">
|
|
<div class="row m-b-10">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-10 m-b-5">Refund Type: </div>
|
|
<div class="row p-l-15">
|
|
<div class="col p-t-20 p-b-20 bg-master-lightest text-center b-grey pointer" :class="[{'bg-complete': refundMethod.name === 'Fully Refund'}, {'text-white': refundMethod.name === 'Fully Refund'}]" @click="updateRefundType({name: 'Fully Refund'})">
|
|
Full Refund
|
|
</div>
|
|
<div class="col p-t-20 p-b-20 bg-master-lightest text-center b-grey pointer" :class="[{'bg-complete': refundMethod.name === 'Partially Refund'}, {'text-white': refundMethod.name === 'Partially Refund'}]" @click="updateRefundType({name: 'Partially Refund'})">
|
|
Partial Refund
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-r-0 m-b-10" v-if="refundMethod.name === 'Partially Refund'">
|
|
<div class="col p-r-0">
|
|
<validation-wrapper-component :validator="$v.refundAmount">
|
|
<label>Amount</label>
|
|
<input class="form-control" name="amount" v-model="refundAmount" :disabled="refundMethod.name == 'Fully Refund'" v-money="moneyV2">
|
|
</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">{{data.booking.fixed_currency.short_code}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-auto">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import FormHandler from '../../../general/mixins/formHandler';
|
|
import ModalFormHandler from '../../../general/mixins/modalFormHandler';
|
|
import { required, maxValue } from "vuelidate/lib/validators";
|
|
export default {
|
|
props: {
|
|
totalRefunds:{
|
|
type: Number,
|
|
default: 0,
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
refundAmount: (Math.round((this.data.booking.amount - this.totalRefunds + Number.EPSILON) * 100) / 100).toFixed(2),
|
|
refundMethod: {
|
|
name: 'Partially Refund',
|
|
status: false
|
|
},
|
|
refundMaxValue: (Math.round((this.data.booking.amount - this.totalRefunds + Number.EPSILON) * 100) / 100).toFixed(2),
|
|
}
|
|
},
|
|
validations() {
|
|
return {
|
|
refundAmount: {
|
|
// required,
|
|
maxValue: maxValue(this.refundMaxValue)
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
submitForm(){
|
|
this.parameters.amount = this.refundAmount;
|
|
this.submit(this.route('api.booking.refund.create', this.data.booking.id, this.data.id), 'post', this.section, true, true)
|
|
},
|
|
updateRefundType(refund){
|
|
this.refundMethod = {
|
|
name: refund.name,
|
|
status: !this.refundMethod.status
|
|
}
|
|
this.refundMethod.name === 'Fully Refund' ? this.refundAmount = this.refundMaxValue : '';
|
|
},
|
|
},
|
|
mixins: [FormHandler, ModalFormHandler]
|
|
}
|
|
</script> |