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

machine.js

const transactionMachine = Machine({
    id: 'transaction',
    initial: 'draft',
    states: {
        draft: {
            on: {
                AUTHORIZE_PAYMENT: {
                    target: 'authorizing',
                },
                ADD_ITEM: {
                    target: 'draft',
                },
                ADD_CUSTOMER: {
                    target: 'draft',
                },
                TRANSFER: 'transferred',
            },
        },
        authorizing: {
          on: {
            AUTHORIZED: 'finalizing'
          }
        },
        finalizing: {
          on: {
            COMPLETE: 'completed',
          }
        },
        error: {
            on: {
                RETRY: {
                    target: 'draft',
                },
                TRANSFER: 'transferred',
            },
        },
        transferred: {
            type: 'final',
        },
        completed: {
            type: 'final',
        },
    },
})

const activityStates = {
  id: 'activity',
  initial: 'idle',
  states: {
    idle: {
      on: {
        CREATE_TRANSACTION: 'transaction'
      }
    },
    transaction: {
      invoke: {
        src: transactionMachine,
        onDone: 'idle',
        onError: 'idle',
      }
    }
  }
}

const socketMachine = Machine({
  id: 'socket',
  initial: 'disconnected',
  states: {
    disconnected: {
      on: {
        CONNECT: 'connected'
      }
    },
    connected: {
      ...activityStates,
    }
  }
});