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

machine.js

const promoEvents = {
  PROMO_ENTERED: {},
  PROMO_ERROR: {
    target: '',
    actions: assign({ error: (_, event) => event.error }),
  },
};

const submissionErrorEvent = {
  target: 'formComplete',
  actions: [
    'scrollToErrors',
    assign({ error: (_, event) => event.error, showErrors: true }),
  ],
};

const checkoutMachine = Machine({
  id: 'quickCheckout',
  initial: 'formIncomplete',
  context: {
    showErrors: false,
    error: '',
    createToken: () => {},
  },
  states: {
    formIncomplete: {
      on: {
        ERRORS_CLEARED: {
          target: 'formComplete',
          actions: assign({ showErrors: false }),
        },
        SUBMIT: {
          actions: ['touchAll', 'scrollToErrors', assign({ showErrors: true })],
        },
        ...promoEvents,
      },
    },
    formComplete: {
      on: {
        ERRORS_FOUND: {
          target: 'formIncomplete',
          actions: assign({ error: (_, event) => event.error }),
        },
        SUBMIT: 'creatingToken',
        ...promoEvents,
      },
    },
    creatingToken: {
      invoke: {
        src: context => context.createToken(),
        onDone: 'checkingOut',
        onError: submissionErrorEvent,
      },
    },
    checkingOut: {
      invoke: {
        src: () => {},
        onDone: 'submitted',
        onError: submissionErrorEvent,
      },
    },
    submitted: { type: 'final' },
  },
});