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

machine.js

const newHereStartProjectFlow = {
      initial: "whatToDo",
      states: {
        whatToDo: {
          on: {
            NEXT: "selectType"
          }
        },
        selectType: {
          on: {
            SELECTED: "viewChecklist",
            CANCEL: "selectType"
          }
        },
        viewChecklist: {
          on: {
            NEXT: "basicProjectInfo",
            CANCEL: "selectType"
          }
        },
        basicProjectInfo: {
          on: {
            NEXT: "addUserPermission"
          }
        },
        addUserPermission: {
          on: {
            HELP_ME: "showHelpVideo",
            I_KNOW: "projectDetails"
          }
        },
        showHelpVideo: {
          on: {
            NEXT: "projectDetails"
          }
        },
        projectDetails: {
          on: {
            NEXT: "successConfirmation"
          }
        },
        successConfirmation:{}
      },
      on:{
        NEXT:'deviceSetup'
      }
    }

const deviceSetupFlow = {
  initial: 'downloadImagePage',
  states: {
    downloadImagePage :{}
  },
  on: {
    NEXT : 'connectDevice'
  }
}

const connectDeviceFlow = {
  initial: 'diagramToConnectPI',
  states: {
    diagramToConnectPI : {
      on : {
        NEXT : 'diagramToSetupSensor'
      }
    },
    diagramToSetupSensor : {},
  },
  on: {
    NEXT : 'activateDevice'
  }
}

const activateDeviceFlow = {
  initial: 'enterActivationCode',
  states: {
    enterActivationCode : {
      on : {
        NEXT : 'confirmation'
      }
    },
    confirmation : {}
  },
  on: {
    DONE : 'welcome',
    ADD_MORE : 'connectDevice.diagramToConnectPI'
  }
}

const wizardMachine = Machine({
  key: "wizard",
  initial: "welcome",
  states: {
    welcome: {
      on: {
        NEW_HERE: "newHereStartProject",
        START: "newHereStartProject.projectDetails"
      }
    },
    newHereStartProject: {
      ...newHereStartProjectFlow
    }
    ,
    deviceSetup: {
      ...deviceSetupFlow
    },
    connectDevice: {
     ...connectDeviceFlow
    },
    activateDevice: {
      ...activateDeviceFlow
    }
  }
});