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

machine.js

const underwritingStates = {
  id: "underwriting",
  initial: "PENDING",
  states:{
    PENDING: {
      on: {
        approve: "APPROVED",
        reject: "REJECTED",
        ask_for_cosigner: "COSIGNER_NEEDED"
      }
    },
    APPROVED: {},
    REJECTED: {type:"final"},
    COSIGNER_NEEDED: {
      on: {
        approve: "APPROVED",
        reject_cosigner: "COSIGNER_REJECTED",
      }
    },
    COSIGNER_REJECTED: {
      on: {
        approve: "APPROVED",
        reject: "REJECTED",
      }
    }
  }
}

const screenStates = {
  id: "screen",
  initial :"COURSE_DETAILS",
  states: {
    COURSE_DETAILS: {
      on: {
        whitelisted_course: "PERSONAL_DETAILS",
        non_whitelisted_course:"#loan.REJECTED"
      }
    },
    PERSONAL_DETAILS: {
      on: {
        submit: "PROFESSIONAL_DETAILS"
      }
    },
    PROFESSIONAL_DETAILS: {
      on: {
        submit: "PAYMENT_DETAILS"
      }
    },
    PAYMENT_DETAILS: {
      on: {
        underwriting_approved: "OFFER_DETAILS",
        underwriting_rejected: "#loan.REJECTED",
        underwriting_cosigner_needed: "COSIGNER_DETAILS"
      },
      ...underwritingStates
    },
    OFFER_DETAILS: {
      on: {
        accept_offer: "ADDRESS_DETAILS",
        add_cosigner:"COSIGNER_DETAILS"
      }
    },
    COSIGNER_DETAILS: {
      on: {
        submit: {
          actions:[assign({cosigners : ctx => ctx.cosigners + 1})]
        }
      }
    },
    ADDRESS_DETAILS: {
      on: {
        submit: "DOCUMENTS_UPLOAD"
      }
    },
    DOCUMENTS_UPLOAD: {
      on: {
        submit: "#loan.APPROVED"
      }
    },
  }
}

const loanStates = Machine({
  id: "loan",
  context: {
    cosigners:0
  },
  initial: "PENDING",
  states: {
    PENDING:{
      ...screenStates
    },
    APPROVED: {type:"final"},
    REJECTED: {type:"final"}
  }
})