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

machine.js

const sendCode = (email) => {
  let serverError = Math.random() < 0.25

  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (serverError) {
        reject({ code: 3 })
      }

      if (email === '[email protected]') {
        resolve()
      }

      reject({ code: 1 })
    }, 1500)
  })
}

const verifyCode = (code) => {
  let error = Math.random() < 0.25
  let expired = Math.random() < 0.25

  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (error) {
        reject({ code: 3 })
      }

      if (expired) {
        reject({ code: 2 })
      }

      if (code === '12345') {
        resolve()
      }

      reject({ code: 1 })
    }, 1500)
  })
}

const loginMachine = Machine({
  id: 'login',
  initial: 'email',
  context: {
    email: '',
    code: '',
  },
  states: {
    email: {
      initial: 'ready',
      states: {
        ready: {
          on: {
            SUBMIT: [
              {
                cond: 'isEmailEmpty',
                target: 'ready.error.empty',
              },
              {
                cond: 'isEmailBadFormat',
                target: 'ready.error.badFormat',
              },
              { target: 'waiting' },
            ],
            INPUT_EMAIL: {
              actions: 'cacheEmail',
              target: 'ready',
            },
            TOGGLE: '#login.code',
          },
          initial: 'noError',
          states: {
            noError: {},
            error: {
              initial: 'empty',
              states: {
                empty: {},
                badFormat: {},
                server: {},
              },
            },
          },
        },
        waiting: {
          invoke: {
            src: 'handleEmail',
            onDone: '#login.code.ready',
            onError: [
              {
                cond: 'isEmailEmpty',
                target: 'ready.error.empty',
              },
              {
                cond: 'isEmailBadFormat',
                target: 'ready.error.badFormat',
              },
              {
                cond: 'isServerError',
                target: 'ready.error.server',
              },
            ],
          },
        },
      },
    },
    code: {
      initial: 'ready',
      states: {
        ready: {
          on: {
            SUBMIT: [
              {
                cond: 'isCodeEmpty',
                target: 'ready.error.empty',
              },
              {
                cond: 'isCodeBadFormat',
                target: 'ready.error.badFormat',
              },
              { target: 'waiting' },
            ],
            INPUT_CODE: {
              actions: 'cacheCode',
              target: 'ready',
            },
            TOGGLE: '#login.email',
          },
          initial: 'noError',
          states: {
            noError: {},
            error: {
              initial: 'empty',
              states: {
                empty: {},
                badFormat: {},
                expired: {},
                server: {},
              },
            },
          },
        },
        waiting: {
          invoke: {
            src: 'handleCode',
            onDone: '#login.dashboard',
            onError: [
              {
                cond: 'isCodeEmpty',
                target: 'ready.error.empty',
              },
              {
                cond: 'isCodeBadFormat',
                target: 'ready.error.badFormat',
              },
              {
                cond: 'isCodeExpired',
                target: 'ready.error.expired',
              },
              {
                cond: 'isServerError',
                target: 'ready.error.server',
              },
            ],
          },
        },
      },
    },
    dashboard: { type: 'final' }
  },
}, {
  guards: {
    isEmailEmpty: (ctx, evt) => ctx.email === '',
    isEmailBadFormat: (ctx, evt) => evt.data && evt.data.code === 1,
    isCodeEmpty: (ctx, evt) => ctx.code === '',
    isCodeBadFormat: (ctx, evt) => evt.data && evt.data.code === 1,
    isCodeExpired: (ctx, evt) => evt.data && evt.data.code === 2,
    isServerError: (ctx, evt) => evt.data && evt.data.code === 3,
  },
  services: {
    handleEmail: (ctx, evt) => sendCode(ctx.email),
    handleCode: (ctx, evt) => verifyCode(ctx.code),
  },
  actions: {
    cacheEmail: assign((ctx, evt) => ({
      email: evt.email
    })),
    cacheCode: assign((ctx, evt) => ({
      code: evt.code
    })),
  },
})