Skip to content

Fix for issue# 2857 on connect-app #313

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
RishiRajSahu merged 3 commits into from
Mar 5, 2019
Merged

Fix for issue# 2857 on connect-app #313

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f289a9f
Bottom link is now clickable in WizardRight, Continue button fix in R…
akumar1503 Feb 26, 2019
0dbb8ac
+ sign appears when country is selected
akumar1503 Feb 27, 2019
dc5ef15
added + sign
akumar1503 Feb 27, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 22 additions & 22 deletions components/Formsy/PhoneInput.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {}
Expand All @@ -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 })
}
}

Expand All @@ -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}` } })
}
}
}
Expand All @@ -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 (
Expand All @@ -99,20 +99,20 @@ class PhoneInput extends Component {
max={maxValue}
/>
<Dropdown handleKeyboardNavigation pointerShadow>
<div className="dropdown-menu-header flex center middle">{this.state.currentCountry ? this.state.currentCountry.alpha3 : ''}
<div className="dropdown-menu-header flex center middle">{this.state.currentCountry ? this.state.currentCountry.alpha3 : ''}
<IconDown width={20} height={12} fill="#fff" wrapperClass="arrow" /></div>
<ul className="dropdown-menu-list">
{
this.props.listCountry.map((country, i) => {
/* eslint-disable react/jsx-no-bind */
return <li tabIndex="-1" className={(this.state.currentCountry.code === country.code) ? 'selected' : ''} onClick={() => this.choseCountry(country)} key={i}><a href="javascript:;">{country.name}</a></li>
})
}
</ul>
</Dropdown>
<ul className="dropdown-menu-list">
{
this.props.listCountry.map((country, i) => {
/* eslint-disable react/jsx-no-bind */
return <li tabIndex="-1" className={(this.state.currentCountry.code === country.code) ? 'selected' : ''} onClick={() => this.choseCountry(country)} key={i}><a href="javascript:;">{country.name}</a></li>
})
}
</ul>
</Dropdown>
</div>
{this.isValidInput() && showCheckMark && (
<IconUICheckSimple wrapperClass="check-success-icon" width={10} height={10} fill="#5CC900"/>
<IconUICheckSimple wrapperClass="check-success-icon" width={10} height={10} fill="#5CC900" />
)}
{readonly && (
<div styleName="readonly-value">
Expand All @@ -121,14 +121,14 @@ class PhoneInput extends Component {
</div>
)}

{ hasError ? (<p className="error-message">{errorMessage}</p>) : (this.props.forceErrorMessage && (<p className="error-message">{this.props.forceErrorMessage}</p>))}
{hasError ? (<p className="error-message">{errorMessage}</p>) : (this.props.forceErrorMessage && (<p className="error-message">{this.props.forceErrorMessage}</p>))}
</div>
)
}
}

PhoneInput.defaultProps = {
onChange: () => {},
onChange: () => { },
forceErrorMessage: null,
listCountry: [],
showCheckMark: false
Expand Down
29 changes: 14 additions & 15 deletions components/RegistrationScreen/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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 })
}
}

Expand All @@ -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
Expand All @@ -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
Expand All @@ -114,7 +114,7 @@ class RegistrationScreen extends Component {
<div className="container flex column middle center">
<div className="title">Let's start with introductions</div>
<div className="sub-title">First we need to know you a bit better</div>
{vm.errorMessage && (<div className="server-error-message">{vm.errorMessage}</div>)}
{vm.errorMessage && (<div className="server-error-message">{vm.errorMessage}</div>)}
<Formsy.Form onValidSubmit={this.submit} onValid={this.enableButton} onInvalid={this.disableButton} className="form flex column middle center">
<TextInput
wrapperClass={'input-container'}
Expand Down Expand Up @@ -203,7 +203,7 @@ class RegistrationScreen extends Component {
validator={vm.usernameIsFree}
showCheckMark
/>
{ !vm.ssoUser && <PasswordInput
{!vm.ssoUser && <PasswordInput
wrapperClass={'input-container'}
label="Create a password (8–64 characters, A–Z, 0–9, . _ - ! ? allowed)"
name="password"
Expand All @@ -227,10 +227,9 @@ class RegistrationScreen extends Component {
wrapperClass={'input-container'}
label="I agree to receive other communications from Topcoder."
name="agreeTerm"
required
/>
<div className="space" />
<button type="submit" className="tc-btn tc-btn-sm tc-btn-primary flex middle center" disabled={vm.loading || !this.state.canSubmit || !this.state.country}>Continue</button>
<button type="submit" className="tc-btn tc-btn-sm tc-btn-primary flex middle center" disabled={vm.loading || !this.state.canSubmit || !this.state.country}>Continue</button>
<div className="by-clicking-continue">By clicking “Continue” you agree to our <a href={vm.termsUrl}>Terms</a> and <a href={vm.privacyUrl}>Privacy Policy</a>.
We are never going to sell your data or send you spam messages. Your email is going to be used for communication purposes only.</div>
</Formsy.Form>
Expand Down
2 changes: 1 addition & 1 deletion components/Wizard/WizardRight/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down