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

machine.js

const fetchMachine = Machine({
  id: 'fetch',
  initial: 'unverified',
  context: {
    smsBlockVisible: false,
    verifyCodeButtonDisabled: true,
    phoneNumberInputReadOnly: false,
    sendCodeButtonVisible: true,
    unlinkPhoneButtonVisible: false,
    successMessage: 'undefined',
    errorMessage: 'undefined',
    showSpinner: false,
  },
  states: {
    unverified: {
      on: {
        SEND_CODE: {
          target: 'sms_code_sending',
          actions: assign({
            smsBlockVisible: false,
            verifyCodeButtonDisabled: false,
            phoneNumberInputReadOnly: true,
            sendCodeButtonVisible: false,
            unlinkPhoneButtonVisible: false,
            successMessage: 'undefined',
            errorMessage: 'undefined',
            showSpinner: true,
          }),
        },
        CONFIRM_PHONE: {
          target: 'verified',
          actions: assign({
            smsBlockVisible: false,
            verifyCodeButtonDisabled: true,
            phoneNumberInputReadOnly: true,
            sendCodeButtonVisible: false,
            unlinkPhoneButtonVisible: true,
            successMessage: 'undefined',
            errorMessage: 'undefined',
            showSpinner: false,
          }),
        },
      },
    },
    sms_code_sending: {
      on: {
        CODE_SENT_SUCCESS: {
          target: 'waiting_for_code_verification',
          actions: assign({
            smsBlockVisible: true,
            verifyCodeButtonDisabled: false,
            phoneNumberInputReadOnly: false,
            sendCodeButtonVisible: false,
            unlinkPhoneButtonVisible: false,
            successMessage: 'undefined',
            errorMessage: 'undefined',
            showSpinner: false,
          }),
        },
        CODE_SENT_ERROR: {
          target: 'unverified',
          actions: assign({
            smsBlockVisible: false,
            verifyCodeButtonDisabled: true,
            phoneNumberInputReadOnly: false,
            sendCodeButtonVisible: true,
            unlinkPhoneButtonVisible: false,
            successMessage: 'undefined',
            errorMessage: 'errorMessage',
            showSpinner: false,
          }),
        },
      },
    },

    waiting_for_code_verification: {
      on: {
        CHANGE_PHONE: {
          target: 'unverified',
          actions: assign({
            smsBlockVisible: false,
            verifyCodeButtonDisabled: false,
            phoneNumberInputReadOnly: false,
            sendCodeButtonVisible: true,
            unlinkPhoneButtonVisible: false,
            showSpinner: false,
          }),
        },
        VERIFY_CODE: {
          target: 'sms_code_verifying',
          actions: assign({
            smsBlockVisible: true,
            verifyCodeButtonDisabled: true,
            phoneNumberInputReadOnly: true,
            sendCodeButtonVisible: false,
            unlinkPhoneButtonVisible: false,
            showSpinner: true,
          }),
        },
      },
    },
    sms_code_verifying: {
      on: {
        CODE_VERIFIED_SUCCESS: {
          target: 'verified',
          actions: assign({
            smsBlockVisible: false,
            verifyCodeButtonDisabled: true,
            phoneNumberInputReadOnly: true,
            sendCodeButtonVisible: false,
            unlinkPhoneButtonVisible: true,
            successMessage: 'Вы успешно подтвердили телефон',
            errorMessage: 'undefined',
            showSpinner: false,
          }),
        },
        CODE_VERIFIED_ERROR: {
          target: 'waiting_for_code_verification',
          actions: assign({
            smsBlockVisible: true,
            verifyCodeButtonDisabled: false,
            phoneNumberInputReadOnly: false,
            sendCodeButtonVisible: true,
            unlinkPhoneButtonVisible: false,
            successMessage: 'undefined',
            errorMessage: 'errorMessage',
            showSpinner: false,
          }),
        },
      },
    },
    verified: {
      on: {
        UNLINK_PHONE: {
          target: 'phone_unlinking',
          actions: assign({
            smsBlockVisible: false,
            verifyCodeButtonDisabled: true,
            phoneNumberInputReadOnly: true,
            sendCodeButtonVisible: false,
            unlinkPhoneButtonVisible: false,
            successMessage: 'undefined',
            errorMessage: 'undefined',
            showSpinner: true,
          }),
        },
      },
    },
    phone_unlinking: {
      on: {
        PHONE_UNLINKED_SUCCESS: {
          target: 'unverified',
          actions: assign({
            smsBlockVisible: false,
            verifyCodeButtonDisabled: false,
            phoneNumberInputReadOnly: false,
            sendCodeButtonVisible: true,
            unlinkPhoneButtonVisible: false,
            successMessage: 'Номер телефона успешно отвязан',
            errorMessage: 'undefined',
            showSpinner: false,
          }),
        },
        PHONE_UNLINKED_ERROR: {
          target: 'verified',
          actions: assign({
            smsBlockVisible: false,
            verifyCodeButtonDisabled: true,
            phoneNumberInputReadOnly: true,
            sendCodeButtonVisible: false,
            unlinkPhoneButtonVisible: true,
            successMessage: 'undefined',
            errorMessage: 'errorMessage',
            showSpinner: false,
          }),
        },
      },
    },
  },
});