Add custom country code

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);

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}

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),
 });

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')}

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'
     )

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, {

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,