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

machine.js

const screenerMachine = Machine({
  id: 'screenerMachine',
  initial: 'checkDebtLevels',
  states: {
    checkDebtLevels: {
      on: {
        HIGH: 'segueWithTeam',
        // https://xstate.js.org/docs/guides/communication.html#invoking-machines
        LOW: sendParent('DISQUALIFIED')
      }
    },
    segueWithTeam: {
      after: {
        3000: 'checkConfidenceLevels'
      },
    },
    checkConfidenceLevels: {
      on: {
        // Same result, one w/ shorthand
        CONFIDENT: 'checkIfWantshelp',
        NOT_CONFIDENT: {
          target: 'checkIfWantshelp'
        },
      },
    },
    checkIfWantshelp: {
      type: 'final',
      on: {
        YES: sendParent('QUALIFIED'),
        NO: sendParent('DISQUALIFIED')
      }
    },
  },
});

// In xstate/viz, comment our rest so you can just see the screener

const leadMachine = Machine({
  id: 'leadMachine',
  initial: 'getName',
  states: {
    getName: {
      on: { ENTERED: 'getPhone' },
    },
    getPhone: {
      on: { ENTERED: 'optIn' },
    },
    getOptIn: {
      on: { ENTERED: 'getPhone' },
    },
    submitted: {
      type: 'final'
    }
  },
});

const signUpMachine = Machine({
  id: 'signUpMachine',
  initial: 'upsolveExplanation',
  context: {},
  states: {
    upsolveExplanation: {
      on: {
        START: 'screener'
      }
    },
    screener: {
      // https://xstate.js.org/docs/guides/communication.html#the-invoke-property
      // Can invoke machines, or promises!
      invoke: {
        id: 'screen',
        src: screenerMachine,
        onDone: 'qualified'
      },
      on: {
        // screenerMachine sends events
        QUALIFIED: 'qualified',
        DISQUALIFIED: 'disqualified'
      },
    },
    qualified: {
      type: 'final'
    },
    disqualified: {
      type: 'final',
      invoke: {
        id: 'disqualified',
        src: leadMachine,
      },
    },
  }
})