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

machine.js

const addressMachine = Machine(
  {
    id: "address",
    initial: "init",
    states: {
      init: {
        on: {
          "": [
            { target: "edit", cond: "alreadyHasValues" },
            { target: "search" },
          ],
        },
      },
      search: {
        on: {
          FOUND: "edit",
          FAILED: "edit",
          EDIT: "edit",
        },
      },
      edit: {},
    },
  },
  {
    guards: {
      alreadyHasValues: (context) => !!context.alreadyHasValues,
    },
  }
);

const machine = Machine(
  {
    id: "basicInfoWizard",
    initial: "nameEntry",
    context: { values: {}, error: undefined },
    meta: { version: 1, stepCount: 5 },

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

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

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

      addressEntry: {
        initial: "currentOnly",
        invoke: {
          id: "currentAddress",
          src: addressMachine,
          data: {
            alreadyHasValues: (context, event) => !!context.values.address?.[0],
          },
        },
        states: {
          currentOnly: {
            on: {
              ADD_PREVIOUS: "withPrevious",
            },
          },
          withPrevious: {
            invoke: {
              id: "previousAddress",
              src: addressMachine,
              data: {
                alreadyHasValues: (context, event) =>
                  !!context.values.address?.[1],
              },
            },
            on: {
              REMOVE_PREVIOUS: "currentOnly",
            },
          },
          hist: {
            type: "history",
          },
        },
        on: {
          BACK: "phoneEntry",
          NEXT: {
            target: "confirmation",
            actions: ["setValues", "persist", "trackPage"],
          },
        },
        meta: {
          step: 4,
        },
      },

      confirmation: {
        initial: "init",
        states: {
          init: {},
          error: {},
        },
        on: {
          EDIT_NAME: "nameEntry",
          EDIT_DOB: "dobEntry",
          EDIT_PHONE: "phoneEntry",
          EDIT_ADDRESS: "addressEntry.hist",
          EDIT_PREVIOUS_ADDRESS: "addressEntry.withPrevious",
          BACK: "addressEntry.hist",
          SAVE: "submitting",
        },
        meta: {
          step: 5,
        },
      },

      submitting: {
        entry: ["prefetchAccount"],
        invoke: {
          src: "submit",
          onDone: {
            target: "success",
            actions: ["trackComplete"],
          },
          onError: {
            target: "confirmation.error",
            actions: ["setError"],
          },
        },
      },

      success: {
        type: "final",
        entry: ["deletePersistedState", "redirectToAccount"],
      },
    },
  },
  {
    actions: {
      setValues: assign({
        values: (context, event) => ({ ...context.values, ...event.values }),
      }),
      setError: assign({
        error: (context, event) => event.data,
      }),
    },
  }
);