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

machine.js

const processDefinition = [
  { key: 'terms' },
  { key: 'beforeyoucontinue' },
  { key: 'homebuying' },
  {
    key: 'applicants',
    children: [{
      key: 'date_of_birth'
    }, {
      key: 'nationality'
    }]
  },
  { key: 'deposit' }
];

const fetchMachine = Machine({
  id: 'screens',
  initial: 'idle',
  context: {},
  states: {
    idle: {
      on: {
        START: processDefinition[0].key
      }
    },
    terms: {
      on: {
        BACK: 'idle',
        NEXT: processDefinition[1].key
      }
    },
    beforeyoucontinue: {
      on: {
        BACK: processDefinition[0].key,
        NEXT: processDefinition[2].key
      }
    },
    homebuying: {
      on: {
        BACK: processDefinition[1].key,
        NEXT: processDefinition[3].key
      }
    },
    applicants: {
      on: {
        BACK: processDefinition[2].key,
        NEXT: processDefinition[4].key
      },
      initial: 'idle',
      states: {
        idle: {
          on: {
            START: processDefinition[3].children[0].key
          }
        },
        date_of_birth: {
          on: {
            BACK: 'idle',
            NEXT: processDefinition[3].children[1].key
          }
        },
        nationality: {
          on: {
            BACK: processDefinition[3].children[0].key,
            NEXT: 'success'
          }
        },
        success: {
          on: {
            NEXT_APPLICANT: 'idle'
          }
        }
      }
    },
    deposit: {
      on: {
        BACK: processDefinition[3].key,
        NEXT: 'success'
      }
    },
    success: {
      type: 'final'
    }
  }
});