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

machine.js

const vendingMachine = Machine(
  {
    id: "vendingMachine",
    initial: "idle",
    context: {
      deposited: 0,
    },
    states: {
      idle: {
        on: {
          SELECT_ITEM: {
            target: "vending",
            cond: "depositedEnough",
          },
          DEPOSIT_QUATER: {
            actions: ["addQuarter"],
          },
        },
      },
      vending: {},
    },
  },
  {
    actions: {
      addQuarter: assign({
        deposited: (context) => context.deposited + 25,
      }),
    },
    guards: {
      depositedEnough: (context) => context.deposited >= 100,
    },
  }
);