You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
1.8 KiB
65 lines
1.8 KiB
7 years ago
|
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);
|