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

machine.js

const randomResolution = () => new Promise(resolve => {
    setTimeout(() => {
        Math.random() < 0.5 ? resolve(true) : resolve(false);
    }, 1000);
});
const checkForApplication = randomResolution;
const submitApplication = randomResolution;
const DEFAULT_CONTEXT = {
    applicantContact: false,
    authenticated: false,
    denied: false,
    existingApplication: false,
    hasCoapplicant: false,
    lenderContact: false,
    newApplication: false,
};
const applicationMachine = Machine({
  
  id: "prequal-application",
  initial: "initializing",
  context: DEFAULT_CONTEXT,
  states: {
    initializing: {
      on: {
        "": [
          {
            target: "terms.authenticated",
            cond: context => context.authenticated,
          },
          { target: "terms.idle" },
        ],
      },
    },
    terms: {
      id: "terms",
      states: {
        authenticated: {
          on: {
            NEXT: "#info",
          },
        },
        idle: {
          on: {
            CHECKED: "valid",
          },
        },
        valid: {
          on: {
            NEXT: "#info",
            UNCHECKED: "invalid",
          },
        },
        invalid: {
          on: {
            CHECKED: "valid",
          },
        },
      },
    },
    info: {
      id: "info",
      initial: "idle",
      states: {
        idle: {
          on: {
            NEXT: "validating",
          },
        },
        validating: {
          on: {
            VALID: "checkingForApplication",
            INVALID: "idle",
          },
        },
        checkingForApplication: {
          invoke: {
            src: context => async callback => {
              if (context.existingApplication) {
                callback("EXISTS");
              } else if (context.newApplication) {
                callback("NEW");
              } else {
                const existing = await checkForApplication();
                callback(existing ? "EXISTS" : "NEW");
              }
            },
          },
          on: {
            EXISTS: {
              target: "#success.fetchingOffers",
              actions: assign({
                existingApplication: true,
              }),
            },
            NEW: {
              target: "#residence",
              actions: assign({
                newApplication: true,
              }),
            },
          },
        },
      },
    },
    residence: {
      id: "residence",
      initial: "idle",
      states: {
        idle: {
          on: {
            NEXT: "validating",
          },
        },
        validating: {
          on: {
            VALID: "#employment",
            INVALID: "idle",
          },
        },
      },
    },
    employment: {
      id: "employment",
      initial: "idle",
      states: {
        idle: {
          on: {
            NEXT: "validating",
          },
        },
        validating: {
          on: {
            VALID: "#review",
            INVALID: "idle",
          },
        },
      },
    },
    review: {
      id: "review",
      initial: "idle",
      states: {
        idle: {
          on: {
            CHECKED: "valid",
          },
        },
        valid: {
          on: {
            NEXT: "submittingApplication",
            UNCHECKED: "invalid",
          },
        },
        invalid: {
          on: {
            CHECKED: "valid",
          },
        },
        submittingApplication: {
          invoke: {
            src: () => async callback => {
              // Handle other states
              const approved = await submitApplication();
              callback(approved ? "APPROVED" : "DENIED");
            },
          },
          on: {
            APPROVED: "#success.loading",
            DENIED: "#error",
          },
        },
      },
    },
    success: {
      id: "success",
      states: {
        loading: {
          on: {
            "": "fetchingOffers",
          },
        },
        fetchingOffers: {},
        idle: {},
      },
    },
    error: {
      id: "error",
    },
  },

});