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 multiStepCheckoutMachine = Machine({
  id: 'multiStepDigitalCheckout',
  initial: 'incomplete',
  context: {
    step: 1,
    showErrorBanner: false,
    errorMessage: '',
  },
  states: {
    incomplete: {
      on: {
        ERRORS_CLEARED: 'complete',
        SUBMIT: {
          actions: ['touchAll', 'scrollToErrors']
        },
      }
    },
    complete: {
      on: {
        ERRORS_FOUND: 'incomplete',
        SUBMIT: [
          {
            cond: ({step}) => step === 1,
            target: 'validating',
            actions: 'validateUser'
          },
          {
            cond: ({step}) => step === 2,
            target: 'checkingOut',
            actions: 'requestCheckout'
          },
        ]
      }
    },
    validating: {
      entry: assign({
        showErrorBanner: false,
      }),
      on: {
        VALID: {
          target: 'incomplete',
          actions: assign({
            step: 2,
          })
        },
        INVALID: {
          target: 'complete',
          actions: assign({
            showErrorBanner: true,
            errorMessage: 'contentfulKey.invalid'
          })
        },
      }
    },
    checkingOut: {
      entry: assign({
        showErrorBanner: false,
      }),
      on: {
        SUCCESS: {
          target: 'success',
          actions: assign({
            step: 3,
          })
        },
        FAIL: {
          target: 'complete',
          actions: assign({
            showErrorBanner: true,
            errorMessage: 'contentfulKey.apiFailure'
          })
        }
      }
    },
    success: { type: 'final' }
  },
})