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

machine.js

const PIN = 1234;
 const pinMachine = Machine({
  id: "wizard",
  context: {
    phone: "",
    pin: "",
    retries: 0
  },
  initial: "phone",
  states: {
    phone: {
      on: {
        NEXT: {
          target: "pin",
          actions: assign({ phone: (_, e) => e.value })
        }
      }
    },
    pin: {
      on: {
        NEXT: {
          target: "checkPin",
          actions: assign({ pin: (_, e) => e.value }),
        }
      }
    },
    checkPin: {
      invoke: {
        id: "checkPin",
        src: (context) => context.pin === PIN,
        actions: assign({ pin: (context) => context.retires++ }),
        cond: (context) => context.retries < 3,
        onDone: "success",
        onError: "failure"
      }
    },
    failure: {
      on: {
        RETRY: "checkPin",
      }
    },
    success: {
      type: "final"
    }
  }
});