Functionally complete full registration workflow

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);