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: {
              invoke: {
                src: () => 'opa',
                onDone: {
                  target: 'querying',
                  actions: send('SQUIRE_WILL_BE_RELOADED'),
                },
              }
            },
          },
        },
      },
    },
  },
})