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 submissionErrorEvent = {
    target: '#idle.errorBannerShowing',
    actions: assign({
      error: (_, event) => ({
        message: event.message,
        type: 'submissionFailure'
      })
    })
  }
    
  const checkoutMachine = Machine({
    id: 'checkoutMachine',
    initial: 'idle',
    context: {
      error: {
        type: 'formIncomplete',
        message: 'Complete this form, or so help me!'
      }
    },
    states: {
      idle: {
        id: 'idle',
        initial: 'normal',
        states: {
          normal: {},
          errorBannerShowing: {}
        },
        on: {
          ERRORS_FOUND: {
            // don't transition to errorBannerShowing yet; wait for user to attempt submission
            actions: assign({
              error: (_, event) => ({
                message: event.message,
                type: "formIncomplete"
              })
            })
          },
          ERRORS_CLEARED: {
            target: '.normal',
            actions: assign({
              error: {
                message: '',
                type: ''
              }
            })
          },
          SUBMIT: [{
            target: 'submitting',
            cond: 'formIsComplete'
          }, {
            target: '.errorBannerShowing',
          }]
        },
      },
      submitting: {
        initial: 'creatingToken',
        states: {
          creatingToken: {
            invoke: {
              src: 'createToken',
              onDone: 'checkingOut',
              onError: submissionErrorEvent
            }
          },
          checkingOut: {
            invoke: {
              src: 'checkOut',
              onDone: '#success',
              onError: submissionErrorEvent
            }
          }
        }
      },
      success: {
        id: 'success',
        type: 'final'
      }
    }
  },
  {
    guards: {
      formIsComplete: ctx => ctx.error.type !== 'formIncomplete'
    }
  });