%PDF- %PDF-
Direktori : /home/emergentqj/actioncivile/pre-auth/def/static/js/components/ |
Current File : /home/emergentqj/actioncivile/pre-auth/def/static/js/components/SignUp.jsx |
import React from "react"; import PropTypes from "prop-types"; import { withTranslation } from "react-i18next"; import { withStyles } from "@material-ui/core/styles"; import { Link } from "react-router-dom"; import ToggleButton from "@material-ui/lab/ToggleButton"; import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup"; import SignUpPrivateContainer from "containers/SignUpPrivateContainer"; import SignUpBusinessContainer from "containers/SignUpBusinessContainer"; import styles from "common/components/styles"; import Title from "common/components/Title"; import Box from "common/components/Box"; import { BASE_PATH } from "constants/common"; import history from "../utils/history"; import { getUniversalCookies } from "../utils/cookies"; // import { trackMixpanelActions } from "../utils"; // import MIXPANEL_ACTIONS from "../constants/mixpanel_actions"; import DropOff from "./DropOff"; class SignUp extends React.Component { constructor(props) { const isFinal = () => window.location.pathname.split("/").indexOf("final") !== -1 && !!getUniversalCookies().get("epSsAuthToken"); super(props); this.state = { packageId: `${0}`, currentStep: isFinal() === true ? 3 : 0, selectedForm: window.location.pathname.split("/").indexOf("business") === -1 ? 1 : 0, step: 1, }; } /** * */ componentDidMount() { const paramsPackageId = new URLSearchParams(window.location.search).get("packageId"); if (paramsPackageId) { this.setState({ packageId: paramsPackageId, }); } } /** * */ handleNext = () => { if (this.state.currentStep < 3) { this.setState((prevState) => ({ currentStep: prevState.currentStep + 1, })); } }; /** * */ handlePrev = () => { if (this.state.currentStep > 0) { this.setState((prevState) => ({ currentStep: prevState.currentStep - 1, })); } }; /** * */ handleFormSelect = (selectedForm) => { if (this.state.selectedForm === selectedForm || selectedForm == null) return; this.setState({ selectedForm }); history.push(`${BASE_PATH}/sign-up/${selectedForm ? "private" : "business"}`); }; /** * TODO investigate is it in use */ handleContinue = () => { this.setState({ step: 2, }); }; /** * */ render() { const { classes, t, countryCode, showSignUpBusinessForm, } = this.props; if (!countryCode) { return <span>Please choose your country first</span>; } /* If signup is not allowed, only show private signup */ if (!showSignUpBusinessForm) this.handleFormSelect(1); return ( <DropOff> <Box> {this.state.selectedForm === 1 || (this.state.selectedForm === 0 && this.state.currentStep === 0) ? ( <Title>{t("signUpTitle")}</Title> ) : null} </Box> {showSignUpBusinessForm && this.state.currentStep === 0 ? ( <ToggleButtonGroup classes={{ root: classes.buttonGroup, }} exclusive value={this.state.selectedForm} onChange={(e, v) => { this.handleFormSelect(v); }} aria-label="select form" > <ToggleButton classes={{ root: classes.button, selected: classes.buttonSelected, }} value={0} aria-label={t("signUpTabBusiness")} > {t("signUpTabBusiness").toUpperCase()} </ToggleButton> <ToggleButton classes={{ root: classes.button, selected: classes.buttonSelected, }} value={1} aria-label={t("signUpTabPersonal")} > {t("signUpTabPersonal").toUpperCase()} </ToggleButton> </ToggleButtonGroup> ) : null} {!!this.state.selectedForm && ( <SignUpPrivateContainer extraClass="signup-private-v2" /> )} {!this.state.selectedForm && ( <SignUpBusinessContainer currentStep={this.state.currentStep} handleNext={this.handleNext} handlePrev={this.handlePrev} packageId={this.state.packageId} step={this.state.step} handleContinue={this.handleContinue} /> )} {this.state.selectedForm === 1 || (this.state.selectedForm === 0 && this.state.currentStep < 1) ? ( <Box> <p> {t("general-already-have-account")} {" "} <Link to="/" className={classes.link}> {t("auth.login.login-button")} </Link> </p> </Box> ) : null} </DropOff> ); } } SignUp.propTypes = { classes: PropTypes.instanceOf(Object).isRequired, countryCode: PropTypes.string, showSignUpBusinessForm: PropTypes.bool, t: PropTypes.func.isRequired, }; SignUp.defaultProps = { countryCode: "", showSignUpBusinessForm: false, }; export default withTranslation()(withStyles(styles)(SignUp));