exchange-2.0/resources/assets/vue/components/bookings/elements/RequestCreditNoteComponent.vue

<template>
    <div class="row zig-zag-top" v-if="refund_reasons">
        <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 Credit Note</div>
                </div>
            </div>
            <div class="row m-b-10">
                <div class="col-7">
                    <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 all-caps"
                            :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 === 'Partial Amount'">
                <div class="col">
                    <validation-wrapper-component :validator="$v.refundAmount">
                        <label>Credit Note Amount</label>
                        <input class="form-control" name="amount" v-model="refundAmount"
                            :disabled="refundMethod.name === 'Full Amount'" 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" v-if="refundMethod.name === 'Partial Amount'">
                 <div class="col">
                    <validation-wrapper-component selectable :validator="$v.refundRemark">
                        <label>Reason for refund</label>
                        <select-component :options="refund_reasons" v-model="refundRemark"></select-component>
                    </validation-wrapper-component>
                </div>
            </div>
            <div class="row m-t-5 m-b-5" v-else>
                <div class="col">
                    <validation-wrapper-component :validator="$v.refundRemark">
                        <label>Remarks</label>
                        <input class="form-control" name="amount" v-model="refundRemark" >
                    </validation-wrapper-component>
                </div>
            </div>
            <div class="row m-t-5 m-b-5" v-if="refundMethod.name === 'Partial Amount' && refundRemark === 'Others'">
                <div class="col">
                    <validation-wrapper-component :validator="$v.refundRemarkOthers">
                        <label>Reason Others</label>
                        <input class="form-control" name="amount" v-model="refundRemarkOthers">
                    </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 { requiredIf, maxValue} 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: '',
            refundRemarkOthers: '',
            refundMethod: { name: 'Full Amount', status: false },
            refundMethods: [
                { name: 'Full Amount' },
                { name: 'Partial Amount' }
            ],
            refund_reasons: [],
            validateRefundRemark: false,
        }
    },
    validations() {
        return {
            refundAmount: {
                maxValue: maxValue(this.refundMaxValue)
            },
            refundRemark: {
                required: requiredIf(function () { return this.validateRefundRemark; })
            },
            refundRemarkOthers: {
                required: requiredIf(function () { return this.refundRemark === 'Others'; })
            }
        }
    },
    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;
        },
    },
    created(){
        this.fetchRefundReasons();
    },
    methods: {
        fetchRefundReasons(){
            this.submit(route('api.remark.list.refund_reasons'), 'get', 'refundReasonListSection', false, false);
        },
        successHandler(response, section){
            if(section === 'refundReasonListSection'){
                const reasons = Array.isArray(response.payload.data) ? [...response.payload.data] : [];

                if (!this.$store.getters.isAdmin) {
                    const index = reasons.indexOf("Others");
                    if (index !== -1) {
                        reasons.splice(index, 1);
                    }
                }

                this.refund_reasons = reasons;
                this.validateRefundRemark = true;
            }
            else{
                this.closeModal();
                this.formHandler();
            }
        },
        submitForm() {
            this.parameters.amount = this.refundAmount;
            if (this.refundRemark === 'Others') {
                this.parameters.refundRemark = `${this.refundRemarkOthers}`; //`${this.refundRemark}: ${this.refundRemarkOthers}`;
            } else {
                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 === 'Full Amount') {
                this.refundAmount = this.refundMaxValue;
            }
            this.refundRemark = '';
            this.refundRemarkOthers = '';
        },
    },
    mixins: [FormHandler, ModalFormHandler]
}
</script>