diff --git a/components/Formsy/PhoneInput.jsx b/components/Formsy/PhoneInput.jsx index ce167f70b..b9367b4b3 100644 --- a/components/Formsy/PhoneInput.jsx +++ b/components/Formsy/PhoneInput.jsx @@ -15,10 +15,10 @@ class PhoneInput extends Component { constructor(props) { super(props) - + this.changeValue = this.changeValue.bind(this) this.choseCountry = this.choseCountry.bind(this) - this.isValidInput= this.isValidInput.bind(this) + this.isValidInput = this.isValidInput.bind(this) this.state = { currentCountry: {}, asYouType: {} @@ -36,11 +36,11 @@ class PhoneInput extends Component { this.props.setValue(value) let currentCountry const asYouType = new AsYouType() - asYouType.input(value) + asYouType.input(value[0] === '+' ? value : '+' + value) if (asYouType.country) { - currentCountry = _.filter(this.props.listCountry, {alpha2: asYouType.country})[0] + currentCountry = _.filter(this.props.listCountry, { alpha2: asYouType.country })[0] if (currentCountry) { - this.setState({asYouType, currentCountry}) + this.setState({ asYouType, currentCountry }) } } @@ -54,15 +54,15 @@ class PhoneInput extends Component { choseCountry(country) { if (country.code !== this.state.currentCountry.code) { const asYouTypeTmp = new AsYouType(country.alpha2) - const {asYouType} = this.state + const { asYouType } = this.state let phoneNumber = '' if (asYouType && asYouType.getNationalNumber) { phoneNumber = ` ${asYouType.getNationalNumber()}` } if (asYouTypeTmp.countryCallingCode) { - this.setState({currentCountry: country}) - this.changeValue({target: { value: `+${asYouTypeTmp.countryCallingCode}${phoneNumber}` }}) + this.setState({ currentCountry: country }) + this.changeValue({ target: { value: `+${asYouTypeTmp.countryCallingCode}${phoneNumber}` } }) } } } @@ -76,7 +76,7 @@ class PhoneInput extends Component { [styles['readonly-wrapper']]: readonly, 'phone-input-container': true }) - const classes = classNames('tc-file-field__inputs', {error: hasError}, {empty: this.props.getValue() === ''}) + const classes = classNames('tc-file-field__inputs', { error: hasError }, { empty: this.props.getValue() === '' }) const errorMessage = this.props.getErrorMessage() || this.props.validationError return ( @@ -99,20 +99,20 @@ class PhoneInput extends Component { max={maxValue} /> -
{this.state.currentCountry ? this.state.currentCountry.alpha3 : ''} +
{this.state.currentCountry ? this.state.currentCountry.alpha3 : ''}
- - + +
{this.isValidInput() && showCheckMark && ( - + )} {readonly && (
@@ -121,14 +121,14 @@ class PhoneInput extends Component {
)} - { hasError ? (

{errorMessage}

) : (this.props.forceErrorMessage && (

{this.props.forceErrorMessage}

))} + {hasError ? (

{errorMessage}

) : (this.props.forceErrorMessage && (

{this.props.forceErrorMessage}

))} ) } } PhoneInput.defaultProps = { - onChange: () => {}, + onChange: () => { }, forceErrorMessage: null, listCountry: [], showCheckMark: false diff --git a/components/RegistrationScreen/index.jsx b/components/RegistrationScreen/index.jsx index fc3cbc929..946d7a722 100644 --- a/components/RegistrationScreen/index.jsx +++ b/components/RegistrationScreen/index.jsx @@ -1,4 +1,4 @@ -import React, {Component} from 'react' +import React, { Component } from 'react' import Formsy from 'formsy-react' import TextInput from '../Formsy/TextInput' import PhoneInput from '../Formsy/PhoneInput' @@ -52,18 +52,18 @@ class RegistrationScreen extends Component { } reRender() { - this.setState({update: true}) + this.setState({ update: true }) } - onChangeCountry({country}) { - const {vm} = this.props + onChangeCountry({ country }) { + const { vm } = this.props if (!country || !country.code) { vm.phoneErrorMessage = 'Please enter a valid phone number.' this.reRender() } else { vm.phoneErrorMessage = null - this.setState({update: true, country}) + this.setState({ update: true, country }) } } @@ -80,14 +80,14 @@ class RegistrationScreen extends Component { } isValidForm() { - const {vm} = this.props - const {canSubmit} = this.state + const { vm } = this.props + const { canSubmit } = this.state return !vm.loading && canSubmit && !vm.usernameErrorMessage && !vm.emailErrorMessage && !vm.phoneErrorMessage && this.state.country } submit(form) { - const {vm} = this.props - const {country} = this.state + const { vm } = this.props + const { country } = this.state const fullName = form.name vm.phone = form.phone vm.title = form.title @@ -99,13 +99,13 @@ class RegistrationScreen extends Component { vm.country = country vm.firstName = fullName.trim().split(' ').slice(0, -1).join(' ') vm.lastName = fullName.trim().split(' ').slice(-1).join(' ') - + vm.submit() } render() { - const {vm} = this.props + const { vm } = this.props let preFillName = vm.firstName ? vm.firstName : null preFillName = vm.lastName ? `${preFillName} ${vm.lastName}` : preFillName const preFillEmail = vm.email ? vm.email : null @@ -114,7 +114,7 @@ class RegistrationScreen extends Component {
Let's start with introductions
First we need to know you a bit better
- {vm.errorMessage && (
{vm.errorMessage}
)} + {vm.errorMessage && (
{vm.errorMessage}
)} - { !vm.ssoUser &&
- +
By clicking “Continue” you agree to our Terms and Privacy Policy. We are never going to sell your data or send you spam messages. Your email is going to be used for communication purposes only.
diff --git a/components/Wizard/WizardRight/style.scss b/components/Wizard/WizardRight/style.scss index 29e65c5a5..6080b62de 100644 --- a/components/Wizard/WizardRight/style.scss +++ b/components/Wizard/WizardRight/style.scss @@ -11,7 +11,7 @@ box-shadow: inset 0 80px 50px -40px rgba(0,0,0,0.8); position: absolute; width: 100%; - height: 100%; + height: 100px; top: 0; left: 0; z-index: 1;