parent
561664a701
commit
f0c30f1023
18 changed files with 699 additions and 24 deletions
@ -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 { |
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 |
||||||
}; |
}; |
||||||
} |
} |
||||||
|
@ -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() { |
export function getSelfUser() { |
||||||
return get("/user/").then(resp => Promise.resolve(resp)); |
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) |
||||||
|
); |
||||||
|
} |
||||||
|
@ -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; |
@ -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); |
@ -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); |
@ -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); |
@ -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); |
@ -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; |
@ -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; |
Loading…
Reference in new issue