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

machine.js

const sendCode = (email, first, last) => {
  let error = Math.random() < 0.25

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

      if (email === '[email protected]') {
        resolve()
      }
      
      if (first === 'badFormat') {
        reject({ code: 10 })
      }

      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 emailStates = {
  initial: 'noError',
  states: {
    noError: {},
    error: {
      initial: 'empty',
      states: {
        empty: {},
        badFormat: {},
      },
    },
  },
}

const firstStates = {
  initial: 'noError',
  states: {
    noError: {},
    error: {
      initial: 'empty',
      states: {
        empty: {},
        tooShort: {},
      },
    },
  },
}

const lastStates = {
  initial: 'noError',
  states: {
    noError: {},
    error: {
      initial: 'empty',
      states: {
        empty: {},
        tooShort: {},
      },
    },
  },
}

const authStates = {
  initial: 'noError',
  states: {
    noError: {},
    error: {
      initial: 'internal',
      states: {
        internal: {},
      },
    },
  },
}

const codeStates = {
  initial: 'noError',
  states: {
    noError: {},
    error: {
      initial: 'empty',
      states: {
        empty: {},
        badFormat: {},
        expired: {},
      },
    },
  },
}

const signupMachine = Machine({
  id: 'signup',
  initial: 'details',
  context: {
    email: '',
    first: '',
    last: '',
    code: '',
  },
  states: {
    details: {
      initial: 'ready',
      states: {
        ready: {
          type: 'parallel',
          on: {
            SUBMIT: [
              {
                cond: 'isEmailEmpty',
                target: 'ready.email.error.empty',
              },
              {
                cond: 'isEmailBadFormat',
                target: 'ready.email.error.badFormat',
              },
              {
                cond: 'isFirstEmpty',
                target: 'ready.first.error.empty',
              },
              {
                cond: 'isFirstTooShort',
                target: 'ready.first.error.tooShort',
              },
              {
                cond: 'isLastEmpty',
                target: 'ready.last.error.empty',
              },
              {
                cond: 'isLastTooShort',
                target: 'ready.last.error.tooShort',
              },
              { target: 'waiting' },
            ],
            INPUT_EMAIL: {
              actions: 'cacheEmail',
              target: 'ready.email',
            },
            INPUT_FIRST: {
              actions: 'cacheFirst',
              target: 'ready.first',
            },
            INPUT_LAST: {
              actions: 'cacheLast',
              target: 'ready.last',
            },
            TOGGLE: '#signup.verify',
          },
          initial: 'noError',
          states: {
            email: { ...emailStates },
            first: { ...firstStates },
            last: { ...lastStates },
            auth: { ...authStates },
          },
        },
        waiting: {
          invoke: {
            src: 'handleEmail',
            onDone: '#signup.verify.ready',
            onError: [
              {
                cond: 'isEmailEmpty',
                target: 'ready.email.error.empty',
              },
              {
                cond: 'isEmailBadFormat',
                target: 'ready.email.error.badFormat',
              },
              {
                cond: 'isServerError',
                target: 'ready.auth.error.internal',
              },
            ],
          },
        },
      },
    },
    verify: {
      initial: 'ready',
      states: {
        ready: {
          type: 'parallel',
          on: {
            SUBMIT: [
              {
                cond: 'isCodeEmpty',
                target: 'ready.code.error.empty',
              },
              {
                cond: 'isCodeBadFormat',
                target: 'ready.code.error.badFormat',
              },
              { target: 'waiting' },
            ],
            INPUT_CODE: {
              actions: 'cacheCode',
              target: 'ready',
            },
            TOGGLE: '#signup.details',
          },
          initial: 'noError',
          states: {
            code: { ...codeStates },
            auth: { ...authStates },
          },
        },
        waiting: {
          invoke: {
            src: 'handleCode',
            onDone: '#signup.dashboard',
            onError: [
              {
                cond: 'isCodeEmpty',
                target: 'ready.code.error.empty',
              },
              {
                cond: 'isCodeBadFormat',
                target: 'ready.code.error.badFormat',
              },
              {
                cond: 'isCodeExpired',
                target: 'ready.code.error.expired',
              },
              {
                cond: 'isServerError',
                target: 'ready.auth.error.internal',
              },
            ],
          },
        },
      },
    },
    dashboard: { type: 'final' }
  },
}, {
  guards: {
    isEmailEmpty: (ctx, evt) => ctx.email === '',
    isEmailBadFormat: (ctx, evt) => evt.data && evt.data.code === 1,
    isFirstEmpty: (ctx, evt) => ctx.first === '',
    isFirstTooShort: (ctx, evt) => ctx.first.length < 5,
    isLastEmpty: (ctx, evt) => ctx.last === '',
    isLastTooShort: (ctx, evt) => ctx.last.length < 5,
    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, ctx.first, ctx.last),
    handleCode: (ctx, evt) => verifyCode(ctx.code),
  },
  actions: {
    cacheEmail: assign((ctx, evt) => ({
      email: evt.email
    })),
    cacheFirst: assign((ctx, evt) => ({
      first: evt.first
    })),
    cacheLast: assign((ctx, evt) => ({
      last: evt.last
    })),
    cacheCode: assign((ctx, evt) => ({
      code: evt.code
    })),
  },
})