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

machine.js

const singleMachine = Machine({
  id: "single",
  initial: "default",
  context: {
    betId: undefined,
    betName: "",
    isEachWay: false,
    stake: "",
    warnings: []
  },
  on: {
    TOGGLE_EACH_WAY: {
      target: ".default.each_way",
      actions: [
        assign({ isEachWay: ctx => !ctx.isEachWay })
      ]
    },
    DELETE: "deleted"
  },
  states: {
    default: {
      initial: "unknown",
      states: {
        unknown: {
          on: {
            "": [
              {
                target: "warning",
                cond: ctx => ctx.warnings && ctx.warnings.length > 0
              },
              { target: "each_way", cond: ctx => ctx.isEachWay },
              { target: "not_each_way" }
            ]
          }
        },
        not_each_way: {
          on: {
            CHANGE_STAKE: {
              target: "unknown",
              actions: assign({ stake: (ctx, e) => e.value })
            }
          }
        },
        each_way: {
          on: {
            CHANGE_STAKE: {
              target: "unknown",
              actions: assign({ stake: (ctx, e) => e.value })
            }
          }
        },
        warning: {
          on: {
            CHANGE_STAKE: {
              target: "default",
              actions: [
                assign({
                  stake: (ctx, e) => e.value,
                  warnings: ctx => ctx.warnings.filter(w => w.code !== "P100")
                })
                // sendParent(ctx => ({ type: "TODO.COMMIT", todo: ctx }))
              ]
            }
          }
        },
        hist: {
          type: "history"
        }
      }
    },
    deleted: {
      onEntry: sendParent(ctx => ({ type: "SINGLE.REMOVE", betId: ctx.betId }))
    }
  }
});

const betslipMachine = Machine({
  id: "betslip",
  context: {
    bookieList: [],
    selectedBetIds: [],
    selectedBets: [],
    singles: []
  },
  initial: "initializing",
  states: {
    initializing: {
      entry: assign({
        singles: (ctx, e) => {
          return ctx.singles.map(single => ({
            ...single,
            ref: spawn(singleMachine.withContext(single))
          }));
        }
      }),
      on: {
        "": "default"
      }
    },
    default: {},
    bookie_select: {}
  },
  on: {
    "SHOW.betslip": ".default",
    "SHOW.bookieSelect": ".bookie_select",
    "SINGLE.REMOVE": {
      actions: [
        assign({
          singles: (ctx, e) =>
            ctx.singles.filter(single => single.betId !== e.betId)
        }),
        "persist"
      ]
    },
    "BETSLIP.CLEAR": {
      actions: [
        assign({
          selectedBetIds: [],
          selectedBets: [],
          singles: []
        }),
        "persist"
      ]
    }
  }
});