From f289a9f2f362573a911e5c7de6d4b4b115d22e8d Mon Sep 17 00:00:00 2001 From: Abhishek Kumar Date: Tue, 26 Feb 2019 19:18:02 +0530 Subject: [PATCH 1/3] Bottom link is now clickable in WizardRight, Continue button fix in RegistrationScreen and remove + sign requirement in phone numbers in Formsy.PhoneInput --- components/Formsy/PhoneInput.jsx | 44 ++++++++++++------------ components/RegistrationScreen/index.jsx | 29 ++++++++-------- components/Wizard/WizardRight/style.scss | 2 +- 3 files changed, 37 insertions(+), 38 deletions(-) diff --git a/components/Formsy/PhoneInput.jsx b/components/Formsy/PhoneInput.jsx index ce167f70b..56a47c8d6 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) 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.props.listCountry.map((country, i) => { - /* eslint-disable react/jsx-no-bind */ - return
  • this.choseCountry(country)} key={i}>{country.name}
    • - }) - } -
- +
    + { + this.props.listCountry.map((country, i) => { + /* eslint-disable react/jsx-no-bind */ + return
  • this.choseCountry(country)} key={i}>{country.name}
    • + }) + } +
+
{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; From 0dbb8acade0f6460357e06cf1ef230c73ac7d8fc Mon Sep 17 00:00:00 2001 From: Abhishek Kumar Date: Wed, 27 Feb 2019 17:34:56 +0530 Subject: [PATCH 2/3] + sign appears when country is selected --- components/Formsy/PhoneInput.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Formsy/PhoneInput.jsx b/components/Formsy/PhoneInput.jsx index 56a47c8d6..b9888549f 100644 --- a/components/Formsy/PhoneInput.jsx +++ b/components/Formsy/PhoneInput.jsx @@ -36,7 +36,7 @@ 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] if (currentCountry) { From dc5ef155cf8a15fe90ef22a7f8ea9989cf33d9b6 Mon Sep 17 00:00:00 2001 From: Abhishek Kumar Date: Wed, 27 Feb 2019 17:43:41 +0530 Subject: [PATCH 3/3] added + sign --- components/Formsy/PhoneInput.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Formsy/PhoneInput.jsx b/components/Formsy/PhoneInput.jsx index b9888549f..b9367b4b3 100644 --- a/components/Formsy/PhoneInput.jsx +++ b/components/Formsy/PhoneInput.jsx @@ -62,7 +62,7 @@ class PhoneInput extends Component { if (asYouTypeTmp.countryCallingCode) { this.setState({ currentCountry: country }) - this.changeValue({ target: { value: `${asYouTypeTmp.countryCallingCode}${phoneNumber}` } }) + this.changeValue({ target: { value: `+${asYouTypeTmp.countryCallingCode}${phoneNumber}` } }) } } }