diff --git a/src/components/LegalBox/index.js b/src/components/LegalBox/index.js index fa578205..162ac00c 100644 --- a/src/components/LegalBox/index.js +++ b/src/components/LegalBox/index.js @@ -9,8 +9,13 @@ class LegalBox extends Component { } componentDidMount(){ - if(this.props.licenseID){ - window['ceg_'+this.props.licenseID.replace(/-/g, '_')].init(); + const cegKey = `ceg_${this.props.licenseID.replace(/-/g, "_")}`; + + if ( + this.props.licenseID && + Object.prototype.hasOwnProperty.call(window, cegKey) + ) { + window[cegKey].init(); } } diff --git a/src/components/RegisterForm/index.jsx b/src/components/RegisterForm/index.jsx index 843db758..d27d45e1 100644 --- a/src/components/RegisterForm/index.jsx +++ b/src/components/RegisterForm/index.jsx @@ -1,277 +1,302 @@ import React, { Component } from "react"; import PropTypes from "prop-types"; -import { Button, Typography, InputText, Checkbox, Toggle, Select } from "components"; +import { + Button, + Typography, + InputText, + Checkbox, + Toggle, + Select, +} from "components"; import { connect } from "react-redux"; -import { compose } from 'lodash/fp'; +import { compose } from "lodash/fp"; +import loading from "assets/loading-circle.gif"; import Cache from "../../lib/cache/cache"; -import { CopyText } from '../../copy'; +import { CopyText } from "../../copy"; import { getAppCustomization, getApp } from "../../lib/helpers"; -import loading from 'assets/loading-circle.gif'; import generateMonths from "../../utils/generateMonths"; import generateIntegers from "../../utils/generateIntegers"; import leadingWithZero from "../../utils/leadingWithZero"; import "./index.css"; -import getYearsAgo from '../../utils/getYearsAgo'; -import { isValidAge, isValidCountries, isValidEmail } from "../../utils/isValid"; +import getYearsAgo from "../../utils/getYearsAgo"; +import { + isValidAge, + isValidCountries, + isValidEmail, +} from "../../utils/isValid"; class RegisterForm extends Component { - static propTypes = { - onSubmit: PropTypes.func.isRequired, - error: PropTypes.number - }; - - static defaultProps = { - error: null - }; - - constructor({ ln, ...props }) { - super(props); - const copy = CopyText.registerFormIndex[ln]; - - this.state = { - username: "", - password: "", - email: "", - isLoading: false, - isConfirmed: false, - terms: null, - month: { text: copy.INDEX.INPUT_TEXT.LABEL[7] }, - day: { text: copy.INDEX.INPUT_TEXT.LABEL[6] }, - year: { text: copy.INDEX.INPUT_TEXT.LABEL[8] }, - restrictedCountries: [], - userCountry: { text: copy.INDEX.INPUT_TEXT.LABEL[9] } - }; - } - - componentDidMount = async () => { - const { restrictedCountries } = await getApp(); - - this.projectData(this.props) - this.setState({ restrictedCountries }); - } - - componentWillReceiveProps(props){ - this.projectData(props); - } - - projectData = async (props) => { - const { ln } = props; - const { footer } = await getAppCustomization(); - const supportLinks = footer.languages.find(f => f.language.isActivated === true && f.language.prefix === ln.toUpperCase()).supportLinks; - const terms = supportLinks.find(s => { return s.name.trim().toLowerCase() === "terms of service"}); + constructor(props) { + super(props); + const copy = CopyText.registerFormIndex[props.ln]; - this.setState({ terms }); - } + this.projectData = async () => { + const { restrictedCountries } = await getApp(); + const { footer } = await getAppCustomization(); + const { supportLinks } = footer.languages.find( + ({ language }) => + language.isActivated && language.prefix === props.ln.toUpperCase(), + ); + const terms = supportLinks.find( + ({ name }) => name.trim().toLowerCase() === "terms of service", + ); - handleSubmit = async event => { - event.preventDefault(); - this.setState({ isLoading: true }); - const { username, password, email, day, month, year, userCountry } = this.state; - const birthDate = `${year.value}-${month.value}-${day.value}`; - const { onSubmit } = this.props; - const affiliateLink = Cache.getFromCache("affiliate"); - - - if (onSubmit && this.handleFormValidity()) { - await onSubmit({ - username, - password, - email, - birthDate, - affiliateLink, - userCountry - }); - } - - this.setState({ isLoading: false }); + this.setState({ terms, restrictedCountries }); }; + this.handleSubmit = async event => { + event.preventDefault(); + this.setState({ isLoading: true }); + const { + username, + password, + email, + day, + month, + year, + userCountry, + } = this.state; + const affiliateLink = Cache.getFromCache("affiliate"); - handleFormValidity = () => { - const { password, username, email, isConfirmed, terms, userCountry, day, month, year } = this.state; + if (props.onSubmit && this.handleFormValidity()) { + await props.onSubmit({ + username, + password, + email, + birthDate: `${year.value}-${month.value}-${day.value}`, + affiliateLink, + userCountry, + }); + } + }; + this.handleFormValidity = () => { + const { + password, + username, + email, + isConfirmed, + terms, + userCountry, + day, + month, + year, + } = this.state; - return ( - username !== "" && + return ( + username && isValidEmail(email) && - password !== "" && - isValidAge(`${year.value}-${month.value}-${day.value}`) && - userCountry.value && - (!terms || isConfirmed === true) - ); + password && + year.value && + month.value && + day.value && + isValidAge(`${year.value}-${month.value}-${day.value}`) && + userCountry.value && + (!terms || isConfirmed) + ); }; - - handleTextChange = event => { - this.setState({ [event.target.name]: event.target.value }); + this.handleMapSelection = value => ({ + text: value, + value, + channel_id: value, + }); + this.handleTextChange = event => { + this.setState({ [event.target.name]: event.target.value }); }; - - handleSelectChange = props => ({ option }) => { - this.setState({ [props]: option }); + this.handleSelectChange = prop => ({ option }) => { + this.setState({ [prop]: option }); + }; + this.handleConfirm = () => { + this.setState(state => ({ isConfirmed: !state.isConfirmed })); + }; + this.renderYearOptions = () => + generateIntegers({ + from: getYearsAgo(72), + to: getYearsAgo(18), + descend: true, + }).map(this.handleMapSelection); + this.renderMonthOptions = () => + generateMonths(props.ln, "MMM").map((month, index) => ({ + text: month, + value: leadingWithZero(index + 1), + channel_id: month, + })); + this.renderDayOptions = () => + generateIntegers({ from: 1, to: 31 }).map(this.handleMapSelection); + this.renderCountryOptions = restrictedCountries => + isValidCountries(restrictedCountries).map(({ country, data }) => ({ + text: data.name, + value: country, + channel_id: country, + })); + this.state = { + username: "", + password: "", + email: "", + isLoading: false, + isConfirmed: false, + terms: null, + month: { text: copy.INDEX.INPUT_TEXT.LABEL[7] }, + day: { text: copy.INDEX.INPUT_TEXT.LABEL[6] }, + year: { text: copy.INDEX.INPUT_TEXT.LABEL[8] }, + restrictedCountries: [], + userCountry: { text: copy.INDEX.INPUT_TEXT.LABEL[9] }, }; - - handleConfirm = () => { - const { isConfirmed } = this.state; - - this.setState({ isConfirmed : !isConfirmed }); - } - - renderCountryOptions = () => { - const { restrictedCountries } = this.state; - - return isValidCountries(restrictedCountries).map(({ country, data }) => ({ - text: data.name, - value: country, - channel_id: country - })); - }; - - renderYearOptions = () => - generateIntegers({ - from: getYearsAgo(72), - to: getYearsAgo(18), - descend: true - }).map(year => ({ text: year, value: year, channel_id: year })); - - renderMonthOptions = () => { - const { ln } = this.props; - - return generateMonths(ln, "MMM").map((month, index) => ({ - text: month, - value: leadingWithZero(index), - channel_id: month - })); } - renderDayOptions = () => - generateIntegers({ from: 0, to: 30 }).map(day => ({ - text: leadingWithZero(day), - value: leadingWithZero(day), - channel_id: leadingWithZero(day) - })); - - render() { - const { error } = this.props; - const { username, password, email, isLoading, isConfirmed, terms, month, day, year, userCountry } = this.state; - const {ln} = this.props; - const copy = CopyText.registerFormIndex[ln]; - const { skin } = getAppCustomization(); + componentDidMount() { + this.projectData(); + } - return ( -
-
- -
-
- -
- - - {copy.INDEX.TYPOGRAPHY.TEXT[4]} - -
- -
- - { - terms - ? -
-
-
- { - skin.skin_type == "digital" - ? - this.handleConfirm()} showText={false}/> - : - this.handleConfirm()} isSet={isConfirmed} id={'isConfirmed'}/> - } -
-
- - I Agree with the Terms & Conditions - -
-
-
- : - null - } -
- {error ? ( - - {error.message} - - ) : null} -
- -
- -
- - ); - } -} + + + + ); + const renderError = error && ( +
+ + {error.message} + +
+ ); + const renderLoader = isLoading ? ( + Loading + ) : ( + + {copy.INDEX.TYPOGRAPHY.TEXT[0]} + + ); - -function mapStateToProps(state){ - return { - profile: state.profile, - ln : state.language - }; + return ( +
+
+ +
+
+ +
+ + + {copy.INDEX.TYPOGRAPHY.TEXT[4]} + +
+ +
+ + {renderTerms} + {renderError} +
+ +
+ + ); + } } - -export default compose(connect(mapStateToProps))(RegisterForm); +RegisterForm.propTypes = { + onSubmit: PropTypes.func.isRequired, + error: PropTypes.number, +}; +RegisterForm.defaultProps = { + error: null, +}; +export default compose( + connect(state => ({ profile: state.profile, ln: state.language })), +)(RegisterForm); diff --git a/src/containers/App/index.js b/src/containers/App/index.js index 9b9d5236..fe566669 100644 --- a/src/containers/App/index.js +++ b/src/containers/App/index.js @@ -398,7 +398,6 @@ class App extends Component { this.setState({ error: null }); const response = await register(form); if (response.status !== 200) { return this.setState({ error: response }); } -console.log(form, 'form') await this.handleLogin({username : form.username, password : form.password}); const { user, app } = this.state; if (user) { diff --git a/src/utils/generateIntegers.js b/src/utils/generateIntegers.js index 84f8568f..89efe7a2 100644 --- a/src/utils/generateIntegers.js +++ b/src/utils/generateIntegers.js @@ -1,8 +1,10 @@ +import leadingWithZero from "./leadingWithZero"; + const generateIntegers = ({ from = 0, to = 0, descend = false }) => { const integers = []; - for (let index = from; index < to + 1; index += 1) { - integers.push(index); + for (let index = from; index <= to; index += 1) { + integers.push(leadingWithZero(index)); } return descend ? integers.reverse() : integers; diff --git a/src/utils/generateMonths.js b/src/utils/generateMonths.js index 9cbf773e..aa4eb86e 100644 --- a/src/utils/generateMonths.js +++ b/src/utils/generateMonths.js @@ -2,7 +2,7 @@ import moment from "moment"; import "moment/min/locales"; const generateMonths = (locale, format) => { - moment.locale(locale); + moment().locale(locale); const userLocale = moment.locale(); const months = []; diff --git a/src/utils/isValid.js b/src/utils/isValid.js index 116e9f40..c1e98700 100644 --- a/src/utils/isValid.js +++ b/src/utils/isValid.js @@ -29,6 +29,7 @@ const isValidAge = (birthDate) => { const thisDay = thisMoment.getDate(); const ageFx = moment( `${thisYear}-${leadingWithZero(thisMonth)}-${thisDay}`, + "YYYY-MM-DD", ).diff(birthDate, "years"); const isLegalAge = ageFx >= 18; const isUndefinedAge = ageFx > 72; diff --git a/src/utils/leadingWithZero.js b/src/utils/leadingWithZero.js index a654cb8c..074cc0b6 100644 --- a/src/utils/leadingWithZero.js +++ b/src/utils/leadingWithZero.js @@ -1,5 +1,4 @@ -const leadingWithZero = index => { - return `0${index + 1}`.slice(-2); -}; +const leadingWithZero = index => + index >= 1 && index <= 9 ? `0${index}` : index; export default leadingWithZero;