119 lines
3.9 KiB
JavaScript
119 lines
3.9 KiB
JavaScript
import React, { Component } from "react";
|
|
import { connect } from "react-redux";
|
|
import { Redirect } from "react-router-dom";
|
|
import { Dimmer, Grid, Loader, Modal, Step } from "semantic-ui-react";
|
|
|
|
import {
|
|
setCompleteRegistrationStep
|
|
} from "../../actions/user/reducer.actions";
|
|
import {
|
|
USER_INFO_STEP,
|
|
CLIENT_OR_PROVIDER_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) => {
|
|
event.preventDefault();
|
|
this.props.dispatch(setCompleteRegistrationStep(data.step));
|
|
};
|
|
|
|
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}
|
|
maxStep={completeRegistrationMaxStep}
|
|
completeRegistrationClientOrProvider={
|
|
completeRegistrationClientOrProvider
|
|
}
|
|
onChangeStep={this.onChangeStep}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
function mapStateToProps(state) {
|
|
return {
|
|
...state.user,
|
|
userToken: state.auth.userToken
|
|
};
|
|
}
|
|
|
|
const CompleteRegistrationView = ({
|
|
currentStep,
|
|
maxStep,
|
|
completeRegistrationClientOrProvider,
|
|
onChangeStep
|
|
}) => (
|
|
<Modal defaultOpen={true} closeOnDimmerClick={false} size="large">
|
|
<Modal.Header>Complete Registration</Modal.Header>
|
|
<Modal.Content>
|
|
<Grid>
|
|
<Grid.Row>
|
|
<Grid.Column stretched={true}>
|
|
<Step.Group stackable="tablet" ordered>
|
|
<Step
|
|
completed={maxStep > USER_INFO_STEP}
|
|
active={currentStep === USER_INFO_STEP}
|
|
title="Basic User Info"
|
|
description="Fill out your user information"
|
|
onClick={onChangeStep}
|
|
disabled={maxStep < USER_INFO_STEP}
|
|
step={USER_INFO_STEP}
|
|
/>
|
|
<Step
|
|
completed={maxStep > CLIENT_OR_PROVIDER_STEP}
|
|
active={currentStep === CLIENT_OR_PROVIDER_STEP}
|
|
title="Client or Provider"
|
|
description="Choose to be a Client or a Provider"
|
|
onClick={onChangeStep}
|
|
disabled={maxStep < CLIENT_OR_PROVIDER_STEP}
|
|
step={CLIENT_OR_PROVIDER_STEP}
|
|
/>
|
|
<Step
|
|
completed={maxStep > COMPLETE_INFORMATION_STEP}
|
|
active={currentStep === COMPLETE_INFORMATION_STEP}
|
|
title="Complete Information"
|
|
description="Fill out the client or provider information"
|
|
onClick={onChangeStep}
|
|
disabled={maxStep < COMPLETE_INFORMATION_STEP}
|
|
step={COMPLETE_INFORMATION_STEP}
|
|
/>
|
|
</Step.Group>
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
<Grid.Row>
|
|
{currentStep === USER_INFO_STEP && <InitializeUserInfoForm />}
|
|
{currentStep === CLIENT_OR_PROVIDER_STEP && <ClientOrProviderForm />}
|
|
{currentStep === COMPLETE_INFORMATION_STEP &&
|
|
completeRegistrationClientOrProvider === CLIENT &&
|
|
<InitializeClientForm />}
|
|
{currentStep === COMPLETE_INFORMATION_STEP &&
|
|
completeRegistrationClientOrProvider === PROVIDER &&
|
|
<InitializeProviderForm />}
|
|
</Grid.Row>
|
|
</Grid>
|
|
</Modal.Content>
|
|
</Modal>
|
|
);
|
|
|
|
export default connect(mapStateToProps)(CompleteRegistration);
|