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

machine.js

const taskMachine = Machine({
  id: 'task',
  initial: 'open',
  context: {
    applied: 0,
  },
  states: {
    open: {
      on: {
        CREATE_APPLICATION: 'application',
      },
    },
    application: {
      initial: 'open',
      states: {
        open: {
          on: {
            CLOSE_APPLICATION: [
              {
                target: 'close',
                cond: context => context.appiled > 0,
              },
              {
                target: '#task.expired'
              }
            ],
            APPLIED: {
              target: 'open',
              actions: [
                assign({
                  appiled: (context) => context.appiled + 1
                })
              ],
            }
          },
        },
        close: {
          type: 'final'
        },
        onDone: '#task.matched'
      }
    },
    expired: {},
    matched: {
      on: {
        START: 'started',
      }
    },
    started: {
      on: {
        END: 'ended',
      }
    },
    ended: {
      type: 'final'
    },
  }
});

const orderMachine = Machine({
  id: 'order',
  initial: 'open',
  context: {
    tasks: [{
      id: 'task1',
      src: taskMachine,
    }],
  },
  states: {
    open: {
      invoke: (context) => context.tasks,
      on: {
        ADD_TASK: {
          actions: [
            context => assign({ tasks: context.tasks.concat({
              id: `task${(context.tasks.lenght + 1)}`,
              src: taskMachine
            }) })
          ],
        },
        CHARGE: {
          target: 'payment',
        }
      }
    },
    payment: {
      initial: 'pending',
      states: {
        pending: {
          on: {
            CHARGE_COMPLETE: 'completed',
            CHARGE_FAILED: 'incompleted'
          }
        },
        completed: {
          type: 'final'
        },
        incompleted: {
          on: {
            CHARGE_RETRY: {
              target: 'pending'
            }
          }
        },
      },
      onDone: 'match'
    },

    match: {
      initial: 'open',
      states: {
        open: {},
        matching: {},
        firstMatched: {},
        lastMatched: {},
        allMatched: {
          type: 'final'
        },
      },
      onDone: 'closed'
    },

    closed: {}
  }
});