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: 'queryingSquire',
          states: {
            queryingSquire: {
              invoke: {
                src: () => 'doing query to get squires',
                onDone: 'selectingSquires',
              },
            },
            selectingSquires: {
              initial: 'waitingAnswer',
              states: {
                waitingAnswer: {
                  invoke: {
                    src: () => 'waiting user choose',
                    onDone: {
                      target: 'queryingValidating',
                      actions: send('ACTION_ID'),
                    },
                  },
                },
                queryingValidating: {
                  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: 'waitingAnswer',
                    },
                    selectedSquireNotAvailable: {
                      target: 'not_vailable',
                    },
                  },
                },
                not_vailable: {
                  invoke: {
                    src: () => 'opa',
                    onDone: {
                      target: 'waitingAnswer',
                      actions: send('SQUIRE_WILL_BE_RELOADED'),
                    },
                  },
                },
              },
            },
          },
        },
      },
    },
  },
})