Generated by XState Viz: https://xstate.js.org/viz

machine.js

function makeBooking(context, event) {
  return new Promise((resolve, reject) => {
      setTimeout(() => {
          resolve('Your Ticket has been booked Successful ')
      }, 1000)
  })
}

const seatMachine = Machine({
    id: 'seat-ticket',
    initial: 'init',
    context: {
        msg: '',
        error: ''
    },
    states: {
        init: {
           on: {
               BOOKED: {target: 'booked'},
               BOOKING: {target: 'inBooking'},
               AVAILABLE: {target: 'available'},
           }
        },
        inBooking: {
            on:{
                AVAILABLE: {target: 'available'},
                BOOKED: {target: 'booked'},
            }
        },
        available: {
            on: {
                BOOK: [
                    {
                        cond: (ctx, event) => event.seat !== '',
                        target: 'booking'
                    },
                    {
                        target: 'error',
                        actions: assign({error: (ctx, event) => 'Please fill the form fields'})
                    }
                ],
                CANCEL: {target: 'available'}
            }
        },
        booked: {
            target: 'final',
        },
        booking: {
            invoke: {
                id: 'booking-a-ticket',
                src: (context, event) => makeBooking(context, event),
                onDone: {
                    actions: assign({msg: (context, event) => event.data}),
                    target: 'booked'

                },
                onError: {
                    target: 'error',
                    actions: assign({error: (context, event) => event.data})
                }
            }
        },
        error: {
            after: {
                2000: {
                    target: 'available',
                    actions: assign({error: (ctx, event) => ''})
                }
            }
        }

    }
})