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

machine.js

// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// - XState (all XState exports)

const fetchMachine = Machine(
  {
    id: 'onboarding',
    initial: 'entry',
    context: {
      completedFlow: false,
    },
    states: {
      entry: {
        on: {
          EXIT: 'hardExit',
          CONTINUE: 'userData',
        },
      },
      userData: {
        on: {
          CONTINUE: {
            actions: 'continueUserData',
          },
          UPDATE: {
            target: 'confirmation',
            cond: 'hasCompletedFlow',
          },
          SAVE: {
            target: 'importantQuestions',
            cond: 'hasNotCompletedFlow',
          },
        },
      },
      importantQuestions: {
        on: {
          CONTINUE: 'addressData',
        },
      },
      addressData: {
        on: {
          CONTINUE: {
            actions: 'continueAddressData',
          },
          UPDATE: {
            target: 'confirmation',
            cond: 'hasCompletedFlow',
          },
          SAVE: {
            target: 'confirmation',
            cond: 'hasNotCompletedFlow',
          },
        },
      },
      confirmation: {
        entry: 'completeFlow',
        on: {
          EDIT_USER_DATA: 'userData',
          EDIT_ADDRESS_DATA: 'addressData',
          CONTINUE: 'saveData',
        },
      },
      saveData: {
        type: 'final',
      },
      hardExit: {
        type: 'final',
      },
    },
  },
  {
    actions: {
      completeFlow: assign({ completedFlow: true }),
      continueUserData: send(context => {
        if (context.completedFlow) return { type: 'UPDATE' }
        return { type: 'SAVE' }
      }),
      continueAddressData: send(context => {
        if (context.completedFlow) return { type: 'UPDATE' }
        return { type: 'SAVE' }
      }),
    },
    guards: {
      hasCompletedFlow: context => context.completedFlow,
      hasNotCompletedFlow: context => !context.completedFlow,
    },
  }
)