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

machine.js

const submit_register = async data => data;

const update_service = assign((context, event) => {
  return { service: event.data };
});

const update_language = assign((context, event) => {
  return { language: event.data };
});

const update_email = assign((context, event) => {
  return { email: event.data };
});

const update_first_name = assign((context, event) => {
  return { first_name: event.data };
});

const update_last_name = assign((context, event) => {
  return { last_name: event.data };
});

const update_phone = assign((context, event) => {
  return { phone: event.data };
});

const update_password = assign((context, event) => {
  return { password: event.data };
});

const update_password_confirm = assign((context, event) => {
  return { password_confirm: event.data };
});

const update_tou = assign((context, event) => {
  return { tou: event.data };
});

const update_error = assign((context, event) => {
  return { error: event.data };
});

const show_error = (context, event) => {
  show_message(event.data, 'error');
};

const show_info = (context, event) => {
  show_message(event.data, 'info');
};

const not_empty = () => true;

const register_machine = Machine({
  id: 'register',
  initial: 'inactive',
  context: {
    service: null,
    language: null,
    email: null,
    first_name: null,
    last_name: null,
    phone: null,
    password: null,
    password_confirm: null,
    tou: null,
  },
  states: {
    inactive: {
      on: {
        'register.activate': 'active',
      },
    },
    active: {
      on: {
        'register.service.focus': 'service',
        'register.language.focus': 'language',
        'register.email.focus': 'email',
        'register.first_name.focus': 'first_name',
        'register.last_name.focus': 'last_name',
        'register.phone.focus': 'phone',
        'register.password.focus': 'password',
        'register.password_confirm.focus': 'password_confirm',
        'register.tou.focus': 'tou',
        'register.submit': {
          target: 'submit',
          cond: 'valid',
        },
        'register.deactivate': 'inactive',
      },
    },
    service: {
      on: {
        'register.service.change': {
          actions: ['register_update_service'],
        },
        'register.service.blur': 'active',
      },
    },
    language: {
      on: {
        'register.language.change': {
          actions: ['register_update_language'],
        },
        'register.language.blur': 'active',
      },
    },
    email: {
      on: {
        'register.email.change': {
          actions: ['register_update_email'],
        },
        'register.email.blur': 'active',
      },
    },
    first_name: {
      on: {
        'register.first_name.change': {
          actions: ['register_update_first_name'],
        },
        'register.first_name.blur': 'active',
      },
    },
    last_name: {
      on: {
        'register.last_name.change': {
          actions: ['register_update_last_name'],
        },
        'register.last_name.blur': 'active',
      },
    },
    phone: {
      on: {
        'register.phone.change': {
          actions: ['register_update_phone'],
        },
        'register.phone.blur': 'active',
      },
    },
    password: {
      on: {
        'register.password.change': {
          actions: ['register_update_password'],
        },
        'register.password.blur': 'active',
      },
    },
    password_confirm: {
      on: {
        'register.password_confirm.change': {
          actions: ['register_update_password_confirm'],
        },
        'register.password_confirm.blur': 'active',
      },
    },
    tou: {
      on: {
        'register.tou.change': {
          actions: ['register_update_tou'],
        },
        'register.tou.blur': 'active',
      },
    },
    submit: {
      invoke: {
        src: 'submit_register',
        onDone: {
          target: 'success',
          actions: ['register_show_info'],
        },
        onError: {
          target: 'error',
          actions: ['register_update_error'],
        },
      },
    },
    success: {
      type: 'final',
      always: 'inactive',
    },
    error: {
      always: {
        target: 'active',
        actions: 'register_show_error',
      },
    },
  },
},
{
  actions: {
    register_update_error: update_error,
    register_update_service: update_service,
    register_update_language: update_language,
    register_update_email: update_email,
    register_update_first_name: update_first_name,
    register_update_last_name: update_last_name,
    register_update_phone: update_phone,
    register_update_password: update_password,
    register_update_password_confirm: update_password_confirm,
    register_update_tou: update_tou,
    register_show_error: show_error,
    register_show_info: show_info,
  },
  guards: {
    register_valid: not_empty,
  },
  services: {
    submit_register: submit_register,
  },
})