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

machine.js

const billStates = {
  initial: 'invalid',
  states: {
    invalid: {},
    valid: {},
  },
};

const stepStates = Machine({
  id: 'create-items',
  initial: 'choose_vendor',
  context: {
    whatFor: null,
    lineItems: [],
  },
  states: {
    choose_vendor: {
      on: {
        SET_VENDOR: 'create_or_select',
      },
    },
    create_or_select: {
      on: {
        UNSET_VENDOR: 'choose_vendor',
        SET_LINE_ITEMS: {
          target: 'payment_details',
          actions: assign({
            whatFor: () => 'lineItems',
            lineItems: [{}],
          }),
        },
        SELECT_BILL: {
          target: 'payment_details',
          actions: assign({
            whatFor: () => 'bill',
          })
        },
      },
      ...billStates,
    },
    payment_details: {
      on: {
        UNSET_VENDOR: 'choose_vendor',
        DESELECT_BILL: {
          target: 'create_or_select.invalid',
          cond: ctx => ctx.whatFor === 'bill',
          actions: assign({
            whatFor: () => null,
          }),
        },
        REMOVE_LINE_ITEMS: {
          target: 'create_or_select.invalid',
          cond: ctx => ctx.whatFor === 'lineItems',
          actions: assign({
            whatFor: () => null,
            lineItems: [],
          }),
        },
        SELECT_METHOD: 'can_submit',
      },
    },
    can_submit: {
      on: {
        UNSET_VENDOR: 'choose_vendor',
        DESELECT_METHOD: 'payment_details',
        DESELECT_BILL: {
          target: 'create_or_select.invalid',
          cond: ctx => ctx.whatFor === 'bill',
          actions: assign({
            whatFor: () => null,
          }),
        },
        REMOVE_LINE_ITEMS: {
          target: 'create_or_select.invalid',
          cond: ctx => ctx.whatFor === 'lineItems',
          actions: assign({
            whatFor: () => null,
            lineItems: [],
          }),
        },
        SUBMIT: 'submitting',
      },
    },
    submitting: {
      type: 'final',
    }
  },
});