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 { )} </p> <Form onSubmit={this.handleSubmit.bind(this)}> + <FormRow + type="text" + label="Country Code" + name="country_code" + value={this.state.country_code} + errorMessage={phoneErrorMessage} + onChange={event => { + this.handleChanged(event, 'country_code'); + }} + /> <FormRow type="text" label="Phone" - placeholder="(555) 555-5555" + placeholder={this.state.country_code === '+1' ? '(555) 555-5555' : '5555555555'} name="phone" value={this.state.phone} errorMessage={phoneErrorMessage} diff --git a/src/renderer/component/userFieldVerify/index.js b/src/renderer/component/userFieldVerify/index.js index d83396d81..12f160692 100644 --- a/src/renderer/component/userFieldVerify/index.js +++ b/src/renderer/component/userFieldVerify/index.js @@ -7,6 +7,7 @@ import { selectPhoneToVerify, selectEmailVerifyErrorMessage, selectPhoneVerifyErrorMessage, + selectUserCountryCode, } from 'redux/selectors/user'; import UserFieldVerify from './view'; @@ -14,6 +15,7 @@ const select = state => ({ isPending: selectEmailVerifyIsPending(state), email: selectEmailToVerify(state), phone: selectPhoneToVerify(state), + countryCode: selectUserCountryCode(state), emailErrorMessage: selectEmailVerifyErrorMessage(state), phoneErrorMessage: selectPhoneVerifyErrorMessage(state), }); diff --git a/src/renderer/component/userFieldVerify/view.jsx b/src/renderer/component/userFieldVerify/view.jsx index 0f09bdd78..56d78479e 100644 --- a/src/renderer/component/userFieldVerify/view.jsx +++ b/src/renderer/component/userFieldVerify/view.jsx @@ -40,10 +40,14 @@ class UserFieldVerify extends React.PureComponent { email, isPending, phone, + countryCode, } = this.props; return ( <Form onSubmit={this.handleSubmit.bind(this)}> - <p>Please enter the verification code sent to {phone || email}.</p> + <p> + Please enter the verification code sent to {countryCode ? `+${countryCode}` : ''} + {phone || email}. + </p> <FormRow type="text" label={__('Verification Code')} diff --git a/src/renderer/redux/actions/user.js b/src/renderer/redux/actions/user.js index e7b2c1e02..3836a7c06 100644 --- a/src/renderer/redux/actions/user.js +++ b/src/renderer/redux/actions/user.js @@ -3,7 +3,11 @@ import * as MODALS from 'constants/modal_types'; import Lbryio from 'lbryio'; import { doOpenModal, doShowSnackBar } from 'redux/actions/app'; import { doClaimRewardType, doRewardList } from 'redux/actions/rewards'; -import { selectEmailToVerify, selectPhoneToVerify } from 'redux/selectors/user'; +import { + selectEmailToVerify, + selectPhoneToVerify, + selectUserCountryCode, +} from 'redux/selectors/user'; import rewards from 'rewards'; export function doFetchInviteStatus() { @@ -78,11 +82,11 @@ export function doUserFetch() { }; } -export function doUserPhoneNew(phone) { +export function doUserPhoneNew(phone, country_code) { return dispatch => { dispatch({ type: ACTIONS.USER_PHONE_NEW_STARTED, - phone, + data: { phone, country_code }, }); const success = () => { @@ -99,7 +103,7 @@ export function doUserPhoneNew(phone) { }); }; - Lbryio.call('user', 'phone_number_new', { phone_number: phone, country_code: 1 }, 'post').then( + Lbryio.call('user', 'phone_number_new', { phone_number: phone, country_code }, 'post').then( success, failure ); @@ -116,6 +120,7 @@ export function doUserPhoneVerifyFailure(error) { export function doUserPhoneVerify(verificationCode) { return (dispatch, getState) => { const phoneNumber = selectPhoneToVerify(getState()); + const countryCode = selectUserCountryCode(getState()); dispatch({ type: ACTIONS.USER_PHONE_VERIFY_STARTED, @@ -128,7 +133,7 @@ export function doUserPhoneVerify(verificationCode) { { verification_code: verificationCode, phone_number: phoneNumber, - country_code: '1', + country_code: countryCode, }, 'post' ) diff --git a/src/renderer/redux/reducers/user.js b/src/renderer/redux/reducers/user.js index 52c98b925..3d2ea165c 100644 --- a/src/renderer/redux/reducers/user.js +++ b/src/renderer/redux/reducers/user.js @@ -55,11 +55,15 @@ reducers[ACTIONS.USER_FETCH_FAILURE] = state => user: null, }); -reducers[ACTIONS.USER_PHONE_NEW_STARTED] = state => - Object.assign({}, state, { +reducers[ACTIONS.USER_PHONE_NEW_STARTED] = (state, action) => { + const user = Object.assign({}, state.user); + user.country_code = action.data.country_code; + return Object.assign({}, state, { phoneNewIsPending: true, phoneNewErrorMessage: '', + user, }); +}; reducers[ACTIONS.USER_PHONE_NEW_SUCCESS] = (state, action) => Object.assign({}, state, { diff --git a/src/renderer/redux/selectors/user.js b/src/renderer/redux/selectors/user.js index 16f175345..a1b0df18e 100644 --- a/src/renderer/redux/selectors/user.js +++ b/src/renderer/redux/selectors/user.js @@ -21,6 +21,11 @@ export const selectUserPhone = createSelector( user => (user ? user.phone_number : null) ); +export const selectUserCountryCode = createSelector( + selectUser, + user => (user ? user.country_code : null) +); + export const selectEmailToVerify = createSelector( selectState, selectUserEmail,