exchange-2.0/resources/assets/vue/components/bookings/forms/confirmBookingComponent.vue

<template>
    <div class="row">
        <div class="col-auto">
            <button id="cancel-new-booking" name="cancel-new-booking" 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 id="confirm-new-booking" name="confirm-new-booking" class="btn btn-lg btn-success b-rad-none all-caps fs-12" v-if="Object.keys(data.bankAccount).length" @click="submitForm()">Confirm & Proceed</button>
        </div>
    </div>
</template>

<script>
    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
    export default {
        props:{
            order_reference_no: {
                type: Array,
                default: [],
                required: false
            }
        },
        data(){
            return {
                parameters: {}
            }
        },
        methods: {
            submitForm(){
                this.parameters = {
                    company_id: this.data.company.id,
                    type: this.data.type,
                    fix_amount: this.data.amount,
                    service_id: this.data.serviceType.id,
                    transferable_bank_id: this.data.bankAccount.id,
                    convertible_currency_id: this.data.serviceType.selectedCurrency.id,
                };

                if ([4, 10].includes(this.data.serviceType.id)) {
                    this.parameters.order_reference_no = this.order_reference_no
                }

                this.submit(route('api.booking.create'), 'post', this.section, true, true)
            },
            successHandler(response){
                window.location.href = this.route('booking.details', response.payload.data.marking)

            }
        },
        mixins: [ModalFormHandler]
    }
</script>