izyim/resources/assets/vue/components/order/elements/steps/DeliveryStepComponenet.vue

<template>
    <div class="inline">
        <notification-component ref="notification"></notification-component>
        <div class="btn btn-sm btn-success b-rad-none requestModal"  data-type="delivery">Out for Delivery</div>
        <confirm-modal-component
                title="Order Packed"
                :message="'Are you sure this order is out for delivery?'"
                type="delivery"
                v-on:confirm="completeDelivery()"></confirm-modal-component>
    </div>

</template>

<script>
    import notificationConstant from '../../../../../js/notification';
    export default {
        props: {
            'data': {
                required: true
            }
        },
        data() {
            return {
                isLoading: false
            }
        },
        methods: {
            completeDelivery() {

                //turn on loading animation
                this.isLoading = true;
                fetch(route('api.order.step.update', {orderId: this.data}), {
                    method: 'post',
                    headers: {
                        'content-type': 'application/json'
                    }
                }).then(() => {
                    //turn off loading animation
                    this.isLoading = false;

                    let notification = this.$refs.notification;

                    notification.title = notificationConstant.ORDER.OUT_FOR_DELIVERY.TITLE;
                    notification.message = notificationConstant.ORDER.OUT_FOR_DELIVERY.MESSAGE;

                    notification.execute();

                    Event.$emit('updateOrdersList', true);


                })
            }
        }
    }
</script>