exchange-2.0/resources/assets/vue/components/bookings/elements/RefundConfirmationComponent.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="font-heading all-caps bold fs-10">Request Refund</div>
                </div>
            </div>
            <div class="row m-b-10">
                <div class="col-7">
                    <div class="font-heading all-caps fs-10 m-b-5">Refund Type:</div>
                    <div class="row p-l-15">
                        <div v-for="(method, index) in refundMethods" :key="index"
                            class="col p-t-20 p-b-20 bg-master-lightest text-center b-grey pointer"
                            :class="{ 'bg-complete text-white': method.name === refundMethod.name }"
                            @click="updateRefundType(method)">
                            {{ method.name }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="row m-r-0 m-b-10" v-if="refundMethod.name === 'Partially Refund'">
                <div class="col">
                    <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 class="row m-t-5 m-b-5">
                <div class="col">
                    <validation-wrapper-component :validator="$v.refundRemark">
                        <label>Refund Remarks</label>
                        <input class="form-control" name="amount" v-model="refundRemark" >
                    </validation-wrapper-component>
                </div>
            </div>
            <div class="row m-t-10 m-b-10">
                <div class="col">
                    <div class="font-heading all-caps fs-10 m-b-5">Paid Amount: {{ paidAmount }}</div>
                    <div class="font-heading all-caps fs-10 m-b-5" v-if="this.data.refunded_amount > 0">Refunded Amount: {{ (Math.round((this.data.refunded_amount + Number.EPSILON) * 100) / 100).toFixed(2) }}</div>
                    <div class="font-heading all-caps fs-10 m-b-5">Refund Amount Requested: {{ refundAmount }}</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 { maxValue, required } from "vuelidate/lib/validators";

export default {
    props: {
        totalRefunds: {
            type: Number,
            default: 0,
        }
    },
    data() {
        return {
            refundAmount: (Math.round((this.data.original_amount - this.data.refunded_amount + Number.EPSILON) * 100) / 100).toFixed(2),
            refundRemark: '',
            refundMethod: { name: 'Fully Refund', status: false },
            refundMethods: [
                { name: 'Fully Refund', label: 'Full Refund' },
                { name: 'Partially Refund', label: 'Partial Refund' }
            ]
        }
    },
    validations() {
        return {
            refundAmount: {
                maxValue: maxValue(this.refundMaxValue)
            }, 
            refundRemark: {
                required
            }
        }
    },
    computed: {
        refundMaxValue() {
            return (Math.round((this.data.original_amount - this.data.refunded_amount + Number.EPSILON) * 100) / 100).toFixed(2);
        },
        paidAmount() {
            return this.data.original_amount;
        },
    },
    methods: {
        submitForm() {
            this.parameters.amount = this.refundAmount;
            this.parameters.refundRemark = this.refundRemark;
            this.submit(this.route('api.booking.refund.create', this.data.booking.id, this.data.id), 'post', this.section, true, true)
        },
        updateRefundType(refund) {
            this.refundMethod = { ...refund, status: !this.refundMethod.status };
            if (this.refundMethod.name === 'Fully Refund') {
                this.refundAmount = this.refundMaxValue;
            }
        },
    },
    mixins: [FormHandler, ModalFormHandler]
}
</script>