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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
const signupMachine = Machine({
  id: 'signup',
  initial: 'ready',
  context: {
    email: '[email protected]',
    first: 'first',
    last: 'last',
    code: '12345',
  },
  states: {
    ready: {
      type: 'parallel',
      on: {
        SUBMIT: [
          {
            cond: 'isEmailEmpty',
            target: 'ready.email.error.empty'
          },
          {
            cond: 'isEmailBadFormat',
            target: 'ready.email.error.badFormat'
          },
          {
            cond: 'isFirstnameEmpty',
            target: 'ready.firstName.error.empty'
          },
          {
            cond: 'isFirstnameBadFormat',
            target: 'ready.firstName.error.badFormat'
          },
          {
            cond: 'isLastnameEmpty',
            target: 'ready.lastName.error.empty'
          },
          {
            cond: 'isLastnameBadFormat',
            target: 'ready.lastName.error.badFormat'
          },
          { target: 'emailService' }
        ]
      },
      states: {
        email: {
          on: {
            INPUT: {
              actions: 'cacheEmail',
              target: 'email.noError'
            }
          },
          initial: 'noError',
          states: {
            noError: {},
            error: {
              initial: 'empty',
              states: {
                empty: {},
                badFormat: {},
                alreadyTaken: {},
              },
            },
          }
        },
        firstName: {
          on: {
            INPUT: {
              actions: 'cacheFirstname',
              target: 'firstName.noError'
            }
          },
          initial: 'noError',
          states: {
            noError: {},
            error: {
              initial: 'empty',
              states: {
                empty: {},
                badFormat: {},
              },
            },
          }
        },
        lastName: {
          on: {
            INPUT: {
              actions: 'cacheLastname',
              target: 'lastName.noError'
            }
          },
          initial: 'noError',
          states: {
            noError: {},
            error: {
              initial: 'empty',
              states: {
                empty: {},
                badFormat: {},
              },
            },
          }
        },
      }
    },
    emailService: {
      on: {
        SUCCESS: 'code',
        ERROR: [
          {
            cond: 'isEmailTaken',
            target: 'ready.email.error.alreadyTaken'
          }
        ],
      },
    },
    code: {
      on: {
        INPUT: {
          actions: 'cacheCode',
          target: 'code.noError'
        },
        SUBMIT: [
          {
            cond: 'isCodeEmpty',
            target: 'code.error.empty'
          },
          {
            cond: 'isCodeInvalid',
            target: 'code.error.invalid'
          },
          {
            cond: 'isCodeExpired',
            target: 'code.error.expired'
          },
          { target: 'codeService' }
        ],
        RESEND: 'emailService',
      },
      initial: 'noError',
      states: {
        noError: {},
        error: {
          initial: 'empty',
          states: {
            empty: {},
            invalid: {},
            expired: {},
          },
        },
      }
    },
    codeService: {
      on: {
        SUCCESS: 'dashboard',
        ERROR: [
          {
            cond: 'isCodeInvalid',
            target: 'code.error.invalid'
          },
          {
            cond: 'isCodeExpired',
            target: 'code.error.expired'
          }
        ]
      }
    },
    dashboard: { type: 'final' }
  },
}, {
  guards: {
    isEmailEmpty: (ctx, evt) => ctx.email === '',
    isEmailBadFormat: (ctx, evt) => ctx.email === 'badFormat',
    isEmailTaken: (ctx, evt) => ctx.email === '[email protected]',
    isFirstnameEmpty: (ctx, evt) => ctx.first === '',
    isFirstnameBadFormat: (ctx, evt) => ctx.first === 'badFormat',
    isLastnameEmpty: (ctx, evt) => ctx.last === '',
    isLastnameBadFormat: (ctx, evt) => ctx.last === 'badFormat',
    isCodeEmpty: (ctx, evt) => ctx.code === '',
    isCodeInvalid: (ctx, evt) => ctx.code !== '12345',
    isCodeExpired: (ctx, evt) => ctx.code === 'expired',
  },
  actions: {
    cacheEmail: (ctx, evt) => assign({
      email: evt.email
    }),
    cacheFirstname: (ctx, evt) => assign({
      first: evt.first
    }),
    cacheLastname: (ctx, evt) => assign({
      lastt: evt.last
    }),
    cacheCode: (ctx, evt) => assign({
      code: evt.code
    }),
  },
});