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

machine.js

const navigationMachine = Machine(
  {
    id: 'navigationMachine',
    initial: 'initial',
    context: {
      addressValid: true,
      fulfilmentValid: false,
      slotsValid: false,
      overviewValid: false,
      thankyouValid: false,
    },
    states: {
      initial: {
        on: {
        '': [
          { target: 'steps.wanneer', cond: () => false },
          { target: 'steps.hoe', cond: () => true },
          { target: 'steps.waar' }
        ]
      }
      },
      steps: {
        on: {
          OVERVIEW: { target: 'overzicht' }
        },
        initial: 'waar',
        states: {
          waar: {
            on: { 
              NEXT: { target: 'hoe' },
              PREVIOUS: undefined,
            }
          },
          hoe: {
            on: { 
              NEXT: { target: 'wanneer' },
              PREVIOUS: { target: 'waar' },
            }
          },
          wanneer: {
            on: { 
              NEXT: { target: '' },
              PREVIOUS: { target: 'hoe' },
            }
          }
        }
      },
      overzicht: {
        on: {
          NEXT: { target: 'bedankt' }
        }
      },
      bedankt: {
        type: 'final',
      },
    },
  },
);