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 MfaType = {
  email: 'EMAIL',
  sms: 'SMS'
}

const service = {
  addMfaOption: opt => Promise.resolve(opt),
  sendCode: opt => Promise.resolve(opt),
  setAlwaysChallenge: opt => Promise.resolve(opt),
  verifyCode: (opt1, opt2) => Promise.resolve(opt1, opt2)
}

const fetchMachine = Machine({
  id: 'enrollment',
  context: {
    code: '',
    frequency: false,
    retries: 0,
    showErrorMessage: false
  },
  type: 'parallel',
  states: {
    ui: {
      initial: 'splash',
      states: {
        splash: {
          on: {
            NEXT: 'selectMfa.list'
          }
        },
        selectMfa: {
          id: 'selectMfa',
          initial: 'list',
          on: {
            PREV: '#enrollment.ui.splash'
          },
          states: {
            addEmail: {
              on: {
                SUBMIT: {
                  target: '#data.addMfa.submit'
                },
                PREV: 'list'
              }
            },
            addPhone: {
              on: {
                SUBMIT: {
                  target: '#data.addMfa.submit'
                },
                PREV: 'list'
              }
            },
            hist: {
              type: 'history'
            },
            list: {
              on: {
                ADD_EMAIL: {
                  actions: 'clearMfa',
                  target: 'addEmail'
                },
                ADD_PHONE: {
                  actions: 'clearMfa',
                  target: 'addPhone'
                },
                NEXT: {
                  cond: 'userSelectedMfaOption',
                  target: '#verify.existing'
                },
                UPDATE: {
                  actions: 'selectMfa'
                }
              }
            }
          }
        },
        verify: {
          id: 'verify',
          on: {
            PREV: '#selectMfa.hist',
            RESEND: {
              target: '#data.sendCode.submit'
            },
            SUBMIT: {
              target: '#data.verifyCode.submit'
            },
            UPDATE: {
              actions: 'setCode'
            }
          },
          states: {
            existing: {},
            hist: {
              type: 'history',
              history: 'deep'
            },
            new: {
              on: {
                '': [
                  { target: 'email', cond: 'isEmail' },
                  { target: 'phone', cond: 'isPhone' }
                ]
              }
            },
            email: {},
            phone: {}
          }
        },
        frequency: {
          id: 'frequency',
          on: {
            SUBMIT: {
              target: '#data.setFrequency.submit'
            },
            UPDATE: {
              actions: 'setFrequency'
            }
          }
        },
        complete: {
          id: 'complete',
          on: {
            COMPLETE: 'final'
          }
        },
        final: {
          type: 'final'
        }
      }
    },
    
    data: {
      id: 'data',
      type: 'parallel',
      states: {
        addMfa: {
          initial: 'idle',
          states: {
            idle: {},
            submit: {
              invoke: {
                id: 'addingMfa',
                src: 'addMfa',
                onError: {
                  actions: 'setError',
                  target: 'idle'
                },
                onDone: {
                  target: ['idle', '#verify.new']
                }
              }
            }
          }
        },
        sendCode: {
          initial: 'idle',
          states: {
            idle: {},
            submit: {
              invoke: {
                id: 'sendingCode',
                src: 'sendCode',
                onError: {
                  actions: 'setError',
                  target: ['#verify.hist', 'idle']
                },
                onDone: {
                  target: ['#frequency', 'idle']
                }
              }
            }
          }
        },
        setFrequency: {
          initial: 'idle',
          states: {
            idle: {},
            submit: {
              invoke: {
                id: 'settingFrequency',
                src: 'setFrequency',
                onError: {
                  actions: 'setError',
                  target: 'idle'
                },
                onDone: {
                  target: ['#complete', 'idle']
                }
              }
            }
          }
        },
        verifyCode: {
          initial: 'idle',
          states: {
            idle: {},
            submit: {
              invoke: {
                id: 'verifyingCode',
                src: 'verifyCode',
                onError: {
                  actions: ['setError', 'setRetries'],
                  target: ['#verify.hist', 'idle']
                },
                onDone: {
                  target: ['#frequency', 'idle']
                }
              }
            }
          }
        }
      }
    }
  }
}, {actions: {
  clearMfa: assign({
    selectedMfaOption: undefined
  }),
  goBack: () => history.back(),
  selectMfa: assign({
    selectedMfaOption: (_, { data }) => data
  }),
  setCode: assign({
    code: (_, { data }) => data
  }),
  setError: assign({
    showErrorMessage: true
  }),
  setFrequency: assign({
    frequency: (_, { data }) => data
  })
},
guards: {
  isEmail: ({ selectedMfaOption }) =>
    selectedMfaOption?.mfaType === MfaType.Email,
  isPhone: ({ selectedMfaOption }) =>
    selectedMfaOption?.mfaType === MfaType.Sms,
  userSelectedMfaOption: ({ selectedMfaOption }) =>
    Boolean(selectedMfaOption?.mfaType)
},
services: {
  addMfa: ({ selectedMfaOption }) => service.addMfaOption(selectedMfaOption),
  sendCode: ({ selectedMfaOption }) => service.sendCode(selectedMfaOption),
  setFrequency: ({ frequency }) => service.setAlwaysChallenge(frequency),
  verifyCode: ({ code, selectedMfaOption }) =>
    service.verifyCode(code, selectedMfaOption?.mfaType || '')
}
});