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

machine.js

const bookingMachine = Machine(
  {
    id: 'booking',
    type: 'parallel',
    states: {
      communicate: {
        initial: 'idle',
        states: {
          idle: {
            on: {
              'view.piece.done': {
                target: 'done'
              },
              'view.piece.error': {
                target: 'error'
              }
            }
          },
          done: {
            invoke: {
              id: 'doneId',
              src: 'donePromise',
              onDone: {
                actions: send('done'),
                target: 'idle'
              }
            }
          },
          error: {
            invoke: {
              id: 'errorId',
              src: 'errorPromise',
              onDone: {
                actions: send('error'),
                target: 'idle'
              }
            }
          }
        }
      },
      form: {
        type: 'parallel',
        states: {
          squire: {
            initial: 'queryingSquire',
            states: {
              queryingSquire: {
                invoke: {
                  id: 'queryingSquireIDFromSquire',
                  src: () => 'do query to get squires',
                  onDone: {
                    target: 'selectingSquires',
                    actions: send('view.piece.done')
                  },
                },
              },
              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.form.squire.queryingSquire',
                        actions: send('view.piece.error')
                      },
                    },
                  },
                },
                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',
                    actions: send('view.piece.done')
                  },
                },
                on: {
                  'squire.chose': {
                    target: 'idle'
                  }
                }
              },
              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.form.month.queryingMonth',
                        actions: send('view.piece.error')
                      },
                    },
                  },
                },
                on: {
                  'action.id.2': {
                    target: '.queryingToValidating',
                    cond: (ctx, evt) => true,
                    actions: send('month.chose')
                  },
                  'squire.chose': {
                    target: 'idle',
                    actions: send('view.piece.done')
                  },
                },
              },
            },
          },
          day: {
            initial: 'idle',
            states: {
              idle: {
                on: {
                  'month.chose.valid': 'queryingDay',
                },
              },
              queryingDay: {
                invoke: {
                  id: 'queryingDayIDFromDay',
                  src: () => 'do something',
                  onDone: {
                    target: 'selectingDay',
                    actions: send('view.piece.done')
                  },
                },
                on: {
                  'month.chose': {
                    target: 'idle'
                  }
                }
              },
              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.form.day.queryingDay',
                        actions: send('view.piece.error')
                      },
                    },
                  },
                },
                on: {
                  'action.id.3': {
                    target: '.queryingToValidating',
                    cond: (ctx, evt) => true,
                    actions: send('day.chose')
                  },
                  'squire.chose': {
                    target: 'idle',
                    actions: send('view.piece.done')
                  },
                  'month.chose': {
                    target: 'idle',
                    actions: send('view.piece.done')
                  }
                },
              },
            },
          },
          hour: {
            initial: 'idle',
            states: {
              idle: {
                on: {
                  'day.chose.valid': {
                    target: 'queryingHour'
                  }
                }
              },
              queryingHour: {
                invoke: {
                  id: 'queryingHourIDFromHour',
                  src: () => 'do something here',
                  onDone: {
                    target: 'selectingHour',
                    actions: send('view.piece.done')
                  },
                },
                on: {
                  'day.chose': {
                    target: 'idle'
                  }
                }
              },
              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.form.hour.queryingHour',
                        actions: send('view.piece.error')
                      }
                    }
                  }
                },
                on: {
                  'action.id.4': {
                    target: '.queryingToValidating',
                    cond: (ctx, evt) => true,
                    actions: send('hour.chose')
                  },
                  'squire.chose': {
                    target: 'idle',
                    actions: send('view.piece.done')
                  },
                  'month.chose': {
                    target: 'idle',
                    actions: send('view.piece.done')
                  },
                  'day.chose': {
                    target: 'idle',
                    actions: send('view.piece.done')
                  }
                },
              },
            },
          },
          button: {
            initial: 'idle',
            states: {
              idle: {
                on: {
                  'hour.chose.valid': {
                    target: 'sendButtonToFront',
                  }
                }
              },
              sendButtonToFront: {
                invoke: {
                  id: 'sendButtonToFrontIDFromButton',
                  scr: () => 'do something here (send button to front)',
                  onDone: {
                    target: 'showButton', 
                    actions: send('view.piece.done')
                  }
                }
              },
              showButton: {
                on: {
                  'view.submit.actionId': {
                    target: 'queryingToValidating',
                    actions: send('view.piece.done')
                  },
                  'squire.chose': {
                    target: 'idle',
                    actions: send('view.piece.done')
                  },
                  'month.chose': {
                    target: 'idle',
                    actions: send('view.piece.done')
                  },
                  'day.chose': {
                    target: 'idle',
                    actions: send('view.piece.done')
                  },
                  'hour.chose': {
                    target: 'idle',
                    actions: send('view.piece.done')
                  }
                }
              },
              queryingToValidating: {
                invoke: {
                  id: 'queryingToValidatingIDFromButton',
                  src: () => 'do something here',
                  onDone: {
                    target: 'validating'
                  }
                }
              },
              validating: {
                entry: (ctx, e) => {
                  return console.log(e)
                },
                on: {
                  'form.is.valid': {
                    target: 'sendBooking',
                    actions: send('view.piece.done')
                  },
                  'form.is.not.valid': {
                    target: '#booking.form',
                    actions: send('view.piece.error')
                  },
                },
              },
              sendBooking: {
                invoke: {
                  id: 'sendBookingIDFromButton',
                  src: () => 'do something here',
                  onDone: {
                    actions: send('button.book.done')
                  }
                },
              },
            }
          }
        },
      },
      success: {
        initial: 'idle',
        states: {
          idle: {
            on: {
              'button.book.done': 'finished',
            },
          },
          finished: {
            type: 'final'
          }
        }
      }
    },
  },
)