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 ;
return (
);
}
}
function mapStateToProps(state) {
return {
...state.user,
userToken: state.auth.userToken
};
}
const CompleteRegistrationView = ({
currentStep,
maxStep,
completeRegistrationClientOrProvider,
onChangeStep
}) => (
Complete Registration
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}
/>
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}
/>
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}
/>
{currentStep === USER_INFO_STEP && User Info
}
{currentStep === CLIENT_OR_PROVIDER_STEP && Client or Provider
}
{currentStep === COMPLETE_INFORMATION_STEP && Complete Info
}
);
export default connect(mapStateToProps)(CompleteRegistration);