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,