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

machine.js

const machine = Machine(
  {
    id: "wizard",
    initial: "nameEntry",
    context: { values: {} },
    states: {
      nameEntry: {
        on: {
          NEXT: {
            target: "dobEntry",
            actions: ["setValues"],
          },
        },
        meta: {
          step: 1,
        },
      },
      dobEntry: {
        on: {
          BACK: "nameEntry",
          NEXT: "phoneEntry",
        },
        meta: {
          step: 2,
        },
      },
      phoneEntry: {
        on: {
          BACK: "dobEntry",
          NEXT: "addressEntry.hist",
        },
        meta: {
          step: 3,
        },
      },
      addressEntry: {
        initial: "lookup",
        states: {
          lookup: {
            on: {
              FOUND: "manual",
              FAILED: "manual",
              MANUAL: "manual",
            },
          },
          manual: {
            on: {
              ADD_PREVIOUS: "previous",
            },
          },
          previous: {
            on: {
              REMOVE_PREVIOUS: "manual",
            },
          },
          hist: {
            type: "history",
          },
        },
        on: {
          BACK: "phoneEntry",
          NEXT: "confirmation",
        },
        meta: {
          step: 4,
        },
      },
      confirmation: {
        on: {
          EDIT_NAME: "nameEntry",
          EDIT_DOB: "dobEntry",
          EDIT_PHONE: "phoneEntry",
          EDIT_ADDRESS: "addressEntry.hist",
          EDIT_PREVIOUS_ADDRESS: "addressEntry.previous",
          BACK: "addressEntry",
          SAVE: "completed",
        },
        meta: {
          step: 5,
        },
      },
      completed: {
        type: "final",
      },
    },
  },
  {
    actions: {
      setValues: assign({
        values: (context, event) => ({ ...context.values, ...event.values }),
      }),
    },
  }
);