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

machine.js

const fetchData = () =>
  delay(
    Math.floor(Math.random() * 100) % 2 === 0 ? "staged" : "scheduled",
    1000
  );

const actionableAccountMachine = Machine(
  {
    id: "root",
    initial: "idle",
    context: {
      status: "idle",
    },
    states: {
      idle: {
        on: {
          FETCH: "loading",
        },
      },
      loading: {
        invoke: {
          id: "fetch actionable data",
          src: fetchData,
          onDone: {
            actions: ["setActionableStatus"],
            target: "actionable",
          },
        },
      },
      actionable: {
        on: {
          "": [
            { target: "staged", cond: "isStaged" },
            { target: "scheduled", cond: "isScheduled" },
          ],
        },
      },
      staged: {
        id: "staged",
        on: {
          SCHEDULE: { target: "scheduled" },
          SKIP: "skipped",
        },
      },
      scheduled: {
        id: "scheduled",
        on: {
          CANCEL: { target: "cancelled" },
          PROCESS: { target: "processing" },
        },
      },
      processing: {
        id: "processing",
        on: {
          "": [{ target: "processed" }],
        },
      },
      processed: { id: "processed", type: "final" },
      cancelled: { id: "cancelled", type: "final" },
      skipped: { id: "skipped", type: "final" },
    },
  },
  {
    guards: {
      isStaged: (context, event) => context.status === "staged",
      isScheduled: (context, event) => context.status === "scheduled",
    },
    actions: {
      setActionableStatus: assign({
        status: (_, event) => event.data,
      }),
    },
  }
);

function delay(val, delayMs) {
  return new Promise((resolve) => {
    setTimeout(() => resolve(val), delayMs);
  });
}