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

machine.js

const bookingMachine = Machine(
  {
    id: 'booking',
    initial: 'marriage',
    states: {
      marriage: {
        type: 'parallel',
        states: {
          squire: {
            initial: 'queryingSquire',
            states: {
              queryingSquire: {
                invoke: {
                  id: 'queryingSquireIDFromSquire',
                  src: () => 'do query to get squires',
                  onDone: 'selectingSquires',
                },
              },
              selectingSquires: {
                initial: 'choosingSquire',
                states: {
                  choosingSquire: {},
                  queryingToValidating: {
                    invoke: {
                      id: 'queryingToValidatingIDFromSquire',
                      src: () => 'do something here',
                      onDone: 'validating',
                    },
                  },
                  validating: {
                    entry: (ctx, e) => {
                      return console.log(e)
                    },
                    on: {
                      'selected.squire.available': {
                        target: 'choosingSquire',
                        actions: send('squire.chose.valid')
                      },
                      'selected.squire.not.available': {
                        target: 'notAvailable',
                      },
                    },
                  },
                  notAvailable: {
                    invoke: {
                      id: 'notAvailableIDFromSquire',
                      src: () => 'do something here',
                      onDone: {
                        target: '#booking.marriage.squire.queryingSquire',
                      },
                    },
                  },
                },
                on: {
                  'action.id': {
                    target: '.queryingToValidating',
                    cond: (ctx, evt) => true,
                    actions: send('squire.chose')
                  },
                },
              },
            },
          },
          month: {
            initial: 'idle',
            states: {
              idle: {
                on: {
                  'squire.chose.valid': 'queryingMonth',
                },
              },
              queryingMonth: {
                invoke: {
                  id: 'queryingMonthIDFromMonth',
                  src: () => 'do something here',
                  onDone: {
                    target: 'selectingMonth',
                  },
                },
              },
              selectingMonth: {
                initial: 'choosingMonth',
                states: {
                  choosingMonth: {},
                  queryingToValidating: {
                    invoke: {
                      id: 'queryingToValidatingIDFromMonth',
                      src: () => 'do something here',
                      onDone: 'validating',
                    },
                  },
                  validating: {
                    entry: (ctx, e) => {
                      return console.log(e)
                    },
                    on: {
                      'selected.squire.available': {
                        target: 'choosingMonth',
                        actions: send('month.chose.valid')
                      },
                      'selected.squire.not.available': {
                        target: 'notAvailable',
                      },
                    },
                  },
                  notAvailable: {
                    invoke: {
                      id: 'notAvailableIDMonth',
                      src: () => 'do something here',
                      onDone: {
                        target: '#booking.marriage.month.queryingMonth',
                      },
                    },
                  },
                },
                on: {
                  'action.id.2': {
                    target: '.queryingToValidating',
                    cond: (ctx, evt) => true,
                    actions: send('month.chose')
                  },
                  'squire.chose': {
                    target: '#booking.marriage.month.cleanFrontView',
                  },
                },
              },
              cleanFrontView: {
                invoke: {
                  id: 'cleanFrontViewIDFromMonth',
                  onDone: 'idle'
                },
              },
            },
          },
          day: {
            initial: 'idle',
            states: {
              idle: {
                on: {
                  'month.chose.valid': 'queryingDay',
                },
              },
              queryingDay: {
                invoke: {
                  id: 'queryingDayIDFromDay',
                  src: () => 'do something',
                  onDone: 'selectingDay',
                },
              },
              selectingDay: {
                initial: 'choosingDay',
                states: {
                  choosingDay: {
                  },
                  queryingToValidating: {
                    invoke: {
                      id: 'queryingToValidatingIDFromDay',
                      src: () => 'do something here',
                      onDone: 'validating',
                    },
                  },
                  validating: {
                    entry: (ctx, e) => {
                      return console.log(e)
                    },
                    on: {
                      'selected.squire.available': {
                        target: 'choosingDay',
                        actions: send('day.chose.valid')
                      },
                      'selected.squire.not.available': {
                        target: 'notAvailable',
                      },
                    },
                  },
                  notAvailable: {
                    invoke: {
                      id: 'notAvailableIDFromDay',
                      src: () =>
                        'do something here',
                      onDone: {
                        target: '#booking.marriage.day.queryingDay',
                      },
                    },
                  },
                },
                on: {
                  'action.id.3': {
                    target: '.queryingToValidating',
                    cond: (ctx, evt) => true,
                    actions: send('day.chose')
                  },
                  'squire.chose': {
                    target: '#booking.marriage.day.cleanFrontView',
                  },
                  'month.chose': {
                    target: '#booking.marriage.day.cleanFrontView',
                  }
                },
              },
              cleanFrontView: {
                invoke: {
                  id: 'cleanFrontViewIDFromDay',
                  onDone: 'idle'
                },
              },
            },
          },
          hour: {
            initial: 'idle',
            states: {
              idle: {
                on: {
                  'day.chose.valid': {
                    target: 'queryingHour'
                  }
                }
              },
              queryingHour: {
                invoke: {
                  id: 'queryingHourIDFromHour',
                  src: () => 'do something here',
                  onDone: 'selectingHour'
                }
              },
              selectingHour: {
                initial: 'choosingHour',
                states: {
                  choosingHour: {},
                  queryingToValidating: {
                    invoke: {
                      id: 'queryingToValidatingIDFromHour',
                      src: () => 'do something here',
                      onDone: 'validating'
                    }
                  },
                  validating: {
                    on: {
                      'selected.hour.available': {
                        target: 'choosingHour',
                        actions: send('hour.chose.valid')
                      },
                      'selected.hour.is.not.available': {
                        target: 'notAvailable'
                      }
                    }
                  },
                  notAvailable: {
                    invoke: {
                      id: 'notAvailableFromHour',
                      src: () => 'do something here',
                      onDone: '#booking.marriage.hour.queryingHour'
                    }
                  }
                },
                on: {
                  'action.id.4': {
                    target: '.queryingToValidating',
                    cond: (ctx, evt) => true,
                    actions: send('hour.chose')
                  },
                  'squire.chose': {
                    target: '#booking.marriage.hour.cleanFrontView',
                  },
                  'month.chose': {
                    target: '#booking.marriage.hour.cleanFrontView',
                  },
                  'day.chose': {
                    target: '#booking.marriage.hour.cleanFrontView'
                  }
                },
              },
              cleanFrontView: {
                invoke: {
                  id: 'cleanFrontViewIDFromHour',
                  onDone: 'idle'
                },
              },
            },
          },
          button: {
            initial: 'idle',
            states: {
              idle: {
                on: {
                  'hour.chose.valid': {
                    target: 'showButton'
                  }
                }
              },
              showButton: {
                on: {
                  'click.on.button': {
                    target: 'sendBooking'
                  },
                  'hour.chose': {
                    target: 'idle'
                  }
                }
              },
              sendBooking: {
                invoke: {
                  id: 'sendBookingIDFromButton',
                  src: () => 'do something here'
                },
              }              
            }
          }
        },
      },
    },
  },
)