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

machine.js

const bookingMachine = Machine(
  {
    id: 'booking',
    initial: 'marriage',
    type: 'parallel',
    states: {
      marriage: {
        type: 'parallel',
        states: {
          squire: {
            initial: 'idle',
            states: {
              idle: {
                on: {
                  '': {
                    actions: send('querying.to.get.data.squire'),
                    target: '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.selectingSquires',
                        actions: send('querying.to.get.data.squire'),
                      },
                    },
                  },
                },
                on: {
                  'action.id': {
                    target: '.queryingToValidating',
                    cond: (ctx, evt) => true,
                    actions: send('squire.chose')
                  },
                },
              },
            },
          },
          month: {
            initial: 'idle',
            states: {
              idle: {
                on: {
                  'squire.chose.valid': {
                    target: 'selectingMonth',
                    actions: send('querying.to.get.data.month')
                  },
                },
              },
              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.selectingMonth',
                        actions: send('querying.to.get.data.month')
                      },
                    },
                  },
                },
                on: {
                  'action.id.2': {
                    target: '.queryingToValidating',
                    cond: (ctx, evt) => true,
                    actions: send('month.chose')
                  },
                  'squire.chose': {
                    actions: send('clear.front.view.piece')
                  },
                },
              },
            },
          },
          day: {
            initial: 'idle',
            states: {
              idle: {
                on: {
                  'month.chose.valid': {
                    target: 'selectingDay',
                    actions: send('querying.to.get.data.day')
                  },
                },
              },
              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.selectingDay',
                        actions: send('querying.to.get.data.day')
                      },
                    },
                  },
                },
                on: {
                  'action.id.3': {
                    target: '.queryingToValidating',
                    cond: (ctx, evt) => true,
                    actions: send('day.chose')
                  },
                  'squire.chose': {
                    actions: send('clear.front.view.piece')
                  },
                  'month.chose': {
                    actions: send('clear.front.view.piece')
                  }
                },
              },
            },
          },
          hour: {
            initial: 'idle',
            states: {
              idle: {
                on: {
                  'day.chose.valid': {
                    target: 'selectingHour',
                    actions: send('querying.to.get.data.hour')
                  }
                }
              },
              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: {
                        target: '#booking.marriage.hour.selectingHour',
                        actions: send('querying.to.get.data.hour')
                      }
                    }
                  }
                },
                on: {
                  'action.id.4': {
                    target: '.queryingToValidating',
                    cond: (ctx, evt) => true,
                    actions: send('hour.chose')
                  },
                  'squire.chose': {
                    actions: send('clear.front.view.piece')
                  },
                  'month.chose': {
                    actions: send('clear.front.view.piece')
                  },
                  'day.chose': {
                    actions: send('clear.front.view.piece')
                  }
                },
              },
            },
          },
          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'
                },
              }              
            }
          }
        },
      },
      communications: {
        initial: 'idle',
        states: {
          idle: {
            on: {
              'clear.front.view.piece': {
                target: 'cleanFrontView'
              },
              'querying.to.get.data.month': {
                target: 'queryingMonth'
              },
              'querying.to.get.data.day': {
                target: 'queryingDay'
              },
              'querying.to.get.data.hour': {
                target: 'queryingHour'
              },
              'querying.to.get.data.squire': {
                target: 'queryingSquire'
              }
            }
          },
          cleanFrontView: {
            invoke: {
              id: 'cleanFrontViewIDFromCommunications',
              src: () => 'do something here',
              onDone: [
                {target:'#booking.marriage.month.idle'}, 
                {target: '#booking.marriage.day.idle'},
                {target:'#booking.marriage.hour.idle'}
              ]
            }
          },
          queryingSquire: {
            invoke: {
              id: 'queryingSquiresIDFromCommunications',
              src: () => 'do something here',
              onDone: 'idle'
            }
          },
          queryingMonth: {
            invoke: {
              id: 'queryingMonthIDFromCommunications',
              src: () => 'do something here',
              onDone: 'idle'
            },
          },
          queryingDay: {
            invoke: {
              id: 'queryingDayIDFromCommunications',
              src: () => 'do something here',
              onDone: 'idle'
            }
          },
          queryingHour: {
            invoke: {
              id: 'queryingHourIDFromCommunications',
              src: () => 'do something here',
              onDone: 'idle'
            }
          }
        }
      }
    },
  },
)