Functionally complete full registration workflow

src/actions/user/reducer.actions.js

@@ -22,6 +22,12 @@ export function isSendingUserRequest(sendingRequest) {
 
 export function setUserRequestError(exception) {
   let error = parseError(exception);
+
+  if (error.phone_number) {
+    error["Phone Number"] = error.phone_number;
+    delete error["phone_number"];
+  }
+
   return {
     type: SET_USER_REQUEST_ERROR,
     data: error

src/actions/user/saga.actions.js

@@ -1,7 +1,57 @@
-import { SEND_GET_SELF_USER_REQUEST } from "../../constants/user.constants";
+import {
+  GET_SELF_USER_REQUEST,
+  CREATE_USER_INFO_REQUEST,
+  UPDATE_USER_INFO_REQUEST,
+  CREATE_CLIENT_REQUEST,
+  UPDATE_CLIENT_REQUEST,
+  CREATE_PROVIDER_REQUEST,
+  UPDATE_PROVIDER_REQUEST
+} from "../../constants/user.constants";
 
-export function sendGetSelfUserRequest() {
+export function getSelfUserRequest() {
   return {
-    type: SEND_GET_SELF_USER_REQUEST
+    type: GET_SELF_USER_REQUEST
+  };
+}
+
+export function createUserInfoRequest(postBody) {
+  return {
+    type: CREATE_USER_INFO_REQUEST,
+    data: postBody
+  };
+}
+
+export function updateUserInfoRequest(payload) {
+  return {
+    type: UPDATE_USER_INFO_REQUEST,
+    data: payload
+  };
+}
+
+export function createClientRequest(postBody) {
+  return {
+    type: CREATE_CLIENT_REQUEST,
+    data: postBody
+  };
+}
+
+export function updateClientRequest(payload) {
+  return {
+    type: UPDATE_CLIENT_REQUEST,
+    data: payload
+  };
+}
+
+export function createProviderRequest(postBody) {
+  return {
+    type: CREATE_PROVIDER_REQUEST,
+    data: postBody
+  };
+}
+
+export function updateProviderRequest(payload) {
+  return {
+    type: UPDATE_PROVIDER_REQUEST,
+    data: payload
   };
 }

src/api/baseApi.js

@@ -39,9 +39,9 @@ export function post(url, data) {
     .catch(error => Promise.reject(error));
 }
 
-export function patch(url, data) {
+export function put(url, data) {
   return apiInstance
-    .patch(url, data, { headers: headers() })
+    .put(url, data, { headers: headers() })
     .then(response => response.data)
     .catch(error => Promise.reject(error));
 }

src/api/user.api.js

@@ -1,5 +1,69 @@
-import { get } from "./baseApi";
+import { get, post, put } from "./baseApi";
 
+/**
+ * Function wrapping GET request for getting user data
+ */
 export function getSelfUser() {
   return get("/user/").then(resp => Promise.resolve(resp));
 }
+
+/**
+ * Function wrapping POST request for initializing User Info
+ * @param {string} phone_number - user's phone number
+ */
+export function createUserInfo(phone_number) {
+  return post("/userinfo/", { phone_number }).then(resp =>
+    Promise.resolve(resp)
+  );
+}
+
+/**
+ * Function wrapping PUT request for updating User Info
+ * @param {string} username - username for user
+ * @param {string} phone_number - user's phone number
+ */
+export function updateUserInfo(username, phone_number) {
+  return put(`/userinfo/${username}/`, { phone_number }).then(resp =>
+    Promise.resolve(resp)
+  );
+}
+
+/**
+ * Function wrapping POST request for creating a client
+ * @param {string} business_number - user's client business number
+ */
+export function createClient(business_number) {
+  return post("/client/", { business_number }).then(resp =>
+    Promise.resolve(resp)
+  );
+}
+
+/**
+ * Function wrapping PUT request for updating a client
+ * @param {string} username - username for user
+ * @param {*} business_number - user's client business number
+ */
+export function updateClient(username, business_number) {
+  return put(`/client/${username}/`, { business_number }).then(resp =>
+    Promise.resolve(resp)
+  );
+}
+
+/**
+ * Function wrapping POST request for creating a provider
+ * @param {string} sin - user's provider sin
+ */
+export function createProvider(sin) {
+  return post("/provider/", { sin }).then(resp => Promise.resolve(resp));
+}
+
+/**
+ * Function wrapping PUT request for updating a provider
+ * @param {string} username - username for user
+ * @param {*} sin - user's provider sin
+ */
+export function updateProvider(username, sin) {
+  return put(`/provider/${username}/`, { sin }).then(resp =>
+    Promise.resolve(resp)
+  );
+}

src/components/Navbar.jsx

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import { Dropdown, Menu } from "semantic-ui-react";
 
-import { sendGetSelfUserRequest } from "../actions/user/saga.actions";
+import { getSelfUserRequest } from "../actions/user/saga.actions";
 import { sendLogoutRequest } from "../actions/auth/saga.actions";
 
 class Navbar extends Component {
@@ -11,7 +11,7 @@ class Navbar extends Component {
     const { dispatch, userToken, selfUser } = this.props;
     // If the user token exists and the self user object isn't loaded, dispatch
     if (userToken && Object.keys(selfUser).length === 0) {
-      dispatch(sendGetSelfUserRequest());
+      dispatch(getSelfUserRequest());
     }
   }
 

src/components/Shared/PrivateRoute.jsx

@@ -4,7 +4,7 @@ import { connect } from "react-redux";
 import { Redirect, Route } from "react-router-dom";
 import { Loader } from "semantic-ui-react";
 
-import { sendGetSelfUserRequest } from "../../actions/user/saga.actions";
+import { getSelfUserRequest } from "../../actions/user/saga.actions";
 
 const propTypes = {
   userToken: PropTypes.string.isRequired,
@@ -21,7 +21,7 @@ class PrivateRoute extends Component {
     const { dispatch, userToken, selfUser } = this.props;
     // If the user token exists and the self user object isn't loaded, dispatch
     if (userToken && Object.keys(selfUser).length === 0) {
-      dispatch(sendGetSelfUserRequest());
+      dispatch(getSelfUserRequest());
     }
   }
 
@@ -46,7 +46,7 @@ class PrivateRoute extends Component {
     if (
       userToken &&
       Object.keys(selfUser).length &&
-      (!selfUser.client || !selfUser.provider)
+      (!selfUser.client && !selfUser.provider)
     ) {
       return <Redirect to="/user/complete-registration" />;
     }

src/components/User/ClientFormView.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { Container, Form, Header, Message } from "semantic-ui-react";
+
+import Error from "../Shared/Error";
+
+const ClientFormView = ({
+  isSendingUserRequest,
+  userRequestError,
+  userRequestSuccess,
+  businessNumber,
+  changeBusinessNumber,
+  onSubmitClient
+}) => (
+  <Container>
+    <Header>Complete Client Information</Header>
+    <Form
+      loading={isSendingUserRequest}
+      onSubmit={onSubmitClient}
+      error={!!userRequestError}
+      success={!!userRequestSuccess}
+    >
+      <Form.Field>
+        <label>Business Number</label>
+        <input
+          placeholder="12345"
+          type="text"
+          value={businessNumber}
+          onChange={changeBusinessNumber}
+        />
+      </Form.Field>
+      <Error header="Modify Client failed!" error={userRequestError} />
+      <Message success>
+        <Message.Header>Modify Client successful!</Message.Header>
+        <p>Set client successfully.</p>
+      </Message>
+      <Form.Button>Submit Client</Form.Button>
+    </Form>
+  </Container>
+);
+
+export default ClientFormView;

src/components/User/ClientOrProviderForm.jsx

@@ -0,0 +1,64 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { Container, Form, Header } from "semantic-ui-react";
+
+import {
+  setCompleteRegistrationClientOrProvider,
+  setCompleteRegistrationStep
+} from "../../actions/user/reducer.actions";
+import { CLIENT, PROVIDER, COMPLETE_INFORMATION_STEP } from "../../constants/user.constants";
+
+class ClientOrProviderForm extends Component {
+  changeClientOrProvider = (event, { value }) => {
+    this.props.dispatch(setCompleteRegistrationClientOrProvider(value));
+  }
+
+  onSelectClientOrProvider = event => {
+    this.props.dispatch(setCompleteRegistrationStep(COMPLETE_INFORMATION_STEP));
+  }
+
+  render() {
+    const { completeRegistrationClientOrProvider } = this.props;
+    return (
+      <ClientOrProviderFormView
+        clientOrProvider={completeRegistrationClientOrProvider}
+        changeClientOrProvider={this.changeClientOrProvider}
+        onSelectClientOrProvider={this.onSelectClientOrProvider}
+      />
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return { ...state.user };
+}
+
+const ClientOrProviderFormView = ({
+  clientOrProvider,
+  changeClientOrProvider,
+  onSelectClientOrProvider
+}) => (
+  <Container>
+    <Header>Client or Provider</Header>
+    <Form onSubmit={onSelectClientOrProvider}>
+      <Form.Group inline>
+        <label>Client or Provider</label>
+        <Form.Radio
+          label="Client"
+          value={CLIENT}
+          checked={clientOrProvider === CLIENT}
+          onChange={changeClientOrProvider}
+        />
+        <Form.Radio
+          label="Provider"
+          value={PROVIDER}
+          checked={clientOrProvider === PROVIDER}
+          onChange={changeClientOrProvider}
+        />
+      </Form.Group>
+      <Form.Button>Continue</Form.Button>
+    </Form>
+  </Container>
+);
+
+export default connect(mapStateToProps)(ClientOrProviderForm);

src/components/User/CompleteRegistration.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
 import { Redirect } from "react-router-dom";
-import { Grid, Modal, Step } from "semantic-ui-react";
+import { Dimmer, Grid, Loader, Modal, Step } from "semantic-ui-react";
 
 import {
   setCompleteRegistrationStep
@@ -9,8 +9,14 @@ import {
 import {
   USER_INFO_STEP,
   CLIENT_OR_PROVIDER_STEP,
-  COMPLETE_INFORMATION_STEP
+  COMPLETE_INFORMATION_STEP,
+  CLIENT,
+  PROVIDER
 } from "../../constants/user.constants";
+import ClientOrProviderForm from "./ClientOrProviderForm";
+import InitializeClientForm from "./InitializeClientForm";
+import InitializeProviderForm from "./InitializeProviderForm";
+import InitializeUserInfoForm from "./InitializeUserInfoForm";
 
 class CompleteRegistration extends Component {
   onChangeStep = (event, data) => {
@@ -21,11 +27,16 @@ class CompleteRegistration extends Component {
   render() {
     const {
       userToken,
+      selfUser,
       completeRegistrationCurrentStep,
       completeRegistrationMaxStep,
       completeRegistrationClientOrProvider
     } = this.props;
     if (!userToken) return <Redirect to="/auth/login" />;
+    if (Object.keys(selfUser).length === 0)
+      return <Dimmer active><Loader /></Dimmer>;
+    if (selfUser.client || selfUser.provider)
+      return <Redirect to="/user/profile" />;
     return (
       <CompleteRegistrationView
         currentStep={completeRegistrationCurrentStep}
@@ -90,9 +101,14 @@ const CompleteRegistrationView = ({
           </Grid.Column>
         </Grid.Row>
         <Grid.Row>
-        {currentStep === USER_INFO_STEP && <p>User Info</p>}
+          {currentStep === USER_INFO_STEP && <InitializeUserInfoForm />}
-        {currentStep === CLIENT_OR_PROVIDER_STEP && <p>Client or Provider</p>}
+          {currentStep === CLIENT_OR_PROVIDER_STEP && <ClientOrProviderForm />}
-        {currentStep === COMPLETE_INFORMATION_STEP && <p>Complete Info</p>}
+          {currentStep === COMPLETE_INFORMATION_STEP &&
+            completeRegistrationClientOrProvider === CLIENT &&
+            <InitializeClientForm />}
+          {currentStep === COMPLETE_INFORMATION_STEP &&
+            completeRegistrationClientOrProvider === PROVIDER &&
+            <InitializeProviderForm />}
         </Grid.Row>
       </Grid>
     </Modal.Content>

src/components/User/InitializeClientForm.jsx

@@ -0,0 +1,54 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+
+import {
+  clearUserRequestError,
+  clearUserRequestSuccess,
+  setFormBusinessNumber
+} from "../../actions/user/reducer.actions";
+import { createClientRequest } from "../../actions/user/saga.actions";
+import ClientFormView from "./ClientFormView";
+
+class InitializeClientForm extends Component {
+  componentWillMount() {
+    this.props.dispatch(clearUserRequestError());
+    this.props.dispatch(clearUserRequestSuccess());
+  }
+
+  changeBusinessNumber = event => {
+    this.props.dispatch(setFormBusinessNumber(event.target.value));
+  }
+
+  onSubmitClient = event => {
+    event.preventDefault();
+    const { businessNumber } = this.props;
+    this.props.dispatch(
+      createClientRequest({ business_number: businessNumber })
+    );
+  };
+
+  render() {
+    const {
+      isSendingUserRequest,
+      userRequestError,
+      userRequestSuccess,
+      businessNumber
+    } = this.props;
+    return (
+      <ClientFormView
+        isSendingUserRequest={isSendingUserRequest}
+        userRequestError={userRequestError}
+        userRequestSuccess={userRequestSuccess}
+        businessNumber={businessNumber}
+        changeBusinessNumber={this.changeBusinessNumber}
+        onSubmitClient={this.onSubmitClient}
+      />
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return { ...state.user };
+}
+
+export default connect(mapStateToProps)(InitializeClientForm);

src/components/User/InitializeProviderForm.jsx

@@ -0,0 +1,54 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+
+import {
+  clearUserRequestError,
+  clearUserRequestSuccess,
+  setFormSocialInsuranceNumber
+} from "../../actions/user/reducer.actions";
+import { createProviderRequest } from "../../actions/user/saga.actions";
+import ProviderFormView from "./ProviderFormView";
+
+class InitializeProviderForm extends Component {
+  componentWillMount() {
+    this.props.dispatch(clearUserRequestError());
+    this.props.dispatch(clearUserRequestSuccess());
+  }
+
+  changeSocialInsuranceNumber = event => {
+    this.props.dispatch(setFormSocialInsuranceNumber(event.target.value));
+  }
+
+  onSubmitProvider = event => {
+    event.preventDefault();
+    const { socialInsuranceNumber } = this.props;
+    this.props.dispatch(
+      createProviderRequest({ sin: socialInsuranceNumber })
+    );
+  };
+
+  render() {
+    const {
+      isSendingUserRequest,
+      userRequestError,
+      userRequestSuccess,
+      socialInsuranceNumber
+    } = this.props;
+    return (
+      <ProviderFormView
+        isSendingUserRequest={isSendingUserRequest}
+        userRequestError={userRequestError}
+        userRequestSuccess={userRequestSuccess}
+        socialInsuranceNumber={socialInsuranceNumber}
+        changeSocialInsuranceNumber={this.changeSocialInsuranceNumber}
+        onSubmitProvider={this.onSubmitProvider}
+      />
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return { ...state.user };
+}
+
+export default connect(mapStateToProps)(InitializeProviderForm);

src/components/User/InitializeUserInfoForm.jsx

@@ -0,0 +1,76 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+
+import {
+  clearUserRequestError,
+  clearUserRequestSuccess,
+  setFormPhoneNumber
+} from "../../actions/user/reducer.actions";
+import {
+  createUserInfoRequest,
+  updateUserInfoRequest
+} from "../../actions/user/saga.actions";
+
+import UserInfoFormView from "./UserInfoFormView";
+
+class InitializeUserInfoForm extends Component {
+  componentWillMount() {
+    this.props.dispatch(clearUserRequestError());
+    this.props.dispatch(clearUserRequestSuccess());
+  }
+
+  changePhoneNumber = event => {
+    this.props.dispatch(setFormPhoneNumber(event.target.value));
+  };
+
+  onSubmitUserInfo = event => {
+    event.preventDefault();
+    const { selfUser, phoneNumber } = this.props;
+    const phoneNumberVal =
+      phoneNumber || (selfUser.userinfo || {}).phone_number;
+
+    if (selfUser.userinfo) {
+      this.props.dispatch(
+        updateUserInfoRequest({
+          ...selfUser.userinfo,
+          username: selfUser.username,
+          phone_number: phoneNumberVal
+        })
+      );
+    } else {
+      this.props.dispatch(
+        createUserInfoRequest({
+          phone_number: phoneNumberVal
+        })
+      );
+    }
+  };
+
+  render() {
+    const {
+      isSendingUserRequest,
+      userRequestError,
+      userRequestSuccess,
+      selfUser,
+      phoneNumber
+    } = this.props;
+    const phoneNumberVal =
+      phoneNumber || (selfUser.userinfo || {}).phone_number;
+    return (
+      <UserInfoFormView
+        isSendingUserRequest={isSendingUserRequest}
+        userRequestError={userRequestError}
+        userRequestSuccess={userRequestSuccess}
+        phoneNumber={phoneNumberVal}
+        changePhoneNumber={this.changePhoneNumber}
+        onSubmitUserInfo={this.onSubmitUserInfo}
+      />
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return { ...state.user };
+}
+
+export default connect(mapStateToProps)(InitializeUserInfoForm);

src/components/User/ProviderFormView.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { Container, Form, Header, Message } from "semantic-ui-react";
+
+import Error from "../Shared/Error";
+
+const ProviderFormView = ({
+  isSendingUserRequest,
+  userRequestError,
+  userRequestSuccess,
+  socialInsuranceNumber,
+  changeSocialInsuranceNumber,
+  onSubmitProvider
+}) => (
+  <Container>
+    <Header>Complete Provider Information</Header>
+    <Form
+      loading={isSendingUserRequest}
+      onSubmit={onSubmitProvider}
+      error={!!userRequestError}
+      success={!!userRequestSuccess}
+    >
+      <Form.Field>
+        <label>Social Insurance Number</label>
+        <input
+          placeholder="98765"
+          type="text"
+          value={socialInsuranceNumber}
+          onChange={changeSocialInsuranceNumber}
+        />
+      </Form.Field>
+      <Error header="Modify Provider failed!" error={userRequestError} />
+      <Message success>
+        <Message.Header>Modify Provider successful!</Message.Header>
+        <p>Set provider successfully.</p>
+      </Message>
+      <Form.Button>Submit Provider</Form.Button>
+    </Form>
+  </Container>
+);
+
+export default ProviderFormView;

src/components/User/UserInfoFormView.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { Container, Form, Header, Message } from "semantic-ui-react";
+
+import Error from "../Shared/Error";
+
+const UserInfoFormView = ({
+  isSendingUserRequest,
+  userRequestError,
+  userRequestSuccess,
+  phoneNumber,
+  changePhoneNumber,
+  onSubmitUserInfo
+}) => (
+  <Container>
+    <Header>User Info</Header>
+    <Form
+      loading={isSendingUserRequest}
+      onSubmit={onSubmitUserInfo}
+      error={!!userRequestError}
+      success={!!userRequestSuccess}
+    >
+      <Form.Field>
+        <label>Phone Number</label>
+        <input
+          placeholder="780-999-9999"
+          type="tel"
+          value={phoneNumber}
+          onChange={changePhoneNumber}
+        />
+      </Form.Field>
+      <Error header="Modify User Info failed!" error={userRequestError} />
+      <Message success>
+        <Message.Header>Modify User Info successful!</Message.Header>
+        <p>Set user info successfully.</p>
+      </Message>
+      <Form.Button>Submit User Info</Form.Button>
+    </Form>
+  </Container>
+);
+
+export default UserInfoFormView;

src/constants/user.constants.js

@@ -14,7 +14,13 @@ export const SET_FORM_SOCIAL_INSURANCE_NUMBER =
   "SET_FORM_SOCIAL_INSURANCE_NUMBER";
 
 // Saga User Action Constants
-export const SEND_GET_SELF_USER_REQUEST = "SEND_GET_SELF_USER_REQUEST";
+export const GET_SELF_USER_REQUEST = "GET_SELF_USER_REQUEST";
+export const CREATE_USER_INFO_REQUEST = "CREATE_USER_INFO_REQUEST";
+export const UPDATE_USER_INFO_REQUEST = "UPDATE_USER_INFO_REQUEST";
+export const CREATE_CLIENT_REQUEST = "CREATE_CLIENT_REQUEST";
+export const UPDATE_CLIENT_REQUEST = "UPDATE_CLIENT_REQUEST";
+export const CREATE_PROVIDER_REQUEST = "CREATE_PROVIDER_REQUEST";
+export const UPDATE_PROVIDER_REQUEST = "UPDATE_PROVIDER_REQUEST";
 
 // Misc. User Constants (int so we can mark prior as completed)
 export const USER_INFO_STEP = 1;

src/reducers/userReducer.js

@@ -10,7 +10,8 @@ import {
   SET_FORM_PHONE_NUMBER,
   SET_FORM_BUSINESS_NUMBER,
   SET_FORM_SOCIAL_INSURANCE_NUMBER,
-  USER_INFO_STEP
+  USER_INFO_STEP,
+  CLIENT
 } from "../constants/user.constants";
 
 const initialState = {
@@ -20,7 +21,7 @@ const initialState = {
   selfUser: {},
   completeRegistrationCurrentStep: USER_INFO_STEP,
   completeRegistrationMaxStep: USER_INFO_STEP,
-  completeRegistrationClientOrProvider: "",
+  completeRegistrationClientOrProvider: CLIENT,
   phoneNumber: "",
   businessNumber: "",
   socialInsuranceNumber: ""

src/sagas/index.js

@@ -18,10 +18,22 @@ import {
   resetPasswordFlow,
 } from "./auth.sagas";
 import {
-  SEND_GET_SELF_USER_REQUEST
+  GET_SELF_USER_REQUEST,
+  CREATE_USER_INFO_REQUEST,
+  UPDATE_USER_INFO_REQUEST,
+  CREATE_CLIENT_REQUEST,
+  UPDATE_CLIENT_REQUEST,
+  CREATE_PROVIDER_REQUEST,
+  UPDATE_PROVIDER_REQUEST
 } from "../constants/user.constants";
 import {
-  getSelfUserFlow
+  getSelfUserFlow,
+  createUserInfoFlow,
+  updateUserInfoFlow,
+  createClientFlow,
+  updateClientFlow,
+  createProviderFlow,
+  updateProviderFlow
 } from "./user.sagas";
 
 export default function* rootSaga() {
@@ -32,5 +44,11 @@ export default function* rootSaga() {
   yield takeLatest(SEND_CHANGE_PASSWORD_REQUEST, changePasswordFlow);
   yield takeLatest(SEND_FORGOT_PASSWORD_REQUEST, forgotPasswordFlow);
   yield takeLatest(SEND_RESET_PASSWORD_REQUEST, resetPasswordFlow);
-  yield takeLatest(SEND_GET_SELF_USER_REQUEST, getSelfUserFlow);
+  yield takeLatest(GET_SELF_USER_REQUEST, getSelfUserFlow);
+  yield takeLatest(CREATE_USER_INFO_REQUEST, createUserInfoFlow);
+  yield takeLatest(UPDATE_USER_INFO_REQUEST, updateUserInfoFlow);
+  yield takeLatest(CREATE_CLIENT_REQUEST, createClientFlow);
+  yield takeLatest(UPDATE_CLIENT_REQUEST, updateClientFlow);
+  yield takeLatest(CREATE_PROVIDER_REQUEST, createProviderFlow);
+  yield takeLatest(UPDATE_PROVIDER_REQUEST, updateProviderFlow);
 }

src/sagas/user.sagas.js

@@ -6,9 +6,12 @@ import {
   setUserRequestSuccess,
   clearUserRequestError,
   clearUserRequestSuccess,
-  setSelfUser
+  setSelfUser,
+  setCompleteRegistrationStep
 } from "../actions/user/reducer.actions";
-import { getSelfUser } from "../api/user.api";
+import { getSelfUserRequest } from "../actions/user/saga.actions";
+import { CLIENT_OR_PROVIDER_STEP } from "../constants/user.constants";
+import { getSelfUser, createUserInfo, updateUserInfo, createClient, updateClient, createProvider, updateProvider } from "../api/user.api";
 
 function* getSelfUserCall() {
   yield effects.put(isSendingUserRequest(true));
@@ -32,6 +35,84 @@ function* getSelfUserCall() {
   }
 }
 
+function* createUserInfoCall(postBody) {
+  yield effects.put(isSendingUserRequest(true));
+  const { phone_number } = postBody;
+  try {
+    return yield effects.call(createUserInfo, phone_number);
+  } catch (exception) {
+    yield effects.put(setUserRequestError(exception));
+    return false;
+  } finally {
+    yield effects.put(isSendingUserRequest(false));
+  }
+}
+
+function* updateUserInfoCall(payload) {
+  yield effects.put(isSendingUserRequest(true));
+  const { username, phone_number } = payload;
+  try {
+    return yield effects.call(updateUserInfo, username, phone_number);
+  } catch (exception) {
+    yield effects.put(setUserRequestError(exception));
+    return false;
+  } finally {
+    yield effects.put(isSendingUserRequest(false));
+  }
+}
+
+function* createClientCall(postBody) {
+  yield effects.put(isSendingUserRequest(true));
+  const { business_number } = postBody;
+  try {
+    return yield effects.call(createClient, business_number);
+  } catch (exception) {
+    yield effects.put(setUserRequestError(exception));
+    return false;
+  } finally {
+    yield effects.put(isSendingUserRequest(false));
+  }
+}
+
+function* updateClientCall(payload) {
+  yield effects.put(isSendingUserRequest(true));
+  const { username, business_number } = payload;
+  try {
+    return yield effects.call(updateClient, username, business_number);
+  } catch (exception) {
+    yield effects.put(setUserRequestError(exception));
+    return false;
+  } finally {
+    yield effects.put(isSendingUserRequest(false));
+  }
+}
+
+function* createProviderCall(postBody) {
+  yield effects.put(isSendingUserRequest(true));
+  const { sin } = postBody;
+  try {
+    return yield effects.call(createProvider, sin);
+  } catch (exception) {
+    yield effects.put(setUserRequestError(exception));
+    return false;
+  } finally {
+    yield effects.put(isSendingUserRequest(false));
+  }
+}
+
+function* updateProviderCall(payload) {
+  yield effects.put(isSendingUserRequest(true));
+  const { username, sin } = payload;
+  try {
+    return yield effects.call(updateProvider, username, sin);
+  } catch (exception) {
+    yield effects.put(setUserRequestError(exception));
+    return false;
+  } finally {
+    yield effects.put(isSendingUserRequest(false));
+  }
+}
+
 export function* getSelfUserFlow(request) {
   yield effects.put(clearUserRequestSuccess());
   yield effects.put(clearUserRequestError());
@@ -41,3 +122,65 @@ export function* getSelfUserFlow(request) {
     yield effects.put(setSelfUser({}));
   }
 }
+
+export function* createUserInfoFlow(request) {
+  yield effects.put(clearUserRequestSuccess());
+  yield effects.put(clearUserRequestError());
+  const wasSuccessful = yield effects.call(createUserInfoCall, request.data);
+  if (wasSuccessful) {
+    yield effects.put(clearUserRequestError());
+    yield effects.put(setCompleteRegistrationStep(CLIENT_OR_PROVIDER_STEP));
+    yield effects.put(getSelfUserRequest());
+  }
+}
+
+export function* updateUserInfoFlow(request) {
+  yield effects.put(clearUserRequestSuccess());
+  yield effects.put(clearUserRequestError());
+  const wasSuccessful = yield effects.call(updateUserInfoCall, request.data);
+  if (wasSuccessful) {
+    yield effects.put(clearUserRequestError());
+    yield effects.put(setCompleteRegistrationStep(CLIENT_OR_PROVIDER_STEP));
+    yield effects.put(getSelfUserRequest());
+  }
+}
+
+export function* createClientFlow(request) {
+  yield effects.put(clearUserRequestSuccess());
+  yield effects.put(clearUserRequestError());
+  const wasSuccessful = yield effects.call(createClientCall, request.data);
+  if (wasSuccessful) {
+    yield effects.put(clearUserRequestError());
+    yield effects.put(getSelfUserRequest());
+  }
+}
+
+export function* updateClientFlow(request) {
+  yield effects.put(clearUserRequestSuccess());
+  yield effects.put(clearUserRequestError());
+  const wasSuccessful = yield effects.call(updateClientCall, request.data);
+  if (wasSuccessful) {
+    yield effects.put(clearUserRequestError());
+    yield effects.put(getSelfUserRequest());
+  }
+}
+
+export function* createProviderFlow(request) {
+  yield effects.put(clearUserRequestSuccess());
+  yield effects.put(clearUserRequestError());
+  const wasSuccessful = yield effects.call(createProviderCall, request.data);
+  if (wasSuccessful) {
+    yield effects.put(clearUserRequestError());
+    yield effects.put(getSelfUserRequest());
+  }
+}
+
+export function* updateProviderFlow(request) {
+  yield effects.put(clearUserRequestSuccess());
+  yield effects.put(clearUserRequestError());
+  const wasSuccessful = yield effects.call(updateProviderCall, request.data);
+  if (wasSuccessful) {
+    yield effects.put(clearUserRequestError());
+    yield effects.put(getSelfUserRequest());
+  }
+}