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

machine.js

const canActivateNextComponent = (ctx, event, { state }) => true; // check if next component can be activated

const canActivatePreviousComponent = (ctx, event, { state }) => true; // check if previous component can be activated

const navigationMachine = Machine(
  {
    id: 'navigationMachine',
    initial: 'overview',
    context: {
      addressValid: true,
      fulfilmentValid: false,
      slotsValid: false,
      overviewValid: false,
      thankyouValid: false,
    },
    states: {
      address: {
        on: {
          NEXT: {
            target: 'fulfilment',
            cond: canActivateNextComponent,
          },
          PREVIOUS: undefined,
        },
      },
      fulfilment: {
        on: {
          NEXT: {
            target: 'slots',
            cond: canActivateNextComponent,
          },
          PREVIOUS: {
            target: 'address',
            cond: canActivatePreviousComponent,
          },
        },
      },
      slots: {
        on: {
          NEXT: {
            target: 'overview',
            cond: canActivateNextComponent,
          },
          PREVIOUS: [{
            target: 'fulfilment',
            cond: canActivatePreviousComponent,
          }, {
            target: 'address'
          }],
        },
      },
      overview: {
        on: {
          NEXT: {
            target: 'thankyou',
            cond: canActivateNextComponent,
          },
          PREVIOUS: [{
            target: 'slots',
            cond: canActivatePreviousComponent,
          }, {
            target: 'fulfilment',
            cond: canActivatePreviousComponent,
          }, {
            target: 'address'
          }],
        },
      },
      thankyou: {
        type: 'final',
      },
    },
  },
  {
    guards: {
      canActivateNextComponent,
      canActivatePreviousComponent,
    },
  }
);