diff --git a/src/renderer/component/userFieldNew/index.js b/src/renderer/component/userFieldNew/index.js index 5cda23cc0..2b2dd6b96 100644 --- a/src/renderer/component/userFieldNew/index.js +++ b/src/renderer/component/userFieldNew/index.js @@ -16,7 +16,7 @@ const select = state => ({ const perform = dispatch => ({ addUserEmail: email => dispatch(doUserEmailNew(email)), - addUserPhone: phone => dispatch(doUserPhoneNew(phone)), + addUserPhone: (phone, country_code) => dispatch(doUserPhoneNew(phone, country_code)), }); export default connect(select, perform)(UserFieldNew); diff --git a/src/renderer/component/userFieldNew/view.jsx b/src/renderer/component/userFieldNew/view.jsx index 86f43cf00..8fd8e4838 100644 --- a/src/renderer/component/userFieldNew/view.jsx +++ b/src/renderer/component/userFieldNew/view.jsx @@ -8,19 +8,53 @@ class UserFieldNew extends React.PureComponent { this.state = { phone: '', email: '', + country_code: '+1', }; + + this.formatPhone = this.formatPhone.bind(this); + } + + formatPhone(value) { + const { country_code } = this.state; + value = value.replace(/\D/g, ''); + if (country_code === '+1') { + if (!value) { + return ''; + } else if (value.length < 4) { + return value; + } else if (value.length < 7) { + return `(${value.substring(0, 3)}) ${value.substring(3)}`; + } + const fullNumber = `(${value.substring(0, 3)}) ${value.substring(3, 6)}-${value.substring( + 6 + )}`; + return fullNumber.length <= 14 ? fullNumber : fullNumber.substring(0, 14); + } + return value; + } + + formatCountryCode(value) { + if (value) { + return `+${value.replace(/\D/g, '')}`; + } + return '+1'; } handleChanged(event, fieldType) { + const formatter = { + email: _ => _, + phone: this.formatPhone, + country_code: this.formatCountryCode, + }; this.setState({ - [fieldType]: event.target.value, + [fieldType]: formatter[fieldType](event.target.value), }); } handleSubmit() { - const { email, phone } = this.state; + const { email, phone, country_code } = this.state; if (phone) { - this.props.addUserPhone(phone); + this.props.addUserPhone(phone.replace(/\D/g, ''), country_code.replace(/\D/g, '')); } else { this.props.addUserEmail(email); } @@ -37,10 +71,20 @@ class UserFieldNew extends React.PureComponent { )}