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

machine.js

const machine = Machine(
  {
    id: "wizard",
    initial: "nameEntry",
    context: { values: {} },
    meta: { version: 2 },

    states: {
      nameEntry: {
        on: {
          NEXT: {
            target: "dobEntry",
            actions: ["setValues", "persist"],
          },
        },
        meta: {
          step: 1,
        },
      },

      dobEntry: {
        on: {
          BACK: "nameEntry",
          NEXT: {
            target: "phoneEntry",
            actions: ["setValues", "persist"],
          },
        },
        meta: {
          step: 2,
        },
      },

      phoneEntry: {
        on: {
          BACK: "dobEntry",
          NEXT: {
            target: "addressEntry.hist",
            actions: ["setValues", "persist"],
          },
        },
        meta: {
          step: 3,
        },
      },

      addressEntry: {
        initial: "lookup",
        states: {
          lookup: {
            on: {
              FOUND: "full",
              FAILED: "full",
              MANUAL: "full",
            },
          },
          full: {
            initial: "primaryOnly",
            states: {
              primaryOnly: {
                on: {
                  ADD_PREVIOUS: "previous",
                },
              },
              previous: {
                initial: "lookup",
                states: {
                  lookup: {
                    on: {
                      FOUND: "full",
                      FAILED: "full",
                      MANUAL: "full",
                    },
                  },
                  full: {},
                },
                on: {
                  REMOVE_PREVIOUS: "primaryOnly",
                },
              },
            },
          },
          hist: {
            type: "history",
            history: "deep",
          },
        },
        on: {
          BACK: "phoneEntry",
          NEXT: {
            target: "confirmation",
            actions: ["setValues", "persist"],
          },
        },
        meta: {
          step: 4,
        },
      },

      confirmation: {
        on: {
          EDIT_NAME: "nameEntry",
          EDIT_DOB: "dobEntry",
          EDIT_PHONE: "phoneEntry",
          EDIT_ADDRESS: "addressEntry.hist",
          EDIT_PREVIOUS_ADDRESS: "addressEntry.full.previous",
          BACK: "addressEntry.hist",
          SAVE: "completed",
        },
        meta: {
          step: 5,
        },
      },

      completed: {
        type: "final",
      },
    },
  },
  {
    actions: {
      setValues: assign({
        values: (context, event) => ({ ...context.values, ...event.values }),
      }),
    },
  }
)