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 formStates = (SUBMIT) => ({
  incomplete: {
    on: {
      ERRORS_CLEARED: 'complete',
      SUBMIT: {
        actions: ['touchAll', 'scrollToErrors']
      },
    }
  },
  complete: {
    on: {
      ERRORS_FOUND: 'incomplete',
      SUBMIT
    }
  },
})

const checkoutMachine = Machine({
  id: 'digitalCheckout',
  initial: 'step1',
  context: {
    showErrorBanner: false,
    errorMessage: '',
  },
  states: {
    step1: {
      initial: 'incomplete',
      states: {
        ...formStates({
          target: 'validating',
          actions: 'validate'
        }),
        validating: {
          entry: assign({
            showErrorBanner: false,
          }),
          on: {
            VALID: '#digitalCheckout.step2',
            INVALID: {
              target: 'complete',
              actions: assign({
                showErrorBanner: true,
                errorMessage: 'contentfulKey.invalid'
              })
            },
          }
        } 
      }
    },
    step2: {
      initial: 'incomplete',
      states: {
        ...formStates({
          target: 'checkingOut',
          actions: 'requestCheckout'
        }),
        checkingOut: {
          entry: assign({
            showErrorBanner: false,
          }),
          on: {
            SUCCESS: '#digitalCheckout.success',
            FAIL: {
              target: 'complete',
              actions: assign({
                showErrorBanner: true,
                errorMessage: 'contentfulKey.apiFailure'
              })
            }
          }
        }
      }
    },
    success: { type: 'final' }
  }
})