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

machine.js

const bookingMachine = Machine({
  id: 'booking',
  initial: 'choosing',
  states: {
    choosing: {
      type: 'parallel',
      states: {
        squire: {
          initial: 'querying',
          states: {
            querying: {
              invoke:{
                src: () => 'doing query to get squires',
                onDone: 'selectingSquires'
              },
            },
            selectingSquires: {
              on: {
                ACTION_ID: 'queryingToValidating'
              },
            },
            queryingToValidating: {
              invoke: {
                src: () => 'doing query to get squires again to verify if the choices is available',
                onDone: 'validating'
              },
            },
            validating: {
              entry: (ctx, e) => {
                // do the logic on this property
                return console.log(e)
              },
              on: {
                selectedSquireAvailable: {
                  target: 'selectingSquires'
                },
                selectedSquireNotAvailable: {
                  target: 'not_available',
                }
              }
            },
            not_available: {
              on: {
                '': {
                  target: 'querying',
                  actions: send('SQUIRE_WILL_BE_RELOADED'),
                },
              },
            }
          }
        },
      },
    }
  }
});