parent
e69773ac8e
commit
561664a701
9 changed files with 251 additions and 18 deletions
@ -0,0 +1,102 @@ |
|||||||
|
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 { |
||||||
|
setCompleteRegistrationStep |
||||||
|
} from "../../actions/user/reducer.actions"; |
||||||
|
import { |
||||||
|
USER_INFO_STEP, |
||||||
|
CLIENT_OR_PROVIDER_STEP, |
||||||
|
COMPLETE_INFORMATION_STEP |
||||||
|
} from "../../constants/user.constants"; |
||||||
|
|
||||||
|
class CompleteRegistration extends Component { |
||||||
|
onChangeStep = (event, data) => { |
||||||
|
event.preventDefault(); |
||||||
|
this.props.dispatch(setCompleteRegistrationStep(data.step)); |
||||||
|
}; |
||||||
|
|
||||||
|
render() { |
||||||
|
const { |
||||||
|
userToken, |
||||||
|
completeRegistrationCurrentStep, |
||||||
|
completeRegistrationMaxStep, |
||||||
|
completeRegistrationClientOrProvider |
||||||
|
} = this.props; |
||||||
|
if (!userToken) return <Redirect to="/auth/login" />; |
||||||
|
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 && <p>User Info</p>} |
||||||
|
{currentStep === CLIENT_OR_PROVIDER_STEP && <p>Client or Provider</p>} |
||||||
|
{currentStep === COMPLETE_INFORMATION_STEP && <p>Complete Info</p>} |
||||||
|
</Grid.Row> |
||||||
|
</Grid> |
||||||
|
</Modal.Content> |
||||||
|
</Modal> |
||||||
|
); |
||||||
|
|
||||||
|
export default connect(mapStateToProps)(CompleteRegistration); |
Loading…
Reference in new issue